31:T4f6,So far our SMART FARM has data storage provided by Firebase ([EP01](https://observablehq.com/@tomlarkworthy/livecoding-2022-06-07)), and it is actively ingesting data from real farms in Colombia using Blues Wireless cellular connection ([EP02](https://observablehq.com/@tomlarkworthy/blueswireless-2022-06-14)). In this episode we enable workers to request for Dataviz to be beamed to their phones via WhatsApp. We use [Observable's amazing inbuilt Plot](https://observablehq.com/@observablehq/plot) to generate realtime dashboards. We use [Twilio](https://www.twilio.com/)'s [WhatsApp API](https://www.twilio.com/docs/whatsapp/quickstart/curl) to send charts encoded as images, and implemented the webhooks in real time using [webcode.run](https://webcode.run) (teaser below)

There were lots of challenges along the way! We had to whip up an inline server to serve SVG and PNG images, so that we could pass the image data to Twilio as a publicly addressable URL. We also used WEBCode as a webhook to receive chat notifications. Our SMART FARM is becoming useful!!!32:T5ed,/* based on the incoming message we make a decision what to send */ chatResponse = { const token = // Get the token from secrets if not in the notebook TWILIO_AUTH_TOKEN || whatsappEvent.ctx.secrets["TWILIO_AUTH_TOKEN"]; if (msg === "chart") { fetch( `https://api.twilio.com/2010-04-01/Accounts/${TWILIO_ACCOUNT_SID}/Messages.json`, { method: "POST", body: new URLSearchParams( Object.entries({ From: "whatsapp:+14155238886", To: whatsappIncoming.From, Body: "Your chart:", MediaUrl: pngLink.href }) ).toString(), headers: { "content-type": "application/x-www-form-urlencoded", authorization: `Basic ${btoa(TWILIO_ACCOUNT_SID + ":" + token)}` } } ); return "Sending chart"; } else { fetch( `https://api.twilio.com/2010-04-01/Accounts/${TWILIO_ACCOUNT_SID}/Messages.json`, { method: "POST", body: new URLSearchParams( Object.entries({ From: "whatsapp:+14155238886", To: whatsappIncoming.From, Body: `The sensor's last payload is ${JSON.stringify( latest["dev:864475046457429"].body )}` }) ).toString(), headers: { "content-type": "application/x-www-form-urlencoded", authorization: `Basic ${btoa(TWILIO_ACCOUNT_SID + ":" + token)}` } } ); return "Sending latest payload"; } }33:[{"id":"80f33f34d27e168da282db65773ce17e84366921cfe5fdaf63bbd74767577b44e69fe938acbba4b9c20d29c4ff11517f0d6101742cec2e6aef90c36b36954474","href":"https://static.observableusercontent.com/files/80f33f34d27e168da282db65773ce17e84366921cfe5fdaf63bbd74767577b44e69fe938acbba4b9c20d29c4ff11517f0d6101742cec2e6aef90c36b36954474","name":"image.png","type":"image/png","lastModified":1655828744818.13,"size":458843},{"id":"c6b6f396d7bedcc86e4491075a9975254da55bd6e5ce7780162a16c4217ce6fca0bce056e674519967052e443392f20dbc59319b15e3e13bfac194a9d5e2bbe6","href":"https://static.observableusercontent.com/files/c6b6f396d7bedcc86e4491075a9975254da55bd6e5ce7780162a16c4217ce6fca0bce056e674519967052e443392f20dbc59319b15e3e13bfac194a9d5e2bbe6","name":"sensor8393.png","type":"image/png","lastModified":1655828744818.13,"size":823746},{"id":"84860490bf27ecde88d6e9c15a6be8380a770e61ede5365b062b2ce4845623a4694dbdb7421c44a72224647b6f894827831aee452000f2faf90115348a90f31c","href":"https://static.observableusercontent.com/files/84860490bf27ecde88d6e9c15a6be8380a770e61ede5365b062b2ce4845623a4694dbdb7421c44a72224647b6f894827831aee452000f2faf90115348a90f31c","name":"image@2.png","type":"image/png","lastModified":1655928916393.406,"size":526817}] 2f:{"title":"Building a SMART FARM EP03: Dashboards over WhatsApp","cells":[{"id":0,"value":"# Building a SMART FARM EP03: Dashboards over WhatsApp\n","pinned":false,"hidden":false,"mode":"md"},{"id":365,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1092,"value":"## Full episode","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":643,"value":"viewof videoStartAt = Inputs.select(\n new Map([\n [\"recap\", 0],\n [\"about the data and collection\", 45],\n [\"send a message to WhatsApp\", 1440],\n [\"send a Plot chart\", 2165],\n [\n \"Q&A: Why choose Realtime Database over Firestore (for IoT workloads)?\",\n 3096\n ],\n [\"Respond to incoming messages\", 3252]\n ]),\n {\n label: \"Jump to video location\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"## Tarot of the Day\n*What will happen to the price of Bitcoin in the next week?*\n\n

\n\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"## Database (EP01)","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"import {\n firebase,\n viewof user,\n listen\n} with { firebaseConfig as firebaseConfig } from \"@tomlarkworthy/firebase\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"firebaseConfig = ({\n apiKey: \"AIzaSyA9OQ--0Sn8Gm6C1B4M-SbnxRMtKHgnHzs\",\n authDomain: \"agropatterns-iot.firebaseapp.com\",\n databaseURL: \"https://agropatterns-iot-default-rtdb.firebaseio.com\",\n projectId: \"agropatterns-iot\",\n appId: \"1:650132950601:web:115b1ba65750d2b0aaf998\",\n uiConfig: {\n // https://github.com/firebase/firebaseui-web#configuration\n signInOptions: [\"anonymous\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"db = firebase.database()","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"## Realtime Temperature Dashboard (EP02)","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"viewof querySensorName = Inputs.select(Object.keys(latest), {\n label: \"Choose sensor to chart\",\n value: \"dev:864475046458393\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"dashboard = Plot.plot({\n x: { type: \"time\" },\n y: { domain: [0, 40], label: \"Temperature\" },\n color: {\n domain: [0, 40],\n scheme: \"turbo\"\n },\n marks: [\n Plot.rect([{}], { fill: \"#F4BFA6\", y1: 25, y2: 40 }),\n Plot.rect([{}], { fill: \"#A7D3A6\", y1: 5, y2: 25 }),\n Plot.rect([{}], { fill: \"#A4B5E3\", y1: 0, y2: 5 }),\n Plot.ruleY([20], { stroke: \"#0003\", strokeDasharray: [5] }),\n Plot.lineY(\n liveView.filter((d) => d.body.temperature), // Fix for unfiltering data serverside\n {\n stroke: \"#0003\",\n x: (d) => new Date(d.when * 1000),\n y: (d) => d.body.temperature\n }\n ),\n Plot.dot(\n liveView.filter((d) => d.body.temperature), // Fix for unfiltering data serverside\n {\n r: 5,\n x: (d) => new Date(d.when * 1000),\n y: (d) => d.body.temperature,\n fill: (d) => d.body.temperature\n }\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"### streaming query (realtime updates)","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"liveViewRaw = Generators.observe((notify) => {\n db.ref(`history/sensors/${querySensorName}`)\n .orderByKey()\n .startAt(Math.floor(Date.now() / 1000 - 60 * 60 * 24) + \"\") // reduce data returned\n .on(\"value\", (snapshot) => {\n const data = snapshot.val();\n notify(data);\n });\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"liveView = Object.entries(liveViewRaw).map(([k, v]) => v)","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"latest = Generators.observe((notify) => {\n db.ref(`current/sensors`).on(\"value\", (snapshot) => {\n const data = snapshot.val();\n // clear synthetic data from EP01 testings\n delete data[\"sensor2\"];\n delete data[\"defaultSensorName\"];\n notify(data);\n });\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"import { endpoint } from \"@endpointservices/webcode\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"## Aims for this Week (Bidirectional WhapsApp integration)\n\n- Send dashboards over whatsapp\n- Respond to inbound request for data\n\nWe followed the quickstart of [The WhatsApp Business API with Twilio](https://www.twilio.com/docs/whatsapp)","pinned":false,"hidden":false,"mode":"md"},{"id":995,"value":"### Twilio Integration","pinned":false,"hidden":false,"mode":"md"},{"id":686,"value":"TWILIO_ACCOUNT_SID = \"AC10f48e9a0e14f3ea9f27edad5a72929c\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"viewof TWILIO_AUTH_TOKEN = Inputs.password()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1048,"value":"### Test call\n\nWe used the following cell to test we can send a message","pinned":false,"hidden":false,"mode":"md"},{"id":1000,"value":"viewof sendMessage = Inputs.button(\"sendMessage to Twilio API\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"sendMessageResponse = sendMessage !== 0\n ? fetch(\n `https://api.twilio.com/2010-04-01/Accounts/${TWILIO_ACCOUNT_SID}/Messages.json`,\n {\n method: \"POST\",\n body: new URLSearchParams(\n Object.entries({\n From: \"whatsapp:+14155238886\",\n To: \"whatsapp:+4915114338654\",\n Body: \"new image\",\n MediaUrl: pngLink.href //\"https://webcode.run/observablehq.com/d/4e796c3f3029f09e;svg\"\n })\n ).toString(),\n headers: {\n \"content-type\": \"application/x-www-form-urlencoded\",\n authorization: `Basic ${btoa(\n TWILIO_ACCOUNT_SID + \":\" + TWILIO_AUTH_TOKEN\n )}`\n }\n }\n )\n : invalidation","pinned":true,"hidden":false,"mode":"ojs"},{"id":707,"value":"sendMessageResponse.json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"Next we tried to send an image as well using the tutorial [How to Send a Picture on WhatsApp Using Twilio and JavaScript](https://www.twilio.com/blog/how-to-send-picture-whatsapp-using-twilio-and-javascript)","pinned":false,"hidden":false,"mode":"md"},{"id":740,"value":"dashboardEndpoint = endpoint(\"svg\", async (req, res) => {\n res.header(\"content-type\", \"image/svg+xml\");\n const arrayBuffer = await serialize(dashboard).arrayBuffer();\n res.send(arrayBuffer);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1053,"value":"We needed to serialize the SVG, we used Mike Bostock's excellent notebook to help. In the stream I copy and pasted it but since I have replaced it with an import.","pinned":false,"hidden":false,"mode":"md"},{"id":793,"value":"import { rasterize, serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"To test we are serving the SVG properly, we put it in a HTML `` element","pinned":false,"hidden":false,"mode":"md"},{"id":758,"value":"

","pinned":true,"hidden":false,"mode":"html"},{"id":1061,"value":"As it turned out SVG was not supported so we rasterized it and used PNG instead. That worked!","pinned":false,"hidden":false,"mode":"md"},{"id":789,"value":"pngLink = endpoint(\"png\", async (req, res) => {\n res.header(\"content-type\", \"image/png\");\n const blob = await rasterize(dashboard);\n const arrayBuffer = await blob.arrayBuffer();\n res.send(arrayBuffer);\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1065,"value":"## Webhook\n\nNext we built our very basic bot that would respond to requests over WhatsApp. First we needed a webhook to receive events from Twilio's WhatsApp service.","pinned":false,"hidden":false,"mode":"md"},{"id":810,"value":"whatsapp_webhook = endpoint(\"whatsapp_webhook\", async (req, res, ctx) => {\n try {\n const response = await viewof whatsappEvent.send({\n req,\n res,\n ctx\n });\n res.send(response);\n } catch (err) {\n res.status(500).send(err.message);\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1069,"value":"Like in EP02, we spread a complex server over several Observable dataflow cells using a [flowQueue](https://observablehq.com/@tomlarkworthy/flow-queue)","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"import { flowQueue } from \"@tomlarkworthy/flow-queue\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"viewof whatsappEvent = flowQueue()","pinned":true,"hidden":false,"mode":"ojs"},{"id":817,"value":"whatsappEvent","pinned":true,"hidden":false,"mode":"ojs"},{"id":826,"value":"// Incoming requests are URL form encoded, so we have to decode them\nwhatsappIncoming = Object.fromEntries(\n new URLSearchParams(whatsappEvent.req.body).entries()\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":833,"value":"msg = whatsappIncoming.Body // The body contains the chat message","pinned":true,"hidden":false,"mode":"ojs"},{"id":835,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"whatsappEventResolver = {\n chatResponse;\n viewof whatsappEvent.resolve(\"OK\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1076,"value":"## Conclusion\n\nWe can \n\n- Serve Plot Dashboards over a URL\n- Send and receive WhatsApp chat messages!\n- Send live Dashboard data over WhatsApp!\n\n${await FileAttachment(\"image@2.png\").image({style: `max-width: ${Math.min(width, 640)}px`})}","pinned":false,"hidden":false,"mode":"md"},{"id":585,"value":"## Next week","pinned":false,"hidden":false,"mode":"md"},{"id":592,"value":"import { upcoming } from \"@endpointservices/meetups\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"upcoming","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"## Dependancies","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"import { footer } from \"@endpointservices/footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}