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

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

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

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

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

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

- интеграция искусственного интеллекта и персонализированного обучения;

- расширение использования виртуальной и дополненной реальности в образовательных процессах;

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

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

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

Анализ конкурентов помогает нам изучить существующие платформы в области онлайн-образования в области программирования и выявить их сильные и слабые стороны, чтобы определить сравнительные преимущества предлагаемого проекта. Ключевыми среди этих платформ являются LeetCode и School 21, каждая из которых имеет свои отличительные особенности и клиентуру

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

- отсутствие четкой учебной карты затрудняет новичкам структурированное освоение материала;

- визуализация прогресса ограничена простыми показателями количеством решенных задач и дней обучения без пропуска;

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

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

Школа 21, в свою очередь, предлагает бесплатную IT-образовательную программу с акцентом на самообучение и практические задачи в игровом формате. Её сильная сторона — фокус на командной работе и взаимной поддержке студентов, что создаёт уникальную среду для развития soft skills и технических навыков.

Однако доступ к обучению осложнён:

- поступление требует прохождения месячного интенсивного курса и победы в конкурсном отборе;

- для успешного прохождения отбора необходимы базовые знания языка C;

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

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

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

Основные требования:

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

- поддержка онлайн-компилятора для проверки решений на разных языках программирования;

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

- реализация системы наград (опыт, монеты, звезды) с сохранением прогресса в базе данных;

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

- возможность оставлять комментарии на чужие решения, удалять свои комментарии;

- формирование рейтингов пользователей по опыту и звездам с отображением в таблице;

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

Отсюда давайте рассмотрим структуру сайта, учитывая установленные для него требования. На приведенной схеме (рис. 1) показаны основные компоненты сайта.

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

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

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

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

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

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

Страница проекта включает онлайн-компилятор с поддержкой различных языков программирований. Она содержит вкладки: «Описание задания» с текстом задачи и примерами ввода-вывода, «Теория» с учебными материалами и «Результат». Пользователь может протестировать код перед отправкой и получить результат проверки.

Рисунок 1 - Структура проекта

DOI:10.60797/IRJ.2026.165.21.1

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

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

Для реализации базы данных проекта был выбран PostgreSQL. PostgreSQL — это бесплатная объектно-реляционная система управления базами данных (СУБД) с открытым исходным кодом, которая обеспечивает высокую надежность, поддержку сложных запросов и масштабируемость

Для реализации серверной части проекта был выбран Django REST Framework (DRF). DRF — это фреймворк языка Python, основанный на Django, который предоставляет встроенные инструменты для создания REST API (Representational State Transfer Application Programming Interface), такие как аутентификация, ORM (Object-Relational Mapping) для работы с PostgreSQL или другими СУБД и сериализаторы

Причины выбора Axios для выполнения запросов HTTP (HyperText Transfer Protocol) заключаются в его простоте и гибкости. Он хорошо интегрируется с React для взаимодействия с DRF API, передавая данные и получая ответы. Наличие авторизованных запросов и возможностей обработки ошибок важно для API, которые требуют токенов для повышения безопасности.

Наличие Axios является важной причиной, по которой можно продолжить компиляцию кода в Visual Studio Code (VS Code). Эта среда была выбрана в качестве среды разработки, поскольку Visual Studio Code гарантирует современные утилиты с точки зрения организации, отладки, интеграции компилятора.

Были предприняты дополнительные усилия по формализации структуры реляционной базы данных PostgreSQL (рис. 2), в которую будет вводиться ожидаемая информация. Она была разработана таким образом, чтобы ее можно было использовать для интенсивного кодирования, развертывания и модификации реляционной структуры гетерогенных узлов после вычислений, что в данном контексте может не поддерживаться стилем NoSQL.

Рисунок 2 - Структура базы данных

DOI:10.60797/IRJ.2026.165.21.2

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

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

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

а) хранит координаты X и Y для проекта;

б) сопоставляет записи с таблицей Project по ее идентификатору.

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

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

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

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

Таблица UserSkill соответствует уровню владения языком для пользователей; она варьируется в пределах трех значений опыта для каждого языка. Это делается так, как пользователи приобретают эти стили и отслеживают их с помощью записи в таблице UserStyle. Содержимое таблицы Style иллюстрирует сбор необходимых материалов, которые имеют названия, звезды, серебро и категорию, к которой они принадлежат. В этом случае таблица Category будет объединять категории, присваивая каждой идентификатор в качестве ее категории.

