let's get physical

www.spiria.com

Let’s Get Physical

Presented By

JOEL LORD

JS Remote ConfMarch 15th, 2017

www.spiria.com

Let’s Get Physical

Presented By

JOEL LORD

JS Remote ConfMarch 15th, 2017

@joel__lord#JSRemoteConf

JOEL LORDAboot me, eh?

• Javascript Junkie• Tinkerer• Technology enthusiast

Agenda

• What is Bluetooth• The Physical Web• Web Bluetooth API• Demos, code and lots of fun!

Agenda

• What is Bluetooth• The Physical Web• Web Bluetooth API• Demos, code and lots of fun!

What’s the fuss about?BLUETOOTH, BLE, PHYSICAL WEB

BluetoothWHY 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

BluetoothAVAILABLE 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

The Generic Attributes (GATT) define a hierarchical data structure that is exposed to connected Bluetooth LE devices.

BluetoothGENERIC 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.

BluetoothADOPTED 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

What’s that?PHYSICAL WEB

The Physical Web is an open approach to enable quick and seamless interactions with physical objects and locations.

Physical WebEDDYSTONE BEACONS

• An easy way to broadcast a URL• Makes it easy to interact with objects• Only requires something that can broadcast over Bluetooth (BLE)

Physical WebPOSSIBLE BEACONS

• Ready to use beacons

• Ready to use beacons• Your own laptop

• Ready to use beacons• Your own laptop• And, of course, a little touch of

Javascript

Physical WebWHAT 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

Physical WebCONFIGURE 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.

• Swipe down on the notification shade when you first encounter a beacon. You will receive a notification alerting you about nearby web pages.

• Tap on the notification to opt into future Nearby notifications. Opting in will take you to a list of nearby URLs

• When you are near a beacon in the future, you will see a notification informing you of nearby URLs.

Physical WebSTILL NOT WORKING?

• Try to download the application ”Physical Web” from the Play Store

Physical WebAS FOR IPHONES?

• Dunno…

Try it and let me know: iOS

Physical WebBROADCAST THAT URL

• You will need• Compatible Bluetooth 4.0 USB adapter

(Macbook Pro)• NodeJs• See full list of requirements

[SYS:~ jlord$ npm install eddystone-beacon

var beacon = require("eddystone-beacon");var options = {

beacon.advertiseUrl(url, options);

var beacon = require("eddystone-beacon"); var options = {

Physical WebTADA!

• You should see the notification on your phone• It’s really just that simple!

Web Bluetooth API

Web Bluetooth APIWHAT 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

Web Bluetooth APIWHAT THE…?

• Still experimental• Full specs here• Only Google implementing it so far• Security is a big concern

Web Bluetooth APIGETTING READY

• You will need a compatible browser• Understanding of Promises• A User gesture event

document.querySelector("button").addEventListener("click", _ => {//User event

Web Bluetooth APILET’S GET CODING

• Heart Beat Sensor

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

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

]}) .then(device => { /* ... */ }).catch(error => { console.log(error); });

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

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

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

• 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 Servicereturn server.getPrimaryService('battery_service');

}).then(service => { // Getting Battery Level Characteristic.return service.getCharacteristic('battery_level');

}) .catch(error => { console.log(error); });

• 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 Servicereturn server.getPrimaryService('battery_service');

}) .then(service => {// Getting Battery Level Characteristic.return service.getCharacteristic('battery_level');

• 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 Levelreturn characteristic.readValue();

}).then(value => { console.log('Characteristic value: ' + value);

}) .catch(error => { console.log(error); });

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

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

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

Show me the real stuff !

QUESTIONS?

DOCUMENT CONFIDENTIEL, TOUT DROIT RÉSERVÉ

PRESENTED BY

That’s all folks !

JOEL LORDMarch 17th, 2017

TWITTER: @JOEL__LORDGITHUB: HTTP://GITHUB.COM/JOELLORD

let's get physical

Engineering

let's get acquainted - anacortes

let's get acquainted 2012

let's get physical with zoo-phonics!

let's get loud full

let's get happy

let's get phygital

handwriting ! let's get ready!

let's get technical

let's get it up

let's get inspired!

let's get social

let's get it started!

let's get fit together

younts let's get explicit

let's get accessible

let's get lost

let's get personal

let's get small

hi! let's get started

let's get to work