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

このページは Cloud Translation API によって翻訳されました。

Dialogflow アプリのフロントエンド Django クライアントの構築

この Codelab では、フロントエンド Django クライアントを構築して Dialogflow アプリの会話環境を作成する方法を学習します。具体的には、次のことを行います。

Django フロントエンドクライアントをダウンロード、設定、実行します。
Django フロントエンドクライアントから呼び出される Dialogflow インテントエンドポイントを設定します。
アプリを App Engine の Google Cloud にデプロイします。
ユーザーリクエストごとにカレンダーの招待状が設定されているかどうかをテストします。

Prerequisites

続行する前に、次の Codelab を完了する必要があります。

学習内容

Dialogflow の Django フロントエンドクライアントを設定して実行する方法
Django フロントエンドクライアントを App Engine の Google Cloud にデプロイする方法
カスタムフロントエンドから Dialogflow アプリをテストする方法

作成するアプリの概要

Dialogflow 用の Django フロントエンドクライアントを設定して実行します。
Django フロントエンドクライアントを App Engine 上の Google Cloud にデプロイします。
そのカスタムフロントエンドから Dialogflow アプリをテストします。

必要なもの

Python に関する基礎知識
Dialogflow の基本的な理解

以前に作成したカスタム予約フロントエンドを Appointment Scheduler で使用し、フロントエンドを作成します。Django でフロントエンドをビルドし、ローカルでテストしてから App Engine にデプロイします。

ユーザーはフロントエンド経由で予約リクエストを送信します。Dialogflow は DialogflowdetectIntent API を呼び出して、リクエストされた日時の予約を設定します。Dialogflow フルフィルメントはカレンダーにリクエストを送信して、各予約を設定し、Dialogflow を介してユーザーに確認を返します。

最終結果は次のようになります。

パソコンのローカルターミナルで次のコマンドを入力して、ローカルマシンにリポジトリのクローンを作成します。

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

コードが含まれているディレクトリに移動します。または、zip 形式でサンプルをダウンロードして展開することも可能です。

cd Django-Dialogflow-Appointment-Scheduler

デプロイ時に、アプリは App Engine スタンダード環境に組み込まれている Cloud SQL Proxy を使用して Cloud SQL インスタンスと通信します。ただし、アプリをローカルでテストするには、開発環境で Cloud SQL Proxy のローカルコピーをインストールして使用する必要があります。詳細については、Cloud SQL Proxy についてをご覧ください。

Cloud SQL インスタンスで基本的な管理タスクを行うには、Cloud SQL for MySQL クライアントを使用します。

Cloud SQL プロキシをインストールする

Cloud SQL Proxy をダウンロードしてインストールします。Cloud SQL Proxy は、ローカルで実行するときに Cloud SQL インスタンスに接続するために使用されます。

プロキシをダウンロードします。

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

プロキシを実行可能にする。

chmod +x cloud_sql_proxy

Cloud SQL インスタンスを作成する

Cloud SQL for MySQL 第 2 世代のインスタンスを作成します。インスタンスに「polls-instance」などの名前を付けます。インスタンスの準備が完了するまでに数分かかることがあります。準備が整うと、インスタンスリストに表示されます。
gcloud ツールを使用して次のコマンドを実行します。[YOUR_INSTANCE_NAME] はインスタンスの名前を表します。次のステップでインスタンス接続名として表示される値を、[PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]. の形式でメモしておきます。

gcloud sql instances describe [YOUR_INSTANCE_NAME]

または、インスタンスをクリックしてインスタンス接続名を表示することもできます。

Cloud SQL インスタンスを初期化する

前の手順のインスタンス接続名を使用して、Cloud SQL Proxy を起動します。[YOUR_INSTANCE_CONNECTION_NAME] は、前のステップで記録した値で置き換えます。これで、ローカルテストの目的でローカルコンピュータからインスタンスへの接続を確立します。アプリをローカルでテストしながら、Cloud SQL Proxy を実行したままにします。

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

次に、新しい Cloud SQL ユーザーとデータベースを作成します。

Google Cloud Console を使用して、Cloud SQL インスタンスに polls-instance という名前の新しいデータベースを作成します。たとえば、名前として「polls」と入力できます。
Cloud Console で、Cloud SQL インスタンスに polls-instance という名前の新しいユーザーアカウントを作成します。

