Tweet
Tweet

Slide 1

Slide 1 text

{ title: 'Wearable JavaScript', speaker: 'Dan Gallo' } @DanielJGallo

Slide 2

Slide 2 text

Technical Sales Engineer at Sencha Background in web app development speakerdeck.com/danielgallo @DanielJGallo Dan Gallo

Slide 3

Slide 3 text

Wearable JavaScript

Slide 4

Slide 4 text

So many different smart wearable devices

Slide 5

Slide 5 text

Watches

Slide 6

Slide 6 text

Fitness Bands

Slide 7

Slide 7 text

Glasses / Eyewear

Slide 8

Slide 8 text

Who here has a smart wearable device?

Slide 9

Slide 9 text

Who here is going to buy a smart wearable device within the next few months?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

So many different wearable devices. Many more being released to the market. How can we start to build apps?

Slide 12

Slide 12 text

JavaScript!

Slide 13

Slide 13 text

Smart Watches

Slide 14

Slide 14 text

Sample devices Samsung Gear S Tizen OS Apple Watch Watch OS Pebble Steel Pebble OS

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Operating modes Standalone – app runs solely on the watch Companion – app runs on phone, with a wearable widget

Slide 17

Slide 17 text

Tizen

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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)

Slide 20

Slide 20 text

Examples

Slide 21

Slide 21 text

function startHRCapture() { tizen.humanactivitymonitor.start("HRM", function(data) { console.log(data.heartRate); }); } function stopHRCapture() { tizen.humanactivitymonitor.stop("HRM"); } HeartRate.js   Heart Rate Sensor

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Screen.js   Screen brightness function setBrightness(level) { tizen.power.setScreenBrightness(level); } setBrightness(0.5); // 0 to 1, where 1 is brightest

Slide 24

Slide 24 text

Tizen Emulator

Slide 25

Slide 25 text

Tizen Emulator - Event Injector

Slide 26

Slide 26 text

Samsung Gear S

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Apple

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Apple Watch Apple Watch requires the presence of an iPhone to run third-party apps No built-in web browser or webview

Slide 36

Slide 36 text

But you could still build a Watch app and link it to your PhoneGap/Cordova app…

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

PhoneGap/Cordova plugins Diagram: https://github.com/leecrossley

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Pebble

Slide 49

Slide 49 text

Pebble Steel Operating modes: Companion Communications: Bluetooth 4.0 Interactions: Buttons Sensors: Accelerometer, Compass, Ambient Light

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

cloudpebble.net  

Slide 55

Slide 55 text

cloudpebble.net  

Slide 56

Slide 56 text

cloudpebble.net  

Slide 57

Slide 57 text

cloudpebble.net  

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

cloudpebble.net  

Slide 61

Slide 61 text

Smart Glasses

Slide 62

Slide 62 text

“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

Slide 63

Slide 63 text

Sample device Google Glass Android 4.4

Slide 64

Slide 64 text

Google Glass 640 x 360 pixels “equivalent of a 25 inch high definition screen from eight feet away”

Slide 65

Slide 65 text

Google Glass

Slide 66

Slide 66 text

Google Glass Operating modes: Standalone or Companion Communications: Wi-Fi, Bluetooth Interactions: Touchpad, Voice Sensors: Accelerometer, Gyroscope, Compass, Ambient Light

Slide 67

Slide 67 text

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/

Slide 68

Slide 68 text

vimeo.com/84073941  

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

In Summary…

Slide 71

Slide 71 text

In summary… It’s possible to build apps for wearable devices using web technologies

Slide 72

Slide 72 text

In summary… Wearable devices category is still a new and emerging market. What are the use cases?

Slide 73

Slide 73 text

In summary… Limited interface size is an issue. You need to carefully decide the level of functionality to offer your users

Slide 74

Slide 74 text

In summary… Platform-specific APIs and differing standards makes it difficult right now to make a universal app for all platforms

Slide 75

Slide 75 text

In summary… Varying levels of connectivity: Some devices have cellular data, others have Wi-Fi, and some require presence of a phone.

Slide 76

Slide 76 text

Developer Economics State of the Developer Nation Q3 2014 | VisionMobile “HTML5 is the most widely used technology at 42% of developers”

Slide 77

Slide 77 text

“The future of HTML5 is beyond the browser” Developer Economics State of the Developer Nation Q3 2014 | VisionMobile

Slide 78

Slide 78 text

Slides speakerdeck.com/danielgallo

Slide 79

Slide 79 text

Feedback Please let the O’Reilly team know whether you found this session interesting! All feedback appreciated J

Slide 80

Slide 80 text

Questions?

Slide 81

Slide 81 text

Thanks! @DanielJGallo

Slide 82

Slide 82 text

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/

Slide 83

Slide 83 text

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