Working with PhoneGap – Installation and Startup

Hello everyone!!! Its feeling like it has been over a decade since I have written last article here. But, being here always inspires me, challenges me and completes me.

Today, we are going to work on something new here. Yes, we will be developing our first android app here. Some time back, a beautiful mobile development framework “PhoneGap” was created by Nitobi which was later purchased by Adobe Systems in 2011. This framework allows you to convert your HTML/CSS/JavaScript code into any of the available mobile operating systems in world today.

Check out the following video to get an idea of what PhoneGap can do.

Okay, I guess you would have got basic idea of PhoneGap, so lets use it now.

Pre-requisites:

  1. PhoneGap Desktop App
  2. Node.js (Required to invoke node and npm on your command line)
  3. Git client (Even if we are not using this directly now, but command line tool uses it internally to download some of the required assets while creating new project)
  4. Android SDK
  5. Apache Cordova (Really, I like this name…!!!)
  6. Apache Ant (Required while building your app)
  7. PhoneGap Developer App (Required for testing on your device. You can download it from your Play Store/App Store)

Let’s start working:-

Step 1: Install PhoneGap Desktop App

This is an simple installation like any other software. Just click on Next, Next and done…

Installing PhoneGap

Step 2: Install Node.js

Open installer and follow the instruction.

Node.js

Step 3: Installing git client

Double click on downloaded installer and follow the instructions.

git Client

Step 4: Install Android SDK

Download the required installer and complete the installation.

Android SDK

Step 5: Installing Cordova

Execute following command in command line tool with administrator access.

For OS X and Linux:

$ sudo npm install –g cordova

For Windows:

C:\> npm install –g cordova

Step 6: Configure Apache Ant

Download Apache Ant from http://ant.apache.org/bindownload.cgi and extract the contents of the compressed file in any folder say D:\ApacheAnt\

Configure Ant bin PATH

Now add ant bin folder (D:\ApacheAnt\bin\) to PATH environment variable and create new environment variable ANT_HOME with value as D:\ApacheAnt\

Configure ANT_HOME

Step 7: Installing PhoneGap Developer App

I hope you have already installed PhoneGap app on your device, if not then following is the link for Android devices.

https://play.google.com/store/apps/details?id=com.adobe.phonegap.app

Everything is set. Now start PhoneGap desktop app and click on add new project.

Now click on the RUN button, it will show a message at the bottom saying “Server is running on http://192.168.X.X:XXXX

Now connect your device to your machine if your machine and device are not in same network.

Open PhoneGap app, enter the above IP as below and click Connect.

Voila!!!! Your demo application should be running on your device.

Congratulations on successfully completion of all the steps.

In the next post we will create some basic application and deploy it on your device.

If you enjoyed the above article then please put your comments below and don’t forget to share.