CC BY
48
Разработка модуля биллинговой системы для визуализации текстовых данных
К.Е. Косоруков,
студент 5-го курса, специальность «Информационные системы и технологии»
В.Н. Шурыгин,
к.т.н., доцент кафедры информационных систем
Веб-сервисы за последние годы прочно вошли в интернетпространство, постепенно вытесняя обычные компьютерные программы. В настоящий момент перед разработчиками насыщенных интернетприложений (RIA - Rich Internet Applications) стоит проблема организации простых, но вместе с тем многофункциональных веб-интерфейсов, которые позволяют пользователю быстро освоиться в системе и выполнять с помощью нее повседневные задачи. Однако практика показывает, что чем больше веб-приложение приближается к своему оффлайн-прототипу, тем более ресурсоемкий и громоздкий код приходится писать разработчикам для придания интерфейсу стандартного вида, к которому привыкли пользователи операционных систем с графическим оконным менеджером. В свою очередь, это отрицательно сказывается на производительности как конечного решения, так и сотрудников фирмы, создавшей данный продукт. Из этого следует, что направлением деятельности команды разработчиков становится не только прямая обязанность - разработка технического задания, спецификаций и написание кода для решения конкретной задачи, но и выбор подходящего инструмента для минимизации затрат ресурсов, под которыми понимается, например, время выполнения различных действий (отклики) системы, оперативная и постоянная память компьютера, время разработки программистом дополнительной функциональности.
В настоящей статье описаны методы разработки на одном из многочисленных JavaScript-каркасов для решения этой проблемы на примере модуля биллинговой системы «Алант», созданной и развивающейся в компании «АВК-Коммьюникейшнз». Модуль позволяет
26
визуализировать текстовые данные, которые накапливаются в базе данных за определенный срок и нуждаются в систематизации.
ExtJS - библиотека, написанная на языке JavaScript, задумывавшаяся изначально как расширение Yahoo UI Library, но со временем превратившаяся в отдельный проект. Имеет двойное лицензирование: есть возможность использовать как GPL v3, так и коммерческую лицензию компании Sencha. Основным ее направлением является создание клиент-серверных веб-приложений, похожих на desktop-приложения.
Фреймворк характеризуется наличием огромного числа компонентов, похожих на стандартные элементы управления систем с графическим оконным интерфейсом. Так, на рис. 1 показано небольшое приложение для чтения новостной ленты с использованием компонентов «панель закладок» (TabPanel), «таблица» (grid) и «дерево» (tree).
I Feeds
Ql Add feed Qj Remove feed 0 Sencha Blog О Sencha Forums [3 Ajaxian
| Sencha Blog |_________________________________
ffilQpen All @ Preview: Bottom * [ifel Summary ]
'J* Announcing the HTML5 is Ready App Contest Winners
Paul Kopadti
Date
2013/33/34 1:30 pm
Wow, we were impressed and amazed, and, frankly, a IWe overwhelmed by the entries to the HTMlS is Ready App Contest! We got hundreds of great submissions, so it took a bunch of work by myself, the other four judges, and our marketing team to whittle it down to manageable set of finals®, and then to have all the judges stack rank them to find the winners.
^ Sencha Eclipse Plugin 2.0 New and Noteworthy 2013/02/2S 9'28 Dm
Justin Early ^ 1 pm
Sencha Edipse Plugin is a full code assist and validation plugin for the popular Edpse IDE. With the plugin, you're able to get code assist for standard Sencha Touch (new in Sencha Edipse Plugin 1.1) and Ext JS types, as well as custom types that you define as a part of your project. In this artide, I will demonstrate the latest updates to this plugin.
Ф Using the Touch Scheduler Component Mats Bryntse
2013/32/21 12:00 pm
Bryntum has been woikrg hard lately to port their Ext Sdteduler component over to the Sencha Toudi platform. In this post, they Introduce you to the new version and share some details of how they developed a cross framework extension for Sencha Touch and Ext JS.
I ^ SenchaCon 2013 Registration How Open!
PaulKopada
it with 60+ sessions, a soaal e
2013/32/19 8:31pm
it each night and a full-day hackathon to dose out on a great week. Y
ЕУ View r new tab | ' # Go to post
Announcing the HTML5 is Reddy App Contest Winners Mar 4, 2013,1:30 prr
by Paul Kopacki
Wow, we were impressed and amazed, and, frankly, a little overwhelmed by the entries to the HTML5 is Ready App Contest! We got hundreds of great submissions, so It took a bunch of work by myself, the other four judges, and our marketing team to winnow It down to manageable set of finalsts, and then to have all the judges stack rank them to find the winners. Гт pleased to say that though we did our judging entirely independently, we had three dear winners emerge when we added up the scores. Without further ado, here they are, with a few choice quotes from the judges on each:
Рис. 1. Пример приложения на каркасе ExtJS
«Из коробки» разработчик получает сразу все необходимые инструменты, чтобы в кратчайшие сроки соорудить удобный и, что важно, кроссбраузерный пользовательский интерфейс. Имеются широкие возможности AJAX-коммуникации, в том числе:
- автоматическая сериализация и десериализация данных форм при передаче их на сервер;
- динамическая привязка хранилищ данных во время выполнения программы;
- встроенный шаблон Model-View-Controller, с помощью которого реализуется подгрузка необходимых программе компонентов,
27
отслеживание хода выполнения программы без ручных операций по установке и разбору заголовков запроса и ответа и многое другое.
За высокую функциональность приходится платить объемом исходного кода: в последней доступной на сегодняшний день версии (4.1.3) он составляет около 500 килобайт, что заметно сказывается на скорости загрузки страницы.
Типичный компонент (например, панель с закладками) описывается JavaScript-кодом; в основе каждого компонента лежит термин «конфигурационный объект». Это стандартный объект языка JavaScript, поля которого и их значения соответствуют таковым в документации ExtJS [1]. В листинге 1 приведен фрагмент исходного кода, реализующий компонент «окно»:
Ext.create('Ext.window.Window', { title: 'Hello', height: 200, width: 400, layout: 'fit', items: [{ xtype: 'grid', border: false,
columns: [{header: 'World'}],
store: Ext.create('Ext.data.ArrayStore', {})
}]
}).show();
Листинг 1. Возможная реализация компонента «окно»
Функция Ext.createQ является основой для создания любого компонента с помощью фреймворка ExtJS. Первым параметром в нее передается строковое представление типа объекта, который необходимо создать (в данном случае - окно), вторым - конфигурационный объект с параметрами данного компонента. В листинге 1 создается окно с заголовком «Hello» с высотой в 200 и шириной в 400 пикселей с применением макета типа «fit» (подробнее о нем можно прочитать в документации фреймворка [1]). В массиве items конфигурационного объекта показан еще один способ инициализации компонента, на сей раз без Ext.createQ, а только лишь самим конфигурационным объектом. Это не всегда удобно по причинам особенности языка JavaScript, но допустимо, если компонент достаточно прост. Свойство xtype в первом элементе массива items задает тип компонента через его псевдоним. В данном случае, это таблица. При объявлении данного элемента интерфейса необходимо задать хранилище (store) и столбцы (columns), которые будут отображаться в таблице из всех имеющихся в нем данных. Более под-
28
робное описание конфигурации элементов можно найти в официальной документации [1]. Результат выполнения листинга 1 показан на рис. 2.
Hello [х]
World
Рис. 2. Результат выполнения листинга 1. Компонент «окно»
с содержимым в виде компонента «таблица»
Проблема, впоследствии решенная с применением ExtJS, возникла в одном из крупных существующих проектов, работающих на биллинговой информационной системе «Атлант». Существовавший ранее модуль визуализации текстовых данных, получаемых из базы, стал использовать нерационально большие временные ресурсы при очень маленьком задействовании физических ресурсов сервера. В результате более 80% времени при выполнении задачи сервер фактически простаивал, а СУБД оказалась занятой настолько, что клиенты ощущали значительные задержки при работе с системой. Так как данная функция используется часто, а клиентов даже в ночные часы не становится намного меньше, было решено оптимизировать алгоритмы работы модуля таким образом, чтобы найти компромисс между временем отклика системы и использованием ею серверных ресурсов. Математически данную проблему можно выразить графиком, показанным на рис. 3, а.
Синий график p2(t) отражает желаемое течение процесса выполнения задачи, которой заведует модуль системы.
Красный p1(t) - фактическое.
R - максимальная нагрузка на сервер в настоящее время.
R2 - доля ресурсов сервера, которая будет задействована при выполнении задачи по желаемому сценарию.
T— время выполнения задачи после оптимизации.
Задача оптимизации сводится к нахождению алгоритма работы модуля, который удовлетворял бы следующим требованиям:
1. Время выполнения задачи Тне превышает рекомендуемое значение Tmax. Оценка верхней границы, Tmax, опирается на результаты исследований средней продолжительности пребывания пользователя на странице в ожидании ответа информационной системы [2].
29
2. R2 — минимально возможная доля ресурсов сервера, обеспечивающая время T — такова, что выделение большей, чем R2, доли не приводит к уменьшению затрачиваемого времени T, или же выигрыш во времени пренебрежимо мал, т. е. ск/ск ^ 0 при r> R2, где т(/) — функция зависимости времени от ресурсов (рис. 3, б).
б
Рис. 3: a — проблема нерационального использования модулем ресурсов сервера; б— взаимосвязь объема выделенных ресурсов сервера и времени выполнения задачи
30
Было предложено решение, основанное на использовании дочерних процессов модулем, которое схематически изображено на рис. 4.
Рис. 4. Возможное решение проблемы, представленной на рис. 3, а и 3, б
В локальной базе данных (SQLite) создается несколько таблиц, в которых сохраняются текстовые данные для визуализации, являющиеся счетами клиентов. Таким образом, обращение к удаленной главной базе происходит всего один раз, что освобождает ее ресурсы на большую часть времени работы модуля в отличие от прошлого решения, когда база опрашивалась с той же целью многократно на протяжении всего процесса.
Введем некоторые понятия.
Конвертер - процесс, непосредственно осуществляющий формирование документов по счетам.
Агент - процесс, контролирующий процессы-конвертеры.
Выгрузка - основной процесс, который распределяет задания по формированию документов из текстовой информации между конкретными агентами.
Общая схема работы следующая. В тот момент, когда администратору требуется запустить модуль в работу он заходит в его интерфейс, отмечает те данные, которые требуется визуализировать с помощью документов и нажимает кнопку запуска. Модуль выгружает из удаленной базы все необходимые записи в локальную базу и завершает работу с удаленным источником, освобождая его ресурсы. Следующим шагом управление передается главному процессу выгрузки. Он создает в системе несколько дочерних процессов, называемых агентами. В свою очередь, агенты аналогично создают определенное количество дочерних процессов-конвертеров, которые забирают порцию данных из локальной базы и формируют из них документ. Количество дочерних процессов агентов и конвертеров регулируется администратором системы,
31
что позволяет подобрать их оптимальное соотношение исходя из свободных ресурсов сервера, доступных на момент запуска модуля. Модуль предусматривает также возможность сохранения проставленных позиций при выборе данных администратором. В виде блок-схемы этот обобщенный алгоритм представлен ниже, на рис. 5.
Рис. 5. Обобщенный алгоритм работы модуля
Интерфейс модуля написан на ExtJS. Он состоит из нескольких страниц с панелью с вкладками, с помощью которых можно создать новое задание, отследить статус работы отдельных процессов, посмотреть общую информацию по текущему главному процессу задания, а также выполнить поиск записей в журнале, который составляется по мере работы. Пример страницы интерфейса показан на рис. 6.
Основными элементами данной страницы являются:
Фильтр поиска клиентов, для которых нужно сформировать документы. Он включает в себя возможность выбора клиентов, у которых определенный юридический статус: физическое или юридическое лицо.
32
Рис. 6. Страница интерфейса для создания нового задания
Точка выставления - внутренняя системная метка, которой может управлять администратор системы применительно к каждому клиенту. Может быть OFF-NET и ON-NET.
Департаменты - имеется возможность выбора всех клиентов, которые принадлежат какому-либо подразделению или фирме. Управляется аналогично, администратором. Департаменты могут быть подчиненными друг другу (один департамент содержит много более мелких депараментов-филиалов), для поиска по ним необходимо проставить соответствующую галочку.
Отчетный период - возможность задать временной промежуток, за который необходимо сформировать документы.
Сумма счета - состояние счета клиента.
После нажатия на кнопку «Найти счета» формируется таблица «Документы», в которой показываются типы документов для визуализации, тип юридического статуса клиента, а также количество самих записей. При нажатии на «Сохранить по умолчанию» выбранные позиции сохраняются в удаленной базе с помощью поля в таблице типов документов. Если же администратор системы нажимает «Выгрузить», то
33
модуль запускает сформированное из выбранных типов документов и отфильтрованных клиентов задание, передавая управление серверной стороне.
Внутреннее устройство части этой страницы (фильтр клиентов) представлено в листинге 2.
abh.massexport.task.Filter = Ext.extend(Ext.form.FormPanel, { title: 'Фильтр', height: 230, makeltems: function(){ this.defaults = { width: 200
};
this.items = [{
xtype: 'base.form.ComboBox', makeStore: function(){
this.store = new Ext.data.ArrayStore({ fields: ['code', 'name'],
data: [[0, 'Bee'], [1, 'Физическое лицо'], [2,
'Юридическое лицо']]
})
},
valueField: 'code', displayField: 'name', fieldLabel: 'Юридический статус', value: 0,
},
{
xtype: 'checkboxgroup', fieldLabel: 'Сумма счета', width: 400, name: 'v_summ', items: [{
boxLabel: 'положительная', name: 'v_possumm', inputValue: 1, checked: true
}
]
}];
},
34
initComponent: function(){
this.makeItems();
abh.massexport.task.Filter.superdass.initComponent.apply(this, arguments);
}
});
Ext.reg('abh.massexport.task.Filter', abh.massexport.task.Filter);
Листинг 2.Фильтр клиентов в интерфейсе создания нового
задания
В ExtJS инициализация компонента начинается с метода initComponent, который позволяет предварительно выполнить необходимые действия до отображения конечного результата на экране. В нем необходимо вызвать конструктор родительского компонента с помощью метода %componentName%.apply() с массивом arguments [3]. В примере выше в этой функции объекта типа abh.massexport.task.Filter, унаследованного с помощью метода Ext.extend() от типа Ext.form.FormPanel (форма с полями), вызывается метод makeItems(), который создает дополнительные элементы, включенные в панель. В данном случае, это выпадающий список типа base.form.ComboBox, унаследованный от Ext.form.ComboBox точно таким же способом, как сама панель формы, но в отдельном файле, который подгружен во время исполнения скрипта из листинга 2. Метод makeStore() создает хранилище, как оно создавалось в листинге 1 для элемента типа «таблица». Свойство displayField позволяет установить поле хранилища, которое будет отображаться на экране в элементе выпадающего списка для каждой записи, а свойство valueField - поле, которое будет приниматься в качестве атрибута значения для каждого пункта списка. Свойство fieldLabel задает метку с пояснением назначения поля около его контейнера, а value - начальное значение, которое уже будет выбрано.
Еще одним элементом панели формы является группа флажков (checkboxgroup). Через свойство xtype аналогично, как и для остальных компонентов, задается тип отображаемого элемента. Массив items в этой группе содержит элементы, каждый из которых является флажком. В качестве примера в листинге создается флажок с меткой «положительная сумма». На самом деле, в этот массив возможно включить любой другой элемент, но в таком случае нельзя будет предсказать поведение браузера при отображении панели с формой, так как каждый компонент в фреймворке имеет определенную область применения и проектирование нестандартных интерфейсов не приветствуется.
Таким образом, подводя итоги, об ExtJS можно сказать следующее.
Все компоненты этого каркаса написаны единообразно. Достаточно освоить несколько базовых приемов создания компонентов, чтобы писать красивые интерфейсы.
35
ExtJS освобождает программиста от забот с версткой макета: весь интерфейс создается с помощью языка JavaScript.
Он прекрасно работает в связке с серверными языками, такими как PHP [4], что было опробовано при практической реализации модуля биллинговой системы.
Проблема, рассмотренная в статье, на данный момент успешно решена с помощью реализации описанных алгоритмов. Сейчас модуль эффективно функционирует в составе проекта и может быть доработан исходя из пожеланий заказчика.
Библиографический список
1. Официальная документация фреймворка ExtJS v 4.1.3: http://docs.sencha.com/ext-js/4-1.
2. Strickland A. Beginning PHP RIA Using ExtJS. - «aPress», 2012, ISBN 978-1-430-2-3309-1. - 350 c.
3. Пауэлл Т Ajax. Настольная книга программиста - М. : Эк-смо, 2009, ISBN 978-5-699-35337-8. - 720 c.
4. Официальная документация языка PHP: http://php.net.
36
