Setting up Phone Gap

PhoneGap is an open source framework for quickly building cross-platform mobile applications using HTML5 and Javascript, allowing you to make use of the many open licensed Javascript libraries available on the internet. You also get the benefits of the native features on the targeted device and the simplicity and quick development cycle of a web page. You can write the application once and deploy it to multiple targets with ease.

In this post I will show you how to setup and configure a simple “hello world” PhoneGap application and test it on an android device. If you want to test it on an iOS device you will need to run these commands from a MacOS X computer.

Getting Started

If you haven’t done so already, download NodeJS at http://nodejs.org/. NodeJS includes npm, a package manager for Javascript that allows you to download and install phonegap from the command line.

You will also need to have Apache Ant and Android SDK installed and properly configured with the correct environment path variables.

After you have installed NodeJS run the following command line:

npm install –g phonegap

Now run the following command line to create a new phonegap project:

phonegap create hello-world-app
cd hello-world-app

Making Some Changes

Let’s make some changes. Open up the HTML file located at: ./hello-world-app/www/index.html.

<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>

Change the HTML to:

<div id="deviceready" class="blink">
    <p class="event listening">Connecting to Device</p>
    <p class="event received">Hello World</p>
</div>

Compile and Deploy to Device

You’re project is now ready to compile and deploy to your test device. PhoneGap does all the work for you so you just need to run a few commands.

If you are working on a Windows or Linux machine you probably use an Android device for testing applications. If you are testing on a MacOS with an iOS device just change “android” to “ios”.

Connect your android device to your computer making sure that it’s in development mode. In your command prompt, run the following command:

phonegap run android

The project will now be compiled and deployed. If you run into problems just run the command with the –d flag (phonegap run android –d) and check the output.

Bryan Wiebe is a web developer and mobile developer located in the Okanagan, British Columbia. He works for Hutz Media Ltd. This post is an entry in a blog series covering development with PhoneGap.