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.

1. ACCESSING NATIVE APIS FROM
SENCHA TOUCH
James Pearce
@jamespearce
Wednesday, November 2, 11

2. Web apps are
the future
Wednesday, November 2, 11

3. Native apps are
the present
Wednesday, November 2, 11

4. Native Web
Cross-platform ✘ ✔
Linkable ✘ ✔
Discoverable ✔ ✘
Device APIs ✔ ✘
Wednesday, November 2, 11

5. Native Web Hybrid
Cross-platform ✘ ✔ ✔
Linkable ✘ ✔ ✔
Discoverable ✔ ✘ ✔
Device APIs ✔ ✘ ✔
Wednesday, November 2, 11

6. What is a hybrid app?
Wednesday, November 2, 11

7. Web
Site
sites
Web
apps
Native
apps
App
Nativeness
Wednesday, November 2, 11

8. Web
Site
sites
Web
apps
Hybrid
apps
Native
apps
App
Nativeness
Wednesday, November 2, 11

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 Processing
Wednesday, November 2, 11

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 Processing
Wednesday, November 2, 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 Processing
Wednesday, November 2, 11

12. Wednesday, November 2, 11

13. Wednesday, November 2, 11

14. Sencha Touch
Packager
Edmund Leung,
Product Manager
Wednesday, November 2, 11

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 Processing
Wednesday, November 2, 11

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 Processing
Wednesday, November 2, 11

17. Device Access
Wednesday, November 2, 11

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
Tasks
Wednesday, November 2, 11

19. Accelerometer APDU (SmartCard)
Orientation Bluetooth
Camera Crypto
DeviceStatus DLNA
Filesystem Server Push
Messaging Sensor
Geolocation Telephony
PIM
Contacts
Calendar
Tasks
DeviceInteraction
Wednesday, November 2, 11

20. Wednesday, November 2, 11

21. Telephony
Messaging
Contacts
Clock
Camera
Filesystem
Calculator
Device Status
Settings
Accelerometer
Mouse Lock
Maps
Wednesday, November 2, 11

22. Wednesday, November 2, 11

23. Wednesday, November 2, 11

24. Developer choice is
limited by options
Wednesday, November 2, 11

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 Processing
Wednesday, November 2, 11

26. PhoneGap
Wednesday, November 2, 11

27. Apache
Wednesday, November 2, 11

28. Wednesday, November 2, 11

29. Wednesday, November 2, 11

30. Accelerometer Events
Tap into the device’s motion sensor. Hook into native events through JavaScript.
Camera File
Capture a photo using the device's camera. Hook into native file system through
JavaScript.
Capture
Capture media files using device's 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. Project Setup
Wednesday, November 2, 11

32. Wednesday, November 2, 11

33. Wednesday, November 2, 11

34. Wednesday, November 2, 11

35. PhoneGap.plist
Wednesday, November 2, 11

36. Wednesday, November 2, 11

37. Wednesday, November 2, 11

38. AndroidManifest.xml
Wednesday, November 2, 11

39. Project Setup
Wednesday, November 2, 11

40. Accelerometer Events
Tap into the device’s motion sensor. Hook into native events through JavaScript.
Camera File
Capture a photo using the device's camera. Hook into native file system through
JavaScript.
Capture
Capture media files using device's 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. Camera
navigator.camera.getPicture(
function(imageData) {
},
function (message) {
},
{} //options
);
Wednesday, November 2, 11

42. Contacts
navigator.contacts.create(
{}
).save();
navigator.contacts.find(
contactFields,
function(){},
function(){},
{}
);
Wednesday, November 2, 11

43. Demo
Wednesday, November 2, 11

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. Caveats
Wednesday, November 2, 11

46. Obfuscation != security
+ =
Wednesday, November 2, 11

47. Quirks
...
Wednesday, November 2, 11

48. Android iOS
phonegap.js phonegap.js ...
Wednesday, November 2, 11

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. Wouldn’t it be
great if...
Wednesday, November 2, 11

51. Further...
http://sencha.com/x/cy
http://sencha.com/x/de
BlackBerry WebWorks APIs
3:50pm - 4:30pm
Wednesday, November 2, 11

52. THANKS
James Pearce
@jamespearce
Wednesday, November 2, 11