ACCESSING NATIVE APIS FROM          SENCHA TOUCH                            James Pearce                            @james...
Web apps are                             the futureWednesday, November 2, 11
Native apps are                             the presentWednesday, November 2, 11
Native   Web                Cross-platform       ✘      ✔                        Linkable     ✘      ✔                  Di...
Native   Web   Hybrid                Cross-platform       ✘      ✔       ✔                        Linkable     ✘      ✔   ...
What is a hybrid app?Wednesday, November 2, 11
Web           Site                            sites                                    Web                                ...
Web           Site                            sites                                    Web                                ...
Camera         WebFont        Video    Audio    Graphics                                                                  ...
WebView             Camera         WebFont        Video    Audio    Graphics                                              ...
Native Wrapper                                                      WebView             Camera         WebFont        Vide...
Wednesday, November 2, 11
Wednesday, November 2, 11
Sencha Touch                              Packager                               Edmund Leung,                            ...
Native Wrapper                                                      WebView             Camera         WebFont        Vide...
Native Wrapper                                                      WebView             Camera         WebFont        Vide...
Device AccessWednesday, November 2, 11
Media Capture (HTML)      Media Capture (API)               Battery status            Application Registration            ...
Accelerometer       APDU (SmartCard)               Orientation         Bluetooth               Camera              Crypto ...
Wednesday, November 2, 11
Telephony                            Messaging                            Contacts                            Clock       ...
Wednesday, November 2, 11
Wednesday, November 2, 11
Developer choice is                            limited by optionsWednesday, November 2, 11
Native Wrapper                                                      WebView             Camera         WebFont        Vide...
PhoneGapWednesday, November 2, 11
ApacheWednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Accelerometer                                  Events              Tap into the device’s motion sensor.           Hook int...
Project SetupWednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
PhoneGap.plistWednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
AndroidManifest.xmlWednesday, November 2, 11
Project SetupWednesday, November 2, 11
Accelerometer                                  Events              Tap into the device’s motion sensor.           Hook int...
Camera                            navigator.camera.getPicture(                                 function(imageData) {      ...
Contacts                            navigator.contacts.create(                              {}                            ...
DemoWednesday, November 2, 11
AdPlugin/               LocalNotification/                    ApplicationPreferences/           Localizable/               ...
CaveatsWednesday, November 2, 11
Obfuscation != security                     +      =Wednesday, November 2, 11
Quirks                              ...Wednesday, November 2, 11
Android        iOS                            phonegap.js   phonegap.js   ...Wednesday, November 2, 11
Avoid start race               document.addEventListener(                  "deviceready", app.mainLaunch, false           ...
Wouldn’t it be                             great if...Wednesday, November 2, 11
Further...                             http://sencha.com/x/cy                             http://sencha.com/x/de          ...
THANKS                              James Pearce                              @jamespearceWednesday, November 2, 11
Upcoming SlideShare
Loading in …5
×

Accessing Native APIs from Touch

9,875 views

Published on

Learn how to use hybrid technologies like PhoneGap and NimbleKit to hook into native device capabilities, and then distribute your mobile applications into app stores and marketplaces.

Aditya Bansod is Sencha’s senior director of product management and is responsible for the product planning and strategy for Sencha’s product lines. Prior to Sencha, Aditya held various senior product management roles at Adobe and Microsoft, focusing on developers and media in the mobile and consumer electronics space.

James Pearce heads developer relations at Sencha. He is a technologist, writer, developer and practitioner, who has been working with the mobile web for over a decade. Previously he was the CTO at dotMobi and has a background in mobile startups, telecoms infrastructure and management consultancy. James is the creator of tinySrc, the WordPress Mobile Pack, WhitherApps, modernizr-server and confess.js, and has written books on mobile web development for both Wiley and Wrox.

Published in: Technology, Business
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
9,875
On SlideShare
0
From Embeds
0
Number of Embeds
1,184
Actions
Shares
0
Downloads
152
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Accessing Native APIs from Touch

  1. 1. ACCESSING NATIVE APIS FROM SENCHA TOUCH James Pearce @jamespearceWednesday, November 2, 11
  2. 2. Web apps are the futureWednesday, November 2, 11
  3. 3. Native apps are the presentWednesday, November 2, 11
  4. 4. Native Web Cross-platform ✘ ✔ Linkable ✘ ✔ Discoverable ✔ ✘ Device APIs ✔ ✘Wednesday, November 2, 11
  5. 5. Native Web Hybrid Cross-platform ✘ ✔ ✔ Linkable ✘ ✔ ✔ Discoverable ✔ ✘ ✔ Device APIs ✔ ✘ ✔Wednesday, November 2, 11
  6. 6. What is a hybrid app?Wednesday, November 2, 11
  7. 7. Web Site sites Web apps Native apps App NativenessWednesday, November 2, 11
  8. 8. Web Site sites Web apps Hybrid apps Native apps App NativenessWednesday, November 2, 11
  9. 9. Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches ProcessingWednesday, November 2, 11
  10. 10. WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches ProcessingWednesday, November 2, 11
  11. 11. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches ProcessingWednesday, November 2, 11
  12. 12. Wednesday, November 2, 11
  13. 13. Wednesday, November 2, 11
  14. 14. Sencha Touch Packager Edmund Leung, Product ManagerWednesday, November 2, 11
  15. 15. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches ProcessingWednesday, November 2, 11
  16. 16. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches ProcessingWednesday, November 2, 11
  17. 17. Device AccessWednesday, November 2, 11
  18. 18. Media Capture (HTML) Media Capture (API) Battery status Application Registration Contacts Calendar Messaging (SMS, MMS...) Feature Permissions Network Information API Sensor API Vibration API Menu API Audio Volume Permissions for APIs Beep Gallery Systems info and events TasksWednesday, November 2, 11
  19. 19. Accelerometer APDU (SmartCard) Orientation Bluetooth Camera Crypto DeviceStatus DLNA Filesystem Server Push Messaging Sensor Geolocation Telephony PIM  Contacts Calendar Tasks DeviceInteractionWednesday, November 2, 11
  20. 20. Wednesday, November 2, 11
  21. 21. Telephony Messaging Contacts Clock Camera Filesystem Calculator Device Status Settings Accelerometer Mouse Lock MapsWednesday, November 2, 11
  22. 22. Wednesday, November 2, 11
  23. 23. Wednesday, November 2, 11
  24. 24. Developer choice is limited by optionsWednesday, November 2, 11
  25. 25. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches ProcessingWednesday, November 2, 11
  26. 26. PhoneGapWednesday, November 2, 11
  27. 27. ApacheWednesday, November 2, 11
  28. 28. Wednesday, November 2, 11
  29. 29. Wednesday, November 2, 11
  30. 30. Accelerometer Events Tap into the device’s motion sensor. Hook into native events through JavaScript. Camera File Capture a photo using the devices camera. Hook into native file system through JavaScript. Capture Capture media files using devices media Geolocation capture applications. Make your application location aware. Compass Media Obtain the direction the device is pointing. Record and play back audio files. Connection Notification Quickly check the network state, and Visual, audible, and tactile device cellular network information. notifications. Contacts Storage Work with the devices contact database. Hook into the device’s native storage options. Device Gather device specific information.Wednesday, November 2, 11
  31. 31. Project SetupWednesday, November 2, 11
  32. 32. Wednesday, November 2, 11
  33. 33. Wednesday, November 2, 11
  34. 34. Wednesday, November 2, 11
  35. 35. PhoneGap.plistWednesday, November 2, 11
  36. 36. Wednesday, November 2, 11
  37. 37. Wednesday, November 2, 11
  38. 38. AndroidManifest.xmlWednesday, November 2, 11
  39. 39. Project SetupWednesday, November 2, 11
  40. 40. Accelerometer Events Tap into the device’s motion sensor. Hook into native events through JavaScript. Camera File Capture a photo using the devices camera. Hook into native file system through JavaScript. Capture Capture media files using devices media Geolocation capture applications. Make your application location aware. Compass Media Obtain the direction the device is pointing. Record and play back audio files. Connection Notification Quickly check the network state, and Visual, audible, and tactile device cellular network information. notifications. Contacts Storage Work with the devices contact database. Hook into the device’s native storage options. Device Gather device specific information.Wednesday, November 2, 11
  41. 41. Camera navigator.camera.getPicture( function(imageData) { }, function (message) { }, {} //options );Wednesday, November 2, 11
  42. 42. Contacts navigator.contacts.create( {} ).save(); navigator.contacts.find( contactFields, function(){}, function(){}, {} );Wednesday, November 2, 11
  43. 43. DemoWednesday, November 2, 11
  44. 44. AdPlugin/ LocalNotification/ ApplicationPreferences/ Localizable/ AudioEncode/ MapKitPlug/ AudioRecord/ NativeControls/ Badge/ NotificationEx/ BarcodeScanner/ PayPalPlugin/ BundleFileReader/ PowerManagement/ ChildBrowser/ PrintPlugin/ ClipboardPlugin/ DatePicker/ Plugins Prompt/ SMSComposer/ EmailComposer/ ScreenShot/ FileUploader/ ShareKitPlugin/ GapSocket/ SoundPlug/ Globalization/ SplashScreen/ HockeyApp/ TestFlight/ InAppPurchaseManager/ Torch/ Keychain/ VolumeSlider/Wednesday, November 2, 11
  45. 45. CaveatsWednesday, November 2, 11
  46. 46. Obfuscation != security + =Wednesday, November 2, 11
  47. 47. Quirks ...Wednesday, November 2, 11
  48. 48. Android iOS phonegap.js phonegap.js ...Wednesday, November 2, 11
  49. 49. Avoid start race document.addEventListener( "deviceready", app.mainLaunch, false ); new Ext.Application({ launch: function() { this.launched = true; this.mainLaunch(); }, mainLaunch: function() { if (!device || !this.launched) {return;} ... } });Wednesday, November 2, 11
  50. 50. Wouldn’t it be great if...Wednesday, November 2, 11
  51. 51. Further... http://sencha.com/x/cy http://sencha.com/x/de BlackBerry WebWorks APIs 3:50pm - 4:30pmWednesday, November 2, 11
  52. 52. THANKS James Pearce @jamespearceWednesday, November 2, 11

×