Wearable JavaScript

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

Transcript

1. { title: 'Wearable JavaScript', speaker: 'Dan Gallo' } @DanielJGallo
2. Technical Sales Engineer at Sencha Background in web app development speakerdeck.com/danielgallo @DanielJGallo Dan Gallo
3. Wearable JavaScript
4. So many different smart wearable devices
5. Watches
6. Fitness Bands
7. Glasses / Eyewear
8. Who here has a smart wearable device?
9. Who here is going to buy a smart wearable device within the next few months?
10. 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
11. So many different wearable devices. Many more being released to the market. How can we start to build apps?
12. JavaScript!
13. Smart Watches
14. Sample devices Samsung Gear S Tizen OS Apple Watch Watch OS Pebble Steel Pebble OS
15. 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
16. Operating modes Standalone – app runs solely on the watch Companion – app runs on phone, with a wearable widget
17. Tizen
18. 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
19. 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)
20. Examples
21. function startHRCapture() { tizen.humanactivitymonitor.start("HRM", function(data) { console.log(data.heartRate); }); } function stopHRCapture() { tizen.humanactivitymonitor.stop("HRM"); } HeartRate.js   Heart Rate Sensor
22. 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); }
23. Screen.js   Screen brightness function setBrightness(level) { tizen.power.setScreenBrightness(level); } setBrightness(0.5); // 0 to 1, where 1 is brightest
24. Tizen Emulator
25. Tizen Emulator - Event Injector
26. Samsung Gear S
27. 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
28. 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
32. 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
33. Apple
34. 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
35. Apple Watch Apple Watch requires the presence of an iPhone to run third-party apps No built-in web browser or webview
36. But you could still build a Watch app and link it to your PhoneGap/Cordova app…
37. 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
38. PhoneGap/Cordova plugins Diagram: https://github.com/leecrossley
39. 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
40. 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
43. 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
46. 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'); }
48. Pebble
49. Pebble Steel Operating modes: Companion Communications: Bluetooth 4.0 Interactions: Buttons Sensors: Accelerometer, Compass, Ambient Light
50. 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
51. 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
52. 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
53. 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
54. cloudpebble.net  
55. cloudpebble.net  
56. cloudpebble.net  
57. cloudpebble.net  
59. 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)); });
60. cloudpebble.net  
61. Smart Glasses
62. “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
63. Sample device Google Glass Android 4.4
64. Google Glass 640 x 360 pixels “equivalent of a 25 inch high definition screen from eight feet away”
65. Google Glass
66. Google Glass Operating modes: Standalone or Companion Communications: Wi-Fi, Bluetooth Interactions: Touchpad, Voice Sensors: Accelerometer, Gyroscope, Compass, Ambient Light
67. 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/
68. vimeo.com/84073941  
69. 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
70. In Summary…
71. In summary… It’s possible to build apps for wearable devices using web technologies
72. In summary… Wearable devices category is still a new and emerging market. What are the use cases?
73. In summary… Limited interface size is an issue. You need to carefully decide the level of functionality to offer your users
74. In summary… Platform-specific APIs and differing standards makes it difficult right now to make a universal app for all platforms
75. In summary… Varying levels of connectivity: Some devices have cellular data, others have Wi-Fi, and some require presence of a phone.
76. Developer Economics State of the Developer Nation Q3 2014 | VisionMobile “HTML5 is the most widely used technology at 42% of developers”
77. “The future of HTML5 is beyond the browser” Developer Economics State of the Developer Nation Q3 2014 | VisionMobile
78. Slides speakerdeck.com/danielgallo
79. Feedback Please let the O’Reilly team know whether you found this session interesting! All feedback appreciated J
80. Questions?
81. Thanks! @DanielJGallo
82. 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/
83. 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