Skip to content

Commit 306a370

Browse files
author
Craig Dennis
committed
Adds code and updated notes
1 parent 0ecc60f commit 306a370

File tree

4 files changed

+184
-115
lines changed

4 files changed

+184
-115
lines changed

‎code/3-all-together-now/2-serverless/incoming-message.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// This is your new function. To start, set the name and path on the left.
2+
3+
exports.handler = function (context, event, callback) {
4+
console.log(`Incoming message: ${event.Body}`);
5+
// Here's an example of setting up some TWiML to respond to with this function
6+
const twiml = new Twilio.twiml.MessagingResponse();
7+
twiml.message("Thanks for your submission! 📸");
8+
console.log(`TwiML was ${twiml}`);
9+
// This callback is what is returned in response to this function being invoked.
10+
// It's really important! E.g. you might respond with TWiML here for a voice or SMS response.
11+
// Or you might return JSON data to a studio flow. Don't forget it!
12+
return callback(null, twiml);
13+
};

‎code/3-all-together-now/3-writing-a-server-side-api/api/pics.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
exports.handler = async function (context, event, callback) {
2+
const client = context.getTwilioClient();
3+
const gallery = [];
4+
5+
/* This is the format we need to match. Here for reference
6+
[
7+
{
8+
src: "https://placekitten.com/200/300",
9+
description: "Look at this kitteh",
10+
alt: "A kitteh",
11+
thumbnailWidth: "200px",
12+
},
13+
];
14+
*/
15+
const messages = await client.messages.list({ to: context.TWILIO_NUMBER });
16+
for (const message of messages) {
17+
// You can have multiple medias on each message
18+
const pics = await message.media().list();
19+
for (const pic of pics) {
20+
// Add to the gallery array, use the outer loop's message value to put the same body
21+
// for each pic
22+
gallery.push({
23+
src: "https://api.twilio.com" + pic.uri.replace(".json", ""),
24+
description: message.body,
25+
alt: message.body,
26+
thumbnailWidth: "200px",
27+
});
28+
}
29+
}
30+
// Twilio Function will automatically turn gallery into proper JSON and set the
31+
// header to `application\json`
32+
return callback(null, gallery);
33+
};

‎code/3-all-together-now/4-fetching-results-on-the-client/index.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
rel="stylesheet"
9+
href="https://fonts.googleapis.com/css?family=Open+Sans"
10+
/>
11+
<style>
12+
body {
13+
font-family: "Open Sans", sans-serif;
14+
margin: 5%;
15+
}
16+
</style>
17+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
18+
<script src="https://unpkg.com/[email protected]/dist/vue-silentbox.min.js"></script>
19+
<title>Pick.le: Pick your pics 🥒</title>
20+
</head>
21+
<body>
22+
<div id="app">
23+
<h1>Pick.le: Pick your pics 🥒</h1>
24+
<h2>{{ callToAction }}</h2>
25+
<silent-box :gallery="gallery"></silent-box>
26+
</div>
27+
28+
<script>
29+
Vue.use(VueSilentbox.default);
30+
const app = new Vue({
31+
el: "#app",
32+
data() {
33+
return {
34+
callToAction: "Submit your photos of burritos!",
35+
gallery: [],
36+
};
37+
},
38+
methods: {
39+
async loadImages() {
40+
// Our API is on the same server so we don't need to specify the host
41+
// NOTE: fetch is asynchronous and returns a `Promise`, so we'll `await`
42+
const response = await fetch("/api/pics");
43+
// NOTE: The `json` method on the response object is also asynchronous
44+
// Setting the gallery object automatically causes the API to refresh because
45+
// we bound it to the plugin as part of the `data` API of Vue.
46+
this.gallery = await response.json();
47+
},
48+
},
49+
mounted() {
50+
this.loadImages();
51+
},
52+
});
53+
</script>
54+
</body>
55+
</html>

0 commit comments

Comments
 (0)