Управляющее приложение для Telegram бота
Веб-интерфейс для управления тестами Telegram бота.
Возможности
- ✅ Управление тестами (создание, редактирование, удаление)
- ✅ Управление категориями тестов
- ✅ Управление вопросами и вариантами ответов
- ✅ Загрузка изображений к вопросам
- ✅ Фильтрация и поиск
- ✅ Современный адаптивный интерфейс
Структура проекта
app.control-bot/
├── main.py # Основное приложение с веб-сервером
├── web/ # Веб-интерфейс
│ ├── index.html # Главная страница
│ └── static/
│ ├── css/
│ │ └── style.css # Стили
│ └── js/
│ ├── api.js # Работа с API
│ └── app.js # Основная логика приложения
├── pyproject.toml # Конфигурация проекта
└── README.md # Документация
Запуск
Предварительные требования
-
Запущенный API сервер на
http://localhost:8000cd ../api python run_api.py -
Python 3.12+ (базовые библиотеки)
Запуск веб-интерфейса
cd app.control-bot
python main.py
Веб-интерфейс будет доступен по адресу: http://localhost:3000
Браузер откроется автоматически через 2 секунды после запуска.
Использование
Управление тестами
-
Создание теста:
- Нажмите "Добавить тест"
- Заполните название и описание
- Выберите категорию (опционально)
- Установите лимит времени (опционально)
- Выберите статус (активный/неактивный)
-
Редактирование теста:
- Нажмите кнопку "Редактировать" в строке теста
- Измените необходимые поля
- Сохраните изменения
-
Удаление теста:
- Нажмите кнопку "Удалить" в строке теста
- Подтвердите удаление
Управление категориями
- Перейдите на вкладку "Категории"
- Используйте кнопку "Добавить категорию" для создания новой
- Редактируйте или удаляйте существующие категории
Управление вопросами
- Перейдите на вкладку "Вопросы"
- Выберите тест из выпадающего списка
- Добавляйте вопросы с помощью кнопки "Добавать вопрос"
Типы вопросов:
- Один ответ - радиокнопки, один правильный ответ
- Несколько ответов - чекбоксы, может быть несколько правильных
- Текстовый ввод - пользователь вводит ответ текстом
Работа с изображениями:
- Загружайте изображения к вопросам
- Поддерживаются форматы: JPG, PNG, GIF, WebP
- Изображения сохраняются в базе данных
API Integration
Веб-интерфейс работает с API по адресу http://localhost:8000/api/v1
Используемые эндпоинты:
GET/POST /tests- Управление тестамиGET/POST /test-categories- Управление категориямиGET/POST /questions- Управление вопросамиGET/POST /answer-options- Управление вариантами ответовPOST /images/upload- Загрузка изображенийGET /images/{id}- Получение изображений
Технологии
- Backend: Python (http.server для статических файлов)
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- UI Framework: Bootstrap 5.3
- Icons: Bootstrap Icons
- API: RESTful API с JSON
Особенности
- Полностью адаптивный дизайн
- Валидация форм на клиентской стороне
- Уведомления об операциях
- Загрузка с индикаторами прогресса
- Подтверждение удаления
- Автоматическое обновление данных
- Поддержка изображений
- Фильтрация и поиск
Устранение неполадок
API сервер не запущен
❌ Ошибка: Cannot connect to API server
Решение: Запустите API сервер в папке ../api
Порт уже используется
❌ Ошибка: Порт 3000 уже используется
Решение: Остановите процесс на порту 3000 или измените порт в main.py
Проблемы с CORS
Если возникают ошибки CORS, убедитесь, что в конфигурации API разрешены запросы с http://localhost:3000
Разработка
Для изменения порта веб-сервера отредактируйте main.py:
web_interface = WebInterface(port=3001) # Изменить порт
Для изменения адреса API отредактируйте web/static/js/api.js:
const API_BASE_URL = 'http://localhost:8001/api/v1'; // Изменить адрес