Configurar seu app da Web

Um app da Web é a interface do usuário (interface) de uma ação que usa a tela interativa. Você pode usar tecnologias da Web existentes (como HTML, CSS, JavaScript e WebAssembly) para projetar e desenvolver seu app da Web. Em sua maior parte, os anúncios interativos O Canvas pode renderizar conteúdo da Web como um navegador, mas há algumas restrições para garantir a privacidade e a segurança dos usuários. Antes de começar a projetar sua interface, considere os princípios de design descritos nas Diretrizes de design. Recomendamos o uso do Firebase Hosting para implantar seu app da Web.

O HTML e o JavaScript do seu app da Web fazem o seguinte:

Esta página aborda as formas recomendadas de criar seu aplicativo da Web, como ativar comunicação entre a ação de conversa e o app da Web, além das diretrizes gerais e restrições.

Embora seja possível usar qualquer método para criar a interface, o Google recomenda usar a seguintes bibliotecas:

Arquitetura

O Google recomenda o uso de uma arquitetura de aplicativo de página única. Isso tem o melhor desempenho possível e dá suporte a conversas contínuas experiência do usuário. A tela interativa pode ser usada com o front-end estruturas como Vue, Angular e React, que ajudam no gerenciamento de estado.

Arquivo HTML

O arquivo HTML define a aparência da interface. Este arquivo também carrega a classe API Canvas, que permite a comunicação entre seu app da Web e sua ação de conversa.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Interactive Canvas Sample</title>

    <!-- Disable favicon requests -->
    <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">

    <!-- Load Interactive Canvas JavaScript -->
    <script src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>

    <!-- Load PixiJS for graphics rendering -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>

    <!-- Load Stats.js for fps monitoring -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

    <!-- Load custom CSS -->
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div id="view" class="view">
      <div class="debug">
        <div class="stats"></div>
        <div class="logs"></div>
      </div>
    </div>
    <!-- Load custom JavaScript after elements are on page -->
    <script src="js/log.js"></script>
    <script type="module" src="js/main.js"></script>
  </body>
</html>

Fazer uma comunicação entre a ação de conversa e o app da Web

Depois de criar seu app da Web e ação de conversa e carregar a janela Canvas no seu arquivo de app da Web, é preciso definir como o app da Web e Interação da ação de conversa. Para fazer isso, modifique os arquivos que contêm seu aplicativo da Web lógica.

action.js

Esse arquivo contém o código para definir callbacks e invocar métodos por meio de interactiveCanvas. Callbacks permitem que seus tráfegos para responder a informações ou solicitações da ação de conversa, enquanto os métodos oferecem uma maneira de enviar informações ou solicitações para a ação de conversa.

Adicione interactiveCanvas.ready(callbacks); ao arquivo HTML para inicializar e registre callbacks:

JavaScript

/**
* This class is used as a wrapper for Google Assistant Canvas Action class
* along with its callbacks.
*/
export class Action {
 /**
  * @param  {Phaser.Scene} scene which serves as a container of all visual
  * and audio elements.
  */
 constructor(scene) {
   this.canvas = window.interactiveCanvas;
   this.gameScene = scene;
   const that = this;
   this.intents = {
     GUESS: function(params) {
       that.gameScene.guess(params);
     },
     DEFAULT: function() {
       // do nothing, when no command is found
     },
   };
 }

 /**
  * Register all callbacks used by the Interactive Canvas Action
  * executed during game creation time.
  */
 setCallbacks() {
   const that = this;
   // Declare the Interactive Canvas action callbacks.
   const callbacks = {
     onUpdate(data) {
       const intent = data[0].google.intent;
       that.intents[intent ? intent.name.toUpperCase() : 'DEFAULT'](intent.params);
     },
   };
   // Called by the Interactive Canvas web app once web app has loaded to
   // register callbacks.
   this.canvas.ready(callbacks);
 }
}

main.js

O módulo JavaScript main.js importa os arquivos action.js e scene.js e cria instâncias de cada um deles quando o aplicativo da Web é carregado. Este módulo também registra retornos de chamada para a tela interativa.

JavaScript

import {Action} from './action.js';
import {Scene} from './scene.js';
window.addEventListener('load', () => {
  window.scene = new Scene();
  // Set Google Assistant Canvas Action at scene level
  window.scene.action = new Action(scene);
  // Call setCallbacks to register Interactive Canvas
  window.scene.action.setCallbacks();
});

scene.js

O arquivo scene.js constrói o cenário para seu app da Web. Confira a seguir trecho de scene.js:

JavaScript

const view = document.getElementById('view');

// initialize rendering and set correct sizing
this.radio = window.devicePixelRatio;
this.renderer = PIXI.autoDetectRenderer({
  transparent: true,
  antialias: true,
  resolution: this.radio,
  width: view.clientWidth,
  height: view.clientHeight,
});
this.element = this.renderer.view;
this.element.style.width = `${this.renderer.width / this.radio}px`;
this.element.style.height = `${(this.renderer.height / this.radio)}px`;
view.appendChild(this.element);

