Обзор (диалоговое окно)

Interactive Canvas — это платформа, построенная на Google Assistant, которая позволяет разработчикам добавлять визуальные эффекты с эффектом присутствия в диалоговые действия. Этот визуальный опыт представляет собой интерактивное веб-приложение, которое Ассистент отправляет в качестве ответа пользователю во время разговора. В отличие от традиционных расширенных ответов , которые существуют в беседе с помощником, веб-приложение Interactive Canvas отображается как полноэкранное веб-представление.

Вам следует использовать Интерактивный холст, если вы хотите выполнить любое из следующих действий в своем действии:

  • Создавайте полноэкранные визуальные эффекты
  • Создание пользовательских анимаций и переходов
  • Делайте визуализацию данных
  • Создание пользовательских макетов и графических интерфейсов
Рис. 1. Интерактивная игра, созданная с использованием Interactive Canvas.

Поддерживаемые устройства

Интерактивный холст в настоящее время доступен на следующих устройствах:

  • Умные дисплеи
  • Концентраторы Google Nest

  • Мобильные устройства Android

Как это работает

Действие, использующее интерактивное полотно, работает аналогично обычному диалоговому действию. У пользователя все еще есть диалог с помощником, чтобы достичь своей цели; однако вместо того, чтобы возвращать ответы в диалоге, интерактивное действие холста отправляет ответ пользователю, который открывает полноэкранное веб-приложение. Пользователь продолжает взаимодействовать с веб-приложением с помощью голоса или касаний, пока разговор не закончится.

В действии, использующем Interactive Canvas, есть несколько компонентов:

  • Разговорное действие : действие, которое использует диалоговый интерфейс для выполнения запросов пользователя. Интерактивные действия холста используют веб-представления для отображения ответов вместо расширенных карточек или простых текстовых и голосовых ответов. Диалоговые действия используют следующие компоненты:
    • Агент Dialogflow : проект в Dialogflow, который вы настраиваете для общения с пользователями Action.
    • Выполнение : код, развернутый как веб-перехватчик, который реализует диалоговую логику для вашего агента Dialogflow и взаимодействует с вашим веб-приложением.
  • Веб-приложение: внешнее веб-приложение с настраиваемыми визуальными элементами, которые ваше действие отправляет пользователям в ответ во время разговора. Вы создаете веб-приложение с использованием таких веб-стандартов, как HTML, JavaScript и CSS.

Диалоговое действие и веб-приложение взаимодействуют друг с другом, используя следующее:

  • Interactive Canvas API : JavaScript API, который вы включаете в веб-приложение, чтобы обеспечить связь между веб-приложением и диалоговым действием.
  • HtmlResponse : ответ, содержащий URL-адрес веб-приложения и данные для его передачи. Вы можете использовать клиентские библиотеки Node.js или Java для возврата HtmlResponse .

Чтобы проиллюстрировать, как работает Interactive Canvas, представьте себе гипотетическое действие Cool Colors , которое изменяет цвет экрана устройства на цвет, указанный пользователем. После того, как пользователь вызывает действие, поток выглядит следующим образом:

  1. Пользователь говорит Turn the screen blue устройству «Помощник».
  2. Действия на платформе Google перенаправляют запрос пользователя в Dialogflow, чтобы он соответствовал намерению.
  3. Выполнение совпадающего намерения выполняется, и на устройство отправляется HtmlResponse . Устройство использует URL-адрес для загрузки веб-приложения, если оно еще не загружено.
  4. Когда веб-приложение загружается, оно регистрирует обратные вызовы с помощью interactiveCanvas . Затем значение объекта data передается в зарегистрированный обратный вызов onUpdate веб-приложения. В нашем примере выполнение отправляет HtmlResponse с data , которые включают переменную со значением blue .
  5. Пользовательская логика для вашего веб-приложения считывает значение data HtmlResponse и вносит определенные изменения. В нашем примере это делает экран синим.
  6. interactiveCanvas отправляет обновление обратного вызова на устройство.

Следующие шаги

Чтобы узнать, как создать действие интерактивного холста, см. страницу «Обзор сборки» .

Чтобы увидеть код полного интерактивного действия холста, см. пример .