PRIYANKA VERGADIA: Welcome to Deconstructing Chatbots.
I'm Priyanka Vergadia, and in this episode,
we will learn how to create an App Engine front
end for our Dialogflow agent.
[MUSIC PLAYING]
Well, so far in the series, we've
been focusing on learning the basics of conversational AI
and building an agent.
Once the agent is built, you may want
to integrate it with the front end of your choice
to give it a look and feel of your own website.
Well today, we will learn to create a custom front
end for our Dialogflow chat application
on App Engine using the Django framework.
You can use any front-end framework or language you like.
Django is just an example we are working with here.
But before we begin, here is what we are building.
There'll be a text input and a Submit button
to send chat messages.
All the messages back and forth will
be visible on the chat window.
All right.
So let's see how this will work.
The chat app will be served on App Engine.
We will build our app in Python using
Django, which is a Python-based free and open source web
framework.
App Engine will interact with Cloud SQL for any database
requests.
And it will interact with our Dialogflow
agent via the Dialogflow API.
In this example, we'll be using the appointment scheduler agent
that we created in the third episode.
And we enhanced it in the eighth episode
to integrate with Google Calendar.
Now with that background, let's dive in and
see how to make this work.
Check out the link in the description below
to download the source code for Django
app we will be deploying on App Engine.
Let's start by creating the Cloud SQL
instance in GCP console.
Once created, take note of the connection name.
Also create the database with username and password.
If you don't already have the Cloud SQL proxy,
then download and install it.
You'll find the link in the description below.
Start the Cloud SQL proxy with the connection
name we copied while creating the Cloud SQL instance.
This establishes a connection from your local computer
to your Cloud SQL instance for local testing purposes.
Keep the Cloud SQL proxy running the entire time
you test your app locally.
While we are in GCP console, let's download the service
account key as well.
From the hamburger menu, navigate to the API & Services.
Click on Create Credentials button dropdown.
Then select the Service Account Key.
Name the key and make sure JSON is selected.
Then click Create.
The JSON file will then download on your computer.
Open settings.py in MySite folder.
In two places, replace your user name and your password
with the database username and password you just created.
This helps set up the connection to the database
for both App Engine deployments and local testing.
Also replace Cloud SQL your connection name corresponding
to the host.
Replace your database with the name of the Cloud SQL database
you created.
When done, close and save settings.py.
Now let's set up the Dialogflow detect intent endpoint
to be called from the application.
For that, navigate to views.py file in the Chat folder
and change the Google project ID to your GCP project ID.
Appointmentscheduler.json file is
used to authenticate and authorize the app to make calls
to the Dialogflow API.
You replace that file with your own JSON credentials
that we generated earlier.
To run the Django app on your local computer,
we will need to set up a Python development environment.
CD into the project directory.
Run the command virtualenv env -p python3
to create the virtual environment.
Now execute source env/bin/activate
to activate the virtual environment we just created.
You will see env in the terminal,
which indicates that you are in the virtual environment.
Now execute pip install -r requirements.txt.
This will install the requirements
for Django, Dialogflow, and PI MySQL.
Then run the three migration commands to set up the models.
Python3 manage.py makemigrations,
makemigration polls, and migrate.
At this point, we are ready to start the local web server.
For that, execute python3 manage.py runserver.
Once the server is running, navigate to localhost
on 8,000/chat.
And there, we have our app running locally.
Now we are ready to deploy our app to App Engine.
For that, we need to gather all our static files
in one folder using the command python3 manage.py
collectstatic.
Then run gcloud app deploy to deploy the application
on App Engine.
This may take a few minutes, but once done, you
will see the link to the deployed application
in your terminal.
Navigate to the app and verify that everything's working fine.
Today, we learned how to create and deploy
a Dialogflow front end on App Engine
using the Django framework.
I'm excited to hear which front ends you are integrating
Dialogflow with.
Tell us all about your use case in the comments below.
I hope to see you in the next episode of Deconstructing
Chatbots.
If you liked this video and would
like to see more such content, don't
forget to like and subscribe to our channel.
[MUSIC PLAYING]