Build SMS Notifications With AngularJS, Firebase, and Twilio

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:

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

 

  • Brandon Batie

    Is this tutorial for all in-app messages or does it use the devices sms app?

    • http://www.twilio.com Twilio

      Hey @Brandon, this tutorial uses the device’s native SMS app.

  • pbreit

    Shouldn’t this be pretty doable without Zapier?

    • http://www.twilio.com Twilio

      Indeed. Zapier is an option for an SMS trigger, but not required.

  • Dave

    “New Item In Queue” seems to no longer be available on Zapier.

    • Christoffer Klemming

      Hey Dave. I noticed that too as I was creating new zaps. Not sure why they have removed that, but old zaps with New Item in Queue seem to still be working.

      My guess is that they have made Child Changed / Added more reliable now.

      • Dave

        I emailed Zapier support about this: “This trigger has been removed as it had the side effect of deleting data
        it reads, and that’s definitely not something we want to take chances
        with! I’m afraid we most likely won’t be bringing it back.”

        As a result, I’m moving on to use AWS lambda instead.

        • Christoffer Klemming

          That’s a shame. If you can contain the data deletion from the trigger, it works extremely reliable. Good luck with AWS nonetheless.

          • Dave

            What do yo mean “contain the data deletion”? There’s no way for me to test it because I can’t create a new zap with this trigger.

          • Christoffer Klemming

            Sorry, let me rephrase. I think it is a shame that Zapier removed this trigger, because if the user can contain/control the data deletion in Firebase it is actually really robust. I have been using it for Waitwhile.com for 3 quarters without interruption for hundreds of thousands of texts.

            But I can see how Zapier want to avoid the risk of being part of accidentally deleting someones critical Firebase data. It happened to us while we were experimenting; luckily Firebase could restore it.

            In any case, without the trigger available anymore you have no option but try a different solution.

  • http://stewartmccoy.com/ Stewart McCoy

    Great article! Found this super helpful for my personal project :)

    There’s an error in this post. The image underneath ‘Two-Way SMS’ doesn’t reflect what’s being suggested. The zaps need to be switched so that when a new SMS is sent to your Twilio number, a child record is created on Firebase. See my attached screenshot.

    • Christoffer Klemming

      Thanks, good catch!
      @Twilio folks, are you able to amend?

  • http://stewartmccoy.com/ Stewart McCoy

    @christofferklemming:disqus First, thanks for the writeup! Super helpful. However, I’m trying to accomplish the two-way sms you suggest is possible by reversing the zap so that when an SMS is sent to my Twilio number I can create a child record on Firebase.

    I’m running into a problem, though, in that the data sent back includes only two numbers. Those numbers are ‘To’ (and that would be my Twilio number) and ‘From’ (the original recipients number). Absent is the third number, which would be the original sender.

    Do you have suggestions for navigating around this issue?

    • Christoffer Klemming

      Yeah, that’s a little tricky. My solution (workaround) is to iterate over a list of saved recipients which each is associated with the sender, to find the sender and do some action.

      I think long-term you may want to create a unique Twilio ‘To’ number for each sender in your application and use that unique number when sending.

      • http://stewartmccoy.com/ Stewart McCoy

        Thanks! I’ll have to think about how to accomplish this…seems a bit hacky, but worth a shot!

      • http://stewartmccoy.com/ Stewart McCoy

        @christofferklemming:disqus Thanks again for your replies. However, I tried this approach again and ultimately I ran into the same problem. When an SMS is received the meta data does not provide the sender, so you have no number with which to reference the original sender even if when the original child record was created the original sender was recorded.

        Another problem is that if you want to use Twilio’s Messaging Copilot service to dynamically route SMS between users with a “sticky sender” number (using the same From number each time), Zapier doesn’t allow for this because the zap requires a ‘From’ number and there is no way to specify the messagingServiceSid that Copilot uses.

        All that’s to say, I still don’t think it’s possible to use Zapier in conjunction with Firebase and Twilio to enable two-way SMS (assuming you’re going to have more than 2 users on your app).

      • http://stewartmccoy.com/ Stewart McCoy

        Thanks again for your replies. However, I tried this approach again and ultimately I ran into the same problem. When an SMS is received the meta data does not provide the sender, so you have no number with which to reference the original sender even if when the original child record was created the original sender was recorded.

        Another problem is that if you want to use Twilio’s Messaging Copilot service to dynamically route SMS between users with a “sticky sender” number (using the same From number each time), Zapier doesn’t allow for this because the zap requires a ‘From’ number and there is no way to specify the messagingServiceSid that Copilot uses.

        All that’s to say, I still don’t think it’s possible to use Zapier in conjunction with Firebase and Twilio to enable two-way SMS (assuming you’re going to have more than 2 users on your app).