Web Sites & Fairy Lights

Have you ever wondered how to connect your blog to a string of fairy lights?

I’ll talk about how we can connect web servers and browsers to physical objects around us; taking us through some technical aspects of building and communicating with IoT devices, covering some new features of the web platform that allow us to make these interactions far more intuitive. We’ll also look at some higher-level ideas of our interactions with technology and how we can relate them to the things that we design and build day-to-day.

Transcript

1. Web Sites and Fairy Lights
2. Hi, I'm Ben Freelance web developer & other stuff Say hi on twi!er: @benjaminbenben
3. This is a talk about things:
5. Some things that light up
7. A thing you can press down
8. These are: — wireless (bluetooth) — battery powered — puck.js
9. This is a talk of 4 parts
10. Part 1. Connecting this Bu!on to these Fairy Lights
11. Part 2. Connecting these Fairy Lights to a Web Server
12. Part 3. Connecting these Fairy Lights to a Web Browsers
14. PART ONE Connecting this Bu!on to these Fairy Lights
15. target outcome: When I press this thing, these things should turn red
16. Fairy ⇽!"☀$⭐⚡✨➤ Bu"on Lights
17. HTTP?
18. POST /colour HTTP/1.1 Host: fairy-lights.my-house.co.uk User-Agent: curl/7.51.0 content-type: application/json Accept: */* Cache-Control: no-cache Content-Length: 15 {"color":"red"}
19. Handling HTTP — Opening ports — Parsing request & headers — Responding to requests — Handling http codes & response headers — Persistent connections — IP address changes
20. (JSON is pre!y challenging too)
21. HTTP wasn't designed for IoT
22. HTTP
23. MQTT
24. MQTT Message Queue*
25. MQTT Telemetry Transport
27. Broker Client
28. topics messages
29. Connection — Stateful — Message based — Binary
30. Publishing Messages > CONNECT < CONNACK > PUBLISH /fairy-lights/12 red
31. Subscribing to topics > CONNECT < CONNACK > SUBSCRIBE /fairy-lights/+ … … < PUBLISH /fairy-lights/12 red … … < PUBLISH /fairy-lights/15 blue …
32. Features (vs HTTP) — lightweight protocol — QoS
33. MQTT …that's about it
34. MQTT …that's about it (though also; security/encryption, client IDs, last will, persistence, ping/pong) -->
35. Demo Let's hook the bu!on and lights together
37. ✨ We've connected a couple of things together
39. PART TWO Connecting Fairy Lights to a Web Server
40. target outcome: When I post to my blog, these things change colour
42. For WordPress to be a thing: 1/ Publish messages 2/ Subscribe to topics
43. 1/ Publish messages
44. 1/ Publish messages WP-MQTT
45. WP-MQTT se!ings
46. 2/ Subscribe to topics
47. 2/ Subscribe to topics MQTT-WP listen for messages then forward them on to the WP-REST API github/benfoxall/mq!-wp
48. const mqtt = require('mqtt') const client = mqtt.connect(config.mqtt_host) client.subscribe('my/sensor') client.on('message', (topic, buffer) => { const content = escape(buffer.toString()) updatePage('my-sensor', content) })
49. const WPAPI = require('wpapi') const wp = new WPAPI(config.wp) const updatePage = (slug, content) => wp.pages().slug(slug) .update({content})
50. Demo Let's get WordPress on our MQTT network
52. ✨ We've made WordPress into a thing
54. PART THREE Connecting Fairy Lights to a Web Browser
55. target outcome: When I visit a web page, I can choose the colour of my lights
57. The easy way Post message to your web server…
58. These lights are right here! why control them from your web server?
61. - Advertising - Connecting - Services - Characteristics
62. Web Bluetooth navigator.bluetooth.requestDevice({ filters: [{namePrefix: 'Puck'}], optionalServices: [0xBCDE] })
64. navigator.bluetooth.requestDevice({ filters: [{namePrefix: 'Puck'}], optionalServices: [0xBCDE] }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService(0xBCDE)) .then(service => service.getCharacteristic(0xABCD)) .then(fairyLights => { fairyLights.writeValue(Uint8ClampedArray.from([255,150,0]).buffer) })
65. Demo Change the colour of the lights with this webpage
67. We can do even be!er
68. Bonus point #1 Discovery
71. require("ble_eddystone") .advertise("goo.gl/IaXNnT")
74. Bonus point #2 Offline Support
75. Service workers
78. Bonus point #3 Making it feel less like a website
79. <link rel="manifest" href="/manifest.json">
80. { "short_name": "Lights", "name": "Fairy Lights", "icons": [ { "src": "icons/48.png", "type": "image/png", "sizes": "48x48" }, ... { "src": "icons/512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "https://benjaminbenben.com/lights/?homescreen", "background_color": "#333", "theme_color": "#000", "display": "fullscreen", "orientation": "portrait" }
84. ✨ We've made a website into a thing
86. Some advice to wrap up
87. What's best device to prototype all this edge web technology?
89. Focus on people then work back back from there
90. And build some things
91. Thank you for listening @benjaminbenben