Chapter 3. Apache Cordova Development Tools_Mobile Application Development：JavaScript Frameworks-QQ阅读男生中文都市网

上QQ阅读APP看书，第一时间看更新

Chapter 3. Apache Cordova Development Tools

In the previous chapter, you developed, built, and deployed your first Apache Cordova application from scratch. In this chapter, you will learn:

How to configure the Apache Cordova development tools for the most popular mobile platforms (Android, iOS, and Windows Phone 8) on your development machine(s)
How to build the Sound Recorder application (which we developed in Chapter 2, Developing Your First Cordova Application) on these platforms
How to deploy the Sound Recorder application on real Android, iOS, and Windows Phone 8 devices
How to handle the common issues that you will face when supporting our Sound Recorder application (which we supported on Android in Chapter 2, Developing Your First Cordova Application) on the other mobile platforms (iOS and Windows Phone 8)

Configuring Android development environment

In order to install Android development environment, we first need to install Java Development Kit (JDK). JDK 6 or 7 can work perfectly with Android development tools. In order to get JDK, use the following URLs:

Once the download page appears, accept the license and then download the JDK installer that matches your operating system, as shown in the following screenshot. After downloading the JDK installer, follow the steps of the JDK installer in order to properly install JDK.

Downloading JDK 1.7

If you want to have an Android development environment installed quickly on your machine, you can download Android Developer Tools (ADT) Bundle. The ADT Bundle includes the essential Android SDK components and a version of the Eclipse IDE with a built-in ADT to start developing your Android applications. You can download it from http://developer.android.com/sdk/index.html.

You can start downloading the ADT Bundle by clicking on the Download the SDK button, as shown in the following screenshot:

Downloading the ADT Bundle

Extending your existing Eclipse IDE

If you have an existing Eclipse IDE and you would prefer to use it as your Android development IDE, then you will need to configure things by yourself, start the configuration process by downloading the Android SDK tools from http://developer.android.com/sdk/index.html#download.

After downloading the Android SDK tools, and in order to start developing Android applications, you need to download at least one Android platform and the latest SDK platform tools using SDK Manager, as follows:

Open SDK Manager. If you use Linux or Mac, you can open a terminal and navigate to the tools directory under the Android SDK root directory and execute the following command:
```
> android sdk
```
If you use Windows, then open the SDK Manager.exe file under the Android SDK root directory.
After opening SDK Manager, follow these steps:
1. Select the latest tools packages (Android SDK Tools, Android SDK Platform-tools, and Android SDK Build-tools).
2. Select the latest version of Android (as shown in the following screenshot, it is Version 4.4.2 at the time of writing this module).
3. Select Android Support Library that is located under the Extras folder.
4. Finally, click on the Install button, and after the process is complete, you will find the packages installed on your machine.
Android SDK Manager

Now, your Android environment is ready to develop your Android applications. However, in order to develop Android applications from your existing Eclipse IDE, Android provides an Eclipse plugin called ADT. This plugin provides a neat and integrated environment that you can use to develop your Android applications. ADT allows you to create new Android projects easily, build your Android application user interface, test and debug your Android applications, and export your application for distribution.

In order to install ADT in your Eclipse IDE, follow these steps:

Open Eclipse.
Choose Install New Software from the Help menu.
Click on the Add button.
In the Add Repository dialog, enter ADT for the name and the URL https://dl-ssl.google.com/android/eclipse/ for the location.
Click on OK.
In the Available Software dialog, select Developer Tools and click on Next, as shown in the following screenshot:

Installing the ADT plugin for Eclipse
The tools list to be downloaded will be shown to you. Then, click on Next.
Accept the license agreements, and finally, click on Finish.
Tip
Sometimes, you will see a security warning telling you that you are installing software that contains unsigned content. Just ignore this message and click on OK, and then restart your Eclipse when the installation completes.

After restarting Eclipse, you need to specify the Android SDK path for Eclipse. You can do this by:

Selecting the Preferences option from Window menu (in Windows or Linux), or by selecting Preferences from Eclipse menu in Mac
Selecting the Android preference and specifying the SDK location, as shown in the following screenshot:

Configuring the Android SDK location in Eclipse

Creating an Android Virtual Device

