Как небольшая команда построила большую образовательную платформу для Kaino University

Приветствуем! Два года назад мы начали работу над образовательной платформой проекта Kaino. Это не первый образовательный проект в нашей истории, но это самое большое и сложное из того, что нам приходилось разрабатывать. Разработка проекта настолько нас впечатлила, что на свет появилась данная статья.

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

Для тех, кому лень читать, — вот платформа (kaino.online), можно залогиниться, приобрести бесплатный продукт и потыкать.

А всем остальным — приятного чтения ;)

P.S.: Мы постарались поделиться только самыми интересными моментами, без воды и банальщины.

В начале 2022 года мы закончили работу над небольшой образовательной платформой, и даже на примере относительно несложного проекта стало понятно: это интересно. Интересно прежде всего решать нестандартные задачи и работать со сложной логикой.

И вот я, Дмитрий Смирнов (руководитель команды), пошел искать образовательный проект, чтобы получить стоящий кейс.

Далеко ходить не пришлось, так как до этого я учился в онлайн-университете Kaino, где осваивал софт для 3D-графики — Blender.

Проект нравится своим вниманием к деталям и "душой". Проще говоря, с кем хотелось бы поработать, так с этими ребятами.

В группе VK нашел владельца проекта, написал сообщение, и завязался диалог.

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

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

Kaino — это онлайн-университет направления GameDev.

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

В Kaino коммуникация со студентами является отдельной и большой частью учебного процесса. Соответственно, в данном проекте есть запрос на "рабочую среду", т. е. желание объединить в понятную систему кучу бизнес-процессов.

Как работал проект?

Какие были проблемы?

Какие задачи стояли перед нами?

В конечном итоге количество задач выросло кратно, но все они были успешно выполнены.

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

Тут же весь проект был одной большой кастомной единицей, и встал вопрос: как описать весь функционал и показать все уровни взаимодействий? Было очевидно, что это нельзя делать в отрыве от макетов.

Нашли следующее решение: собрать макеты в "систему" и соединить их через все функциональные элементы (формы, кнопки, ссылки) с описанием, как это работает и, главное, зачем.

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

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

Первое и самое важное, что нужно уточнить: образовательная платформа — это в большей степени статичный контент, и вопрос построения отказоустойчивого решения не стоял (спойлер: но эту задачу мы тоже решили).

Так как мы давно работаем с Битриксом и прекрасно понимаем его преимущества и недостатки, план был следующий:

Что объективно делает Битрикс хорошим выбором для старта образовательных проектов?

1) Функционал работы с пользователями. У Битрикса тут все хорошо — работа с ролями с коробки. У юзеров можно хранить много доп. полей с нужной информацией.

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

3) Информационные блоки — удобная работа с базой данных.

4) Удобная админка — при том что она мудреная, все же остается одной из лучших админок евер.

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

6) WebSockets — быстрое подключение динамических приложений (чаты, уведомления, снэкбары и т. д.). Работает из коробки.

7) Защищенность — Битрикс считается достаточно защищенной системой, по крайней мере без "детских болячек".

8) REST API — есть и работает.

9) Локализация — решение для разработки языковых версий и работы с контентом.

10) Документация и популярность — большое кол-во гайдов, форумов и очень большое комьюнити.

А теперь к минусам Битрикса:

1) Прожорливый — с коробки в системе много лишнего, так что нужно обрезать и делать это умело.

2) Код движка недружелюбен — Битрикс разрабатывается много лет и, очевидно, разными людьми с разным подходом. Это хорошо видно при работе с исходным кодом компонентов, когда нужно углубляться в то или иное решение.

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

3) Платный — лицензия движка платная, а еще ее нужно продлевать каждый год.

Вывод:

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

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

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

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

Собрать образовательную платформу на Битриксе оказалось отличным решением на практике.

В данном проекте интерфейсы разрабатывались не по стандартному сценарию, а именно:

Вторая итерация

Через год Заказчик решил, что интерфейсы недостаточно нравятся и ушел делать новые концепты по всем основным разделам.

Стоит отметить, это случилось при готовой на 90% MVP-версии. Новые интерфейсы автоматически подтянули новую логику, и по факту мы пропустили MVP и перешли к разработке полной версии проекта.

Конечный результат действительно улучшил проект, хотя это серьезно отсрочило его запуск. Благо вопрос запуститься "быстро" в проекте вообще не стоял и у нас было время на такие маневры.

В Kaino все лендинги собирались с помощью Tilda.

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

Мы задумались, как бы нам получать от сервиса "тело" лендинга и вызывать на нем собственные элементы, такие как авторизацию, блоки со скидками, менять на лету цену и прочее.

Оказалось, у Tilda есть API, и ничего не пришло выдумывать.

Сейчас мы получаем актуальный код лендинга и кастомизируем его на своей стороне.

Вот пара подводных камней:

1) Все интеграции мы делаем на основе id-блока. Если кто-то на стороне Tilda удалит блок, наши решения перестанут работать. Так что тот, кто правит лендинги, должен это понимать.

2) В целом не удобно размещать собственную верстку в виде html-блоков, потому что требуется подгонять макеты. Нужна сноровка.

3) Если нужна своя кастомная форма поверх верстки Tilda, то требуются дополнительные проверки на стороне сервера, так как все работает через JS и ее легко можно заспамить прямо через консоль.

В остальном решение оказалось достаточно практичным.

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

На наш взгляд, страница получилась информативной, нравится общий результат.

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

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

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

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

Выдача ключей пользователям происходит автоматически с помощью API.

Мы разработали собственную Customer Data Platform с триггерной системой, простым языком — решение, которое мониторит действия юзеров и на основе этих данных может выполнять определенные действия.

Например, нужно, чтобы юзер после регистрации на платформе получил уведомление в VK, был удален и добавлен в ботах на стороне Senler и его карточка появилась в CRM Битрикс24, а еще ему нужно внутри платформы показать снэкбар.

Или, скажем, после прохождения курса автоматически генерировать диплом, а также не сразу, а ровно в 10:00 следующего дня добавлять карточку на прозвон менеджеру (чтобы менеджер случайно не начал звонить в тот же момент, когда юзер сделал действие).

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

Триггерная система работает как по достижению определенного действия, так и по таймеру.

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

Это пока что единственный микросервис в архитектуре проекта.

На тему этого решения можно писать отдельную статью.

У VK есть решение для авторизации через специальный виджет. Оно абсолютно легально отдает вам данные юзера — имя, почту (если она есть) и номер телефона. Это удобно для юзера и полезно для вас.

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

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

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

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

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

На помощь пришел Senler и его API. У сервиса есть свои методы подписки юзера на сообщество, возможность найти пользователя по VK id в списке сообщества, а также мы могли кастомизировать элементы, как нам хочется.

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

Личные данные

Далеко не главная часть функционала, но ради приличия начнем с нее. Максимум полей мы стараемся заполнить при авторизации, вытащив доступные данные.

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

Общение с куратором

В рамках проекта существует три вида обращения к кураторам — это вопрос к уроку, домашнее задание и дипломный проект.

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

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

Доступ к курсам

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

Система оповещения

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

Например, если тебе приходит ответ от куратора по домашнему заданию, то платформа отправляет тебе уведомление в VK, на почту, а также через внутреннюю систему снэкбаров (всплывающие виджеты, как в VK).

Виды оповещений вывели в отдельный интерфейс, чтобы можно было оставить только определенный канал и темы.

Платная поддержка

Поддержка в проекте бывает двух видов — для курса и отдельно для дипломного проекта.

В рамках курса студента ведут штатные кураторы, а дипломный проект ведут практикующие специалисты из индустрии.

Поддержка активируется вручную студентом, т. е. он сам решает, когда ее включить.

Срок поддержки рассчитан на полное прохождение курса в свободном ритме. Если поддержка закончилась до окончания прохождения курса, ее можно легко продлить на нужный студенту период.

Если поддержка закончилась, то студент не может задавать вопросы кураторам, но у него останется доступ ко всем прошлым чатам.

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

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

Решение не сложное, но полезное для насыщенных интерфейсами проектов.

Цель была получить среду для общения не хуже, чем было до, а ДО было ВКонтакте, что было серьезным вызовом. То есть в таком чате нет "неважных" элементов и все, к чему привык пользователь социальных сетей, нужно было перенести в удобном виде.

В целом наш чат можно назвать гибридом VK и Telegram, так как оба проекта служили референсами.

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

Что умеет чат?

Элементы для куратора

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

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

Еще бот реагирует на маты. Для этого подгрузили открытую библиотеку русского мата (попутно обогатив свой словарный запас).

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

Для работы кураторов мы создали полноценную CRM-систему для обработки всех диалогов от студентов.

Сюда сваливаются все диалоги от студентов, фильтруются по статусам, и здесь есть возможность быстро найти нужный диалог.

Решение для одновременной работы кураторов

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

Таким образом несколько кураторов могут работать в рамках одного продукта и не мешать друг другу.

