ym88659208ym87991671
Шаблон для интерфейса Canvas App | Документация для разработчиков

Шаблон для интерфейса Canvas App

Обновлено 2 июля 2024

Вы можете использовать готовый opensource шаблон, чтобы ускорить разработку интерфейса смартапа на любой поверхности. Шаблон Plasma-temple доступен по ссылке.

С подробной информацией можно ознакомиться на сайте Plasma.

Условия использования шаблона

Вы можете использовать шаблон Plasma-temple для смартапов, которые:

  • имеют тип Canvas App;
  • создаются с нуля;
  • разрабатываются на JavaScript и TypeScript.

Элементы шаблона

Шаблон состоит из двух основных элементов:

  • Готовые страницы — плеер, слайдер, список и т. п.
  • Базовая интеграция с виртуальным ассистентом — системные интенты, навигационные команды и т. п.

Также шаблон имеет верхнеуровневые блоки, например, для формирования состояния приложения и использования компонентов экрана (галерея, детальная информация и т. п.).

Как работать с шаблоном

Шаблон Plasma-temple помогает только в построении интерфейса смартапа. Создание сценарной логики, например, какие события отсылать и на какие действия реагировать, остается на стороне разработчика.

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

Пример использования шаблона

Шаблон Plasma-temple подходит для любых приложений. Например, его можно использовать в электронной коммерции (e-comm). В шаблоне уже продуман и реализован путь пользователя от выбора товара и до покупки.

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

  • GalleryPage — каталог товаров в виде карусели.
GalleryPage
  • Product — карточка товара с подробной информацией.
Product
  • CartPage — интерфейс корзины, где пользователь может посмотреть список выбранных товаров.
CartPage
  • ConfirmOrderPage — экран для подтверждения заказа (адрес, контакты, переход к оплате).
ConfirmOrderPage
  • Form — форма сбора данных (адрес, контакты) и т. д.
Form

Скачать шаблон для электронной коммерции, посмотреть исходный код пакетов и получить готовый шаблон для типового смартапа можно на https://github.com в разделе salute-developers/canvas-example.

ПАО Сбербанк использует cookie для персонализации сервисов и удобства пользователей.
Вы можете запретить сохранение cookie в настройках своего браузера.