Веб интерфейс программы

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

В качестве фреймворка для отображения визуальных элементов был выбран популярный, на момент 2016 года, Twitter Bootstrap [51], включающий в себя HTML и CSS шаблоны, а также расширения на языке JavaScript. Помимо этого, были использованы плагины, расширяющие возможности данного фреймворка: Bootstrap File Input 4.3.2 [52], Bootstrap Notify 3.1.3 [53].

Взаимодействие с сервером оценки

С помощью веб-интерфейса, пользователь отправляет запросы на сервер оценки, для взаимодействия с программой. Все запросы на сервер являются AJAX-запросами [54], что позволяет отправлять множество запросов без перезагрузки страницы, а также обрабатывать ответы от сервера. Для осуществления такого типа запросов используется популярная библиотека jQuery 2.1.4 [55].

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

В качестве ответов от сервера могут приходить объекты в формате JSON, поддержка которого встроена в язык JavaScript.

Система шаблонов

В следствие того, что данная программа не занимается генерацией разметки на стороне сервера, используется подход веб-шаблонов, встроенных в статическую разметку. Иными словами, генерация динамических страниц веб-страницы, осуществляется непосредственно на стороне пользователя с помощью средств языка JavaScript. Для поддержки веб-шаблонов используется библиотека HandleBars 4.0.4 [56], позволяющая создавать разметку на основе прописанных шаблонов и поданных входных данных.

Сервер nginx. Так как программа состоит из множества модулей, с которыми необходимо взаимодействовать пользователю, хорошей практикой является создание единой точки входа для всех запросов пользователя. Для решения этой проблемы можно использовать прокси-сервер, в роли которого в данной программе выступает веб-сервер nginx [57].

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

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

  • · Создать единую точку входа для пользователя (все пользовательские запросы идут через один сервер), что дает возможность поддержки правила ограничения домена [58];
  • · Обеспечить доступ к файлам, находящимся в файловом хранилище (запросы по адресам «SERVER/files/*»);
  • · Обеспечить доступ к файлам статического веб-интерфейса (запросы по адресам «SERVER/site/*»);
  • · Обеспечить доступ к REST API сервера проверки (запросы по адресам «SERVER/api/*»).

Использование данного сервера также позволяет легко настроить кластерное решение, где многие сервера представлены во множественном виде, и необходимо распределить нагрузку между ними [59], что может потребоваться в будущем. В третьей главе описаны особенности реализации программы: используемые фреймворки, подходы, инструменты и языки программирования. Приведен краткий обзор общей архитектуры программы и взаимодействия различных модулей между друг другом. Также описан принцип взаимодействия с инструментом Jenkins.

 
< Пред   СОДЕРЖАНИЕ   Загрузить   След >