Как мы строим геймифицированную образовательную платформу: от Node.js и React до Unity и Blender

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

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

Cryptex Corporation - это проект, который связывает игру и обучение - пользователь проходит образовательный курс, получает в награду монеты, эти монеты он тратит в игре (там же их дополнительно зарабатывает). Игра - 3д-шутер в стилистике советского киберпанка. В рамках прохождения игры, помимо сюжетной части, пользователь решает мини-игры, ребусы, головоломки и прочее, связанные с образовательными модулями.

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

На данный момент в команде 3 человека: fullstack-разработчик, 3D-artist & Game Designer, C# & Unity-разработчик. Отмечу, что, как это обычно бывает в стартапах, fullstack-разработчик занимается не только разработкой, но и тестированием и деплоем, 3D-artist занимается не только моделированием, но и текстурированием и 2D-графикой и т.д.

Как водится в стартапах, работаем пока на энтузиазме).

Технически продукт можно разделить на 3 большие части:

Так выглядит технологический стек продукта:

Node.js и React были выбраны для скорости создания MVP-версии продукта, поскольку 2 разработчика умели писать код на js - разрабатывать стало проще и чуточку быстрее.

В качестве архитектурного паттерна используется MVC, вся структура разделена на controllers(логика обработки), models(сущности: sequalize, pool, user и т.д). В качестве Views целиком и полностью используется frontend часть, а backend выступает в роли Models + Controllers.

Для разработки MVP версии продукта уже используются middleware CORS, Helmet для обеспечения безопасности(XSS-атак, Clickjacking, отключение старых браузерных фич, которые могут использоваться в атаке и т.д.).

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

Фронтенд веб-сайта реализован на React. Для авторизации пользователей мы выбрали OAuth2 через Google — это позволяет избежать написания собственной системы аутентификации и сократить время на разработку и тестирование. Отдельно понимаем риски, связанные с внешними сервисами, но для MVP такой подход оказался наиболее рациональным.

В личном кабинете пользователи могут:

Главная страница выполнена в формате лендинга:

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

Например, общий банк 200 монет, если пользователь за тест ошибся 2 раза - у него остаётся 160 монет.

За повторное прохождения главы банк срезается в 2 раза. Данная идея появилась с целью предотвращения зарабатывания монет на одних и тех же карточках.

После прохождения главы на следующую главу накладывается таймер.

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

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

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

Будем рады видеть вас в нашем Telegram-канале, там делимся процессом разработки и новостями проекта : https://t.me/cryptexcorp.

Всем добра!