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:
→ 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:
- Set the
JAVA_HOME
environment variable to the location of your JDK installation - Set the
ANDROID_HOME
environment variable to the location of your Android SDK installation - It is also recommended that you add the Android SDK’s
tools
,tools/bin
, andplatform-tools
directories to yourPATH
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 successfullyYou can try again using `brew postinstall node`==> CaveatsBash 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
In Part 3, we will test the app on an actual device.
(This is a Build Builds tutorial)