Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: https://er.chdtu.edu.ua/handle/ChSTU/9030
Назва: Розробка WEB-застосунку для створення резюме
Автори: Куницька, Світлана Юріївна
Колісник, Анна Петрівна
Ключові слова: РЕЗЮМЕ;REACT.JS;WEB-ЗАСТОСУНОК;РЕДАГУВАННЯ;ІНТЕГРАЦІЯ;CV;REACT.JS;WEB APPLICATION;EDITING
Дата публікації: 6-чер-2024
Короткий огляд (реферат): АНОТАЦІЯ Колісник А.П. Розробка WEB-застосунку для створення резюме. Кваліфікаційна робота на здобуття ступеня бакалавра за спеціальністю 121 «Інженерія програмного забезпечення». – Черкаський державний технологічний університет. - Черкаси 2024. Кваліфікаційна робота бакалавра на тему «Розробка WEB-застосунку для створення резюме» містить 116 сторінок, 5 таблиць, 57 рисунків, список використаних джерел з 33 найменувань, 4 додатки. Метою виконання кваліфікаційної роботи бакалавра є розробка веб-застосунку, що дозволить користувачам ефективно та інтуїтивно створювати, редагувати, зберігати та ділитися професійними резюме. Головні завдання при проектуванні інформаційної системи: аналіз вимог до веб-застосунку; проектування архітектури; розробка інтерфейсу користувача; імплементація системи управління даними резюме, тестування веб-застосунку. Об'єктом роботи є розробка WEB-застосунку для створення резюме, який обслуговує потреби шукачів роботи в організації їхніх професійних інформаційних ресурсів для ефективного представлення перед потенційними роботодавцями. Предметом розробки є розробка WEB-застосунку для створення, редагування, зберігання та ділення професійних резюме включає розробку користувацького інтерфейсу, імплементацію функціоналу управління даними резюме, створення бази даних, забезпечення інтеграції з зовнішніми сервісами та реалізацію заходів безпеки для захисту даних користувачів. Вирішено наступні поставлені задачі:проектування логічної структури веб-сайту; моделювання поведінки системи; програмування бек-енду веб-сайту; розробка фронт-енду веб-сайту.
ANNOTATION Kolisnyk A.P.Development of a WEB applicaton for creating a CV. Bachelor's thesis for obtaining the bachelor's degree in the specialty 121 "Software Engineering". – Cherkasy State Technological University. - Cherkasy 2024. The bachelor's qualification work on the topic "Development of a WEB application for creating a CV" contains 116 pages, 5 tables, 57 figures, a list of references with 33 titles, 4 appendices. The purpose of the bachelor's qualification work is to develop a web application that allows users to efficiently and intuitively create, edit, save, and share professional resumes. The main tasks in designing the information system are requirements analysis for the web application; architecture design; user interface development; implementation of the resume data management system; testing of the web application. The object of the work is a web application for creating resumes that serves the needs of job seekers in organizing their professional information resources for effective presentation to potential employers. The subject of development is a web application for creating, editing, storing, and sharing professional resumes, which includes the development of a user interface, implementation of resume data management functionality, creation of a database, ensuring integration with external services, and implementing security measures to protect user data. The following tasks have been solved: designing the logical structure of the website; modeling the system's behavior; programming the website's backend; developing the website's frontend.
URI (Уніфікований ідентифікатор ресурсу): https://er.chdtu.edu.ua/handle/ChSTU/9030
Розташовується у зібраннях:121 Інженерія програмного забезпечення (Інженерія програмного забезпечення)

Файли цього матеріалу:
Файл Опис РозмірФормат 
Кваліфікаційна робота бакалавра Колісник Анна Петрівна.pdf
  Restricted Access
5.48 MBAdobe PDFПереглянути/Відкрити    Запит копії


Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.

Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
Факультет інформаційних технологій і систем 
Кафедра програмного забезпечення автоматизованих систем 
 
 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
до кваліфікаційної роботи 
бакалавра 
 
 
на тему: «Розробка WEB-застосунку для створення резюме» 
 
 
Виконав: студент 4 курсу, групи ПЗ-2004 
спеціальності  
121 «Інженерія програмного забезпечення»  
(шифр і назва напряму підготовки) 
 
 
Студент Колісник А. П. 
 (прізвище та ініціали) 
Керівник Куницька С. Ю. 
 (прізвище та ініціали) 
Рецензент Захарова М. В. 
 (прізвище та ініціали) 
 
 
 
 
Черкаси 2024 
  
 
 Черкаський державний технологічний університет  
повне найменування вищого навчального закладу  
Факультет           інформаційних технологій і систем  
Кафедра             програмного забезпечення автоматизованих систем  
Освітній рівень   бакалавр  
Спеціальність     121 «Інженерія програмного забезпечення»  
Освітня програма  Інженерія програмного забезпечення  
 
ЗАТВЕРДЖУЮ 
Зав. кафедри ПЗАС, професор 
____________________ С. Голуб  
«___» _______________ 2024 року 
 
З А В Д А Н Н Я 
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ 
Колісник Анні Петрівні 
(прізвище, ім’я, по батькові) 
1. Тему проекту (роботи) «Розробка WEB-застосунку для створення резюме»  
Керівник проекту (роботи) Куницька Світлана Юріївна, к.т.н., доцент  
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання) 
Затверджені наказом Черкаського державного технологічного університету від « 26 » лютого 2024 
року №60/04 
2. Строк подання студентом проекту (роботи) 03 червня 2024 року 
3. Вхідні дані до проекту (роботи) стандарти програмного забезпечення; вимоги до проекту: дані 
профілю користувача: правові вимоги; технічні вхідні дані   
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити) Вступ; 
Існуючі методи та засоби розв‘язання поставлених завдань; Проектування та моделювання 
програмного забезпечення; Розробка та тестування програмного забезпечення; Висновки; Список 
використаних джерел; Додатки. 
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту); 
6. Консультанти розділів роботи 
Прізвище, ініціали та  Підпис, дата 
Розділ 
посади консультанта Завдання видав Завдання прийняв 
1    
2    
3    
7. Дата видачі завдання 02 грудня 2023 р.  
2 
 
КАЛЕНДАРНИЙ ПЛАН 
Строк виконання 
етапів 
№ п/п Назва етапів випускної роботи Примітки 
кваліфікаційної 
роботи 
1 Постановка задачі. Затвердження завдання 02.12.2023 виконано 
 1 етап   
1 Аналіз шляхів вирішення поставленої задачі 04.02.2024 виконано 
2 Вибір кінцевого варіанту проектного рішення 17.03.2024 виконано 
3 Оформлення первісної редакції роботи 25.03.2024 виконано 
 2 етап   
1 Узгодження прийнятих проектних рішень з керівником 31.04.2024 виконано 
2 Оформлення пояснювальної записки  13.05.2024 виконано 
3 Попередній захист роботи 15.05.2024 виконано 
4 Затвердження роботи 02.06.2024  
5 Рецензування роботи 04.06.2024  
6 Захист роботи 05.06.2024  
 
Студент    Колісник А. П 
       (підпис)                          (прізвище та ініціали) 
 
Керівник роботи    Куницька С.Ю. 
        (підпис)                          (прізвище та ініціали) 
 
 
 
 
3 
 
АНОТАЦІЯ 
Колісник А.П. Розробка WEB-застосунку для створення резюме. 
Кваліфікаційна робота на здобуття ступеня бакалавра за спеціальністю 121 
«Інженерія програмного забезпечення». – Черкаський державний технологічний 
університет. - Черкаси 2024. 
Кваліфікаційна робота бакалавра на тему   «Розробка WEB-застосунку для 
створення резюме» містить 116 сторінок, 5 таблиць, 57 рисунків, список 
використаних джерел  з 33 найменувань, 4 додатки. 
Метою виконання кваліфікаційної роботи бакалавра є розробка веб-
застосунку, що дозволить користувачам ефективно та інтуїтивно створювати, 
редагувати, зберігати та ділитися професійними резюме. Головні завдання при 
проектуванні інформаційної системи: аналіз вимог до веб-застосунку; проектування 
архітектури; розробка інтерфейсу користувача; імплементація системи управління 
даними резюме, тестування веб-застосунку. Об'єктом роботи є розробка WEB-
застосунку для створення резюме, який обслуговує потреби шукачів роботи в 
організації їхніх професійних інформаційних ресурсів для ефективного 
представлення перед потенційними роботодавцями. Предметом розробки є розробка 
WEB-застосунку для створення, редагування, зберігання та ділення професійних 
резюме включає розробку користувацького інтерфейсу, імплементацію функціоналу 
управління даними резюме, створення бази даних, забезпечення інтеграції з 
зовнішніми сервісами та реалізацію заходів безпеки для захисту даних користувачів.  
Вирішено наступні поставлені задачі:проектування логічної структури веб-сайту; 
моделювання поведінки системи;  програмування бек-енду веб-сайту; розробка 
фронт-енду веб-сайту. 
 
Ключові слова: РЕЗЮМЕ, REACT.JS, WEB-ЗАСТОСУНОК, РЕДАГУВАННЯ, 
ІНТЕГРАЦІЯ 
  
4 
 
ANNOTATION 
Kolisnyk A.P.Development of a WEB applicaton for creating a CV. Bachelor's 
thesis for obtaining the bachelor's degree in the specialty 121 "Software Engineering". – 
Cherkasy State Technological University. - Cherkasy 2024. 
The bachelor's qualification work on the topic "Development of a WEB application 
for creating a CV" contains 116 pages, 5 tables, 57 figures, a list of references with 33 
titles, 4 appendices. 
The purpose of the bachelor's qualification work is to develop a web application that 
allows users to efficiently and intuitively create, edit, save, and share professional resumes.  
The main tasks in designing the information system are requirements analysis for the web 
application; architecture design; user interface development; implementation of the resume 
data management system; testing of the web application. The object of the work is a web 
application for creating resumes that serves the needs of job seekers in organizing their 
professional information resources for effective presentation to potential employers. The 
subject of development is a web application for creating, editing, storing, and sharing 
professional resumes, which includes the development of a user interface, implementation 
of resume data management functionality, creation of a database, ensuring integration with 
external services, and implementing security measures to protect user data. The following 
tasks have been solved: designing the logical structure of the website; modeling the 
system's behavior; programming the website's backend; developing the website's frontend. 
 
Keywords:   CV, REACT.JS, WEB APPLICATION, EDITING
5 
 
 
ЗМІСТ 
ВСТУП .......................................................................................................................... 5 
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ ПОСТАВЛЕНИХ 
ЗАВДАНЬ ..................................................................................................................... 8 
1.1 Аналіз існуючих аналогів................................................................................... 8 
1.2 Огляд інструментарію та засобів створення веб-додатку .............................. 14 
1.3 Інструкція користувачу .............................................................................. 15 
РОЗДІЛ 2 ПРОЕКТУВАННЯ ТА МОДЕЛЮВАННЯ ПРОГРАМНОГО 
ЗАБЕЗПЕЧЕННЯ ....................................................................................................... 19 
2.1 Моделювання предметної області ................................................................... 19 
2.1.1 Предметна область моделювання. Модель предметної області. Словник 
предметної області. ............................................................................................ 19 
2.1.2 Елементи моделювання предметної області ............................................ 20 
2.1.3 Робоча область моделювання  ................................................................... 21 
2.2 Формування та аналіз вимог ............................................................................ 22 
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні 
вимоги. Вимоги замовника і розробника. Функціональні та нефункціональні 
вимоги ................................................................................................................. 22 
2.3. Проектування логічної структури програмного комплексу .......................... 27 
2.3.1 Діаграми класів .......................................................................................... 27 
2.3.2 Діаграми пакетів ........................................................................................ 28 
2.4 Архітектурне проектування  ............................................................................. 30 
2.4.1 Діаграма компонентів................................................................................ 30 
  
 
Зм. Лист № документа Підпис Дата ЧДТУ. 242306-004 ПЗ 
Розроб. Колісник А. П. «Розробка WEB-застосунку для  Літ. Лист Листів 
Керівник Куницька С. Ю. створення резюме»  Д  
Пояснювальна записка ФІТІС, кафедра ПЗАС, 
Н.контр. Півень О. Б.  
Затв. Голуб С. В. ПЗ-2004 
 3 
 
 
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма 
розгортання ......................................................................................................... 31 
2.5 Моделювання поведінки системи.................................................................... 32 
2.5.1 Діаграма діяльності ................................................................................... 32 
2.5.2 Діаграма послідовності ............................................................................. 33 
2.5.3 Діаграма комунікації ................................................................................. 34 
2.5.4 Діаграма скінченного автомату ................................................................ 35 
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ  .. 37 
3.1 Розробка програмного комплексу ................................................................... 37 
3.1.1 Обґрунтування засобів реалізації ............................................................. 37 
3.1.3 Опис логічної схеми системи .................................................................... 40 
3.1.4 Розробка бази даних  .................................................................................. 41 
 
3.1.5 Розробка інтерфейсу користувача ............................................................ 42 
 
3.1.6 Опис розробки програмних компонентів  ................................................. 45 
 
3.2 Тестування системи .......................................................................................... 57 
 
3.2.1 Модульне тестування  ................................................................................ 57 
3.2.2 Інтеграційне тестування  ............................................................................ 59 
3.2.3 Системне тестування  ................................................................................. 61 
3.2.4 Приймальне тестування  ............................................................................ 66 
3.3 Приклади впровадженого програмного комплексу  ........................................ 67 
ВИСНОВКИ ............................................................................................................... 75 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ  ................................................................... 78 
ДОДАТОК А .............................................................................................................. 81 
ДОДАТОК Б ............................................................................................................... 83 
ДОДАТОК В............................................................................................................... 99 
ДОДАТОК Г ............................................................................................................. 107 
 Лист 
ЧДТУ. 242306-004 ПЗ 
З м. Лист № док. Підпис Дата 
 
    
4 
ЧДТУ 242306.004ПЗ 
ВСТУП 
Актуальність теми. Актуальність розробки веб-застосунку для створення 
резюме пояснюється постійним зростанням потреби у якісних та доступних 
інструментах для самопрезентації на ринку праці. У сучасних умовах, коли 
конкуренція за вакансії стає дедалі більшою, професійно створене резюме може 
значно збільшити шанси кандидата на успіх. В той же час, багато існуючих 
рішень або обмежені у функціональності, або вимагають від користувача 
спеціальних навичок у дизайні та верстці документів. Використання сучасних 
веб-технологій та гнучких баз даних, дозволяє створити інтуїтивно зрозумілий, 
легко налаштовуваний і доступний з будь-якого пристрою інструмент для 
створення резюме.  
Мета і завдання роботи. Реалізація програмного забезпечення для 
створення резюме з використанням технології ReactJS. Програма буде 
інтегруватися з базою даних Firebase для зберігання та управління 
користувачами та їх резюме. Вивчення та застосування кращих практик у 
розробці програмного забезпечення з урахуванням принципів дизайну та вимог 
користувачів.  
Основні задачі розробки додатку: 
1 Проектування логічної структури веб-сайту 
2 Моделювання поведінки системи 
3 Програмування бек-енду веб-сайту 
4 Розробка фронт-енду веб-сайту 
Завдання: 
1 Моделювання предметної області 
1.1 Дослідження потреб користувачів. 
1.2 Аналіз вимог ринку праці. 
1.3 Визначення функціональності продукту. 
2 Формування та аналіз вимог до проекту 
2.1 Збір вхідних даних для розробки. 
 5 
