HTML5 Canvas [205]
Figure 10-1 shows the screen for the finished application.
Figure 10-1. BS Bingo in Safari Desktop Edition
Next, we will look at how to use PhoneGap to turn this simple game into a native iOS application.
Creating the iOS Application with PhoneGap
You will need to install and set up two tools to get an iOS application up and running on your iOS device simulator: Xcode, a free application development IDE from Apple, and PhoneGap. Let’s start with Xcode.
Installing Xcode
Xcode actually comes packaged on the installable operating system DVD for Snow Leopard, but this version will not be as up-to-date as the version available on the Apple developer website.
First, you will want to visit the iOS Developer Center: http://developer.apple.com/devcenter/ios/index.action. Once there, you can create a free user account, which you will need to download Xcode and the latest iOS developer SDK. You will also need to create a paid account if you would like to test or deploy on a physical device and/or sell your application in the iTunes Store. You do not need a paid account to build and test your application in the SDK and the included iOS device simulators.
Download and install the latest version of Xcode and the iOS SDK. This is a large download (3.5 GB at the time of this writing). See Figure 10-2.
Figure 10-2. Download the iOS SDK
Once these are downloaded (most likely to your Downloads folder), start the Xcode installer. The file will be named similar to xcode_3.2.3_and_ios_sdk_4.0.2.dmg. Run the package installer to set up Xcode and the development kit on your computer.
NOTE
Once installed (using the default location), Xcode can be found in the Developer folder on your main storage drive.
Installing PhoneGap
Download PhoneGap from https://github.com/phonegap/phonegap, choosing the ZIP file option, as shown in Figure 10-3.
The file will most likely be saved into your Mac Downloads folder. Unpack this ZIP file in a safe location, such as the desktop.
Inside the ZIP, you will find a series of folders for various devices. We are interested in the iOS folder. Figure 10-4 illustrates this folder structure.
Figure 10-3. Download PhoneGap
Figure 10-4. PhoneGap folder structure
In the iOS folder there will be an installer with a name similar to PhoneGapLibInstaller.pkg. Open this to start the install process.
After the install, you will be given the latest install notes. It is important to read them carefully as they give great information, including the latest tips for getting started with PhoneGap. For example, after this installation, the notes read as follows:
To get started creating PhoneGap projects, launch Xcode, then under the File menu, select “New Project…”.
Navigate to the section “User Templates”, select PhoneGap, then in the right pane, select “PhoneGap-based Application”.
Select the “Choose…” button, name your project and choose the location where you want the new project to be.
That’s it! Modify the contents of the “www” directory to add your HTML, CSS and JavaScript.
iPad:
Go to your project folder and launch the “[projectname]-iPad” Xcode project. You will need the 3.2 iPhone OS SDK.
http://www.phonegap.com
http://github.com/phonegap
In the next section, we will follow these directions closely to get BS Bingo into a PhoneGap Xcode project.
Creating the BS Bingo PhoneGap Project in Xcode
To begin, launch Xcode and create a new PhoneGap project. See Figure 10-5 for an example of the New Project screen.
Select the PhoneGap-based application and click the Choose button.
You will next be asked to save the project in a location and give it a name. We will use the name chapter10_bs_bingo.
You will be presented with