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:
- Zainicjuj bibliotekę interaktywnego języka JavaScript.
- Zarejestruj wywołania zwrotne zdarzeń interaktywnego obszaru roboczego.
- Podaj niestandardowe zasady aktualizowania aplikacji internetowej na podstawie stanu.
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.
Polecane biblioteki
Chociaż możesz utworzyć swój interfejs za pomocą dowolnej metody, Google zaleca używanie tych bibliotek:
- Greensock: służy do tworzenia skomplikowanych animacji.
- Pixi.js: do rysowania grafiki 2D w WebGL.
- Three.js: do rysowania grafiki 3D w WebGL.
- Rysunek na płótnie HTML5: do prostych rysunków.
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:
- Otwórz projekt w Actions w Konsoli Actions.
- W menu u góry kliknij Przetestuj.
- 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:
- 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.
- 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.
- Jeśli multimedia i obrazy są hostowane przez Firebase, przeczytaj artykuł Tworzenie niestandardowych linków do domen dynamicznych, aby skonfigurować CORS.
- Jeśli Twoje multimedia i obrazy znajdują się w Cloud Storage, zapoznaj się z artykułem o konfigurowaniu udostępniania zasobów między domenami (CORS), aby skonfigurować CORS.
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.