エージェントをホストする

このチュートリアルの最後のステップは、Dialogflow エージェントをホストすることです。App Engine はセットアップが簡単で、簡単にスケーリングできるため、ホスティングに使用されます。Dialogflow Messenger の統合は、エージェントのユーザー インターフェースに使用されます。

プロジェクトの構成

Dialogflow エージェントと App Engine インスタンスの両方が同じプロジェクト内にあることが理想的です。また、Cloud Build API を有効にする必要があります。

  1. インスタンスを作成する前に、Google Cloud コンソールからプロジェクトを選択します。

    プロジェクト セレクタに移動

  2. プロジェクトに対して Cloud Build API を有効にします。

    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 1.12 以降のランタイム環境のドキュメントで、サポートされている Go バージョンのリストを確認できます。このファイルには次の内容を入力します。

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 ツールを使用してデプロイします。

  1. gcloud が Dialogflow エージェントと同じプロジェクトで構成されていることを確認します。プロジェクトを確認するには:

    gcloud config get-value project

    プロジェクトを変更するには:

    gcloud config set project YOUR_PROJECT

  2. app.yaml ファイルがある go-app ディレクトリで、次のコマンドを使用してウェブサービスを App Engine にデプロイします。

    gcloud app deploy

    このコマンドを実行すると、リージョンの入力を求められます。Dialogflow エージェントと同じリージョンを選択してください。このコマンドは target url 値を出力します。この値は、ウェブサービスの URL です。

  3. ブラウザを起動してウェブサービスを表示するには、前の手順で取得したターゲット URL を開くか、次のコマンドを実行します。

    gcloud app browse

Dialogflow Messenger を設定する

Dialogflow Messenger をセットアップして有効にするには:

  1. Dialogflow CX コンソールに移動
  2. Google Cloud プロジェクトを選択します。
  3. エージェントを選択します。
  4. [Manage] タブを選択します。
  5. 左側のサイドバー メニューで [Integrations] をクリックします。
  6. Dialogflow Messenger の [接続] をクリックします。
  7. 構成ダイアログが開きます。
  8. [有効にする] をクリックします。
  9. ウェブサイトに貼り付ける埋め込みコードをコピーします。
  10. 構成ダイアログで [完了] をクリックします。

ウェブサービスにエージェントを埋め込む

上記でコピーした埋め込みコードを index.html ファイルに貼り付けます。<script> と <df-messenger> HTML 要素をページの <body> 要素に含める必要があります。

gcloud を使用してウェブサービス アプリを再度デプロイします。 埋め込んだら、右下のチャット アイコンをクリックすると、ウェブページを介してエージェントを操作できます。

ウェブページに埋め込まれた Dialogflow エージェントのスクリーンショット

これで、Dialogflow エージェントが完全にデプロイされました。エージェントと会話してみます。

クリーンアップ

このチュートリアルの手順を行っている間に、課金対象リソースを作成しました。Google Cloud アカウントに追加料金が課されるのを回避するには:

  1. データベース インスタンスを削除します。

  2. 関数を削除します。

    gcloud functions delete tutorial-telecommunications-webhook

  3. アプリを無効にする

  4. エージェントを削除します

詳細

上記の手順の詳細については、以下をご覧ください。

前へ
データベースにクエリを実行する