Tạo trang chủ cho ứng dụng Google Chat

Trang này giải thích cách tạo trang chủ cho Ứng dụng Google Chat. Trang chủ ứng dụng là giao diện thẻ có thể tuỳ chỉnh mà ứng dụng Chat gửi cho người dùng khi họ mở một ứng dụng nhắn tin bằng ứng dụng Chat.

Thẻ trên màn hình chính của ứng dụng với hai tiện ích.

Ví dụ: bạn có thể định cấu hình thông báo trong thẻ trên trang chủ của ứng dụng để bao gồm các mẹo tương tác với Ứng dụng Chat đang dùng lệnh dấu gạch chéo. Đối với người dùng cuối, trang chủ ứng dụng là chỉ có trong tin nhắn trực tiếp của ứng dụng Chat nếu nhà phát triển ứng dụng bật tính năng này.


Sử dụng Trình tạo thẻ để thiết kế và xem trước thông báo trên thẻ JSON cho các ứng dụng trong Chat:

Mở Trình tạo thẻ

Điều kiện tiên quyết

Python

Một ứng dụng Google Chat đã bật các tính năng tương tác. Để tạo một ứng dụng Chat tương tác bằng dịch vụ HTTP, hãy hoàn thành phần bắt đầu nhanh này.

Apps Script

Một ứng dụng Google Chat đã bật các tính năng tương tác. Để tạo một ứng dụng Chat tương tác trong Apps Script, hãy hoàn thành phần bắt đầu nhanh này.

Node.js

Một ứng dụng Google Chat đã bật các tính năng tương tác. Để tạo một ứng dụng Chat tương tác bằng dịch vụ HTTP, hãy hoàn thành phần bắt đầu nhanh này.

Java

Một ứng dụng Google Chat đã bật các tính năng tương tác. Để tạo một ứng dụng Chat tương tác bằng dịch vụ HTTP, hãy hoàn thành phần bắt đầu nhanh này.

Định cấu hình API Chat

Để hỗ trợ trang chủ ứng dụng, bạn phải cập nhật cấu hình API Chat trong bảng điều khiển Google Cloud.

Python

  1. Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn > Sản phẩm khác > Google Workspace > Thư viện sản phẩm > API Google Chat.

    Truy cập API Google Chat

  2. Nhấp vào Manage (Quản lý), rồi nhấp vào thẻ Configuration (Cấu hình).

  3. Chọn hộp đánh dấu Support App Home (Hỗ trợ trang chủ ứng dụng).

  4. Trong trường URL của trang chủ ứng dụng, hãy thêm URL. Giá trị này thường giống nhau URL dưới dạng URL ứng dụng. URL này được gọi cho Sự kiện APP_HOME.

  5. Nhấp vào Lưu.

Apps Script

  1. Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn > Sản phẩm khác > Google Workspace > Thư viện sản phẩm > API Google Chat.

    Truy cập API Google Chat

  2. Nhấp vào Manage (Quản lý), rồi nhấp vào thẻ Configuration (Cấu hình).

  3. Chọn hộp đánh dấu Support App Home (Hỗ trợ trang chủ ứng dụng).

  4. Nhấp vào Lưu.

Node.js

  1. Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn > Sản phẩm khác > Google Workspace > Thư viện sản phẩm > API Google Chat.

    Truy cập API Google Chat

  2. Nhấp vào Manage (Quản lý), rồi nhấp vào thẻ Configuration (Cấu hình).

  3. Chọn hộp đánh dấu Support App Home (Hỗ trợ trang chủ ứng dụng).

  4. Trong trường URL của trang chủ ứng dụng, hãy thêm URL. Giá trị này thường giống nhau URL dưới dạng URL ứng dụng. URL này được gọi cho Sự kiện APP_HOME.

  5. Nhấp vào Lưu.

Java

  1. Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn > Sản phẩm khác > Google Workspace > Thư viện sản phẩm > API Google Chat.

    Truy cập API Google Chat

  2. Nhấp vào Manage (Quản lý), rồi nhấp vào thẻ Configuration (Cấu hình).

  3. Chọn hộp đánh dấu Support App Home (Hỗ trợ trang chủ ứng dụng).

  4. Trong trường URL của trang chủ ứng dụng, hãy thêm URL. Giá trị này thường giống nhau URL dưới dạng URL ứng dụng. URL này được gọi cho Sự kiện APP_HOME.

  5. Nhấp vào Lưu.

Tạo trang chủ ứng dụng

Thẻ màn hình chính của ứng dụng được kích hoạt khi người dùng mở một tin nhắn trực tiếp từ ứng dụng Chat và ứng dụng này có thể được cập nhật dưới dạng phản hồi của một sự kiện tương tác như nhấp vào nút, gửi biểu mẫu hoặc đóng hộp thoại.

Trong ví dụ sau, ứng dụng Chat hiển thị thẻ màn hình chính của ứng dụng ban đầu cho thấy thời gian tạo thẻ và nút. Khi người dùng nhấp vào nút đó, ứng dụng Chat sẽ trả về một thẻ đã cập nhật cho thấy thời gian tạo thẻ mới.

Tạo thẻ ban đầu cho trang chủ ứng dụng

Để tạo trang chủ ứng dụng, ứng dụng Chat phải xử lý APP_HOME sự kiện tương tác và trả về một bản sao của RenderActions với thao tác điều hướng pushCard.

Python

python/app-home/main.py
@app.route('/', methods=['POST'])
def post() -> Mapping[str, Any]:
  """Handle requests from Google Chat

  Returns:
      Mapping[str, Any]: the response
  """
  event = request.get_json()
  match event['chat'].get('type'):

    case 'APP_HOME':
      # App home is requested
      body = { "action": { "navigations": [{
        "pushCard": get_home_card()
      }]}}

    case 'SUBMIT_FORM':
      # The update button from app home is clicked
      event_object = event.get('commonEventObject')
      if event_object is not None:
        if 'update_app_home' == event_object.get('invokedFunction'):
          body = update_app_home()

    case _:
      # Other response types are not supported
      body = {}

  return json.jsonify(body)


def get_home_card() -> Mapping[str, Any]:
  """Create the app home card

  Returns:
      Mapping[str, Any]: the card
  """
  return { "sections": [{ "widgets": [
    { "textParagraph": {
      "text": "Here is the app home 🏠 It's " +
        datetime.datetime.now().isoformat()
    }},
    { "buttonList": { "buttons": [{
      "text": "Update app home",
      "onClick": { "action": {
        "function": "update_app_home"
      }}
    }]}}
  ]}]}

Apps Script

Triển khai hàm onAppHome được gọi sau tất cả các sự kiện APP_HOME:

Ví dụ này gửi thông báo thẻ bằng cách quay lại tệp JSON của thẻ. Bạn cũng có thể sử dụng Dịch vụ thẻ Apps Script.

apps-script/app-home/app-home.gs
/**
 * Responds to a APP_HOME event in Google Chat.
 */
function onAppHome() {
  return { action: { navigations: [{
    pushCard: getHomeCard()
  }]}};
}

/**
 * Returns the app home card.
 */
function getHomeCard() {
  return { sections: [{ widgets: [
    { textParagraph: {
      text: "Here is the app home 🏠 It's " + new Date().toTimeString()
    }},
    { buttonList: { buttons: [{
      text: "Update app home",
      onClick: { action: {
        function: "updateAppHome"
      }}
    }]}}
  ]}]};
}

Node.js

node/app-home/index.js
app.post('/', async (req, res) => {
  let event = req.body.chat;

  let body = {};
  if (event.type === 'APP_HOME') {
    // App home is requested
    body = { action: { navigations: [{
      pushCard: getHomeCard()
    }]}}
  } else if (event.type === 'SUBMIT_FORM') {
    // The update button from app home is clicked
    commonEvent = req.body.commonEventObject;
    if (commonEvent && commonEvent.invokedFunction === 'updateAppHome') {
      body = updateAppHome()
    }
  }

  return res.json(body);
});

// Create the app home card
function getHomeCard() {
  return { sections: [{ widgets: [
    { textParagraph: {
      text: "Here is the app home 🏠 It's " + new Date().toTimeString()
    }},
    { buttonList: { buttons: [{
      text: "Update app home",
      onClick: { action: {
        function: "updateAppHome"
      }}
    }]}}
  ]}]};
}

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java
/**
 * Process Google Chat events
 *
 * @param event Event from chat.
 * @return GenericJson
 * @throws Exception
 */
