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

Dialogflow アプリ用にフロントエンド Django クライアントを構築する

1. 始める前に

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

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

前提条件

先に進む前に、次の Codelab を完了する必要があります。

学習内容

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

作成するアプリの概要

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

必要なもの

Python の基本知識
Dialogflow の基本知識

2. アーキテクチャの概要

以前に構築した予約スケジューラの会話エクスペリエンスを使用して、アプリのカスタムフロントエンドを作成します。Django でフロントエンドを構築し、ローカルで実行してテストしてから、App Engine にデプロイします。

ユーザーがフロントエンドから予約リクエストを送信します。次に Dialogflow DetectIntent API を呼び出して、リクエストされた日時に予約を設定します。Dialogflow フルフィルメントは、それぞれの予約を設定するリクエストをカレンダーに送信し、Dialogflow を介してユーザーに確認を返します。

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

3. フロントエンドアプリをダウンロードして実行する

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

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

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

cd Django-Dialogflow-Appointment-Scheduler

4. ローカル環境を設定する

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

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

Cloud SQL Proxy をインストールする

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 コンソールを使用して、Cloud SQL インスタンス用の polls-instance という名前の新しいデータベースを作成します。たとえば、「アンケート」と入力し、を使用します。
Cloud コンソールを使用して、polls-instance という名前の Cloud SQL インスタンス用の新しいユーザーアカウントを作成します。

データベースの設定を行う

mysite/settings.py を編集用に開きます。
2 つの場所で、[YOUR-USERNAME] と [YOUR-PASSWORD] を前のセクションで作成したデータベースのユーザー名とパスワードに置き換えます。これは、App Engine のデプロイとローカルテストのためにデータベースへの接続を設定するのに役立ちます。
‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME],' という行で、[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を閉じて保存します。

5. サービスアカウントの設定

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

[このサービスアカウントにプロジェクトへのアクセスを許可する] と表示されたら、[続行] をクリックしてスキップします。
[Grant users access to this service account (optional)]（ユーザーにこのサービスアカウントへのアクセスを許可する（省略可））と記載されている場合は、[鍵を作成] をクリックします。JSON >作成:

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

6. アプリから呼び出されるように DialogflowdetectIntent エンドポイントを設定する

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

7. アプリをローカルでビルドして実行する

ローカルコンピュータで 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）を押してローカルウェブサーバーを停止します。

8. アプリを App Engine スタンダード環境にデプロイする

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

python3 manage.py collectstatic

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

gcloud app deploy

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

9. フロントエンドクライアントをテストする

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

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

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

10. 本番環境

11. 本番環境でコンテンツを提供する準備ができたら、serving/settings.py の DEBUG 変数を False に変更します。

12. chatbot をテストする

https://<your_project_id>.appspot.com に移動して、次のように入力します。

お客様: 「明日の午後 3 時に車両登録の予定を設定して」
chatbot は次のように応答します。

カレンダーが回答を予約します。

13. クリーンアップ

他の Dialogflow Codelab を完了する予定がある場合は、今のところこの部分をスキップして、後でやり直してください。

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

既存のエージェントの横にあるをクリックします。
[General] タブで、下にスクロールして [Delete This Agent] をクリックします。
表示されたウィンドウに「Delete」と入力して、[削除] をクリックします。

14. 完了

Dialogflow で chatbot を作成し、カレンダーと統合しました。これで chatbot の開発が可能になりました。

その他の情報

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

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