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

オンラインで購入して店舗で受け取れる: 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 を使用してカード、カルーセル、会話型の候補などのリッチな機能を送信する方法
ビジネスメッセージでメッセージが送信される仕組み

この Codelab では、最初のデジタルエージェントの作成について説明します。

必要なもの

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

2. 設定方法

API を有効にする

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

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

Google Cloud コンソールで Cloud Build API を開きます。
[有効にする] をクリックします。

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

Business Communications API と Business Messages 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 を持つウェブアプリケーションが含まれています。アプリケーションはメッセージをユーザーにエコーバックし、会話型サーフェスで利用可能な豊富な機能の一部を紹介します。

ウェブブックを構成する

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

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

Business Communications Console の [アカウント設定ページ] に移動します。右上のナビゲーションバーの下に、GCP プロジェクト名が表示されます。プルダウンが表示されたら、GCP プロジェクトを選択してください。

[技術担当者] の詳細情報を入力し、[Webhook] をデプロイしたアプリケーションの Webhook URL に更新します。

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

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

ビジネスコミュニケーションデベロッパーコンソールの使用

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

[ブランド] に、作成するブランドの名前を入力します。ブランドとは、エージェントが対応するビジネスのことです。ユーザーはエージェントと会話形式でやり取りできます。[エージェント名] で、ユーザーにビジネスメッセージの会話で表示する名前を指定します。架空の Bonjour Meal の場合、Bonjour Rail は Bonjour Meal レストランを運営する鉄道会社です。ブランドには Bonjour Rail、エージェントには Bonjour Meal を指定します。

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

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

最初の会話

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

いずれかのチップをクリックすると、テスト URL をコピーできます。テストするデバイスのテスト URL をコピーしておいてください。コピーしたメッセージを任意の方法でデバイスに送信します。

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

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

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

デプロイされたアプリケーションには、ビジネスメッセージで利用可能な豊富な機能を示すロジックも含まれています。

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

これで、エージェントがお客様と初めて会話する機会です。

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

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

デベロッパーコンソールで、エージェントのウェルカムメッセージを編集し、ユーザーとのやり取りをサポートする候補チップを活用する方法を学びましょう。

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

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

Bonjour Meal スターターエージェントへようこそ。お客様のメッセージをエコーし、プラットフォームでサポートされている豊富な機能の一部をご紹介します。これらの候補をお試しください。

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

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

コンソールの右側に、エージェントの外観のプレビューが表示されます。変更した内容がウェルカムメッセージに反映され、その下に候補チップが表示されていることに注目してください。

これは、ユーザーエクスペリエンスがどのようなものになるかを把握するのに役立つツールです。エージェントの作成時や、サポートするユーザージャーニーの計画時に使用できます。

なお、以前のデータはビジネスメッセージのインフラストラクチャ内にキャッシュに保存されるため、これらの変更が会話にすぐに反映されることはありません。キャッシュは約 2 時間ごとに削除されるため、明日お試しいただけます。

では、その仕組みを詳しく見てみましょう。

4. スターターコードの分析

ソースコードの概要

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

スターターコードは Django プロジェクトです。この Codelab シリーズの後半では、Google Datastore を使用して、ショッピングカートや関連する会話などのデータを保持します。Django を初めて使用する場合はご安心ください。Django は非常に簡単で、この Codelab の終わりまでに使い方を学習できます。

大まかに説明すると、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 つのルートが定義されているため、これらの 2 つの URL が認識されると、Django はロジックを実行できます。プロジェクトの 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 を開くことは可能ですが、この 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 などの自動化ツールにメッセージを送信し、ユーザーが何を言っているかを理解して、その推論からレスポンスを生成できます。メッセージを転送して、ユーザーがリアルタイムエージェントに連絡できるようにすることもできます。次の図をご覧ください。

Business Messages は、メッセージの内容を 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 に送信します。API はメッセージをユーザーに配信します。

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

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

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 がまもなくオンラインショッピング機能を提供するという適切なメッセージを送信する必要があります。完了したら、ビジネスコミュニケーションコンソールに移動し、会話の候補チップを作成して、デジタルエージェントがサポートするハッピーパスエクスペリエンスに会話を誘導します。

ロゴを含める

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

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

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

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

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

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

ウェルカムメッセージの更新は、この Codelab の最初の方ですでに行っています。もう一度試してみましょう。今回は、Bonjour Meal のユーザージャーニーに適したウェルカムメッセージを設定します。

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

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

「Bonjour Meal へようこそ。Bonjour Meal に関するご質問にお答えいたします。次のオプションをお試しください。」

最後に、[エージェント情報] ページの右上にある [保存] をクリックします。なお、この変更が反映されるまでには、スムーズな動作を実現するためのキャッシュメカニズムにより、しばらく時間がかかることがあります。

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

この情報をユーザーに提供するため、Google は 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 を定義して、Business Messages 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-hours-inquiry」や「online-shopping-info」と入力してビジネスについて問い合わせることは想定していません。会話が開かれたときに、ユーザーに丁寧なウェルカムメッセージが表示されるだけでなく、会話開始メッセージも表示されるように、会話開始メッセージを更新しましょう。

Business Communications Console に移動し、エージェントの [エージェント情報] ページにアクセスします。以前は、会話開始用メッセージとして「チップ」、「カード」、「カルーセル」を定義していました。これらの機能は引き続き機能しますが、Google のビジネス機能とは関連性がなくなりました。これらのリッチな機能を引き続き表示するには、これらの項目をそのままにします。Bonjour Meal ビジネスに固有の会話開始メッセージをデジタルエージェントに表示するには、これらの項目を削除します。

2 つの新しい会話のきっかけを作成します。最初の質問のテキストを「営業時間は？」に設定し、ポストバックデータを「business-hours-inquiry」に設定します。2 つ目の会話開始メッセージのテキストを「Can I make purchases here?」に設定し、ポストバックデータを「online-shopping-info」に設定します。

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

Business Communications Console で行った他の変更と同様に、モバイルデバイスに変更が反映されるまでには、変更が反映されるまでに時間がかかる場合があります。

会話のきっかけを設定したので、会話が始まったらユーザーをハッピーパスに誘導する方法も用意しましょう。メッセージの送信後にコンテキストに応じてチップを使用して、デジタルエージェントが利用できる他の機能にユーザーを誘導できます。そのため、ユーザーが営業時間やオンラインショッピングについて問い合わせるたびに、エージェントと別の対応を行うよう提案するメッセージを送信します。

関数の末尾に、以下を追加します。

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 スターター コードをデプロイする

ウェブブックを構成する

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

ビジネス コミュニケーション デベロッパー コンソールの使用

最初の会話

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

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. 完了

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

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

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

ユーザーの積極的な協力を促進する

次のステップ

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

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

優れたデジタルエージェントとはどのようなものですか？

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

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

ビジネスコミュニケーションデベロッパーコンソールの使用

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

4. スターターコードの分析

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

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

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