Frontend-Django-Client für eine Dialogflow-Anwendung erstellen

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie einen Django-Front-End-Client erstellen, um eine Konversation für eine Dialogflow-Anwendung zu erstellen. Insbesondere werden Sie Folgendes tun:

  • Laden Sie den Django-Front-End-Client herunter, richten Sie ihn ein und führen Sie ihn aus.
  • Richten Sie den Dialogflow-Endpunkt detectIntent so ein, dass er vom Django-Frontend-Client aufgerufen wird.
  • Stellen Sie die Anwendung in Google Cloud in App Engine bereit.
  • Testen Sie, ob Kalender-Einladungen pro Nutzeranfrage eingerichtet werden.

Vorbereitung

Bevor Sie fortfahren, müssen Sie die folgenden Codelabs absolvieren:

  1. Terminplaner mit Dialogflow erstellen
  2. Entitäten in Dialogflow
  3. Fulfillment durch Einbindung von Dialogflow in Google Kalender verstehen

Lerninhalte

  • Anleitung zum Einrichten und Ausführen eines Django-Front-End-Clients für Dialogflow
  • Anleitung zum Bereitstellen des Django-Front-End-Clients in Google Cloud in App Engine
  • Dialogflow-Anwendung über ein benutzerdefiniertes Frontend testen

Aufgaben

  • Sie richten einen Django-Frontend-Client für Dialogflow ein und führen ihn aus.
  • Sie stellen den Django-Front-End-Client in Google Cloud in App Engine bereit.
  • Sie testen eine Dialogflow-Anwendung über dieses benutzerdefinierte Front-End.

Voraussetzungen

  • Grundlegendes Verständnis von Python
  • Grundlegendes Verständnis von Dialogflow

2. Architekturübersicht

Dazu verwenden Sie die zuvor erstellte Unterhaltung mit dem Terminplaner und erstellen ein benutzerdefiniertes Frontend für die Anwendung. Sie erstellen das Front-End mit Django, führen und testen es lokal aus und stellen es in App Engine bereit.

Der Nutzer sendet eine Terminanfrage über das Front-End, das die Dialogflow detectIntent API aufruft, um einen Termin für das angeforderte Datum und die angeforderte Uhrzeit zu vereinbaren. Die Dialogflow-Auftragsausführung sendet dann eine Anfrage an Google Kalender, um den entsprechenden Termin festzulegen und über Dialogflow eine Bestätigung an den Nutzer zu senden.

84515171be610d4.png

Das Endergebnis sieht so aus:

7146cd729c50f7c1.png

3. Front-End-Anwendung herunterladen und ausführen

  1. Klonen Sie das Repository auf Ihren lokalen Computer. Geben Sie dazu folgenden Befehl im lokalen Terminal Ihres Computers ein:
git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git
  1. Wechseln Sie zu dem Verzeichnis, das den Code enthält. Sie können das Beispiel auch als ZIP-Datei herunterladen und extrahieren.
cd Django-Dialogflow-Appointment-Scheduler

4. Lokale Umgebung einrichten

Nach der Bereitstellung verwendet Ihre Anwendung den in die App Engine-Standardumgebung integrierten Cloud SQL-Proxy, um mit der Cloud SQL-Instanz zu kommunizieren. Um Ihre Anwendung lokal zu testen, müssen Sie jedoch eine lokale Kopie des Cloud SQL-Proxys in Ihrer Entwicklungsumgebung installieren und verwenden. Weitere Informationen finden Sie unter Informationen zum Cloud SQL-Proxy.

Für einfache Verwaltungsaufgaben auf der Cloud SQL-Instanz können Sie den Cloud SQL for MySQL-Client verwenden.

Cloud SQL-Proxy installieren

Laden Sie den Cloud SQL-Proxy herunter und installieren Sie ihn. Der Cloud SQL-Proxy wird verwendet, um eine Verbindung zu Ihrer Cloud SQL-Instanz herzustellen, wenn sie lokal ausgeführt wird.

Laden Sie den Proxy herunter.

curl -o cloud_sql_proxy https://dl.google.com/cloudsql/cloud_sql_proxy.darwin.amd64

Machen Sie den Proxy ausführbar.

