PhoneGap Skeleton

For iOS and Android

Updated December 7, 2012

Recently, we built a mobile app using PhoneGap. One of the better things to come out of it is a skeleton for future mobile app development for iOS and Android projects. We were able to bundle both the Eclipse project and Xcode project files together.

This can be helpful in getting started quickly. Or for keeping your code simply organized. Either way we recommend versioning any work you do and this gives you a place to start.

New – Get the Latest Code

The ZIP file (28MB) including PhoneGap 2.2.0 built with Google API 16

Older Versions

The ZIP file (4.5MB) including PhoneGap 1.7.0 built with Google API 15

 

Loading in Eclipse

You’ll need to setup the Android SDK, API 15 and ADT plugin prior to using the project.

The easiest way is to extract the ZIP file anywhere on your computer and then Import an existing project into your workspace.

Loading in Xcode

You’ll need to download PhoneGap anyways and run the installer.

Just double click on the xcodeproj file in assets/howdyworld.xcodeproj.

How it Works

Takes advantage of the fact that Android doesn’t compile or look for code in its assets folder. The assets folder is where you store the web code. So we can put the Xcode project in the assets folder. This way you can have one root folder sharing common web code for separate devices.

In addition there’s some JavaScript to switch Cordova/PhoneGap JavaScript files per device. This matches on the navigator.userAgent testing for “android” or “iphone”. Feel free to extend this.

Do it yourself

Create the project first in Xcode. Follow the instructions to setup the project like normal. So now you have an Xcode structure like:

 

Then you want to create an Android project in Eclipse. Follow the standard procedure. But this time, when it comes to creating the assets/www folder. You’ll call upon the Xcode project. Drop the structure including the /helloworld, /helloworld.xcodeproj, and especially /www into /assets.

 

After you setup the projects there’s the small issue of switching the cordova JavaScript library. In the index.html file you’ll want to add some JavaScript that detects the navigator’s user agent (navigator.userAgent) and then check if it’s android, iphone, or anything else. Then do a document.write() for the script tag and the appropriate scripts

Further Research

I am always happy to hear better ideas. This was fast, quick, and got us running immediately. We really wanted to save someone else a few smidgens of time.

Get Some More

Come check us out at mLearnCon in June. We’ll be talking about PhoneGap and how we used it. With an eye toward how to best take advantage of PhoneGap and what it means for your development.

 

Tags: Android, HTML5, iPad, iPhone, Mobile, Mobile Development