Build Kilo Gap

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.

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 You will need to install Ant before you can run droidgap.

1. 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 7-7).

Figure 7-7. The droidgap wizard asks you a few questions and builds a customized Android project based on your answers

2. 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."

3. 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.

4. 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 7-8), so I'll enter:


** ^ O L^j www CD

= nn



Sä s


Î indesi.html

ej JSC MBP P iDisk

^ Macintosh HD


i=J JSC Mini

1 "i jqtojch a kilo.css !«■ kilo.js l'~l them«


OH jsc

1 ~l Projects

_ Dropbox

a v



5 ¡terns,

103,52 GB available

Figure 7-8. My HTML, CSS, and JavaScript files are in a folder named www on my desktop

5. 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:


6. 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 7-9).

« r* n

[□ KiioCap



IS items, 103.52 GE available

i AndroldManifest.xml S assets ▼ H. www

? ¡ndex.html ► LL jqtoucli kilo.ess |S| kilo.js ? phonegap.Js i AndroldManifest.xml S assets ▼ H. www

? ¡ndex.html ► LL jqtoucli kilo.ess |S| kilo.js ? phonegap.Js

► L^l themes
















Figure 7-9. droidgap will build your project and put the files in the output directory you specified

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:


<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>

0 0

Post a comment