Started with PhoneGap iOS using Xcode 4 phonegap ...

juggleroffbeatMobile - Wireless

Jul 19, 2012 (5 years and 29 days ago)

625 views

phonegap: Requirements for phonegap beginner:Getting
Started with PhoneGap iOS using Xcode 4
i
.
Requirements
ii
.
Step 1
iii
.
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
here
.
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
here
.

Requirements

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
certification.
(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
iOS
directory
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.



Open
[AppName]
-Info.plist
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
at
http://developer.apple.com/iphone/manage/overview/index.action
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.

IMPORTANT:
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

Open
[AppName]
-
Info.plist


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

Change
D
efault.png
located

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

And your done!