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/6880Full metadata record
| DC Field | Value | Language |
|---|---|---|
| dc.contributor.advisor | Катаєв, Дмитро Сергійович | - |
| dc.contributor.author | Силенко, Артем Олександрович | - |
| dc.date.accessioned | 2026-01-25T21:06:30Z | - |
| dc.date.available | 2026-01-25T21:06:30Z | - |
| dc.date.issued | 2025-06-06 | - |
| dc.identifier.uri | https://er.chdtu.edu.ua/handle/ChSTU/6880 | - |
| dc.description.abstract | Зважаючи на те, що сучасне життя і робота неможливі без використання технологій, вибір ефективних рішень для різних типів приміщень, таких як бізнес-об’єкти, офіси, квартири та будинки, стає ключовим аспектом. У цьому контексті виникає необхідність у впровадженні веб-орієнтованої інформаційної системи підбору рішень для управління розумним будинком, яка надасть клієнтам зручний та ефективний інструментарій для вибору оптимальних рішень, відповідно до їхніх потреб. Запровадження такої системи має велике значення, оскільки воно сприяє ефективному використанню розумних технологій у бізнесі, офісних приміщеннях та особистих житлових просторах, що є актуальним і потрібним у сучасному світі. Мета роботи і задачі дослідження. Мета кваліфікаційної роботи бакалавра – забезпечення автоматизації та процесу вибору впровадження розумних технологій, шляхом створення веб-орієнтованої інформаційної системи підбору рішень для управління розумним будинком. Для досягнення поставленої мети були поставлені такі завдання: поставити та обґрунтувати задачу підбору рішень; виконати порівняльний аналіз існуючих систем підбору рішень для управління розумним будинком; створити та підключити базу даних; обрати технології та програмно-технічні засоби для реалізації веб-орієнтованої інформаційної системи підбору рішень для управління розумним будинком; розробити інформаційну систему для підбору рішень та виконати її тестування. | uk_UA |
| dc.language.iso | uk | uk_UA |
| dc.subject | web-орієнтована система | uk_UA |
| dc.subject | інформаційна система | uk_UA |
| dc.subject | розумний будинок | uk_UA |
| dc.subject | розробка | uk_UA |
| dc.subject | електронна комерція | uk_UA |
| dc.title | Інформаційна система підбору рішень для управління розумним будинком | uk_UA |
| dc.type | Bachelor Thesis | uk_UA |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) | |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Силенко_WEB-2111.pdf Restricted Access | 11.54 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 курсу, групи ІТП-2111
спеціальності 126 «Інформаційних технологій
проектування»
(шифр і назва спеціальності)
Освітня програма «Інформаційні технологі
проектування»
Силенко Артем
Керівник Катаєв Д.
(прізвище та ініціали)
Рецензент Силенко Артем
(прізвище та ініціали)
Черкаси 2025 року
2
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Інформаційних технологій проектування
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 126 – Інформаційних технологій проектування
Освітня програма Інформаційних технологій проектування
ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
_______________ Тетяна Прокопенко
«____» _____________ 2025 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Силенку Артему
(прізвище, ім‘я, по батькові)
1. Тема роботи Веб-орієнтована інформаційна система підбору рішень для управління
розумним будинком
Керівник роботи Катаєв Д., к.т.н., старший викладач
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «25» лютого 2025 р. № 53/03 03.
2. Строк подання студентом роботи «10» червня 2025 року
3. Вихідні дані до роботи:
Звіт з виробничої практики. Звіт з переддипломної практики.
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Аналітичний огляд існуючих аналогів
4.2. Аналіз і проєктування веб-орієнтованої інформаційної системи підбору рішень для
управління розумним будинком
4.3. Практична реалізація
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 52024-01.
1. Ін
5.2. Дстордуактцоікя Бк.о Ірниссттруувкацчіая користувача.
5.3. Додаток В. Текст програми.
5.5 Презентація у вигляді 28 слайдів.
3
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
консультанта завдання видав завдання прийняв
7. Дата видачі завдання 15.01.2024 р.
КАЛЕНДАРНИЙ ПЛАН
№ з/п Назва етапів кваліфікаційної роботи бакалавра Строк виконання
етапів роботи Примітка
1 Видача завдання на кваліфікаційну роботу
бакалавра. до Виконано
15.01.2025
2 Аналіз літературних джерел, об’єкту та предмету до Виконано
дослідження. 12.02.2025
3 Написання теоретичного розділу кваліфікаційної Виконано
роботи бакалавра до 18.03.2025
.
4 Написання аналітичного розділу (аналіз об’єкту Виконано
й предмету дослідження). до 01.04.2025
5 Написання практичних розділів й висновків по
роботі. до Виконано
01.05.2025
6 Передзахист кваліфікаційної роботи бакалавра Виконано
на засіданні кафедри КНСА до 03.06.2025
.
7 Подання роботи завідувачу кафедри КНСА. до 10.06. 2025 Виконано
8 Захист кваліфікаційної роботи бакалавра. 11.06.2025 Виконано
Студент _____________________________ / Артем СИЛЕНКО /
(підпис) ПІБ
Керівник роботи ____________________________ / Дмитро Катаєв /
(підпис) ПІБ
4
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 79 с., 63 рис., 1 таблицю, 23
використаних джерела, 3 додатки.
Актуальність теми. Зважаючи на те, що сучасне життя і робота неможливі без
використання технологій, вибір ефективних рішень для різних типів приміщень,
таких як бізнес-об’єкти, офіси, квартири та будинки, стає ключовим аспектом. У
цьому контексті виникає необхідність у впровадженні веб-орієнтованої
інформаційної системи підбору рішень для управління розумним будинком, яка
надасть клієнтам зручний та ефективний інструментарій для вибору оптимальних
рішень, відповідно до їхніх потреб. Запровадження такої системи має велике
значення, оскільки воно сприяє ефективному використанню розумних технологій у
бізнесі, офісних приміщеннях та особистих житлових просторах, що є актуальним і
потрібним у сучасному світі.
Мета роботи і задачі дослідження. Мета кваліфікаційної роботи бакалавра –
забезпечення автоматизації та процесу вибору впровадження розумних технологій,
шляхом створення веб-орієнтованої інформаційної системи підбору рішень для
управління розумним будинком.
Для досягнення поставленої мети були поставлені такі завдання:
поставити та обґрунтувати задачу підбору рішень;
виконати порівняльний аналіз існуючих систем підбору рішень для управління
розумним будинком;
створити та підключити базу даних;
обрати технології та програмно-технічні засоби для реалізації веб-орієнтованої
інформаційної системи підбору рішень для управління розумним будинком;
розробити інформаційну систему для підбору рішень та виконати її тестування.
Об’єкт дослідження: процес підбору рішень за допомогою веб-орієнтованої
інформаційної системи для управління розумним будинком.
Предмет дослідження: підсистема підбору рішень веб-орієнтованої
інформаційної системи для управління розумним будинком.
5
Методи дослідження. Для вирішення поставлених завдань були застосовані
наступні методи дослідження: теоретичний (аналіз літератури з проблеми
дослідження); емпіричний – полягав у спостереженні та налаштуванні інформаційної
системи підбору рішень для управління розумним будинком; порівняльний – для
здійснення порівнянь існуючих аналогів інформаційної системи підбору рішень для
управління розумним будинком.
6
ABSTRACT
The qualification work of bachelor contains: 79 pages, 63 figures, 1 table, 23 used
sources, 3 appendices.
Actuality of theme. Considering that modern life and work are impossible without
the use of technology, choosing effective solutions for different types of premises such as
business facilities, offices, apartments and houses becomes a key aspect. In this context,
there is a need to implement a web-oriented decision-making information system for smart
home management, which will provide customers with a convenient and effective toolkit
for choosing optimal solutions according to their needs. The introduction of such a system
is of great importance, as it contributes to the effective use of smart technologies in business,
office premises and personal living spaces, which is relevant and necessary in today's world.
The purpose of the work and research tasks. The purpose of the bachelor's
qualification work is to ensure the automation and selection process of the implementation
of smart technologies by creating a web-oriented information system for selecting solutions
for controling a smart home.
To achieve the goal, the following tasks were set:
set and justify the task of selecting solutions;
perform a comparative analysis of existing decision-making systems for smart home
management;
create and connect the database;
choose technologies and software and technical tools for the implementation of a
web-oriented information system for selecting solutions for controling a smart home;
to develop an information system for selecting solutions and perform its testing.
The object of research: the process of selecting decisions using a web-oriented
information system for controling a smart home.
The subject of research: the decision-making subsystem of a web-oriented
information system for controling a smart home.
Research methods. The following research methods were used to solve the tasks:
theoretical (analysis of the literature on the research problem); empirical – consisted in the
7
observation and adjustment of the information system for selection of decisions for the
management of a smart house; comparative – for making comparisons of existing analogues
of the information system for selecting solutions for controling a smart home.
Keywords: INFORMATION SYSTEM, SELECTION OF MINIMUM READY
SOLUTION, DESIGN, DATABASE, CMS WORDPRESS, OPENSERVER PANEL,
ORDERS, API-INTEGRATION.
8
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ ...... 10
ВСТУП ................................................................................................................................ 11
1 АНАЛІТИЧНИЙ ОГЛЯД ІСНУЮЧИХ АНАЛОГІВ ................................................. 13
1.1 Постановка та обґрунтування задачі підбору рішень .......................................... 13
1.2 Огляд існуючих аналогів ......................................................................................... 13
1.2.1 Веб-сайт компанії “Ajax Systems” .................................................................... 14
1.2.2 Веб-сайт компанії “Domos” .............................................................................. 19
1.2.3 Інтернет-магазин “Розумне рішення”...………………………………………23
1.2.4 Веб-сайт компанії “Меласк” ............................................................................. 26
1.3 Порівняльна характеристика існуючих розглянутих аналогів та постановка
завдання ........................................................................................................................... 28
Висновки до розділу 1 ................................................................................................... 30
2 АНАЛІЗ І ПРОЄКТУВАННЯ ВЕБ-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ
СИСТЕМИ ПІДБОРУ РІШЕНЬ ДЛЯ УПРАВЛІННЯ РОЗУМНИМ БУДИНКОМ ... 31
2.1 Аналіз тенологій розробки та вибір засобів реалізації інформаційної системи 31
2.2 Додаткові функціональні модулі ............................................................................ 35
2.2.1 Модуль електронної комерції WooCommerce ................................................ 35
2.2.2 API-інтеграція платіжної системи LiqPay та служби доставки Nova Poshta 37
2.2.3 Модуль TelSender і WpForms для збору та обробки замовлень за допомогою
API-інтеграції з Телеграм ботом ............................................................................... 42
2.3 Проєктування структури інформаційної системи ................................................ 44
2.4 Розробка діаграми варіантів використання ........................................................... 48
2.5 Проєктування структури бази даних ...................................................................... 50
Висновки до розділу 2 ................................................................................................... 54
9
3 ПРАКТИЧНА РЕАЛІЗАЦІЯ ......................................................................................... 56
3.1 Архітектура веб-орієнтованої інформаційної системи підбору рішень для
управління розумним будинком ................................................................................... 56
3.2 Програмна реалізація веб-орієнтованої інформаційної системи підбору рішень
для управління розумним будинком ............................................................................ 57
3.3 Використання веб-орієнтованої інформаційної системи підбору рішень для
управління розумним будинком ................................................................................... 58
3.3.1 Клієнтська частина ............................................................................................. 59
3.3.2 Адміністративна частина .................................................................................. 67
3.3.3 Частина менеджера ............................................................................................ 70
3.4 Особливості тестування веб-сайтів розроблених через CMS WordPress ........... 72
3.5 Тестування веб-орієнтованої інформаційної системи підбору рішень для
управління розумним будинком ................................................................................... 75
Висновки до розділу 3 ................................................................................................... 79
ВИСНОВКИ ....................................................................................................................... 80
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 81
ДОДАТОК А ...................................................................................................................... 83
ДОДАТОК Б ....................................................................................................................... 85
ДОДАТОК В ...................................................................................................................... 94
10
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
ІС – інформаційна система;
CMS – Content Management System;
URL – Uniform Resource Locator;
ПЗ – програмне забезпечення;
WP – WordPress;
СКУД – системи контролю та управління доступом;
OSPanel – OpenServer Panel;
WAMP – Window Apache MySQL PHP;
MySQL – My Structured Query Language;
PHP – Hypertext Preprocessor;
HTTP – HyperText Transfer Protocol;
HTML – HyperText Markup Language;
CSS – Cascading Style Sheets;
СУБД – система управління базами даних;
UML – Unified Modeling Language;
API – Application Programming Interface;
SEO – Search Engine Optimization;
W3C – World Wide Web Consortium;
FTP – File Transfer Protocol;
RAM – Random Access Memory;
MSVC++ – Microsoft Visual C++;
РРО – реєстратор розрахункових операцій;
WC – WooCommerce;
WPML – WordPress Multilingual Plugin;
KNX – Konnex.
11
ВСТУП
Сучасні технології “розумних будинків” продовжують активно
впроваджуватись. На сьогоднішній день в сфері будівництва спостерігається значний
розвиток, особливо щодо встановлення різноманітних систем для управління
житловим простором. З урахуванням цього тренду, власники новобудов та майбутні
покупці нерухомості стають все більш зацікавленими у виборі оптимальних
технологій та систем для забезпечення комфорту, енергоефективності та безпеки у
своїх будинках. Тому почали розроблятися спеціальні інформаційні системи для
підбору рішень, які допоможуть користувачам зробити оптимальний вибір того
рішення, яке зможе вирішити їхню проблему. Кожен розробник може знайти користь
у дослідженні таких систем підбору та створенні аналогічного продукту, оскільки
сучасні тенденції вказують на зростання популярності в сфері автоматизації свого
простору. Хоча на ринку вже існують подібні системи підбору рішень, проте вони є
недосконалими, тому це не заважає створити інформаційну систему у вигляді веб-
сайту, який розширить можливості вибору таких рішень на якому будуть
представлені вже готові мінімальні рішення для різних видів приміщення, щоб
користувачі могли орієнтуватися на те, що планують встановлювати.
Актуальність кваліфікаційної роботи бакалавра. Використання різних
розумних систем для підбору рішень стає необхідною частиною щоденного життя
користувачів, що продовжує активно впроваджуватись. Ці системи складаються з
готових конфігурацій різних пристроїв, відомих як готові рішення. Розробка
інформаційної системи підбору рішень стає актуальною, сприяючи ознайомленню
користувачів з можливостями автоматизації їхніх приміщень. Це особливо актуально
в контексті розвитку технологій “розумних будинків”.
Мета кваліфікаційної роботи бакалавра – забезпечення автоматизації та
процесу вибору впровадження розумних технологій, шляхом створення веб-
орієнтованої інформаційної системи підбору рішень для управління розумним
будинком.
12
Для досягнення поставленої мети були поставлені такі завдання:
поставити та обґрунтувати задачу підбору рішень;
виконати порівняльний аналіз існуючих систем підбору рішень для управління
розумним будинком;
створити та підключити базу даних;
обрати технології та програмно-технічні засоби для реалізації веб-орієнтованої
інформаційної системи підбору рішень для управління розумним будинком;
розробити інформаційну систему для підбору рішень та виконати її тестування.
Об’єктом дослідження є процес підбору рішень за допомогою веб-орієнтованої
інформаційної системи для управління розумним будинком.
Предметом дослідження є підсистема підбору рішень веб-орієнтованої
інформаційної системи для управління розумним будинком.
Для вирішення завдань використовувалися такі методи дослідження:
теоретичний (аналіз відповідної літератури) та емпіричний, що включав у себе
спостереження та налаштування інформаційної системи підбору рішень для
управління розумним будинком; порівняльний – для здійснення порівнянь існуючих
аналогів інформаційної системи підбору рішень для управління розумним будинком.
Веб-орієнтована інформаційна система підбору рішень для управління
розумним будинком розроблена у вигляді веб-сайту через систему управління
контентом WordPress (WP) на локальному сервері OpenServer Panel (OSPanel).
Створення та робота з базою даних (БД) MySQL відбувалася із застосуванням веб-
додатка для адміністрування баз даних PhpMyAdmin.
Обрані технології відповідають всім вимогам, які стосуються функціональності
та характеристик цього типу програмного забезпечення.
13
1 АНАЛІТИЧНИЙ ОГЛЯД ІСНУЮЧИХ АНАЛОГІВ
1.1 Постановка та обґрунтування задачі підбору рішень
На сьогодні дуже гарно розвивається сфера будівництва, а також встановлення
різноманітних систем для управління своїм простором і всі власники нових будинків
потребують вибір таких конкретних систем для забезпечення комфорту,
енергоефективності та безпеки житла.
Тому постала задача розробити інформаційну систему, в якій будуть
запропоновані мінімальні готові рішення, що можна використати при будівництві чи
створенні такого житла. Власники новобудов, а також будівельні компанії,
архітектори, підприємці та звичайні люди, які мають свій будинок чи квартиру,
потребують доступу до зручного інструменту, який допоможе зробити оптимальний
вибір технологій та систем для своїх об'єктів.
Тому, метою розробки веб-орієнтованої інформаційної системи підбору рішень
для управління розумним будинком є забезпечення зручного та ефективного
механізму вибору технічних рішень при будівництві та обладнанні житла. Система
включатиме в себе широкий спектр готових рішень, різні технічні системи (опалення,
вентиляція, кондиціонування, системи розумного дому та ін.).
У зв’язку з цим призначення такої інформаційної системи (ІС) в тому, щоб
допомогти власникам будинків, квартир, бізнесів, а також будівельним компаніям
зробити правильний вибір ефективних рішень під час будівництва, реконструкції або
ж вдосконаленні житла. Ця система має на меті надати доступ до готових рішень та
дозволити автоматизувати рутинні завдання, підвищити рівень комфорту та
забезпечити безпеку приміщень власників.
1.2 Огляд існуючих аналогів
В даному підрозділі кваліфікаційної роботи бакалавра буде проведено огляд
існуючих аналогів створеної системи з метою визначення їхніх переваг, недоліків та
14
можливостей для подальшого вдосконалення і розвитку. Буде розглянуто такі веб-
сайти: “Ajax Systems”, “Domos”, “Розумне рішення”, “Меласк”.
1.2.1 Веб-сайт компанії “Ajax Systems”. Першим аналогом є сайт української
компанії “Ajax Systems”. “Ajax Systems” спеціалізується на створенні та виготовленні
систем безпеки як для приватних будинків, так і для комерційних об’єктів. Їх
продукція включає в себе різноманітні пристрої, такі як: сенсори руху
дверних/віконних відкривачів, відеокамери, клавіатури та інші компоненти системи
безпеки [12].
Веб-сайт компанії пропонує багато різноманітних послуг та функцій. Його
основною метою є ознайомити користувачів з пристроями для забезпечення безпеки
приміщень, а також допомогти з впровадженням в оселю.
Головна сторінка компанії “Ajax Systems” пропонує наступне [12]: знайомство
з готовими пристроями по категоріях, перегляд детальних відомостей про функції,
технічні характеристики, а також ключові можливості (рисунок 1.1).
Рисунок 1.1 – Головна сторінка компанії “Ajax Systems”
В категорії рішень користувачі сайту можуть дізнатися про найпоширеніші
сценарії автоматизації та перелік пристроїв з детальним описом характеристик та
анімованим представленням роботи кожного з них (рисунок 1.2).
15
Також на цій вкладці користувачі можуть прочитати детальні історії клієнтів
від самої ідеї до запропонованого рішення. На додачу кожна історія має детальний
перелік пристроїв, які були задіяні та характеристику. Клієнти, яким сподобалась та
чи інша реалізація проєкту, може залишити заявку для реалізації подібного рішення
для свого об’єкту. Достатньо залишити контактну інформацію та зачекати поки
фахівці зв’яжуться для обговорення деталей.
Рисунок 1.2 – Сторінка “Рішення”
Категорія підтримки пропонує користувачам переглянути таблицю
відповідності пристроїв Ajax охоронним стандартам, а також інструкції та статті, які
допоможуть клієнтам правильно налаштувати їхні пристрої та підключити їх до
мобільного додатку. На додачу в цій категорії користувачам пропонується отримати
консультацію. Заповнивши форму усіма необхідними даними та надіславши її.
Крім того, на цій вкладці міститься дуже корисний інструмент для
користувачів, це велика кількість калькуляторів різних категорій. За допомогою них
можна розрахувати час роботи батареї, дальність радіозв’язку, живлення та навіть
сумісність пристроїв Ajax (рисунок 1.3).
Також в цій категорії надано можливість зібрати власний набір вимикачів та
розеток. Для початку необхідно обрати тип, кількість, колір, розміщення, а потім
16
переглянувши складові сформувати документ з переліком обраного та за необхідності
надіслати цей файл монтажній компанії, яка займається встановленням таких систем
в оселі.
Рисунок 1.3 – Сторінка для перевірки сумісності
Звичайно, як і будь-який сайт, компанія містить сторінку з історією заснування
та розвитку, а також перелік вакансій для однодумців (рисунок 1.4).
Рисунок 1.4 – Сторінка з історією заснування компанії
17
Однією з переваг сайту є вкладка для партнерів. Завдяки ній компанія може
співпрацювати з різними дистриб’юторами з усієї України. Як наслідок на веб-сайті
представлений розділ для того, щоб клієнти могли купити будь-який пристрій
компанії в будь-якому місті. Для цього необхідно обрати вид користувача (звичайний
користувач чи професіонал). Далі система запропонує обрати область та що саме
користувач хоче (купити пристрій зі встановленням чи здійснити виключно покупку).
Компанія має послугу встановлення своїх пристроїв і на додачу свій сервісний
центр, який знаходиться в Києві, тому за потреби кожен може звернутися до них на
відповідній сторінці та надіслати свій пристрій Новою поштою на ремонт.
Ще однією корисною функцією сайту є кнопка “Зібрати комплект”. При
натисненні на цю кнопку клієнту необхідно пройти декілька етапів вибору із
запропонованих варіантів. Перш за все потрібно обрати тип приміщення (квартира,
будинок, офіс, бізнес). Наступним етапом потрібно обрати тип захисту (захист від
вторгнення, захист від протікань, пожежна безпека, охорона вулиці), клієнт може
обрати як один варіант, або ж при необхідності всі (рисунок 1.5). Далі користувачу
запропонують обрати кількість кімнат, де буде встановлено той чи інший захист.
Рисунок 1.5 – Сторінка “Вибір типу захисту”
18
Останнім етапом система запропонує додати додаткові пристрої до зібраного
комплекту. Клієнт також зможе обрати базову або ж розширену комплектацію
(рисунок 1.6).
Рисунок 1.6 – Демонстрація останнього етапу
Після закінчення збирання комплекту користувач може завантажити документ
з переліком обраних пристроїв, або ж надіслати запит заповнивши форму особистими
даними для подальшого зв’язку з фахівцем компанії.
Підсумовуючи вище описаний аналог, можна зробити висновок, що дана
система має як переваги, так і недоліки.
Перевагами сайту є наявність детального опису та характеристик кожного з
пристроїв, можливість зібрати комплект та завантажити перелік запропонованих
пристроїв системою. Також користувачі сайту можуть прочитати історії клієнтів,
яким компанія допомогла впровадити різні системи для забезпечення безпеки
особистого приміщення.
Недоліками сайту є відсутність купівлі товарів, тобто користувач не може
відразу здійснити покупку, йому доведеться обрати своє місто у відповідній вкладці
і подивитися, де саме реалізований продаж товарів даної компанії. Звісно, це є
вагомим недоліком сайту, оскільки користувачу доведеться витрати час на пошук
19
цього товару для здійснення його купівлі. Крім того, ще одним недоліком є
недостатньо зрозуміла функція кнопки про надсилання запиту після того, як клієнт
зібрав комплект. Йому потрібно ввести особисті дані у формі, а також під заповненою
формою є рекомендація вибору професійного монтажу, але незрозуміло навіщо йому
це обирати. Якщо цим компанія хотіла предстати послуги монтажу, то варто було б
детальніше описати про надання цих послуг.
1.2.2 Веб-сайт компанії “Domos”. Другим аналогом створеної системи є сайт
української компанії “Domos”. “Domos” – компанія, яка розробляє та інтегрує
передові технології розумного дому в системи безпеки та комфорту [13].
Веб-сайт компанії пропонує різноманітні пристрої для забезпечення комфорту,
безпеки та заощаджень. Основною метою сайту є ознайомити користувача з товарами
та показати, як можна пов’язати між собою пристрої для вирішення будь-якої
проблеми [13].
Головна сторінка сайту компанії пропонує клієнтам ознайомитись з тим, як
працює система розумного дому, а також з пристроями по категоріях, які
представлені на сайті (рисунок 1.7).
Рисунок 1.7 – Головна сторінка сайту компанії “Domos”
В категорії “Про нас” користувачі можуть ознайомитись з інформацією про
компанію та те чим вона займається.
20
Наступна вкладка “Розумний дім” представляє, як користувач може поєднати
товари представлені в продажі на сайті за трьома категоріями (системи
безпеки/економії/комфорту). Тобто, якщо користувач обере категорію систем
економії, то побачить перелік тих самих товарів, які представлені в магазині, але вже
з коротким описом про те, що використавши до прикладу ці запропоновані нижче
пристрої, користувач зможе керувати світлом (рисунок 1.8). Кожна категорія має
чотири варіанти застосування пристроїв компанії. Але на сайті не представлено те, як
правильно пов’язати їх між собою, хоча логічним є, що якщо сайт пропонує
використання цих пристроїв разом для забезпечення наприклад безпеки, то потрібно
було б додати і інструкцію по застосуванню цих пристроїв між собою. Взамін на це
компанія пропонує встановлення систем розумний дім через форму. Клієнту потрібно
заповнити її особистими даними та відправити, але цієї послуги немає в жодній з
категорій, проте вона представлена на головній сторінці, що є не зручним при
користуванні сайтом.
Рисунок 1.8 – Демонстрація сторінки із застосуванням пристроїв компанії
Наступна сторінка обладнання, на ній запропоновано пристрої по категоріях
(рисунок 1.9).
Клієнт може натиснути на товар та побачити детальну характеристику,
особливості, опис і ціну. Також є можливість додавати товари в кошик. Після
21
додавання товарів в кошик клієнт може перейти в нього та переглянути список
обраних пристроїв і оформити замовлення. При оформленні користувач сайту, може
обрати зручний спосіб доставки та спосіб оплати.
Рисунок 1.9 – Сторінка з товарами
Вкладка додаток пропонує завантажити додаток компанії для зручного
керування пристроями в оселі. Користувачі можуть завантажити додаток для Android
та IOS (рисунок 1.10).
Рисунок 1.10 – Додаток компанії
22
В категорії підтримки можна заповнити форму на гарантійне обслуговування
пристрою. Крім того, за необхідності отримати будь-яку технічну інформацію з
приводу пристроїв, а також інструкції, драйвера та інше додаткове програмне
забезпечення для продукції “Domos” (рисунок 1.11).
Рисунок 1.11 – Підтримка сайту
Якщо користувач хоче співпрацювати з компанією, то достатньо заповнити
форму у відповідній вкладці в головному меню сайту.
Підсумовуючи вище описаний аналог, можна зробити висновок, що дана
система має переваги і недоліки.
Перевагою сайту є наявність купівлі товарів на сайті компаній без необхідності
пошуку цих самих товарів на інших сайтах або інтернет-магазинах, як це було в
попередньому аналозі “Ajax Systems”. На додачу можна відмітити, що дизайн сайту є
лаконічним та зручним у використанні, немає нагромадження великою кількістю
сторінок в нижній частині веб-сайту. Все інтуїтивно зрозуміло.
Недоліками сайту є відсутність детального опису взаємодії товарів в категорії
розумний дім. Якщо вже компанія пропонує використання пристроїв разом для
забезпечення безпеки, комфорту або ж заощаджень, то необхідно додати інструкцію
про те, де можна ознайомитись із застосуванням цих пристроїв між собою. Взамін на
це компанія зробила форму для замовлення встановлення тої чи іншої системи з цієї
23
вкладки. Однак логічним було розмістити цю послугу біля кожної системи, а не на
головній сторінці. Клієнти можуть не відразу зорієнтуватися, що саме мала на увазі
компанія коли пропонувала цю послугу на головній сторінці. Ще одним недоліком
сайту є відсутність інструкцій до пристроїв. Клієнтам пропонується форма, яку
потрібно заповнити, якщо користувачу необхідно отримати інструкцію, драйвери,
технічну інформацію, додаткове ПЗ до того чи іншого товару, який було придбано.
1.2.3 Інтернет-магазин “Розумне рішення”. Третім аналогом є інтернет-
магазин “Розумне рішення”. Це магазин, який є дистриб’ютором різних компаній та
організацій. Магазин пропонує велику кількість товарів по категоріях з додатковим
випадаючим списком по кожній з них [14].
Головна сторінка сайту пропонує користувачам ознайомитись з переліком
товарів, які продає магазин. Додатково на сторінці представлені рухомі банери з
переліком партнерів з якими співпрацює магазин та послуги, які пропонує (рис. 1.12).
Основна мета сайту допомогти користувачам обрати потрібний пристрій та за
необхідності реалізувати монтаж.
Рисунок 1.12 – Головна сторінка магазину
Крім продажу пристроїв інтернет-магазин пропонує послугу монтажу за трьома
категоріями системи відеоспостереження, системи сигналізації та системи контролю
та управління доступом (СКУД). Кожна з цих категорій має безкоштовну
24
консультацію, детальний опис надання послуги. На додачу в системі
відеоспостереження та системі сигналізації можна ознайомитись з готовими
комплектами від різних партнерів та з різною ціновою політикою, а також є
можливість скласти власні комплекти проконсультувавшись з фахівцями магазину
(рисунок 1.13). Для отримання вичерпної інформації щодо будь-якого конкретного
комплекту користувачу достатньо залишити свою електронну адресу. Система
контролю та управління доступом пропонує план реалізації кожної СКУД, від
проєктування до здачі в експлуатацію.
Вкладка контактів містить інформацію про місце розташування компанії,
графік роботи.
Рисунок 1.13 – Готові комплекти системи відеоспостереження
Ще однією корисною функцією сайту є розрахунок вартості системи
відеоспостереження та системи електромонтажних робіт. При натисненні на кнопку
клієнту запропонується форма у вигляді тесту з відповідями на питання. Тобто на
першому етапі із запропонованих варіантів клієнту потрібно обрати куди потрібно
встановити систему (рисунок 1.14). Після того як користувач заповнить форму йому
потрібно ввести особисте ім’я та номер телефону та натиснути кнопку для отримання
25
проєкту, розрахунків і каталогу. Для надсилання цієї інформації магазин
використовує месенджер Viber.
Рисунок 1.14 – Розрахунок вартості системи відеоспостереження
Підсумовуючи вище описаний аналог можна зробити висновок, що дана
система має переваги і недоліки.
Перевагами сайту є велика різноманітність пристроїв від різних партнерів,
тому кожний знайде щось підходяще для себе. Також великим плюсом є те, що
магазин вирішив зосередити свою увагу виключно на трьох категоріях надання
послуг з монтажу. Так компанія може виконувати роботу якісно та швидко.
Недоліками сайту є те, як реалізована функція розрахунку вартості.
Користувачу необхідно заповнювати форму, після цього вводити свою контактну
інформацію, щоб отримати всю інформацію відповідно до того, що клієнт обрав.
Логічнішим було після заповнення форми у вигляді тесту надавати можливість
користувачу отримати розрахунок на сайті через формування та завантаження файлу.
Якщо компанія включає ще додаткові функції цього розрахунку, такі як надсилання
каталогу їхніх робіт, то тоді вже необхідно надати можливість користувачам
заповнювати форму особистими даними для надсилання додаткової інформацію. Це
було б зручніше для користувача, тому що можливо немає необхідності отримувати
26
відразу стільки інформації чи користувач не хоче отримувати таку інформацію.
Клієнт же початково натиснув на кнопку розрахунку вартості, тому не очікує, що
разом з розрахунком надішлють ще каталог робіт.
1.2.4 Веб-сайт компанії “Меласк”. Четвертим аналогом є сайт української
компанії “Меласк”. “Меласк” – це компанія, яка пропонує клієнтам готові комплекти
для автоматизації розумного будинку, квартири або офісу за чотирма варіантами, а
саме: комфорт, охорона, економія, безпека [15].
Фактично головна сторінка схожа на односторінковий сайт з використаною
функцією якір меню. Тобто при натисненні на вкладки на головному меню
користувача просто переноситиме до відповідного блоку на одній і тій самій сторінці
(рисунок 1.15).
Рисунок 1.15 – Головна сторінка компанії “Меласк”
Також головна сторінка пропонує ознайомитись з описом компанії та описом
систем, які компанія пропонує. Опис систем розбите на готові комплекти, які містять
назви і кнопку для перегляду детальної інформіції про комплект. В свою чергу
кожний комплект не має ніякого опису самої системи, ні переліку хоч якихось
пристроїв, які входять туди (рисунок 1.16). Клієнту лише надано можливість
замовити індивідуальний розрахунок через форму, який здійснюється шляхом вибору
27
варіантів із запропонованого переліку (рисунок 1.17). Вкінці заповнення клієнт
залишає особисті дані для отримання розрахунку.
Рисунок 1.16 – Блок з готовими комплектами
Рисунок 1.17 – Форма для замовлення індивідуального розрахунку
Компанія має свій зручний додаток за допомогою якого можна керувати всіма
сумісними термостатами в своєму будинку.
Для надання готових комплектів компанія співпрацює з австралійською
компанією “LOXONE” та українською компанією “Ajax Systems”, також
28
використровує стантартизований протокол зв’язку KNX для управління
інтелектуальними системами будь-якої будівлі.
Підсумовуючи вище описаний аналог можна зробити висновок, що дана
система має переваги і недоліки.
Перевагами сайту є наявність додатку, який допоможе в керуванні опаленням
та іншими системами для заощадження витрат.
Недоліками сайту є те, що компанія має лише чотири готові комплекти, які до
того ж не мають хоч якогось опису, характеристик пристроїв, які входять в систему.
Користувачу сайту не зрозуміло як замовити той чи інший комплект і чи взагалі
представлена ця фунуція.
1.3 Порівняльна характеристика існуючих розглянутих аналогів та
постановка завдання
Проаналізувавши існуючі розглянуті аналоги, в кваліфікаційній роботі
бакалавра є пропозиція модернізувати та зробити більш зручну і універсальну
систему, шляхом збільшення функціоналу через об’єднання та додавання нових
можливостей, а саме:
1. Зробити мінімальні готові рішення в головному меню з випадаючим списком за
категоріями.
2. Додати детальний опис кожного рішення та можливість переглянути
характеристики пристроїв, які в нього входять.
3. Додати можливість окремої купівлі пристрою без готового рішення за
категоріями.
4. Дати можливість клієнту бачити пристрої різних виробників та різною ціновою
політикою.
5. Зробити можливість замовлення готового мінімального рішення та пристроїв
окремо.
На рисунку 1.18 представлено порівняльний аналіз існуючих розглянутих
аналогів, а саме: “Ajax Systems”, “Domos”, “Розумне рішення”, “Меласк”.
29
Рисунок 1.18 – Порівняння існуючих розглянутих аналогів
Як можна спостерігати з рисунку 1.18, критерії порівняння включають: дизайн;
користувацький інтерфейс та зручність використання; асортимент готових рішень;
комунікація з клієнтом.
Підсумовуючи огляд та оцінки наведених вище аналогів, важливо відзначити,
що кожному з них притаманні такі характеристики:
− Зручний користувацький інтерфейс та використання;
− Різноманітний асортимент готових рішень;
− Ефективна комунікація з клієнтом.
Проаналізувавши існуючі аналоги створеної системи, в кваліфікаційній роботі
бакалавра при розробці веб-орієнтованої інформаційної системи підбору рішень для
управління розумним будинком варто звернути увагу на такі моменти:
− веб-сайт повинен мати приємний та сучасний дизайн;
− веб-сайт повинен мати зручний та зрозумілий у використанні користувацький
інтерфейс;
− веб-сайт повинен мати широкий та наповнений детальним описом і
характеристиками пристроїв асортимент готових рішень;
30
− веб-сайт повинен мати ефективну та зрозумілу форму комунікації з клієнтом,
як для замовлення готового мінімального рішення, так і для питань при купівлі
окремого пристрою.
Постановка завдання
1. Обґрунтування поставленої задачі та аналітичний огляд існуючих аналогів
створеної системи.
2. Аналіз технологій та програмно-технічних засобів для реалізації найсучаснішої
веб-орієнтованої інформаційної системи підбору рішень для управління
розумним будинком.
3. Розробка веб-орієнтованої інформаційної системи підбору рішень для
управління розумним будинком, що задовольняє таким функціональним
вимогам:
− перегляд готових мінімальних рішень за категоріями;
− перегляд окремих пристроїв за категоріями;
− заповнення форми для замовлення готового мінімального рішення;
− додавання пристроїв до кошика та оформлення замовлення;
− завантажувати перелік пристроїв та змінювати їх (для адміністратора);
Висновки до розділу 1
В даному розділі поставлено та обґрунтовано проблему впровадження веб-
орієнтованої інформаційної системи підбору рішень для управління розумним
будинком.
Проведено аналіз існуючих аналогічних систем, а саме: “Ajax Systems”,
“Domos”, “Розумне рішення”, “Меласк” та визначено переваги і недоліки кожного з
аналогів.
Представлено порівняльний графік між існуючими варіантами реалізації та
сформульовано постановку завдання.
31
2 АНАЛІЗ І ПРОЄКТУВАННЯ ВЕБ-ОРІЄНТОВАНОЇ
ІНФОРМАЦІЙНОЇ СИСТЕМИ ПІДБОРУ РІШЕНЬ ДЛЯ УПРАВЛІННЯ
РОЗУМНИМ БУДИНКОМ
2.1 Аналіз тенологій розробки та вибір засобів реалізації інформаційної
системи
Для розгортання веб-орієнтованої інформаційної системи підбору рішень для
управління розумним будинком обрано локальний сервер OpenServer Panel (OSPanel)
[6].
OSPanel – це портативний локальний WAMP сервер, що володіє розширеним
набором функцій для керування та великим спектром доступних компонентів для
підключення. Попередником даного сервіса є локальний сервер Denwer [6].
Даний програмний комплекс, або як ще його називають OSPanel включає
уважно відібраний набір серверного програмного забезпечення та надзвичайно
зручний і добре продуманий інструмент управління, який володіє розширеними
можливостями для адміністрування і налаштування всіх доступних компонентів.
OSPanel активно застосовується для створення, вдосконалення та перевірки веб-
проєктів, а також надання веб-сервісів у локальних мережах. Перевагою є те, що
можна працювати з декількома програмами прямо на цьому сервері не потребуючи
попереднього встановлення їх на комп’ютер [6].
Основні можливості програми OSPanel [6]:
швидкий запуск та зупинка;
автоматичний запуск сервера при відкритті програми;
різні режими управління доменами;
підключення віртуального диска;
можливість керування через командний рядок;
підтримка профілів налаштувань;
зручний перегляд логів для всіх компонентів;
перемикання модулів HTTP, MySQL та PHP;
32
докладна та зрозуміла документація;
швидкий доступ до шаблонів конфігурації;
багатомовний інтерфейс;
автоматичний запуск програм згідно зі списком.
Системні вимоги [6]:
Операційні системи: Windows 7 SP1 x64/Windows Server 2008 R2 SP1 або
новіший (32-бітові системи не підтримуються);
Вільні апаратні ресурси: від 500 МБ RAM та від 10 ГБ місця на диску;
Системне ПЗ: MSVC++ 2005-2022 Redistributable Packages (є в комплекті);
Компоненти та інструменти локального сервера [6]:
Для налаштування скриптів у різних середовищах Open Server пропонує
користувачеві два види HTTP серверів, різні версії модулів PHP і СУБД, а також
можливість швидко перемикатися між ними.
HTTP модулі: Apache 2.2.21 та Nginx 1.0.11 [6];
СУБД модулі: MySQL 5.1.61, MySQL 5.5.20 та PostgreSQL 9.1.1;
PHP модулі: PHP 5.2.17 (IMagick 2.2.1, Zend Optimizer 3.3.3, IonCube Loader 4.0.7,
Memcache 2.2.4) та PHP 5.3.9 (IMagick 2.3.0, Xdebug 2.1.3, IonCu 10, Memcache 2.2.6);
Чудовий набір засобів для управління базою даних: HeidiSQL, Adminer,
PHPMyAdmin, PHPPgAdmin, PgAdmin.
Також у пакет входять такі компоненти як: Perl, FTP сервер, Sendmail,
Memcached сервер.
Усі складові зазначені в офіційних репозиторіях і завжди оновлюються до
останніх версій при кожному оновленні пакету.
Програма виглядає як прапорець, який має три режими роботи і розташовується
він на панелі задач (рисунок 2.1). Для запуску Open Server Panel використано файл
Open Server.exe. Після початку програми з’являється червоний прапорець в області
сповіщень Windows (область біля системного годинника). Щоб увімкнути
безпосередньо веб-сервер і модулі, необхідно натиснути на прапорець, потім кнопку
запуску.
33
Рисунок 2.1 – Головне вікно OSPanel
Для створення веб-орієнтованої інформаційної системи підбору рішень для
управління розумним будинком обрано систему управління контентом WordPress [7].
CMS WordPress – це безкоштовне програмне забезпечення, яке можна
використовувати для створення привабливого веб-сайту, блогу або веб-додатку [7].
На рисунку 2.2 представлено офіційний сайт програмного забезпечення для
завантаження дистрибутиву.
Рисунок 2.2 – Офіційний сайт програмного забезпечення
34
WordPress є відкритою системою. Відкритий код дозволяє будь-кому вносити
зміни до движка. Це призводить до появи нових додатків та тем для таких систем
управління контентом, а також швидшого виявлення та виправлення вразливостей.
Тобто кожний користувач може створити свою тему, або ж доповнити вже існуючу,
наприклад використовуючи HTML, CSS і PHP-сценарії.
WordPress обслуговує понад 43% Інтернету – ця цифра зростає щодня. Все, від
простих веб-сайтів до блогів, складних порталів і корпоративних веб-сайтів і навіть
програм, створено за допомогою WordPress [7].
Дана CMS поєднує в собі простоту для користувачів і видавців із внутрішньою
складністю для розробників. Це робить движок гнучким, але при цьому легким у
використанні. Нижче перераховано деякі стандартні функції WordPress. Однак існує
безліч модулів, які розширюють можливості цієї платформи, тому фактична
функціональність є майже необмеженою. Також є можливість робити з кодом
WordPress усе, що завгодно, розширювати чи змінювати будь-яким чином або
використовувати для комерційних проєктів без будь-яких ліцензійних зборів. Краса
вільного програмного забезпечення полягає не лише в безкоштовності, але й
можливості мати абсолютний контроль. Ось деякі з особливостей:
простота дає змогу швидко вийти в Інтернет і опублікувати;
гнучкість допомагає створити будь-який тип веб-сайту: особистий журнал в
мережі, веб-сайт для фотографій, сайт для бізнесу, професійне портфоліо,
урядовий веб-сайт, журнал або новинний веб-сайт, онлайн-спільноту, навіть
мережу веб-сайтів;
зручне управління користувачами;
сумісність зі стандартами встановленими W3C.
Для розробників представлено багато корисних речей, які можна використовувати
для розширення WP у будь-якому напрямку, який подобається:
система плагінів API WordPress дає змогу створювати плагіни для розширення
модулів системи;
35
система тем оформлення дає змогу створити власну тему або модифікувати вже
існуючу;
фреймворк програми дає змогу створити програму через функції, які
знаходяться під капотом (переклади, керування користувачами, HTTP-запити,
бази даних, URL-маршрутизація та багато, багато іншого.
WordPress пропонує легку установку та налаштування для користувачів. Він
базується на технологіях PHP/MySQL. Сьогодні WordPress є найпопулярнішою
системою управління контентом і використовується на кожному третьому веб-сайті.
Однак для створення привабливого та якісного проєкту потрібно опанувати нові
навички та засвоїти багато інформації, доступної в мережі.
2.2 Додаткові функціональні модулі
У цьому підрозділі буде розглянуто низку додаткових функціональних модулів,
які використані для розширення можливостей веб-орієнтованої інформаційної
системи підбору рішень для управління розумним будинком. Ці модулі надають
користувачам додаткові інструменти, функції або можливості, що покращують
загальний досвід використання. Буде досліджено кожен модуль окремо, надаючи
опис його функціональності, переваг та можливостей використання в контексті
роботи.
2.2.1 Модуль електронної комерції WooCommerce. Даний модуль
використано для впровадження в систему зручного та ефективного продажу
пристроїв.
WooCommerce – це платформа електронної комерції для WordPress з відкритим
вихідним кодом [10]. Ця платформа підтримується глобальною спільнотою.
Відкритий вихідний код забезпечує свободу, оскільки власник системи може
зберігати повний контроль над вмістом та базою даних проєкту.
Незалежно від того, чи це бізнес, роздрібна торгівля в Інтернеті чи розробка
веб-сайтів для клієнтів, використання WooCommerce дає можливість потужно
поєднувати контент і комерцію.
36
Завантаження та підключення модуля через CMS систему представлено на
рисунку 2.3.
Рисунок 2.3 – Завантаження та підключення модуля WooCommerce
Основні можливості використання модуля:
створення стильних та оригінальних віртуальних вітрин за допомогою тем, які
підійдуть для конкретного бренду чи галузі;
збільшення доходу за допомогою оптимізованого кошика, що спрощує
покупку;
налаштування сторінки товарів за лічені хвилини за допомогою модульних
блоків товарів;
представлення фізичних і цифрових товарів та їх варіантів, конфігурації
користувача, моментальні завантаження та пов’язані позиції;
продаж підписок, бронювань або членств за допомогою розширень,
перевірених розробниками;
використання вбудованої підтримки SEO, що допомагає забезпечити високу
видимість магазину в пошукових системах.
Завдяки цьому модулю адміністраторам сайту дуже зручно керувати та
обробляти замовлення клієнтів через адмінпанель WP. При керувані модулем
37
адміністратор може побачити аналітику купівлі товарів або ж пристроїв за різними
категоріями, відповідно це допоможе робити звіти з продажу, отриманого доходу і тд.
Додатково через модуль WC власники можуть інтегрувати різноманітні сервіси,
які необхідні для клієнтів при введені бізнесу.
2.2.2 API-інтеграція платіжної системи LiqPay та служби доставки Nova
Poshta. У сучасному бізнесі зручність оплати та доставки відіграє ключову роль у
задоволенні потреб клієнтів і підвищенні конкурентоспроможності, тому в даному
проєкті було використано інтеграцію API для платіжної системи LiqPay та служби
доставки Нова пошта.
API – це система інструментів і ресурсів, яка дає можливість розробникам
створювати програмні продукти, що взаємодіють з іншими сервісами [8]. Тобто це те,
що дозволяє двом окремим додакам взаємодіяти один з одним. API дозволяє
користувачам взаємодіяти з іншими службами або сайтами, не залишаючи сам сайт.
WooCommerce підтримує оплату банківським переказом, чеком і готівкою при
отриманні. На веб-сайтах з WooCommerce оплата карткою та інші методи оплати
підключаються окремо. Зі стандартними розширеннями WooCommerce можна
підключити PayPal, Stripe та ще декілька інших зарубіжних систем, які не є звичними
чи зручними для українців. Тому якщо необхідно, щоб на сайті можна було платити
за допомогою monobank, Приват24 та інших популярних в Україні способів, треба
підключати українську платіжну систему.
Платіжні системи полегшують купівлю і для власників сайтів, і для покупців,
тому що:
підтримують різні способи оплати: картки, електронні гаманці, готівку тощо;
фіскалізують оплати та відправляють звіти в Державну Податкову Службу;
надсилають електронні чеки покупцям.
Підключити до WooCommerce платіжні системи можна за допомогою плагінів.
Водночас важливо обирати лише перевірені та безпечні плагіни оплати WP, аби
вберегти себе та покупців від шахраїв. Це можна зробити через офіційні сайти
представників плагінів, або через офіційний сайт системи управління контентом
через яку відбувається впровадження плагіна.
38
Для впровадження оплати у веб-орієнтовану інформаційну систему підбору
рішень для управління розумним будинком обрано платіжну систему LiqPay з метою
забезпечення зручного та ефективного процесу оплати через Privat24 [16].
LiqPay – це платіжна платформа від ПриватБанку, яка, окрім карт Visа та
MasterCard, підключає всі поширені методи оплати: PrivatPay, Apple Pay, Google Pay,
FacePay24 та інші (рисунок 2.4).
Рисунок 2.4 – Офіційна сторінка системи LiqPay
Основні можливості платіжної системи:
налаштувати персоналізовану платіжну сторінку або використати сторінки
саме вашого сайту для оплати;
встановити віджети, які відображають методи оплати на сайті або викликають
функціонал для проведення оплати;
підключити платежі за підпискою;
використати двостадійну оплату: спочатку система блокує гроші на картці, а
потім списує;
генерувати QR-код для оплати в мобільному додатку Privat24;
підключити відкладену оплату готівкою в терміналах ПриватБанку;
розподілити надісланий платіж на декілька рахунків;
39
виставити рахунок на електронну пошту;
повернути платіж на картку клієнта.
Підключення до LiqPay безкоштовне, але є оплата комісії за розрахунки – 1,5%
від суми платежу. Комісія може бути знижена, наприклад, для благодійних або
комунальних організацій. Також якщо обіг компанії чи організації перевищує 300 000
гривень на місяць, можна домовитися про індивідуальний тариф.
Для WP платіжна система не має власного модуля. Є неофіційний плагін з
хорошими відгуками WebPlus Gateway for LiqPay on WooCommerce, саме цей плагін
було задіяно для підключення оплати до проєкту.
WebPlus Gateway for LiqPay on WooCommerce – це платіжний шлюз для веб-
сайтів з використанням WooCommerce, який підключає платіжну систему LiqPay [17].
З використанням безкоштовній версії плагіна покупці зможуть сплатити товари з
кошика, обравши спосіб оплати LiqPay.
Однак в адмінпанелі WordPress оплата відображатися не буде: розроблений
сайт не отримає повідомлення від платіжної платформи про те, що оплата надійшла
або гроші повернулися клієнту через відсутність функція callback. Потрібно буде
вручну перевіряти надходження коштів, звіряти з замовленнями та відмічати в
системі статус оплати. Інтеграції з РРО у цій версії також немає. Для додавання цих
функцій необхідно придбати платну версію плагіну з підключенням callback-функції
та РРО за 2000 гривень.
WooCommerce пропонує різні варіанти доставки та налаштування податків.
Власник системи може обчислювати витрати на доставку, використовуючи різні
способи та класи доставки від вже встановленого модуля WooCommerce. Проте для
зручності та ефективності створеної системи краще обрати звичну для українців
службу доставки.
Підключити до WooCommerce служби доставки можна за допомогою плагінів.
Для впровадження доставки у веб-орієнтовану інформаційну систему підбору
рішень для управління розумним будинком обрано службу доставки Нової пошти з
метою полегшення процесу доставки пристроїв споживачам.
40
Для WP служба доставки не має власного модуля. Є неофіційний плагін WC
Nova Poshta Shipping, саме цей плагін було задіяно для підключення доставки до
проєкту.
WC Nova Poshta Shipping – інтеграція служби доставки Нової Пошти для
WooCommerce-проєкту з відкритим вихідним кодом. Основними функціями є:
просте та інтуїтивне налаштування;
можливість вибору складу Нової Пошти або поштомату на сторінці
оформлення замовлення;
можливість встановити фіксовану вартість доставки;
інтеграція з популярними плагінами для локалізації: WPML та Polylang;
підтримка останніх версій WordPress та WooCommerce;
підтримка геозон WooCommerce.
Нова Пошта – це надійний партнер для доставки замовлень, які робляться через
WooCommerce. Служба доставки Нова пошта є лідером українського логістичного
ринку (рисунок 2.5). Компанія пропонує послуги доставки листів, документів і
посилок як до будинку або офісу, так і до відділення [18]. Служба доставки пропонує
приватним особам і представникам бізнесу широкий спектр послуг. Також для
зручності клієнтів створено функціональний мобільний додаток.
Рисунок 2.5 – Офіційна сторінка служби доставки Нової пошти
41
Інтеграція цих двох сервісів полегшує процес замовлення та доставки товарів
онлайн. Інтерфейс WooCommerce дозволяє покупцям вибирати різні способи
доставки, включаючи доставку Новою Поштою, що зручно для багатьох клієнтів.
Підключення Нової Пошти до системи через WooCommerce дозволить:
автоматично розраховувати вартість доставки на основі ваги товарів та
вибраного сервісу доставки Нової Пошти;
надавати покупцям зручний інтерфейс вибору пункту самовивозу або адресної
доставки;
автоматично створювати та відстежувати накладні для кожного замовлення;
повідомляти покупців про статус їхнього замовлення та відправлення через
систему повідомлень WooCommerce.
Така інтеграція спрощує процеси управління замовленнями та доставки,
забезпечуючи зручність для власників магазинів та задоволення для покупців.
Для ефективної інтеграції з платіжною системою та службою доставки у
проєкті, ключовим етапом є використання їхніх API ключів [9]. Ці ключі надають
доступ до функцій системи з програмного інтерфейсу, дозволяючи здійснювати
платежі та керувати процесом доставки безпосередньо з веб-додатка.
API ключі використовуються для перевірки автентифікації користувацьких
агентів, які взаємодіють з API або роблять запити до нього. Ці ключі можуть бути
включені в API через рядок запиту, заголовок запиту або у формі файлу cookie.
Компанія, яка керує API, може використовувати ці ключі для дозволу лише
зареєстрованим користувачам відправляти запити, відстежувати використання,
забезпечувати контроль за використанням API і блокувати або обмежувати
користувачів, які перевищують певні обмеження. Коли API отримує надісланий ключ,
він перевіряє, що ви відповідаєте вказаному користувачу, і авторизує вас на
виконання певної дії [9].
Для початку необхідно завантажити та підключити відповідні плагіни для
роботи з платіжною системою LiqPay та службою доставки Нової пошти. Далі
необхідно отримати API ключі від відповідних сервісів. Для цього необхідно
42
зареєструватися на веб-сайті платіжної системи та служби доставки і отримати власні
ключі доступу. Після цього можна інтегрувати їх у проєкт, забезпечуючи безперервну
обробку платежів та зручну організацію доставки для ваших клієнтів.
2.2.3 Модуль TelSender і WpForms для збору та обробки замовлень за
допомогою API-інтеграції з Телеграм ботом. Для будь-якого власника бізнесу
важливим процесом є зв’язок з клієнтом. В даному проєкті використано модуль
WpForms для впровадження в інформаційну систему форми замовлення готового
мінімального рішення. Додатково використовувалась API-інтеграція з Телеграм
ботом для збору та обробки замовлень.
WpForms – це модуль для створення будь-яких контактних форм зв’язку для
веб-сайтів створених через систему управління контентом (рисунок 2.6). Безкоштовна
версія модуля є обмеженою в деяких випадках, тому розробнику необхідно придбати
Pro-версію, або ж використовувати додаткові модулі для реалізації поставлених
задач. Крім того, якщо розробник створює систему локально, то функції отримання
заповнених клієнтами форм є недоступною.
Рисунок 2.6 – Завантаження та налаштування модуля WpForms
Для збору та обробки замовлень використано модуль TelSender з API-
інтеграцією з Телеграм ботом. TelSender – це модуль, який дозволяє надсилати дані з
таких форм які створені через ContactForm, WpForms, а також перехоплювати будь-
43
які POST запити на сервері (рисунок 2.7). Також є інтеграція з WooCommerce, де всі
нові замовлення можуть відправлятись в телеграм.
Рисунок 2.7 – Завантаження та налаштування модуля TelSender
Для реалізації відправки форм додатково використано Телеграм бота. Спочатку
необхідно створити бота через головний сервіс Телеграма, через який проходить
реєстрація всіх користувацьких ботів. Назва сервісу BotFather.
BotFather – це спеціальний бот, створений Telegram, який дозволяє
користувачам створювати власних ботів на платформі Telegram. Він є офіційним
інструментом для створення, налаштування та управління ботами в месенджері
Telegram.
Користувачі можуть звернутися до BotFather, використовуючи спеціальну бот-
команду “/start”, після чого вони отримають доступ до списку команд для керування
своїми ботами. BotFather дозволяє створювати ботів з різними функціями, надавати
їм імена, змінювати їх налаштування та отримувати API-токени для інтеграції з
іншими сервісами.
API-токен – це код, який виданий системою авторизації і використовується для
доступу до певного API.
У веб-орієнтованій інформаційній системі підбору рішень для управління
розумним будинком використано API-токен для зв’язку з Телеграм ботом через
44
модуль TelSender, який використовує модуль WpForms для інтеграції форм у веб-
сайт.
2.3 Проєктування структури інформаційної системи
Перед процесом реалізації веб-орієнтованої інформаційної системи підбору
рішень для управління розумним будинком, необхідно було виконати проєктування
структури сайту, щоб забезпечити зручний та логічний доступ до всіх функцій
системи для користувачів. Це включало в себе розробку ієрархії розділів та сторінок,
створення зручної навігації, а також врахування потреб цільової аудиторії.
Цільова аудиторія веб-орієнтованої інформаційної системи підбору рішень для
управління розумним будинком може бути різноманітною, але основні групи людей,
які можуть зацікавитись системою наступні:
− технологічно орієнтовані особи, які цікавляться новітніми технологіями та
інноваціями. Такі люди можуть бути комп’ютерними програмістами,
інженерами або просто тими, хто цікавиться розумними пристроями і хоче
використовувати їх у своєму будинку;
− власники будинків і квартир, які володіють власними житловими
приміщеннями, можуть бути потенційними користувачами. Такі люди
зацікавлені в автоматизації свого домашнього середовища, забезпеченні
безпеки, зручності та енергоефективності;
− бізнес-власники та підприємці можуть зацікавитися використанням технологій
домашньої автоматизації та розумного будинку для оптимізації роботи бізнесу.
Це можуть бути власники готелів, ресторанів або інших комерційних
приміщень, де можна використовувати ці готові рішення для покращення
обслуговування та зниження витрат;
− люди з особливими потребами, які можуть використати готові мінімальні
рішення для полегшення доступості, моніторингу та допомоги в повсякденних
справах.
45
Крім того, важливо було забезпечити високий рівень користувацької зручності
та ефективно взаємодіяти з потенційними користувачами шляхом відповідного
розміщення контенту та привабливого дизайну.
Процес прототипування виконувався засобами програмного забезпечення
Draw.io [5]. Draw.io – це програмне забезпечення, доступне онлайн, для створення
блок-схем, діаграм процесів, UML, ER та мережевих діаграм [5].
Вибір даного програмного забезпечення обумовлено тим, що даний сервіс має
великий вибір заготовок, шаблонів та інструментів для редагування елементів. Сервіс
допоможе підготувати презентацію, швидко розробити структуру інтерфейсу
майбутнього програмного продукту, створити прототип для веб-ресурсу або
програми, наочно представити алгоритм роботи програмного забезпечення та його
окремих функцій у вигляді блок-схем, мережевих та ієрархічних структур.
Створення структури сайту почалося з головної сторінки. Головна сторінка
мала на меті ознайомити користувачів з компанією та представити послуги, які надає
система. Звичайно сторінка має головне меню з переліком вкладок та логотипом
компанії, додатково в процесі розробки системи було додано кнопку для зв’язку та
кошик для замовлення пристроїв. Нижня частина системи має логотип, адресу,
декілька сторінок з інформацією для клієнтів та перелік соцмереж.
Також було придумано та використано робочу назву компанії, яка представляє
веб-орієнтовану інформаційну систему підбору рішень для управління розумним
будинком, а саме “SmartDwelling Solution Group”. В майбутньому назва може бути
замінена на іншу.
Головне меню системи має дві сторінки з випадаючим списком для пристроїв
та рішень. Пристрої представляють собою перелік категорій за якими можна
здійснити купівлю потрібного клієнту пристрою. Сторінка рішень пропонує чотири
категорії (бізнес, офіс, будинок, квартира), які представляють набір мінімальних
рішень для обраного клієнтом приміщення.
На рисунку 2.8 представлено прототип головної сторінки системи.
Наступним етапом було створення прототипу сторінки з пристроями по
категоріях, які можна переглянути та за бажанням купити. Клієнт має вибрати
46
необхідний пристрій, додати його до кошика і перейти до оформлення замовлення
(рисунок 2.9).
Рисунок 2.8 – Прототип головної сторінки
Рисунок 2.9 – Прототип сторінки з пристроями
47
Основною послугою компанії є надання мінімальних готових рішень. При
створені прототипу сторінки метою було зробити зручну навігацію по кожному
представленому рішенню, а також зрозуміле розміщення характеристик пристроїв
всередині кожного з них, щоб користувачу було інтуїтивно зрозуміло куди потрібно
натискати для отримання більш детальної інформації.
В процесі розробки системи дизайн та розміщення елементів на сторінках
видозмінювався відповідно до вимог власника веб-орієнтованої інформаційної
системи підбору рішень для управління розумним будинком.
На додачу створено сторінку з формою для замовлення, після відправки
заповненої форми з клієнтом зв’язується менеджер для обговорення деталей обраного
мінімального готового рішення (рисунок 2.10).
Рисунок 2.10 – Прототип сторінки з рішенями та формою замовлення
Для перегляду новин компанії на сайті створено спеціальну сторінку, де
розміщують всі статті, події та цікавинки з сфери розумних технологій. Сторінка
передбачає розміщення новин про співпрацю з іншими компаніями, які займаються
продажем розумних пристроїв для вдосконалення новоствореної інформаційної
системи, яка пропонує мінімальні рішення для певної категорії приміщення. При
натиснені на новину, користувач може прочитати детальну інформацію та
переглянути галерею зображень. Додатково на цій сторінці планується розміщення
банерів з рекламою партнерів та організацій з якими співпрацює компанія.
48
На рисунку 2.11 представлено прототип сторінки з новинами та перехід на
сторінку для прочитання більш детальної інформації.
Рисунок 2.11 – Прототип сторінки з новинами
2.4 Розробка діаграми варіантів використання
У мові моделювання UML, діаграма прецедентів (Use case diagram) або ж
діаграма варіантів використання дозволяє зрозуміти різноманітні ролі та їх взаємодію
з системою, акцентує увагу на функціональних вимогах системи, розглядаючи їх з
погляду користувача, проте не уточнює послідовність кроків. Для створення діаграми
потрібно користуватися спеціалізованими символами та зв'язками [19].
Діаграма варіантів використання розробляється на ранній стадії проєктування
системи та призначена для:
простого пояснення принципу роботи системи, створення та узгодження
технічного завдання;
визначення функціональних вимог системи (що система повинна робити);
49
створення основи для документації та проведення тестування.
Для розробки діаграми варіантів використання були визначені наступні актори:
Клієнт – користувач, який має мету познайомитись з готовими рішеннями
системи та за необхідності замовити їх або здійснити покупку пристрою;
Адміністратор – майстер, що виконує підтримку системи та займається
продажем товарів через адміністративну панель;
Менеджер – працівник, який приймає замовлення рішень та надає консультації
клієнтам.
Для кожного актора були визначені сценарії взаємодії з веб-орієнтованою
інформаційною системою підбору рішень для управління розумним будинком.
Перелік варіантів використання наступний:
− Перегляд інформації про компанію.
− Перегляд товарів (пристроїв).
− Перегляд готових рішень.
− Виконати купівлю товару.
− Отримати повідомлення від компанії.
− Заповнити форму замовлення готового рішення.
− Отримати зворотній зв’язок від менеджера.
− Отримати повідомлення про купівлю.
− Перегляд замовлень рішень та товарів.
− Редагування сайту.
− Отримати повідомлення про замовлення рішення.
Варіанти використання відповідають вимогам, що були визначені при розробці
структури ІС.
На рисунку 2.12 представлена діаграма варіантів використання для веб-
орієнтованої інформаційної системи підбору рішень для управління розумним
будинком.
50
Рисунок 2.12 – Діаграма варіантів використання
2.5 Проєктування структури бази даних
Проєктування структури бази даних є ключовим етапом у процесі розробки
будь-якої інформаційної системи. Правильно спроєктована база даних одразу
забезпечує ефективне зберігання та організацію даних. Це дозволяє зберігати
інформацію в структурованому форматі, полегшуючи пошук, оновлення та
видалення.
Зокрема, грамотно розроблена структура бази даних допомагає забезпечити
надійність даних. Це включає в себе застосування нормалізації для уникнення
дублювання даних та забезпечення цілісності, а також визначення зв’язків між
таблицями для забезпечення правильної залежності даних.
Також, структура бази даних має велике значення для продуктивності системи.
Правильно спроєктована база даних може підтримувати швидкий доступ до
інформації, оптимізувати запити та зменшувати час на обробку даних.
51
Крім того, грамотно спроєктована структура бази даних сприяє більш простій
підтримці та розширенню системи в майбутньому. Це дозволяє легко вносити зміни
до бази даних та забезпечувати масштабованість системи з ростом обсягу даних та
потреб користувачів.
Для створення бази даних веб-орієнтованої інформаційної системи підбору
рішень для управління розумним будинком обрано базу даних MySql з керуванням
через PhpMyAdmin.
У кваліфікаційній роботі бакалавра PhpMyAdmin підв’язаний до системи
управління контентом WordPress, що запускається через локальний сервер OSPanel
для роботи з базою даних MySQL (рисунок 2.13).
Рисунок 2.13 – PhpMyAdmin з керуванням базою даних MySql
PhpMyAdmin – це веб-додаток з відкритим вихідним кодом, реалізований на
мові PHP із графічним веб-інтерфейсом, призначений для управління базами даних
MySQL або MariaDB (рисунок 2.14). PhpMyAdmin дозволяє виконувати
адміністрування сервера MySQL, запускати SQL-запити, а також переглядати та
редагувати дані таблиць баз даних через веб-браузер, так як вже йде в комплекті з
локальним сервером OSPanel. Ця програма дуже популярна серед веб-розробників,
52
тому що дозволяє керувати базою даних MySQL за допомогою зручного інтерфейсу,
без необхідності використання SQL-команд. Це можна робити з будь-якого
комп'ютера, підключеного до Інтернету без додатково встановленого програмного
забезпечення.
Рисунок 2.14 – Веб-додаток для керування базою даних
Для реалізації інформаційної системи обрано CMS Wordpress. Дана система
управління контентом передбачає автоматичне створення таблиць, які
використовуються при розробці будь-якої системи. Це полегшує роботу з панеллю
адміністрування [7].
При стандартній інсталяції і налаштуванні CMS системи відразу необхідно
створити і підключити базу даних MySQL через веб-інтерфейс PhpMyAdmin. База
даних має стандартний вигляд. Під час інсталяції створюється початкова стандартна
база даних з таблицями, яка в процесі розробки наповнюється необхідними
таблицями від підключених до системи модулів.
Для проєктування потрібно створити модель даних, що дозволить визначити
необхідну інформацію та забезпечити повне керування та функціонування. База
даних повинна мати концептуальну схему даних, яка інтегруються в зручну для
користувачів базу даних.
53
База даних містить 57 таблиць, 10 з них є основними, які підключаються під час
стандартного інсталювання.
Візуальне відображення зв’язків між стандартними таблицями бази даних
представлене у вигляді схеми на рисунку 2.15
Рисунок 2.15 – Схема зв’язків між стандартними таблицями бази даних
При інсталюванні дистрибутиву CMS WordPress в кореневу папку веб-сайту на
локальному сервері та підключенні бази даних до системи, кожна таблиця має своє
ім’я та призначення, яке найчастіше відповідає назві створеної таблиці.
Перелік назв таблиць бази даних та їх призначення у веб-орієнтованій
інформаційній системі підбору рішень для управління розумним будинком
представлено в таблиці 2.1 [23].
54
Таблиця 2.1 – Перелік назв таблиць бази даних та їх призначення в ІС
Ім'я таблиці Призначення
wp_users Збереження даних про користувачів.
wp_usermeta Зберігає метадані всіх користувачів, що містяться в
таблиці wp_users.
wp_posts Запис інформації про всі створені таблиці та вміст
сторінок.
wp_comments Запис інформації про коментарі, залишені під
записами.
wp_links Записує інформацію про посилання у менеджері
посилань.
wp_options Зберігання записів тем і плагінів.
wp_termmeta Запис метаданих категорій постів, посилань та тегів.
wp_terms Запис категорій постів, посилань та тегів.
wp_terms_taxonomy Записує таксономічну структуру категорій постів,
посилань та тегів.
wp_terms_relationship Інформування про категорії та теги, що зберігаються в
таблиці wp_terms.
wp_commentmeta Зберігає метадані всіх коментарів на публікаціях.
wp_postmeta Зберігає метадані постів, посилань та тегів.
Висновки до розділу 2
У цьому розділі було здійснено аналіз технологій та обрано засоби реалізації
інформаційної системи. Крім того, описано додаткові функціональні модулі, а саме:
модуль електронної комерції WooCommerce, API-інтеграція платіжної системи
LiqPay та служби доставки Nova Poshta та модуль TelSender і WpForms для збору та
обробки замовлень за допомогою API-інтеграції з Телеграм ботом.
Спроєктовано структуру інформаційної системи через онлайн-програмне
забезпечення Draw.io.
55
Була розроблена Use Case діаграма з акторами для яких визначено сценарії
взаємодії з веб-орієнтованою інформаційною системою підбору рішень для
управління розумним будинком.
Спроєктовано базу даних, яка автоматично наповнюється після налаштування
та підключення обраних засобів реалізації кваліфікаційної роботи бакалавра.
Представлено таблицю з переліком назв таблиць бази даних та їх призначенням
у веб-орієнтованій інформаційній системі підбору рішень для управління розумним
будинком.
56
3 ПРАКТИЧНА РЕАЛІЗАЦІЯ
3.1 Архітектура веб-орієнтованої інформаційної системи підбору рішень
для управління розумним будинком
Веб-орієнтована інформаційна система підбору рішень для управління
розумним будинком складається з трьох частин, а саме адміністративної, клієнтської
та частини менеджера.
Адміністративна частина веб-сайту надає широкі можливості керування
контентом системи, дозволяючи додавати, редагувати та видаляти різноманітний
вміст, включаючи статичні та динамічні сторінки, розділи і блоки інформації. Крім
того, в цій частині існує можливість обробляти замовлення на придбання пристроїв
для розумного будинку. Не менш важливою функцією є можливість додавати,
редагувати та видаляти пристрої з різних категорій, що робить адміністрування
системи максимально гнучким та ефективним.
Клієнтський інтерфейс веб-сайту ретельно продуманий з точки зору
користувача. Ця частина пропонує інтуїтивно зрозумілу структуру розміщеної
інформації та логічні переходи між розділами та сторінками. Це забезпечує зручний
та приємний досвід користування, підвищуючи загальну ефективність взаємодії з
системою.
Частина менеджера включає в себе розділ з обробкою замовлень, що надходять
через Телеграм бот та обробляються у відповідній групі в мессенджері. Ця
функціональність дозволяє забезпечити швидке та ефективне управління
замовленнями, підвищуючи рівень обслуговування та задоволення потреб клієнтів.
Інформаційна система складається з наступних розділів:
− Головна сторінка;
− сторінка Пристрої – містить категорії: камери, безпека, датчики, освітлення;
− сторінка Рішення – містить категорії: бізнес, будинок, квартира, офіс;
− сторінка Новини;
− сторінка Замовити;
57
− сторінка кнопки Зв’язатися з нами;
− кошик (з відображенням суми вартості поміщених пристроїв в гривнях).
3.2 Програмна реалізація веб-орієнтованої інформаційної системи підбору
рішень для управління розумним будинком
Перед початком роботи обрано та налаштовано локальний сервер OSPanel. Далі
у відповідній папці програми створено доменне ім’я інформаційної системи (рис. 3.1).
Рисунок 3.1 – Вміст локального сервера OSPanel
Наступним етапом було завантаження дистрибутива з офіційного сайту
системи управління контентом WordPress, а також розпаковка вмісту завантаженого
архіва у створену папку з доменним ім’ям. Після цього проводилося налаштування
CMS системи та паралельне створення та підключення бази даних MySQL, з
управлінням через веб-інтерфейс PhpMyAdmin. Цей процес включав в себе ряд
кроків, таких як налаштування параметрів конфігурації, встановлення доступів та
інші дії, щоб забезпечити правильне функціонування системи та безпеку її даних.
(рисунок 3.2).
Після успішного налаштування основних програм розпочалася активна
розробка веб-орієнтованої інформаційної системи підбору рішень для управління
розумним будинком. Поступово, у процесі розвитку, до системи додавалися
додаткові функціональні модулі, спрямовані на виконання поставлених завдань та
58
забезпечення оптимального функціонування системи. Додатково через API-
інтеграцію в систему додано популярні сервіси, такі як: LiqPay, Nova Poshta і
Телеграм бот.
Рисунок 3.2 – Коренева папка з налаштованою системою
3.3 Використання веб-орієнтованої інформаційної системи підбору рішень
для управління розумним будинком
У цьому підрозділі буде детально розглянуто функціонал і можливості
інформаційної системи у форматі веб-сайту, яка включає в себе три основні частини.
Спершу буде розглянуто роботу клієнтської частини системи, де буде
проілюстровано взаємодію користувачів з системою, їхні можливості та доступні
функції.
Другий елемент, який буде розглянуто, – адміністративна частина системи. Тут
буде детально проаналізовано внутрішню роботу системи, включаючи процеси
додавання, редагування та видалення об'єктів, таких як статичні та динамічні
сторінки, розділи та пристрої в магазині.
59
Останній пункт, який буде висвітлено, – це частина менеджера, де буде
описано, як в системі обробляються замовлення готових мінімальних рішень, що
надходять через Телеграм-бот та інші аспекти управління системою. Кожен з цих
аспектів важливий для повного розуміння функціоналу та ефективного використання
інформаційної системи.
3.3.1 Клієнтська частина. При відкритті користувачем веб-сайту
інформаційної системи в браузері відображається головна сторінка з анімованими
картинками і назвою компанії та двома основними кнопками “Новини” і “Замовити”
(рисунок 3.3). У верхній частині сторінки розташовано головне меню, яке додатково
включає дві сторінки з випадаючим списком категорій, кнопку зв’язку та кошик з
відображенням суми вартості вибраних пристроїв у гривнях. Також тут присутній
логотип з фірмовою назвою веб-сайту.
Рисунок 3.3 – Головна сторінка
Головна сторінка веб-сайту надає можливість користувачу ознайомитися з
компанією, її профілем діяльності та основними послугами. Тут представлено готові
мінімальні рішення за чотирма категоріями, такі як бізнес, будинок, квартира, офіс
(рисунок 3.4). Додатково запропоновано пристрої за категоріями на які можна
перейти та придбати.
60
При переході в нижню частину веб-сайту користувач побачить футер з
логотипом, контактною інформацією, соцмережми та переліком сторінок для клієнта,
які допоможуть ознайомитися з правилами купівлі пристроїв.
Нижня частина веб-сайту присутня на кожній сторінці всієї веб-орієнтованої
інформаційної системи підбору рішень для управління розумним будинком (рис. 3.5).
Рисунок 3.4 – Блок готових мінімальних рішень за категоріями
Рисунок 3.5 – Нижня частина інформаційної системи
Наступна вкладка, доступна для користувача, – це сторінка “Пристрої”, що
надає можливість клієнту дослідити окремі пристрої за категоріями. Тут клієнт може
обрати будь-яку категорію пристроїв та переглянути перелік товарів, що відносяться
61
до обраної категорії (рисунок 3.6). У випадку, якщо користувач натисне на вкладку,
не обравши жодної з категорій, він автоматично переходить на сторінку з загальним
переліком пристроїв усіх категорій (рисунок 3.7).
Рисунок 3.6 – Сторінка з обраною категорією “Датчики”
Рисунок 3.7 – Загальний перелік пристроїв усіх категорій
Крім того, на сторінці пристроїв є можливість сортувати товари за різними
критеріями, такими як популярність, оцінки, останні публікації, ціна (від нижчої до
вищої або навпаки).
Після того, як користувача зацікавив якийсь із запропонованих пристроїв,
можна перейти до детального перегляду характеристик товару (рисунок 3.8 – 3.9).
62
Якщо обраний пристрій задовольняє, можна натиснути на кнопку “Додати в кошик”,
і товар автоматично додасться до кошика.
Також клієнт має змогу додати пристрій в кошик не переходячи на товар для
детального перегляду характеристик.
Рисунок 3.8 – Перегляд характеристики пристрою
Рисунок 3.9 – Перегляд характеристики пристрою
У правій верхній частині головного меню віджет кошика показуватиме суму
всіх обраних товарів. Для зручності клієнта достатньо навести курсор на віджет
корзини, і з'явиться випадаюче меню з кнопками для переходу в кошик або
оформлення замовлення (рисунок 3.10). При натисненні на кнопку переглянути
63
кошик клієнт перейде на сторінку з переліком обраних товарі і оформленням
замовленням (рисунок 3.11).
Рисунок 3.10 – Віджет корзини з випадаючим меню
Рисунок 3.11 – Перегляд кошика з випадаючого меню
Також клієнт може відразу натиснути на оформлення замовлення у
випадаючому списку і перейти до сторінки з формою, де потрібно ввести особисті
дані та обрати спосіб доставки і оплати (рисунок 3.12).
Клієнт може вибрати доставку до відділення Нової пошти, вказавши місто та
номер відділення, або скористатися кур'єрською доставкою, вказавши місто та
адресу. Оплата доступна через LiqPay, що підтримує онлайн-оплату через декілька
64
відомих банків України, або оплата готівкою при отриманні. Після введення всіх
даних клієнт має натиснути кнопку “Підтвердити замовлення”.
Рисунок 3.12 – Оформлення замовлення з випадаючого списку корзини
Наступною і основною послугою інформаційної системи є вклада “Рішення”.
Дана сторінка має випадаючий список за категоріями бізнес, будинок, квартира, офіс.
Сторінка “Рішення” представляє собою перелік готових мінімальних рішень для
перелічених приміщень. Клієнт може ознайомитися з кожним з них натиснувши
наприклад на категорію будинок (рисунок 3.13), обрати мінімальне готове рішення з
переліку та прочитати, що воно собою являє (рисунок 3.14).
Рисунок 3.13 – Категорія “Будинок” з вкладки “Рішення”
65
Рисунок 3.14 – Перелік мінімальних готових рішень в категорії “Будинок”
Після того, як користувач натисне на обрану систему, йому запропонується
ознайомитись з детальним описом системи, завданням та переліком пристроїв, які
входять в рішення (рисунок 3.15).
Рисунок 3.15 – Рішення для розумного освітлення
Додатково на сторінці кожного готового рішення присутнє навігаційне меню
для зручного користування системою. Після того, як клієнт ознайомиться з рішенням
і його все влаштовує, то він може замовити готове рішення натиснувши на кнопку
“Заповнити форму” і перейти до введення своїх даних та опису системи, яку клієнт
хоче замовити (рисунок 3.16).
66
Рисунок 3.16 – Навігаційне меню та кнопка заповнення форми
Для зручності користування вкладку для замовлення готового мінімального
рішення було додатково виведено в головне меню веб-орієнтовної інформаційної
системи. Замовлення готового рішення представлено у вигляді сторінки з інструкцією
та формою, яка після заповнення клієнтом відправляється менеджеру на опрацювання
(рисунок 3.17).
Рисунок 3.17 – Сторінка з формою замовлення готового рішення
Додаткого на головному меню присутня вкладка “Новин”, яка допоможе
користувачу ознайомитись з новинами в сфері розумних технологій, подій різних
партнерів і тд. (рисунок 3.18).
67
Рисунок 3.18 – Вкладка новин
Крім того, якщо в клієнта виникнуть питання в головному меню представлена
кнопка для зв’язку з компанією. При переході на неї необхідно ввести контактну
інформацію, або зателефонувати за вказаними контактами (рисунок 3.19).
Рисунок 3.19 – Форма зв’язку з компанією
3.3.2 Адміністративна частина. Для управління веб-орієнтованою
інформаційною системою веб-сайт має адмінпанель.
Для доступу до неї потрібно пройти авторизацію. Для входу в адмінпанель
необхідно зайти за спеціальним посиланням, яке має такий вигляд
68
http://smrtdwllng.ua/wp-admin/, далі адміністратор інформаційної системи повинен
ввести логін, або email, пароль користувача і натиснути увійти (рисунок 3.20).
Рисунок 3.20 – Форма авторизації в адміністративній панелі
Після входу в якості адміністратора користувач потрапляє на головну сторінку
адмінпанелі, де відображаються віджети останніх коментарів, статистика замовлень,
використані модулі та додаткова інформація про саму систему управління контентом
(рисунок 3.21).
Рисунок 3.21 – Головна сторінка адміністративної панелі
69
Користувач у ролі адміністратора інформаційної системи має можливість
додавати, редагувати та видаляти записи про готові мінімальні рішення. Крім того, до
обов'язків адміністратора входить налаштування торгівлі окремими пристроями.
Через адміністративну панель адміністратор наповнює магазин товарами, налаштовує
оплату та доставку, редагує наявність (рисунок 3.22). Окрім цього, адміністратор
повинен опрацьовувати замовлення пристроїв з метою подальшої відправки їх
клієнтам (рисунок 3.23).
Рисунок 3.22 – Сторінка для роботи з наповненням та редагуванням товарів
Рисунок 3.23 – Сторінка обробки замовлень
70
До обов'язків адміністратора також належить усунення недоліків в
інформаційній системі та робота з різноманітними модулями для забезпечення
найкращої працездатності створеної системи.
3.3.3 Частина менеджера. У веб-орієнтованій інформаційній системі підбору
рішень для управління розумним будинком передбачено частину, відповідальність за
яку покладена на менеджера, що відповідає за збір та обробку замовлень готових
мінімальних рішень.
Процес обробки замовлень виглядає наступним чином: клієнт робить
замовлення через відповідну форму на сторінці, яка може бути як формою зв’язку для
уточнення інформації (рисунок 3.24), так і формою для замовлення готового рішення
(рисунок 3.25). Після цього заповнені форми автоматично надсилаються у групу з
менеджером для подальшої обробки, використовуючи підключений до системи
Телеграм-бот (рисунок 3.26). Після надходження заповнених форм від клієнтів і
передачі їх у групу з менеджером через інтегрований Телеграм-бот, починається етап
подальшої обробки замовлень. Це включає опрацювання замовлень, вирішення будь-
яких питань або консультації з клієнтами. Для полегшення цього процесу, менеджер
може користуватись різноманітними інструментами, такими як Microsoft Excel або
іншими програмими, що дозволяють зручно відстежувати та аналізувати дані.
Рисунок 3.24 – Форма зв’язку для уточнення інформації
71
Рисунок 3.25 – Форма для замовлення готового рішення
Рисунок 3.26 – Група з менеджером для обробки форм
Ефективний процес збору та обробки замовлень є необхідною частиною будь-
якої інформаційної системи для управління розумним будинком. Правильно
налаштований механізм обробки замовлень дозволяє забезпечити швидке та якісне
обслуговування клієнтів, збільшує їх задоволеність та підвищує рівень довіри до
компанії. Такий підхід сприяє підвищенню ефективності бізнесу та допомагає
досягти бажаних результатів. Безперечно, надійний процес збору та обробки
72
замовлень є ключовим елементом успішної роботи компанії і дозволяє зберегти
конкурентну перевагу на ринку.
3.4 Особливості тестування веб-сайтів розроблених через CMS WordPress
Впровадження різноманітних функцій у CMS системи може призвести до
збільшення часу відгуку від відвідувачів, що може вплинути на їх перше враження
від сайту, незалежно від його якості. Тому особливу увагу слід приділити етапу
тестування, оскільки він дозволяє виявити можливі недоліки продукту та зберегти
його високу якість. Тестування має відбуватися на ранніх стадіях розробки і
продовжуватися на кожному етапі доопрацювання. Крім тестування навантаження
для забезпечення стабільної роботи сайту у будь-яких умовах, також важливо
проводити кросс-браузерне тестування та тестування зручності використання. Тільки
після проходження всіх тестів можна стверджувати, що продукт готовий до випуску
[20].
Функціональне тестування сайту – це вид перевірки, спрямований на
виявлення недоліків у роботі функцій програми. У процесі тестування
використовується чек-лист, який включає в себе наступні елементи:
– Перевірка коректності функціонування основних функцій веб-ресурсу.
– Виявлення посилань, які направляють до однієї сторінки.
– Коректність внутрішніх посилань.
– Перевірка коректності роботи користувацьких форм, таких як додавання
коментарів у блозі чи зворотній зв'язок.
– Перевірка полів та сторінок “авторизація” і “реєстрація”.
– Коректність процесу “Купівлі товару” (додавання до корзини).
– Перевірка можливості додавання, видалення та редагування інформації про
користувачів, товари та замовлення.
– Порівняння контенту на сайті з вимогами замовника.
73
Юзабіліті тестування є важливим етапом, спрямованим на оцінку зручності
сайту для користувача та легкість знаходження необхідної інформації. Чек-лист
тестування сайту на юзабіліті включає такі елементи:
– Навігаційне тестування: перевірка зрозумілості усіх сторінок, кнопок та полів
для користувача, а також доступність головної сторінки та меню з будь-якої
сторінки.
– Тестування контенту: перевірка наявності граматичних помилок,
інформативності контенту, адекватності розмірів та якості картинок і відео, а
також коректність розміщення заголовків.
– Оцінка зручності користування: аналіз зрозумілості структури веб-додатку та
наявність зайвих компонентів на сайті, проведення перевірки всіх сторінок.
Тестування продуктивності є критичним етапом для забезпечення оптимальної
роботи системи. Його ціль – перевірити, як система впорається з великою кількістю
одночасних запитів та збереже стабільну продуктивність під високим навантаженням.
При тесстуванні веб-сайту на CMS застосовується дуже рідко. Чек-лист тестування
на продуктивність включає наступні елементи:
– Проведення стрес-тестування для визначення реакції системи на надмірне
навантаження, перевірка її поведінки поза межами очікуваного робочого
навантаження.
– Вивчення реакції системи при збільшенні навантаження для визначення її меж
працездатності, так зване тестування на навантаження.
– Перевірка стабільності роботи системи протягом тривалого періоду, зокрема її
здатності функціонувати без перебоїв або збоїв.
– Тестування продуктивності ресурсу шляхом збільшення обсягів бази даних,
оцінка системи при великому об'ємі інформації.
– Вимірювання швидкості відгуку системи під час одночасного оброблення
великої кількості користувачів.
– Тестування швидкості завантаження сторінок для оцінки часу, необхідного для
відображення контенту.
74
– Перевірка правильності роботи системи при тривалому навантаженні для
оцінки її витривалості та стабільності.
UI-тестування перевіряє відповідність графічного інтерфейсу сайту заданим
стандартам та специфікаціям. Чек-лист для тестування інтерфейсу включає наступні
пункти:
– Перевірка відповідності стандартам графічного дизайну.
– Тестування на різних розмірах екрану для переконання, що інтерфейс
правильно відображається на різних пристроях і роздільних здатностях.
– Перевірка сумісності з усіма браузерами та їх версіями (кросбраузерність), щоб
переконатися, що сайт однаково працює у всіх середовищах.
– Тестування на портативних пристроях, таких як планшети та смартфони, для
переконання в коректності та зручності використання інтерфейсу на різних
пристроях.
– Локалізоване тестування для перевірки точності перекладу, відповідності
довжини текстових елементів та інших параметрів локалізації.
Тестування мобільної версії сайту – це процес перевірки правильності та
ефективності цієї адаптації, з метою забезпечення зручного та задовільного
користування веб-сайтом на мобільних пристроях. Якщо сайт має мобільну версію,
важливо перевірити його відповідно до наступного чек-листа:
– Перевірка сумісності з планшетами та смартфонами.
– Тестування навігації і переконання, що вона інтуїтивно зрозуміла.
– Визначення часу завантаження сайту та оптимізація його.
– Переконайтеся, що кнопки мають відповідний розмір для зручного
використання, навіть людьми з великими пальцями.
– Обов'язково оптимізуйте розміри зображень для швидкого завантаження.
– Використовуйте маркери для підкреслення важливої інформації.
– Уникайте використання Flash і спливаючих вікон.
– Протестуйте можливість набору номера телефону за допомогою одного кліка,
особливо для інтернет-магазинів.
75
Регресійне тестування – це форма тестування програмного забезпечення, яка
має на меті перевірку, чи не порушується раніше працюючий функціонал після
внесення змін або вдосконалень в коді програми. Основна мета регресійного
тестування полягає в тому, щоб впевнитися, що нові зміни не призводять до появи
нових помилок або не впливають на вже наявний функціонал програми. Для цього
використовуються автоматизовані тести, які допомагають ефективно перевіряти
широкий спектр функцій за короткий період часу. Регресійне тестування зазвичай
виконується на кожному етапі розробки програмного продукту, зокрема після
внесення змін у код, під час інтеграції нового функціоналу або патчів, а також перед
випуском нової версії продукту.
Процес тестування веб-сайту – складний етап, від якого залежить якість
функціонування ресурсу та враження від нього у користувачів. Цей етап можна
вважати гарантом зручності як для клієнта, так і для розробника. Проходження тестів
є ключовим, оскільки від його результатів залежить успішне завершення проєкту.
Ігнорування цього етапу може призвести до додаткових витрат часу та фінансових
ресурсів в подальшому.
3.5 Тестування веб-орієнтованої інформаційної системи підбору рішень для
управління розумним будинком
В кваліфікаційній роботі бакалавра для тестування веб-орієнтованої
інформаційної системи підбору рішень для управління розумним будиком
використано сервіс Chrome DevTools та адміністративну панель CMS WordPress.
Developer Tools – стандартний інструмент у браузері Google Chrome та інших,
який призначений для розробників та тестувальників з метою відладки коду. Цей
інструмент дозволяє переглядати код сторінки, журнали, час завантаження сторінки,
відображення на різних роздільних здатностях та виявлення помилок у коді і багато
іншого [21].
Для перевірки належного функціонування інформаційної системи з точки зору
користувача було застосоване ручне тестування програмного забезпечення без
76
використання автоматизованих тестів чи скриптів. У цей процес входить запуск
інформаційної системи, введення різних даних та перевірку результатів, з метою
гарантування правильного функціонування програмного забезпечення та виявлення
потенційних помилок та дефектів. Під час перевірок велося документування
перевірок через чек-лист, щоб передати результати тестування розробнику.
Під час тестування веб-сайтів розроблених на CMS, спершу необхідно
використати тестування кроссбраузерності та перевірку відображення фавікону.
Перевірка кроссбраузерності проведена в таких браузерах: Google Chrome,
Microsoft Edge, Opera. Перевірка сумісності з усіма браузерами та їх версіями
проведена успішно, веб-сайт однаково працює у всіх середовищах.
Фавікон – це іконка сайту, що зображується поряд з адресою веб-сайту у рядку
адреси, поруч із заголовком сторінки на вкладці або списку закладок браузера.
Результат перевірки успішний [22].
Наступний вид, який було використано, це функціональне тестування.
Перевірка функціонально тестування проведена успішно. Під час цього тестування
перевірено:
– коректність основних функцій веб-сайту;
– посилання на різні сторінки системи;
– коректність внутрішніх посилань;
– коректність роботи користувацьких форм, таких як зворотній зв’язок чи
замовлення;
– коректність процесу купівлі пристрою (додавання до кошика);
Далі для тестування було використано адміністративну панель та інструмент
DevTools. Використано такі види тестування, як: юзабіліті тестування, UI-тестування,
регресійне тестування.
Юзабіліті тестування допомогло перевірити наскільки зрозумілі сторінки,
кнопки та поля для користувача, крім того, доступність головної сторінки та меню з
будь-якої сторінки. Перевірити наявність граматичних помилок, інформативності
контенту, адекватності розмірів та якості картинок, а також коректність розміщення
заголовків.
77
При використанні UI-тестування використано інструмент DevTools. Проведено
тестування на різних розмірах екрану для переконання, що інтерфейс правильно
відображається на різних пристроях і роздільних здатностях (рисунок 3.27).
Рисунок 3.27 – Тестування різних розмірів екрану
Проведено тестування розміщеності товарів в магазині. Перевірка не пройшла,
елементи товарів розміщенні не рівно, кнопки і зображення товарів з’їжджає в різні
сторони. Було заведено баг-репорт для передачі його розробнику, щоб виправити
помилку (рисунок 3.28).
Рисунок 3.28 – Заведений баг-репорт на знайдену помилку
78
Після того, як розробник виправив знайдений баг було проведено регресійне
тестування, спрямоване на перевірку, чи не порушується раніше працюючий
функціонал після внесення змін або вдосконалень в коді програми. Перевірка
пройшла успішно, баг було виправлено і це не повпливало на раніше працюючий
функціонал інформаційної системи.
Також було використано тестування відповіді сервера. Під час цього тестування
перевірялося надсилання форми зв’язку, форми замовлення та оплата пристроїв. Це
потрібно для того, щоб перевірити коректність роботи підключених сервісів через
API. Перевірка пройшла успішно. Виведено код 200, що означає успішну обробку і
прийняття запиту клієнта на стороні сервера (рисунок 3.29).
Рисунок 3.29 – Результат перевірки відповіді сервера
В результаті тестування веб-орієнтованої інформаційної системи підбору
рішень для управління розумним будинком, сервісом Chrome DevTools та через
адміністративну панель CMS WordPress було створено чек-лист проведених
перевірок (рисунок 3.30), складено баг-репорт та передано розробнику для
виправлення та вдосконалення системи.
Під час тестування також виявлено і вирішено ряд потенційних проблем, що
допомогло підвищити якість та надійність системи перед її випуском.
79
Рисунок 3.30 – Чек-лист проведених перевірок
Висновки до розділу 3
В даному розділі представлено архітектуру інформаційної системи. Визначено,
що веб-орієнтована інформаційна система підбору рішень для управління розумним
будинком складається з трьох частин, таких як клієнтська, адміністративна та частина
менеджера. Додатково представлена програмна реалізація системи.
Детально описано використання кожної з частин інформаційної системи, а
також особливості тестування веб-сайтів розроблених на CMS WordPress.
Виконано тестування веб-орієнтованої інформаційної системи підбору рішень
для управління розумним будинком. Продемонстровано результати перевірок,
складено чек-лист та баг-репорт. Результати тестування дозволяють зробити
висновок про успішну розробку інформаційної системи та її належну роботу.
80
ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра досягнута. В ході її виконання
спроєктовано та розроблено веб-орієнтовану інформаційну систему підбору рішень
для управління розумним будинком.
Для досягнення поставленої мети в роботі виконувалися наступні завдання:
– поставлено та обґрунтувано задачу підбору рішень;
– виконано порівняльний аналіз існуючих систем підбору рішень для управління
розумним будинком, а саме: “Ajax Systems”, “Domos”, “Розумне рішення”,
“Меласк”;
– розроблено та підключено базу даних;
– обрано технології та програмно-технічні засоби для реалізації проєкту;
– розроблено веб-орієнтовану інформаційну систему підбору рішень для
управління розумним будинком та виконано її тестування.
Веб-орієнтована інформаційна система підбору рішень для управління
розумним будинком розроблена у вигляді веб-сайту через систему управління
контентом WordPress на локальному сервері OpenServer Panel. Створення та робота з
базою даних MySQL відбувалася із застосуванням веб-додатка для адміністрування
баз даних PhpMyAdmin.
Обрані технології відповідають всім вимогам, які стосуються функціональності
та характеристик цього типу програмного забезпечення.
Розроблена інформаційна система має зручний користувацький інтерфейс,
різноманітний асортимент готових рішень та ефективну комунікацію з клієнтом.
81
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Граф М.С., Кузьменко О.В. Архітектура, проєктування та безпека веб-
орієнтованих інформаційних та комп’ютерних систем: навчальний посібник.
Житомир: ДУЖП, 2020. 179 с.
2. Messenlehner B., Coleman J. Building Web Apps with WordPress: WordPress as an
Application framework. Tokyo, 2019. 532 p.
3. Суліма С.В., Скулиш М.А. Технології побудови web-орієнтованих систем:
метод. вказівки. Київ: КПІ, 2023. 54 с.
4. Бутенко Т.А., Сирий В.М. Інформаційні системи та технології: навчальний
посібник. Харків: ХНАУ, 2020. 209 с.
5. Сайт онлайн-програмного забезпечення draw.io. URL: https://www.drawio.com/
(дата звернення: 22.11.2023).
6. Офіційний сайт програмного забезпечення OSPanel. URL: https://ospanel.io
(дата звернення: 22.11.2023).
7. Офіційний сайт програмного забезпечення CMS WordPress. URL:
https://uk.wordpress.org/ (дата звернення: 01.02.2024).
8. Документація API WooCommerce. URL: https://woocommerce.github.io/code-
reference/index.html (дата звернення: 06.03.2024).
9. API ключі. URL: https://seo24.kiev.ua/rozrobka/shho-take-api/ (дата звернення:
06.03.2024).
10. Документація плагіна електронної комерції WooCommerce. URL:
https://uk.wordpress.org/plugins/woocommerce/ (дата звернення: 06.03.2024).
11. WooCommerce Hooks: Actions and filters. URL:
https://woo.com/document/introduction-to-hooks-actions-and-filters/ (дата
звернення: 06.03.2024).
12. Сайт компанії “Ajax Systems”. URL: https://ajax.systems/ua/ (дата звернення:
12.02.2024).
13. Сайт компанії “Domos”. URL: https://domos.ua/ (дата звернення: 12.02.2024).
82
14. Сайт компанії “Розумне рішення”. URL: https://www.rozumne-rishennya.com/
(дата звернення: 12.02.2024).
15. Сайт компанії “Меласк”. URL: https://melask.com.ua/ (дата звернення:
12.02.2024).
16. Офіційний сайт платіжної системи LiqPay. URL: https://www.liqpay.ua/uk (дата
звернення: 06.03.2024).
17. Офіційний сайт плагіна WebPlus Gateway для LiqPay на WooCommerce. URL:
https://uk.wordpress.org/plugins/webplus-liqpay-woocommerce/ (дата звернення:
06.03.2024).
18. Офіційний сайт служби доставки Нова пошта. URL: https://novaposhta.ua/ (дата
звернення: 06.03.2024).
19. Побудова UML діаграм. URL: https://dou.ua/forums/topic/40575/ (дата
звернення: 06.03.2024).
20. Тестування веб-сайтів. URL: https://brainlab.com.ua/uk/blog-uk/yak-testuvati-
veb-sayt-osnovn-etapi-poradi (дата звернення 07.04.2024).
21. Інструмент DevTools. URL: https://training.qatestlab.com/blog/technical-
articles/developer-tools-in-the-browser-console-tab/ (дата звернення 07.04.2024).
22. Фавікон веб-сайту. URL: https://uk.wikipedia.org/wiki/Favicon (дата звернення
07.04.2024).
23. Документація по таблицях бази даних WordPress. URL:
https://codex.wordpress.org/Database_Description (дата звернення 06.03.2024).
83
ДОДАТОК А
Затверджую
Зав. кафедри ІТП,
____________Тетяна ПРОКОПЕНКО
«____»____________2025 р.
ІНФОРМАЦІЙНА СИСТЕМА ПІДБОРУ РІШЕНЬ ДЛЯ УПРАВЛІННЯ
РОЗУМНИМ БУДИНКОМ
Специфікація
482.ЧДТУ. 52024-01
Листів 2
Розробник ____________________ Силенко Артем
Керівник ____________________ Катаєв Дмитро
Черкаси – 2025
84
482.ЧДТУ. 52024-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 52024-01 34 01 Інструкція користувача
482.ЧДТУ. 52024-01 12 01 Текст програми
85
ДОДАТОК Б
ІНФОРМАЦІЙНА СИСТЕМА ПІДБОРУ РІШЕНЬ ДЛЯ УПРАВЛІННЯ
РОЗУМНИМ БУДИНКОМ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482.ЧДТУ. 42024-01 34 01
Листів 8
Розробник _____________ Силенко Д.Д.
Черкаси – 2025
86
При відкритті користувачем веб-сайту інформаційної системи в браузері
відображається головна сторінка з анімованими картинками і назвою компанії та
двома основними кнопками “Новини” і “Замовити” (рисунок Б.1). У верхній частині
сторінки користувач побачить головне меню, яке включає дві сторінки з випадаючим
списком категорій, кнопку зв’язку та кошик з відображенням суми вартості вибраних
пристроїв у гривнях. Також тут присутній логотип з фірмовою назвою веб-сайту.
Рисунок Б.1 – Головна сторінка
Головна сторінка веб-сайту надає можливість користувачу ознайомитися з
компанією, її профілем діяльності та основними послугами. Тут користувач матиме
швидкий доступ до готових мінімальних рішень за чотирма категоріями, такі як
бізнес, будинок, квартира, офіс (рисунок Б.2). Додатково користувач зможе
переглянути пристрої за категоріями.
При переході в нижню частину головної сторінки і всього веб-сейту користувач
побачить футер з логотипом, контактною інформацією, соцмережми та переліком
сторінок для клієнта, які допоможуть ознайомитися з правилами купівлі пристроїв та
рішеннями за категоріями (рисунок Б.3). Користувач може натиснути на кожну зі
сторінок і перейти до перегляду детальної інформації.
87
Рисунок Б.2 – Перегляд готових рішень за категоріями
Рисунок Б.3 – Нижня частина головної сторінки
Наступна сторінка на яку може натиснути користувач, це сторінка “Пристрої”.
При переході користувач побачить перелік пристроїв за категоріями, які можна
відсортувати, а також натиснути на певний пристрій для перегляду детальної
характеристики (рисунок Б.4).
88
Рисунок Б.4 – Сторінка “Пристрої”
Користувач натискає “Додати в кошик”, щоб додати бажаний товар, а потім
може переглянути обрані товари та оформити замовлення, навівши на кошик.
На рис Б.5 зображено вигляд сторінки після натиснення кнопки “Переглянути
кошик”.
Рисунок Б.5 – Сторінка перегляду кошика
89
На цій же сторінці користувач може перейти до оформлення натиснувши
відповідну кнопку. Після натиснення, користувач перейде до сторінки із заповненням
особистих даних, вибором способу оплати та доставки (рисунок Б.6).
Рисунок Б.6 – Сторінка “Оформлення замовлення”
На рис Б.7 представлено онлайн оплату через платіжну систему LiqPay.
Рисунок Б.7 – Онлайн оплата через LiqPay
90
При переході на сторінку “Рішення” користувач може ознайомитись з
існуючими системами для різних типів приміщень. Після натиснення на певний тип,
користувач перейде до короткого опису сторінки і переліку запропонованих систем
для обраного типу (рисунок Б.8 – Б.9).
Рисунок Б.8 – Сторінка типу “Бізнес”
Рисунок Б.9 – Перелік систем для приміщення типу “Бізнес”
91
Після натиснення на обрану систему, можна ознайомитись з детальним описом
системи, завданням та переліком пристроїв, які входять в рішення (рис. Б.10). Після
того, як клієнт ознайомиться з рішенням і його все влаштовує, то він може замовити
готове рішення натиснувши на кнопку “Заповнити форму” (рис. Б.11).
Рисунок Б.10 – Система розумного освітлення
Рисунок Б.11 – “Кнопка заповнити форму”
92
На рис Б.12 представлено сторінку з формою замовлення рішення та детальною
інструкцією, як правильно її заповнити.
Рисунок Б.12 – Сторінка з формою замовлення
Наступна сторінка “Новини”, вона пропонує користувачам ознайомитись із
новинами компанії (рисунок Б.13).
Рисунок Б.13 – Сторінка “Новини”
93
Остання сторінка з якою може ознайомитись користувач виконана у вигляді
кнопки в головному меню. При натисненні на неї користувач може заповнити коротку
форму для того, щоб в подальшому з ним зв’язався менеджер компанії і надав
консультацію (рисунок Б.14). Додатково на сторінці присутня карта та години роботи
компанії (рисунок Б.15).
Рисунок Б.14 – Сторінка зв’язку з компанією
Рисунок Б.15 – Сторінка з картою та годинами роботи
94
ДОДАТОК В
ІНФОРМАЦІЙНА СИСТЕМА ПІДБОРУ РІШЕНЬ ДЛЯ УПРАВЛІННЯ
РОЗУМНИМ БУДИНКОМ
Текст програми
482. ЧДТУ. 52024-01 12 01
Листів 3
Розробник _____________ СИЛЕНКО Артем
Черкаси – 2025
95
Фрагмент коду для сторінки “Пристрої”
.woocommerce-js ul.products li.product a img {
width: auto;
height: 200px;
display: block;
margin: auto;
box-shadow: none;
}
h2.woocommerce-loop-product__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
height: 40px;
}
<link rel="icon" href="http://smrtdwllng.ua/wp-content/uploads/2024/02/cropped-
cropped-Снимок7-192x192.jpg" sizes="192x192" />
<link rel="apple-touch-icon" href="http://smrtdwllng.ua/wp-
content/uploads/2024/02/cropped-cropped-Снимок7-180x180.jpg" />
<meta name="msapplication-TileImage" content="http://smrtdwllng.ua/wp-
content/uploads/2024/02/cropped-cropped-Снимок7-270x270.jpg" />
<style id="wp-custom-css">
Фрагмент коду розміщення елементів на головній сторінці
.woocommerce ul.products li.product.desktop-align-left, .woocommerce-page ul.products
li.product.desktop-align-left {
text-align: left;
}
.woocommerce ul.products li.product.desktop-align-left .star-rating,
.woocommerce ul.products li.product.desktop-align-left .button,
.woocommerce-page ul.products li.product.desktop-align-left .star-rating,
96
.woocommerce-page ul.products li.product.desktop-align-left .button {
margin-left: 0;
margin-right: 0;
}
@media(max-width: 921px){
.woocommerce ul.products li.product.tablet-align-left, .woocommerce-page ul.products
li.product.tablet-align-left {
text-align: left;
}
.woocommerce ul.products li.product.tablet-align-left .star-rating,
.woocommerce ul.products li.product.tablet-align-left .button,
.woocommerce-page ul.products li.product.tablet-align-left .star-rating,
.woocommerce-page ul.products li.product.tablet-align-left .button {
margin-left: 0;
margin-right: 0;
}
}@media(max-width: 544px){
.woocommerce ul.products li.product.mobile-align-left, .woocommerce-page ul.products
li.product.mobile-align-left {
text-align: left;
}
.woocommerce ul.products li.product.mobile-align-left .star-rating,
.woocommerce ul.products li.product.mobile-align-left .button,
.woocommerce-page ul.products li.product.mobile-align-left .star-rating,
.woocommerce-page ul.products li.product.mobile-align-left .button {
margin-left: 0;
margin-right: 0;
}
Фрагмент коду сторінки “Замовити”
<!DOCTYPE html>
97
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<title>Замовити – SmartDwelling</title>
<meta name='robots' content='max-image-preview:large' />
<link rel='dns-prefetch' href='//stats.wp.com' />
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel="alternate" type="application/rss+xml" title="SmartDwelling » стрічка"
href="http://smrtdwllng.ua/feed/" />
<link rel="alternate" type="application/rss+xml" title="SmartDwelling » Канал
коментарів" href="http://smrtdwllng.ua/comments/feed/" />
<script>