accessing native apis from touch
DESCRIPTION
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.TRANSCRIPT
James Pearce@jamespearce
ACCESSING NATIVE APIS FROMSENCHA TOUCH
Wednesday, November 2, 11
Web apps arethe future
Wednesday, November 2, 11
Native apps arethe present
Wednesday, November 2, 11
Native Web
Cross-platform ✘ ✔
Linkable ✘ ✔
Discoverable ✔ ✘
Device APIs ✔ ✘
Wednesday, November 2, 11
Native Web Hybrid
Cross-platform ✘ ✔ ✔
Linkable ✘ ✔ ✔
Discoverable ✔ ✘ ✔
Device APIs ✔ ✘ ✔
Wednesday, November 2, 11
What is a hybrid app?
Wednesday, November 2, 11
Nativeness
Site
Nativeapps
Websites
Webapps
App
Wednesday, November 2, 11
Nativeness
Site
Nativeapps
Websites
Webapps
Hybridapps
App
Wednesday, November 2, 11
Workers & Parallel
Processing
File SystemsDatabases
App Caches
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont Video Audio Graphics
Cross-AppMessaging
Camera
Location
Contacts
SMS
Orientation
Gyro
HTTP
AJAX
Events
Sockets
SSL
Wednesday, November 2, 11
WebView
Workers & Parallel
Processing
File SystemsDatabases
App Caches
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont Video Audio Graphics
Cross-AppMessaging
Camera
Location
Contacts
SMS
Orientation
Gyro
HTTP
AJAX
Events
Sockets
SSL
Wednesday, November 2, 11
Workers & Parallel
Processing
File SystemsDatabases
App Caches
Cross-AppMessaging
Camera
Location
Contacts
SMS
Orientation
Gyro
Native Wrapper
WebView
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont Video Audio Graphics HTTP
AJAX
Events
Sockets
SSL
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Sencha TouchPackager
Edmund Leung, Product Manager
Wednesday, November 2, 11
Workers & Parallel
Processing
File SystemsDatabases
App Caches
Cross-AppMessaging
Camera
Location
Contacts
SMS
Orientation
Gyro
Native Wrapper
WebView
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont Video Audio Graphics HTTP
AJAX
Events
Sockets
SSL
Wednesday, November 2, 11
Native Wrapper
WebView
Workers & Parallel
Processing
File SystemsDatabases
App Caches
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont Video Audio Graphics
Cross-AppMessaging
Camera
Location
Contacts
SMS
Orientation
Gyro
HTTP
AJAX
Events
Sockets
SSL
Wednesday, November 2, 11
Device Access
Wednesday, November 2, 11
Media Capture (HTML)Battery statusContactsMessaging (SMS, MMS...)Network Information API
Media Capture (API) Application RegistrationCalendarFeature PermissionsSensor APIVibration APIMenu APIPermissions for APIsAudio Volume
BeepGallerySystems info and eventsTasks
Wednesday, November 2, 11
AccelerometerOrientationCameraDeviceStatusFilesystemMessagingGeolocationPIM ContactsCalendarTasksDeviceInteraction
APDU (SmartCard)BluetoothCryptoDLNAServer PushSensor Telephony
Wednesday, November 2, 11
Wednesday, November 2, 11
TelephonyMessagingContactsClockCameraFilesystemCalculatorDevice StatusSettingsAccelerometerMouse LockMaps
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Developer choice is limited by options
Wednesday, November 2, 11
Native Wrapper
Workers & Parallel
Processing
File SystemsDatabases
App Caches
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont Video Audio Graphics
Cross-AppMessaging
Camera
Location
Contacts
SMS
Orientation
Gyro
HTTP
AJAX
Events
Sockets
SSL
WebView
Wednesday, November 2, 11
PhoneGap
Wednesday, November 2, 11
Apache
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
AccelerometerTap into the device’s motion sensor.
CameraCapture a photo using the device's camera.
CaptureCapture media files using device's media capture applications.
CompassObtain the direction the device is pointing.
ConnectionQuickly check the network state, and cellular network information.
ContactsWork with the devices contact database.
DeviceGather device specific information.
EventsHook into native events through JavaScript.
FileHook into native file system through JavaScript.
GeolocationMake your application location aware.
MediaRecord and play back audio files.
NotificationVisual, audible, and tactile device notifications.
StorageHook into the device’s native storage options.
Wednesday, November 2, 11
Project Setup
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
PhoneGap.plist
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
AndroidManifest.xml
Wednesday, November 2, 11
Project Setup
Wednesday, November 2, 11
AccelerometerTap into the device’s motion sensor.
CameraCapture a photo using the device's camera.
CaptureCapture media files using device's media capture applications.
CompassObtain the direction the device is pointing.
ConnectionQuickly check the network state, and cellular network information.
ContactsWork with the devices contact database.
DeviceGather device specific information.
EventsHook into native events through JavaScript.
FileHook into native file system through JavaScript.
GeolocationMake your application location aware.
MediaRecord and play back audio files.
NotificationVisual, audible, and tactile device notifications.
StorageHook into the device’s native storage options.
Wednesday, November 2, 11
Camera
navigator.camera.getPicture(
function(imageData) { },
function (message) { },
{} //options
);
Wednesday, November 2, 11
navigator.contacts.create( {}).save();
navigator.contacts.find( contactFields, function(){}, function(){}, {});
Contacts
Wednesday, November 2, 11
Demo
Wednesday, November 2, 11
Plugins
AdPlugin/ApplicationPreferences/
AudioEncode/AudioRecord/
Badge/BarcodeScanner/BundleFileReader/
ChildBrowser/ClipboardPlugin/
DatePicker/EmailComposer/
FileUploader/GapSocket/
Globalization/HockeyApp/
InAppPurchaseManager/Keychain/
LocalNotification/Localizable/MapKitPlug/
NativeControls/NotificationEx/PayPalPlugin/
PowerManagement/PrintPlugin/
Prompt/SMSComposer/
ScreenShot/ShareKitPlugin/
SoundPlug/SplashScreen/
TestFlight/Torch/
VolumeSlider/
Wednesday, November 2, 11
Caveats
Wednesday, November 2, 11
Obfuscation != security
+ =
Wednesday, November 2, 11
Quirks
...Wednesday, November 2, 11
Androidphonegap.js
iOSphonegap.js ...
Wednesday, November 2, 11
Avoid start racedocument.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
Wouldn’t it begreat if...
Wednesday, November 2, 11
Further...
http://sencha.com/x/cy
http://sencha.com/x/de
BlackBerry WebWorks APIs3:50pm - 4:30pm
Wednesday, November 2, 11
THANKS
James Pearce@jamespearce
Wednesday, November 2, 11