Tworzenie aplikacji internetowej (Dialogflow)

Aplikacja internetowa to interfejs akcji, który korzysta z interaktywnego obszaru roboczego. Za pomocą z istniejących technologii internetowych (HTML, CSS i JavaScript) do projektowania do aplikacji internetowej. W większości przypadków Interactive Canvas może renderować treści z internetu w taki sposób, z przeglądarką, ale obowiązuje kilka ograniczeń, które: prywatność i bezpieczeństwo użytkowników. Zanim zaczniesz projektować swój interfejs, weź pod uwagę zgodnie z zasadami projektowania opisanymi w dokumencie Design guidelines .

Kody HTML i JavaScript aplikacji internetowej:

  • Zarejestruj wywołania zwrotne zdarzeń Interactive Canvas.
  • Zainicjuj bibliotekę JavaScript Interactive Canvas.
  • Udostępnij niestandardową logikę aktualizowania aplikacji internetowej na podstawie stanu.

Na tej stronie omawiamy zalecane sposoby tworzenia aplikacji internetowej, jak włączyć między aplikacją internetową a realizacją zamówień, a także ogólne wskazówki ograniczeń.

Możesz użyć dowolnej metody do utworzenia interfejsu użytkownika, jednak zalecamy wykonanie tych czynności: biblioteki:

Architektura

Google zdecydowanie zaleca korzystanie z architektury aplikacji składającej się z jednej strony. Takie podejście umożliwia optymalną wydajność i wspiera i konwersacji użytkowników. Interaktywnego obszaru roboczego można używać w połączeniu platformy frontendowe, 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 Biblioteka JavaScript Canvas umożliwiająca komunikację. między aplikacją internetową a akcją konwersacyjną.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Immersive 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/df-asdk/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/main.js"></script>
    <script src="js/log.js"></script>
  </body>
</html>

Komunikacja między realizację a aplikacją internetową

Po utworzeniu aplikacji internetowej i realizacji zamówień oraz załadowaniu jej do interaktywnej w bibliotece Canvas, aplikacji internetowej, musisz określić sposób interakcji między aplikacją internetową a realizacją. Do zmodyfikuj pliki zawierające logikę Twojej aplikacji internetowej.

action.js

Ten plik zawiera kod do zdefiniowania wywołania zwrotne i wywoływanie metod do interactiveCanvas. Wywołania zwrotne umożliwiają aplikacji internetowej reagowanie informacji lub żądań z Akcji konwersacyjnej, a metody umożliwiają wysyłanie informacji lub żądań do akcji konwersacyjnej.

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

//action.js
class Action {
  constructor(scene) {
    this.canvas = window.interactiveCanvas;
    this.scene = scene;
    const that = this;
    this.commands = {
      TINT: function(data) {
        that.scene.sprite.tint = data.tint;
      },
      SPIN: function(data) {
        that.scene.sprite.spin = data.spin;
      },
      RESTART_GAME: function(data) {
        that.scene.button.texture = that.scene.button.textureButton;
        that.scene.sprite.spin = true;
        that.scene.sprite.tint = 0x0000FF; // blue
        that.scene.sprite.rotation = 0;
      },
    };
  }

  /**
   * Register all callbacks used by Interactive Canvas
   * executed during scene creation time.
   *
   */
  setCallbacks() {
    const that = this;
    // declare interactive canvas callbacks
    const callbacks = {
      onUpdate(data) {
        try {
          that.commands[data.command.toUpperCase()](data);
        } catch (e) {
          // do nothing, when no command is sent or found
        }
      },
    };
    // called by the Interactive Canvas web app once web app has loaded to
    // register callbacks
    this.canvas.ready(callbacks);
  }
}

main.js

Ten plik tworzy scenę do aplikacji internetowej. W tym przykładzie obsługuje też przypadki powodzenia i niepowodzenia obietnicy zwróconej w sendTextQuery(). to fragment książki main.js:

// main.js
const view = document.getElementById('view');
// initialize rendering and set correct sizing
this.renderer = PIXI.autoDetectRenderer({
  transparent: true,
  antialias: true,
  resolution: this.radio,
  width: view.clientWidth,
  height: view.clientHeight,
});
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 wytycznych dotyczących projektowania interaktywnego obszaru roboczego, warto opracować akcję tak, by była skoncentrowana na głosie. Jednak niektóre funkcje Smart 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:

...
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;
});
...

W tym przypadku wartość zmiennej spin jest wysyłana przez funkcję interactiveCanvas API jako wywołanie zwrotne update. Realizacja zawiera funkcje logiczne który wyzwala intencję na podstawie wartości atrybutu spin.

