Criar cards para apps do Google Chat

Esta página descreve como criar os componentes e a estrutura de um card. Os cards são interfaces de usuário que os apps do Google Chat podem usar para apresentar e coletar informações dos usuários do Chat. Os apps de chat podem criar e mostrar cards nas seguintes interfaces:

  • Mensagens que contêm um ou mais cards.
  • Páginas iniciais, que é um card que aparece na guia Início das mensagens diretas com o app do Chat.
  • Caixas de diálogo, que são cards abertos em uma nova janela de mensagens e páginas iniciais.

Nesta página, você vai aprender sobre os seguintes componentes de um card:

  • Cabeçalhos, que geralmente contêm o título de um card ou de uma seção de cards.
  • Seções, que formam o corpo principal do card, incluindo widgets e outros elementos interativos. Em uma seção de cartão, você pode adicionar mais estrutura ao cartão, incluindo colunas e grades.
  • Rodapés fixos, que aparecem na parte de baixo das caixas de diálogo para mostrar elementos persistentes da interface, como botões.

Pré-requisitos

Um app do Google Chat configurado para receber e responder a eventos de interação. Para criar um app do Chat interativo, conclua um dos seguintes guias de início rápido com base na arquitetura do app que você quer usar:

Use o Card Builder para criar e visualizar mensagens e interfaces de usuário para apps do Chat:

Abra o Card Builder

Adicionar um cabeçalho

O widget CardHeader representa o cabeçalho de um card. Os cabeçalhos podem incluir um título, um subtítulo e uma imagem de avatar para o card.

Confira abaixo um exemplo de CardHeader:

Adicionar uma ou mais seções de cards

O widget CardSection é um contêiner de alto nível em um card. Você usa seções de cartão para agrupar widgets em um cartão. Em cada seção de card, é possível incluir um cabeçalho e um ou mais widgets.

Confira abaixo um exemplo de CardSection que contém dois widgets textParagraph:

Adicionar um divisor horizontal entre widgets

O widget divider mostra uma linha horizontal que abrange a largura de um card entre widgets empilhados verticalmente. A linha é um divisor visual que ajuda os usuários a distinguir um widget de outro, facilitando a leitura e o entendimento dos cards.

Confira a seguir um card com um widget divider entre outros tipos de widgets:

Adicionar colunas

O widget columns mostra até duas colunas em um card. É possível adicionar widgets a cada coluna. Eles aparecem na ordem em que são especificados. Para incluir mais de duas colunas ou usar linhas, use o widget grid.

A altura de cada coluna é determinada pela coluna mais alta. Por exemplo, se a primeira coluna for mais alta que a segunda, ambas terão a altura da primeira. Como cada coluna pode conter um número diferente de widgets, n��o é possível definir linhas ou alinhar widgets entre as colunas.

O exemplo a seguir mostra um card com um widget columns que apresenta duas colunas de texto. Para ver apenas o layout de colunas e fechar o exemplo de código, clique em Recolher. Quando o espaço é limitado, como no exemplo a seguir, a segunda coluna é quebrada abaixo da primeira.

Definir a largura da coluna

As colunas são mostradas lado a lado. É possível personalizar a largura de cada coluna usando o campo horizontalSizeStyle. Se a largura da tela do usuário for muito estreita, a segunda coluna vai aparecer abaixo da primeira:

  • Na Web, a segunda coluna é quebrada se a largura da tela for menor ou igual a 480 pixels.
  • Em dispositivos iOS, a segunda coluna é quebrada se a largura da tela for menor ou igual a 300 pt.
  • Em dispositivos Android, a segunda coluna é quebrada se a largura da tela for menor ou igual a 320 dp.

O exemplo a seguir mostra um card com um widget columns que apresenta duas colunas de texto com quatro itens em cada uma. Cada item nas colunas tem horizontalSizeStyle aplicado para manipular o espaço que o texto preenche em cada coluna:

  • O primeiro parágrafo de texto usa FILL_MINIMUM_SPACE para preencher no máximo 30% da largura do card.
  • O segundo parágrafo de texto usa FILL_AVAILABLE_SPACE para preencher o espaço disponível na largura do card. Neste exemplo, ele preenche 70% da largura do card.
  • O terceiro parágrafo de texto não define horizontalSizeStyle, então ele preenche o espaço disponível do card por padrão.
  • O quarto parágrafo de texto usa FILL_MINIMUM_SPACE para preencher no máximo 30% da largura do card.

Definir o alinhamento horizontal de uma coluna

É possível alinhar widgets horizontalmente à esquerda, à direita ou no centro de uma coluna definindo o campo horizontalAligment. Se o campo horizontalAlignment não estiver definido, os widgets serão alinhados à esquerda em uma coluna.

O exemplo a seguir alinha o texto horizontalmente à esquerda em uma coluna:

O exemplo a seguir alinha horizontalmente o texto no centro de uma coluna:

O exemplo a seguir alinha horizontalmente o texto em uma coluna à direita:

Definir o alinhamento vertical de uma coluna

É possível alinhar widgets verticalmente na parte de cima, de baixo ou no centro de uma coluna definindo o campo verticalAlignment. Se o campo verticalAlignment não estiver definido, os widgets em uma coluna serão alinhados à parte de cima.

O exemplo a seguir alinha verticalmente o texto na parte de cima de uma coluna:

O exemplo a seguir alinha verticalmente o texto no centro de uma coluna:

O exemplo a seguir alinha verticalmente o texto em uma coluna na parte de baixo:

Adicionar uma grade para mostrar uma coleção de itens

O widget grid mostra uma grade com uma coleção de itens. Uma grade aceita qualquer número de colunas e itens. O número de linhas é determinado por itens divididos por colunas. Uma grade com 10 itens e 2 colunas tem 5 linhas. Uma grade com 11 itens e 2 colunas tem 6 linhas.

O widget oferece suporte a sugestões, que ajudam os usuários a inserir dados uniformes, e ações de mudança, que são Actions executadas quando ocorre uma mudança no campo de entrada de texto, como um usuário adicionando ou excluindo texto.

O exemplo a seguir é uma grade de duas colunas com um único item:

Para definir onde o texto aparece com uma imagem em uma grade, especifique o campo gridItemLayout. Esse campo permite definir se o texto aparece acima ou abaixo do item na grade. Se gridItemLayout não estiver definido, o texto vai aparecer abaixo do item na grade.

O exemplo a seguir é uma grade de três colunas com texto e uma imagem em cada grade. A primeira grade define o texto que aparece acima da imagem, a segunda define o texto que aparece abaixo da imagem, e a terceira não define a posição do texto.

Adicionar uma borda a uma grade ou coluna

Para itens que aparecem em um widget column ou grid, é possível adicionar uma borda a esses elementos de interface definindo um campo borderType e um campo borderStyle. Se nenhum campo borderStyle for definido, o padrão será não mostrar borda. Você pode definir um borderType para aplicar a todos os itens de um widget ou aplicar o estilo a cada item individual dentro de um widget.

O exemplo a seguir é uma grade de duas colunas com uma imagem em cada grade em que o tipo, o estilo e a cor da borda foram definidos para serem aplicados a todos os itens dentro da grade.

O exemplo a seguir é uma grade de três colunas com uma imagem em cada grade e o estilo e o tipo de borda definidos individualmente. A primeira imagem tem uma borda definida como STROKE. A segunda imagem tem uma borda definida como NO_BORDER. A terceira imagem não tem borda definida.

Adicionar um carrossel

O widget Carousel mostra uma coleção de objetos CarouselCard que podem ser rolados para dentro e para fora da tela. É possível adicionar vários widgets a cada CarouselCard.

O widget CardFixedFooter representa o rodapé de uma mensagem de caixa de diálogo enviada por um app de chat. Os rodapés podem incluir um botão principal e um botão secundário.

O widget CardFixedFooter está disponível apenas para caixas de diálogo.

Confira a seguir um exemplo de widget CardFixedFooter com dois botões:

Resolver problemas

Quando um app ou card do Google Chat retorna um erro, a interface do Chat mostra a mensagem "Ocorreu um erro". ou "Não foi possível processar sua solicitação". Às vezes, a interface do Chat não mostra nenhuma mensagem de erro, mas o app ou card do Chat produz um resultado inesperado. Por exemplo, uma mensagem do card pode não aparecer.

Embora uma mensagem de erro não apareça na interface do Chat, mensagens de erro descritivas e dados de registro estão disponíveis para ajudar você a corrigir erros quando o registro de erros para apps do Chat está ativado. Para ajuda com a visualização, depuração e correção de erros, consulte Resolver e corrigir erros do Google Chat.