chmod +x cloud_sql_proxy

Cloud SQL-Instanz erstellen

  1. Cloud SQL for MySQL-Instanz der zweiten Generation erstellen: Geben Sie der Instanz den Namen "polls-instance". oder Ähnliches. Es kann einige Minuten dauern, bis die Instanz bereit ist. Anschließend sollte sie in der Instanzliste angezeigt werden.
  2. Führen Sie mit dem gcloud-Tool den folgenden Befehl aus. Dabei steht [YOUR_INSTANCE_NAME] für den Namen Ihrer Instanz. Notieren Sie sich den Wert, der für den Instanzverbindungsnamen für den nächsten Schritt im Format [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]. angezeigt wird.
gcloud sql instances describe [YOUR_INSTANCE_NAME]

Alternativ können Sie auf die Instanz klicken, um den Namen der Instanzverbindung anzuzeigen.

c11e94464bf4fcf8.png

Cloud SQL-Instanz initialisieren

Starten Sie den Cloud SQL-Proxy mithilfe des Instanzverbindungsnamens aus dem vorherigen Schritt. Ersetzen Sie [YOUR_INSTANCE_CONNECTION_NAME] durch den Wert, den Sie im vorherigen Schritt notiert haben. Dadurch wird eine Verbindung vom lokalen Computer zu Ihrer Instanz für lokale Testzwecke hergestellt. Lassen Sie den Cloud SQL-Proxy weiter ausgeführt, während Sie Ihre Anwendung lokal testen.

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

Erstellen Sie als Nächstes einen neuen Cloud SQL-Nutzer und eine neue Cloud SQL-Datenbank.

  1. Erstellen Sie mit der Google Cloud Console eine neue Datenbank für Ihre Cloud SQL-Instanz mit dem Namen polls-instance. Sie können beispielsweise „Umfragen“ eingeben. als Namen verwenden. a3707ec9bc38d412.png
  2. Erstellen Sie mithilfe der Cloud Console ein neues Nutzerkonto für Ihre Cloud SQL-Instanz namens polls-instance. f4d098fca49cccff.png

Datenbankeinstellungen konfigurieren

  1. Öffnen Sie mysite/settings.py zum Bearbeiten.
  2. Ersetzen Sie an zwei Stellen [YOUR-USERNAME] und [YOUR-PASSWORD] durch den Nutzernamen und das Passwort der Datenbank, die Sie im vorherigen Abschnitt erstellt haben. So können Sie die Verbindung zur Datenbank für die App Engine-Bereitstellung und lokale Tests einrichten.
  3. Ersetzen Sie in der Zeile ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]' [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] durch den Wert, den Sie im vorherigen Abschnitt notiert haben.
  4. Führen Sie den folgenden Befehl aus und kopieren Sie den ausgegebenen Wert für den Namen der Instanzverbindung für den nächsten Schritt.
gcloud sql instances describe [YOUR_INSTANCE_NAME]
  1. Ersetzen Sie [YOUR-CONNECTION-NAME] durch den Wert, den Sie im vorherigen Abschnitt notiert haben.
  2. Ersetzen Sie [YOUR-DATABASE] durch den Namen, den Sie im vorherigen Abschnitt ausgewählt haben.
# [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]
  1. Schließen und speichern Sie settings.py.

5. Dienstkonto einrichten

  1. Klicken Sie in der Konsole von Dialogflow auf e8a0a7d752849e01.png. Klicken Sie auf dem Tab Allgemein neben Projekt-ID auf Google Clouda9c6ff6374afe489.png.
  2. Klicke auf das Navigationsmenü 😃 > APIs und Dienste > Anmeldedaten:
  3. Klicken Sie auf Anmeldedaten erstellen. Dienstkonto. 86f51af0e7886fdd.png
  4. Geben Sie unter Dienstkontodetails „appointment-scheduler“ ein. als Name des Dienstkontos ein und klicken Sie dann auf Erstellen.

845d25f3e07ff770.png

  1. Klicken Sie unter Diesem Dienstkonto Zugriff auf das Projekt gewähren auf Weiter, um den Eintrag zu überspringen.
  2. Klicken Sie unter Nutzern Zugriff auf dieses Dienstkonto gewähren (optional) die Option Schlüssel erstellen > JSON > Erstellen:

