The Development of Mobile Applications

using HTML5 and PhoneGap on Intel®

Architecture Based Platforms

Presented by: Kaining Yuan, Software Engineer, Intel

Material provided by: Prital Shah and Jacques Bourhis, Intel

SFTS005
 Agenda
• Developer Challenges in Yesterday’s & Today’s world
• HTML5 is key for Cross Platform App development
• HTML5 Web Application Limitations
• What is PhoneGap\Cordova?
• PhoneGap API and Build Service
• Intel contributions to the Cordova
• Demos of HTML5 Web App + PhoneGap API
• Summary

The PDF for this Session presentation is available from our Technical
Session Catalog at the end of the day at: intel.com/go/idfsessionsBJ
URL is on top of Session Agenda Pages in Pocket Guide

2
 Agenda
• Developer Challenges in Yesterday’s & Today’s world
• HTML5 is key for Cross Platform App development
• HTML5 Web Application Limitations
• What is PhoneGap\Cordova?
• PhoneGap API and Build Service
• Intel contributions to the Cordova
• Demos of HTML5 Web App + PhoneGap API
• Summary

3
 Challenges of Yesterday’s Main Frame
and Desktop World

Target Devices : Main Frame , Desktop

Target OS : Windows*, Unix*, Mac* OS
App development: App created for a particular OS.
Dev. Environment: Dev. Platform = Target Platform

Focus was not on cross-platform development

4
 Challenges of the Today’s Mobile World

• Target Devices : Desktops, Laptops, Netbooks, Tablets, Smartphones

• Target OSes : Windows* (7, 8, Phone), Android*, iOS, Blackberry*, Bada,
Symbian, webOS
• App Development : Multiple IDE’s and SDKs available for different OSes
• Dev. Environment : Dev. Platform != Target Platform
For Application Developers today in order to:
• Maximize audience reach
• Reduce development and manitainence cost
• Have similar user experiences across platforms

Cross-Platform Development is a must.

5
 Agenda
• Developer Challenges in Yesterday’s & Today’s world
• HTML5 is key for Cross Platform App development
• HTML5 Web Application Limitations
• What is PhoneGap\Cordova?
• PhoneGap API and Build Service
• Intel contributions to the Cordova
• Demos of HTML5 Web App + PhoneGap API
• Summary

6
 Emerging Model of Cross Platform
Application Development using HTML5
Devices

Tablets
Smartphones
Desktops
Laptops
Netbooks

iOS*
Linux*
IE v9 +
Windows*
Safari* v5.1 +
BlackBerry*
Chrome* v15+
Chrome*
Firefox v8 +
Mac* OS
Opera v11.1 +
Android*
Tizen*

Operating System Web Browser

Cross-Device, Cross-OS, Cross-Browser

Access to same HTML5 Web App
7
 Internet Enabled Devices vs. PC’s

Internet enabled devices will exceed PCs in 2013

8
 HTML5 Compatible Browsers in Handsets

Handsets with HTML5 compatible browsers

is expected to reach 85% by 2016

9
 Developers Interest in HTML5

Developers survey show 2/3rd are interested in

creating HTML5 web apps

10
 Agenda
• Developer Challenges in Yesterday’s & Today’s world
• HTML5 is key for Cross Platform App development
• HTML5 Web Application Limitations
• What is PhoneGap\Cordova?
• PhoneGap API and Build Service
• Intel contributions to the Cordova
• Demos of HTML5 Web App + PhoneGap API
• Summary

11
 HTML5 Web Application Limitations

HTML5 Web Application is cross platform with single

code base but following are its limitation:

• Does not have complete access to device

hardware, sensor, etc. via HTML5 API
• Cannot tap directly into OS
• Cross browser implementation issues

HTML5 Web application have Gaps

12
 HTML5 Web + Native = Hybrid

Web apps allow to write Native apps have access

once and deploy every to native device features
where but do not have but require developers
access to use native to maintain separate
device features. code bases for different
platforms

Hybrid Apps fills the gap of HTML5 Web Apps

13
 Agenda
• Developer Challenges in Yesterday’s & Today’s world
• HTML5 is key for Cross Platform App development
• HTML5 Web Application Limitations
• What is PhoneGap\Cordova?
• PhoneGap API and Build Service
• Intel contributions to the Cordova
• Demos of HTML5 Web App + PhoneGap API
• Summary

14
 What is PhoneGap (Cordova)?
PhoneGap is an open-source, cross- platform, mobile development
framework which allows developers to create hybrid applications.
• Build app UI using HTML5 & CSS3
• Build app logic & interactivity with JavaScript
• Use the PhoneGap API to interact with device features
• Deploy to multiple platforms

PhoneGap is a bridge between the Web application and

Mobile devices

15
 History of PhoneGap

• PhoneGap is a 100% open source project.

• It was developed by Nitobi.
• Nitobi was purchased by Adobe*.
• PhoneGap was contributed to Apache Software
Foundation by Adobe and was called Apache
Callback.
• Apache Callback was too generic hence it was
named as Cordova.
• PhoneGap brand name is still owned by Adobe.
• PhoneGap is a distribution of Cordova.
PhoneGap is now called Cordova