ЧДТУ 242306.004ПЗ 
2.2 Визначення ключових вимог до функціоналу веб-сайту. 
2.3 Визначення ключових вимог до інтерфейсу веб-сайту. 
3 Проектування логічної структури веб-сайту 
3.1 Створення детальних схем взаємозв'язків між елементами сайту. 
3.2 Проектування структури бази даних. 
3.3 Розробка схеми навігації та інтерактивних елементів інтерфейсу. 
4 Архітектурне проектування 
4.1 Вибір технологічного стеку. 
4.2 Визначення архітектури системи. 
5 Моделювання поведінки системи 
5.1 Визначення взаємодії системи з користувачем. 
5.2 Розробка процесів автоматизації. 
5.3 Обробка інформації, введеної користувачем. 
5.4 Розробка сценаріїв використання системи та тестових випадків. 
6 Етап реалізації 
6.1 Програмування бек-енду веб-сайту. 
6.1.2 Створення серверної частини. 
6.1.3 Налаштування бази даних. 
6.1.4 Розробка API для зв'язку між сервером і клієнтською 
частиною. 
6.2 Розробка фронт-енду веб-сайту. 
6.3 Створення веб-сторінок. 
6.4 Дизайн інтерфейсу. 
6.5 Реалізація користувацького досвіду згідно з принципами UX. 
Об’єкт розробки. Розробка WEB-застосунку для створення резюме, який 
обслуговує потреби шукачів роботи в організації їхніх професійних 
інформаційних ресурсів для ефективного представлення перед потенційними 
роботодавцями. 
Предмет розробки. Програмне забезпечення, яке включає веб-інтерфейс, 
базу даних для зберігання інформації користувачів, механізми генерації та 
6 
ЧДТУ 242306.004ПЗ 
форматування резюме, а також функціонал для збереження, редагування та 
експорту готових документів. 
Методи проектування та конструювання. Для досягнення поставленої 
мети було застосовано такі методи: порівняння та спостереження — для аналізу 
існуючих рішень та визначення необхідних функцій, абстрагування та 
моделювання — при розробці структури даних і взаємодій у Firebase, 
емпіричний аналіз — для вибору технологій і підходів, заснованих на їхній 
ефективності, системний підхід і формалізація — в інтеграції компонентів 
застосунку, індукція — для розробки загальних рішень з конкретних прикладів, 
експеримент і синтез — при прототипуванні та тестуванні функціональності. 
Опис отриманих результатів. 
Веб-сайт створено для зручного та професійного створення резюме. 
Інтерфейс інтуїтивно зрозумілий, користувачі без технічного фону можуть легко 
зареєструватися, створити і зберегти резюме. Веб-сайт адаптивний і працює 
коректно у різних браузерах. Користувачі можуть вибирати різні шаблони та 
змінювати текст, при цьому зміни зберігаються і відображаються коректно.  
Практичне значення отриманих результатів. 
Створений веб-сайт може бути використаним студентами після 
завершення навчання для подальшого працевлаштування. Система готова до 
використання та надає можливості інтеграції в сайти університетів для 
розширення їх функціоналу та підвищення ефективності взаємодії системи 
освіти з ринком праці. 
Особистий внесок автора. 
При виконанні даної бакалаврської роботи автором самостійно було 
визначено проблему дослідження та сформульовано мету і завдання роботи. 
Проведено аналіз наукової літератури за темою дослідження, на основі якого 
визначено прогалини та обґрунтовано необхідність подальших досліджень. На 
основі проведеного аналізу сформульовано висновки та рекомендації щодо 
практичного застосування результатів дослідження. Текст роботи, а також всі 
графічні та табличні матеріали були підготовлені автором самостійно. 
7 
ЧДТУ 242306.004ПЗ 
 
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ 
ПОСТАВЛЕНИХ ЗАВДАНЬ 
1.1 Аналіз існуючих аналогів 
Український ринок інформаційних технологій демонструє стрімке 
зростання та стає вагомим сектором економіки країни. Значна кількість 
висококваліфікованих ІТ-спеціалістів та зростаючий попит на розробку 
програмного забезпечення створюють сприятливі умови для інновацій та 
розвитку нових технологічних рішень. В цьому контексті, розробка веб-
застосунків, зокрема конструкторів резюме, набуває особливої актуальності, 
враховуючи потребу ІТ-фахівців представляти свої професійні досягнення в 
найбільш виграшному світлі. 
За даними статті на Altamira.ai, Україна є однією з лідируючих країн у 
сфері надання послуг програмного забезпечення, що відзначається значним 
внеском у глобальний ІТ-ринок [1]. ІТ-сектор продовжує демонструвати високі 
темпи зростання, приваблюючи інвестиції та стимулюючи розвиток суміжних 
галузей. Потенціал ринку зумовлений не тільки кількістю кваліфікованих 
фахівців але й зростаючим попитом на інноваційні технологічні рішення, що 
відкриває нові можливості для розробників та дизайнерів веб-застосунків. 
Приклад резюме для веб-застосунків, представлений на Velvet Jobs, 
ілюструє важливість структурованого та змістовного представлення 
професійного досвіду, навичок та освіти [2]. Аналіз цього прикладу підкреслює 
необхідність адаптації шаблонів резюме до специфіки різних професійних сфер, 
а також важливість забезпечення користувачам можливості індивідуалізації та 
персоналізації їхніх резюме (рисунок 1.1).  
Мінусом даного сервісу є необхідність реєстрації для створення резюме та 
відсутність можливості анонімного доступу. 
8 
ЧДТУ 242306.004ПЗ 
 
Рисунок 1.1 – Інтерфейс конструктора резюме VelvetJobs 
 
 
Рисунок 1.2 – Конструктор резюме Europass 
 
Стаття на Resume.io про європейське резюме Europass вказує на ряд 
обмежень стандартного формату, який може не враховувати унікальні аспекти 
досвіду та навичок кандидатів, особливо в сфері ІТ [3]. Аналіз переваг та 
недоліків Europass дозволяє зробити висновок про необхідність створення більш 
9 
ЧДТУ 242306.004ПЗ 
гнучких та адаптивних інструментів для підготовки резюме, що враховують 
особливості українського ринку та потреби ІТ-спеціалістів (рисунок 1.2). 
Дослідження актуальних проблем та потреб українського ІТ-ринку в 
контексті розробки веб-застосунків для створення резюме виявило важливість 
індивідуалізації, адаптивності та інтеграції з сучасними технологіями. Розробка 
конструктора резюме, який враховує ці аспекти, може значно підвищити шанси 
ІТ-фахівців на успішне працевлаштування та сприяти їх професійному 
зростанню. 
На основі проведеного аналізу прийнято рішення зосередитися на розробці 
конструктора резюме, який надає користувачам широкі можливості для 
створення індивідуальних та змістовних резюме. Важливими аспектами є 
інтуїтивно зрозумілий інтерфейс, гнучкість налаштувань, інтеграція з 
професійними мережами та платформами для пошуку роботи, а також 
використання аналітичних інструментів для оптимізації вмісту резюме. 
Стаття Workruit вказує на зручність та ефективність використання онлайн-
конструкторів резюме, які пропонують доступ до професійно розроблених 
шаблонів, оптимізацію під системи автоматизованого відбору (ATS), швидкість 
створення та вбудовані інструменти для перевірки на помилки [4]. Однак, 
недоліками таких платформ є обмеження у кастомізації, ризик створення 
стандартного "безликого" резюме та високий ступінь схожості з іншими резюме, 
що може зменшити унікальність кандидата. 
З іншого боку, традиційний метод створення резюме дозволяє кандидатам 
демонструвати власну творчість та унікальність через дизайн та форматування, 
що є особливо важливим у певних індустріях. Цей підхід допомагає краще 
відображати особистість кандидата та його професійні особливості. Проте, 
створення резюме вручну може бути часомістким, мати проблеми з сумісністю 
форматів та стикатися з викликами оптимізації під ATS. 
Автори статті радять враховувати стадію кар'єри, специфіку індустрії, 
власні переваги в дизайні та доступний час для вибору між цими двома 
10 
ЧДТУ 242306.004ПЗ 
підходами. Основна мета, незалежно від вибору методу, полягає в ефективному 
представленні навичок та досвіду кандидата. 
Цей аналіз статті від Workruit може бути використаний при розробці веб-
застосунку "Конструктор резюме" для того, щоб знайти баланс між зручністю 
використання онлайн-платформ та можливістю створення унікального резюме. 
Важливо інтегрувати інструменти для кастомізації та оптимізації під ATS, 
одночасно забезпечуючи користувачам можливість демонстрації їхньої 
унікальності та креативності. Також, стаття наголошує на значенні слідкування 
за майбутніми тенденціями у форматуванні резюме, включаючи використання 
цифрових портфоліо, відеорезюме, інтерактивних елементів, інтеграції зі 
штучним інтелектом, соціальними медіа, валідації навичок та можливості 
оновлення в реальному часі, що є ключовими для розробки сучасного та 
ефективного конструктора резюме. 
В рамках кваліфікаційної роботи бакалавра на тему "Розробка веб-сайту 
для створення резюме", важливим аспектом дослідження є аналіз існуючих 
аналогів програмного забезпечення, які надають подібні послуги. Серед відомих 
платформ, які забезпечують можливості для створення, редагування та 
збереження резюме, можна виділити LinkedIn, Canva та Zety. 
LinkedIn, як відома професійна соціальна мережа, пропонує унікальний 
інструмент для створення резюме на основі даних профілю користувача. Цей 
сервіс дозволяє автоматично формувати резюме, хоча й з обмеженою 
можливістю кастомізації (рисунок 1.3). Головною перевагою є широка видимість 
резюме серед потенційних роботодавців та інтеграція з професійним профілем, 
що дозволяє отримувати рекомендації. Однак, основним недоліком є відсутність 
гнучкості у дизайні та структурі резюме, а також залежність від платформи для 
розповсюдження. 
 
11 
ЧДТУ 242306.004ПЗ 
 
Рисунок 1.3 – Конструктор резюме від LinkedIn 
 
Canva вирізняється серед інших сервісів завдяки своїй величезній 
бібліотеці шаблонів і можливостям детальної кастомізації дизайну. Ця 
платформа пропонує інтуїтивно зрозумілий інтерфейс, який робить процес 
створення резюме не тільки простим, але й творчим. Користувачі мають змогу 
експортувати свої резюме в різних форматах, що є значною перевагою. Проте, 
для створення дійсно унікального резюме може знадобитися базове розуміння 
принципів дизайну. 
 
 
Рисунок 1.4 – Конструктор резюме від Canva 
12 
ЧДТУ 242306.004ПЗ 
Zety спеціалізується на швидкому та ефективному створенні професійних 
резюме. Сервіс забезпечує користувачам корисні поради та рекомендації на 
кожному кроці процесу створення документа. Завдяки шаблонам, оптимізованим 
під різні професії, користувачі можуть легко адаптувати свої резюме до 
конкретних вимог роботодавців. Функція прямого експорту в PDF та інші 
текстові формати робить Zety зручним інструментом для швидкого створення 
резюме. Однак, серед недоліків можна відзначити обмеження в кастомізації та 
потенційну схожість резюме через використання загальнодоступних шаблонів.  
 
 
Рисунок 1.5 – Конструктор резюме від Zety 
 
Аналізуючи ці платформи, можна зробити висновок про важливість 
забезпечення гнучкості та індивідуалізації в процесі створення резюме. Кожен з 
розглянутих сервісів має свої унікальні переваги, які можуть бути корисними для 
різних категорій користувачів. Однак, існують і спільні недоліки, такі як 
обмежені можливості для висвітлення унікальних навичок та досвіду. У своїй 
роботі над конструктором резюме, важливо врахувати ці аспекти, щоб створити 
продукт, який не тільки відповідає основним потребам користувачів, але й надає 
додаткові можливості для персоналізації та креативності в процесі створення 
резюме. 
13 
ЧДТУ 242306.004ПЗ 
Ринок праці продовжує демонструвати високу конкуренцію серед шукачів 
роботи, що змушує кандидатів шукати нові способи виділення своїх резюме з 
маси інших. В цьому контексті, індивідуалізація та висока якість оформлення 
резюме стають вирішальними факторами успіху. Дослідження в цій галузі 
дозволяє не тільки виявити існуючі проблеми та недоліки вже доступних 
інструментів але й знайти шляхи їх оптимізації та вдосконалення. 
Сучасний ринок вимагає від програмного забезпечення для створення 
резюме не лише стандартних функцій, але й гнучкості, інтуїтивно зрозумілого 
інтерфейсу, а також можливостей для креативного самовираження.  
1.2 Огляд інструментарію та засобів створення веб-додатку  
Використані інструменти: 
1 ReactJS 
Опис: JavaScript-бібліотека для розробки інтерфейсів користувача. 
Покращення роботи: ReactJS забезпечує компонентну архітектуру, що 
полегшує розробку та підтримку коду. Він також пропонує віртуальний DOM, 
що полегшує оптимізацію продуктивності веб-додатку. 
2 Firebase 
Опис: Платформа розробки мобільних та веб-додатків від Google, яка надає  
різні сервіси, такі як аутентифікація, база даних, хостинг, зберігання файлів та  
інші. 
Покращення роботи: Firebase пропонує готові рішення для найбільш 
поширених потреб веб-додатків, зменшуючи час, потрібний для розробки та 
підтримки серверної інфраструктури. Також забезпечує реальний час бази даних, 
що дозволяє швидко оновлювати дані на всіх підключених пристроях. 
3 React Query 
Опис: Бібліотека для кешування та управління запитами до сервера в React-
додатках. 
Покращення роботи: React Query дозволяє ефективно управляти станом 
даних на клієнтській стороні, кешувати дані та автоматично оновлювати їх  
14 
ЧДТУ 242306.004ПЗ 
при необхідності.  
Покращення роботи з боку розробника: 
1 Прискорення розробки: 
Використання ReactJS спрощує розробку веб-інтерфейсу за рахунок 
компонентного підходу та широкого спектру наявних бібліотек та компонентів. 
2 Зменшення складності інфраструктури: 
Firebase надає готові рішення для автентифікації, бази даних та інші 
сервіси, що значно зменшує необхідність у власній серверній інфраструктурі та 
її підтримці. 
3 Ефективне управління станом даних: 
React Query дозволяє зосередитися на управлінні станом даних на  
клієнтській стороні, забезпечуючи швидке та ефективне кешування та оновлення 
даних. 
4 Реалізація реактивності: 
Використання Firebase Realtime Database разом із ReactJS дозволяє 
реалізувати реальний час оновлення даних на клієнтському і серверному  боці, 
що сприяє покращенню користувацького досвіду. 
Загалом, використання ReactJS, Firebase та React Query сприяє швидкій 
розробці та покращує якість та продуктивність веб-додатку, полегшуючи роботу 
розробника та забезпечуючи кращий користувацький досвід. 
1.3 Інструкція користувачу 
1 Реєстрація та Авторизація: користувач може зареєструвати новий 
обліковий запис або увійти до системи за допомогою існуючого. 
2 Створення нового резюме: після входу у систему, користувач має 
можливість створити нове резюме. 
3 Заповнення основної інформації: користувач може ввести основну 
інформацію, таку як ім'я, контактні дані, область роботи тощо. 
4 Попередній перегляд: користувач може переглянути попередній вигляд 
свого резюме перед його збереженням або вивантаженням. 
15 
ЧДТУ 242306.004ПЗ 
5 Редагування та збереження: користувач має можливість редагувати 
своє резюме у будь-який момент та зберігати оновлену версію. 
6 Експорт у PDF: після завершення створення або редагування резюме, 
користувач може експортувати його у форматі PDF для подальшого 
друку або відправлення по електронній пошті. 
7 Видалення резюме: користувач може видалити будь-яке резюме, якщо 
воно більше не потрібно. 
8  Вихід з облікового запису: користувач може вийти зі свого облікового 
запису, щоб забезпечити безпеку та конфіденційність своїх даних. 
Метою цієї роботи є розробка веб-застосунку для створення резюме, який 
буде враховувати специфічні потреби українських ІТ-фахівців. Існуючі сервіси, 
такі як Velvet Jobs, Europass, LinkedIn, Canva та Zety, мають певні обмеження 
щодо кастомізації та індивідуалізації резюме, що може негативно вплинути на 
конкурентоспроможність кандидатів на ринку праці.  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16 
ЧДТУ 242306.004ПЗ 
ВИСНОВОК ДО ПЕРШОГО РОЗДІЛУ 
У цьому розділі проведено аналіз існуючих аналогів програмного 
забезпечення для створення резюме, таких як Velvet Jobs, Europass, LinkedIn, 
Canva та Zety. Виявлено, що ці сервіси пропонують зручні шаблони та швидкість 
створення резюме, але мають обмеження в можливостях кастомізації та 
унікалізації. На основі цього аналізу прийнято рішення зосередитися на розробці 
конструктора резюме, який забезпечить користувачам широкі можливості для 
індивідуалізації, інтеграцію з сучасними технологіями, і буде адаптований до 
специфіки українського ІТ-ринку. Це дозволить створювати унікальні та 
професійно оформлені резюме, що значно підвищить шанси ІТ-фахівців на 
успішне працевлаштування та сприятиме їхньому професійному зростанню. 
17 
ЧДТУ 242306.004ПЗ 
 
 
 
 
 
 
 
 
 
 
  
