Next, we’re going to convert our web app into a native Android app. The
gang at Nitobi has created a little helper application
named droidgap to help us with this. When you run droidgap, it’ll
ask you a few questions and insert your answers into a bunch of locations
throughout a template to create your project. It’s very cool; in fact, if
you ever run into someone from Nitobi, you should buy him a martini.
Note:
The Android SDK requires Apache Ant, which is
included with Mac OS X and many versions of Linux. If you’re using
Windows, see http://ant.apache.org/manual/install.html. You will need
to install Ant before you can run droidgap.
To begin the wizard, launch the Terminal
application and enter the following command:
droidgap wiz
The wizard will ask you for a few pieces of
information that will be used to generate your PhoneGap project (Figure 1).
When prompted, enter a name for your app.
This is the name that will be displayed to the user in various places
on the phone (e.g., beneath the home screen icon for your app, in the
list of applications). I’m going to enter “Kilo.”
When prompted, enter a package name for
your app. The package name serves as a unique identifier for your app.
Typically, people use reverse domain name syntax for app package names. I’m going to enter
com.jonathanstark.kilo, but you should use your own
domain name.
When prompted, enter the path to the folder
on your computer that contains the HTML, CSS, and JavaScript files for
your web app. My files are in a folder named www
on my desktop (Figure 2), so I’ll
enter:
~/Desktop/www
When prompted, enter a directory path for
your project. The directory must not already exist—droidgap is going
to create it for you. If a directory exists at the path you specify,
droidgap will give you an error and ask for a different path. I want
droidgap to put my PhoneGap project on my desktop in a directory named
KiloGap, so I’m going to enter the following:
~/Desktop/KiloGap
When prompted, enter the Android SDK
platform you are targeting. If you followed the instructions above to
install all Android SDK platforms, your target platform ID is
android-7.
If you want to target a different platform,
you can get a list of available platform IDs by leaving the platform
ID blank and pressing Enter. In the list that appears, the first line
of each entry will have an ID displayed as both an integer and string
(e.g., id: 2 or "android-4"). Enter the string version of
the ID without quotes (i.e., android-4) when the droidgap
prompt returns.
After entering the target SDK ID, droidgap will
build your project and put the files in the output directory you
specified. The process should only take a couple of seconds (Figure 3).
If you navigate to the
~/Desktop/KiloGap/assets/www/ directory, you’ll
notice that droidgap has deposited a file named
phonegap.js alongside your other application files.
This is the file that PhoneGap uses to expose certain native device
functionality via JavaScript. To make use of
phonegap.js, you have to include it in the
head section of your index.html
file like so:
...
<head>
<title>Kilo</title>
<link type="text/css" rel="stylesheet"
media="screen" href="jqtouch/jqtouch.css"/>
<link type="text/css" rel="stylesheet"
media="screen" href="themes/jqt/theme.css"/>
<link type="text/css" rel="stylesheet"
media="screen" href="kilo.css"/>
<script type="text/javascript" src="phonegap.js" charset="utf-8"></script>
<script type="text/javascript" src="jqtouch/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js" charset="utf-8"></script>
<script type="text/javascript" src="kilo.js" charset="utf-8"></script>
</head>
...
