chat/FRONTEND_README.md

🎨 Фронтенд для тестирования API

Простой, но функциональный веб-интерфейс для тестирования всех ендпоинтов Women's Safety App API.

🚀 Запуск

Способ 1: Использование скрипта

bash run_frontend.sh

Способ 2: Прямой запуск Python сервера

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 для работы с фронтенда:

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
Статус: Полностью функционален ✅