18 
ЧДТУ 242306.004ПЗ 
РОЗДІЛ 2 ПРОЕКТУВАННЯ ТА МОДЕЛЮВАННЯ 
ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ 
2.1 Моделювання предметної області 
В процесі моделювання предметної області я визначила основні доменні 
об'єкти  та звязки між ними для подальшого створення UML-діаграм. 
2.1.1 Предметна область моделювання. Модель предметної області. 
Словник предметної області. 
Предметна область моделювання у роботі "Конструктор резюме" охоплює 
основні об'єкти та їхні взаємозв'язки, необхідні для створення та управління 
резюме користувачами. Центральним об'єктом є Користувач, який взаємодіє з 
Аккаунтом для входу та управління своїм профілем. Користувачі створюють та 
редагують Резюме, використовуючи різноманітні Шаблони Резюме, що містять 
попередньо задані формати та дизайни. Резюме складається з різних Секцій, 
таких як освіта, досвід роботи, навички тощо, кожна з яких включає конкретні 
Елементи Секції, як-от записи про попередні місця роботи чи навчальні заклади.  
Ця модель предметної області створює основу для розробки UML діаграм 
класів, які ілюструють структуру доменних об'єктів та зв'язки між ними, 
забезпечуючи чітке розуміння взаємодії в системі "Конструктор резюме". 
Користувач - особа, яка використовує конструктор резюме. 
Аккаунт - інформація для входу та управління профілем користувача. 
Резюме - документ, який користувач створює та редагує. 
Шаблон Резюме - предзадані формати та дизайни, які користувач може 
вибрати для свого резюме. 
Секція Резюме - частини резюме, як-от освіта, досвід роботи, навички 
тощо. 
Елемент Секції - конкретний запис у секції, наприклад, попереднє місце 
роботи або навчальний заклад. 
Редактор Резюме - інструмент на сайті, який дозволяє редагувати та 
форматувати резюме. 
19 
ЧДТУ 242306.004ПЗ 
Попередній Перегляд Резюме - функція, яка дозволяє переглянути як 
резюме виглядатиме після друку або електронної відправки. 
Експорт Резюме - можливість зберегти або завантажити резюме в різних 
форматах, таких як PDF або JPEG. 
Менеджер Резюме - системний компонент, який управляє збереженням та 
організацією резюме користувача. 
Враховуючи ці поняття, я створила UML діаграму класів для предметної 
області "Конструктор резюме". Класи представляють доменні об'єкти, а зв'язки 
між класами показуватимуть взаємодію між цими об'єктами. 
2.1.2 Елементи моделювання предметної області  
Для моделювання предметної області було використано єднальні елементи 
асоціації та залежності, графічний символ клас. 
Таблиця 2.1   
Елементи моделювання предметної області 
Клас 
 
 Відношення асоціації 
Відношення залежності 
 
 
Для кожного з доменних об'єктів ми можемо визначити такі 
характеристики: 
Користувач може мати ім'я, електронну адресу та пароль. 
Аккаунт пов'язаний з користувачем та може мати статус 
(активний/неактивний). 
Резюме має назву, шаблон та різні секції. 
Шаблон Резюме включає дизайн та структуру. 
Секція Резюме має назву та порядок. 
20 
ЧДТУ 242306.004ПЗ 
Елемент Секції містить конкретний зміст, наприклад, дати та описи. 
Кожен Елемент Секції може мати власні атрибути, такі як назва компанії, посада, 
період роботи, освітній заклад, спеціальність, роки навчання тощо. 
Редактор Резюме дозволяє виконувати дії з редагування, форматування та 
налаштування резюме, включаючи вибір шаблону, додавання, видалення та 
редагування секцій та елементів секцій. 
Попередній Перегляд Резюме надає візуалізацію кінцевого результату 
редагування перед збереженням або експортом резюме. 
Експорт Резюме включає опції збереження резюме в різних форматах для 
подальшого використання або надсилання потенційним роботодавцям. 
Менеджер Резюме забезпечує управління збереженими резюме, 
дозволяючи користувачеві переглядати, редагувати, видаляти або створювати 
нові резюме. 
2.1.3 Робоча область моделювання 
Робоча область моделювання для веб-застосунку «Конструктор резюме» 
охоплює процес створення, редагування, зберігання та ділення професійних 
резюме. Цей застосунок використовується користувачами (шукачами роботи) 
для створення резюме, що відповідають вимогам роботодавців, та допомагає їм 
ефективно представити свій професійний досвід, навички та освіту. 
 
 
Рисунок 2.1 -  Діаграма моделювання предметної області для застосунку 
створення резюме 
21 
ЧДТУ 242306.004ПЗ 
Клас Менеджер Резюме відіграє ключову роль у керуванні збереженими 
резюме користувача, забезпечуючи взаємодію між резюме та їх власниками. Цей 
клас спрямовує асоціюється з класом Резюме, який є центральним в цій системі 
та асоційований з шаблоном резюме та секціями, що утворюють структуру 
резюме. В свою чергу, клас Шаблон Резюме несе в собі інформацію про 
візуальну структуру та дизайн, які використовуються в резюме, тоді як клас 
Секція Резюме є контейнером для елементів, що детально описують кваліфікації 
та досягнення користувача.  
Кожен Елемент Секції відповідає за відображення таких полів як досвід 
роботи або освітній шлях. Щоб ці елементи виглядали належним чином, існує 
клас Редактор Резюме, який відповідає за фінальне редагування та 
форматування. Для того, щоб користувачі могли переглянути свої резюме перед 
їх завершенням, клас Попередній Перегляд Резюме надає інструменти для 
візуалізації. Коли резюме готове до розповсюдження, клас Експорт  
відповідатиме за функцію експорту резюме. 
Завдяки класу Користувач, кожен індивідуальний користувач системи 
може бути асоційований з одним чи більше резюме, забезпечуючи особисте 
власність і можливість управління своїми документами. Цей клас взаємодіє 
безпосередньо з класом Аккаунт, який є своєрідним засобом контролю за 
статусом і доступністю аккаунта користувача в системі, зберігаючи інформацію, 
яка може вплинути на дозволені дії користувача та доступ до функцій. 
2.2 Формування та аналіз вимог 
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні 
вимоги. Вимоги замовника і розробника. Функціональні та нефункціональні 
вимоги 
В процесі формування вимог до програмного забезпечення для 
"Конструктора резюме" були враховані потреби як замовників, так і розробників. 
Основною метою було забезпечення зручності та ефективності для кінцевих 
користувачів, а також технічної надійності та розширюваності для розробників. 
22 
ЧДТУ 242306.004ПЗ 
Вимоги були розподілені на первинні та вторинні, з урахуванням 
функціональних і нефункціональних аспектів, а також специфіки 
користувацького інтерфейсу та архітектури системи. 
Первинні вимоги: 
Вимоги замовника: 
– простота використання: Інтерфейс повинен бути інтуїтивно зрозумілим 
для користувачів без технічного фону; 
– доступність: Веб-сайт повинен бути доступним з різних пристроїв, 
включаючи мобільні та планшети; 
– індивідуалізація: Можливість кастомізації резюме за допомогою різних 
шаблонів та форматувань; 
– безпека: Захист персональних даних користувачів та їх резюме. 
Вимоги розробника: 
– технологічний стек: Використання ReactJS, Firebase, TailwindCSS, 
ReactQuery; 
– розширюваність: Архітектура повинна дозволяти легке додавання 
нових функцій; 
– тестування: Система повинна бути розроблена з урахуванням 
можливості автоматизованого тестування; 
Функціональні вимоги: 
‒ реєстрація/авторизація: користувачі можуть створювати та управляти 
своїми аккаунтами; 
‒ створення резюме: користувачі можуть створювати резюме, 
вибираючи з різноманітних шаблонів; 
‒ редагування резюме: користувачі можуть редагувати різні секції 
резюме та вносити зміни в контент; 
‒ збереження та управління резюме: користувачі можуть зберігати кілька 
версій резюме та управляти ними; 
‒ експорт резюме: резюме можна експортувати в різні формати, 
наприклад PDF або JPEG; 
23 
ЧДТУ 242306.004ПЗ 
‒ попередній перегляд: функція попереднього перегляду для перевірки 
кінцевого результату перед друком або відправленням. 
Вторинні вимоги: 
Нефункціональні вимоги: 
‒ продуктивність: веб-сайт повинен швидко завантажуватись та 
обробляти запити користувачів; 
‒ надійність: система повинна бути стабільною та з мінімальним часом 
простою; 
‒ масштабованість: веб-сайт повинен підтримувати збільшення кількості 
користувачів та даних; 
‒ безпека: захист від несанкціонованого доступу та витоку даних, 
використання сучасних методів шифрування для збереження та 
передачі персональних даних; 
‒ сумісність: веб-сайт повинен бути сумісним з різними браузерами та 
версіями операційних систем; 
‒ доступність: веб-сайт повинен бути доступним для людей з 
обмеженими можливостями, відповідати стандартам WCAG (Web 
Content Accessibility Guidelines). 
Вимоги до інтерфейсу користувача: 
‒ легкість навігації: меню та функціональні кнопки повинні бути легко 
доступні та зрозумілі; 
‒ адаптивний дизайн: інтерфейс повинен коректно відображатися на 
різних пристроях та розширеннях екрану; 
‒ візуальна привабливість: сучасний, чистий дизайн, що сприяє 
зручності використання; 
‒ інформаційна підтримка: наявність підказок, інструкцій або FAQ для 
допомоги користувачам у використанні сайту. 
Вимоги до архітектури та безпеки системи: 
‒ резервне копіювання та відновлення: регулярне резервне копіювання 
даних для захисту від втрати даних; 
24 
ЧДТУ 242306.004ПЗ 
‒ моніторинг та логування: запис подій та дій користувачів для 
спрощення виявлення та аналізу проблем; 
‒ тестування та підтримка; 
‒ розробка плану тестування: включення юніт-тестів, інтеграційних 
тестів, тестів навантаження та безпеки; 
‒ автоматизація тестування: використання інструментів автоматизації 
для підвищення ефективності тестування; 
‒ технічна підтримка: наявність служби підтримки для вирішення 
проблем користувачів та відповідей на запитання; 
‒ оновлення та патчі: регулярне оновлення програмного забезпечення 
для усунення вразливостей та покращення функціональності. 
Ці вимоги створюють міцну основу для розробки Веб-сайту "Конструктор 
резюме", забезпечуючи зручність і безпеку для користувачів, а також гнучкість і 
ефективність для розробників. 
2.2.2 Формування вимог за допомогою діаграми прецедентів 
На діаграмі ми бачимо двох акторів: "Користувач" і "Системний 
адміністратор". Кожен з них взаємодіє з системою через власні прецеденти. 
Починаючи з "Користувача": 
1 "Користувач" входить в систему через Реєстрацію(асоціація), що є 
передумовою для Входу в систему(асоціація). 
2 Після входу в систему, "Користувач" може виконати Створення 
користувача(асоціація), Редагування користувача(асоціація), 
Видалення користувача (асоціація), та Перегляд користувача 
(асоціація), що представляють основні операції з профілем. 
3 Для роботи з резюме, "Користувач" може вибрати Створення 
резюме(асоціація), яке включає Вибір шаблону(include), Заповнення 
інформацією(include), Редагування резюме(include), і Перегляд резюме 
(асоціація). Ці дії можуть включати подальше Збереження 
факту(include). 
25 
ЧДТУ 242306.004ПЗ 
4 Окрім цього, існує опція Подання шаблону(асоціація), яка може бути 
використана для додавання нових шаблонів до системи. 
Від "Системного адміністратора": 
"Системний адміністратор" має доступ до Моніторингу 
системи(асоціація), що дає можливість переглядати загальний стан системи та 
діяльності користувачів. 
Такі зв'язки на діаграмі демонструють, як користувачі та модератори 
взаємодіють з системою, які можливості перед ними відкриваються, та як ці 
можливості пов'язані одна з одною. 
 
 
Рисунок 2.2 – Діаграма прецедентів для застосунку створення резюме 
26 
ЧДТУ 242306.004ПЗ 
2.3. Проектування логічної структури програмного комплексу  
2.3.1 Діаграми класів 
Наведена діаграма демонструє зв'язки між окремими класами програми 
(рисунок 2.3). Клас AdminController є основним, від нього залежить клас User, 
оскільки адміністратор може керувати користувачем. Клас User в свою чергу має 
відношення асоціації з класом Resume – один користувач має одне резюме, та 
відношення залежності з класом AuthentificationService, оскільки користувач 
використовує автентифікацію для доступу до конструктора резюме. Клас Resume 
використовує Template (одне резюме використовує декілька шаблонів), водночас 
бачимо відношення агрегації – шаблон є частиною резюме. Відношенням 
композиції поєднані класи Resume та ResumeSection, оскільки резюме 
складається з секцій. 
 
 
Рисунок 2.3 – Діаграма класів для застосунку створення резюме 
 
 
27 
ЧДТУ 242306.004ПЗ 
В процесі моделювання діаграма класів була доповнена атрибутами. 
 
 
Рисунок 2.4 –Діаграма класів з атрибутами для застосунку створення 
резюме 
 
2.3.2 Діаграми пакетів 
На цій діаграмі пакетів представлено чотири пакети, які організують 
структуру системи з певним розподілом відповідальності: 
1. UserManagement: Містить класи, пов’язані з управлінням користувачами, 
включаючи класи User, AuthenticationService та UserProfile. Цей пакет відповідає 
за аутентифікацію та зберігання інформації про користувачів. 
2. ResumeBuilding: Включає класи, які задіяні в процесі створення 
резюме, такі як Resume, Template та ResumeSection. Цей пакет 
використовується для структурування та організації резюме. 
28 
ЧДТУ 242306.004ПЗ 
3. AdminTools: Містить інструменти для адміністратора, зокрема клас 
AdminController. Цей пакет відповідає за адміністративні функції та 
керування системою. 
4. Utilities: Пакет, який може включати різні утиліти, що 
використовуються різними частинами системи. 
Пунктирні стрілки використовуються для позначення зв'язку доступу, де 
один пакет використовує або має доступ до функціональності іншого пакету. 
AdminTools має доступ до функцій всередині UserManagement для 
адміністрування користувацьких облікових записів, до ResumeBuilduing – для 
налагодженого процесу створення резюме. UserManagement також має доступ до 
ResumeBuilduing для роботи зі створення резюме з користувацької сторони. 
Utilities можуть використовуватись незалежно від інших пакетів у разі потреби. 
 
 
Рисунок 2.5 – Діаграма пакетів для застосунку створення резюме 
29 
ЧДТУ 242306.004ПЗ 
2.4 Архітектурне проектування 
2.4.1 Діаграма компонентів 
На цій діаграмі компонентів зображено чотири основних компонента 
системи, які взаємодіють між собою для надання функціональності з управління 
резюме через веб-інтерфейс: 
1 Web Interface: Це точка входу для користувачів, через яку вони 
взаємодіють із системою. Він надає інтерфейс для "User Management"; 
2 User Management: Компонент, відповідальний за управління даними 
користувачів, такими як реєстрація, вхід, оновлення профілю тощо. 
Цей компонент взаємодіє з "Database" для збереження та отримання 
даних; 
3 Database: Централізований сховище для збереження всієї інформації, 
яку використовують інші компоненти системи. "User Management" 
зберігає та отримує дані з цієї бази даних, а "Template Processor" 
отримує дані від неї; 
4 Resume Builder Engine: Компонент, що відповідає за логіку створення 
та редагування резюме. Він також зберігає та отримує дані від 
"Database" і генерує шаблони резюме через "Template Processor"; 
5 Template Processor: Компонент, який обробляє та створює шаблони 
резюме. Він отримує дані від "Database" і генерує шаблони, які "Resume 
Builder Engine" може використовувати для створення резюме. 
Зв'язки між компонентами позначені лінією з колом відображають 
інтерфейс, через який один компонент надає послуги іншому. Наприклад, "User 
Management" та "Resume Builder Engine" надають інтерфейси для взаємодії з 
"Database". 
30 
ЧДТУ 242306.004ПЗ 
 
Рисунок 2.6 – Діаграма компонентів для застосунку створення резюме 
 
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма 
розгортання 
Ця діаграма розгортання показує фізичну структуру системи: 
1 Клієнтський пристрій: Відображено у вигляді прямокутника, 
представляє пристрій користувача, який взаємодіє з системою. 
2 Сервер застосунку: Великий прямокутник представляє сервер, який 
містить два компоненти: 
3 Веб-сервер: Представлено прямокутником в середині сервера 
застосунку, відповідає за обробку запитів веб-клієнта. 
4 База даних: Циліндр є традиційним символом для представлення баз 
даних, відображає систему для зберігання даних. 
5 Інтерфейс застосунку: Півкруг, який показує інтерфейс, через який веб-
сервер взаємодіє з базою даних. 
Стрілки показують напрямок комунікації: 
‒ Пунктирні стрілки: Вказують на використання інтерфейсу без 
створення постійного зв'язку, наприклад, HTTP запити між клієнтом та 
веб-сервером. 
31 
ЧДТУ 242306.004ПЗ 
‒ Суцільна лінія зі стрілкою: Представляє встановлене з'єднання між 
компонентами, такими як веб-сервер, що взаємодіє з базою даних. 
 
 
Рисунок 2.7 – Діаграма розгортання для застосунку створення резюме 
2.5 Моделювання поведінки системи 
2.5.1 Діаграма діяльності 
На діаграмі діяльності представлений процес роботи користувача з веб-
сайтом: 
1 Процес починається з відвідування веб-сайту. 
2 Потім відбувається перевірка: Користувач зареєстрований? Якщо ні, 
процес веде до реєстрації користувача, за якою слідує аутентифікація 
користувача. 
3 Якщо користувач уже зареєстрований, відразу відбувається 
аутентифікація користувача. 
4 Після аутентифікації відбувається заповнення особистої інформації. 
5 Наступний крок — перегляд та редагування резюме. 
6 Потім знову відбувається перевірка: Користувач задоволений резюме? 
Якщо так, він переходить до збереження резюме. 
7 Далі користувач вибирає формат для експорту резюме. 
8 І останнім кроком є сам експорт резюме. 
9 Процес завершується. 
32 
ЧДТУ 242306.004ПЗ 
 
Рисунок 2.8 – Діаграма діяльності для застосунку створення резюме 
 
2.5.2 Діаграма послідовності 
На цій діаграмі послідовності показаний взаємозв’язок між користувачем, 
веб-інтерфейсом, менеджером сесій, контролером резюме та сервером бази 
даних під час створення та зберігання резюме: 
1  Користувач ініціює процес, відправляючи запит на створення нового 
резюме через Web Interface. 
2 Web Interface передає запит Session Manager для перевірки/створення 
сесії. 
3 Session Manager підтверджує сесію і передає запит Resume Controller. 
4 Resume Controller запитує необхідні дані у Database Server для 
шаблону. 
5 Database Server надає дані, і Resume Controller передає запит на 
збереження резюме. 
6 Після збереження резюме в базі даних, Resume Controller відправляє 
підтвердження збереження назад до Session Manager. 
33 
ЧДТУ 242306.004ПЗ 
7 Session Manager передає підтвердження через Web Interface до 
користувача. 
Кожен крок представлений стрілками, що вказують напрямок потоку 
даних між компонентами системи, та розривними лініями, які показують 
зворотній відгук або підтвердження дій. 
 
 
Рисунок 2.9 – Діаграма послідовності для застосунку створення резюме 
 
2.5.3 Діаграма комунікації 
На діаграмі комунікацій відображено взаємодію користувача і компонентів 
системи у процесі створення резюме: 
1  Користувач ініціює створення резюме, відправляючи запит через Веб-
інтерфейс. 
2 Веб-інтерфейс взаємодіє з Системою управління станами для перевірки 
сесії. 
3 Система управління станами надає підтвердження сесії назад Веб-
інтерфейсу. 
4 Веб-інтерфейс передає дані користувача до Контролера резюме для 
обробки. 
34 
ЧДТУ 242306.004ПЗ 
5 Контролер резюме запитує та відправляє необхідні дані до Сервера 
бази даних. 
6 Сервер бази даних зберігає ці дані та надає відповідь Контролеру 
резюме. 
7 Після завершення, інформація про успішне створення та збереження 
резюме передається назад до користувача через Веб-інтерфейс. 
Стрілки між компонентами представляють напрямок комунікації та 
передачу даних. 
 
 
Рисунок 2.10 – Діаграма комунікації для застосунку створення резюме 
 
2.5.4 Діаграма скінченного автомату 
Ця діаграма скінченного автомату показує стани та переходи процесу 
редагування резюме: 
1 Процес починається зі стану Авторизації, де користувач має ввійти в 
систему. 
2  Після авторизації відбувається перехід до стану Редагування резюме,  
3 де користувач може вносити зміни до свого резюме. 
4 Звідти користувач може перейти до Перегляду резюме, щоб перевірити 
зроблені зміни. 
5 Після перегляду можливий повернення до стану Редагування резюме, 
якщо потрібно зробити додаткові зміни. 
35 
ЧДТУ 242306.004ПЗ 
6 Якщо з резюме все в порядку, можна перейти до стану Зберегти, де 
резюме буде збережено. 
7 Процес завершується. 
Чорні кружечки вказують на початковий та кінцевий стани, а стрілки 
показують напрямок переходу від одного стану до іншого. 
 
 
Рисунок 2.11 – Діаграма скінченного автомату для застосунку створення 
резюме 
 
У цьому розділі проведено комплексний аналіз та моделювання 
предметної області для роботи "Конструктор резюме". Було визначено основні 
доменні об'єкти та їх взаємозв'язки, створено UML діаграми класів, пакетів, 
компонентів, а також діаграми розгортання та послідовності. Детально 
сформульовані функціональні та нефункціональні вимоги забезпечили чітке 
розуміння необхідних характеристик та функцій системи. Розроблені моделі 
поведінки системи, такі як діаграми діяльності та комунікації, продемонстрували 
взаємодію між користувачами та компонентами системи. 
 
 
 
  
36 
ЧДТУ 242306.004ПЗ 
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО 
ЗАБЕЗПЕЧЕННЯ 
3.1 Розробка програмного комплексу 
3.1.1 Обґрунтування засобів реалізації 
Мова програмування та фреймворки 
1 ReactJS - це широко використовуваний JavaScript фреймворк для 
створення користувацьких інтерфейсів. Його вибір виправданий зручністю 
розробки складних, інтерактивних веб-інтерфейсів, що динамічно змінюються 
залежно від даних користувача. ReactJS використовує декларативний підхід, що 
допомагає легше передбачати поведінку програми та менше робити помилок під 
час розробки. 
2 Node.js - платформа на базі движка V8 JavaScript, що дозволяє 
виконувати JavaScript код на стороні сервера. Вибір Node.js зумовлений його 
асинхронністю і подієорієнтованістю, що є ідеальним для обробки великої 
кількості запитів, що не вимагають великої обчислювальної потужності, як це 
часто має місце у веб-додатках. 
Бази даних та управління даними 
1 Firebase - це хмарна платформа від Google, яка надає послуги реального 
часу для баз даних та хостингу, а також аутентифікацію користувачів. 
Firebase інтегрується з ReactJS, забезпечуючи швидке налаштування і 
легке управління даними. Вибір Firebase виправданий також його 
можливостями автоматичного масштабування та обслуговування, 
знижуючи потребу в ручному управлінні інфраструктурою. 
2 React Query - бібліотека для управління станом та серверними запитами 
в React додатках. Вона допомагає ефективно керувати кешуванням, 
синхронізацією даних та оновленням стану компонентів на основі змін 
37 
ЧДТУ 242306.004ПЗ 
у даних, забезпечуючи високу продуктивність та кращий досвід 
користувача. 
Інструменти та середовище розробки 
1 Visual Studio Code - легкий, але потужний редактор коду, який 
підтримує безліч розширень та плагінів для різних мов програмування 
та технологій. Його гнучкість та налаштування забезпечують зручне 
середовище для розробки веб-додатків. 
2 Chrome - веб-браузер з потужними інструментами для розробників, які 
дозволяють тестувати і дебажити веб-додатки безпосередньо в 
браузері, що робить процес розробки швидшим і ефективнішим. 
3 Tailwind CSS - це утилітарний фреймворк для CSS, який дозволяє 
швидко стилізувати елементи сторінки без потреби писати багато 
власного CSS коду. Його використання сприяє консистентності 
дизайну та швидкій розробці. 
4 Prettier - інструмент для автоматичного форматування коду, що 
допомагає підтримувати чистоту та єдність стилю кодування в команді 
розробників. 
5 Google Fonts - забезпечує легкий доступ до великої колекції шрифтів, 
що можуть бути легко інтегровані в веб-дизайн, забезпечуючи високу 
естетику та читабельність тексту на сайті. 
3.1.2 Опис структурної (функціональної) схеми 
Структурна схема веб-сайту для створення включає компоненту веб-сайт 
та підкомпоненти сторінки веб-сайту: 
1 Форма автентифікації – авторизація користувача; 
2 Особистий профіль – сторінка для операцій над власними резюме та 
вподобанимми шаблонами; 
3 Редагування резюме – безпосередня сторінка шаблону з можливістю 
редагування; 
38 
ЧДТУ 242306.004ПЗ 
4 Збереження резюме – збереження створеного резюме. 
 
 
Рисунок 3.1 – Структурна схема 
 
Функціональна діаграма демонструє інформаційні потоки та взаємодію 
компонентів від автентифікації до збереження резюме. При автентифікації 
виконується введення особистих даних користувачем за допомогою інтерфейсу 
форми автентифікації, далі отримані дані заносяться в базу даних та передаються 
в профіль користувача, де також зберігаються вже створені резюме. 
Перейшовши на сторінку редагування шаблонів користувач має можливість 
ввести зміни ввівши нові дані. Зміни зберігаються в базі даних, при необхідності 
зберегти копію документу локально користувач здійснює експорт в обраному 
форматі. 
 
 
Рисунок 3.2 – Функціональна схема  
39 
ЧДТУ 242306.004ПЗ 
3.1.3 Опис логічної схеми системи 
Програма створення резюме створена таким чином, що залежно від виду 
користувача – адміністратор, авторизований користувач, неавторизований 
користувач алгоритм функціонування системи відрізняється. 
Таким чином адміністратор має пройти автентифікацію, далі він має 
можливість сворити своє резюме з подальшим експортом або додати певне 
резюме до колекції, переглянути свій профіль або додати новий шаблон резюме.  
Авторизований користувач має схожу логічну схему за винятком додання 
нових шаблонів, це поле меню не доступне. 
Неавторизований користувач має можливість створення та експорту 
резюме з використанням наявних шаблонів. 
Далі наведено діаграми діяльності для кожного користувача. 
 
 
Рисунок 3.3 – Діаграма діяльності 
40 
ЧДТУ 242306.004ПЗ 
3.1.4 Розробка бази даних 
При створенні бази даних було використано Firebase. Бази даних Firebase, 
будь то його Realtime Database або Cloud Firestore, є документно-орієнтованими 
NoSQL базами даних. Тут немає таблиць, лише колекції документів, де кожен 
документ є JSON-подібною структурою, і документи можуть містити інші 
вбудовані колекції або документи.  
Було створено дві колеції: users – заповнюється при автентифікації 
користувачів та templates – заповнюється при створенні шаблону 
адміністратором. В той час як для звичайного користувача дані колекції логічно 
незалежні один від одного для користувача адміністратора мають сенс 
концептуальні, логічні та фізичні моделі. 
 
 
Рисунок 3.4 – Концептуальна, логічна та фізична модель для застосунку 
створення резюме 
41 
ЧДТУ 242306.004ПЗ 
3.1.5 Розробка інтерфейсу користувача 
При розробці інтерфейсу користувача було враховано вимоги 
запропоновані Якобом Нільсеном [6]. Серед них: 
1 Зрозумілий стан системи – для можливості користувача 
відслідковувати поточний стан системи було використано спіннер при 
завантаженні сторінок та спливаючі повідомлення (рисунок 3.7, 3.8 відповідно). 
 
    
Рисунок 3.7– Спіннер,  3.8 – Спливаюче повідомлення 
 
2 Відповідність між системою та реальним світом – було 
використано знайоме позначення лупи для відображення не знайдених шаблонів, 
символи серця – для додання шаблону до вподобаних, та зображення папки для 
додання до колекції. 
 
       
Рисунок 3.9 – Лупа,  3.10 - Символи вподобання та збереження до папки 
 
3 Користувацький контроль та свобода – відображені у редагуванні 
шаблонів та обмеженні видів файлів для імпорту шаблону. 
42 
ЧДТУ 242306.004ПЗ 
 
      
Рисунок 3.11 – Редагування резюме, 3.12 – Помилка при імпорті файлу 
PDF 
 
 Послідовність та стандарти прослідковуються в загальній структурі сайту 
зі стрічкою пошуку у верхній частині сторінки разом з іконкою профілю 
користувача. 
 
 
Рисунок 3.13 – Головна сторінка, верхня частина 
 
4 Запобігання помилкам можна побачити при автентифікації 
користувача, де було використано провайдери для забезпечення правильного 
вводу вхідних даних. 
43 
ЧДТУ 242306.004ПЗ 
 
Рисунок 3.14 – Автентифікація 
 
5 Розпізнавання, а не вгадування було забезпечено на сторінці 
шаблону надаючи користувачу можливість виконати всі необхідні дії просто 
натиснувши відповідну іконку. 
 
 
Рисунок 3.15 – Дії над шаблоном 
 
6 Гнучкість та ефективність використання – була створена стрічка з 
пропозиціями шаблонів для різних спеціальностей. 
 
 
Рисунок 3.16 – Стрічка пропозицій 
44 
ЧДТУ 242306.004ПЗ 
 
7 Естетичний і мінімалістичний дизайн – при створенні сайту було 
обрано загальний шрифт та основні кольори для забезпечення естетики та 
мінімалізму. Також всі кнопки виділені кольорем, забезпечена читабельність 
тексту. 
 
 
Рисунок 3.17 – Сторінка профілю користувача 
 
3.1.6 Опис розробки програмних компонентів  
Основна директорія з вихідним кодом проекту src містить наступні 
піддиректорії та файли: 
‒ animations: Директорія для анімаційних ефектів, які можуть 
використовуватися у проекті. 
‒ api: Директорія для API викликів. Тут розміщуються модулі для 
взаємодії з зовнішніми сервісами або бекендом. 
‒ assets: Директорія для збереження ресурсів, таких як зображення, 
шрифти тощо. 
‒ components: Директорія для React компонентів, які можуть бути 
використані в різних частинах додатку. 
‒ config: Директорія для конфігураційних файлів, що містять 
налаштування проекту. 
45 
ЧДТУ 242306.004ПЗ 
‒ containers: Директорія для контейнерів, які можуть об’єднувати 
компоненти та забезпечувати їх логікою. 
‒ designs: Директорія для збереження дизайнів або стилів проекту. 
‒ hooks: Директорія для користувацьких React хуків. 
‒ pages: Директорія для компонентів сторінок, які відповідають 
окремим маршрутам в додатку. 
‒ utils: Директорія для утилітних функцій і хелперів. Вона містить 
файл helpers.js, який може включати загальні функції, що 
використовуються в різних частинах проекту. 
Опис модулів у папці pages: 
1 Authentication.jsx 
Призначення: 
Цей компонент відповідає за сторінку аутентифікації користувача. Він 
дозволяє користувачам увійти до системи за допомогою облікових записів 
Google або GitHub. 
Зв’язки з іншими компонентами: 
‒ Використовує логотип з ../assets. 
‒ Використовує іконки з react-icons. 
‒ Використовує компонент Footer з ../containers. 
‒ Використовує компоненти AuthButtonWithProvider та MainSpinner з 
../components. 
‒ Використовує хук useUser з ../hooks. 
Особливості реалізації алгоритму: 
‒ Використовує хук useEffect для перенаправлення користувача на 
головну сторінку, якщо він вже аутентифікований. 
‒ Відображає спінер під час завантаження даних користувача. 
‒ Відображає кнопки для входу через Google та GitHub. 
Фрагмент коду: 
useEffect(() => { 
46 
ЧДТУ 242306.004ПЗ 
  if (!isLoading && data) { 
    navigate("/", { replace: true }); 
  } 
}, [isLoading, data, navigate]); 
if (isLoading) { 
  return <MainSpinner />; 
} 
// Відображення інтерфейсу аутентифікації 
return ( 
  <div className="w-full h-screen overflow-hidden flex flex-col items-start 
justify-start px-6 py-4 gap-6"> 
    <img src={Logo} className="w-12 h-auto object-contain" alt="" /> 
    <div className="w-full flex flex-1 flex-col items-center justify-center gap-
6"> 
      <p className="text-3xl lg:text-4xl text-blue-700"> 
        Welcome to Resume Builder 
      </p> 
      <p className="text-base text-txtPrimary">a great way to create 
resume</p> 
      <p className="text-2xl text-gray-600">Authenticate</p> 
      <div className="w-full lg:w-96 p-4 rounded-md flex flex-col items-center 
justify-start gap-6"> 
        <AuthButtonWithProvider 
          Icon={FaGoogle} 
          label={"Signin with Google"} 
          provider={"GoogleAuthProvider"} 
        /> 
        <AuthButtonWithProvider 
          Icon={FaGithub} 
          label={"Signin with GitHub"} 
          provider={"GitHubAuthProvider"} 
        /> 
      </div> 
    </div> 
    <Footer /> 
  </div> 
); 
2  CreateResume.jsx 
Призначення: 
47 
ЧДТУ 242306.004ПЗ 
Цей компонент відповідає за створення резюме. Він відображає доступні 
шаблони, з яких користувач може вибрати для створення свого резюме. 
Зв’язки з іншими компонентами: 
‒ Використовує TemplatesData з ../utils/helpers. 
‒ Використовує компонент MainSpinner з ../components. 
‒ Використовує хук useTemplates з ../hooks. 
Особливості реалізації алгоритму: 
‒ Завантажує шаблони за допомогою хука useTemplates. 
‒ Перенаправляє на головну сторінку, якщо шаблони не 
завантажені. 
‒ Відображає список шаблонів за допомогою маршрутизації. 
Фрагмент коду: 
if (temp_isLoading) { 
  return <MainSpinner />; 
} 
 
if (!templates) { 
  return navigate("/", { replace: true }); 
} 
return ( 
  <div className="w-full flex flex-col items-center justify-start py-4"> 
    <Routes> 
      {TemplatesData.map((template) => ( 
        <Route 
          key={template.id} 
          path={`/${template.name}`} 
          Component={template.component} 
        /> 
      ))} 
    </Routes> 
  </div> 
); 
3 CreateTemplate.jsx 
Призначення: 
48 
ЧДТУ 242306.004ПЗ 
Цей компонент дозволяє адміністраторам створювати нові шаблони для 
резюме. Він включає функції завантаження зображень, додавання тегів та 
збереження шаблону до бази даних. 
Зв’язки з іншими компонентами: 
‒ використовує хук useUser з ../hooks. 
‒ використовує adminIds, initialTags з ../utils/helpers. 
‒ використовує хук useTemplates з ../hooks. 
‒ використовує PuffLoader з react-spinners. 
‒ використовує toast з react-toastify. 
‒ використовує db та storage з ../config/firebase.config. 
Особливості реалізації алгоритму: 
‒ завантажує зображення до Firebase Storage. 
‒ створює новий документ у Firestore з даними шаблону. 
‒ видаляє зображення та шаблони з Firebase. 
Фрагмент коду: 
const pushTemplateData = async () => { 
  const timeStamp = serverTimestamp(); 
  const id = `${Date.now()}`; 
  const _doc = { 
    _id: id, 
    title: formData.title, 
    imageURL: imageAsset.imageURL, 
    tags: selectedTags, 
    name: templates && templates.length > 0 ? `Template${templates.length + 
1}` : "Template1", 
    timeStamp: timeStamp, 
  }; 
  setDoc(doc(db, "templates", id), _doc) 
    .then(() => { 
      setFormData((prevData) => ({ 
        ...prevData, 
        title: "", 
        imgUrl: null, 
      })); 
      setImageAsset((prevAsset) => ({ ...prevAsset, imageURL: null })); 
      setSelectedTags([]); 
49 
ЧДТУ 242306.004ПЗ 
      refetch(); 
    }) 
    .catch((err) => { 
      toast.error(`Error : ${err.message}`); 
    }); 
}; 
4 Home.jsx 
Призначення: 
Цей компонент є головною сторінкою додатку. Він включає 
маршрутизацію до різних частин додатку, таких як створення шаблонів, 
перегляд профілю користувача тощо. 
Зв’язки з іншими компонентами: 
‒ використовує компонент Header з ../containers. 
‒ використовує маршрути до компонентів CreateResume, CreateTemplate, 
HomeTemplates, UserProfile з ../pages. 
‒ використовує компонент MainSpinner з ../components. 
Особливості реалізації алгоритму: 
Використовує React Suspense для відкладеного завантаження компонентів.  
Фрагмент коду: 
return ( 
  <div className="w-full flex flex-col items-center justify-center"> 
    <Header /> 
    <main className="w-full"> 
      <Suspense fallback={<MainSpinner />}> 
        <Routes> 
          <Route path="/" element={<HomeTemplates />} /> 
          <Route path="/template/create" element={<CreateTemplate />} /> 
          <Route path="/profile/:uid" element={<UserProfile />} /> 
          <Route path="/resume/*" element={<CreateResume />} /> 
          <Route path="/resumeDetail/:templateId" 
element={<TemplateDesignPinDetails />} /> 
50 
ЧДТУ 242306.004ПЗ 
        </Routes> 
      </Suspense> 
    </main> 
  </div> 
); 
5. HomeTemplates.jsx 
Призначення: 
Цей компонент відображає доступні шаблони резюме на головній сторінці. 
Він також включає фільтрацію шаблонів за тегами. 
Зв’язки з іншими компонентами: 
‒ використовує компоненти Filters, MainSpinner, TemplateDesignPin з 
../components. 
‒ використовує TemplatesData з ../utils/helpers. 
‒ використовує хук useTemplates з ../hooks. 
‒ використовує AnimatePresence з framer-motion. 
‒ використовує хук useFilters з ../hooks. 
Особливості реалізації алгоритму: 
‒ фільтрує шаблони за тегами та відображає їх на сторінці. 
‒ використовує useEffect для застосування фільтрації при зміні 
пошукового запиту. 
Фрагмент коду: 
useEffect(() => { 
  filterTemplates(); 
}, [templates, gbl_SearchData?.filter, gbl_SearchData?.searchTerm]); 
if (temp_isLoading) { 
  return <MainSpinner />; 
} 
return ( 
  <div className="w-full px-4 lg:px-12 py-6 flex flex-col items-center justify-
start"> 
51 
ЧДТУ 242306.004ПЗ 
    <Filters /> 
    {temp_isError ? ( 
      <p>Something went wrong please try again later</p> 
    ) : ( 
      <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 
2xl:grid-cols-4 gap-2"> 
        <RenderTemplete templates={filtererData} /> 
      </div> 
    )} 
  </div> 
); 
6. UserProfile.jsx 
Призначення: 
Цей компонент відображає профіль користувача, включаючи його 
збережені резюме та колекції шаблонів. 
Зв’язки з іншими компонентами: 
‒ використовує хук useUser з ../hooks. 
‒ використовує AnimatePresence з framer-motion. 
‒ використовує компонент MainSpinner, TemplateDesignPin з 
../components. 
‒ використовує хук useTemplates з ../hooks. 
‒ використовує хук useQuery з react-query. 
‒ використовує функцію getSavedResumes з ../api. 
‒ використовує зображення NoData з ../assets. 
Особливості реалізації алгоритму: 
‒ використовує React State для управління активною вкладкою профілю. 
‒ використовує useEffect для перевірки аутентифікації користувача. 
‒ відображає збережені резюме та колекції шаблонів користувача. 
Фрагмент коду: 
const RenderTemplate = ({ templates }) => { 
52 
ЧДТУ 242306.004ПЗ 
  return ( 
    <React.Fragment> 
      {templates && templates.length > 0 && ( 
        <React.Fragment> 
          <AnimatePresence> 
            {templates.map((template, index) => ( 
              <TemplateDesignPin key={template?._id} data={template} 
index={index} /> 
            ))} 
          </AnimatePresence> 
        </React.Fragment> 
      )} 
    </React.Fragment> 
  ); 
}; 
return ( 
  <div className="w-full flex flex-col items-center justify-start py-12"> 
    <div className="w-full h-72 bg-blue-500"> 
      <img 
        src="https://images.unsplash.com/photo-1497032628192-
86f99bcd76bc?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%
3D&auto=format&fit=crop&w=1470&q=80" 
        alt="" 
        className="w-full h-full object-cover" 
      /> 
      <div className="flex items-center justify-center flex-col gap-4"> 
        {user?.photoURL ? ( 
          <img 
            src={user?.photoURL} 
53 
ЧДТУ 242306.004ПЗ 
            className="w-24 h-24 rounded-full border-2 border-white -mt-12 
shadow-md" 
            alt="" 
            referrerPolicy="no-referrer" 
            loading="lazy" 
          /> 
        ) : ( 
          <img 
            src={ 
              "https://img.freepik.com/premium-vector/adorable-cyberpunk-dj-
vector_868778-499.jpg" 
            } 
            className="w-24 h-24 rounded-full border-2 border-white -mt-12 
shadow-md" 
            alt="" 
            referrerPolicy="no-referrer" 
            loading="lazy" 
          /> 
        )} 
        <p className="text-2xl text-txtDark">{user?.displayName}</p> 
      </div> 
      <div className="flex items-center justify-center mt-12"> 
        <div 
          onClick={() => { 
            setActiveTab("collections"); 
          }} 
          className={`px-4 py-2 rounded-md flex items-center justify-center gap-
2 group cursor-pointer `} 
        > 
          <p 
54 
ЧДТУ 242306.004ПЗ 
            className={`text-base text-txtPrimary  group-hover:text-blue-600 px-4 
py-1 rounded-full ${ 
              activeTab === "collections" && "bg-white shadow-md text-blue-600" 
            }`} 
          > 
            Collections 
          </p> 
        </div> 
        <div 
          onClick={() => { 
            setActiveTab("resumes"); 
          }} 
          className={`px-4 py-2 rounded-md flex items-center justify-center gap-
2 group cursor-pointer  `} 
        > 
          <p 
            className={`text-base text-txtPrimary  group-hover:text-blue-600 px-4 
py-1 rounded-full ${ 
              activeTab === "resumes" && "bg-white shadow-md text-blue-600" 
            }`} 
          > 
            My Resumes 
          </p> 
        </div> 
      </div> 
      <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 
2xl:grid-cols-4 gap-2 px-4 py-6"> 
        <AnimatePresence> 
          {activeTab === "collections" && ( 
            <React.Fragment> 
55 
ЧДТУ 242306.004ПЗ 
              {user?.collections && user.collections.length > 0 ? ( 
                <RenderTemplate 
                  templates={templates?.filter((temp) => 
                    user?.collections?.includes(temp?._id) 
                  )} 
                /> 
              ) : ( 
                <div className="col-span-12 w-full flex flex-col items-center 
justify-center gap-3"> 
                  <img src={NoData} className="w-32 h-auto object-contain" alt="" 
/> 
                  <p>No data</p> 
                </div> 
              )} 
            </React.Fragment> 
          )} 
          {activeTab === "resumes" && ( 
            <React.Fragment> 
              {savedResumes && savedResumes.length > 0 ? ( 
                <RenderTemplate templates={savedResumes} /> 
              ) : ( 
                <div className="col-span-12 w-full flex flex-col items-center 
justify-center gap-3"> 
                  <img src={NoData} className="w-32 h-auto object-contain" alt="" 
/> 
                  <p>No Saved Resumes</p> 
                </div> 
              )} 
            </React.Fragment> 
          )} 
56 
ЧДТУ 242306.004ПЗ 
        </AnimatePresence> 
      </div> 
    </div> 
  </div> 
); 
 
