Neste guia, descrevemos erros comuns relacionados a cartões que você pode encontrar e como corrigi-los.
Use o Card Builder para criar e visualizar mensagens de cards JSON para apps do Chat:
Abrir o Card BuilderComo os erros do card aparecem
Os erros no cartão se manifestam de várias maneiras:
- Parte de um card, como um widget ou componente, não aparece nem é renderizado de maneira inesperada.
- O card inteiro não vai aparecer.
- Uma caixa de diálogo fecha, não abre ou não carrega.
Se você encontrar um comportamento como esse, isso significa que há um erro com o card do seu app.
Para referência: uma mensagem de cartão e uma caixa de diálogo livres de erros
Antes de examinar exemplos de cards incorretos, primeiro considere a mensagem e a caixa de diálogo deste card em funcionamento. Para ilustrar cada exemplo de erro e a respectiva correção, o JSON deste card é modificado pela introdução de erros.
Uma mensagem de cartão livre de erros
Esta é uma mensagem de cartão livre de erros que detalha as informações de contato que apresenta um cabeçalho, seções e widgets, como texto e botões decorados:
Uma caixa de diálogo livre de erros
Esta é a caixa de diálogo funcional e sem erros que cria um contato coletando informações dos usuários, com um rodapé e widgets editáveis como entrada de texto e interruptores e botões:
Erro: parte de um card não aparece
Às vezes, os cards são renderizados, mas parte de um card que você esperava ver não aparece. as causas prováveis são:
- Um campo JSON obrigatório está ausente.
- Um campo JSON tem erros de ortografia ou letras maiúsculas.
Causa: campo JSON obrigatório ausente
Neste erro de exemplo, um campo JSON obrigatório, title
, está ausente. Como resultado, o card é renderizado, mas partes do card que deveriam aparecer não são. Pode ser difícil prever como os cartões serão renderizados quando os campos obrigatórios são omitidos.
Para corrigir esse erro, adicione o campo JSON obrigatório. neste exemplo, title
.
Para saber se um campo JSON é obrigatório, consulte a documentação de referência de Cards v2. Neste exemplo, consulte a descrição do campo title
em CardHeader
.
Veja dois exemplos:
Exemplo 1: especificar subtitle
, mas omitir o title
obrigatório faz com que todo o cabeçalho apareça em branco:
![O cabeçalho deste card não é exibido porque falta um campo obrigatório, o título.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-1.png?authuser=0000&hl=pt-br)
title
, está ausente.Conferir snippet JSON do cartão incorreto
Erro: um campo obrigatório, title
, está ausente em header
.
. . . "header": { "subtitle": "Software Engineer" } . . .
Mostrar o snippet JSON correto do cartão
Corrigido: o campo obrigatório, title
, faz parte da especificação header
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer" } . . .
Exemplo 2: especificar subtitle
, imageUrl
, imageType
e imageAltText
, mas omitir o title
necessário faz com que a imagem seja renderizada conforme o esperado, mas não a legenda:
![O cabeçalho deste card não é exibido porque falta um campo obrigatório, o título.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-missing-required-entity-header-title-2.png?authuser=0000&hl=pt-br)
title
, está ausente, mas a imagem é renderizada conforme o esperado.Conferir snippet JSON do cartão incorreto
Erro: um campo obrigatório, title
, está ausente em header
.
. . . "header": { "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Mostrar o snippet JSON correto do cartão
Corrigido: o campo obrigatório, title
, faz parte da especificação header
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Causa: JSON escrito incorretamente ou em letras maiúsculas
Neste erro de exemplo, o cartão JSON inclui todos os campos obrigatórios, mas um campo, imageUrl
, está escrito incorretamente como imageURL
(R
maiúsculo L
), o que causa um erro: a imagem para a qual ele aponta não é renderizada.
Para corrigir esse e outros erros semelhantes, use a formatação JSON correta. Nesse caso, imageUrl
está correta. Em caso de dúvida, compare o JSON do cartão com o documento de referência do cartão.
![O cabeçalho deste card não é exibido porque falta um campo obrigatório, o título.](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/chat/images/troubleshoot/troubleshoot-cards-imageURL-instead-of-imageUrl.png?authuser=0000&hl=pt-br)
title
, está ausente, mas a imagem é renderizada conforme o esperado.Conferir snippet JSON do cartão incorreto
Erro: o campo imageURL
está com as letras maiúsculas incorretas. Deve ser imageUrl
.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageURL": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Mostrar o snippet JSON correto do cartão
Correção: o campo imageUrl
está em letras maiúsculas corretamente.
. . . "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha", } . . .
Erro: o card inteiro não aparece
Às vezes, o card em si não aparece; as causas prováveis são:
- Um widget
ButtonList
foi especificado incorretamente. - Um widget
CardFixedFooter
tem um botão especificado incorretamente.
Causa: buttonList
ou cardFixedFooter
especificado incorretamente
Se uma mensagem ou caixa de diálogo de card incluir um widget ButtonList
especificado incorretamente ou um widget CardFixedFooter
com botões especificados incorretamente, o card inteiro não vai ser exibido e nada aparecerá no lugar. As especificações incorretas podem incluir campos ausentes, campos escritos ou em maiúscula incorretamente ou JSON estruturado incorretamente, como falta de vírgula, aspas ou chaves.
Para corrigir esse erro, compare o JSON do cartão com o documento de referência do cartão. Especificamente, compare todos os widgets ButtonList
com o guia de widgets do ButtonList
.
Exemplo:em um guia de widgets do ButtonList
, transmitir uma ação onClick
incompleta no primeiro botão impede que todo o card seja renderizado.
Conferir o snippet JSON do cartão incorreto
Erro: o objeto onClick
não tem campos especificados, então o card inteiro não aparece.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Mostrar o snippet JSON correto do cartão
Correção: o objeto onClick
agora tem um campo openLink
, para que o card apareça conforme esperado.
. . . { "buttonList": { "buttons": [ { "text": "Share", "onClick": { "openLink": { "url": "https://example.com/share", } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT", } ], } } }, ], }, } . . .
Erro: uma caixa de diálogo fecha, para ou não abre
Se uma caixa de diálogo fechar inesperadamente, não carregar ou não abrir, a causa provável é um problema com a interface do card.
Estes são os motivos mais comuns:
- O widget
CardFixedFooter
não temprimaryButton
. - Um botão no widget
CardFixedFooter
não tem uma açãoonClick
ou a açãoonClick
está especificada incorretamente. - Um widget
TextInput
não tem um camponame
.
Causa: CardFixedFooter
não tem primaryButton
Em caixas de diálogo com um widget CardFixedFooter
, é necessário especificar um primaryButton
com texto e cor. Omitir a primaryButton
ou defini-la incorretamente impede que toda a caixa de diálogo apareça.
Para corrigir esse erro, verifique se o widget CardFixedFooter
inclui um primaryButton
especificado corretamente.
Conferir o snippet JSON do cartão incorreto
Erro: o objeto fixedFooter
não tem um campo primaryButton
especificado, fazendo com que a caixa de diálogo não seja carregada ou aberta.
. . . "fixedFooter": { "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
Mostrar o snippet JSON correto do cartão
Correção: o fixedFooter
agora tem um campo primaryButton
especificado, então a caixa de diálogo funciona conforme o esperado.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { . . . }, "secondaryButton": { . . . } } } . . .
Causa: configuração incorreta de onClick
em FixedFooter
Em caixas de diálogo com um widget CardFixedFooter
, especificar incorretamente a configuração onClick
em qualquer botão ou omiti-la, fazendo com que a caixa de diálogo feche, falhe ou não abra.
Para corrigir esse erro, verifique se cada botão inclui uma configuração onClick
especificada corretamente.
Conferir o snippet JSON do cartão incorreto
Erro: o objeto primaryButton
tem um campo onClick
com uma matriz "parameters" com erros ortográficos, fazendo com que a caixa de diálogo não seja carregada ou aberta.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { "action": { "function": "setLanguageType", "parrammetters": [ { "key": "languageType", "value": "C++" } ] } } }, "secondaryButton": { "text": "Cancel", "onClick": { "action": { "function": "reset" } } } } . . .
Mostrar o snippet JSON correto do cartão
Correção: o objeto primaryButton
tem um campo onClick
com uma matriz "parameters" escrita corretamente, para que a caixa de diálogo funcione conforme esperado.
. . . "fixedFooter": { "primaryButton": { "text": "Submit", "color": { "red": 0, "blue": 1, "green": 0 }, "onClick": { "action": { "function": "setLanguageType", "parameters": [ { "key": "languageType", "value": "C++" } ] } } }, "secondaryButton": { "text": "Cancel", "onClick": { "action": { "function": "reset" } } } } . . .
Causa: TextInput
não tem name
Se uma caixa de diálogo incluir um widget TextInput
que exclua o campo name
, ela não vai funcionar como esperado. Ele pode fechar, abrir, mas falhar ou não abrir.
Para corrigir esse erro, verifique se cada widget TextInput
inclui um campo name
apropriado. Verifique se cada campo name
no cartão é exclusivo.
Conferir o snippet JSON do cartão incorreto
Erro: o objeto textInput
não tem um campo name
especificado, fazendo com que a caixa de diálogo feche, falhe ou não abra.
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", } } . . .
Mostrar o snippet JSON correto do cartão
Correção: o textInput
agora tem um campo name
especificado, então a caixa de diálogo funciona conforme o esperado.
. . . { "textInput": { "label": "Name", "type": "SINGLE_LINE", "name": "contactName" } } . . .
Falhas nas ações de abrir, enviar ou cancelar caixas de diálogo com uma arquitetura de app assíncrona
Se o app do Chat retornar a mensagem de erro
Could not load dialog. Invalid response returned by bot.
ao trabalhar com
caixas de diálogo, pode ser porque seu app
usa uma arquitetura assíncrona, como
Cloud Pub/Sub ou a
Create Message.
Abrir, enviar ou cancelar uma caixa de diálogo exige
uma resposta síncrona de um app do Chat com uma
DialogEventType
.
Da mesma forma, os aplicativos não oferecem suporte a caixas de diálogo
criada com uma arquitetura assíncrona.
Como solução alternativa, considere usar um mensagem de card em vez de uma caixa de diálogo.
Outros erros no card e na caixa de diálogo
Se as correções descritas nesta página não resolverem o erro relacionado ao cartão no app, consulte os registros de erro do app. Consultar os registros pode ajudar a encontrar erros no cartão JSON ou no código do app, e os registros incluem mensagens de erro descritivas para ajudar você a corrigi-los.
Temas relacionados
Se precisar de ajuda para corrigir erros no app Google Chat, consulte Resolver problemas e corrigir apps do Google Chat e Depurar apps do Chat.