mobile application development using phonegap
DESCRIPTION
Presented By Rohit Ghatol at the 2nd IndicThreads.com Conference On Mobile Application Development, August 2011 http://Mobile.IndicThreads.comTRANSCRIPT
1
Mobile Applications
using PhoneGap Rohit Ghatol
QuickOffice
2
Introduction• Architect @ QuickOffice
• Author @ Apress – Beginning PhoneGap
• Write articles for PhoneGap Wiki
• Technical Talks and Corporate Training
3
Topics1. Short Intro to PhoneGap2. Choosing the right UI Framework
(jQueryMobile, Sencha or GWT)3. Remote Debugging4. Building in the Cloud5. Extending PhoneGap6. Capabilities like OAuth
4
Short Intro to PhoneGap
5
Mobile Platforms
iOS Android
BlackBerry Symbian
WebOS Win7
Bada
6
Common Platform Approach
7
Modern Browsers
Mobile OS BrowserAndroid Webkit basediPhone Webkit basedBlackBerry 6.0 + Webkit basedWindow Phone 7 IE 7-9 based *WebOS Webkit basedNokia Webkit based
All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs
8
WebViewsAll of these smart phones supports using these modern browsers as embedded views (aka WebViews)
WebView WebView
9
9
JavaScript to native and back
Native Code(Java/C++/ObjC)
JSON packets
All these browser engine (most common being webkit) support Javascript to talk to native code and back
HTML/Javascript
WebView
10
What are PhoneGap apps?
iPhoneApp
AndroidApp
BlackBerryApp
WebOSApp
…Symbian, Windows 7 , BadaWebKit component running your javascript phonegap app
11
11
Over all Architecture
HTML5/CSS3 Application
UI Framework e.g jQueryMobile/Sencha PhoneGap API
Phone Gap Bridge
Camera GPS SQLite SQLite
File System Accelerometer
Compass etc
12
New Age Applications
AJAX Application
Mobile clients
Third Party Integrations
/Employee
/DepartmentJSON/XML
Restful Service
13
Benefits of PhoneGap• OpenSource – 6 Platforms• Existing AJAX Developers task force• Same UI across
• Mobile App• Mobile Web
• Mashup Friendly – No Single Origin Policy (That’s a wow)
14
Getting Started with PhoneGap
16
What is nature of PhoneGap AppsPhoneGap 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
17
PhoneGap Quick Code Demo• Basic LifeCycle Demo• Showing Compass• Showing Accelerometer• Capturing from Camera
18
Android PhoneGap Project
19
Basic LifeCycle Demo
20
PhoneGap Limitations• Background processing
• e.g Running sync every 5 mins• Notifications
• Putting notification for users
In fact these limitations are quite common for cross platform frameworks.
21
Choosing Right UI Framework
22
The Contenders• jQueryMobile• Sencha Touch• Google Webtoolkit (GWT)
23
jQueryMobile Info
MIT or GPL License
Supports
24
jQueryMobile Info
25
jQueryMobile Demo
26
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>
27
jQueryMobile basics<body>
<div data-role="page”>
<div data-role="header">
<h1>Single Page</h1>
</div><!-- /header
<div data-role="content">
<p>This is a Single Page……….</p>
</div><!-- /content
<div data-role="footer">
<h4>Footer Content</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
28
jQueryMobile basics
29
jQueryMobile basics
30
jQueryMobile basics
31
jQueryMobile DemoLet see the demo -
http://jquerymobile.com/demos/1.0b2/
32
33
Sencha Touch
34
Sencha Touch
• iPhone• Android• BlackBerry
Rich Widgets
35
Kitchen Sink on Tablet
36
Kitchen Sink on Mobile
37
Sencha Touch Demo
38
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>
<!-- Application JS -->
<script type="text/javascript" src="src/index.js"></script>
</head>
<body>
</body>
</html>
39
Sencha basicsExt.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
…….
}
};
40
Sencha basicsvar panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
items: [
map,
timeline]
});
41
Sencha basicsvar 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>'
]
});
42
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);
}
});
};
43
44
GWT basics• GWT allows developers to code in Java
and compile to Javascript• Used to build browser based apps
45
For Those who know GWTThere 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
46
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
47
ComparisonFeature jQueryMobile Sencha GWT
Mobile Support Yes Yes Generic
UI Concept HTML based Javascript based Java Widget based
Widget Support Minimum Good Support Good Support but non generic
Support for complex UI
Good Excellent (mobile) Excellent (both)
Learning curve Minimum Time consuming Time consuming since integration with PhoneGap
Extensibility Moderate – jQuery Plugins
Good Excellent
48
ComparisonFeature jQueryMobile Sencha GWT
Ideal for Smaller Simpler Apps
For moderate to complex apps
Both desktop and mobile – complex apps
App data store No Yes You can implement
Template Engine No Yes Not Required
49
PhoneGap Emulators and Remote Debugging
50
Taking the Pain Off• Testing on Mobile is Pain• Testing on Chrome is easy• Install Ripple Emulator on Chrome
51
Ripple Emulator Demo
Start Chrome with --disable-web-security option
52
Say you are testing on Mobile• How to do Inspect?• How to modify the DOM?• Use http://debug.phonegap.com
53
http://debug.phonegap.com
54
Debugging Demo (Browser)
55
Debugging Demo
56
Debugging Locally• Install Weinre locally -
http://phonegap.github.com/weinre/ • Inject debug script• Debug on locally installed Weinre
57
Building in Cloud – PhoneGap Build (Beta)
58
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
59
PhoneGap Beta• Build Service for Pure PhoneGap
Applications• Pure PhoneGap == No Extensions• Build on PhoneGap’s cloud• Share Code with PhoneGap• Share necessary certificates with
PhoneGap
60
PhoneGap Build Beta
61
62
63
64
65
66
67
68
69
Extending PhoneGap
70
Need for Extension• Javascript code should avoid heavy
weight lifting• Exposing more of native platform• Platform Specific extensions, things
which are not common
71
Example for Extensions• E.g
• Drop Box file sync• Encryption and Decryption• …..
72
Plugin Architecture
73
Android Extension Code Walk through• Code Demo -
http://wiki.phonegap.com/w/page/36753494/How%20to%20Create%20a%20PhoneGap%20Plugin%20for%20Android
74
Android Plugin – Native Part
75
Android Plugin – JavaScript Part
76
Calling Part
77
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.
78
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
79
Features like Oauth(if time permits)
80
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
doesn’t work yet on Android and others
81
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
82
Facebook OAuth Flow
PhoneGap App
PhoneGap Framework
Child Browser Plugin
Listens for URL change
83
Facebook OAuth Flow
PhoneGap Framework
Child Browser Plugin
success.html?key=ads23sfs
Face book Login Page
http://../success.html
84
Facebook OAuth Flow
PhoneGap App
PhoneGap Framework
Child Browser Plugin
Listens for URL change
key = ads23sfs
85
Facebook OAuth Flow
PhoneGap App
PhoneGap Framework
key = ads23sfs
API
Facebook.comJSON
Token passed ads23sfs
87
Beginning PhoneGap - Apress
88
Beginning PhoneGap - ApressApress Link -
http://www.apress.com/mobile/blackberry/9781430239031