In order to test your Android application in an emulator, you need to create an Android Virtual Device (AVD). An AVD represents the Android emulator device configuration that allows you to model the different configurations of Android-powered devices. In order to create an AVD easily, you can use the graphical AVD Manager. To start AVD Manager from the command line, you can run the following command from the tools directory under the root of the Android SDK directory:

> android avd

After executing this command, the Android Virtual Device Manager window will appear, as shown in the following screenshot:

Android Virtual Device Manager

Note that while using Eclipse, you can also start AVD Manager by selecting Android Virtual Device Manager from the Window menu.

As shown in the preceding screenshot, using the AVD Manager, you can:

Create a new AVD
Delete an AVD
Repair an AVD
Check the details of an AVD
Start running an AVD

In order to create a new AVD to test your Android applications, follow these steps:

Click on New.
Enter the details of your AVD, as shown in the following screenshot:

Creating a new Android Virtual Device (AVD)
As shown in the preceding screenshot, the following information is provided:
- AVD Name
- Device
- Target
- CPU/ABI (where ABI stands for Application Binary Interface)
- Skin
- Front Camera
- Back Camera
- Memory Options
- Internal Storage
- SD Card
Then, click on OK.

After this, you can start launching your AVD by clicking on the Start button; wait until your Android emulator is up and running, as shown in the following screenshot:

Android emulator start up screen

A best practice is to download the system images for all versions of Android that your application needs to support and test your application on them using the Android emulator. Another thing you need to consider is to select an AVD platform target that is greater than or equal to the API level used to compile your Android application.

Importing the Sound Recorder application in to Eclipse

Now, we have everything in place. We can now import our Sound Recorder Android application in our Eclipse IDE and start running it from the IDE. In order to import our project into Eclipse, follow these steps:

Before starting to import the project into your Eclipse IDE, and in order to avoid getting errors after importing the project into your IDE, make sure that our Sound Recorder project directories and subdirectories have Read and Write access for your user (that is, not read-only access).
Select the Import option from the File menu.
Select Existing Android Code into workspace from the Android menu.
In Import Projects, browse to the ${path_to_soundRecorder}/platforms/android directory in Root Directory, as shown in the following screenshot:

Importing the Sound Recorder project into Eclipse
Click on Finish.

By default, your HTML, CSS, and JavaScript Android resources under ${project_root}/assets are not shown in Eclipse; this shows your Android web resources.

Right-click on the project and then select Properties.
Select Resource Filters from the Resources dropdown.
Delete all the Exclude all rules, as shown in the following screenshot:

Viewing the Android project assets/www files

Now, you can view all the project assets/www files from the Eclipse workspace.

Tip

Do not forget that it is not recommended to edit the files under the platforms directory of your project as the cordova build command can overwrite your changes with the original resources in the root www directory. You can edit files under the platforms directory only if you want to use Apache Cordova to generate the initial artifacts of your project.

Before running our Sound Recorder Android project, make sure that the project is built by selecting Build All from Project menu (or select your project and choose Build project from the Project menu, or just select the Build Automatically option from the Project menu).

Now, you can run our Sound Recorder Android project from Eclipse by selecting the project and then selecting Android Application from the Run as menu, as shown in the following screenshot:

Running the Sound Recorder project in your Android emulator using Eclipse

You will have the option to select the emulator you want to run your project on, as shown in the following screenshot:

Selecting the Android emulator to run the project on

After selecting the Android emulator and clicking on the OK button, your selected Android emulator will be launched and your application will be installed on it for you to start testing.

Running the Sound Recorder application on a real Android device

In order to test your Android application on your Android mobile or tablet using the Eclipse IDE, just make sure that you enable USB debugging on your Android device. You can enable the USB debugging option on your device by clicking on Developer Options from the device Settings and then checking the USB debugging option, as shown in the following screenshot:

Enabling USB debugging on your Android device

Plug in your Android device to your development machine and then select Android Application again from the Run as menu. At this time, you will find your device available under the running Android device option in the Android Device Chooser dialog; select it, and you will find our Sound Recorder application deployed and launched in your device to start testing.

Configuring iOS development environment

Creating iOS development environment is a straightforward process if you meet the requirements. In order to have an iOS development environment, you need to:

Have a Mac machine that runs OS X Mountain Lion (10.8) or higher versions
Install Xcode on your Mac machine
Install the iOS SDK on your Mac machine

