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:
Running your app in browser
ionic serve
You’ll see it 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.
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:
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.