將 Dialogflow 與 Google Chat 整合

1. 事前準備

在本程式碼研究室中，您將瞭解 Dialogflow 如何與 Google Workspace API 連結，透過 Google Chat 中的動態回覆，使用 Google 日曆建立功能齊全的預約排程工具。

如果您沒有先前程式碼研究室的設定，或對 Dialogflow 和完成感到有信心，可以從這裡下載範例程式碼和代理程式設定

https://github.com/googleworkspace/appointment-scheduler-codelab

必要條件

繼續操作前，請先完成下列程式碼研究室：

  1. 使用 Dialogflow 建構預約排程器
  2. 將 Dialogflow 與 Actions on Google 整合
  3. 瞭解 Dialogflow 中的實體
  4. 瞭解如何整合 Dialogflow 與 Google 日曆，完成預約程序

您也需要瞭解 Dialogflow 的基本概念和建構方式，這些內容可從「使用 Dialogflow 建構聊天機器人」路徑中的下列影片取得。

課程內容

  • 如何部署及設定 Google Chat 應用程式
  • 如何在 Google Chat 中建立顯示資訊卡
  • 如何在 Dialogflow 實現中建構自訂酬載

建構項目

  • Dialogflow、Google Chat 和 Google 日曆的整合
  • (選用) 整合 Google 地圖，提供更豐富的資訊卡

5b4ca104638f9e8d.png

軟硬體需求

  • 網頁瀏覽器和用於登入 Dialogflow 主控台的電子郵件地址
  • Google Workspace 網域已啟用日曆和 Google Chat

2. 啟用及設定 Google Chat

我們將從您在上一個程式碼研究室中建立的 Dialogflow 代理程式開始。

  1. 在 Dialogflow 主控台中，按一下 d7d792687e597dd5.png。
  2. 在「一般」分頁中，捲動至「專案 ID」，然後點按「Google Cloud」f2bffd4fcdb84fa9.png。

34be16fcd4c5aeff.png

  1. 在 Google Cloud 控制台中，依序點選「導覽選單」圖示 ☰ >「API 和服務」>「程式庫」。
  2. 搜尋「Google Chat API」，然後點按「啟用」，即可在 Google Cloud 專案中使用這個 API。
  3. 現在我們要設定 Chat 應用程式，請前往 API 的「設定」頁面。請注意，每個 GCP 專案最多只能有一個 Chat 應用程式。
  1. 您應該會看到 Dialogflow 欄位填入設定選項。
  2. 將「Avatar URL」欄位變更為這張車輛圖片：**https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
  3. 如要同時在即時訊息和聊天室中啟用 Chat 擴充應用程式，請選取「應用程式可以直接接收訊息」和「應用程式可以在有多位使用者的聊天室中運作」。

按一下「儲存」，然後離開 Cloud 控制台。

3. 其他 Dialogflow 整合功能

Google Chat 預設為啟用，但如要讓機器人服務多個平台，請前往 Dialogflow 控制台的「整合」頁面啟用。

4. 在 Google Chat 中測試

Chat 應用程式設定完成後，請將其新增至 Chat 聊天室並進行測試。開啟 Google Chat 並建立測試聊天室。

  1. 在聊天室右上角按一下下拉式選單，然後選取「新增成員和應用程式」。
  2. 搜尋 AppointmentScheduler，然後將應用程式新增至聊天室。
  3. 現在只要在空間中輸入 @AppointmentScheduler，即可與您在 Google 中建立的應用程式互動。

使用先前程式碼研究室的相同輸入內容，在這個平台上測試：

  1. 使用者：「@AppointmentScheduler Set an appointment for vehicle registration at 2 PM tomorrow.」(@AppointmentScheduler 設定明天下午 2 點的車輛登記預約。)
  2. Chat 應用程式：「好的，請稍等，我看看是否能安排時間。4 月 24 日下午 2 點可以！」

接著，我們將使用 Google Chat 中的自訂項目，新增更豐富的回覆。

5. 自訂 Google Chat 資訊卡

透過 Google Chat，您可以讓應用程式傳回基本文字回應或資訊卡回應，並使用圖片、按鈕等不同小工具建構更豐富的介面。現在您已將 Dialogflow 代理程式連結至 Google Chat 應用程式，只需以正確格式傳回 JSON，即可在完成程式碼中顯示 Google。以下列舉幾個 JSON 範例。

基本文字回覆如下所示：

 {
  "text": "Your pizza delivery is here!"
}

7e1cd3efb4fe9d1f.png

含有小工具的資訊卡回應範例如下：

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://..." }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "OPEN IN GOOGLE MAPS",
                    "onClick": {
                      "openLink": {
                        "url": "https://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

72ac1b2903ed60b6.png

如要進一步瞭解資訊卡，請參閱訊息格式說明文件。在下一節中，我們會在 Chat 應用程式中新增資訊卡。

6. 自訂酬載和即時通訊卡片

Dialogflow 中的自訂酬載 可提供平台專屬的複合式回應訊息。我們將在此新增 Hangout Chat JSON 資訊卡，並由代理程式傳回給使用者。

首先，請為歡迎意圖新增基本資訊卡。在 Dialogflow 控制台中，前往預設歡迎意圖，然後向下捲動至回應部分。

9624208f0d266afd.png

按一下「Google Chat」，取消選取「Use responses from the DEFAULT tab as the first responses」，然後按一下「ADD RESPONSES」>「Custom Payload」。

畫面上會顯示 JSON 骨架。

bb064f7ec1237fd3.png

複製並貼上下列程式碼。我們已使用 TextParagraph 小工具設定卡片。

{
 "hangouts": {
   "header": {
     "title": "Appointment Scheduler"
   },
   "sections": [
     {
       "widgets": [
         {
           "textParagraph": {
             "text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
           }
         }
       ]
     }
   ]
 }
}

點選「儲存」，然後前往測試 Chat 聊天室，查看這張資訊卡是否已算繪。在 Chat 聊天室中輸入「@AppointmentScheduler hello」。

91af6321f3a26e19.png

接著，我們會在執行要求程式碼中新增自訂酬載，以便使用程式碼動態產生內容。

7. 在 Fulfillment 中新增卡片

現在我們要建立含有多個小工具的資訊卡，顯示預約時間。現在新增名為 getGoogleChatCard 的函式，用於算繪輸入內容：appointmentType、date 和 time。

在 index.js 底部的程式碼中新增下列函式。

function getGoogleChatCard(appointmentType, date, time) {
   const cardHeader = {
     title: 'Appointment Confirmation',
     subtitle: appointmentType,
     imageUrl: ICON_IMAGE_URL,
     imageStyle: 'IMAGE',
   };
    const dateWidget = {
     keyValue: {
       content: 'Date',
       bottomLabel: date,
     },
   };
    const timeWidget = {
     keyValue: {
       content: 'Time',
       bottomLabel: time,
     },
   };

    const buttonWidget = {
     buttons: [
       {
         textButton: {
           text: 'View Appointment',
           onClick: {
             openLink: {
               url: CALENDAR_URL,
             },
           },
         },
       },
     ],
   };
    const infoSection = {widgets: [dateWidget, timeWidget,
     buttonWidget]};
    return {
     'hangouts': {
       'name': 'Confirmation Card',
       'header': cardHeader,
       'sections': [infoSection],
     },
   };
 }

這張資訊卡包含鍵/值組合和按鈕小工具。小工具隨後會依 section 排序，而 card 則包含要算繪的區段清單。

現在，我們要在建立日曆活動時呼叫這個函式。在 createCalendarEvent 函式中，將內容替換為下列程式碼，然後部署函式。

return createCalendarEvent(dateTimeStart, dateTimeEnd, appointmentType).then(() => {
   agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);

   const dateString = dateTimeStart.toLocaleString(
     'en-US',
       {month: 'long', day: 'numeric'},
   );
   const dateParts = appointmentTimeString.split(',');
   const json = getGoogleChatCard(appointmentType, dateParts[0], dateParts[1]);
   const payload = new Payload(
       'hangouts',
       json,
       {rawPayload: true, sendAsMessage: true},
   );
   agent.add(payload);

 }).catch(() => {
   agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
 });
}

當服務專員在 Google Chat 中回覆時，系統會知道要傳回上述建構的資訊卡。請使用排程要求測試這項功能。

8. (選用) 新增 Google 地圖圖片小工具

如要讓回覆資訊卡更具視覺效果，可以新增由 Maps Static API 產生的預約地點靜態地圖。您可以使用網址參數建構地圖圖片。接著，我們可以在資訊卡的圖片小工具中使用這張圖片。

5b4ca104638f9e8d.png

  1. 在 Google Cloud 控制台中啟用 Maps Static API，啟用方式與 Calendar 和 Google Chat API 相同。
  2. 在控制台的「API 和服務」頁面中，為專案建立並儲存 API 金鑰。如要進一步瞭解如何擷取地圖 API 金鑰，以及相關最佳做法，請參閱這篇文章。c0238236d3c709c5.png
  3. 將 API 金鑰和下列常數複製到 index.js 檔案頂端
const API_KEY = 'YOUR_API_KEY';
const MAP_IMAGE_URL = 'https://maps.googleapis.com/maps/api/staticmap?center=Googleplex&zoom=14&size=200x200&key=' + API_KEY;
const ICON_IMAGE_URL = 'https://fonts.gstatic.com/s/i/googlematerialicons/calendar_today/v5/black-48dp/1x/gm_calendar_today_black_48dp.png';
const CALENDAR_URL = 'YOUR_CALENDAR_URL';
  1. 接著，在 getGoogleChatCard 函式中新增圖片小工具
  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };
  1. 將 mapImageWidget 新增至 infoSection 變數的小工具清單，然後儲存並部署。
  2. 在 Chat 聊天室中測試 Chat 應用程式，您應該會看到根據今天新增程式碼產生的豐富回應！

9. 清除所用資源

如果您打算完成其他 Dialogflow 程式碼研究室，請先略過本節，稍後再返回。

刪除 Dialogflow 代理程式

  1. 按一下現有代理程式旁邊的 dc4ac6f9c0ae94e9.png。

520c1c6bb9f46ea6.png

  1. 在「一般設定」分頁中，捲動至底部，然後點選「刪除這個代理程式」。
  2. 在對話方塊中輸入「Delete」，然後按一下「Delete」。

10. 恭喜

您已在 Dialogflow 中建立聊天機器人，並與 Google 日曆和 Google Chat 整合，現在您是 Google Workspace 專業人士！

瞭解詳情

如要瞭解詳情，請參閱 Dialogflow Github 頁面上的程式碼範例。