We're live-coding on Twitch! Join us!
Build a Customer Service Messaging App in 5 minutes

Build a Customer Service Messaging App in 5 minutes

TLDR As the years go by, developers are constantly faced with new and more complex challenges in software development. Managers want to roll out new products quickly and project deadlines are getting crazier by the day. Software is eating the world, thus the demand for it has been on a crazy exponential rise. How do developers rise above these challenges? One way is automating as much as possible and using available developer tools to do more of the work so you can simply focus on the business logic.

In this tutorial, we’ll look at how you can quickly build an app by taking advantage of the most recent and controversial software development trend: Serverless Architecture.

Introduction to Serverless Architecture

In a traditional software development approach, the developer has to not only write the code but also focus on hosting, provisioning, availability and scalability of servers to ensure successful software deployments and 99% uptime. In a serverless architecture, there is the absence of the server concept during software development. Developers write code that implements business logic. The business logic is the core focus and not servers! Read more about Serverless here.

In the serverless realm, there are several providers. AWS Lambda, Windows Azure Functions, Google Cloud Functions and Auth0 Webtask. We’ll employ the services of Auth0 Webtask here because of its incredible simplicity.

Introduction to Auth0 Webtask

Webtask is a serverless platform that allows developers to execute custom code . It allows safe and low latency execution of custom, untrusted Node.js code in a multi-tenant environment. With webtask, you can run javascript code with an HTTP call. No provisioning. No deployment. Tomasz Janczuk has an excellent article explaining how to do more with Webtask here.

better.dev Get Started w/ JavaScript for free!

The Challenge

Your boss just walked in and requested a custom messaging app that the contact centre agents in the company can use for quick customer service operations.

Now, here’s the catch: You have only 5 minutes! Wait, what???

*Developer: *How’s that even possible?

*Boss: *Go build, or go home!!!

The Solution - Webtask & Nexmo to the Rescue

1. Sign-up for a Webtask & Nexmo Account


Go to nexmo.com and also sign up for an account


2. Install the command-line tool for Webtask


3. Run the wt-init command to set up your webtask script

The verification code will be sent to your email as shown below:

4. Write the code

Create a new file** sms.js** in your working directory. Let’s write the code that enables us to send SMS in a minute. Webtask currently supports over 800 node.js modules that you can use in your node.js scripts. You can check here to find out whatever module it supports.


var request = require('request');

