Spotted a bug? Have a great idea? Help us make great!

In this codelab we will learn how to create a front-end Django Client for a conversational experience built in Dialogflow. We will use the same Agent that we created in previous labs "Appointment Scheduler". In the Agent's GCP project we will:

  • Download, setup and run the Django App.
  • Setup Dialogflow DetectIntent endpoint to be called from the Django App
  • Deploy the App to GCP project on App Engine
  • Finally we will test to see if the calendar invites are being set up per user request.

What you'll learn

  • How to setup and run Django front-end app for Dialogflow
  • How to deploy the Django front-end app to GCP on App Engine
  • How to test Dialogflow application from a custom front-end


  • Basic concepts and constructs of Dialogflow. For introductory Dialogflow tutorial videos that covers basic conversational design check out the following videos:
  • Build an Appointment Scheduler Chatbot using Dialogflow.
  • Understanding Entities
  • Integrate Dialogflow with Google Calendar

We are using the Appointment Scheduler conversation experience built in the earlier labs (see prerequisites) and creating a custom front-end for this application. We will be building this front-end using Django-framework, run and test it locally and then deploy it on Google App Engine.

The user will send an appointment request via this front-end, which will make a call to the Dialogflow DetectIntent API to set up an appointment for the requested date and time. Dialogflow fulfillment will then send a request to the Google Calendar to set the respective appointment and return a confirmation back to the user via Dialogflow.

The end result will look like this:

  1. Clone this repository to your local machine:
git clone
  1. Change to the directory that contains the code/. Alternatively, you can download the sample as a zip and extract it.
cd Django-Dialogflow-Appointment-Scheduler

When deployed, your app uses the Cloud SQL Proxy that is built in to the App Engine environment to communicate with your Cloud SQL instance. However, to test your app locally, you must install and use a local copy of the Cloud SQL Proxy in your development environment.

Learn more about the Cloud SQL Proxy here.

To perform basic admin tasks on your Cloud SQL instance, you can use the MySQL client.

Install the Cloud SQL Proxy

Download and install the Cloud SQL Proxy. The Cloud SQL Proxy is used to connect to your Cloud SQL instance when running locally.

Download the proxy:

curl -o cloud_sql_proxy

Make the proxy executable:

chmod +x cloud_sql_proxy

Create a Cloud SQL instance

  1. Create a Cloud SQL for MySQL Second Generation instance. Name the instance "polls-instance" or similar. It can take a few minutes for the instance to be ready. After the instance is ready, it should be visible in the instance list. Be sure to create a Second Generation instance.
  2. Now use the Cloud SDK to run the following command where [YOUR_INSTANCE_NAME] represents the name of your Cloud SQL instance. Make a note of the value shown for connectionName for the next step. The connectionName value is in the format [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]
gcloud sql instances describe [YOUR_INSTANCE_NAME]

Alternatively, you can get the connectionName from the console by clicking on the instance

Initialize your Cloud SQL instance

Start the Cloud SQL Proxy using the connectionName from the previous step.

./cloud_sql_proxy -instances="[YOUR_INSTANCE_CONNECTION_NAME]"=tcp:3306

Replace [YOUR_INSTANCE_CONNECTION_NAME] with the value of connectionName that you recorded in the previous step.

This step 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.

Next you create a new Cloud SQL user and database.

  1. Create a new database using the GCP Console for your Cloud SQL instance polls-instance. For example, you can use the name polls.
  2. Create a new user using the GCP Console for your Cloud SQL instance polls-instance.

Configure the database settings

  1. Open mysite/ for editing.
  2. In two places, replace [YOUR-USERNAME] and [YOUR-PASSWORD] with the database username and password you created previously in the step "Create a Cloud SQL instance". This helps set up the connection to the database for both App Engine deployment and local testing.
  3. In line ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]' replace [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] with your instance name acquired in previous step.
  4. Run the following command. Copy the outputted connectionName value for the next step.
gcloud sql instances describe [YOUR_INSTANCE_NAME]
  1. Replace [YOUR-CONNECTION-NAME] with connectionName from the previous step
  2. Replace [YOUR-DATABASE] with the name you choose during the "Initialize your Cloud SQL instance" step
# [START db_setup]
if os.getenv('GAE_APPLICATION', None):
    # Running on production App Engine, so connect to Google Cloud SQL using
    # the unix socket at /cloudsql/<your-cloudsql-connection string>
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '/cloudsql/[PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]',
            'NAME': '[YOUR-DATABASE]',
    # Running locally so connect to either a local MySQL instance or connect to
    # Cloud SQL via the proxy. To start the proxy via command line:
    #     $ cloud_sql_proxy -instances=[INSTANCE_CONNECTION_NAME]=tcp:3306
    # See
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '',
            'PORT': '3306',
            'NAME': '[YOUR-DATABASE]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]'
# [END db_setup]
  1. Close and save
  1. In Dialogflow's console, go to settings ⚙ and under the general tab, you'll see the project ID section with a Google Cloud link to open the Google Cloud console. Open Google Cloud.
  2. Under the menu icon click on APIs & Services then click on Credentials
  3. Click on Create Credentials followed by Service Account Key.
  4. Under Create service account key, select New Service Account from the dropdown and enter AppointmentCalendar for the name and click Create. In the popup, select Create Without Role.
  5. A JSON file will be downloaded to your computer that you will need in the setup sections below.

  1. Inside chat folder, replace the AppointmentScheduler.json with your own credentials json file.
  2. In in chat folder, Change the GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" to your project ID

To run the Django app on your local computer, you'll need to set up a Python development environment, including Python, pip, and virtualenv. For instructions, refer to Setting Up a Python Development Environment for Google Cloud Platform.

  • Create an isolated Python environment, and install dependencies:
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  • Run the Django migrations to set up your models:
python3 makemigrations
python3 makemigrations polls
python3 migrate
  • Start a local web server:
python3 runserver
  • In your web browser, enter this address http://localhost:8000/ You should see a simple webpage with the text: "Dialogflow" a textbox and submit button.

The sample app pages are delivered by the Django web server running on your computer. When you're ready to move forward, press Ctrl+C to stop the local web server.

Gather all the static content into one folder. This command moves all of the app's static files into the folder specified by STATIC_ROOT in

python3 collectstatic

Upload the app by running the following command from within the directory of the application where the app.yaml file is located:

gcloud app deploy

Wait for the message that notifies you that the update has been completed.

In your web browser, enter this address:


This time, your request is served by a web server running in the App Engine standard environment.

This command deploys the application as described in app.yaml and sets the newly deployed version as the default version, causing it to serve all new traffic.

When you are ready to serve your content in production, make the following configuration change:

In mysite/, change the DEBUG variable to False.

Let's test our chatbot, navigate to "https://<your_project_id>"

  1. User: "Set an appointment for vehicle registration at 3pm tomorrow"

  1. Calendar booking response:

If you are planning on doing the other labs in this series, don't do the cleanup now, do it after you are done with all the labs in the series.

Delete the Dialogflow Agent

  • Click on the gear icon next to your existing agent

  • In the General tab scroll down to the bottom and click Delete this Agent.
  • Type DELETE into the window that appears and click Delete.

You created a chatbot in Dialogflow and integrated it with Google Calendar.. You're now a chatbot developer!

Check out these other resources: