How To: (Easily) Integrate Texting into your Web App feat. Twilio

Katherine Evans
Sep 2, 2018 · 6 min read

Now, I’d like to preface this post by stating a few important things:

1) This post is designed for those of us programmers who are just starting out. As a bootcamp grad, I have a special place in my heart for other bootcamp students (*highfive* to all Actualize students).

2) It should go without saying, these are JUST my opinions! If you’ve found a better texting API or prefer different frameworks, OF COURSE use them. But in this post, we will be using Twilio’s API and Rails for the backend. Provided that people find this helpful, I will include integrating it into Vue.js for the frontend while using customizable params!

3) This “tutorial” presupposes you know the basics of rails/a backend framework (including helpful gems like cors, figaro, etc), and Terminal/command line tools. (If you notice anything that’s unclear, or needs fixing, let me know in the comments! Feedback is much appreciated.)

4) This is pretty cool! I hope you feel accomplished when you get this feature up and running.

***

“Why did you choose Twilio?” - Great question random reader!
As a fledgling programmer, it’s often hard to wade through morass of confusing lingo, excessive descriptions, and complicated documentation in any API. What set Twilio apart was how easy it was to find answers to my [many] questions. They had simple, straightforward, at times even excessive, documentation. They offer Quickstart Guides, Tutorials, and helpful Reference Docs. In addition to all of this information, there is an extremely helpful walkthrough on Twilio’s Github account (specifically for Ruby).

Twilio also didn’t require a credit card to sign up, a BIG selling point for me. Given that this was just for testing/demo proposes and I’m not planning on turning this project into an actual business, demo mode worked just fine!

Lets get started!

Signing up for Twilio at Twilio.com:

And they really mean no credit card required!

Note: Under “CHOOSE YOUR LANGUAGE”, they are referring to programming language, not spoken/written language! For the purposes of this post, I’ve selected Ruby.

After you’ve entered in the requested information, click the “Get Started” button. You’ll see this screen:

*Important Note* The number you enter here is the number with which you will test this feature. Make sure it’s your personal cellphone number. You’ll then be asked to confirm your identity with the 4-digit code sent to your phone. (For anyone curious, they haven’t called me to try and sell me on their product! Another plus for Twilio)

Once you’ve verified your identity, you’ll be brought a dashboard like console:

To progress from here, click on the “Learn & Explore” box to start a project.

Now, you may want to give a name to your project, and follow the steps you see on the next page, but I chose the “Skip Remaining Steps” link at the very bottom of the page and my project unfolded just fine!

Skip it, skip it reeealll good.

Finally we come to your main dashboard page! This is where we encounter our first two pieces of [very] necessary information: our ACCOUNT SID and AUTH TOKEN (which I’ve blacked out). Now it’s time to open up your Terminal and your Rails backend…..

HA! Nice try, did you really think I’d share my Auth Token with you?

Installation of Twilio:
To manually install twilio-ruby via Rubygems, simply enter this command in your Terminal:

gem install twilio-ruby -v 5.12.4

After installation, please open your Rails project and navigate to your Gemfile. Please make sure that you enter twilio’s ruby gem among the other gems present:

gem ‘twilio-ruby’, ‘~> 5.12.3’

Before this gem will work, you must kill your Rails server (if up and running) and bundle install to make sure that all of your gems are up to date with what you currently have in this file! THIS IS AN IMPORTANT STEP! You could have excellent code written that just won’t work because some of your gems are not properly installed.

Secure Token Storage:
Once you’ve installed your gem(s) properly, it’s time to utilize our ACCOUNT SID and AUTH TOKEN and get Twilio up and running in our app. Presupposing that you’re pushing your code up to GitHub to save it, you’ll will want to safely store your *private* information in a way that won’t be shared with anyone who happens upon our code. In your Rails backend, we’ll store these two pieces of information in the config > application.yml file. Your code will look something like this, but you can feasibly name these two pieces of information whatever you want - I suggest you follow this naming convention.

Obviously you’ll want to replace the fake token keys with the real things!

Now that we have our AUTH TOKEN and our ACCOUNT SID saved in our Rails app, it’s time to locate the Twilio phone number you were assigned. Scroll down on your Twilio dashboard and you’ll see a section labeled # Phone Numbers:

Click the “Get a Number” button and you’ll be prompted to accept a phone number that they’ve shared with you. You can select a different number, but given that this is just a test/demo for a capstone project, I elected to use the number initially provided. Copy and past this phone number in your notes, we’ll need it shortly!

A method to the madness:

It’s time to create a method to call! This code, I pulled right from the GitHub Document and modified. How amazing is it to find good documentation? I love it!

Take a close look at this code:

Please note: GitHub shows require ‘twilio-ruby’ at the top of their “Getting Started - Setup Work” section. If you’ve properly installed your gem, this line of code isn’t necessary, so I show it commented out.

The next thing to note is that I’ve created a Twilio Controller - this isn’t necessary as you can create/call this method in any controller you want. The important thing is that you have a method to call and an associated route. My method is “index” and my route is:

post “/sendtext” => “twilio#index”

(Please note that I’ve used an API namespace in front of my controller name. All of my routes can be found in a namespace :api do/end loop in routes.rb. This isn’t necessary and my controller name would otherwise be: class TwilioController << ApplicationController - which is totally acceptable!)

When calling up a saved piece of data (an environment variable) in Rails, you must enclose it in ENV[“whatever_you_called_it”] tag. This allows you to store personal data for recall without broadcasting it to the world. You’ll notice that I didn’t really care about saving my phone number as an environment variable, that’s just personal preference!

When you first build this method, I strongly recommend that - rather than utilizing params like I did - you hard code in a message like so:

Hardcoded phone numbers and text body!

This will allow you to test your route/method much easier than writing the additional code necessary to pass params on the frontend. (Full disclosure, I pulled this code from GitHub, I have no idea where these numbers lead! Don’t call them! Hahah)

I also removed the portion of code that reads “api.account”, you’ll note above that my code reads: @client.messages.create. Play around with this code and see what works for you, but this is what worked for me.

Once this method is created (WITHOUT params), all you need to do to run it, is to visit the route at http://localhost:3000/whatever_you_named_the_route. And voila! You’ve just integrated a really cool feature into your app/capstone project.

Text yourself a virtual pat on the back.

Katherine Evans

Written by

Chicago-based Web Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade