The Development of Mobile Applications using HTML5 and PhoneGap* on Intel® Architecture-Based Platforms

Table of Contents

Introduction
Cross platform application development with HTML5
PhoneGap
Sample application using PhoneGap
PhoneGap Build Service
Intel’s Contribution to Cordova
Additional Resources

Introduction

Gone are the days when computing is only done on PCs and mainframes. Just a few years ago, operating systems were limited to Windows*, Unix*, and Mac*, and applications were targeted to specific development environments for a single target platform. Today, digital mobile platforms range from desktops, laptops, netbooks, tablets, handhelds, and smartphones. The computing paradigm is seeing a radical shift with the wide gamut of new gadgets in the market. The focus is now on mobile application development. Application developers today aim to maximize target reach and reduce development and maintenance costs while providing similar user experiences across platforms. Different flavors of OS that run on these platforms, multiple IDEs and SDKs, and development of apps on platforms that are ultimately different from the target platform all pose significant challenges to application developers.

In this article, you will see how HTML5 and PhoneGap* can help with cross-platform development. You will see sample applications showing how to develop mobile applications that provide a rich UI while tapping into the hardware capabilities of the platform. Sound interesting? Let’s dive in!

Cross-platform application development with HTML5

The emerging model

Why should developers target the growing mobile market? Market research shows that Internet-enabled consumer devices will far exceed the shipment of PCs in the years to come (Figure 1). With an estimated 85 percent of handsets having HTML5 compatible browsers by 2016 (Figure 2), data suggests that two-thirds of the mobile application developers are moving towards using HTML5 as the development platform of choice (Figure 3).


Figure 1: Internet enabled devices Vs. PCs


Figure 2: HTML5 compatible browsers in handsets


Figure 3: Developers interest in HTML5


Figure 4: HTML5 is the common element for a variety of devices, OSs, and browsers

As we can see from the Venn diagram in Figure 4, HTML5 provides the convergence that is needed to develop cross-device, cross-OS, cross-browser applications. Developers can code an app once and deploy it on multiple platforms, thereby significantly reducing development efforts and expanding market reach.

However, HTML5 has some limitations. Most prominent, is the lack of API to access device hardware and sensors such as accelerometer, compass, GPS, etc. While native applications can access device hardware, they lack the portability that web apps provide. Thus, a solution is to code a hybrid application, which cumulatively uses the benefits of native and web apps.

Another limitation of HTML5 is browser support. Different browsers provide varying levels of support for HTML5 features. Thus an application built using HTML5 is not guaranteed to run exactly the same way across browsers available on today’s mobile devices.

PhoneGap

PhoneGap is an open source framework for developing cross-platform hybrid applications using HTML, CSS, and Javascript while using the abstraction APIs to leverage the device hardware. Applications developed using PhoneGap can thus be deployed to multiple platforms with little or no change to the code base.

Figure 5 shows the device APIs available across seven popular mobile operating systems. PhoneGap provides a very exhaustive set of APIs to support all 10 device features for Android*.


