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