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 de usuário interfaces que os apps do Google Chat podem usar para apresentar e coletar informações dos usuários do Chat. Apps de chat podem ser criados e exibir cartões nas seguintes interfaces:

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

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

  • Cabeçalhos, que normalmente contêm o título de um cartão ou card nesta seção.
  • Seções, que formam o corpo principal do card, incluindo widgets e outros elementos interativos. Em um card é possível adicionar mais estrutura ao card, incluindo colunas e grades.
  • Rodapés fixos, que aparecem na parte inferior para exibir elementos persistentes da interface, como botões.

Pré-requisitos

Um app do Google Chat com recursos interativos ativados. Para criar um interativo do Chat, 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 do usuário para apps do Chat:

Abrir o Card Builder

Adicionar um cabeçalho

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

Veja a seguir um exemplo de CardHeader:

Adicionar uma ou mais seções do card

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

Este é um exemplo de CardSection que contém duas textParagraph widgets:

Adicionar um divisor horizontal entre widgets

O Widget divider exibe uma linha horizontal da largura de um cartão entre widgets empilhados verticalmente. A linha é um divisor visual que ajuda os usuários a distinguir entre um widget e outro, tornando os cartões mais fáceis de ler e entender.

Confira abaixo um card que consiste no widget divider entre outros tipos de widgets:

Adicionar colunas

O Widget columns exibe até duas colunas em um card. Você pode adicionar widgets a cada coluna, os widgets aparecem na ordem em que estão especificado. 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 as colunas terão o altura da primeira coluna. 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 2 colunas de texto. Para visualizar apenas o layout de colunas e recolher o código amostra, clique em Recolher. Quando o espaço é restrito, como no exemplo a seguir, a segunda coluna se quebra abaixo da primeira coluna.

Definir a largura da coluna

As colunas são exibidas lado a lado. Você pode personalizar a largura de cada coluna usando o método campo horizontalSizeStyle. Se a largura da tela do usuário for muito estreita, a segunda coluna ficará abaixo da primeiro:

  • Na Web, a segunda coluna é unida se a largura da tela for menor ou igual a 480 pixels.
  • Em dispositivos iOS, a segunda coluna será unida se a largura da tela for menor que ou 300 pontos.
  • Em dispositivos Android, a segunda coluna será unida se a largura da tela for menor que ou igual a 320 dp.

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

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

Definir o alinhamento horizontal de uma coluna

É possível alinhar widgets horizontalmente à esquerda, à direita ou ao centro de uma coluna a definição de campo horizontalAligment. Se o campo horizontalAlignment for indefinido, os widgets serão alinhados ao restante(s) em uma coluna.

O exemplo abaixo alinha horizontalmente o texto de uma coluna à esquerda:

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

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

Definir o alinhamento vertical de uma coluna

Para alinhar widgets verticalmente na parte de cima, de baixo ou no centro de uma coluna, a definição de campo verticalAlignment. Se o campo verticalAlignment for indefinido, os widgets em uma coluna serão alinhados ao topo.

O exemplo abaixo alinha verticalmente o texto de uma coluna com a parte de cima:

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

O exemplo abaixo alinha verticalmente o texto de uma coluna na parte de baixo:

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

O Widget grid exibe uma grade com uma coleção de itens. Uma grade suporta 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 tem seis linhas.

o widget é compatível com sugestões, que ajudam os usuários a inserir dados uniformes; e em ações de mudança, que são Actions executados quando ocorre uma mudança no campo de entrada de texto, como um usuário adicionando ou excluindo texto.

O exemplo abaixo é 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. Este campo permite definir se o texto aparece acima ou abaixo o item na grade. Se gridItemLayout estiver indefinido, o texto será padronizado como aparecem 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 que o texto apareça acima da imagem, a segunda "grade" define o texto que será exibido abaixo da imagem, e a terceira grade 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 ao esses elementos da IU definindo uma Campo borderType e um Campo borderStyle. Se nenhum campo borderStyle for definido, o padrão será sem borda. Você pode defina um borderType para aplicar a todos os itens de um widget ou aplique o estilo a cada item individual em um widget.

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

O exemplo a seguir é uma grade de 3 colunas com uma imagem em cada grade e a o estilo e o tipo da 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.

O CardFixedFooter representa o rodapé de uma mensagem de caixa de diálogo enviada pelo um app do 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.

Este é um exemplo de um widget CardFixedFooter com dois botões:

Resolver problemas

Quando um app ou card retornar um erro, o A interface do chat mostra a mensagem "Algo deu errado". ou "Não foi possível processar sua solicitação". Às vezes, a interface do Chat não exibe nenhuma mensagem de erro, mas o app do Chat ou produz um resultado inesperado; por exemplo, uma mensagem de cartão pode não aparecer.

Embora uma mensagem de erro possa não aparecer na interface do Chat, mensagens de erro descritivas e dados de registro estão disponíveis para ajudar você a corrigir os erros quando a geração de registros de erros nos apps do Chat está ativada. Para receber ajuda com a visualização, depurar e corrigir erros, consulte Resolver problemas e corrigir erros do Google Chat.