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

2.4 Веб-клиент

Один из клиентов системы выполнен в виде веб-сайта - одностраничного приложения, построенного с использованием фреймворка Angular.JS. Для отрисовки интерфейсов была использована библиотека Bootstrap. Веб-клиент дает возможность регистрации пользователей, управления всеми объектами в системе, а также дает возможность просмотра расписания на выбранные диапазоны дат для определенного объединения, просмотра уведомлений системы. При открытии данного веб-клиента появляется следующая страница (рисунок 1):

Рисунок 1 - начальная страница веб-клиента системы

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

Для начала работы с системой необходимо пройти авторизацию либо регистрацию (если пользователь еще не зарегистрирован). Формы регистрации и авторизации приведены на рисунках 2 и 3:



Рисунок 2 - форма регистрации веб-клиента



Рисунок 3 - форма авторизации веб-клиента

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

После активации профиля пользователь при авторизации должен увидеть форму следующего вида (рисунок 4):



Рисунок 4 - начальный экран веб-клиента

Если при активации профиля пользователю также была выделена роль администратора, главное меню дополняется пунктом «Управление», с помощью которого пользователь может заниматься управлением сущностями системы (рисунок 5):

Рисунок 5 - начальный экран веб-клиента для пользователем с ролью администратора

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

Страница просмотра расписания перед установкой параметров выборки имеет вид, представленный на рисунке 6:

Рисунок 6 - начальный вид экрана просмотра расписаний

Вверху страницы всегда отображается заголовок, который характеризует функционал текущей страницы. Главная область экрана служит для отображения расписания, однако, если параметры еще не заданы, то выводится сообщение «Сперва нужно задать параметры расписания», а если в базе данных не найдено занятий, соответствующих критерию поиска, на экран будет выведено сообщение «Не удалось найти подходящих по критериям записей в базе». Если же выборка расписания по заданным характеристикам произошла успешно, экран отображения расписания принимает следующий вид (рисунок 7):

Рисунок 7 - экран просмотра расписания при отображении успешной выборки

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

Также пользователь с правами редактора или администратора имеет возможность вносить изменения в расписания. Для контроля за правильностью в изменениях расписания, каждое изменение фиксирует пользователя, который внес изменения. В управлении изменениями расписания реализуется контроль доступа: каждый пользователь, обладающий правами редактора, но не обладающий правами администратора, может удалять/изменять только те изменения в расписании, которые он создал сам. Пользователь с правами администратора может изменять/удалять любые изменения в расписании.
Вид экрана просмотра расписания для пользователя с ролью «редактор» имеет сделующий вид при запуске (рисунок 8):



Рисунок 8 - экран просмотра расписания для пользователя с правами редактора

Управление заменами, а также одноразовыми занятиями осуществляется через экран, приведенный на рисунке 9:

Рисунок 9 - экран управления заменами и одноразовыми занятиями

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

Экран просмотра уведомлений для пользователя с правами «редактор» имеет вид, показанный на рисунке 10:



Рисунок 10 - экран отображения уведомлений для пользователя с ролью «редактор»

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

При создании уведомления, пользователь указывает объединения, которым таргетировано это уведомление. Также каждый пользователь в настройках своего профиля может выбрать объединения, которые зафиксируются в его профиле как readUnions (читаемые объединения). Затем, когда уведомление будет создано, каждый пользователь, профиль которого в readUnions содержит объединение, которое указано при создании уведомления, получит уведомление о том, что было создано уведомление, затрагивающее указанное объединение.
Экраны, доступные только пользователям с ролью «администратор» имеют унифицированный интерфейс, поэтому достаточно будет рассмотреть элементы управления расписанием (так как сущность расписания является сущностью, имеющей связи с другими сущностями системы).
Экран просмотра расписания с использованием инструментария администратора имеет вид, указанный на рисунке 11:



Рисунок 11 - просмотр записей расписания пользователем с ролью «администратор»

Редактирование или создание экземпляра сущности «занятие по расписанию» имеет вид, указанный на рисунке 12:

Рисунок 12 - создание/редактирование экземпляра сущности «занятие по расписанию»

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