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

147 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: Internet
  • Be the first to comment

  • Be the first to like this

Let's Get Physical

  1. 1. Let’s Get Physical An introduction to the world of the physical web
  2. 2. @joel__lord #midwestjs About Me
  3. 3. @joel__lord #midwestjs Our Agenda for today… • What is Bluetooth • The Physical Web • Web Bluetooth API • Demos, code and lots of fun • Q&A
  4. 4. @joel__lord #midwestjs What is Bluetooth?
  5. 5. @joel__lord #midwestjs
  6. 6. @joel__lord #midwestjs
  7. 7. @joel__lord #midwestjs Why use it? • Available on modern devices • Stable • Good Range • Connectivity • Auto Pair
  8. 8. @joel__lord #midwestjs Multiple Flavors • Bluetooth Basic Rate/Enhanced Data Rate (BR/EDR) • Bluetooth Low Energy (LE)
  9. 9. @joel__lord #midwestjs The Generic Attributes (GATT) define a hierarchical data structure that is exposed to connected Bluetooth LE devices.
  10. 10. @joel__lord #midwestjs The Generic Attributes (GATT) define a hierarchical data structure that is exposed to connected Bluetooth LE devices.
  11. 11. @joel__lord #midwestjs The Generic Attributes (GATT) define a hierarchical data structure that is exposed to connected Bluetooth LE devices.
  12. 12. @joel__lord #midwestjs The Generic Attributes (GATT) define a hierarchical data structure that is exposed to connected Bluetooth LE devices.
  13. 13. @joel__lord #midwestjs For more on Bluetooth specs: https://www.bluetooth.com/specifications/gatt
  14. 14. @joel__lord #midwestjs The Physical Web The Physical Web is an open approach to enable quick and seamless interactions with physical objects and locations.
  15. 15. @joel__lord #midwestjs The Physical Web • Everything is a tap away • See what’s useful around you • Any object or place can broadcast content
  16. 16. @joel__lord #midwestjs Introducing Eddystone Beacons
  17. 17. @joel__lord #midwestjs Out of the box solutions
  18. 18. @joel__lord #midwestjs
  19. 19. @joel__lord #midwestjs Your own laptop !
  20. 20. @joel__lord #midwestjs And a touch of Javascript
  21. 21. @joel__lord #midwestjs What 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
  22. 22. @joel__lord #midwestjs Configure your device • 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.
  23. 23. @joel__lord #midwestjs Configure your device • Swipe down on the notification shade when you first encounter a beacon. You will receive a notification alerting you about nearby web pages.
  24. 24. @joel__lord #midwestjs Configure your device • Tap on the notification to opt into future Nearby notifications. Opting in will take you to a list of nearby URLs
  25. 25. @joel__lord #midwestjs Configure your device • When you are near a beacon in the future, you will see a notification informing you of nearby URLs.
  26. 26. @joel__lord #midwestjs But it doesn’t work on my phone! • Try to download the application ”Physical Web” from the Play Store
  27. 27. @joel__lord #midwestjs Wait! I have a fancy iPhone! • Try it and let me know: iOS
  28. 28. @joel__lord #midwestjs Broadcast that URL • You will need • Compatible Bluetooth 4.0 USB adapter or built-in BT (Macbook Pro) • NodeJs • See full list of requirements
  29. 29. @joel__lord #midwestjs Broadcast that URL • [SYS:~ jlord$ npm install eddystone-beacon
  30. 30. @joel__lord #midwestjs 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 #midwestjs 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 #midwestjs Broadcast that URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
  33. 33. @joel__lord #midwestjs Broadcast that URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
  34. 34. @joel__lord #midwestjs Broadcast that URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
  35. 35. @joel__lord #midwestjs Tada! You should see the notification on your phone It’s really just that simple!
  36. 36. @joel__lord #midwestjs But what about controlling BT devices?
  37. 37. @joel__lord #midwestjs What about controlling devices? • 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
  38. 38. @joel__lord #midwestjs What about controlling devices? • Still experimental • Full specs here • Only Google implementing it so far • Security is a big concern
  39. 39. @joel__lord #midwestjs What about controlling devices • You will need a compatible browser • Understanding of Promises • A User gesture event document.querySelector("button") .addEventListener("click", _ => { //User event });
  40. 40. @joel__lord #midwestjs Web Bluetooth API Demo • A Heart Rate Monitor
  41. 41. @joel__lord #midwestjs Web Bluetooth API • 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 #midwestjs Web Bluetooth API • 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 #midwestjs Web Bluetooth API • 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); });
  44. 44. @joel__lord #midwestjs Web Bluetooth API • 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); });
  45. 45. @joel__lord #midwestjs Web Bluetooth API • 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); });
  46. 46. @joel__lord #midwestjs Web Bluetooth API • 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); });
  47. 47. @joel__lord #midwestjs Web Bluetooth API • 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); });
  48. 48. @joel__lord #midwestjs Web Bluetooth API • 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); });
  49. 49. @joel__lord #midwestjs Web Bluetooth API • 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); });
  50. 50. @joel__lord #midwestjs Web Bluetooth API • 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); });
  51. 51. @joel__lord #midwestjs Web Bluetooth API • 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); });
  52. 52. @joel__lord #midwestjs Web Bluetooth API • 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); });
  53. 53. @joel__lord #midwestjs Web Bluetooth API • 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); });
  54. 54. @joel__lord #midwestjs Web Bluetooth API • 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); });
  55. 55. @joel__lord #midwestjs
  56. 56. Heart Rate during a talk 15 minutes before talk Stage fright Holy shit, talk started but my laptop froze During the talk, everything is under control Talk is done, relaxing
  57. 57. Presented By JOEL LORD Midwest JS August 2017 @joel__lord joellord Thank you
  58. 58. Presented By JOEL LORD Midwest JS August 2017 @joel__lord joellord Questions?

×