Реализация пользовательского интерфейса и тестирование приложения
Реализация интерфейса преподавателя
После завершения этапа проектирования макетов пользовательского интерфейса следующим шагом стала реализация графической оболочки приложения. Было разработано единое стартовое окно, которое отображается при запуске программы как для преподавателя, так и для студента (рис. 4.1). На этом экране пользователь может выбрать одну из доступных лабораторных работ, представленных в виде кнопок. В нижней части окна расположена отдельная кнопка «Войти как преподаватель», позволяющая переключиться в режим работы преподавателя.
Рисунок 4.1 — Титульное окно
После входа преподавателя в систему открывается окно просмотра результатов выполнения лабораторных работ студентами (рис. 4.2). Интерфейс представляет собой электронный журнал, в котором отображаются все зарегистрированные студенты. Таблица содержит основные столбцы: ФИО, учебная группа, а также статусы выполнения лабораторных работ.
Каждой лабораторной работе соответствует отдельная колонка, например, «Алгоритм Косарайю» и «Метод К-средних». Если работа была сдана, в соответствующей ячейке отображается галочка. Если работа не выполнена или не была отправлена через приложение, поле остаётся пустым. Таким образом, преподаватель может легко отследить, кто из студентов сдал ту или иную лабораторную, а кто ещё не приступал к выполнению.
Рисунок 4.2 — Интерфейс окна контроля выполнения лабораторной работы
В нижней части окна расположена кнопка «Обновить», позволяющая вручную синхронизировать данные с базой. Это обеспечивает актуальность информации без необходимости перезапуска приложения.
Реализация пользовательского интерфейса модуля «Алгоритм Косарайю»
После выбора лабораторной работы №1 с титульного экрана (Рис. 4.1) студент переходит в основное окно модуля, предназначенного для выполнения задания на основе алгоритма Косарайю (рис. 4.3). Интерфейс разделён на две функциональные области: визуализацию графа и форму для ввода данных.
Рисунок 4.3 — Окно выполнения лабораторной работы алгоритм Косарайю
В левой части окна отображается ориентированный граф, который задаёт структуру исходных данных. Вершины графа представлены в виде пронумерованных эллипсов, а связи между ними — направленными рёбрами. Это позволяет студенту визуально оценить взаимосвязи между узлами и определить сильносвязные компоненты, необходимые для выполнения задания. Граф создаётся программно заранее и не изменяется в процессе выполнения работы. Правая часть интерфейса предназначена для взаимодействия пользователя с системой. В верхней части располагаются поля для ввода ФИО и группы — эти данные необходимы для идентификации пользователя и последующей записи результата в базу данных. Ниже расположено поле для ввода ответа: студенту необходимо указать найденные сильносвязные компоненты в формате массива массивов
Под полем для ответа размещена поясняющая надпись с примером правильного формата, а также кнопка «Подтвердить», по нажатию на которую система проверяет корректность введённых данных.
Если данные введены некорректно, система выводит сообщение об ошибке непосредственно под полем ввода. Например, если компонент оказалось меньше или больше ожидаемого количества, или если формат данных нарушен. Это позволяет студенту сразу получить обратную связь и внести корректировки без перезагрузки окна.