Система рейтингов и комментариев представляет собой важную часть взаимодействия между пользователями, для которой была создана таблица Like, в которой отслеживаются оценки пользователей, поставленные проектам в разные даты. Коммуникация в то же время также включает в себя систему, в которой комментарии подписчиков Comment публикуются с отметками времени.

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

Серверная часть платформы разработана с использованием Django REST Framework (DRF). API сервера позволяет управлять пользователями, пользовательскими проектами, комментариями и другими частями платформы

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

- проектирование моделей данных, отражающих сущности платформы (пользователи, проекты, награды, стили), с сохранением в PostgreSQL;

- внедрение системы аутентификации с использованием Simple JWT для генерации и проверки токенов, обеспечивая безопасный доступ к данным платформы

- определение маршрутов (URL-паттернов) для каждого приложения, связывая их с соответствующими представлениями и сериализаторами, для обработки HTTP-запросов;

- настройка интеграции с внешними сервисами, такими как онлайн-компилятор, для проверки пользовательских решений.

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

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

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

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

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

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

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

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

Дизайн модели также поощрял социальное взаимодействие, такое как комментарии и оценки, которые были четко идентифицированными сущностями. Модель комментариев записывает сообщение вместе с его названием, датой создания и пользователем, который оставил отзыв, в то время как модель «Нравится» принимает оценки решений, что оказалось наиболее эффективным механизмом обратной связи, поскольку поощряло активность пользователей. Аналогичным образом были созданы модели для связи с StyleStore, который отслеживает все визуальные элементы, доступные для каждого пользователя, их стоимость и варианты дизайна профиля, которые пользователи фактически выбрали.

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

Была внедрена система аутентификации пользователей JWT для обеспечения мер безопасности платформы, а также правильного взаимодействия клиентской части с серверной частью. Предпосылкой для этого была библиотека djangorestframework-simplejwt, которая используется в качестве набора инструментов для аутентификации на основе токенов JSON Web Token (JWT) и выдачи токенов. Лучшим вариантом благодаря этой реализации было то, что теперь стало возможным безопасное хранение и передача информации о пользователях, а также гибкий доступ к различным ресурсам системы.

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

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

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

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

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

Отправка модели, наиболее тесно связанной с устойчивостью, является первым шагом в процессе создания сериализатора. Эти сериализаторы предоставляют набор полей, которые определяют, какие данные могут передаваться между клиентом (пользователем) и сервером; таким образом, важная конфигурация указывает, что данные являются точными и поддаются манипулированию, или что пользователь может извлекать и манипулировать конкретными фрагментами информации. Например, отчеты сериализатора для модели моды включают ID, имя, описание, фотографию, галерею, настройки персонализации и запись о последних проектах. После настройки сериализатора мы создаем представление, которое покажет, как обрабатывается конечная точка. Класс RetrieveUpdateAPIView используется для извлечения данных (по ID) и их сохранения после интеграции. Для базовых методов из базового RetrieveUpdateAPIView каждый из них будет переопределен для объекта get self, который сообщает классу, когда запрашивать текущего пользователя, и ставит в очередь по ID пользователя.

На следующем этапе в urls.py я создал конфигурации URL для каждого приложения, чтобы обеспечить функциональное разделение, которое поддерживает модульность кода. Пример двух конфигураций URL для профиля: первая позволяет текущему пользователю получить доступ к своим собственным данным, а вторая — просматривать данные других пользователей. Затем эти маршруты связываются с основным файлом проекта таким образом, что они объединяются в единую структуру, доступную через префикс, например /api/. Это позволяет беспрепятственно интегрировать новый ресурс без какого-либо логического прерывания предыдущих ресурсов.

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

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

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

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

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

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

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

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

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

1. Профиль: страница профиля находится по маршруту api/profile/id/, на рисунке 3 видно, что статус запроса 200 OK, что соответствует успешному выполнению, а также видны полученные данный из базы данных.

Рисунок 3 - Запрос и приходящие данные по API api/profile/id/

DOI:10.60797/IRJ.2026.165.21.3

