If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

In this tutorial, you’ll learn how to use the Twilio Message API plugin. The API allows you to interact with Twilio SMS data.

To make it easier to use, we’ve created a plugin with some ready-made services to use the Twilio API.

Before you begin

Tutorial level: intermediate.

Before using the Twilio Message API plugin, you’ll need to sign up for a developer account (https://www.twilio.com/try-twilio) to get the API keys. You can sign up after importing the plugin.

Create a new app

To start you are going to create a new app.

  1. Click Create new app button. For app name enter: TwilioApp and click Create
  2. When the app builder loads, you will see the Start page. Every new app has a default page. You can open the page by going to Pages > startScreen.

Next you are going to import the Twilio plugin.

Import the plugin

  1. To import the plugin, click Create New > From Plug-in:
    002-CreateNew_FromPlugin
  2. Check the box for Twilio Message API
    003-Twilio_SMS_API_Plugin
  3. Click Import selected plug-ins. You’ll be asked whether you want to enter Twilio account information. The only value you should enter at this point is your Twilio telephone number (you will get one once you setup your Twilio account). The accountSid and authToken values you will set in the the next step.
  4. Select Twilio_Send as start page.

The app has two pages. One page to send a message and another page to see a history of all the messages you sent. To navigate between the pages click the menu icon in the upper left corner to open up a sliding menu.

Screen Shot 2015-04-13 at 12.13.56 PM

Screen Shot 2015-04-13 at 12.14.06 PM

It’s important to protect the Twilio accountSid and authToken values. If someone gains access to your Twilio account information they will be able to send messages on behalf of your account.

To protect the values you are going to store them in a database on the server. This way no one will be able to view these values in the app (client).

Setting up database for secure storage

You are going to store the sensitive data (accountSid and authToken) in the database.

  1. From the app builder, click “Database” (upper right corner) or go to http://appery.io/database
  2. Click “Create new database”. For database name enter: TwilioDB. Click “Create”.
  3. Now you need to create a new collection. Click “Create new collection”. Name the collection Credentials.
  4. Click “+Col” to create a new column. Name the column: key
  5. Create another column and name it: keyValue.
  6. Now you are going to enter the Twilio keys into the database. Click “+Row” and enter accountSidProxy and its value (you can copy the AccountSid and AuthToken test values for developing purposes here)

    Please read more about Twilio test credentials here.

  7. Click “+Row” again and enter authString as key name. Its value will be a combination of AccountSid and AuthToken. Combine these values separating them with colon as following:
  8. Now this string should encoded as Base64. You can use any tool you want, for example – https://www.base64encode.org/. Alternatively, you can use the browser console and run this Javascript (replace user1 and pass1 with Twilio credentials):
    You should get something like that after encoding:
  9. Add Basic in the very beginning of that string and paste it to keyValue column for authString key.
    Note: there is one space between Basic word and encoded string. See screenshot below.
    Your collection should look like this:

Now these values are stored in the database and are secured.

Next you need to tell the Twilio services to use the data from this database/collection. To do that you are going to create a secure proxy.

Setting up secure proxy

  1. Click on “Secure Proxy” tab or go to http://appery.io/proxy
  2. Click “Create new proxy”, name the proxy TwilioProxy. Click “Create”.
  3. In the proxy setting page check Use proxy + store sensitive (private) data in database.
  4. For Database select TwilioDB.
  5. For Collection select Credentials.
  6. For Key column select key and for Value column select keyValue.
  7. Click Save.

You are almost done. Now you just need to tell the Twilio API services to use this proxy.

  1. In the app builder, open Services > Twilio_sendMessage.
  2. Check Use Appery.io proxy and select the proxy that you just created. If you don’t see the proxy click the refresh button.
  3. Repeat the same for Twilio_showMessages service.

Running the app

That’s all you need to do. You can now run the app by clicking the Test button.