Overview

Now web developers can create cross-platform mobile apps in a language they already know

Are you a web developer eager to move into the mobile space, but don't have the time to learn a new language? Then PhoneGap is what you've been waiting for. PhoneGap is a free and open source framework that allows you to create cross-platform applications using HTML, CSS, and JavaScript. Beginning PhoneGap shows you how to make it happen. After a brief review on installing and configuring ...

See more details below
Beginning PhoneGap

Available on NOOK devices and apps  
  • NOOK Devices
  • Samsung Galaxy Tab 4 NOOK
  • NOOK HD/HD+ Tablet
  • NOOK
  • 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)
$19.49
BN.com price
(Save 44%)$34.99 List Price
Note: This NOOK Book can be purchased in bulk. Please email us for more information.

Overview

Now web developers can create cross-platform mobile apps in a language they already know

Are you a web developer eager to move into the mobile space, but don't have the time to learn a new language? Then PhoneGap is what you've been waiting for. PhoneGap is a free and open source framework that allows you to create cross-platform applications using HTML, CSS, and JavaScript. Beginning PhoneGap shows you how to make it happen. After a brief review on installing and configuring PhoneGap, you quickly dive into using PhoneGap to build iOS, Android, and Blackberry applications. Each chapter provides an in-depth view of different components, and lets you master each through exercises before moving on to the next piece. By the end of the book, you'll be ready to create your own mobile applications.

Beginning PhoneGap:

  • Walks you through the entire process of creating a PhoneGap application, including contacts, the camera, media files, storage options, and more

  • Demonstrates how to install and configure PhoneGap for iOS, Android, BlackBerry, webOS, and Symbian

  • Reviews event objects and event types

  • Shares techniques for working with the network, the device, and notifications

  • Provides essential guidance on mastering the filesystem, web databases, and storage

  • Encourages you to make the most of Geolocation, Compass, and Accelerometer

  • Includes an array of exercises throughout the book where you can apply what you just learned

Wrox Beginning guides are crafted to make learning programming languages and technologies easier than you think, providing a structured, tutorial format that will guide you through all the techniques involved.

wrox.com

Programmer Forums
Join our Programmer to Programmer forums to ask and answer programming questions about this book, join discussions on the hottest topics in the industry, and connect with fellow programmers from around the world.

Code Downloads
Take advantage of free code samples from this book, as well as code samples from hundreds of other books, all ready to use.

Read More
Find articles, ebooks, sample chapters and tables of contents for hundreds of books, and more reference resources on programming topics that matter to you.

Read More Show Less

Product Details

  • ISBN-13: 9781118239322
  • Publisher: Wiley
  • Publication date: 11/11/2011
  • Sold by: Barnes & Noble
  • Format: eBook
  • Edition number: 1
  • Pages: 312
  • File size: 7 MB

Meet the Author

Thomas Myer is a consultant, author, and speaker. He owns Triple Dog Dare Media and specializes in Linux- and Mac-based development, including iPhone apps, CMS, blogs, wikis, dashboard widgets, UNIX systems, and Applescripting. He is the author of several books, including Professional CodeIgniter, Apple Automator with AppleScript, and Mac OS X UNIX Toolbox, among others.
Read More Show Less

Read an Excerpt

Beginning PhoneGap


By Thomas Myer

John Wiley & Sons

Copyright © 2012 John Wiley & Sons, Ltd
All right reserved.

ISBN: 978-1-1181-5665-0


Chapter One

Introducing PhoneGap

WHAT YOU WILL LEARN IN THIS CHAPTER:

* Using PhoneGap to build an application * Exploring the history of PhoneGap * Exploring what you can build with PhoneGap * Understanding the basics of a PhoneGap application

Welcome to PhoneGap! You're reading this book because you've probably heard about PhoneGap, and want to learn more about how you can use it to build cross-platform mobile applications. This book delves into different parts of the PhoneGap API, and teaches you how to use the PhoneGap tools to build different applications.

Before getting into the nitty-gritty details, though, it's time to get a 10,000-foot overview of PhoneGap and what it can do. In this chapter, you learn about the basics of using PhoneGap, as well as a bit of the history of PhoneGap. By the end of this chapter, you will be familiar with the basics of building a PhoneGap application.

USING PHONEGAP

As you can see in Figure 1-1, according to PhoneGap's website (www.phonegap.com), PhoneGap is an "HTML5 app platform that allows you to author native applications with web technologies."

