Canvas App


Canvas App — это тип смартапа с красивым интерфейсом и виртуальным ассистентом. Управлять Canvas App можно разными способами: голосом, текстовыми сообщениями, жестами, касанием и пультом.

Вы можете увидеть реальные примеры Canvas App на своих устройствах. Например, попробуйте запустить пошаговые рецепты Супершеф или закажите продукты через SberBox.

Пример Canvas App — «Самокат»

Создание Canvas App

Шаг 1 — разработка

Canvas App состоит из двух ключевых элементов — интерфейса и сценария. Вы можете разработать любой интерфейс, а также любое количество и сложность сценариев.

Для создания и запуска сценария рекомендуем использовать инструмент SmartApp Code — это среда разработки на JavaScript и языке написания сценариев DSL. Вы можете выбрать этот инструмент при создании смартапа в SmartMarket Studio.

Фронтенд может быть сделан на любой веб-технологии с возможностью запуска через компонент WebView. Здесь вы можете использовать Assistant Client — библиотеку для взаимодействия с виртуальным ассистентом.

Также для взаимодействия с виртуальным ассистентом необходимо использовать последнюю версию JavaScript API. Предварительная обработка текста и вызов приложения реализуются и поддерживаются на стороне SmartMarket Studio.


Шаг 2 — тестирование

Кроме самостоятельного тестирования смартапа на реальных устройствах, вы можете использовать библиотеку Assistant Client, которая позволяет отлаживать взаимодействие с ассистентом через браузер.

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


Шаг 3 — модерация

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


Шаг 4 — публикация

После пройденной модерации ваш смартап готов к публикации. Для публикации нажмите кнопку "Опубликовать" в настройках SmartMarket Studio, и ваш смартап появится в каталоге приложений SmartMarket.

После публикации вы можете подключить метрики и монетизацию. Обратите внимание, что монетизация будет доступна, только если вы зарегистрированы в SmartMarket Studio как юридическое лицо или индивидуальный предприниматель.

Особенности разработки

Поддержка медиаконтента

Canvas App запускается и работает внутри компонента WebView. Это значит, что смартап поддерживает те же возможности, что и обычный веб-браузер. Однако у Canvas App есть несколько ограничений, из-за которых вам будут не доступны следующие возможности:

  • использование localStorage для хранения данных в браузере;
  • использование getUserMedia для получения доступа к камере и микрофону;
  • получение доступа к персональным данным пользователей (например, к геолокации).

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


Портирование навыков

Если у вас есть навыки, разработанные на других платформах, вы можете перенести их в SmartMarket. Для этого необходимо создать новый смартап в SmartMarket Studio и загрузить в выбранную среду разработки архив со сценарием. Подробнее о портировании навыков:


Canvas App для SberBox

Разработка Canvas App для SberBox имеет ряд особенностей:

Для разработки смартапа, который будет соответствовать необходимым требованиям модерации, посмотрите пример проектирования Canvas App для SberBox.


Canvas App для SberPortal

Если вы хотите выпустить Canvas App для SberPortal, то вам необходимо учитывать особенности сенсорного экрана и способы работы с медиаресурсами. Подробнее читайте в разделе Разработка Canvas App для SberPortal.


Canvas App для приложений

Для корректной работы Canvas App в мобильных приложениях на iOS и Android (например, в Салют) необходимо реализовать поддержку определенных методов и адаптировать смартап под мобильную вёрстку.

Подробнее об особенностях разработки читайте в разделе Разработка Canvas App для мобильных приложений.

Дополнительные инструменты

Готовая дизайн-система

При создании Canvas App вы можете использовать дизайн-систему Plasma. Plasma — это набор готовых компонентов интерфейса, которые позволят вашему смартапу соответствовать единому стилю SmartMarket.

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


Создание карточек смартапа

Чтобы визуально структурировать большой объем информации на экране, используйте карточки. Внешний вид этого элемента зависит от устройства, на котором будет запускаться смартап — SberBox, SberPortal или мобильное приложение. Подробнее о создании карточек читайте в разделе Элементы интерфейса.


Оживление речи ассистента

Чтобы сделать речь ассистента живой и насыщенной, используйте следующие инструменты:

  • готовая библиотека звуков — позволит вам добавить в Canvas App различные звуковые эффекты. Например, имитацию дождя, детский смех или барабанную дробь;
  • SSML-разметка — позволит дополнить речь ассистентов междометиями, эмоциональными восклицаниями и дополнительными фразами.

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней