Опыт разработки онлайн-курсов: Как делали Технопарк

Данная статья описывает портал «Технопарк»: его функции и возможности, историю разработки и использованные технические и архитектурные решения. Статья написана разработчиками портала — студентами самого Технопарка. Мы надеемся, что опыт разработки, которым мы делимся, будет полезен читателям.

С чего всё начиналось

Три года назад свои двери открыл Технопарк — проект компании Mail.Ru Group и МГТУ им. Н. Э. Баумана. Чтобы построить взаимодействие со студентами, для старта проекта была выбрана LiveStreet CMS. Преподаватели выкладывали топики с домашними заданиями, а расписание для студентов поступало в виде еженедельных топиков. Так выглядел портал в свой первый релиз:

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

Публичная часть портала

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

Все лекции и занятия в Технопарке записываются, мы выкладываем обработанные видео в раздел «Видеозаписи». Для абитуриентов разработан раздел FAQ, содержащий ответы на большинство вопросов о работе проекта.

Поступление в Технопарк

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

Подробная анкета нужна для того, чтобы познакомиться с потенциальным студентом Технопарка, представить студентов друг другу и получить общее представление о наборе. После регистрации на портале становится доступен раздел «Личный кабинет абитуриента», где все пользователи могут узнать об открытых на сегодняшний день наборах, подать на них заявку или познакомиться с теми, кто уже обучается на программах Технопарка.

Поступление в Технопарк включает в себя несколько этапов: регистрацию, онлайн-тестирование, тематическое оффлайн-собеседование. После каждого этапа результаты и решения собеседующих фиксируются в карточке абитуриента. В конце концов по нажатию кнопки «Зачислить» лучшие из лучших обретают учебную группу, становятся участниками нашего коммьюнити и получают доступ во внутренние разделы портала. Им открывается возможность принимать участие в обсуждениях, поднимать темы для обсуждения, создавая топики как в общих разделах, так и в разделах, посвящённых дисциплинам.

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

Каждому выпускнику выдаётся диплом с QR-кодом.

При помощи данного кода можно попасть непосредственно на страницу выпускника — владельца диплома, что служит подтверждением официального диплома.

Приватная часть портала

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

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

Личный кабинет студента и преподавателя

Студенты также получают доступ в личный кабинет, где могут наблюдать за оценками, которые они получают, за собственной успеваемостью и посещаемостью. За успехи в обучении мы выдаём достижения. Лучшим студентам — самые крутые бейджики!

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

Да, мы просим всех студентов по окончании занятия оставить своё мнение о нём.

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

Более того, каждый участник имеет возможность побеседовать в чате с другими участниками или в составе группы. Чат построен по технологии WebSocket. Все сообщения приходят мгновенно (Instant Messenger). Для реализации мы использовали разработку Александра Емелина Centrifuge, о которой есть подробная статья на Хабре.

На всех страницах мы отображаем мини-блог с занятиями, которые будут в этот день у просматривающего студента или преподавателя. Функциональность данного блока включает в себя отметку о присутствии на занятии, а после завершения занятия появляется возможность оставить отзыв.

Управление учебными программами

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

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

В конечном счёте все студенты и абитуриенты получают полную и исчерпывающую информацию по всей программе обучения.

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

Неизбежно наступает сессия — время сдавать рубежный контроль, закрывать долги и получать итоговые оценки по дисциплине. Неизбежно наступает конец семестра — этап переводов и отчислений.

Вся данная функциональность реализована в закрытой части, доступной администраторам проекта. Можно выбрать отдельных студентов и нажатием одной кнопки перевести их в новые учебные группы будущих семестров. Столь же легко и отчислить студента. Наши руководители очень трепетно относятся к этим кнопкам и в конце каждого семестра просят ещё раз проверить корректность работы данных функций с фиксацией всех изменений. На всякий случай мы предусмотрели возможность отмены данных изменений. Рука дрогнула, перенервничал…

По результатам таких модификаций всем сторонам рассылаются уведомления о принятых решениях. Студенты, успешно прошедшие всё обучение, получают статус «Выпускник» (попадают в раздел «Выпуски») и получают вечное право оставаться участником коммьюнити. Отчисленные студенты теряют доступ к внутренней части портала.

Отбор в Технопарк

Мы также автоматизировали процесс отбора студентов на учебные программы. Перед началом набора мы конфигурируем его в админке портала: выбираем, из каких этапов будет состоять, какие внешние тестирующие системы будут использоваться. Когда мы набираем студентов на основную программу, мы традиционно выбираем онлайн-тестирование и очное собеседование. В результате мы получаем таблицу, в которой есть все абитуриенты, подавшие заявку на этот набор, последовательно идущие этапы, через которые можно переводить абитуриентов. Если абитуриент проходит последний этап, он автоматически зачисляется. При этом если этап проводится во внешней системе, например онлайн-тестирование, то предусмотрен автоматический экспорт абитуриентов в эту систему и экспорт их оценок.

Для проведения тестирования мы используем ещё одну разработку лаборатории Технопарка: систему онлайн-тестирования Технотест, она применяется как для вступительного тестирования, так и для некоторых рубежных контролей.

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

Мероприятия

В Технопарке регулярно проводятся мероприятия, приглашаются спикеры. Весной 2015 года были выступления:

