Accessing Native APIs from Touch

James Pearce@jamespearce

ACCESSING NATIVE APIS FROMSENCHA TOUCH

Wednesday, November 2, 11

Web apps arethe future


Native apps arethe present


Native Web

Cross-platform ✘ ✔

Linkable ✘ ✔

Discoverable ✔ ✘

Device APIs ✔ ✘


Native Web Hybrid

Cross-platform ✘ ✔ ✔

Linkable ✘ ✔ ✔

Discoverable ✔ ✘ ✔

Device APIs ✔ ✘ ✔


What is a hybrid app?


Nativeness

Site

Nativeapps

Websites

Webapps

App


Nativeness

Site

Nativeapps

Websites

Webapps

Hybridapps

App


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

Workers & Parallel

Processing


App Caches

JavaScript

Semantic HTML



Cross-AppMessaging

Camera

Location

Contacts

SMS

Orientation

Gyro

HTTP

AJAX

Events

Sockets

SSL


Workers & Parallel

Processing


App Caches

Cross-AppMessaging

Camera

Location

Contacts

SMS

Orientation

Gyro

Native Wrapper

WebView

JavaScript

Semantic HTML


WebFont Video Audio Graphics HTTP

AJAX

Events

Sockets

SSL




Sencha TouchPackager

Edmund Leung, Product Manager


Workers & Parallel

Processing


App Caches

Cross-AppMessaging

Camera

Location

Contacts

SMS

Orientation

Gyro

Native Wrapper

WebView

JavaScript

Semantic HTML


WebFont Video Audio Graphics HTTP

AJAX

Events

Sockets

SSL


Native Wrapper

WebView

Workers & Parallel

Processing


App Caches

JavaScript

Semantic HTML



Cross-AppMessaging

Camera

Location

Contacts

SMS

Orientation

Gyro

HTTP

AJAX

Events

Sockets

SSL


Device Access


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


AccelerometerOrientationCameraDeviceStatusFilesystemMessagingGeolocationPIM ContactsCalendarTasksDeviceInteraction

APDU (SmartCard)BluetoothCryptoDLNAServer PushSensor Telephony



TelephonyMessagingContactsClockCameraFilesystemCalculatorDevice StatusSettingsAccelerometerMouse LockMaps




Developer choice is limited by options


Native Wrapper

Workers & Parallel

Processing


App Caches

JavaScript

Semantic HTML



Cross-AppMessaging

Camera

Location

Contacts

SMS

Orientation

Gyro

HTTP

AJAX

Events

Sockets

SSL

WebView


PhoneGap


Apache




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.


Project Setup





PhoneGap.plist




AndroidManifest.xml


Project Setup


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.


Camera

navigator.camera.getPicture(

function(imageData) { },

function (message) { },

{} //options

);


navigator.contacts.create( {}).save();

navigator.contacts.find( contactFields, function(){}, function(){}, {});

Contacts


Demo


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/


Caveats


Obfuscation != security

+ =


Quirks

...Wednesday, November 2, 11

Androidphonegap.js

iOSphonegap.js ...


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;} ... }});


Wouldn’t it begreat if...


Further...

http://sencha.com/x/cy

http://sencha.com/x/de

BlackBerry WebWorks APIs3:50pm - 4:30pm


THANKS

James Pearce@jamespearce


Technology

Accessing Native APIs from Touch