Ці компоненти утворюють основну структуру сторінок у додатку Resume 
Builder. Вони включають функціонал для аутентифікації користувачів, 
створення та вибору шаблонів резюме, а також управління профілем 
користувача. Компоненти використовують різні хуки для взаємодії з API та 
базою даних, а також для управління станом додатку. 
3.2 Тестування системи  
3.2.1 Модульне тестування 
В процесі написання коду програми було виконане модульне тестування за 
допомогою платформи Cypress. В результаті були успішно протестовані такі 
модулі: 
1 AuthButtonWithProvider.jsx – кнопка автентифікації 
 
 
Рисунок 3.18 – Виконання тесту AuthButtonWithProvider.cy.jsx 
57 
ЧДТУ 242306.004ПЗ 
 
2 Filters.jsx - список фільтрів  
 
Рисунок 3.19 – Виконання тесту Filters.cy.jsx 
 
3 MainSpinner.jsx – спіннер 
 
 
Рисунок 3.20 – Виконання тесту MainSpinner.cy.jsx 
58 
ЧДТУ 242306.004ПЗ 
 
 
Рисунок 3.21 – Тести в Cypress 
 
Таблиця 3.1 
Результати модульного тестування 
 
Компонент Результат 
AuthButtonWithProvider.jsx Успішний запуск 
Filters.jsx Успішний запуск 
MainSpinner.jsx Успішний запус 
 
3.2.2 Інтеграційне тестування 
У ході інтеграційного тестування було перевірено запуск домашньої 
сторінки з усіма відповідними компонентами (рисунок 3.22), зв‘язки з хедером 
та домашньою сторінкою, з переходом на сторінку автентифікації (рисунок 3.23) 
та взаємодію спіннера та сторінки при завантаженні (рисунок 3.24). 
 
 
Рисунок 3.22 – Успішний запуск домашньої сторінки 
 
59 
ЧДТУ 242306.004ПЗ 
 
Рисунок 3.23 – Виконання тестів хедера та переходу до автентифікації 
 
 
Рисунок 3.24 – Виконання тестів спіннера 
 
Таблиця 3.2 
Результати інтеграційного тестування 
 
Компонент Результат 
Index.js + App.jsx Успішний запуск 
Header.jsx + App.jsx + Успішний запуск 
Authentification.jsx 
HomeTemplates.jsx + Успішний запуск 
MainSpinner.jsx 
60 
ЧДТУ 242306.004ПЗ 
 
3.2.3 Системне тестування 
У ході системного тестування було перевірено відповідність вимогам 
замовника. Було обрано тестування вручну, оскільки системне тестування 
передбачає тестування «чорної скриньки», яке може бути виконане зовнішнім 
користувачем без інструментів автоматизації.  Для цього були розроблені 
відповідні сценарії. 
Сценарій 1: Оцінка інтуїтивності інтерфейсу 
 Виконати наступні завдання: 
– зареєструватися на веб-сайті. 
– увійти до системи. 
- створити нове резюме, використовуючи один з доступних шаблонів. 
- зберегти та переглянути створене резюме. 
Виконання наведених дій зайняло близько 5 хвилин, що свідчить про 
зрозумілий та легкий для навігації інтерфейс. 
Сценарій 2: Тестування адаптивності інтерфейсу 
Кроки: 
1 Відкрийте веб-сайт у різних браузерах 
2 Перевірте відображення основних елементів інтерфейсу на кожному 
з браузерів. 
3 Відкрийте сайт на симуляції телефону 
 
 
Рисунок 3.25 – Сайт у браузері Chrome 
61 
ЧДТУ 242306.004ПЗ 
 
Рисунок 3.26 – Сайт у браузері Safari 
 
 
Рисунок 3.27 – Сайт у браузері Firefox 
62 
ЧДТУ 242306.004ПЗ 
 
Рисунок 3.28 – Сайт у браузері Chrome з симуляцією телефону 
 
Запуск сайту в різних браузерах та на симуляції телефону відбувся 
успішно, всі елементи сторінки були відображені, що свідчить про адаптивність 
інтерфейсу. 
Сценарій 3: Тестування функціональності кастомізації резюме 
Кроки: 
1 Увійдіть до системи. 
2 Перейдіть на сторінку створення резюме. 
3 Виберіть різні шаблони резюме. 
4 Змініть текст в резюме. 
5 Збережіть та перегляньте кожне кастомізоване резюме. 
 
 
Рисунок 3.29 – Внесення змін у перший шаблон 
63 
ЧДТУ 242306.004ПЗ 
 
Рисунок 3.30 – Внесення змін у другий шаблон 
 
 Усі кроки сценарію були виконані успішно, тестування 
кастомізації виконане. 
Сценарій 4: Тестування безпеки персональних даних 
Кроки: 
1 Увійдіть до системи. 
2 Перевірте, що дані користувача доступні тільки після входу. 
 
Рисунок 3.31 – Права частина хедера до входу в акаунт 
 
64 
ЧДТУ 242306.004ПЗ 
 
Рисунок 3.32 - Права частина хедера після входу в акаунт 
 
При запуску сторінки без логіну, у користувача немає можливості 
переглянути особисті дані, оскільки на місці кнопки профіля знаходиться кнопка 
автентифікації. Таким чином було забезпечено безпеку персональних даних.  
 
Таблиця 3.3 
Результати системного тестування 
Сценарій Результат 
Оцінка інтуїтивності інтерфейсу Виконано успішно 
Тестування адаптивності інтерфейсу Виконано успішно 
Тестування функціонування Виконано успішно 
кастомізації резюме 
Тестування безпеки персональних Виконано успішно 
даних 
 
65 
ЧДТУ 242306.004ПЗ 
3.2.4 Приймальне тестування 
Для приймального тестування було застосованно середовище Selenium 
IDE. Для тестування було записано дії на екрані, які вкдючали вхід, редагування 
шаблону, експорт, вхід в особистий акаунт та вихід з нього. Всі тести були 
пройдені успішно. 
 
 
Рисунок 3.33 – Тестування в середовищі Selenium IDE 
Таблиця 3.4 
Результати приймального тестування 
 Command Target 
open / 
Вхід 
set window size 816x789 
click css=.active\3Ascale-95 
Редагування шаблону click css=.w-full:nth-child(1) > .text-
lg 
66 
ЧДТУ 242306.004ПЗ 
click css=.aZvCDf:nth-child(1) 
.yAlK0b 
click css=.absolute 
click linkText=Edit this template 
click css=.flex:nth-child(1) > .text-
sm:nth-child(2) 
click name=fullname 
click name=fullname 
click css=.h-full > .w-full 
click css=.flex:nth-child(1) > .text-
sm:nth-child(2) 
click css=.h-full > .w-full 
Експорт резюме click css=.text-2xl:nth-child(2) 
Вхід в профіль click css=.w-12 > .w-full 
click linkText=My Account 
Вихід з акаунту 
click css=.items-end 
 
3.3 Приклади впровадженого програмного комплексу 
1 Найперша сторінка сайту надає можливість переглянути шаблони та 
відфільтрувати їх за професією без можливості редагування. Для 
доступу до головного функціоналу необхідно авторизуватись у системі 
за допомогою запропонованих провайдерів. 
 
 
Рисунок 3.34 – Перша сторінка сайту 
67 
ЧДТУ 242306.004ПЗ 
 
Рисунок 3.35 – Перегляд шаблону без можливості редагування 
 
2 При натисненні кнопки «Login» користувач переходить на сторінку 
автентифікації, з можливістю входу за допомогою Google або GitHub 
(рисунок 3.36).  
 
Рисунок 3.36 – Сторінка автентифікації 
 
3 Після обрання способу входу, користувач переходить на сторінку 
відповідного провайдера. 
68 
ЧДТУ 242306.004ПЗ 
 
Рисунок 3.37 - Сторінка провайдера Google 
 
4 Пройшовши авторизацію користувач повертається на домашню 
сторрінку вже з можливостями редагування резюме та управління 
особистим акаунтом. 
4.1 При авторизації як адміністратор зʼявляється можливлість додання 
нового шаблону резюме у меню користувача. Для створення нового 
шаблону треба завантажити файл у форматі png., pdf. або jpeg. Після 
завантаження, шаблон відображається на домашній сторінці. 
 
 
Рисунок 3.38 - Меню адміністратора 
 
69 
ЧДТУ 242306.004ПЗ 
 
Рисунок 3.39 – Сторінка завантаження нового шаблону 
 
4.2 Для звичайного авторизованого користувача можливість додання 
шаблону резюме відсутня, проте весь інший функціонал збігається 
з адміністратором. 
 
 
Рисунок 3.40 – Меню звичайного користувача 
 
70 
ЧДТУ 242306.004ПЗ 
5 Для обрання шаблону користувач може використати лінію пошуку або 
наведені фільтри. Для очищення фільтрів натискається Х в кінці лінії 
пошуку або іконка очищення на початку рядку фільтрів. 
 
 
Рисунок 3.41 – Пошук шаблону резюме 
6 При натисненні на шаблон резюме відкривається сторінка шаблону. Є 
можливість перейти знову на домашню сторінку для перегляду інших 
резюме при натиску області «Discover More». Для редагування 
потрібно натиснути зелену кнопку «Edit this template».  
 
 
Рисунок 3.42 – Сторінка шаблону 
71 
ЧДТУ 242306.004ПЗ 
У нижній частині сторінки надається можливість збереження шаблону до 
колекції або до улюблених та рекомендації схожих шаблонів. 
 
Рисунок 3.43 – Нижня частина сторінки шаблону 
7 Після натискання кнопки редагування, користувач переходить на 
сторінку редагування шаблону. Над резюме відображені кнопки зліва направо: 
режим редагування та перегляду, збереження до колекції, експорт у форматах 
pdf., png., jpg., svg. 
8  
 
Рисунок 3.44 – Сторінка редагування, режим перегляду 
 
При зміні режиму перегляду на режим редагування користувач може 
вносити зміни до документу, що включає в себе зміну тексту, завантаження 
зображення при натиску на фотографію,  видалення та додавання секцій при 
натисненні на відповідні іконки смітника та плюса. 
 
72 
ЧДТУ 242306.004ПЗ 
 
Рисунок 3.44 – Сторінка редагування, режим редагування 
 
При завершенні внесення змін користувач може зберегти отримане резюме 
в акаунті або експортувати в бажаному форматі. 
9 При переході за допомогою меню користувача до особистого 
акаунта можна переглянути резюме та шаблон збережені в колекціях та власні 
резюме.  
 
 
Рисунок 3.45 – Сторінка особистого акаунту, колекції 
73 
ЧДТУ 242306.004ПЗ 
 
Рисунок 3.45 – Сторінка особистого акаунту, мої резюме 
 
Також при натисканні на шаблон або резюме відкривається вікно 
редагування (рисунок 3.42). 
10 Для виходу з акаунту потрібно натиснути кнопку «Sign Out»  в 
меню користувача (рисунок 3.39, 3.40).  
  
74 
ЧДТУ 242306.004ПЗ 
ВИСНОВОК ДО ТРЕТЬОГО РОЗДІЛУ 
В результаті виконання третього розділу було отримано готовий 
програмний продукт. Сайт адаптовано для користувача. Були виконано 
модульне, інтеграційне, системне та приймальне тестування. 
Створений застосунок надає можливість створення акаунту, обрання та 
редагування резюме, експорту та додання в колекції. Авторизація здійснюється 
за допомогою провайдерів Google та GitHub. Для збереження інформації 
використовується база даних Firebase.  
Інтерфейс створений згідно з принципами Нільсена. Відповідно при 
взаємодії користувача змінюється стан системи. 
 
75 
ЧДТУ 242306.004ПЗ 
ВИСНОВКИ 
У роботі бакалавра розглянуто існуючі методи та засоби розв'язання 
завдань проектування програмного забезпечення для створення конструктора 
резюме, зокрема методи моделювання предметної області, формування та 
аналізу вимог, проектування логічної структури програмного комплексу та 
архітектурне проектування. Також проведено моделювання поведінки системи 
та розроблено програмне забезпечення з подальшим його тестуванням і 
впровадженням. 
Сучасний ринок праці вимагає від шукачів надання професійно складених 
резюме, що дозволяє вигідно презентувати себе потенційному роботодавцю. 
Відомі на ринку інструменти для створення резюме часто мають обмежені 
можливості кастомізації або недостатньо інтуїтивний інтерфейс, що ускладнює 
їх використання для людей без технічного фону. У зв'язку з цим постає потреба 
у розробці більш гнучкого та доступного інструменту, що враховує сучасні 
вимоги до зручності використання та безпеки персональних даних. 
У ході роботи було проведено детальний аналіз існуючих рішень та 
вибрано найефективніші методи моделювання та проектування програмного 
забезпечення для створення конструктора резюме. Основними методами стали 
моделювання предметної області, формування та аналіз вимог, проектування 
логічної структури та архітектурне проектування. Моделювання предметної 
області дозволило створити чітку і зрозумілу структуру даних, що 
використовуються у системі. Формування та аналіз вимог враховували потреби 
як замовника, так і розробника, з особливою увагою до функціональних та 
нефункціональних вимог, що забезпечують надійність і зручність використання 
системи. Проектування логічної структури включало розробку діаграм класів, 
пакетів, компонентів та розгортання, що допомогло створити добре 
структуровану систему. 
Практичний аналіз показав, що розроблене програмне забезпечення 
дозволяє значно підвищити продуктивність і зручність процесу створення 
резюме для кінцевих користувачів. Порівняння з відомими рішеннями вказує на 
 76 
