Ionic - My Build Process

I'm not going to say much about the Ionic Framework today, because it's been so awesome for me to use! I love it!

What I want to talk about is the build process I have for mobile apps and how I've tweaked it over the past couple of months. You want to skip all of this stuff here? Go straight over to my Github repo and view the README. It takes you step by step through the installation process and what I've done. Included is a (hopefully) working example.

Here we go with an overview...

My mobile app development environment:

1. Windows 7 laptop
2. Ionic CLI
3. NPM - NodeJS package management
4. Atom - Editor
5. Code Compare - to view diffs in a nice format
6. Android phone with Lollipop
7. iPhone 5 with iOS 9.x

Overview

So I'm on a windows machine. Testing with Ionic and Android is a breeze. I do a majority of my user interface development and tweaking by using the laptop browser. ionic serve is a great thing for this. And with my Android phone connected, I can run it on my phone in a snap. I've never been too keen on the Android emulators, but maybe someday I'll give them another try.

One of the things I recently started doing was making sure I could test my DEV app and also install my LIVE (Production) app as well.

On Android, to do this, you need different package names. 

com.mycompany.myapp might be your package name for the LIVE app. Now if you were to install the DEV app with the same name, you will get a conflict. So you would have to uninstall one version, then install the other. To get around this, and make sure I can have both versions on the phone at the same time, I used the Cordova hooks during the build process to modify the package name.

Now when I do an ionic run, to test the dev version on my phone, the hook automatically changes the package name to com.mycompany.myapp1234. It's always with the 1234, just because.

Also the App Name is changed to include DEV at the end. This is done so that the icon I see when it is installed has "DEV" at the end. I can have both the DEV and PROD version of my apps installed side by side and I know exactly which is which.

Then, when I do an ionic build, the hook uses the LIVE package name and app name. There's also some other magic in there happening, more on that later.

iPhone / Build

The big thing here is...how do I build and test for my iPhone? Those Mac users have it easy eh!? You can install both iOS and Android development tools. ;)

1) Ionic Package - get to know it, it's pretty sweet. It's been in ALPHA state for awhile, but I haven't had any issues with it. I also haven't tried it with custom plugins or know if it works with custom plugins.
2) AppBlade or HockeyApp. - Both services have their differences and positives, but if I want to test on my iPhone I need one of these. I'm currently using both to see which I like. Another blog post someday...

Option:
I've also used PhoneGap Build in the past. Once you get through the headache of figuring out their config.xml setup, everything is a little easier to test with because you don't need AppBlade or HockeyApp. Once the build is complete, you can just scan the QR code on the apps build screen and the app installs on your phone. I've used it for both Android and iOS testing. Also, it's one upload, so you can build for both Android and iOS at the same time. Ionic Package requires one command per build you want to do. Not a problem.

So....

1. I upload the mobile app code to Ionic Package
2. Download the IPA
3. Upload the IPA to AppBlade/HockeyApp
4. Open my iPhone and run either AB/HA
5. Install the app and test

The process for PhoneGap Build is shorter:

1. Zip the source (one command to package it in a format for PGB)
2. upload to PGB
3. Scan the QR code with my phone - this installs it

Now this works great for my own personal mobile apps. If you have a client, then AppBlade/HockeyApp is definitely necessary! Lots of features to track devices, users, app builds etc.

Version Numbering

That nifty Github repo I mentioned earlier...it has some commands that help increment the mobile app version number as well.

So every time I do an ionic build, the patch version number is incremented automatically and placed into the config.xml of the ionic app. There are extra commands to increment the major or minor version numbers too. This is a pretty sweet part of the process too. No longer needing to worry about the version number. Also there is a JavaScript file generated that you can include in your app so that you can display the version number somewhere in your app. Example in the git repo.

Gotcha's/ Watch Outs

Ionic Package - as awesome as it is, it is still in ALPHA. You can have an unlimited FREE apps building on it (so far) but I have no clue what their pricing schema will be. That's because they also don't know yet. :) Also, iOS or Android builds...if you have a Windows phone, I haven't seen support for that yet.

PhoneGap Build - Having said that about Ionic Package......I have had far more problems with the $10 / month PhoneGap Build than I ever have had with Ionic Package. Not just with the config.xml issues, but also some of my builds just being hung in neverland, spinning away, and never completing with no signs of errors or anything. Oh, you can contact support, but it takes a day or two for them to get back to you. Also, occasionally the whole build system is down for whatever reason and no one can do a build. GOOD: PGB supports Windows phones and others as well.

My Github Repo - lionsdenmobile-ionic-package
Haven't tested the hooks and scripts on iOS.
Also, there are instructions in the README that tell which files you will need to merge. The properties in the package.json you will need to change are:

"name": "My App Name",
"version": "0.0.1",
"appId": "com.mycompanyname.myapp"

This isn't so much a problem as it is just a "be aware" type of thing.

Summary

I've started using this build process on all my apps, at both home and at work. I'm still tweaking it and trying to make it better.