Building Android Apps: Introduction to PhoneGap

1/9/2011 4:53:04 PM

1. Introduction to PhoneGap

The mobile landscape is littered with devices, platforms, and operating systems. If you are a web developer, you might be familiar with the agony of testing 10 or so browser versions across 10 or so operating system versions. Multiply that by 100 and you have mobile. There is simply no cost-effective way to develop and test across all of the possible combinations.

Enter PhoneGap. PhoneGap is an open source development tool created by Nitobi that acts as a unified bridge between web apps and mobile devices. It essentially consists of a native app project template for each of the major platforms, where each project is just a chromeless web browser with heightened permissions. What this means in concrete terms is that PhoneGap makes it possible to add a single snippet of JavaScript to your web app that will give you access to the camera on an iPhone, a Nexus One, a Palm Pre, and others.

Furthermore, the resulting app—although written by you with HTML, CSS, and JavaScript—is encased in a native app and you can submit it to the respective app store for the platforms in question. Currently, iPhone, Android, BlackBerry, Palm, Symbian (Nokia), and Windows Mobile are supported, and Windows Phone 7 is in development.

Of course, different devices have different features. Maybe a particular device doesn’t have a camera or doesn’t have an accelerometer. Even when devices do have the same features, they each have their own ways of exposing these features to the developer. PhoneGap abstracts the APIs for the most widely available mobile phone features so mobile application developers can use the same code everywhere. You still need to deploy your app manually using the SDK (Software Development Kit) provided by the vendor, but you don’t need to change your application code.


There are other projects and products available that serve a similar purpose as PhoneGap, such as RhoMobile and Titanium Mobile, but I prefer PhoneGap because it allows you to write a standard web app and drop it into a native code environment virtually unchanged.

Every other product that I’ve looked at requires you to write code based on a proprietary framework that only outputs native code (i.e., you aren’t writing HTML, CSS, and JavaScript that would run in a browser). I’m not familiar enough with them to do an in-depth comparison, so you might want to check them out in case one suits your needs better than PhoneGap.

Since this is an Android book, we’ll focus on the Android branch of PhoneGap. Just be aware of the fact that you could potentially deploy your app to iPhone, Nokia, Palm, and other popular devices with little or no modification.

Using the Command Line

In this article, we’ll be interacting with PhoneGap and the Android SDK via the command line. The command line is a text-only environment that allows you to do things that you can’t do through the operating system’s normal graphical UI. On Mac OS X, this is the Terminal application, which lives in the /Applications/UtilityWindows, it’s the command prompt (click the Start Menu, choose All Programs AccessoriesCommand Prompt). On Linux, open an xterm or Terminal. folder. On

The command line can seem pretty geeky and cryptic at first, so I promise to keep things to a bare minimum and explain everything as much as possible along the way. As you work through the examples, be sure to type things exactly as you see them here. In other words, spaces and capitalization count.

2. Download the Android SDK

PhoneGap works in conjunction with the Android SDK, so before we can get started with PhoneGap, we need to download and install the Android SDK itself. Follow the steps here to do so:

  1. Navigate to the Android SDK download page and download the package appropriate for your platform. If you are on Windows or Linux, you will need to install Java (see first. My development machine is a MacBook Pro running Mac OS X 10.6, so in my case, the appropriate package is for Mac OS X (Intel) (Figure 1). The 06 in the SDK filename refers to the version of the Android SDK and may be different at the time you read this.

    Figure 1. Download the appropriate Android SDK for your development machine


    Java comes preinstalled on Mac OS X and is available in most Linux package managers. If you install it on Windows, you’ll need to set your JAVA_HOME environment variable.

  2. Unzip the downloaded archive to whichever directory you like. I’m going to put mine on the desktop.


    On Windows, you won’t be able to use the ~ shortcut for your home directory. Also, you should avoid spaces in the path names, so if you are using Windows XP (which puts at least two spaces in your home directory due to home directories residing in Documents and Settings), you should create a directory such as C:\Source instead of putting things on your desktop.

  3. For simplicity’s sake, I’m going to rename the unzipped SDK directory to Android.

  4. Launch the Terminal application and navigate into the tools subdirectory of the Android SDK directory. If you put the Android directory on your desktop and renamed it, use the following command:

    cd ~/Desktop/Android/tools/

    On Linux, the command will be the same (if you put the Android directory in the Desktop subdirectory of your home directory). On Windows, the command would be something like:

    cd %USERPROFILE%\Desktop\Android\tools

  5. Enter the following command to launch the Android SDK and AVD Manager. On the Mac or on Linux, the command is:


    On Windows, the command is:


  6. When the Android SDK and AVD Manager window opens, click Available Packages in the left sidebar. You should see a single item appear in the Sites, Packages, and Archives panel (Figure 2).

  7. Check the box next to to install all of the available packages and archives (Figure 3).

  8. Click the Install Selected button in the lower right corner of the window.

  9. A window will appear asking you to accept the license terms. Read the terms, check the box next to Accept, and click the Install button to begin your download (Figure 4).

    Figure 2. Use the Android SDK and AVD Manager to download SDK packages for particular versions of the Android OS

    Figure 3. Check the box next to and click the Install Selected button

    Figure 4. Read and accept the platform description and license, then click the Install button

  10. When your download completes, click Close to close the download window.

  11. On Mac OS X, select Quit Android from the Android menu to leave the Android app. On Windows or Linux, simply close the window.

3. Download PhoneGap

Now that we have the Android SDK installed, we can use PhoneGap to create an Android project based on our web app.


To ensure the instructions in this book will continue to work long into the future, I have forked the main phonegap-android project and intend to keep a relatively static version. Once you become comfortable using my version of PhoneGap for your Android development, you might want to visit the main page for the PhoneGap project to see if there is anything new and exciting that you might want to incorporate into your apps.

  1. Navigate to the Android PhoneGap download page on GitHub and click the Download Source button in the top right under the Search box (Figure 5).

    Figure 5. My PhoneGap Android page will ensure forward compatibility for the examples in this book

  2. When prompted to select an archive format, click on the big .zip icon. The download graphic will stay open even after the file has been downloaded.

  3. Unzip the downloaded archive to whichever directory you like. I’m going to put mine on the desktop and rename the unzipped SDK directory to “PhoneGap” for the sake of simplicity.

Video tutorials
- How To Install Windows 8 On VMware Workstation 9

- How To Install Windows 8

- How To Install Windows Server 2012

- How To Disable Windows 8 Metro UI

- How To Change Account Picture In Windows 8

- How To Unlock Administrator Account in Windows 8

- How To Restart, Log Off And Shutdown Windows 8

- How To Login To Skype Using A Microsoft Account

- How To Enable Aero Glass Effect In Windows 8

- How To Disable Windows Update in Windows 8

- How To Disable Windows 8 Metro UI

- How To Add Widgets To Windows 8 Lock Screen
programming4us programming4us
Top 10
Free Mobile And Desktop Apps For Accessing Restricted Websites
TOYOTA CAMRY 2; 2.5 : Camry now more comely
KIA SORENTO 2.2CRDi : Fuel-sipping slugger
How To Setup, Password Protect & Encrypt Wireless Internet Connection
Emulate And Run iPad Apps On Windows, Mac OS X & Linux With iPadian
Backup & Restore Game Progress From Any Game With SaveGameProgress
Generate A Facebook Timeline Cover Using A Free App
New App for Women ‘Remix’ Offers Fashion Advice & Style Tips
SG50 Ferrari F12berlinetta : Prancing Horse for Lion City's 50th
Popular Tags
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Exchange Server Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe Photoshop CorelDRAW X5 CorelDraw 10 windows Phone 7 windows Phone 8 Iphone