How PhoneGap really works

Slide 1

Slide 1 text

Ilya Pukhalski, EPAM SEC 2013 PHONEGAP How really works

Slide 2

Slide 2 text

@witchﬁnderx 2 Ilya Pukhalski, EPAM Mobile Competency Center

Slide 3

Slide 3 text

WHAT WILL WE DISCUSS? 3

Slide 4

Slide 4 text

— That mobile mobile world... — What is PhoneGap? - A brief history of PhoneGap - How PhoneGap works - PhoneGap APIs - Plugins - Cons and limitations — PhoneGap Build — The future is closer than you think 4

Slide 5

Slide 5 text

THAT MOBILE MOBILE WORLD... 5

Slide 6

Slide 6 text

6 June, 2007

Slide 7

Slide 7 text

7 +

Slide 8

Slide 8 text

8 July 10, 2008

Slide 9

Slide 9 text

9 One of the main world problems today

Slide 10

Slide 10 text

Everything is WEB 10

Slide 11

Slide 11 text

11 What's in common?

Slide 12

Slide 12 text

12 All of them have a browser

Slide 13

Slide 13 text

PHONEGAP 13

Slide 14

Slide 14 text

PhoneGap is an open source framework that enables to build cross-platform hybrid mobile applications using web technologies (HTML, CSS, JavaScript). 14

Slide 15

Slide 15 text

PhoneGap 2.3.0 15

Slide 16

Slide 16 text

HISTORY OF PHONEGAP 16

Slide 17

Slide 17 text

iPhoneDevCamp 2008 17 PhoneGap 1.0 2009 Migration to Apache Cordova 2012 IBM get involved into development late 2009 PhoneGap Build oﬃcial launch late 2012

Slide 18

Slide 18 text

HOW PHONEGAP WORKS 18

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Slide 25

Slide 25 text

25 PhoneGap Build Process

Slide 26

Slide 26 text

PHONEGAP API'S 26

Slide 27

Slide 27 text

27 — Accelerometer — Camera — Compass (excl. iPhone 3/3G, BlackBerry OS 5+ and Symbian) — Contacts (excl. WebOS) — File (excl. WebOS, Symbian, Bada) — Geolocation — Media (excl. BlackBerry OS 5+, WebOS, Symbian, Bada) — Network — Notiﬁcation — Storage (excl. Bada)

Slide 28

Slide 28 text

Slide 29

Slide 29 text

29 API call example `navigator' is a global namespace for all API calls

Slide 30

Slide 30 text

HELLO WORLD 30

Slide 31

Slide 31 text

Including cordova.js

Slide 32

Slide 32 text

32 Adding listener on "deviceready"event

Slide 33

Slide 33 text

33 showAlert(); will display a native notiﬁcation

Slide 34

Slide 34 text

34 Show notiﬁcation as soon as device is ready

Slide 35

Slide 35 text

PLUGINS 35

Slide 36

Slide 36 text

Slide 37

Slide 37 text

37 HelloWorld.js

Slide 38

Slide 38 text

38 PhoneGap Bridge exec call

Slide 39

Slide 39 text

39 PhoneGap Bridge exec call Cordova.exec bridge CDV-HelloWorld.js

Slide 40

Slide 40 text

40 CLI for plugin boilerplate

Slide 41

Slide 41 text

41 CLI for plugin boilerplate

Slide 42

Slide 42 text

42 iOS native code #import @interface HelloWorld : CDVPlugin @end #import "HelloWorld.h" @implementation HelloWorld @end HelloWorld.h HelloWorld.m Inheritance

Slide 43

Slide 43 text

43 Adding methods #import @interface HelloWorld : CDVPlugin - (void)add:(CDVInvokedUrlCommand*)command; @end #import "HelloWorld.h" @implementation HelloWorld - (void)add:(CDVInvokedUrlCommand*)command { } @end HelloWorld.h HelloWorld.m Instance method Instance method

Slide 44

Slide 44 text

44 Retrieving arguments #import "HelloWorld.h" @implementation HelloWorld - (void)add:(CDVInvokedUrlCommand*)command { double a = [[command.arguments objectAtIndex:0] doubleValue]; double b = [[command.arguments objectAtIndex:1] doubleValue]; double result = a + b; } @end HelloWorld.m Retrieve arguments; Addition.

Slide 45

Slide 45 text

45 Sending the result #import "HelloWorld.h" @implementation HelloWorld - (void)add:(CDVInvokedUrlCommand*)command { double a = [[command.arguments objectAtIndex:0] doubleValue]; double b = [[command.arguments objectAtIndex:1] doubleValue]; double result = a + b; CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsDouble:result]; [self writeJavascript: [pluginResult toSuccessCallbackString:command.callbackId]]; } @end HelloWorld.m Send result back

Slide 46

Slide 46 text

46 Adding plugin mapping to Cordova.plist

Slide 47

Slide 47 text

47 Calling our plugin from JS

Slide 48

Slide 48 text

CONS & LIMITATIONS 48

Slide 49

Slide 49 text

— Fast changing inconsistent API — Lacks and inaccuracies in documentation — Some device speciﬁc API's are still unavailable for some OS — Dealing with cross-platform web development issues 49

Slide 50

Slide 50 text

PHONEGAP BUILD 50

Slide 51

Slide 51 text

51 PhoneGap Build is a cloud based service built on the top of PhoneGap framework.

Slide 52

Slide 52 text

— PhoneGap Build is a cloud service — PhoneGap Build API can help in establishing CI — No need to have diﬀerent environment OS and SDK's to build an application 52 PhoneGap Build Pros