Build a frontend Django client for a Dialogflow app

1. Before you begin

In this codelab, you'll learn to build a frontend Django client to create a conversational experience for a Dialogflow app. Specifically, you'll do the following:

• Download, set up, and run the Django frontend client.
• Set up Dialogflow detectIntent endpoint to be called from the Django frontend client.
• Deploy the app to Google Cloud on App Engine.
• Test whether Calendar invites are being set up per user request.

Prerequisites

Before proceeding, you need to complete the following codelabs:

1. Build an appointment scheduler with Dialogflow
2. Understand entities in Dialogflow
3. Understand fulfillment by integrating Dialogflow with Calendar

What you'll learn

• How to set up and run a Django frontend client for Dialogflow
• How to deploy the Django frontend client to Google Cloud on App Engine
• How to test a Dialogflow app from a custom frontend

What you'll build

• You'll set up and run a Django frontend client for Dialogflow.
• You'll deploy the Django frontend client to Google Cloud on App Engine.
• You'll test a Dialogflow app from that custom frontend.

What you'll need

• A basic understanding of Python
• A basic understanding of Dialogflow

2. Architectural overview

You'll use the Appointment Scheduler conversation experience that you previously built and create a custom frontend for the app. You'll build the frontend with Django, run and test it locally, and deploy it to App Engine.

The user will send an appointment request via the frontend, which will call the Dialogflow detectIntent API to set up an appointment for the requested date and time. Dialogflow fulfillment will then send a request to Calendar to set the respective appointment and return a confirmation to the user via Dialogflow.

The end result will look like this:

3. Download and run the frontend app

1. Clone the repository to your local machine by typing this command in your computer's local terminal:

git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git

2. 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

4. Set up your local environment

When deployed, your app uses the Cloud SQL Proxy that's built into the App Engine standard 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. For more information, see About the Cloud SQL Proxy.

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

Note: You must authenticate the gcloud command -line tool to use the proxy to connect from your local machine.

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 https://dl.google.com/cloudsql/cloud_sql_proxy.darwin.amd64

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 something similar. It can take a few minutes for the instance to be ready. After it's ready, it should be visible in the instance list.
2. Use the gcloud tool to run the following command where [YOUR_INSTANCE_NAME] represents the name of your instance. Make a note of the value shown for instance connection name for the next step, which is shown in the format of [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Alternatively, you can click on the instance to see the Instance connection name.

Initialize your Cloud SQL instance

Start the Cloud SQL Proxy by using the instance connection name from the previous step. Replace [YOUR_INSTANCE_CONNECTION_NAME] with the value that you recorded in the previous step. That establishes a connection from your local computer to your instance for local testing purposes. Keep the Cloud SQL Proxy running while you test your app locally.

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

Next, create a new Cloud SQL user and database.

1. Create a new database using the Google Cloud Console for your Cloud SQL instance named polls-instance. For example, you can enter "polls" as the name.
2. Create a new user account using the Cloud Console for your Cloud SQL instance named polls-instance.

Configure the database settings

1. Open mysite/settings.py for editing.
2. In two places, replace [YOUR-USERNAME] and [YOUR-PASSWORD] with the database username and password that you created in the previous section. That helps set up the connection to the database for App Engine deployment and local testing.
3. In the line that says, ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME],' replace [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] with the value that you recorded in the previous section.
4. Run the following command and copy the outputted instance connection name value for the next step.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

5. Replace [YOUR-CONNECTION-NAME] with the value that you recorded in the previous section.
6. Replace [YOUR-DATABASE] with the name that you chose in the previous section.

# [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>
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '/cloudsql/[PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]',
            'NAME': '[YOUR-DATABASE]',
        }
    }
else:
    # 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 https://cloud.google.com/sql/docs/mysql-connect-proxy
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '127.0.0.1',
            'PORT': '3306',
            'NAME': '[YOUR-DATABASE]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]'
        }
    }
# [END db_setup]

7. Close and save settings.py.

5. Service account setup

1. In Dialogflow's console, click . In the General tab next to Project ID, click Google Cloud .
2. Click Navigation menu ☰ > APIs & Services > Credentials.
3. Click Create Credentials > Service account.
4. In the Service account details, enter "appointment-scheduler" as the Service account name, then click Create.

5. Where it says Grant this service account access to project, click Continue to skip it.
6. Where it says Grant users access to this service account (optional), click Create Key > JSON > Create.

A JSON file will download to your computer, which you'll need in the following setup sections.

6. Set up Dialogflow detectIntent endpoint to be called from the app

1. In the chat folder, replace AppointmentScheduler.json with your credentials JSON file.
2. In views.py in the chat folder, change the GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" to your project ID.

7. Build and run the app locally

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, see Setting Up a Python Development Environment.

1. Create an isolated Python environment and install dependencies:

virtualenv env
source env/bin/activate
pip install -r requirements.txt

2. Run the Django migrations to set up your models.

python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate

3. Start a local web server.

python3 manage.py runserver

4. In your web browser, enter http://localhost:8000/. You should see a simple webpage as seen in the following screenshot:

The sample app pages are delivered by the Django web server running on your computer. When you're ready to move forward, press Control+S (Command+S on Macintosh) to stop the local web server.

8. Deploy the app to the App Engine standard environment

Run the following command to move all of the app's static files into the folder specified by STATIC_ROOT in settings.py:

python3 manage.py collectstatic

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

gcloud app deploy

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

9. Test the frontend client

In your web browser, enter https://<your_project_id>.appspot.com.

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

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

10. Production

11. When you're ready to serve your content in production, change the DEBUG variable to False in mysite/settings.py.

12. Test your chatbot

Navigate to https://<your_project_id>.appspot.com and enter the following:

1. User: "Set an appointment for vehicle registration at 3 PM tomorrow."
2. The chatbot responds as follows:

3. Calendar books the response.

13. Clean up

If you plan to complete other Dialogflow codelabs, then skip this part for now and return to it later.

Delete the Dialogflow agent

1. Click next to your existing agent.
2. 
3. In the General tab, scroll to the bottom and click Delete This Agent.
4. Type Delete into the window that appears and click Delete.

14. Congratulations

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

Learn more

Check out the following resources to learn more:

• Integrate the Vision API with Dialogflow
• Code samples on the Dialogflow Github page