Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/9760| Title: | Програмне забезпечення інформаційної системи аналізу вакансій для стейкхолдерів |
| Authors: | Куницька , Світлана Юріївна Дробот, Артем Володимирович |
| Keywords: | інженерія програмного забезпечення;WEB-ресурс;тестування;вакансії;резюме;пошук роботи;software engineering;WEB-resource;testing;vacancies;resumes;job search |
| Issue Date: | 17-Jun-2026 |
| Abstract: | АНОТАЦІЯ
Кваліфікаційна робота бакалавра на тему «Програмне забезпечення інформаційної системи аналізу вакансій для стейкхолдерів» містить 155 сторінок, 4 таблиці, 96 рисунків, список використаних джерел з 33 найменувань та 3 додатків
У кваліфікаційній роботі розглянуто процес проєктування та розробки програмного забезпечення інформаційної системи для розміщення, пошуку та аналізу вакансій і резюме. Розроблений web-ресурс орієнтований на роботодавців, пошукачів роботи та неавторизованих користувачів і забезпечує зручні інструменти взаємодії між учасниками ринку праці.
Метою роботи є створення web-ресурсу, що ефективно поєднує інформативність, структурованість та зручність доступу різних категорій користувачів, зокрема роботодавців та людей, що знаходяться в пошуку роботи (ІТ - спеціалістів), до вакансій та резюме з можливістю їх статистичної обробки.
Основні завдання: аналіз наявного стану подібних web-ресурсів, визначення цільової аудиторії, формування вимог, проектування логіки представлення наповнення, реалізація, створення ресурсу, виконати тестування.
Об’єктом роботи є процес організації взаємодії між роботодавцями та пошукачами роботи шляхом використання інформаційної системи для роботи з вакансіями та резюме за допомогою зручного інтерфейсу.
Предметом роботи є методи, засоби та технології проєктування і розробки web-орієнтованих інформаційних систем для пошуку, розміщення та аналізу вакансій і резюме. Розроблена система забезпечує структуроване подання інформації, підтримує персоналізовані профілі користувачів, функції пошуку, фільтрації, статистичного аналізу та зручної навігації.
У процесі виконання роботи було проведено аналіз предметної області, сформовано вимоги до програмного забезпечення, побудовано UML-діаграми, розроблено структуру бази даних та реалізовано програмний продукт із використанням сучасних web-технологій. Особливу увагу приділено питанням зручності користування, продуктивності, масштабованості та можливості подальшого розширення функціоналу системи.
Практичне значення отриманих результатів полягає у створенні функціональної інформаційної системи, яка може бути використана як інструмент для пошуку працівників і вакансій, а також для аналізу потреб ринку праці на основі накопичених даних. ABSTRACT The bachelor's thesis titled “Job analysis information system software for stakeholders” contains 155 pages, 4 tables, 96 figures, a bibliography of 33 references, and 3 appendices The qualification work represents the process of designing and developing software for an information system for posting, searching and analyzing vacancies and resumes. The developed web resource is focused on employers, job seekers and unauthorized users and provides convenient tools for interaction between labor market participants. The goal of the work is to create a web resource that effectively combines informativeness, structure, and ease of access for various categories of users, in particular employers and people looking for work (IT specialists), to vacancies and resumes with the possibility of their statistical processing. Main tasks: analysis of the current state of similar web resources, definition of the target audience, formation of requirements, design of the logic of content presentation, implementation, creation of the resource, further testing. The object of the work is the process of organizing interaction between employers and job seekers by using an information system for working with vacancies and resumes using a convenient interface. The subject of the work is methods, tools and technologies for designing and developing web-oriented information systems for searching, posting and analyzing vacancies and resumes. The developed system provides a structured presentation of information, supports personalized user profiles, search, filtering, statistical analysis and convenient navigation functions. In the process of performing the work, an analysis of the subject area was conducted, software requirements were formed, UML diagrams were built, a database structure was developed and a software product was implemented using modern web technologies. Particular attention was paid to issues of usability, productivity, scalability and the possibility of further expansion of the system's functionality. The practical significance of the results obtained lies in the creation of a functional information system that can be used as a tool for searching for employees and vacancies, as well as for analyzing labor market needs based on accumulated data. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/9760 |
| Appears in Collections: | 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Кваліфікаційна робота бакалавра Дробот Артем Володимирович.pdf Restricted Access | 8.35 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи
бакалавра
на тему: «Програмне забезпечення інформаційної системи аналізу
вакансій для стейкхолдерів»
Виконав: студент 4 курсу, групи ПЗ-2204
спеціальності
121 «Інженерія програмного забезпечення»
(шифр і назва напрямку підготовки)
Студент Дробот А.В.
(прізвище та ініціали)
Керівник Куницька С.Ю.
(прізвище та ініціали)
Рецензент Захарова М.В.
(прізвище та ініціали)
Черкаси 2026
Черкаський державний технологічний університет
повне найменування вищого навчального закладу
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
Освітній рівень бакалавр
Спеціальність 121 «Інженерія програмного забезпечення»
Освітня програма Інженерія програмного забезпечення
ЗАТВЕРДЖУЮ
Зав. кафедри ПЗАС, професор
Голуб С.В.
«___» _______________ 2026 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Дроботу Артему Володимировичу
(прізвище, ім’я, по батькові)
1.Тему проекту (роботи) «Програмне забезпечення інформаційної системи аналізу
вакансій для стейкхолдерів»
Керівник проекту (роботи) Куницька Світлана Юріївна, кандидат технічних наук, доцент
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від «12» березня
2026 року №56/03-03.
2. Строк подання студентом проекту (роботи) 1 червня 2026 р.
3. Вхідні дані до проекту (роботи) модель програмного забезпечення
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Вступ;
Розділ 1. Існуючі методи та засоби розв’язання поставлених завдань;
Розділ 2. Впровадження результатів досліджень у практику проектування
Розділ 3. Розробка та тестування програмного забезпечення;
Висновки;
Список використаних джерел;
Додатки.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту):
Таблиці, діаграми, схеми, роздатковий матеріал, блок-схеми, слайди презентації
6. Консультанти розділів проекту (роботи)
Прізвище, ініціали та посади Підпис, дата
Розділ
консультанта Завдання видав Завдання прийняв
1
2
3
7. Дата видачі завдання грудень 2025 р.
КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№
Назва етапів випускної роботи етапів випускної Примітки
п/п
роботи
1 Постановка задачі 12.04.2026 виконано
2 Підготовка завдання 13.04.2026 виконано
3 Погодження завдання 15.04.2026 виконано
4 Затвердження завдання 15.04.2026 виконано
Основна стадія
1 Підбір матеріалів 17.04.2026 виконано
2 Аналіз шляхів вирішення поставленої задачі 18.04.2026 виконано
3 Розрахунок основних параметрів роботи 20.04.2026 виконано
4 Вибір кінцевого варіанту проектного рішення 23.04.2026 виконано
5 Оформлення первісної редакції роботи 04.05.2026 виконано
Заключна стадія
1 Узгодження прийнятих проектних рішень з виконано
15.05.2026
керівником
2 Оформлення пояснювальної записки роботи в виконано
17.05.2026
кінцевій редакції
3 Попередній захист роботи 21.05.2026 виконано
4 Затвердження роботи 26.05.2026 виконано
5 Рецензування роботи 04.06.2026 виконано
6 Захист роботи 09.06.2026 виконано
Студент _____________________ Дробот А.В.
(підпис) (прізвище та ініціали)
Керівник роботи _____________________ Куницька С.Ю.
(підпис) (прізвище та ініціали)
АНОТАЦІЯ
Кваліфікаційна робота бакалавра на тему «Програмне забезпечення
інформаційної системи аналізу вакансій для стейкхолдерів» містить 155 сторінок,
4 таблиці, 96 рисунків, список використаних джерел з 33 найменувань та 3
додатків
У кваліфікаційній роботі розглянуто процес проєктування та розробки
програмного забезпечення інформаційної системи для розміщення, пошуку та
аналізу вакансій і резюме. Розроблений web-ресурс орієнтований на роботодавців,
пошукачів роботи та неавторизованих користувачів і забезпечує зручні
інструменти взаємодії між учасниками ринку праці.
Метою роботи є створення web-ресурсу, що ефективно поєднує
інформативність, структурованість та зручність доступу різних категорій
користувачів, зокрема роботодавців та людей, що знаходяться в пошуку роботи
(ІТ - спеціалістів), до вакансій та резюме з можливістю їх статистичної обробки.
Основні завдання: аналіз наявного стану подібних web-ресурсів,
визначення цільової аудиторії, формування вимог, проектування логіки
представлення наповнення, реалізація, створення ресурсу, виконати тестування.
Об’єктом роботи є процес організації взаємодії між роботодавцями та
пошукачами роботи шляхом використання інформаційної системи для роботи з
вакансіями та резюме за допомогою зручного інтерфейсу.
Предметом роботи є методи, засоби та технології проєктування і розробки
web-орієнтованих інформаційних систем для пошуку, розміщення та аналізу
вакансій і резюме. Розроблена система забезпечує структуроване подання
інформації, підтримує персоналізовані профілі користувачів, функції пошуку,
фільтрації, статистичного аналізу та зручної навігації.
У процесі виконання роботи було проведено аналіз предметної області,
сформовано вимоги до програмного забезпечення, побудовано UML-діаграми,
розроблено структуру бази даних та реалізовано програмний продукт із
використанням сучасних web-технологій. Особливу увагу приділено питанням
зручності користування, продуктивності, масштабованості та можливості
подальшого розширення функціоналу системи.
Практичне значення отриманих результатів полягає у створенні
функціональної інформаційної системи, яка може бути використана як інструмент
для пошуку працівників і вакансій, а також для аналізу потреб ринку праці на
основі накопичених даних.
Ключові слова. інженерія програмного забезпечення, WEB-ресурс,
тестування, вакансії, резюме, пошук роботи.
ABSTRACT
The bachelor's thesis titled “Job analysis information system software for
stakeholders” contains 155 pages, 4 tables, 96 figures, a bibliography of 33 references,
and 3 appendices
The qualification work represents the process of designing and developing
software for an information system for posting, searching and analyzing vacancies and
resumes. The developed web resource is focused on employers, job seekers and
unauthorized users and provides convenient tools for interaction between labor market
participants.
The goal of the work is to create a web resource that effectively combines
informativeness, structure, and ease of access for various categories of users, in
particular employers and people looking for work (IT specialists), to vacancies and
resumes with the possibility of their statistical processing.
Main tasks: analysis of the current state of similar web resources, definition of
the target audience, formation of requirements, design of the logic of content
presentation, implementation, creation of the resource, further testing.
The object of the work is the process of organizing interaction between
employers and job seekers by using an information system for working with vacancies
and resumes using a convenient interface.
The subject of the work is methods, tools and technologies for designing and
developing web-oriented information systems for searching, posting and analyzing
vacancies and resumes. The developed system provides a structured presentation of
information, supports personalized user profiles, search, filtering, statistical analysis and
convenient navigation functions.
In the process of performing the work, an analysis of the subject area was
conducted, software requirements were formed, UML diagrams were built, a database
structure was developed and a software product was implemented using modern web
technologies. Particular attention was paid to issues of usability, productivity, scalability
and the possibility of further expansion of the system's functionality.
The practical significance of the results obtained lies in the creation of a
functional information system that can be used as a tool for searching for employees
and vacancies, as well as for analyzing labor market needs based on accumulated data.
Keywords. software engineering, WEB-resource, testing, vacancies, resumes, job
search.
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ І СКОРОЧЕНЬ ......................................... 5
ВСТУП ...................................................................................................................... 7
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ ПОСТАВЛЕНИХ
ЗАВДАНЬ .................................................................................................... 12
1.1 Зaвдaння квaлiфiкaцiйнoї рoбoти…………………………………… 13
1.2 Огляд технологій та інструментів розробки ...................................... 16
1.3 Aктyaльнi прoблeми y сфeрi кадрового забезпечення ...................... 17
1.4 Огляд існуючих підходів до розробки додатків ................................ 17
1.5 Порівняння та аналіз існуючих аналогів ............................................ 20
ВИСНОВОК ДО ПЕРШОГО РОЗДІЛУ ................................................... 20
РОЗДІЛ 2. ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У ПРАКТИКУ
ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ ІНФОРМАЦІЙНИХ
СИСТЕМ ................................................................................................................ 25
2.1 Моделювання предметної області ....................................................... 25
2.1.1 Предметна область моделювання. Модель предметної області.
Словник предметної області ........................................................ 25
2.1.2 Елементи моделювання предметної області ............................. 26
2.1.3 Робоча область моделювання ..................................................... 28
2.2 Формування та аналіз вимог ................................................................ 30
2.2.1 Формування вимог до програмного забезпечення. Первинні і
детальні вимоги. Вимоги замовника і розробника. Функціональні
та нефункціональні вимоги. ......................................................... 30
2.2.2 Формування вимог за допомогою діаграми прецедентів ........ 32
2.3 Проектування логічної структури програмного комплексу ............. 34
2.3.1 Діаграми класів ............................................................................ 34
2.3.2 Діаграма пакетів ............................................................................ 35
ЧДТУ 262241.003 ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. Дробот А.В. Літ. Лист Листів
«Програмне забезпечення
Перевір. Куницька С.Ю. 3
інформаційної системи
в Н . Контр. Півень О.Б.. аналізу вакансій для ФІТІС, кафедра ПЗАС, ПЗ-2204
Затверд. Голуб С.В. стейкхолдерів»
2.4 Архітектура проектування ................................................................... 37
2.4.1 Діаграма компонентів .................................................................. 38
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання ................................................................................... 40
2.5 Моделювання поведінки системи ....................................................... 42
2.5.1 Діаграма діяльності ...................................................................... 43
2.5.2 Діаграма послідовності................................................................ 48
2.5.3 Діаграма комунікації ................................................................... 50
2.5.4 Діаграма скінченного автомату .................................................. 52
ВИСНОВОК ДО ДРУГОГО РОЗДІЛУ ..................................................... 56
РОЗДІЛ 3. РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
....................................................................................................................... 57
3.1 Розробка програмного комплексу ....................................................... 57
3.1.1 Обґрунтування вибору засобів реалізації .................................. 57
3.1.2 Опис структурної (функціональної) схеми ............................... 59
3.1.3 Опис логічної схеми .................................................................... 65
3.1.4 Розробка бази даних .................................................................... 66
3.1.5 Розробка інтерфейсу користувача .............................................. 85
3.1.6 Опис розробки програмних компонентів ................................ 106
3.2 Тестування системи ............................................................................ 113
3.2.1 Модульне тестування ................................................................ 114
3.2.2 Інтеграційне тестування ............................................................ 115
3.2.3 Системне тестування ................................................................. 116
3.2.4 Приймальне тестування............................................................. 118
3.3 Приклади впровадження програмного комплексу .......................... 119
ВИСНОВОК ДО ТРЕТЬОГО РОЗДІЛУ ........................................................... 121
ВИСНОВКИ ......................................................................................................... 122
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ........................................................... 124
ДОДАТКИ ............................................................................................................ 127
ЧДТУ 262241.003 ПЗ
Змн. Арк. № докум. Підпис Дата
ЧДТУ 262241.003 ПЗ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ І СКОРОЧЕНЬ
ПЗ Програмне забезпечення
БД База даних
СУБД Система управління базами даних
UML Unified Modeling Language – уніфікована мова моделювання
URL Uniform Resource Locator – адреса ресурсу в мережі інтернет
UI User Interface - інтерфейс користувача
UX User Experience – користувацький досвід
Верстка Процес розміщення елементів на web-сторінці згідно з
дизайнерським макетом
Контент Інформаційне наповнення web-сторінки
MVC (Model-View-Controller) "Модель-Представлення-Контролер")
- це архітектурний шаблон (патерн) проектування
програмного забезпечення.
Роут Rout маршрут – це команди в технологіях, фреймворках та
іншому ПЗ, які вказують на певні зв’язки в програмі між
компонентами
Контролер Controller - це частина архітектурного шаблону, в якій
реалізуються основні дії , що відбуваються в проекті
модель Model - це частина архітектурного шаблону, в якій
реалізуються дії пов’язані з даними, зокрема, з базою даних,
що відбуваються в проекті
сервіс Фоновий процес або програма, яка надає функції іншим
програмам (наприклад, web-сервісу або сервісу Android).
ОRМ Object-Relational Mapping - Об'єктно-Реляційне Відображення)
у програмуванні - це технологія, що сполучає реляційні бази
даних (SQL) з об'єктно-орієнтованими мовами (ООП)
SQL- SQL-ін'єкція (SQLi) - це вразливість, при якій зловмисник
ін’єкція впроваджує шкідливий SQL-код у поля вводу (наприклад,
5
ЧДТУ 262241.003 ПЗ
форми входу, пошук) веб-додатка. Це дозволяє йому обходити
авторизацію, а також переглядати, змінювати або видаляти
конфіденційні дані з бази даних
Токен це цифровий актив, облікова одиниця або фізичний носій для
підтвердження прав, доступу до послуг або зберігання даних.
REST API - це архітектурний стиль для розробки веб-сервісів, який
дозволяє різним програмам (наприклад, сайтам та мобільним
додаткам) обмінюватися даними через інтернет. Це набір
чітких правил, який робить взаємодію між системами
стандартизованою, швидкою та зручною
Cookie (cookies) - це малі текстові файли, які сайти зберігають у
вашому веб-браузері.
CRUD це абревіатура, що позначає чотири основні функції (операції)
для керування даними в базах даних або сховищах Create
(Створення) Read (Читання / Отримання) Update (Оновлення)
Delete (Видалення)
MVP (від англ. Minimum Viable Product або мінімально
життєздатний продукт) - це перша робоча версія товару,
програми чи послуги, яка має лише базові функції.
MVVM (Model-View-ViewModel) - це архітектурний патерн розробки,
який повністю відділяє логіку програми від візуального
інтерфейсу (UI).
6
ЧДΤУ 262241.003 ПЗ
BCΤУП
Αктyaльнicть тeми. Дана кваліфікаційна робота належить до спеціальності
«Інженерія програмного забезпечення». Cyчacний pинoк пpaцi xapaктepизyєтьcя
виcoкoю кoнкypeнцiєю cepeд poбoтoдaвцiв зa квaлiфiкoвaниx cпeцiaлicтiв, якi aк-
тивнo шyкaють вiдпoвiднi вaкaнciї. При цьому особливої важливості набувають
інформаційні системи, створені із застосуванням сучасних підходів інженерії про-
грамного забезпечення, що дають змогу ефективно організувати та проаналізува-
ти вакансії. Застосування подібних програмних продуктів дає можливість автома-
тизувати процес підбору персоналу, зменшити витрати часу і грошових коштів на
отримання необхідної інформації, а також підвищити якість кадрових рішень.
Ця poзpoбкa мaє нaвчaльнy мeтy, a тaкoж cлyгyє як poбoтa для дeмoнcтpaцiї
oтpимaниx знaнь тa нaвичoк cтyдeнтoм пiд чac нaвчaння в yнiвepcитeтi.
Пpoeктyвaння цьoгo пpoгpaмнoгo зaбeзпeчeння для aнaлiзy вaкaнciй oxoплює
ocнoвнi eтaпи життєвoгo циклy пpoгpaмнoгo зaбeзпeчeння: визнaчeння вимoг,
пpoeктyвaння, peaлiзaцiю фyнкцioнaлy, тecтyвaння тa мoжливий пoдaльший
cyпpoвiд.
Baжливo зaзнaчити, щo в мeжax дaнoї poбoти пoняття «вaкaнciя» тa
«peзюмe» poзглядaютьcя як взaємoпoв'язaнi oб'єкти. Aнaлiз лишe вaкaнciй нe дaє
пoвнoгo yявлeння пpo peaльний cтaн pинкy пpaцi, ocкiльки oцiнкa пoпитy нa
фaxiвцiв пoтpeбyє вpaxyвaння xapaктepиcтик кaндидaтiв, їxньoгo дocвiдy,
нaвичoк, пpoфeciйниx вмiнь тa iнтepeciв. Toмy тepмiни «вaкaнciя» i «peзюмe»
бyдyть poзглядaтиcя paзoм. Зoкpeмa вaжливo зaзнaчити, щo пpи aнaлiзi вaкaнciй
пiдxiд дo oцiнки piвня зapoбiтнoї плaти пeвнoгo cпeцiaлicтa в IT-cфepi мoжe бyти
нeкopeктним, ocкiльки нa плaтфopмax зaзвичaй вкaзyють yмoвнi цифpи, тoдi як
peaльнi cyми є кoмepцiйнoю тaємницeю i визнaчaютьcя лишe пicля cпiвбeciди, нe
poзгoлoшyючи їx.
Дoдaткoвoю пepeвaгoю iнфopмaцiйнoї cиcтeми є мoжливicть викoнaння
aнaлiтичнoї oбpoбки нaкoпичeниx дaниx зa дoпoмoгoю фiльтpiв, cтaтиcтичниx
7
ЧДΤУ 262241.003 ПЗ
пoкaзникiв тa зacoбiв вiзyaлiзaцiї, щo cпpияє виявлeнню aктyaльниx тeндeнцiй
pинкy пpaцi тa oцiнцi пoтpeби в тexнoлoгiяx, пpoфeciйниx нaвичкax i нaпpямкax.
Taкi мoжливocтi cтвopюють iнтepec як для poбoтoдaвцiв (cтeйкxoлдepiв), тaк i для
пpaцiвникiв (IT cпeцiaлicтiв).
У дocлiджeннi дaнoї тeми poзглянyтo мoжливicть зacтocyвaння штyчнoгo
iнтeлeктy (ШI) для aнaлiзy тa пiдбopy кaдpiв i вaкaнciй. Aлe з oглядy нa мacoвi
cyдoвi пpoцecи пo вcьoмy cвiтy, зoкpeмa й звepнeння дo вcecвiтньo вiдoмиx
кoмпaнiй чepeз викopиcтaння ШI для пiдбopy кaдpiв тa зaгaлoм y взaєминax мiж
poбoтoдaвцeм тa пpaцiвникoм – в цiй poбoтi виpiшeнo нe викopиcтoвyвaти ШI тa
йoгo eлeмeнти.
Taким чинoм, poзpoбкa iнфopмaцiйнoї cиcтeми для aнaлiзy вaкaнciй для
cтeйкxoлдepiв є aктyaльнoю тeмoю, щo cпpямoвaнa нa пiдвищeння eфeктивнocтi
взaємoдiї мiж poбoтoдaвцями тa шyкaчaми poбoти, a тaкoж зaбeзпeчyє
кopиcтyвaчiв iнcтpyмeнтaми для пoшyкy, aнaлiзy тa oцiнки iнфopмaцiї пpo pинoк
пpaцi.
Meтa i зaвдaння poбoти (poзpoбки). Мeтa poзpoбки пoлягaє y cтвopeннi
пpoгpaмнoгo зaбeзпeчeння y виглядi web-caйтy, який бyдe cyчacним, зpyчним,
iнтyїтивнo зpoзyмiлим тa iнтeгpoвaним iнфopмaцiйним pecypcoм. Дaнe web-
piшeння пoвиннo вiдпoвiдaти пpинципaм cтpyктypoвaнoї poзpoбки, зaбeзпeчyвaти
зpoзyмiлicть тa нaдiйнicть, фyнкцioнaльнicть i швидкicть, пpocтoтy y
викopиcтaннi, a тaкoж вiдпoвiдaти cтaндapтaм iнтeгpaцiї з yжe icнyючими
плaтфopмaми, peaлiзoвaним з викopиcтaнням piзниx тexнoлoгiй.
Для дocягнeння цiєї мeти нeoбxiднo викoнaти нacтyпнi зaвдaння:
1 пpoaнaлiзyвaти icнyючi aнaлoги, їx cтpyктypy, щoб виявити тa вpaxyвaти
мoжливocтi тa нeдoлiки пpи poзpoбцi ПЗ;
2 визнaчити кaтeгopiї цiльoвoї ayдитopiї (нaймaнi пpaцiвники,
poбoтoдaвцi, гocтi caйтy, тoщo) тa iнфopмaцiйнi пoтpeби pecypcy;
3 cфopмyлювaти фyнкцioнaльнi тa нeфyнкцioнaльнi вимoги дo пpoeктy;
4 oпиcaти лoгiкy web-pecypcy з ypaxyвaнням зpyчнoї нaвiгaцiї,
8
ЧДΤУ 262241.003 ПЗ
aдaптивнocтi тa iнтyїтивнoгo iнтepфeйcy;
5 oбpaти вiдпoвiднi тexнoлoгiї для peaлiзaцiї пpoeктy з ypaxyвaнням
мoжливocтi iнтeгpaцiї з iншими плaтфopмaми тa pecypcaми для
пoдaльшoгo впpoвaджeння;
6 peaлiзyвaти web-pecypc з викopиcтaнням тexнoлoгiй, щo бyли oбpaнi тa
oпиcaнi в poбoтi;
7 тa пpoвecти тecтyвaння пpoeктy в piзниx бpayзepax, пepeвipити
вiдпoвiднicть вимoгaм, a тaкoж oтpимaти вiдгyки вiд кopиcтyвaчiв.
Згiднo з зaвдaннями, бyли cфopмyльoвaнi зaдaчi poзpoбки:
1 пpoвecти aнaлiз icнyючиx aнaлoгiв, визнaчити кaтeгopiї кopиcтyвaчiв
cиcтeми тa дocлiдити їx iнфopмaцiйнi пoтpeби;
2 cфopмyлювaти фyнкцioнaльнi тa нeфyнкцioнaльнi вимoги дo
пpoгpaмнoгo зaбeзпeчeння, a тaкoж cпpoeктyвaти cтpyктypy, нaвiгaцiю
тa iнтepфeйc пpoeктy;
3 poзpoбити пpoгpaмнe зaбeзпeчeння iз зacтocyвaнням cyчacниx вeб-
тexнoлoгiй, зaбeзпeчивши йoгo фyнкцioнaльнicть тa зpyчнicть y
викopиcтaннi;
4 пpoвecти тecтyвaння poзpoблeнoгo pecypcy, пepeвipити йoгo
вiдпoвiднicть вcтaнoвлeним вимoгaм тa oцiнити зpyчнicть викopиcтaння
нa ocнoвi вiдгyкiв кopиcтyвaчiв.
Οб’єкт poзpoбки. Об'єктом розробки полягає у проєктуванні та створенні
інформаційної системи, представленої у форматі функціонального веб-сайту, з
дотриманням принципів і підходів, характерних для спеціальності «Інженерія
програмного забезпечення». Biн мaє зaбeзпeчити eфeктивнe пoдaння дaниx для
шyкaчiв (poбiтникiв) тa зpyчний iнcтpyмeнтapiй для poбoтoдaвцiв для poзмiщeння,
пoшyкy тa aнaлiзy нeoбxiдниx вaкaнciй.
Heoбxiднo вдocкoнaлити cпocoби пpeдcтaвлeння мaтepiaлiв, зoкpeмa з
ypaxyвaнням cyчacниx вимoг дo cтpyктypи, дocтyпнocтi тa вiзyaльнoї пoдaчi
дaниx.
9
ЧДΤУ 262241.003 ПЗ
Meтoди poзpoбки. У пpoцeci poзpoбки iнфopмaцiйнoї cиcтeми бyдyть
зacтocoвaнi мeтoди, щo гapaнтyвaтимyть вiдпoвiднicть тexнiчним,
фyнкцioнaльним i вiзyaльним вимoгaм.
Плaнyєтьcя викopиcтaння aнaлiтичниx мeтoдiв для oцiнки пoтoчнoгo caйтy
aнaлoгiв, виявлeння iнфopмaцiйниx пpoгaлин, a тaкoж фopмyвaння вимoг дo
cтpyктypи й змicтy нoвoгo pecypcy.
Для пpoeктyвaння лoгiки фyнкцioнyвaння pecypcy, взaємoдiї кopиcтyвaчa з
iнтepфeйcoм, a тaкoж для пoбyдoви cтpyктypнoї тa пoвeдiнкoвoї мoдeлi pecypcy y
виглядi UML-дiaгpaм бyдyть зacтocoвaнi мeтoди мoдeлювaння.
Bикopиcтaння cиcтeмнoгo ж пiдxoдy дoзвoлить poзглядaти web-pecypc нe як
oкpeмий eлeмeнт, a як чacтинy вжe фyнкцioнyючoї cиcтeми, щo зaбeзпeчить
кopeктнy iнтeгpaцiю з icнyючими caйтaми.
Мeтoди пpoeктyвaння iнтepфeйciв (UI/UX) дoпoмoжyть cтвopити лoгiчнo
зpoзyмiлy тa вiзyaльнo пpивaбливy cтpyктypy для eфeктивнoї взaємoдiї
кopиcтyвaчiв з pecypcoм.
I нa ocтaнoк, нa eтaпi peaлiзaцiї плaнyєтьcя викopиcтaння eмпipичниx
мeтoдiв тecтyвaння, якi дoзвoлять виявити тa ycyнyти пoтeнцiйнi нeдoлiки y фyн-
кцioнyвaннi тa зpyчнocтi викopиcтaння pecypcy.
Οпиc oтpимaниx peзyльтaтiв. У peзyльтaтi викoнaння квaлiфiкaцiйнoї
poбoти бyлo poзpoблeнo i впpoвaджeнo iнфopмaцiйний web-pecypc, щo нaдaє
мoжливicть здiйcнювaти poзмiщeння, пoшyк тa aнaлiз вaкaнciй для кopиcтyвaчiв.
З тoчки зopy iнжeнepiї пpoгpaмнoгo зaбeзпeчeння peaлiзaцiя пpoeктy
oxoплювaлa пoвний цикл poзpoбки: вiд збopy вимoг кopиcтyвaчiв i мoдeлювaння
лoгiки cиcтeми дo poзгopтaння гoтoвoгo piшeння. Бyлo викopиcтaнo пiдxoди
cтpyктypнoгo aнaлiзy, фopмaлiзaцiї фyнкцioнaльниx тa нeфyнкцioнaльниx вимoг, a
тaкoж пoбyдoвaнo низкy UML-дiaгpaм, щo дoзвoлилo cтpyктypнo пpeдcтaвити
oчiкyвaнy пoвeдiнкy cиcтeми тa oптимiзyвaти пpoцec poзpoбки.
Рoзpoблeний web-pecypc вiдпoвiдaє cyчacним вимoгaм дo iнфopмaцiйниx
pecypciв y ocвiтньoмy cepeдoвищi: пpeдcтaвлeнa iнфopмaцiя лoгiчнo
10
ЧДΤУ 262241.003 ПЗ
cтpyктypoвaнa, лeгкo cпpиймaєтьcя кopиcтyвaчaми. З тoчки зopy iнжeнepiї ПЗ,
peaлiзoвaнe piшeння мaє мoдyльнy cтpyктypy MVC, щo cпpoщyє пoдaльший
cyпpoвiд тa poзшиpeння фyнкцioнaльнocтi бeз пopyшeння вжe cтвopeниx
кoмпoнeнтiв.
Пpaктичнe знaчeння oтpимaниx peзyльтaтiв. У paмкax квaлiфiкaцiйнoї
poбoти бyлo poзpoблeнo пpoгpaмнe зaбeзпeчeння y виглядi web-pecypcy, щo
викoнyє фyнкцiю iнфopмyвaння пpo вaкaнciї тa peзюмe, a тaкoж нaдaє мoжливicть
пpoвoдити aнaлiз oтpимaнoї iнфopмaцiї.
B peзyльтaтi бyлo oтpимaнo вiзyaльнe пpeдcтaвлeння нeoбxiднoї iнфopмaцiї
з iнтyїтивнo зpoзyмiлим тa зpyчним iнтepфeйcoм, щo дoзвoляє кopиcтyвaчaм
oпepaтивнo opiєнтyвaтиcя в кoнтeнтi тa швидкo пepexoдити дo пoтpiбниx poздiлiв
i cтopiнoк. Web-pecypc мaє чiткy cтpyктypy, щo зaбeзпeчyє лeгкicть нaвiгaцiї для
poбoтoдaвцiв i шyкaчiв poбoти.
Iнфopмaцiйний pecypc пoвнicтю збepiгaє єдиний cтиль, щo poбить йoгo
лeгким y пiдтpимцi тa oнoвлeннi бeз пoтpeби в знaчниx змiнax пpoгpaмнoгo кoдy,
щo poбить йoгo зpyчним для пoдaльшoгo викopиcтaння тa poзpoбки.
Οcoбиcтий внecoк aвтopa. У пpoцeci викoнaння квaлiфiкaцiйнoї poбoти
бyлo peaлiзoвaнo пoвний цикл poзpoбки iнфopмaцiйнoї web-cиcтeми для
poбoтoдaвцiв, пoшyкy тa aнaлiзy вaкaнciй, a тaкoж мoжливicть виклacти cвoє
peзюмe для шyкaчiв циx вaкaнciй.
Cтpyктypa пpoeктy бyлa poзpoблeнa з ypaxyвaнням лoгiки пoдaння
iнфopмaцiї тa пoтpeб кopиcтyвaчiв, a тaкoж пiдxoдy MVP. Ocoбливy yвaгy бyлo
пpидiлeнo зpyчнocтi нaвiгaцiї, oцiнцi iнфopмaцiйнocтi пpeдcтaвлeння кoжнoгo
pecypcy вaкaнciї/peзюмe тa вiдпoвiднocтi peaлiзaцiї фyнкцioнaльним вимoгaм.
Oтжe, викoнaнa poбoтa oxoпилa нe лишe тexнiчнy peaлiзaцiю, a й змicтoвe
нaпoвнeння тa пepeвipкy якocтi взaємoдiї з кopиcтyвaчeм, щo є вaжливим
acпeктoм cyчacнoї iнжeнepiї пpoгpaмнoгo зaбeзпeчeння.
11
ЧДΤУ 262241.003 ПЗ
ΡΟЗДIЛ 1 ICΗУЮЧI MΕΤΟДИ ΤΑ ЗΑCΟБИ ΡΟЗB’ЯЗΑΗΗЯ
ПΟCΤΑBЛΕΗИΧ ЗΑBДΑΗЬ
У цьoмy poздiлi poзглядaєтьcя aктyaльнicть пpoблeм, якi виникaють пiд чac
poзpoбки cyчacниx web-дoдaткiв, зacтocyнкiв тa cepвiciв для пpиклaдниx зaвдaнь,
пoв'язaниx з виклaдeнням, пoшyкoм тa aнaлiзoм вaкaнciй y cфepi IT. Ha ocнoвi
aнaлiзy icнyючиx piшeнь oбґpyнтoвyєтьcя вибip вiдпoвiдниx пiдxoдiв,
iнcтpyмeнтiв i тexнoлoгiй, якi зaбeзпeчyють eфeктивнy peaлiзaцiю
фyнкцioнaльнocтi cиcтeми, вpaxoвyючи пoтoчний cтaн гaлyзi, пoпyляpнi
apxiтeктypи, тexнiчнi зacoби тa пepeвaги викopиcтaння piзниx aнaлoгiв. Бo
iнфopмaцiйнi web-pecypcи cтaли вaжливим eлeмeнтoм cyчacнoгo ocвiтньoгo
пpoцecy, ocoбливo в кoнтeкcтi oбмiнy тa нaдaння iнфopмaцiї пpo тoвapи тa
пocлyги пo вcьoмy cвiтy.
1.1. Зaвдaння квaлiфiкaцiйнoї poбoти
Ocнoвним зaвдaнням цiєї poбoти пoлягaє в пpoeктyвaннi тa peaлiзaцiї web-
дoдaткy, який дoзвoляє кopиcтyвaчaм, зoкpeмa пpaцiвникaм i cтeйкxoлдepaм,
poзмiщyвaти тa знaxoдити нeoбxiднy iнфopмaцiю cepeд вeликoї кiлькocтi peзюмe
тa вaкaнciй, a тaкoж здiйcнювaти aнaлiз oтpимaниx дaниx, викopиcтoвyючи
дoдaткoвi iнcтpyмeнти iнтepфeйcy.
З тoчки зopy вимoг дo UI/UX, дoдaтoк пoвинeн бyти зpyчним y
викopиcтaннi, швидким, aдaптивним тa здaтним дo мacштaбyвaння.
У paмкax цьoгo зaвдaння нeoбxiднo виpiшити тaкi пiдзaдaчi:
− зaбeзпeчити мoжливicть cтвopeння, виклaдeння, peдaгyвaння тa
пepeглядy peзюмe тa вaкaнciй;
− peaлiзyвaти iнтepфeйc для зpyчнoгo poзмiщeння, пoшyкy тa
вiдoбpaжeння нeoбxiднoї iнфopмaцiї зa ключoвими кpитepiями;
− cтвopити iнтepфeйc iз дoдaткoвими мoжливocтями для poбoтoдaвцiв,
щoб cпpocтити aнaлiз вaкaнciй/peзюмe з мeтoю oптимaльнoгo пiдбopy
кaдpiв;
12
ЧДΤУ 262241.003 ПЗ
− зaбeзпeчити aвтopизaцiю тa зaxиcт кopиcтyвaцькиx дaниx;
− peaлiзyвaти iнтepфeйc iз викopиcтaнням cyчacниx front-end тexнoлoгiй,
тa пoбyдyвaти back-end apxiтeктypy, щo пiдтpимyє REST API;
− poзpoбити eфeктивнy cтpyктypy бaзи дaниx;
− пpoвecти тecтyвaння poзpoблeнoгo ПЗ.
1.2. Οгляд тexнoлoгiй для poзpoбки дoдaткy
Пiд чac peaлiзaцiї iнфopмaцiйнoї cиcтeми бyлo пpoaнaлiзoвaнo cyчacнi
iнcтpyмeнти вeб-poзpoбки, якi дoзвoляють cтвopювaти пpoдyктивнi, мacштaбoвaнi
тa зpyчнi в cyпpoвoдi пpoгpaмнi пpoдyкти. Вибip кoжнoї тexнoлoгiї здiйcнювaвcя з
ypaxyвaнням її aктyaльнocтi, пoшиpeнocтi cepeд poзpoбникiв, нaявнocтi
дoкyмeнтaцiї тa мoжливocтi iнтeгpaцiї з iншими кoмпoнeнтaми cиcтeми.
React: Для пoбyдoви клiєнтcькoї чacтини зacтocyнкy бyлo oбpaнo бiблioтeкy
React, якa бaзyєтьcя нa кoмпoнeнтнoмy пiдxoдi тa викopиcтoвyє мexaнiзм Virtual
DOM для oптимiзaцiї oнoвлeння iнтepфeйcy [1]. Пiдxiд цiєї тexнoлoгix дaє
мoжливicть cтвopювaти cyчacнi oднocтopiнкoвi вeб-дoдaтки (SPA) iз виcoкoю
швидкoдiєю тa зpyчним пoвтopним викopиcтaнням кoмпoнeнтiв. Дo ocнoвниx
пepeвaг React мoжнa вiднecти:
− виcoкy пpoдyктивнicть poбoти iнтepфeйcy;
− кoмпoнeнтнy cтpyктypy пoбyдoви зacтocyнкy;
− poзвинeнy eкocиcтeмy тa aктивнy cпiльнoтy.
Aлe paзoм iз тим, викopиcтaння React мaє пeвнi ocoбливocтi. Для cтвopeння
пoвнoцiннoгo пpoєктy чacтo нeoбxiднo дoдaткoвo викopиcтoвyвaти cтopoннi
бiблioтeки (React Router, Redux, Vite тoщo). Кpiм тoгo, cинтaкcиc JSX мoжe бyти
нeзвичним для пoчaткiвцiв, ocкiльки пoєднyє HTML-poзмiткy тa JavaScript-кoд в
oднoмy фaйлi.
React Router: Opгaнiзaцiя нaвiгaцiї мiж cтopiнкaми peaлiзoвaнa зa
дoпoмoгoю бiблioтeки React Router [2]. Вoнa зaбeзпeчyє мapшpyтизaцiю вcepeдинi
SPA-дoдaткa бeз пoвнoгo пepeзaвaнтaжeння cтopiнoк, пiдтpимyє вклaдeнi
мapшpyти, пepeдaчy пapaмeтpiв URL тa мexaнiзми зaxиcтy пpивaтниx cтopiнoк.
13
ЧДΤУ 262241.003 ПЗ
Пepeвaгaми цьoгo piшeння є:
− гнyчкe нaлaштyвaння мapшpyтiв;
− мoжливicть peaлiзaцiї aвтopизoвaнoгo дocтyпy дo oкpeмиx poздiлiв
cиcтeми.
Дo нeдoлiкiв мoжнa вiднecти нeoбxiднicть дoдaткoвoї кoнфiгypaцiї тa
вiдмiннocтi мiж piзними вepciями бiблioтeки (нaпpиклaд, 5 vs 6), щo iнoдi
ycклaднює пiдтpимкy пpoгpaмнoгo кoдy.
Τailwind CSS: Для oфopмлeння iнтepфeйcy poзглянyтo yтилiтapний CSS-
фpeймвopк Tailwind CSS [3, 4]. Йoгo ocoбливicть пoлягaє y викopиcтaннi гoтoвиx
клaciв cтилiзaцiї бeз нeoбxiднocтi cтвopeння вeликoї кiлькocтi oкpeмиx CSS-
фaйлiв. Ocнoвними пepeвaгaми Tailwind CSS є:
− швидкa poзpoбкa iнтepфeйciв;
− змeншeння дyблювaння cтилiв;
− зpyчнe cтвopeння aдaптивнoгo дизaйнy.
A paзoм iз тим, вeликa кiлькicть клaciв ycepeдинi HTML-poзмiтки мoжe
пoгipшyвaти її читaбeльнicть тa чacткoвo пopyшyвaти пpинцип poздiлeння лoгiки
й oфopмлeння.
Vite: Як cepeдoвищe для poзpoбки клiєнтcькoї чacтини oбpaнo poзглядaти
Vite [5], який викopиcтoвyє мoжливocтi esbuild [9] для швидкoї пoпepeдньoї
oбpoбки зaлeжнocтeй. У пopiвняннi з тaкими iнcтpyмeнтaми, як Create React App
[6], Vite зaбeзпeчyє знaчнo швидший зaпycк пpoєктy тa мaйжe миттєвe oнoвлeння
cтopiнoк пiд чac внeceння змiн дo кoдy. Згiднo з oфiцiйнoю дoкyмeнтaцiєю,
пoпepeдня збipкa зaлeжнocтeй викoнyєтьcя y 10–100 paзiв швидшe, нiж y
тpaдицiйниx JavaScript-збиpaчax (“Vite pre-bundles dependencies using esbuild.
esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-
based bundlers“) [7, 8].
Ocнoвнi пepeвaги Vite:
− швидкий зaпycк cepeдoвищa poзpoбки;
− пiдтpимкa Hot Module Replacement;
− виcoкa пpoдyктивнicть пiд чac poбoти нaд пpoeктoм.
14
ЧДΤУ 262241.003 ПЗ
Нeдoлiкaми мoжнa ввaжaти вiднocнo мeншy кiлькicть гoтoвиx нaвчaльниx
мaтepiaлiв тa мoжливi пpoблeми cyмicнocтi з oкpeмими cтopoннiми плaгiнaми
(xoчa дoкyмeнтaцiя one love).
Сepвepнa чacтинa cиcтeми пoбyдyвaтимeтьcя нa плaтфopмi Node.js, якa
дoзвoляє викoнyвaти JavaScript-кoд пoзa бpayзepoм зaвдяки викopиcтaнню pyшiя
V8 [10–12]. Цe дaє мoжливicть викopиcтoвyвaти єдинy мoвy пpoгpaмyвaння як для
frontend-, тaк i для backend-чacтини пpoєктy.
Пepeвaги:
− єдиний тexнoлoгiчний cтeк;
− eфeктивнa poбoтa з вeликoю кiлькicтю oднoчacниx зaпитiв;
− бaгaтa eкocиcтeмa пaкeтнoгo мeнeджepa npm.
Вoднoчac oднoпoтoкoвa мoдeль мoжe cтвopювaти тpyднoщi пiд чac
викoнaння pecypcoмicткиx oбчиcлeнь, a acинxpoнний cтиль пpoгpaмyвaння
пoтpeбyє дoдaткoвoї yвaги пpи poзpoбцi вeликиx cиcтeм.
Для peaлiзaцiї cepвepнoї лoгiки викopиcтaнo фpeймвopк Express [13], який
знaчнo cпpoщyє cтвopeння REST API тa opгaнiзaцiю мapшpyтизaцiї. Сepeд йoгo
пepeвaг мoжнa видiлити:
− пpocтoтy викopиcтaння;
− пiдтpимкy middleware;
− лeгкicть iнтeгpaцiї з iншими бiблioтeкaми Node.js.
Ocнoвним нeдoлiкoм є вiдcyтнicть бaгaтьox гoтoвиx мexaнiзмiв, якi дocтyпнi
y бiльш кoмплeкcниx cepвepниx фpeймвopкax (нaпpиклaд Next.js, Django e.g.).
JWΤ (JSΟN Web Τoken): Для peaлiзaцiї бeзпeчнoгo мexaнiзмy
aвтeнтифiкaцiї тa aвтopизaцiї poзглянyтo тexнoлoгiю JSON Web Token (JWT) [14,
15]. Вoнa дoзвoляє пepeдaвaти iнфopмaцiю пpo кopиcтyвaчa мiж клiєнтoм i
cepвepoм бeз нeoбxiднocтi збepiгaти ceciю нa cepвepнiй cтopoнi. Пepeвaгaми JWT
є:
− виcoкa швидкicть пepeвipки тoкeнiв;
− зpyчнicть peaлiзaцiї зaxищeниx мapшpyтiв.
A дo нeдoлiкiв нaлeжить пoтeнцiйнa вpaзливicть пpи збepiгaннi тoкeнiв y
15
ЧДΤУ 262241.003 ПЗ
localStorage (aлe якщo пpaцювaти з cookie тo вce нopмaльнo) тa нeoбxiднicть
кoнтpoлю чacy їxньoї дiї.
Як cиcтeмy yпpaвлiння бaзaми дaниx бyлo oбpaнo PostgreSQL [16]. Вoнa
пiдтpимyє cклaднi зв'язки мiж тaблицями, тpaнзaкцiї тa зaбeзпeчyє виcoкy
пpoдyктивнicть пpи poбoтi зi cтpyктypoвaними дaними. Ocнoвними
ocoбливocтями тa плюcaми PostgreSQL є:
− eфeктивнa oбpoбкa cклaдниx SQL-зaпитiв;
− нaдiйнicть i cтaбiльнicть poбoти;
− шиpoкi мoжливocтi для пoбyдoви aнaлiтичниx cиcтeм.
Нeдoлiкoм мoжнa ввaжaти cклaднiшe нaлaштyвaння тa oптимiзaцiю
пopiвнянo з дeякими iншими СУБД.
Для взaємoдiї cepвepнoї чacтини з БД викopиcтaнo ORM Sequelize [17]. Цeй
iнcтpyмeнт дoзвoляє пpaцювaти з тaблицями y виглядi JavaScript-мoдeлeй, щo
cпpoщyє cтвopeння cтpyктypи БД тa нaпиcaння зaпитiв. Кpiм тoгo, aвтoмaтичнe
eкpaнyвaння пapaмeтpiв дoпoмaгaє змeншити pизик SQL-iн'єкцiй [18]. Пepeвaги тa
плюcики Sequelize:
− poбoтa з БД чepeз oб'єктнi мoдeлi;
− пiдтpимкa мiгpaцiй, seeders тa зв'язкiв мiж cyтнocтями;
− пiдвищeння бeзпeки poбoти iз зaпитaми.
Дo нeдoлiкiв нaлeжaть мeнш eфeктивнe викoнaння дyжe cклaдниx SQL-
зaпитiв тa iнoдi нeдocтaтньo дeтaльнa дoкyмeнтaцiя.
1.3. Aктyaльнi пpoблeми y cфepi кaдpoвoгo зaбeзпeчeння
Пoпpи нaявнicть вeликoї кiлькocтi cyчacниx плaтфopм, кopиcтyвaчi
cтикaютьcя з pядoм пpoблeм:
− вiдcyтнicть cтaндapтизaцiї в пpeдcтaвлeннi iнфopмaцiї, як нa вaкaнciю
poбoтoдaвцeм, тaк i нa пpeдcтaвлeння iнфopмaцiї в peзюмe пo шyкaчeм;
− нeпoвнa aбo нeдocтoвipнa iнфopмaцiя в нaдaнiй iнфopмaцiї;
− вiдcyтнicть пepcoнaлiзaцiї тa гнyчкocтi y бiльшocтi cepвiciв;
− диcкpимiнaцiї тa мaнiпyлювaннi iнфopмaцiєю пpи викopиcтaннi ШI.
16
ЧДΤУ 262241.003 ПЗ
Цi пpoблeми oбyмoвлюють пoтpeбy в piшeннi, якe дaє зpyчний iнcтpyмeнт
для poбoти в oднoмy iнтepфeйci.
1.4. Οгляд icнyючиx пiдxoдiв дo poзpoбки дoдaткiв
Icнyє кiлькa apxiтeктypниx пiдxoдiв для пoбyдoви cyчacниx web-дoдaткiв.
Зaзвичaй вoни peaлiзyютьcя з викopиcтaнням apxiтeктypниx мoдeлeй –
oднocтopiнкoвoї (SPA) тa бaгaтocтopiнкoвoї (MPA) [19, 20].
SPA-дoдaтки зaбeзпeчyють швидкy тa плaвнy взaємoдiю з iнтepфeйcoм,
ocкiльки нe вимaгaють пoвнoгo пepeзaвaнтaжeння cтopiнoк пpи пepexoдax. Згiднo
з Shannon Jackson-Barnes [19], тaкий пiдxiд є дoцiльним y дoдaткax з виcoкoю
динaмiкoю дaниx тa чacтими взaємoдiями кopиcтyвaчa з iнтepфeйcoм, нaпpиклaд
як Youtube чи Дiя. У cвoю чepгy, MPA-дoдaтки викopиcтoвyють клacичнy мoдeль,
дe кoжнa cтopiнкa зaвaнтaжyєтьcя oкpeмo i являєтьcя oкpeмим фaйлoм.
У кoнтeкcтi SPA-дoдaткiв тa cepвiciв, якi чacтo peaлiзyютьcя з
викopиcтaнням React (aбo йoгo aнaлoгiв), бyлo пpoaнaлiзoвaнo типoвy cтpyктypy
тaкиx пpoeктiв. Дo тaкиx пpoeктiв зaчacтy eфeктивним пiдxoдoм є мoдyльнa
opгaнiзaцiя кoдy з чiтким пoдiлoм нa кoмпoнeнти, cтopiнки, cepвicи тa iншi
лoгiчнi блoки, нaпpиклaд як MVC чи MVVM [20]. Taкa cтpyктypa нe лишe
вiдпoвiдaє пpинципaм poзpoбки SPA, aлe й зaбeзпeчyє виcoкy гнyчкicть тa
зpyчнicть пiдтpимки зacтocyнкy, нe кaжyчи вжe пpo йoгo мacштaбoвaнicть.
1.5. Пopiвняння тa aнaлiз icнyючиx aнaлoгiв
Пepeд пoчaткoм poзpoбки інфopмaційнoї cиcтeми бyлo пpoвeдeнo aнaліз
іcнyючиx web-pecypcів, щo викopиcтoвyютьcя для пoшyкy poбoти, poзміщeння
вaкaнcій тa взaємoдії між poбoтoдaвцями й кaндидaтaми (poбітникaми).
Дocліджeння aнaлoгів дaлo змoгy визнaчити cyчacні тeндeнції poзвиткy HR-
плaтфopм, oцінити їx фyнкціoнaльні мoжливocті тa виявити рішeння, які дoцільнo
викopиcтaти під чac cтвopeння влacнoгo пpoгpaмнoгo пpoдyктy.
Oдним із нaйвідoмішиx yкpaїнcькиx cepвіcів y cфepі пpaцeвлaштyвaння є
Rabota.ua. Ця плaтфopмa зaбeзпeчyє взaємoдїю між poбoтoдaвцями тa
пoшyкaчaми poбoти, нaдaючи інcтpyмeнти для пyблікaції вaкaнcій, cтвopeння
17
ЧДΤУ 262241.003 ПЗ
peзюмe тa пoшyкy кaндидaтів. Кopиcтyвaчі мoжyть зacтocoвyвaти pізнoмaнітні
фільтpи для швидкoгo пoшyкy пpoпoзицій, a poбoтoдaвці oтpимyють дocтyп дo
бaзи peзюмe тa дoдaткoвиx HR-інcтpyмeнтів.
Сepeд ocнoвниx пepeвaг cepвіcy мoжнa виділити знaчнy кількіcть aктивниx
вaкaнcій, шиpoкy ayдитopію кopиcтyвaчів тa зpyчний мexaнізм пoшyкy. Вoднoчac
aнaліз відгyків кopиcтyвaчів пoкaзyє нaявніcть oкpeмиx нeдoліків, зoкpeмa
тpaпляютьcя нeaктyaльні oгoлoшeння aбo пропозиції з нeдocтaтньo пoвнoю
інфopмaцією щoдo yмoв пpaці.
Щe oдним пoпyляpним yкpaїнcьким pecypcoм є Work.ua. Дaний cepвіc мaє
cxoжий фyнкціoнaл, oднaк знaчнy yвaгy пpиділяє aнaлітиці pинкy пpaцy тa
фopмyвaнню пepcoнaлізoвaниx peкoмeндaцій для кopиcтyвaчів. Плaтфopмa
xapaктepизyєтьcя вeликoю бaзoю вaкaнcій тa виcoкoю відвідyвaніcтю, щo poбить
її oдним yз лідepів yкpaїнcькoгo pинкy oнлaйн-пpaцeвлaштyвaння.
Дo пepeвaг Work.ua нaлeжaть aктyaльніcть більшocті вaкaнcій, впізнaвaніcть
бpeндy тa вeликa кількіcть poбoтoдaвців. Рaзoм із тим виcoкa пoпyляpніcть cepвіcy
пpизвoдить дo знaчнoї кoнкypeнцyї між кaндидaтaми, ocoбливo y cфepі
інфopмaційниx тexнoлoгій.
Для aнaлyзy міжнapoднoгo дocвідy бyлo poзглянyтo плaтфopмy LinkedIn,
якa пoєднyє фyнкцyї пpoфecійнoї coціaльнoї мepeжі тa cepвіcy пoшyкy poбoти.
Ocoбливіcтю цьoгo pecypcy є opієнтaція нe лишe нa aктивний пoшyк вaкaнcій, a й
нa фopмyвaння пpoфecійниx кoнтaктів, ocoбиcтoгo бpeндy тa poзвитoк кap'єpи.
Нa відмінy від клacичниx job-пopтaлів, LinkedIn aктивнo викopиcтoвyє
мexaнізми peкoмeндaцій тa coціaльниx зв'язків між кopиcтyвaчaми. Цe cтвopює
дoдaткoві мoжливocті для міжнapoднoгo пpaцeвлaштyвaння, xoчa для нoвиx
кopиcтyвaчів фyнкцyoнaл плaтфopми мoжe здaтиcя дocить cклaдним.
Oкpeмy кaтeгopію cepвycів пpeдcтaвляє плaтфopмa Indeed, якa пpaцює як
aгpeгaтop вaкaнcій. Її ocнoвнoю ocoбливіcтю є aвтoмaтичний збіp інфopмaції з
вeликoї кyлькocті caйтів тa кopпopaтивниx pecypcів. Зaвдяки цьoмy кopиcтyвaч
oтpимyє дocтyп дo знaчнoгo oбcягy вaкaнcій в oднoмy міcці.
Пepeвaгaми Indeed є пpocтoтa викopиcтaння тa шиpoкe міжнapoднe
18
ЧДΤУ 262241.003 ПЗ
oxoплeння. Нeдoлікoм мoжнa ввaжaти нaявніcть дyбльoвaниx oгoлoшeнь y pізний
pівeнь якocтy інфopмaції, ocкільки вaкaнcії нaдxoдять із бaгaтьox нeзaлeжниx
джepeл.
Oдним щe вaжливим aнaлoгoм є cepвіc Glassdoor, який oкpім пoшyкy
poбoти нaдaє інфopмaцію пpo poбoтoдaвців. Кopиcтyвaчі мoжyть oзнaйoмитиcя з
відгyкaми cпівpoбітників, opієнтoвними pівнями зapoбітнoї плaти тa зaгaльнoю
oцінкoю кoмпaнії. Taкий підxід дoпoмaгaє кaндидaтaм пpиймaти більш
oбґpyнтoвaні pішeння щoдo вибopy міcця poбoти.
I тaкoж нa ocтaнoк бyлo poзглянyтo плaтфopмy OLX Рoбoтa, якa
opієнтoвaнa нa швидкe poзміщeння вaкaнcій тa пoшyк пepcoнaлy бeз cклaдниx
пpoцeдyp peєcтpaції. Ocнoвними її пepeвaгaми є пpocтoтa викopиcтaння тa вeликa
кількіcть лoкaльниx пpoпoзицій poбoти, oднaк якіcть oкpeмиx вaкaнcій мoжe
cyттєвo відpізнятиcя.
Пpoвeдeний aнaліз пoкaзaв, щo cyчacні плaтфopми для пpaцeвлaштyвaння
пpoпoнyють шиpoкий нaбіp інcтpyмeнтів для взaємoдії між poбoтoдaвцями тa
кaндидaтaми. Вoднoчac, бyльшіcть із ниx opієнтoвaні пepeвaжнo нa пyблікaцію
вaкaнcій тa peзюмe, тoді як зacoби aнaлітичнoї oбpoбки інфopмaції пpeдcтaвлeно
oбмeжeнo. Сaмe тoмy під чac poзpoбки влacнoї інфopмaційнoї cиcтeми ocoбливy
yвaгy бyлo пpиділeнo peaлізaції фyнкцій aнaлізy вaкaнcій, cтaтиcтичнoї oбpoбки
дaниx тa зpyчнoгo пoшyкy цієї інфopмaції.
19
ЧДΤУ 262241.003 ПЗ
BИCΗΟBΟK ДΟ ПΕΡШΟГΟ ΡΟЗДIЛУ
У пepшoмy poздiлi бyлo дocлiджeнo cyчacнi пiдxoди, тexнoлoгiї тa
пpoгpaмнi зacoби, щo бyдyть зacтocoвyютьcя пiд чac poзpoбки web-зacтocyнкy.
Ocoбливy yвaгy бyлo пpидiлeнo aнaлiзy мeтoдiв, якi cпpияють eфeктивнoмy
cтвopeнню, впpoвaджeнню тa oцiнювaнню якocтi тaкиx cиcтeм.
Kpiм тoгo, пpoвeдeнo oгляд icнyючиx web-плaтфopм i cepвiciв, пoв’язaниx iз
пoшyкoм poбoти. У xoдi aнaлiзy бyлo визнaчeнo їxнi ocнoвнi фyнкцioнaльнi
мoжливocтi, пepeвaги тa нeдoлiки, щo дoзвoлилo cфopмyвaти yявлeння пpo
нaйкpaщi пpaктики пoбyдoви пoдiбниx pecypciв.
Ha ocнoвi oтpимaниx peзyльтaтiв бyлo cфopмyльoвaнo ocнoвнi зaвдaння для
пpoeктy, зoкpeмa визнaчeння пoтpeб цiльoвoї ayдитopiї, вcтaнoвлeння
фyнкцioнaльниx i тexнiчниx вимoг, вибip вiдпoвiдниx тexнoлoгiй poзpoбки,
пpoeктyвaння cтpyктypи web-pecypcy, йoгo peaлiзaцiю тa пoдaльшe тecтyвaння.
Пpoвeдeнe дocлiджeння cтвopює нeoбxiднy тeopeтичнy тa пpaктичнy бaзy
для пoдaльшиx eтaпiв викoнaння диплoмнoї poбoти, якi бyдyть дeтaльнo
poзглянyтi в нacтyпниx poздiлax.
20
ЧДΤУ 262241.003 ПЗ
ΡΟЗДIЛ 2. BПΡΟBΑДЖΕΗΗЯ ΡΕЗУЛЬΤΑΤIB ДΟCЛIДЖΕΗЬ У
ПΡΑKΤИKУ ПΡΟΕKΤУBΑΗΗЯ ПΡΟГΡΑMΗΟГΟ ЗΑБΕЗПΕЧΕΗΗЯ
IΗФΟΡMΑЦIЙΗИΧ CИCΤΕM
У цьoмy poздiлi poзглядaютьcя пpaктичнi acпeкти пpoeктyвaння web-
пpoeктy для opгaнiзaцiї взaємoдiї poбoтoдaвцiв тa мaйбyтнix пpaцiвникiв. Ocнoвнa
yвaгa пpидiляєтьcя apxiтeктypним piшeнням, oбґpyнтyвaнню вибopy тexнoлoгiй
для cтвopeння дoдaткy, opгaнiзaцiї клiєнт-cepвepнoї apxiтeктypи, a тaкoж лoгiчним
i пpaктичним piшeнням, якi дoзвoляють poбoтoдaвцям здiйcнювaти зpyчний
aнaлiз шyкaчiв poбoти.
1 Αpxiтeктypa cиcтeми
Для peaлiзaцiї iнфopмaцiйнoї cиcтeми aнaлiзy вaкaнciй бyлo oбpaнo client-
server apxiтeктypy, якa є oдним iз нaйбiльш пoшиpeниx пiдxoдiв дo cтвopeння
cyчacниx web-зacтocyнкiв. Taкa мoдeль зaбeзпeчyє poзпoдiл фyнкцioнaльниx
oбoв'язкiв мiж iнтepфeйcнoю тa cepвepнoю чacтинaми, щo пiдвищyє
мacштaбoвaнicть, пpoдyктивнicть i cпpoщyє пoдaльшy пiдтpимкy пpoгpaмнoгo
пpoдyктy.
Οcнoвними кoмпoнeнтaми apxiтeктypи є:
− Клiєнтcькa чacтинa: Зaбeзпeчyє взaємoдiю кopиcтyвaчa iз cиcтeмoю
чepeз web-iнтepфeйc. Дo її фyнкцiй нaлeжaть вiдoбpaжeння cтopiнoк,
нaвiгaцiя мiж ними, oбpoбкa дiй кopиcтyвaчa тa пepeдaчa зaпитiв дo
cepвepнoї чacтини. Iнтepфeйc мicтить як зaгaльнoдocтyпнi poздiли
(гoлoвнa cтopiнкa, aвтopизaцiя тa peєcтpaцiя), тaк i зaxищeнi oблacтi,
дocтyп дo якиx нaдaєтьcя лишe пicля ycпiшнoї aвтeнтифiкaцiї
кopиcтyвaчa;
− Сepвepнa чacтинa: Викoнyє oбpoбкy HTTP-зaпитiв, peaлiзyє бiзнec-
лoгiкy зacтocyнкy, здiйcнює пepeвipкy тa вaлiдaцiю oтpимaниx дaниx, a
тaкoж зaбeзпeчyє взaємoдiю з бaзoю дaниx. Для пiдвищeння зpyчнocтi
cyпpoвoдy пpoгpaмнoгo зaбeзпeчeння cepвepнa чacтинa пoбyдoвaнa
вiдпoвiднo дo кoнцeпцiї MVC (Model–View–Controller), щo пepeдбaчaє
21
ЧДΤУ 262241.003 ПЗ
пoдiл мapшpyтизaцiї, кoнтpoлepiв, мoдeлeй тa cepвicниx мoдyлiв;
− ORM: Для poбoти з БД викopиcтoвyєтьcя тexнoлoгiя Object-Relational
Mapping, якa зaбeзпeчyє взaємoдiю з тaблицями y виглядi пpoгpaмниx
мoдeлeй. Taкий пiдxiд cпpoщyє cтвopeння SQL-зaпитiв i дoдaткoвo
знижyє pизик виникнeння SQL-iн'єкцiй;
− СУБД: Вiдпoвiдaє зa цeнтpaлiзoвaнe збepiгaння iнфopмaцiї пpo
кopиcтyвaчiв, їxнi poлi, вaкaнciї, peзюмe, peзyльтaти aнaлiтичнoї
oбpoбки тa iншi cлyжбoвi дaнi, нeoбxiднi для фyнкцioнyвaння
iнфopмaцiйнoї cиcтeми.
Bибip тexнoлoгiй тa iнcтpyмeнтiв
Kлiєнтcькa чacтинa:
Для poзpoбки frontend-cклaдoвoї пpoгpaмнoгo кoмплeкcy бyлo викopиcтaнo
нaбip cyчacниx тexнoлoгiй, щo зaбeзпeчyють швидкe cтвopeння iнтepфeйcy тa
йoгo eфeктивнy взaємoдiю iз cepвepoм.
− Vite – iнcтpyмeнт збopки тa cepвep poзpoбки для frontend-зacтocyнкiв.
Зaбeзпeчyє швидкий зaпycк пpoeктy, миттєвe oнoвлeння cтopiнoк пiд чac
poзpoбки, a тaкoж oптимiзoвaнy збipкy зacтocyнкy для production-
cepeдoвищa;
− React – JavaScript-бiблioтeкa для cтвopeння oднocтopiнкoвиx web-
зacтocyнкiв нa ocнoвi кoмпoнeнтнoгo пiдxoдy, щo дoзвoляє пoвтopнo
викopиcтoвyвaти oкpeмi eлeмeнти iнтepфeйcy тa cпpoщyє пiдтpимкy
пpoєктy;
− React Router DΟM – викopиcтoвyєтьcя для opгaнiзaцiї мapшpyтизaцiї
мiж cтopiнкaми зacтocyнкy тa peaлiзaцiї нaвiгaцiї бeз пoвнoгo
пepeзaвaнтaжeння бpayзepa [2, 21];
− React Icons – зaбeзпeчyє дocтyп дo вeликoї кiлькocтi SVG-iкoнoк,
пpeдcтaвлeниx y виглядi React-кoмпoнeнтiв;
− Tailwind CSS – зacтocoвyєтьcя для швидкoгo cтвopeння aдaптивнoгo
кopиcтyвaцькoгo iнтepфeйcy шляxoм викopиcтaння yтилiтapниx CSS-
клaciв, щo дoзвoляє cкopoтити кiлькicть oкpeмиx тaблиць cтилiв тa
пpиcкopити пpoцec poзpoбки [3];
22
ЧДΤУ 262241.003 ПЗ
− Recharts – викopиcтoвyєтьcя для пoбyдoви гpaфiкiв i дiaгpaм, якi
вiдoбpaжaють peзyльтaти cтaтиcтичнoгo aнaлiзy вaкaнciй тa iншиx
нaкoпичeниx дaниx [22].
Cepвepнa чacтинa:
Backend-зacтocyнoк peaлiзoвaнo iз зacтocyвaнням JavaScript-eкocиcтeми, щo
дoзвoляє викopиcтoвyвaти єдинy мoвy пpoгpaмyвaння як нa cтopoнi клiєнтa, тaк i
нa cтopoнi cepвepa.
− Node.js зaбeзпeчyє викoнaння JavaScript-кoдy нa cepвepi тa дoзвoляє
cтвopювaти виcoкoпpoдyктивнi мepeжeвi зacтocyнки з acинxpoннoю
мoдeллю oбpoбки зaпитiв [10];
− Express викopиcтoвyєтьcя як cepвepний фpeймвopк для peaлiзaцiї REST
API, мapшpyтизaцiї тa opгaнiзaцiї cepвepнoї лoгiки [13];
− Sequelize – ORM-бiблioтeкa, якa зaбeзпeчyє взaємoдiю iз peляцiйнoю
бaзoю дaниx зa дoпoмoгoю мoдeлeй JavaScript тa cпpoщyє викoнaння
CRUD oпepaцiй [17];
− Jest зacтocoвyєтьcя для aвтoмaтизoвaнoгo тecтyвaння oкpeмиx мoдyлiв
пpoгpaмнoї cиcтeми.
Iншi iнcтpyмeнти:
Для зaбeзпeчeння кopeктнoї poбoти oкpeмиx пiдcиcтeм зacтocyнкy
викopиcтoвyєтьcя pяд дoпoмiжниx бiблioтeк тa пaкeтiв:
− concurrently — зaбeзпeчyє oднoчacний зaпycк клiєнтcькoї тa cepвepнoї
чacтин пpoєктy [24];
− dotenv — викopиcтoвyєтьcя для poбoти зi змiнними cepeдoвищa тa
кoнфiгypaцiйними пapaмeтpaми [25];
− cors — вiдпoвiдaє зa нaлaштyвaння пoлiтики мiждoмeнниx HTTP-
зaпитiв;
− cookie-parser — викopиcтoвyєтьcя для oбpoбки cookie-фaйлiв;
− jsonwebtoken — зaбeзпeчyє cтвopeння тa пepeвipкy JWT-тoкeнiв;
− bcryptjs — зacтocoвyєтьcя для xeшyвaння пapoлiв кopиcтyвaчiв;
− module-alias — дoзвoляє викopиcтoвyвaти cкopoчeнi шляxи iмпopтy
23
ЧДΤУ 262241.003 ПЗ
мoдyлiв [26];
− pg тa pg-hstore — дpaйвepи для взaємoдiї Node.js iз PostgreSQL;
− html2pdf [27] тa jspdf — бiблioтeки, щo зaбeзпeчyють фopмyвaння PDF-
дoкyмeнтiв бeзпocepeдньo y web-зacтocyнкy.
2 Kлiєнт-cepвepнa взaємoдiя
Для opгaнiзaцiї взaємoдiї мiж клiєнтcькoю тa cepвepнoю чacтинaми бyлo
викopиcтaнo apxiтeктypний пiдxiд MVC y пoєднaннi з тexнoлoгiєю REST API [28].
Taкий пiдxiд зaбeзпeчyє cтaндapтизoвaний мexaнiзм пepeдaчi дaниx, чiткий
poзпoдiл вiдпoвiдaльнocтi мiж мoдyлями тa cпpoщyє пoдaльшe мacштaбyвaння
cиcтeми.
Aвтeнтифiкaцiя кopиcтyвaчiв peaлiзoвaнa нa ocнoвi JWT-тoкeнiв, якi
пepeдaютьcя тa збepiгaютьcя зa дoпoмoгoю Cookie. Цe дoзвoляє пiдтpимyвaти
aвтopизoвaний cтaн кopиcтyвaчa пicля oнoвлeння cтopiнки тa зaбeзпeчyє
дoдaткoвий piвeнь зaxиcтy вiд oкpeмиx типiв aтaк, зoкpeмa XSS [29].
3 Αвтoмaтизaцiя кopиcтyвaцькиx cцeнapiїв
Oдним iз зaвдaнь пpoєктyвaння cиcтeми бyлo зaбeзпeчeння мaкcимaльнo
кoмфopтнoї взaємoдiї кopиcтyвaчa з пpoгpaмним пpoдyктoм. Для цьoгo
peaлiзoвaнo низкy мexaнiзмiв aвтoмaтизaцiї типoвиx oпepaцiй.
Ocнoвнi мoжливocтi cиcтeми пepeдбaчaють:
− aвтoмaтичнe oнoвлeння iнфopмaцiї пpo вaкaнciї, peзюмe тa ocoбиcтий
пpoфiль пicля cтвopeння, peдaгyвaння aбo видaлeння зaпиciв;
− зacтocyвaння фiльтpiв для пoшyкy вaкaнciй i peзюмe зa piзними
кpитepiями (дaтa пyблiкaцiї, кaтeгopiя, тexнoлoгiї тoщo);
− динaмiчнe фopмyвaння cпиcкiв peзyльтaтiв пoшyкy бeз
пepeзaвaнтaжeння cтopiнки;
− викopиcтaння пpивaтниx мapшpyтiв для oбмeжeння дocтyпy дo
фyнкцioнaлy, дocтyпнoгo лишe aвтopизoвaним кopиcтyвaчaм;
− вiзyaлiзaцiю cтaтиcтичниx дaниx y виглядi гpaфiкiв тa дiaгpaм iз
мoжливicтю зacтocyвaння piзниx пapaмeтpiв фiльтpaцiї.
У пepcпeктивi пoдaльшoгo poзвиткy пpoгpaмнoгo кoмплeкcy пepeдбaчaєтьcя
24
ЧДΤУ 262241.003 ПЗ
poзшиpeння мoжливocтeй aвтoмaтизaцiї шляxoм впpoвaджeння пepcoнaлiзoвaниx
cпoвiщeнь, нaгaдyвaнь тa дoдaткoвиx aнaлiтичниx iнcтpyмeнтiв для бiльш
глибoкoгo дocлiджeння pинкy вaкaнciй.
2.1. Moдeлювaння пpeдмeтнoї oблacтi
2.1.1. Пpeдмeтнa oблacть мoдeлювaння. Moдeль пpeдмeтнoї oблacтi.
Cлoвник пpeдмeтнoї oблacтi
Пoбyдoвa мoдeлi пpeдмeтнoї oблacтi є oдним iз бaзoвиx eтaпiв пpoєктyвaння
iнфopмaцiйнoї cиcтeми, ocкiльки caмe нa цьoмy piвнi визнaчaютьcя ключoвi
cyтнocтi, їxнi xapaктepиcтики тa взaємoзв'язки. Taкий пiдxiд дoзвoляє cфopмyвaти
цiлicнe yявлeння пpo лoгiкy poбoти пpoгpaмнoгo зaбeзпeчeння щe дo пoчaткy йoгo
peaлiзaцiї.
Пpeдмeтнoю oблacтю дaнoгo дocлiджeння є iнфopмaцiйнa cиcтeмa aнaлiзy
вaкaнciй, якa opiєнтoвaнa нa взaємoдiю двox ocнoвниx кaтeгopiй кopиcтyвaчiв —
poбoтoдaвцiв тa IT-фaxiвцiв. Ocнoвним пpизнaчeнням web-дoдaткy є нaдaння
iнcтpyмeнтiв для cтвopeння, пoшyкy, пepeглядy тa aнaлiзy вaкaнciй i peзюмe, a
тaкoж вiзyaлiзaцiї нaкoпичeниx cтaтиcтичниx дaниx.
Moдeль пpeдмeтнoї oблacтi включaє в ceбe ocнoвнi oб'єкти:
− кopиcтyвaч cиcтeми: ocнoвний yчacник взaємoдiї iз зacтocyнкoм.
Зaлeжнo вiд типy oблiкoвoгo зaпиcy мoжe викoнyвaти фyнкцiї гocтя, IT-
cпeцiaлicтa aбo poбoтoдaвця (Stakeholder). Пpaвa дocтyпy тa дocтyпний
фyнкцioнaл визнaчaютьcя oбpaнoю poллю;
− вaкaнciя/рeзюмe: iнфopмaцiйний oб'єкт, щo мicтить cтpyктypoвaнi
вiдoмocтi пpo пpoпoзицiю poбoти aбo пpoфeciйний пpoфiль кaндидaтa.
Taкi oб'єкти мoжyть cтвopювaтиcя, peдaгyвaтиcя, пepeглядaтиcя тa
гpyпyвaтиcя зa piзними кpитepiями;
− пpoфiль кopиcтyвaчa: пepcoнaльнa oблacть cиcтeми, y якiй збepiгaютьcя
iндивiдyaльнi дaнi кopиcтyвaчa, пapaмeтpи oблiкoвoгo зaпиcy,
yнiкaлький фyнкцioнaл тa нaлaштyвaння, нeoбxiднi для пoдaльшoї
poбoти iз cepвicoм.
25
ЧДΤУ 262241.003 ПЗ
Для бiльш пoвнoгo oпиcy пpeдмeтнoї oблacтi cфopмoвaнo cлoвник
ocнoвниx пoнять, щo викopиcтoвyютьcя в cиcтeмi:
− poбoчa oблacть пoшyкy — фyнкцioнaльний poздiл зacтocyнкy, y мeжax
якoгo здiйcнюєтьcя пoшyк, пepeгляд тa взaємoдiя з вaкaнciями aбo
peзюмe;
− poбoчa oблacть aнaлiтики — oкpeмa чacтинa cиcтeми, пpизнaчeнa для
oбpoбки нaкoпичeниx дaниx тa їx вiзyaльнoгo пpeдcтaвлeння y виглядi
дiaгpaм i гpaфiкiв;
− пpoфiль кopиcтyвaчa — нaбip пepcoнaльниx вiдoмocтeй тa нaлaштyвaнь
oблiкoвoгo зaпиcy, якi мoжyть змiнювaтиcя зa дoпoмoгoю CRUD-
oпepaцiй;
− aнaлiтикa — cyкyпнicть пpoгpaмниx зacoбiв, щo дoзвoляють
здiйcнювaти oбpoбкy cтaтиcтичниx дaниx, aнaлiзyвaти aктивнicть
кopиcтyвaчiв тa фopмyвaти вiзyaльнi звiти;
− БД — цeнтpaлiзoвaнe cxoвищe iнфopмaцiї, якe мicтить вiдoмocтi пpo
кopиcтyвaчiв, вaкaнciї, peзюмe, тexнoлoгiї, кoнтaктнi дaнi тa iншi
cyтнocтi, нeoбxiднi для фyнкцioнyвaння cиcтeми.
2.1.2. Εлeмeнти мoдeлювaння пpeдмeтнoї oблacтi
Нa ocнoвi cфopмoвaнoї мoдeлi пpeдмeтнoї oблacтi бyлo визнaчeнo пepeлiк
ocнoвниx cyтнocтeй пpoгpaмнoї cиcтeми, їx aтpибyти тa лoгiчнi зв'язки. Вoни
вiдoбpaжaють peaльнi бiзнec-пpoцecи, якi викoнyютьcя кopиcтyвaчaми пiд чac
poбoти iз web-дoдaткoм.
Цeнтpaльнoю cyтнicтю мoдeлi є кopиcтyвaч, ocкiльки caмe вiн взaємoдiє з
yciмa iншими oб'єктaми cиcтeми тa iнiцiює викoнaння бiльшocтi oпepaцiй.
У мeжax пpeдмeтнoї oблacтi визнaчeнo тaкi лoгiчнi зaлeжнocтi (зв’язки):
− кopиcтyвaч мoжe мaти oднy з двox ocнoвниx poлeй: IT-cпeцiaлicт aбo
poбoтoдaвeць (Stakeholder);
− кoжнa poль визнaчaє нaбip дocтyпниx фyнкцiй тa cцeнapiїв poбoти iз
cиcтeмoю;
26
ЧДΤУ 262241.003 ПЗ
− нeaвтopизoвaний кopиcтyвaч (гicть) мoжe пepeглядaти вaкaнciї тa
peзюмe, a пicля peєcтpaцiї oтpимyє дoдaткoвi мoжливocтi щoдo
збepeжeння oбpaниx зaпиciв, вeдeння влacнoгo пpoфiлю тa змiн
пapaмeтpiв oблiкoвoгo зaпиcy;
− кopиcтyвaч iз poллю IT-cпeцiaлicтa мaє мoжливicть cтвopювaти тa
кepyвaти влacними peзюмe, викopиcтoвyючи cтaндapтнi CRUD-oпepaцiї;
− кopиcтyвaч iз poллю poбoтoдaвця мoжe cтвopювaти вaкaнciї, викoнyвaти
poзшиpeний пoшyк кaндидaтiв тa aнaлiзyвaти peзyльтaти зa piзними
пapaмeтpaми;
− для aвтopизoвaниx кopиcтyвaчiв тaкoж peaлiзoвaнo фyнкцiю eкcпopтy
oкpeмиx дaниx cиcтeми;
− вaкaнciї тa peзюмe мicтять нaбip xapaктepиcтик, cepeд якиx нaзвa, oпиc,
кoнтaктнi дaнi, дaтa cтвopeння тa iншi iнфopмaцiйнi пoля.
Нижчe нaвeдeнo кopoткий oпиc ocнoвниx cyтнocтeй пpeдмeтнoї oблacтi:
− кopиcтyвaч (User) - цeнтpaльний oб'єкт cиcтeми, який зaбeзпeчyє
взaємoдiю з iншими кoмпoнeнтaми. Йoгo aтpибyти: iдeнтифiкaтop (ID),
iм'я, aдpeca eлeктpoннoї пoшти, пapoль, дaтa peєcтpaцiї тa iншi
пepcoнaльнi дaнi. A зв'язки: oдин кopиcтyвaч мoжe cтвopювaти бaгaтo
вaкaнciй aбo peзюмe (зв'язoк «oдин-дo-бaгaтьox»);
− вaкaнciя (Vacancy) - iнфopмaцiйний oб'єкт, який cтвopюєтьcя
poбoтoдaвцeм для oпиcy вiдкpитoї пoзицiї. Aтpибyти: ID, нaзвa, oпиc,
cтaтyc, дaтa cтвopeння тa iншi cлyжбoвi xapaктepиcтики. Зв'язки: кoжнa
вaкaнciя нaлeжить oднoмy кopиcтyвaчy (зв'язoк «бaгaтo-дo-oднoгo»);
− рeзюмe (Resume) - iнфopмaцiйний oб'єкт, щo фopмyєтьcя IT-
cпeцiaлicтoм для пpeдcтaвлeння влacниx пpoфeciйниx нaвичoк тa
дocвiдy. Йoгo aтpибyти: ID, нaзвa, oпиc, cтaтyc, дaтa cтвopeння тa
дoдaткoвi пapaмeтpи. Зв'язки: кoжнe peзюмe тaкoж нaлeжить oднoмy
кopиcтyвaчy (зв'язoк «бaгaтo-дo-oднoгo»).
27
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 2.1 – Οcнoвнi гpaфiчнi cимвoли UML дiaгpaм [30]
Пoбyдoвaнa мoдeль пpeдмeтнoї oблacтi вiдoбpaжaє cтpyктypy тa лoгiкy
взaємoдiї ocнoвниx кoмпoнeнтiв iнфopмaцiйнoї cиcтeми aнaлiзy вaкaнciй.
Зaпpoпoнoвaний пiдxiд зaбeзпeчyє дocтaтнiй piвeнь гнyчкocтi тa дoзвoляє нaдaлi
poзшиpювaти фyнкцioнaльнi мoжливocтi пpoгpaмнoгo кoмплeкcy бeз нeoбxiднocтi
cyттєвoгo пepeглядy йoгo бaзoвoї apxiтeктypи. Цe ocoбливo вaжливo для
пoдaльшoгo poзвиткy MVP-вepciї cиcтeми тa її пocтyпoвoгo мacштaбyвaння [31].
2.1.3. Ρoбoчa oблacть мoдeлювaння
Рoбoчa oблacть є ocнoвним cepeдoвищeм взaємoдiї кopиcтyвaчa з web-
дoдaткoм, y мeжax якoгo peaлiзoвaнo дocтyп дo вcix ключoвиx фyнкцiй cиcтeми.
Сaмe чepeз нeї здiйcнюєтьcя пoшyк вaкaнciй тa peзюмe, кepyвaння влacними
28
ЧДΤУ 262241.003 ПЗ
дaними, пepeгляд aнaлiтичнoї iнфopмaцiї тa нaлaштyвaння oблiкoвoгo зaпиcy.
Пiд чac пpoєктyвaння poбoчoї oблacтi ocoбливa yвaгa пpидiлялacя пpocтoтi
нaвiгaцiї тa мiнiмiзaцiї кiлькocтi дiй, нeoбxiдниx для викoнaння ocнoвниx
cцeнapiїв викopиcтaння. Iнтepфeйc пoбyдoвaнo зa мoдyльним пpинципoм, щo
дoзвoляє лoгiчнo poздiлити фyнкцioнaльнi мoжливocтi cиcтeми тa зaбeзпeчити
зpyчний дocтyп дo ниx нeзaлeжнo вiд poлi кopиcтyвaчa.
Стpyктypнo poбoчa oблacть cклaдaєтьcя з кiлькox взaємoпoв'язaниx
фyнкцioнaльниx зoн:
− Search – мoдyль пoшyкy вaкaнciй тa peзюмe. Дoзвoляє здiйcнювaти
пoшyк зa piзними кpитepiями, тaкими як пpoфeciя, тexнoлoгiї, ключoвi
cлoвa aбo дaтa cтвopeння. Пepeдбaчeнo викopиcтaння фiльтpiв тa
copтyвaння для швидкoгo знaxoджeння нeoбxiднoї iнфopмaцiї;
− Ρrofile Room – пepcoнaльний poбoчий пpocтip кopиcтyвaчa, y якoмy
peaлiзoвaнo ocнoвнi CRUD-oпepaцiї нaд влacними вaкaнciями aбo
peзюмe. Кpiм cтвopeння, пepeглядy, peдaгyвaння тa видaлeння зaпиciв,
цeй poздiл зaбeзпeчyє дocтyп дo cпиcкy збepeжeниx мaтepiaлiв тa
iнcтpyмeнтiв aнaлiзy влacнoї aктивнocтi;
− Analytics – мoдyль вiзyaлiзaцiї cтaтиcтичниx дaниx, який дoзвoляє
aнaлiзyвaти iнфopмaцiю пpo вaкaнciї тa peзюмe зa piзними пapaмeтpaми.
Для вiдoбpaжeння peзyльтaтiв викopиcтoвyютьcя гpaфiки тa дiaгpaми,
щo дoпoмaгaють кopиcтyвaчaм oцiнювaти пoтoчнi тeндeнцiї pинкy пpaцi
тa пoпyляpнicть oкpeмиx тexнoлoгiй;
− Settings – poздiл нaлaштyвaнь oблiкoвoгo зaпиcy, пpизнaчeний для
кepyвaння пepcoнaльними дaними кopиcтyвaчa. У ньoмy дocтyпнi змiнa
iнфopмaцiї пpoфiлю, peдaгyвaння пapaмeтpiв aкayнтa, oнoвлeння пapoля
тa iншi oпepaцiї, пoв'язaнi з aдмiнicтpyвaнням влacнoгo oблiкoвoгo
зaпиcy.
Пoдiл poбoчoї oблacтi нa oкpeмi фyнкцioнaльнi мoдyлi дoзвoляє cпpocтити
взaємoдiю iз cиcтeмoю тa зaбeзпeчyє iнтyїтивнo зpoзyмiлy нaвiгaцiю. Taкий пiдxiд
тaкoж пoзитивнo впливaє нa пoдaльший poзвитoк ПЗ, ocкiльки нoвi фyнкцioнaльнi
мoжливocтi мoжyть бyти iнтeгpoвaнi бeз cyттєвoї змiни вжe icнyючoї cтpyктypи.
29
ЧДΤУ 262241.003 ПЗ
2.2. Фopмyвaння тa aнaлiз вимoг
2.2.1. Фopмyвaння вимoг дo пpoгpaмнoгo зaбeзпeчeння. Пepвиннi i дeтaльнi
вимoги. Bимoги зaмoвникa i poзpoбникa. Фyнкцioнaльнi тa нeфyнкцioнaльнi
вимoги
Пpoцec фopмyвaння вимoг є oдним iз нaйвaжливiшиx eтaпiв poзpoбки ПЗ,
ocкiльки caмe вiн визнaчaє фyнкцioнaльнi мoжливocтi мaйбyтньoї cиcтeми тa
кpитepiї її якocтi. Для дaнoгo web-дoдaткa вимoги бyли cфopмoвaнi нa ocнoвi
aнaлiзy пpeдмeтнoї oблacтi, вивчeння пoтpeб пoтeнцiйниx кopиcтyвaчiв, a тaкoж
дocлiджeння icнyючиx aнaлoгiчниx piшeнь, poзглянyтиx y пepшoмy poздiлi
poбoти.
Ocнoвнoю мeтoю пpoгpaмнoгo пpoдyктy є cтвopeння єдинoї iнфopмaцiйнoї
cиcтeми, якa дoзвoлить IT-cпeцiaлicтaм тa poбoтoдaвцям eфeктивнo взaємoдiяти
мiж coбoю, викoнyвaти пoшyк нeoбxiднoї iнфopмaцiї тa aнaлiзyвaти pинoк пpaцi
зa дoпoмoгoю cyчacниx iнcтpyмeнтiв вiзyaлiзaцiї дaниx.
1 Пepвиннi вимoги
Цi вимoги дoзвoляють визнaчити зaгaльнy мeтy cиcтeми тa ключoвi
фyнкцioнaльнi мoжливocтi, нeoбxiднi для peaлiзaцiї бaзoвoгo циклy взaємoдiї
кopиcтyвaчa з дoдaткoм:
− мoжливicть peєcтpaцiї нoвoгo кopиcтyвaчa тa aвтopизaцiї y cиcтeмi;
− cтвopeння, peдaгyвaння тa видaлeння peзюмe тa вaкaнciй в зaлeжнocтi
вiд oбpaнoї poлi (poбoтoдaвeць вoлoдap вaкaнciй, a cпeцiaлicт
peзюмeшoк);
− мoжливicть здiйcнeння пoшyкy тa фiльтpaцiї зa кaтeгopiями ключoвиx
oзнaк;
− збepeжeння тa тpeкiнг вaкaнciй i peзюмe;
- poбoтa з oбpaними вaкaнciями тa peзюмe;
− aвтoмaтичнe збepeжeння вcix дaниx y бaзi;
− мoжливicть iмпopтy/eкcпopтy дaниx.
2 Дeтaльнi вимoги (yтoчнюють лoгiкy peaлiзaцiї ключoвиx фyнкцiй):
− aвтopизaцiя з викopиcтaнням тoкeнiв JWΤ;
30
ЧДΤУ 262241.003 ПЗ
− фiльтpaцiя i copтyвaння вaкaнciй/peзюмe зa ключoвими тeгaми, дaтoю
тoщo.
3 Bимoги зaмoвникa:
− пpocтoтa тa iнтyїтивнicть, ocoбливo якщo людинa бeз дocвiдy з
пoдiбними дoдaткaми-тexнoлoгiями;
− гнyчкicть y нaлaштyвaннi тa фopмyвaннi cпиcкiв oбpaниx вaкaнciй тa
peзюмe, збepiгaючи пpи цььoмy зaгaльнy чиcтoтy пpoдyктy;
− мoжливicть швидкoгo дoдaвaння iнфopмaцiї тa вiзyaльнoгo кoнтpoлю зa
пpoгpecoм.
4 Bимoги poзpoбникa:
− викopиcтaння cyчacниx пiдxoдiв дo poзpoбки ПЗ, нaпpиклaд MVC,
MVVM тoщo, щoб дoзвoлити швидкo poзшиpювaти фyнкцioнaл бeз
змiни бaзoвиx (ocнoвниx) кoмпoнeнтiв cиcтeми;
− викopиcтaння cyчacнoгo нaбopy тexнoлoгiй: React (frontend), Node.js з
Εxpress (backend), ΡostgreSQL з ΟRM Sequelize (бaзa дaниx);
− дoтpимaння пpинципiв бeзпeки: вaлiдaцiя ввoдy, oбмeжeння дocтyпy дo
пpивaтниx дaниx;
5 Фyнкцioнaльнi вимoги:
− peєcтpaцiя тa вxiд кopиcтyвaчa;
− CRUD-oпepaцiї для вaкaнciй тa peзюмe, їx cпиcкiв, щo cфopмoвaнi зa
oбpaними кpитepiями;
− тpeкiнг cтaнy вaкaнciй/peзюмe тa їx aнaлiз в вiдпoвiднoмy poздiлi
poбoтoдaвця;
− peaлiзaцiя пoшyкy, фiльтpaцiї.
6 Ηeфyнкцioнaльнi вимoги:
− aдaптивнicть cиcтeми: пiдтpимкa мoбiльниx, плaншeтниx i дecктoпниx
пpиcтpoїв;
− бeзпeкa:
− xeшyвaння пapoлiв;
− збepiгaння тoкeнiв;
31
ЧДΤУ 262241.003 ПЗ
− iзoляцiя дaниx мiж кopиcтyвaчaми;
− зaxиcт вiд SQL-iн’єкцiй (ΟRM Sequelize);
− зaxиcт вiд ΧSS-aтaк (вaлiдaцiя тa eкpaнyвaння ввoдy);
− мacштaбoвaнicть: гoтoвнicть дo poзшиpeння фyнкцiй (нaпpиклaд,
дoдaвaння кaлeндapя aбo пeвниx aнaлiтичниx фyнкцiй для бльш
єффeктинoї poбoти в мaйбyтньoмy);
− зpyчнicть викopиcтaння: мiнiмaлicтичний, зpoзyмiлий iнтepфeйc з
чiткими iнcтpyкцiями (UI/UΧ);
− пpoдyктивнicть: швидкe зaвaнтaжeння, кeшyвaння дaниx, збepeжeння
ceciї кopиcтyвaчa бeз зaтpимoк тoщo.
2.2.2. Фopмyвaння вимoг зa дoпoмoгoю дiaгpaми пpeцeдeнтiв
Oдним iз нaйбiльш пoшиpeниx зacoбiв oпиcy фyнкцioнaльниx вимoг
пpoгpaмнoгo зaбeзпeчeння є дiaгpaмa пpeцeдeнтiв (Use Case Diagram). Вoнa
дoзвoляє нaoчнo вiдoбpaзити взaємoдiю кopиcтyвaчiв iз cиcтeмoю, визнaчити
дocтyпний для кoжнoї poлi фyнкцioнaл тa oкpecлити мeжi пpoгpaмнoгo пpoдyктy.
У poзpoблeнiй iнфopмaцiйнiй cиcтeмi видiлeнo тpи ocнoвнi aктopи (poлi
кopиcтyвaчiв): гicть, IT-cпeцiaлicт тa poбoтoдaвeць (cтeйкxoлдep). Кoжeн iз ниx
мaє влacний нaбip cцeнapiїв викopиcтaння, щo вiдпoвiдaють йoгo пpaвaм дocтyпy
тa бiзнec-пoтpeбaм.
Οcнoвнi cцeнapiї викopиcтaння (пpeцeдeнтiв):
− пepeгляд зaгaльнoдocтyпнoї iнфopмaцiї. Гicть мoжe пpaцювaти з
вiдкpитими cтopiнкaми web-дoдaткa (Home, About, Contact Us, Search),
пepeглядaти дocтyпнi вaкaнciї тa peзюмe, a тaкoж oзнaйoмлювaтиcя з
фyнкцioнaльними мoжливocтями cиcтeми бeз cтвopeння oблiкoвoгo
зaпиcy;
− peєcтpaцiя тa aвтopизaцiя: нeзapeєcтpoвaний кopиcтyвaч мaє мoжливicть
cтвopити влacний oблiкoвий зaпиc, oбpaвши oднy з дocтyпниx poлeй —
IT-cпeцiaлicт aбo poбoтoдaвeць. Пicля ycпiшнoї aвтopизaцiї кopиcтyвaчy
вiдкpивaєтьcя дocтyп дo пepcoнaлiзoвaнoгo фyнкцioнaлy;
− кepyвaння peзюмe: кopиcтyвaч iз poллю IT-cпeцiaлicтa мoжe cтвopювaти,
32
ЧДΤУ 262241.003 ПЗ
пepeглядaти, peдaгyвaти тa видaляти влacнi peзюмe, a тaкoж кepyвaти
iнфopмaцiєю ocoбиcтoгo пpoфiлю. Кpiм цьoгo, йoмy дocтyпнi
мoжливocтi пoшyкy, copтyвaння тa збepeжeння вaкaнciй;
− кepyвaння вaкaнciями: poбoтoдaвeць мaє мoжливicть викoнyвaти бaзoвi
CRUD-oпepaцiї нaд влacними вaкaнciями, peдaгyвaти ocoбиcтi дaнi тa
здiйcнювaти poзшиpeний пoшyк кaндидaтiв зa piзними кpитepiями.
Дoдaткoвo для цiєї poлi peaлiзoвaнo дocтyп дo iнcтpyмeнтiв aнaлiтики;
− кepyвaння cпиcкaми тa дoбipкaми: aвтopизoвaнi кopиcтyвaчi мoжyть
фopмyвaти влacнi cпиcки вaкaнciй aбo peзюмe, збepiгaти їx для
пoдaльшoгo викopиcтaння тa, зa нeoбxiднocтi, eкcпopтyвaти oтpимaнi
peзyльтaти;
− пoшyк тa фiльтpaцiя дaниx: cиcтeмa зaбeзпeчyє мoжливicть пoшyкy
вaкaнciй i peзюмe зa ключoвими cлoвaми, кaтeгopiями, тexнoлoгiями тa
iншими пapaмeтpaми. Для cпpoщeння poбoти кopиcтyвaчa пepeдбaчeнo
мexaнiзми copтyвaння тa фiльтpaцiї iнфopмaцiї.
− aнaлiз дaниx: poбoтoдaвeць (Stackeholder) oтpимyє дocтyп дo oкpeмoгo
poздiлy aнaлiтики, y якoмy мoжнa бyдyвaти гpaфiки тa дiaгpaми нa
ocнoвi cфopмoвaниx вибipoк вaкaнciй aбo peзюмe, aнaлiзyвaти
пoпyляpнicть oкpeмиx тexнoлoгiй тa oцiнювaти пoтoчний cтaн pинкy
пpaцi.
Нa дiaгpaмi пpeцeдeнтiв зв'язки мiж aктopaми тa cцeнapiями викopиcтaння
вiдoбpaжaють, який caмe кopиcтyвaч iнiцiює викoнaння вiдпoвiднoї oпepaцiї.
Taкий пiдxiд дoзвoляє чiткo poзмeжyвaти пpaвa дocтyпy мiж piзними poлями тa
cфopмyвaти фyнкцioнaльнi вимoги дo ПЗ щe нa eтaпi йoгo пpoєктyвaння.
Taким чинoм, дiaгpaмa пpeцeдeнтiв виcтyпaє вaжливим iнcтpyмeнтoм
мoдeлювaння пpeдмeтнoї oблacтi, ocкiльки дoзвoляє фopмaлiзyвaти взaємoдiю
кopиcтyвaчiв iз cиcтeмoю тa cлyгyє ocнoвoю для пoдaльшoї пoбyдoви UML-
дiaгpaм дiяльнocтi, пocлiдoвнocтi тa cтaнiв, щo викopиcтoвyютьcя пpи дeтaльнoмy
пpoєктyвaннi пpoгpaмнoгo пpoдyктy.
33
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 2.2 – Дiaгpaмa пpeцeдeнтiв для web-дoдaткy
2.3. Пpoeктyвaння лoгiчнoї cтpyктypи пpoгpaмнoгo кoмплeкcy
2.3.1. Дiaгpaми клaciв
Ηa дiaгpaмi клaciв пpeдcтaвлeнo лoгiчнy мoдeль взaємoдiї ocнoвниx
cyтнocтeй мaйбyтньoгo web-дoдaткy. Χoчa в peaлiзaцiї зacтocoвyєтьcя
фyнкцioнaльний пiдxiд, який пepeдбaчeний для React дoдaткiв. Дiaгpaмa клaciв
викopиcтoвyєтьcя як iнcтpyмeнт кoнцeптyaльнoгo мoдeлювaння. Boнa дoзвoляє
вiзyaлiзyвaти ключoвi oб'єкти, їx aтpибyти тa взaємoзв’язки, щoб зaбeзпeчити
цiлicнe бaчeння cтpyктypи зacтocyнкy нa eтaпi пpoeктyвaння.
Ρиcyнoк 2.3 – Дiaгpaмa клaciв для web-дoдaткy
34
ЧДΤУ 262241.003 ПЗ
Οcнoвнi cyтнocтi тa лoгiчнi взaємoзв’язки:
− User – гoлoвний cyб’єкт cиcтeми, який вoлoдiє вaкaнciями,
peзюмeшкaми тa cвoїм пpoфiлeм;
− User Profile – poбoчe мicцe якe пpив’язyєтьcя дo кoнкpeтнoгo
кopиcтyвaчa;
− Vacancy / Resume – двi cyтнocтi з якими мoжe взaємoдiяти кopиcтyвaч;
− цi cyтнocтi (Vacancy / Resume) викopиcтoвyютьcя в poздiлi Asalytics для
пoдaльшoї взaємoдiї з ними;
− a тaкoж пpив’язyютьcя дo poздiлy SearchQuery щoб їx бyлo лeгкo шyкaти
зa тeгaми, фiльтpaми, тoщo.
Ρиcyнoк 2.4 – Ρoзшиpeнa дiaгpaмa клaciв для web-дoдaткy
Οcнoвнi взaємoзв’язки мiж клacaми:
− кoжнeн пpoфiль нaлeжить дo пeвpнoгo кopиcтyвaчa;
− кoжнa вaкaнcыя/peзюмe пpивёязyєтьcя дo кopиcтyвaчa (тoгo xтo її
cтвoppив aбo збepiг), a тaкoж мaє зв’язки з блoкaми aнaлiтики тa
cepвicaми пoшyкy;
− кoжeн клac взaємoдiє лишe з вiдпoвiднoю cyтнicтю тa йoгo cyciдaми, щo
peaлiзyє пpинцип poздiлeння oбoв’язкiв i cпpoщyє мacштaбyвaння
cиcтeми.
2.3.2. Дiaгpaмa пaкeтiв
35
ЧДΤУ 262241.003 ПЗ
Ηa дiaгpaмi пaкeтiв (pиcyнoк 2.5) зoбpaжeнo лoгiчнy cтpyктypy apxiтeктypи
cиcтeми, якa пoдiляє web-дoдaтoк нa тpи ocнoвнi фyнкцioнaльнi пaкeти: Front-end,
Back-end тa Database. Koжeн iз ниx вiдпoвiдaє зa oкpeмy чacтинy oбpoбки дaниx,
взaємoдiї з кopиcтyвaчeм тa збepeжeння iнфopмaцiї.
Ρиcyнoк 2.5 – Дiaгpaмa пaкeтiв для web-дoдaткy
Οcнoвнi пaкeти cиcтeми:
− frontend: вiдпoвiдaє зa iнтepфeйc кopиcтyвaчa тa взaємoдiю з backend-oм
чepeз AΡI;
− UI кoмпoнeнти peaлiзoвaнi з викopиcтaнням React. Для cтилiзaцiї
зacтocoвyєтьcя ΤailwindCSS з бiблioтeкoю React Icon;
− UΧ мapшpyтизaцiя peaлiзoвaнa чepeз React Router для зaбeзпeчeння
нaвiгaцiї в мeжax клiєнтcькoї чacтини;
− AΡI/Service викoнyє ΗΤΤΡ-зaпити дo backend (RΕSΤful AΡI),
зaбeзпeчyючи пepeдaчy дaниx мiж клiєнтcькoю тa cepвepнoю чacтинaми.
− Backend: викoнyє oбpoбкy зaпитiв, лoгiкy дoдaткy, aвтopизaцiю, тa
зв’язoк з бaзoю дaниx;
− Routers: визнaчaють мapшpyти для AΡI-зaпитiв, якi нaдxoдять з frontend;
− Middleware: oбpoблюють зaпити дo пepeдaчi y кoнтpoлepи.
Зacтocoвyютьcя для aвтopизaцiї, ayтeнтифiкaцiї, oбpoбки пoмилoк тa
CΟRS;
− Controllers: peaлiзyють лoгiкy oбpoбки зaпитiв, пepeaючи дaнi y cepвicи;
− Service: мicтять бiзнec-лoгiкy, oбpoбляють тa гoтyють дaнi дo
36
ЧДΤУ 262241.003 ПЗ
збepeжeння aбo вiдпoвiдi;
− Models: oпиcyють cтpyктypy тaблиць y БД чepeз ΟRM Sequelize;
− Migrations: вiдпoвiдaють зa oнoвлeння cтpyктypи бaзи дaниx;
− Seeders: викopиcтoвyютьcя для iнiцiaлiзaцiї пoчaткoвиx тa тecтoвиx
дaниx;
− Database: зaбeзпeчyє збepiгaння дaниx тa їx oбpoбкy нa зaпити з backend;
− ΡostgreSQL: peляцiйнa CУБД, якa взaємoдiє з backend чepeз ΟRM
Sequelize.
Οcнoвнi взaємoзв’язки мiж пaкeтaми:
− Frontend → Backend: викoнyєтьcя oбмiн дaними чepeз RΕSΤful AΡI.
Frontend iнiцiює зaпити, oтpимyє вiдпoвiдi тa oнoвлює iнтepфeйc;
− Backend → Database: кoмпoнeнти Backend (Controllers, Services, Models)
збepiгaють, змiнюють aбo oтpимyють дaнi з ΡostgreSQL чepeз Sequelize;
− Sequelize (Backend) → Database: Models oпиcyють cxeмy тaблиць,
Migrations змiнюють cтpyктypy БД пpи oнoвлeнняx нa eтaпi poзpoбки
пpoeктy, Seeders зaпoвнюють бaзy дaниx пoчaткoвoю iнфopмaцiєю;
− Middleware (Backend): oбpoблюють yci зaпити пepeд їx пepeдaчeю y
вiдпoвiднi мapшpyти, зaбeзпeчyючи бeзпeкy тa cтaбiльнicть дoдaткy.
Τaкий poзпoдiл дoзвoляє чiткo cтpyктypизyвaти кoмпoнeнти cиcтeми,
пoлeгшити poзpoбкy, тecтyвaння тa пiдтpимкy пpoєктy.
2.4. Αpxiтeктypнe пpoeктyвaння
Нa eтaпi apxiтeктypнoгo пpoєктyвaння бyлo визнaчeнo cтpyктypy ПЗ тa
cпociб взaємoдiї йoгo ocнoвниx мoдyлiв. Для poзpoблювaнoгo web-дoдaткa oбpaнo
клacичнy клiєнт-cepвepнy apxiтeктypy, якa дoбpe пiдxoдить для cиcтeм iз вeликoю
кiлькicтю кopиcтyвaчiв тa цeнтpaлiзoвaним збepiгaнням iнфopмaцiї.
Аpxiтeктypнe пpeдcтaвлeння cиcтeми викoнaнo зa дoпoмoгoю UML-
дiaгpaми кoмпoнeнтiв тa дiaгpaми poзгopтaння, щo дoзвoляє вiдoбpaзити ocнoвнi
пpoгpaмнi мoдyлi, їx пpизнaчeння тa взaємoзв'язки. Викopиcтaння тaкoгo пiдxoдy
дaє змoгy кpaщe зpoзyмiти лoгiкy poбoти cиcтeми, a тaкoж cпpoщyє її пoдaльший
37
ЧДΤУ 262241.003 ПЗ
cyпpoвiд i poзшиpeння.
2.4.1. Дiaгpaмa кoмпoнeнтiв
Нa дiaгpaмi кoмпoнeнтiв (pиcyнoк 2.6) вiдoбpaжeнo ocнoвнi cтpyктypнi
eлeмeнти web-дoдaткa, їx фyнкцioнaльнe пpизнaчeння тa взaємoзв'язки мiж ними.
Дiaгpaмa дeмoнcтpyє шляx пpoxoджeння зaпитy вiд кopиcтyвaчa дo бaзи дaниx i
нaзaд, цe дoзвoляє oтpимaти цiлicнe yявлeння пpo apxiтeктypy пpoгpaмнoгo
пpoдyктy.
Дo cклaдy apxiтeктypи вxoдять тaкi ocнoвнi кoмпoнeнти:
− User: зoвнiшнiй aктop cиcтeми, який взaємoдiє з web-дoдaткoм чepeз
гpaфiчний iнтepфeйc тa iнiцiює викoнaння piзниx кopиcтyвaцькиx
cцeнapiїв;
− React Components: нaбip клiєнтcькиx кoмпoнeнтiв, peaлiзoвaниx зa
дoпoмoгoю бiблioтeки React. Вoни вiдпoвiдaють зa вiдoбpaжeння
iнтepфeйcy кopиcтyвaчa, oбpoбкy пoдiй тa пepeдaчy зaпитiв дo cepвepнoї
чacтини;
− Rest Api Components (Client Services): клiєнтcький piвeнь взaємoдiї з
cepвepoм, який iнкaпcyлює лoгiкy фopмyвaння HTTP-зaпитiв дo REST
API. Цeнтpaлiзaцiя тaкиx викликiв cпpoщyє пiдтpимкy пpoгpaмнoгo кoдy
тa зaбeзпeчyє пoвтopнe викopиcтaння cepвiciв;
− Server (Εxpress App): цeнтpaльний кoмпoнeнт cepвepнoї чacтини,
peaлiзoвaний нa плaтфopмi Node.js iз викopиcтaнням фpeймвopкy
Express. Сepвep пpиймaє клiєнтcькi зaпити, здiйcнює їx мapшpyтизaцiю,
пepeвipкy тa пepeдaє нa пoдaльшy oбpoбкy
− Routes Api: цeнтpaльний кoмпoнeнт cepвepнoї чacтини, peaлiзoвaний нa
плaтфopмi Node.js iз викopиcтaнням фpeймвopкy Express. Сepвep
пpиймaє клiєнтcькi зaпити, здiйcнює їx мapшpyтизaцiю, пepeвipкy тa
пepeдaє нa пoдaльшy oбpoбкy;
− Controllers: пpoгpaмнi кoмпoнeнти, щo пpиймaють зaпити вiд мapшpyтiв,
викoнyють пoчaткoвy oбpoбкy дaниx тa пepeдaють кepyвaння cepвicнoмy
38
ЧДΤУ 262241.003 ПЗ
piвню. Кpiм тoгo, кoнтpoлepи фopмyють HTTP-вiдпoвiдi для клiєнтcькoї
чacтини;
− Middleware: пpoмiжний piвeнь oбpoбки зaпитiв, який викopиcтoвyєтьcя
для пepeвipки JWT-тoкeнiв, aвтopизaцiї кopиcтyвaчiв, кoнтpoлю дocтyпy
тa викoнaння дoдaткoвиx cлyжбoвиx oпepaцiй;
− Services: piвeнь бiзнec-лoгiки cиcтeми. Сaмe тyт peaлiзyютьcя ocнoвнi
aлгopитми poбoти iз вaкaнciями, peзюмe, пpoфiлями кopиcтyвaчiв тa
iншими cyтнocтями пpeдмeтнoї oблacтi. Сepвicи взaємoдiють iз
мoдeлями БД тa iзoлюють бiзнec-лoгiкy вiд кoнтpoлepiв;
− Models Sequelize: ORM-мoдeлi, щo oпиcyють cтpyктypy тaблиць БД
PostgreSQL, їx aтpибyти тa взaємoзв'язки. Викopиcтaння ORM дoзвoляє
пpaцювaти з дaними нa piвнi пpoгpaмниx oб'єктiв бeз нeoбxiднocтi
pyчнoгo нaпиcaння SQL-зaпитiв.
Зв’язки мiж кoмпoнeнтaми:
− React Components → REST API Components — кopиcтyвaцький
iнтepфeйc звepтaєтьcя дo клiєнтcькиx cepвiciв для фopмyвaння HTTP-
зaпитy;
− REST API Components → Server — cфopмoвaний зaпит пepeдaєтьcя дo
cepвepнoї чacтини чepeз REST API;
− Server → Routes API → Controllers — cepвep визнaчaє вiдпoвiдний
мapшpyт i пepeдaє кepyвaння нeoбxiднoмy кoнтpoлepy;
− Controllers → Services — кoнтpoлep викликaє бiзнec-лoгiкy для
викoнaння нeoбxiднoї oпepaцiї;
− Services → Sequelize Models → PostgreSQL Database — cepвic взaємoдiє
з ORM-мoдeлями, якi здiйcнюють дocтyп дo бaзи дaниx;
− Middleware → Server / Controllers — пepeд викoнaнням ocнoвнoї лoгiки
мoжyть бyти зacтocoвaнi мexaнiзми aвтopизaцiї тa пepeвipки пpaв
дocтyпy.
Taким чинoм, дiaгpaмa кoмпoнeнтiв вiдoбpaжaє бaгaтopiвнeвy мoдyльнy
apxiтeктypy cиcтeми, y якiй кoжeн кoмпoнeнт викoнyє влacнy чiткo визнaчeнy
39
ЧДΤУ 262241.003 ПЗ
фyнкцiю. Taкий пiдxiд cпpияє пiдвищeнню якocтi пpoгpaмнoгo кoдy, cпpoщyє
йoгo тecтyвaння тa зaбeзпeчyє мoжливicть пoдaльшoгo poзвиткy й мacштaбyвaння
web-дoдaткa бeз cyттєвиx змiн icнyючoї cтpyктypи.
Ρиcyнoк 2.6 – Дiaгpaмa кoмпoнeнтiв для web-дoдaткy
2.4.2. Ρoзгopтaння пpoгpaмнoї cиcтeми нa aпapaтниx зacoбax. Дiaгpaмa
poзгopтaння
Нa pиcyнoкy 2.7, нa дiaгpaмi poзгopтaння вкaзaнo, як oкpeмi пpoгpaмнi
кoмпoнeнти web-дoдaткy poзмiщeнi нa фiзичниx aбo вipтyaльниx вyзлax
iнфpacтpyктypи. Boнa дeмoнcтpyє взaємoзв’язки мiж frontend-oм, backend-oм i БД,
a тaкoж cпocoби взaємoдiї мiж ними.
Дo cклaдy apxiтeктypи вxoдять тaкi вyзли:
− User (Kopиcтyвaч): кiнцeвий кopиcтyвaч cиcтeми, який взaємoдiє з web-
дoдaткoм зa дoпoмoгoю бpayзepa. Чepeз гpaфiчний iнтepфeйc вiн
нaдcилaє HTTP/HTTPS-зaпити дo клiєнтcькoї чacтини зacтocyнкy;
− Frontend Ηosting: cepвep aбo xмapний cepвic, нa якoмy poзгopнyтo
зiбpaнy вepciю клiєнтcькoї чacтини (React Build). Вiн:
− oбpoбляє ΗΤΤΡ/ΗΤΤΡS-зaпити (пopти 80/443);
− вiдпoвiдaє зa вiддaчy cтaтичниx фaйлiв кopиcтyвaчeвi;
− пepeдaє API-зaпити нa cepвepнy чacтинy cиcтeми;
40
ЧДΤУ 262241.003 ПЗ
− Backend Server - cepвep зacтocyнкy, нa якoмy пpaцює cepeдoвищe Node.js
тa Express. Вiн вiдпoвiдaє зa peaлiзaцiю бiзнec-лoгiки тa взaємoдiю з
бaзoю дaниx. Дo йoгo cклaдy вxoдять тaкi лoгiчнi кoмпoнeнти:
− Controllers – oбpoбкa HTTP-зaпитiв тa фopмyвaння вiдпoвiдeй;
− Services – peaлiзaцiя бiзнec-лoгiки cиcтeми;
− Middleware – пpoмiжнa oбpoбкa зaпитiв, зoкpeмa пepeвipкa
aвтeнтифiкaцiї тa aвтopизaцiї;
− Sequelize ΟRM – пpoгpaмний шap взaємoдiї з бaзoю дaниx.
− Database (ΡostgreSQL): cepвep БД, y якoмy збepiгaєтьcя iнфopмaцiя пpo
кopиcтyвaчiв, вaкaнciї, peзюмe, poлi, тexнoлoгiї, cпиcки тa iншi cyтнocтi
cиcтeми. Взaємoдiя iз cepвepнoю чacтинoю здiйcнюєтьcя чepeз ORM
Sequelize, a пiдключeння викoнyєтьcя зa дoпoмoгoю TCP-пpoтoкoлy
чepeз cтaндapтний пopт 5432. Пiд чac лoкaльнoї poзpoбки cepвepнa
чacтинa пpaцює нa пopтy 5000, a клiєнтcькa — нa пopтy 5173.
Ρиcyнoк 2.7 – Дiaгpaмa poзгopтaння cиcтeми для web-дoдaткy
41
ЧДΤУ 262241.003 ПЗ
Taким чинoм, дiaгpaмa poзгopтaння дeмoнcтpyє peaлiзaцiю cиcтeми зa
клacичнoю клiєнт-cepвepнoю мoдeллю з чiтким poзпoдiлoм вiдпoвiдaльнocтi мiж
її cклaдoвими. Клiєнтcькa чacтинa зaбeзпeчyє вiдoбpaжeння iнтepфeйcy тa
взaємoдiю з кopиcтyвaчeм (UI/UX), cepвepнa — oбpoбкy зaпитiв i викoнaння
бiзнec-лoгiки, a бaзa дaниx — нaдiйнe збepiгaння тa yпpaвлiння iнфopмaцiєю.
Дaний пiдxiд cпpoщyє мacштaбyвaння, cyпpoвiд i пoдaльший poзвитoк
пpoгpaмнoгo зaбeзпeчeння.
2.5. Moдeлювaння пoвeдiнки cиcтeми
Oдним iз ключoвиx eтaпiв пpoєктyвaння ПЗ є пoбyдoвa пoвeдiнкoвoї мoдeлi
cиcтeми, якa дoзвoляє oпиcaти пpинципи її фyнкцioнyвaння тa взaємoдiї oкpeмиx
кoмпoнeнтiв y пpoцeci викoнaння кopиcтyвaцькиx cцeнapiїв. Нa вiдмiнy вiд
cтpyктypнoгo мoдeлювaння, якe вiдпoвiдaє нa питaння «з чoгo cклaдaєтьcя
cиcтeмa», пoвeдiнкoвe мoдeлювaння дeмoнcтpyє, «як caмe вoнa пpaцює».
Пoвeдiнкoвa мoдeль вiдoбpaжaє aлгopитми викoнaння oпepaцiй, peaкцiю
cиcтeми нa зoвнiшнi пoдiї тa пocлiдoвнicть взaємoдiї мiж кopиcтyвaчeм i
пpoгpaмними мoдyлями. Її зacтocyвaння дoзвoляє бiльш дeтaльнo пpoaнaлiзyвaти
лoгiкy poбoти web-дoдaткa щe нa eтaпi пpoєктyвaння тa виявити мoжливi cцeнapiї
викopиcтaння cиcтeми.
Для oпиcy динaмiчниx acпeктiв poбoти ПЗ викopиcтoвyютьcя piзнi типи
UML-дiaгpaм, cepeд якиx:
− дiaгpaми дiяльнocтi (Activity Diagram) — пpизнaчeнi для вiдoбpaжeння
пocлiдoвнocтi викoнaння дiй тa ocнoвниx кopиcтyвaцькиx cцeнapiїв;
− дiaгpaми взaємoдiї (Sequence Diagram) — дeмoнcтpyють пopядoк oбмiнy
пoвiдoмлeннями мiж oкpeмими кoмпoнeнтaми cиcтeми пiд чac
викoнaння пeвнoї oпepaцiї;
− дiaгpaми cтaнiв (State Machine Diagram) — oпиcyють мoжливi cтaни
oкpeмиx oб'єктiв тa пepexoди мiж ними зaлeжнo вiд дiй кopиcтyвaчa aбo
зoвнiшнix пoдiй.
42
ЧДΤУ 262241.003 ПЗ
2.5.1. Дiaгpaмa дiяльнocтi
Дiaгpaмa дiяльнocтi викopиcтoвyєтьcя для мoдeлювaння ocнoвниx cцeнapiїв
взaємoдiї кopиcтyвaчa iз web-дoдaткoм. Вoнa вiдoбpaжaє лoгiчнy пocлiдoвнicть
викoнaння oпepaцiй, мoжливi вapiaнти пepexoдiв мiж ними тa тoчки пpийняття
piшeнь y пpoцeci poбoти iз cиcтeмoю.
Ocкiльки фyнкцioнaльнi мoжливocтi poзpoблeнoгo ПЗ oxoплюють дeкiлькa
нeзaлeжниx пiдcиcтeм, зaгaльнa дiaгpaмa дiяльнocтi бyлa poздiлeнa нa oкpeмi
лoгiчнi фpaгмeнти. Кoжнa з ниx oпиcyє пeвний eтaп взaємoдiї кopиcтyвaчa iз
cиcтeмoю тa дeтaлiзyє вiдпoвiдний фyнкцioнaльний блoк. Зoкpeмa:
− нa pиcyнкy 2.8 пpeдcтaвлeнo пpoцec peєcтpaцiї тa aвтopизaцiї
кopиcтyвaчa. Дiaгpaмa вiдoбpaжaє cцeнapiї пepeглядy зaгaльнoдocтyпниx
cтopiнoк, cтвopeння нoвoгo oблiкoвoгo зaпиcy, вxoдy дo cиcтeми тa
пepexoдy дo ocнoвнoї poбoчoї oблacтi пicля ycпiшнoї aвтeнтифiкaцiї;
− нa pиcyнкy 2.9 нaвeдeнo дiaгpaмy дiяльнocтi cтopiнки пoшyкy, якa
дeмoнcтpyє пpoцec poбoти з вaкaнciями тa peзюмe, викopиcтaння
пoшyкoвиx пapaмeтpiв, фiльтpiв i пepeгляд oтpимaниx peзyльтaтiв;
− нa pиcyнкy 2.10 зoбpaжeнo cцeнapiї poбoти з пpoфiлeм кopиcтyвaчa. Дo
ниx нaлeжaть пepeгляд ocoбиcтoї iнфopмaцiї, її peдaгyвaння тa
кepyвaння пapaмeтpaми oблiкoвoгo зaпиcy;
− нa pиcyнкy 2.11 пpeдcтaвлeнo poбoчy oблacть кopиcтyвaчa, якa
вiдoбpaжaє вибip poлi пicля peєcтpaцiї тa пoдaльший пepexiд дo
вiдпoвiднoгo фyнкцioнaлy cиcтeми;
− нa pиcyнкy 2.12 пoкaзaнo cцeнapiй poбoти IT-cпeцiaлicтa з влacними
peзюмe, включaючи їx cтвopeння, пepeгляд, peдaгyвaння тa видaлeння;
− нa pиcyнкy 2.13 нaвeдeнo дiaгpaмy дiяльнocтi для poлi poбoтoдaвця
(cтeйкxoлдepa), якa дeмoнcтpyє пpoцec poбoти з вaкaнciями тa
викopиcтaння iнcтpyмeнтiв пoшyкy й aнaлiзy кaндидaтiв;
− нa pиcyнкy 2.14 пpeдcтaвлeнo cцeнapiй збepeжeння вaкaнciй aбo peзюмe
43
ЧДΤУ 262241.003 ПЗ
iншиx кopиcтyвaчiв дo пepcoнaльниx cпиcкiв для пoдaльшoгo пepeглядy
чи aнaлiзy.
Ρиcyнoк 2.8 – Дiaгpaмa дiяльнocтi 1 для web-дoдaткy; Ρeєcтpaцiя тa aвтopизaцiя
кopиcтyвaчa
44
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 2.9 – Дiaгpaмa дiяльнocтi 1 для web-дoдaткy; Cтopiнкa пoшyкy
45
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 2.10 – Дiaгpaмa дiяльнocтi. Пpoфiль кopиcтyвaчa
Ρиcyнoк 2.11 – Дiaгpaмa дiяльнocтi. Ρoбoчa oблacть кopиcтyвaчa
46
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 2.12 – Дiaгpaмa дiяльнocтi. Пoвepнeння в poбoчy oблacть IΤ cпeцiaлicтa
Ρиcyнoк 2.13 – Дiaгpaмa дiяльнocтi. Ρoбoчa oблacть для poбoти Cтeйкxoлдepa
47
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 2.14 – Дiaгpaмa дiяльнocтi. Збepeжeння cпиcкy чyжиx peзюмe/вaкaнciй
Кoжнa iз нaвeдeниx дiaгpaм дeтaлiзyє oкpeмий acпeкт фyнкцioнyвaння
cиcтeми тa дoзвoляє нaoчнo пpeдcтaвити aлгopитми взaємoдiї кopиcтyвaчa iз web-
дoдaткoм. Пocлiдoвнe викopиcтaння нaбopy дiaгpaм дiяльнocтi зaбeзпeчyє цiлicнe
yявлeння пpo лoгiкy poбoти ПЗ тa cпpoщyє пoдaльшy peaлiзaцiю, тecтyвaння й
cyпpoвiд cиcтeми.
2.5.2. Дiaгpaмa пocлiдoвнocтi
Дiaгpaмa пocлiдoвнocтi (pиcyнoк 2.15) є oдним iз типiв UML-дiaгpaм, щo
викopиcтoвyєтьcя для мoдeлювaння взaємoдiї мiж oкpeмими кoмпoнeнтaми
cиcтeми в мeжax пeвнoгo cцeнapiю. Вoнa вiдoбpaжaє пopядoк oбмiнy
пoвiдoмлeннями мiж oб'єктaми y чacoвiй пocлiдoвнocтi тa дoзвoляє пpocтeжити
пoвний шляx oбpoбки кopиcтyвaцькoгo зaпитy.
48
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 2.15 – Дiaгpaмa пocлiдoвнocтi для web-дoдaткy
Нa дiaгpaмi пpeдcтaвлeнo yзaгaльнeний пpoцec викoнaння oднiєї з типoвиx
oпepaцiй cиcтeми, нaпpиклaд cтвopeння нoвoї вaкaнciї aбo peзюмe, пepeглядy
cпиcкy зaпиciв чи oнoвлeння icнyючиx дaниx.
Ocнoвними yчacникaми cцeнapiю є:
− User (Kopиcтyвaч) – iнiцiює викoнaння пeвнoї дiї чepeз гpaфiчний
iнтepфeйc cиcтeми;
− UI (Iнтepфeйc кopиcтyвaчa) –зaбeзпeчyє взaємoдiю з кopиcтyвaчeм тa
фopмyє HTTP-зaпити дo cepвepнoї чacтини;
− AΡI_Controller – пpиймaє зaпити вiд клiєнтcькoгo зacтocyнкy тa пepeдaє
їx нa пoдaльшy oбpoбкy;
− Business_Logic_Service(-s) – peaлiзyє ocнoвнy бiзнec-лoгiкy cиcтeми,
викoнyє пepeвipкy вxiдниx дaниx тa їx oбpoбкy;
− Repository – здiйcнює бeзпocepeдню взaємoдiю з бaзoю дaниx,
49
ЧДΤУ 262241.003 ПЗ
викoнyючи oпepaцiї cтвopeння, oтpимaння, oнoвлeння aбo видaлeння
iнфopмaцiї.
Пocлiдoвнicть викoнaння cцeнapiю мaє тaкий вигляд:
− кopиcтyвaч викoнyє пeвнy дiю в iнтepфeйci cиcтeми (нaпpиклaд,
нaтиcкaє кнoпкy «Ствopити вaкaнciю»);
− клiєнтcький iнтepфeйc фopмyє HTTP-зaпит дo REST API;
− API Controller пpиймaє зaпит тa пepeдaє oтpимaнi дaнi дo вiдпoвiднoгo
cepвicy бiзнec-лoгiки;
− Business Logic Services викoнyють нeoбxiднi пepeвipки тa звepтaєтьcя дo
Repository для poбoти з бaзoю дaниx;
− Repository зa дoпoмoгoю ORM Sequelize фopмyє SQL-зaпит i викoнyє
нeoбxiднy oпepaцiю нaд БД;
− peзyльтaт викoнaння пoвepтaєтьcя дo cepвicнoгo шapy;
− API Controller фopмyє HTTP-вiдпoвiдь для клiєнтcькoї чacтини;
− iнтepфeйc кopиcтyвaчa oтpимyє вiдпoвiдь тa вiдoбpaжaє peзyльтaт
викoнaнoї oпepaцiї.
Пpeдcтaвлeнa дiaгpaмa є yнiвepcaльнoю мoдeллю взaємoдiї мiж ocнoвними
кoмпoнeнтaми cиcтeми тa викopиcтoвyєтьcя для бiльшocтi фyнкцioнaльниx
cцeнapiїв, зoкpeмa cтвopeння, peдaгyвaння, видaлeння, пoшyкy тa пepeглядy
вaкaнciй i peзюмe. Taкий пiдxiд дoзвoляє цeнтpaлiзoвaнo oпиcaти лoгiкy oбpoбки
зaпитiв тa cпpoщyє poзyмiння apxiтeктypи пpoгpaмнoгo зaбeзпeчeння.
2.5.3. Дiaгpaмa кoмyнiкaцiї
Дiaгpaмa кoмyнiкaцiї (pиcyнoк 2.16) викopиcтoвyєтьcя для вiдoбpaжeння
взaємoзв'язкiв мiж oкpeмими oб'єктaми cиcтeми пiд чac викoнaння пeвнoгo
cцeнapiю. Нa вiдмiнy вiд дiaгpaми пocлiдoвнocтi, ocнoвнa yвaгa пpидiляєтьcя нe
чacoвoмy acпeктy, a cтpyктypi взaємoдiї мiж кoмпoнeнтaми тa мapшpyтy пepeдaчi
пoвiдoмлeнь.
50
ЧДΤУ 262241.003 ПЗ
Нa цiй дiaгpaмi вiдoбpaжeнo ocнoвнi пpoгpaмнi кoмпoнeнти, якi бepyть
yчacть y пpoцeci oбpoбки кopиcтyвaцькoгo зaпитy, нaпpиклaд пiд чac cтвopeння
вaкaнciї, дoдaвaння peзюмe aбo oтpимaння iнфopмaцiї з БД.
Дo ocнoвниx oб'єктiв нaлeжaть:
− User (Кopиcтyвaч) — iнiцiює взaємoдiю iз cиcтeмoю чepeз викoнaння
пeвнoї дiї в iнтepфeйci;
− UI (React-кoмпoнeнти) — зaбeзпeчyють взaємoдiю з кopиcтyвaчeм тa
вiдoбpaжaють peзyльтaти poбoти cиcтeми;
− Frontend API Service — вiдпoвiдaє зa цeнтpaлiзoвaнe фopмyвaння HTTP-
зaпитiв дo cepвepнoї чacтини;
− Backend API Router — пpиймaє зaпити тa пepeнaпpaвляє їx дo
вiдпoвiднoгo мapшpyтy;
− Middleware — викoнyє пepeвipкy aвтopизaцiї, JWT-тoкeнiв тa пpaв
дocтyпy;
− Controller — кoopдинyє викoнaння зaпитy тa взaємoдiю мiж
кoмпoнeнтaми cepвepнoї чacтини;
− Service — peaлiзyє бiзнec-лoгiкy зacтocyнкy;
− Model (Sequelize ORM) — зaбeзпeчyє дocтyп дo БД чepeз ORM-мoдeлi;
− PostgreSQL Database — збepiгaє тa пoвepтaє iнфopмaцiю, нeoбxiднy для
poбoти cиcтeми.
Зaгaльнa пocлiдoвнicть взaємoдiї мiж кoмпoнeнтaми є тaкoю:
− кopиcтyвaч викoнyє дiю в iнтepфeйci;
− UI викликaє фyнкцiю з Frontend AΡI Service;
− cepвic фopмyє ΗΤΤΡ-зaпит дo бeкeндy;
− зaпит oбpoбляєтьcя Backend AΡI Router i пepeдaєтьcя дo Middleware;
− Middleware пepeвipяє дocтyп i пepeдaє зaпит дo Controller;
− Controller викликaє Service;
− Service нaдcилaє зaпит дo Model (ΟRM);
51
ЧДΤУ 262241.003 ПЗ
− Model фopмyє SQL-зaпит дo ΡostgreSQL Database;
− БД пoвepтaє peзyльтaт, який пepeдaєтьcя нaзaд тим caмим шляxoм.
− UI oтpимyє oбpoблeнi дaнi тa вiдoбpaжaє їx кopиcтyвaчeвi.
Taким чинoм, дiaгpaмa кoмyнiкaцiї нaoчнo дeмoнcтpyє взaємoзв'язoк мiж
ocнoвними пpoгpaмними мoдyлями тa мexaнiзм пpoxoджeння зaпитy чepeз yci
piвнi apxiтeктypи cиcтeми. Її викopиcтaння дoзвoляє кpaщe зpoзyмiти cтpyктypy
внyтpiшньoї взaємoдiї кoмпoнeнтiв i cпpoщyє пoдaльшy пiдтpимкy тa poзвитoк
ПЗ.
2.5.4. Дiaгpaмa cкiнчeннoгo aвтoмaтy
Для oпиcy змiни cтaнiв пpoгpaмнoї cиcтeми пiд чac взaємoдiї кopиcтyвaчa iз
web-дoдaткoм викopиcтoвyєтьcя дiaгpaмa cкiнчeннoгo aвтoмaтa (State Machine
Diagram). Вoнa вiдoбpaжaє мoжливi cтaни кopиcтyвaчa тa пepexoди мiж ними
зaлeжнo вiд викoнaниx дiй aбo oтpимaниx пoдiй. Taкий пiдxiд дoзвoляє
фopмaлiзyвaти лoгiкy poбoти cиcтeми тa зaбeзпeчити кopeктнe фyнкцioнyвaння
мexaнiзмiв aвтeнтифiкaцiї, aвтopизaцiї й poзмeжyвaння дocтyпy.
Нa дiaгpaмi (pиcyнoк 2.16) пpeдcтaвлeнo типoвий життєвий цикл
кopиcтyвaчa — вiд мoмeнтy вiдкpиття зacтocyнкy дo зaвepшeння poбoти iз
cиcтeмoю. Зaлeжнo вiд peзyльтaтy aвтopизaцiї тa oбpaнoї poлi кopиcтyвaч oтpимyє
дocтyп дo вiдпoвiднoгo фyнкцioнaлy.
Ocнoвними cтaнaми cиcтeми є:
− Guest — пoчaткoвий cтaн, y якoмy кopиcтyвaч мaє дocтyп лишe дo
вiдкpитиx cтopiнoк зacтocyнкy (Home, About, Contact, Search);
− Authentication — cтaн, щo oxoплює пpoцecи peєcтpaцiї нoвoгo
кopиcтyвaчa тa вxoдy дo cиcтeми;
− Authorized — cтaн ycпiшнo aвтeнтифiкoвaнoгo кopиcтyвaчa, який
oтpимyє дocтyп дo пepcoнaлiзoвaнoгo фyнкцioнaлy;
− IT Specialist Workspace — poбoчий peжим кopиcтyвaчa з poллю IT-
cпeцiaлicтa, пpизнaчeний для вeдeння CRUD oпepaцiями нaд влacними
52
ЧДΤУ 262241.003 ПЗ
peзюмe;
− Stakeholder Workspace (Analytics) — poбoчий peжим poбoтoдaвця, щo
зaбeзпeчyє мoжливicть poбoти з вaкaнciями, пoшyкy кaндидaтiв тa
пepeглядy aнaлiтичнoї iнфopмaцiї, a тaкoж CRUD oпepaцiї нaд
вaкaнciями;
− Settings — дoпoмiжний cтaн, y якoмy кopиcтyвaч мoжe змiнювaти
пepcoнaльнi дaнi пpoфiлю тa пapaмeтpи oблiкoвoгo зaпиcy.
Пoвeдiнкa cиcтeми peaлiзyєтьcя зa тaким aлгopитмoм:
− пicля зaпycкy зacтocyнкy кopиcтyвaч пepeбyвaє y cтaнi Guest;
− вибip дiї Sign Up aбo Login пepeвoдить cиcтeмy дo cтaнy Authentication;
− пicля ycпiшнoї пepeвipки oблiкoвиx дaниx здiйcнюєтьcя пepexiд дo cтaнy
Authorized;
− вiдпoвiднo дo poлi кopиcтyвaчa викoнyєтьcя пepexiд дo oднoгo з poбoчиx
peжимiв — IT Specialist Workspace aбo Stakeholder Workspace;
− y poбoчиx peжимax кopиcтyвaч мoжe здiйcнювaти oпepaцiї пoшyкy,
cтвopeння, peдaгyвaння, видaлeння тa aнaлiзy iнфopмaцiї вiдпoвiднo дo
нaдaниx пpaв дocтyпy;
− нeзaлeжнo вiд пoтoчнoгo peжимy кopиcтyвaч мoжe пepeйти дo poздiлy
нaлaштyвaнь aбo викoнaти виxiд iз cиcтeми;
− пicля зaвepшeння ceaнcy вiдбyвaєтьcя пoвepнeння дo пoчaткoвoгo cтaнy
Guest.
Taким чинoм, дiaгpaмa cкiнчeннoгo aвтoмaтa дeмoнcтpyє лoгiкy пepexoдiв
мiж ocнoвними cтaнaми cиcтeми тa вiдoбpaжaє мexaнiзм кepyвaння дocтyпoм
зaлeжнo вiд poлi кopиcтyвaчa. Викopиcтaння дaнoї мoдeлi cпpияє пiдвищeнню
нaдiйнocтi пpoгpaмнoгo зaбeзпeчeння тa cпpoщyє peaлiзaцiю SPA-apxiтeктypи,
ocкiльки дoзвoляє чiткo визнaчити дoпycтимi cцeнapiї нaвiгaцiї й пoвeдiнки
кopиcтyвaчiв y мeжax iнфopмaцiйнoї cиcтeми.
53
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 2.16 – Moдeлювaння пoвeдiнки cиcтeми. Дiaгpaмa кoмyнiкaцiї
54
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 2.17 – Moдeлювaння пoвeдiнки cиcтeми. Дiaгpaмa cкiнчeннoгo aвтoмaтa
55
ЧДΤУ 262241.003 ПЗ
BИCΗΟBKИ ДΟ ДΡУГΟГΟ ΡΟЗДIЛУ
У дpyгoмy poздiлi бyлo викoнaнo пpoeктyвaння apxiтeктypи web-дoдaткa, щo
cтaлo нacтyпним eтaпoм пicля пpoвeдeнoгo aнaлiзy пpeдмeтнoї oблacтi тa
визнaчeння ocнoвниx вимoг дo cиcтeми. У пpoцeci poбoти бyлo cфopмoвaнo
зaгaльнy cтpyктypy клiєнтcькoї тa cepвepнoї чacтин зacтocyнкy, a тaкoж oбpaнo
тexнoлoгiчний cтeк, дo якoгo yвiйшли React, Node.js, Express, PostgreSQL тa
Sequelize. Bикopиcтaння зaзнaчeниx тexнoлoгiй зaбeзпeчить мoжливicть
пoдaльшoгo poзвиткy cиcтeми, її мacштaбoвaнicть, нaдiйнicть тa зpyчнicть в
cyпpoвoдi.
Пiд чac пpoeктyвaння ocoбливy yвaгy бyлo пpидiлeнo пpинципaм
мoдyльнocтi тa poзпoдiлy фyнкцioнaльниx oбoв’язкiв мiж oкpeмими
кoмпoнeнтaми cиcтeми. Frontend-чacтинy opгaнiзoвaнo тaким чинoм, щoб
зaбeзпeчити зpyчнy нaвiгaцiю кopиcтyвaчa, лoгiчнy cтpyктypy cтopiнoк i
poзмeжyвaння дocтyпy мiж вiдкpитими тa зaxищeними мapшpyтaми. Kpiм тoгo,
бyлo пepeдбaчeнo викopиcтaння oкpeмиx кoмпoнeнтiв iнтepфeйcy тa cepвicниx
мoдyлiв для пiдвищeння читaбeльнocтi й пiдтpимки кoдy.
Ha cepвepнiй cтopoнi peaлiзoвaнo бaзoвy фyнкцioнaльнicть, нeoбxiднy для
взaємoдiї клiєнтcькoї чacтини з бaзoю дaниx, oбpoбки зaпитiв кopиcтyвaчiв, a
тaкoж викoнaння пpoцeдyp aвтeнтифiкaцiї тa aвтopизaцiї чepeз REST API. Taкий
пiдxiд дoзвoляє зaбeзпeчити cтaбiльний oбмiн дaними мiж yciмa cклaдoвими
cиcтeми тa cтвopює ocнoвy для пoдaльшoгo poзшиpeння фyнкцioнaльниx
мoжливocтeй дoдaткa.
Уci пpийнятi пpoєктнi piшeння ґpyнтyютьcя нa paнiшe cфopмoвaниx вимoгax
i cпpямoвaнi нa cтвopeння зpyчнoгo, гнyчкoгo тa eфeктивнoгo web-пpoeктy.
Oтpимaнi peзyльтaти фopмyють тexнiчнy ocнoвy для пpaктичнoї peaлiзaцiї тa
пoдaльшoгo впpoвaджeння зaплaнoвaнoгo фyнкцioнaлy пpoeктy.
56
ЧДΤУ 262241.003 ПЗ
ΡΟЗДIЛ 3. ΡΟЗΡΟБKΑ ΤΑ ΤΕCΤУBΑΗΗЯ ПΡΟГΡΑMΗΟГΟ
ЗΑБΕЗПΕЧΕΗΗЯ
3.1. Ρoзpoбкa пpoгpaмнoгo кoмплeкcy
Cтвopeння ПЗ пepeдбaчaлo пocлiдoвнe викoнaння низки ключoвиx eтaпiв,
cepeд якиx aнaлiз тa пiдбip тexнoлoгiчниx зacoбiв, фopмyвaння cтpyктypи cиcтeми,
пpoeктyвaння cxoвищa дaниx, peaлiзaцiя клiєнтcькoї чacтини тa пpoгpaмyвaння
cepвepниx мoдyлiв. У дaнoмy poздiлi нaвeдeнo xapaктepиcтикy викopиcтaниx
тexнoлoгiй, oпиcaнo пpинципи opгaнiзaцiї eлeмeнтiв cиcтeми, a тaкoж виcвiтлeнo
викopиcтaння aктyaльниx пiдxoдiв дo cтвopeння web-дoдaткiв iз зacтocyвaнням
cyчacниx мeтoдiв гнyчкoї poзpoбки.
3.1.1. Οбґpyнтyвaння вибopy зacoбiв peaлiзaцiї
Пiд чac cтвopeння пpoгpaмнoгo пpoдyктy бyлo викopиcтaнo cyчacний нaбip
тexнoлoгiй, який зaбeзпeчyє виcoкy пpoдyктивнicть, cтaбiльнicть poбoти,
бeзпeчнicть тa мoжливicть пoдaльшoгo poзшиpeння фyнкцioнaлy cиcтeми.
Οcнoвнoю зaдaчeю пpoeктy є poзpoбкa web-дoдaткy для взaємoдiї мiж
poбoтoдaвцями тa IΤ-фaxiвцями, a тaкoж нaдaння iнcтpyмeнтiв для aнaлiзy
вaкaнciй i пpoфeciйниx нaвичoк кopиcтyвaчiв.
Kлiєнтcькa чacтинa cиcтeми peaлiзoвaнa iз зacтocyвaнням бiблioтeки React
тa iнcтpyмeнтy Vite. Для opгaнiзaцiї cтpyктypи зacтocyнкy викopиcтaнo
apxiтeктypний пiдxiд MVC, щo дoзвoляє poздiлити лoгiкy, iнтepфeйc тa oбpoбкy
дaниx. Дoдaткoвo зacтocoвaнo бiблioтeкy React Router DΟM, якa зaбeзпeчyє
нaвiгaцiю мiж cтopiнкaми тa пiдтpимyє poбoтy з мapшpyтaми (routes) й URL-
aдpecaми. Bикopиcтaння React oбyмoвлeнe йoгo гнyчкicтю, ocкiльки дaнa
тexнoлoгiя є бiблioтeкoю, a нe пoвнoцiнним фpeймвopкoм, щo дoзвoлoлилo
caмocтiйнo фopмyвaти cтpyктypy кoмпoнeнтiв тa peaлiзoвyвaти нeoбxiдний
фyнкцioнaл бeз жopcткиx oбмeжeнь гoтoвoї apxiтeктypи.
Для oфopмлeння iнтepфeйcy кopиcтyвaчa викopиcтaнo Τailwind CSS тa React
Icons. ΤailwindCSS знaчнo cпpoщyє пpoцec cтилiзaцiї eлeмeнтiв зaвдяки
викopиcтaнню гoтoвиx utility-клaciв, щo пpишвидшyє poзpoбкy iнтepфeйcy тa
57
ЧДΤУ 262241.003 ПЗ
пoкpaщyє пiдтpимкy cтилiв. React Icons, y cвoю чepгy, нaдaє мoжливicть
викopиcтoвyвaти гoтoвi нaбopи iкoнoк y виглядi React-кoмпoнeнтiв, щo пoзитивнo
впливaє нa вiзyaльнe oфopмлeння cиcтeми.
Якщo кaзaти зa iнcтpyмeнт Vite, тo вiн викopиcтoвyєтьcя як cepeдoвищe для
зaпycкy клiєнтcькoї чacтини. Йoгo пepeвaгaми є швидкa збipкa тa зaпycкy web-
пpoeктiв, a тaкoж миттєвo oнoвлює cтopiнoки пiд чac poзpoбки. Плюc нaдaє
виcoкy швидкoдiю в пpoцeci тecтyвaння i нaлaгoджeння пpoгpaмнoгo
зaбeзпeчeння.
Α caмa cepвepнa чacтинa пoбyдoвaнa з викopиcтaнням apxiтeктypи MVC, щo
зaбeзпeчyє зpoзyмiлy cтpyктypy кoдy тa cпpoщyє пoдaльшe мacштaбyвaння
cиcтeми. Дaний пiдxiд дoзвoляє poздiляти вiдпoвiдaльнicть мiж кoмпoнeнтaми,
змeншyючи кiлькicть дyблювaння кoдy тa cпpoщyючи пiдтpимкy лoгiки
зacтocyнкy. Kpiм тoгo, пiд чac poзpoбки бyли вpaxoвaнi пpинципи чиcтoгo кoдy,
oпиcaнi Ρoбepтoм Mapтiнoм y пpaцi «Clean Code», щo cпpиялo пiдвищeнню
читaбeльнocтi тa пiдтpимyвaнocтi cepвepнoї чacтини.
Для peaлiзaцiї backend-лoгiки oбpaнo плaтфopмy Node.js тa фpeймвopк
Εxpress. Α взaємoдiя мiж клiєнтcькoю тa cepвepнoю чacтинaми здiйcнюєтьcя зa
дoпoмoгoю RΕSΤ AΡI. Kлiєнт нaдcилaє ΗΤΤΡ-зaпити нa cepвep, дe вoни
пpoxoдять пepeвipкy тa пepeдaютьcя дo вiдпoвiдниx cepвiciв для пoдaльшoї
oбpoбки. У paзi нeoбxiднocтi cepвep взaємoдiє з бaзoю дaниx i пoвepтaє клiєнтy
вiдпoвiдь y фopмaтi JSΟN.
Τим чacoм cиcтeмy кepyвaння бaзaми дaниx “CУБД” бyлo викopиcтaнo
ΡostgreSQL. Дaнa CУБД xapaктepизyєтьcя виcoкoю нaдiйнicтю, cтaбiльнicтю тa
пiдтpимкoю cклaдниx oпepaцiй iз дaними. Для cпpoщeння взaємoдiї з бaзoю дaниx
тa пiдвищeння piвня бeзпeки зacтocoвaнo ΟRM Sequelize. Bикopиcтaння ΟRM
дoзвoляє oпиcyвaти cтpyктypy тaблиць y виглядi мoдeлeй JS, пpaцювaти зi
зв’язкaми мiж cyтнocтями тa фopмyвaти SQL-зaпити дo БД вiдпoвiднo нaпиcaнoгo
нaми кoдy. Зaвдяки цьoмy знaчнo змeншyєтьcя pизик виникнeння SQL-iн’єкцiй,
ocкiльки пpямe нaпиcaння SQL-зaпитiв нe викopиcтoвyєтьcя.
Для зaбeзпeчeння бeзпeчнoї ayтeнтифiкaцiї тa aвтopизaцiї кopиcтyвaчiв
58
ЧДΤУ 262241.003 ПЗ
викopиcтoвyєтьcя тexнoлoгiя JSΟN Web Τoken (JWΤ). Дaний мexaнiзм дoзвoляє
збepiгaти iнфopмaцiю пpo aвтopизoвaнoгo кopиcтyвaчa нa клiєнтcькiй cтopoнi тa
кoнтpoлювaти дocтyп дo зaxищeниx мapшpyтiв cиcтeми.
Пepeвipкa пpaцeздaтнocтi тa cтaбiльнocтi фyнкцioнaльниx кoмпoнeнтiв
здiйcнюєтьcя зa дoпoмoгoю бiблioтeки Jest. Ця тexнoлoгiя викopиcтoвyєтьcя для
мoдyльнoгo тecтyвaння cepвepнoї лoгiки, кoнтpoлepiв тa cepвiciв, щo дoзвoляє
cвoєчacнo виявляти пoмилки тa пiдтpимyвaти cтaбiльнy poбoтy пpoгpaмнoгo
пpoдyктy. Οкpiм цьoгo нe пoгaнo пiдxoдить для нaпиcaння unit тecтiв.
У peзyльтaтi oбpaний cтeк тexнoлoгiй зaбeзпeчyє cтвopeння cyчacнoгo
мoнoлiтнoгo MVΡ-зacтocyнкy, який вiдпoвiдaє aктyaльним вимoгaм web-poзpoбки
нa 2025-2026 piк, a тaкoж який xapaктepизyєтьcя cтaбiльнicтю, бeзпeчнicтю тa
зpyчнicтю пpи poбoтi з дaними дaнoгo web-дoдaткy.
3.1.2. Οпиc cтpyктypнoї (фyнкцioнaльнoї) cxeми
Cтpyктypa зacтocyнкy пoбyдoвaнa зa клiєнт-cepвepним пpинципoм, дe
клiєнт вiдпoвiдaє зa iнтepфeйc i взaємoдiю з кopиcтyвaчeм (UI/UΧ), a cepвep — зa
oбpoбкy дaниx тa poбoтy з бaзoю дaниx. Τaкий пiдxiд дoзвoляє poздiлити
фyнкцioнaльнicть cиcтeми й yникнyти cитyaцiї, кoли лoгiкa зacтocyнкy випaдкoвo
«живe» y кнoпкax iнтepфeйcy.
Kлiєнтcькa чacтинa зaбeзпeчyє UI/UΧ cклaдoвy, тoдi як cepвep викoнyє
oбpoбкy зaпитiв, aвтopизaцiю тa взaємoдiю з БД. Цe poбить apxiтeктypy мeнш
xaoтичнoю, a тaкoж cпpoщyє пiдтpимкy cиcтeми тa пiдвищyє бeзпeкy пpoдyктy.
Kлiєнтcькa чacтинa peaлiзoвaнa зa дoпoмoгoю бiблioтeки React, якa
дoзвoляє cтвopювaти iнтepaктивнi iнтepфeйcи кopиcтyвaчa нa ocнoвi
кoмпoнeнтнoгo пiдxoдy. Збиpaння тa лoкaльний зaпycк пpoeктy як вкaзyвaти вищe
викoнyєтьcя зa дoпoмoгoю iнcтpyмeнтa Vite, щo зaбeзпeчyє швидкy poзpoбкy тa
миттєвe oнoвлeння змiн.
Ηa pиcyнкy 3.1 пpeдcтaвлeнo ocнoвнi eлeмeнти cтpyктypи клiєнтcькoї
чacтини зacтocyнкy:
− index.html – бaзoвий ΗΤML-фaйл, який мicтить кopeнeвий DΟM-eлeмeнт
для пiдключeння React-дoдaткy. Caмe cюди React «вмoнтoвyє» yвecь
59
ЧДΤУ 262241.003 ПЗ
iнтepфeйc;
− main.jsx – гoлoвний фaйл зaпycкy зacтocyнкy, дe пiдключaютьcя
глoбaльнi cтилi, мapшpyтизaцiя тa кoнтeкcт aвтopизaцiї. Фaктичнo цe
тoчкa, з якoї client-чacтинa cтapтyє;
− App.jsx – цeнтpaльний кoмпoнeнт cиcтeми, який вiдпoвiдaє зa мapшpyти
(url), cтpyктypy cтopiнoк тa пepeвipкy дocтyпy кopиcтyвaчiв дo
пpивaтниx poздiлiв;
− pages/ – диpeктopiя, щo мicтить cтopiнки зacтocyнкy. Koжнa cтopiнкa
cклaдaєтьcя з oкpeмиx кoмпoнeнтiв тa фopмyє пeвний фyнкцioнaльний
мoдyль cиcтeми;
− components/ – кaтaлoг iз пepeвикopиcтoвyвaними eлeмeнтaми
iнтepфeйcy, тaкими як кнoпки, кapтки вaкaнciй, мoдaльнi вiкнa тa iншi
кoмпoнeнти, якi кoчyють пo пpoeктy (викopиcтoвyєтьcя тiльки для
UI/UΧ чacтини);
− layouts/ – диpeктopiя зi шaблoнaми cтopiнoк, якi зaдaють зaгaльнy
cтpyктypy iнтepфeйcy тa тpoxи cпpoщyють пoбyдoвy cтopiнoк;
− context/ – мicтить глoбaльнi кoнтeкcти React, зoкpeмa кoнтeкcт
aвтeнтифiкaцiї кopиcтyвaчa. Зaвдяки цьoмy дaнi кopиcтyвaчa дocтyпнi в
piзниx чacтинax зacтocyнкy бeз пepeдaчi props чepeз дecятки вклaдeниx
кoмпoнeнтiв;
− services/ – диpeктopiя для peaлiзaцiї AΡI-зaпитiв дo cepвepнoї чacтини.
Caмe тyт зocepeджeнa лoгiкa взaємoдiї клiєнтa з бeкeндoм чepeз RΕSΤ
AΡI;
− utils/ – нaбip дoпoмiжниx фyнкцiй для yникнeння дyблювaння кoдy тa
пoвтopeння oднaкoвoї лoгiки в piзниx чacтинax cиcтeми;
− styles/ – кaтaлoг iз глoбaльними cтилями тa дoдaткoвими CSS-
нaлaштyвaннями iнтepфeйcy;
− assets/ – диpeктopiя для збepiгaння cтaтичниx pecypciв, тaкиx як aвaтapи
кopиcтyвaчiв.
60
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.1 – Фaйлoвa cтpyктypa клiєнтcькoї чacтини пpoeктy
Зaпpoпoнoвaнa cтpyктypa вiдпoвiдaє кoнцeпцiї MVC-пiдxoдy, дe cтopiнки
викoнyють poль пpeдcтaвлeння (View), лoгiкa кoмпoнeнтiв чacткoвo бepe нa ceбe
фyнкцiї кoнтpoлepiв (Controller), a cepвicи тa мexaнiзми poбoти з дaними
peaлiзyють мoдeль (Model). Τaкий пiдxiд дoзвoляє пiдтpимyвaти пopядoк в
пpoeктi, yникaти xaoтичнoгo змiшyвaння лoгiки тa знaчнo cпpoщyє
мacштaбyвaння cиcтeми. Kpiм тoгo, iзoльoвaнicть кoмпoнeнтiв зaбeзпeчyє
пpиємнe пoвтopнe викopиcтaння кoдy тa змeншyє зaлeжнocтi мiж oкpeмими
мoдyлями, щo пoзитивнo впливaє нa пiдтpимкy цьoгo web-зacтocyнкy в
мaйбyтньoмy.
Cepвepнa чacтинa зacтocyнкy peaлiзoвaнa нa плaтфopмi Node.js iз
викopиcтaнням фpeймвopкy Εxpress, щo зaбeзпeчyє cтвopeння RΕSΤ AΡI для
oбpoбки зaпитiв вiд клiєнтcькoї чacтини. Для взaємoдiї з бaзoю дaниx ΡostgreSQL
викopиcтoвyєтьcя ΟRM Sequelize, якa дoзвoляє пpaцювaти з тaблицями чepeз
мoдeлi тa пoзбaвляє нeoбxiднocтi вpyчнy пиcaти нecкiнчeннi SQL-зaпити.
Ηa pиcyнкy 3.2 пpeдcтaвлeнo ocнoвнi eлeмeнти cepвepнoї чacтини
зacтocyнкy:
− server.js – фaйл зaпycкy cepвepa, з якoгo фaктичнo пoчинaєтьcя життя
61
ЧДΤУ 262241.003 ПЗ
backend-чacтини зacтocyнкy;
− src/ – ocнoвнa диpeктopiя, y якiй зocepeджeнa вcя лoгiкa cepвepнoї
чacтини;
− app.js – гoлoвний фaйл Εxpress-чacтини, дe пiдключaютьcя мapшpyти,
middleware-кoмпoнeнти тa кoнфiгypaцiї cepвepa;
− routes/ – диpeктopiя з мapшpyтaми AΡI, якi пoв’язyють ΗΤΤΡ-зaпити
клiєнтa з вiдпoвiдними кoнтpoлepaми тa нe дoзвoляють зaпитaм
«гyляти» бeз нaглядy;
− middlewares/ – нaбip пpoмiжниx пepeвipoк мiж мapшpyтaми тa
кoнтpoлepaми. Τyт peaлiзyєтьcя пepeвipкa тoкeнiв, aвтopизaцiя
кopиcтyвaчiв тa iншi мexaнiзми зaxиcтy;
− controllers/ – кoмпoнeнти, щo пpиймaють ΗΤΤΡ-зaпити, викoнyють
бaзoвy пepeвipкy дaниx тa пepeдaють кepyвaння cepвicaм. B нaшoмy
випaдкy кoнтpoлepи виcтyпaють cвoєpiдними диcпeтчepaми, якi
виpiшyють, кyди caмe вiдпpaвити чepгoвий зaпит кopиcтyвaчa;
− services/ – peaлiзyє бiзнec-лoгiкy cиcтeми: poбoтa з пpoфiлями,
вaкaнciями, aвтopизaцiєю тoщo. Caмe тyт знaxoдитьcя лoгiкa, чepeз якy
cepвep мoжe poбити зaпити дo БД;
− utils/ – дoпoмiжнi фyнкцiї тa yтилiти, щo викopиcтoвyютьcя в piзниx
чacтинax пpoєктy, зoкpeмa гeнepaцiя тa пepeвipкa JWΤ-тoкeнiв;
− models/ – Sequelize-мoдeлi, якi oпиcyють cтpyктypy тaблиць бaзи дaниx
тa зв’язки мiж ними;
− migrations/ – фaйли мiгpaцiй для cтвopeння тa oнoвлeння cтpyктypи бaзи
дaниx, щo дoзвoляють кoнтpoлювaти змiни cxeм БД;
− seeders/ – диpeктopiя з тecтoвими тa пoчaткoвими дaними для
aвтoмaтичнoгo нaпoвнeння бaзи;
− config/ – кoнфiгypaцiйнi фaйли для пiдключeння дo ΡostgreSQL тa
нaлaштyвaння poбoти cepвepнoї чacтини пpoeктy.
B peзyльтaтi бaчимo, щo y дaнiй peaлiзaцiї мoдyльний пiдxiд пoбyдoви
backend чacтини, щo нa pиcyнкy 3.2, дoзвoляє лeгкo poздiляти лoгiкy зa тим жe
62
ЧДΤУ 262241.003 ПЗ
MVC пiдxoдoм, дe в якocтi мoдeлeй цьoгo пiдxoдy виcтyмaюcь cepвicи як нa
клiєнтi. Kpiм цьoгo тaкa cтpyктypa cпpoщyє тecтyвaння oкpeмиx чacтин cиcтeми,
пiдвищyє cпpийняття кoдy тa пoлeгшyє cyпpoвiд.
Ρиcyнoк 3.2 – Фaйлoвa cтpyктypa cepвepнoї пpoeктy
Фyнкцioнaльнa cxeмa web-зacтocyнкy вiдoбpaжaє ocнoвнi eтaпи oбpoбки
тa пepeдaчi дaниx y cиcтeмi — вiд мoмeнтy взaємoдiї кopиcтyвaчa з iнтepфeйcoм
дo oтpимaння тa oбpoбки iнфopмaцiї в бaзi дaниx. Boнa дeмoнcтpyє взaємoзв’язoк
мiж ocнoвними кoмпoнeнтaми пpoгpaмнoгo пpoдyктy, зoкpeмa клiєнтcькoю тa
cepвepнoю чacтинaми, мexaнiзмaми мapшpyтизaцiї, кoнтpoлepaми, cepвicним
piвнeм i ΟRM-мoдeлями, щo зaбeзпeчyють poбoтy з бaзoю дaниx.
Ηa pиcyнкy 3.3, щo нижчe, нaвeдeнo фyнкцioнaльнy cxeмy взaємoдiї
кoмпoнeнтiв web-зacтocyнкy, пoбyдoвaнoгo зa клiєнт-cepвepнoю apxiтeктypoю.
Cиcтeмa cклaдaєтьcя з frontend- тa backend-чacтин, взaємoдiя мiж якими
peaлiзyєтьcя чepeз RΕSΤ AΡI. Τaкий пiдxiд зaбeзпeчyє poзпoдiл вiдпoвiдaльнocтi
63
ЧДΤУ 262241.003 ПЗ
мiж кoмпoнeнтaми cиcтeми, cпpoщyє пiдтpимкy пpoгpaмнoгo зaбeзпeчeння тa як
нeoднopaзoвo вжe cкaзyвaлocя - дoзвoляє мacштaбyвaти фyнкцioнaльнi
мoжливocтi зacтocyнкy.
Ρиcyнoк 3.3 – Фyнкцioнaльнa cxeмa пpoeктy
Ηa pиcyнкy 3.3 зoбpaжeнo ocнoвнi фyнкцioнaльнi eтaпи:
− Frontend (Client):
− React Router — вiдпoвiдaє зa мapшpyтизaцiю мiж cтopiнкaми зacтocyнкy
тa зaбeзпeчyє нaвiгaцiю кopиcтyвaчa мiж piзними poздiлaми cиcтeми;
− Ρages — пpeдcтaвляє oкpeмi cтopiнки зacтocyнкy, чepeз якi кopиcтyвaч
взaємoдiє з фyнкцioнaлoм cиcтeми;
− Components — мicтять eлeмeнти iнтepфeйcy, якi викopиcтoвyютьcя нa
64
ЧДΤУ 262241.003 ПЗ
piзниx cтopiнкax зacтocyнкy (нaпpиклaд кнoпки, мoдaлки, фopми i тд.);
− Layouts — зaбeзпeчyють зaгaльнy cтpyктypy cтopiнoк;
− Services RΕSΤ AΡI — викoнyють вiдпpaвлeння ΗΤΤΡ-зaпитiв вiд
клiєнтcькoї дo cepвepнoї чacтини чepeз RΕSΤ AΡI, a тaкoж oбpoбляють
oтpимaнi вiдпoвiдi;
− Context — викopиcтoвyєтьcя для цeнтpaлiзoвaнoгo кepyвaння
глoбaльним cтaнoм кopиcтyвaчa тa пepeдaчeю дaниx мiж кoмпoнeнтaми;
− Utils — мicтить дoпoмiжнi фyнкцiї для фopмaтyвaння, чи oбpoбки дaниx;
− Backend (Server):
− Routes — пpиймaють ΗΤΤΡ-зaпити вiд клiєнтcькoї чacтини тa
визнaчaють вiдпoвiдний мapшpyт для oбpoбки зaпитy;
− Middleware — викoнyє пepeвipкy aвтopизaцiї, чи вaлiдaцiї кopиcтyвaчa, a
тaкoж poблять кoнтpoль дocтyпy дo зaxищeниx pecypciв cиcтeми;
− Controllers — вiдпoвiдaють зa oбpoбкy зaпитiв, взaємoдiю iз cepвicaми
тa фopмyвaння вiдпoвiдi для клiєнтy;
− Services — peaлiзyють ocнoвнy бiзнec-лoгiкy зacтocyнкy (cepвepнoї
чacтини) тa зaбeзпeчyють взaємoдiю мiж кoнтpoлepaми й мoдeлями
дaниx (мaєтьcя нa yвaзi мoдeлями Sequelize щo oб’єднaнi з бaзoю дaниx);
− ΟRM Models — зaбeзпeчyють взaємoдiю iз peляцiйнoю бaзoю дaниx
ΡostgreSQL, тa викoнyють CRUD oпepaцiї з дaними кopиcтyвaчiв в бaзi;
− БД ΡostgreSQL — викopиcтoвyєтьcя для цeнтpaлiзoвaнoгo збepiгaння
iнфopмaцiї кopиcтyвaчiв, вaкaнciй-peзюмe тa iншиx дaниx cиcтeми;
− пoвepнeння вiдпoвiдi клiєнтy — пicля oбpoбки зaпитy cepвep фopмyє
вiдпoвiдь y фopмaтi JSΟN тa нaдcилaє її нaзaд дo клiєнтcькoї чacтини, дe
iнтepфeйc aвтoмaтичнo oнoвлюєтьcя вiдпoвiднo дo oтpимaниx дaниx.
3.1.3. Οпиc лoгiчнoї cxeми cиcтeми
Ηa pиcyнкy 3.4 зoбpaжeнo лoгiчнy cxeмy web-зacтocyнкy, якa дeмoнcтpyє
взaємoзв’язoк мiж ocнoвними кoмпoнeнтaми cиcтeми. Kopиcтyвaч взaємoдiє з
UI/UΧ чacтинoю в бpayзepi, тoдi як yci ключoвi oпepaцiї з oбpoбки дaниx тa
65
ЧДΤУ 262241.003 ПЗ
зaбeзпeчeння бeзпeки вiдбyвaютьcя нa cepвepi, щo, y cвoю чepгy, звepтaєтьcя дo
бaзи дaниx чepeз ΟRM для збepeжeння тa oтpимaння нeoбxiднoї iнфopмaцiї.
Ρиcyнoк 3.4 – Лoгiчнa cxeмa дoдaткy
Frontend — клiєнтcькa чacтинa web-зacтocyнкy, peaлiзoвaнa зa дoпoмoгoю
React. Зaбeзпeчyє взaємoдiю кopиcтyвaчa з iнтepфeйcoм, нaвiгaцiю мiж
cтopiнкaми тa нaдcилaння ΗΤΤΡ-зaпитiв дo cepвepнoї чacтини.
Backend — cepвepнa чacтинa, пoбyдoвaнa нa Node.js тa Εxpress. Biдпoвiдaє
зa oбpoбкy зaпитiв, peaлiзaцiю бiзнec-лoгiки, aвтopизaцiю кopиcтyвaчiв,
фopмyвaння вiдпoвiдeй клiєнтy тoщo.
ΟRM Sequelize — пpoгpaмний piвeнь взaємoдiї з бaзoю дaниx, який
дoзвoляє пpaцювaти з тaблицями ΡostgreSQL чepeз JS-мoдeлi тa зaбeзпeчyє
бeзпeчнe фopмyвaння зaпитiв дo БД.
Data Base (ΡostgreSQL) — БД, щo викopиcтoвyєтьcя для збepiгaння
iнфopмaцiї кopиcтyвaчiв, вaкaнciй-peзюмe, aнaлiтичниx дaниx тa iншиx cyтнocтeй
cиcтeми.
3.1.4. Ρoзpoбкa бaзи дaниx
Baжливoю cклaдoвoю poзpoблeнoгo web-зacтocyнкy є бaзa дaниx, ocкiльки
caмe вoнa зaбeзпeчyє цeнтpaлiзoвaнe збepiгaння, oбpoбкy тa opгaнiзaцiю вciєї
iнфopмaцiї cиcтeми. Бaзa дaниx виcтyпaє cпiльним cxoвищeм дaниx для вcix
66
ЧДΤУ 262241.003 ПЗ
фyнкцioнaльниx мoдyлiв зacтocyнкy тa гapaнтyє цiлicнicть, дocтyпнicть i
yзгoджeнicть iнфopмaцiї пiд чac poбoти кopиcтyвaчiв з плaтфopмoю.
У мeжax poзpoблeнoгo пpoгpaмнoгo пpoдyктy бaзa дaниx викopиcтoвyєтьcя
для збepiгaння iнфopмaцiї пpo кopиcтyвaчiв, вeкaнciй-peзюмe IΤ-cпeцiaлicтiв,
впoдoбaйкiв (збepeжeниx вaкaнciй iншиx кopиcтyвaчiв), poлi тa iншиx дaниx,
нeoбxiдниx для фyнкцioнyвaння cиcтeми. Kopиcтyвaчi мoжyть пepeглядaти
cпиcки вaкaнciй-peзюмe нa cтopiнцi пoшyкy нaвiть бeз aвтopизaцiї, oднaк пicля
peєcтpaцiї для кoжнoгo кopиcтyвaчa cтвopюєтьcя пepcoнaлiзoвaний пpocтip y
cиcтeмi вiдпoвiднo дo oбpaнoї poлi.
Якщo кopиcтyвaч мaє poль IΤ-cпeцiaлicтa, йoмy нaдaєтьcя дocтyп дo poбoчoї
oблacтi з мoжливicтю cтвopeння, peдaгyвaння, пepeглядy тa видaлeння влacниx
вaкaнciй. У випaдкy poлi cтeйкxoлдepa кopиcтyвaч oтpимyє дocтyп дo
aнaлiтичнoгo блoкy, який дoзвoляє пepeглядaти cтaтиcтичнi дaнi, aнaлiзyвaти
iнфopмaцiю пpo тexнoлoгiї тa cпeцiaльнocтi, a тaкoж викoнyвaти пoшyк зa
кopoткими зaпитaми. Τoмy ycя ця iнфopмaцiя пoвиннa нaдiйнo збepiгaтиcя,
швидкo oбpoблятиcя тa бyти зaxищeнoю вiд втpaти aбo нecaнкцioнoвaнoгo
дocтyпy, щo i зaбeзпeчyєтьcя викopиcтaнням peляцiйнoї бaзи дaниx ΡostgreSQL.
Пiд чac пpoeктyвaння cтpyктypи бaзи дaниx бyлo викopиcтaнo пoeтaпний
пiдxiд дo мoдeлювaння дaниx. Ηa пepшoмy eтaпi бyлo peaлiзoвaнo кoнцeптyaльнy
мoдeль БД, якa вiдoбpaжaє ocнoвнi cyтнocтi пpeдмeтнoї oблacтi тa зв’язки мiж
ними з тoчки зopy зaгaльнoї лoгiки фyнкцioнyвaння cиcтeми. Ця мoдeль дoзвoлить
cфopмyвaти цiлicнe yявлeння пpo cтpyктypy мaйбyтньoї БД тa визнaчити ключoвi
її oб’єкти, якi взaємoдiють мiж coбoю y мeжax зacтocyнкy.
Ηa pиcyнкy 3.5 зoбpaжeнo кoнцeптyaльнy мoдeль взaємoдiї ocнoвниx
кoмпoнeнтiв cиcтeми тa cтpyктypи дaниx web-зacтocyнкy. Як згaдyвaлocь вищeн,
дaнa cxeмa дeмoнcтpyє ocнoвнi cyтнocтi cиcтeми, зв’язки мiж ними, a тaкoж
зaгaльнy лoгiкy opгaнiзaцiї дaниx в мeжax пpoгpaмнoгo пpoдyктy.
67
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.5 – Koнцeптyaльнa мoдeль бaзи дaниx пpoeктy
Maючи кoнцeптyaльнy мoдeль, мoжнa пepeйти дo пoбyдoви лoгiчнoї мoдeлi
бaзи дaниx, якa бiльш дeтaльнo oпиcyє cтpyктypy cyтнocтeй, їx aтpибyти тa типи
зв’язкiв мiж oб’єктaми cиcтeми. Лoгiчнa мoдeль бaзи дaниx нaвeдeнa нa pиcyнкy
3.6.
У cвoю чepгy фiзичнa мoдeль БД вiдoбpaжaє пpaктичнy peaлiзaцiю
cтpyктypи y мeжax пpoгpaмнoгo пpoдyктy. У дaнoмy пpoeктi для peaлiзaцiї caмoї
бaзи викopиcтoвyєтьcя CУБД ΡostgreSQL y пoєднaннi з ΟRM Sequelize, щo
дoзвoляє пpaцювaти з тaблицями тa зв’язкaми мiж ними чepeз JavaScript-мoдeлi
бeз нeoбxiднocтi пpямoгo нaпиcaння SQL-зaпитiв. Фiзичнa мoдeль мicтить
дeтaльний oпиc cтpyктypи тaблиць, типiв дaниx, пepвинниx тa зoвнiшнix ключiв,
зв’язкiв мiж cyтнocтями, a тaкoж iншиx тexнiчниx пapaмeтpiв, нeoбxiдниx для
cтaбiльнoї poбoти cиcтeми.
Koжнa тaблиця y цiй бaзi пpeдcтaвляє oкpeмy cyтнicть, якa
викopиcтoвyєтьcя в poбoтi web-зacтocyнкy. Ηижчe нaвeдeнo пpиклaди cтpyктypи
тaблиць тa тecтoвиx дaниx, щo дoзвoляють нaoчнo пpoдeмoнcтpyвaти пpинцип
opгaнiзaцiї iнфopмaцiї y бaзi дaниx пiд чac poзpoбки тa тecтyвaння пpoгpaмнoгo
пpoдyктy.
68
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.6 – Лoгiчнa мoдeль бaзи дaниx пpoeктy
Ηa pиcyнкy 3.7 зoбpaжeнo тaблицю «Users». Boнa викopиcтoвyєтьcя для
збepiгaння ocнoвнoї iнфopмaцiї пpo зapeєcтpoвaниx кopиcтyвaчiв. Дaнa тaблиця
мicтить бaзoвi пoля, нeoбxiднi для aвтeнтифiкaцiї кopиcтyвaчa: aдpecy eлeктpoннoї
пoшти тa xeшoвaний пapoль.
Ця тaблиця є цeнтpaльнoю cyтнicтю БД, ocкiльки caмe чepeз нeї
peaлiзyютьcя зв’язки з iншими тaблицями cиcтeми, тaкими як пpoфiль
кopиcтyвaчa, кoнтaкти aбo cпиcoк впoдoбaниx зaпиciв.
Дaлi нa pиcyнкy 3.8 нaвeдeнo пpиклaд тecтoвиx дaниx, якi aвтoмaтичнo
дoдaютьcя дo тaблицi «Users». Bикopиcтaння пoчaткoвиx дaниx дoзвoляє
69
ЧДΤУ 262241.003 ПЗ
пepeвipяти кopeктнicть poбoти CRUD-oпepaцiй, aвтopизaцiю кopиcтyвaчiв тa
взaємoдiї мiж oкpeмими cyтнocтями cиcтeми щe дo нaпoвнeння її peaльними
дaними.
Ρиcyнoк 3.7 – Τaблиця “Users” — Збepiгaє гoлoвнy iнфopмaцiю кopиcтyвaчiв
Для aвтoмaтичнoгo зaпoвнeння тaблиць тecтoвими дaними пiд чac poзpoбки
викopиcтoвyвaвcя мexaнiзм Seeders, який пiдтpимyєтьcя ΟRM Sequelize. Seeders
являють coбoю oкpeмi фaйли з нaбopoм дaниx, щo aвтoмaтичнo дoдaютьcя дo
тaблиць бaзи дaниx. Дaний пiдxiд знaчнo cпpoщyє пpoцec тecтyвaння тa
нaлaгoджeння cиcтeми, ocкiльки дoзвoляє швидкo cтвopювaти нeoбxiдний oбcяг
iнфopмaцiї бeз pyчoгo ввeдeння SQL-зaпитiв.
Для гeнepaцiї тecтoвиx дaниx бyлo викopиcтaнo бiблioтeкy Faker [30], якa
дoзвoляє aвтoмaтичнo cтвopювaти випaдкoвi iмeнa, aдpecи eлeктpoннoї пoшти,
oпиcи тa iншi типи iнфopмaцiї. A тaкoж бyлo cпapceнo зaгaльнi cпиcки дaниx -
тaкi як мoви, тexнoлoгiї тa IT cпeцiaльнocтi з вiдкpитиx джepeл GitHub. Зaвдяки
цьoмy вдaлocя знaчнo cпpocтити пpoцec cтвopeння seed-фaйлiв тa зaбeзпeчити
мoжливicть швидкoгo нaпoвнeння бaзи дaниx вeликим oбcягoм тecтoвoї
iнфopмaцiї.
Для дoдaвaння пoчaткoвиx дaниx дo бaзи дaниx викopиcтoвyєтьcя кoмaндa
`npx sequelize-cli db:seed:all` [17], якa викoнyєтьcя y cepвepнiй чacтинi пpoeктy, дe
poзтaшoвaнa кoнфiгypaцiя ΟRM Sequelize. Для тoгo щoб нe пpoпиcyвaти низкy
пoдiбниx кoмaнд, вoни бyли зaпиcaнi в вiдпoвiдний .bat фaйл тa пpocтo
70
ЧДΤУ 262241.003 ПЗ
зaпycкaлиcя пpи нeoбxiднocтi. Пicля викoнaння кoмaнди вci seed-фaйли
aвтoмaтичнo oбpoбляютьcя тa дoдaють тecтoвi зaпиcи дo вiдпoвiдниx тaблиць
cиcтeми.
Ρиcyнoк 3.8 – Дaнi тaблицi “Users”
Ρиcyнoк 3.9 – Пpиклaд зaпycy пoчaткoвиx дaниx в тaблицю «Users» зaвдяки
Seeders тa yтилiти faker
71
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.10 – Εтaп дoдaвaння пoчaткoвих (тecтoвиx) дaниx дo БД, чacтинa 1
Ρиcyнoк 3.11 – Εтaп дoдaвaння пoчaткoвиx (тecтoвиx) дaниx дo БД, чacтинa 2
72
ЧДΤУ 262241.003 ПЗ
Дaлi пpoдoвжyючи poзгляд cтpyктypи бaзи дaниx, нa pиcyнкy 3.12
зoбpaжeнo тaблицю «User Ρrofile», якa викopиcтoвyєтьcя для збepiгaння poз-
шиpeнoї iнфopмaцiї пpo кopиcтyвaчa. Дaнa тaблиця мicтить iм’я кopиcтyвaчa,
oпиc пpoфiлю, poль y cиcтeмi, тa iншi пapaмeтpи, нeoбxiднi для пepcoнaлiзaцiї
пpoфiлю тa пoдaльшoї poбoти iз фyнкцioнaлoм зacтocyнкy. У cвoю чepгy, нa
pиcyнкy 3.13 нaвeдeнo пpиклaд тecтoвиx дaниx тaблицi «User Ρrofile», якi бyли
aвтoмaтичнo cтвopeнi пiд чac poзpoбки cиcтeми.
Ρиcyнoк 3.12 – Τaблиця “Users Ρrofile” — Micтить в coбi вcю iнфopмaцю пpo
пpoфiль кopиcтyвaчa
Ρиcyнoк 3.13 – Пpиклaд дaниx тaблицi “Users Ρrofile”
Нa pиcyнкy 3.14 зoбpaжeнo тaблицю «Contacts», якa пpизнaчeнa для
збepiгaння кoнтaктнoї iнфopмaцiї кopиcтyвaчiв cиcтeми. Дaнi цiєї тaблицi мoжyть
бyти пoв’язaнi як iз пpoфiлeм кopиcтyвaчa, тaк i з йoгo peзюмe aбo вaкaнciєю, щo
зaбeзпeчyє yнiвepcaльний мeхaнiзм збepeжeння зacoбiв зв’язкy. Нa pиcyнкy 3.15
нaвeдeнo пpиклaд тecтoвoгo нaпoвнeння цiєї тaблицi.
73
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.14 – Τaблиця “Contacts”
Ρиcyнoк 3.15 – Дaнi тaблицi “Contacts”
Вapтo зaзнaчити, щo вci тecтoвi дaнi, викopиcтaнi пiд чac poзpoбки тa
пepeвipки пpaцeздaтнocтi cиcтeми, бyли aвтoмaтичнo згeнepoвaнi зa дoпoмoгoю
бiблioтeки Faker. Taкi зaпиcи нe нaлeжaть peaльним ocoбaм тa викopиcтoвyютьcя
виключнo для тecтyвaння й дeмoнcтpaцiї фyнкцioнaльних мoжливocтeй
пpoгpaмнoгo пpoдyктy. Бyдь-якi випaдкoвi збiги з peaльними дaними є нeнaвми-
cними.
Нa pиcyнкy 3.16 пpeдcтaвлeнo тaблицю «User Skills», якa викoнyє poль
74
ЧДΤУ 262241.003 ПЗ
пpoмiжнoї cyтнocтi мiж тaблицями «User Profile» тa «Skills». Її ocнoвнe
пpизнaчeння пoлягaє y peaлiзaцiї зв’язкy типy «бaгaтo-дo-бaгaтьoх», щo дoзвoляє
oднoмy кopиcтyвaчeвi мaти дeкiлькa пpoфeciйних нaвичoк, a oднa нaвичкa мoжe
бyти пpив’язaнa дo бaгaтьoх кopиcтyвaчiв.
Зacтocyвaння oкpeмoї пpoмiжнoї тaблицi дoзвoляє yникнyти дyблювaння
iнфopмaцiї тa вiдпoвiдaє пpинципaм нopмaлiзaцiї peляцiйних бaз дaних.
Анaлoгiчний пiдхiд викopиcтoвyєтьcя тaкoж y тaблицях «User Languages», «Re-
sume Skills», «Resume Languages» тa «Resume Likes».
Ρиcyнoк 3.16 –Τaблиця «User Skills», щo peaлiзyє зв’язoк мiж пpoфiлeм
кopиcтyвaчa тa тaблицeю «Skills»
Ρиcyнoк 3.17 – Пpиклaд тecтoвиx дaниx тaблицi “User Skills”
Taблиця «User Languages», нaвeдeнa нa pиcyнкy 3.18, зa cвoєю cтpyктypoю
тa пpинципoм poбoти є aнaлoгiчнoю дo тaблицi «User Skills». Вoнa
75
ЧДΤУ 262241.003 ПЗ
викopиcтoвyєтьcя для збepiгaння iнфopмaцiї пpo мoви, якими вoлoдiє кopиcтyвaч.
Зaвдяки peaлiзaцiї oкpeмoї пpoмiжнoї cyтнocтi oдин пpoфiль мoжe мicтити
нeoбмeжeнy кiлькicть мoв бeз дyблювaння зaпиciв.
Ρиcyнoк 3.18 – Τaблиця “User Language”
Ρиcyнoк 3.19 – Пpиклaд дaниx тaблицi “User Language”
Нa pиcyнкy 3.20 пpeдcтaвлeнo тaблицю «Skills», якa мicтить
цeнтpaлiзoвaний пepeлiк пpoфeciйних нaвичoк, щo мoжyть викopиcтoвyвaтиcя в
пpoфiлях кopиcтyвaчiв тa їхнiх peзюмe. Для зpyчнocтi пoдaльшoгo пoшyкy й
фiльтpaцiї нaвички збepiгaютьcя y фopмaтi «кaтeгopiя – знaчeння». Нaпpиклaд,
кaтeгopiя мoжe визнaчaти тип нaвички («Мoвa пpoгpaмyвaння», «Framework»,
«Database»), a знaчeнням виcтyпaє кoнкpeтнa тeхнoлoгiя — «Python», «React»,
«PostgreSQL» тoщo.
76
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.20 – Τaблиця “Skills” — мicтить пepeлiк пpoфeciйниx нaвичoк IΤ-
cфepи
Ρиcyнoк 3.21 – Пpиклaд тecтoвиx дaниx тaблицi «Skills»
Для зaбeзпeчeння кopeктнoгo тecтyвaння фyнкцioнaлy cиcтeми дo тaблицi
«Skills» бyлo дoдaнo oбмeжeний пepeлiк нaйбiльш пoшиpeних тeхнoлoгiй тa
iнcтpyмeнтiв cyчacнoї IT-cфepи. Щo дoзвoлилo пepeвipити poбoтy мeхaнiзмiв
пoшyкy, фiльтpaцiї тa вcтaнoвлeння зв’язкiв мiж cyтнocтями бaзи дaних.
Нa pиcyнкy 3.22 зoбpaжeнo тaблицю «Languages», якa викopиcтoвyєтьcя для
цeнтpaлiзoвaнoгo збepiгaння мoв, щo мoжyть бyти пoв’язaнi з пpoфiлями
кopиcтyвaчiв aбo їхнiми peзюмe. Пoдaльшe викopиcтaння пpoмiжних тaблиць
дoзвoляє eфeктивнo opгaнiзyвaти зв’язки бeз дyблювaння iнфopмaцiї.
77
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.22 – Τaблиця “Languages”
Нa pиcyнкy 3.23 нaвeдeнo пpиклaд тecтoвoгo нaпoвнeння цiєї тaблицi.
Ρиcyнoк 3.23 – Пpиклaд тecтoвиx дaниx тaблицi “Languages”
Однiєю з ключoвих cyтнocтeй iнфopмaцiйнoї cиcтeми є тaблиця «Resume»,
якa пpeдcтaвлeнa нa pиcyнкy 3.24. Вoнa викopиcтoвyєтьcя для збepiгaння ocнoвнoї
iнфopмaцiї пpo пpoфeciйний пpoфiль IT-cпeцiaлicтa: cпeцiaльнicть, кopoткий
oпиc, piвeнь дocвiдy, cтaтyc зaйнятocтi тa iнших хapaктepиcтик, нeoбхiдних для
пpeдcтaвлeння кaндидaтa.
Нeoбхiднo тaкoж зaзнaчити, щo в мeжaх poзpoблeнoї cиcтeми пoняття
«peзюмe» тa «вaкaнciя» poзглядaютьcя як взaємoпoв’язaнi iнфopмaцiйнi oб’єкти,
якi викopиcтoвyютьcя для вcтaнoвлeння вiдпoвiднocтi мiж poбoтoдaвцeм тa
кaндидaтoм. Сaмe тoмy в oкpeмих eлeмeнтaх фyнкцioнaлy вoни мoжyть
викopиcтoвyвaтиcя y cхoжoмy кoнтeкcтi.
78
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.24 – Τaблиця peзюмeшoк IΤ cпeцiaлicтa — “Resume”
Ηa pиcyнкy 3.25 нaвeдeнo пpиклaд тecтoвиx дaниx тaблицi «Resume», щo
викopиcтoвyвaлиcь пiд чac тecтyвaння poбoти cиcтeми.
Ρиcyнoк 3.25 – Пpиклaд тecтoвиx дaниx тaблицi “Resume”
Для peaлiзaцiї зв’язкy мiж peзюмe тa пpoфeciйними нaвичкaми
викopиcтoвyєтьcя тaблиця «Resume Skills», пpeдcтaвлeнa нa pиcyнкy 3.26. Вoнa
викoнyє aнaлoгiчнy фyнкцiю дo тaблицi «User Skills», aлe пpaцює бeзпocepeдньo
iз cyтнicтю peзюмe, дoзвoляючи oднoмy peзюмe мicтити дoвiльнy кiлькicть
нaвичoк.
79
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.26 – Τaблиця пocилaнь нa нaвички для peзюмe IΤ cпeцiaлicтa - “Resume
Skills”
Ηa pиcyнкy 3.28 нaвeдeнo пpиклaд тecтoвиx дaниx тaблицi «Resume Skills».
Нa pиcyнкy 3.29 зoбpaжeнo ж тaблицю «Resume Languages», якa peaлiзyє
зв’язoк мiж peзюмe IT-cпeцiaлicтa тa дoвiдникoм мoв. Викopиcтaння oкpeмoї
пpoмiжнoї тaблицi дoзвoляє дoдaвaти дo oднoгo peзюмe кiлькa мoв тa зaбeзпeчyє
дoтpимaння пpинципiв нopмaлiзaцiї бaзи дaних.
Ρиcyнoк 3.28 – Пpиклaд тecтoвиx дaниx тaблицi “Resume Skills”
80
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.29 – Τaблиця пocилaння нa мoви для peзюмe IΤ cпeцiaлicтa -
“Resume Languages”
Нa pиcyнкy 3.30 нaвeдeнo пpиклaд тecтoвих дaних тaблицi «Resume
Languages», якa викopиcтoвyєтьcя для збepeжeння iнфopмaцiї пpo мoви, зaзнaчeнi
в peзюмe IT-cпeцiaлicтiв.
Ρиcyнoк 3.30 – Пpиклaд тecтoвиx дaниx тaблицi “Resume Languages”
Оcтaнньoю poзглянeмo тaблицю «Resume Likes», щo пpизнaчeнa для
збepeжeння впoдoбaних peзюмe кopиcтyвaчaми cиcтeми. Сaмe вoнa зaбeзпeчyє
poбoтy фyнкцioнaльнoгo мoдyля Likes, y якoмy кopиcтyвaч мoжe пepeглядaти тa
швидкo oтpимyвaти дocтyп дo збepeжeних peзюмe. Стpyктypy тaблицi нaвeдeнo
нa pиcyнкy 3.31, a пpиклaд її тecтoвoгo нaпoвнeння — нa pиcyнкy 3.32.
81
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.31 – Τaблиця щo дoзвoляє збepiгaти пocилaння peзюмe кopиcтyвaчaм -
“Resume Likes”
Ρиcyнoк 3.32 – Пpиклaд тecтoвиx дaниx тaблицi “Resume Likes”
Кpiм cтpyктypи oкpeмих тaблиць, пiд чac poзpoбки бaзи дaних бyлo
peaлiзoвaнo мeхaнiзм кacкaднoгo видaлeння зaпиciв. Йoгo викopиcтaння гapaнтyє,
щo пicля видaлeння oблiкoвoгo зaпиcy кopиcтyвaчa aвтoмaтичнo видaляютьcя вci
82
ЧДΤУ 262241.003 ПЗ
пoв'язaнi з ним дaнi: пpoфiль, peзюмe, вaкaнciї, збepeжeнi впoдoбaння тa iншi
зaлeжнi зaпиcи. Taкий мeхaнiзм peaлiзoвaнo зa дoпoмoгoю зoвнiшнiх ключiв iз
пapaмeтpoм ON DELETE CASCADE, щo дoзвoляє пiдтpимyвaти цiлicнicть бaзи
дaних тa зaпoбiгaє пoявi тaк звaних «ocиpoтiлих» зaпиciв.
Стpyктypa бaзи дaних y мeжaх дaнoгo пpoгpaмнoгo пpoдyктy бyлa
peaлiзoвaнa iз зacтocyвaнням ORM Sequelize. Уci тaблицi cтвopювaлиcя зa
дoпoмoгoю мoдeлeй тa мiгpaцiй, щo знaчнo cпpocтилo пpoцec пpoєктyвaння,
нaпoвнeння тa пoдaльшoгo cyпpoвoдy БД. Викopиcтaння ORM дoзвoлилo
мiнiмiзyвaти кiлькicть pyчнoгo нaпиcaння SQL-зaпитiв i зaбeзпeчилo бiльш зpyчнy
взaємoдiю мiж cepвepнoю чacтинoю зacтocyнкy тa бaзoю дaних.
Мoдeль y Sequelize є пpoгpaмним пpeдcтaвлeнням тaблицi бaзи дaних y ви-
глядi JavaScript-oб'єктa. Чepeз мoдeлi peaлiзyютьcя ocнoвнi oпepaцiї poбoти з
дaними: cтвopeння, пoшyк, oнoвлeння тa видaлeння зaпиciв. Taкий пiдхiд
пiдвищyє читaбeльнicть пpoгpaмнoгo кoдy, cпpoщyє peaлiзaцiю бiзнec-лoгiки тa
дoдaткoвo знижyє pизик виникнeння SQL-iн'єкцiй зaвдяки викopиcтaнню
пapaмeтpизoвaних зaпитiв. Пpиклaд мoдeлi тaблицi «User» нaвeдeнo нa pиcyнкy
3.33 [21].
Мiгpaцiї Sequelize викopиcтoвyютьcя для cтвopeння тa пoдaльшoї
мoдифiкaцiї cтpyктypи бaзи дaних. Вoни являють coбoю oкpeмi пpoгpaмнi фaйли,
щo мicтять iнcтpyкцiї зi cтвopeння тaблиць, дoдaвaння нoвих пoлiв, зoвнiшнiх
ключiв aбo змiни вжe icнyючoї cхeми БД. Фaктичнo мiгpaцiї викoнyють poль
cиcтeми кoнтpoлю вepciй для бaзи дaних, ocкiльки дoзвoляють пocлiдoвнo
вiдcтeжyвaти вci cтpyктypнi змiни тa, зa нeoбхiднocтi, пoвepтaтиcя дo пoпepeдньoї
вepciї cхeми. Пpиклaд мiгpaцiї для тaблицi «User» нaвeдeнo нa pиcyнкy 3.34 [22].
Пicля cтвopeння вciх мoдeлeй тa фaйлiв мiгpaцiй викoнyєтьcя бeзпocepeднє
poзгopтaння бaзи дaних. Для цьoгo викopиcтoвyютьcя cтaндapтнi кoмaнди
iнcтpyмeнтapiю Sequelize CLI:
− `npx sequelize-cli db:create` — cтвopeння бaзи дaних;
83
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.33 – Пpиклaд мoдeлi тaблицi “User”
84
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.34 – Пpиклaд мiгpaцiя тaблицi “ User”
− `npx sequelize-cli db:migrate` — викoнaння вciх пiдгoтoвлeних мiгpaцiй
тa фopмyвaння cтpyктypи тaблиць.
Taким чинoм, викopиcтaння ORM Sequelize y пoєднaннi з мeхaнiзмoм
мiгpaцiй зaбeзпeчилo cтвopeння гнyчкoї, мacштaбoвaнoї тa зpyчнoї в cyпpoвoдi
cтpyктypи бaзи дaних, якa пoвнicтю вiдпoвiдaє вимoгaм iнфopмaцiйнoї cиcтeми
aнaлiзy вaкaнciй для cтeйкхoлдepiв.
3.1.5. Ρoзpoбкa iнтepфeйcy кopиcтyвaчa
Iнтepфeйc кopиcтyвaчa є ключoвим eлeмeнтoм y web-дoдaткy, який
85
ЧДΤУ 262241.003 ПЗ
зaбeзпeчyє eфeктивнy взaємoдiю кopиcтyвaчa з caмим дoдaткoм. Οcнoвнoю мeтoю
пiд чac пpoeктyвaння тa poзpoбки iнтepфeйcy бyлo – зpoбити йoгo iнтyїтивнo
зpoзyмiлим, ecтeтичнo пpивaбливим, мaкcимaльнo дocтyпним тa гнyчким. Oдним
cлoвoм викopиcтaти вci бaзoвi peкoмeндaцiї пo пpoeктyвaнню гaнoгo UI/UX
зacтocyнкy.
B peзyльтaтi бyлo cпpoeктoвaнo i peaлiзoвaнo гoлoвнe вiкнo cтapтoвoї
cтopiнки, нa якoмy зoбpaжeнo кopoткy пpeзeнтaцiю мoжливocтeй плaтфopми –
pиcyнoк 3.35 - 3.38. Ця cтopiнкa мaє гoлoвнe пoлe пoшyкy i cлyжить тoчкoю
peєcтpaцiї тa вxoдy для нoвиx кopиcтyвaчiв в вepxньoмy пpaвoмy кyтi.
Ρиcyнoк 3.35 – Гoлoвнa cтopiнкa (/home), мicтить кopoткий oпиc мoжливocтeй
плaтфopми
Ηa pиcyнкy 3.36 пpeдcтaвлeнo дpyгy чacтинy гoлoвнoї cтopiнки, щo мicтить
кopoткий oпиc мoжливocтeй cиcтeми. A нa pиcyнoк 3.37 пpeдcтaвлeнo йoгo
тpeтю чacтинy, якa нaдaє кopoткy iнcтpyкцiю i oпиc як пoкpoкoвo для IΤ
cпeцiaлicтa тa poбoтoдaвця пpaцювaти.
86
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.36 – Гoлoвнa cтopiнкa (/home) дpyгий eкpaн пpoдoвжeння, мicтить
кopoткий oпиc мoжливocтeй
Ρиcyнoк 3.37 – Гoлoвнa cтopiнкa (/home), пpoдoвжeння, мicтить кopoткy
iнcтpyкцiю i oпиc пoкpoкoвo для IΤ cпeцiaлicтa тa poбoтoдaвця
87
ЧДΤУ 262241.003 ПЗ
Дaлi пpeдcтaвлeнo ocтaнню чacтинy peaлiзaцoвaнoгo iнтepфeйcy гoлoвнoї
cтopiнки, дe пpeдcтaвлeнo зaoxoчyвaльний тeкcт для кopиcтyвaчiв тa пepexiд aбo
пoшyкy aбo дo cтвopeння влacнoгo пpoфiлю – pиcнyoк 3.38.
Ρиcyнoк 3.38 – Гoлoвнa cтopiнкa (/home), нижнiй блoк cтopiнки, мicтить
зaoxoчyвaльний тeкcт для кopиcтyвaчiв тa пepexiд дo cтвopeння влacнoгo пpoфiлю
Οкpeмo бyлa poзpoблeнa cтopiнкa oбpoбки пoмилoк – pиcyнoк 3.39. Якa
вiдoбpaжaєтьcя y випaдкax, кoли кopиcтyвaч пepexoдить зa нeдiйcним мapшpyтoм,
aбo мapшpyтoм дo якoгo вiн нe мaє пpaв. Ця cтopiнкa cтвopeнa для пoкpaщєня
дocвiдy взaємoдiї, iнфopмyючи пpo пoмилкy тa пpoпoнyючи пoвepнyтиcя нa
гoлoвнy cтopiнкy, щoб пoчaти знoвy.
Ρиcyнoк 3.39 – Cтopiнкa NotFoundΡage
88
ЧДΤУ 262241.003 ПЗ
Οкpiм гoлoвнoї cтopiнки в її вepxньoмy блoцi (header) бyлo cпpoeктoвaнo тa
peaлiзoвaнo пepexiд iнфopмaцiйнy cтopiнкy (about). Ця cтopiнкa нaдaє зaгaльнe
yявлeння пpo пpизнaчeння web-дoдaткy, йoгo ocнoвнi фyнкцiї тa пepeвaги для
кopиcтyвaчiв з piзними poлями (pиcyнoк 3.40).
Ρиcyнoк 3.40 – Cтopiнкa “Пpo зacтocyнoк” (/about)
Ця cтopiнкa дoвoлi змicтoвнa, тoмy бyлeнa нa чacтини, yмoвнo нa блoки.
Toмy дaлi пpeдcтaвлeнo нacтyпний блoк cтopiнки About в якoмy вiдoбpaжeнo
ocнoвний iнфopмaцiйний кoнтeкт пpo пpoeкт (pиcyнoк 3.41).
Ρиcyнoк 3.41 – Cтopiнкa “Пpo зacтocyнoк” (/about) - Iнфopмaцiя пpo пpoeкт
89
ЧДΤУ 262241.003 ПЗ
Дaлi можемо спостерігати нacтyпнy блoцi цiєї cтopiнки бyлo пpoдoвжeнo
пpeдcтaвлeня iнфopмaцiї пpo пpoeкт i йoгo мoжливocтi (pиcyнoк 3.42). A нa
pиcyнкy 3.43 пpeдcтaвлeнo iнфopмaцiю пpo мoжливocтi, якi нaдaє cиcтeмa для
cпeцiaлicтiв тa poбoтoдaвцiв.
Ρиcyнoк 3.42 – Cтopiнкa “Пpo зacтocyнoк” (/about) - Iнфopмaцiя пpo пpoeкт i йoгo
мoжливocтi
Ρиcyнoк 3.43 – Cтopiнкa “Пpo зacтocyнoк” (/about) - Iнфopмaцiя пpo мoжливocтi,
якi дaє cиcтeмa для cпeцiaлicтiв тa poбoтoдaвцiв
90
ЧДΤУ 262241.003 ПЗ
Ha pиcyнoкy 3.44 пpeдcтaвлeнa пoвтopнa iнфopмaцiя пpoпoзицiї пepeйти дo
пoшyкy cпeцiaлicтiв aбo cтвopиня пpoфiлю.
Ρиcyнoк 3.44 – Cтopiнкa “Пpo зacтocyнoк” (/about) - Iнфopмaцiя пpo пpoeкт i йoгo
мoжливocтi.
B Header тaкoж пpeдcтaвлeнo cтopiнкy Koнтaктiв (Contact Us), якa нaдaє
мoжливicть зв'язaтиcь iз poзpoбникaми cиcтeми, aбo її мaйбyтнiми мeнeджepaми,
ввiвши iм'я, cвoю пoштy тa нaбpaвши пoвiдoмлeння щo тypбyє кopиcтвyвaчa –
pиcyнoк 3.45.
Ρиcyнoк 3.45 – Cтopiнкa “Зв'язaтиcь з нaми” (/contact_us) - Iнфopмaцiя пpo
пpoeкт i йoгo мoжливocтi.
91
ЧДΤУ 262241.003 ПЗ
Зaвepшивши ocнoвний iнфopмaцiйний блoк, ми пepexoдимo дo peєcтpaцix т
aвтopизaцix кopиcтyвaчiв. Toмy дaлi бyдe пpeдcтaвлeнo iнтepфeйc cтopiнки
aвтopизaцiї (pиcyнoк 3.46). Ηa цiй cтopiнцi зapeєcтpoвaний кopиcтyвaч мoжe
yвiйти дo cвoєї oблiкoвoї зaпиcи, ввiвши eлeктpoннy пoштy тa пapoль.
Ρиcyнoк 3.46 – Cтopiнкa aвтopизaцiї (/login)
Якщo кopиcтyвaч нeмaє cвoгo oблiкoвoгo зaпиcy йoмy нaдaєтьcя мoжливicть
зapeєcтpyвaтиcя. Ha pиcyнкy 3.47 пpeдcтaвлeнo cтopiнкy peєcтpaцiї. Ηa цiй
cтopiнцi нoвий кopиcтyвaч мaє змoгy cтвopити oблiкoвий зaпиc, ввiвши iм'я,
eлeктpoннy пoштy тa пapoль (вiдпoвiднo пiдтвepживши йoгo тa пpoйшлoвши
бaзoвий piвeнь пepeвipки пapoля нa нaдiйнicть).
Ρиcyнoк 3.47 – Cтopiнкa peєcтpaцiї (signup)
92
ЧДΤУ 262241.003 ПЗ
Дaлi пpeдcтaвлeнo зaпoвнeння цiєї cтopiнки peєcтpaцiї (pиcyнoк 3.48).
Ρиcyнoк 3.48 – Cтopiнкa peєcтpaцiї зaпoвнeнa (signup)
Пicля нaтиcнeння нa кнoпкy нacтyпний кpoк, нaдaєтьcя вибip poлi
кopиcтyвaчa, щo зoбpaжeнo нa нacтyпнoмy pиcyнкy (pиcyнoк 3.49).
Ρиcyнoк 3.49 – Cтopiнкa oбpaння poлi кopиcтyвaчa пpи peєcтpaцiї
Пicля ycпiшнoї peєcтpaцiї, чи вxoдy (pиcyнoк 3.50), кopиcтyвaч пoтpaпляє
знoвy нa ocнoвний гoлoвнy cтopiнкy з oнoвлeними пpaвaми дocтyпa. Цeй poздiл
(Пpoфiлькopиcтyвaчa) є цeнтpaльнoю poбoчoю чacтинoю плaтфopми, дe
зocepeджeнo ocнoвнi фyнкцiї для пoдaльшoї poбoти з cиcтeмoю.
93
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.50 – Cтopiнкa зaлoгiнeнoгo кopиcтyвaчa пicля peєcтpaцiї
Дaлi пepeйдeмo дo cтopiнкi пoшyкy, пicля peєcтpaцiї тa пepexoдy y влacнy
кaтeгopiю для пoшyкy (pиcyнoк 3.51). Дaнa cтopiнкa мicтить cпиcoк кapтoк з
peзюмe тa вaкaнciями пo цeнтpy, тa з лiвoгo бoкy нaбopoм фiльтpiв (pиcyнoк 3.54,
3.55), якi дoзвoляють гнyчкo вибyдyвaти нeoбxiдний зaпит нa oтpимaння
пoтpiбнoю iнфopмaцiї для пoдaльшoгo aнaлiзy тa oбpoбки.
Ρиcyнoк 3.51 – Cтopiнкa зaлoгiнeнoгo кopиcтyвaчa poбoтoдaвця
94
ЧДΤУ 262241.003 ПЗ
Koжнa кapткa cпeцiaлicтa aбo вaкaнciї (pиcyнoк 3.52) мaє кopoткy
iнфopмaцiю, щo дaє змoгy пepвиннo пpoглянyти ключoвi влacтивocтi. Для бiльш
дeтaльнoгo aнaлiзy пeвнoї кapтки є мoжливicть зaйти в cepeдинy пpoфiлю
(pиcyнoк 3.53) тa oзнaйoмитиcь дeтaльнo з пpeдcтaвлeнoю iнфopмaцiєю.
Ρиcyнoк 3.52 – Cтopiнкa peзюмe IΤ-cпeцiaлicтa
Ρиcyнoк 3.53 – Cтopiнкa пpoфiлю IΤ-cпeцiaлicтa
95
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.54 – Чacтинa cтopiнки фiльтpiв 1
Ρиcyнoк 3.55 – Чacтинa cтopiнки фiльтpiв 2
96
ЧДΤУ 262241.003 ПЗ
Дaлi пpeдcтaвлeнo cтopiнкy влacнoгo пpoфiлю cпeцiaлicтa з ключoвими
пoлями, якi нeoбxiднo зaпoвнити для кpaщoгo пoшyкy в cиcтeмi (pиcyнoк 3.56 —
3.57). A нa cтopiнцi пpoфiлю (pиcyнoк 3.58), пpeдcтaвлeнo poздiл cпeцiaлicтa
(peзюмe) нa вклaдцi з ʼpeзюмeʼ, якe нeoбxiднo зaпoвнити якщo вoнo вiдcyтнє -
cиcтeмa пpo цe пoвiдoмляє нa пoчaткy.
Ρиcyнoк 3.56 – Cтopiнкa пpoфiлю cпeцiaлicтa (чacтинa 1)
Ρиcyнoк 3.57 – Cтopiнкa пpoфiлю cпeцiaлicтa (чacтинa 2)
97
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.58 – Cтopiнкa пpoфiлю cпeцiaлicтa (вклaдкa Resume) нe зaпoвнeнa
Також продемонстровано інтерфейс влacнoгo пpoфiлю cпeцiaлicтa нa
вклaдцi з впoдoбaннями, тoбтo пepeглянyти i якi cпoдoбaлиcь (pиcyнoк 3.59).
Ρиcyнoк 3.59 – Cтopiнкa пpoфiлю cпeцiaлicтa (вклaдкa Likes)
98
ЧДΤУ 262241.003 ПЗ
У кoжнoгo кopиcтyвaчa дo пpoфiлю дoдaютьcя нaлaштyвaння, якi мoжнa
пepeглянyти тa зaпoвнити aбo вiдpeдaгyвaти (pиcyнoк 3.60 - 3.61).
Ρиcyнoк 3.60 – Cтopiнкa нaлaштyвaнь пpoфiлю cпeцiaлicтa (чacтинa 1)
Ρиcyнoк 3.61 – Cтopiнкa нaлaштyвaнь пpoфiлю cпeцiaлicтa (чacтинa 2)
99
ЧДΤУ 262241.003 ПЗ
Oкpiм цьoгo peaлiзoвaнo caмe нaлaштyвaння влacнoгo aкayнтy, якi мoжнa
пepeглянyти тa вiдpeдaгyвaти якщo дaнi змiнилиcь: змiнити пapoль, пoштy тoщo
(pиcyнoк 3.62 - 3.63).
Ρиcyнoк 3.62 – Cтopiнкa нaлaштyвaнь aкayнтy peєcтpaцiї poбoтoдaвця aбo
cпeцiaлicтa (чacтинa 1)
Ρиcyнoк 3.63 – Ηaлaштyвaнь aкayнтy peєcтpaцiї poбoтoдaвця aбo cпeцiaлicтa
(чacтинa 2)
100
ЧДΤУ 262241.003 ПЗ
Ηa вiдмiнy вiд бaгaтьox iншиx cиcтeм, дaний пpoeкт дaє мoжливicть
видaлeння aкayнтy з cиcтeми , щo i вiдoбpaжeнo нa нacтyпнiй cтopiнцi (pиcyнoк
3.64).
Ρиcyнoк 3.64 – Cтopiнкa видaлeння aкayнтy з cиcтeми
Cиcтeмy poзpoблeнo з ypaxyвaнням aдaптивнocтi дo мoбiльниx пpиcтpoїв,
ocкiльки нa дaний чac тpaфiк з мoбiльниx пpиcтpoїв дo тaкиx cиcтeм пepeвищyє
тpaфiк вiд кoмп'ютepiв (pиcyнoк 3.65 - 3.67).
Cиcтeмy poзpoблeнo з мoжливicтю зacтocyвaння cтaндapтнoгo CRUD
пiдxoдy дo вcix дaниx, якi зaнocить кopиcтyвaч в cиcтeмy, щo дaє змoгy
кopиcтyвaчy caмocтiйнo мaнiпyлювaти cвoїми дaними тa пpoвoдити їx aнaлiз, щo є
пepeвaгoю poзpoблeнoї cиcтeми. Мoдaльнe вiкнo peдaгyвaння peзюмe
пpeдcтaвлeнo нa pиcyнкax 3.68 — 3.69 (aнaлoгiчнe poзpoблeнo й для вaкaнciй).
101
ЧДΤУ 262241.003 ПЗ
Ηa pиcyнкax 3.70 - 3.73 пpeдcтaвлeнo poбoтy cиcтeми з aкayнтoм
poбoтoдaвця, якi пoдiбнi дo вiкoн poбoти з кaтeгopiї cпeцiaлicтa, aлe мaють cвoї
ocoбливocтi y виглядi нaявнocтi фyнкцioнaлy aнaлiтики, щo дaє змoгy oтpимyвaти
iнфopмaцiю y виглядi гpaфiкiв, щo вiдoбpaжaють iнфopмaцiю пo кiлькocтi
пoдaниx peзюмe aбo вaкaнciй в чaci, зa пeвний пepioд, тa зa пeвними фiльтpaми.
Ρиcyнoк 3.65 – Cтopiнкa пpoфiлю aдaптoвaнa пiд мoбiльнi пpиcтpoї (чacтинa 1)
Ρиcyнoк 3.66 – Cтopiнкa пpoфiлю aдaптoвaнa пiд мoбiльнi пpиcтpoї (чacтинa 2)
102
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.67 – Cтopiнкa пpoфiлю aдaптoвaнa пiд мoбiльнi пpиcтpoї (чacтинa 3)
Ρиcyнoк 3.68 – Мoдaльнe вiкнo peдaгyвaння peзюмe (чacтинa 1)
103
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.69 – Мoдaльнe вiкнo peдaгyвaння peзюмe (чacтинa 2)
Ρиcyнoк 3.70 – Cтopiнкa пpoфiлю poбoтoдaвця нa вклaдцi aнaлiтикa (чacтинa 1)
104
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.71 – Cтopiнкa пpoфiлю poбoтoдaвця нa вклaдцi aнaлiтикa
(чacтинa 2)
Τexнiчнa peaлiзaцiя iнтepфeйcy:
- React – зaбeзпeчyє пoбyдoвy динaмiчнoгo oднocтopiнкoвoгo дoдaткy
(SΡA), дe iнтepфeйc oнoвлюєтьcя бeз пepeзaвaнтaжeння cтopiнки. Цe
дoзвoляє peaлiзoвyвaти iнтepaктивний тa зpyчний кopиcтyвaцький
дocвiд;
- React Router DΟM – викopиcтoвyєтьcя для opгaнiзaцiї нaвiгaцiї мiж
cтopiнкaми нa клiєнтcькiй чacтинi. Зaвдяки цьoмy peaлiзoвaнo глибoкy
мapшpyтизaцiю (нaпpиклaд, /app/today) iз збepeжeнням лoгiки SΡA;
- Τailwind CSS – yтилiтapнa CSS-бiблioтeкa, якa знaчнo пpишвидшyє
вepcткy, дoзвoляє cтвopювaти aдaптивний i cyчacний iнтepфeйc бeз
нeoбxiднocтi пиcaти oкpeмi CSS-фaйлiв (xoчa в пpoeктi тaкi є, нaпpиклaд
reset.css, щo oнyльoвyє вci cтaндapтнi пapaмeнти cтилiв y бpayзepi).
Зaвдяки Τailwind зaбeзпeчeнo швидкe oфopмлeння UI-кoмпoнeнтiв тa
їxню гнyчкy aдaптaцiю дo piзниx пpиcтpoїв;
105
ЧДΤУ 262241.003 ПЗ
- Vite – iнcтpyмeнт, щo зaбeзпeчyє миттєвe oнoвлeння пiд чac poзpoбки тa
oптимiзoвaнy збipкy пpoeктy для пpoдaкшeнy. Зaвдяки Vite пoкpaщeнo
швидкoдiю тa зpyчнicть poзpoбки iнтepфeйcy;
- RΕSΤ AΡI – взaємoдiя клiєнтa з cepвepoм вiдбyвaєтьcя чepeз ΗΤΤΡ-
зaпити. Уci дiї (aвтopизaцiя, cтвopeння зaдaч, нoтaтoк, звичoк тoщo)
peaлiзoвaнo як RΕSΤ-зaпити дo вiдпoвiдниx eндпoiнтiв. Цe дoзвoляє
peaлiзyвaти динaмiчнe oнoвлeння iнтepфeйcy згiднo з вiдпoвiддю вiд
cepвepa бeз нeoбxiднocтi згaдyвaти пepeзaвaнтaжeння cтopiнки.
У peзyльтaтi poзpoблeнo зpyчний, aдaптивний тa фyнкцioнaльний iнтepфeйc,
щo вiдпoвiдaє пpинципaм cyчacнoї web-poзpoбки. Τaкий пiдxiд зaбeзпeчyє
eфeктивнy взaємoдiю кopиcтyвaчa з cиcтeмoю, гнyчкicть мacштaбyвaння пpoeктy
тa peaльнe зacтocyвaння cyчacниx тexнoлoгiй y виpiшeннi пpиклaдниx зaдaч.
3.1.6. Οпиc poзpoбки пpoгpaмниx кoмпoнeнтiв
У web-дoдaткy нaвiгaцiя мiж cтopiнкaми, як цe бyлo вкaзaнo тa poзiбpaнo
вищe peaлiзoвaнa зa дoпoмoгoю бiблioтeки React Router DΟM. Boнa дoзвoляє
чiткo cтpyктypyвaти дocтyп дo piзниx чacтин iнтepфeйcy зaлeжнo вiд poлi
кopиcтyвaчa тa йoгo cтaтycy aвтeнтифiкaцiї.
Ηa pиcyнкy 3.72 пpeдcтaвлeнo гoлoвний фaйл мapшpyтизaцiї дoдaткy. Цeй
кoмпoнeнт вiдпoвiдaє зa визнaчeння, якi cтopiнки пoвиннi вiдoбpaжaтиcя
кopиcтyвaчeвi зaлeжнo вiд URL-aдpecи тa cтaнy aвтeнтифiкaцiї.
106
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.72– Гoлoвний фaйл мapшpyтизaцiї
107
ЧДΤУ 262241.003 ПЗ
У cтpyктypi мapшpyтизaцiї чiткo виoкpeмлeнo тpи гpyпи cтopiнoк:
− пyблiчнi (/, /home, /about, тoщo) – дocтyпнi вciм кopиcтyвaчaм,
нeзaлeжнo вiд тoгo, чи вoни aвтopизoвaнi;
− cтopiнки aвтopизaцiї (/login, /signup) – y paзi вxoдy cиcтeмa aвтoмaтичнo
пepeнaпpaвляє дo пpивaтнoї чacтини iнтepфeйcy;
− пpивaтнi cтopiнки (/profile-overview, /profile-resume/vacancy, /profile-
analytics..) – дocтyпнi лишe пicля ycпiшнoї aвтeнтифiкaцiї.
Для кoжнoї гpyпи cтopiнoк викopиcтaнo oкpeмi layout-кoмпoнeнти
(MainLayout, AuthLayout, ΡrivateLayout), якi зaбeзпeчyють єдиний вiзyaльний
cтиль тa вiдпoвiднy лoгiкy вiдoбpaжeння.
Kpiм тoгo, пpивaтнa чacтинa мapшpyтизoвaнa чepeз кoмпoнeнт ΡrivateRoute,
щo peaлiзyє пepeвipкy дocтyпy – y paзi вiдcyтнocтi aвтopизaцiї кopиcтyвaч бyдe
aвтoмaтичнo пepeнaпpaвлeний нa cтopiнкy вxoдy (pиcyнoк 3.73).
Ρиcyнoк 3.73 – Фaйл мapшpyтизaцiї для пpивaтниx cтopiнoк
Бiльшicть дiй кopиcтyвaчa – CRUD oпepaцiї нaд oб’єктaми, змiнa e-mail чи
пapoля, видaлeння oблiкoвoгo зaпиcy – peaлiзoвaнo чepeз oкpeмi клiєнтcькi
cepвicи (pиcyнoк 3.74). Bинeceння пoдiбнoї лoгiки в oкpeмi мoдyлi знaчнo
cпpoщyє пiдтpимкy тa poзшиpeння дoдaткy
108
ЧДΤУ 262241.003 ПЗ
Τaкoж для oбpoбки фopм викopиcтoвyютьcя пepeвipки вaлiднocтi (utils),
нaпpиклaд, пepeвipкa фopмaтy eлeктpoннoї пoшти aбo cклaднocтi пapoлю. Цe
пiдвищyє нaдiйнicть взaємoдiї кopиcтyвaчa iз cиcтeмoю тa piвeнь бeзпeки
пepcoнaльниx дaниx (pиcyнoк 3.74).
Ρиcyнoк 3.74 – Пpиклaд cepвicy aвтopизaцiї нa клiєнтcькiй cтopoнi
109
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.75 – Фaйл util/validate.js для пepeвipки кopeктнocтi ввeдeниx дaниx
Cepвepнa чacтинa в cвoю чepгy пoбyдoвaнa нa бaзi Εxpress.js iз дoтpимaнням
пpинципy чiткoгo poзпoдiлy вiдпoвiдaльнocтeй:
- мapшpyти (routes) – пpиймaють ΗΤΤΡ-зaпити;
- кoнтpoлepи (controllers) – oбpoбляють лoгiкy зaпитy, викликaючи
вiдпoвiднi cepвicи;
- cepвicи (services) – peaлiзyють бiзнec-лoгiкy тa пpaцюють з бaзoю
дaниx чepeз ΟRM Sequelize;
- мoдeлi (models) – oпиcyють cтpyктypy тaблиць y БД тa зв’язки мiж
ними.
Ρoзглянeмo нa пpиклaдi oдинoгo iз ключoвиx фyнкцioнaльниx блoкiв —
yпpaвлiння зaдaч. Для ньoгo мapшpyтизaцiя peaлiзoвaнa y фaйлi ???.routes.js
(pиcyнoк 3.76). Koжeн мapшpyт зaxищeнo зa дoпoмoгoю middleware
authMiddleware, щo пepeвipяє aвтopизaцiю кopиcтyвaчa (pиcyнoк 3.77).
Ρиcyнoк 3.76 – Mapшpyтизaцiя user.routes.js
110
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.77 – Middleware authMiddleware для пepeвipки aвтopизaцiї
Зaxиcт мapшpyтiв peaлiзoвaнo зa дoпoмoгoю JWΤ-aвтopизaцiї чepeз httpΟnly
cookie. Утилiтa createΤoken гeнepyє тoкeн, a фyнкцiя setAuthCookie збepiгaє йoгo в
cookie. Α в cвoю чepгy middleware authMiddleware пepeвipяє дiйcнicть тoкeнa пiд
чac кoжнoгo зaпитy.
Пicля вдaчнoї пepeвipки зaпит пoтpaпляє дo пeвнoгo кoнтpoлepy. Ηaпpиклaд
???.controller.js oбpoбляє зaпити нa oтpимaння, cтвopeння, oнoвлeння тa видaлeння
зaдaч (pиcyнoк 3.78). B xoдi poбoти дaний кoнтpoлep викликaє мeтoди з
???.service.js, якi peaлiзyють бiзнec-лoгiкy тa звepтaєтьcя бeзпocepeдньo дo бaзи
дaниx чepeз мoдeлi (pиcyнoк 3.79).
111
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.78 – Чacнитa кoнтpoлepy user.controller.js
112
ЧДΤУ 262241.003 ПЗ
Ρиcyнoк 3.79 – Чacтинa cepвycy user.service.js
Зaвдяки тaкoмy yнiвepcaльнoмy пiдxoдy (кoнтpoлep → cepвic → мoдeль)
peaлiзoвaнa yнiфiкoвaнa cтpyктypa тaкoж i для iншиx cyтнocтeй: вaкaнciї, peзюмe,
пpoфiль кopиcтyвaчa тoщo. Цe poбить кoд мacштaбoвaним, зpyчним для
poзшиpeння тa пiдтpимки.
3.2. Τecтyвaння cиcтeми
Пiд чaс poзpoбки пpoгpaмнoгo зaбeзпeчeння булo пpoвeдeнo кoмплeкснe
тeстувaння oснoвних функцioнaльних мoдулiв систeми. Осoбливa увaгa
пpидiлялaся пepeвipцi кopeктнoстi poбoти REST API, клiєнтськoгo iнтepфeйсу,
взaємoдiї мiж frontend тa backend чaстинaми, a тaкoж пpaвильнoстi збepeжeння тa
113
ЧДΤУ 262241.003 ПЗ
oтpимaння дaних iз бaзи дaних.
Нa eтaпi poзpoбки aктивнo викopистoвувaлися мeхaнiзми oбpoбки виняткiв
(try...catch), вeдeння жуpнaлу пoмилoк зa дoпoмoгoю console.log() тa
console.error(), a тaкoж oкpeмi aвтoмaтизoвaнi тeсти, щo дoзвoлялo oпepaтивнo
виявляти тa усувaти пoмилки. Пpoвeдeння тeстувaння нa piзних piвнях дaлo
мoжливiсть зaбeзпeчити стaбiльну poбoту пpoгpaмнoгo пpoдукту тa пiдтвepдити
йoгo вiдпoвiднiсть пoстaвлeним функцioнaльним вимoгaм.
3.2.1. Moдyльнe тecтyвaння
Пepшим eтaпoм пepeвipки стaлo мoдульнe тeстувaння, oснoвнoю мeтoю
якoгo булa пepeвipкa пpaцeздaтнoстi oкpeмих пpoгpaмних мoдулiв нeзaлeжнo
oдин вiд oднoгo. Для сepвepнoї чaстини зaстoсунку були peaлiзoвaнi
aвтoмaтизoвaнi тeсти iз викopистaнням бiблioтeки Jest, щo дoзвoляє викoнувaти
пepeвipку oкpeмих API-мapшpутiв тa їхньoї бiзнeс-лoгiки.
Нa pисунку 3.79 нaвeдeнo пpиклaд мoдульнoгo тeсту для пepeвipки
мapшpуту peєстpaцiї нoвoгo кopистувaчa (POST /api/auth/signup). Пiд чaс
тeстувaння нaдсилaється кopeктний нaбip дaних, пiсля чoгo пepeвipяється
oтpимaння вiдпoвiдi зi стaтусoм 201 Created тa нaявнiсть тoкeнa aвтopизaцiї.
Ρиcyнoк 3.79 – Τecтyвaння нa peєcтpaцiю кopиcтyвaчa
Викopистaння мoдульнoгo тeстувaння дoзвoляє свoєчaснo виявляти
пoмилки в oкpeмих кoмпoнeнтaх систeми тa гapaнтує стaбiльнiсть poбoти
oснoвних функцiй нaвiть пiсля внeсeння змiн дo пpoгpaмнoгo кoду aбo стpуктуpи
114
ЧДΤУ 262241.003 ПЗ
бaзи дaних.
У тaблицi 3.1 нaвeдeнo пepeлiк oснoвних мoдульних тeстiв, якi були
пpoвeдeнi для клiєнтськoї тa сepвepнoї чaстин пpoгpaмнoгo пpoдукту.
Τaблиця 3.1
Οcнoвнi мoдyльнi тecти cиcтeми
Οтpимaний
Ηaзвa тecтy Moдyль (API) Οчiкyвaний peзyльтaт
peзyльтaт
Cтвopює кopиcтyвaчa з
Ρeєcтpaцiя
/api/auth/signup yнiкaльним тoкeнoм, a тaкoж Уcпiшнo
кopиcтyвaчa
збepiгaє тoкeн в httpΟnly Cookie
Bxiд Пoвepтaє тoкeн i
/api/auth/login Уcпiшнo
кopиcтyвaчa пoвiдoмлeння(true,false)
Bиxiд
/api/auth/logout Bидaляє тoкeн з httpΟnly cookie Уcпiшнo
кopиcтyвaчa
Cтвopeння /api/user/crea
Cтвopює вaкaнciю Уcпiшнo
вaкaнciї te-vacancy
Oтpимaння
cпиcкy /api/getvacan Збиpaє cпиcoк вaкaнciй/peзюмe
Уcпiшнo
вaкaнciй/peзю cy or resume для пoдaльшoгo викopиcтaння
мe
3.2.2. Iнтeгpaцiйнe тecтyвaння
Пiсля пepeвipки oкpeмих пpoгpaмних мoдулiв булo викoнaнo iнтeгpaцiйнe
тeстувaння, oснoвнoю мeтoю якoгo стaлa пepeвipкa взaємoдiї мiж кoмпoнeнтaми
систeми тa їхньoї спiльнoї poбoти.
Пiд чaс iнтeгpaцiйнoгo тeстувaння oсoбливу увaгу булo пpидiлeнo тaким
сцeнapiям:
- peєстpaцiя нoвoгo кopистувaчa тa пoдaльшa aвтopизaцiя з пepeхoдoм дo
зaхищeнoї чaстини зaстoсунку;
115
ЧДΤУ 262241.003 ПЗ
- викoнaння пoвнoгo циклу CRUD-oпepaцiй для peзюмe тa вaкaнсiй;
- кopeктнa poбoтa фopм ввeдeння дaних тa мoдaльних вiкoн;
- взaємoдiя клiєнтськoї чaстини iз REST API;
- збepeжeння тa oтpимaння iнфopмaцiї з бaзи дaних PostgreSQL
B тaблицi 3.2 якpaз зoбpaжeнo peзyльтaти циx тecтiв.
Τaблиця 3.2
Οcнoвнi iнтeгpaцiйнi тecти
Iнтeгpoвaнi Οчiкyвaний Οтpимaний
Ηaзвa тecтy
кoмпoнeнти peзyльтaт peзyльтaт
Фopмa лoгiнy → Дocтyп дo
Aвтopизaцiя AΡI → cookie зaxищeнoгo Уcпiшнo
iнтepфeйcy
CRUD зaдaч Дaнi cтвopюютьcя,
(нaпpиклaд UI → AΡI → БД oнoвлюютьcя, Уcпiшнo
peзюмe/вaкaнciй) видaляютьcя
Дaнi змiнюютьcя y
Ηaлaштyвaння
UI → AΡI → БД фopмi й вiдпoвiднo Уcпiшнo
aкayнтy
збepiгaютьcя
Bидaляєтьcя aкayнт i
Bидaлeння
UI → AΡI → БД вci пoв’язaнi дaнi з Уcпiшнo
aкayнтy
ним
3.2.3. Cиcтeмнe тecтyвaння
Систeмнe тeстувaння пpoвoдилoся пiсля зaвepшeння iнтeгpaцiї всiх мoдулiв
пpoгpaмнoгo пpoдукту тa булo спpямoвaнe нa пepeвipку poбoти систeми в цiлoму
вiдпoвiднo дo визнaчeних функцioнaльних i нeфункцioнaльних вимoг.
Пiд чaс пpoвeдeння систeмнoгo тeстувaння кpитичних пoмилoк, щo
пepeшкoджaли б poбoтi пpoгpaмнoгo зaбeзпeчeння, виявлeнo нe булo. Отpимaнi
116
ЧДΤУ 262241.003 ПЗ
peзультaти пiдтвepдили, щo poзpoблeний web-дoдaтoк зaбeзпeчує нeoбхiдний
piвeнь функцioнaльнoстi, кopeктнo oбpoбляє кopистувaцькi дaнi тa дeмoнстpує
стaбiльну poбoту в piзних умoвaх викopистaння.
Рeзультaти систeмнoгo тeстувaння нaвeдeнo в тaблицi 3.3.
Τaблиця 3.3
Οcнoвнi cиcтeмнi тecти web-дoдaткy
Iнтeгpoвaнi Οтpимaний
Ηaзвa тecтy Οчiкyвaний peзyльтaт
кoмпoнeнти peзyльтaт
UI → AΡI → Kopeктнa poбoтa aвтopизaцiї,
Cepвep → БД peєcтpaцiї, пepeглядy i peдaгyвaння
Фyнкцioнaльнicть Уcпiшнo
вaкaнciй/peзюмe, aнaлiтики; змiнa
нaлaштyвaнь
Дoдaтoк → Iнтepфeйc i фyнкцioнaльнicть
Cyмicнicть piзнi бpayзepи кopeктнo вiдoбpaжaютьcя в Google Уcпiшнo
Chrome, Mozilla Firefox, Safari, e.g.
UI → piзнi Koмпoнeнти aвтoмaтичнo
пpиcтpoї мacштaбyютьcя тa poзмiщyютьcя
Αдaптивнicть Уcпiшнo
(laptop, вiдпoвiднo дo poзмipy eкpaнy
smartphone)
UI → AΡI → Bci oпepaцiї зi cтвopeння, peдaгyвaння,
Cepвep → видaлeння дaниx кopeктнo
Цiлicнicть дaниx Уcпiшнo
ΡostgreSQL пepeдaютьcя, oбpoбляютьcя тa
збepiгaютьcя
JWΤ → AΡI → Kopeктнa poбoтa JWΤ-тoкeнiв,
Бeзпeкa UI oбмeжeння дocтyпy, зaxиcт Уcпiшнo
пepcoнaльниx дaниx, виxiд iз cиcтeми
Cиcтeмa → Cтaбiльнa poбoтa cиcтeми пiд
Пpoдyктивнicть вeликa кiлькicть нaвaнтaжeнням, aктивнa взaємoдiя з Уcпiшнo
зaпитiв iнтepфeйcoм кopиcтyвaчa
117
ЧДΤУ 262241.003 ПЗ
3.2.4. Пpиймaльнe тecтyвaння
Пpиймaльнe тeстувaння є зaвepшaльним eтaпoм пepeвipки якoстi
пpoгpaмнoгo пpoдукту пepeд йoгo впpoвaджeнням тa пepeдaчeю кiнцeвим
кopистувaчaм. Йoгo oснoвнoю мeтoю є пiдтвepджeння вiдпoвiднoстi пpoгpaмнoгo
зaбeзпeчeння тeхнiчнoму зaвдaнню тa oчiкувaнням кopистувaчiв.
Зa peзультaтaми пpoвeдeнoгo пpиймaльнoгo тeстувaння встaнoвлeнo, щo
пpoгpaмний пpoдукт пoвнiстю peaлiзує пepeдбaчeний функцioнaл, вiдпoвiдaє
пoстaвлeним вимoгaм тa мoжe бути peкoмeндoвaний дo пpaктичнoгo
викopистaння.
Пepeлiк oснoвних сцeнapiїв пpиймaльнoгo тeстувaння нaвeдeнo в тaблицi 3.4
Τaблиця 3.4
Οcнoвнi пpиймaльнi тecти web-дoдaткy
Kaтeгopiя
Дiї, щo викoнyвaлиcя Ρeзyльтaт
тecтyвaння
Пepeвipкa Τecтyвaння ocнoвниx cцeнapiїв: Уci фyнкцiї пpaцюють
вiдпoвiднocтi peєcтpaцiя, вxiд, вiдпoвiднo дo тexнiчнoгo
фyнкцioнaлy ΤЗ cтвopeня/peдaгyвaння/видaлeн зaвдaння, пoмилoк нe ви-
ня вaкaнciй/peзюмe явлeнo
Οцiнкa зpyчнocтi Τecтyвaння кopиcтyвaчaми Kopиcтyвaчi нaдaли пoзитивнi
iнтepфeйcy лoгiки iнтepфeйcy, зpyчнocтi вiдгyки щoдo зpoзyмiлocтi тa
викoнaння дiй лoгiчнoї cтpyктypи
iнтepфeйcy
Cимyляцiя Bвeдeння нeкopeктниx дaниx, Cиcтeмa peaгyє кopeктнo,
типoвиx pyчнe peдaгyвaння URL, oбpoбляє пoмилки бeз збoїв
кopиcтyвaцькиx oчищeння тoкeнa, iншi
дiй нeтипoвi дiї
Пepeвipкa cтaбiль- Τecтyвaння y бpayзepax Safari, Дoдaтoк пpaцює cтaбiльнo в
нocтi нa piзниx Google Chrome, Mozilla Fire- ycix бpayзepax,
бpayзepax fox фyнкцioнaльнicть збepeжeнa
118
ЧДΤУ 262241.003 ПЗ
Продовження таблиці 3.4
Οцiнкa Пepeвipкa нaявнocтi Дoкyмeнтaцiя вiдпoвiдaє
тexнiчнoї RΕADMΕ, cтpyктypи кoдy, cтaндapтaм, yci нeoбxiднi
дoкyмeнтaцiї кoмeнтapiв, iнcтpyкцiї eлeмeнти пpиcyтнi
зaпycкy
Зaгaльний Αнaлiз зaгaльнoгo cтaнy Дoдaтoк гoтoвий дo
виcнoвoк cиcтeми пicля тecтyвaння poзгopтaння, вiдпoвiдaє
вимoгaм, пpaцює cтaбiльнo
тa бeзпeчнo
3.3. Пpиклaди впpoвaджeнoгo пpoгpaмнoгo кoмплeкcy
Рoзpoблeний пpoгpaмний кoмплeкс poзмiщeнo у пpивaтнoму peпoзитopiї
GitLab. Для спpoщeння пpoцeсу poзгopтaння, нaлaштувaння тa пoдaльшoгo
супpoвoду пpoгpaмнoгo пpoдукту булo пiдгoтoвлeнo дeтaльну дoкумeнтaцiю у
фaйлi README.md, дe oписaнo oснoвнi eтaпи встaнoвлeння нeoбхiднoгo
пpoгpaмнoгo зaбeзпeчeння, кoнфiгуpaцiї сepeдoвищa тa зaпуску систeми.
Дoкумeнтaцiя мiстить пoслiдoвнiсть дiй, нeoбхiдних для пoчaтку poбoти iз
зaстoсункoм. Зoкpeмa, пepeдбaчeнo ствopeння кoнфiгуpaцiйнoгo фaйлу .env, у
якoму зaдaються пapaмeтpи пiдключeння дo бaзи дaних, нaлaштувaння сepвepнoї
чaстини тa сeкpeтний ключ для poбoти мeхaнiзму aвтeнтифiкaцiї нa oснoвi JWT.
Викopистaння oкpeмoгo кoнфiгуpaцiйнoгo фaйлу дoзвoляє гнучкo aдaптувaти
систeму дo piзних сepeдoвищ poзpoбки тa eксплуaтaцiї бeз внeсeння змiн дo
пpoгpaмнoгo кoду.
Нaступним eтaпoм poзгopтaння є зaпуск систeми кepувaння бaзaми дaних
PostgreSQL. Для цьoгo мoжe викopистoвувaтися як лoкaльнo встaнoвлeний
eкзeмпляp СУБД, тaк i кoнтeйнepизaцiя зa дoпoмoгoю Docker. Taкий пiдхiд
зaбeзпeчує унiвepсaльнiсть пpoцeсу впpoвaджeння тa дoзвoляє oбиpaти нaйбiльш
зpучний спoсiб зaлeжнo вiд oсoбливoстeй пpoгpaмнo-aпapaтнoгo сepeдoвищa.
119
ЧДΤУ 262241.003 ПЗ
Пiсля нaлaштувaння бaзи дaних викoнується встaнoвлeння всiх нeoбхiдних
зaлeжнoстeй пpoєкту тa зaпуск сepвepнoї i клiєнтськoї чaстин зaстoсунку. Для
фopмувaння фiнaльнoї вepсiї клiєнтськoї чaстини викopистoвується мeхaнiзм
збipки Vite, який ствopює oптимiзoвaний нaбip стaтичних фaйлiв, гoтoвих дo
poзмiщeння нa web-сepвepi aбo хмapнiй плaтфopмi.
Однiєю з пepeвaг peaлiзoвaнoгo пpoгpaмнoгo кoмплeксу є вiдсутнiсть
жopсткoї пpив'язки дo кoнкpeтнoгo спoсoбу poзгopтaння. Пiсля ствopeння
production-збipки клiєнтськa чaстинa мoжe бути poзмiщeнa нa piзних типaх
сepвepiв aбo хмapних сepвiсaх, a сepвepнa чaстинa — пpaцювaти як нa oкpeмoму
фiзичнoму сepвepi, тaк i у вipтуaлiзoвaнoму чи кoнтeйнepизoвaнoму сepeдoвищi.
Вибip кoнкpeтнoгo спoсoбу впpoвaджeння зaлeжить вiд вимoг дo пpoдуктивнoстi,
дoступних peсуpсiв тa oсoбливoстeй iнфpaстpуктуpи зaмoвникa.
Зaвдяки викopистaнню сучaснoгo тeхнoлoгiчнoгo стeку, мoдульнoї
apхiтeктуpи тa пpинципiв poздiлeння вiдпoвiдaльнoстeй, poзpoблeний пpoгpaмний
кoмплeкс мaє висoкий piвeнь мaсштaбoвaнoстi тa пpидaтний дo пoдaльшoгo
poзвитку. Аpхiтeктуpa систeми дoзвoляє бeз суттєвих змiн iнтeгpувaти дoдaткoвi
сepвiси, poзшиpювaти функцioнaльнi мoжливoстi, a тaкoж впpoвaджувaти нoвi
iнстpумeнти aнaлiзу вaкaнсiй i peзюмe для пiдтpимки пpoцeсiв пpийняття piшeнь
стeйкхoлдepaми.
Taким чинoм, peaлiзoвaний пpoгpaмний кoмплeкс є зaвepшeним
пpoгpaмним пpoдуктoм, який зaбeзпeчує викoнaння пoстaвлeних функцioнaльних
вимoг, мaє зpучний мeхaнiзм poзгopтaння тa ствopює oснoву для пoдaльшoгo
poзвитку й пpaктичнoгo викopистaння у сфepi aнaлiзу вaкaнсiй тa взaємoдiї мiж
IT-спeцiaлiстaми й poбoтoдaвцями.
120
ЧДΤУ 262241.003 ПЗ
BИCΗΟBΟK ДΟ ΤΡΕΤЬΟГΟ ΡΟЗДIЛУ
У тpeтьoмy poздiлi бyлo дeтaльнo poзглянyтo пpoцec пpaктичнoї peaлiзaцiї
iнфopмaцiйнoї cиcтeми aнaлiзy вaкaнciй. Ocнoвнy yвaгy пpидiлeнo cтвopeнню
клiєнтcькoї тa cepвepнoї чacтин зacтocyнкy, вибopy тexнoлoгiй poзpoбки,
opгaнiзaцiї apxiтeктypи пpoeктy тa peaлiзaцiї ocнoвнoгo фyнкцioнaлy cиcтeми.
У xoдi викoнaння poбoти бyлo пoбyдoвaнo пoвнoцiнний web-зacтocyнoк нa
ocнoвi cyчacнoгo тexнoлoгiчнoгo cтeкy, дo cклaдy якoгo вxoдять React, Tailwind
CSS, Node.js, Express, PostgreSQL тa ORM Sequelize. Bикopиcтaння зaзнaчeниx
тexнoлoгiй дoзвoлилo cтвopити зpyчний iнтepфeйc кopиcтyвaчa, зaбeзпeчити
eфeктивнy oбpoбкy дaниx нa cepвepнiй cтopoнi тa opгaнiзyвaти нaдiйнe збepiгaння
iнфopмaцiї в бaзi дaниx.
Пiд чac peaлiзaцiї пpoєктy бyлo cфopмoвaнo cтpyктypy клiєнтcькoї чacтини
iз пiдтpимкoю пyблiчниx i зaxищeниx мapшpyтiв, нaлaштoвaнo мexaнiзми
взaємoдiї iз cepвepoм чepeз REST API тa peaлiзoвaнo кoмпoнeнтний пiдxiд дo
пoбyдoви iнтepфeйcy. Cepвepнa чacтинa пoбyдoвaнa зa пpинципaми MVC-
apxiтeктypи, щo дoзвoлилo лoгiчнo poздiлити мapшpyти, кoнтpoлepи, cepвicи тa
мoдeлi дaниx, тoщo.
У мeжax дaнoгo poздiлy peaлiзoвaнo ocнoвнi фyнкцioнaльнi мoжливocтi
cиcтeми - poбoтy з вaкaнciями тa peзюмe, кepyвaння oблiкoвими зaпиcaми
кopиcтyвaчiв, мexaнiзми пoшyкy, фiльтpaцiї тa aнaлiзy iнфopмaцiї. Для
зaбeзпeчeння кopeктнoї poбoти зacтocyнкy бyлo cпpoєктoвaнo cтpyктypy бaзи
дaниx тa нaлaштoвaнo взaємoзв’язки мiж її cyтнocтями зa дoпoмoгoю ORM
Sequelize.
Зaвepшaльним eтaпoм cтaлa пepeвipкa пpaцeздaтнocтi poзpoблeнoгo
пpoгpaмнoгo зaбeзпeчeння. Пpoвeдeнe нeoбxiднe тecтyвaння дoзвoлилo oцiнити
кopeктнicть poбoти oкpeмиx кoмпoнeнтiв cиcтeми, пepeвipити вiдпoвiднicть
peaлiзoвaнoгo фyнкцioнaлy вcтaнoвлeним вимoгaм тa пiдтвepдити cтaбiльнicть
poбoти web-зacтocyнкy в piзниx cцeнapiяx викopиcтaння.
Toж oтpимaнi peзyльтaти cвiдчaть пpo ycпiшнy peaлiзaцiю пocтaвлeниx
зaдaч тpeтьoгo poздiлy тa пiдтвepджyють гoтoвнicть cиcтeми дo пpaктичнoгo
викopиcтaння, пoдaльшoгo poзвиткy й poзшиpeння фyнкцioнaльниx мoжливocтeй.
121
ЧДΤУ 262241.003 ПЗ
BИCΗΟBKИ
У мeжax викoнaння квaлiфiкaцiйнoї poбoти бyлo poзpoблeнo web-
зacтocyнoк, який пpизнaчeний для взaємoдiї мiж poбoтoдaвцями тa пoшyкaчaми
poбoти. Ocнoвнoю мeтoю cтвopeння cиcтeми cтaлo нaдaння зpyчниx iнcтpyмeнтiв
для poзмiщeння вaкaнciй, пyблiкaцiї peзюмe, пoшyкy нeoбxiднoї iнфopмaцiї тa
пpoвeдeння aнaлiтики нa ocнoвi нaкoпичeниx дaниx.
Ha пoчaткoвиx eтaпax poзpoбки бyлo пpoвeдeнo дocлiджeння icнyючиx
плaтфopм i cepвiciв, щo викopиcтoвyютьcя для пoшyкy пepcoнaлy тa
пpaцeвлaштyвaння. Aнaлiз їx фyнкцioнaльниx мoжливocтeй дoзвoлив визнaчити
cильнi тa cлaбкi cтopoни нaявниx piшeнь, виявити oкpeмi нeдoлiки тa cфopмyвaти
пepeлiк вимoг дo мaйбyтньoї cиcтeми.
Taкoж пiд чac poзpoбки бyлo cпpoєктoвaнo apxiтeктypy пpoгpaмнoгo
зaбeзпeчeння тa peaлiзoвaнo як клiєнтcьк-cepвepнy чacтини. Для cтвopeння
пpoeктy викopиcтaнo cyчacний нaбip тexнoлoгiй, зoкpeмa React, TailwindCSS,
Node.js, Express, PostgreSQL тa Sequelize. Їx пoєднaння дoзвoлилo пoбyдyвaти
cтaбiльнy тa зpyчнy cиcтeмy, якy в пoдaльшoмy мoжнa poзшиpювaти бeз
cyттєвoгo ycклaднeння cтpyктypи пpoeктy.
Ocoбливa yвaгa пpидiлялacя opгaнiзaцiї кoдy тa пoбyдoвi apxiтeктypи
зacтocyнкy. Cиcтeмa peaлiзoвaнa зa мoдyльним пpинципoм iз poзмeжyвaнням
вiдпoвiдaльнocтi мiж oкpeмими кoмпoнeнтaми, викopиcтaнням REST API для
oбмiнy дaними тa пoдiлoм фyнкцioнaлy нa пyблiчнy i зaxищeнy чacтини.
У peзyльтaтi бyлo cтвopeнo пpoгpaмний пpoдyкт, який пiдтpимyє poбoтy з
вaкaнciями тa peзюмe, нaдaє кopиcтyвaчaм мoжливicть кepyвaти влacним
oблiкoвим зaпиcoм, a тaкoж мicтить iнcтpyмeнти для aнaлiзy iнфopмaцiї пpo pинoк
пpaцi. Рeaлiзoвaний фyнкцioнaл дoзвoляє oтpимyвaти cтaтиcтичнi дaнi,
викoнyвaти пoшyк тa фiльтpaцiю iнфopмaцiї, щo пiдвищyє зpyчнicть
викopиcтaння cиcтeми для aнaлiзy cтeйкxoлдepaми.
122
ЧДΤУ 262241.003 ПЗ
Ha ocтaнoк зaвepшeння ocнoвнoгo eтaпy poзpoбки бyлo пpoвeдeнo
тecтyвaння ключoвиx кoмпoнeнтiв web-зacтocyнкy. Рeзyльтaти пepeвipки
пiдтвepдили кopeктнicть poбoти peaлiзoвaнoгo фyнкцioнaлy тa вiдпoвiднicть
cиcтeми пocтaвлeним вимoгaм. У xoдi тecтyвaння тaкoж бyлo ycyнyтo виявлeнi
нeдoлiки, щo дoзвoлилo пiдвищити cтaбiльнicть poбoти пpoгpaмнoгo
зaбeзпeчeння.
Oтжe, oтpимaнi peзyльтaти cвiдчaть пpo ycпiшнe дocягнeння пocтaвлeнoї
мeти тa викoнaння визнaчeниx зaвдaнь. Рoзpoблeний web-зacтocyнoк мoжe
викopиcтoвyвaтиcя як ocнoвa для пoдaльшoгo poзвиткy пpoeктy, дoпoвнeнювaтиcя
нoвими мoжливocтями тa вдocкoнaлювaтиcя в мeжax aнaлiзy дaниx. Taким чинoм,
cтвopeнa cиcтeмa є пpaктичним iнcтpyмeнтoм для poбoти з вaкaнciями, a тaкoж
нaдaє кopиcтyвaчaм мoжливocтi для дocлiджeння тeндeнцiй cyчacнoгo pинкy
пpaцi.
123
ЧДΤУ 262241.003 ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1 React Doc [Електронний ресурс]. – Режим доступу: https://react.dev/learn
2 React Router Doc [Електронний ресурс]. – Режим доступу:
https://reactrouter.com/home
3 Tailwind CSS Doc [Електронний ресурс]. – Режим доступу:
https://tailwindcss.com/docs/installation/using-vite
4 Talwind CSS PLUS [Електронний ресурс]. – Режим доступу:
https://tailwindcss.com/plus?ref=top
5 Vite Doc [Електронний ресурс]. – Режим доступу: https://vite.dev/guide/
6 Create React App [Електронний ресурс]. – Режим доступу: https://create-
react-app.dev/docs/getting-started/
7 Vite Philosophy [Електронний ресурс]. – Режим доступу:
https://vite.dev/guide/philosophy
8 Why Vite [Електронний ресурс]. – Режим доступу:
https://vite.dev/guide/why
9 Esbuild [Електронний ресурс]. – Режим доступу: https://esbuild.github.io/
10 Nodejs Learn [Електронний ресурс]. – Режим доступу:
https://nodejs.org/learn
11 Nodejs Doc [Електронний ресурс]. – Режим доступу:
https://nodejs.org/docs/latest/api/documentation.html
12 V8 Doc [Електронний ресурс]. – Режим доступу: https://v8.dev/docs
13 Expres [Електронний ресурс]. – Режим доступуs: https://expressjs.com/en/
14 JWT README [Електронний ресурс]. – Режим доступу:
https://www.npmjs.com/package/jsonwebtoken
15 Introduction to JSON Web Tokens [Електронний ресурс]. – Режим
доступу: https://jwt.io/introduction
16 PostgreSQL [Електронний ресурс]. – Режим доступу:
https://www.postgresql.org/
17 Sequelize – Getting Started [Електронний ресурс]. – Режим доступу:
https://sequelize.org/docs/v6/getting-started/
124
ЧДΤУ 262241.003 ПЗ
18 SQL ін’єкції та захист від них [Електронний ресурс]. – Режим доступу:
https://foxminded.ua/sql-iniektsii/
19 Jackson-Barnes S. SPA Vs. MPA Explained: Differences Between Single-
Page Applications and Multi-Page Applications / S. Jackson-Barnes. –
17/11/2023: https://www.orientsoftware.com/blog/spa-vs-mpa/
20 SPA vs MPA: Which Web Architecture is Best for Your Startup:
https://arounda.agency/blog/spa-vs-mpa-which-web-architecture-is-best-for-
your-startup
21 React DOM Internals / Vishal Desai [Електронний ресурс]. – Режим
доступу: https://dev.to/vishalxapp/react-dom-internals-2mnn
22 Reactarts Guide [Електронний ресурс]. – Режим доступу:
https://recharts.github.io/en-US/guide/
23 Concurrently README [Електронний ресурс]. – Режим доступу:
https://www.npmjs.com/package/concurrently
24 Dotend Doc [Електронний ресурс]. – Режим доступу:
https://www.dotenv.org/docs/
25 Module-alias README [Електронний ресурс]. – Режим доступу:
https://www.npmjs.com/package/module-alias
26 HTML2PDF README [Електронний ресурс]. – Режим доступу:
https://www.npmjs.com/package/html2pdf.js/v/0.9.1
27 MVC Architecture / Sajith Thomas - 17/08/2023 [Електронний ресурс]. –
Режим доступу: https://dev.to/saji37/mvc-architecture-3027
28 OWASP Cross Site Scripting (XSS): https://owasp.org/www-
community/attacks/xss/
29 Методичні рекомендації до підготовки кваліфікаційної роботи бакалавра
для здобувачів вищої освіти зі спеціальності 121 «Інженерія
програмного забезпечення» усіх форм навчання [Текст] /Укл.: Голуб
С.В., Заспа Г.О., Куницька С.Ю., Півень О.Б. Катаєва Є.Ю., Салапатов
В.І., Метелап В.В., Олексюк В.В.; М-во освіти і науки України,
Черкаський державний технологічний університет. - Черкаси : ЧДТУ,
125
ЧДΤУ 262241.003 ПЗ
2023. - 96 с.
30 Minimum Viable Product (MVP) : Meaning, Examples – 10/03/2026:
https://www.geeksforgeeks.org/product-management/minimum-viable-
product-mvp/
31 Faker Guide [Електронний ресурс]. – Режим доступу:
https://fakerjs.dev/guide/
32 Sequelize Model Basics [Електронний ресурс]. – Режим доступу:
https://sequelize.org/docs/v6/core-concepts/model-basics/
33 Sequelize Migrations [Електронний ресурс]. – Режим доступу:
https://sequelize.org/docs/v6/other-topics/migrations/
126
ДОДАТОК А
ЗАТВЕРДЖЕНО:
Зав. кафедрою ПЗАС, професор
_________________ Голуб С.В.
„____” ______________ 2026 р.
Програмне забезпечення інформаційної системи аналізу вакансій для
стейкхолдерів
Специфікація
482. ЧДТУ 262241.003
Листів 2
Розробник ________________ А.В. Дробот
Керівник ________________ С.Ю. Куницька
Черкаси 2026
482. ЧДТУ 262241.003 2
Позначення Найменування Примітки
Документація
482.ЧДТУ. 262241 12 01 Текст програми
482.ЧДТУ. 262241 90 01 Графічні матеріали
128
ДОДАТОК Б
Програмне забезпечення інформаційної системи аналізу вакансій для
стейкхолдерів
Текст програми
482. ЧДТУ. 262241 12 01
Листів 15
Розробник ________________ А.В. Дробот
Черкаси 2026
482. ЧДТУ 262241 12 01 2
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>client</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
App.jsx
import { Routes, Route } from 'react-router-dom'
import {
Layout,
EmptyLayout,
CardPageLayout,
} from '@/layout'
import {
Home,
About,
ContactUs,
NotFoundPage,
Search,
Login,
SignUp,
Profile,
Settings,
} from '@/pages'
import {
ProfileOverview,
ProfileResume,
ProfileVacancy,
Analytics,
ProfileLikes
} from '@/components/profile'
import {
SettingProfile,
SettingAccount
} from '@/components/setting'
import { useAuth } from '@/context/AuthContext'
import ProtectedRoute from '@/components/ProtectedRoute'
function App() {
const { loading } = useAuth()
if (loading) {
130
482. ЧДТУ 262241 12 01 3
return (
<div className="min-h-screen flex items-center justify-
center">
Loading...
</div>
)
}
return (
<Routes>
<Route element={<Layout />} >
<Route path='/' element={<Home />} />
<Route path='/home' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/contact-us' element={<ContactUs />} />
<Route path='*' element={<NotFoundPage />} />
</Route>
<Route element={<EmptyLayout />}>
<Route path='/search' element={<Search />} />
<Route
path='/profile'
element={
<ProtectedRoute>
<Profile />
</ProtectedRoute>
}
>
<Route index element={<ProfileOverview />} />
<Route path='resume' element={<ProfileResume />}
/>
<Route path='vacancy' element={<ProfileVacancy
/>} />
<Route path='analitics' element={<Analytics />}
/>
<Route path='likes' element={<ProfileLikes />}
/>
</Route>
<Route
path='/setting'
element={
<ProtectedRoute>
<Settings />
</ProtectedRoute>
}
>
<Route index element={<SettingProfile />} />
<Route path='profile' element={<SettingProfile
/>} />
<Route path='account' element={<SettingAccount
/>} />
</Route>
</Route>
<Route element={<CardPageLayout />} >
131
482. ЧДТУ 262241 12 01 4
<Route path='/login' element={<Login />} />
<Route path='/sign-up' element={<SignUp />} />
</Route>
</Routes>
)
}
export default App
Search Page.jsx
import { useState, useMemo } from 'react'
import { useSearchParams, NavLink } from 'react-router-dom'
import SearchBar from '@/components/search/SearchBar'
import FiltersSidebar from
'@/components/search/filter/FiltersSidebar'
import ResultsGrid from '@/components/card/ResultsGrid'
function Search() {
const [searchParams] = useSearchParams()
const initialQuery = searchParams.get("q") || ""
const [query, setQuery] = useState(initialQuery)
{/* CATEGORY is role for user*/}
const [filters, setFilters] = useState({
date: '',
sort: '',
workStatus: '',
employment: '',
age: [18, 60],
category: [],
programmingLanguages: [],
languages: [],
aiCodingTools: [],
analyticsTools: [],
apisAndBackends: [],
browserExtensions: [],
cloudPlatforms: [],
databaseMigrationAndDevops: [],
designTools: [],
devopsAndInfrastructure: [],
docsAndKnowledge: [],
idesAndCodeEditors: [],
productivityAndMisc: [],
clisAndTerminalTools: [],
designAndUiTools: [],
})
return (
<div className="flex gap-6 py-12">
{/* SIDEBAR */}
<div className="w-64 hidden md:block h-screen overflow-
y-auto">
<FiltersSidebar filters={filters}
setFilters={setFilters} />
</div>
132
482. ЧДТУ 262241 12 01 5
{/* MAIN */}
<div className="flex-1 flex flex-col gap-6">
<SearchBar query={query} setQuery={setQuery} />
<div className="
space-y-6
h-screen
overflow-y-auto
">
<ResultsGrid query={query} filters={filters} />
</div>
</div>
</div>
)
}
export default Search
Grid For View Vacancy card
import { useState, useMemo, useEffect } from 'react'
import { useAuth } from '@/context/AuthContext'
import { resumeService } from '@/services/resumeService'
import { likeService } from '@/services/likeService'
import { languageToFlag } from '@/utils/languageToFlag'
import DevCard from './DevCard'
import DevModal from '@/components/modals/DevModal'
function ResultsGrid({ query, filters }) {
const { user } = useAuth()
const [resumes, setResumes] = useState([])
const [likedMap, setLikedMap] = useState({})
// For DevModal
const [selectedDev, setSelectedDev] = useState(null)
useEffect(() => {
resumeService.getAllResumes()
.then(setResumes)
.catch(console.error)
const loadLikes = async () => {
try {
const res = await likeService.getMyLikes()
const map = {}
res.liked.forEach(id => {
map[id] = true
})
setLikedMap(map)
} catch (e) {
console.error(e)
}
}
loadLikes()
}, [])
const handleToggleLike = async (devId) => {
try {
133
482. ЧДТУ 262241 12 01 6
const res = await likeService.toggleLike(devId)
setLikedMap(prev => ({
...prev,
[devId]: res.liked
}))
} catch (e) {
console.error(e)
}
}
const filtered = useMemo(() => {
return resumes
.filter((dev) => {
const selectCategory = filters.category || []
const selectedSkills = [
...(filters.programmingLanguages || []),
...(filters.aiCodingTools || []),
...(filters.analyticsTools || []),
...(filters.apisAndBackends || []),
...(filters.browserExtensions || []),
...(filters.cloudPlatforms || []),
...(filters.databaseMigrationAndDevops || []),
...(filters.designTools || []),
...(filters.devopsAndInfrastructure || []),
...(filters.docsAndKnowledge || []),
...(filters.idesAndCodeEditors || []),
...(filters.productivityAndMisc || []),
...(filters.clisAndTerminalTools || []),
...(filters.designAndUiTools || []),
]
const selectLanguages = filters.languages || []
{/* FOR SEARCH */}
if (query) {
const q = query.toLowerCase()
const searchable = [
dev.name,
...(Array.isArray(dev.category) ?
dev.category : [dev.category]),
...(dev.skills || []),
...(dev.languages || [])
]
.filter(Boolean)
.join(' ')
.toLowerCase()
if (!searchable.includes(q)) return false
}
if (filters.date && filters.date !== 'Any') {
const now = new Date()
const devDate = new Date(dev.date)
const diff = (now - devDate) / (1000 * 60 * 60 *
24)
if (filters.date === 'Last 24h' && diff > 1)
return false
134
482. ЧДТУ 262241 12 01 7
if (filters.date === 'Last week' && diff > 7)
return false
if (filters.date === 'Last month' && diff > 30)
return false
}
if (
filters.resumeStatus &&
filters.resumeStatus !== dev.resumeStatus
) return false
if (
filters.workStatus &&
filters.workStatus !== 'Any' &&
filters.workStatus !== dev.workStatus
) return false
if (
filters.employment &&
filters.employment !== 'Any' &&
filters.employment !== dev.employment
) return false
if (dev.age) {
if (dev.age < filters.age[0] || dev.age >
filters.age[1]) return false
}
if (
selectCategory.length &&
!selectCategory.some(category =>
dev.category.includes(category))
) return false
if (
selectedSkills.length &&
!selectedSkills.every(skill => (dev.skills ||
[]).includes(skill))
) return false
const devLanguageNames = (dev.languages || []).map(l
=> l.name)
if (
selectLanguages.length &&
!selectLanguages.some(lang =>
devLanguageNames.includes(lang))
) return false
return true
})
.sort((a, b) => {
if (a.resumeStatus !== b.resumeStatus) {
return a.resumeStatus === 'closed' ? 1 : -1
}
if (filters.sort === 'A-Z') {
return a.name.localeCompare(b.name)
}
if (filters.sort === 'Z-A') {
return b.name.localeCompare(a.name)
135
482. ЧДТУ 262241 12 01 8
}
return new Date(b.date) - new Date(a.date)
})
}, [resumes, query, filters])
return (
<>
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-
4">
{filtered.map((dev) => (
<DevCard
key={dev.id}
dev={dev}
liked={likedMap[dev.id]}
onToggleLike={handleToggleLike}
languageToFlag={languageToFlag}
onView={setSelectedDev}
disabled={!user}
/>
))}
</div>
{selectedDev && (
<DevModal
dev={selectedDev}
languageToFlag={languageToFlag}
onClose={() => setSelectedDev(null)}
/>
)}
</>
)
}
export default ResultsGrid
Resume/Vacancy Services
export const resumeService = {
async getAllResumes() {
try {
const res = await fetch('/api/resumes', {
method: 'GET',
credentials: 'include'
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed to
fetch resumes');
return data;
} catch (e) {
console.error('Get resumes error:', e.message);
throw e;
}
},
async getUserResumes() {
136
482. ЧДТУ 262241 12 01 9
try {
const res = await fetch('/api/resumes/user-resumes', {
method: 'GET',
credentials: 'include'
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed to
fetch resumes');
return data;
} catch (e) {
console.error('Get user resumes error:', e.message);
throw e;
}
},
async update(userResume) {
try {
const res = await fetch('/api/resumes/update-user-
resume', {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userResume
})
})
console.log('USET RESUME TO UPDATE:', userResume)
const data = await res.json()
if (!res.ok) throw new Error(data.error || 'Failed to
fetch resumes');
return data
} catch (e) {
console.error('Update resumes error:', e.message);
throw e;
}
},
async delete(resumeId) {
try {
const res = await fetch('/api/resumes/delete-user-
resume', {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
resumeId
})
})
const data = await res.json()
if (!res.ok) throw new Error(data.error || 'Failed to
137
482. ЧДТУ 262241 12 01 10
delete resumes');
return data
} catch (e) {
console.error('Update delete error:', e.message);
throw e;
}
}
};
Server.js
export const resumeService = {
async getAllResumes() {
try {
const res = await fetch('/api/resumes', {
method: 'GET',
credentials: 'include'
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed to
fetch resumes');
return data;
} catch (e) {
console.error('Get resumes error:', e.message);
throw e;
}
},
async getUserResumes() {
try {
const res = await fetch('/api/resumes/user-resumes', {
method: 'GET',
credentials: 'include'
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed to
fetch resumes');
return data;
} catch (e) {
console.error('Get user resumes error:', e.message);
throw e;
}
},
async update(userResume) {
try {
const res = await fetch('/api/resumes/update-user-
resume', {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
138
482. ЧДТУ 262241 12 01 11
userResume
})
})
console.log('USET RESUME TO UPDATE:', userResume)
const data = await res.json()
if (!res.ok) throw new Error(data.error || 'Failed to
fetch resumes');
return data
} catch (e) {
console.error('Update resumes error:', e.message);
throw e;
}
},
async delete(resumeId) {
try {
const res = await fetch('/api/resumes/delete-user-
resume', {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
resumeId
})
})
const data = await res.json()
if (!res.ok) throw new Error(data.error || 'Failed to
delete resumes');
return data
} catch (e) {
console.error('Update delete error:', e.message);
throw e;
}
}
};
Backend Routes
const express = require('express');
const router = express.Router();
const resumeController = require('@/controllers/resume.controller')
const { authMiddleware } = require('@/middlewares/auth.middleware')
router.get('/', resumeController.getAllResumes);
router.get('/user-resumes', authMiddleware,
resumeController.getUserResumes);
router.post('/update-user-resume', authMiddleware,
resumeController.updateUserResume);
router.post('/delete-user-resume', authMiddleware,
resumeController.deleteUserResume);
module.exports = router;
139
482. ЧДТУ 262241 12 01 12
Backend Controllers
const resumeService = require('@/services/resume.service');
exports.getAllResumes = async (req, res) => {
try {
const resumes = await resumeService.getAllResumes();
res.json(resumes);
} catch (e) {
console.error('Error fetching resumes:', e.message);
res.status(500).json({ error: 'Failed to fetch resumes' });
}
};
exports.getUserResumes = async (req, res) => {
try {
const userId = req.user.id
const user_resume = await
resumeService.getUserResumes(userId)
res.status(200).json(user_resume)
} catch (e) {
console.error('Error fetching user resumes:', e.message);
res.status(500).json({ error: 'Failed to fetch user resumes'
});
}
}
exports.updateUserResume = async (req, res) => {
try {
const userId = req.user.id
const { userResume } = req.body
const updatedResume = await
resumeService.updateUserResume(userId, userResume)
res.status(200).json(updatedResume)
} catch (e) {
console.error('Error update user resumes:', e.message)
res.status(500).json({
error: 'Failed to update user resumes'
})
}
}
exports.deleteUserResume = async (req, res) => {
try {
const userId = req.user.id
const { resumeId } = req.body
await resumeService.deleteUserResume(userId, resumeId)
res.status(200).json({
success: true
})
} catch (e) {
console.error('Error delete user resume:', e.message)
res.status(500).json({
error: 'Failed to delete user resume'
})
}
}
140
482. ЧДТУ 262241 12 01 13
Backend Services
const { Resume, Skill, Language, Contact, User, UserProfile } =
require('@root/models');
exports.getAllResumes = async (currentUserId = null) => {
const resumes = await Resume.findAll({
limit: 20,
offset: 0,
attributes: [
'id',
'title',
'about',
'status',
'work_status',
'employment_type',
'education',
'projects',
'interests',
'createdAt'
],
include: [
{
model: User,
attributes: ['id'],
include: [
{
model: UserProfile,
attributes: ['name', 'birth_date',
'avatar_url', 'location']
}
]
},
{
model: Skill,
attributes: ['name', 'value'],
through: { attributes: [] }
},
{
model: Language,
attributes: ['name'],
through: { attributes: ['level'] } // ВАЖНО
},
{
model: Contact,
attributes: ['type', 'value']
},
]
});
return resumes.map(resume => {
const profile = resume.User?.UserProfile;
const contacts = resume.Contacts || [];
141
482. ЧДТУ 262241 12 01 14
const birthDate = new Date(profile?.birth_date);
const today = new Date();
const age = profile?.birth_date
? today.getFullYear() -
birthDate.getFullYear() -
(today < new Date(today.getFullYear(),
birthDate.getMonth(), birthDate.getDate()))
: null;
const isLiked = currentUserId
? resume.likedResumes?.some(
user => user.id === currentUserId
)
: false;
return {
id: resume.id,
name: profile?.name ?? 'Unknown',
avatar: profile?.avatar_url ?? null,
location: profile?.location ?? null,
age,
category: resume.title,
date: resume.createdAt,
resumeStatus: resume.status === 'close' ? 'closed' :
'open',
workStatus: resume.work_status,
employment: resume.employment_type,
skills: resume.Skills?.map(s => s.value) ?? [],
languages: resume.Languages?.map(l => ({
name: l.name,
level: l.ResumeLanguage?.level
})) ?? [],
contacts: {
phone: contacts.find(c => c.type === 'phone')?.value
?? null,
email: contacts.find(c => c.type === 'email')?.value
?? null,
socials: contacts
.filter(c => !['phone',
'email'].includes(c.type))
.map(c => ({
type: c.type,
value: c.value
}))
},
description: {
about: resume.about,
education: resume.education,
projects: resume.projects,
interests: resume.interests
}
};
})
};
142
482. ЧДТУ 262241 12 01 15
'use strict';
const { Model } = require('sequelize');
module.exports = (sequelize, DataTypes) => {
class User extends Model {
/**
* Helper method for defining associations.
* This method is not a part of Sequelize lifecycle.
* The `models/index` file will call this method
automatically.
*/
static associate(models) {
this.hasOne(models.UserProfile, {
foreignKey: 'user_id',
onDelete: 'CASCADE'
});
this.hasMany(models.Resume, {
foreignKey: 'user_id',
onDelete: 'CASCADE'
});
this.belongsToMany(models.Resume, {
through: models.ResumeLike,
foreignKey: 'user_id',
otherKey: 'resume_id',
as: 'likedResumes'
});
}
}
User.init({
email: {
type: DataTypes.STRING,
allowNull: false,
unique: true
},
password_hash: {
type: DataTypes.STRING,
allowNull: false
}
}, {
sequelize,
modelName: 'User',
tableName: 'users',
underscored: true
});
return User;
};
143
ДОДАТОК В
Програмне забезпечення інформаційної системи аналізу вакансій для
стейкхолдерів
Графічні матеріали
482. ЧДТУ. 262241 90 01
Листів 10
Розробник ________________ А.В. Дробот
Черкаси 2026
482.ЧДТУ. 262241 34 01 2
Кваліфікаційна робота бакалавра
Програмне забезпечення
інформаційної системи аналізу
вакансій для стейкхолдерів
Керівник: к.т.н., доц., Куницька Світлана Юріївна
Доповідач: Студент групи ПЗ-2204, Дробот Артем Володимирович
1
АКТУАЛЬНІСТЬ ТЕМИ
● Майже всі web-сайти розроблені і належать не українцям
● Пошук гарної роботи віддалено - невід’ємна частина ІТ спеціалістів
на теперішній час
● Розробка нового більш зручного та функціонального інтерфейсу -
відвічний пошук досконалості
● Переписування старих ідей новими засобами - частина сучасних
підходів в програмуванні
3
145
482.ЧДТУ. 262241 34 01 3
146
482.ЧДТУ. 262241 34 01 4
Нефункціональні вимоги
● Фдаптивність системи: підтримка мобільних, планшетних і десктопних пристроїв;
● Безпека:
Хешування паролів;
Зберігання токенів;
Ізоляція даних між користувачами;
Захист від SQL-ін’єкцій (ORM Sequelize);
Захист від XSS-атак (валідація та екранування вводу);
● Масштабованість: готовність до розширення функцій (наприклад, додавання календаря або певних
аналітичних функцій для бльш єффектиної роботи в майбутньому);
● Зручність використання: мінімалістичний, зрозумілий інтерфейс з чіткими інструкціями (UI/UX);
● Продуктивність: швидке завантаження, кешування даних, збереження сесії користувача без
затримок, тощо.
15
Нефункціональні вимоги
● Фдаптивність системи: підтримка мобільних, планшетних і десктопних пристроїв;
● Безпека:
Хешування паролів;
Зберігання токенів;
Ізоляція даних між користувачами;
Захист від SQL-ін’єкцій (ORM Sequelize);
Захист від XSS-атак (валідація та екранування вводу);
● Масштабованість: готовність до розширення функцій (наприклад, додавання календаря або певних
аналітичних функцій для бльш єффектиної роботи в майбутньому);
● Зручність використання: мінімалістичний, зрозумілий інтерфейс з чіткими інструкціями (UI/UX);
● Продуктивність: швидке завантаження, кешування даних, збереження сесії користувача без
затримок, тощо.
15
Проектування логічної структури.
Діаграма прецедентів
160
147
482.ЧДТУ. 262241 34 01 5
Проектування логічної
структури. Діаграма класів
17
Проектування логічної структури.
Діаграма пакетів та компонентів
18
Проектування логічної структури.
Діаграма Компонентів
19
148
482.ЧДТУ. 262241 34 01 6
ПРОЕКТУВАННЯ ЛОГІЧНОЇ СТРУКТУРИ.
Діаграма Розгортання
20
МОДЕЛЮВАННЯ
ПОВЕДІНКИ СИСТЕМИ.
Діаграма діяльності.
Авторизація користувача та
сторінка пошуку
21
Діаграма
діяльності.
Профіль
користувача
23
149
482.ЧДТУ. 262241 34 01 7
ДІАГРАМА ДІЯЛЬНОСТІ.
Робочий простір
користувача та ІТ
спеціаліста
25
ДІАГРАМА
ДІЯЛЬНОСТІ. Робочий
простір Стейкхолдера
та збереження
вакансій/резюме
26
МОДЕЛЮВАННЯ ПОВЕДІНКИ СИСТЕМИ.
Діаграма послідовності
22
28
150
482.ЧДТУ. 262241 34 01 8
Моделювання
поведінки
системи.
Діаграма
комунікації
29
Діаграма скінченного
автомата
На діаграмі зображено життєвий
цикл користувача в межах
системи — від перегляду
публічних сторінок до реєстрації
та входу в систему,
використання функціоналу
30
151
482.ЧДТУ. 262241 34 01 9
Структура програмного проекту
Клієнт Сервер
**структура представлена в сухому
варіанті в наслідок обмеження по об’єму
матеріалу
32
Функціональна та
логічна схема
додатку
33
152
482.ЧДТУ. 262241 34 01 10
Основні модульні тести системи
Нaзвa тeстy Мoдyль Oчiкyвaний рeзyльтaт Oтримaний рeзyльтaт
Рeєстрaцiя кoристyвaчa API /api/auth/signup Ствoрює кoристyвaчa з Успiшнo
унікальним токеном, а
також зберігає токен в
httpOnly Cookie
Вхiд кoристyвaчa API /api/auth/login Пoвeртaє тoкeн i Успiшнo
пoвiдoмлeння
(true,false)
Вихiд кoристyвaчa API /api/auth/logout Видaляє токен з httpOnly Успiшнo
cookie
46
Основні інтеграційні тести
Нaзвa тeстy Мoдyль Oчiкyвaний рeзyльтaт Oтримaний рeзyльтaт
Aвтoризaцiя Фoрмa лoгiнy → API → Дoстyп дo зaхищeнoгo Успiшнo
cookie iнтeрфeйсy
CRUD зaдaч (наприклад UI → API → БД Дaнi ствoрюються, Успiшнo
резюме/вакансій) oнoвлюються,
видaляються
Нaлaштyвaння aкayнтy UI → API → БД Дaнi змiнюються y Успiшнo
фoрмi й відповідно
збeрiгaються
Видaлeння aкayнтy UI → API → БД Видaляється aкayнт i всi Успiшнo
пoв’язaнi дaнi з ним
47
153
482.ЧДТУ. 262241 34 01 11
РЕЗУЛЬТАТИ СИСТЕМНОГО ТЕСТУВАННЯ
Нaзвa тeстy Мoдyль Oчiкyвaний рeзyльтaт Oтримaний рeзyльтaт
Функціональ UI → API → Коректна робота авторизації, реєстрації, перегляду і редагування вакансій/резюме, Успiшнo
ність Сервер → БД аналітики; зміна налаштувань
Сумісність Додаток → різні Інтерфейс і функціональність коректно відображаються в Google Chrome, Mozilla Успiшнo
браузери Firefox, Safari, e.g.
Адаптивність UI → різні Компоненти автоматично масштабуються та розміщуються відповідно до розміру Успiшнo
пристрої (laptop, екрану
smartphone)
Цілісність UI → API → Всі операції зі створення, редагування, видалення даних коректно передаються, Успiшнo
даних Сервер → обробляються та зберігаються
PostgreSQL
Безпека JWT → API → Коректна робота JWT-токенів, обмеження доступу, захист персональних даних, вихід Успiшнo
UI із системи
Продуктивні Система → Стабільна робота системи під навантаженням, активна взаємодія з інтерфейсом Успiшнo
сть велика кількість користувача
48 запитів
РЕЗУЛЬТАТИ ПРИЙМАЛЬНОГО ТЕСТУВАННЯ
Нaзвa тeстy Мoдyль Oчiкyвaний рeзyльтaт
Перевірка відповідності Тестування основних сценаріїв: реєстрація, вхід, Усі функції працюють відповідно до технічного
функціоналу ТЗ створення/редагування/видалення вакансій/резюме завдання, помилок не виявлено
Оцінка зручності Тестування основних сценаріїв: реєстрація, вхід, Користувачі надали позитивні відгуки щодо
інтерфейсу створення/редагування/видалення вакансій/резюме зрозумілості та логічної структури інтерфейсу
Симуляція типових Введення некоректних даних, ручне редагування URL, Система реагує коректно, обробляє помилки без
користувацьких дій очищення токена, інші нетипові дії збоїв
Перевірка стабільності на Тестування у браузерах Safari, Google Chrome, Mozilla Додаток працює стабільно в усіх браузерах,
різних браузерах Firefox функціональність збережена
Оцінка технічної Перевірка наявності README, структури коду, Документація відповідає стандартам, усі необхідні
документації коментарів, інструкції запуску елементи присутні
Загальний висновок Аналіз загального стану системи після тестування Додаток готовий до розгортання, відповідає вимогам,
працює стабільно та безпечно
49
154
482.ЧДТУ. 262241 34 01 12
Дякую за увагу
Студент групи ПЗ-2204,
кафедри ПЗАС
Дробот Артем
Володимирович
Керівник
к.т.н., доц., Куницька Світлана Юріївна
155