As a developer, you'll be using PhoneGap to develop working code for iPhones, Androids, BlackBerries, and webOS devices. In each case, you'll be using a PhoneGap wrapper that contains your web-based HTML, cascading style sheet (CSS), and JavaScript code. What this means for you is that you will be using web technologies you already understand, but still get access to many of the device's native features (such as the compass, the camera, the contacts list, and so on). It also means that you should be able to port your web code to multiple different devices with little or no changes.

Looking at a Quick Showcase

You might be thinking to yourself that PhoneGap sounds promising, but you're not quite sure what it can actually do. Without getting into a lot of technical detail quite yet, the best way to illustrate its capabilities is to offer a brief showcase of successful projects.

"Diary Mobile"

As shown in Figure 1-2, "Diary Mobile" is a mobile app that helps you to better organize your life. It features a Journal, a Task Manager, and a Planner. You can keep notes on your Android or iPhone, and then synchronize your information back to a centralized web repository. The app works offline, and automatically saves items online once you're back online.

"NFB Films"

As shown in Figure 1-3, "NFB Films" is an Android-only PhoneGap app that lets you watch more than 2,000 films for free. Users can search for content, browse films by channel or subject, and share their favorite documentaries, animated shorts, and trailers with other users.

"Just One More"

As shown in Figure 1-4, "Just One More" is an iPad/iPhone PhoneGap app that helps you find inspiring video content. It offers a simple, addictive interface for browsing and searching the Vimeo website (www.vimeo.com) — it's a rich, immersive app, totally built with HTML, CSS, and JavaScript.

"Orbium"

As shown in Figure 1-5, "Orbium" is a fast-paced puzzle game available on iPhone, Android, and webOS. It features high-quality graphics and an intuitive touch-screen interface.

Taking a Basic Run-Through

PhoneGap doesn't limit you to just creating HTML-based utilities. Just about anything you can dream up with modern HTML5, CSS3, and JavaScript, you can create with PhoneGap.

So, what's involved, generally speaking, when you create a PhoneGap application? This entire book is devoted to drilling down into this topic with great detail, but first, it might be helpful to understand the overall process involved in working with PhoneGap.

Here is a typical workflow for building your first PhoneGap application:

1. Download the PhoneGap tools from www.PhoneGap.com. You'll need the specific set of tools for the platform you're working with (for example, Xcode for iPhone applications, and so on). 2. Follow the installation instructions to add the PhoneGap tools to your existing environment. 3. Once you have the tools installed, you typically need to start a new project using the extensions you just installed. For example, as shown in Figure 1-6, if you are using Xcode, you'll have the option to start a PhoneGap project. 4. Once you've started a new project, you'll be working within the www folder, which, as shown in Figure 1-7, contains all your HTML, CSS, and JavaScript files. 5. Build your code and use the Emulator or an actual device to test what you're doing. Some of the supported functionality (such as vibrate notifications) probably won't work with the on-screen Emulator (shown in Figure 1-8), but your mileage will vary. 6. When you're ready to release your application to a marketplace, follow the specific instructions for the app store you're working with (Android market, Apple App Store, and so on) to release your software. 7. If you must support a different device, you can install the tools for that secondary device, port your web code over, and follow a testing a release path, mostly with minimal changes to your web code.

Obviously, there's a lot more to it than that, especially in what you can and can't do on specific devices. Before getting into all of that, however, let's take a quick look at the history of PhoneGap.

HISTORY OF PHONEGAP

PhoneGap solves two problems for developers:

* Can the developer (you!) use more familiar web languages like HTML and JavaScript to create a working mobile application? * Can that code then be ported to another platform quickly and easily, thereby reducing the complexity of supporting multiple platforms?

Getting to Know the Origins of PhoneGap

The first PhoneGap code was authored at the San Francisco iPhoneDevCamp in August 2008. A contributing driver for its creation was a simple fact that almost every single newbie iPhone developer runs into: Objective-C can be a very unfamiliar environment for web developers, and there are lots more web developers out there than there are Objective-C ones.

The question was, could someone develop a framework that allowed web developers to leverage all their knowledge of HTML, CSS, and JavaScript that could also interact with the important native parts of an iPhone, such as the camera and compass?

Within a year, PhoneGap was winning awards and was starting to support the Android platform, making it even more useful to the growing family of mobile developers who need to support code on more than one platform.

Assessing PhoneGap's Current Status

Currently, PhoneGap is at Version 1.x (1.0.0.rc2 was released July, 2011). PhoneGap offers support for the following features across many of the major smartphone devices:

* Accelerometer

* Camera

* Compass

* Contacts

* Files

* Geolocation

* Media

* Network

* Notifications (alerts, sounds, and vibrations)

* Storage

If you're developing for iPhone or Android devices, chances are that all of that functionality is supported. If you're developing for Blackberry, webOS, Windows Phone 7, Symbian, or Bada devices, there may be a few things missing. (For example, there is no support for the camera, compass, or storage features on Windows Phone 7. The older Blackberry models support geolocation, notifications, and network reachability, but that's about it.)

A road map of future releases includes updates to the Contact API, bringing it up-to-date with the latest World Wide Web Consortium (W3C) specifications. Furthermore, plans are in the works for the following features (with this just being a taste, not the complete road map):

* Crypto

* Websockets

* Web notifications

* HTML media capture

* Calendar API

* Internationalization support

* Command-line builds

* Plug-in architecture (will help third-party developers extend PhoneGap)

* Network loss/regain events

Understanding What PhoneGap Is Good/Bad At

What is PhoneGap good at? Primarily, it helps you and your development team leverage years of experience at building interactive projects with web standards. If you're good with HTML, CSS, and JavaScript, you'll experience few problems while working with PhoneGap — all you need is a good introduction to the specifics of the API components, which this book will give you.

Another thing PhoneGap is good at is bridging the gap (hence the name) between your standard web technologies, and the unique capabilities inherent in your smartphone. By using the PhoneGap API components, you can quickly and easily access the onboard camera, pull up the contacts, or work with the compass.

If you need to connect your application with a remote web service (typically, a web service or a RESTful API), you can easily bring in tools like jQuery to create powerful Ajax handlers. Of course, you're also free to hand-roll your own XmlHttpRequests.

Given all this, a word of caution is in order. Just because you code an application using PhoneGap and it works on one device (iPhone, for example) doesn't automatically mean that it will work on others. You may have to test and tweak for Android, Blackberry, or Windows Phone 7 devices. So, don't imagine for a second that this is a "code once, deploy multiple times" scenario.

If you are working with multiple devices, you will need separate environments for each wrapper. For example, you won't be able to maintain your Android PhoneGap wrapper with Xcode. Another way of framing this is that you are potentially simplifying how much your web code must change to run on different devices, but you still must maintain separate wrappers.

If you create a PhoneGap application that relies heavily on animation and graphics, you might tax the device you are on — this is true whether you are working with PhoneGap or native code. Also, the same is true if you are creating huge dependencies with a remote API — your application should work well in offline mode, because you will never know if the person using the app has lost connectivity.

UNDERSTANDING THE BASICS OF A PHONEGAP APPLICATION

Now it's time to dig a little deeper into PhoneGap. Before jumping into an overview of the API specifics, it might be useful to go over some examples of what you can do with the major components — just to get your creative juices flowing for possible application ideas.

What You Can Build with PhoneGap

Earlier, you saw a quick showcase of different PhoneGap applications. Let's take a brief look at the possibilities with some of the major components of the API.

Working with Contacts

The contacts list is a fairly ubiquitous feature, available on most smartphones. With PhoneGap, you can easily do the following with the contacts feature:

* Create a contact using the create() method.

* Save a contact using the save() method.

* Find a contact using the find() method.

* Clone a contact using the clone() method.

* Remove a contact using the remove() method.

To create a contact, you pass a JavaScript Object Notation (JSON) object to contacts.create(), which creates a contact only within the application memory. To save the new contact to the Contacts database, you would use save().

The PhoneGap API supports various property fields for a contact (such as a display name, a nickname, phone numbers, e-mails, addresses, birthday, gender, photos, time zone, and so on), most of which you can run through contacts.find() to get a list of matching users.

The clone() method allows you to quickly copy a contact that's in memory, and then change just the properties that are different. For example, you might have a group of people who all share the same physical address. Cloning the original contact would allow you to work through the list of property changes very quickly.

The remove() method works as expected — use it to remove a contact from the device's contacts database.

From this basic list of methods and functions, you could easily incorporate various views that allow users to search through their contacts, create new contacts, make changes to existing contacts, or even delete contacts. For example, your application might help users make batch operations on all of their contacts based on search criteria (such as a ZIP code or existence of a phone number).

Working with the Camera

Most smartphones have built-in cameras. The PhoneGap API provides two ways to capture images, and one is giving access to the camera via the camera object. The second is by using the Media Capture API (which you will learn a little about later in this chapter) Specifically, the camera.getPicture() method takes a photo using the camera, or retrieves a photo from the device's photo album, depending on what source type you have passed in (either CAMERA or PHOTOLIBRARY).

You can also choose to have the camera provide you with a Base64-encoded photo image (this is the default setting), or the image file location. Once you have this information, you can use it to render an image, post the data to a remote server, or save the data locally.

An interesting option is to capture an editable photo. This introduces all kinds of possibilities with respect to being able to crop an image (for example) after the photo has been captured by the device.

What are some of the applications you can build using the Camera API? A good one might be a photo-sharing application that allows you to take a picture, perform some basic edits, and then publish that photo to a remote web server.

Other application possibilities include a note-taking tool that lets a user take a photo of something, and then add notes to that image. Or, you could even have an application that lets shoppers take a picture of items they find in stores, and add them to a wish list they can then share with friends.

Working with Geolocation

Another hallmark of modern smartphones is their geolocation capabilities. Most smartphones will be able to use GPS or some other technology to tell you what latitude and longitude you're currently at with some degree of precision. Of course, if the device is using cell phone towers to triangulate your position, your location won't be accurate at all. And, if you have no network connectivity, you're completely out of luck.

The PhoneGap Geolocation API lets you get a device's current position (in longitude and latitude, but other details like altitude might also be included) and to watch a position in case it changes. This would be very useful if you were trying to track the device's movement.

You have many different ways to approach geolocation in your applications. You can use geolocation data to enrich other data — for example, you could add a latitude and longitude to any pictures taken by your application. Or, you could add geolocation data to any notes created by the user. Or, you could send geolocation data to a remote web server so that dispatchers can keep tabs on field workers.

Working with Media Files

In PhoneGap, the Media Capture API isn't simply a good means for capturing photos. You can also use it to capture audio and video data as well. As expected, the Media Capture API allows you to start and stop recording, play, pause, and stop media files, and even display an audio file's duration.

From an application point of view, you can use the Media Capture API to create different voice- and video-recording apps — think of how useful it would be to have a tool that lets you record audio and video, and add written notes or photos in one package (for those of who use Evernote, you'll recognize that this describes it perfectly). You could also build an app that lets you sample different audio files. This could be fairly useful if you're building a mobile application that showcases a catalog of music or spoken-word recordings — PhoneGap will play locally saved files, as well as those on a remote web server.

(Continues...)



Excerpted from Beginning PhoneGap by Thomas Myer Copyright © 2012 by John Wiley & Sons, Ltd. Excerpted by permission of John Wiley & Sons. 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

INTRODUCTION xix

CHAPTER 1: INTRODUCING PHONEGAP 1

CHAPTER 2: INSTALLING AND CONFIGURING PHONEGAP 17

CHAPTER 3: BASIC WALKTHROUGH 31

CHAPTER 4: EVENTS 45

CHAPTER 5: WORKING WITH THE DEVICE, THE NETWORK, AND NOTIFICATIONS 59

CHAPTER 6: ACCELEROMETER 73

CHAPTER 7: COMPASS 85

CHAPTER 8: GEOLOCATION 99

CHAPTER 9: MEDIA 113

CHAPTER 10: CAMERA 129

CHAPTER 11: STORAGE 143

CHAPTER 12: FILES 157

CHAPTER 13: CONTACTS 179

CHAPTER 14: CAPTURE 189

CHAPTER 15: CREATING A NOTE-TAKING APPLICATION 197

APPENDIX A: ANSWERS TO EXERCISES 213

APPENDIX B: TOOLS FOR PHONEGAP 235

APPENDIX C: PHONEGAP.JS 247

APPENDIX D: PHONEGAP PLUG-INS 333

INDEX 349

Read More Show Less

Customer Reviews

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

5 Star

(0)

4 Star

(0)

3 Star

(0)

2 Star

(0)

1 Star

(0)

Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com 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 & Noble.com 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 & Noble.com 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 BN.com 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

Reminder:

  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com 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 BN.com. 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)