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 StartedGuide
npm install -g ionic@beta
ionic start gaspumpr --v2
{generates a default app with the
‘tabs template’}cd gaspumpr
ionic serve
ionic serve
runs the app in a browser in livereload mode. So any changes tothe 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 inAndroid 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 likeError executing “adb devices”: ADB server didn’t ACK *
. Fix this by going into Genymotion settings for ADB and
failed to start daemon *
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 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 roughlycopied 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 inwww/img
folder 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 appthat 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 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 runionic 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 fairlyeasy 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 anionic 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 workedperfectly 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 KindleStore 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 also plan to publish this to the AppleApp Store using these
instructions. I’m just waiting because of the high $100 price tag! Once completed
I’ll update with any progress here.