Book Image

iPhone JavaScript Cookbook

By : Arturo Fernandez Montoro
Book Image

iPhone JavaScript Cookbook

By: Arturo Fernandez Montoro

Overview of this book

<p>Undoubtedly, the iPhone is one of the most exciting mobile devices in the world. Its iOS is used in other Apple devices such as the iPad and iPod Touch. With this book you'll learn how to build and develop applications for these devices without applying Apple's burdensome and at times restrictive technologies. Just use your experience and knowledge combined with web front-end technologies like JavaScript to build quality web apps. Nobody will know you haven't used Objective-C and Cocoa.</p> <p>The <i>iPhone JavaScript Cookbook</i> offers a set of practical and clear recipes with a step-by-step approach for building your own iPhone applications applying only web technologies such as JavaScript and AJAX. Web developers won't need to learn a new programming language for building iOS applications with a native look and feel.</p> <p>The first part of the book introduces you to the world of iPhone applications. Understanding how it works is required for designing good user interfaces for this device. You will continue learning about how to apply multimedia features to your applications. Common features of web applications, such as AJAX and SQL, can also be applied to our iPhone applications. The third part of the book explains how to deal with specific features of iPhone such as the accelerometer. At the end, you learn how to offer additional features through external websites. With the <i>iPhone JavaScript Cookbook</i>, you will be able to develop outstanding web applications with a for Apple's mobile devices, offering your users all of the advantages of the native look and feel.</p>
Table of Contents (17 chapters)
iPhone JavaScript Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Installing the PhoneGap framework


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.

Note

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/. The next page will show you a list with different links. 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:

$ cd /Library/WebServer/Documents/
$ unzip ~/Downloads/phonegap-0.9.4.zip

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:

$ cd /Library/WebServer/Documents/phonegap-0.9.4/phonegap-iphone
$ make

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/.