1. 簡介
您已在先前的程式碼研究室中，為電視節目表建構 Dialogflow 聊天機器人，現在我們要說明如何將其擴充至 Google Chat。您將瞭解如何為這個平台建構動態互動式資訊卡，並進行多項整合。
建構目標
我們會建構 Dialogflow 聊天機器人，在您的 Google Workspace 網域中提供可自訂的回覆。
課程內容
- 如何部署及設定 Google Chat 應用程式
- 如何在 Google Chat 中建立顯示資訊卡
- 如何在 Dialogflow 實現中建構自訂酬載
軟硬體需求
- 完成本系列第 1 部分的程式碼研究室。
- 網頁瀏覽器和用於登入 Dialogflow 主控台的電子郵件地址
- Google Workspace 網域已啟用 Chat
2. 啟用及設定 Google Chat
我們將從您在上一個程式碼研究室中建立的 Dialogflow 代理程式開始。
- 在 Dialogflow 主控台中，按一下
。 - 在「一般」分頁中，捲動至「專案 ID」，然後點按「Google Cloud」
。
- 在 Google Cloud 控制台中，依序點選「導覽選單」圖示 ☰ >「API 和服務」>「程式庫」。
- 搜尋「Google Chat API」，然後點按「啟用」，即可在 Google Cloud 專案中使用這個 API。
- 現在我們要設定 Google Chat 應用程式，請前往 API 的「設定」頁面。請注意，每個 GCP 專案最多只能有一個 Google Chat 應用程式。
- 您應該會看到 Dialogflow 欄位填入設定選項。
- 將「Avatar URL」欄位變更為這個電視圖片：
[https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png](https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png) - 為即時訊息和聊天室啟用 Google Chat 擴充應用程式
按一下「儲存」，然後離開 Cloud 控制台。
此外，還包括 Dialogflow 整合。Google Chat 預設為啟用狀態，但如要放送至多個平台，請前往 Dialogflow 控制台的「整合」頁面啟用。
3. 在 Google Chat 中測試
Google Chat 應用程式設定完成後，請將其新增至聊天室並進行測試。開啟 Google Chat 並建立測試聊天室。在聊天室右上角按一下下拉式選單，然後選取「新增成員和應用程式」。
搜尋 tvguide，然後將 Google Chat 應用程式新增至聊天室。
現在只要在聊天室中輸入 @tvguide，即可在 Google Chat 中與已建構的 Google Chat 應用程式互動。輸入 @tvguide hello 即可測試。
接著，我們將使用 Google Chat 中的自訂項目，新增更豐富的回覆。
4. 自訂 Google Chat 資訊卡
透過 Google Chat，您可以讓應用程式傳回基本文字回應或資訊卡回應，以便透過圖片、按鈕等不同小工具建構更豐富的介面。現在您已將 Dialogflow 代理程式連結至 Google Chat 應用程式，只需在完成程式碼中以正確格式傳回 JSON，即可在 Google Chat 中顯示。以下列舉幾個 JSON 範例。
基本文字回覆如下所示：
{
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
含有小工具的資訊卡回應範例如下：
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. 自訂酬載和即時通訊卡片
Dialogflow 中的自訂酬載 可提供平台專屬的複合式回應訊息。我們將在此新增 Hangout Chat JSON 資訊卡，並由代理程式傳回給使用者。
首先，請為歡迎意圖新增基本資訊卡。在 Dialogflow 控制台中，前往預設歡迎意圖，然後向下捲動至回應部分。
按一下「Google Chat」，取消選取「Use responses from the DEFAULT tab as the first responses」，然後按一下「ADD RESPONSES」>「Custom Payload」。
畫面上會顯示 JSON 骨架。
複製並貼上下列程式碼。我們已使用 TextParagraph 小工具設定卡片。
{
"hangouts": {
"header": {
"title": "TV Guide App"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
}
]
}
]
}
}
點選「儲存」，然後前往測試聊天室，查看這張資訊卡是否已算繪。在對話空間中輸入「@tvguide hello」
接著，我們會在執行要求程式碼中新增自訂酬載，以便使用程式碼動態產生內容。
如要進一步瞭解資訊卡，請參閱訊息格式說明文件。我們會在下一節新增資訊卡。
6. 在 Fulfillment 中新增卡片
現在我們要建立含有小工具的資訊卡，顯示電視節目表。讓我們新增名為 getGoogleCard 的函式，用於算繪產生的商家資訊。我們會使用 keyValue 和按鈕小工具建構資訊卡回應。
在 index.js 檔案的底部，將下列函式新增至程式碼。
/**
* Return a Google Chat Card in JSON
* @param {Object} JSON tv results
*/
var getGoogleCard = function(tvresults) {
console.log('In Google Chat card, tv results: ' + JSON.stringify(tvresults));
if(tvresults['Listings'][0]) {
let channelName = tvresults['Name'];
let currentlyPlayingTime = getShowTime(tvresults['Listings'][0]['Time']);
let laterPlayingTime = getShowTime(tvresults['Listings'][1]['Time']);
const cardHeader = {
title: channelName + ' Shows',
};
const currentWidget = {
keyValue: {
content: `${tvresults['Listings'][0]['Title']}`,
bottomLabel: `${currentlyPlayingTime}`,
}
};
const laterWidget = {
keyValue: {
content: `${tvresults['Listings'][1]['Title']}`,
bottomLabel: `${laterPlayingTime}`
}
};
const buttonWidget = {
buttons: [
{
textButton: {
text: 'View Full Listing',
onClick: {
openLink: {
url: TVGUIDE_WEBSERVICE + '/' + tvresults['ID'],
},
},
},
},
],
};
return {
'hangouts': {
header: cardHeader,
sections: [{widgets: [currentWidget, laterWidget, buttonWidget]}],
}
};
} else {
const errorWidget = {
keyValue: {
content: 'No listings found',
bottomLabel: 'Please try again.'
}
};
return {
'hangouts': {
'sections': {widgets: [errorWidget]},
}
};
}
}
現在我們需要呼叫這個方法，讓代理程式取得回覆並傳送給使用者。在 channelHandler 函式中，將函式內容替換為下方程式碼。
function channelHandler(agent) {
console.log('in channel handler');
var jsonResponse = `{"ID":10,"Listings":[{"Title":"Catfish Marathon","Date":"2018-07-13","Time":"11:00:00"},{"Title":"Videoclips","Date":"2018-07-13","Time":"12:00:00"},{"Title":"Pimp my ride","Date":"2018-07-13","Time":"12:30:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:30:00"},{"Title":"Daria","Date":"2018-07-13","Time":"13:45:00"},{"Title":"The Real World","Date":"2018-07-13","Time":"14:00:00"},{"Title":"The Osbournes","Date":"2018-07-13","Time":"15:00:00"},{"Title":"Teenwolf","Date":"2018-07-13","Time":"16:00:00"},{"Title":"MTV Unplugged","Date":"2018-07-13","Time":"16:30:00"},{"Title":"Rupauls Drag Race","Date":"2018-07-13","Time":"17:30:00"},{"Title":"Ridiculousness","Date":"2018-07-13","Time":"18:00:00"},{"Title":"Punk'd","Date":"2018-07-13","Time":"19:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"20:00:00"},{"Title":"MTV Awards","Date":"2018-07-13","Time":"20:30:00"},{"Title":"Beavis & Butthead","Date":"2018-07-13","Time":"22:00:00"}],"Name":"MTV"}`;
var results = JSON.parse(jsonResponse);
var listItems = {};
textResults = getListings(results);
for (var i = 0; i < results['Listings'].length; i++) {
listItems[`SELECT_${i}`] = {
title: `${getShowTime(results['Listings'][i]['Time'])} - ${results['Listings'][i]['Title']}`,
description: `Channel: ${results['Name']}`
}
}
if (agent.requestSource === 'hangouts') {
const cardJSON = getGoogleCard(results);
const payload = new Payload(
'hangouts',
cardJSON,
{rawPayload: true, sendAsMessage: true},
);
agent.add(payload);
} else {
agent.add(textResults);
}
}
請注意底部新增回應的程式碼。如果系統判斷代理程式的請求來源是這個平台，我們會使用「hangouts」標記建構 JSON 酬載。這項資訊對於在履行作業中正確傳回酬載至關重要。
現在返回聊天室並測試這項功能。輸入「@tvguide What is on MTV?」。畫面會顯示類似的回應。
7. 恭喜
您已使用 Dialogflow 建立第一個 Google Chat 機器人！
後續步驟
喜歡這個程式碼研究室嗎？快來看看這些精彩的實驗室！