Mobile Application Development Using PhoneGap

After attending last week's PhoneGap training session in Washington, DC I have finally made that frightening step into mobile application development. Why was it frightening? Well, it was the expectation that I needed to face another steep learning curve just to get that infamous "Hello World" text to display on my cell phone when I rather be spending my time making my lawn look better than my neighbors.The irony of that is that growing grass and maintaining it requires a learning curve as well! So, I might as well invest my time in learning how to develop mobile applications to make more money so that I can rectify my lawn care mistakes.

So, you may be asking yourself, "What is PhoneGap?" It took me a minute to figure out its role in developing mobile applications but after working with it for the last few days I have boiled my understanding of it down to it being a JavaScript API which enables developers to access common mobile features such as contacts, camera, geo location, sound, etc. without having to worry about compatibility issues across mobile devices (iPhone, BlackBerry, Palm, Android). In a nutshell, I should be able to write an application once and use that same code across other devices.

Due to the fact that PhoneGap is fairly new and there are still some limitations or capabilities that haven't been added or perfected, it was advised to pick a single mobile device to develop on. Once the application is fully operational and well tested, use that same application code to begin development for other platforms and debug it as you go from one platform to the next. Again, these compatibility issues are being resolved as PhoneGap evolves so dont abandon it as a tool just yet.

Now considering that we received Palm Pre's during PhoneGap's DC training workshop to develop on, I will use the Palm platform to demonstrate how to get your development environment setup to begin developing a mobile application.

Process Overview

Here is a rough outline of the steps involved in getting your development environment set up, creating a new project, packaging your application, and launching it on your mobile device.

1. Download and install the current mobile SDK (software development kit) for the device in which you will developing.
2. Download PhoneGap.
3. Start a new project.
4. Package and launch your project.

Step 1: Download and install the SDK

The software development kit is provided by the companies that have developed the mobile platforms (ie. Apple iPhone, Palm webOS, etc.). So depending on which platform you are developing on you will need to download the respective SDK.

I'm not going to rewrite this step as Palm has done an excellent job of providing instructions on how to setup their SDK. Butmake sure to read the instructions provided for the operating system that you will be developing on.

1. Macintosh Palm SDK
2. Linux Palm SDK
3. Windows Palm SDK

After installing the SDK, Palm's in this case, you will often have a set of commands available within your terminal or command line application that will allow you to perform certain operations to aid you in the development process. For  Palm, their SDK includes the following:

• palm-generate: Generates basic applications and scenes.
• palm-package: Packages a Palm application before installation on the emulator or a device.
• palm-install: Installs a packaged application on the emulator or a device.
• palm-launch: Launches an installed application on the emulator or a device.

Read more about Palm's SDK command line tools.

I personally would encourage developers to get familar with these commands but it isn't necessary to get started though as PhoneGap has made it so that these commands are automated via a "make" file.

Step 2: Download a copy of PhoneGap

PhoneGap has done a great job of providing instructions on how to download their product. I will however advocate for using "git" to obtain a copy of the code. You can learn how to install git and use git to get a copy of PhoneGap.

Step 3: Setting up a new Project

In order to create a new project, which is quite simple, you will need to open a terminal or command line application and navigate to the directory in which you have downloaded your PhoneGap files.

Within PhoneGap's set of instructions on downloading the PhoneGap code you will have the following directory structure once you've completed Step 2.

phonegap
  |- README.md
  |- android/
  |- blackberry/
  |- iphone/
  |- palm/
  |- symbian.wrt/

Step 4: Packaging and launching your application

Within each mobile platform directory you will notice a Makefile in which you can execute by simply typing in the command, make:.

Here is a screen shot of me running the command, make:

This will package your application and install it on the first qualified device be it a USB-connected device or the virtual emulator. Please note that each mobile platform directory is a self containing application specific to each mobile platform ready to be packaged, installed, and executed without writing any code. These directories are nothing more than simple applications serving as a template for development.

Now, it's highly recommended that you test your applications on a USB-connected device as it will be faster to execute and interact with. Besides, what better testing environment could there be aside from an actual mobile device? Exciting, isn't if?

The emulator, on the other hand, tends to be slower which can become aggrevating especially when debugging an issue. If, however, you dont have a mobile device laying supporting the mobile platform that you are developing for then the emulator is your only option.

I hope that this post will help you along in getting started with using PhoneGap. I will be posting additional posts as I get deeper into developing mobile applications using PhoneGap so stay tuned.

If you have any questions please feel free to post a comment or visit Google Groups to discuss your questions with other PhoneGap developers. Good luck and happy development!!

Helpful Resources

PhoneGap Homepage: Home Page
PhoneGap Google Groups: Developer Discussions
PhoneGap GetHub: Contains great instructions on using git to download PhoneGap project code.