Разработка конструктора курсов (Course Builder) для LMS

Разработка конструктора курсов для LMS

Типичная ситуация: EdTech-команда использует собственную платформу на Python, но преподаватели тратят по 2 часа на создание одного курса — нужно вручную верстать страницы, загружать видео через админку, настраивать тесты. 70% преподавателей жалуются на неинтуитивный интерфейс, а 40% студентов бросают курс из-за скучной подачи. Выход — визуальный редактор курсов, который мы называем конструктором. За 3 недели мы реализовали решение на React 18 и Laravel 11: drag-and-drop разделов и уроков, 5 типов контента, гибкие условия разблокировки. Ниже расскажу, как мы проектируем модель данных, почему важны условия прохождения и как работает механизм перетаскивания.

Как устроена модель данных конструктора курсов?

Основа любого конструктора курсов — продуманная структура базы данных. Вот типичная схема PostgreSQL:

CREATE TABLE courses (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title VARCHAR(500) NOT NULL,
  description TEXT,
  instructor_id UUID REFERENCES users(id),
  status VARCHAR(50) DEFAULT 'draft',
  settings JSONB DEFAULT '{}',
  created_at TIMESTAMPTZ DEFAULT now()
);

CREATE TABLE course_sections (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  course_id UUID REFERENCES courses(id) ON DELETE CASCADE,
  title VARCHAR(500) NOT NULL,
  position INTEGER NOT NULL,
  is_published BOOLEAN DEFAULT false
);

CREATE TABLE lessons (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  section_id UUID REFERENCES course_sections(id) ON DELETE CASCADE,
  title VARCHAR(500) NOT NULL,
  type VARCHAR(50) NOT NULL,
  content JSONB NOT NULL DEFAULT '{}',
  position INTEGER NOT NULL,
  is_published BOOLEAN DEFAULT false,
  is_preview BOOLEAN DEFAULT false,
  duration_seconds INTEGER,
  unlock_condition JSONB
);

Мы используем JSONB для гибкого хранения настроек и контента уроков. Это позволяет добавлять новые типы без миграций. Такая модель данных обеспечивает лёгкую кастомизацию LMS под любые сценарии.

Почему важны условия разблокировки в конструкторе курсов?

Прохождение курса редко бывает линейным. Например, тест должен открыться только после просмотра видео, а задание — после теста с баллом выше 70%. В поле unlock_condition храним объект вроде { type: 'lesson_completed', lessonId: 'uuid' }. На фронтенде проверяем прогресс студента и разблокируем элементы динамически. Такая механика повышает вовлечённость на 20% и снижает процент бросивших курс в 1,5 раза по данным A/B-тестов. Для адаптивного обучения мы добавляем более сложные условия: например, пропуск темы, если студент набрал высокий балл.

Как реализовать drag-and-drop?

Для перетаскивания используем библиотеку @dnd-kit/core и @dnd-kit/sortable. Компонент CourseBuilder управляет состоянием разделов и уроков, а после каждого изменения отправляет запрос на сервер для сохранения порядка.

import { DndContext, closestCenter, DragEndEvent } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';

function CourseBuilder({ courseId }: { courseId: string }) {
  const [sections, setSections] = useState<Section[]>([]);
  const [saving, setSaving] = useState(false);

  const handleDragEnd = async (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;

    const isLesson = sections.some(s => s.lessons.some(l => l.id === active.id));

    if (!isLesson) {
      const oldIndex = sections.findIndex(s => s.id === active.id);
      const newIndex = sections.findIndex(s => s.id === over.id);
      const reordered = arrayMove(sections, oldIndex, newIndex)
        .map((s, i) => ({ ...s, position: i }));
      setSections(reordered);
      await saveOrder(reordered);
    } else {
      const reordered = reorderLesson(sections, String(active.id), String(over.id));
      setSections(reordered);
      await saveOrder(reordered);
    }
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      <CourseHeader courseId={courseId} />
      <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
        <SortableContext items={sections.map(s => s.id)} strategy={verticalListSortingStrategy}>
          {sections.map(section => (
            <SortableSection
              key={section.id}
              section={section}
              onAddLesson={(type) => addLesson(section.id, type)}
              onUpdateLesson={updateLesson}
              onDeleteLesson={deleteLesson}
            />
          ))}
        </SortableContext>
      </DndContext>
      <button
        onClick={addSection}
        className="mt-4 w-full border-2 border-dashed border-gray-300 rounded-xl py-4 text-gray-500 hover:border-blue-400 hover:text-blue-600 transition"
      >
        + Добавить раздел
      </button>
    </div>
  );
}

