Date post: | 07-Nov-2014 |
Category: |
Technology |
Upload: | sencha |
View: | 9,745 times |
Download: | 0 times |
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