PhoneGap + XCode4

There’s been a bit of confusion surrounding changes to XCode4 and PhoneGap. Right now the big ones are 1) Where did my PhoneGap user templates go!? and 2) How do I submit my PhoneGap-based app to Apple? Let me help you.

1) You want to create a new PG project, but you’re not seeing the XCode templates when you go through the new project menus. Check out Shazron’s blog @ Nitobi for a command-line script to get you a new project up and running. It’s not as sexy as the XCode template, but it will do.

2) You can’t compile your app for submission to Apple? That was a little more tricky to track down. See this thread on the Apple Dev Forums for a bit of an abstract view of what’s going on. I’ll save you the details. Follow these steps to XCode bliss.

  1. Select the PhoneGapLib.xcodeproj entry in your files list:
  2. Make sure the “All” tab is selected:
  3. Look for the “Deployment” section and scroll down until you see the “Skip Install” parameter. Set Skip Install to YES:
  4. EDIT: Make sure to verify your target device…
    Make sure you have the “iOS Device” option selected in the schemes drop-down:
  5. Go over to the “Product > Archive” menu. XCode will do its compile magic. Open the Organizer to see the app and the listed archives when the compile is complete. At this point, make sure you are ready to upload the app to iTunes Connect. Bonus: we get to skip the Application Loader app from now on!
  6. Select the archive and click the “Submit” button. XCode will ask for your credentials. Log in and select the appropriate app and distribution profile from the list. Submit. If all goes to plan, you’ll get a message of approval. Finished.

That was easy. Now you can navigate the XCode4 waters with PhoneGap.

About these ads
Tagged , , ,

