Converting Websites into Native Apps using PhoneGap [NOOK Book]


In this short ebook you will see how you can take your knowledge of HTML5 for mobile devices and convert your optimized Web sites into native applications that run on Android, iPhones, BlackBerry?s and more. PhoneGap integrates tightly into the development environment you are working in. The benefit this bring is that you can extend the core codebase in your apps with plugins and extensions. This gives you the opportunity to leverage features such as such as maps, advertising and more. The popularity of PhoneGap ...

See more details below
Converting Websites into Native Apps using PhoneGap

Available on NOOK devices and apps  
  • NOOK Devices
  • Samsung Galaxy Tab 4 NOOK 7.0
  • Samsung Galaxy Tab 4 NOOK 10.1
  • NOOK HD Tablet
  • NOOK HD+ Tablet
  • NOOK eReaders
  • NOOK Color
  • NOOK Tablet
  • Tablet/Phone
  • NOOK for Windows 8 Tablet
  • NOOK for iOS
  • NOOK for Android
  • NOOK Kids for iPad
  • PC/Mac
  • NOOK for Windows 8
  • NOOK for PC
  • NOOK for Mac
  • NOOK for Web

Want a NOOK? Explore Now

NOOK Book (eBook)
$5.49 price
(Save 7%)$5.95 List Price


In this short ebook you will see how you can take your knowledge of HTML5 for mobile devices and convert your optimized Web sites into native applications that run on Android, iPhones, BlackBerry’s and more. PhoneGap integrates tightly into the development environment you are working in. The benefit this bring is that you can extend the core codebase in your apps with plugins and extensions. This gives you the opportunity to leverage features such as such as maps, advertising and more. The popularity of PhoneGap has reached the ears of many companies. In particular, Adobe is now including PhoneGap support starting with Dreamweaver CS 5.5. If you do not have Dreamweaver you can now even use a Web Service called PhoneGap Builder that will convert your HTML files into native apps. There simply is no excuse when it comes to creating apps. If you know HTML, then you can build a native application.

Read More Show Less

Product Details

  • ISBN-13: 9780240819105
  • Publisher: Elsevier Science
  • Publication date: 8/8/2011
  • Sold by: Barnes & Noble
  • Format: eBook
  • Pages: 30
  • File size: 2 MB

Read an Excerpt



Focal Press

Copyright © 2011 Elsevier Inc.
All right reserved.

ISBN: 978-0-240-81910-5

Chapter One


Up to this point you have built sophisticated websites using HTML, CSS, and JavaScript. Mobile website development is only one of two distinct reasons customers have smart phones. The other reason is apps.

Apps are all the games, utilities, and programs you download onto your phone. Today there are over 300,000 different apps for Android and iOS. Other devices, such as BlackBerry, are building large libraries of applications. In other words, the app market is white hot, as shown in Figure 5.1.

So how do you get in?

This is the brilliant bit. You can use the CSS, HTML5, and JavaScript you have already been using. A company called Nitobi has developed a tool called PhoneGap that allows you to build apps using web technologies. There is no need to know complex programming languages such as Objective-C or Java.

In this section you will convert mobile websites into real-world applications for Android and iOS devices using PhoneGap.

Working with PhoneGap

To build an application for the iPhone, BlackBerry, or Android device requires you to work in a development environment that uses a specialized Software Developers Kit (SDK). For the iPhone, Apple has Xcode, a complete development environment; for Android, Google has an SDK that snaps into the open source Eclipse development environment.

Notobi's PhoneGap is a set of custom templates that work within these development environments. PhoneGap templates provide a set of default settings that do most of the work for you, as shown in Figure 5.2.

The advantage this gives you is that you are building directly in the development environment for the mobile operating system you are targeting, giving you access to all the testing and debugging tools that any developer will be using. In addition, Nitobi has gone to great lengths to make it easy for you to work through the tools.

The negative is that you do need an understanding for how to build an application in the development environment. The term "build" is commonly used to describe the process of converting your code into a native application.

Each development platform has a different approach to building an application. PhoneGap's approach to building templates that install into the native development tools gives you a head start. Fundamentally, PhoneGap will be ready for you to use in your development tools in two steps:

1. Download and install the development environment.

2. Download and install PhoneGap templates.

Let's take Google's Android as an example. To run PhoneGap on Android, first you need to get to Google's developers website ( Select and download the development environment for Android for the operating system you are working on (you have a choice of Windows, Mac, or Linux).