Решение для дипломных проектов

Ранее я писал, что дипломные проекты ведут не штатные кураторы, а специалисты из индустрии.

Нужно было сделать возможность данным специалистам брать определенное кол-во студентов в работу (каждый куратор может взять индивидуальное кол-во) и по возможности добирать новых.

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

После того как куратор забрал студента, никто, кроме данного куратора и администратора платформы, не видит данные диалоги.

Система оценки работы куратора

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

Система контроля

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

В планах написать систему аналитики работы персонала платформы.

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

Про тестирование интерфейсов

При проектировании данного кабинета так случилось, что мы с первого раза сделали удобную логику перемещения диалогов по статусам. Как мы это поняли?

Очень просто: мы несколько раз без тестирования все переделали, потом кабинетом начали пользоваться кураторы, и мы вернулись к тому, что сделали в самом начале, так как это оказалось самым логичным решением.

Вывод: не делайте итерации без юзер-тестов, даже если вам кажется, что все логично :)

В проекте было необходимо сделать партнерский кабинет для возможности зарабатывать на рекомендациях курсов.

Нас выручил модуль "5в1: Реферальная программа" от СкайВеб24. Ребята сделали крутое решение, для которого мы отрисовали интерфейсы и немного подкрутили для своих целей.

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

Все рефералы ведутся в отдельном журнале и можно отследить все операции с твоим промокодом.

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

На старте разработки университет проводил свои трансляции на YouTube, а позже переехал на Twitch.

Провели интеграцию по YouTube API, чтобы тащить стрим на платформу во время старта.

Из интересного: всю историю чата записываем на сервере и выводим синхронно трансляции. Это решение было необходимо для кастомизации своего чата, так как кастомизировать чат YouTube нельзя.

Раздел с новостями, статьями и тегами. Есть счетчики просмотров и лайков.

В будущем планируется открыть возможность пользователям создавать собственные материалы, как в vc или dtf.

Визуальный редактор

Из интересного — это визуальный редактор статей, который мы построили на базе Editor.js. Для редактора существуют различные пользовательские модули, которые мы дорабатывали для своих целей.

Интерфейс редактора перевели на русский язык и немного кастомизировали.

На странице редактора вывели доп. функционал, а именно:

Сейчас редактором пользуется штатный контент-менеджер, в будущем он будет доступен всем пользователям.

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

К слову, видео может весить 4 ГБ, а файл blender-проекта 2 ГБ+.

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

Видео-контент мы загружаем мимо собственного сервера напрямую в VK Видео и после обработки выводим в диалоге. Благо нашли (не с первого раза) данную возможность в API.

Распределение Балансер

С файлами интереснее. Все файлы мы храним на Yandex.Cloud. Но так как файлы шли “транзитом” через наш сервер, было придумано следующие решение: балансер с сетью VPS (виртуальный сервер), задача которого — равномерно распределять загрузку файлов от пользователей и передавать их в хранилище Yandex.Cloud.

Решение получилось еще и бюджетным, потому что нам не нужно хранить на VPS файлы, а лишь передавать их (после передачи файла хранилище очищается).

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

На текущий момент данная схема перестает быть актуальной, так как проект переезжает на виртуальные машины Yandex.Cloud, но может кому-то пригодиться.

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

Сначала мы пробуем отправить юзеру код в Telegram.

Если юзер запретил отправку себе сообщений в Telegram с незнакомых номеров, пробуем Flash Call (когда вас просят ввести последние цифры входящего номера).

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

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

На текущий момент мы пользуемся ручным и ui-тестированием с помощью tricentis.com.

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

Баг-репортер

Далее появилась идея повесить баг-репортер в нижний левый угол платформы на первое время.

Это форма, через которую юзер может описать баг. Карточка с багом и всей информацией создается в таск-менеджере (используем kaiten) и после сортировки идет в работу.

Форму баг-репорта опытным путем научили принимать изображения через ctrl+v, передавать данные об устройстве и браузере, а также данные профиля для обратной связи.

Решение отлично работает и помогает быстро собирать баги и вопросы от пользователей.

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

Ниже я хочу выделить команду проекта:

Dev: Жданова Дарья, Александр Пономарев, Степан Палий

UX\UI: Алексей Лунев, Евгений Григорьев

Project: Смирнов Дмитрий, Дина Голубева, Евгений Григорьев

Owner: Евгений Григорьев

Буду рад обсудить ваши вопросы и мнение в комментариях, а также пообщаться лично в Telegram.

Спасибо за внимание!