Создайте домашнюю страницу для приложения Google Chat

На этой странице объясняется, как создать домашнюю страницу для вашего приложения Google Chat. Главная страница приложения — это настраиваемый интерфейс карточки, который приложение Chat отправляет пользователю, когда он открывает прямое сообщение с помощью приложения Chat.

Домашняя карточка приложения с двумя виджетами.

Например, вы можете настроить сообщение на главной карточке приложения, включив в него советы по взаимодействию с приложением Chat с помощью команд с косой чертой . Для конечных пользователей главная страница приложения доступна только в прямом сообщении приложения Chat, если разработчик приложения включил эту функцию.


Используйте конструктор карточек для разработки и предварительного просмотра карточных сообщений JSON для приложений чата:

Откройте конструктор карточек

Предварительные условия

Питон

Приложение Google Chat с интерактивными функциями. Чтобы создать интерактивное приложение чата с использованием службы HTTP, выполните это краткое руководство .

Скрипт приложений

Приложение Google Chat с интерактивными функциями. Чтобы создать интерактивное приложение чата с помощью Apps Script, выполните это краткое руководство .

Node.js

Приложение Google Chat с интерактивными функциями. Чтобы создать интерактивное приложение чата с использованием службы HTTP, выполните это краткое руководство .

Ява

Приложение Google Chat с интерактивными функциями. Чтобы создать интерактивное приложение чата с использованием службы HTTP, выполните это краткое руководство .

Настройте API чата

Для поддержки приложения Home вам необходимо обновить конфигурацию Chat API в консоли Google Cloud.

Питон

  1. В консоли Google Cloud выберите Меню > продукты > Google Workspace > Библиотека продуктов > Google Chat API .

    Перейти к API чата Google

  2. Нажмите «Управление» , а затем перейдите на вкладку «Конфигурация» .

  3. Установите флажок «Домашняя страница приложения поддержки» .

  4. В поле «Домашний URL-адрес приложения» добавьте URL-адрес. Обычно это значение совпадает с URL-адресом приложения . Этот URL-адрес вызывается для событий APP_HOME .

  5. Нажмите Сохранить .

Скрипт приложений

  1. В консоли Google Cloud выберите Меню > продукты > Google Workspace > Библиотека продуктов > Google Chat API .

    Перейти к API чата Google

  2. Нажмите «Управление» , а затем перейдите на вкладку «Конфигурация» .

  3. Установите флажок «Домашняя страница приложения поддержки» .

  4. Нажмите Сохранить .

Node.js

  1. В консоли Google Cloud выберите Меню > продукты > Google Workspace > Библиотека продуктов > Google Chat API .

    Перейти к API чата Google

  2. Нажмите «Управление» , а затем перейдите на вкладку «Конфигурация» .

  3. Установите флажок «Домашняя страница приложения поддержки» .

  4. В поле «Домашний URL-адрес приложения» добавьте URL-адрес. Обычно это значение совпадает с URL-адресом приложения . Этот URL-адрес вызывается для событий APP_HOME .

  5. Нажмите Сохранить .

Ява

  1. В консоли Google Cloud выберите Меню > продукты > Google Workspace > Библиотека продуктов > Google Chat API .

    Перейти к API чата Google

  2. Нажмите «Управление» , а затем перейдите на вкладку «Конфигурация» .

  3. Установите флажок «Домашняя страница приложения поддержки» .

  4. В поле «Домашний URL-адрес приложения» добавьте URL-адрес. Обычно это значение совпадает с URL-адресом приложения . Этот URL-адрес вызывается для событий APP_HOME .

  5. Нажмите Сохранить .

Создайте домашнюю страницу приложения

Домашняя карточка приложения запускается, когда пользователь открывает прямое сообщение из приложения «Чат», и ее можно обновить в ответ на интерактивное событие, такое как нажатие кнопки, отправка формы или закрытие диалогового окна.

В следующем примере приложение Chat отображает начальную домашнюю карточку приложения, на которой отображается время создания карточки, а также кнопка. Когда пользователь нажимает кнопку, приложение Chat возвращает обновленную карточку, на которой отображается время создания обновленной карточки.

Создайте начальную карточку для главной страницы приложения.

Чтобы создать домашнюю страницу приложения, приложение Chat должно обрабатывать события взаимодействия APP_HOME и возвращать экземпляр RenderActions с навигацией pushCard .

Питон

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"
      }}
    }]}}
  ]}]}

Скрипт приложений

Реализуйте функцию onAppHome , которая вызывается после всех событий APP_HOME :

В этом примере отправляется карточное сообщение, возвращая card JSON . Вы также можете использовать сервис карточек 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

узел/приложение-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/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;
}

Обновить домашнюю карточку приложения

Если ваша первоначальная домашняя карточка приложения содержит интерактивные виджеты, такие как кнопки или средства выбора, ваше приложение Chat должно обрабатывать соответствующие события взаимодействия, возвращая экземпляр RenderActions с навигацией updateCard . Дополнительные сведения об работе с интерактивными виджетами см. в разделе Обработка информации, введенной пользователями .

Питон

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()
  }]}}}

Скрипт приложений

В этом примере отправляется карточное сообщение, возвращая card JSON . Вы также можете использовать сервис карточек Apps Script .

приложения-скрипт/app-home/app-home.gs
/**
 * Updates the home app.
 */
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}};
}

Node.js

узел/приложение-home/index.js
// Update the app home
function updateAppHome() {
  return { renderActions: { action: { navigations: [{
    updateCard: getHomeCard()
  }]}}}
};

Ява

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;
}

Ограничения

Как правило, navigation недоступна для приложений чата. Вы не можете вернуть стопку карт. Для приложений чата доступны только pushCard (для первоначального ответа) и updateCard (для обновлений).