
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:
- Użytkownik powiedział: „Ustaw ekran na niebiesko” na urządzeniu z Asystentem.
- Platforma Actions on Google kieruje żądania użytkownika do Twojej logiki rozmowy, aby dopasować je do zamiaru użytkownika.
- 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). - Po wczytaniu aplikacji internetowej rejestruje wywołania zwrotne za pomocą Interactive Canvas API.
Jeśli odpowiedź Canvas zawiera pole
data
, wartość obiektu z poladata
jest przekazywana do wywołania zwrotnegoonUpdate
aplikacji internetowej. W tym przykładzie logika rozmowy wysyła odpowiedźCanvas
z polem danych zawierającym zmienną o wartościblue
. - Po otrzymaniu wartości
data
odpowiedziCanvas
wywołanie zwrotneonUpdate
może wykonać logikę niestandardową aplikacji internetowej i wprowadzić zdefiniowane zmiany. W tym przykładzie wywołanie zwrotneonUpdate
odczytuje kolor z poladata
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.