27 February 2012
The first step to setting up Xcode for PhoneGap applications is to download and install the Xcode IDE from Apple. You can download Xcode from the Apple developer site. Before you can download Xcode, you must register as a developer with Apple. Once you do, you get access to Xcode, the iOS device simulator, and Apple developer documentation for free. If you want to deploy your applications to an actual device or distribute your applications via the iTunes store, you will have to register with Apple as an iOS developer, which has a yearly cost associated with it.
After you download Xcode, simply follow the setup wizard to complete the installation process.
Once you have successfully installed Xcode, your next step is to download and install PhoneGap.
Note: The following steps are shown for PhoneGap 1.5.0, but the process should be applicable or similar to all versions of PhoneGap.
This will launch the PhoneGap installation wizard, which will guide you through the process of installing PhoneGap on your system (see Figure 1).
When you see this message, PhoneGap installation is complete. You are now ready to create your first PhoneGap project within Xcode.
The PhoneGap installer adds a PhoneGap project template to Xcode, which streamlines the creation of PhoneGap applications.
The first step in creating a new Xcode project is to select a project template.
After you have chosen the project template, you'll need to name your project. Give it a name indicative of what you're going to be building.
On the New Project Options screen, you also need to enter a company identifier. The company identifier is the prefix that is concatenated with the product name to create the unique bundle identifier for your application. The bundle identifier should match the App ID that you create for a unique application within the Apple Provisioning Portal (see Figure 5).
If you aren't sure what to type here, or if you are not deploying to a device or distributing this application right away, you can type whatever you want or leave this blank. You can always change the bundle identifier later by editing the Identifier field in the Xcode project summary screen, or by manually editing your project's Info.plist file.
Your PhoneGap project will be created within Xcode. However, there are a few more steps you need to complete before your project is up and running.
Xcode will attempt to launch the PhoneGap application in the iOS simulator. For the first launch, you will see the error message "ERROR: Start Page at 'www/index.html' was not found." Do not worry, this is normal! During this first step, the www folder will be created. After you add it to your project, you should not encounter this error again.
You should now see the www folder under your project root (see Figure 10).
At this point, your project should be correctly configured and should launch in the iOS simulator. If you haven't changed any of the HTML files inside of the www folder, you will see the default PhoneGap starter page inside of your application running within the iOS simulator (see Figure 11).
If you see this, then you are now ready to begin developing iOS applications within Xcode using PhoneGap.
With your PhoneGap environment properly set up, reviewing some Xcode and PhoneGap basics will help you make the most of this development environment.
In general, Xcode should be fairly easy to navigate. On the left side of the screen you will see the project hierarchy, and in the center of the screen you will see the main content area. As you select files on the left side, the content will be displayed within the main editor area.
Here is one simple tip that trips up a lot of people: single-clicking a file in the project hierarchy displays that file's contents in the same window; double-clicking a file opens the file in a new window.
If you select the project root, you will see the project summary screen. From this screen, you can easily set the bundle identifier, application version, target devices, icons, splash screens, and supported orientations among other options (see Figure 12). This screen is useful in configuring your application for deployment.
At the top of the Xcode window, near the Run button, there is a Scheme menu that lets you change the project compilation schemes and target devices or simulators. To target a specific device or change the iOS Simulator target, simply click the project name and then select an alternate device or simulator target (see Figure 13). The next time that you run the application, it will be deployed to the newly selected target.
By default, the content area of Xcode will display source code based upon the files you select in the project hierarchy (see Figure 14).
If you prefer to open and edit multiple files side-by-side, don't fret. This is possible, although it's not immediately obvious how to do it.
Now that you have Xcode set up with PhoneGap, you are ready to start building some serious applications for iOS using PhoneGap. Next, you may want to read Extending PhoneGap with native plugins for iOS.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.