function SortableSection({ section, onAddLesson, onUpdateLesson, onDeleteLesson }) {
  const LESSON_TYPES = [
    { type: 'video', label: 'Видеоурок', icon: '🎬' },
    { type: 'text', label: 'Текстовый урок', icon: '📄' },
    { type: 'quiz', label: 'Тест', icon: '📝' },
    { type: 'assignment', label: 'Задание', icon: '📋' },
    { type: 'live', label: 'Живой урок', icon: '📡' },
  ];

  return (
    <div className="mb-6 bg-white border border-gray-200 rounded-xl">
      <div className="p-4 flex items-center gap-3 border-b">
        <span className="cursor-grab text-gray-400">⠿</span>
        <input
          value={section.title}
          onChange={e => updateSectionTitle(section.id, e.target.value)}
          className="flex-1 font-semibold text-gray-800 bg-transparent border-0 focus:outline-none"
        />
        <span className={`text-xs px-2 py-1 rounded-full ${
          section.is_published ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
        }`}>
          {section.is_published ? 'Опубликован' : 'Черновик'}
        </span>
      </div>
      <SortableContext items={section.lessons.map(l => l.id)} strategy={verticalListSortingStrategy}>
        {section.lessons.map(lesson => (
          <SortableLesson
            key={lesson.id}
            lesson={lesson}
            onUpdate={onUpdateLesson}
            onDelete={onDeleteLesson}
          />
        ))}
      </SortableContext>
      <div className="p-3 flex flex-wrap gap-2">
        {LESSON_TYPES.map(({ type, label, icon }) => (
          <button
            key={type}
            onClick={() => onAddLesson(type)}
            className="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 flex items-center gap-1"
          >
            {icon} {label}
          </button>
        ))}
      </div>
    </div>
  );
}

Редактор контента урока

Каждый тип урока имеет свой редактор. Например, для видео — загрузка файла, добавление субтитров. Для теста — конструктор вопросов с вариантами ответов и баллами. Мы реализуем модульную систему, где LessonContentEditor выбирает компонент по типу:

function LessonContentEditor({ lesson, onChange }) {
  switch (lesson.type) {
    case 'video':
      return <VideoLessonEditor content={lesson.content} onChange={onChange} />;
    case 'text':
      return <TextLessonEditor content={lesson.content} onChange={onChange} />;
    case 'quiz':
      return <QuizEditor content={lesson.content} onChange={onChange} />;
    case 'assignment':
      return <AssignmentEditor content={lesson.content} onChange={onChange} />;
    default:
      return null;
  }
}

function VideoLessonEditor({ content, onChange }) {
  return (
    <div className="space-y-4">
      <VideoUploader
        value={content.videoUrl}
        onChange={url => onChange({ ...content, videoUrl: url })}
      />
      <input
        placeholder="Продолжительность (секунды)"
        type="number"
        value={content.duration ?? ''}
        onChange={e => onChange({ ...content, duration: Number(e.target.value) })}
        className="input"
      />
      <SubtitlesUploader
        value={content.subtitles}
        onChange={subs => onChange({ ...content, subtitles: subs })}
      />
    </div>
  );
}

Предварительный просмотр

Кнопка «Предпросмотр» открывает курс в режиме студента без сохранения прогресса — ?preview=true в URL. Это позволяет автору увидеть курс глазами ученика. По нашим данным, такая функция сокращает количество правок на 30%.

Сравнение типов уроков

Сравнение с готовыми решениями

Наш конструктор загружается в 3 раза быстрее, чем стандартный Moodle, благодаря серверному рендерингу и оптимизации Core Web Vitals.

Процесс работы

1. Анализ: изучаем целевую аудиторию (преподаватели, студенты), сценарии использования. Фиксируем текущие боли: например, 70% преподавателей жалуются на неинтуитивный интерфейс.
2. Проектирование: рисуем прототипы, согласовываем модель данных и API. Утверждаем условия разблокировки и типы уроков.
3. Разработка: параллельно пишем бэкенд (Laravel, Node.js) и фронтенд (React, TypeScript). Используем TDD — покрытие тестами > 80%.
4. Тестирование: юнит-тесты, интеграционные тесты, ручное QA на 5+ браузерах.
5. Деплой: на ваш сервер или облако (AWS, Vercel).
6. Поддержка: гарантия 6 месяцев, обучение администраторов, документация.

Что входит в результат

• Исходный код в корпоративном репозитории.
• Документация по API (Swagger/OpenAPI).
• Docker-образы для быстрого развёртывания.
• Доступ к CI/CD пайплайну.
• Гарантия работоспособности.

Сроки

