Phonegap Application Development

How many times have you heard, "there's an app for that"? But sometimes, there actually isn't "an app for that", or the apps that do exist don't meet your needs. As Linux users, we tend to like to scratch our own itches, and if that means we write some code to do it, so be it. However, writing code to run on an Android phone or tablet has a bit of a learning curve, and it's even worse on Apple products. Fortunately, Phonegap provides a simple way to create standalone apps for Android, iPhone, WebOS, Blackberry and Windows Phone, among others. You just need to be reasonably proficient in HTML, JavaScript and CSS, and you can develop native apps for the majority of smartphones currently in use. And, the same code base can run, with obvious limitations, on any Web browser.

Developing native code for Android is relatively easy. You'll have to learn to use Android's XML-based screen layout mechanism, and you'll have to learn Java. For iPhone, you'll need to learn Objective C. If you want to develop for Windows Phone, you'll need to learn C# as well. Instead, you simply could use Phonegap and maintain a singe code base in HTML/JavaScript/CSS. This is the definition of a "no-brainer".

Before I go much further, I need to clear up a potential source of confusion. Phonegap initially was developed by a company named Nitobi, which subsequently was acquired by Adobe. In 2011, Nitobi/Adobe donated the Phonegap code base to the Apache Foundation. As a result of this contribution, they needed to ensure that the intellectual property was unfettered by trademark ambiguity, so they renamed the Phonegap project to Cordova. The Apache Foundation is in the process of migrating from Phonegap to Cordova, so I refer to this project as Cordova here.

Getting started with Cordova on Android isn't difficult. At the risk of rehashing material that is well documented elsewhere, I'll just outline the process involved. First, you have to install the Android SDK, which is a free download from the Android site and is very well documented. The Android SDK integrates with the Eclipse IDE, so you will need to have a fairly recent version of Eclipse as well. The SDK documentation will walk you through the whole process, from downloading the software to building and running the sample application. The SDK lets you run your program in an emulator or on a real Android device, if you have one.

Installing Cordova is also fairly straightforward and well documented. The only difficulty I had with the entire process is that I wasn't very familiar with Eclipse and stumbled a bit. The Cordova installation process culminates with building and running the sample Cordova application. The sample application demonstrates much of Cordova's API and is worth looking at.

I found the process of creating a new Cordova project to be a bit kludgey. The process involved creating a new Android project first, then making a two-line modification to a Java program, pasting in a dozen lines of XML into another file, and well, you get the idea. All of the changes made sense, but seemed a bit error-prone. Finally, I decided to copy the example project and strip it down to its bare necessities. This is the approach that I recommend; it worked like a champ for me.

A Cordova application has three main pieces. There is an architecture-specific binary piece that actually communicates directly with the device's hardware. Then there is a Java-based abstraction layer that sets up your application's runtime environment and presents a JavaScript API for your application to use. The third part is your HTML/JavaScript/CSS code, and this is the only part that you normally need to be concerned with. All of these pieces get linked together at build time to form a native binary executable for the target device.

The Cordova JavaScript API allows your program to access many of the host device's sensors. This means that your application has easy access to the device's GPS, accelerometer, compass, microphone and speaker. The API provides persistent data storage by allowing access to the device's contact database, its filesystem and a native SQLite database.

Let's look at some code.

For the sake of illustration, I developed a simple application. The application is designed to demonstrate three main features: access to the device's GPS sensor, access to the user's contacts and the ability to make Ajax calls to remote Web services.

The HTML needed to create this application is pretty straightforward. See Listing 1.

<html>
<head>
<h3>Sample Application</h3>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="./master.css" type="text/css" 
 ↪media="screen" title="no title">

<script type="text/javascript" charset="utf-8"
 ↪src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" 
 ↪src="main.js"></script>
</head>

<body style="{background: beige;}">
<img id="picture" height="100px" width="200px" border="0"
 ↪src="http://www.linuxjournal.com/files/linuxjournal.com/
↪ufiles/logo-lj.jpg">
<br>
<p>
You are here:<br>
<input name="lon", id="lon" size="15"> Longitude, <br>
<input name="lat", id="lat" size="15"> Latitude.<br>
<p>
<input id="id" name="id"><br>
<input id="name" name="name"><br>
<input id="phone" name="phone"><br>
<input id="email" name="email"><br>
<button onclick="previous_contact();">Previous</button>
<button onclick="next_contact();">Next</button>
<p>
<hr>
"<span id="quote">Linux Rocks!</span>"<br>
<span id="error"></span><br>
<hr>
</body>
</html>

The content of the <head> section is mostly boilerplate. Note that you import the cordova.js and then your main.js JavaScript files, and that the order is important. In the <body>, you find a graphic that you bring in from a remote server. Then you see input fields for your current GPS coordinates. Next, you have some form fields that will contain information from the phone's contact directory, followed by Previous and Next buttons that allow users to scroll through their contacts. Finally, there are two <span>s that will allow the program to display witty comments from a remote Web site and any error messages that might need to be displayed. Figure 1 shows what the page looks like in a browser.

Figure 1. Sample Application Running in a Browser