Розробка веб-застосунку для моніторингу харчування

Соколов, Максим Сергійович
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/8898
Title:	Розробка веб-застосунку для моніторингу харчування
Authors:	Немченко, Вадим В'ячеславович Соколов, Максим Сергійович
Keywords:	здоров'я;фітнес;відстеження харчування;відстеження тренувань;цілі;health;fitness;nutrition tracking;training tracking;goals.
Issue Date:	5-Jun-2024
Abstract:	АНОТАЦІЯ Розробка веб-застосунку для моніторингу харчування Соколов М.С. 121 «Інженерія програмного забезпечення» Черкаський державний технологічний університет Черкаси 2024 Метою виконання кваліфікаційної роботи бакалавра є створення веб-застосунку який зможе допомогти людям контролювати свій раціон харчування та скоригувати вагу для покращення здоров’я Головні завдання при проектуванні інформаційної системи є визначення вимог користувачів та бізнес-цілей, розробка ефективної архітектури та зручного інтерфейсу, створення надійної бази даних, забезпечення безпеки даних. Вирішено наступні поставлені задачі. Зручний інтерфейс для введення та аналізу даних про спожиті продукти та виконані фізичні навантаження, дозволяє встановлювати індивідуальні цілі та відстежувати прогрес їх досягнення. Забеспечити шифрування паролей користувачів для беспеки персональних даних. 4 ABSTRACT The bachelor's qualification work on the topic "Development of a web application for nutrition monitoring" contains ____ pages, _____ tables, ______ figures, a list of used sources from ________ names, _____appendices. The method for completing the bachelor's thesis is to create a web application that can help people monitor their diet and adjust their weight for better health. The main task in designing an information system is to define user requirements and business goals, develop an effective architecture and user-friendly interface, create a reliable database, and ensure data security. The object of the work is the process of developing a web application for restoring nutrition and physical activity using the MERN technology stack (MongoDB, Express.js, React, Node.js). The subject of development of a tracking web application covers aspects related to food consumption, physical activity and achieving nutrition goals in the field of health and fitness. The following tasks were solved. A convenient interface for inputting and analyzing data on food consumption and physical activity, allows you to set individual goals and monitor the progress of their achievement. Encrypt user passwords to protect personal data.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/8898
Appears in Collections:	121 Інженерія програмного забезпечення (Інженерія програмного забезпечення)
Files in This Item:
File	Description	Size	Format
Кваліфікаційна робота бакалавра Соколов Максим Сергійович.pdf Restricted Access		4.66 MB	Adobe PDF	View/Open Request a copy
Show full item record
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
Факультет інформаційних технологій і систем 
Кафедра програмного забезпечення автоматизованих систем 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
до кваліфікаційної роботи 
бакалавра 
на тему: Розробка WEB-застосунку для моніторингу харчування 
Виконав: студент 4 курсу, групи ПЗ-2004 
спеціальності 
121 «Інженерія програмного забезпечення» 
(шифр і назва напряму підготовки) 
Студент Соколов М.С. 
(прізвище та ініціали) 
Керівник Немченко В.В. 
(прізвище та ініціали) 
Рецензент Паньковецький А.В. 
(прізвище та ініціали) 
Черкаси 2024 
Черкаський державний технологічний університет 
Факультет інформаційних технологій і систем 
Кафедра програмного забезпечення автоматизованих систем 
Освітній рівень  бакалавр 
Спеціальність 121 «Інженерія програмного забезпечення» 
Освітня програма Інженерія програмного забезпечення 
ЗАТВЕРДЖУЮ 
Зав. кафедри ПЗАС, професор 
____________________ С. Голуб 
«___» _______________ 2024 року 
З А В Д А Н Н Я 
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ 
Соколов Максим Сергійович 
(прізвище, ім’я, по батькові) 
1. Тему проекту (роботи) Розробка веб-застосунку для моніторингу харчування
Керівник проекту (роботи) Немченко Вадим В`ячеславович к.т.н., доцент
Затверджені наказом Черкаського державного технологічного університету від « 10 » жовтня 2022 року
№333/01
2. Строк подання студентом проекту (роботи)
3. Вхідні дані до проекту (роботи) стандарти програмного забезпечення; процеси управління; вимоги
до проекту; календарне планування проекту; управління ризиками проекту; управління ресурсами
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Вступ;
Теоретичний аналіз предметної області;
Розробка концепція проекту;
Управління проектом розробки веб-застосунку для моніторнигу харчування
Оцінювання ефективності;
Висновки;
Список використаних джерел;
Додатки.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту;
Початковий, проблема ожиріння, формули використані у роботі, технології використані для безпеки,
засоби розробки, головна сторінка, сторінка входу та регістрації, сторінка зі статистикою, сторінка
маніпуляцій з їжею та активностями, подяка за увагу.
1 
 
6. Консультанти розділів роботи
Прізвище, ініціали та посади Підпис, дата 
Розділ 
консультанта Завдання видав Завдання прийняв 
1 
2 
3 
7. Дата видачі завдання 15 грудня 2023 р.
КАЛЕНДАРНИЙ ПЛАН 
Строк виконання 
№ етапів 
Назва етапів випускної роботи Примітки 
п/п кваліфікаційноїр
оботи 
1 Постановка задачі 05.12.2023 виконано 
2 Підготовка завдання 13.12.2023 виконано 
3 Погодження завдання 16.12.2023 виконано 
4 Затвердження завдання 19.02.2024 виконано 
Основна стадія 
1 Підбір матеріалів 27.02.2024 виконано 
2 Аналіз шляхів вирішення поставленої задачі 04.02.2024 виконано 
3 Розрахунок основних параметрів роботи 10.03.2024 виконано 
4 Вибір кінцевого варіанту проектного рішення 17.03.2024 виконано 
5 Оформлення первісної редакції роботи 25.03.2024 виконано 
Заключна стадія 
1 Узгодження прийнятих проектних рішень з 31.04.2024 виконано 
керівником 
2 Оформлення пояснювальної записки роботи в 13.05.2024 виконано 
кінцевій редакції 
3 Попередній захист роботи 15.05.2024 виконано 
4 Затвердження роботи 
5 Рецензування роботи 
6 Захист роботи 
Студент _____________________ Соколов М.С. 
 (підпис) (прізвище та ініціали) 
Керівник роботи _____________________ Немченко В.В. 
(підпис) (прізвище та ініціали) 
2 
 АНОТАЦІЯ 
Розробка веб-застосунку для моніторингу харчування 
Соколов М.С. 
121 «Інженерія програмного забезпечення» 
Черкаський державний технологічний університет 
Черкаси 2024 
Метою виконання кваліфікаційної роботи бакалавра є створення веб-
застосунку який зможе допомогти людям контролювати свій раціон харчування 
та скоригувати вагу для покращення здоров’я 
Головні завдання при проектуванні інформаційної системи є визначення 
вимог користувачів та бізнес-цілей, розробка ефективної архітектури та 
зручного інтерфейсу, створення надійної бази даних, забезпечення безпеки 
даних.  
Вирішено наступні поставлені задачі. Зручний інтерфейс для введення та 
аналізу даних про спожиті продукти та виконані фізичні навантаження, 
дозволяє встановлювати індивідуальні цілі та відстежувати прогрес їх 
досягнення. Забеспечити шифрування паролей користувачів для беспеки 
персональних даних. 
КЛЮЧОВІ СЛОВА: здоров'я, фітнес, відстеження харчування, 
відстеження тренувань, цілі. 
3 
ABSTRACT 
The bachelor's qualification work on the topic "Development of a web 
application for nutrition monitoring" contains ____ pages, _____ tables, ______ 
figures, a list of used sources from ________ names, _____appendices. 
The method for completing the bachelor's thesis is to create a web application 
that can help people monitor their diet and adjust their weight for better health. 
The main task in designing an information system is to define user requirements 
and business goals, develop an effective architecture and user-friendly interface, create 
a reliable database, and ensure data security. 
The object of the work is the process of developing a web application for 
restoring nutrition and physical activity using the MERN technology stack (MongoDB, 
Express.js, React, Node.js). 
The subject of development of a tracking web application covers aspects related 
to food consumption, physical activity and achieving nutrition goals in the field of 
health and fitness. 
The following tasks were solved. A convenient interface for inputting and 
analyzing data on food consumption and physical activity, allows you to set individual 
goals and monitor the progress of their achievement. Encrypt user passwords to protect 
personal data. 
KEYWORDS: health, fitness, nutrition tracking, training tracking, goals. 
4 
ЧДТУ.242059-013ПЗ 
Зміст 
 
Зміст ....................................................................................................................5 
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ 
ПОСТАВЛЕНИХ ЗАВДАНЬ ....................................................................................10 
1.1 Aналіз наукової та технічної інформації ............................................ 10 
Висновки до 1 розділу ................................................................................ 19 
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У 
ПРАКТИКУ ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ 
ІНФОРМАЦІЙНИХ СИСТЕМ .................................................................................20 
2.1 Моделювання предметної області ...................................................... 20 
2.1.1 Словник предметної області ......................................................... 20 
2.1.2 Елементи моделювання предметної області ............................... 21 
2.1.3 Робоча область моделювання ....................................................... 23 
2.2 Формування та аналіз вимог................................................................ 24 
2.2.1 Первинні і детальні вимоги. Вимоги замовника і розробника. 
Функціональні та нефункціональні вимоги ................................................... 24 
2.2.2 Формування вимог за допомогою діаграми прецедентів .......... 26 
2.3 Проектування логічної структури програмного комплексу ............. 28 
2.3.1 Діаграма класів .............................................................................. 28 
2.3.2 Діаграма пакетів ............................................................................ 31 
2.4 Архітектурне проектування ................................................................. 32 
2.4.1 Діаграма компонентів ................................................................... 32 
2.4.2 Діаграма розгортання .................................................................... 34 
 
 ЧДТУ.242059-013ПЗ 
Зм. Лист № документа№ ПідписПі Дата
РЗомз.р обЛ. ист Сдоок оклуомве нМт.аС . дпис Дата «Розробка веб-застосунку для моніторингу Літ. Лист Листів 
Керівник  Немченк о В.В. харчування»  Д  5    
 . 
 Пояснювальна записка Н   
ФІТІС, кафедра ПЗАС, 
Н.контр. Півень О.Б. 
  
 
Затв.  Голуб ПЗ-2004 
 С.В. 
 
 5 
ЧДТУ.242059-013ПЗ 
2.4.3 Діаграма діяльності ....................................................................... 36 
2.4.4 Діаграма послідовності ................................................................. 37 
2.4.5 Діаграма комунікації ..................................................................... 39 
2.4.6 Діаграма скінченного автомату .................................................... 40 
Висновки до 2 розділу ................................................................................ 42 
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО 
ЗАБЕЗПЕЧЕННЯ .......................................................................................................43 
3.1 Розробка програмного комплексу ....................................................... 43 
3.1.1 Обґрунтування вибору засобів реалізації ................................... 43 
3.1.2 Опис структурної (функціональної) схеми ................................. 46 
3.1.3 Опис логічної схеми системи ....................................................... 47 
3.1.4 Розробка бази даних ...................................................................... 48 
3.1.5 Розробка інтерфейсу користувача ............................................... 50 
3.1.6 Опис розробки програмних компонентів .................................... 52 
3.2 Тестування системи .............................................................................. 55 
3.2.1 Модульне тестування .................................................................. 55 
3.2.2 Інтеграційне тестування ............................................................. 58 
3.2.3 Приймальне тестування .............................................................. 60 
3.2.4 Приклади впровадженого програмного комплексу. ................ 61 
Висновки до розділу ................................................................................... 68 
ВИСНОВКИ .....................................................................................................69 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ .......................................................70 
ДОДАТОК А ....................................................................................................73 
ДОДАТОК Б .....................................................................................................75 
 ЧДТУ.242059-013ПЗ 
  
6 
ЧДТУ.242059-013ПЗ 
ДОДАТОК В ....................................................................................................96 
ДОДАТОК Г...................................................................................................104 
 
  
ЧДТУ.242059-013ПЗ 
 
7 
ЧДТУ.242059-013ПЗ 
ВСТУП 
Актуальність теми. У Європі на ожиріння страждає від 15 до 25 відсотків 
дорослого населення. Останнім часом у всьому світі спостерігається зростання 
частоти ожиріння у дітей та підлітків: 25 відсотків підлітків мають надмірну масу 
тіла, а 15 відсотків страждають на ожиріння. Надмірна вага в дитинстві - значний 
фактор ожиріння в дорослому віці: 50 відсотків дітей, які мали надмірну вагу в 6 
років, стають повнішими в дорослому віці, а в підлітковому віці ця ймовірність 
збільшується до 80 відсотків[1]. 
Мета і завдання розробки. Мета застосунку з контролю харчування це 
створити простір де люди можуть контролювати своє харчування. Також 
важливо допомогти користувачу з його задачею, це може бути набір, зменшення 
або підтримування маси тіла. У застосунку повинна бути можливість додавати 
всі прийоми їжі та виводити інформацію по ній. Також показувати інформацію 
за минулі дні. Повинна бути можливість додавати інформацію про власну 
активність, щоб мати змогу правильно відображати надлишок або дефіцит 
калорій. Важливо не забувати про заохочення користувача, це можуть бути 
нагороди за підтримку балансу денної кількості калорій. 
Об'єкт розробки. Об'єктом розробки дипломної роботи є процес 
створення веб-застосунку, спрямованого на моніторинг харчування. Буде 
досліджуватись та розроблятись програмний продукт, призначений для збору, 
аналізу та візуалізації інформації про харчування користувачів. Основна увага 
буде зосереджена на розробці інтерфейсу, бази даних, а також алгоритмів аналізу 
даних щодо харчування. Таким чином, об'єктом дипломної роботи є технічні 
аспекти створення веб-застосунку та його функціональність у контексті 
моніторингу харчування. 
Методи розробки. Основні методи для розробки веб-застосунку 
моніторингу харчування були наступними: 
1 Порівняння і спостереження. Під час вивчення існуючих підходів до 
моніторингу харчування та веб-застосунків у цій галузі. Аналіз різних методів 
збору та аналізу даних про харчування, які вже існують на ринку. 
8 
ЧДТУ.242059-013ПЗ 
2 Абстрагування, емпіричний аналіз, ідеалізація, індукція, моделювання, 
системний підхід та формалізація. При побудові формальної моделі процесу 
моніторингу харчування в онлайн-середовищі. Використання системного 
підходу для організації функціональних модулів веб-застосунку, таких як 
внесення даних, їх збереження, аналіз та візуалізація. 
3 Експеримент і синтез. Розробка прототипу веб-застосунку для перевірки 
його функціональності та отримання відгуків від потенційних користувачів. 
Формулювання висновків на основі експериментів, щодо ефективності та 
зручності використання розробленого веб-застосунку. 
4 Практичне значення одержаних результатів. Практичне значення 
отриманих результатів полягає в можливості створення дієвого і корисного 
інструменту для людей, які прагнуть контролювати своє харчування.  
Опис отриманих результатів Розроблений веб-застосунок наддасть 
користувачам зручний інструмент для ведення обліку спожитої їжі, а також 
візуалізації даних про їх харчування. Це допоможе користувачам зберігати 
обізнаність про те, що вони їдять, допомагаючи їм керувати своєю дієтою та 
досягати їхніх здорових цілей щодо харчування. Також, аналіз інформації про 
харчування, що збирається за допомогою застосунку, може надати корисні 
вказівки та рекомендації щодо змін у харчовому режимі користувача. 
Отже, цей веб-застосунок може сприяти покращенню здоров'я та 
добробуту користувачів, надаючи їм потрібні інструменти та знання для 
керування їхнім харчуванням і створення здорового способу життя. 
  
9 
ЧДТУ.242059-013ПЗ 
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ 
ПОСТАВЛЕНИХ ЗАВДАНЬ 
1.1 Aналіз наукової та технічної інформації 
На самому початку важливо зрозуміти чи є взагалі проблеми з вагою у 
користувача. Для цього існує лише один надійний спосіб – це вирахування 
індексу маси тіла. Ще в 1835 році бельгійський соціолог і статистик Адольф 
Кетле запропонував як показник оцінки фізичного розвитку величину 
співвідношення росту та маси тіла людини. Через 140 років виявилося, що за 
цією величиною можна побічно судити про те, чи є маса недостатньою, 
нормальною чи надмірною. Американський фізіолог Ансель Кейс проаналізував 
параметри 7 400 чоловік із п'яти країн і порівняв різні формули для визначення 
зайвої ваги. Метод розрахунку «індексу Кетле» як спосіб визначення зайвої ваги 
та ожиріння видався йому найпростішим і зручнішим. Сьогодні "індекс Кетле" 
прийнято називати "індекс маси тіла" - ІМТ (англ. body mass index (BMI))[2, 3]. 
ІМТ вважається оптимальним показником для оцінки розмірів тіла (ваги та 
зросту), які дозволяють оцінити ризики для здоров’я. Показники ІМТ в межах 
норми свідчать про низький ризик серцево-судинних захворювань та діабету. 
Індекс маси тіла розраховується шляхом ділення маси тіла (у кілограмах) на 
квадрат росту (у метрах квадратних) [4, 5]. 
Наприклад, визначимо індекс маси тіла для людини, яка важить 80 кг при 
зрості 175см: 
ІМТ = 80 / 1,75×1,75 = 26.12  кг/м2 
Далі – звіряємо одержані показники у таблиці 1.1. 
Наступною проблемою є розрахування витрачених калорій користувачем 
за день. Більшість людей вважають, що калорії пов’язані лише з їжею та втратою 
ваги. Однак калорія - це одиниця теплової енергії. Калорія – це кількість енергії, 
необхідна для підвищення температури 1 грама (г) води на 1°C. Щоб схуднути, 
людина повинна спалювати більше калорій, ніж отримує, створюючи дефіцит 
калорій. Але для цього їм потрібно знати, скільки калорій вони спалюють щодня. 
Кількість калорій, які людина спалює щодня, залежить від ваги, зросту, статі та 
10 
ЧДТУ.242059-013ПЗ 
рівня активності людини. Одним із способів розрахунку щоденного споживання 
калорій є формула Гарріса-Бенедикта. Це передбачає множення основного рівня 
метаболізму(ОРМ) людини на її середньодобовий рівень активності [6]. 
Таблиця 1.1 
Показники ІМТ 
Показник ІМТ, кг/м2 Ознака 
Менше 18.5 свідчить про недостатню вагу 
18,5-24,9 еквівалент нормальної маси тіла 
25,0-29,9 вказує на наявність зайвої ваги 
Понад 30 є ознакою ожиріння 
 
Добове споживання калорій можна розрахувати, і на нього впливають різні 
фактори, зокрема стать, зріст, вага, рівень активності та вік. Діти, наприклад, 
мають інші потреби в калоріях, ніж дорослі, і певні вікові групи дітей мають інші 
потреби в калоріях. Немовлятам, наприклад, потрібна рідина з великою 
кількістю жирів і поживних речовин, особливо вітамінів і мінералів. У міру 
дорослішання, особливо після 5 років, клітковина, здорові жири, білок і кальцій 
стають дуже важливими для росту здорових і міцних кісток і зубів. Від малюка 
до підліткового віку і до 18 років потреба в калоріях постійно зростає. Дорослі 
жінки та чоловіки відрізняються у тому, що їм потрібно щодо споживання 
калорій, тому вони мають різні вимоги до втрати ваги. У середньому жінка 
повинна споживати 2000 калорій на день, щоб підтримувати свою вагу, і їй слід 
обмежити споживання калорій до 1500 або менше, щоб скинути один фунт на 
тиждень. Щоб середньостатистичний чоловік підтримував свою масу тіла, він 
повинен споживати 2500 калорій на день або 2000 на день, якщо він хоче скинути 
один фунт на тиждень.[7] 
РБМ — це кількість калорій, які людина спалює, просто існуючи. РБМ 
залежить від віку, статі, розміру та генетичних особливостей. Щоб обчислити 
РБМ, людина використовує метри (м) для висоти, кілограми (кг) для ваги та роки 
для віку за такими формулами[8]: 
Для чоловіків: (9,65 × вага в кг) + (573 × зріст у м) – (5,08 × вік у роках) + 260 
11 
ЧДТУ.242059-013ПЗ 
Для жінок: (7,38 × вага в кг) + (607 × зріст у м) – (2,31 × вік у роках) + 43 
Потім результати розрахунку РБМ використовуються для множення на 
середньодобову активність людини. Бали нараховуються залежно від активності 
людини. 
Бали для рівнів активності такі: 
Таблиця 1.2 
Рівні активності 
Бали Рівень активності 
1,2 бала для людини, яка практично не займається спортом 
1,37 бала для трохи активної людини, яка виконує легкі вправи 1–3 дні на 
тиждень 
1,55 бала для помірно активної людини, яка виконує помірні вправи 3–5 
днів на тиждень 
1,725 балів для дуже активної людини, яка займається фізичними вправами 
6–7 днів на тиждень 
1,9 бала для особливо активної людини, яка або має фізично важку 
роботу, або має особливо складні тренування 
 
Коли обчислюється РБМ і визначаються бали діяльності, два бали 
перемножуються. Загальна кількість калорій, що спалюється в середньому за 
день. 
Наприклад, щоб підрахувати, скільки калорій спалює помірно активний 
чоловік 37 років, зростом 173 см і вагою 80 кг, формула виглядатиме так: 
((9.65 × 80) + (573 × 1,73) – (5.08 × 37) + 260) = 2210 – РБМ 
2210 × 1,55  = 3426 – ккал на день 
Тепер маючи дані про кількість калорій які витрачає користувач за день, 
можна корегувати його раціон в залежності від цілі користувача. 
Для зменшення ваги потрібно зробити дефіцит калорій, тобто споживати 
менше ніж витрачається. Згідно з моделлю «надходження калорій, споживання 
калорій», управління дієтою було зосереджено на концепції «їсти менше, 
рухатися більше», і пацієнтам було рекомендовано враховувати та 
12 
ЧДТУ.242059-013ПЗ 
розраховувати свій калорійний баланс кожного разу, коли вони їдять. Однак 
споживання та витрата енергії є динамічними процесами, на які впливає вага тіла 
та впливають один на одного. Таким чином, втручання, спрямовані на створення 
дефіциту енергії через дієту, протистоять фізіологічним адоптаціям, які 
протистоять втраті ваги. 
Низькокалорійна дієта передбачає споживання 1000–1500 калорій на день; 
дефіцит 500–750 калорій на день використовувався для схуднення і 
рекомендований багатьма товариствами та рекомендаціями з питань 
ожиріння.[5] Низькокалорійні дієти зазвичай обмежують жири або вуглеводи, 
жоден з яких не є більш важливим для схуднення. якщо виникає лише дефіцит 
калорій. Дослідження Diet Intervention Examining The Factors Interacting with 
Treatment Success (DIETFITS) 2018 року не виявило суттєвих відмінностей у 
втраті ваги між дієтами з низьким вмістом жиру та з низьким вмістом вуглеводів. 
Однак планування та приготування їжі вимагає зусиль, а підтримання втрати 
ваги вимагає певного часу. Крім того, метаболічні адаптації для зменшення 
витрат енергії можуть призвести до плато при цьому типі дієти, що люди можуть 
неправильно витлумачити як «провал» через «брак сили волі». [9] 
Традиційно дуже низькокалорійна дієта, яка забезпечує <800 ккал на день, 
не рекомендована для звичайного контролю ваги, і її слід використовувати лише 
в обмежених випадках разом із медичним моніторингом відповідно до 
рекомендацій щодо ожиріння. Однак нещодавно результати огляду показали, що 
низькокалорійна дієта, яка використовується в поєднанні з поведінковими 
програмами, може забезпечити більшу довгострокову втрату ваги, ніж 
поведінкові програми окремо, і що це має мало побічних ефектів [10]. Крім того 
заміною їжі є ефективним для досягнення ремісії діабету в особи з ожирінням, 
що триває щонайменше 2 роки. Інша форма — дуже низькокалорійна кетогенна 
дієта — була запропонована як перспективний варіант значної втрати ваги за 
короткий проміжок часу та стабільності. протягом 2 років. Складається з дуже 
низькокалорійного (<700–800 ккал/день) і низького споживання вуглеводів 
(<30–50 г/день) разом із споживанням достатнього білка (еквівалент 0,8–1,2 
г/день). день/кг ідеальної маси тіла) протягом короткого періоду з наступним 
13 
ЧДТУ.242059-013ПЗ 
поступовим переходом на низькокалорійну дієту. Цей підхід рекомендована 
Італійським ендокринологічним товариством у випадках тяжкого ожиріння, 
саркопенічного ожиріння, ожиріння, пов’язаного з цукровим діабетом 2 типу, 
гіпертригліцеридемії та гіпертензії.[11] Однак ця програма протипоказана 
вагітним жінкам; хворі на цукровий діабет 1 типу, ниркову недостатність або 
серцеву аритмію; і літні пацієнти зі слабкістю. 
Також важливо корегувати затрачені калорії користувача. Так як 
користувач може пробігти 5 кілометрів і дефіцит калорій буде збільшено. 
Кількість калорій, які організм спалює під час будь-якої активності, залежатиме 
від основного рівня метаболізму(ОРМ) людини та інтенсивності активності, 
виміряної в метаболічних еквівалентах(МЕ) [12]. 
Формула для цього: 
Спалені калорії = РБМ × МЕ ÷ 24 × тривалість активності в годинах 
За цією формулою можна розрахувати, скільки калорій організм спалює 
під час ходьби. 
Для цього спочатку необхідно зрозуміти РБМ і МЕ. Таким чином 
розраховували РБМ для чоловіка 37 років, зростом 173 см і вагою 80 кг – це 2210 
ккал. Для розрахунку МЕ використовують табличні дані приклади значень 
наведено нижче в таблиці 1.3 [13]. 
Приклад розрахунку затраченої енергії чоловіком 37 років, зростом 173 см 
і вагою 80 кг, який буде повільно бігти пів години. 
2210 × 7 ÷ 24 × 0.5 = 322 ккал – спалені калорії 
Для розрахунку всіх потрібних значень потрібно розробити лаконічний 
інтерфейс який буде надавати можливість юзеру ввести всю необхідну 
інформацію для розрахунку. Приклади вже існуючих застосунків будуть 
наведені далі. 
MyFitnessPal – це безкоштовний додаток для смартфонів, який допомагає 
відслідковувати споживання калорій, макронутрієнтів (білки, жири, вуглеводи) 
та фізичну активність [14]. 
14 
ЧДТУ.242059-013ПЗ 
Перше та найголовніше це збір початкових даних. В застосунку 
MyFitnessPal ці дані збираються на самому початку під час реєстрації 
користувача. 
Таблиця 1.3 
МЕ значення 
Вправа Метаболічний 
еквівалент 
Хатха йога 3 
Тренування з обтяженнями, від 8 до 15 повторень різних 3.5 
вправ 
Велосипед, невимушена швидкість до 10 миль на годину 4 
Повільний біг 7 
Стрибки зі скакалкою 10 
 
Перше та найголовніше це збір початкових даних. В застосунку 
MyFitnessPal ці дані збираються на самому початку під час реєстрації 
користувача. 
 
 
Рисунок 1.1 – MyFitnessPal форма для введення ваги, росту та цілі 
 
15 
ЧДТУ.242059-013ПЗ 
Другим застосунком в якому дуже подібна логіка збору інформації є 
MyNetDiary[15]. Але в ньому збір відбувається більш глибше. Збираються 
більше даних які можна використати для більш точних розрахунків. Цей приклад 
має найбільш інформаційну цінність. 
Друге питання яке варто дослідити це відображення та збір даних по 
споживанню їжі та активності. Данні за всі дні користування застосунком 
повинні зберігатись, але виводити їх бажано в двох виглядах. 
 
 
Рисунок 1.2 – MyNetDiary перша сторінка реєстрації 
 
 
Рисунок 1.3 – MyNetDiary друга сторінка реєстрації 
16 
ЧДТУ.242059-013ПЗ 
Відображення даних протягом дня, а саме споживанні, витраченні калорії. 
Це допоможе користувачу концентруватись на конкретному дні та цілі на цей 
день. Підхід маленькими ітеративними цілями на день, досить суттєво підвищить 
успіх користувача. Ті, хто ставить практичні цілі і починає щоденний, 
щотижневий звіт про прогрес, як правило, досягають на 40% кращих результатів, 
ніж ті, хто цього не робив [16]. А досягати цілей це дуже важливо для 
майбутнього  користувачів застосунку. 
 
 
Рисунок 1.4 – MyNetDiary відображення калорій спожитих за день 
 
 
Рисунок 1.5 – MyFitnessPal відображення спожитих та витрачених калорій за 
день 
17 
ЧДТУ.242059-013ПЗ 
 
Відображення даних за конкретний проміжок часу. Така інформація може 
дати велику кількість даних користувачу які можна проаналізувати та зробити 
якісь винятки. Наприклад можна помітити в які моменти були зриви або не 
слідування фізичної активності, через, що вони ставались та як їх не допустити 
в майбутньому. 
 
 
Рисунок 1.6 – MyFitnessPal відображення даних за тиждень 
 
  
Рисунок 1.7 – MyNetDiary відображення даних за тиждень 
18 
ЧДТУ.242059-013ПЗ 
Висновки до 1 розділу 
У даному розділі розглянуті ключові аспекти, які визначаються для 
досягнення та підтримки здорової ваги. По-перше, розглянуто методи 
визначення індексу маси тіла, який є надійним показником фізичного розвитку 
та дозволяє оцінити ризики для здоров'я. Далі розглянуто розрахунок щоденного 
споживання калорій, важливий аспект для контролю ваги. Використовуються 
формули, такі як формула Гарріса-Бенедикта, для визначення основного рівня 
метаболізму, а також коефіцієнтів активності для розрахунку калорій, 
витрачених під час різних видів фізичної активності. 
Звернуто увагу на мобільні додатки, такі як MyFitnessPal та MyNetDiary, 
для відстеження харчування та активності, що дозволяє збирати детальні дані та 
вести облік прогресу. Додатково, висвітлено важливість постановки невеликих 
цілей на кожен день, що сприяє підвищенню успішності досягнення поставлених 
завдань. 
19 
ЧДТУ.242059-013ПЗ 
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У 
ПРАКТИКУ ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ 
ІНФОРМАЦІЙНИХ СИСТЕМ 
2.1 Моделювання предметної області 
Предметна область веб-застосунку з трекінгу харчування охоплює 
широкий спектр аспектів, пов'язаних з харчуванням, фізичною активністю та 
досягненням цілей у сфері здоров'я. Класична схема моделювання предметної 
області полягає в побудові функціональної моделі «як є», що дозволяє зібрати і 
подати у формалізованому вигляді інформацію про існуючий стан предметної 
області, перетворення її в модель «як треба», що відповідає реорганізації бізнес-
процесів, побудові концептуальної моделі даних. 
2.1.1 Словник предметної області 
При використанні об'єктно-орієнтованих методів замість концептуальної 
моделі даних будуватимуться модель класів, що не змінює суті самого процесу. 
Новітні методики представляють додаткові вимоги до методів 
моделювання, щоб їх можна було використовувати у складі промислових 
технологій програмних систем для комерційного ринку: 
‒ забезпечити необхідний та достатній рівень деталізації 
функціональної моделі при її колективній побудові; 
‒ забезпечити повноту складу інформаційних об'єктів моделі 
предметної галузі; 
‒ забезпечити обмеження розмірності концептуальної моделі даних за 
збереження її логічної цілісності. 
Перша вимога спрямована на обмеження складності колективного 
моделювання за збереження достатньої повноти результатів. 
Друга вимога спрямована на забезпечення якості програмного проекту та 
зниження впливу на нього кваліфікації конкретних розробників, що є дуже 
важливим для промислових технологій. 
20 
ЧДТУ.242059-013ПЗ 
Третя вимога спрямована на обмеження складності моделювання даних в 
умовах великої розмірності предметної області, а також на забезпечення логічної 
цілісності як результатів моделювання предметної галузі, так і результатів 
наступних етапів проекту. 
2.1.2 Елементи моделювання предметної області 
Моделювання відбувалось з використанням мови UML, що була створена 
для візуального моделювання складних  та простих програм: їх структуру та 
функціонал. Для цього, UML має велику кількість елементів, що полегшують 
процес моделювання.  При побудові моделей з використанням UML, 
використовуються основні три компоненти - об’єкти чи сутності, їх взаємодії та 
діаграми.  
Структурні об’єкти відображають реальні сутності та речі, які мають 
статичну поведінку. Їх приклади зображено на рисунку 2.1. 
 
 
Рисунок 2.1 – Структурні об’єкти 
 
21 
ЧДТУ.242059-013ПЗ 
Поведінкові об’єкти зображують поведінку системи. Наприклад у діаграмі 
діяльності, поведінка системи описується за допомогою об’єктів, що зображено 
на рисунку 2.2. 
 
Рисунок 2.2 – Об’єкти діаграми діяльності 
 
За необхідності елементи моделі можна згрупувати за допомогою об’єкту 
‘пакет’(package). Існують також об’єкти для створення описів і коментарів на 
діаграмах(note).  
Важливою складовою моделі є взаємодії між сутностями. Вони описують 
як сутності повинні взаємодіяти між собою для коректної роботи системи, 
модель якої створюється. Типи взаємодій на діаграмах позначаються 
відношеннями. 
 
Рисунок 2.3 – Приклади відношень між об’єктами 
22 
ЧДТУ.242059-013ПЗ 
2.1.3 Робоча область моделювання 
Користувач має змогу додавати те, що він з’їв у свій список спожитої їжі 
це дасть змогу підраховувати кількість калорій в майбутньому. Сама їжа яку 
користувач може додавати в спожиту повинна містити дані за якими можна буде 
розраховувати статистичні дані. Весь список існуючих продуктів буде 
зберігатись в окремому списку з якого можна буде вибирати потрібний. 
Також користувач може додавати свою активність, це дасть змогу розраховувати 
витрачені калорії. В свою чергу кожна активність буде мати дані за якими будуть 
будуватись статистичні дані в майбутньому. Також повинен бути список в якому 
будуть зберігатись всі активності які можна обрати. 
 
 
Рисунок 2.4 - Модель предметної області 
 
Ця модель предметної області визначає основні класи системи 
моніторингу харчування та їх взаємодії. Вона допоможе в майбутньому при 
уточненні і наповненні статичної частини моделі. 
23 
ЧДТУ.242059-013ПЗ 
2.2 Формування та аналіз вимог 
2.2.1 Первинні і детальні вимоги. Вимоги замовника і розробника. 
Функціональні та нефункціональні вимоги 
Вимоги замовника (первині) і розробника (детальні). Під час розробки 
програмного забезпечення необхідно спершу визначити його вимоги, які 
визначають функціональність та характеристики системи. Цей процес включає у 
себе розробку як первинних вимог, що виражають потреби замовника, так і 
детальних вимог, які стають основою для розробки програмного продукту. 
ВИМОГИ ЗАМОВНИКА 
1. ПЗ повинно забезпечити реєстрацію користувача. 
2. Надавати користувачу можливість додавати спожиті калорії у застосунок. 
3. Надавати користувачу можливість додавати витрачені калорії у 
застосунок. 
4. Користувач повинен мати змогу додавати власну ціль у дефіциті калорій 
та бачити результати наближення до цілі. 
ВИМОГИ РОЗРОБНИКА 
1.1 Реєстрація повинна бути виконана через електрону пошту та пароль. 
1.2 Для паролю потрібно застосувати шифрування для надійності даних 
користувача. 
1.3 Електрона пошта повинна підтверджуватись через повідомлення на неї. 
2.1 Додати можливість додавати, видаляти, оновляти їжу як спожиту. 
2.2 Створити базовий список продуктів та страв який повинен містити всю 
потрібну інформацію для розрахунків. 
2.3 Надати можливість користувачу додавати власні продукти та страви у 
загальний список. 
3.1 Додати можливість додавати, видаляти, оновляти активності як виконанні. 
3.2 Створити базовий список активностей який повинен містити всю потрібну 
інформацію для розрахунків. 
3.3 Надати можливість користувачу додавати власні активності у загальний 
список. 
24 
ЧДТУ.242059-013ПЗ 
4.1 Додати виведення даних по витрачених та спожитих калоріях за день на 
головній сторінці застосунку 
4.2 Додати виведення даних по витрачених та спожитих калоріях за різний 
проміжок часу. 
Функціональні та нефункціональні вимоги . Перед розглядом 
функціональних та нефункціональних вимог до програмного забезпечення 
важливо розуміти, що ці вимоги визначають функціональність системи та її 
характеристики, відповідно. Функціональні вимоги описують, що система 
повинна робити, тоді як нефункціональні вимоги визначають характеристики, 
які повинна мати система, такі як продуктивність, надійність і безпека. Давайте 
розглянемо ці вимоги для програмного забезпечення. 
Функціональні вимоги: 
1. Реєстрація користувача: 
– користувач може створити обліковий запис, вводячи електронну пошту 
та пароль; 
– система підтверджує електронну пошту користувача за допомогою 
підтверджувального листа. 
2. Спожиті та витрачені калорії: 
– користувач може додавати спожиті та витрачені калорії у застосунок; 
– система здійснює обрахунок та відображення сумарної кількості 
спожитих та витрачених калорій за день. 
3. Ціль дефіциту калорій: 
– користувач може встановлювати власну ціль з дефіциту калорій; 
– система відображає прогрес користувача до досягнення встановленої 
цілі. 
4. Додавання та управління харчовими продуктами: 
– користувач може додавати, видаляти та оновлювати інформацію про 
харчові продукти; 
– система надає можливість користувачу додавати власні продукти та 
страви у базовий список. 
5. Додавання та управління фізичними активностями: 
25 
ЧДТУ.242059-013ПЗ 
– користувач може додавати, видаляти та оновлювати інформацію про 
фізичні активності; 
– система дозволяє користувачу додавати власні активності у базовий 
список. 
Нефункціональні вимоги: 
1. Безпека: 
– паролі користувачів повинні бути шифровані для захисту від 
несанкціонованого доступу до даних; 
– доступ до особистої інформації користувача має бути обмеженим. 
2. Ефективність: 
– система повинна швидко реагувати на запити користувачів та 
ефективно обробляти великий обсяг даних; 
– час відповіді системи на дії користувача повинен бути мінімальним. 
3. Надійність: 
– система повинна бути стабільною та працездатною, навіть при 
великому навантаженні; 
– механізми реєстрації та автентифікації користувачів мають працювати 
надійно та без збоїв. 
4. Користувацький інтерфейс: 
– інтерфейс застосунку повинен бути інтуїтивно зрозумілим та зручним 
у використанні; 
– взаємодія з користувачем має бути здійснюватися швидко та 
ефективно. 
5. Масштабованість: 
– система повинна бути готовою до масштабування та здатна обробляти 
зростаюче навантаження без втрати продуктивності; 
– можливість розширення функціональності застосунку без значних змін 
у коді. 
2.2.2 Формування вимог за допомогою діаграми прецедентів 
У зазначеній діаграмі прецедентів (варіантів використання) представлено 
взаємодію користувача з системою. Користувач, що виступає як актор, має 
26 
ЧДТУ.242059-013ПЗ 
можливість здійснити ряд дій, які включають реєстрацію, вхід до системи, 
введення основних даних, реєстрацію їжі, відстеження фізичної активності, 
перегляд статистики та встановлення цілей. 
Реєстрація та вхід до системи є базовими етапами, що дозволяють 
користувачу отримати доступ до всіх функціональних можливостей системи. 
Після цього користувач може ввести свої основні дані, такі як параметри 
здоров'я, що будуть використовуватися для подальших обчислень та аналізу. 
Функціональні можливості системи включають у себе можливість 
реєстрації їжі та фізичної активності, що дозволяє користувачу вести щоденний 
журнал спожитих калорій та витрачених енергетичних ресурсів. Ця інформація 
використовується для подальшого аналізу та візуалізації у вигляді статистики, 
яка допомагає користувачу відстежувати свій прогрес у досягненні поставлених 
цілей. 
Основні функції системи також включають можливість встановлення 
цілей, що дозволяє користувачу визначити бажані показники та отримувати звіти 
про їхнє досягнення. Ця функція стимулює користувача до активності та 
допомагає досягти бажаних результатів. 
Загалом, представлена діаграма прецедентів надає візуальне уявлення про 
основні функціональні можливості системи та взаємодію користувача з нею. 
 
 
Рисунок 2.5 – Діаграма прецедентів 
 
27 
ЧДТУ.242059-013ПЗ 
2.3 Проектування логічної структури програмного комплексу 
2.3.1 Діаграма класів 
 На етапі детального проектування системи створюється діаграма класів, 
яка описує типи об'єктів у системі, їх взаємозв'язки та основні властивості. 
Діаграма класів є ключовим елементом для статичного моделювання об'єктів 
системи та надає візуальне уявлення про їх структуру та взаємодію. 
 
 
Рисунок 2.6 – Діаграма класів без операцій і атрибутів 
 
Класи: 
1.  User (Користувач): 
• userId: int - унікальний ідентифікатор користувача; 
• username: string - ім'я користувача; 
• email: string - адреса електронної пошти користувача; 
• password: string - пароль користувача; 
• register(): void - метод для реєстрації користувача; 
• login(): void - метод для входу користувача в систему; 
• enterBasicData(): void - метод для введення базових даних користувача; 
• setGoals(): void - метод для встановлення цілей користувача; 
• viewStatistics(): void - метод для перегляду статистики користувача. 
2.  FoodsList (Список продуктів): 
28 
ЧДТУ.242059-013ПЗ 
• foods: List<Food> - список продуктів у системі; 
• addFood(food: Food): void - метод для додавання продукту; 
• removeFood(food: Food): void - метод для видалення продукту. 
3.  Food (Продукт): 
• foodId: int - унікальний ідентифікатор продукту; 
• name: string - назва продукту; 
• calories: int - кількість калорій у продукті; 
• macronutrients: FoodMacronutrient - макронутрієнти у продукті; 
• getName(): string - метод для отримання назви продукту; 
• getCalories(): int - метод для отримання кількості калорій продукту; 
• getMacronutrients(): FoodMacronutrient - метод для отримання 
макронутрієнтів продукту. 
4.  FoodMacronutrient (Макронутрієнти продукту): 
• protein: double - кількість білків у продукті; 
• carbohydrate: double - кількість вуглеводів у продукті; 
• fat: double - кількість жирів у продукті. 
5.  UserEatenList (Список спожитих продуктів користувача): 
• user: User - користувач, до якого належить список; 
• eatenFoods: List<Food> - список продуктів, які спожив користувач; 
• addEatenFood(food: Food): void - метод для додавання спожитого 
продукту; 
• removeEatenFood(food: Food): void - метод для видалення спожитого 
продукту. 
6.  ActivityList (Список активностей): 
• activities: List<Activity> - список доступних активностей у системі; 
• addActivity(activity: Activity): void - метод для додавання активності; 
• removeActivity(activity: Activity): void - метод для видалення активності. 
7.  UserActivityList (Список відстежених активностей користувача): 
• user: User - користувач, до якого належить список; 
29 
ЧДТУ.242059-013ПЗ 
• trackedActivities: List<Activity> - список активностей, які відстежує 
користувач; 
• addTrackedActivity(activity: Activity): void - метод для додавання 
відстеженої активності; 
• removeTrackedActivity(activity: Activity): void - метод для видалення 
відстеженої активності. 
8.  Activity (Активність): 
• activityId: int - унікальний ідентифікатор активності; 
• name: string - назва активності; 
• details: ActivityDetails – деталі активності; 
• getName(): string - метод для отримання назви активності; 
• getDuration(): int - метод для отримання тривалості активності. 
9.  ActivityDetails (Деталі активності): 
• metabolicEquivalent: int – метаболічний еквівалент для розрахунків; 
• description: string - деталі активності; 
• duration: int - тривалість активності в хвилинах. 
Відносини: 
1.  Клас Food має асоціацію з класом FoodMacronutrient, оскільки містить 
посилання на макронутрієнти продукту. 
2.  Клас FoodsList має асоціацію з класом Food, оскільки включає список 
продуктів. 
3.  Клас UserEatenList має асоціацію з класом Food, оскільки включає список 
спожитих продуктів. 
4.  Клас User має асоціацію з класом UserEatenList та класом UserActivityList, 
оскільки користувач може мати списки спожитих продуктів та відстежуваних 
активностей. 
5.  Клас Activity має асоціацію з класом ActivityDetails, оскільки містить 
деталі про активність. 
6.  Клас ActivityList має асоціацію з класом Activity, оскільки включає список 
доступних активностей. 
30 
ЧДТУ.242059-013ПЗ 
7.  Клас UserActivityList має асоціацію з класом Activity, оскільки включає 
список відстежених активностей. 
 
 
Рисунок 2.6 – Діаграма класів 
 
Діаграма класів надає візуальне представлення структури системи та 
допомагає розібратися в її компонентах та їх взаємодії. 
2.3.2 Діаграма пакетів 
Діаграма пакетів використовується для опису структури програмної 
системи, яка організована у вигляді пакетів. Пакети дозволяють групувати 
компоненти програми та організовувати їх в логічні групи для полегшення 
розуміння системи та її розробки. 
У вказаній діаграмі пакетів ми спостерігаємо два основні пакети: "User 
Authentication" та "Data Management". Кожен з цих пакетів містить свої підпакети 
та компоненти. 
В пакеті "User Authentication" ми виділяємо підпакет "User Management", 
який містить компоненти, пов'язані з управлінням користувачами, такі як "User 
Registration" та "User Login". Крім того, в цьому пакеті ми також маємо окремі 
31 
ЧДТУ.242059-013ПЗ 
компоненти, що відповідають за електронну та телефонну верифікацію 
електронної пошти, ролі користувачів та управління дозволами. 
Пакет "Data Management" включає два підпакети: "Food Tracking" та 
"Activity Tracking". "Food Tracking" містить компоненти, що стосуються 
відстеження інформації про харчування, такі як управління списком продуктів 
харчування, журнал харчування та відстеження калорій. З іншого боку, "Activity 
Tracking" включає компоненти, що відповідають за відстеження фізичної 
активності, такі як управління списком активностей, журнал активностей та 
відстеження прогресу. 
 
Рисунок 2.7 – Діаграма пакетів 
Крім того, на діаграмі ми маємо зв'язок між пакетами "User Authentication" 
та "Data Management", що показує взаємозв'язок між автентифікацією 
користувача та управлінням даними. 
Така структура пакетів дозволяє ефективно організувати та управляти 
компонентами системи, що сприяє зручній розробці та підтримці програмного 
забезпечення. 
2.4 Архітектурне проектування 
2.4.1 Діаграма компонентів 
Система управління харчуванням створена для допомоги людям 
слідкувати за своїм раціоном та досягати цілей, пов'язаних зі спортом та 
фізичною формою. Система складається з декількох основних частин: 
1. Частина для користувачів: 
32 
ЧДТУ.242059-013ПЗ 
– Реєстрація: Ця частина дозволяє користувачам створити обліковий запис в 
системі. 
– Відстеження їжі: Користувачі можуть додавати їжу та напої, які вони 
вживали протягом дня. 
– Відстеження тренувань: Користувачі можуть додавати інформацію про 
фізичні вправи, які вони виконували. 
– Панель інформації: Ця частина показує користувачам резюме їхнього 
раціону, спалених калорій та прогресу у досягненні цілей. 
2.  Технічні частини: 
– Служба автентифікації: Ця частина відповідає за перевірку користувачів та 
надання їм доступу до системи. 
– База даних продуктів: Ця база даних зберігає інформацію про харчову 
цінність продуктів харчування та страв. 
– База даних тренувань: Ця база даних зберігає інформацію про калорійність 
різних видів фізичних вправ. 
– Система розрахунку калорій: Ця частина розраховує загальну кількість 
спожитих та спалених користувачем калорій. 
Як все працює: 
1.  Користувач реєструється в системі, вказуючи свою адресу електронної 
пошти та пароль. 
2.   Користувач може відстежувати свій раціон, додаючи їжу та напої з бази 
даних продуктів. 
3.   Користувач може відстежувати свої тренування, додаючи інформацію про 
виконані фізичні вправи з бази даних тренувань. 
4. Панель інформації показує користувачеві резюме його раціону, спалених 
калорій та прогресу у досягненні цілей. 
Приклади використання: 
– Користувач, який хоче схуднути, може використовувати систему, щоб 
відстежувати свій раціон та спалені калорії, а також встановити мету щодо 
схуднення. 
33 
ЧДТУ.242059-013ПЗ 
– Користувач, який тренується до марафону, може використовувати 
систему, щоб відстежувати свій раціон та спалені калорії, а також 
планувати свої тренування. 
– Тренер може використовувати систему, щоб допомагати своїм клієнтам 
слідкувати за їхнім прогресом та досягати цілей, пов'язаних зі спортом та 
фізичною формою. 
 
 
Рисунок 2.8 – Діаграма компонентів 
2.4.2 Діаграма розгортання 
Діаграма розгортання - це схема, що візуалізує, як розподіляються 
компоненти веб-застосунку в реальному середовищі. Ця схема дає чітке 
уявлення про взаємодію між серверами, базами даних та іншими елементами. 
Ця діаграма показує, що веб-застосунок складається з трьох основних 
компонентів: 
1. Клієнт: Це веб-додаток, який користувачі використовують для взаємодії з 
системою. Він написаний на HTML, CSS та JavaScript. 
2. Frontend-сервер: Цей сервер відповідає за обробку запитів від клієнта та за 
генерування HTML-сторінок. Він написаний на React. 
34 
ЧДТУ.242059-013ПЗ 
3. Backend-сервер: Цей сервер відповідає за логіку бізнесу веб-застосунку та за 
взаємодію з базою даних. Він написаний на Node.js та Express.js. 
4. База даних: Це місце, де зберігаються всі дані веб-застосунку. Вона 
використовує MongoDB. 
Для веб-застосунку з трекінгу харчування діаграма розгортання матиме 
наступний вигляд: 
 
Рисунок 2.9 – Діаграма розгортання 
 
Компоненти веб-застосунку взаємодіють один з одним наступним чином: 
1. Користувач взаємодіє з клієнтом. 
2. Клієнт надсилає запит до frontend-сервера. 
3. Frontend-сервер обробляє запит і генерує HTML-сторінку. 
4. Frontend-сервер надсилає HTML-сторінку клієнту. 
5. Клієнт відображає HTML-сторінку користувачеві. 
6. Якщо frontend-серверу потрібні дані з бази даних, він надсилає запит до 
backend-сервера. 
7. Backend-сервер отримує дані з бази даних і надсилає їх frontend-серверу. 
8. Frontend-сервер включає дані в HTML-сторінку. 
9. Frontend-сервер надсилає HTML-сторінку клієнту. 
35 
ЧДТУ.242059-013ПЗ 
10. Клієнт відображає HTML-сторінку користувачеві.
2.4.3 Діаграма діяльності
Діаграма діяльності - це візуальний інструмент, який описує послідовність
дій та потоків даних у системі. Ця схема дає чітке уявлення про те, як 
взаємодіють компоненти системи та як виконуються різні функції. 
Рисунок 2.10 – Діаграма діяльності 
Для веб-застосунку з відстеження харчування діаграма діяльності має 
такий вигляд. Ця діаграма показує, як користувач взаємодіє з веб-застосунком 
для відстеження харчування та тренувань. 
Ось опис основних дій, які виконує користувач: 
1. Вхід: Користувач входить до свого облікового запису за допомогою адреси
електронної пошти та пароля.
2. Реєстрація: Користувач створює новий обліковий запис у веб-застосунку.
3. Перегляд панелі інструментів: Після входу до системи користувач
переглядає панель інструментів, яка містить огляд його харчування та
тренувань.
36 
ЧДТУ.242059-013ПЗ 
4. Відстеження їжі: Користувач додає дані про їжу, яку він з'їв, до веб-
застосунку.
5. Відстеження тренування: Користувач додає дані про тренування, яке він
виконав, до веб-застосунку.
6. Перегляд звітів: Користувач переглядає звіти про своє харчування та
тренування. Ці звіти допомагають користувачеві визначити тенденції та
досягти своїх цілей у сфері здоров'я.
2.4.4 Діаграма послідовності
Діаграма послідовності - це візуальний інструмент, який використовується
для опису послідовності взаємодії між об'єктами в системі. Ця діаграма 
допомагає чітко уявити, як взаємодіють різні компоненти системи для виконання 
конкретного завдання. 
Опис діаграми послідовності: 
Учасники: 
– User: Це людина, яка використовує веб-застосунок.
– Registration: Це модуль веб-застосунку, який відповідає за реєстрацію
користувачів.
– Authentication: Це модуль веб-застосунку, який відповідає за
автентифікацію користувачів.
– ApplicationManager: Це модуль веб-застосунку, який дає змогу корегувати
даними користувача.
– UserStatistics: Це модуль веб-застосунку, який зберігає всю інформацію по
користувачу та передає для відображення.
– InfoPanel: Це модуль веб-застосунку, який дозволяє користувачеві
продивитись дані які були додані.
37 
ЧДТУ.242059-013ПЗ 
 
Рисунок 2.11 – Діаграма послідовності 
 
Дії: 
– User Registration: користувач вводить адресу електронної пошти та пароль. 
– Email Verification: система надсилає користувачеві електронний лист із 
посиланням для активації свого облікового запису. 
– Email Confirmation: користувач натискає посилання в електронному листі, 
щоб активувати свій обліковий запис. 
– Login: користувач вводить адресу електронної пошти та пароль для входу 
в програму. 
– Email and Password Verification: система перевіряє адресу електронної 
пошти та пароль користувача. 
– Incorrect Email or Password: якщо адреса електронної пошти або пароль 
неправильні, система відображає повідомлення про помилку. 
– Application Access: якщо адреса електронної пошти та пароль правильні, 
користувач отримує доступ до програми. 
– Application Manager: цей модуль дозволяє користувачам керувати своїми 
налаштуваннями та даними. 
– User Statistics: цей модуль надає користувачам статистику їх активності в 
програмі. 
38 
ЧДТУ.242059-013ПЗ 
– Info panel: цей модуль відображає інформацію про програму та її функції 
для користувачів. 
2.4.5 Діаграма комунікації 
Діаграма комунікацій надає значні переваги для розуміння: 
– Як різні компоненти системи взаємодіють один з одним. 
– Які повідомлення надсилаються між компонентами. 
– Порядок обміну повідомленнями. 
– Як дані передаються між компонентами. 
Ця діаграма є цінним інструментом для розробників, тестувальників адже 
вона допомагає їм краще зрозуміти архітектуру застосунку для підрахунку 
калорій та його функціонування. 
 
 
Рисунок 2.12 – Діаграма комунікації 
 
Дії: 
1. Enter registration data() – введення даних для регістрації. 
2. Send to confirm email() – відправити імейл на підтвердження. 
3. Confirm email() – підтвердження імейлу. 
4. Authorisation() – авторизація. 
39 
ЧДТУ.242059-013ПЗ 
5. Add data() – додавання даних (активності, їжа). 
6. Delete data() – видалення даних (активності, їжа). 
7. Update data() – оновлення даних (активності, їжа). 
8. Show info() – відображення даних. 
2.4.6 Діаграма скінченного автомату 
Діаграма скінченного автомату використовується для моделювання 
поведінки системи, яка має обмежену кількість станів і може переходити з 
одного стану в інший у відповідь на зовнішні події. Вона описує систему як набір 
станів, переходів між цими станами та подій, які спричиняють ці переходи. Ця 
діаграма широко застосовуються в різних галузях, включаючи комп'ютерні 
науки, інженерію та лінгвістику. 
 
 
Рисунок 2.13 – Діаграма скінченого автомату 
 
Опис кроків:  
1. Open page – відкриття сторінки. 
2. Registration – якщо користувач новий та немає аккаунту він реєструє новий 
акаунт. 
3. Authorisation – якщо користувач вже має аккаунт він може авторизуватись, 
якщо дані для авторизації були введені вірно, то буде manager access надає 
доступ до його аккаунту або ні якщо дані були введені не вірно.  
4. Manager access – частина програми яка вирішує чи надавати користувачу 
доступ до акаунту. 
40 
ЧДТУ.242059-013ПЗ 
5. Manager data – надає змогу додавати, віднімати, оновлювати дані 
користувача, а саме активності та споживану їжу. 
6. Info panel – дає змогу відображувати та переглядати дані. 
  
41 
ЧДТУ.242059-013ПЗ 
Висновки до 2 розділу 
У даному розділі ретельно описано веб-застосунок, охопивши всі аспекти 
його розробки та функціональності. 
Починаючи з визначення вимог, чітко окреслено очікування та цілі, які мав 
би виконувати веб-застосунок. Це допомогло сформувати міцний фундамент для 
його архітектури та дизайну. 
Далі детально описано архітектуру веб-застосунку, розбивши його на 
окремі компоненти та визначивши їх взаємодію. Цей підхід гарантує чітку та 
модульну структуру, що полегшило розробку та тестування. 
Наступним кроком став дизайн компонентів веб-застосунку, де було 
зосереджено на їх інтерфейсах, поведінці та даних. Ретельно продумано кожен 
аспект, щоб забезпечити зручність використання, ефективність та надійність. 
Далі описали процес розгортання веб-застосунку в середовищі 
виробництва, щоб він став доступним для користувачів. Подбали про надійність 
середовища, щоб гарантувати безперебійну роботу веб-застосунку. 
Подальша розробка набагато спроститься з наявною інформацією. Всі 
діаграми дуже допоможуть у розробці застосунку. У майбутньому ми плануємо 
продовжувати вдосконалювати веб-застосунок, ґрунтуючись на відгуках 
користувачів та нових технологіях. Ми будемо прагнути додати нові функції, 
покращити його продуктивність, масштабованість та безпеку. 
 
 
  
42 
ЧДТУ.242059-013ПЗ 
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО 
ЗАБЕЗПЕЧЕННЯ 
3.1 Розробка програмного комплексу 
У процесі розробки було використано сучасні практики програмування, 
такі як модульність, тестування та контроль версій, що забезпечило високу якість 
коду та легкість його підтримки. Особливу увагу було приділено безпеці даних 
користувачів, використовуючи шифрування паролів та токенів доступу, а також 
механізми захисту від несанкціонованого доступу. 
3.1.1 Обґрунтування вибору засобів реалізації  
Стек MERN — це набір технологій, які допомагають розробникам 
створювати надійні та масштабовані веб-додатки за допомогою JavaScript. 
Абревіатура «MERN» означає MongoDB, Express, React і Node.js, причому кожен 
компонент відіграє свою роль у процесі розробки. MongoDB служить 
орієнтованою на документи базою даних, яка може ефективно зберігати дані у 
форматі JSON. Express — це структура веб-програм, яка надає набір функцій для 
оптимізації збирання веб-програм. React — це інтерфейсна бібліотека JavaScript, 
яка пропонує великий набір інструментів для створення інтерфейсів 
користувача. Node.js — це середовище виконання для виконання коду JavaScript 
на стороні сервера, координуючи зв’язок між зовнішніми та внутрішніми 
компонентами. У сукупності ці компоненти роблять стек MERN кращим 
вибором для розробників, яким потрібна ефективна повноцінна структура 
розробки[14].  
Розглянемо кожну технологію окремо: 
1. MongoDB - зберігає дані як документи JSON. Модель даних документа 
природним чином відображається на об’єктах у програмному коді, що спрощує 
її вивчення та використання розробниками. Поля в документі JSON можуть 
відрізнятися від документа до документа. Порівняйте це з традиційною 
таблицею реляційної бази даних, де додавання поля означає додавання стовпця 
до самої таблиці бази даних і, отже, до кожного запису в базі даних. Документи 
43 
ЧДТУ.242059-013ПЗ 
можна вкладати, щоб виражати ієрархічні зв’язки та зберігати структури, такі як 
масиви[15]. 
2.  Express.js — це швидка, невимушена та мінімалістична структура веб-
додатків для Node.js. Він забезпечує простий спосіб створення надійних веб-
серверів і кінцевих точок API, спрощуючи складність обробки HTTP-запитів[16]. 
3. React.js — це бібліотека JavaScript з відкритим вихідним кодом, ретельно 
розроблена Facebook, яка спрямована на спрощення складного процесу 
створення інтерактивних інтерфейсів користувача. Уявіть собі інтерфейс 
користувача, створений за допомогою React, як набір компонентів, кожен з яких 
відповідає за виведення невеликого багаторазового фрагмента HTML-коду[17]. 
4. Node.js — це кросплатформне середовище виконання JavaScript із 
відкритим кодом. Це популярний інструмент майже для будь-якого проекту! 
Node.js запускає двигун V8 JavaScript, ядро Google Chrome, поза браузером. Це 
дозволяє Node.js бути дуже продуктивним. Програма Node.js працює в одному 
процесі без створення нового потоку для кожного запиту. Node.js надає набір 
асинхронних примітивів вводу-виводу у своїй стандартній бібліотеці, які 
запобігають блокуванню коду JavaScript, і загалом бібліотеки в Node.js написані 
з використанням неблокуючих парадигм, що робить поведінку блокування 
скоріше винятком, ніж нормою[18]. 
Стек MERN ідеально підходить для розробників, які хочуть 
використовувати одну мову, JavaScript, як для зовнішньої, так і для задньої 
частини своїх програм. Стек MERN використовує набір популярних хмарних 
технологій з відкритим вихідним кодом для підтримки всіх етапів роботи веб-
додатку. 
Переваги MERN Stack. Оскільки стек MERN є комплексним 
середовищем JavaScript, він забезпечує масштабований, послідовний досвід із 
відкритим вихідним кодом, який охоплює весь процес розробки програми та 
підходить для програмістів різного рівня кваліфікації. Це дозволяє розробникам 
використовувати єдину мову та узгоджений набір інструментів для створення як 
початкової, так і задньої частини своїх додатків, що скорочує час і складність 
розробки. А оскільки стек MERN є популярним фреймворком з відкритим 
44 
ЧДТУ.242059-013ПЗ 
вихідним кодом, розробники отримують зацікавлену та підтримуючу спільноту 
для обміну знаннями, вирішення проблем і постійного навчання. Крім того, 
відсутність плати за ліцензування може призвести до значної економії коштів.  
Стек MERN відмінно підходить для створення інтерактивних інтерфейсів 
користувача, які також є масштабованими. Це робить його гарним вибором для 
створення додатків, які повинні обробляти значні обсяги трафіку та 
пристосовуватися до швидкого зростання. Велика частина цієї масштабованості 
пояснюється використанням MongoDB, орієнтованої на документи бази даних, 
відомої своєю швидкістю та ефективністю в операціях зберігання та пошуку 
даних. 
Стек MERN містить широкий спектр варіантів розгортання та платформ, 
включаючи багато хмарних середовищ. Ця гнучкість дозволяє розробникам 
вибирати хмарну платформу, яка найкраще відповідає їхнім вимогам. 
Крім того, стек MERN забезпечує послідовний досвід розробки на різних 
платформах. Це корисно для міграції програм між різними платформами, 
наприклад, із Amazon Web Services (AWS) на Oracle Cloud Infrastructure (OCI), 
без потреби в значних змінах коду. Ця портативність економить дорогоцінний 
час і зусилля та допомагає забезпечити одноманітність зовнішнього вигляду та 
функціональності, незалежно від основної платформи. 
Недоліки стеку MERN. Незважаючи на те, що стек MERN є потужним і 
популярним інструментом для розробки веб-додатків, розробники повинні знати 
про його проблеми. Визнаючи й усуваючи потенційні підводні камені, 
розробники можуть ефективно використовувати стек MERN для створення 
надійних, масштабованих і безпечних веб-додатків. 
Комбінація технологій може стати проблемою навчання. Кожна технологія 
має власний синтаксис і концепції, і розробникам, які не знайомі зі стеком, може 
бути складно освоїти та ефективно їх інтегрувати. Це також створює потенційні 
проблеми з продуктивністю. Стек значною мірою покладається на JavaScript, 
мову, яка традиційно використовується для роботи зовнішнього браузера. Іноді 
це може призвести до вузьких місць продуктивності, особливо в складних 
програмах з інтенсивними обчисленнями. Розробники повинні оптимізувати свій 
45 
ЧДТУ.242059-013ПЗ 
код і використовувати відповідні методи для покращення продуктивності 
програми. 
Хоча існує багато посібників і посібників для стеку MERN, йому бракує 
стандартизованої методології розробки. Це може призвести до неузгодженості 
підходів до розробки та ускладнити підтримку якості та узгодженості коду в 
різних проектах. 
Як і з будь-яким набором технологій, безпека викликає занепокоєння. 
Розробники повинні використовувати найкращі методи безпечного кодування та 
залишатися в курсі оновлень і виправлень, щоб запобігти вразливостям, якими 
можуть скористатися зловмисники. 
Нарешті, стек має обмежену підтримку старіших браузерів, які не повністю 
підтримують останні функції та функції JavaScript. Це може призвести до 
проблем із сумісністю та вплинути на взаємодію з користувачем[19, 20, 21]. 
Проаналізувавши всю інформацію були прийнято використовувати саме 
стек MERN. Цей стек робить розробку легшою та зменшує час на  неї. 
3.1.2 Опис структурної (функціональної) схеми 
Структура програмної системи - це фундаментальний аспект її розробки, 
що описує основні компоненти, їх взаємодію та загальну організацію. Вона 
слугує каркасом для розуміння функціональних можливостей, принципів роботи 
та поведінки системи. Структурний опис зазвичай ґрунтується на 
функціональних ознаках, розбиваючи систему на підсистеми, модулі та інші 
логічні компоненти. Це дозволяє чітко окреслити відповідальність кожного 
елемента та прослідкувати зв'язки між ними. 
Важливість структурного опису полягає в наступному: 
• Зрозумілість: Структура чітко окреслює архітектуру системи, роблячи її 
зрозумілою для розробників, тестувальників та користувачів. 
• Розробка: Структурний опис слугує основою для розробки компонентів та 
їх інтеграції в єдину систему. 
• Обслуговування: Чітка структура полегшує модифікацію, вдосконалення 
та виправлення помилок у системі. 
46 
ЧДТУ.242059-013ПЗ 
• Документація: Структурні та функціональні схеми слугують цінними 
інструментами для документування архітектури та функціоналу системи. 
Функціональні схеми використовують спеціальні символи, встановлені 
стандартами (наприклад, ГОСТ 19.701-90), для опису інформаційних потоків, 
складу даних, файлів та пристроїв. 
 
 
Рисунок 3.1 – Функціональна схема 
 
 
Рисунок 3.1 – Структурна схема 
3.1.3 Опис логічної схеми системи 
 Якщо в користувача немає акаунту йому потрібно його зареєструвати 
його. Для цього потрібно ввести пошту та пароль. Коли юзер ввів дані та 
натиснув кнопку зареєструватись відправляється запит на сервер з цими 
даними, щоб зареєструвати акаунт. На сервері проходить перевірка пошти та 
паролю на валідність. Якщо вони не коректні, то вертається помилка. Якщо 
пошта та пароль коректні та не порушують перевірки шифрується пароль та 
зберігається. Далі для підтвердження пошти відправляється лист на вказану 
47 
ЧДТУ.242059-013ПЗ 
користувачем пошту. Після чого користувач має змогу підтвердити пошту та 
здійснити вхід у застосунок. Без підтвердження пошти в дозволі буде 
відмовлено. Якщо користувач підтвердив пошту та вводить її для входу в 
систему буде перевірятись пароль, чи співпадає він з паролем в базі даних. 
Якщо перевірка успішна, буде перекинуто на головну сторінку застосунку зі 
статистикою. Після чого користувач може оперувати своїми даними та бачити 
результати на графіках. 
Рисунок 3.2 – Логічна схема системи 
3.1.4 Розробка бази даних 
Для забезпечення безперебійної роботи та ефективного управління 
даними, додаток використовує реляційну базу даних, яка структурована у 
відповідності до потреб користувачів та функціональних вимог. 
48 
ЧДТУ.242059-013ПЗ 
Модель даних користувача (User). Центральним елементом бази даних є 
модель користувача (User). Вона містить всю необхідну інформацію про 
користувача, включаючи: 
• Ідентифікаційні дані: Унікальний ідентифікатор, ім'я, стать, вік.
• Дані автентифікації: Зашифрований пароль, роль користувача, статус 
підтвердження електронної пошти.
• Антропометричні дані: Зріст, вага, рівень активності.
• Цілі: Індивідуальні цілі щодо активності та дефіциту калорій. 
Моделі для управління сесіями (Token, Blacklist). Для безпечного
управління сесіями використовуються моделі Token та Blacklist. Token зберігає 
унікальний токен для кожної сесії користувача, а Blacklist містить токени, які 
були анульовані або закінчили термін дії.  
Рисунок 3.3 – Діаграма відображення бази даних 
Моделі для відстеження харчування (Food, EatenFood) . Для 
відстеження харчування використовуються моделі Food та EatenFood. Food 
містить інформацію про продукти харчування (назва, калорійність, 
макроелементи), а 
49 
ЧДТУ.242059-013ПЗ 
EatenFood зберігає дані про те, які продукти і в якій кількості були спожиті 
користувачем. 
Моделі для відстеження активності (Activity, DoneActivity). Для 
відстеження фізичної активності використовуються моделі Activity та 
DoneActivity. Activity містить інформацію про різні види фізичної активності 
(назва, метаболічний еквівалент), а DoneActivity зберігає записи про виконані 
користувачем активності, включаючи тривалість та дату. 
Взаємозв'язки між моделями. Модель User пов'язана з іншими 
моделями за допомогою відносин "один-до-багатьох": 
• Один користувач може мати багато токенів, записів про з'їдену їжу та
виконану активність.
• Один продукт харчування може бути пов'язаний з багатьма записами про
з'їдену їжу.
• Один вид активності може бути пов'язаний з багатьма записами про
виконану активність.
Така структура бази даних забезпечує ефективне зберігання та обробку
даних, необхідних для повноцінного функціонування додатку. 
3.1.5 Розробка інтерфейсу користувача 
Результатом проектування став інтуїтивно зрозумілий та зручний 
інтерфейс користувача, який дозволяє легко відстежувати харчування та 
досягати своїх цілей у сфері здоров'я. Застосунок буде корисним для широкого 
кола користувачів.  
Головні принципи яким слідує інтерфейс: 
1. Простота та інтуїтивність: Інтерфейс максимально простий та
зрозумілий для користувача. Не використовуються складні структур та
непотрібні елементи, надаючи перевагу лаконічному дизайну.
2. Зворотній зв'язок: Користувач отримує чіткий та своєчасний зворотній
зв'язок про свої дії. Це реалізовано за допомогою повідомлень про успішне
виконання операцій, візуальних підказок та інтерактивних елементів.
50 
ЧДТУ.242059-013ПЗ 
3. Послідовність: Інтерфейс послідовний у всіх розділах застосунку. 
Використовувалися однакові елементи керування, кольорова схема та 
шрифти у всіх частинах застосунку. 
4. Профілактика помилок: Інтерфейс розроблений таким чином, щоб 
мінімізувати ймовірність виникнення помилок. Це реалізовано за 
допомогою перевірки введених даних, підказок та повідомлень про 
помилки. 
 
Рисунок 3.4 – Сторінка Food з повідомленням про додавання нової їжі 
 
 
 
Рисунок 3.5 – Початкова сторінка застосунка 
 
51 
ЧДТУ.242059-013ПЗ 
 
Рисунок 3.6 – Сторінка входу в застосунок 
3.1.6 Опис розробки програмних компонентів 
У цьому розділі детально описано розроблені модулі та їх взаємозв'язки, 
що становлять основу веб-застосунку для трекінгу харчування. Кожен модуль 
виконує певну функцію і їх спільна робота забезпечує зручний та ефективний 
інструмент для відстеження харчування та досягнення цілей у сфері здоров'я. 
Модуль автентифікації (Authentication) 
Призначення: 
• Реєстрація нових користувачів. 
• Автентифікація користувачів (вхід). 
• Авторизація дій користувача. 
• Забезпечення безпеки даних користувача. 
Зв'язки: 
• Взаємодіє з базою даних для зберігання та отримання даних про 
користувачів. 
• Взаємодіє з іншими модулями для надання доступу до функціональності 
застосунку після успішної автентифікації. 
Особливості реалізації: 
• Використання bcrypt для хешування паролів. 
• Використання JWT (JSON Web Tokens) для створення та перевірки токенів 
доступу. 
52 
ЧДТУ.242059-013ПЗ 
• Реалізація механізму блокування токенів для забезпечення безпеки після 
виходу з системи. 
• Відправка електронних листів для підтвердження реєстрації та 
відновлення паролів. 
Фрагмент коду 
const isPasswordValid = await bcrypt.compare(req.body.password, 
user.password); 
const token = user.generateAccessJWT(); 
Модуль відстеження їжі (FoodTracking) 
Призначення: 
• Додавання, редагування та видалення даних про їжу. 
• Пошук продуктів харчування та страв у базі даних. 
• Розрахунок калорійності та макронутрієнтів спожитої їжі. 
Зв'язки: 
• Взаємодіє з базою даних для зберігання та отримання даних про їжу. 
• Взаємодіє з модулем панелі інструментів для оновлення даних про спожиті 
калорії. 
Особливості реалізації: 
• Використання MongoDB для зберігання даних про їжу. 
• Реалізація алгоритмів пошуку та фільтрації продуктів харчування. 
• Використання сторонніх API для отримання інформації про харчову 
цінність продуктів. 
Фрагмент коду: 
const savedFood = await newFood.save(); 
res.status(201).json(savedFood); 
Модуль відстеження тренувань (WorkoutTracking) 
Призначення: 
• Додавання, редагування та видалення даних про тренування. 
• Пошук видів тренувань у базі даних. 
• Розрахунок спалених калорій під час тренування. 
53 
ЧДТУ.242059-013ПЗ 
Зв'язки: 
• Взаємодіє з базою даних для зберігання та отримання даних про 
тренування. 
• Взаємодіє з модулем панелі інструментів для оновлення даних про спалені 
калорії. 
Особливості реалізації: 
• Використання MongoDB для зберігання даних про тренування. 
• Реалізація алгоритмів пошуку та фільтрації видів тренувань. 
• Використання сторонніх API для отримання інформації про калорійність 
тренувань. 
Фрагмент коду: 
const doneActivities = await Workout.findById( 
  req.params.id 
); 
Модуль панелі інструментів (Dashboard) 
Призначення: 
• Відображення інформації про спожиті та спалені калорії. 
• Відображення прогресу досягнення цілей. 
• Надання рекомендацій щодо харчування та тренувань. 
Зв'язки: 
• Взаємодіє з модулями відстеження їжі та тренувань для отримання даних. 
• Взаємодіє з модулем встановлення цілей для отримання інформації про 
цілі користувача. 
Особливості реалізації: 
• Використання React для створення інтерактивного інтерфейсу 
користувача. 
• Використання графіків та діаграм для візуалізації даних. 
Фрагмент коду: 
const [caloriesConsumed, setCaloriesConsumed] = useState(0); 
const [caloriesBurned, setCaloriesBurned] = useState(0); 
54 
ЧДТУ.242059-013ПЗ 
3.2 Тестування системи 
Важливим етапом розробки було комплексне тестування системи, 
спрямоване на забезпечення її бездоганної роботи. Кожен модуль було 
протестовано окремо, щоб переконатися у його відповідності встановленим 
вимогам та коректній роботі. Інтеграційне тестування допомогло виявити та 
усунути потенційні проблеми у взаємодії між модулями. 
3.2.1 Модульне тестування 
Модульне тестування контролера activityController, який відповідає за 
додавання, видалення та отримання завершених активностей користувачів. Цей 
тестовий файл забезпечує покриття коду контролера activityController, 
перевіряючи його основну функціональність та обробку помилок. 
Тестування основних сценаріїв: 
• Додавання активності: Перевіряє успішне додавання завершеної 
активності, а також обробку помилок (користувач або активність не 
знайдені). 
• Видалення активності: Перевіряє успішне видалення завершеної 
активності та обробку помилки, коли активність не знайдена. 
• Отримання активностей користувача: Перевіряє отримання всіх 
завершених активностей користувача за його ID, а також обробку помилок 
(недійсний ID користувача, внутрішня помилка сервера). 
Перевірка очікуваних результатів: Використовує expect для перевірки, чи 
методи res.status та res.json були викликані з правильними аргументами, чи були 
створені правильні об'єкти DoneActivity, чи були викликані відповідні методи 
моделі (save, findOne), та чи були виведені повідомлення про помилки.  
Наступні тести для контролера аутентифікації (authController), який 
відповідає за реєстрацію та вхід користувачів у систему. Він використовує 
бібліотеку Jest для модульного тестування. 
Тестування основних сценаріїв: 
• Register (Реєстрація): 
1. Перевіряє успішну реєстрацію нового користувача. 
55 
ЧДТУ.242059-013ПЗ 
1. Перевіряє, чи відповідь сервера має статус 200 та містить 
повідомлення "Send verify message". 
2. Перевіряє, чи метод sendMail було викликано з правильними 
параметрами (email одержувача). 
3. Перевіряє, чи повертається помилка, якщо користувач з таким 
email вже існує. 
4. Перевіряє, чи відповідь сервера має статус 400 та містить 
відповідне повідомлення про помилку. 
5. Перевіряє, чи обробляються помилки відправки email під час 
реєстрації.  
6. Перевіряє, чи відповідь сервера має статус 500. 
• Login (Вхід до системи): 
1. Перевіряє успішний вхід користувача в систему. 
2. Перевіряє, чи відповідь сервера має статус 200 та містить дані 
користувача, включаючи токен. 
3. Перевіряє повернення помилки при введенні невірних облікових 
даних. 
4. Перевіряє, чи відповідь сервера має статус 401 та містить 
повідомлення про невірні облікові дані. 
5. Перевіряє повернення помилки, якщо користувач не підтвердив 
свій акаунт. 
6. Перевіряє, чи відповідь сервера має статус 401 та містить 
відповідне повідомлення про необхідність підтвердження. 
Далі тести для контролера foodController, який відповідає за додавання, 
видалення, отримання та пошук продуктів харчування в вашому додатку.  
Тестування основних сценаріїв: 
• addFood (Додавання їжі): 
1. Перевіряє успішне додавання нового продукту харчування. 
2. Перевіряє, чи відповідь сервера має статус 200 та містить 
повідомлення "New food added". 
56 
ЧДТУ.242059-013ПЗ 
3. Перевіряє, чи були викликані відповідні методи моделі (findOne, 
конструктор Food, save). 
4. Перевіряє, чи повертається помилка, якщо продукт з такою ж 
назвою вже існує. 
5. Перевіряє, чи відповідь сервера має статус 400 та містить 
відповідне повідомлення про помилку. 
• deleteFood (Видалення їжі): 
1. Перевіряє успішне видалення продукту харчування. 
2. Перевіряє, чи відповідь сервера має статус 200 та містить 
повідомлення "Food deleted successfully". 
3. Перевіряє, чи були викликані відповідні методи моделі (findById, 
remove). 
4. Перевіряє повернення помилки 404, якщо продукт харчування не 
знайдено. 
• getAllFoods (Отримання всіх продуктів): 
1. Перевіряє успішне отримання всіх продуктів харчування. 
2. Перевіряє, чи відповідь сервера має статус 200 та містить список 
продуктів. 
3. Перевіряє, чи був викликаний метод find моделі. 
• getFoodsByName (Пошук продуктів за назвою): 
1. Перевіряє успішний пошук продуктів за назвою з урахуванням 
регістру. 
2. Перевіряє, чи відповідь сервера має статус 200 та містить список 
знайдених продуктів. 
3. Перевіряє, чи був викликаний метод find моделі з правильними 
параметрами пошуку (регулярний вираз та опція i для пошуку без 
урахування регістру). 
4. Перевіряє, чи у відповіді не більше 15 елементів (обмеження 
пошуку). 
 
 
57 
ЧДТУ.242059-013ПЗ 
Таблиця 3.1 
Результати модульного тестування 
Компонент Результат 
index.js Успішний запуск 
foods.js Успішне завантаження залежностей 
activities.js Успішне завантаження залежностей 
config.json Успішне завантаження залежностей 
user.js Успішне завантаження залежностей 
auth.js Успішне завантаження залежностей 
eatenFood.js Успішне завантаження залежностей 
doneActivity.js Успішне завантаження залежностей 
 
3.2.2 Інтеграційне тестування 
Перед тим як користувач зможе користуватися будь-якими функціями 
системи, він повинен увійти в свій обліковий запис. Щоб переконатися, що 
функція входу в систему працює правильно у різних сценаріях використання, 
треба додати інтеграційні тести. Ці тести допоможуть забезпечити надійність та 
коректність роботи функції входу в систему для користувачів. 
Позитивний сценарій входу: 
• Створити користувача в тестовій базі даних з відомими обліковими даними 
(вірний email та пароль). 
• Надіслати запит на вхід у систему з цими вірними обліковими даними. 
58 
ЧДТУ.242059-013ПЗ 
• Очікується успішна авторизація (код статусу 200) та отримання токену 
аутентифікації. 
Негативний сценарій входу (невірний email): 
• Спробувати ввійти з відомим в базі даних паролем, але з невірним email. 
• Очікується помилка авторизації (код статусу 401 або 403), оскільки 
система не зможе знайти користувача з таким email. 
Негативний сценарій входу (невірний пароль): 
• Спробувати ввійти з відомим в базі даних email, але з невірним паролем. 
• Очікується помилка авторизації (код статусу 401 або 403), оскільки 
введений пароль не відповідає паролю користувача. 
Негативний сценарій входу (невірний email та пароль): 
• Спробувати ввійти з невірним email та невірним паролем. 
• Очікується помилка авторизації (код статусу 401 або 403), оскільки або 
email, або пароль введені невірно. 
 
Таблиця 3.2 
Результати інтеграційного тестування 
Інтегровані Компоненти Результат 
index + Application Успішне завантаження залежностей 
Config + environment + Успішне завантаження залежностей 
ConfigModule 
DatabaseModule + Успішне завантаження залежностей 
databaseModels 
ExpressModels + express Успішне завантаження залежностей 
routes 
 
 
  
59 
ЧДТУ.242059-013ПЗ 
3.2.3 Приймальне тестування 
Користувач на самому початку стикається з реєстрацією. Це мабуть 
найголовніший блок застосунку. В ньому відбувається шифрування та 
хешування паролю, що забезпечує надійність даних користувача.  
Для хешування паролю використовувалась Bcrypt хеш-функція. Bcrypt  — 
це криптографічна хеш-функція, розроблена для хешування паролів і безпечного 
зберігання у серверній частині програм таким чином, щоб він був менш 
сприйнятливим до кібератак на основі словника. Він був створений у 1999 році 
Нільсом Провосом і Девідом Мазьєром на основі алгоритму шифрування 
Blowfish[26, 27, 28, 29]. 
 
 
Рисунок 3.7 – Приклад хешованого паролю з вже робочої бази даних 
 
Також одною з головних логік є забезпечення захисту від атак ботів. Для 
цього було розроблено логіку підтвердження пошти та сесійного токену який 
фіксує час активної сесії. Для відправлення повідомлення на пошту користувача 
використовувалась бібліотека nodemailer. 
 
 
Рисунок 3.8 – Повідомлення яке відправляється для підтвердження пошти  
60 
ЧДТУ.242059-013ПЗ 
 
Після підтвердження користувач може авторизуватись. Після авторизації в 
localStorage зберігається сесійний токен який дає змогу заходити на свій акаунт 
без авторизації. Проте цей токен не назавжди, тому через якийсь період потрібно 
його оновити авторизувавшись повторно. Для генерації токену 
використовувалась бібліотека jwt [30, 31, 32].  
 
 
Рисунок 3.9 – Збережений сесійний токен у localStorage браузера 
 
 
Рисунок 3.10 – Головна сторінка застосунку 
3.2.4 Приклади впровадженого програмного комплексу. 
Інструкція користувача. В даному розділі будуть описані основні 
інструкція для користувача застосунку з моніторингу харчування. 
Після відкриття застосунку користувач бачить головну сторінку на які є 
кнопка Sing up (зареєструватись). Для реєстрації потрібно на неї натиснути. 
Після натиску користувача перекине на сторінку реєстрації.  
 
61 
ЧДТУ.242059-013ПЗ 
 
Рисунок 3.11 – Головна сторінка застосунку 
 
 
Рисунок 3.12 – Сторінка реєстрації 
 
 Далі потрібно заповнити всі поля для реєстрації. Якщо якісь поля будуть 
не введені або введено не вірно користувач отримує про це повідомлення.  
 
 
Рисунок 3.13 – Повідомлення про помилки на сторінці реєстрації 
62 
ЧДТУ.242059-013ПЗ 
 
Далі якщо користувач правильно заповнив всі потрібні дані його буде 
перенесено на головну сторінку з повідомленням про те, що треба підтвердити 
пошту. 
 
 
Рисунок 3.14 – Повідомлення про відправку на пошту підтвердження 
 
 Далі користувачу варто підтвердити пошту. Для цього потрібно зайти на 
пошту та натиснути на посилання в повідомлені. 
  
 
Рисунок 3.15 – Повідомлення яке відправляється для підтвердження 
пошти  
 
 Далі на головній сторінці можна увійти в свій акаунт для цього потрібно 
натиснути на кнопку log in. Користувач попадає на сторінку входу в 
застосунок. Для входу потрібно ввести пошту та пароль які вводили при 
реєстрації. 
 
63 
ЧДТУ.242059-013ПЗ 
 
Рисунок 3.16 – Сторінка входу в застосунок 
 
 Після входу користувач попадає на Home сторінку на якій відображаються 
дані за сьогодні. Тобто скільки було спалено та спожито калорій. Користувач 
може переходити на сторінки Food та Activity за допомогою бокового меню. 
  
 
Рисунок 3.17 – Головна сторінка 
 
 
Рисунок 3.18 – Сторінка додавання їжі 
 
64 
ЧДТУ.242059-013ПЗ 
 
Рисунок 3.19 – Сторінка додавання активностей 
 
 Тепер користувач може додавати нові активності у список всіх можливих 
активності натиснувши кнопку Create new activity. 
 
 
Рисунок 3.20 – Модальне вікно для додавання нової активності 
 
 
65 
ЧДТУ.242059-013ПЗ 
Рисунок 3.21 – Повідомлення про успішне додавання нової активності 
 
 Тепер для того, щоб знайти додану активність достатньо вписати перші 
літери нашої активності. 
 
 
Рисунок 3.22 – Результат пошуку активності 
 
 Тепер можна додати цю активність як виконану. Для цього потрібно 
натиснути кнопку add у активності. Після чого з’явиться модальне вікно в яке 
потрібно буде ввести дату активності та час який був затрачений на цю 
активність.  
 
 
Рисунок 3.23 – Модальне вікно додавання виконаної активності 
 
 Після натиску add в модальному вікні буде додано дану активність в 
виконану користувачем. Після додавання буде показане відповідне 
повідомлення. Тепер ця активність буде відображатись в My activities та 
Statistics.  
66 
ЧДТУ.242059-013ПЗ 
 
 
Рисунок 3.24 – Модальне вікно додавання виконаної активності 
 
 Також на Home сторінці якщо активність була добавлена та виконана в 
один день. 
 
 
Рисунок 3.25 – Оновленні дані на Home сторінці після додавання виконаної 
активності 
 
 Загалом це всі основні інструкції які потрібно знати для користувача. 
Було приділено багато уваги інтуїтивному інтерфейсу, щоб забезпечити 
зрозумілість інтерфейсу. 
 
67 
ЧДТУ.242059-013ПЗ 
Висновки до 3 розділу 
Тестування системи моніторингу харчування підтвердило її готовність до 
практичного використання. Кожна складова частина була перевірена для 
забезпечення безпомилкової роботи та відповідності усім функціональним 
вимогам. Інтеграційне тестування дозволило підтвердити злагоджену взаємодію 
між різними компонентами системи. 
Окрім функціональності, особлива увага приділялася безпеці даних 
користувачів. Використання надійних методів шифрування, таких як Bcrypt, та 
додаткові механізми захисту від несанкціонованого доступу роблять систему 
безпечною для зберігання персональної інформації. 
Продуманий та інтуїтивно зрозумілий інтерфейс робить систему зручною 
у використанні. Користувачі зможуть легко вносити дані про своє харчування та 
фізичну активність, відстежувати споживання та витрати калорій, а також 
отримувати детальну статистику, що сприятиме досягненню їхніх цілей у сфері 
здоров'я та фітнесу. 
  
68 
ЧДТУ.242059-013ПЗ 
ВИСНОВКИ 
У ході виконання даної дипломної роботи було розроблено веб-застосунок 
для моніторингу харчуванням, який відповідає сучасним вимогам до зручності 
та функціональності. Застосунок надає користувачам можливість відстежувати 
споживання та витрати калорій, встановлювати цілі та відстежувати прогрес їх 
досягнення. 
У процесі розробки було проведено аналіз існуючих аналогів, що 
дозволило виявити їх сильні та слабкі сторони. На основі цього аналізу було 
сформовано вимоги до розроблюваного застосунку, які враховують як потреби 
користувачів, так і технічні аспекти реалізації. 
Для забезпечення безпеки даних користувачів було застосовано 
шифрування паролів та реалізовано механізм підтвердження електронної пошти. 
Застосунок має інтуїтивно зрозумілий інтерфейс, що дозволяє 
користувачам легко додавати інформацію про спожиті продукти та виконані 
фізичні активності. Базові списки продуктів та активностей спрощують процес 
введення даних, а можливість додавання власних елементів робить застосунок 
більш персоналізованим. 
На головній сторінці застосунку відображається інформація про спожиті 
та витрачені калорії за день, що дозволяє користувачам швидко оцінити свій 
прогрес. Також реалізовано можливість перегляду даних за весь час, що дозволяє 
аналізувати динаміку змін та коригувати свої дії. 
Розроблений застосунок може бути корисним для широкого кола 
користувачів, які прагнуть контролювати своє харчування та фізичну активність. 
Застосунок може бути використаний як самостійний інструмент, так і в 
комплексі з іншими методами контролю ваги та підтримки здорового способу 
життя. 
У подальшому планується розширити функціонал застосунку, додавши 
можливість синхронізації з фітнес-трекерами, розширення бази даних продуктів 
та активностей, а також впровадження елементів гейміфікації для підвищення 
мотивації користувачів. 
 
69 
ЧДТУ.242059-013ПЗ 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
1. Проблема ожиріння в сучасному світі [Електронний ресурс] – Режим доступу: 
https://amnu.gov.ua/problema-ozhyrinnya-v-suchasnomu-sviti/ 
2. Body Mass Index [Електронний ресурс] – Режим доступу: 
https://journals.lww.com/nutritiontodayonline/fulltext/2015/05000/body_mass
_index__obesity,_bmi,_and_health__a.5.aspx 
3. Body Mass Index (BMI): A Screening Tool Analysis [Електронний ресурс] –
Режим доступу: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8920809/ 
4. Quetelet, the average man and medical knowledge [Електронний ресурс] –
Режим доступу: 
https://www.scielo.br/j/hcsm/a/fgy4sjKvTN5DR57G87Gfsqc/?lang=en 
5. How to calculate Body Mass Index [Електронний ресурс] – Режим доступу: 
https://www.diabetes.ca/resources/tools---resources/body-mass-index-(bmi)-
calculator#:~:text=How%20to%20calculate%20Body%20Mass,range%20is%2018.5 
%20to%2024.9. 
6. Calculating how many calories are burned in a day [Електронний ресурс] –Режим 
доступу: https://www.medicalnewstoday.com/articles/319731 
7. Eva V. Osilla, Anthony O. Safadi, Sandeep Sharma. Calories [Електронний 
ресурс] – Режим доступу: https://www.ncbi.nlm.nih.gov/books/NBK499909/ 
8. Revised Harris–Benedict Equation: New Human Resting Metabolic Rate
Equation [Електронний ресурс] – https:// Режим доступу: 
www.ncbi.nlm.nih.gov/pmc/articles/PMC9967803/ 
9. Clinical practice guideline for the diagnosis and treatment of pediatric obesity: 
recommendations from the Committee on Pediatric Obesity of the Korean Society of 
Pediatric Gastroenterology Hepatology and Nutrition [Електронний ресурс] – 
Режим доступу: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6351800/ 
10. Diet Intervention Examining The Factors Interacting with Treatment Success
(DIETFITS) 2018 [Електронний ресурс] https:// – Режим доступу:  
www.ncbi.nlm.nih.gov/pmc/articles/PMC5274550/ 
11. Clinical effectiveness of very-low-energy diets in the management of weight
loss: a systematic review and meta-analysis of randomized controlled trials 
70 
ЧДТУ.242059-013ПЗ 
[Електронний ресурс] – Режим доступу: 
https://pubmed.ncbi.nlm.nih.gov/26775902/ 
12. Very-low-calorie ketogenic diet (VLCKD) in the management of metabolic 
diseases: systematic review and consensus statement from the Italian Society of 
Endocrinology (SIE) [Електронний ресурс] – Режим доступу: https://
pubmed.ncbi.nlm.nih.gov/31111407/ 
13. Metabolic equivalents (METS) in exercise testing, exercise prescription, and 
evaluation of functional capacity [Електронний ресурс] – Режим доступу: https://
pubmed.ncbi.nlm.nih.gov/2204507/ 
14. MET Values for 800+ Activities [Електронний ресурс] – Режим доступу:
https://golf.procon.org/met-values-for-800-activities/ 
15. Myfitnesspal [Електронний ресурс] – Режим доступу: 
https://www.myfitnesspal.com/ 
16. Mynetdiary [Електронний ресурс] – Режим доступу: 
https://www.mynetdiary.com/signup.do?p=1 
17. Goal Setting Statistics: Research Studies Facts & Findings (2023)[Електронний 
ресурс] – Режим доступу: https://dreammakerr.com/goal-setting-statistics/ 
18. What Is the MERN Stack? Guide & Examples [Електронний ресурс] - Режим 
доступу: https://www.oracle.com/be/database/mern-stack/ 
19. Introduction to MongoDB Е[лектронний ресурс] - Режим доступу: https://
www.mongodb.com/docs/manual/introduction/ 
20. Express.js: Introduction [Електронний ресурс] - Режим доступу: https://
expressjs.com/en/starter/hello-world.html 
21. React.js [Електронний ресурс] - Режим доступу: https://react.dev/
22. Node.js [Електронний ресурс] - https://nodejs.org/en/ Режим доступу: 
learn/getting-started/introduction-to-nodejs 
23. Mern Stack Advantages And Disadvantages [Електронний ресурс] - Режим
доступу: https://www.skillvertex.com/blog/mern-stack-advantages-and-
disadvantages/ 
71 
ЧДТУ.242059-013ПЗ 
24. The Popularity of the MERN Stack [Електронний ресурс] - Режим доступу:
https://www.whizoid.com/blogs/unlocking-thepower-of-the-mern-stack:-
benefits,%20challenges,%20and%20future/# 
25. 10 Benefits of Hiring MERN Stack Developers For Your Project [ Електронний 
ресурс] - Режим доступу: https://www.vlinkinfo.com/blog/10-benefits-of-hiring-
mern-stack-developers/ 
26. What is bcrypt? [Електронний ресурс] - Режим доступу: https://nordvpn.com/
blog/what-is-
bcrypt/#:~:text=Bcrypt%20is%20a%20cryptographic%20hash,cipher%20algorithm%
20as%20its%20base. 
27. Understanding Blowfish Encryption Algorithm | 2023 [Електронний ресурс] -
Режим доступу: https://cyberw1ng.medium.com/understanding-blowfish-encryption-
algorithm-2023-
24eb8f69f85b#:~:text=Blowfish%20is%20a%20symmetric%2Dkey,examples%2C%
20and%20advantages%20of%20Blowfish. 
28. Algoritmo de pez globo con ejemplos [Електронний ресурс] - Режим доступу: 
https://www.geeksforgeeks.org/blowfish-algorithm-with-examples/ 
29. blowfish encrypt & decrypt online [Електронний ресурс] - Режим доступу: 
https://encode-decode.com/blowfish-encrypt-online/ 
30. JSON Web Tokens are an open, industry standard RFC 7519 method for 
representing claims securely between two parties. [Електронний ресурс] - Режим 
доступу: https://jwt.io/ 
31. JSON Web Token. [Електронний ресурс] - Режим доступу: https://
en.wikipedia.org/wiki/JSON_Web_Token 
32. Jsonwebtoken [Електронний ресурс] - Режим доступу: https://www.npmjs.com/
package/jsonwebtoken 
72 
ЧДТУ.242059-013ПЗ 
 ДОДАТОК А  
 
 
 ЗАТВЕРДЖЕНО: 
Зав. кафедрою ПЗАС, професор 
_________________ Голуб С.В. 
„____” ______________ 2024 р. 
 
 
 
Веб-застосунок для моніторингу харчування 
 
 
 
Специфікація 
482. ЧДТУ 2059.013 
Листів 2 
 
 
 
 
Розробник ________________ Соколов М.С. 
Керівник ________________ Немченко В.В. 
 
 
 
 
 
 
 
73 
ЧДТУ.242059-013ПЗ 
2024 
Позначення Найменування Примітка 
 Документація  
482.ЧДТУ. 2059 12 01 Текст програми  
482.ЧДТУ. 2059 34 01 Інструкція  
482.ЧДТУ. 2059 90 01 кГорраифсітчунвіа мчаетвеі ріали  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
 
 
74 
ЧДТУ.242059-013ПЗ 
ДОДАТОК Б 
 Веб-застосунок для моніторингу харчування 
Текст програми 
482.ЧДТУ. 2059 12 01
Листів 20 
Розробник ________________  Соколов М.С 
2024 
75 
482.ЧДТУ. 2059 12 01 
const express = require('express'); 
const Auth = require('./auth'); 
const Food = require('./food'); 
const EatenFood = require('./eaten-food'); 
const Activity = require('./activity'); 
const DoneActivity = require('./done-activity'); 
const {getMe, updateGoals} = require('../controllers/user-controller'); 
const { Verify, VerifyRole, VerifyEmail } = require('../middleware/verify') 
const {check} = require('express-validator') 
const app = express(); 
app.use('/serve/auth', Auth); 
app.use('/serve/food', Food); 
app.use('/serve/eaten-food', EatenFood); 
app.use('/serve/activity', Activity); 
app.use('/serve/done-activity', DoneActivity); 
app.disable("x-powered-by"); 
app.get("/serve", (req, res) => { 
    try { 
        res.status(200).json({ 
status: "success", 
data: [], 
message: "Welcome to our API homepage!", 
        }); 
    } catch (err) { 
        res.status(500).json({ 
status: "error", 
message: "Internal Server Error", 
        }); 
    } 
76 
482.ЧДТУ. 2059 12    
01                                               }); 
app.get("/serve/user/me", Verify, getMe); 
app.put("/serve/user/:id", 
    check("activityGoal") 
        .isFloat() 
        .withMessage("Activity should be number") 
        .isFloat({min: 0}) 
        .withMessage("Activity should be positive"), 
    check("deficitCaloriesGoal") 
        .isFloat() 
        .withMessage("Activity should be number") 
        .isFloat({min: 0}) 
        .withMessage("Activity should be positive"), 
    updateGoals); 
app.get("/serve/admin", Verify, VerifyRole, (req, res) => { 
  res.status(200).json({ 
        status: "success", 
        message: "Welcome to the Admin portal!", 
    }); 
}); 
app.get("/serve/verify/:token", VerifyEmail, (req, res) => { 
    res.status(200).send({message: "Account Verified"}); 
}) 
module.exports = app; 
const express = require('express'); 
const {addFood, deleteFood, getAllFoods, getFoodsByName} = 
require('../controllers/foods-controller'); 
77 
482.ЧДТУ. 2059 12 01 
const {check} = require('express-validator') 
const Validate = require('../middleware/validate') 
const router = express.Router(); 
router.post( 
    '/', 
    check("foodName") 
       .notEmpty() 
       .withMessage("Food name is required") 
       .trim() 
       .escape(), 
    check("calories") 
       .notEmpty() 
       .withMessage("Calories is required") 
       .isFloat() 
       .withMessage("Calories should be number") 
       .isFloat({min: 0}) 
       .withMessage("Calories should be positive"), 
    check("carbohydrates") 
       .notEmpty() 
       .withMessage("Carbohydrates is required") 
       .isFloat() 
       .withMessage("Carbohydrates should be number") 
       .isFloat({min: 0}) 
       .withMessage("Carbohydrates should be positive"), 
    check("proteins") 
       .notEmpty() 
       .withMessage("Proteins is required") 
       .isFloat() 
       .withMessage("Proteins should be number") 
78 
482.ЧДТУ. 2059 12 
01        .isFloat({min: 0}) 
       .withMessage("Proteins should be positive"), 
    check("fats") 
       .notEmpty() 
       .withMessage("Fats is required") 
       .isFloat() 
       .withMessage("Fats should be number") 
       .isFloat({min: 0}) 
       .withMessage("Fats should be positive"), 
    Validate, 
    addFood); 
router.get('/', getAllFoods); 
router.get('/search', getFoodsByName); 
router.delete('/:id', deleteFood); 
module.exports = router; 
const express = require('express'); 
const { 
    addEatenFood, 
    deleteEatenFood, 
    getAllEatenFoodsByUserId 
} = require('../controllers/eatenFood-controller'); 
const {check} = require('express-validator') 
const Validate = require('../middleware/validate') 
const router = express.Router(); 
router.post('/:id', 
    check("foodId") 
       .notEmpty() 
79 
482.ЧДТУ. 2059 12 01 
       .withMessage("FoodId is required"), 
    check("weight") 
       .notEmpty() 
       .withMessage("Weight is required") 
       .isFloat() 
       .withMessage("Weight should be number") 
       .isFloat({min: 0}) 
       .withMessage("Weight should be positive"), 
    check("date") 
       .notEmpty() 
       .withMessage("Date is required") 
       .isISO8601() 
       .withMessage("Date format is not correct, it should be in ISO 8601 format"), 
    Validate, 
    addEatenFood); 
router.get('/:id', getAllEatenFoodsByUserId); 
router.put('/:id', deleteEatenFood); 
module.exports = router; 
const express = require('express'); 
const { 
    addDoneActivity, 
    deleteDoneActivities, 
    getAllDoneActivitiesByUserId 
} = require('../controllers/doneActivity-controller'); 
const {check} = require('express-validator') 
const Validate = require('../middleware/validate') 
const router = express.Router(); 
80 
482.ЧДТУ. 2059 12 01 
router.post('/:id', 
    check("activityId") 
       .notEmpty() 
       .withMessage("activityId is required"), 
    check("time") 
       .notEmpty() 
       .withMessage("Time is required") 
       .isFloat() 
       .withMessage("Time should be number") 
       .isFloat({min: 0}) 
       .withMessage("Time should be positive"), 
    check("date") 
       .notEmpty() 
       .withMessage("Date is required") 
       .isISO8601() 
       .withMessage("Date format is not correct, it should be in ISO 8601 format"), 
    Validate, 
    addDoneActivity); 
router.get('/:id', getAllDoneActivitiesByUserId); 
router.put('/:id', deleteDoneActivities); 
module.exports = router; 
const express = require("express"); 
const {Register, Login, Logout} = require("../controllers/auth.js"); 
const Validate = require("../middleware/validate.js"); 
const {check} = require("express-validator"); 
const {Verify} = require('../middleware/verify') 
const bodyParser = require('body-parser') 
const router = express.Router(); 
const jsonParser = bodyParser.json() 
81 
482.ЧДТУ. 2059 12 01 
router.post( 
    "/register", 
    jsonParser, 
    check("email") 
        .isEmail() 
        .withMessage("Enter a valid email address") 
        .normalizeEmail(), 
    check("firstName") 
       .notEmpty() 
        .withMessage("You first name is required") 
        .trim() 
        .escape(), 
    check("lastName") 
       .notEmpty() 
        .withMessage("You last name is required") 
        .trim() 
        .escape(), 
    check("password") 
        .notEmpty() 
        .isLength({ min: 8 }) 
        .withMessage("Password must be at least 8 chars long"), 
    check("gender") 
       .notEmpty() 
       .isIn(["male", "female", "other"]) 
       .withMessage("Gender must be 'male', 'female', or 'other'"), 
    check("age") 
       .notEmpty() 
       .withMessage("Age is required") 
       .isInt({min: 1, max: 100}) 
       .withMessage("Age must be a positive integer [1, 100]"), 
82 
482.ЧДТУ. 2059 12 01 
    check("weight") 
       .notEmpty() 
       .withMessage("Weight is required") 
       .isInt({min: 0, max: 300}) 
       .withMessage("Weight must be a positive number [0, 300]"), 
    check("height") 
       .notEmpty() 
       .withMessage("Height is required") 
       .isInt({min: 0, max: 300}) 
       .withMessage("Height must be a positive number [0, 300]"), 
    check("activityLevel") 
       .notEmpty() 
       .withMessage("Activity level is required") 
       .isFloat({min: 1, max: 2}) 
       .withMessage("Activity Level must be from 1 to 2"), 
    Validate, 
    Register 
); 
router.post( 
    "/login", 
    jsonParser, 
    check("email") 
        .isEmail() 
        .withMessage("Enter a valid email address") 
        .normalizeEmail(), 
    check("password").not().isEmpty(), 
    Validate, 
    Login 
); 
83 
482.ЧДТУ. 2059 12 01 
router.get('/logout', Logout); 
module.exports = router; 
const express = require('express'); 
const {addActivity, getActivitiesByName} = require('../controllers/activities-
controller'); 
const {check} = require('express-validator') 
const Validate = require('../middleware/validate') 
const router = express.Router(); 
router.post( 
    '/', 
    check("activityName") 
       .notEmpty() 
       .withMessage("Activity name is required") 
       .trim() 
       .escape(), 
    check("metabolicEquivalent") 
       .notEmpty() 
       .withMessage("Metabolic equivalent is required") 
       .isFloat() 
       .withMessage("Metabolic equivalent should be number") 
       .isFloat({min: 0}) 
       .withMessage("Metabolic equivalent should be positive"), 
    Validate, 
    addActivity 
); 
router.get('/search', getActivitiesByName); 
84 
482.ЧДТУ. 2059 12 01 
module.exports = router; 
import React from 'react'; 
import './App.styl'; 
import {MainRouter} from "./router"; 
import {AuthProvider} from "./modules/auth"; 
import {AlertProvider} from "./modules/contexts/alert-provider"; 
import { Provider } from 'react-redux'; 
import store from './redux/store'; 
function App() { 
  return ( 
      <Provider store={store}> 
          <AlertProvider> 
<AuthProvider> 
<MainRouter/> 
</AuthProvider> 
          </AlertProvider> 
      </Provider> 
  ); 
} 
export default App; 
import React from "react"; 
import {Route, Routes} from "react-router-dom"; 
import {RegisterPage, LoginPage, RequireAuth} from "../modules/auth"; 
import {Introduction} from "../modules/introduction"; 
import {Main} from '../modules/main'; 
export const MainRouter = () => { 
85 
482.ЧДТУ. 2059 12 01 
    return ( 
        <Routes> 
<Route path="/" element={<Introduction/>}/> 
<Route path="/register" element={<RegisterPage/>}/> 
<Route path="/login" element={<LoginPage />} /> 
<Route 
path="/main" 
element={ 
<RequireAuth> 
<Main/> 
</RequireAuth> 
} 
/> 
        </Routes> 
    ) 
} import React, {useEffect, useRef} from "react"; 
import {CircularProgress, Stack} from "@mui/joy"; 
import {Header} from './header'; 
import {LetsStart} from './lets-start'; 
import {useAuth} from '../auth/auth-provider'; 
import './introduction.styl'; 
export const Introduction = () => { 
    const auth = useAuth(); 
    const isRunUseEffect = useRef(false); 
    useEffect(() => { 
        if (isRunUseEffect.current) { 
auth?.checkUser({redirectForVerify: '/main'}); 
86 
482.ЧДТУ. 2059 12 01 
        } 
        return () => { 
isRunUseEffect.current = true; 
        } 
    }, []); 
    return ( 
        <> 
{auth?.isLoading ? ( 
<Stack 
sx={{height: '100vh'}} 
justifyContent="center" 
alignItems="center"> 
<CircularProgress color="warning" size="lg" /> 
</Stack>) : ( 
<div className="introduction"> 
<Header/> 
<main className="introduction__main"> 
<LetsStart/> 
<section> 
</section> 
</main> 
</div> 
)} 
        </> 
    ); 
87 
482.ЧДТУ. 2059 12 
01 } 
import React, {FormEvent} from "react"; 
import {useAuth} from "./auth-provider"; 
import {Button, FormControl, FormLabel, Input, Radio, RadioGroup, Slider, 
Stack} from "@mui/joy"; 
import {getValueFromInput} from 'src/modules/utils'; 
import './register-page.styl'; 
const marks = [ 
    { 
        value: 1, 
        label: 'no activity', 
    }, 
    { 
        value: 2, 
        label: '7 activities/week', 
    } 
]; 
export const RegisterPage = () => { 
    const auth = useAuth(); 
    function handleSubmit(event: FormEvent<HTMLFormElement>) { 
        event.preventDefault(); 
        const formData = new FormData(event.currentTarget); 
        const email = getValueFromInput<string>(formData.get("email")); 
        const password = getValueFromInput<string>(formData.get("password")); 
88 
482.ЧДТУ. 2059 12 01
        const firstName = getValueFromInput<string>(formData.get("first-
name")); 
        const lastName = getValueFromInput<string>(formData.get("second-
name")); 
        const gender = getValueFromInput<string>(formData.get("gender")); 
        const age = getValueFromInput<number>(formData.get("age")); 
        const height = getValueFromInput<number>(formData.get("height")); 
        const weight = getValueFromInput<number>(formData.get("weight")); 
        const activityLevel = 
getValueFromInput<number>(formData.get("activityLevel")); 
        if (auth) { 
auth.register({ 
email, 
password, 
firstName, 
lastName, 
gender: gender?.toLowerCase(), 
age, 
height, 
weight, 
activityLevel 
}) 
        } 
    } 
    return ( 
        <div className="register"> 
<form onSubmit={handleSubmit} className="register__form"> 
<h3 className="register__title">Create Account</h3> 
<Stack spacing={2}> 
89 
482.ЧДТУ. 2059 12 01
<Stack justifyContent="space-between" direction="row"> 
<Stack> 
<FormControl> 
<FormLabel>Email</FormLabel> 
<Input name="email" placeholder="Enter email" 
type="email"/> 
</FormControl> 
<FormControl> 
<FormLabel>Password</FormLabel> 
<Input name="password" placeholder="Enter password" 
type="password"/> 
</FormControl> 
<FormControl> 
<FormLabel>First name</FormLabel> 
<Input name="first-name" placeholder="Enter first name" 
type="text"/> 
</FormControl> 
<FormControl> 
<FormLabel>Second name</FormLabel> 
<Input name="second-name" placeholder="Enter second 
name" type="text"/> 
</FormControl> 
</Stack> 
<Stack> 
<FormControl> 
<FormLabel>Age</FormLabel> 
<Input 
slotProps={{ 
input: { 
min: 0, 
max: 100, 
90 
482.ЧДТУ. 2059 12 01 
step: 1, 
} 
}} 
name="age" 
placeholder="Enter age" 
type="number" 
/> 
</FormControl> 
<FormControl> 
<FormLabel>Weight</FormLabel> 
<Input 
endDecorator="kg" 
slotProps={{ 
input: { 
min: 0, 
max: 300, 
step: 1, 
} 
}} 
name="weight" 
placeholder="Enter weight" 
type="number" 
/> 
</FormControl> 
<FormControl> 
<FormLabel>Height</FormLabel> 
<Input 
endDecorator="cm" 
slotProps={{ 
input: { 
min: 0, 
91 
482.ЧДТУ. 2059 12 01 
max: 300, 
step: 1, 
} 
}} 
name="height" 
placeholder="Enter height" 
type="number" 
/> 
</FormControl> 
<FormControl> 
<FormLabel>Activity level</FormLabel> 
<Slider 
name="activityLevel" 
aria-label="Custom marks" 
defaultValue={1.5} 
step={0.1} 
valueLabelDisplay="auto" 
max={2} 
min={1} 
marks={marks} 
/> 
</FormControl> 
</Stack> 
<Stack> 
<FormControl> 
<FormLabel>Gender</FormLabel> 
<RadioGroup 
defaultValue="female" 
name="gender" 
sx={{ my: 1 }}> 
<Radio value="female" label="Female" /> 
92 
482.ЧДТУ. 2059 12 01
<Radio value="male" label="Male" /> 
</RadioGroup> 
</FormControl> 
</Stack> 
</Stack> 
<Button loading={auth?.isLoading} loadingPosition="end" 
type="submit">Registry</Button> 
</Stack> 
</form> 
        </div> 
    ); 
} 
import React, {FormEvent} from "react"; 
import {useAuth} from "./auth-provider"; 
import {Button, FormControl, FormLabel, Input, Stack} from "@mui/joy"; 
import './login-page.styl'; 
export const LoginPage = () => { 
    const auth = useAuth(); 
    function handleSubmit(event: FormEvent<HTMLFormElement>) { 
        event.preventDefault(); 
        const formData = new FormData(event.currentTarget); 
        const email = formData.get("email") as string; 
        const password = formData.get("password") as string; 
        if (auth) { 
auth.login({email, password}) 
93 
482.ЧДТУ. 2059 12 01 
        } 
    } 
    return ( 
        <div className="login"> 
<form onSubmit={handleSubmit} className="login__form"> 
<h3 className="login__title">Login</h3> 
<Stack spacing={3}> 
<FormControl> 
<FormLabel>Email</FormLabel> 
<Input name="email" placeholder="Enter email" type="email"/> 
</FormControl> 
<FormControl> 
<FormLabel>Password</FormLabel> 
<Input name="password" placeholder="Enter password" 
type="password"/> 
</FormControl> 
<Button type="submit">Log in</Button> 
</Stack> 
</form> 
        </div> 
    ); 
} 
import React, {useState} from "react"; 
import {Stack} from "@mui/joy"; 
import {Menu} from "./components/menu"; 
import {TABS} from "./constants"; 
import {Home} from './home'; 
import {Food} from './food'; 
import {Activity} from './activity'; 
94 
482.ЧДТУ. 2059 12 01 
export const Main = () => { 
    const [activityTab, setActivityTab] = useState(TABS.HOME); 
    return ( 
        <Stack direction="row"> 
<Menu {...{activityTab, setActivityTab}}/> 
{activityTab === TABS.HOME ? <Home/> : null} 
{activityTab === TABS.FOOD ? <Food/> : null} 
{activityTab === TABS.ACTIVITY ? <Activity/> : null} 
        </Stack> 
    ) 
} 
95 
 ДОДАТОК В 
 Веб-застосунок для моніторингу харчування 
Інструкція користувачеві 
482.ЧДТУ. 2059 34 01
Листів 8 
Розробник ________________  Соколов М.С 
2024 
96 
482.ЧДТУ. 2059 34 01
Інструкція користувача. В даному додатку будуть описані основні 
інструкція для користувача застосунку з моніторингу харчування. 
Після відкриття застосунку користувач бачить головну сторінку на які є 
кнопка Sing up (зареєструватись). Для реєстрації потрібно на неї натиснути. 
Після натиску користувача перекине на сторінку реєстрації.  
Рисунок В.1 – Головна сторінка застосунку 
Рисунок В.2 – Сторінка реєстрації 
Далі потрібно заповнити всі поля для реєстрації. Якщо якісь поля будуть 
не введені або введено не вірно користувач отримує про це повідомлення.  
97 
482.ЧДТУ. 2059 34 01 
Рисунок В.3 – Повідомлення про помилки на сторінці реєстрації 
Далі якщо користувач правильно заповнив всі потрібні дані його буде 
перенесено на головну сторінку з повідомленням про те, що треба підтвердити 
пошту. 
Рисунок В.4 – Повідомлення про відправку на пошту підтвердження 
Далі користувачу варто підтвердити пошту. Для цього потрібно зайти на 
пошту та натиснути на посилання в повідомлені. 
Рисунок В.5 – Повідомлення яке відправляється для підтвердження 
пошти 
98 
ЧДТУ.242059-013ПЗ 
Далі на головній сторінці можна увійти в свій акаунт для цього потрібно 
натиснути на кнопку log in. Користувач попадає на сторінку входу в 
застосунок. Для входу потрібно ввести пошту та пароль які вводили при 
реєстрації. 
Рисунок В.6 – Сторінка входу в застосунок 
Після входу користувач попадає на Home сторінку на якій відображаються 
дані за сьогодні. Тобто скільки було спалено та спожито калорій. Користувач 
може переходити на сторінки Food та Activity за допомогою бокового меню. 
Рисунок В.7 – Головна сторінка 
99 
482.ЧДТУ. 2059 34 01 
Рисунок В.8 – Сторінка додавання їжі 
Рисунок В.9 – Сторінка додавання активностей 
Тепер користувач може додавати нові активності у список всіх можливих 
активності натиснувши кнопку Create new activity. 
100 
482.ЧДТУ. 2059 34 01
Рисунок В.10 – Модальне вікно для додавання нової активності 
Рисунок В.11 – Повідомлення про успішне додавання нової активності 
Тепер для того, щоб знайти додану активність достатньо вписати перші 
літери нашої активності. 
Рисунок В.12 – Результат пошуку активності 
Тепер можна додати цю активність як виконану. Для цього потрібно 
натиснути кнопку add у активності. Після чого з’явиться модальне вікно в яке 
потрібно буде ввести дату активності та час який був затрачений на цю 
активність.  
101 
482.ЧДТУ. 2059 34 01 
Рисунок В.13 – Модальне вікно додавання виконаної активності 
Після натиску add в модальному вікні буде додано дану активність в 
виконану користувачем. Після додавання буде показане відповідне 
повідомлення. Тепер ця активність буде відображатись в My activities та 
Statistics.  
Рисунок В.14 – Модальне вікно додавання виконаної активності 
Також на Home сторінці якщо активність була добавлена та виконана в 
один день. 
102 
482.ЧДТУ. 2059 34 01 
Рисунок В.15 – Оновленні дані на Home сторінці після додавання виконаної 
активності 
Загалом це всі основні інструкції які потрібно знати для користувача. 
Було приділено багато уваги інтуїтивному інтерфейсу, щоб забезпечити 
зрозумілість інтерфейсу. 
103 
 ДОДАТОК Г 
 Веб-застосунок для моніторингу харчування 
Графічні матеріали 
482.ЧДТУ. 2059 90 01
Листів 5 
Розробник ________________  Соколов М.С 
2024 
104 
482.ЧДТУ. 2059 90 01 
Рисунок Г.1 – Перший слайд презентації 
Рисунок Г.2 – Проблема ожиріння 
105 
482.ЧДТУ. 2059 90 01 
Рисунок Г.3 – Формули використані у роботі 
Рисунок Г.4 – Технології використанні для безпеки 
106 
482.ЧДТУ. 2059 90 01 
Рисунок Г.5 – Засоби розробки 
Рисунок Г.6 – Головна сторінка 
107 
482.ЧДТУ. 2059 90 01 
Рисунок Г.7 – Сторінка входу та реєстрації 
Рисунок Г.8 – Сторінка зі статистикою за день 
108 
482.ЧДТУ. 2059 90 01 
Рисунок Г.9 – Сторінки маніпуляцій з їжею та активностями 
Рисунок Г.10 – Останій слайд з вдячністю за увагу 
109
ChSTU repository

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