Build an app with Ionic Framework



What's Ionic Framework ?

Ionic is a hybrid mobile app development framework using which we can create mobile applications which can be build for different platforms like iOS, android, windows etc from the same code base. Ionic is built on top of Apache Cordova and AngularJS which means we can program Ionic apps in familiar web technologies like HTML-5, CSS, SASS etc

What shall we build in this tutorial ?

In this tutorial, we're going to build a Hello World Ionic android app using the Ionic framework. We'll highlight all the steps you need to perform to build and run your app for android.

Prerequisites

Please ensure that following are installed on your system for Ionic Development for Android ::

  1. Java Development Kit ( JDK ) : Install Java Development Kit (JDK) 8 or later
  2. Android SDK : Install Android Studio.
  3. Android SDK packages : Open the Android SDK Manager (run android or sdkmanager from the terminal) and make sure the following are installed:
    • Android Platform SDK for your targeted version of Android
    • Android SDK build-tools version 19.1.0 or higher
    • Android Support Repository (found under "Extras")
  4. Node.js / NPM :: you also need to have Node.js and NPM installed
  5. 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
    • 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, and platform-tools directories to your PATH

If you're on Linux, you can use commands as given below. But ensure that the values for the variables corresponds to the the actual locations of the tools in your machine
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

Install IONIC & CORDOVA :



		        
npm install -g cordova ionic
                
	            

Create a new Ionic App project with ionic start command

		        
ionic start helloworld blank 
				
	            

The above command creates a new ionic project with the name helloworld.
Change to current working directory to the root of the ionic project :
		        
cd helloworld 
				
	            

Run the app locally on browser to see how it looks::
		        
ionic serve 
				
	            

This will start the app on your local machine and will open your app in the browser. Edit the homepage of the app :: Add android as a platform to the app, this is required to make the app run on an android device
		        
ionic platform add android 
				
	            

And finally to build your app
		        
 ionic build android
				
	            

The above command will create the apk file which you can copy to your android device and run as an android app.

Summary
  • What's Ionic framework
  • What shall we build in this tutorial
  • Prerequisites
  • Install IONIC & CORDOVA