Xcode is the official Apple IDE that allows you to develop applications for Mac, iPhone, and iPad. Xcode has a lot of great features, some of which are:

Source code editor
Assistant editor
User-interface builder
iOS simulator
Static code analyzer
A powerful built-in open source low-level virtual machine (LLVM) compiler for C, C++, and Objective-C
The Live Issues feature, which highlights the common coding mistakes while coding your application, without the need to build your project
Complete support for SCM systems (subversion and Git source control)

You can download the latest version of Xcode from the Apple App Store on your Mac machine. You will find the iOS SDK included with Xcode, so there is no need to download anything other than Xcode.

In order to download the latest version of Xcode, follow these steps:

Open the App Store application on your Mac machine.
In the search field of App Store, type in Xcode and press enter.
Download Xcode, and after completing the download, you will find it under your applications directory. The following screenshot shows the Xcode icon:

The Xcode icon

If you have an earlier version of OS X (less than 10.8), you need to upgrade it. In order to download Xcode, you need OS X Version 10.8 (or higher).

Importing the Sound Recorder application into Xcode

Now, it is time to make our Sound Recorder application support iPad and iPhone devices. The following command adds iOS platform support for our Sound Recorder application:

> cordova platform add ios

Then, build our application in the iOS platform using the following Cordova build command:

> cordova build ios

Open your Xcode environment, click on Open other, and then select the SoundRecorder.xcodeproj file under the platforms/ios directory to open our Sound Recorder iOS project.

You will find our Sound Recorder application open in Xcode. In order to run our project on an iPhone (or iPad) emulator, click on the Build and run button after selecting the iPhone emulator, as shown in the following screenshot:

Running the Sound Recorder application in Xcode

After clicking on the Build and run button, the iPhone emulator will be launched with our Sound Recorder application and you can start using it.

An important point that you have to be aware of is that if you are deploying your application on iOS 7, and because of a bug in Apache Cordova 3.4, you will find an overlay between your application and the device status bar, as shown in the following screenshot:

Apache Cordova 3.4 bug with iOS 7

In order to fix this issue (which I hope to be fixed soon in the next releases of Apache Cordova 3.x), one of the possible workarounds is to hide the status bar by adding and setting two properties in our SoundRecorder-info.plist file, which is located under the Resources directory of our application, as shown in the following screenshot:

Adding properties to the SoundRecorder-info.plist file

The two properties and values are:

The Status bar is initially hidden property set to the YES value
The View controller-based status bar appearance property set to the NO value
Tip
In order to add a property to the *-info.plist file, you can select the information list property in Xcode and then click on Add Row.

After setting these two properties, click on the Build and run button again to see the fixed screen in iOS 7, as shown in the following screenshot:

The Sound Recorder application fixed in iOS 7

Running the Sound Recorder application on a real iOS device

In order to deploy our Sound Recorder application on a real iOS device (iPhone or iPad), you will need to follow these 20 steps carefully:

Sign up for the iOS developer program at https://developer.apple.com/programs/ios/. There are two available enrollment types:
- Individual: Select this enrollment type if you are an individual
- Company/Organization: Select this enrollment type if you represent a company
  Tip
  Sign up to the Individual program if you just want to develop applications in App Store. Note that at the time of writing this module, this will cost you 99 USD per year.
Generate a Certificate Signing Request (CSR) using the Keychain Access application, which you can get from the /Applications/Utilities directory. In order to generate the certificate signing request, follow these steps:
1. Navigate to Keychain Access | Certificate Assistant | Request a Certificate From a Certificate Authority, as shown in the following screenshot:
  
  Creating a CSR using Keychain Access
2. In the Certificate Assistant window, enter your e-mail address, click on the Saved to disk radio button, and check the Let me specify key pair information checkbox. Then, click on Continue.
3. In the Key Pair Information window, choose 2048 bits as the key size and RSA as the algorithm. Then, click on Continue.
4. Use the default filename to save the certificate request to your disk, and click on Save.
  Tip
  By default, the generated certificate request file has the filename with the following extension CertificateSigningRequest.certSigningRequest.
