160 lines
6.1 KiB
Markdown
160 lines
6.1 KiB
Markdown
# Управляющее приложение для Telegram бота
|
||
|
||
Веб-интерфейс для управления тестами Telegram бота.
|
||
|
||
## Возможности
|
||
|
||
- ✅ Управление тестами (создание, редактирование, удаление)
|
||
- ✅ Управление категориями тестов
|
||
- ✅ Управление вопросами и вариантами ответов
|
||
- ✅ Загрузка изображений к вопросам
|
||
- ✅ Фильтрация и поиск
|
||
- ✅ Современный адаптивный интерфейс
|
||
|
||
## Структура проекта
|
||
|
||
```
|
||
app.control-bot/
|
||
├── main.py # Основное приложение с веб-сервером
|
||
├── web/ # Веб-интерфейс
|
||
│ ├── index.html # Главная страница
|
||
│ └── static/
|
||
│ ├── css/
|
||
│ │ └── style.css # Стили
|
||
│ └── js/
|
||
│ ├── api.js # Работа с API
|
||
│ └── app.js # Основная логика приложения
|
||
├── pyproject.toml # Конфигурация проекта
|
||
└── README.md # Документация
|
||
```
|
||
|
||
## Запуск
|
||
|
||
### Предварительные требования
|
||
|
||
1. **Запущенный API сервер** на `http://localhost:8000`
|
||
```bash
|
||
cd ../api
|
||
python run_api.py
|
||
```
|
||
|
||
2. **Python 3.12+** (базовые библиотеки)
|
||
|
||
### Запуск веб-интерфейса
|
||
|
||
```bash
|
||
cd app.control-bot
|
||
python main.py
|
||
```
|
||
|
||
Веб-интерфейс будет доступен по адресу: `http://localhost:3000`
|
||
|
||
Браузер откроется автоматически через 2 секунды после запуска.
|
||
|
||
## Использование
|
||
|
||
### Управление тестами
|
||
|
||
1. **Создание теста:**
|
||
- Нажмите "Добавить тест"
|
||
- Заполните название и описание
|
||
- Выберите категорию (опционально)
|
||
- Установите лимит времени (опционально)
|
||
- Выберите статус (активный/неактивный)
|
||
|
||
2. **Редактирование теста:**
|
||
- Нажмите кнопку "Редактировать" в строке теста
|
||
- Измените необходимые поля
|
||
- Сохраните изменения
|
||
|
||
3. **Удаление теста:**
|
||
- Нажмите кнопку "Удалить" в строке теста
|
||
- Подтвердите удаление
|
||
|
||
### Управление категориями
|
||
|
||
1. Перейдите на вкладку "Категории"
|
||
2. Используйте кнопку "Добавить категорию" для создания новой
|
||
3. Редактируйте или удаляйте существующие категории
|
||
|
||
### Управление вопросами
|
||
|
||
1. Перейдите на вкладку "Вопросы"
|
||
2. Выберите тест из выпадающего списка
|
||
3. Добавляйте вопросы с помощью кнопки "Добавать вопрос"
|
||
|
||
#### Типы вопросов:
|
||
|
||
- **Один ответ** - радиокнопки, один правильный ответ
|
||
- **Несколько ответов** - чекбоксы, может быть несколько правильных
|
||
- **Текстовый ввод** - пользователь вводит ответ текстом
|
||
|
||
#### Работа с изображениями:
|
||
|
||
- Загружайте изображения к вопросам
|
||
- Поддерживаются форматы: 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`:
|
||
|
||
```python
|
||
web_interface = WebInterface(port=3001) # Изменить порт
|
||
```
|
||
|
||
Для изменения адреса API отредактируйте `web/static/js/api.js`:
|
||
|
||
```javascript
|
||
const API_BASE_URL = 'http://localhost:8001/api/v1'; // Изменить адрес
|
||
```
|