このチュートリアルの最後のステップは、Dialogflow エージェントをホストすることです。 設定とスケーリングが容易であることから、App Engine はホスティングに使用されます。Dialogflow Messenger 統合は、エージェントのユーザー インターフェースに使用されます。
プロジェクトの構成
理想的には、Dialogflow エージェントと App Engine インスタンスの両方が同じプロジェクト内にあることです。 また、Cloud Build API を有効にする必要があります。
インスタンスを作成する前に、Google Cloud コンソールからプロジェクトを選択します。
プロジェクトに対して Cloud Build API を有効にします。
環境のセットアップ
App Engine 用の Go アプリケーションを開発するには、インストールして構成作業をいくつか行う必要があります。開発環境の設定でまだ完了していない手順を完了します。
ウェブサービス コードを作成する
このチュートリアルのサンプルコードは Go で記述されていますが、App Engine でサポートされている任意の言語を使用できます。 ローカルマシンの任意の場所に次のファイル構造を作成します。
go-app/
: Go サービスのディレクトリ。templates/
: Go HTML テンプレートのディレクトリ。index.html
: Go HTML テンプレート。
app.yaml
: サービスの構成。main.go
: アプリケーション コード。
以降の 3 つのセクションでは、3 つのファイルの内容について説明します。
index.html
ファイルの内容
この Go HTML テンプレート ファイルには、ホームページの HTML が含まれています。このファイルに次の内容を入力します。
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Tutorial agent</title> </head> <body> <p>Open the chat window in the bottom right corner.</p> </body> </html>
app.yaml
ファイルの内容
これは、サービスのランタイム環境の設定を指定する構成ファイルです。 サポートされている Go バージョンのリストについては、Go 1.12 以降のランタイム環境のドキュメントをご覧ください。 このファイルに次の内容を入力します。
runtime: go116 # or another supported version
main.go
ファイルの内容
このファイルにはアプリケーション コードが含まれています。このファイルに次の内容を入力します。
// Package main is the main package package main import ( "log" "net/http" "os" "text/template" ) var templates *template.Template func init() { templates = template.Must(template.New("").ParseGlob("templates/*")) } // indexHandler handles the homepage. func indexHandler(w http.ResponseWriter, r *http.Request) { if r.URL.Path != "/" { http.NotFound(w, r) return } if err := templates.ExecuteTemplate(w, "index.html", nil); err != nil { log.Fatal(err) } } func main() { // Register the handlers http.HandleFunc("/", indexHandler) port := os.Getenv("PORT") if port == "" { port = "8080" log.Printf("Defaulting to port %s", port) } log.Printf("Listening on port %s", port) if err := http.ListenAndServe(":"+port, nil); err != nil { log.Fatal(err) } }
ウェブサービスをデプロイする
これで、コードをデプロイできるようになりました。以下のデプロイの手順では、gcloud ツールを使用します。
gcloud が Dialogflow エージェントと同じプロジェクトで構成されていることを確認します。 プロジェクトを確認するには:
gcloud config get-value project
プロジェクトを変更するには:
gcloud config set project YOUR_PROJECT
app.yaml
ファイルがあるgo-app
ディレクトリで、次のコマンドを使用してウェブサービスを App Engine にデプロイします。gcloud app deploy
コマンドから、リージョンの入力を求められます。 Dialogflow エージェントと同じリージョンを選択してください。 このコマンドを実行すると、
target url
値(ウェブサービスの URL)が出力されます。ブラウザを起動してウェブサービスを表示するには、前のステップで取得したターゲット URL を開くか、次のコマンドを実行します。
gcloud app browse
Dialogflow Messenger を設定する
Dialogflow Messenger をセットアップして有効にするには:
- Dialogflow ES コンソールに移動します。
- 左側のサイドバー メニューで [Integrations] をクリックします。
- [Dialogflow Messenger] をクリックします。
- 構成ダイアログが開きます。
- 環境を選択します。
- [有効にする] をクリックします。
- ウェブサイトに貼り付ける埋め込みコードをコピーします。
- [閉じる] をクリックします。
ウェブサービスにエージェントを埋め込む
上記でコピーした埋め込みコードを index.html
ファイルに貼り付けます。
<script>
と <df-messenger>
HTML 要素をページの <body>
要素に含める必要があります。
gcloud でウェブサービス アプリを再度デプロイします。埋め込んだら、右下のチャット アイコンをクリックすると、ウェブページを介してエージェントを操作できます。
これで、Dialogflow エージェントが完全にデプロイされました。 エージェントと会話してみてください。
クリーンアップ
このチュートリアルの手順を進めながら、課金対象のリソースを作成しました。 Google Cloud アカウントに課金されないようにするには:
- データベース インスタンスを削除します。
関数を削除します。
gcloud functions delete tutorial-telecommunications-webhook
詳細
上述の手順の詳細については、以下をご覧ください。