// center stage and normalize scaling for all resolutions
this.stage = new PIXI.Container();
this.stage.position.set(view.clientWidth / 2, view.clientHeight / 2);
this.stage.scale.set(Math.max(this.renderer.width,
    this.renderer.height) / 1024);

// load a sprite from a svg file
this.sprite = PIXI.Sprite.from('triangle.svg');
this.sprite.anchor.set(0.5);
this.sprite.tint = 0x00FF00; // green
this.sprite.spin = true;
this.stage.addChild(this.sprite);

// toggle spin on touch events of the triangle
this.sprite.interactive = true;
this.sprite.buttonMode = true;
this.sprite.on('pointerdown', () => {
  this.sprite.spin = !this.sprite.spin;
});

Oferecer compatibilidade com interações por toque

Sua ação de tela interativa pode responder ao toque do usuário, bem como as entradas vocais. De acordo com as diretrizes de design para tela interativa, desenvolva ações para que priorize a voz. Mas algumas pessoas inteligentes telas são compatíveis com interações por toque.

O suporte ao toque é semelhante ao suporte a respostas conversacionais. No entanto, em vez de uma resposta vocal do usuário, o JavaScript do lado do cliente parece para interações de toque e as usa para alterar elementos no app da Web.

É possível conferir um exemplo disso na amostra, que usa o Biblioteca Pixi.js:

JavaScript

…
this.sprite = PIXI.Sprite.from('triangle.svg');
…
this.sprite.interactive = true; // Enables interaction events
this.sprite.buttonMode = true; // Changes `cursor` property to `pointer` for PointerEvent
this.sprite.on('pointerdown', () => {
  this.sprite.spin = !this.sprite.spin;
});

Solução de problemas

Embora você possa usar o simulador no Console do Actions para testar o Canvas Action durante o desenvolvimento, também é possível ver erros que ocorrem no App da Web de tela interativa nos usuários dispositivos em produção. É possível consultar esses nos registros do Google Cloud Platform.

Para conferir essas mensagens de erro na sua conta do Google Cloud Registros da plataforma, siga estas etapas:

  1. Abra seu projeto do Actions no Console do Actions.
  2. Clique em Test na navegação da parte de cima.
  3. Clique no link Ver registros no Google Cloud Platform.
.

Erros dos seus usuários os dispositivos aparecem em ordem cronológica no visualizador de registros.

Tipos de erro

Há três tipos de erros de app da Web que podem ser vistos nos registros do Google Cloud Platform:

  • Tempos limite que ocorrem quando ready não é chamado em 10 segundos.
  • Tempos limite que ocorrem quando a promessa retornada por onUpdate() não é atendida. em 10 segundos
  • Erros de tempo de execução do JavaScript que não são detectados no seu app da Web
.

Mais detalhes do erro de JavaScript

Os detalhes dos erros de tempo de execução JavaScript no seu app da Web não são disponíveis por padrão. Para ver detalhes dos erros de tempo de execução do JavaScript, siga estas etapas:

  1. Verifique se você configurou o compartilhamento apropriado de recursos entre origens (CORS) nos arquivos do app da Web. Para mais informações, consulte Compartilhamento de recursos entre origens.
  2. Adicione crossorigin="anonymous" às tags <script> importadas na sua arquivo HTML, conforme mostrado no seguinte snippet de código:
<script crossorigin="anonymous" src="<SRC>"></script>

Diretrizes e restrições

Considere as diretrizes e restrições a seguir ao desenvolver seu app da Web:

  • Sem cookies
  • Sem armazenamento local
  • Sem geolocalização
  • Sem uso da câmera
  • Sem gravação de áudio ou vídeo
  • Nenhum pop-up
  • Ficar abaixo do limite de 200 MB de memória
  • Leve em consideração o cabeçalho "Nome da ação" ao renderizar conteúdo (ocupa na parte superior da tela)
  • Nenhum estilo pode ser aplicado aos vídeos
  • Somente um elemento de mídia pode ser usado por vez
  • Nenhum banco de dados SQL da Web
  • Não há suporte para a interface SpeechRecognition da API Web Speech.
  • Configuração do modo escuro não aplicável
  • A reprodução de vídeo é compatível com smart displays. Para mais informações sobre codecs e formatos de contêiner de mídia compatíveis, consulte Codecs do Google Nest Hub.

Compartilhamento de recursos entre origens

Como os apps da Web de tela interativa são hospedados em um iframe e a origem está definida como nulo, você precisa ativar o Compartilhamento de recursos entre origens (CORS, na sigla em inglês). para servidores da Web e recursos de armazenamento. Esse processo permite que seus recursos aceitam solicitações de origens nulas.

Próximas etapas

Para adicionar mais recursos ao seu app da Web, consulte Continuar criando com o cliente ou o fulfillment do lado do servidor.