オンラインで購入して店舗で受け取れる: Bonjour 食事 - パート 1 - 利用方法

1. はじめに

最終更新日: 2022 年 5 月 11 日

ビジネスメッセージへようこそ

この Codelab では、ビジネスメッセージとの統合について説明します。ビジネスメッセージを使用すると、ユーザーは Google 検索と Google マップを通じて、管理しているビジネスとつながることができます。ビジネスメッセージと直接統合したい企業、提携している企業向けにメッセージソリューションを構築している独立系ソフトウェアベンダー、ビジネスメッセージを偶然見つけてプラットフォームを試してみたい方など、さまざまな方がいらっしゃるでしょう。

この Codelab は、どのような目的でここに来られた場合でも、始めるにあたって最適な方法です。このチュートリアルを完了すると、ユーザーが操作できる最初のデジタルエージェントが完成します。ビジネスメッセージのリリース準備が整ったら、数百万ものユーザーにリーチできる可能性があります。

優れたデジタルエージェントとは

ビジネスメッセージは会話型のサーフェスで、モバイルデバイスでアプリのようなエクスペリエンスを提供し、消費者が追加のアプリをインストールしなくてもビジネスとつながることができます。デジタルエージェントは、顧客がやり取りするロジックの一部です。ロジックは、クラウドまたはインフラストラクチャにデプロイされたウェブアプリケーションによって管理されます。ユーザーへの対応は、完全にユーザー次第です。優れたエージェントは、状況を把握して期待値を設定し、顧客のエンゲージメントを維持し、ユーザーのニーズをサポートする機能を提供します。

作成するアプリの概要

この Codelab では、架空の会社 Bonjour Meal 用にビジネスメッセージでデジタルエージェントを構築します。このデジタルエージェントは、「営業時間は何時までですか？」や「オンラインで購入できますか？」といった簡単な質問に回答します。

この Codelab では、ユーザーがデジタルエージェントを通じて商品を購入し、支払い処理業者にユーザーを誘導して代金を回収し、架空の商品の店舗での受け取りをスケジュール設定できるようにします。

この Codelab では、アプリで次のことをできるようにします。

候補ワードを使用して質問に回答する
デジタルエージェントが回答できる質問をするようユーザーを誘導する
ユーザーが会話に集中できるように、リッチな会話機能を提供する

学習内容

Google Cloud Platform 上の App Engine にウェブアプリケーションをデプロイする方法。または、ngrok を使用して、ローカルアプリケーションを公開でテストすることもできます。
ユーザーからのメッセージを受信するようにウェブアプリケーションの Webhook を使用してビジネスメッセージアカウントを設定する方法
Business Messages API でカード、カルーセル、会話型候補などのリッチ機能を送信する方法
Business Messages でメッセージを送信する方法

この Codelab では、最初のデジタルエージェントの構築に焦点を当てます。

必要なもの

無料の Business Communications デベロッパーアカウントに登録する
手順については、デベロッパーサイトをご覧ください。
Android バージョン 5 以降を搭載した Android デバイス、または Google マップアプリがインストールされている iOS デバイス
ウェブアプリケーションプログラミングの経験
インターネット接続

2. 設定方法

API を有効にする

この Codelab では Django アプリケーションを使用するため、Cloud Build API を使用してアプリケーションを App Engine にデプロイします。または、ngrok を使用している場合は、Cloud Build API を有効にする必要はありません。

Cloud Build API を有効にするには:

Google Cloud Console で Cloud Build API を開きます。
[有効にする] をクリックします。

サービスアカウントを作成する

Business Communications API とビジネスメッセージ API にアクセスするには、サービスアカウントを作成する必要があります。Business Communications Developer Console でサービスアカウントを作成する手順に沿って操作します。

Django Python EchoBot スターターコードをデプロイする

ターミナルで、次のコマンドを使用して、Django Echo Bot サンプルのクローンをプロジェクトの作業ディレクトリに作成します。

$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code

サービスアカウント用に作成された JSON 認証情報ファイルをサンプルのリソースフォルダにコピーし、認証情報の名前を「bm-agent-service-account-credentials.json」に変更します。

bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json

ターミナルで、サンプルの step-1 ディレクトリに移動します。

ターミナルで次のコマンドを実行して、サンプルをデプロイします。

$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy

PROJECT_ID は、API への登録に使用したプロジェクトのプロジェクト ID です。

最後のコマンドの出力に記載されている、デプロイしたアプリケーションの URL をメモします。

Deployed service [default] to [https://PROJECT_ID.appspot.com]

デプロイしたスターターコードには、ビジネスメッセージからメッセージを受信するための Webhook を持つウェブアプリケーションが含まれています。このアプリケーションは、メッセージをユーザーにエコーバックし、会話型サーフェスで利用できる豊富な機能の一部を紹介できます。

Webhook を構成する

サービスがデプロイされたら、アプリケーションの URL を使用して、Business Communications デベロッパーコンソールの [アカウント設定] ページで Webhook URL を設定します。

Webhook URL は、アプリケーションの URL + 「/callback/」になります。たとえば、https://PROJECT_ID.appspot.com/callback/ のようになります。

ビジネスコミュニケーションコンソールのアカウント設定ページに移動します。ナビゲーションバーの下の右上隅に、GCP プロジェクト名が表示されます。プルダウンが表示されたら、GCP プロジェクトを選択します。

[Technical point of contact] の詳細を入力し、デプロイされたアプリケーションの Webhook URL で [Webhook] を更新します。

GCP プロジェクトの参照の横にある [保存] をクリックします。

3. 最初のエージェントを作成する

Business Communications デベロッパーコンソールを使用する

Business Communications コンソールで、左上のロゴをクリックしてコンソールのダッシュボードに戻り、[エージェントを作成] をクリックします。ブランドは、エージェントの作成と同時に作成します。[エージェントタイプ] で [ビジネスメッセージ] を選択し、[パートナー情報] が正しいことを確認します。

[ブランド] に、作成するブランドの名前を入力します。ブランドは、お客様がエージェントと会話形式でやり取りできるビジネスです。[エージェント名] で、Business Messages の会話でユーザーに表示する内容を指定します。架空の Bonjour Meal の場合、Bonjour Rail は Bonjour Meal レストランを管理する鉄道会社です。そこで、ブランドを Bonjour Rail、エージェントを Bonjour Meal と指定します。

エージェントは、ブランドを表す会話エンティティです。

[エージェントを作成] をクリックすると、コンソールが自動的に処理を行います。このリクエストは、Business Communications API に複数のリクエストを送信してブランドとエージェントを作成するのに数秒かかります。Business Communications API を直接使用して、エージェントとブランドを作成できます。コンソールと同じ処理を行う curl リクエストの例については、ドキュメントをご覧ください。

初めての会話

作成したエージェントを開くと、[概要] ページが表示され、エージェントの詳細の確認を開始できます。エージェントのテスト URL をご覧ください。これらの URL は、デバイスで会話サーフェスを呼び出すために使用されます。

いずれかのチップをクリックすると、テスト URL をコピーできます。もちろん、手元にあるデバイスのテスト URL をコピーしてテストします。コピーしたメッセージを、お好きな方法でデバイスに送信します。

モバイルデバイスでリンクをタップすると、ビジネスメッセージエージェントランチャーが起動し、エージェントのテスト URL が事前入力されます。

[起動] をタップして、エージェントの会話型サーフェスを呼び出します。

エージェントと対話して、エージェントの機能を把握します。ほとんどの場合、会話型サーフェスはメッセージをエコーバックするだけです。「Hello, World!」などのメッセージを送信すると、エージェントから同じメッセージが返信されます。

デプロイされたアプリケーションには、ビジネスメッセージで利用できるリッチ機能をデモするためのロジックも含まれています。

「card」を送信すると、リッチカードが呼び出されます。
「チップ」を送信すると、候補ワードが呼び出されます。
「carousel」を送信すると、リッチカードのカルーセルが呼び出されます。

おめでとうございます！これは、エージェントとユーザーの最初の会話です。

これらのリッチ機能は、エージェントとやり取りしているユーザーにコンテキストをより適切に提供するために使用できます。リッチカードでグラフィックアセットを送信してアイデアを効果的に伝えたり、候補ワードを使用して会話をガイドしたりできます。

ウェルカムメッセージの更新と会話チップの使用

デベロッパーコンソールを使って、エージェントのウェルカムメッセージを編集し、提案チップを活用してユーザーがコミュニケーションできるようにする方法を練習しましょう。

エージェントの [概要] ページに移動し、[エージェント情報] を選択します。ウェルカムメッセージと会話のきっかけのセクションまで下にスクロールします。

ウェルカムメッセージ（黄色の入力フィールド）を次のように更新します。

Bonjour Meal スターターエージェントへようこそ。メッセージをエコーバックしたり、プラットフォームでサポートされているリッチ機能の一部を表示したりできます。次の提案を試してみてください。

上の画像の紫色のボックスで示されている [+ トピックの候補を追加] をクリックして、トピックの候補を追加し、候補チップ、カルーセル、カードを呼び出します。追加する会話の開始には、テキストコンポーネントと postbackData コンポーネントが必要です。テキストはユーザーに表示されるもので、postBack データはエージェントの Webhook に送信されるものです。Webhook はポストバックデータを解析し、ユーザーに適切なレスポンスを送信します。

変更後のコンソールの [エージェント情報] は次のようになります。

コンソールの右側に、エージェントのプレビューが表示されます。変更したばかりのウェルカムメッセージと、その下にある候補チップが反映されていることがわかります。

これは、ユーザーエクスペリエンスがどのようなものになるかを知るための優れたツールです。エージェントを構築し、サポートするユーザージャーニーを計画する際に使用できます。

以前のデータは Business Messages インフラストラクチャ内にキャッシュ保存されているため、これらの変更は会話にすぐに反映されません。キャッシュは約 2 時間ごとにクリアされるため、明日お試しいただけます。

その間、内部でどのように動作するかを見てみましょう。

4. スターターコードを分析する

ソースコードの概要

デプロイしたスターターコードは、ユーザーにメッセージをエコーバックし、リッチカード、カルーセル、候補ワードを表示できます。この仕組みを理解するために、ソースコードを詳しく見ていきましょう。その後、変更が必要な点を特定します。

スターターコードは Django プロジェクトです。この Codelab シリーズの後半では、Google Datastore を使用して、ショッピングカートや関連する会話などのデータを永続化します。Django を使用したことがなくても心配はいりません。この Codelab の終わりまでに、Django の仕組みを理解できるようになります。

大まかに言うと、Django は URL をビューにルーティングし、ビューのロジックによってブラウザでレンダリングされるテンプレートが生成されます。プロジェクトの urls.py を見てみましょう。

bm-django-echo-bot/bmcodelab/urls.py [31 ～ 37 行目]

from django.urls import include, path
import bopis.views as bopis_views

urlpatterns = [
    path('', bopis_views.landing_placeholder),
    path('callback/', bopis_views.callback),
]

ここでは 2 つのルートが定義されているため、Django はこれらの 2 つの URL が認識された場合にロジックを実行できます。プロジェクトの URL が https://PROJECT_ID.appspot.com/ の場合、プロジェクトが認識しているルートは次のようになります。

https://PROJECT_ID.appspot.com/
https://PROJECT_ID.appspot.com/callback/

どちらの URL ルートも、bopis/views.py の bopis_views を参照しています。このファイルで何が行われているかを見てみましょう。まず、bopis_views.landing_placeholder について理解しましょう。

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [302 ～ 309 行目]

... 
def landing_placeholder(request):
    return HttpResponse("<h1>Welcome to the Bonjour Meal Codelab</h1>
    <br/><br/>
    To message your Bonjour Meal agent, go to the Developer Console and retrieve
    the Test URLs for the agent you have created as described in the codelab
    <a href='https://codelabs.developers.google.com/codelabs/'>here</a>.")
...

このロジックは、プロジェクトのルートを指すウェブリクエストを受信したときにウェブサーバーによって実行されます。ここでは、特に複雑な処理は行いません。リクエストを行ったブラウザに、HTML を含む HTTPResponse を返すだけです。プロジェクトのルート URL を開くことはできますが、この Codelab に戻るため、あまり意味はありません。

もう一方の URL は、bopis/views.py 内の callback という関数にルーティングされます。この関数を見てみましょう。

bm-django-echo-bot/bopis/views.py [60 ～ 101 行目]

...
def callback(request):
    """
    Callback URL. Processes messages sent from user.
    """
    if request.method == "POST":
        request_data = request.body.decode('utf8').replace("'", '"')
        request_body = json.loads(request_data)

        print('request_body: %s', request_body)

        # Extract the conversation id and message text
        conversation_id = request_body.get('conversationId')
        print('conversation_id: %s', conversation_id)

        # Check that the message and text body exist

        if 'message' in request_body and 'text' in request_body['message']:
            message = request_body['message']['text']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'suggestionResponse' in request_body:
            message = request_body['suggestionResponse']['postbackData']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'userStatus' in request_body:
            if 'isTyping' in request_body['userStatus']:
                print('User is typing')
            elif 'requestedLiveAgent' in request_body['userStatus']:
                print('User requested transfer to live agent')

        return HttpResponse("Response.")

    elif request.method == "GET":
        return HttpResponse("This webhook expects a POST request.")
...

このロジックは、リクエスト本文から message または suggestionResponse を解析し、その情報を route_message という関数に渡します。その後、HttpResponse を Business Messages インフラストラクチャに返して、メッセージの受信を確認します。

これは重要な機能です。このロジックは、エージェントとやり取りするユーザーからのメッセージを受信するウェブアプリケーションの Webhook です。Webhook を拡張して、Dialogflow などの自動化ツールにメッセージを送信し、ユーザーが何を言っているかを理解して、その推論から応答を生成できます。メッセージを転送して、お客様がライブエージェントとつながれるようにすることもできます。次の図をご覧ください。

ビジネスメッセージは、メッセージの内容を JSON ペイロードとして Webhook に送信します。Webhook では、ライブエージェントまたはボットとして応答するロジックに転送されます。このルーティングメカニズムは、この例では route_message です。まぁとにかく見てください

bm-django-echo-bot/bopis/views.py [105 ～ 122 行目]

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    else:
        echo_message(message, conversation_id)
...

このロジックは、ユーザーが受信したメッセージの検証を開始します。まず、すべての文字を小文字に変換してメッセージを正規化します。正規化されたら、メッセージがファイルの先頭で定義された定数のいずれかであるかどうかがチェックされます。

bm-django-echo-bot/bopis/views.py [40 ～ 42 行目]

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...

つまり、この Codelab の前のステップで会話のきっかけの postback_data に配置した文字列のいずれかが含まれているメッセージを bot が解析します。これらの文字列のいずれも表示されない場合は、メッセージを echo_message という関数に渡します。この関数はメッセージをエコーバックするものです。

メッセージの送信

これで、ウェブアプリケーションがメッセージを受信する仕組みについて理解できたはずです。すべて webhook によって行われます。

では、アプリケーションは Business Messages を使用してユーザーに送信メッセージを送信するにはどうすればよいのでしょうか？

インフラストラクチャがユーザーに応答すると、その応答が Business Messages API に送信され、ユーザーにメッセージが配信されます。

Business Messages API には、Python、Node.js、Java のライブラリがあります。インフラストラクチャがライブラリでサポートされていない言語で記述されている場合は、直接リクエストを送信できる REST API も用意されています。メッセージの送信で、cURL を使用して特定の会話 ID にメッセージを送信する方法を確認してください。

この Codelab では、GCP プロジェクトの App Engine にデプロイされているか、ngrok を介してローカルで実行されている Bonjour Meal スターターコードにすでに統合されている Python クライアントライブラリの使用に焦点を当てます。

echo_message 関数を見て、API を操作してビジネスメッセージにメッセージを送信する方法を確認しましょう。

bm-django-echo-bot/bopis/views.py [199 ～ 212 行目]

...
def echo_message(message, conversation_id):
    '''
    Sends the message received from the user back to the user.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

この関数では、echo_message 関数に渡されたメッセージ変数を使用して BusinessMessagesMessage がインスタンス化されます。インスタンス化されたオブジェクトは、会話 ID とともに send_message に渡されます。

bm-django-echo-bot/bopis/views.py [214 ～ 236 行目]

...
def send_message(message, conversation_id):
    '''
    Posts a message to the Business Messages API, first sending
    a typing indicator event and sending a stop typing event after
    the message has been sent.

    Args:
        message (obj): The message object payload to send to the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    credentials = ServiceAccountCredentials.from_json_keyfile_name(
        SERVICE_ACCOUNT_LOCATION,
        scopes=['https://www.googleapis.com/auth/businessmessages'])

    client = bm_client.BusinessmessagesV1(credentials=credentials)

    # Create the message request
    create_request = BusinessmessagesConversationsMessagesCreateRequest(
        businessMessagesMessage=message,
        parent='conversations/' + conversation_id)

    bm_client.BusinessmessagesV1.ConversationsMessagesService(
        client=client).Create(request=create_request)
...

send_message 関数は、サービスアカウントの認証情報を使用して、この会話にメッセージを送信できることを確認し、ビジネスメッセージクライアントをインスタンス化して、指定された conversation ID にメッセージを送信するリクエストを作成します。

リッチ機能もこの send_message 関数を使用しますが、作成するメッセージはリッチカード、カルーセル、提案チップに固有のものです。リッチカードとカルーセルには画像アセットを含めることができますが、提案チップには postback_data が含まれているため、コールバックロジックで適切に解析できます。

メッセージの送信方法を確認したので、サンプルがリッチカード、カルーセル、候補チップを送信する方法を調べてみましょう。次のセクションでは、これらのリッチ機能の一部を使用してメッセージを送信するようにソースコードを変更します。

準備ができたら、Bonjour Meal エージェントをカスタマイズしましょう。

5. エージェントをカスタマイズする

この Codelab の手順をここまで実行していれば、エージェントが表示されるはずです。

あまり美しくありません。実際には、やや殺風景で、ビジネスをあまりうまく表現できていません。幸いなことに、エージェントをサポートするコードの基礎知識があり、エージェントを自由にカスタマイズするために必要なツールも用意されています。

この Codelab の残りの部分では、エージェントを次のように拡張します。

実際のロゴを含める
ウェルカムメッセージの改善
営業時間に関する情報を提供する
オンラインでのアイテム購入がまもなく可能になることをお客様に伝える
会話の候補ワードを使用して会話を円滑に進める

ロゴやウェルカムメッセージの更新には Business Communications Console を利用しますが、Business Communications API を直接使用して同じ操作を行うこともできます。次に、営業時間に関する情報を提供し、Bonjour Meal がオンラインショッピング機能をまもなく提供することを知らせる適切なメッセージを送信するようにソースコードを更新する必要があります。完了したら、Business Communications Console に戻り、会話をデジタルエージェントがサポートするハッピーパスエクスペリエンスに誘導する会話候補チップを作成します。

ロゴを含める

ビジネスコミュニケーションコンソールでエージェントを選択し、[エージェント情報] に移動します。以下の黄色で示されているように、[ビジネスのロゴ] を更新します。

[アップロード] をクリックすると、アップロードする画像を選択したり、URL からインポートしたりできます。

独自のロゴを使用する際の推奨事項については、ドキュメントのロゴのデザインガイドラインをご覧ください。

この Codelab の冒頭でクローンを作成したソースコードにあるロゴをアップロードしましょう。これは、リポジトリの ./assets/ ディレクトリにあります。ファイル名は「bonjour_meal-logo.png」です。ファイルをウェブブラウザのモーダルにドラッグすると、画像の品質と切り抜きを操作するための簡単な編集ツールが表示されます。画像の解像度と切り抜きを調整して、画像のサイズが 50 KB 以下になるようにします。画像に問題がなければ、青い円のチェックマークをクリックして確定し、モーダルの下部にある [選択] をクリックします。

最後に、[エージェント情報] ページの右上にある [保存] をクリックします。エージェント情報は Google のサーバーにキャッシュ保存されているため、この変更がデバイスに反映されるまでにはしばらく時間がかかります。変更後 2 時間以内に反映されるはずです。

ウェルカムメッセージを更新する

ウェルカムメッセージの更新は、この Codelab の前半ですでに行っています。もう一度同じことを行いますが、今回は Bonjour Meal のユーザージャーニーにより適したウェルカムメッセージを構成します。

Business Communications コンソールでエージェントを選択し、[エージェント情報] に移動します。[ウェルカムメッセージ] 入力フィールドが表示されるまで下にスクロールします。ここでメッセージを更新できます。

会話のきっかけを追加することがわかっているので、ウェルカムメッセージでそれらを参照できます。入力フィールドで、次のテキストに置き換えます。

「Bonjour Meal へようこそ。Bonjour Meal に関するご質問にお答えします。次のいずれかの方法をお試しください。」

最後に、[エージェント情報] ページの右上にある [保存] をクリックします。この変更は、処理を高速化するためのキャッシュメカニズムにより、反映されるまでに時間がかかることがあります。

営業時間に関する情報の提供

この情報をユーザーに提供するため、Business Messages API を使用してユーザーにカスタムメッセージを送信します。

メッセージは views.py の route_message 関数で解析されます。この関数は、まず文字列を正規化し、正規化されたメッセージがハードコードされたパラメータのいずれかと一致するかどうかを確認します。簡略化のため、正規化されたメッセージが新しい定数（CMD_BUSINESS_HOURS_INQUIRY と呼び、「business-hours-inquiry」という値を含む）と等しいかどうかを確認する条件を追加しましょう。条件が true と評価された場合は、send_message_with_business_hours という関数を呼び出します。

route_message 関数は次のようになります。

bm-django-echo-bot/bopis/views.py

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    else:
        echo_message(message, conversation_id)
...

このコードを機能させるには、さらに 2 つの変更を行う必要があります。1 つは、他の定数とともに CMD_BUSINESS_HOURS_INQUIRY を定義することです。もう 1 つは、実際に send_message_with_business_hours 関数を定義し、ビジネスメッセージ API を使用してメッセージを送信することです。

まず、ファイルの先頭で他の定数宣言とともに定数を定義します。

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
...

次に、send_message_with_business_hours を定義します。この関数は、適切な Python 構文に従って、ファイルの任意の場所に定義できます。この関数は echo_message と同様にメッセージを送信するだけなので、この関数を定義するためのテンプレートとして使用できます。

bm-django-echo-bot/bopis/views.py

...
def send_message_with_business_hours(conversation_id):

    message = '''Thanks for contacting us! The hours for the store are:\n
    MON 8am - 8pm\n
    TUE 8am - 8pm\n
    WED 8am - 8pm\n
    THU 8am - 8pm\n
    FRI 8am - 8pm\n
    SAT 8am - 8pm\n
    SUN 8am - 8pm
    '''

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

これで、ユーザーが「business-hours-inquiry」というメッセージを送信すると、ボットが営業時間で応答できるようになります。次のような出力が想定されます。

ソースコードを GCP にデプロイすると、変更がすぐに反映されます。Google Cloud Platform では、エージェント情報がキャッシュに保存されるのと同じ方法でウェブアプリケーションがキャッシュに保存されることはないため、このエクスペリエンスをすぐにテストできます。

ソースの変更に勢いがあるうちに、ユーザーがオンラインショッピングについて問い合わせられるように、もう 1 つ変更を加えましょう。デジタルエージェントから、この機能はまだご利用いただけませんが、後日もう一度ご確認くださいという返信が届きます。

オンラインショッピングがまもなく開始されることをユーザーに知らせる

営業時間をお客様に知らせる場合と同様の変更を行います。今回は、魅力的な画像とともに、リッチカードに情報を配置してみましょう。

正規化されたメッセージを解析し、値が「online-shopping-inquiry」に設定された CMD_ONLINE_SHOPPING_INQUIRY という定数の条件を確認します。条件が true の場合は send_online_shopping_info_message を呼び出します。

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
CMD_ONLINE_SHOPPING_INQUIRY = 'online-shopping-inquiry'
...
...
...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
        send_online_shopping_info_message(conversation_id)
    else:
        echo_message(message, conversation_id)
...

次に、send_online_shopping_info_message を定義します。このメッセージを画像付きのリッチカードで送信したいので、send_rich_card 関数をコピーしてテンプレートとして使用し、send_online_shopping_info_message を定義します。

まず、適切なメッセージが表示されるようにフォールバックテキストを更新する必要があります。なんらかの理由でデバイスがリッチカードを受信できない場合、フォールバックテキストが使用されます。次に、関連するタイトル、説明、提案、メディアフィールドを含めるように BusinessMessagesRichCard を更新する必要があります。関数は次のようになります。

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
    fallback_text = ('Online shopping will be available soon!')

    rich_card = BusinessMessagesRichCard(
        standaloneCard=BusinessMessagesStandaloneCard(
            cardContent=BusinessMessagesCardContent(
                title='Online shopping info!',
                description='Thanks for your business, we are located in SF near the Golden Gate Bridge. Online shopping is not yet available, please check back with us in a few days.',
                suggestions=[],
                media=BusinessMessagesMedia(
                    height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
                    contentInfo=BusinessMessagesContentInfo(
                        fileUrl=SAMPLE_IMAGES[4],
                        forceRefresh=False
                    ))
                )))

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        richCard=rich_card,
        fallback=fallback_text)

    send_message(message_obj, conversation_id)
...

おめでとうございます！デジタルエージェントが、オンラインショッピングに関するお問い合わせに対応できるようになりました。現時点では、デジタルエージェントはオンラインショッピングをサポートしていないため、この機能がまもなく利用可能になることをユーザーに知らせるメッセージが表示されます。ユーザーがオンラインショッピングについて問い合わせた場合のデジタルエージェントの表示は次のようになります。

営業時間に関するユーザーの問い合わせを許可するために以前行った変更と同様に、この変更は ngrok を使用している場合はすぐに確認できます。また、コードを GCP App Engine にデプロイするとすぐに確認できます。

次のパートでは、会話の開始と候補ワードを使用して、会話をハッピーパスに導きます。

チップを使用して会話をガイドする

ソースコードの変更を行い、更新されたデジタルエージェントをデプロイしましたが、ユーザーが「営業時間に関するお問い合わせ」や「オンラインショッピングに関する情報」と入力してビジネスについて問い合わせることは想定していません。会話が開始されたときに、ユーザーにウェルカムメッセージだけでなく、会話のきっかけも表示されるように、会話のきっかけを更新しましょう。

Business Communications Console に移動し、エージェントの [エージェント情報] ページにアクセスします。以前に、「チップ」、「カード」、「カルーセル」の会話の開始フレーズを定義しました。これらの機能はまだ動作しますが、ビジネス機能には関連しなくなりました。これらのリッチ機能を引き続き表示する場合はそのままにしておき、Bonjour Meal のビジネス専用の会話のきっかけをデジタルエージェントに表示する場合は削除します。

2 つの新しい会話のきっかけを作成します。1 つ目の場合は、テキストを「営業時間は何時から何時までですか？」に設定し、ポストバックデータを「business-hours-inquiry」に設定します。2 つ目の会話のきっかけでは、テキストを「ここで購入できますか？」に設定し、ポストバックデータを「online-shopping-info」に設定します。

結果は次のスクリーンショットのような構成になります。

ビジネスコミュニケーションコンソールで行った他の変更と同様に、モバイルデバイスで変更を確認できるようになるまでには、反映に時間がかかります。

会話のきっかけが完了したら、会話が開始された後にユーザーをハッピーパスに誘導する方法も必要になります。メッセージの送信後にチップをコンテキストで使用して、デジタルエージェントが対応できる他の機能にユーザーを誘導できます。そのため、ユーザーが営業時間やオンラインショッピングについて問い合わせた場合は、エージェントで別の操作を行うことを提案するメッセージを送信します。

関数の末尾に、次のコードを追加します。

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Business hours',
                postbackData='business-hours-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

# Let's do the same with the business hours
def send_message_with_business_hours(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Can I purchase online?',
                postbackData='online-shopping-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

ドキュメントに記載されているように、BusinessMessagesSuggestion 内のテキストフィールドは 25 文字に制限されています。

会話の開始文言が更新され、提案チップが戦略的に使用されることで、ユーザーエクスペリエンスは次のように変化します。

6. 完了

これで、ビジネスメッセージの最初のデジタルエージェントを作成できました。

ビジネスメッセージでデジタルエージェントをサポートするウェブアプリケーションをデプロイし、Business Communications Console を使用してエージェントを変更し、ソースコードを変更してデジタルエージェントのユーザーエクスペリエンスを形作りました。

これで、インタラクティブなビジネスメッセージ機能を構築するために必要な主な手順を理解できました。ここからさらに発展させていくのが楽しみです。エージェントを拡張して、在庫検索をサポートしたり、ショッピングカートを導入してユーザーが興味を持ちそうなものを追跡したりできます。カルーセルを使用してメニューのアイテムを表示し、候補を使用してユーザーが関心のあるアイテムを選択できるようにします。

以下に、その可能性を示す例を示します。

優れた会話エクスペリエンスを構築するにはどうすればよいですか？

優れたエージェントは、会話を通じてユーザーにコンテキスト情報を提供し、機能を提供することで、ユーザーが電話や対面で通常行うように、ビジネスに積極的に関与し、やり取りできるようにします。次のトピックが、取引先との会話にどのように適用されるか考えてみましょう。

コンテキストを提供し、期待値を設定する

コンテキストの提供は、ユーザーをどのようにサポートできるかを明示的に伝えることから、ユーザーが共感できるペルソナでデジタルエージェントを紹介することまで、さまざまな方法で行うことができます。ビジネスメッセージで成功しているエージェントは、代表的なアバターを使用して、ユーザーが誰と話しているかを示しています。

期待値を設定するかどうかは、構築するユーザーエクスペリエンスによって異なります。たとえば、エージェントが在庫検索をサポートしている場合は、回答を提供する前に、在庫が少ない可能性があることをユーザーに伝えます。

ユーザーに機能を提供する

消費者は常に企業とつながっています。注文ステータスの確認から商品の在庫確認まで、ビジネスメッセージは複雑なユーザーインタラクションをサポートできます。多くのユーザーは、企業のウェブサイトに回答が掲載されている場合でも、電話で企業に問い合わせて回答を得ています。その結果、企業は特に祝日などに通話量に対応するために、より多くのリソースを投入しなければなりません。

ユーザーのエンゲージメントを維持する

会話のタッチポイントを提供して、ユーザーが会話に集中できるようにします。メッセージの合間に、入力インジケーターを呼び出して、ユーザーの回答を処理していることをユーザーに知らせることができます。

入力インジケーター、候補チップ、リッチカード、カルーセルなどの豊富な機能を使用すると、ユーザーをハッピーパスのユーザーエクスペリエンスに沿って案内し、メニューから注文するなどの特定のタスクを完了させることができます。電話回線への通話トラフィックを減らすことが目標です。

会話でユーザーに機能を提供することが重要です。メッセージでビジネスに問い合わせたユーザーは、質問に迅速に回答してもらえることを期待しています。理想的でない状況では、デジタルエージェントが会話を円滑に進めることができず、ユーザーエクスペリエンスの低下につながる可能性があります。幸いなことに、会話をライブ対応のエージェントに転送するなど、この問題を回避する方法があります。これについては、今後の Codelab で説明します。

次のステップ

準備が整ったら、以下のトピックをご覧になり、ビジネスメッセージで行える複雑な操作についてご確認ください。

オンラインで購入して店舗で受け取れる: Bonjour 食事 - パート 1 - 利用方法 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

1. はじめに

ビジネス メッセージへようこそ

優れたデジタル エージェントとは

作成するアプリの概要

学習内容

必要なもの

2. 設定方法

API を有効にする

サービス アカウントを作成する

Django Python EchoBot スターター コードをデプロイする

Webhook を構成する

3. 最初のエージェントを作成する

Business Communications デベロッパー コンソールを使用する

初めての会話

ウェルカム メッセージの更新と会話チップの使用

4. スターター コードを分析する

ソースコードの概要

bm-django-echo-bot/bmcodelab/urls.py [31 ～ 37 行目]

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [302 ～ 309 行目]

bm-django-echo-bot/bopis/views.py [60 ～ 101 行目]

bm-django-echo-bot/bopis/views.py [105 ～ 122 行目]

bm-django-echo-bot/bopis/views.py [40 ～ 42 行目]

メッセージの送信

bm-django-echo-bot/bopis/views.py [199 ～ 212 行目]

bm-django-echo-bot/bopis/views.py [214 ～ 236 行目]

5. エージェントをカスタマイズする

ロゴを含める

ウェルカム メッセージを更新する

営業時間に関する情報の提供

bm-django-echo-bot/bopis/views.py

bm-django-echo-bot/bopis/views.py

bm-django-echo-bot/bopis/views.py

オンライン ショッピングがまもなく開始されることをユーザーに知らせる

bm-django-echo-bot/bopis/views.py

bm-django-echo-bot/bopis/views.py

チップを使用して会話をガイドする

bm-django-echo-bot/bopis/views.py

6. 完了

優れた会話エクスペリエンスを構築するにはどうすればよいですか？

コンテキストを提供し、期待値を設定する

ユーザーに機能を提供する

ユーザーのエンゲージメントを維持する

次のステップ

リファレンス ドキュメント

オンラインで購入して店舗で受け取れる: Bonjour 食事 - パート 1 - 利用方法

ビジネスメッセージへようこそ

優れたデジタルエージェントとは

サービスアカウントを作成する

Django Python EchoBot スターターコードをデプロイする

Business Communications デベロッパーコンソールを使用する

ウェルカムメッセージの更新と会話チップの使用

4. スターターコードを分析する

ウェルカムメッセージを更新する

オンラインショッピングがまもなく開始されることをユーザーに知らせる

リファレンスドキュメント