1. 簡介
上次更新時間：2022 年 5 月 11 日
歡迎使用 Business Messages！
本程式碼研究室旨在整合 Business Messages，協助消費者聯絡透過 Google 搜尋和 Google 地圖管理的商家。假設您是想直接與 Business Messages 整合的商家，或者您正在合作的獨立軟體供應商打造訊息解決方案，或單純想使用 Business Messages 功能，
無論您在本程式碼研究室為何，本程式碼研究室都是絕佳的入門方式。課程結束後，你將會看到第一個可供使用者互動的數位服務專員。完成進一步的改善後，當您準備好推出 Business Messages 服務時，就有機會觸及數百萬客戶。
優秀的數位服務專員具備哪些特質？
Business Messages 是一種對話式介面，在行動裝置上提供類似應用程式的體驗，讓消費者不必另外安裝其他應用程式，就能與商家聯絡。數位服務專員是客戶與其互動的一種邏輯。邏輯由部署於雲端或基礎架構中的網頁應用程式管理。回應使用者的方式完全由您決定。最優秀的服務專員會提供背景資訊，幫助他們設定期望、與顧客保持互動，以及提供滿足使用者需求的功能。
建構項目
在本程式碼研究室中，您將為一家名為「Bonjour Meal」的虛構公司，使用 Business Messages 建構數位服務專員。這個數位服務專員會回答幾個簡單問題，例如「你幾點打烊？」或「我可以線上購物嗎？」。
在本程式碼研究室中，使用者將可透過數位服務專員購買商品、將使用者導向付款處理方以收取款項，然後安排在店內領取虛構商品。
在這個程式碼研究室中，您的應用程式
- 透過建議方塊回覆問題
- 引導使用者提問，數位服務專員可回答的問題
- 提供豐富的對話功能，讓使用者持續參與對話
課程內容
- 如何在 Google Cloud Platform 上的 App Engine 部署網頁應用程式。此外，您也可以使用 ngrok 公開測試本機應用程式。
- 如何使用網頁應用程式 Webhook 設定 Business Messages 帳戶，以便接收使用者的訊息
- 如何透過 Business Messages API 傳送資訊卡、輪轉介面和對話建議等豐富功能
- Business Messages 傳送訊息的方式
本程式碼研究室的重點在於建構第一個數位服務專員。
軟硬體需求
- 註冊免費的 Business Communications 開發人員帳戶
- 前往開發人員網站查看操作說明
- 搭載 Android 5 以上版本的 Android 裝置，或是已安裝 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 Sample 複製到專案的工作目錄：
$ 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 訊息的網頁應用程式。應用程式會將訊息傳回給使用者，並展示對話介面所提供的一些豐富功能。
設定 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 Console 中，按一下左上方的標誌來返回控制台資訊主頁，然後點選「建立代理程式」。您在建立虛擬服務專員時就建立品牌。在「服務專員類型」部分選取「Business Messages」，並確認「合作夥伴資訊」正確無誤。
在「品牌」中，輸入你要建立的品牌名稱。品牌是你合作的商家，消費者可以和服務專員進行對話。在「服務專員名稱」中，指定您希望使用者在 Business Messages 對話中看到的內容。以虛構的邦周美食大廈為例，Bonjour Rail 是一家管理本城美食餐廳的鐵路公司。我將 Bonjour Rail 指定為品牌，並將 Bonjour Meal 指定為代理商。
服務專員是代表品牌的對話實體。
按一下「建立代理程式」，讓主控台發揮神奇效果。這項要求需要幾秒鐘的時間才能向 Business Communications API 發出數項要求，藉此建立品牌和服務專員。您可以直接使用 Business Communications API 建立服務專員及建立品牌。請參閱說明文件，瞭解 curl 要求與控制台執行的動作相同。
開始首次對話
系統會隨即顯示剛剛建立的代理程式，並顯示「Overview」(總覽) 頁面，開始查看代理程式的詳細資料。查看「代理程式測試網址」，這些網址可用於叫用您裝置上的對話介面。
只要點選任一方塊，即可複製測試網址。當然，請複製要測試的裝置測試網址。將這封複製的訊息傳送到您的裝置。
在行動裝置上，輕觸連結後，系統會預先填入 Business Messages 代理程式啟動器，並預先填入代理程式測試網址。
輕觸「啟動」可叫用代理程式的對話介面。
與服務專員互動，瞭解虛擬服務專員的功能。對話介面通常只會回應訊息，傳送「Hello, World!」這類文字，就會看到服務專員會將同樣的訊息傳回給你。
部署的應用程式也包含一些邏輯，以展示 Business Messages 提供的豐富功能。
- 如果傳送「卡片」，就會叫用複合式資訊卡
- 傳送「方塊」後，建議方塊就會叫用
- 傳送「輪轉介面」後，系統就會叫用複合式資訊卡的輪轉介面
恭喜！這是服務專員和你進行的第一次對話！
每項豐富的功能都能用來為與代理程式溝通的人提供更豐富的背景資訊。透過複合式資訊卡傳送圖形資源，讓他人瞭解你的想法，或使用建議方塊引導對話內容。
更新歡迎訊息並使用對話方塊
我們會一起練習在 Play 管理中心進行一些練習，瞭解如何編輯代理程式的歡迎訊息，以及如何利用建議方塊協助使用者溝通。
前往代理程式的「Overview」(總覽) 頁面，然後選取「Agent information」(代理程式資訊)。向下捲動至歡迎訊息和對話開場白部分。
更新歡迎訊息 (黃色輸入欄位) 以讀取：
歡迎來到 Bonjour Meal 新手服務專員。我可以傳送語音訊息給你，並為你介紹 YouTube 平台支援的一些豐富功能。試試看這些建議吧！
如上圖中紫色方塊所參照的「+ 新增對話開場白」，請按一下「+ 新增對話開場白」，即可新增對話開場白，以叫用建議方塊、輪轉介面和資訊卡。新增的對話開場白需要文字元件和 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 [第 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，藉此將訊息傳送給使用者。
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 Console 幫助我們更新標誌和歡迎訊息，但你隨時都可以選擇直接使用 Business Communications API。接著，我們將更新原始碼，傳送適當的訊息，提供營業時間資訊；此外，Bonjour Meal 在不久後也會提供線上購物功能。遷移完畢後，我們會返回 Business Communications Console，並建立對話建議方塊，引導對話內容，幫助數位服務專員提供支援。
加入標誌
在 Business Communications Console 中選取服務專員，然後前往「服務專員資訊」部分。我們即將更新商家標誌 (如下黃色所參照)。
按一下「上傳」，即可選取要上傳或透過網址匯入的圖片。
請參閱說明文件中的標誌設計規範，瞭解使用自家標誌的最佳做法。
讓我們上傳您在本程式碼研究室開頭所複製原始碼中的標誌。您可以在存放區的 ./assets/ 目錄中找到這個檔案，檔案名稱為「bonjour_meal-logo.png」。只要將檔案拖曳到網路瀏覽器中，畫面上就會顯示小型編輯工具，讓你輕鬆調整圖片品質並裁剪。調整圖片解析度並裁剪，使圖片小於或等於 50KB 的限制。如果您對圖片感到滿意，請按一下藍色圓圈中的勾號進行確認，然後按一下互動視窗底部的「選取」。
最後，點選「服務專員資訊」頁面右上角的「儲存」。由於代理程式資訊會以快取方式存放在我們的伺服器中，所以這項變更需要一段時間才會反映在您的裝置中，因此這項變更會在變更生效後的兩小時內顯示。
更新歡迎訊息
更新歡迎訊息是我們在本程式碼研究室中的先前方法。我們再說一遍，但這次設定的歡迎訊息更適合「Bonjour Meal」使用者歷程。
在 Business Communications 控制台中選取服務專員，然後前往「服務專員資訊」部分。向下捲動，直到看到「歡迎訊息」輸入欄位，您可以在其中更新訊息。
由於我們會新增對話開場白，因此可以在歡迎訊息中參考。在輸入欄位中，我們要替換為以下文字：
「歡迎使用 Bonjour Meal。我是助理，可以協助解答 Bonjour Meal 的相關問題。不妨試試下列部分選項。」
最後，點選「服務專員資訊」頁面右上角的「儲存」。再次提醒，我們的快取機制需要一段時間才會反映這項變更，以確保一切順利！
提供營業時間資訊
為了向使用者提供這些資訊，我們會使用 Business Messages API 傳送自訂訊息給使用者。
您可以回想一下，系統會在 views.py 的 route_message 函式中剖析訊息。函式會先將字串正規化，然後開始檢查正規化訊息是否與任何硬式編碼參數相符。為方便說明，接下來我們要新增一個額外條件，以便檢查正規化訊息是否等於新的常數，並呼叫 CMD_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)
...
如此一來，我們的機器人應該就能在使用者傳送「營業時間查詢」訊息時，一併回應這些營業時間。您預期會看到如下的內容：
將原始碼部署至 GCP 之後，您就能立即看見相關變更。Google Cloud Platform 快取網頁應用程式的方式與快取代理程式資訊的方式相同，因此您可以立即測試這項服務。
我們稍微調整了原始碼，但如果再進行一項修改，就能讓使用者詢問有關線上購物的資訊。數位服務專員會回覆你，表示這項功能目前尚未開放使用，請稍後再回來查看。
告知使用者線上購物功能即將推出
和告知使用者營業時間資訊一樣，我們也會進行類似的修改。這次，我們要將資訊以及引人入勝的圖片加入複合式資訊卡。
剖析正規化訊息，並檢查名為 CMD_ONLINE_SHOPPING_INQUIRY 的常數的條件，該常數值設為「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，存取服務專員的「服務專員資訊」頁面。我們先前已定義「方塊」、「資訊卡」和「輪轉介面」的對話開場白。雖然這些額外資訊仍可正常運作，但與我們的業務功能無關。你可以選擇繼續展示這些豐富功能，也可以移除這些功能，讓數位服務專員顯示 Bonjour Meal 商家專用的對話開場白。
我們將建立兩個新的對話開場白。將第一個簡訊的「text」(簡訊) 設為「What’s your business hours?」(您的營業時間為何？)，然後將「回傳資料」設為「營業時間查詢」。針對第二個對話開場白，請將「text」設為「我可以在這裡購物嗎？」，並將「回傳資料」設為「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 Messages 數位服務專員的網頁應用程式，透過 Business Communications Console 修改服務專員，並變更原始碼，打造更優質的使用者體驗。
您現已瞭解打造互動式 Business Messages 體驗所需的重要步驟。接下來，Google 將支援各式各樣的新功能。還可延伸虛擬服務專員，支援庫存查詢功能，或是加入購物車來追蹤使用者可能感興趣的產品。您可以使用輪轉介面來展示菜單中的項目，並透過建議項目讓使用者選取感興趣的項目。
以下前導廣告將介紹可能的外觀。
如何打造良好的對話體驗？
最優秀的服務專員會在對話中提供功能，同時為使用者提供背景資訊，讓他們可以像平常打電話，甚至親自與商家互動並進行互動。想想看，下列主題可能會在你與合作商家中進行的對話時有所不同。
提供背景資訊並營造期待感
提供背景資訊可以是任何形式，包含明確指出如何幫助使用者介紹數位服務專員，以及對方能引起共鳴的人物角色。Business Messages 中的成功服務專員會使用代表性顯示圖片，向使用者顯示正在交談的使用者。
請根據您建構的使用者體驗設定期望。舉例來說，如果您的服務專員支援庫存查詢功能，請先告知使用者商品供應情形可能偏低，再提供答案。
為使用者提供功能
消費者隨時都能與商家互動。Business Messages 可協助進行複雜的使用者互動，例如查看訂單狀態或確認商品是否有現貨。即使商家網站上有解答，許多使用者會持續透過電話致電商家尋求問題解答。這也使得企業必須投入更多資源來處理來電量，尤其是節慶期間。
持續吸引使用者
提供對話觸控點，讓使用者持續參與對話。在訊息之間，您可以叫用輸入訊息指標，讓使用者知道您在處理該使用者的答案。
透過輸入訊息指標、建議方塊、複合式資訊卡和輪轉介面等豐富功能，您可以引導使用者完成快樂的操作流程，協助他們完成特定工作，例如從項目選單中訂購。目標是減少商家電話專線的來電流量。
對話務必要能為使用者提供功能。透過訊息與商家聯絡的使用者，會希望很快就能得到解答。在非理想情況下，數位服務專員無法促進對話，而可能導致使用者體驗不佳。幸好，有一些方法可以解決這個問題，例如將對話轉移至真人服務專員，我們會在日後的程式碼研究室中介紹。
後續步驟
準備就緒後，請參閱下列主題，進一步瞭解 Business Messages 支援的更複雜的互動功能
參考說明文件
- SuggestedReply
- Business Messages 訊息參考文件
- RichCard 的 JSON 定義