ShunnShine / Serverless-Camp-2022

GNU General Public License v3.0
0 stars 0 forks source link

What is your deepest secret? The API #42

Closed counselorbot[bot] closed 2 years ago

counselorbot[bot] commented 2 years ago

Week 3 Step 6 ⬤⬤⬤⬤⬤⬤◯◯◯ | 🕐 Estimated completion: 10-20 minutes

Can you keep a secret?

This week, you will be going through steps to set up a Twilio account and create an Azure function that texts your Twilio number.

✅ Task:

🚧 Test Your Work

To test your work, try texting a message to your Twilio number - you should receive a text message back that repeats your own message.

❓ How do I find my Twilio number? See your [phone numbers](https://www.twilio.com/console/phone-numbers/incoming).
❓ Example output? ![194569969_1687986154736022_4227041675617722938_n](https://user-images.githubusercontent.com/49426183/120210870-1e99ce80-c1e5-11eb-9619-3a812f6206a7.jpg) > Note: You might not get a text back on your phone because Twilio sometimes won't allow you to return a single variable as the entire body, but as long as the code passes the test, you will be okay!

💡 Yay! This means you've successfully configured your Twilio webhook.

Set Up a Twilio Account

Since you should already have a trial Twilio Account from Week 2, you will only need to reconfigure the webhook URL. You will use the same phone number as before.

1: Create an Azure Function

Next, we'll want to create an Azure Function that will eventually output the content of texts that your Twilio number receives. This will just be a simple HTTP trigger function.

Finally, we need to install the npm package qs to use in our function code later.

2: Configure Your Webhook URL

When someone sends a text message to your Twilio number, Twillio can call a webhook: your Azure Function. You can send a reply back simply by returning your message in the request body.

❓ Webhook? Twilio? I'm lost!
Fear not! [Webhooks](https://www.twilio.com/docs/usage/webhooks) are essentially just HTTP callbacks that are triggered by an event - in our case, this event is receiving an SMS message. When that event occurs, Twilio makes an HTTP request to the URL configured for the webhook.

We'll configure the Webhook URL by filling in the Azure Function URL as a webhook.

❓ How do I find my Azure Function URL?
Navigate to your Function page (Overview), and click `Get Function URL`. ![image](https://user-images.githubusercontent.com/49426183/120208560-784cc980-c1e2-11eb-8ad2-fd18597932ea.png)
❓ How do I configure my Twilio webhook URL?
1. Go to the [Twilio Console's Numbers page](https://www.twilio.com/console/phone-numbers/incoming) ![image](https://user-images.githubusercontent.com/49426183/120208171-06748000-c1e2-11eb-91a7-06c427967d46.png) 2. Click on the phone number you'd like to modify 3. Scroll down to the Messaging section and the "A MESSAGE COMES IN" option. 4. Paste in your Azure Function URL. Make sure to click `Save` afterwards!! ![image](https://user-images.githubusercontent.com/49426183/120208692-a0d4c380-c1e2-11eb-85fa-ed8463d1da43.png)

3. Write your Azure Function

Now, we'll want to write our Azure Function. Go to the code for the function you created previously in this step.

First, we'll need to instantiate our qs npm package in order to use it.

❓ How do I use the `qs` package? ```js const querystring = require('qs'); ```

Next, we'll use the querystring object to parse our request's body.

:question: How do I parse the request body? ```js const queryObject = querystring.parse(req.body); ```

From this output, we'll find its Body attribute and return it.

❓ How do I return the output? ```js context.res = { body: queryObject.Body }; ``` > Since we are returning `queryObject.Body` as the entire body, you might not receive a text back on your phone. This is Twilio's issue, but the counselor bot's test should pass fine if your code is correct still!

📹 Walkthrough Video

walkthrough video

counselorbot[bot] commented 2 years ago

⏰ Time to merge!

Go ahead and merge this branch to main to move on. Great work finishing this section!

merge

⚠️ If you receive a Conflicts error, simply press Resolve conflicts and you should be good to merge!