Andrew K. Choi
cfc93cb99a
All checks were successful
continuous-integration/drone/push Build is passing
Changes: - Fix nutrition service: add is_active column and Pydantic validation for UUID/datetime - Add location-based alerts feature: users can now see alerts within 1km radius - Fix CORS and response serialization in nutrition service - Add getCurrentLocation() and loadAlertsNearby() functions - Improve UI for nearby alerts display with distance and response count
168 lines
7.1 KiB
Markdown
168 lines
7.1 KiB
Markdown
# 🎨 Фронтенд для тестирования API
|
||
|
||
Простой, но функциональный веб-интерфейс для тестирования всех ендпоинтов Women's Safety App API.
|
||
|
||
## 🚀 Запуск
|
||
|
||
### Способ 1: Использование скрипта
|
||
```bash
|
||
bash run_frontend.sh
|
||
```
|
||
|
||
### Способ 2: Прямой запуск Python сервера
|
||
```bash
|
||
cd /home/trevor/dev/chat
|
||
python3 -m http.server 8888 --bind 127.0.0.1
|
||
```
|
||
|
||
## 📖 Использование
|
||
|
||
1. **Откройте браузер** и перейдите на: http://localhost:8888/frontend_test.html
|
||
|
||
2. **Зарегистрируйтесь или войдите**:
|
||
- Используйте вкладку "Регистрация" для создания новой учётной записи
|
||
- Используйте вкладку "Вход" для входа с существующей учётной записью
|
||
- После входа вы получите JWT токен
|
||
|
||
3. **Протестируйте API**:
|
||
- **👤 Пользователи**: управление профилем и просмотр пользователей
|
||
- **🚨 Алерты**: создание и просмотр экстренных алертов
|
||
- **📅 Календарь**: добавление и просмотр событий календаря
|
||
- **🔔 Уведомления**: отправка уведомлений
|
||
- **❤️ Health**: проверка статуса всех сервисов
|
||
|
||
## 🎯 Основные возможности
|
||
|
||
### 🔐 Аутентификация
|
||
- ✅ Регистрация новых пользователей
|
||
- ✅ Вход в систему с получением JWT токена
|
||
- ✅ Сохранение токена в локальном хранилище
|
||
- ✅ Копирование токена в буфер обмена
|
||
|
||
### 👤 Управление пользователями
|
||
- ✅ Получение профиля текущего пользователя
|
||
- ✅ Просмотр всех пользователей
|
||
- ✅ Обновление информации профиля
|
||
|
||
### 🚨 Emergency System
|
||
- ✅ Создание экстренных алертов
|
||
- ✅ Просмотр существующих алертов
|
||
- ✅ Указание местоположения (широта/долгота)
|
||
- ✅ Выбор типа экстренного события
|
||
|
||
### 📅 Календарь здоровья
|
||
- ✅ Просмотр записей календаря
|
||
- ✅ Добавление новых записей
|
||
- ✅ Отслеживание цикла, настроения и энергии
|
||
- ✅ Указание даты и типа события
|
||
|
||
### 🔔 Уведомления
|
||
- ✅ Отправка уведомлений
|
||
- ✅ Установка приоритета
|
||
- ✅ Кастомизация заголовка и текста
|
||
|
||
### ❤️ Здоровье сервиса
|
||
- ✅ Проверка статуса всех микросервисов
|
||
- ✅ Мониторинг API Gateway
|
||
- ✅ Проверка доступности каждого сервиса
|
||
|
||
## 🎨 Интерфейс
|
||
|
||
### Левая панель
|
||
- Аутентификация и навигация
|
||
- Вход и регистрация
|
||
- Список всех ендпоинтов
|
||
|
||
### Правая панель
|
||
- Тестирование API
|
||
- 5 основных категорий функций
|
||
- Просмотр результатов в JSON формате
|
||
|
||
## 📱 Функции браузера
|
||
|
||
- **Адаптивный дизайн**: работает на мобильных устройствах
|
||
- **Красивый UI**: градиентный фон и современный дизайн
|
||
- **Подсветка кода**: JSON результаты отображаются в читаемом формате
|
||
- **Сохранение токена**: автоматическое сохранение в localStorage
|
||
- **Копирование**: быстрое копирование токена в буфер обмена
|
||
|
||
## 🔧 Примеры использования
|
||
|
||
### Регистрация
|
||
1. Откройте вкладку "Регистрация"
|
||
2. Заполните Email, имя пользователя, пароль
|
||
3. Нажмите "✍️ Зарегистрироваться"
|
||
4. После успешной регистрации используйте эти учётные данные для входа
|
||
|
||
### Создание алерта
|
||
1. Откройте вкладку "🚨 Алерты"
|
||
2. Установите координаты (по умолчанию Нью-Йорк)
|
||
3. Выберите тип алерта
|
||
4. Нажмите "🚨 Создать алерт"
|
||
|
||
### Проверка здоровья системы
|
||
1. Откройте вкладку "❤️ Health"
|
||
2. Нажмите "🔍 Проверить все сервисы"
|
||
3. Посмотрите статус всех 5 микросервисов
|
||
|
||
## 🌐 API URLs
|
||
|
||
По умолчанию фронтенд подключается к:
|
||
- **API Gateway**: http://localhost:8000
|
||
- **User Service**: http://localhost:8001
|
||
- **Emergency Service**: http://localhost:8002
|
||
- **Calendar Service**: http://localhost:8004
|
||
- **Notification Service**: http://localhost:8005
|
||
|
||
Для изменения IP адреса, отредактируйте переменную `API_BASE` в `frontend_test.html`
|
||
|
||
## 🚨 CORS
|
||
|
||
Убедитесь, что все микросервисы имеют правильно настроенный CORS для работы с фронтенда:
|
||
```python
|
||
app.add_middleware(
|
||
CORSMiddleware,
|
||
allow_origins=["*"],
|
||
allow_credentials=True,
|
||
allow_methods=["*"],
|
||
allow_headers=["*"],
|
||
)
|
||
```
|
||
|
||
## 📊 Технические детали
|
||
|
||
- **Язык**: HTML5 + CSS3 + Vanilla JavaScript
|
||
- **Размер**: ~15KB (один файл)
|
||
- **Зависимости**: нет (чистый JavaScript)
|
||
- **Браузер**: все современные браузеры (Chrome, Firefox, Safari, Edge)
|
||
|
||
## ✅ Протестировано
|
||
|
||
- ✅ Регистрация и вход
|
||
- ✅ Управление профилем
|
||
- ✅ Создание и просмотр алертов
|
||
- ✅ Управление календарём
|
||
- ✅ Отправка уведомлений
|
||
- ✅ Проверка здоровья сервисов
|
||
- ✅ Сохранение токена
|
||
- ✅ CORS запросы
|
||
|
||
## 🎓 Образовательная ценность
|
||
|
||
Этот фронтенд показывает:
|
||
- Как работать с REST API
|
||
- Как использовать JWT токены
|
||
- Как обрабатывать асинхронные операции (fetch API)
|
||
- Как управлять состоянием браузера (localStorage)
|
||
- Как создавать адаптивный UI без фреймворков
|
||
|
||
## 📝 Лицензия
|
||
|
||
MIT License - свободен для использования и модификации
|
||
|
||
---
|
||
|
||
**Создано**: 2025-12-13
|
||
**Версия**: 1.0.0
|
||
**Статус**: Полностью функционален ✅
|