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
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.
Please ensure that following are installed on your system for Ionic Development for Android ::
- Java Development Kit ( JDK ) :
Install Java Development Kit (JDK) 8 or later
- Android SDK :
Install Android Studio.
- 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")
- Node.js / NPM :: you also need to have Node.js and NPM installed
- 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
To update your PATH, add a line resembling the following (substitute the paths with your local Android
SDK installation's location):
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
Change to current working directory to the root of the ionic project :
Run the app locally on browser to see how it looks::
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.