How to write an iPhone app with PhoneGap

PhoneGap lets you write smartphone apps with HTML, CSS and JavaScript. No need to learn Objective-C or get used to proprietary C/C++ libraries. Sounds good in theory, but how easy is it really?

I found the official documentation a little bit confusing, so I wrote this streamlined howto while I’ve been testing PhoneGap myself. If you got about an hour of time, these are the steps to follow to compile & run your own iPhone app:

Get an iMac / MacBook, if you don’t have one yet. You won’t be able to write iPhone apps without a Mac.

Download the latest version (currently 2.1.0) of PhoneGap from http://phonegap.com/download and extract it to Applications/PhoneGap/ (for example).

Register for an Apple developer account. You can use your existing Apple ID. It’s free.

Install Apple Xcode from the App Store. Start it and go to Xcode -> Preferences… -> Downloads. Install “Command Line Tools” and, if you like, “iOS 5.1 Simulator” (the iOS 6 Simulator should already be part of the latest Xcode). Wait until the installation is finished (takes a while, depending on your internet connection).

Open the Terminal app and type:

cd /Applications/PhoneGap/lib/ios/bin
mkdir /Users/[username]/PhoneGap
./create /Users/[username]/PhoneGap/Example com.domain.example "Example Project"

Open the project directory (/Users/[username]/PhoneGap/Example) in Finder and click on “Example Project.xcodeproj” (automatically opens in Xcode).

Make sure the build target is “iPhone 6.0 Simulator”. Press Run.

Click “Enable”, if Xcode asks you about whether to enable “Developer Mode on this Mac”.

You should see the screen below:

Stop the application.

You can now start to modify the application using CSS, HTML and JavaScript. The files can be found in /Users/[username]/PhoneGap/Example/www. Press Run every time you want to test your app in the simulator. Remember to read the documentation.

Happy coding!

Deploy to your iPhone device

  1. Register for the iOS developer program for 99 US-$/year.
  2. Connect your iPhone via USB. If iTunes opens, close it. A dialog (“Organizer – Devices”) opens where you should see your phone. Click on “Use for development”. Make sure the provisioning profiles are configured/installed (this is what you actually pay for), otherwise you will see a “Code Signing Error” error while building the app. Also make sure the CFBundleIdentifier in Resources/Example Project-Info.plist is set to the identifier provided by Apple.
  3. Set the build target to your iOS device and press Run.

As you can see, I never actually deployed to my iPhone, since I don’t want to pay 99 $ for a simple test (maybe later). But this is how it works in theory ;)