2. Проект: страница проекта находится по маршруту api/user-projects/get_user_pro ject/. На рисунке 4 видно, что статус запроса 200 OK, что соответствует успешному выполнению, а также все данные о проекте из базы данных.

Рисунок 4 - Запрос и приходящие данные по API api/user-projects/get_user_project/

DOI:10.60797/IRJ.2026.165.21.4

3. Карта: карта строится благодаря четырем маршрутам:

- api/projects/: выдает список проектов, включая все данные о каждом проекте;

- api/map/user-project-map/: выдает информацию о выполненных проектах пользователя, для визуализации открытых и закрытых проектов;

- api/map/connection/: выдает последовательность проектов для построения карты;

- api/map/elements/: выдает координаты каждого проекта на карте и минимальные данные о проекте.

4. Рейтинг: на этой странице рейтинг пользователей высчитывается по двум критериям (звезды и опыт). Существующие маршруты:

- api/stars-ranking/month/10/: показывает рейтинг пользователей по звездам;

- api/experience-ranking/month/10/: показывает рейтинг пользователей по опыту.

5. Магазин: страница магазина находится по маршруту /api/shop/.

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

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

В рамках тестирования производительности было измерено время отклика API-запросов. Среднее время ответа сервера составило 120 мс для стандартных запросов к профилю пользователя и 180 мс для запросов, связанных с компиляцией кода. Время загрузки клиентской части при первом обращении (Time to First Contentful Paint, FCP) составило 1,2 секунды, а полная интерактивность (Time to Interactive, TTI) достигалась за 2,1 секунды. Данные показатели соответствуют рекомендациям Google для веб-приложений и обеспечивают комфортную работу пользователей.

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

Оценка надёжности системы показала высокий уровень стабильности. При проведении нагрузочного тестирования с имитацией 100 одновременных пользователей коэффициент успешных запросов составил 99,7%. Среднее время между сбоями (MTBF) в процессе тестовой эксплуатации превысило 200 часов, что свидетельствует о надёжности архитектурных решений и корректности обработки исключительных ситуаций.

Тестирование безопасности подтвердило корректность работы системы JWT-аутентификации. Все защищённые маршруты корректно отклоняют неавторизованные запросы с возвратом HTTP-статуса 401. Механизм обновления токенов работает стабильно, обеспечивая бесперебойную работу пользователей без необходимости повторного входа в систему. Проверка на уязвимости типа SQL-инъекций и XSS-атак не выявила критических угроз благодаря использованию встроенных механизмов защиты Django ORM.

Для оценки удобства использования была применена методика System Usability Scale (SUS). По результатам опроса 15 тестовых пользователей средний балл SUS составил 78,5, что соответствует оценке «хорошо» и превышает среднеотраслевой показатель 68 баллов. Пользователи отметили интуитивно понятный интерфейс, логичную структуру навигации и удобство работы с онлайн-компилятором. Среднее время выполнения типовых задач (регистрация, отправка решения, просмотр рейтинга) составило 2–4 минуты.

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

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

В рамках настоящего исследования была разработана и верифицирована методика интеграции игровых механик в процесс онлайн-обучения программированию. Для экспериментальной проверки методики была спроектирована и реализована образовательная веб-платформа, объединяющая элементы геймификации (система вознаграждений с опытом, монетами и звёздами, визуализация прогресса на интерактивной карте, рейтинговые механизмы) и инструменты социального взаимодействия (взаимная оценка решений, комментарии). Архитектура системы включает реляционную базу данных PostgreSQL, серверный API на базе Django REST Framework с JWT-аутентификацией и клиентский интерфейс на React с использованием Axios.

Верификация разработанной методики проведена на основе комплекса количественных метрик. Показатели производительности подтвердили соответствие системы современным требованиям: среднее время отклика API составило 120–180 мс, время первой отрисовки контента (FCP) — 1,2 с, время достижения интерактивности (TTI) — 2,1 с. Метрики надёжности продемонстрировали стабильность работы: коэффициент успешных запросов при нагрузочном тестировании достиг 99,7%, среднее время между сбоями (MTBF) превысило 200 часов. Оценка удобства использования по методике System Usability Scale составила 78,5 балла, что превышает среднеотраслевой показатель (68 баллов) и соответствует категории «хорошо». Покрытие функциональных тестов достигло 94% при 47 разработанных тестовых сценариях.

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

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