Set up PhoneGap with Xcode 4(.0.2)

I had to set up PhoneGap on Xcode 4 yesterday and found many confusing, wrong, or just outdated pages describing how to do it.  I think they fixed some things in PhoneGap 1.0.0, so the install is much simpler than what these pages were saying.  So here is my version which worked for me:

  1. Download and install PhoneGap 1.0.0 on your mac.  Get it here.  This downloads a ZIP file.  Open it up and run the DMG file installation in the iOS directory.  The instructions I saw said to have Xcode closed at this point, which I did.
  2. Open Xcode and create your new PhoneGap project.  This will set up everything except the www directory.

    New Phonegap Project in Xcode

    New Phonegap Project in Xcode

  3. In Finder, navigate to your project (mine is in my home directory under ‘Xcode projects’).  Copy the www directory from <Macintosh HD>/Users/Shared/PhoneGap/Frameworks/PhoneGap.framework/ and paste it into your project in the same directory as the *.xcodeproj file (i.e., your project’s root directory)
  4. In Xcode, right click on the top-most project header (the blue-ish project header block that contains the entire project) and select “Add Files to <your project name>”.  Find and select the www directory that you just placed in your project, and make sure to change the “Folders” radio button to “Create folder references for any added folders”.  Press Add.  Your project should look like this:

    Final Project in Xcode

    Final Project in Xcode

That’s it.  Select the correct simlulator or iOS device scheme at the top of the project window (next to the RUN/STOP buttons), press RUN and the project should build and start up with the “PhoneGap works!” message.  Now you can continue doing whatever you were planning in the www directory.
UPDATE: there is a specific page for this on phone gap that I had not seen… go to it here.  There are still a lot of pages out there that have bad Xcode 4 info on them though!
Advertisements

About mpickell

I'm a java developer View all posts by mpickell

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: