Klassvielle: онлайн-школа со своей доской и встроенной видеосвязью

Разработать собственную образовательную платформу Klassvielle для онлайн-школы подготовки к ОГЭ и ЕГЭ, в которой весь сценарий занятия проходит внутри одного продукта. Нужно было отказаться от зависимости от отдельных сервисов для видеоконференций и онлайн-досок: ученик должен видеть расписание, открывать занятие, подключаться к преподавателю, общаться по видео и совместно работать с материалами без переходов по внешним ссылкам и создания дополнительных аккаунтов.

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

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

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

Центральной частью продукта стало пространство самого урока. Мы разработали собственную интерактивную доску, на которой ученик и преподаватель могут одновременно писать, рисовать, размещать текст, фигуры и изображения. При этом видеосвязь остаётся частью того же интерфейса — преподавателю и ученику не нужно открывать отдельную конференцию или переключаться между несколькими вкладками.

Совместную работу доски реализовали на Yjs. Изменения участников объединяются в общий документ и передаются через серверный поток событий. Состояние сохраняется на стороне платформы, а преподаватель может управлять правами редактирования доски.

Для нестабильного соединения реализовали локальную очередь через IndexedDB: если интернет пропадает, неотправленные изменения сохраняются в браузере и автоматически синхронизируются после восстановления соединения. Пользователь при этом видит статус сохранения и получает предупреждение, если пытается закрыть страницу до завершения синхронизации.

Видеосвязь встроили в Klassvielle на базе LiveKit. Перед подключением пользователь может проверить камеру и микрофон, выбрать устройства; внутри урока доступны видеосвязь, чат и демонстрация экрана. Доступ к комнате выдаётся сервером только после проверки пользователя и конкретного занятия.

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

Отдельно проработали связь учебных инструментов с расписанием. Ученик и родитель видят ближайшее занятие, предмет, тему и время на одном экране. Вход в видеоурок становится доступен в установленное время, а если занятие переносится, изменение сохраняется в истории.

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

В системе предусмотрены разные роли — ученик, преподаватель, родитель и куратор. Доступ к занятиям и доскам проверяется на сервере с учётом связи пользователя с учебной группой. Преподаватель может управлять редактированием доски, тогда как родитель получает необходимый доступ без возможности изменять содержимое урока.

Технически приложение построено на Next.js 16, React 19 и TypeScript, серверная логика работает в среде Node.js. Для хранения данных используется SQLite в режиме WAL. Совм-естное редактирование реализовано на Yjs, получение обновлений — через Server-Sent Events, локальная очередь изменений — через IndexedDB, видеосвязь — на LiveKit.

После объединения основных модулей мы отдельно проверяли совместное редактирование, права доступа, повторное подключение и восстановление после разрыва связи. Во внутреннем тестировании Klassvielle также проверялась при одновременной активности 100 учеников, выполняющих разные действия. Этот тест относился к работе платформы и не означал проведение 100 одновременных видеозвонков.

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

Школе не требуется строить учебный процесс вокруг сторонних сервисов видеоконференций и онлайн-досок— эти инструменты являются частью Klassvielle и могут дальше развиваться под собственные процессы школы.

В результате мы разработали собственную образовательную платформу Klassvielle, в которой основной сценарий онлайн-занятия проходит внутри одного продукта — от расписания и входа в урок до видеосвязи и совместной работы на интерактивной доске.

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

Видеосвязь на базе LiveKit встроена непосредственно в занятие и при наших практических проверках работала в России без VPN. Доступ к видеокомнате связан с конкретным уроком и проверяется сервером перед подключением.

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

Отдельно реализовали ролевую модель для ученика, преподавателя, родителя и куратора, серверную проверку прав доступа, повторное подключение к занятиям и локальное сохранение несинхронизированных изменений.

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

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