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

1. 始める前に

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

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

前提条件

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

  1. Dialogflow を使用して予約スケジューラを構築する
  2. Dialogflow のエンティティについて
  3. Dialogflow とカレンダーを統合してフルフィルメントを理解する

学習内容

  • 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 を介してユーザーに確認を返します。

84515171be610d4.png

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

7146cd729c50f7c1.png

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

  1. パソコンのローカル ターミナルで次のコマンドを入力して、ローカルマシンにリポジトリのクローンを作成します。
git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git
  1. コードが含まれているディレクトリに移動します。または、サンプルを 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 インスタンスを作成する

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

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

c11e94464bf4fcf8.png

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

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

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

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

  1. Google Cloud コンソールを使用して、Cloud SQL インスタンス用の polls-instance という名前の新しいデータベースを作成します。たとえば、「アンケート」と入力し、を使用します。a3707ec9bc38d412.png
  2. Cloud コンソールを使用して、polls-instance という名前の Cloud SQL インスタンス用の新しいユーザー アカウントを作成します。f4d098fca49cccff.png

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

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

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

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

845d25f3e07ff770.png

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

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

a424cec60144d707.png

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

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

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

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

  1. 切り離された Python 環境を作成し、依存関係をインストールします。
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  1. Django 移行を実行してモデルを設定します。
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. ローカルのウェブサーバーを起動します。
python3 manage.py runserver
  1. ウェブブラウザに「http://localhost:8000/」と入力します。次のスクリーンショットのようなシンプルなウェブページが表示されます。

d40910969aa71020.png

サンプルアプリのページは、ユーザーのコンピュータ上で実行されている Django ウェブサーバーから提供されます。次に進む準備ができたら、Control+S(Macintosh では Command+S)を押してローカル ウェブサーバーを停止します。

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

次のコマンドを実行して、アプリのすべての静的ファイルを settings.pySTATIC_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 に移動して、次のように入力します。

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

3b0abfec8f4ba279.png

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

eb49089765b84fc6.png

13. クリーンアップ

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

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

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

14. 完了

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

その他の情報

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