Эта страница переведена с помощью Cloud Translation API.

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

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

Домашняя карточка приложения с двумя виджетами. — **Рисунок 1** : Пример главной страницы, которая отображается в личных сообщениях в приложении «Чат».

На главной странице приложения вы можете делиться советами по взаимодействию с приложением «Чат» или предоставлять пользователям доступ к внешним сервисам или инструментам из приложения «Чат» и разрешать им их использование.

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

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

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

Node.js

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

Python

Java

Apps Script

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

Настройте главный экран вашего приложения «Чат».

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

Чтобы обновить параметры конфигурации в консоли Google Cloud, выполните следующие действия:

В > Просмотреть все продукты > Другие продукты Google > Google Workspace > Библиотека продуктов > Google Chat API .
Перейдите на Google Chat API
Нажмите «Управление» , а затем перейдите на вкладку «Конфигурация» .
В разделе «Интерактивные функции» перейдите в раздел «Функциональность» и выберите «Домашняя страница приложения поддержки» .
Если ваше приложение для чата использует HTTP-сервис, перейдите в настройки подключения и укажите конечную точку в поле «URL-адрес домашней страницы приложения» . Вы можете использовать тот же URL-адрес, который указали в поле «URL-адрес конечной точки HTTP» .
Нажмите « Сохранить ».

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

Когда пользователь открывает главный экран приложения, ваше приложение чата должно обработать событие взаимодействия APP_HOME , вернув экземпляр RenderActions с навигацией pushCard и объектом Card . Для создания интерактивного интерфейса карта может содержать интерактивные виджеты, такие как кнопки или текстовые поля ввода, которые приложение чата может обрабатывать и на которые может отвечать, добавляя дополнительные карты или диалоговое окно.

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

Node.js

node/app-home/index.js

Посмотреть на GitHub

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

Python

python/app-home/main.py

Посмотреть на GitHub

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

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java

Посмотреть на GitHub

// Process Google Chat events
@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() {
  return new GoogleAppsCardV1Card()
    .setSections(List.of(new GoogleAppsCardV1Section()
      .setWidgets(List.of(
        new GoogleAppsCardV1Widget()
          .setTextParagraph(new GoogleAppsCardV1TextParagraph()
            .setText("Here is the app home 🏠 It's " + new Date())),
        new GoogleAppsCardV1Widget()
          .setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(new GoogleAppsCardV1Button()
            .setText("Update app home")
            .setOnClick(new GoogleAppsCardV1OnClick()
              .setAction(new GoogleAppsCardV1Action()
                .setFunction("updateAppHome"))))))))));
}

Apps Script

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

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

apps-script/app-home/app-home.gs

Посмотреть на GitHub

/**
 * 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"
      }}
    }]}}
  ]}]};
}

Реагируйте на действия, происходящие на главной странице приложения.

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

В предыдущем примере на начальном экране приложения отображалась кнопка. При каждом нажатии пользователем этой кнопки срабатывает событие взаимодействия CARD_CLICKED , которое запускает функцию updateAppHome для обновления экрана приложения, как показано в следующем коде:

Node.js

node/app-home/index.js

Посмотреть на GitHub

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

Python

python/app-home/main.py

Посмотреть на GitHub

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

Java

java/app-home/src/main/java/com/google/chat/app/home/App.java

Посмотреть на GitHub

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

Apps Script

apps-script/app-home/app-home.gs

Посмотреть на GitHub

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

Открыть диалоги

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

Диалоговое окно с различными виджетами. — **Рисунок 3** : Диалоговое окно, предлагающее пользователю добавить контакт.

Чтобы открыть диалоговое окно с главного экрана приложения, обработайте соответствующее событие взаимодействия, вернув renderActions с навигацией updateCard , содержащей объект Card . В следующем примере приложение «Чат» реагирует на нажатие кнопки на карточке главного экрана приложения, обрабатывая событие взаимодействия CARD_CLICKED и открывая диалоговое окно:

{ renderActions: { action: { navigations: [{ updateCard: { sections: [{
  header: "Add new contact",
  widgets: [{ "textInput": {
    label: "Name",
    type: "SINGLE_LINE",
    name: "contactName"
  }}, { textInput: {
    label: "Address",
    type: "MULTIPLE_LINE",
    name: "address"
  }}, { decoratedText: {
    text: "Add to favorites",
    switchControl: {
      controlType: "SWITCH",
      name: "saveFavorite"
    }
  }}, { decoratedText: {
    text: "Merge with existing contacts",
    switchControl: {
      controlType: "SWITCH",
      name: "mergeContact",
      selected: true
    }
  }}, { buttonList: { buttons: [{
    text: "Next",
    onClick: { action: { function: "openSequentialDialog" }}
  }]}}]
}]}}]}}}

Для закрытия диалога обработайте следующие события взаимодействия:

CLOSE_DIALOG : Закрывает диалоговое окно и возвращает на главную страницу приложения «Чат».
CLOSE_DIALOG_AND_EXECUTE : Закрывает диалоговое окно и обновляет главную страницу приложения.

В следующем примере кода используется CLOSE_DIALOG для закрытия диалогового окна и возврата на главную страницу приложения:

{ renderActions: { action: {
  navigations: [{ endNavigation: { action: "CLOSE_DIALOG" }}]
}}}

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

Посмотрите примеры приложений для чата , использующих главную страницу приложения.
Открывайте диалоги и отвечайте на них .

Создайте домашнюю страницу для приложения Google Chat Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

Node.js

Python

Java

Apps Script

Настройте главный экран вашего приложения «Чат».

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

Node.js

Python

Java

Apps Script

Реагируйте на действия, происходящие на главной странице приложения.

Node.js

Python

Java

Apps Script

Открыть диалоги

Связанные темы

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