Developing downloadable mobile apps using HTML5 and PhoneGap ...

uglyveinInternet και Εφαρμογές Web

24 Ιουν 2012 (πριν από 4 χρόνια και 9 μήνες)

439 εμφανίσεις

Developing
downloadable
mobile apps using HTML
5
and
PhoneGap

“Apache Callback”

Ron Perry, CTO, Worklight Inc.

Agenda

Downloadable (native) apps vs. Web apps


HTML
5
web apps vs. Downloadable apps

Using HTML
5
in downloadable apps: the hybrid model


How hybrid apps work


Advantages and disadvantages

Writing an app with
PhoneGap


The concept


Accessing device APIs

Our experience with
PhoneGap

2

Critical HTML
5
features are supported on mobile

3

iOS
5

Android
2.2
,
2.3

WinPhone

7.5


Canvas


Audio


Local Storage


Geolocation


Video


CSS
3
borders,
anim


Web Applications


SVG


Elements


CSS
3
position:fixed


Drag & Drop


Files


WebGL


IndexedDB
,
WebSQL

Desktop:

HTML
5
makes mobile web apps possible

4

Native apps can still do much more

5

Video Processing

VoIP

Audio Processing

Access Camera

App
-
Store Presence

Downloadable (Native) Apps

6


File System
(on Mobile
Device)

Native App

(Java/
Obj
-
C/C#)

Mobile OS

Mobile Browser

Web Apps

7

Web
App

(HTML, CSS, JS)

Mobile OS

Web Server

Hybrid to the rescue

8

Advantages

Portability

Reuse of
existing skills

Access to
device APIs

App
-
store
presence

Combine HTML/CSS/JS with native code

User interface in
HTML/CSS

Logic and interaction
in JS

Special functions
written in platform
-
specific native code

Hybrid Apps

9


File System
(on Mobile
Device)

Mobile OS

Native Container

HTML, CSS, JS

Full

Native
Speed as
Necessary

Reasonable

Available

Low
Overhead

Hybrid

App Development Comparison

10

Native

Device
Access

Speed

App Store

Approval
Process

Full

Very Fast

Available

Mandatory

Development
Cost

Expensive

Partial

Fast

Not
Available

Reasonable

None

Web

Architecture of a hybrid app

Native container:


Creates instance of
UIWebView

/
android.webkit.WebView

/ etc.


Navigates to main html file


Implements listener/handler for requests coming from JS code


Activates JS code when necessary


HTML
5
/CSS
3
/JS code:


Implements UI and app logic


Activates native handlers through OS
-
specific mechanism (custom URL
scheme)


Receives responses through JS handlers


HTML resources can be packaged into downloadable app for
performance boost

11

PhoneGap



Open Source Framework

The de
-
facto standard for hybrid app development

Now in transition into becoming “Apache Callback”

Provides:


A template implementation for the native container


Implementation of the JS<
-
>Native bridge for
6
mobile OSs


OS
-
independent JS APIs for activating device functions


12

PhoneGap

provides JS access to device APIs

13

PhoneGap

run
-
time (
native+JS
) is part of the app


14

Example: raising a native alert from JS code

15

Example: getting device info


16

Example: accessing the camera

17

Worklight Platform:
PhoneGap
-
based client
-
side

The Worklight Platform provides an enterprise
-
grade
infrastructure for mobile apps


Includes features such as security, authentication,

data
-
integration, push notifications, diagnostics, direct update
and more


We chose
PhoneGap

as the basis for our client
-
side technology,
(while exposing the
PhoneGap

APIs) and are very happy with the
result!

18

A couple of Worklight
-
based apps

19

Lotte

Card (Korean credit card company):


Combines
150
HTML
5
screens with a
native augmented reality screen


Developed very quickly for iPhone and
Android

RealNews

(for
iPad
):


Developed by
RealCommerce
,
Worklight’s

distributors in Israel


Lists “hot” Israeli news articles by # of likes


Freely available on the app store

For More Information

20

Resource

Location

PhoneGap

Site

http://www.phonegap.com

Apache Project

Page

http://incubator.apache.org/projects/callback.html

Worklight
Webinars

http://www.worklight.com/resources/webinars
-
and
-
tools


Thank You!