Розробка Web-орієнтована інформаційна система центру здоров’я та краси

Шинкаренко, Дмитро Олександрович

Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/6902

Title:	Розробка Web-орієнтована інформаційна система центру здоров’я та краси
Authors:	Прокопенко , Тетяна Олександрівна Шинкаренко, Дмитро Олександрович
Keywords:	web-додаток;Express;інформаційна система;HTML;CSS;JavaScript;React;Redux;Node.js;PostgreSQL
Issue Date:	14-Jun-2022
Abstract:	Тема кваліфікаційної роботи бакалавра: «Розробка Web-орієнтована інформаційна система центру здоров’я та краси». Ціль роботи – розробити web-орієнтовану інформаційну систему центру здоров’я та краси, за допомогою якої, адміністратор салону зможе керувати інформацією про клієнтів, працівників, процедури та замовлення У першому розділі було проведено аналіз предметної області, а саме: ідентифіковано ідею проекту, проведено аналіз існуючих систем-аналогів. У другому розділі поставлено задачі та мети дослідження проекту. Також, було вибрано засоби реалізації додатку та визначено їх переваги. У третьому розділі було проведено моделювання інформаційної. Було побудовано контекстні та декомпозиційні діаграми інформаційної системи в нотації IDEF0, також, була побудована діаграма варіантів використанні та база даних інформаційної системи. У четвертому розділі описується практична реалізація інформаційної системи. В даному розділі описана архітектура даного web-додатка, описано розробку серверної та візуальної частини додатку і відображено алгоритм роботи з додатком. Результатом роботи є створена інформаційна система для управління салонами краси. За допомогою даного додатку, адміністратор салону має змогу додавати, проглядати, редагувати та видаляти інформацію про клієнтів, працівників та процедури. Також, реалізована можливість створювати замовлення для будь-якого клієнта і зберігання інформації про замовлення в базі даних і відображення її на сторінці клієнта. . Кожне виконане замовлення, також, відображається на сторінці працівника, який виконував замовлення. Від кожного виконаного замовлення, працівник отримує частку, яка підраховується в одну суму. Завдяки цьому, адміністратору набагато легше підраховувати заробітну плату працівників. Також, в даному додатку реалізована система накопичувальних бонусів для клієнта від замовлення.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/6902
Appears in Collections:	126 Інформаційні системи та технології (Web-технології, web-дизайн)

Files in This Item:

File	Description	Size	Format
РЕП_БАК_Шинкаренко_WEB-1811.pdf Restricted Access		4.86 MB	Adobe PDF	View/Open Request a copy

Show full item record

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ

КВАЛІФІКАЦІЙНА РОБОТА БАКАЛАВРА

на тему: «Розробка Web-орієнтована інформаційна система центру
здоров’я та краси»
за спеціальністю 126 «Інформаційні системи та технології»

Виконавець роботи: студент групи WEB-1811+ск Шинкаренко Дмитро
Олександрович

Кваліфікаційну роботу
захищено на засіданні ЕК
з оцінкою ___________ «___» червень 2022 р.

Науковий керівник ___________ д.т.н., професор Прокопенко Т.О.
(підпис) (науковий ступінь, вчене звання, прізвище та ініціали)

Голова комісії ___________ ____________________________
(підпис) (науковий ступінь, вчене звання, прізвище та ініціали)

Засвідчую, що у цій дипломній роботі немає
запозичень з праць інших авторів
без відповідних посилань

Студент _____________
(підпис)

Черкаси – 2022 року
1

Черкаський державний технологічний університет
(повне найменування вищого навчального закладу)

Факультет інформаційних технологій і систем
Кафедра інформаційних технологій проектування
Освітній рівень бакалавр
Спеціальність 126 Інформаційні системи та технології
(цифри і назва)
Освітня програма Web технології, Web-дизайн

ЗАТВЕРДЖУЮ
Зав. кафедри ІТП
___________ Прокопенко Т.О.
(підпис)
«___» ________________ 2022 року.

ЗАВДАННЯ
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТА

Шинкаренко Дмитро Олександрович
(прізвище, ім'я, по батькові)

1. Тема роботи: Розробка Web-орієнтованої інформаційної системи центру
здоров’я та краси
Керівник роботи: Прокопенко Тетяна Олександрівна, д.т.н., професор
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від
«___» __________ 2022 року. №____

2. Строк подання студентом роботи «17» травня 2022 р.

2

3. Вхідні дані до проекту: Інформація про методи дослідження, існуючі системи-аналоги,
засоби реалізації інформаційної системи____________________________________________

4. Зміст розрахунково-пояснювальної записки (перелік питань, які належить розробити):
Аналіз предметної області, Постановка задачі та мети дослідження, Моделювання
інформаційної системи, Практична реалізація інформаційної системи____________________

5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень):
зображення систем-аналогів, схеми контекстних та декомпозиційних діаграм в нотації
IDEF0, схеми діаграми варіантів використанні, схими бази даних, схеми алгоритму
роботи з інформаційною системою___________________________________________

6. Консультанти розділів робіт
Розділ Консультант Підпис, дата
Завдання видав Завдання прийняв

7. Дата видачі завдання ________________________________________________________

КАЛЕНДАРНИЙ ПЛАН
№ п/п Назва етапів випускної проекту Строк виконання Примітка
етапів проекту
1 Аналіз предметної області 10.01.22 – 04.02.22
1.1 Ідентифікація ідеї проекту 10.01.22 – 14.01.22
1.2 Аналіз існуючих аналогів 17.01.22 – 04.02.22
2 Постановка задачі та мети 07.02.22 – 25.02.22
дослідження
2.1 Визначення мети 07.02.22 – 11.02.22
2.2 Вибір засобів реалізації 14.02.22 – 25.02.22
3 Моделювання інформаційної 28.02.22 – 28.03.22
системи
3.1 Побудова діаграм в нотації IDEF0 28.02.22 – 07.03.22
3.2 Побудова діаграм варіантів 08.03.22 – 14.03.22
використання
3.3 Моделювання бази даних 15.03.22 – 28.03.22
3

4 Практична реалізація 29.03.22 – 13.05.22
інформаційної системи
4.1 Побудова архітектури додатку 29.03.22 – 06.04.22
4.2 Розробка серверної частини 07.03.22 – 13.04.22
4.3 Розробка візуальної частини 14.04.22 – 13.05.22

Студент дипломник Шинкаренко Д.О.
(підпис) (прізвище та ініціали)

Керівник роботи Прокопенко Т.О.
(підпис) (прізвище та ініціали)

4

АНОТАЦІЯ
Тема кваліфікаційної роботи бакалавра: «Розробка Web-орієнтована
інформаційна система центру здоров’я та краси».
Ціль роботи – розробити web-орієнтовану інформаційну систему центру
здоров’я та краси, за допомогою якої, адміністратор салону зможе керувати
інформацією про клієнтів, працівників, процедури та замовлення
У першому розділі було проведено аналіз предметної області, а саме:
ідентифіковано ідею проекту, проведено аналіз існуючих систем-аналогів.
У другому розділі поставлено задачі та мети дослідження проекту. Також, було
вибрано засоби реалізації додатку та визначено їх переваги.
У третьому розділі було проведено моделювання інформаційної. Було
побудовано контекстні та декомпозиційні діаграми інформаційної системи в нотації
IDEF0, також, була побудована діаграма варіантів використанні та база даних
інформаційної системи.
У четвертому розділі описується практична реалізація інформаційної системи.
В даному розділі описана архітектура даного web-додатка, описано розробку
серверної та візуальної частини додатку і відображено алгоритм роботи з додатком.
Результатом роботи є створена інформаційна система для управління салонами
краси.
За допомогою даного додатку, адміністратор салону має змогу додавати,
проглядати, редагувати та видаляти інформацію про клієнтів, працівників та
процедури. Також, реалізована можливість створювати замовлення для будь-якого
клієнта і зберігання інформації про замовлення в базі даних і відображення її на
сторінці клієнта. . Кожне виконане замовлення, також, відображається на сторінці
працівника, який виконував замовлення. Від кожного виконаного замовлення,
працівник отримує частку, яка підраховується в одну суму. Завдяки цьому,
5

адміністратору набагато легше підраховувати заробітну плату працівників. Також, в
даному додатку реалізована система накопичувальних бонусів для клієнта від
замовлення.
Пояснювальна записка складається зі вступу, аналізу предметної області,
постановки задачі та мети дослідження, моделювання інформаційної системи,
практичної реалізації інформаційної системи, висновків, списку використаних джерел
та літератури з 19 найменувань, додатку. Загальний обсяг роботи – 63 сторінки.
Ключові слова: Web-додаток, Інформаційна система, HTML, CSS, JavaScript,
React, Redux, Node.js, Express, PostgreSQL.
6

