РАЗРАБОТКА ОБУЧАЮЩЕГО ВЕБ-ПРИЛОЖЕНИЯ «АЛГОРИТМЫ СОРТИРОВКИ И ПОИСКА. ДИНАМИЧЕСКИЕ СТРУКТУРЫ ДАННЫХ. СПИСКИ»

​DEVELOPMENT OF AN EDUCATIONAL WEB APPLICATION "SORTING AND SEARCH ALGORITHMS. DYNAMIC DATA STRUCTURES. LISTS"

Ekaterina Kazakova

student, Department of Software Systems, Samara University,

Russia, Samara

Daria Antipova

student, Department of Software Systems, Samara University,

Russia, Samara

Larisa Zelenko

scientific supervisor, candidate of Technical Sciences, associate professor, Samara University,

Russia, Samara

АННОТАЦИЯ

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

ABSTRACT

This article discusses a web application designed to teach sorting and searching algorithms, as well as dynamic data structures and lists. The web application provides the following capabilities: viewing theoretical materials on the specified topics; passing tests on the studied material (only for authorized users); visualization of the work of basic algorithms on different data sets, as well as viewing statistics and editing personal data.

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

Keywords: algorithm, sorting, search, list, statistics, web application, test, algorithm visualization, student.

Введение

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

Архитектура системы

В качестве архитектуры разрабатываемой системы была выбрана двухзвенная клиент-серверная архитектура, для обмена данными между клиентом и сервером будет использоваться протокол HTTPS – протокол уровня приложений для распределённых, объединённых, гипермедийных информационных систем [1].

Сущность структурного подхода к разработке информационных систем заключается в ее декомпозиции (разбиении) на автоматизируемые функции: система разбивается на функциональные подсистемы, которые в свою очередь делятся на подфункции, подразделяемые на задачи и так далее. Процесс разбиения продолжается вплоть до конкретных процедур. При этом автоматизируемая система сохраняет целостное представление, в котором все составляющие компоненты взаимоувязаны [2]. На основании данного подхода была разработана структурная схема системы, приведенная на рисунке 1.

В состав клиентской части входят следующие подсистемы:

1) подсистема «Обучающийся», которая состоит из следующих подсистем:

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

Рисунок 1. Структурная схема системы

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

2) подсистема «Администратор», состоящая из подсистем:

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

3) подсистема визуализации, которая состоит из следующих подсистем:

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

4) подсистема отображения теоретических материалов, которая позволяет просмотреть теорию по выбранному алгоритму;

5) справочная подсистема, которая содержит сведения о системе (руководство пользователю) и ее об ее разработчиках;

6) подсистема авторизации, которая отвечает за определение роли;

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

Серверная часть состоит из следующих подсистем:

1) подсистема аутентификации, которая отвечает за подтверждение прав доступа по введенным логину и паролю;

2) подсистема взаимодействия с базами данных, которая отвечает за связь сервера с базой данных.

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

Веб-приложение написано на языках TypeScript и С# в среде Visual Studio Code. На рисунке 2 приведена диаграмма развертывания системы. На устройствах клиента и сервера должна быть установлена операционная система Windows 7 и выше. Отображение интерфейса осуществляется в браузере Google Chrome. Сервер работает с PostgreSQL 16, которая в свою очередь управляет базой данных.

Рисунок 2. Диаграмма развертывания системы

Описание возможностей системы

При запуске системы открывается главная страница с приветствием (рисунок 3).

Рисунок 3. Главная страница

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

Администратор отвечает за составление тестов, вопросов к ним, а также за работу с пользователями. На рисунке 4 приведена страница, на которой администратор может работать с тестами: создать новый тест (см. рисунок 5), отредактировать существующий, а также удалить его.

Рисунок 4. Страница работы с тестами (режим администратора)

Рисунок 5. Страница создания теста (режим администратора)

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

Рисунок 6. Страница с вопросами теста (режим администратора)

Основная задача обучаемого – это изучение алгоритмов сортировки и поиска и работы со списками. В системе размещены справочные материалы по всем реализованным алгоритмам, с ними обучаемый может ознакомиться, выбрав соответствующий раздел в боковом меню (рисунок 7).

Рисунок 7. Структура бокового меню (режим обучения)

Также обучающийся может посмотреть, как работают алгоритмы. В системе предусмотрена возможность настроить режим выполнения алгоритма: задать количество элементов в массиве или списке, выбрать способ заполнения (ручной или автоматический), выбрать скорость анимации и язык программирования, на котором реализован алгоритм (Pyton или C#). На рисунках 8-9 приведены примеры визуализации работы с алгоритмом бинарного поиска и добавления узла в односвязный список.

Рисунок 8. Страница визуализации алгоритма «Бинарный поиск»

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

Рисунок 9. Пошаговая визуализация добавления узла

Рисунок 10. Страница прохождения теста (режим обучения)

Заключение

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

К достоинствам системы «Algo» можно отнести:

• хорошую визуализацию, помогающую в освоении новых знаний;
• наличие справочных (теоретических) материалов по всем реализованным алгоритмам;
• возможность изучения кода с реализацией алгоритмов на таких языках программирования, как: С# и Python;
• возможность оценить полученные знания, выполнив тесты по каждому разделу.

Список литературы:

1. HTTP [Электронный ресурс]. URL: https://ru.wikipedia.org/wiki/HTTP (дата обращения: 16.05.2025).
2. Зеленко Л.С. Методические указания к лабораторному практикуму по дисциплине «Программная инженерия». Самара: СГАУ, 2012. 67 с.