Мобільний застосунок для організації волонтерських ініціатив з використанням технології прогресивних вебзастосунків

ЗОЗУЛЯ, Дмитро
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/7285
Title:	Мобільний застосунок для організації волонтерських ініціатив з використанням технології прогресивних вебзастосунків
Authors:	РОЗЛОМІЙ, Інна ЗОЗУЛЯ, Дмитро
Keywords:	ПРОГРЕСИВНИЙ ВЕБ-ДОДАТОК;ВОЛОНТЕРСЬКА ДІЯЛЬНІСТЬ;БЛАГОДІЙНІ ЗБОРИ;MONOBANK;АВТОМАТИЗАЦІЯ;СОЦІАЛЬНІ МЕРЕЖІ;ІНТЕГРАЦІЯ API;ЗВІТНІСТЬ;ЦИФРОВІ ТЕХНОЛОГІЇ;КРОСПЛАТФОРМЕНІСТЬ
Issue Date:	2025
Abstract:	Метою виконання даної кваліфікаційної роботи на здобуття освітнього ступеня «бакалавр» є розробка мобільного застосунку для організації волонтерських ініціатив з використанням технології прогресивних WEB- додатків. Загальний обсяг роботи становить 78 сторінок. У роботі 12 рисунків. Для виконання роботи використано 25 літературних джерел. Головне завдання – це розробка прогресивного веб-додатку, який дозволяє волонтерам ефективно створювати та керувати зборами коштів, інтегрувати їх із фінансовими сервісами (зокрема Monobank), автоматично поширювати інформацію в соціальних мережах та формувати прозорі звіти про використання зібраних коштів. Стислий опис розділів кваліфікаційної роботи бакалавра складається з аналізу предметної області та постановки задачі; вибору технологій та інструментальних засобів; розробкиінформаційної системидля організації волонтерських ініціативяк прогресивного веб-додатку.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/7285
Appears in Collections:	123 Комп’ютерна інженерія (Комп'ютерні системи та мережі)
Files in This Item:
File	Description	Size	Format
1_ТИТУЛКА_Зозуля-merged.pdf Restricted Access		1.99 MB	Adobe PDF	View/Open Request a copy
Show full item record
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНОЇ БЕЗПЕКИ ТА КОМП’ЮТЕРНОЇ ІНЖЕНЕРІЇ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему:«Мобільний застосунок для організації
волонтерських ініціатив з використанням технології
прогресивних вебзастосунків»
ЧДТУ.252046.005 ПЗ
Виконав: студент 4 курсу, групи КМ-2105
спеціальності 123 – «Комп’ютерна інженерія»
за освітньою програмою – «Комп’ютерні системи
та мережі»
Дмитро ЗОЗУЛЯ
Керівник
к.т.н., доцент
Інна РОЗЛОМІЙ
Рецензент
к.т.н., доцент кафедри КІ та ІТ, ЧДБК
Сергій БУРМІСТРОВ
«ЗАХИСТ ДОЗВОЛЯЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор ___________ Віра БАБЕНКО
Черкаси 2025 року
Форма № Н-9.01
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет: інформаційних технологій і систем
Кафедра: інформаційної безпеки та комп’ютерної інженерії
Освітньо-кваліфікаційний рівень: Бакалавр
Спеціальність 123 – Комп’ютерна інженерія
Освітня програма Комп’ютерні системи та мережі
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор _____________ Віра БАБЕНКО
«28» лютого 2025 року
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Зозулі Дмитру Олеговичу
(прізвище, ім‘я, по батькові)
1. Тема роботи: Мобільний застосунок для організації волонтерських ініціатив
з використанням технології прогресивних вебзастосунків
Керівник роботи: к.т.н., доцент Розломій Інна Олександрівна
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «25» лютого 2025 р. № 53/03-03
2. Строк подання студентом роботи:
3. Вихідні дані до роботи:
Архітектура застосунку – монолітна; кросплатформеність. технологія - прогресивний
вебзастосунок, Docker; спрямованість діяльності для автоматизації - волонтерська діяльність,
благодійні збори; підтримка роботи з: платіжною системою Monobank, ,соціальними мережами,
інтеграція API, звітність, візуалізація даних, СУБД MySQL, мова програмування JavaScript.
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
1. Аналіз предметної області та постановка задачі
2. Вибір технологій та інструментальних засобів
3. Розробкамобільного застосунку для організації волонтерських ініціатив
з використанням технології прогресивних WEB-додатків
4. Захист мобільного застосунку для організації волонтерських ініціатив
з використанням технології прогресивних WEB-додатків
Висновки
Додатки. Список використаних джерел
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів):
Додаток А Специфікація
Додаток Б Текст програм
Додаток В Інструкція користувача
Розділ Прізвище, ініціали Підпис, дата
консультанта завдання видав завдання прийняв
7. Дата видачі завдання: 28 лютого 2025 року
КАЛЕНДАРНИЙ ПЛАН
Термін
№ з/п Назва етапів роботи виконання Примітка
етапів роботи
1 Збір матеріалу 01.03 – 14.03 виконано
2 Обробка матеріалу 15.03 – 20.03 виконано
3 Обґрунтування актуальності виконання досліджень 21.03 - 25.03 виконано
4 Оцінка стану проблеми, виокремлення дослідницьких виконано
задач, постановка задачі дослідження 26.03 – 01.04
5 Викладення сутності і результатів дослідження 03.04 - 08.04 виконано
6 Практичне застосування результатів дослідження 09.04 - 27.04 виконано
7 Оформлення результатів в пояснювальну записку 28.04 - 02.05 виконано
8 Подання роботи на відгук та рецензування 15.05 - 20.05 виконано
Студент ___________________________ Дмитро ЗОЗУЛЯ
(підпис)
Керівник роботи ___________________________ Інна РОЗЛОМІЙ
(підпис)
АНОТАЦІЯ
Метою виконання даної кваліфікаційної роботи на здобуття освітнього
ступеня «бакалавр» є розробка мобільного застосунку для організації
волонтерських ініціатив з використанням технології прогресивних WEB-
додатків.
Загальний обсяг роботи становить 78 сторінок. У роботі 12 рисунків. Для
виконання роботи використано 25 літературних джерел.
Головне завдання – це розробка прогресивного веб-додатку, який
дозволяє волонтерам ефективно створювати та керувати зборами коштів,
інтегрувати їх із фінансовими сервісами (зокрема Monobank), автоматично
поширювати інформацію в соціальних мережах та формувати прозорі звіти про
використання зібраних коштів.
Стислий опис розділів кваліфікаційної роботи бакалавра складається з
аналізу предметної області та постановки задачі; вибору технологій та
інструментальних засобів; розробкиінформаційної системидля організації
волонтерських ініціативяк прогресивного веб-додатку.
Ключові слова: ПРОГРЕСИВНИЙ ВЕБ-ДОДАТОК, ВОЛОНТЕРСЬКА
ДІЯЛЬНІСТЬ, БЛАГОДІЙНІ ЗБОРИ, MONOBANK, АВТОМАТИЗАЦІЯ,
СОЦІАЛЬНІ МЕРЕЖІ, ІНТЕГРАЦІЯ API, ЗВІТНІСТЬ, ЦИФРОВІ
ТЕХНОЛОГІЇ, КРОСПЛАТФОРМЕНІСТЬ
ANOTATION
The purpose of this qualification work for the degree of Bachelor is to develop
a mobile application for organizing volunteer initiatives using the technology of
progressive WEB applications.
The total volume of the work is 78 pages. The work contains 12 figures. 25
literary sources were used to perform the work.
The main task is to develop a progressive web application that allows
volunteers to effectively create and manage fundraising, integrate them with financial
services (in particular, Monobank), automatically distribute information on social
networks and generate transparent reports on the use of collected funds.
A brief description of the sections of the bachelor's qualification work consists
of an analysis of the subject area and the statement of the task; selection of
technologies and tools; development of an information system for organizing
volunteer initiatives using the technology of progressive WEB applications.
Key words: PROGRESSIVE WEB APPLICATION, VOLUNTEERING,
CHARITY FUNDRAISING, MONOBANK, AUTOMATION, SOCIAL
NETWORKS, API INTEGRATION, REPORTING, DIGITAL TECHNOLOGIES,
CROSS-PLATFORM
ЗМІСТ
ВСТУП……………………………………………………………………………..4
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАДАЧІ…….…..7
1.1 Аналіз існуючих систем………………………...………….………….7
1.2 Постановка задачі………...………………………………………...…11
1.3 Висновок до розділу…… ………………………………….…………16
2 ВИБІР ТЕХНОЛОГІЙ ТА ІНСТРУМЕНТАЛЬНИХ ЗАСОБІВ………......17
2.1 Огляд існуючих технологій……………………………….………….17
2.2 Обґрунтування вибору…..………………………………………...….25
2.3 Висновок до розділу ……………………………………….…………32
3 РОЗРОБКАМОБІЛЬНОГО ЗАСТОСУНКУ ДЛЯ ОРГАНІЗАЦІЇ
ВОЛОНТЕРСЬКИХ ІНІЦІАТИВ З ВИКОРИСТАННЯМ ТЕХНОЛОГІЇ
ПРОГРЕСИВНИХ ВЕБЗАСТОСУНКІВ………………………...…………33
3.1 Структура системи……………...………………………………..…...33
3.2 Опис функцій системи………………………………………………..38
3.3 Технічні вимоги для роботи з системою…………………………….44
3.4 Оцінка ефективності………………………………………………….46
3.5 Висновки до розділу………………………………………………….48
4 ЗАХИСТ МОБІЛЬНОГО ЗАСТОСУНКУ ДЛЯ ОРГАНІЗАЦІЇ
ВОЛОНТЕРСЬКИХ ІНІЦІАТИВ З ВИКОРИСТАННЯМ ТЕХНОЛОГІЇ
ПРОГРЕСИВНИХ ВЕБЗАСТОСУНКІВ…..…………………..………..….49
4.1 Огляд існуючих рішень …………………..………….………………49
4.2 Реалізація захисту даних користувачів……………………….….….55
4.3 Висновки до розділу…………..…………………………….…….….57
ЧДТУ.252046.005 ПЗ
Змн. Арк. № докум. Підпис Дата
РКоазробив Зозуля Д.О. Мобільний застосунок для Літ. Лист Листів
Кфеердівник РозломійІ.О. організації волонтерських 2 78
Рреацензент Бурмістров С. ініціатив з використанням
НК.Контроль Гресько С.О. технології прогресивних Кафедра ІБ та КІ
К вебзастосунків
Затвердив Бабенко В.Г. Пояснювальна записка гр. КМ-2105
-
06
ВИСНОВКИ……………………………………………………………………...58
ДОДАТКИ:
А – 482.ЧДТУ.52046-01 Мобільний застосунок для організації
волонтерських ініціатив з використанням технології
прогресивних вебзастосунків
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ……………………………...………..76
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 3
а
ВСТУП
Актуальність теми. У сучасних умовах активного розвитку цифрових
технологій значну роль відіграє використання інформаційних систем у різних
сферах суспільного життя, зокрема в сфері громадських ініціатив та
волонтерської діяльності. В умовах зростання потреб у швидкій координації,
прозорості фінансових операцій та ефективній взаємодії з громадськістю,
особливої ваги набуває створення спеціалізованих цифрових інструментів,
які дозволяють автоматизувати та оптимізувати відповідні процеси.
Зокрема, волонтерська діяльність часто передбачає організацію збору
коштів, інформування суспільства про потреби, звітування про витрати та
досягнуті результати. У більшості випадків ці процеси виконуються вручну
або з використанням загальних засобів комунікації, що не завжди забезпечує
належний рівень ефективності, точності та прозорості. Водночас зростає
попит на цифрові рішення, які б дозволили волонтерам систематизувати
діяльність, зменшити адміністративне навантаження та підвищити рівень
довіри з боку суспільства.
Сучасні веб-технології, зокрема прогресивні вебзастосунки
(ProgressiveWebApps, PWA), відкривають нові можливості для створення
кросплатформених, доступних і функціонально насичених застосунків, які
поєднують переваги традиційних веб-сайтів та нативних мобільних додатків.
Це дозволяє ефективно реалізовувати цифрові рішення для широкого кола
користувачів без необхідності встановлення додаткового програмного
забезпечення.
Розробка програмного продукту у вигляді прогресивного
вебзастосунку для підтримки волонтерської діяльності, зокрема для
створення та управління благодійними зборами, інтеграції з фінансовими
сервісами, автоматизації публікацій та звітності, є актуальним напрямом
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 4
а
дослідження. Такий підхід сприятиме не лише цифровізації громадського
сектору, а й підвищенню ефективності соціально важливих ініціатив.
Метою кваліфікаційної роботи є забезпечення підтримки та
автоматизації процесів організації волонтерських ініціатив, зокрема
створення зборів коштів, інтеграції з фінансовими сервісами, автоматичного
інформування через соціальні мережі та генерації звітів про використання
зібраних ресурсів, шляхом розробки та впровадження програмного
забезпечення у вигляді прогресивного вебзастосунку (PWA).
Для досягнення сформульованої мети необхідно вирішити такі задачі:
1. Проаналізувати існуючі рішення для підтримки волонтерської
діяльності.
2. Сформувати вимоги до функціональності майбутнього застосунку.
3. Спроєктувати архітектуру прогресивного вебзастосунку.
4. Реалізувати можливість створення зборів із прив’язкою до
Monobank.
5. Забезпечити автоматичну публікацію зборів у соціальних мережах.
6. Реалізувати отримання балансу збору через API.
7. Додати функцію обліку витрат і генерації звітів.
8. Провести тестування та оцінити ефективність системи.
На даний момент існує багато джерел інформації, наприклад автора Tal
Ater у книзі “Progressive Web Apps: Building Modern Web Apps Using Service
Workers, Push Notifications, and Web App Manifests” присвячує детальному
розгляду технології прогресивних вебзастосунків (PWA) — саме того
підходу, на якому ґрунтується робота. Автор пояснює, як створювати
сучасні, швидкі, зручні у використанні та незалежні від платформи
застосунки, які поєднують переваги веб-сайтів і нативних мобільних
додатків.
Одержані в кваліфікаційній роботі результати мають практичне
значення. Розроблений прогресивний веб-додаток може бути використаний
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 5
а
волонтерами для організації зборів коштів, автоматичної публікації
інформації в соцмережах, відстеження балансу через Monobank та
формування звітів. Система підвищує ефективність і прозорість
волонтерської діяльності, зменшує ручну роботу та може бути основою для
подальшого розвитку.
Кваліфікаційна робота складається з 4-х розділів, яких подається
інформація про:
1. Обрану предметну область дослідження та про постановку проблема;
2. Огляд існуючих технологій, за допомогою яких можна реалізувати
подібну систему та обґрунтування вибору тієї чи іншої технології;
3. Реалізацію системи: відображення структури системи, опис функцій
кожної частини системи, технічні вимоги до системи а також
практична оцінка ефективності роботи;
4. Розробка захисту інформації для інформаційної системи.
Використана література, під час написання кваліфікаційної роботи,
досить добре розкриває основні методики та підходи для розробки подібних
автоматизованих систем.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 6
а
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАДАЧІ
1.1 Аналіз існуючих систем
У сучасних волонтерських ініціативах активне використання цифрових
інструментів і платформ стає ключовим фактором ефективної координації,
збору інформації та управління ресурсами. Для реалізації різних аспектів
волонтерської діяльності застосовуються різноманітні програмні рішення, які
допомагають організовувати роботу команд, збирати кошти, моніторити хід
проєктів та підтримувати зв’язок із громадськістю. Розглянемо найбільш
популярні системи, які широко використовуються у волонтерських проектах,
та оцінемо їхні можливості й обмеження з огляду на специфіку організації
благодійних зборів і координації волонтерів.
KoBoToolbox — це безкоштовна та відкрита платформа для збору,
управління та аналізу даних, розроблена спеціально для гуманітарних
організацій, дослідників та волонтерських проєктів. Вона дозволяє
створювати гнучкі форми опитувань та анкет, що можуть працювати в
офлайн-режимі, що є важливим для роботи в умовах обмеженого інтернет-
зв’язку. Інтерфейс програми зображено на рисунку 1.1.
Рисунок 1.1 – Інтерфейс KoBoToolbox
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 7
а
KoBoToolbox активно використовується у волонтерських ініціативах
для збору інформації про потреби населення, моніторингу ситуації та оцінки
результатів гуманітарної допомоги [1]. Система дозволяє централізовано
обробляти великі обсяги даних, що підвищує ефективність прийняття рішень
та планування подальших дій. Однак, платформа не забезпечує автоматизації
фінансових зборів чи інтеграції з платіжними сервісами, що є важливою
складовою у багатьох волонтерських ініціативах.
Trello — популярний інструмент для управління проєктами та
командної роботи, який часто використовується волонтерами для
координації завдань і комунікації. Завдяки зручному інтерфейсу на основі
канбан-дошок, Trello дозволяє створювати завдання, розподіляти їх між
учасниками, встановлювати дедлайни та відслідковувати прогрес. Інтерфейс
програми зображено на рисунку 1.2.
Рисунок 1.2 – ІнтерфейсTrello
У волонтерських ініціативах цей інструмент допомагає організовувати
роботу команд, планувати події, збирати інформацію про потреби і ресурси.
Однак Trello не призначений для автоматизації фінансових процесів, збору
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 8
а
коштів або інтеграції з платіжними системами, тому для цих завдань
потребує використання додаткових сервісів [2].
Крім KoBoToolbox та Trello, у волонтерських ініціативах часто
використовуються такі платформи, як GoFundMe, PayPal, Facebook
Fundraising та інші. Ці сервіси забезпечують можливості збору благодійних
пожертв онлайн і мають інтеграції з соціальними мережами для поширення
інформації про кампанії. Вони сприяють залученню більшої кількості
донорів, однак, як правило, не надають комплексних інструментів для
менеджменту зборів, звітності та координації волонтерів. Це створює
потребу у розробці більш універсальних систем, які поєднують у собі функції
фінансового моніторингу, управління командою та автоматизації публікацій
у соцмережах.
Існуючі рішення мають певні переваги, проте не повністю
задовольняють потреби сучасних волонтерських ініціатив, особливо щодо
інтеграції фінансових сервісів, автоматизації процесів і створення прозорої
звітності. Це підкреслює актуальність розробки спеціалізованих
прогресивних веб-додатків, які поєднують у собі комплексний функціонал
для ефективної організації та управління волонтерською діяльністю.
Більшість таких як KoBoToolbox, Trello, GoFundMe, Google Forms,
Airtable чи Slack, спочатку не були розроблені спеціально для волонтерської
діяльності. Їхнє первинне призначення охоплює дослідницькі, бізнесові або
загальноорганізаційні цілі — наприклад, збір польових даних, керування
командною роботою, краудфандинг або організацію комунікацій. Однак
завдяки своїй доступності, інтуїтивно зрозумілому інтерфейсу та
багатофункціональності, ці платформи поступово були «прийняті»
волонтерськими спільнотами та адаптовані під їхні потреби.
На практиці волонтери використовують ці сервіси для координації дій
під час гуманітарних криз, збору інформації про потреби населення, ведення
обліку пожертв, комунікації з учасниками команд та поширення інформації
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 9
а
серед громадськості. [3] Наприклад, Trello використовують як просту CRM-
систему для координації закупівель і логістики, KoBoToolbox — для збору
даних у польових умовах, а Google Sheets — як основу для прозорої
фінансової звітності. Часто до цього залучають ще додаткові сервіси —
наприклад, Zapier для автоматизації дій між платформами або Telegram-боти
для інформування учасників.
Проте така імпровізована інтеграція рішень має низку недоліків.
Насамперед, вона вимагає базових технічних знань для налаштування й
підтримки, створює фрагментацію процесів та збільшує ризики втрати або
дублювання даних. Крім того, більшість платформ не мають функціоналу для
прозорого збору коштів із банківських сервісів, таких як Monobank, або для
автоматичної генерації звітів про витрати, що є критично важливими
аспектами у волонтерських кампаніях. Таким чином, хоча ці системи
частково закривають потреби волонтерів, вони не є спеціалізованими
рішеннями й вимагають адаптації, яка не завжди можлива для невеликих
ініціатив із обмеженим ресурсом часу, людей і знань.
Це підкреслює актуальність розробки цільового програмного продукту
— універсального, легкого у використанні, інтегрованого з фінансовими та
комунікаційними сервісами, який буде створений спеціально для підтримки
волонтерських ініціатив у сучасних цифрових умовах.
Популярні цифрові платформине містять вбудованого функціоналу,
який був би критично важливим для повноцінного забезпечення потреб
волонтерських ініціатив. Зокрема, в них немає інтеграції з платіжними
сервісами, такими як Monobankчи інші банки, що не дозволяє волонтерам
автоматично підтягувати баланс збору, відображати надходження в
реальному часі чи перевіряти транзакції без ручного введення даних. Через
це фінансова прозорість сильно залежить від людського фактору, а облік
витрат та донатів часто ведеться в окремих таблицях або вручну, що
збільшує ризики помилок і недовіри з боку донорів.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 10
а
Крім того, ці сервіси не підтримують автоматичну генерацію
фінансових звітів, які містили б інформацію про всі надходження, витрати,
залишок коштів і підтверджуючі документи. Волонтерам доводиться
створювати звіти самостійно, що займає багато часу і вимагає додаткових
навичок роботи з таблицями, PDF або іншими форматами.
Ще одна суттєва проблема — відсутність інтеграції з соціальними
мережами. Для того, щоб опублікувати новий збір у Facebook, Instagram,
Telegram чи інших платформах, волонтер має вручну створити допис,
завантажити зображення, вставити посилання на банку тощо. Це займає час і
ускладнює регулярне оновлення аудиторії про перебіг кампанії. Жодна з
перелічених систем не пропонує можливість автоматично публікувати або
планувати дописи при створенні нового збору [4].
Також варто звернути увагу на відсутність централізованого
менеджменту кампаній — волонтери змушені використовувати окремі
сервіси для кожного типу задач: один для збору коштів, інший для
планування логістики, ще один для комунікації тощо. Це створює
фрагментацію, складнощі з координацією, дублювання інформації та втрату
часу.
Таким чином, хоча ці сервіси можуть частково виконувати функції,
пов’язані з організацією волонтерської діяльності, вони не створені для цього
і потребують адаптації, технічної компетенції та постійного перемикання між
платформами. Це значно ускладнює роботу волонтерів, особливо в умовах
стресу, терміновості або обмежених ресурсів, що й зумовлює потребу у
створенні спеціалізованої інтегрованої системи, яка враховує реальні потреби
сучасного волонтерства.
1.2 Постановка задач
Щоб бути справді ефективною, система для організації волонтерських
ініціатив повинна включати функціонал, подібний до вже існуючих рішень,
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 11
а
які довели свою зручність у таких сферах, як бізнес, освіта та командне
управління. Зокрема, важливо передбачити інструменти для менеджменту
завдань і зборів. Як і в платформах Trello чи Notion, система повинна
дозволяти створення, редагування та відстеження завдань із можливістю
додавання відповідальних, дедлайнів, статусів виконання, коментарів та
вкладень.
Окрему роль відіграє можливість збирання структурованої інформації.
Подібно до KoBoToolbox чи Google Forms, система має дозволяти створення
форм для збору даних — анкет, запитів на допомогу, реєстрації потреб.
Важливо, щоб такі форми підтримували різні типи полів, умови
відображення, можливість додавати фото та геолокацію.
Для координації команди необхідна вбудована система комунікації —
щось на зразок Slack. Це можуть бути тематичні чати, де волонтери
обговорюють логістику, потреби, звіти або термінові завдання. Важливо, щоб
комунікація була зручною, підтримувала обмін файлами, згадування людей,
та швидкі реакції.
Крім цього, платформа має підтримувати зберігання та обмін
документами. Аналогічно до Google Drive чи Docs, вона повинна дозволяти
завантаження чеків, рахунків, фото звітів, створення простих текстових
документів з можливістю спільного редагування.
Інтеграція з календарем — ще один важливий аспект. Користувачі
мають бачити заплановані події, терміни закупівель, логістичні операції та
інші важливі дати. Календар має бути доступним усій команді та дозволяти
сповіщення й фільтрацію за типами подій.
Аналітика та візуалізація даних також надзвичайно важливі. Як у
Airtable або Notion, користувачі повинні мати змогу переглядати таблиці зі
зборами, витратами, заявками, а також будувати графіки й діаграми для
оцінки динаміки роботи.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 12
а
Управління доступом теж є критичним. У системі мають бути ролі —
адміністратор, волонтер, спостерігач, бухгалтер тощо — з чітко визначеними
правами доступу до функцій, даних і звітів. Це забезпечить порядок і безпеку
в роботі.
Також важливо, щоб система була адаптована до мобільного
використання. Прогресивний вебдодаток (PWA) або мобільна версія в
браузері мають бути повноцінно функціональними, адже волонтери часто
працюють у дорозі або в польових умовах.
Слід передбачити і журнал змін — історію редагування завдань,
оновлень, транзакцій, щоб можна було прозоро відстежити всі дії
користувачів. Це підвищує довіру до системи та полегшує внутрішній
контроль.
Інтерфейс має бути простим, логічним, багатомовним (обов’язково з
українською мовою), інтуїтивно зрозумілим навіть для користувачів без
технічного досвіду. Це дозволить ефективно використовувати систему в
стресових умовах, коли швидкість і простота роботи є критичними.
Попри широкий спектр можливостей, які пропонують існуючі
платформи, вони не враховують низку ключових функцій, які є надзвичайно
важливими саме для волонтерських ініціатив. Перша з них — це функціонал
для роботи з платежами. Волонтери часто організовують збір коштів через
різні платіжні сервіси, зокрема популярний в Україні Monobank. Важливо,
щоб система мала можливість автоматично інтегруватися з банківськими
сервісами, підтягувати інформацію про баланс збору в режимі реального
часу, відображати транзакції та оновлювати дані про надходження без участі
користувача. Це не лише підвищить прозорість фінансування, а й значно
зменшить час на ручний облік платежів, уникне людських помилок і
підвищить довіру донорів.
Друга надважлива функція — це можливість автоматичних публікацій
у соціальних мережах. Волонтерські збори потребують широкого
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 13
а
розповсюдження інформації, тому система має забезпечувати інтеграцію з
основними соцмережами (Facebook, Instagram, Telegram, Twitter тощо) і
дозволяти при створенні збору одразу генерувати пости, які автоматично
публікуються або плануються до публікації. Це значно спрощує просування
зборів, зменшує навантаження на волонтерів, які часто змушені вручну
дублювати інформацію на різних платформах, а також підвищує охоплення
аудиторії.
Третім важливим напрямом є автоматичне генерування звітів по збору
коштів і витратах. Після завершення або на різних етапах кампанії волонтери
мають можливість одразу формувати детальні фінансові звіти, які містять
інформацію про загальну суму збору, окремі транзакції, розподіл витрат,
залишок коштів, а також підтверджувальні документи у вигляді чеків або
рахунків. Такий звіт можна експортувати у популярні формати (PDF, Excel)
для подальшого розповсюдження серед донорів або керівництва.
Автоматизація цього процесу підвищує прозорість, зменшує адміністративне
навантаження і допомагає підтримувати довіру у спільноті.
Додавання функціоналу для роботи з платежами, автоматичних
публікацій та звітів дозволить створити комплексний інструмент, який не
просто організовує процеси, а й оптимізує ключові етапи волонтерської
діяльності, роблячи її більш ефективною, прозорою та масштабованою. Без
цих можливостей система не зможе повністю відповідати потребам сучасних
волонтерських ініціатив.
Для максимальної ефективності та зручності використання система
повинна бути доступною з будь-якого пристрою — це може бути
стаціонарний комп’ютер, ноутбук, планшет або смартфон. Така
універсальність є надзвичайно важливою, адже волонтери часто працюють у
різних умовах: хтось перебуває в офісі або вдома, інші — у польових умовах
або в дорозі. Забезпечення доступу незалежно від операційної системи
(Windows, macOS, Android, iOS) чи типу браузера дозволяє кожному
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 14
а
користувачу обирати найзручніший для себе пристрій без необхідності
встановлювати додаткове програмне забезпечення.
Технологія прогресивних веб-додатків (PWA), яка лежить в основі
системи, дозволяє поєднати переваги вебсайту і мобільного застосунку.
Користувачі отримують швидкий доступ до всіх функцій через браузер, при
цьому система працює навіть за обмеженого або відсутнього інтернет-
з’єднання, автоматично синхронізуючи дані після відновлення зв’язку. Це
критично важливо для волонтерів, які можуть перебувати у місцях зі слабким
покриттям [5].
Крім того, адаптивний дизайн інтерфейсу гарантує зручне
відображення і простоту навігації на екранах різних розмірів. Незалежно від
того, чи користувач переглядає список зборів на великому моніторі, чи
швидко оновлює інформацію зі смартфона, інтерфейс залишається
інтуїтивно зрозумілим і функціональним.
Забезпечення багатоплатформності дозволяє волонтерам оперативно
реагувати на зміни, координувати дії, отримувати сповіщення та вносити
необхідні оновлення у реальному часі, що значно підвищує ефективність
командної роботи. Доступність з будь-якого пристрою є одним із ключових
факторів, що забезпечують гнучкість, мобільність і продуктивність
волонтерських ініціатив.
Отже, головна задача кваліфікаційної роботи – розробка та
впровадження програмного продукту у вигляді прогресивного веб-додатку
для підтримки волонтерської діяльності, зокрема для створення та
управління благодійними зборами, інтеграції з фінансовими сервісами,
автоматизації публікацій та звітності, є актуальною. Рішення з
використанням такого підходу реалізації програмного продукту сприятиме
не лише цифровізації громадського сектору, а й підвищенню ефективності
соціально важливих ініціатив.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 15
а
1.3 Висновки до розділу
Сучасні волонтерські ініціативи активно використовують цифрові
інструменти для координації, збору даних, комунікації та організації
благодійних кампаній.
Однак більшість наявних платформ, таких як KoBoToolbox, Trello,
GoFundMe чи Google Forms, не були створені спеціально для потреб
волонтерів. Вони частково закривають окремі задачі, проте потребують
складної інтеграції, не мають автоматизації фінансових процесів, звітності й
функцій публікацій у соцмережах. Це ускладнює роботу команд і знижує
ефективність ініціатив. Така ситуація демонструє потребу в розробці
спеціалізованої інтегрованої системи, яка враховуватиме реальні умови й
вимоги волонтерської діяльності.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 16
а
2 ВИБІР ТЕХНОЛОГІЇ ТА ІНСТРУМЕНТАЛЬНИХ ЗАСОБІВ
РОЗРОБКИ СИСТЕМИ
2.1 Огляд існуючих технологій
У сучасному цифровому світі важливо створювати застосунки, які є
швидкими, зручними, доступними з різних пристроїв і не потребують
складної установки. Саме для цього була створена концепція Progressive Web
Application (PWA), яка поєднує переваги вебсайтів і нативних мобільних
додатків. PWA забезпечує користувачам зручність, схожу на мобільні
застосунки, але з використанням стандартних вебтехнологій.
PWA (прогресивний вебзастосунок) — це вебдодаток, створений за
допомогою HTML, CSS і JavaScript, який виглядає та функціонує як
нативний застосунок. Його можна відкрити у браузері або встановити на
пристрій, щоб користуватись у повноекранному режимі, з іконкою на
головному екрані та можливістю роботи офлайн.На рисунку 2.1
представлено основні характеристики та переваги Progressive Web App .
Рисунок 2.1 – Характеристики та переваги Progressive Web App
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 17
а
Однією з головних переваг є кросплатформеність. Один і той самий
застосунок може працювати на різних операційних системах і пристроях без
необхідності створення окремих версій [6]. Це суттєво знижує витрати на
розробку.
Ще одна важлива особливість — підтримка офлайн-режиму. Завдяки
використанню сервіс-воркерів (Service Workers) застосунок може зберігати
дані в кеші, що забезпечує стабільну роботу навіть без підключення до
Інтернету.
PWA швидко завантажується та зберігає дані локально, що значно
покращує досвід користувача. Крім того, для встановлення не потрібно
звертатися до App Store або Google Play — достатньо натиснути кнопку
“Додати на головний екран” у браузері.
Оновлення застосунку відбувається автоматично у фоновому режимі, а
вся передача даних здійснюється через захищене HTTPS-з’єднання. У
підтримуваних браузерах також можливе надсилання push-сповіщень [7].
Попри переваги, PWA має і певні обмеження. Найбільше — це
обмежена підтримка iOS. На пристроях Apple деякі функції, як-от push-
сповіщення чи робота у фоновому режимі, працюють неповноцінно або не
підтримуються взагалі.
Доступ до апаратного забезпечення також обмежений. Наприклад,
використання NFC, біометричної автентифікації чи деяких датчиків
недоступне або працює не на всіх пристроях.
Ще одним недоліком є відсутність застосунку в офіційних
маркетплейсах, що може знизити впізнаваність бренду або ускладнити пошук
додатка для користувачів.
Окрім того, деякі браузери можуть частково підтримувати PWA або
відображати його з обмеженим функціоналом. Також складніше реалізувати
монетизацію через внутрішні покупки, як це можливо в App Store або Google
Play.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 18
а
PWA — це ефективне рішення для створення доступних, швидких та
зручних застосунків із мінімальними витратами на розробку. Воно чудово
підходить для проєктів, які не потребують глибокої інтеграції з функціями
пристрою, але вимагають широкої доступності, простоти встановлення і
підтримки офлайн-режиму [8].
У сучасній веброзробці фронтенд-технології відіграють ключову роль у
створенні зручних, адаптивних та естетично привабливих інтерфейсів
користувача. Саме фронтенд визначає те, як виглядає і взаємодіє
вебзастосунок з користувачем, забезпечуючи при цьому швидкість, зручність
та доступність. Нижче розглянуто основні інструменти, що
використовуються для побудови клієнтської частини вебдодатків: HTML,
CSS, Bootstrap і React.
HTML (HyperText Markup Language) — це мова розмітки, яка є
основою будь-якого вебсайту. Вона визначає структуру вебсторінки:
заголовки, абзаци, списки, посилання, зображення, форми тощо. Структура
мови зображена на рисунку 2.2.
Рисунок 2.2. – Структура HTML
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 19
а
HTML не є мовою програмування — він лише описує, що саме
відображається на сторінці та як ці елементи пов’язані між собою [9]. З
виходом HTML5 були додані нові семантичні теги (як-от <header>, <article>,
<footer>), що зробило код чистішим і зручнішим для пошукових систем та
розробників.
CSS (Cascading Style Sheets) — це мова стилів, яка використовується
для оформлення HTML-документів. Вона дозволяє задавати кольори,
шрифти, відступи, розміри, а також створювати анімації, переходи та
адаптивний дизайн. CSS дає змогу розділити структуру (HTML) і зовнішній
вигляд сторінки, що сприяє кращій підтримці коду. Приклад структури
зображено на рисунку 2.3.
Рисунок 2.3. – Приклад структури CSS
Найновіші версії CSS (зокрема CSS3) підтримують потужні
інструменти — Flexbox, Grid Layout, медіа-запити, які роблять створення
адаптивних вебінтерфейсів більш гнучким.
Bootstrap — це популярний фреймворк для розробки адаптивних
вебінтерфейсів, створений компанією Twitter. Він побудований на основі
HTML, CSS та JavaScript і включає набір готових компонентів: кнопки,
модальні вікна, навігацію, таблиці, сітки тощо [10]. Головна перевага
Bootstrap — це можливість швидко створювати привабливі та адаптивні
вебсторінки без потреби писати багато власного CSS-коду. Приклади
створення вебінтерфейсів зображено на рисунку 2.4.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 20
а
Крім того, Bootstrap підтримує мобільну першу стратегію (mobile-first)
і має систему сіток, що дозволяє легко керувати розміщенням елементів на
сторінці.
Рисунок 2.4 – Приклади створення вебінтерфейсів
React — це бібліотека JavaScript, розроблена компанією Facebook для
побудови інтерфейсів користувача. Вона дозволяє створювати багаторазово
використовувані компоненти, що забезпечують динамічну зміну вмісту
сторінки без її повного перезавантаження. React використовує віртуальний
DOM (Virtual DOM), що значно покращує продуктивність у порівнянні зі
звичайним підходом до маніпуляцій DOM [11]. Також React підтримує JSX
— розширення синтаксису JavaScript, яке дозволяє писати HTML-подібний
код у файлах з логікою. Ця бібліотека активно використовується для
створення сучасних вебзастосунків, у тому числі у PWA.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 21
а
Застосування цих технологій дозволяє створювати сучасні,
масштабовані, динамічні та зручні вебінтерфейси, що відповідають
очікуванням користувачів та бізнесу.
Node.js — це середовище виконання JavaScript, що дозволяє запускати
цей код не лише в браузері, а й на сервері. Це стало справжнім проривом,
адже дало змогу писати повноцінні бекенд-рішення за допомогою JavaScript
— мови, що до того використовувалась переважно для фронтенду [12].
Архітектура Node.js зображено на рисунку 2.5.
Рисунок 2.5 – Архітектура Node.js
Node.js має асинхронну неблокуючу модель введення-виведення (non-
blocking I/O), що означає: сервер може обробляти тисячі запитів одночасно
без очікування завершення попередніх операцій. Це ідеально підходить для
створення реального часу застосунків, таких як чат-боти, ігри, фінансові
сервіси, а також RESTful API [13].
Для спрощення побудови серверів Node.js часто використовують із
фреймворком Express.js, який дозволяє легко створювати маршрути,
обробляти запити, працювати з middleware та інтегрувати бази даних.
Переваги Node.js:
1. Висока продуктивність при обробці великої кількості одночасних
з’єднань.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 22
а
2. Одна мова програмування для усього стеку (frontend + backend).
3. Величезна кількість готових пакетів через npm (Node Package Manager).
4. Широке застосування в індустрії: Netflix, LinkedIn, Uber, PayPal та ін.
MySQL — це одна з найпопулярніших реляційних систем управління
базами даних (СКБД). Вона зберігає дані у таблицях, які можуть бути
пов’язані між собою через ключі [14]. Цей підхід дозволяє ефективно
структурувати дані та забезпечити швидкий доступ до них, схема роботи
зображено на рисунку 2.6.
Рисунок 2.6 – MySQL
У веброзробці MySQL часто використовується для зберігання
інформації про користувачів, сесії, замовлення, продукти, повідомлення
тощо. Запити до бази формуються за допомогою мови SQL, яка дозволяє не
лише зчитувати, а й фільтрувати, агрегувати, об’єднувати дані з різних
таблиць.
MySQL можна легко інтегрувати з Node.js за допомогою таких
бібліотек, як mysql2, sequelize або knex. Це дозволяє програмно взаємодіяти з
базою даних — наприклад, створювати користувача після реєстрації або
отримувати список усіх замовлень.
Переваги MySQL:
1. Висока продуктивність для читання та запису структурованих даних.
2. Простота в освоєнні та потужна функціональність.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 23
а
3. Широка підтримка хостинг-провайдерів.
4. Безкоштовна ліцензія (open-source) для більшості задач.
VPS — це тип хостингу, де на фізичному сервері створюються кілька
віртуальних середовищ (віртуальних серверів), кожен з яких функціонує
незалежно [15]. Це дає змогу розробникам мати повний контроль над
сервером — від встановлення ПЗ до налаштування безпеки. Принцип роботи
зображено на рисунку 2.7.
Рисунок 2.7 –Принцип роботи VPS
На VPS можна розміщувати бекенд-застосунки, бази даних, сервери
API, поштові сервіси, моніторинг-системи та багато іншого. На відміну від
звичайного хостингу, користувач VPS має root-доступ, що дозволяє
встановлювати будь-яке програмне забезпечення (наприклад, Node.js, Nginx,
Certbot, Docker тощо) [16]. Це особливо корисно для великих або
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 24
а
нестандартних проєктів, які потребують гнучкої конфігурації та високої
продуктивності.
Переваги VPS:
1. Повний контроль над сервером (root-доступ).
2. Можливість розгортати будь-яке серверне середовище.
3. Краще ізолювання та безпека порівняно з віртуальним хостингом.
4. Підходить для продакшн-рішень та масштабованих проєктів.
У поєднанні ці технології дозволяють створювати потужні,
масштабовані та захищені бекенд-системи, що лежать в основі сучасних
вебзастосунків — включаючи PWA, CRM, e-commerce, системи авторизації,
трекери й інше.
2.2 Обґрунтування вибору
Процес вибору технологій для розробки програмного забезпечення має
базуватися, перш за все, на потребах конкретного проєкту. Ключовими
чинниками при цьому є цільова аудиторія, функціональні вимоги, вимоги до
продуктивності, а також обмеження щодо ресурсів або часу розробки.
У випадку розробки мобільного застосунку для організації
волонтерських ініціатив важливо забезпечити максимально широкий доступ
до сервісу, незалежно від моделі чи операційної системи мобільного
пристрою користувача. Саме тому одним із основних технічних критеріїв є
мультиплатформеність — здатність застосунку працювати коректно як на
Android-, так і на iOS-пристроях.
Для досягнення цієї мети доцільно використовувати технології
прогресивних веб-додатків (Progressive Web Apps, PWA), які поєднують в
собі зручність веб-розробки з можливостями нативних мобільних
застосунків. Завдяки PWA, застосунок буде доступний без встановлення з
магазинів додатків, матиме офлайн-функціональність, миттєве оновлення,
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 25
а
адаптивний інтерфейс та зможе працювати на будь-якому сучасному
мобільному телефоні через браузер або як інстальований додаток.
Крім мультиплатформеності, ще однією важливою перевагою
використання технології прогресивних веб-додатків (PWA) є відносна
простота розробки. PWA-додатки створюються із застосуванням стандартних
веб-технологій — таких як HTML, CSS та JavaScript. Це означає, що для їх
створення не потрібно опановувати окремі мови програмування чи
інструменти, специфічні для Android або iOS (наприклад, Java/Kotlin чи
Swift/Objective-C) [17].
Такий підхід суттєво спрощує розробку та супровід застосунку,
особливо для команд, які вже мають досвід у веб-розробці. Крім того, це
знижує поріг входу для майбутніх розробників та спрощує масштабування
проєкту.
Таким чином, обрання PWA як основної технології дозволяє
реалізувати мультиплатформений мобільний застосунок із мінімальними
витратами часу та ресурсів, зберігаючи при цьому сучасний користувацький
досвід.
Ще однією важливою перевагою прогресивних веб-додатків (PWA) є
те, що їх не потрібно публікувати в магазини мобільних додатків, такі як
Google Play чи App Store. Завдяки цьому процес розповсюдження застосунку
значно спрощується і пришвидшується.
Відсутність необхідності проходити тривалі процедури модерації та
затвердження оновлень дозволяє оперативно впроваджувати зміни та
виправлення, що значно скорочує час виходу нових версій застосунку. Це
особливо важливо для проектів, які активно розвиваються та потребують
швидкої адаптації під потреби користувачів.
Таким чином, використання PWA сприяє підвищенню гнучкості та
оперативності у підтримці мобільного застосунку.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 26
а
Для розробки користувацького інтерфейсу мобільного застосунку,
особливо такого, що базується на технології прогресивних веб-додатків
(PWA), доцільно використати вже існуючі HTML-фреймворки, наприклад,
Bootstrap. Використання Bootstrap має низку вагомих переваг, які роблять
його оптимальним вибором для реалізації інтерфейсу у подібних
проектах [18].
Перш за все, Bootstrap є одним із найпопулярніших і найпоширеніших
фронтенд-фреймворків у світі веб-розробки, що гарантує велику спільноту
розробників, широку документацію і безліч прикладів готових рішень. Це
значно спрощує процес розробки, оскільки дозволяє використовувати
перевірені шаблони і компоненти, що вже пройшли практичне тестування в
різних проектах. Завдяки цьому розробники можуть зосередитися
безпосередньо на логіці і унікальному функціоналі застосунку, замість того,
щоб витрачати час на створення базових елементів інтерфейсу з нуля.
Ще однією перевагою Bootstrap є його адаптивність. Фреймворк
створений із урахуванням принципів responsive design, що дозволяє
створювати інтерфейси, які однаково добре виглядають і коректно працюють
на будь-яких пристроях – від великих десктопних моніторів до малих екранів
смартфонів. Це особливо актуально для мобільних застосунків, які мають
забезпечити зручність користування на різноманітних телефонах і
планшетах, а також враховувати різні розміри та орієнтацію екранів.
Окрім того, Bootstrap пропонує широкий набір готових UI-компонентів
— кнопок, форм, навігаційних панелей, модальних вікон та інших елементів
інтерфейсу, які легко налаштовуються і дозволяють створювати привабливий
та інтуїтивно зрозумілий дизайн [19]. Це зменшує навантаження на дизайн-
команду і пришвидшує створення якісного продукту.
Важливим фактором є і сумісність Bootstrap із сучасними браузерами,
що гарантує коректне відображення і роботу інтерфейсу для більшості
користувачів без необхідності розробляти окремі версії під кожен браузер.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 27
а
Це робить розробку більш ефективною і забезпечує стабільність роботи
застосунку.
Загалом, застосування Bootstrap у проекті розробки мобільного PWA
дозволяє значно скоротити час і ресурси на створення користувацького
інтерфейсу, при цьому забезпечуючи високу якість, адаптивність і зручність
у використанні. Такий підхід є розумним вибором для ефективної реалізації
проекту з урахуванням сучасних стандартів веб-розробки.
Окрім вибору HTML-фреймворку для стилізації та формування
візуальної складової застосунку, надзвичайно важливо також визначитися з
JavaScript-фреймворком або бібліотекою, яка відповідатиме за динамічну
поведінку користувацького інтерфейсу, управління станом і взаємодію з
сервером. Вибір правильного JS-фреймворку має суттєвий вплив на
ефективність розробки, підтримку і масштабованість проекту. Саме тому
варто підходити до цього рішення усвідомлено, враховуючи потреби
конкретного застосунку, а також технічні можливості і навички розробників.
Використання сучасного JavaScript-фреймворку дозволяє створювати
інтерфейси, які швидко реагують на дії користувача, забезпечують плавну
навігацію і мінімізують затримки при оновленні даних. Це особливо
актуально для прогресивних веб-додатків, які мають виглядати і працювати
як нативні мобільні застосунки, надаючи користувачу максимально
комфортний досвід. Крім того, сучасні фреймворки пропонують гнучкі
засоби для побудови компонентної архітектури, що полегшує повторне
використання коду, його тестування і підтримку.
З огляду на ці аспекти, оптимальним вибором у рамках даноїроботи є
React — популярна бібліотека JavaScript, яка вже давно зарекомендувала себе
як надійний і ефективний інструмент для розробки складних і
масштабованих інтерфейсів. React вирізняється своєю компонентною
структурою, що дозволяє розбивати інтерфейс на незалежні, багаторазово
використовувані частини, кожна з яких управляє власним станом і логікою.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 28
а
Такий підхід сприяє кращій організації коду і знижує складність подальшого
розвитку застосунку.
Крім того, React підтримує віртуальний DOM — технологію, яка
оптимізує оновлення інтерфейсу, дозволяючи змінювати лише ті частини
сторінки, які фактично потребують оновлення, що підвищує продуктивність
застосунку і робить взаємодію користувача з ним більш плавною і швидкою.
React також має велику екосистему додаткових бібліотек і інструментів, які
допомагають вирішувати типові задачі розробки, такі як маршрутизація,
управління станом, робота з API, що значно спрощує і пришвидшує процес
створення прогресивного веб-додатку.
Важливо й те, що React підтримується великими компаніями і має
активну спільноту розробників, що гарантує регулярні оновлення, високий
рівень безпеки та наявність великої кількості ресурсів для навчання і
вирішення різноманітних технічних питань. Це робить React не лише
технічно доцільним, а й стратегічно вигідним вибором для довгострокової
підтримки і розвитку мобільного застосунку для організації волонтерських
ініціатив.
Таким чином, визначення та використання React як основного
JavaScript-інструменту у поєднанні з Bootstrap для стилізації створює міцну
основу для розробки сучасного, продуктивного і зручного у використанні
прогресивного веб-додатку, який зможе ефективно задовольняти потреби
користувачів незалежно від платформи їх мобільних пристроїв.
Для успішної розробки мобільного застосунку, особливо такого, що
передбачає організацію волонтерських ініціатив із динамічним обміном
даних, надзвичайно важливо визначитися з технологіями, які будуть
використовуватися на стороні сервера, або backend. Backend є невід’ємною
частиною будь-якої сучасної інформаційної системи, оскільки саме він
відповідає за обробку запитів від клієнтської частини, збереження та обробку
даних, а також забезпечує логіку бізнес-процесів і безпеку застосунку. Вибір
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 29
а
технології для backend має бути продуманим і враховувати не лише
функціональні вимоги, а й особливості команди розробників, час і ресурси на
підтримку проекту.
У контексті розробки прогресивного веб-додатку, де фронтенд
реалізується на базі JavaScript, логічним та ефективним рішенням стає
використання Node.js як серверної платформи. Node.js є середовищем
виконання JavaScript-коду поза браузером, що дає змогу використовувати
одну й ту ж мову програмування як для фронтенду, так і для бекенду. Такий
підхід значно спрощує розробку, оскільки зменшує необхідність
переключення між різними мовами, полегшує комунікацію в команді та
пришвидшує процес навчання нових розробників.
Крім того, використання Node.js сприяє більш ефективній розробці
завдяки широкій екосистемі модулів і пакетів, які доступні через менеджер
пакетів npm. Це дозволяє легко додавати різноманітний функціонал — від
роботи з базами даних до реалізації безпеки і масштабованості системи.
Важливою перевагою є також подієва, неблокуюча архітектура Node.js, яка
забезпечує високу продуктивність і масштабованість, що є критично
важливим для застосунків, які мають велику кількість одночасних
користувачів або інтенсивний обмін даними.
Таким чином, обираючи Node.js як основну backend-технологію,
розробники отримують можливість створити єдину технологічну стеку на
базі JavaScript, що не тільки спрощує розробку і підтримку проєкту, а й
підвищує якість та швидкість його реалізації. Такий підхід є оптимальним
для створення мобільного застосунку для організації волонтерських
ініціатив, де важлива гнучкість, швидкість реакції системи та зручність
подальшого розвитку.
Для збереження даних мобільного застосунку для організації
волонтерських ініціатив важливим аспектом є вибір надійної, ефективної та
добре підтримуваної системи управління базами даних (СУБД). Одним із
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 30
а
найбільш поширених і перевірених рішень для таких задач є MySQL —
реляційна база даних, яка широко використовується у багатьох веб- та
мобільних проєктах.
MySQL відзначається високою стабільністю, масштабованістю та
продуктивністю, що дозволяє ефективно обробляти як невеликі, так і великі
обсяги даних. Ця СУБД добре підходить для зберігання структурованої
інформації, такої як профілі користувачів, дані про волонтерські ініціативи,
розклади подій, повідомлення та інші сутності, що мають чітко визначені
зв’язки між собою. Реляційна модель даних забезпечує цілісність інформації
та підтримує складні запити, що важливо для побудови надійної логіки
бізнес-процесів.
Однією з ключових переваг MySQL є її сумісність із різними
платформами і мовами програмування, зокрема з Node.js, що
використовується для розробки backend-частини застосунку. Існує багато
бібліотек і драйверів, які дозволяють легко інтегрувати MySQL з серверною
логікою, забезпечуючи надійний і швидкий доступ до даних. Крім того,
MySQL має розвинену систему безпеки та механізми резервного копіювання,
що допомагає зберігати цілісність даних і захищати їх від втрати або
несанкціонованого доступу.
Також важливо відзначити, що MySQL має широку спільноту
користувачів і розробників, а також велику кількість навчальних матеріалів і
документації, що спрощує вирішення технічних питань і підвищує
ефективність розробки і підтримки проєкту.
Таким чином, вибір MySQL для збереження даних у мобільному
застосунку є обґрунтованим і логічним кроком, що забезпечує надійність,
гнучкість і продуктивність системи, а також сприяє її подальшому розвитку і
масштабуванню відповідно до потреб користувачів.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 31
а
2.3 Висновки до розділу
У розділі було детально проаналізовано сучасні технології та
інструменти, які можуть бути використані для розробки мобільного
застосунку на основі технології Progressive Web Application (PWA).
Здійснено огляд ключових елементів фронтенд- і бекенд-розробки, серед
яких HTML, CSS, Bootstrap, React, Node.js, MySQL та VPS, що у сукупності
утворюють потужний та гнучкий стек для реалізації сучасних вебзастосунків.
Обґрунтування вибору цих технологій ґрунтується на їх відповідності
функціональним і технічним вимогам проєкту. Зокрема, PWA забезпечує
мультиплатформеність, офлайн-доступ, швидкість роботи та зручність
користування, що є критично важливими для реалізації застосунку для
організації волонтерських ініціатив. Використання React дозволяє
створювати динамічні інтерфейси, Node.js з Express — ефективно обробляти
серверні запити, а MySQL — надійно зберігати дані. VPS надає повний
контроль над серверним середовищем, що необхідне для гнучкого
налаштування та масштабування системи.
Таким чином, обрані технології забезпечують високу продуктивність,
доступність, безпеку та масштабованість, що робить їх оптимальним
рішенням для реалізації даного програмного продукту, розробка якого є
головною задачею даної випускної кваліфікаційної роботи бакалавра.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 32
а
3 РОЗРОБКА МОБІЛЬНОГО ЗАСТОСУНКУ ДЛЯ ОРГАНІЗАЦІЇ
ВОЛОНТЕРСЬКИХ ІНІЦІАТИВ З ВИКОРИСТАННЯМ ТЕХНОЛОГІЇ
ПРОГРЕСИВНИХ ВЕБЗАСТОСУНКІВ
3.1 Структура системи
Система була розроблена з використанням монолітного підходу, що
означає інтеграцію всіх основних компонентів — користувацького
інтерфейсу, бізнес-логіки та роботи з базою даних — в єдину цілісну
програмну структуру. Такий підхід дозволяє розробникам зосередитися на
створенні єдиного додатку без необхідності розділяти систему на окремі
сервіси або модулі, що спрощує процес розробки, тестування та розгортання.
Монолітна архітектура забезпечує простоту в управлінні залежностями
та взаємодією між компонентами, оскільки всі частини системи працюють у
межах одного середовища виконання. Це особливо важливо на початкових
етапах розробки, коли команда може швидше реалізувати основний
функціонал і оперативно вносити зміни. Водночас монолітний підхід
полегшує відлагодження та тестування системи, оскільки всі елементи
знаходяться у спільному контексті.
Вибір монолітної архітектури для розробки мобільного застосунку для
організації волонтерських ініціатив є доцільним з огляду на масштаби
проекту, складність функціоналу та ресурси розробки. Такий підхід
забезпечує ефективну реалізацію поставлених завдань із мінімальними
накладними витратами, водночас створюючи міцну основу для подальшого
масштабування та потенційного переходу до більш розподілених
архітектурних рішень у майбутньому.
Основним модулем системи є менеджмент волонтерських ініціатив,
який виконує центральну роль у функціонуванні мобільного застосунку та є
основою для реалізації ключових можливостей платформи. Цей модуль
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 33
а
призначений для комплексного управління всіма аспектами створення та
супроводу волонтерських проєктів, починаючи від їх ініціації і завершуючи
активною підтримкою та поширенням інформації про них серед широкої
аудиторії. Структура розробленої системи зобрадено на рисунку 2.1.
Рисунок 3.1 – Структура розробленої системи
Перш за все, менеджмент волонтерських ініціатив забезпечує
можливість створення нових ініціатив, надаючи користувачам зручний
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 34
а
інструмент для формування проєктів із визначенням основних параметрів,
цілей, опису та умов участі. Цей процес є інтуїтивно зрозумілим, що
дозволяє навіть користувачам із мінімальним технічним досвідом швидко
запускати власні волонтерські ініціативи. Важливо, що модуль підтримує
динамічне оновлення інформації, що дозволяє вносити зміни та доповнення
до існуючих проєктів у будь-який момент, підтримуючи актуальність і
прозорість інформації для всіх учасників.
Однією з ключових функцій цього модуля є інтеграція з модулем
платежів, який надає можливість організовувати збір коштів безпосередньо
через застосунок. Такий функціонал є критично важливим для волонтерських
ініціатив, оскільки фінансова підтримка часто є основою для реалізації
соціально значущих проєктів. Інтеграція з цим модулем дозволяє
забезпечити безпеку транзакцій, зручність для користувачів та прозорість
збору коштів, що підвищує довіру до платформи та мотивує більше людей
долучатися до підтримки ініціатив.
Крім того, модуль менеджменту волонтерських ініціатив відповідає за
взаємодію з модулем публікації зборів у соціальних мережах, що є важливим
елементом стратегії залучення більшої кількості волонтерів і донорів.
Завдяки автоматичній передачі інформації про нові збори до соціальних
мереж, система забезпечує широкий охват аудиторії, прискорюючи процес
інформування та підвищуючи видимість кожної ініціативи. Це сприяє
формуванню спільноти навколо конкретних проєктів і стимулює активну
участь користувачів.
Таким чином, менеджмент волонтерських ініціатив є не просто
модулем для створення і управління проєктами, а потужним інструментом,
який поєднує функції організації, фінансування і комунікації. Він виступає
ядром системи, яке забезпечує синергію між різними компонентами
застосунку, сприяючи ефективній координації волонтерської діяльності,
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 35
а
підвищенню її прозорості та залученню максимальної кількості учасників
для досягнення спільної мети — допомоги тим, хто цього потребує.
Модуль платежів у системі виконує важливу функцію автоматизації
процесу підключення та інтеграції з банківськими сервісами, зокрема з
банком Монобанк, для організації збору коштів у межах волонтерських
ініціатив. Завдяки цьому модулю забезпечується безперебійний та безпечний
прийом пожертвувань, що значно спрощує процес фінансової підтримки
проєктів як для організаторів, так і для донорів.
Автоматизація підключення до Монобанку дозволяє усунути
необхідність ручного налаштування кожного збору або внеску, що
прискорює запуск нових кампаній і мінімізує ризики помилок при обробці
платежів. Крім того, це забезпечує зручність для користувачів, які можуть
швидко і безпечно здійснювати пожертвування через знайомі їм платіжні
інтерфейси. Таким чином, модуль платежів сприяє підвищенню ефективності
збору коштів, забезпечуючи прозорість і контроль за фінансовими
операціями, що є критично важливим для довіри до волонтерських ініціатив і
успішної реалізації соціальних проєктів.
У системі також реалізовано спеціальний модуль, який займається
публікацією зборів на сторінках соціальних мереж, що є важливим
інструментом для ефективного поширення інформації про волонтерські
ініціативи. Цей модуль дозволяє автоматизувати процес розміщення
повідомлень на різних популярних платформах, таких як Facebook, Instagram,
Twitter та інші, що забезпечує широкий охват потенційної аудиторії. Завдяки
цьому значно підвищується видимість кожної ініціативи та залучення нових
учасників і донорів.
Автоматична публікація відбувається одразу після створення або
оновлення збору, що дозволяє забезпечити своєчасну і актуальну інформацію
для користувачів соціальних мереж без необхідності ручного втручання з
боку організаторів. Це не лише економить час, а й підвищує ефективність
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 36
а
комунікації, підтримуючи постійну взаємодію з аудиторією та сприяючи
формуванню активної спільноти навколо волонтерських проєктів.
Крім того, модуль публікації дозволяє налаштовувати формат і зміст
повідомлень, адаптуючи їх під специфіку кожної платформи і особливості
цільової аудиторії. Такий підхід сприяє більш точному донесенню важливої
інформації, залученню уваги та підвищенню довіри до волонтерських
ініціатив. Загалом, цей модуль відіграє ключову роль у комплексній системі
взаємодії, роблячи процес популяризації зборів більш зручним, швидким і
ефективним, що є важливим фактором успішної реалізації соціально
значущих проєктів.
Система спроектована таким чином, щоб бути максимально гнучкою і
легкою у розгортанні, тому вона може працювати на будь-якій операційній
системі, яка підтримує Docker. Завдяки тому, що всі компоненти системи
упаковані у Docker-контейнери, процес інсталяції та запуску значно
спрощується і не залежить від специфіки середовища, на якому розгортається
застосунок.
Використання Docker дозволяє створити ізольоване і стандартизоване
середовище для роботи системи, що забезпечує однакову поведінку
застосунку незалежно від платформи — чи то Windows, Linux, macOS чи
інші операційні системи. Це сприяє швидкому розгортанню, полегшує
масштабування та підтримку системи, а також мінімізує ризики виникнення
помилок, пов’язаних із несумісністю середовищ чи залежностей.
Таким чином, базування системи на технології Docker робить її
універсальною і доступною для широкого кола користувачів та
адміністраторів, забезпечуючи гнучкість і стабільність роботи в
різноманітних умовах експлуатації.
Структура системи є узгодженою та збереженою як у серверному
застосунку, так і в прогресивному вебзастосунку (PWA), що забезпечує
послідовність архітектурного підходу та спрощує підтримку і розвиток
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 37
а
проєкту. Обидві частини системи – клієнтська (PWA) і серверна – побудовані
за єдиними принципами організації коду, що дозволяє досягти високого рівня
узгодженості між компонентами та забезпечити їхню ефективну взаємодію.
Завдяки однаковій структурі, логіка обробки даних, маршрути, модулі
автентифікації, управління ініціативами, інтеграція з платіжною системою та
інші ключові частини реалізовані у спосіб, що легко масштабуються та
повторно використовуються як на стороні клієнта, так і на стороні сервера.
Такий підхід сприяє зниженню складності розробки, оскільки дозволяє
розробникам працювати в межах єдиного логічного каркасу, незалежно від
того, над якою частиною системи вони працюють.
Крім того, однакова структура забезпечує легшу адаптацію нових
учасників команди до проєкту, пришвидшує пошук і виправлення помилок, а
також сприяє впровадженню нових функцій з мінімальними витратами часу
та ресурсів. Це рішення дозволяє підтримувати цілісність системи,
зменшувати технічний борг та забезпечувати стабільну роботу як на боці
користувача, так і на серверній частині.
3.2 Опис функцій системи
У рамках даної роботи було розроблено прогресивний веб-додаток
(PWA), який виконує роль мобільного інтерфейсу для користувачів,
зацікавлених в участі у волонтерських ініціативах. Основна мета створення
цього PWA-застосунку полягала в тому, щоб забезпечити зручний,
доступний і швидкий інструмент для взаємодії з платформою з будь-якого
пристрою, незалежно від операційної системи чи технічних обмежень.
З точки зору користувача, застосунок надає можливість переглядати
доступні волонтерські ініціативи, долучатися до зборів, створювати власні
проєкти, ділитися ними в соціальних мережах та відслідковувати їхній
прогрес у режимі реального часу. Завдяки тому, що додаток є прогресивним
веб-застосунком, він може бути встановлений безпосередньо з браузера на
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 38
а
головний екран смартфона, працювати в офлайн-режимі, швидко
завантажуватися та забезпечувати користувацький досвід, наближений до
нативних мобільних застосунків.
Ключовою перевагою для користувача є простота доступу: немає
потреби проходити процедуру завантаження через AppStore або GooglePlay,
що скорочує шлях до взаємодії з платформою. Крім того, застосунок
створено з урахуванням потреб волонтерської спільноти, тож інтерфейс є
інтуїтивно зрозумілим, функціональність – сфокусованою на реальних
завданнях, а загальний досвід – приємним і легким у використанні. Такий
підхід дозволяє зробити волонтерську діяльність більш доступною та
організованою, стимулюючи участь громадян у соціально важливих
ініціативах.
Система оснащена повноцінним модулем авторизації та реєстрації,
який забезпечує безпечний і зручний доступ до функціоналу застосунку.
Реалізація цього модуля дозволяє будь-якому охочому користувачеві швидко
створити обліковий запис і почати користуватися системою незалежно від
його технічної підготовки чи досвіду.
Реєстрація у системі є максимально простою та не вимагає зайвих дій:
користувачеві достатньо ввести основні дані, після чого він отримує доступ
до усіх необхідних функцій, включно зі створенням волонтерських ініціатив,
переглядом активних зборів, участю в кампаніях та отриманням сповіщень
про оновлення. Авторизація, у свою чергу, дозволяє зберігати персональні
налаштування, відстежувати власну активність у системі та забезпечує захист
від несанкціонованого доступу.
Наявність модуля авторизації та реєстрації робить систему відкритою
та доступною для широкого кола користувачів — як для організаторів, так і
для учасників ініціатив, волонтерів, донорів чи просто зацікавлених осіб. Це
створює умови для формування активної спільноти навколо платформи та
сприяє розвитку волонтерської діяльності завдяки зручному цифровому
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 39
а
середовищу, у якому кожен може легко долучитися до корисної справи.
Система авторизації системи зображено на рисунку 3.2.
Рисунок 3.2 – Система авторизації системи
Після успішної авторизації користувач потрапляє на головну сторінку
власних створених ініціатив, яка є центральною точкою керування усіма
активними та завершеними зборами. Ця сторінка побудована таким чином,
щоб надати користувачеві максимально зручний і швидкий доступ до
ключової інформації та дій, пов’язаних з його волонтерськими проєктами.
Для кожної ініціативи, яку користувач створив у системі, надається
стислий, але інформативний огляд: назва, короткий опис, статус збору, а
також інтерактивне посилання на платіжну сторінку Монобанку. Завдяки
цьому посиланню користувач може у будь-який момент миттєво переглянути
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 40
а
актуальний баланс збору без потреби переходити до сторонніх інтерфейсів
чи виконувати додаткові дії. Це значно спрощує моніторинг фінансового
стану кожної ініціативи та дозволяє своєчасно реагувати на потребу в
додатковому просуванні чи оновленнях.
Крім того, прямо з цієї ж сторінки користувач має змогу виконати
повторну публікацію збору в соціальних мережах. Така можливість дозволяє
підтримувати активну комунікацію з цільовою аудиторією, оперативно
нагадувати про актуальні ініціативи та підвищувати ймовірність залучення
нових донорів. Повторне розміщення інформації виконується всього в кілька
кліків, що робить процес зручним навіть для користувачів без спеціальної
технічної підготовки.
Таким чином, сторінка створених ініціатив виконує функцію
повноцінного центру управління волонтерською діяльністю, поєднуючи
простоту користування з широкими можливостями контролю та поширення
інформації.
Система також надає користувачеві можливість перегляду усіх
створених зборів у Монобанку, що інтегровані до платформи. Ця
функціональність реалізована у зручному вигляді, що дозволяє користувачеві
мати повний контроль над усіма своїми фінансовими ініціативами без
необхідності переходити до зовнішніх сервісів або здійснювати додаткові
ручні дії.
У межах цієї функції користувач може не лише переглядати активні
збори, а й бачити історію раніше створених кампаній, з детальним описом,
станом рахунку, призначенням збору та іншими супутніми даними. Це
дозволяє систематизувати волонтерську діяльність і зберігати повний архів
виконаних проєктів, що особливо важливо для прозорості, звітності та
планування майбутніх ініціатив. Інтерфейс розробленої системи зображено
на рисунку 3.3.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 41
а
Рисунок 3.3 – Інтерфейс розробленої системи
Крім перегляду, система надає інструменти для активного управління
зборами. Зокрема, користувач має змогу в будь-який момент закрити вже
існуючий збір, наприклад, у разі досягнення необхідної суми чи завершення
кампанії. Одночасно із цим доступна функція створення нового збору -
система автоматично підключається до інтерфейсу Монобанку, генерує нову
платіжну сторінку та додає відповідну ініціативу до списку користувача.
Завдяки цим можливостям платформа забезпечує повноцінний цикл
роботи з волонтерськими зборами – від створення до завершення – з
урахуванням усіх потреб організатора. Це дозволяє зберігати ефективність,
зменшувати технічне навантаження та присвячувати більше уваги реальній
волонтерській діяльності.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 42
а
Так само система надає користувачеві можливість перегляду всіх
створених публікацій у соціальних мережах, що були пов’язані з його
волонтерськими ініціативами. Це дозволяє мати чітке уявлення про
інформаційне охоплення кожного збору та слідкувати за історією взаємодії із
зовнішньою аудиторією. Користувач бачить, які саме публікації були
зроблені, коли саме вони були опубліковані, до яких ініціатив вони
відносяться, і в яких соціальних мережах вони були розміщені.
Окрім перегляду, система надає функціонал для створення нової
публікації безпосередньо з інтерфейсу платформи. Це значно спрощує
процес комунікації з аудиторією — користувачеві не потрібно вручну
переходити на кожну соціальну мережу, копіювати посилання чи текст, усе
це виконується автоматизовано через інтеграцію з API відповідних
платформ. Нову публікацію можна легко створити для будь-якого збору,
додавши короткий опис, посилання на платіжну сторінку та медіаконтент,
після чого вона буде миттєво опублікована у вибраних соцмережах.
Таким чином, система не лише оптимізує управління публікаціями, а й
надає зручні інструменти для постійного оновлення інформації про
волонтерські ініціативи, підвищення їхньої видимості та залучення нових
учасників. Це є важливим елементом підтримки активної інформаційної
кампанії та забезпечення успішного збору коштів.
Публікація зборів у соціальних мережах у рамках цієї системи
відбувається виключно від імені самого користувача. Такий підхід забезпечує
прозорість, персоналізацію контенту та підвищує рівень довіри до
розміщених матеріалів, оскільки вони публікуються безпосередньо від
реального організатора ініціативи, а не від анонімного або стороннього
сервісу.
Для того щоб система мала можливість створювати публікації у
соціальних мережах, користувач повинен попередньо авторизувати додаток у
відповідній соцмережі. Це означає, що система отримує дозвіл на доступ до
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 43
а
профілю користувача та можливість публікувати від його імені лише після
надання чіткої згоди з боку користувача. Авторизація відбувається через
офіційний механізм OAuth, який є безпечним і контрольованим процесом, що
гарантує конфіденційність та захист персональних даних.
Без проходження авторизації система не матиме доступу до соціальних
мереж користувача, і, відповідно, не зможе створювати або редагувати жодні
публікації. Такий підхід відповідає принципам захисту приватності, надає
користувачеві повний контроль над власними акаунтами та виключає
можливість несанкціонованих дій зі сторони платформи. Усі дії з
публікацією є прозорими, керованими та здійснюються тільки з відома і за
ініціативою самого користувача.
Усе вище описане в сукупності формує систему, яка є потужним і
зручним інструментом для волонтерів. Завдяки простому доступу через
прогресивний веб-додаток, підтримці багатоплатформеності, інтуїтивно
зрозумілому інтерфейсу та можливості швидко створювати і керувати
ініціативами, волонтери отримують ефективне цифрове середовище для
реалізації своїх проектів.
3.3 Технічні вимоги для роботи з системою
Для успішної роботи з розробленою системою необхідне дотримання
певних технічних вимог, які забезпечують коректне функціонування як
серверної частини, так і клієнтського прогресивного вебзастосунку (PWA).
Ці вимоги стосуються як середовища розробника чи адміністратора системи,
так і користувачів, які безпосередньо взаємодіють з додатком.
З огляду на те, що система побудована із застосуванням
контейнеризації на базі Docker, основною передумовою для розгортання
серверної частини є наявність операційної системи, яка підтримує роботу
DockerEngine. Це може бути будь-яка сучасна версія Linux, Windows або
macOS, що забезпечує сумісність із Docker. Рекомендовано мати
щонайменше 4 ядра CPU, 8 ГБ оперативної пам’яті та від 10 ГБ вільного
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 44
а
місця на диску, залежно від обсягу даних, які зберігатимуться в базі.
Платформа не потребує складної інсталяції — завдяки використанню Docker-
контейнерів усі необхідні компоненти (сервер, база даних, бекенд-сервіси)
розгортаються автоматично за допомогою одного конфігураційного файлу,
що значно спрощує інсталяцію та подальше адміністрування.
На серверній стороні система використовує Node.js як основне
середовище виконання, тому бажано, щоб середовище підтримувало Node.js
версії не нижче 18.x. Усі зовнішні залежності керуються через менеджер
пакетів npm або yarn, тому середовище має дозволяти виконання відповідних
команд у контейнері або локально при необхідності розробки чи
налагодження.
Для збереження даних використовується СУБД MySQL, тому потрібна
підтримка порту 3306 для зв’язку з базою даних. Якщо застосовується
віддалений хостинг або сервер, слід переконатися, що відкриті всі необхідні
порти для з'єднання із зовнішнім інтерфейсом користувача, базою даних і
сторонніми API — зокрема для інтеграції з соціальними мережами та
сервісами типу Monobank.
Щодо клієнтської частини, яка реалізована як прогресивний веб-
додаток, вимоги до пристроїв користувача є мінімальними. Оскільки
застосунок працює в браузері, достатньо мати сучасну версію будь-якого
браузера з підтримкою PWA — GoogleChrome, MozillaFirefox, Microsoft Edge
або Safari[20]. Додаток оптимізовано під мобільні пристрої, тож він коректно
відображається як на Android, так і на iOS. Рекомендується використовувати
пристрої з операційними системами Android 8.0+ або iOS 12.0+ для
найкращої сумісності з функціями офлайн-доступу, кешування та інтеграції з
домашнім екраном пристрою.
Для коректної роботи з публікаціями в соціальні мережі та інтеграцією
з платіжними сервісами необхідна стабільна мережа з доступом до зовнішніх
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 45
а
API. Також користувач повинен мати активні облікові записи у відповідних
соцмережах і пройти процес авторизації через OAuth.
Таким чином, система не потребує дорогого або складного обладнання
— її можна розгорнути навіть на віртуальному сервері з базовими ресурсами.
Завдяки технологіям контейнеризації, спільному використанню JavaScript на
клієнті та сервері, а також легкій структурі PWA, система залишається
доступною як для невеликих волонтерських команд, так і для масштабного
розгортання у більших організаціях.
3.4 Оцінка ефективності
Оцінка ефективності розробленої системи є важливим етапом, що
дозволяє об’єктивно проаналізувати доцільність впровадження
технологічного рішення, його відповідність поставленим цілям, рівень
зручності для кінцевих користувачів, а також реальний внесок у підтримку та
розвиток волонтерських ініціатив. Для цього можна застосовувати як
технічні, так і організаційні критерії оцінки, які дають змогу комплексно
охопити різні аспекти функціонування системи.
Одним з ключових показників ефективності є ступінь автоматизації
процесів, що раніше вимагали ручного втручання. До впровадження даної
системи волонтерам доводилося самостійно створювати сторінки зборів,
шукати способи підключення платіжних сервісів, публікувати інформацію у
соціальних мережах і вести облік зібраних коштів. Завдяки системі ці дії
стали інтегрованими в один логічно побудований інтерфейс, що не лише
зменшило навантаження на організаторів, але й скоротило час, необхідний
для запуску кожної нової ініціативи. Це прямо впливає на оперативність
реагування в кризових або нагальних ситуаціях, що є критично важливим для
волонтерської діяльності.
Іншим важливим критерієм є стабільність та надійність роботи
системи. Завдяки використанню сучасних технологій, таких як Docker,
Node.js, React, та MySQL, система демонструє високу швидкодію і здатність
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 46
а
стабільно функціонувати навіть при значному навантаженні. Тестування
показало, що основні функції — створення ініціатив, публікації, оновлення
стану зборів — виконуються без затримок, що створює позитивний досвід
взаємодії для користувача. Окрім того, можливість розгортання системи на
будь-якому середовищі, що підтримує Docker, значно спрощує
масштабування та обслуговування, а також дозволяє мінімізувати витрати на
інфраструктуру.
З точки зору зручності для користувача, система була спроєктована з
акцентом на простоту, доступність і зрозумілість інтерфейсу. Прогресивний
веб-додаток дозволяє користуватися всіма можливостями платформи без
потреби встановлювати окремі застосунки, що знижує бар’єр входу для
нових користувачів і дозволяє використовувати систему на будь-якому
сучасному смартфоні або комп’ютері. [21] Проведені спостереження за
взаємодією користувачів із додатком підтвердили інтуїтивну логіку навігації,
ефективність механізмів створення та управління зборами, а також позитивне
сприйняття візуального оформлення, побудованого на базі Bootstrap.
Також до показників ефективності можна віднести ступінь інтеграції з
зовнішніми системами. Інтеграція з платіжною платформою Монобанк дала
змогу повністю автоматизувати процес фінансового обліку. Це значно
знижує ризик помилок, викликаних людським фактором, і забезпечує
актуальність даних про стан зборів у режимі реального часу. Інтеграція із
соціальними мережами дозволяє оперативно інформувати аудиторію про нові
кампанії, що підвищує шанси на успішне завершення кожного збору.
Можливість повторного використання публікацій і збереження історії
активностей дає додаткову перевагу в плануванні майбутніх ініціатив.
Загалом ефективність системи оцінюється як висока, оскільки вона не
лише виконує свої функціональні задачі, а й покращує якість організації
волонтерської діяльності, підвищує прозорість процесів, мінімізує витрати
часу та ресурсів, і дозволяє зосередитися на головному — допомозі тим, хто
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 47
а
її потребує. Це дозволяє розглядати систему як дієвий і актуальний
інструмент у сучасних умовах, коли цифрові рішення можуть мати прямий
вплив на соціальні процеси.
3.5 Висновки до розділу
У розділі було здійснено всебічну розробку мобільного застосунку у
вигляді прогресивного вебзастосунку, орієнтованого на підтримку
волонтерських ініціатив. Застосунок створено на основі монолітної
архітектури, що дозволило забезпечити єдину логічну структуру системи з
інтеграцією основних модулів — управління ініціативами, обробки платежів,
авторизації користувачів та автоматичної публікації в соціальних мережах.
Ключовим елементом системи став модуль менеджменту
волонтерських ініціатив, який надає зручний функціонал для створення,
супроводу та просування волонтерських проєктів. Інтеграція з платіжною
системою (зокрема Монобанком) забезпечила прозорість, безпеку та
зручність збору коштів. Додатковий модуль автоматизованого поширення
інформації через соціальні мережі значно розширив охоплення аудиторії,
підвищивши ефективність комунікації та залучення нових учасників.
Технічна реалізація із використанням Docker-контейнерів гарантує
кросплатформність, гнучкість розгортання та стабільність роботи системи у
різноманітних середовищах. Узгоджена структура клієнтської та серверної
частин спрощує обслуговування проєкту, полегшує впровадження нових
функцій та сприяє зниженню технічної складності.
Розроблений застосунок є ефективним інструментом для організації та
підтримки волонтерської діяльності, поєднуючи інтуїтивний інтерфейс,
надійний технічний фундамент та актуальний функціонал для реалізації
соціально важливих ініціатив.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 48
а
4 ЗАХИСТ МОБІЛЬНОГО ЗАСТОСУНКУ ДЛЯ ОРГАНІЗАЦІЇ
ВОЛОНТЕРСЬКИХ ІНІЦІАТИВ З ВИКОРИСТАННЯМ ТЕХНОЛОГІЇ
ПРОГРЕСИВНИХ ВЕБЗАСТОСУНКІВ
4.1 Огляд існуючих рішень
Захист інформації при використанні PWA-застосунків — важливий
аспект, що безпосередньо впливає на довіру користувачів та стабільність
роботи прогресивних вебзастосунків. Хоча PWA функціонує в середовищі
веббраузера, вона має доступ до низки функцій пристрою, тому має
дотримуватись суворих стандартів безпеки.
Однією з базових вимог для роботи PWA є використання
зашифрованого з’єднання HTTPS. Це гарантує, що дані, які передаються між
клієнтом і сервером, захищені від перехоплення зловмисниками. Браузери
блокують або обмежують функціональність PWA, якщо вона розгорнута на
небезпечному протоколі HTTP. HTTPS також захищає від атак типу “man-in-
the-middle” (MITM), які особливо небезпечні при публічному Wi-Fi [22]
Service Workers — це ключовий компонент PWA, що дозволяє
застосунку працювати офлайн або з обмеженим інтернетом. Однак
неправильна реалізація кешування може призвести до витоку
конфіденційних даних. Наприклад, збереження чутливої інформації у
відкритому кеші, доступному без авторизації, може стати вразливістю.
Тому розробник повинен:
1. уникати кешування приватних даних;
2. ретельно контролювати, що саме зберігається;
3. регулярно оновлювати Service Worker та чистити застарілий кеш.
PWA застосунки повинні мати надійний механізм автентифікації, щоб
обмежити доступ до персональних даних користувачів. Зазвичай
використовують токени (наприклад, JWT), які зберігаються в HTTP-only
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 49
а
cookies або Secure Local Storage [23]. Також варто реалізовувати
багатофакторну аутентифікацію (2FA), особливо в застосунках, де
обробляється фінансова інформація.
На відміну від нативних мобільних застосунків, PWA має обмежений
доступ до апаратних функцій пристрою, таких як Bluetooth, камера, GPS
тощо. Цей доступ можливий лише з дозволу користувача та в межах API, які
надає браузер. Кожна дія, яка потребує доступу до особистих ресурсів,
супроводжується системним запитом дозволу, що дозволяє контролювати
рівень доступу до пристрою.
Завдяки централізованому хостингу, оновлення безпеки в PWA
відбуваються автоматично — користувач не повинен завантажувати нову
версію вручну, як у випадку з мобільними додатками. Це дозволяє швидко
виправляти вразливості та підтримувати [24].
Як і будь-які вебзастосунки, PWA схильні до атак типу XSS (Cross-site
Scripting) та CSRF (Cross-site Request Forgery). Для їх запобігання
застосовуються сучасні засоби веббезпеки:
1. фільтрація введення та екранування HTML;
2. політика Content Security Policy (CSP);
3. використання унікальних токенів для кожної форми (CSRF tokens);
4. налаштування заголовків безпеки (Security Headers).
PWA працює в середовищі браузера, який сам по собі є ізольованим
(sandboxed) — це означає, що додаток не має прямого доступу до файлової
системи, ядра ОС та інших застосунків. Це значно зменшує ризики
зараження пристрою або втрати даних.
PWA — це не лише зручний і легкий у доступі формат застосунку, а й
досить безпечний, якщо дотримуватись стандартів безпеки веброзробки.
Ретельне налаштування HTTPS, правильна робота з Service Worker, захищена
авторизація та регулярні оновлення — все це дозволяє забезпечити високий
рівень захисту персональних і службових даних у PWA-середовищі.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 50
а
Захист інформації при роботі з системою, зокрема в прогресивних
вебзастосунках (PWA), є критично важливим аспектом безпеки. Йдеться
насамперед про автентифікацію та авторизацію, які дозволяють надійно
ідентифікувати користувача та контролювати його доступ до ресурсів.
Автентифікаціяце процес перевірки особи користувача, найчастіше
через логін і пароль. Щоб забезпечити безпечне зберігання паролів,
використовують хешування з допомогою таких алгоритмів, як bcrypt або
argon2. Це унеможливлює розшифрування пароля навіть у разі витоку бази
даних. Для підвищення рівня безпеки все частіше застосовують двофакторну
автентифікацію — крім пароля, користувач підтверджує вхід кодом,
отриманим по SMS, email або в спеціальному застосунку. Ще один сучасний
спосіб входу — соціальні логіни (Google, Facebook), які спрощують процес
автентифікації і зменшують кількість паролів, які користувачеві потрібно
запам’ятовувати.
Після підтвердження особи система має визначити, що саме користувач
має право робити. Це — авторизація. Найчастіше використовують рольову
модель доступу, коли кожен користувач має певну роль, що визначає його
права: наприклад, волонтер може створювати запити, а адміністратор —
керувати всіма. Щоб зберігати інформацію про користувача після входу в
систему, використовують токени доступу, зокрема JWT (JSON Web Token). У
ньому міститься вся необхідна інформація, зокрема роль і термін дії.
Токени мають бути належним чином захищені. Їх зберігають у
HttpOnly cookies, які не доступні JavaScript-коду, що запобігає викраденню
токенів через XSS-атаки. Також важливо використовувати Secure cookies, які
передаються лише по HTTPS [25]. Термін дії токена має бути обмеженим, а
система повинна мати механізм його оновлення через так званий “refresh
token”.
Поширені типи атак, такі як brute-force (підбір паролів), XSS (впровадження
шкідливого коду) та CSRF (використання автентифікації користувача без
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 51
а
його згоди), потребують додаткових заходів безпеки. Наприклад, обмеження
кількості спроб входу, екранування введених користувачем даних,
використання CSRF-токенів у формах, а також впровадження політик
безпеки, як-от Content Security Policy.
Щоб вчасно реагувати на загрози, варто впроваджувати логування дій
користувачів: фіксувати спроби входу, зміни даних, виконані дії та пристрої,
з яких здійснено доступ. Це дозволяє виявляти підозрілу активність та
забезпечити повний контроль над системою.
Надійна автентифікація та авторизація — це основа безпечного
функціонування будь-якого вебзастосунку. Їх грамотне впровадження не
лише забезпечує захист даних, а й підвищує довіру користувачів до системи.
Захист інформації при збереженні її в базі даних — один із ключових
аспектів кібербезпеки, особливо при створенні прогресивних вебзастосунків
(PWA), які активно взаємодіють із сервером. Правильне зберігання та
обробка даних допомагає уникнути витоків, несанкціонованого доступу та
порушення конфіденційності.
Насамперед важливо зберігати тільки ті дані, які дійсно необхідні для
роботи системи. Зайва інформація — це додатковий ризик у разі її
компрометації. Усі чутливі дані, як-от паролі, фінансова інформація чи
особисті дані користувача, не повинні зберігатися у відкритому вигляді. Для
паролів обов’язково потрібно застосовувати хешування за допомогою
алгоритмів, таких як bcrypt або Argon2. На відміну від простого шифрування,
хеш-функції є незворотними, тобто оригінальний пароль не можна відновити
з хешу.
Крім паролів, для деяких типів даних, наприклад, номерів карток або
адрес, доречно застосовувати шифрування. Це дозволяє, в разі потреби,
розшифрувати їх для використання в системі, проте лише авторизованим
процесам або користувачам. Шифрування має використовувати сучасні
алгоритми (AES-256, RSA) та надійне зберігання ключів — бажано за
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 52
а
межами основної бази, наприклад, у спеціальних сервісах для керування
секретами.
Щоб захистити дані від SQL-ін’єкцій — одного з найпоширеніших
типів атак, необхідно використовувати параметризовані запити або ORM-
бібліотеки (наприклад, Sequelize, TypeORM). Це забезпечує безпечну
взаємодію з базою даних, унеможливлюючи впровадження шкідливого коду
через поля вводу користувача.
Не менш важливим є обмеження доступу до бази даних. Кожен
користувач або сервіс повинен мати мінімально необхідні права — так зване
правило найменших привілеїв. Наприклад, бекенд-додаток, який лише читає
інформацію, не повинен мати доступ до операцій видалення або зміни. Крім
того, варто контролювати доступ до бази за IP-адресою або через VPN.
Бази даних повинні бути захищені і на рівні з’єднання. Усі з’єднання з
ними мають здійснюватися через захищені канали, як-от TLS/SSL, що
запобігає перехопленню даних під час передачі між сервером і базою.
Також важливо регулярно створювати резервні копії бази даних і
зберігати їх у захищеному вигляді. Це допоможе швидко відновити систему у
разі збою або атаки (наприклад, шифрувального вірусу). Копії також мають
зберігатися з урахуванням шифрування, особливо якщо містять
конфіденційні дані.
Захист інформації в базі даних — це поєднання технологічних,
архітектурних і організаційних рішень, що мають бути закладені в систему
ще на етапі проєктування. Лише комплексний підхід гарантує збереження
конфіденційності, цілісності та доступності даних.
Захист інформації під час передачі даних між застосунком (зокрема PWA) і
сервером є критично важливим аспектом, що забезпечує конфіденційність,
цілісність та автентичність інформації. Адже передача даних в інтернеті
потенційно вразлива до перехоплення, підміни або атак «людина
посередині» (MITM).
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 53
а
Першим і головним засобом захисту є використання шифрування за
допомогою протоколу HTTPS. Цей протокол базується на TLS (Transport
Layer Security) і забезпечує, щоб усі дані, які передаються між клієнтом і
сервером, були зашифровані. Це означає, що навіть якщо хтось перехопить
трафік, він не зможе прочитати вміст повідомлень без відповідного ключа.
Для використання HTTPS необхідно мати дійсний SSL/TLS сертифікат, який
можна отримати в авторизованих центрах сертифікації, зокрема безкоштовно
через Let’s Encrypt.
Окрім шифрування, важливим елементом безпечної передачі є
валідація даних на стороні клієнта і сервера. Навіть якщо користувач
надсилає дані з PWA-застосунку, сервер повинен ретельно перевіряти їх на
відповідність очікуваним форматам, уникати надлишкових привілеїв і
перевіряти авторизацію. Це запобігає атакам через змінені або фальшиві
запити, що можуть бути сформовані вручну або за допомогою зловмисного
коду.
Для авторизованих запитів найкраще використовувати OAuth 2.0 або
схеми з access/refresh токенами, які передаються у заголовках HTTP (а не в
URL або cookie). Це дозволяє уникнути витоку даних у разі ненадійного
зберігання сесій. Додатково варто обмежити строк дії токенів і реалізувати
механізм їх відкликання.
Також доцільно використовувати механізми rate-limiting і захист від
brute-force атак на рівні API, щоб запобігти масовому надсиланню запитів із
метою вгадування паролів або отримання доступу до захищених даних.
На стороні клієнта PWA може зберігати тимчасові дані у Web Storage,
IndexedDB або Cache API. У такому випадку важливо обмежити обсяг і
характер даних, які зберігаються, та очищувати їх після виходу користувача з
акаунта. Не рекомендується зберігати токени авторизації у незахищеному
localStorage без додаткових заходів захисту.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 54
а
У підсумку, безпечна передача даних у PWA забезпечується
комбінацією захищеного з’єднання через HTTPS, перевірки та фільтрації
запитів на сервері, правильного керування токенами і дотримання принципів
безпечної розробки. Це створює надійне середовище для обміну інформацією
між застосунком і сервером навіть у відкритих або ненадійних мережах.
4.2 Реалізація захисту користувачів
У контексті розробки цифрових рішень, особливо таких, які
передбачають обробку персональних даних, інтеграцію з фінансовими
сервісами та публічну взаємодію в соціальних мережах, реалізація захисту
користувачів є одним із ключових аспектів, що визначає надійність і довіру
до системи. У створеній системі для організації волонтерських ініціатив
особливу увагу приділено безпеці користувачів, а також захисту даних, які
вони передають під час реєстрації, автентифікації, створення ініціатив і
публікацій.
Першим і базовим рівнем захисту виступає механізм авторизації та
автентифікації користувачів. У системі реалізовано безпечну реєстрацію
нового користувача з обов’язковим підтвердженням електронної пошти.
Після успішної реєстрації усі подальші запити до внутрішніх ресурсів
системи здійснюються лише з автентифікованим JSON WebToken (JWT),
який генерується на сервері після входу користувача. Токен є підписаним і
обмеженим у часі дії, що запобігає несанкціонованому доступу до захищених
маршрутів у системі. Цей підхід дозволяє реалізувати сесійну безпеку без
потреби зберігання конфіденційної інформації на клієнтському пристрої.
Наступним рівнем захисту є ізоляція прав доступу. Кожен користувач
має доступ лише до власних ініціатив, зборів та публікацій. Це реалізовано
шляхом внутрішньої перевірки прав доступу при кожному запиті: система
переконується, що користувач має право на перегляд або зміну об’єкта, до
якого він звертається. Таким чином, навіть за прямого запиту до API з ID
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 55
а
чужої ініціативи, користувач не отримає доступу, якщо він не є її автором.
Окрема увага приділяється захисту персональних даних, що
передаються до системи. Усі запити між клієнтською частиною (PWA) та
сервером здійснюються по протоколу HTTPS, який гарантує шифрування
переданих даних. Це особливо важливо в умовах, коли система може бути
використана з публічних мереж або мобільних пристроїв, які не завжди
забезпечують повноцінну безпеку каналу зв’язку.
Щодо інтеграцій з зовнішніми сервісами — наприклад, банком або
соціальними мережами — застосовано офіційні протоколи авторизації
(OAuth 2.0), які є індустріальним стандартом. Під час підключення акаунтів у
соцмережах або платіжних сервісах користувач підтверджує свій доступ
через офіційний сайт сервісу, а система отримує лише ті дозволи, які були
явно дозволені користувачем. При цьому вся конфіденційна інформація
(паролі, банківські дані) ніколи не зберігається у системі, а використовується
лише в рамках дозволеного API через тимчасові токени доступу.
Особливо важливим елементом є захист від CSRF- та XSS-атак, що
можуть мати місце в сучасних вебзастосунках. Усі форми та запити в системі
мають захист від міжсайтових підробок запитів, а всі введення користувачів
проходять перевірку та фільтрацію для запобігання впровадженню
шкідливого коду. Використання React на клієнтській стороні також додає
додатковий рівень захисту, оскільки дані автоматично екрануються перед
відображенням у DOM.
У випадку повторного використання токенів або спроб
несанкціонованого доступу, система має механізм інформування та
журналювання активності. Усі запити до захищених ресурсів логуються, що
дозволяє за потреби провести аудит дій користувача або виявити підозрілу
активність. Це важливо не тільки з погляду захисту, а й для підтримання
довіри серед волонтерів, які передають системі частину управління
важливою соціальною діяльністю.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 56
а
Загалом, уся архітектура системи проектувалась із урахуванням
принципів "Securitybydesign", що означає впровадження безпеки як базового
елементу з самого початку розробки. Це дозволяє системі не лише
відповідати сучасним вимогам до інформаційної безпеки, а й забезпечити
комфортне, безпечне і прозоре використання для всіх категорій користувачів,
включаючи волонтерів, благодійників та організаторів зборів. У такий спосіб
реалізація захисту користувачів виступає не лише як технічний модуль, а як
основа довіри до платформи.
4.3 Висновки до розділу
Для безпечної роботи PWA слід використовувати HTTPS, правильно
керувати Service Worker, впроваджувати двофакторну автентифікацію та
авторизацію за ролями. Токени доступу мають зберігатися у захищеному
вигляді (наприклад, у HttpOnly cookie). Необхідно захищатися від XSS, CSRF
та SQL-ін’єкцій через валідацію введення, CSP і параметризовані запити.
Чутливі дані потрібно шифрувати (AES-256) і хешувати (bcrypt). Доступ до
бази даних слід обмежувати, контролювати з’єднання, вести журнал
активності, а також регулярно оновлювати систему та створювати резервні
копії.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 57
а
ВИСНОВКИ
У процесі дослідження та розробки мобільного застосунку у форматі
прогресивного вебзастосунку для підтримки волонтерських ініціатив було
виявлено актуальну потребу у створенні спеціалізованої цифрової
платформи, яка б ефективно об’єднувала функції координації, збору коштів,
комунікації та звітності. Аналізіснуючихрішень показав їхню обмежену
функціональність у контексті волонтерських завдань, що обґрунтовує
необхідність інтегрованої системи з урахуванням особливостей благодійної
діяльності.
Проведений технічний аналіз дозволив сформувати оптимальний стек
технологій — HTML, CSS, Bootstrap, React, Node.js, MySQL, VPS — який
забезпечує гнучкість, масштабованість, швидкодію та зручність
використання. Реалізація застосунку у вигляді монолітної архітектури із
використанням Docker-контейнерів надала можливість створити стійке та
цілісне середовище для запуску й обслуговування системи.
Інтеграція ключових модулів, таких як управління ініціативами,
фінансовий контроль через Монобанк та автоматична публікація в
соціальних мережах, зробила застосунок ефективним інструментом
підтримки волонтерської активності. Значну увагу було приділено питанням
безпеки — реалізовано сучасні підходи до захисту даних, автентифікації та
зберігання конфіденційної інформації.
Таким чином, створений застосунок не лише вирішує актуальні
виклики волонтерського середовища, але й демонструє практичну реалізацію
сучасних технологій у соціально важливому контексті, слугуючи основою
для подальшого розвитку цифрової інфраструктури громадських ініціатив.
Лист
ЧДТУ.252046.005 ПЗ т
Зм. Лист № докум. Підпис Дат 58
а
ДОДАТОК А
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор Віра БАБЕНКО
__________________
«___» ____________ 2025 року
Мобільний застосунок для організації волонтерських ініціатив
з використанням технології прогресивних вебзастосунків
Специфікація
482.ЧДТУ.52046-01
Листів 2
Розробник ______________ Дмитро ЗОЗУЛЯ
Керівник ______________ Інна РОЗЛОМІЙ
Черкаси 2025
2
482.ЧДТУ.52046-01
Позначення Найменування Примітка
Документація
482.ЧДТУ.52046-01 12 01 Текст програми
482.ЧДТУ.52046-01 34 01 Інструкція користувача
ДОДАТОК Б
Мобільний застосунок для організації волонтерських ініціатив
з використанням технології прогресивних вебзастосунків
Текст програми
482.ЧДТУ.52046-01 12 01
Листів 13
Розробник: ____________ Дмитро ЗОЗУЛЯ
Черкаси 2025
2
482.ЧДТУ.52046-01 12 01
const express = require('express');
const { Sequelize, DataTypes } = require('sequelize');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const cors = require('cors');
const axios = require('axios');
const rateLimit = require('express-rate-limit');
const helmet = require('helmet');
const morgan = require('morgan');
const path = require('path');
const multer = require('multer');
const sharp = require('sharp');
const nodemailer = require('nodemailer');
const app = express();
const sequelize = new Sequelize('volunteer_db', 'user', 'password', {
host: 'localhost',
dialect: 'mysql',
logging: false,
pool: {
max: 5,
min: 0,
acquire: 30000,
idle: 10000
}
});
app.use(express.json());
app.use(cors());
app.use(helmet());
app.use(morgan('combined'));
const limiter = rateLimit({
windowMs: 15 * 60 * 1000,
max: 100
});
app.use('/api', limiter);
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });
3
482.ЧДТУ.52046-01 12 01
const User = sequelize.define('User', {
id: {
type: DataTypes.UUID,
defaultValue: Sequelize.UUIDV4,
primaryKey: true
},
email: {
type: DataTypes.STRING,
unique: true,
allowNull: false,
validate: {
isEmail: true
}
},
password: {
type: DataTypes.STRING,
allowNull: false
},
name: DataTypes.STRING,
avatar: DataTypes.STRING,
role: {
type: DataTypes.ENUM('user', 'admin'),
defaultValue: 'user'
},
isVerified: {
type: DataTypes.BOOLEAN,
defaultValue: false
},
verificationToken: DataTypes.STRING,
resetPasswordToken: DataTypes.STRING,
resetPasswordExpires: DataTypes.DATE,
lastLogin: DataTypes.DATE
});
const Project = sequelize.define('Project', {
id: {
type: DataTypes.UUID,
defaultValue: Sequelize.UUIDV4,
primaryKey: true
},
title: {
4
482.ЧДТУ.52046-01 12 01
type: DataTypes.STRING,
allowNull: false
},
description: DataTypes.TEXT,
monobankAccount: DataTypes.STRING,
collectedAmount: {
type: DataTypes.DECIMAL(10, 2),
defaultValue: 0
},
targetAmount: DataTypes.DECIMAL(10, 2),
status: {
type: DataTypes.ENUM('draft', 'active', 'completed', 'cancelled'),
defaultValue: 'draft'
},
category: DataTypes.STRING,
location: DataTypes.STRING,
startDate: DataTypes.DATE,
endDate: DataTypes.DATE,
featured: {
type: DataTypes.BOOLEAN,
defaultValue: false
},
coverImage: DataTypes.STRING
});
const Donation = sequelize.define('Donation', {
id: {
type: DataTypes.UUID,
defaultValue: Sequelize.UUIDV4,
primaryKey: true
},
amount: {
type: DataTypes.DECIMAL(10, 2),
allowNull: false
},
transactionId: DataTypes.STRING,
status: {
type: DataTypes.ENUM('pending', 'completed', 'failed'),
defaultValue: 'pending'
},
donorName: DataTypes.STRING,
donorEmail: DataTypes.STRING,
5
482.ЧДТУ.52046-01 12 01
message: DataTypes.TEXT
});
const Update = sequelize.define('Update', {
id: {
type: DataTypes.UUID,
defaultValue: Sequelize.UUIDV4,
primaryKey: true
},
title: DataTypes.STRING,
content: DataTypes.TEXT,
image: DataTypes.STRING
});
const SocialShare = sequelize.define('SocialShare', {
id: {
type: DataTypes.UUID,
defaultValue: Sequelize.UUIDV4,
primaryKey: true
},
platform: {
type: DataTypes.ENUM('facebook', 'twitter', 'linkedin'),
allowNull: false
},
shareUrl: DataTypes.STRING,
shareCount: {
type: DataTypes.INTEGER,
defaultValue: 0
}
});
User.hasMany(Project);
Project.belongsTo(User);
Project.hasMany(Donation);
Donation.belongsTo(Project);
Project.hasMany(Update);
Update.belongsTo(Project);
Project.hasMany(SocialShare);
SocialShare.belongsTo(Project);
6
482.ЧДТУ.52046-01 12 01
const auth = async (req, res, next) => {
try {
const token = req.header('Authorization').replace('Bearer ', '');
const decoded = jwt.verify(token, process.env.JWT_SECRET);
const user = await User.findByPk(decoded.id);
if (!user) throw new Error();
req.user = user;
req.token = token;
next();
} catch (e) {
res.status(401).send({ error: 'Authentication required' });
}
};
const adminAuth = async (req, res, next) => {
try {
await auth(req, res, () => {});
if (req.user.role !== 'admin') {
throw new Error();
}
next();
} catch (e) {
res.status(403).send({ error: 'Admin access required' });
}
};
const mailer = nodemailer.createTransport({
host: process.env.SMTP_HOST,
port: process.env.SMTP_PORT,
auth: {
user: process.env.SMTP_USER,
pass: process.env.SMTP_PASS
}
});
app.post('/api/users/register', async (req, res) => {
try {
const { email, password, name } = req.body;
const hashedPassword = await bcrypt.hash(password, 8);
const verificationToken = jwt.sign({ email }, process.env.JWT_SECRET);
7
482.ЧДТУ.52046-01 12 01
const user = await User.create({
email,
password: hashedPassword,
name,
verificationToken
});
await mailer.sendMail({
from: process.env.SMTP_FROM,
to: email,
subject: 'Verify your email',
html: `Click here to verify:
${process.env.BASE_URL}/verify/${verificationToken}`
});
const token = jwt.sign({ id: user.id }, process.env.JWT_SECRET);
res.status(201).send({ user, token });
} catch (e) {
res.status(400).send(e);
}
});
app.post('/api/users/login', async (req, res) => {
try {
const { email, password } = req.body;
const user = await User.findOne({ where: { email } });
if (!user) throw new Error('Invalid credentials');
const isMatch = await bcrypt.compare(password, user.password);
if (!isMatch) throw new Error('Invalid credentials');
user.lastLogin = new Date();
await user.save();
const token = jwt.sign({ id: user.id }, process.env.JWT_SECRET);
res.send({ user, token });
} catch (e) {
res.status(400).send({ error: e.message });
}
});
app.post('/api/projects', auth, upload.single('coverImage'), async (req, res) => {
8
482.ЧДТУ.52046-01 12 01
try {
const projectData = req.body;
if (req.file) {
const buffer = await sharp(req.file.buffer)
.resize({ width: 1200, height: 630, fit: 'cover' })
.toBuffer();
const filename = `project-${Date.now()}.jpg`;
await sharp(buffer).toFile(path.join('uploads', filename));
projectData.coverImage = filename;
}
const project = await Project.create({
...projectData,
UserId: req.user.id
});
res.status(201).send(project);
} catch (e) {
res.status(400).send(e);
}
});
app.get('/api/projects', async (req, res) => {
try {
const { page = 1, limit = 10, category, status, search } = req.query;
const offset = (page - 1) * limit;
const where = {};
if (category) where.category = category;
if (status) where.status = status;
if (search) {
where[Sequelize.Op.or] = [
{ title: { [Sequelize.Op.like]: `%${search}%` } },
{ description: { [Sequelize.Op.like]: `%${search}%` } }
];
}
const projects = await Project.findAndCountAll({
where,
include: [
9
482.ЧДТУ.52046-01 12 01
{
model: User,
attributes: ['id', 'name', 'email']
}
],
limit: parseInt(limit),
offset: offset,
order: [['createdAt', 'DESC']]
});
res.send({
projects: projects.rows,
total: projects.count,
pages: Math.ceil(projects.count / limit)
});
} catch (e) {
res.status(500).send(e);
}
});
app.post('/api/projects/:id/donate', auth, async (req, res) => {
try {
const project = await Project.findByPk(req.params.id);
if (!project) return res.status(404).send();
const donation = await Donation.create({
...req.body,
ProjectId: project.id,
status: 'pending'
});
const monobankResponse = await
axios.post('https://api.monobank.ua/personal/statement', {
account: project.monobankAccount,
from: Math.floor(Date.now() / 1000),
to: Math.floor(Date.now() / 1000) + 3600
}, {
headers: { 'X-Token': req.body.monobankToken }
});
if (monobankResponse.data.status === 'success') {
donation.status = 'completed';
10
482.ЧДТУ.52046-01 12 01
project.collectedAmount += parseFloat(req.body.amount);
await donation.save();
await project.save();
}
res.send({ donation, project });
} catch (e) {
res.status(500).send(e);
}
});
app.post('/api/projects/:id/updates', auth, upload.single('image'), async (req, res) =>
{
try {
const project = await Project.findOne({
where: { id: req.params.id, UserId: req.user.id }
});
if (!project) return res.status(404).send();
const updateData = req.body;
if (req.file) {
const filename = `update-${Date.now()}.jpg`;
await sharp(req.file.buffer)
.resize(800, 600)
.toFile(path.join('uploads', filename));
updateData.image = filename;
}
const update = await Update.create({
...updateData,
ProjectId: project.id
});
res.status(201).send(update);
} catch (e) {
res.status(400).send(e);
}
});
app.post('/api/projects/:id/share', auth, async (req, res) => {
try {
const project = await Project.findOne({
11
482.ЧДТУ.52046-01 12 01
where: { id: req.params.id, UserId: req.user.id }
});
if (!project) return res.status(404).send();
const { platform } = req.body;
let shareUrl;
if (platform === 'facebook') {
const response = await axios.post('https://graph.facebook.com/v12.0/me/feed',
{
message: `Check out my volunteer project: ${project.title}`,
link: `${process.env.BASE_URL}/projects/${project.id}`,
access_token: req.body.accessToken
});
shareUrl = `https://facebook.com/${response.data.id}`;
} else if (platform === 'twitter') {
const response = await axios.post('https://api.twitter.com/2/tweets', {
text: `Check out my volunteer project: ${project.title}
${process.env.BASE_URL}/projects/${project.id}`
}, {
headers: {
'Authorization': `Bearer ${req.body.accessToken}`
}
});
shareUrl = `https://twitter.com/user/status/${response.data.id}`;
} else if (platform === 'linkedin') {
const response = await axios.post('https://api.linkedin.com/v2/shares', {
owner: `urn:li:person:${req.body.linkedinUserId}`,
subject: project.title,
text: {
text: `Check out my volunteer project: ${project.title}`
},
content: {
contentEntities: [{
entityLocation: `${process.env.BASE_URL}/projects/${project.id}`,
thumbnails: [{
resolvedUrl: project.coverImage
}]
}]
}
}, {
headers: {
12
482.ЧДТУ.52046-01 12 01
'Authorization': `Bearer ${req.body.accessToken}`
}
});
shareUrl = response.data.id;
}
const share = await SocialShare.create({
platform,
shareUrl,
ProjectId: project.id
});
res.send({ success: true, share });
} catch (e) {
res.status(500).send(e);
}
});
app.get('/api/dashboard', adminAuth, async (req, res) => {
try {
const stats = {
totalProjects: await Project.count(),
activeProjects: await Project.count({ where: { status: 'active' } }),
totalDonations: await Donation.sum('amount'),
recentDonations: await Donation.findAll({
limit: 5,
order: [['createdAt', 'DESC']],
include: [{ model: Project }]
})
};
res.send(stats);
} catch (e) {
res.status(500).send(e);
}
});
sequelize.sync().then(() => {
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
});
13
482.ЧДТУ.52046-01 12 01
process.on('unhandledRejection', (error) => {
console.error('Unhandled promise rejection:', error);
});
ДОДАТОК В
Мобільний застосунок для організації волонтерських ініціатив
з використанням технології прогресивних вебзастосунків
Інструкція користувача
482.ЧДТУ.52046-01 34 01
Листів 4
Розробник: _____________ ДмитроЗОЗУЛЯ
Черкаси 2025
2
482.ЧДТУ.52046-01 34 01
Дана система створена з метою максимальної автоматизації та
спрощення процесу організації зборів допомоги, управління волонтерськими
ініціативами, інтеграції з фінансовими сервісами та поширення інформації в
соціальних мережах. Завдяки зручному мобільному PWA-застосунку система
надає змогу будь-якому зареєстрованому користувачеві швидко створити
власну ініціативу, запустити збір коштів і ефективно поширити інформацію
серед широкої аудиторії. У цій інструкції детально описано основні кроки
для комфортної та безпечної роботи з платформою.
Оскільки система розроблена як прогресивний веб-додаток (PWA), її не
потрібно завантажувати з App Store або Google Play. Можна відкрити
систему просто через браузер вашого смартфона або комп’ютера. Якщо
бажаєте мати швидкий доступ до неї як до звичайного застосунку, натисніть
на пропозицію «Додати на головний екран», яка з’явиться при першому вході
(особливо на Android).
Щоб почати користуватися платформою, спочатку потрібно
зареєструватися. На головній сторінці натисніть «Реєстрація» та введіть вашу
електронну пошту, придумайте пароль та підтвердіть його. Після реєстрації
отримаєте лист для підтвердження — обов’язково відкрийте його та
перейдіть за посиланням. Після цього можете увійти в систему за допомогою
облікових даних.
Після авторизації потрапляєте на головну сторінку, де відображаються
всі ваші волонтерські ініціативи. Тут можна:
 Переглянути поточний баланс збору коштів за кожною
