marketing/ARCHITECTURE.md

Архитектура новостного интерфейса

Схема компонентов

┌─────────────────────────────────────────────────────────────────┐
│                        Vue.js Frontend                         │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │   NewsList      │  │ NewsDashboard   │  │   NewsAdmin     │  │
│  │   (Лента)       │  │  (Статистика)   │  │  (Управление)   │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
│           │                     │                     │          │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │  NewsFilters    │  │   NewsDetail    │  │   NewsService   │  │
│  │  (Фильтры)      │  │  (Детали)       │  │   (API слой)    │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                    News Parser API                             │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │  GET /items     │  │  GET /stats     │  │  GET /health    │  │
│  │  (Новости)      │  │  (Статистика)   │  │  (Статус)       │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │ POST /parse/all │  │POST /parse/{id} │  │GET /health/mongo│  │
│  │ (Парсинг всех)  │  │ (Парсинг по ID) │  │ (Статус БД)     │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                      MongoDB Database                          │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │   News Items    │  │   Statistics    │  │   Health Logs   │  │
│  │   (Новости)     │  │  (Статистика)   │  │   (Логи)        │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

Поток данных

1. Загрузка новостей

User → NewsList → NewsService → API → MongoDB
                ← NewsFilters ←

2. Фильтрация

User → NewsFilters → NewsList → NewsService → API (с параметрами)

3. Статистика

User → NewsDashboard → NewsService → API → MongoDB

4. Управление парсером

User → NewsAdmin → NewsService → API → Parser Service → MongoDB

Структура данных

NewsItem

{
  id: string,
  sourceName: string,
  title: string,
  url: string,
  publishedAt: string,
  addedAt: string,
  rawText: string,
  hash: string,
  category: string,
  analytics: {
    summary: string,
    sentiment: string,
    tags: string[],
    entities: object
  }
}

API Response

{
  success: boolean,
  message: string,
  data: {
    content: NewsItem[],
    pageable: object,
    totalElements: number,
    totalPages: number,
    last: boolean,
    first: boolean,
    numberOfElements: number
  }
}

Технологический стек

Frontend

• Vue 3 - основной фреймворк
• PrimeVue - UI компоненты
• Tailwind CSS - стилизация
• Chart.js - графики и диаграммы
• Vue Router - маршрутизация

Backend API

• REST API - HTTP эндпоинты
• JSON - формат данных
• MongoDB - база данных

Инструменты разработки

• Vite - сборщик
• ESLint - линтер
• Prettier - форматирование

Принципы архитектуры

1. Разделение ответственности

• Компоненты - только UI логика
• Сервисы - работа с API
• Конфигурация - настройки

2. Переиспользование

• NewsService - единая точка доступа к API
• NewsFilters - переиспользуемый компонент
• Конфигурация - централизованные настройки

3. Производительность

• Ленивая загрузка - компоненты загружаются по требованию
• Кэширование - данные статистики кэшируются
• Оптимизация - минимальные API запросы

4. Масштабируемость

• Модульная структура - легко добавлять новые функции
• Конфигурируемость - настройки через переменные окружения
• Расширяемость - простое добавление новых источников

Безопасность

1. Валидация данных

• Проверка ответов API - всегда проверяется поле success
• Обработка ошибок - graceful degradation
• Санитизация - очистка пользовательского ввода

2. Аутентификация

• Требуется авторизация - все маршруты защищены
• Роли пользователей - админ функции только для админов

3. CORS

• Настройка CORS - на уровне API сервера
• Безопасные запросы - только к настроенному API

Мониторинг и отладка

1. Логирование

• Консольные логи - для разработки
• Обработка ошибок - централизованная система

2. Метрики

• Статистика загрузки - количество запросов
• Время отклика - производительность API
• Статус системы - мониторинг здоровья

3. Отладка

• DevTools - инструменты разработчика
• Network tab - мониторинг запросов
• Console - логи и ошибки