Разработка веб-интерфейса для сервера уведомлений

Разработка веб-интерфейса для сервера уведомлений

Левин Ю. В.

Аннотация — В силу быстрого развития мобильного интернета одним из популярных способов распространения контента в сети стали сервисы push-уведомлений. Для каждой мобильной платформы разработаны свои службы push-уведомлений (Apple Push Notification Service (APNS), Google Cloud Messaging for Android (GCM) и др.). Основываясь на данных службах, разрабатываются сервисы рассылок сообщений с более сложной организацией взаимодействия между клиентом и сервером. Например, сервис может предоставлять удобный веб-интерфейс для работы с многоуровневым контентом рассылок, собирать, обрабатывать и отображать статистику о мобильных платформах и их пользователях и т. д.

Ключевые слова —AJAX, Design patterns, JSON, MVC.

I. Введение

Левин Юрий Владимирович - студент 3-го курса Второго Высшего Образования факультета вычислительной математики и кибернетики Московского Государственного Университета имени М. В. Ломоносова.

Для решения задач проектирования используют шаблоны (design patterns). Впервые понятие шаблон было введено Кристофером Александером для отображения наиболее распространенных

архитектурных решений. Согласно его определению шаблон это: «...периодически возникающая задача и описание основных принципов ее решения.». Позднее этот термин применили и к программному обеспечению, а через несколько лет сфера применения данного термина расширилась за счет области проектирования пользовательских интерфейсов [3].

При проектировании веб-интерфейсов в качестве архитектурного решения часто применяется шаблон Model-View-Controller (MVC). Он впервые был описан в 1979 году Трюгве Реенскауг при разработке языка Smalltalk [4]. MVC подразумевает разделение всей программы на три независимых объекта:

• Модель - предоставляет знания: данные и

методы работы с этими данными, реагирует на запросы, изменяя своё состояние. Не содержит информации, как эти знания можно визуализировать.

• Представление (вид) - отвечает за

отображение информации (визуализацию). Часто в качестве представления выступает форма с графическими элементами.

• Контроллер - обеспечивает связь между

пользователем и системой: контролирует ввод данных пользователем и использует модель и представление для реализации необходимой реакции.

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

Схема MVC разделяет эти объекты в

пользовательских интерфейсах, что повышает

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

гарантировать, что внешнее представление отражает

состояние модели. При изменении внутренних данных, модель оповещает все зависящие от нее виды, в результате чего, вид обновляет себя. Это позволяет создавать несколько видов для модели, не изменяя ее [5].

Целью данной статьи является проектирование архитектуры легко масштабируемого веб-интерфейса

сервера уведомлений, а также описание основных протоколов взаимодействия между объектами.

II. Разработка веб-интерфейса

A. Представление

Представление веб-интерфейса реализуется как HTML страница (доступная в браузере), построенная с помощью технологии Java Server Pages. JSP строит каркас веб-интерфейса, а вся необходимая информация подгружается с помощью AJAX запросов. Более подробно AJAX запросы рассмотрены далее в пункте «Контроллер» данной главы.

Представление веб-интерфейса состоит из следующих частей:

• Авторизация клиента - HTML форма для

ввода уникальной пары логин/пароль.

• Основной вид компаний рассылки - содержит

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

• Система оверлеев - используется для

добавления и редактирования компаний, тем и сообщений, а также для отображения статистики. Оверлей (overlay) - это облегченная версия всплывающего окна. Основными отличиями от классических всплывающих окон являются экономия ресурсов компьютера и отсутствие лишних навигационных элементов всплывающих окон. Благодаря возможностям технологии AJAX оверлей можно разместить прямо в основном виде компаний рассылки [5]. Основной вид компаний рассылки представлен на рис. 1.

Рис. 1.

При первом попадании клиента на страницу вебинтерфейса, система показывает вид авторизации. Пользователь заполняет ИТМЬ форму (логин/пароль) и отправляет ее. Система, проверив логин/пароль,

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

фиксированное время.

В качестве примера заказчиком выбран факультет ВМК МГУ, который ведет различные рассылки по следующим компаниям: студенты, выпускники и магистры. У каждой компании есть темы (здесь показаны темы компании «Студентам»): зачеты,

экзамены и собрания. В каждой теме содержатся сообщения рассылки.

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

контента и для отображения статистики по