@PostMapping("/")
@ResponseBody
public GenericJson onEvent(@RequestBody JsonNode event) throws Exception {
  switch (event.at("/chat/type").asText()) {
    case "APP_HOME":
      // App home is requested
      GenericJson navigation = new GenericJson();
      navigation.set("pushCard", getHomeCard());

      GenericJson action = new GenericJson();
      action.set("navigations", List.of(navigation));

      GenericJson response = new GenericJson();
      response.set("action", action);
      return response;
    case "SUBMIT_FORM":
      // The update button from app home is clicked
      if (event.at("/commonEventObject/invokedFunction").asText().equals("updateAppHome")) {
        return updateAppHome();
      }
  }

  return new GenericJson();
}

// Create the app home card
GoogleAppsCardV1Card getHomeCard() {
  GoogleAppsCardV1TextParagraph textParagraph = new GoogleAppsCardV1TextParagraph();
  textParagraph.setText("Here is the app home 🏠 It's " + new Date());

  GoogleAppsCardV1Widget textParagraphWidget = new GoogleAppsCardV1Widget();
  textParagraphWidget.setTextParagraph(textParagraph);

  GoogleAppsCardV1Action action = new GoogleAppsCardV1Action();
  action.setFunction("updateAppHome");

  GoogleAppsCardV1OnClick onClick = new GoogleAppsCardV1OnClick();
  onClick.setAction(action);

  GoogleAppsCardV1Button button = new GoogleAppsCardV1Button();
  button.setText("Update app home");
  button.setOnClick(onClick);

  GoogleAppsCardV1ButtonList buttonList = new GoogleAppsCardV1ButtonList();
  buttonList.setButtons(List.of(button));

  GoogleAppsCardV1Widget buttonListWidget = new GoogleAppsCardV1Widget();
  buttonListWidget.setButtonList(buttonList);

  GoogleAppsCardV1Section section = new GoogleAppsCardV1Section();
  section.setWidgets(List.of(textParagraphWidget, buttonListWidget));

  GoogleAppsCardV1Card card = new GoogleAppsCardV1Card();
  card.setSections(List.of(section));

  return card;
}

Cập nhật thẻ trên màn hình chính của ứng dụng

Nếu thẻ trang chủ ban đầu của ứng dụng chứa các tiện ích tương tác, chẳng hạn như nút hoặc lựa chọn đầu vào, ứng dụng Chat phải xử lý các sự kiện tương tác có liên quan bằng cách trả về một bản sao của RenderActions bằng cách điều hướng updateCard. Để tìm hiểu thêm về cách xử lý quảng cáo tương tác tiện ích, xem Xử lý thông tin do người dùng nhập.

Python

python/app-home/main.py
def update_app_home() -> Mapping[str, Any]:
  """Update the app home

  Returns:
      Mapping[str, Any]: the update card render action
  """
  return { "renderActions": { "action": { "navigations": [{
    "updateCard": get_home_card()
  }]}}}

Apps Script

Ví dụ này gửi thông báo thẻ bằng cách quay lại tệp JSON của thẻ. Bạn cũng có thể sử dụng Dịch vụ thẻ Apps Script.

apps-script/app-home/app-home.gs
/**
 * Updates the home app.
 */
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}};
}

Node.js

node/app-home/index.js
// Update the app home
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}}
};

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java
// Update the app home
GenericJson updateAppHome() {
  GenericJson navigation = new GenericJson();
  navigation.set("updateCard", getHomeCard());

  GenericJson action = new GenericJson();
  action.set("navigations", List.of(navigation));

  GenericJson renderActions = new GenericJson();
  renderActions.set("action", action);

  GenericJson response = new GenericJson();
  response.set("renderActions", renderActions);
  return response;
}

Các điểm hạn chế

Nhìn chung, navigation là không dùng được cho ứng dụng nhắn tin. Bạn không thể trả về một chồng thẻ. Chỉ pushCard (cho câu trả lời ban đầu) và updateCard (cho thông tin cập nhật) dành cho ứng dụng Chat.