...
app.intent('pause', (conv) => {
  conv.ask(`Ok, I paused spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: false,
    },
  }));
});
...

Dodaj więcej funkcji

Gdy znasz już podstawy, możesz ulepszyć i dostosować działanie przy użyciu interfejsów API specyficznych dla Canvas. W tej sekcji wyjaśniamy, jak wdrożyć te interfejsy API. w interaktywnej akcji obszaru roboczego.

sendTextQuery()

Metoda sendTextQuery() wysyła zapytania tekstowe do akcji konwersacyjnej do automatycznego wywoływania intencji. W tym przykładzie użyto parametru sendTextQuery() do Uruchom ponownie grę z trójkątem po kliknięciu przycisku. Gdy użytkownik kliknie „Uruchom grę ponownie”. przycisk, sendTextQuery() wywołuje Restart game i zwraca obietnicę. Ta obietnica daje wynik SUCCESS, jeśli intencja jest a w przeciwnym razie BLOCKED. Ten fragment wyzwala intencję i obsługuje przypadki powodzenia oraz niepowodzenia obietnicy:

//main.js
...
that.action.canvas.sendTextQuery('Restart game')
    .then((res) => {
      if (res.toUpperCase() === 'SUCCESS') {
        console.log(`Request in flight: ${res}`);
        that.button.texture = that.button.textureButtonDisabled;
        that.sprite.spin = false;
      } else {
        console.log(`Request in flight: ${res}`);
      }
    });
...

Jeśli obietnica kończy się wartością SUCCESS, intencja Restart game wysyła HtmlResponse do aplikacji internetowej:

//index.js
...
app.intent('restart game', (conv) => {
  conv.ask(new HtmlResponse({
    data: {
      command: 'RESTART_GAME',
    },
...

HtmlResponse aktywuje wywołanie zwrotne onUpdate(), które wykonuje kod we fragmencie kodu RESTART_GAME poniżej:

//action.js
...
RESTART_GAME: function(data) {
  that.scene.button.texture = that.scene.button.textureButton;
  that.scene.sprite.spin = true;
  that.scene.sprite.tint = 0x0000FF; // blue
  that.scene.sprite.rotation = 0;
},
...

OnTtsMark()

Wywołanie zwrotne OnTtsMark() jest wywoływane przez dodanie tagu <mark> o unikalnej nazwie w odpowiedź SSML do użytkownika. Poniżej znajdują się fragmenty z fragmentu utworu Snowman, OnTtsMark() synchronizuje animację w aplikacji internetowej z odpowiednią zamianą tekstu na mowę dane wyjściowe. Gdy akcja powie do użytkownika Przykro nam, że nie jesteś, aplikacja internetowa zapisze się w pisowni wybiera właściwe słowo, a następnie wyświetla użytkownikowi litery.

Intencja Game Over Reveal Word zawiera znak niestandardowy w odpowiedzi na żądanie użytkownik, który przegrał grę:

//index.js
...
app.intent('Game Over Reveal Word', (conv, {word}) => {
  conv.ask(`<speak>Sorry, you lost.<mark name="REVEAL_WORD"/> The word is ${word}.` +
    `${PLAY_AGAIN_INSTRUCTIONS}</speak>`);
  conv.ask(new HtmlResponse());
});
...

Ten fragment kodu rejestruje wywołanie zwrotne OnTtsMark(), sprawdza nazwę i wykonuje funkcję revealCorrectWord(), która aktualizuje aplikację internetową:

//action.js
...
setCallbacks() {
  const that = this;
  // declare assistant canvas action callbacks
  const callbacks = {
    onTtsMark(markName) {
      if (markName === 'REVEAL_WORD') {
        // display the correct word to the user
        that.revealCorrectWord();
      }
    },
...

Ograniczenia

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

  • Brak plików cookie
  • Brak pamięci lokalnej
  • Brak geolokalizacji
  • Nie używa kamery
  • Brak wyskakujących okienek
  • Nie przekraczaj limitu 200 MB pamięci
  • Nagłówek firmy zewnętrznej zajmuje górną część ekranu
  • Do filmów nie można zastosować żadnych stylów
  • Można używać tylko jednego elementu multimedialnego naraz
  • Brak wideo HLS
  • Brak bazy danych Web SQL
  • Brak obsługi interfejsu SpeechRecognition komponentu Interfejs Web Speech API.
  • Brak nagrywania dźwięku i obrazu
  • Nie można zastosować ustawienia trybu ciemnego
.

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. Dzięki temu Twoje zasoby będą akceptować żądań z pustych źródeł.