Since you have decided to read this blog post so I hope you know what a bot is because come on bots are everywhere now! In case you are not aware what Dialogflow and Hasura are then read the next few lines to find out:
This is what Wikipedia has in store for you:
Dialogflow (formerly Api.ai, Speaktoit) is a Google-owned developer of human–computer interaction technologies based on natural language conversations. The company is best known for creating the Assistant (by Speaktoit), a virtual buddy for Android, iOS, and Windows Phone smartphones that performs tasks and answers users’ question in a natural language.
And this is what Hasura is:
It is a BaaS and a PaaS that has built in APIs that let you build applications quickly. Ayy, still didn’t get it? Better watch this video by the co-founder himself.
First of all we will build the back end required for the bot to work and then integrate this backend with the front end that we will build using React.js . We are going to build a currency conversion bot i.e., the bot will convert currencies for us when we give it source and destination currencies to convert to. Sounds cool, isn’t it?
We will use Dialogflow to build and train the bot and then use a Hasura service as a webhook to call an API that will help us convert currencies.
The back end
The credit for building the backend for our bot goes to NIRANJAN DHOOLI
Head over to Dialogflow and login/signup. Now import the pre-built agent for currency converter from here. You can customize this agent according to your needs and how you would want the bot to interact with your users. Here is some information on how to do it. Don’t forget to add intents for simple user interactions like Hi or hello. A bot is of no use if it can’t reply to common greeting texts. So please add them.
Now we have the bot ready. If you try the bot now it won’t be able to convert your currencies. It will only just be able to identify the source and destination currencies because we have yet not called any api through a webhook that will convert the currencies for us and then send this data to our bot.
Writing the backend
Now we need to write the backend code in Node.js that will call the api (fixer.io) and then host it somewhere. We will use Hasura for hosting this which will make our work super easy. We will then add the URL of our webhook in the fulfillment section of the dialogflow bot.
- Installing Hasura on your system-
You can install the Hasura cli from here
Hasura has some amazing features and among them is the hasura quickstarts. We are going to get a hasura quickstart from the Hasura hub which will act as a boilerplate for our Node.js +React.js project. To get the quickstart execute the following commands -
$ # 1) Run the quickstart command
$ hasura quickstart hasura/hello-react
$ # 2) Git add, commit & push to deploy to your cluster
$ cd hello-react
$ git add . && git commit -m “First commit”
$ git push hasura master
Now we will have a basic react app running on this path — ui.<yourclustername>.hasura-app.io . Now what we need to do is add the code for backend in this path `microservices/api`. We will replace the api folder with our backend code. You can get the back end code from here-
Delete the api folder that already exists, download the api folder from the above link and place it in the same path. The backend code we wrote is in ‘src/server.js’ file. Don’t worry about the other files as they are created by Hasura. If you perform these steps your webhook will be running at this url- https://api.<cluster-name>.hasura-app.io/webhook . If you know Node.js then you can easily understand the code in server.js .
Adding the webhook to dialogflow bot
We now have the webhook hosted using Hasura and just have to add this to our dialogflow bot. To do so visit your dialogflow console . Click on ‘ the fulfillment tab and then the console will look something like this-
In the url section just add the url of our webhook. If you forget this was the url of our webhook- https://api.<cluster-name>.hasura-app.io/webhook
The front end
Now we have the back end ready. Dialogflow already has a front end and you can directly integrate your bot in a website you want by following the instructions in the integrations page. But we are going to design a custom front end using React.js . We will call the dialogflow bot with its access token and fetch the data in our front end and display it. The output would be that we will have an amazing front end of our own which does not look like Dialogflow’s usual bots at all.
Explaining all the front end code is beyond the scope of this blogpost. You can get the front end code from here-
Now just like we placed the back end code in a particular path we will do the same with this file also. Download the file from the above link and place it in microservices/ui/ after removing the app folder. Now you can design it the way you want and can also call any dialogflow bot using this code by just doing a minor change in the front end code. This is the change you would have to do-
In the index.js file at line 145 just add the access token of your dialogflow bot. You can get the client access token of your dialogflow bot by clicking on settings (the gear icon) in the dialogflow console.
Now since we have done changes in our Hasura project so we now want these changes to go live on the url. Execute these commands to push your changes to the cluster.
git add .
git commit -m “first commit”
git push hasura master
If you have done everything correctly then this is what your bot will behave like-
Super cool, isn’t it?
Remember if you don’t like this user interface then you can change it by doing changes in the CSS files and have your custom look and feel for the bot. Have fun building bots!!
If you liked the article then you can clap 👏 for it so that more people will get to see it. Feel free to follow me here on medium and connect with me on LinkedIn and Twitter. I am on Instagram as well.