Eine JSON-Datei wird auf Ihren Computer heruntergeladen, die Sie in den folgenden Einrichtungsabschnitten benötigen.

a424cec60144d707.png

6. Dialogflow detectIntent-Endpunkt einrichten, der von der App aufgerufen werden soll

  1. Ersetzen Sie im Chatordner AppointmentScheduler.json durch die JSON-Datei mit Ihren Anmeldedaten.
  2. Ändern Sie im Chatordner unter views.py die GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" in Ihre Projekt-ID.

7. Anwendung lokal erstellen und ausführen

Wenn Sie die Django-App auf Ihrem lokalen Computer ausführen möchten, müssen Sie eine Python-Entwicklungsumgebung einrichten, einschließlich Python, pip und env. Eine Anleitung finden Sie unter Python-Entwicklungsumgebung einrichten.

  1. Erstellen Sie eine isolierte Python-Umgebung und installieren Sie Abhängigkeiten:
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  1. Führen Sie die Django-Migrationen aus, um Ihre Modelle einzurichten.
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. Starten Sie einen lokalen Webserver:
python3 manage.py runserver
  1. Geben Sie in Ihrem Webbrowser http://localhost:8000/ ein. Es sollte eine einfache Webseite angezeigt werden, wie im folgenden Screenshot dargestellt:

d40910969aa71020.png

Die Beispiel-App-Seiten werden vom Django-Webserver bereitgestellt, der auf Ihrem Computer ausgeführt wird. Wenn Sie fortfahren möchten, drücken Sie Control+S (Command+S auf einem Mac), um den lokalen Webserver zu beenden.

8. App in der App Engine-Standardumgebung bereitstellen

Führen Sie den folgenden Befehl aus, um alle statischen Dateien der Anwendung in den durch STATIC_ROOT in settings.py angegebenen Ordner zu verschieben:

python3 manage.py collectstatic

Laden Sie die Anwendung hoch, indem Sie den folgenden Befehl im Verzeichnis der Anwendung ausführen, in dem sich die Datei app.yaml befindet:

gcloud app deploy

Warten Sie auf die Nachricht, dass das Update abgeschlossen ist.

9. Frontend-Client testen

Geben Sie in Ihrem Webbrowser https://<your_project_id>.appspot.com ein.

Dieses Mal wird Ihre Anfrage von einem Webserver bearbeitet, der in der App Engine-Standardumgebung ausgeführt wird.

Mit dem Befehl app deploy wird die Anwendung wie in app.yaml beschrieben bereitgestellt. Außerdem wird die neu bereitgestellte Version als Standardversion festgelegt, sodass der gesamte neue Traffic verarbeitet wird.

10. Produktion

11. Wenn Sie den Content in der Produktionsumgebung bereitstellen möchten, ändern Sie die Variable DEBUG in mysite/settings.py in "False".

12. Chatbot testen

Gehen Sie zu https://<your_project_id>.appspot.com und geben Sie Folgendes ein:

  1. Nutzer: „Termin für die Fahrzeugregistrierung um 15:00 Uhr morgen vereinbaren.“
  2. Der Chatbot antwortet so:

2b0abfec8f4ba279.png

  1. Google Kalender bucht die Antwort.

eb49089765b84fc6.png

13. Bereinigen

Wenn Sie beabsichtigen, weitere Dialogflow-Codelabs zu absolvieren, überspringen Sie diesen Teil vorerst und kehren Sie später hierher zurück.

Dialogflow-Agent löschen

  1. Klicken Sie neben dem vorhandenen Agent auf e8a0a7d752849e01.png.
  2. 520c1c6bb9f46ea6.png
  3. Scrollen Sie auf dem Tab General (Allgemein) nach unten und klicken Sie auf Delete this Agent (Diesen Agent löschen).
  4. Geben Sie im eingeblendeten Fenster Löschen ein und klicken Sie auf Löschen.

14. Glückwunsch

Sie haben in Dialogflow einen Chatbot erstellt und in Google Kalender eingebunden. Du bist jetzt ein Chatbot-Entwickler.

Weitere Informationen

Weitere Informationen finden Sie in den folgenden Ressourcen: