ym88659208ym87991671
Запускаем демо-приложение Canvas App | Документация для разработчиков

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

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

В этом разделе вы узнаете, как запустить демонстрационный 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.

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

    https://<веб-адрес-туннелированного-сервера>/api/hook
  2. В поле Хостинг фронтенда укажите адрес локального сервера, до которого настроено туннелирование:

    https://<веб-адрес-туннелированного-сервера>
  3. Сохраните проект.

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

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

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