Getting started with Ionic Framework


This guide aims to give a brief introduction for Ionic Framework for starters.

I would like to thank to Prof. Akif Eyler for his patience and contributions in this post.

Prerequisites

Following tools have to be installed in order to follow this guide. - npm version 2.11.3 - node version v0.12.7 - Android SDK with API version 22

This guide aims to build a mobile app for the Android platform but will also provide instructions for iOS. iOS has another set of tools and SDK for building mobile apps which is not completely covered here.

Install Ionic Framework via npm

npm is the pre-installed package manager for the Node.js platform.

On Linux:
sudo npm install -g ionic
On Windows:
npm install -g ionic

Install Cordova CLI

On Linux:
sudo npm install -g cordova
On Windows:
npm install -g cordova

Create a seed project:

ionic start ionic-getting-started

Answer n to the following question indicating that you’ll skip ionic.io cloud integration. We want to keep it simple here, right?

Create an ionic.io account to send Push Notifications and use the Ionic View app?
(Y/n): n

This will create the seed project:

Ionic seed project

Running your app in browser

ionic serve

You’ll see it in browser:

Project running in browser

Adding a target platform

For Android:
ionic platform add android

See the Android Platform Guide for full Android installation instructions:

Cordova requires the ANDROID_HOME environment variable to be set. This should point to the [ANDROID_SDK_DIR]\android-sdk directory. Next, create an environment variable for JAVA_HOME environment variable pointing to the root folder where the Java JDK was installed.

See Ionic installation guide for further instructions.

For iOS:
ionic platform add ios

Note: iOS development requires OS X currently

Adding Android platform should generate Android source code under platforms/android directory, add a resource directory for images and extend existing config.xml and package.json files.

New files after adding Android platform

Running your app on a device

Run your app on a device: ionic run

For Android:
ionic run android
For iOS:
ionic run ios

App on Android device:

Running on Android device

Building your app

For Android:
ionic build android

This should generate an android-debug.apk file under \platforms\android\build\outputs\apk\ folder.

For iOS:
ionic build ios

Running your app on an emulator

Simulate your app: ionic emulate

For Android:
ionic emulate android

If you are using Genymotion instead of the standard Android emulator, note that Genymotion behaves like a device, so it requires run rather than emulate

For iOS:
ionic emulate ios

Packaging your app

You can package your app using Cordova Command : cordova build <MODE> <PLATFORM>

For Android debug packaging:
cordova build --debug android

This will generate the file \platforms\android\build\outputs\apk\android-debug.apk

For Android release packaging:
cordova build --release android

This will generate the file \platforms\android\build\outputs\apk\android-release-unsigned.apk

You will need to sign this file if you want to publish it in Google Play Store. See Ionic publishing instructions for further information.