Шаблон для интерфейса Canvas App
Вы можете использовать готовый opensource шаблон Plasma-temple, чтобы ускорить разработку интерфейса смартапа на любой поверхности.
Обратите внимание, что проект Plasma заморожен и активно не поддерживается. Но при необходимости можно ознакомиться с документацией и библиотекой компонентов.
Условия использования шаблона
Вы можете использовать шаблон Plasma-temple для смартапов, которые:
- имеют тип Canvas App;
- создаются с нуля;
- разрабатываются на JavaScript и TypeScript.
Элементы шаблона
Шаблон состоит из двух основных элементов:
- Готовые страницы — плеер, слайдер, список и т. п.
- Базовая интеграция с виртуальным ассистентом — системные интенты, навигационные команды и т. п.
Также шаблон имеет верхнеуровневые блоки, например, для формирования состояния приложения и использования компонентов экрана (галерея, детальная информация и т. п.).
Как работать с шаблоном
Шаблон Plasma-temple помогает только в построении интерфейса смартапа. Создание сценарной логики, например, какие события отсылать и на какие действия реагировать, остается на стороне разработчика.
При создании Canvas App можно использовать только часть предлагаемых элементов шаблона. Например, можно сделать свой экран или страницу, но использовать готовую маршрутизацию из пакета.
Пример использования шаблона
Шаблон Plasma-temple подходит для любых приложений. Например, его можно использовать в электронной коммерции (e-comm). В шаблоне уже продуман и реализован путь пользователя от выбора товара и до покупки.
Например, для создания интернет-магазина можно использовать следующие готовые элементы:
- GalleryPage — каталог товаров в виде карусели.
- Product — карточка товара с подробной информацией.
- CartPage — интерфейс корзины, где пользователь может посмотреть список выбранных товаров.
- ConfirmOrderPage — экран для подтверждения заказа (адрес, контакты, переход к оплате).
- Form — форма сбора данных (адрес, контакты) и т. д.
Скачать шаблон для электронной коммерции, посмотреть исходный код пакетов и получить готовый шаблон для типового смартапа можно на https://github.com в разделе salute-developers/canvas-example.