How to Build Mobile Apps with the Ionic Framework?

Tudip

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
or
$ 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

Linux:

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

$ source ~/.bash_profile

$ cordova plugin add cordova-plugin-whitelist
$ cordova prepare

$ ionic platform add android
$ ionic cordova build android
$ ionic build android

$ ionic platform add ios
$ ionic cordova build ios
$ ionic build ios

$ npm install -g ios-deploy

Read more: https://tudip.com/blog-post/publish-an-ionic-app-to-the-apple-or-android-store/