How to Build Mobile Apps with the Ionic Framework?



22 December 2017

What is Ionic?

Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that has access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, the speed of development, and access to 3rd party code.

Services and features:

Ionic provides all the functionality which can be found in native mobile development SDKs. Users can build their apps, customize them for Android or iOS, and deploy through Cordova. Ionic includes mobile components, typography, interactive paradigms, and an extensible base theme.

Browser Support:

  • Ionic 1 – Ionic V1 is focused on building native/hybrid mobile apps rather than mobile websites. Support for iOS 7+, and Android 4.1
  • Ionic 2 – Ionic V2 is focused on building both native/hybrid apps through Cordova, as well as adding the ability or Progressive Web Apps. Support for iOS 8+, Windows 10 Universal App, Android 4.4+

Installing Ionic:

For installing Ionic you’ll need a recent version of NodeJs and NPM.

$ sudo apt-get update
$ sudo apt-get install nodejs $ sudo apt-get install npm

Install Ionic CLI and Cordova

$ sudo npm install -g cordova
$ sudo npm install -g ionic
$ npm install -g ionic cordova (Ionic CLI)

Create your first Ionic app:

$ ionic start demoApp
$ cd demoApp
$ ionic serve

Platform Guides

Java Development Kit (JDK)

  1. Install Java Development Kit (JDK) 8 or later.
  2. When installing on Windows you also need to set JAVA_HOME Environment Variable according to your JDK installation path.

Android SDK

  1. Install Android Studio. Detailed installation instructions are on Android’s developer site.

Adding SDK Packages

  • After installing the Android SDK, you must also install the packages for whatever API level you wish to target.
  • Open the Android SDK Manager (run android or sdkmanager from the terminal) and make sure the following are installed:
    1. Android Platform SDK for your targeted version of Android
    2. Android SDK build-tools version 19.1.0 or higher
    3. Android Support Repository (found under “Extras”)

Setting environment variables


Following command for set android sdk path and java path
$ sudo nano ~/.bash_profile (Open .bash_profile file)
Enter following text into your .bash_profile file.
export ANDROID_HOME="your android SDK path"
sample => ("/home/pc-name/Android/Sdk")
export ANDROID_SDK_ROOT="your android SDK path"
sample => ("/home/pc-name/Android/Sdk")
export JAVA_HOME="Your java install file path"
sample => ("/usr/lib/jvm/java-8-oracle")
export PATH=${PATH}:"your android platform-tools path and colon sdk tools file path
sample => ("/home/pc-name/Android/platform-tools:/home/lt-83/Android/Sdk/tools")

OS X: 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=/Development/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}:/Development/android-sdk/platform-tools:/Development/android-sdk/tools

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

$ source ~/.bash_profile
  1. Click on the Start menu in the lower-left corner of the desktop
  2. In the search bar, search for Environment Variables and select Edit the system Environment Variables from the options that appear
  3. In the window that appears, click the Environment Variables button
To create a new environment variable:
  1. Click New… and enter the variable name and value
  2. To set your PATH:
    1. Select the PATH variable and press Edit.
    2. Add entries for the relevant locations to the PATH. For example (substitute the paths with your local Android SDK installation’s location):
    After building the first time APK change splash screen image.
     1. Go to platforms -> android -> res
     2. Inside "drawable-port-ldpi" folder paste (480*800) size png image and rename it "screen.png".
     3. Inside "drawable-port-ldpi" folder paste (200*320) size png image and rename it "screen.png".
     4. Inside "drawable-port-mdpi" folder paste (320*480) size png image and rename it "screen.png".
     5. Inside "drawable-port-xhdpi" folder paste (720*1280) size png image and rename it "screen.png".
    After building first-time APK change app icon.
     1. Go to platforms -> android -> res
     2. Inside res -> "mipmap-hdpi" folder paste (72*72) size image and rename it "icon.png".
     3. Inside "mipmap-ldpi" folder paste (480*800) size image and rename it "icon.png".
     4. Inside "mipmap-ldpi" folder paste (200*320) size image and rename it "icon.png".
     5. Inside "mipmap-mdpi" folder paste (320*480) size image and rename it "icon.png".
     6. Inside "mipmap-xhdpi" folder paste (720*1280) size image and rename it "icon.png".

Make build in the mobile.

  • Connect Android mobile to Laptop.
  • Type following command editor (ubuntu) to check mobile device is connected or not.
  1. cd Android/Sdk/platform-tools
  2. Type “adb devices” it will show like following.
  3. (you List of devices attached 2003175d4c56373 device)

Domain whitelisting

Domain whitelisting is a security model that controls access to external domains over which your application has no control. Cordova provides a configurable security policy to define which external sites may be accessed. By default, new apps are configured to allow access to any site. Before moving your application to production, you should formulate a whitelist and allow access to specific network domains and subdomains.
You can install whitelist plugin with Cordova CLI, from npm:
$ cordova plugin add cordova-plugin-whitelist
$ cordova prepare
Run App using Android
$ ionic platform add android
$ ionic cordova build android
$ ionic build android
Run App using iOS
$ ionic platform add ios
$ ionic cordova build ios
$ ionic build ios
Deployment Tools
The ios-deploy tools allow you to launch iOS apps on an iOS Device from the command-line.
$ npm install -g ios-deploy

Read more:

Request a quote