Visão geral (Dialogflow)

A tela interativa é um framework criado no Google Assistente que permite que os desenvolvedores adicionem experiências visuais e imersivas a ações de conversa. Essa experiência visual é um app da Web interativo que o Assistente envia como resposta ao usuário na conversa. Ao contrário das respostas avançadas tradicionais que existem em uma conversa do Google Assistente, o app da Web de tela interativa é renderizado como uma visualização da Web em tela cheia.

Use a tela interativa se quiser realizar uma das seguintes ações na ação:

  • Criar recursos visuais em tela cheia
  • Criar animações e transições personalizadas
  • Fazer a visualização de dados
  • Criar layouts e GUIs personalizados
Figura 1. Um jogo interativo criado com a tela interativa.

Dispositivos com suporte

No momento, a tela interativa está disponível nos seguintes dispositivos:

  • Smart displays
  • Google Nest Hubs

  • Celulares Android

Como funciona

Uma ação que usa a tela interativa funciona de maneira semelhante a uma ação de conversa normal. O usuário ainda tem uma conversa direta com o Assistente para atender à meta. No entanto, em vez de retornar respostas in-line na conversa, uma ação da tela interativa envia uma resposta ao usuário que abre um app da Web em tela cheia. O usuário continua interagindo com o app da Web por voz ou toque até o fim da conversa.

Há vários componentes em uma ação que usa a tela interativa:

  • Ação conversacional: uma ação que usa uma interface de conversa para atender às solicitações do usuário. As ações de tela interativas usam visualizações da Web para renderizar respostas em vez de rich cards ou respostas de texto e voz simples. As ações de conversa usam os seguintes componentes:
    • Agente do Dialogflow: um projeto no Dialogflow que pode ser personalizado para ser conversado com seus usuários do Action.
    • Fulfillment (em inglês): código implantado como um webhook que implementa a lógica de conversação do agente do Dialogflow e se comunica com o app da Web.
  • App da Web:um app da Web de front-end com recursos visuais personalizados que sua ação envia como uma resposta aos usuários durante uma conversa. Você cria o app da Web com padrões da Web, como HTML, JavaScript e CSS.

A ação de conversa e o app da Web se comunicam usando o seguinte:

  • API de tela interativa: uma API JavaScript que você inclui no app da Web para permitir a comunicação entre ele e a ação de conversa.
  • HtmlResponse: uma resposta que contém um URL do app da Web e dados para transmiti-lo. É possível usar as bibliotecas de cliente Node.js ou Java para retornar um HtmlResponse.

Para ilustrar como a tela interativa funciona, imagine uma ação hipotética chamada Cool Colors que muda a cor da tela do dispositivo para uma cor especificada pelo usuário. Depois que o usuário invoca a ação, o fluxo se parece com o seguinte:

  1. O usuário diz Turn the screen blue ao dispositivo com o Assistente.
  2. A plataforma Actions on Google encaminha a solicitação do usuário ao Dialogflow para corresponder a uma intent.
  3. O fulfillment da intent correspondente é executado, e um HtmlResponse é enviado ao dispositivo. O dispositivo usa o URL para carregar o app da Web, caso ainda não tenha sido carregado.
  4. Quando o app da Web é carregado, ele registra callbacks com a API interactiveCanvas. O valor do objeto data é transmitido para o callback onUpdate registrado do app da Web. No nosso exemplo, o fulfillment envia um HtmlResponse com um data que inclui uma variável com o valor blue.
  5. A lógica personalizada do app da Web lê o valor de data do HtmlResponse e faz as mudanças definidas. No nosso exemplo, a tela fica azul.
  6. interactiveCanvas envia a atualização de callback para o dispositivo.

Próximas etapas

Para saber como criar uma ação de tela interativa, consulte a página Visão geral da compilação.

Para ver o código de uma ação de tela interativa completa, consulte a amostra.