Konfigurowanie aplikacji internetowej

Aplikacja internetowa to interfejs (UI) akcji, która korzysta z interaktywnego obszaru roboczego. Do projektowania i tworzenia aplikacji internetowych możesz używać istniejących technologii internetowych (takich jak HTML, CSS, JavaScript czy WebAssembly). W większości przypadków technologia Interactive Canvas może renderować treści internetowe tak jak przeglądarka, ale są pewne ograniczenia związane z ochroną prywatności i bezpieczeństwem użytkownika. Zanim zaczniesz projektować interfejs, weź pod uwagę zasady projektowania opisane we wskazówkach dotyczących projektowania. Do wdrożenia aplikacji internetowej zalecamy skorzystanie z hostingu Firebase.

Kody HTML i JavaScript Twojej aplikacji internetowej:

Na tej stronie omawiamy zalecane sposoby tworzenia aplikacji internetowej, włączania komunikacji między akcją związaną z rozmową a aplikacją internetową oraz ogólne wytyczne i ograniczenia.

Chociaż możesz utworzyć swój interfejs za pomocą dowolnej metody, Google zaleca używanie tych bibliotek:

Architektura

Google zdecydowanie zaleca stosowanie architektury aplikacji jednostronicowej. Takie podejście umożliwia uzyskanie optymalnej wydajności i ułatwia prowadzenie ciągłej rozmowy. Interaktywnej aplikacji Canvas można używać w połączeniu z systemami frontendu, takimi jak Vue, Angular i React, które ułatwiają zarządzanie stanem.

Plik HTML

Plik HTML definiuje wygląd interfejsu użytkownika. Ten plik wczytuje też interaktywny interfejs Canvas API, który umożliwia komunikację między aplikacją internetową a akcją dotyczącą rozmowy.

w kodzie 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>

Komunikacja między akcją konwersacyjną a aplikacją internetową

Po skompilowaniu aplikacji internetowej i akcji konwersacyjnej do interaktywnej biblioteki Canvas w pliku aplikacji internetowej musisz określić sposób interakcji między aplikacją internetową a akcją konwersacyjną. W tym celu zmodyfikuj pliki zawierające funkcje logiczne aplikacji internetowej.

action.js

Ten plik zawiera kod do definiowania callbacks i wywoływania metod za pomocą interactiveCanvas. Wywołania zwrotne pozwalają aplikacji internetowej odpowiadać na informacje lub żądania z akcji dotyczącej rozmowy, natomiast metody umożliwiają wysyłanie informacji lub żądań do akcji dotyczącej rozmowy.

Dodaj interactiveCanvas.ready(callbacks); do pliku HTML, aby zainicjować i zarejestrować 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

Moduł JavaScript main.js importuje pliki action.js i scene.js oraz tworzy wystąpienia każdego z nich podczas wczytywania aplikacji internetowej. Ten moduł rejestruje też wywołania zwrotne dla interaktywnego obszaru roboczego.

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

Plik scene.js tworzy scenę dla aplikacji internetowej. Oto fragment z usługi 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;
});

Obsługa dotykowa

Działanie interaktywnego obszaru roboczego może reagować na dotyk użytkownika i jego głos. Zgodnie ze wskazówkami dotyczącymi projektowania interaktywnego obszaru roboczego akcja powinna być ukierunkowana na głos. Niektóre inteligentne ekrany obsługują interakcje dotykowe.

Obsługa dotyku jest podobna do obsługi reakcji konwersacyjnych. Jednak zamiast odpowiedzi głosowej użytkownika, skrypt JavaScript po stronie klienta wyszukuje interakcje dotykowe i wykorzystuje je do zmiany elementów aplikacji internetowej.

Przykład znajdziesz w przykładzie, który korzysta z biblioteki 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;
});

Rozwiązywanie problemów

Możesz korzystać z symulatora w konsoli Actions do testowania działania interaktywnego Canvas w trakcie tworzenia aplikacji, ale możesz też zobaczyć błędy w interaktywnej aplikacji internetowej Canvas na urządzeniach użytkowników w wersji produkcyjnej. Błędy te możesz wyświetlić w logach Google Cloud Platform.

Aby wyświetlić te komunikaty o błędach w logach Google Cloud Platform, wykonaj te czynności:

  1. Otwórz projekt w Actions w Konsoli Actions.
  2. W menu u góry kliknij Przetestuj.
  3. Kliknij link Wyświetl logi w Google Cloud Platform.

Błędy z urządzeń użytkowników są wyświetlane w przeglądarce logów w kolejności chronologicznej.

Typy błędów

W logach Google Cloud Platform możesz zobaczyć 3 rodzaje błędów aplikacji internetowej:

  • Przekroczenia limitu czasu, które występują, gdy funkcja ready nie zostanie wywołana w ciągu 10 sekund.
  • Czasy oczekiwania, które mają miejsce, gdy obietnica zwrócona przez funkcję onUpdate() nie zostanie zrealizowana w ciągu 10 sekund
  • błędy środowiska wykonawczego JavaScript, które nie są wychwytywane w aplikacji internetowej;

Wyświetl szczegóły błędu JavaScriptu

Domyślnie szczegółowe informacje o błędach kodu JavaScript w Twojej aplikacji internetowej nie są dostępne. Aby zobaczyć szczegółowe informacje o błędach środowiska wykonawczego JavaScriptu, wykonaj te czynności:

  1. Sprawdź, czy w plikach aplikacji internetowych masz skonfigurowane odpowiednie nagłówki odpowiedzi HTTP dotyczące udostępniania zasobów z innych domen (CORS). Więcej informacji znajdziesz w artykule Udostępnianie zasobów między domenami.
  2. Dodaj crossorigin="anonymous" do zaimportowanych tagów <script> w pliku HTML, jak pokazano poniżej:
<script crossorigin="anonymous" src="<SRC>"></script>

Wytyczne i ograniczenia

Podczas tworzenia aplikacji internetowej weź pod uwagę te wytyczne i ograniczenia:

  • Brak plików cookie
  • Brak pamięci lokalnej
  • Brak geolokalizacji
  • Brak użycia kamery
  • Brak nagrań dźwięku i obrazu
  • Brak wyskakujących okienek
  • Nie przekraczaj limitu 200 MB pamięci
  • Podczas renderowania treści (zajmuje górną część ekranu) weź pod uwagę nagłówek Nazwa działania.
  • Do filmów nie można zastosować żadnych stylów
  • W danym momencie można używać tylko jednego elementu multimedialnego
  • Brak bazy danych Web SQL
  • Brak obsługi interfejsu SpeechRecognition interfejsu Web Speech API.
  • Nie można zastosować ustawienia trybu ciemnego
  • Odtwarzanie filmów jest obsługiwane na inteligentnych ekranach. Więcej informacji o obsługiwanych formatach kontenerów multimediów i kodekach znajdziesz w artykule Kodeki Google Nest Hub.

Udostępnianie zasobów między domenami

Ponieważ aplikacje internetowe interaktywnej aplikacji Canvas są hostowane w elemencie iframe, a źródło ma wartość null, musisz włączyć udostępnianie zasobów między domenami (CORS) dla swoich serwerów WWW i zasobów pamięci. Dzięki temu zasoby będą mogły przyjmować żądania z źródeł o wartości null.

Dalsze kroki

Informacje o tym, jak dodać więcej funkcji do aplikacji internetowej, znajdziesz w artykule Kontynuuj tworzenie z realizacją klienta lub po stronie serwera.