ЧДТУ 242306.004ПЗ 
переваги у вигляді інтеграції сучасних методів моделювання та проектування, 
що забезпечує високу якість і надійність системи. Кількісні показники 
результатів, такі як швидкість створення резюме, підтверджують ефективність 
розробленої системи. Результати тестування системи показали її високу 
надійність і відповідність вимогам замовника. 
Для наукового використання рекомендується подальше дослідження та 
вдосконалення методів моделювання та проектування інформаційних систем. 
Практичне використання результатів може бути розширене на інші області, де 
потрібні інтуїтивні та зручні інструменти для створення документів та 
управління ними. Загалом, розроблене програмне забезпечення конструктора 
резюме готове до широкого впровадження та використання у різних організаціях 
для підвищення ефективності процесу створення резюме. Розробка веб-сайту 
конструктора резюме продемонструвала високий рівень готовності до 
використання та була впроваджена в кількох організаціях з різними цілями. Це 
підтверджує практичну цінність і широкі можливості застосування розробленого 
програмного продукту. Веб-сайт забезпечує інтуїтивно зрозумілий інтерфейс, 
адаптивний дизайн, що дозволяє працювати на різних пристроях, і можливість 
кастомізації резюме за допомогою різних шаблонів та форматувань. Захист 
персональних даних користувачів забезпечено шляхом використання HTTPS і 
відповідних заходів безпеки.  
Отже, результати досліджень та розробок, втілені у веб-сайті конструктора 
резюме, демонструють високий рівень готовності до використання та вже 
реалізовані в кількох організаціях з різними цілями. Це підтверджує практичну 
цінність і широкі можливості застосування розробленого програмного продукту 
у сфері створення професійних резюме. Розроблене програмне забезпечення 
готове до широкого впровадження та використання у різних організаціях для 
підвищення ефективності процесу створення резюме. 
 
77 
ЧДТУ 242306.004ПЗ 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
1 Соммервілль, І. (2011). Інженерія програмного забезпечення. 9-е 
видання. Addison-Wesley. 
2 Прессман, Р. С. (2014). Інженерія програмного забезпечення: 
Практичний підхід. 8-е видання. McGraw-Hill. 
3 Гамма, Е., Хелм, Р., Джонсон, Р., & Вліссідес, Дж. (1994). Патерни 
проектування: Елементи повторного використання об'єктно-
орієнтованого програмного забезпечення. Addison-Wesley. 
4 Ларман, К. (2004). Застосування UML та патернів: Вступ до об'єктно-
орієнтованого аналізу та дизайну та ітеративного розроблення. 3-е 
видання. Prentice Hall. 
5 Фаулер, М. (2010). Мови доменно-специфічні. Addison-Wesley. 
6 Фрімен, Е., & Робсон, Е. (2014). Дизайн патернів для мозку. 2-е 
видання. O'Reilly Media. 
7 Хартл, М. (2016). Ruby on Rails Tutorial: Вчіться веб-розробці з Rails. 3-
е видання. Addison-Wesley. 
8 Косс, Р., & Годро, Дж. (2020). Майстерність Firebase для розробки 
додатків. Packt Publishing. 
9 Гаур, А. (2020). Проекти на повному стеку React: Створення реальних 
сучасних веб-додатків за допомогою React 16, Node, Express і 
MongoDB. 2-е видання. Packt Publishing. 
10 Коллінгс, Д., & Голдсміт, Р. (2017). Selenium WebDriver: Від основ до 
фреймворків. Apress. 
11 Радж, С. (2019). Опанування Selenium WebDriver 3.0: Підвищення 
продуктивності та надійності ваших автоматизованих перевірок, 3-е 
видання. Packt Publishing. 
12 Річард, Е. (2020). Патерни дизайну та кращі практики Selenium: 
Опанування патернів дизайну в Selenium WebDriver для створення 
масштабованих та підтримуваних автоматизованих фреймворків 
тестування. Packt Publishing. 
78 
ЧДТУ 242306.004ПЗ 
13 Мур, Б., & Ештон, С. (2021). Cypress.io: Сучасне веб-тестування з 
Cypress. Власне видання. 
14 Барт, Дж. (2020). Cypress: Повне рішення для кінцевого тестування. 
Власне видання. 
15 Хорстманн, К. С., & Корнелл, Г. (2019). Core HTML5 Canvas: Графіка, 
анімація та розробка ігор. 2-е видання. Prentice Hall. 
16 Дакетт, Дж. (2011). HTML і CSS: Дизайн і створення веб-сайтів. John 
Wiley & Sons. 
17 Хартл, М. (2021). HTML5 і CSS3 Все-в-одному для чайників. 4-е 
видання. Wiley. 
18 Майерс, Г. Дж., Сандлер, К., & Беджетт, Т. (2011). Мистецтво 
тестування програмного забезпечення. 3-е видання. Wiley. 
19 Абрамов, Д., & Кларк, Б. (2021). Повний посібник з React: Практичний 
посібник із створення веб-додатків за допомогою React і Redux. Власне 
видання. 
20 Вієруч, Р. (2019). Шлях до React. Власне видання. 
21 Бенкс, А., & Порчелло, Е. (2020). Вивчення React: Сучасні патерни для 
розробки додатків на React. 2-е видання. O'Reilly Media. 
22 Безансон, Б. (2021). React Query: Отримання, кешування та оновлення 
даних сервера у додатках React. Власне видання. 
23 Нельсон, Т. (2021). Основи React Query: Опануйте базові та розширені 
можливості React Query. Власне видання. 
24 Севілья, Д. (2021). Tailwind CSS: Від нуля до продакшну. Власне 
видання. 
25 Мертенс, С. (2020). Tailwind CSS: Швидко створюйте сучасні веб-
сайти, не залишаючи HTML. Власне видання. 
26 Рао, К. (2020). Майстерність функціонального програмування 
JavaScript: Глибоке занурення в основні патерни JavaScript для 
написання розумного, чистого коду. 2-е видання. Packt Publishing. 
79 
ЧДТУ 242306.004ПЗ 
27 Оклі, М. (2019). Рентгенівські промені дизайну програмного 
забезпечення: Виправлення технічного боргу за допомогою 
поведінкового аналізу коду. Pragmatic Bookshelf. 
 
28 VelvetJobs. (2022). Web Application Resume Sample [Електронний 
ресурс]: https://www.velvetjobs.com/resume/web-application-resume-
sample 
29 Resume.io. (2022). Europass CV: Few Pros and Many Cons for Creating a 
European Resume [Електронний ресурс]: https://resume.io/europass-cv 
30 Altamira. (2022). The Ukrainian IT Market: The Latest Statistical Insights 
[Електронний ресурс]: https://altamira.ai/ukrainian-it-market 
31 Workruit. (2024). Breaking Down the Resume Dilemma: Choosing Between 
Builders and Traditional Format [Електронний ресурс]: 
https://www.workruit.com/resume-dilemma 
32 Georgerysak.com. (2023). 10 евристик юзабіліті Якоба Нільсена 
[Електронний ресурс]: https://georgerysak.com/nielsen-heuristics 
33 Mocha.js. (2022). Mocha: Простий, гнучкий, веселий фреймворк 
тестування JavaScript [Електронний ресурс]: https://mochajs.org 
 
80 
 
ДОДАТОК А 
 
 
 ЗАТВЕРДЖЕНО: 
Зав. кафедрою ПЗАС, професор 
_________________ Голуб С.В. 
„____” ______________ 2024 р. 
 
 
 
 
Розробка WEB-застосунку для створення резюме 
 
 
 
Специфікація 
ЧДТУ 242306.004  
Листів 2 
 
 
 
 
 
 
Розробник ________________ Колісник А. П. 
Керівник ________________ Куницька С. Ю. 
 
 
2024
  
 
 ЧДТУ 242306.004   2 
 
Позначення Найменування Примітка 
 Документація  
482.ЧДТУ 242306 12 01 Текст програми  
482.ЧДТУ 242306 34 01 Інструкція користувачеві  
482.ЧДТУ 242306 90 01 Графічні матеріали  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
82 
 
    
 
ДОДАТОК Б 
  
  
  
  
  
  
  
Розробка WEB-застосунку для створення резюме 
  
   
  
  
  
  
Текст програми  
482.ЧДТУ 242306 12 01 
Листів 14  
  
  
  
 Розробник  ________________       Колісник А. П.   
 
 
 
 
 
 
2024
 
 
 482.ЧДТУ 242306 12 01  2 
 
 
import React, { useEffect } from "react"; 
import { Logo } from "../assets"; 
import { FaChevronRight, FaGithub, FaGoogle } from "react-icons/fa6"; 
import { Footer } from "../containers"; 
import { AuthButtonWithProvider, MainSpinner } from "../components"; 
import useUser from "../hooks/useUser"; 
import { useNavigate } from "react-router-dom"; 
const Authentication = () => { 
  const { data, isLoading, isError } = useUser(); 
  const navigate = useNavigate(); 
  useEffect(() => { 
    if (!isLoading && data) { 
      navigate("/", { replace: true }); 
    } 
  }, [isLoading, data, navigate]); 
 
  if (isLoading) { 
    return <MainSpinner />; 
  } 
  return ( 
    <div className="w-full h-screen overflow-hidden flex flex-col items-start justify-
start px-6 py-4 gap-6"> 
      {/* top */} 
      <img src={Logo} className="w-12 h-auto object-contain" alt="" /> 
      {/* main */} 
      <div className="w-full flex flex-1 flex-col items-center justify-center gap-6"> 
        <p className="text-3xl lg:text-4xl text-blue-700"
84 
 
 482.ЧДТУ 242306 12 01  3 
 
 
          Welcome to Resume Builder 
        </p> 
        <p className="text-base text-txtPrimary"> 
          a great way to create resume 
        </p> 
        <p className="text-2xl text-gray-600">Authenticate</p> 
        <div className="w-full lg:w-96 p-4 rounded-md flex flex-col items-center justify-
start gap-6"> 
          <AuthButtonWithProvider 
            Icon={FaGoogle} 
            label={"Signin with Google"} 
            provider={"GoogleAuthProvider"} 
          /> 
          <AuthButtonWithProvider 
            Icon={FaGithub} 
            label={"Signin with GitHub"} 
            provider={"GitHubAuthProvider"} 
          /> 
        </div> 
      </div> 
      {/* footer */} 
      <Footer /> 
    </div> 
  ); 
}; 
export default Authentication; 
import React from "react";
85 
 
 482.ЧДТУ 242306 12 01  4 
 
 
import { Link, Route, Routes, useNavigate } from "react-router-dom"; 
import { TemplatesData } from "../utils/helpers"; 
import { MainSpinner } from "../components"; 
import useTemplates from "../hooks/useTemplates"; 
import { FaHouse } from "react-icons/fa6"; 
const CreateResume = () => { 
  const navigate = useNavigate(); 
  const { 
    data: templates, 
    isLoading: temp_isLoading, 
    isError: temp_isError, 
  } = useTemplates(); 
  if (temp_isLoading) { 
    return <MainSpinner />; 
  } 
  if (!templates) { 
    return navigate("/", { replace: true }); 
  } 
  return ( 
    <div className="w-full flex flex-col items-center justify-start py-4"> 
      <Routes> 
        {TemplatesData.map((template) => ( 
          <Route 
            key={template.id} 
            path={`/${template.name}`} 
            Component={template.component} 
        ))} 
86 
 
 482.ЧДТУ 242306 12 01  5 
 
 
      </Routes> 
    </div> 
  ); 
}; 
export default CreateResume; 
import React, { useEffect, useState } from "react"; 
import { useNavigate } from "react-router-dom"; 
import useUser from "../hooks/useUser"; 
import { adminIds, initialTags } from "../utils/helpers"; 
import useTemplates from "../hooks/useTemplates"; 
import { PuffLoader } from "react-spinners"; 
import { deleteDoc, doc, serverTimestamp, setDoc } from "firebase/firestore"; 
import { toast } from "react-toastify"; 
import { db, storage } from "../config/firebase.config"; 
import { FaTrash, FaUpload } from "react-icons/fa6"; 
import { 
  getStorage, 
  ref, 
  getDownloadURL, 
  uploadBytesResumable, 
  deleteObject, 
} from "firebase/storage"; 
const CreateTemplate = () => { 
  const { data, isLoading, isError } = useUser(); 
  const { 
    data: templates, 
    isLoading: t_isLoading,
87 
 
 482.ЧДТУ 242306 12 01  6 
 
 
    isError: t_isError, 
    refetch, 
  } = useTemplates(); 
  const navigate = useNavigate(); 
  const [formData, setFormData] = useState({ 
    title: "", 
    imgUrl: null, 
  }); 
  const [imageAsset, setImageAsset] = useState({ 
    isImageLoading: false, 
    imageURL: null, 
    progress: 0, 
  }); 
  const [selectedTags, setSelectedTags] = useState([]); 
  const handleTagClick = (tag) => { 
    // Check if the tag is already selected 
    if (selectedTags.includes(tag)) { 
      // If selected, remove it 
      setSelectedTags( 
        selectedTags.filter((selectedTag) => selectedTag !== tag) 
      ); 
    } else { 
      // If not selected, add it 
      setSelectedTags([...selectedTags, tag]); 
    } 
  }; 
  const handleInputChange = (event) => {
88 
 
 482.ЧДТУ 242306 12 01  7 
 
 
    const { name, value } = event.target; 
    // Update the corresponding property in the state object 
    setFormData((previousData) => ({ ...previousData, [name]: value })); 
  }; 
  const pushTemplateData = async () => { 
    const timeStamp = serverTimestamp(); 
    const id = `${Date.now()}`; 
    const _doc = { 
      _id: id, 
      title: formData.title, 
      imageURL: imageAsset.imageURL, 
      tags: selectedTags, 
      name: 
        templates && templates.length > 0 
          ? `Template${templates.length + 1}` 
          : "Template1", 
      timeStamp: timeStamp, 
    }; 
    console.log(_doc); 
    setDoc(doc(db, "templates", id), _doc) 
      .then(() => { 
        setFormData((prevData) => ({ 
          ...prevData, 
          title: "", 
          imgUrl: null, 
        })); 
        setImageAsset((prevAsset) => ({ ...prevAsset, imageURL: null }));
89 
 
 482.ЧДТУ 242306 12 01  8 
 
 
        setSelectedTags([]); 
        refetch(); 
      }) 
      .catch((err) => { 
        toast.error(`Error : ${err.message}`); 
      }); 
  }; 
  // file upload 
  const handleFileSelect = async (event) => { 
    setImageAsset((prevAsset) => ({ ...prevAsset, isImageLoading: true })); 
    // console.log(event.target.files[0]); 
    const file = event.target.files[0]; 
    if (file && isAllowed(file)) { 
      const storageRef = ref(storage, `Templates/${Date.now()}-${file.name}`); 
      const uploadTask = uploadBytesResumable(storageRef, file); 
      uploadTask.on( 
        "state_changed", 
        (snapshot) => { 
          setImageAsset((prevAsset) => ({ 
            ...prevAsset, 
            progress: (snapshot.bytesTransferred / snapshot.totalBytes) * 100, 
          })); 
        }, 
        (error) => { 
          if (error.message.includes("storage/unauthorized")) { 
            toast.error("Error Authorization revoked"); 
          } else 
90 
 
 482.ЧДТУ 242306 12 01  9 
 
 
            toast.warning("Something went wrong please try again later"); 
          } 
        }, 
        () => { 
          getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { 
            setImageAsset((prevAsset) => ({ 
              ...prevAsset, 
              imageURL: downloadURL, 
            })); 
            toast.success("File uploaded to server"); 
            setInterval(() => { 
              setImageAsset((prevAsset) => ({ 
                ...prevAsset, 
                isImageLoading: false, 
              })); 
            }, 2000); 
          }); 
        } 
      ); 
    } else { 
      toast.error("Invalid File Format"); 
    } 
  }; 
  const isAllowed = (file) => { 
    const allowedTypes = ["image/jpeg", "image/jpg", "image/png"]; 
    return allowedTypes.includes(file.type); 
  };
