Как создавать карточки для приложений Google Chat

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

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

На этой странице вы узнаете о следующих компонентах карточки:

  • Заголовки, которые обычно содержат название карточки или ее раздела.
  • Разделы, которые составляют основную часть карточки, включая виджеты и другие интерактивные элементы. В раздел карточки можно добавить дополнительные элементы, например столбцы и сетки.
  • Фиксированные нижние колонтитулы, которые появляются в нижней части диалоговых окон для отображения постоянных элементов пользовательского интерфейса, таких как кнопки.

Требования

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

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

Как открыть Конструктор карточек

Добавление заголовка

Виджет CardHeader представляет заголовок карточки. Заголовок может включать название, подзаголовок и аватар.

Ниже приведен пример CardHeader.

Добавьте один или несколько разделов карточек

Виджет CardSection – это контейнер высокого уровня в карточке. Разделы карточки используются для группировки виджетов в карточке. В каждый раздел карточки можно добавить заголовок и один или несколько виджетов.

Ниже приведен пример CardSection, содержащего два виджета textParagraph.

Добавить горизонтальный разделитель между виджетами

Виджет divider показывает горизонтальную линию, которая разделяет виджеты, расположенные вертикально. Линия представляет собой визуальный разделитель, который помогает пользователям различать один виджет от другого, облегчая сканирование и понимание карточек.

Ниже показана карточка, состоящая из виджета divider между другими типами виджетов:

Добавить столбцы

Виджет columns показывает до двух столбцов на карточке. В каждый столбец можно добавить виджеты, которые будут показываться в указанном порядке. Если вам нужно больше двух столбцов или вы хотите использовать строки, добавьте виджет grid.

Высота каждого столбца определяется более высоким столбцом. Например, если первый столбец выше второго, то оба столбца будут иметь высоту первого. Поскольку в каждом столбце может быть разное количество виджетов, вы не можете задавать строки или выравнивать виджеты между столбцами.

В примере ниже показана карточка с виджетом columns, содержащим два столбца текста. Чтобы скрыть пример кода и оставить только макет столбцов, нажмите Свернуть. Если места недостаточно, как в примере ниже, второй столбец переносится под первый.

Как задать ширину столбца

Столбцы показываются рядом друг с другом. Ширину каждого столбца можно настроить с помощью поля horizontalSizeStyle. Если экран пользователя слишком узкий, второй столбец переносится под первый:

  • В веб-версии второй столбец переносится, если ширина экрана не превышает 480 пикселей.
  • На устройствах iOS второй столбец переносится, если ширина экрана не превышает 300 pt.
  • На устройствах Android второй столбец переносится, если ширина экрана меньше или равна 320 dp.

В примере ниже показана карточка с виджетом columns, в котором есть два столбца текста с четырьмя элементами в них. Для каждого элемента в столбцах применяется свойство horizontalSizeStyle, чтобы управлять тем, сколько места занимает текст в каждом столбце:

  • Первый абзац текста использует FILL_MINIMUM_SPACE, чтобы заполнить не более 30 % ширины карточки.
  • Второй абзац использует FILL_AVAILABLE_SPACE, чтобы заполнить доступное пространство по ширине карточки. В этом примере он занимает 70 % ширины карточки.
  • В третьем абзаце текста не задано значение horizontalSizeStyle, поэтому по умолчанию он заполняет доступное пространство карточки.
  • Четвертый абзац использует FILL_MINIMUM_SPACE, чтобы заполнить не более 30 % ширины карточки.

Определите горизонтальное выравнивание столбца.

Виджеты можно выравнивать по горизонтали (по левому краю, по правому краю или по центру столбца). Для этого используется поле horizontalAlignment. Если поле horizontalAlignment не определено, виджеты выравниваются по левому краю в столбце.

В следующем примере текст в столбце выравнивается по левому краю:

В следующем примере текст в столбце выравнивается по центру:

В следующем примере текст в столбце выравнивается по правому краю:

Как задать вертикальное выравнивание столбца

Вы можете выровнять виджеты по вертикали (по верхнему краю, по нижнему краю или по центру столбца), задав значение для поля verticalAlignment. Если поле verticalAlignment не определено, виджеты в столбце выравниваются по верхнему краю.

В следующем примере текст в столбце выравнивается по верхнему краю:

В следующем примере текст в столбце выравнивается по центру по вертикали:

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

Добавьте сетку, чтобы показать коллекцию объектов.

Виджет grid показывает сетку с набором элементов. Сетка поддерживает любое количество столбцов и элементов. Количество строк определяется делением количества элементов на количество столбцов. Сетка с 10 элементами и двумя столбцами содержит пять строк. Сетка с 11 элементами и двумя столбцами содержит шесть строк.

Виджет поддерживает подсказки, которые помогают пользователям вводить данные в едином формате, и действия при изменении, которые представляют собой Actions, выполняемые при изменении в поле ввода текста, например при добавлении или удалении текста пользователем.

В примере ниже показана сетка из двух столбцов с одним элементом:

Чтобы определить, где в сетке будет показываться текст с изображением, можно указать поле gridItemLayout. Это поле позволяет определить, где будет отображаться текст – над или под элементом в сетке. Если значение gridItemLayout не задано, текст по умолчанию показывается под объектом в сетке.

В примере ниже показана сетка из трех столбцов с текстом и изображением в каждой ячейке. Первая сетка определяет текст, который будет показываться над изображением, вторая – под изображением, а третья не определяет положение текста.

Как добавить границу к сетке или столбцу

Для элементов, которые появляются в виджете column или grid, можно добавить границу, определив поля borderType и borderStyle. Если поле borderStyle не задано, по умолчанию рамка не показывается. Вы можете определить borderType, который будет применяться ко всем элементам виджета, или применить стиль к каждому отдельному элементу виджета.

В следующем примере показана сетка из двух столбцов с изображением в каждом. Тип, стиль и цвет границы заданы для всех элементов сетки.

В примере ниже показана сетка из трех столбцов с изображением в каждой ячейке и индивидуально заданными стилем и типом границы. Для первого изображения задана граница STROKE. На втором изображении граница задана как NO_BORDER. На третьем изображении границы не определены.

Добавить карусель

Виджет Carousel показывает набор объектов CarouselCard, которые можно прокручивать на экране. На каждый CarouselCard можно добавить несколько виджетов.

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

Виджет CardFixedFooter доступен только для диалоговых окон.

Ниже приведен пример виджета CardFixedFooter с двумя кнопками:

Устранение неполадок

Когда приложение Google Chat или карточка возвращает ошибку, в интерфейсе Chat появляется сообщение "Что-то пошло не так". или "Не удалось обработать запрос". Иногда в интерфейсе Chat не появляется сообщение об ошибке, но приложение Chat или карточка выдает неожиданный результат, например сообщение карточки может не появиться.

Хотя в интерфейсе Chat может не отображаться сообщение об ошибке, описательные сообщения об ошибках и данные журнала доступны, чтобы помочь вам исправить ошибки, когда включено ведение журнала ошибок для приложений Chat. Подробнее о том, как устранять неполадки и ошибки Google Chat…