這個教學課程會說明如何建構能 Google Chat 使用者自行管理個人和業務聯絡人。為了收集資訊,Chat 應用程式會在資訊卡訊息和對話方塊中提示使用者填寫聯絡表單。
查看 Chat 應用程式的實際運作情形:
-
圖 2. Chat 應用程式會開啟對話方塊,供使用者執行以下操作 輸入聯絡人相關資訊 -
圖 3.Chat 應用程式會傳回確認對話方塊,讓使用者在提交前查看及確認資訊。 -
圖 4. 使用者提交表單後,Chat 應用程式會傳送私人簡訊,確認提交內容。 -
圖 5. Chat 應用程式也會提示使用者新增聯絡人 回覆訊息中的資訊卡
必要條件
- 具備 Google Chat 存取權的 Google Workspace 企業或進階版帳戶。
目標
- 設計及建構使用者介面 (UI) 做為
card
物件,並在訊息和對話方塊中顯示 UI。 - 接收並處理使用者透過表單輸入小工具提交的資訊。
- 回應斜線指令,方法是傳送 內含文字、卡片和配件小工具的訊息。
架構
內建 Chat 應用程式 Google Apps Script 和使用 要處理的互動事件 以及回覆 Chat 使用者。
以下說明使用者通常如何與 Chat 應用程式互動:
使用者透過 Chat 應用程式開啟即時訊息,或 將 Chat 應用程式新增至現有聊天室。
Chat 應用程式會提示使用者透過以下方式新增聯絡人: 建立並顯示聯絡表單
card
物件。如要分享聯絡表單,Chat 應用程式 會以下列方式回應使用者:- 使用內含聯絡表單的資訊卡訊息回覆 @提及和即時訊息。
- 開啟對話方塊,回應斜線指令
/addContact
聯絡表單 - 回應斜線指令
/about
時,會傳送含有「Add a contact」按鈕的文字訊息,使用者只要按一下這個按鈕,即可開啟含有聯絡表單的對話方塊。
使用者在聯絡表單中輸入聯絡資訊 複製到以下欄位和小工具中:
- 姓名:
textInput
可接受字串的小工具。 - 出生日期:
dateTimePicker
小工具只接受日期。 - 聯絡人類型:圓形按鈕的
selectionInput
小工具,可讓使用者選取及提交單一字串值 (Personal
或Work
)。 - 「查看並提交」按鈕:
buttonList
包含button
小工具的陣列,使用者按下相關按鈕後即可提交 輸入內容
- 姓名:
Google Chat 應用程式會處理
CARD_CLICKED
互動事件 處理使用者輸入的值,並在 確認資訊卡。使用者查看確認資訊卡,然後按一下「提交」按鈕,完成聯絡資訊。
Google Chat 應用程式傳送私人簡訊。 確認提交內容
準備環境
本節說明如何建立及設定 Chat 應用程式。
建立 Google Cloud 專案
Google Cloud 控制台
- 在 Google Cloud 控制台中,前往「選單」圖示 > IAM 與管理員 > 建立專案。
-
在「Project Name」(專案名稱) 欄位,輸入專案的描述性名稱。
選用步驟:如要編輯「Project ID」,請按一下「Edit」。專案建立後就無法變更專案 ID,因此請選擇符合專案執行期間需求的 ID。
- 按一下「地區」欄位中的「瀏覽」,即可查看可能的地理位置 專案。然後按一下「選取」。
- 點選「Create」(建立),Google Cloud 控制台前往「資訊主頁」頁面,已建立專案 幾分鐘內
gcloud CLI
在下列任一開發環境中,存取 Google Cloud CLI (gcloud
):
-
Cloud Shell:如要使用已設定 gcloud CLI 的線上終端機,請啟用 Cloud Shell。
啟用 Cloud Shell -
本機 Shell:如要使用本機開發環境,請安裝並初始化 gcloud CLI。
如要建立 Cloud 專案,請使用gcloud projects create
指令: 設定您要建立的專案 ID,以取代 PROJECT_ID。gcloud projects create PROJECT_ID
設定驗證與授權
如要使用 Google Chat 應用程式,您必須設定 OAuth 同意畫面: 使用者可在 Google Workspace 應用程式中授權您的應用程式,包括 Google Chat。
在這個教學課程中,您會部署 因此您可以在測試和內部使用時,針對 同意畫面。發布 Chat 應用程式前,請將所有預留位置資訊替換為實際資訊。
在 Google Cloud 控制台中,依序前往「選單」>「API 和服務」>「OAuth 同意畫面」。
在「使用者類型」下方,選取「內部」,然後按一下「建立」。
在「應用程式名稱」中輸入
Contact Manager
。在「使用者支援電子郵件」部分,選取您的電子郵件地址或適當的電子郵件地址 Google 群組。
在「開發人員聯絡資訊」下方,輸入您的電子郵件地址。
按一下 [儲存並繼續]。
在「範圍」頁面中,按一下「儲存並繼續」。(Chat 應用程式不需要任何 OAuth 範圍)。
查看摘要,然後按一下「返回資訊主頁」。
建立及部署 Chat 應用程式
在下一節中,您將複製與更新整個 內含所有必要應用程式的 Apps Script 專案 因此不必另外複製 貼上每個檔案
或者,您也可以在 GitHub 上查看整個專案。
以下簡要說明各檔案:
main.gs
處理所有應用程式邏輯,包括使用者傳送訊息給 Chat 應用程式、點按 Chat 應用程式訊息中的按鈕,或開啟及關閉對話方塊時的互動事件。
查看
main.gs
程式碼contactForm.gs
包含接收使用者表單資料的小工具。這些表單輸入小工具會顯示在訊息和對話方塊中的資訊卡中。
查看
contactForm.gs
程式碼appsscript.json
Apps Script 資訊清單 ,定義及設定 Apps Script 專案的 Chat 應用程式。
查看
appsscript.json
程式碼
尋找 Cloud 專案編號和 ID
在 Google Cloud 控制台中,前往您的 Cloud 專案。
按一下 [設定和公用程式] >「專案設定」。
記下「專案編號」和「專案 ID」欄位中的值。您會在後續各節中使用這些值。
建立 Apps Script 專案
如要建立 Apps Script 專案並連結至 Cloud 專案:
- 點選下方按鈕,即可開啟「在 Google Chat 中管理聯絡人」 Apps Script 專案。
開啟專案 - 按一下「總覽」圖示 。
- 在總覽頁面上,按一下「 建立副本」。
為 Apps 指令碼專案副本命名:
按一下「在 Google Chat 中管理聯絡人的副本」。
在「Project title」(專案標題) 中輸入
Contact Manager - Google Chat app
。按一下 [重新命名]。
設定 Apps Script 專案的 Cloud 專案
- 在您的 Apps Script 專案中, 按一下 「Project Settings」。
- 在「Google Cloud Platform (GCP) Project」(Google Cloud Platform (GCP) 專案) 下方,按一下 [變更專案]。
- 在「GCP 專案編號」中,貼上 Cloud 專案的專案編號。
- 按一下「設定專案」。Cloud 專案和 Apps Script 專案現在已連結。
建立 Apps Script 部署作業
備妥所有程式碼後,請部署 Apps Script 專案。設定 Deployment ID 時 Google Cloud 中的即時通訊應用程式。
在 Apps Script 中,開啟 Chat 應用程式的 專案。
按一下「部署」>新增部署作業。
如果尚未選取「外掛程式」,請按一下「選取類型」旁的部署類型 ,然後選取「外掛程式」。
在「說明」中輸入這個版本的說明,例如:
Test of Contact Manager
。按一下「Deploy」。Apps Script 會回報部署作業成功,並提供部署 ID。
按一下「複製」圖示
即可複製 部署作業 ID,然後按一下「完成」。
在 Google Cloud 控制台中設定 Chat 應用程式
本節說明如何在 Google Cloud 控制台中設定 Google Chat API 提供 Chat 應用程式相關資訊,包括 您剛透過 Apps Script 建立的部署作業 ID 專案。
在 Google Cloud 控制台中,依序點選「選單」 >「更多產品」 >「Google Workspace」 >「產品程式庫」 >「Google Chat API」 >「管理」 >「設定」。
在「應用程式名稱」中輸入
Contact Manager
。在「顯示圖片」中輸入
https://developers.google.com/chat/images/contact-icon.png
。在「說明」中輸入
Manage your personal and business contacts
。按一下「啟用互動功能」切換鈕,將其設為「開啟」。
在「功能」下方,勾選「接收一對一訊息」和「加入聊天室和群組對話」核取方塊。
在「連線設定」下方,選取「Apps Script」。
在「部署作業 ID」中,貼上 Apps Script 部署作業 ID 您在上一個部分 Apps Script 部署作業。
在「Slash 指令」下方,設定斜線指令
/about
和/addContact
:- 按一下「新增斜線指令」,設定第一個斜線指令。
- 在「Name」(名稱) 中輸入
/about
。 - 在「Command ID」中輸入
1
。 - 在「說明」中輸入
Learn how to use this Chat app to manage your contacts
。 - 選取「開啟對話方塊」。
- 按一下 [完成]。
- 按一下「新增斜線指令」,設定其他斜線指令。
- 在「名稱」中輸入
/addContact
。 - 在「指令 ID」中輸入
2
。 - 在「說明」中輸入
Submit information about a contact
。 - 選取「開啟對話方塊」。
- 按一下 [完成]。
在「顯示設定」下方,選取「將這個 Chat 擴充應用程式提供給 YOUR DOMAIN 中的特定使用者和群組」核取方塊,然後輸入電子郵件地址。
在「記錄」底下,選取 [將錯誤記錄至 Logging]。
按一下 [儲存]。系統會顯示已儲存的設定訊息。
現在可以安裝及測試 Chat 應用程式了 。
測試 Chat 應用程式
如要測試 Chat 應用程式,請開啟含有下列對話的即時訊息聊天室: 傳送訊息:
使用你使用的 Google Workspace 帳戶開啟 Google Chat (在您將自己新增為信任的測試人員時提供)。
- 按一下「新的即時通訊」圖示 。
- 在 [新增 1 或多位使用者] 欄位中,輸入你的使用者名稱 Chat 應用程式。
從搜尋結果中選取 Chat 應用程式。直接 訊息隨即開啟。
透過 Chat 應用程式開啟新的即時訊息時, 輸入
/addContact
,然後按下 Enter 鍵。在開啟的對話方塊中輸入聯絡資訊:
- 在「名字和姓氏」文字欄位中輸入名稱。
- 在「生日」日期挑選器中選取日期。
- 在「聯絡人類型」下方,選取「工作」或「個人」圓形按鈕。
按一下「檢閱並提交」。
在確認對話方塊中,檢查您提交的資訊並 按一下「提交」。Chat 應用程式會回覆文字訊息,內容為
✅ CONTACT NAME has been added to your contacts.
。您也可以選擇以下列方式測試及提交聯絡表單:
- 使用
/about
斜線指令。即時通訊應用程式會回覆文字訊息,並顯示「Add a contact
」的配件小工具按鈕。按一下按鈕即可開啟含有聯絡表單的對話方塊。 - 傳送即時訊息給 Chat 應用程式,但不傳送即時訊息
斜線指令,例如
Hello
。Chat 應用程式 回覆簡訊和資訊卡,其中包含聯絡表單。
- 使用
清除所用資源
如要避免系統向您的 Google Cloud 帳戶收取 但建議採用 Cloud 專案
- 在 Google Cloud 控制台中前往「管理資源」頁面。依序按一下「選單」圖示 >「IAM 與管理」 >「管理資源」。
- 在專案清單中選取要刪除的專案,然後按一下「刪除」圖示 。
- 在對話方塊中輸入專案 ID,然後按一下「Shut down」(關閉) 即可刪除專案。