Developing mobile apps using Phonegap

by Tomás Pérez

When writing applications that need to be run in different platforms, it looks more straightforward to focus all the efforts in a solution that can work in all of them.

How to solve the problem of writing applications in multiplatform environments?

The answer is surprisingly simple, what do all of those environments have in common? A browser compatible with Javascript and HTML technologies.

There are, however, 2 problems:

  1. Bad performance of web applications compared with native apps.
  2. Lack of a system to access to native funtionalities like GPS.

Phonegap tries to solve both problems.

The tool

Phonegap is an open source framework for the development of applications that can run multiplatform in mobile phones: Android, Iphone, Blackberry.

Once it's installed and configured, you can start writing for all of those platforms just using HTML + Javascript.

Phonegap provides access to native functionalities such as GPS, vibration, etc. In theory with the same code that access to those features you can target different platforms.

This sounds, in theory very well, but we'd need to try. Let's start:

Configuring IDE and the Android SDK

  1. Install Eclipse >= 3.3 (I've tried version 3.4 Ganymede).

  2. Install Android SDK

  3. Add the Android SDK to the PATH env variable:

export PATH=${PATH}:/var/www/phonegap/android-sdk-linux_x86-1.5_r2/tools
  1. Install the Eclipse plugin, adding the Android repository
https://dl-ssl.google.com/android/eclipse/site.xml
  1. Finally, we need to create a virtual machine using the command android that it's available in the Android SDK's tools folder.
android create avd --target 2 --name my_avd

If we haven't added the PATH env variable, it can also be set in the Eclipse preferences (android section).

2. Setup Phonegap

Following those simple steps, we have now a first part ready. Now we can install Phonegap and try the hello world example.

There are 2 ways of installing Phonegap, I recommend to use directly git cloning its repository since. The reason is that it's a project that is under heavy development and the git version is more updated.

git clone git://github.com/sintaxi/phonegap.git
Hello world

Now we can start playing, let's create a new project choosing the option of loading it from a template. The target must be Google API's (id 3). We need to make sure that the virtual device we have created is compatible.

Playing with the Phonegap framework I found some problems related with the bindBrowser method in the appView. After some troubleshooting I did a workaround, just commenting some code in the AccelListener constructor:

// sensorManager =(SensorManager) mCtx.getSystemService(Context.SENSOR_SERVICE);
Conclussion

Once the configuration is ready, programming mobile apps using Phonegap is very simple. In fact you can import other libraries/frameworks Javascript like jQuery and use their functions (e.g. to perform AJAX requests).

I implemented a twitter client to show trending topics in 15 min, without forgetting of course 45 min. initially spent configuring Phonegap.

Looks really good, and seems to be under active development. Let's keep an eye on the project.