shreythecray / serverless-demo

2 stars 0 forks source link

What is your deepest secret? The API #16

Closed ghost closed 3 years ago

ghost commented 3 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.

:question: 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)

💡 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 querystring 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.

:question: 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.

:question: 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)
:question: 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 querystring npm package in order to use it.

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

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.

:question: How do I return the output? ```js context.res = { body: queryObject.Body }; ```
ghost commented 3 years ago

That's it for Week 3, move on to Week 4 in your new issue!