PhoneGap is a web framework designed to build cross-platform for mobile devices. The framework includes a set of tools to deploy your applications on different mobile operating systems without changing the original code written using HTML, CSS, and JavaScript. We’ll cover how to install this framework on Mac to be used for iPhone development.
Please keep in mind that the version of PhoneGap for iOS development only works on a machine with a recent version of Mac OS X installed, such as Leopard or Snow Leopard.
Getting ready
We’ll need the Xcode tool for building applications for Apple devices using the PhoneGap framework. This tool is an IDE (Integrated Development Environment) designed for Mac OS X. It can be downloaded for free and it’s included on the latest releases of the Apple’s operating system including Leopard and Snow Leopard.
In addition to Xcode, you will need to install the SDK (Software Development Kit) for iPhone, also knows as iOS SDK. Apple distributes this software for free; you only need to register as a developer. This process is fast and you can use your own Apple’s ID.
How to do it…
The first step will be to install Xcode and the iOS SDK. Apple distributes these tools in one DMG file ready for downloading and installing. For registering as an Apple Developer, you should open your browser and type the following URL:
http://developer.apple.com/programs/register/
Follow the instructions on the screen and then at the end of the process, you can access the specific link for downloading this SDK. This link appears as iOS SDK 4.1; it is located at http: //developer. apple . com/devcenter/ios/. If you click on the Downloads link, it drives you to the other link specific for the latest version of the SDK and Xcode. After clicking, the file will be downloaded to your Downloads folder.
When you have the DMG file on your computer, click on it and the installation process will be launched. Note that this process will take a long time because the size of the file is over 3.5 GB. Follow all the instructions on the screen. When the process ends, you will be able to access the applications for launching Xcode. The SDK will be auto configured and ready to use with the installed IDE.
Now, we are going to download the PhoneGap framework. It’s distributed as a compressed file in ZIP and tarball format. We can download it using our browser and loading the URL http://www.phonegap.com/download. You’ll find a button to download it. After downloading, you should decompress the file into your DocumentRoot folder:
It’s time to link PhoneGap to Xcode. For this process, we’ll need to use the command line through the Terminal application. Open this application and execute the following commands:
The make command will generate a binary package (PhoneGapLibInstaller.pkg) for installing PhoneGap on your computer. To start the installation process, open the Finder and click on this new generated file. Follow the simple instructions onscreen. At the end of this process, you’ll be ready to use Xcode to build applications using the PhoneGap framework.
How it works…
PhoneGap uses different tools to create native applications for different mobile platforms. This is the reason to include specific folders for each operating system supported by the framework. We are focused on Apple’s devices, so the most important folder for us is the phonegap-iphone. This folder was used to build the required tools to use PhoneGap with Xcode and the iOS SDK.
Don’t forget that PhoneGap was designed to build native applications. In fact, we’ll need a Mac Intel-based computer with Snow Leopard and the commented tools installed.
PhoneGap installs a specific template for Xcode ready to create new projects using this template. When you create a new project (File | New project), a dialog box shows you a user template called PhoneGap. This template generates the skeleton for a PhoneGap application using a Xcode project file. After the new project is created, you can see a folder called www. This is the place to put your application files. Remember, we’re using web technologies to create native applications.
Inside the www folder, a main file called index.html is created by default. This file contains the minimum code for a PhoneGap-based application. The head section includes a reference to a main JavaScript file called phonegap.js. This file was created during the installation process of the binary package.
For testing our PhoneGap applications, we can use the iPhone simulator—a tool included in the iOS SDK. The Build and Run button of the IDE will invoke directly to run our applications on this simulator. Before this step, we need to choose Simulator-4.1 as the platform target on the configuration of Xcode for our development project.
The iPhone simulator can be launched from the Application folder as an independent application. Actually, we can use this tool to test our application instead of a real device. Any kind of web application can be tested from the simulator, not only the PhoneGap-based application.
Keep in mind, we’ll need to be registered iOS developers to install our native applications into our physical devices. The registration process is not free; you need to pay an annual fee to Apple. For more information about the conditions, requirements, and related information about the iOS Developer Program, take a look at https://developer.apple.com/ programs/ios/.
A complete API documentation with useful examples can be found at
http://docs.phonegap.com.
The wiki site of the PhoneGap project is another resource for documentation and can be found at http://phonegap.pbworks.com/.
The PhoneGap project maintains a repository with applications developed by many authors. It could be interesting to take a look at it: http://www.phonegap.com/apps/. Maybe you can consider the idea of uploading your own!
If you are interested in contributing to the PhoneGap open source project, you can start reading the contributor agreement located at http://www.phonegap.com/contributor-agreement/.
