Родькина М.Ю._ПИбд-1502б. Разработка вебприложения для обработки заказов предприятия проката оборудования (на примере ооо Айсберг)
 Скачать 1.66 Mb.
|
|
Глава 2 Разработка и реализация проектных решений 2.1 Логическое моделирование предметной области 2.1.1 Выбор средств описания логической модели Логическое моделирование предметной области можно охарактеризовать как анализ логики развития прогнозируемого объекта и создание на этой основе моделей–образов. Цель логического моделирования – сделать проектирование программы отдельным процессом, не связанным непосредственно с написанием кода. При использовании логического моделирования, повышается эффективность: уменьшаются сроки разработки, снижается число программных ошибок, программные модули подходят для повторного использования. При описании логической модели разработанного веб-приложения будут использованы диаграммы вариантов использования и диаграммы классов. 2.1.2 Описание логической модели При создании логической модели информационной системы перейдем от созданной контекстной модели «КАК ДОЛЖНО БЫТЬ» к диаграмме вариантов использования. Диаграмма вариантов использования нужна для того чтобы выделить основные процессы, происходящие в системе, определить их взаимосвязь, также она способствует выделению функциональной структуры информационной системы. Диаграмма вариантов может описать функциональные возможности рассматриваемой информационной системы «КАК ДОЛЖНО БЫТЬ» и дает возможность для анализа информации об отношениях между различными вариантами использования и внешними пользователями–актерами, помогает описать типичные взаимодействия между пользователями системы и самой системой и предоставить описание процесса её функционирования. Разработанная диаграмма вариантов 26 использования для веб-приложения для обработки заказов в пункте проката представлена на рисунке 9. Рисунок 9 – Диаграмма вариантов использования На диаграмме вариантов использования, отображенной на рисунке 9 представлены следующие действующие лица (актеры): - сотрудник отдела проката – пользователь веб–приложения, который управляет информацией об оборудовании, клиентах, заказах; - директор предприятия – пользователь веб–приложения, который просматривает информацию о созданных заказах, истории заказов, клиентах с целью контроля, анализа, статистики, разработки маркетинговых и иных мероприятий. В таблице 2 отражена характеристика прецедентов (или вариантов использования) диаграммы. Прецеденты описывают типичное взаимодействие между пользователями системы и самой системой и процессы ее функционирования. 27 Таблица 2 – Краткая характеристика прецедентов Прецедент Характеристика Регистрация Регистрация пользователя в системе Добавление клиента Пользователь добавляет информацию по клиенту: ФИО, адрес, телефон Редактирование клиента Пользователь редактирует информацию по клиенту Удаление клиента Пользователь удаляет информацию по клиенту Добавление оборудования Пользователь добавляет информацию по оборудованию: название, цена, залог, оплата Редактирование оборудования Пользователь редактирует информацию по оборудования Удаление оборудования Пользователь удаляет информацию по клиенту Добавление заказа Пользователь добавляет информацию по заказу: клиент, оборудование, заказ Редактирование оборудования Пользователь редактирует информацию по заказу Удаление оборудования Пользователь удаляет информацию по заказу Завершение заказа Пользователь завершает заказ и переносит его из текущих заказов в историю Просмотр текущих заказов Пользователь просматривает текущие заказы Просмотр истории Пользователь просматривает историю заказов Для того чтобы отобразить структуру информации в контексте классов и их взаимосвязей разрабатывается диаграмма классов, которая является дальнейшим развитием концептуальной модели проектируемой системы, она предназначена для отображения классов, а также их атрибутов и операций, и связей между классами. Класс в языке UML предназначен для обозначения множества объектов, с одинаковой структурой, поведением и отношениями с объектами из других классов. Графически класс изображается в виде прямоугольника, разделенного на 3 блока горизонтальными линиями: - имя класса, - атрибуты (свойства) класса, - операции (методы) класса. Для атрибутов и операций может быть указан один из трех типов видимости: - частный, 28 - защищенный, - общий. Рассмотрим диаграмму классов, представленную на рисунке 10. Рисунок 10 – Диаграмма классов На диаграмме представлены следующие классы: Класс «Клиент» содержит атрибуты: ФИО, адрес, телефон и методы для управления: добавить, удалить, редактировать. Класс «Оборудование» содержит атрибуты название, цена, залог, стоимость проката методы для управления: добавить, удалить, редактировать Класс «Заказ» содержит атрибуты – клиент, оборудование, количество дней, стоимость, залог, оплата. Класс «Пользователь» содержит атрибуты идентификатор, ФИО и метод управления контентом. Отношения между классами: - «пользователь» управляет классом «клиент», - «пользователь» управляет классом «оборудование», 29 - «пользователь» управляет классом «заказ», - класс «клиент» передается в класс «заказ», - класс «оборудование» передается в класс «заказ». Таким образом, были определены основные классы, их атрибуты взаимосвязи. 2.1.3 Характеристика нормативно-справочной и входной информации. Для функционирования большинства автоматизированных систем используется нормативно-справочная информация, это условно-постоянная часть которая существенно не изменяется в процессе повседневной деятельности предприятия. К нормативно-справочной информации относят, например, словари, справочники, классификаторы. Справочники - это особенная группа наборов данных, которая систематизируют данные разных типов. При внесении данных в справочник пользователь имеет возможность добавить только те значение, которые присутствуют в этом справочнике. Для разработанного веб-приложения справочной информацией являются справочник «Инструменты», который содержит информацию об инструментах и оборудовании для проката: наименование инструмента, стоимость, залог, оплата одного дня проката, а также справочник «Клиенты», содержащий данные клиентов – фамилию, имя, отчество, адрес, телефон. Справочник «Инструменты» заполняется один раз при внедрении в работу веб-приложения, в него заносится информация об инструментах и оборудовании, которые сдаются в прокат. В дальнейшем справочник пополняется только в случае закупки нового оборудования. Справочник «Клиенты» также заполняется при внедрении в работу веб- приложения, в него вносятся данные о всех клиентах проката. В дальнейшем справочник пополнятся в том случае, если клиента еще нет в базе. Под входной информацией понимается вся информация, необходимая для решения задачи веб-приложением. 30 Входная информация для веб-приложения поступает из договора на прокат оборудования, заключённого на данный заказ. Входной информацией относительно веб-приложения для обработки заказов в пункте проката являются фамилия клиента, наименование оборудования, количество дней, на которые оборудование берется в прокат. Для сбора входной информации используется диалоговая форма, содержащая поля: «Клиент», «Инструмент», «Количество дней». 2.1.4. Характеристика результатной информации В ходе работы веб-приложения формируется результатная информация в виде таблиц: «Заказы», «История заказов». Таблица «Заказы» отражает информацию по текущим заказам и содержит в себе следующие данные: - номер заказа, - фамилию, имя, отчество клиента, - название инструмента, - сумма залога, - количество дней проката, - стоимость одного дня проката, - итоговую сумму оплаты. Данная информация содержит оперативную информацию, необходимую в работе сотрудникам проката – какое оборудование сдано в прокат, у каких клиентов оно находится. Таблица «История Заказов и содержит в себе данные аналогичные таблице «Заказы» и отражает информацию по всем заказам, как открытым, так и закрытым. Данная информация предназначена для руководства (директора пункта проката) и позволяет контролировать работу, анализировать статистику спроса и финансовые результаты деятельности пункта проката. Таким образом, в рамках параграфа была разработана логическая модель веб-приложения для учета заказов в пункте проката и 31 охарактеризована справочная, входная и результатная информация, используемая при работе веб-приложения. 2.2 Физическое моделирование веб–приложения для обработки заказов предприятия проката оборудования 2.2.1 Выбор архитектуры веб-приложения учета заказов Архитектура информационной системы – это распределение функций по подсистемам и компонентам, она определяет границы подсистем и взаимодействие подсистем между собой. Проанализируем известные архитектуры. При файл–серверной архитектуре для хранения программы и данных используются сетевой ресурс. Данные и код программы хранит сервер, а обработка данных осуществляется на стороне клиента. Хранение и обработка данных при этом осуществляется в разных местах, данные приходится передавать по сети. Недостатки такой архитектуры – она имеет низкую производительность и низкую надежность, а также слабые возможности расширения. Другой вариант архитектуры «Клиент-серверная архитектура» Это вычислительная или сетевая архитектура, в которой задания, и сетевая нагрузка распределены между серверами и клиентами Чаще всего клиенты и серверы взаимодействуют через компьютерную сеть и могут быть как различными физическими устройствами, так и программным обеспечением. Как пример, удаленная база данных может быть расположена на компьютере–сервере сети, а приложение, работающее с этой базой данной, расположено на компьютере пользователя. В архитектуре «клиент–сервер» клиент отправляет запрос на предоставление данных и получает только запрашиваемые данные, 32 обработка запросов при этом осуществляется на удаленном сервере. Такая архитектура обладает следующими достоинствами: - меньше нагрузка на сеть из–за меньших объемов запрашиваемой информации; - повышение безопасности информации, связанное с общими для всех пользователей правила использования базы данных; - менее сложные клиентские приложения; Недостатками такой архитектуры являются: - если не работает сервер, то не будет работать вся вычислительная сеть - более сложное администрирование; - более высокая стоимость оборудования. Еще один вариант - это Трехуровневая клиент–серверная архитектура, то есть архитектурная модель программного комплекса, предполагающая наличие в нём трёх компонентов: клиента, сервера приложений (к которому подключено клиентское приложение) и сервера баз данных (с которым работает сервер приложений). Клиент является интерфейсным компонентом, с которым оперирует конечный пользователь. На сервере приложений сосредоточена логика работы с данными. Сервер баз данных нужен для хранения данных. В простых конфигурациях все компоненты могут быть совмещены на одном вычислительном узле. В сложных конфигурациях используют выделенный вычислительный узел для сервера баз данных или кластер серверов баз данных, для серверов приложений. Данная архитектура обладает хорошей масштабируемостью, гибкостью, конфигурируемостью, а также имеет высокую надежность и безопасность. Все функции распределяются между сервером приложений и сервером баз данных, что обеспечивает высокую скорость работы. Данная архитектура имеет не высокие требования к скорости сети между клиентом и сервером приложений, низкие требования к техническим характеристикам и 33 производительности клиента. Очевидно, что именно трехзвенная клиент– серверная архитектура лучше всего подходит для разработки веб- приложения для учета заказов в пункте проката. 2.2.2 Описание архитектуры веб–приложения для обработки заказов предприятия проката оборудования Итак, для разрабатываемого веб–приложения была выбрана трехзвенная клиент–серверная архитектура. Она состоит из трех звеньев: клиент – сервер приложений – сервер баз данных. Первое звено – клиент, это веб–браузер (например, «Google Chrome», «Opera», «Mozilla Firefox», «Edge» и др.). Клиентская часть реализована с помощью Javascript фреймворка и представляет пользовательский интерфейс. Второе звено – это серверная часть, представляет собой веб–сервер на платформе Node.js с использованием веб–фреймворка «Express» для создания программного интерфейса приложения. Третье звено – сервер баз данных (слой данных). Для реализации сервера базы данных используется система управления базами данных MySQL. Клиент взаимодействует с сервером приложений при помощи программного интерфейса приложения. Сервер приложений взаимодействует с сервером баз данных при помощи SQL–запросов. После того как была выбрана архитектура информационной системы, перейдем к выбору подхода к разработке программного обеспечения информационной системы. 2.2.3 Выбор подхода к разработке веб–приложения для обработки заказов предприятия проката оборудования Веб-приложения в отличие от десктопных приложений позволяют интернет–пользователям получить доступ к функционалу предоставляемого сервиса или инструмента, используя только браузер. Это в значительной мере экономит время пользователя, так как программу не нужно скачивать и устанавливать. 34 Существуют два основных подхода к разработке веб приложения, можно создавать многостраничные приложения (Multi Page Application, MPA) или одностраничные веб–приложения (Single Page Application, SPA). Многостраничные приложения работают более традиционным способом. При изменении данных или выгрузке информации на сервер происходит рендеринг новой страницы в браузере. Многостраничные приложения, очевидно, требуют больше памяти чем одностраничные, и обычно нацелены на отображение большего количества контента. Преимущества многостраничных приложений: - возможность создать многоуровневое меню и привычные средства навигации; - более простая SEO (Search Engine Optimization) оптимизация. Недостатки многостраничных приложений: - разработка МPA довольно сложна, так как она требует использования фреймворков как на клиентской, так и на серверной стороне; - многостраничные приложения требуют больше ресурсов. Одностраничные приложения – это приложения, которые функционируют в рамках браузера и не нуждаются в перезагрузке страницы или загрузки дополнительных страниц во время использования. Одностраничное приложение похоже на веб-страницу, оно подгружает и обновляет контент без перезагрузки, с помощью JavaScript. SPA отправляет запрос на разметку страницы и её контент, а после этого производит рендеринг конечного вида страницы непосредственно в самом браузере. Такого эффекта можно достигнуть благодаря фреймворкам JavaScript, таким как AngularJS, React.js, Vue.js, Ember.js и другие. Преимущества одностраничных приложений: - SPA характеризуются быстродействием, так как ресурсы, которые они используют (HTML, CSS и Javascript), загружаются один раз в 35 течение сессии использования приложения. После совершения действий изменяются только данные; - гибкость и отзывчивость пользовательского интерфейса — так как веб-страница всего одна, проще построить насыщенный интерфейс; - разработка SPA обычно быстрее и эффективнее. Не нужно писать отдельный код для рендера страницы на стороне сервера. - если есть SPA, есть возможность быстро создать мобильное приложение. Недостатки одностраничных приложений: - сложная SEO–оптимизация одностраничных приложений, так как контент приложений загружается, в то время как SEO–оптимизация базируется на устойчивости контента в каждой отдельно взятой странице; - могут довольно долго загружаться, если требуется загрузка тяжелых фреймворков; - SPA требуют, чтобы в браузере был активирован Javascript. Если кто–то из пользователей вручную отключит использование Javascript, то приложение не будет работать. Однако, вышеуказанные недостатки одностраничных приложений не критичны при разработке веб-приложения для учета заказов в пункте проката. Для целей данного приложения не требуется SEO-оптимизация, ручное отключение Javascript исключено. Также относительно долгая загрузка не существенна, так как программа будет запускаться один раз утром рабочего дня. Исходя из этого в качестве подхода к созданию веб– приложения была выбрана разработка одностраничного приложения. 2.2.4 Выбор технологии разработки программного обеспечения веб–приложения для обработки заказов предприятия проката 2.2.4.1 Обзор преимуществ использования Javascript–фреймворков В последние годы технологическое обеспечение в сфере веб- разработки сильно изменилась. Технологии, которые еще недавно были 36 передовыми как, например, JQuery, были заменены мощными Javascript– фреймворками и библиотеками, позволяющим разработчикам создавать интерактивные и удобные приложения. Цель фреймворка или библиотеки – ускорить и облегчить процесс проектирования и сопровождения приложения [23]. Основные преимущества использования фреймворков; - эффективность – проекты, которые раньше требовали много времени и большое количество кода, сейчас могут быть реализованы значительно быстрее с хорошо структурированными готовыми шаблонами и функциями; - безопасность – Javascript фреймворки имеют систему безопасности и хорошо поддерживаются; - расходы – большинство фреймворков с открытым кодом и бесплатны, они помогают программистам быстрее разрабатывать пользовательские решения и итоговая стоимость веб приложения ниже. Есть несколько JS–библиотек, которые в больше степени подходят для создания одностраничного веб-приложения, кратко рассмотрим их. 2.2.4.12 Фреймворк Angular Angular поставляется с большим списком функций, которые позволят разработать все, начиная от веб до десктопных и мобильных приложений. Фреймворк построен на Typescript от Microsoft. Структура этого фреймворка это комплекс сложных отношений между многими объектами, которые представляют собой отдельные уровни архитектуры кода. Код логически подразделяется на различные категории – инжекторы, компоненты, шаблоны, директивы и другие. Подобные функциональные блоки помогают разработчикам создавать легко масштабируемые приложения. Angular имеет расширенный шаблонный синтаксис с множеством логических операторов, встроенных в макет. Эти операторы позволяют разработчикам создавать интерактивные макеты 37 В структуре фреймворка компоненты управляются из разных модулей, которые и образуют SPA. Связь между компонентами и модулями реализуется с помощью специальных объектов, называемых метаданными. В них определяется, какой шаблон, селектор, модуль и поставщики присутствуют у каждого компонента. В Angular привязка данных двусторонняя, она автоматически изменяет данные в шаблоне, демонстрируемому пользователю, если изменяются данные в модуле. Также она функционирует и в обратном направлении – Angular изменяет данные в модуле, если пользователь взаимодействует с интерактивными элементами управления. Angular отличает масштабируемость и архитектурной строгостью. Его часто называют лучшим вариантом для корпоративных приложений или для сред программирования с высокими стандартами к читаемости кода. При этом он считается одним из самых сложных веб–фреймворков. 2.2.4.3 Фреймворк React.JS React это Javascript–фреймворк разработанный компанией Facebook. Цель фреймворка сделать манипулирование данными на веб-странице как можно более быстрым. Подход React можно описать как разделение всей веб–страницы на компоненты. Компоненты могут быть вложены друг друга, но каждый из них будет иметь свой собственный контекст данных. Это облегчает обновление информации на веб–странице путем рендеринга компонента в зависимости от динамически изменяемых данных [20]. В React используется синтаксис разметки, называемый JSX, что является его преимуществом. JSX очень похож на HTML, и при этом он имеет некоторые дополнительные возможности. Фреймворк позволяет создавать динамическую компоновку данных в разметке страницы и встраивать компоненты в разметку HTML. С помощью JSX можно встраивать функции на языке Javascript в макет для вывода динамических данных. 38 Каждый компонент имеет свое собственное состояние, состояние нужно для хранения различных параметров компонента, в зависимости от которых он рендерится веб–браузером. В React встроена специальная логика для управления деревом компонентов, которую называют «Virtual DOM». Данные, как и обычный DOM, хранятся в виде дерева. Но каждый раз, если состояние компонента изменяется, React вызывает его функцию рендеринга для перерисовки содержимого компонента. При этом он определяет, где данные должны быть изменены, и производит только выборочные изменения в «Virtual DOM» и в браузером DOM–дереве. Таким образом React делает наименьшее возможное количество манипуляций с DOM, что значительно ускоряет взаимодействие с веб-приложением [12]. Функциональность этого фреймворка также легко расширяется с использованием сторонних библиотек. 2.2.4.4 Фреймворк Vue.js Vue.js – это JavaScript библиотека для создания веб-интерфейсов с использованием шаблона архитектуры «Model – View – ViewModel». Фреймворк Vue.js использует виртуальный DOM, а также поддерживает серверный рендеринг. Vue.js работает только на «уровне представления» и не используется для промежуточного программного обеспечения и бэкэнда, поэтому он может легко интегрироваться с другими проектами и библиотеками. В Vue.js представлена широкая функциональность для уровня представлений, и он хорошо подходит как для небольших, так и объемных проектов. 2.2.4.5 Обоснование выбора Javascript фреймворка для разработки веб–приложения для обработки заказов предприятия проката Вышеописанные фреймворки являются наиболее эффективными для одностраничных приложений. Все они имеют свои преимущества, но для реализации этого проекта решено было использовать React.JS, так как он имеет несколько особых преимуществ. 39 Во–первых, React.JS обеспечивает удобную архитектуру, управляемую компонентами, которая упрощает рендеринг. Во–вторых, эта структура повышает производительность веб–сайта с использованием JSX и Virtual DOM. Для данного проекта более удобно использовать встраивание компонентов JSX, предлагаемое React, поскольку модульная система, используемая в Angular, слишком сложна для такого проекта, как веб-приложение для обработки заказов в пункте проката. В–третьих, React – это легкая библиотека, и это хорошее решение для нужд этого проекта, в то время как функциональность, например, Angular была бы чрезмерной. 2.2.4.6 Обоснование использования фреймворка Bootstrap для разработки веб-приложения для обработки заказов предприятия проката Bootstrap – один из самых популярных инструментов, который используется при создании сайтов и веб–приложений, это открытый и бесплатный HTML, CSS и JS фреймворк, который используется для быстрой разработки адаптивных дизайнов сайтов и веб–приложений. Bootstrap это инструмент, позволяющий быстро создать сайт или приложение из стандартных блоков [18]. Bootstrap включает в себя множество разных готовых компонентов для веб–сайтов: типографику, веб–формы, кнопки, блоки навигации и другое. Разработчику на нужно создавать верстку и стили для традиционных элементов веб–страницы или веб–приложения [30]. Преимущества использования Bootstrap: - использование Bootstrap значительно ускоряет и упрощает процесс разработки. Bootstrap дает готовые решения и их применение позволяет сократить время, затрачиваемое на верстку; - Bootstrap позволяет создавать адаптивные сайты. Это значит, что дизайн сайта будет правильно отображаться на экранах устройств разных размеров; 40 - страницы, сделанные с использованием Bootstrap, будут правильно отображаться во всех современных браузерах; - Bootstrap легко использовать в разработке, в нем легко разобраться. В сочетании с React удобно использовать библиотеку «react bootstrap», это популярная библиотека, которая позволяет использовать элементы bootstrapв стиле React. В «классическом» Bootstrap для стилизации используются классы, а в этой библиотеке можно использовать сразу компоненты. На рисунке 11 представлен фрагмент кода, разработанного веб– приложения для управления заказами в пункте проката, который демонстрирует использование компонента 41 Бандлеры позволяют упаковывать, компилировать, организовывать множество ресурсов и библиотек, необходимых для современного веб– проекта. Одним из самых мощных и гибких инструментов для сборки frontend части проекта является сборщик Webpack. Функционирование Webpack происходит следующим образом. При работе Webpack статически перемещается по всем модулям для построения графа и использует его для генерации одного бандла. Бандл – это файл JavaScript, содержащий код из всех модулей проекта и объединенных в правильном порядке. Когда Webpack создает граф зависимостей, он не выполняет исходный код, а объединяет модули и их зависимости в бандл. При выполнении задач Webpack опирается на конфигурацию, в которой указано, как файлы и ресурсы следует трансформировать. В соответствии с предоставленной конфигурацией Webpack запускается с точек входа и обрабатывает каждый модуль, с которым сталкивается, при построении графа зависимостей. Если модуль содержит зависимости, процесс выполняется рекурсивно для каждой зависимости. Webpack лучше всего подходит для сборки одностраничных приложений, разработанных с помощью Javascript-фреймворков и поэтому используется в описываемом проекте. 2.2.4.8 Обоснование использования библиотеки Redux Redux – это библиотека с открытым исходным кодом для улучшения предсказуемости состояния в приложениях, написанных с использованием JavaScript и JavaScript-фреймворков. Это независимая библиотека, обычно она используется с другими библиотеками, такими как React и Angular, для лучшего управления состоянием приложения. Когда приложение становится больше, становится сложнее управлять состоянием и отлаживать проблемы. Это становится проблемой, чтобы 42 отследить, когда и где состояние изменяется и где изменения должны быть отражены. Redux решает эту проблему, предоставив несколько простых правил для обновления состояния, чтобы оно было предсказуемым. Другими словами, Redux является менеджером состояний. Чаще всего данную библиотеку используют с фреймворком React, но он может быть использован в сочетании и с другими фреймворками. В Redux общее состояние приложения представлено одним объектом JavaScript - state (состояние) или state tree (дерево состояний). Неизменяемое дерево состояний доступно только для чтения, оно не подлежит прямым изменениям. Изменения возможны только при отправке action (действия). Redux это удобная библиотека и использование фреймворка React в сочетании с библиотекой Redux одно из самых распространённых решений при выборе технологий разработки. Поэтому данная библиотека была также использована для разработки веб-приложения для обработки заказов в пункте проката. 2.2.4 Функциональная схема проекта Рассмотрим функциональную схему проекта, представленную на рисунке 12. Рисунок 12 – Функциональная схема проекта 43 Как видно из схемы, пользователь из меню переходит в один из подразделов: «Заказы», «Клиенты», «Инструменты», «История заказов», в каждом из которых есть функции «Добавить», «Удалить», «Редактировать», а в подразделе «Заказы» также функция «Завершить» которая переводит заказ из текущих заказов в «Историю заказов» 2.2.5 Описание программных модулей и связи между ними Перейдем к описанию программных модулей и связи между ними. Схема взаимосвязи программных модулей представлена на рисунке 13. Разработанное приложение можно разделить на компоненты React и Редьюсер, который реализован с помощью библиотеки Redux. «Точка входа» в приложение это файл APP.js который содержит в себе модуль «Меню» и компоненты для отрисовки модальных окон – окно добавления нового клиента, окно добавления нового инструмента, окно добавления нового заказа. Модальные окна по умолчанию скрыты и могут быть показаны вызовом соответствующей функции. Рисунок 13 – Схема взаимосвязи программных модулей 44 Внутри компонента «Меню» вложены компоненты, которые отвечают за генерацию подразделов приложения: списка клиентов, списка инструментов, списка заказов. Переключение между ними реализовано с помощью библиотеки «react–router», которая отображает один из необходимых в данный момент компонентов и создает у пользователя впечатление переключения между страницами с помощью изменения URL в адресной строке. Состояние приложения хранится в едином хранилище, обеспечиваемой библиотекой Redux и все изменения происходят через функции этой библиотеки. Запросы к серверу – получение данных, удаление данных, редактирование данных реализованы с помощью библиотеки «axios», которая предоставляет удобный подход к работе с запросами. Стилизация компонентов по большей части осуществляется внутри фреймворка Bootstrap, также разработаны 4 файла с кодом CSS для кастомизации стилей. 2.3. Технологическое обеспечение задачи 2.3.1. Организация технологии сбора, передачи, обработки и выдачи информации Технологический процесс обработки информации это упорядоченная последовательность действий по обработке входных данных и информации, которая приводит пользователя к получению необходимого ему результата. Технологический процесс можно охарактеризовать как комплекс взаимосвязанных операций по преобразованию информации в соответствии с поставленной целью с момента входа в информационную систему до момента предоставлению информации пользователям. 45 Состав операций и последовательность их выполнения зависят от характера задач, которые должны быть решены и комплекса технических средств на каждом уровне обработки [17]. Технологический процесс обработки может включать следующие действия: - сбор данных; - обработка данных; - генерация данных; - хранение данных; - передача данных. Рассмотрим технологический процесс обработки информации о заказе. В рассматриваемом веб-приложении сбор данных о заказе производится в форме добавления нового заказа. Источником данных является раннее заключенный договор, который содержит информацию: данные клиента, наименование оборудования, которое берется в прокат, количество дней на оплату. На следующем этапе данные обрабатываются: во-первых, проверяется полнота заполнения данных. Если данные заполнены не полностью, подтверждение отправки формы не активно. Во-вторых, на основании внесенных данных об оборудовании и количестве дней, данные дополняются сведениями о сумме залога, стоимости оплаты одного дня проката. Данная информация берется из справочника «Инструменты» путем запроса к базе данных «Инструменты» на сервере. Далее рассчитываются данные об итоговой оплате следующим образом: суммируется произведение количества дней и стоимости одного дня с величиной залога. После чего происходит передача обработанной информации на сервер с последующим сохранением в базу данных «Заказы». Для генерации обновленных данных на странице производится запрос к базе данных «Заказы», данный запрос возвращает информацию о всех текущих заказах. 46 2.3.2. Схема технологического процесса сбора, передачи, обработки и выдачи информации Рассмотрим схему технологического процесса сбора, обработки передачи и выдачи информации веб-приложения для обработки заказов, представленную на рисунке 14. Рисунок 14 - Схема технологического процесса сбора, обработки передачи и выдачи информации 47 В начале работы пользователь вводит в приложение данные из договора, ранее заключенного с клиентом, на основе запроса клиента. Если клиент новый, пользователь переходит в базу данных клиентов и добавляет сведения о клиенте в форму. Если клиент на момент заказа уже есть в базе предприятия, пользователь выбирает клиента из базы клиентов, затем выбирает оборудование из базы оборудования, затем вносит количество дней на прокат оборудования, после чего информация о новом заказе передается в базу заказов. После сохранения пользователем на странице происходит генерация данных из обновленной базы заказов. Таким образом, в данном параграфе рассмотрено технологическое обеспечение задачи, а именно организация технологии сбора, передачи, обработки и выдачи информации и схема технологического процесса сбора, обработки передачи и выдачи информации 2.4. Контрольный пример реализации проекта и его описание 2.4.1 Описание функциональности веб приложения для обработки заказов предприятия проката оборудования Перейдем к описанию функций разработанного веб-приложения для обработки заказов. На рисунке 15 отображено меню разработанного приложения. Рисунок 15 – Скриншот меню веб-приложения 48 Веб-приложение для обработки заказов состоит из 4 разделов: «Активные заказы», «Клиенты», «Инструменты», «История Заказов», переключение между которыми осуществляется в «Меню». Первый раздел, скриншот которого представлен на рисунке 16 представляет собой реестр активных заказов, для перехода в который пользователь веб-приложения должен выбрать первый раздел «Активные заказы». Рисунок 16 – Реестр активных заказов В данном разделе пользователь веб-приложения может добавить новый заказ путем нажатия на кнопку «Создать заказ», в таком случае на экране всплывает модальное окно «Добавить новый заказ», что продемонстрировано на рисунке 17. В меню данного модального окна пользователь выбирает из выпадающего списка фамилию клиента, название инструмента или оборудования и вносит количество дней, на которое инструмент выдан клиенту. 49 Рисунок 17 – Модальное окно добавления нового заказа На рисунке 18 продемонстрировано модальное окно с заполненным полем «клиент» и показано, как пользователь может выбрать инструмент из списка. Рисунок 18 – Внесение данных в форму нового заказа 50 Нажатие кнопки «Отменить» отменяет действие и закрывает модальное окно, нажатие кнопки «Сохранить» отправляет внесенные данные на сервер и также закрывает модальное окно. После чего страница «Заказы» обновляется и добавленный заказ появляется в списке заказов. Рисунок 19 – Кнопки обработки заказов Как демонстрирует рисунок 19 возле каждого заказа есть кнопки обработки: - кнопка «редактировать» – открывает существующий заказ в модальном окне и позволяет вносить изменения в существующие данные; - кнопка «удалить» удаляет заказ; - кнопка «завершить заказ» используется при возврате клиентом взятого в прокат оборудования, в таком случае заказ удаляется из раздела активных заказов, но сохраняется в базе заказов и отображается в разделе «История заказов». Раздел «История заказов» имеет сходный интерфейс с разделом «Заказы» за исключением кнопки «Добавить заказ» и кнопок «Завершить заказ». Как упомянуто выше, раздел «История заказов» хранит все заказы для анализа и статистики. Раздел «Клиенты» представляет собой справочник клиентов предприятия проката и отображен на рисунке 20. 51 Рисунок 20 – Справочник клиентов В данном разделе представлена таблица с именами, адресами и телефонами клиентов. Для каждой строки реализована возможность редактирования и удаления. Кнопка «Новый клиент» вызывает модальное окно, показанное на рисунке 21. Рисунок 21 – Модальное окно добавления клиента 52 В данном модальном окне пользователь веб-приложения имеет возможность добавить нового клиента, путем заполнения полей «Имя», «Адрес», «Телефон». Из меню веб-приложения пользователь также может перейти в раздел «Инструменты», скриншот которого представлен на рисунке 22. Данный раздел отображает справочник инструментов, которые могут быть выданы в прокат. Рисунок 22 – Справочник «Инструменты» Для каждого инструмента в данной таблице отображаются столбцы «Наименование», «Цена», «Залог», «За сутки», «Категория», «Описание», а также кнопки «Редактировать» и «Удалить». Кнопка «Добавить инструмент», расположенная над таблицей открывает для пользователя модальное окно, скриншот которого представлен на рисунке 23. 53 Рисунок 23 – Модальное окно добавления инструмента В данном модальном окне можно добавить новый инструмент, путем заполнения полей. Кнопка «Отменить» закрывает модальное окно без сохранения данных. Кнопка «Сохранить» активна только после заполнения всех полей. При нажатии на кнопку «Сохранить» данные отправляются на сервер в базу данных «Инструменты», модальное окно закрывается, страница «Инструменты» перерисовывается с добавлением внесенного заказа. 2.4.2 Тестирование 2.4.2.1 Постановка задачи для тестирования Для проверки функционала веб-приложения протестируем функционал. Чтобы провести тестирование, определим задачи, которые должны быть успешно выполнены: - зайти в приложение; - проверить визуальную корректность таблиц; - создать нового клиента; - создать новый инструмент; - создать новый заказ; 54 - выполнить во всех разделах операцию удаления; - выполнить во всех разделах операцию редактирования; - завершить заказ. Результаты выполнения данных задач позволят оценить успешность реализации веб-приложения для обработки заказов. 2.4.2.1 Результаты тестирования При выполнении тестирования получены следующие результаты: - успешный вход в приложение; - таблицы отображаются корректно, ошибок нет; - при нажатии кнопок «Добавить ...» открывается модальное окно с формой; - кнопка «добавить» активна только после заполнения всех полей в модальном окне; - запись о новом клиенте успешно создается и добавляется в список заказов; - запись о новом инструменте успешно создается и добавляется в список; - новый заказ успешно создается и добавляется в список; - операция удаления корректно функционирует во всех подразделах; - операция редактирования успешно функционирует во всех подразделах. Таким образом, проведенное тестирование свидетельствует об успешной реализации веб-приложения приложения. Выводы по главе 2 Во второй главе осуществлено логическое проектирование предметной области. С помощью выбранного средства моделирования был построена диаграмма вариантов использования и диаграмма классов. Затем была описана нормативно-справочная, входная и результатная информация. 55 После чего были проанализированы популярные архитектуры информационных систем и была выбрана трехзвенная клиент–серверная архитектура. В качестве подхода была выбрана концепция одностраничного приложения. Затем был проведен анализ и подобраны инструменты для технической реализации: фреймворки React.js, библиотека Redux, фреймворк Bootstrap, и сборщик Webpack. После чего были описаны программные модули и схема взаимодействия между ними, а также технологическое обеспечение задачи. В завершающей части главы описан функционал разработанного приложения и результаты тестирования, которые позволяют говорить об успешном решении поставленной задачи. |