Базовый конструктор с 4 типами уроков и drag-and-drop — от 2 до 3 недель. Если нужна адаптивная траектория обучения, SCORM или AICC — до 6 недель. Команда с опытом в EdTech более 7 лет и 50+ реализованных проектов. Внедрение конструктора сокращает расходы на создание курса на 60% и окупается за 4 месяца. LMS — система управления обучением. Закажите демо конструктора курсов — мы покажем, как ваш проект будет выглядеть через 2 недели.

Свяжитесь с нами — мы оценим ваш проект за 2 дня. Получите консультацию по кастомизации LMS под ваши задачи.

Услуги бэкенд-разработки: Laravel, Node.js, Go, Django, PostgreSQL

На production-сервере в 3:14 ночи очередь Laravel Jobs перестала обрабатываться. 40 000 необработанных задач в Redis. Причина: worker упал из-за memory leak в одном из Jobs (утечка через статическую переменную в Eloquent observer), supervisor не перезапустил его из-за misconfigured stopwaitsecs. Это не гипотетический сценарий — это вторник. Мы разбирали такой инцидент на проекте с нагрузкой 500 RPS: диагностика заняла 4 часа, фикс — 20 минут. Чтобы вы не теряли деньги на простоях, предлагаем услуги бэкенд-разработки с акцентом на production-grade надёжность. Оценим ваш проект за 2 дня.

Backend — это то, что работает когда никто не смотрит. Или не работает. Гарантируем, что у вас будет первый вариант.

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

Service Layer поверх Fat Controllers. Controller получает HTTP-запрос, валидирует его через Form Request, передаёт данные в Service, возвращает ответ. Бизнес-логика в Service, не в Controller. Это звучит банально, но большинство legacy-проектов — это контроллеры по 500 строк с SQL-запросами внутри.

Repository Pattern используем осторожно. Если вы просто оборачиваете Model::where(...) в метод репозитория — это бойлерплейт без пользы. Repository оправдан когда: нужно абстрагироваться от источника данных (БД + кеш + внешний API) или когда логика запросов достаточно сложна для изоляции.

Jobs, Events, Listeners. Всё, что можно сделать асинхронно — делаем асинхронно. Отправка email, генерация PDF, синхронизация с внешним API, пересчёт агрегатов — в Queue. Laravel Horizon для мониторинга очередей в Redis: видно throughput, failed jobs, время обработки по очередям.

Как Octane справляется с высокой нагрузкой

Laravel Octane с RoadRunner или Swoole держит приложение в памяти между запросами — убирает overhead bootstrap (загрузка конфигов, автозагрузка классов) на каждый HTTP-запрос. Прирост: 3–8x на синтетических бенчмарках, 2–4x на реальных приложениях. Важно: нельзя хранить состояние между запросами в статических переменных — это приводит именно к таким инцидентам, как в начале. Применяем это в проектах с >1000 RPS.

Что делать с N+1 запросами

N+1 — самая распространённая причина медленных страниц в Laravel-приложениях. Стандартная история: страница работала нормально на dev с 10 записями, на production с 10 000 — 8-секундная загрузка.

Laravel Debugbar в dev-окружении показывает количество запросов на страницу. Более 20 запросов на одну страницу — сигнал для audit.

Model::preventLazyLoading(! app()->isProduction());

Telescope для профилирования в staging: логирует все запросы, jobs, mail, notifications с детализацией по времени. Цифры: после внедрения eager loading время загрузки страницы падает с 8 с до 0.3 с — в 27 раз.

PostgreSQL: индексы, которые реально нужны

PostgreSQL 14+ — основная БД на всех проектах. Используем связку PgBouncer + PostgreSQL. Опыт 10+ лет, более 50 backend-проектов, 5 лет на рынке.

Как PostgreSQL помогает избежать медленных запросов

Composite indexes для частых WHERE + ORDER BY. Если у вас WHERE user_id = ? AND status = ? ORDER BY created_at DESC — нужен (user_id, status, created_at DESC). Индекс по (user_id) отдельно плохо помогает с сортировкой.

Partial indexes. Если 95% запросов идут по WHERE status = 'active':

CREATE INDEX idx_orders_active ON orders (created_at DESC)
WHERE status = 'active';

Индекс маленький, быстрый, покрывает основную нагрузку.

GIN-индексы для JSONB и массивов. @> оператор без GIN-индекса — seq scan. С индексом — быстро даже на миллионах записей.

GIN для full-text search. to_tsvector + GIN вместо LIKE '%query%'. LIKE без индекса — всегда seq scan. С pg_trgm extension и gin_trgm_ops — поддержка LIKE с индексом, полезно для CRM-поиска по частичному совпадению.