16
 Agenda
• Developer Challenges in Yesterday’s & Today’s world
• HTML5 is key for Cross Platform App development
• HTML5 Web Application Limitations
• What is PhoneGap\Cordova?
• PhoneGap API and Build Service
• Intel contributions to the Cordova
• Demos of HTML5 Web App + PhoneGap API
• Summary

17
 PhoneGap(Cordova) API

PhoneGap supports 7 OS and 10 devices features

as of today
18
 PhoneGap Build Service
• Phone Gap Build service is a paid service owned by Adobe
• Create app once using HTML, CSS or JavaScript*
• Remote Compile using PhoneGap Build service
• Get App-store ready apps for Apple* iOS, Google Android*,
Palm*, Symbian, BlackBerry* and more

Phone Gap Build simplifies the development of

hybrid mobile apps across multiple platforms

19
PhoneGap Build
How to compile and deploy to multiple platforms

20
 PhoneGap Build:
How to compile and deploy to multiple platforms (Contd)

21
 PhoneGap Build:
How to compile and deploy to multiple platforms - Contd

22
 PhoneGap Build:
How to compile and deploy to multiple platforms (Contd)

23
 PhoneGap Build:
How to compile and deploy to multiple platforms (Contd)

24
 Agenda
• Developer Challenges in Yesterday’s & Today’s world
• HTML5 is key for Cross Platform App development
• HTML5 Web Application Limitations
• What is PhoneGap\Cordova?
• PhoneGap API and Build Service
• Intel contributions to the Cordova
• Demos of HTML5 Web App + PhoneGap API
• Summary

25
 Intel Contributions to Cordova

• Intel is contributing to Tizen* support for PhoneGap

API.
• Intel is working with Adobe* to provide Tizen
support in PhoneGap Build.

26
 Agenda
• Developer Challenges in Yesterday’s & Today’s world
• HTML5 is key for Cross Platform App development
• HTML5 Web Application Limitations
• What is PhoneGap\Cordova?
• PhoneGap API and Build Service
• Intel contributions to the Cordova
• Demos of HTML5 Web App + PhoneGap API
• Summary

27
 Demos

• Sample HTML5 Canvas App

• Adding PhoneGap Accelerometer API into HTML5
Canvas App
• Cool HTML5 Accelerometer API + Canvas App

28
 Demos

• Sample HTML5 Canvas App

• Adding PhoneGap Accelerometer API into HTML5
Canvas App
• Cool HTML5 Accelerometer API + Canvas App

29
 HTML5 <canvas> element

• HTML5 <canvas> element is a container or drawable

region to draw graphics, on the fly, via scripting.

• The getContext("2d") object is a built-in HTML5

object for canvas element , with many methods to
draw paths, boxes, circles, characters, images and
more.

30
 Sample HTML5 App using Canvas

Create a
Canvas

Create a
context object

Draw a Circle

31
 Demos

• Sample HTML5 Canvas App

• Adding PhoneGap Accelerometer API into HTML5
Canvas App
• Cool HTML5 Accelerometer API + Canvas App

32
 Adding PhoneGap Accelerometer API
into HTML5 Canvas App
1. Include the
phonegap.js

2. Wait for
PhoneGap to load

3. PhoneGap is
ready

4. Start watching
acceleration every
100 msec

33
 Adding PhoneGap Accelerometer API
into HTML5 Canvas App

34
 Adding PhoneGap Accelerometer API
into HTML5 Canvas App

35
 Screen Shot

36
 Demos

• Sample HTML5 Canvas App

• Adding PhoneGap Accelerometer API into HTML5
Canvas App
• Cool HTML5 Accelerometer API + Canvas App

37
 Cool HTML5 Accel. API + Canvas App

38
 Agenda
• Developer Challenges in Yesterday’s & Today’s world
• HTML5 is key for Cross Platform App development
• HTML5 Web Application Limitations
• What is PhoneGap\Cordova ?
• PhoneGap API and Build Service
• Intel contributions to the Cordova
• Demos of HTML5 Web App + PhoneGap API
• Summary

39
 Summary
• The Emerging Model for Cross-platform application
development is HTML5 Web Apps
• Cross-Device, Cross-OS, Cross-Browser access to same HTML5
Web App
• HTML5 Web apps have limitation in terms of accessing device
features like sensor’s today
• Hybrid Apps (HTML5 + Native) help to fill these gaps.
• PhoneGap is a open source, cross platform mobile framework
which allows developer to create hybrid apps
– Write code once using HTML5 CSS and JS, wrap it in PhoneGap and
deploy to multiple platforms
• Using PhoneGap Build, upload a hybrid app to the cloud and
get app –store ready apps for multiple platforms
• Intel is contributing to add support for Tizen* to Phone Gap

Create apps for Intel® Devices using PhoneGap

