How to Install PhoneGap for iOS Project

In this tutorial, we will install PhoneGap for our iPad project. You must have Xcode 4 already installed before you install PhoneGap.

Download and unzip PhoneGap
In the unzipped folder you will see several folders. We want the iOS folder.
Inside the iOS folder you will see the PhoneGap-1.0.0.dmg file.
Click on the dmg file to open a dialog box with the PhoneGap.pkg file. Drag the PhoneGap.pkg file to your Applications folder on your Dock.
In the Applications folder, double click on the PhoneGap.pkg file to open the Installer.
In the Installer window, click the Continue button for the first two screens until you get to the Select a Destination screen. Accept the default to install PhoneGap in your home folder.
On the next screen, click Install. When you see the Installation Successful notice click Close.
Open Xcode 4 and click Create a New Xcode Project.
In the choose a template dialog box, click iOS/Application on the left and choose PhoneGap-based Application in the right window.

Read the notice at the bottom about the www folder that will be created on first run. PhoneGap cannot create this www folder on installation but it will create it when you text your project in the simulator for the first time. Once the www folder is created, you will need to drag it into the Xcode Project Navigator.
Give your project a name such as the name of the iPad storybook.
Add your company identifier com.yourCompanyName.
Click Next.
In the drop down panel, choose a location where you wish to save your project files. I usually place my project folders on the desktop where I can find them easily.

Xcode will open with your new project displayed in the Project Navigator on the left. If you go to the project folder on your desktop, you will not see a www folder yet. Remember, you need to test (run) your project in Xcode so that Xcode can make this www folder.
Click on the Run button in the upper left of the Xcode workspace. In the simulator, you will see an error message stating that the www/index.html was not found.
Open your project folder on your desktop and you will now see the www folder which contains a JavaScript and index file.
Drag the www folder into the Xcode Project Navigator and place it directly over your project's name at the top, until you will see a little plus sign.
In the dialog box that opens, select the radio button for Create Folder references for any added folders and click Finish.
Your www folder should be the first folder in the Project Navigator list.

Run the project again and you will see a message in the simulator that PhoneGap is working.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.