Mobile Applications using Rohit Ghatol PhoneGap QuickOffice
1
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
4
Mobile Platforms
iOS Android BlackBerry WebOS Bada
5
Symbian
Win7
Common Platform Approach
6
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
7
WebViews
All of these smart phones supports using these modern browsers as embedded views (aka WebViews)
WebView WebView
8
9
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 (That’s 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><!-- /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>
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> <!-- Application JS --> <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 PhoneGap’s 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 doesn’t 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
Child Browser Plugin
PhoneGap Framework
success.html?key=ads23sfs
83
Facebook OAuth Flow
Listens for URL change
key = ads23sfs
PhoneGap App
Child Browser Plugin
PhoneGap Framework
84
Facebook OAuth Flow
key = ads23sfs
PhoneGap App
PhoneGap Framework
API Facebook.com JSON
Token passed ads23sfs
85
Q&A
Reachable @
[email protected] Twitter - rohitghatol
86
Beginning PhoneGap - Apress
87
Beginning PhoneGap - Apress
Apress Link http://www.apress.com/mobile/blackberry/ 9781430239031
88