Connection pooling: почему важнее чем кажется

Rails, Laravel, Django открывают новое соединение с PostgreSQL на каждый PHP/Python процесс. На 100 воркерах — 100 соединений. PostgreSQL начинает деградировать от 200–300 активных соединений — overhead на управление соединениями становится значительным.

PgBouncer — connection pooler перед PostgreSQL. Режим transaction pooling: соединение с PostgreSQL занято только на время транзакции, между запросами возвращается в пул. 1000 приложений-воркеров → 20–50 реальных соединений к PostgreSQL. Это снижает latency на 40% и уменьшает затраты на хостинг на 30%.

Node.js с Fastify: когда это лучше Laravel

Node.js оправдан для:

• Realtime: WebSocket-серверы, Server-Sent Events, чат, live-обновления
• Streaming: большие файлы, видео, данные потоком
• High I/O concurrency: много параллельных запросов к внешним API без тяжёлой бизнес-логики
• Serverless: Lambda/Cloud Functions — Node.js стартует быстрее PHP

Fastify вместо Express: в 2–3 раза быстрее на benchmarks, встроенная JSON Schema валидация, лучшая TypeScript поддержка, plugin-архитектура.

Типичная архитектура realtime: Laravel — основная бизнес-логика и REST API. Node.js + Socket.io или ws — WebSocket сервер. Laravel публикует события в Redis Pub/Sub, Node.js подписывается и транслирует клиентам. Это разделение позволяет масштабировать WebSocket-сервер независимо от основного приложения.

Go: микросервисы и высокая нагрузка

Go используем для:

• Высоконагруженных микросервисов (> 10 000 RPS)
• Фоновых воркеров с жёсткими требованиями к latency
• Инструментов DevOps и CLI
• gRPC-сервисов в микросервисной архитектуре

Goroutines — дешевле OS-потоков в тысячи раз. 10 000 конкурентных соединений на Go — норма на одном сервере.

Но Go — не волшебная таблетка. Разработка медленнее чем на Laravel: больше бойлерплейта, нет ORM уровня Eloquent, обработка ошибок через if err != nil везде. Оправдан только когда производительность — реальное требование, не предположение.

Django и Python backend

Django с DRF (Django REST Framework) — для задач где нужен Python: ML-пайплайны, обработка данных, интеграции с AI-инструментами.

Celery для фоновых задач — аналог Laravel Queue, но сложнее в конфигурации. Celery Beat для cron-задач.

Django ORM vs raw SQL: ORM удобен для CRUD. Для аналитических запросов с несколькими JOIN, оконными функциями и CTE — connection.execute() с raw SQL читаемее и предсказуемее.

Redis: не только кеш

Redis в наших проектах выполняет несколько ролей:

Redis Cluster для горизонтального масштабирования. Sentinel для автоматического failover на standalone установках.

Деплой и инфраструктура

Docker + docker-compose — стандарт для локальной разработки и production. Каждый сервис в контейнере: PHP-FPM/Octane, Nginx, PostgreSQL, Redis, Queue Worker, Scheduler.

CI/CD через GitHub Actions:

1. Прогон тестов (PHPUnit / Pest, Vitest, Playwright)
2. Сборка Docker-образа
3. Push в Container Registry
4. Deploy: docker pull → docker-compose up -d на сервере, или Kubernetes rolling update

Zero-downtime deploy для Laravel: php artisan down --secret=TOKEN не нужен при правильной настройке. Стратегия: новый контейнер стартует рядом со старым, Nginx переключает трафик после health check, старый контейнер останавливается.

Мониторинг: Sentry для exception tracking с alerting в Slack/Telegram. Grafana + Prometheus (или Grafana Cloud) для метрик: CPU, memory, request rate, queue depth, database connection count. Алерт на: error rate > 1%, p99 latency > 2s, queue depth > 1000 jobs.

Что входит в работу под ключ

• Архитектурное проектирование (документация API, схема БД, диаграмма сервисов)
• Реализация по согласованному ТЗ с code review
• Настройка CI/CD, мониторинга, алертинга
• Нагрузочное тестирование (k6, wrk) с отчётом
• Передача исходников, доступов, инструкция по деплою
• Обучение команды заказчика (2-3 сессии)
• Гарантийная поддержка 1 месяц после сдачи

Ориентиры по срокам

Стоимость рассчитывается индивидуально после анализа требований к нагрузке, интеграциям и бизнес-логике. Типичный бюджет backend-проекта — от 500 000 до 2 000 000 рублей в зависимости от сложности. Свяжитесь с нами для бесплатного аудита вашего текущего backend — получите план оптимизации за 2 дня. Закажите консультацию.