Started with PhoneGap iOS using Xcode 4 phonegap ...

juggleroffbeatMobile - Wireless

Jul 19, 2012 (6 years and 3 days ago)


phonegap: Requirements for phonegap beginner:Getting
Started with PhoneGap iOS using Xcode 4
Step 1
Step 2
This tutorial provides instruction on setting up the latest version of PhoneGap for your application on an iOS device using
Xcode 4.
For information regarding setting up PhoneGap 0.9.5 with Xcode 3, click
For information on setting up an iOS device for development, see the
iOS Dev Center
For information on setting up Cordova 1.5 and above with Xcode 4, click


Intel-based computer with Mac OS X Snow Leopard (10.6) with
Xcode and the iPhone SDK
installed. Make sure to install
the default with the UNIX tools included.
an Apple iOS device (iPhone, iPad, iPod Touch)
iOS developer
(only necessary to install apps on an iOS device)

Step 1

Download the latest copy of PhoneGap
and extract its contents. We are only interested in the
Run the installer until completion. (Make sure Xcode is closed)
Launch Xcode 4 then under the File menu, select "New" and then "New Project..."
Select PhoneGap-based Application from list of templates

Fill in the "Product Name" & "Company Identifier" for your app

Choose a directory to store your app
Now press the run button and your build should succeed and launch in the emulator.

You should see the following error in your emulator

To fix this, we need to copy the www directory into the project (this folder was created when you compiled the project
for the first time). Right click on the project in the left navigation window and click show in finder

In Finder, you should see the "www" directory beside your project

Next step is IMPORTANT! Drag the "www" folder into Xcode 4. You can't just drag the www folder into your app's folder. It
needs to be dragged into Xcode 4!! In my case I would drag it and drop it on HiWorld shown below.

After you drag, you should see the following prompt. Make sure to select "Create folder references for any added
folders". Click Finish.

Modify the contents of the "www" directory to add your HTML, CSS and Javascript.

located in the "Supporting Files" directory. Change "BundleIdentifier" to the identifier
provided by Apple. If you have a developer license, you can access and run the Assistant
and register your App. If you do not have a
developer license and simply wish to test PhoneGap on your desktop simulator, you can skip this step.

Make sure to change the Active SDK in the top left menu to Device+version#.

Click the Run button located at the top right

Step 2


located in the "Supporting Files" directory

and change "BundleDisplayName" to the name
of your mobile application.
Replace the three icon.png files with your mobile application's icon. These are located in the "icons" directory under the
"Resources" directory


in the "splash" directory under the "Resources" directory

And your done!