Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/8864| Title: | WEB-застосунок для реалізації кліматичних умов на складському приміщенні |
| Authors: | Півень, Олександр Борисович Коцарев, Максим Олександрович |
| Keywords: | WEB-ЗАСТОСУНОК;PYTHON;FLASK;REACT;ПОСТГРЕС;КЛІМАТ-КОНТРОЛЬ;ТЕМПЕРАТУРА;ВОЛОГІСТЬ;MONITORING;TELEGRAM API;АРХІТЕКТУРА СИСТЕМИ;МАСШТАБОВАНІСТЬ;WEB APPLICATION;PYTHON;FLASK;REACT;POSTGRESS;CLIMATE CONTROL;TEMPERATURE;HUMIDITY;MONITORING;TELEGRAM API;SYSTEM ARCHITECTURE;SCALABILITY |
| Issue Date: | 16-Jun-2025 |
| Abstract: | АНОТАЦІЇ
Виконавець: Коцарев Максим Олександрович.
Назва роботи: "WEB-застосунок для реалізації кліматичних умов на складському приміщенні".
Спеціальність: 121 Інженерія програмного забезпечення.
Навчальний заклад: «Черкаський державний технологічний університет» м. Черкаси, 2025р.
У бакалаврській роботі розглянуто розробку веб-застосунку для моніторингу кліматичних умов у складському приміщенні. Основною метою створення системи є забезпечення можливості відстеження температури та вологості в режимі реального часу з метою оптимізації умов зберігання товарів. Реалізація функціоналу здійснюється за допомогою мови програмування Python, а показники кліматичних датчиків імітуються спеціальним скриптом, що генерує числові значення у заданому діапазоні.
У процесі реалізації було здійснено аналіз потреб цільових користувачів — співробітників складів і керівників логістичних процесів. Визначено ключові вимоги до системи, змодельовано її основні компоненти та реалізовано повнофункціональний веб-інтерфейс на базі фреймворку Flask і бібліотеки React. Основні етапи проєкту включають:
‒ формування вимог: було сформульовано функціональні та нефункціональні вимоги до системи, що охоплюють точність зчитування показників, зручність доступу до інтерфейсу, збереження історичних даних та можливість сповіщення при перевищенні критичних порогів;
‒ моделювання функціоналу: створено логічну і фізичну модель взаємодії модулів, зокрема блок генерації даних, серверну частину, базу даних PostgreSQL та клієнтський інтерфейс. Розглянуто варіанти візуалізації кліматичних показників у вигляді графіків і таблиць, реалізовано механізм надсилання оповіщень через Telegram API;
‒ реалізація системи: веб-застосунок було реалізовано з використанням мови Python, фреймворку Flask для серверної логіки, SQLAlchemy для роботи з базою даних та React для фронтенду. В описі наведено архітектуру рішення, вибір технологій та обґрунтування їх використання.
Проведене тестування показало, що система стабільно працює при імітації змін температури та вологості, оперативно реагує на критичні зміни показників та дозволяє користувачеві ефективно контролювати умови зберігання товарів. Веб-застосунок відповідає заданим вимогам і має потенціал до подальшого масштабування та інтеграції з реальними датчиками. ANNOTATIONS Performer: Kotsarev Maksym Oleksandrovich. The title of the work: "Web application for monitoring climate conditions in a warehouse". Specialty: 121 Software Engineering. Educational institution: Cherkasy State Technological University, Cherkasy, 2025. The bachelor’s thesis focuses on the development of a web-based application designed to monitor and visualize climate conditions (temperature and humidity) within a warehouse environment. The primary goal of the system is to provide users with real-time data and historical insights to ensure optimal storage conditions for goods. Unlike traditional systems that rely on physical sensors, this application uses a custom Python script to simulate sensor data, which enables full functionality demonstration and testing. During the development process, the needs of potential users—warehouse staff and logistics managers—were thoroughly analyzed. Based on these findings, system requirements were defined, core functionalities were modeled, and a web application was implemented using Python (Flask), JavaScript (React), and PostgreSQL as the database engine. Key contributions and outcomes of the project include: Requirements specification: Functional and non-functional requirements were determined by studying warehouse management needs. Key aspects include data accuracy, accessibility, alerting mechanisms, and storage of historical data; Functionality modeling: Logical and physical models were created, covering data flow between the sensor simulation module, the server, and the web interface. Notification mechanisms were implemented to alert users when thresholds are exceeded, using Telegram API; System implementation: The backend was developed with Flask and SQLAlchemy, while the frontend uses React for interactive visualization of climate data. The system architecture is modular and scalable, allowing future integration with real IoT devices. The results of the work demonstrate that the web application effectively simulates climate monitoring processes, providing users with a reliable and easy-to-use interface for warehouse condition control. The system is aligned with user requirements and exhibits stable performance in test environments. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/8864 |
| Appears in Collections: | 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Кваліфікаційна робота бакалавра Коцарев Максим Олександрович.pdf Restricted Access | 11.47 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи
«бакалавра»
освітній рівень
на тему: «WEB-застосунок для реалізації кліматичних умов на
складському приміщенні»
Виконав: студент 4 курсу, групи ПЗ-2104
Спеціальності
121 «Інженерія програмного забезпечення»
(шифр і назва напряму підготовки)
Студент Коцарев М.О.
(прізвище та ініціали)
Ккерівник Півень О.Б.
(прізвище та ініціали)
рецензент Люта М.В.
(прізвище та ініціали)
Черкаси 2025
______________Черкаський державний технологічний університет___________________
повне найменування вищого навчального закладу
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
Освітній рівень бакалавр
Спеціальність 121 «Інженерія програмного забезпечення»
Освітня програма Інженерія програмного забезпечення
ЗАТВЕРДЖУЮ
Зав. кафедри ПЗАС, професор
___________ Голуб С.В.
«___» _______________ 2025 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
___________________________Коцарев Максим Олександрович_________________________________________
(прізвище, ім’я, по батькові)
Тему проекту (роботи) «WEB-застосунок для реалізації кліматичних умов на складському приміщенні»
Керівник проекту (роботи) Півень Олександр Борисович кандидат наук, доцент
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від «25» лютого 2025 №53/03-
03
2. Строк подання студентом проекту (роботи) 16 червня 2025р
3. Вхідні дані до проекту (роботи) Технічне завдання на розробку, методичні рекомендації до виконання
бакалаврської роботи, автоматизовані системи, терміни та визначення.
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Вступ;
Розділ 1. Існуючі методи та засоби розв’язання поставлених завдань;
Розділ 2. Впровадження результатів досліджень у практику проектування програмного
забезпечення інформаційних систем;
Розділ 3. Розробка та тестування програмного забезпечення;
Висновки;
Список використаних джерел;
Додатки.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту;
Слайд 1; Слайд 2; Слайд 3; Слайд 4; Слайд 5; Слайд 6; Слайд 7; Слайд 8; Слайд 9; Слайд 10; Слайд 11;
Слайд 12; Слайд 13; Слайд 14; Слайд 15; Слайд 16; Слайд 17; Слайд 18; Слайд 19; Слайд 20.
6. Консультанти розділів проекту (роботи)
Прізвище, ініціали та посади Підпис, дата
Розділ
консультанта Завдання видав Завдання прийняв
1
2
3
7. Дата видачі завдання 02 грудня 2024 р.
КАЛЕНДАРНИЙ ПЛАН
Строк
№ виконання
Назва етапів випускної роботи Примітки
п/п етапів випускної
роботи
1 Постановка задачі 05.12.2024 виконано
2 Підготовка завдання 13.12.2024 виконано
3 Погодження завдання 16.12.2024 виконано
4 Затвердження завдання 19.02.2025 виконано
Основна стадія
1 Підбір матеріалів 27.02.2025 виконано
2 Аналіз шляхів вирішення поставленої задачі 04.02.2025 виконано
3 Розрахунок основних параметрів роботи 10.03.2025 виконано
4 Вибір кінцевого варіанту проектного рішення 17.03.2025 виконано
5 Оформлення первісної редакції роботи 25.03.2025 виконано
Заключна стадія
1 Узгодження прийнятих проектних рішень з 31.04.2025 виконано
керівником
О2ф ормлення пояснювальної записки роботи в 13.05.2025 виконано
кінцевій редакції
П3о передній захист роботи 15.05.2025 виконано
З4а твердження роботи 31.05.2025 виконано
Р5е цензування роботи 20.05.2025 виконано
З6а хист роботи 16.06.2025
Студент _____________________ Коцарев М.О.
(підпис) (прізвище та ініціали)
Керівник проекту (роботи) _____________________ Півень О.Б.
(підпис) (прізвище та ініціали)
АНОТАЦІЇ
Виконавець: Коцарев Максим Олександрович.
Назва роботи: "WEB-застосунок для реалізації кліматичних умов на
складському приміщенні".
Спеціальність: 121 Інженерія програмного забезпечення.
Навчальний заклад: «Черкаський державний технологічний університет» м.
Черкаси, 2025р.
У бакалаврській роботі розглянуто розробку веб-застосунку для
моніторингу кліматичних умов у складському приміщенні. Основною метою
створення системи є забезпечення можливості відстеження температури та
вологості в режимі реального часу з метою оптимізації умов зберігання товарів.
Реалізація функціоналу здійснюється за допомогою мови програмування Python, а
показники кліматичних датчиків імітуються спеціальним скриптом, що генерує
числові значення у заданому діапазоні.
У процесі реалізації було здійснено аналіз потреб цільових користувачів —
співробітників складів і керівників логістичних процесів. Визначено ключові
вимоги до системи, змодельовано її основні компоненти та реалізовано
повнофункціональний веб-інтерфейс на базі фреймворку Flask і бібліотеки React.
Основні етапи проєкту включають:
‒ формування вимог: було сформульовано функціональні та
нефункціональні вимоги до системи, що охоплюють точність зчитування
показників, зручність доступу до інтерфейсу, збереження історичних даних та
можливість сповіщення при перевищенні критичних порогів;
‒ моделювання функціоналу: створено логічну і фізичну модель взаємодії
модулів, зокрема блок генерації даних, серверну частину, базу даних PostgreSQL
та клієнтський інтерфейс. Розглянуто варіанти візуалізації кліматичних показників
у вигляді графіків і таблиць, реалізовано механізм надсилання оповіщень через
Telegram API;
‒ реалізація системи: веб-застосунок було реалізовано з використанням
мови Python, фреймворку Flask для серверної логіки, SQLAlchemy для роботи з
базою даних та React для фронтенду. В описі наведено архітектуру рішення, вибір
технологій та обґрунтування їх використання.
Проведене тестування показало, що система стабільно працює при імітації
змін температури та вологості, оперативно реагує на критичні зміни показників та
дозволяє користувачеві ефективно контролювати умови зберігання товарів. Веб-
застосунок відповідає заданим вимогам і має потенціал до подальшого
масштабування та інтеграції з реальними датчиками.
Ключові слова. WEB-ЗАСТОСУНОК, PYTHON, FLASK, REACT,
ПОСТГРЕС, КЛІМАТ-КОНТРОЛЬ, ТЕМПЕРАТУРА, ВОЛОГІСТЬ,
MONITORING, TELEGRAM API, АРХІТЕКТУРА СИСТЕМИ,
МАСШТАБОВАНІСТЬ
ANNOTATIONS
Performer: Kotsarev Maksym Oleksandrovich.
The title of the work: "Web application for monitoring climate conditions in a
warehouse".
Specialty: 121 Software Engineering.
Educational institution: Cherkasy State Technological University, Cherkasy, 2025.
The bachelor’s thesis focuses on the development of a web-based application
designed to monitor and visualize climate conditions (temperature and humidity) within
a warehouse environment. The primary goal of the system is to provide users with real-
time data and historical insights to ensure optimal storage conditions for goods. Unlike
traditional systems that rely on physical sensors, this application uses a custom Python
script to simulate sensor data, which enables full functionality demonstration and
testing.
During the development process, the needs of potential users—warehouse staff
and logistics managers—were thoroughly analyzed. Based on these findings, system
requirements were defined, core functionalities were modeled, and a web application
was implemented using Python (Flask), JavaScript (React), and PostgreSQL as the
database engine. Key contributions and outcomes of the project include:
Requirements specification: Functional and non-functional requirements were
determined by studying warehouse management needs. Key aspects include data
accuracy, accessibility, alerting mechanisms, and storage of historical data;
Functionality modeling: Logical and physical models were created, covering data
flow between the sensor simulation module, the server, and the web interface.
Notification mechanisms were implemented to alert users when thresholds are
exceeded, using Telegram API;
System implementation: The backend was developed with Flask and
SQLAlchemy, while the frontend uses React for interactive visualization of climate
data. The system architecture is modular and scalable, allowing future integration with
real IoT devices.
The results of the work demonstrate that the web application effectively simulates
climate monitoring processes, providing users with a reliable and easy-to-use interface
for warehouse condition control. The system is aligned with user requirements and
exhibits stable performance in test environments.
Keywords. WEB APPLICATION, PYTHON, FLASK, REACT, POSTGRESS,
CLIMATE CONTROL, TEMPERATURE, HUMIDITY, MONITORING,
TELEGRAM API, SYSTEM ARCHITECTURE, SCALABILITY
ЗМІСТ
ВСТУП ............................................................................................................................ 10
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ ПОСТАВЛЕНИХ
ЗАВДАНЬ ....................................................................................................................... 19
1.1 Огляд платформ для розробки веб-застосунку ............................................ 19
1.2 Методи аналізу веб-застосунку .......................................................................... 22
1.3 Порівняльний аналіз існуючих аналогів ........................................................... 23
1.4 Постановка задачі ................................................................................................ 26
ВИСНОВОК ДО ПЕРШОГО РОЗДІЛУ ...................................................................... 28
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У ПРАКТИКУ
ПРОЕКТУВАННЯ ......................................................................................................... 29
2.1 Моделювання предметної області ..................................................................... 29
2.1.2 Елементи моделювання предметної області.............................................. 33
2.1.3 Робоча область моделювання ...................................................................... 35
2.2 Формування та аналіз вимог .............................................................................. 37
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника і розробника. Функціональні та нефункціональні
вимоги ..................................................................................................................... 37
2.2.2 Формування вимог за допомогою діаграми прецедентів ......................... 39
2.3 Проектування логічної структури програмного комплексу ............................ 41
2.3.1 Діаграми класів ............................................................................................. 41
2.3.2 Діаграма пакетів ........................................................................................... 46
2.4 Архітектура проектування .................................................................................. 49
ЧДТУ 252166-017 ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. Коцарев М. О. « WEB-застосунок для Літ. Лист Листів
Перевір. Півень О. Б. реалізації кліматичних 3
Рецензент Захарова М.В. умов на складському
приміщенні»
Н. Контр. Півень О. Б. ФІТІС, кафедра ПЗАС, ПЗ-2104
Пояснювальна записка.
Затверд. Голуб С. В.
2.4.1 Діаграма компонентів .................................................................................. 49
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання ............................................................................................................ 52
2.5 Моделювання поведінки системи ...................................................................... 54
2.5.1 Діаграма діяльності ...................................................................................... 54
2.5.2 Діаграма послідовності ............................................................................... 56
2.5.3 Діаграма комунікації .................................................................................... 58
2.5.4 Діаграма скінченного автомату ................................................................... 59
ВИСНОВОК ДО ДРУГОГО РОЗДІЛУ........................................................................ 62
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ ... 64
3.1 Розробка програмного комплексу ...................................................................... 64
3.1.1 Обґрунтування вибору засобів реалізації .................................................. 64
3.1.2 Опис структурної (функціональної) схеми ................................................ 65
3.1.3 Опис логічної схеми ..................................................................................... 67
3.1.4 Розробка бази даних ..................................................................................... 69
3.1.5 Розробка інтерфейсу користувача ............................................................... 74
3.1.6 Опис розробки програмних компонентів .................................................. 80
3.2 Тестування системи ............................................................................................. 82
3.2.1 Модульне тестування ................................................................................... 82
3.2.2 Інтеграційне тестування .............................................................................. 84
3.2.3 Системне тестування ................................................................................... 86
3.2.4 Приймальне тестування ............................................................................... 88
3.3 Приклади впровадженого програмного комплексу ......................................... 90
ВИСНОВОК ДО ТРЕТЬОГО РОЗДІЛУ ...................................................................... 96
ВИСНОВКИ ................................................................................................................... 98
ЧДТУ 252155-008 ПЗ
Змн. Арк. № докум. Підпис Дата
ЧДТУ 252155.008 ПЗ
ВСТУП
Актуальність теми. У зв’язку з необхідністю цифровізації процесів
зберігання продукції в логістичних системах, перед інженером програмного
забезпечення ставиться завдання розробити веб-застосунок для моніторингу
кліматичних умов у складському приміщенні. Розв’язання цієї задачі дозволить
забезпечити контроль за ключовими параметрами мікроклімату — температурою і
вологістю — у реальному часі та реагувати на критичні відхилення.
По-перше, інженеру необхідно реалізувати програмне рішення, яке
відповідає зростаючим потребам у цифровому моніторингу складських умов. У
логістичних процесах стабільність клімату має прямий вплив на якість продукції,
зменшення втрат і відповідність санітарним нормам. Розробка має вирішувати цю
практичну задачу засобами програмної інженерії.
По-друге, зважаючи на високу вартість впровадження фізичних сенсорів і
систем моніторингу, інженеру необхідно реалізувати симуляцію кліматичних
показників (температури і вологості) за допомогою Python-скриптів. Це дозволяє
протестувати функціональність і логіку роботи системи на етапі розробки, не
використовуючи реальні апаратні пристрої, що знижує витрати та підвищує
гнучкість архітектурного тестування.
По-третє, веб-застосунок має бути реалізований з використанням сучасних
технологій — мови Python для логіки генерації даних, Flask як веб-фреймворку
для серверної частини, React — для фронтенду. Інженер повинен забезпечити
масштабованість архітектури, готовність до інтеграції з реальними IoT-
пристроями, а також можливість розширення функціональності в майбутньому.
По-четверте, інженер має реалізувати механізм автоматичних сповіщень
про критичні значення температури та вологості з використанням Telegram API.
Також необхідно зберігати всі дані у базі (PostgreSQL) та забезпечити доступ до
історичних показників через інтерфейс для аналітичної обробки.
Отже, розробка веб-застосунку для моніторингу кліматичних умов є
своєчасною та практично значущою задачею, яка має як освітню, так і прикладну
11
ЧДТУ 252155.008 ПЗ
цінність, сприяє підвищенню ефективності управління складськими
приміщеннями та демонструє можливості інтеграції програмного забезпечення у
реальні бізнес-процеси.
Мета розробки. Метою розробки є конструювання і проетування
програмного забезпечення для веб-застосунку для моніторингу кліматичних умов
у складському приміщенні, що дозволяє оперативно отримувати інформацію про
поточні показники температури та вологості, а також виявляти відхилення від
заданих норм. Такий інструмент забезпечує підвищення ефективності контролю
умов зберігання, сприяє збереженню товарів і мінімізує ризики псування
продукції внаслідок несприятливого мікроклімату.
Розроблений застосунок передбачає генерацію умовних кліматичних даних
за допомогою скриптів на Python, що імітують роботу реальних сенсорів. Це
дозволяє протестувати логіку системи без потреби у фізичних пристроях. Завдяки
інтеграції з веб-інтерфейсом користувачі мають змогу переглядати дані у
зручному форматі, отримувати сповіщення про критичні значення параметрів, а
також аналізувати історичні записи за допомогою бази даних.
Реалізація такого рішення покликана автоматизувати процес спостереження
за мікрокліматом на складах, зменшити людський фактор у контролі умов
зберігання та підвищити загальну надійність системи логістики на підприємстві.
Завдання розробки
У межах розробки веб-застосунку для моніторингу температурно-
вологісного режиму на складі було визначено такі основні завдання:
1 Аналіз вимог до системи моніторингу:
зібрати та систематизувати вимоги користувачів щодо
функціональності системи;
виявити ключові параметри, які необхідно контролювати в
складському середовищі (температура, вологість);
сформувати технічне завдання на основі отриманих даних.
2 Огляд і аналіз існуючих рішень:
вивчити доступні системи моніторингу мікроклімату;
12
ЧДТУ 252155.008 ПЗ
визначити їхні переваги, недоліки та обмеження у контексті
автоматизації контролю кліматичних умов;
виявити напрями, в яких новий застосунок може перевершити
аналоги.
3 Проєктування архітектури застосунку:
побудувати логічну структуру програмного забезпечення;
визначити компоненти, їхні ролі та взаємодію між ними (модуль
генерації даних, обробки, збереження та відображення);
спроєктувати схему бази даних для збереження значень температури
та вологості, а також журналу критичних подій.
4 Реалізація веб-застосунку:
написати скрипти на Python для генерації даних, що імітують
показники з датчиків;
реалізувати серверну логіку за допомогою Flask або аналогічного
фреймворку;
створити зручний веб-інтерфейс для перегляду та аналізу
кліматичних показників.
5 Розробка механізмів контролю та сповіщення:
реалізувати обробку граничних значень кліматичних параметрів;
налаштувати систему оповіщення (наприклад, через Telegram API) у
разі виявлення відхилень;
передбачити можливість конфігурації критичних меж користувачем.
6 Тестування і перевірка працездатності системи:
провести модульне й інтеграційне тестування окремих компонентів;
оцінити стабільність і точність роботи системи при різних умовах;
зафіксувати можливі проблеми й усунути виявлені недоліки.
7 Оцінка доцільності впровадження та подальшого розвитку:
проаналізувати економічні переваги впровадження автоматизованого
контролю мікроклімату;
13
ЧДТУ 252155.008 ПЗ
визначити потенціал масштабування системи на більшу кількість
об’єктів або з використанням реальних датчиків.
Ці завдання дозволяють забезпечити цілісний і поетапний підхід до
створення надійного програмного рішення, яке підвищує рівень автоматизації й
контролю умов зберігання на складах.
Об'єкт розробки. Об'єктом розробки є процес розробки веб-застосунок для
моніторингу кліматичних умов у складському приміщенні. Цей застосунок
призначений для забезпечення автоматизованого збору, збереження, аналізу та
візуалізації даних про температуру та вологість. Система повинна надавати
користувачам зручний доступ до актуальної інформації про стан мікроклімату.
Розроблений застосунок спрямований на покращення умов зберігання
чутливих до температури та вологості товарів, зниження ризиків псування
продукції та підвищення ефективності управління складськими приміщеннями.
Предмет розробки. Предмет розробки є процес розробки веб-застосунок
для моніторингу кліматичних умов у складському приміщенні.
Методи проектування та конструювання
Методи проектування. Проєктування веб-застосунку для моніторингу
кліматичних умов у складському приміщенні передбачає застосування сучасних
методів, що забезпечують ефективність, масштабованість, надійність і зручність у
використанні. У межах цієї бакалаврської роботи були використані такі основні
методи проєктування:
об'єктно-орієнтоване проєктування (ООП);
основним підходом до створення архітектури системи стало об'єктно-
орієнтоване проєктування. Завдяки ООП програмна логіка організована
у вигляді об'єктів, які відображають ключові сутності системи, такі як
сенсори, записи даних, сповіщення тощо.
Основні принципи, застосовані при розробці:
інкапсуляція — дозволяє приховати внутрішню реалізацію об’єктів і
надавати доступ лише через чітко визначені методи;
14
ЧДТУ 252155.008 ПЗ
наслідування — сприяє повторному використанню коду й створенню
спеціалізованих класів на основі базових;
поліморфізм — забезпечує можливість гнучкого управління об’єктами
через загальні інтерфейси;
абстракція — дозволяє виокремити суттєві характеристики системи для
спрощення моделювання;
моделювання за допомогою UML.
Для опису структури та динаміки системи використовувалася нотація UML
(Unified Modeling Language). Було створено такі діаграми:
діаграма прецедентів — для моделювання взаємодії користувачів
(адміністратора, менеджера складу) із системою;
класова діаграма — для опису об'єктів системи, таких як Sensor, Alert,
Record, User, та їх взаємозв’язків;
діаграма послідовностей — ілюструє сценарії, як-от надсилання
критичного сповіщення через Telegram API;
діаграма станів — використовується для відображення змін стану
об'єктів (наприклад, записів про температуру) у відповідь на зовнішні
події;
застосування шаблонів проєктування.
Під час реалізації були використані шаблони, що забезпечили повторне
використання рішень і стабільність коду:
Singleton — для управління підключенням до бази даних PostgreSQL;
Factory Method — для створення об'єктів, що відповідають за генерацію
фейкових кліматичних даних;
Observer — для реалізації механізму підписки на критичні зміни:
система моніторингу змін кліматичних умов повідомляє підписаних
користувачів через Telegram.
Ці методи забезпечують структурований та обґрунтований підхід до
розробки веб-застосунку, що сприяє створенню надійної та зручної у використанні
15
ЧДТУ 252155.008 ПЗ
системи для моніторингу кліматичних умов у складських приміщеннях.
Методи конструювання
Розробка веб-застосунку для моніторингу кліматичних умов у складському
приміщенні передбачає використання кількох основних методів конструювання,
які забезпечують ефективність, зручність та масштабованість системи.
1 Розробка користувацького інтерфейсу.
Проєктування інтерфейсу користувача, що забезпечує зручну взаємодію із
застосунком через веб-браузер. Задачі включають:
визначення функціональних можливостей інтерфейсу відповідно до
потреб користувачів;
створення інтуїтивно зрозумілої структури сторінок і елементів
управління (форми, кнопки, графіки тощо).
2 Розробка серверної частини.
Створення серверної логіки, яка обробляє запити від клієнтів (веб-
інтерфейсу), взаємодіє з базою даних і забезпечує бізнес-логіку застосунку. Метод
передбачає:
розробку REST API або іншого інтерфейсу для обміну даними між
сервером і клієнтом;
забезпечення обробки та збереження даних про кліматичні умови;
впровадження механізмів аутентифікації, авторизації (якщо
необхідно).
3 Інтеграція з базою даних.
Організація зберігання, структурування та доступу до даних:
розробка схеми бази даних для зберігання кліматичних показників,
інформації про користувачів, налаштувань тощо;
реалізація запитів для запису, оновлення та отримання інформації;
забезпечення цілісності та безпеки даних.
4 Реалізація функціональності.
16
ЧДТУ 252155.008 ПЗ
Програмування основних функціональних модулів веб-застосунку, серед
яких:
візуалізація даних з датчиків (графіки, таблиці);
сповіщення про критичні значення температури і вологості;
налаштування параметрів моніторингу;
можливість отримувати історичні дані та аналітику.
5 Тестування та відлагодження.
Комплексна перевірка застосунку для забезпечення його коректної роботи:
тестування функціональних модулів у різних сценаріях;
виявлення та усунення помилок;
оптимізація продуктивності та покращення користувацького досвіду.
Опис отриманих результатів
У результаті виконання бакалаврської роботи були досягнуті наступні
результати.
Аналіз потреб користувачів.
Було проведено детальний аналіз потреб цільової аудиторії, що включає
користувачів складського приміщення (адміністраторів, операторів,
відповідальних осіб). Визначено основні функціональні та нефункціональні
вимоги до веб-застосунку. Зібрані дані дозволили створити систему, яка
максимально відповідає очікуванням користувачів.
Формування вимог.
На основі аналізу потреб було сформовано чіткі вимоги до веб-застосунку.
Визначено перелік основних функцій, таких як:
моніторинг та візуалізація температури і вологості у реальному часі;
збереження та відображення історичних даних;
сповіщення користувачів про перевищення критичних значень
параметрів;
налаштування параметрів моніторингу та користувацьких профілів.
моделювання системи.
17
ЧДТУ 252155.008 ПЗ
Було створено концептуальну, логічну та фізичну моделі системи, що
включають:
Концептуальна модель – визначення загальної структури веб-застосунку та
основних функціональних компонентів;
Логічна модель – детальний опис функцій і взаємодії між компонентами
(сервер, база даних, клієнт);
Фізична модель – реалізація структури даних і технічних рішень для
забезпечення стабільної роботи застосунку.
Реалізація системи.
Веб-застосунок реалізовано з використанням технологій Python (Flask) для
серверної частини та React.js для фронтенду. Це забезпечило гнучкість,
інтерактивність інтерфейсу та можливість масштабування системи. Реалізовані
основні функції, визначені на етапі формування вимог.
Оцінка та тестування.
Проведене тестування показало високу продуктивність, надійність і
зручність використання веб-застосунку у практичних умовах. Система успішно
задовольняє потреби користувачів, покращуючи моніторинг кліматичних умов та
оперативне реагування на зміни.
Висновки та рекомендації.
Результати роботи свідчать, що створений веб-застосунок ефективно
виконує поставлені завдання, відповідає вимогам користувачів та демонструє
стабільну роботу. Запропоновано рекомендації щодо подальшого розвитку
системи, зокрема розширення функціоналу, інтеграції з іншими інформаційними
системами та покращення інтерфейсу.
Ці результати підтверджують практичну цінність розробленого веб-
застосунку для моніторингу кліматичних умов у складських приміщеннях.
Практичне значення отриманих результатів
Результати дослідження та розробки веб-застосунку для моніторингу
кліматичних умов у складському приміщенні Черкаського державного
18
ЧДТУ 252155.008 ПЗ
технологічного університету (ЧДТУ) мають значне практичне значення, яке
проявляється у таких аспектах:
Покращення контролю умов зберігання.
Веб-застосунок забезпечує оперативний моніторинг температури та
вологості у реальному часі, що дозволяє своєчасно реагувати на зміни та
запобігати псуванню матеріалів або продукції. Це підвищує ефективність
управління складом і зменшує ризики втрат.
Готовність до використання.
Розроблений веб-застосунок пройшов тестування, яке підтвердило його
стабільну роботу, високу продуктивність і надійність. Система готова до
впровадження у практичну діяльність відповідальних осіб ЧДТУ без необхідності
додаткових суттєвих доопрацювань.
Масштабність застосування.
Веб-застосунок може бути використаний не лише у складі ЧДТУ, а й у
інших організаціях, що потребують моніторингу кліматичних умов. Гнучка
архітектура системи дозволяє адаптувати її під різні типи приміщень та масштаби,
що сприяє широкому використанню.
Рекомендації щодо використання.
Рекомендується забезпечувати регулярне оновлення і підтримку системи,
розширювати функціонал згідно з новими вимогами користувачів, а також
проводити навчання відповідальних працівників для ефективного використання
застосунку. Важливо також створити механізми зворотного зв’язку для збору
відгуків і подальшого вдосконалення системи.
Особистий внесок автора. У процесі виконання бакалаврської роботи автор
здійснив повний цикл розробки веб-застосунку для моніторингу кліматичних
умов у складському приміщенні. Особисто було проведено детальний аналіз
потреб користувачів та сформовано функціональні і нефункціональні вимоги до
системи. Автор самостійно розробив концептуальну, логічну та фізичну моделі
застосунку, а також реалізував серверну частину на мові Python із застосуванням
відповідних фреймворків, а також фронтенд частину на React.js.
19
ЧДТУ 252155.008 ПЗ
Особливу увагу було приділено проєктуванню зручного користувацького
інтерфейсу та інтеграції системи з базою даних для ефективного зберігання і
обробки інформації. Автор самостійно провів комплексне тестування системи,
виявив і усунув помилки, а також оптимізував продуктивність веб-застосунку, що
забезпечило його надійність та стабільність в експлуатації.
20
ЧДТУ 252155.008 ПЗ
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ
ПОСТАВЛЕНИХ ЗАВДАНЬ
У сучасних інформаційних системах веб-застосунки відіграють ключову
роль у забезпеченні доступу до інформації та автоматизації бізнес-процесів у
різних сферах, зокрема в освіті. Веб-застосунки дозволяють користувачам
отримувати необхідні послуги через браузер з будь-якого пристрою, що забезпечує
зручність, гнучкість та масштабованість рішень.
Для реалізації веб-застосунку, який спрямований на полегшення комунікації
між студентами та викладачами кафедри програмного забезпечення
автоматизованих систем Черкаського державного технологічного університету,
використовуються сучасні методи і технології розробки. Зокрема, популярними є
клієнт-серверна архітектура, що забезпечує розділення логіки взаємодії з
користувачем і обробки даних, а також застосування фреймворків для фронтенду
(React, Angular, Vue.js) і бекенду (Node.js, Django, Flask).
Основні функції таких веб-застосунків включають управління розкладом
занять, передачу оголошень, доступ до навчальних матеріалів та інтерактивні
інструменти для комунікації. Використання баз даних для збереження інформації
про користувачів, розклад і повідомлення забезпечує надійність і швидкість
обробки даних.
Розробка сучасних веб-застосунків також передбачає використання методів
об’єктно-орієнтованого програмування (ООП), що дозволяє створювати гнучкі,
модульні та масштабовані системи. Крім того, застосовуються підходи тестування
і безперервної інтеграції, що підвищують якість і надійність програмного
забезпечення.
Таким чином, вивчення існуючих методів і засобів розробки веб-застосунків
дозволяє ефективно реалізувати систему, яка забезпечить студентам і викладачам
ЧДТУ зручний інструмент для управління навчальним процесом та комунікації.
1.1 Огляд платформ для розробки веб-застосунку
21
ЧДТУ 252155.008 ПЗ
Розробка веб-застосунків стала однією з ключових задач у сучасному ІТ-
середовищі. Веб-застосунки дозволяють забезпечити доступ до інформації і
сервісів через інтернет, використовуючи браузери на різних пристроях. Для їх
створення існує велика кількість платформ і фреймворків, які спрощують
розробку, підвищують продуктивність і масштабованість рішень.
Node.js — це серверна платформа на базі JavaScript, яка забезпечує високу
продуктивність завдяки асинхронній обробці подій. Node.js став дуже популярним
для розробки бекенд-сервісів веб-застосунків завдяки своїй швидкості,
масштабованості та великій екосистемі модулів через npm (Node Package Manager)
[7].
Переваги Node.js:
висока продуктивність та масштабованість завдяки неблокуючій моделі
обробки подій;
широка екосистема пакетів і бібліотек;
Недоліки:
потребує знань JavaScript та асинхронного програмування;
може бути складним для налагодження великих проєктів.
Для розробки фронтенду веб-застосунку популярними є такі фреймворки:
React — бібліотека JavaScript для побудови користувацьких інтерфейсів,
розроблена Facebook. React дозволяє створювати компоненти, які динамічно
оновлюються, забезпечуючи високу продуктивність та інтерактивність застосунку
[8].
Переваги React:
компонентний підхід, що спрощує підтримку та масштабування коду;
величезна спільнота та багато готових рішень;
підтримка JSX — розширення синтаксису JavaScript для опису UI.
Недоліки:
потребує знань сучасного JavaScript;
потрібно додатково налаштовувати маршрутизацію і менеджмент стану.
22
ЧДТУ 252155.008 ПЗ
Vue.js — прогресивний фреймворк для побудови інтерфейсів, який легко
інтегрується в існуючі проєкти і швидко навчається [9].
Переваги Vue.js:
легка вага і простота в освоєнні;
гнучкість і можливість поетапної інтеграції;
добра документація і підтримка.
Недоліки:
менша спільнота у порівнянні з React;
менше корпоративної підтримки.
Для збереження і обробки даних у веб-застосунку використовується система
керування базами даних (СКБД). Найпопулярніші рішення:
PostgreSQL — потужна реляційна СКБД з відкритим кодом, яка підтримує
складні запити, транзакції та розширені типи даних [10].
Переваги PostgreSQL:
висока надійність та відповідність стандартам SQL;
підтримка складних операцій і масштабованості;
активна спільнота і розвинена екосистема.
Недоліки:
може бути складним у налаштуванні для новачків.
Для серверної частини веб-застосунку часто використовують фреймворки:
Express.js — мінімалістичний і гнучкий фреймворк для Node.js, що дозволяє
швидко створювати REST API та серверні додатки [11].
Переваги Express.js:
простий у використанні, з великою кількістю плагінів;
гнучкість у побудові архітектури;
велика спільнота.
Недоліки:
мінімум вбудованих функцій, все треба додавати самостійно.
Враховуючи переваги та недоліки розглянутих технологій, для реалізації
23
ЧДТУ 252155.008 ПЗ
веб-застосунку було обрано стек: Node.js з Express.js для серверної частини, React
для фронтенду та PostgreSQL як систему керування базами даних. Такий підхід
забезпечує високу продуктивність, масштабованість і зручність у розробці, що
відповідає вимогам проєкту.
1.2 Методи аналізу веб-застосунку
Розробка веб-застосунку потребує комплексного аналізу для вибору
оптимальних рішень, які забезпечать високу продуктивність, надійність та
зручність використання системи. У цьому підрозділі розглядаються основні
методи аналізу, що застосовуються для оцінки та вдосконалення веб-застосунку.
SWOT-аналіз дозволяє виявити сильні та слабкі сторони проєкту, а також
можливості і загрози, які можуть виникати у зовнішньому середовищі. Цей метод
допомагає зосередитися на ключових перевагах застосунку та заздалегідь виявити
потенційні ризики під час розробки та впровадження системи [12].
Аналіз вимог користувачів полягає у вивченні потреб та очікувань кінцевих
користувачів веб-застосунку. Це дозволяє чітко сформувати функціональні та
нефункціональні вимоги, що є основою для подальшої розробки, а також
підвищує користувацьку задоволеність готовим продуктом.
Аналіз даних включає збір та обробку інформації про продуктивність
застосунку, поведінку користувачів, а також технічні параметри системи. Завдяки
цьому методу можна виявити вузькі місця, відхилення та інші критичні моменти,
що потребують оптимізації.
Моделювання процесів застосовується для прогнозування роботи веб-
застосунку у різних умовах експлуатації. Використання моделей дозволяє оцінити
навантаження, оптимізувати ресурси та передбачити поведінку системи при
збільшенні кількості користувачів.
Аналіз ризиків спрямований на ідентифікацію потенційних загроз безпеці,
стабільності та продуктивності веб-застосунку. На основі цього аналізу
розробляються заходи щодо зменшення або усунення ризиків, що підвищує
надійність і безпеку системи [13].
24
ЧДТУ 252155.008 ПЗ
Застосування цих методів аналізу забезпечує комплексне розуміння проєкту
з різних точок зору, що сприяє прийняттю обґрунтованих рішень та підвищенню
якості розробленого веб-застосунку.
1.3 Порівняльний аналіз існуючих аналогів
Одним із найвідоміших застосунків для моніторингу кліматичних умов є
AccuWeather — глобальна синоптична платформа, яка надає детальну інформацію
про погодні умови, температуру, вологість, опади, вітер, тиск тощо. Сервіс
доступний як у веб-версії, так і у вигляді мобільного застосунку. Дані
отримуються з метеостанцій по всьому світу та постійно оновлюються в режимі
реального часу.
Рисунок 1.1 – Сайт «AccuWeather»
25
ЧДТУ 252155.008 ПЗ
Рисунок 1.2 - Щоденний прогноз
Серед ключових функцій застосунку варто виокремити такі:
Поточні показники погоди: Користувачі мають доступ до найактуальніших
даних про температуру повітря, вологість, швидкість та напрямок вітру,
атмосферний тиск, рівень опадів та індекс УФ-випромінювання. Ця інформація
оновлюється в режимі реального часу з мінімальними затримками.
Детальний погодний прогноз: Прогноз погоди на годину, день, тиждень або
навіть місяць — це одна з основних переваг AccuWeather. Такий прогноз
26
ЧДТУ 252155.008 ПЗ
допомагає планувати діяльність як на відкритому повітрі, так і в приміщеннях,
адже він включає аналіз температурних коливань, вологості та інших факторів, які
можуть впливати на комфорт та безпеку.
Інтерактивні графіки: Для кращого розуміння змін кліматичних параметрів
користувачам надаються наочні графіки та діаграми, що відображають динаміку
температури, вологості та інших показників за вибраний період часу. Це сприяє
більш глибокому аналізу і прогнозуванню погодних умов.
Система сповіщень: AccuWeather пропонує гнучку систему push-сповіщень,
що інформує користувача про надзвичайні погодні явища — різке підвищення
температури, грози, шквали або інші потенційно небезпечні ситуації. Така система
дозволяє вчасно реагувати і приймати необхідні заходи безпеки.
Мультиплатформність: Сервіс доступний через веб-браузер, мобільні
додатки для iOS і Android, а також інтегрується з розумними домашніми
системами. Це дозволяє користувачам отримувати інформацію у будь-який
зручний для них спосіб, що значно підвищує зручність використання.
Локалізація та персоналізація: AccuWeather підтримує багато мов,
включаючи українську, та дозволяє налаштовувати інтерфейс під власні потреби,
обираючи регіон, тип відображення інформації, а також рівень деталізації.
Переваги застосунку AccuWeather
Надзвичайно висока точність та оперативність отримання даних, що
забезпечує користувачам актуальну та достовірну інформацію.
Зручний та інтуїтивний інтерфейс, який не потребує спеціальних навичок
для розуміння та використання.
Розвинена система візуалізації даних, яка дозволяє швидко орієнтуватися в
інформації, оцінювати тенденції та робити висновки.
Можливість отримання сповіщень у реальному часі про критичні зміни
погоди, що підвищує рівень безпеки та дозволяє вчасно реагувати на потенційні
загрози.
Широкий вибір платформ і пристроїв для доступу, що забезпечує
універсальність застосунку.
27
ЧДТУ 252155.008 ПЗ
Недоліки застосунку AccuWeather
Незважаючи на численні переваги, AccuWeather має й певні обмеження, які
слід враховувати в контексті використання для моніторингу мікроклімату в
складських приміщеннях:
AccuWeather орієнтований переважно на зовнішні погодні умови, і тому не
забезпечує можливості збору та аналізу даних, отриманих із локальних сенсорів,
встановлених безпосередньо у складському приміщенні.
Відсутність можливості індивідуального налаштування критичних меж
температури і вологості відповідно до специфіки конкретного приміщення.
Обмежена інтеграція з іншими системами контролю або оповіщення,
зокрема відсутність підтримки автоматичних повідомлень через месенджери чи
внутрішні корпоративні системи.
Відсутність збереження історичних даних у розрізі конкретного об’єкта для
проведення детального аналізу та побудови звітів.
Через орієнтацію на широке коло користувачів, AccuWeather має обмежену
можливість кастомізації під специфічні потреби бізнесу.
1.4 Постановка задачі
У сучасних умовах ефективне управління складськими приміщеннями
вимагає постійного контролю кліматичних параметрів, зокрема температури та
вологості. Від цих показників залежить збереження якості продукції, термін її
придатності, а також безпека зберігання. Недотримання оптимальних кліматичних
умов може призвести до псування товарів, значних фінансових втрат та навіть
створення небезпеки для здоров’я персоналу.
З огляду на це, основною метою даної роботи є розробка вебзастосунку для
моніторингу температури і вологості на складі, який дозволить у режимі
реального часу отримувати актуальні дані, зберігати історію вимірювань,
автоматично визначати критичні значення та своєчасно повідомляти
відповідальних осіб про виникнення небезпечних умов.
Для досягнення поставленої мети необхідно розв’язати такі задачі:
28
ЧДТУ 252155.008 ПЗ
1 Розробити систему генерації або прийому даних про температуру та
вологість, що імітуватиме або отримуватиме реальні вимірювання із
сенсорів.
2 Створити серверну частину застосунку (бекенд), яка відповідатиме за
прийом, обробку, збереження і передачу клієнтській частині актуальної
інформації.
3 Реалізувати фронтенд-застосунок з інтуїтивно зрозумілим інтерфейсом,
що відображатиме поточні показники температури і вологості, історичні
дані у вигляді таблиць та графіків.
4 Впровадити механізм визначення критичних значень температури і
вологості із налаштовуваними межами, які можна змінювати відповідно
до специфіки складу.
5 Забезпечити систему сповіщень (візуальних і звукових), яка буде
попереджати про перевищення критичних значень, для оперативного
реагування.
6 Реалізувати підтримку мульти-мовності інтерфейсу, зокрема українську
та англійську, для зручності користування різними категоріями
користувачів.
7 Забезпечити адаптивний дизайн застосунку для коректного
відображення на різних пристроях — від комп’ютерів до мобільних
телефонів.
В результаті розробки має бути створений ефективний інструмент контролю
мікроклімату, який сприятиме підвищенню безпеки та якості зберігання продукції
на складі, а також оптимізує роботу відповідального персоналу.
29
ЧДТУ 252155.008 ПЗ
ВИСНОВОК ДО ПЕРШОГО РОЗДІЛУ
У першому розділі було проведено аналіз предметної області, що стосується
моніторингу кліматичних умов у складських приміщеннях. Розглянуто
особливості контролю температури та вологості для забезпечення належних умов
зберігання продукції, а також наслідки їх порушення. Проаналізовано наявні
технологічні рішення у цій сфері, включно з веб-застосунками та мобільними
системами моніторингу.
Проведено порівняльний аналіз існуючих аналогів систем моніторингу,
визначено їх сильні та слабкі сторони, що дозволило окреслити вимоги до власної
системи. Встановлено, що ефективна система має бути доступною з будь-якого
пристрою, забезпечувати зберігання історичних даних, мати механізми
сповіщення про критичні показники та бути простою у використанні.
На основі зібраної інформації було сформульовано постановку задачі, яка
охоплює етапи проєктування, реалізації та тестування веб-застосунку, що імітує
роботу з кліматичними даними, генерованими штучно, та відображає їх у
зручному для користувача інтерфейсі. Запропоновано стек технологій, зокрема
використання Python (Flask), PostgreSQL, React та Telegram API для реалізації
системи сповіщень.
Таким чином, результати цього розділу створюють міцну теоретичну основу
для реалізації практичної частини проєкту.
30
ЧДТУ 252155.008 ПЗ
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У ПРАКТИКУ
ПРОЕКТУВАННЯ
2.1 Моделювання предметної області
Моделювання предметної області є одним із ключових етапів розробки
інформаційної системи, що дозволяє чітко визначити основні об’єкти, їх
властивості та взаємозв’язки. У контексті розробки вебзастосунку для
моніторингу температури та вологості на складі предметна область охоплює всі
процеси, пов’язані зі збором, збереженням, аналізом і візуалізацією кліматичних
даних, а також управлінням оповіщеннями про перевищення критичних значень.
Основні об'єкти предметної області:
1 Сенсор (Датчик).
Об’єкт, який безпосередньо збирає інформацію про температуру і вологість
у певній точці складу. Кожен сенсор має унікальний ідентифікатор, тип
вимірювання (температура/вологість), а також параметри калібрування.
2 Вимірювання (Показник).
Показник — це значення температури або вологості, отримане від сенсора у
визначений момент часу. Кожне вимірювання містить дату та час зняття, значення
параметра, а також ідентифікатор сенсора.
3 Користувач.
Особа, яка взаємодіє із системою. Користувачі можуть мати різні ролі,
наприклад, оператор складу, технічний спеціаліст або адміністратор. Вони можуть
переглядати дані, налаштовувати критичні межі та отримувати сповіщення.
4 Критичні межі (Пороги).
Значення температури і вологості, які вважаються допустимими для
зберігання продукції на складі. Якщо показники виходять за межі цих порогів,
система генерує попередження.
5 Сповіщення (Оповіщення).
Повідомлення, що надсилаються користувачам у разі перевищення
критичних меж. Сповіщення можуть бути візуальними (попапи,
31
ЧДТУ 252155.008 ПЗ
підсвічування), звуковими або у вигляді листів/повідомлень.
6 Історія вимірювань.
Збережені дані про всі показники температури і вологості з часом, що
дозволяє аналізувати тенденції і приймати управлінські рішення.
Для наочного відображення предметної області доцільно створити діаграму
класів UML, яка демонструє основні об’єкти та їхні зв’язки. Це сприятиме
кращому розумінню структури системи і полегшить подальшу розробку
програмного забезпечення.
2.1.1 Предметна область моделювання. Модель предметної області. Словник
предметної області
Предметна область — це сукупність об'єктів, явищ і процесів реального
світу, які досліджуються і автоматизуються в рамках розроблюваної
інформаційної системи. Моделювання предметної області полягає у формалізації
цих об'єктів, їх властивостей та взаємозв’язків між ними з метою створення чіткої
і зрозумілої структури, що ляже в основу подальшої розробки програмного
забезпечення.
Для системи моніторингу кліматичних умов на складі предметна область
включає всі ключові елементи, пов'язані із збором, обробкою, збереженням та
аналізом даних про температуру і вологість у режимі реального часу. Особливу
увагу приділено аспектам, які впливають на збереження товарів, адже
неправильний кліматичний контроль може призвести до псування продукції.
Моделювання предметної області дозволяє на етапі проектування системи
чітко визначити структуру даних і логіку взаємодії, що забезпечить коректну і
ефективну реалізацію функціоналу. Такий підхід мінімізує ризики помилок на
подальших етапах розробки і полегшує масштабування системи в майбутньому.
Візуалізація предметної області у вигляді UML-діаграм або ER-моделей
допомагає усім учасникам проекту — розробникам, аналітикам і замовникам —
отримати спільне розуміння структури і функціональних вимог системи.
Предметна область системи моніторингу кліматичних параметрів у
складському приміщенні охоплює всі аспекти збору, обробки та аналізу даних про
32
ЧДТУ 252155.008 ПЗ
температуру і вологість повітря. В основі цієї системи лежать датчики, які
виконують роль безпосередніх вимірювачів навколишнього середовища. Кожен
датчик має унікальний ідентифікатор і призначений для фіксації конкретного типу
параметра — температури або вологості. Вони розташовуються у різних зонах
складу, що дозволяє охопити всю площу приміщення та отримувати детальну
картину кліматичних умов.
Дані, які надходять від датчиків, є основою для подальшого аналізу. Кожне
вимірювання супроводжується часовою позначкою, що дозволяє відстежувати
зміни клімату в динаміці. Значення зберігаються у базі даних і регулярно
оновлюються. Для підтримки належного рівня збереження продукції необхідно
встановити критичні межі для температури і вологості — саме вони визначають,
які значення є допустимими, а які свідчать про потенційну небезпеку. Ці межі
можуть бути гнучко налаштовані користувачем системи, що забезпечує
індивідуальний підхід до різних типів продукції та особливостей складу.
У випадку, якщо зафіксовані показники виходять за межі встановлених
норм, система автоматично генерує сповіщення. Вони містять інформацію про час
події, конкретний параметр і його значення, а також ідентифікатор датчика, що
допомагає швидко локалізувати проблему. Сповіщення надсилаються
відповідальним особам через різні канали, що гарантує своєчасне реагування і
мінімізацію можливих втрат.
Користувачі системи поділяються на різні категорії залежно від рівня
доступу і функціональних обов’язків. Адміністратори відповідають за
налаштування системи, управління правами доступу та оновлення параметрів
критичних меж. Оператори контролюють поточні показники і реагують на
тривожні сповіщення, а гості можуть лише переглядати загальну інформацію без
можливості внесення змін.
Збереження історичних даних є ще одним важливим елементом системи.
Зібрана інформація у вигляді часових рядів дозволяє проводити аналіз тенденцій,
виявляти регулярні відхилення та прогнозувати можливі проблеми. На основі цих
даних користувачі можуть приймати обґрунтовані рішення щодо оптимізації умов
33
ЧДТУ 252155.008 ПЗ
зберігання, а також планувати заходи з профілактики.
Таким чином, модель предметної області відображає взаємозв’язок між
датчиками, вимірюваннями, критичними межами, сповіщеннями та
користувачами системи. Цей комплексний підхід забезпечує надійний моніторинг
клімату на складі і своєчасне реагування на будь-які відхилення, що є запорукою
збереження якості продукції і ефективної роботи підприємства.
Словник предметної області
Веб-застосунок – програмне забезпечення з веб-інтерфейсом, що дозволяє
користувачам у реальному часі переглядати, аналізувати та керувати даними про
кліматичні умови у складських приміщеннях.
Користувач – особа, що взаємодіє із системою. У межах проєкту
виділяються дві основні категорії користувачів:
адміністратор – відповідальний за конфігурацію системи, встановлення
порогових значень та перегляд логів;
оператор/спостерігач – користувач, який здійснює контроль за поточними
показниками температури та вологості.
Температура – фізична величина, яка характеризує тепловий стан повітря в
зоні зберігання. Є ключовим параметром для підтримки умов зберігання товарів.
Вологість – відносна вологість повітря в приміщенні, що вимірюється у
відсотках і є критичним параметром для запобігання псуванню товарів.
Критичні значення – встановлені межі температури та вологості, при
перевищенні яких система надсилає сповіщення для запобігання аварійним
ситуаціям.
Сенсор (датчик) – фізичний або віртуальний пристрій, який генерує або
імітує значення температури та вологості.
Зона моніторингу – логічно або фізично виділений простір на складі, для
якого ведеться окремий моніторинг кліматичних умов.
Сповіщення – повідомлення, які надсилаються у разі перевищення
температурного або вологісного порогу, що містять опис події, параметр, час і
зону.
34
ЧДТУ 252155.008 ПЗ
База даних (PostgreSQL) – система керування реляційними базами даних,
яка зберігає всі показники кліматичних умов, налаштування, журнали тривог
тощо.
SQLAlchemy – ORM-бібліотека на мові Python, яка забезпечує зручну
роботу з базою даних PostgreSQL, використовуючи об'єктно-орієнтований підхід.
React – JavaScript-бібліотека для створення інтерактивного веб-інтерфейсу,
що забезпечує зручний перегляд графіків та інформаційних панелей.
Flask – мікрофреймворк для Python, який використовується як серверна
частина застосунку, відповідає за прийом і обробку даних, генерацію сповіщень та
взаємодію з БД.
Симулятор даних – програмний скрипт, який імітує роботу реальних
сенсорів, генеруючи випадкові значення температури та вологості для тестування
системи.
Цей словник визначає ключові терміни, що використовуються у процесі
розробки, тестування та експлуатації веб-застосунку для моніторингу кліматичних
умов. Його використання сприяє точності опису функціоналу системи, уніфікації
термінології та кращому розумінню предметної області.
2.1.2 Елементи моделювання предметної області
У межах системи моніторингу кліматичних умов основними елементами
предметної області виступають: датчики, показники вимірювань, критичні
порогові значення, система сповіщень і користувачі. Датчики — це пристрої або
програмні емулятори, які фіксують значення температури й вологості в певних
точках складу. Кожен датчик має унікальний ідентифікатор, прив’язаний до зони
або групи зон.
Збір даних реалізується у вигляді вимірювань, які включають числове
значення, час отримання та прив’язку до конкретного датчика. Ці значення
аналізуються системою в реальному часі на предмет перевищення заздалегідь
визначених критичних меж — максимальних і мінімальних допустимих
параметрів.
35
ЧДТУ 252155.008 ПЗ
У випадку відхилення система ініціює подію — сповіщення, яке містить
інформацію про тип події (перегрів, переохолодження, надмірна вологість тощо),
час і відповідний об’єкт. Такі сповіщення відображаються у веб-інтерфейсі, а
також можуть надсилатися користувачеві через сторонні канали (наприклад,
Telegram-бот).
Користувачі системи мають різні ролі: адміністратор, який налаштовує
параметри та слідкує за станом об’єкта, та оператор, який лише моніторить
поточні показники. Таким чином, кожен елемент — від сенсора до користувача —
виконує визначену функцію в автоматизованому циклі збору, аналізу та
реагування на критичні ситуації.
Рисунок 2.1 – Основні графічні символи UML
Для опису предметної області системи буде побудовано такі діаграми UML:
діаграма випадків використання (Use Case Diagram) — для візуалізації
основних сценаріїв взаємодії користувачів із системою. Вона демонструє
36
ЧДТУ 252155.008 ПЗ
функціональні можливості, доступні різним типам користувачів
(адміністратору, оператору), зокрема перегляд показників, налаштування
критичних меж, отримання сповіщень тощо;
діаграма класів (Class Diagram) — для моделювання основних
структурних елементів системи, таких як датчики, значення вимірів,
користувачі, події, налаштування. Вона відображає зв’язки між класами
та їхні атрибути й методи, що важливо для проектування архітектури
застосунку;
діаграма активності (Activity Diagram) — для опису послідовності дій у
межах окремих процесів, наприклад, обробки нових даних від датчиків
або надсилання сповіщень при перевищенні порогових значень;
діаграма станів (State Diagram) — для моделювання змін стану системи
або об’єктів, наприклад, станів сповіщення (створено, відправлено,
переглянуто);
діаграма компонентів (Component Diagram) — для представлення
загальної логічної структури системи, що дозволяє описати взаємодію
між фронтендом, бекендом, базою даних, API та сторонніми сервісами.
2.1.3 Робоча область моделювання
Робоча область моделювання охоплює усі ключові аспекти функціонування
системи моніторингу кліматичних умов на складі. Вона включає в себе як
фізичне, так і логічне середовище, в якому відбувається обмін даними, обробка
інформації, взаємодія користувача з інтерфейсом, а також збереження та аналіз
показників.
Основними компонентами цієї області є веб-застосунок (інтерфейс
користувача), серверна частина (бекенд), база даних, а також програмна імітація
датчиків температури та вологості. Всі ці компоненти взаємодіють через мережеві
протоколи з використанням API, побудованого на Flask. Система підтримує
автоматичне оновлення даних, візуалізацію інформації у вигляді графіків і
37
ЧДТУ 252155.008 ПЗ
таблиць, а також локалізацію (UA/EN), авторизацію та налаштування критичних
меж.
У центрі робочої області перебуває користувач, який отримує доступ до
інтерфейсу через браузер, де він може переглядати поточні значення,
налаштовувати порогові параметри, перемикати мови, обирати темну або світлу
тему, і отримувати повідомлення про перевищення допустимих значень (рисунок
2.2)
Рисунок 2.2 – Модель предметної області WEB-застосунку реалізації кліматичних
умов на складському приміщенні
Основні компоненти
Користувачі (Users):
Дані (Data):
Генератор даних (Data Generator):
Серверна частина (Flask API):
База даних (PostgreSQL):
Інтерфейс користувача (Frontend – React):
38
ЧДТУ 252155.008 ПЗ
Система сповіщень:
Налаштування:
2.2 Формування та аналіз вимог
Вимоги замовника де замовник потребує зручний веб-застосунок для
моніторингу кліматичних умов на складі в режимі реального часу. Важливо, щоб
система автоматично оновлювала дані про температуру і вологість з частотою не
рідше 5 секунд і відображала їх у вигляді графіків і таблиць.
Інтерфейс має бути простим, інтуїтивно зрозумілим і двомовним (українська
та англійська). Необхідна підтримка адаптивного дизайну для коректного
відображення на різних пристроях.
Критичні значення температури і вологості повинні бути чітко позначені для
швидкого виявлення потенційних проблем. Також замовник наполягає на
наявності кнопки швидкого доступу до технічної підтримки через Telegram.
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника і розробника. Функціональні та нефункціональні
вимоги
Формування вимог до програмного забезпечення в якому система
повинна бути зручною у використанні, мати інтуїтивний інтерфейс, бути
доступною з веббраузера, підтримувати дві мови (українську та англійську), а
також працювати в автоматичному режимі без необхідності ручного оновлення
даних.
Первинні вимоги де програмне забезпечення має забезпечувати
безперервний моніторинг температури та вологості у складському приміщенні з
регулярним оновленням даних. Система повинна вчасно повідомляти користувача
про перевищення критичних значень.
Важливим є зручний інтерфейс, що відображає дані у вигляді графіків і
таблиць, з підсвіткою критичних показників. Оновлення інформації має
відбуватися автоматично без перезавантаження сторінки.
39
ЧДТУ 252155.008 ПЗ
Програмне забезпечення має підтримувати дві мови — українську та
англійську, а також містити кнопку технічної підтримки для швидкого зв’язку з
адміністратором.
Система повинна бути адаптивною та працювати на різних пристроях, а
також легко розгортатися як локально, так і на сервері.
Ці вимоги заклали основу для подальшої розробки та деталізації
функціональності системи.
Детальні вимоги де застосунок повинен автоматично оновлювати дані про
температуру та вологість не рідше ніж раз на 5 секунд і зберігати останні 20
записів.
Інтерфейс включає три сторінки: головна з графіком, про застосунок та
статистика з таблицею. Навігація між сторінками — через меню.
Критичні значення температури понад 25°С і вологості понад 60%
підсвічуються на графіку та в таблиці.
Підтримується двомовність (українська, англійська) із можливістю
перемикання.
Інтерфейс адаптивний для різних пристроїв. Для зв’язку з техпідтримкою є
кнопка з посиланням на Telegram.
Вимоги розробника в якому я орієнтуюсь на створення легкого,
швидкодіючого веб-застосунку з використанням сучасних технологій React для
фронтенду та React Router для маршрутизації. Для візуалізації даних
застосовується бібліотека Recharts, що забезпечує інтерактивні графіки.
Важливо підтримувати автоматичне оновлення даних з імітацією реальних
змін температури і вологості, з обмеженням історії даних для оптимізації
продуктивності.
Також я забезпечує двомовність інтерфейсу, зручну навігацію, адаптивний
дизайн і чітку структуру коду для подальшої підтримки та розширення застосунку.
Критичні значення параметрів підсвічуються для покращення сприйняття
інформації користувачем.
40
ЧДТУ 252155.008 ПЗ
Функціональні вимоги де застосунок має забезпечувати збір і
відображення актуальних даних про температуру та вологість складу в реальному
часі. Дані повинні оновлюватись автоматично з певним інтервалом і зберігатись у
вигляді обмеженого набору записів для відображення на графіках і у таблиці.
Інтерфейс має підтримувати перемикання між двома мовами (українською
та англійською), а також надавати навігацію між основними сторінками: Головна,
Про застосунок, Статистика.
Графіки повинні чітко відображати тенденції змін температури та вологості,
з підсвічуванням критичних значень. Користувач має мати доступ до таблиці з
історією даних, де також відзначаються перевищення встановлених меж.
Повинна бути доступна кнопка для переходу до технічної підтримки. Крім
того, інтерфейс має бути адаптивним і коректно відображатись на різних
пристроях.
Нефункціональні вимоги в яких застосунок повинен бути простим у
використанні та інтуїтивно зрозумілим для користувачів з базовими навичками
роботи з ПК. Інтерфейс має бути адаптивним і коректно відображатися на різних
типах пристроїв, включаючи десктопи та мобільні телефони.
Час оновлення даних повинен бути не більше 5 секунд, щоб забезпечити
актуальність інформації. Продуктивність системи має бути достатньою для
плавного відображення графіків та таблиць без затримок.
Застосунок повинен підтримувати безперебійну роботу в браузерах, що
відповідають сучасним стандартам, таких як Chrome, Firefox, Edge.
Також важливими є вимоги безпеки — забезпечення захисту даних від
несанкціонованого доступу, а також безпечне відкриття зовнішніх посилань
(наприклад, на технічну підтримку).
2.2.2 Формування вимог за допомогою діаграми прецедентів
Для формування вимог до програмного забезпечення був використаний
підхід аналізу прецедентів використання (Use Case Analysis). Це дозволяє чітко
визначити функціональні можливості системи та взаємодію користувачів із
застосунком.
41
ЧДТУ 252155.008 ПЗ
Діаграма прецедентів ілюструє основних користувачів (акторів) системи,
їхні дії та основні сценарії використання застосунку (рисунок 2.3)
Рисунок 2.3 – Діаграма прецедентів WEB-застосунку реалізації кліматичних
умов на складському приміщенні
1 Вхід до системи.
Актори: оператор, адміністратор.
Опис: користувачі вводять свої облікові дані для авторизації у системі, що
дозволяє контролювати доступ до даних та функцій.
2 Перегляд поточних показників (графік, таблиця).
Актор: оператор.
Опис: оператор має змогу переглядати в реальному часі дані про
температуру та вологість у складі у вигляді графіків і таблиць.
3 Налаштування критичних меж.
Актор: адміністратор.
Опис: адміністратор встановлює межі допустимих значень температури та
вологості, при перевищенні яких система формує сповіщення.
4 Отримання сповіщень про критичні значення.
Актор: оператор.
Опис: оператор отримує візуальні та звукові сповіщення, коли параметри
виходять за встановлені межі.
5 Перегляд історії сповіщень.
Актор: оператор, адміністратор.
42
ЧДТУ 252155.008 ПЗ
Опис: користувачі можуть переглянути історію критичних подій для аналізу
та прийняття рішень.
6 Адміністрування користувачів.
Актор: адміністратор.
Опис: адміністратор має можливість додавати, змінювати або видаляти
облікові записи користувачів.
Дана діаграма прецедентів є інструментом, що допомагає структурувати
вимоги до програмного забезпечення, визначити ролі користувачів і основні
функції, які система повинна виконувати. Це сприяє розробці програмного
продукту, що відповідає реальним потребам замовника та кінцевих користувачів.
2.3 Проектування логічної структури програмного комплексу
У цьому підрозділі розглядається проектування логічної архітектури
програмного комплексу для моніторингу кліматичних умов на складі. Для
кращого розуміння структури та взаємодії основних компонентів системи
наведено діаграму класів, яка відображає ключові класи та зв’язки між ними.
2.3.1 Діаграми класів
Побудовано діаграму класів (рисунок 2.4), що ілюструє взаємодію між
основними об’єктами системи. В системі виділено шість основних класів:
DataGenerator (Генератор даних);
API_Server (Сервер API);
Notification (Модуль сповіщень);
Database (База даних);
WebInterface (Веб-інтерфейс);
User (Користувач).
Встановлено наступні зв’язки між класами:
DataGenerator -> API_Server: передає згенеровані дані;
API_Server -> Database: зберігає та отримує дані;
API_Server -> Notification: ініціює сповіщення про критичні значення;
43
ЧДТУ 252155.008 ПЗ
API_Server -> WebInterface: надає дані для відображення;
WebInterface -> User: взаємодія з користувачем (відображення
інформації, прийом команд);
Notification -> User: надсилає попередження користувачу.
Ця діаграма дозволяє чітко уявити логічну структуру програмного
комплексу, його компоненти та напрямки їх взаємодії, що є основою для
подальшої розробки та реалізації системи.
Рисунок 2.4 – Діаграма класів без атрибутів та методів WEB-застосунку реалізації
кліматичних умов на складському приміщенні
44
ЧДТУ 252155.008 ПЗ
Заповнення класів необхідними атрибутами та методами (рисунок 2.5),
базуючись на описі функціоналу системи моніторингу кліматичних умов на
складі.
DataGenerator (Генератор Даних):
відповідає за створення випадкових значень температури та вологості в
заданому діапазоні;
має можливість запускати та зупиняти процес генерації;
передає згенеровані дані серверу для подальшої обробки.
API_Server (Сервер API):
приймає дані від генератора;
зберігає інформацію у базі даних;
контролює перевірку даних на критичні значення та ініціює сповіщення;
відповідає на запити користувачів (через вебінтерфейс) на отримання
актуальних даних.
Database (База Даних):
зберігає всю історію вимірювань температури та вологості;
зберігає інформацію про користувачів системи та їх налаштування;
підтримує запити на вибірку даних за різними параметрами.
Notification (Сповіщення):
створює повідомлення про досягнення критичних меж температури чи
вологості;
відповідає за надсилання попереджень користувачам системи (через
вебінтерфейс або інші канали);
зберігає дату, час та текст повідомлення.
User (Користувач):
має власні облікові дані (ім'я, email, роль);
може авторизуватися в системі;
отримує сповіщення про критичні зміни клімату;
може переглядати статистику та графіки кліматичних параметрів.
45
ЧДТУ 252155.008 ПЗ
WebInterface (Вебінтерфейс):
забезпечує взаємодію користувача з системою;
відображає актуальні графіки та таблиці показників;
дозволяє змінювати налаштування та переглядати історію вимірювань;
підтримує вибір мови інтерфейсу.
Рисунок 2.5 – Діаграма класів WEB-застосунку реалізації кліматичних умов
на складському приміщенні
Опис класів з атрибутами та методами:
Клас DataGenerator
Атрибути:
частотаГенерації: Number — інтервал оновлення даних у секундах;
температурнийДіапазон: Tuple(Number, Number) — мінімальне та
максимальне значення температури;
вологостіДіапазон: Tuple(Number, Number) — мінімальне та
максимальне значення вологості.
Методи:
46
ЧДТУ 252155.008 ПЗ
запуститиГенерацію(): void — розпочинає створення випадкових даних;
зупинитиГенерацію(): void — зупиняє генератор;
отриматиДані(): Data — повертає згенеровані значення температури і
вологості.
Клас API_Server
Атрибути:
порт: Number — порт прослуховування запитів;
користувачі: Array<User> — список зареєстрованих користувачів.
Методи:
прийнятиДані(дані: Data): void — приймає і обробляє дані від
генератора;
зберегтиДані(дані: Data): void — записує інформацію в базу;
перевіритиКритичніЗначення(дані: Data): void — перевіряє, чи
перевищено пороги;
надіслатиДані(запит: Object): Data — обробляє запити від вебінтерфейсу.
Клас Database
Атрибути:
історіяДаних: Array<Data> — архів усіх вимірювань;
користувачі: Array<User> — база зареєстрованих користувачів.
Методи:
записатиДані(дані: Data): void — додає нові записи;
отриматиДані(фільтр: Object): Array<Data> — повертає дані за
параметрами;
додатиКористувача(user: User): void — реєструє нового користувача.
Клас Notification
Атрибути:
типСповіщення: String — наприклад, «перегрів», «надмірна вологість»;
текст: String — зміст повідомлення;
часВідправлення: DateTime — дата і час створення сповіщення.
47
ЧДТУ 252155.008 ПЗ
Методи:
створитиСповіщення(дані: Data): Notification — генерує повідомлення;
надіслатиКористувачу(user: User): void — відправляє сповіщення
конкретному користувачу.
Клас User
Атрибути:
ім'я: String;
електроннаПошта: String;
роль: String — тип користувача (адміністратор, оператор).
Методи:
авторизуватись(login: String, password: String): Boolean — вхід у систему;
отриматиСповіщення(): Array<Notification> — отримати всі
повідомлення;
переглянутиСтатистику(): Data — отримати статистику кліматичних
умов.
Клас WebInterface
Атрибути:
поточнийКористувач: User;
моваІнтерфейсу: String.
Методи:
показатиГрафік(дані: Array<Data>): void — відображення графіку;
показатиТаблицю(дані: Array<Data>): void — відображення таблиці;
обробитиКоманди(команда: Object): void — взаємодія з користувачем.
Ця діаграма класів ілюструє логічну структуру ключових компонентів
вебзастосунку для моніторингу клімату на складі. Вона демонструє, як різні
частини системи співпрацюють для генерації, обробки, зберігання даних і
взаємодії з користувачем через інтерфейс.
2.3.2 Діаграма пакетів
48
ЧДТУ 252155.008 ПЗ
Діаграма пакетів (Package Diagram) в UML використовується для
відображення загальної архітектури системи на високому рівні, показуючи, як
різні функціональні компоненти об’єднані в логічні модулі — пакети.
Для нашої системи моніторингу кліматичних умов на складі можна виділити
такі основні пакети:
DataGeneration: генерація випадкових даних температури та вологості;
API: прийом та обробка даних, перевірка критичних значень;
Database: збереження історії вимірювань та даних користувачів;
Notification: надсилання попереджень та сповіщень користувачам;
UserInterface: веб-інтерфейс для відображення даних та взаємодії з
користувачем;
User: управління інформацією про користувачів, авторизація.
Рисунок 2.6 – Діаграма пакетів WEB-застосунку реалізації кліматичних умов на
складському приміщенні
Нижче детальніше розглянемо кожний з виділених пакетів (рисунок 2.6).
DataGeneration
49
ЧДТУ 252155.008 ПЗ
Атрибути:
генератор випадкових значень температури та вологості.
Функціональність:
імітація роботи датчиків клімату;
запуск процесу генерації даних із заданою періодичністю.
API
Атрибути:
серверний модуль для обробки HTTP-запитів;
Функціональність:
прийом даних від генератора;
валідація та збереження даних у базі;
перевірка наявності критичних показників температури та вологості.
Database
Атрибути:
база даних для зберігання вимірювань та інформації про користувачів.
Функціональність:
збереження історії кліматичних показників;
підтримка запитів на отримання статистики.
Notification
Атрибути:
модуль надсилання сповіщень;
Функціональність:
формування та відправка повідомлень користувачам при досягненні
критичних значень;
підтримка різних каналів сповіщень.
UserInterface
Атрибути:
веб-інтерфейс із графіками, таблицями та формами;
Функціональність:
50
ЧДТУ 252155.008 ПЗ
відображення поточних і історичних даних;
прийом команд користувача (наприклад, налаштування критичних меж);
локалізація інтерфейсу.
User
Атрибути:
інформація про користувача (ім’я, роль, контактні дані).
Функціональність:
реєстрація та авторизація користувачів;
управління профілем;
отримання сповіщень.
Діаграма пакетів допомагає візуалізувати архітектуру системи на високому
рівні, показуючи логічне групування функціональних компонентів та їх
взаємодію. Це полегшує розуміння структури системи, а також сприяє її підтримці
та подальшому розвитку.
2.4 Архітектура проектування
У цьому підрозділі ми зосередимося на аналізі архітектури системи
моніторингу кліматичних умов на складі. Спершу буде представлена діаграма
компонентів, яка ілюструватиме взаємодію основних програмних модулів, їхні
інтерфейси та організацію обміну даними між ними. Далі розглянемо процес
розгортання системи на апаратних засобах — серверах, базах даних та
клієнтських пристроях. Це буде продемонстровано за допомогою діаграми
розгортання, що покаже розміщення компонентів на фізичних машинах і
пристроях, а також їхню взаємодію в реальному середовищі.
2.4.1 Діаграма компонентів
Діаграма компонентів (рисунок 2.7) відображає основні програмні модулі
розробленого веб-застосунку, що відповідає за моніторинг температури та
вологості на складі. Вона ілюструє функції кожного компонента, їхню взаємодію
між собою та із зовнішніми службами.
51
ЧДТУ 252155.008 ПЗ
Рисунок 2.7 – Діаграма компонентів WEB-застосунку реалізації кліматичних
умов на складському приміщенні
1 Data Simulation Module
Функції:
імітує роботу фізичних датчиків температури та вологості;
генерує випадкові значення температури та вологості у заданому
діапазоні;
надсилає дані на сервер через HTTP-запити (наприклад, POST).
Залежності:
взаємодіє з API Server (Flask) для передачі даних.
2 API Server (Flask Backend)
Функції:
отримує дані з Data Simulation Module;
обробляє дані, перевіряє на перевищення критичних меж;
зберігає значення до бази даних (PostgreSQL);
надає REST API для запитів з Web Client;
тригерить сповіщення через Notification Service.
Залежності:
52
ЧДТУ 252155.008 ПЗ
взаємодіє з Database Service для збереження та вибірки даних;
надає дані Web Client через API;
викликає Notification Service при виявленні критичних показників.
3 Database Service (PostgreSQL)
Функції:
зберігає часові ряди температури та вологості;
дає змогу здійснювати історичний аналіз і перегляд статистики.
Залежності:
використовується API Server для створення, читання, оновлення та
вибірки даних.
4 Web Client (React Frontend)
Функції:
відображає поточні значення температури та вологості;
візуалізує дані у вигляді графіків і таблиць;
динамічно змінює фон сайту відповідно до кліматичного стану (clear,
hot, rain);
показує попередження про перевищення норм;
дозволяє перемикати мову (UA/EN), тему (світла/темна), переглядати
історію.
Залежності:
отримує дані з API Server через REST-запити;
реалізує логіку відображення сповіщень (через react-toastify).
5 Notification Service
Функції:
визначає, коли температура або вологість виходять за встановлені
межі;
веде історію сповіщень.
Залежності:
отримує тригери від API Server;
53
ЧДТУ 252155.008 ПЗ
використовує Telegram для доставки повідомлень.
Загальна структура компонентів системи демонструє чітке розділення
обов’язків між модулями. Така модульна архітектура дає змогу легко
масштабувати систему, замінювати окремі компоненти без значних змін у решті
частин, а також полегшує тестування і технічну підтримку. Комунікація між
модулями реалізується через HTTP-запити або внутрішні API, а всі критичні
показники обробляються централізовано на стороні бекенду.
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання
Розгортання програмної системи на апаратних засобах включає в себе
розгортання програмної системи для моніторингу температури та вологості у
складському приміщенні включає встановлення та налаштування всіх компонентів
на відповідних фізичних або віртуальних апаратних засобах. Система реалізована
у вигляді багатокомпонентного веб-застосунку, що складається з генератора
даних, серверної частини, бази даних, клієнтського інтерфейсу та сервісу
сповіщень через Telegram.
На основі логічної структури системи побудована діаграма розгортання
(рисунок 2.8), яка відображає фізичне розміщення основних компонентів на
апаратному рівні.
Компоненти розгортання:
1 Data Generator Module (Емулятор датчиків):
відповідає за імітацію показників температури та вологості;
розгортається як фоновий Python-скрипт на сервері або окремій
віртуальній машині;
працює за розкладом (через cron або loop), періодично надсилаючи
дані на Flask API Server.
2 API Server (Flask Backend):
реалізує REST API для прийому, збереження та обробки даних;
містить бізнес-логіку перевірки критичних значень;
54
ЧДТУ 252155.008 ПЗ
взаємодіє з базою даних та сервісом сповіщень;
розгортається на веб-сервері з підтримкою Python (наприклад, через
Gunicorn + Nginx).
3 Database Server (PostgreSQL):
зберігає всі показники температури та вологості, а також історію
критичних сповіщень;
розгортається як окремий контейнер або на виділеному сервері;
забезпечує цілісність, швидкий доступ та масштабованість.
4 Web Client (React Frontend):
надає зручний графічний інтерфейс для користувача з можливістю
перегляду поточних значень, історії, критичних станів та
налаштувань;
працює у веббраузері користувача;
отримує дані з API Server через HTTP-запити.
5 Notification Service (Telegram):
надсилає сповіщення про вихід за межі допустимих значень;
інтегрується через Telegram;
може працювати як частина Flask-сервера або як окремий
мікросервіс.
Рисунок 2.8 – Діаграма розгортання WEB-застосунку реалізації кліматичних
умов на складському приміщенні
55
ЧДТУ 252155.008 ПЗ
Діаграма розгортання дозволяє наочно побачити фізичне розміщення та
взаємодію компонентів програмної системи. Це важливо для планування
інфраструктури, оптимізації ресурсів, забезпечення масштабованості та стабільної
роботи системи у реальному середовищі.
2.5 Моделювання поведінки системи
У цьому підрозділі детально розглянемо динамічні аспекти функціонування
вебзастосунку для моніторингу кліматичних умов у складському приміщенні.
Спершу буде представлена діаграма діяльності, яка покаже логіку обробки даних і
взаємодії користувача з інтерфейсом. Далі розглянемо діаграму послідовності, що
відобразить хронологічний порядок обміну повідомленнями між клієнтською
частиною (React) і сервером (Flask API). Потім представимо діаграму комунікації,
яка ілюструє структурні зв’язки між основними компонентами системи. На
завершення — діаграма скінченного автомату, що детально відобразить основні
стани системи та переходи між ними залежно від подій, таких як надходження
нових показників або досягнення критичних значень.
2.5.1 Діаграма діяльності
Діаграма діяльності (Activity Diagram) в UML використовується для
моделювання послідовності дій і бізнес-процесів системи, показуючи основні
кроки та умови їх виконання.
Діаграма діяльності (рисунок 2.9) для вебзастосунку моніторингу розділена
на два основні потоки: користувач (адміністратор або оператор складу) і система
збору даних.
Опис основних кроків діяльності, зображених на діаграмі:
Користувач (адміністратор / оператор):
Відкриття вебзастосунку:
користувач заходить на головну сторінку застосунку через браузер.
Перегляд поточних показників:
відображення графіків і таблиць з актуальними значеннями температури
та вологості.
56
ЧДТУ 252155.008 ПЗ
Рисунок 2.9 – Діаграма діяльності WEB-застосунку реалізації кліматичних умов
на складському приміщенні
Отримання сповіщень:
користувач бачить попередження при досягненні або перевищенні
критичних значень.
Перегляд історії даних:
користувач переглядає архів показників у вигляді таблиці або графіка.
Виклик технічної підтримки:
при потребі користувач натискає кнопку для звернення до техпідтримки.
Система збору даних:
Генерація або отримання даних:
сервер періодично отримує (або генерує) значення температури і
вологості.
Обробка даних:
перевірка значень на відповідність встановленим критичним межам.
57
ЧДТУ 252155.008 ПЗ
Збереження даних:
запис показників у базу даних.
Надсилання оновлень клієнту:
сервер надсилає оновлені дані на фронтенд для відображення в
реальному часі.
Діаграма діяльності допомагає чітко зрозуміти, як користувач взаємодіє з
системою, а також як система обробляє і передає дані для моніторингу
кліматичних умов. Такий підхід дозволяє оцінити послідовність дій і
відслідкувати можливі варіанти розвитку подій у застосунку.
2.5.2 Діаграма послідовності
Діаграма послідовності (Sequence Diagram) відображає хронологічний
порядок обміну повідомленнями між об’єктами системи. Вона дозволяє
візуалізувати логіку взаємодії між компонентами веб-застосунку — від
користувача до бекенду, бази даних і сторонніх сервісів. Такі діаграми є важливою
частиною моделювання, оскільки вони показують, які саме дії виконує кожен
компонент і в якій послідовності.
Для реалізованого веб-застосунку моніторингу клімату в складському
приміщенні створено дві діаграми послідовності відповідно до ключових
сценаріїв роботи системи.
Опис кроків, зображених на першій діаграмі
Сценарій: Перегляд поточних значень температури та вологості
Користувач відкриває веб-застосунок через браузер.
Інтерфейс (React) надсилає запит GET /api/data до Flask-серверу.
Сервер обробляє запит і викликає модуль генерації даних, який формує
випадкові значення температури та вологості (імітація датчиків).
Отримані значення зберігаються у базі даних PostgreSQL через
SQLAlchemy.
Flask-API повертає збережені значення у відповідь на запит.
58
ЧДТУ 252155.008 ПЗ
Інтерфейс отримує ці дані та виводить їх у вигляді графіків, таблиць і
кольорових індикаторів (залежно від стану: норма/перевищення).
Якщо температура або вологість виходять за допустимі межі, інтерфейс
показує візуальне попередження та змінює фон.
Рисунок 2.10 – Діаграма послідовності WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Ці діаграми наочно демонструють послідовність взаємодії між
компонентами реалізованої системи: веб-інтерфейсом, серверною частиною,
базою даних, системою перевірки критичних станів та Telegram-ботом. Їх
використання дозволяє краще зрозуміти внутрішню логіку проєкту та полегшує
підтримку і масштабування системи.
2.5.3 Діаграма комунікації
Діаграма комунікації описує поведінку системи як взаємодію між об'єктами
у визначеному контексті. Вона демонструє, які об'єкти обмінюються
повідомленнями, в якому порядку, і як ці повідомлення організовані за допомогою
59
ЧДТУ 252155.008 ПЗ
нумерації. Це дає змогу краще зрозуміти структуру взаємодії в рамках
конкретного сценарію роботи системи.
Для нашого вебзастосунку створено діаграму комунікації для сценарію
фіксації критичного значення температури або вологості, з наступною обробкою
цього випадку системою.
Рисунок 2.11 – Діаграма комунікації WEB-застосунку реалізації кліматичних умов
на складському приміщенні
Генератор Даних Flask API: 1: надіслати нові дані
Скрипт генерації даних передає згенеровані значення температури та
вологості на бекенд.
60
ЧДТУ 252155.008 ПЗ
Flask API Система Виявлення Критичних Значень: 2: перевірити дані
API передає отримані значення до модуля, що перевіряє їх на відповідність
заданим критичним межам.
Система Виявлення PostgreSQL: 3: зберегти нові значення
Значення зберігаються в базі даних для подальшого аналізу та статистики.
PostgreSQL Система Виявлення: 4: підтвердження збереження
База даних повідомляє про успішне збереження нових показників.
Система Виявлення Flask API: 5: дані критичні / не критичні
Модуль повідомляє API, чи значення є критичними (перевищують
допустимі межі).
Telegram: 6: надіслати сповіщення (якщо критично)
Якщо значення критичні, API ініціює надсилання повідомлення через
телеграм.
Telegram Користувач: 7: отримати попередження про критичні умови
Користувач отримує сповіщення у Telegram про перевищення критичних
меж температури або вологості.
Діаграма комунікації для виявлення критичних кліматичних умов
демонструє, як взаємодіють компоненти системи: генератор даних, API, логіка
перевірки критичних значень, база даних та телеграм-бот. Вона дає змогу краще
зрозуміти, як відбувається обробка загрозливої ситуації — від фіксації параметрів
до надсилання попередження користувачу.
2.5.4 Діаграма скінченного автомату
Діаграма скінченного автомату (діаграма станів) використовується для
моделювання поведінки об'єктів, які переходять з одного стану в інший у
відповідь на певні події. У контексті нашої системи така діаграма демонструє
логіку роботи клієнтської частини вебзастосунку — зокрема, як змінюються стани
інтерфейсу в залежності від дій користувача та внутрішніх подій системи.
На (рисунку 2.12) представлено діаграму станів для інтерфейсу користувача
системи моніторингу.
61
ЧДТУ 252155.008 ПЗ
Рисунок 2.12 – Діаграма скінченного автомату WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Опис основних станів вебінтерфейсу:
Неактивний:
початковий стан інтерфейсу, коли сторінка ще не завантажена, або
користувач не авторизований;
може відображатися заставка, логотип або кнопка входу.
Активний:
основний стан інтерфейсу після завантаження застосунку або
авторизації користувача;
містить декілька вкладених підстанів відповідно до функціональних
розділів застосунку.
Вкладені стани активного інтерфейсу:
Головна Сторінка:
основна панель моніторингу, яка відображає поточні значення
температури та вологості;
відображає графік, таймер, індикатор критичних станів;
користувач може перейти до статистики або налаштувань.
Сторінка Статистики:
62
ЧДТУ 252155.008 ПЗ
відображає таблицю з історією даних та критичних значень;
доступне сортування, кольорове виділення, фільтрація;
після перегляду статистики користувач повертається до головної
сторінки.
СторінкаНалаштувань:
дозволяє встановити або змінити критичні межі температури та
вологості;
користувач також може обрати мову інтерфейсу (UA/EN) та тему
оформлення (світла/темна);
після внесення змін користувач повертається до головної сторінки.
Попередження:
тимчасовий стан, коли система відображає спливаюче повідомлення
(наприклад, через toastify) про виявлене критичне значення або успішне
збереження налаштувань;
після відображення повідомлення інтерфейс повертається у попередній
активний стан.
Діаграма скінченого автомату інтерфейсу користувача допомагає краще
зрозуміти, як застосунок реагує на події, пов’язані з оновленням даних, зміною
налаштувань або сповіщеннями. Вона чітко структурує можливі стани системи та
логіку переходів між ними, що особливо корисно для тестування, розробки та
подальшої підтримки інтерфейсу.
63
ЧДТУ 252155.008 ПЗ
ВИСНОВОК ДО ДРУГОГО РОЗДІЛУ
У другому розділі було здійснено комплексний аналіз сучасних підходів,
методів та засобів, що використовуються для реалізації систем моніторингу
кліматичних умов у приміщеннях. На основі цього аналізу було спроектовано
низку UML-діаграм, що охоплюють ключові аспекти структури, функціональності
та логіки роботи майбутнього вебзастосунку.
Формування вимог до системи. Були визначені первинні функціональні та
нефункціональні вимоги до системи моніторингу, включаючи автоматичне
оновлення даних, візуальне та звукове попередження про критичні стани,
адаптивний інтерфейс, багатомовність, зберігання історії даних та можливість
налаштування порогових значень температури й вологості.
Діаграма прецедентів. Показала основні сценарії взаємодії користувача із
системою, зокрема перегляд поточних значень, перегляд статистики, редагування
налаштувань, перемикання теми та мови, а також отримання критичних
сповіщень.
Діаграма класів. Відобразила логічну структуру системи, зокрема класи
для користувача, показників, історії сповіщень, налаштувань та системних подій.
Це дозволило визначити необхідні атрибути й методи для реалізації об'єктної
моделі.
Діаграма пакеті. Демонструвала логічну організацію коду: фронтенд,
бекенд, API, модулі сповіщення, база даних. Така структура дозволяє забезпечити
модульність, гнучкість розробки та зручність масштабування системи.
Діаграма компонентів. Пояснила фізичну реалізацію взаємодії між
основними програмними компонентами: клієнтським інтерфейсом, сервером Flask
API, базою даних PostgreSQL, сервісами обробки сповіщень та логіки.
Діаграма розгортання. Відобразила розміщення застосунку на хмарному
або локальному сервері, з урахуванням компонентів безпеки, бази даних та
клієнтських пристроїв користувачів. Це особливо важливо для планування
інфраструктури системи та забезпечення її надійності.
64
ЧДТУ 252155.008 ПЗ
Діаграма діяльності. Візуалізувала логіку роботи системи при основних
сценаріях: запуск застосунку, оновлення даних, обробка критичних значень, зміна
налаштувань. Це допомогло детально описати послідовність дій у кожному з
кейсів.
Діаграма комунікації. Пояснила, як взаємодіють об’єкти застосунку при
генерації, передачі, зберіганні та відображенні кліматичних показників. Дана
діаграма допомогла чітко зрозуміти потоки даних між компонентами.
Діаграма скінченного автомату. У процесі проєктування вебзастосунку
для моніторингу кліматичних умов було побудовано діаграму скінченного
автомату, яка моделює поведінку інтерфейсу системи залежно від дій користувача
та внутрішніх системних подій.
На діаграмі було окреслено основні стани, у яких може перебувати система
під час взаємодії з користувачем: неактивний стан, головна сторінка, сторінка
статистики, налаштування, а також режим перегляду сповіщень. Для кожного з
цих станів було визначено допустимі переходи залежно від подій, таких як
ініціація користувацьких дій або надходження важливих повідомлень (наприклад,
сигнал про критичне перевищення параметрів температури чи вологості).
Побудова такої діаграми дозволила не лише візуалізувати поведінку
застосунку, а й забезпечити його логічну цілісність, передбачуваність реакцій на
вхідні події та стійкість до некоректних сценаріїв використання. Завдяки цьому
було досягнуто високого рівня структурованості у проектуванні, що є необхідною
передумовою для стабільної роботи системи як у звичайному, так і у критичному
режимі експлуатації.
Отримані результати дали змогу сформувати цілісне уявлення про логіку
функціонування вебзастосунку, його структуру, модель взаємодії з користувачем
та поведінку під час змін зовнішніх умов. Усе це створює надійну основу для
наступних етапів розробки, включно з реалізацією, тестуванням, масштабуванням
та впровадженням системи в реальні умови — наприклад, у складські
приміщення, логістичні центри чи інші об’єкти з підвищеними вимогами до
моніторингу мікроклімату.
65
ЧДТУ 252155.008 ПЗ
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
3.1 Розробка програмного комплексу
У цьому підрозділі докладно описано процес створення вебзастосунку для
моніторингу температури та вологості у складському приміщенні. Розробка
включає повний цикл — від вибору архітектури, технологій і середовища
реалізації до побудови серверної та клієнтської логіки, організації зберігання
даних і реалізації функціоналу оповіщень. Також розглянуто інтеграцію між
компонентами системи: генератором даних, API на Flask, базою даних PostgreSQL,
інтерфейсом користувача на React та Telegram-ботом для сповіщень. Це забезпечує
повне уявлення про кожен етап створення та налаштування системи, з акцентом на
практичну реалізацію функцій моніторингу, локалізації, авторизації та візуалізації
даних.
3.1.1 Обґрунтування вибору засобів реалізації
Для розробки системи моніторингу кліматичних умов на складі — зокрема
температури і вологості — було проведено ретельний вибір технологій, які
забезпечать надійність, масштабованість, зручність користування і швидку
обробку даних у реальному часі. Вибір базувався на ключових критеріях:
продуктивність, підтримка, можливість інтеграції, а також перспективи
подальшого розвитку системи.
1 Серверна частина — мова програмування Python
Python став основою серверної логіки завдяки своїй простоті та великій
кількості готових бібліотек для роботи з веб-сервісами, базами даних і генерації
тестових даних. Особливо важливою була підтримка таких бібліотек як Flask для
створення API, SQLAlchemy для роботи з базою даних та random — для симуляції
показників температури і вологості.
2 Веб-фреймворк Flask
Flask обрано за його легкість і гнучкість, що дозволяє швидко створювати
REST API для передачі даних між сервером і клієнтом. Цей фреймворк ідеально
66
ЧДТУ 252155.008 ПЗ
підходить для реалізації простих і водночас масштабованих сервісів, які можна
доповнювати новими функціями без суттєвих змін у архітектурі.
3 База даних PostgreSQL з ORM SQLAlchemy
Для зберігання історії кліматичних показників обрана реляційна база даних
PostgreSQL. Вона гарантує надійне збереження великих обсягів даних і забезпечує
високу продуктивність. Використання ORM SQLAlchemy спрощує доступ до
даних і дозволяє більш гнучко управляти моделями бази.
4 Клієнтська частина — React
Інтерфейс користувача реалізовано за допомогою React. Цей інструмент
дозволяє створити динамічний та адаптивний вебзастосунок з можливістю
відображення графіків і таблиць, підтримкою двомовності (українська/англійська)
та сповіщеннями про критичні зміни кліматичних параметрів.
5 Telegram для сповіщень
Для оперативного інформування відповідальних осіб про перевищення
критичних значень температури чи вологості створено звернення до Telegram. Він
забезпечує швидку доставку повідомлень і дозволяє контролювати ситуацію
дистанційно.
6 Додаткові інструменти
dotenv — для безпечного зберігання конфіденційних налаштувань;
random — для генерації випадкових даних у тестовому режимі;
recharts — бібліотека для побудови графіків в інтерфейсі;
react-i18next — для реалізації мультимовності;
react-toastify — для відображення спливаючих повідомлень.
Цей набір технологій забезпечує створення ефективної системи моніторингу
кліматичних умов, яка відповідає вимогам надійності, зручності використання і
масштабованості, а також дає змогу розвивати функціонал у майбутньому.
3.1.2 Опис структурної (функціональної) схеми
Структурна (функціональна) схема системи моніторингу кліматичних умов
на складі відображає основні компоненти системи та їх взаємодію. Ця схема
67
ЧДТУ 252155.008 ПЗ
допомагає зрозуміти, як різні частини системи співпрацюють для забезпечення
безперервного збору, обробки та передачі даних про кліматичні умови у режимі
реального часу.
Рисунок 3.1 – Опис функціональної схеми WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Схема складається з наступним компонентів:
1 Клієнтська частина (веб-інтерфейс):
головне меню: інтерфейс для користувача (адміністратор, працівник
складу) для перегляду температури, вологості та інших кліматичних
68
ЧДТУ 252155.008 ПЗ
параметрів;
відображення графіків і таблиць з історією вимірювань;
налаштування критичних меж температури і вологості;
сповіщення про перевищення критичних значень.
2 Серверна частина (API на Flask):
обробка запитів від клієнта;
генерація та симуляція кліматичних даних (у тестовому режимі);
збереження і вибірка даних з бази даних;
логіка сповіщень і надсилання повідомлень у Telegram.
3 База даних (PostgreSQL):
збереження історії кліматичних параметрів;
збереження налаштувань користувачів і критичних меж;
збереження історії сповіщень.
4 Telegram:
надсилання сповіщень відповідальним особам у разі перевищення
критичних параметрів;
отримання запитів від користувачів (наприклад, статус моніторингу);
взаємодія з сервером для отримання актуальних даних.
Ця структурна схема надає чітке уявлення про взаємодію між користувачем,
сервером, базою даних та Telegram у системі моніторингу кліматичних умов на
складі. Вона демонструє, як дані збираються, обробляються, зберігаються і
передаються відповідним користувачам у вигляді сповіщень або звітів.
3.1.3 Опис логічної схеми
Логічна схема системи моніторингу кліматичних умов на складі описує
послідовність дій, що відбуваються у системі для збору, обробки та відображення
кліматичних даних, а також реагування на критичні значення. Ця схема включає
алгоритм функціонування системи в текстовому вигляді та графічну
інтерпретацію у вигляді блок-схеми.
69
ЧДТУ 252155.008 ПЗ
Рисунок 3.2 – Логічна схема WEB-застосунку реалізації кліматичних умов на
складському приміщенні
Алгоритм функціонування системи
Запуск системи:
користувач (адміністратор або відповідальна особа) відкриває веб-
інтерфейс системи;
система завантажує останні дані про кліматичні умови на складі.
Отримання кліматичних даних:
70
ЧДТУ 252155.008 ПЗ
сервер запускає процес отримання даних з датчиків (або генерацію у
тестовому режимі);
дані передаються на сервер для обробки.
Обробка і збереження даних:
сервер аналізує отримані значення температури та вологості;
якщо значення виходять за встановлені критичні межі, запускається
механізм сповіщень;
дані зберігаються у базі даних.
Відображення даних:
користувач переглядає графіки, таблиці та поточні показники через веб-
інтерфейс;
користувач має можливість налаштувати критичні межі температури і
вологості.
Сповіщення:
якщо параметри перевищують межі, користувач надсилає повідомлення
у Telegram;
користувач отримує сповіщення і може оперативно реагувати.
Ця логічна схема чітко відображає послідовність операцій у системі
моніторингу кліматичних умов на складі — від запуску веб-інтерфейсу, збору і
обробки даних до реагування на критичні показники і інформування користувача.
Вона демонструє основні кроки для забезпечення безперервного контролю і
своєчасного реагування.
3.1.4 Розробка бази даних
Розробка бази даних є важливим етапом у створенні вебзастосунку для
моніторингу температури і вологості на складі, оскільки вона забезпечує надійне
зберігання, організацію та обробку даних, що надходять від датчиків, а також
збереження налаштувань користувачів. Для реалізації бази даних обрана
реляційна система PostgreSQL, яка відома своєю стабільністю, високою
продуктивністю і підтримкою складних запитів. Для взаємодії з базою даних
71
ЧДТУ 252155.008 ПЗ
використовується бібліотека SQLAlchemy, що надає можливість працювати з
базою даних на високому рівні абстракції через ORM-моделі (Object-Relational
Mapping), що значно спрощує розробку та подальше обслуговування проєкту.
Процес розробки.
Аналіз вимог:
Необхідно зберігати дані температури та вологості з часовою міткою, щоб
можна було відслідковувати зміни клімату з часом. Кожен запис повинен мати
унікальний ідентифікатор, щоб забезпечити можливість точного доступу і
оновлення даних.
Проектування схеми:
Створена таблиця measurements із полями id (первинний ключ), temperature і
humidity для збереження значень клімату, а також timestamp для фіксації часу
вимірювання. Типи даних вибрано так, щоб оптимально зберігати числові
значення і дату/час. Використання nullable=False гарантує, що обов’язкові поля не
залишаться порожніми.
Рисунок 3.4 – Модель Measurement (Виміри клімату) WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Процес розробки.
Аналіз вимог:
Для забезпечення безпеки доступу до системи необхідно створити облікові
записи користувачів з унікальними логінами, хешованими паролями та ролями для
72
ЧДТУ 252155.008 ПЗ
контролю прав доступу. Важливо також відслідковувати дату створення акаунтів.
Проектування схеми:
Таблиця users містить унікальне поле username для ідентифікації, поле
password_hash для безпечного зберігання паролів, а також поле role для
розмежування користувачів (адміністратор, звичайний користувач). Поле
created_at зберігає дату створення, що може бути корисним для аудиту.
Рисунок 3.5 – Модель User (Користувачі) WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Процес розробки.
Аналіз вимог:
Для сповіщення про критичні стани клімату необхідно зберігати порогові
значення температури і вологості, які можуть змінюватися користувачем. Також
важливо мати інформацію про час останнього оновлення цих параметрів.
Проектування схеми:
Таблиця settings містить мінімальні і максимальні межі для температури і
вологості з типом Float, що забезпечує зберігання дробових значень. Поле
updated_at автоматично оновлюється при зміні запису, що дозволяє вести історію
актуальності налаштувань.
73
ЧДТУ 252155.008 ПЗ
Рисунок 3.6 – Модель Settings (Критичні межі температури і вологості)
WEB-застосунку реалізації кліматичних умов на складському приміщенні
Процес розробки.
Аналіз вимог:
Потрібне стабільне підключення до СУБД PostgreSQL із можливістю
виконувати запити та транзакції. Необхідно забезпечити конфігурацію без зайвих
витрат ресурсів.
Проектування схеми:
Встановлено URI підключення із логіном, паролем, адресою сервера і
назвою бази даних. Вимкнено функціонал відстеження змін у SQLAlchemy для
оптимізації продуктивності.
Рисунок 3.7 – Підключення бази даних у Flask WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Процес розробки.
Аналіз вимог:
Для початкової ініціалізації бази необхідно створити всі описані таблиці,
якщо вони ще не існують.
74
ЧДТУ 252155.008 ПЗ
Проектування схеми:
Використання контексту додатку Flask гарантує, що всі параметри
конфігурації доступні, і викликається метод create_all(), який створює структуру
таблиць на основі описаних моделей.
Рисунок 3.8 – Створення таблиць у базі даних WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Процес розробки.
Аналіз вимог:
Потрібно регулярно додавати нові показники температури і вологості до
бази даних із відміткою часу.
Проектування схеми:
Функція створює новий об'єкт моделі Measurement з параметрами
температури і вологості, додає його у сесію і виконує фіксацію транзакції у базі.
Це забезпечує збереження даних і готовність до подальшого запиту.
Рисунок 3.9 – Додавання нового виміру клімату WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Процес розробки.
Аналіз вимог:
75
ЧДТУ 252155.008 ПЗ
Необхідно швидко отримувати найсвіжіші дані для відображення поточного
стану клімату на складі.
Проектування схеми:
Запит упорядковує записи за полем timestamp у спадному порядку та
повертає перший запис, що забезпечує найновіші дані. Такий підхід є ефективним
і відповідає вимогам реального часу.
Рисунок 3.10 – Отримання останнього виміру WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Процес розробки бази даних для веб-застосунку моніторингу кліматичних
умов включає детальний аналіз вимог до збереження та обробки даних,
проектування таблиць із чітким визначенням типів даних та ключових атрибутів.
Вибрані схеми забезпечують надійне зберігання вимірювань, налаштувань та
інформації про користувачів, що дозволяє ефективно управляти станом системи і
забезпечувати її безпеку. Використання реляційної бази даних PostgreSQL у
поєднанні з ORM SQLAlchemy забезпечує гнучкість, масштабованість і зручність
у роботі з даними, що робить цю архітектуру оптимальною для реалізації
поставлених задач.
3.1.5 Розробка інтерфейсу користувача
Розробка інтерфейсу користувача (UI) є важливим етапом у створенні
вебзастосунку для моніторингу температури та вологості в складському
приміщенні. Від інтуїтивності, зручності та функціональності інтерфейсу
залежить ефективність взаємодії користувача з системою, а також швидкість і
точність отримання необхідної інформації про стан кліматичних параметрів на
складі.
76
ЧДТУ 252155.008 ПЗ
Вимоги до інтерфейсу користувача:
Зручність використання: інтерфейс повинен бути інтуїтивно зрозумілим та
легким у користуванні для працівників складу та адміністрації.
Функціональність: інтерфейс повинен забезпечувати доступ до ключових
функцій — перегляду поточних даних температури і вологості, історії показників,
статистики, а також налаштувань критичних меж.
Доступність: інтерфейс має коректно працювати на різних пристроях (ПК,
планшети, смартфони) з адаптивним дизайном.
Локалізація: підтримка двох мов — української та англійської — для
зручності користувачів.
Проектування основних компонентів інтерфейсу
Головна сторінка застосунку є центральним пунктом взаємодії користувача з
системою. Вона відображає поточні значення температури та вологості, а також
має навігаційне меню для переходу до інших розділів — статистики, налаштувань
та технічної підтримки.
На головній сторінці реалізовано віджет з показниками температури та
вологості із кольоровим підсвічуванням критичних значень (рисунок 3.11).
Залежно від стану кліматичних параметрів, фон застосунку змінюється
(наприклад, "спокійна" тема для нормальних значень, "гаряча" тема при
підвищеній температурі, "дощова" — при підвищеній вологості) (рисунок 3.12).
Рисунок 3.11– Головна сторінка вебзастосунку із поточними показниками
77
ЧДТУ 252155.008 ПЗ
температури та вологості WEB-застосунку реалізації кліматичних умов на
складському приміщенні
Рисунок 3.12 – Зміна фону сторінки залежно від кліматичного стану WEB-
застосунку реалізації кліматичних умов на складському приміщенні
У розділі "Статистика" користувач може переглядати історію показників
температури і вологості у вигляді таблиці з можливістю сортування та фільтрації
(рисунок 3.13). Додатково є графічне відображення даних у вигляді лінійних
графіків, що дає змогу простежити тенденції змін за обраний період.
78
ЧДТУ 252155.008 ПЗ
Рисунок 3.13 – Сторінка статистики з таблицею WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Кнопка «Про нас» розташована у верхньому навігаційному меню
вебзастосунку і призначена для переходу на сторінку або відкриття модального
вікна з інформацією про команду розробників, цілі проєкту, технології, які
використовуються, а також контактні дані. Ця кнопка допомагає користувачам
краще зрозуміти, хто стоїть за розробкою застосунку, підвищує довіру та сприяє
більшому залученню.
79
ЧДТУ 252155.008 ПЗ
Рисунок 3.14 – Кнопка «Про нас» та функціонал WEB-застосунку реалізації
кліматичних умов на складському приміщенні
У верхній частині інтерфейсу розміщена кнопка для перемикання між
українською та англійською мовами інтерфейсу. Натиснувши її, користувач може
миттєво переключити мову відображення текстів, що робить застосунок зручним
для ширшої аудиторії та підвищує його доступність.
Рисунок 3.15 – Кнопка зміни мови та функціонал WEB-застосунку реалізації
кліматичних умов на складському приміщенні
80
ЧДТУ 252155.008 ПЗ
Кнопка технічної підтримки знаходиться у верхньому меню та при
натисканні відкриває нову вкладку браузера з посиланням на чат у Telegram:
Рисунок 3.16 – Кнопка технічної підтримки WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Кнопка технічної підтримки у вебзастосунку призначена для оперативного
зв’язку користувача з командою розробників через месенджер Telegram. При
натисканні на цю кнопку відкривається нова вкладка браузера з чат-інтерфейсом
Telegram, де користувач може безпосередньо написати повідомлення до служби
підтримки. Такий підхід забезпечує швидку комунікацію, зручність у
використанні та можливість отримати консультацію або допомогу у режимі
реального часу. На (рисунку 3.17) наведено приклад відображення кнопки та
механізму переходу до Telegram для написання технічного повідомлення.
Рисунок 3.17 – Перехід до Telegram WEB-застосунку реалізації кліматичних умов
на складському приміщенні
81
ЧДТУ 252155.008 ПЗ
У верхньому правому куті інтерфейсу постійно відображається поточний
час у форматі години та хвилини. Таймер оновлюється щосекунди, допомагаючи
користувачам орієнтуватися в актуальності відображених даних і моменті
останнього оновлення. Таймер інтегрований у дизайн застосунку, змінюючи стиль
залежно від вибраної теми (світлої або темної), та не заважає роботі інших
елементів інтерфейсу.
Рисунок 3.18 – Таймер WEB-застосунку реалізації кліматичних умов на
складському приміщенні
Розробка інтерфейсу користувача для мого вебзастосунку моніторингу
температури та вологості в складському приміщенні включає визначення вимог до
зручності, функціональності та адаптивності, проектування основних компонентів
інтерфейсу, а також тестування й оптимізацію. Інтерфейс має бути інтуїтивно
зрозумілим і доступним для різних категорій користувачів — працівників складу
та адміністрації. Тестування і оптимізація дозволяють забезпечити стабільну та
ефективну роботу застосунку на різних пристроях і в різних умовах експлуатації.
3.1.6 Опис розробки програмних компонентів
Розробка програмних компонентів вебзастосунку для моніторингу
температури та вологості в складському приміщенні включає створення окремих
модулів, які реалізують ключові функції системи. Кожен компонент розробляється
з урахуванням вимог до функціональності, надійності та ефективності. Нижче
наведено опис основних програмних компонентів та їх реалізацію.
Основні програмні компоненти.
Компонент генерації даних.
Призначення: забезпечує імітацію показників температури та вологості,
необхідних для моніторингу кліматичних умов на складі;
82
ЧДТУ 252155.008 ПЗ
реалізація: скрипт на Python, який випадковим чином генерує значення в
заданих межах та передає їх до бекенду.
Компонент API на Flask.
призначення: надає інтерфейс для отримання актуальних показників
температури і вологості, а також для збереження налаштувань користувача;
реалізація: REST API на Flask, що взаємодіє з базою даних PostgreSQL через
SQLAlchemy для зберігання даних і параметрів моніторингу.
Компонент збереження даних.
призначення: зберігає поточні та історичні показники температури і
вологості, а також критичні межі, встановлені користувачем;
реалізація: модель бази даних PostgreSQL, що організує таблиці для
збереження вимірювань і налаштувань.
Компонент фронтенду (React).
призначення: забезпечує користувацький інтерфейс для відображення даних,
управління налаштуваннями, перегляду статистики та взаємодії із системою;
реалізація: вебзастосунок на React із використанням i18next для локалізації,
react-toastify для сповіщень, динамічним відображенням графіків та адаптивним
дизайном.
Компонент технічної підтримки.
призначення: надає користувачу можливість швидко звернутися до технічної
підтримки через Telegram;
реалізація: кнопка у інтерфейсі, яка відкриває посилання на чат у Telegram
для написання повідомлення.
Взаємодія компонентів.
Компонент генерації даних створює випадкові значення, які через API на
Flask надходять у систему для збереження у базі даних PostgreSQL. Фронтенд
регулярно отримує оновлені дані через API і відображає їх у вигляді показників,
таблиць і графіків. Користувач через інтерфейс може задавати критичні межі та
мову застосунку, ці налаштування зберігаються у базі даних. Кнопка технічної
83
ЧДТУ 252155.008 ПЗ
підтримки забезпечує прямий перехід у Telegram-чат для швидкого зв’язку з
адміністрацією.
Такий модульний підхід до розробки програмних компонентів забезпечує
масштабованість, гнучкість і зручність подальшої підтримки та розвитку
вебзастосунку.
3.2 Тестування системи
У цьому розділі буде описано процес перевірки вебзастосунку моніторингу
кліматичних умов складу на різних рівнях для забезпечення його коректної роботи
та відповідності функціональним вимогам.
Модульне тестування охоплює перевірку окремих функцій Python-скриптів,
API-ендпоінтів Flask та React-компонентів в ізоляції. Інтеграційне тестування
спрямоване на перевірку коректної взаємодії між клієнтською частиною (React),
серверною частиною (Flask API) та базою даних (PostgreSQL). Системне
тестування охоплює перевірку всієї системи як єдиного цілого, включаючи
генерацію даних, візуалізацію, обробку критичних значень та локалізацію.
Нарешті, приймальне тестування проводиться для оцінки готовності системи до
використання кінцевими користувачами.
3.2.1 Модульне тестування
Модульне тестування є першим етапом перевірки якості програмного
забезпечення. Воно передбачає тестування окремих компонентів у відриві від
решти системи. У рамках дипломної роботи було протестовано:
функції генерації випадкових значень температури та вологості;
серверні ендпоінти Flask для отримання поточних даних, критичних меж
та збереження історії;
клієнтські React-компоненти для відображення даних, зміни теми,
мовної локалізації та динамічної зміни фону.
Для модульного тестування бекенду використовувалася бібліотека pytest, а
для React-компонентів — Jest та React Testing Library.
Основні кроки модульного тестування:
84
ЧДТУ 252155.008 ПЗ
Налаштування середовища тестування:
встановлення pytest, coverage, jest;
створення окремих тестових файлів.
Написання тестів:
тестування обробки критичних значень, генерації даних,
форматування дати, обробки локалізованих повідомлень.
Запуск та перевірка результатів:
виконання тестів через консольні команди;
аналіз покриття коду та фіксація результатів.
Таблиця 3.1
Результат модульного тестування
Модуль Тестовий Очікуваний Фактичний Статус
випадок результат результат
Генерація Дані в межах Дані
Генератор температури і 15–30 °C, 30– відповідають
даних вологості у 70% RH очікуваним Пройдено
(Python) допустимих межам
межах
Отримання Повертається JSON об’єкт
останніх об’єкт JSON із повертається з
Flask API показників актуальними коректними Пройдено
через значеннями значеннями
/api/data/latest
Збереження Дані збережено Дані успішно
PostgreSQL
нових записів успішно записано Пройдено
(SQLAlchemy)
у базу
85
ЧДТУ 252155.008 ПЗ
Продовження таблиці 3.1
Відображення Графік Графік
React
значень будується з відображається
компонент — Пройдено
температури правильними з реальними
графік
у вигляді лінії координатами значеннями
Можливість Надходження Повідомлення
надсилання повідомлення з доставлено в
повідомлення попередженням телеграм
Телеграм при Пройдено
перевищенні
критичного
значення
Перемикання Мова Мова
між змінюється, змінюється без
Зміна мови українською слова помилок Пройдено
та англійською змінюються
мовами
Результати модульного тестування показали, що всі основні функції
вебзастосунку — включно з генерацією даних, передачею через API,
відображенням на графіку, сповіщенням у Telegram та збереженням у базу даних
— працюють коректно відповідно до очікувань. Усі тестові сценарії були успішно
виконані, що свідчить про правильну реалізацію кожного окремого модуля
системи. Це дозволяє з упевненістю переходити до інтеграційного та системного
тестування, очікуючи стабільної роботи застосунку в цілому.
3.2.2 Інтеграційне тестування
Інтеграційне тестування охоплює перевірку взаємодії між компонентами:
генератором, бекендом, базою даних, клієнтом і телеграм.
86
ЧДТУ 252155.008 ПЗ
Мета — перевірити, як дані проходять весь шлях: від генерації до
відображення і сповіщення.
Основні кроки:
підготовка середовища: запуск контейнерів Flask, PostgreSQL та React
через Docker Compose.
ініціалізація тестових даних: симуляція даних з виходом за межі
допустимих значень.
визначення сценаріїв: наприклад, генерація критичних даних збереження
оновлення графіка повідомлення в телеграм.
аналіз поведінки системи в реальному циклі.
Таблиця 3.2
Результат інтеграційного тестування
Модуль Тестовий Очікуваний результат Фактичний Статус
випадок результат
Генератор Передача API отримує дані, Дані Пройдено
даних згенерованих відповідає 200 OK, отримано, API
Flask API даних до дані передані далі відповідає
бекенду успішно
Flask API Збереження Дані Пройдено
PostgreSQL отриманих Дані коректно збережено,
кліматичних записуються до дублювання
значень у базі відповідної таблиці або помилок
не виявлено
87
ЧДТУ 252155.008 ПЗ
Продовження таблиці 3.2
PostgreSQL Виведення Дані запитуються Дані Пройдено
React- актуальних через API, оновлюються
фронтенд значень оновлення динамічно, UI
температури і інтерфейсу реагує
вологості на відбувається коректно
головну
сторінку
Flask API Виявлення При перевищенні Реакція Пройдено
↔ перевищення меж бот формує відбулася:
Критичні порогів і сигнал: зміна фону, зміна дизайну,
межі ↔ генерація звукове сповіщення сигнал, запис в
Система повідомлення історію
сповіщень
Результати інтеграційного тестування показують, що основні функції
системи моніторингу кліматичних умов у складському приміщенні працюють
коректно при взаємодії між модулями: передача даних від генератора до Flask API
відбувається успішно, дані безпомилково зберігаються у базі PostgreSQL,
інтерфейс React відображає актуальні значення, а система сповіщень правильно
реагує на перевищення критичних меж. Усі тестові випадки виконано успішно, що
підтверджує надійність інтеграції компонентів. Наступним етапом є системне
тестування.
3.2.3 Системне тестування
Системне тестування є наступним етапом після інтеграційного і спрямоване
на перевірку функціонування всієї системи вебзастосунку як єдиного цілого. Його
метою є впевнитися, що застосунок відповідає встановленим функціональним та
нефункціональним вимогам і стабільно працює в умовах, наближених до
реального використання. У процесі тестування системи моніторингу кліматичних
88
ЧДТУ 252155.008 ПЗ
умов було перевірено ключові можливості: реєстрація користувача, збереження
даних у базі, відображення інформації у вебінтерфейсі та формування сповіщень
при перевищенні критичних меж. Середовище тестування включало всі необхідні
компоненти: фронтенд (React), бекенд (Flask API), базу даних (PostgreSQL),
механізм оповіщення та стилізований інтерфейс. Було створено тестові сценарії,
які охоплюють не лише основну функціональність, а й нефункціональні вимоги —
зручність користування, швидкість реакції, стабільність при передачі великого
обсягу даних. Усі тести, включно з перевіркою доступу користувача до функцій
після реєстрації та автоматичною генерацією повідомлень про перевищення
температури чи вологості, були успішно пройдені. Це підтверджує, що система
коректно обробляє критичні ситуації, зберігає та відображає дані, а також
забезпечує взаємодію між компонентами. Таким чином, система готова до
переходу на наступний етап — приймального тестування з боку кінцевих
користувачів.
Таблиця 3.3
Результат системного тестування
Модуль Тестовий Очікуваний Фактичний Статус
випадок результат результат
Реєстрація Реєстрація Користувача Користувача Пройдено
користувача нового створено, створено,
(React + користувача дані дані
Flask API) та збережено у записано до
збереження базі, доступ БД, доступ
даних до до функцій
персональних надано
функцій
відкрито
89
ЧДТУ 252155.008 ПЗ
Продовження таблиці 3.3
Повідомлення Генерація Повідомлення Реакція Пройдено
про критичні попередження сформовано, відбулася:
значення при інтерфейс фон змінено,
(Flask + перевищенні оновлено звук
Telegram API критичних (фон, звук, програно,
+ frontend) меж запис в повідомлення
температури історію) збережено
або вологості
3.2.4 Приймальне тестування
Приймальне тестування (Acceptance Testing) є завершальним етапом
перевірки перед впровадженням вебзастосунку в реальні умови експлуатації. Його
мета — підтвердити, що система відповідає очікуванням кінцевих користувачів і
всім вимогам, визначеним на етапі проєктування. Тестування проводилося за
участю майбутніх користувачів — співробітників складу та персоналу,
відповідального за контроль кліматичних умов.
Основні етапи приймального тестування:
Підготовка:
були визначені тестові сценарії, що охоплюють ключові
функціональні можливості застосунку, зокрема перегляд кліматичних
показників, автоматичне формування критичних сповіщень та робота
з історією попереджень.
Проведення тестування:
учасники виконували завдання, максимально наближені до реального
використання системи. Було перевірено коректність оновлення даних
на головній сторінці, своєчасність реакції системи на перевищення
критичних значень температури або вологості, а також доступність та
повноту історії попереджень.
90
ЧДТУ 252155.008 ПЗ
Аналіз результатів:
усі функції працювали відповідно до очікувань, критичні події
супроводжувалися візуальними та звуковими сигналами, історія
подій зберігалась і відображалась коректно. Користувачі оцінили
інтерфейс як зручний та зрозумілий.
Усунення недоліків:
незначні зауваження були враховані та виправлені. Повторне
тестування підтвердило стабільну роботу системи.
Приймальне тестування підтвердило, що вебзастосунок для моніторингу
температури і вологості складу повністю готовий до впровадження. Всі тестові
сценарії було успішно виконано, система відповідає вимогам, працює надійно й
забезпечує зручний інтерфейс для користувачів.
Таблиця 3.4
Приймальне тестування
Модуль Тестовий Очікуваний Фактичний Статус
випадок результат результат
Перегляд Перегляд Відображаються Дані Пройдено
кліматичних актуальних останні оновлюються в
даних показників значення з бази реальному часі,
температури даних, відображаються
та вологості інтерфейс коректно
на головній оновлюється
сторінці динамічно
91
ЧДТУ 252155.008 ПЗ
Продовження таблиці 3.4
Надсилання Автоматичне При Повідомлення Пройдено
сповіщень формування перевищенні сформовано,
повідомлення порогу фон і звук
про формується змінено,
перевищення повідомлення, записано до
критичних зміна історії
значень інтерфейсу,
звуковий сигнал
Перегляд Перегляд Виводиться Історія Пройдено
історії користувачем список усіх виводиться у
попереджень журналу попереджень із таблиці з усіма
попередніх зазначенням необхідними
критичних дати, часу, даними
подій параметра та
значення
3.3 Приклади впровадженого програмного комплексу
У цьому підрозділі наведено приклади реалізованих функцій та
можливостей вебзастосунку для моніторингу температури і вологості у
складському приміщенні. Вони демонструють, як працюють окремі компоненти
системи: генерація кліматичних даних, API для взаємодії з фронтендом,
автоматичне оновлення інтерфейсу, сповіщення про критичні значення,
збереження в базу даних, історія показників, локалізація та інше. Застосунок
розроблений із використанням технологій Python (Flask, SQLAlchemy),
PostgreSQL, React, з підтримкою Telegram API для надсилання критичних
сповіщень.
1 Головна сторінка застосунку
Після запуску користувач потрапляє на головну сторінку, де відображаються
актуальні показники температури і вологості, дата і час останнього оновлення,
92
ЧДТУ 252155.008 ПЗ
графік зміни значень, фон із візуальними індикаторами погодних умов (наприклад,
спека, дощ) та сповіщення про досягнення критичних меж.
Рисунок 3.19 – Головна сторінка застосунку з оновленими даними та фоном згідно
з кліматичним станом WEB-застосунку реалізації кліматичних умов на
складському приміщенні
2 Автоматичне оновлення даних
Дані надходять з бекенда через API Flask, де вони регулярно генеруються
скриптом. React-компоненти автоматично оновлюють графік та інтерфейс без
потреби перезавантаження сторінки.
Рисунок 3.20 – Динамічне оновлення графіка температури WEB-застосунку
реалізації кліматичних умов на складському приміщенні
93
ЧДТУ 252155.008 ПЗ
Рисунок 3.21 – Фонові зміни в інтерфейсі при зміні кліматичних умов (при
надмірній вологості) WEB-застосунку реалізації кліматичних умов на
складському приміщенні
Рисунок 3.22 – Фонові зміни в інтерфейсі при зміні кліматичних умов (при
перегріві) WEB-застосунку реалізації кліматичних умов на складському
приміщенні
94
ЧДТУ 252155.008 ПЗ
3 Сторінка статистики та історія показників
На сторінці "Статистика" можна переглядати таблицю з історією всіх
зібраних кліматичних даних. Таблиця має кольорові індикатори критичних
значень та підтримує перегляд у хронологічному порядку.
Рисунок 3.23 – Таблиця з усіма показниками WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Рисунок 3.24 – Підсвічені червоним значення, що виходять за межі
допустимого WEB-застосунку для реалізації кліматичних умов на складському
приміщенні
4 Багатомовність інтерфейсу
95
ЧДТУ 252155.008 ПЗ
Інтерфейс реалізовано з підтримкою української та англійської мов за
допомогою бібліотеки i18next. Це дозволяє зручно користуватись системою для
різних категорій персоналу.
Рисунок 3.25 – Перемикання мови інтерфейсу WEB-застосунку реалізації
кліматичних умов на складському приміщенні
Рисунок 3.26 – Відображення головної сторінки англійською мовою WEB-
застосунку реалізації кліматичних умов на складському приміщенні
96
ЧДТУ 252155.008 ПЗ
5 Кнопка «Про нас» та зв'язок з технічною підтримкою
У верхній панелі навігації розміщено кнопку «Про нас», що відкриває
сторінку з інформацією про застосунок, розробників, мету створення та основні
технічні характеристики.
На цій сторінці також розташована кнопка «Техпідтримка», натискання якої
перенаправляє користувача до Telegram служби підтримки. За допомогою цього
бота можна швидко повідомити про помилки, задати запитання або залишити
відгук.
97
ЧДТУ 252155.008 ПЗ
ВИСНОВОК ДО ТРЕТЬОГО РОЗДІЛУ
У третьому розділі було детально розглянуто процес розробки, тестування
та впровадження веб-застосунку для моніторингу кліматичних умов у
складському приміщенні. Застосунок реалізовано як повнофункціональний веб-
сервіс, що забезпечує візуалізацію, аналіз та оперативне реагування на критичні
зміни температури та вологості.
Основні етапи розробки.
1 Розробка програмного комплексу:
Було обґрунтовано вибір інструментів реалізації: Python (для генерації та
обробки даних), Flask (для побудови REST API), PostgreSQL із SQLAlchemy (для
збереження даних), React (для фронтенду), а також додаткових бібліотек для
побудови графіків, стилізації інтерфейсу та локалізації.
Розроблено структуру бекенду, що відповідає за генерацію випадкових
кліматичних значень, їх фіксацію, перевірку на відповідність критичним межам та
збереження в базі даних.
Створено гнучкий фронтенд, який реалізує автоматичне оновлення
кліматичних даних, виведення поточних показників, графік зміни температури та
вологості, а також сторінку статистики з таблицею даних та історією
попереджень.
Реалізовано зміну мов інтерфейсу (українська/англійська), перемикач теми
(світла/темна), а також адаптивний дизайн для використання на різних пристроях.
2 Тестування системи:
Проведено модульне тестування окремих частин системи: генерації даних,
передачі через API, перевірки критичних меж, роботи з базою даних.
Інтеграційне тестування дозволило перевірити взаємодію між фронтендом і
бекендом, включаючи автоматичне оновлення даних і їх вивід на графіку та в
таблиці.
Системне тестування підтвердило коректну роботу всього комплексу в
цілому, у тому числі при зміні мови, теми, стану мережі.
98
ЧДТУ 252155.008 ПЗ
Приймальне тестування із залученням потенційних користувачів (умовних
співробітників складу) підтвердило зручність інтерфейсу, правильність
відображення інформації та відповідність поставленим вимогам.
3 Приклади впровадженого програмного комплексу:
У розділі було наведено скріншоти та опис головної сторінки з виведенням
поточних показників, графіка змін, таблиці статистики, а також сторінки з
історією попереджень.
Описано реалізацію кнопки «Про нас», що містить загальну інформацію про
систему, а також інтеграцію кнопки технічної підтримки, яка веде до Telegram для
зворотного зв’язку.
Продемонстровано адаптацію дизайну до різних кліматичних умов (фон
змінюється залежно від стану: перегрів, підвищена вологість тощо), що забезпечує
візуальну ідентифікацію критичних ситуацій.
Загальний висновок
У результаті реалізовано повноцінний веб-застосунок для моніторингу
температури та вологості, що дозволяє:
отримувати актуальні кліматичні дані в режимі реального часу;
виявляти критичні ситуації на основі заданих меж;
переглядати історію попереджень та значень;
взаємодіяти через зручний та адаптивний інтерфейс.
Розроблена система демонструє високу стабільність, гнучкість та готовність
до використання в реальному складському середовищі. Застосунок повністю
відповідає вимогам до надійності, зручності та функціональності, а також може
слугувати основою для подальшого розширення — зокрема, інтеграції з
реальними датчиками, системами сповіщення та мобільними клієнтами.
99
ЧДТУ 252155.008 ПЗ
ВИСНОВКИ
Кваліфікаційна робота була присвячена розробці веб-застосунку для
моніторингу кліматичних умов (температури та вологості) у складському
приміщенні. Метою розробки було створення сучасного, інтуїтивно зрозумілого
інструменту для візуального та аналітичного контролю параметрів мікроклімату, з
можливістю сповіщення про перевищення критичних меж. У процесі реалізації
були проведені теоретичні дослідження, розробка архітектури програмного
комплексу, його реалізація та всебічне тестування.
У першому розділі було здійснено аналіз наукових та технічних джерел з
тематики моніторингу кліматичних умов, а також розглянуто існуючі рішення в
цій галузі. Особливу увагу було приділено порівнянню підходів до збору, обробки
та візуалізації кліматичних даних, методам побудови веб-застосунків, інтеграції з
API та базами даних. На основі аналізу обґрунтовано вибір технологій: Python,
Flask, PostgreSQL, React, Chart.js, i18next, react-toastify та інших бібліотек.
У другому розділі було описано процес проєктування програмного
забезпечення, формування функціональних вимог, розробку логічної та фізичної
архітектури системи. Було створено структурну модель бекенду (включаючи
генерацію, перевірку та збереження даних), REST API для обміну інформацією з
фронтендом, а також клієнтську частину з адаптивним і локалізованим
інтерфейсом. Реалізовано динамічну зміну тем (світла/темна), перемикач мови,
автоматичне оновлення показників, графік змін кліматичних даних, таблицю
статистики, історію попереджень, а також кнопку «Про нас» із вбудованим
посиланням на технічну підтримку в Telegram.
У третьому розділі детально висвітлено процес реалізації, тестування та
впровадження веб-застосунку. Було обґрунтовано використані технології, описано
реалізацію всіх компонентів: бекенд-частини, бази даних, механізмів перевірки
критичних значень та генерації даних. Проведено модульне тестування окремих
функцій, інтеграційне тестування взаємодії між модулями, системне тестування
загальної працездатності та приймальне тестування за участю потенційних
користувачів. У результаті тестування підтверджено правильність роботи всіх
100
ЧДТУ 252155.008 ПЗ
функцій, а також відповідність вимогам щодо продуктивності, надійності та
зручності інтерфейсу.
Результати виконаної кваліфікаційної роботи свідчать про успішне
досягнення поставленої мети та реалізацію повнофункціонального веб-застосунку,
орієнтованого на моніторинг температурно-вологісних умов у складському
приміщенні. Система продемонструвала здатність оперативно виявляти
відхилення від нормальних параметрів, своєчасно інформувати користувача про
потенційно критичні ситуації та забезпечувати стабільну й зручну взаємодію
завдяки інтуїтивному та сучасному інтерфейсу.
Розроблене рішення враховує актуальні вимоги кінцевих користувачів —
менеджерів складу, логістів, технічного персоналу — та забезпечує гнучкий
інструмент контролю, який адаптується до різних умов експлуатації. Застосунок
підтримує адаптивний дизайн, що дозволяє працювати з ним як на десктопних
пристроях, так і на мобільних, а також реалізує багатомовну підтримку,
можливість динамічної зміни тем оформлення (світлої та темної), та інтеграцію
механізмів сповіщення через візуальні та звукові сигнали. Це створює комфортне
середовище для користувача та підвищує загальну ефективність управління
мікрокліматом.
101
ЧДТУ 252155.008 ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1 Методи проектування [Електронний ресурс]. – Режим доступу:
https://cpsm.kpi.ua/Doc/konsp_suchasni_metodi.pdf
2 Telegram Bot API [Електронний ресурс]. – Режим доступу:
https://core.telegram.org/bots/api
3 JavaScript – What is JavaScript? [Електронний ресурс]. – Режим доступу:
https://aws.amazon.com/what-is/javascript/
4 Масштабованість в розробці ПЗ [Електронний ресурс]. – Режим доступу:
https://uk.itpedia.nl/2021/07/20/schaalbaarheid-als-software-requirement-
betekenis-en-definitie/
5 Як створити Telegram: посібник [Електронний ресурс]. – Режим доступу:
https://sendpulse.ua/knowledge-base/chatbot/telegram/create-telegram-
chatbot
6 Node.js Documentation [Електронний ресурс]. – Режим доступу:
https://nodejs.org/en/docs
7 React Documentation [Електронний ресурс]. – Режим доступу:
https://reactjs.org/docs/getting-started.html
8 Документація Flask [Електронний ресурс]. – Режим доступу:
https://flask.palletsprojects.com/en/latest/
9 Документація SQLAlchemy [Електронний ресурс]. – Режим доступу:
https://docs.sqlalchemy.org/
10 PostgreSQL Documentation [Електронний ресурс]. – Режим доступу:
https://www.postgresql.org/docs/
11 Документація i18next [Електронний ресурс]. – Режим доступу:
https://www.i18next.com/
12 React Toastify – Офіційна документація [Електронний ресурс]. – Режим
доступу: https://fkhadra.github.io/react-toastify/
13 Аналіз ризиків у розробці ПЗ [Електронний ресурс]. – Режим доступу:
https://skillsetter.io/blog/risk-management-ua
102
ЧДТУ 252155.008 ПЗ
14 Що таке SWOT-аналіз і як його проводити [Електронний ресурс]. –
Режим доступу: https://www.ba.in.ua/2023/06/30/shho-take-swot-analiz-ta-
yak-jogo-korrektno-provodyty/
15 Моделювання предметної області в ІТ [Електронний ресурс]. – Режим
доступу: https://dou.ua/forums/topic/42366/
16 Документація Python [Електронний ресурс]. – Режим доступу:
https://www.python.org/doc/
17 Документація Aiogram (Telegram) [Електронний ресурс]. – Режим
доступу: https://docs.aiogram.dev/
18 Документація Chart.js (для візуалізації графіків) [Електронний ресурс]. –
Режим доступу: https://www.chartjs.org/docs/latest/
19 Функціональні та нефункціональні вимоги [Електронний ресурс]. –
Режим доступу: https://www.guru99.com/uk/functional-vs-non-functional-
requirements.html
20 Побудова схем бази даних у Mongoose (аналогічно можна адаптувати під
SQLAlchemy) [Електронний ресурс]. – Режим доступу:
https://developer.mozilla.org/en-US/docs/Learn/Server-
side/Express_Nodejs/mongoose
21 UML: Основи моделювання [Електронний ресурс]. – Режим доступу:
https://docs.kde.org/trunk5/uk/umbrello/umbrello/uml-basics.html
22 Все про UML-діаграми [Електронний ресурс]. – Режим доступу:
http://www.znannya.org/?view=uml
23 Діаграми послідовності в UML [Електронний ресурс]. – Режим доступу:
https://www.maxzosim.com/sequence-diagrams/
24 UML: Компонентна діаграма [Електронний ресурс]. – Режим доступу:
https://www.mindonmap.com/uk/blog/uml-component-diagram/
25 Діаграма станів (скінченний автомат) [Електронний ресурс]. – Режим
доступу: https://www.guru99.com/uk/state-machine-transition-diagram.html
103
ДОДАТОК А
ЗАТВЕРДЖЕНО:
Зав. кафедрою ПЗАС, професор
_________________ Голуб С.В.
„____” ______________ 2025 р.
WEB-застосунок для реалізації кліматичних умов на складському
приміщенні
Специфікація
482. ЧДТУ 252155.008
Листів 2
Розробник ________________ Коцарев М.О.
Керівник ________________ Півень О.Б.
Черкаси 2025
ЧДТУ 252155.008 2
Позначення Найменування Примітки
Документація
482.ЧДТУ. 252155 12 01 Текст програми
482.ЧДТУ. 252155 34 01 Інструкція користувачеві
482.ЧДТУ. 252155 90 01 Графічні матеріали
105
ДОДАТОК Б
WEB-застосунок для реалізації кліматичних умов на складському приміщенні
Текст програми
482. ЧДТУ 252155 12 01
Листів 9
Розробник ________________ Коцарев М.О.
Черкаси 2025
482. ЧДТУ 252155 12 01
У зв’язку з великим обсягом програмного коду, в даній роботі наведено
лише його ключові фрагменти, необхідні для розуміння структури та логіки
реалізації. Повна версія коду доступна у репозиторії проєкту або може бути
надана за запитом.
Лістинг файлу app.jsх:
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Routes, NavLink } from
"react-router-dom";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
} from "recharts";
import "./App.css";
const sampleData = [
{ time: "10:00", temperature: 22, humidity: 40 },
{ time: "11:00", temperature: 23, humidity: 42 },
{ time: "12:00", temperature: 24, humidity: 44 },
{ time: "13:00", temperature: 25, humidity: 43 },
{ time: "14:00", temperature: 23, humidity: 41 },
];
// Температурні та вологісні межі для підсвічування
const TEMP_THRESHOLD = 25;
const HUMIDITY_THRESHOLD = 60;
function Home({ language, data }) {
// Визначення типу погоди для фону
107
482. ЧДТУ 252155 12 01
const latest = data.length ? data[data.length - 1] : {
temperature: 0, humidity: 0 };
let weatherClass = "weather-clear";
if (latest.temperature > TEMP_THRESHOLD) {
weatherClass = "weather-hot";
} else if (latest.humidity > HUMIDITY_THRESHOLD) {
weatherClass = "weather-rain";
}
return (
<div className={`content ${weatherClass}`}>
<h1>{language === "ua" ? "Моніторинг складу" : "Warehouse
Monitoring"}</h1>
<p>
{language === "ua"
? "Система моніторингу температури і вологості."
: "System for monitoring temperature and humidity."}
</p>
<div style={{ width: "100%", height: 400, marginTop: 20
}}>
<ResponsiveContainer>
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="time" />
<YAxis />
<Tooltip />
<Line
type="monotone"
dataKey="temperature"
stroke="#ff4500"
name={language === "ua" ? "Температура" :
"Temperature"}
/>
<Line
type="monotone"
dataKey="humidity"
108
482. ЧДТУ 252155 12 01
stroke="#1e90ff"
name={language === "ua" ? "Вологість" :
"Humidity"}
/>
</LineChart>
</ResponsiveContainer>
</div>
<a
href="https://t.me/Uk10p"
target="_blank"
rel="noopener noreferrer"
className="tech-support-link"
>
<button className="button tech-support-button">
{language === "ua" ? "Технічна підтримка" : "Tech
Support"} <span className="tg-icon"></span>
</button>
</a>
</div>
);
}
function About({ language }) {
return (
<div className="content">
<h1 style={{ marginBottom: 15 }}>
{language === "ua" ? "Про застосунок" : "About the
App"}
</h1>
<p style={{ fontSize: 18, lineHeight: "1.6",
marginBottom: 20 }}>
{language === "ua" ? (
<>
Цей застосунок призначений для відстеження
кліматичних умов на складі в
109
482. ЧДТУ 252155 12 01
реальному часі. <br />
<br />
<strong>Інструкції:</strong> <br />
1. Графік на головній сторінці відображає останні
значення температури та
вологості. <br />
2. Дані оновлюються автоматично кожні кілька
секунд. <br />
3. У разі виникнення помилок або некоректних даних,
будь ласка, звертайтесь
за технічною підтримкою. <br />
<br />
Якщо у вас виникли питання або проблеми — натисніть
кнопку «Технічна підтримка»
на головній сторінці, і ми допоможемо.
</>
) : (
<>
This app is designed to monitor warehouse climate
conditions in real-time.{" "}
<br />
<br />
<strong>Instructions:</strong> <br />
1. The chart on the Home page shows the latest
temperature and humidity values.
<br />
2. Data is updated automatically every few seconds.
<br />
3. If errors or incorrect data occur, please
contact technical support. <br />
<br />
If you have any questions or issues, please click
the "Tech Support" button on
the Home page, and we will assist you.
</>
)}
110
482. ЧДТУ 252155 12 01
</p>
</div>
);
}
function Statistics({ language, data }) {
return (
<div className="content">
<h1>{language === "ua" ? "Статистика" :
"Statistics"}</h1>
<table className="stats-table">
<thead>
<tr>
<th>{language === "ua" ? "Час" : "Time"}</th>
<th>{language === "ua" ? "Температура (°C)" :
"Temperature (°C)"}</th>
<th>{language === "ua" ? "Вологість (%)" :
"Humidity (%)"}</th>
</tr>
</thead>
<tbody>
{data.map((entry, idx) => (
<tr
key={idx}
className={
entry.temperature > TEMP_THRESHOLD ||
entry.humidity > HUMIDITY_THRESHOLD
? "highlight"
: ""
}
>
<td>{entry.time}</td>
<td>{entry.temperature}</td>
<td>{entry.humidity}</td>
</tr>
))}
111
482. ЧДТУ 252155 12 01
</tbody>
</table>
</div>
);
}
function Clock() {
const [time, setTime] = useState(new Date());
useEffect(() => {
const timerId = setInterval(() => setTime(new Date()),
1000);
return () => clearInterval(timerId);
}, []);
return (
<div className="clock">
{time.toLocaleTimeString([], { hour: '2-digit', minute:
'2-digit', second: '2-digit' })}
</div>
);
}
function App() {
const [language, setLanguage] = useState("ua");
const [data, setData] = useState(sampleData);
useEffect(() => {
const interval = setInterval(() => {
setData((prevData) => {
const lastTime = prevData.length ?
prevData[prevData.length - 1].time : "00:00";
// Парсимо час у форматі "HH:MM"
let [hours, minutes] = lastTime.split(":").map(Number);
minutes += 1; // додаємо 1 хвилину
if (minutes >= 60) {
112
482. ЧДТУ 252155 12 01
minutes = 0;
hours = (hours + 1) % 24;
}
const newTime = `${hours.toString().padStart(2,
"0")}:${minutes
.toString()
.padStart(2, "0")}`;
// Генеруємо нові випадкові значення температури і
вологості (плавні зміни)
const lastEntry = prevData[prevData.length - 1];
const newTemperature =
Math.min(Math.max(lastEntry.temperature + (Math.random() * 2 - 1),
15), 35);
const newHumidity =
Math.min(Math.max(lastEntry.humidity + (Math.random() * 4 - 2), 20),
80);
// Обмежуємо довжину масиву до 20 записів
const newData = [
...prevData,
{ time: newTime, temperature:
Math.round(newTemperature), humidity: Math.round(newHumidity) },
];
if (newData.length > 20) {
newData.shift();
}
return newData;
});
}, 5000);
return () => clearInterval(interval);
}, []);
const toggleLanguage = () => {
setLanguage(language === "ua" ? "en" : "ua");
};
return (
113
482. ЧДТУ 252155 12 01
<Router>
<div className="container">
<Clock />
<nav className="navbar">
<NavLink to="/" className={({ isActive }) => "nav-
button" + (isActive ? " active" : "")}>
{language === "ua" ? "Головна" : "Home"}
</NavLink>
<NavLink to="/about" className={({ isActive }) =>
"nav-button" + (isActive ? " active" : "")}>
{language === "ua" ? "Про нас" : "About"}
</NavLink>
<NavLink to="/statistics" className={({ isActive })
=> "nav-button" + (isActive ? " active" : "")}>
{language === "ua" ? "Статистика" : "Statistics"}
</NavLink>
<button onClick={toggleLanguage} className="lang-
button">
{language === "ua" ? "EN" : "UA"}
</button>
</nav>
<Routes>
<Route path="/" element={<Home language={language}
data={data} />} />
<Route path="/about" element={<About
language={language} />} />
<Route path="/statistics" element={<Statistics
language={language} data={data} />} />
</Routes>
</div>
</Router>
);
export default App;
114
ДОДАТОК В
WEB-застосунок для реалізації кліматичних умов на складському приміщенні
Інструкція користувачеві
482. ЧДТУ 252155 34 01
Листів 3
Розробник ________________ Коцарев М.О.
Черкаси 2024
482. ЧДТУ 252155 34 01
Цей вебзастосунок розроблено для автоматизованого моніторингу
кліматичних умов у складських приміщеннях. Його мета — забезпечити своєчасне
виявлення критичних значень температури та вологості для запобігання псуванню
товарів або виникненню небезпечних умов.
Реєстрація користувачів
Запуск застосунку:
Відкрийте вебзастосунок у браузері;
Перейдіть на сторінку реєстрації;
Заповніть форму, що включає:
Ім’я, прізвище, по батькові;
Дату народження;
Посаду або тип користувача (наприклад, адміністратор, оператор);
Контактний номер телефону;
Електронну пошту;
Пароль для входу;
Після надсилання форми дані проходять верифікацію, і користувач отримує
доступ до системи.
Основні функції системи
Перегляд поточних показників
На головній сторінці користувач бачить актуальні значення температури та
вологості.
Дані оновлюються автоматично кожні кілька секунд.
У разі перевищення критичних меж показники виділяються червоним
кольором.
Графік змін
Вебінтерфейс відображає графік зміни температури та вологості з часом.
Користувач може обрати часовий діапазон для перегляду (наприклад,
останні 24 години).
Сторінка статистики
Містить таблицю з усіма збереженими вимірюваннями;
116
482. ЧДТУ 252155 34 01
Підсвічує критичні значення;
Доступна функція сортування та пошуку за датою.
Критичні значення та повідомлення
Граничні межі температури та вологості можуть бути налаштовані в
особистому кабінеті користувача.
При досягненні критичних значень система автоматично:
змінює фон інтерфейсу (наприклад, для перегріву або для надмірної
вологості);
відображає попереджувальне повідомлення;
фіксує інцидент в історії попереджень.
Панель налаштувань
Доступна тільки авторизованим користувачам;
Дозволяє змінювати:
граничні межі температури та вологості;
мову інтерфейсу (UA/EN);
тему оформлення (світла/темна).
Підтримка мультимовності та дизайну
Інтерфейс доступний українською та англійською мовами;
Підтримується адаптивний дизайн для роботи на комп’ютерах, планшетах і
смартфонах;
Вебзастосунок має погодні фонові зображення відповідно до кліматичного
стану.
117
ДОДАТОК Г
WEB-застосунок для реалізації кліматичних умов на складському приміщенні
Графічні матеріали
482. ЧДТУ. 252155 90 01
Листів 11
Розробник ________________ Коцарев М.О.
Черкаси 2024
482. ЧДТУ. 252155 90 01
Рисунок Г1 Слайд 1
Рисунок Г2 – Слайд 2
119
482. ЧДТУ. 252155 90 01
Рисунок Г3 – Слайд 3
Рисунок Г4 – Слайд 4
120
482. ЧДТУ. 252155 90 01
Рисунок Г5 – Слайд 5
Рисунок Г6 – Слайд 6
121
482. ЧДТУ. 252155 90 01
Рисунок Г7 – Слайд 7
Рисунок Г8 – Слайд 8
122
482. ЧДТУ. 252155 90 01
Рисунок Г9 – Слайд 9
Рисунок Г10 – Слайд 10
123
482. ЧДТУ. 252155 90 01
Рисунок Г11 – Слайд 11
Рисунок Г12 – Слайд 12
124
482. ЧДТУ. 252155 90 01
Рисунок Г13 – Слайд 13
Рисунок Г14 – Слайд 14
125
482. ЧДТУ. 252155 90 01
Рисунок Г15 – Слайд 15
Рисунок Г16 – Слайд 16
126
482. ЧДТУ. 252155 90 01
Рисунок Г17 – Слайд 17
Рисунок Г18 – Слайд 18
127
482. ЧДТУ. 252155 90 01
Рисунок Г19 – Слайд 19
Рисунок Г20 – Слайд 20
128