Build a chat-bot using Dialogflow with backend integration

December 28, 2019
AI, All
by Rahil Shaikh
  • Building Conversational apps for Google assistant using Dialogflow

In our previous tutorial, we saw how we can build a simple chatbot using Dialogflow. We introduced you to Dialogflow and we saw how intents work and how our app responds to these intents. We also tested our app on a Google Assistant-powered device using voice commands.

In this tutorial, we will take things a step further. We will build a chatbot with a good use-case in the real world. Our app will run on Google Assistant enabled devices using voice command, it will be able to answer basic questions and further, it will be able to get some useful data for us. To do this, we will use Fulfilments where we can integrate backend APIs to get Real-Time data.

Here are the things we will cover in this tutorial.

  • Creating Intent and Entities
  • Making Dialogflow understand dynamic parameters in user’s intents.
  • Integration with an API over HTTPS

If this is your first time with Dialogflow. I recommend you to go through our previous tutorial, build that basic app then come back and continue here.

Idea

I have a habit of checking out the daily stats of my website, basically how many page-views and users visit my website each day. For that, I have to log in to the dashboard of Analytics. How convenient it would be if every morning I could just say “OK Google, Give me my website stats” and my Google Home devices answer me with the number.

For you the idea could be something else, it could be keeping a custom todo list, or it could be something where you talk to a Pi-device to control some electronic devices, like “switch on the lights”. The main goal of this tutorial is to show you how you can build an interactive chatbot and integrate it with your backend.

Setting Up Dialogflow Agent

Create a new agent for our app. If you are unsure how to get started with creating an agent, check out my previous tutorial and then come back here.

Creating Entities

We need to extract specific pieces of information from the user’s intents, this is done with the help of entities. An entity can be a piece of information like date, names, place, numbers, etc. Dialogflow provides us with some system entities, but we can also create our own custom entities.

In our case, we can create an entity for the type of stats the user is requesting. Eg: Page Views or Unique Users. We will call this entity as @StatType. Dialogflow also allows you to add synonyms to your entity values. For eg: page views can also be referred to as views or hits by the user. See the image below to understand how we have created our entities.

Now I have also created another entity as @Period. Dialoflow does give us a system entity for date (@sys.date), but here since we want to keep things simple, I have created a custom Date entity that holds either ‘today’ or ‘yesterday’. So the users of our app can ask for stats of either ‘today’ or ‘yesterday’. Have a look for the image below.

 

Creating Our Intent

Now let’s go ahead and create an intent for our app. Let’s name it GetStats. Here I have added a few training phrases.  Like…

How many hits today? How many views today? etc, etc…

 

If you see in the above image certain words are highlighted. That is because we have defined a couple of action parameters and mapped them to our entities. This way when the user asks a question, Dialogflow will extract their words into parameters for us. This enables us to take dynamic actions based on parameter values.

Here in the below image you can see, we have added two variables as StatType and Period.

Enable Small Talk

If you want your application to answer simple questions like. How are you? Can we talk? etc. Just enable the Small talk option. Dialogflow will do the rest for us.

Enable small talk

 

Integrating Backend

Now that we have everything else ready. It’s time to integrate our backend into our app. There are two ways using which we can do that in Dialogflow.

  1. Integrate you own custom POST API.
  2. Using firebase cloud functions.

In this tutorial, I’ll be using the approach one, the reason for that is that I see very little or no articles written to help people implement that.

To achieve this, Dialogflow provides us with Fulfilment.

The entire backend code is not in the scope of this tutorial, but we will see how the API can be made and what request/ response interface it exposes.

A few things to keep in mind…

  1. The API should be hosted on a publicly accessible web server, localhost won’t work. Ofcourse we can add authentication to protect it.
  2. The API should be served over HTTPS.
  3. The API should accept POST request.

So, I have created a POST API and hosted it on my website ciphertrick.com

Go to Fulfillment in Dialogflow and select webhook. Enter your API URL and authentication if needed.

Fulfillment

Now let’s see in our backend code how do we handle requests and responses.

Diloagflow constructs the request and sends it in request body as queryResult. See below the request format.

{
'queryText': 'how many website views today',
'parameters': { StatType:'views', Period:'Today' },
'allRequiredParamsPresent': true,
'fulfillmentText': 'Here are you websites views stats for $date',
'fulfillmentMessages': [ { platform:'ACTIONS_ON_GOOGLE', simpleResponses: [Object] }, { text: [Object] } ],
'outputContexts': []
}

As you can see above, the parameter object contains the resolved values of our entities. We can use these values to take action on the backend.

Also, when you send a response to Dialogflow, we need to construct it in a way that Dialogflow can understand. There are different types of response formats, in our case, we need a simple text-based reply, which looks like below.

{ fulfillmentText: 'Your website ciphertrick.com had 53 views Today' }

You can read more on response formats here.

Here is the complete method that our backend API calls.

const axios = require('axios');
const config = require('./config');

const getStats =  function(params, callback){
    let count = 0;
    axios.get(`https://public-api.wordpress.com/rest/v1.1/sites/${config.SiteId}/stats?http_envelope=1`,
                {headers: {'Authorization': `Bearer ${TOKEN}`}},
            )
    .then((response)=>{
//        console.log(response);
    if(params.StatType === 'Visitors'){
        if(params.Period === 'Today'){
            count = response.data.body.stats.visitors_today;
        } else {
            count = response.data.body.stats.visitors_yesterday;
        }
    } else {
        if(params.Period === 'Today'){
            count = response.data.body.stats.views_today;
        } else {
            count = response.data.body.stats.views_yesterday;
        }
    }
    let reply = `Your website ciphertrick.com had ${count} ${params.StatType} ${params.Period}`
    let format = { fulfillmentText: reply }
        callback(null, format);
    });
};

module.exports.getStats = getStats;

 

The above code is not production-ready and is just for demonstration purposes.

Running Our App

Now that we have completed the integration, it’s time to try our app out. Click on Integrations and then select google assistant. Dialogflow provides us with a simulator to test it, but we can also test it on any of our assistant powered devices provided they are connected with the same google account.

Testing on simulator

Testing it on my phone.

On Device

Conclusion

In this article, we have learned how we can developer chat-bots powered by Dialogflow’s NLP capabilities. We saw what are intents and entities and how these can be used to finally take action on the backend using Fulfillment.

What’s next?

Building apps that can give us information just by voice commands is amazing and fun. I would love to see what you guys are planning to build or if you have any idea for these kinds of use-cases that you would like to see a tutorial on, just let me know and I would be happy to write it. Shoot you me your ideas on @rahil471

Keep Learning

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

1 comment

  1. jilesh
    |

    This is really impressive information about Building a chatbot using Dialogflow. I believe that building something like chatbot is really tidy task, also it takes real skills to develop. So, this guide is absolutely helpful.

Leave a Comment