Nov 8, 2019
 in 
Tutorials

Take a Break

A

s someone who works full-time remote, I find myself easily glued to my monitors for hours at a time. I tend to start my day around 7AM and before I know it, it’s 2PM and I haven’t eaten a morsel of food.

Telling ourselves to get up and take a break can sometimes be easier said than done. Just actively remembering to do it can be difficult if you’re hammering away at a problem while constantly telling yourself “Just 5 more mins” for the next 45 mins.

So, I figured that I could use technology to help remind me to get up and take a break.

For this tutorial, I’m going to show you how to use Twilio SMS and Azure Functions to send a text message to your phone instructing you to “Take a break!”.

Language: JavaScript

Product(s): Twilio SMS and Azure Functions

Prerequisites

Sign Up for Twilio and Get a Phone Number

In order to work with Twilio’s products, you’ll need to sign up and purchase a voice enabled phone number. If you’re new to Twilio, you can start with a free trial. For further assistance on signing up and purchasing a phone number, visit Twilio.

Sign Up for an Azure Subscription

You can create a FREE Azure Subscription to setup your Azure Function. The free trial will provide you with 12 months of free services.

Access the GitHub Repository

Visit my GitHub repository to access the code that will be used throughout the tutorial.

Tutorial

Create a Function App

We’ll start off by creating an app for our timer. In the Azure Portal, click + Create a Resource.

Create a resource

In the Azure Marketplace list, click Compute. In the Featured list, click Function App (note: if Function App does not appear, then click See all).

Featured list

You’ll now need to fill in the function app settings. Use the table below to guide you with how to setup your function:

Azure Settings

Add Function

The function app that we just created needs a function that is configured with a trigger. The trigger will start the function which sends the Twilio SMS message. We’ll be using a Timer trigger for this tutorial.

In the left menu, click Resource groups and select the resource group you created in the last step.

Resource Groups

Click on the App Service (indicated by a lightning bolt).

App Service

Once the page loads, click the + button next to Functions to create a new function.

Add a Function

On the next screen, you’ll need to choose a development environment. Since we’ll be creating the function in the Azure Portal, select In-Portal and Continue.

In Portal

Since we want to create a Timer trigger, you’ll need to select Timer and click Create.

You should now see TimerTrigger1 listed under Functions in the left menu.

Integrate with Twilio SMS

We’ll first need to integrate Twilio SMS with our function. Under TimerTrigger1, click Integrate.

Integrate

Under Outputs, click + New Output and select Twilio SMS.

Twilio SMS

You’ll need to install the Mirosoft.Azure.WebJobs.Extensions.Twilio extension. You can do so by clicking Install. This process can take up to 2 minutes so just give it a moment to complete installation.

Install Twilio Extension

While the installation happens in the background, you’ll need to update the following values:

Twilio Integration Values

These values represent environment variables that we will set after we’ve installed the extension.

Twilio SMS Outputs

Once you are done, click Save.

I prefer to stay on this page until the installation is complete – just to ensure no funny business! Once the installation is complete, you’re ready to add environment variables.

Extension Installed Successfully

Set Environment Variables

When you’re just getting started and testing out all the awesome things that Twilio can do, it’s ok to hardcode your Twilio credentials. However, once you’re in production, you should use environment variables to hide your credentials.  

You should first gather the values needed before creating the environment variables. In the Twilio Console, copy and save the following values:

Twilio Variables

Now that you have your Twilio credentials and number, you’ll want to create environment variables for these values. You can create environment variables in the Azure Portal by going to the Overview tab for your function and click Configuration.

Configuration

On the Application Settings tab, we’ll need to add the following environment variables:

Twilio Environment Variables

I’ll walk you through the first one! To add an environment variable, click + New Application Setting.

New Application Setting

In the Name field, enter the name of the variable (ex: TWILIO_SID). In the Value field, enter the value (ex: ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX).

TWILIO_SID Environment Variable

Now click OK – that’s it!

You will need to add the remaining variables before you proceed.

Note: Phone numbers can be tricky! Be sure to use the E.164 format referenced above for both the RECIPIENT_NUMBER and SENDER_NUMBER.

After all environment variables have been added click Save to save the updates that were made to the Application Settings.

Modify Timer Settings

By default, Azure sets your function to trigger the text message every 5 minutes. You can change how frequent the timer triggers by going to the Integrate and updating the values in Timer trigger.

Timer Trigger Settings

The Schedule field contains a sequence that using CRON expressions. For the purpose of testing the function, change the number 5 to the number 2 and click Save. You can later change the frequency after you confirm that the function works properly.

CRON Expression

Modify function.json File

Now that we’ve added the environment variables, we’ll need to update the function.json file within our TimerTrigger1 function. Head back over to the function app and click TimerTrigger1. On the far-right side of the screen, click View Files.

View Files

You will see two files:

  • function.json
  • index.js

Click function.json to open the file. Since the file is currently missing the “to”: RECIPIENT_NUMBER”, we’ll need to add this to our file.

Head over to the GitHub repo and grab the code for this file. You’ll want to replace the existing code in the function.json file with the new code that you just copied from GitHub.

Add Text Message to the index.js File

When Azure creates a function, it adds default code to help setup your function. We will the code for the Twilio SMS message to this code.

In the View Files menu, click the index.js file. You’ll want to replace the existing code in the index.js file with the code below.

CODE: https://gist.github.com/aprilspeight/d5a885629fe309f637a0a2f14973d1ed.js

You can replace the text in body with the message of your choice. Once you’ve updated the body, click Save.

Install the Twilio Node.js Helper Library

Since we’ll be using the Twilio Helper Library , we’ll need to install the twilio-node from npm so that it’s available to our function. To do so, we’ll need to first add a new file to our function.

Add package.json file

In the View Files window, click Add. Type the file name package.json and click enter. A new blank file should appear in the middle of the screen.

Add package.json

Add the code below to the package.json file.

CODE: https://gist.github.com/aprilspeight/12cf7ce957e0618984c64057758e5855.js

Install the Packages

Now that we’ve added our new file, we’ll need to run npm to install the packages. We’ll use Kudu to do so! Before we head over to Kudu, you’ll want to stop your app. Head over to the Overview page for your function app and click Stop. A pop-up will display to confirm that you would like to stop the app – click Ok.

Stop App

Click on the Platform Features tab. Under Development Tools, click Advanced tools (Kudu). Kudu will open on it’s own in a new window.

Platform Features

In the top menu on Kudu, click Debug console and select CMD.

Debug Console

In the command prompt, we’ll want to navigate to D:\home\site\wwwroot. You can do so by using the command cd site\wwwroot and press enter on your keyboard.

cd to site\wwwroot

If you’re uncomfortable using the command prompt, you could use the GUI above the command prompt window to navigate the file structure.

GUI

Once you’re in wwwroot, run the command npm install twilio to install the package.

npm install twilio

Give it a moment to install. Once it’s done, the console will let you know that the packages have been added.

npm install Complete

You will also notice a new node_modules folder added to the file structure.

node_modules Folder

Back in the Overview tab for the function app, click Start.

Start on Overview Screen

Test Your Function

Head back over to the function app and click TimerTrigger1. Make sure that you’re in the index.js file. Click Test next to View Files (far right-side of the screen). At the top of the index.js file, click Run.

Run the index.js File

If all goes well, you should receive a text message after 2 minutes with your message!

You can adjust the frequency for your timer by heading back to Integrate and changing the Schedule field. Be sure to read up on CRON expressions before entering a new frequency.

If you’re curious to learn more about Azure Functions, I would suggest taking this Microsoft Learn module!

And if you’re wondering what else you can do with Twilio, start up a game of TwilioQuest!

Happy Coding!