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
An	introduction	to	the	world	of	the	physical	web
@joel__lord
#midwestjs
About	Me
@joel__lord
#midwestjs
Our	Agenda	for	today…
• What	is	Bluetooth
• The	Physical	Web
• Web	Bluetooth	API
• Demos,	code	and	...
@joel__lord
#midwestjs
What	is	Bluetooth?
@joel__lord
#midwestjs
@joel__lord
#midwestjs
@joel__lord
#midwestjs
Why	use	it?
• Available	on	modern	
devices
• Stable
• Good	Range
• Connectivity
• Auto	Pair
@joel__lord
#midwestjs
Multiple	Flavors
• Bluetooth	Basic	Rate/Enhanced	Data	Rate	
(BR/EDR)
• Bluetooth	Low	Energy	(LE)
@joel__lord
#midwestjs
The	Generic	Attributes	(GATT) define	a	hierarchical	data	structure	that	
is	exposed	to	connected	Bl...
@joel__lord
#midwestjs
The	Generic	Attributes	
(GATT)	define	a	
hierarchical	data	
structure	that	is	
exposed	to	connected...
@joel__lord
#midwestjs
The	Generic	Attributes	
(GATT)	define	a	
hierarchical	data	
structure	that	is	
exposed	to	connected...
@joel__lord
#midwestjs
The	Generic	Attributes	
(GATT)	define	a	
hierarchical	data	
structure	that	is	
exposed	to	connected...
@joel__lord
#midwestjs
For	more	on	Bluetooth	specs:	https://www.bluetooth.com/specifications/gatt
@joel__lord
#midwestjs
The	Physical	
Web
The	Physical	Web is	an	
open	approach	to	
enable	quick	and	
seamless	interactions...
@joel__lord
#midwestjs
The	Physical	
Web
• Everything	is	a	tap	
away
• See	what’s	useful	
around	you
• Any	object	or	place...
@joel__lord
#midwestjs
Introducing	
Eddystone	
Beacons
@joel__lord
#midwestjs
Out	of	the	
box	solutions
@joel__lord
#midwestjs
@joel__lord
#midwestjs
Your	own	
laptop	!
@joel__lord
#midwestjs
And	a	touch	
of	Javascript
@joel__lord
#midwestjs
What	you	need
• A	URL	that	you	want	to	broadcast
• Has	to	resolve	to	HTTPS	and	public
• Has	to	be	l...
@joel__lord
#midwestjs
Configure	your	device
• First,	check	that	you	have	an	
active	data	connection	as	well	as	
Bluetooth...
@joel__lord
#midwestjs
Configure	your	device
• Swipe	down	on	the	notification	
shade	when	you	first	encounter	
a	beacon.	Y...
@joel__lord
#midwestjs
Configure	your	device
• Tap	on	the	notification	to	opt	
into	future	Nearby	notifications.	
Opting	i...
@joel__lord
#midwestjs
Configure	your	device
• When	you	are	near	a	beacon	in	
the	future,	you	will	see	a	
notification	inf...
@joel__lord
#midwestjs
But	it	doesn’t	work	on	my	phone!
• Try	to	download	the	application	
”Physical	Web”	from	the	Play	
S...
@joel__lord
#midwestjs
Wait!		I	have	a	fancy	iPhone!
• Try	it	and	let	me	know:	iOS
@joel__lord
#midwestjs
Broadcast	that	URL
• You	will	need
• Compatible	Bluetooth	4.0	USB	adapter	or	built-in	BT	(Macbook P...
@joel__lord
#midwestjs
Broadcast	that	URL
• [SYS:~	jlord$	npm install	eddystone-beacon
@joel__lord
#midwestjs
Broadcast	that	URL
var beacon = require("eddystone-beacon");
var options = {
name: "MyBeacon"
};
va...
@joel__lord
#midwestjs
Broadcast	that	URL
var beacon = require("eddystone-beacon");
var options = {
name: "MyBeacon"
};
va...
@joel__lord
#midwestjs
Broadcast	that	URL
var beacon = require("eddystone-beacon");
var options = {
name: "MyBeacon"
};
va...
@joel__lord
#midwestjs
Broadcast	that	URL
var beacon = require("eddystone-beacon");
var options = {
name: "MyBeacon"
};
va...
@joel__lord
#midwestjs
Broadcast	that	URL
var beacon = require("eddystone-beacon");
var options = {
name: "MyBeacon"
};
va...
@joel__lord
#midwestjs
Tada!
You	should	see	the	notification	on	your	
phone
It’s	really	just	that	simple!
@joel__lord
#midwestjs
But	what	about	controlling	BT	devices?
@joel__lord
#midwestjs
What	about	controlling	devices?
• Available	in	Chrome	56	and	Chrome	for	Android	M
• Lets	you:
• Req...
@joel__lord
#midwestjs
What	about	controlling	devices?
• Still	experimental
• Full	specs	here
• Only	Google	implementing	i...
@joel__lord
#midwestjs
What	about	controlling	devices
• You	will	need	a	compatible	
browser
• Understanding	of	Promises
• ...
@joel__lord
#midwestjs
Web	Bluetooth	API	Demo
• A	Heart	Rate	Monitor
@joel__lord
#midwestjs
Web	Bluetooth	API
• First,	we	need	to	connect	to	a	device.	
• Requires	a	mandatory	service	filter	
...
@joel__lord
#midwestjs
Web	Bluetooth	API
• First,	we	need	to	connect	to	a	device.	
• Requires	a	mandatory	service	filter	
...
@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...
@joel__lord
#midwestjs
Web	Bluetooth	API
• First,	we	need	to	connect	to	a	device.	
• Requires	a	mandatory	service	filter	
...
@joel__lord
#midwestjs
Web	Bluetooth	API
• First,	we	need	to	connect	to	a	device.	
• Requires	a	mandatory	service	filter	
...
@joel__lord
#midwestjs
Web	Bluetooth	API
• You	can	*then*	connect	to	the	device	and	get	information	about	this	
device
nav...
@joel__lord
#midwestjs
Web	Bluetooth	API
• Once	you	have	a	device,	you	can	access	the	GATT	server
navigator.bluetooth.requ...
@joel__lord
#midwestjs
Web	Bluetooth	API
• Once	you	have	a	device,	you	can	access	the	GATT	server
navigator.bluetooth.requ...
@joel__lord
#midwestjs
Web	Bluetooth	API
• And	you	can	now	access	the	service	to	get	the	desired	characteristic
navigator....
@joel__lord
#midwestjs
Web	Bluetooth	API
• And	you	can	now	access	the	service	to	get	the	desired	characteristic
navigator....
@joel__lord
#midwestjs
Web	Bluetooth	API
• You	can	finally	read	the	value	of	the	characteristic
navigator.bluetooth.reques...
@joel__lord
#midwestjs
Web	Bluetooth	API
• You	can	finally	read	the	value	of	the	characteristic
navigator.bluetooth.reques...
@joel__lord
#midwestjs
Web	Bluetooth	API
• When	reading	the	value,	it	returns	a	ArrayBuffer which	you	need	to	
convert	int...
@joel__lord
#midwestjs
Web	Bluetooth	API
• Or	subscribe	to	the	notifications
navigator.bluetooth.requestDevice(options)
.t...
@joel__lord
#midwestjs
Heart	Rate	during	a	talk
15	minutes	before	talk
Stage	fright
Holy	shit,	talk	started	
but	my	laptop	froze
During	the	talk,...
Presented	By
JOEL	LORD
Midwest	JS	August	2017
@joel__lord
joellord
Thank	you
Presented	By
JOEL	LORD
Midwest	JS	August	2017
@joel__lord
joellord
Questions?
Upcoming SlideShare
Loading in …5
×

Let's Get Physical

152 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?

×