Leverage the power of Twilio from Azure Mobile Services

Ever wanted to send a simple text message from your web app? Well, now you can by using Twilio - an awesome cloud-powered API for voice calls & text messaging. Okay, I know that statement sounds like something out of an infomercial, but I recently had a simple need to send text messages from Windows Azure Mobile Services (WAMS), and after a bit of research, I came across Twilio which allows me to do just that.

Using Twilio from within WAMS can be quite tricky at first, but after a few practise rounds, I finally got the hang of it and realized that its actually very simple and easy to use, so I decided to write about how Twilio and WAMS together can solve a simple real-world scenario.

Setting the scene

Ever returned to your car realizing you've left the lights on, leaving you with a dead battery and wished that you just knew earlier? I had a simple idea for an app that might solve this problem: To showcase some features, I've built a little app (also hosted in Azure) that allows any good citizen in your community to anonymously report incidents like these from their phone directly to the owner of the vehicle via text messaging, without knowing their contact details.

How it works

Firstly, the owner of the car needs to register their car registration- and contact number on a secure website, then anyone with access to the special incident reporting app are able to submit details about the incident, like open windows or switched on lights. As a result, the owner of the car gets notified via a text message, informing him/her about the problem.

Enough talking, let's get coding!

To get started you'd need the following:

- A Windows Azure Account - sign up here
- A Twilio Account
- Some Node.js knowledge and Node Package Manager
- Git-based source control, like GitHub for Windows

Creating the back-end

From within Azure, create a new Mobile Service:

Head to the API section and create a new API called 'incidents':

The last thing to do is to create a new 'subscribers' table from the data section. 

Note: I've also pre-populated this table with an entry containing my name, number and car registration as identifier.

Setting up source-control

From the dashboard, under the 'Quick glance' heading, click the 'Set up source control' link and follow the prompts (it may ask you to create some credentials). Once it is done configuring the source control, go to the 'Configure' section and copy the 'Git URL' provided under the 'Source Control' heading.

You can use the Git URL in your favourite Git manager. Personally, I like Git for Windows, so I just drag-and-drop this URL into Git for Windows and it will add it to the client.

Once the repository is cloned, you can use your favourite text editor, like Sublime Text, to access and edit your mobile service from the 'services' folder within the cloned location on your hard-drive.

Now that we have a local copy of the code, we can use the Node Package Manager to install the 'Twilio' package. To do this:

1. Open Command Prompt as administrator and navigate to the 'service' folder.
2. Type 'npm install twilio' and hit ENTER
3. This will download the Twilio client into the service folder.

Remember to commit the changes back to the server once it has successfully downloaded the package!

The next thing we need to do is to open the 'incidents.js' file from the 'api' folder and replace the code with the following:

The code above basically creates a 'POST' endpoint that receives the 'Identifier' (car registration number) and 'Comment' from the request body and cross-references it against the 'Subscribers' table. If a subscription is found for a particular registration number, it simply compiles a message and sends a text to the number defined in the table.

Note that after installing the Twilio package from NPM, we can use the require('twilio') function to get an instance of the Twilio class.

After saving the 'incidents.js' file, commit changes to source control and the changes should reflect online.

The front-end

Doing the front-end is very easy. Simply create a new HTML and JavaScript files containing:

Taking it for a spin

 

Conclusion

As you can see, its that easy to use all the cool tools out there on the cloud to do exactly what we want. By combining the power of Azure and the functionality of Twilio, gives us new opportunities to solve modern problems.

Hope this quick tutorial might help someone somewhere out there.

Till next time.

@FanieReynders