Interaktywne obiekty canvas

Interaktywne Canvas to platforma opracowana przez Asystenta Google, która pozwala programistom dodawać do akcji konwersacyjne treści wizualne. Jest to interaktywna aplikacja internetowa, którą Asystent wysyła w odpowiedzi na rozmowę użytkownika. W przeciwieństwie do odpowiedzi z elementami rozszerzonymi, które istnieją w rozmowie z Asystentem, aplikacja internetowa Interactive renderuje się jako widok internetowy na pełnym ekranie.

Użyj interaktywnego obszaru roboczego, jeśli chcesz wykonać dowolną z tych czynności w akcji:

• Tworzenie treści wizualnych na pełnym ekranie
• Twórz niestandardowe animacje i przejścia
• Wizualizacja danych
• Tworzenie niestandardowych układów i GUI

Obsługiwane urządzenia

Interaktywne obszary robocze są obecnie dostępne na tych urządzeniach:

• Inteligentne ekrany
• Urządzenia mobilne z Androidem

Jak to działa

Działanie, które korzysta z obszaru interaktywnego, składa się z 2 głównych komponentów:

• Akcja konwersacyjna: działanie, które wykorzystuje interfejs konwersacyjny do realizacji żądań użytkowników. Do tworzenia rozmów możesz użyć narzędzia Actions Builder lub Actions SDK.
• Aplikacja internetowa: aplikacja internetowa frontendu z dostosowanymi treściami wizualnymi, które wysyłane są w odpowiedzi na rozmowę w ramach akcji. Aplikację internetową tworzysz przy użyciu technologii internetowych takich jak HTML, JavaScript i CSS.

Użytkownicy korzystający z interaktywnego obszaru roboczego wchodzą w interakcję z Asystentem Google, aby osiągnąć swój cel. Jednak w interaktywnym obszarze roboczym większość rozmów odbywa się w kontekście aplikacji internetowej. Gdy łączysz działanie konwersacji z aplikacją internetową, musisz umieścić w jej kodzie interfejs Interactive Canvas API.

• Interaktywna biblioteka Canvas: biblioteka JavaScript umieszczona w aplikacji internetowej, która umożliwia komunikację między aplikacją internetową a działaniem konwersacyjnym za pomocą interfejsu API. Więcej informacji znajdziesz w dokumentacji interfejsu Interactive Canvas API.

Oprócz uwzględnienia w bibliotece interaktywnej biblioteki Canvas musisz zwrócić typ odpowiedzi Canvas, aby otworzyć aplikację internetową na urządzeniu użytkownika. Możesz też użyć odpowiedzi Canvas, aby zaktualizować aplikację internetową na podstawie danych wejściowych użytkownika.

• Canvas: odpowiedź zawierająca adres URL aplikacji internetowej i dane na potrzeby jej przekazania. Kreator działań może automatycznie wypełniać odpowiedź Canvas odpowiednimi intencjami i bieżącymi scenami, aby zaktualizować aplikację internetową. Możesz też wysłać odpowiedź Canvas z webhooka za pomocą biblioteki realizacji Node.js. Więcej informacji znajdziesz w artykule Podpowiedzi dotyczące płótna.

Aby zilustrować sposób działania interaktywnego obszaru roboczego, wyobraź sobie hipotetyczne działanie znane jako Ciepłe kolory, które zmienia kolor ekranu urządzenia na określony przez użytkownika. Gdy użytkownik wywoła działanie, nastąpi ten proces:

1. Użytkownik powiedział: „Ustaw ekran na niebiesko” na urządzeniu z Asystentem.
2. Platforma Actions on Google kieruje żądania użytkownika do Twojej logiki rozmowy, aby dopasować je do zamiaru użytkownika.
3. Platforma łączy intencję ze sceną działania, która uruchamia zdarzenie i wysyła odpowiedź na urządzenie Canvas. Urządzenie wczytuje aplikację internetową, używając adresu URL podanego w odpowiedzi (jeśli nie został on jeszcze wczytany).
4. Po wczytaniu aplikacji internetowej rejestruje wywołania zwrotne za pomocą Interactive Canvas API. Jeśli odpowiedź Canvas zawiera pole data, wartość obiektu z pola data jest przekazywana do wywołania zwrotnego onUpdate aplikacji internetowej. W tym przykładzie logika rozmowy wysyła odpowiedź Canvas z polem danych zawierającym zmienną o wartości blue.
5. Po otrzymaniu wartości data odpowiedzi Canvas wywołanie zwrotne onUpdate może wykonać logikę niestandardową aplikacji internetowej i wprowadzić zdefiniowane zmiany. W tym przykładzie wywołanie zwrotne onUpdate odczytuje kolor z pola data i zmienia kolor ekranu na niebieski.

Realizacja po stronie klienta i po stronie serwera

Tworząc interaktywne działanie Canvas, możesz wybrać jedną z 2 ścieżek realizacji: realizacja serwera lub realizacja klienta. Gdy serwer realizuje żądania, przede wszystkim używasz interfejsów API, które wymagają webhooka. Dzięki realizacji klientów możesz używać interfejsów API po stronie klienta oraz interfejsów API, które wymagają webhooka dla funkcji niezwiązanych z Canvas (na przykład łączenia kont).

Jeśli kompilujesz za pomocą realizacji webhooka serwera na etapie tworzenia projektu, musisz wdrożyć webhook do obsługi logiki rozmów i kodu JavaScript po stronie klienta, aby zaktualizować aplikację internetową i zarządzać komunikacją między nimi.

Jeśli wybierzesz kompilację za pomocą realizacji klientów (obecnie dostępnej w wersji przedpremierowej), możesz używać nowych interfejsów API po stronie klienta do tworzenia logiki akcji wyłącznie w aplikacji internetowej, co upraszcza tworzenie, zmniejsza opóźnienie między etapami rozmów i umożliwia korzystanie z funkcji na urządzeniu. W razie potrzeby możesz też przełączyć się na logikę po stronie serwera z klienta.

Więcej informacji o funkcjach po stronie klienta znajdziesz w artykule Tworzenie kampanii po stronie klienta.

Dalsze kroki

Aby dowiedzieć się, jak utworzyć aplikację internetową do interaktywnego obszaru roboczego, przeczytaj artykuł Aplikacje internetowe.

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