Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wearable JavaScript

Wearable JavaScript

Delivered at Fluent Conference in San Francisco, April 21st 2015.

Daniel Gallo

April 21, 2015
Tweet

More Decks by Daniel Gallo

Other Decks in Technology

Transcript

  1. Technical Sales Engineer at Sencha Background in web app development

    speakerdeck.com/danielgallo @DanielJGallo Dan Gallo
  2. Smart wearable devices - statistics Sold around 27 million units

    in 2014 Likely to increase to 127 million units by 2017 Device revenues to exceed $53 billion in 2019 Source: Juniper Research, Smart Wearable Devices, 2014-2019
  3. So many different wearable devices. Many more being released to

    the market. How can we start to build apps?
  4. Samsung Gear S 51mm screen 360 x 480 pixels Apple

    Watch 39mm screen 312 x 390 pixels Pebble Steel 32mm e-paper screen 144 x 168 pixels
  5. Operating modes Standalone – app runs solely on the watch

    Companion – app runs on phone, with a wearable widget
  6. Tizen web apps Standards based JavaScript APIs Set of Tizen-specific

    JavaScript APIs, similar capabilities to what you would get with PhoneGap plugins Local, session, IndexedDB, WebSQL data storage, and file system API
  7. Tizen web APIs Apps can be granted access to a

    wide range of APIs through privileges Alarms App info Content (get images, videos, music) Download files Filesystem Message port (comm. with other apps) Media key (capture when user has pressed a media button) Sound (control volume level) Power (turn screen on/off, change screen brightness) Human Activity Monitor Sensor System information (device capabilities, battery level, connection info – Wi-Fi/ cellular network, IP address etc, CPU load level, locale)
  8. function startHRCapture() { tizen.humanactivitymonitor.start("HRM", function(data) { console.log(data.heartRate); }); } function

    stopHRCapture() { tizen.humanactivitymonitor.stop("HRM"); } HeartRate.js   Heart Rate Sensor
  9. Alarm.js   Alarms function addAlarm() { var alarm = new

    tizen.AlarmAbsolute(new Date(2015, 10, 4, 8, 0)), appControl = new tizen.ApplicationControl("http://tizen.org/ appcontrol/operation/view"), appId = tizen.application.getCurrentApplication().appInfo.id; tizen.alarm.add(alarm, appId, appControl); console.log("Alarm added with id: " + alarm.id); }
  10. Samsung Gear S Operating modes: Standalone or Companion Communications: 3G/2G,

    Wi-Fi, Bluetooth 4.0 Interactions: Voice, touch screen, QWERTY keyboard Sensors: Accelerometer, Gyroscope, Compass, Heart Rate, Ambient Light, UV, Barometer
  11. Samsung Gear S Web apps can be deployed as widget

    packages (.wgt) A full web browser (Opera) is available for use on the watch Although not officially supported, Sencha Touch apps appear to work fine on the device
  12. Getting started - Tizen Download the Tizen Wearable SDK Open

    the Tizen IDE (based on Eclipse) and create a new project Specify required privileges and features, allowing use of APIs Use the Emulator to test out the app
  13. Apple Watch Operating modes: Companion Communications: Wi-Fi, Bluetooth 4.0, NFC

    Interactions: Voice, touch screen, digital crown Sensors: Force Touch, Accelerometer, Gyroscope, Heart Rate, Barometer
  14. Apple Watch Apple Watch requires the presence of an iPhone

    to run third-party apps No built-in web browser or webview
  15. But you could still build a Watch app and link

    it to your PhoneGap/Cordova app…
  16. PhoneGap/Cordova plugins Plugins can be used to facilitate communication between

    an iPhone app, and an app running on Apple Watch Requires a native app on the Watch Plugins: •  https://github.com/20steps/cordova-plugin-watch •  https://github.com/leecrossley/cordova-plugin-apple-watch
  17. Apple – Getting started Create your PhoneGap enabled project Add

    a PhoneGap Watch plugin Load in to Xcode Create a WatchKit extension Create a WatchKit app
  18. Apple – Getting started Use the iOS Simulator to test

    your app In the latest version, you can show an Apple Watch as an external display to the phone
  19. WatchExample.js   var Watch = window.cordova.plugins.Watch; Watch.initialize('group.com.danielgallo.samplewatchapp', 'wormhole'); Watch.listen('responseChannel', function(message)

    { var el = document.getElementById('received'); el.innerText = message; }); setInterval(function () { var message = parseInt(Math.random() * 100).toString(); Watch.sendMessage(message, 'testChannel'); var el = document.getElementById('send'); el.innerText = message; }, 1000); Based on example from: https://github.com/20steps/cordova-plugin-watch-example
  20. WatchExample.js   Watch = window.cordova.plugins.Watch; Watch.initialize('group.com.danielgallo.samplewatchapp', 'wormhole'); function showOnMap() {

    var message = { name: "Customer: Robert J.", latitude: 37.751664, longitude: -122.44707 }; Watch.sendMessage(message, 'testChannel'); }
  21. Pebble app development Developers have two choices for JavaScript app

    dev on Pebble: PebbleKit JS – framework that extends a C app Pebble.js – app is written entirely in JavaScript
  22. PebbleKit JS Framework that extends a C app PebbleKit JS

    is used to add a JavaScript component to a native app JavaScript logic runs on the phone paired with the watch
  23. Pebble.js Built on top of standard Pebble C SDK and

    PebbleKit JS C app runs on the watch and interacts with the phone app via Bluetooth for every user interaction Whole app written in JavaScript Provides objects and functions to build the UI and then remote-controls the C app to display them Pebble.js currently in beta
  24. Pebble - Getting started Can download and use the Pebble

    SDK CloudPebble can be used for online app development and debugging Apps and watch faces can be created
  25. PebbleExample.js   var UI = require('ui'); var Accel = require('ui/accel');

    Accel.init(); var main = new UI.Card({ title: 'Pebble.js', body: 'Press any button.' }); main.show(); main.on('accelData', function(e) { console.log('Accel data: ' + JSON.stringify(e.accels)); });
  26. “At a global level the volume of early adopters in

    2014 may well number in the millions, with demand increasing to the tens of millions by 2016 and surpassing 100 million by 2020” Deloitte, on the subject of Smart Glasses Deloitte TMT Predictions, 2014
  27. Google Glass 640 x 360 pixels “equivalent of a 25

    inch high definition screen from eight feet away”
  28. Google Glass Operating modes: Standalone or Companion Communications: Wi-Fi, Bluetooth

    Interactions: Touchpad, Voice Sensors: Accelerometer, Gyroscope, Compass, Ambient Light
  29. Google Glass - Getting started Google Glass runs Android 4.4

    Cordova apps can therefore be deployed to the device Ross Gerbasi has done some detailed testing of Google Glass running web apps: http://sencha.com/blog/developing-for-google-glass-with-sencha-touch/
  30. Google Glass - Getting started Cordova plugin: https://github.com/aphex/cordova-glass •  Enables

    gesture and touch event support using built-in touchpad •  Allows apps to use voice triggers
  31. In summary… Wearable devices category is still a new and

    emerging market. What are the use cases?
  32. In summary… Limited interface size is an issue. You need

    to carefully decide the level of functionality to offer your users
  33. In summary… Platform-specific APIs and differing standards makes it difficult

    right now to make a universal app for all platforms
  34. In summary… Varying levels of connectivity: Some devices have cellular

    data, others have Wi-Fi, and some require presence of a phone.
  35. Developer Economics State of the Developer Nation Q3 2014 |

    VisionMobile “HTML5 is the most widely used technology at 42% of developers”
  36. “The future of HTML5 is beyond the browser” Developer Economics

    State of the Developer Nation Q3 2014 | VisionMobile
  37. Feedback Please let the O’Reilly team know whether you found

    this session interesting! All feedback appreciated J
  38. Resources Apple Watch apps – using maps: https://trymakedo.wordpress.com/tag/wkinterfacemap Pebble Developer

    resources: http://developer.getpebble.com Ross Gerbasi – web apps on Google Glass: https://github.com/aphex/cordova-glass http://www.sencha.com/blog/developing-for-google-glass-with- sencha-touch/
  39. Resources Tizen – Wearable APIs: https://developer.tizen.org/dev-guide/2.3.0/org.tizen.web.apireference/ html/device_api/wearable/index.html Juniper Research –

    Smart Wearable Devices: http://www.juniperresearch.com/press/press-releases/smart- wearables-market-to-generate-$53bn-hardware