My Development Workflow for PhoneGap iOS Apps

June 12, 2013By 12 Comments

Phonegap-Logo-SimpleI decided to blog the process I have personally found productive when developing mobile apps for PhoneGap and iOS in case it might help others. Below I cover the overall steps I take followed by a short video showing the process in use. This is only one of many possible workflows but if you’re looking for a fast track to getting started then this should be useful.

Note: This workflow assumes you’re developing on a Mac :)

CREATE

Create a PhoneGap project for iOS using the PhoneGap command line tools. For example, from within your phonegap-2.7.0/lib/ios/bin folder (or anywhere if set on your PATH) and run the create script with your desired project and app name:

./create ~/MyPhoneGapProject com.sample.phonegapapp MyApp

The project created includes a sample PhoneGap application already configured, so you can run the index.html immediately if desired. See the index.js file for the sample application code to handle the deviceReady event which is needed before displaying your content.

CODE

Open your newly created project in your favorite IDE (I happen to use WebStorm from JetBrains currently), then double click the .xcodeproject file that was created in your project to bring it up in XCode as well from within the same folder. I keep both IDE’s open and do all of my coding in WebStorm since it has good formatting, code hinting and other features I personally prefer, and only flip over to XCode when I need to actually run the app on my device or the simulator for testing.

DEBUG

When ready to debug, open Safari and use the Developer Tools – Web Inspector to remote debug directly on your phone or iOS simulator from the browser. Note that you’ll first have to make sure you’ve enabled the feature and set the Develop menu to be visible in Safari. My colleague Ray Camden wrote up an informative post on this process, check it out for more details!

Below is a short video showing this process in action…

Filed in: CordovaPhoneGap Tags:

About the Author ()

Comments (12)

Trackback URL | Comments RSS Feed

  1. Brendan says:

    Awesome post (yet again) Holly. Haven’t worked with PhoneGap for a while but this is really pulling me back! Keep up the great tutorials, really great.

  2. hello,
    it is really nice tutorial and it is beneficial for phonegap developer .they can found so many nice tips by this blog.

  3. Jerry says:

    Thanks Holly,

    Can you do a tutorial for android?

  4. Bob says:

    Hi Holly, Really a great tutorial. Have been into iOS development from last 10 months and its actually been great to review blogs like this.

  5. codeBelt says:

    Nice video tutorial it was short and sweet. I am hoping you could make another one to show a workflow for a project that is both Android and IOS.

  6. Srinath says:

    Thanks Holly,

    Great tutorial :)

  7. Mauro says:

    Hello Holly, nice tutorial, thanks for sharing!

    Is there a way to work on part of the development, layouts and logic using just a regular browser? I mean, i’ve already tried, but I can never get the ‘device ready’ because the phonegap.js doesnt actually work on a browser.

    thanks

  8. Giant Elk says:

    Good video explanation, what do you use for the HTML framework, i.e. are you using jQuery Mobile?

  9. chad says:

    you may want to remind people to not make the mistake of working in the platforms/ios folder with xcode out of habit. If they do the next time they happen to do a “> cordova build” everything in platforms/ios is going to get overwritten by what’s in /www.

  10. Mehmet says:

    Hi Holly,

    Awesome tutorials. Bookmarked 3 of them already.

    I have been looking everywhere for a tutorial on setting up Webstorm with Cordova plugins. Could you do one for that? My problem is that I don’t know how to add cordova.js and related content to Webstorm so if I want to add plugin specific code such as: navigator.camera.getPicture() IDE fills with errors even though the cordova build/run works.

    Thanks and appreciate the great work!

Leave a Reply