Questions regarding the release of an Ionic app

gki · May 1, 2014, 9:59am

Hi all,

For the past few weeks I’ve been working on a mobile application build on top of Ionic. I’m a front-end developer and I love the framework. It’s allowed me to quickly build a solid app using the techniques I already know from web development.

Now that my app is nearing completion I have a few questions regarding the packaging and release process. My apologies if these have been asked before. I did some searching, but couldn’t find any answers.

I created my app using one of the generators: ionic start myAppName sidemenu. This gave me a great start to work with. However, I notice that this pre-fills a lot of app-specific values in files like config.xml and AndroidManifest.xml (there are probably more.)
Do I need to change these? Will they show up anywhere in the app stores or on the user’s device? Have I missed any? In which files do I change these (I seem to have multiple config.xml and AndroidManifest.xml files)
Here are some of the properties I’m talking about, and their default values:

Package name: com.ionicframework.starter
Description: An Ionic Framework and Cordova project.
Author name: Ionic Framework Team
Website: http://ionicframework.com/
E-mail: hi@ionicframework
I’d like to update the version number before releasing. In which file(s) do I update this?
What does the ionic.project file do, and do I need it?
How do I generate a APK file to upload to Google Play? Running ionic build android only gives me myApp-unsigned APKs? I guess I’ll need cordova build --release android?
Some questions regarding compression/obfuscation:

Is my app automatically compressed/obfuscated when it is packaged?

Does it make sense to minify js/html/css before packaging, for minimizing file size and making it harder to reverse-engineer?
Google recommends running ProGuard. Does Cordova run this automatically when signing or should I do this manually?
I’d like to update Ionic to the latest version. I am currently running 1.0.0-beta.1. Do I just replace all files in www/lib/ionic?

Thanks a lot in advance.

coen_warmer · May 1, 2014, 10:46am

1 Config.xml, AndroidManifest.xml and the Xcode project if you’re developing for iOS, are as far as I know the only files that have any bearing on the identification of your project on the device and in iTunes and Google Play stores.

You need to edit the config.xml file that’s in your project folder, not in the /www folder.
In previous versions of Ionic / Cordova they did make use of the one in the /www folder which could explain why in your case you have two config.xml files. But in my experience if you upgraded your Cordova to 3.4.1 and you started a project with ionic start projectName, you’ll have only one config.xml and it’s in the project folder. So that’s the one to change.

If you’ve added the Android platform with cordova platform add android before you changed the name and bundle in the config.xml file (which it seems is the case in your situation), it is a good idea to check the AndroidManifest.xml file as well, even though it should upgrade itself every time you run cordova build android.

You need to change the values you described in your post because A: the name will show up in the app, B: the bundle (com.ionicframework.starter) needs to be unique so the app stores that you are publishing on will know the app is indeed unique. When you will later update your app with a new version, the device will know it’s a new version of an existing app because of this bundle id.

The name of the app as it shows up below the icon on the device is set in config.xml in the name tag in config.xml. Like: <name>Your App Name</name>.

The bundle id can be found as the id property in widget.
Like:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns     = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.yourorganisationname.youruniqueidentifier"
        versionCode="10"
        version   = "1.0">

2 Version number is changed in config.xml. See above.
3 This file has no bearing on publishing your app. You can safely ignore it.
4 Check out the guide Ionic provided: http://ionicframework.com/docs/guide/publishing.html for all required steps. You indeed need cordova build android --release as well as several other commands to make a distributable APK.
5.1 As part of the publishing process (see previous step) you run a command called zipalign. This compresses your project.
5.2 There are reports that minifying increases performance (Compressed Code is Fast!). Minifying itself will do nothing to make your app harder to reverse-engineer. If somebody really wants to open your app, chances are he/she will also be able to reverse the minifying process.
5.3 Ionic doesn’t do this as far as I know. Also I just published an app to the Play Store without it and it published it just fine.
6 Yes. Please take note of the breaking changes.

gki · May 1, 2014, 12:03pm

Thanks @coen_warmer for the quick & detailed reply, much appreciated!

A few follow-up questions:

I seem to have Cordova version 3.4.0-0.1.3. Should I upgrade it to 3.4.1?
Based on the information you provided I can safely remove www/config.xml?

Got it, thanks!
I’ll remove it. What does Ionic use it for?
Thanks a lot for that link! Can’t believe I missed that.
Great.
I’ll look into minifying js/html/css. Even if it doesn’t do much for performance it should make for a smaller app. I know everything is crackable, but I’d rather give them obfuscated code than non-obfuscated code
OK.
Hm, I’ll check the release notes to see if it’d be beneficial to update.

Thanks again.

Edit:
Seems like the package name is also used in plugins/android.json:

    "installed_plugins": {
        "org.apache.cordova.console": {
            "PACKAGE_NAME": "com.ionicframework.starter"
        },
        "org.apache.cordova.device": {
            "PACKAGE_NAME": "com.ionicframework.starter"
        },
        "org.apache.cordova.statusbar": {
            "PACKAGE_NAME": "com.ionicframework.starter"
        },
        "com.cmackay.plugins.googleanalytics": {
            "PACKAGE_NAME": "com.ionicframework.starter"
        },
        "org.apache.cordova.inappbrowser": {
            "PACKAGE_NAME": "com.ionicframework.starter"
        },
        "com.rjfun.cordova.plugin.admob": {
            "PACKAGE_NAME": "com.ionicframework.starter"
        },
        "org.apache.cordova.network-information": {
            "PACKAGE_NAME": "com.ionicframework.starter"
        }
    },
    "dependent_plugins": {
        "com.google.playservices": {
            "PACKAGE_NAME": "com.ionicframework.starter"
        }
    }

Updating the package name in config.xml does not automatically update this.

coen_warmer · May 1, 2014, 1:59pm

Can’t hurt. Most of the changes from 3.4 to 3.4.1 deal with fixes in Cordova relating to the upgrade from iOS7 to 7.1 and the related upgrade from Xcode 5 to Xcode 5.1. If you’re only publishing an Android app it isn’t strictly necessary. But, like I said, it can’t hurt
About config.xml: Try making a backup of www/config.xml somewhere and then deleting the file. Then cordova build android. If it fails you need a config.xml in /www. If it doesn’t, you don’t
Cool
I’m not completely sure to be honest. Maybe some of the dev team or more experienced developers could share some light on this one? @mhartington? @Calendee?
No worries
Yup.
I don’t believe there a lot of breaking changes from beta 1 to beta 3, but you be using one of the features that use it… Always good to check the notes.
99% sure this updates automatically when you run cordova build android. Try it

Calendee · May 1, 2014, 2:12pm

After updating the cordova CLI, you need to also update your app.

> cordova platform update ios

mhartington · May 1, 2014, 2:15pm

The ionic.project file is meant for some top secret things…hehe

coen_warmer · May 1, 2014, 2:41pm

Secret stuff? I love secret stuff!

mhartington · May 1, 2014, 2:51pm

So secret even…

gki · May 18, 2014, 11:13am

I have another question: Should I change android:name="HelloCordova" in AndroidManifest.xml? According to Things That Cannot Change this value can never change after the first release. It doesn’t appear to be shown publicly anywhere so I guess it’s fine as-is, but I’d like to be sure before my first release

Thanks.

mhartington · May 18, 2014, 1:06pm

That is the name of your app, which is based on your config.xml. You should update your config.xml with a new name then run

$ cordova prepare

This will pass any changes in your confix, your www folder, and plugin changes, to your platform level projects.

gki · May 18, 2014, 8:55pm

@mhartington Thanks for your reply!

cordova prepare android didn’t seem to change anything for me. Maybe because I already had the files?

After doing the following manually I got it to work:

Change the filename of platforms/android/src/com/mydomain/www/HelloCordova.java to MyNewName.java
Open that file and change the classname in the following line: public class HelloCordova extends CordovaActivity

Does that look right to you? Did I forget anything?

mhartington · May 18, 2014, 9:28pm

I’ll be honest, I try to avoid messing with the java files, as I’m not too versed in java.

Are you update your project level config or the platform level?

To be safe, I’d remove the platform then add it back with the new changes

gki · May 18, 2014, 9:50pm

Problem is, if I remove the platform I lose my custom changes to AndroidManifest.xml and the contents of my res folder (icons and such.)

Changing the <name> property in the root config.xml does not seem to do much. It only changes a string in the following 2 files:

platforms/android/res/values/strings.xml
platforms/android/res/xml/config.xml

Updating the android:name in platforms/android/AndroidManifest.xml and updating the files mentioned above accordingly seems to do the trick. I just hope I don’t miss anything

eno · July 21, 2015, 8:41pm

When using any kind of automated build tool, its generally a bad idea to modify generated files that will likely get overwritten when adding/updating/building. Some stuff should be configured in config.xml - let Cordova update the project for you. Anything else can usually be done in a hooks script. This will pay off later if you ever need to automate the build or hand off to someone else.

GURURAJ_MOGER · April 8, 2016, 2:17pm

how to reduce video file size …it takes 10mb for 6 sec…(8 mp back camera)…
i want to release my app…but facebook released profile video that size is 4 mb with 6 sec.

the only reason for late is ionic…i cant reduce the file…
damid ionic…android studio for native is best…

this is my code i used video editor plugin and media plugin…

var VideoEditorOptions = {
OptimizeForNetworkUse: {
NO: 0,
YES: 1
},
OutputFileType: {
M4V: 0,
MPEG4: 1,
M4A: 2,
QUICK_TIME: 3
}
};

$scope.videoLoad = function() { //choose pic function starter , targetWidth:480,targetHeight:360

                               alert("videoLoad is called");

                        //  var options = { limit: 1, duration: 20};

navigator.device.capture.captureVideo(
videoCaptureSuccess,
{
limit: 1,
quality: 0,
duration: 20
});

function videoCaptureSuccess(mediaFiles) {
// Wrap this below in a ~100 ms timeout on Android if
// you just recorded the video using the capture plugin.
// For some reason it is not available immediately in the file system.
alert(“video cap”);
var file = mediaFiles[0];
var videoFileName = ‘video-name-here’; // I suggest a uuid

VideoEditor.transcodeVideo(
    videoTranscodeSuccess,
    {
        fileUri: file.fullPath,
        outputFileName: videoFileName,
        outputFileType: VideoEditorOptions.OutputFileType.MPEG4,
        optimizeForNetworkUse: VideoEditorOptions.OptimizeForNetworkUse.YES,
        saveToLibrary: true,
        maintainAspectRatio: true,
        width: 640,
        height: 640,
        videoBitrate: 1000000, // 1 megabit
        audioChannels: 2,
        audioSampleRate: 44100,
        audioBitrate: 128000, // 128 kilobits
        progress: function(info) {
           // console.log('transcodeVideo progress callback, info: ' + info);
           alert("pro");
        }
    });

}

function videoTranscodeSuccess(result) {

}

i can capture video…but its size is not reduced…
give me solution mr.ionic members