Trying to make FETCH (errr, a POST request) happen 💅💁🏼‍♀️

This post will walk you through how to use Azure functions and Twilio to send and receive text messages and calls, in this case a quote from a favorite character. I used Cady Heron, but you could pick any of your favorites.

I’m not sure where I would fall on Janis Ian’s map of the North Shore High cafeteria, but it wouldn’t have been with the AP Computer Science kids.

When playing with new APIs and technologies, I love to create apps and demos that incorporate things I love in pop culture (take, for example my Twilizzo demo or my Dollygram demo. After I met Chloe Condon at Girl Geek Dinner at the Microsoft Reactor last month and saw her Fake Boyfriend Demo, I was not only inspired to use Azure Functions + Twilio, but also made it my mission to collaborate on some fun quirky apps with her.

☝ Dramatic reenactment of Chloe supporting me as I write this post 💕

To follow this tutorial, you’ll need a few things:

☁️ An Azure account

Azure Functions make it possible to get projects up and running very quickly, without worrying about spinning up a server. We’ll be triggering our function with an HTTP request, but there are many other ways to execute. If you’ve never worked with Azure before, this Microsoft Learn tutorial on creating your first function could be helpful (it certainly helped me!), and you can dive into the docs too.

☎️ A Twilio account and phone number

If you’ve ever called a Lyft and then had to call your Lyft driver, Twilio makes that possible. Developers use Twilio to programmatically send and receive calls and texts, plus a whole bunch of other things like April's How I'm Feeling app. I could truly spend all day in their docs and tutorials (seriously- there's even a hidden Rick Roll in there), and if you wind up loving the docs as much as I do, check out Hacktoberfest.

Create a Twilio account, and add a trial phone number that can receive texts and calls. If you want to get real specific, you can search for an area code where your character would’ve lived, like, in my case, three miles from North Shore, IL.

This might’ve been obvious, but you’ll also need your cell phone handy for texting/testing your app. 🤳

With all that, we should be ready!

Create an Azure resource

After you’ve created your free Azure account, login to the Azure portal. From there, you’re going to click the Create Resource icon on the left, then Function App on the right.

Now you’ll want to fill in some details about your function:

1️⃣ Come up with a name for your app, anything you like.
2️⃣ Pick a subscription (Free Trial, if like me you’re a student).
3️⃣ Create a new resource group.
4️⃣ Pick Windows as your OS for this demo.
5️⃣ ‘Consumption’ hosting plan is your best bet.
6️⃣ Pick a location based on where you are. For me in San Francisco, that means West US.
7️⃣ I’ll be using Node.js for the runstack for this tutorial.
8️⃣ Pick ‘Create New Storage.’

With those options all set, press Create to deploy your application. You should get a notification that deployment is successful in a minute or two.

You go, Glen Coco! Click the notification button on the bell in the top right, then Go to resource to check out your new app and add a function to it.

Add an Azure function to your resource

Once you’re at your resource, click the + button next to Functions in the left-side menu.

To get going quickly, we’re going to go ahead and pick In-portal for our development.

Press continue after you click that option, then select Webhook + API for our function.

We’re picking this option because when our Twilio number receives a text message, we want it to send a POST request to our Azure function that tells it to run.

With those clicks, you’ll have a basic Hello, World app in your index.js. Click </> Get Function URL at the top of the code, Copy URL, and add &name=your-name to the end of the URL before pasting in your browser and pressing enter. The browser tab should say, “Hello, name” (in honor of Mean Girls Day, feel free to make it "Jambo, name"). 🙋‍♀️

Once you’ve verified that’s working, it’s time to add Twilio!

Installing the Twilio library and messaging in Azure

We need to install Twilio’s helper library to convert the JavaScript in our function to Twilio’s Markup Language (TwiML).

To do that, we first need to add a package.json to our function. Click the View Files option to the right-most side of your screen (you might need to scroll alllllll the way to the right in that bottom grey bar). After that, click, the Add option, and name the file package.json.

Add the following code to your package.json:

Click the large Save button, and head back to index.js. Open up your console, at the bottom of the screen, and type in npm install twilio. This adds the library that we need and creates a package-lock.json, as the red message in your console is probably telling you (don’t worry about that).

Once our library is installed, we can get to writing the actual Twilio code. Here’s mine, feel free to copy directly before making your own, but be sure to check out the comments if you’re unsure what’s happening:

Save your code, and click </> Get Function URL. Now, we’re ready to head back to Twilio and set up our phone number.

Linking our Twilio phone number to our Azure function

Head back to that phone number you added. Scroll down to where it says Messaging, select Webhook, and paste your Azure Function URL in.

Click Save. You’re ready to test -- shoot your number a text.

Woohoo! If your text is working, let’s add a call.

Receiving Twilio calls with Azure

This will work much the same way as our first function, but we’re going to need to record what we want our caller to hear. I used this tool to record and then this tool mashup Cady and Kevin (you can see the full demo here).

Once you’re happy with your recording, you’ll want to upload it to Twilio Assets. Head to the left-hand menu, click Runtime then Assets. Once you’re in your Assets, click the red + button to upload your audio file.

🚨 Important 🚨 you don’t want to share the link to your Asset publicly, which is why I’ve blocked mine out.

Copy the link to your asset, and carry it back to Azure. Create another Azure function. Click the + button by Functions again back in Azure, select the same settings (in-portal and Webhook + API), add another package.json and our Twilio helper library.

Our code to take a call is very similar to our code to respond to a text. Here’s the code I used, but with a placeholder Twilio Asset link, which you should replace with your own. Again, take a minute or two to read through the comments:

When that’s added, click Save, </> Get Function URL, head back to your Twilio number and paste that link as the HTTP POST request when a call is received. Save within Twilio, and you’re ready to test, make that call!

You did it! This is really only the beginning of things you can do with Azure and Twilio. Obviously it’s not October 3rd every day, so if you're reading this after/before 10/3, the number has been updated to respond with a random Mean Girls quote, and I’ll also set up an Azure reminder using the Timer Trigger for Azure Functions to remind me to change the numbers back next year. There’s literally...no limit to what you can do.