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/8852| Title: | Програмне забезпечення інформаційної системи визначення вільних місць у закладах харчування |
| Authors: | Півень, Олександр Борисович Комар, Максим Леонідович |
| Keywords: | ІНТЕРФЕЙС;ВСТАНОВЛЕННЯ;РОЗРОБКА;ТЕСТУВАННЯ;СУМІСНІСТЬ;СИСТЕМНІ ВИМОГИ;INTERFACE;INSTALLATION;DEVELOPMENT;TESTING;COMPATIBILITY;SYSTEM REQUIREMENTS |
| Issue Date: | 6-Jun-2024 |
| Abstract: | АНОТАЦІЯ
Комара Максима Леонідовича на кваліфікаційну робота бакалавра на тему “ Програмне забезпечення інформаційної системи визначення вільних місць у закладах харчування” спеціальність 121 “Інженерія програмного забезпечення” в Черкаському державному технологічному університеті у місті Черкаси 2024 році.
Проект присвячений розробці програмного забезпечення для визначення вільних місць у закладах харчування з використанням технологій Google Maps і React. Система призначена для полегшення процесу пошуку доступних столиків у ресторанах, кафе та інших місцях громадського харчування, забезпечуючи користувачам зручний і ефективний спосіб перегляду місць в реальному часі.
Проект включає розробку веб-додатка з використанням фреймворка React для створення інтерфейсу користувача, який забезпечує інтерактивний та динамічний досвід. Логіка додатка реалізована за допомогою компонентів React та управління станом. Система взаємодіє з Google Maps API для отримання інформації про місцезнаходження закладів, їхню доступність та інші деталі.
Процес тестування включає використання сучасних інструментів, таких як Jest, для автоматизованого тестування компонентів системи, що забезпечує високу якість і надійність кінцевого продукту.
Результати досліджень впроваджені у практику проектування програмного забезпечення, що дозволило створити ефективну та надійну систему для визначення вільних місць у закладах харчування, яка задовольняє потреби користувачів. ABSTRACT Maksym Leonidovych Komar the qualifying work of the bachelor on the topic "Software of the information system for determining vacancies in catering establishments" specialty 121 "Software engineering" at the Cherkasy State University of Technology in the city of Cherkasy in 2024. The project is dedicated to the development of software for determining free seats in food establishments using Google Maps and React technologies. The system is designed to facilitate the process of finding available tables in restaurants, cafes and other places of public catering, providing users with a convenient and efficient way to view and reserve seats in real time. The project involves developing a web application using the React framework to create a user interface that provides an interactive and dynamic experience. The logic of the application is implemented using React components and state management. The system interacts with the Google Maps API to obtain information about the location of establishments, their availability and other details. The testing process includes the use of modern tools such as Jest for automated testing of system components, which ensures high quality and reliability of the final product. The results of the research were implemented in the practice of software design, which allowed to create an effective and reliable system for determining free seats in catering establishments, which satisfies the needs of users. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/8852 |
| Appears in Collections: | 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Кваліфікаційна робота бакалавра Комар Максим Леонідович.pdf Restricted Access | 5.9 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи
бакалавра
на тему: Програмне забезпечення інформаційної системи визначення вільних
місць у закладах харчування
Виконав: студент 4 курсу, групи ПЗ-2004
спеціальності
121 «Інженерія програмного забезпечення»
(шифр і назва напряму підготовки)
Студент Комар М.Л.
(прізвище та ініціали)
Керівник Півень О.Б.
(прізвище та ініціали)
Рецензент Золотоверхий Я.В.
(прізвище та ініціали)
Черкаси 2024
Черкаський державний технологічний університет
повне найменування вищого навчального закладу
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
Освітній рівень бакалавр
Спеціальність 121 «Інженерія програмного забезпечення»
Освітня програма Інженерія програмного забезпечення
ЗАТВЕРДЖУЮ
Зав. кафедри ПЗАС, професор
С. Голуб
«___» _______________ 2024 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Комар Максим Леонідович
(прізвище, ім’я, по батькові)
1. Тему проекту (роботи) Програмне забезпечення інформаційної системи визначення
вільних місць у закладах харчування
Керівник проекту (роботи) Півень Олександр Борисович доцент кафедри
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від «26» лютого
2024 року № 60/04
2. Строк подання студентом проекту (роботи) 31 травня 2024 р.
3. Вхідні дані до проекту (роботи) географічні дані; інформація про кількість місць у
закладах харчування; інформація про розклад роботи закладів харчування; додаткові дані
про відгуки та рейтинги закладів; управління ресурсами
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Вступ;
Існуючі методи та засоби розв’язання поставлених завдань_____________________________
Впровадження результатів досліджень у практику проектування програмного забезпечення
інформаційних систем_____________________________________________________________
Розробка та тестування програмного забезпечення_____________________________________
Висновки; _____________________________________________________
Список використаних джерел ____________________________________________________
Додатки. _____________________________________________
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту;
Слайд 1 – Титульний лист; Слайд 2 – Актуальність теми мета і завдання розробки, об’єкт
розробки; Слайд 3 – Методи проектування, конструювання та опис отриманих результатів;
Слайд 4 – Практичне значення отриманих результатів та особистий внесок автора; Слайд 5 –
Вимоги до розроблюваної програми; Слайд 6 – Діаграма прецендентів; Слайд 7 – Діаграма
класів та діаграма пакетів; Слайд 8 – Діаграма компонентів та діаграма розгортання; Слайд 9
– Діаграма діяльності та діаграма послідовності; Слайд 10 – Діаграма комунікації та діаграма
скінченого автомату інтерфейсу; Слайд 11 -Структурна схема та функціональна схема;
Слайд 12 – Логічна схема; Слайд 13 – Інтерфейс користувача; Слайд 14 – Тестування ______
6. Консультанти розділів роботи
Прізвище, ініціали та посади Підпис, дата
Розділ
консультанта Завдання видав Завдання прийняв
1
2
7. Дата видачі завдання 2 грудня 2023 р.
КАЛЕНДАРНИЙ ПЛАН
Строк
виконання
№
Назва етапів випускної роботи етапів Примітки
п/п
кваліфікаційної
роботи
1 Постановка задачі 02.12.2023 виконано
2 Підготовка завдання 05.12.2023 виконано
3 Погодження завдання 10.12.2023 виконано
4 Затвердження завдання 14.02.2024 виконано
Основна стадія
1 Підбір матеріалів 25.02.2024 виконано
2 Аналіз шляхів вирішення поставленої задачі 06.03.2024 виконано
3 Розрахунок основних параметрів роботи 13.03.2024 виконано
4 Вибір кінцевого варіанту проектного рішення 17.03.2024 виконано
5 Оформлення первісної редакції роботи 23.03.2024 виконано
Заключна стадія
1 Оформлення пояснювальної записки роботи в 28.05.2024 виконано
кінцевій редакції
2 Попередній захист роботи 30.05.2024 виконано
3 Затвердження роботи 30.05.2024 виконано
4 Рецензування роботи 31.05.2024 виконано
5 Захист роботи 05.06.2024 виконано
Студент _____________________ Комар М.Л.
(підпис) (прізвище та ініціали)
Керівник роботи _____________________ Півень О.Б.
(підпис) (прізвище та ініціали)
АНОТАЦІЯ
Комара Максима Леонідовича на кваліфікаційну робота бакалавра на
тему “ Програмне забезпечення інформаційної системи визначення вільних
місць у закладах харчування” спеціальність 121 “Інженерія програмного
забезпечення” в Черкаському державному технологічному університеті у місті
Черкаси 2024 році.
Проект присвячений розробці програмного забезпечення для визначення
вільних місць у закладах харчування з використанням технологій Google Maps і
React. Система призначена для полегшення процесу пошуку доступних
столиків у ресторанах, кафе та інших місцях громадського харчування,
забезпечуючи користувачам зручний і ефективний спосіб перегляду місць в
реальному часі.
Проект включає розробку веб-додатка з використанням фреймворка React
для створення інтерфейсу користувача, який забезпечує інтерактивний та
динамічний досвід. Логіка додатка реалізована за допомогою компонентів React
та управління станом. Система взаємодіє з Google Maps API для отримання
інформації про місцезнаходження закладів, їхню доступність та інші деталі.
Процес тестування включає використання сучасних інструментів, таких
як Jest, для автоматизованого тестування компонентів системи, що забезпечує
високу якість і надійність кінцевого продукту.
Результати досліджень впроваджені у практику проектування
програмного забезпечення, що дозволило створити ефективну та надійну
систему для визначення вільних місць у закладах харчування, яка задовольняє
потреби користувачів.
Ключові слова: ІНТЕРФЕЙС, ВСТАНОВЛЕННЯ, РОЗРОБКА,
ТЕСТУВАННЯ, СУМІСНІСТЬ, СИСТЕМНІ ВИМОГИ.
ABSTRACT
Maksym Leonidovych Komar the qualifying work of the bachelor on the topic
"Software of the information system for determining vacancies in catering
establishments" specialty 121 "Software engineering" at the Cherkasy State
University of Technology in the city of Cherkasy in 2024.
The project is dedicated to the development of software for determining free
seats in food establishments using Google Maps and React technologies. The system
is designed to facilitate the process of finding available tables in restaurants, cafes
and other places of public catering, providing users with a convenient and efficient
way to view and reserve seats in real time.
The project involves developing a web application using the React framework
to create a user interface that provides an interactive and dynamic experience. The
logic of the application is implemented using React components and state
management. The system interacts with the Google Maps API to obtain information
about the location of establishments, their availability and other details.
The testing process includes the use of modern tools such as Jest for automated
testing of system components, which ensures high quality and reliability of the final
product.
The results of the research were implemented in the practice of software
design, which allowed to create an effective and reliable system for determining free
seats in catering establishments, which satisfies the needs of users.
Keywords: INTERFACE, INSTALLATION, DEVELOPMENT, TESTING,
COMPATIBILITY, SYSTEM REQUIREMENTS.
ЗМІСТ
Вступ ............................................................................................................................... 6
Розділ 1 Існуючі методи та засоби розв’язання поставлених завдань ................. ... 8
Розділ 2 Впровадження результатів досліджень у практику проектування про-
грамного забезпечення інформаційних систем ..................................................... ... 18
2.1 Моделювання предметної області ........................................................... ... 18
2.1.1 Предметна область моделювання. Модель предметної області.
Словник предметної області .................................................................................... ... 18
2.1.2 Елементи моделювання предметної області ................................. ... 19
2.1.3 Робоча область моделювання ......................................................... ... 20
2.2 Формування та аналіз вимог .................................................................... ... 21
2.2.1 Формування вимог до програмного забезпечення. Первинні і де-
тальні вимоги. Вимоги замовника і розробника. Функціональні та нефункціона-
льні вимоги .......................................................................................... 21
2.2.2 Формування вимог за допомогою діаграми прецедентів ............ ... 24
2.3 Проектування логічної структури програмного комплексу ................. ... 25
2.3.1Діаграми класів ................................................................................. ... 26
2.3.2 Діаграми пакетів ............................................................................... ... 29
2.4 Архітектурне проектування ..................................................................... ... 31
2.4.1 Діаграма компонентів ...................................................................... ... 31
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання .................................................................................................................... 33
ЧДТУ. 242052-005 ПЗ
Зм. Лист № документа№ ПідписПі ДатаД
РЗомз.р обЛ. ист Комдаорк Мум.Ле нта дпис ата
«Тема тема бакалаврської роботи» Літ. Лист Листів
Керів ник Півень О.Б
Пояснювальна записка Д 3
. Н
ДФ ІТІС, кафедра ПЗАС,
Н.контр. П івень О.Б
З
атв. Голуб С.В ПЗ-2004
2.5 Моделювання поведінки системи ........................................................... ... 35
2.5.1 Діаграма діяльності .......................................................................... ... 35
2.5.2 Діаграма послідовності.................................................................... ... 37
2.5.3 Діаграма комунікації ....................................................................... ... 38
2.5.4 Діаграма скінченного автомату ...................................................... ... 39
Розділ 3 Розробка та тестування програмного забезпечення .............................. ... 43
3.1 Розробка програмного комплексу ........................................................... ... 43
3.1.1 Обґрунтування вибору засобів реалізації ...................................... ... 43
3.1.2 Опис структурної (функціональної) схеми ................................... ... 44
3.1.3 Опис логічної схеми системи ......................................................... ... 47
3.1.4 Розробка бази даних ........................................................................ ... 49
3.1.5 Розробка інтерфейсу користувача .................................................. ... 49
3.1.6 Опис розробки програмних компонентів ...................................... ... 53
3.2 Тестування системи .................................................................................. ... 54
3.2.1 Модульне тестування ...................................................................... ... 55
3.2.2 Інтеграційне тестування .................................................................. ... 60
3.2.3 Системне тестування ....................................................................... ... 62
3.2.4 Приймальне тестування................................................................... 65
3.3 Приклади впровадженого програмного комплексу .............................. ... 67
Висновки………………….. ..................................................................................... ... 70
Список використаних джерел ................................................................................. ... 71
ДОДАТОК А…………….. ...................................................................................... ... 72
ДОДАТОК Б………………... ................................................................................... ... 75
ДОДАТОК В……………… ...................................................................................... ... 78
ДОДАТОК Г……………… ... ................................................................................... 80
ЧДТУ. 242052-005 ПЗ
ВСТУП
Актуальність теми. Актуальність визначається потребою у програмній
реалізації інформаційної технології картографічного сервісу у формі сайту.
Актуальність теми викликана необхідністю створення програмного
забезпечення, що дозволить користувачеві знайти вільний заклад харчування.
Програма дозволяє в простому не переповненому інтерфейсі наглядно показати
потрібне місце в деякому радіусі. З точки зору користувача тема представляє
інтерес у вигляді малої кількості схожих продуктів, а також зручного і не
важкого у користуванні програмного забезпечення.
Мета і завдання розробки. Метою розробки є створення програмного
забезпечення інформаційної технології пошуку закладів харчування. для
покращення і спрощення життя користувача, якому потрібний найближчий
заклад харчування.
Завданням розробки є:
1 Створення мінімально функціонального сайту;
2 Встановити взаємодію між Google Maps API та програмним
забезпеченням;
3 Використання бібліотек, які спрощують реалізацію картографічних
компонентів і роботу з ними, зручний перехід між сторінками;
4 Створення і оформлення різних сторінок для реалізації додаткового
функціоналу;
5 Тестування готового програмного продукту;
6 Впровадження програмного забезпечення у виробниче середовище.
Об’єкт розробки. Інтерактивна інформаційна веб-система реального
часу.
Предмет розробки. Програмне забезпечення інформаційної системи
визначення вільних місць у закладах харчування.
Методи проектування та конструювання. Порівняння і спостереження:
Під час вивчення існуючих підходів до створення програмного забезпечення
для визначення вільних місць у закладах харчування було використано метод
6
ЧДТУ. 242052-005 ПЗ
порівняння і спостереження для аналізу їхніх переваг та недоліків.
Проектування та конструювання: в роботі були спроектовані і
сконструйовані моделі та діаграми для спрощення створення програми.
Моделювання: моделювання було використано для створення формальної
моделі програмного забезпечення для визначення вільних місць у закладах
харчування, що дозволило аналізувати його роботу та властивості.
Системний підхід: системний підхід було застосовано для розуміння
системи в цілому та взаємозв'язків між її складовими частинами.
Опис отриманих результатів. В ході роботи було розроблено програмне
забезпечення. Описані рішення можуть бути використані для проектування та
реалізації системи будь-якої складності. Розглянуті архітектурні підходи що
дозволяють спроектувати інформаційну систему з врахуванням складності та
наявності ресурсів. Отримані результати полягають у можливості використання
розробленої системи де необхідне швидке та ефективне прийняття рішень на
основі обробки обсягів інформації.
Практичне значення отриманих результатів. В бакалаврській роботі
розроблено мовою програмування JavaScript, Java : Програмне забезпечення
інформаційної системи визначення вільних місць у закладах харчування в місті
Черкаси. Практичним значенням роботи є:
1 Розв’язання проблем пошуку вільних місць в закладах харчування.
2 Створення більш збалансованого притоку відвідувачів в різні заклади
харчування.
3 Безкоштовна реклама як для закладів харчування початківців так і
проблемних закладів.
Особистий внесок автора. У результаті виконання кваліфікаційної
роботи було розроблено програмне забезпечення та спроектовано на етапах
моделювання а саме: формування аналізу вимог, проектування логічної
структури, архітектурне та моделювання поведінки системи. В цій роботі
автор самостійно займався роботою над завданням, а саме: проектуванням,
реалізацією програмного забезпечення і тестуванням програми.
7
ЧДТУ. 242052-005 ПЗ
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ
ПОСТАВЛЕНИХ ЗАВДАНЬ
Для розв’язання цієї задачі потрібно використати такі засоби:
Зручна мова програмування;
IDE;
Фреймворк або бібліотека для спрощення написання фронтенду та
бекенду;
Google maps API;
Методи роз’вязання задачі:
1 Можна скористуватися google картами в яких видається приблизна
кількість людей в тих чи інших закладах, цей метод є найпростішим для
вирішення завдання, але разом із тим він має доволі велику похибку за рахунок
чого може привести до непотрібного закладу.
2 Співпраця із закладами: більш важкий метод, але має велику точність.
Можна домовитися із закладами харчування на отримання даних про кількість
клієнтів що зарезервували столики, цей метод хоч і точніше, але все ще має
проблеми у вигляді затримки отримання даних тому що вірогідно заклади не
будуть моментально кожну хвилину повідомляти про зарезервовані столики, є
ймовірність наявності у закладах спеціалізованого API для таких випадків, але
малоімовірно.
3 Гібридний метод: об’єднання першого і другого методів. Таким чином
можна виводити і можливу кількість клієнтів на деякий день за допомогою
google карт, і окремо вірогідну кількість клієнтів вже зарезервували столики.
Таким чином усувається проблема з довгим отриманням даних, проблемою
другого методу і відсутності точних даних як у первому методі.
4 Експерементальний метод: найважчий в реалізації метод. Він включає в
себе необхідність співпраці із закладами, але на відміну від другого методу
взаємодія із самим закладом, його працівниками або використання
спеціалізованого API не потребується. Сутність методу полягає у використанні
8
ЧДТУ. 242052-005 ПЗ
технологій для автоматичного підрахунку кількості клієнтів. Можна
використати датчики, які будуть визначати кількість клієнтів за допомогою
різниці у вазі. При 0 значені клієнта немає, при вазі більше 0 клієнт присутній і
якщо вага змінюється із значення більше 0, але відмінного від попереднього
використовуємо додання значення в кількість клієнтів. Цей метод має декілька
проблем. По перше він найважче реалізовуваний, потрібно придбати такі
датчики і вони мають взаємодіяти з вже існуючою програмою, що теж потребує
коштів, також треба домовлятися із закладами що для однієї особи важка
задача, також треба домовитися із закладами на встановлення датчиків у
заклад. Другою проблемою є неточність. Зона датчиків повинна бути вузькою
щоб дві або більше людини не зараховувались за одну людину, є хорошою
ідеєю для вирішення цієї проблеми ставити датчики після дверей і у вузькому
коридорі. Таким чином дві і більше людини не зайдуть в приміщення і через
вузький коридор не зможуть йти один біля одного.
Аналоги:
Yelp: Yelp є популярною платформою для пошуку та відгуків про заклади
харчування. Вона також надає інформацію про доступність місць у закладах,
відгуки користувачів та інші корисні функції.
Yelp з’єднує людей із чудовими місцевими компаніями. Наші користувачі
надали загалом приблизно 25 мільйонів сукупних оглядів майже всіх видів
місцевого бізнесу, від ресторанів, бутиків і салонів до стоматологів, механіків,
сантехніків тощо. Ці огляди написані людьми, які використовують Yelp, щоб
поділитися своїм повсякденним місцевим бізнес-досвідом, дати змогу
висловитися споживачам і запровадити «сарафанне радіо» в Інтернеті.
Інформація, яку надають ці огляди, є цінною як для споживачів, так і для
компаній. Приблизно 66 мільйонів унікальних відвідувачів використовували
наш веб-сайт, а наш мобільний додаток використовувався приблизно на 5,7
мільйонах унікальних мобільних пристроїв у середньому щомісяця протягом
кварталу, що закінчився 31 грудня 2011 року. Компанії, як малі, так і великі,
використовують нашу платформу для взаємодії з споживачів у критичний
9
ЧДТУ. 242052-005 ПЗ
момент, коли вони вирішують, куди витратити свої гроші. Наш бізнес
обертається навколо трьох ключових груп: авторів, які пишуть відгуки,
споживачів, які їх читають, і місцевих компаній, які вони описують.[1]
Переваги:
Пристрасна спільнота. Ми розвиваємо та підтримуємо активні спільноти
співавторів на ринках, де ми працюємо, створюючи середовище, яке сприяє
написанню вдумливих і детальних відгуків про місцеві компанії. Ці місцеві
спільноти важко відтворити, і вони створюють детальні та пристрасні відгуки,
якими ми відомі.
Провідний місцевий бренд. Наша ексклюзивна зосередженість на місцево-
сті допомогла нам створити потужний бренд для локального пошуку. Щоб під-
тримувати наш міцний бренд, ми продовжуватимемо розвивати спільноти спів-
авторів, прагнути забезпечити насиченість і достовірність відгуків і підвищува-
ти швидкість і точність пошуку місцевих компаній.
Потужний мережевий ефект. Наша платформа допомагає людям знахо-
дити чудові місцеві підприємства для задоволення їхніх щоденних потреб. Чим
більше людей використовують нашу платформу, тим більше вони пишуть від-
гуки. Кожен відгук, наданий користувачем, допомагає розширити ширину та
глибину вмісту на нашій платформі, у свою чергу залучаючи більше спожива-
чів. Таке збільшення споживчого трафіку покращує нашу цінну пропозицію для
місцевих компаній, оскільки вони шукають недорогі, прості у використанні та
ефективні рекламні рішення для націлювання на велику кількість зацікавлених
споживачів.
Перевірена стратегія розвитку ринку. Хоча ми маємо обмежену історію
діяльності та ще не досягли прибутковості, ми маємо досвід успішного ство-
рення бази детального вмісту оглядів для нових ринків, що є ключовим факто-
ром нашого зростання та нашої лідерської позиції.
Місцевий відділ продажів. Ми віримо, що нам вдалося залучити та навчи-
ти високоспеціалізовану та ефективну внутрішню службу продажів. Члени на-
шого відділу продажів отримують вигоду від нашої потужної бізнес-моделі та
10
ЧДТУ. 242052-005 ПЗ
бренду, оскільки вони мають легкий доступ до приблизно 20 мільйонів
місцевих підприємств США та приблизно 606 000 заявлених місцевих
підприємств у всьому світі на нашій платформі.
Запатентована технологія. Наша команда інженерів розробила, на нашу
думку, найкращі технології фільтрації пошуку та відгуків, які разом із постій-
ними інноваціями допомагають нам залучати велику базу учасників, спожива-
чів і місцевих компаній.
Приваблива бізнес-модель. Відгуки, надані нашими користувачами, до-
зволяють нам отримати вигоду від низьких витрат на створення вмісту, що
складається в основному з витрат на Менеджерів спільноти, яких ми наймаємо
для розвитку та підтримки наших спільнот учасників. Завдяки широкому вмісту
та різноманітності рекламних рішень на нашій платформі нам вдалося залучити
велику аудиторію споживачів майже без витрат на придбання трафіку та різно-
манітну клієнтську базу місцевих компаній і рекламодавців національних брен-
дів.[3]
Недоліки:
‒ ми покладаємось на трафік нашого веб-сайту з таких пошукових
систем, як Google, Yahoo! і Bing, деякі з яких пропонують продукти та
послуги, які безпосередньо конкурують з нашими рішеннями. Якщо
нашому веб-сайту не вдасться займати помітне місце в неоплачуваних
результатах пошуку, відвідуваність нашого веб-сайту може
зменшитися, що негативно вплине на наш бізнес;
‒ якщо нам не вдасться створити та підтримувати достатню кількість
високоякісного вмісту від наших користувачів, ми не зможемо надати
споживачам інформацію, яку вони шукають, що може негативно
вплинути на наш трафік і дохід;
‒ наш бізнес залежить від сильного бренду, і будь-яка нездатність збе-
регти, захистити та покращити наш бренд зашкодить нашій здатності
зберегти або розширити нашу базу користувачів і рекламодавців або
нашій здатності збільшити частоту, з якою вони використовують наші
11
ЧДТУ. 242052-005 ПЗ
рішення;
‒ негативна реклама про нашу компанію, включаючи звинувачення в
неправильній діловій практиці чи тактиці продажу або маніпуляції ві-
дгуками, або скарги щодо нашої технології фільтрації, можуть знизи-
ти довіру до наших рішень і їх використання, що негативно вплине на
результати нашої діяльності та бізнесу;
‒ якщо наша технологія фільтрує корисний вміст або не може
фільтрувати некорисний вміст, споживачі та компанії можуть припи-
нити або скоротити використання нашої платформи та продуктів, а
наш бізнес може постраждати;[3]
OpenTable: OpenTable спеціалізується на резервуванні столиків у
ресторанах. Вони також надають інформацію про доступність місць у
реальному часі та інші функції для користувачів.
Нам подобається те, що відбувається за столиком ресторану. І з 1998 року
ми прагнемо поширювати цей досвід. Від допомоги ресторанам будь-якого
розміру процвітати до надання можливості відвідувачам знайти та забронювати
ідеальний столик на будь-який випадок, наша історія — це історія людського
зв’язку — між відвідувачами та ресторанами, а також між ресторанами та
їхніми громадами.
Зараз ми розвиваємося в усьому світі, як ніколи раніше, і продовжуємо
лідирувати в розмові про технології та ресторани з продуктами, які
передбачають постійні потреби як ресторанів, так і закусочних.
З нашою пристрастю до гостинності ми пишаємося тим, що збираємо
разом людей і ресторани, які вони люблять, у важливі моменти. Підтягни
стілець і приєднуйся до нас.[2]
Переваги:
‒ легко керуйте кожним бронюванням : бронюйте, змінюйте або скасо-
вуйте бронювання, де б ви не були, за лічені хвилини. Ви можете пе-
реглядати всі свої бронювання в одному місці та відстежувати минулі
та майбутні бронювання;
12
ЧДТУ. 242052-005 ПЗ
‒ надішліть повідомлення безпосередньо в ресторан : надішліть їм пові-
домлення до або протягом 14 днів після бронювання, щоб зробити за-
пити, поставити запитання, повідомити дієтичні вподобання або на-
віть запитати про забуті продукти, і ви отримаєте повідомлення у від-
повідь із OpenTable;
‒ підготуйтеся до обіду : запросіть гостей , перегляньте меню, перегля-
ньте найпопулярніші страви ресторану, прокладайте маршрути тощо;
‒ приєднуйтесь до нашої програми лояльності : збирайте щонайменше
100 балів за їжу за кожне бронювання та 1000 балів для вибраних рес-
торанів, які ви можете обміняти на різноманітні винагороди, зокрема
знижки на харчування, Amazon, готелі тощо;
‒ отримайте VIP-статус : коли ви бронюєте більше 12 разів на рік, VIP-
статус дає вам миттєвий доступ до членства Booking.com Genius. Ре-
єстрація автоматично надає вам знижку 10% на вибрані готелі, апар-
таменти тощо протягом року;
‒ зберігайте ресторани на потім : зберігайте як ресторани, які вам подо-
баються, так і ті, які ви хотіли б спробувати, щоб ви могли швидко
звернутися до них і забронювати їх у будь-який час;
‒ отримайте персоналізований досвід: створіть профіль, де ви можете
додати вподобання в їжі, дієтичні обмеження та важливі дати, як-от
дні народження, щоб ми могли підбирати ваші враження від продуктів
на основі того, що вам подобається, щоб зробити ваші страви найкра-
щими.
‒ контролюйте те, що ви бачите : установіть налаштування зв’язку, щоб
отримувати новини про популярні ресторани, оновлення функцій
продуктів, спеціальні пропозиції тощо.[3]
Недоліки:
‒ єдиним недоліком OpenTable є те, що не кожен ресторан є учасником,
тому ви не можете зробити бронювання в одному місці або побачити
всі доступні ресторани на вибір;
13
ЧДТУ. 242052-005 ПЗ
‒
іноді програма дає збій і переходить в режим офлайн.[4]
Дороговизна для підприємців.
Але зі зростанням впливу OpenTable зростає і критика. У березні
компанія-конкурент Eveve оголосила, що обслуговує 20 000 ресторанів на
місяць у Х’юстоні. У той час Тімоті Райан, генеральний директор компанії
онлайн-бронювання Eveve, сказав, що компанія завойовує частку ринку і що
його компанія пропонує першокласні технології та локальну підтримку без
вищої ціни OpenTable.
«Протягом деякого часу OpenTable не був ані фінансово, ані технологічно
можливим для багатьох клієнтів у Х’юстоні, але власники ресторанів не відчу-
вали життєздатної альтернативи», — пояснив Райан у заяві.
Подібні настрої існують у Сан-Франциско, де Майк Пасторе, власник ви-
сококласного італійського ресторану Incanto, закрив свій 12-річний ресторан у
березні.Після розмови з іншими власниками ресторанів Пасторе висловив стур-
бованість тим, що підтримувати OpenTable занадто дорого, але оператори, з
якими він спілкувався, побоюються, що відмова може бути шкідливою.
«Будь-хто, хто хоче отримати доступ до цих клієнтів, тепер повинен
сплатити цей новий податок на кожного клієнта або ризикувати невдачею», —
написав він. «Це сувора реальність ролі OpenTable у вишуканій кухні. Контро-
люючи доступ до зростаючої кількості відвідувачів, стає все рідше, коли новий
амбітний ресторан може відмовитися від обслуговування».[5]
Постановка задачі.
В цій роботі стоїть задача розробити веб-додаток для визначення вільних
місць у закладах харчування на основі інтеграції Google Maps і React. Додаток
повинен надавати користувачам можливість перегляду інформації про заклади,
перевірки наявності вільних місць.
Основні завдання:
Збір вимог та аналіз:
‒ визначити функціональні та нефункціональні вимоги до системи;
14
ЧДТУ. 242052-005 ПЗ
‒ провести аналіз існуючих аналогів для визначення їхніх переваг та
недоліків.
Проектування системи:
‒ розробити архітектуру системи, включаючи діаграми класів, компо-
нентів, розгортання та інших необхідних UML-діаграм;
‒ визначити основні компоненти та сторінки додатка.
Розробка інтерфейсу користувача:
‒ створити зручний та інтуїтивно зрозумілий інтерфейс для користува-
чів з використанням React;
‒ забезпечити інтеграцію з Google Maps для відображення карт та мар-
керів закладів.
Реалізація функціоналу:
‒ реалізувати можливість перегляду інформації про заклади, перевірки
наявності вільних місць.
Тестування:
‒ провести тестування всіх компонентів системи, включаючи модульні,
інтеграційні, системні, приймальні;
‒ перегляд закладів на карті;
‒ інтерактивна карта з маркерами, що вказують на місцезнаходження
закладів харчування.
Інформаційні сторінки:
‒ сторінки з інформацією про програму, контактними даними та інше.
Функціональні вимоги
Пошук закладів харчування:
‒ користувач повинен мати можливість здійснювати пошук закладів
харчування за назвою, місцезнаходженням;
‒ результати пошуку мають бути відображені у вигляді списку або
на карті з маркерами.
Відображення інформації про заклади:
15
ЧДТУ. 242052-005 ПЗ
‒ інформація про заклад повинна включати назву, адресу, рей-
тинг, зображення закладу, рейтинг та відгуки користувачів.
Нефункціональні вимоги:
Обмеження:
‒ система повинна використовувати тільки безкоштовні або ліцензо-
вані компоненти та API;
‒ система повинна бути розроблена з використанням сучасних веб-
технологій (React, Google Maps API)
Очікувані результати:
‒ WEB-додаток, що дозволяє користувачам знаходити вільні місця в
закладах харчування в реальному часі;
‒ інтуїтивно зрозумілий інтерфейс з інтеграцією Google Maps.
16
ЧДТУ. 242052-005 ПЗ
ВИСНОВОК ДО ПЕРШОГО РОЗДІЛУ
Аналіз існуючих методів та засобів розв'язання завдань з визначення ві-
льних місць у закладах харчування показав, що сучасні технології пропонують
різноманітні підходи до вирішення цієї проблеми. Основними з них є викорис-
тання геолокаційних сервісів, мобільних додатків, систем резервування та інте-
грації з сторонніми API. Використання геолокаційних сервісів, мобільних дода-
тків, систем резервування та інтеграції з сторонніми API дозволяє створювати
ефективні та зручні рішення для користувачів. Інтеграція цих технологій у єди-
ну систему забезпечує високу функціональність, актуальність даних та зруч-
ність використання. Розробка таких систем вимагає ретельного планування, ви-
бору відповідних інструментів та методів, а також забезпечення їх надійної ро-
боти та безпеки даних користувачів.
17
ЧДТУ. 242052-005 ПЗ
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У
ПРАКТИКУ ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
ІНФОРМАЦІЙНИХ СИСТЕМ
2.1 Моделювання предметної області
В підрозділі моделювання предметної області було розглянуто такі
підпункти предметна область моделювання, модель предметної області,
словник предметної області, елементи моделювання предметної області, робоча
область моделювання. Розглянемо ці пункти більш детальніше
2.1.1 Предметна область моделювання. Модель предметної області.
Словник предметної області
Предметна область моделювання. Одним із найважливіших етапів
інформаційної системи є проведення аналізу який надає користувачеві
можливості оцінювати та шукати вільні місця в закладах харчування.
Відповідно до предметної області система будується з урахуванням таких
особливостей:
‒ програмний продукт знаходиться в веб просторі;
‒ використовуються картографічні бібліотеки для візуального
сприйняття;
‒ всі ключові заклади помічаються маркерами для візуальної різниці;
‒ візуальна частина програми використовує бібліотеку React;
‒ можлива надмірність через використання великої карти.
Програмне забезпечення побудована за допомогою технологій Google
Maps і React.
Модель предметної області – це найважливіша модель об’єктно-
орієнтованого аналізу, яка відображає візуальне подання концептуальних класів
або об’єктів реального світу в термінах предметної області, а не програмні ком-
18
ЧДТУ. 242052-005 ПЗ
поненти. Такі моделі також називають концептуальними моделями або моде-
лями об’єктів предметної області. Це свого роду словник основних абстракцій,
тобто найважливіших іменників у просторі задачі.[6]
Словник предметної області:
React (React.js): Визначення: React - це JavaScript для створення
інтерфейсів користувача. Вона дозволяє розробникам будувати
багатокомпонентні веб-програми з ефективним оновленням інтерфейсу.
Компонент (Component): Визначення: У React компонент являє собою
незалежну і частину інтерфейсу користувача. Компоненти можуть включати як
логіку, так і відображення.
Стейт (State): Визначення: Стейт є дані, керовані компонентом. Він може
змінюватися в процесі виконання та оновлювати інтерфейс.
Props (Properties): Визначення: Props — це параметри, передані
компонентам зміни їх поведінки. Вони передаються зверху вниз ієрархією
компонентів.
Життєвий цикл компонента (Component Lifecycle): Визначення: Це
послідовність подій, які відбуваються в процесі створення, оновлення та
знищення компонента React.
Frontend:Визначення: Фронтенд відноситься до частини програмного
забезпечення, яка відповідає за взаємодію користувача. У вашому випадку, це
інтерфейс користувача, розроблений з використанням React.
UI/UX (User Interface/User Experience): Визначення: UI відноситься до
дизайну та взаємодії користувача з програмою, а UX до загального враження
користувача від використання програми.
2.1.2 Елементи моделювання предметної області
Для моделювання предметної області будемо використовувати наступні
елементи.
19
ЧДТУ. 242052-005 ПЗ
Рисунок 2.1 – Елементи з графічними символами, які використовувались у
роботі [7]
Рисунок 2.2 - Відношення між об’єктами, які використовувались у роботі[7]
2.1.3 Робоча область моделювання
20
ЧДТУ. 242052-005 ПЗ
Рисунок 2.3 – Модель предметної області для програмного забезпечення
визначення вільних місць в закладах харчування
2.2 Формування та аналіз вимог
В підрозділі формування та аналіз вимог було розглянуто формування
вимог до програмного забезпечення, первинні і детальні вимоги, вимоги
замовника і розробника, функціональні та нефункціональні вимоги,
формування вимог за допомогою діаграми прецедентів. Формування та аналіз
вимог – це критичні етапи в процесі розробки програмного забезпечення, які
спрямовані на визначення і документування функціональних і
нефункціональних вимог до системи. Формування вимог включає збір та
документування потреб і очікувань користувачів та інших зацікавлених сторін.
2.2.1 Формування вимог до програмного забезпечення. Первинні і
детальні вимоги. Вимоги замовника і розробника. Функціональні та
нефункціональні вимоги
Формування вимог до програмного забезпечення:
Для роботи програмного забезпечення потрібні такі програмні вимоги:
Технології фронтенду:
21
ЧДТУ. 242052-005 ПЗ
‒ використання React для побудови інтерфейсу користувача;
‒ використання JSX та CSS для структурного, функціонального та
візуального оформлення програмного забезпечення .
Інтеграції:
‒ використання Google Maps API для відображення карт і
місцезнаходжень закладів;
‒ використання React Router для зручного переходу між сторінками.
Тестування:
‒ використання Jest для написання та запуску модульних і
інтеграційних тестів;
‒ використання інструментів для автоматизованого тестування
інтерфейсу, таких як Cypress або Selenium.
Первинні і детальні вимоги.
Первинні вимоги визначають загальні цілі та основні функціональні
можливості, які повинні бути реалізовані в програмному забезпеченні для
визначення вільних місць у закладах харчування.
Пошук закладів харчування:
Користувач повинен мати можливість шукати заклади харчування за
різними критеріями (назва, місцезнаходження, тип кухні).
Відображення інформації про заклади:
На сторінці закладу повинна бути відображена повна інформація про
заклад (назва, адреса, тип кухні, години роботи, рейтинг, відгуки користувачів).
Детальні вимоги визначають конкретні функціональні та нефункціональні
аспекти, які повинні бути враховані при розробці системи.
Пошук закладів харчування:
1 користувач може шукати заклади харчування за назвою;
2 користувач може шукати заклади харчування за
місцезнаходженням (місто, район);
3 користувач може шукати заклади харчування за типом кухні
(італійська, японська, українська тощо);
22
ЧДТУ. 242052-005 ПЗ
4 результати пошуку повинні відображатися у вигляді списку та/або
на карті з маркерами.
Відображення інформації про заклади:
1 інформація про заклад повинна включати назву, адресу, тип кухні,
години роботи, контактні дані, середню ціну;
2 на сторінці закладу повинні відображатися фотографії закладу;
3 інтеграція з Google Maps для відображення місцезнаходження
закладу;
4 відгуки користувачів повинні бути доступні для перегляду на
сторінці закладу.
Вимоги замовника і розробника
Вимоги замовника:
‒ пошук закладів харчування;
‒ відображення інформації про заклади;
‒ зручність використання;
‒ безпека.
Вимоги розробника:
‒ продуктивність;
‒ масштабованість;
‒ сумісність;
‒ тестування;
‒ документація.
Функціональні та нефункціональні вимоги
Функціональні вимоги:
Пошук закладів харчування:
‒ користувач повинен мати можливість здійснювати пошук закладів
харчування за назвою, місцезнаходженням або типом кухні;
‒ результати пошуку мають бути відображені у вигляді списку і на
карті з маркерами.
Відображення інформації про заклади:
23
ЧДТУ. 242052-005 ПЗ
‒ інформація про заклад повинна включати назву, адрес, рейтинг та
відгуки користувачів;
‒ на сторінці закладу повинні відображатися фотографії закладу та
карта з його місцезнаходженням.
Нефункціональні вимоги:
Зручність використання:
‒ інтерфейс користувача повинен бути інтуїтивно зрозумілим та
зручним для користування;
‒ усі функції повинні бути доступні у кілька кліків.
Продуктивність:
‒ Система повинна швидко реагувати на запити користувачів;
‒ час відгуку при пошуку закладів та завантаженні картографічних
даних не повинен перевищувати 3 секунд.
Масштабованість:
‒ система повинна підтримувати можливість масштабування для
обробки зростаючої кількості користувачів і даних;
‒ архітектура повинна дозволяти додавання нових функцій без
значних змін у існуючому коді.
Сумісність:
‒ система повинна працювати на різних браузерах (Chrome, Firefox,
Safari, Edge);
‒ інтерфейс повинен бути адаптивним і коректно відображатися на
екранах різних розмірів.
2.2.2 Формування вимог за допомогою діаграми прецедентів
Діаграма прецедентів (use case diagram) – це графічне представлення всіх
або частини акторів, прецедентів та їх взаємодій в системі. У кожній системі
зазвичай є головна діаграма прецедентів, яка відображає межі системи (акторів)
та основну функціональну поведінку системи (прецедентів).[6] Діаграма
прецедентів розглядається як головний засіб для первинного моделювання
динаміки системи, використовується для з’ясування вимог замовника до
24
ЧДТУ. 242052-005 ПЗ
розроблюваної системи, фіксації цих вимог у формі, яка дозволить проводити
подальшу розробку.[7]
Користувач:
Шукати заклади: Користувач виконує пошук закладів харчування за
місцезнаходженням.
Переглянути доступність: Користувач переглядає інформацію про
доступність місць у вибраному закладі.
Додати новий заклад: Адміністратор додає новий заклад харчування до
системи.
Рисунок 2.4— Діграма прецендентів на основі сформованих вимог
2.3. Проектування логічної структури програмного комплексу
Інтерфейс користувача (UI):
‒ компонент на вибір закладу:
‒ дозволяє користувачеві вибирати конкретний заклад зі списку.
25
ЧДТУ. 242052-005 ПЗ
‒ відображення схеми місць у закладі:
‒ показує розподіл вільних та зайнятих місць на графічній схемі.
‒ система управління даними:
‒ логіка програми;
‒ модуль керування;
‒ забезпечує функціональність для додавання закладів.
‒ інтеграція з картами:
‒ взаємодія з картографічними сервісами для відображення
розташування закладів.
2.3.1 Діаграми класів
Це діаграма, на якій показані класи, інтерфейси та відносини між ними.
Головний елемент діаграми класів – клас. Класи використовуються в процесі
аналізу предметної області для складання словника предметної області системи,
що розробляється. Це можуть бути як абстрактні поняття предметної області,
так і класи, на які спирається розробка та які описують програмні або апаратні
сутності.[6] Діаграма класів описує типи об’єктів системи і різного роду стати-
чні відношення, які існують між ними. На діаграмах класів відображаються та-
кож властивості класів, операції класів та обмеження, які накладаються на
зв’язок між об’єктами.[7]
Рисунок 2.5 — Діаграма класів з основними класами програми для закладів ха-
26
ЧДТУ. 242052-005 ПЗ
рчування
Діаграма класів описує структуру системи, визначаючи її класи, їхні вла-
стивості (атрибути), методи (операції) і взаємозв'язки між ними.
Користувач:
‒ представляє користувача системи.
Програма:
‒ головний клас, що об'єднує всі компоненти системи.
Картографічно-візуальний елемент:
‒ відповідає за відображення карти і пов'язаних з нею функціональ-
них можливостей.
Маркери:
‒ представляє маркери на карті, що вказують на місцезнаходження
закладів харчування.
Рисунок 2.6 – Діаграма класів користувача і програмних компонентів
27
ЧДТУ. 242052-005 ПЗ
Клас: користувач
Атрибути:
‒ місцезнаходження: координати місцезнаходження користувача.
Операції:
‒ перегляд(): виконує основні операції перегляду;
‒ знайти місцезнаходження (координати): визначає поточне
місцезнаходження користувача;
‒ знайти вільний заклад (): знаходить заклади з вільними місцями;
‒ отримати інформацію про заклад(): повертає інформацію про
вибраний заклад.
Клас: програма
Атрибути:
‒ час запуску: час запуску програми;
‒ час існування: час роботи програми;
‒ стилі: набір стилів для програми.
Операції:
‒ реалізація карти (центр, координати): ініціалізує карту з заданим
центром та координатами;
‒ відображення закладів(): відображає заклади на карті;
‒ відображення інформації про заклади(): відображає детальну
інформацію про заклади.
Клас: картографічно-візуальний елемент
Атрибути:
‒ час відтворення: час початку відтворення елемента;
‒ час існування: час існування елемента;
‒ центр: координати центру карти;
‒ координати: координати елемента на карті;
‒ режим видимості: визначає видимість елемента;
‒ стилі: набір стилів для елемента.
Операції:
28
ЧДТУ. 242052-005 ПЗ
‒ запуск(): запускає відтворення елемента;
‒ створення маркерів(координати): створює маркери на заданих
координатах;
‒ відображення маркерів(): відображає маркери на карті;
‒ збільшення і зменшення маштабу(): змінює масштаб карти;
‒ зміна стилю карти(): змінює стиль відображення карти;
‒ зміна режиму перегляду(): змінює режим перегляду карти.
Клас: маркери
Атрибути:
‒ кількість: поточна кількість маркерів;
‒ максимальна допустима кількість маркерів (число): максимально
допустима кількість маркерів;
‒ координати: координати маркерів;
‒ додаткова інформація: додаткова інформація про маркери;
‒ стиль: стиль відображення маркерів;
‒ назва об'єкта: назва об'єкта, на який вказує маркер.
Операції:
‒ створення: створює маркер на заданих координатах;
‒ видалення(): видаляє маркер;
‒ кластеризація(): виконує кластеризацію маркерів для зручності
відображення.
2.3.2 Діаграми пакетів
Діаграма пакетів – це структурна діаграма, призначена для представлення
розміщення елементів моделі в пакетах і специфікації залежностей між пакета-
ми і їх елементами .
У контексті архітектурного проектування пакет є зручним засобом упако-
вки підсистеми, яка є частиною архітектурної організації, а діаграма пакетів –
моделлю структури архітектурного рівня.[7]
29
ЧДТУ. 242052-005 ПЗ
Рисунок 2.7 — Діаграма пакетів розбитої на основні компоненти програмної
системи
UI (інтерфейс користувача):
Компоненти UI: Компоненти для відображення інтерфейсу користувача,
такі як карта, маркери, кнопки .
Логіка відображення: Логіка, що відповідає за взаємодію з користувачем і
оновлення інтерфейсу.
Клієнтська логіка:
API клієнта: Компонент, що відповідає за надсилання запитів до сервера і
отримання відповідей.
Зовнішні сервіси:
Обробка запитів: Логіка, що обробляє запити від клієнта.
30
ЧДТУ. 242052-005 ПЗ
Бізнес-логіка: Логіка додатку, що виконує основні операції, такі як
обробка даних про заклади харчування.
Google Maps API: Компонент для взаємодії з Google Maps API, щоб
отримувати дані про заклади харчування.
2.4 Архітектурне проектування
Клієнтська програма (Frontend):
‒ Інтерфейс користувача (UI):
‒ розробка компонентів для вибору закладу, відображення схеми
місць;
‒ модуль керування станом;
‒ використання useState для ефективного керування програмою;
‒ взаємодія із зовнішніми послугами;
‒ інтеграція з картографічними сервісами.
‒ API-модуль:
‒ реалізація API для обміну даними між клієнтом та сервером.
‒ Бізнес-логіка:
‒ розробка логіки управління закладами та місцями;
‒ забезпечення безпечного доступу до системи.
‒ Сховище даних:
‒ база даних Google Maps API;
‒ зберігання інформації про установи, їх схеми та загальну кількість
місць.
‒ Інтеграція з картографічними сервісами:
‒ взаємодія із зовнішніми сервісами для відображення розташування
закладів;
‒ модуль оновлення даних про вільні місця.
2.4.1 Діаграма компонентів
Діаграма компонентів показує визначення, внутрішню структуру і залеж-
ності набору компонентів. В якості фізичних компонент можуть виступати
31
ЧДТУ. 242052-005 ПЗ
файли, бази даних, бібліотеки, модулі, пакети, інтерфейси ІС тощо.
Діаграма компонентів, на відміну від раніше розглянутих діаграм, описує особ-
ливості фізичного представлення системи та дозволяє визначити архітектуру
розроблюваної системи, встановивши залежності між програмними компонен-
тами. У багатьох середовищах розробки модуль або компонент відповідає фай-
лу.[7]
Рисунок 2.8— Діаграма компонентів внутрішніх елементів програмної системи
Діаграма компонентів описує різні частини програмного забезпечення та
взаємозв'язки між ними. У цьому випадку ми розглянемо компоненти системи
для визначення вільних місць у закладах харчування, побудованої за
допомогою технологій Google Maps і React.
Основні елементи діаграми компонентів:
32
ЧДТУ. 242052-005 ПЗ
‒ Користувач:
‒ Людина, яка взаємодіє з програмою, використовуючи інтерфейс
користувача.
‒ Запуск програми:
‒ процес ініціалізації та завантаження веб-додатка.
‒ Програма:
‒ основний додаток, що складається з декількох компонентів і
сторінок.
‒ Компоненти:
‒ навбар (Slidebar): Панель навігації, яка забезпечує доступ до
основних розділів програми;
‒ карта (Map): Компонент, що відображає карту з Google Maps та
місцями закладів харчування.
‒ Сторінки:
‒ контакти (Contacts): Сторінка з контактною інформацією;
‒ про програму (About): Сторінка з інформацією про програму;
‒ дім (Home): Головна сторінка, яка містить основний функціонал,
такий як пошук і перегляд закладів харчування.
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання
Діаграма розгортання дозволяє зобразити «фізичну» структуру програм-
ної системи. На етапі проектування діаграма розгортання використовується для
представлення фізичної сукупності вузлів як основи для реалізації системи. Ді-
аграма розгортання складається з трьох основних елементів: артефактів, вузлів і
відносин між ними. Діаграма розгортання дозволяє краще зрозуміти фізичну
архітектуру (або архітектуру розгортання).
Тобто, на діаграмі розгортання розміщаються тільки ті елементи
фізичного представлення моделі, які існують під час виконання програмної
системи.[7]
33
ЧДТУ. 242052-005 ПЗ
Рисунок 2.9 — Діаграма розгортання платформної деталізації
34
ЧДТУ. 242052-005 ПЗ
Учасники:
‒ клієнтський комп'ютер:
‒ веб-браузер (React-додаток)
‒ веб-сервер:
‒ вебсайт
‒ зовнішні сервіси
‒ Google Maps API (веб-сервіс зовнішнього постачальника)
Компоненти:
‒ React-додаток: Фронтенд додаток, який працює на клієнтському
комп'ютері;
‒ Google Maps API: Зовнішній API для отримання даних про заклади
харчування.
2.5 Моделювання поведінки системи
Вибір закладу:
Користувач запускає програму та видає список доступних закладів.
Відображення вільних та зайнятих місць:
Система відображає користувачеві схему закладу, де вільні місця
позначені одним кольором, а зайняті — другим.
Дані про зайнятість місць оновлюються в режимі сьогодення.
2.5.1 Діаграма діяльності
Діаграми діяльності, так само як і блок-схеми, – загальний та потужний
засіб опису алгоритмів. Їх з успіхом також можна застосовувати для моделю-
вання поведінки людей, пристроїв і організацій при виконанні бізнес-процесів.
У теоретичному плані діаграма діяльності – це узагальнене уявлення ал-
горитму, що реалізує аналізований варіант використання. У загальному випадку
діяльність є самостійним елементом поведінки, яка, у свою чергу, може вклю-
чати інші діяльності або окремі дії.[7]
35
ЧДТУ. 242052-005 ПЗ
Рисунок 2.10 — Діаграма діяльності основних процесів програми
36
ЧДТУ. 242052-005 ПЗ
Сценарій:
‒ користувач відкриває додаток;
‒ користувач вводить місцезнаходження;
‒ користувач натискає кнопку "Пошук";
‒ додаток надсилає запит до Google Maps API;
‒ Google Maps API повертає список закладів харчування;
‒ додаток перевіряє доступність місць у закладах (опційно);
‒ додаток відображає результати пошуку;
‒ користувач переглядає результати.
Учасники:
‒ користувач;
‒ WEB-додаток (React);
‒ Google Maps API
2.5.2 Діаграма послідовності
Графічно діаграма послідовності – це двовимірна схема, яка показує уза-
гальнені об’єкти (ролі), які розміщені вздовж горизонтальної осі, і повідомлен-
ня, впорядковані за часом, уздовж вертикальної осі (лінія життя). Прецеденти
визначають, як зовнішні виконавці взаємодіють з програмною системою. У
процесі цієї взаємодії виконавцем генеруються системні події, які являють со-
бою запити на виконання деякої системної операції.
На діаграмі послідовності зображуються виключно ті об’єкти, які безпо-
середньо беруть участь у взаємодії і не показуються можливі статичні асоціації
з іншими об’єктами.[7]
37
ЧДТУ. 242052-005 ПЗ
Рисунок 2.11 — Діаграма послідовності основних кроків реалізації
фукнкціоналу програми
Сценарій:
‒ користувач відкриває додаток;
‒ користувач відправляє місцезнаходження;
‒ кистема надсилає запит до Google Maps API для отримання закладів
харчування у зазначеному місці;
‒ Google Maps API повертає список закладів харчування;
‒ система обробляє отримані дані та перевіряє доступність місць;
‒ система відображає результати користувачу.
Учасники:
‒ користувач;
‒ WEB-додаток (React);
‒ Google Maps API
2.5.3 Діаграма комунікації
Діаграма комунікації (у UML 1 – діаграма кооперації) так само як і діаг-
рама послідовності описує поведінку як взаємодію, тобто як протокол обміну
повідомлень між об’єктами. Один і той же об’єкт може брати участь у різних
38
ЧДТУ. 242052-005 ПЗ
взаємодіях, граючи в них різні ролі. Таким чином, взаємодія завжди відбуваєть-
ся в певному контексті, який визначається множиною учасників у взаємодії
об’єктів і зв’язків.
Діаграма комунікації характеризуються двома особливостями, що відріз-
няють їх від діаграм послідовностей: шляхом (зв’язком) і порядковим номером
повідомлення. Числа перед іменами повідомлень вказують на відносну послі-
довність повідомлень. [7]
Рисунок 2.12 — Діаграма комунікації взаємодії різних систем між собою
Клієнт: Починає запит до програмного забезпечення для перевірки
наявності вільних місць у закладах харчування.
Веб-сервер: Приймає запит від клієнта та передає його до логіки
програми.
База даних: Програмне забезпечення може звертатися до бази даних для
отримання інформації про наявність місць у закладах харчування.
Логіка програми: Обробляє отриманий запит, виконує розрахунки та
перевірки на наявність вільних місць у закладах харчування.
Результати: Повертає результати клієнту через веб-сервер.
Клієнт: Отримує результати запиту та може відобразити їх користувачеві.
2.5.4 Діаграма скінченного автомату
39
ЧДТУ. 242052-005 ПЗ
Діаграма кінцевого автомата (діаграма станів) відображає кінцевий
автомат, виділяючи потік управління, наступний від стану до стану. Кінцевий
автомат – поведінка, яка визначає послідовність станів в ході існування об’єкту.
Більш точно, діаграма визначає для кожного стану об’єкту – дію, яка
виконується об’єктом при отриманні ним сигналу про подію. Один і той же
об’єкт може виконувати різні дії у відповідь на одну і ту ж подію в залежності
від стану об’єкту. Виконання дії, як правило, викликає зміну стану. Тобто, у
цілому моделювання станів ґрунтується на поняттях «подія» і «стан».[7]
Рисунок 2.13 — Діаграма скінченного автомату(діаграма станів), що візуалізує
зміну станів програмного забезпечення для пошуку закладів харчування
Початковий стан (Initial): Стан, в якому система знаходиться після
запуску.
Очікування вводу (Input Waiting): Стан, в якому система очікує введення
користувача (наприклад, адреси або типу закладу).
Виконання запиту (Request Processing): Стан, в якому система обробляє
запит користувача для визначення вільних місць у закладах харчування.
Отримання даних (Data Retrieval): Стан, в якому система взаємодіє з
Google Maps API для отримання необхідних даних про заклади харчування.
Аналіз результатів (Result Analysis): Стан, в якому система аналізує
отримані дані та визначає вільні місця в закладах харчування.
Відображення результатів (Result Display): Стан, в якому система
відображає результати користувачеві (наприклад, на мапі або у списку).
40
ЧДТУ. 242052-005 ПЗ
Кінцевий стан (Final): Стан, в який система потрапляє після завершення
виконання запиту.
41
ЧДТУ. 242052-005 ПЗ
ВИСНОВОК ДО ДРУГОГО РОЗДІЛУ
Впровадження результатів досліджень у практику проектування
програмного забезпечення інформаційних систем є ключовим етапом, що
забезпечує якість, ефективність та інноваційність розроблених рішень. Аналіз
наукових досягнень та передових технологій дозволяє створювати
інформаційні системи, які відповідають сучасним вимогам і потребам
користувачів. Основні аспекти цього процесу включають: інтеграція новітніх
інструментів та платформ, впровадження результатів наукових досліджень,
практичне застосування принципів проектування, тестування. Впровадження
результатів досліджень у практику проектування програмного забезпечення
інформаційних систем забезпечує створення високоякісних, інноваційних та
ефективних рішень. Це включає застосування передових методологій,
інструментів та технологій, інтеграцію наукових досягнень та принципів
проектування, а також забезпечення ретельного тестування. Такий підхід
дозволяє створювати інформаційні системи, що відповідають сучасним
вимогам ринку, забезпечують високу продуктивність, надійність та
задоволення потреб користувачів.
42
ЧДТУ. 242052-005 ПЗ
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
3.1 Розробка програмного комплексу
Крок 1: аналіз вимог
‒ розуміння функціональних вимог:
‒ розбирання вимог замовника, визначення основних функцій
системи.
‒ визначення нефункціональних вимог:
‒ розгляд вимог до продуктивності, безпеки, зручності використання
тощо.
Крок 2: проектування архітектури
‒ вибір архітектури:
‒ рішення, яку архітектуру використовувати (наприклад, триланкова
архітектура).
‒ визначення компонентів:
‒ розбиття системи на логічні компоненти, такі як клієнтська
програма, серверна програма, база даних і додаткові сервіси.
Крок 3: розробка інтерфейсу користувача (Frontend)
‒ реалізація інтерфейсу:
‒ створення компонентів для відображення списку закладів та схеми
місць.
‒ інтеграція з бекендом:
‒ реалізація запитів до сервера для отримання та надсилання даних.
3.1.1 Обґрунтування вибору засобів реалізації
Причини вибору React:
Декларативний:
React спрощує створення інтерактивних інтерфейсів. Вам потрібно лише
описати, як різні частини інтерфейсу виглядають у кожному стані вашого
43
ЧДТУ. 242052-005 ПЗ
додатку і React ефективно оновить та відрендерить лише потрібні компоненти,
коли ваші дані зміняться.
Декларативні інтерфейси роблять ваш код більш передбачуваним і його
набагато легше налагоджувати.
Заснований на компонентах:
Створюйте інкапсульовані компоненти, які керують власним станом, а з
них будуйте складні інтерфейси.
Оскільки логіка компонентів написана на JavaScript, замість шаблонів, ви
з легкістю можете передавати складні дані у вашому додатку і зберігати стан
окремо від DOM.
Вивчіть лише раз — пишіть будь-де:
Ми не робимо припущень щодо стеку технологій які ви використовуєте,
тому ви можете розробляти нові функції в React, не переписуючи існуючий код.
React також може рендеритись на сервері, використовуючи Node, і
приводити в дію мобільні додатки, які використовують React Native.[8]
JSX (JavaScript XML):
JSX — це розширення синтаксису JavaScript, яке дозволяє писати код у
стилі XML/HTML JavaScript. Це покращує читання та розуміння коду, а також
полегшує інтеграцію компонентів у структуру DOM.
Екосистема та спільнота:
React має велику екосистему інструментів, бібліотек та рішень сторонніх
розробників. Є багато готових компонентів, які полегшують створення різних
елементів інтерфейсу. Велика активна спільнота також забезпечує підтримку та
вирішення проблем.
Простота інтеграції:
React легко інтегрується з іншими бібліотеками чи фреймворками. Ви
можете використовувати React разом з іншими бібліотеками, такими як Redux
для керування станом, або використовувати його з існуючими проектами.
3.1.2 Опис структурної (функціональної) схеми
44
ЧДТУ. 242052-005 ПЗ
Рисунок 3.1 — Структурна схема з виведенням основої структури програмного
продукту
Користувачі взаємодіють з інтерфейсом користувача, використовуючи
веб-додаток.
Інтерфейс користувача відправляє запити до API-контролерів, які
обробляють ці запити та взаємодіють із сервісами та базою даних.
Сервіси надають необхідні дані з Google Maps API та інших сторонніх
джерел.
API-контролери також взаємодіють із Google Maps базою даних для
зберігання та отримання інформації про заклади харчування.
Результати обробки запитів повертаються до інтерфейсу користувача, де
відображаються користувачам.
45
ЧДТУ. 242052-005 ПЗ
Рисунок 3.2 — Функціональна схема програмного продукту з деталізацією
функціоналу програми
Користувачі:
‒ взаємодіють з системою через інтерфейс користувача;
‒ користувачі можуть переглядати доступні місця.
Інтерфейс користувача :
‒ основний фронтенд додатка, де користувачі взаємодіють із системою;
‒ відображає інформацію про заклади, доступність місць.
Логіка додатка :
‒ включає компоненти, які реалізують бізнес-логіку, такі як управління
станом додатка, обробка подій користувача, динамічне оновлення
інтерфейсу.
46
ЧДТУ. 242052-005 ПЗ
Взаємодія з API :
‒ Приймає запити від фронтенду та обробляє їх.
‒ взаємодіє з сервісами для отримання даних про заклади.
Отримання даних з бази:
‒ відповідає за збереження та отримання даних з бази даних;
‒ обробляє запити на отримання списку закладів, перевірку доступності
місць.
Взаємодія з Google Maps API:
‒ отримує дані про розташування закладів, їхню доступність, рейтинги
та іншу інформацію;
‒ відправляє запити до Google Maps API та обробляє відповіді;
‒ забезпечує швидкий доступ до даних та їхню цілісність.
3.1.3 Опис логічної схеми системи
Компонент вибору закладу:
‒ відображає список доступних закладів;
‒ дозволяє користувачеві вибрати конкретний заклад;
‒ відображення схеми місць;
‒ графічно представляє схему місць у вибраному закладі;
‒ знаходить вільні місця.
API-модуль:
‒ обробляє запити від клієнтської програми;
‒ надає доступ до даних про заклади та місця.
Бізнес-логіка:
‒ забезпечує безпечний доступ до системи.
База даних закладів:
‒ містить інформацію про заклади, їх схеми та загальну кількість місць.
Сервіс інтеграції з картами:
‒ взаємодіє з картографічними сервісами для відображення
розташування закладів.
47
ЧДТУ. 242052-005 ПЗ
Рисунок 3.3 – Логічна схема послідовності дій користувача
48
ЧДТУ. 242052-005 ПЗ
3.1.4 Розробка бази даних
При розробці програмного забезпечення база даних не використовується
3.1.5 Розробка інтерфейсу користувача
При розробці інтерфейсу користувача була використана бібліотека React.
В процесі роботи були розробені елементи дизайну, такі як кольори, шрифти,
іконки тощо, щоб створити привабливий та зручний інтерфейс.
Використовувався HTML та CSS для створення розмітки та розміщення
елементів інтерфейсу на сторінці.
Використовуючи бібліотеку React було створено динамічний та зручний
інтерфейс.
Були створені ключові компоненти, з функціональними можливостями, а
саме:
Home(домашня сторінка або головна сторінка)
Головна сторінка на якій проводилася візуалізація головного компоненту
роботи – карти із закладами. Карта використовувалася за допомогою
підключення до програмного забезпечення Google Maps API. На головній
сторінці вгорі знаходиться навігаційна панель з можливістю змінювати
сторінки
Рисунок 3.4 – Навігайційна панель в програмі
В центрі програми знаходяться два компонента бічносмуга, а також карта
з розташуванням користувача і закладів харчування
49
ЧДТУ. 242052-005 ПЗ
Рисунок 3.5 – Бічносмуга в програмі
50
ЧДТУ. 242052-005 ПЗ
Рисунок 3.6 – Головний компонент карти
Ці два компонента є пов’язаними між собою, а саме: іконки виделки та
ложки представляють собою заклади харчування, а бічносмуга виводить всі ці
заклади харчування в більш детальному вигляді.
Рисунок 3.7 – Взаємодія бічносмуги та карти
51
ЧДТУ. 242052-005 ПЗ
Також всередині бічносмуги находиться кнопка Add New Place, яка до-
зволяє додати новий заклад харчування.
Рисунок 3.8 – Додавання нового закладу харчування
Окрім головної сторінки є також дві допоміжні сторінки “Про програму” і
“Контакти”. На сторінці “Про програму” знаходиться інформація про програму,
а на сторінці “Контаки” деякі дані за допомогою, яких можна зв’язатися із роз-
робником програми для технічної допомоги.
Рисунок 3.9 – Сторінка про програму
52
ЧДТУ. 242052-005 ПЗ
Рисунок 3.10 – Сторінка контактів
3.1.6 Опис розробки програмних компонентів
Програмне забезпечення інформаційної системи визначення вільних
місць у закладах харчування складається з кількох ключових компонентів.
Кожен компонент виконує окремі функції, які разом забезпечують повну
роботу системи. У цьому розділі розглянемо деталі розробки основних
програмних компонентів.
1. Компонент навігації (Navbar)
Опис: Компонент навігації дозволяє користувачам швидко
переміщуватися між основними сторінками програми, такими як Головна
сторінка, Контакти, Про програму та інші.
Основні функції:
‒ відображення логотипу програми.
‒ посилання на основні сторінки.
‒ кнопки для входу та реєстрації.
Розробка:
‒ використовується бібліотека компонентів, така як Material-UI або
Bootstrap;
‒ реалізація у вигляді React-компоненту;
53
ЧДТУ. 242052-005 ПЗ
‒ включення логіки для відображення відповідних кнопок залежно від
стану аутентифікації користувача.
Компонент картографії (Map)
Опис: Компонент карти використовується для відображення закладів
харчування на інтерактивній карті з можливістю перегляду їхнього
розташування та доступних столиків.
Основні функції:
‒ відображення картографічних даних;
‒ відображення маркерів для закладів харчування;
‒ інтерактивні елементи для перегляду деталей закладу.
Розробка:
‒ використання Google Maps API для інтеграції картографічних даних;
‒ реалізація компоненту у вигляді React-компоненту;
‒ логіка для завантаження та відображення даних про заклади.
Компонент сторінок (Контакти, Про програму, Дім)
Опис: Ці компоненти представляють окремі сторінки програми, такі як
Контакти, Про програму та Головна сторінка.
Основні функції:
‒ відображення відповідної інформації на кожній сторінці;
‒ статичний або динамічний контент залежно від потреб програми.
Розробка:
Реалізація кожної сторінки у вигляді окремого React-компоненту.
3.2 Тестування системи
В підрозділі тестування системи було розглянуто модульне тестування,
інтеграційне тестування, системне тестування, приклади впровадженого
програмного комплексу. Тестування системи є ключовим етапом розробки
програмного забезпечення, спрямованим на забезпечення його якості,
функціональності та надійності. Це процес перевірки системи для виявлення
54
ЧДТУ. 242052-005 ПЗ
можливих помилок та недоліків і підтвердження того, що вона відповідає
заданим вимогам.
3.2.1 Модульне тестування
Було проведено тестування програми для пошуку вільних місць в
закладах харчування.
Перш за все була створена окрема папка __tests__ для кращого
візуального сприйняття і сортування тестів. Далі було створено 4 теста для
перевірки працездатності програми і її функціоналу.
Header.js
Рисунок 3.10 — Частина файлу програми
55
ЧДТУ. 242052-005 ПЗ
В першому тесті перевірявся чи рендеряться компоненти і їх функціонал.
Рисунок 3.11 — Тест-кейс для перевірки рендерингу компоненту
В другому тесті була перевірка наявності конкретних компонентів
Рисунок 3.12 — Тест-кейс для перевірки наявності потрібних компонентів
В третьому тесті перевірялось виникнення помилки 404.
56
ЧДТУ. 242052-005 ПЗ
Рисунок 3.13 — Тест-кейс для перевірки відсутності 404 помилки
В четвертому кейсі було перевірено працездатність елементу active для
виділення конкретного елементу з усіх інших елементів.
Рисунок 3.14 — Тест-кейс для перевірки наявності класу active
57
ЧДТУ. 242052-005 ПЗ
І в результаті продемонстровано працездатність всіх тестів і те що
програма пройшла всі необхідні тести.
Рисунок 3.15 — Результат тестування
58
ЧДТУ. 242052-005 ПЗ
Рисунок 3.16 — Результат тестування
Таблиця 3.1
Тестування модулів системи
Модулі Результат
index.js Успішний запуск
Home.js Успішне завантаження залежностей
ErrorPage.js Успішне завантаження залежностей
Map.js Успішне завантаження залежностей
CurrentLocationMarker.jsx Успішне завантаження залежностей
Sidebar.js Успішне завантаження залежностей
About.js Успішне завантаження залежностей
Contacts.js Успішне завантаження залежностей
Footer.js Успішне завантаження залежностей
59
ЧДТУ. 242052-005 ПЗ
3.2.2 Інтеграційне тестування
При інтеграційному тестуванні було використано jest.mock для створення
фіктивної реалізації компонентів Google Maps API та пов'язаних з ними
компонентів, таких як Autocomplete, CurrentLocationMarker та Sidebar.
Рисунок 3.17 – Інтеграційне тестування пов’язаних між собою компонентів
60
ЧДТУ. 242052-005 ПЗ
Рисунок 3.18 – Загальна кількість пройдених тестів
Проведені тести:
renders the Google Map component: Перевірка рендерингу компонента
карти.
renders the current location marker: Перевірка маркера поточного
розташування.
updates the center on place select: Перевірка оновлення центру карти під
час вибору місця.
61
ЧДТУ. 242052-005 ПЗ
adds a place and sorts places in sidebar: Перевірка додавання нового місця
та сортування місць у бічній панелі.
Таблиця 3.2
Тестування інтегрованих компонентів системи
Інтегровані Компоненти Результат
index + Home.js Успішне завантаження залежностей
Home.js + ErrorPage.js + Успішне завантаження залежностей
About.js+Contacts.js
Map.js + CurrentLocationMarker.jsx Успішне завантаження залежностей
3.2.3 Системне тестування
В ході цього тестування було проведено системне тестування за
допомогою cypress. Тестування пройшло успішно.
Цей тестовий сценарій describe('Contacts Page', () => { ... }) складається з
декількох окремих тестів (або специфікацій), які перевіряють різні аспекти
роботи сторінки контактів React-додатку.
Перший тест перевіряє, що текст "Contact Us" є присутнім і бачимо на
сторінці.
Другий тест перевіряє, що текст "Email", "Phone", "Address" та посилання
з поштою та телефоном є і видимі на сторінці.
Третій тест перевіряє, що при натисканні на посилання "About"
відбувається перехід на сторінку "About", URL містить /about, і на новій
сторінці є текст "About Us".
Четвертий тест перевіряє, що при натисканні на посилання "Home"
відбувається перехід на головну сторінку, URL містить /, і на новій сторінці є
текст "Home".
62
ЧДТУ. 242052-005 ПЗ
Рисунок 3.19 — Системне тестування сторінок
63
ЧДТУ. 242052-005 ПЗ
Рисунок 3.20 — Системне тестування вікна
Рисунок 3.21 — Системне тестування навігації
64
ЧДТУ. 242052-005 ПЗ
Таблиця 3.3
Тестування функціональності системи
Функціональність/Сценарій Результат
WindowModule Виконання успішне
NavigationModule Виконання успішне
ReactApplication Успішний запуск
3.2.4 Приймальне тестування
Приймальне тестування є завершальною фазою тестування програмного
забезпечення, яка виконується для перевірки відповідності системи визначеним
вимогам і очікуванням користувачів. Метою приймального тестування є
забезпечення того, що програмне забезпечення готове до впровадження і
відповідає всім необхідним критеріям. Основні кроки приймального
тестування:
Підготовка тестового середовища:
‒ налаштування тестового середовища, яке максимально наближене до
реального середовища експлуатації.
‒ встановлення необхідного програмного забезпечення та інструментів
для тестування.
Розробка тестових сценаріїв:
‒ створення детальних тестових сценаріїв на основі вимог до системи.
‒ визначення очікуваних результатів для кожного сценарію.
Виконання тестових сценаріїв:
‒ проведення тестування за розробленими сценаріями.
Аналіз результатів:
‒ оцінка результатів тестування для виявлення дефектів.
‒ класифікація знайдених дефектів за пріоритетами.
Виправлення дефектів:
‒ повторне тестування після виправлення дефектів.
65
ЧДТУ. 242052-005 ПЗ
Помилки знайдені при приймальному тестуванні:
Ступінь критичності: критична.
Кроки до відтворення:
1.Запустити програму
Результат.
На екрані з'явилася помилка компіляції, що вказує на проблеми з <Link>.
Очікуваний результат.
Рисунок 3.22 — Помилка пов’язана з <Link> при приймальному тестуванні
Посилання, які працюють без помилок
Друга помилка:
Ступінь критичності: критична.
Кроки до відтворення:
1.Запустити програму
Результат.
На екрані і в консолі з'явилася помилка, що вказує на проблеми з Router.
Очікуваний результат.
Можливість створення переходів між сторінками за допомоогою Router.
66
ЧДТУ. 242052-005 ПЗ
Рисунок 3.23 — Помилка пов’язана з <Link> при приймальному тестуванні
Таблиця 3.3
Помилки у системі
Місце знайденої Причина помилки Статус
помилки
index.js Не імпортований компонент виправлено
Header.js Не правильно використаний виправлено
компонент
3.3 Приклади впровадженого програмного комплексу
Програмний комплекс має інтуїтивно зрозумілий та зручний інтерфейс
користувача, що складається з кількох основних компонентів. Головна сторінка
з картою:
Відображає інтерактивну карту з маркерами закладів харчування.
Користувач може легко переглядати заклади, що мають вільні місця, і
отримувати детальну інформацію.
Меню із закладами:
Відображає детальну інформацію про вибраний заклад, включаючи його
адреса, години роботи, контактні дані та наявність вільних місць.
67
ЧДТУ. 242052-005 ПЗ
Інформаційні сторінки:
Сторінки з додатковою інформацією про програму, контакти та інші
важливі деталі.
Рисунок 3.24 — Приклад впровадженого програмного комплексу
68
ЧДТУ. 242052-005 ПЗ
ВИСНОВОК ДО ТРЕТЬОГО РОЗДІЛУ
Процес розробки та тестування програмного забезпечення є критично
важливим для створення високоякісних, надійних та функціональних
інформаційних систем. Успішна реалізація цих етапів вимагає застосування
систематичних підходів, сучасних методологій, інструментів та практик.
Процес розробки та тестування програмного забезпечення є складним і
багатогранним, вимагаючи чіткої організації, дисципліни та застосування
сучасних практик та інструментів. Успішне виконання цих етапів забезпечує
створення високоякісного, надійного та функціонального програмного
забезпечення, яке задовольняє потреби користувачів та відповідає вимогам
ринку. Впровадження систематичних підходів, інноваційних технологій та
методологій тестування сприяє підвищенню ефективності розробки та якості
кінцевого продукту, що є критично важливим у сучасному конкурентному
середовищі.
69
ЧДТУ. 242052-005 ПЗ
ЗАГАЛЬНИЙ ВИСНОВОК
Вже було створено безліч програм як для комерційної мети так і
покращення людського життя. Чим більше підвищується прогрес, тим більше
сфера IT представляє різних зручних програмних продуктів і тим зручніше стає
людське життя. Ця програма також була створена для покращення життя
людей. Бувають інколи випадки коли настають свята і хочеться знайти якийсь
зручний заклад харчування для себе і своєї рідні, але на жаль всі заклади вже
заповнені і приходиться за допомогою гугл карт шукати місце харчування. Це
не тільки важко, бо навіть якщо буде знайдене місце харчування, не
обов’язково що воно буде вільне, але й саме місце може бути мало
привабливим. Саме для цього була створена ця програма. Зручний додаток
який зможе підказати найкраще вільне місце. Перевагою даного програмного
продукту є зручність використання, простота у використанні, незагруженість
інтерфейсу, швидка дія програми, просте оновлення програми. З недостатків
програми є необхідність в Інтернеті, чим більша кількість користувачів, тим
більше вірогідність виникнення проблем через навантаження.
70
ЧДТУ. 242052-005 ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1 Розміщення акцій класу А компанії Yelp Inc [Електронний ресурс]:
http://edgar.secdatabase.com/1861/119312512093131/filing-main.htm
2 Інформаційна сторінка OpenTable [Електронний ресурс]:
https://www.opentable.com/about/
3 Сторінка з перевагами бронювання OpenTable [Електронний ресурс]:
https://help.opentable.com/s/article/The-Secret-Behind-OpenTable-s-Real-
Time-Reservations-1505260791871?language=en_US
4 Відгуки до OpenTable [Електронний ресурс]:
https://www.softwareadvice.com/hospital-management/opentable-
profile/reviews/
5 Стаття про плюси та мінуси OpenTable [Електронний ресурс]:
https://www.fsrmagazine.com/feature/pros-and-cons-opentable/
6 Конспект лекцій з дисципліни “Проектування інформаційних систем”
для студентів галузі знань 12 “Інформаційні технології” спеціальності
126 “Інформаційні системи та технології” [Електронний ресурс] / Гар-
куша І.М.: https://it.nmu.org.ua/ua/scientific_method _materials/ lec-
ture_notes /% D0%9A%D0%BE%D0%BD%D1% 81%D0% BF% D0%
B5% D0%BA%D1%82_%D0%BB%D0%B5%D0%BA%D1%86%D1%
96%D0%B9_%D0%9F%D1%80%D0%BE%D0%B5%D0%BA%D1%82
%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_%D0%86%
D0%A1_2020.pdf
7 Методичні рекомендації до підготовки кваліфікаційної роботи бака-
лавра для здобувачів вищої освіти зі спеціальності 121 «Інженерія
програмного забезпечення» усіх форм навчання [Текст] /Укл.: Голуб
С.В., Заспа Г.О., Куницька С.Ю., Півень О.Б. Катаєва Є.Ю., Салапатов
В.І., Метелап В.В., Олексюк В.В.; М-во освіти і науки України, Чер-
кас, держ. технол. ун-т. - Черкаси : ЧДТУ, 2023. - 96 с.
71
ДОДАТОК А
ЗАТВЕРДЖЕНО:
Зав. кафедрою ПЗАС,
професор
_________________ Голуб С.В.
„____” ______________ 2024 р.
Програмне забезпечення інформаційної системи визначення вільних місць у
закладах харчування
Специфікація
482.ЧДТУ. 242052-005
Листів 2
Розробник ________________ Комар М.Л.
Керівник ________________ Півень О.Б.
2024
482.ЧДТУ. 242052-005 2
Позначення Найменування Примітка
Документація
482.ЧДТУ. 242052 1201 Текст програми
482.ЧДТУ. 24205 2 3401 Інструкція користувачеві
4 82.ЧДТУ. 242052 9001 Графічні матеріали
71
ДОДАТОК Б
Програмне забезпечення інформаційної системи визначення вільних місць у
закладах харчування
Текст програми
482.ЧДТУ. 242052 1201
Листів 14
Розробник ________________ Комар М.Л.
2024
482.ЧДТУ. 242052 1201 2
function Map() {
const [center, setCenter] = useState(defaultCenter);
const [placesDetails, setPlacesDetails] = useState([]);
const [sortedPlacesDetails, setSortedPlacesDetails] = useState([]);
const [map, setMap] = useState(null);
const mapRef = useRef(null);
const infowindow = useRef(null);
const service = useRef(null);
const onLoad = useCallback(function callback(map) {
mapRef.current = map;
setMap(map);
}, []);
const onUnmount = useCallback(function callback(map) {
mapRef.current = null;
setMap(null);
}, []);
const onPlaceSelect = useCallback((coordinates) => {
setCenter(coordinates);
}, []);
useEffect(() => {
if (map) {
infowindow.current = new window.google.maps.InfoWindow();
service.current = new window.google.maps.places.PlacesService(map);
const request = {
location: new window.google.maps.LatLng(center.lat, center.lng),
radius: '500',
type: ['restaurant'],
new window.google.maps.Marker({
position: center,
73
482.ЧДТУ. 242052 1201 3
map: map,
title: "You're Here!",
});
service.current.nearbySearch(request, callback);
}
}, [map, center]);
function callback(results, status) {
if (status === window.google.maps.places.PlacesServiceStatus.OK) {
let placesInfo = [];
let fields = ['name', 'formatted_address', 'formatted_phone_number', 'rating',
'user_ratings_total', 'reviews', 'photo', 'place_id', 'geometry'];
results.forEach((place) => {
service.current.getDetails({ placeId: place.place_id, fields }, function (placeInfo,
status) {
if (status === window.google.maps.places.PlacesServiceStatus.OK) {
placesInfo.push(placeInfo);
setPlacesDetails([...placesInfo]);
setSortedPlacesDetails([...placesInfo]);
addMarkers(placesInfo);
}
});
});
} else {
console.log("Дані не отримані");
}
}
return (
<div className="App
74
482.ЧДТУ. 242052 1201 4
<div className="addresSearchContainer">
<Autocomplete onSelect={onPlaceSelect} />
</div>
<Sidebar placesDetails={sortedPlacesDetails} handleSort={handleSort}
addPlace={addPlace} />
<GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10}
onLoad={onLoad} onUnmount={onUnmount}></GoogleMap>
<CurrentLocationMarker position={center} />
</div>
);
}
75
ДОДАТОК В
Програмне забезпечення інформаційної системи визначення вільних місць у
закладах харчування
Інструкція користувачеві
482.ЧДТУ. 242052 3401
Листів 4
Розробник ________________ Комар М.Л.
2024
482.ЧДТУ. 242052 3401 2
Ця інструкція призначена для користувачів програмного забезпечення,
яке дозволяє визначити вільні місця у закладах харчування з використанням
Google Maps та React. Додаток надає зручний інтерфейс для пошуку закладів,
перевірки наявності вільних місць.
Вимоги:
Веб-браузер (рекомендовано Google Chrome або Firefox)
Підключення до інтернету
Реєстрація та вхід у систему
Реєстрація нового користувача:
Перейдіть на головну сторінку додатка.
Натисніть на кнопку "Реєстрація".
Заповніть форму реєстрації, вказавши необхідні дані (нікнейм, пароль).
Натисніть "Зареєструватися".
Вхід у систему:
На головній сторінці натисніть "Вхід".
Введіть свій нікнейм та пароль.
Натисніть "Увійти".
Використання основних функцій
Пошук закладів:
Після входу в систему ви побачите карту з Google Maps.
Введіть назву закладу або адресу в поле пошуку.
Натисніть "Пошук" для відображення результатів на карті.
Перегляд інформації про заклад:
Натисніть на маркер закладу на карті.
У спливаючому вікні буде відображена основна інформація про заклад:
назва, адреса, рейтинг, фотографії, доступні місця.
Перегляд та редагування профілю:
Додавання нового закладу:
Натисніть "Додати новий заклад".
Заповніть форму.
Технічна підтримка
Якщо у вас виникли проблеми з використанням додатка, зверніться на
пошту вказану на сторінці About.
77
ДОДАТОК Г
Програмне забезпечення інформаційної системи визначення вільних місць у
закладах харчування
Графічні матеріали
482.ЧДТУ. 242052 9001
Листів 10
Розробник ________________Комар М.Л
2024
482.ЧДТУ. 242052 9001 2
Рисунок Г.1 – Титульний лист презентації
Рисунок Г.2 – Актуальність теми, мета і завдання розробки, об’єкт розробки
79
482.ЧДТУ. 242052 9001 3
Рисунок Г.3 – Методи проектування, конструювання та опис отриманих
результатів
Рисунок Г.4 – Практичне значення отриманих результатів та особистий
внесок автора
80
482.ЧДТУ. 242052 9001 4
Рисунок Г.5 – Вимоги до розроблюваної програми
Рисунок Г.6 – Діаграма прецендентів
81
482.ЧДТУ. 242052 9001 5
Рисунок Г.7 – Діаграма класів та діаграма пакетів
Рисунок Г.8 – Діаграма компонентів та діаграма розгортання
82
482.ЧДТУ. 242052 9001 6
Рисунок Г.9 – Діаграма діяльності та діаграма послідовності
Рисунок Г.10 – Діаграма комунікації та діаграма скінченого автомату
інтерфейсу
83
482.ЧДТУ. 242052 9001 7
Рисунок Г.11 – Структурна схема та функціональна схема
Рисунок Г.12 – Логічна схема
84
482.ЧДТУ. 242052 9001 8
Рисунок Г.13 – Інтерфейс користувача
Рисунок Г.14 – Тестування
85