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

1. 簡介

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

歡迎使用 Business Messages！

本程式碼研究室將介紹如何整合商家訊息，讓顧客透過 Google 搜尋和地圖與你管理的商家聯絡。您可能是想直接整合 Business Messages 的商家，也可能是在獨立軟體供應商工作，為合作商家建構即時通訊解決方案，或者您只是偶然發現 Business Messages，想在這個平台上試試。

無論您是基於什麼原因來到這裡，這個程式碼研究室都是絕佳的入門管道。完成後，您就會擁有第一個可供使用者互動的數位服務專員。準備好推出 Business Messages 後，您就能觸及數百萬名顧客。

注意：如要開始使用 Business Messages，請透過 Business Communications 開發人員控制台註冊。

注意：如果您是從 Google I/O 參加本程式碼研究室，歡迎！本程式碼研究室會逐步說明如何使用 Business Messages 平台，並讓您全面瞭解如何透過 Business Messages 對話介面收發訊息。

如何打造優質的數位服務專員？

商家訊息是對話式介面，可在行動裝置上提供類似應用程式的體驗，讓消費者無須安裝其他應用程式，就能與商家聯絡。數位代理程式是顧客互動的邏輯片段。這項邏輯是由部署在雲端或基礎架構中的網頁應用程式管理。如何回應使用者完全由您決定。最佳的代理程式會提供背景資訊來設定預期結果、持續吸引顧客，並提供功能來滿足使用者需求。

建構項目

在本程式碼研究室中，您將為名為 Bonjour Meal 的虛構公司，在 Business Messages 上建構數位服務專員。這項數位服務專員會回答「你們幾點關門？」或「我可以在線上購買嗎？」等簡單問題。

在本程式碼研究室中，使用者將可透過數位代理程式購買商品、將使用者導向付款處理服務來收款，然後安排在店內取貨 (虛構商品)。

在本程式碼研究室中，您的應用程式將

• 透過建議晶片回覆問題
• 引導使用者提出數位服務專員可以回答的問題
• 提供豐富的對話功能，讓使用者持續參與對話

注意：為簡化本程式碼研究室，並說明如何建構優質的 Business Messages 體驗，我們將使用 Google Cloud Platform (GCP) 部署網頁應用程式，支援代理程式基礎架構。GCP 是部署網頁應用程式的絕佳選擇，但您不一定要使用 GCP。

課程內容

• 瞭解如何在 Google Cloud Platform 的 App Engine 上部署網頁應用程式。或者，您也可以使用 ngrok 公開測試本機應用程式。
• 如何透過 Webhook 設定 Business Messages 帳戶，接收使用者訊息
• 如何使用 Business Messages API 傳送資訊卡、輪播和對話建議等豐富功能
• 商家訊息如何傳送訊息

本程式碼研究室的重點是建構第一個數位代理程式。

軟硬體需求

• 註冊免費的 Business Communications 開發人員帳戶
• 如需瞭解如何
• 搭載 Android 5 以上版本的 Android 裝置，或安裝 Google 地圖應用程式的 iOS 裝置
• 網頁應用程式程式設計經驗
• 網際網路連線！

2. 開始設定

注意：您可以使用 Business Communications API 完成本程式碼研究室的所有工作，但我們會利用 Business Communications 開發人員控制台，簡化目前的工作。如果可以使用 API，我們會通知您，並在文件中提供參考資料。

啟用 API

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

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

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

建立服務帳戶

如要存取 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]

您剛才部署的入門程式碼包含一個網路應用程式，其中含有用來接收 Business Messages 訊息的 Webhook。應用程式會將訊息回傳給使用者，並展示對話介面提供的部分豐富功能。

設定 Webhook

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

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

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

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

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

3. 建立第一個 Agent

使用 Business Communications 開發人員控制台

在 Business Communications 控制台中，按一下左上方的標誌，返回控制台資訊主頁，然後點選「建立代理程式」。建立代理程式時，系統會同時建立品牌。選取「商家訊息」做為「代理程式類型」，並確認「合作夥伴資訊」正確無誤。

在「品牌」中，輸入要建立的品牌名稱。品牌是您合作的商家，消費者可以透過對話式代理與品牌互動。在「代理程式名稱」中，指定您想在 Business Messages 對話中向使用者顯示的名稱。以虛構的 Bonjour Meal 為例，Bonjour Rail 是管理 Bonjour Meal 餐廳的鐵路公司。因此我會將「Bonjour Rail」指定為品牌，「Bonjour Meal」指定為代理。

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

點選「建立代理程式」，讓主控台發揮魔法。這項要求會向 Business Communications API 提出多項要求，建立品牌和代理程式，因此需要幾秒鐘的時間。您可以直接使用 Business Communications API 建立代理和品牌。請參閱說明文件，瞭解如何使用 curl 要求執行與控制台相同的操作。

進行第一次對話

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

點選任一晶片即可複製測試網址。當然，請複製您手邊裝置的測試網址，以便進行測試。以任何方式將複製的訊息傳送到裝置。

在行動裝置上輕觸連結後，系統會啟動 Business Messages 服務專員啟動器，並預先填入服務專員測試網址。

輕觸「啟動」，即可叫用代理程式的對話介面。

與代理程式互動，瞭解其功能。在大多數情況下，對話介面只會回應你的訊息。傳送「Hello, World!」等訊息，你會發現代理程式會將相同訊息傳送回給你。

部署的應用程式也包含一些邏輯，可展示 Google 商家訊息提供的豐富功能。

• 如果傳送「card」，系統會叫用複合式資訊卡
• 如果傳送「方塊」，系統會顯示建議方塊
• 如果傳送「輪轉介面」，系統會顯示輪轉介面，內含複合式資訊卡

恭喜！這是代理程式與您的首次對話！

您可以使用這些豐富的功能，為與代理人通訊的人員提供更完善的背景資訊。在豐富資訊卡中傳送圖像素材資源，更清楚地傳達想法，或使用建議方塊引導對話。

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

我們來練習使用管理中心，看看如何編輯代理程式的歡迎訊息，以及如何運用建議晶片協助使用者溝通。

前往代理程式的「總覽」頁面，然後選取「代理程式資訊」。向下捲動至歡迎訊息和對話開頭部分。

將歡迎訊息 (黃色輸入欄位) 更新為：

歡迎使用 Bonjour Meal 啟動代理程式。我可以回應你的訊息，並展示平台支援的部分豐富功能，不妨試試這些建議！

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

修改後，控制台中的「代理人資訊」會如下所示：

控制台右側會顯示代理程式的預覽畫面。請注意，歡迎訊息會反映您剛才變更的內容，且下方會顯示建議晶片。

這項工具可協助您瞭解使用者體驗。您可以在建構代理程式時使用，並規劃要支援的使用者歷程。

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

在此期間，讓我們來看看背後的運作方式。

4. 分析範例程式碼

選用：這個部分僅供參考。我們會一起檢查原始碼，您可望對 Django 有初步認識，並瞭解如何透過 Python API 接收 Webhook 訊息，以及傳送回覆。

從高處俯瞰原始碼

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

範例程式碼是 Django 專案。在本程式碼研究室系列的後續部分，我們將使用 Google Datastore 持久儲存購物車和相關對話等資料。如果您之前沒用過 Django，也不必擔心，因為 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，也就是 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 傳回給提出要求的瀏覽器。因此，您確實可以開啟專案的根網址，但由於該網址會將您帶回本程式碼研究室，因此實際上沒有太多用途。

另一個網址會將路徑導向 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，並將訊息轉送給真人服務專員，或透過某些邏輯以機器人身分回覆。在本範例中，路由機制為 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，API 會將訊息傳送給使用者。

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

在本程式碼研究室中，我們將著重於使用 Python 用戶端程式庫，該程式庫已整合至 Bonjour Meal 啟動程式碼，並部署至 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)
...

在這個函式中，系統會使用傳入 echo_message 函式的訊息變數，例項化 BusinessMessagesMessage。例項化後，物件會連同對話 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. 自訂代理程式

如果您已完成本程式碼研究室的練習，應該會看到我們美麗的代理程式。

嗯，其實不太美觀，看起來有點空蕩，無法充分代表我們的業務。幸好我們具備支援代理程式的程式碼基礎知識，而且有工具可隨意自訂代理程式。

在本程式碼研究室的其餘部分，我們將擴充代理程式，加入下列功能：

• 加入實際標誌
• 改善歡迎訊息
• 提供營業時間資訊
• 讓使用者知道線上購物功能即將推出
• 使用對話建議晶片，讓對話更順暢

我們會利用商家通訊控制台更新標誌和歡迎訊息，但您隨時可以選擇直接使用商家通訊 API 執行相同操作。接著，我們必須更新原始碼，傳送適當的訊息，提供營業時間資訊，並說明 Bonjour Meal 即將推出線上購物功能。完成後，我們會返回 Business Communications 控制台，建立對話建議晶片，引導對話走向數位代理支援的順利路徑。

加入標誌

在 Business Communications 控制台中選取代理程式，然後前往「代理程式資訊」。我們需要更新商家標誌，如下方以黃色標示的部分。

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

請參閱說明文件中的標誌設計指南，瞭解使用自有標誌的最佳做法。

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

最後，點按「代理人資訊」頁面右上方的「儲存」。這項變更需要一段時間才會反映在裝置上，因為代理商資訊會快取在我們的伺服器中，變更後兩小時內應該就會顯示。

更新歡迎訊息

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

在 Business Communications 控制台中選取代理程式，然後前往「Agent information」。向下捲動至「歡迎訊息」輸入欄位，即可更新訊息。

我們知道會新增對話啟動器，因此可以在歡迎訊息中參照這些啟動器。在輸入欄位中，將其替換為下列文字：

「歡迎來到 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 的條件，如果條件為 true，則會叫用 send_online_shopping_info_message，且值設為「online-shopping-inquiry」。

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 控制台，存取服務專員的「服務專員資訊」頁面。我們先前已為「晶片」、「資訊卡」和「輪轉介面」定義對話啟動器。雖然這些功能仍可運作，但已不適用於我們的業務功能。您可以保留這些功能，繼續展示豐富的內容，也可以移除這些功能，讓數位代理只顯示 Bonjour Meal 商家專用的對話啟動訊息。

我們將建立兩個新的對話發起者。第一個問題的文字請設為「營業時間是幾點？」，回傳資料則設為「business-hours-inquiry」。針對第二個對話啟動器，將文字設為「Can I make purchases here?」(我可以在這裡購物嗎？)，並將回傳資料設為「online-shopping-info」。

結果應為下列螢幕截圖所示的設定：

與在 Business Communications 管理中心進行的其他變更一樣，這項變更需要一段時間才會傳播，因此您可能要過一段時間，才能在行動裝置上看到變更。

對話開始後，我們也希望引導使用者進入順利的路徑。訊息傳送後，您可以視情況使用晶片，引導使用者瞭解數位服務專員的其他功能。因此，每當使用者詢問營業時間或線上購物時，我們會傳送訊息，建議他們與服務專員進行其他互動。

在函式的結尾，加入下列內容：

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 Messages 上支援數位代理程式，並使用 Business Communications 控制台修改代理程式，以及透過變更原始碼，打造數位代理程式的使用者體驗。

您現在已瞭解建構互動式 Business Messages 體驗的必要步驟，接下來的發展令人期待。您可以擴充代理程式，支援清查查詢或導入購物車，追蹤使用者可能感興趣的項目。你可以使用輪轉介面展示菜單上的項目，並透過建議功能讓使用者選取感興趣的項目。

以下是可能的外觀搶先看。

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

最佳的代理程式會在對話中提供實用功能，並向使用者提供相關資訊，讓使用者能像平常透過電話或親自與商家互動一樣，與商家互動。請思考下列主題如何適用於您想與合作商家進行的對話。

提供背景資訊並設定期望

提供背景資訊的方式有很多種，例如明確說明如何協助使用者，或是以使用者能產生共鳴的虛擬角色介紹數位代理程式。在 Business Messages 中，成功的服務專員會使用代表性的大頭貼，向使用者表明自己是誰。

設定期望取決於您建構的使用者體驗。舉例來說，如果代理程式支援庫存查詢，請先告知使用者供應量可能不足，再提供答案。

為使用者提供功能

消費者隨時隨地都會與商家互動。從查詢訂單狀態到確認商品是否有現貨，Business Messages 都能支援複雜的使用者互動。即使商家網站上提供解答，許多使用者仍會透過電話詢問商家。因此，商家必須投入更多資源來處理通話量，尤其是在節慶期間。

讓使用者保持參與度

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

透過輸入指標、建議方塊、豐富資訊卡和輪轉介面等豐富功能，引導使用者完成特定工作，例如從菜單訂購餐點，享受愉快的體驗。目標是減少商家電話線路的來電量。

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

後續步驟

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

• 代理程式的生命週期：從建立到發布
• 規定和準則
• 標誌規範
• 所有指南

參考文件

• SuggestedReply
• Business Messages 訊息參考文件
• RichCard 的 JSON 定義