Please use this identifier to cite or link to this item: 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 Інженерія програмного забезпечення (Інженерія програмного забезпечення)



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