ANNOTATION
The topic of the bachelor's qualification work: "Development of Web-oriented
information system of the health and beauty center".
The explanatory note consists of an introduction, analysis of the subject area,
statement of the task and purpose of the study, modeling of the information system,
practical implementation of the information system, conclusions, list of sources and
literature of 19 items, addition. The total volume of the work is 63 pages.
In the first section the analysis of the subject area was carried out, namely: the idea
of the project was identified, the analysis of the existing systems-analogues was carried
out.
The second section sets out the objectives and objectives of the project study. Also,
the means of implementing the application were selected and their advantages were
determined.
In the third section, information modeling was performed. Context and
decomposition diagrams of the information system in the IDEF0 notation were
constructed, and a diagram of usage options and an information system database were
constructed.
The fourth section describes the practical implementation of the information system.
This section describes the architecture of this web-application and displays the algorithm
for working with the application.
The result is an information system for the management of beauty salons. The salon
administrator has the ability to add and edit information about employees, procedures and
customers in the system. Also, he has the ability to create orders for the customer.
Keywords: Web application, Information system, HTML, CSS, JavaScript, React, Redux,
Node.js, Express, PostgreSQL.

7

ЗМІСТ
СПИСОК СКОРОЧЕНЬ ТА ПОЗНАЧЕНЬ ....................................................................... 2
ВСТУП ................................................................................................................................... 3
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ .............................................................................. 5
1.1 Ідентифікація ідеї проекту ...................................................................................... 5
1.2 Аналіз існуючих web-орієнтованих інформаційних систем центру здоров’я та
краси ................................................................................................................................... 6
2 ПОСТАНОВКА ЗАДАЧІ ТА МЕТИ ДОСЛІДЖЕННЯ .............................................. 12
2.1 Мета та задачі ............................................................................................................ 12
2.2 Вибір засобів реалізації та їх переваги ................................................................... 13
3 МОДЕЛЮВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ ................................................ 17
3.1 Побудова контекстних та декомпозиційних діаграм в нотації IDEF0 ................ 17
3.2 Побудова діаграми варіантів використання ........................................................... 21
3.3 Моделювання бази даних ......................................................................................... 22
4 ПРАКТИЧНА РЕАЛІЗАЦІЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ ................................ 27
4.1 Архітектура web додатку ......................................................................................... 27
4.2 Розробка серверної частини додатку ...................................................................... 30
4.3 Розробка візуальної частини додатку ..................................................................... 34
4.3 Алгоритм роботи з додатком ................................................................................... 37
ВИСНОКИ .......................................................................................................................... 45
ДОДАТОК А ....................................................................................................................... 46
ДОДАТОК Б ....................................................................................................................... 51
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ТА ЛІТЕРАТУРИ .......................................... 69

ЧДТУ.221809.001 ПЗ
Зм. Лист № докум. Підпис Дата
Розроб. Шинкарекно Д.О. Web-орієнтована інформаційна Літ. Арк Аркушів
Перевір. 1
П рокопенко Т.О. система центру здоров’я та краси. 70
. Пояснювальна записка. ФІТІС, кафедра ІТП,
Н. Контр. Група Web-1811
Затверд.
8

СПИСОК СКОРОЧЕНЬ ТА ПОЗНАЧЕНЬ

HTML – HyperText Markup Language;
HTTP – HyperText Transfer Protocol;
CRUD – Create, Read, Update, Delete;
CSS – Cascade Style Sheets;
JS – JavaScript;
SQL – Structure Query Language;
SPA – Single Page Application;
ІС – Інформаційна Система;
ОС – Операційна Система;
КР – Кваліфікаційна Робота;
БД – База Даних;
ПК – Персональний Комп’ютер;

Арк.
ЧДТУ.221809.001 ПЗ
2
Зм. Лист № докум. Підпис Дата
ь
9

ВСТУП

Мережа Internet та комп’ютерна індустрія, сьогодні є невід’ємними частинами
нашого повсякденного життя. Ці технології надають нам можливість створювати web-
орієнтовані інформаційні системи для різних сфер надання послуг. Однією з таких
сфер є надання послуг салонів краси.
Багато вітчизняних і закордонних компаній намагаються бути
конкурентоспроможними та утримати свої позиції на ринку. Тому, усе частіше, вони
звертаються до розробників програмних продуктів, для того, щоб вони створили web-
продукт, який допомагає адміністраторам в управлінні клієнтами і працівниками їхніх
салонів краси, а також допомагає в створенні процедур і замовлень. Ключовий фактор,
в розробці таких систем є продумування коректної системи управління, яка найкраще
підходить для даного бізнесу.
Основною рисою таких інформаційних систем є їх надзвичайна складність.
Рівень складності визначається не тільки великим числом взаємозалежних елементів,
але і високим ступенем взаємозалежності їхніх характеристик, різноманітністю
функцій, необхідністю адаптації до впливів зовнішнього середовища.
Дуже складно уявити сучасний сало краси, в якому не використовується
інформаційна система для управління та створення замовлень. Така інформаційна
системи зменшує витрати бізнесу та допомагає керувати ним, без використання
паперових носіїв інформації.
Метою даного проекту є створення web-орієнтованої інформаційної системи
центру здоров’я та краси, яка надає можливість адміністраторам, в зручній формі
зберігати та редагувати інформацію про своїх клієнтів і працівників. Також, вона
надає можливість створювати та редагувати процедури, які надає даний салон, а також
створювати замовлення для клієнта.
Арк.
ЧДТУ.221809.001 ПЗ 3
Зм. Лист № докум. Підпис Дата
ь
10

Під час виконання КР потрібно провести ідентифікацію ідеї проекту,
проаналізувати існуючі системи-аналоги, провести постановку задачі та мети
дослідження, вибрати засоби реалізації даної ІС, побудувати контекстні,
декомпозиційні діаграми та діаграми варіантів використання системи, змоделювати
базу даних. Основним завданням є практична реалізація інформаційної системи, а
саме: побудова архітектури додатку, розробка серверної та візуальної частини.

Арк.
ЧДТУ.221809.001 ПЗ 4
Зм. Лист № докум. Підпис Дата
ь
11

1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ

1.1 Ідентифікація ідеї проекту
Ідеєю проекту є створення web-орієнтованої інформаційної системи центру
здоров’я та краси. Ця система надає можливість адміністраторам салону додавати та
редагувати інформацію про нових клієнтів та працівників, створювати замовлення для
клієнтів і вносити в базу даних інформацію про процедури, які надає салон.
При замовлені певних процедур, клієнт має можливість отримати бонус, який
автоматично нараховується йому в системі. Сам бонус залежить від процедури, яку
обрав клієнт. Бонус, який отримає клієнт від процедури вибирає адміністратор салону.
Такий функціонал надає можливість проводити різні акції, в період яких, клієнт має
змогу отримати більший бонус при замовленні тієї, чи іншої процедури.
Накопиченими бонусами клієнт може скористатися при оплаті замовлення. Він може
повністю або частково скористатися бонусами при оплаті замовлення.
Також, адміністратор може контролювати інформацію про працівників, які
працюють в салоні і замовлення які вони виконують. Після виконання кожного
замовлення, працівник отримує свою частку від замовлення. Кожна частка сумується,
тому адміністратор має можливість переглянути інформацію про те, скільки
замовлень виконав працівник і скільки йому потрібно заплатити за виконану роботу.
Такий функціонал звільняє адміністратора від підрахунку заробітної плати для
кожного працівника.
Даний додаток має доволі високу зацікавленість зі сторони підприємств, які
займаються наданням послуг у сфері краси. Якщо салон буде використовувати даний
додаток, то йому не потрібно буде зберігати інформацію про своїх клієнтів і
працівників на паперових носіях.

Арк.
ЧДТУ.221809.001 ПЗ 5
Зм. Лист № докум. Підпис Дата
ь
12

1.2 Аналіз існуючих web-орієнтованих інформаційних систем центру здоров’я та
краси

Аналог №1 - «CleverBox CRM»
CleverBox CRM представляє єдину систему, яка дозволяє керувати усіма
напрямками роботи салону краси. Сервіс CleverBox CRM також підходить для
перукарень, медичних салонів, SPA, масажних центрів.[1] При використані цього
сервісу, можна збільшити конверсію за допомогою онлайн-запису, збирати ключову
інформацію про клієнтів, вести усі види обліку та створювати власні програми
лояльності. Основна сторінка сервісу зображена на рисунку 1.1.
Переваги: наявність бази даних клієнтів та працівників, історія замовлень
кожного клієнта і працівника, можливість створювати замовлення.
Недоліки: платний продукт, доволі не зручний інтерфейс для користувача,
відсутність системи накопичування бонусів для клієнта.

Рисунок 1.1 – Сторінка сервісу «CleverBox CRM»
Арк.
ЧДТУ.221809.001 ПЗ 6
Зм. Лист № докум. Підпис Дата
ь
13