module.exports = function(context, cb) {

  var required_params = ['phoneno', 'message', 'apiKey', 'apiSecret'];

  for (var i in required_params) {
        if (typeof context.data[required_params[i]] === 'undefined') {
            return cb(null, 'Missing ' + required_params[i] + '. Please supply the value.' );

   * Data to be sent to the Nexmo SMS API Service
   * @type Object
  var API_KEY = context.data.apiKey;
  var API_SECRET = context.data.apiSecret;
  var message = context.data.message;
  var from = 'Auth0';
  var to = context.data.phoneno;

   * Make a get request to the Nexmo SMS API Service with the appropriate details
    .get('https://rest.nexmo.com/sms/json?api_key=' + API_KEY + '&api_secret=' + API_SECRET + '&from=' + from + '&to=' + to +'&text=' + message)
    .on('response', function(response) {

        if (response.statusCode !== 200) {
            return cb(null, response.body);

        return cb(null, "Awesome...Message sent successfully");
    .on('error', function(err) {
        if (err) {
            return cb(null, 'Sending of message failed:' + err);

This code is simple. We are basically making a request to Nexmo SMS API Service using the request module. Look at this piece of code below:

  var API_KEY = context.data.apiKey;
  var API_SECRET = context.data.apiSecret;
  var message = context.data.message;
  var from = 'Auth0';
  var to = context.data.phoneno;

Where does context.data. *come from? Webtask makes use of a model that accepts two parameters: *context and **callback. The context parameter is a JavaScript object that contains various properties such as query,** secrets, and **body. The context *parameter also offers access to the *context.storage. ** API which allow access to Webtasks durable storage. Find out more about ** context in the webtask documentation.

In this code, we made use of Nexmo Api key and secret. You can get that from the dashboard.

One more thing. If you are using a free account, you need to add the numbers you want to send to messages to as test numbers on the nexmo dashboard.

5. Create the webtask url

We have our code in sms.js file. Now, navigate to your terminal and run the wt create command to create the webtask service for this app like so:

In the image above, we passed two secrets - apiKey and apiSecret. Remember we defined them in our code? Yes, Webtask stores your secrets for you at the point of url creation.

A Webtask url has been created to run the service. Now, all you need to do is grab that url & run this in your browser and pass parameters to it like so:

In the message above, we passed in the phone number & the message. Viola, the text message has been sent!!!

Text Message on User’s device

Wait, was that even up to 5 minutes? You’ve built your boss a customer service messaging app. You can send the URL right now to anyone and they’ll be able to use!

Let’s take it a step further. Right now there is room for errors, because you’ll have to type the phone number and message into the browser address bar. We’ll build a simple frontend interface for it.

*Build the Frontend *

We’ll use AngularJS 1.5 to build out the front-end quickly. Create an** index.html** file in your service app directory and add the following code like so:

*index.html *

<!doctype html>
<html lang="en" ng-app="csa">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="author" content="Prosper Otemuyiwa">
  <meta name="HandheldFriendly" content="true">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="fragment" content="!">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <base href="/">

  <title>Customer Service Bird App</title>
  <link href="//fonts.googleapis.com/css?family=Roboto|Montserrat:400,700|Open+Sans:400,300,600" rel="stylesheet">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="app.js"></script>

<body ng-controller="MessageController">
  <header class="navbar navbar-default navbar-static-top">
    <div class="navbar-header">
      <a class="navbar-brand" href="/"> Customer Service Bird</a>

  <div class="container">
       <form name="messageForm" ng-submit="sendMessage()">
          <div class="col-md-12">

              <div class="form-group">
                  <label for="hire">Country</label>
                  <select class="form-control" id="hire" ng-model="countryCode" name="hire">
                    <option ng-repeat="country in countryList" value="{{ country.value }}">{{ country.name }}</option>

              <div class="form-group">
                <label for="address">Mobile Number</label>
                <input class="form-control" name="mobile" type="text" ng-model="mobile" required>

              <div class="form-group">
                <label for="bio">Message </label>
                <textarea class="form-control" name="bio" cols="50" rows="10" ng-model="message" id="bio" required>

               <!-- Save Changes Form Input -->
              <div class="form-group">
                <button class="form-control btn btn-block btn-info" ng-disabled="messageForm.$invalid" type="submit">Send Message</button>

        <div class="col-md-12" ng-show="successMessage">
           <span class="alert alert-success"> Message sent successfully </span>

        <div class="col-md-12" ng-show="errorMessage">
           <span class="alert alert-danger"> Server error...Please try again or contact the Engineer </span>

We gave our body a controller named MessageController, and also bootstrapped the angular app by assigning** csa** to the ng-app *attribute on the html tag at the very top. Next, create a javascript file: *app.js. This file will contain the MessageController that will be responsible for actually sending the message.


var app = angular.module('csa', []);

app.controller('MessageController', ['$scope','$http', function($scope, $http) {

    $scope.countryList = [
        { name: 'Nigeria (+234)', value: '234' },
        { name: 'United Kingdom (+44)', value: '44' },
        { name: 'United States (+1)', value: '1' }

    $scope.sendMessage = function() {

        $scope.successMessage = false;
        $scope.errorMessage = false;

        var phoneNo = $scope.countryCode + $scope.mobile;
        var message = $scope.message;

        if ( $scope.mobile.charAt(0) === '0') {
            var phoneNo = $scope.countryCode + $scope.mobile.slice(1);

            method: 'GET',
            url: 'https://webtask.it.auth0.com/api/run/wt-prosperotemuyiwa-gmail_com-0/sms?phoneno=' + phoneNo + '&message=' + message
        }).then( function(response) {
            $scope.successMessage = true;
        }, function(err) {
            $scope.errorMessage = true; 


Basically, we are using the $http angularJS service to make a get request to the webtask url and we are passing the required attributes from the user form input. Expected more? It’s really that simple!

*Note: *In case you are wondering why Angular 2 wasn’t used here, it’s out of the scope of this tutorial because it will involve describing the setup and build process. If you want to use Angular 2, check out this and the angular 2 series covered here.

Now, run the app in your browser and try sending a message. You should see something like this:

*Note: * I only used 3 countries for the drop down option, you can add as many as you want. You should also do more than I have done in this tutorial in terms of user input validation if you want to use this code in production. For the Nigerian folks, I know Jusibe is the most popular SMS service in the country, so I wrote an implementation for it here.


With the help of Webtask & Nexmo, we have been able to spin up a functional customer service messaging app in less than 10 minutes. You can shrug your shoulders and say to your boss *“Not a big deal, kid stuff!” *

Hopefully this will inspire you to go serverless. Looking for more resources to get you hooked with building serverless apps? Check out Building Serverless apps with Webtask and Building Serverless apps with Lambda.

You can find the source code for this tutorial on Github.

Like this article? Follow @unicodeveloper on Twitter

This content is sponsored via Syndicate Ads.