Register by 10/16 for $250 off the on-site price.
Build the future of communications.
Start building for free

Build SMS Notifications With AngularJS, Firebase, and Twilio

logo

Christoffer Klemming started out programming pacemakers and ended up a Google PMM. Back home in Stockholm, Christoffer was focused on writing code. When he crossed the pond to work at Google, code took a backseat. But, he still used his programming mindset in a less code-intensive job. “Programming is really a mindset in how to break down big problems into smaller chunks that each can be logically solved, rolling back up to the whole,” says Christoffer.

Using AngularJS and Twilio helped him break down and roll up a problem that Bay Area residents know well – waiting in lines. A simple text can cut out the hassle of being stuck standing in line, waiting for your name to be called. Christoffer’s company, Waitwhile, allows businesses like beauty salons or restaurants to text waiting customers when they’re ready to serve.

It’s a simple, powerful solution for an annoying problem. MVC also happens to be an annoying problem for Christoffer. It’s one he solved using AngularJS. “I’m admittedly not an expert in MVC frameworks but I did spend a lot of time upfront researching what technology stack to use, essentially trying to answer: “what is the most future-proof way to build an app in 2015’.”

He landed on a combination of Twilio SMS, AngularJS, Firebase, and Ionic. Christoffer was surprised at how fast he got up and running after watching a tutorial on Watch and Code. Now he’s spreading the good word of AngularJS, showing you how to build SMS notifications with AngularJS and Firebase.

Check out his tutorial below.

Waitwhile – Building SMS Alerts For People In Line
Waitwhile is built with AngularJS and Firebase for storage and authentication, and relies on Twilio for 2-way texting. This post will explore how to juice up your client-side app with realtime text notifications using Twilio together with Zapier and Firebase.

Note: this post assumes you already have a Firebase instance up and running. If not, here’s a great 5 min tutorial.

Once you have a Firebase application configured, here’s how to get SMS with Zapier and Twilio set up in eight steps:

Step 1: Implement your app so that when you want to trigger an SMS, you create a new Firebase child object to a new child node (e.g. /sms/). Make sure to populate the SMS child object with the recipient’s phone number as an attribute:

var sendSMSText = function (recipient) {
var smsQueue = new Firebase('https://.firebaseio.com/sms/' + recipient.phone);
smsQueue.set({
name: recipient.name,
phone: recipient.phone
}, onSuccess)
};

You can also personalize the SMS with attributes like recipient name, sender or even media links. Make sure to add at least one Firebase object to /sms/ so that Zapier can recognize it later.

Step 2: Create your Twilio account. You get a “free number” from where your Twilio SMS will be sent from. If you want to be able to send SMS to numbers other than your own, you’ll need to load some Twilio credit. Fortunately, each SMS costs as low as $0.0075 and is well worth it.

Step 3: Create your free Zapier account. It’s free up to 100 zaps per month. Select “Create a new Zap” to get started.

Step 4: In the Zap edit mode, select Firebase as the trigger. Choose “New item in Queue” as the trigger setting. This is more reliable than triggering based on Added Child Record, as it reduces risk of duplicate entries and gives you more fine-grained control.

Note: it will remove the Firebase SMS child object once sent out, so treat that path as a temporary message queue in Firebase. If you want to store the SMS object in Firebase you’ll need to also record it under a permanent path, e.g. /smsHistory/).

image 3

 

var sendSMSText = function (guest) {
var smsQueue = new Firebase(FIREBASE_URL + 'sms');
    var personalizedText =
Hello + guest.name . Thanks for visiting  + guest.sender + ./n/n
Your expected wait is is  + guest.eta +  min.

smsQueue.push({
name: recipient.name,
phone: recipient.phone,
        text: personalizedText
})
};

Then in Zapier just insert the “text” attribute as the entire Message. This has the added benefit of making SMS text changes more maintainable as you can do it directly in your app code.

"sms" : {
     "alertSms" : {
         "$smsId" : {
            ".write": "auth != null && newData.child('userId').val() == auth.uid",
            ".validate": "newData.hasChildren(['phone', 'name', 'text'])
             && newData.child(phone).val().matches(/* regex to check format */)
       }
   }
}

Support voice mail for incoming calls

Oh, since all your SMS will be sent from your Twilio free number (unless you upgrade), recipients may try to call it. To solve for this you can code your own Twilio voice mail using Twilio XML which a synthetic voice will read out!

<?xml version="1.0" encoding="UTF-8"?>
<Response>
   <Say>
You have reached the Waitwhile voiceline. Please leave a message at the beep.
   </Say>
   <Record
       action="http://foo.edu/handleRecording.php"
       method="GET"
       maxLength="20"
       finishOnKey="*"
       />
   <Say>I did not receive a recording</Say>
</Response>

Two-Way SMS

Finally, you can set up two-way SMS functionality by essentially reversing the Zapier flow (i.e. have a Firebase child record be creating by a Twilio new incoming SMS):

Sign up and start building
Not ready yet? Talk to an expert.