Przegląd (Dialogflow)

Interactive Canvas to platforma opracowana w Asystencie Google, która umożliwia deweloperom dodawanie atrakcyjnych treści wizualnych do rozmów. Jest to interaktywna aplikacja internetowa, którą Asystent wysyła w odpowiedzi na rozmowę użytkownika. W przeciwieństwie do tradycyjnych odpowiedzi rozszerzonych w rozmowie z Asystentem aplikacja internetowa Interactive renderuje się jako widok internetowy na pełnym ekranie.

Najlepiej skorzystać z interaktywnego obszaru roboczego, jeśli chcesz wykonać w akcji jedną z tych czynności:

  • Tworzenie treści wizualnych na pełnym ekranie
  • Tworzenie niestandardowych animacji i przejść
  • Wizualizacja danych
  • Tworzenie niestandardowych układów i graficznego interfejsu użytkownika
Ilustracja 1. Interaktywna gra stworzona przy użyciu funkcji Interactive Canvas.

Obsługiwane urządzenia

Interaktywne narzędzie Canvas jest obecnie dostępne na tych urządzeniach:

  • Inteligentne ekrany
  • Koncentratory Google Nest

  • Urządzenia mobilne z Androidem

Jak to działa

Akcja wykorzystująca obszar roboczy jest podobna do zwykłego działania konwersacyjnego. Użytkownik nadal prowadzi rozmowę z Asystentem, aby zrealizować swój cel. Jednak zamiast zwracać odpowiedzi w ramach rozmowy, interaktywne działanie obszaru roboczego wysyła odpowiedź, gdy użytkownik otwiera aplikację internetową na pełnym ekranie. Użytkownik pozostaje w interakcji z aplikacją internetową lub głosowo do momentu zakończenia rozmowy.

Działanie w interaktywnym obszarze roboczym składa się z kilku elementów:

  • Działanie konwersacyjne: działanie, które spełnia żądania użytkowników za pomocą interfejsu konwersacyjnego. Interaktywne działania Canvas korzystają z wyświetleń stron internetowych zamiast kart rozszerzonych lub prostych odpowiedzi tekstowych i głosowych. Akcje konwersacyjne korzystają z tych elementów:
    • Agent Dataflow: projekt w Dialogflow, który dostosowujesz do interakcji z użytkownikami akcji.
    • Realizacja: kod wdrażany jako webhook, który stosuje logikę konwersacyjną dla agenta Dialogflow i komunikuje się z aplikacją internetową.
  • Aplikacja internetowa: aplikacja internetowa interfejsu użytkownika z dostosowanymi elementami wizualnymi, które wysyła odpowiedź w trakcie rozmowy. Aplikację internetową tworzysz w standardach takich jak HTML, JavaScript i CSS.

Akcja konwersacyjna i aplikacja internetowa komunikują się ze sobą za pomocą:

  • Interaktywny Canvas Canvas API: interfejs API JavaScript, który umieszczasz w aplikacji internetowej, aby umożliwić komunikację między aplikacją internetową a akcją konwersacyjną.
  • HtmlResponse: Odpowiedź zawierająca adres URL aplikacji internetowej i dane, które mają być przekazywane. Aby zwrócić HtmlResponse, możesz użyć bibliotek klienta Node.js lub Java.

Aby zilustrować to, jak działa Obszar interaktywny, wyobraź sobie hipotetyczne działanie zwane Fajnymi kolorami, które zmienia kolor ekranu urządzenia na określony przez użytkownika. Po wywołaniu działania przez użytkownika przepływ będzie wyglądał tak:

  1. Użytkownik mówi Turn the screen blue do urządzenia z Asystentem.
  2. Platforma Actions on Google kieruje żądania użytkownika do Dialogflow, aby dopasować je do intencji.
  3. Realizacja dopasowanej intencji będzie uruchamiana, a na urządzenie zostanie wysłane żądanie HtmlResponse. Urządzenie korzysta z adresu URL, aby wczytać aplikację internetową, jeśli nie została jeszcze załadowana.
  4. Po wczytaniu aplikacji internetowej funkcja wywołania zwrotnego rejestruje interfejs API interactiveCanvas. Wartość obiektu data jest następnie przekazywana do zarejestrowanego wywołania zwrotnego onUpdate aplikacji internetowej. W naszym przykładzie realizacja polega na wysłaniu elementu HtmlResponse z wartością data zawierającą zmienną o wartości blue.
  5. Logika własna aplikacji internetowej odczytuje wartość data elementu HtmlResponse i wprowadza zdefiniowane zmiany. W naszym przykładzie ekran zmieni kolor na niebieski.
  6. interactiveCanvas wysyła aktualizację wywołania zwrotnego na urządzenie.

Dalsze kroki

Informacje o sposobie tworzenia interaktywnego obszaru roboczego znajdziesz na stronie Przegląd kompilacji.

Aby zobaczyć kod pełnego interaktywnego obszaru roboczego, zobacz przykład.