Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Let's Get Physical

162 views

Published on

Did you know that your web sites can now talk to actual bluetooth devices around it? With new initiatives like the Physical Web and new APIs like Web Bluetooth, it’s now easier than ever to interact with hardware using nothing but Web technologies. In this talk, you will learn how to broadcast URLs to nearby devices and how to control hardware via bluetooth. All of this using plain old vanilla Javascript.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Let's Get Physical

  1. 1. www.spiria.com Let’s Get Physical Presented By JOEL LORD JS Remote Conf March 15th, 2017
  2. 2. www.spiria.com Let’s Get Physical Presented By JOEL LORD JS Remote Conf March 15th, 2017
  3. 3. @joel__lord #JSRemoteConf JOEL LORD Aboot me, eh? • Javascript Junkie • Tinkerer • Technology enthusiast
  4. 4. @joel__lord #JSRemoteConf Agenda • What is Bluetooth • The Physical Web • Web Bluetooth API • Demos, code and lots of fun!
  5. 5. @joel__lord #JSRemoteConf Agenda • What is Bluetooth • The Physical Web • Web Bluetooth API • Demos, code and lots of fun!
  6. 6. What’s the fuss about? BLUETOOTH, BLE, PHYSICAL WEB
  7. 7. @joel__lord #JSRemoteConf Bluetooth WHY USE IT? • Named after Harald Bluetooth who was the Viking king of Denmark between 958 and 970 • It’s present on most cell phones that were manufactured in this millennium • Uses a network of 79 bands of radio waves. • The most recent standard (4.2) has a theoretical speed of 2.1Mbps and range of 100 meters • Devices can automatically detect each other • Can connect up to 8 devices at once
  8. 8. @joel__lord #JSRemoteConf Bluetooth AVAILABLE IN MULTIPLE FLAVORS • Bluetooth Basic Rate/Enhanced Data Rate (BR/EDR) • More limited in range • More suitable for continuous connections • Bluetooth Low Energy (LE) • Perfect for brief bursts of data • Uses very low power • Cheaper
  9. 9. @joel__lord #JSRemoteConf The Generic Attributes (GATT) define a hierarchical data structure that is exposed to connected Bluetooth LE devices.
  10. 10. @joel__lord #JSRemoteConf Bluetooth GENERIC ATTRIBUTE PROFILE (GATT) • A characteristic consists of • a type (represented by a UUID) • a value • a set of properties indicating the operations the characteristic supports • a set of permissions relating to security.
  11. 11. @joel__lord #JSRemoteConf Bluetooth ADOPTED SPECIFICATIONS • Battery Service - org.bluetooth.service.battery_service (0x180F) • battery_level: Read, Notify • Heart Rate Service – org.bluetooth.service.heart_rate (0x180D) • heart_rate_measurement: Notify • body_sensor_location: Read For more on Bluetooth specs: https://www.bluetooth.com/specifications/gatt
  12. 12. What’s that? PHYSICAL WEB
  13. 13. @joel__lord #JSRemoteConf The Physical Web is an open approach to enable quick and seamless interactions with physical objects and locations.
  14. 14. @joel__lord #JSRemoteConf Physical Web EDDYSTONE BEACONS • An easy way to broadcast a URL • Makes it easy to interact with objects • Only requires something that can broadcast over Bluetooth (BLE)
  15. 15. @joel__lord #JSRemoteConf Physical Web POSSIBLE BEACONS • Ready to use beacons
  16. 16. @joel__lord #JSRemoteConf Physical Web POSSIBLE BEACONS • Ready to use beacons • Your own laptop
  17. 17. @joel__lord #JSRemoteConf Physical Web POSSIBLE BEACONS • Ready to use beacons • Your own laptop • And, of course, a little touch of Javascript
  18. 18. @joel__lord #JSRemoteConf Physical Web WHAT WILL YOU NEED • A URL that you want to broadcast • Has to resolve to HTTPS and public • Has to be less than 18 characters • A phone or device that can receive nearby notifications
  19. 19. @joel__lord #JSRemoteConf Physical Web CONFIGURE YOUR PHONE • First, check that you have an active data connection as well as Bluetooth and Location turned on. The notification shade provides an easy way to check that these requirements are met.
  20. 20. @joel__lord #JSRemoteConf Physical Web CONFIGURE YOUR PHONE • Swipe down on the notification shade when you first encounter a beacon. You will receive a notification alerting you about nearby web pages.
  21. 21. @joel__lord #JSRemoteConf Physical Web CONFIGURE YOUR PHONE • Tap on the notification to opt into future Nearby notifications. Opting in will take you to a list of nearby URLs
  22. 22. @joel__lord #JSRemoteConf Physical Web CONFIGURE YOUR PHONE • When you are near a beacon in the future, you will see a notification informing you of nearby URLs.
  23. 23. @joel__lord #JSRemoteConf Physical Web STILL NOT WORKING? • Try to download the application ”Physical Web” from the Play Store
  24. 24. @joel__lord #JSRemoteConf Physical Web AS FOR IPHONES? • Dunno… Try it and let me know: iOS
  25. 25. @joel__lord #JSRemoteConf Physical Web BROADCAST THAT URL • You will need • Compatible Bluetooth 4.0 USB adapter (Macbook Pro) • NodeJs • See full list of requirements
  26. 26. @joel__lord #JSRemoteConf Physical Web BROADCAST THAT URL [SYS:~ jlord$ npm install eddystone-beacon
  27. 27. @joel__lord #JSRemoteConf Physical Web BROADCAST THAT URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
  28. 28. @joel__lord #JSRemoteConf Physical Web BROADCAST THAT URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
  29. 29. @joel__lord #JSRemoteConf Physical Web BROADCAST THAT URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
  30. 30. @joel__lord #JSRemoteConf Physical Web BROADCAST THAT URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
  31. 31. @joel__lord #JSRemoteConf Physical Web BROADCAST THAT URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
  32. 32. @joel__lord #JSRemoteConf Physical Web TADA! • You should see the notification on your phone • It’s really just that simple!
  33. 33. Web Bluetooth API
  34. 34. @joel__lord #JSRemoteConf Web Bluetooth API WHAT THE…? • Available in Chrome 56 and Chrome for Android M • Lets you: • Request and connect to nearby Bluetooth devices • Read and write Bluetooth Characteristics • Receive GATT Notifications • Know about disconnects
  35. 35. @joel__lord #JSRemoteConf Web Bluetooth API WHAT THE…? • Still experimental • Full specs here • Only Google implementing it so far • Security is a big concern
  36. 36. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • You will need a compatible browser • Understanding of Promises • A User gesture event document.querySelector("button").addEventListener("click", _ => { //User event });
  37. 37. @joel__lord #JSRemoteConf Web Bluetooth API LET’S GET CODING • Heart Beat Sensor
  38. 38. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • First, we need to connect to a device. • Requires a mandatory service filter navigator.bluetooth.requestDevice({ filters: [ { services: ['heart_rate'] } ]}) .then(device => { /* ... */ }) .catch(error => { console.log(error); });
  39. 39. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • First, we need to connect to a device. • Requires a mandatory service filter navigator.bluetooth.requestDevice({ filters: [ { services: ['heart_rate'] } ]}) .then(device => { /* ... */ }) .catch(error => { console.log(error); });
  40. 40. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • You can see all the devices but you will get an error later if you don’t add a service filter navigator.bluetooth.requestDevice({acceptAllDevices: true}) .then(device => { /* ... */ }) .catch(error => { console.log(error); });
  41. 41. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • First, we need to connect to a device. • Requires a mandatory service filter navigator.bluetooth.requestDevice({ filters: [ { services: ['heart_rate'] } ]}) .then(device => { /* ... */ }) .catch(error => { console.log(error); });
  42. 42. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • First, we need to connect to a device. • Requires a mandatory service filter navigator.bluetooth.requestDevice({ filters: [ { services: ['heart_rate'] } ]}) .then(device => { /* ... */ }) .catch(error => { console.log(error); });
  43. 43. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • You can *then* connect to the device and get information about this device navigator.bluetooth.requestDevice(options) .then(device => { // Human-readable name of the device. console.log(device.name); }) .catch(error => { console.log(error); });
  44. 44. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • Once you have a device, you can access the GATT server navigator.bluetooth.requestDevice(options) .then(device => { // Attempts to connect to remote GATT Server. return device.gatt.connect(); }) .then(server => { /* ... */ }) .catch(error => { console.log(error); });
  45. 45. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • Once you have a device, you can access the GATT server navigator.bluetooth.requestDevice(options) .then(device => { // Attempts to connect to remote GATT Server. return device.gatt.connect(); }) .then(server => { /* ... */ }) .catch(error => { console.log(error); });
  46. 46. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • And you can now access the service to get the desired characteristic navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => { // Getting Battery Service return server.getPrimaryService('battery_service'); }) .then(service => { // Getting Battery Level Characteristic. return service.getCharacteristic('battery_level'); }) .catch(error => { console.log(error); });
  47. 47. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • And you can now access the service to get the desired characteristic navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => { // Getting Battery Service return server.getPrimaryService('battery_service'); }) .then(service => { // Getting Battery Level Characteristic. return service.getCharacteristic('battery_level'); }) .catch(error => { console.log(error); });
  48. 48. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • You can finally read the value of the characteristic navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level')) .then(characteristic => { // Reading Battery Level return characteristic.readValue(); }) .then(value => { console.log('Characteristic value: ' + value); }) .catch(error => { console.log(error); });
  49. 49. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • You can finally read the value of the characteristic navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level')) .then(characteristic => { // Reading Battery Level return characteristic.readValue(); }) .then(value => { console.log('Characteristic value: ' + value); }) .catch(error => { console.log(error); });
  50. 50. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • When reading the value, it returns a ArrayBuffer which you need to convert into an int value navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level')) .then(characteristic => characteristic.readValue()) .then(value => { var intVal = value.getUint8(0); console.log('Battery percentage is ' + intVal); }) .catch(error => { console.log(error); });
  51. 51. @joel__lord #JSRemoteConf Web Bluetooth API GETTING READY • Or subscribe to the notifications navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level')) .then(c => { // Set up event listener for when characteristic value changes. c.addEventListener('characteristicvaluechanged', console.log); }) .catch(error => { console.log(error); });
  52. 52. Show me the real stuff !
  53. 53. QUESTIONS?
  54. 54. DOCUMENT CONFIDENTIEL, TOUT DROIT RÉSERVÉ PRESENTED BY That’s all folks ! JOEL LORD March 17th, 2017 TWITTER: @JOEL__LORD GITHUB: HTTP://GITHUB.COM/JOELLORD

×