ghost
commented
3 years ago Week 2 Step 8 ⬤⬤⬤⬤⬤⬤⬤⬤ | 🕐 Estimated completion: 5-10 minutes
Ok, Boomer :neutral_face:
✅ Task:
Modify your Azure Function so that it texts the user back with a song.
- [x] Retrieve song url from a JSON object
const songs = {"GenZ":"https://open.spotify.com/track/0SIAFU49FFHwR3QnT5Jx0k?si=1c12067c9f2b4fbf", "GenY":"https://open.spotify.com/track/1Je1IMUlBXcx1Fz0WE7oPT?si=a04bbdf6ec4948b9", "GenX":"https://open.spotify.com/track/4Zau4QvgyxWiWQ5KQrwL43?si=790d9e3ef2ed408d", "BabyBoomers":"https://open.spotify.com/track/4gphxUgq0JSFv2BCLhNDiE?si=1abb329f2dc24f50", "Unknown":"https://open.spotify.com/track/5ygDXis42ncn6kYG14lEVG?si=84b49b41d09d4d11"} - [x] Use
${}to quickly insert strings - [x] Return the url with a personalized message in the body of the request formatted like
We guessed you're part of this generation: [insert generation]! Happy listening! [song link]` - [x] 🚀 Commit your updated code to
song4u/index.jsin thesong4ubranch
🚧 Test Your Work
To test your work, try texting a jpg image to your Twilio number (with a face!). You should receive a text back that contains the required message format.
Example:
Sent from your Twilio trial account - We guessed you're part of this generation: GenZ! Happy listening! https://open.spotify.com/track/0SIAFU49FFHwR3QnT5Jx0k?si=1c12067c9f2b4fbfWorking with JSON
JSON has keys and values. In our case, the generation is the key, and the url is the value.
See if you can determine the url with this syntax:
let value = json_object[key]Shortcuts with Strings
You might be used to concatenating strings and variables like this:
let string = "Hello " + nameThat can get tiring, though. Try this syntax:
let string = `Hello ${name}`
HyperPandaz
Week 2 Step 7 ⬤⬤⬤⬤⬤⬤⬤◯ | 🕐 Estimated completion: 15-25 minutes
How old are you??
✅ Task:
Modify your Azure Function so that it determines the user's generation.
node-fetchto create aPOSTrequest to the Face API to receive an age.song4u/index.json thesong4ubranch🚧 Test Your Work
To test your work, try texting a jpg image to your Twilio number (with a face!). After you text the image, you can
context.log(age)orcontext.log(generation)to verify that your program and the FaceAPI is working!❗ Twilio does not allow a simple string to be sent. For example, the following code will NOT send a text back, but will still pass the bot's test, and allow you to move on to the next step.
Downloading image data
Based on the previous step, you should now be able to access your image url. We were able to access it with
queryObject.MediaUrl0.:question: How do I download the image?
Perform a quick GET request with fetch. > :bulb: Remember that you need to initialize variables for your packages! ```js let resp = await fetch(YOUR_URL,{ /*The await expression causes async function execution to pause until a Promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise*/ method: 'GET', }) // receive the response let data = await resp.arrayBuffer() // we are receiving it as a Buffer since this is binary data ```
Analyzing the image
Recall the
analyzeImage()function we wrote in the previous project. This time, you will be calling for age data instead of emotion data.:bulb: Don't forget to read the documentation!
❓ What's the syntax again?
:goal: Retrieve age data from the Face API. ```js async function analyzeImage(img){ const subscriptionKey = process.env['subscriptionkey']; const uriBase = // WHAT'S YOUR ENDPOINT?; // env variables (similar to .gitignore/.env file) to not expose personal info let params = new URLSearchParams({ 'returnFaceId': 'true', 'returnFaceAttributes': //WHAT GOES HERE? }) // making the post request let resp = await fetch(uriBase + '?' + params.toString(),{ method: 'POST', body: img, // img is the parameter inputted headers: { 'Content-Type' : 'application/octet-stream', // HOW DO YOU AUTHENTICATE? } }) // receive the response let data = await resp.json(); return data; } ``` However, this code won't work. Fill in the code where needed **using your previous project and the documentation**.❓ How do I get an age from my analysis function?
Like you've done before, **call the `analyzeImage()` function with your image you downloaded.** > :bulb: Tip: Always `context.log()` your output so it's easier to determine how to access object attributes. The function returns face data formatted in JSON. We can determine the age like so: ```js let age = result[0].faceAttributes.age ``` This retrieves the **first face**, the `faceAttributes` attribute, and the `age` attribute from the previous object.Determining and returning Generation
Using the provided names and age ranges, you can use if else logic in Javascript to determine the generation.
:exclamation: Example please!
```js if (age >= 5 && age <= 25) { id = "GenZ" } ``` `id` is the variable we will return as the final generation. `&&` means "and". The age needs to be greater than/equal to 5 AND less than/equal to 20 for the `id = "GenZ` to run.Remember, Twilio will not allow a simple text like
GenZto go through, so all you have to do is return the generation in the body! We will return more data in the next steps, so you will be able to get a text back.