Building an Android app (Episode #2): with Ionic

In the previous starter tutorial, we were able to get an app up and running via Android Studio in approximately 10 minutes’ time.

Having done that, I would like to try round 2 — this time, with Ionic.

Ionic is an open-source, cross-platform mobile development technology stack. It is “the app platform for web developers,” allowing them to build mobile, web, and desktop apps all with one shared code base.

The original version was built on top of AngularJS and Apache Cordova. The more recent releases, known as Ionic 2 or simply “Ionic”, are built on Angular.

The plan down the road is to see if we can make an Apple iOS version of our app with the same code base.

But for now, we’ll focus on Android.

Our system remains the same.

What we are using

• Mac OS X
  (Windows tutorials to follow soon)
• Android Studio
• Ionic
• An Android device
  (not required in this starter tutorial)

>> Installing Homebrew

If you haven’t already, I’d recommend installing Homebrew, the “missing package manager for macOS.”

We will be using it throughout this series of tutorials.

Install Homebrew via Terminal:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

>> Updating Android environment

While we have already set up our SDK environment in the starter tutorial, additional steps are needed in order to deploy Cordova apps for Android devices.

→ Adding more SDK packages

You will need the packages for whatever API level you wish to target. It is recommended that you install the highest SDK version that your version of cordova-android supports.

Open Android Studio > Preferences > Android SDK:

Install all the levels you need

→ Setting environment variables

Cordova’s CLI tools require some environment variables to be set in order to function correctly. The CLI will attempt to set these variables for you, but in certain cases you may need to set them manually. The following variables should be updated:

1. Set the JAVA_HOME environment variable to the location of your JDK installation
2. Set the ANDROID_HOME environment variable to the location of your Android SDK installation
3. It is also recommended that you add the Android SDK’s tools, tools/bin, and platform-tools directories to your PATH

OS X and Linux

On a Mac or Linux, you can use a text editor to create or modify the ~/.bash_profile file. To set an environment variable, add a line that uses export like so (substitute the path with your local installation):

export ANDROID_HOME=/Users/{you}/Library/Android/sdk

To update your PATH, add a line resembling the following (substitute the paths with your local Android SDK installation's location):

export PATH=${PATH}:/Users/{you}/Library/Android/sdk/tools
export PATH=${PATH}:/Users/{you}/Library/Android/sdk/tools/bin
export PATH=${PATH}:/Users/{you}/Library/Android/sdk/platform-tools

Reload your terminal to see this change reflected or run the following command:

$ source ~/.bash_profile

→ Setting up an emulator

If you wish to run your Cordova app on an Android emulator, you will first need to create an Android Virtual Device (AVD).

You may have already done this from the previous tutorial.

→ Installing Gradle

Cordova for Android projects are built using Gradle.

If you don’t have it installed yet, you can do so via Homebrew.

brew install gradle 

>> Setting up Ionic environment

→ Installing Node.js and npm

Homebrew will also come in handy when installing Node.js and npm.

Normally you will only need this one line:

brew install node

But for some reason I got this error:

Warning: The post-install step did not complete successfully
You can try again using `brew postinstall node`
==> Caveats
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
==> Summary
🍺  /usr/local/Cellar/node/9.4.0: 5,125 files, 49.9MB

So I tried:

sudo chown -R $(whoami):admin /usr/local/lib/node_modules/

Then:

brew postinstall node

>> Installing Cordova and Ionic

Also with one line from your Terminal

npm install -g cordova ionic

It worked

Getting closer!

>> Using Ionic

→ Starting an app

ionic start myApp tabs

I said “no” to Ionic Pro for now

→ Running the app: in a browser

cd myApp
ionic serve

To stop serving, hit Ctrl + C in Terminal

→ Running the app: on an Android emulator

ionic cordova build android
ionic cordova emulate android 

Success!

Voila!

In Part 3, we will test the app on an actual device.

(This is a Build Builds tutorial)