• Мастер-класс Д. Кибкало «Мосигра: создание нетехнарского бизнеса технарем»
• Мастер-класс Д. Школьникова «Применение старой доброй математики в современном интернет-маркетинге»
• Мастер-класс В. Макишвили «36»
• Мастер-класс И. Пеняева «История одного бауманца, или как делать то, что нравится, и читать о своих фичах в новостях»
• Мастер-класс И. Сысоева «Nginx: программа и компания»
• Мастер-класс Н. Чудинова «Современные тенденции и SEO-стратегии — успешные кейсы и типовые ошибки оптимизации»
• Мастер-класс А. Каптерева «Почему Стив Джобс любил шрифты: о важности и фантастической красоте мелких деталей в работе с текстом»

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

Анонс всех предстоящих мероприятий также дублируется на страницах для абитуриентов и посетителей. Принять участие в роли слушателей могут все желающие.

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

Баг-репорты

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

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

Мобильное приложение

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

Приложение доступно в App Store и Google Play.

Техносфера

Полтора года назад в МГУ им. Ломоносова был запущен аналогичный Технопарку проект — Техносфера, целью которого является готовить квалифицированных программистов — исследователей в области обработки больших объёмов данных. В течение года студенты получают знания о технологиях использования и построения СУБД, способах анализа большого объёма данных, многопоточном программировании и многом другом.

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

Технотрек

Уже в этом сентябре начал работу наш новый образовательный проект совместно с МФТИ — Технотрек, который занимается подготовкой мобильных разработчиков. Так как после внедрения Техносферы наша образовательная платформа могла обслуживать несколько различных учебных центров, то нам не составило труда поднять новый портал, и всего за пару недель, после внедрения дизайна, мы запустили регистрацию абитуриентов на первый набор в Технотрек.

Архитектура

Настало время немного рассказать об архитектуре платформы и о некоторых технологических решениях, использованных при разработке портала.

Сейчас портал полностью реализован на Python 2.6 с использованием фреймворка Django 1.6.

Для обеспечения производительности и быстрой отдачи страниц большинство объектов кешируется в memcached, в роли базы данных — MySQL v5.4. Многие операции на портале реализованы асинхронно с использованием Celery. Среди таких операций:

• рассылки уведомлений;
• выдача достижений пользователям;
• формирование внутренних отчётов;
• получение и отправка данных во внешние сервисы;
• расчёт рейтинга студентов.

В качестве бэкенда к Celery используется RabbitMQ. Для обеспечения полнотекстового поиска по всем блогам и контенту портала мы использовали Sphinx. Индексация всего контента производится раз в 15 минут. Также Django-приложение взаимодействует с двумя внешними сервисами: Технотестом — это система, которую мы используем для тестирования абитуриентов во время набора, и системой баг-репортов, которая собирает все репорты с образовательных платформ.

Для видеотрансляций мы используем Wowza Streaming Engine. В аудитории, где ведётся трансляция, установлен VGADVI Broadcaster, который соединяет изображения с проектора и камеры и передаёт картинку и звук по RTP на сервер с Wowza. В свою очередь, на клиентской части мы используем JW Player.

При проектировании портала мы старались максимально нормализовать структуру БД, допуская денормализацию в местах, где это было резонно. В результате у нас более 130 таблиц.

Структура данных

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

В учебные программы Технопарка после окончания семестра вносятся изменения на основе фидбэка от студентов. Каждый следующий семестр создаётся новая версия учебной программы: новая версия представляет собой копию предыдущей с внесёнными корректировками. Версия учебной программы состоит из определённого набора дисциплин — версий дисциплин, в свою очередь состоящих из набора занятий, домашних заданий и оценок. Оценка может выставляться за занятие (контрольная работа), домашнее задание или за дополнительную активность, не предусмотренную учебным планом.

Версии учебных программ прикрепляются к семестрам, семестр в данном случае — это временнáя рамка: указывает, в каких промежутках времени ведётся обучение по определённой программе. Учебная группа также имеет связь с семестром, тем самым определяя, в какой момент времени студенты обучались на том или ином курсе учебной программы. Студенты связываются с учебной группой, где они обучаются, через статус, который принимает четыре значения:

• обучается;
• закончил обучение;
• отчислен;
• в академическом отпуске.

Именно обучение на какой-либо учебной программе определяет доступ к каждому блогу, при этом, если студент отчисляется с учебной программы, он теряет доступ.

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

Подобные денормализации удобно поддерживать с помощью механизма сигналов в Django, особенно если модели находятся в разных приложениях или даже библиотеках. В данном случае мы используем два сигнала: изменения связи M2M-блогов с версией учебной программы и сохранения сущности, связывающей пользователя с учебной группой, а так как обновление всех доступных блогов достаточно длительная операция, мы убираем её в celery-таск.

Похожий механизм мы используем для перерасчёта рейтинга студента и достижений.

Когда преподаватель выставляет баллы студенту, в отдельной таблице появляется запись, сколько баллов (из возможных по данной оценке) получил студент. При этом вызывается обработчик сигнала, который запускает таск на пересчёт рейтинга. Этот таск, в свою очередь, суммирует баллы всех студентов этой учебной программы и всем обновляет рейтинг. Также запускается таск, который проходится по списку ещё не выданных достижений и проверяет, набрал ли студент необходимое количество баллов для достижения или нет. Так, при отметке на занятии запускается сигналом таск на просчёт достижений по посещаемости.

В заключение

Таким образом организована основа портала Технопарка, но это лишь малая её часть. У нас постоянно рождаются новые идеи, и мы не стоим на месте. По состоянию на 10 октября 2015 года в трекере бэклог включает в себя ещё 233 нереализованные идеи и незафикшенных недочёта общей оценкой на 800 часов. На разработку было затрачено 2900 часов работы, в том числе 1700 часов разработки, 75 часов тестирования и 400 часов работы на боевой площадке. Гитлаб нам сообщает о 3650 коммитах, сделанных начиная с октября 2014 года.

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