Figure 5. Supported device features on popular OSs. [Source: http://phonegap.com/about/feature]

[PhoneGap was originally developed by Nitobi, which was purchased by Adobe. The PhoneGap project is now called Cardova* and the PhoneGap brand name is still owned by Adobe.]

Building a sample PhoneGap application

In this section, you will see how to develop a simple HTML5 application and integrate it with the PhoneGap API to access the accelerometer on the device platform.

Using the HTML5 element, we will first create a container for drawing graphics via scripting. A drawing canvas does not have any drawing abilities built into it. To draw in the container, we will access the getContext(“2d”) object built into the canvas element. This provides various methods to draw paths, boxes, circles, characters, images, and more.

The code snippet below shows how you can create a canvas and a drawing context. It then shows you how to draw a circle using the “arc” method of the context.

We will now see how to integrate the PhoneGap API into the HTML5 application to overcome the device access limitation. This section assumes that you have installed the prerequisites to build a PhoneGap application. Detailed instructions on setting up the development environment is provided at: http://wiki.phonegap.com/w/page/16494774/Getting%20started%20with%20Android%20PhoneGap%20in%20Eclipse Once you have set up the development environment, the first step is to include the phonegap.js Javascript library for the Android platform. Once the library is loaded and ready, you can use the accelerometer API to detect orientation changes. The code snippet below provides an example implementation:

The application now checks every 100 msec for an orientation change. If a change in orientation is detected, the updateDraw function redraws the canvas to reflect the change.

When this application is built and executed, we can see the orientation change from portrait to landscape as shown in Figure 6:


Figure 6. 

PhoneGap Build Service

PhoneGap Build Service is a cloud-based build facility to compile applications for the many mobile platforms available in the market today. It takes the pain out of setting up development and emulation environments for the various platforms that developers wish to market their app on.

In most cases, developers do not have access to all the target platforms that they wish to deploy their application to. Installing multiple SDKs and emulators is a cumbersome and painful process. PhoneGap build makes the compilation task a one-step process. Figure 7 shows a graphic for how it works:


Figure 7. [Source: https://build.phonegap.com/]

As an application developer, you will create the application logic through HTML, CSS, and Javascript. Then create a single zip file with all of your application content.

To use the PhoneGap Build Service, you will need to create an account. PhoneGap is a paid service owned by Adobe. So check out the payment options at https://build.phonegap.com/ and choose one that works best for you.

When you are logged in, you can create a new application. You can then choose the application name and upload the application archive.

The PhoneGap Build Service now creates an app-store ready app for Apple iOS*, Google Android, Palm*, Symbian*, BlackBerry*, and more. Note that in some platforms, you will need to perform some extra steps, such as providing a signing key, before you can deploy it on that platform.

Intel’s contribution to Cordova

As discussed earlier in this paper, PhoneGap provides device-specific APIs on seven operating systems. There is no support available for the Tizen* platform, which is an open source operating system. Intel is working closely with Adobe to provide device APIs for the Tizen platform. Intel is also working with Adobe to provide Tizen support in the PhoneGap build, so that cross-platform application developers can leverage upcoming Tizen platforms for deploying their hybrid web apps.

Additional Resources

1: Getting Started with Android PhoneGap in Eclipse:

(a) http://wiki.phonegap.com/w/page/16494774/Getting%20started%20with%20Android%20PhoneGap%20in%20Eclipse
(b) http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart
(c) http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android.html

2: PhoneGap API reference:

(a) http://docs.phonegap.com/en/1.7.0/index.html

3: PhoneGap Build:

(a) https://build.phonegap.com

4: Getting started with Android::

(a) http://docs.phonegap.com/en/1.7.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

About the Authors

Prital Shah is a Software Engineer with Intel Corporation

Jacques Bourhis is a Engineer Manager with Intel Corporation

Kaining Yuan is a Software Engineer with Intel Corporation

Rao Meghana S is a Technical Marketing Engineer at Intel Corporation

Notices

INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL PRODUCTS. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL OR OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. EXCEPT AS PROVIDED IN INTEL'S TERMS AND CONDITIONS OF SALE FOR SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY, RELATING TO SALE AND/OR USE OF INTEL PRODUCTS INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER INTELLECTUAL PROPERTY RIGHT.

UNLESS OTHERWISE AGREED IN WRITING BY INTEL, THE INTEL PRODUCTS ARE NOT DESIGNED NOR INTENDED FOR ANY APPLICATION IN WHICH THE FAILURE OF THE INTEL PRODUCT COULD CREATE A SITUATION WHERE PERSONAL INJURY OR DEATH MAY OCCUR.

Intel may make changes to specifications and product descriptions at any time, without notice. Designers must not rely on the absence or characteristics of any features or instructions marked "reserved" or "undefined." Intel reserves these for future definition and shall have no responsibility whatsoever for conflicts or incompatibilities arising from future changes to them. The information here is subject to change without notice. Do not finalize a design with this information.

The products described in this document may contain design defects or errors known as errata which may cause the product to deviate from published specifications. Current characterized errata are available on request.

Contact your local Intel sales office or your distributor to obtain the latest specifications and before placing your product order.

Copies of documents which have an order number and are referenced in this document, or other Intel literature, may be obtained by calling 1-800-548-4725, or go to: http://www.intel.com/design/literature.htm

Software and workloads used in performance tests may have been optimized for performance only on Intel microprocessors. Performance tests, such as SYSmark and MobileMark, are measured using specific computer systems, components, software, operations, and functions. Any change to any of those factors may cause the results to vary. You should consult other information and performance tests to assist you in fully evaluating your contemplated purchases, including the performance of that product when combined with other products.

Any software source code reprinted in this document is furnished under a software license and may only be used or copied in accordance with the terms of that license.

Intel and the Intel logo are trademarks of Intel Corporation in the US and/or other countries.

Copyright © 2012 Intel Corporation. All rights reserved.

*Other names and brands may be claimed as the property of others.

Categories:
For more complete information about compiler optimizations, see our Optimization Notice.

Comments

's picture

Nice post. I learn something more challenging on different blogs everyday. It will always be stimulating to read content from other writers and practice a little something from their store. I’d prefer to use some with the content on my blog whether you don’t mind. Natually I’ll give you a link on your web blog. Thanks for sharing.