Mobile Application Development using PhoneGap

Published on March 2017 | Categories: Documents | Downloads: 34 | Comments: 0 | Views: 268
of 88
Download PDF   Embed   Report

Comments

Content

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

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close