Build a food ordering app using Vue and Africa’s Talking

Thoughts on building for the next billion users? Development systems are springing up by the day with progressive web apps taking center stage and optimization being the focal point of quality testing teams. We live in a world where using digital services almost always requires the Internet. Is this scalable to even remote parts of the world where internet connectivity is next to nothing?

USSD (Unstructured Supplementary Service Data) communication technology used mostly by telecommunication companies offers much more promise than just interaction with your telco providers. In this post, we will be building a basic food-ordering App using Vue and implementing USSD interaction via Africa’s Talking(AT).

The app consists of two parts: the USSD app for the user and the web dashboard for the App owner. Africa’s Talkin (AT) will be used to build the USSD app and Vue for the app dashboard. Pusher will be used to implement the real-time update of our dashboard. You can use services like Twilio or txtNation as alternative to AT if you can’t access the AT services.

Here is a quick look at what we will be building:

Prerequisites

Building this app is beginner friendly. However, knowledge of HTML, CSS, and JavaScript is required. Using Pusher and Africa’s Talking is pretty much seamless. Vue.js will be used to develop the user interface and its knowledge is not required but is of added advantage.

Installation

This is a Node.js app so it requires you have node and its corresponding package manager, NPM. Install them from here if you haven’t, otherwise verify installation from your command line with:

    node -v && npm -v

Create a folder anywhere on your machine, this will be the root directory of your app. Start a new project by running this on your command line:

    npm init

Run through the setup instructions filling out key app details like name, author, and license.

Note that the entry point specified during npm init (default:index.js), this is the file in which server configuration will take place.

Once this is completed, you have a new node project with a package.json file but otherwise pretty much empty. Let’s install the required tools and dependencies via npm. Dependencies required are:

• Express - A node framework for developing servers.
• Cors - Enables cross-origin requests.
• Pusher - This is the node package for pusher.
• Body-parser - Parses the req.body object.
• Africastalking - The node package for Africa’s talking.

Install these locally with:

    npm install --save express cors pusher body-parser africastalking

During development, Vue will be imported via a CDN so don’t worry if you don’t see it being installed yet. Let’s get to configuring our server since this will serve our files.

We will proceed to create an account on Pusher and Africa’s Talking.

Create a new Pusher app with whichever name you choose. Note the AppID, key, and cluster issued. Do the same with Africa’s Talking, create a new USSD application and obtain an API key and the username of the app. For this app, we will be utilizing the AT sandbox to test our app, so there is no need to apply for a service code.

To keep credentials safe, we will create a new module to house these credentials. In the root directory create a new file called cred.js and setup the module like this:

javascript
1module.exports = {
2     AT:{
3         apiKey: 'xxxxxxxxxxxxxxxxxxxxxxx',
4         username: 'xxxxxxx',
5         format: 'json'
6     },
7     pusher:{
8        appId: 'xxxxxx',
9        key: 'xxxxxxxxxxxxxxxx',
10        secret: "xxxxxxxxxxxxxx",
11        cluster: "xx",
12        encrypted: true
13     }
14    }
Copy

The credentials are stored in an object and will be used later in our app.

Build the app server

In the root directory of the project, create a new file called server.js. In this file we will configure our server. First, import all required dependencies for the app and assign them to variables with:

javascript
1var Pusher = require('pusher')
2    var credentials = require('./cred')
3    var africastalking = require('africastalking')(credentials.AT)
4    var cors = require('cors')
5    var bodyParser = require('body-parser')
6    var express = require('express')
7    var path = require('path')
Copy

Since we will be using an express server, configure express by first creating a new instance assigned to a variable:

javascript
1var app = express()
2    var port = 3000
Copy

We simply assigned the port number of the app to 3000. This is the port on the local server which the app will be available.

Let’s use other imported modules like cors and bodyParser:

javascript
1app.use(cors())
2    app.use(bodyParser.urlencoded({extended:false}))
3    app.use(bodyParser.json())
Copy

Next, create an endpoint for your homepage using express with:

javascript
1app.get('/', function(req, res){
2        res.sendFile(path.join(__dirname + "/index.html"))
3    })
Copy

The index.html file hasn’t been created yet, but it would be served nonetheless when created. We would require other static files such as CSS and JS in our HTML script, use the express.static() method to specify the directory of the files. These static files will be in our root directory as well:

    app.use(express.static(__dirname + '/'))

It’s not safe to expose static files like this, but we’re just doing this for convenience. If you do this for real, I can make a request to GET /cred.js and get your AT and Pusher credentials.

Create a new Pusher instance and assign it to a variable, just so it is available globally:

    var pusher = new Pusher(credentials.pusher)

Remember the module we created earlier and imported - cred.js. Pusher requires your app credentials when initializing a pusher instance.

Working with USSD is pretty simple, we create a POST endpoint and configure responses per users request using IF statements.

Africa’s talking receives these requests on a USSD code we will set on their service and responds with the messages we will configure. We simply control what is sent to the user and determine what the user receives when they make a new request. AT simply provides the offline channel for the user via USSD.

Next, we will configure AT. First, we create some important global variables with:

javascript
1var webURL = 'http://foodigo.com/menu'
2    var welcomeMsg = `CON Hello and welcome to Foodigo.
3    Have your food delivered to you fast and hot!
4    Please find our menu ${webURL}
5    Enter your name to continue`
6    var orderDetails = {
7        name: "",
8        description: "",
9        address: "",
10        telephone: "",
11        open: true
12    }
13    var lastData = "";
Copy

The welcomeMsg variable is assigned a template literal with the welcome message on our USSD app. The orderDetails object is the payload to be sent over to the dashboard via Pusher.

This is the more interesting part. Create the REST API with a POST request on a /order route:

javascript
1app.post('/order', (req,res) => {
2      console.log(req.body)
3      //configure /order api
4    })
Copy

When a user makes a request via a certain USSD service code, the body of the request contains useful information about the request which we will process. This information is to be passed to variables as required. The properties in the req.body object are:

• sessionID - For every time a user dials a USSD code, a session is opened. The sessionId is a unique ID assigned to each session opened by a user.
• serviceCode - This is the service code dialed by a user, also note that multiple service codes can be assigned to an app.
• phoneNumber - The telephone number of the user is also sent through the request, You can create a database from this and play around with the data.
• text - This is the plain text inputted by the user in the text field. Initially, when a user initiates a session, text is empty.

In the /order API, assign the various req.body parameters to variables. For beginners understanding, do this:

javascript
1...
2    var sessionId = req.body.sessionId
3    var serviceCode = req.body.serviceCode
4    var phoneNumber = req.body.phoneNumber
5    var text = req.body.text
6    var textValue = text.split('*').length
7    ...
Copy

What about the response from our server to the client? Let’s call that message, create the variable and assign it an empty value. To understand the current state of response from the server, we use some simple logic to split the response carrying user information. The request (text) comes in plain text with user inputs separated by asterisks (*). Subsequent inputs are concatenated to the existing request and each is separated by an asterisk. By splitting text with the asterisks, the length of the resulting array would better inform us on how many requests has been made by the user.

    var message = ""

Next, we define the logic with which AT will process user requests and responses using if statements. In the /order endpoint include this logic:

javascript
1...
2    if(text === ''){
3        message = welcomeMsg
4    }else if(textValue === 1){
5        message = "CON What do you want to eat?"
6        orderDetails.name = text;
7    }else if(textValue === 2){
8        message = "CON Where do we deliver it?"
9        orderDetails.description = text.split('*')[1];
10    }else if(textValue === 3){
11        message = "CON What's your telephone number?"
12        orderDetails.address = text.split('*')[2];
13    }else if(textValue === 4){
14        message = `CON Would you like to place this order?
15        1. Yes
16        2. No`
17        lastData = text.split('*')[3];
18    }else{
19        message = `END Thanks for your order
20        Enjoy your meal in advance`
21        orderDetails.telephone = lastData   
22    }
23    ...
Copy

If statements simply serve our purpose here. In the block above it simply means once a user makes the initial request by dialling the service code the response should be the welcomeMsg variable defined previously. For the sake of simplicity of this demo, we wouldn’t be considering edge cases and responses to match the request. Once a response is received as text, it is manipulated and assigned to a parameter in the orderDetails object.

Messages begin with CON, this shows the beginning of the response and the session as well and to terminate the session the response starts with END.

Still in the /order endpoint, specify the response with:

javascript
1...
2    res.contentType('text/plain');
3    res.send(message, 200);
4    ...
Copy

Now that we have a payload in orderDetails, Pusher is to handle the delivery of this payload to the client dashboard. In the /order endpoint, open a new Pusher channel and event with:

javascript
1...
2    if(orderDetails.name != "" && orderDetails.address != ''&& orderDetails.description != '' && orderDetails.telephone != ''){
3      pusher.trigger('orders', 'customerOrder', orderDetails)
4      } 
5    ...
Copy

We created a simple test to ensure that all the data is collected in orderDetails before it is sent through Pusher. Use the pusher trigger() method to open a new pusher channel, in this case, orders. A new event customerOrder is created and orderDetails is passed as the payload.

Lastly, reset orderDetails to its default state of empty values:

javascript
1if(orderDetails.telephone != ''){
2      //reset data
3      orderDetails.name= ""
4      orderDetails.description= ""
5      orderDetails.address= ""
6      orderDetails.telephone= ""
7    }
Copy

Next, set up the listening port of the app with:

javascript
1app.listen(port, (err,res) => {
2    if(err) throw err;
3    console.log('listening on port ' + port)
4    })
Copy

Run the server with:

    node server.js

You will see listening on port 3000 in the command line, but on opening localhost:3000 in your browser an error is thrown. This is fine and it is because we haven’t created the index.html file to be served by the server. So far we have created the app’s server but, before we test, let’s build out the app dashboard.

Build the dashboard

While we have our server ready to handle client orders, we need a dashboard to display these orders and we will accomplish this using Vue.js.

Vue is a lightweight progressive JavaScript framework for building interactive user interfaces. In the root directory of your project, create the HTML, CSS and JavaScript Files required.

In index.html, create a HTML5 script with:

html
1<!DOCTYPE html>
2    <html lang="en">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <meta http-equiv="X-UA-Compatible" content="ie=edge">
7        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8        <link rel="stylesheet" href="index.css">
9        <title>Real-time food ordering app dashboard</title>
10    </head>
11    <body>
12        <div class="container-fluid" id="root">
13    <!-- Body of document -->
14        </div>
15    <!-- Scripts -->
16        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>   
17        <script src="https://js.pusher.com/4.1/pusher.min.js"></script> 
18        <script src="index.js"></script>
19    </body>
20    </html>
Copy

Note the imported scripts via a CDN - Vue, Pusher. We also imported our external JavaScript file. Bootstrap is also used for styling and is imported from a CDN as seen in the head tag of the script.

For the simplicity of this demo, our orders will be in the form of cards (a presentation UI widget) and have a close button to close any open orders.

Let’s configure Vue in the index.js file created earlier.

javascript
1new Vue({
2        el: "#root",
3        data:{
4            title: "Foodigo Restaurant Dashboard",
5            orders:[
6                {name:"Chris Nwamba", description:"Rice and Ofe-Akwu", address:"Lekki", telephone:"08082092001", open:true},
7                {name:"William Imoh", description:"Rice and Chicken", address:"Amuwo", telephone:"08082818700", open:true},
8                {name:"Mary-Anne Unoka", description:"Yam and Egg Sauce", address:"Satellite Town", telephone:"08083872501", open:true},
9                {name:"Ralph Ugwu", description:"Rice and Salad", address:"Nsukka", telephone:"08082983021", open:true},
10                {name:"BLAQLSG Imoh", description:"Cake and Sprite", address:"Ije-Ododo", telephone:"08082869830", open:true}
11            ]
12        },
13        created(){
14            var pusher = new Pusher('PusherKey',{
15                cluster:'PusherCluster',
16                encrypted:true
17            })
18            var channel = pusher.subscribe('orders')
19            channel.bind('customerOrder', (data) => {
20                console.log(data)
21                this.orders.push(data)
22            })
23        }
24    })
Copy

In the script above we created a new Vue instance and mounted it on the DOM element with an ID of root. Basically, state in Vue is managed by the data property. We will manage our app state here as well as other data which we would like to pass to the DOM using Vue. For this app, we created placeholder data in the orders array consisting of the name, description, address, telephone and the order status of either true or false.

We used a Vue lifecycle method called the created method to setup pusher. The created() method is called once the DOM is fully loaded. In it, we configure a pusher instance with the pusher key obtained during account creation.

Next, using the subscribe() method, we subscribed to the channel we created on our server - orders. Afterwards, the event created in the server is bound to the channel and it takes a callback function. This function receives a parameter which is the payload sent though pusher, in this case, orderDetails.

Lastly, we push this data into the orders array. How about if we want to close an order? We will create a method to handle that next.

Closing an order requires the creation of a method to handle the action. So once the method is triggered, the state of the open property of the order is changed to false.

In the Vue instance, after the created() method, create a methods object and update it like this:

javascript
1...
2    methods:{
3        // close completed order
4        close(orderToClose){
5            if ( confirm('Are you sure you want to close the order?') === true){
6                this.orders = this.orders.map(order => {
7                    if(order.name !== orderToClose.name && order.description !== orderToClose.description){
8                        return order;
9                    }
10                    const change = Object.assign(order, {open: !order.open})
11                    return change;
12                })
13            } 
14        }
15    }
16    ...
Copy

A confirm action is required to ascertain that the order is to be closed and we simply use a map() method to run through the available orders until we find an order that matches the parameter of the particular order to be closed, at which point the state of its open property is inverted.

Now we have our data and methods all set up, let’s pass them to the DOM.

In index.html, include this block in the parent div with an ID of root:

html
1...
2    <header>
3        <h1 class="text-center">{{title}}</h1>
4        <h4 class="text-center">Realtime food ordering app via USSD</h4>
5    </header>
6    <main>
7        <div class="row">
8            <div v-for="order in orders" v-if="order.open" class="col-md-4 order-card">
9                <h3 title="Customer Name">{{order.name}}</h3>
10                <span class="closeicon" @click="close(order)" title="Close Order">X</span>
11                <p title="Order Description">{{order.description}}</p>
12                <p title="Customer Address">{{order.address}}</p>
13                <p title="Customer Telephone">{{order.telephone}}</p>
14            </div>
15        </div>
16    </main>
17    ...
Copy

The title of our app is set dynamically using Vue. In the div with the class of order-card, we simply used the v-for directive to iterate over the orders array. This is done conditionally using the conditional v-if directive. This means only if order.open resolves to true will the order be iterable. Each order property is passed to DOM elements using mustache-like syntax.

Style the app in index.css with:

css
1body{
2        margin: 0px;
3        padding: 0px;
4    }
5    .container-fluid{
6        margin: 0px;
7        padding: 0px;
8        width: 100%;
9    }
10    header{
11        height: 160px;
12        margin: 0px;
13        background-color: rgb(240, 75, 75);
14        padding: 40px;
15    }
16    header h1{
17        margin: 0px;
18    }
19    header h4{
20        color: rgb(92, 91, 91);
21    }
22    .completeOrder{
23        display: none;
24    }
25    .closeicon{
26        font-weight: bold;
27        position: absolute;
28        top: 15px;
29        right: 20px;
30        cursor: pointer;
31    }
32    .closeicon:hover{
33        opacity: 0.5;
34    }
35    .order-card{
36        background-color: antiquewhite;
37        margin: 50px;
38        border-radius: 10px;
39        width: 20%;
40        margin-right:0px;
41        margin-top: 30px;
42        margin-bottom: 0px;
43    }
Copy

Everything is all set, start the app server with:

    node server.js

All we see is placeholder data. We will use the Africa’s talking sandbox app to test our app. Before that, we need to expose our local server to the internet so we can access our endpoint on the Internet. Ngrok will be used for this. Navigate to the directory with ngrok in the command line and expose your local server with:

    ./ngrok http 3000

Once the session status on the ngrok dashboard in the command line interface goes to online, a forwarding address is issued. This is the temporary web address for our app e.g. https://1654a6cb.ngrok.io.

Since this address is available on the internet, our POST endpoint is https://1654a6cb.ngrok.io/order. This is the endpoint required by Africa’s Talking.

Log-in to AT and go to the sandbox app here. In the sandbox, create a service code and pass in the callback URL of your API endpoint. Our USSD code is now available for use. In the sandbox app, navigate to the ‘launch simulator’ tab and input a valid telephone number to use the USSD feature. All these should be done while your local server is running and ngrok is online.

Once you dial the USSD code in the simulator, fill out the text fields with the chosen data and, once the responses are complete, the dashboard automatically updates with the new order.

Conclusion

It’s been awesome building this out. We have seen how to integrate USSD interaction in a node app, and so far I can’t help but imagine the immense potential this poses. Vue was used to build out the front-end and pass data received to the DOM, with Pusher bringing in realtime activity so it is unnecessary to refresh the page to know if an order has arrived. Meanwhile anyone with the USSD code can place an order without having internet connectivity. Feel free to play around with the app, suggest improvements and submit improvements to the source code here.