Go to and select the Download Eclipse button. The file will download. After the files have downloaded, run the installation to install Eclipse. After Eclipse has installed, you can add the PhoneGap files.

Go to and select the Download button. You will be downloading a ZIP file containing the PhoneGap templates, as shown in Figure 5.3.

Expanding the ZIP file will reveal a set of subfolders:

• WebOS

• BlackBerry

• Android

• Bada

• iOS

• Symbian

Each folder is tied directly to a mobile operating system. An additional folder named Documentation provides detailed explanation for all the supported features within PhoneGap, as shown in Figure 5.4.

Open the Android folder. You will see a folder named Sample. The Sample folder is a blank project that you can open and use as a template for future projects. Within Sample, look for the subfolder named Assets and then www.

The www folder is where you can place your HTML, CSS, and JavaScript. You can install any HTML5 that is supported by the browser on the Android Phone. This includes advanced technologies such as geolocation, web storage, and CSS3.

Once you have copied over your files, you can use the build tools that are built into Android. In this chapter we will not delve too deeply into the Android build process. You can find a lot of information converting the details of application build for Android at Google's Android YouTube Channel, at com/user/androiddevelopers (Figure 5.5).

Arguably one of the most complex environments is Apple's iOS development process; it is also the platform where you will get a significant number of downloads. For this reason, we are going to step through in detail the process of building an application using Apple's Xcode.

Setting Up a PhoneGap Project for iOS Devices

Apple's development process is complex. There are benefits and negatives to this. On one hand you have process that is thorough and can accurately trace back all applications to the original developer. The negative is that building an application for the iPhone can be a time-consuming process.

The development environment for iOS is Xcode. Before you even download and install Xcode you will need to complete the following steps to become a certified developer and have your apps registered with Apple.

Becoming an Apple Developer

To create an iPhone app you need to complete several activities before your apps will run:

1. Become a certified Apple developer.

2. Create a development and a Developer P12 certificate.

3. Register your development iPhone with Apple.

The hardest part of developing apps for the iPhone is not the code you will develop, but ensuring you have all of your is and ts dotted and crossed per Apple's rigorous registration process.

Becoming an Apple Certified Developer

To be able to develop applications for the iPhone you need to become a certified Apple developer. The cost is only $99 a year and this gives you the ability to load applications to the iTunes App Store. Yes, you heard me correctly—it costs only $99 a year to load as many apps as you can develop into the iTunes App Store. This is an amazing deal.

Follow these steps:

1. On a Mac go to as shown in Figure 5.6.

2. Select the Register button. Either use the iTunes Account information you already have or create a new account.

3. When you have completed the registration you will be sent an e-mail containing a link to your developer and distribution certificates.

4. Go to to download and install an Apple iPhone Developer Certificate.

5. View the certificate by opening Keychain on your Mac. You will need to reference the two certificates as you develop your iPhone Apps.

6. Right-click the Developer Certificate. Select Export Certificate.

7. Select a place where you want to save the certificate. Use the P12 Personal Information Exchange format.

8. Select the Save button. You will be prompted to give your app a password. Give it a secure password and remember it—you will need it later.

9. Export the Distribution certificate in P12 format, too. After you have your P12 certificates you will need to register your test iPhone with Apple. You can register up to 100 devices per year.

1. Connect your test iPhone/iPod Touch to your computer.

2. Open iTunes and select your device from the list to view the Summary tab data.

3. Click the serial number next to your device. The number will change to an identifier (UDID) number.

4. Copy the number.

5. Go to action as shown in Figure 5.7.

6. Select Add Devices.

7. On the Add Devices screen paste in the UDID number and give your device a name. You may want to choose something like "iPhone Development" or "iPod Touch Gen 3 Development."

The developer account ID, registered device, and P12 certificates are needed for all apps your want to sell in the iTunes App Store.

Preparing to Develop an app

Each iPhone app you develop requires several specific tools for it to work. They include:

• AppID

• Provisioning profile

• Icons

With these three tasks complete you will able to create iPhone apps.

Creating App IDs

The App ID is a unique identifier Apple uses to identify your app from the tens of thousands of apps in the iTunes App Store.

1. Go to the App ID page in the iOS developer center (http:// as shown in Figure 5.8.

2. Select New App ID.

3. Give your new app ID a name you can find easily, such as ShakespeareQuotes. The name has to be all one word.

4. Finally, you need to add a bundle seed ID. The convention is to reverse your website address and add the app's name at the end. For instance, com.focalpress.ShakespeareQuotes.

5. Select OK and your new App ID is ready for you.

With your App ID created you can create a provisioning profile for your app.

Creating a Developer's Provisioning Profile

A provisioning profile is a document that you associate with your app for either development or for iTunes app distribution. There are three types of provisioning profiles: Developer, Distribution to Ad Hoc, and Distribution to iTunes App Store. We will cover how to use the Distribution Profiles later in the chapter. For now, you will focus on creating the Developer Profile.

1. Go to the Profile page in the iPhone developer center (http:// action) as shown in Figure 5.9.

2. Select the Development tag.

3. Select New profile.

4. Give your profile a meaningful name. A convention that is gaining popularity is to use the prefix "dev" followed by the App ID; for instance, DevMyFirstApp.

5. From the Certificates list check your name.

6. Find your App ID from the drop-down list.

7. Select your test device from the devices listed and then select the Submit button.

8. Your certificate will take about 30 seconds to generate. When it has, you will see a Download button. Select the Download button and save the Developer Profile to your desktop. The file should have the extension mobile provision.

9. Connect your test iPhone to iTunes.

10. Drag the downloaded Developer Profile onto iTunes and then sync your iPhone. This adds the Developer Profile to your testing device.

Developing Icons for Your iPhone Apps

In preparation for your iPhone app you need four PNG images:

• 29.png—a file that is 29 × 29 pixels

• 57.png—a file that is 57 × 57 pixels

• 512.png—a file that is 512 × 512 pixels

• Default.png—a placeholder file that is used while your app is loading. The file must start with a capital D.

You can create all of these files using tools such as Adobe Fireworks.

Building Your App with Xcode

Now you have all documents you need for an application, but you also need the development environment. Apple's development environment is Xcode.

As a licensed member of the Apple iOS Developer program you can download Xcode for free from Xcode is a very large file, so it will take a while to download.

Installing Xcode is the same as any software package on OS X. Before you start Xcode, you need to install the PhoneGap Xcode templates. From the you downloaded earlier, locate the subfolder named iOS. Open the folder and locate the file named PhoneGapLibInstaller.pkg, as shown in Figure 5.10.

Double-click on PhoneGapLibInstaller.pkg to install the template file. Locate the profile you created for your app site and drag the profile onto the Xcode icon. This adds the profile to Xcode and will allow you to associate it with your app later.

When the PhoneGap files have been installed, open Xcode. On the Xcode splash screen, select the New Project button to choose a new project.

The New Project screen opens. Along the left-hand side you will see PhoneGap under the User Templates category, as shown in Figure 5.11.

Choose the default PhoneGap-based application.

Xcode now generates the files needed for the project. This only takes a moment. To make your project tied to your app, you will need to make a couple of settings changes.

From the Project menu select Edit Project Settings. The settings screen has four main sections: General, Build, Configurations, and Comments, as shown in Figure 5.12.

Select the Build section. You need to associate the profile for your app with this project. This is done in the section named Code Signing with the property Code Signing Identity.


Excerpted from CONVERTING WEBSITES INTO NATIVE APPS USING PHONEGAP by MATTHEW DAVID Copyright © 2011 by Elsevier Inc.. Excerpted by permission of Focal Press. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Read More Show Less

Table of Contents


Converting Websites into Native Apps Using PhoneGap....................1
Working with PhoneGap....................1
Setting Up a PhoneGap Project for iOS Devices....................5
Extending PhoneGap with Plug-ins....................13
Extending PhoneGap with Custom Code....................17
Packaging Your App for the iTunes App Store....................20
Using iTunes Connect to Publish Your App....................22
Using Dreamweaver CS5 5 to Build Your PhoneGap Projects....................24
Using PhoneGap Build to Create BlackBerry and Windows Phone Apps....................24
Read More Show Less

Customer Reviews

Be the first to write a review
( 0 )
Rating Distribution

5 Star


4 Star


3 Star


2 Star


1 Star


Your Rating:

Your Name: Create a Pen Name or

Barnes & Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation


  • - By submitting a review, you grant to Barnes & and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Terms of Use.
  • - Barnes & reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously

    If you find inappropriate content, please report it to Barnes & Noble
    Why is this product inappropriate?
    Comments (optional)