Now, we need to use the iOS member center (https://developer.apple.com/membercenter/) in order to create the application ID, register your iOS device, generate a development certificate, and create a provision profile.
Click on the Certificates, Identifiers & Profiles link, as shown in the following screenshot. You will be introduced to the overview page, where you can click on the Identifiers link.

Managing certificates, identifiers, and profiles from the member center
Select App IDs from Identifiers. Register your application ID by entering an application name and the application bundle identifier (you can get the bundle identifier from the SoundRecorder-info.plist file), as shown in the following screenshot. Then, click on Continue.

Registering your application ID
You will be introduced to the confirmation page. Click on Submit to confirm your application ID.
Select All from Devices. Register your iOS device by entering the device name and the device's Unique Identifier (UDID), as shown in the following screenshot. Then, click on Continue.

Registering your iOS device
Tip
In order to get your iOS device's UDID, you can get it after connecting your iOS device to iTunes. Select your device from the left-hand side menu of iTunes and then click on Serial Number; you will find it changed to Identifier (UDID) with the device UDID.
You will be introduced to the review page. Click on Register to register your device.
Select Development in Certificates to create your development certificate file. Read the introduction page and click on Continue.
In the second step of the development certificate creation process, choose the CSR file that we created in step 2 and click on the Generate button, as shown in the following screenshot:

Generating your development certificate
In the last step of the development certificate creation process, click on the Download button to download the development certificate to your machine.
Select All from the Provision Profiles to create a provision profile, which will be installed on your iOS device. Choose the iOS App Development option from Development, as shown in the following screenshot, and then click on Continue:

Selecting the iOS App Development provisioning profile
In the second step of the development provisioning profile creation process, select App ID, which we created in step 5, and then click on the Continue button.
In step 3 of the development provisioning profile creation process, select the Development certificate checkbox that we created in step 10, as shown in the following screenshot, and then click on the Continue button:

Selecting the certificate to include in the provisioning profile
In step 4 of the development provisioning profile creation process, select your iOS device checkbox, which you registered in step 8, and then click on the Continue button.
In step 5 of the development provisioning profile creation process, enter your preferred profile name (for example, SoundRecorderProfile) and then click on the Generate button.
In the last step of the development provisioning profile creation process, click on the Download button to download the provisioning profile to your machine.
Now that we have created and downloaded both the development certificate and the provisioning profile, we need to install them. Double-click on the .cer file that you downloaded in step 11 to install it onto a keychain on your Mac machine. If you are prompted with the Add Certificates dialog, click on OK.
In order to install the downloaded provisioning profile to your iOS device, connect your iOS device to your Mac, open the organizer application from your Xcode by selecting Organizer from Window menu, and then click on the Add button and select the .mobileprovision file. You should find that this profile is a valid one, as shown in the following screenshot:

Adding a mobile provisioning profile to an iOS device
Finally, you can deploy your application on your iOS device by selecting your iOS device from the active scheme dropdown and clicking on the Build and run button, as shown in the following screenshot. After clicking on the button, you will find our Sound Recorder application finally launched on your iOS device.

Deploying our Sound Recorder application to a real iOS device

When running your iOS application on a real device for the first time, you will receive the prompt message codesign wants to sign using key "-----" in your keychain. If you see this message, click on the Always allow button.

Configuring the Windows Phone development environment

In order to configure your Windows Phone 8 development environment, you will need the following:

Windows 8 operating system or any higher compatible Windows versions.
Windows Phone SDK 8.0, which includes a standalone Visual Studio Express 2012 for Windows Phone, Windows Phone emulators, and other useful tools to profile Windows Phone applications. The Windows Phone SDK can also work as an add-in to the Visual Studio 2012 Professional, Premium, or Ultimate editions.

In order to download Windows Phone SDK 8.0, go to http://www.microsoft.com/en-us/download/details.aspx?id=35471.

Tip

Visual Studio for Windows Phone is the official Microsoft IDE for Windows Phone development. It is a complete development environment to create Windows Phone applications and has many features, some of which are as follows:

Source code editor
User-interface builder
Templates for Windows Phone projects
Testing and debugging features on Windows Phone emulators or real Windows Phone devices
Simulation, monitoring, and profiling capabilities for Windows Phone applications

After getting the Windows Phone 8.0 SDK, installing it onto your Windows machine is a very straightforward process. Launch the SDK installer and follow these steps:

Provide the path in which the SDK will be installed.
Check the I agree to license terms and conditions option.
Click on the Install button, and you will see the status of the SDK installation on your Windows machine, as shown in the following screenshot. After installation completes, you might be asked to reboot your operating system.

Installing Windows Phone SDK 8.0

Importing the Sound Recorder application into Visual Studio

Now, it is time to make our Sound Recorder application compatible on Windows Phone 8. The following command adds Windows Phone 8 platform support to our Sound Recorder application:

> cordova platform add wp8

Open your Visual Studio IDE and then follow these steps:

Select Open File from the File menu and then select the SoundRecorder.sln file under the platforms/wp8 directory to open our Sound Recorder Windows Phone 8 project.
Select Build Solution from the Build menu.
In order to run your project in the Windows Phone 8 emulator, click on the Run button by selecting a target emulator, as shown in the following screenshot:

Running a Windows Phone 8 project in the Visual Studio IDE

After clicking on the Run button, the Windows Phone 8 emulator will be launched with our Sound Recorder application and you can start working with it, as shown in the following screenshot:

First run of our Sound Recorder application in WP8

If you notice in the preceding screenshot, there are two problems that occur when we run the application in a WP8 emulator:

The header title is truncated
The jQuery Mobile application footer is not aligned with the bottom of the page

The first problem appears because jQuery Mobile set the CSS overflow property of its header and title to hidden. In order to fix this issue, we need to change this behavior by setting the overflow property to visible in the css/app.css file, as shown in the following code:

.ui-header .ui-title {
    overflow: visible !important; 
}

In order to fully align the application footer in both portrait and landscape modes of Windows Phone 8, you need to hide the system tray by setting shell:SystemTray.IsVisible="False" instead of shell:SystemTray.IsVisible="True" in MainPage.xaml (which is located under the platforms/wp8 directory), as shown in the following code snippet:

<phone:PhoneApplicationPage
    x:Class="com.jsmobile.soundrecorder.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    ...
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
 shell:SystemTray.IsVisible="False" ...>
    ...
</phone:PhoneApplicationPage>

After performing these two fixes, we can rerun our Sound Recorder application; we will find that the screen is now fine, as shown in the following screenshot:

Fixed Sound Recorder application in WP8

Running the Sound Recorder application on a real Windows Phone

Now, it is time to deploy our Sound Recorder application on a real Windows Phone 8 device. In order to do this, you have to unlock your Windows Phone for development using the Windows Phone Developer Registration tool. In order to use and run this tool, note the following prerequisites:

A registered Windows Phone developer account. You can create your registered Windows Phone developer account from https://dev.windowsphone.com/en-us/join. Note that creating a Windows Phone developer account is not free and the exact cost that you will pay depends on your country and region.
A Microsoft account associated with your Windows Phone developer account.
Connect your Windows Phone to your Windows machine and make sure that:
- The mobile screen is unlocked
- The date and time of your mobile are correct

Now, you can launch the Windows Phone Developer Registration tool by switching to Windows' All Apps view and select Windows Phone Developer Registration under Windows Phone SDK 8.0. When the tool starts, follow these steps in order to unlock your Windows Phone for development:

Make sure that the tool status displays the Identified Windows Phone 8 device message.
Click on the Register button to unlock your phone for development. If your phone is already registered, you will see an Unregister button, as shown in the following screenshot:

The Windows Phone Developer Registration tool
After clicking on the Register button, you will be introduced to the Sign In dialog box to enter your Microsoft account information (e-mail and password); you can then click on Sign In.
After clicking on Sign In, and assuming that you met all the prerequisites, your Windows Phone will be successfully unlocked for development, and you will be able to deploy your Windows Phone 8 application to it.

Now, in order to deploy our Sound Recorder application to your Windows Phone 8 device, select your Windows Phone8 device from the target device list and click on the Run button, as shown in the following screenshot:

Running the Sound Recorder application in WP8

After clicking on the Run button, you can enjoy testing our Sound Recorder application on your Windows Phone 8 device.

Summary

After reading and applying the steps mentioned in this chapter, you will have the three most popular mobile platform development environments (Android, iOS, and Windows Phone 8) installed on your machine(s). You can now build your Apache Cordova applications using these development tools and deploy your applications on their emulators. In this chapter, you learned how to deploy your Apache Cordova application on real devices of all these popular mobile platforms in detail. Finally, you learned the common problems and solutions that occur when you decide to support your Apache Cordova application on iOS and Windows Phone 8. In the next chapter, you will start learning how to use the different APIs provided by Apache Cordova in detail.