![](https://developers.google.cn/static/assistant/interactivecanvas/images/interactivecanvasgame.gif?authuser=5&hl=ru)
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 , которое изменяет цвет экрана устройства на цвет, указанный пользователем. После того, как пользователь вызывает действие, происходит следующий поток:
- Пользователь говорит: «Сделай экран синим». к устройству Assistant.
- Действия на платформе Google перенаправляют запрос пользователя в вашу диалоговую логику, чтобы он соответствовал намерению.
- Платформа сопоставляет намерение со сценой действия, которая запускает событие и отправляет ответ
Canvas
на устройство. Устройство загружает веб-приложение, используя URL-адрес, указанный в ответе (если он еще не загружен). - Когда веб-приложение загружается, оно регистрирует обратные вызовы с помощью Interactive Canvas API. Если ответ Canvas содержит поле
data
, значение объекта поляdata
передается в зарегистрированный обратный вызовonUpdate
веб-приложения. В этом примере диалоговая логика отправляет ответCanvas
с полем данных, которое включает переменную со значениемblue
. - Получив значение
data
ответаCanvas
, обратный вызовonUpdate
может выполнить пользовательскую логику для вашего веб-приложения и внести определенные изменения. В этом примере обратный вызовonUpdate
считывает цвет изdata
и делает экран синим.
![](https://developers.google.cn/static/assistant/interactivecanvas/images/canvas-overview-diagram.png?authuser=5&hl=ru)
Выполнение на стороне клиента и на стороне сервера
При создании интерактивного действия холста вы можете выбрать один из двух путей реализации: выполнение на сервере или выполнение на клиенте. При выполнении сервера вы в основном используете API, для которых требуется веб-перехватчик. С выполнением клиента вы можете использовать клиентские API и, при необходимости, API, которым требуется веб-перехватчик для функций, отличных от Canvas (например, для привязки учетных записей).
Если вы выбрали сборку с выполнением серверного веб-перехватчика на этапе создания проекта, вы должны развернуть веб-перехватчик для обработки диалоговой логики и клиентского JavaScript для обновления веб-приложения и управления связью между ними.
Если вы решите строить с выполнением клиента (в настоящее время доступно в Developer Preview), вы можете использовать новые API на стороне клиента для создания логики вашего действия исключительно в веб-приложении, что упрощает процесс разработки, уменьшает задержку между разговорами и позволяет вам использовать возможности устройства. При необходимости вы также можете переключиться на серверную логику с клиента.
Дополнительные сведения о возможностях на стороне клиента см. в разделе Сборка с выполнением на стороне клиента .
Следующие шаги
Чтобы узнать, как создать веб-приложение для интерактивного холста, см. раздел Веб-приложения .
Чтобы увидеть код полного интерактивного действия холста, см. пример на GitHub .