Название команды: "PressAnyKey"

Участники:

1. Чудов Д.А.
2. Доманин Д.А.
3. Серунин Д.В.
4. Сысуйкин Д.Д.
5. Якиманская М. А.
6. Ахмадеева А.И.

Multiwindow - Приложение для многозадачной работы в браузере

Multiwindow — это инновационное приложение (плагин) для пользователей браузера, которое позволяет работать с несколькими сайтами одновременно в одном окне. Это решение значительно повышает эффективность работы в режиме многозадачности, устраняя необходимость постоянного переключения между вкладками.

---

Ключевые проблемы, которые решает Multiwindow

1. Недостаточная эффективность работы в режиме многозадачности
   Современные пользователи часто сталкиваются с необходимостью работать с несколькими сайтами одновременно, но стандартные инструменты браузеров не всегда позволяют делать это удобно.

2. Много времени тратится на переключение между вкладками
   Постоянное переключение между вкладками отвлекает и замедляет рабочий процесс, особенно когда нужно одновременно следить за несколькими ресурсами.

3. Проблема нахождения нужного сайта среди множества вкладок
   Когда открыто большое количество вкладок, найти нужный сайт становится сложно, что приводит к потере времени и снижению продуктивности.

---

Предлагаемое решение

Multiwindow предлагает удобное решение для этих проблем, позволяя объединить несколько сайтов в одном окне браузера. Это позволяет пользователю одновременно работать с несколькими интернет-ресурсами без необходимости переключаться между вкладками.

---

Основной функционал

1. Разделение браузера на несколько окон в пределах одной вкладки
   Пользователь может разделить окно браузера на несколько частей, каждая из которых будет отображать отдельный сайт.

2. Одновременное использование нескольких сайтов
   Возможность просматривать и взаимодействовать с несколькими сайтами одновременно, что особенно полезно для многозадачной работы.

3. Разнообразие расположения окон сайтов
   Пользователь может настраивать расположение окон (вертикальное, горизонтальное, сетка) в зависимости от своих предпочтений и задач.

---

Преимущества Multiwindow

• Экономия времени: Уменьшение времени на переключение между вкладками.
• Удобство: Все нужные сайты всегда перед глазами.
• Гибкость: Возможность настройки интерфейса под свои нужды.
• Повышение продуктивности: Эффективная работа с несколькими ресурсами одновременно.

---

Как начать использовать

1. Установите плагин Multiwindow в ваш браузер.
2. Откройте новую вкладку и активируйте Multiwindow.
3. Настройте расположение окон и добавьте нужные сайты.
4. Наслаждайтесь удобством многозадачной работы!

---

Установка

1. Перейдите в магазин расширений вашего браузера.
2. Найдите "Multiwindow" и нажмите "Установить".
3. После установки значок плагина появится в панели инструментов браузера.

---

1.Основные бизнес-процессы

1.1 Привлечение клиентов (Customer Acquisition)

• Маркетинг и реклама:   - Запуск рекламных кампаний (социальные сети, контент-маркетинг).   - SEO-оптимизация сайта и блога для привлечения органического трафика.   - Бесплатный пробный период “Продвинутой” версии.

1.2 Использование продукта (Product Usage)

• Мониторинг активности:   - Сбор данных об использовании продукта (аналитика внутри приложения).   - Выявление пользователей, которые неактивны.

• Персонализация:   - Рекомендации по функциям на основе поведения пользователя.

• Обратная связь:   - Возможность оставить отзыв или предложение через интерфейс.

1.3 Оформление подписки (Subscription Onboarding)

• Регистрация и оплата:   - Упрощенная форма регистрации (через email).   - Интеграция с платежными системами (СБП, банковские карты).   - Автоматическое создание аккаунта после оплаты.

• Приветственное письмо:   - Отправка email с благодарностью за подписку.

1.4 Удержание клиентов (Customer Retention)

• Персонализированные предложения:   - Инструкции по началу работы.

• Регулярные обновления:   - Добавление новых функций на основе отзывов пользователей.   - Уведомление о новых возможностях.

• Программа лояльности:   - Скидки постоянным пользователям.

---

2. Потребности заинтересованных лиц

