Making Simple Things

Transcript

1. Hello

2. I'm Ben

3. None

4. Frontend Web Developer

5. Frontend Web Developer + Backend + Hardware + Other stuff

6. Oxford

7. Oxford, UK

8. None
9. None
10. None

11. Evening meet-ups Hack days

12. Last month with Oxford Python, OxRUG, Codebar, DotNetOxford, DevOpsOxford, Drupal

    & WPOx

13. The Oxford Mega Super Meetup Meetup

14. None

15. HTTP

16. HTTP kind of sucks

17. HTTP kind of sucks (sometimes)

18. Problem 1. HTTP was designed with wires in mind wireless/flaky

    networks can be challenging

19. Problem 2. HTTP resources need to be constantly online can

    be a issue for low-power devices

20. Problem 3. HTTP responses need a request getting content to

    a client can be tricky

21. The problems: 1. Wireless 2. Low energy devices 3. P2P

    data flow

22. this sounds a bit like the Internet of Things

23. 1. Many small (movable) devices - wires become an issue

    2. Batteries - constrains compute resource 3. Things need to be able to talk to each other

24. Part 1. A deep dive into IoT networking, and it

    can fit with WordPress

25. An example network of Things

26. None

27. 1. a thing you can press down

28. None

29. 2. some things that light up

30. target outcome: When I press this thing, these things should

    turn red (wherever they are)

31. Sending a post request to our LED strip? POST /led-strip

    HTTP/1.1 Host: benjaminbenben.com User-Agent: curl/7.51.0 content-type: application/json Accept: */* Cache-Control: no-cache Content-Length: 15 {"color":"red"}

32. Handling HTTP —Opening ports —Responding to requests —Parsing request &

    headers —Understanding http codes & header fields —Chunked encoding —Persistent connections —IP address changes

33. (JSON is pretty challenging too)

34. Small devices —variable network —sketchy network —low processing power —power

    consumption requirements

35. MQTT

36. MQTT Message Queue*

37. MQTT Telemetry Transport

38. None

39. Broker Client

40. publish subscribe topics messages

41. MQTT Broker —Could be a satellite —Could be a hub

    in a home —Could be a box sitting in a field

42. MQTT Connection —Satellite radio —mesh network —bluetooth LE

43. MQTT Connection —Stateful —Message based —Binary

44. Message structure +----------------------+ | fixed header | |----------------------| | variable

    header | |----------------------| | payload | +----------------------+

45. Message Types CONNECT, CONNACK, PUBLISH, PUBACK, PUBREC, PUBREL, PUBCOMP, SUBSCRIBE,

    SUBACK, UNSUBSCRIBE, UNSUBACK, PINGREQ, PINGRESP & DISCONNECT

46. Connecting to a broker ie. making initial contact CONNECT &

    CONNACK

47. Client Broker ------- CONNECT -------> <------ CONNACK --------

48. CONNECT fixed header 7 6 5 4 3 2 1

    0 f i x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS

49. CONNECT variable header —protocol number —whether username & password are

    supplied

50. CONNECT payload —the actual username & password (if required)

51. 'fourteen bytes' to connect —2 bytes - fixed header —12

    bytes - variable header —0-n bytes - flag values

52. Publishing Messages eg. on button press PUBLISH

53. PUBLISH fixed header 7 6 5 4 3 2 1

    0 f i x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS

54. PUBLISH variable header 7 6 5 4 3 2 1

    0 TOPIC LENGTH / T O P I C 3 4 5 . . . . T

55. PUBLISH payload —the content of your message (optional) publish /button/push

    'count: 5'

56. ⨽⨽⨽⨽/button/push

57. ⨽⨽⨽⨽/button/push vs POST /button HTTP/1.1 Host: benjaminbenben.com User-Agent: curl/7.51.0 content-type:

    application/json Accept: */* Cache-Control: no-cache Content-Length: 15 {"action":"push"}

58. 16 bytes

59. 16 bytes POST /btn HTT

60. Receiving Messages eg. some lights SUBSCRIBE

61. SUBSCRIBE fixed header 7 6 5 4 3 2 1

    0 f i x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS

62. SUBSCRIBE variable header —Message identifier

63. SUBSCRIBE payload —a list of topic names

64. Receiving messages

65. Receiving messages (we already know this!) Client Broker <------ PUBLISH

    --------

66. Job Done We can publish & subscribe to a network

    of things

67. $socket = fsockopen('mqtt-host.com', 1883); $connect = constructConnectMessage(); fwrite($socket, $connect, strlen($connect));

    $publish = constructPublishMessage('/hello', 'world!'); fwrite($socket, $publish, strlen($connect));

68. One other thing: QoS For when you're not sure if

    your satellite is even there

69. 7 6 5 4 3 2 1 0 f i

    x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS

70. QoS 0 Fire and Forget Client Broker Client ---- PUBLISH

    ----> [delete] ---- PUBLISH ---->

71. QoS 1 At least once delivery Client Broker Client ----

    PUBLISH ----> [store] ---- PUBLISH ----> [delete] <------ PUBACK --- [delete]

72. QoS 2 "Exactly once" Client Broker Client ----- PUBLISH ---->

    [store] ---- PUBLISH ----> <------ PUBACK ---- ------- PUBREL ---> [delete] <------ PUBCOMP --- [delete]

73. Embraces flakey networks

74. MQTT …that's about it (security/encryption, client IDs, last will, persistence,

    ping/pong)

75. Demo Let's hook these lights together

76. /Demo

77. Bringing WordPress onto the network

78. 1/ Subscribe to MQTT topics 2/ Publish messages to MQTT

79. 1/ Subscribe to MQTT topics Create an mqtt-wp bridge (A

    script that forwards on messages) github/benfoxall/mqtt-wp

80. const WPAPI = require('wpapi') const wp = new WPAPI(config.wp) const

    update = (slug, content) => wp.pages().slug(slug) .update({content}) // update('my-thing', 'Sensor value: 4')

81. 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()) update('my-sensor', content) })

82. Publishing messages

83. Option 1: Via WP-MQTT ➡ Nice and easy Option 2:

    Via Webhooks ➡ Better fit for a wp-bridge model

84. WP-MQTT settings

85. MQTT Broker WordPress wp-mqtt plugin mqtt-wp bridge

86. Demo Let's bring WordPress on to the network

87. ~

88. More useful things with this —Displaying sensor content —weather sensors

    —door opening counters —whatever you can build

89. More useful things with this —A device registry —Smart home

    —Sensors in the field

90. ~

91. Doing this at home MQTT brokers

92. None
93. None
94. None
95. None

96. Doing this at home Electronics

97. None

98. Espruino

99. ESP8266

100. Pi Zero W

101. ~

102. Part 2. How can we take inspiration from the way

     we build Things.

103. A Thing

104. A Thing Is more than the stuff it's made from

105. A wooden table A table

106. We build applications from source code print '<b>hello <i>world</B></i>';

107. Working out what you're trying to build

108. None
109. None

110. Try and work out what your thing does

111. A Thing

112. A Thing Is a point of interaction

113. Someone needs to understand

114. None
115. None
116. None
117. None
118. None
119. None

120. When you build something Make sure it's a thing

121. A Thing

122. A Thing Doesn't have to be simple (but it can

     be)
123. None
124. None
125. None
126. None
127. None

128. The SR-71 is still just a thing

129. A thing that flies very fast & very high up

130. None
131. None
132. None

133. Keep is Simple Stupid

134. Keep is Simple, Stupid

135. Have a clear idea of what your thing is Build

     that thing as simply as you can

136. For way more about this, see Skunk Works by Nickolas

     Means
137. None

138. Part 3. How we can make our phones into things

139. MQTT over WebSockets Our device becomes another thing on the

     network const mqt = new MQT('test.mosquitto.org:8080') mqt.subscribe('/sensor/value' (value) => document.querySelector('#sensor').textContent = value ) mqt.publish('/phone/visit', document.location.pathname)

140. bit.ly/ADORB

141. Browsers can do more than displaying documents

142. Power navigator.getBattery() .then(({value, charging}) => {})

143. Location navigator.geolocation.getCurrentPosition( ({coords}) => {} )

144. Orientation & movement document.addEventListener('deviceorientation', ({alpha, beta, gamma}) => {} )

     document.addEventListener('devicemotion', ({acceleration}) => {} )

145. Ambient Light window.addEventListener('devicelight', ({value}) => {} )

146. Proximity window.addEventListener('userproximity', ({near}) => {} )

147. Audio/Video feed navigator.mediaDevices.getUserMedia({ audio: true, video: true }) .then(stream =>

     {})

148. Movement navigator.vibrate(100)

149. Sounds var ctx = new AudioContext() var osc = ctx.createOscillator()

     osc.connect(ctx.destination) osc.frequency.value = 300 osc.start()

150. Other features

151. Service workers navigator.serviceWorker.register('/sw-test/sw.js')

152. Web Bluetooth navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'], }] }).then(device =>

     device.gatt.connect())

153. Our web pages are becoming Things

154. None

155. Part 4. How to build things that make a difference

156. We're building things

157. The usefulness of a thing can be assessed

158. None
159. None
160. None

161. When you're building something

162. make a difference for someone

163. Thank you for listening @benjaminbenben

164. —github.com/benfoxall/mqtt-wp —github.com/benfoxall/ador-puck-demo —github.com/benfoxall/puck-mqtt