Friday, December 20, 2013, 4 mins 4 secs

PhoneGap setup for Android Platform

Kewal Krishna in Engineering MobileTech

PhoneGap is a mobile development framework produced by Nitobi. It allows users to create mobile applications using web technologies like JavaScript, CSS and HTML5 rather than native language.

These applications are neither purely web based since there are packaged as apps for distribution nor purely native since their rendering is done using web technologies. Hence there are often referred as hybrid applications. The underlying software of PhoneGap is Apache Cordova which is open source software.

PhoneGap currently supports development for the operating systems Apple iOS, Google Android, LG webOS, Microsoft Windows Phone (7 and 8), Nokia Symbian OS, RIM Blackberry, Tizen (SDK 2.x), and Ubuntu Touch. Support for recent versions, such as BlackBerry 5 and 6 and Windows Phone 7, is being implemented now.

Challenge We Faced

Why one more post on this topic?

We at Think201 majorly work with web technologies. When we decided on an in-house hobby project which had to be deployed on our mobiles, we chose PhoneGap with Android platform for windows. When we started off with the installation, we faced few challenges in setting it up and running. With loads of unorganized information on internet, it took quite a time to connect the dots and see the outcome. So we thought why not consolidate the steps and keep it handy for many newbie’s like us.

Let’s start then….

Ahead lays a consolidated list of steps to be followed for having the set up installed and running along with creation of a sample app using command line approach.

Before proceeding further, have a check on these softwares .If you don’t have please install them and make your system ready for it.

  • Java JDK (1.6 and above) to be installed.
  • Android SDK for Windows to be installed.
  • Install node.js.
  • Apache Ant builder to be installed.

For the installations to work, we need to set the PATH variable. Append the PATH variable’s value with these values each separated by a semicolon.

  • C:Program FilesJavajdk(your version)bin;
  • C:Androidandroid-sdktools;
  • C:Androidandroid-sdkplatform-tools;
  • C:Androidapache-ant-(your version)bin;
  • C:Program Filesnodejs;
  • C:Users<Username>AppDataRoamingnpm;

Make sure this step is done perfectly because; any mistakes here would lead you to quite a common issue faced “cordova.jar and cordova.js files missing” in project folder.

By now, we have our required softwares installed and set for proper functioning. Let’s proceed and install PhoneGap. Issue these commands in command prompt sequentially.

C: npm install -g PhoneGap
Phonegap Installion Process

This installs PhoneGap. You can run this command anywhere; the doesn’t matter as PhoneGap is installed on predefined path. With this step, the PATH variable should have been updated to add the path to npm directory which contains the PhoneGap command definition.

C: PhoneGap
Confirmation for Installation

This command checks the installation has been done properly and returns you the complete information about PhoneGap.

C:<Workspace Folder> PhoneGap create

Example

e.g. PhoneGap create hello com.example.hello HelloWorld

This command creates a PhoneGap empty project for windows. The Workspace Folder can be any of your development directory where you want to keep all your projects. The command would create project specific folder.

With these commands executed, a sample project is just created via command line. Next step is to build the project in the platform which we would need (in our case its android). Note that all subsequent commands need to be run within the project’s directory, or any subdirectories within its scope.

There would be a WWW folder inside the created project folder. This folder contains all our working code. Any additional code and resources would be done into this folder. PhoneGap build would internally take care of copying the files into the required platform specific folder and building. We can develop the code for project using any editor and place it inside this folder.

cd hello
create-project-directory

Move to your project’s folder (hello is the project directory which we created earlier using create command)

PhoneGap build android
Build Process

Builds project for android folder. This command creates the android specific files inside the platforms folder of the previously created project structure. And then build the complete project for Android platform. The generated binaries can be found inside bin folder inside platforms/android. You can check it in emulator or move the .apk file to your phone and test it.

Congratulations! You are now done with creating first hello world PhoneGap project and building in on Android platform. This was a starter PhoneGap setup tutorial for Android on Windows system. Keep watching, very soon, we would be writing a post with a step by step approach for developing an android application with PhoneGap.

P.S: The above described procedure worked like a charm for us. There might me many methods out there to reach the same destination. This is a simple guide and a quick checklist to make it little easy to get all the required information at one place.

Kewal Krishna

Kewal Krishna