Table of Contents
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.
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/features]
[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.
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. put a caption here
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. put a caption here [Source: https://build.phonegap.com/]
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.
1: Getting Started with Android PhoneGap in Eclipse:
2: PhoneGap API reference:
3: PhoneGap Build:
4: Getting started with Android::
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
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.