компаниям/группам. Оверлеи для добавления и редактирования представляют собой ИТМЬ формы. Оверлеи для отображения статистики имеют более сложную структуру, состоящую из диаграмм и

графиков. Они генерируются с помощью 1ауа8спр1:. На рис. 2 представлен пример оверлея для добавления темы.

4

Добавление темы: о

Название темы:

Добавить компанию

Рис. 2.

c/html

Рис. 3.

HTML код, показанный на рис. 3, строится

средствами JSP. В разделе body созданы: логотип заказчика (img id=”user-logo”), название заказчика и дополнительная информация (блок client-name), блок контента (div id=”tabs”).

Для основного вида компании определены следующие управляющие элементы:

• добавить компанию;

• настроить компанию;

• добавить тему;

• редактировать тему;

• добавить сообщение;

• редактировать сообщение;

• статистика по компании;

• статистика по теме;

• кнопки отправки форм.

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

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

некое действие — команды, исполняемые вебинтерфейсом [6]. Клавиши быстрого доступа дублируют функции веб-интерфейса. Ниже представлен список клавиш быстрого доступа с описанием функционала:

• Ctrl + Shift + C - дублирует функцию

«Добавить компанию»;

• Ctrl + Shift + T - дублирует функцию

«Добавить темы»;

• Ctrl + Shift + E - дублирует функцию

«Настроить компании»;

• Ctrl + Shift + S - дублирует функцию

«Статистика по компании».

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

• всплывающая при наведении на строку

текстовая подсказка;

• подсветка области с возможностью

редактирования;

• превращение указателя мыши в текстовый

курсор.

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

B. Модель

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

• Данные необходимые для аутентификации

пользователей в системе веб-интерфейса.

Каждому пользователю (заказчику

рассылки) присваивается уникальная пара

логин/пароль, которая однозначно

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

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

• Дополнительная информация о заказчике -

хранит данные, необходимые для

визуализации веб-интерфейса. Например, логотип, название, описание проекта

заказчика.

• Сообщения - содержит текст рассылаемого

сообщения.

• Темы рассылок - разделяют рассылаемые

сообщения на темы. Служит для логической группировки всех сообщений в группы сообщений. Кроме этого, на эти темы подписывается конечный получатель рассылок.

• Компании рассылок. У каждого заказчика

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

• Графики рассылки сообщений. Для тем

рассылок предусмотрена возможность отправки сообщения в определенные дни недели и временной интервал (по будням, с 9 до 18).

• Статистические данные. В базе данных

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

В веб-интерфейсе для сервера уведомлений в качестве базы данных используется объектнореляционная система управления базами данных PostgreSQL. Данный выбор обусловлен надежностью данной СУБД. По результатам автоматизированного исследования в исходном коде СУБД PostgreSQL выявлено 20 проблемных мест на 775000 строк (примерно одна ошибка на 39000 строк кода) [7].

Для взаимодействия контроллера с моделью используется промышленный стандарт

взаимодействия Java приложений с СУБД, называемый JDBC (Java Data Base Connectivity — соединение с базами данных на Java) [8].

C. Контроллер

Веб-интерфейс в качестве контроллера использует набор функций для работы с базой данных. Каждая функция определяется уникальным URI (Uniform Resource Identifier - унифицированный идентификатор ресурса). В качестве входных параметров функция получает данные по HTTP протоколу. Данные передаются с помощью метода GET или POST. Т аким образом, на языке Java данный набор функций может быть реализован с помощью

интерфейса сервлетов (servltes). Взаимодействие представления и контроллера осуществляется с помощью механизма асинхронных запросов (AJAX). В качестве формата обмена данных в AJAX применяется форма JSON. Ответ контроллера состоит из двух переменных: success - код результата

выполнения операции и html - HTML разметка. Код результата выполнения операции содержит значение 0 - если операция успешно выполнена и код ошибки в противном случае. Если в ходе выполнения операции произошла ошибка, в переменную html записывается сообщение об этой ошибке. Например, {“success”: 1; “ЫтТ:”Неверный формат запроса.”}.

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

Т ак как функция однозначно определяется своим URI, будем обозначать функцию ее адресом. Ниже представлены основные функции контроллера с описанием параметров (символом * помечены обязательные для заполнения параметры). Перед названием функции стоит метод, указываемый в HTTP пакете.

GET company - функция получения компаний конкретного пользователя. Принимает параметры:

• user_id* - уникальный номер пользователя,

выданный при успешной авторизации.

POST company - функция для добавления, редактирования. Принимает параметры:

• user_id* - уникальный номер пользователя,

выданный при успешной авторизации;

• company_id - уникальный номер компании в

базе;

• company_name* - имя компании;

• company_descr - описание компании;

• company_image - логотип компании;

• company_person - лицо, отвечающее за

данную компанию (служебная

информация);

• company_phone - контактный телефон.

В зависимости от установленного метода протокола HTTP (GET или POST) контроллер формирует различный ответ. Если установлен метод GET, функция формирует HTML код для компаний и тем данного пользователя. Если POST, то, в случае успешного выполнения запроса, в переменную html запишется сообщение «Компания успешно добавлена». Если заполнен параметр company_id, происходит редактирование компании. Однако, если компании с таким значением company_id не существует, то формируется сообщение об ошибке. GET theme - функция получения тем для данной компании. Принимает параметры:

• user_id* - уникальный номер пользователя,

выданный при успешной авторизации;

• theme_id* - уникальный номер темы в базе.

POST theme - функция для добавления, редактирования тем. Принимает параметры:

• user_id* - уникальный номер пользователя,

выданный при успешной авторизации;

• theme_id* - уникальный номер темы в базе;

• theme_name* - имя темы.

GET message - функция для получения сообщений для данной темы. Принимает параметры:

• user_id* - уникальный номер пользователя,

выданный при успешной авторизации;

• theme_id - уникальный номер темы в базе

данных, которой принадлежит сообщение. POST message - функция для добавления, редактирования сообщения. Принимает параметры:

• user_id* - уникальный номер пользователя,

выданный при успешной авторизации;

• message_id* - уникальный номер сообщения в

базе данных, которой принадлежит сообщение;

• message_name* - имя компании;

• message_text* -текст сообщения.

Функция действует по тому же принципу, что и функция company.

GET stats/company - функция для получения статистики по компании. Принимает параметры:

• user_id* - уникальный номер пользователя,

выданный при успешной авторизации;

• company_id* - уникальный номер компании в

базе.

GET stats/theme - функция для получения статистики по теме. Принимает параметры:

• user_id* - уникальный номер пользователя,

выданный при успешной авторизации;

• theme_id* - уникальный номер темы в базе. Функция company и message использует метод в HTTP пакете как один из параметров запроса. В остальных функциях метод HTTP запроса не используется и может быть как POST, так и GET.

III. Заключение

В данной статье была рассмотрена архитектура вебинтерфейса сервера уведомлений. В основу

архитектуры был заложен подход Model View Controller (MVC). Важной особенностью данного подхода - является отсутствие прямой связи между моделью и представлением. Модель связана с контроллером с помощью промышленного стандарта JDBC. Представление связано с контроллером с помощью подхода AJAX, используя формат обмена данными JSON. Данный формат по сравнению с XML содержит значительно меньшую долю разметки, что

уменьшает размер пересылаемых сообщений.

Меньший размер пересылаемых сообщений требует меньшего времени загрузки, что увеличивает

скорость работы веб-интерфейса. Также для ускорения работы интерфейса используются шаблоны

проектирования. Оверлеи позволяют ускорить

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

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

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

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

Библиография

[1] http://ru.wikipedia.ors/wiki/%C2%E5%E1-%E8%ED%F2%E5%F0%F4%E5%E9%F1

[2] http://ru.wikipedia.ore/wild/JSON

[3] Б. Скотт, Т. Нейл Проектирование веб-интерфейсов, - Пер. С англ. - Спб.: Символ-Плюс, 2010 г.352с., ил.

[4] http://ru.wikipedia.ore/wiki/Model-View-Controller

[5] Э. Гамма, Р. Хелм, Р. Джонсон, Дж. Влиссидес Приемы объектно-ориентированного проектирования. Паттерны проектирования, Питер, 2007 г.

[6] http://ru.wikipedia.org/wiki/%D1%EE%F7%E5%F2%E0%ED%E8 %E5 %EA%EB%E0%E2%E8%F8

[7] http://www.postgresql.ore/about/news/363/

[8] http://ru.wikipedia.org/wiki/Java Database Connectivity

[9] http://st-www.cs.illinois.edu/users/smarch/st-docs/mvc.HTML

[10] http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications

[11] http://iava.cnam.fr/iagl/biblio/spec/idbc-3 0-fr-spec.pdf