I recently launched Food Buster (www.foodbustergame.com) as part of the Apps For Healthy Kids competition. It's a web game that utilizes jQuery, Ajax, and JSON based web services to send information to and from the web server and the web database. When players come back to the game they pick up where they left off, logging back in to their account and seeing how many points they have.

I decided to check out the PhoneGap project in the hopes of reusing some of the code I had already done. A lot of people know and love web technologies,. I much prefer building my iPad app in HTML5, jQuery, and local storage databases using SQLite. The beauty of this all is Webkit. Phonegap is basically a full-screen web engine, and if you include the Phonegap.js file in your html page, you get access to phone hardware, native dialog boxes, some native UI elements, and on phones you get some of the phone functionality.

Before starting your phonegap app it's important to think through the strategy. It's a little bit of a paradigm shift to move an app from a server/client setup to it all built in to the device.

Here was my strategy for conversion:

 

 

Web/Server PhoneGap What it is in Food Buster
SQL Tables (referenced data sets) static JSON object file There are 2,000+ food items with calorie, fat, sugar, portion size information. I converted this to a JSON object array and created foodData.js
SQL Tables (user and game history) HTML5 Datatables (sql lite) When you return to Food Buster, all of your previous games are used to calculate your current points and you start off where you left off in the game.
jQuery .ajax() calls none, since your data is local cut them out! On the web every time a user drops a food item on to the scale
 looped data output / grids / repeated items
 jQuery Templates
Food items are repeated, results page has repeated items, etc.
jQuery Templates
jQuery Templates
Dynamically add a new food item after one is stacked, dynamically add 
 CSS CSS
All the styles, image backgrounds, and style information is 100% identical. Food Buster makes use of a large background but the main objects are in a fixed-width container which is narrower than the iPad
 Session localStorage / sessionStorage (HTML5)
While you are playing a round of the game, each item stacked on the scale sends an ajax call back to the server to identify that it has been selected. That way, if the page is refreshed, you don't have to start all over again. On the iPad, this can similarly be done using localStorage. In fact, the app can be closed and then re-launched!

Ultimately you'll have to decide how you break up your app, not all scenarios map the way I've done it. 

A couple more tips I'll share:

That's it! enjoy iOS developing using the latest and greatest of web technologies and javascript frameworks!