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

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

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

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

前提条件

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

学習内容

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

作成するアプリの概要

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

必要なもの

Python の基本的な知識
Dialogflow の基本的な知識

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

ユーザーはフロントエンドから予約リクエストを送信します。これにより、Dialogflow detectIntent 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 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 ユーザーとデータベースを作成します。

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

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

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を閉じて保存します。

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

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

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

chat フォルダで、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 は次のように応答します。

カレンダーで返信が予約されます。

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

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

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

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

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

その他の情報

詳細については、以下のリソースをご覧ください。

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