Информационная система Россельхознадзор. Разработка веб-интерфейса на основе компонентного подхода
Разработка реактивного одностраничного веб-приложения. Реализация работы с системой Аргус через веб-приложение. Создание удобного интерфейса и понятной навигации для веб-приложения. Проведение анализа возможной последовательности действия пользователя.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | дипломная работа |
| Язык | русский |
| Дата добавления | 10.01.2019 |
| Размер файла | 2,4 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА
Тема выпускной квалификационной работы
Информационная система Россельхознадзор. Разработка веб-интерфейса на основе компонентного подхода
АННОТАЦИЯ
Выпускная квалификационная работа содержит 80 страниц, 19 рисунков, 44 таблиц, 11 источников литературы.
В данной работе представлен процесс проектирования и реализации веб-приложения для информационной системы Россельхознадзор. Веб-приложение позволяет упростить работу с системой Аргус.
ABSTRACT
Graduation qualification work contains 80 pages, 19 illustrations, 44 tables, 11 bibliographies.
This work deals with the process of design and implementation of a web application for the Rosselkhoznadzor information system. Web application makes it easy to work with the Argus system.
СОДЕРЖАНИЕ
ВВЕДЕНИЕ
1. АНАЛИЗ ЗАДАЧИ
1.1 Цель работы
1.2 Поставленные задачи
1.3 Функциональные требования
1.4 Нефункциональные требования
1.5 Сценарий использования
1.6 Обзор аналогов
2. ПРОЕКТИРОВАНИЕ ВЕБ-ПРИЛОЖЕНИЯ
2.1 Выбор проектного решения
2.2 Архитектура приложения
2.3 Диаграмма последовательности
2.4 Диаграмма классов
2.5 Проектирование компонентов
2.6 Схема компонентов
3. РЕАЛИЗАЦИЯ ВЕБ-ПРИЛОЖЕНИЯ
3.1 База данных
3.2 Клиентская часть
3.3 Развертывание веб-приложения
4. ИНФОРМАЦИОННЫЙ МЕНЕДЖМЕНТ
4.1 Инструкция пользователя
4.2 Оценка затрат на разработку программного продукта
4.3 SWOT-анализ
ЗАКЛЮЧЕНИЕ
СПИСОК ЛИТЕРАТУРЫ
Приложение А Схема базы данных
ВВЕДЕНИЕ
Web-приложение - это прикладное программное обеспечение, логика которого распределена между сервером и клиентом, а обмен информацией происходит по сети. Клиентская часть реализует пользовательский интерфейс, а серверная - получает и обрабатывает запросы от клиента, выполняет вычисления, формирует веб-страницу и отправляет её клиенту согласно протоколу HTTP [1].
Данный вид приложений имеет ряд особенностей, которые накладывают отпечаток на процессы их функционирования, при разработке и поддержке:
а) открыта для тестирования с удаленных компьютеров, что оптимально для применения гибкой методологии разработки;
б) выполняются независимо от операционной системы клиента. При этом на него налагается требование кроссбраузерности, вытекающее из различной реализации браузерами стандартов HTML, CSS и DOM;
в) представляют собой распределенную информационную систему и должны выдерживать максимальное число обращений пользователя.
Причины увеличения роли веб-приложений очевидны. От пользователя, теперь не требуется установки дополнительного программного обеспечения. И их проще подстраивать под него. Такие приложения более управляемы, снижены требования к устройству клиента. В web-приложения начинают закладывать дополнительную функциональность, ранее закладываемую в традиционные приложения.
Компонентный подход - это подход позволяющий разбить основный код на компоненты. Каждый компонент будет выполнять свой строго заданный функционал. А также данный подход позволяет повторное использование кода, что упрощает разработку веб-приложения.
Возможность быстро и удобно оформлять документы для ввоза и вывоза животных, продуктов, оформлять документы для разрешения или отказов. Так же возможность вести мониторинг пути груза в РФ, и работать с организацией Госветнадзор. Для всего этого была разработана система Аргус.
Актуальность данного проекта состоит в том, чтобы реализовать работу с системой Аргус через веб-приложение. Это позволит уменьшить сложность работы с данными система. То есть позволит быстрее заполнять разные заявки без необходимости входа в данную систему.
Основные задачи, которые необходимо выполнить для реализации данного проекта:
а) разработать реактивное одностраничное веб-приложение;
б) обеспечить эластичность;
в) сделать удобный интерфейс веб-приложения;
г) создать понятную навигацию для веб-приложения;
д) интегрировать систему Аргус.
1
1. АНАЛИЗ ЗАДАЧИ
В данном разделе поставлена цель работы, проведен анализ поставленной задачи, анализ аналогов, и разработан сценарий использования.
1.1 Цель работы
Цель данной работы состоит в том, чтобы интегрировать систему Аргус в реактивное одностраничное веб-приложение. Данная система предназначена для работы в сфере Россельхознадзора.
1.2 Поставленные задачи
Ниже представлен список основных задач, которые необходимо выполнить для реализации данного проекта:
а) разработать реактивное одностраничное веб-приложение;
б) обеспечить эластичность;
в) сделать удобный интерфейс веб-приложения;
г) создать понятную навигацию для веб-приложения;
д) интегрировать систему Аргус.
1.3 Функциональные требования
Разрабатываемая система должна обеспечивать выполнение следующих функциональных требований:
а) просмотр данных в виде таблицы;
б) фильтрация данных в таблице;
в) группировка данных в таблице;
г) настройка вывода данных в таблице;
д) экспорт выбранных данных из таблицы;
е) просмотр детальной информации об предприятии;
ж) просмотр документа в онлайн режиме;
з) скачивание документа;
и) изменение языка веб-приложения.
1.4 Нефункциональные требования
Разрабатываемая система должна обеспечивать выполнение следующих нефункциональных требований:
а) необходим доступ к интернету;
б) круглосуточная работа сервера;
в) работоспособность сайта под большой нагрузкой;
г) графический интерфейс пользователя должен функционировать в наиболее распространенных браузерах;
д) удобный интерфейс для пользователя.
1.5 Сценарий использования
Диаграмма прецедентов (диаграмма вариантов использования) в UML -- диаграмма, отражающая отношения между актёрами и прецедентами и являющаяся составной частью модели прецедентов, позволяющей описать систему на концептуальном уровне [2].
Сценарий использования, вариант использования, прецедент использования -- в разработке программного обеспечения и системном проектировании это описание поведения системы, когда она взаимодействует с кем-то (или чем-то) из внешней среды. Система может отвечать на внешние запросы Актёра, может сама выступать инициатором взаимодействия. Другими словами, сценарий использования описывает, «кто» и «что» может сделать с рассматриваемой системой, или что система может сделать с «кем» или «чем». Методика сценариев использования применяется для выявления требований к поведению системы, известных также как пользовательские и функциональные требования [3].
На рисунке 1 представлена диаграмма прецедентов, по которой будет описан сценарий использования.
Рисунок 1 - Диаграмма прецедентов
В таблицах 1 - 10 описаны прецеденты из Диаграммы прецедентов.
Таблица 1 - Прецедент «Изменение языка веб-приложения»
|
Раздел |
Описание |
|
|
Изменение языка веб-приложения |
||
|
Актеры |
Пользователь. |
|
|
Предусловия |
Пользователь заходит на начальную страницу. |
|
|
Основной поток |
При нажатии кнопки «РУС» или «АНГ» в шапке сайта меняется язык локализации на русский или на английский. |
|
|
Альтернативный поток |
Нет. |
|
|
Постусловия |
Язык веб-приложения изменен. |
Таблица 2 - Прецедент «Просмотр данных в таблице»
|
Раздел |
Описание |
|
|
Просмотр данных в таблице |
||
|
Актеры |
Пользователь. |
|
|
Предусловия |
Пользователь заходит на начальную страницу. |
|
|
Основной поток |
При открытии веб-приложения, на главной странице пользователь может посмотреть список данных, представленных в виде таблицы. |
|
|
Альтернативный поток |
Нет. |
|
|
Постусловия |
Нет. |
Таблица 3 - Прецедент «Экспортировать выбранные данные»
|
Раздел |
Описание |
|
|
Экспортировать выбранные данные |
||
|
Актеры |
Пользователь. |
|
|
Предусловия |
Пользователь заходит на начальную страницу. |
|
|
Основной поток |
Выбрав данные из списка, пользователь может нажать на кнопку «Экспортировать выбранные данные». После чего пользователю на компьютер будет скачен файл excel с выбранными данными. |
|
|
Альтернативный поток |
Нет. |
|
|
Постусловия |
Скаченный файл в формате excel с выбранными данными. |
Таблица 4 - Прецедент «Фильтрация данных в таблице»
|
Раздел |
Описание |
|
|
Фильтрация данных в таблице |
||
|
Актеры |
Пользователь. |
|
|
Предусловия |
Пользователь заходит на начальную страницу. |
|
|
Основной поток |
Выбрав столбец для фильтрации данных пользователь может нажать на столбец, где ему откроется список данных, который он может выбрать, или пользователь может сделать фильтрацию написав ключевое слово в поле, находящееся под столбцом, а также выбрать по какому условию искать. |
|
|
Альтернативный поток |
Нет. |
|
|
Постусловия |
Отфильтрованные данные в таблице. |
Таблица 5 - Прецедент «Группировка данных»
|
Раздел |
Описание |
|
|
Группировка данных |
||
|
Актеры |
Пользователь. |
|
|
Предусловия |
Пользователь заходит на начальную страницу. |
|
|
Основной поток |
Выбрав столбец для группировки данных пользователь может перетащить выбранный столбец в верхнюю панель, после чего будет произведена группировка строк. |
|
|
Альтернативный поток |
Нет. |
|
|
Постусловия |
От группированные данные в таблице. |
Таблица 6 - Прецедент «Показывать\не показывать выбранные колонки»
|
Раздел |
Описание |
|
|
Показывать\не показывать выбранные колонки |
||
|
Актеры |
Пользователь. |
|
|
Предусловия |
Пользователь заходит на начальную страницу. |
|
|
Основной поток |
Нажав на кнопку находящеюся рядом с кнопкой экспорта, открывается диалоговое окно с столбцами, которые выбираются для отображения или скрытия данных данного столбца. |
|
|
Альтернативный поток |
Нет. |
|
|
Постусловия |
Скрытый или не скрытый столбец с данными. |
Таблица 7 - Прецедент «Просмотр документа онлайн»
|
Раздел |
Описание |
|
|
Просмотр документа онлайн |
||
|
Актеры |
Пользователь. |
|
|
Предусловия |
Пользователь заходит на начальную страницу. |
|
|
Основной поток |
Найдя нужную ссылку на документ, пользователь может нажать на эту ссылку и ему откроется отображение документа. |
|
|
Альтернативный поток |
Нет. |
|
|
Постусловия |
Документ прогружен и показан. |
Таблица 8 - Прецедент «Просмотр документа онлайн»
|
Раздел |
Описание |
|
|
Просмотр документа онлайн |
||
|
Актеры |
Пользователь. |
|
|
Предусловия |
Пользователь заходит на страницу с дополнительной информацией об документе. |
|
|
Основной поток |
Найдя нужную ссылку на документ, пользователь может нажать на эту ссылку и ему откроется отображение документа. |
|
|
Альтернативный поток |
Нет. |
|
|
Постусловия |
Документ прогружен и показан. |
Таблица 9 - Прецедент «Скачать документ»
|
Раздел |
Описание |
|
|
Скачать документ |
||
|
Актеры |
Пользователь. |
|
|
Предусловия |
Пользователь заходит на начальную страницу или на страницу с дополнительной информацией об документе. |
|
|
Основной поток |
Пользователь может скачать документ двумя способами, первым способом является нажатие на иконку скачивание возле ссылки, или после просмотра нажать на кнопку скачать находящуюся выше кнопки закрытия просмотра документа. |
|
|
Альтернативный поток |
Нет. |
|
|
Постусловия |
Скаченный документ. |
Таблица 10 - Прецедент «Просмотр дополнительной информации об документе»
|
Раздел |
Описание |
|
|
Просмотр дополнительной информации об документе |
||
|
Актеры |
Пользователь. |
|
|
Предусловия |
Пользователь, заходит на страницу с дополнительной информацией об документе. |
|
|
Основной поток |
Пользователь, найдя нужный документ в таблице может, посмотреть дополнительную информацию об этом документе, перейдя на страницу посредством двойного нажатия на выбранный документ. |
|
|
Альтернативный поток |
Нет. |
|
|
Постусловия |
Показанная дополнительная информация об документе. |
1.6 Обзор аналогов
Были найдены следующие аналоги разрабатываемого веб-приложения:
а) разработанное веб-приложение в России [1]. На данном веб-приложении реализовано работа с системой Аргус;
б) урезанная система на 1С системе;
в) реализованное веб-приложение в Чили, под названием unicef ecert.
Веб-приложение, разработанное в России, является устаревшим продуктом, а также в данном веб-приложении не хватает дополнительного функционала.
Система на 1С непригодна для работы по нескольким причинами:
а) интегрированные системы в 1С урезаны по функционалу. То есть в 1С система можно только просматривать данные;
б) 1С использует не API самой системы, а сайт, через который и идут разные запросы.
Система unicef ecert является в своем роде родителем системы Аргус. То есть из этой системы была взята основная логика. Однако unicef ecert является закрытой системой, в которую можно зайти только с территории страны Чили.
На основе выше сделанного обзора аналогов можно сделать следующий вывод. Веб-приложение, которое будет разработано будет иметь полный функционал в отличие от приложения на 1С системе. Так же будет доступно на территории России и остальных стран. И последнее это то, что будет пересмотрен интерфейс веб-приложения и добавлен новый функционалом или расширен уже существующий.
В данном разделе был проведен анализ задачи. В данном анализе была поставлена цель задачи, выделены основные задачи, функциональные и не функциональные требования, написан сценарий использования, а также был проведен анализ аналогов.
2. ПРОЕКТИРОВАНИЕ ВЕБ-ПРИЛОЖЕНИЯ
В данном разделе рассмотрен процесс проектирования веб-приложения.
2.1 Выбор проектного решения
Перед реализацией веб-приложения был проведен анализ существующих средств позволяющих реализовать веб-приложение на основе компонентного подхода.
Для анализа были выбраны два средства: Angular 5, ReactJS. Потому что имеется поддержка кода только для этих средств.
На рисунке 2 представлена архитектура фреймворка Angular 5.
Рисунок 2 - Архитектура Angular 5
Angular 5 -- это открытая и свободная платформа для разработки веб-приложений, написанная на языке TypeScript, разрабатываемая командой из компании Google, а также сообществом разработчиков из различных компаний. Angular -- это полностью переписанный фреймворк от той же команды, который назывался AngularJS [1].
Angular 5 предоставляет такую функциональность, как двустороннее связывание, позволяющее динамически изменять данные в одном месте интерфейса при изменении данных модели в другом, шаблоны, маршрутизация и так далее.
Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript.
На рисунке 3 представлена архитектура библиотеки ReactJS.
Рисунок 3 - Архитектура React JS
React -- это библиотека JavaScript, которая используется для создания пользовательского интерфейса [1].
React представляется идеальный инструмент для создания масштабируемых веб-приложений, особенно в тех ситуациях, когда приложение представляет SPA (одностраничное приложение) [1].
На основе выше представленных данных был проведен подробный анализ фреймворка Angular 4+ и библиотеки ReactJS.
ReactJS:
а) cам по себе ReactJS является библиотекой. Что осложняет настройки перед написанием кода;
б) однако за счет того, что ReactJS является библиотекой, реализованные на ней веб-приложения будут работать быстрее, чем реализованные на каком-либо фреймворке;
в) следующей особенностью является то, что в основном код пишется на языке программирования ECMAScript's.
Angular 5:
а) является фреймворком, что означает большой вес и не такая быстрая работа веб-приложения как у ReactJS;
б) однако в сравнении с ReactJS на Angular 5 код пишется на языке Typescripts. Что позволяет переменным, функциям и т.д. задать тип. То есть полностью типизировать код;
в) плюс того, что Angular 5 является фреймворком, это то, что при создании проекта, все базовые настройки уже будут прописаны и после создания можно будет сразу запускать веб-приложение. Что на ReactJS трудно выполнимо;
г) порог вхождения на Angular 5 будет меньше, чем на ReactJS, за счет тех же первоначальных настроек, плюс использование Reduce и Saga.
Из выше сделанного анализа, выбор был сделан в пользу Angular 5. Критерии которые стали решающими это то, что, начиная работать на данном фреймворке не надо делать много настроек, можно типизировать весь код что повысит читабельность кода. А также то, что порог вхождения для Angular 5 меньше, чем у библиотеки ReactJS.
Редактор кода был выбран Visual Studio Code, так как является не большим по весу, не занимает много памяти при разработке.
Visual Studio Code -- редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений. Поддерживает ряд языков программирования, рефакторинг, отладку, навигацию по коду, поддержку Git и другие возможности [1].
Система, которая будет реализована в виде веб-приложения будет система Аргус.
Система Аргус - предназначена для рассмотрения заявок на ввоз, вывоз или транзит животных, продуктов и сырья животного происхождения, процесса выдачи разрешений или отказов, сокращения объема передаваемых в бумажной форме документов и, как следствие, сокращения временных и трудовых затрат, а также для получения обратной информации о фактически ввезенных грузах и их объеме [1].
2.2 Архитектура приложения
Так как для разработки веб-приложения был выбран фреймворк Angular 5, то архитектура веб-приложения будет являться MVC.
То есть архитектура веб-приложения будет состоять из Model. View, Controller.
При помощи Model будем получать и хранить данные.
В Controller представлена вся логика приложения. Получаемые данные из Model, обрабатываются в Controller и отображаются в View.
View является слоем отображения, который содержит все View элементы.
2.3 Диаграмма последовательности
Диаграмма последовательности -- диаграмма, на которой для некоторого набора объектов на единой временной оси показан жизненный цикл какого-либо определённого объекта (создание-деятельность-уничтожение некой сущности) и взаимодействие актёров (действующих лиц) ИС в рамках какого-либо определённого прецедента (отправка запросов и получение ответов) [1].
На рисунке 4 представлена диаграмма последовательности.
Рисунок 4 - Диаграмма последовательности
приложение интерфейс веб аргус
На данной диаграмме представлена возможная последовательность действия пользователя на реализованном веб-приложении.
Пользователь открывает веб-приложение и начинает работу со стартовой страницы. Следующее -- это фильтрация данных таблицы. Где в итоге пользователь получает отфильтрованные данные.
При двойном нажатии на найденную и выбранную строку, пользователь переходит на страницу с дополнительной информацией. Пользователь может посмотреть содержание документа или скачать нужный документ.
Пользователь настраивает какие данные нужно показывать или скрывать. Так же делает группировку данных. После этого пользователю показывается таблица с обновленными данными.
После настройки пользователь нажимает на кнопку экспортировать выбранные данные из таблицы после чего, на устройство пользователя скачивается файл с данными в виде Excel.
И если пользователю непонятен русский или английский язык, пользователь нажимает на одну из кнопок в шапке, после чего веб-приложение меняет язык на выбранный пользователем.
2.4 Диаграмма классов
Диаграмма классов -- диаграмма, демонстрирующая классы системы, их атрибуты, методы и взаимосвязи между ними [1].
Существует два вида:
а) статический вид диаграммы рассматривает логические взаимосвязи классов между собой;
б) аналитический вид диаграммы рассматривает общий вид и взаимосвязи классов, входящих в систему.
Существуют разные точки зрения на построение диаграмм классов в зависимости от целей их применения:
а) концептуальная точка зрения -- диаграмма классов описывает модель предметной области, в ней присутствуют только классы прикладных объектов;
б) точка зрения спецификации -- диаграмма классов применяется при проектировании информационных систем;
в) точка зрения реализации -- диаграмма классов содержит классы, используемые непосредственно в программном коде (при использовании объектно-ориентированных языков программирования).
В данном случае диаграмма классов построена с концептуальной точки зрения. Диаграмма классов представлена на рисунке 5.
Рисунок 5 - Диаграмма классов
В таблицах 11 - 20 представлены сущности из Диаграммы классов.
Таблица 11 - Сущность «Реестр предприятий»
|
Параметр |
Значение |
|
|
Комментарий |
Сущность представляет собой список Реестра предприятий. |
|
|
Атрибуты |
||
|
Операции |
группировкаДанных() - группировка данных по столбцу фильтрДанных() - фильтр данных в таблице экспортДанных() - экспорт выбранных данных |
Таблица 12 - Сущность «Адрес»
|
Параметр |
Значение |
|
|
Комментарий |
Сущность представляет собой данные об адресе предприятия. |
|
|
Атрибуты |
Адрес: char Район: char Регион: char Страна: char |
|
|
Операции |
Таблица 13 - Сущность «Предприятие»
|
Параметр |
Значение |
|
|
Комментарий |
Сущность представляет собой данные об предприятии. |
|
|
Атрибуты |
Вид аттестованной деятельности: char Вид деятельности: char Название: char Номер: char |
|
|
Операции |
Таблица 14 - Сущность «Статус»
|
Параметр |
Значение |
|
|
Комментарий |
Сущность представляет собой данные об статусе предприятия. |
|
|
Атрибуты |
Начало действия и указания: char Номер и дата указания: char Статус: char |
|
|
Операции |
Таблица 15 - Сущность «Продукция»
|
Параметр |
Значение |
|
|
Комментарий |
Сущность представляет собой данные об продукции предприятия. |
|
|
Атрибуты |
Вид продукции: char Группа продукции: char Продукция: char Тип продукции: char |
|
|
Операции |
Таблица 16 - Сущность «Текущий статус предприятия»
|
Параметр |
Значение |
|
|
Комментарий |
Сущность представляет собой список текущих статусов предприятия. |
|
|
Атрибуты |
||
|
Операции |
Таблица 17 - Сущность «История статусов предприятия»
|
Параметр |
Значение |
|
|
Комментарий |
Сущность представляет собой список Реестра предприятий. |
|
|
Атрибуты |
||
|
Операции |
Таблица 18 - Сущность «Редактируемые данные»
|
Параметр |
Значение |
|
|
Комментарий |
Сущность представляет собой список Реестра предприятий. |
|
|
Атрибуты |
||
|
Операции |
приложение интерфейс веб аргус
Таблица 19 - Сущность «Документ об предприятии»
|
Параметр |
Значение |
|
|
Комментарий |
Сущность представляет собой набор данные об документе включающий в себя сущности Текущий статус предприятия, История статусов предприятия, Редактируемые данные, История изменений. |
|
|
Атрибуты |
||
|
Операции |
посмотретьДокумент() - просмотр документ в онлайн режиме скачатьДокумент() - скачивание документа |
Таблица 20 - Сущность «История изменений»
|
Параметр |
Значение |
|
|
Комментарий |
Сущность представляет собой список истории изменений документа предприятия. |
|
|
Атрибуты |
||
|
Операции |
2.5 Проектирование компонентов
Следующим шагом проектирование, было выделение следующих use case для которых в последствии были созданы компонент.
а) Начальная страница;
б) Страница с дополнительной информацией;
в) Таблица;
г) Расширенный поиск;
д) Показ документа;
е) Изменение языка на сайте;
ж) Изменение вида таблицы;
з) Группировка данных в таблице;
и) Экспорт выбранных данных из таблицы.
2.6 Схема компонентов
По списку use case представленного в начале прошлого раздела, была разработана схема компонентов, представленная на рисунке 6.
Рисунок 6 - Схема компонентов
ArgusBaseComponent - компонент реализует работу страниц и шапки в которой реализован компонент ArgusTranslateComponent.
ArgusTranslateComponent - компонент реализует локализацию сайта на английский или русский язык.
ArgusStartComponent - компонент является стартовой страницей и реализует компонент ArgusGridComponent.
ArgusDetailComponent - компонент реализует работу с дополнительной информацией об документе выбранном на стартовой странице. Так же реализует компонент ArgusGridComponent и ArgusAccordionComponent.
ArgusGridComponent - компонент который реализует работу с библиотекой DevExpress. Данный компонент рисует таблицу с данными.
ArgusExpansionPanelComponent - компонент который реализуется в каждой ячейки колонки, в которую вставляется контент из данного компонента.
ArgusModalComponent - компонент который рисует диалоговое окно и является контейнером для контента компонента который будет реализован в диалоговом окне.
ArgusExportComponent - компонент который реализует строку ввода, в которой вводится название файла, который будет скачен. Контент из этого компонента будет вставлен в компонент ArgusModalComponent.
ArgusAccordionComponent - компонент который создает блок с информацией об выбранном документе. Данный компонент реализуется в компоненте ArgusDetailComponent.
ArgusPdfComponent - компонент который реализует работу с библиотекой pdf-viewer. Данный компонент показывает содержание документа.
Как видно на схеме компонент ArgusGridComponent реализуется как в ArgusStartComponent, так и в ArgusDetailComponent, с разным функционалом. Этот случай как раз и показывает всю суть компонентного подхода.
Так же практически для каждого компонента были реализованы Service и Provider. Service - это служба в которой происходит реализация запросов на сервер. Provider - является связующим звеном между компонентом и сервисом. Описывает общий функционал которой может быть использован в других компонентов.
Выводы по разделу. В данном разделе был показан процесс проектирования веб-приложения. В итоге для реализации веб-приложения был выбран фреймворк Angular 5. Была разработана диаграмма прецедентов, диаграмма классов, схема компонентов. И описана архитектура приложения.
3
3. РЕАЛИЗАЦИЯ ВЕБ-ПРИЛОЖЕНИЯ
В данном разделе показан процесс разработки веб-приложения.
3.1 База данных
Серверная часть, как и база данных реализована была уже реализована. Схема базы данных представлена в приложении А на рисунке А.1.
В таблицах 21 - 34 представлены основные таблицы, реализованные в базе данных.
Таблица 21 - Таблица «Country»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, в которой представлены данные об странах. |
|
|
Атрибуты |
id - первичный ключ uuid - уникальный идентификатор guid - общий идентификатор active - какая из этих версий является активной. То есть может быть несколько записей с guid одинаковым, но только одна из них имеет флаг active = 1 next - ссылка на следующую версию в цепочке previous - ссылка на предыдущую версию в цепочке name - название страны |
Таблица 22 - Таблица «Region»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, в которой представлены данные об регионах в стране. |
|
|
Атрибуты |
id - первичный ключ uuid - уникальный идентификатор guid - общий идентификатор active - какая из этих версий является активной. То есть может быть несколько записей с guid одинаковым, но только одна из них имеет флаг active = 1 next - ссылка на следующую версию в цепочке previous - ссылка на предыдущую версию в цепочке name - название региона guidCountry - ссылка на таблицу Country |
Таблица 23 - Таблица «SubRegion»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, в которой представлены данные об районах в регионе. |
|
|
Атрибуты |
id - первичный ключ uuid - уникальный идентификатор guid - общий идентификатор active - какая из этих версий является активной. То есть может быть несколько записей с guid одинаковым, но только одна из них имеет флаг active = 1 next - ссылка на следующую версию в цепочке previous - ссылка на предыдущую версию в цепочке name - название страны guidRegion - ссылка на таблицу Region |
Таблица 24 - Таблица «Enterprise»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, в которой представлены данные об предприятиях. |
|
|
Атрибуты |
id - первичный ключ uuid - уникальный идентификатор guid - общий идентификатор active - какая из этих версий является активной. То есть может быть несколько записей с guid одинаковым, но только одна из них имеет флаг active = 1 next - ссылка на следующую версию в цепочке |
|
|
previous - ссылка на предыдущую версию в цепочке name - название предприятия address - адрес предприятия activity - основной вид деятельности guidCountry - ссылка на таблицу Country guidRegion - ссылка на таблицу Region guidSubRegion - ссылка на таблицу SubRegion |
Таблица 25 - Таблица «ProductType»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, которая представляет собой справочник продукции. |
|
|
Атрибуты |
id - первичный ключ name - название типа продукции |
Таблица 26 - Таблица «Product»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, которая представляет собой справочник продукции. |
|
|
Атрибуты |
id - первичный ключ uuid - уникальный идентификатор guid - общий идентификатор active - какая из этих версий является активной. То есть может быть несколько записей с guid одинаковым, но только одна из них имеет флаг active = 1 next - ссылка на следующую версию в цепочке previous - ссылка на предыдущую версию в цепочке name - название страны productType - ссылку на таблицу ProductType name - название продукции code - код продукции |
Таблица 27 - Таблица «SubProduct»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, которая представляет собой информацию об виде продукции. |
|
|
Атрибуты |
id - первичный ключ uuid - уникальный идентификатор guid - общий идентификатор active - какая из этих версий является активной. То есть может быть несколько записей с guid одинаковым, но только одна из них имеет флаг active = 1 next - ссылка на следующую версию в цепочке previous - ссылка на предыдущую версию в цепочке guidProduct - ссылку на таблицу ProductType name - название вида продукции code - код продукции |
Таблица 28 - Таблица «AllowedProduction»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, которая представляет собой информацию о том какую продукцию предприятие может вырабатывать. |
|
|
Атрибуты |
id - первичный ключ enterprise - ссылка на конкретную версию предприятия productType - тип продукции product - ссылка на версию продукции (может пустовать) subProduct - ссылка на версию вида продукции (может пустовать) |
Таблица 29 - Таблица «EnterpriseStatus»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, которая представляет собой информацию о статусе продукции. |
|
|
Атрибуты |
id - первичный ключ uuid - уникальный идентификатор guid - общий идентификатор active - какая из этих версий является активной. То есть может быть несколько записей с guid одинаковым, но только одна из них имеет флаг active = 1 |
|
|
next - ссылка на следующую версию в цепочке previous - ссылка на предыдущую версию в цепочке allowedProduction - ссылка на таблицу AllowedProduction startDate - момент начала действия статуса endDate - момент окончания действия статуса state - статус |
Таблица 30 - Таблица «EnterpriseDirection»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, в которой указаны указания к статусу. |
|
|
Атрибуты |
Id - первичный ключ enterpriseStatus - ссылка на таблицу EnterpriseStatus number - номер указания date - дата указания fileMetaInfo - ссылка на таблицу FileMetaInfo |
Таблица 31 - Таблица «FileMetaInfo»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, в которой представлена информация об файле. |
|
|
Атрибуты |
Id - первичный ключ size - размер файла name - название файла checkSum - контрольная сумма файла filepath - специальный путь к файлу |
Таблица 32 - Таблица «EnterpriseActivity»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, в которой представлены виды деятельности. |
|
|
Атрибуты |
id - первичный ключ name - название страны |
Таблица 33 - Таблица «EnterpriseActivityProductType»
|
Параметр |
Значение |
|
|
Комментарий |
Таблица, в которой представлена информация об видах деятельности связанной с типами продукции. |
|
|
Атрибуты |
id - первичный ключ enterpriseActivity - ссылка на таблицу EnterpriseActivity productType - ссылка на таблицу ProductType |
Таблица 34 - Таблица «EnterpriseStatusActivity»
|
Параметр |
Значение |
|
|
Комментарий |
Сущность представляет собой список Реестра предприятий. |
|
|
Атрибуты |
id - первичный ключ enterpriseActivity - ссылка на таблицу EnterpriseActivity enterpriseStatus - ссылка на таблицу EnterpriseStatus |
3.2 Клиентская часть
Настройка webpack и основные настройки
Создание проекта было начато с создания файла package.json и описанием в этом файле какие библиотеки будут использованы и команды для сборки проекта. После того как в файл package.json были добавлены основные библиотеки @angular, была сделана инициализация проекта командой npm init. После этой команды были созданы основные файлы проекта и базовые настройки.
Следующим этап была настройка конфигураций для менеджера пакетов Webpack.
Webpack -- это сборщик модулей для современных JavaScript-приложений. Когда Webpack обрабатывает приложение, он рекурсивно создает граф зависимостей, включающий все модули, необходимые приложению, затем упаковывает все эти модули в заданное число файлов -- часто всего в один -- для загрузки браузером [1].
Были настроены две конфигурации, одна конфигурация служит для сборки developer проекта, а другая конфигурация для production проекта.
Разница между этими сборками в том, что developer сборка служит для того, чтобы разработчику было комфортно читать код в браузерах, делать debug какого-то функционала, создавать какой-то функционал и сразу смотреть что он делает в итоге, без новой сборки проекта.
В то же время production сборка служит для того, чтобы получить уже готовый продукт, который уже можно запускать на сервере. Но у данной сборки нет того функционала что есть у developer сборки.
Одним из примером настройки служит то, что, по стандарту невозможно писать стили в файле с расширением scss. Webpack как раз позволяет настроить чтение данного файла и переопределение его в файл с расширением css.
Пример кода настройки чтения файла с расширением scss:
{
test: /\.scss$/,
loaders: ['raw-loader', 'sass-loader']
},
В данном коде говорится о том, что файл с расширением прочитать при помощи библиотек raw-loader или sass-loader.
Следующее действие было добавление остальных важных библиотек, при помощи которых был реализован основной функционал.
а) DevExtreme - библиотека при помощи которой можно реализовать разнообразный функционал (выпадающий список, таблица, диаграмма) [1];
б) Translate - библиотека позволяет создать локализацию на выбранных языках [1];
в) Pdf viewer - библиотека позволяет показывать документы с расширением .pdf в онлайн режиме не скачивая данный документ [1];
г) Flex Layout - библиотека позволяет равномерно распределить контент как для больших экранов так и для маленьких [1];
д) Material - библиотека позволяет использовать разные компоненты с стилем Material Design [1];
е) Router - библиотека при помощи которой настраиваются endpoints;
ж) Http - библиотека при помощи которой настраиваются обращения к серверу.
После настройки менеджера пакетов и добавление библиотек, в файле app.module.ts были прописаны и настроены библиотеки которые будут использоваться глобально.
Пример кода:
@NgModule({
bootstrap: [ArgusBaseComponent],
declarations: [
ArgusBaseComponent,
ArgusTranslateComponent
],
imports: [
CommonModule,
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule.forRoot(ROUTES, {useHash: true}),
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, './assets/i18n', '.json'),
deps: [Http]
}),
ArgusStartModule,
HttpClientModule,
HttpClientInMemoryWebApiModule.forRoot(
InMemoryDataService, { dataEncapsulation: false, passThruUnknownUrl: true }
),
BrowserAnimationsModule,
ArgusDetailModule
],
providers: [
HttpService
],
})
В данном коде показано как какие-либо библиотеки или компоненты импортируются в данный файл. Также в данном файле происходит настройка библиотеки Translate и Router.
3.2.1 Реализация компонента ArgusBaseComponent
После выше сделанных настроек был создан html файл, который является отправной точкой всего веб-приложения. В данном файле прописывает самый главный компонент, который будет уже подтягивать остальные компоненты.
Пример кода html файла:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Argus</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<argus-app></argus-app>
<% if (htmlWebpackPlugin.options.metadata.isDevServer) { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>
</body>
</html>
Как видно в теге body присутствует тег argus-base. Данный тег является вызовом главного компонента ArgusBaseComponent.
Пример кода созданного компонента:
@Component({
selector: 'argus-base',
encapsulation: ViewEncapsulation.None,
templateUrl: './tpl/index.html',
styleUrls: [
'./styles/index.scss',
]
})
Тег для компонента указывается в опции selector. По данному селектору вызывается компонент. В опции templateUrl указывается ссылка на шаблон. В опции styleUrls указывается массив ссылок на стили. В опции encapsulation указывается как использовать глобальные стили. Данные настройки прописываются в каждом компоненте без исключения. Поэтому в дальнейшем эти настройки не будут показываться.
Так как данный компонент является отправной точкой веб-приложения, здесь реализуется обращение к библиотеке router через тега router-outlet. Поэтому были настроены endpoints для двух основных страниц.
Пример кода настроенных endpoints:
{
path: '',
component: ArgusStartComponent,
},
{
path: 'detail/:id',
component: ArgusDetailComponent
}
В данном описывается что при запуске веб-приложения по стандарту будет запускаться ArgusStartComponent. И если в адресной строке к основному адресу будет добавлен endpoints detail/:id, то будет запускаться ArgusDetailComponent, а также будет передаваться параметр, который в данном компоненте можно будет получить.
Реализация компонента ArgusTranslateComponent
Также в компоненте ArgusBaseComponent вызывается компонент ArgusTranslateComponent при помощи тега argus-language.
Для того что бы сделать локализацию между двумя языками были созданы два файла с расширением .json, это ru-RU.json и en-EN.json. Как понятно из названия, в одном файле прописываются значения на русском языке, а в другом файле на английском.
Данный компонент реализует переключение между двумя языками веб-приложения.
Пример кода переключения языков:
public changeOnRu() {
this.translate.use('ru-RU');
}
public changeOnEn() {
this.translate.use('en-EN');
}
Данные функции привязаны к кнопкам. Функция use говорит библиотеке Translate использовать файл с нужным названием.
Пример вызова функции в шаблоне при нажатии:
<a (click)="changeOnEn()">
{{ 'en' | translate }}
</a>
В данном коде показан вызов функции при нажатии на кнопку, а также показана строка, в которой указывается ключ и обращение к библиотеке, что бы она посмотрела значение у данного ключа и поставила найденное значение в зависимости от выбранного языка.
Реализация компонентов ArgusStartComponent и ArgusDetailComponent как основных страниц
После добавления библиотек при помощи которых реализован основной функционал, были созданы два компонента ArgusStartComponent - стартовую страницу и ArgusDetailComponent - страницу с дополнительной информацией об предприятии.
Пример кода компонента ArgusStartComponent:
public gridConfig = <GridConfig>{
compContext: this,
isMultiSelection: true,
isColumnChooser: true,
isExport: true,
isFilterRow: true,
isGroupPanel: true,
contextMenu: true,
isHeaderFilter: true,
isPager: true,
isPaging: true,
};
ngOnInit() {
let self = this;
this.argusStartProvider.init();
}
goDetailPage($event: any) {
this.router.navigate(['detail', $event.data.id]);
}
Переменная gridConfig является объектом с опциями для компонента ArgusGridComponent. В данном объекте указывается какой функционал библиотеки будет работать.
В функции goDetailPage() идет работа с библиотекой Router. Функция библиотеки navigate переадресовывает на страницу с детальной информацией об предприятии и передает параметр id данного предприятия.
Функция ngOnInit() запускается, как только происходит инициализация компонента. И в данной функции идет обращение к провайдеру, который обращается к сервису. Сервис делает запрос на сервер и получает данные которые передает в провайдер.
Пример кода провайдера:
init() {
let self = this;
self.argusStartService.getViewGrid().subscribe((view) => {
let columns = self.gridProvider.viewColumnsToGridColumns(view);
self.compContext.gridConfig.columnDef = columns;
self.argusStartService.getDataGrid().subscribe((dataGrid) => {
self.compContext.gridConfig.rowData = dataGrid;
self.compContext.isLoaded = true;
self.compContext.dataLoaded.emit();
});
});
}
Пример кода сервиса:
getDataGrid(): Observable<any> {
return this.httpService.getMock('api/grid');
}
getViewGrid(): Observable<any> {
return this.httpService.getMock('api/view');
}
Пример кода шаблона:
<div style="height: 100%" fxLayout="column">
<div fxFlex="10" fxFlex.sm="15" fxFlex.xs="15" fxLayout="row">
<h3 style="padding-left: 10px">{{ 'start.title' | translate }}</h3>
</div>
<div fxFlex="90" fxFlex.sm="85" fxFlex.xs="85">
<argus-grid [gridConfig]="gridConfig" (rowDoubleClicked)="goDetailPage($event)"></argus-grid>
</div>
<div *ngIf="!isLoaded" class="spiner">
<mat-spinner></mat-spinner>
</div>
</div>
В коде показана работа библиотеки Flex Layout. При помощи атрибута fxFlex указывается размер контента, если написать fxFlex.sm это означается что для экрана размера small будет изменен размер контента.
Тег mat-spinner является компонентом библиотеки Material. В данном случае этот компонент показывается перед полной загрузкой страницы. После того как компонент прогрузился данный компонент скрывается. Это делается при помощи директивы *ngIf.
Тег argus-grid инициализирует работу компонента ArgusGridComponent. При помощи директивы [gridConfig] передается объект gridConfig из компонента ArgusStartComponent в компонент ArgusGridComponent при помощи объявления @Input(`gridConfig'), а данный код (rowDoubleClicked) позволяет реагировать на изменения в компоненте ArgusGridComponent, реализованного при помощи объявления @Output(`rowDoubleClicked'). В данном случае если будет двойное нажатие на строку в таблице, то в компоненте ArgusStartComponent будет запущена функция goDetailPage().
На данный момент код в компоненте ArgusDetailComponent, провайдере и сервисе такой-же, как и у компонента ArgusStartComponent, его провайдера и сервиса. За исключение того, что в компоненте ArgusDetailComponent идет вызов двух других компонентов.
Пример кода шаблона:
<argus-accordion [data]="details"></argus-accordion>
<argus-pdf [fileName]="fileName" [src]="src"></argus-pdf>
Тег argus-accordion инициализирует компонент ArgusAccordionComponent с переданными ему данными.
Тег argus-pdf инициализирует компонент ArgusPdfComponent с переданными ему названием файла, и пути к нему.
Компонент ArgusGridComponent инициализируется на данной странице с таким же кодом что и на стартовой странице.
Реализация компонента ArgusGridComponent
В компонент ArgusGridComponent была реализована работа с библиотекой devextreme. При помощи данной библиотеки реализована работа с таблицей.
Пример кода шаблона:
<dx-data-grid *ngIf="ready"
style="height: 100%"
#dataGrid
[dataSource]="gridConfig.rowData"
[columns]="gridConfig.columnDef"
[columnAutoWidth]="true"
[allowColumnResizing]="true"
<...Подобные документы
Создание, изучение и разработка приложение на Android. Среда разработки приложения DelphiXE5. Установка и настройка среды программирования. Этапы разработки приложения. Инструменты для упрощения конструирования графического интерфейса пользователя.
курсовая работа [1,6 M], добавлен 19.04.2017Технология разработки пользовательского интерфейса в среде Delphi. Создание таблицы, меню, форм для ввода и редактирования данных. Принципы организации меню как элемента интерфейса пользователя. Реализация сортировки, фильтрации, вычислений в таблице.
курсовая работа [1,6 M], добавлен 13.11.2012Общая характеристика командного интерфейса приложения в системе 1С: Предприятия. Особенности объектов конфигурации: справочников, документов, регистров накопления и отчетов. Разработка интерфейса приложения "Ремонт техники (от компьютера до пылесоса)".
курсовая работа [2,8 M], добавлен 06.11.2013Разработка и реализация демонстрационного многопоточного приложения. Выбор основных средств реализации. Описание логики работы приложения и разработка программного обеспечения. Описание пользовательского интерфейса. Реализация потоков в Delphi.
курсовая работа [462,5 K], добавлен 10.08.2014Общая характеристика и структурная схема приложения, требования к нему и функциональные особенности, сферы практического применения. Обоснование выбора языка программирования. Описание интерфейса и инструкция пользователя. Проведение листинга программы.
дипломная работа [1,0 M], добавлен 10.07.2017Понятие, законодательное регулирование и виды электронных подписей. Разработка структурной схемы приложения и базы данных. Создание диаграммы прецедентов и классов. Проектирование интерфейса программы. Анализ руководства пользователя web-приложения.
дипломная работа [869,8 K], добавлен 12.08.2017Проектирование удобного приложения для комфортной навигации по файлам облачного хранилища в одном файловом менеджере. Выбор интегрированной среды разработки. Выбор инструментов для визуализации приложения. Выбор средств отслеживания HTTPзапросов.
курсовая работа [3,6 M], добавлен 16.07.2016Обзор подходов к разработке музейных приложений с элементами дополненной реальности, формирование требований к ним. Выбор методов разработки приложения, разработка пользовательского интерфейса. Принципы тестирования. Реализация раздела "Распознавание".
дипломная работа [2,8 M], добавлен 03.07.2017Спецификация требований к разрабатываемому приложению. Разработка структурной схемы интерфейса. Описание алгоритма шифрования DES. Разработка программного кода приложения "DES". Проведение исследования основных шагов для генерации ключей и шифрования.
курсовая работа [398,4 K], добавлен 13.12.2022Архитектура клиент-сервер на основе сокетов Windows. Описание утилиты Ipconfig. Конфигурирование стека TCP/IP. Реализация сокетов через классы NET. Структура библиотечных и пользовательских классов. Схема интерфейса пользователя и работы приложения.
курсовая работа [419,5 K], добавлен 13.12.2012Разработка программного приложения WindowsForms для работы с базой данных на языке высокого уровня C# в автономном режиме с использованием ADO.NET. Проектирование реляционной модели базы данных, интерфейса приложения, основных функций и возможностей.
курсовая работа [4,3 M], добавлен 30.06.2015Последовательность разработки системы для оптимизации работы магазина интерьерных товаров, позволяющей хранить данные в одной базе и работать с ней с помощью удобного интерфейса клиентского приложения. Тестирование информационной системы. Листинг модулей.
дипломная работа [2,9 M], добавлен 07.07.2012Создание приложения в программе Rational Rose для удобного функционирования системы обслуживания банкоматов. Методы создания баз данных в программе и разработки диаграмм: последовательности, действий и состояния. Составление инструкции для пользователя.
курсовая работа [271,2 K], добавлен 15.02.2011Теоретические основы разработки приложения, реализующего подсвечивание ключевых слов. Описание используемых процедур и функций, структуры программы, интерфейса пользователя. Системные требования для работы приложения, анализ результаты его тестирования.
курсовая работа [1,2 M], добавлен 07.07.2012Требования к программе или программному изделию, к информационной и программной совместимости. Проектирование программного продукта. Процедура установки и удаления. Описание интерфейса, главное окно приложения. Основные возможности пользователя.
курсовая работа [678,1 K], добавлен 15.02.2016Проектирование вариантов использования приложения. Анализ существующей версии приложения. Обоснование выбора инструментальных программных средств. Проектирование интерфейса пользователя. Адаптация под мобильные устройства. Описание программного продукта.
курсовая работа [2,8 M], добавлен 25.06.2017Разработка мультитач-ориентированного приложения для туристических фирм на языке C# с использованием WPF. Применение Expression Blend для создание приложения интерактивной навигации. Проектирование программы для навигации в торговом центре "Гудвин".
отчет по практике [1,1 M], добавлен 16.09.2012Программирование приложения с использованием библиотеки OpenGL и функции для рисования геометрических объектов. Разработка процедуры визуализации трехмерной сцены и интерфейса пользователя. Логическая структура и функциональная декомпозиция проекта.
курсовая работа [1,1 M], добавлен 23.06.2011Назначение и структура таблиц, используемых в проекте. Задачи и требования приложения на уровне организации WEB-интерфейса. Функциональная структура программы. Алгоритм отображения разделов и подразделов. Процесс регистрации нового пользователя.
курсовая работа [1,0 M], добавлен 04.10.2010Принципы создания приложений с GUI. Панель инструментов для добавления элементов интерфейса. Расположение кнопки и осей в окне приложения. Управление свойствами объектов. Установка свойств при редактировании. Программное изменение свойств. Флаги и рамки.
методичка [1,1 M], добавлен 06.07.2009
