Działania konwersacyjne zostaną wycofane 13 czerwca 2023 r. Więcej informacji znajdziesz w artykule o zachodzie słońca między rozmowami.

Skonfiguruj aplikację internetową

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Aplikacja internetowa to interfejs (UI) dla działania korzystającego z funkcji Interactive Canvas. Do projektowania i projektowania aplikacji internetowych możesz używać dotychczasowych technologii internetowych (np. HTML, CSS, JavaScript i WebAssembly). W większości przypadków Interaktywne płótno może renderować treści internetowe jak przeglądarki, ale jest kilka ograniczeń związanych z prywatnością i bezpieczeństwem użytkowników. Zanim zaczniesz projektować interfejs użytkownika, weź pod uwagę zasady projektowania opisane we wskazówkach dotyczących projektowania. Do wdrożenia aplikacji internetowej zalecamy używanie hostingu Firebase.

Kod HTML i JavaScript aplikacji internetowej:

Na tej stronie znajdują się zalecane sposoby tworzenia aplikacji internetowej oraz informacje o tym, jak zapewnić komunikację między akcją konwersacyjną a aplikacją internetową, a także ogólne wytyczne i ograniczenia.

Mimo że do tworzenia interfejsu użytkownika możesz użyć dowolnej metody, Google zaleca korzystanie z tych bibliotek:

Architektura

Zdecydowanie zalecamy korzystanie z architektury aplikacji składającej się z jednej strony. Takie podejście zapewnia optymalną wydajność i umożliwia ciągłe prowadzenie rozmów. Interaktywnego obszaru roboczego można używać w połączeniu z ramami frontowymi, takimi jak Vue, Angular i React, które ułatwiają zarządzanie stanem.

Plik HTML

Plik HTML określa wygląd interfejsu. Ten plik wczytuje też interfejs Interactive Canvas API, który umożliwia komunikację między aplikacją internetową a działaniem konwersacyjnym.

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 komunikatem konwersacyjnym a aplikacją internetową

Po skompilowaniu aplikacji internetowej i akcji rozmów oraz wczytaniu ich w interaktywnej bibliotece w pliku aplikacji internetowej musisz określić interakcje między aplikacją internetową a działaniem konwersacyjnym. Aby to zrobić, zmodyfikuj pliki zawierające logikę aplikacji internetowej.

action.js

Ten plik zawiera kod do definiowania wywołań zwrotnych i wywoływania metod za pomocą metody interactiveCanvas. Dzięki wywołaniami zwrotnym aplikacja internetowa może odpowiadać na informacje lub żądania z rozmowy konwersacyjnej, natomiast metody umożliwiają przekazywanie informacji lub żądań do czynności konwersacyjnej.

Dodaj interactiveCanvas.ready(callbacks); do pliku HTML, aby zainicjować i zarejestrować 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, a następnie tworzy ich wystąpienia podczas wczytywania aplikacji internetowej. Ten moduł rejestruje też wywołania zwrotne dla obszaru interaktywnego.

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ę pod kątem Twojej aplikacji internetowej. Oto przykład fragmentu 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 interakcji dotykowych

Akcja Interactive Canvas może reagować na dotyk użytkownika i na głos. Zgodnie z wytycznymi dotyczącymi projektowania obszaru interaktywnego skup się na prowadzeniu działań głosowych. Niektóre inteligentne ekrany obsługują też dotyk.

Obsługa dotyku jest podobna do obsługi odpowiedzi konwersacyjnych, ale zamiast odpowiedzi lektora JavaScript po stronie klienta szuka interakcji dotykowych i używa ich do zmiany elementów w aplikacji internetowej.

Przykład ten można zobaczyć w przykładowej bibliotece korzystającej 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

Chociaż w programie Actions możesz używać symulatora do testowania interaktywnego obszaru roboczego, możesz też zobaczyć błędy występujące w aplikacji internetowej Interactive na urządzeniach użytkowników. 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 Actions w Konsoli Actions.
  2. Kliknij Testuj w górnym menu.
  3. Kliknij link Wyświetl logi w Google Cloud Platform.

W przeglądarce logów błędy są wyświetlane w kolejności chronologicznej.

Typy błędów

W dziennikach Google Cloud Platform można wykryć 3 rodzaje błędów aplikacji internetowych:

  • Przekroczenia limitu czasu, gdy ready nie zostanie wywołany w ciągu 10 sekund
  • Przekroczenia limitu czasu, 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ółowe informacje o błędach kodu JavaScript w aplikacji nie są domyślnie dostępne. Aby wyświetlić szczegółowe informacje o błędach środowiska wykonawczego JavaScript, wykonaj te czynności:

  1. Upewnij się, że w plikach aplikacji internetowych masz skonfigurowane odpowiednie nagłówki odpowiedzi HTTP zasobu udostępniającego zasoby z innych domen. Więcej informacji znajdziesz w sekcji Udostępnianie zasobów między domenami.
  2. Dodaj crossorigin="anonymous" do zaimportowanych tagów <script> w pliku HTML, jak pokazano w tym fragmencie kodu:
<script crossorigin="anonymous" src="<SRC>"></script>

Wytyczne i ograniczenia

Podczas tworzenia aplikacji internetowej weź pod uwagę te wskazówki i ograniczenia:

  • Brak plików cookie
  • Brak pamięci lokalnej
  • Brak geolokalizacji
  • Brak użycia kamery
  • Brak nagrań dźwiękowych i wideo
  • Brak wyskakujących okienek
  • Rozmiar nie większy niż 200 MB
  • Podczas renderowania treści pamiętaj o nagłówku nazwy działania (zajmuje górną część ekranu)
  • Do filmów nie można zastosować żadnych stylów
  • Można używać tylko jednego elementu multimedialnego w danym momencie
  • Brak bazy danych Web SQL
  • Interfejs Web Speech API nie obsługuje interfejsu SpeechRecognition.
  • Ustawienie trybu ciemnego nie ma zastosowania
  • Odtwarzanie filmów jest obsługiwane na inteligentnych ekranach. Więcej informacji na temat obsługiwanych formatów i kodeków kontenerów znajdziesz na stronie Kodeki Google Nest Hub.

Udostępnianie zasobów z innych domen

Ponieważ aplikacje internetowe Interactive Canvas są hostowane w elemencie iframe, a ich źródło ma wartość null, musisz włączyć udostępnianie zasobów między domenami. Dzięki temu zasoby mogą przyjmować żądania z źródeł o wartości null.

Dalsze kroki

Aby dodać więcej funkcji do aplikacji internetowej, zapoznaj się z artykułem Kontynuacja tworzenia kampanii po stronie klienta lub po stronie serwera.