Mobile Application Development Using PhoneGap

Mobile Applications using Rohit Ghatol PhoneGap QuickOffice
Introduction
Architect @ QuickOffice Author @ Apress Beginning PhoneGap Write articles for PhoneGap Wiki Technical Talks and Corporate Training
2
Topics
1. Short Intro to PhoneGap 2. Choosing the right UI Framework (jQueryMobile, Sencha or GWT) 3. Remote Debugging 4. Building in the Cloud 5. Extending PhoneGap 6. Capabilities like OAuth
3
Short Intro to PhoneGap
Mobile Platforms
iOS Android BlackBerry WebOS Bada
5
Symbian
Win7
Common Platform Approach
Modern Browsers
All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs
Mobile OS Android iPhone BlackBerry 6.0 + Window Phone 7 WebOS Nokia
Browser Webkit based Webkit based Webkit based IE 7-9 based * Webkit based Webkit based
WebViews
All of these smart phones supports using these modern browsers as embedded views (aka WebViews)
WebView WebView
JavaScript to native and back

All these browser engine (most common being webkit) support Javascript to talk to native code and back
WebView
HTML/Javascrip t
Native Code (Java/C++/ObjC)
JSON packets
9
What are PhoneGap apps?
iPhone App
Android App
BlackBerry App
WebOS App
WebKit component running your javascript phonegap app
Symbian, Windows 7 , Bada

10
11
Over all Architecture

HTML5/CSS3 Application
UI Framework e.g jQueryMobile/Sencha
PhoneGap API
Phone Gap Bridge Camera GPS Accelerome ter SQLite SQLite
File System
Compass
etc
11
New Age Applications

AJAX Application
/Employee JSON/XML Mobile clients /Department Restful Service
Third Party Integrations

12
Benefits of PhoneGap
OpenSource 6 Platforms Existing AJAX Developers task force Same UI across
Mobile App Mobile Web
Mashup Friendly No Single Origin Policy (Thats a wow)

13
Getting Started with PhoneGap
14
PhoneGap Getting Started

Follow Getting Started Guide
15
What is nature of PhoneGap Apps

PhoneGap Apps Typically are are JavaScript Ajax apps Only addition is use of PhoneGap API to
Access Device Info Access Geo, Accelerometer, Compass Access FS, DB, Network status Access Address Book, Camera etc
16
PhoneGap Quick Code Demo

Basic LifeCycle Demo Showing Compass Showing Accelerometer Capturing from Camera
17
Android PhoneGap Project
18
Basic LifeCycle Demo
19
PhoneGap Limitations
Background processing
e.g Running sync every 5 mins Putting notification for users
Notifications
In fact these limitations are quite common for cross platform frameworks.
20
Choosing Right UI Framework
21
The Contenders
jQueryMobile Sencha Touch Google Webtoolkit (GWT)
22
jQueryMobile Info
MIT or GPL License
Supports
23
jQueryMobile Info
24
jQueryMobile Demo
25
jQueryMobile basics
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/ jquery.mobile-1.0b2.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/ jquery.mobile-1.0b2.min.js"></script> </head> <body> </body> </html>
26
jQueryMobile basics
<body> <div data-role="page> <div data-role="header"> <h1>Single Page</h1> </div> </div> </body>
27
jQueryMobile basics
28
jQueryMobile basics
29
jQueryMobile basics
30
jQueryMobile Demo
Let see the demo http://jquerymobile.com/demos/1.0b2/
31
32
Sencha Touch
33
Sencha Touch
iPhone Android BlackBerry Rich Widgets

34
Kitchen Sink on Tablet
35
Kitchen Sink on Mobile
36
Sencha Touch Demo
37
Sencha basics
<!DOCTYPE html> <html> <head> <title>GeoTweets</title> <link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css> <script type="text/javascript" src="../../sencha-touch-debug.js"></script>  <script type="text/javascript" src="src/index.js"></script> </head> <body> </body> </html>
38
Sencha basics
Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: false, onReady: function() { . } };
39
Sencha basics
var panel = new Ext.TabPanel({ fullscreen: true, cardSwitchAnimation: 'slide', items: [ map, timeline] });
40
Sencha basics
var timeline = new Ext.Component({ title: 'Timeline', cls: 'timeline', scroll: 'vertical', tpl: [ '<tpl for=".">', '<div class="tweet">', '<div class="avatar"><img src="{profile_image_url}" /></div>', '<div class="tweet-content">', '<h2>{from_user}</h2>', '<p>{text}</p>', '</div>', '</div>', '</tpl>' ]
41
Sencha basics
var refresh = function() { var coords = map.geo.coords; Ext.util.JSONP.request({ url: 'http://search.twitter.com/search.json', callbackKey: 'callback', params: { geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi', rpp: 30 }, callback: function(data) { data = data.results; // Update the tweets in timeline timeline.update(data); } });
42
43
GWT basics
GWT allows developers to code in Java and compile to Javascript Used to build browser based apps
44
For Those who know GWT

There are two ways to build PhoneGap Apps for GWT Using PhoneGap-GWT Library
0.9.4 version Not 100% complete
Use Overlays and JSNI to wrap PhoneGap JS APIs with GWT APIs
45
When to go for GWT

Your AJAX app is GWT based Enterprise class AJAX app Reuse of UI code across
Web App Mobile Web App Mobile PhoneGap App
Performance, Cross Browser support

46
Comparison
Feature Mobile Support UI Concept Widget Support jQueryMobile Yes HTML based Minimum Sencha Yes Javascript based Good Support Excellent (mobile) Time consuming GWT Generic Java Widget based Good Support but non generic Excellent (both) Time consuming since integration with PhoneGap Excellent
47
Support for complex Good UI Learning curve Minimum
Extensibility
Moderate jQuery Plugins
Good
Comparison
Feature Ideal for jQueryMobile Smaller Simpler Apps No No Sencha For moderate to complex apps Yes Yes GWT Both desktop and mobile complex apps You can implement Not Required
App data store Template Engine
48
PhoneGap Emulators and Remote Debugging
49
Taking the Pain Off

Testing on Mobile is Pain Testing on Chrome is easy Install Ripple Emulator on Chrome
50
Ripple Emulator Demo
Start Chrome with --disable-web-security option

51
Say you are testing on Mobile

How to do Inspect? How to modify the DOM? Use http://debug.phonegap.com
52
http://debug.phonegap.com
53
Debugging Demo (Browser)
54
Debugging Demo
55
Debugging Locally
Install Weinre locally http://phonegap.github.com/weinre/ Inject debug script Debug on locally installed Weinre
56
Building in Cloud PhoneGap Build (Beta)
57
Building for Major Mobile Platform

Requires
All SDKs installed Necessary Emulators required Windows and Mac OS at minimum Time and Patience Difficult for CIT Builds
58
PhoneGap Beta
Build Service for Pure PhoneGap Applications Pure PhoneGap == No Extensions Build on PhoneGaps cloud Share Code with PhoneGap Share necessary certificates with PhoneGap
59
PhoneGap Build Beta
60
61
62
63
64
65
66
67
68
Extending PhoneGap
69
Need for Extension

Javascript code should avoid heavy weight lifting Exposing more of native platform Platform Specific extensions, things which are not common
70
Example for Extensions

E.g
Drop Box file sync Encryption and Decryption ..
71
Plugin Architecture
72
Android Extension Code Walk through
Code Demo http://wiki.phonegap.com/w/page/367534 20Android
73
Android Plugin Native Part
74
Android Plugin JavaScript Part
75
Calling Part
76
Conclusion for PhoneGap

Javascript UI Framework works for apps of moderate complexity Sencha Touch for complex apps jQuery for simpler GWT for apps that go beyond web or mobile.
77
Conclusion
PhoneGap Build is great way to improve CIT for pure PhoneGap apps PhoneGap Extensions are great way to build hybrid apps e.g FileShare PhoneGap great way to reduce cost and risk, but meant for a type of application
78
Features like Oauth (if time permits)
79
PhoneGap Pros and Cons

Goal - Doing things common across mobile platform Pros Good Abstraction to developers Cons Not everything works or works uniformly across platforms. E.g Oauth Works on iPhone and doesnt work yet on Android and others
80
OAuth for iPhone

How OAuth works? E.g Facebook Child Browser Support Tracking URL change on Child Browser Close Child Browser Reading token from Child Browser
81
Facebook OAuth Flow

Listens for URL change
PhoneGap App
Child Browser Plugin
PhoneGap Framework
82
Facebook OAuth Flow

Face book Login Page
l tm h ss. e ucc s
./ ://. p htt

PhoneGap Framework
success.html?key=ads23sfs
83
Facebook OAuth Flow

Listens for URL change
key = ads23sfs
PhoneGap App
PhoneGap Framework
84
Facebook OAuth Flow
key = ads23sfs
PhoneGap App
PhoneGap Framework
API Facebook.com JSON
Token passed ads23sfs
85
Q&A
Reachable @ rohitsghatol@gmail.com Twitter - rohitghatol
86
Beginning PhoneGap - Apress
87
Beginning PhoneGap - Apress
Apress Link http://www.apress.com/mobile/blackberry/ 9781430239031
88

Mobile Application Development Using PhoneGap

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Mobile Application Development Using PhoneGap

Hochgeladen von

Copyright:

Verfügbare Formate

Mobile Applications using Rohit Ghatol PhoneGap QuickOffice

Short Intro to PhoneGap

Common Platform Approach

Mobile OS Android iPhone BlackBerry 6.0 + Window Phone 7 WebOS Nokia

JavaScript to native and back

Native Code (Java/C++/ObjC)

What are PhoneGap apps?

WebKit component running your javascript phonegap app

Symbian, Windows 7 , Bada

Over all Architecture

UI Framework e.g jQueryMobile/Sencha

Phone Gap Bridge Camera GPS Accelerome ter SQLite SQLite

New Age Applications

/Employee JSON/XML Mobile clients /Department Restful Service

Third Party Integrations

Mashup Friendly No Single Origin Policy (Thats a wow)

Getting Started with PhoneGap

PhoneGap Getting Started

What is nature of PhoneGap Apps

PhoneGap Quick Code Demo

Android PhoneGap Project

Basic LifeCycle Demo

Choosing Right UI Framework

iPhone Android BlackBerry Rich Widgets

Kitchen Sink on Tablet

Kitchen Sink on Mobile

Sencha Touch Demo

For Those who know GWT

When to go for GWT

Performance, Cross Browser support

Support for complex Good UI Learning curve Minimum

Moderate jQuery Plugins

App data store Template Engine

PhoneGap Emulators and Remote Debugging

Taking the Pain Off

Ripple Emulator Demo

Start Chrome with --disable-web-security option

Say you are testing on Mobile

Debugging Demo (Browser)

Building in Cloud PhoneGap Build (Beta)

Building for Major Mobile Platform

PhoneGap Build Beta

Need for Extension

Example for Extensions

Android Extension Code Walk through

Code Demo http://wiki.phonegap.com/w/page/367534 20Android

Android Plugin Native Part

Android Plugin JavaScript Part

Conclusion for PhoneGap

Features like Oauth (if time permits)

PhoneGap Pros and Cons

OAuth for iPhone

Facebook OAuth Flow

Child Browser Plugin

Facebook OAuth Flow

Child Browser Plugin

Facebook OAuth Flow

Child Browser Plugin

Facebook OAuth Flow

API Facebook.com JSON

Token passed ads23sfs

Beginning PhoneGap - Apress

Beginning PhoneGap - Apress