將 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 地圖，讓資訊卡更豐富

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. 現在要設定您的即時通訊應用程式，請前往該 API 的「設定」頁面。請注意，每個 GCP 專案最多只能有一個 Chat 應用程式。
  1. 您應該會看到已填入設定選項的 Dialogflow 欄位。
  2. 將「顯示圖片網址」欄位變更為這張汽車圖片：**https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
  3. 如要同時啟用 Chat 應用程式的即時訊息和聊天室，請依序選取「應用程式可直接傳送訊息給應用程式」和「應用程式可在有多位使用者的聊天室中運作」。

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

3. 其他 Dialogflow 整合項目

系統預設會啟用 Google Chat，但如果您想讓機器人為多個平台提供服務，請前往 Dialogflow 控制台的「Integrations」(整合) 頁面啟用機器人。

4. 在 Google Chat 中測試

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

  1. 按一下聊天室右上角的下拉式選單，然後選取 新增使用者和應用程式。
  2. 搜尋「AppointmentScheduler」，並將應用程式新增至聊天室。
  3. 你現在可以在聊天室中輸入 @AppointmentScheduler，與 Google 內建的應用程式互動。

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

  1. 使用者：「@AppointmentScheduler 設定明天下午 2 點的車輛登記預約。」
  2. 即時通訊應用程式：「好，我來試試看。」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 中的自訂酬載 可讓您使用平台專屬的複合式回應訊息。這裡用來新增 Hangouts Chat JSON 資訊卡，供服務專員使用。

讓我們先為歡迎意圖新增基本資訊卡。在 Dialogflow 控制台中，前往「Default Welcome Intent」(預設歡迎意圖)，並向下捲動至「Response」(回應) 部分。

9624208f0d266afd.png

點選「Google Chat」，然後取消選取「使用「預設」分頁中的回應做為第一個回應」，然後點選「新增回應」>自訂酬載。

您會看到 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 產生的預約地點新增為靜態地圖。這個 API 可讓您使用網址參數建構 Google 地圖圖片。這樣，我們就可以在資訊卡中的圖片小工具中使用該圖片。

5b4ca104638f9e8d.png

  1. 在 Google Cloud 控制台中啟用 Maps Static API，方法與啟用 Google 日曆和 Google Chat API 的方式相同。
  2. 在 API 與控制台中的「服務」頁面。如要進一步瞭解如何透過 Google 地圖擷取 API 金鑰及最佳做法，請參閱這裡。c0238236d3c709c5.png
  3. 在 index.js 中，將 API 金鑰和下列常數複製到檔案頂端
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. 在「General」分頁中，捲動至底部，然後按一下 [Delete this Agent]。
  2. 在對話方塊中輸入「Delete」，然後點選「Delete」。

10. 恭喜

您在 Dialogflow 中建立聊天機器人，並將機器人與 Google 日曆整合，現在您是 Google Workspace Pro 了！

瞭解詳情

如要瞭解詳情，請前往 Dialogflow GitHub 頁面查看程式碼範例。