Разработка конструктора курсов (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 под ваши задачи.