Adds code and updated notes

Craig Dennis · Craig Dennis · commit 306a3700023b · 2022-12-16T11:53:31.000-08:00
diff --git a/code/3-all-together-now/2-serverless/incoming-message.js b/code/3-all-together-now/2-serverless/incoming-message.js
@@ -0,0 +1,13 @@
+// This is your new function. To start, set the name and path on the left.
+
+exports.handler = function (context, event, callback) {
+  console.log(`Incoming message: ${event.Body}`);
+  // Here's an example of setting up some TWiML to respond to with this function
+  const twiml = new Twilio.twiml.MessagingResponse();
+  twiml.message("Thanks for your submission! 📸");
+  console.log(`TwiML was ${twiml}`);
+  // This callback is what is returned in response to this function being invoked.
+  // It's really important! E.g. you might respond with TWiML here for a voice or SMS response.
+  // Or you might return JSON data to a studio flow. Don't forget it!
+  return callback(null, twiml);
+};
diff --git a/code/3-all-together-now/3-writing-a-server-side-api/api/pics.js b/code/3-all-together-now/3-writing-a-server-side-api/api/pics.js
@@ -0,0 +1,33 @@
+exports.handler = async function (context, event, callback) {
+  const client = context.getTwilioClient();
+  const gallery = [];
+  
+  /* This is the format we need to match. Here for reference
+    [
+      {
+        src: "https://placekitten.com/200/300",
+        description: "Look at this kitteh",
+        alt: "A kitteh",
+        thumbnailWidth: "200px",
+      },
+    ];
+  */
+  const messages = await client.messages.list({ to: context.TWILIO_NUMBER });
+  for (const message of messages) {
+    // You can have multiple medias on each message
+    const pics = await message.media().list();
+    for (const pic of pics) {
+      // Add to the gallery array, use the outer loop's message value to put the same body
+      // for each pic
+      gallery.push({
+        src: "https://api.twilio.com" + pic.uri.replace(".json", ""),
+        description: message.body,
+        alt: message.body,
+        thumbnailWidth: "200px",
+      });
+    }
+  }
+  // Twilio Function will automatically turn gallery into proper JSON and set the 
+  // header to `application\json`
+  return callback(null, gallery);
+};
diff --git a/code/3-all-together-now/4-fetching-results-on-the-client/index.html b/code/3-all-together-now/4-fetching-results-on-the-client/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Open+Sans"
+    />
+    <style>
+      body {
+        font-family: "Open Sans", sans-serif;
+        margin: 5%;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.13"></script>
+    <script src="https://unpkg.com/vue-silentbox@2.3.1/dist/vue-silentbox.min.js"></script>
+    <title>Pick.le: Pick your pics 🥒</title>
+  </head>
+  <body>
+    <div id="app">
+      <h1>Pick.le: Pick your pics 🥒</h1>
+      <h2>{{ callToAction }}</h2>
+      <silent-box :gallery="gallery"></silent-box>
+    </div>
+
+    <script>
+      Vue.use(VueSilentbox.default);
+      const app = new Vue({
+        el: "#app",
+        data() {
+          return {
+            callToAction: "Submit your photos of burritos!",
+            gallery: [],
+          };
+        },
+        methods: {
+          async loadImages() {
+            // Our API is on the same server so we don't need to specify the host
+            // NOTE: fetch is asynchronous and returns a `Promise`, so we'll `await`
+            const response = await fetch("/api/pics");
+            // NOTE: The `json` method on the response object is also asynchronous
+            // Setting the gallery object automatically causes the API to refresh because
+            // we bound it to the plugin as part of the `data` API of Vue.
+            this.gallery = await response.json();
+          },
+        },
+        mounted() {
+          this.loadImages();
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/course-notes.md b/course-notes.md
