KateKate / todo-canvas-app

Пример реализации Canvas App на React

salute-demo-app

Это небольшое Todo приложение (добавление, выполнение и удаление задач. См. видео) демонстрирует пример взаимодействия с Assistant Client. Для работы необходимо создать проект в "SmartApp Code" и смартап в "SmartApp Studio", сгенерировать token и запустить проект.

Создание проекта в "SmartApp Code":

1. Идём на страницу SmartApp Code (ссылка);
2. Нажимаем "Создать проект";
3. Указываем "Имя";
4. Нажимаем "Создать";
5. Переходим на страницу с проектами (ссылка);
6. В меню проекта (кнопка "⋮") выбираем "Загрузить";
7. Выбирает архив "scenario-example.zip" (лежит в корне проекта);
8. Нажимаем "Сценарии";
9. Нажимаем "Собрать";
10. Нажимаем "Публикации";
11. Нажимаем "Получить вебхук" (URL на Webhook в буфере обмена).

Создание смартапа в "SmartApp Studio":

1. Идём на страницу SmartApp Studio (ссылка);
2. Нажимаем "Создать смартап";
3. Указываем "Название смартапа" (указываем это же название в файле ".env.sample", в строке "REACT_APP_SMARTAPP");
4. Переключаем "Выбор типа смартапа" на "Canvas App";
5. Переключаем "Выбор инструмента" на "Есть готовое приложение";
6. Указываем URL на "Webhook" (полученный в "SmartApp Code");
7. Указываем URL на "Frontend Endpoint" (url страницы, где будет размещаться клиентская часть вашего приложения. Для локального запуска не используется, можете указать любой);
8. Нажимаем "Создать смартап".

Генерация token:

1. Идём на страницу SmartApp Studio (ссылка);
2. В меню пользователя (правый верхний угол) выбираем "Настройки профиля";
3. Нажимаем "Auth Token";
4. Нажимаем "Обновить ключ";
5. Нажимаем "Скопировать ключ" (сейчас token в буфере);
6. Указываем токен в файле ".env.sample", в строке "REACT_APP_TOKEN".
7. Переименовываем файл ".env.sample" в ".env".

Запуск проекта:

npm install

npm start