Nov 1, 2019
 in 
Tutorials

How I'm Feeling

B

ack in undergrad, I was diagnosed with Major Depressive Disorder. Life was horrible. I went from being socially active on campus, attending events, excelling in class, working all of my jobs and spending time with my sorority sisters to being shacked up in my bedroom off-campus hoping that absolutely no one would surface and ask if I was OK.

It was rough - and it was hard on my mom as well. She’d check in often to see how I was feeling and honestly it was all too overwhelming for me. I had developed an odd phobia of being physically around people - therefore talking was definitely off the table. I resorted to texting her how I felt but even that too became too much effort on my behalf.

We survived those times and I’m doing significantly better nowadays. However looking back on that time in my life, I could only imagine how much of a struggle it was for her to keep up with my emotions when I didn’t want to have anything to do with communicating with anyone.

Communication can be difficult when you’re not in the right head space to function. It can be difficult for someone to understand the communicative struggle we go through when we’re hit with a depressive episode.

Point blank: It’s hard.

However, I recognize that those who care about us genuinely want to know how we’re feeling. So, I figured that there must be some sort of happy medium that would enable someone to share how they’re feeling with minimal effort..

For this tutorial, I’m going to show you how to use Twilio SMS, Azure Functions and a Flic button to send a text message to a designated phone number.

Language: JavaScript

Product(s): Twilio SMS, Azure Functions, Flic

Disclaimer: Mental health is a super serious topic that should not be ignored. This app should not be used in lieu of seeking help if you are in need. Rather, this app could be used to help keep communication channels. Please reach out to someone you confide in if you are struggling with your emotional and/or mental state.

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.

Purchase Flic Button

A Flic is a shortcut button for common tasks to control smart devices wirelessly. You can purchase one here!  

So how does the Flic button work? When a person clicks the Flic button, an action will take place. In our case, a text message will be sent to a designated phone number.

When you tie in everything together, we’ll be following the workflow below:

Flic Workflow

A person will click the Flic button which will trigger the Azure Function to send the Twilio SMS to a designated phone number.

Access the GitHub Repository

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

Tutorial

Decide on Your Messages

What we’re going to do is assign a message to each Flic button action. Each message will reflect a generic response that could be provided to describe how a person is feeling. For the sake of the tutorial, I will narrow down our messages to the following:

Flic Button Actions

Create a Function App

We’ll start off by creating the action for Message 1 (aka 1 click of the Flic button). Once we’ve created the function and implemented the logic, we can essentially duplicate our setup to create two additional functions for the double press and long press of the Flic button.

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 HTTP trigger for this tutorial.

In the left menu, 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 HTTP trigger, we’ll need to use a Webhook + API. Select Webhook + API and click Create.

Webhook + API

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

HttTrigger1

Integrate with Twilio SMS

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

Integrate

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

New Output

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 Settings

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 Application Settings. The Application Settings can be found on the Overview page for your app.

Application Settings

We’ll need to add the following 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).

Environment Variable

Now click Update – 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 function.json File

Now that we’ve added the environment variables, we’ll need to update the function.json file within our HTTPTrigger1 function. Head back over to the function app and click HTTPTrigger1. 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.

You’ll want to replace the existing code in the function.json file with the code below:

CODE: https://gist.github.com/aprilspeight/1c975dfae4749576c3602397a9abd9a4.js

Add Message 1 to the index.js File

When Azure creates a function, it adds default code for a hello world app. We will replace this code with the code for our message.

In the View Files menu, click the index.js file. Replace the existing code in the index.js file with the code below:

CODE: https://gist.github.com/aprilspeight/cd4e1844e35152b8e05b36b21518aa64.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

You’ll want to paste the code from below into the file. I would suggest customizing the values to your liking.

CODE: https://gist.github.com/aprilspeight/3571eb96c67c4fae5c1c273b561c33db.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 the 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.

Change Directory to 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, you will notice a new node_modules folder added to the file structure.

node_modules Added

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

Start the App

Test Your Function

Head back over to the function app and click HTTPTrigger1. 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 App

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

Connect Flic Button

We’re finally at the last step of our tutorial! We now need to add the function URL to our Flic app so that when we click the button, our message is sent via Twilio SMS to the designated number.

Get the Function URL

You’ll first need to grab the function URL. Next to Run in the index.js file, click </> Get function URL.

Get Function URL

Copy the function URL and send it over to yourself in whatever way gets it over to your phone. I send mine via email so that I can easily copy it.

Download Flic App and Pair Flic

Before we download the app, you’ll want to go to your phone settings and ensure that Bluetooth is enabled. Once confirmed that Bluetooth is enabled, head to the App Store or Google Play store to download the Flic app. Download the Flic app and create an account. Once you’ve completed registration, you’ll need to login to the app. An interactive guide will appear and will walk you through how to get Flic paired with your phone.

Add Function URL to Flic

Once you’ve connected your Flic, you’ll need to add the function URL to the first click. Since I have an iPhone, the instructions here will be for iPhone users. In the Flic app, click the Phone tab and select your Flic. Next to Click (this represents 1 click), click the + icon.

Add 1st Click Action

Use the search (magnifying glass) to search for Internet Request and click Internet Request.

Take the function URL for your function pp and paste it in the URL field. Once you’ve added the URL, click Add.

Add Function URL

Test Flic

Here’s the moment of truth – click the Flic button! If all works well, the designated phone number will receive a text message!

Text Message from Flic

To create a function for the remaining two Flic actions, repeat steps 2 - 10! 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 and consider attending SIGNAL 2019! Oh - and before I forget..the scholarship application process is open for those in need :)

Happy Coding!