16920403198114970697

Рис. 1. Интерактивная игра, созданная с использованием Interactive Canvas.

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

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

  • Создавайте полноэкранные визуальные эффекты
  • Создание пользовательских анимаций и переходов
  • Делайте визуализацию данных
  • Создание пользовательских макетов и графических интерфейсов

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

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

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

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

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

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

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

  • Библиотека Interactive Canvas: библиотека JavaScript, которую вы включаете в веб-приложение, чтобы обеспечить связь между веб-приложением и вашим диалоговым действием с помощью API. Дополнительные сведения см. в документации по Interactive Canvas API .

В дополнение к включению библиотеки Interactive Canvas вы должны вернуть тип ответа Canvas в диалог, чтобы открыть веб-приложение на устройстве пользователя. Вы также можете использовать ответ Canvas для обновления своего веб-приложения на основе ввода пользователя.

  • Canvas : ответ, содержащий URL-адрес веб-приложения и данные для его передачи. Actions Builder может автоматически заполнять ответ Canvas совпадающим намерением и текущими данными сцены для обновления веб-приложения. Кроме того, вы можете отправить ответ Canvas из веб-перехватчика, используя библиотеку выполнения Node.js. Дополнительные сведения см. в разделе Подсказки холста .

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

  1. Пользователь говорит: «Сделай экран синим». к устройству Assistant.
  2. Действия на платформе Google перенаправляют запрос пользователя в вашу диалоговую логику, чтобы он соответствовал намерению.
  3. Платформа сопоставляет намерение со сценой действия, которая запускает событие и отправляет ответ Canvas на устройство. Устройство загружает веб-приложение, используя URL-адрес, указанный в ответе (если он еще не загружен).
  4. Когда веб-приложение загружается, оно регистрирует обратные вызовы с помощью Interactive Canvas API. Если ответ Canvas содержит поле data , значение объекта поля data передается в зарегистрированный обратный вызов onUpdate веб-приложения. В этом примере диалоговая логика отправляет ответ Canvas с полем данных, которое включает переменную со значением blue .
  5. Получив значение data ответа Canvas , обратный вызов onUpdate может выполнить пользовательскую логику для вашего веб-приложения и внести определенные изменения. В этом примере обратный вызов onUpdate считывает цвет из data и делает экран синим.

Выполнение на стороне клиента и на стороне сервера

При создании интерактивного действия холста вы можете выбрать один из двух путей реализации: выполнение на сервере или выполнение на клиенте. При выполнении сервера вы в основном используете API, для которых требуется веб-перехватчик. С выполнением клиента вы можете использовать клиентские API и, при необходимости, API, которым требуется веб-перехватчик для функций, отличных от Canvas (например, для привязки учетных записей).

Если вы выбрали сборку с выполнением серверного веб-перехватчика на этапе создания проекта, вы должны развернуть веб-перехватчик для обработки диалоговой логики и клиентского JavaScript для обновления веб-приложения и управления связью между ними.

Если вы решите строить с выполнением клиента (в настоящее время доступно в Developer Preview), вы можете использовать новые API на стороне клиента для создания логики вашего действия исключительно в веб-приложении, что упрощает процесс разработки, уменьшает задержку между разговорами и позволяет вам использовать возможности устройства. При необходимости вы также можете переключиться на серверную логику с клиента.

Дополнительные сведения о возможностях на стороне клиента см. в разделе Сборка с выполнением на стороне клиента .

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

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

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