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/9892| Title: | Користувацька частина web-орієнтованої системи онлайн комунікації |
| Authors: | Рудницька , Юлія Володимирівна Каліта, Михайло Іванович |
| Keywords: | користувацька частина;React.js;чат-бот;система онлайн-комунікації;фреймворк;Tailwind CSS;Fetch API |
| Issue Date: | 11-Jun-2026 |
| Abstract: | У кваліфікаційній роботі бакалавра розроблено користувацьку частину web-орієнтованої системи онлайн комунікації. В якості інструменту для розробки вибрано фреймворк React.js (версії бібліотек для керування інтерфейсами), що виступає як базовий архітектурний каркас клієнтської частини системи. Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає 90 сторінок, в тому числі вступ, 3 розділи, висновки, додаток та список використаних джерел. Робота містить 11 рисунків та 50 інформаційних джерел. Перший розділ кваліфікаційної роботи присвячений опису понять «системи онлайн комунікації» та «чат-бот». Здійснено комплексний теоретикометодологічний аналіз стану, тенденцій та перспектив розвитку webорієнтованих систем онлайн-комунікацій, а також інтегрованих у них технологій віртуальних співрозмовників, здійснено аналітичний огляд найпоширеніших типів таких систем. Другий розділ присвячений проектуванню користувацьку частину webорієнтованої системи онлайн комунікації, зокрема чатботу: визначено ключові принципи проєктування користувацької частини web-орієнтованої системи онлайн комунікації, правила ефективного застосування web-дизайну та здійснено дослідження засобів розробки web-орієнтованої системи онлайнкомунікації. У третьому розділі детально описано процес комплексної реалізації, проєктування дизайну та тестування користувацької частини web-орієнтованої системи онлайн комунікації. Описано процес розробки та інтерфейс системи онлайн-комунікації. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/9892 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Каліта _WEB-2211.pdf Restricted Access | 1.08 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет Інформаційних Технологій і Систем_____________________________________
(повна назва)
Кафедра Інформаційних Технологій Проектування__________________________________
(повна назва)
Освітньо-кваліфікаційний рівень Бакалавр_________________________________________
(назва)
Спеціальність 126 – Інформаційні системи і технології_______________________________
(шифр і назва)
ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
___________ Тетяна ПРОКОПЕНКО
«_____» ______________20___ року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА
_____________________ Каліта Михайло Іванович ____________________
(прізвище, ім’я, по батькові)
1. Тема роботи Користувацька частина web - орієнтованої системи онлайн комунікації
____________________________________________________________________
Керівник роботи Рудницьк Ю.В., PhD____________________________________________,
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
Затверджено наказом Черкаського державного технологічного університету від «_12_»
__березня_______ 2026 року N56/03-03________
2. Строк подання здобувачем роботи _____26.05.2026___________________________
3. Вихідні дані до роботи: Загальна інформація про об’єкт дослідження, інформація про
меоди та засоби розробки, структура БД, аналіз аналогів, базові технічні характеристики
розроблюваної системи.
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Вступ________________________________________________________________________
1. Опис предметної області. ___ ___________________________________________________
2. Аналіз існуючих аналогів._____________________________________________________
3.Постановка задачі _________________________________________________
4.Проєктування користувацької частини web - орієнтованої системи онлайн комунікації
5. Розробка архітектури системи__________________________________________________
6. Обґрунтування технології та засобів реалізації.___________________________________
7.Вибір засобів розробки.__________________________________________
8.Рзробка дизайну користувацької частини web - орієнтованої системи онлайн комунікації
Висновки._____________________________________________________________________
Перелік джерел та посилань._____________________________________________________
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів)
Презентація кваліфікаційної роботи____________________________________
6. Консультанти розділів роботи
Прізвище, ініціали, та посада
Розділ Підпис, дата
консультанта
Завдання
Завдання прийняв
видав
7. Дата видачі завдання ______________________________________________
КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ Назва етапів кваліфікаційної роботи Примітка
етапів роботи
1 Опис предметної області.
2 Аналіз існуючих аналогів
3 Постановка задачі
Проєктування користувацької частини
4 web - орієнтованої системи онлайн
комунікації
5 Розробка архітектури системи.
Обґрунтування технології та засобів
6 реалізації.
7 Вибір засобів розробки.
8 Застосування стеку технологій
Розробка дизайну користувацької
9 частини web - орієнтованої системи
онлайн комунікації
10 Висновки
Здобувач вищої освіти _______________ Михайло КАЛІТА
Керівник роботи _______________________ Юлія РУДНИЦЬКА
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
Пояснювальна записка
до кваліфікаційної роботи бакалавра
на тему: «Користувацька частина web-орієнтованої системи онлайн
комунікації»
Виконав студент 4 курсу,
групи Web-2211,
спеціальності 126 –
Інформаційні системи та
технології,
освітня програма – Web-
технології, Web-дизайн,
Каліта М.І.
Керівник PhD, Рудницька Ю.В.
Рецензент Провідний науковий співробітник
науково-дослідного відділу
випробувань безпілотних наземних
систем науково-дослідного управління
випробувань безпілотних та
автоматизованих систем Державного
науково-додослідного інституту
випробувань і сертифікації озброення
та військової техніки.
к.т.н. Лада Н.В.
Черкаси – 2026 року
АНОТАЦІЯ
У кваліфікаційній роботі бакалавра розроблено користувацьку частину
web-орієнтованої системи онлайн комунікації. В якості інструменту для
розробки вибрано фреймворк React.js (версії бібліотек для керування
інтерфейсами), що виступає як базовий архітектурний каркас клієнтської
частини системи.
Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає
90 сторінок, в тому числі вступ, 3 розділи, висновки, додаток та список
використаних джерел. Робота містить 11 рисунків та 50 інформаційних джерел.
Перший розділ кваліфікаційної роботи присвячений опису понять
«системи онлайн комунікації» та «чат-бот». Здійснено комплексний теоретико-
методологічний аналіз стану, тенденцій та перспектив розвитку web-
орієнтованих систем онлайн-комунікацій, а також інтегрованих у них
технологій віртуальних співрозмовників, здійснено аналітичний огляд
найпоширеніших типів таких систем.
Другий розділ присвячений проектуванню користувацьку частину web-
орієнтованої системи онлайн комунікації, зокрема чатботу: визначено ключові
принципи проєктування користувацької частини web-орієнтованої системи
онлайн комунікації, правила ефективного застосування web-дизайну та
здійснено дослідження засобів розробки web-орієнтованої системи онлайн-
комунікації.
У третьому розділі детально описано процес комплексної реалізації,
проєктування дизайну та тестування користувацької частини web-орієнтованої
системи онлайн комунікації. Описано процес розробки та інтерфейс системи
онлайн-комунікації.
Ключові слова: система онлайн-комунікації, чат-бот, користувацька
частина, фреймворк, React.js, Tailwind CSS, Fetch API.
ABSTRACT
A user part of a web-based online communication system. has been
developed in the bachelor's thesis. The React.js framework (versions of libraries for
managing interfaces) was chosen as the development tool, which acts as the basic
architectural framework of the client part of the system.
The volume of the explanatory note of the bachelor's qualification work is
90 pages, including the introduction, 3 sections, conclusions, appendix and the list
of used sources. The work contains 11 drawings and 50 references.
The first section of the qualification work is devoted to the description of
the concept of "online communication systems" and "chatbot". A comprehensive
theoretical and methodological analysis of the state, trends, and prospects for the
development of web-oriented online communication systems, as well as virtual
interlocutor technologies integrated into them, was carried out, and an analytical
review of the most common types of such systems was carried out.
The second section is devoted to designing the user part of a web-oriented
online communication system, in particular a chatbot: the key principles of
designing the user part of a web-oriented online communication system are defined,
the rules for the effective use of web design are defined, and research into the means
of developing a web-oriented online communication system is carried out.
The third section describes in detail the process of comprehensive
implementation, design planning and testing of the user part of a web-oriented
online communication system. The development process and interface of the online
communication system are described.
Keywords: online communication system, chatbot, user interface,
framework, React.js, Tailwind CSS, Fetch API.
ЗМІСТ
ВСТУП.................................................................................................................. 4
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ.................................................................7
1.1 Опис предметної області.......................................................................7
1.2 Огляд та аналіз існуючих аналогів.....................................................13
1.3 Постановка задачі................................................................................ 23
1.4 Висновки до розділу 1.........................................................................26
2 ПРОЄКТУВАННЯ КОРИСТУВАЦЬКОЇ ЧАСТИНИ WEB-
ОРІЄНТОВАНОЇ СИСТЕМИ ОНЛАЙН КОМУНІКАЦІЇ.............................28
2.1 Ключові принципи проєктування користувацької частини web-
орієнтованої системи онлайн комунікації.......................................................28
2.2 Правила ефективного дизайну користувацької частини web-
орієнтованої системи онлайн комунікації.......................................................33
2.3 Вибір засобів розробки web-орієнтованої системи онлайн-
комунікації..........................................................................................................36
2.4 Висновки до розділу 2.........................................................................42
3 РОЗРОБКА КОРИСТУВАЦЬКОЇ ЧАСТИНИ WEB-ОРІЄНТОВАНОЇ
СИСТЕМИ ОНЛАЙН КОМУНІКАЦІЇ............................................................43
3.1 Основні етапи розробки користувацької частини web-орієнтованої
системи онлайн комунікації..............................................................................43
3.2 Фреймворк React.js для розробки користувацької частини web-
орієнтованої системи.........................................................................................45
3.2.1 Особливості застосування React.js..........................................45
3.2.2 Налаштування Vite...................................................................47
3.2.3 Створення візуальної частини.................................................49
3.4 Інтерфейс користувацької частини web-орієнтованої системи онлайн
комунікації..........................................................................................................54
ЧДТУ 262244.001 ПЗ
Зм. Лист № докумемента Підпис Дата
Розроб. Каліта М.І. Літ. Лист Листів
Перев. Рудницька Ю.В. Користувацька частина web - Н 2 77
Реценз орієнтованої системи онлайн ФІТІС,
Н. .контр. комунікації.
кафедра ІТП, Web-2211
Затв. Прокопенко Т.О. Пояснювальна записка
3.5 Тестування............................................................................................ 64
3.6 Висновки до розділу 3.........................................................................67
ВИСНОВКИ....................................................................................................... 68
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ..........................................................70
ДОДАТОК A 482 ЧДТУ 20000-01 Користувацька частина web-орієнтованої
системи онлайн комунікації. С пецифікація 76
Арк.
ЧДТУ 262244.001 ПЗ 3
Змн. Арк. № докум. Підпис Дата
ВСТУП
Комунікація є основою соціалізації людини, формування суспільних
інститутів та розвитку бізнесу. Комунікація є критично важливою, оскільки
соціальна інтеграція забезпечує обмін інформацією та дозволяє людині
відчувати приналежність до спільноти та координувати спільні дії. Передача
знань через комунікаційні канали. досвід поколінь трансформується у науковий
та культурний прогрес. Ефективне управління забезпечує у бізнесі та державі
шляхом чіткої комунікації та є головним інструментом прийняття рішень та
контролю виконуваних завдань. Еволюція комунікації реалізовано від людини
до технологій на основі розвитку цифровізації, традиційне спілкування (тет-а-
тет) трансформувалося в комп'ютерно-посередницьку комунікацію. Саме тому
месенджери та чатботи стали природним продовженням цієї людської потреби.
Вони вирішують дві головні проблеми сучасного суспільства, одна з яких
подолання відстані та часу: асинхронне та синхронне спілкування у веб-
системах доступне цілодобово з будь-якої точки планети. Інша - оптимізація
когнітивного навантаження, тобто чатботи беруть на себе рутинні інформаційні
запити, звільняючи час людини для складніших творчих та стратегічних
комунікацій.
Дослідження месенджерів та чатботів у сучасній науці сформувалося в
окремий потужний напрям, що лежить на стику інформаційних технологій,
маркетингу, соціології та менеджменту. Науковці розглядають ці інструменти не
просто як програмний код, а як головний міст для взаємодії між цифровим
суспільством і комерційними структурами [1].
Актуальність роботи визначається високим рівнем розвитку сучасних
інформаційних технологій і засобів комунікацій, зокрема системами миттєвого
обміну повідомлень або месенджерами та їх широким застосуванням для
задоволення потреб онлайн користувачів і бізнесу, що сприяє, використанню
інноваційних технологій із штучним інтелектом, спрямованих на забезпечення
швидкого обміну інформацією між користувачами та бізнес організаціями в
Арк.
ЧДТУ 262244.001 ПЗ 4
Змн. Арк. № докум. Підпис Дата
сучасних месенджер чатах для розв'язання будь-яких питань консультування,
забезпечення цілодобової онлайн доступності та одночасного обслуговування
мільйонів користувачів, і зумовлює необхідність створення віртуальних
співрозмовників-консультантів, зокрема чат-ботів (ЧБ).
Сучасні чатботи, створені на базі останніх досягнень у галузі штучного
інтелекту, трансформують традиційні підходи до взаємодії, роблячи процес
отримання інформації максимально швидким, ефективним та позитивним для
сприйняття. Завдяки інтеграції передових нейромережевих технологій ці
інтелектуальні помічники викликають глибокий інтерес як у звичайних
користувачів, так і у представників комерційного сектору, які прагнуть
оптимізувати свої операційні процеси за допомогою інновацій. Головна
практична цінність таких систем полягає в їхній здатності забезпечити
безперервну цілодобову присутність бізнесу в цифровому просторі, гарантуючи
миттєве надання якісних консультацій та повноцінне обслуговування клієнтів у
режимі реального часу без вихідних чи географічних обмежень.
Об’єктом дослідження є процес верифікації, обробки та передачі
інформації в цифровому середовищі за допомогою веб-орієнтованих систем
онлайн-комунікацій.
Предметом дослідження є технологічні особливості, алгоритми та
практичні методи розробки й застосування чатботів і месенджерів для
оптимізації цілодобового онлайн-обслуговування користувачів та підвищення
ефективності бізнес-комунікацій.
Метою кваліфікаційної роботи бакалавра є проєктування та практична
реалізація користувацької частини web-орієнтованої інформаційної системи
онлайн комунікації із інтеграцією чатботів на базі штучного інтелекту для
забезпечення цілодобового та ефективного обслуговування користувачів і
оптимізації бізнес-процесів.
Для досягнення поставленої мети кваліфікаційної роботи бакалавра
необхідно розв’язати наступні задачі:
Арк.
ЧДТУ 262244.001 ПЗ 5
Змн. Арк. № докум. Підпис Дата
проаналізувати предметну область розробки;
дослідити потреби сучасних користувачів і бізнесу у сфері оперативної
онлайн-підтримки та консультування;
здійснити порівняльний аналіз засобів розробки веб-орієнтованої
системи і визначити доцільність використання програмних інструментаріїв;
розробити архітектуру, інтерфейс та алгоритми взаємодії чатбота з
користувачами;
реалізувати програмний продукт із використанням сучасних методів та
програмних заслбів.
Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає
90 сторінок, в тому числі вступ, 3 розділи, висновки, додаток та список
використаних джерел. Робота містить 22 рисунка та 50 інформаційних джерел.
Арк.
ЧДТУ 262244.001 ПЗ 6
Змн. Арк. № докум. Підпис Дата
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Опис предметної області
Веб-орієнтована система онлайн-комунікацій — це програмний
комплекс, який працює через інтернет-браузер і дозволяє користувачам
обмінюватися інформацією в реальному часі без встановлення додаткових
програм на комп'ютер чи телефон.
Основними видами таких систем є наступні [2]:
месенджери та чати, що забезпечують швидкий обмін
текстовими повідомленнями та файлами (наприклад, веб-версії
Telegram, WhatsApp);
платформи відеозв'язку для проведення відеоконференцій та
вебінарів безпосередньо через браузер (наприклад, Google Meet, Zoom
Web Client);
корпоративні портали. тобто системи для командної роботи,
що поєднують чати, завдання та документи (наприклад, Slack, Microsoft
Teams, Bitrix24);
форуми та блоги, тобто платформи для асинхронного
обговорення тем (наприклад, Reddit, WordPress).
Головними перевагами таких систем є:
кросплатформенність, що забезпечує роботу на будь-якій
операційній системі (Windows, macOS, Linux, Android, iOS);
доступність, коли потрібен лише браузер та стабільне інтернет-
з'єднання;
просте оновлення, при якому розробники змінюють код на сервері,
користувачі миттєво отримують нову версію.
економія ресурсів, що передбачає відсутність потреби у
потужному залізі для збереження даних на пристрої.
Арк.
ЧДТУ 262244.001 ПЗ 7
Змн. Арк. № докум. Підпис Дата
Успіхи в галузі штучного інтелекту разом з розповсюдженням систем для
обміну миттєвими повідомленнями або месенджер чатів стимулюють розвиток
ЧБ. ЧБ називаємо програми, що використовують обмін повідомленнями як
інтерфейс, для виконання певних завдань, і які здатні відповідати на запитання
користувачів і самостійно задавати їх, таким чином підтримуючи діалог і
імітуючи мовну поведінку людини. ЧБ використовуються в різних сферах для
розв'язання різноманітних задач для онлайн користувачів і потреб бізнес
організацій. ЧБ отримали особливо широке застосування на мобільних
пристроях, в яких обмін повідомленнями є основою мобільного досвіду
користувачів [3].
Поняття ЧБ походить від двох англійських слів: to chat – невимушена
розмова в мережі Інтернет, bot (robot) – скорочено робот, з чого випливає, що це
роботи, призначені для здійснення комунікацій з користувачами в мережі
Інтернет, які виконують дії відповідно до закладеного сценарію. В основі
технології сучасних ЧБ лежать такі інформаційно-комунікаційні технології як
штучний інтелект, нейронні мережі, що дозволяє наближувати комунікації ЧБ
до людського віртуального спілкування та вирішувати з їх допомогою
комерційні та маркетингові задачі. ЧБ, виконуючи роль програм-консультантів,
здатні оперативно реагувати на автоматизовані запити та стандартні команди
користувачів. В їхньому арсеналі передбачений безперервний процес
самонавчання, який досягається завдяки діяльності нейронної мережі [4].
Залежно від виконуваних функцій ЧБ поділяють на наступні групи [5; 6; 7]:
інформаційно-розважальними ЧБ називають автоматизовані
програми, що імітують мовну поведінку людини та виконують
інформаційну або розважальну функції, наприклад, бот, який повідомляє
користувачам прогноз погоди, бот-гра, бот, який надає інформацію про
певний захід, здійснює пошук і покупку квитків на концерти, спектаклі,
вистави, повідомляє про останні новини в певній галузі тощо;
Арк.
ЧДТУ 262244.001 ПЗ 8
Змн. Арк. № докум. Підпис Дата
e-commerce ЧБ називають автоматизовані програми, що виконують
комерційну функцію шляхом пропонування товарів для продажу та
можливості здійснення оплати товарів безпосередньо через інтерфейс ЧБ;
customer service ЧБ називають автоматизовані програми, що надають
користувачам можливість отримати кваліфіковану онлайн допомогу
представників служби підтримки певного бізнесу чи організації для
обговорення проблем, які виникли у користувача, онлайн консультування
та інших онлайн послуг, які надаються представниками служби підтримки;
ботами-утилітами називають автоматизовані сервісні програми, які
полегшують користування іншими програмами, наприклад, бот-
перекладач, бот-калькулятор;
службовими ботами називають автоматизовані програми, призначені
для виконання допоміжних завдань, таких як облік учасників чату,
забезпечення безпеки учасників чату, підключення додаткових функцій у
разі застосування певної команди тощо.
Залежно від того, наскільки складно запрограмовані ЧБ, поділяємо їх на дві
великі групи [8; 9]:
Скриптові ЧБ, які працюють за попередньо підготовленими
командами або скриптами. Застосовуючи даний тип ЧБ, користувачеві
потрібно вибрати одну з запропонованих команд на кожному кроці
спілкування для того, щоб визначити наступний крок і продовжити процес
взаємодії з віртуальним асистентом.
Розумні ЧБ побудовані за допомогою технічних можливостей
штучного інтелекту. Замість підготовлених відповідей, даний тип ЧБ надає
відповідь у вигляді пропозицій на основі запропонованої користувачем теми
та наявної інформації в базі даних або знань. Використання можливостей
штучного інтелекту розумними ЧБ робить їх більш гнучкими в процесі
онлайн спілкування за рахунок розпізнавання введеного користувачами
Арк.
ЧДТУ 262244.001 ПЗ 9
Змн. Арк. № докум. Підпис Дата
текстового висловлювання, та також вдосконалення за рахунок постійного
навчання моделі.
Узагальнена класифікація ЧБ представлена у Таблиці 1.1 [10].
Таблиця 1.1
Узагальнена класифікація ЧБ
За За можливостями застосування
способом
програмув за функціями, що реалізує чатбот за призначенням
ання
скриптові служб інформац e- сustomer боти- інформа консу контр р
ові ійно- comm service утиліт ційно- льтую олюю у
розважал erce боти и пошуко чі чі т
ьні боти ві и
н
н
і
розумні автоматизовані функції
спілкування з користувачем
Згідно з поглядами експертів в галузі ЧБ виконують наступні функції [11]:
Забезпечення безперервного функціонування сервісу
обслуговування клієнтів 24/7. ЧБ виступають у ролі віртуальних роботів,
які не виснажуються фізично і можуть продовжувати функціонувати та
виконувати певні команди цілодобово.
Масовість опрацювання та роботи з даними. На відміну від людей-
асистентів, які можуть спілкуватися лише з однією людиною в один
момент часу, ЧБ можуть здійснювати онлайн комунікації з мільйонами
людей одночасно.
Персоналізація процесу комунікацій з новими та існуючими
онлайн користувачами. Технологія ЧБ забезпечує ефект персонального
спілкування з кожним онлайн користувачем, який надсилає повідомлення
у месенджер чат за рахунок використання імені користувача, зберігання у
Арк.
ЧДТУ 262244.001 ПЗ 10
Змн. Арк. № докум. Підпис Дата
базах даних іншої персональної інформації, здійснених покупок чи інших
дій користувачів, отриманих раніше рекомендацій тощо, на основі чого ЧБ
буде надавати більш точні та релевантні відповіді під час наступної сесії
спілкування з користувачами.
Впорядкування процесу здійснення покупок користувачами та
надання консультацій під час цього процесу. Використання ЧБ дозволяє
направити користувачів і підказати їм, які дії необхідно виконати для
здійснення покупки чи отримання релевантної консультативної
інформації. Більшість онлайн ЧБ мають меню, з пунктів якого користувачі
можуть з легкістю вибрати необхідний розділ, тему тощо. ЧБ оснащені
штучним інтелектом, здатні розпізнавати текстові повідомлення
користувачів, і на основі проаналізованих даних надавати необхідну
інформацію.
Автоматизація повторюваних завдань. Люди виконують часто
повторювані завдання менш продуктивно, ніж автоматизовані системи, які
не потребують часу на перерви та сон. ЧБ автоматизують виконання
рутинних задач і допомагають працівникам зосереджуватися на більш
складних і креативних завданнях замість рутинних.
Протягом останнього десятиліття значно зросла популярність додатків
обміну миттєвими повідомленнями. Месенджерами називають програми обміну
миттєвими повідомленнями, які сьогодні найчастіше використовуються у
вигляді додатків для смартфонів. Відрізняється спілкування через програми
месенджери від комунікації по електронній пошті тим, що в них швидкість
передачі повідомлень значно вище [12].
Месенджери мають наступні переваги в порівнянні з іншим каналами
комунікацій [13]:
- push-повідомлення або спливаючі вікна на екрані мобільного пристрою,
які інформують про важливі події тощо. Використання push-повідомлень
Арк.
ЧДТУ 262244.001 ПЗ 11
Змн. Арк. № докум. Підпис Дата
забезпечує їх швидку доставку до користувачів і збільшує вірогідність
того, що повідомлення буде відкрито і прочитано;
- приватність і персоналізованість. На відміну від спілкування
представниками бізнесу з клієнтами в соціальних мережах, месенджери
забезпечують достатній рівень приватності для особистих звернень;
- різноманітний контент. Месенджери дозволяють обмінюватися не тільки
повідомленнями, але і фото, відео, геолокацією та також здійснювати
безкоштовні дзвінки;
- ціна. Месенджери дозволяють відправляти повідомлення, дзвонити,
проводити відеоконференції абсолютно безкоштовно, в порівнянні з
відправкою SMS і MMS. Єдиною вимогою є наявність доступу до
Інтернету;
- месенджери охоплюють великий відсоток аудиторії. В месенджерах
представлена можливість створювати групові чати, що корисно з метою
популяризації та зручно для масової розсилки повідомлень.
Месенджер додатки в свою чергу дали поштовх популяризації ІПА і ЧБ,
тобто комп’ютерних програм, які використовуються для надання різних послуг
онлайн користувачам через безпосереднє спілкування в месенджер чатах і інших
каналах онлайн комунікацій, використовуючи можливості штучного інтелекту.
ІПА і ЧБ використовуються в якості віртуального співрозмовника, здатного до
повторення і відтворення письмових чи голосових повідомлення користувачів,
надаючи запрограмовану відповідь на задані дії. В силу того, що контакт з ЧБ є не
тільки цікавим, але і корисним заняттям для людини, з точки зору отримання
нової інформації і рішення споживчих завдань, варто відзначити, що інтернет-
аудиторія прийняла їх появу доброзичливо. Проаналізувавши наукові джерела,
ми виявили, що люди надають перевагу спілкуванню з ЧБ, ніж дзвінкам у центри
сервіс-підтримки клієнтів. Основною причиною дискомфорту виявляється
виникнення ситуації, де клієнтам часто доводиться витрачати час на телефонну
Арк.
ЧДТУ 262244.001 ПЗ 12
Змн. Арк. № докум. Підпис Дата
чергу до оператора, який може мати обмежені знання чи доступ до виконання
певних задач, які необхідні для вирішення проблеми клієнта [14].
На відміну від інших каналів онлайн комунікацій, які виконують функцію
лише пасивної доставки інформації до користувачів, ІПА забезпечують
реактивну та активну допомогу користувачам для виконання різноманітних
завдань. Реактивна допомога включає в себе споживання інформації онлайн-
користувачами, таку як звіт про погоду, надання користувачам інформацію про
промо-акції, нові товари, консультування щодо загальних питань по певній темі,
допомога у виконанні завдань, наприклад, резервування ресторану, оформлення
замовлення, бронювання готелю, квитків тощо. Активна допомога включає в
себе нагадування користувачеві про майбутні події або рекомендації конкретних
продуктів або послуг відповідно до профілю користувача та відповідної
контекстної інформації, наприклад, час і місцезнаходження певної події,
організації тощо. Таким чином, використання ЧБ забезпечує підвищення довіри
користувачів до певного бізнесу чи бренду внаслідок постійного зв'язку та
надання допомоги в будь-який час і день тижня [14].
1.2 Огляд та аналіз існуючих аналогів
Історія розвитку віртуальних співрозмовників бере свій початок у другій
половині двадцятого століття, коли виникли перші спроби автоматизації
мовленнєвої взаємодії між людиною та комп'ютером. Як зазначено в [15],
визначним віховим етапом у цій царині стало створення у 1966 році професором
Массачусетського технологічного інституту Джозефом Вейценбаумом
програми «Еліза». Цей програмний комплекс, названий на честь персонажа п'єси
Бернарда Шоу, фактично започаткував клас технологій, які сьогодні іменуються
чатботами. В основі функціонування «Елізи» лежав алгоритм пасивного
слухання, що імітував роботу роджеріанського психотерапевта. Програма
здійснювала пошук ключових слів у реченнях користувача, після чого
переформатовувала отримані фрази у зустрічні запитання за допомогою
Арк.
ЧДТУ 262244.001 ПЗ 13
Змн. Арк. № докум. Підпис Дата
заздалегідь визначених синтаксичних шаблонів. Попри повну відсутність
справжнього розуміння контексту чи когнітивної обробки даних, цей винахід
продемонстрував вражаючий психологічний ефект, оскільки користувачі
схильні були наділяти машину людськими якостями та емоціями. Саме «Еліза»
заклала фундаментальні принципи текстової комунікації «людина-машина»,
ставши концептуальним базисом для подальшої еволюції систем автоматизації,
збору та обміну інформацією, які згодом трансформувалися в сучасні
інтелектуальні платформи (рис.1.1).
Рисунок 1.1 Приклад розмови між Елізою та людиною
Штучний інтелект вже закріпив лідируючі позиції в світі таргетованої
реклами та надання рекомендацій користувачам мережі Інтернет, однак він
також стрімко еволюціонує в соціальних мережах у вигляді технології ЧБ, які
стають помічниками брендів і бізнесу в швидкому та ефективному вивченні
онлайн споживачів, підвищенні показників їх залученості в брендований
контент і розумінні мотивів їхньої поведінки на кожному етапі прийняття
рішення про покупку товару та користуванні певною послугою [16].
Арк.
ЧДТУ 262244.001 ПЗ 14
Змн. Арк. № докум. Підпис Дата
Питання застосування ЧБ для задоволення бізнес-потреб набула значної
актуальності внаслідок гострої необхідності створення умов для забезпечення
віртуального онлайн спілкування бізнесу та швидкого обміну інформацією зі
своїми потенційними та існуючими споживачами в месенджер чатах,
забезпечення послуг онлайн консультування, можливості одночасного
обслуговування мільйонів онлайн клієнтів, доступності бізнесу онлайн 24/7
тощо. Для вирішення наведених проблем та задоволення бізнес-потреб в нагоді
стає технологія ЧБ, яку багато експертів вважають майбутнім сфери
обслуговування та управління клієнтами [17].
Впровадження технологій віртуальних співрозмовників відкриває
суттєві стратегічні перспективи для суб'єктів господарювання, які прагнуть
масштабувати власну цифрову присутність та зміцнити ринкові позиції у
глобальній мережі. У сучасних економічних реаліях інтелектуальні чатботи
стають каталізатором комерційного успіху, оскільки забезпечують гнучку
автоматизацію процесів взаємодії з цільовою аудиторією. Потенціал
застосування цих інструментів охоплює практично всі бізнес-вертикалі, де
критично важливою є організація оперативної онлайн-комунікації зі
споживачами. Завдяки здатності миттєво обробляти типові запити,
персоналізувати клієнтський досвід та супроводжувати користувача на всіх
етапах маркетингової лійки, чатботи нівелюють часові та географічні бар'єри.
Це дозволяє підприємствам суттєво підвищити конверсію, оптимізувати
операційні витрати на утримання штату підтримки, а також сформувати лояльну
клієнтську базу за рахунок забезпечення безперервного та якісного сервісу в
режимі реального часу.
Комерціалізації технологій штучного інтелекту розпочалася в середині
2010-х років. Зазначений період ознаменувався зміною парадигми взаємодії з
клієнтами, коли провідні світові бренди почали інтегрувати свої сервіси
безпосередньо в екосистеми месенджерів. Корпорація HP успішно
автоматизувала процеси замовлення розхідних матеріалів та діагностики
Арк.
ЧДТУ 262244.001 ПЗ 15
Змн. Арк. № докум. Підпис Дата
техніки через віртуальних помічників, флористичний гігант 1-800-Flowers став
одним із перших, хто реалізував повноцінну діалогову комерцію у Facebook
Messenger, дозволивши замовляти доставку квітів за допомогою кількох
текстових команд, а медіаконгломерат CNN радикально змінив підхід до
дистрибуції контенту, запропонувавши користувачам персоналізовані стрічки
новин на основі їхніх індивідуальних уподобань.
Цей масштабний корпоративний рух став можливим саме завдяки
стратегічним рішенням найбільших технологічних гігантів, які трансформували
власні закриті розробки у публічні інфраструктурні рішення. Створення
відкритих платформ та інструментаріїв розробки програмного забезпечення
такими лідерами ринку, як Microsoft із їхнім Bot Framework, Facebook, Google з
платформою Dialogflow, Amazon та IBM із системою Watson, повністю
нівелювало поріг входження для розробників. Замість створення складних
лінгвістичних алгоритмів з нуля, бізнес отримав доступ до потужних хмарних
обчислювальних ресурсів та готових інструментів обробки природної мови. Це
спровокувало глобальний технологічний бум, перетворивши чатботи з
експериментальних маркетингових інструментів на фундаментальний елемент
сучасної корпоративної ІТ-архітектури, який дозволяє будь-якому підприємству
розгортати інтелектуальні системи обслуговування на базі передових моделей
машинного навчання [18].
У контексті архітектури сучасних веб-орієнтованих систем онлайн-
комунікацій відбулася відмова від концепції ізольованих чатботів на користь
створення інтегрованих комунікаційних екосистем. Провідні розробники та
компанії інтегрують інтелектуальних помічників безпосередньо у внутрішнє
ядро корпоративних чатів, хелпдеск-систем та платформ спільної роботи.
Яскравим прикладом такого підходу є платформа Slack AI (рис.1.2), яка
функціонує всередині корпоративного месенджера та дозволяє користувачам
миттєво генерувати підсумки тривалих обговорень у каналах, шукати відповіді
за архівами повідомлень і автоматизувати рутинні робочі процеси.
Арк.
ЧДТУ 262244.001 ПЗ 16
Змн. Арк. № докум. Підпис Дата
Рисунок 1.2. Інтерфейс користувача Slack AI.
Аналіз інтеграції штучного інтелекту в сучасні веб-орієнтовані системи
онлайн-комунікацій на прикладі інструменту Slack AI дозволяє виділити низку
суттєвих технологічних переваг та критичних недоліків, які безпосередньо
впливають на ефективність корпоративної взаємодії.
Перевагами Slack AI є наступні [19]:
оптимізація часу на опрацювання інформації. Інструмент
здатний миттєво генерувати структуровані підсумки тривалих текстових
обговорень у каналах, що дозволяє користувачам швидко входити в курс
справ без необхідності перечитувати сотні пропущених повідомлень;
інтелектуальний контекстний пошук. На відміну від
стандартного пошуку за ключовими словами, ШІ-асистент розуміє
природну мову і здатний знаходити релевантні відповіді, документи та
експертів усередині компанії на основі аналізу всього архіву комунікацій.
Арк.
ЧДТУ 262244.001 ПЗ 17
Змн. Арк. № докум. Підпис Дата
автоматизація щоденних звітів. Система дозволяє створювати
персоналізовані щоденні дайджести (recap) за обраними каналами,
виділяючи головні рішення, дедлайни та призначені завдання;
безшовна інтеграція в інтерфейс. Користувачеві не потрібно
перемикатися на зовнішні ШІ-сервіси, оскільки всі функції генерації
контенту та аналізу доступні безпосередньо у вікні чату веб-орієнтованої
платформи;
високий рівень корпоративної безпеки. Розробники
гарантують, що внутрішні дані компанії, на яких навчається та працює
локальний ШІ, ізольовані всередині контуру організації і не
використовуються для навчання публічних моделей.
Недоліки Slack AI наступні:
залежність від культури ведення чатів. Якщо працівники компанії
ведуть хаотичну комунікацію, припускаються багатьох помилок або
обговорюють різні робочі завдання в одному каналі без чітких тредів,
точність та якість генерації підсумків алгоритмом суттєво знижується;
проблема «галюцинацій» штучного інтелекту. Як і будь-яка мовна
модель, Slack AI може некоректно інтерпретувати складний контекст,
іронію чи специфічний професійний жаргон, створюючи хибні висновки,
які потребують додаткової перевірки людиною;
висока вартість впровадження. Функціонал ШІ доступний лише як
платне додаткове розширення до преміальних корпоративних тарифних
планів, що створює значне фінансове навантаження на малий та середній
бізнес;
обмежена підтримка мов. Якість семантичного аналізу,
розпізнавання контексту та генерації відповідей для мов із меншим
обсягом навчальних даних (зокрема для української) може поступатися
ефективності обробки англомовного корпоративного контенту;
Арк.
ЧДТУ 262244.001 ПЗ 18
Змн. Арк. № докум. Підпис Дата
відсутність автономного прийняття рішень: інструмент функціонує
виключно як інформаційний асистент і не здатний самостійно виконувати
складні дії у сторонніх інтегрованих системах без прямого підтвердження
користувача.
Подібну модель реалізовано в системі Microsoft Copilot для Teams
(рис.13.), де штучний інтелект виступає повноцінним учасником онлайн-
комунікації, здатним у реальному часі фіксувати ключові тези
відеоконференцій, формувати списки завдань для команди та аналізувати
тональність бізнес-листування.
Рисунок 1.3. Інтерфейс Microsoft Copilot для Teams [20].
У сегменті клієнтської підтримки та зовнішніх комунікацій лідерами
стали такі платформи, як Intercom із їхнім Ші-асистентом Fin, а також Zendesk
AI. Ці системи є повноцінними веб-орієнтованими омніканальними
платформами, які об’єднують чати з сайту, месенджери та електронну пошту в
єдиний інтерфейс для операторів, де штучний інтелект бере на себе першу лінію
підтримки. Вони здатні самостійно вирішувати до половини складних
користувацьких запитів, використовуючи внутрішню базу знань компанії, і
безшовно передавати діалог живому менеджеру лише у критичних ситуаціях.
Для розробників, які створюють унікальні веб-комунікації з нуля, стандартом
Арк.
ЧДТУ 262244.001 ПЗ 19
Змн. Арк. № докум. Підпис Дата
стали відкриті фреймворки на кшталт LangChain або LlamaIndex у поєднанні з
протоколами реального часу WebSockets, що дозволяє проектувати гнучкі
інтерактивні чат-кімнати, де штучний інтелект взаємодіє з багатьма
користувачами одночасно, забезпечуючи миттєвий обмін структурованою
інформацією.
Intercom Mobile SDK [21] є прикладом використання галузевого
стандарту (OMNI-channel платформи) для інтеграції чату підтримки та ШІ-бота
в мобільні додатки. Цей інструмент дозволяє розробникам не створювати
інтерфейс чату з нуля, а вбудувати готове, оптимізоване вікно комунікації
(рис.1.4).
Рисунок 1.4. Інтерфейс Intercom Mobile SDK.
Переваги Intercom SDK наступні:
швидкість інтеграції та низький поріг входження. Набір інструментів
розробника (SDK) дозволяє розгорнути повноцінне вікно чату всередині
мобільного додатка за допомогою кількох рядків коду, мінімізуючи
витрати часу на розробку інтерфейсу користувача (UI) з нуля;
Арк.
ЧДТУ 262244.001 ПЗ 20
Змн. Арк. № докум. Підпис Дата
глибока інтеграція інтелектуального бота Fin AI. Платформа
пропонує нативний доступ до власного ШІ-асистента, який здатен
самостійно закривати до половини вхідних запитів, використовуючи
надану базу знань, без залучення людського ресурсу.
омніканальність та єдиний інтерфейс модератора. Повідомлення
користувача з мобільного додатка миттєво потрапляють у веб-орієнтовану
панель оператора (Shared Inbox), де менеджер бачить усю історію
взаємодії незалежно від того, де писав клієнт — у додатку, на сайті чи в
соцмережах;
контекстуалізація користувацьких даних. SDK автоматично збирає
технічні метадані клієнта (версія операційної системи, модель пристрою,
історія дій у додатку, останні помилки), що дозволяє оператору миттєво
розуміти технічний контекст проблеми без додаткових запитань;
кросплатформенна підтримка. Наявність стабільних бібліотек для
React Native, Flutter, а також нативних iOS (Swift) та Android (Kotlin)
забезпечує гнучкість розробки під будь-яку архітектуру мобільного
застосунку;
інструменти утримання (In-app Messages): можливість надсилати
персоналізовані push-сповіщення, маркетингові опитування чи підказки
безпосередньо у вікно чату мобільного додатка на основі сегментації
користувачів [22, 23].
Недоліки Intercom SDK:
висока та непрогнозована вартість використання. Цінова політика
Intercom побудована не лише на кількості робочих місць операторів, але й
на кількості успішних вирішень питань штучним інтелектом (модель per-
outcome) та обсягу активних клієнтів, що робить витрати на
масштабування системи критично високими для стартапів та малого
бізнесу;
Арк.
ЧДТУ 262244.001 ПЗ 21
Змн. Арк. № докум. Підпис Дата
збільшення розміру фінального додатка (App Size Overhead). Імпорт
масивного пакета SDK додає суттєву вагу до фінального файлу інсталяції
додатка (.apk або .ipa), що може негативно вплинути на конверсію
завантажень користувачами;
обмежені можливості кастомізації дизайну. Попри підтримку
базової зміни кольорів та логотипів під бренд компанії, архітектура SDK
обмежує глибоку зміну структури інтерфейсу чату, змушуючи
розробників підлаштовуватися під стандартні шаблони Intercom.
складність процесу передачі діалогу людині (Handoff). У
специфічних або заплутаних сценаріях ШІ-бот Fin може запізно реагувати
на вимогу користувача переключити чат на живого оператора, викликаючи
роздратування у клієнта.
поверхнева аналітика та звіти. Вбудована система аналітики
мобільних взаємодій поступається спеціалізованим продуктам мобільної
аналітики, оскільки фокусується суто на метриках повідомлень і не
дозволяє будувати глибокі воронки поведінки користувачів;
повна залежність від сторонньої хмарної інфраструктури. Усі
конфіденційні дані клієнтів та листування проходять і зберігаються на
серверах Intercom, що унеможливлює використання цього SDK у проектах
із підвищеними вимогами до безпеки (наприклад, у банківських чи
медичних мобільних додатках, де заборонено передавати дані третім
сторонам) [24, 25].
Аналіз практичного кейсу українських компаній показує застосування в
ПриватБанк (Чатбот «Помічник» у Viber, Telegram та додатку Приват24), що
орієнтований на фінансові операції та безпеку. Бот успішно автоматизує першу
лінію підтримки, допомагаючи клієнтам блокувати картки, перевіряти баланс,
отримувати виписки чи дізнаватися курси валют. Складні запити, пов'язані з
шахрайством або кредитними лімітами, система миттєво перенаправляє на
живих операторів у вебінтерфейс. Нова Пошта (Віртуальний асистент у
Арк.
ЧДТУ 262244.001 ПЗ 22
Змн. Арк. № докум. Підпис Дата
месенджерах та мобільному додатку) є класичний приклад логістичного бота
для автоматизації збору та видачі інформації. Користувачі взаємодіють із ним
для швидкого трекінгу посилок за номером накладної, розрахунку вартості
доставки, пошуку найближчого відділення або створення електронної
накладної, що мінімізує навантаження на фізичні відділення та call-центри.
Київстар та lifecell (Зоряна, Біп та інтегровані боти в месенджерах) є
телекомунікаційні гіганти, що використовують ботів для управління тарифними
планами та технічної підтримки. Користувачі можуть перевірити залишок
гігабайтів, підключити додаткові послуги або налаштувати інтернет за
текстовими підказками штучного інтелекту, який аналізує профіль абонента в
реальному часі.
Спільні архітектурні особливості цих рішень українських компаній
базуються на використанні омніканальної моделі. Вони не обмежуються одним
каналом зв'язку, а інтегрують логіку бота одночасно у популярні публічні
месенджери (Telegram, Viber). Застосовуються власні мобільні додатки (через
спеціалізовані мобільні SDK, подібні до Intercom), а також вебсторінки компаній
(у вигляді плаваючих віджетів). При цьому вся історія листування та технічні
дані клієнта стікаються в єдину централізовану вебсистему для операторів, що
забезпечує безперервність комунікації: користувач може почати діалог із ботом
у Telegram на комп'ютері, а продовжити з живим оператором у мобільному
додатку на смартфоні.
1.3 Постановка задачі
Web - орієнтованої системи онлайн комунікації представляє чат
підтримки для мобільного додатка з інтегрованим чатботом. У такому форматі
система розглядається як омніканальна платформа, де клієнтська частина
реалізована у вигляді мобільного інтерфейсу, а серверна частина та панель
модератора — у вигляді веб-орієнтованого сервісу.
Архітектура системи «Мобільний чат + ЧТ-бот + Веб-панель» матиме
три ключові компоненти:
Арк.
ЧДТУ 262244.001 ПЗ 23
Змн. Арк. № докум. Підпис Дата
мобільний клієнт (Клієнтська підтримка). Іінтерфейс чату всередині
мобільного додатка (iOS/Android), через який користувач надсилає
текстові запити, прикріплює скріншоти помилок та отримує push-
сповіщення про нові відповіді;
центральний веб-сервер (API Gateway & WebSockets). Приймає
повідомлення з мобільного додатка, керує чергою запитів, перенаправляє
їх на ШІ або на оператора, а також забезпечує миттєву доставку
відповідей;
веб-панель оператора (Dashboard). Веб-орієнтоване робоче місце для
менеджерів підтримки. Тут оператори бачать список усіх активних
діалогів із мобільних додатків, історію спілкування користувача з ботом та
аналітику завантаженості системи.
Оптимальним технічним стеком для розробки мобільним фронтендом є
React Native або Flutter. Використання цих кросплатформених фреймворків є
ідеальним для дипломної роботи, оскільки дозволяє написати один код чату
одразу для iOS та Android, суттєво економлячи час.
Вибір кросплатформених фреймворків для реалізації мобільного клієнта
є найбільш обґрунтованим архітектурним рішенням. Технології React Native
та Flutter дозволяють подолати головну проблему нативної розробки —
необхідність створення двох паралельних кодових баз (на Swift для iOS та на
Kotlin/Java для Android), що подвоює витрати часу та потребує різних стеків
технологій. Застосування концепції «Single Codebase» (єдиного вихідного
коду) дозволяє бакалавру сфокусуватися на бізнес-логіці чату, інтеграції з
сервером через WebSockets та налаштуванні взаємодії з ШІ-ботом,
забезпечуючи при цьому ідентичний візуальний вигляд та високу
продуктивність інтерфейсу на обох операційних системах.
Для глибокого обґрунтування вибору конкретної технології
порівняльний аналіз фреймворків для реалізації чату підтримки розглянуто
Арк.
ЧДТУ 262244.001 ПЗ 24
Змн. Арк. № докум. Підпис Дата
через призму розробки комунікаційного інтерфейсу, оскільки розробляється
користувацька частина.
React Native (від корпорації Meta) базується на мові програмування
JavaScript (або TypeScript) та бібліотеці React. Головна перевага для
інтерфейсу чату полягає у використанні нативних компонентів операційної
системи. Коли користувач бачить список повідомлень або поле введення
тексту, React Native рендерить реальні нативні елементи iOS та Android. Це
спрощує інтеграцію сторонніх аналітичних систем та мобільних SDK
(наприклад, того ж Intercom чи Firebase для push-сповіщень). Оскільки
більшість веб-орієнтованих систем мають бекенд на Node.js або фронтенд на
React, вибір React Native дозволяє розробнику використовувати одну мову
(JavaScript/TypeScript) для всього проекту (Full-Stack підхід), що мінімізує
когнітивне навантаження.
Flutter (від корпорації Google) використовує мову програмування Dart
та унікальний підхід до рендерингу. На відміну від React Native, Flutter не
звертається до нативних системних компонентів, а самостійно малює кожен
піксель інтерфейсу за допомогою потужного графічного рушія (Impeller /
Skia). Для інтерфейсу мобільного чату це забезпечує ідеальну плавність
анімацій (до 120 кадрів на секунду) під час гортання великих масивів
текстових повідомлень, завантаження медіафайлів чи появи графічних
елементів бота. Flutter має багату вбудовану бібліотеку віджетів (Material
Design та Cupertino), що дозволяє без додаткових зусиль створити сучасне,
естетичне вікно чату, яке виглядатиме абсолютно однаково як на старому
Android-смартфоні, так і на новому iPhone.
Незалежно від обраного фреймворку, архітектура мобільного
фронтенду в частині чату підтримки має забезпечувати виконання кількох
критично важливих технічних вимог:
1. Асинхронний менеджмент стану (State Management). Оскільки
повідомлення від ШІ-бота або оператора можуть надходити в будь-який
Арк.
ЧДТУ 262244.001 ПЗ 25
Змн. Арк. № докум. Підпис Дата
момент, додаток повинен миттєво оновлювати екран. Для цього в React
Native використовують Redux Toolkit або Zustand, а у Flutter — Bloc або
Provider. Вони відповідають за динамічне додавання нових об'єктів
повідомлень у масив та автоматичне прокручування екрана чату вниз.
2. Оптимізація довгих списків. Чати підтримки накопичують велику історію
листування. Щоб додаток не споживав занадто багато оперативної пам'яті
пристрою та не гальмував, застосовуються механізми лінивого
завантаження та перевикористання елементів (компоненти
FlashList/FlatList у React Native або ListView.builder у Flutter), які рендерять
на екрані лише ті повідомлення, які безпосередньо бачить користувач у
цей момент.
3. Обробка мережевого з'єднання (Offline First). У мобільних мережах зв'язок
часто переривається. Фронтенд повинен мати локальне схожість
(наприклад, AsyncStorage/MMKV для React Native або Hive/Isar для
Flutter), щоб зберігати історію чату локально. Якщо користувач надсилає
повідомлення у тунелі або під час збою мережі, інтерфейс має відобразити
статус «надсилається» (годинничок) та автоматично відправити його через
WebSocket-клієнт одразу після відновлення стабільного інтернет-сигналу.
1.4 Висновки до розділу 1
Комунікація є фундаментальним аспектом людської життєдіяльності,
соціокультурного поступу та координації бізнес-процесів. Зі зміною
технологічного укладу традиційні канали трансформації знань переросли у
комп'ютерно-посередницьку комунікацію (CMC). Сучасні веб-орієнтовані
системи онлайн-комунікацій стали природним продовженням цієї еволюції,
забезпечивши кросплатформеність, миттєвий обмін даними за допомогою
протоколів реального часу (WebSockets, WebRTC) та доступність сервісів через
стандартні інтернет-браузери без необхідності встановлення додаткового
програмного забезпечення.
Арк.
ЧДТУ 262244.001 ПЗ 26
Змн. Арк. № докум. Підпис Дата
Ретроспективний аналіз показав, що діалогові системи пройшли
тривалий шлях еволюції — від першого текстового симулятора «Еліза» (1966
р.), заснованого на синтаксичних шаблонах і дзеркальних лінгвістичних
алгоритмах, до сучасних інтелектуальних платформ. Інтеграція новітніх
досягнень у галузі штучного інтелекту, зокрема методів обробки природної
мови (NLP) та генеративних великих мовних моделей (LLM), дозволила
створити новий клас чатботів. Вони покликані позитивно вплинути на процес
отримання інформації, автоматизувати рутинні операції та забезпечити
цілодобову (24/7) присутність суб'єктів господарювання в цифровому просторі.
В першому розділі кваліфікаційної роботи було здійснено комплексний
теоретико-методологічний аналіз стану, тенденцій та перспектив розвитку веб-
орієнтованих систем онлайн-комунікацій, а також інтегрованих у них
технологій віртуальних співрозмовників (чатботів), здійснено аналітичний
огляд найпоширеніших типів таких систем.
Арк.
ЧДТУ 262244.001 ПЗ 27
Змн. Арк. № докум. Підпис Дата
2 ПРОЄКТУВАННЯ КОРИСТУВАЦЬКОЇ ЧАСТИНИ WEB-
ОРІЄНТОВАНОЇ СИСТЕМИ ОНЛАЙН КОМУНІКАЦІЇ
2.1 Ключові принципи проєктування користувацької частини web-
орієнтованої системи онлайн комунікації
Інтернет та соціальні медіа перетворили системи онлайн-комунікації з
простих інструментів передачі тексту на повноцінні платформи для спільного
мислення та генерації ідей.
Сучасний інтерфейс має підтримувати цей процес, оскільки люди більше
не просто обмінюються репліками, а створюють колективний інтелектуальний
продукт у реальному часі.
Коли користувач заходить у чат, щоб розвинути думку, система повинна
мінімізувати "когнітивне навантаження". Це означає, що інтерфейс не має
відволікати від суті розмови. Натомість він стає гнучким середовищем, де кожне
повідомлення є елементом великого конструктора. Дизайн такої системи
базується на принципі контекстуальності [26]: користувач бачить історію
зародження ідеї через багаторівневі гілки коментарів (threads), що дозволяє
глибше занурюватися в окремі аспекти проблеми, не засмічуючи загальний
простір спілкування.
Ефективний розвиток думки неможливий без мультимедійності, тому
сучасна клієнтська частина інтегрує інструменти інтерактивної взаємодії
безпосередньо у вікно чату. Користувачі можуть миттєво перетворити текстове
обговорення на сесію на спільній маркерній дошці (whiteboard), прикріпити
динамічний прототип або записати коротке відеоповідомлення, якщо текст не
передає емоційного забарвлення ідеї. Система адаптується під тип контенту,
забезпечуючи безшовний перехід від пасивного читання до активної
сотворчості.
Крім того, інтерфейс має виступати інтелектуальним помічником, який
допомагає структурувати хаотичний потік думок. Веб-система може
автоматично тегувати ключові концепції, підсвічувати важливі висновки,
Арк.
ЧДТУ 262244.001 ПЗ 28
Змн. Арк. № докум. Підпис Дата
згадувати пов'язані документи чи пропонувати швидкі контекстні дії на основі
штучного інтелекту, наприклад, створення завдання з текстового повідомлення.
У такому середовищі онлайн-комунікація стає не просто фіксацією фраз, а
динамічним простором, де технології допомагають людському розуму долати
обмеження відстані та часу для створення нових сенсів.
Різноманітність підходів до проєктування інтерфейсів зумовлена тим, що
універсального дизайну для комунікації не існує, і кожен архітектурний паттерн
оптимізує систему під конкретні завдання користувачів. Вибір підходу визначає,
як саме клієнтська частина вебсистеми керуватиме увагою користувача,
потоками даних та когнітивним навантаженням. Потоково-лінійний підхід
(Activity Streams) [27] орієнтований на хронологічне сприйняття інформації, де
нові повідомлення витісняють старі, що ідеально підходить для динамічних
оперативних чатів та ситуаційного обговорення. Його протилежністю є
ієрархічно-гілковий підхід (Thread-based), який структурує розмову навколо
конкретних тем і дозволяє технічним фахівцям розгалужувати обговорення
архітектурних рішень чи багів, не створюючи хаосу в загальному каналі.
Для систем, де комунікація є частиною ширшого робочого процесу, часто
застосовують об'єктно-центричний підхід (Context-driven UI) [28], де інтерфейс
чату будується навколо конкретної інженерної сутності: завдання, рядка коду,
3D-моделі або документу. У такому разі комунікаційна панель є лише супутнім
шаром (overlay) або бічним віджетом, який забезпечує контекстне обговорення
елемента системи без втрати фокусу на самому об'єкті роботи.
Окреме місце посідає просторово-візуальний підхід (Spatial Canvas) [29],
що замінює класичні вікна чатів нескінченним цифровим полем (як у Miro чи
Figma), де текстові та голосові комунікації прив'язуються до графічних блоків та
схем, уможливлюючи просторове мислення та візуальний маппінг ідей. Для
технічних замовників також актуальний модульно-екранний підхід (Dashboard-
driven) [30], який дозволяє користувачеві самостійно конструювати свій робочий
Арк.
ЧДТУ 262244.001 ПЗ 29
Змн. Арк. № докум. Підпис Дата
простір, комбінуючи блоки чатів, моніторингу серверів, логів та систем
керування завданнями в єдине інтерактивне вікно.
Чат-боти та месенджери перетворилися на центральний хаб інженерної
екосистеми, виконуючи роль єдиного інтерфейсу доступу до даних,
інструментів та автоматизації (ChatOps). Для технічних фахівців це не просто
засоби обміну репліками, а командний рядок у веб-оболонці, де автоматизовані
помічники інтегровані безпосередньо у потік обговорення.
У межах інженерного підходу роль чат-ботів виходить далеко за рамки
простих відповідей за скриптами, трансформуючись у глибоку функціональну
інтеграцію з інструментами розробки [31]:
Керування інфраструктурою через текст: розробники та системні
інженери можуть розгортати сервери, запускати тести, перевіряти статуси
збірок (CI/CD) або моніторити навантаження систем прямо з вікна
месенджера за допомогою команд ботам.
Зниження перемикання контексту: боти агрегують сповіщення з
GitHub, Jira, спільних документів та систем моніторингу, дозволяючи
обговорювати інциденти та приймати технічні рішення там, де з'явилася
інформація.
Інтерактивні віджети замість тексту: сучасні інтерфейси
месенджерів дозволяють ботам надсилати не лише текст, а повноцінні UI-
компоненти — форми з випадаючими списками, графіки метрик у
реальному часі, кнопки дій та модальні вікна.
Автоматичне структурування знань: чат-боти на базі штучного
інтелекту здатні на льоту аналізувати технічний чат, створювати
документацію у внутрішній базі знань (Wiki) або автоматично формувати
завдання в трекері на основі контексту розмови.
Для технічних замовників такий підхід робить месенджер головним
інтерфейсом системи. Замість відкриття десятка різних вкладок і консолей, вони
Арк.
ЧДТУ 262244.001 ПЗ 30
Змн. Арк. № докум. Підпис Дата
отримують консолідоване середовище, де автоматизація (боти) та людська
експертиза (чат) працюють синхронно в одному вікні.
Успіх чат-бота в інженерних та технічних екосистемах визначається не
просто наявністю алгоритму, а тим, наскільки органічно він вбудований у
щоденні робочі процеси фахівців. Для аудиторії з технічним бекграундом
життєздатність бота залежить від його точності, швидкості та інтеграційних
можливостей.
Контекстна точність та розуміння доменної логіки є першочерговим
фактором. Бот має бездоганно розпізнавати професійний жаргон, технічні
терміни, ідентифікатори завдань та фрагменти коду, мінімізуючи помилкові
спрацьовування. На відміну від клієнтських ботів підтримки, інженерний
помічник повинен оперувати точними сутностями системи, коректно
інтерпретуючи наміри користувача навіть у складних, багатокомпонентних
запитах.
Глибока інтеграція з інфраструктурою (API-first підхід) перетворює бота
з текстового співрозмовника на реальний інструмент дії. Успішний бот має
безшовний двосторонній зв'язок із репозиторіями коду, хмарними серверами,
базами даних та трекерами завдань. Це дозволяє йому не просто повідомляти
про проблему (наприклад, про падіння сервера), а одразу пропонувати в
інтерфейсі варіанти її вирішення, діючи як інтерактивний міст між розробником
та системою.
Якість проектування інтерфейсу відповідей (UI/UX контенту) визначає
швидкість зчитування інформації. Замість довгих простирадл тексту успішні
боти використовують структуровані блоки даних: марковані списки, виділення
коду синтаксисом, таблиці метрик та інтерактивні елементи (кнопки дій,
випадаючі меню, форми). Користувач повинен мати можливість виконати
наступну дію в один клік прямо з картки відповіді бота, не вводячи нову
текстову команду.
Арк.
ЧДТУ 262244.001 ПЗ 31
Змн. Арк. № докум. Підпис Дата
Прозорість, логування та обробка помилок критично важливі для
завоювання довіри технічних користувачів. Якщо бот не може виконати
команду, він не повинен видавати загальну помилку. Успішна система чітко
пояснює причину збою (відсутність прав доступу, таймаут сервера, синтаксична
помилка в параметрах) та надає лог або посилання на документацію для
самостійного виправлення запиту користувачем.
Lля проєктування успішних інженерних чат-ботів та систем
автоматизації в чатах (ChatOps) існує чіткий набір професійних принципів [32].
Вони базуються на тому, що бот сприймається користувачами не як
співрозмовник, а як консольний інструмент із графічним вебінтерфейсом.
1. Принцип передбачуваності та детермінованості.
Технічний користувач повинен чітко знати, який результат він отримає
на свій запит. Бот не має імпровізувати чи приховувати логіку своєї роботи.
Одне й те саме введення (команда або клік по кнопці) завжди повинно
призводити до однакового результату. Якщо дія є небезпечною або незворотною
(наприклад, видалення гілки в репозиторії чи перезапуск сервера), інтерфейс
бота обов'язково має вимагати явного підтвердження (Confirmation Step).
2. Принцип негайного зворотного зв'язку (Immediate Feedback).
Інженери не терплять "завислих" процесів. Якщо виконання команди
бота займає більше ніж 200 мілісекунд, інтерфейс повинен миттєво
відреагувати: змінити статус кнопки на "Loading...", відобразити індикатор
прогресу (spinner) або надіслати тимчасове повідомлення "Запит
обробляється...". Користувач має бачити, що система прийняла задачу і працює
над нею.
3. Принцип модульності та атомарності відповідей.
Інформація від бота повинна подаватися дозовано та структуровано.
Замість одного величезного текстового полотна, бот має розбивати відповідь на
логічні блоки: заголовок, сутність проблеми, технічні деталі у блоці коду та
Арк.
ЧДТУ 262244.001 ПЗ 32
Змн. Арк. № докум. Підпис Дата
фінальний блок дій (кнопки). Якщо даних занадто багато, інтерфейс має
підтримувати пагінацію або згортання (accordion) другорядних логів.
4. Принцип контекстної безпеки та прав доступу (RBAC).
Інтерфейс бота повинен динамічно адаптуватися до прав доступу
конкретного користувача (Role-Based Access Control). Якщо інженер не має прав
на розгортання коду на продуктовий сервер, кнопки "Deploy" для нього в
інтерфейсі чату взагалі не повинно бути, або вона має бути заблокована
(disabled) з чітким поясненням причини при наведенні курсора.
5. Принцип гнучкого введення (CLI + GUI).
Успішний бот підтримує синергію двох світів: швидкість командного
рядка та наочність графічного інтерфейсу. Досвідчені інженери віддають
перевагу введенню коротких текстових команд із параметрами (наприклад, /logs
--service auth --lines 50), тоді як для новачків або менеджерів інтерфейс має
пропонувати інтерактивні форми, випадаючі списки та підказки (autocomplete)
під час введення.
2.2 Правила ефективного дизайну користувацької частини web-
орієнтованої системи онлайн комунікації
Дизайн web-орієнтованої системи онлайн комунікації та чат-ботів — це
не просто зовнішній вигляд, а архітектура керування увагою користувача. У
технічних та інженерних платформах візуальні рішення безпосередньо
впливають на швидкість прийняття рішень, знижують кількість помилок та
автоматизують рутинні операції.
Модульна сітка та ієрархія контенту передбачає:
фіксовану геометрію карток, коли кожна відповідь бота проєктується як
окремий віджет із чіткими межами, де заголовок, метадані та тіло повідомлення
завжди знаходяться на своїх місцях;
рівні візуального пріоритету забезпечують можливості критично важливу
інформацію (наприклад, статус падіння сервера) виносити у верхню частину
Арк.
ЧДТУ 262244.001 ПЗ 33
Змн. Арк. № докум. Підпис Дата
картки і виділяєти колірним акцентом, тоді як детальні технічні логи ховаються
під спойлери або розгортаються лише за кліком;
зони швидких дій через інтерактивні елементи (кнопки, посилання, меню
дій) завжди групуються внизу повідомлення або виділяються в окрему панель,
щоб користувач міг миттєво відреагувати на подію.
Функціональна палітра та кодування кольором характеризується:
контрастністю технічного тексту через використання темного або
нейтрального фону для блоків із кодом (Code Blocks) із обов'язковим
підсвічуванням синтаксису мов програмування для швидкого зчитування
структури;
стандартизованими статусами за рахунок обмеження колірної гами
строго під інженерні стандарти (червоний для Error/Fatal, помаранчевий
для Warning, зелений для Success/OK, синій для Info), що запобігає
когнітивній плутанині;
адаптивністю до освітлення, тобто якісний дизайн системи
комунікації обов'язково включає продуману темну тему (Dark Mode), яка
зменшує навантаження на очі інженерів під час тривалої роботи або нічних
чергувань.
Мікроінтеракції та динамічний відгук включає:
плавність транзицій шляхом використання мікроанімацій для
розгортання гілок обговорення (threads) або появи нових повідомлень, що
допомагає оку зафіксувати зміну контексту, не втрачаючи фокус;
візуальний фідбек дій, де кожна кнопка в інтерфейсі бота має чітко
реагувати на дії користувача (зміна кольору при наведенні, ефект
натискання, стан заблокованої кнопки при відсутності прав);
скелетні заглушки (Skeleton Loaders) під час тривалої генерації
відповіді чи збору метрик бот показує сіру заповнювальну графіку за формою
майбутніх даних, створюючи відчуття високої швидкості роботи системи.
Арк.
ЧДТУ 262244.001 ПЗ 34
Змн. Арк. № докум. Підпис Дата
Перше враження від дизайну інженерного чат-бота для технічних
замовників базується не на декоративних елементах, а на візуальній охайності,
щільності інформації та швидкості зчитування даних. Для такої аудиторії
естетика дорівнює функціональності, де кожен піксель має працювати на
автоматизацію процесу.
Візуальна анатомія першого екрана:
професійна типографіка передбачає використання моноширинних
шрифтів (наприклад, JetBrains Mono, Fira Code) для логів, кодів помилок та
технічних параметрів;
інформаційна щільність (Compact UI) має забезпечити мінімальні
відступи (paddings) між блоками даних, що дозволяє бачити всю технічну
картину на одному екрані без зайвого скролінгу;
строга колірна палітра обмежена кількість кольорів, де кожен
відтінок має функціональне значення (наприклад, зелений — успіх,
жовтий — попередження, червоний — критичний збій інфраструктури).
Елементи інтерфейсу, що формують довіру:
охайні інтерактивні картки, тобто чіткі межі між повідомленнями
користувача та системними відповідями бота, які відформатовані у вигляді
структурованих віджетів, а не хаотичного тексту;
стан кнопок дій: великі, легкодоступні елементи керування (кнопки,
теги, перемикачі), які чітко змінюють свій стан при наведенні курсора
(hover) чи натисканні (active);
скелетони завантаження (Skeleton Screens) мають замість
порожнього екрана або нудних спинерів під час обробки важкого запиту
(наприклад, збору метрик сервера) бот показує сірі заглушки за формою
майбутнього графіка чи таблиці.
Дизайн інженерного бота має транслювати надійність: користувач з
першого погляду повинен зрозуміти, що перед ним не розважальний асистент, а
потужний консольний інструмент управління системою.
Арк.
ЧДТУ 262244.001 ПЗ 35
Змн. Арк. № докум. Підпис Дата
2.3 Вибір засобів розробки web-орієнтованої системи онлайн-
комунікації
Інтернет швидко розвивається, тому важливого значення набувають web-
орієнтовані системи онлайн-комунікації, зокрема чат-боти, які трансформують
взаємодію між бізнесом та користувачами завдяки забезпеченню миттєвого
зв'язку в режимі 24/7. Ця технологія гарантує цілодобову доступність для
клієнтів, автоматизує рутинні завдання та звільняє персонал від розв'язання
однотипних питань, що суттєво знижує витрати на підтримку. Крім того, такі
системи пропонують легку багатоканальну інтеграцію в сайти, месенджери чи
додатки, а також дозволяють збирати дані про користувачів для персоналізації
подальших рекомендацій.
За своєю технологічною суттю боти поділяються на лінійні, які
працюють за чіткими кнопковими сценаріями, та інтелектуальні, що
розпізнають природну мову завдяки технологіям штучного інтелекту. Вони вже
стали невіддільною частиною електронної комерції для підбору товарів,
банкінгу для перевірки рахунків, логістики для відстеження посилок, а також
медицини та освіти для запису на прийом і тестування студентів.
Сьогодні створити такий інструмент можна навіть без знань
програмування завдяки популярним zero-code та low-code платформам. Такі
візуальні конструктори як ManyChat та Chatfuel дозволяють швидко збирати
функціональних ботів для месенджерів за допомогою перетягування блоків.
Платформи SendPulse та Corezoid пропонують потужні інструменти для
інтеграції комунікацій із внутрішніми CRM-системами бізнесу. Для створення
складніших рішень із використанням штучного інтелекту розробники часто
обирають системи Dialogflow від Google або Voiceflow, які допомагають ботам
краще розуміти живий текст та контекст розмови.
Створення веб-продукту на основі кодового фреймворку дійсно знімає
будь-які технічні обмеження та відкриває абсолютну свободу для реалізації
інноваційних функцій. На відміну від закритих конструкторів, де розробник
Арк.
ЧДТУ 262244.001 ПЗ 36
Змн. Арк. № докум. Підпис Дата
жорстко обмежений базовим набором блоків, робота з чистим кодом дозволяє
адаптувати систему під будь-які специфічні чи нестандартні потреби
благодійної організації.
У такий чат-бот можна інтегрувати складні інтелектуальні модулі
штучного інтелекту, які будуть не просто відповідати за шаблонами, а
розпізнаватимуть контекст розмови, аналізуватимуть настрій донора та
підбиратимуть персоналізовані слова подяки. Це також дозволяє впроваджувати
глибокі елементи гейміфікації, такі як створення динамічних інтерактивних ліг
благодійників, видача унікальних цифрових відзнак або генерація іменних NFT-
сертифікатів, що суттєво підвищує залученість аудиторії.
З технічної точки зору розробка на фреймворку дозволяє побудувати
безшовну та глибоку синхронізацію з абсолютно будь-якими зовнішніми
сервісами. Система може автоматично передавати фінансові дані у внутрішні
CRM-платформи, миттєво генерувати офіційні податкові звіти для
бухгалтерських програм та публікувати щохвилинні оновлення про стан
рахунків у відкритих каналах медіа для максимальної прозорості. До того ж, це
забезпечує найвищий рівень кібербезпеки, оскільки ви повністю контролюєте
шляхи шифрування персональних даних донорів та можете підключити
багаторівневу верифікацію для захисту від шахрайства.
Фреймворк не змушує розробника писати кожну дрібницю з нуля,
оскільки він уже містить готові перевірені часом блоки для вирішення типових
завдань. Завдяки цьому програміст може зосередитися виключно на унікальній
бізнес-логіці благодійного бота, а не на побудові базової інфраструктури.
Наприклад, у користувацькій частині на React.js розробник не пише
логіку для відстеження змін у DOM-дереві чи ручного оновлення екрана після
отримання донату, бо фреймворк бере це на себе за допомогою віртуального
DOM. Так само Tailwind CSS надає готові утиліти для дизайну, позбавляючи
потреби прописувати складні CSS-правила адаптивності для кожного
мобільного екрана окремо. У серверній частині на Python чи Node.js готові
Арк.
ЧДТУ 262244.001 ПЗ 37
Змн. Арк. № докум. Підпис Дата
бібліотеки та фреймворки вже містять вбудовані модулі для безпечної
маршрутизації HTTP-запитів, шифрування паролів, роботи з базами даних та
валідації вхідних даних від платіжних систем.
Таким чином, використання фреймворку поєднує в собі переваги
швидкої розробки та безмежної кастомізації. Розробник бере надійний каркас із
готових фрагментів коду як фундамент, архітектуру та захист, а вже поверх
нього розбудовує унікальні функції, специфічні звіти чи інтеграції, які потрібні
конкретному благодійному фонду.
Розробка на кодових фреймворках вимагає від спеціаліста впевненого
володіння базовою мовою програмування (як-от JavaScript для React або Python
для Django) та глибокого розуміння архітектурних патернів. Без міцного
технічного фундаменту розробнику буде важко ефективно налаштувати
асинхронні запити, керувати станом додатка чи забезпечити належний рівень
безпеки фінансових транзакцій. Це створює високий поріг входження, через що
для простих рішень бізнес часто обирає zero-code конструктори. Проте сучасні
фреймворки мають надзвичайно розвинені екосистеми, які дещо полегшують
цей процес для початківців. Величезна кількість готової документації, відкритих
бібліотек із шаблонами інтерфейсів та автоматизованих інструментів збірки
дозволяють розробникам із базовими навичками швидко запускати перші
прототипи, поступово поглиблюючи свої знання в ході роботи.
Створення чат-бота для збору благодійних коштів на основі кодового
фреймворку надає повну свободу дій, гарантує безпеку персональних даних і
дозволяє реалізувати унікальну логіку. Для реалізації таких задач доцільним є
застосування мови Python або Node.js, оскільки вони мають потужні екосистеми
з відкритим кодом.
Вибір технологічного стеку та фреймворків для написання коду самого
бота базується на використанні спеціалізованих бібліотек, таких як Python, що є
асинхронним фреймворком aiogram або python-telegram-bot та стандартом для
Telegram, оскільки вони витримують високі навантаження. Node.js є
Арк.
ЧДТУ 262244.001 ПЗ 38
Змн. Арк. № докум. Підпис Дата
популярним фреймворком Telegraf.js або GramJS для швидкої розробки на
JavaScript чи TypeScript. Для інтеграції фінансової частини підключають
платіжні шлюзи через їхній офіційний API: Monobank API (Monobank) для
автоматичного вивантаження виписок, перевірки балансу благодійних «Банк» та
створення віджетів.LiqPay (ПриватБанк) або WayForPay для приймання прямих
платежів з карток Visa та MasterCard всередині бота. Stripe API або PayPal
Developer, якщо кошти залучаються від іноземних донорів.
Основними етапами проєктування архітектури та розробки є наступні:
ініціалізація та реєстрація, що передбачає створення сутності бота
у месенджері за допомогою @BotFather для отримання унікального
токена доступу (API Token);
проєктування бази даних на основі використання PostgreSQL чи
MySQL для збереження ID користувачів, історії транзакцій,
статусів платежів та загального прогресу збору;
реалізація логіки збору на основі написання функцій (хендлерів),
які виводять інформацію про активні благодійні проєкти, суму, яку
залишилося зібрати, та генерують унікальні платіжні посилання
для кожного донора;
обробка платежів та Webhooks, тобто налаштування сервера для
приймання зворотних запитів (вебхуків) від платіжної системи.
Коли платіж успішний, шлюз надсилає сигнал боту, а той
автоматично оновлює прогрес-бар збору в базі даних та надсилає
донору повідомлення з подякою;
безпека та логування, що забезпечує впровадження шифрування
токенів через змінні середовища .env та розмежування прав
доступу (користувач може лише донатити, а адміністратор фонду
— публікувати нові збори та завантажувати фінансові звіти).
Розробки чат-боту на основі фреймворку має наступні переваги:
Арк.
ЧДТУ 262244.001 ПЗ 39
Змн. Арк. № докум. Підпис Дата
повна прозорість, що забезпечує можливість налаштувати щоденні
автоматичні звіти про кожну гривню, які бот надсилатиме у
публічний канал фонду;
нульова комісія платформи, тобто не оплачується щомісячна
абонентська плата конструкторам чат-ботів, витрати йдуть лише на
хостинг сервера та стандартну комісію банку;
гнучка кастомізація, коли легко підключити генерацію іменних
цифрових сертифікатів подяки або додати гейміфікацію
(наприклад, систему лідерів серед донорів).
Розробка користувацької частини (Frontend / Client-side) web-
орієнтованої системи онлайн комунікації, а саме чат боту для збору благодійних
коштів фокусується на створенні зручного, прозорого та адаптивного
інтерфейсу. Оскільки сучасні чат-боти у веб-просторі найчастіше реалізують як
автономні віджети на сайтах або як Web Apps всередині месенджерів
(наприклад, Telegram Web Apps), інтерфейс має бути максимально легким та
оптимізованим під мобільні пристрої.
Технологічний стек для розробки web-орієнтованої системи онлайн
комунікації, а саме чат боту для збору благодійних коштів є наступним:
фреймворки: React.js, Vue.js або Svelte для швидкого оновлення
інтерфейсу без перезавантаження сторінки;
стилізація на основі Tailwind CSS для створення адаптивного
дизайну під будь-які екрани або Shadcn UI / Material UI для готових
елементів керування;
зв'язок з сервером реалізується на основі Axios або Fetch API для
надсилання запитів, а також WebSockets для миттєвого оновлення
прогресу збору в реальному часі.
Ключові елементи інтерфейсу та UX-дизайн розглядаються наступні:
Арк.
ЧДТУ 262244.001 ПЗ 40
Змн. Арк. № докум. Підпис Дата
головний екран збору (Dashboard), що є карткою проєкту з чітким
описом мети, великим фото або відео, а також інтерактивним
прогрес-баром (скільки зібрано / скільки потрібно);
блок швидкого донату передбачає фіксовані кнопки з популярними
сумами (наприклад, 50, 100, 200, 500 грн) та окреме поле для
введення довільної суми, що скорочує шлях користувача до
оплати;
платіжна кнопка, що є помітним елементом "Підтримати", який
інтегрує Google Pay та Apple Pay для оплати в один клік без ручного
введення реквізитів картки;
вікно чату (Комунікативна частина), тобто зона, де користувач
бачить текстові повідомлення від бота, підказки, часті запитання
(FAQ) та може написати повідомлення менеджеру фонду.
Сценарій взаємодії користувача (User Flow) передбачає процедуру, що
представлено на рис.2.1.
Авторизація Успішне
Вхід Вибір суми платежу завершення
Рисунок 2.1. Сценарій взаємодії користувача.
Користувач відкриває веб-віджет або Web App і одразу бачить поточний
критичний збір (наприклад, "Збір на медикаменти"). Людина натискає на кнопку
з бажаною сумою донату. Інтерфейс миттєво підраховує, як зміниться прогрес-
бар після її оплати. За допомогою інтегрованого API платіжної системи
(наприклад, LiqPay або Monobank) прямо всередині інтерфейсу відкривається
безпечне вікно оплати. Після транзакції екран змінюється на анімацію подяки,
показує оновлену загальну суму збору та пропонує кнопку "Поділитися в
соцмережах" для залучення нових донорів.
Арк.
ЧДТУ 262244.001 ПЗ 41
Змн. Арк. № докум. Підпис Дата
2.4 Висновки до розділу 2
В другому розділі описано ключові принципи розробки web-
орієнтованої системи онлайн комунікації, а саме чат боту для збору благодійних
коштів, що допоможе керуватися під час вибору того, як представляти бренд в
Інтернеті.
Розробка користувацької частини благодійного чат-бота на стеку
React.js, Tailwind CSS та Fetch API дозволяє створити швидкий, безпечний та
адаптивний інтерфейс, оптимізований під мобільні пристрої. Комбінація
компонентного підходу React та легких стилів Tailwind забезпечує високу
швидкість завантаження, а Fetch API гарантує миттєву взаємодію з платіжними
шлюзами без перезавантаження сторінки. Головний результат такого підходу
— максимально простий та прозорий шлях донора від відкриття бота до оплати
в один клік, що прямо підвищує конверсію та обсяги зборів для благодійного
фонду.
Арк.
ЧДТУ 262244.001 ПЗ 42
Змн. Арк. № докум. Підпис Дата
3 РОЗРОБКА КОРИСТУВАЦЬКОЇ ЧАСТИНИ WEB-
ОРІЄНТОВАНОЇ СИСТЕМИ ОНЛАЙН КОМУНІКАЦІЇ
3.1 Основні етапи розробки користувацької частини web-орієнтованої
системи онлайн комунікації
Розробка користувацької частини (Frontend) web-орієнтованої системи
онлайн комунікації, зокрема чат-бота для збору благодійних коштів на стеку
React.js, Tailwind CSS та Fetch API ділиться на 6 чітких послідовних етапів.
Кожен етап націлений на створення швидкого, адаптивного та надійного
інтерфейсу.
Етап 1. Налаштування проєкту та архітектури.
На цьому етапі створюється основа додатка та підключаються необхідні
інструменти. Ініціалізація передбачає створення проєкту за допомогою
швидкого інструменту збірки Vite (npm create vite@latest). Конфігурація стилів
забезпечує встановлення та ініціалізація Tailwind CSS через конфігураційний
файл tailwind.config.js. Структура папок забезпечує створення архітектури
компонентів:/components (кнопки, прогрес-бар, вікно чату)./hooks (кастомні
хуки для Fetch-запитів)./assets (іконки, логотипи фонду).
Етап 2. Розробка інтерфейсу (UI) та верстка з Tailwind CSS.
Створення візуальної частини бота, яка має ідеально відображатися на
смартфонах. Картка збору забезпечується версткою головного екрана з назвою
збору, текстовим описом та фотографією. Інтерактивний прогрес-бар
передбачає створення динамічної шкали (лінійки) за допомогою класів Tailwind
(наприклад, w-[75%] bg-green-500 h-4 rounded-full), яка заповнюється залежно
від відсотка зібраних коштів. Форма донату реалізується через кнопки
швидкого вибору суми (50, 100, 200, 500 грн) з ефектами зміни кольору при
наведенні/натисканні (hover:bg-blue-600 transition) та текстове поле для
введення будь-якої іншої суми.
Етап 3. Керування станом додатка (React State Management).
Арк.
ЧДТУ 262244.001 ПЗ 43
Змн. Арк. № докум. Підпис Дата
Оживлення інтерфейсу здійснюється за допомогою вбудованих хуків
React. Хук useState використовується для збереження поточної обраної суми
донату, тексту повідомлень у вікні чату, стану завантаження (loading) та
помилок (error), даних збору, отриманих від сервера (скільки всього зібрано,
ціль збору).Хук useEffect викликається при першому завантаженні сторінки для
автоматичного запуску Fetch-запиту та отримання актуальних даних про збір з
бекенду.
Етап 4. Інтеграція з бекендом через Fetch API.
Налаштування взаємодії з сервером без перезавантаження сторінки
реалізується шляхом отримання даних (GET) шляхом запиту через
fetch('/api/donation-progress') для завантаження поточної фінансової ситуації
фонду та відображення її на прогрес-барі. Ініціалізація оплати (POST)
реалізується коли користувач натискає кнопку «Підтримати», Fetch API
відправляє на сервер JSON-об'єкт із сумою (наприклад, { amount:
200 }).Обробка відповіді при отриманні від сервера унікального посилання на
оплату (від LiqPay/Monobank) та автоматичне перенаправлення користувача.
Етап 5. Обробка помилок та станів завантаження (UX).
Забезпечення стабільної роботи інтерфейсу в умовах поганого інтернету
реалізується через скелетони (Skeletons), тобто відображення сірих анімованих
блоків-заглушок, поки Fetch API очікує відповідь від сервера. Блокування
кнопок: Вимкнення кнопки оплати (disabled={loading}) під час обробки
транзакції, щоб користувач не міг випадково клікнути двічі та списати гроші
повторно. Інформування про помилки: Виведення зрозумілих сповіщень
(наприклад: "Мережева помилка. Спробуйте ще раз"), якщо сервер тимчасово
недоступний.
Етап 6. Тестування, оптимізація та Деплой.
Фінальна перевірка та запуск системи можливе шляхом мобільного
тестування, що передбачає перевірку адаптивності інтерфейсу в інструментах
розробника (Chrome DevTools) під різні дозволи екранів смартфонів.
Арк.
ЧДТУ 262244.001 ПЗ 44
Змн. Арк. № докум. Підпис Дата
Оптимізація збірки реалізує запуск команди npm run build для стиснення коду та
мінімізації CSS-файлів Tailwind. Розміщення в мережі (Деплой) забезпечує
завантаження готової користувацької частини на швидкі хостинги статичних
сайтів (Vercel, Netlify або Cloudflare Pages).
3.2 Фреймворк React.js для розробки користувацької частини web-
орієнтованої системи
3.2.1 Особливості застосування React.js
Розробка фронтенд-частини чат-бота для благодійних зборів вимагає
створення інтуїтивного, доступного та адаптивного інтерфейсу. Використання
React.js забезпечить компонентний підхід, Tailwind CSS — швидку стилізацію,
а Fetch API — надійну інтеграцію з сервером. Застосування React.js для
створення клієнтської частини чат-бота у сфері благодійності має специфічні
вимоги. Головний фокус тут — швидкість, безпека платежів, доступність
(accessibility) та емоційний UX, який мотивує до дії.
Ключовими особливостями розробки користувацької частини чат-боту
для збору благодійних коштів на основі застосування React.js є наступні:
1. В основі архітектури компонентів чат-бота інтерфейс чату, що
повинен ідеально декомпозуватися на перевикористовувані React-компоненти.
Це дозволяє легко масштабувати логіку бота:
<ChatWindow> — головний контейнер, що керує станом діалогу та
прокручуванням (scroll) вниз при нових репліках;
<MessageList> — рендерить масив повідомлень користувача та бота;
<MessageBubble> — відображає текст, час, статус прочитання та адаптує
стиль (ліворуч/праворуч) залежно від автора;
<QuickReplies> — інтерактивні кнопки з готовими варіантами відповідей
(наприклад: "Хочу допомогти", "Дізнатися про проєкти", "Звітність"), які
пришвидшують комунікацію.
Арк.
ЧДТУ 262244.001 ПЗ 45
Змн. Арк. № докум. Підпис Дата
2. Специфічний інтерактивний функціонал має забезпечити спілкування
з користувачем для вибору того чи іншого благодійного фонду. Звичайний
текстовий чат-бот для благодійності неефективний. Користувачеві потрібні
наочні інструменти:
інтерактивні картки-каруселі (Swiper / Carousel) замість довгого списку
текстом забезпечить можливості горизонтальної каруселі карткових
компонентів <FundCard>, тобто візуальні якорі, де кожна картка містить
логотип фонду, яскравий баннер напрямку (медицина, армія, тварини) та
коротке УТП (унікальну торгову пропозицію). Елементи дії всередині
картки розміщуються кнопка «Детальніше» (відкриває модальне вікно) та
кнопка «Обрати цей фонд» (переводить бот на крок оплати);
смарт-фільтрація за категоріями (Tag Chips) включає компоненти
<CategorySelector>, що пропонує користувачеві систему швидких тегів-
кнопок. Механіка забезпечує користувачеві можливість бачити кнопки:
«ЗСУ», «Діти», «Тварини», «Гуманітарка». Реактивність реалізується
через клік по тегу миттєво (через оновлення React state) фільтрує масив
фондів у чаті, залишаючи лише релевантні. Це економить час донатора;
діалоговий опитувальник (Покроковий візард / Quiz) допомагає
користувачеві, тобто бот запускає інтерактивний тест-опитування за
допомогою компонента <QuizWizard>. Крок 1: «Яка сфера вам ближче?»
(Варіанти: Екологія / Медицина / Військові). Крок 2: «Який тип допомоги
ви обираєте?» (Варіанти: Системна допомога фонду / Терміновий збір). В
результаті React обробляє відповіді через локальний стейт (useReducer) і
каже: «На основі ваших відповідей, ми підібрали 2 фонди. Оберіть один з
них».
3. Управління станом (State Management) реалізує можливість чат-боту
пам'ятати контекст розмови та крок, на якому перебуває благодійник. Для
простих ботів достатньо вбудованого хука useReducer, який чітко керує
кроками сценарію (State Machine: CHOOSING_PROJECT ->
Арк.
ЧДТУ 262244.001 ПЗ 46
Змн. Арк. № докум. Підпис Дата
SELECTING_AMOUNT -> PROCESSING_PAYMENT). Для складних систем
використовують Redux Toolkit або Zustand, щоб зберігати історію повідомлень,
вибрану валюту, токен авторизації та дані профілю благодійника.
4. Інтеграція платіжних систем (LiqPay, Mono, Stripe, PayPal) є складною
задачею. React-додаток не проводить транзакції самостійно, але забезпечує
безпечний місток. Використання офіційних React-бібліотек (наприклад,
@stripe/react-stripe-js) для рендерингу безпечних полів введення картки (PCI
DSS compliance), які ізольовані від загального DOM-дерева. Обробка вебхуків
та статусів оплати можливе після успішного інвойсу через API, React миттєво
змінює стан екрану на вікно подяки (<SuccessDonation>) із генерацією
електронної квитанції або сертифіката.
5. Доступність (Accessibility / A11Y) та оптимізація можливо реалізувати
як додаткову опцію. Благодійністю займаються абсолютно різні люди, зокрема
літні чи з порушеннями зору. Семантичний HTML та ARIA-атрибути через
використання aria-live="casual" або "assertive" для того, щоб скрінрідери
автоматично озвучували нові повідомлення, які прилітають від бота. Керування
з клавіатури забезпечує можливість проходити сценарій чат-бота (натискати
швидкі відповіді) за допомогою клавіш Tab та Enter. Мінімальний розмір
бандлу на основі використання React.lazy() та Suspense для лінивого
завантаження важких модулів (наприклад, графіків звітності), щоб чат миттєво
відкривався навіть на слабкому мобільному інтернеті.
3.2.2 Налаштування Vite
Ініціалізація проєкту за допомогою Vite дозволяє миттєво створити
оптимізовану основу для майбутнього чат-бота. Цей інструмент збірки
використовує native ESM для швидкого запуску сервера розробки та забезпечує
миттєве оновлення модулів у браузері.
Для створення проєкту виконано команду ініціалізації в терміналі:
npm create vite@latest charity-bot-frontend -- --template react.
Арк.
ЧДТУ 262244.001 ПЗ 47
Змн. Арк. № докум. Підпис Дата
Ця команда розгортає чистий шаблон React у новій папці charity-bot-
frontend. Після завершення генерації файлів необхідно перейти в створену
директорію та встановити початкові залежності:
cd charity-bot-frontend
npm install.
Наступним кроком є встановлення Tailwind CSS разом із його
залежностями через менеджер пакетів для забезпечення утилітарної стилізації:
npm install -D tailwindcss postcss autoprefixer.
Після завантаження пакетів створено конфігураційні файли Tailwind.
Наступна команда генерує файли tailwind.config.js та postcss.config.js в корені
додатка:
npx tailwindcss init -p.
Для того щоб Tailwind міг аналізувати класи у React-компонентах,
конфігураційний файл tailwind.config.js має містити правильні шляхи до файлів
проєкту. Його початковий вміст замінюється на таку структуру:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Для активації стилів Tailwind директиви фреймворку підключаються у
головному CSS-файлі проєкту, зазвичай це src/index.css:
@tailwind base;
Арк.
ЧДТУ 262244.001 ПЗ 48
Змн. Арк. № докум. Підпис Дата
@tailwind components;
@tailwind utilities;
Тепер середовище повністю готове до написання коду чат-бота та
інтеграції Fetch API. Локальний сервер для розробки та перевірки інтерфейсу
запускається командою:
npm run dev.
3.2.3 Створення візуальної частини
Верстка інтерфейсу чат-бота для благодійних зборів вимагає
компактного, мобільно-орієнтованого дизайну, оскільки більшість
користувачів взаємодіють з такими системами зі смартфонів. Tailwind CSS
дозволяє створити адаптивний та сучасний інтерфейс за допомогою
утилітарних класів без написання окремих CSS-файлів.
Для створення ефекту мобільного додатка на будь-яких пристроях чат-
бот обгортається в централізований контейнер:
<div className="flex flex-col h-screen max-w-md mx-auto bg-slate-50
border border-slate-200 shadow-2xl relative overflow-hidden">
{/* Внутрішні компоненти чату розміщуються тут */}
</div>
flex flex-col h-screen: вибудовує елементи вертикально (шапка, чат,
введення) та розтягує додаток на всю висоту екрана;
max-w-md mx-auto: обмежує максимальну ширину (розмір
стандартного смартфона) та центрує інтерфейс на великих моніторах;
bg-slate-50 border shadow-2xl: задає м'який світлий фон, тонку рамку
та глибоку тінь для візуального відокремлення від решти сторінки.
Шапка чату (Header) містить назву проєкту, статус бота та інтегрований
міні-віджет, який показує прогрес благодійного збору. Це забезпечується
шляхом виконання наступних команд:
Арк.
ЧДТУ 262244.001 ПЗ 49
Змн. Арк. № докум. Підпис Дата
bg-gradient-to-r from-blue-600 to-indigo-600: створює плавний градієнт, що
додає інтерфейсу сучасного вигляду;
bg-emerald-400 animate-pulse: зелена точка, яка пульсує, імітуючи
присутність оператора або бота в мережі;
w-full bg-blue-900/40 h-2 rounded-full: контейнер прогрес-бару з
напівпрозорим темним фоном;
bg-amber-400 w-[75%]: яскрава лінія прогресу, яка наочно демонструє
статус збору (в даному прикладі 75%).
Стрічка повідомлень (Message Area) динамічно відображає історію
листування та автоматично адаптує вирівнювання залежно від того, хто є
автором повідомлення — бот чи користувач. При цьому рекалізуються наступні
команди:
flex-1 overflow-y-auto: змушує блок повідомлень займати весь
доступний простір між шапкою та підвалом, додаючи вертикальну прокрутку
за потреби;
bg-[radial-gradient(...)]: створює ледь помітну фонову сітку з крапок,
що характерно для популярних месенджерів;
rounded-bl-none та rounded-br-none: зрізають кути хмаринок
повідомлень з відповідного боку, створюючи правильний візуальний акцент
на джерелі повідомлення.
Блок швидких відповідей та інтерактивних кнопок розташовується над
полем введення та пропонує готові варіанти дій, що значно підвищує конверсію
в донат, оскільки користувачу не потрібно вводити текст вручну. Це
забезпечується шлям виконання наступних команд:
overflow-x-auto scrollbar-none: дозволяє гортати кнопки
горизонтально на мобільних пристроях, якщо вони не вміщуються в екран,
приховуючи стандартний системний скроллбар;
transform active:scale-95: додає реалістичний ефект натискання
(кнопка візуально зменшується при тапі).
Арк.
ЧДТУ 262244.001 ПЗ 50
Змн. Арк. № докум. Підпис Дата
Форма введення повідомлення (Input Bar) є нижньою частиною
інтерфейсу та призначена для ручного введення тексту та надсилання форми.
Забезпечено реалізацію наступними командами:
focus:border-blue-500 focus:bg-white: плавно змінює колір рамки та
фон інпуту на чистий білий, коли користувач починає вводити текст;
w-5 h-5 transform rotate-45: стилізує стандартну SVG-стрілку,
повертаючи її в положення іконки «надіслати літачок».
Керування станом (State Management) у чат-боті реалізується на базі
локального стану React за допомогою хуків useState, useEffect та useRef.
Оскільки інтерфейс має реагувати на дії користувача миттєво, стан повинен
чітко розділяти типи повідомлень, зберігати історію та відстежувати процеси
завантаження і прогресу збору.
Кожне повідомлення в системі представляється об'єктом із чіткою
структурою:
id (string / number): унікальний ідентифікатор для коректного
рендерингу списків у React (key);
text (string): безпосередній текст повідомлення;
sender ('bot' | 'user'): маркер автора, який визначає логіку верстки та
вирівнювання хмаринки;
timestamp (Date): час відправки для відображення всередині чату;
metadata (object, опціонально): додаткові дані (наприклад, сума
донату чи посилання на оплату).
Такий підхід є ефективним, тому що містить контрольовані компоненти,
ткі як текстове поле (<input>), що повністю зв'язане зі станом inputValue. Це дає
змогу легко очищати його після надсилання повідомлення або валідувати текст
«на льоту». Потокова безпека за рахунок використання колбеку всередині
функції зміни стану (setMessages(prev => [...prev, new])) гарантує, що нові
повідомлення не затиратимуть одне одного, навіть якщо вони прийдуть з
сервера одночасно. Уся бізнес-логіка чату зосереджена в одному місці й не
Арк.
ЧДТУ 262244.001 ПЗ 51
Змн. Арк. № докум. Підпис Дата
залежить від зовнішніх важких бібліотек (як Redux чи Zustand), що ідеально
підходить для легковагових віджетів.
Для розробки користувацької частини онлайн-системи комунікації було
застосовано проектування сервісного шару (Service Layer). Це дозволило
ефективно розділити інтерфейс користувача (UI) та бізнес-логіку взаємодії з
мережею. Замість прямого виклику функцій усередині компонентів створено
окремий архітектурний прошарок — сервісний модуль, який інкапсулює роботу
з Fetch API. Для тестування розробленого модуля в автономному режимі
розгорнуто локальний mock-сервер за допомогою конфігурації статичних
JSON-файлів.
Саме в межах цього сервісного шару реалізовано механізми обробки
HTTP-статусів відповіді, що є фундаментальною частиною розробки веб-
орієнтованих систем. Такий підхід забезпечує відмовостійкість інтерфейсу та
інформативність взаємодії з користувачем. У процесі обміну даними між
клієнтською частиною чат-бота та сервером через Fetch API кожен HTTP-статус
вимагає унікального сценарію поведінки фронтенду.
Код успішної відповіді 200 OK сигналізує про те, що сервер успішно
отримав, проаналізував та обробив надіслане користувачем повідомлення. У
цьому випадку Fetch API отримує тіло відповіді, серіалізоване у форматі JSON,
після чого фронтенд оновлює локальний стан історії чату, додаючи туди
репліку бота чи генеруючи платіжний віджет. Для користувача цей процес
виглядає як миттєва та безперебійна поява повідомлень без будь-яких
візуальних затримок чи повідомлень про помилки.
Код помилки користувача 400 Bad Request виникає тоді, коли сервер не
може розпізнати запит через некоректний синтаксис або помилки валідації на
стороні клієнта. У контексті благодійного чат-бота це може статися, якщо
користувач намагається надіслати пусте повідомлення, вводить від'ємну суму
донату або передає некоректний ідентифікатор платіжної системи. Фронтенд
повинен перехопити цей статус, прочитати деталі помилки з тіла відповіді та
Арк.
ЧДТУ 262244.001 ПЗ 52
Змн. Арк. № докум. Підпис Дата
відобразити у вікні чату підказку, яка допоможе користувачу виправити введені
дані, наприклад, вказати суму у правильному числовому форматі.
Код внутрішньої помилки сервера 500 Internal Server Error свідчить про
критичний збій на самому бекенді, коли серверна логіка, база даних або
інтегрований платіжний шлюз вийшли з ладу. Оскільки ця проблема не
залежить від дій користувача, клієнтська частина системи зобов'язана захистити
інтерфейс від "зависання" у стані вічного завантаження. При отриманні статусу
500 додаток примусово вимикає індикатор друку бота, перериває спробу
з'єднання та виводить у стрічку повідомлень заздалегідь підготовлений текст
про тимчасові технічні несправності з проханням повторити спробу пізніше.
Взаємодія користувацького інтерфейсу з платіжним шлюзом через Fetch
API є критично важливим наскрізним процесом, який визначає функціональну
спроможність усієї системи. Процес ініціалізації платежу починається у
момент, коли користувач обирає фіксовану суму донату на панелі швидких
відповідей або вводить її вручну в текстове поле. Фронтенд-частина
перехоплює цю подію, блокує інтерфейс для запобігання повторних відправк та
формує асинхронний POST-запит до платіжного ендпоїнту сервісного шару.
У тілі цього HTTP-запиту Fetch API передає унікальний ідентифікатор
користувача, суму внеску та валюту операції у форматі JSON. Серверна частина
системи, взаємодіючи з API платіжного провайдера, генерує безпечний
платіжний токен та унікальне одноразове посилання на транзакцію, після чого
повертає ці дані клієнту зі статусом 200 OK. Фронтенд отримує відповідь,
десеріалізує її та динамічно модифікує стан інтерфейсу, відображаючи у стрічці
чату інтерактивну кнопку з посиланням на платіжну сторінку зовнішнього
банку.
Після успішного переходу користувача за посиланням та виконання
транзакції, фронтенд використовує механізм коротких опитувань (polling) через
Fetch API для верифікації фінального статусу платежу. Отримавши від сервера
підтвердження успішного зарахування коштів, сервісний модуль оновлює
Арк.
ЧДТУ 262244.001 ПЗ 53
Змн. Арк. № докум. Підпис Дата
глобальний стан віджета прогресу збору, візуально збільшуючи шкалу
накопичення, та додає у вікно діалогу фінальне подячне повідомлення від чат-
бота.
3.4 Дизайн інтерфейсу користувацької частини web-орієнтованої
системи онлайн комунікації
Візуальна концепція користувацької частини системи розроблена за
принципом «Mobile-First», оскільки аналіз цільової авдиторії благодійних
платформ вказує на превалювання мобільного трафіку. Для забезпечення
максимального фокусу користувача на процесі комунікації та благодійної
допомоги було обрано мінімалістичний стиль із чіткою ієрархією елементів.
Інтерфейс чат-бота обмежений центральним контейнером з фіксованою
максимальною шириною, що дозволяє однаково естетично та зручно
відображати додаток як на екранах смартфонів, так і по центру моніторів
персональних комп'ютерів. Компонентний підхід React.js дозволив розділити
екран на три автономні зони, кожна з яких виконує унікальну функціональну
роль, не перевантажуючи загальне сприйняття сторінки.
Кольорова палітра додатка спроектована за допомогою утилітарних класів
Tailwind CSS і базується на принципах психологічного комфорту та довіри.
Основним акцентним кольором обрано глибокий синій, який традиційно
асоціюється зі стабільністю, безпекою та надійністю, що є критично важливим
для систем, які працюють із фінансовими транзакціями. Для елементів заклику
до дії, зокрема кнопок швидкого донату та шкали прогресу, застосовано
насичений бурштиновий (янтарний) колір, який створює високий контраст і
стимулює користувача до виконання цільової дії. Фоновий простір чату
виконано у м'яких світло-сірих тонах з ледь помітною радіальною сіткою, що
імітує інтерфейс популярних месенджерів та знижує навантаження на зір під час
тривалого читання.
Типографіка системи підпорядкована правилам швидкого сканування
інформації. Використання стандартного адаптивного шрифтового набору без
Арк.
ЧДТУ 262244.001 ПЗ 54
Змн. Арк. № докум. Підпис Дата
засічок забезпечує чітке відображення тексту на екранах із будь-якою щільністю
пікселів. Візуальна ієрархія досягається шляхом контрасту між жирним
накресленням заголовків у шапці чату та стандартною вагою тексту в хмаринках
повідомлень. Особливу увагу приділено дизайну самих повідомлень: репліки
робота та користувача дзеркально вирівняні по різних боках екрана та мають
різне колористичне забарвлення, що дозволяє людині миттєво ідентифікувати
автора повідомлення та легко орієнтуватися в історії листування. Додаткові UX-
елементи, такі як плавна анімація пульсації статус-індикатора та анімація
стрибаючих крапок під час друку бота, створюють ефект живої комунікації в
реальному часі.
На рисунку 3.1 представлено графічний інтерфейс користувача у момент
первинної ініціалізації веб-орієнтованої системи. Композиція екрана чітко
розділена на функціональні зони згідно з концепцією Mobile-First. У верхній
частині (Header) розміщено назву системи, поточний статус активності бота
(«Online») та інтегрований віджет благодійного збору, що відображає поточний
прогрес виконання цілі у відсотковому еквіваленті.
Рисунок 3.1. Графічне зображення першого повідомлення-вітання.
Арк.
ЧДТУ 262244.001 ПЗ 55
Змн. Арк. № докум. Підпис Дата
Центральну частину займає стрічка діалогу, де зафіксовано перше
автоматичне повідомлення-вітання від імені чат-бота. Хмаринка повідомлення
має лівостороннє вирівнювання з урізаним нижнім лівим кутом (rounded-bl-
none), що є графічним стандартом ідентифікації реплік асистента. Нижче стрічки
діалогу динамічно згенеровано блок кнопок швидких відповідей для миттєвої
ініціації мікротранзакцій, а підвал сторінки містить стандартне поле текстового
введення для довільних запитів користувача.
На рисунку 3.2 представлено другу сторінку діалогу, яка ілюструє стан
системи після інтерактивної взаємодії користувача з інтерфейсом. На відміну від
стартового екрана, тут чітко простежується динаміка ведення діалогу та зміна
внутрішнього стану (State) додатка.
Рисунок 3.2. Графічне зображення початку діалогу.
На рисунку 3.3 представлено інтерфейс системи на етапі ініціалізації
вибору цільової програми фінансування. На відміну від лінійного сценарію
одного збору, дана екранна форма демонструє архітектурну здатність чат-бота
динамічно оперувати масивами даних про декілька паралельних благодійних
ініціатив. Модуль повідомлень у цьому стані трансформується у каталог карток
(Card-based UI), де кожен об'єкт репрезентує окремий волонтерський проєкт.
Арк.
ЧДТУ 262244.001 ПЗ 56
Змн. Арк. № докум. Підпис Дата
Рисунок 3.3. Графічне зображення головного меню.
Кожна картка, згенерована в межах діалогового вікна, містить унікальний
набір метаданих, що підвантажуються з файлів конфігурації через сервісний
шар. Структура картки включає тематичну піктограму, назву проєкту, опис
кінцевої мети збору (наприклад, закупівля квадрокоптерів чи медичного
автотранспорту), а також локальний віджет прогресу з числовими показниками
та лінійною шкалою. Обрання конкретного проєкту реалізується за допомогою
інтегрованих інлайн-кнопок «Обрати цей проєкт».
Після натискання користувачем на кнопку вибору, ідентифікатор проєкту
(project_id) записується у локальний стан програми (State). Це змінює контекст
усього подальшого діалогу: верхній інформаційний банер синхронізується з
обраною програмою, а кнопки швидких відповідей автоматично перемикаються
на генерацію донатів саме для цього конкретного збору. Такий UX-шаблон
запобігає плутанині та дозволяє системі адмініструвати необмежену кількість
зборів у межах одного клієнтського додатка.
На рисунку 3.4 представлено користувацький інтерфейс системи на етапі
проходження анкетування, спрямованого на визначення благодійних інтересів
респондента. На відміну від статичних інформаційних вікон, цей екран
Арк.
ЧДТУ 262244.001 ПЗ 57
Змн. Арк. № докум. Підпис Дата
демонструє складну динамічну структуру діалогу, що поєднує текстові, графічні
та інтерактивні керуючі елементи в межах однієї сесії комунікації.
Рисунок 3.3. Графічне зображення ознайомлення з параметрами
обраного благодійного проєкту.
Верхня панель (Header) містить ідентифікаційні дані системи: назву
додатка («Charity Bot»), фірмову піктограму (логотип у вигляді дерева), статус
активності («Typically replies instantly») та верифікаційний маркер. Нижче у
стрічці чату зафіксовано вхідний тригер від користувача «Почати опитування»,
виконаний у вигляді правосторонньої хмаринки акцентного синього кольору.
Центральну частину інтерфейсу займає модуль інтерактивного квізу від
бота. Перше запитання супроводжується індикатором прогресу («1 з 5») та чітко
сформульованою дилемою щодо вибору між гуманітарною допомогою («Давати
їжу бідним») та екологічною ініціативою («переробляти відходи»). Для
посилення емоційного сприйняття та UX-взаємодії, бот генерує горизонтальну
галерею зображень (Carousel Card UI), яка візуалізує обидві проблеми: ліворуч
зображено дитину з пакунком їжі, праворуч — дітей на тлі сміттєзвалища з
підписом поточного селектора «Переробляти відходи».
Арк.
ЧДТУ 262244.001 ПЗ 58
Змн. Арк. № докум. Підпис Дата
Нижня частина екрана містить динамічний блок кнопок швидких
відповідей (Quick Replies), які спрощують процес вибору до одного натискання.
Кнопки мають тематичні емодзі для покращення сприйняття: «Їжа для бідних» та
«Переробка». Підвал інтерфейсу замикає стандартне текстове поле введення
«Send a Message...» для ручних запитів, що перебуває у пасивному стані під час
активного вибору з варіантів, мінімізуючи когнітивне навантаження на
користувача.
На рисунку 3.4 представлено стан користувацького інтерфейсу
безпосередньо після обробки першої відповіді користувача.
Рисунок 3.4. Екранна форма другого кроку інтерактивного опитування
користувача
Дана екранна форма візуалізує динамічну адаптацію контенту чат-бота в
межах єдиного сеансу комунікації. Зміна внутрішнього стану додатка (State)
автоматично ініціювала рендеринг наступного елемента з масиву запитань, що
підтверджується текстовим індикатором «2 of 5» у заголовку хмаринки бота.
Текстовий блок другого кроку формулює нову дилему для визначення
пріоритетів благодійника: «Що вас більше турбує, соціальні проблеми чи
глобальне потепління?». Відповідно до зміненого контексту, система оновила
вміст горизонтальної галереї (Carousel UI). На поточному слайді згенеровано
Арк.
ЧДТУ 262244.001 ПЗ 59
Змн. Арк. № докум. Підпис Дата
кастомізовану картку з підписом «Глобальне потепління», графічний контент
якої метафорично розділений на дві частини, що ілюструють екологічну
катастрофу (посуху) та збалансовану екосистему планети в руках людини.
Елементи швидкої відповіді (Quick Replies) у нижній частині екрана також
синхронізувалися з новим станом опитування. Старі кнопки були демонтовані з
DOM-дерева, а на їхньому місці з'явилися нові інтерактивні селектори з
відповідним візуальним супроводом: «Соціальні проблеми» та «Потепління».
Збереження пасивного стану поля введення «Send a Message...» підкреслює
незмінність UX-стратегії, спрямованої на ведення користувача за чітким,
структурованим сценарієм анкетування.
На рисунку 3.5 представлено користувацький інтерфейс системи на етапі
успішного завершення інтерактивного опитування. Дана екранна форма фіксує
перехід системи від режиму збору аналітики до фази видачі персоналізованих
рекомендацій. Замість чергового запитання з лічильником кроків, інтерфейс
динамічно згенерував серію інформаційних повідомлень, що підтверджують
успішне проходження квізу.
Рисунок 3.5. Екранна форма успішного завершення опитування та
видачі пропозицій.
Арк.
ЧДТУ 262244.001 ПЗ 60
Змн. Арк. № докум. Підпис Дата
Перший текстовий блок виконує функцію психологічного заохочення
(«Так! Ви дійшли до кінця опитування!»), підкреслюючи важливість обізнаності
користувача для глобального благодійного руху. Наступні репліки бота
виступають зв'язковим містком до практичних дій, пропонуючи користувачу
ознайомитися з «актами ніжності та доброти», які відповідають його профілю
інтересів, сформованому на попередніх кроках.
Центральний візуальний елемент знову трансформується у карусельну
галерею карток (Carousel UI), проте з іншим функціональним призначенням. На
поточному слайді відображено картку «Маленькі добрі вчинки» з тематичним
метафоричним зображенням (картонні фігурки), під якою замість простого
підпису інтегровано повноцінну керуючу кнопку «Обрати». Це технічне рішення
переводить взаємодію користувача на новий етап — вибір конкретного
благодійного проєкту або поведінкового паттерну, ініціюючи відправку
обраного ідентифікатора активності на сервер через Fetch API.
На рисунку 3.6 представлено фінальний етап взаємодії (екрани
завершення опитування) демонструє логічне розгалуження інтерфейсу.
Рисунок 3.6. Екранна форма англомовної локалізації фінального етапу
взаємодії
Арк.
ЧДТУ 262244.001 ПЗ 61
Змн. Арк. № докум. Підпис Дата
Замість кнопок вибору відповіді додаток монтує в DOM-дерево картки
конкретних категорій допомоги, як-от «Education» (Освіта) чи «Donation»
(Донати). Головним керуючим елементом тут виступає кнопка дії «Choose the
Act» (Обрати дію). Натискання на цю кнопку завершує клієнтський сценарій,
фіксує фінальний вибір користувача в глобальному стані React-додатка та
ініціює POST-запит для збереження результатів анкетування у базі даних
системи.
Аналіз практичної реалізації користувацького інтерфейсу (UI/UX) чат-
бота «Charity Bot» дозволяє зробити висновок про успішне проектування
людино-орієнтованої та технологічно стійкої системи онлайн-комунікації.
Представлена серія екранних форм наочно ілюструє повний цикл взаємодії (User
Flow) в межах інтерактивного опитування користувача.
Розроблений дизайн та логіка інтерфейсу демонструють такі ключові
результати:
ергономіка та UX-стратегія розробки чат-бота для благодійності мають
бути спрямовані на усунення будь-яких когнітивних бар'єрів та створення
атмосфери повної прозорості й емоційної довіри, яка мотивує користувача
допомогти тут і зараз. Сценарій анкетування повністю підпорядкований
принципу мінімізації когнітивного навантаження. Завдяки використанню
покрокових індикаторів («1 of 5», «2 of 5») та блоку кнопок швидких
відповідей («Quick Replies») взаємодія зведена до інтуїтивних тапінгових
дій. Пасивний стан текстового поля введення на етапі квізу фокусує увагу
користувача суто на проходженні сценарію, що підвищує конверсію до
фінального кроку;
динамічна карусельна архітектура (Carousel UI) базується на створенні
гнучкого React-компонента циклічного гортання, який у реальному часі
адаптує кількість, розмір та вміст карток благодійних фондів під екран
користувача, забезпечуючи плавну горизонтальну навігацію (свайпи) та
миттєвий відгук інтерфейсу. Впровадження горизонтальної галереї карток
Арк.
ЧДТУ 262244.001 ПЗ 62
Змн. Арк. № докум. Підпис Дата
дозволило гармонійно поєднати текстовий контент із емоційними
візуальними маркерами благодійних та екологічних проблем («Recycling»,
«Global Warming», «Education»). Стилізація компонентів засобами
Tailwind CSS забезпечує плавність скролінгу та адаптивне масштабування
карток на мобільних пристроях різних розширень;
реактивне керування станом забезпечує миттєве оновлення інтерфейсу
чат-бота у відповідь на будь-які дії користувача (клік по категорії, вибір
суми донату, зміна платіжного статусу) без перезавантаження сторінки,
гарантуючи синхронізацію внутрішніх даних додатка із сервером у режимі
реального часу. Послідовна зміна контенту на скріншотах доводить
коректність налаштування внутрішнього стану (State) у React.js. Заміна
варіантів відповідей, очищення DOM-дерева від застарілих елементів та
рендеринг фінального блоку з кнопкою дії «Choose the Act» відбуваються
миттєво та безшовно, демонструючи головні переваги односторінкових
застосунків (SPA);
уніфікація під міжнародні стандарти вимагає адаптації інтерфейсу та коду
React-додатка до глобальних вимог безпеки, доступності та локалізації, що
дозволяє легально й ефективно залучати благодійні внески від іноземних
донорів у будь-якій точці світу. Вибір англійської мови як базової для
інтерфейсу дозволив створити універсальну платформу для глобального
благодійного руху. Структура кодової бази компонентів виявилася
повністю стійкою до довжини англомовних рядків, зберігаючи геометрію
та візуальний баланс сітки Tailwind CSS на кожному етапі діалогу.
Таким чином, візуальний та функціональний каркас системи,
відображений на екранних формах, повністю підтверджує готовність фронтенд-
частини чат-бота до інтеграції з реальними серверними API-шлюзами та
використання у сфері міжнародного соціального інжинірингу.
Арк.
ЧДТУ 262244.001 ПЗ 63
Змн. Арк. № докум. Підпис Дата
3.5 Тестування
Верифікація працездатності фронтенд-частини чат-бота «Charity Bot»
реалізована за допомогою комбінованого підходу, що включає автоматизоване
модульне тестування (Unit Testing) та візуальний контроль адаптивності
розмітки. Основною метою автоматизованого тестування є перевірка
коректності функціонування логіки перемикання станів (State Management)
React-компонентів під час інтерактивної взаємодії з користувачем. Для
написання та виконання тестів було обрано фреймворк Vitest, який інтегрується
у середовище збірки Vite, та бібліотеку React Testing Library, що дозволяє
емулювати поведінку реального користувача в браузері та перевіряти стан DOM-
дерева.
Особливу увагу в процесі тестування приділено перевірці умовного
рендерингу (Conditional Rendering) під час проходження опитування та обробці
асинхронних відповідей, що імітують запити Fetch API. Автоматизовані сценарії
покривають три ключові етапи: первинний запуск системи та відображення
стартового вітання, реактивне оновлення інтерфейсу при переході між кроками
опитування, а також коректність монтування фінального екрана результатів із
каруселлю рекомендацій. Окрім логічних тестів, було проведено ручне
кросбраузерне тестування за допомогою інструментів розробника (Chrome
DevTools) для верифікації гнучкості утилітарних класів Tailwind CSS на екранах
із різною щільністю пікселів та співвідношенням сторін.
Тест 1: Перевірка початкового стану та відображення першого запитання.
Цей тест перевіряє, чи правильно компонент чату зчитує початковий крок
опитування та чи виводить на екран текст, який відповідає першому скріншоту.
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import CharityBotQuiz from './CharityBotQuiz';
describe('Charity Bot Quiz - Початковий стан', () => {
Арк.
ЧДТУ 262244.001 ПЗ 64
Змн. Арк. № докум. Підпис Дата
it('має коректно рендерити перше запитання опитування та індикатор
кроку', () => {
// Монтуємо компонент у віртуальний DOM
render(<CharityBotQuiz />);
// Перевіряємо наявність індикатора першого кроку
const stepIndicator = screen.getByText(/1 of 5/i);
expect(stepIndicator).toBeInTheDocument();
// Перевіряємо, чи відображається текст першого запитання
const questionText = screen.getByText(/Давати їжу бідним чи
переробляти відходи/i);
expect(questionText).toBeInTheDocument();
// Перевіряємо наявність кнопок швидкої відповіді
const recyclingButton = screen.getByRole('button', { name: /Переробка/i });
expect(recyclingButton).toBeInTheDocument();
});
});
Тест 2: Перевірка логіки перемикання станів (Перехід до кроку 2). Цей
тест емулює клік користувача по кнопці швидкої відповіді на першому екрані та
перевіряє, чи реактивно змінився стан системи на другий крок (відповідно до
другого скріншоту).
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect } from 'vitest';
import CharityBotQuiz from './CharityBotQuiz';
describe('Charity Bot Quiz - Динаміка станів', () => {
Арк.
ЧДТУ 262244.001 ПЗ 65
Змн. Арк. № докум. Підпис Дата
it('має оновлювати інтерфейс до кроку 2 після вибору варіанту
користувачем', async () => {
render(<CharityBotQuiz />);
// Знаходимо кнопку відповіді на першому кроці
const actionButton = screen.getByRole('button', { name: /Переробка/i });
// Емулюємо реальний клік користувача
await userEvent.click(actionButton);
// Перевіряємо, чи змінився індикатор кроку на "2 of 5"
const nextStepIndicator = screen.getByText(/2 of 5/i);
expect(nextStepIndicator).toBeInTheDocument();
// Перевіряємо, чи з'явилося нове запитання про глобальне потепління
const newQuestion = screen.getByText(/соціальні проблеми чи глобальне
потепління/i);
expect(newQuestion).toBeInTheDocument();
});
});
Проведене автоматизоване та візуальне тестування користувацького
інтерфейсу підтвердило високу стабільність, відмовостійкість та адаптивність
розробленої фронтенд-частини чат-бота «Charity Bot». Написані модульні тести
в середовищі Vitest повністю верифікували логіку реактивного керування
станами React при переході між етапами опитування, гарантуючи коректність
умовного рендерингу елементів та оновлення DOM-дерева без архітектурних
збоїв. Паралельний контроль інтерфейсу за допомогою інструментів розробника
довів стійкість та гнучкість утилітарної верстки Tailwind CSS на різних типах
мобільних екранів. У підсумку, фаза верифікації продемонструвала повну
Арк.
ЧДТУ 262244.001 ПЗ 66
Змн. Арк. № докум. Підпис Дата
готовність системи до безперебійної клієнт-серверної взаємодії, масштабування
контенту та фінального релізу веб-орієнтованої платформи.
3.6 Висновки до розділу 3
В третьому розділі детально описано процес комплексної реалізації,
проєктування дизайну та тестування користувацької частини web-орієнтованої
системи онлайн-комунікації «Charity Bot», що дозволило створити цілісний,
відмовостійкий та людино-орієнтований продукт. Інтеграція компонентного
підходу React.js забезпечила реактивне керування станами системи під час
покрокового анкетування, а утилітарний фреймворк Tailwind CSS дозволив
реалізувати адаптивний, мобільно-орієнтований інтерфейс за принципом Mobile-
First з гнучкою карусельною архітектурою карток. Надійна інкапсуляція
мережевої логіки через Fetch API заклала стійку основу для асинхронного обміну
даними та обробки HTTP-статусів відповідей. Фінальний етап автоматизованого
верифікаційного контролю у середовищі Vitest разом із кросбраузерним
тестуванням розмітки повністю підтвердив архітектурну стабільність DOM-
дерева, точність умовного рендерингу та готовність англомовного інтерфейсу
платформи до масштабування і безперебійної клієнт-серверної взаємодії в
реальних операційних умовах.
Арк.
ЧДТУ 262244.001 ПЗ 67
Змн. Арк. № докум. Підпис Дата
ВИСНОВКИ
Актуальність розробки web-орієнтованої системи онлайн комунікації,
зокрема чат-боту для збору благодійних коштів, на сьогодні обумовлена
необхідністю подолання критичних бар'єрів у сфері благодійності, які знижують
ефективність зборів та уповільнюють надання допомоги. Сучасна технологія
чат-ботів виступає фундаментальним інструментом у парадигмі цифрової
трансформації, дедалі глибше інтегруючись у структуру інтерактивних
інноваційних систем. Головний вектор її розвитку спрямований на створення
безшовного, інтуїтивного та адаптивного середовища для комунікації з онлайн-
користувачами безпосередньо в месенджерах, де сьогодні зосереджена
найбільша залученість аудиторії. Технологія ЧБ охоплює сукупність методів,
прийомів, форм і засобів, що дозволяють інтенсифікувати й урізноманітнити
онлайн взаємодію користувачів в месенджерах, підвищити рівень успішності та
ефективності бізнесу в комунікаціях зі своїми споживачами та майбутніми
клієнтами.
У кваліфікаційній роботі розроблено користувацьку частину web -
орієнтованої системи онлайн комунікації, зокрема чат-бот для збору благодійних
коштів. Розробка користувацької частини (Frontend) системи благодійного чат-
бота на стеку React.js, Tailwind CSS та Fetch API дозволяє створити
високоефективний, швидкий та адаптивний інтерфейс, адаптований під сучасні
вимоги Mobile-First. Використання React.js забезпечує реактивне керування
станом додатка, гнучку карусельну архітектуру (Carousel UI) для вибору фондів
та безшовну зміну кроків діалогу в реальному часі без перезавантаження
сторінки. Фреймворк Tailwind CSS гарантує високу ергономічність, сучасний
візуальний UX та доступність (Accessibility) інтерфейсу для різних категорій
користувачів при мінімальному розмірі коду. Інтеграція Fetch API забезпечує
надійну, асинхронну взаємодію з сервером і платіжними шлюзами для
безпечного збору коштів та миттєвого оновлення лічильників донатів. У
підсумку, даний технологічний стек дозволяє автоматизувати рутинну
Арк.
ЧДТУ 262244.001 ПЗ 68
Змн. Арк. № докум. Підпис Дата
комунікацію, усунути когнітивні бар'єри перед донорами, підвищити рівень
довіри до благодійних фондів та забезпечити максимальну конверсію
відвідувачів у реальні внески.
Візуальна концепція та дизайн інтерфейсу чат-бота, реалізовані за
допомогою Tailwind CSS, відіграють вирішальну роль у перетворенні
відвідувача на реального благодійника. Дизайн у цій системі є не просто
естетичним оформленням, а стратегічним інструментом побудови емоційної
довіри та максимальної ергономічності.
Серед перспектив дослідження можливим є розроблення додаткових
варіантів користувацького інтерфейсу та наповнення їх новим контентом для
розширення кількості благодійних ініціатив. Доцільним також є розширення
цільової аудиторії та кількості активних онлайн користувачів за рахунок
інтеграції ЧБ з іншими месенджер платформами, такими як Telegram, WeChat,
WhatsApp, Apple Business Chat тощо.
Арк.
ЧДТУ 262244.001 ПЗ 69
Змн. Арк. № докум. Підпис Дата
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Курилець О.С. Чат-боти як нове покоління каналів комунікації /
О.С. Курилець // Маркетингова освіта в Україні : тези IV Міжнар. наук.-практ.
конф., 29–30 берез. 2018 р., м. Київ / М-во освіти і науки України, ДВНЗ «Київ.
нац. екон. ун-т ім. Вадима Гетьмана» [та ін.] ; [редкол.: А. В. Федорченко, О. К.
Шафалюк, В. П. Пилипчук]. – Київ : КНЕУ. – 2018. – С. 52–54.
2. Провотар О.І., Клочко Х.А. Особливості та проблеми віртуального
спілкування за допомогою чат-ботів / О.І. Провотар, Х.А. Клочко // Наукові
праці ВНТУ ВНТУ. – 2013. – С. 11–26.
3. Chatterbot. [Електронний ресурс]. // Wikipedia, the free encyclopedia. –
Режим доступу: https://en.wikipedia.org/wiki/Chatterbot. Дата звернення –
28.03.2026.
4. What are the benefits of using chatbots? [Електронний ресурс]. – Режим
доступу : https://www.marutitech.com/benefits-chatbot/. Дата звернення –
28.03.2026.
5. Технологія чат-бот як чинник комп'ютерно-посередницької
комунікації цифрового суспільства / А. В. Баранова та ін. ResearchGate. 2022. 12
с. URL: researchgate.net (дата звернення: 02.05.2026).
6. Top 10 Platforms To Build A Chatbot For Your Business. [Електронний
ресурс] – Режим доступу : https://chatbotsmagazine.com/top-10-platforms-to-build-
a-chatbot-for-your-business-6393ed047be7. Дата звернення – 02.04.2026.
7. Чат-боти як інструмент для популяризації матеріалів ЗМІ та
оптимізації процесів. Вчені записки Львівської політехніки. Серія: Соціально-
гуманітарні науки. 2021. № 2 (30). С. 76–81. URL: lpnu.ua (дата звернення:
02.05.2026).
8. Основи використання чат-ботів в інтернет-маркетингу. Економічний
науковий журнал. 2020. № 5. С. 42–48. URL: ei-journal.in.ua (дата звернення:
02.06.2026).
Арк.
ЧДТУ 262244.001 ПЗ 70
Змн. Арк. № докум. Підпис Дата
9. What are the benefits of using chatbots? [Електронний ресурс]. – Режим
доступу : https://www.marutitech.com/benefits-chatbot/. Дата звернення –
02.04.2026.
10. 15 Visual Content Marketing Statistics to Know for 2021 [Infographic]
[Електронний ресурс]. – Режим доступу: https://venngage.com/blog/visual-content-
marketing-statistics/. Дата звернення – 02.04.2022.
11. Прокопенко Т.О., Обойщик О.Б. Особливості використання чатботів
для бізнесу у сучасних месенджер чатах / Т.О. Прокопенко, О.Б. Обойщик //
Вісник Черкаського державного технологічного університету. – 2019. – № 1. –
С. 11 – 16.
12. What ‘social artificial intelligence’ means for marketers. [Електронний
ресурс]. – Режим доступу : https://venturebeat.com/2017/02/07/what-social-
artificial-intelligence-means-for-marketers/. Дата звернення – 12.04.2022.
13. Чат-боти для бізнесу: вигоди та ризики застосування // Сучасні
технології управління бізнесом : матеріали міжнар. наук.-практ. конф. Житомир:
ЖДТУ, 2021. С. 214–217. URL: ztu.edu.ua (дата звернення: 02.06.2026).
14. De Angeli, A., Johnson, G.I., Coventry, L.: The unfriendly user: exploring
social reactions to chatterbot / A. De Angeli, G.I. Johnson, L. Coventry // Proceedings
of the International Conference on Affective Human Factors Design. – London, 2001.
– P. 467 – 474.
15. Shum H., He X., Li D. From Eliza to XiaoIce: challenges and
opportunities with social chatbots / H. Shum, X. He, D. Li // Frontiers Inf Technol
Electronic Eng. – 2018. – № 19 . – P. 10 – 26.
16. Чат-боти та системи рекомендацій у сфері персоналізованої
цифрової взаємодії. Universum. 2023. № 4 (12). С. 15–20. URL: liga.science (дата
звернення: 02.06.2026).
17. V-Soft Consulting. Chatbots 101 [Електронний ресурс] – Режим
доступу: https://cdn2.hubspot.net/hubfs/1629777/Chatbots%20101.pdf?
t=1526138378633. дата звернення: 02.05.2026
Арк.
ЧДТУ 262244.001 ПЗ 71
Змн. Арк. № докум. Підпис Дата
18. De Lamadrid J.C. Computer Organization. Basic Processor Structure /
J.C. De Lamadrid. – Boca Raton: CRC, 2018. – 384 p.
19. Slack AI Features & AI Assistants. Slack. URL:
https://slack.com/features/ai (дата звернення: 02.05.2026).
20. Microsoft 365 Copilot | Інструменти для продуктивної роботи на
основі ШІ. Microsoft. URL: https://www.microsoft.com/uk-ua/microsoft-365-copilot
(дата звернення: 02.05.2026).
21. Mobile SDK - FAQs. Intercom Help. 2026. URL:
https://www.intercom.com/help/en/articles/7669340-mobile-sdk-faqs (дата
звернення: 02.05.2026).
22. Fox C. Go Data Structures and Algorithms / C. Fox // Bookboon.com,
2018. – 265 p.
23. Kelvin L. Data Structures & Algorithms in Swift / L. Kelvin, N. Vincent. –
Razeware, 2018. – 328 p.
24. Karumanchi N. Data Structures and Algorithms Made Easy: Data
Structure and Algorithmic Puzzles / N. Karumanchi // 5th Edition. – CareerMonk
Publications, 2017. – 828 p.
25. Павлиш В.А. Основи інформаційних технологій і систем. Підручник
[Текст] / В.А. Павлиш, Л.К. Гліненко, Н.Б. Шаховська. Львів: Видавництво
Львівської політехніки, – 2018. – 620 с.
26. Smith William. Everyday Data Structures / W. Smith. – Packt Publishing,
2017. – 385 p.
27. Kelvin L. Data Structures & Algorithms in Swift / L. Kelvin, N. Vincent. –
Razeware, 2018. – 328 p.
28. Karumanchi N. Data Structures and Algorithms Made Easy: Data
Structure and Algorithmic Puzzles / N. Karumanchi // 5th Edition. – CareerMonk
Publications, 2017. – 828 p.
29. Smith William. Everyday Data Structures / W. Smith. – Packt Publishing,
2017. – 385 p.
Арк.
ЧДТУ 262244.001 ПЗ 72
Змн. Арк. № докум. Підпис Дата
30. Campbell, Jennifer (2017). Web Design: Introductory. Cengage Learning.
p.
31. Keil, Mark; Cule, Paul E.; Lyytinen, Kalle; Schmidt, Roy C. (November
1998). "A framework for identifying software project risks". Communications of the
ACM. 41 (11): 76–83. doi:10.1145/287831.287843. ISSN 0001-0782.
32. Salas-Zárate, María del Pilar; Alor-Hernández, Giner; Valencia-García,
Rafael; Rodríguez-Mazahua, Lisbeth; Rodríguez-González, Alejandro; López
Cuadrado, José Luis (May 2015). "Analyzing best practices on Web development
frameworks: The lift approach". Science of Computer Programming. 102: 1–19.
doi:10.1016/j.scico.2014.12.004
33. Du, Xiaofeng; Song, William; Munro, Malcolm (2009), Barry, Chris;
Lang, Michael; Wojtkowski, Wita; Conboy, Kieran (eds.), "Semantic Service
Description Framework for Address", Information Systems Development, Boston,
MA: Springer US, pp. 1033–1045, doi:10.1007/978-0-387-78578-3_35, ISBN 978-0-
387-78577-6, retrieved 2023-11-30
34. Hall, Heather (2022-05-01). "Web 2.0 Explained: Everything You Need
To Know". History-Computer. Retrieved 2023-12-10.
35. Козловський А.В. Комп’ютерна техніка та інформаційні технології:
Навч. посіб. Рекомендовано МОН [Текст] / Козловський А.В., Паночишин
Ю.М., Погріщук Б.В. – В-во: Знання. – 2017. – 463 с.
36. Soni, Anuj; Gupta, Sachin; Talwandi, Navjot Singh (September 2023).
"Evolution Of Web Technologies in Recent Years" (PDF). Journal of Emerging
Technologies and Innovative Research. 10 (9). ISSN 2349-5162.
37. Mullenweg, Matt (May 27, 2003). "WordPress Now Available".
wordpress.org. WordPress. Archived from the original on July 19, 2010. Retrieved
July 22, 2010.
38. CMS Usage Statistics". builtwith.com. BuiltWith. Archived from the
original on August 6, 2013. Retrieved August 1, 2013.
Арк.
ЧДТУ 262244.001 ПЗ 73
Змн. Арк. № докум. Підпис Дата
39. Прокопенко Т. О. Теорія систем і системний аналіз : навч. посіб.
[Електронний ресурс] / Т. О. Прокопенко ; М-во освіти і науки України,Черкас.
держ. технол. ун-т. – 2-ге вид., змінене та доп. –Черкаси : ЧДТУ, 2025. – 147 с.
40. ECM Enterprise Content Management, Ulrich Kampffmeyer. Hamburg
2006, ISBN 978-3-936534-09-8. Definition, history, architecture, components and
ECM suites
41. Прокопенко Т. О., Підкуйко О.І. DevOps: навч. посіб. [Електронний
ресурс] / Т. О. Прокопенко, О.І.Підкуйко ; М-во освіти і науки України, Черкас.
держ. технол. ун-т.– Черкаси:ЧДТУ, 2025. – 160 с.
42. Aichner, T., Jacob, F. Measuring the Degree of Corporate Social Media
Use // International Journal of Market Research. – 2017. – 57 (2). – Рр. 257–275.
43. Thakkar, Mohit. Building React Apps with Server-Side Rendering: Use
React, Redux, and Next to Build Full Server-Side Rendering Applications. –
Berkeley, CA: Apress. – 2020. – Pp. 93–137.
44. Flanagan, David. JavaScript: The Definitive Guide. 7th edition. –
Sebastopol, California: O'Reilly, 2020. – Pp. 289-193.
45. Haverbeke, Marijn. Eloquent JavaScript. 3rd edition. – No Starch Press. –
2018. – 472 p.
46. Smith, Craig S. Have You Noticed The New Web? It's Faster, More
Secure. [Електронний ресурс]. – Режим доступу:
https://www.forbes.com/sites/craigsmith/2020/04/21/have-you-noticed-the-new-
web-its-faster-more-secure/. Дата звернення – 17.04.2022.
47. Krill P. Next.js 2.0 plays better with React and JavaScript [Електронний
ресурс]. – Режим доступу: https://www.infoworld.com/article/3185385/nextjs-20-
plays-better-with-react-and-javascript.html. Дата звернення – 17.04.2022.
48. Режим доступу: https://www.infoworld.com/article/3185385/nextjs-20-
plays-better-with-react-and-javascript.html. Дата звернення – 17.04.2022.
49. Managing Enterprise Content: A Unified Content Strategy. Ann Rockley,
Pamela Kostur, Steve Manning. New Riders, 2003.
Арк.
ЧДТУ 262244.001 ПЗ 74
Змн. Арк. № докум. Підпис Дата
50. Методичні рекомендації до підготовки кваліфікаційної роботи для
здобувачів освітнього ступеня «бакалавр» зі спеціальності 126 Інформаційні
системи та технології освітньої програми «Web-технології, Web-дизайн» усіх
форм навчання [Електронний ресурс] / [Упоряд.: Т.О. Прокопенко, Я.В.
Тарасенко]; М-во освіти і науки України, Черкас. держ. технол. ун-т. Черкаси:
ЧДТУ, 2021. – 48 c.
ПРОГРАМНІ ЗАСОБИ
1. Microsoft 365 © Microsoft Inc., 2026.
2. React.js : бібліотека JavaScript для створення користувацьких
інтерфейсів. React. URL: https://react.dev (дата звернення: 02.04.2026).
Арк.
ЧДТУ 262244.001 ПЗ 75
Змн. Арк. № докум. Підпис Дата
ДОДАТОК A
ЗАТВЕРДЖЕНО
Зав. кафедри ІТП, проф.
_________________ Прокопенко Т.О.
«____» ________________ 2026 р.
КОРИСТУВАЦЬКА ЧАСТИНА WEB-ОРІЄНТОВАНОЇ СИСТЕМИ ОНЛАЙН
КОМУНІКАЦІЇ
Специфікація
482 ЧДТУ 2244-01
Листів 2
Розробник _______________ Каліта М.І.
Керівник _______________ Рудницька Ю.В.
Н. Контроль _______________
Черкаси, 2026
2
482 ЧДТУ 2244-01
Позначення Найменування Примітка
Документація
482 ЧДТУ 2244-01 12 01 Текст програми
КОРИСТУВАЦЬКА ЧАСТИНА WEB-ОРІЄНТОВАНОЇ СИСТЕМИ ОНЛАЙН
КОМУНІКАЦІЇ
482 ЧДТУ 2244-01 12 01
Текст програми
Листів 8
Розробник _____________ Каліта М.І.
Н
2026
6
482 ЧДТУ 2244-01 34 01
Лістинг програмного коду файлу src/components/Onboarding.jsx
import React, { useState, useEffect } from 'react';
export default function Onboarding({ onStartDonation }) {
// Стан для збереження фінансових даних збору
const [campaign, setCampaign] = useState({ current: 0, target: 0, title: '' });
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
// Fetch-запит до API для отримання актуального статусу збору
useEffect(() => {
fetch('https://charityfund.org') // Замініть на ваш реальний URL API
.then((response) => {
if (!response.ok) throw new Error('Не вдалося завантажити дані збору.');
return response.json();
})
.then((data) => {
setCampaign({
title: data.title || 'Збір на тактичну медицину та аптечки',
current: data.currentAmount || 75000,
target: data.targetAmount || 100000,
});
setLoading(false);
})
.catch((err) => {
setError(err.message);
setLoading(false);
});
}, []);
// Розрахунок відсотка виконання збору для шкали Tailwind
const percentage = campaign.target > 0
? Math.min(Math.round((campaign.current / campaign.target) * 100), 100)
: 0;
7
482 ЧДТУ 2244-01 34 01
if (loading) {
// Етап 5: Скелетон-заглушка під час завантаження даних
return (
<div className="max-w-md mx-auto my-8 p-6 bg-white rounded-2xl shadow-lg animate-
pulse">
<div className="h-6 bg-gray-200 rounded w-3/4 mb-4"></div>
<div className="h-4 bg-gray-200 rounded w-full mb-2"></div>
<div className="h-4 bg-gray-200 rounded w-5/6 mb-6"></div>
<div className="h-4 bg-gray-200 rounded-full w-full mb-4"></div>
<div className="h-12 bg-gray-200 rounded-xl w-full"></div>
</div>
);
}
if (error) {
// Етап 5: Відображення помилки, якщо сервер недоступний
return (
<div className="max-w-md mx-auto my-8 p-6 bg-red-50 text-red-700 rounded-2xl border
border-red-200 text-center">
<p className="font-semibold mb-2">Сталася помилка</p>
<p className="text-sm mb-4">{error}</p>
<button
onClick={() => window.location.reload()}
className="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-
red-700 transition"
>
Спробувати знову
</button>
</div>
);
}
return (
8
482 ЧДТУ 2244-01 34 01
<div className="max-w-md mx-auto my-8 bg-slate-50 rounded-2xl shadow-xl overflow-
hidden border border-slate-100 font-sans">
{/* Шапка чат-бота */}
<div className="bg-blue-600 p-4 flex items-center gap-3 text-white">
<div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center text-xl
animate-bounce">
��
</div>
<div>
<h3 className="font-bold text-lg leading-tight">Помічник фонду</h3>
<p className="text-xs text-blue-100">Онлайн • Відповідає миттєво</p>
</div>
</div>
{/* Комунікативна частина (Вікно чату) */}
<div className="p-6 space-y-4">
{/* Привітання від бота */}
<div className="flex items-start gap-2">
<div className="bg-blue-100 text-blue-800 p-3 rounded-2xl rounded-tl-none text-sm max-
w-[85%] shadow-sm">
Вітаю! Я ваш цифровий асистент. Дякую, що завітали. Разом ми наближаємо перемогу
та рятуємо життя! ����
</div>
</div>
{/* Картка актуального збору */}
<div className="bg-white p-4 rounded-xl shadow-sm border border-slate-100 space-y-3">
<span className="inline-block text-[10px] uppercase tracking-wider font-bold bg-
amber-100 text-amber-800 px-2 py-0.5 rounded-md">
�� Терміновий збір
</span>
<h4 className="font-bold text-slate-800 text-base leading-snug">
{campaign.title}
</h4>
9
482 ЧДТУ 2244-01 34 01
{/* Інтерактивний прогрес-бар (Етап 2) */}
<div className="space-y-1">
<div className="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
<div
className="bg-emerald-500 h-3 rounded-full transition-all duration-1000 ease-out"
style={{ width: `${percentage}%` }}
></div>
</div>
<div className="flex justify-between text-xs font-semibold text-slate-500 pt-1">
<span>Зібрано: {campaign.current.toLocaleString()} грн</span>
<span className="text-emerald-600">{percentage}%</span>
</div>
<div className="text-xs text-right text-slate-400">
Ціль: {campaign.target.toLocaleString()} грн
</div>
</div>
</div>
{/* Візуальний якір: Кнопка заклику до дії */}
<button
onClick={onStartDonation}
className="w-full mt-2 bg-blue-600 hover:bg-blue-700 active:scale-[0.98] text-white font-
bold py-3 px-4 rounded-xl shadow-md shadow-blue-200 transition-all duration-200 flex items-center
justify-center gap-2"
>
<span>�� Підтримати фонд</span>
</button>
</div>
</div>
);
}
Лістинг програмного коду файлу src/components/DonationForm.jsx:
10
482 ЧДТУ 2244-01 34 01
import React, { useState } from 'react';
export default function DonationForm({ onBack }) {
// Список фіксованих сум для швидкого вибору
const presetAmounts = [50, 100, 200, 500];
// Стан компонента
const [amount, setAmount] = useState(''); // Сума донату
const [loading, setLoading] = useState(false); // Стан запиту до банку
const [error, setError] = useState(null); // Помилки API
// Обробник вибору фіксованої суми
const handlePresetClick = (preset) => {
setAmount(preset.toString());
setError(null);
};
// Обробник зміни значення у полі ручного введення
const handleInputChange = (e) => {
const value = e.target.value.replace(/\D/g, ''); // Дозволяємо лише цифри
setAmount(value);
setError(null);
};
// Крок 3: Відправка даних на бекенд через Fetch API (POST-запит)
const handlePaymentSubmit = async (e) => {
e.preventDefault();
const donationAmount = parseInt(amount, 10);
// Валідація введення на фронтенді
if (!donationAmount || donationAmount <= 0) {
setError('Будь ласка, вкажіть коректну суму донату.');
return;
11
482 ЧДТУ 2244-01 34 01
}
setLoading(true);
setError(null);
try {
const response = await fetch('https://charityfund.org', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ amount: donationAmount }),
});
if (!response.ok) {
throw new Error('Помилка сервера під час ініціалізації платежу.');
}
const data = await response.json();
// Якщо платіжний шлюз успішно повернув лінк (наприклад, LiqPay або Monobank)
if (data.checkoutUrl) {
// Етап 4: Перенаправлення користувача на безпечну сторінку оплати банку
window.location.href = data.checkoutUrl;
} else {
throw new Error('Сервер не повернув посилання на платіжну сторінку.');
}
} catch (err) {
// Етап 5: Обробка мережевих та серверних помилок
setError(err.message || 'Щось пішло не так. Спробуйте пізніше.');
setLoading(false);
}
};
12
482 ЧДТУ 2244-01 34 01
return (
<div className="max-w-md mx-auto my-8 bg-white rounded-2xl shadow-xl border border-
slate-100 overflow-hidden font-sans">
{/* Шапка з можливістю повернутися назад */}
<div className="bg-blue-600 p-4 flex items-center gap-3 text-white">
<button
onClick={onBack}
className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center font-bold
hover:bg-white/30 transition active:scale-95"
disabled={loading}
>
←
</button>
<div>
<h3 className="font-bold text-lg leading-tight">Оформлення донату</h3>
<p className="text-xs text-blue-100">Безпечна оплата через платіжний шлюз</p>
</div>
</div>
<form onSubmit={handlePaymentSubmit} className="p-6 space-y-6">
{/* Крок 2: Блок швидкого донату (Кнопки) */}
<div className="space-y-2">
<label className="text-sm font-semibold text-slate-600 block">
Оберіть суму підтримки:
</label>
<div className="grid grid-cols-4 gap-2">
{presetAmounts.map((preset) => (
<button
key={preset}
type="button"
onClick={() => handlePresetClick(preset)}
disabled={loading}
className={`py-3 px-2 text-sm font-bold rounded-xl border transition-all duration-150 ${
13
482 ЧДТУ 2244-01 34 01
amount === preset.toString()
? 'bg-blue-600 border-blue-600 text-white shadow-md shadow-blue-100'
: 'bg-slate-50 border-slate-200 text-slate-700 hover:bg-slate-100 hover:border-slate-300'
}`}
>
{preset} ₴
</button>
))}
</div>
</div>
{/* Крок 2: Поле для введення власної суми */}
<div className="space-y-2">
<label className="text-sm font-semibold text-slate-600 block">
Або введіть іншу суму (₴):
</label>
<div className="relative">
<input
type="text"
value={amount}
onChange={handleInputChange}
disabled={loading}
placeholder="Введіть суму"
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl font-bold
text-slate-800 text-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition"
/>
{amount && (
<span className="absolute right-4 top-1/2 -translate-y-1/2 font-bold text-slate-400">
UAH
</span>
)}
</div>
</div>
14
482 ЧДТУ 2244-01 34 01
{/* Етап 5: Повідомлення про помилку */}
{error && (
<div className="p-3 bg-red-50 text-red-700 text-sm font-medium rounded-xl border border-
red-100 animate-shake">
⚠️ {error}
</div>
)}
{/* Платіжна кнопка «Підтримати» з блокуванням під час завантаження */}
<button
type="submit"
disabled={loading || !amount}
className={`w-full py-4 rounded-xl text-white font-bold text-base shadow-md transition-all
duration-200 flex items-center justify-center gap-2 ${
loading || !amount
? 'bg-slate-300 cursor-not-allowed shadow-none'
: 'bg-emerald-500 hover:bg-emerald-600 active:scale-[0.98] shadow-emerald-100'
}`}
>
{loading ? (
<div className="flex items-center gap-2">
{/* Анімований спінер завантаження */}
<svg className="animate-spin h-5 w-5 text-white" viewBox="0 0 24 24" fill="none">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0
5.373 0 12h4z" />
</svg>
<span>З'єднання з банком...</span>
</div>
) : (
<>
<span>��</span>
15
482 ЧДТУ 2244-01 34 01
<span>Перейти до оплати {amount ? `${parseInt(amount).toLocaleString()} ₴` :
''}</span>
</>
)}
</button>
</form>
</div>
);
}
Лістинг програмного коду файлу src/components/SuccessPayment.jsx:
import React, { useState, useEffect } from 'react';
import Onboarding from './components/Onboarding';
import DonationForm from './components/DonationForm';
import SuccessPayment from './components/SuccessPayment';
export default function App() {
// Керування екранами додатка: 'onboarding' | 'form' | 'success'
const [screen, setScreen] = useState('onboarding');
const [finalAmount, setFinalAmount] = useState(0);
// Перевірка, чи повернувся користувач після успішної оплати від банку
useEffect(() => {
const queryParams = new URLSearchParams(window.location.search);
const status = queryParams.get('status');
const amount = queryParams.get('amount');
if (status === 'success' && amount) {
setFinalAmount(amount);
setScreen('success');
// Очищаємо URL-параметри в браузері, щоб при перезавантаженні сторінки екран
успіху не висів вічно
window.history.replaceState({}, document.title, window.location.pathname);
16
482 ЧДТУ 2244-01 34 01
}
}, []);
// Скидання стану до початкового
const handleReset = () => {
setFinalAmount(0);
setScreen('onboarding');
};
return (
<div className="min-h-screen bg-slate-100 flex flex-col justify-center p-4">
{/* Умовний рендеринг екранів відповідно до User Flow */}
{screen === 'onboarding' && (
<Onboarding onStartDonation={() => setScreen('form')} />
)}
{screen === 'form' && (
<DonationForm onBack={() => setScreen('onboarding')} />
)}
{screen === 'success' && (
<SuccessPayment amount={finalAmount} onReset={handleReset} />
)}
</div>
);
}
Арк.
ЧДТУ 22000.004 ПЗ 73
Змн. Арк. № докум. Підпис Дата