Jul 19, 2016

Guide to Creating Native Mobile Apps with Ionic2

Over the last few years I’ve had a little online side-project that I’ve always wanted to make into a native app. Mostly for fun and learning, but also to make it available without a network connection. This is where Ionic2 steps in. Ionic2 uses Angular2 on top of Apache Cordova to generate native iOS and Android apps. It essentially allows for html/css/JS/AngularJS (which I know well) to be used instead of ObjectiveC/Swift (which I’m just a newbie).

The purpose of this post is to roughly document the process that I went through to install/build/run/publish the Ionic2 application. There are many Ionic2 guides out there that I used as reference, so I’m using this post to mostly document any gaps along the way. The beauty of this is that you can turn a small working hobby web app into a native published app store application in very short amount of time! All of the source is on GitHub though this post is more about the process than the actual code itself.

Installation

Installation is covered well in the Ionic2 Getting Started Guide

  • npm install -g ionic@beta
  • ionic start gaspumpr --v2 {generates a default app with the ‘tabs template’}
  • cd gaspumpr
  • ionic serve

The `ionic serve` runs the app in a browser in livereload mode. So any changes to the source will be noticed and rebuilt quickly and refreshed automatically into the browser. A simple thing, but if you’ve never used livereload you’ll quickly find it irreplaceable. Now go into Chrome DevTools and enable the Device Toolbar by clicking the phone-icon on the top left of the toolbar. Now you can pick a phone size to easily see how the app will look on various browsers.

Device Emulators

Before going further I wanted to see the app running in Android and iOS emulators.

  • Install Cordova – needed to run on the emulators
    • sudo npm install -g cordova
  • Android Emulator
    • ionic platform add android
    • Install Android Studio from https://developer.android.com/studio/index.html
      • After installing, launch it once and open project in platforms/android
      • Then close Android Studio
    • Genymotion Android Emulator – free
      • Install from https://www.genymotion.com/
        • This requires creating an account
      • Launch Genymotion and create a Virtual Device (I chose the Samsung Galaxy S6)
      • Now run the Virtual Device
    • ionic run android
    • At this point I received an error like Warning:Gradle version 2.10 is required. Current version is 2.2.1. If using the gradle wrapper, try editing the distributionUrl in gaspumpr\gradle\wrapper\gradle-wrapper.properties to gradle-2.10-all.zip. I think I got it because I had an older AndroidStudio previously installed before I did the `add android` command. In any case, the fix is to edit platforms/android/cordova/lib/builders/GradleBuilder.js and change the distributionUrl gradle wrapper to be 2.10 like this.

      Next I had an error like Error executing "adb devices": ADB server didn't ACK * failed to start daemon *. Fix this by going into Genymotion settings for ADB and select custom Android SDK and select your SDK location (mine is /users/jeffsheets/Library/Android/sdk). Thanks to this tutorial for the fix.

      After fixing this and running ionic run android I could see the app in the android emulator.

  • iOS Emulator
    • Install/update XCode on your Mac
    • ionic emulate ios {this will launch in the default emulator – iPhone 6s Plus for me}
    • ionic emulate ios --target="iPhone-6s, 9.3" {for running on 6s, similar for 5s}
      • Note: Supposedly you can run ionic emulate ios with –livereload to see file changes quickly in the emulator. But I couldn’t get it to work, so after any file change I’d have to rerun this command to see the changes.

Development

At this point I roughly copied all of the html source from my hobby project into the page1.html and page2.html files. Along with the styles into the appropriate style files.

Only a couple of notes on development.

  • It wasn’t clear where to add images that were used in the app. I settled on adding them in www/img folder and then in the css referenced the location like background-image: url(../../img/gas-icon.png);.
  • I wanted to select a Tab via a separate button click.  This StackOverflow answer helped me out.

Ionic View

The Ionic team has provided an Ionic View app that can render your app on device by basically just pushing the html/JS/css to the device. It is REALLY SIMPLE to get working so this is an easy step to quickly see your app running on iOS or Android. (And as @kevinbosak pointed out to me, it is a great way to have your kids create apps and easily share them with friends and family!)

  • The tutorial steps are mostly correct
    • Signup for an account on https://apps.ionic.io/signup
    • Run command ionic upload and enter username and password
      • At this point I had a weird error that wasn’t very helpful in google. The answer is to change the ID of the app because it is using the default tabs template ID. So go into config.xml and change the widget ID to something unique for your app. I chose com.sheetsj.gaspumpr for mine. This is also a good time to edit the name/description/author details. Then run `ionic upload` again
    • Install and run the Ionic View app from the App/Play Store
      • Login to app and you should see your application. Run it!
  • Note: when doing this, ionic creates a .io-config.json file that holds your Ionic View api-key. This file is not in .gitignore by default, but I added it so that the api-key is not uploaded to github. Feels like a best practice that everyone should follow.

Test on iOS Device

Testing directly on my iPhone SE was fairly easy too. It is also free to test on your device now with the latest iOS versions. (sorry no steps for testing on Android because I didn’t have one available)

I mostly followed these StackOverflow steps to Deploy to your own iOS device.

  • In XCode go into Preferences and add your Apple ID
  • Open the project from platforms/ios in XCode
  • In the Scheme Selector (next to the Play and Stop buttons in toolbar) select your application
  • Plug your phone into Mac via USB cable
  • Select your phone in the Device Selector (next to Scheme Selector)
    • I think I had certificate messages at this point. I clicked a ‘fix’ button in XCode which generated certs.
  • Now click the Run button
    • First time I got a message to go onto Phone > Settings and enable the app to be executed. Just follow the steps and it worked fine.
  • See the app on the phone!
    • I was surprised to see the app stays on the phone when disconnected. I didn’t realize till now that you can create and run and keep your own apps on your iPhone for free. Pretty cool. (yeah, Android people can roll your eyes here)

Setup App Icons

Ionic has a nice `resources` utility that can generate App Icons and Splashscreens of all sizes for iOS and Android for you. For icons just add a 192×192 pixel PNG named icon.png to the resources folder. Then run ionic resources and it will upload your image to an ionic server and process and download icons for you into the correct folders.

Now you can push the app to iPhone and see the real icon on the phone!

Publish to Android Play Store

Following the ionic guide worked perfectly to deploy to the Play Store.

  • The most time consuming part was taking screenshots from the emulators and saving them to the random pixel sizes required by the Play Store submission process.
  • Also it needed a Privacy Policy link on the web. So I just created a simple privacyPolicy.txt file, added it to GitHub, and linked to the raw version.

Publish to Kindle Store

The process to publish to the Kindle Store was easy once the .apk was already built for the Android Google Play Store. Just fill out the Kindle Store Publishing info, upload the same .apk file, and generate some more screenshots of random pixel ratios. And like that it is also published to the Kindle Store.

Publish to iOS Apple App Store

I haven’t yet published to the Apple Store because of the $100 price tag. Though these instructions should guide you through that process.

Conclusion

Hopefully this guide can aid you in creating and publishing your own Ionic2 native application. I tried to collect all of the steps that I performed, but I’m sure that I might have missed some along the way. In the end it was all much simpler than I had imagined before starting this process. Ionic2 + Angular2 is a great way to publish your own app with your existing knowledge of javascript, html, and css!

About the Author

Object Partners profile.
Leave a Reply

Your email address will not be published.

Related Blog Posts
Natively Compiled Java on Google App Engine
Google App Engine is a platform-as-a-service product that is marketed as a way to get your applications into the cloud without necessarily knowing all of the infrastructure bits and pieces to do so. Google App […]
Building Better Data Visualization Experiences: Part 2 of 2
If you don't have a Ph.D. in data science, the raw data might be difficult to comprehend. This is where data visualization comes in.
Unleashing Feature Flags onto Kafka Consumers
Feature flags are a tool to strategically enable or disable functionality at runtime. They are often used to drive different user experiences but can also be useful in real-time data systems. In this post, we’ll […]
A security model for developers
Software security is more important than ever, but developing secure applications is more confusing than ever. TLS, mTLS, RBAC, SAML, OAUTH, OWASP, GDPR, SASL, RSA, JWT, cookie, attack vector, DDoS, firewall, VPN, security groups, exploit, […]