В этом разделе вы узнаете, как запустить демонстрационный Canvas App «Список дел» локально и на устройстве.
Приложение «Список дел» создано с помощью React-фреймворка Next.js и фреймворка для разработки смартапов SaluteJS.
Для локального тестирования и обмена сообщениями с ассистентом в смартапе подключена библиотека Assistant Client.
Подробно об архитектуре приложения читайте в разделе Настраиваем обмен данными.
Локальный запуск
Для локального запуска в браузере вам потребуется:
- Node.js версии 12.0.0 и выше.
- Интернет для установки зависимостей.
Для запуска приложения на локальном сервере:
В папке репозитория установите необходимые зависимости с помощью команды:
npm ci
В файле
.env.development
, в полеNEXT_PUBLIC_SMARTAPP_TOKEN
укажите токен для авторизации запросов к ассистенту.Запустите приложение в режиме разработки на локальном сервере:
npm run dev
По умолчанию сервер приложения запускается по адресу
http://localhost:3000/
.
Бэкенд приложения написан с помощью методов SaluteJS и хранится в src/scenario
.
Чтобы упростить тестирование интерфейса смартапа, добавьте устройство SberBox с разрешением 1920 х 1080 в список эмулируемых браузером устройств.
Настройка туннелирования локального сервера
Настройте туннелирование с помощью утилиты localtunnel.
Для настройки туннелирования локального сервера сборки смартапа:
Соберите смартап с помощью команды:
npm run build
Запустите сервер приложения:
npm start
По умолчанию сервер приложения запускается по адресу
http://localhost:3000/
.Установите утилиту localtunnel.
Для настройки туннелирования вы можете использовать любой удобный инструмент, например ngrok.
Включите туннелирование с помощью команды:
lt --port 3000
Команда вернет веб-адрес, по которому локальный сервер смартапа будет доступен в Интернете.
Создание проекта смартапа
Смартап — проект Studio, который нужен для запуска приложений на поверхностях с ассистентом Салют.
Для запуска приложения на устройстве:
Войдите в Studio. Для удобства регистрации и тестирования используйте Сбер ID.
Нажмите Создать проект.
В разделе Мини-приложения Салют выберите CanvasApp.
В поле Название укажите «Список дел». При необходимости создайте группу.
Нажмите Создать проект. Откроется черновик проекта.
Выберите вкладку Параметры.
В разделе Активационные имена нажмите Добавить имя и укажите «Туду тест». По этой реплике вы сможете запустить смартап в тестовом окружении в браузере и на поверхностях: в мобильном приложении Салют и на устройствах SberDevices.
Активационное имя демонстрационного смартапа задано в файле
.env.development
, в полеNEXT_PUBLIC_SMARTAPP_INIT_PHRASE
.Чтобы смартап автоматически запускался при тестировании в браузере, укажите имя в качестве названия проекта.
В разделе Сценарий смартапа выберите тип сценария SmartApp API.
В поле Внешняя ссылка укажите адрес вебхука смартапа:
https://<веб-адрес-туннелированного-сервера>/api/hook
В поле Хостинг фронтенда укажите адрес локального сервера, до которого настроено туннелирование:
https://<веб-адрес-туннелированного-сервера>
Сохраните проект.
Запуск приложения на поверхности
Для запуска Canvas App на поверхности:
- Авторизуйтесь на поверхности, используя тот же Сбер ID, что и для входа в Studio.
- Скажите ассистенту: «Салют, запусти туду тест».