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.

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


Mike Diehl is a freelance Computer Nerd specializing in Linux administration, programing, and VoIP. Mike lives in Albuquerque, NM. with his wife and 3 sons. He can be reached at


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

website development in indore

website development in indore's picture

Aking Web Tech a leading IT company & Provides web services :- website Development in just 1,999 Rs/-, software development like {Billing software, School Management Software, Inventory Software, ERP, CRM}, Domain & Hosting , SEO
website development in indore

software companies indore

software companies indore's picture

It is really a nice and helpful piece of info. I’m glad that you simply shared this helpful info with us. Please keep us informed like this. Thank you for sharing.
software companies indore

I found your site very much I

sandra9's picture

I found your site very much I often wonder why I do not do what you did because it is really great congratulations

une voyance gratuite

developing mobile apps using Phonegap

MatthewS's picture

We are soon to begin developing mobile apps using Phonegap, but are deciding on what actual physical devices we need to buy for testing. What do you currently use? You mention above that performance can vary, and can be especially a problem on older devices, so from that point of view would you suggest applying for a pay day loan UK and buying an iphone 4 and 5 to test on? Do you test separately on ipod touches, or I guess that maybe you can use this instead of an iphone 4 to keep costs down? For android I assume you would have a device for 2.3 and 4, and perhaps different screen sizes? And then there are the tablets!