You are here

Creating & publishing hybrid apps with Ionic

Posted at 13:32 on Sun, 15th February 2015 in mobiledev, ionic.

Some lessons learnt whilst creating and publishing an Ionic based mobile app to the Google Play and Apple iOS App stores.

A couple of my colleagues had built mobile apps with jQuery Mobile and Cordova before but none of us had gone through the full process with Ionic yet. Ionic is a cordova based hybrid mobile framework which bundles up AngularJS as well as a set of mobile friendly GUI components, responsive styles and more. After sifting through the Ionic documentation and running through a few egghead.io videos on AnguarJS I wanted to build something.

I recently had a need to calculate stamp duty on the go and with all the duty regulations publicly available I figured it was an easy problem to try solve (not that it hadn’t been solved by numerous other app developers before). I’ve now built this app and released it for Android and iOS. The source code is all available on github too, so for those AngularJS buff's out there, feel free to tell me if I'm doing something stupid :).

It took most of one weekend plus a few nights after work to get something functional. There were a few road blocks along the way, so I thought I'd share these for others below:

  • First things first: development setup. You could use Ionic Box - which sets up everything for you or if you want to understand all the moving parts better, go for a manual setup (I wrote some instructions for a manual setup late last year). You may have to go with a manual setup regardless if you want to deploy to iOS, as Ionic Box only supports Android (not Ionic's fault of course!).

  • Try to leverage as many tools as possible to save your time. I used generator-ionic which brings together yeoman, grunt and Ionic. It will speed up AngularJS development by letting you use the scaffolding tool yeoman to create the scratch angular components. If you do this, be aware of this Childprocess bug with grunt in windows and an issue with the way it names the module in your generated services/controllers/directives too.

  • For IDE’s, I started using IntelliJ, but switched to Webstorm due to the more JS-friendly features. It also seemed less sluggish than IntelliJ. Webstorm, still lets you set up build processes that call grunt or ionic which can deploy to a USB device if needed.

  • If you aren’t familiar with Angular yet, put some hours into learning its concepts before starting to code your app. Like most open source frameworks there’s a tonne of material online for free. Check out this repository of links on github by @jmcunningham (over 8000 stars). On the topic of Angular documentation I wouldn't focus too much on anything that's older than 12 months old because AngularJS has quite a few versions, and things are moving really fast.

  • When it comes to releasing your app, doing so for Android (Google Developer License) is relatively simple and reasonably priced at AUD$25 whilst the Apple iOS Developer program will set you back AUD $149. Apple also make a distinction between being an individual developer or from a company. If you want to release apps for your company, then you have to go through this fairly intrusive process by obtaining something called a DUNS number.

  • If you’re planning to release to the iOS App store and have a deadline, make sure you factor in the average 8 day review process that Apple takes to review your app.

  • iOS compiling also requires you to have your own Mac (running xcode) as well as a mobile iOS device too. When you need to build a production release and deploy to the App store the doc’s tell you to use a feature called “Archive” which basically only becomes enabled when a real iOS mobile device is connected (someone feel free to correct me if I’m wrong).

  • If you’re releasing your app under the GPL, you might not be allowed to release to iOS because of Apple's strict licensing terms. If you're the copyright holder of the app, you might be able to release the app under a dual license, but seek proper advice on this first - you can read more about this over on stackexchange.

  • Ionic comes included with a really neat tool for generating your splash screens and icons for all platforms and screen sizes - check out the Ionic resources tool - but be aware of this annoying bug with updates to splash/icons too.

  • If you get your status bar (thats the bar at the top with the battery, signal and time) showing up over the top of your app, check out this stackoverflow thread.

Feel free to fork and play with my Australian Stamp Duty application on github. Here are a few other open source Ionic App’s that were a good reference point too:

I hope to add an 'email results" feature to the stamp duty app soon, but if anyone has any other suggestions, please give me a bell.

Finally if you want to use some of your mobiles native features, like the camera or OAuth, it seems this can be achieved with the plugins on ngcorvoda (setup by the same people as Ionic). I hope to give these plugins a go soon, so perhaps they’ll be another blog post on that one day. Anyway, have fun and cheers for reading.