Crea tarjetas para las apps de Google Chat

En esta página, se describe cómo compilar los componentes y la estructura de una tarjeta. Las tarjetas son interfaces de usuario que las apps de Google Chat pueden usar para presentar y recopilar información de los usuarios de Chat. Las apps de Chat pueden compilar y mostrar tarjetas en las siguientes interfaces:

  • Mensajes que contienen una o más tarjetas
  • Páginas principales, que es una tarjeta que aparece en la pestaña Página principal en los mensajes directos con la app de Chat.
  • Diálogos, que son tarjetas que se abren en una ventana nueva desde mensajes y páginas principales

En esta página, obtendrás información sobre los siguientes componentes de una tarjeta:

  • Encabezados, que suelen contener el título de una tarjeta o sección de tarjeta.
  • Secciones, que forman el cuerpo principal de la tarjeta, incluidos los widgets y otros elementos interactivos. En una sección de tarjeta, puedes agregar más estructura a la tarjeta, incluidas columnas y cuadrículas.
  • Pie de página fijo, que aparece en la parte inferior de los diálogos para mostrar elementos persistentes de la IU, como botones.

Requisitos previos

Una app de Google Chat configurada para recibir interacciones de los usuarios y responder a ellas Para crear una app de Chat interactiva, completa una de las siguientes guías de inicio rápido según la arquitectura de la app que quieras usar:

Usa el Creador de tarjetas para diseñar y obtener una vista previa de los mensajes y las interfaces de usuario de las apps de Chat:

Abre el Creador de tarjetas

Agregar un encabezado

El widget CardHeader representa el encabezado de una tarjeta. Los encabezados pueden incluir un título, un subtítulo y una imagen de avatar para tu tarjeta.

Este es un ejemplo de un CardHeader:

Agrega una o más secciones de tarjetas

El widget CardSection es un contenedor de alto nivel dentro de una tarjeta. Usa las secciones de tarjetas para agrupar widgets dentro de una tarjeta. Para cada sección de tarjeta, puedes incluir un encabezado y uno o más widgets.

A continuación, se muestra un ejemplo de un CardSection que contiene dos widgets textParagraph:

Agrega un divisor horizontal entre los widgets

El widget divider muestra una línea horizontal que abarca el ancho de una tarjeta entre widgets apilados verticalmente. La línea es un divisor visual que ayuda a los usuarios a distinguir entre un widget y otro, lo que facilita el análisis y la comprensión de las tarjetas.

La siguiente es una tarjeta que consta de un widget divider entre otros tipos de widgets:

Agregar columnas

El widget columns muestra hasta 2 columnas en una tarjeta. Puedes agregar widgets a cada columna; los widgets aparecen en el orden en que se especifican. Para incluir más de 2 columnas o usar filas, usa el widget grid.

La altura de cada columna se determina según la columna más alta. Por ejemplo, si la primera columna es más alta que la segunda, ambas columnas tendrán la altura de la primera. Debido a que cada columna puede contener una cantidad diferente de widgets, no puedes definir filas ni alinear widgets entre las columnas.

En el siguiente ejemplo, se muestra una tarjeta con un widget columns que incluye 2 columnas de texto. Para ver solo el diseño de las columnas y contraer la muestra de código, haz clic en Contraer. Cuando el espacio es limitado, como en el siguiente ejemplo, la segunda columna se ajusta debajo de la primera.

Define el ancho de la columna

Las columnas se muestran una al lado de la otra. Puedes personalizar el ancho de cada columna con el campo horizontalSizeStyle. Si el ancho de la pantalla del usuario es demasiado estrecho, la segunda columna se ajusta debajo de la primera:

  • En la Web, la segunda columna se ajusta si el ancho de la pantalla es menor o igual que 480 píxeles.
  • En los dispositivos iOS, la segunda columna se ajusta si el ancho de la pantalla es inferior o igual a 300 pt.
  • En los dispositivos Android, la segunda columna se ajusta si el ancho de la pantalla es inferior o igual a 320 dp.

En el siguiente ejemplo, se muestra una tarjeta con un widget columns que incluye 2 columnas de texto con 4 elementos en las columnas. Cada elemento de las columnas tiene aplicado horizontalSizeStyle para manipular la cantidad de espacio que el texto ocupa en cada columna:

  • El primer párrafo de texto usa FILL_MINIMUM_SPACE para llenar no más del 30% del ancho de la tarjeta.
  • El segundo párrafo de texto usa FILL_AVAILABLE_SPACE para llenar el espacio disponible en el ancho de la tarjeta. En este ejemplo, ocupa el 70% del ancho de la tarjeta.
  • El tercer párrafo de texto no define horizontalSizeStyle, por lo que, de forma predeterminada, ocupa el espacio disponible de la tarjeta.
  • El cuarto párrafo de texto usa FILL_MINIMUM_SPACE para ocupar no más del 30% del ancho de la tarjeta.

