As ações de conversa serão descontinuadas em 13 de junho de 2023. Para mais informações, consulte Desativação do Ações de conversa.

Tela interativa

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.
Figura 1. Um jogo interativo criado com a tela interativa.

A tela interativa é um framework criado no Google Assistente que permite que os desenvolvedores adicionem experiências visuais e imersivas às ações de conversa. Essa experiência visual é um app da Web interativo que o Google Assistente envia em resposta ao usuário em uma conversa. Ao contrário das respostas avançadas que estão in-line em uma conversa com o 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 as seguintes ações na sua ação:

  • Criar recursos visuais de tela cheia
  • Criar animações e transições personalizadas
  • Fazer a visualização de dados
  • Criar layouts e GUIs personalizados

Dispositivos com suporte

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

  • Smart displays
  • Celulares Android

Como funciona

Uma ação que usa a tela interativa consiste em dois componentes principais:

  • Ação de conversa: uma ação que usa uma interface de conversa para atender às solicitações do usuário. Use o Criador de ações ou o SDK do Actions para criar sua conversa.
  • App da Web: é um app da Web de front-end com elementos visuais personalizados que sua ação envia como resposta aos usuários durante uma conversa. Você cria o app da Web com tecnologias da Web, como HTML, JavaScript e CSS.

Os usuários que interagem com uma ação na tela interativa têm uma conversa constante com o Google Assistente para atingir a meta. No entanto, para a tela interativa, a maior parte dessa conversa ocorre no contexto do seu app da Web. Ao conectar sua ação de conversa ao seu app da Web, você precisa incluir a API Interactive Canvas no código do seu app da Web.

  • Biblioteca de tela interativa:uma biblioteca JavaScript que você inclui no app da Web para permitir a comunicação entre o app da Web e sua ação de conversa usando uma API. Para mais informações, consulte a documentação da API Interactive Canvas.

Além de incluir a biblioteca Interactive Canvas, é necessário retornar o tipo de resposta Canvas na conversa para abrir o app da Web no dispositivo do usuário. Também é possível usar uma resposta Canvas para atualizar o app da Web com base na entrada do usuário.

  • Canvas:uma resposta que contém o URL do app da Web e os dados para transmitir. O Actions Builder pode preencher automaticamente a resposta Canvas com a intent correspondente e os dados de cena atuais para atualizar o app da Web. Como alternativa, é possível enviar uma resposta Canvas de um webhook usando a biblioteca de fulfillment do Node.js. Para mais informações, consulte Solicitações de tela.

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, acontece o seguinte fluxo:

  1. O usuário diz "Deixar a tela azul" no dispositivo com o Assistente.
  2. A plataforma Actions on Google encaminha a solicitação do usuário para sua lógica de conversa para corresponder a uma intent.
  3. A plataforma corresponde à intent com a cena da ação, que aciona um evento e envia uma resposta Canvas ao dispositivo. O dispositivo carrega um app da Web usando um URL fornecido na resposta (se ele ainda não tiver sido carregado).
  4. Quando o app da Web é carregado, ele registra callbacks com a API Interactive Canvas. Se a resposta da tela contiver um campo de data, o valor do objeto do campo data será transmitido para o callback onUpdate registrado do app da Web. Neste exemplo, a lógica de conversa envia uma resposta Canvas com um campo de dados que inclui uma variável com o valor de blue.
  5. Ao receber o valor data da resposta Canvas, o callback onUpdate pode executar a lógica personalizada do app da Web e fazer as mudanças definidas. Neste exemplo, o callback onUpdate lê a cor da data e deixa a tela azul.

Atendimento do lado do cliente e do servidor

Ao criar uma ação de tela interativa, é possível escolher entre dois caminhos de implementação de fulfillment: fulfillment do servidor ou fulfillment do cliente. Com o fulfillment do servidor, você usa principalmente APIs que exigem um webhook. Com o fulfillment do cliente, é possível usar APIs do lado do cliente e, se necessário, APIs que exigem um webhook para recursos que não sejam do Canvas, como a vinculação da conta.

Se você optar por criar com o fulfillment do webhook do servidor no estágio de criação do projeto, precisará implantar um webhook para lidar com a lógica de conversa e o JavaScript do lado do cliente para atualizar o app da Web e gerenciar a comunicação entre os dois.

Se você quiser criar usando o fulfillment do cliente (atualmente disponível na prévia para desenvolvedores), você pode usar novas APIs do lado do cliente para criar a lógica da sua ação exclusivamente no app da Web, o que simplifica a experiência de desenvolvimento, reduz a latência entre as etapas da conversa e permite usar recursos no dispositivo. Se necessário, você também pode alternar para a lógica do lado do servidor no cliente.

Para ver mais informações sobre os recursos do lado do cliente, consulte Criar com o fulfillment do lado do cliente.

Próximas etapas

Para aprender a criar um app da Web para a tela interativa, consulte Apps da Web.

Para ver o código de uma ação de tela interativa completa, consulte o exemplo no GitHub (link em inglês).