PhoneGap Plugins - Meetup Paris @AdobeFrance

Speaker : Olivier Louvignes
Meetup : http://www.meetup.com/PhoneGap-Paris/events/86655892/

Transcript

1. PHONEGAP PLUGINS PHONEGAP MEETUP PARIS 2012/11/06
2. github.com/mgcrea @olouv Olivier Louvignes PHONEGAP PLUGINS MEETUP PARIS 2012/11/06 freelance > developer @carlipa > co-founder/cto @beelink olouv.com
3. CORDOVA BRIDGE github.com/mgcrea/cordova-actionsheet Objective-C, Java, etc. Native code Javascript WebView
4. CORDOVA PLUGIN HELLO WORLD IOS #meetup #phonegap #paris HelloWorld.js
5. CORDOVA PLUGIN HELLO WORLD IOS Cordova.exec bridge success callback error callback className methodName arguments
6. CORDOVA PLUGIN HELLO WORLD IOS Cordova.exec bridge success callback error callback className methodName arguments CDV-HelloWorld.js
7. CORDOVA PLUGIN HELLO WORLD IOS • Start a plugin with the CLI!
8. CORDOVA PLUGIN HELLO WORLD IOS github.com/mgcrea/cordova-actionsheet
9. CORDOVA PLUGIN HELLO WORLD IOS #import "HelloWorld.h" @implementation HelloWorld } @end #import <Cordova/CDVPlugin.h> @interface HelloWorld : CDVPlugin @end HelloWorld.h HelloWorld.m inheritance
10. CORDOVA PLUGIN HELLO WORLD IOS #import "HelloWorld.h" @implementation HelloWorld - (void)add:(CDVInvokedUrlCommand*)command { } @end #import <Cordova/CDVPlugin.h> @interface HelloWorld : CDVPlugin - (void)add:(CDVInvokedUrlCommand*)command; @end HelloWorld.h HelloWorld.m instance method instance method
11. CORDOVA PLUGIN HELLO WORLD IOS #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 #import <Cordova/CDVPlugin.h> @interface HelloWorld : CDVPlugin - (void)add:(CDVInvokedUrlCommand*)command; @end HelloWorld.h HelloWorld.m retrieve arguments
12. CORDOVA PLUGIN HELLO WORLD IOS #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 #import <Cordova/CDVPlugin.h> @interface HelloWorld : CDVPlugin - (void)add:(CDVInvokedUrlCommand*)command; @end HelloWorld.h HelloWorld.m send back result
13. CORDOVA PLUGIN HELLO WORLD IOS app.js from default template - direct bridge call • wait for the ‘‘deviceready’’ event
14. CORDOVA PLUGIN HELLO WORLD IOS Add the plugin mapping in Cordova.plist
15. CORDOVA PLUGINS KEY INSIGHTS • No hard limit on what you can do: PhoneGap >= Native • PhoneGap plugins are very easy to both write & use • Great way to discover & learn native languages
16. PHONEGAP PLUGIN BADGE PLUGIN IOS #import "BadgePlugin.h" @implementation BadgePlugin - (void)setApplicationIconBadgeNumber:(CDVInvokedUrlCommand *)command { int badge = [[command.arguments objectAtIndex:0] intValue]; [[UIApplication sharedApplication] setApplicationIconBadgeNumber:badge]; ! CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsInt:1]; ! [self writeJavascript: [pluginResult toSuccessCallbackString:command.callbackId]]; } @end #import <Cordova/CDVPlugin.h> @interface BadgePlugin : CDVPlugin - (void)setApplicationIconBadgeNumber:(CDVInvokedUrlCommand*)command; @end BadgePlugin.h BadgePlugin.m
17. PHONEGAP PLUGIN BADGE PLUGIN IOS BadgePlugin.js - Javascript custom interface • Useful to describe the interface & set defaults
18. CDV-ACTIONSHEET USER INTERFACE PLUGIN • Native UI : UIActionSheet • 75l. Objective-C / 35l. JavaScript github.com/mgcrea/cordova-actionsheet
19. CDV-ACTIONSHEET INTERFACE PLUGIN
20. CDV-MESSAGEBOX USER INTERFACE PLUGIN • Native UI : UIAlertView • 85l. Objective-C / 70l. JavaScript github.com/mgcrea/cordova-messagebox
21. CDV-MESSAGEBOX INTERFACE PLUGIN
22. CDV-PICKERVIEW USER INTERFACE PLUGIN • Native UI : UIPickerView • complex iPad implementation • 400l. Objective-C / 100l. Javascript github.com/mgcrea/cordova-pickerview
23. CDV-PICKERVIEW INTERFACE PLUGIN
24. CDV-FACEBOOK-CONNECT SOCIAL PLUGIN • Bridge : FacebookSDK • iOS&Android • SSO support - 100% native • 300l. Objective-C / 400l. Java / 100l. Javascript github.com/mgcrea/cordova-facebook-connect
25. CDV-FACEBOOK-CONNECT SETUP STEPS 1. drag ‘src/ios’ folder to XCode «Plugins» folder, add as a group 2. add the javascript interface «www/FacebookConnect.js» to your index.html 3. add new entry with key to «Plugins» in «Cordova.plist» 4. extra : add «-lsqlite3.0» to «other linker flags» in the «build settings» tab 5. extra : add «Social.framework, Accounts.framework and AdSupport.framework» to «link binary with libraries» in the «build phases» tab 6. extra : update the app configuration .plist following the facebook guide : https:// developers.facebook.com/docs/getting-started/getting-started-with-the-ios-sdk/#project basic steps
26. CDV-FACEBOOK-CONNECT JAVASCRIPT INTERFACE
27. • SecureUDID - Alternative to deprecated UDID by crashlytics • ProgressHUD - Native visual progressHUD • PushNotification - Apple push notifications support • AuthorizationStatus - iOS6 contacts authorization • Google Analytics - Google analytics for Cordova CORDOVA PLUGINS OTHER PLUGINS
28. SENCHA TOUCH 2 PROGRESSIVE ENHANCEMENT Custom override to provide native MessageBox functionality
29. SENCHA TOUCH 2 PERSONAL FEEDBACK good •All-round framework (components, transitions, styles) •Great ListView implementation & cross-device support •Powerful class system (inheritance, mixins, overrides, etc.) •Good community, available support (premium) bad •Several regressions at each release (either DP/RC/Stable). •Performance is not as good as Sencha Touch 1. •Quite bloated (dom structure).
30. ST2+PHONEGAP EX: WIMI • retina-ready • css-powered
31. ST2+PHONEGAP EX: BEELINK • contacts api • retina-ready • css-powered
32. IOS PERFORMANCE ST2 COMPARATIVE CHART iPhone 2G iPhone 3G iPhone 3GS iPhone 4 iPhone 4S iPhone 5 bad bad correct good v. good v. good 2007 2008 2009 2010 2011 2012 year
33. IOS PERFORMANCE ST2 COMPARATIVE CHART iPhone 2G iPhone 3G iPhone 3GS iPhone 4 iPhone 4S iPhone 5 bad bad correct good v. good v. good 2007 2008 2009 2010 2011 2012 • Xcode 4.5 dropped armv6 support! year
34. ANDROID PERFORMANCE ST2 COMPARATIVE CHART 2.2 Froyo >2.3.3 Ginger 4.0 ICS 4.1 JellyBean bad correct bad correct 2010 2011 fin-2011 2012 3% 25% 55% 15% good* market share year
35. REMOTE INSPECTOR IOS6 GREAT NEWS
36. error occured: [unknown filename]:[unknown lineno]: [unknown message] REMOTE INSPECTOR IOS6 GREAT NEWS
37. • Package management for PhoneGap plugins (NodeJS like) • Chromium embedded to fix Android performance • Democratization of unit & e2e testing on mobile CONCLUSION MY WISH LIST
38. THANK YOU github.com/mgcrea @olouv Olivier Louvignes olouv.com