Define la alineación horizontal de una columna

Puedes alinear los widgets de forma horizontal a la izquierda, a la derecha o al centro de una columna definiendo el campo horizontalAlignment. Si el campo horizontalAlignment no está definido, los widgets se alinean a la izquierda en una columna.

En el siguiente ejemplo, se alinea horizontalmente el texto de una columna a la izquierda:

En el siguiente ejemplo, se alinea horizontalmente el texto dentro de una columna en el centro:

En el siguiente ejemplo, se alinea horizontalmente el texto dentro de una columna a la derecha:

Define la alineación vertical de una columna.

Puedes alinear los widgets de forma vertical en la parte superior, inferior o central de una columna definiendo el campo verticalAlignment. Si el campo verticalAlignment no está definido, los widgets de una columna se alinean en la parte superior.

En el siguiente ejemplo, se alinea verticalmente el texto dentro de una columna en la parte superior:

En el siguiente ejemplo, se alinea el texto verticalmente en el centro de una columna:

En el siguiente ejemplo, se alinea el texto verticalmente dentro de una columna en la parte inferior:

Agrega una cuadrícula para mostrar una colección de elementos

El widget grid muestra una cuadrícula con una colección de elementos. Una cuadrícula admite cualquier cantidad de columnas y elementos. La cantidad de filas se determina dividiendo los elementos por las columnas. Una cuadrícula con 10 elementos y 2 columnas tiene 5 filas. Una cuadrícula con 11 elementos y 2 columnas tiene 6 filas.

El widget admite sugerencias, que ayudan a los usuarios a ingresar datos uniformes, y acciones de cambio, que son Actions que se ejecutan cuando se produce un cambio en el campo de entrada de texto, como cuando un usuario agrega o borra texto.

En el siguiente ejemplo, se muestra una cuadrícula de 2 columnas con un solo elemento:

Para definir dónde aparece el texto con una imagen en una cuadrícula, puedes especificar el campo gridItemLayout. Este campo te permite definir si el texto aparece arriba o abajo del elemento en la cuadrícula. Si gridItemLayout no está definido, el texto aparece de forma predeterminada debajo del elemento en la cuadrícula.

El siguiente ejemplo es una cuadrícula de tres columnas con texto y una imagen en cada cuadrícula. La primera cuadrícula define el texto que aparecerá sobre la imagen, la segunda define el texto que aparecerá debajo de la imagen y la tercera no define la posición del texto.

Cómo agregar un borde a una cuadrícula o columna

Para los elementos que aparecen en un widget column o grid, puedes agregar un borde a estos elementos de la IU definiendo un campo borderType y un campo borderStyle. Si no se define ningún campo borderStyle, no se mostrará ningún borde de forma predeterminada. Puedes definir un borderType para aplicarlo a todos los elementos de un widget o aplicar el diseño a cada elemento individual de un widget.

En el siguiente ejemplo, se muestra una cuadrícula de 2 columnas con una imagen en cada cuadrícula, en la que se definió el tipo, el estilo y el color del borde para que se apliquen a todos los elementos de la cuadrícula.

En el siguiente ejemplo, se muestra una cuadrícula de 3 columnas con una imagen en cada cuadrícula y el estilo y el tipo de borde definidos de forma individual. La primera imagen tiene un borde definido como STROKE. La segunda imagen tiene un borde definido como NO_BORDER. La tercera imagen no tiene un borde definido.

Cómo agregar un carrusel

El widget Carousel muestra una colección de objetos CarouselCard que se pueden desplazar dentro y fuera de la pantalla. Puedes agregar varios widgets a cada CarouselCard.

El widget CardFixedFooter representa el pie de página de un mensaje de diálogo enviado por una app de Chat. Los pies de página pueden incluir un botón principal y un botón secundario.

El widget CardFixedFooter solo está disponible para los diálogos.

A continuación, se muestra un ejemplo de un widget CardFixedFooter con dos botones:

Solucionar problemas

Cuando una app de Google Chat o una tarjeta devuelven un error, la interfaz de Chat muestra el mensaje "Se produjo un error". o "No se puede procesar tu solicitud". A veces, la IU de Chat no muestra ningún mensaje de error, pero la app o tarjeta de Chat produce un resultado inesperado; por ejemplo, es posible que no aparezca un mensaje de tarjeta.

Aunque es posible que no se muestre un mensaje de error en la IU de Chat, hay mensajes de error descriptivos y datos de registro disponibles para ayudarte a corregir errores cuando se activa el registro de errores para las apps de Chat. Para obtener ayuda con la visualización, la depuración y la corrección de errores, consulta Cómo solucionar y corregir errores de Google Chat.