データベース設定を構成する

mysite/settings.py を編集用に開きます。
[YOUR-USERNAME] と [YOUR-PASSWORD] を 2 か所で、前のセクションで作成したデータベースのユーザー名とパスワードに置き換えます。これは、App Engine のデプロイとローカルテストのためにデータベースとの接続を設定するのに役立ちます。
‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTAN という行'で、[PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] を前のセクションで記録した値に置き換えます。
次のコマンドを実行して、出力用にインスタンス接続名の値をコピーします。

gcloud sql instances describe [YOUR_INSTANCE_NAME]

[YOUR-CONNECTION-NAME] は、前のセクションで記録した値に置き換えます。
[YOUR-DATABASE] は、前のセクションで選択した名前に置き換えます。

# [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]

settings.pyを閉じて保存します。

Dialogflow のコンソールで、[] をクリックします。[General] タブで、[Project ID] の横にある [Google Cloud] をクリックします。
ナビゲーションメニュー ▾ > [API とサービス] > [認証情報] をクリックします。
[認証情報を作成] > [サービスアカウント] をクリックします。
[サービスアカウントの詳細] で、[サービスアカウント名] に「&appointment-scheduler"」と入力し、[作成] をクリックします。

[このサービスアカウントにプロジェクトへのアクセスを許可する] と表示されている場合は、[続行] をクリックしてスキップします。
[ユーザーにこのサービスアカウントへのアクセスを許可（オプション）] で、[鍵を作成] > [JSON] > [作成] をクリックします。

JSON ファイルがパソコンにダウンロードされます。このファイルは、以降のセットアップセクションで必要になります。

チャットフォルダで、AppointmentScheduler.json を認証情報の JSON ファイルに置き換えます。
チャットフォルダの views.py で、GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" をプロジェクト ID に変更します。

ローカルコンピュータ上で Django アプリを実行するには、Python、pip、virtualenv などの Python 開発環境をセットアップする必要があります。手順については、Python 開発環境の設定をご覧ください。

切り離された Python 環境を作成し、依存関係をインストールします。

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

Django の移行を実行して、モデルを設定します。

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

ローカルのウェブサーバーを起動します。

python3 manage.py runserver

ウェブブラウザで「http://localhost:8000/」と入力します。次のスクリーンショットのようなシンプルなウェブページが表示されます。

サンプルアプリのページは、パソコン上で実行されている Django ウェブサーバーによって配信されます。次に進む準備ができたら、Control+S（Macintosh では Command+S）を押してローカルウェブサーバーを停止します。

次のコマンドを実行して、アプリのすべての静的ファイルを settings.py の STATIC_ROOT で指定されたフォルダに移動します。

python3 manage.py collectstatic

app.yaml ファイルがあるアプリのディレクトリで、次のコマンドを実行してアプリをアップロードします。

gcloud app deploy

更新が完了したことを通知するメッセージが表示されるまで待ちます。

ウェブブラウザで、https://<your_project_id>.appspot.com と入力します。

今回は、App Engine スタンダード環境で実行されているウェブサーバーによってリクエストが処理されます。

app deploy コマンドは、app.yaml で説明しているようにアプリをデプロイし、新しくデプロイされたバージョンをデフォルトバージョンとして設定して、すべての新しいトラフィックを処理できるようにします。

https://<your_project_id>.appspot.com にアクセスして次のように入力します。

ユーザー: "明日の午後 3 時に車両登録の予約を設定する。
chatbot は次のように応答します。

Google カレンダーでは回答が予約されます。

他の Dialogflow Codelab を完了する場合は、この部分をスキップして後で説明します。

Dialogflow エージェントを削除する

既存のエージェントの横にあるをクリックします。

[General] タブで一番下までスクロールし、[Delete This Agent] をクリックします。
表示されたウィンドウに「削除」と入力し、[削除] をクリックします。

Dialogflow で chatbot を作成し、カレンダーに統合しました。あなたは chatbot デベロッパーになりました

詳細

詳しくは、以下のリソースをご覧ください。

Vision API を Dialogflow と統合する
Dialogflow GitHub ページのコードサンプル