建構 Google Chat 應用程式的首頁

本頁說明如何為 Google Chat 應用程式。應用程式首頁是可自訂的資訊卡介面 Chat 應用程式傳送給使用者 傳送訊息。

顯示兩個小工具的應用程式首頁資訊卡。

舉例來說: 設定應用程式首頁資訊卡訊息,納入與 使用 Chat 擴充應用程式 斜線指令。對使用者而言,應用程式首頁是 這項功能僅適用於 Chat 應用程式的即時訊息, 這項功能是由應用程式開發人員 啟用


您可以使用 Card Builder 設計及預覽即時通訊應用程式的 JSON 資訊卡訊息:

開啟資訊卡建立工具

必要條件

Python

Apps Script

在 Google Cloud 控制台中設定

Python

  1. 前往 Google Cloud 控制台中的「選單」 >「更多產品」 > Google Workspace > 產品庫 > Google Chat API

    前往 Google Chat API

  2. 依序按一下「管理」和「設定」分頁標籤。

  3. 啟用「支援應用程式首頁」

  4. 勾選「支援應用程式首頁」核取方塊。

  5. 在「應用程式首頁網址」欄位中新增網址。這個值通常會相同 設為「應用程式網址」。系統會呼叫 這個網址 APP_HOME 事件

  6. 按一下 [儲存]

Apps Script

  1. 前往 Google Cloud 控制台中的「選單」 >「更多產品」 > Google Workspace > 產品庫 > Google Chat API

    前往 Google Chat API

  2. 依序按一下「管理」和「設定」分頁標籤。

  3. 勾選「支援應用程式首頁」核取方塊。

  4. 按一下 [儲存]

設定 Chat 應用程式

設定 Chat 應用程式主畫面。

Python

當使用者透過 Chat 應用程式開啟即時訊息時, 系統將APP_HOME事件傳送到你的 Chat 應用程式。如果 即時通訊應用程式會收到這個事件,也就是 RenderActions 會透過 pushCard 導覽傳回。

@app.route('/', methods=['POST'])
def on_event():
  event = request.get_json()
  chat = event.get('chat')
  if chat is not None:
    return handle_chat_event(event)

def handle_chat_event(event):
  if event['chat'].get('type') == 'APP_HOME':
    return get_app_home_card()

def get_app_home_card():
  return {
    "action": {
      "navigations": [
        {
          "pushCard": {
            "sections": [
              {
                "widgets": [
                  {
                    "buttonList": {
                      "buttons": [
                        {
                          "text": "Open documentation",
                          "onClick": {
                            "openLink": {
                              "url": "https://developers.google.com/chat"
                            }
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  }

Apps Script

此範例會透過 資訊卡 JSON。 您也可以使用 Apps Script Card 服務

實作 onAppHome 函式以傳回 RenderActions 透過 pushCard 操作:

// "onAppHome" is the pre-defined name of the callback that the Chat servers
// execute.
function onAppHome() {
  return {
    action: {
      navigations: [
        {
          pushCard: getCard()
        }
      ]
    }
  };
}

function getCard() {
  return {
    sections: [
      {
        widgets: [
          {
            buttonList: {
              buttons: [
                {
                  text: "Open documentation",
                  onClick: {
                    openLink: {
                      url: "https://developers.google.com/chat"
                    }
                  }
                }
              ]
            }
          }
        ]
      }
    ]
  };
}

更新應用程式首頁資訊卡

當使用者提交資訊或關閉應用程式首頁資訊卡時, 對話方塊舉例來說,初始的應用程式主畫面資訊卡包含歡迎訊息 會要求使用者填寫表單提供資訊使用者完成 表單,應用程式首頁資訊卡隨即更新。更新必須與執行個體一起傳回 /RenderActions ,其中包含 updateCard 導覽。

Python

如果是 HTTP 應用程式,更新應用程式首頁資訊卡的做法類似於 處理使用者輸入的資訊, 但您必須傳回 RenderActionsinvokedFunction 代表 與 Card 小工具相關聯的叫用函式如需更多資訊 看 CommonEventObject。 在以下範例中 submitForm 顯示使用者已提交表單 資料:

@app.route('/', methods=['POST'])
def on_event():
  event = request.get_json()
  chat = event.get('chat')
  if chat is not None:
    return handle_chat_event(event)

def handle_chat_event(event):
  if event['chat'].get('type') == 'SUBMIT_FORM':
    event_object = event.get('commonEventObject')
    if event_object is not None:
      // Forms
      if 'submitForm' == event_object.get('invokedFunction'):
        return {
          'render_actions': {
            'action': {
              'navigations': [{
                'updateCard': get_update_card()
              }]
            }
          }
        }

def get_update_card():
  return {
      "action": {
          "navigations": [{
              "pushCard": {
                  "sections": [{
                      "widgets": [{
                          "buttonList": {
                              "buttons": [{
                                  "text": "Open documentation",
                                  "onClick": {
                                      "openLink": {
                                          "url": "https://developers.google.com/chat"
                                      }
                                  },
                              }]
                          }
                      }]
                  }]
              }
          }]
      }
  }

Apps Script

此範例會透過 資訊卡 JSON。 您也可以使用 Apps Script Card 服務

// Called from elsewhere (i.e. on button press).
function updateAppHomeCard(event) {
  return {
    render_actions: {
      action: {
        navigations: [
          {
            updateCard: getCard()
          }
        ]
      }
    }
  }
}

function getCard() {
  return {
    sections: [
      {
        widgets: [
          {
            buttonList: {
              buttons: [
                {
                  text: "Open documentation",
                  onClick: {
                    openLink: {
                      url: "https://developers.google.com/chat"
                    }
                  }
                }
              ]
            }
          }
        ]
      }
    ]
  };
}

限制

一般來說 navigation 是 也不適用於 Chat 擴充應用程式您無法傳回一疊卡片。 只有 pushCard (用於初始回應) 和 updateCard (用於更新) 如下 適用於 Chat 應用程式