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 crear y mostrar tarjetas en las siguientes interfaces:

  • Mensajes que contienen una o más tarjetas
  • Páginas principales, que son tarjetas que aparecen en la pestaña Página principal de 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, aprenderás 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 tarjetas, puedes agregar más estructura a la tarjeta, incluidas columnas y cuadrículas.
  • Los pie de página fijos, que aparecen en la parte inferior de los diálogos para mostrar elementos de la IU persistentes, como botones

Requisitos previos

Una app de Google Chat configurada para recibir eventos de interacción y responder a ellos 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 Card Builder para diseñar y obtener una vista previa de las interfaces de usuario y los mensajes de las apps de Chat:

Abrir Card Builder

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.

A continuación, se muestra 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. Usas secciones de tarjetas para agrupar widgets dentro de una tarjeta. En cada sección de la 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.

A continuación, se muestra una tarjeta que consta de un widget de 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 está determinada por 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. Como 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.

Cómo definir 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 a 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 menor 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 cada columna. A cada elemento de las columnas se le aplica horizontalSizeStyle para manipular la cantidad de espacio que ocupa el texto en cada columna:

  • El primer párrafo de texto usa FILL_MINIMUM_SPACE para ocupar no más del 30% del ancho de la tarjeta.
  • El segundo párrafo de texto usa FILL_AVAILABLE_SPACE para completar 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 se establece de forma predeterminada para llenar el espacio disponible de la tarjeta.
  • El cuarto párrafo de texto usa FILL_MINIMUM_SPACE para completar no más del 30% del ancho de la tarjeta.

Cómo definir la alineación horizontal de una columna

Puedes alinear los widgets horizontalmente a la izquierda, a la derecha o al centro de una columna definiendo el campo horizontalAligment. 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 dentro de una columna hacia 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 hacia la derecha:

Cómo definir la alineación vertical de una columna

Puedes alinear los widgets verticalmente 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 verticalmente el texto dentro de una columna en el centro:

En el siguiente ejemplo, se alinea verticalmente el texto 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 la cantidad de elementos por la cantidad de 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 on-change, 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 debajo del elemento en la cuadrícula. Si gridItemLayout no está definido, el texto aparecerá de forma predeterminada debajo del elemento en la cuadrícula.

En el siguiente ejemplo, se muestra una cuadrícula de tres columnas con texto y una imagen en cada una. 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

En el caso de 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, se mostrará sin 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 dentro de un widget.

En el siguiente ejemplo, se muestra una cuadrícula de 2 columnas con una imagen en cada una, en la que se definieron 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 una y el tipo y el estilo 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 o una tarjeta de Google Chat muestra un error, la interfaz de Chat muestra un mensaje que dice "Se produjo un error". o "No se pudo procesar tu solicitud". A veces, la IU de Chat no muestra ningún mensaje de error, pero la app o la tarjeta de Chat producen un resultado inesperado. Por ejemplo, es posible que no aparezca un mensaje de la tarjeta.

Si bien 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 para ver, depurar y corregir errores, consulta Cómo solucionar y corregir errores de Google Chat.