Проект состоит из серверной части (так называемого сценария, доступного по адресу http://localhost:3000/api/hook) и фронтенда (доступного по адресу http://localhost:3000/).
- Установить зависимости (
npm ci) - Заполнить
NEXT_PUBLIC_SMARTAPP_TOKENв.env.development(можно получить личный токен тут) - Запустить локальный сервер (
npm run dev) - Создать туннель до локального сервера (например установив ngrok и выполнив команду
ngrok http 3000) - Создать новый проект с типом
SmartApp -> Canvas Appв SmartMarket Studio - В параметрах проекта указать
- Тип проекта -> SmartApp API
- Внешняя ссылка ->
<https ссылка туннеля>/api/hook - Хостинг фронтенда ->
<https ссылка туннеля>
К стандартным девайсам доступным для отладки в Google Chrome можно добавить SberBox (см. скриншот) или другое устройство и зайти на http://localhost:3000/ в браузере.
Для отладки на реальном устройстве нужно войти на устройство под тем же SberId, что и в SmartMarket Studio и сказать голосовому ассистенту активационную фразу NEXT_PUBLIC_SMARTAPP_INIT_PHRASE из .env.development (например Запусти Moti). Если туннель (см. выше) активен, то этого достаточно, если нет, то вначале надо настроить туннелинг.
npm run build
npm startШаблон основан на nextjs
Все данные для Canvas App поступают из сценария от AssistantClient. То есть любой запрос за данными попадает в AssistantClient и только потом в серверную часть приложения (сценарий). При этом у сценария ровно одна точка входа - /api/hook. В примере такие запросы делаются при помощи хуков-оберток над useQuery/useMutation из библиотеки react-query.
При этом какие-то запросы могут бы инициированы голосовой командой пользователя, а какие-то взаимодействием пользователя с интерфейсом. Некоторые команды могут быть инициированы обоими способами. Во всех случаях полученные от AssistantClient данные записывают в кеш react-query.