Guide to Creating Native Mobile Apps with Ionic2
Over the last few years I’ve had a nice little side project called GasPumpr.com. It is an ethanol efficiency calculator that determines the equivalent price-per-gallon of different ethanol blends. I use it to decide which gas is the most economical to purchase when standing at a pump that has different blends (no-ethanol, e10, e15, e85). You can read all about how it works and why at http://gaspumpr.com/about.html, but the TLDR is that ethanol has a lower energy output than gasoline so it needs to be cheaper to make it worth the reduced miles-per-gallon that it provides.
It works great as a responsive mobile site, but I wanted to create a native app 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 know very little).
The purpose of this post is to roughly document the process that I went through to install/build/run/publish the GasPumpr 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. All of the source is on GitHub in the gaspumpr-ionic2 project.
Installation
Installation is covered well in the Ionic2 Getting Started Guidenpm install -g ionic@betaionic start gaspumpr --v2{generates a default app with the ‘tabs template’}cd gaspumprionic serve
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 theadd androidcommand. In any case, the fix is to editplatforms/android/cordova/lib/builders/GradleBuilder.jsand change the distributionUrl gradle wrapper to be 2.10 like this.
Next I had an error likeError 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 runningionic run androidI 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 GasPumpr.com 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/imgfolder and then in the css referenced the location likebackground-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 a friend pointed out, 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 uploadand 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.gaspumprfor mine. This is also a good time to edit the name/description/author details. Then runionic uploadagain - 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 niceresources utility that can generate App Icons and Splashscreens of all sizes for iOS and Android for you. For icons just add a 192x192 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.