Группа пользователей	Потребности
Офисы, корпорации	Удобное управление несколькими инструментами, снижение времени на переключение, автоматический запуск сайтов
ВУЗ (студенты и преподаватели)	Одновременная работа с учебными материалами, удобство выполнения заданий
Фрилансеры	Одновременная работа с заказами, таймер учета времени, автоматизация задач
Блогеры, стримеры	Управление несколькими платформами, мгновенный мониторинг реакции аудитории
Обычные пользователи	Быстрый доступ к часто используемым ресурсам, упрощение многозадачности

---

3. Основные функции системы

1. Разделение браузера на несколько окон в пределах одной вкладки.
2. Разнообразие расположения интерактивных окон сайтов.
3. Поддержка нескольких браузеров (мультиплатформенность).
4. Пуш-уведомления от плагина.
5. Чат-бот для помощи.
6. Пошаговый тутор, обучение.
7. Многоязычный интерфейс.
8. Версия "Продвинутый".
9. Возможность оставить отзыв.
10. Версия "Стандартная" (4 окна всего лишь)

---

4. Основные качественные характеристики системы

1. Удобство использования: Интуитивно понятный интерфейс, простота настройки.
2. Доступность: Поддержка различных браузеров и платформ.
3. Производительность: Минимальное влияние на скорость работы браузера.
4. Надежность: Стабильная работа без сбоев.
5. Безопасность: Защита данных пользователя, отсутствие уязвимостей.
6. Гибкость: Возможность настройки под индивидуальные нужды.
7. Масштабируемость: Поддержка большого количества открытых окон.
8. Совместимость: Работа с различными сайтами и веб-приложениями.
9. Поддержка: Быстрое и качественное решение проблем пользователей.
10. Обновляемость: Регулярные обновления и улучшения функционала.

---

5. Модель предметной области

I. Ключевые сущности (объекты)

1. Пользователь (User)     - Описание: Физическое или юридическое лицо, использующее плагин.    - Атрибуты: ID, имя, email, телефон, тип (студент, фрилансер, стример, офисный работник и т.д.),наличие подписки, способ оплаты, история общения с чат-ботом.

2. Подписка (Subscription)    - Описание: Платный доступ к расширенным функциям плагина.    - Атрибуты: тип (стандартная/продвинутая), срок действия, статус (активна/истекла).

3. Окно (Window)     - Описание: Область в интерфейсе плагина, где отображается сайт или приложение.    - Атрибуты:Размер, расположение (вертикальное/горизонтальное/сетка), количество, сайт.

4. Отзыв (Feedback)    - Описание: Обратная связь от пользователя о плагине.    - Атрибуты: Дата, тип отзыва, текст отзыва.

II. Связи между сущностями

• Пользователь оформляет Подписку (с указанием способа оплаты как атрибута). 
• Пользователь оставляет Отзыв. 
• Пользователь хранит Историю общения (чат-бот). 
• Подписка определяет Уровень доступа к настройкам окон. 
• Окно зависит от типа Подписки (например, продвинутая подписка позволяет больше окон).**

---

6. Список наиболее значимых архитектурных сценариев

I. Функциональные (поведенческие) сценарии:

1. Регистрация и оформление подписки    - Пользователь заполняет форму регистрации (email, пароль).      - Выбирает тип подписки (стандартная/продвинутая).      - Производит оплату через интегрированную платежную систему.      - Получает подтверждение и доступ к функциям плагина.  

2. Настройка и использование мультиоконного интерфейса      - Пользователь открывает плагин и выбирает шаблон расположения окон (вертикальное/горизонтальное/сетка).      - Настраивает каждое окно: указывает URL сайта, размер, дополнительные параметры (например, чат-модерация для стримеров).      - Сохраняет конфигурацию для повторного использования.  

3. Синхронизация настроек между устройствами      - Пользователь входит в аккаунт на новом устройстве.      - Настройки окон автоматически загружаются из облачного хранилища.  

4. Обратная связь и поддержка      - Пользователь оставляет отзыв через интерфейс плагина.      - Чат-бот обрабатывает запрос или перенаправляет его в службу поддержки.  

5. Обновление данных в реальном времени      - Плагин проверяет наличие новых сообщений/уведомлений в открытых окнах (например, чат стрима или задачи в Trello).  

II. Сценарии атрибутов качества:

1. Доступность      - Плагин поддерживает работу в популярных браузерах (Chrome, Firefox, Edge).      - Интерфейс адаптируется для пользователей с ограниченными возможностями (например, увеличение шрифта).  

2. Удобство использования      - Интуитивная настройка окон с помощью drag-and-drop.      - Горячие клавиши для быстрого переключения между окнами.  

3. Надежность      - Автоматическое сохранение состояния окон при сбое браузера.      - Резервное копирование настроек в облако.  

4. Производительность      - Минимальная нагрузка на браузер при работе с 4+ окнами.      - Оптимизация отображения контента (ленивая загрузка).  

5. Безопасность      - Шифрование данных пользователя (настроек, истории).      - Защита от XSS-атак при отображении сторонних сайтов.  

III. Сценарии развития:

1. Добавление новой функциональности      - Интеграция с новыми сервисами (например, Notion, Figma).      - Поддержка пользовательских скриптов для автоматизации.  

2. Повышение безопасности      - Внедрение двухфакторной аутентификации.      - Периодический анализ кода на предмет уязвимостей.

IV. Сценарии исключительных ситуаций:

1. Сбой платежной системы      - Плагин уведомляет пользователя об ошибке и предлагает повторить оплату позже.  

2. Потеря соединения      - Локальное сохранение действий до восстановления связи.  

3. Конфликты версий браузера      - Автоматическое отключение несовместимых функций с уведомлением пользователя.**

Модель C4

1 уровень:

2 уровень:

3 уровень:

4 уровень:

Диаграммы последовательности

1. Регистрация и оформление подписки

2. Настройка и использование мультиоконного интерфейса

3. Обратная связь и поддержка

---

ADR 001: Выбор фронтенд-фреймворка (React)

Статус: Принят

Контекст

Требуется создать интуитивно понятный интерфейс для управления несколькими окнами в одном браузерном экране. Ключевые требования:

• Поддержка динамического изменения макета (drag-and-drop).
• Высокая производительность при работе с 4+ окнами.
• Интеграция с разными браузерами (Chrome, Firefox, Edge).

Решение

Выбран React + Window Management Library (например, react-grid-layout).

Обоснование

React:

• Виртуальный DOM для быстрого рендеринга.
• Поддержка компонентного подхода (каждое окно — независимый компонент).
• Богатая экосистема (готовые решения для drag-and-drop).

react-grid-layout:

• Гибкое управление сеткой окон.
• Поддержка адаптивности.

Альтернативы

Вариант	Плюсы	Минусы
Vue + VueDraggable	Простота настройки	Меньше готовых UI-библиотек
Svelte	Высокая производительность	Ограниченная совместимость

Последствия

Плюсы:

• Быстрая разработка за счет готовых компонентов.
• Поддержка сложных сценариев.

Минусы:

• Размер бандла

ADR 002: Выбор клиентского и серверного хранилища для настроек пользователя

Статус: Принято

1. Контекст

Требуется реализовать:

• Клиентское кэширование: Хранение настроек окон (размеры, позиции, URL) для офлайн-доступа и мгновенной загрузки.
• Серверное хранилище: Резервное копирование (раз в день) и синхронизация между устройствами.

Критерии выбора:

Критерий	Клиентская сторона	Серверная сторона
Объем данных	≥ 10 МБ на пользователя	Неограниченно (облако)
Скорость доступа	Мгновенно (локально)	Зависит от сети (100-500 мс)
Структура данных	JSON (сложные объекты)	Документно-ориентированная
Offline-поддержка	Обязательно	Не требуется

2. Решения

2.1. Клиентское хранилище: IndexedDB

Почему:

• Поддержка во всех современных браузерах (Chrome, Firefox, Edge, Safari).
• Асинхронная работа (не блокирует UI).
• Лимит ≈ 50% свободного места диска (практически неограниченно).

2.2. Серверное хранилище: MongoDB Atlas

Почему:

• Гибкость схемы: Настройки окон могут меняться со временем (новые поля, форматы).
• Бессерверный режим: Автомасштабирование под нагрузку (нет ручного администрирования).
• Георепликация: Данные доступны из любого региона.

3. Альтернативы

Для клиента:

Технология	Плюсы	Минусы
LocalStorage	Простота использования	Лимит 5 МБ, только строки
Cookies	Работает везде	4 КБ на домен

Для сервера:

