- Shopping Bag ( 0 items )
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 ...
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.
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?
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 (developer.android.com). 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 http://eclipse.org/ 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 PhoneGap.com 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:
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.
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 www.youtube. 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 http://developer.apple.com/ios 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 https://developer.apple.com/devcenter/ios/index.action 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 http://developer.apple.com/ios/manage/devices/index. 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:
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:// developer.apple.com/ios/manage/bundles/index.action) 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:// developer.apple.com/ios/manage/provisioningprofiles/index. 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 developer.apple.com/ios. 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 PhoneGap.zip 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.