ym88659208ym87991671
Быстрый старт Canvas App | Документация SmartMarket
Skip to main content

Быстрый старт Canvas App

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

tip

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

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

Поверхность — мобильное приложение Салют или устройства SberDevices со встроенным виртуальным ассистентом.

Для работы на поверхности понадобится:

  • Собрать и запустить локальный сервер смартапа.

  • Настроить туннелирование.

  • Подготовить проект смартапа в SmartMarket Studio.

    Приложение «Список дел» поддерживает только один вебхук, который описан в файле в src/pages/api/hook.ts

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

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

Чтобы настроить туннелирование локального сервера сборки смартапа:

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

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

    npm start

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

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

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

    lt --port 3000

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

note

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

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

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

Чтобы запустить приложение на устройстве:

  1. Войдите в SmartMarket Studio.

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

  3. В разделе Приложения выберите SmartApp.

  4. В поле Название укажите «Список дел».

    По этому названию вы сможете запустить смартап на поверхностях.

  5. Выберите тип Canvas App и нажмите Создать проект.

    Откроется черновик проекта.

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

  7. В разделе Webhook смартапа, в раскрывающемся списке Тип проекта выберите SmartApp API.

    SmartApp API — протокол сообщений, которыми ассистент обменивается со смартапом. Обработка сообщений в смартапе «Список дел» реализована с помощью SaluteJS.

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

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

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

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

Чтобы запустить Canvas App на поверхности:

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

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней