SimpleDemo - Платформа для создания интерактивных демонстраций

Обзор

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

Бизнес-функциональность

Основные возможности

1. Создание и воспроизведение интерактивных демонстраций

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

2. Управление пользователями и аутентификация

• Аутентификация на основе сессий.
• Управление профилями пользователей.
• Управление доступом на основе ролей с группами:
  • org_admin - Администратор организации.
  • data_contributor - Создатель контента.
  • viewer - Доступ только для чтения.
  • dashboard_creator - Создатель демонстраций.

3. Управление организациями

• Создание корпоративных аккаунтов с доступом на основе организаций.
• Группировка организаций по домену электронной почты.
• Администраторы организаций могут:
  • Добавлять пользователей из того же корпоративного домена электронной почты.
  • Управлять настройками организации.
  • Просматривать свойства компании и списки пользователей.
• Многопользовательское сотрудничество внутри организаций.

4. Система подписки и оплаты

• Модель подписки на основе тарифов с опциями:
  • Продолжительность: Ежемесячно, год, два года.
  • Уровни пользователей: 50, 100, 250, 500, 1000 пользователей.
• Динамический расчет цен.
• Интеграция с платежным шлюзом YooKassa.
• Отслеживание истории платежей.
• Система верификации платежей.
• Требования к оплате организации для контроля доступа.

5. Интеграция с расширением для браузера

• Расширение для Chrome/браузера для записи пользовательских взаимодействий.
• Захватывает:
  • События кликов с координатами и временными метками.
  • Действия прокрутки с временем начала/окончания.
  • Взаимодействия ввода текста с длительностью.
• Загружает видео (формат WebM) и JSON взаимодействий на сервер.
• Асинхронная обработка через очередь задач Celery.

6. Конвейер обработки демонстраций

• Автоматическое преобразование видео (WebM → MP4) с использованием FFmpeg.
• Извлечение кадров в точках кликов для скриншотов.
• Создание видеосегментов для действий прокрутки/ввода текста.
• Создание горячих точек из координат кликов.
• Генерация последовательных шагов с сохранением порядка взаимодействий.

7. Дополнительные возможности

• Система бронирования/запроса демонстраций.
• Система обратной связи и комментариев.
• Юридические документы (политика конфиденциальности, оферта).
• Метрики Prometheus для мониторинга.
• Комплексная система логирования с интеграцией Promtail.

Архитектура кода

Стек технологий

• Бэкенд-фреймворк: Django 5.1.7
• База данных: SQLite (доступна конфигурация PostgreSQL, готовая к продакшену).
• Очередь задач: Celery 5.4.0 с Redis.
• Обработка видео: MoviePy 2.1.2, FFmpeg, imageio.
• Платежи: YooKassa SDK 3.3.0.
• Мониторинг: django-prometheus, Promtail, Node Exporter.
• Веб-сервер: Nginx (обратный прокси с HTTPS).
• Развертывание: Docker Compose.

Структура проекта

SimpleDemo/
├── Demo/                    # Основная конфигурация проекта
│   ├── settings.py         # Настройки Django, промежуточное ПО, логирование
│   ├── urls.py             # Корневая конфигурация URL
│   ├── wsgi.py / asgi.py   # WSGI/ASGI приложение
│
├── demo_app/               # Основная функциональность демонстраций
│   ├── models.py           # Demo, Screenshot, VideoSegment, Hotspot, Step
│   ├── views.py            # Рендеринг демонстраций, редактирование, представления кабинета
│   ├── urls.py             # Маршруты, связанные с демонстрациями
│   ├── management/
│   │   └── commands/
│   │       └── process_demo.py  # Команда обработки видео
│   └── templates/          # Шаблоны отображения демонстраций
│
├── users/                  # Управление пользователями и организациями
│   ├── models.py           # Organization, TariffModel, PaymentHistory, FeedbackComments
│   ├── views.py            # Аутентификация, управление организациями, представления платежей
│   ├── urls.py             # Маршруты, связанные с пользователями
│   ├── forms.py            # Формы пользователей/организаций
│   ├── helpers.py          # Вспомогательные функции для платежей
│   └── decorators.py       # Пользовательские декораторы (доступ на основе ролей)
│
├── extension/              # Бэкенд расширения для браузера
│   ├── views.py            # Обработчик загрузки файлов
│   ├── tasks.py            # Задача Celery для обработки демонстраций
│   └── urls.py             # Маршруты API расширения
│
├── static/                 # Статические файлы (CSS, JS, изображения)
├── Documents/              # Медиафайлы, логи, загрузки
├── docker-compose.yml      # Оркестрация контейнеров
├── Dockerfile              # Контейнер приложения
├── requirements.txt        # Зависимости Python
└── manage.py               # Скрипт управления Django

Модели базы данных

Модели demo_app

Demo

• user (FK к User) - Владелец демонстрации
• title - Название демонстрации
• video - Оригинальный видеофайл
• actions_file - JSON-файл с пользовательскими взаимодействиями
• created_at - Временная метка

Screenshot

• image - Файл изображения скриншота
• time - Временная метка в видео
• description - Дополнительное описание

VideoSegment

• video - Файл видеосегмента
• start_time / end_time - Границы сегмента

Hotspot

• x / y - Координаты
• description - Метка горячей точки

Step

• demo (FK) - Родительская демонстрация
• order - Последовательный порядок
• step_type - 'screenshot' или 'video'
• screenshot / video_segment / hotspot - Связанные объекты

Модели users

Organization

• org - Название организации
• corporate_email - Домен электронной почты
• user (FK) - Владелец организации
• payment - Статус оплаты

TariffModel

• duration - Период подписки
• user_count - Уровень пользователей
• price_per_user - Цена за пользователя

PaymentHistory

• user (FK) - Платящий пользователь
• payment_id - Внешняя ссылка на платеж

FeedbackComments

• email / company / comment - Детали обратной связи
• comment_date - Временная метка отправки

Ключевые архитектурные компоненты

1. Поток запросов

Браузер пользователя → Nginx (HTTPS) → Приложение Django 
                                      ↓
                                 Статические файлы / Медиа

2. Поток обработки демонстраций

Расширение браузера → Загрузка (video.webm + interactions.json)
                     ↓
                Задача Celery (асинхронно)
                     ↓
           Конвертация FFmpeg (WebM→MP4)
                     ↓
        Обработка MoviePy (извлечение кадров, сегментация)
                     ↓
      Записи в базе данных (Demo, Screenshots, Segments, Steps)

3. Сервисы Docker

• nginx: Обратный прокси с завершением SSL.
• demo_app: Сервер приложения Django.
• redis: Брокер сообщений и кэш.
• celery: Асинхронный обработчик задач.
• celery-beat: Планировщик периодических задач.
• promtail: Агрегация логов.
• node-exporter: Системные метрики.

4. Аутентификация и авторизация

• Аутентификация на основе сессий.
• Пользовательские декораторы для доступа на основе ролей (@allowed_users, @organization_payment_required).
• Встроенная модель User Django.
• Разрешения на основе групп.

5. Архитектура логирования

• Файловое логирование с ежедневной ротацией.
• Структурированные логи для потребления Loki/Grafana.
• Отдельные логгеры для:
  • Ядра Django.
  • Запросов/ответов.
  • Запросов к базе данных.
  • Шаблонов.
  • Каналов.
  • Электронной почты.

6. Обработка видео

FFmpeg для преобразования формата с оптимизированными настройками:

• Частота кадров 30 fps.
• Битрейт 1M.
• Формат пикселей yuv420p.
• CRF 28 для сжатия.

MoviePy для:

• Извлечения кадров по определенным временным меткам.
• Вырезания видео для сегментов.
• Программного манипулирования видео.

Вопросы безопасности

• Включена защита CSRF.
• CORS настроен для определенных доверенных источников.
• HTTPS принудительно используется через Nginx.
• Валидация паролей.
• Опции XFrame для встраиваемых демонстраций.
• Валидация загружаемых файлов.
• Изоляция данных на основе организаций.

Функции масштабируемости

• Асинхронная обработка видео через Celery.
• Redis для распределенной очереди задач.
• Обслуживание статических файлов через Nginx.
• Контейнерное развертывание.
• Метрики Prometheus для мониторинга.
• Поддержка PostgreSQL для масштабирования в продакшене.

Разработка и развертывание

Ключевые команды управления

# Обработать демонстрацию вручную
python manage.py process_demo <folder_name> <user_id>

---

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