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.
Note:
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.
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→ Accessories→Command 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:
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 http://java.sun.com/javase/downloads) first. My
development machine is a MacBook Pro running Mac OS X 10.6, so in my case, the
appropriate package is android-sdk_r06-mac_86.zip
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.
Warning:
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.
Unzip the downloaded archive to whichever
directory you like. I’m going to put mine on the desktop.
Warning:
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.
For simplicity’s sake, I’m going to rename
the unzipped SDK directory to Android.
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
Enter the following command to launch the
Android SDK and AVD Manager. On the Mac or on Linux, the command
is:
./android
On Windows, the command is:
android
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).
Check the box next to
https://dl-ssl.google.com/android/repository/repository.html
to install all of the available packages and archives (Figure 3).
Click the Install Selected button in the
lower right corner of the window.
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).
When your download completes, click Close
to close the download window.
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.
Note:
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.
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.
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.
