Konfigurowanie aplikacji internetowej

Aplikacja internetowa to interfejs użytkownika dla akcji korzystającej z interaktywnego obszaru roboczego. Można używać istniejących technologii internetowych (takich jak HTML, CSS, JavaScript WebAssembly). Zasadniczo wersja interaktywna Obszar roboczy może renderować treści z internetu tak jak przeglądarka, ale wiąże się z kilkoma ograniczeniami jest wymuszane w związku z ochroną prywatności i bezpieczeństwem użytkowników. Zanim zaczniesz projektować swój interfejs, weź pod uwagę zasady projektowania opisane w wytycznych dotyczących projektowania. Zalecamy korzystanie z hostingu Firebase. aby wdrożyć swoją aplikację internetową.

Kody HTML i JavaScript aplikacji internetowej:

Na tej stronie omawiamy zalecane sposoby tworzenia aplikacji internetowej, jak włączyć komunikację między działaniem związanym z konwersją a aplikacją internetową oraz ogólnymi wskazówkami i ograniczeniach.

Chociaż możesz użyć dowolnej metody do utworzenia interfejsu, Google zaleca użycie następujące biblioteki:

Architektura

Google zdecydowanie zaleca korzystanie z architektury aplikacji składającej się z jednej strony. Ten pozwala na optymalną wydajność i wspiera ciągłość rozmów użytkowników. Interaktywnego obszaru roboczego można używać w połączeniu z interfejsem. platformy takie jak Vue, Angular i React, które pomagają w zarządzaniu państwem.

Plik HTML

Plik HTML określa wygląd interfejsu użytkownika. Ten plik wczytuje też plik interaktywny Interfejs Canvas API umożliwiający komunikację między aplikacją internetową. i akcji konwersacyjnej.

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 działaniem konwersacyjnym a aplikacją internetową

Po utworzeniu aplikacji internetowej i tworzeniu akcji dotyczącej rozmów oraz załadowaniu biblioteki Canvas w pliku aplikacji internetowej, musisz określić sposób Interakcja z akcją konwersacyjną. Aby to zrobić, zmodyfikuj pliki, które zawierają Twoją aplikację internetową logikę logiczną.

action.js

Ten plik zawiera kod definiujący wywołania zwrotne i wywoływanie metod do interactiveCanvas. Dzięki wywołaniom zwrotnym możesz korzystać z internetu reagować na informacje lub prośby z akcji konwersacyjnej, a metody umożliwiają wysyłanie informacji lub żądań do czynności związanej z konwersacją.

Dodaj interactiveCanvas.ready(callbacks); do pliku HTML, aby zainicjować i zarejestruj wywołania zwrotne:

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ł również rejestruje wywołania zwrotne Interactive Canvas.

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ę do aplikacji internetowej. Oto fragment z 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ługuj interakcje dotykowe

Interaktywna akcja Canvas może reagować na dotyk użytkownika swoje głosy. Zgodnie z wytycznymi projektowania interaktywnego obszaru roboczego warto opracować akcję tak, by była skoncentrowana na głosie. Mając jednak na uwadze, że niektóre inteligentne Wyświetlacze obsługują interakcje dotykowe.

Wspieranie dotyku przypomina udzielanie odpowiedzi konwersacyjnych. jednak zamiast głosowego odpowiedzi użytkownika, JavaScript po stronie klienta w przypadku interakcji dotykowych i wykorzystuje je do modyfikowania elementów aplikacji internetowej.

W przykładzie widać, jak to jest Biblioteka 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 wykorzystać symulator w Konsoli Actions, by przetestować Podczas tworzenia aplikacji Canvas możesz też zobaczyć błędy występujące w Interaktywna aplikacja internetowa Canvas na urządzeniach użytkowników na urządzeniach produkcyjnych. Możesz wyświetlić te w dziennikach Google Cloud Platform.

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

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

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

Typy błędów

W logach Google Cloud Platform mogą wystąpić 3 typy błędów aplikacji internetowej:

  • Czasy oczekiwania, które występują, gdy usługa ready nie zostanie wywołana w ciągu 10 sekund
  • Czasy oczekiwania, które występują, gdy obietnica zwrócona przez onUpdate() nie zostanie zrealizowana w ciągu 10 sekund
  • Błędy czasu działania JavaScriptu, które nie zostały wykryte w Twojej aplikacji internetowej
.

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

Szczegóły błędów środowiska wykonawczego JavaScriptu w aplikacji internetowej nie są domyślnie dostępne. Aby zobaczyć szczegóły błędów środowiska wykonawczego JavaScriptu, postępuj zgodnie z instrukcjami wykonaj te czynności:

  1. Sprawdź, czy masz skonfigurowane odpowiednie udostępnianie zasobów między domenami Nagłówki odpowiedzi HTTP (CORS) w plikach aplikacji internetowej. Aby dowiedzieć się więcej, zobacz Udostępnianie zasobów między domenami.
  2. Dodaj crossorigin="anonymous" do zaimportowanych tagów (<script>) w Plik HTML zgodnie z tym fragmentem kodu:
<script crossorigin="anonymous" src="<SRC>"></script>

Wytyczne i ograniczenia

Podczas tworzenia kampanii pamiętaj o tych wytycznych i ograniczeniach Twoja aplikacja internetowa:

  • Brak plików cookie
  • Brak pamięci lokalnej
  • Brak geolokalizacji
  • Nie używa kamery
  • Brak nagrywania dźwięku i obrazu
  • Brak wyskakujących okienek
  • Nie przekraczaj limitu 200 MB pamięci
  • Podczas renderowania treści weź pod uwagę nagłówek Nazwa działania (zaj. górnej części ekranu)
  • Do filmów nie można zastosować żadnych stylów
  • Można używać tylko jednego elementu multimedialnego naraz
  • Brak bazy danych Web SQL
  • Interfejs SpeechRecognition Web Speech API nie jest obsługiwany.
  • Nie można zastosować ustawienia trybu ciemnego
  • Odtwarzanie filmów jest obsługiwane na inteligentnych ekranach. Więcej informacji na temat obsługiwane formaty kontenerów multimediów i kodeki znajdziesz w artykule o kodekach Google Nest Hub.

Udostępnianie zasobów między domenami

Ponieważ aplikacje internetowe Interaktywne Canvas są hostowane w elemencie iframe, a źródło jest ustawione do wartości null, musisz włączyć udostępnianie zasobów między domenami (CORS). dla serwerów WWW i zasobów pamięci masowej. Ten proces umożliwia komponentom akceptuj żądania z pustych źródeł.

Dalsze kroki

Aby dodać więcej funkcji do aplikacji internetowej, zapoznaj się z artykułem Kontynuuj tworzenie z klientem lub realizacja po stronie serwera.