52 thoughts on “PhoneGap + XCode4

  1. kunal says:

    Shazron’s script isn’t self explanatory for someone who is new to using phonegap and just downloaded xcode4. If the script works, it will be great to have a step by step tutorial with screen shot or video.

    • Screenshots and videos? What’s not self-explanatory? He tells you exactly how to use it – pass the project name and the destination directory as the only two parameters. That’s it

      1) Install PhoneGap from the installer (get it from the web). Follow steps 1-3 at http://www.phonegap.com/start
      2) CD to wherever you’ve saved Shazron’s script
      3) make said script executable: chmod 755 create_project.sh
      4) Example usage: ./create_project.sh AwesomePhoneGapApp ~/Applications/

      You’ll have your brand new project in ~/Applications/AwesomePhoneGapApp
      Total time: sixty seconds. No joke. Writing this post took a lot longer.

      If running the shell script is a little over your skill level, I suggest maybe applying for the PhoneGap build program over at https://build.phonegap.com/

  2. Simeon says:

    Argh! Thank you so much. Had no idea about the ‘all’ filter.

    Now if you’d only answer my few other questions…

  3. Simeon says:

    Actually, here’s my issue. When I change ‘skip install’ to yes, I can go to Product > Archive, and it goes through the motions, but never actually creates an archive.

    I notice in the bottom ‘products’ directory that the name.app is red, like it’s missing. Would that be a problem?

    • Hmmm.. I’m not sure about that one. If there are any “red” errors, XCode won’t build. The only thing I can think of is to make sure the skip install is only on the PhoneGap sub project, then archive your app. Otherwise, I’m not sure what’s going on.

      • Simeon says:

        Got it sorted, I had the wrong ‘scheme’ selected. You had that just cropped out of your pictures :)

  4. kunal says:

    @cameron, I tried following those steps , running scripts after giving it all the access rights. Project build with phonegap template, and 3 erros (2 related to VERSION and one other.) And I believe many are facing similar issue with the script.

    • I haven’t experienced that, but I would look at what version of iOS you’re telling it to compile to. Sometimes you have to manually set it in your project settings.

  5. Derik Weatherford says:

    no need for Screenshots and videos. the script its easier than a walk in the park.

    Thank you Cam for the link!!!!

  6. Connor Middleton says:

    I am having the exact same errors that Kunal mentioned. I have yet to find a solution. This is definitely making this harder than it should be.

  7. Bob says:

    Same issue as the others… I am sure it is really simple and we are being dense. Let me see if I can paint a clearer picture.

    I can get all the way through running the script and opening the project file, as described by Shazron.

    When I open the project file from the finder Xcode4 shows the PhoneGapLib.xcodeproj file (right under the www project folder) as an empty icon with a dotted edges and the name PhoneGapLib.xcodeproj is displaying in red. In your screen shot that icon is solid and blueish looking with a series of folders displaying below it. I cannot see that and when I select the icon I do not get any options to edit.

    This situation prevents me from getting to Step 1 of your tutorial.

    If I choose Build instead of making the edits I get the three errors the others describe. They are…

    1. “Shell Script Invocation Error: Head: /version: no such file of directory”

    2. “Shell Script Invocation Error: Cp: /javascripts/phonegap.*js: No such file of directory”

    3. “Uncategorized: error: /version: no such file or directory.

    Many thanks for your help… I’m guessing this might be a simple setting in xcode or maybe the result of the way I have launched the project… but those are very uneducated guesses. I appreciate your expertise in the matter.

    • It’s hard to say what’s going on without actually having experienced the problem myself.

      The reason the project file is showing up in red is because XCode can’t actually find the PhoneGap project file in your ~/Documents/PhoneGapLib directory. First, make sure it’s there. You can try deleting the reference to the project then re-adding it.

      • Bob says:

        Success in getting the PhoneGampLib.xcodeproj connected to the project! I did what you suggested and deleted the instance that was missing and the added it directly from the ~/Documents/PhoneGapLib directory .

        I’ve made the adjustments as you described in the tutorial and now the only issue is that the Archive option is grayed out under the project menu. Any thoughts?

    • Developer says:

      You may have spaces in the names of some of the subdirectories in your file path where you designated for the files to be located on your system. I went into users/shared on my system, located Cordova ‘s directory there and created a new subfolder under that directory with a simple folder name (no caps, spaces, punctuation, etc. to rule out character handling issues) and then named the project something simple like “test1″… There’s a very brief line at the bottom of the FAQ detailing this problem, stating it is limited to the older version of Cordova released in early March 2012, but to my knowledge I have just installed the latest version. There is no warning about this spacing issue that I saw at the beginning of any of their tutorials, so you wouldn’t know if you didn’t read the error logs and troubleshoot your project yourself. According to the FAQ there is nothing else to be done but avoid file paths with spaces in any of the parent folders, and remember this probably includes the full paths on your machine not just custom folders you create, but the errors resolved for my tests when I reverted to a simple directory path on my system. It’s not a setting, but an inherent attribute of the early March release – and possibly some later versions, as I am still having the issue on a presumably upgraded install. If anyone knows why my upgrade may not have taken effect, I’d be interested to know why I might still be experiencing this issue. I did have Xcode closed out for the new install.

  8. @Bob

    Go up to the scheme drop-down where it has your app name then the various options for iOS Device and various versions of the emulator – it’s next to the star/stop buttons. Select iOS device then the Archive option should become available.

    • ofi says:

      Thanks to both of you, Cameron and Bob!
      You made my day. :-)

    • Bob says:

      Just one update… Since I never had phonegap installed before, there was nothing under XCode > Preferences > Source Tree List so I created a new entry called PHONEGAPLIB (must be in all caps) and in path gave it the path of the PhoneGapLib Folder.

      I thought this might be useful for someone still have trouble.

      • Dave says:

        thanks a lot, after doing this step it finally worked, great :)

      • Didier Prophete says:

        just to be clear for people who are still having problems, use this for the path: ~/Documents/PhoneGapLib

      • Thomas says:

        Correction: you should enter the FULL PATH to your PhoneGapLib directory, e.g. /Users/tom/Documents/PhoneGapLib

  9. Nik says:

    I use your steps of the easy setup guide to get things going but it only creates the temporary project in –
    /var/folders/bj/bjPC2DMwEweqVzFkF-zOeU+++TI/-Tmp-/phonegap.jrP7fc58
    /var/folders/bj/bjPC2DMwEweqVzFkF-zOeU+++TI/-Tmp-/phonegap.jrP7fc58

    It doesn’t then create the directory in the requested folder. Can I just copy paste the temporary project to where i need it and run it, or will that create issues?

    BTW i copied and pasted your step 4 –
    /create_project.sh AwesomePhoneGapApp ~/Applications/

    I assume it should be creating the folder AwesomePhoneGapApp in Applications?

  10. Nik says:

    Strike that – I had some chmod issues. I just realised I can drag and drop files into terminal to get the correct path… great for us newbies! ;)

  11. Korto says:

    The “Archive” Option is disabled for me. Any ideas on why that is happening?

    • Make sure you select the appropriate scheme in the drop-down: “iOS Device,” otherwise it won’t be available if you have one of the simulators selected.

      I’m uploading a screenshot right now to the main post, so take a look at the edit.

  12. Virgo says:

    First of all Thanks for this great support, I am able to add PhoneGapLib stuff and Shell Script and also able to remove 3 errors mentioned above but after all i am still getting one error. I Hope someone can answer this post.

    Error
    Check dependencies

    [BEROR]No architectures to compile for (ARCHS=i386, VALID_ARCHS=armv6 armv7).

    • Korto says:

      Perhaps you should check step 4 and make sure you ‘ ve selected the corrected scheme. I had the same error when trying to compile and “Archive” wasn’t working for me. Cameron pointed that out for me.

      • Virgo says:

        Yes you are right missed Step 4….

        Thanks a lot Korto, Bob, Cameron and other members, Finally got user credential screen to submit my first APP!!! i love this blog!!!

        Can’t we have a forum where we can share some new ideas and walkthroughs for PhoneGap Apps?

    • Congrats getting your app up!

  13. TWiT Commander says:

    Does this assume that I paid for $99/year to join the developer program, and hence the privilege to test apps in development on an actual device, not just the simulator?

    I ask because I get an error that reads Code Sign error: The identity 'iPhone Developer' doesn't match any valid certificate/private key pair in the default keychain. I am guessing that picking iOS Device in scheme means that I will be testing the app on a physical device.

    If I pick one of the simulators, I get an error that says No architectures to compile for (ARCHS=i386, VALID_ARCHS=armv6 armv7)..

    • TWiT Commander says:

      Xcode is such a bag of hurt. When you define PHONEGAPLIB in Preferences / Source Trees, Xcode doesn’t like paths such as ~/Documents/PhoneGapLib/.

      Instead, use /Users/username/Documents/PhoneGapLib/.

      This is how you get the thing to work properly:

      1. Download and install PhoneGap as usual.

      2. Open Xcode 4, go the Preferences and click on Source Trees (second tab from the right).

      3. If the table does not have an entry called PHONEGAPLIB, click the + at the bottom left corner and set Setting Name to PHONEGAPLIB (all caps) and Path to /Users/username/Documents/PhoneGapLib/ where username is your OS X username.

      4. Now, do what the main blog post above says up to step 4.

      5. In Build Settings for both the project and PhoneGapLib.xcodeproj, add i386 to Valid Architectures under Architectures.

      Done! Now if you select any of the simulators, the project should compile and launch in the simulator.

      And one more thing. (See what I did there?)

      Apparently Xcode gets b!tchy when there are spaces in the path leading to the .xcodeproj file. I was keeping my projects in ~/Documents/Xcode projects. Don’t do that. ^_^

      • On your last point – spaces aren’t a problem. I have several projects with spaces in directory names.

      • TWiT Commander says:

        The spaces in the path were not causing the compile to fail. They were just producing annoying remarks during compilation.

      • Gary says:

        Hi,

        Unfortunately when setting up my macbook initially a few years ago I used a username with spaces in. This seems to be triggering problems when building.

        It appears to be locating the PhoneGapLib via source trees with the spaces no problem but when i try to build/run i get:

        Script invocation Error:
        head: /Users/Gary: No such file or directory
        head: Mccann: No such file or directory
        head: MBP/Documents/PhoneGapLib: No such file or directory

        It appears to look in three different locations, which obviously It cant find. Any Ideas??

        Ps. I have tried quotes and backslashing to escape the charater but then it fails to locate PhoneGapLib all together

        Thanks
        Gary

      • TWiT Commander says:

        Hi Gary,

        Try making a symlink to the PhoneGapLib directory in root and try again. Open up Terminal and type the following:
        cd /
        sudo ln -s /Users/Gary\ Mccann/Documents/PhoneGapLib PhoneGapLib

        Then go to Preferences in Xcode, and click on Source Trees (second tab from the right).

        If the table does not have an entry called PHONEGAPLIB, click the + at the bottom left corner and set Setting Name to PHONEGAPLIB (all caps) and Path to /PhoneGapLib/.

        If PHONEGAPLIB already exists, replace the path with /PhoneGapLib/.

        This should work in theory.

      • TWiT Commander says:

        Oh snap!

        The second Terminal command should be:
        sudo ln -s /Users/Gary\ Mccann\ MBP/Documents/PhoneGapLib PhoneGapLib

        Here’s a friendly advice from someone who has been burned too many times by to many operating systems. When choosing usernames, follow these two rules:
        1. use all lower-case letters or digits (i.e. a-z, 0-9)
        AND
        2. avoid upper-case letters (A-Z), special characters such as !@#$%^ and space.

        This advice is true for Windows, Linux, Mac OS X, *BSD, etc. Ignoring these rules may work in the short term to get the system up and running, but in the long term, they will rear their ugly head when you least expect it to and it’s most inconvenient.

      • Developer says:

        This thread is a year old but still very helpful. If there’s a newer thread anywhere on these topics I’d love to read it. Cheers

  14. brandonwc says:

    anyone know what would cause this error xcode 4
    Users/brandonwc/Library/Developer/Xcode/DerivedData/ihateappleapp-gqxaansvtrssqaebbricjdmevrmx/ArchiveIntermediates/PhoneGapLib/IntermediateBuildFilesPath/PhoneGapLib.build/Release-iphoneos/PhoneGapLib.build/Script-78AAE5AF135F687C002DA0FF.sh: line 10: 5.: command not found
    Command /bin/sh failed with exit code 127

    thanks

    • TWiT Commander says:

      Take a look at this. Main thread here.

      Looks nasty. I’d rather start over by deleting PhoneGap, removing Xcode (can that be done?), then reinstall Xcode and PhoneGap. The .xcodeproj should import right in and you should not lose any data.

      By the way, are you using Xcode 3 or Xcode 4?

      • Hey, sorry this just got approved. I didn’t notice it sitting in the pending messages queue. There shouldn’t be any need to reinstall XCode, though it wouldn’t hurt to do a clean PhoneGap install based on the instructions over at nitobi and this post. I believe at this point things have been improved and I think there’s now an XCode4 template available, though I haven’t started a new PG app in the last few months, so I can’t say for certain.

        Again, my apologies.

  15. brandonwc says:

    also changing some setting i can get it to exit with error code 1 with this info instead
    /Users/brandonwc/Documents/PhoneGapLib/build/Release-iphoneos//: object file format unrecognized, invalid, or unsuitable

  16. Gary says:

    Unfortunately when setting up my macbook initially a few years ago I used a username with spaces in. This seems to be triggering problems when building.

    It appears to be locating the PhoneGapLib via source trees with the spaces no problem but when i try to build/run i get:

    Script invocation Error:
    head: /Users/Gary: No such file or directory
    head: Mccann: No such file or directory
    head: MBP/Documents/PhoneGapLib: No such file or directory

    It appears to look in three different locations, which obviously It cant find. Any Ideas??

    Ps. I have tried quotes and backslashing to escape the charater but then it fails to locate PhoneGapLib all together

    Thanks
    Gary

    • TWiT Commander says:

      Hi Gary,

      Try making a symlink to the PhoneGapLib directory in root and try again. Open up Terminal and type the following:
      cd /
      sudo ln -s /Users/Gary\ Mccann\ MBP/Documents/PhoneGapLib PhoneGapLib

      Then go to Preferences in Xcode, and click on Source Trees (second tab from the right).

      If the table does not have an entry called PHONEGAPLIB, click the + at the bottom left corner and set Setting Name to PHONEGAPLIB (all caps) and Path to /PhoneGapLib/.

      If PHONEGAPLIB already exists, replace the path with /PhoneGapLib/.

      This should work in theory.

      • Gary says:

        TwiT commander, you genious!

        Many thanks it worked a dream! Well actually I was getting two lots of the same errors, I’m now only getting 1 lot of three but build succeeded.

        Thanks again. Yeah when I set this comp up I had little knowledge, although still limited I have been burnt by spaces before so your tip rings through once again.

        Thanks Again
        Gary

      • TWiT Commander says:

        We can try to fix those errors with space.

        Because Mac OS X is Unix, we can use many Unix tricks here. Even though you have spaces in your user name, there's a way around it.

        Open up Terminal (I love Terminal, isn't that obvious already? ^_^) and do the following:
        cd /Users
        sudo ln -s Gary\ Mccann\ MBP/ garymccannmbp

        Now, whenever you specify a path, instead of using
        /Users/Gary\ Mccann\ MBP/ or
        /Users/Gary Mccann MBP/, use
        /Users/garymccannmbp/

        This should work to eliminate most errors.

        Note: A symlink is like a shortcut in Windows, but it is actually more powerful. In our original example, /PhoneGapLib/ isn't just a shortcut/pointer to /Users/Gary\ Mccann\ MBP/Documents/PhoneGapLib , it is the latter. This is powerful stuff.

        By the way, you just became the first person on the Internet to call me a genius. Thanks! (hint: genius is not spelt with an o. xD

  17. ofi says:

    As seen yesterday on http://www.phonegap.com/2011/04/28/phonegap-0-9-5-released/ PhoneGap should now work out of the box with Xcode 4 (see upper third of the article in Shazron’s changelog entries), but I still hadn’t the time to verfify. Any experiences so far?

  18. [...] worked and I had to do a number of things to get it to build. Most problems were solved using this guide by Cameron Perry and the comments which follow. Here’s what I recall [...]

  19. BarryJ says:

    I downloaded XCode 4 and PhoneGap 0.9.5yesterday (Tuesday) didn’t work out of the box, still ran the shell script.

  20. Steven says:

    I ran the script and it ended with “no such file or directory.” Any reason for that?

  21. [...] Perry has a good post about using PhoneGap with Xcode 4 that might solve some problems users might [...]

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

Follow

Get every new post delivered to your Inbox.

Join 385 other followers

%d bloggers like this: