將 Chat 新增至 AppSheet 應用程式

1. 事前準備

Chat 擴充應用程式是一種網頁應用程式/服務，可在 Google Chat 中執行。AppSheet 現在可讓任何 AppSheet 應用程式以 Chat 擴充應用程式的形式執行。啟用並發布後，這些應用程式會提供額外的表單因素，呈現 AppSheet 應用程式中的資料

課程內容

  • 如何使用現有的範本範例應用程式，並為其啟用 Chat 應用程式。
  • 如何自訂 Chat 應用程式的行為。
  • 如何將聊天應用程式新增至現有的 Workspace Chat 聊天室。
  • 如何建構聊天自動化功能，將訊息傳送至 Chat 聊天室。

建構項目

本程式碼研究室會逐步說明如何使用現有範本應用程式，然後啟用、設定及發布為即時通訊應用程式。接著，說明如何將即時通訊應用程式新增至現有即時通訊聊天室，透過自動化功能廣播即時通訊訊息。

軟硬體需求

2. 複製簡易商品目錄範本應用程式

如要開始，請複製「Simple Inventory Template」應用程式。在本程式碼實驗室中，這個應用程式會啟用即時通訊功能。

  1. 前往 AppSheet ( appsheet.com) 首頁，然後依序點選「建立」 >「應用程式」 >「從範本開始」。

建立應用程式：從範本開始。

  1. 在「簡易商品目錄」範本應用程式資訊卡上，按一下「複製」。

在「簡易商品目錄」範本上按一下「複製」。

  1. 在「複製應用程式」對話方塊中，將應用程式命名為「Simple Inventory Chat」。

「複製應用程式」對話方塊。

系統會建立範本應用程式的新副本，並載入 AppSheet 編輯器。

AppSheet 編輯器中的簡易商品目錄應用程式範本副本。

  1. 載入應用程式時，請注意系統會顯示警告，指出由於應用程式尚未部署，因此機器人只會將電子郵件傳送給應用程式擁有者。如要啟用 Chat，您必須先部署應用程式，因此請在編輯器中點選「管理」頁面來部署應用程式。然後依序點按「發布」和「將應用程式移至已部署狀態」。

部署應用程式。

3. 建立及自訂新的 Chat 應用程式

接下來的步驟說明如何在目前的 AppSheet 應用程式中建立新的 Chat 應用程式。

建立 Chat 擴充應用程式

  1. 前往 AppSheet 導覽器中的「Chat settings」頁面，即可查看 Chat 設定。

AppSheet 編輯器中的 Chat 設定頁面。

  1. 按一下「建立」，即可開始設定 Chat 應用程式。
  2. 在「啟用」對話方塊中，按一下「下一步」繼續操作。

啟用對話方塊圖片。

重要事項：系統會顯示訊息，說明建立 Chat 應用程式需要幾分鐘。請勿重新整理這個頁面。

說明不要刪除網頁的訊息。

  1. 建立 Chat 應用程式後，系統會顯示「自訂」頁面。

此時，Chat 應用程式已建立並發布。以下自訂步驟均為選用步驟。

即時通訊應用程式的自訂頁面。

  1. 點按「歡迎訊息」，然後設定「訊息文字」，自訂 Chat 顯示時的第一則訊息。新增您希望在 Chat 應用程式首次算繪時顯示的任何自訂訊息。

自訂訊息文字。

  1. 向下捲動至「設定動作」，然後點選「動作」。

設定動作頁面。

  1. 在隨即顯示的「動作」選單中，選取第一個選項「斜線指令：開啟應用程式檢視畫面」。

動作快捷選單

  1. 輸入下列指令：

應用程式檢視畫面

Inventory_log (從下拉式選單中選取)

名稱

/log

說明

View the inventory log

斜線指令選項。

  1. 按「Next」(下一步) 繼續操作。

恭喜！您透過 AppSheet 建立的第一個 Chat 擴充應用程式已部署完成！

已部署 Chat 應用程式畫面。

4. 安裝 Chat 應用程式

應用程式部署完成後，您必須在 Chat 環境中安裝應用程式，才能使用。

如要安裝，請按照下列步驟操作：

  1. 開啟 Google Chat。
  2. 按一下「Chat」右側的「+」圖示。
  3. 搜尋您的應用程式「Simple Inventory Chat」。

在 Chat 中新增即時通訊應用程式

  1. 在搜尋結果中找出應用程式，然後點選安裝。

在 Chat 視窗中安裝後，Chat 應用程式會顯示在視窗中。

安裝後，Chat 應用程式會傳送含有選單資訊卡的即時訊息。

  1. 如要測試應用程式，請點按「Inventory Log」(庫存記錄) (或「Chat」資訊卡中的任何其他連結)。

聊天室視窗會顯示目前的廣告空間。

簡易的 Inventory Chat 應用程式。

  1. 選用：按一下另一個連結「項目」。請注意，應用程式會在新視窗中開啟。這是因為 Chat 使用者介面不支援「項目」檢視畫面。

「項目」檢視畫面不支援「即時通訊」檢視畫面。

  1. 選用：進一步試用 Chat 應用程式版本的 Simple Inventory Chat 應用程式。

5. 將 Chat 應用程式新增至 Chat 聊天室

接下來的步驟會將 Chat 應用程式新增至 Chat 聊天室。當您想讓 Chat 擴充應用程式向一群人廣播訊息時，這項功能就相當實用。

建立新的 Chat 聊天室

如要繼續操作，請先建立 Chat 空間。

  1. 在左下方的 Chat 視窗中，按一下「聊天室」旁邊的「+」圖示，即可新增聊天室。

聊天室的內容選單。

  1. 按一下「建立聊天室」。
  2. 在對話方塊中，為新聊天室命名。建議使用「Inventory Chat Space」這個名稱，因為本程式碼研究室稍後會用到。

「建立聊天室」對話方塊。

  1. 按一下「建立」，完成建立新聊天室。

建立完成後，新的即時通訊聊天室會顯示在即時通訊視窗的左下角。

聊天室使用者介面。

將 Chat 應用程式新增到新的 Chat 聊天室

  1. 如要將 Chat 應用程式新增至 Chat 聊天室，請按一下聊天室，然後按一下 Chat 聊天室名稱右側的向下箭頭。系統會叫用內容下拉式選單。
  2. 按一下「應用程式與整合」。

應用程式和整合服務。

系統會顯示對話方塊，讓您將應用程式新增至 Space。

  1. 按一下「+ 新增應用程式」按鈕。

將應用程式新增至「Inventory Chat Space」。

  1. 在對話方塊中找到「Simple Inventory Chat」應用程式，然後按一下「新增」。

將應用程式新增至 Chat 聊天室。

Chat 應用程式新增至聊天室後，會傳送訊息到該聊天室。

已新增即時通訊應用程式的對話視窗。

現在新 Chat 應用程式已安裝在 Chat 聊天室中，請返回 Chat 應用程式並新增「自動化」，將訊息傳送至這個 Chat 聊天室。

6. 建立 Chat 自動化動作，將訊息傳送至 Chat 聊天室

接下來的步驟說明如何發布 Chat 應用程式：

  1. 返回 AppSheet 應用程式，然後再次開啟 Chat 設定頁面 (如果尚未開啟)。
  2. 按一下「自訂」，開啟 Chat 應用程式設定。
  3. 按一下「+ 動作」按鈕，叫用即時通訊動作的環境選單。

動作按鈕。

  1. 按一下「資料變更時的訊息」選項。這會產生完整的自動化程序，在任何資料變更時傳送訊息。

「動作」快捷選單。

AppSheet 編輯器會顯示新的自動化程序。

重要事項：請勿點按右上角的「儲存」。您需要進一步設定自動化動作。

  1. 按一下「傳送即時通訊訊息」程序

聊天自動化。

右側會開啟設定視窗。

  1. 在「郵件內容」和「聊天室 ID」下方，按一下「新增」。

將 Chat 聊天室新增至 Chat 自動化項目。

  1. 按一下「Inventory Chat Space」(庫存 Chat 聊天室) 選項，設定自動化功能，將訊息傳送至這個 Chat 聊天室。
  2. 將「訊息文字」更新為「The Items table was updated」。
  3. 在「傳送應用程式檢視畫面 (選用)」設定的下拉式選單中，選取「Items_Detail」。

請確定訊息內容。

最終訊息內容設定。

  1. 在 AppSheet 編輯器的右上角，按一下「儲存」。

Chat 應用程式現在已設定完畢，可以將訊息傳送至 Chat 聊天室！

7. 測試 Chat 自動化動作

接下來，您可以測試自動化功能，看看是否會將訊息傳送至 Chat 聊天室。在 AppSheet 編輯器的「預覽」視窗中，更新「Items」資料表中的記錄。這會觸發自動化程序，將訊息傳送至 Chat 聊天室。

  1. 在 AppSheet 編輯器的「預覽」視窗中，按一下行動裝置圖示 63e1499db148fde8.png，即可在行動裝置檢視畫面中顯示應用程式。然後點選記錄，例如「Saw」。

行動預覽視窗中的應用程式。

  1. 在記錄的「詳細資料」檢視畫面中，按一下「編輯」圖示。

「記錄詳細資料」檢視畫面。

  1. 將「Description」變更為「Cordless powered circular saw」。

在記錄中編輯說明。

  1. 按一下「預覽」視窗中的「儲存」，系統就會將訊息傳送至 Chat 聊天室。

收到訊息時，你應該會聽到 Chat 的通知鈴聲！

  1. 返回 Chat 視窗，然後按一下右下角的「Chat Space」，查看新訊息「The Items table was updated」和「Items_Detail」Items_Detail對話資訊卡。

即時通訊使用者介面，顯示來自 Chat 應用程式的訊息。

8. 恭喜

您已完成 AppSheet Chat 擴充應用程式程式碼研究室！

其他資訊