3

Hybrid Application Development using Ionic, AngularJs, Cordova – Part 1

Hybrid applications are talk of town in recent days. In simple words, use your web development skills (HTML5, CSS, Javascript) to create an application that will run as native application on different devices (Android, IOS, Windows mobiles etc.) with the help of some framework.

In this series of articles, I will try to show how to use Ionic (a HTML5 mobile app development framework targeted at building hybrid mobile apps)  and I will create a simple hybrid application using the Ionic framework.

Ionic framework includes AngularJs (powerful javascript framework), which is definitely a plus for this framework.

In this part of article we will go through the installation part to make our environment ready for the development.

Nodejs

Download and install Nodejs which will help us in our next steps, npm comes with nodejs which is a kind of package manager. If you want to learn more about nodejs probably this wonderful article will help you most. If you would like to see how to install nodejs, please follow this article for the guidance.

Git

Now download and install Git for Windows.

Java JDK (For Android)

In the next step Install the most recent Java JDK (NOT just the JRE).

Next, create an environment variable for JAVA_HOME pointing to the root folder where the Java JDK was installed. So, if you installed the JDK into C:\Program Files\Java\jdk7, set JAVA_HOME to be this path. After that, add the JDK’s bin directory to the PATH variable as well. Following the previous assumption, this should be either %JAVA_HOME%\bin or the full path C:\Program Files\Java\jdk7\bin

Apache Ant (For Android)

To install Ant, download a zip from here, extract it, move the first folder in the zip to a safe place, and update your PATH to include the bin folder in that folder. For example, if you moved the Ant folder to c:/, you’d want to add this to your PATH: C:\apache-ant-1.9.2\bin.

Android SDK (For Android)

Installing the Android SDK is also necessary. The Android SDK provides you the API libraries and developer tools necessary to build, test, and debug apps for Android.

Cordova requires the ANDROID_HOME environment variable to be set. This should point to the [ANDROID_SDK_DIR]\sdk directory (for example c:\android\sdk).

Next, update your PATH to include the tools/ and platform-tools/ folder in that folder. So, using ANDROID_HOME, you would add both %ANDROID_HOME%\tools and %ANDROID_HOME%\platform-tools.

Install Apache Cordova 

Use npm to install Apache Cordova with the following command in the command prompt.

npm install -g cordova

or

$ sudo npm install -g cordova

the -g option in the command installs it globally, which means you can access it from any location of your computer.

Install Ionic

Now install Ionic with this command

npm install -g ionic

or

$ sudo npm install -g ionic

 

All right, so everything is setup. In the next part of the tutorial I will create a an application using Ionic.