本頁面由 Cloud Translation API 翻譯而成。

線上購買店內取貨：Bonjour Meal - 第 1 部分 - 開始使用

1. 簡介

上次更新時間：2022 年 5 月 11 日

歡迎使用商家訊息功能！

本程式碼研究室將介紹如何整合商家訊息，讓客戶可透過 Google 搜尋和 Google 地圖與您管理的商家聯絡。您可能是希望直接整合 Business Messages 的商家，也可能是為合作商家建構訊息解決方案的獨立軟體供應商，或是剛好發現 Business Messages，想試著調整這個平台。

無論您是為了什麼來到這裡，這個程式碼研究室都是絕佳的入門方式。完成後，您就會擁有第一個可供使用者互動的數位服務專員。當您準備好在 Business Messages 上推出產品後，就能觸及數百萬名客戶。

優質數位服務代理商具備哪些條件？

商家訊息是一種對話介面，可在行動裝置上提供類似應用程式的體驗，讓消費者不必安裝其他應用程式，就能與商家聯絡。數位服務機器人是客戶互動邏輯的一部分。邏輯由在雲端或基礎架構中部署的網路應用程式管理。您可以自行決定如何回應使用者。最優秀的服務專員會提供相關背景資訊，讓使用者瞭解預期結果，並持續與客戶互動，提供符合使用者需求的功能。

建構項目

在本程式碼研究室中，您將為虛構公司 Bonjour Meal 在 Business Messages 上建構數位服務機器人。這個數位服務專員會回答一些簡單的問題，例如「你們何時打烊？」或「我可以上網購買嗎？」

在這個程式碼研究室中，使用者可以透過數位服務代理購買商品，並將使用者導向付款處理服務收取款項，然後安排在商店取貨。

在本程式碼研究室中，您的應用程式將執行以下操作：

透過建議方塊回覆問題
引導使用者提出數位服務機器人可回答的問題
提供豐富的對話功能，讓使用者持續參與對話

課程內容

如何在 Google Cloud Platform 的 App Engine 上部署網頁應用程式。或者，您也可以使用 ngrok 公開測試本機應用程式。
如何使用網頁應用程式 Webhook 設定 Business Messages 帳戶，以便接收使用者傳送的訊息
如何使用 Business Messages API 傳送資訊卡、輪轉介面和對話建議等多媒體功能
商家訊息傳送訊息的方式

本程式碼研究室將著重於建構第一個數位代理程式。

軟硬體需求

註冊免費的 Business Communications 開發人員帳戶
如需操作說明，請參閱我們的開發人員網站。
搭載 Android 5 以上版本的裝置，或搭載 Google 地圖應用程式的 iOS 裝置
具備網頁應用程式程式設計經驗
網際網路連線！

2. 開始設定

啟用 API

在本程式碼研究室中，我們會使用 Django 應用程式，因此會依賴 Cloud Build API 將應用程式部署至 App Engine。或者，如果您使用 ngrok，則無需啟用 Cloud Build API。

如要啟用 Cloud Build API，請按照下列步驟操作：

在 Google Cloud 控制台中開啟 Cloud Build API。
按一下「啟用」。

建立服務帳戶

您必須建立服務帳戶，才能存取 Business Communications 和 Business Messages API。請按照說明文件中的步驟，在 Business Communications 開發人員控制台中建立服務帳戶。

部署 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。

請留意最後一行指令輸出內容中部署應用程式的網址：

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

您剛部署的 Starter Code 包含一個網頁應用程式，其中的 webhook 可用來接收 Business Messages 傳送的訊息。應用程式會將訊息回應給使用者，並可展示對話介面提供的部分豐富功能。

設定 webook

服務部署完成後，您將使用應用程式的網址，在 Business Communications 開發人員控制台的「帳戶設定」頁面中設定 webhook 網址。

Webhook 網址會是應用程式的網址 +「/callback/」。例如：https://PROJECT_ID.appspot.com/callback/

前往 Business Communications Console 的「帳戶設定」頁面。您應該會在導覽列下方的右上角看到 GCP 專案名稱。如果看到下拉式選單，請務必選取 GCP 專案。

填寫「技術聯絡窗口」詳細資料，然後更新「Webhook」，加入已部署應用程式的 webhook 網址。

按一下 GCP 專案參照項目旁的「儲存」。

3. 建立第一個代理程式

使用 Business Communications 開發人員控制台

在 Business Communications 控制台中，按一下左上方的標誌即可返回控制台資訊主頁，然後點選「建立服務專員」。您可以在建立代理程式時一併建立品牌。在「服務專員類型」中選取「Business Messages」，並確認「合作夥伴資訊」正確無誤。

在「品牌」中，輸入要建立的品牌名稱。品牌是指你合作的商家，消費者可以透過對話與服務專員互動。在「服務專員名稱」中，指定您希望使用者在 Business Messages 對話中看到的名稱。以虛構的 Bonjour 餐點為例，Bonjour Rail 是管理 Bonjour 餐點餐廳的鐵路公司。因此，我會將 Bonjour Rail 指定為品牌，Bonjour Meal 指定為代理商。

服務專員是代表品牌的對話實體。

按一下「Create agent」，讓主控台發揮神奇力量。這項要求會向 Business Communications API 提出多個要求，以便建立品牌和服務專員，這項作業需要幾秒鐘的時間。您可以直接使用 Business Communications API 建立服務專員和品牌。請參閱說明文件，瞭解 curl 要求如何執行與控制台相同的操作。

進行第一次對話

開啟剛建立的代理程式，您會看到「總覽」頁面，方便您開始查看代理程式的詳細資料。請查看代理程式測試網址。這些網址可用於在裝置上叫用對話介面。

您可以點選任一方塊複製測試網址。當然，請複製測試網址，並在手邊的裝置上進行測試。你可以透過任何方式，將複製的訊息傳送到裝置。

在行動裝置上點選連結後，Business Messages 服務專員啟動工具就會啟動，並預先填入服務專員測試網址。

輕觸「Launch」，即可叫用服務專員的對話介面。

與這個代理程式互動，瞭解其功能。在大多數情況下，對話介面只會回應您的訊息。傳送類似「Hello, World!」的訊息，你就會看到服務專員回傳相同的訊息。

部署的應用程式也包含一些邏輯，可展示 Business Messages 提供的豐富功能。

如果傳送「card」，就會叫用複合式資訊卡
如果傳送「方塊」，系統會叫用建議方塊
如果傳送「carousel」，系統會叫用複合式資訊卡的輪轉介面

恭喜！這是你的服務專員與你進行的首次對話！

每項豐富功能都能為與服務專員進行對話的使用者提供更完整的背景資訊。您可以透過資訊卡傳送圖像素材資源，以便更清楚地表達想法，也可以使用建議方塊引導對話。

更新歡迎訊息並使用對話方塊

讓我們透過開發人員控制台練習一下，瞭解如何編輯服務專員的歡迎訊息，並利用建議方塊協助使用者進行通訊。

前往「代理人」總覽頁面，然後選取「代理人資訊」。向下捲動至「歡迎訊息」和「開場白」部分。

更新歡迎訊息 (黃色輸入欄位)，讓其顯示以下內容：

歡迎使用 Bonjour Meal 啟動服務機器人。我可以回覆你的訊息，並向你展示平台支援的部分豐富功能，請試試這些建議！

如上圖紫色方塊所示，按一下「+ 新增對話開頭句」，即可新增對話開頭句，以喚出建議方塊、輪轉介面和資訊卡。您新增的對話起頭需要文字元件和 postbackData 元件。文字會顯示給使用者，而 postBack 資料會傳送至您的代理程式 webhook。Webhook 會剖析回傳資料，並傳送適當的回應給使用者。

修改後，控制台中的代理程式資訊會如下所示：

控制台右側會顯示代理程式預覽畫面。請注意，歡迎訊息會顯示您剛剛所做的變更，而下方的建議方塊也會隨之變更。

這項工具非常實用，可以讓您瞭解使用者體驗。您可以在建構代理程式及規劃要支援的使用者歷程時使用這項功能。

很抱歉，由於先前的資料會在 Business Messages 基礎架構中快取，因此我們無法立即在對話中看到這些變更。快取資料大約每 2 小時就會清除一次，因此你明天應該就能試試這個方法。

在此同時，讓我們來看看一切的運作方式。

4. 分析範例程式碼

原始碼的 10,000 英尺視圖

您部署的入門程式碼會將訊息回傳給使用者，並可顯示互動式資訊卡、輪轉介面或建議方塊。讓我們深入探討原始碼，瞭解這項功能的運作方式。然後我們會找出需要變更的項目。

範例程式碼是 Django 專案。在本程式碼研究室系列的後續部分，我們將使用 Google Datastore 來儲存購物車和相關對話等資料。別擔心，即使您之前未曾使用 Django，也無妨，因為這項工具相當簡單，而且在本程式碼研究室結束後，您就會瞭解其運作方式。

大致來說，Django 會將網址導向至檢視畫面，而檢視畫面邏輯會產生在瀏覽器中顯示的範本。讓我們來看看專案的 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),
]

這裡定義了兩個路徑，因此如果 Django 辨識出這兩個網址，就能執行邏輯。如果專案網址為 https://PROJECT_ID.appspot.com/，則專案可辨識的路徑如下：

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

這兩個網址路徑都會參照來自 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 傳回給提出要求的瀏覽器。因此，您確實可以開啟專案的根網址，但實際上沒有太多操作，因為系統會將您帶回本程式碼研究室。

另一個網址會導向名為 callback 的函式，同樣位於 bopis/views.py 中。我們來看看這個函式。

bm-django-echo-bot/bopis/views.py [Lines 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，然後將其轉送至即時服務專員或某些邏輯，以便以機器人回覆。在本例中，該路由機制為 route_message。瞧瞧這個

bm-django-echo-bot/bopis/views.py [Lines 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'
...

也就是說，機器人會剖析訊息，並找出其中包含我們在本程式碼研究室先前步驟中，放入對話方塊 postback_data 的任何字串。如果沒有任何字串顯示，則系統會將訊息傳遞至名為 echo_message 的函式，您可以想像這會回應訊息。

傳送訊息

到目前為止，您應該已瞭解網頁應用程式如何接收訊息。這一切都是由 webhook 完成。

不過，應用程式如何透過 Business Messages 向使用者傳送外寄訊息？

當基礎架構回覆使用者時，您會將回應傳送至 Business Messages API，以便將訊息傳送給使用者。

Business Messages API 提供 Python、Node.js 和 Java 程式庫。如果您的基礎架構並非使用我們提供程式庫的語言，您也可以使用 REST API 直接提出要求。請參閱「傳送訊息」一文，瞭解如何使用 cURL 將訊息傳送至特定對話串 ID。

為了配合本程式碼研究室的目的，我們將著重於使用已整合至 Bonjour Meal 啟動程式碼的 Python 用戶端程式庫，該程式碼已部署至 GCP 專案的 App Engine，或透過 ngrok 在本機執行。

讓我們來看看 echo_message 函式，瞭解如何與 API 互動，將訊息傳送至 Business Messages。

bm-django-echo-bot/bopis/views.py [Lines 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)
...

在這個函式中，BusinessMessagesMessage 會使用傳入 echo_message 函式的訊息變數進行例項化。建構之後，物件會連同對話 ID 傳遞至 send_message。

bm-django-echo-bot/bopis/views.py [Lines 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 函式只會使用您的服務帳戶憑證，驗證您是否可以傳送訊息至此對話串、例項化「Business Messages」用戶端，以及建立要求，將訊息傳送至指定的 conversation ID。

豐富功能也會使用這個 send_message 函式，但所建立的訊息僅適用於豐富資訊卡、輪轉介面和建議方塊。資訊卡和輪轉介面可能包含圖形素材資源，而建議方塊則包含 postback_data，以便回呼邏輯能夠適當地剖析。

我們已經瞭解如何傳送訊息，接下來就來探討範例如何傳送複合式資訊卡、輪轉介面和建議方塊。在下一節中，我們將修改原始碼，以便傳送含有部分豐富功能的訊息。

準備就緒後，我們就來自訂 Bonjour Meal 服務代理程式。

5. 自訂代理程式

如果您已按照本程式碼研究室的說明操作，應該會看到我們的可愛服務機器人。

雖然不是很漂亮，但實際上看起來有點空洞，也無法充分代表我們的業務。幸運的是，我們對支援服務機器人的程式碼具備基礎知識，而且擁有所需工具，可隨心所欲自訂服務機器人。

在本程式碼研究室的其餘部分，我們將使用以下方式擴充代理程式：

加入實際標誌
改善歡迎訊息
提供營業時間資訊
讓使用者知道線上購物功能即將推出
使用對話建議方塊協助進行對話

我們會利用 Business Communications 控制台更新標誌和歡迎訊息，但您也可以直接使用 Business Communications API 進行更新。接著，我們必須更新原始碼，傳送適當的訊息，提供營業時間資訊，以及 Bonjour Meal 即將推出的線上購物功能。完成後，我們會返回 Business Communications Console，建立對話建議方塊，引導對話朝數位服務專員支援的理想路徑發展。

加入標誌

在 Business Communications Console 中選取代理人，然後前往「代理人資訊」。我們要更新商家標誌，如下方黃色標示處所示。

按一下「上傳」，即可選取要上傳的圖片，或從網址匯入圖片。

請參閱說明文件中的標誌設計規範，瞭解我們建議的使用自有標誌的最佳做法。

讓我們上傳您在本程式碼研究室一開始複製的來源程式碼中的標誌。您可以在存放區的 ./assets/ 目錄中找到該檔案，檔案名稱為「bonjour_meal-logo.png」。您可以將檔案拖曳至網路瀏覽器的模式視窗，系統會顯示簡易的編輯工具，讓您調整圖片品質和裁剪方式。調整圖片解析度和裁剪方式，讓圖片大小小於或等於 50 KB 限制。確認圖片符合要求後，請按一下藍色圓圈中的勾號確認，然後點選模式底部的「選取」。

最後，請點選「服務專員資訊」頁面右上方的「儲存」。這項變更需要一段時間才會反映在裝置上，因為代理程式資訊會在我們的伺服器中快取，並且應在變更後兩小時內顯示。

更新歡迎訊息

我們在本程式碼研究室中稍早已更新歡迎訊息。我們再來做一次，但這次要設定更適合 Bonjour Meal 使用者歷程的歡迎訊息。

在 Business Communications Console 中選取代理人，然後前往「代理人資訊」。向下捲動至「歡迎訊息」輸入欄位，即可更新訊息。

我們知道自己會新增開場白，因此可以在歡迎訊息中提及這些內容。在輸入欄位中，將其替換為以下文字：

「歡迎使用 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)
...

為了讓程式碼運作，我們必須再進行兩項變更：第一項是定義 CMD_BUSINESS_HOURS_INQUIRY 和其他常數，第二項是實際定義函式 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 中快取網頁應用程式，因此您可以立即測試這項功能。

既然我們已開始進行來源變更，就讓我們再進行另一項修改，讓使用者能夠詢問線上購物相關問題。數位服務專員會回覆，告訴你這項功能尚未推出，但請稍後再回來查看。

讓使用者知道線上購物功能即將推出

我們會進行類似的修改，以便告知使用者營業時間。這次我們將在互動式資訊卡中加入引人入勝的圖片，並放入相關資訊。

剖析已規格化的訊息，並檢查名為 CMD_ONLINE_SHOPPING_INQUIRY 的常數是否符合條件，該常數的值設為「online-shopping-inquiry」，如果符合條件，就會叫用 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 控制台，然後前往服務專員的「服務專員資訊」頁面。我們先前已定義「方塊」、「資訊卡」和「輪轉介面」的對話起頭。雖然這些功能仍可正常運作，但已不再與我們的業務功能相關。你可以保留這些內容，繼續展示這些豐富的功能，也可以移除這些內容，讓數位服務專員針對 Bonjour Meal 商家顯示對話起頭。

我們將建立兩個新的對話開場白。針對第一個問題，請將文字設為「What are your business hours?」，並將回傳資料設為「business-hours-inquiry」。針對第二個開場白，請將文字設為「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 Messages 上支援數位服務機器人，並使用 Business Communications 控制台修改服務機器人，藉由變更原始碼來塑造數位服務機器人的使用者體驗。

你現在已瞭解建構互動式 Business Messages 體驗的必要步驟，接下來將介紹更多精彩內容。您可以擴充服務代理，支援商品目錄查詢，或引入購物車，以便追蹤使用者可能感興趣的商品。您可以使用輪轉介面展示選單中的項目，並使用建議功能，讓使用者選取感興趣的項目。

以下是預告片，讓你一窺這項功能的樣貌。

如何打造優質的對話式體驗？

最優秀的服務專員會向使用者提供相關資訊，並透過對話提供功能，讓使用者能與商家互動，就像平常透過電話或面對面互動一樣。請思考以下主題如何應用於與合作對象的對話。

提供背景資訊並設定期望

提供背景資訊的方式有很多種，例如明確說明如何協助使用者，或是透過使用者能產生共鳴的角色介紹數位助理。在商務訊息中，成功的服務專員會使用代表性顯示圖片，向使用者顯示他們正在與誰對話。

設定期望值取決於您要打造的使用者體驗。舉例來說，如果您的服務機器人支援商品目錄查詢功能，請先讓使用者知道供應量可能偏低，再提供答案。

為使用者提供功能

消費者隨時都會與商家互動。從查詢訂單狀態到確認商品是否有現貨，Business Messages 都能支援複雜的使用者互動。許多使用者即使可以在商家網站上找到答案，仍會持續打電話給商家，希望能獲得解答。因此，商家必須投入更多資源來處理大量的來電，尤其是在節慶期間。

讓使用者保持互動

提供對話接觸點，讓使用者持續參與對話。在訊息之間，您可以叫用輸入指標，讓使用者知道您正在處理答案。

您可以透過輸入指標、建議方塊、互動式資訊卡和輪轉介面等豐富功能，引導使用者體驗順暢的使用者體驗，協助他們完成特定工作，例如從選單中訂購商品。目標是減少商家電話線路的來電量。

對話必須為使用者提供功能，使用者透過訊息與商家聯絡時，希望能迅速獲得問題的答案。在非理想情況下，數位服務機器人無法促進對話，可能會導致使用者體驗不佳。幸好，我們有其他方法解決這個問題，例如將對話轉交給真人服務專員。我們會在日後的程式碼研究室中介紹這項功能。

後續步驟

準備就緒後，請參閱下列部分主題，瞭解如何在 Business Messages 中進行更複雜的互動

線上購買店內取貨：Bonjour Meal - 第 1 部分 - 開始使用

1. 簡介

歡迎使用商家訊息功能！

優質數位服務代理商具備哪些條件？

建構項目

課程內容

軟硬體需求

2. 開始設定

啟用 API

建立服務帳戶

部署 Django Python EchoBot 範例程式碼

設定 webook

3. 建立第一個代理程式

使用 Business Communications 開發人員控制台

進行第一次對話

更新歡迎訊息並使用對話方塊

4. 分析範例程式碼

原始碼的 10,000 英尺視圖

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 [Lines 60-101]

bm-django-echo-bot/bopis/views.py [Lines 105-122]

bm-django-echo-bot/bopis/views.py [第 40 至 42 行]

傳送訊息

bm-django-echo-bot/bopis/views.py [Lines 199-212]

bm-django-echo-bot/bopis/views.py [Lines 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. 恭喜

如何打造優質的對話式體驗？

提供背景資訊並設定期望

為使用者提供功能

讓使用者保持互動

後續步驟

參考文件