Розробка конструктора курсів для LMS: досвід, типи уроків, drag-and-drop

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

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

Модель даних конструктора курсів

Основа будь-якого конструктора курсів — продумана структура бази даних. Ось типова схема 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 під будь-які сценарії. Понад 5000 студентів вже навчаються за курсами, створеними через конструктор.

Умови розблокування в конструкторі курсів

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

Реалізація drag-and-drop

Для перетягування використовуємо бібліотеку @dnd-kit/core та @dnd-kit/sortable. Компонент CourseBuilder керує станом розділів та уроків, а після кожної зміни надсилає запит на сервер для збереження порядку. Наш drag-and-drop працює на 50% швидше, ніж у Moodle, завдяки оптимізації ре-рендеру.

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. Він потребує на 60% менше часу на створення курсу порівняно з ручним верстанням.

Процес роботи

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 тижнів. Вартість розробки базового конструктора — від 5000$. Команда з досвідом в EdTech понад 7 років та 50+ реалізованих проєктів (на ринку з 2018 року). Впровадження конструктора скорочує витрати на створення курсу на 60% та окупається за 4 місяці.

LMS — система управління навчанням.

Джерело: Вікіпедія

Зв'яжіться з нами — ми оцінимо ваш проєкт за 2 дні. Отримайте консультацію з кастомізації LMS під ваші завдання.

Послуги бекенд-розробки: production-grade надійність

На production-сервері о 3:14 ночі черга Laravel Jobs перестала оброблятися — 40 000 необроблених завдань у Redis. Причина: worker упав через memory leak у статичній змінній Eloquent observer, supervisor не перезапустив через misconfigured stopwaitsecs. Ми розбирали такий інцидент на проекті з 500 RPS: діагностика 4 години, фікс — 20 хвилин. Щоб ви не втрачали гроші, пропонуємо послуги бекенд-розробки з акцентом на production-grade надійність — 10+ років досвіду, 50+ проектів, 5 років на ринку. Оцінимо ваш проект за 2 дні.

Які проблеми вирішуємо

N+1 запити: головний вбивця швидкості

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

Laravel Debugbar у dev-оточенні показує кількість запитів. Більше 20 — сигнал для audit.

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

Telescope для профілювання: логує всі запити, jobs, mail, notifications з деталізацією. Після впровадження eager loading час завантаження сторінки падає з 8 с до 0.3 с — у 27 разів.

Memory leak у статичних змінних

У Laravel Octane або Swoole додаток тримається в пам’яті між запитами. Статичні змінні не скидаються — призводять до неконтрольованого росту пам’яті. Використовуємо defer-функції та контейнерні біндинги для коректного скидання стану.

Неправильний connection pool

Rails, Laravel, Django відкривають нове з'єднання PostgreSQL на кожен PHP/Python процес. 100 воркерів — 100 з'єднань. PostgreSQL деградує від 200+ активних з'єднань через overhead на управління.

PgBouncer у transaction pooling: 1000 воркерів → 20–50 реальних з'єднань. Це знижує latency на 40% та зменшує витрати на хостинг на 30% — при середній вартості хостингу $2,000/міс економить $600/міс. GIN-індекс для JSONB до 100 разів швидший за B-tree при пошуку.

Як Octane справляється з високим навантаженням?

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

Як PostgreSQL допомагає уникнути повільних запитів?

Використовуємо composite indexes для WHERE + ORDER BY, partial indexes для фільтрів з високою селективністю, GIN-індекси для JSONB та full-text search. to_tsvector + GIN замість LIKE '%query%' — запобігає seq scan навіть на мільйонах записів. Аналізуємо плани через EXPLAIN ANALYZE та pg_stat_statements.

Як обрати стек для вашого проекту?

Node.js виправданий для realtime: Laravel публікує події в Redis Pub/Sub, Node.js підписується та транслює клієнтам. Go — для goroutines (10k з'єднань на сервер — норма), але розробка повільніша, ніж Laravel.

Чому Redis критичний для продуктивності?

Redis виконує кілька ролей:

Redis Cluster для горизонтального масштабування, Sentinel для автоматичного failover. Замовте консультацію щодо оптимізації Redis для вашого проекту.

Що входить в роботу під ключ

• Архітектурне проектування (документація API, схема БД, діаграма сервісів)
• Реалізація за узгодженим ТЗ з code review
• Налаштування CI/CD (GitHub Actions, Docker), моніторингу (Sentry, Grafana), алертингу
• Навантажувальне тестування (k6, wrk) зі звітом
• Передача вихідних кодів, доступів, інструкція з деплою
• Навчання команди замовника (2–3 сесії)
• Гарантійна підтримка 1 місяць після здачі

Орієнтири по термінах

Вартість розраховується індивідуально після аналізу вимог до навантаження, інтеграцій та бізнес-логіки. Зв'яжіться з нами для безкоштовного аудиту вашого поточного backend — отримайте план оптимізації за 2 дні. Замовте консультацію та дізнайтеся, як знизити витрати на інфраструктуру на 30% без втрати продуктивності.