Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Diese Seite wurde von der Cloud Translation API übersetzt.

Front-End-JWT-Client für Dialogflow-Anwendung erstellen

In diesem Codelab lernen Sie Folgendes:

JWT-Front-End-Client herunterladen, einrichten und ausführen
Richten Sie den Dialogflow-Intent-Endpunkt ein, der vom JWT-Front-End-Client aufgerufen werden soll.
Anwendung in Google Cloud in App Engine bereitstellen
Testen Sie, ob Kalendereinladungen pro Nutzeranfrage eingerichtet werden.

Vorbereitung

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

Lerninhalte

JWT-Front-End-Client für Dialogflow einrichten und ausführen
JWT-Front-End-Client in Google Cloud in App Engine bereitstellen
Dialogflow-Anwendung über ein benutzerdefiniertes Front-End testen

Aufgaben

Sie richten einen JWT-Front-End-Client für Dialogflow ein.
Sie stellen den JWT-Front-End-Client für 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

Sie verwenden die zuvor erstellte Konversationsansicht Terminplan und erstellen ein benutzerdefiniertes Front-End für die App. Sie erstellen das Front-End mit JWT, führen es aus und testen es lokal 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 gewünschte Uhrzeit einzurichten. Dialogflow Fulfillment sendet eine Anfrage an Google Kalender, um den entsprechenden Termin festzulegen und eine Bestätigung an den Nutzer über Dialogflow zurückzugeben.

Das Endergebnis sieht so aus:

Klonen Sie das Repository auf Ihrem lokalen Computer, indem Sie folgenden Befehl im lokalen Terminal Ihres Computers eingeben:

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

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

Bei der Bereitstellung verwendet die Anwendung den Cloud SQL-Proxy, der in die App Engine-Standardumgebung integriert ist, um mit Ihrer Cloud SQL-Instanz zu kommunizieren. Zum Testen Ihrer Anwendung 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.

Wenn Sie einfache Administratoraufgaben auf Ihrer Cloud SQL-Instanz ausführen möchten, 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 bei lokaler Ausführung eine Verbindung zu Ihrer Cloud SQL-Instanz herzustellen.

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

Erstellen Sie eine Cloud SQL für MySQL-Instanz der zweiten Generation. Benennen Sie die Instanz mit „polls-instance"“ oder Ähnliches. Es kann einige Minuten dauern, bis die Instanz bereit ist. Nach Abschluss sollte sie in der Instanzliste zu sehen sein.
Führen Sie mit dem gcloud-Tool den folgenden Befehl aus, wobei [YOUR_INSTANCE_NAME] den Namen Ihrer Instanz darstellt. Notieren Sie sich den Wert, der für den Instanzverbindungsnamen im nächsten Schritt angezeigt wird. Er wird im Format [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]. angegeben.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

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

Cloud SQL-Instanz initialisieren

Starten Sie den Cloud SQL-Proxy mithilfe des Namens der Instanzverbindung aus dem vorherigen Schritt. Ersetzen Sie [YOUR_INSTANCE_CONNECTION_NAME] durch den Wert, den Sie im vorherigen Schritt aufgezeichnet haben. Zu diesem Zweck wird eine Verbindung zwischen Ihrem lokalen Computer und Ihrer Instanz hergestellt. Lassen Sie den Cloud SQL-Proxy weiter ausführen, 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.

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

Datenbankeinstellungen konfigurieren

Öffnen Sie mysite/settings.py zum Bearbeiten.
Ersetzen Sie [YOUR-USERNAME] und [YOUR-PASSWORD] an zwei Stellen durch den Nutzernamen und das Passwort, die Sie im vorherigen Abschnitt erstellt haben. Damit können Sie die Verbindung zur Datenbank für die App Engine-Bereitstellung und lokale Tests herstellen.
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 aufgezeichnet haben.
Führen Sie den folgenden Befehl aus und kopieren Sie den ausgegebenen Namen der Instanzverbindung für den nächsten Schritt.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Ersetzen Sie [YOUR-CONNECTION-NAME] durch den Wert, den Sie im vorherigen Abschnitt aufgezeichnet haben.
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]

Schließen und speichern Sie settings.py.

Klicken Sie in der Konsole von Dialogflow auf . Klicken Sie auf dem Tab Allgemein neben Projekt-ID auf Google Cloud .
Klicken Sie auf Navigationsmenü ☰ > APIs & Services > Anmeldedaten.
Klicken Sie auf Anmeldedaten erstellen > Dienstkonto.
Geben Sie unter Dienstkontodetails als Namen des Dienstkontos den Namen „appointment-scheduler“ ein und klicken Sie dann auf Erstellen.

Klicken Sie bei Diesem Dienstkonto Zugriff auf das Projekt erteilen auf Weiter, um das Projekt zu überspringen.
Klicken Sie bei Nutzern Zugriff auf dieses Dienstkonto erteilen (optional) auf Schlüssel erstellen > JSON > Erstellen.

Daraufhin wird eine JSON-Datei auf Ihren Computer heruntergeladen, die Sie in den folgenden Abschnitten zur Einrichtung benötigen.

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

Um die JWT-Anwendung auf dem lokalen Computer auszuführen, müssen Sie eine Python-Entwicklungsumgebung einrichten, einschließlich Python, pip und nowrap. Eine Anleitung dazu finden Sie unter Python-Entwicklungsumgebung einrichten.

Erstellen Sie eine isolierte Python-Umgebung und installieren Sie Abhängigkeiten:

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

Führen Sie die JWT-Migrationen aus, um Ihre Modelle einzurichten.

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

Starten Sie einen lokalen Webserver:

python3 manage.py runserver

Geben Sie in Ihrem Webbrowser http://localhost:8000/ ein. Sie sollten eine einfache Webseite sehen, wie im folgenden Screenshot dargestellt:

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

Führe den folgenden Befehl aus, um alle statischen Dateien der App in den von STATIC_ROOT in settings.py angegebenen Ordner zu verschieben:

python3 manage.py collectstatic

Lade die App hoch, indem du im Verzeichnis der App, in dem sich die app.yaml-Datei befindet, den folgenden Befehl ausführen:

gcloud app deploy

Warten Sie, bis die Meldung angezeigt wird, dass das Update abgeschlossen ist.

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 App wie in app.yaml beschrieben bereitgestellt und die neu bereitgestellte Version als Standardversion festgelegt. Dadurch wird der gesamte neue Traffic verarbeitet.

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

Nutzer: " Termin für die Fahrzeugregistrierung morgen um 15 Uhr festlegen."
Der Chatbot antwortet so:

Die Antwort wird in Google Kalender gebucht.

Wenn Sie andere Dialogflow-Codelabs erstellen möchten, überspringen Sie diesen Teil vorerst und kehren Sie später dorthin zurück.

Dialogflow-Agent löschen

Klicken Sie neben Ihrem vorhandenen Agent auf .

Scrollen Sie auf dem Tab Allgemein ganz nach unten und klicken Sie auf Diesen Agent löschen.
Geben Sie in dem sich öffnenden Fenster Löschen ein und klicken Sie auf Löschen.

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

Weitere Informationen

Weitere Informationen findest du unter folgenden Links:

Vision API in Dialogflow einbinden
Codebeispiele auf der Seite Dialogflow GitHub