Calculator chatbot using Django and Dialogflow
By: Siddharth Murugan
Tags: Fulfillment, Django, Chatbots, Dialogflow, Calculator

Hope you all would have used Google dialogflow chatbot just to interact in front end. But here I would like to explain about creating an interactive chatbot using webhook concept. Webhooks are automated messages sent from apps when something happens. Here I have created a simple calculator chatbot which identifies the arithmetic operation that the user wants to perform and produce the result for the same.

Before we proceed further you need to have the following things:

Python

Django framework — Python web framework to handle webhook

Ngrok — To access your localhost across globe

Google Dialogflow

Creating setup in Dialogflow:

Create entity named operations in Google dialogflow

in Google dialogflow Refer the below screenshot that I have created for operations entity,

Here is the list of reference and their corresponding synonym

Now lets create the intent for the chatbot. Since I am going to do 4 types of arithmetic operations, I have created 4 different intents.

List of intents

Training intent:

Now its time to give training phrases to the intent that we have created. Below I have given the sample training phrases that I have given for addition. In the similar way give the training phrase for all the other intents. Make sure to give as much as more training phrase as you could, since it will be useful for the Dialogflow to get the intention of the user easily. After adding training phrases, make sure to save it without fail.

Training phrases

Please make sure to map the training phrase with entity operation and numbers as below,

Add is the operation entity that we defined and numbers are inbuilt entities.

Action and parameter:

In order to get the operation that the user is looking for, we need to define the action. Also to get the numbers and operation that we need to perform, we need to make the numbers and operations as compulsory as by selecting the required checkbox. Select the prompts and add the questions that you want to ask the user in case if the details required is not given.

Action needs to be defined as addition

Below screenshot defines the prompts that the bot will ask if one number is missed by the user:

Now enable to webhook button which is at the end of the intent,

In the same way do it for all the other three intent(subtraction, multiplication and division) that we have defined.

Making Django framework setup:

Create project in Django framework and also create an app named arithmetic.

django-admin startproject calculator_chatbot

python manage.py startapp arithmetic

After creating app, make sure to add the same in installed apps of settings.py

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'arithmetic',

]

To run the server use the below command,

python manage.py runserver

Now lets create url for our newly created app by adding below code in urls.py of calculator_chatbot folder as below,

from django.contrib import admin

from django.urls import path, include

from arithmetic import views urlpatterns = [

path('admin/', admin.site.urls),

path('arithmetic/', include('arithmetic.urls')),

]

In order to access the webpage inside the arithmetic app, create a urls.py file inside arithmetic app folder and add the below code inside it,

Now let us create their corresponding views in views.py,

Folders will be visible as above

Create a folder called templates inside the app folder(arithmetic) and inside that create another sub folder named arithmetic and inside that create home.html to check the Django framework. Note: This is just to test whether the framework url is working fine.

Making the local host available across globe:

Now make sure to run the Django server and also download the ngrok from the internet. After installing ngrok, go inside the folder using command prompt and type the following command to run the application.

ngrok http 8000

After running the command it will look like as in the image

Now copy the forwarding url and local host url and paste it in Allowed_host of settings.py as below,

ALLOWED_HOSTS = ['127.0.0.1',

'78173a906130.ngrok.io'

]

Same way paste the url in webhook of dialogflow fulfillment window after enabling it and don’t forget to save it,

Make sure to add /arithmetic/webhook in the end to url. Also enable fulfillment for all the intents.

Final chat bot

Now its time to use the chatbot. when you give the training phrase, the chatbot will identify the intent and get the numbers. It will then pass it to the localhost via webhook and get fulfillment response.

Yes! We did it. If you still face any issue, download my code from git repository — GIT. Happy coding :-)