17
Рисунок 2. Линейная структура организации
Системы электронного документооборота играют важную роль в
оптимизации процессов. В дальнейшем, в работе будут рассмотрены
различные аспекты выбора, применения, внедрения различных систем
электронного документооборота, с целью выбора и внедрения такой системы
в компанию, для оптимизации ее документопотоков, а также оценки
экономической эффективности предложенного решения.
1.2. Анализ и выбор технологий разработки интернет-магазина
В современном мире веб-приложение, к которому относится интернет-
магазин, имеет клиент-серверную архитектуру. Рассмотрим технологии,
используемые для создания веб-сайта, исполняемые на стороне клиента, в
браузере компьютера или мобильного устройства.
Прежде всего любое веб-приложение состоит из веб-страниц с
гипертекстовой разметкой, традиционно оформленной в формате
HTML[16][17].
HTML5 (англ. HyperText Markup Language 5) — язык гипертекстовой
разметки для создания веб-страниц. Это пятая версия HTML[16], последняя
18
версия которого была стандартизирована в 1997 году. Основное отличие
разработки стандарта HTML5[17] в том, что его делают крупные компании,
создатели браузеров, такие как Google, Mozilla Foundation и др. Поскольку этот
стандарт изначально идет не от консорциума W3C, а от отрасли, то он является
более живым, нацеленным на практическое использование. С прагматической
точки зрения улучшения коснулись расширенной поддержки мультимедиа-
технологий с возможностью воспроизведения видео и отказа от технологии
Flash; более строгое структурирование кода с сохранением читаемости
человеком и повышением эффективности парсинга. Следует отметить, что в
стандарте заложены различные уровни абстракции, в том числе разделение
данных и представления. Непосредственно гипертекст формирует документ с
его логической структурой, а за внешний вид и стилизацию отображения
отвечают такие технологии как CSS[11].
CSS3 (англ. Cascading Style Sheets 3) — каскадные таблицы стилей
третьего поколения — активно разрабатываемая спецификация CSS[11].
Представляет собой формальный язык, реализованный с помощью языка
разметки. Главной особенностью CSS3 является возможность создавать
анимированные элементы, в т.ч. без использования JavaScript (см. далее),
поддержка линейных и радиальных градиентов, теней, сглаживания и многое
другое.
Для веб-разработчика создано множество открытых инструментов,
таких как Foundation и Twitter Bootstrap[25], которые предоставляют
возможности быстрого создания профессиональных интерфейсов. Поскольку
Bootstrap будет использоваться нами для области администрирования
интернет-магазина, перейдем к его рассмотрению.
Twitter Bootstrap — свободный набор инструментов для создания
сайтов и веб-приложений, разработанный компанией Twitter. Включает в себя
19
HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок,
меток, блоков навигации и прочих компонентов веб-интерфейсов, а также
расширения на языке JavaScript[14], который рассмотрим далее.
JavaScript — прототипно-ориентированный сценарный язык
программирования. Является диалектом языка ECMAScript. JavaScript обычно
используется как встраиваемый язык для программного доступа к объектам
приложений. Наиболее широкое применение находит в браузерах как язык
сценариев для придания интерактивности веб-страницам. Основные
архитектурные черты: динамическая типизация, слабая типизация,
автоматическое управление памятью, прототипное программирование,
функции как объекты первого класса. Несмотря на большую критику и
множество недостатков JavaScript, необходимо констатировать, что это чуть
ли не единственный язык, который исполняется на стороне клиента, поэтому
сложно представить сложное веб-приложение без использования этой
технологии. Для облегчения с DOM моделью документа разработаны
различные JS библиотеки. Наиболее известной и широко применяемой
является jQuery.
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии
JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к
любому элементу DOM, обращаться к атрибутам и содержимому элементов
DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный
API для работы с AJAX.
Функционально богатые веб-сервисы могут содержать большой объем
JavaScript кода, который перестает быть управляемым и становится трудным
для отладки. Для борьбы со сложностью и разделением логики клиентского
приложения, используют Шаблон проектирования MVVM.
20
Шаблон Model-View-ViewModel (MVVM) — применяется при
проектировании архитектуры приложения. Первоначально был представлен
сообществу Джоном Госсманом (John Gossman) в 2005 году как модификация
шаблона Presentation Model. MVVM ориентирован на современные
платформы разработки, такие как Windows Presentation Foundation, Silverlight
от компании Microsoft, ZK framework. MVVM используется для разделения
модели и её представления, что необходимо для изменения их отдельно друг
от друга. Например, разработчик задает логику работы с данными, а дизайнер
соответственно работает с пользовательским интерфейсом.
Модель (англ. Model), так же, как в классической MVC, Модель
представляет собой фундаментальные данные, необходимые для работы
приложения.
Представление (англ. View) — это графический интерфейс, то есть
окно, кнопки и т. п. Представление является подписчиком на событие
изменения значений свойств или команд, предоставляемых Моделью
представления. В случае, если в Модели представления изменилось какое-
либо свойство, то она оповещает всех подписчиков об этом, и Представление,
в свою очередь, запрашивает обновленное значение свойства из Модели
представления. В случае, если пользователь воздействует на какой-либо
элемент интерфейса, Представление вызывает соответствующую команду,
предоставленную Моделью представления.
Модель представления (англ. ViewModel) является, с одной стороны,
абстракцией Представления, а с другой, предоставляет обертку данных из
Модели, которые подлежат связыванию. То есть, она содержит Модель,
которая преобразована к Представлению, а также содержит в себе команды,
которыми может пользоваться Представление, чтобы влиять на Модель.
21
Knockout.js — JavaScript библиотека, которая позволяет создавать
сложные пользовательские интерфейсы в соответствии с паттерном MVVM.
Основная задача, которую выполняет Knockout - это автоматическое
обновление пользовательского интерфейса при обновлении данных модели.
Для этого используется механизм связывания (binding) модели и
представления. При изменении данных в JS-объектах модели, представление
автоматически изменяет внешний вид, посредством изменения модели DOM
документа веб-страницы. Чаще всего при работе с паттерном MVVM данные
модели синхронизируются с сервером посредством технологии AJAX языка
JavaScript.
AJAX, Ajax (англ. Asynchronous Javascript and XML — «асинхронный
JavaScript и XML») — подход к построению интерактивных пользовательских
интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными
браузера с веб-сервером. В результате, при обновлении данных веб-страница
не перезагружается полностью, и веб-приложения становятся быстрее и
удобнее. AJAX — не самостоятельная технология, а концепция использования
нескольких смежных технологий. AJAX базируется на двух основных
принципах:
Использование технологии динамического обращения к серверу «на
лету», без перезагрузки всей страницы полностью, например с
использованием XMLHttpRequest (основной объект);
Через динамическое создание дочерних фреймов;
Через динамическое создание тега <script>.
Через динамическое создание тега <img>, как это реализовано в Google
Analytics.
Использование DHTML для динамического изменения содержания
страницы;
22
Действия с интерфейсом преобразуются в операции с элементами DOM
(англ. Document Object Model), с помощью которых обрабатываются данные,
доступные пользователю, в результате чего представление их изменяется.
Здесь же производится обработка перемещений и щелчков мышью, а также
нажатий клавиш. Каскадные таблицы стилей, или CSS (англ. Cascading Style
Sheets), обеспечивают согласованный внешний вид элементов приложения и
упрощают обращение к DOM-объектам. Объект XMLHttpRequest (или
подобные механизмы) используется для асинхронного взаимодействия с
сервером, обработки запросов пользователя и загрузки в процессе работы
необходимых данных.
Три из этих четырёх технологий — CSS, DOM и JavaScript —
составляют DHTML (англ. Dynamic HTML). По мнению некоторых
специалистов, средства DHTML, появившиеся в 1997 году, подавали большие
надежды, но так и не оправдали их.
В качестве формата обмена данными между сервером и клиентом по
технологии AJAX могут использоваться фрагменты простого текста, HTML-
кода, JSON или XML. Мы будем использовать формат JSON.
JSON (англ. JavaScript Object Notation) — текстовый формат обмена
данными, основанный на JavaScript и обычно используемый именно с этим
языком. Как и многие другие текстовые форматы, JSON легко читается
людьми. Формат JSON был разработан Дугласом Крокфордом. JSON-текст
представляет собой (в закодированном виде) одну из двух структур:
● Набор пар ключ: значение. В различных языках это реализовано
как объект, запись, структура, словарь, хэш-таблица, список с ключом
или ассоциативный массив. Ключом может быть только строка,
значением — любая форма.
23
● Упорядоченный набор значений. Во многих языках это
реализовано как массив, вектор, список или последовательность.
Это универсальные структуры данных: как правило, любой
современный язык программирования поддерживает их в той или иной форме.
Они легли в основу JSON, так как он используется для обмена данными между
различными компонентами распределенной архитектуры, в т.ч.
реализованных на различных языках и платформах.
Серверная сторона веб-приложения может быть реализована с
помощью множества технологий, платформ и фреймворков. Но есть нечто
общее, что определяет тренды в развитии стандартов разработки веб-сервисов.
Это сервис-ориентированная архитектура (SOA) и REST архитектура.
Сервис-ориентированная архитектура (SOA, англ. service-oriented
architecture) — модульный подход к разработке программного обеспечения,
основанный на использовании распределённых, слабо связанных (англ. loose
coupling) заменяемых компонентов, оснащённых стандартизированными
интерфейсами для взаимодействия по стандартизированным протоколам[7].
Программные комплексы, разработанные в соответствии с сервис-
ориентированной архитектурой, традиционно реализовывались как набор веб-
служб, взаимодействующих по протоколу SOAP. Также ранее были
распространены реализации на базе на базе jini, CORBA. Сейчас же
стандартом является подход к архитектуре на основе REST[24].
Интерфейсы компонентов в сервис-ориентированной архитектуре
инкапсулируют детали реализации (операционную систему, платформу, язык
программирования) от остальных компонентов, таким образом обеспечивая
комбинирование и многократное использование компонентов для построения
сложных распределённых программных комплексов, обеспечивая
24
независимость от используемых платформ и инструментов разработки,
способствуя масштабируемости и управляемости создаваемых систем.
Архитектура REST (сокр. от англ. Representational State Transfer —
«передача репрезентативного состояния») — метод взаимодействия
компонентов распределённого приложения в сети Интернет, при котором
вызов удаленной процедуры представляет собой обычный HTTP-запрос
(обычно GET или POST; такой запрос называют REST-запрос), а необходимые
данные передаются в качестве параметров запроса. Этот способ является
альтернативой более сложным методам, таким как SOAP, CORBA и RPC.
В широком смысле REST поддерживает концепцию построения
распределённого приложения, при которой компоненты взаимодействуют
наподобие взаимодействия клиентов и серверов во Всемирной паутине.
Хотя данная концепция лежит в самой основе Всемирной паутины,
термин REST был введён Роем Филдингом (Roy Fielding), одним из создателей
протокола HTTP, лишь в 2000 году. В своей диссертации в Калифорнийском
университете в Ирвайне он подвёл теоретическую основу под метод
взаимодействия клиентов и серверов во Всемирной паутине, абстрагировав
его и назвав «передачей репрезентативного состояния». Филдинг описал
концепцию построения распределённого приложения, при которой каждый
запрос (REST-запрос) клиента к серверу содержит в себе исчерпывающую
информацию о желаемом ответе сервера (желаемом репрезентативном
состоянии), и сервер не обязан сохранять информацию о состоянии клиента
(«клиентской сессии»).
Разработка серверной части интернет-магазина будет вестись на языке
программирования Java[19] с использованием фреймоворка
PlayFramework[22].
25
Java — объектно-ориентированный язык программирования,
разработанный компанией Sun Microsystems (в последующем приобретённой
компанией Oracle). Приложения на языке программирования Java обычно
транслируется в специальный байт-код, поэтому они могут работать на любой
виртуальной Java-машине вне зависимости от компьютерной архитектуры.
Для создания веб-приложений на языке Java используются множество
различных технологий на стеке J2EE (сервлеты, JSP, Struts и др.), а также
фреймворки Spring MVC и PlayFramework.
Play Framework — это Model–View–Controller веб-фреймворк для
языков программирования Java и Scala от компании Typesafe. С одной
стороны, Play обладает гибкостью и простотой в использовании фреймворков
типа Django или Mojolicious, с другой — в нем реализованы многие идеи,
например, компилируемость, а, следовательно, и высокая
производительность, строгая статическая типизация и т. д., которые мы можем
наблюдать, например, в Yesod, LinkedIn, Gartner.
Для сериализации данных в реляционную модель существует
возможность подключения любой СУБД. По-умолчанию используется СУБД
H2.
H2 — Открытая кроссплатформенная СУБД, полностью написанная на
языке Java. Несмотря на богатую функциональность, при разработке СУБД не
используются сторонние библиотеки. Весь необходимый функционал
реализован разработчиками самостоятельно с целью облегчения
развертывания приложения. Фактически вся СУБД умещается в файле
размером 1 МБ, а весь архив, включая примеры и исходный код, — в 5 МБ
(для сравнения — дистрибутив СУБД Oracle 11 для Microsoft Windows
занимает 1,7 ГБ). СУБД весьма полезна в разработке, так как позволяет
создавать тестовые наборы данных прямо в памяти, имеет развитые
26
возможности запросов, многочисленные функции, совместимые с более
тяжеловесными БД, легко настраивается, имеет подробную и понятную
документацию. Для небольших программ СУБД возможно использовать
индивидуально, так как она легко встраивается в приложение. Часто для
увеличения скорости разработки и, особенно, прототипирования,
используются технологии Object-Oriented-Mapping (ORM). Для этого в
PlayFramework существует множество библиотек, таких как Ebean, Anorm и
др. Мы будем использовать библиотеку Ebean.
Ebean — свободно распространяемый продукт, ORM фреймворк,
инструмент для работы с объектно-реляционными отображениями.
Разработан для упрощения использования JPA (Java Persistence API) или JDO
(Java Data Objects).
Вся разработка будет вестись в среде IntelliJ IDEA, поскольку этот
инструмент поддерживает наиболее интеллектуализированные инструменты
разработки, а также полностью интегрирован с PlayFramework.
IntelliJ IDEA — Коммерческая интегрированная среда разработки
программного обеспечения на многих языках программирования, в частности,
Java, JavaScript, Python, разработанная компанией JetBrains. Начиная с шестой
версии продукта IntelliJ IDEA предоставляет интегрированный
инструментарий для разработки графического пользовательского интерфейса.
Среди прочих возможностей, IntelliJ IDEA хорошо совместима со многими
популярными свободными инструментами разработчиков, такими как CVS,
Subversion, Apache Ant, Maven и JUnit. Начиная с версии 9.0, IntelliJ IDEA
доступна в двух версиях: Community Edition и Ultimate Edition. Community
Edition является полностью свободной версией, доступной под лицензией
Apache 2.0. В ней реализована полная поддержка Java SE, Groovy, Scala, а
также интеграция с наиболее популярными системами управления версиями.