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/8910| Title: | Web-застосунок автоматизації роботи кафе та ресторанів |
| Authors: | Півень, Олександр Борисович Феофілов, Ярослав Володимирович |
| Keywords: | ВЕБ-ЗАСТОСУНОК;ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ;NODE.JS;JAVASCRIPT;HTML\CSS;FIREBASE;БАЗА ДАНИХ;REACT;МАСШТАБОВАНІСТЬ СИСТЕМИ;АРХІТЕКТУРА ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ;WEB APPLICATION;SOFTWARE;NODE.JS;JAVASCRIPT;HTML\CSS;FIREBASE;DATABASE;REACT;SYSTEM SCALABILITY;SOFTWARE ARCHITECTURE |
| Issue Date: | 21-Jun-2025 |
| Abstract: | АНОТАЦІЇ
Виконавець: Феофілов Ярослав Володимирович.
Назва роботи: " Web-застосунок автоматизації роботи кафе та ресторанів ".
Спеціальність: 121 Інженерія програмного забезпечення.
Навчальний заклад: «Черкаський державний технологічний університет» м. Черкаси, 2025р.
Бакалаврська робота присвячена розробці веб додатку для автоматизації кафе та ресторанів, а саме проект має забезпечувати автоматизацію планів приготування, миттєве відстеження замовлень та оптимізацію робочих процесів, гармонійну взаємодію персоналу. Основна мета проекту – налагодити автоматизацію планів приготування, миттєве відстеження замовлень та автоматичний розрахунок заробітної плати для робітників. У роботі розглядаються основні аспекти розробки веб додатків, методи розробки баз даних, та створення інтуїтивного користувацького інтерфейсу для простоти використання додатком. Результатом роботи є веб додаток який являється потужним інструментом для автоматизації та адміністрування кафе та ресторанів. ANNOTATIONS Performer: Feofilov Yaroslav Volodymirovich. The title of the work: "WEB application for automation the work of cafes and restaurants". Specialty: 121 Software engineering. The thesis is devoted to the development of a web application for the automation of cafes and restaurants, namely, the project should provide automation of cooking plans, instant tracking of orders and optimization of work processes, harmonious interaction of personnel. The main goal of the project is to set up automation of cooking plans, instant tracking of orders and automatic calculation of wages for workers. The work considers the main aspects of web application development, database development methods, and creation of an intuitive user interface for ease of use of the application. The result of the work is a web application that is a powerful tool for automation and administration of cafes and restaurants |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/8910 |
| Appears in Collections: | 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Кваліфікаційна робота бакалавра Феофілов Ярослав Володимирович.pdf Restricted Access | 9.43 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 курсу, групи ПЗC-2104
Спеціальності
121 «Інженерія програмного забезпечення»
(шифр і назва напряму підготовки)
Студент Феофілов Я.В.
(прізвище та ініціали)
Керівник Півень О.Б.
(прізвище та ініціали)
Рецензент Люта М.В.
(прізвище та ініціали)
Черкаси 2025
Черкаський державний технологічний університет
повне найменування вищого навчального закладу
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
Освітній рівень бакалавр
Спеціальність 121 «Інженерія програмного забезпечення»
Освітня програма Інженерія програмного забезпечення
ЗАТВЕРДЖУЮ
Зав. кафедри ПЗАС, професор
___________ Голуб С.В.
«___» _______________ 2025 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Феофілов Ярослав Володимирович
(прізвище, ім’я, по батькові)
1.Тему проекту (роботи) «Web-застосунок автоматизації роботи кафе та ресторанів»
Керівник проекту (роботи) Півень Олександр Борисович кандидат наук, доцент
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від « 25 » лютого
2025 року №53/03-03
2. Строк подання студентом проекту (роботи) 16 червня 2025 р.
3. Вхідні дані до проекту (роботи) Технічне завдання на розробку, методичні рекомендації до
виконання бакалаврської роботи, автоматизовані системи, терміни та визначення.
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Вступ;
Розділ 1. Існуючі методи та засоби розв’язання поставлених завдань;
Розділ 2. Впровадження результатів досліджень у практику проектування програмного
забезпечення інформаційних систем;
Розділ 3. Розробка та тестування програмного забезпечення;
Висновки;
Список використаних джерел;
Додатки.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту;
Слайд 1; Слайд 2; Слайд 3; Слайд 4; Слайд 5; Слайд 6; Слайд 7; Слайд 8; Слайд 9; Слайд 10;
Слайд 11; Слайд 12; Слайд 13; Слайд 14; Слайд 15; Слайд 16; Слайд 17; Слайд 18; Слайд 19;
Слайд 20; Слайд 21 Слайд 22, Слайд 23.
6. Консультанти розділів проекту (роботи)
Прізвище, ініціали та посади Підпис, дата
Розділ
консультанта Завдання видав Завдання прийняв
1
2
3
7. Дата видачі завдання 02 грудня 2025 р.
КАЛЕНДАРНИЙ ПЛАН
Строк
виконання
№
Назва етапів випускної роботи етапів Примітки
п/п
випускної
роботи
1 Постановка задачі 05.12.2024 виконано
2 Підготовка завдання 13.12.2024 виконано
3 Погодження завдання 16.12.2024 виконано
4 Затвердження завдання 19.02.2025 виконано
Основна стадія
1 Підбір матеріалів 27.02.2025 виконано
2 Аналіз шляхів вирішення поставленої задачі 04.02.2025 виконано
3 Розрахунок основних параметрів роботи 10.03.2025 виконано
4 Вибір кінцевого варіанту проектного рішення 17.03.2025 виконано
5 Оформлення первісної редакції роботи 25.03.2025 виконано
Заключна стадія
1 Узгодження прийнятих проектних рішень з 29.05.2025 виконано
керівником
2 Оформлення пояснювальної записки роботи в 04.06.2025 виконано
кінцевій редакції
3 Попередній захист роботи 10.06.2025 виконано
4 Затвердження роботи 13.06.2025 виконано
5 Рецензування роботи 18.06.2025 виконано
6 Захист роботи 20.06.2025
Студент _____________________ Феофілов Я.В.
(підпис) (прізвище та ініціали)
Керівник проекту (роботи) _____________________ Півень О.Б.
(підпис) (прізвище та ініціали)
АНОТАЦІЇ
Виконавець: Феофілов Ярослав Володимирович.
Назва роботи: " Web-застосунок автоматизації роботи кафе та ресторанів ".
Спеціальність: 121 Інженерія програмного забезпечення.
Навчальний заклад: «Черкаський державний технологічний університет» м.
Черкаси, 2025р.
Бакалаврська робота присвячена розробці веб додатку для автоматизації
кафе та ресторанів, а саме проект має забезпечувати автоматизацію планів
приготування, миттєве відстеження замовлень та оптимізацію робочих процесів,
гармонійну взаємодію персоналу. Основна мета проекту – налагодити
автоматизацію планів приготування, миттєве відстеження замовлень та
автоматичний розрахунок заробітної плати для робітників. У роботі
розглядаються основні аспекти розробки веб додатків, методи розробки баз
даних, та створення інтуїтивного користувацького інтерфейсу для простоти
використання додатком. Результатом роботи є веб додаток який являється
потужним інструментом для автоматизації та адміністрування кафе та ресторанів.
Ключові слова. ВЕБ-ЗАСТОСУНОК, ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ,
NODE.JS, JAVASCRIPT, HTML\CSS, FIREBASE, БАЗА ДАНИХ, REACT,
МАСШТАБОВАНІСТЬ СИСТЕМИ, АРХІТЕКТУРА ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
ANNOTATIONS
Performer: Feofilov Yaroslav Volodymirovich.
The title of the work: "WEB application for automation the work of cafes and
restaurants".
Specialty: 121 Software engineering.
The thesis is devoted to the development of a web application for the automation
of cafes and restaurants, namely, the project should provide automation of cooking
plans, instant tracking of orders and optimization of work processes, harmonious
interaction of personnel. The main goal of the project is to set up automation of cooking
plans, instant tracking of orders and automatic calculation of wages for workers. The
work considers the main aspects of web application development, database development
methods, and creation of an intuitive user interface for ease of use of the application.
The result of the work is a web application that is a powerful tool for automation and
administration of cafes and restaurants
Keywords: WEB APPLICATION, SOFTWARE, NODE.JS, JAVASCRIPT,
HTML\CSS, FIREBASE, DATABASE, REACT, SYSTEM SCALABILITY,
SOFTWARE ARCHITECTURE
ЗМІСТ
ЗМІСТ ............................................................................................................. 4
Вступ .............................................................................................................. 6
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ
ПОСТАВЛЕНИХ ЗАВДАНЬ ......................................................................................... 9
1.1 Сучасні підходи до автоматизації роботи ................................................ 9
1.2 Огляд аналогічногих додатків ................................................................... 9
1.3 Методи реалізації сучасних web-додатків .............................................. 14
1.4 Постановка задач ....................................................................................... 14
Висновок до першого розділу .................................................................... 17
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТ ДОСЛІДЖЕННЯ У
ПРАКТИКУ ПРОЕТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
ІНФОРМАЦІЙНИХ СИСТЕМ .................................................................................... 18
2.1 Моделювання предметної області ....................................................... 18
2.1.1 Предметна область моделювання. Модель предметної області.
Словник предметної області ................................................................................ 18
2.1.2 Елементи моделювання предметної області ................................... 20
2.1.3 Робоча область моделювання ........................................................... 21
2.2 Формування та аналіз вимог .................................................................... 22
2.2.1 Формування вимог до програмного забезпечення. Первинні і
детальні вимоги. Вимоги замовника і розробника. Функціональні та
нефункціональні вимоги. ...................................................................................... 22
2.2.2 Формування вимог за допомогою діаграми прецедентів .............. 24
2.3 Проектування логічної структури програмного комплексу ................. 26
2.3.1 Діаграми класів: ................................................................................. 27
2.3.2 Діаграми пакетів ................................................................................. 31
2.4 Архітектурне проектування ..................................................................... 32
2.4.1 Діаграма компонентів ........................................................................ 32
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання ............................................................................................................ 34
2.5 Моделювання поведімки системи ........................................................... 35
2.5.1 Діаграма діяльності: ........................................................................... 35
2.5.2 Діаграма послідовності ...................................................................... 38
2.5.3 Діаграма комунікацій ........................................................................ 40
ЧДТУ 252356.006 ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. Феофілов Я.В. Літ. Лист Листів
Перевір. Півень О.Б. «Web-застосунок автоматизації роботи 3
кафе та ресторанів»
Пояснювальна записка.
Н. Контр. Півень О.Б. ФІТІС, кафедра ПЗАС, ПЗС-2104
Затверд. Голуб С.В.
2.5.4 Діаграма скінченого автомата .......................................................... 42
Висновок до другого розідлу ..................................................................... 45
Розділ 3 Розробка та тестування програмного забезпечення ................. 47
3.1 Розробка програмного комплексу ........................................................... 47
3.1.1 Обґрунтування вибору засобів реалізації ........................................ 47
3.1.2 Опис структурної (функціональної) схеми ..................................... 48
3.1.3 Опис логічної схеми системи............................................................ 50
3.1.4 Розробка бази даних .......................................................................... 51
3.1.5 Розробка інтерфейсу користувача .................................................... 55
3.1.6 Опис розробки програмних компонентів ........................................ 64
3.2 Тестування системи .................................................................................. 66
3.2.1 Модульне тестування ........................................................................ 66
3.2.2 Інтеграційне тестування .................................................................... 68
3.2.3 Системне тестування ......................................................................... 70
3.2.4 Приймальне тестування ..................................................................... 72
3.3 Приклади впровадженого програмного комплексу .............................. 74
Висновок до третього розділу ................................................................... 81
Висновок ...................................................................................................... 82
Список використаних джерел .................................................................... 84
Додаток А ..................................................................................................... 87
Додаток Б ..................................................................................................... 89
Додаток В ................................................................................................... 125
Додаток Г ................................................................................................... 129
ЧДТУ 252356.006 ПЗ
Змн. Арк. № докум. Підпис Дата
ЧДТУ 252356.006 ПЗ
ВСТУП
Актуальність теми: Розробка програмного забезпечення для автоматизації
роботи закладів громадського харчування є важливою складовою цифрової
трансформації бізнесу. Завдяки додаткам та веб-застосункам на данний час
проходять процеси з автоматизації у сфері громадського харчування завдяки
використання інформаційних технологій. Кафе та ресторани щодня стикаються з
необхідністю обробки великої кількості замовлень, управління персоналом,
контролю запасів та фінансового обліку для цього використовуються
інформаційні технології. Використання спеціалізованих інформаційних систем
дозволяє значно підвищити ефективність роботи, зменшити вплив людського
фактору та покращити якість обслуговування клієнтів. На сучасному етапі
актуальним є створення веб-застостосунків, які забезпечують централізоване
управління основними процесами діяльності закладів харчування. Особливої
актуальності набувають легкі у використанні, кросплатформенні рішення з
підтримкою хмарного зберігання даних. Саме тому розробка сучасного веб-
застосунків для автоматизації кафе та ресторанів є вкрай затребуваною на ринку.
Мета розробки: Метою даної кваліфікаційної роботи є створення та
програмування веб-застосунку, що забезпечує автоматизацію основних бізнес-
процесів у кафе та ресторанах, таких як управління замовленнями, контроль
товарних залишків, формування чеків і звітів, а також взаємодія з персоналом.
Система має бути зручною для користувачів, мати сучасний інтерфейс і
забезпечувати стабільну роботу з базою даних.
Завдання розробки: Для досягнення поставленої мети були сформульовані
такі основні завдання:
1 Провести аналіз існуючих рішень у сфері автоматизації громадського
харчування.
2 Обґрунтувати вибір технологій і засобів реалізації веб-застосунку.
3 Розробити структурну, логічну та інші UML-схеми, які описують
архітектуру майбутньої системи.
6
ЧДТУ 252356.006 ПЗ
4 Реалізувати веб-застосунок із використанням сучасних технологій веб-
розробки.
5 Розробити базу даних для зберігання інформації про замовлення, страви
та запаси.
6 Провести тестування програмного продукту на всіх рівнях.
7 Оцінити можливість реального впровадження додатку та його практичну
значущість.
Об'єкт розробки: Об'єктом розробки є веб-застосунку для автоматизації
процесів управління кафе та ресторанами, що включає функціональні модулі для
роботи з замовленнями, стравами, чековими операціями та аналітикою.
Методи проектування: У процесі проектування системи були використані
методи структурного та об’єктно-орієнтованого аналізу. Для формалізації
структури системи та взаємозв’язків між її елементами застосовано мову
моделювання UML. Було створено діаграми прецедентів, класів, діяльності,
компонентів, розгортання, послідовності та комунікації. Ці моделі дозволили
краще зрозуміти логіку роботи майбутньої системи, виявити вузькі місця та
підготувати архітектуру додатку.
Методи конструювання: Для розробки веб-застосунку були використані
такі технології:
React.js — для побудови інтерфейсу користувача;
Firebase (Firestore) — для зберігання та обробки даних у хмарному
середовищі;
JavaScript — як основна мова логіки додатку;
CSS — для швидкої розробки адаптивного дизайну;
Git/GitHub — для контролю версій та співпраці.
Використання цих інструментів дозволило досягти високої швидкості розробки,
забезпечити масштабованість і підтримку у майбутньому.
Опис отриманих результатів: У ході виконання кваліфікаційної роботи
було створено прототип веб-застосунку під назвою tipa-syrve, який містить:
авторизацію користувача;
7
ЧДТУ 252356.006 ПЗ
відображення списку страв з цінами та фото;
можливість додавання страв до кошика та формування чека;
облік запасів та автоматичне зменшення кількості при замовленні;
збереження історії замовлень у базі даних.
Було проведено тестування всіх функціональних модулів, підготовлено
інструкцію користувача та описано приклади впровадження системи.
Практичне значення отриманих результатів. Розроблений веб-
застосунок може бути використаний у малих і середніх закладах громадського
харчування, які прагнуть автоматизувати свої процеси без значних фінансових
витрат на ліцензійне програмне забезпечення. Система є відкритою до
масштабування та адаптації під індивідуальні потреби конкретного бізнесу.
Також результат роботи може бути основою для подальших досліджень у галузі
цифровізації бізнесу.
Особистий внесок автора. Уся робота — від аналізу, проєктування,
розробки, тестування до підготовки звітної документації — виконувалася
особисто автором. Було вивчено принципи роботи подібних систем, обрано
доцільні технології, самостійно реалізовано користувацький інтерфейс, логіку
взаємодії з базою даних і механізми обробки замовлень. Автор також провів
повний цикл тестування та оформив результати згідно з вимогами до
кваліфікаційнох роботи бакалавра.
8
ЧДТУ 252356.006 ПЗ
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ
ПОСТАВЛЕНИХ ЗАВДАНЬ
1.1 Сучасні підходи до автоматизації роботи
Автоматизація бізнес-процесів є невід’ємною частиною розвитку сучасних
підприємств, особливо в галузі громадського харчування. Основні підходи до
автоматизації роботи передбачають інтеграцію інформаційних технологій, які
дозволяють зменшити людський фактор, прискорити виконання рутинних завдань
та забезпечити високу точність обліку. Одним із ключових елементів таких
підходів є впровадження інформаційних систем, що автоматизують управління
замовленнями, облік запасів, планування роботи персоналу та аналітику.
Інструменти для автоматизації роботи зазвичай базуються на хмарних
технологіях, що забезпечує їх доступність у будь-який час і з будь-якого
пристрою. Застосування хмарних сервісів також дозволяє безперебійно
оновлювати дані та синхронізувати інформацію між усіма учасниками процесу.
Сучасні підходи включають використання мобільних застосунків для персоналу
(офіціантів, кухарів, адміністраторів), що забезпечують швидкий доступ до даних
і виконання завдань у режимі реального часу.
Додатково, автоматизація роботи активно впроваджує штучний інтелект для
аналізу даних і прогнозування. Наприклад, AI-системи можуть аналізувати
продажі, пропонуючи оптимальний розподіл ресурсів або формування
спеціальних пропозицій для клієнтів. Інтеграція таких інновацій дозволяє бізнесу
отримати конкурентні переваги, оптимізувати витрати та покращити
обслуговування клієнтів.
1.2 Огляд аналогічногих додатків
1 Syrve є одним із провідних рішень у сфері автоматизації кафе та
ресторанів. Цей програмний комплекс пропонує широкий спектр інструментів для
управління бізнесом, включаючи облік замовлень, управління складом, фінансову
звітність та контроль роботи персоналу. Syrve розроблений для різних типів
9
ЧДТУ 252356.006 ПЗ
закладів – від невеликих кафе до великих ресторанних мереж, що робить його
універсальним рішенням.
Рисунок 1.1– Вигляд веб-застосунку Syrve
Головною особливістю Syrve є інтеграція всіх бізнес-процесів у єдину
систему, що дозволяє зручно управляти закладом у режимі реального часу.
Додаток пропонує модулі для роботи з клієнтами, такі як системи лояльності, а
також функції для обліку витрат та доходів. Важливою перевагою є можливість
використання Syrve на мобільних пристроях, що спрощує роботу персоналу.
Переваги:
широкий функціонал для кафе та ресторанів;
інтеграція з POS-системами та кухонними принтерами;
хмарне зберігання даних і звітність.
Недоліки:
висока вартість ліцензії;
складність налаштування для малого бізнесу;
обмежена гнучкість у налаштуванні інтерфейсу.
10
ЧДТУ 252356.006 ПЗ
Попри свої переваги, Syrve може бути недоступним для деяких закладів
через високу вартість ліцензії та необхідність навчання персоналу. Це створює
нішу для більш доступних і адаптованих рішень, що враховують специфіку
конкретного регіону або типу закладу.
2 R-Keeper є одним із найпоширеніших програмних рішень для
автоматизації ресторанного бізнесу, яке активно використовується як у великих
ресторанних мережах, так і в окремих закладах громадського харчування.
Система пропонує комплексний підхід до управління усіма аспектами роботи
ресторану — від обслуговування гостей до контролю за складом і фінансами.
Рисунок 1.2– Вигляд інтерфейсу R-Keeper
R-Keeper включає в себе модулі для прийому та обробки замовлень,
управління персоналом, аналітики продажів, обліку складу та інтеграції з
бухгалтерським ПЗ. Особливістю є підтримка масштабованості — система
адаптується як для невеликих кафе, так і для ресторанних холдингів з великою
кількістю філій.
Головною перевагою R-Keeper є висока продуктивність і стабільність у
роботі. Додаток дозволяє інтегрувати POS-термінали, мобільні пристрої
11
ЧДТУ 252356.006 ПЗ
офіціантів, кухонні дисплеї, а також використовує хмарні сервіси для
централізованого управління мережею закладів. Крім того, R-Keeper підтримує
функції CRM, що дозволяє будувати довготривалі відносини з клієнтами.
Переваги:
потужний набір функцій для комплексного управління рестораном;
підтримка великої кількості периферійного обладнання;
масштабованість для мережевих ресторанів.
Недоліки:
висока загальна вартість володіння (ліцензія, обслуговування, навчання);
складність у первинному впровадженні та налаштуванні;
потреба в окремих рішеннях для онлайн-замовлень та доставки.
Незважаючи на багатий функціонал, R-Keeper не завжди є оптимальним
рішенням для невеликих підприємств через високу ціну та складність у
впровадженні. Це створює попит на альтернативні веб-додатки, які є дешевшими
у реалізації, мають простіший інтерфейс і не вимагають глибоких технічних знань
для обслуговування.
3 AutoSelling — це сучасна система автоматизації для точок громадського
харчування та роздрібної торгівлі, яка орієнтована на простоту використання та
швидке впровадження. Вона розроблена для малого та середнього бізнесу й надає
користувачам доступ до основного функціоналу з мінімальними затратами на
інфраструктуру.
Основна функціональність AutoSelling охоплює прийом замовлень, облік
продажів, управління товарами та базовий складський облік. Система дозволяє
працювати з POS-терміналами, підтримує інтеграцію з фіскальними
реєстраторами, а також має мобільний інтерфейс для офіціантів або продавців.
Особливу увагу розробники приділили швидкості навчання персоналу та
інтуїтивності інтерфейсу.
AutoSelling працює як хмарне рішення, що дозволяє контролювати бізнес з
будь-якої точки через інтернет. Наявність аналітичних інструментів допомагає
12
ЧДТУ 252356.006 ПЗ
відстежувати основні показники ефективності роботи закладу в режимі реального
часу. Для клієнтів також доступна підтримка систем лояльності та QR-меню.
Рисунок 1.3 – Вигляд інтерфейсу AutoSelling
Переваги:
простий та зручний інтерфейс для персоналу;
низька вартість впровадження та обслуговування;
підтримка хмарної роботи та онлайн-звітності.
Недоліки:
обмежений функціонал у порівнянні з більшими системами (наприклад,
немає глибокого фінансового модулю);
менше можливостей кастомізації під специфічні потреби;
потреба у стабільному інтернет-з’єднанні для повної функціональності.
AutoSelling є гарним вибором для невеликих кафе, кав’ярень або точок
швидкого харчування, яким потрібна доступна та ефективна система управління
продажами. Однак при масштабуванні бізнесу або потребі в глибокій аналітиці
можуть виникнути обмеження, що вимагають переходу до потужніших рішень.
13
ЧДТУ 252356.006 ПЗ
1.3 Методи реалізації сучасних web-додатків
Для розробки веб-застосунку з автоматизації роботи кафе та ресторанів
доцільно застосовувати сучасні технології, які забезпечують ефективність,
масштабованість і зручність використання. Основою є веб-технології, що
включають мови HTML, CSS, JavaScript, а також їхні розширення, наприклад,
React. Ці інструменти дозволяють створити зручний інтерфейс користувача та
забезпечити динамічність веб-застосунку.
Для серверної частини ідеальним вибором є Node.js – середовище
виконання JavaScript, яке дозволяє швидко обробляти запити клієнтів і забезпечує
масштабованість системи. Для зберігання даних доцільно використовувати базу
даних Firebase, яка забезпечує надійність і високу швидкість роботи із записами.
Крім цього, у розробці можна застосовувати хмарні сервіси для розгортання
додатку та забезпечення безперервного доступу до системи. Інтеграція API для
обробки платежів і систем лояльності дозволить значно розширити
функціональність додатку. Застосування Agile-методології в процесі розробки
забезпечить поступовий підхід до створення продукту з можливістю врахування
зворотного зв’язку від користувачів на кожному етапі.
Таким чином, використання сучасних технологій дозволяє створити
конкурентоспроможний продукт, що відповідає вимогам бізнесу та потребам
клієнтів.
1.4 Постановка задач
Метою даної кваліфікаційної роботи є розробка та впровадження
програмного забезпечення у вигляді веб-застосунку для автоматизації кафе та
ресторанів — інструменту для автоматизації обслуговування в закладах
громадського харчування. Система дозволяє персоналу працювати з
замовленнями за допомогою інформаційних технологій, клієнти — переглядають
меню, а адміністрація — контролює запаси, звітністі і роботу персоналу в режимі
реального часу.
14
ЧДТУ 252356.006 ПЗ
Рисунок 1.4 – Діаграма використання для веб-застосунку для автоматизації
кафе та ресторанів
1 Система замовлень:
клієнт має змогу переглядати меню, додавати позиції в кошик,
оформлювати замовлення та отримувати чек;
офіціанти можуть приймати, обробляти та змінювати статус
замовлень;
кухар має змогу змінювати статус замовлень.
2 Облік товарів і залишків:
адміністратор має змогу додавати, редагувати та видаляти позиції
меню;
система автоматично зменшує залишки інгредієнтів після
оформлення замовлення.
3 Реєстрація та авторизація:
система підтримує реєстрацію нових користувачів і вхід із
перевіркою ролі;
15
ЧДТУ 252356.006 ПЗ
реалізовано захист Firebase Authentication для безпеки даних.
4 Гнучкий інтерфейс користувача:
UI реалізований у React з адаптивною версткою;
інтерфейс зручний для використання на планшетах і POS-
терміналах.
5 Хмарна база даних:
уся інформація зберігається в Firebase Firestore;
дані оновлюються в реальному часі для всіх користувачів.
Засоби реалізації:
мова програмування: JavaScript (React для клієнтської частини);
база даних: Firebase Firestore;
середовище розробки: Visual Studio Code;
інструменти тестування: браузерні інструменти розробника, Firebase
Emulator, Postman.
Запропоноване рішення дозволяє автоматизувати основні бізнес-процеси
закладу громадського харчування, забезпечуючи швидке обслуговування клієнтів,
контроль витрат і спрощене управління.
16
ЧДТУ 252356.006 ПЗ
ВИСНОВОК ДО ПЕРШОГО РОЗДІЛУ
У першому розділі здійснено огляд сучасних інструментів та фреймворків,
що застосовуються для розробки веб-застосунків у сфері автоматизації роботи
кафе та ресторанів. Проведено аналіз існуючих аналогічних рішень, а саме таких:
1 Syrve
Недоліки: висока вартість ліцензії; складність налаштування для
малого бізнесу; обмежена гнучкість у налаштуванні інтерфейсу.
Переваги: широкий функціонал для кафе та ресторанів; інтеграція з
POS-системами та кухонними принтерами; хмарне зберігання даних і
звітність.
2 R-Keeper
Недоліки: висока загальна вартість володіння; складність у
первинному впровадженні та налаштуванні; потреба в окремих
рішеннях для онлайн-замовлень та доставки.
Переваги: потужний набір функцій для комплексного управління
рестораном; підтримка великої кількості периферійного обладнання;
масштабованість для мережевих ресторанів.
3 AutoSelling
Недоліки: обмежений функціонал у порівнянні з більшими
системами; менше можливостей кастомізації під специфічні потреби;
потреба у стабільному інтернет-з’єднанні для повної
функціональності.
Переваги: простий та зручний інтерфейс для персоналу; низька
вартість впровадження та обслуговування; підтримка хмарної роботи
та онлайн-звітності.
На основі проведеного дослідження сформовано обґрунтований вибір
технологічного стеку та сформульовано постановку задачі на розробку власного
веб-застосунку.
17
ЧДТУ 252356.006 ПЗ
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТ ДОСЛІДЖЕННЯ У
ПРАКТИКУ ПРОЕТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
ІНФОРМАЦІЙНИХ СИСТЕМ
2.1 Моделювання предметної області
Моделювання предметної області є основою для розробки інформаційних
систем, оскільки дозволяє структурувати дані, виявити ключові об’єкти та їхні
взаємозв’язки. Для автоматизації роботи кафе та ресторанів предметна область
охоплює процеси управління замовленнями, облік запасів, моніторинг діяльності
персоналу, обслуговування клієнтів та фінансовий облік.
Мета моделювання предметної області полягає у створенні формалізованої
моделі, яка забезпечить розуміння структури та логіки роботи системи. Це
дозволяє оптимізувати розробку програмного забезпечення та забезпечити його
адаптацію до реальних потреб бізнесу.
2.1.1 Предметна область моделювання. Модель предметної області. Словник
предметної області
Предметна область моделювання охоплює всі процеси, які відбуваються у
кафе або ресторані: від прийняття замовлень клієнтів до аналізу фінансових
результатів діяльності.
Модель предметної області відображає ключові об'єкти, їхні властивості та
взаємозв'язки.
Основні об'єкти предметної області:
1 Клієнт.
Властивості: ім’я, контактні дані, статус лояльності (наприклад,
постійний клієнт).
Дії: оформлення замовлення, оплата.
2 Замовлення.
Властивості: унікальний номер, дата та час, статус (нове, готується,
виконане), список позицій.
18
ЧДТУ 252356.006 ПЗ
Дії: формування, редагування, підтвердження.
3 Меню.
Властивості: назва страви, ціна, доступність, категорія (наприклад,
напій, основна страва).
Дії: оновлення, зміна статусу доступності.
4 Персонал.
Властивості: ім’я, посада, графік роботи, обов’язки.
Дії: прийом замовлень, виконання завдань, звітування.
5 Склад.
Властивості: назва продукту, кількість, мінімальний залишок.
Дії: поповнення запасів, списання витрат.
6 Фінанси.
Властивості: дохід, витрати, платежі.
Дії: облік доходів, формування звітів.
Словник предметної області:
Основними компонентами предметної області є:
Клієнти. Особи, які взаємодіють із закладом, замовляючи страви чи
напої.
Замовлення. Список позицій, що формуються клієнтом і обробляються
персоналом.
Меню. Перелік страв і напоїв із зазначенням їхніх характеристик,
вартості та доступності.
Персонал. Працівники закладу, відповідальні за виконання замовлень,
обслуговування клієнтів та адміністративні функції.
Склад. Місце зберігання продуктів і матеріалів, необхідних для
приготування страв.
Фінанси. Грошові операції, пов’язані з оплатою замовлень та
управлінням витратами.
19
ЧДТУ 252356.006 ПЗ
React — це бібліотека JavaScript, розроблена компанією Meta (Facebook)
для побудови інтерфейсів користувача. React дозволяє створювати
компонентну структуру застосунку, що значно полегшує підтримку,
тестування та повторне використання коду.
Node.js — середовище виконання JavaScript, яке дозволяє запускати
серверні застосунки поза браузером.
FireBase — система керування базами даних, що використовується для
зберігання та управління інформацією.
2.1.2 Елементи моделювання предметної області
Моделювати предметну область для веб додатку з автоматизації кафе та
ресторанів використаємо онлайн інструмент для створення діаграм draw.io.
Основні елементи діаграми які використовуємо - класи, атрибути, операції,
асоціації.
Рисунок 2.1 - Основні графічні символи UML
20
ЧДТУ 252356.006 ПЗ
Для моделювання предметної області веб додатку з автоматизації кафе та
ресторанів ми будемо використовувати елементи UML, які найкраще підходять
для цього, а саме класи, атрибути, методи, асоціації
2.1.3 Робоча область моделювання
Робоча область моделювання охоплює всі аспекти системи, які необхідно
змоделювати для її розуміння, аналізу та подальшого проектування. У контексті
розробки вебзастосунку для автоматизації кафе та ресторанів вона включає всі
сутності, їх атрибути, взаємозв’язки та функції, що забезпечують реалізацію
основного функціоналу системи. Робоча область також відображає процеси та
елементи діяльності, які підлягають автоматизації, формуючи повне уявлення про
структуру та поведінку майбутньої системи.
Рисунок 2.2 - Модель предметної області для веб-застосунку роботи кафе та
ресторанів
21
ЧДТУ 252356.006 ПЗ
1 Клієнт – Замовлення. Клієнт створює замовлення, яке може складатися
з кількох позицій меню.
2 Замовлення – Меню. Кожне замовлення формується на основі
доступних позицій із меню.
3 Замовлення – Персонал. Замовлення обробляється персоналом
(офіціантами, кухарями).
4 Меню – Склад. Доступність страв у меню залежить від наявності
інгредієнтів на складі.
5 Фінанси – Замовлення. Інформація про оплату замовлень впливає на
фінансовий облік.
6 Склад – Персонал. Персонал відповідає за списання витрат та контроль
залишків на складі.
2.2 Формування та аналіз вимог
У цьому розділі було розглянуто формування та аналіз вимог до веб-
застосунку з автоматизації кафе та ресторанів. Вимоги визначають що і як
повинна робити система.
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника і розробника. Функціональні та нефункціональні
вимоги.
Формування вимог до програмного забезпечення є важливим етапом у
розробці інформаційних систем, оскільки забезпечує чітке визначення
функціональності, архітектури та обмежень системи. Вимоги формуються на
основі аналізу потреб замовника, бізнес-процесів предметної області та технічних
можливостей розробника.
Первинні вимоги визначають загальні цілі та очікування від системи. Вони
включають опис основних функцій, які повинна виконувати система для
задоволення потреб користувачів:
1 Прийом і обробка замовлень клієнтів у реальному часі.
22
ЧДТУ 252356.006 ПЗ
2 Облік запасів інгредієнтів і оновлення їх кількості після кожного
замовлення.
3 Формування чеків і ведення історії замовлень.
4 Реєстрація та авторизація користувачів із розподілом ролей (гості,
офіціанти, адміністратори).
5 Надання базової статистики про роботу закладу (кількість замовлень,
суми виручки тощо).
Детальні вимоги уточнюють технічні й функціональні характеристики
роботи системи. Вони описують, як саме реалізуються функції, зазначені в
первинних вимогах:
1 Структура інтерфейсу користувача має бути адаптивною, зручна для
мобільних пристроїв і POS-терміналів.
2 Дані зберігаються в хмарній базі даних Firebase Firestore з підтримкою
оновлення в реальному часі.
3 Авторизація та реєстрація реалізовані через Firebase Authentication з
перевіркою ролей.
4 Алгоритми обробки замовлень забезпечують зміну статусу (нове, в
обробці, виконане) та фіксацію часу.
5 Можливість інтеграції з іншими сервісами, такими як Google Analytics
або платіжні системи, для розширення функціоналу.
Вимоги замовника:
1 Забезпечення зручного інтерфейсу для персоналу та клієнтів.
2 Автоматизація процесів прийому замовлень і обліку ресурсів.
3 Інтеграція з платіжними системами.
4 Надання інструментів для аналітики (звіти про продажі, витрати,
залишки).
5 Можливість роботи на мобільних пристроях.
Вимоги розробника:
23
ЧДТУ 252356.006 ПЗ
1 Використання сучасних веб-технологій (HTML, CSS, JavaScript, Node.js,
FireBase).
2 Забезпечення масштабованості системи для обробки великої кількості
замовлень.
3 Інтеграція системи безпеки для захисту даних.
4 Оптимізація роботи з базою даних для швидкого доступу до інформації.
5 Тестування кожного модуля перед запуском у продакшн.
Функціональні вимоги:
1 Прийом замовлень: додавання позицій до кошика, оформлення та
оплата.
2 Управління меню: оновлення страв, зміна їхнього статусу доступності.
3 Облік запасів: списання інгредієнтів, моніторинг залишків.
4 Генерація звітів про продажі, прибутки та витрати.
5 Адміністрування: управління обліковими записами персоналу.
Нефункціональні вимоги:
1 Система повинна забезпечувати швидкодію: час обробки запитів – не
більше 2 секунд.
2 Інтерфейс повинен бути адаптивним для роботи на різних пристроях
(десктопи, планшети, смартфони).
3 База даних повинна зберігати до 1 мільйона записів із забезпеченням
високої продуктивності.
4 Надійність системи: час безвідмовної роботи – 99,9%.
5 Захист даних користувачів за стандартами GDPR, включаючи
шифрування конфіденційної інформації.
2.2.2 Формування вимог за допомогою діаграми прецедентів
Для візуалізації взаємодії користувачів із системою була створена діаграма
прецедентів. Вона дозволяє визначити основні сценарії використання веб-додатку,
такі як реєстрація користувача, створення замовлення, редагування меню,
24
ЧДТУ 252356.006 ПЗ
перегляд звітів тощо. На основі цієї діаграми було сформовано перелік
функціональних вимог, які визначають обсяг і логіку роботи кожного модуля
системи.
Прецеденти:
1 Оформлення замовлення:
Опис: Клієнт обирає позиції з меню. Офіціант вводить замовлення у
систему.
Актори: Клієнт, Офіціант.
2 Оплата замовлення:
Опис: Клієнт здійснює оплату (готівкою або через термінал).
Система оплати підтверджує транзакцію.
Актори: Клієнт, Система оплати.
3 Обробка замовлення:
Опис: Офіціант передає замовлення на кухню. Кухар приймає
замовлення, позначає статус (готування, готово).
Актори: Офіціант, Кухар.
4 Управління меню:
Опис: Додавання/видалення позицій. Зміна цін.
Актори: Адміністратор.
5 Облік складу:
Опис: Контроль залишків продуктів. Формування звітів про запаси.
Актори: Адміністратор.
6 Генерація звітів:
Опис: Отримання звітів про продажі, витрати, доходи.
Актори: Адміністратор.
25
ЧДТУ 252356.006 ПЗ
Рисунок 2.3 – Діаграма прецедентів веб-застосунку для автоматизації кафе
та ресторанів
2.3 Проектування логічної структури програмного комплексу
У цьому розділі розглядається логічна структура веб-застосунку для
автоматизації кафе та ресторанів, яка демонструє зв’язки між основними
26
ЧДТУ 252356.006 ПЗ
об’єктами системи, їхню поведінку та взаємодію. Для цього використано діаграму
класів, що відображає ключові сутності та їхні методи.
2.3.1 Діаграми класів:
Діаграма класів є важливим інструментом об’єктно-орієнтованого
моделювання, який дозволяє візуалізувати структуру системи, її класи, методи, а
також зв’язки між ними. Початково логіка розробляється без деталізації атрибутів
— для визначення загальної архітектури системи. На завершальному етапі
формується повна діаграма класів із зазначенням атрибутів та методів кожного
класу.
Використані класи:
1 Клієнт: представляє користувача, який здійснює замовлення.
2 Замовлення: відображає замовлення, створене клієнтом, яке містить
певні позиції меню.
3 ПозиціяМеню: представляє окрему страву або товар у меню.
4 Персонал: відповідає за обробку замовлень і формування звітності.
5 Склад: відповідає за облік інгредієнтів та запасів.
6 Звіт: використовується для збору та аналізу даних про роботу закладу.
Зв’язки між класами:
1 Клієнт → Замовлення: Клієнт створює замовлення.
2 Замовлення → ПозиціяМеню: кожне замовлення містить одну або
кілька позицій меню.
3 Персонал → Замовлення: персонал обробляє замовлення.
4 Персонал → Звіт: персонал формує звіти на основі замовлень та
складських залишків.
5 Склад → ПозиціяМеню: склад постачає інгредієнти, необхідні для
приготування позицій меню.
6 Звіт → замовлення: Звіт базується на даних із замовлень.
7 Звіт → Склад: звіт враховує інформацію про запаси зі складу.
27
ЧДТУ 252356.006 ПЗ
Рисунок 2.4 – Діаграма класів без атрибутів веб-застосунку для
автоматизації кафе та ресторанів
Опис кожної таблиці бази даних, представленої в діаграмі класів:
28
ЧДТУ 252356.006 ПЗ
1 Клас: Клієнт
Атрибути: ім'я: String, контактні_дані: String, статус_лояльності:
String.
Методи: оформитиЗамовлення(): Замовлення,
оплатитиЗамовлення(): Boolean.
2 Клас: Замовлення
Атрибути: номер: Integer, дата_створення: Date, статус: String,
позиції: List<ПозиціяМеню>.
Методи:додатиПозицію(позиція: ПозиціяМеню): void,
змінитиСтатус(новийСтатус: String): void.
3 Клас: ПозиціяМеню
Атрибути: назва: String, ціна: Double, категорія: String.
Методи: змінитиДоступність(доступний: Boolean): void.
4 Клас: Персонал
Атрибути: ім'я: String, посада: String, ідентифікатор: Integer.
Методи: обробитиЗамовлення(замовлення: Замовлення): void,
генеруватиЗвіт(): Звіт.
5 Клас: Склад
Атрибути: назва_продукту: String, кількість: Integer,
мінімальний_залишок: Integer.
Методи: поповнитиЗапас(назва: String, кількість: Integer): void,
списатиІнгредієнт(назва: String, кількість: Integer): Boolean.
6 Клас: Звіт
Атрибути: тип_звіту: String, дані: String.
Методи: генерувати(тип: String): void.
29
ЧДТУ 252356.006 ПЗ
Рисунок 2.5 – Діаграма класів веб-застосунку для автоматизації кафе та
ресторанів
30
ЧДТУ 252356.006 ПЗ
2.3.2 Діаграми пакетів
Діаграма пакетів використовується для логічного групування класів,
компонентів або модулів у великі блоки — пакети, що відображають структуру
програмного комплексу на високому рівні. Вона дозволяє зрозуміти, як
організовані частини системи, та які залежності між ними існують.
Рисунок 2.6 – Діаграма пакетів веб-застосунку для автоматизації кафе та
ресторанів
Опис елементів діаграми пакетів:
UI / Components – окремі візуальні блоки інтерфейсу (картка страви,
форма логіну, таблиця звіту).
Pages / Screens – повноекранні сторінки, які складаються з компонентів.
31
ЧДТУ 252356.006 ПЗ
Firebase Service – модулі, які інкапсулюють логіку з’єднання з Firestore,
аутентифікації тощо.
Data Models – логічні моделі, що описують дані: користувач, чек,
страва.
Utils / Helpers – утиліти для форматування дат, підрахунків, перевірки
форм.
2.4 Архітектурне проектування
Розділ архітектурного проєктування описує загальну структуру
програмного комплексу та взаємозв’язки між його основними частинами.
Архітектура визначає, як компоненти системи організовані, як вони взаємодіють
між собою, та які інтерфейси використовуються для зв’язку. Це дозволяє
забезпечити ефективність, масштабованість і підтримуваність розробленого веб-
додатку.
2.4.1 Діаграма компонентів
Діаграма компонентів показує фізичну організацію системи у вигляді
окремих компонентів — частин програмного забезпечення, які реалізують
конкретну функціональність. Ця діаграма дозволяє візуалізувати залежності між
модулями, бібліотеками, базами даних та інтерфейсами.
Рисунок 2.7 – Діаграма компонентів веб-застосунку для автоматизації кафе
та ресторанів
32
ЧДТУ 252356.006 ПЗ
Пакети та їхній зміст:
1 Пакет: Користувацький інтерфейс (UI)
Містить класи та компоненти, пов’язані з відображенням інформації
та взаємодією з користувачем.
Елементи: Головне меню, Форма замовлення, Форма оплати
2 Пакет: Логіка застосунку (Application Logic)
Містить бізнес-логіку програми, що керує основними процесами.
Елементи: Обробник замовлень, Контролер меню, Контролер складу,
Генератор звітів
3 Пакет: Дані (Data)
Містить класи для роботи з базою даних і обробки інформації.
Елементи: Клієнт, Замовлення, ПозиціяМеню, Склад
4 Пакет: Інтеграція (Integration)
Відповідає за взаємодію з зовнішніми системами та сервісами.
Елементи: Система оплати, API звітності
5 Пакет: Системні утиліти (Utilities)
Містить загальні класи та функції, які використовуються у всій
системі.
Елементи: Валідація даних, Логування, Шифрування даних
Зв’язки між пакетами:
1 Користувацький інтерфейс (UI) → Логіка застосунку (Application
Logic): Інтерфейс передає дані до бізнес-логіки та отримує результати
для відображення.
2 Логіка застосунку (Application Logic) → Дані (Data): Логіка
застосунку звертається до класів пакету "Дані" для збереження чи
отримання інформації.
3 Логіка застосунку (Application Logic) → Інтеграція (Integration): Для
обробки платежів або отримання даних із зовнішніх систем.
4 Утиліти (Utilities) → Використовуються всіма іншими пакетами для
спільних завдань (логування, шифрування тощо).
33
ЧДТУ 252356.006 ПЗ
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання
Діаграма розгортання описує фізичну інфраструктуру системи, показуючи,
як програмні компоненти розташовані на апаратних вузлах. Для автоматизації
роботи кафе чи ресторану структура може виглядати так:
Рисунок 2.8 – Діаграма розгортання веб-застосунку для автоматизації кафе
та ресторанів
34
ЧДТУ 252356.006 ПЗ
Вузли:
1. Клієнтський пристрій (Client Device): Використовується для
взаємодії користувача з системою через браузер або мобільний додаток.
Програмні компоненти: Веб-браузер / мобільний застосунок.
2. Сервер програми (Application Server): Виконує бізнес-логіку
системи та обробляє запити клієнтів.
Програмні компоненти: Логіка застосунку (Node.js), Контролери API.
3. Сервер бази даних (Database Server): Зберігає дані про клієнтів,
замовлення, меню, склад тощо.
Програмні компоненти: FireBase.
2.5 Моделювання поведімки системи
У цьому розділі здійснюється моделювання поведінки системи, що дозволяє
візуалізувати логіку виконання основних бізнес-процесів у програмному
забезпеченні. Поведінкове моделювання допомагає зрозуміти послідовність дій,
варіанти взаємодії користувача з системою, а також реакції системи на різні
сценарії використання. Це особливо важливо на етапі розробки, коли потрібно
врахувати всі можливі ситуації для забезпечення надійної роботи додатку.
2.5.1 Діаграма діяльності:
Діаграма діяльності (activity diagram) використовується для відображення
алгоритму виконання певного процесу або сценарію у вигляді послідовності дій.
Вона демонструє, як система переходить від однієї дії до іншої, які можливі
розгалуження, умови, паралельне виконання та завершення процесу.
У контексті розробленого веб-додатку, діаграма діяльності може
відображати, наприклад, процес оформлення замовлення користувачем — від
вибору позицій до підтвердження і оплати. Така діаграма дозволяє ефективно
спланувати логіку системи та уникнути логічних помилок у реалізації.
35
ЧДТУ 252356.006 ПЗ
Рисунок 2.9 – Частина діаграми діяльності веб-застосунку для автоматизації
кафе та ресторанів
36
ЧДТУ 252356.006 ПЗ
Рисунок 2.10 – Частина діаграми діяльності веб-застосунку для
автоматизації кафе та ресторанів
Основний процес роботи додатку:
1 Користувач відкриває додаток.
Додаток завантажує стартову сторінку (меню).
2 Користувач переглядає меню.
Система отримує дані про доступні страви з бази даних.
3 Користувач додає страви до замовлення.
Додаток оновлює список замовлення та підраховує загальну вартість.
4 Користувач підтверджує замовлення.
Система реєструє замовлення в базі даних і змінює його статус на
"Очікує виконання".
5 Система передає замовлення кухарю.
Інтерфейс кухаря отримує інформацію про замовлення зі статусом
"Очікує виконання".
6 Кухар змінює статус замовлення на "Готове".
Система оновлює статус у базі даних.
7 Користувач оплачує замовлення.
37
ЧДТУ 252356.006 ПЗ
Додаток взаємодіє з платіжною системою для обробки транзакції.
8 Система змінює статус замовлення на "Виконане".
Дані зберігаються для звітності.
Структура діаграми діяльності:
1 Початок:
Чорний кружок для старту.
2 Активності:
"Завантаження меню"
"Відображення страв"
"Додавання страв до замовлення"
"Підтвердження замовлення"
"Передача замовлення кухарю"
"Зміна статусу замовлення"
"Оплата замовлення"
"Збереження даних у звітність"
3 Рішення:
Чи підтверджене замовлення?
Чи готове замовлення?
4 Потоки:
Стрілки між активностями для позначення послідовності кроків.
5 Кінцева точка:
Подвійний кружок із позначенням завершення процесу.
2.5.2 Діаграма послідовності
Діаграма послідовності (sequence diagram) є одним із ключових
інструментів моделювання поведінки об’єктів у часі. Вона описує взаємодію між
об'єктами в межах певного сценарію використання, показуючи порядок обміну
повідомленнями, викликів методів або подій у хронологічній послідовності.
38
ЧДТУ 252356.006 ПЗ
Основними елементами діаграми послідовності є об’єкти (учасники
процесу), які розміщуються по горизонталі, та повідомлення (виклики функцій),
які передаються між ними по вертикалі. Вісь часу спрямована згори вниз, що
дозволяє візуалізувати динаміку системи.
Рисунок 2.11 – Діаграма послідовності веб-застосунку для автоматизації
кафе та ресторанів
Учасники (Actors):
1 Клієнт (Customer) — користувач додатку.
2 Інтерфейс користувача (UI) — візуальна частина додатку.
3 Сервер додатку (Application Server) — обробляє бізнес-логіку.
39
ЧДТУ 252356.006 ПЗ
4 База даних (Database) — зберігає інформацію про меню, замовлення,
клієнтів тощо.
5 Кухар (Cook) — обробляє замовлення.
6 Платіжна система (Payment Gateway) — забезпечує оплату.
Основний сценарій:
1 Клієнт відкриває додаток.
UI надсилає запит до сервера для отримання меню;
сервер отримує дані з бази даних і повертає їх на UI;
2 Клієнт вибирає страви та оформлює замовлення.
UI передає список страв і дані клієнта на сервер.
Сервер створює новий запис у базі даних зі статусом "Очікує
виконання".
3 Сервер передає замовлення кухарю.
Дані передаються на інтерфейс кухаря.
4 Кухар готує замовлення.
Після приготування кухар змінює статус замовлення на "Готово".
5 Клієнт оплачує замовлення.
UI надсилає запит на оплату через платіжну систему.
Платіжна система обробляє транзакцію та повертає підтвердження.
6 Система завершує замовлення.
Сервер оновлює статус замовлення в базі даних на "Виконано".
2.5.3 Діаграма комунікації
Основними компонентами цієї діаграми є об'єкти (показані у вигляді
прямокутників), зв’язки (лінії між об'єктами) та повідомлення (підписані стрілки з
номерами послідовності викликів методів). Повідомлення нумеруються згідно з
черговістю виконання, що дозволяє прослідкувати логіку сценарію.
У контексті розробки веб-додатку для автоматизації кафе та ресторанів,
діаграма комунікації може відображати, як клієнт взаємодіє з інтерфейсом, як
інформація передається до сервера, як сервер викликає компоненти обробки
40
ЧДТУ 252356.006 ПЗ
замовлень, звертається до бази даних та повертає відповідь користувачу. Такий
тип діаграми дозволяє краще зрозуміти, як побудовані зв’язки між компонентами
системи, та виявити потенційні проблеми у структурі взаємодій.
Рисунок 2.12 – Діаграма комунікації веб-застосунку для автоматизації кафе
та ресторанів
Ключові об'єкти (Actors):
1 Клієнт (Customer): Використовує додаток для перегляду меню та
оформлення замовлення.
2 Інтерфейс користувача (UI): Забезпечує взаємодію клієнта з системою.
3 Сервер додатку (Application Server): Обробляє бізнес-логіку.
4 База даних (Database): Зберігає дані меню, замовлень і транзакцій.
5 Кухар (Cook): Отримує замовлення через інтерфейс кухні.
6 Платіжна система (Payment Gateway): Обробляє транзакції.
Основний сценарій:
1 Клієнт завантажує меню:
41
ЧДТУ 252356.006 ПЗ
Клієнт → UI: Запит на меню.
UI → Сервер: Запит даних меню.
Сервер → База даних: Отримання даних меню.
База даних → Сервер: Повернення списку страв.
Сервер → UI: Передача даних меню клієнту.
2 Клієнт оформлює замовлення:
Клієнт → UI: Вибір страв і підтвердження замовлення.
UI → Сервер: Передача деталей замовлення.
Сервер → База даних: Створення нового запису замовлення.
Сервер → Кухар: Передача замовлення для виконання.
3 Оплата замовлення:
Клієнт → UI: Запит на оплату.
UI → Платіжна система: Запит на транзакцію.
Платіжна система → UI: Підтвердження успішної оплати.
UI → Сервер: Оновлення статусу замовлення.
Сервер → База даних: Зміна статусу замовлення на "Виконано".
2.5.4 Діаграма скінченого автомату
Діаграма скінченого автомату (state machine diagram) відображає поведінку
об’єкта або системи залежно від змін його внутрішнього стану. Вона описує, як
об’єкт переходить із одного стану в інший у відповідь на події, що відбуваються в
системі. Основними елементами діаграми є стани, події, дії та переходи. У
контексті веб-додатку для автоматизації кафе та ресторанів така діаграма може
описувати життєвий цикл замовлення — від створення, через підтвердження,
приготування, доставку до оплати або скасування. Це дозволяє формалізувати
логіку обробки замовлень, чітко визначити дозволені переходи між станами та
забезпечити передбачувану поведінку системи у відповідь на дії користувачів або
персоналу.
Станові вузли:
1 Initial (Початковий стан): Замовлення ще не створене.
42
ЧДТУ 252356.006 ПЗ
2 Order Created (Замовлення створене): Клієнт сформував і підтвердив
замовлення.
3 Order Pending (Очікує виконання): Замовлення зареєстроване в
системі та передане на кухню.
4 Order In Progress (Готується): Кухар виконує замовлення.
5 Order Ready (Готове): Замовлення приготоване та готове до подачі.
6 Order Paid (Оплачено): Клієнт оплатив замовлення.
7 Completed (Завершено): Замовлення успішно виконане.
Рисунок 2.13 - Діаграма скінченого автомату веб-застосунку для
автоматизації кафе та ресторанів
Переходи між станами:
1 Initial → Order Created:
Тригер: Клієнт вибрав страви та підтвердив замовлення.
2 Order Created → Order Pending:
43
ЧДТУ 252356.006 ПЗ
Тригер: Система зберегла замовлення в базу даних і передала
кухарю.
3 Order Pending → Order In Progress:
Тригер: Кухар почав готувати замовлення.
4 Order In Progress → Order Ready:
Тригер: Кухар завершив приготування.
5 Order Ready → Order Paid:
Тригер: Клієнт здійснив оплату.
6 Order Paid → Completed:
Тригер: Система підтвердила оплату, і замовлення видано клієнту.
Додаткові умови:
Error Handling: Якщо оплата не пройшла, замовлення залишається в стані
"Order Ready".
Скасування: Замовлення може бути скасоване на будь-якому етапі до
"Order In Progress".
44
ЧДТУ 252356.006 ПЗ
ВИСНОВОК ДО ДРУГОГО РОЗІДЛУ
У другому розділі було проведено всебічний аналіз наявних методів і
засобів розв’язання задач, пов’язаних із розробкою веб-застосунку для
автоматизації роботи кафе та ресторанів. На основі отриманих результатів були
створені та описані ключові діаграми, які відображають різні аспекти
функціонування системи та взаємодії її компонентів.
Під час формування вимог до системи було визначено як загальні, так і
деталізовані функціональні та нефункціональні вимоги. Це дозволило сформувати
чітке бачення цілей і функцій, необхідних для задоволення потреб користувачів
— зокрема студентів і викладачів.
Діаграма прецедентів ілюструє основні функціональні можливості системи
та взаємодію користувачів із нею, включаючи реєстрацію, перегляд меню,
керування складом і формування звітів.
Діаграма класів візуалізує структуру та зв’язки між основними
компонентами системи — такими як клієнти, меню, замовлення, склад, персонал і
звіти. Це допомогло визначити необхідні класи та методи.
Діаграма пакетів демонструє логічну організацію системи на високому
рівні, показуючи структуру функціональних модулів і принципи їх групування
для зручності розробки та підтримки коду.
Діаграма компонентів відображає фізичну реалізацію програмного
забезпечення, зокрема розподіл його частин між різними апаратними ресурсами
(сервер, база даних тощо).
Діаграма розгортання показує, як система розміщується на апаратному
забезпеченні, що важливо для планування ресурсів, забезпечення
масштабованості та надійності.
Діаграма діяльності візуалізує потік дій під час виконання ключових
операцій, дозволяючи краще зрозуміти логіку виконання функціональних
процесів.
45
ЧДТУ 252356.006 ПЗ
Діаграма комунікації відображає взаємодію між об’єктами системи через
обмін повідомленнями, що дозволяє проаналізувати послідовність і спосіб
передачі даних.
Діаграма станів (скінченного автомату) описує можливі стани веб-
застосунку та переходи між ними залежно від дій користувача, що дозволяє
змоделювати поведінку системи в динаміці.
Комплексне застосування цих діаграм забезпечило глибоке розуміння
архітектури, функціональності та поведінки веб-застосунку, що є критично
важливим для його якісного проєктування, розробки та успішного впровадження.
46
ЧДТУ 252356.006 ПЗ
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
3.1 Розробка програмного комплексу
У цьому розділі описано процес створення програмного комплексу веб
застосунку для автоматизації кафе та ресторанів — призначеного для
автоматизації обліку замовлень у закладах громадського харчування. Проект
реалізовано з використанням сучасних веб-технологій, а саме: React для
клієнтської частини, Firebase Firestore для зберігання даних та Firebase Hosting для
хостингу. Основною метою розробки є забезпечення зручного інтерфейсу для
користувачів та надійного зберігання інформації про замовлення, страви та чеки.
3.1.1 Обґрунтування вибору засобів реалізації
Під час проектування програмного комплексу постала потреба у виборі
інструментів, які дозволяють ефективно реалізувати функціональність веб-
застосунку з мінімальними витратами на інфраструктуру, забезпечити
масштабованість, швидкий розвиток та зручність у розгортанні. Після аналізу
сучасних засобів було обрано такі технології: React, Firebase (Firestore,
Authentication, Hosting), а також супутні інструменти для створення
користувацького інтерфейсу.
React — це бібліотека JavaScript, розроблена компанією Meta (Facebook) для
побудови інтерфейсів користувача. React дозволяє створювати компонентну
структуру застосунку, що значно полегшує підтримку, тестування та повторне
використання коду. Серед основних переваг React варто відзначити:
високу продуктивність завдяки віртуальному DOM;
розподіл логіки на компоненти;
велику спільноту розробників і доступність готових бібліотек.
Крім того, React дозволяє швидко створювати інтерактивні інтерфейси, що є
ключовим для роботи із замовленнями та чеками в режимі реального часу.
Firebase Firestore був обраний як основна система зберігання даних. Це
47
ЧДТУ 252356.006 ПЗ
хмарна NoSQL база даних, що забезпечує масштабованість, надійність та простий
API для доступу до даних у реальному часі. Firestore надає можливість:
зберігати структуровані дані (документи і колекції);
виконувати фільтрацію та сортування запитів;
працювати з офлайн-режимом (кешування);
швидко інтегруватися з React через Firebase SDK.
Завдяки Firestore розробник звільняється від потреби у власному
серверному ПЗ чи базі даних, що зменшує витрати на підтримку інфраструктури
та скорочує час розробки.
Firebase Authentication використовується для керування доступом до
додатку. Цей сервіс дозволяє легко додати авторизацію через email/пароль або
сторонні провайдери (Google, Facebook тощо). У випадку Syrve Lite було обрано
автентифікацію за email/паролем, як простий і безпечний варіант для закладів
громадського харчування.
Firebase Hosting надає можливість швидкого й безпечного розміщення
вебдодатку. Він підтримує HTTPS за замовчуванням, має інтеграцію з CI/CD
інструментами та дозволяє виконувати миттєві оновлення. Завдяки цьому
розгортання відбувається буквально в одну команду, без потреби у сторонньому
хостингу.
У якості інструменту для розробки інтерфейсу використовувалися сучасні
CSS-бібліотеки та фреймворки, які дозволили швидко створити зручний і
адаптивний інтерфейс для користувачів.
Отже, обрані технології дозволили реалізувати масштабований, зручний та
ефективний вебдодаток без додаткових витрат на серверне середовище. Firebase
повністю закрив потреби у бекенді, а React забезпечив гнучкий інтерфейс. Цей
підхід є сучасним і широко використовується в розробці стартапів та MVP-
продуктів.
3.1.2 Опис структурної (функціональної) схеми
Функціональна схема системи веб-додатку для автоматизації кафе та
ресторанів відображає основні компоненти програмного комплексу та
48
ЧДТУ 252356.006 ПЗ
взаємозв’язки між ними. Архітектура побудована за моделлю клієнт — хмара, де
взаємодія з базою даних і автентифікацією користувачів здійснюється через
Firebase.
Рисунок 3.1 - Структурна (функціональна) схема веб-додатку для
автоматизації кафе та ресторанів
До основних функціональних компонентів системи належать:
1 Користувач – відвідувач або працівник закладу, який працює з
інтерфейсом програми: обирає страви, формує замовлення, переглядає
чеки.
2 Інтерфейс клієнта (React Frontend) – графічний інтерфейс, що реалізує
логіку взаємодії користувача з системою, надсилає запити до бази даних,
відображає списки страв, замовлень і чеків.
3 Служби Firebase:
49
ЧДТУ 252356.006 ПЗ
Firebase Firestore — база даних для зберігання інформації про страви,
замовлення, чеки та користувачів.
Firebase Authentication — сервіс автентифікації користувачів.
Firebase Hosting — хостинг для розміщення React-застосунку.
Основний обмін даними відбувається між клієнтом і Firestore через REST
або SDK API. Після авторизації користувач отримує доступ до функцій, зокрема:
Створення та перегляд замовлень.
Додавання страв до кошика.
Генерація чека.
Перегляд статистики (звіту).
3.1.3 Опис логічної схеми системи
Логічна схема системи демонструє послідовність дій користувачів у процесі
взаємодії з веб-застосунком автоматизації обслуговування кафе чи ресторану.
Система передбачає два основних типи користувачів: офіціант та адміністратор.
Кожен з них має власну логіку роботи з інтерфейсом та функціоналом додатку.
Після авторизації користувача в системі, відбувається перевірка його ролі. У
випадку, якщо авторизується адміністратор, йому доступна можливість
переглядати фінансові та аналітичні звіти, а також фільтрувати їх за вибраним
часовим діапазоном. Це дозволяє аналізувати прибутки, кількість чеків і
популярність страв у заданий період.
Якщо ж користувач є офіціантом, його логіка дій передбачає взаємодію з
меню, створення та обробку замовлення. Спочатку він обирає необхідні страви з
інтерфейсу меню. Після формування замовлення воно надсилається на кухню.
Далі відбувається оформлення чека, який зберігається у базі даних Firestore. Після
успішної реєстрації замовлення система надає візуальне підтвердження
завершення операції.
Представлена діаграма активностей наочно ілюструє цей процес,
демонструючи логіку дій обох ролей у системі.
50
ЧДТУ 252356.006 ПЗ
Рисунок 3.2 - Логічна схема веб-додатку для автоматизації кафе та
ресторанів
3.1.4 Розробка бази даних
Розробка бази даних є критично важливим етапом створення веб-застосунку
для автоматизації кафе та ресторанів, оскільки вона забезпечує збереження,
організацію та обробку усіх ключових даних системи — меню, замовлень, чеків
та залишків товарів. Для реалізації цього проекту було обрано Firebase Firestore,
51
ЧДТУ 252356.006 ПЗ
що є документо-орієнтованою хмарною базою даних. Такий підхід дозволяє
зберігати дані у вигляді JSON-подібних документів та легко змінювати їх
структуру без необхідності складного моделювання реляцій.
Процес розробки бази даних для вебзастосунку
1 Аналіз вимог:
визначено основні об'єкти, які повинні бути збережені у базі даних:
страви (dishes), чеки (receipts), складські запаси (stock);
виявлено взаємозв'язки між об'єктами — наприклад, чек зберігає
інформацію про перелік обраних страв, їх кількість та загальну суму.
2 Проектування структури даних:
створено три основні колекції з відповідними полями;
визначено структуру вкладених об'єктів (наприклад, масив позицій у
чеку), типи полів, а також семантичну відповідність даних;
передбачено можливість розширення полів (наприклад, для введення
категорій страв, вагових одиниць тощо).
3 Реалізація бази даних:
налаштовано Firebase-проект та Firestore через Firebase Console;
створено колекції, вручну додано приклади документів для
первинного тестування;
реалізовано функції в React-додатку для додавання, редагування,
читання та видалення документів.
4 Тестування та оптимізація:
перевірено коректність читання/запису даних у Firestore;
реалізовано автоматичне оновлення інтерфейсу в режимі реального
часу при зміні даних;
опрацьовано структуру для збереження дат і часу для подальшого
фільтрування та сортування.
У додатку використовуються три основні колекції: dishes, receipts та stock.
Колекція dishes
52
ЧДТУ 252356.006 ПЗ
Ця колекція зберігає дані про всі доступні страви, що можуть бути замовлені
користувачем. Кожен документ у колекції містить такі поля:
image — посилання на зображення страви (тип: string).
name — назва страви (тип: string).
price — вартість страви (тип: number).
Рисунок 3.3 – Схема колекції dishes веб-додатку для автоматизації кафе та
ресторанів
Ця колекція використовується для формування меню, що відображається у
веб-інтерфейсі.
Колекція receipts
Колекція receipts зберігає чеки, створені після оформлення замовлення. Вона є
ключовою для реалізації функціоналу звітності та аналізу популярності страв.
Документи містять такі поля:
1. createdAt — час створення замовлення у форматі Firestore Timestamp.
2. date — дата й час створення у вигляді відформатованого рядка (тип:
string), який використовується для зручного виведення на екран.
3. items — масив об'єктів, кожен з яких представляє окрему страву в
замовленні. Кожен об’єкт має:
name — назва страви (тип: string);
price — вартість одиниці (тип: number);
53
ЧДТУ 252356.006 ПЗ
quantity — кількість (тип: number);
total — підсумкова сума за позицію (тип: number).
4. total — загальна сума чеку (тип: number).
Рисунок 3.4– Схема колекції receipts веб-додатку для автоматизації кафе та
ресторанів
Ця колекція використовується для побудови фінансових звітів, рейтингу страв
та аналітики.
Колекція stock
Колекція stock відображає поточні запаси інгредієнтів або товарів. Вона
використовується для управління складом та оновлення даних у майбутніх
версіях додатку. Поля документа:
name — назва товару/інгредієнта (тип: string);
price — ціна за одиницю (тип: number);
quantity — доступна кількість (тип: number);
54
ЧДТУ 252356.006 ПЗ
weight — вага (тип: number).
Рисунок 3.5 – схема колекції stock веб-додатку для автоматизації кафе та
ресторанів
Ця структура дозволяє надалі реалізувати функціонал контролю залишків і
закупівель.
Створена база даних є логічно-структурованою, масштабованою та
адаптованою під специфіку ресторанного бізнесу. Завдяки використанню Firestore
було забезпечено простоту реалізації, реальну синхронізацію даних з клієнтським
інтерфейсом та зручну інтеграцію з React-додатком. У подальшому структура
може бути розширена новими колекціями, такими як users, categories,
ordersHistory тощо.
3.1.5 Розробка інтерфейсу користувача
Інтерфейс користувача веб-застосунку для автоматизації кафе та ресторанів
розроблявся з урахуванням основних вимог, які забезпечують зручність та
ефективність роботи як для персоналу закладу, так і для адміністраторів системи:
Вимоги до інтерфейсу користувача:
Інтуїтивна зрозумілість: Інтерфейс повинен бути простим і зрозумілим,
щоб мінімізувати час навчання персоналу і дозволити швидко
55
ЧДТУ 252356.006 ПЗ
виконувати основні операції — замовлення, опрацювання чеків,
оновлення меню та запасів;
Адаптивність: Підтримка різних пристроїв (ПК, планшетів, мобільних
телефонів) з автоматичним підстроюванням елементів для комфортного
використання.
Швидкий доступ до функцій: Головні дії (додавання страв у
замовлення, формування чеку, редагування меню) мають бути доступні без
зайвих кроків.
Візуальна привабливість: Використання сучасного дизайну з
приємною кольоровою гамою, що відповідає стилю ресторанного бізнесу.
Реальний час: Автоматичне оновлення даних на екрані (наприклад,
статуси замовлень, наявність товарів) без необхідності ручного оновлення
сторінки.
Проектування основних компонентів інтерфейсу
Веб-застосунок складається з кількох ключових компонентів, які
забезпечують повний цикл роботи з меню, замовленнями та управлінням
запасами:
1 Головна сторінка меню
Відображає початкову сторінку сайту, на якій є блоки з інформацією про
сайт та слайдер з зображеннями страв.
Рисунок 3.6– Головна сторінка в веб-застосунку
56
ЧДТУ 252356.006 ПЗ
2 Компонент навігації
Забезпечує швидкий перехід між основними сторінками додатку (меню,
кошик, чеки, управління). Адаптивний дизайн дозволяє коректно
відображатися на різних пристроях.
Рисунок 3.7 – Навігаційне меню в веб-застосунку
3 Сторінка реєстрації
Відображає форму для реєстрації на сайті користувач може інтуїтивно
зрозуміло та швидко зареєструватись для подальшого користування
сайтом.
Рисунок 3.8 – Форма реєстрації в веб-застосунку
4 Сторінка входу
Відображає форму для входу на сайті користувач може інтуїтивно
зрозуміло та швидко ввійти в сайт.
57
ЧДТУ 252356.006 ПЗ
Рисунок 3.9– Форма входу в веб-застосунку
5 Сторінка меню
Відображає список усіх доступних страв із зображеннями, назвами та
цінами. Користувач може швидко додати страви до замовлення за
допомогою кнопки «Додати». Меню підвантажується динамічно з бази
даних Firestore.
Рисунок 3.10 – Сторінка меню в веб-застосунку
58
ЧДТУ 252356.006 ПЗ
6 Лінія пошуку
Дозволяє швидко знаходити потрібні картки блюд по символах які є в назві
страви. =
Рисунок 3.11 – Лінія пошуку в веб-застосунку на сторінці меню
7 Пагінація
Так як кількість карток може бути занадто великою щоб розмістити їх на
одній сторінці, було зроблено зручну пагінацію для кращого вигляду
сайту. Кількість кнопок пагінації максимально 4, перша кнопка завжди
1, а четверта – остання сторінка.
Рисунок 3.12 – Пагінація в веб-застосунку на сторінці меню
8 Картка блюда
Відображає картку зі стравою на якій є її зображення, назва, ціна страви,
а також функціональні кнопки для редагування, видалення, додати до
кошику та видалити з кошику.
59
ЧДТУ 252356.006 ПЗ
Рисунок 3.13 – Картка блюда в веб-застосунку на сторінці меню
9 Корзина замовлень
Показує всі вибрані користувачем страви. Автоматично підраховується
загальна вартість замовлення. Передбачена кнопка для підтвердження
замовлення та формування чеку.
Рисунок 3.14 – Корзина замовлень в веб-застосунку на сторінці меню
10 Вікно для формування чеку
Відображає данні про чек, а саме час створення, позиції з замовлення та
60
ЧДТУ 252356.006 ПЗ
загальна сума. Має функціональні кнопки для збереження чеку та
кнопку щоб відмінити дію. Дані одразу зберігаються у базі Firestore.
Рисунок 3.15 – Вікно для формування чеку в веб-застосунку на сторінці
меню
11 Панель редагування та створення карток блюд:
Відображає форму для редагування та створення карток блюд. Має поля
для вводу даних карток та кнопку додати. Дані одразу зберігаються у
базі Firestore.
Рисунок 3.16 – Панель редагування та створення карток блюд в веб-
застосунку на сторінці меню
61
ЧДТУ 252356.006 ПЗ
12 Сторінка звіту
Відображає список усіх сформованих чеків із датами, загальними
сумами та деталями замовлень. Користувач може переглядати історію
продажів та сортувати за датою. Також має рейтинг блюд по кількості
замовлень, для покращення аналізу попиту клієнтів.
Рисунок 3.17 – Сторінка звіту в веб-застосунку
13 Панель для сортування чеків
Дає змогу відображати суму та кількість чеків за вибраний проміжок
днів. Інтерфейс містить форми для вибору дати та кнопки для виконання
сортування.
Рисунок 3.18 – Панель для сортування чеків в веб-застосунку на сторінці
звітів
62
ЧДТУ 252356.006 ПЗ
14 Сторінка складу
Призначена для контролю над наявністю інгредієнтів та товарів на
складі. Користувач може змінювати кількість, додавати нові позиції,
переглядати інформацію про вагу та ціну. Також має лінію пошуку та
пагінацію які було розроблено та використано на сторінці меню.
Рисунок 3.19 – Сторінка складу в веб-застосунку
15 Панель для додавання продукту
Призначена для додавання та редагування продуктів для складу. Має 4
поля для вводу даних та кнопку для додавання. Дані одразу зберігаються
у базі Firestore.
Рисунок 3.20 – Панель для додавання продукту в веб-застосунку на сторінці
складу
63
ЧДТУ 252356.006 ПЗ
16 Таблиця з продуктами
Відображає таблицю з продуктами які підтягуються з бази Firestore.
Також має кнопки для редагування та кнопки для зміни кількості товару.
Рисунок 3.21 – Таблиця з продуктами в веб-застосунку на сторінці складу
Кожен компонент реалізований з використанням бібліотеки React, що
забезпечує швидкий рендер, повторне використання коду і гнучкість у
розширенні функціоналу. Стан застосунку централізовано керується за
допомогою React Context, що дозволяє легко синхронізувати дані між
компонентами.
3.1.6 Опис розробки програмних компонентів
Розробка програмного комплексу для автоматизації процесів кафе та
ресторанів передбачає створення низки функціональних компонентів, що
забезпечують злагоджену роботу веб-застосунку. Кожен із компонентів відповідає
за окрему частину логіки, інтерфейсу або взаємодії з базою даних. Нижче
наведено основні програмні компоненти та описано принцип їх взаємодії.
Основні компоненти:
1 Інтерфейс користувача (UI)
Візуальна частина застосунку, створена за допомогою бібліотеки React.
Складається з таких елементів:
64
ЧДТУ 252356.006 ПЗ
DishCard — компонент, що відображає окрему страву з її назвою,
ціною, зображенням, кнопкою для додавання до кошика.
Menu — головна сторінка, на якій відображаються всі доступні
страви з Firestore.
Stock — сторінка з списком продуктів на складі.
Report — сторінка з звітністю та аналітикою.
2 Контролери стану (State Management)
Для управління станом застосунку використовуються контексти React
Context API.
Вони забезпечують:
зберігання вибраних страв у кошику;
підрахунок загальної вартості замовлення;
передачу даних між компонентами без повторного рендерингу.
3 Модуль взаємодії з Firebase (Firebase Service Layer)
Інкапсулює логіку доступу до Firestore:
отримає дані з колекцій dishes, stock, receipts;
додає нові чеки до receipts;
оновлює залишки товарів у stock;
використовує Firebase Authentication для перевірки доступу
користувача.
4 База даних Firestore (Backend-as-a-Service)
Виступає у ролі бекенда:
dishes — зберігає всі доступні позиції меню;
stock — зберігає складські залишки;
receipts — історія всіх замовлень.
5 Система маршрутизації (Routing)
Здійснюється через React Router, забезпечуючи переходи між сторінками
без перезавантаження:
/menu — сторінка з меню;
65
ЧДТУ 252356.006 ПЗ
/stock — сторінка складу;
/report — сторінка зі звітом;
/login — сторінка зі входом.
/register — сторінка з реєстрацією.
Взаємодія компонентів:
1 Користувач відкриває сторінку з меню (Menu), де Menu завантажує дані
з Firestore через сервіс Firebase.
2 Після вибору страви вона передається у стан кошика, яким керує
контекст або Redux.
3 При переході на сторінку Cart користувач бачить замовлення, може
змінити кількість або видалити позиції.
4 При підтвердженні замовлення - створюється новий запис у receipts;
3.2 Тестування системи
У цьому розділі описується процес перевірки веб-застосунку на всіх етапах
розробки з метою забезпечення його коректної роботи, стабільності та
відповідності функціональним вимогам. Тестування охоплювало як окремі
компоненти, так і взаємодію між ними, включаючи перевірку даних у базі,
коректність логіки замовлення, відображення інтерфейсу та обробку помилок.
3.2.1 Модульне тестування
Модульне тестування проводиться для перевірки роботи окремих частин
програми в ізоляції. У веб-застосунку для автоматизації кафе було протестовано
ключові функції, які забезпечують роботу користувацького інтерфейсу, зв'язок з
базою даних та обробку бізнес-логіки. Для кожного модуля перевірялися
очікувані вхідні дані, вихідні результати та обробка виключних ситуацій
(наприклад, порожні поля, неправильні формати).
Основну увагу було приділено таким модулям:
Відображення списку страв із Firestore;
Додавання позицій до кошика;
66
ЧДТУ 252356.006 ПЗ
Обчислення загальної вартості замовлення;
Збереження замовлення до бази receipts;
Зменшення залишків на складі (stock);
Виведення списку чеків.
Таблиця 3.1
Результат модульного тестування
Назва Вхідні Очікуваний Фактичний
№ Статус
модуля дані результат результат
Дані у
Завантаження Картки зображаються
1 колекції Відповідає Пройдено
страв з Firestore у меню
dishes
Клік на
Додавання до Позиція додається до
2 кнопку Відповідає Пройдено
кошика кошика
"Додати"
Обчислення Декілька Підсумкова сума
3 загальної позицій у розраховується Відповідає Пройдено
вартості кошику коректно
Клік на
Оформлення Запис додається до
4 кнопку Відповідає Пройдено
замовлення колекції receipts
"Оформити"
Зменшення Значення quantity у
Продаж
5 залишків на stock зменшується Відповідає Пройдено
страви
складі відповідно
Таблиця з чеками
Відображення Наявні
з’являється у
6 чеків у адмін- записи у Відповідає Пройдено
компоненті
панелі receipts
AdminPanel
67
ЧДТУ 252356.006 ПЗ
Продовження таблиці 3.1
Клік на Повідомлення
Порожній оформлення про помилку, Відповіда
7 Пройдено
кошик з пустим запис у receipts не є
кошиком створюється
Страва не
Невірні дані у Пусте поле відображається, Відповіда
8 Пройдено
базі dishes name додаток не є
ламається
Тестування проводилося вручну з використанням інструментів
налагодження браузера (DevTools), логів у консолі, а також моніторингу даних у
Firestore Console. Результати модульного тестування показують, що всі ключові
функції веб-застосунку працюють коректно згідно з очікуваними результатами.
Це забезпечує впевненість у коректній роботі веб-застосунку при інтеграції його
компонентів і подальшому тестуванні.
3.2.2 Інтеграційне тестування
Інтеграційне тестування полягає у перевірці взаємодії між різними
модулями веб-застосунку, щоб переконатися, що система працює як єдине ціле. У
цьому проекті особливу увагу було приділено правильній інтеграції між
інтерфейсом користувача, логікою бізнес-процесів та базою даних Firestore.
Було протестовано такі основні інтеграційні зв’язки:
Відображення даних із бази в інтерфейсі;
Синхронізація кошика з базою даних при оформленні замовлення;
Оновлення залишків на складі після покупки;
Генерація чеку і його запис у Firestore;
Відображення чеків у адмін-панелі.
Таблиця 3.2
Результат інтеграційного тестування
68
ЧДТУ 252356.006 ПЗ
Кроки Очікуваний Фактичний
№ Сценарій інтеграції Статус
тестування результат результат
Внести дані
у Firestore Зображення
Завантаження страв з бази →
1 dishes, карток страв Відповідає Пройдено
відображення в UI
оновити в інтерфейсі
сторінку
Натиснути
Страви
«Додати»
Додавання в кошик → зʼявляються
2 біля Відповідає Пройдено
перегляд у списку замовлення в списку
декількох
кошика
страв
Новий запис
Оформлення замовлення → Натиснути
3 з'являється у Відповідає Пройдено
запис у receipts «Оформити»
базі receipts
Перевірити Значення
значення quantity у
Оформлення замовлення →
4 quantity складі Відповідає Пройдено
зменшення залишків у stock
до/після зменшується
оформлення пропорційно
Додати Кошик
страви → очищується
Оформлення замовлення →
5 оформити → після Відповідає Пройдено
очищення кошика
перевірити успішного
кошик запису
Здійснити Новий чек
6 Новий чек → збереження в pdf збереження зʼявляється у Відповідає Пройдено
чеку в pdf pdf
69
ЧДТУ 252356.006 ПЗ
Продовження таблиці 3.2
Видалити Картка
запис у страви
Видалення страви з бази →
7 dishes, зникає з Відповідає Пройдено
зникнення з інтерфейсу
оновити головної
сторінку сторінки
Змінити
quantity у
Значення в
stock через
Зовнішня зміна залишків → UI
8 Firebase Відповідає Пройдено
оновлення в інтерфейсі оновлюється
Console →
відповідно
оновити
інтерфейс
Тестування виконувалось шляхом послідовного виконання дій, які
охоплюють декілька компонентів одночасно. Також проводилась перевірка
реакції інтерфейсу на оновлення даних у базі.
3.2.3 Системне тестування
Системне тестування — це етап, на якому перевіряється веб-застосунок як
цілісна система. Його метою є перевірка повної функціональності застосунку
відповідно до вимог, виявлення помилок, які можуть виникнути в результаті
взаємодії усіх компонентів, та забезпечення стабільної роботи в різних умовах.
Таблиця 3.3
Результати системного тестування
Назва Очікуваний Фактичний
№ Опис кроків Статус
сценарію результат результат
70
ЧДТУ 252356.006 ПЗ
Продовження таблиці 3.3
Переглянути страви Кошик очищено,
Повний
→ додати до чек збережено,
процес Пройде
1 кошика → склад оновлено, Відповідає
замовлен но
оформити інтерфейс
ня
замовлення оновлено
Перевірка Стан кошика
відновлен Додати до кошика збережено або
Пройде
2 ня при → перезавантажити очищено залежно Відповідає
но
перезаван сторінку від логіки
таженні зберігання
Увійти з правами
Перевірка
користувача → Доступ обмежено Пройде
3 прав Відповідає
відкрити сторінку (або редирект) но
доступу
адміністратора
Видаленн
Зайти в адмін- Страва зникає з
я страв Пройде
4 панель → видалити головної сторінки Відповідає
адміністр но
страву меню
атором
Інгредієнт
Створенн зʼявляється у базі
Зайти в адмінку →
я нового та може Пройде
5 додати новий Відповідає
запису у враховуватись но
інгредієнт у stock
складі при наступному
замовленні
Генерація
чека з Додати 10+ позицій Чек створюється
Пройде
6 великою → оформити коректно, всі Відповідає
но
кількістю замовлення позиції враховані
товарів
71
ЧДТУ 252356.006 ПЗ
Продовження таблиці 3.3
Зайти на сайт → Зʼявляється
Обробка
перейти в кошик, повідомлення про
порожньо Пройде
7 нічого не додавши порожній кошик Відповідає
го но
→ натиснути або кнопка
кошика
“Оформити” неактивна
Для цього етапу тестування були змодельовані реальні сценарії
використання, що охоплюють увесь цикл користувацької взаємодії — від
перегляду меню до оформлення замовлення й обробки на рівні бази даних.
тестування проводилось у Google Chrome. Після завершення системного
тестування було підтверджено, що всі ключові функції веб-застосунку працюють
стабільно, а система готова до впровадження.
3.2.4 Приймальне тестування
Приймальне тестування (acceptance testing) — це завершальний етап
тестування, який виконується з метою підтвердження, що веб-застосунок
повністю відповідає вимогам замовника та очікуванням кінцевих користувачів.
На цьому етапі система оцінюється з точки зору користувача: перевіряється
зручність інтерфейсу, швидкість роботи, коректність бізнес-логіки та відсутність
критичних помилок у роботі.
Таблиця 3.4
Результати приймального тестування
Назва Очікуваний Фактичний
№ Опис дій Статус
сценарію результат результат
Вибрати 2
Вибір страв Замовлення
страви →
і оформлено, чек
1 перейти до Відповідає Пройдено
оформлення створено, кошик
кошика →
замовлення очищено
оформити
72
ЧДТУ 252356.006 ПЗ
Продовження таблиці 3.4
Створення Ввести назву,
Страва
нового ціну, картинку
2 відображається на Відповідає Пройдено
товару в → натиснути
головній сторінці
меню “Додати страву”
Натиснути
Страву видалено з
Видалення кнопку
3 бази, зникає з Відповідає Пройдено
страви “Видалити” біля
інтерфейсу
страви
Чек створюється
Генерація у Firestore →
Оформити
4 чеку і його виводиться Відповідає Пройдено
замовлення
збереження інформація про
суму
Поведінка Вимкнути Повідомлення про
сайту при інтернет → помилку →
5 Відповідає Пройдено
втраті оновити доступ
інтернету сторінку обмежений
Інтерфейс
Мобільна Відкрити сайт адаптований, всі
6 Відповідає Пройдено
адаптація на телефоні елементи
доступні
Перевірка Доступ
безпеки Ввести URL до заборонено або
7 Відповідає Пройдено
прав адмінки вручну редирект на
доступу головну
Валідація Ввести
Повідомлення про
при нечислову ціну
8 помилку → дія не Відповідає Пройдено
додаванні або порожнє
виконується
страви поле
73
ЧДТУ 252356.006 ПЗ
Продовження таблиці 3.4
Масове Оформити 5 Усі замовлення
9 оформлення замовлень оброблені, Відповідає Пройдено
замовлень поспіль записані у базу
Зміни
Відкрити stock
Оновлення зберігаються,
→ змінити
10 залишків на доступні для Відповідає Пройдено
кількість
складі подальших
інгредієнтів
замовлень
Тестування проводилось у середовищі, максимально наближеному до
реального використання, з участю тестової групи користувачів (менеджер,
адміністратор, відвідувач). На основі результатів було зроблено висновок щодо
готовності системи до впровадження.
3.3 Приклади впровадженого програмного комплексу
Для перевірки працездатності та демонстрації функціональності
розробленого веб-застосунку було проведено його тестове впровадження у
вигляді працюючого прототипу на базі Firebase. Додаток розміщено за адресою:
[6]
Основні реалізовані сценарії:
1 Головна сторінка з інформацією про сайт. Після відкриття додатку
користувач бачить опис функцій сайту (рисунок 3.22) та має можливість
пройти реєстрацію або ввійти в додаток. Без цього в користувача не буде
доступу до інших сторінок сайту
2 Сторінка реєстрації. Користувач повинен зареєструватись в додатку для
подальшого користування (рисунок 3.23).
3 Сторінка входу. Користувач може ввійти в додаток з будь якого
пристрою, ввівши пошту та пароль (рисунок 3.24).
74
ЧДТУ 252356.006 ПЗ
Рисунок 3.22 – Вигляд головної сторінки веб-застосунку
4 Сторінка з меню. Після реєстрації користувач може перейти на сторінку
меню (рисунок 3.25) побачити список усіх наявних страв, що
зберігаються у Firestore. Кожна страва представлена у вигляді картки з
фото (рисунок 3.26), назвою та ціною. Дані завантажуються у режимі
реального часу.
5 Додавання страв до кошика. Користувач може обрати необхідні страви,
натискаючи кнопку «Додати»(рисунок 3.28). При цьому в кошику
оновлюється загальна кількість позицій та їхня вартість.
6 Формування чеку. Після завершення вибору користувач може перейти
до кошика і натиснути кнопку «Оплатити»(рисунок 3.29). В результаті в
75
ЧДТУ 252356.006 ПЗ
базі даних створюється запис про замовлення (колекція receipts) з усіма
обраними позиціями та сумою чеку.
7 Функції редагування та додавання нових страв. Користувач може
додавати нові страви зображення, назва, ціна та видаляти або редагувати
наявні страви (рисунок 3.27).
8 Перегляд та редагування складу. Користувач може переглядати
складські залишки (рисунок 3.30) та оновлювати кількість товарів на
складі (рисунок 3.31).
9 Перегляд та сортування списку замовлень. Користувач може
переглядати кількість чеків та отриманого прибутку (рисунок 3.32), а
також фільтрувати за датою, щоб отримати данні за певний проміжок
часу (рисунок 3.33).
Рисунок 3.23 – Форма реєстрації в веб-застосунку
76
ЧДТУ 252356.006 ПЗ
Рисунок 3.24 – Форма входу в веб-застосунку
Рисунок 3.25 – Сторінка меню в веб-застосунку
77
ЧДТУ 252356.006 ПЗ
Рисунок 3.26 – Картка страви в веб-застосунку на сторінці меню
Рисунок 3.27 – Картка страви в веб-застосунку на сторінці меню
Рисунок 3.28 – Корзина в веб-застосунку на сторінці меню
78
ЧДТУ 252356.006 ПЗ
Рисунок 3.29 – Формування чеку в веб-застосунку на сторінці меню
Рисунок 3.30 – Сторінка складу в веб-застосунку
Рисунок 3.31 – Форма додавання продукту в веб-застосунку на сторінці
складу
79
ЧДТУ 252356.006 ПЗ
Рисунок 3.32 – Сторінка звіту в веб-застосунку
Рисунок 3.33 – Сторінка звіту в веб-застосунку
80
ЧДТУ 252356.006 ПЗ
ВИСНОВОК ДО ТРЕТЬОГО РОЗДІЛУ
У третьому розділі було детально розглянуто процес реалізації програмного
комплексу для автоматизації роботи закладів громадського харчування на базі
веб-технологій.
Початково було обґрунтовано вибір інструментів та технологій, серед яких:
React для побудови інтерфейсу користувача, Firebase Firestore для зберігання
даних, та Firebase Hosting для розгортання вебзастосунку. Ці технології
забезпечили високу швидкість розробки, масштабованість та зручність оновлення
системи.
Структурна та логічна схема системи продемонстрували взаємозв’язки між
компонентами та послідовність дій користувача під час роботи з додатком. На
основі цього було побудовано архітектуру, що охоплює всі основні модулі — від
клієнтської взаємодії до збереження замовлень у базі даних.
Окрему увагу приділено розробці бази даних. Були визначені основні
колекції: dishes, receipts, stock — із чітко структурованими полями, що
відповідають логіці бізнес-процесів. Створено логічну схему даних, яка дозволяє
легко масштабувати систему у майбутньому.
Інтерфейс користувача було спроектовано з урахуванням зручності для як
звичайних клієнтів, так і для адміністратора, який керує меню та переглядає
замовлення.
Далі проведено комплексне тестування системи: модульне, інтеграційне,
системне та приймальне. Результати показали, що всі компоненти працюють
стабільно, відповідають функціональним вимогам та готові до експлуатації.
Завершальним етапом стала демонстрація працюючого прототипу, який
було розгорнуто на хостингу Firebase, що підтверджує успішність реалізації
програмного комплексу та можливість його практичного використання у
реальних умовах.
81
ЧДТУ 252356.005 ПЗ
ВИСНОВОК
У процесі виконання кваліфікаційної роботи було реалізовано розробку веб-
застосунку для автоматизації кафе та ресторанів, аналогічного до функціоналу
Syrve. Проведені дослідження і практичні розробки підтвердили актуальність
теми в умовах сучасних вимог до автоматизації бізнес-процесів у сфері
громадського харчування. Розроблений додаток дозволяє значно спростити та
оптимізувати управління замовленнями, зменшити час обслуговування клієнтів, а
також забезпечити зручний контроль за діяльністю кухні та персоналу.
У межах роботи було виконано повний цикл розробки інформаційної
системи: від моделювання предметної області до впровадження результатів у
вигляді прототипу додатку. Моделювання предметної області дало змогу
визначити основні об’єкти системи та їх взаємозв’язки, що стало основою для
проектування функціоналу додатку. На основі отриманих вимог було створено
низку UML-діаграм, які демонструють структуру, процеси та взаємодії
компонентів системи. Зокрема, діаграми класів, прецедентів, послідовності,
діяльності та розгортання дозволили візуалізувати роботу системи на різних
рівнях.
Використання сучасних технологій, таких як HTML, CSS, JavaScript, Node.js
і Firebase Console, дало змогу створити інтерактивний, продуктивний і
масштабований додаток. У роботі також застосовувалась методологія Agile, яка
забезпечила ефективну організацію процесу розробки та швидке реагування на
зміни у вимогах.
Результатом роботи став прототип веб-застосунку, який може
використовуватися для впровадження у реальну практику автоматизації кафе та
ресторанів. Його функціонал охоплює обробку замовлень, передачу даних на
кухню, інтеграцію з платіжними системами та формування звітності для
адміністраторів. Така система може значно підвищити ефективність роботи
закладу, знизити помилки персоналу та забезпечити вищий рівень обслуговування
клієнтів.
82
ЧДТУ 252356.005 ПЗ
Отримані результати мають практичне значення і можуть бути використані
як основа для подальшого вдосконалення додатку, зокрема шляхом інтеграції з
мобільними платформами або додавання нових функцій, таких як управління
складськими запасами чи аналіз продажів.
Таким чином, поставлені задачі кваліфікаційної роботи були успішно
вирішені, а її цілі досягнуті. Розроблений додаток може стати корисним
інструментом для автоматизації роботи сучасних кафе та ресторанів.
83
ЧДТУ 252356.005 ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1 Sommerville I. Software Engineering. – 10th Edition. – Pearson, 2015. – 816
p.
2 Fowler M. UML Distilled: A Brief Guide to the Standard Object Modeling
Language. – 3rd Edition. – Addison-Wesley Professional, 2004. – 208 p.
3 Gamma E., Helm R., Johnson R., Vlissides J. Design Patterns: Elements of
Reusable Object-Oriented Software. – Addison-Wesley Professional, 1994. –
395 p.
4 W3Schools. HTML, CSS, JavaScript Tutorials. [Електронний ресурс]. –
Режим доступу: https://www.w3schools.com.
5 Mozilla Developer Network (MDN). Документація по веб-технологіям.
[Електронний ресурс]. – Режим доступу: https://developer.mozilla.org.
6 Syrve. Офіційний сайт системи автоматизації закладів громадського
харчування. [Електронний ресурс]. – Режим доступу:
https://www.syrve.com.
7 R-Keeper. Офіційний сайт системи автоматизації закладів громадського
харчування. [Електронний ресурс]. – Режим доступу:
https://rkeeper.com.ua/.
8 AutoSelling. Офіційний сайт системи автоматизації закладів
громадського харчування. [Електронний ресурс]. – Режим доступу:
https://autoselling.eu/.
9 Коляда Т. О., Шрамко І. Г. Основи автоматизації бізнес-процесів. –
Харків: Видавництво ХНЕУ, 2020. – 312 с.
10 Agile Alliance. Manifesto for Agile Software Development. [Електронний
ресурс]. – Режим доступу: https://agilemanifesto.org.
11 FireBase Documentation. Офіційна документація FireBase. [Електронний
ресурс]. – Режим доступу:
https://firebase.google.com/learn/pathways/firebase-web.
84
ЧДТУ 252356.005 ПЗ
12 Pressman R. S., Maxim B. R. Software Engineering: A Practitioner’s
Approach. – 8th ed. – McGraw-Hill, 2014. – 944 p.
13 Martin R. C. Clean Architecture: A Craftsman's Guide to Software Structure
and Design. – Prentice Hall, 2017. – 432 p.
14 Larman C. Applying UML and Patterns: An Introduction to Object-Oriented
Analysis and Design and Iterative Development. – 3rd ed. – Prentice Hall,
2004. – 736 p.
15 Date C. J. An Introduction to Database Systems. – 8th ed. – Addison-Wesley,
2003. – 1024 p.
16 Nielsen J. Usability Engineering. – Morgan Kaufmann, 1994. – 362 p.
17 Norman D. The Design of Everyday Things. – MIT Press, 2013. – 368 p.
18 Freeman E., Robson E. Head First Design Patterns. – O'Reilly Media, 2021. –
694 p.
19 Hunt A., Thomas D. The Pragmatic Programmer: Your Journey to Mastery. –
20th Anniversary Ed. – Addison-Wesley, 2019. – 352 p.
20 GitHub Docs. Git Version Control Documentation. [Електронний ресурс]. –
Режим доступу: https://docs.github.com
21 React Documentation. React – A JavaScript Library for Building User
Interfaces. [Електронний ресурс]. – Режим доступу: https://reactjs.org
22 Node.js Documentation. Node.js. [Електронний ресурс]. – Режим доступу:
https://nodejs.org
23 Postman Learning Center. Документація з тестування API. [Електронний
ресурс]. – Режим доступу: https://learning.postman.com
24 Jest Documentation. JavaScript Testing Framework. [Електронний ресурс].
– Режим доступу: https://jestjs.io
25 Open Web Application Security Project (OWASP). Top 10 Web Application
Security Risks. [Електронний ресурс]. – Режим доступу: https://owasp.org
26 ISO/IEC 25010:2011. Systems and Software Engineering – Systems and
Software Quality Requirements and Evaluation (SQuaRE).
85
ЧДТУ 252356.005 ПЗ
27 Sommerville I. Engineering Software Products: An Introduction to Modern
Software Engineering. – Pearson, 2019. – 384 p.
28 IEEE Standard for Software Life Cycle Processes. IEEE 12207-2008. – IEEE,
2008.
29 Кришталь Ю. С., Гапон Ю. В. Проектування інформаційних систем. –
КНЕУ, 2018. – 284 с.
30 Шапошніков Д. С. Методи та засоби проектування інтерфейсів
користувача. – Київ: Ліра-К, 2020. – 256 с.
86
ДОДАТОК А
ЗАТВЕРДЖЕНО:
Зав. кафедрою ПЗАС, професор
_________________ Голуб С.В.
„____” ______________ 2025 р.
Web-застосунок автоматизації роботи кафе та ресторанів
Специфікація
482. ЧДТУ 252356.006
Листів 2
Розробник ________________ Феофілов Я.В.
Керівник ________________ Півень О.Б.
Черкаси 2025
482. ЧДТУ 252356.006 2
Позначення Найменування Примітки
Документація
482.ЧДТУ. 252356 12 01 Текст програми
482.ЧДТУ. 252356 34 01 Інструкція користувачеві
482.ЧДТУ. 252356 90 01 Графічні матеріали
88
ДОДАТОК Б
Web-застосунок автоматизації роботи кафе та ресторанів
Текст програми
482. ЧДТУ. 252356 12 01
Листів 38
Розробник ________________ Феофілов Я.В.
Черкаси 2025
482. ЧДТУ. 252356 12 01 2
Лістинг файлу main.jsx:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { BrowserRouter } from "react-router-dom";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Лістинг файлу App.jsx:
import { Routes, Route } from "react-router-dom";
import { useEffect, useState } from "react";
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./firebase";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Menu from "./pages/Menu";
import Home from "./pages/Home";
import Navbar from "./components/Navbar";
import PrivateRoute from "./components/PrivateRoute";
import Stock from "./pages/Stock";
import Report from "./pages/Report";
import "./App.css";
function App() {
const [user, setUser] = useState(null);
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
setUser(user);
});
return () => unsubscribe();
}, []);
return (
<div className="app-container">
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route element={<PrivateRoute user={user} />}>
<Route path="/menu" element={<Menu />} />
<Route path="/stock" element={<Stock />} />
90
482. ЧДТУ. 252356 12 01 3
<Route path="/report" element={<Report />} />
</Route>
</Routes>
</div>
);
}
export default App;
Лістинг файлу firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: "AIzaSyDemNb-3riTz2p5BkdQvD569lApXLgZlCw",
authDomain: "syrve-lite.firebaseapp.com",
projectId: "syrve-lite",
storageBucket: "syrve-lite.firebasestorage.app",
messagingSenderId: "269567814301",
appId: "1:269567814301:web:6b98676453ed00f2f10274",
measurementId: "G-26PEJQLKPV"
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const analytics = getAnalytics(app);
export const db = getFirestore(app);
Лістинг файлу App.css
.app-container {
font-family: sans-serif;
padding: 20px;
}
/* .navbar {
display: flex;
justify-content: space-between;
background: #f0f0f0;
padding: 10px 20px;
margin-bottom: 20px;
border-radius: 8px;
} */
.logout-button {
background-color: #d9534f;
color: white;
border: none;
91
482. ЧДТУ. 252356 12 01 4
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
}
.logout-button:hover {
background-color: #c9302c;
}
Лістинг файлу services/dishService.js
const API_BASE_URL =
"https://firestore.googleapis.com/v1/projects/syrve-
lite/databases/(default)/documents/dishes";
export async function getAllDishes() {
const res = await fetch(`${API_BASE_URL}`);
const data = await res.json();
if (!data.documents) return [];
return data.documents.map(doc => ({
id: doc.name.split("/").pop(),
name: doc.fields.name.stringValue,
price: Number(doc.fields.price.integerValue ||
doc.fields.price.doubleValue),
image: doc.fields.image.stringValue
}));
}
export async function addDish(dish) {
const res = await fetch(`${API_BASE_URL}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
fields: {
name: { stringValue: dish.name },
price: { integerValue: dish.price },
image: { stringValue: dish.image }
}
})
});
const data = await res.json();
return {
...dish,
id: data.name.split("/").pop()
};
}
export async function updateDish(dish) {
92
482. ЧДТУ. 252356 12 01 5
const res = await fetch(`${API_BASE_URL}/${dish.id}`, {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
fields: {
name: { stringValue: dish.name },
price: { integerValue: dish.price },
image: { stringValue: dish.image }
}
})
});
return await res.json();
}
export async function deleteDish(id) {
await fetch(`${API_BASE_URL}/${id}`, {
method: "DELETE"
});
}
Лістинг файлу pages/Auth.css
.auth-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #fff;
text-align: center;
}
.auth-container h2 {
margin-bottom: 20px;
}
.auth-container input {
width: 100%;
padding: 8px;
margin-bottom: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
.auth-container button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
93
482. ЧДТУ. 252356 12 01 6
}
.auth-container button:hover {
background-color: #0056b3;
}
Лістинг файлу pages/Home.css
.home-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40px;
}
.slider-wrapper {
width: 900px;
height: 400px;
overflow: hidden;
position: relative;
}
.slider-wrapper img {
width: 900px;
height: 400px;
object-fit: cover;
}
.auth-buttons {
margin-top: 20px;
display: flex;
gap: 10px;
}
.auth-buttons button {
padding: 10px 20px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.auth-buttons button:hover {
background-color: rgba(255, 255, 255, 1);
}
.slick-prev, .slick-next {
width: 100px;
height: 100px;
z-index: 1;
94
482. ЧДТУ. 252356 12 01 7
}
.slick-prev:before, .slick-next:before {
font-size: 50px;
color: #74bde2c2;
}
.info-section {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #f0f8ff;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.info-section h2 {
margin-bottom: 10px;
color: #0077cc;
}
.info-section h3 {
margin-bottom: 10px;
font-weight: normal;
}
.info-section p {
font-size: 16px;
line-height: 1.6;
}
Лістинг файлу pages/Home.jsx
import React, { useState } from "react";
import Slider from "react-slick";
import Modal from "react-modal";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import "./Home.css";
import Login from "./Login";
import Register from "./Register";
const Home = () => {
const [isLoginOpen, setLoginOpen] = useState(false);
const [isRegisterOpen, setRegisterOpen] = useState(false);
const sliderSettings = {
dots: true,
infinite: true,
arrows: true,
95
482. ЧДТУ. 252356 12 01 8
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
cssEase: "linear"
};
const images = [
"https://i.pinimg.com/736x/9c/2f/52/9c2f52be87037fc39f713439bcf2aae1
.jpg",
"https://i.pinimg.com/736x/70/2b/a1/702ba1425b8b05f73d4c4e3981b7a2b3
.jpg",
"https://i.pinimg.com/736x/cf/5b/27/cf5b272ab703c26867196b09ad41a4b0
.jpg"
];
return (
<div className="home-container">
<div className="slider-wrapper">
<Slider {...sliderSettings}>
{images.map((src, idx) => (
<div key={idx}>
<img src={src} alt={`Слайд ${idx + 1}`} />
</div>
))}
</Slider>
</div>
<div className="info-section">
<h2>Що автоматизує програма</h2>
<h3>Касса</h3>
<p>
Простий і багатофункціональний інтерфейс оснащений
легкою навігацією та зручним меню.
Він доступний у навчанні та допоможе співробітникам
закладу працювати на результат:
</p>
</div>
<div className="info-section">
<h3>Склад</h3>
<p>
Автоматизуйте облік продуктів, контролюйте залишки на
складі та отримуйте сповіщення про необхідність поповнення.
Ведення залишків та рух товарів тепер простіше.
</p>
</div>
96
482. ЧДТУ 252356 12 01 9
<div className="info-section">
<h3>Звіти та аналітика</h3>
<p>
Отримуйте наочні звіти з продажу, ефективності
персоналу та популярності страв.
Система допомагає приймати обґрунтовані рішення для
розвитку бізнесу.
</p>
</div>
<Modal isOpen={isLoginOpen} onRequestClose={() =>
setLoginOpen(false)}>
<Login />
</Modal>
<Modal isOpen={isRegisterOpen} onRequestClose={() =>
setRegisterOpen(false)}>
<Register />
</Modal>
</div>
);
};
export default Home;
Лістинг файлу pages/Login.jsx
import { useState } from "react";
import { auth } from "../firebase";
import { signInWithEmailAndPassword } from "firebase/auth";
import { useNavigate } from "react-router-dom";
import "./Auth.css";
export default function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
const handleLogin = async () => {
try {
await signInWithEmailAndPassword(auth, email, password);
navigate("/menu");
} catch (error) {
alert("Помилка входа: " + error.message);
}
};
return (
<div className="auth-container">
<h2>Вхід</h2>
<input placeholder="Email" value={email} onChange={(e) =>
setEmail(e.target.value)} />
97
482. ЧДТУ 252356 12 01 10
<input type="password" placeholder="Пароль"
value={password} onChange={(e) => setPassword(e.target.value)} />
<button onClick={handleLogin}>Війти</button>
</div>
);
}
Лістинг файлу pages/Menu.css
.menu-page {
display: flex;
gap: 30px;
padding: 20px;
align-items: flex-start;
}
.menu-sidebar {
width: 280px;
display: flex;
flex-direction: column;
gap: 20px;
}
.dish-form,
.cart-summary {
border: 1px solid #ccc;
border-radius: 8px;
background: #f9f9f9;
padding: 15px;
}
.dish-form input,
.dish-form button {
padding: 8px;
margin-bottom: 8px;
width: 100%;
box-sizing: border-box;
}
.menu-container {
flex-grow: 1;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.dish-grid {
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 30px;
max-height: calc(3 * 250px + 2 * 16px);
98
482. ЧДТУ 252356 12 01 11
overflow: hidden;
}
Лістинг файлу pages/Menu.jsx
import { useEffect, useState } from "react";
import DishCard from "../components/DishCard";
import CartSummary from "../components/CartSummary";
import SearchBar from "../components/SearchBar";
import Pagination from "../components/Pagination";
import { db } from "../firebase";
import {
collection,
getDocs,
addDoc,
deleteDoc,
updateDoc,
doc,
} from "firebase/firestore";
import "./Menu.css";
const dishesCollection = collection(db, "dishes");
const placeholderImage =
"https://via.placeholder.com/150?text=Блюдо";
export default function Menu() {
const [dishes, setDishes] = useState([]);
const [cart, setCart] = useState({});
const [form, setForm] = useState({ name: "", price: "",
image: "" });
const [editingId, setEditingId] = useState(null);
const [searchTerm, setSearchTerm] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
useEffect(() => {
const fetchDishes = async () => {
const snapshot = await getDocs(dishesCollection);
const list = snapshot.docs.map((doc) => ({ id: doc.id,
...doc.data() }));
setDishes(list);
};
fetchDishes();
}, []);
const filteredDishes = dishes.filter((dish) =>
dish.name.toLowerCase().includes(searchTerm.toLowerCase())
);
const totalPages = Math.ceil(filteredDishes.length /
itemsPerPage);
const paginatedDishes = filteredDishes.slice(
(currentPage - 1) * itemsPerPage,
99
482. ЧДТУ 252356 12 01 12
currentPage * itemsPerPage
);
const addToCart = (dish) => {
setCart((prev) => ({
...prev,
[dish.id]: {
...dish,
quantity: prev[dish.id] ? prev[dish.id].quantity + 1 :
1,
},
}));
};
const removeFromCart = (dishId) => {
setCart((prev) => {
const existing = prev[dishId];
if (!existing) return prev;
if (existing.quantity === 1) {
const updated = { ...prev };
delete updated[dishId];
return updated;
}
return {
...prev,
[dishId]: { ...existing, quantity: existing.quantity -
1 },
};
});
};
const handleFormSubmit = async (e) => {
e.preventDefault();
if (!form.name || !form.price) return;
const image = form.image.trim() || placeholderImage;
if (editingId) {
const ref = doc(db, "dishes", editingId);
await updateDoc(ref, {
name: form.name,
price: Number(form.price),
image,
});
setDishes((prev) =>
prev.map((d) =>
d.id === editingId ? { ...d, name: form.name, price:
Number(form.price), image } : d
)
);
} else {
const newDoc = await addDoc(dishesCollection, {
100
482. ЧДТУ 252356 12 01 13
name: form.name,
price: Number(form.price),
image,
});
setDishes((prev) => [...prev, { id: newDoc.id, name:
form.name, price: Number(form.price), image }]);
}
setForm({ name: "", price: "", image: "" });
setEditingId(null);
};
const handleEdit = (dish) => {
setForm({
name: dish.name,
price: dish.price,
image: dish.image === placeholderImage ? "" : dish.image,
});
setEditingId(dish.id);
};
const handleDelete = async (id) => {
await deleteDoc(doc(db, "dishes", id));
setDishes((prev) => prev.filter((d) => d.id !== id));
setCart((prev) => {
const updated = { ...prev };
delete updated[id];
return updated;
});
};
const cartItems = Object.values(cart);
const total = cartItems.reduce((sum, item) => sum +
item.price * item.quantity, 0);
return (
<div className="menu-page">
<div className="menu-sidebar">
<form className="dish-form"
onSubmit={handleFormSubmit}>
<h3>{editingId ? "Редагувати" : "Додати блюдо"}</h3>
<input
type="text"
placeholder="Назва"
value={form.name}
onChange={(e) => setForm({ ...form, name:
e.target.value })}
required
/>
<input
type="number"
placeholder="Ціна"
101
482. ЧДТУ 252356 12 01 14
value={form.price}
onChange={(e) => setForm({ ...form, price:
e.target.value })}
required
/>
<input
type="text"
placeholder="Посилання на зображення (не
обов'язково)"
value={form.image}
onChange={(e) => setForm({ ...form, image:
e.target.value })}
/>
<button type="submit">{editingId ? "Зберегти" :
"Додати"}</button>
</form>
<CartSummary cartItems={cartItems} total={total}
clearCart={() => setCart({})} />
</div>
<div className="menu-container">
<h2>Меню</h2>
<SearchBar searchTerm={searchTerm}
setSearchTerm={(term) => {
setSearchTerm(term);
setCurrentPage(1);
}} />
<div className="dish-grid">
{paginatedDishes.map((dish) => (
<DishCard
key={dish.id}
dish={dish}
onEdit={handleEdit}
onDelete={handleDelete}
onAdd={addToCart}
onRemove={removeFromCart}
cart={cart}
/>
))}
</div>
<Pagination
currentPage={currentPage}
totalPages={totalPages}
setCurrentPage={setCurrentPage}
/>
</div>
</div>
);
102
482. ЧДТУ 252356 12 01 15
}
Лістинг файлу pages/Register.jsx
import { useState } from "react";
import { auth } from "../firebase";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { useNavigate } from "react-router-dom";
import "./Auth.css";
export default function Register() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
const handleRegister = async () => {
try {
await createUserWithEmailAndPassword(auth, email,
password);
navigate("/menu");
} catch (error) {
alert("Помилка реєстрації: " + error.message);
}
};
return (
<div className="auth-container">
<h2>Реєстрація</h2>
<input placeholder="Email" value={email} onChange={(e) =>
setEmail(e.target.value)} />
<input type="password" placeholder="Пароль"
value={password} onChange={(e) => setPassword(e.target.value)} />
<button onClick={handleRegister}>Зареєструватися</button>
</div>
);
}
Лістинг файлу pages/Report.css
.report-page {
max-width: 960px;
margin: 0 auto;
padding: 2rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #ffffff;
color: #333;
}
.report-page h2 {
text-align: center;
margin-bottom: 2rem;
font-size: 2rem;
color: #222;
}
103
482. ЧДТУ 252356 12 01 16
.filter-block {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.filter-block label {
display: flex;
flex-direction: column;
font-size: 0.9rem;
color: #444;
}
.filter-block input[type="date"] {
padding: 0.5rem;
border-radius: 8px;
border: 1px solid #ccc;
margin-top: 0.25rem;
font-size: 1rem;
}
.filter-block button {
padding: 0.6rem 1.2rem;
background-color: #1976d2;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}
.filter-block button:hover {
background-color: #1565c0;
}
.summary {
display: flex;
justify-content: space-between;
background-color: #f5f5f5;
padding: 1rem;
border-radius: 10px;
margin-bottom: 2rem;
font-size: 1.2rem;
}
.rating h3 {
margin-bottom: 1rem;
font-size: 1.5rem;
104
482. ЧДТУ 252356 12 01 17
text-align: center;
}
.rating table {
width: 100%;
border-collapse: collapse;
}
.rating th,
.rating td {
border: 1px solid #ddd;
padding: 0.8rem;
text-align: center;
}
.rating th {
background-color: #f0f0f0;
}
.rating tr:nth-child(even) {
background-color: #f9f9f9;
}
@media (max-width: 600px) {
.summary {
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.filter-block {
flex-direction: column;
align-items: center;
}
.filter-block label {
width: 100%;
text-align: center;
}
}
Лістинг файлу pages/report.jsx
import React, { useEffect, useState } from "react";
import { db } from "../firebase";
import { collection, getDocs } from "firebase/firestore";
import "./Report.css";
const receiptsCollection = collection(db, "receipts");
export default function Report() {
const [allReceipts, setAllReceipts] = useState([]);
const [filteredReceipts, setFilteredReceipts] = useState([]);
105
482. ЧДТУ 252356 12 01 18
const [totalAmount, setTotalAmount] = useState(0);
const [dishRatings, setDishRatings] = useState({});
const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState("");
useEffect(() => {
const fetchReceipts = async () => {
const snapshot = await getDocs(receiptsCollection);
const list = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
setAllReceipts(list);
setFilteredReceipts(list);
calculateTotals(list);
};
fetchReceipts();
}, []);
const calculateTotals = (receipts) => {
let sum = 0;
const ratings = {};
receipts.forEach((receipt) => {
const items = Array.isArray(receipt.items)
? receipt.items
: Object.values(receipt.items || {});
items.forEach((item) => {
sum += Number(item.total || 0);
let name = item.name;
if (name === undefined || name === null || name === "") {
name = "Без назви";
} else {
name = String(name);
}
ratings[name] = (ratings[name] || 0) + (item.quantity || 0);
});
});
setTotalAmount(sum);
setDishRatings(ratings);
};
const handleFilterByDate = () => {
if (!startDate || !endDate) return;
const start = new Date(startDate);
const end = new Date(endDate);
end.setHours(23, 59, 59, 999);
const filtered = allReceipts.filter((receipt) => {
106
482. ЧДТУ 252356 12 01 19
const receiptDate = receipt.createdAt?.toDate?.();
return receiptDate && receiptDate >= start && receiptDate
<= end;
});
setFilteredReceipts(filtered);
calculateTotals(filtered);
};
const resetFilter = () => {
setFilteredReceipts(allReceipts);
calculateTotals(allReceipts);
setStartDate("");
setEndDate("");
};
return (
<div className="report-page">
<h2>Звіт</h2>
<div className="filter-block">
<label>
З:
<input
type="date"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
/>
</label>
<label>
По:
<input
type="date"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
/>
</label>
<button onClick={handleFilterByDate}>Виконати</button>
<button onClick={resetFilter}>Зкинути</button>
</div>
<div className="summary">
<p>Обща сумма: {totalAmount} грн</p>
<p>Кількість чеков: {filteredReceipts.length}</p>
</div>
<div className="rating">
<h3>Рейтинг блюд</h3>
<table>
<thead>
<tr>
<th>Блюдо</th>
<th>Кількість Замовлень</th>
107
482. ЧДТУ 252356 12 01 20
</tr>
</thead>
<tbody>
{Object.entries(dishRatings).map(([name, count]) =>
(
<tr key={name}>
<td>{name}</td>
<td>{count}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}
Лістинг файлу pages/Stock.css
.stock-page {
padding: 20px;
max-width: 1000px;
margin: 0 auto;
}
.product-form {
margin-bottom: 20px;
}
.product-form input {
margin: 5px;
padding: 10px;
font-size: 14px;
}
.product-form button {
padding: 10px 20px;
font-size: 16px;
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
}
.product-form button:hover {
background-color: #45a049;
}
.stock-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
108
482. ЧДТУ 252356 12 01 21
.stock-table th, .stock-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.stock-table th {
background-color: #f2f2f2;
}
.stock-table button {
padding: 5px 10px;
margin-right: 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
.stock-table button:hover {
background-color: #0056b3;
}
Лістинг файлу pages/Stock.jsx
import React, { useEffect, useState } from "react";
import { db } from "../firebase";
import { collection, getDocs, addDoc, updateDoc, deleteDoc, doc
} from "firebase/firestore";
import SearchBar from "../components/SearchBar";
import Pagination from "../components/Pagination";
import "./Stock.css";
const stockCollection = collection(db, "stock");
export default function Stock() {
const [products, setProducts] = useState([]);
const [form, setForm] = useState({ name: "", weight: "",
price: "", quantity: "" });
const [editingId, setEditingId] = useState(null);
const [searchTerm, setSearchTerm] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [productsPerPage] = useState(5);
useEffect(() => {
const fetchProducts = async () => {
const snapshot = await getDocs(stockCollection);
const list = snapshot.docs.map((doc) => ({ id: doc.id,
...doc.data() }));
setProducts(list);
};
fetchProducts();
}, []);
109
482. ЧДТУ 252356 12 01 22
const handleFormSubmit = async (e) => {
e.preventDefault();
if (!form.name || !form.weight || !form.price ||
!form.quantity) return;
const newProduct = {
name: form.name,
weight: parseFloat(form.weight),
price: parseFloat(form.price),
quantity: parseInt(form.quantity),
};
if (editingId) {
const productRef = doc(db, "stock", editingId);
await updateDoc(productRef, newProduct);
setProducts((prev) =>
prev.map((prod) => (prod.id === editingId ? { ...prod,
...newProduct } : prod))
);
} else {
const newDoc = await addDoc(stockCollection, newProduct);
setProducts((prev) => [...prev, { id: newDoc.id,
...newProduct }]);
}
setForm({ name: "", weight: "", price: "", quantity: "" });
setEditingId(null);
};
const handleDelete = async (id) => {
await deleteDoc(doc(db, "stock", id));
setProducts((prev) => prev.filter((prod) => prod.id !==
id));
};
const handleEdit = (product) => {
setForm({
name: product.name,
weight: product.weight,
price: product.price,
quantity: product.quantity,
});
setEditingId(product.id);
};
const handleQuantityChange = async (id, type) => {
const product = products.find((prod) => prod.id === id);
const updatedQuantity = type === "add" ? product.quantity +
1 : product.quantity - 1;
if (updatedQuantity >= 0) {
const productRef = doc(db, "stock", id);
110
482. ЧДТУ 252356 12 01 23
await updateDoc(productRef, { quantity: updatedQuantity
});
setProducts((prev) =>
prev.map((prod) =>
prod.id === id ? { ...prod, quantity: updatedQuantity
} : prod
)
);
}
};
const filteredProducts = products.filter(product =>
product.name.toLowerCase().includes(searchTerm.toLowerCase())
);
const indexOfLastProduct = currentPage * productsPerPage;
const indexOfFirstProduct = indexOfLastProduct -
productsPerPage;
const currentProducts =
filteredProducts.slice(indexOfFirstProduct, indexOfLastProduct);
return (
<div className="stock-page">
<h2>Склад</h2>
<SearchBar searchTerm={searchTerm}
setSearchTerm={setSearchTerm} />
<form className="product-form"
onSubmit={handleFormSubmit}>
<h3>{editingId ? "Редагувати продукт" : "Додати
продукт"}</h3>
<input
type="text"
placeholder="Назва"
value={form.name}
onChange={(e) => setForm({ ...form, name:
e.target.value })}
required
/>
<input
type="number"
placeholder="Вага (кг)"
value={form.weight}
onChange={(e) => setForm({ ...form, weight:
e.target.value })}
required
/>
<input
type="number"
placeholder="Ціна за одиницю (грн)"
value={form.price}
111
482. ЧДТУ 252356 12 01 24
onChange={(e) => setForm({ ...form, price:
e.target.value })}
required
/>
<input
type="number"
placeholder="Кількість"
value={form.quantity}
onChange={(e) => setForm({ ...form, quantity:
e.target.value })}
required
/>
<button type="submit">{editingId ? "Зберегти" :
"Додати"}</button>
</form>
<table className="stock-table">
<thead>
<tr>
<th>Назва</th>
<th>Вага (кг)</th>
<th>Ціна за одиницю (грн)</th>
<th>Кількість</th>
<th>Дії</th>
</tr>
</thead>
<tbody>
{currentProducts.map((product) => (
<tr key={product.id}>
<td>{product.name}</td>
<td>{product.weight}</td>
<td>{product.price}</td>
<td>{product.quantity}</td>
<td>
<button onClick={() =>
handleEdit(product)}>Редагувати</button>
<button onClick={() =>
handleDelete(product.id)}>Видалити</button>
<button onClick={() =>
handleQuantityChange(product.id, "add")}>Додати</button>
<button onClick={() =>
handleQuantityChange(product.id, "remove")}>Відняти</button>
</td>
</tr>
))}
</tbody>
</table>
<Pagination
currentPage={currentPage}
totalPages={Math.ceil(filteredProducts.length /
productsPerPage)}
setCurrentPage={setCurrentPage}
112
482. ЧДТУ 252356 12 01 25
/>
</div>
);
}
Лістинг файлу components/CartSummary.css
.cart-summary {
text-align: center;
}
.cart-summary .receipt-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.cart-summary .receipt-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
max-width: 400px;
width: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.cart-summary .receipt-content h4 {
font-size: 1.5em;
margin-bottom: 10px;
}
.cart-summary .receipt-content ul {
list-style-type: none;
padding: 0;
}
.cart-summary .receipt-content ul li {
padding: 5px 0;
}
.cart-summary .receipt-content p {
font-weight: bold;
}
.cart-summary .receipt-content button {
margin-top: 10px;
padding: 8px 16px;
113
482. ЧДТУ 252356 12 01 26
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.cart-summary .receipt-content button:hover {
background-color: #0056b3;
}
.cart-summary .receipt-content button:last-child {
background-color: #dc3545;
}
.cart-summary .receipt-content button:last-child:hover {
background-color: #c82333;
}
Лістинг файлу components/CartSummary.jsx
import React, { useState } from "react";
import { jsPDF } from "jspdf";
import "jspdf/dist/jspdf.umd.min.js";
import { db } from "../firebase";
import { collection, addDoc } from "firebase/firestore";
import "./CartSummary.css";
export default function CartSummary({ cartItems, total,
setCartItems }) {
const [receipt, setReceipt] = useState(null);
const [showReceipt, setShowReceipt] = useState(false);
const handleSaveReceiptWithoutPDF = async () => {
const receiptData = {
items: cartItems.map((item) => ({
name: item.name,
quantity: item.quantity,
price: item.price,
total: item.price * item.quantity,
})),
total: total,
date: new Date().toLocaleString(),
createdAt: new Date(),
};
try {
await addDoc(collection(db, "receipts"), receiptData);
console.log("Чек збережено в базу данных");
setShowReceipt(false);
setCartItems([]);
} catch (error) {
114
482. ЧДТУ 252356 12 01 27
console.error("Ошибка при збереженні чека в базу
данных:", error);
}
};
const handleSaveReceiptWithPDF = () => {
const doc = new jsPDF();
doc.addFont("src/data/arialmt.ttf", "Arial", "normal");
doc.setFont("Arial");
doc.setFontSize(12);
doc.text(`Chek - ${receipt.date}`, 10, 10);
receipt.items.forEach((item, index) => {
doc.text(`${item.name} × ${item.quantity} = ${item.total}
₴`, 10, 20 + index * 10);
});
doc.text(`Summa: ${receipt.total} ₴`, 10, 30 +
receipt.items.length * 10);
doc.save("receipt.pdf");
setShowReceipt(false);
setCartItems([]);
};
const handleCloseReceipt = () => {
setShowReceipt(false);
setCartItems([]);
};
const handlePayment = () => {
const receiptData = cartItems.map((item) => ({
name: item.name,
quantity: item.quantity,
price: item.price,
total: item.price * item.quantity,
}));
setReceipt({
items: receiptData,
total: total,
date: new Date().toLocaleString(),
});
setShowReceipt(true);
};
return (
<div className="cart-summary">
115
482. ЧДТУ 252356 12 01 28
<h3>Корзина</h3>
{cartItems.length === 0 ? (
<p>Пусто</p>
) : (
<>
<ul>
{cartItems.map((item) => (
<li key={item.id}>
{item.name} × {item.quantity} = {item.price *
item.quantity} ₴
</li>
))}
</ul>
<p>
<strong>Всього:</strong> {total} ₴
</p>
<button onClick={handlePayment}>Оплатити</button>
</>
)}
{showReceipt && (
<div className="receipt-modal">
<div className="receipt-content">
<h4>Чек</h4>
<p><strong>Дата:</strong> {receipt.date}</p>
<ul>
{receipt.items.map((item, index) => (
<li key={index}>
{item.name} × {item.quantity} = {item.total}
₴
</li>
))}
</ul>
<p><strong>Итого:</strong> {receipt.total} ₴</p>
<button onClick={handleSaveReceiptWithPDF}>Зберегти
чек с PDF</button>
<button
onClick={handleSaveReceiptWithoutPDF}>Зберегти без PDF</button>
<button
onClick={handleCloseReceipt}>Відміна</button>
</div>
</div>
)}
</div>
);
}
Лістинг файлу components/DishCard.css
.dish-card {
width: 240px;
height: 320px;
position: relative;
116
482. ЧДТУ 252356 12 01 29
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dish-card img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 4px;
}
.dish-card h3 {
font-size: 16px;
margin: 8px 0 4px;
text-align: center;
}
.dish-card p {
margin: 4px 0;
text-align: center;
font-weight: bold;
}
.dish-edit-actions {
margin-top: 8px;
display: flex;
justify-content: space-between;
padding: 0 8px;
}
.dish-actions {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
display: flex;
justify-content: space-between;
}
.dish-edit-actions button,
.dish-actions button {
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background-color: #eee;
font-size: 16px;
117
482. ЧДТУ 252356 12 01 30
cursor: pointer;
transition: background 0.2s;
}
.dish-edit-actions button:hover,
.dish-actions button:hover {
background-color: #ddd;
}
Лістинг файлу components/DishCard.jsx
import React from "react";
import "./DishCard.css";
const DishCard = ({
dish,
cartQuantity,
onAdd,
onRemove,
onEdit,
onDelete,
}) => {
return (
<div className="dish-card">
<div className="dish-edit-actions">
<button onClick={() => onDelete(dish.id)}> </button>
<button onClick={() => onEdit(dish)}> </button>
</div>
<img src={dish.image} alt={dish.name} />
<h3>{dish.name}</h3>
<p>{dish.price} ₴</p>
<div className="dish-actions">
<button onClick={() => onAdd(dish)}>➕</button>
<button onClick={() => onRemove(dish.id)}>➖</button>
</div>
{cartQuantity > 0 && <p>В корзині: {cartQuantity}</p>}
</div>
);
};
export default DishCard;
Лістинг файлу components/NavBar.css
.navbar {
display: flex;
justify-content: space-between;
118
482. ЧДТУ 252356 12 01 31
align-items: center;
background-color: #56afdb;
color: white;
padding: 10px 20px;
position: sticky;
top: 0;
z-index: 1000;
border-radius: 8px;
}
.nav-left,
.nav-right {
display: flex;
align-items: center;
gap: 15px;
}
.logo {
width: 40px;
height: 40px;
object-fit: contain;
}
.nav-left a,
.nav-right a {
color: white;
text-decoration: none;
padding: 6px 12px;
border-radius: 4px;
transition: background-color 0.2s ease-in-out;
}
.nav-left a:hover,
.nav-right a:hover {
background-color: #008ecc;
}
.active {
background-color: #0077b6;
}
.nav-right span {
font-weight: bold;
color: #fff;
}
.nav-right button {
padding: 6px 12px;
background-color: #d9534f;
color: white;
border: none;
border-radius: 4px;
119
482. ЧДТУ 252356 12 01 32
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.nav-right button:hover {
background-color: #c9302c;
}
Лістинг файлу components/NavBar.jsx
import { NavLink, useNavigate } from "react-router-dom";
import { auth } from "../firebase";
import { signOut } from "firebase/auth";
import { useEffect, useState } from "react";
import "./Navbar.css";
import img from "./58596975_9391714.png";
export default function Navbar() {
const navigate = useNavigate();
const [user, setUser] = useState(null);
useEffect(() => {
const unsub = auth.onAuthStateChanged(setUser);
return () => unsub();
}, []);
const handleLogout = async () => {
await signOut(auth);
navigate("/");
};
return (
<nav className="navbar">
<div className="nav-left">
<img
src={img}
alt="Logo"
className="logo"
onClick={() => navigate("/")}
/>
<NavLink to="/menu" className={({ isActive }) =>
isActive ? "active" : ""}>
Меню
</NavLink>
<NavLink to="/stock" className={({ isActive }) =>
isActive ? "active" : ""}>
Склад
</NavLink>
<NavLink to="/report" className={({ isActive }) =>
isActive ? "active" : ""}>
Звіт
</NavLink>
120
482. ЧДТУ 252356 12 01 33
</div>
<div className="nav-right">
{!user ? (
<>
<NavLink to="/login" className={({ isActive }) =>
isActive ? "active" : ""}>
Вхід
</NavLink>
<NavLink to="/register" className={({ isActive })
=> isActive ? "active" : ""}>
Реєстрація
</NavLink>
</>
) : (
<>
<span>{user.email}</span>
<button onClick={handleLogout}>Вийти</button>
</>
)}
</div>
</nav>
);
}
Лістинг файлу components/Pagination.css
.pagination {
display: flex;
gap: 6px;
margin-top: 1rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.pagination button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pagination .ellipsis {
padding: 5px 10px;
color: #999;
}
.pagination button {
padding: 6px 12px;
border: 1px solid #ccc;
background: white;
cursor: pointer;
border-radius: 4px;
121
482. ЧДТУ 252356 12 01 34
transition: background 0.2s;
}
.pagination button:hover {
background: #f0f0f0;
}
.pagination button.active {
background: #007bff;
color: white;
border-color: #007bff;
font-weight: bold;
}
Лістинг файлу components/Pagination.jsx
import React from "react";
import "./Pagination.css";
export default function Pagination({ currentPage, totalPages,
setCurrentPage }) {
const handlePageChange = (pageNumber) => {
if (pageNumber >= 1 && pageNumber <= totalPages) {
setCurrentPage(pageNumber);
}
};
const handlePrevPage = () => {
if (currentPage > 1) {
setCurrentPage(currentPage - 1);
}
};
const handleNextPage = () => {
if (currentPage < totalPages) {
setCurrentPage(currentPage + 1);
}
};
const pageNumbers = [];
if (totalPages <= 5) {
for (let i = 1; i <= totalPages; i++) {
pageNumbers.push(i);
}
} else {
if (currentPage <= 3) {
for (let i = 1; i <= 5; i++) {
pageNumbers.push(i);
}
} else if (currentPage >= totalPages - 2) {
for (let i = totalPages - 4; i <= totalPages; i++) {
pageNumbers.push(i);
122
482. ЧДТУ 252356 12 01 35
}
} else {
pageNumbers.push(currentPage - 2, currentPage - 1,
currentPage, currentPage + 1, currentPage + 2);
}
}
return (
<div className="pagination">
<button onClick={handlePrevPage} disabled={currentPage
=== 1}>
Назад
</button>
{pageNumbers.map((number) => (
<button
key={number}
onClick={() => handlePageChange(number)}
className={number === currentPage ? "active" : ""}
>
{number}
</button>
))}
<button onClick={handleNextPage} disabled={currentPage
=== totalPages}>
Вперед
</button>
</div>
);
}
Лістинг файлу components/PrivateRout.jsx
import { Navigate, Outlet } from "react-router-dom";
const PrivateRoute = ({ user }) => {
return user ? <Outlet /> : <Navigate to="/" replace />;
};
export default PrivateRoute;
Лістинг файлу components/SearchBar.jsx
import React from "react";
import "./SearchBar.css";
export default function SearchBar({ searchTerm, setSearchTerm
}) {
return (
<input
123
482. ЧДТУ 252356 12 01 36
type="text"
placeholder="Пошук по назві..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="search-input"
/>
);
}
124
ДОДАТОК В
Web-застосунок автоматизації роботи кафе та ресторанів
Інструкція користувачеві
482. ЧДТУ. 252356 34 01
Листів 4
Розробник ________________ Феофілов Я.В.
Черкаси 2025
482. ЧДТУ. 252356 34 01
Цей веб-застосунок призначений для автоматизації процесу замовлення
страв у закладах громадського харчування. Система дозволяє зручно переглядати
меню, додавати страви до кошика, оформлювати замовлення та формувати чек.
Вона розроблена для використання офіціантами, адміністраторами або клієнтами
самообслуговування.
1 Доступ до системи
Для початку роботи з веб-додатком необхідно перейти за посиланням:
https://syrve-lite.web.app/
Система доступна з будь-якого сучасного браузера (Chrome, Firefox, Edge)
на ПК.
2 Реєстрація та вхід
2.1 Реєстрація нового користувача
1 Натисніть кнопку "Реєстрація" на головному екрані.
2 Введіть електронну адресу та пароль.
3 Підтвердіть дію – обліковий запис буде створено.
2.2 Вхід до системи
1 Натисніть "Вхід".
2 Введіть ваш email та пароль.
3 Після входу буде відкрито головну сторінку з меню.
3 Перегляд та вибір страв
Після входу до системи ви побачите список доступних страв (картки).
Назва страви – у верхній частині картки.
Зображення – центральна частина картки.
Ціна – вказана внизу.
Кнопка "Додати до кошика" – додає страву до вашого
замовлення.
4 Оформлення замовлення
1 Натисніть на кнопку «оплатити» у формі замовлення.
2 У кошику ви побачите перелік вибраних страв:
назва;
126
482. ЧДТУ. 252356 34 01
кількість;
ціна;
загальна сума.
3 За потреби змініть кількість або видаліть позицію.
4 Натисніть кнопку "Оформити замовлення".
5 Система згенерує електронний чек із деталями замовлення.
6 Замовлення буде автоматично збережено в базу даних (розділ
"Receipts").
5 Робота з базою даних
5.1 Додавання страв
Користувач може додавати нові позиції до меню через форму додавання
страв:
1 На сторінці меню натисніть на форму додання страви.
2 Заповніть поля:
назва страви;
ціна;
URL до зображення.
5.2 Управління запасами
У колекції stock відображаються залишки товарів:
1 На сторінці склад натисніть на форму додання страви.
2 Заповніть поля:
назва продукту;
вага;
кількість на складі.
6 Перегляд чеків
1 Користувач може переглянути історію замовлень.
2 Чеки зберігаються у Firebase Firestore → колекція receipts.
3 Кожен запис містить:
127
482. ЧДТУ. 252356 34 01
дату створення;
перелік страв;
підсумкову суму.
7 Вихід із системи
Для завершення роботи:
1 Натисніть на значок профілю (якщо є).
2 Оберіть "Вийти".
3 Система перенаправить на головну сторінку.
128
ДОДАТОК Г
Web-застосунок автоматизації роботи кафе та ресторанів
Графічні матеріали
482. ЧДТУ. 252356 90 01
Листів 13
Розробник ________________ Феофілов Я.В
Черкаси 2025
482. ЧДТУ. 252356 90 01 2
Рисунок Г1 – Слайд 1
Рисунок Г2 – Слайд 2
130
482. ЧДТУ. 252356 90 01 3
Рисунок Г3 – Слайд 3
Рисунок Г4 – Слайд 4
131
482. ЧДТУ. 252356 90 01 4
Рисунок Г5 – Слайд 5
Рисунок Г6 – Слайд 6
132
482. ЧДТУ. 252356 90 01 5
Рисунок Г7 – Слайд 7
Рисунок Г8 – Слайд 8
133
482. ЧДТУ. 252356 90 01 6
Рисунок Г9 – Слайд 9
Рисунок Г10 – Слайд 10
134
482. ЧДТУ. 252356 90 01 7
Рисунок Г11 – Слайд 11
Рисунок Г12 – Слайд 12
135
482. ЧДТУ. 252356 90 01 8
Рисунок Г13 – Слайд 13
Рисунок Г14 – Слайд 14
136
482. ЧДТУ. 252356 90 01 9
Рисунок Г15 – Слайд 15
Рисунок Г16 – Слайд 16
137
482. ЧДТУ. 252356 90 01 10
Рисунок Г17 – Слайд 17
Рисунок Г18 – Слайд 18
138
482. ЧДТУ. 252356 90 01 11
Рисунок Г19 – Слайд 19
Рисунок Г20 – Слайд 20
139
482. ЧДТУ. 252356 90 01 12
Рисунок Г21 – Слайд 21
Рисунок Г22 – Слайд 22
140
482. ЧДТУ. 252356 90 01 13
Рисунок Г23 – Слайд 23
141