Запускаем демо-приложение Canvas App

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

В этом разделе вы узнаете, как запустить демонстрационный Canvas App «Список дел» локально и на устройстве.

Приложение «Список дел» создано с помощью React-фреймворка Next.js и фреймворка для разработки смартапов SaluteJS.

Для локального тестирования и обмена сообщениями с ассистентом в смартапе подключена библиотека Assistant Client.

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

Локальный запуск

Для локального запуска в браузере вам потребуется:

Для запуска приложения на локальном сервере:

Склонируйте репозиторий смартапа .
В папке репозитория установите необходимые зависимости с помощью команды:
```
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.
Скажите ассистенту: «Салют, запусти туду тест».