Аналог №2 - «Integrica Beauty CRM»
Integrica – це зручний інструмент для запису клієнтів. Сервіс надає змогу
налатувати розрахунок з майстрами та аналізувати доходи та витрати салону,
скоротити витрати часу на рутинні операції та розвивати власний бізнес.[2]
Сервіс містить чотири основних функції, які допоможуть в управлінні салоном
краси: календар, звіт із записів на відвідування, звіт витрат і доходів, базу клієнтів.
Після реєстрації пропонується пройти невеликий курс навчання з використання
сервісу. Інформація про запис в сервісі зображена на рисунку 1.2.
Переваги: доволі зручний інтерфейс для користувача, наявність бази даних
клієнтів та працівників, можливість створювати замовлення, безкоштовний,
навчальний відео курс.
Недоліки: платний продукт, відсутність системи накопичування бонусів та
історії замовлень клієнта.

Рисунок 1.2 – Інформація про запис сервісу «CleverBox CRM»

Арк.
ЧДТУ.221809.001 ПЗ 7
Зм. Лист № докум. Підпис Дата
ь
14

Аналог №3 - «BloknotApp»
BloknotApp – це зручний запис клієнтів, онлайн передоплата, нагадування та
багато іншого. BloknotApp підходить для салонів краси, SPA-центрів та
барбершопів.[3] Вся інформація про візити автоматично синхронізується із базою
клієнтів. Завдяки простому та зручному інтерфейсу, дуже просто користуватися
даним сервісом. Записи клієнтів на процедури відображено на рисунку 1.3.
Переваги: доволі зручний інтерфейс для користувача, наявність бази даних
клієнтів та працівників, наявність історії замовлень клієнтів і працівників, можливість
створювати замовлення.
Недоліки: платний продукт, відсутність системи накопичування бонусів для
клієнта.

Рисунок 1.3 – Записи клієнтів на процедури в сервісі «BloknotApp»

Арк.
ЧДТУ.221809.001 ПЗ
8
Зм. Лист № докум. Підпис Дата
ь
15

Аналог №4 - «PuduLand»
PuduLand – це онлайн менеджер для салонів краси. Сервіс розрахований під
автоматизацію послуг приватних майстрів, а також великих мереж салонів краси.[4]
Платформа дозволяє оперитвно взаємодіяти з кожним клієнтом, вести електронний
журнал, надсилати повідомлення клієнтам. Функція онлайн-запису дозволяє клієнтам
записуватись на прийом 24/7.
Завдяки онлайн-запису, кожен клієнт отримує особистий кабінет. У ньому є така
можливість, як “Історія замовлень”. Клієнту це дає можливість записуватися до
майстра, що сподобався, оскільки навіть якщо клієнт забуде до кого він звертався, він
завжди зможе подивитися історію візитів. Сторінка з проектами сервісу відображено
на рисунку 1.4.
Переваги: наявність бази даних клієнтів та працівників, наявність історії
замовлень для клієнтів і працівників, можливість створювати замовлення.
Недоліки: доволі не зручний інтерфейс для користувача, відсутність системи
накопичування бонусів для клієнта.

Рисунок 1.4 – Сторінка з проектами сервісу «PuduLand»

ААрркк.
.
Аналог №5 - «Appointer» ЧДТУ..221809..001 ПЗ 9
ЗЗмм.. ЛЛиисстт № ддооккуумм.. ППідідппиисс ДДаатта 10

а
ьь
16

Appointer – це сервіс, який чудово підходить для автоматизації основних
функцій салонів краси, масажних кабінетів, соляріїв. Appointer містить функції запису
прийому, обліку клієнтів і відвідувань, автоматичний розрахунок зарплати
співробітників.[5]
За допомогою хмарного рішення, Appointer надає можливість вести детальну
статистику підприємства, щоб ефективно управляти бізнесом. Календар замовлень
сервісу відображено на рисунку 1.5.
Переваги: наявність бази даних клієнтів та працівників, наявність історії
замовлень клієнтів і працівників, можливість створювати замовлення.
Недоліки: платний додаток, доволі не зручний інтерфейс для користувача,
відсутність системи накопичування бонусів для клієнта.

Рисунок 1.5 – Сторінка сервісу «Appointer»
Складемо таблицю порівняння, для чіткого визначення ключових факторів (таблиця
1.1).
Арк.
ЧДТУ.221809.001 ПЗ
11
Зм. Лист № докум. Підпис Дата
ь
17

Таблиця 1.1 Огляд аналогів
Зручність База Історія Створення Система
інтерфейсу клієнтів та замовлень замовлення накопичування
працівників бонусів
CleverBox CRM - + + + -
Integrice Beauty CRM + + - + -
BloknotApp + + + + -
PuduLand - + + + -
Appointer - + + + -

Ключовим фактором майбутньої системи є:
- Зрозумілий та зручний інтерфейс;
- Наявність бази даних клієнтів і працівників;
- Можливість створювати замовлення для клієнта;
- Зберігання історії замовлень для клієнта і працівника;
- Наявність системи накопичування бонусів;

Проаналізувавши вибрані аналоги, можна зробити висновки, що жоден з них не
задовольняє поставлені вимоги.

18

2 ПОСТАНОВКА ЗАДАЧІ ТА МЕТИ ДОСЛІДЖЕННЯ

2.1 Мета та задачі
Метою даної дипломної роботи є створення web-орієнтованої інформаційної
системи центру здоров’я та краси. Дана програма дає можливість адміністраторам цих
салонів краси полегшити роботу з створенням замовлень для клієнтів а також,
забезпечує зберігання потрібних даних про працівників, процедури які надає салон,
клієнтів і їх замовлення в електронному варіанті. За допомогою даної інформаційної
системи, адміністратор не лише може слідкувати за замовленнями клієнтів, а й
аналізувати і підраховувати заробітну плату кожного працівника. Також, користувач
ІС має змогу редагувати і видаляти інформацію про клієнтів, працівників і процедури,
які надає салон.
Для розробки даної інформаційної системи, потрібно виконати ряд необхідних
задач:
1) Проаналізувати уже створені аналоги даної ІС
2) Продумати функціональність ІС
3) Розробити модель роботи ІС
4) Розробити дизайн ІС
5) Вибрати засоби реалізації ІС
6) Продумати і створити базу даних
7) Розробити ІС за допомогою вибраних засобів

Арк.
ЧДТУ.221809.001 ПЗ 12
Зм. Лист № докум. Підпис Дата
ь
19

2.2 Вибір засобів реалізації та їх переваги
Як було сказано раніше, даний додаток є web-орієнтованим, тому він розроблявся
для веб браузерів. Якщо брати саме веб додаток, то його перевага перед додатками які
потрібно встановлювати на персональний комп’ютер такі:
- Веб додаток може застосовуватися на будь якій ОС(Linux, Mac, Windows)
- Веб додаток простіше програмувати, оскільки він не включає багато роботи з
елементами ПК (ядро, процесор, відеокарта)
- Веб додаток доволі легко орієнтувати як під комп’ютер, так і під мобільні
пристрої
Для будь якого веб додатку потрібно розробляти Front-end(Візуальну частину)
та, за потреби, Back-end(Серверну частину).
Для створення Front-end частини, було вирішено використовувати: HTML, CSS,
JavaScript, React та Redux.
HTML (Hypertext Markup Language – Мова гіпертекстової розмітки) – це мова
опису структури сторінок документів, яка дозволяє звичайний текст форматувати в
абзаци, заголовки, списки та інші структури, створювати посилання на інші сторінки.
Це текстова мова, в якій інструкції з форматування, що називаються тегами, вбудовані
в розділи документа, які містять конкретну інформацію. Теги повідомляють
браузерам, як формувати і представляти інформацію на екрані.[6]
CSS (абревіатура від Cascading Style Sheet, що в перекладі означає – Каскадні
Таблиці Стилів) – це спеціальна мова (мова стилів), за допомогою якої описують
вигляд документів (як і де відображати елементи веб-сторінки), написаних мовами
розмітки даних. Найчастіше, CSS використовується для документів, котрі розмічені
мовою HTML.[7]
Арк.
ЧДТУ.221809.001 ПЗ 13
Зм. Лист № докум. Підпис Дата
ь
20

JavaScript (JS) – це мова програмування, що дозволяє зробити web-сторінку
інтерактивною, тобто такою, що реагує на дії користувача. JavaScript є об’єктно-
орієнтованою скриптовою мовою програмування і є діалектом мови ECMAScript.[8]
React – це декларативна, ефективна і гнучка JavaScript-бібліотека, призначена для
створення інтерфейсів користувача. Вона дозволяє компонувати складні інтерфейси з
невеликих окремих частин коду – “компонентів”.[9]
Redux – це бібліотека JavaScript з відкрити кодом для управління станом програми.
Redux, зазвичай, використовується з бібліотеками, такими як Angular або React, для
створення інтерфейсів користувача. Керувати станом кожного компонента в додатку
стає важко, коли розмір програми стає надзвичайно великим. Redux допомагає в
оновленні та підтримці стану кожного компонента в додатку.[10]
Переваги використання React для розробки візуальної частини:
1) React є SPA бібліотекою. Single Page Application (SPA) – односторінковий
інтерактивний додаток. В односторінковому веб додатку користувач,
перемикаючись між вкладками, залишається на одній сторінці. Причому,
завантажуються та оновлюються лише необхідні частини контенту, що грає
на користь швидкості SPA.
2) Повторне застосування компонентів. При роботі з React, створюються
багаторазові компоненти: найчастіше, компонент інтерфейсу користувача
можна використовувати в інших частинах коду або навіть у різних додатках.
Більше того, в React доступні бібліотеки готових компонентів з відкрити
вихідним кодом. Завдяки цим бібліотекам, час який виділяється на розробку
додатків значно скорочується.
3) Дуже велика кількість фреймворків (бібліотек), які можна використовувати
з React, в тому числі і Redux.
4) Дуже велика спільнота користувачів.
Арк.
ЧДТУ.221809.001 ПЗ 14
Зм. Лист № докум. Підпис Дата
ь
21

Переваги використання Redux для розробки візуальної частини:
1) Використання глобального store(сховище) – за допомогою store будь-який
компонент може отримати доступ до будь-якого стану додатку.
2) Коли стан змінюється, він повертає новий стан і запобігає непотрібним
повторним візуалізації.
3) Redux розділяє інтерфейс користувача і управління даними.
4) В браузері існує розширення, яке сильно спрощує розуміння і роботу з
Redux.
Для створення Back-end частини, було вирішено використовувати Node.js та
Express.
Node.js — це середовище виконання JavaScript з відкритим вихідним кодом, яке
виконує код поза браузером. Завдяки Node.js розробники JavaScript використовують
серверні сценарії для створення динамічних веб сторінок.[11]
Express — це мінімалістичний та гнучкий веб-фреймворк для програм Node.js, що
надає широкий набір функцій для мобільних та веб-додатків.[12]
Переваги Node.js та Express.js для розробки серверної частини:
1) Можливість застосовувати JavaScript на клієнті та на сервері.
2) Швидкість.
Оскільки Node.js побудований на движку JavaScript Google Chrome V8, то його
бібліотеки виконують код дуже швидко.
3) Асинхронність.
Node.js має асинхронні бібліотеки. Це дуже корисно, оскільки серверам Node.js
не потрібно чекати, поки сервер надішле відповідь, і перейде до наступного
запиту.

Аркк.
.
4) Простота. ЧДТУ..221809..001 ПЗ 156
Зм.. Лиисст № ддооккуум.. Пііддппиисс Даа а
та
ьь
22

5) Докладна документація.
Для зберігання даних було вирішено використовувати PostgreSQL.
PostgreSQL – це система управління базами даних. Вона дозволяє додавати,
вибирати та обробляти дані. SQL, частина PostgreSQL, сумісна з “Structured Query
Language” - є найрозповсюдженішим стандартом мови, уживаної для доступу до бази
даних.[13]
Переваги використання PostgreSQL:
1) Легка та зрозуміла у використанні;
2) Надає базу даних необмеженого розміру;
3) Підтримка SQL;
4) Велика підтримка спільноти;
5) Надійність PostgreSQL перевірено то доведено;

23

3 МОДЕЛЮВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ

3.1 Побудова контекстних та декомпозиційних діаграм в нотації IDEF0
Для графічного відображення даних, функцій та структур даної інформаційної
системи було вирішено побудувати контекстні та декомпозиційні діаграми в нотації
IDEF0.
IDEF0 – це методологія графічного опису систем і процесів діяльності організації
як безліч взаємозалежних функцій. Вона дозволяє досліджувати функції організації,
не пов’язуючи їх з об’єктами, що забезпечують їх реалізацію.[14]
1) Контекстна та декомпозиційна діаграми “Створення працівника” (рис 3.1 та рис
3.2).

Рисунок 3.1 – Контекстна діаграма “Створення працівника”
Арк.
ЧДТУ.221809.001 ПЗ 17
Зм. Лист № докум. Підпис Дата
ь
24

Рисунок 3.2 – Декомпозиційна діаграма “Створення працівника”
2) Контекстна та декомпозиційна діаграми “Створення процедури” (рис 3.3 та рис
3.4).

Рисунок 3.3 – Контекстна діаграма “Створення процедури”
Арк.
ЧДТУ.221809.001 ПЗ
18
Зм. Лист № докум. Підпис Дата
ь
25

Рисунок 3.4 – Декомпозиційна діаграма “Створення процедури”
3) Контекстна та декомпозиційна діаграми “Створення клієнта” (рис 3.5 та рис
3.6).

Рисунок 3.5 – Контекстна діаграма “Створення клієнта”
Арк.
ЧДТУ.221809.001 ПЗ 19
Зм. Лист № докум. Підпис Дата
ь
26

Рисунок 3.6 – Декомпозиційна діаграма “Створення клієнта”
4) Контекстна та декомпозиційна діаграми “Створення замовлення” (рис 3.7 та рис
3.8).

Рисунок 3.7 – Контекстна діаграма “Створення замовлення”
Арк.
ЧДТУ.221809.001 ПЗ 20
Зм. Лист № докум. Підпис Дата
ь
27

Рисунок 3.8 – Декомпозиційна діаграма “Створення замовлення”

3.2 Побудова діаграми варіантів використання
Діаграма варіантів використання – це граф спеціального вигляду, який є графічною
нотацією для представлення конкретних варіантів використання, акторів, можливо
деяких інтерфейсів, і відносин між цими елементами. При цьому окремі компоненти
діаграми можуть бути поміщені в прямокутник, який позначає проектовану систему в
цілому. Слід зазначити, що відносинами даного графа можуть бути тільки деякі
фіксовані типи взаємозв'язків між акторами і варіантами використання, які в
сукупності описують сервіси або функціональні вимоги до модельованої системи.[15]
В даній інформаційній системі можуть брати участь три актори:
 Адміністратор;
 Працівник;
 Клієнт;
Арк.
.
Діаграма варіантів використання відоЧбрДаТжУен.а2 2н1а 8р0и9су.0н0ку1 3П.9З. 21
Зм.. Лист № докум.. Піідпис Дата 2

ь
28

Рисунок 3.9 – Діаграма варіантів використання

3.3 Моделювання бази даних
Майже кожна інформаційна система повинна мати свою базу даних, і наша
інформаційна система не є виключенням. Як було сказано раніше, було вирішено
використовувати саме PostgreSQL базу даних для зберігання усієї інформації.
База даних даної інформаційної системи містить в собі 4 таблиці:

1. Customers - зберігає інформацію про клієнтів салону.
Таблиця складається з таких полівЧ (рДиТс Арк.
У3.10):
.221809.001 ПЗ 23
Зм. Лист № докум. Підпис Дата
ь
29

 Id - унікальний ідентифікатор клієнта;
 Name – прізвище, ім’я та по батькові клієнта;
 Phone – номер телефона клієнта;
 Mail – електрона пошта клієнта;
 Bonus – накопичений бонус клієнта;
 Created_at – дата реєстрації клієнта в системі;

Рисунок 3.10 – Таблиця Customers
2. Workers – зберігає інформацію про працівників салону.
Таблиця складається з таких полів (рис 3.11):
 Id – унікальний ідентифікатор працівника;
 Name – прізвище, ім’я та по батькові працівника;
 Phone – номер телефона працівника;
 Mail – електрона пошта працівника;
 Position – посада працівника;

 Created_at – дата реєстрації працівника в системі;
Арк.
 Orders_count – загальна кількЧісДтТь Уви.к2о2н1а8н0и9х. з0а0м1о вПлЗен ь;
24
Зм. Лист № докум. Підпис Дата
ь
30

Рисунок 3.11 Таблиця Workers
3. Procedures – зберігає інформацію про процедури, які надає салон.
Таблиця складається з таких полів (рис 3.12):
 Id – унікальний ідентифікатор процедури;
 Name – назва процедури;
 Price – ціна процедури;
 Bonus – бонус від процедури;
 Worker_payment – сума, яку отримує працівник від процедури;
 Created_at – дата реєстрації процедури в системі;

Рисунок 3.12 Таблиця Procedure
Арк.
ЧДТУ.221809.001 ПЗ 25
Зм. Лист № докум. Підпис Дата
ь
31

4. Orders – зберігає інформацію про замовлення, які надав салон.
Таблиця складається з таких полів (рис 3.13):
 Id – унікальний ідентифікатор замовлення;
 Procedure_type – вибрана клієнтом процедура;
 Price – ціна замовлення;
 Bonus – бонус, який отримав клієнт від замовлення;
 Used_bonus – бонус, який використав клієнт при оплаті замовлення;
 Worker_id – унікальний ідентифікатор працівника;
 Worker – прізвище, ім’я та по батькові працівника, який виконував
замовлення;
 Paid(boolean – логічне значення) – ідентифікатор оплати замовлення
працівнику (true – так, замовлення сплачено працівник, або false – ні,
замовлення не сплачено працівникові)
 Customer_id – унікальний ідентифікатор клієнта;
 Customer - прізвище, ім’я та по батькові клієнта;
 Worker_payment – сума, яку отримав працівник за замовлення;
 Created_at – дата створення замовлення;
32

Рисунок 3.13 Таблиця Orders

Арк.
ЧДТУ.221809.001 ПЗ
26
Зм. Лист № докум. Підпис Дата
ь
33

4 ПРАКТИЧНА РЕАЛІЗАЦІЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ
4.1 Архітектура web додатку
Даний web додаток складається з трьох сторінок:
 Інформація про клієнта (головна сторінка);
 Список процедур;
 Список працівників;
Також, для кожного працівника існує своя особиста сторінка. Кожна сторінка
містить кнопку “Меню” для навігації по додатку.
На сторінці “Інформація про клієнта” знаходиться форма для пошуку клієнта та
кнопка для додавання нового клієнта в систему (рис 4.1).

Рисунок 4.1 – Сторінка “Інформація про клієнта”
На сторінці “Список процедур” знаходиться список з усіма процедурами, які
надає салон та кнопка, за допомогою якої можна додати нову процедуру в систему
(рис 4.2).
Арк.
ЧДТУ.221809.001 ПЗ 27
Зм. Лист № докум. Підпис Дата
ь
34

Рисунок 4.2 – Сторінка “Список процедур”
На сторінці “Список працівників” знаходиться список з усіма працівниками, які
працюють в салоні, та кнопка для додавання нового працівника в систему (рис 4.3).

Рисунок 4.3 – Сторінка “Список працівників”
На сторінці “Сторінка працівника” знаходиться інформація про вибраного
працівника, та замовлення які виконував працівника але, ще не отримав за них оплату
Арк.
ЧДТУ.221809.001 ПЗ 28
Зм. Лист № докум. Підпис Дата
ь
35

(рис 4.4). Також, для редагування інформації про працівника та оплати виконаних
замовлень, на даній сторінці було розміщено три відповідних кнопки:
 Оплатити усі замовлення;
 Редагувати працівник;
 Видалити працівника;
Також, існує можливість оплатити будь яке виконане замовлення окремо.

Рисунок 4.4 – Сторінка “Сторінка працівника”

Арк.
ЧДТУ.221809.001 ПЗ 29
Зм. Лист № докум. Підпис Дата
ь
36

4.2 Розробка серверної частини додатку
Як було сказано раніше, для розробки серверної частини додатку було
використано Node.js, Express та базу даних PostgreSQL. Також, даний додаток
побудований на концептах REST[20] та CRUD[20].
REST – це концепція для взаємодії компонентів, заснований на протоколі HTTP.
В REST концепції використовуються HTTP – методи запитів. Основні HTTP-методи:
 GET – отримання даних;
 POST – створення даних;
 PUT – оновлення даних;
 DELETE – видалення даних;
CRUD – це абревіатура від Create, Read, Update, Delete – Створити, Прочитати,
Оновити, Видалити. CRUD потрібен для того, щоб розділити програмний код на
окремі частини, кожна з яких відповідає за свої дії.Для даного додатку було
розроблено такі HTTP запити:
1) Опис: зберігає інформацію про клієнта
Посилання: /customers
Параметри: немає
Метод: POST
Вхідні дані: інформація про клієнта
Вихідні дані: інформація про клієнта
2) Опис: отримання інформації про клієнта
Посилання: /customer/:phone
Параметри: phone – номер телефону користувача
Метод: GET
Вхідні дані: немає
Вихідні дані: інформація про користувача
Арк.
ЧДТУ.221809.001 ПЗ 30
Зм. Лист № докум. Підпис Дата
ь
37

3) Опис: редагування інформації про клієнта
Посилання: /customers/:id
Параметри: id – унікальний ідентифікатор клієнта
Метод: PUT
Вхідні дані: нова інформація про клієнта
Вихідні дана: оновлена інформація про клієнта
4) Опис: видалення інформації про клієнта
Посилання: /customers/:id
Параметри: id – унікальний ідентифікатор клієнта
Метод: DELETE
Вхідні дані: немає
Вихідні дані: немає
5) Опис: отримання списку замовлень клієнта
Посилання: /orders/customer/:customer_id
Параметри: customer_id – унікальний ідентифікатор клієнта
Метод: GET
Вхідні дані: немає
Вихідні дані: список замовлень
6) Опис: отримання списку замовлень які виконав працівник
Посилання: /orders/worker/:worker_id
Параметри: worker_id – унікальний ідентифікатор працівника
Метод: GET
Вхідні дані: немає
Вихідні дані: список замовлень
7) Опис: створення замовлення
Посилання: /orders
Параметри: немає

Арк.
Метод: POST ЧДТУ.221809.001 ПЗ 312
Зм. Лист № докум. Підпис Дата
ь
38

Вхідні дані: інформація про замовлення
Вихідні дані: немає
8) Опис: видалення замовлення
Посилання: /orders/:id
Параметри: id – унікальний ідентифікатор замовлення
Метод: DELETE
Вхідні дані: немає
Вихідні дані: немає
9) Опис: створення процедури
Посилання: /procedures
Параметри: немає
Метод: POST
Вхідні дані: інформація про процедуру
Вихідні дані: немає
10) Опис: отримання списку процедур
Посилання: /procedures
Параметри: немає
Метод: GET
Вхідні дані: немає
Вихідні дані: список процедур салону
11) Опис: оновлення інформації про процедуру
Посилання: /procedures/:id
Параметри: id – унікальний ідентифікатор процедури
Метод: PUT
Вхідні дані: нова інформація про процедуру
Вихідні дані: оновлена інформація про процедуру
12) Опис: видалення процедури
Посилання: /procedures/:id
Арк.
Параметри: id – унікальний ідентифЧіДкаТтоУр. 2п2р1оц8е0д9у.р0и0 1 ПЗ 33
Зм. Лист № докум. Підпис Дата
ь
39

Метод: DELETE
Вхідні дані: немає
Вихідні дані: немає
13) Опис: створення працівника
Посилання: /workers
Параметри: немає
Метод: POST
Вхідні дані: інформація про працівника
Вихідні дані: інформація про працівника + додаткові параметри
14) Опис: отримання списку працівників
Посилання: /workers
Параметри: немає
Метод: GET
Вхідні дані: немає
Вихідні дані: список працівників салону
15) Опис: редагування інформації про працівника
Посилання: /workers/:id
Параметри: id – унікальний ідентифікатор працівника
Метод: PUT
Вхідні дані: нова інформація про працівника
Вихідні дані: інформація про працівника
16) Опис: зміна кількості загальних замовлень працівника
Посилання: /workers/:id/update/orders_count
Параметри: id – унікальний ідентифікатор працівника

Метод: PUT
Вхідні дані: немає
Вихідні дані: немає
Арк.
ЧДТУ.221809.001 ПЗ 34
Зм. Лист № докум. Підпис Дата
ь
40

17) Опис: оплата всіх замовлень працівника
Посилання: /workers/:id/pay_all
Параметри: id – унікальний ідентифікатор працівника
Метод: PUT
Вхідні дані: немає
Вихідні дані: немає
18) Опис: оплата вибіркового замовлення працівника
Посилання: /workers/:id/pay_single
Параметри: id – унікальний ідентифікатор працівника
Метод: PUT
Вхідні дані: немає
Вихідні дані: немає
19) Опис: видалення працівника
Посилання: /workers/:id
Параметри: id – унікальний ідентифікатор працівника
Метод: DELETE
Вхідні дані: немає
Вихідні дані: немає

4.3 Розробка візуальної частини додатку
Перед початком розробки візуальної частини додатку, було проведено декілька
налаштувань проекту, а саме:

 вибрано і встановлено основний шрифт додатку – Montserrat;
 створено і підключено Redux та його глобальне сховище;
Арк.
 завантажено зображення, які викорЧисДтТовУу.ю2т2ь1с8я 0в9 д.0од0а1т кПуЗ; 35
Зм. Лист № докум. Підпис Дата
ь
41

Як було сказано раніше, даний додаток складається з 4 сторінок. Розробка почалася
зі створення головної сторінки додатку – “Інформація про клієнта”. Для цієї сторінки
було розроблено:
1) Верхівку сторінки, яка включає в себе назву сторінки та кнопку, яка відкриває
модальне вікно з формою для створення клієнта.
2) Модальне вікно та форму для створення клієнта.
3) Функціонал який перевіряє правильність введених даних, та функціонал який
зберігає інформацію про клієнта в базу даних (при успішному створенні клієнта,
Redux сховище отримає з бази даних інформацію про клієнта з новими
параметрами).
4) Форму для пошуку клієнта.
5) Функціонал, який відправляє запит на сервер та отримує і зберігає інформацію
про клієнта в Redux сховищі.
6) Відповідь при неправильному введені даних клієнта.
7) Секції, які відображають інформацію про клієнта та його замовлення (рис Б.4).
8) Кнопку і модальне вікно для редагування клієнта.
9) Функціонал редагування клієнта.
10) Кнопку і модальне вікно для видалення клієнта.
11) Функціонал видалення клієнта.
12) Кнопку і модальне вікно для створення замовлення (без функціоналу).
Після завершення роботи над головною сторінкою, було перейдено до розробки
сторінки – “Список працівників”. Під час створення даної сторінки було розроблено:

1) Верхівку сторінки, яка включає в себе назву сторінки та кнопку, яка відкриває
модальне вікно з формою для створення працівника.
2) Модальне вікно та форму для створення працівника.
Арк.
ЧДТУ.221809.001 ПЗ 36
Зм. Лист № докум. Підпис Дата
ь
42

3) Функціонал який перевіряє правильність введених даних, та функціонал який
зберігає інформацію про працівника в базу даних.
4) Список, який відображає всіх працівників салону.
Далі, було вирішено перейти до створення сторінки – “Сторінка працівника”. Для
цієї сторінки було розроблено:
1) Верхівку сторінки з назвою даної сторінки.
2) Секції, які відображають інформацію про працівника та замовлення, які він
виконав, але вони ще не оплачені.
3) Кнопку, модальне вікно та форму для редагування працівника.
4) Функціонал для редагування працівника.
5) Кнопку і модальне вікно для видалення працівника із системи.
6) Функціонал видалення працівника.
7) Кнопку для оплати всіх замовлення і її функціонал.
8) Відображення кожного замовлення.
9) Кнопку для оплати вибраного замовлення та її функціонал.
Останньою сторінкою даного додатку є – “Список процедур”. Під час створення
даної сторінки, було розроблено:
1) Верхівку сторінки, яка включає в себе назву сторінки та кнопку, яка відкриває
модальне вікно з формою для створення процедури.
2) Модальне вікно та форму для створення процедури.
3) Функціонал який перевіряє правильність введених даних, та функціонал який
зберігає інформацію про процедуру в базу даних.
4) Відображення всіх процедур салону.

5) Кнопку, модальне вікно та форму для редагування процедури.
6) Функціонал для редагування процедури.
7) Кнопку і модальне вікно для видалення процедури із системи. Арк.
ЧДТУ.221809.001 ПЗ 37
Зм. Лист № докум. Підпис Дата
ь
43

8) Функціонал видалення процедури.
Завершення роботи над всіма сторінками додатку дало змогу доопрацювати
функціонал створення замовлення для клієнта.

4.3 Алгоритм роботи з додатком
Пошук клієнта
Як було сказано раніше, для пошуку клієнта в системі потрібно скористатися
формою, яка знаходиться на сторінці “Інформація про клієнта”. Щоб знайти клієнта
потрібно ввести номер телефона, який він назвав при реєстрації. Даний номер
телефона повинен складатися з 10 цифр. Пошук клієнта представлений на рисунку
Б.1.
Якщо клієнт зареєстрований в системі, то пошук буде успішним і користувачеві
відобразиться інформація про даного клієнта. Але, якщо по введеному номеру
телефона ще немає зареєстрованого клієнта, або номер телефона введений
неправильно, то користувач побачить попередження з підказками, в чому саме може
бути проблема. Результат пошуку відображено на рисунку Б.2.
Створення клієнта
В нашому випадку клієнта ще немає в системі. Для того, щоб додати клієнта в
систему, потрібно натиснути на кнопку “Додати клієнта” та ввести необхідну
інформацію, а саме:
 Прізвище, ім’я та по-батькові клієнта;

 Номер телефона клієнта;
 Електрону пошту клієнта;
Арк.
 Стартовий бонус; ЧДТУ.221809.001 ПЗ
38
Зм. Лист № докум. Підпис Дата
ь
44

Форма для створення клієнта зображена на рисунку Б.3.
Якщо хоч один з полів даної форми не буде заповнений або буде заповнений
неправильно, то система відобразить помилку і не дасть створити клієнта, до поки усі
поля не будуть заповнені або помилки не будуть виправлені. Попередження системи
про помилки при створені клієнта зображені на рисунку Б.4.
Якщо уся інформація про клієнта та стартовий бонус введено правильно, то
реєстрація клієнта пройде успішно і користувач побачить особисту сторінку даного
клієнта. Це зображено на рисунках Б.5 та Б.6.

Секції за інформацією про клієнта та його замовлення
Особиста сторінка користувача поділяється на дві секції: інформація про клієнта
та список замовлень клієнта. Також, на даній сторінці розміщено три кнопки:
“Створити замовлення”, “Редагувати клієнта” та “Видалити клієнта”.
Інформація про клієнта складається з таких полів:
 Номер клієнта в системі;
 Прізвище, ім’я та по-батькові;
 Електрона пошта;
 Номер телефона;
 Кількість бонусів;
 Загальна кількість замовлень;
 Дата реєстрації;
У секції “Замовлення” відображаються усі замовлення, які були надані клієнту
в салоні. Список замовлень відображено на рисунку Б.7.
В нашому випадку, клієнт тільки зареєстрований в системі, тому список
замовлень порожній.
Арк.
ЧДТУ.221809.001 ПЗ 39
Зм. Лист № докум. Підпис Дата
ь
45

Список та структура процедур
Для того, щоб створити замовлення, потрібно додати в систему процедуру, яку
надає даний салон. В нашому випадку, в системі уже є декілька зареєстрованих
процедур. Список процедур відображено на рисунку Б.8.
Кожна процедура складається з:
 Номера процедури в системі;
 Назви;
 Дати створення;
 Ціни;
 Частини працівника;
 Бонусу від процедури;
Структура процедури зображена на рисунку Б.9.

Створення, редагування та видалення процедури
Створимо нову процедуру. Для створення процедури потрібно ввести:
 Назву процедуру;
 Ціну;
 Частину, яку отримає працівник від процедури;
 Бонус, який отримає клієнт від процедури;

Форма для створення процедури відображена на рисунку Б.10.
Якщо поля форми пусті або, при введені даних, було зроблено помилку, то
система попередить про це. Попередження зображено на рисунку Б.11.
При правильному заповненню всіх полів, процедура буде успішно створена.
Заповнення форми та результат відображеноЧ нДа ТрУисунках Б.12 та ПБ.З13 відповідно. Арк.
.221809.001 40
Зм. Лист № докум. Підпис Дата
ь
46

Користувач має змогу редагувати або видаляти будь яку процедуру. При
редагуванні, він може змінити інформація про процедуру, яку він вводи на раніше. На
рисунку Б.14 зображено форму редагування процедуру, в якій бонус змінено з 10 грн
до 15 грн, а на рисунку Б.15 результат редагування процедури.
Якщо процедура більше не надається салоном, то адміністратор може видалити
її з системи. Для цього потрібно натиснути на кнопку “Видалити процедуру” і
підтвердити видалення. Видалення процедури зображено на рисунку Б.16.

Список працівників
Також, для того щоб створити замовлення потрібно, щоб в системі був
зареєстрований працівник, який буде виконувати дане замовлення. В нашому
випадку, в систему уже є декілька зареєстрованих працівників. Список працівників
відображено на рисунку Б.17.

Особиста сторінка працівника
Кожен працівник має свою особисту сторінку, яка складається з двох секцій:
інформація про працівника та замовлення які виконав даний працівник, але їх ще не
було сплачено йому. Також, на особистій сторінці користувача знаходяться три
кнопки: “Оплатити замовлення”, “Редагувати працівника” та “Видалити працівника”.

Інформація про працівника складається з таких полів:
 Номер працівника в системі;
 Прізвище, ім’я та по-батькові;
 Номер телефона;
 Електрона пошта;
 Посада Арк.
; ЧДТУ.221809.001 ПЗ 41
Зм. Лист № докум. Підпис Дата
ь
47

 Дата реєстрації;
 Загальна кількість замовлень;
 Активні замовлення;
 Потрібно оплатити;
Секція з інформацією про працівника зображена на рисунку Б.18.
В секції “Замовлення”, адміністратор може проглянути усі неоплачені
замовлення, які виконав працівник. Кожне замовлення в даній секції складається з:
 Номера замовлення в системі;
 ПІБ’а клієнта;
 Назви процедури;
 Дати створення;
 Ціни;
 Частини працівника;
Адміністратор має змогу оплатити як усі замовлення зразу, так і кожне
замовлення окремо. Оплата всіх замовлень разом та оплата замовлення окремо
відображено на рисунках Б.19 та Б.20 відповідно.

Створення, редагування та видалення працівника
Зареєструємо нового працівника в систему. Для цього потрібно ввести такі дані:
 Прізвище, ім’я та по-батькові;
 Посаду працівника;
 Номер телефону;
 Електрону пошту; Арк.
ЧДТУ.221809.001 ПЗ 42
Зм. Лист № докум. Підпис Дата
ь
48

Форма для створення працівника відображено на рисунку Б.21.
Якщо поля форми будуть пусті або дані про працівника будуть введені
неправильно, система попередить адміністратора про це. Попередження відображено
на рисунку Б.22.
Правильно заповнивши усі поля даної форми, адміністратор зможе успішно
зареєструвати працівника в системі. Заповнення форми відображено на рисунку Б.23.
Після успішної реєстрації, працівника буде додано в систему і адміністратор
зможе перейти на його особисту сторінку. Особиста сторінка створеного працівника
зображена на рисунку Б.24.
Адміністратор, також, має змогу редагувати та видаляти працівника, якщо це
потрібно. Зробимо редагування даного працівника, змінивши його посаду з “Перукар”
на “Косметолог”. Форма редагування та результат редагування відображено на
рисунку Б.25 та Б.26 відповідно.
Якщо працівник звільнився або його було звільнено, то адміністратор має змогу
видалити цього працівника з системи. Видалення працівника зображено на рисунку
Б.27.

Створення замовлення
Тепер, створимо для нашого клієнта його перше замовлення. Для цього,
потрібно перейти на сторінку “Інформація про клієнта” і натиснути кнопку “Створити
замовлення”. При створенні замовлення, потрібно вибрати процедуру, яку обрав
клієнт та працівника, який буде виконувати замовлення. При виборі процедури
відображається її ціна та бонус, який отримає клієнт при її замовленні. При
оформленні замовлення, клієнт може використати свої поточні бонуси для оплати
Арк.
ЧДТУ.221809.001 ПЗ 43
Зм. Лист № докум. Підпис Дата
ь
49

замовлення. Замовлення можна оплатити бонусами частково або повністю. У випадку,
який зображено на рисунку Б.28, клієнт використовує лише 10 грн з свого поточного
балансу при оплаті замовлення тому, йому потрібно заплатити за замовлення не 250
грн а 240 грн.
Після оформлення замовлення, інформація про дане замовлення збережеться в
списку замовлень клієнта. Також, оновиться загальна кількість замовлень клієнта та
його кількість його бонусів. Список замовлень і оновлена інформація про клієнта
зображено на рисунках Б.29 та Б.30 відповідно.
Також, дане замовлення буде відображатися в списку замовлень працівника,
який його виконував, а інформація про його замовлення оновиться. Список виконаних
замовлень працівника та оновлена інформація про нього відображено на рисунках
Б.31 та Б.32 відповідно.

Редагування та видалення клієнта
Також, адміністратор має змогу редагувати та видаляти клієнта з системи, якщо
це потрібно. Він може редагувати не лише особисту інформацію клієнта, а й кількість
його поточних бонусів. За допомогою такого функціоналу, салон має змогу проводити
різні акції, в яких клієнт зможе додатково отримати бонуси на свій рахунок.
На рисунку Б.33 відображено нарахування 20 додаткових бонусів в рамках акції
яку проводить салон, а на рисунку Б.34 результат даного редагування.
Як було сказано раніше, адміністратор має змогу видалити клієнта з системи.
Для цього потрібно натиснути на кнопку “Видалити клієнта” та підтвердити
видалення. Видалення клієнта зображено на рисунку Б.35.

Арк.
ЧДТУ.221809.001 ПЗ 44
Зм. Лист № докум. Підпис Дата
ь
50

51

ВИСНОКИ

На даний момент, надання послуг салонів краси є дуже популярними. Все
більше і більше людей прагнуть бути не лише здоровими, але й виглядати красиво
тому, майже кожного дня відкриваються все нові і нові салони краси. Кожен з таких
салонів прагне щоб саме його послугами користувалися клієнти, тому інформаційні
системи, які допомагають не лише в управлінні салоном, а й надають можливість
клієнту отримати бонус від оформлення замовлення в даному салоні є дуже
актуальними.
При виконанні даної дипломної роботи було проведено аналіз предметної
області, а саме: ідентифіковано ідею проекту та проаналізовано п’ять аналогічних
існуючих web-орієнтованих інформаційних систем.
Було проведено постановку задачі та мети дослідження, а також вибрано
засоби реалізації даної інформаційної системи та розкрито переваги їхнього
використання.
Після цього, було проведено моделювання інформаційної системи, а саме:
побудовано контекстні та декомпозиційні діаграми в нотації IDEF0, побудовано
діаграми варіантів використання інформаційної системи і розроблено базу даних.
Наприкінці, було показано практичну реалізацію web-додатку, а саме:
відображено архітектуру даного додатку та алгоритм роботи з додатком.
У результаті виконання усіх вищезазначених пунктів, було розроблено
інформаційну систему, яка надає можливість адміністраторам салонів краси
проводити управління клієнтами та працівниками даного салону, а також проводити
акції які надають клієнтам бонуси, які можна використовувати при оплаті замовлення.

Арк.
ЧДТУ.221809.001 ПЗ
45
Зм. Лист № докум. Підпис Дата
ь
52

ДОДАТОК А

ПЛАНУВАННЯ РОБІТ
1 Постановка цілей по SMART
Технологія SMART – це спосіб постановки цілі, яка відповідає п’яти
критеріям[16]:
1. Specific – конкретна. Мета має єдиний чіткий результат.
2. Measurable – вимірювана. Результат можна виміряти в цифрах.
3. Achievable – досяжна. Повинні бути ресурси для досягнення мети.
4. Relevant – значуща. Результат мети повинен вирішувати конкретну
проблему.
5. Time bound – обмежена за часом. Повинен стояти конкретний часовий
проміжок, за який ціль повинна бути досягнута.
У випадку даної роботи, постановка цілей за технологією SMART така:
1. Specific – розробити web-орієнтовану інформаційну систему центру
здоров’я та краси.
2. Measurable – результатом є здатність системи додавати та редагувати
інформацію про працівників, процедури і клієнтів, та створювати
замовлення для клієнтів. Вся інформація повинна зберігатися в базі даних
3. Achievable – реалізація додатку буде здійснена за допомогою таких
інструментів: HTML, CSS, JavaScript, React, Redux, Node.js, Express та
PostgreSQL.
4. Relevant – додаток є актуальним для адміністраторів салонів краси.
5. Time bound – додаток повинен бути розроблений до кінця травня цього
року.

Арк.
ЧДТУ.221809.001 ПЗ
46
Зм. Лист № докум. Підпис Дата
ь
53

2 Планування WBS структури проекту
Ієрархічна структура робіт (Work Breakdown Structure) - інструмент, що дозволяє
розбити проєкт на складові частини. Вона встановлює ієрархічно структурований
розподіл робіт з реалізації проекту для всіх задіяних в ньому працівників. У ході
побудови WBS здійснюється послідовна декомпозиція проекту на підпроекти, пакети
робіт різного рівня, пакети детальних робіт. Декомпозиція – це поділ результатів
проекту на менші, більш керовані компоненти до рівня пакетів робіт. Пакети робіт
зазвичай відповідають самому нижньому рівню деталізації і складаються з окремих
робіт. Декомпозиція повинна бути коректною, тобто елементи будь-якого рівня WBS
повинні бути необхідні і достатні для створення відповідного елемента верхнього
рівня [17]. WBS структура даного проекту зображена на рисунку А.1.

Рисунок А.1 – WBS структура проекту

Арк.
ЧДТУ.221809.001 ПЗ 47
Зм. Лист № докум. Підпис Дата
ь
54

3 Планування OBS структури проекту
OBS (Organization Breakdown Structure – Організаційна структура проекту) - це
сукупність взаємопов’язаних органів управління, що розташовані на різних ступенях
системи.
Ця структура стосується тільки внутрішньої організаційної структури проекту і не
зачіпає відносин проектних груп чи учасників з батьківськими організаціями.
Будується ОBS аналогічно робочій структурі, а саме:
 на першому рівні відображається організаційна структура як єдиний
елемент;
 на другому і нижчих рівнях триває поділ структури на основні організаційні
елементи.
Цей процес повторюється до найнижчого рівня — базових робочих груп
(змішаних цільових або функціональних), а при реалізації малих проектів — до
окремих виконавців.
Обсяг робіт для цих найнижчих організаційних рівнів являє собою найнижчі
елементи WBS, кожний з яких можна планувати і контролювати як окремі одиниці.
Таке саме правило чинне для створення OBS. Кількість рівнів залежить від розміру
проекту.[18]
При розробці даної інформаційної системи брали участь:
 Прокопенко Т.О. – керівник;
 Шинкаренко Д.О. – виконавець;
Представлення OBS-діаграми даного проекту зображено на рисунку А.2

Арк.
ЧДТУ.221809.001 ПЗ 48
Зм. Лист № докум. Підпис Дата
ь
55

Рисунок А.2 – OBS структура проекту

4 Планування календарного графіку проекту
Календарний графік проекту створюється для того, щоб графічно відобразити
повний перелік робіт проекту, їх взаємозв’язок, терміни та послідовність виконання,
тривалість, а також учасників, які необхідні для виконання проекту. В даному проекті,
для побудови календарного графіку було вирішено використовувати діаграму Ганта.
Діаграма Ганта – це інструмент управління проектами, що ілюструє план проекту.
Зазвичай вона складається із двох частин: у лівій частині наведено список завдань, а
у правій — тимчасова шкала зі смугами, що зображають роботу. Діаграма Ганта також
може включати дати початку та завершення завдань, контрольні точки, залежності
між завданнями та виконавцями.[19]
Розроблені, для даного проекту, діаграми Ганта зображені на рисунках А.3 – А.4
Арк.
ЧДТУ.221809.001 ПЗ 49
Зм. Лист № докум. Підпис Дата
ь
56

Рисунок А.3 – Діаграма Ганта

Рисунок А.4 – Діаграма Ганта

Арк.
ЧДТУ.221809.001 ПЗ
50
Зм. Лист № докум. Підпис Дата
ь
57

ДОДАТОК Б

АЛГОРИТМ РОБОТИ З WEB ДОДАТКОМ
Пошук клієнта

Рисунок Б.1 – Пошук клієнта

Рисунок Б.2 – Невдалий результат пошуку

Арк.
ЧДТУ.221809.001 ПЗ 51
Зм. Лист № докум. Підпис Дата
ь
58

Створення клієнта

Рисунок Б.3 – Форма для створення клієнта

Рисунок Б.4 – Попередження про помилки при створені клієнта
Арк.
ЧДТУ.221809.001 ПЗ 52
Зм. Лист № докум. Підпис Дата
ь
59

Рисунок Б.5 – Правильне заповнення форми для створення клієнта
Секції за інформацією про клієнта та його замовлення

Рисунок Б.6 – Особиста сторінка створеного клієнта
Арк.
ЧДТУ.221809.001 ПЗ 53
Зм. Лист № докум. Підпис Дата
ь
60

Рисунок Б.7 – Список замовлень клієнта
Список та структура процедур

Рисунок Б.8 – Список процедур, які надає салон
Арк.
ЧДТУ.221809.001 ПЗ
54
Зм. Лист № докум. Підпис Дата
ь
61

Рисунок Б.9 – Структура процедури
Створення, редагування та видалення процедури

Рисунок Б.10 – Форма для створення процедури
Арк.
ЧДТУ.221809.001 ПЗ
55
Зм. Лист № докум. Підпис Дата
ь
62

Рисунок Б.11 – Попередження про помилку при створенні процедури

Рисунок Б.12 – Заповнення форми для створення процедури
Арк.
ЧДТУ.221809.001 ПЗ 56
Зм. Лист № докум. Підпис Дата
ь
63

Рисунок Б.13 – Результат створення процедури

Рисунок Б.14 – Редагування процедури
Арк.
ЧДТУ.221809.001 ПЗ 57
Зм. Лист № докум. Підпис Дата
ь
64

Рисунок Б.15 – Результат редагування процедури

Рисунок Б.16 – Видалення процедури

Арк.
ЧДТУ.221809.001 ПЗ
58
Зм. Лист № докум. Підпис Дата
ь
65

Список працівників

Рисунок Б.17 – Список працівників
Особиста сторінка працівника

Рисунок Б.18 – Інформація про працівника
Арк.
ЧДТУ.221809.001 ПЗ 59
Зм. Лист № докум. Підпис Дата
ь
66

Рисунок Б.19 – Оплата всіх замовлень

Рисунок Б.20 – Оплата вибіркового замовлення

Арк.
ЧДТУ.221809.001 ПЗ 60
Зм. Лист № докум. Підпис Дата
ь
67

Створення, редагування та видалення працівника

Рисунок Б.21 – Форма для створення працівника

Рисунок Б.22 – Попередження про помилку при створенні працівника
Арк.
ЧДТУ.221809.001 ПЗ 61
Зм. Лист № докум. Підпис Дата
ь
68

Рисунок Б.23 – Заповнення форми для створення працівника

Рисунок Б.24 – Особиста сторінка створеного працівника
Арк.
ЧДТУ.221809.001 ПЗ 62
Зм. Лист № докум. Підпис Дата
ь
69

Рисунок Б.25 – Редагування працівника

Рисунок Б.26 – Результат редагування
Арк.
ЧДТУ.221809.001 ПЗ 63
Зм. Лист № докум. Підпис Дата
ь
70

Рисунок Б.27 – Видалення працівника
Створення замовлення

Рисунок Б.28 – Створення замовлення

Арк.
ЧДТУ.221809.001 ПЗ
64
Зм. Лист № докум. Підпис Дата
ь
71

Рисунок Б.29 – Оновлений список замовлень клієнта

Рисунок Б.30 – Оновлена інформація клієнта
Арк.
ЧДТУ.221809.001 ПЗ 65
Зм. Лист № докум. Підпис Дата
ь
72

Рисунок Б.31 – Список виконаних замовлень працівника

Рисунок Б.32 – Оновлена інформація про працівника

Арк.
ЧДТУ.221809.001 ПЗ
66
Зм. Лист № докум. Підпис Дата
ь
73

Редагування та видалення клієнта

Рисунок Б.33 – Форма редагування клієнта

Рисунок Б.34 – Результат редагування клієнта
Арк.
ЧДТУ.221809.001 ПЗ 67
Зм. Лист № докум. Підпис Дата
ь
74

Рисунок Б.35 – Видалення клієнта

Арк.
ЧДТУ.221809.001 ПЗ
68
Зм. Лист № докум. Підпис Дата
ь
75

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ТА ЛІТЕРАТУРИ

1. CleverBox CRM [Електронний ресурс]. – Режим доступу: https://cleverbox-
crm.com/.
2. Integrice Beauty CRM [Електронний ресурс]. – Режим доступу:
https://integrica.com.ua/.
3. BloknotApp [Електронний ресурс]. – Режим доступу: https://bloknotapp.com/.
4. PuduLand [Електронний ресурс]. – Режим доступу: https://puduland.com/.
5. Appointer [Електронний ресурс]. – Режим доступу: https://appointer.ua/.
6. Основні поняття мови HTML та структура документів [Електронний ресурс]. –
Режим доступу:
https://sites.google.com/site/vivcaemowebdizajndistancijno/html/lekcia-3-osnovni-
ponatta-movi-html-ta-struktura-dokumentiv.
7. Що таке CSS [Електронний ресурс]. – Режим доступу:
https://css.in.ua/article/shcho-take-html_10.
8. Мова JavaScript та її можливості [Електронний ресурс]. – Режим доступу:
https://sites.google.com/site/webtehnologiietawebdizajn/mova-javascript-ta-ieie-
mozlivosti.
9. Посібник: знайомство з React [Електронний ресурс]. – Режим доступу:
https://uk.reactjs.org/tutorial/tutorial.html.
10. Що таке Redux? [Електронний ресурс]. – Режим доступу: https://uk.education-
wiki.com/3707369-what-is-redux.
11. Легше, швидше, масштабніше. Чому топові компанії використовують Node.js
[Електронний ресурс]. – Режим доступу: https://prjctrmag.com/whynode.
12. Express [Електронний ресурс]. – Режим доступу: https://expressjs.com/.
13. Бази даних PostgreSQL [Електронний ресурс]. – Режим доступу:
http://ukrhosting.ua/bazi_danih_postgresql-p-263951.html
14. Методологія IDEF0 [Електронний ресурс]. – Режим доступу:
Арк.
https://stud.com.ua/87184/ekonomika/meЧtoДdТolУog.2iy2a1_8id0e9f0.0 01 ПЗ
69
Зм.. Лист № докум.. Підпис 70
Дата
і
ь
76

15. Розробка uml діаграми варіантів використання [Електронний ресурс]. – Режим
доступу: https://studfile.net/preview/5200239/page:6/
16. Що таке цілі за технікою SMART? [Електронний ресурс]. – Режим доступу:
https://cikavoznaty.com.ua/2021/05/09/cili-za-tehnikou-smart/
17. Ієрархічна структура робіт проекту [Електронний ресурс]. – Режим доступу:
https://stud.com.ua/21060/menedzhment/iyerarhichna_struktura_robit_proektu
18. Організаційна структура проекту (ОBS) [Електронний ресурс]. – Режим
доступу:https://studopedia.com.ua/1_243503_organizatsiyna-struktura-proektu-
oBS.html
19. Що таке діаграма Ганта? [Електронний ресурс]. – Режим доступу:
https://www.atlassian.com/ru/agile/project-management/gantt-chart
20. Що таке REST, RESTFul та CRUD? [Електронний ресурс]. – Режим доступу:
https://maxsite.org/page/restful-crud

ПРОГРАМНІ ЗАСОБИ
1. Windows 10 Pro © Microsoft Corporation, 1983-2022;
2. Microsoft Office Word 2016 © Microsoft Corporation, 1983-2022;
3. Visual Studio Code © Microsoft Corporation, 1983-2022;
4. WebStrom © JetBrains, 2010 – 2022;
5. Google Chrome © Google, 2008 – 2022;

ChSTU repository

ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets