ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/9692Full metadata record
| DC Field | Value | Language |
|---|---|---|
| dc.contributor.advisor | Дяченко, Петро Васильович | - |
| dc.contributor.author | Янченко, Вадим Олександрович | - |
| dc.date.accessioned | 2026-06-22T14:03:47Z | - |
| dc.date.available | 2026-06-22T14:03:47Z | - |
| dc.date.issued | 2026-06-11 | - |
| dc.identifier.uri | https://er.chdtu.edu.ua/handle/ChSTU/9692 | - |
| dc.description.abstract | Актуальність теми полягає у необхідності автоматизації процесів складського обліку та управління товарними ресурсами у магазинах комп’ютерної техніки. Сучасні підприємства потребують ефективних WEB-орієнтованих інформаційних систем, які забезпечують швидкий доступ до даних, контроль залишків товару, автоматизацію складських операцій та формування аналітичної звітності. Використання сучасних web-технологій дозволяє створити багатокористувацьку систему з централізованим доступом до інформації, високою продуктивністю та адаптивним користувацьким інтерфейсом. Розробка подібних програмних продуктів сприяє підвищенню ефективності роботи підприємств, оптимізації бізнес-процесів та зменшенню ризику виникнення помилок під час ведення складського обліку. Метою роботи є розробка WEB-орієнтованої інформаційної системи «СКЛАД» для магазину комп’ютерної техніки з реалізацією функцій обліку товарів, контролю складських операцій та адміністрування системи. | uk_UA |
| dc.language.iso | uk | uk_UA |
| dc.subject | WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА | uk_UA |
| dc.subject | СКЛАДСЬКИЙ ОБЛІК | uk_UA |
| dc.subject | WEB-ЗАСТОСУНОК | uk_UA |
| dc.subject | MONGODB | uk_UA |
| dc.subject | CRUD | uk_UA |
| dc.subject | АВТОМАТИЗАЦІЯ СКЛАДУ | uk_UA |
| dc.subject | JWT | uk_UA |
| dc.subject | БАЗА ДАНИХ. | uk_UA |
| dc.title | WEB-орієнтована інформаційна система "СКЛАД" для магазину комп’ютерної техніки | uk_UA |
| dc.type | Bachelor Thesis | uk_UA |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) | |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Янченко Вадим_КН-2201_2025-2026.pdf Restricted Access | 4.97 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 курсу, групи КН-2201
спеціальності 122 (F3) «Комп’ютерні науки»
(шифр і назва спеціальності)
Освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування»
Вадим ЯНЧЕНКО
Керівник Петро ДЯЧЕНКО
(ім’я та прізвище)
Рецензент Костянтин БЕЗДОЛЕНКО
(ім’я та прізвище)
Черкаси 2026 року
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2026 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Янченку Вадиму Олександрович
(прізвище, ім‘я, по батькові)
1. Тема роботи WEB-орієнтована інформаційна система "СКЛАД" для магазину
комп’ютерної техніки
Керівник роботи Дяченко Петро Васильович к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від « 12 » березня 2026 р. № 56/03-03.
2. Строк подання студентом роботи «10» червня 2026 року
3. Вихідні дані до роботи:
Звіт з переддипломної практики.
Магазин комп’ютерної техніки
Сайти аналоги. Робота з даних.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Аналіз предметної області та сучасних web-технологій
4.2. Проєктування web-орієнтованої інформаційної системи «склад»
4.3. Програмна реалізація web-орієнтованої інформаційної системи
4.4. Тестування та аналіз результатів роботи системи
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 62297-01.
5.2 . Додаток Б . Лістинг ко ду програми.
5.3. Додаток В. Інтерфейс користувача WEB-застосунку.
5.4. Додаток Г. Результати тестування програмної системи.
5.5. Презентація у вигляді 18 слайдів.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
консультанта завдання видав завдання прийняв
7. Дата видачі завдання 12.01.2026 р.
КАЛЕНДАРНИЙ ПЛАН
№ з/п Назва етапів кваліфікаційної роботи бакалавра Строк виконання
етапів роботи Примітка
1 Видача завдання на кваліфікаційну роботу до 15.01.2026 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та
предмету дослідження. до 12.02.2026 Виконано
3 Написання теоретичного розділу кваліфікаційної до 18.03.2026 Виконано
роботи бакалавра.
4 Написання аналітичного розділу (аналіз об’єкту
й предмету дослідження). до 01.04.2026 Виконано
5 Написання практичних розділів й висновків по Виконано
роботі. до 01.05.2026
6 Передзахист кваліфікаційної роботи бакалавра Виконано
до 03.06.2026
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 10.06. 2026 Виконано
8 Захист кваліфікаційної роботи бакалавра. 10.06.2026 Виконано
Студент _________________ _____ / Вадим ЯНЧЕНКО /
(підпис) ПІБ
Керівник роботи ________________________ / Петро ДЯЧЕНКО /
(підпис) ПІБ
РЕФЕРАТ
Кваліфікаційна робота бакалавра: 113 с., 29 рис., 4 табл., 28 джерел, 5
додатків.
Актуальність теми. Актуальність теми полягає у необхідності
автоматизації процесів складського обліку та управління товарними ресурсами
у магазинах комп’ютерної техніки. Сучасні підприємства потребують
ефективних WEB-орієнтованих інформаційних систем, які забезпечують
швидкий доступ до даних, контроль залишків товару, автоматизацію
складських операцій та формування аналітичної звітності. Використання
сучасних web-технологій дозволяє створити багатокористувацьку систему з
централізованим доступом до інформації, високою продуктивністю та
адаптивним користувацьким інтерфейсом. Розробка подібних програмних
продуктів сприяє підвищенню ефективності роботи підприємств, оптимізації
бізнес-процесів та зменшенню ризику виникнення помилок під час ведення
складського обліку.
Метою роботи є розробка WEB-орієнтованої інформаційної системи
«СКЛАД» для магазину комп’ютерної техніки з реалізацією функцій обліку
товарів, контролю складських операцій та адміністрування системи.
Завдання кваліфікаційної роботи бакалавра:
Для досягнення поставленої мети необхідно вирішити такі завдання:
− провести аналіз сучасних WEB-орієнтованих систем складського
обліку;
− дослідити сучасні технології та засоби web-розробки;
− проаналізувати особливості автоматизації складських процесів;
− спроєктувати архітектуру інформаційної системи;
− розробити структуру бази даних;
− реалізувати серверну частину WEB-застосунку;
− створити клієнтський інтерфейс користувача;
− реалізувати систему авторизації та розмежування доступу;
− реалізувати модулі обліку товарів та управління складом;
− провести тестування та аналіз ефективності роботи системи.
Об’єкт дослідження: процес автоматизації складського обліку магазину
комп’ютерної техніки.
Предмет дослідження: методи та засоби розробки WEB-орієнтованих
інформаційних систем складського обліку.
Методи дослідження: методи об’єктно-орієнтованого програмування,
проєктування інформаційних систем та сучасні технології WEB-розробки. Для
створення програмної системи використано мову програмування JavaScript,
платформу Node.js та бібліотеку React. Для реалізації серверної частини
застосовано Express.js, а для зберігання даних – MongoDB. Для забезпечення
захисту даних користувачів використано технологію JWT Authentication. Під
час створення користувацького інтерфейсу використано HTML5, CSS3 та
React-компоненти.
У процесі виконання роботи проведено аналіз сучасних WEB-
орієнтованих систем складського обліку та досліджено особливості
автоматизації роботи магазинів комп’ютерної техніки. Виконано аналіз
сучасних технологій web-розробки та обґрунтовано вибір програмних засобів
для реалізації проєкту.
Розроблено архітектуру WEB-орієнтованої інформаційної системи, що
включає модулі авторизації, управління товарами, обліку складських операцій,
формування звітності та адміністрування системи. Реалізовано механізми
додавання, редагування, видалення та пошуку товарів, а також систему
контролю залишків продукції. Забезпечено адаптивний інтерфейс користувача
та підтримку багатокористувацького режиму роботи.
У результаті тестування встановлено, що розроблена інформаційна
система забезпечує стабільну роботу серверної та клієнтської частин, коректне
виконання CRUD-операцій, ефективний пошук товарів та зручний
користувацький інтерфейс. Реалізовані механізми авторизації та захисту даних
забезпечують безпечну роботу користувачів із системою.
Апробація результатів роботи. Основні положення і результати
кваліфікаційної роботи бакалавра доповідалися і були обговорені на
конференції «День студентської науки кафедри КНСА», 22 квітня 2026 року,
Черкаси, Україна.
Практичне значення отриманих результатів полягає у можливості
використання розробленої WEB-орієнтованої інформаційної системи для
автоматизації діяльності магазинів комп’ютерної техніки, оптимізації процесів
складського обліку та підвищення ефективності управління товарними
ресурсами.
Ключові слова: WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА,
СКЛАДСЬКИЙ ОБЛІК, WEB-ЗАСТОСУНОК, REACT, NODE.JS, EXPRESS.JS,
MONGODB, JWT, CRUD, ІНФОРМАЦІЙНА СИСТЕМА, АВТОМАТИЗАЦІЯ
СКЛАДУ, БАЗА ДАНИХ.
ABSTRACT
The qualification work of bachelor contains: 113 pages, 29 figures, 4 tables,
28 sources, 5 appendices.
Actuality of theme. The relevance of the topic lies in the necessity of
automating inventory accounting and warehouse management processes in computer
hardware stores. Modern enterprises require efficient web-oriented information
systems that provide fast access to data, inventory control, automation of warehouse
operations, and analytical reporting generation. The use of modern web technologies
makes it possible to create a multi-user system with centralized access to information,
high performance, and an adaptive user interface. The development of such software
products contributes to increasing enterprise efficiency, optimizing business
processes, and reducing the risk of errors during warehouse accounting operations.
The purpose of the work is to develop a web-oriented information system
“WAREHOUSE” for a computer hardware store with the implementation of
inventory accounting functions, warehouse operation control, and system
administration.
Objectives of qualifying work:
To achieve the stated goal, the following tasks must be solved:
− analyze modern web-oriented warehouse management systems;
− investigate modern technologies and tools for web development;
− analyze the features of warehouse process automation;
− design the architecture of the information system;
− develop the database structure;
− implement the server-side part of the web application;
− create the client-side user interface;
− implement an authorization and access control system;
− implement inventory and warehouse management modules;
− perform testing and efficiency analysis of the system.
The object of research: the process of warehouse accounting automation in a
computer hardware store.
The subject of research: methods and tools for developing web-oriented
warehouse management information systems.
Research methods: The thesis uses methods of object-oriented programming,
information system design, and modern web development technologies. JavaScript,
the Node.js platform, and the React library were used to create the software system.
Express.js was used for the server-side implementation, and MongoDB was used for
data storage. JWT Authentication technology was applied to ensure user data
security. HTML5, CSS3, and React components were used to create the user
interface.
During the research, modern web-oriented warehouse management systems
were analyzed, and the features of automation for computer hardware stores were
investigated. Modern web development technologies were analyzed, and the choice
of software tools for project implementation was substantiated.
The architecture of the web-oriented information system was developed,
including authorization modules, product management, warehouse operation
accounting, reporting generation, and system administration. Mechanisms for adding,
editing, deleting, and searching products were implemented, as well as an inventory
control system. An adaptive user interface and support for multi-user operation were
provided.
As a result of testing, it was established that the developed information system
ensures stable operation of both the server-side and client-side components, correct
execution of CRUD operations, efficient product searching, and a user-friendly
interface. The implemented authorization and data protection mechanisms ensure
secure user interaction with the system.
Approval of the results of work. The main provisions and results of the
bachelor’s qualification thesis were presented and discussed at the conference
“Student Science Day of the CNSA Department”, April 22, 2026, Cherkasy, Ukraine.
The practical significance of the obtained results lies in the possibility of using
the developed web-oriented information system for automating the activities of
computer hardware stores, optimizing warehouse accounting processes, and
improving the efficiency of inventory resource management.
Keywords: WEB-ORIENTED INFORMATION SYSTEM, WAREHOUSE
MANAGEMENT, WEB APPLICATION, REACT, NODE.JS, EXPRESS.JS,
MONGODB, JWT, CRUD, INFORMATION SYSTEM, WAREHOUSE
AUTOMATION, DATABASE.
9
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ 11
ВСТУП 12
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА СУЧАСНИХ WEB-ТЕХНОЛОГІЙ 15
1.1 Аналіз особливостей складського обліку у магазинах комп’ютерної
техніки 15
1.2 Аналіз сучасних WEB-орієнтованих систем управління складом 18
1.3 Аналіз методів автоматизації складських процесів 20
1.4 Огляд сучасних технологій WEB-розробки 23
1.5 Аналіз можливостей платформи Node.js та React 24
1.6 Аналіз засобів програмування та баз даних 26
1.7 Постановка задачі дослідження 28
Висновки до розділу 1 31
2 ПРОЄКТУВАННЯ WEB-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ СИСТЕМИ
«СКЛАД» 32
2.1 Загальна архітектура програмної системи 32
2.2 Проєктування структури WEB-застосунку 36
2.3 Моделювання системи засобами UML 39
2.4 Проєктування структури бази даних 43
2.5 Проєктування модулів складського обліку 49
2.6 Проєктування користувацького інтерфейсу системи 53
2.7 Вибір технологій реалізації 58
Висновки до розділу 2 63
3 ПРОГРАМНА РЕАЛІЗАЦІЯ WEB-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ
СИСТЕМИ 64
3.1 Реалізація серверної частини системи 64
3.2 Реалізація клієнтської частини WEB-застосунку 68
3.3 Реалізація системи авторизації та захисту даних 69
3.4 Реалізація CRUD-операцій для роботи з товарами 71
10
3.5 Реалізація системи пошуку та фільтрації 73
3.6 Реалізація модулів аналітики та звітності 74
3.7 Інтеграція компонентів програмної системи 75
Висновки до розділу 3 76
4 ТЕСТУВАННЯ ТА АНАЛІЗ РЕЗУЛЬТАТІВ РОБОТИ СИСТЕМИ 78
4.1 Методика тестування програмного забезпечення 78
4.2 Тестування функціональних можливостей системи 81
4.3 Аналіз продуктивності та ефективності роботи системи 83
4.4 Аналіз якості користувацького інтерфейсу 84
4.5 Оцінка результатів роботи програмної системи 86
Висновки до розділу 4 87
ВИСНОВКИ 88
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 90
ДОДАТОК А. Специфікація 482.ЧДТУ. 62297-01. 92
ДОДАТОК Б. Лістинг коду програми 94
ДОДАТОК В. Інтерфейс користувача WEB-застосунку 98
ДОДАТОК Г. Результати тестування програмної системи 102
11
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І
ТЕРМІНІВ
API (Application Programming Interface) – програмний інтерфейс
застосунку;
CRUD (Create, Read, Update, Delete) – базові операції створення, читання,
оновлення та видалення даних;
CSS (Cascading Style Sheets) – каскадні таблиці стилів;
DBMS (Database Management System) – система управління базами даних;
DOM (Document Object Model) – об’єктна модель документа;
Express.js – фреймворк для розробки серверних застосунків на Node.js;
Git – система контролю версій;
IDE (Integrated Development Environment) – середовище розробки;
JSON (JavaScript Object Notation) – текстовий формат обміну даними;
MongoDB – документоорієнтована система управління базами даних;
Node.js – програмна платформа для виконання JavaScript з боку сервера;
NoSQL – нереляційний тип баз даних;
Postman – програмний засіб тестування API;
React – JavaScript-бібліотека для створення користувацьких інтерфейсів;
REST API (Representational State Transfer Application Programming
Interface) – архітектурний стиль побудови програмних інтерфейсів;
SPA (Single Page Application) – односторінковий web-застосунок;
SQL (Structured Query Language) – мова структурованих запитів;
UI (User Interface) – користувацький інтерфейс;
UML (Unified Modeling Language) – уніфікована мова моделювання;
URL (Uniform Resource Locator) – уніфікований локатор ресурсу;
UX (User Experience) – користувацький досвід;
WEB-застосунок – програмна система, що функціонує через web-браузер;
БД – база даних;
ІС – інформаційна система;
СУБД – система управління базами даних;
ТЗ – технічне завдання.
12
ВСТУП
В сучасних умовах розвитку інформаційних технологій та цифровізації
бізнес-процесів важливого значення набуває автоматизація діяльності
підприємств різних галузей. Одним із ключових напрямів автоматизації є
впровадження інформаційних систем для управління складським обліком та
контролю товарних ресурсів. Особливо актуальною дана проблема є для
магазинів комп’ютерної техніки, діяльність яких пов’язана з обробкою великої
кількості товарних позицій, постійним оновленням асортименту, необхідністю
контролю залишків продукції та оперативного формування звітної інформації.
Традиційні методи ведення складського обліку, що базуються на
використанні паперової документації або застарілих локальних програмних
продуктів, не забезпечують достатнього рівня швидкодії, масштабованості та
надійності. Вони ускладнюють процес обробки інформації, збільшують ризик
виникнення помилок та не дозволяють забезпечити ефективну взаємодію між
працівниками підприємства. У зв’язку з цим виникає необхідність створення
сучасних WEB-орієнтованих інформаційних систем, які забезпечують
централізоване зберігання даних, багатокористувацький режим роботи,
оперативний доступ до інформації та високий рівень безпеки.
WEB-орієнтовані інформаційні системи є одним із найбільш
перспективних напрямів розвитку програмного забезпечення. Використання
сучасних web-технологій дозволяє створювати програмні системи з адаптивним
інтерфейсом користувача, підтримкою віддаленого доступу та можливістю
інтеграції з іншими інформаційними ресурсами. Такі системи забезпечують
ефективну автоматизацію бізнес-процесів та дозволяють значно підвищити
продуктивність роботи підприємств.
Актуальність теми кваліфікаційної роботи бакалавра полягає у
необхідності створення сучасної WEB-орієнтованої інформаційної системи для
автоматизації складського обліку магазину комп’ютерної техніки. Розробка
такої системи дозволить оптимізувати процеси обліку товарів, забезпечити
13
контроль складських операцій, автоматизувати формування звітності та
підвищити ефективність управління товарними ресурсами.
Метою кваліфікаційної роботи бакалавра є розробка WEB-орієнтованої
інформаційної системи «СКЛАД» для магазину комп’ютерної техніки з
реалізацією функцій обліку товарів, контролю складських операцій та
адміністрування системи.
Для досягнення поставленої мети необхідно вирішити такі завдання:
– провести аналіз предметної області та сучасних WEB-орієнтованих
систем складського обліку;
– дослідити сучасні технології та засоби WEB-розробки;
– проаналізувати методи автоматизації складських процесів;
– спроєктувати архітектуру програмної системи;
– розробити структуру бази даних;
– реалізувати серверну та клієнтську частини WEB-застосунку;
– реалізувати систему авторизації та захисту даних;
– створити модулі управління товарами та складськими операціями;
– провести тестування та аналіз ефективності роботи системи.
Об’єктом дослідження є процес автоматизації складського обліку
магазину комп’ютерної техніки.
Предметом дослідження є методи та засоби розробки WEB-орієнтованих
інформаційних систем складського обліку.
У процесі виконання роботи використано методи об’єктно-орієнтованого
програмування, аналізу та проєктування інформаційних систем, моделювання
баз даних та сучасні технології WEB-розробки.
Практичне значення отриманих результатів полягає у створенні
функціональної WEB-орієнтованої інформаційної системи, яка може бути
використана для автоматизації складського обліку та управління товарними
ресурсами магазинів комп’ютерної техніки. Використання розробленої системи
дозволить підвищити ефективність роботи персоналу, зменшити кількість
помилок під час обробки даних та забезпечити оперативний контроль за станом
товарних запасів.
14
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА СУЧАСНИХ WEB-
ТЕХНОЛОГІЙ
У першому розділі кваліфікаційної роботи бакалавра виконано аналіз
предметної області складського обліку у магазинах комп’ютерної техніки та
досліджено сучасні WEB-технології, які використовуються для створення
інформаційних систем автоматизації бізнес-процесів.
У розділі розглянуто особливості організації складського обліку
комп’ютерної техніки, проаналізовано основні процеси обробки товарів,
контролю залишків, формування замовлень та ведення складської документації.
Визначено основні проблеми традиційного способу ведення складського
обліку, серед яких складність контролю руху товарів, ймовірність виникнення
помилок під час ручного введення інформації та значні витрати часу на обробку
даних.
Також у розділі проведено аналіз сучасних WEB-орієнтованих систем
управління складом та методів автоматизації складських процесів. Досліджено
основні функціональні можливості існуючих програмних рішень, їх переваги та
недоліки, а також визначено вимоги до розробки власної WEB-орієнтованої
інформаційної системи «СКЛАД».
Окрему увагу приділено огляду сучасних технологій WEB-розробки,
зокрема платформ Node.js та React, а також засобів програмування і систем
управління базами даних. Обґрунтовано вибір стеку технологій MERN
(MongoDB, Express.js, React, Node.js) для реалізації програмної системи.
У процесі дослідження визначено основні функціональні модулі
майбутньої системи, сформовано вимоги до архітектури WEB-застосунку та
виконано постановку задачі дослідження. Результати проведеного аналізу стали
основою для подальшого проєктування та програмної реалізації WEB-
орієнтованої інформаційної системи складського обліку для магазину
комп’ютерної техніки.
15
1.1 Аналіз особливостей складського обліку у магазинах
комп’ютерної техніки.
Складський облік є одним із найважливіших елементів діяльності
сучасних торговельних підприємств. Для магазинів комп’ютерної техніки
ефективне управління товарними запасами має особливе значення, оскільки
така продукція характеризується великою кількістю номенклатурних позицій,
швидким моральним старінням техніки та постійним оновленням асортименту.
Магазини комп’ютерної техніки працюють із різними категоріями
товарів, серед яких ноутбуки, персональні комп’ютери, комплектуючі,
мережеве обладнання, периферійні пристрої та аксесуари. Кожна товарна
позиція має власні характеристики: модель, виробника, серійний номер,
технічні параметри, гарантійний термін та ціну. Це значно ускладнює процес
ведення складського обліку та потребує використання спеціалізованих
інформаційних систем.
Основні процеси складського обліку у магазинах комп’ютерної техніки
наведено на рисунку 1.1.
Рисунок 1.1 – Основні процеси складського обліку магазину комп’ютерної
техніки.
До основних процесів складського обліку належать:
16
– приймання товару;
– облік надходжень;
– контроль залишків продукції;
– ведення інформації про товари;
– інвентаризація;
– формування звітності;
– списання товару;
– контроль переміщення продукції.
У більшості невеликих підприємств складський облік досі ведеться за
допомогою електронних таблиць або локальних програмних продуктів, що
мають обмежений функціонал. Такий підхід має низку недоліків:
– високий ризик помилок під час введення даних;
– складність синхронізації інформації;
– відсутність централізованого доступу;
– обмежені можливості формування звітності;
– низький рівень захисту даних.
Особливості організації складського обліку у магазинах комп’ютерної
техніки наведено на рисунку 1.2.
Рисунок 1.2 – Особливості складського обліку комп’ютерної техніки
17
На рисунку 1.2 зображено основні особливості складського обліку
комп’ютерної техніки. У центральній частині схеми представлено склад із
комп’ютерним обладнанням, навколо якого розміщено ключові характеристики
процесу обліку товарів у магазинах комп’ютерної техніки.
Як показано на рисунку, однією з головних особливостей є велика
номенклатура товарів, що включає ноутбуки, комплектуючі, периферійні
пристрої, мережеве обладнання та аксесуари. Кожна товарна позиція має власні
технічні характеристики, серійні номери, гарантійні параметри та інші
атрибути, які необхідно враховувати під час ведення обліку.
На рисунку також відображено необхідність постійного оновлення
асортименту комп’ютерної техніки через швидкий розвиток інформаційних
технологій та появу нових моделей обладнання. Окрему увагу приділено
контролю залишків продукції у режимі реального часу, що дозволяє оперативно
відстежувати наявність товарів на складі.
Крім того, схема демонструє важливість ведення обліку серійних номерів
для гарантійного обслуговування та контролю руху товарів. Також показано
особливості зберігання комп’ютерної техніки, зокрема необхідність
дотримання відповідних температурних умов та захисту обладнання від пилу й
вологи.
Рисунок 1.2 наочно демонструє складність організації складського обліку
комп’ютерної техніки та підтверджує необхідність використання сучасної
WEB-орієнтованої інформаційної системи для автоматизації процесів
управління товарними ресурсами.
Сучасні WEB-орієнтовані інформаційні системи дозволяють
автоматизувати більшість складських операцій, забезпечити централізоване
зберігання даних та підтримку багатокористувацького режиму роботи.
Використання таких систем сприяє підвищенню ефективності роботи
підприємства та зменшенню часу обробки інформації.
18
1.2 Аналіз сучасних WEB-орієнтованих систем управління складом
На сучасному етапі розвитку інформаційних технологій існує велика
кількість WEB-орієнтованих систем управління складом. Такі системи
забезпечують автоматизацію складських процесів, ведення обліку товарів та
контроль руху продукції.
До найбільш поширених систем управління складом належать:
– Zoho Inventory;
– Odoo Inventory;
– ERPNext;
– Microsoft Dynamics 365;
– SAP Warehouse Management.
Приклад сучасної WEB-орієнтованої системи складського обліку
наведено на рисунку 1.3.
Рисунок 1.3 – Приклад сучасної WEB-орієнтованої системи управління складом
Основними перевагами сучасних WEB-систем є:
– доступ через web-браузер;
– централізоване зберігання даних;
19
– підтримка багатокористувацького режиму;
– можливість інтеграції з іншими системами;
– адаптивний інтерфейс користувача;
– підтримка аналітики та звітності.
Порівняльний аналіз сучасних систем складського обліку наведено у
таблиці 1.1.
Таблиця 1.1 – Порівняльна характеристика систем управління складом
Система WEB-інтерфейс Аналітика Авторизація База
даних
Zoho Inventory + + + Cloud
Odoo Inventory + + + PostgreSQL
ERPNext + + + MariaDB
SAP WM + + + Oracle
Microsoft + + + SQL Server
Dynamics
Незважаючи на широкий вибір готових рішень, більшість із них мають
високу вартість або надлишковий функціонал для невеликих магазинів
комп’ютерної техніки. Тому актуальною задачею є створення спеціалізованої
WEB-орієнтованої інформаційної системи, адаптованої до потреб конкретного
підприємства.
1.3 Аналіз методів автоматизації складських процесів
Автоматизація складських процесів є важливою складовою цифрової
трансформації підприємств. Використання сучасних інформаційних технологій
дозволяє підвищити швидкість обробки даних, зменшити кількість помилок та
забезпечити ефективне управління товарними ресурсами.
Сучасні методи автоматизації складських процесів базуються на
використанні інформаційних систем, що забезпечують централізоване
управління товарами, складськими операціями та аналітичними даними.
Використання таких систем значно підвищує швидкість обробки інформації,
20
зменшує кількість помилок та забезпечує оперативний доступ до актуальних
даних про складські залишки.
Крім цього, важливим елементом автоматизації є використання
аналітичних модулів та систем формування звітності. Такі модулі дозволяють
аналізувати рух товарів, контролювати мінімальні залишки продукції,
прогнозувати потребу у закупівлях та оцінювати ефективність роботи складу.
Автоматичне формування звітів значно скорочує витрати часу на підготовку
документації та підвищує точність управлінських рішень.
Основні методи автоматизації складських процесів наведено на рисунку
1.4.
Рисунок 1.4 – Методи автоматизації складських процесів
До сучасних методів автоматизації належать:
– автоматизований облік товарів;
– використання штрих-кодів;
– RFID-технології;
– електронна звітність;
– автоматизоване формування документів;
21
– системи моніторингу залишків;
– інтеграція з базами даних.
На рисунку 1.4 наведено основні методи автоматизації складських
процесів, що використовуються у сучасних інформаційних системах управління
складом. У центральній частині схеми зображено складське приміщення та
інформаційну систему, які об’єднують різні технології автоматизації
складського обліку.
Як показано на рисунку, одним із базових методів автоматизації є
автоматизований облік товарів, що забезпечує ведення інформації про
продукцію у режимі реального часу за допомогою спеціалізованих програмних
систем. Такий підхід дозволяє значно скоротити кількість помилок під час
обробки даних та підвищити швидкість роботи персоналу.
На схемі також представлено використання штрих-кодів, що дозволяє
автоматизувати процеси приймання, інвентаризації та відвантаження товарів.
Використання сканерів штрих-кодів значно прискорює обробку складських
операцій та забезпечує точність ідентифікації продукції.
Окрему увагу приділено RFID-технологіям, які забезпечують
автоматичну ідентифікацію товарів за допомогою спеціальних RFID-міток без
необхідності прямої видимості сканера. Такі технології використовуються для
автоматизації великих складських комплексів та логістичних центрів.
На рисунку також показано метод електронної звітності, що передбачає
автоматичне формування та аналіз звітів у цифровому форматі. Це дозволяє
оперативно отримувати інформацію про рух товарів, залишки продукції та
ефективність роботи складу.
Важливим елементом автоматизації є автоматизоване формування
документів, зокрема накладних, рахунків, актів та інших складських
документів. Такий підхід спрощує документообіг та зменшує навантаження на
працівників підприємства.
Крім того, схема демонструє використання систем моніторингу залишків
товарів, інтеграцію складської системи з базами даних підприємства та мобільні
22
рішення для керування складськими операціями за допомогою планшетів і
смартфонів.
Таким чином, рисунок 1.4 наочно демонструє сучасні підходи до
автоматизації складських процесів та підтверджує ефективність використання
WEB-орієнтованих інформаційних систем для управління складом магазину
комп’ютерної техніки.
Особливу роль у сучасних системах відіграють WEB-технології, що
дозволяють забезпечити віддалений доступ до інформації та підтримку роботи
системи через браузер.
1.4 Огляд сучасних технологій WEB-розробки
Сучасні WEB-технології забезпечують створення функціональних та
масштабованих інформаційних систем. Для розробки WEB-застосунків
використовуються клієнтські та серверні технології.
Архітектура сучасного WEB-застосунку наведена на рисунку 1.5.
Рисунок 1.5 – Архітектура сучасного WEB-застосунку
23
На рисунку 1.5 представлено архітектуру сучасного WEB-застосунку, яка
складається з клієнтської частини, серверної частини та рівня зберігання даних.
Така архітектура забезпечує ефективну взаємодію між користувачем, сервером
та базою даних під час роботи інформаційної системи.
У лівій частині схеми показано клієнтську частину (Frontend), що
відповідає за взаємодію користувача із системою через web-браузер. Для
реалізації інтерфейсу користувача використовуються технології HTML5, CSS3,
JavaScript та React. Передавання HTTP-запитів до серверної частини
здійснюється за допомогою HTTP-клієнта Axios.
У центральній частині рисунка представлено серверну частину (Backend),
реалізовану на платформі Node.js із використанням фреймворку Express.js.
Серверна частина забезпечує обробку HTTP/HTTPS-запитів, виконання бізнес-
логіки, авторизацію користувачів та взаємодію з базою даних через REST API.
На схемі також відображено модуль автентифікації, який використовує
технологію JWT (JSON Web Token) для перевірки користувачів та забезпечення
захисту доступу до системи. Крім того, серверна частина містить middleware-
компоненти, що виконують перевірку даних, обробку помилок та логування
запитів.
У правій частині рисунка наведено рівень даних (Database),
представлений системою управління базами даних MongoDB. База даних
містить колекції користувачів, товарів, складів, замовлень та інших об’єктів
інформаційної системи.
Нижня частина схеми демонструє інтеграцію WEB-застосунку із
зовнішніми сервісами, серед яких хмарне сховище файлів, e-mail сервіси, push-
сповіщення та модулі аналітики.
Таким чином, рисунок 1.5 наочно демонструє багаторівневу архітектуру
сучасного WEB-застосунку та принцип взаємодії між клієнтською частиною,
сервером і базою даних у WEB-орієнтованій інформаційній системі «СКЛАД».
24
1.5 Аналіз можливостей платформи Node.js та React
Node.js є сучасною платформою для створення серверних WEB-
застосунків. Основною перевагою Node.js є використання JavaScript як на
клієнтській, так і на серверній стороні.
Схему взаємодії React та Node.js наведено на рисунку 1.6.
Рисунок 1.6 – Взаємодія клієнтської та серверної частин системи
React є JavaScript-бібліотекою для створення інтерактивних
користувацьких інтерфейсів.
На рисунку 1.6 представлено схему взаємодії клієнтської та серверної
частин WEB-орієнтованої інформаційної системи. Схема демонструє процес
обміну даними між користувацьким інтерфейсом, сервером та базою даних під
час роботи WEB-застосунку.
У лівій частині рисунка зображено клієнтську частину системи,
реалізовану за допомогою бібліотеки React. Користувач взаємодіє з WEB-
інтерфейсом через браузер, виконуючи операції перегляду, додавання,
редагування та пошуку товарів. Формування HTTP-запитів до серверної
частини здійснюється за допомогою HTTP-клієнта Axios.
25
У центральній частині схеми наведено потоки даних між клієнтом і
сервером. Під час роботи системи клієнтська частина надсилає HTTP/HTTPS-
запити до серверної частини через REST API. Запити можуть містити
параметри, заголовки, JWT-токени автентифікації та інші службові дані.
Після отримання запиту серверна частина, реалізована на платформі
Node.js із використанням Express.js, виконує обробку запиту, перевірку
автентифікації користувача та звернення до бази даних MongoDB. На схемі
показано, що сервер виконує бізнес-логіку системи, обробляє дані та формує
відповідь у форматі JSON.
У правій частині рисунка представлено базу даних MongoDB, у якій
зберігаються колекції користувачів, товарів, категорій, складів та замовлень.
Серверна частина здійснює взаємодію з базою даних для отримання, оновлення
та збереження інформації.
Після завершення обробки запиту сервер надсилає клієнтській частині
відповідь у форматі JSON, яка використовується для оновлення інтерфейсу
користувача. Таким чином забезпечується динамічне відображення актуальної
інформації без перезавантаження сторінки.
У нижній частині схеми наведено основні технології та протоколи, що
використовуються у системі: Axios, React, Node.js, Express.js, JWT та MongoDB.
Таким чином, рисунок 1.6 наочно демонструє принцип взаємодії між
клієнтською та серверною частинами WEB-орієнтованої інформаційної системи
«СКЛАД» та відображає основні етапи обробки даних у сучасному WEB-
застосунку.
1.6 Аналіз засобів програмування та баз даних
Для реалізації WEB-орієнтованої інформаційної системи необхідно
обрати ефективні засоби програмування та систему управління базами даних.
Структуру програмних засобів системи наведено на рисунку 1.7.
26
Рисунок 1.7 – Засоби програмування та база даних системи
На рисунку 1.7 представлено основні засоби програмування та структуру
бази даних WEB-орієнтованої інформаційної системи «СКЛАД». Схема
демонструє технологічний стек програмного забезпечення, взаємодію між
компонентами системи та організацію зберігання даних.
У лівій частині рисунка наведено засоби реалізації серверної частини
(Backend). Основною платформою серверної розробки є Node.js, що забезпечує
виконання JavaScript-коду на стороні сервера та підтримує асинхронну обробку
запитів. Для створення REST API використовується фреймворк Express.js.
Формат JSON застосовується для обміну даними між клієнтською та серверною
частинами системи.
На схемі також показано використання JWT (JSON Web Token) для
автентифікації та авторизації користувачів, бібліотеки bcrypt для хешування
паролів і middleware-компонента Morgan для логування HTTP-запитів. Крім
того, використовується dotenv для роботи зі змінними середовища та
конфігураційними параметрами системи.
У центральній частині рисунка наведено засоби реалізації клієнтської
частини (Frontend). Основною бібліотекою для створення інтерфейсу
користувача є React. Для організації маршрутизації в односторінковому
застосунку використовується React Router. HTTP-запити до серверної частини
виконуються за допомогою Axios.
Для управління глобальним станом застосунку використовується Redux
Toolkit, а Bootstrap 5 забезпечує створення адаптивного та сучасного
інтерфейсу користувача. Інструмент Vite використовується для швидкої збірки
та оптимізації WEB-застосунку.
27
У правій частині схеми представлено базу даних MongoDB та структуру
основних колекцій системи. База даних містить колекції користувачів, товарів,
категорій, складів, замовлень та елементів замовлень. На рисунку показано
зв’язки між колекціями та основні поля документів, що використовуються для
зберігання інформації у системі.
У нижній частині рисунка наведено архітектуру взаємодії між
клієнтським браузером, сервером та базою даних. Клієнт надсилає
HTTP/HTTPS-запити через REST API до серверної частини, після чого сервер
виконує обробку запиту та взаємодію з MongoDB. Відповіді повертаються
клієнтській частині у форматі JSON.
Також на схемі представлено додаткові інструменти розробки, серед яких
ESLint, Prettier, Git, Postman, Nodemon та Visual Studio Code. Вони
використовуються для тестування, форматування коду, контролю версій та
забезпечення ефективного процесу розробки програмного забезпечення.
Таким чином, рисунок 1.7 демонструє комплексну структуру програмних
засобів WEB-орієнтованої інформаційної системи «СКЛАД» та відображає
сучасний підхід до побудови клієнт-серверних WEB-застосунків із
використанням технологій Node.js, React та MongoDB.
MongoDB є документоорієнтованою NoSQL базою даних, що забезпечує
високу швидкість обробки даних та зручність роботи з JSON-документами.
1.7 Постановка задачі дослідження
У результаті проведеного аналізу предметної області встановлено, що
існуючі системи складського обліку не завжди відповідають потребам
невеликих магазинів комп’ютерної техніки. Більшість із них мають складний
інтерфейс, високу вартість або надлишковий функціонал.
Тому основною задачею дослідження є розробка сучасної WEB-
орієнтованої інформаційної системи «СКЛАД», яка забезпечуватиме:
– облік товарів;
– контроль залишків продукції;
– управління складськими операціями;
28
– авторизацію користувачів;
– формування звітності;
– пошук та фільтрацію товарів;
– адаптивний WEB-інтерфейс.
Основні функціональні модулі системи наведено на рисунку 1.8.
Рисунок 1.8 – Функціональні модулі WEB-орієнтованої інформаційної
системи «СКЛАД»
На рисунку 1.8 представлено функціональні модулі WEB-орієнтованої
інформаційної системи «СКЛАД», що забезпечують автоматизацію процесів
складського обліку та управління товарами у магазині комп’ютерної техніки.
Схема відображає структуру системи, взаємозв’язок між окремими модулями та
їх взаємодію з базою даних.
У центральній частині рисунка розташовано базу даних системи, у якій
зберігається інформація про користувачів, товари, категорії, склади,
постачальників, замовлення, операції та системні налаштування. База даних є
основним елементом зберігання інформації та забезпечує взаємодію між усіма
функціональними модулями.
У лівій частині схеми наведено основні модулі управління системою.
Модуль авторизації та користувачів забезпечує реєстрацію, автентифікацію та
керування ролями користувачів. Модуль довідників використовується для
роботи з категоріями товарів, одиницями вимірювання, постачальниками та
складами.
29
Модуль товарів забезпечує додавання, редагування та пошук товарів, а
також ведення характеристик, описів і штрих-кодів продукції. Модуль
складських операцій відповідає за облік надходження товарів, переміщення між
складами, проведення інвентаризації та списання продукції.
У правій частині рисунка представлено модуль замовлень, який
забезпечує створення та обробку замовлень клієнтів, контроль статусів і
ведення історії замовлень. Модуль звітності та аналітики використовується для
формування звітів про залишки товарів, аналізу руху продукції та експорту
звітної інформації у різних форматах.
Крім того, схема містить модуль сповіщень, що відповідає за надсилання
повідомлень про мінімальні залишки товарів, нові замовлення та інші події
системи. Модуль налаштувань системи забезпечує керування параметрами
системи, правами доступу, копіюванням та журналом дій користувачів.
У нижній частині рисунка наведено спільні сервіси системи, серед яких
механізми автентифікації та безпеки, логування дій користувачів, резервне
копіювання бази даних, імпорт та експорт інформації, API інтеграції з іншими
системами та адаптивний WEB-інтерфейс користувача.
Таким чином, рисунок 1.8 наочно демонструє структуру та функціональні
можливості WEB-орієнтованої інформаційної системи «СКЛАД», а також
підтверджує комплексний підхід до автоматизації складського обліку магазину
комп’ютерної техніки.
Висновки до розділу 1
У першому розділі кваліфікаційної роботи бакалавра проведено аналіз
предметної області та сучасних WEB-технологій, що використовуються для
створення інформаційних систем складського обліку. Досліджено особливості
організації складського обліку у магазинах комп’ютерної техніки та визначено
основні проблеми, пов’язані з використанням традиційних методів ведення
обліку товарів.
У результаті аналізу встановлено, що магазини комп’ютерної техніки
працюють із великою кількістю товарних позицій, які мають різноманітні
30
технічні характеристики, серійні номери, гарантійні параметри та інші
атрибути. Це значно ускладнює процес обробки інформації та потребує
використання інформаційних систем для автоматизації складських операцій.
Проведено аналіз сучасних WEB-орієнтованих систем управління
складом та визначено їх основні переваги й недоліки. Встановлено, що існуючі
програмні продукти забезпечують автоматизацію складського обліку,
формування звітності та контроль товарних залишків, проте більшість із них
мають високу вартість або надлишковий функціонал для невеликих магазинів
комп’ютерної техніки.
У розділі також досліджено сучасні методи автоматизації складських
процесів, серед яких автоматизований облік товарів, використання штрих-
кодів, RFID-технологій, систем моніторингу залишків та електронної звітності.
Встановлено, що впровадження сучасних WEB-технологій дозволяє
забезпечити централізоване зберігання даних, підтримку
багатокористувацького режиму роботи та оперативний доступ до інформації
через web-браузер.
Окрему увагу приділено аналізу сучасних технологій WEB-розробки. У
результаті дослідження обґрунтовано доцільність використання технологій
Node.js, Express.js, React та MongoDB для реалізації WEB-орієнтованої
інформаційної системи «СКЛАД». Визначено, що використання даного
технологічного стеку забезпечує високу продуктивність, масштабованість,
адаптивність інтерфейсу та ефективну взаємодію між клієнтською та
серверною частинами системи.
Проведений аналіз дозволив сформулювати основні функціональні
вимоги до WEB-орієнтованої інформаційної системи, серед яких:
– облік товарів, контроль залишків продукції;
– управління складськими операціями;
– авторизація користувачів, формування звітності;
– пошук і фільтрація товарів, підтримка адаптивного WEB-інтерфейсу.
31
Таким чином, результати першого розділу підтверджують актуальність
розробки WEB-орієнтованої інформаційної системи «СКЛАД» для магазину
комп’ютерної техніки та створюють основу для подальшого проєктування й
програмної реалізації системи у наступних розділах кваліфікаційної роботи
бакалавра.
32
2 ПРОЄКТУВАННЯ WEB-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ
СИСТЕМИ «СКЛАД»
У другому розділі кваліфікаційної роботи бакалавра розглянуто процес
проєктування WEB-орієнтованої інформаційної системи «СКЛАД» для
магазину комп’ютерної техніки. Основну увагу приділено формуванню
архітектури програмної системи, моделюванню її структури та визначенню
функціональних компонентів, необхідних для реалізації ефективного
складського обліку.
У розділі виконано аналіз та проєктування загальної архітектури WEB-
застосунку, що базується на клієнт-серверному підході. Визначено структуру
клієнтської та серверної частин системи, а також механізми їх взаємодії через
REST API.
Під час проєктування системи використано UML-моделювання, що
дозволило описати основні варіанти використання системи, взаємодію
користувачів із функціональними модулями та логіку виконання складських
операцій. Розглянуто діаграми варіантів використання, діяльності та
компонентів системи.
Окрему увагу приділено проєктуванню структури бази даних та
визначенню основних колекцій MongoDB, що забезпечують зберігання
інформації про товари, користувачів, складські операції, замовлення та
звітність.
У розділі також описано проєктування функціональних модулів WEB-
орієнтованої інформаційної системи, серед яких модулі авторизації, управління
товарами, складських операцій, звітності та адміністрування системи. Крім
того, розглянуто принципи побудови користувацького інтерфейсу та
обґрунтовано вибір сучасних технологій реалізації програмного забезпечення.
Результати, отримані у другому розділі, створюють основу для подальшої
програмної реалізації WEB-орієнтованої інформаційної системи «СКЛАД» та
проведення її тестування у наступних розділах кваліфікаційної роботи
бакалавра.
33
2.1 Загальна архітектура програмної системи
Проєктування архітектури програмної системи є одним із найважливіших
етапів розробки WEB-орієнтованої інформаційної системи. Від правильної
побудови архітектури залежить продуктивність, масштабованість, безпека та
зручність подальшого супроводу програмного забезпечення.
Для реалізації WEB-орієнтованої інформаційної системи «СКЛАД» було
обрано багаторівневу клієнт-серверну архітектуру, що забезпечує розподіл
функціональності між клієнтською частиною, серверною логікою та базою
даних.
Загальна архітектура програмної системи наведена на рисунку 2.1.
Рисунок 2.1 – Загальна архітектура WEB-орієнтованої інформаційної системи
«СКЛАД»
На рисунку 2.1 представлено загальну архітектуру WEB-орієнтованої
інформаційної системи «СКЛАД», побудовану за багаторівневим клієнт-
серверним принципом. Архітектура системи складається з трьох основних
рівнів: клієнтської частини (Frontend), серверної частини (Backend) та бази
даних MongoDB.
У лівій частині рисунка зображено клієнтську частину системи, що
функціонує у web-браузері користувача. Клієнтський інтерфейс реалізований із
використанням сучасних WEB-технологій, серед яких React, JavaScript,
34
HTML5, CSS3 та Bootstrap 5. Для обміну даними із серверною частиною
використовується бібліотека Axios, яка забезпечує виконання HTTP/HTTPS-
запитів до REST API.
У центральній частині схеми представлено серверну частину системи,
реалізовану на платформі Node.js із використанням фреймворку Express.js.
Серверна частина відповідає за обробку HTTP-запитів, реалізацію бізнес-
логіки, взаємодію з базою даних та забезпечення безпеки системи.
На рисунку показано основні рівні серверної частини:
– маршрути (Routes), що забезпечують маршрутизацію HTTP-запитів;
– контролери (Controllers), які виконують обробку запитів;
– сервіси (Services), що реалізують бізнес-логіку системи;
– моделі (Models), які забезпечують взаємодію з базою даних;
– middleware-компоненти, що відповідають за автентифікацію,
авторизацію, валідацію та логування запитів.
Для забезпечення безпеки системи використовуються JWT-токени для
автентифікації користувачів та бібліотека bcrypt для хешування паролів.
Логування HTTP-запитів реалізовано за допомогою Morgan, а конфігурація
середовища здійснюється через dotenv.
У правій частині рисунка наведено базу даних MongoDB, яка
використовується для зберігання інформації системи. На схемі представлено
основні колекції бази даних:
– users, products;
– categories;
– warehouses;
– orders;
– order_items;
– suppliers;
– notifications.
Взаємодія між клієнтською та серверною частинами здійснюється через
HTTP/HTTPS-протокол із використанням REST API. Дані передаються у
35
форматі JSON, що забезпечує швидкий та зручний обмін інформацією між
компонентами системи.
У нижній частині рисунка показано додаткові інфраструктурні
компоненти системи, серед яких SSL/TLS-шифрування, web-сервер Nginx,
засоби резервного копіювання, моніторингу та логування. Також відображено
підтримку контейнеризації та деплою системи за допомогою PM2 або Docker.
Таким чином, рисунок 2.1 демонструє загальну структуру WEB-
орієнтованої інформаційної системи «СКЛАД», принцип взаємодії її основних
компонентів та використання сучасних технологій для забезпечення
продуктивності, масштабованості та безпеки програмного забезпечення.
Клієнтська частина реалізована за допомогою React та забезпечує
взаємодію користувача із системою через web-браузер. Серверна частина
реалізована на Node.js та Express.js і відповідає за бізнес-логіку, обробку
запитів та взаємодію з базою даних MongoDB.
2.2 Проєктування структури WEB-застосунку
Структура WEB-застосунку повинна забезпечувати логічне розділення
компонентів системи та підтримувати можливість масштабування програмного
забезпечення. Структуру WEB-застосунку наведено на рисунку 2.2.
Рисунок 2.2 – Структура WEB-застосунку системи «СКЛАД»
На рисунку 2.2 представлено структуру WEB-застосунку системи
«СКЛАД», яка демонструє організацію клієнтської та серверної частин
36
програмного забезпечення, структуру бази даних і взаємодію між
компонентами системи.
У лівій частині рисунка наведено структуру клієнтської частини
(Frontend), реалізованої як React SPA-застосунок. Основною директорією є
папка src, у якій розміщуються всі компоненти клієнтської частини системи.
У структурі Frontend виділено такі основні папки:
– assets – зберігання зображень, іконок та стилів;
– components – React-компоненти інтерфейсу;
– pages — сторінки системи;
– redux – глобальний стан застосунку;
– services – модулі взаємодії з REST API;
– hooks – користувацькі React Hooks;
– utils – допоміжні функції та константи.
На схемі також показано основні сторінки WEB-застосунку:
– авторизація;
– панель керування;
– товари;
– склади;
– замовлення;
– категорії;
– постачальники;
– звіти;
– налаштування.
Для реалізації клієнтської частини використовуються технології React,
JavaScript, HTML5, CSS3, Bootstrap 5 та Axios.
У центральній частині рисунка наведено структуру серверної частини
(Backend), реалізованої на платформі Node.js із використанням Express.js.
Основною директорією серверної частини є папка server.
У структурі Backend показано такі компоненти:
– config – конфігурація підключення до бази даних та JWT;
– controllers – контролери обробки HTTP-запитів;
37
– models – моделі даних MongoDB;
– routes – маршрути REST API;
– middleware – middleware-компоненти;
– services – реалізація бізнес-логіки;
– utils – допоміжні модулі та константи.
На схемі також показано рівні архітектури серверної частини:
– Routes – маршрутизація HTTP-запитів;
– Controllers – обробка запитів;
– Services – бізнес-логіка системи;
– Models – взаємодія з базою даних.
У правій частині рисунка наведено структуру бази даних MongoDB.
Основними колекціями є:
– users;
– products;
– categories;
– warehouses;
– orders;
– order_items;
– suppliers;
– notifications.
Взаємодія між серверною частиною та MongoDB здійснюється через
MongoDB Driver та бібліотеку Mongoose. Передавання даних між
компонентами системи відбувається у форматі JSON.
На рисунку також показано спільні компоненти системи, що
використовуються як на серверному, так і на клієнтському рівнях:
– JWT Authentication;
– bcrypt;
– Morgan;
– dotenv;
– CORS;
– Helmet.
38
У нижній частині схеми наведено загальний процес взаємодії
компонентів WEB-застосунку. Користувач через браузер працює з React SPA-
застосунком, який надсилає HTTP/HTTPS-запити до Express.js API. Серверна
частина обробляє запити та виконує взаємодію з базою даних MongoDB, після
чого результати повертаються клієнту у форматі JSON.
Таким чином, рисунок 2.2 демонструє повну структуру WEB-застосунку
системи «СКЛАД», організацію її компонентів та принцип взаємодії між
клієнтською частиною, сервером і базою даних.
2.3 Моделювання системи засобами UML
Для моделювання WEB-орієнтованої інформаційної системи
використовуються UML-діаграми, що дозволяють наочно представити
структуру системи, взаємодію компонентів та поведінку користувачів.
Діаграму варіантів використання системи наведено на рисунку 2.3.
Рисунок 2.3 – UML-діаграма варіантів використання системи
На рисунку 2.3 наведено UML-діаграму варіантів використання WEB-
орієнтованої інформаційної системи «СКЛАД». Діаграма відображає основних
39
користувачів системи, їхні функціональні можливості та взаємодію з окремими
модулями програмного забезпечення.
У лівій частині діаграми зображено трьох основних акторів системи:
адміністратора, менеджера складу та продавця-консультанта. Кожен актор має
власний набір доступних дій відповідно до своєї ролі у системі.
Адміністратор має найширші права доступу. Він може виконувати
керування користувачами, налаштовувати ролі та права доступу, змінювати
параметри системи, а також здійснювати авторизацію та вихід із системи.
Менеджер складу відповідає за основні складські операції. До його
функцій належать керування товарними категоріями, постачальниками,
складами, додавання, редагування та видалення товарів, пошук і фільтрація
товарних позицій, перегляд залишків, оформлення надходження, переміщення,
інвентаризації та списання товарів.
Продавець-консультант має доступ до перегляду інформації про товари,
склади та історію замовлень. Також він може працювати із замовленнями
клієнтів, зокрема створювати нові замовлення, переглядати їх, змінювати
статус або скасовувати замовлення відповідно до наданих прав доступу.
На діаграмі функції системи згруповано за окремими модулями:
керування користувачами та системою, довідники, управління товарами,
складські операції, замовлення, звіти та аналітика, сповіщення і перегляд
інформації.
Окремо показано взаємозв’язки типу include та extend. Зв’язок include
використовується для дій, які є обов’язковою частиною іншого процесу,
наприклад авторизація користувача під час доступу до захищених функцій
системи. Зв’язок extend демонструє додаткові сценарії, зокрема відновлення
пароля.
Таким чином, рисунок 2.3 демонструє функціональні можливості WEB-
орієнтованої інформаційної системи «СКЛАД» з погляду користувачів різних
ролей та визначає основні сценарії роботи з програмною системою.
Адміністратор має доступ до всіх функцій системи, включаючи
керування користувачами, налаштуваннями та базою даних.
40
Діаграма діяльності системи наведена на рисунку 2.4.
Рисунок 2.4 – UML-діаграма діяльності системи
На рисунку 2.4 наведено UML-діаграму діяльності системи «СКЛАД»,
яка демонструє послідовність виконання основних дій користувача та
41
взаємодію між компонентами WEB-застосунку. Діаграма побудована з
використанням доріжок відповідальності, що дозволяє окремо показати дії
користувача, клієнтської частини, серверної частини, бази даних та системи
звітності й сповіщень.
Процес роботи системи починається з відкриття WEB-застосунку
користувачем та введення логіна і пароля. Після цього клієнтська частина
формує запит на автентифікацію та надсилає його до серверної частини. Сервер
перевіряє облікові дані користувача шляхом звернення до бази даних
MongoDB.
Якщо введені дані є неправильними, система повертає повідомлення про
помилку, після чого користувач може повторити спробу входу. Якщо дані є
коректними, сервер створює JWT-токен сесії та надсилає відповідь клієнтській
частині. Після цього користувач переходить до панелі керування системою.
Далі користувач обирає необхідний функціональний модуль, наприклад
модуль товарів, складів, замовлень або звітності. Клієнтська частина
відображає відповідний інтерфейс і надсилає запити до серверної частини для
виконання операцій додавання, редагування, видалення або перегляду даних.
Серверна частина обробляє отримані запити, виконує бізнес-логіку та
звертається до бази даних для збереження, оновлення або отримання
інформації. Після виконання операції база даних повертає результат серверу, а
сервер формує відповідь у форматі JSON і надсилає її клієнтській частині.
Окремо на діаграмі показано процес формування звітів. За потреби
користувач ініціює формування звітної інформації, після чого система отримує
необхідні дані, генерує звіт і може виконати його збереження або експорт.
Також передбачено можливість надсилання сповіщень у разі виникнення
відповідних системних подій.
Завершення роботи із системою відбувається через вихід користувача,
після чого сервер завершує сесію та очищує токен авторизації. Таким чином,
рисунок 2.4 відображає повний цикл роботи користувача з WEB-орієнтованою
інформаційною системою «СКЛАД» — від авторизації до виконання
складських операцій, формування звітів і завершення сесії.
42
2.4 Проєктування структури бази даних
База даних є одним із ключових компонентів WEB-орієнтованої
інформаційної системи. Для реалізації системи обрано документоорієнтовану
СУБД MongoDB.
Проєктування структури бази даних є важливим етапом створення WEB-
орієнтованої інформаційної системи «СКЛАД», оскільки саме база даних
забезпечує зберігання, обробку та швидкий доступ до інформації про товари,
користувачів, склади, замовлення та складські операції. Від правильної
організації структури бази даних залежить стабільність роботи системи,
швидкість виконання запитів, зручність масштабування та цілісність
інформації.
Для реалізації бази даних системи «СКЛАД» доцільно використати
MongoDB – документоорієнтовану NoSQL-систему управління базами даних.
Такий вибір обумовлений тим, що інформація про товари комп’ютерної техніки
може мати різну структуру та відрізнятися набором характеристик. Наприклад,
ноутбуки, відеокарти, процесори, накопичувачі, монітори та мережеве
обладнання мають різні технічні параметри, тому використання гнучкої
структури документів є зручним для зберігання таких даних.
MongoDB зберігає інформацію у вигляді колекцій та документів, що за
структурою подібні до JSON-об’єктів. Це забезпечує зручну інтеграцію з
серверною частиною, реалізованою на Node.js та Express.js, оскільки обмін
даними між клієнтською частиною, сервером і базою даних здійснюється у
форматі JSON.
Структуру бази даних WEB-орієнтованої інформаційної системи
«СКЛАД» наведено на рисунку 2.5.
43
Рисунок 2.5 – Структура бази даних WEB-орієнтованої інформаційної системи
База даних системи «СКЛАД» містить такі основні колекції:
– users – колекція користувачів системи;
– products – колекція товарів;
– categories – колекція категорій товарів;
– warehouses – колекція складів;
– suppliers – колекція постачальників;
– orders – колекція замовлень;
– order_items – колекція позицій замовлень;
– stock_operations – колекція складських операцій;
– notifications – колекція системних сповіщень;
– reports – колекція сформованих звітів.
Колекція users призначена для зберігання інформації про користувачів
WEB-застосунку. Вона містить дані, необхідні для авторизації, автентифікації
та розмежування прав доступу. До основних полів цієї колекції належать:
ідентифікатор користувача, прізвище та ім’я, електронна адреса, хеш пароля,
роль користувача, статус облікового запису, дата створення та дата останнього
входу в систему.
Приклад структури документа колекції users:
44
{
"_id": "ObjectId",
"fullName": "Янченко Вадим",
"email": "[email protected]",
"passwordHash": "hashed_password",
"role": "admin",
"status": "active",
"createdAt": "2026-05-01T10:00:00Z",
"lastLogin": "2026-05-10T09:30:00Z"
}
Колекція products є однією з основних у системі, оскільки зберігає
інформацію про товарні позиції магазину комп’ютерної техніки. Для кожного
товару передбачено збереження назви, категорії, виробника, моделі, артикулу,
серійного номера, ціни, кількості, опису та технічних характеристик.
Приклад структури документа колекції products:
{
"_id": "ObjectId",
"name": "Ноутбук Lenovo IdeaPad 3",
"categoryId": "ObjectId",
"supplierId": "ObjectId",
"manufacturer": "Lenovo",
"model": "IdeaPad 3",
"sku": "NB-LEN-001",
"serialNumber": "SN123456789",
"price": 24500,
"quantity": 12,
"warehouseId": "ObjectId",
"description": "Ноутбук для офісної роботи та навчання",
"specifications": {
"processor": "Intel Core i5",
"ram": "16 GB",
45
"storage": "512 GB SSD",
"display": "15.6 inch"
},
"createdAt": "2026-05-01T10:00:00Z",
"updatedAt": "2026-05-10T12:00:00Z"
}
Поле specifications має вкладену структуру та дозволяє зберігати різні
технічні характеристики залежно від типу товару. Це є однією з переваг
використання MongoDB, оскільки система може працювати з товарами, що
мають різні набори параметрів.
Колекція categories використовується для зберігання категорій товарів. До
таких категорій можуть належати ноутбуки, персональні комп’ютери,
комплектуючі, монітори, мережеве обладнання, периферійні пристрої та
аксесуари. Наявність окремої колекції категорій дозволяє впорядкувати товари
та забезпечити зручний пошук і фільтрацію.
Приклад структури документа колекції categories:
{
"_id": "ObjectId",
"name": "Ноутбуки",
"description": "Портативні комп’ютери для роботи, навчання та розваг",
"createdAt": "2026-05-01T10:00:00Z"
}
Колекція warehouses призначена для зберігання інформації про склади та
місця зберігання товарів. У системі може бути передбачено один основний
склад або кілька складських приміщень, між якими здійснюється переміщення
продукції.
Приклад структури документа колекції warehouses:
{
"_id": "ObjectId",
"name": "Основний склад",
"location": "м. Черкаси",
46
"responsiblePerson": "Менеджер складу",
"createdAt": "2026-05-01T10:00:00Z"
}
Колекція suppliers містить інформацію про постачальників товарів. Вона
використовується для ведення обліку контрагентів, від яких надходить
комп’ютерна техніка та комплектуючі. До основних полів належать назва
постачальника, контактна особа, телефон, електронна пошта, адреса та
примітки.
Колекція orders використовується для зберігання інформації про
замовлення клієнтів або внутрішні заявки на переміщення товарів. Вона містить
дані про користувача, склад, дату створення замовлення, статус, суму та
пов’язані товарні позиції.
Приклад структури документа колекції orders:
{
"_id": "ObjectId",
"userId": "ObjectId",
"warehouseId": "ObjectId",
"status": "created",
"total": 48900,
"createdAt": "2026-05-01T10:00:00Z"
}
Колекція order_items зберігає окремі позиції замовлень. Вона пов’язана з
колекціями orders та products і містить інформацію про кількість товару, ціну
одиниці та загальну суму за позицією.
Приклад структури документа колекції order_items:
{
"_id": "ObjectId",
"orderId": "ObjectId",
"productId": "ObjectId",
"quantity": 2,
"price": 24450,
47
"total": 48900
}
Колекція stock_operations призначена для фіксації всіх складських
операцій. До таких операцій належать надходження товарів, списання,
переміщення між складами, інвентаризація та коригування залишків.
Збереження історії складських операцій дозволяє контролювати рух товарів та
формувати звітність.
Приклад структури документа колекції stock_operations:
{
"_id": "ObjectId",
"type": "income",
"productId": "ObjectId",
"warehouseId": "ObjectId",
"quantity": 10,
"userId": "ObjectId",
"comment": "Надходження товару від постачальника",
"createdAt": "2026-05-01T10:00:00Z"
}
Колекція notifications використовується для зберігання системних
сповіщень. Наприклад, система може автоматично створювати повідомлення
про мінімальні залишки товарів, нові замовлення або необхідність проведення
інвентаризації.
Приклад структури документа колекції notifications:
{
"_id": "ObjectId",
"userId": "ObjectId",
"type": "low_stock",
"message": "Кількість товару 'SSD Kingston 1TB' менша за мінімальний
залишок",
"isRead": false,
"createdAt": "2026-05-01T10:00:00Z"
48
}
Колекція reports використовується для зберігання сформованих звітів або
параметрів їх генерації. Це дозволяє повторно переглядати звітну інформацію
та зберігати історію аналітичних даних.
Основні зв’язки між колекціями бази даних такі:
– користувач може створювати багато замовлень;
– замовлення може містити багато товарних позицій;
– товар належить до певної категорії;
– товар може бути пов’язаний із постачальником;
– товар зберігається на певному складі;
– складська операція пов’язана з товаром, складом і користувачем;
– сповіщення належить певному користувачу.
Для підвищення швидкодії системи доцільно використовувати індекси за
такими полями:
– email у колекції users;
– sku та serialNumber у колекції products;
– categoryId у колекції products;
– warehouseId у колекціях products, orders та stock_operations;
– createdAt у колекціях orders, stock_operations та reports.
Використання індексів дозволяє прискорити пошук товарів, фільтрацію за
категоріями, формування звітів і перевірку облікових даних користувачів під
час авторизації.
Спроєктована структура бази даних забезпечує збереження основної
інформації, необхідної для функціонування WEB-орієнтованої інформаційної
системи «СКЛАД». Вона підтримує облік товарів, управління складами,
формування замовлень, контроль складських операцій, роботу зі сповіщеннями
та створення звітності. Така структура є гнучкою, масштабованою та
придатною для подальшого розширення функціональності системи.
49
2.5 Проєктування модулів складського обліку
Проєктування модулів складського обліку є важливим етапом створення
WEB-орієнтованої інформаційної системи «СКЛАД», оскільки саме
функціональні модулі забезпечують виконання основних операцій із товарами,
складами, замовленнями, звітністю та користувачами. Модульна структура
дозволяє розділити систему на окремі логічні частини, кожна з яких виконує
власні завдання та взаємодіє з іншими компонентами через серверну частину і
базу даних.
Основною метою проєктування модулів є створення такої структури
системи, яка забезпечить зручність використання, надійність роботи,
можливість подальшого розширення функціональності та підтримку
багатокористувацького режиму. Для WEB-орієнтованої інформаційної системи
«СКЛАД» передбачено реалізацію кількох основних модулів: модуля
авторизації, модуля товарів, модуля складських операцій, модуля замовлень,
модуля довідників, модуля звітності, модуля сповіщень та модуля
адміністрування. Модульну структуру WEB-орієнтованої інформаційної
системи «СКЛАД» наведено на рисунку 2.6.
50
Рисунок 2.6 – Основні модулі системи складського обліку
Модуль авторизації та керування користувачами призначений для
організації доступу до системи. Він забезпечує вхід користувачів, перевірку
облікових даних, створення JWT-токена, вихід із системи та розмежування прав
доступу відповідно до ролі користувача. У системі передбачено три основні
ролі: адміністратор, менеджер складу та продавець-консультант.
Адміністратор має доступ до всіх функцій системи, включаючи
керування користувачами, ролями, налаштуваннями та довідниками. Менеджер
складу виконує операції з товарами, складами, надходженням, списанням,
переміщенням та інвентаризацією. Продавець-консультант має доступ до
перегляду товарів, оформлення замовлень та перегляду інформації про
наявність продукції.
Модуль товарів є одним із ключових модулів системи. Він забезпечує
створення, редагування, видалення та перегляд товарних позицій. Для кожного
товару передбачено зберігання назви, категорії, виробника, моделі, артикулу,
серійного номера, ціни, кількості, опису та технічних характеристик.
Особливістю магазину комп’ютерної техніки є те, що різні категорії товарів
мають різні характеристики, тому модуль товарів повинен підтримувати гнучку
структуру опису продукції.
Модуль товарів також забезпечує пошук і фільтрацію товарів за назвою,
категорією, виробником, ціною, складом, серійним номером та кількістю на
складі. Це дозволяє користувачам швидко знаходити необхідну інформацію та
контролювати актуальний стан товарних запасів.
Модуль довідників призначений для ведення допоміжної інформації, яка
використовується іншими модулями системи. До довідників належать категорії
товарів, постачальники, склади, одиниці вимірювання та статуси замовлень.
Використання окремого модуля довідників забезпечує впорядкованість даних
та зменшує ймовірність дублювання інформації.
Модуль складських операцій забезпечує виконання основних дій із
товарами на складі. До таких операцій належать надходження товарів, списання
продукції, переміщення між складами, інвентаризація та коригування залишків.
51
Кожна складська операція фіксується у базі даних із зазначенням типу операції,
товару, складу, кількості, користувача, дати виконання та коментаря.
Надходження товару використовується для збільшення кількості
продукції на складі після отримання товарів від постачальника. Списання
застосовується у випадках продажу, повернення постачальнику, браку або
втрати товару. Переміщення між складами дозволяє змінювати місце зберігання
продукції без втрати історії руху товару. Інвентаризація використовується для
перевірки фактичної кількості товарів та її порівняння з даними системи.
Модуль замовлень призначений для створення та обробки замовлень
клієнтів. У межах цього модуля користувач може сформувати замовлення,
додати до нього товарні позиції, змінити статус замовлення, переглянути
історію замовлень або скасувати замовлення. Після підтвердження замовлення
система може автоматично зменшувати залишок відповідного товару на складі.
Модуль звітності та аналітики забезпечує формування інформаційних
звітів для аналізу роботи складу. До основних звітів належать звіт про залишки
товарів, звіт про рух товарів, звіт про надходження, звіт про списання, звіт про
замовлення та звіт про товари з мінімальними залишками. Дані звіти можуть
використовуватися керівником або менеджером складу для прийняття
управлінських рішень.
Модуль сповіщень призначений для автоматичного інформування
користувачів про важливі події у системі. Наприклад, система може створювати
сповіщення про мінімальний залишок товару, нове замовлення, помилку під час
виконання операції або необхідність проведення інвентаризації. Такі
повідомлення дозволяють своєчасно реагувати на зміни у стані складу.
Модуль адміністрування забезпечує налаштування параметрів системи,
керування ролями користувачів, перегляд журналу дій, резервне копіювання
даних і контроль безпеки. Журнал дій користувачів дозволяє фіксувати основні
операції у системі, що підвищує прозорість роботи та дає можливість
відстежувати зміни у даних.
Взаємодія між модулями здійснюється через серверну частину WEB-
застосунку. Клієнтська частина надсилає запити до REST API, сервер перевіряє
52
права доступу користувача, виконує бізнес-логіку та звертається до відповідних
колекцій бази даних. Після обробки запиту сервер повертає клієнтській частині
відповідь у форматі JSON.
Для забезпечення цілісності даних у системі передбачено перевірку
коректності введеної інформації, контроль доступу до функцій відповідно до
ролі користувача та фіксацію складських операцій у журналі. Це дозволяє
уникнути несанкціонованої зміни даних та забезпечити надійність складського
обліку.
Таким чином, спроєктована модульна структура WEB-орієнтованої
інформаційної системи «СКЛАД» забезпечує повний цикл роботи з товарами
магазину комп’ютерної техніки: від внесення інформації про продукцію до
виконання складських операцій, формування замовлень, створення звітів та
адміністрування системи. Такий підхід робить систему гнучкою,
масштабованою та придатною для практичного використання у діяльності
торговельного підприємства.
Модуль товарів забезпечує додавання, редагування, видалення та пошук
товарів. Модуль складських операцій використовується для контролю
надходження товарів, інвентаризації та переміщення продукції між складами.
2.6 Проєктування користувацького інтерфейсу системи
Користувацький інтерфейс є одним із найважливіших компонентів WEB-
орієнтованої інформаційної системи «СКЛАД», оскільки саме через нього
користувач взаємодіє з функціональними можливостями програмного
забезпечення. Від якості проєктування інтерфейсу залежить зручність роботи із
системою, швидкість виконання операцій, ефективність використання
функціоналу та загальний користувацький досвід.
Під час проєктування інтерфейсу WEB-застосунку основну увагу
приділено простоті використання, логічному розташуванню елементів,
адаптивності та сучасному дизайну. Інтерфейс системи повинен забезпечувати
швидкий доступ до основних функцій складського обліку, бути зрозумілим для
53
користувачів різних рівнів підготовки та підтримувати роботу на різних типах
пристроїв.
Макет користувацького інтерфейсу WEB-орієнтованої інформаційної
системи наведено на рисунку 2.7.
Рисунок 2.7 – Макет користувацького інтерфейсу системи
Інтерфейс системи реалізується за допомогою React-компонентів із
використанням HTML5, CSS3 та Bootstrap 5. Використання компонентного
підходу дозволяє розділити інтерфейс на окремі незалежні елементи, які можна
повторно використовувати у різних частинах WEB-застосунку.
Основною сторінкою системи є панель керування (Dashboard), яка
відображається після успішної авторизації користувача. На панелі керування
розміщено інформаційні блоки з короткою статистикою:
– кількість товарів;
– кількість замовлень;
– кількість постачальників;
– кількість складських операцій;
– повідомлення про мінімальні залишки товарів.
54
У лівій частині інтерфейсу розташовано бічне меню навігації, яке
забезпечує швидкий перехід між функціональними модулями системи. Меню
містить такі розділи:
– головна сторінка;
– товари;
– склади;
– замовлення;
– складські операції;
– звіти;
– користувачі;
– налаштування системи.
Для підвищення зручності роботи меню підтримує адаптивний режим та
може згортатися на мобільних пристроях.
Основним елементом модуля товарів є таблиця товарних позицій.
Таблиця дозволяє переглядати інформацію про товари у зручному форматі та
містить такі поля:
– назва товару;
– категорія;
– виробник;
– ціна;
– кількість;
– склад;
– статус наявності.
Для кожного товару передбачено кнопки редагування, видалення та
перегляду детальної інформації. Таблиця підтримує сортування даних, пошук
та фільтрацію за категоріями, ціною, виробником і складом.
Для додавання та редагування товарів використовуються спеціальні
форми введення даних. Форми містять текстові поля, випадаючі списки, поля
вибору файлів та кнопки підтвердження дій. Під час введення інформації
система виконує перевірку коректності даних та повідомляє користувача про
помилки.
55
Інтерфейс модуля складських операцій забезпечує виконання
надходження, списання, переміщення та інвентаризації товарів. Для кожної
операції користувач може вибрати товар, склад, кількість продукції та вказати
коментар до операції.
Модуль замовлень реалізований у вигляді окремої сторінки зі списком
замовлень та інформацією про їх статуси. Для кожного замовлення
відображаються:
– номер замовлення;
– дата створення;
– користувач;
– список товарів;
– загальна сума;
– поточний статус.
Інтерфейс системи також містить модуль звітності та аналітики. Для
візуалізації статистичних даних використовуються графіки, діаграми та
інформаційні панелі. Користувач може формувати звіти за певний період часу,
експортувати їх у формат PDF або Excel та переглядати аналітичну інформацію
щодо руху товарів.
Для підвищення зручності використання WEB-застосунку передбачено
систему сповіщень. Сповіщення можуть відображатися у верхній частині
інтерфейсу або у вигляді окремих повідомлень. Наприклад, система може
повідомляти про:
– успішне виконання операції;
– помилки введення даних;
– мінімальні залишки товарів;
– створення нового замовлення;
– завершення формування звіту.
Особливу увагу під час проєктування інтерфейсу приділено адаптивності.
WEB-застосунок коректно відображається на персональних комп’ютерах,
планшетах та смартфонах. Для цього використовуються можливості Bootstrap
Grid System та медіазапити CSS.
56
Під час проєктування кольорової схеми інтерфейсу використано світлі
відтінки з контрастними елементами навігації та кнопками дій. Такий підхід
дозволяє забезпечити комфортну роботу користувача та покращити сприйняття
інформації.
Для підвищення швидкодії інтерфейсу використовується асинхронне
оновлення даних без перезавантаження сторінки. React забезпечує динамічне
оновлення компонентів та швидке відображення змін у системі.
Структуру основних компонентів користувацького інтерфейсу наведено
на рисунку 2.8.
Рисунок 2.8 – Структура компонентів користувацького інтерфейсу системи
До основних компонентів інтерфейсу належать:
– Header;
– Sidebar;
– Dashboard;
– ProductsTable;
– OrdersTable;
– ReportsPanel;
57
– NotificationPanel;
– LoginForm;
– SettingsPage.
Кожен компонент реалізується як окремий React-компонент та взаємодіє з
серверною частиною через REST API.
Для забезпечення безпеки користувацького інтерфейсу передбачено:
– перевірку JWT-токена;
– автоматичний вихід із системи після завершення сесії;
– приховування функцій відповідно до ролі користувача;
– валідацію введених даних;
– захист від несанкціонованого доступу.
Таким чином, спроєктований користувацький інтерфейс WEB-
орієнтованої інформаційної системи «СКЛАД» забезпечує зручну взаємодію
користувача із системою, підтримує основні функції складського обліку та
відповідає сучасним вимогам до WEB-застосунків. Використання React та
Bootstrap дозволяє створити адаптивний, масштабований та продуктивний
інтерфейс для автоматизації роботи магазину комп’ютерної техніки.
2.7 Вибір технологій реалізації
Для реалізації WEB-орієнтованої інформаційної системи «СКЛАД» було
обрано сучасний технологічний стек.
Вибір технологій реалізації є одним із ключових етапів проєктування
WEB-орієнтованої інформаційної системи «СКЛАД», оскільки саме від
використаного технологічного стеку залежать продуктивність,
масштабованість, безпека та зручність подальшого супроводу програмного
забезпечення. Під час вибору технологій враховувалися особливості предметної
області, необхідність підтримки багатокористувацького режиму роботи,
швидка обробка даних, адаптивність інтерфейсу та можливість подальшого
розширення функціональності системи.
Для реалізації WEB-орієнтованої інформаційної системи «СКЛАД» було
обрано сучасний стек технологій MERN, до складу якого входять MongoDB,
58
Express.js, React та Node.js. Використання даного стеку дозволяє створити
повноцінний WEB-застосунок із клієнтською та серверною частинами, що
взаємодіють через REST API.
Технологічний стек WEB-орієнтованої інформаційної системи наведено
на рисунку 2.9.
Рисунок 2.9 – Технології реалізації WEB-орієнтованої інформаційної системи.
Для реалізації клієнтської частини системи використовується бібліотека
React. React є однією з найпоширеніших бібліотек для створення сучасних SPA-
застосунків (Single Page Application). Основною перевагою React є
компонентний підхід, який дозволяє створювати незалежні та повторно
використовувані компоненти інтерфейсу.
Використання React забезпечує:
– швидке оновлення інтерфейсу без перезавантаження сторінки;
– зручне управління станом застосунку;
– високу продуктивність завдяки Virtual DOM;
– можливість створення адаптивного інтерфейсу;
– масштабованість програмного забезпечення.
59
Для реалізації структури сторінок та маршрутизації використовується
React Router. Дана бібліотека дозволяє організувати навігацію між сторінками
WEB-застосунку без повного перезавантаження браузера.
Для обміну даними між клієнтською та серверною частинами
використовується бібліотека Axios. Axios забезпечує виконання HTTP/HTTPS-
запитів до REST API та підтримує асинхронну взаємодію з сервером.
Для оформлення інтерфейсу використовується Bootstrap 5 — сучасний
CSS-фреймворк, який забезпечує:
– адаптивність WEB-застосунку;
– готові компоненти інтерфейсу;
– систему сіток Grid System;
– підтримку мобільних пристроїв;
– швидке створення сучасного дизайну.
Крім Bootstrap, у системі використовуються CSS3 та HTML5. HTML5
забезпечує створення структури WEB-сторінок, а CSS3 використовується для
оформлення інтерфейсу, створення адаптивного дизайну, анімацій та стилізації
елементів.
Для реалізації серверної частини системи використовується Node.js. Дана
платформа дозволяє виконувати JavaScript-код на стороні сервера та забезпечує
асинхронну обробку запитів. Основною перевагою Node.js є висока
продуктивність під час роботи з великою кількістю одночасних підключень.
Використання Node.js забезпечує:
– швидку обробку HTTP-запитів;
– підтримку асинхронного програмування;
– ефективну роботу з REST API;
– масштабованість серверної частини;
– інтеграцію з JavaScript-кодом клієнтської частини.
Для побудови REST API використовується Express.js – мінімалістичний
фреймворк для Node.js. Express.js забезпечує:
– маршрутизацію HTTP-запитів;
– роботу з middleware-компонентами;
60
– обробку помилок;
– інтеграцію з базою даних;
– підтримку REST-архітектури.
Для зберігання інформації використовується MongoDB –
документоорієнтована NoSQL система управління базами даних. Основною
перевагою MongoDB є гнучка структура документів, що дозволяє зберігати
товари з різними наборами характеристик.
Використання MongoDB забезпечує:
– зберігання даних у форматі JSON-подібних документів;
– високу швидкість обробки інформації;
– підтримку масштабування;
– зручну інтеграцію з Node.js;
– гнучкість структури бази даних.
Для взаємодії серверної частини з MongoDB використовується бібліотека
Mongoose. Вона забезпечує створення моделей даних, валідацію документів та
спрощує роботу з базою даних.
Для реалізації авторизації та захисту доступу використовується JWT
(JSON Web Token). JWT дозволяє створювати захищені токени автентифікації,
які використовуються під час доступу до захищених ресурсів системи.
Для захисту паролів використовується бібліотека bcrypt, яка забезпечує
хешування паролів перед їх збереженням у базі даних. Це підвищує рівень
безпеки системи та захищає дані користувачів від несанкціонованого доступу.
Для логування HTTP-запитів використовується Morgan. Дана бібліотека
дозволяє фіксувати запити користувачів та спрощує процес налагодження
серверної частини системи.
Конфігурація середовища виконується за допомогою dotenv.
Використання змінних середовища дозволяє приховати конфіденційні дані,
зокрема рядок підключення до бази даних та секретні ключі JWT.
Для тестування REST API використовується Postman. Цей інструмент
дозволяє виконувати HTTP-запити, перевіряти відповіді сервера та тестувати
роботу API до інтеграції з клієнтською частиною.
61
У процесі розробки програмного забезпечення використовується Visual
Studio Code — сучасне середовище розробки з підтримкою JavaScript, Node.js
та React. Для контролю версій використовується Git, який забезпечує
відстеження змін у програмному коді та підтримує командну розробку.
Для автоматичного перезапуску серверної частини під час розробки
використовується Nodemon. Це дозволяє швидко тестувати зміни у серверному
коді без ручного перезапуску сервера.
Для забезпечення безпеки WEB-застосунку використовуються:
– Helmet – захист HTTP-заголовків;
– CORS – контроль міждоменних запитів;
– валідація вхідних даних;
– JWT Authentication;
– bcrypt hashing.
У таблиці 2.1 наведено основні технології, використані під час реалізації
WEB-орієнтованої інформаційної системи «СКЛАД».
Таблиця 2.1 – Основні технології реалізації системи
Технологія Призначення
React Клієнтська частина WEB-застосунку
Node.js Серверна частина системи
Express.js Реалізація REST API
MongoDB Система управління базою даних
Mongoose Робота з MongoDB
Bootstrap 5 Оформлення інтерфейсу
Axios HTTP-запити
JWT Авторизація користувачів
bcrypt Хешування паролів
Morgan Логування запитів
Postman Тестування API
Git Контроль версій
Обраний стек технологій забезпечує створення сучасної WEB-
орієнтованої інформаційної системи складського обліку, що підтримує
62
адаптивний інтерфейс, високу швидкодію, масштабованість та безпечну роботу
з даними.
Таким чином, використання технологій React, Node.js, Express.js та
MongoDB дозволяє реалізувати ефективну WEB-орієнтовану інформаційну
систему «СКЛАД», придатну для автоматизації складського обліку магазину
комп’ютерної техніки та подальшого розширення функціональних
можливостей програмного забезпечення.
Висновки до розділу 2
У другому розділі кваліфікаційної роботи бакалавра виконано
проєктування WEB-орієнтованої інформаційної системи «СКЛАД» для
магазину комп’ютерної техніки. Розроблено загальну архітектуру програмної
системи та визначено основні принципи побудови клієнтської та серверної
частин WEB-застосунку.
У процесі проєктування визначено структуру WEB-застосунку,
функціональні модулі системи та особливості взаємодії між компонентами
програмного забезпечення. Для моделювання системи використано UML-
діаграми, що дозволило наочно представити структуру та логіку роботи
інформаційної системи.
Під час проєктування бази даних обґрунтовано використання MongoDB
як документоорієнтованої системи управління базами даних. Визначено
структуру основних колекцій та зв’язків між ними.
Також у розділі розглянуто питання проєктування користувацького
інтерфейсу та вибору сучасних технологій реалізації системи. У результаті
дослідження встановлено, що використання Node.js, Express.js, React та
MongoDB дозволяє створити масштабовану, продуктивну та зручну WEB-
орієнтовану інформаційну систему складського обліку.
Отримані результати є основою для подальшої програмної реалізації
WEB-орієнтованої інформаційної системи «СКЛАД», що розглядається у
наступному розділі кваліфікаційної роботи бакалавра.
63
3 ПРОГРАМНА РЕАЛІЗАЦІЯ WEB-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ
СИСТЕМИ
У третьому розділі кваліфікаційної роботи бакалавра розглянуто процес
програмної реалізації WEB-орієнтованої інформаційної системи «СКЛАД» для
магазину комп’ютерної техніки. Основну увагу приділено створенню серверної
та клієнтської частин WEB-застосунку, реалізації механізмів взаємодії між
компонентами системи та забезпеченню захисту даних користувачів.
У розділі описано реалізацію серверної частини системи на платформі
Node.js із використанням фреймворку Express.js. Розглянуто структуру REST
API, принципи маршрутизації HTTP-запитів, роботу контролерів, middleware-
компонентів та взаємодію серверної частини з базою даних MongoDB.
Також у розділі наведено особливості реалізації клієнтської частини
WEB-застосунку за допомогою бібліотеки React. Описано структуру React-
компонентів, реалізацію маршрутизації, використання Axios для обміну даними
із сервером та створення адаптивного інтерфейсу користувача із застосуванням
Bootstrap 5.
Окрему увагу приділено реалізації системи авторизації та захисту даних.
Розглянуто використання JWT-токенів для автентифікації користувачів,
механізми хешування паролів за допомогою bcrypt та middleware для перевірки
прав доступу до функціональних модулів системи.
У розділі також описано реалізацію CRUD-операцій для роботи з
товарами, механізмів пошуку та фільтрації продукції, а також створення
модулів аналітики та звітності для контролю складських операцій і формування
статистичної інформації.
Завершальна частина розділу присвячена інтеграції компонентів
програмної системи та організації взаємодії між клієнтською частиною,
сервером і базою даних. Результати програмної реалізації підтверджують
можливість створення сучасної WEB-орієнтованої інформаційної системи
складського обліку із використанням технологій MERN Stack.
64
3.1 Реалізація серверної частини системи
Серверна частина WEB-орієнтованої інформаційної системи «СКЛАД»
реалізована на платформі Node.js із використанням фреймворку Express.js.
Основним призначенням серверної частини є обробка HTTP-запитів, реалізація
бізнес-логіки системи, взаємодія з базою даних MongoDB та забезпечення
безпечної роботи WEB-застосунку.
Архітектура серверної частини побудована за модульним принципом, що
дозволяє розділити функціональність системи на окремі незалежні компоненти.
Такий підхід забезпечує масштабованість програмного забезпечення, спрощує
тестування та полегшує подальшу підтримку коду.
Структуру серверної частини системи наведено на рисунку 3.1.
Рисунок 3.1 – Структура серверної частини WEB-орієнтованої інформаційної
системи.
Серверна частина складається з таких основних компонентів:
– маршрути (Routes);
– контролери (Controllers);
– моделі (Models);
– middleware-компоненти;
65
– сервіси (Services);
– модулі взаємодії з базою даних.
Основною точкою входу до серверної частини є файл server.js, у якому
виконується:
– ініціалізація Express-сервера;
– підключення middleware;
– підключення маршрутів REST API;
– підключення до MongoDB;
– запуск HTTP-сервера.
Приклад ініціалізації сервера:
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const dotenv = require("dotenv");
dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());
mongoose.connect(process.env.MONGO_URI);
app.listen(process.env.PORT, () => {
console.log("Server started");
});
Для маршрутизації HTTP-запитів використовуються Express Router-
модулі. Кожен функціональний модуль системи має власний файл
маршрутизації.
Приклад маршруту для роботи з товарами:
const router = require("express").Router();
const productController = require("../controllers/productController");
router.get("/", productController.getProducts);
router.post("/", productController.createProduct);
66
router.put("/:id", productController.updateProduct);
router.delete("/:id", productController.deleteProduct);
module.exports = router;
Контролери забезпечують обробку HTTP-запитів та взаємодію з
моделями бази даних.
Приклад контролера:
exports.getProducts = async (req, res) => {
const products = await Product.find();
res.json(products);
};
Для роботи з MongoDB використовуються моделі Mongoose.
Приклад моделі товару:
const mongoose = require("mongoose");
const productSchema = new mongoose.Schema({
name: String,
category: String,
price: Number,
quantity: Number
});
module.exports = mongoose.model("Product", productSchema);
Для забезпечення безпеки системи використовуються middleware-
компоненти:
– JWT Authentication;
– перевірка ролей користувачів;
– валідація даних;
– обробка помилок;
– логування запитів.
67
3.2 Реалізація клієнтської частини WEB-застосунку
Клієнтська частина WEB-застосунку реалізована за допомогою бібліотеки
React. WEB-застосунок створено за принципом SPA (Single Page Application),
що забезпечує швидке оновлення інтерфейсу без перезавантаження сторінки.
Структуру клієнтської частини системи наведено на рисунку 3.2.
Рисунок 3.2 – Структура клієнтської частини WEB-застосунку
Основними компонентами клієнтської частини є:
– DashboardPage;
– ProductsPage;
– OrdersPage;
– WarehousesPage;
– ReportsPage;
– LoginPage;
– SettingsPage.
Для реалізації маршрутизації використовується React Router.
Приклад маршрутизації:
import { BrowserRouter, Routes, Route } from "react-router-dom";
68
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<DashboardPage />} />
<Route path="/products" element={<ProductsPage />} />
</Routes>
</BrowserRouter>
);
}
Для обміну даними із серверною частиною використовується Axios.
Приклад HTTP-запиту:
import axios from "axios";
const fetchProducts = async () => {
const response = await axios.get("/api/products");
return response.data;
};
Інтерфейс користувача реалізовано із використанням Bootstrap 5 та CSS3.
Для створення адаптивного дизайну використовується Bootstrap Grid System.
3.3 Реалізація системи авторизації та захисту даних
Для забезпечення безпечного доступу до системи реалізовано систему
авторизації та автентифікації користувачів на основі JWT (JSON Web Token).
Схему системи авторизації користувачів наведено на рисунку 3.3.
69
Рисунок 3.3 – Схема системи авторизації користувачів
Після введення логіна та пароля клієнтська частина надсилає запит до
сервера. Сервер перевіряє облікові дані користувача та створює JWT-токен.
Приклад створення JWT-токена:
const jwt = require("jsonwebtoken");
const token = jwt.sign(
{ id: user._id, role: user.role },
process.env.JWT_SECRET,
{ expiresIn: "24h" }
);
Паролі користувачів зберігаються у хешованому вигляді із
використанням bcrypt.
Приклад хешування пароля:
const bcrypt = require("bcrypt");
const salt = await bcrypt.genSalt(10);
const hash = await bcrypt.hash(password, salt);
Для захисту API використовується middleware перевірки токена:
70
const jwt = require("jsonwebtoken");
module.exports = (req, res, next) => {
const token = req.headers.authorization;
if (!token) {
return res.status(401).json({ message: "Unauthorized" });
}
try {
const verified = jwt.verify(token, process.env.JWT_SECRET);
req.user = verified;
next();
} catch {
res.status(403).json({ message: "Invalid token" });
}
};
3.4 Реалізація CRUD-операцій для роботи з товарами
Для роботи з товарами у системі реалізовано CRUD-операції:
– Create;
– Read;
– Update;
– Delete.
Інтерфейс керування товарами наведено на рисунку 3.4.
71
Рисунок 3.4 – Інтерфейс роботи з товарами
Створення товару реалізується через POST-запит:
router.post("/", async (req, res) => {
const product = new Product(req.body);
await product.save();
res.json(product);
});
Отримання списку товарів:
router.get("/", async (req, res) => {
const products = await Product.find();
res.json(products);
});
Оновлення товару:
router.put("/:id", async (req, res) => {
const updated = await Product.findByIdAndUpdate(
req.params.id,
req.body,
72
{ new: true }
);
res.json(updated);
});
Видалення товару:
router.delete("/:id", async (req, res) => {
await Product.findByIdAndDelete(req.params.id);
res.json({ message: "Deleted" });
});
3.5 Реалізація системи пошуку та фільтрації
Для швидкого пошуку товарів у системі реалізовано механізм пошуку та
фільтрації.
Інтерфейс пошуку товарів наведено на рисунку 3.5.
Рисунок 3.5 – Система пошуку та фільтрації товарів
Пошук виконується за:
– назвою товару;
– категорією;
73
– виробником;
– складом;
– серійним номером.
Приклад реалізації пошуку:
router.get("/search", async (req, res) => {
const query = req.query.q;
const products = await Product.find({
name: { $regex: query, $options: "i" }
});
res.json(products);
});
Для фільтрації використовуються параметри URL-запиту.
3.6 Реалізація модулів аналітики та звітності
Для аналізу роботи складу реалізовано модуль аналітики та звітності.
Інтерфейс модуля звітності наведено на рисунку 3.6.
Рисунок 3.6 – Модуль аналітики та звітності
Система підтримує формування:
– звіту про залишки товарів;
– звіту про рух товарів;
– звіту про замовлення;
– звіту про складські операції.
Для побудови графіків використовується бібліотека Chart.js.
Приклад побудови графіка:
const data = {
labels: ["Пн", "Вт", "Ср"],
datasets: [
{
label: "Продажі",
data: [12, 19, 7]
74
}
]
};
Система також підтримує експорт звітів у PDF та Excel.
3.7 Інтеграція компонентів програмної системи
Інтеграція компонентів забезпечує взаємодію між клієнтською частиною,
сервером та базою даних.
Схему інтеграції компонентів наведено на рисунку 3.7.
Рисунок 3.7 – Інтеграція компонентів WEB-орієнтованої інформаційної
системи
Клієнтська частина взаємодіє із сервером через REST API. Серверна
частина виконує бізнес-логіку та звертається до MongoDB.
Основними етапами взаємодії є:
– формування HTTP-запиту;
– перевірка авторизації;
– виконання бізнес-логіки;
– взаємодія з MongoDB;
75
– повернення JSON-відповіді клієнту.
Для забезпечення стабільної роботи системи використовуються:
– JWT Authentication;
– middleware;
– логування запитів;
– обробка помилок;
– перевірка вхідних даних.
Висновки до розділу 3
У третьому розділі виконано програмну реалізацію WEB-орієнтованої
інформаційної системи «СКЛАД» для магазину комп’ютерної техніки із
використанням сучасного стеку технологій MERN (MongoDB, Express.js, React,
Node.js).
У процесі реалізації створено серверну частину системи на платформі
Node.js із використанням фреймворку Express.js. Реалізовано REST API для
взаємодії між клієнтською частиною та базою даних, а також організовано
маршрутизацію HTTP-запитів, обробку даних та реалізацію бізнес-логіки
складського обліку.
Клієнтська частина WEB-застосунку реалізована за допомогою React із
використанням компонентного підходу. Розроблено адаптивний інтерфейс
користувача, що забезпечує зручну роботу з товарами, складськими
операціями, замовленнями та звітністю. Для обміну даними між клієнтською та
серверною частинами використано Axios та REST API.
У межах реалізації системи створено механізм авторизації та захисту
даних користувачів із використанням JWT-токенів та бібліотеки bcrypt для
хешування паролів. Це дозволило забезпечити безпечний доступ до
функціональних модулів системи та розмежування прав користувачів
відповідно до їх ролей.
Також у розділі реалізовано CRUD-операції для роботи з товарами,
механізми пошуку та фільтрації продукції, а також модулі аналітики та
звітності. Реалізовані функції забезпечують можливість автоматизованого
76
ведення складського обліку, контролю залишків товарів, обробки замовлень та
формування аналітичної інформації.
Особливу увагу приділено інтеграції компонентів програмної системи та
організації взаємодії між клієнтською частиною, сервером і базою даних
MongoDB. Реалізована архітектура забезпечує стабільну роботу WEB-
застосунку, підтримує багатокористувацький режим та дозволяє масштабувати
систему у разі розширення функціональності.
Отримані результати підтверджують ефективність використання
сучасних WEB-технологій для створення інформаційних систем складського
обліку та демонструють можливість практичного використання розробленої
WEB-орієнтованої інформаційної системи «СКЛАД» у діяльності магазину
комп’ютерної техніки.
77
4 ТЕСТУВАННЯ ТА АНАЛІЗ РЕЗУЛЬТАТІВ РОБОТИ СИСТЕМИ
У четвертому розділі кваліфікаційної роботи бакалавра виконано
тестування та аналіз результатів роботи WEB-орієнтованої інформаційної
системи «СКЛАД» для магазину комп’ютерної техніки. Основну увагу
приділено перевірці функціональних можливостей програмної системи, оцінці
продуктивності серверної та клієнтської частин, а також аналізу якості
користувацького інтерфейсу.
У розділі наведено методику тестування програмного забезпечення, яка
включає функціональне, інтеграційне, модульне, кросбраузерне та
навантажувальне тестування. Розглянуто основні етапи перевірки роботи
системи, зокрема тестування авторизації користувачів, CRUD-операцій для
роботи з товарами, системи пошуку та фільтрації, формування звітів і
виконання складських операцій.
Також у розділі проведено аналіз продуктивності та ефективності роботи
WEB-застосунку. Оцінено швидкість обробки HTTP-запитів, час формування
звітів, стабільність роботи серверної частини та швидкодію системи під час
одночасної роботи кількох користувачів.
Окрему увагу приділено аналізу якості користувацького інтерфейсу.
Досліджено зручність навігації, адаптивність WEB-застосунку, коректність
відображення інформації та загальну ергономіку інтерфейсу. Результати
тестування підтвердили стабільну роботу програмної системи та можливість її
практичного використання для автоматизації складського обліку магазину
комп’ютерної техніки.
4.1 Методика тестування програмного забезпечення
Тестування програмного забезпечення є важливим етапом розробки
WEB-орієнтованої інформаційної системи «СКЛАД», оскільки дозволяє
перевірити правильність роботи функціональних модулів, стабільність системи,
продуктивність серверної частини та зручність користувацького інтерфейсу.
78
Основною метою тестування є виявлення помилок у роботі програмної
системи, перевірка коректності виконання складських операцій, оцінка
швидкодії WEB-застосунку та підтвердження відповідності реалізованого
функціоналу поставленим вимогам.
Методику тестування програмного забезпечення наведено на рисунку 4.1.
Рисунок 4.1 – Методика тестування програмного забезпечення
Під час тестування WEB-орієнтованої інформаційної системи
використовувалися такі види тестування:
– функціональне тестування;
– модульне тестування;
– інтеграційне тестування;
– тестування безпеки;
– тестування продуктивності;
– тестування користувацького інтерфейсу;
– кросбраузерне тестування.
Функціональне тестування використовувалося для перевірки роботи
основних функціональних модулів системи:
– авторизації користувачів;
79
– роботи з товарами;
– складських операцій;
– замовлень;
– звітності;
– пошуку та фільтрації.
Модульне тестування дозволило перевірити коректність роботи окремих
компонентів серверної та клієнтської частин системи. Для тестування API
використовувався Postman, а для перевірки клієнтських компонентів –
вбудовані засоби React Developer Tools.
Інтеграційне тестування застосовувалося для перевірки взаємодії між
клієнтською частиною, сервером та базою даних MongoDB. Особливу увагу
приділено перевірці передачі даних через REST API та обробці помилок.
Тестування безпеки виконувалося для перевірки:
– коректності роботи JWT-авторизації;
– захисту маршрутів;
– перевірки прав доступу;
– безпечного зберігання паролів;
– обробки некоректних запитів.
Для оцінки продуктивності системи виконувалося тестування швидкодії
серверної частини та перевірка часу обробки HTTP-запитів. Аналіз проводився
під час виконання CRUD-операцій, формування звітів та роботи системи
пошуку.
Кросбраузерне тестування проводилося у браузерах:
– Google Chrome;
– Mozilla Firefox;
– Microsoft Edge;
– Opera.
Також перевірялася адаптивність WEB-застосунку на різних типах
пристроїв:
– персональних комп’ютерах;
– планшетах;
80
– смартфонах.
Для проведення тестування використовувалося таке програмне
забезпечення:
– Postman;
– Google Chrome DevTools;
– MongoDB Compass;
– React Developer Tools;
– Lighthouse;
– Visual Studio Code.
Під час тестування перевірялися:
– коректність відображення інтерфейсу;
– швидкість роботи системи;
– стабільність серверної частини;
– правильність обробки помилок;
– робота авторизації;
– коректність збереження даних у MongoDB.
4.2 Тестування функціональних можливостей системи
Тестування функціональних можливостей системи виконувалося для
перевірки коректності роботи основних функціональних модулів WEB-
орієнтованої інформаційної системи «СКЛАД». Процес тестування
функціональних можливостей наведено на рисунку 4.2.
81
Рисунок 4.2 – Тестування функціональних можливостей системи
У процесі тестування було перевірено:
– авторизацію користувачів;
– додавання товарів;
– редагування товарів;
– видалення товарів;
– виконання складських операцій;
– роботу пошуку;
– формування звітів;
– роботу системи сповіщень.
Результати функціонального тестування наведено у таблиці 4.1.
Таблиця 4.1 – Результати функціонального тестування
Функція Результат
Авторизація користувача Виконано успішно
Додавання товару Виконано успішно
Редагування товару Виконано успішно
Видалення товару Виконано успішно
Пошук товару Виконано успішно
82
Формування звітів Виконано успішно
Робота фільтрів Виконано успішно
Обробка помилок Виконано успішно
У результаті тестування встановлено, що всі функціональні модулі
системи працюють коректно та забезпечують виконання поставлених задач
складського обліку.
4.3 Аналіз продуктивності та ефективності роботи системи
Для оцінки продуктивності WEB-орієнтованої інформаційної системи
було проведено аналіз швидкодії серверної та клієнтської частин.
Аналіз продуктивності системи наведено на рисунку 4.3.
Рисунок 4.3 – Аналіз продуктивності та ефективності роботи системи
Під час тестування оцінювалися:
– час завантаження сторінок;
– час виконання CRUD-операцій;
– швидкість формування звітів;
– швидкість роботи пошуку;
– навантаження на сервер.
83
У результаті тестування встановлено:
– середній час відповіді сервера становить 120–250 мс;
– час формування звітів не перевищує 2 секунд;
– пошук товарів виконується менше ніж за 1 секунду;
– система стабільно працює при одночасному підключенні кількох
користувачів.
Для оптимізації продуктивності було використано:
– індексацію MongoDB;
– асинхронну обробку запитів;
– оптимізацію React-компонентів;
– кешування окремих запитів;
– пагінацію таблиць.
Проведений аналіз підтвердив достатній рівень продуктивності системи
для використання у магазині комп’ютерної техніки.
4.4 Аналіз якості користувацького інтерфейсу
Якість користувацького інтерфейсу є важливим показником ефективності
WEB-застосунку, оскільки впливає на швидкість роботи користувача та
зручність взаємодії із системою.
Аналіз якості користувацького інтерфейсу наведено на рисунку 4.4.
Рисунок 4.4 – Аналіз якості користувацького інтерфейсу
84
Під час аналізу інтерфейсу оцінювалися:
– зручність навігації;
– логічність розташування елементів;
– швидкість виконання операцій;
– адаптивність;
– коректність відображення інформації;
– візуальне оформлення.
Інтерфейс системи має:
– адаптивний дизайн;
– зрозумілу структуру меню;
– швидкий доступ до функціональних модулів;
– систему повідомлень та сповіщень;
– сучасне оформлення.
У результаті тестування встановлено, що WEB-застосунок коректно
працює на різних роздільних здатностях екрана та забезпечує комфортну
роботу користувача.
4.5 Оцінка результатів роботи програмної системи
Оцінка результатів роботи WEB-орієнтованої інформаційної системи
виконувалася для визначення ефективності автоматизації складського обліку
магазину комп’ютерної техніки. Результати оцінювання роботи системи
наведено на рисунку 4.5.
Рисунок 4.5 – Оцінка результатів роботи програмної системи
85
У результаті впровадження системи забезпечено:
– автоматизацію складського обліку;
– централізоване зберігання інформації;
– швидкий доступ до даних;
– контроль залишків товарів;
– автоматизацію формування звітності;
– зменшення кількості помилок під час роботи з товарами.
Порівняно з традиційними методами обліку використання WEB-
орієнтованої інформаційної системи дозволяє:
– зменшити час обробки інформації;
– прискорити виконання складських операцій;
– покращити контроль руху товарів;
– підвищити ефективність роботи персоналу.
У процесі тестування не було виявлено критичних помилок, що
впливають на стабільність роботи системи. Усі функціональні модулі
працюють відповідно до поставлених вимог.
Висновки до розділу 4
У четвертому розділі кваліфікаційної роботи бакалавра виконано
тестування та аналіз результатів роботи WEB-орієнтованої інформаційної
системи «СКЛАД» для магазину комп’ютерної техніки.
Було сформовано методику тестування програмного забезпечення та
проведено перевірку функціональних можливостей системи. Під час тестування
підтверджено коректність роботи серверної та клієнтської частин WEB-
застосунку, механізмів авторизації, CRUD-операцій, системи пошуку та
формування звітності.
Проведений аналіз продуктивності показав стабільну роботу серверної
частини та достатню швидкість обробки HTTP-запитів. Реалізована система
забезпечує швидке виконання основних складських операцій та підтримує
багатокористувацький режим роботи.
86
Також виконано аналіз якості користувацького інтерфейсу, у результаті
якого встановлено, що WEB-застосунок має адаптивний дизайн, зручну
навігацію та забезпечує комфортну взаємодію користувача із системою.
Результати тестування підтверджують ефективність використання
розробленої WEB-орієнтованої інформаційної системи для автоматизації
складського обліку магазину комп’ютерної техніки та демонструють
можливість її практичного використання у діяльності торговельного
підприємства.
87
ВИСНОВКИ
У результаті виконання кваліфікаційної роботи бакалавра було
розроблено WEB-орієнтовану інформаційну систему «СКЛАД» для магазину
комп’ютерної техніки. У процесі роботи виконано аналіз предметної області,
досліджено особливості складського обліку та сучасні технології створення
WEB-застосунків, а також реалізовано повноцінну програмну систему для
автоматизації основних складських процесів.
Під час виконання роботи було проведено аналіз особливостей
складського обліку у магазинах комп’ютерної техніки та визначено основні
проблеми традиційного способу ведення обліку, серед яких:
– значні витрати часу на обробку інформації;
– складність контролю залишків товарів;
– ймовірність виникнення помилок під час ручного введення даних;
– недостатня швидкість формування звітності;
– складність контролю руху товарів між складами.
У процесі дослідження виконано аналіз сучасних WEB-орієнтованих
систем управління складом, методів автоматизації складських процесів та
сучасних технологій WEB-розробки. Обґрунтовано доцільність використання
стеку технологій MERN (MongoDB, Express.js, React, Node.js) для реалізації
програмної системи.
У межах роботи було спроєктовано архітектуру WEB-орієнтованої
інформаційної системи «СКЛАД», структуру бази даних, UML-діаграми та
модулі складського обліку. Реалізовано багаторівневу клієнт-серверну
архітектуру, що забезпечує взаємодію між клієнтською частиною, сервером та
базою даних.
Для зберігання інформації використано MongoDB, що дозволило
реалізувати гнучку структуру даних для товарів різних категорій комп’ютерної
техніки. Серверна частина системи реалізована на платформі Node.js із
використанням Express.js та REST API. Клієнтська частина WEB-застосунку
створена за допомогою React із використанням компонентного підходу та
адаптивного дизайну.
88
У процесі програмної реалізації створено:
– систему авторизації користувачів;
– модуль роботи з товарами;
– систему складських операцій;
– модуль замовлень;
– систему пошуку та фільтрації;
– механізми захисту даних.
Для забезпечення безпеки системи використано JWT-авторизацію,
хешування паролів за допомогою bcrypt та middleware-компоненти для
перевірки прав доступу користувачів.
Під час тестування програмної системи перевірено функціональні
можливості WEB-застосунку, продуктивність серверної частини, коректність
роботи бази даних та якість користувацького інтерфейсу. Результати
тестування підтвердили стабільну роботу системи, правильність виконання
CRUD-операцій, швидку обробку HTTP-запитів та коректну роботу механізмів
пошуку і фільтрації.
Проведений аналіз продуктивності показав, що середній час відповіді
сервера становить 120–250 мс, а система підтримує одночасну роботу кількох
користувачів без суттєвого зниження швидкодії. Також підтверджено
адаптивність WEB-застосунку та коректне відображення інтерфейсу на різних
типах пристроїв.
Практичне значення отриманих результатів полягає у можливості
використання розробленої WEB-орієнтованої інформаційної системи для
автоматизації складського обліку магазину комп’ютерної техніки.
Використання системи дозволяє підвищити ефективність роботи персоналу,
зменшити кількість помилок під час обробки інформації, прискорити
формування звітності та забезпечити контроль руху товарів у режимі реального
часу. Отримані результати підтверджують ефективність використання сучасних
WEB-технологій для створення інформаційних систем складського обліку та
демонструють перспективність подальшого розвитку WEB-орієнтованих
систем автоматизації торговельних підприємств.
89
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Алексєєв О. П. Web-програмування : навч. посіб. / О. П. Алексєєв, В. М.
Науменко. – Київ : КПІ ім. Ігоря Сікорського, 2021. 320 с.
2. Басюк Т. М. Організація баз даних та знань : навч. посіб. / Т. М. Басюк, П.
І. Жежнич. – Львів : Львівська політехніка, 2020. 240 с.
3. Биков В. Ю. Інформаційні системи та технології : підручник / В. Ю.
Биков. – Київ : Центр учбової літератури, 2021. 380 с.
4. Глинський Я. М. Практикум з інформатики : навч. посіб. / Я. М.
Глинський. – Львів : Деол, 2020. 352 с.
5. Грабовський П. П. Проєктування інформаційних систем : навч. посіб. / П.
П. Грабовський. – Київ : Каравела, 2022. 296 с.
6. ДСТУ 3008:2015. Інформація та документація. Звіти у сфері науки і
техніки. Структура та правила оформлення. – Чинний від 2017-07-01. –
Київ : ДП «УкрНДНЦ», 2016. 31 с.
7. Жалдак М. І. Інформаційні системи та мережі : навч. посіб. / М. І.
Жалдак. – Київ : Вища школа, 2021. 412 с.
8. Ковальчук В. В. Основи баз даних : навч. посіб. / В. В. Ковальчук. – Київ :
Центр навчальної літератури, 2021. 256 с.
9. Литвин В. В. Бази даних та інформаційні системи : підручник / В. В.
Литвин. – Львів : Новий Світ – 2000, 2022. 488 с.
10. Мельник А. О. Архітектура комп’ютерних систем та мереж : навч. посіб. /
А. О. Мельник. – Київ : Академвидав, 2020. 384 с.
11. Пасічник В. В. Організація баз даних та знань : підручник / В. В.
Пасічник, В. А. Резніченко. – Київ : BHV, 2021. 384 с.
12. Семеріков С. О. Інформаційні технології : навч. посіб. / С. О. Семеріков. –
Кривий Ріг : КНУ, 2020. 478 с.
13. Фленаган Д. JavaScript. Детальний посібник / Д. Фленаган. – 7-ме вид. –
Київ : КМ-Букс, 2021. 704 с.
14. Freeman A. Pro React 18 / Adam Freeman. – New York : Apress, 2023. 1080
p.
90
15. Holovaty M. Node.js in Action / Mike Cantelon, Marc Harter, T. J.
Holowaychuk, Nathan Rajlich. – 2nd ed. – Shelter Island : Manning
Publications, 2018. 440 p.
16. Kleppmann M. Designing Data-Intensive Applications / Martin Kleppmann. –
Sebastopol : O’Reilly Media, 2017. 616 p.
17. Marc Wandschneider. Learning Node.js Development / Marc Wandschneider.
– Birmingham : Packt Publishing, 2017. 388 p.
18. MDN Web Docs. URL: https://developer.mozilla.org/en-US/.
19. MongoDB Documentation. URL:
https://www.mongodb.com/docs/?utm_source=google&utm_campaign=search
_gs_pl_evergreen_mongodb_general_retarget-brand-allvisitors_gic-null_emea-
ua_ps-
all_desktop_eng_lead&utm_term=mongo%20database%20management&utm_
medium=cpc_paid_search&utm_ad=p&utm_ad_campaign_id=23873391344&
adgroup=197217889336&cq_cmp=23873391344&gad_source=1&gad_campai
gnid=23873391344&gbraid=0AAAAADQ1400oSRvw3fgYCwaxGTQN5-
jtI&gclid=EAIaIQobChMImv6b5-
PalAMVfUGRBR3ItS1YEAAYASABEgKCl_D_BwE.
20. Node.js Documentation. URL: https://nodejs.org/docs/latest/api/.
21. React Documentation. URL: https://react.dev/learn.
22. Robbins J. N. Learning Web Design / Jennifer Niederst Robbins. – 5th ed. –
Sebastopol : O’Reilly Media, 2018. 878 p.
23. Tilkov S. RESTful Web Services / Leonard Richardson, Sam Ruby. –
Sebastopol : O’Reilly Media, 2007. 448 p.
24. Welling L. PHP and MySQL Web Development / Luke Welling, Laura
Thomson. – 5th ed. – Boston : Addison-Wesley, 2017. 768 p.
25. W3Schools Online Web Tutorials. URL: http://www.w3schools.com/js/.
26. Bootstrap Documentation. URL: https://getbootstrap.com/docs/4.1/getting-
started/introduction/.
27. Express.js Documentation. URL: https://expressjs.com/en/.
28. Postman API Platform Documentation. URL: https://learning.postman.com/.
91
29. JSON Web Tokens Introduction. URL: https://www.jwt.io/introduction.
30. Visual Studio Code Documentation. URL: https://code.visualstudio.com/docs.
92
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
_________ Юрій ТРИУС
«____»____________2026 р.
WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА "СКЛАД" ДЛЯ
МАГАЗИНУ КОМП’ЮТЕРНОЇ ТЕХНІКИ
Специфікація
482.ЧДТУ.62297-01
Листів 2
Розробник ____________________ Янченко В.О.
Керівник ____________________ Дяченко П.В.
Черкаси – 2026
93
482.ЧДТУ. 62297-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 62297-01 12 01 Лістинг коду програми
482.ЧДТУ. 62297-01 34 01 Інтерфейс користувача
WEB-застосунку
482.ЧДТУ. 62297-01 91 01 Результати тестування
програмної системи
94
ДОДАТОК Б
WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА "СКЛАД" ДЛЯ
МАГАЗИНУ КОМП’ЮТЕРНОЇ ТЕХНІКИ
ЛІСТИНГ КОДУ ПРОГРАМИ
482. ЧДТУ 62297-01 12 01
Листів 4
Розробник: Янченко В.О.
Керівник: Дяченко П.В.
Черкаси – 2026
95
Лістинг коду програми
Б.1 Серверна частина WEB-орієнтованої інформаційної системи
Б.1.1 Файл server.js
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const dotenv = require("dotenv");
const authRoutes = require("./routes/authRoutes");
const productRoutes = require("./routes/productRoutes");
dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());
app.use("/api/auth", authRoutes);
app.use("/api/products", productRoutes);
mongoose
.connect(process.env.MONGO_URI)
.then(() => console.log("MongoDB connected"))
.catch((error) => console.log(error));
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
console.log(`Server started on port ${PORT}`);
});
Б.1.2 Файл models/User.js
const mongoose = require("mongoose");
const userSchema = new mongoose.Schema(
{
fullName: {
type: String,
required: true
},
email: {
type: String,
required: true,
unique: true
},
passwordHash: {
type: String,
required: true
},
role: {
type: String,
enum: ["admin", "manager", "seller"],
default: "seller"
}
},
96
{ timestamps: true }
);
module.exports = mongoose.model("User", userSchema);
Б.1.3 Файл models/Product.js
const mongoose = require("mongoose");
const productSchema = new mongoose.Schema(
{
name: {
type: String,
required: true
},
category: {
type: String,
required: true
},
manufacturer: {
type: String
},
model: {
type: String
},
article: {
type: String,
unique: true
},
serialNumber: {
type: String
},
price: {
type: Number,
required: true
},
quantity: {
type: Number,
default: 0
},
warehouse: {
type: String,
default: "Основний склад"
},
description: {
type: String
}
},
{ timestamps: true }
);
module.exports = mongoose.model("Product", productSchema);
97
Б.1.4 Файл middleware/authMiddleware.js
const jwt = require("jsonwebtoken");
const authMiddleware = (req, res, next) => {
const authHeader = req.headers.authorization;
if (!authHeader) {
return res.status(401).json({
message: "Немає токена авторизації"
});
}
const token = authHeader.split(" ")[1];
try {
const decoded = jwt.verify(
token,
process.env.JWT_SECRET
);
req.user = decoded;
next();
} catch (error) {
return res.status(403).json({
message: "Недійсний токен"
});
}
};
module.exports = authMiddleware;
Б.1.5 Файл routes/authRoutes.js
const express = require("express");
const bcrypt = require("bcrypt");
const jwt = require("jsonwebtoken");
const User = require("../models/User");
const router = express.Router();
router.post("/register", async (req, res) => {
try {
const {
fullName,
email,
password,
role
} = req.body;
const existingUser =
await User.findOne({ email });
if (existingUser) {
return res.status(400).json({
message: "Користувач уже існує"
});
}
const passwordHash =
await bcrypt.hash(password, 10);
98
const user = await User.create({
fullName,
email,
passwordHash,
role
});
res.status(201).json({
message: "Користувача створено",
user
});
} catch (error) {
res.status(500).json({
message: "Помилка сервера"
});
}
});
router.post("/login", async (req, res) => {
try {
const {
email,
password
} = req.body;
const user =
await User.findOne({ email });
if (!user) {
return res.status(401).json({
message: "Невірний email або пароль"
});
}
const isPasswordValid =
await bcrypt.compare(
password,
user.passwordHash
);
if (!isPasswordValid) {
return res.status(401).json({
message: "Невірний email або пароль"
});
}
const token = jwt.sign(
{
id: user._id,
role: user.role
},
process.env.JWT_SECRET,
{
expiresIn: "24h"
}
);
res.json({
token,
user: {
id: user._id,
fullName: user.fullName,
email: user.email,
role: user.role
}
99
});
} catch (error) {
res.status(500).json({
message: "Помилка авторизації"
});
}
});
module.exports = router;
Б.1.6 Файл routes/productRoutes.js
const express = require("express");
const Product = require("../models/Product");
const authMiddleware =
require("../middleware/authMiddleware");
const router = express.Router();
router.get(
"/",
authMiddleware,
async (req, res) => {
try {
const products =
await Product.find();
res.json(products);
} catch (error) {
res.status(500).json({
message: "Помилка отримання товарів"
});
}
}
);
router.post(
"/",
authMiddleware,
async (req, res) => {
try {
const product =
await Product.create(req.body);
res.status(201).json(product);
} catch (error) {
res.status(500).json({
message: "Помилка створення товару"
});
}
}
);
router.put(
"/:id",
authMiddleware,
async (req, res) => {
try {
100
const product =
await Product.findByIdAndUpdate(
req.params.id,
req.body,
{ new: true }
);
res.json(product);
} catch (error) {
res.status(500).json({
message: "Помилка оновлення товару"
});
}
}
);
router.delete(
"/:id",
authMiddleware,
async (req, res) => {
try {
await Product.findByIdAndDelete(
req.params.id
);
res.json({
message: "Товар видалено"
});
} catch (error) {
res.status(500).json({
message: "Помилка видалення товару"
});
}
}
);
module.exports = router;
Б.2 Клієнтська частина WEB-застосунку
Б.2.1 Файл src/api.js
import axios from "axios";
const api = axios.create({
baseURL: "http://localhost:5000/api"
});
api.interceptors.request.use((config) => {
const token =
localStorage.getItem("token");
if (token) {
config.headers.Authorization =
`Bearer ${token}`;
}
return config;
});
export default api;
101
Б.2.2 Файл src/App.jsx
import {
BrowserRouter,
Routes,
Route,
Navigate
} from "react-router-dom";
import LoginPage from "./pages/LoginPage";
import DashboardPage from "./pages/DashboardPage";
import ProductsPage from "./pages/ProductsPage";
function App() {
const token =
localStorage.getItem("token");
return (
<BrowserRouter>
<Routes>
<Route
path="/login"
element={<LoginPage />}
/>
<Route
path="/"
element={
token
? <DashboardPage />
: <Navigate to="/login" />
}
/>
<Route
path="/products"
element={
token
? <ProductsPage />
: <Navigate to="/login" />
}
/>
</Routes>
</BrowserRouter>
);
}
export default App;
Б.2.3 Файл src/pages/LoginPage.jsx
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import api from "../api";
function LoginPage() {
102
const navigate = useNavigate();
const [form, setForm] = useState({
email: "",
password: ""
});
const handleChange = (event) => {
setForm({
...form,
[event.target.name]:
event.target.value
});
};
const handleLogin = async (event) => {
event.preventDefault();
try {
const response =
await api.post(
"/auth/login",
form
);
localStorage.setItem(
"token",
response.data.token
);
navigate("/");
} catch (error) {
alert("Помилка авторизації");
}
};
return (
<div className="login-page">
<form
className="login-form"
onSubmit={handleLogin}
>
<h2>Система «СКЛАД»</h2>
<input
type="email"
name="email"
placeholder="Email"
onChange={handleChange}
/>
<input
type="password"
name="password"
placeholder="Пароль"
onChange={handleChange}
/>
<button type="submit">
103
Увійти
</button>
</form>
</div>
);
}
export default LoginPage;
Б.2.4 Файл src/pages/DashboardPage.jsx
import { Link } from "react-router-dom";
function DashboardPage() {
return (
<div className="layout">
<aside className="sidebar">
<h2>СКЛАД</h2>
<Link to="/">
Панель керування
</Link>
<Link to="/products">
Товари
</Link>
</aside>
<main className="content">
<h1>
Панель керування
</h1>
<div className="cards">
<div className="card">
<h3>Товарів</h3>
<p>1248</p>
</div>
<div className="card">
<h3>Замовлень</h3>
<p>56</p>
</div>
<div className="card">
<h3>Операцій</h3>
<p>342</p>
</div>
</div>
</main>
</div>
);
}
104
export default DashboardPage;
Б.2.5 Файл src/pages/ProductsPage.jsx
import {
useEffect,
useState
} from "react";
import api from "../api";
function ProductsPage() {
const [products, setProducts] =
useState([]);
useEffect(() => {
fetchProducts();
}, []);
const fetchProducts = async () => {
const response =
await api.get("/products");
setProducts(response.data);
};
return (
<div className="products-page">
<h1>Товари</h1>
<table>
<thead>
<tr>
<th>Назва</th>
<th>Категорія</th>
<th>Ціна</th>
<th>Кількість</th>
</tr>
</thead>
<tbody>
{products.map((product) => (
<tr key={product._id}>
<td>{product.name}</td>
<td>{product.category}</td>
<td>{product.price}</td>
<td>{product.quantity}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default ProductsPage;
105
Б.2.6 Файл styles.css
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f4f7fb;
}
.layout {
display: flex;
}
.sidebar {
width: 240px;
min-height: 100vh;
background: #0f172a;
color: white;
padding: 20px;
}
.sidebar a {
display: block;
color: white;
text-decoration: none;
margin-bottom: 15px;
}
.content {
flex: 1;
padding: 30px;
}
.cards {
display: flex;
gap: 20px;
}
.card {
background: white;
padding: 20px;
border-radius: 10px;
width: 200px;
}
.login-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.login-form {
width: 320px;
background: white;
padding: 30px;
border-radius: 12px;
}
.login-form input {
width: 100%;
margin-bottom: 15px;
padding: 10px;
}
.login-form button {
width: 100%;
padding: 10px;
background: #2563eb;
color: white;
border: none;
}
106
ДОДАТОК В
WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА "СКЛАД" ДЛЯ
МАГАЗИНУ КОМП’ЮТЕРНОЇ ТЕХНІКИ
ІНТЕРФЕЙС КОРИСТУВАЧА WEB-ЗАСТОСУНКУ
482. ЧДТУ 62297-01 34 01
Листів 4
Розробник: Янченко В.О.
Керівник: Дяченко П.В.
Черкаси – 2026
107
ДОДАТОК В
Інтерфейс користувача WEB-застосунку
У додатку В наведено приклади основних сторінок користувацького
інтерфейсу WEB-орієнтованої інформаційної системи «СКЛАД». Інтерфейс
системи призначений для зручної роботи користувачів із товарами,
складськими операціями, замовленнями, звітами та налаштуваннями системи.
Користувацький інтерфейс реалізовано у вигляді WEB-застосунку з
адаптивним дизайном. Основними елементами інтерфейсу є бічне меню
навігації, панель керування, таблиці даних, форми введення інформації, блоки
статистики, система пошуку та фільтрації.
Після запуску WEB-застосунку користувач потрапляє на сторінку
авторизації. На цій сторінці розміщено форму входу до системи, яка містить
поля для введення електронної пошти та пароля. Після успішної авторизації
користувач переходить до панелі керування.
Рисунок В.1 – Сторінка авторизації користувача
Панель керування є головною сторінкою системи. На ній відображаються
основні показники роботи складу: кількість товарів, кількість замовлень,
кількість складських операцій, повідомлення про мінімальні залишки та інша
аналітична інформація. З панелі керування користувач може швидко перейти до
основних модулів системи.
108
Рисунок В.2 – Панель керування WEB-застосунку
Одним із головних модулів системи є сторінка керування товарами. Вона
містить таблицю товарних позицій, у якій відображається назва товару,
категорія, виробник, артикул, склад, кількість, ціна та статус наявності. Для
кожного товару передбачено можливість редагування, видалення та перегляду
детальної інформації.
Для зручної роботи з великою кількістю товарів у системі реалізовано
пошук і фільтрацію. Користувач може шукати товари за назвою, артикулом або
серійним номером, а також фільтрувати продукцію за категорією, складом і
статусом наявності. Це дозволяє швидко знаходити необхідні товарні позиції.
Додавання нового товару здійснюється за допомогою спеціальної форми.
У формі користувач заповнює основні характеристики товару: назву, категорію,
виробника, модель, артикул, серійний номер, ціну, кількість, склад і короткий
опис. Після збереження дані автоматично додаються до бази даних.
Модуль складських операцій призначений для обліку надходження,
списання, переміщення та інвентаризації товарів. Інтерфейс даного модуля
дозволяє вибрати товар, склад, тип операції, кількість продукції та додати
коментар до операції.
109
Рисунок В.6 – Сторінка складських операцій
Модуль звітності та аналітики використовується для формування звітів
щодо залишків товарів, руху продукції, замовлень та складських операцій. На
сторінці звітності можуть відображатися таблиці, діаграми та інформаційні
панелі.
Інтерфейс WEB-застосунку має адаптивну структуру, тому коректно
відображається на персональних комп’ютерах, планшетах і смартфонах. На
пристроях із меншою шириною екрана навігаційне меню може згортатися, а
таблиці та форми змінюють своє розташування відповідно до розміру екрана.
Таким чином, інтерфейс користувача WEB-орієнтованої інформаційної
системи «СКЛАД» забезпечує зручну, зрозумілу та ефективну взаємодію
користувача з програмною системою. Його структура дозволяє швидко
виконувати основні складські операції, контролювати залишки товарів,
працювати із замовленнями та формувати звітність.
110
ДОДАТОК Г
WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА "СКЛАД" ДЛЯ
МАГАЗИНУ КОМП’ЮТЕРНОЇ ТЕХНІКИ
РЕЗУЛЬТАТИ ТЕСТУВАННЯ ПРОГРАМНОЇ СИСТЕМИ
482. ЧДТУ 62297-01 91 01
Листів 5
Розробник: Янченко В.О.
Керівник: Дяченко П.В.
Черкаси – 2026
111
ДОДАТОК Г
Результати тестування програмної системи
У додатку Г наведено результати тестування WEB-орієнтованої
інформаційної системи «СКЛАД» для магазину комп’ютерної техніки.
Тестування виконувалося з метою перевірки стабільності роботи програмного
забезпечення, коректності функціонування основних модулів системи,
швидкодії WEB-застосунку та якості користувацького інтерфейсу.
Під час тестування перевірялися:
– система авторизації користувачів;
– CRUD-операції для роботи з товарами;
– пошук і фільтрація;
– модуль складських операцій;
– формування звітів;
– робота REST API;
– адаптивність інтерфейсу;
– продуктивність серверної частини.
Г.1 Тестування авторизації користувачів
Під час тестування авторизації перевірялася коректність входу
користувачів до системи, перевірка JWT-токенів та розмежування прав доступу
відповідно до ролі користувача.
Результати тестування авторизації наведено у таблиці Г.1.
Таблиця Г.1 – Результати тестування авторизації користувачів
№ Тестова дія Очікуваний результат Результат
1 Введення правильного логіна і Успішна авторизація Успішно
пароля
2 Введення неправильного пароля Повідомлення про Успішно
помилку
3 Вхід без токена Заборона доступу Успішно
4 Перевірка ролей користувачів Розмежування прав Успішно
доступу
Рисунок Г.1 – Тестування системи авторизації користувачів
112
Г.2 Тестування CRUD-операцій для роботи з товарами
Під час тестування CRUD-операцій перевірялася можливість створення,
перегляду, редагування та видалення товарів у системі.
Результати тестування наведено у таблиці Г.2.
Таблиця Г.2 – Результати тестування CRUD-операцій
№ Операція Очікуваний результат Результат
1 Додавання товару Створення нового товару Успішно
2 Редагування товару Оновлення інформації Успішно
3 Видалення товару Видалення запису Успішно
4 Отримання списку товарів Відображення таблиці Успішно
Рисунок Г.2 – Тестування CRUD-операцій WEB-застосунку
Г.3 Тестування пошуку та фільтрації товарів
Під час тестування перевірялася коректність роботи системи пошуку
товарів за назвою, категорією, артикулом та серійним номером.
Таблиця Г.3 – Результати тестування пошуку та фільтрації
№ Тестова дія Очікуваний результат Результат
1 Пошук за назвою Відображення знайдених товарів Успішно
2 Пошук за артикулом Відображення товару Успішно
3 Фільтрація за категорією Відображення категорії Успішно
4 Фільтрація за статусом Відображення товарів за статусом Успішно
Рисунок Г.3 – Тестування системи пошуку та фільтрації
Г.4 Тестування продуктивності системи
Для оцінки продуктивності WEB-застосунку проводилося тестування
швидкодії серверної частини та часу виконання основних операцій.
Основні результати тестування:
– середній час відповіді сервера: 120–250 мс;
– час формування звітів: до 2 секунд;
– час пошуку товарів: менше 1 секунди;
– стабільна робота при одночасній роботі кількох користувачів.
113
Таблиця Г.4 – Результати тестування продуктивності системи
Показник Значення
Час відповіді сервера 120–250 мс
Формування звіту до 2 с
Пошук товару < 1 с
Завантаження сторінки 1–2 с
Рисунок Г.4 – Аналіз продуктивності WEB-застосунку
Г.5 Кросбраузерне тестування
WEB-застосунок тестувався у різних браузерах для перевірки коректності
відображення інтерфейсу та роботи функціональних модулів.
Таблиця Г.5 – Результати кросбраузерного тестування
Браузер Результат
Google Chrome Коректна робота
Mozilla Firefox Коректна робота
Microsoft Edge Коректна робота
Opera Коректна робота
Рисунок Г.5 – Кросбраузерне тестування системи
Г.6 Тестування адаптивності інтерфейсу
Для перевірки адаптивності WEB-застосунку виконувалося тестування
інтерфейсу на різних типах пристроїв:
– персональних комп’ютерах;
– планшетах;
– смартфонах.
Під час тестування встановлено:
– коректне масштабування елементів;
– адаптацію таблиць та меню;
– коректне відображення форм введення;
– збереження функціональності системи.
114
Таблиця Г.6 – Результати тестування адаптивності
Тип пристрою Результат
Персональний комп’ютер Коректно
Планшет Коректно
Смартфон Коректно
Рисунок Г.6 – Адаптивне відображення WEB-застосунку
Г.7 Загальна оцінка результатів тестування
У результаті проведеного тестування встановлено, що WEB-орієнтована
інформаційна система «СКЛАД» забезпечує:
– стабільну роботу серверної та клієнтської частин;
– коректне виконання CRUD-операцій;
– швидку обробку HTTP-запитів;
– надійну систему авторизації;
– коректну роботу пошуку та фільтрації;
– адаптивність інтерфейсу;
– підтримку багатокористувацького режиму.
Критичних помилок у роботі системи під час тестування виявлено не
було. Результати тестування підтверджують можливість практичного
використання розробленої WEB-орієнтованої інформаційної системи для
автоматизації складського обліку магазину комп’ютерної техніки.