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

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

Studio

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

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

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

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

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

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

• Node.js версии 12.0.0 и выше.
• Интернет для установки зависимостей.

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

1. Склонируйте репозиторий смартапа.

2. В папке репозитория установите необходимые зависимости с помощью команды:

   npm ci

3. В файле .env.development, в поле NEXT_PUBLIC_SMARTAPP_TOKEN укажите токен для авторизации запросов к ассистенту.

4. Запустите приложение в режиме разработки на локальном сервере:

   npm run dev

   По умолчанию сервер приложения запускается по адресу http://localhost:3000/.

Бэкенд приложения написан с помощью методов SaluteJS и хранится в src/scenario.

Чтобы упростить тестирование интерфейса смартапа, добавьте устройство SberBox с разрешением 1920 х 1080 в список эмулируемых браузером устройств.

Настройка туннелирования локального сервера

Настройте туннелирование с помощью утилиты localtunnel.

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

1. Соберите смартап с помощью команды:

   npm run build

2. Запустите сервер приложения:

   npm start

   По умолчанию сервер приложения запускается по адресу http://localhost:3000/.

3. Установите утилиту localtunnel.

   Для настройки туннелирования вы можете использовать любой удобный инструмент, например ngrok.

4. Включите туннелирование с помощью команды:

   lt --port 3000

   Команда вернет веб-адрес, по которому локальный сервер смартапа будет доступен в Интернете.

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

Смартап — проект Studio, который нужен для запуска приложений на поверхностях с ассистентом Салют.

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

1. Войдите в Studio. Для удобства регистрации и тестирования используйте Сбер ID.

2. Нажмите Создать проект.

3. В разделе Мини-приложения Салют выберите CanvasApp.

4. В поле Название укажите «Список дел». При необходимости создайте группу.

5. Нажмите Создать проект. Откроется черновик проекта.

6. Выберите вкладку Параметры.

7. В разделе Активационные имена нажмите Добавить имя и укажите «Туду тест». По этой реплике вы сможете запустить смартап в тестовом окружении в браузере и на поверхностях: в мобильном приложении Салют и на устройствах SberDevices.

   Активационное имя демонстрационного смартапа задано в файле .env.development, в поле NEXT_PUBLIC_SMARTAPP_INIT_PHRASE.

   Чтобы смартап автоматически запускался при тестировании в браузере, укажите имя в качестве названия проекта.

8. В разделе Сценарий смартапа выберите тип сценария SmartApp API.

9. В поле Внешняя ссылка укажите адрес вебхука смартапа:

   https://<веб-адрес-туннелированного-сервера>/api/hook

10. В поле Хостинг фронтенда укажите адрес локального сервера, до которого настроено туннелирование:

    https://<веб-адрес-туннелированного-сервера>

11. Сохраните проект.

Запуск приложения на поверхности

Для запуска Canvas App на поверхности:

1. Авторизуйтесь на поверхности, используя тот же Сбер ID, что и для входа в Studio.
2. Скажите ассистенту: «Салют, запусти туду тест».