PhoneGap Getting Started

I have now developed a few prototypes with html5 and jquery-mobile and was ready to make a real mobile app.

I was a little confused. PhoneGap advertises to be a cross-platform phone development platform, but their Getting Started guide has you declaring your mobile affiliation before you read the first word of documentation.  Looking at the individual guides, I gained an understanding: one can think of PhoneGap as a publishing platform. (There is much more to PhoneGap by way of its powerful javascript API's, but that's outside of the scope here.)  One sets up a project, develops the code, then publishes it to the individual platforms as needed, allowing PhoneGap software to compile the proper binaries to be distributed.


This discovery enabled me to answer the next question I had:

How do I organize the files?

Because my web project is the platform-independent portion of the solution, its folder should reside outside of the project hierarchy.

Here is what PhoneGap's getting started guide has to say:

IMPORTANT! Drag the www folder into Xcode 4. Don't drag the www folder into your app's folder. It needs to be dragged into Xcode 4. For example, you would drag and drop it on the highlighted red section of the HelloWorld project shown below.

This means, create the folder somewhere on your hard drive (Finder, in my case), then grab and drag it directly into the XCode UI.

A dialog will pop up with a question:

It's an important discovery for me: we are simply creating a reference to a folder, containing our web project.  Other resources: images, css, js, html pages will all reside there.  The project tree will be used for platform-specific components only.  What those are is still to be determined...

In the meantime, I am setting up a folder to sync with my web app. This will enable me to test and demo my app on the web, while publishing it to the mobile platform with PhoneGap.

Posted in: PhoneGap