ініціативою.
 Перейти за посиланням на сторінку збору в Монобанку.
 Повторно опублікувати інформацію про ініціативу у соціальні
мережі.
 Відкрити або завершити збір.
3
482.ЧДТУ.52046-01 34 01
 Перейти до детального перегляду та редагування кожної
ініціативи.
Щоб створити нову ініціативу, натисніть кнопку «Створити
ініціативу». У формі введіть назву збору, короткий опис, мету збору (на що
саме підуть кошти), суму, яку необхідно зібрати, а також додайте зображення
або банер для візуального оформлення.
Після створення ініціативи система автоматично зв’яже її з вашим
обліковим записом, зможете керувати нею з головної сторінки.
Після створення ініціативи система запропонує вам підключити збір до
вашого рахунку в Монобанку. Для цього вам потрібно буде авторизуватися
через OAuth, дозволивши доступ застосунку до інформації про рахунок
збору. Це дозволить системі автоматично відображати баланс збору та
зберігати історію переказів без втручання з вашого боку. Важливо: додаток
не зберігає паролі або дані карток — тільки офіційний токен доступу.
Система має інтеграцію з Facebook та іншими платформами. Щоб
опублікувати інформацію про збір:
 Перейдіть до потрібної ініціативи.
 Натисніть «Опублікувати в соціальних мережах».
 Авторизуйте доступ системи до вашого акаунту в соціальній
