Setting Up An Environment to Develop iPhone Apps Using PhoneGap

As promised, here is a snapshot view of what’s involve in my process to setup the environment to start developing an iPhone app using a multi-platform environment known as PhoneGap.

  1. Before you can even install the Apple Software Development Kit (SDK), you’ll need to be a registered Apple Developer ($99/yr).  Why does Apple charges developers to basically create programs to fill up the iTune App store for them?  There are both sides of the argument which can be read here.
  2. Download PhoneGap from here.  This allows you to create cross platform apps using HTML, CSS, and JavaScript.
  3. Download JQTouch from here.  This will be your UI.  UPDATE:  Recently, a new UI has come out that I personally like more than JQTouch.  It’s JQuery Mobile and although as of today, it’s only available as an Alpha download, but it’s pretty robust.  You can check it out here.
  4. Next you’ll need to go and login at Apple’s Developer website and get your device, computer environment, and app registered and approved by apple.  This is done by first going to the iOS Provisioning Portal after you login, then into the Apple Developer site by selecting “Devices” from the left hand menu and clicking on the “Add Device” located in the upper right corner of the screen.  You will be prompted to add a device name and a device id.  The device name can be any name you want, but be selective so you can tell which device belongs to whom and what kind of device it is.  For example: Sarn’s iPod.  The device ID can be found by plugging in your device and going to iTunes.  Click on your device and you should see your device’s serial number.  Click on the serial number and it will turn into 40 character hex number known as the UDID.  Copy it and paste it into the Provisioning Portal.
  5. Next you need to create and upload a Certificate Signing Request (CSR) from your computer to Apple.   There’s a 9 step process that you can read more here under “Generating a Certificate Signing Request.”  (You will need to login before gaining access to see the tutorial.)
  6. Now you need to download a development certificate from Apple.  Go to the left hand menu and click on “Certificates.”  Upload the CSR to the development tab.
  7. Once your CSR gets approved from Apple you’ll be able to download a Development Certificate.  Download it to your desktop and install it to your Keychain Access.
  8. Now that your machine that you will use to develop apps has been basically authorized by Apple, you can now set up and register your app.  First you’ll need to create an app id.  To do this, click on “App IDs” from the left menu in the Apple development website.  Then click on the “New App ID” button in the right hand corner.
  9. Enter in a common alias, select “Generate New,” and a Bundle Identifier.  The bundle identifier is a unique identifier for your app, and there is a standard convention for this.  Typically it’s to use a reverse-domain approach.  For example com.domainname.appname.
  10. Now that an app ID is created, you will need to create a development provisioning profile for that app so that you can test the app on your device.  Click on “provisioning” from the left hand menu and click on the new profile button.  Create a profile name, the certificate name that you created in steps  5-7, select the app ID you created in steps 8-9, and select the device you setup in step 4.  Once your provisioning profile has been created, download it to your desktop.
  11. Drag the provisioning file to the XCode icon.  That’s basically installing your provisioning profile into Xcode (the compiler and development tool that you’ll use to create Apple apps).
  12. Now you’re ready to create iPhone PhoneGap apps!  Open up XCode and click on create new project from the File Menu.  Click on “PhoneGap-Based Application” as your template.
  13. You’ll have to update bundle ID in info.plist.  On the left menu under “Group & Files” navigate through [Project Name] -> Resources -> [Project name]-info.plist.  Under bundle identifier use the same reverse-domain  you registered with Apple in step 9.
  14. Next go to the top menu and select Project -> Edit Project Settings -> Build.  Make sure architecture = standard and base SDK = iPhone Simulator 3.2
  15. If you’re using a first gen iPod touch (like I am) or if you get issues once you build and run your code, you may have to revert to a different architecture.  You can revert one version back by going to Project -> Set Active Architecture -> and select a lower version ARMV.

And that everyone is how you setup your environment to develop Apple mobile apps.  Not too bad isn’t it? 🙂

Other resources:

Once you have the environment setup, this tutorial is a quick good read to get your feet wet with the basics of PhoneGap mobile development.

Electronic Version of Building iPhone Apps with HTML, CSS, and Javascript: Making App Store Apps Without Objective-C or Cocoa.  Fantastic read, I owned the physical copy of it and read it from cover-to-cover within a day.