How PhoneGap really works

PhoneGap (PhoneGap API's, PhoneGap plugins, PhoneGap Build) from behind

Transcript

1. Ilya  Pukhalski, EPAM  SEC  2013 PHONEGAP How really  works
2. @witchfinderx 2 Ilya Pukhalski, EPAM Mobile Competency Center
3. WHAT WILL WE DISCUSS? 3
4. — 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
5. THAT MOBILE MOBILE WORLD... 5
6. 6 June, 2007
7. 7 +
8. 8 July 10, 2008
9. 9 One of the main world problems today
10. Everything is WEB 10
11. 11 What's in common?
12. 12 All of them have a browser
13. PHONEGAP 13
14. PhoneGap is an open source framework that enables to build cross-platform hybrid mobile applications using web technologies (HTML, CSS, JavaScript). 14
15. PhoneGap 2.3.0 15
16. HISTORY OF PHONEGAP 16
17. iPhoneDevCamp 2008 17 PhoneGap 1.0 2009 Migration to Apache Cordova 2012 IBM get involved into development late 2009 PhoneGap Build official launch late 2012
18. HOW PHONEGAP WORKS 18
25. 25 PhoneGap Build Process
26. PHONEGAP API'S 26
27. 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 — Notification — Storage (excl. Bada)
29. 29 API call example `navigator' is a global namespace for all API calls
30. HELLO WORLD 30
31. Including cordova.js
32. 32 Adding listener on "deviceready"event
33. 33 showAlert(); will display a native notification
34. 34 Show notification as soon as device is ready
35. PLUGINS 35
37. 37 HelloWorld.js
38. 38 PhoneGap Bridge exec call
39. 39 PhoneGap Bridge exec call Cordova.exec bridge CDV-HelloWorld.js
40. 40 CLI for plugin boilerplate
41. 41 CLI for plugin boilerplate
42. 42 iOS native code #import <Cordova/CDVPlugin.h> @interface HelloWorld : CDVPlugin @end #import "HelloWorld.h" @implementation HelloWorld @end HelloWorld.h HelloWorld.m Inheritance
43. 43 Adding methods #import <Cordova/CDVPlugin.h> @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
44. 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.
45. 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
46. 46 Adding plugin mapping to Cordova.plist
47. 47 Calling our plugin from JS
48. CONS & LIMITATIONS 48
49. — Fast changing inconsistent API — Lacks and inaccuracies in documentation — Some device specific API's are still unavailable for some OS — Dealing with cross-platform web development issues 49
50. PHONEGAP BUILD 50
51. 51 PhoneGap Build is a cloud based service built on the top of PhoneGap framework.
52. — PhoneGap Build is a cloud service — PhoneGap Build API can help in establishing CI — No need to have different environment OS and SDK's to build an application 52 PhoneGap Build Pros
53. THE FUTURE IS CLOSER THAN YOU THINK 53
54. Some API's are already accessible 54
55. 55 Device Specific API's accessibility: Accelerometer
56. Device Specific API's accessibility: File API (incl. camera uploads)
57. Average support is ~70%
58. 58 https://vimeo.com/55486684 Sencha Fastbook
59. QUESTIONS? 59
60. @witchfinderx 60
61. @witchfinderx 60