мережі.
 Після авторизації оберіть тип публікації (звичайний пост, сторіс,
тощо).
 Підтвердіть розміщення.
Усі публікації здійснюються від вашого імені, а не від імені системи.
Таким чином, повністю контролюєте, що і коли буде опубліковано. Після
публікації вона з’явиться в розділі «Мої публікації», де зможете її
переглянути або створити нову.
У будь-який момент можете:
4
482.ЧДТУ.52046-01 34 01
 Завершити активний збір.
 Створити новий.
 Змінити опис або медіа.
 Подивитися повну історію транзакцій.
 Поділитися посиланням на сторінку збору з іншими
користувачами.
У розділі «Публікації» можна побачити список усіх публікацій,
якістворили через систему. Тут доступна функція створення нової публікації,
перегляду попередніх, а також дублювання існуючих постів для повторного
розміщення з оновленим контентом.
Система підтримується на всіх сучасних мобільних і десктопних
платформах. Оскільки вона реалізована як PWA, вона не потребує потужного
пристрою або спеціального середовища для роботи. Можете користуватися
нею з будь-якого пристрою, що має браузер із підтримкою JavaScript та
інтернет-з’єднання.
Всі дії у системі захищені. Ваші особисті дані не передаються третім
особам. Доступ до рахунків та соцмереж відбувається лише за вашого
дозволу. Система використовує лише офіційні API для інтеграцій, а також
зберігає історію активностей лише в межах вашого облікового запису.
Користування системою інтуїтивно просте, але при цьому потужне.
Вона поєднує в собі функціональність, захищеність, та гнучкість, необхідну
для волонтерської діяльності в умовах постійної зміни. Кожен користувач
може швидко запустити нову ініціативу, ефективно її просувати та
контролювати фінансовий потік — усе в одному зручному інтерфейсі.
Система є надійним інструментом для тих, хто хоче допомагати швидко,
прозоро і ефективно.
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Остапчук І. Сучасні ІТ-рішення для організації волонтерської діяльності в
Україні.Інформаційні технології і комп’ютерна інженерія. 2021. № 2(63).
С. 112–117.
2. Ященко Н.І., Савченко О.О. Використання цифрових технологій в
управлінні громадськими ініціативами.Управління розвитком. 2020. № 4.
С. 23–27.
3. Бондаренко В. та ін. Розробка PWA-застосунків: можливості та виклики в
контексті українських користувачів.Проблеми програмування. 2022. № 3.
С. 34–40.
4. Андрушенко І.М., Шевченко Т.І. Інтернет речей та волонтерство: нові
напрями взаємодії.Інформаційні технології в освіті, науці і техніці. 2023.
№ 1. С. 59–65.
5. Міністерство цифрової трансформації України. Цифрова держава:
результати та перспективи [Електронний ресурс]. Режим доступу:
https://thedigital.gov.ua
6. Russell A., Berman M. Progressive Web Apps: Building Lightning Fast Web
Apps with HTML5, Service Workers, and Streams. Berkeley: Apress, 2017. 250
p.
7. Osmani A. Learning JavaScript Design Patterns. Sebastopol: O’Reilly Media,
2021. 280 p.
8. Flanagan D. JavaScript: The Definitive Guide. 7th ed. Sebastopol: O’Reilly
Media, 2020. 706 p.
9. Banks A., Porcello E. Learning React: A Hands-On Guide to Building Web
Applications Using React and Redux. Addison-Wesley, 2020. 350 p.
10.Tilkov S., Vinoski S. Node.js: Using JavaScript to Build High-Performance
Network Programs.IEEE Internet Computing. 2010. Vol. 14(6). P. 80–83.
Арк.
ЧДТУ.252046.005 ПЗ 76
Змн. Арк. № докум. Підпис Дата
11.Shah S., Patel D. Securing PWA Using Modern Web Technologies.Journal of
Web Engineering. 2022. Vol. 21(4). P. 341–359.
12.Garbers J., Steigerwald J. Fullstack React: The Complete Guide to ReactJS and
Friends. Fullstack.io, 2021. 836 p.
13.MySQL Documentation Team. MySQL 8.0 Reference Manual. Oracle, 2023.
[Electronic resource]. Available at: https://dev.mysql.com/doc/
14.Docker Inc. Docker Documentation. 2024. [Electronic resource]. Available at:
https://docs.docker.com/
15.Google Developers. Introduction to Service Workers. 2023. [Electronic
resource]. Available at:
https://developers.google.com/web/fundamentals/primers/service-workers/
16.Ferguson R. Securing Node Applications. Berkeley: Apress, 2020. 270 p.
17.Mozilla Developer Network. Content Security Policy (CSP) [Electronic
resource]. Available at: https://developer.mozilla.org/en-
US/docs/Web/HTTP/CSP
18.Hevery M., Koenig J. Clean Code in JavaScript: Best Practices. Packt
Publishing, 2022. 450 p.
19.McPeak S. Building Secure and Scalable Web Applications with Node.js and
React. Packt Publishing, 2021. 395 p.
20.Bahadori E. Progressive Web Apps with React: Create fast, reliable, and
engaging PWAs using modern web technologies. Packt Publishing, 2023. 340 p.
21.Lindstrom M. Digital Humanitarians: How Big Data Is Changing the Face of
Humanitarian Response. Routledge, 2020. 210 p.
22.Silva R., Raza S. Integration of Payment Systems in Mobile Applications:
Challenges and Solutions.International Journal of Web Information Systems.
2021. Vol. 17(2). P. 125–139.
23.Crosswell M. Designing Progressive Web Apps: Building Modern Web Apps
Using Service Workers and Web App Manifests. O’Reilly Media, 2021. 300 p.
Арк.
ЧДТУ.252046.005 ПЗ 77
Змн. Арк. № докум. Підпис Дата
24.Hussain S., Ahmed M. Role-Based Access Control for Secure Web
Applications.International Journal of Advanced Computer Science. 2022. Vol.
13(3). P. 147–153.
25.Kanungo A., Keshari P. Implementing AES Encryption and Bcrypt Hashing for
Secure Web Data.Journal of Cyber Security Technology. 2023. Vol. 7(1). P.
45–58.
Арк.
ЧДТУ.252046.005 ПЗ 78
Змн. Арк. № докум. Підпис Дата
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