40
Legal Disclaimer
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.
• A "Mission Critical Application" is any application in which failure of the Intel Product could result, directly or indirectly, in
personal injury or death. SHOULD YOU PURCHASE OR USE INTEL'S PRODUCTS FOR ANY SUCH MISSION CRITICAL
APPLICATION, YOU SHALL INDEMNIFY AND HOLD INTEL AND ITS SUBSIDIARIES, SUBCONTRACTORS AND AFFILIATES, AND
THE DIRECTORS, OFFICERS, AND EMPLOYEES OF EACH, HARMLESS AGAINST ALL CLAIMS COSTS, DAMAGES, AND EXPENSES
AND REASONABLE ATTORNEYS' FEES ARISING OUT OF, DIRECTLY OR INDIRECTLY, ANY CLAIM OF PRODUCT LIABILITY,
PERSONAL INJURY, OR DEATH ARISING IN ANY WAY OUT OF SUCH MISSION CRITICAL APPLICATION, WHETHER OR NOT INTEL
OR ITS SUBCONTRACTOR WAS NEGLIGENT IN THE DESIGN, MANUFACTURE, OR WARNING OF THE INTEL PRODUCT OR ANY OF
ITS PARTS.
• 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.
• Intel processor numbers are not a measure of performance. Processor numbers differentiate features within each processor
family, not across different processor families. Go to: http://www.intel.com/products/processor_number.
• 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
• Intel, Sponsors of Tomorrow and the Intel logo are trademarks of Intel Corporation in the United States and other countries.

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

• Copyright ©2012 Intel Corporation.

41
 Risk Factors
The above statements and any others in this document that refer to plans and expectations for the first quarter, the year and the
future are forward-looking statements that involve a number of risks and uncertainties. Words such as “anticipates,” “expects,”
“intends,” “plans,” “believes,” “seeks,” “estimates,” “may,” “will,” “should” and their variations identify forward-looking statements.
Statements that refer to or are based on projections, uncertain events or assumptions also identify forward-looking statements.
Many factors could affect Intel’s actual results, and variances from Intel’s current expectations regarding such factors could cause
actual results to differ materially from those expressed in these forward-looking statements. Intel presently considers the following
to be the important factors that could cause actual results to differ materially from the company’s expectations. Demand could be
different from Intel's expectations due to factors including changes in business and economic conditions, including supply
constraints and other disruptions affecting customers; customer acceptance of Intel’s and competitors’ products; changes in
customer order patterns including order cancellations; and changes in the level of inventory at customers. Uncertainty in global
economic and financial conditions poses a risk that consumers and businesses may defer purchases in response to negative
financial events, which could negatively affect product demand and other related matters. Intel operates in intensely competitive
industries that are characterized by a high percentage of costs that are fixed or difficult to reduce in the short term and product
demand that is highly variable and difficult to forecast. Revenue and the gross margin percentage are affected by the timing of Intel
product introductions and the demand for and market acceptance of Intel's products; actions taken by Intel's competitors, including
product offerings and introductions, marketing programs and pricing pressures and Intel’s response to such actions; and Intel’s
ability to respond quickly to technological developments and to incorporate new features into its products. Intel is in the process of
transitioning to its next generation of products on 22nm process technology, and there could be execution and timing issues
associated with these changes, including products defects and errata and lower than anticipated manufacturing yields. The gross
margin percentage could vary significantly from expectations based on capacity utilization; variations in inventory valuation,
including variations related to the timing of qualifying products for sale; changes in revenue levels; product mix and pricing; the
timing and execution of the manufacturing ramp and associated costs; start-up costs; excess or obsolete inventory; changes in unit
costs; defects or disruptions in the supply of materials or resources; product manufacturing quality/yields; and impairments of long-
lived assets, including manufacturing, assembly/test and intangible assets. The majority of Intel’s non-marketable equity
investment portfolio balance is concentrated in companies in the flash memory market segment, and declines in this market
segment or changes in management’s plans with respect to Intel’s investments in this market segment could result in significant
impairment charges, impacting restructuring charges as well as gains/losses on equity investments and interest and other. Intel's
results could be affected by adverse economic, social, political and physical/infrastructure conditions in countries where Intel, its
customers or its suppliers operate, including military conflict and other security risks, natural disasters, infrastructure disruptions,
health concerns and fluctuations in currency exchange rates. Expenses, particularly certain marketing and compensation expenses,
as well as restructuring and asset impairment charges, vary depending on the level of demand for Intel's products and the level of
revenue and profits. Intel’s results could be affected by the timing of closing of acquisitions and divestitures. Intel's results could be
affected by adverse effects associated with product defects and errata (deviations from published specifications), and by litigation or
regulatory matters involving intellectual property, stockholder, consumer, antitrust and other issues, such as the litigation and
regulatory matters described in Intel's SEC reports. An unfavorable ruling could include monetary damages or an injunction
prohibiting us from manufacturing or selling one or more products, precluding particular business practices, impacting Intel’s ability
to design its products, or requiring other remedies such as compulsory licensing of intellectual property. A detailed discussion of
these and other factors that could affect Intel’s results is included in Intel’s SEC filings, including the report on Form 10-Q for the
quarter ended Oct. 1, 2011.
Rev. 1/19/12

42