Save 37% off PRO during our Black Friday Sale! »

Web Sites & Fairy Lights

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.

D5f36cb3a2b97a68cc812d985726b5dd?s=128

Ben Foxall

April 27, 2017
Tweet

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:

  4. None
  5. Some things that light up

  6. None
  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

  13. None
  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

  26. None
  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

  36. None
  37. ✨ We've connected a couple of things together

  38. None
  39. PART TWO Connecting Fairy Lights to a Web Server

  40. target outcome: When I post to my blog, these things

    change colour
  41. None
  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

  51. None
  52. ✨ We've made WordPress into a thing

  53. None
  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
  56. None
  57. The easy way Post message to your web server…

  58. These lights are right here! why control them from your

    web server?
  59. None
  60. None
  61. - Advertising - Connecting - Services - Characteristics

  62. Web Bluetooth navigator.bluetooth.requestDevice({ filters: [{namePrefix: 'Puck'}], optionalServices: [0xBCDE] })

  63. None
  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

  66. None
  67. We can do even be!er

  68. Bonus point #1 Discovery

  69. None
  70. None
  71. require("ble_eddystone") .advertise("goo.gl/IaXNnT")

  72. None
  73. None
  74. Bonus point #2 Offline Support

  75. Service workers

  76. None
  77. None
  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" }
  81. None
  82. None
  83. None
  84. ✨ We've made a website into a thing

  85. None
  86. Some advice to wrap up

  87. What's best device to prototype all this edge web technology?

  88. None
  89. Focus on people then work back back from there

  90. And build some things

  91. Thank you for listening @benjaminbenben