91 
 
 482.ЧДТУ 242306 12 01  10 
 
 
  // delete an image 
  const deleteImageObject = () => { 
    const deleteRef = ref(storage, imageAsset.imageURL); 
    deleteObject(deleteRef).then(() => { 
      toast.success("Image removed from the cloud"); 
      setImageAsset((prevAsset) => ({ 
        ...prevAsset, 
        progress: 0, 
        imageURL: null, 
      })); 
    }); 
  }; 
  // delete the template 
  const removeTemplate = async (template) => { 
    console.log(template); 
    const deleteRef = ref(storage, template.imageURL); 
    await deleteObject(deleteRef).then(() => { 
      toast.success("Image removed from the cloud"); 
    }); 
    await deleteDoc(doc(db, "templates", template._id)) 
      .then(() => { 
        toast.success("Template removed"); 
        refetch(); 
      }) 
      .catch((error) => { 
        toast.error("Something went wrong try again later"); 
      });
92 
 
 482.ЧДТУ 242306 12 01  11 
 
 
  }; 
  useEffect(() => { 
    if (!isLoading && !adminIds.includes(data?.uid)) { 
      navigate("/", { replace: true }); 
    } 
  }, [isLoading, data, navigate]); 
  return ( 
    <div className="w-full px-4 lg:px-10 2xl:px-32 py-4 grid grid-cols-1 lg:grid-cols-
12"> 
      <div className="w-full flex-1 flex flex-col items-center justify-start gap-4 px-2 
col-span-12 lg:col-span-4 2xl:col-span-3"> 
        <div className="w-full"> 
          <p className="text-lg text-txtPrimary">Create a new Template</p> 
        </div> 
        {/* title */} 
        {t_isLoading ? ( 
          <PuffLoader color="#498FCD" size={40} /> 
        ) : ( 
          <div className="w-full flex items-center justify-end"> 
            <p className="text-base text-txtLight uppercase font-semibold"> 
              TempId :{" "} 
            </p> 
            <p className="text-sm text-txtDark font-bold tracking-wider"> 
              {templates && templates.length > 0 
                ? `Template${templates.length + 1}` 
                : "Template1"} 
            </p> 
          </div>
93 
 
 482.ЧДТУ 242306 12 01  12 
 
 
        )} 
        <input 
          className="w-full px-4 py-3 rounded-md bg-transparent border border-gray-300 
text-lg text-txtPrimary focus:text-txtDark focus:shadow-md outline-none" 
          type="text" 
          name="title" 
          value={formData.title} 
          placeholder="Template Title" 
          onChange={handleInputChange} 
        /> 
 
        {/* file upload */} 
        <div className="w-full bg-gray-100 backdrop-blur-md h-[420px] lg:h-[620px] 
2xl:h-[740px] rounded-md border-2 border-dotted border-gray-300 cursor-pointer flex 
items-center justify-center"> 
          {imageAsset.isImageLoading ? ( 
            <div className="flex flex-col items-center justify-center gap-4"> 
              <PuffLoader color="#498FCD" size={40} /> 
              <p>{imageAsset.progress.toFixed(2)}%</p> 
            </div> 
          ) : ( 
            <> 
              {!imageAsset.imageURL ? ( 
                <React.Fragment> 
                  <label className=" w-full cursor-pointer h-full"> 
                    <div className="flex flex-col items-center justify-center h-full"> 
                      <div className="flex flex-col justify-center items-center cursor-
pointer">
94 
 
 482.ЧДТУ 242306 12 01  13 
 
 
                        <p className="font-bold text-2xl"> 
                          <FaUpload /> 
                        </p> 
                        <p className="text-lg">Click to upload</p> 
                      </div> 
                    </div> 
                    <input 
                      type="file" 
                      className="w-0 h-0" 
                      accept=".jpeg,.jpg,.png" 
                      onChange={handleFileSelect} 
                    /> 
                  </label> 
                </React.Fragment> 
              ) : ( 
                <div className="relative w-full h-full overflow-hidden rounded-md"> 
                  <img 
                    src={imageAsset.imageURL} 
                    alt="uploaded image" 
                    className="w-full h-full object-cover" 
                    loading="lazy" 
                  /> 
                  <div 
                    className="absolute top-4 right-4 w-8 h-8 rounded-md flex items-center 
justify-center bg-red-500 cursor-pointer" 
                    onClick={deleteImageObject} 
                  
95 
 
 482.ЧДТУ 242306 12 01  14 
 
 
                    <FaTrash className="text-sm text-white" /> 
                  </div> 
                </div> 
              )} 
            </> 
          )} 
        </div> 
        {/* tags */} 
        <div className="w-full flex items-center flex-wrap gap-2"> 
          {initialTags.map((tag) => ( 
            <div 
              key={tag} 
              onClick={() => handleTagClick(tag)} 
              className={` border  border-gray-300 px-2 py-1 rounded-md cursor-pointer 
${ 
                selectedTags.includes(tag) ? "bg-blue-500 text-white" : "" 
              }`} 
            > 
              <p className="text-xs">{tag}</p> 
            </div> 
          ))} 
        </div> 
        <button 
          className="w-full bg-blue-700 text-white rounded-md py-3" 
          onClick={pushTemplateData} 
        > 
          Save
96 
 
 482.ЧДТУ 242306 12 01  15 
 
 
        </button> 
      </div> 
      <div className="px-2 w-full flex-1 py-4 col-span-12 lg:col-span-8 2xl:col-span-
9"> 
        {t_isLoading ? ( 
          <div className="w-full h-full flex items-center justify-center"> 
            <PuffLoader color="#498FCD" size={40} /> 
          </div> 
        ) : ( 
          <> 
            {templates && templates?.length > 0 ? ( 
              <div className="w-full h-full grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-4 
gap-4"> 
                {templates?.map((template) => ( 
                  <div 
                    key={template._id} 
                    className="w-full h-[500px] rounded-md overflow-hidden relative" 
                  > 
                    <img 
                      src={template.imageURL} 
                      className="w-full h-full object-cover" 
                      alt="" 
                    /> 
 
                    <div 
                      className="absolute top-4 right-4 w-8 h-8 rounded-md flex items-center 
justify-center bg-red-500 cursor-pointer" 
                      onClick={() => removeTemplate(template)}
97 
 
 482.ЧДТУ 242306 12 01  16 
 
 
                    > 
                      <FaTrash className="text-sm text-white" /> 
                    </div> 
                  </div> 
                ))} 
              </div> 
            ) : ( 
              <div className="w-full h-full flex flex-col gap-6 items-center justify-center"> 
                <PuffLoader color="#498FCD" size={40} /> 
                <p className="text-xl tracking-wider capitalize text-txtPrimary"> 
                  No data 
                </p> 
              </div> 
            )} 
          </> 
        )} 
      </div> 
    </div> 
  ); 
}
98 
 
  
 
 
ДОДАТОК В  
  
  
  
  
  
  
Розробка WEB-застосунку для створення резюме 
   
  
  
  
  
Інструкція користувачеві  
482.ЧДТУ 242306 34 01 
Листів 7 
  
  
  
  
 Розробник  ________________       Колісник А. П. 
  
 
 
2024 
 
 
 
 
 482.ЧДТУ 242306 34 01  2 
 
1  Найперша сторінка сайту надає можливість переглянути шаблони та 
відфільтрувати їх за професією без можливості редагування. Для доступу до 
головного функціоналу необхідно авторизуватись у системі за допомогою 
запропонованих провайдерів. 
 
 
Рисунок В.1 – Перша сторінка сайту 
 
 
Рисунок В.2 – Перегляд шаблону без можливості редагування 
100 
 
 482.ЧДТУ 242306 34 01  3 
 
2 При натисненні кнопки «Login» користувач переходить на сторінку 
автентифікації, з можливістю входу за допомогою Google або GitHub (рисунок В.3).  
 
 
Рисунок В.3 – Сторінка автентифікації 
3 Після обрання способу входу, користувач переходить на сторінку 
відповідного провайдера. 
 
Рисунок В.4 - Сторінка провайдера Google 
4 Пройшовши авторизацію користувач повертається на домашню 
сторінку вже з можливостями редагування резюме та управління особистим 
акаунтом.
101 
 
 482.ЧДТУ 242306 34 01  4 
 
4.1          При авторизації як адміністратор зʼявляється можливлість додання 
нового шаблону резюме у меню користувача. Для створення нового шаблону треба 
завантажити файл у форматі png., pdf. або jpeg. Після завантаження, шаблон 
відображається на домашній сторінці. 
 
 
Рисунок В.5 - Меню адміністратора 
 
 
Рисунок В.6 – Сторінка завантаження нового шаблону 
 
10.2 Для звичайного авторизованого користувача можливість додання 
шаблону резюме відсутня, проте весь інший функціонал збігається з 
адміністратором
102 
 
 482.ЧДТУ 242306 34 01  5 
 
 
 
Рисунок В.7 – Меню звичайного користувача 
11 Для обрання шаблону користувач може використати лінію пошуку 
або наведені фільтри. Для очищення фільтрів натискається Х в кінці лінії пошуку 
або іконка очищення на початку рядку фільтрів. 
 
 
Рисунок В.8 – Пошук шаблону резюме 
12 При натисненні на шаблон резюме відкривається сторінка шаблону. 
Є можливість перейти знову на домашню сторінку для перегляду інших резюме 
при натиску області «Discover More». Для редагування потрібно натиснути зелену 
кнопку «Edit this template».
103 
 
 482.ЧДТУ 242306 34 01 6 
 
 
Рисунок В.9 – Сторінка шаблону 
У нижній частині сторінки надається можливість збереження шаблону до 
колекції або до улюблених та рекомендації схожих шаблонів. 
 
Рисунок В.10 – Нижня частина сторінки шаблону 
13 Після натискання кнопки редагування, користувач переходить на 
сторінку редагування шаблону. Над резюме відображені кнопки зліва направо: 
режим редагування та перегляду, збереження до колекції, експорт у форматах pdf., 
png., jpg., svg. 
 
Рисунок В.11 – Сторінка редагування, режим перегляду 
104 
 
 482.ЧДТУ 242306 34 01 7 
 
При зміні режиму перегляду на режим редагування користувач може вносити 
зміни до документу, що включає в себе зміну тексту, завантаження зображення при 
натиску на фотографію,  видалення та додавання секцій при натисненні на 
відповідні іконки смітника та плюса. 
 
Рисунок В.12 – Сторінка редагування, режим редагування 
 
При завершенні внесення змін користувач може зберегти отримане резюме в 
акаунті або експортувати в бажаному форматі. 
14 При переході за допомогою меню користувача до особистого 
акаунта можна переглянути резюме та шаблон збережені в колекціях та власні 
резюме.  
 
Рисунок В.13 – Сторінка особистого акаунту, колекції 
105 
 
 482.ЧДТУ 242306 34 01 8 
 
 
Рисунок В.14 – Сторінка особистого акаунту, мої резюме 
 
Також при натисканні на шаблон або резюме відкривається вікно 
редагування (рисунок В.12). 
15 Для виходу з акаунту потрібно натиснути кнопку «Sign Out»  в 
меню користувача (рисунок В.5, В.7).
106 
 
  
 
ДОДАТОК Г 
  
  
  
  
  
  
Розробка WEB-застосунку для створення резюме 
   
  
Графічні матеріали  
482.ЧДТУ 242306 90 01 
Листів 10 
  
  
  
  
 Розробник  ________________       Колісник А. П. 
  
  
 
 
 
 
 
 
 
 
2024 
 
 
 482.ЧДТУ 242306 90 01 2 
 
 
Рисунок Г.1 – Тема роботи 
 
 
Рисунок Г.2 – Вступ 
108 
 482.ЧДТУ 242306 90 01 3 
 
Рисунок Г.3 – Первинні та детальні вимоги 
 
 
Рисунок Г.4 – Діаграма прецедентів 
109 
 482.ЧДТУ 242306 90 01 4 
 
Рисунок Г.5 – Проектування логічної структури: діаграма класів та пакетів 
 
 
Рисунок Г.6 – Архітектурне проектування: діаграма компонентів та розгортання
110 
 482.ЧДТУ 242306 90 01 5 
 
 
Рисунок Г.7 – Моделювання поведінки системи: діаграма діяльності та 
послідовності 
 
 
Рисунок Г.8 – Моделювання поведінки системи: діаграма комунікації та 
скінченного автома 
 
111 
 482.ЧДТУ 242306 90 01 6 
 
Рисунок Г.9 – Структурна та функціональна схема 
 
 
Рисунок Г.10 – Логічна схема 
112 
 482.ЧДТУ 242306 90 01 7 
 
 
Рисунок Г.11 – Структура бази даних 
 
 
Рисунок Г.12 – Структура бази даних Firebase 
113 
8 482.ЧДТУ 242306 90 01 8 
 
 
Рисунок Г.13 – Модульне тестування 
 
 
Рисунок Г.14 – Інтеграційне тестування 
114 
8 482.ЧДТУ 242306 90 01 9 
 
 
Рисунок Г.15 – Системне тестування 
 
 
Рисунок Г.16 – Приймальне тестування 
115 
8 482.ЧДТУ 242306 90 01 10 
 
 
Рисунок Г.17 – Інтерфейс початкової сторінки та сторінки автентифікації 
 
 
Рисунок Г.18 –Інтерфейс сторінки редагування та акаунту 
116 
8 482.ЧДТУ 242306 90 01 11 
 
 
Рисунок Г.19 – Завершувальний слайд 
 
117