Технология	Плюсы	Минусы
PostgreSQL	ACID-транзакции	Избыточен для JSON-данных
Firestore	Реальное время	Привязка к Google Cloud

4. Интеграция и синхронизация

Сценарий работы:

1. При загрузке плагина:
   • Данные грузятся из IndexedDB → мгновенный старт.
   • В фоне идет синхронизация с сервером (если есть сеть).
2. При изменении настроек:
   • Сначала обновляется IndexedDB.
   • Затем асинхронно отправляется на сервер.

5. Последствия

Плюсы:

• Offline-first: Работа без интернета без потери функциональности.
• Масштабируемость: MongoDB Atlas справится с ростом пользователей.

Минусы:

• Сложность синхронизации: Нужна обработка конфликтов.
• Цена MongoDB Atlas: Бессерверный режим дороже на высоких нагрузках.

Компромиссы:
Жертвуем строгостью реляционной БД (PostgreSQL) ради удобства работы с JSON.

6. Итоговый выбор

Роль	Технология	Обоснование
Клиентский кэш	IndexedDB	Поддержка сложных данных + офлайн
Серверная БД	MongoDB Atlas	Гибкость и автомасштабирование

ADR 003: Мониторинг системы (Prometheus + Grafana)

Статус: Принято

1. Контекст

Необходимо отслеживать:

• Производительность MongoDB Atlas (запросы, репликация, использование RAM)
• Работу API (задержки, ошибки 4xx/5xx)
• Клиентскую синхронизацию (частота конфликтов, размер данных в IndexedDB)

2. Решение: Prometheus + Grafana

2.1. Выбранные компоненты

Компонент	Роль	Интеграция с текущим стеком
Prometheus	Сбор метрик	Pull-модель (раз в 15 сек)
Grafana	Визуализация	Готовые дашборды для MongoDB
Alertmanager	Уведомления	Slack/Telegram/Email

2.2. Источники метрик

Для MongoDB Atlas:

• Database Metrics:
  • mongodb_opcounters (запросы в секунду)
  • mongodb_memory_usage (RES, virtual, mapped)
  • mongodb_replset_lag (задержка репликации)
• Custom Exporters:
  • MongoDB Exporter: Сбор специфичных метрик (например, размер коллекций)
  • Node Exporter: Мониторинг сервера (CPU, RAM, disk)

Для API (Node.js):

• Express Prometheus Middleware:
  • http_request_duration_seconds (гистограмма)
  • http_requests_total (счетчик по методам и статусам)
• Business Logic Metrics:
  • sync_conflicts_total (количество конфликтов версий)
  • user_sessions_active (текущие сессии)

Для клиентов (опционально):

• Размер IndexedDB: через navigator.storage.estimate()
• Частота синхронизации: события отправляются через /metrics эндпоинт

3. Файлы мониторинга и их размер

3.1. Prometheus

Файл	Назначение	Примерный размер
prometheus.yml	Конфиг targets и scrape интервалов	2-5 KB
rules/alerts.yml	Правила алертов (например, 5xx > 1%)	10-20 KB
data/ (TSDB блоки)	Хранилище метрик	1-10 GB/месяц

Расчет объема данных:

• Метрик/сек: ~500 (при 10 RPS на API)
• Размер точки данных: ~2 байта
• Итого: 500 * 86400 * 30 * 2 ≈ 2.5 GB/месяц + overhead

3.2. Grafana

Файл	Назначение	Примерный размер
dashboards/mongo.json	Дашборд для MongoDB	50-100 KB
dashboards/api.json	Дашборд для API	30-70 KB
provisioning/	Конфиги datasources/dashboards	5-10 KB

4. Альтернативы

Вариант	Плюсы	Минусы
ELK Stack	Гибкий анализ логов	Требует ~3x ресурсов
Datadog	Облачное решение "из коробки"	$15/хост/месяц
VictoriaMetrics	Экономичнее Prometheus	Меньше интеграций

Почему не ELK?

• Избыточен для метрик (лучше подходит для логов)
• Требует отдельного кластера Elasticsearch

5. Итоги

Компонент	Технология	Обоснование
Сбор метрик	Prometheus	Открытый исходный код + Pull-модель
Визуализация	Grafana	Готовые дашборды для MongoDB
Алертинг	Alertmanager	Интеграция с Slack/Email