Twilio, Ionic Framework and Node.js – A Message & Call App

Tweet about this on TwitterShare on LinkedIn2Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Twilio, Ionic Framework and Node.js – A Message & Call App

Also checkout Ionic Restify MongoDB – An End to End Hybrid App, Ionic Framework, Angularjs & PhoneGap Build- The Awesome Threesome! and Architecting a Secure RESTful Node.js app

In this post, we will take a look at integrating Twilio, Ionic Framework and Node.js to build a Mobile Hybrid app named “The Twilio App“.  This app can send SMS or trigger calls using the Twilio cloud based API’s. We will be using Ionic Framework as our Mobile Hybrid app framework and Node.js/Express.js as our REST Server to customize the responses. We will also use DiskDB to keep a track of our API calls.

The final app would look like Screenshot_2014-09-14-18-34-16

Screenshot_2014-09-14-18-37-33Screenshot_2014-09-14-18-38-21 Screenshot_2014-09-14-18-39-03

And the call you get would sound like

 

You can find the complete code here.

So let us get started.

Set up a Twilio Account

If you do not have a Twilio account, you can follow the below steps to create an account and get a phone number for your account.

Step 1 :  Navigate to Try Twilio and Create an Account.

Step 2 : Validate your personal phone number by verifying either by text or a call

Step 3 : By Default you would be given a Twilio Phone Number like

Screen Shot 2014-09-14 at 7.24.08 pm

You can either use it as is or you can choose your own. Post that you can test drive Twilio and navigate to your account.

Screen Shot 2014-09-14 at 7.26.15 pm

That is all you need to set up your twilio account.

Now, on your Dashboard, you will find the Account SID and Auth Token.

Screen Shot 2014-09-14 at 7.29.20 pm

Keep them very close to your heart. 

We will use these two values to authenticate our Node.js app with Twilio.

Build the REST API

Our Twilio app will have an interface to send a message to a user and to trigger a call to a number (Note : Trial accounts can only make calls/send messages to verified numbers). We will also have another endpoint that will be used by Twilio to respond to the call (more about this in a moment).

Let us get started by creating a new folder named myTwilioApp. To keep the code organized, we will create 2 folders named server and client inside the myTwilioApp folder.  The server will contain the Express app and the client will contain the Ionic app.

Let us initialize a new node project. Open a new terminal/prompt inside the server folder and run

npm init

and fill it up as required.

We will now install the required dependencies to run the project. Execute

npm install --save body-parser cookie-parser debug diskdb express morgan twilio

This will take a few moments while all the dependencies are downloaded. The final package.json would look like

Once this is done, create a new file at the root of the server folder and name it app.js. This file will contain the express configuration and initiation code. Open app.js in your favorite editor and update it like

Things to notice.

Line 8 : We have made a folder named mp3 as a static folder. We will see why soon.

Line 17 : We are dispatching CORS headers so that our clients can access the data we are exposing.

Next, create a new folder inside server and name it routes. Create a new file named index.js inside the routes folder. This file will contain the 3 routes.

First, we are going to create a route for  /sendmsg endpoint. This end point would be of type POST. When a clients triggers this endpoint, it is expected to send a number to which a message needs to be sent and the actual message.

We take this info and call the Twilio service using the Twilio node client. Then we will return the response back to the client, if the process was a success or a failure.

The same gets applied to the  /triggercall endpoint. Except here we take the number to which we need to place a call to and then call the Twilio service.

The final end point will be /call/:id. This endpoint will be hit by Twilio to read out the response for the call. This endpoint is responsible for dispatching a XML or rather a TwiML. A TwiML is a set of instruction that the Twilio service would execute once the call is answered by the user. This is pretty much the voice message you heard above.

Our final routes/index.js would look like

Things to notice

Line 14 : We call the  sendMsg() to trigger sending a new message to the provided number.

Line 23 : We respond with a success or error depending on the response from Twilio.

Line 38 : We call the triggerCall() to trigger a new call to the given number

Line 47 : We respond with a success or error depending on the response from Twilio.

Line 54 : We init a new TwimlResponse()  and build the response object.

Line 66 : Here we customize the output depending on the URL, which we will configure when we trigger the call. This way we can have a user specific response built.

Line 70,76 : As part of the app, we will play a simple music to the user. You can get the sound files from here. (create a new folder named mp3 inside the server folder and save the mp3 files)

Line 70,76 : Do notice the URL :  http://5935c388.ngrok.com. We are going to use ngrok to expose our local server to public. You can download and setup ngrok from here. This way we can expose our locally hosted app, so that Twilio can access the response.

Alternatively, you can host the app on any of the public facing servers and then provide the complete path of the resource.

Line 80 : We set the content-type to be text/xml.

Now, we will build the Twilio layer. This layer will expose the 2 methods, one to send a message and two to place a call.

Create a new folder inside the server folder and name it twilio. Inside the folder create a new file named client.js.

This file will contain the Account SID and Auth Token that we will be updating from the Twilio dashboard. The updated client.js would look like

Update the above placeholders.

Next, we will create the  sendMsg() . Create a new file named message.js inside the twilio folder and update it as below

Things to notice

Line 1 : We refer the client we have configured earlier.

Line 2 : We are referring to a logger, which we will create in a moment. Logger is responsible for logging the requests we are making to Twilio and then capture the response (for tracking purposes only).

Line 6 : We fire a new request to Twilio’s  sendMessage() .

Line 12 : We capture the response, log it and then trigger the callback

The above logic is for sending a Message, now we are going to build the logic to trigger a call. Create a new file named call.js inside the twilio folder. Update it as

Things to notice

Line 1,2 : We include the client and the logger

Line 8 : We trigger a new call to the number provided.

Line 12 : We point to the  URL  to a dynamic URL, which would respond with a TwiML. This endpoint is the 3rd route we have created in the routes/index.js.

Line 18 : We capture the response, log it and then trigger the callback

Simple right!

Note : DO NOT forget to update the ngrok URL with the one from your local machine. More on that in a moment.

Finally, we will configure our logger. Our Logger is powered by DiskDB. Now, create a new folder named logger inside the server folder. Create a new file named log.js inside the logger folder and update it as below

Here, we log the message received into data folder.

Finally to complete the server, create a new folder named data at the root of the server. This folder will hold the log files we create.

To test the server, you can use any REST client. Before we start testing, we need to start the server. From inside the server folder run

node app.js

Next, we will start the ngrok server. This will help in making our app public. From the ngrok downloaded folder, run

./ngrok 3000

And you should see

Screen Shot 2014-09-14 at 8.55.27 pm

The URL on the right hand side is the public URL for the app. As long as the node app is running, the public URL will be active. This is only for testing our app, make sure you deploy your app to a proper production environment, with updated URLs in routes/index.js and server/twilio/call.js before sharing it to the public.

Thanks to this awesome post, which helped me get started with Twilio for Node as well as ngrok. 

When you test the App using Advanced REST client (a chrome app), it would look like

Screen Shot 2014-09-14 at 9.13.34 pm Screen Shot 2014-09-14 at 9.13.44 pm

This shows that our server is working fine. No, we will go ahead and build the Mobile Hybrid app.

Build the Mobile Hybrid App

For the client side Hybrid app, we are going to use Ionic framework. We will scaffold a blank template and build the app on top of it.

Open terminal/prompt inside the client folder. Execute

ionic start myTwilioApp blank

Make sure you have Ionic and cordova installed ( npm install -g cordova ionic).

Once the app is scaffolded, CD into the myTwilioApp folder and run

ionic serve

And you should see the starter template. Now, we will update the client/myTwilioApp/www/js/app.js as below

Things to notice

Line 16 : We have our factory layer, that is responsible for interacting with our REST server.

Line 36 : Our AppCtrl, which controls our only view

Standard Angular stuff.

Now, we will update the index.html.

Things to notice

Line 26 : We init App

Line 33 : Our Send message markup

Line 49 : Our Trigger call markup

That is it! You can re run ionic server and test the app in your browser. Once you are happy, you can issue a Phonegap build to generate the device specific installers.

The final app would look like

Screenshot_2014-09-14-18-36-18Screenshot_2014-09-14-18-36-24 Screenshot_2014-09-14-18-37-08Screenshot_2014-09-14-18-38-21

Screenshot_2014-09-14-18-39-03

Hope this post gave you an idea as how to integrate Twilio, Node.js and build a mobile app using Ionic Framework that can be used to consume the REST API we exposed using Express.js.


Thanks for reading! Do comment.
@arvindr21

 

Tweet about this on TwitterShare on LinkedIn2Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • arsene

    hey, want to implemant the tuto with ionic 2. but when i make test with postman to send sms i get this error. any https://uploads.disquscdn.com/images/6973255d6f6ffebc400dae8dcc99ee1b526ea11f51cb0ba83eeaf961605bf025.png help please

  • pramin senapati

    App is not working in android device and browser, for ionic app. Getting following error, Failed to load resource: net::ERR_NAME_NOT_RESOLVED , http://5935c388.ngrok.com/sendmsg

  • pramin senapati

    Hi the app is not working in android device, for ionic app. Showing “Sending message” and it is not dismissing and also i am not getting any success alert. plz help me

  • arsene

    thanks for the post, possible to make for ionic 2?

  • Moises Valera

    Hi, great tutorial, do you have any suggestion or tutorial on how to implement Twilio’s Programmable Video, in an ionic app?

    • Deepika

      did you got any help??

  • Mardi

    Thank You . how to read sms ionic ?

  • faresallolo

    Hi, Thanks for a great class :). I was wondering about cookieParser how does it help in this app, and how to use it in general ?

  • Vishnoo Rath

    More than anything else ngrok.io was Godsend

  • Mahesh

    Thanks again @arvindravulavaru:disqus but i dont want to use twilio because its too expensive. is there any other providers ? or is it possible to develop our own VoiP/SIP/VPN ?

  • Peter Dennis

    I am getting an “Error: Cannot find module ‘./routes/index'” after node app.js Thanks for any help, love the tutorial, exactly what i am looking for

    • / Arvind Ravulavaru

      Thanks Peter! Have already created the required files (routes folder, index.js file), Before running the app?

  • Mohamed

    Great Job! Big Thanks u!

  • Thiruanvukkarasu Muthuswamy

    Wow ! This is really awesome dude, thanks for the post :)

    • / Arvind Ravulavaru

      Thanks!

    • / Arvind Ravulavaru

      Thanks! Glad you enjoyed it.

  • http://www.davekerr.co Dave Kerr

    Thanks for this writeup! Was looking to use this exact combination

  • Bruno Seixas

    I am really into the Ionic Framework 😉
    Thanks for another great example!

    • / Arvind Ravulavaru

      Thanks! Glad it is helpful.

  • kevinwhinnery

    Nice work :)

    • / Arvind Ravulavaru

      Thanks Kevin

  • Sameera

    Thank You.

    • / Arvind Ravulavaru

      Glad I could be of help!