Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/8661| Назва: | Методи та засоби розробки користувацького WEB додатку з використанням мікросервісного підходу |
| Автори: | РУДНИЦЬКИЙ, Володимир КОВАЛЬ, Олександр |
| Дата публікації: | 2023 |
| Короткий огляд (реферат): | Методи та засоби розробки користувацького WEB додатку з використанням мікросервісного підходу є дуже важливим напрямом досліджень ув сучасному інформаційному суспільстві. Оскільки використання мікросервісного підходу дозволяє швидко та ефективно розробляти та впроваджувати веб-додатки, що стає надзвичайно важливим в умовах постійних змін і вимог користувачів. Розробка веб-додатків вимагає обрання та оптимізації архітектурних рішень, що допомагає забезпечити масштабованість та надійність додатків. Також мікросервіси дозволяють внесення змін та вдосконалень до окремих компонентів додатка без впливу на решту системи, що полегшує їх підтримку та розвиток. Такий підхід сприяє легкій інтеграції сторонніх сервісів та додатків, що підвищує функціональність веб-додатків. Усі ці аспекти роблять тему дослідження важливою для розробників, підприємств та організацій, які бажають підтримувати високий рівень якості та продуктивності своїх веб-додатків. Метою кваліфікаційної роботи магістра є розробка користувацького веб-додатку, який складається з двох або більше незалежних користувацьких додатків, обʼєднаних за допомогою технології мікрофронтендів. Об'єкт дослідження – процес розробки веб-додатку, який базується на мікросервісній архітектурі. Дослідження спрямоване на вивчення різних аспектів цього процесу, включаючи архітектурні рішення, вибір технологій, розробку окремих мікросервісів, їх інтеграцію, управління та моніторинг. Предмет дослідження – методи, підходи та інструменти, які використовуються під час розробки веб-додатків, заснованих на мікросервісній архітектурі. Наукова новизна одержаних результатів полягає у впровадженні ефективних методів та рішень для розробки мікросервісних веб-додатків, що покращує їх безпеку, продуктивність та надійність, а також допомагає швидко адаптуватися до змінних умов. Практична цінність результатів роботи полягає у розробці нових програмних рішень, які будуть опрацьовувати велику кількість даних, де у розробників буде можливість використовувати дане рішення для створення комунікації між сервісами системи. У першому розділі розглянуто типи розробки користувацьких веб- додатків, а саме Single Page Application (SPA) та Multi Page Application (MPA). Також розглянуто популярні фреймворки, які використовуються для розробки SPA та MPA. На основі отриманої інформації було визначено напрямок роботи, який містить вивчення концепції мікрофронтенд. У другому розділі проведено детальний огляд різноманітних технологій, фреймворків та інструментів, які використовуються для розробки веб-додатків на основі мікросервісної архітектури. Було розглянуто ключові аспекти, такі як мікросервісні архітектури, фреймворки розробки, інструменти контейнеризації, безпеки та моніторингу, а також патерни розробки, що сприяють розумінню різноманітних можливостей у цій області. Було зроблено вибір технологій для подальшої роботи над розробкою веб- додатку з використанням мікросервісного підходу. Враховуючи вимоги щодо поставленої основної задачі, були обрані конкретні інструменти та підходи, які найкращим чином відповідають поставленим завданням. У третьому розділі було представлено структуру системи, її архітектурні рішення та основні компоненти, що входять в склад мікросервісного додатку. Також розглянуто функції та можливості системи, які надають користувачам та дозволяють досягти їхніх цілей та завдань. Приділено увагу аспектам безпеки в мікросервісному підході. Розглянуто заходи забезпечення захисту інформації та безпеки даних при роботі з системою. Представлено технічні вимоги та рекомендації для користувачів, які планують використовувати цю систему. Висновки містять основні результати роботи. У додатках наведено специфікацію, текст програми та інструкцію користувачу. Загальний обсяг роботи становить 93 сторінки. У кваліфікаційній роботі магістра 15 рисунків, 2 таблиці, 3 додатки. Для виконання роботи використано 20 літературних джерел. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/8661 |
| Розташовується у зібраннях: | 123 Комп’ютерна інженерія (Комп'ютерні системи та мережі) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| 1_ТИТУЛКА_Коваль-merged.pdf Restricted Access | 1.98 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНОЇ БЕЗПЕКИ ТА КОМП’ЮТЕРНОЇ
ІНЖЕНЕРІЇ
Пояснювальна записка
до кваліфікаційної роботи магістра
на тему: «Методи та засоби розробки
користувацького WEB додатку з використанням
мікросервісного підходу»
ЧДТУ.232289.003 ПЗ
Виконав: студент 2 курсу, групи МКМ-2205
спеціальності 123 – Комп’ютерна інженерія
за освітньою програмою – Комп’ютерні системи
та мережі
Олександр КОВАЛЬ
Керівник
д.т.н, професор Володимир РУДНИЦЬКИЙ
Н. контроль
Світлана ГРЕСЬКО
Рецензент
старший викладач кафедри інформаційних
технологій, ЧНУ ім. Б. Хмельницького
к.т.н. Тетяна СТАБЕЦЬКА
«ЗАХИСТ ДОЗВОЛЯЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор ____________ Віра БАБЕНКО
Черкаси 2023 року
Черкаський державний технологічний університет
Факультет інформаційних технологій і систем
Кафедра інформаційної безпеки та комп‘ютерної інженерії
Освітньо-кваліфікаційний рівень Магістр
Спеціальність 123 – Комп’ютерна інженерія
Освітня програма Комп’ютерні системи та мережі
«ЗАТВЕРДЖУЮ»
Завідувач кафедри _____ Володимир РУДНИЦЬКИЙ
«10» жовтня 2023 року
ЗАВДАННЯ
на кваліфікаційну роботу магістра студенту
Ковалю Олександру Андрійовичу
(прізвище, ім‘я, по батькові)
1. Тема роботи Методи та засоби розробки користувацького
WEB додатку з використанням мікросервісного підход”
Керівник роботи д.т.н., проф. Володимир РУДНИЦЬКИЙ
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «06» жовтня 2023 р. № 267/04
2. Строк подання студентом роботи
3. Вихідні дані до роботи:
Мікросервіси, фреймворк, мікрофронтенд, Single-SPA, TypeScript, GraphQL,
GitHub Actions, CI/CD, Angular і React.
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
Розділ 1 Аналіз предметної області та постановка задачі дослідження
Розділ 2 Вибір технології та інструментальних засобів розробки системи
Розділ 3 Оптимізація методів та засобів розробки користувацького web додатку
з використанням мікросервісного підходу
Висновки
Перелік скорочень та умовних позначень
Список використаних джерел
Додатки
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів):
Додаток А Специфікація
Додаток Б Текст програм
Додаток В Інструкція користувача
6. Консультанти розділів роботи
Підпис, дата
Розділ Прізвище, ініціали та
посада завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 10 жовтня 2023 року
КАЛЕНДАРНИЙ ПЛАН
№ з/п Назва етапів кваліфікаційної роботи магістра Строк виконання
етапів роботи Примітка
1 Збір матеріалу 21.10 – 28.10 виконано
2 Обробка матеріалу 29.10 – 06.11 виконано
3 Обґрунтування актуальності виконання 12.11 – 15.11 виконано
досліджень
4 Оцінка стану проблеми, виокремлення виконано
дослідницьких задач, постановка задачі 16.11 – 18.11
дослідження
5 Викладення сутності і результатів дослідження 20.11– 25.11 виконано
6 Практичне застосування результатів виконано
дослідження 26.11 – 27.11
7 Оформлення результатів в пояснювальну записку 27.11 – 30.11 виконано
8 Подання роботи на відгук та рецензування 01.12.23 виконано
Студент-магістрант ____________________________ Олександр КОВАЛЬ
(підпис)
Керівник роботи _____________________________ Володимир РУДНИЦЬКИЙ
(підпис)
АНОТАЦІЯ
Методи та засоби розробки користувацького WEB додатку з
використанням мікросервісного підходу є дуже важливим напрямом
досліджень ув сучасному інформаційному суспільстві. Оскільки
використання мікросервісного підходу дозволяє швидко та ефективно
розробляти та впроваджувати веб-додатки, що стає надзвичайно важливим в
умовах постійних змін і вимог користувачів. Розробка веб-додатків вимагає
обрання та оптимізації архітектурних рішень, що допомагає забезпечити
масштабованість та надійність додатків.
Також мікросервіси дозволяють внесення змін та вдосконалень до
окремих компонентів додатка без впливу на решту системи, що полегшує їх
підтримку та розвиток. Такий підхід сприяє легкій інтеграції сторонніх
сервісів та додатків, що підвищує функціональність веб-додатків.
Усі ці аспекти роблять тему дослідження важливою для розробників,
підприємств та організацій, які бажають підтримувати високий рівень якості
та продуктивності своїх веб-додатків.
Метою кваліфікаційної роботи магістра є розробка користувацького
веб-додатку, який складається з двох або більше незалежних користувацьких
додатків, обʼєднаних за допомогою технології мікрофронтендів.
Об'єкт дослідження – процес розробки веб-додатку, який базується на
мікросервісній архітектурі. Дослідження спрямоване на вивчення різних
аспектів цього процесу, включаючи архітектурні рішення, вибір технологій,
розробку окремих мікросервісів, їх інтеграцію, управління та моніторинг.
Предмет дослідження – методи, підходи та інструменти, які
використовуються під час розробки веб-додатків, заснованих на
мікросервісній архітектурі.
Наукова новизна одержаних результатів полягає у впровадженні
ефективних методів та рішень для розробки мікросервісних веб-додатків, що
покращує їх безпеку, продуктивність та надійність, а також допомагає
швидко адаптуватися до змінних умов.
Практична цінність результатів роботи полягає у розробці нових
програмних рішень, які будуть опрацьовувати велику кількість даних, де у
розробників буде можливість використовувати дане рішення для створення
комунікації між сервісами системи.
У першому розділі розглянуто типи розробки користувацьких веб-
додатків, а саме Single Page Application (SPA) та Multi Page Application
(MPA). Також розглянуто популярні фреймворки, які використовуються для
розробки SPA та MPA. На основі отриманої інформації було визначено
напрямок роботи, який містить вивчення концепції мікрофронтенд.
У другому розділі проведено детальний огляд різноманітних
технологій, фреймворків та інструментів, які використовуються для розробки
веб-додатків на основі мікросервісної архітектури. Було розглянуто ключові
аспекти, такі як мікросервісні архітектури, фреймворки розробки,
інструменти контейнеризації, безпеки та моніторингу, а також патерни
розробки, що сприяють розумінню різноманітних можливостей у цій області.
Було зроблено вибір технологій для подальшої роботи над розробкою веб-
додатку з використанням мікросервісного підходу. Враховуючи вимоги щодо
поставленої основної задачі, були обрані конкретні інструменти та підходи,
які найкращим чином відповідають поставленим завданням.
У третьому розділі було представлено структуру системи, її
архітектурні рішення та основні компоненти, що входять в склад
мікросервісного додатку. Також розглянуто функції та можливості системи,
які надають користувачам та дозволяють досягти їхніх цілей та завдань.
Приділено увагу аспектам безпеки в мікросервісному підході. Розглянуто
заходи забезпечення захисту інформації та безпеки даних при роботі з
системою. Представлено технічні вимоги та рекомендації для користувачів,
які планують використовувати цю систему.
Висновки містять основні результати роботи. У додатках наведено
специфікацію, текст програми та інструкцію користувачу. Загальний обсяг
роботи становить 93 сторінки. У кваліфікаційній роботі магістра 15 рисунків,
2 таблиці, 3 додатки. Для виконання роботи використано 20 літературних
джерел.
ANOTATION
Methods and means of developing a custom WEB application using a
microservice approach are very important in today's information society. Because
using a microservices approach allows you to quickly and efficiently develop and
implement web applications, which becomes extremely important in the context of
constant changes and user requirements. Web application development requires the
selection and optimization of architectural solutions that help ensure the scalability
and reliability of applications.
Also, microservices allow making changes and improvements to individual
components of the application without affecting the rest of the system, which
facilitates their maintenance and development. This approach facilitates the easy
integration of third-party services and applications, which increases the
functionality of web applications.
All these aspects make the research topic important for developers,
enterprises and organizations that want to maintain a high level of quality and
performance of their web applications.
The goal of the thesis is to develop a custom web application that consists of
two or more independent custom applications combined using microfrontend
technology.
The object of research is the process of developing a web application based
on microservice architecture. The research is aimed at studying various aspects of
this process, including architectural decisions, technology selection, development
of individual microservices, their integration, management and monitoring.
The subject of research is the methods, approaches and tools used during the
development of web applications based on microservice architecture.
The scientific novelty of the obtained results lies in the implementation of
effective methods and solutions for the development of microservice web
applications, which improves their security, performance and reliability, and also
helps to quickly adapt to changing conditions.
The practical value of the work results lies in the development of new
software solutions that will process a large amount of data, where developers will
have the opportunity to use this solution to create communication between system
services.
The first chapter covers the types of custom web application development,
namely Single Page Application (SPA) and Multi Page Application (MPA).
Popular frameworks used for SPA and MPA development are also reviewed. On
the basis of the received information, a direction of work was determined, which
includes the study of the concept of microfrontend.
The second chapter provides a detailed overview of the various technologies,
frameworks, and tools used to develop web applications based on microservices
architecture. Key aspects such as microservice architectures, development
frameworks, containerization, security and monitoring tools, and development
patterns were covered to help understand the various opportunities in this area. A
choice of technologies was made for further work on the development of a web
application using a microservices approach. Taking into account the requirements
of the project, specific tools and approaches that best meet the tasks were selected.
The third section presented the structure of the system, its architectural
solutions, and the main components that make up the microservice application. The
features and capabilities of the system that provide users and allow them to achieve
their goals and objectives are also considered. Attention is paid to security aspects
in the microservice approach. Measures to ensure information protection and data
security when working with the system are considered. Technical requirements and
recommendations for users who plan to use this system are presented. In the end, it
was held
The conclusions contain the main results of the work. Appendices include
specification, program text, and user manual. The total volume of work is 93
pages. There are 15 figures, 2 tables, and 3 appendices in the Master's thesis. 20
literary sources were used to perform the work.
3
ВСТУП………………………………………………………………………. 4
РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА
ЗАДАЧІ ДОСЛІДЖЕННЯ…………………………………………………... 7
1.1 Аналіз предметної області……………………………………...…. 7
1.2 Вибір напряму дослідження………………………………………. 18
1.3 Постановка задачі…………………………………………………. 24
1.4 Висновки до розділу 1…………………………………………….. 26
РОЗДІЛ 2 ВИБІР ТЕХНОЛОГІЇ ТА ІНСТРУМЕНТАЛЬНИХ ЗАСОБІВ
РОЗРОБКИ СИСТЕМИ…………………………………………………….. 27
2.1 Огляд існуючих технологій……………………………………… 27
2.2 Вибір технологій ………………………………………………… 33
2.3 Висновки до розділу 2…………………………………………… 43
РОЗДІЛ 3 ОПТИМІЗАЦІЯ МЕТОДІВ ТА ЗАСОБІВ РОЗРОБКИ
КОРИСТУВАЦЬКОГО WEB ДОДАТКУ З ВИКОРИСТАННЯМ
МІКРОСЕРВІСНОГО ПІДХОДУ…………………………………………... 44
3.1 Структура системи………………………………………………... 44
3.2 Опис функцій системи……………………………………………. 52
3.3 Забезпечення захисту інформації при роботі зі створеною
системою ……………………………………………………………… 59
3.4 Технічні вимоги для роботи з системою……………………….... 63
3.5 Оцінка ефективності застосування системи…………………….. 66
3.6 Висновки до розділу 3……………………………………………. 68
ВИСНОВКИ………………………………………………………………….. 70
ПЕРЕЛІК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ…………………... 72
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ…………………………………… 74
ДОДАТКИ:
4
А – 482.ЧДТУ.32289-01 Методи та засоби розробки
користувацького WEB додатку з використанням мікросервісного підходу
5
ВСТУП
Актуальність теми дослідження. З врахуванням стрімкого розвитку
технологій, актуальність дослідження методів та засобів розробки
користувацьких веб-додатків з використанням мікросервісного підходу
виявляється в тому, що цей підхід дозволяє полегшити підтримку та
розширення програмних додатків, забезпечуючи більш гнучкий розвиток,
швидке впровадження нових функцій, а також підвищення надійності та
масштабованості системи. Це важливо з огляду зростання складності веб-
додатків, популярності мобільних пристроїв та IoT, а також посилення вимог
до ефективності та якості користувацького досвіду.
Метою кваліфікаційної роботи магістра є розробка користувацького
веб-додатку, який складається з двох або більше незалежних користувацьких
додатків, обʼєднаних за допомогою технології мікрофронтентів.
Для досягнення сформульованої мети необхідно вирішити такі задачі:
1. Розробка архітектури користувацького веб-додатку з використанням
мікрофронтендів, включаючи розподілену структуру, способи
комунікації між мікрофронтендами та способи завантаження;
2. Вибір та налаштування інструментів для реалізації мікрофронтендів,
таких як бібліотеки для мікрофронтендів, інструменти збірки та
пакування;
3. Реалізація мікрофронтендів, включаючи їхню функціональність та
інтерфейс;
4. Оцінка продуктивності та масштабованості користувацького веб-
додатку з використанням мікрофронтендів.
На тему розробки веб-додатків з використанням мікросервісного
підходу існує багато інформаційних джерел. Наприклад книга "Microservices
in Action" авторів Морган Брус та інші допомагає розібратися у
мікросервісній архітектурі, надаючи конкретні приклади розробки
6
мікросервісів та різні аспекти, пов'язані з їх впровадженням. А в книзі
"Building Microservices" автора Сема Ньюмена, докладно розглядаються
підходи щодо створення мікросервісних систем, включаючи питання
розробки, впровадження, масштабування та безпеки. Автор висвітлює
реальні виклики та рекомендації з використанням практичних прикладів.
Об'єкт дослідження – процес розробки веб-додатку, який базується на
мікросервісній архітектурі. Дослідження спрямоване на вивчення різних
аспектів цього процесу, включаючи архітектурні рішення, вибір технологій,
розробку окремих мікросервісів, їх інтеграцію, управління та моніторинг.
Предмет дослідження – методи, підходи та інструменти, які
використовуються під час розробки веб-додатків, заснованих на
мікросервісній архітектурі.
Наукова новизна одержаних результатів полягає у впровадженні
ефективних методів та рішень для розробки мікросервісних веб-додатків, що
покращує їх безпеку, продуктивність та надійність, а також допомагає
швидко адаптуватися до змінних умов.
Одержані у кваліфікаційній роботі результати мають практичне
значення, оскільки вони допоможуть розробникам та підприємствам
покращити процес розробки веб-додатків на основі мікросервісної
архітектури. Ці результати можуть бути використані для підвищення
ефективності, безпеки та надійності додатків, а також для швидкої адаптації
до змінних умов на ринку програмного забезпечення.
Кваліфікаційна робота складається з 3-х розділів, в яких подається
інформація про:
- У першому розділі розглянуто типи розробки користувацьких веб-
додатків, а саме Single Page Application (SPA) та Multi Page Application
(MPA). Також розглянуто популярні фреймворки, які використовуються для
розробки SPA та MPA. На основі отриманої інформації було визначено
напрямок роботи, який містить вивчення концепції мікрофронтенд.
7
- У другому розділі проведено детальний огляд різноманітних
технологій, фреймворків та інструментів, які використовуються для розробки
веб-додатків на основі мікросервісної архітектури. Було розглянуто ключові
аспекти, такі як мікросервісні архітектури, фреймворки розробки,
інструменти контейнеризації, безпеки та моніторингу, а також патерни
розробки, що сприяють розумінню різноманітних можливостей у цій області.
Було зроблено вибір технологій для подальшої роботи над розробкою веб-
додатку з використанням мікросервісного підходу. Враховуючи вимоги
проекту, були обрані конкретні інструменти та підходи, які найкращим
чином відповідають поставленим завданням.
- У третьому розділі подано структуру розробленої програмної
системи, її архітектурні рішення та основні компоненти, що входять в склад
мікросервісного додатку. Також розглянуто функції та можливості системи,
які надають користувачам та дозволяють досягти їхніх цілей та завдань.
Приділено увагу аспектам безпеки в мікросервісному підході. Розглянуто
заходи забезпечення захисту інформації та безпеки даних при роботі з
системою. Представлено технічні вимоги та рекомендації для користувачів,
які планують використовувати цю систему.
Використана література в ході написання кваліфікаційної роботи
досить добре розкриває тему та відображає потреби для аналізу.
8
РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА
ЗАДАЧІ ДОСЛІДЖЕННЯ
1.1 Аналіз предметної області
Типи розробки користувацьких додатків. Хмарні веб-додатки
набувають великої популярності в сучасному інформаційному середовищі.
Велика кількість ІТ-компаній усвідомлюють цю тенденцію та з кожним днем
все більше створюють програмні продукти, базовані на можливості
віддаленого доступу. На сьогодні існують численні аналоги настільних
додатків, які пропонують онлайн-версії з можливістю щомісячної оплати.
Ці хмарні рішення надають користувачам більше гнучкості та
мобільності. Наприклад, користувач може легко вносити дані до хмарних
систем управління взаємовідносинами з клієнтами або систем планування
ресурсів підприємства зі свого мобільного телефону, що робиться у будь-
якому комфортному для нього місці. За даними статистичного порталу
Statista, ринок хмарних рішень надзвичайно активно зростає, і до 2026 року
очікується досягнення його розміру практично в 522 мільярди доларів.
Для забезпечення стабільної функціональності складних веб-додатків
надзвичайно важливим є використання технологій, які забезпечують
оптимальну продуктивність та швидкість роботи. Процес розробки веб-
додатків розглядає два загальні підходи: односторінкові додатки (Single Page
Application, SPA) та багатосторінкові додатки (Multi-Page Application, MPA).
Односторінкові додатки (SPA) надають можливість емулювати
роботу десктоп-додатків у вебсередовищі. Їх архітектура розроблена таким
чином, що при переході на нову сторінку оновлюється лише частина вмісту, і
не потрібно повторно завантажувати однакові елементи. Цей підхід є
надзвичайно зручним як для розробників, так і для користувачів. Для
розробки SPA найчастіше використовується одна з найпопулярніших мов
9
програмування - JavaScript [1]. Невеликий веб-додаток може бути
реалізований, наприклад, з використанням бібліотеки jQuery, принцип
роботи SPA зображений на рисунку 1.1.
Рисунок 1.1 - Принцип роботи SPA
Незалежно від обраної структури майбутнього веб-додатку, важливо
приділити увагу дизайну та інтерфейсу користувача.
Проте слід відзначити, що jQuery є недоцільно використовувати для
розробки великих проектів. У рамках даних розглядів, компанія Merehead
рекомендує використовувати потужніші технології для розробки
односторінкових додатків (SPA). У цьому контексті ідеально підходять такі
фронтендові фреймворки та бібліотеки, як React.js, Angular.js, Vue.js та інші.
Архітектура цих інструментів надає можливість створення гнучких веб-
додатків. Крім того, на базі зазначених фреймворків можна розробляти
мобільні додатки з можливістю подальшого використання коду. До таких
можливостей відносяться React Native та Ionic.
Основні переваги односторінкових додатків включають:
1. Ефективність. Оскільки односторінковий додаток (SPA) не оновлює
увесь вміст сторінки, а лише необхідну частину, це істотно підвищує
швидкість роботи.
2. Швидкість розробки. Готові бібліотеки та фреймворки надають
потужні інструменти для розробки веб-додатків. Back-end та front-end
10
розробники можуть одночасно працювати над проєктом, і завдяки
чіткому розділенню їх робіт, вони не заважатимуть один одному.
3. Мобільні додатки. SPA спрощує розробку мобільних додатків на основі
готового коду.
Попри усі переваги, які властиві односторінковим веб-додаткам (Single
Page Application, SPA), слід відзначити кілька недоліків, які гальмують їхню
популярність:
1. Недоцільна оптимізація для пошукових систем (SEO). SPA функціонує
на основі JavaScript і завантажує інформацію на запит зі сторони
клієнта. Пошукові системи мають обмежену здатність імітувати таку
роботу. Більшість сторінок SPA важко піддаються скануванню
пошуковими ботами.
2. Неактивний JavaScript. Деякі користувачі вимикають JavaScript у своїх
веб-переглядачах, і без його використання додаток може не працювати.
3. Низький рівень безпеки. JavaScript має високий рівень потенційних
безпекових загроз. Проте, за використання сучасних фреймворків може
забезпечити високий рівень безпеки для веб-додатку. Варто зазначити,
що використання бібліотеки jQuery може значно знизити рівень
безпеки.
Односторінкові веб-додатки ідеально підходять для розробки
динамічних платформ з невеликим обсягом даних. Крім того, SPA є
відмінною основою для майбутнього створення мобільних додатків. Проте
основним обмеженням, яке гальмує стрімкий ріст популярності SPA,
залишається проблема неефективної SEO-оптимізації [2]. Для проектів, де
пошукова оптимізація має високий пріоритет, рекомендується
використовувати багатосторінкові веб-додатки (Multi-Page Application,
MPA).
Багатосторінкові веб-додатки (Multi Page Application, MPA)
характеризуються більш класичною архітектурою, в якій кожна сторінка
надсилає запит на сервер та повністю оновлює усю інформацію, навіть якщо
11
обсяг цих даних невеликий, архітектуру зображено на рисунку 1.2.
Рисунок 1.2 - Архітектура Multi Page Application
У наслідок цього споживається продуктивність для відображення
однакових елементів, що впливає на швидкість і продуктивність.
Багато розробників використовують JavaScript/jQuery з метою
підвищення швидкості та зменшення навантаження, що є добрим прикладом
для оновлення товарів без перезавантаження сторінки, використовуючи
фільтри в інтернет-магазині. Це набагато зручніше і, головне, швидше.
Основні переваги багатосторінкових веб-додатків (MPA) включають:
1. Ефективна оптимізація для пошукових систем. Архітектура MPA
дозволяє досить легко оптимізувати кожну сторінку під вимоги
пошукових систем.
2. Спрощений процес розробки. Зазвичай для створення
багатосторінкового додатка потрібний менший набір технологій.
3. Багато альтернативних рішень.
Застосовуючи багатосторінкові веб-додатки (MPA), можна знайти
відповідне стандартне рішення. Наприклад, використовувати Magento або
OpenCart для розробки веб-додатків для електронної комерції, або Dolphin
або Elgg для розробки соціальних мереж.
12
Недоліки багатосторінкових додатків (MPA):
1. Затрати більшого часу на розробку мобільних додатків, оскільки часто
потрібно розробляти back-end спочатку.
2. Ускладнене розділення front-end і back-end, оскільки вони часто
взаємодіють між собою, що ускладнює роботу розробників обох
частин.
3. Основною перевагою багатосторінкових додатків (MPA) є їхня добра
оптимізація для пошукових систем і наявність великої кількості
стандартних рішень.
Кожна архітектура має свої переваги та недоліки та ідеально підходить
для конкретного типу проекту [3]. Односторінкові додатки (SPA)
відзначаються високою швидкістю та можливістю розробити мобільний
додаток на основі готового коду. Проте вони мають обмежену SEO-
оптимізацію. Таким чином, дана архітектура ідеально підходить для
платформ SaaS, соціальних мереж, закритих спільнот, де SEO не є
першорядною важливістю.
Багатосторінкові додатки (MPA) підходять для створення великих
інтернет-магазинів, корпоративних веб-сайтів, каталогів, маркетплейсів
тощо. Грамотно оптимізована MPA має високу швидкість і продуктивність,
але не дає можливості легко розробити мобільний додаток. SPA і MPA з
правильною архітектурою добре підходять для створення масштабованих
веб-додатків.
Розглянемо більш детально деякі популярні фреймворки для розробки
односторінкових додатків (SPA).
Angular - це великий і потужний фреймворк для розробки веб-
додатків, включаючи односторінкові додатки (SPA). Він офіційно
розробляється компанією Google і має широкий набір інструментів та
функцій для розробки.
Angular використовує TypeScript та пропонує широкий набір
інструментів і бібліотек для розробки. Він містить все, що потрібно для
13
роботи з SPA, включаючи роутинг, керування станом та інші функції.
Архітектура Angular базується на паттерні "Модель-Вид-Контролер"
(MVC) та зображений на рисунку 1.3.
Рисунок 1.3 - Архітектура Angular
Він містить чіткі вказівки щодо того, як має бути структурована
програма, і пропонує двонаправлений потік даних, забезпечуючи реальний
DOM.
Ця архітектура дозволяє ефективно організувати код додатка та
розділити його на логічні компоненти [4]. Angular надає засоби для взаємодії
між цими компонентами та розвинутий інструментарій для створення
сучасних веб-додатків.
React - це бібліотека для розробки користувацьких інтерфейсів (UI)
веб-додатків. Вона розроблена компанією Facebook і стала однією з
найпопулярніших бібліотек для створення інтерактивних односторінкових
додатків (SPA).
React базується на концепції компонентів. Будується додаток
розбиваючи його на невеликі та перевикористовувані компоненти. Це
спрощує структуру коду і робить його більш підтримуваним. Архітектура
зображена на рисунку 1.4.
14
Рисунок 1.4 - Архітектура React
React використовує віртуальний DOM для оптимізації відображення
змін в реальному DOM. Це дозволяє React реагувати на зміни швидше,
оскільки він оновлює лише ті частини сторінки, які дійсно змінилися.
Він використовує JSX (розширену синтаксичну оболонку JavaScript),
яка дозволяє описувати інтерфейс користувача у вигляді компонентів і
виглядає схоже на HTML. Це полегшує розробку і зрозуміння коду.
Ідеально підходить для створення односторінкових додатків (SPA), які
працюють без перезавантаження сторінки та надають користувачам
більшість функціональних можливостей на одній сторінці. React має велику
15
та активну спільноту розробників, що означає наявність безлічі сторонніх
бібліотек, компонентів та рішень, які полегшують розробку додатків.
React можна використовувати для розробки різних типів додатків, від
невеликих сайтів до великих проектів. Він дозволяє побудувати ефективний
та відзначається високою швидкістю відображення інтерфейсу користувача.
Ember.js - це фреймворк для розробки веб-додатків з відкритим
вихідним кодом, який спрощує створення амбіційних інтерфейсів
користувача.
Ember.js використовує патерн MVC для організації коду додатка. Він
надає чітку структуру для моделей, видів та контролерів. Також спрямований
на розробку амбіційних односторінкових додатків (SPA), які можуть
включати багато різних функцій та компонентів. Архітектура Ember.js
зображена на рисунку 1.5.
Рисунок 1.5 - Архітектура Ember.js
Ember використовує динамічні шаблони, які дозволяють розробникам
створювати інтерфейси користувача на основі даних. Вони оновлюються
автоматично при зміні даних. Надає інструменти для автоматичного
управління даними та зв'язками між ними. Це спрощує завдання, пов'язані з
отриманням та оновленням даних.
Також має вбудовану систему маршрутизації, що дозволяє легко
16
керувати URL та навігацією в додатку [5]. Ember дозволяє створювати та
використовувати власні компоненти, що спрощує перевикористання коду та
забезпечує модульність додатка.
Ember.js підходить для розробки серйозних та широких проектів,
особливо тих, які вимагають складних інтерфейсів та великої
функціональності. Він надає структуру та конвенції для розробки, що
допомагають підтримувати проекти на високому рівні.
Vue.js - це прогресивний фреймворк для розробки веб-додатків та
інтерфейсів користувача. Принцип роботи зображений на рисунку 1.6.
Рисунок 1.6 - Принцип роботи Vue.js
Vue.js відомий своєю легкістю вивчення та використання. Він має
простий синтаксис та документацію, що робить його доступним для
початківців розробників. Його можна включити в існуючий проект як
частину сторінки або використовувати його для створення цілком великих
односторінкових додатків.
Vue.js використовує декларативний підхід до роботи з інтерфейсом
користувача. Користувач описує, як повинні виглядати елементи на сторінці,
і Vue.js бере на себе створення необхідного коду. Надає можливість
17
створювати реактивні компоненти, які автоматично оновлюються при зміні
даних. Це дозволяє створювати живі та відзивчиві інтерфейси.
Сприяє розробці за компонентною структурою, де кожен компонент
відповідає за свою функціональність. Це спрощує перевикористання коду та
утримання додатка. Vue.js підтримує модульну розробку, де
функціональність можна розподілити на окремі модулі та компоненти [6].
Має активну екосистему плагінів, які дозволяють розширити його
функціональність та додати нові можливості. Vue.js підходить для розробки
різних типів веб-додатків, від малих проектів до серйозних односторінкових
додатків. Він надає інструменти для швидкої та ефективної розробки
інтерфейсу користувача та може бути використаний як початківцями, так і
досвідченими розробниками.
Розглянемо деякі популярні фреймворки для розробки MPA.
Next.js - це фреймворк для розробки веб-додатків, який спеціалізується
на створенні багатосторінкових додатків (MPA) та односторінкових додатків
(SPA) на основі React. Він відомий своєю гнучкістю та можливістю
використовувати як клієнтський рендеринг, так і серверний рендеринг.
Структуру та організацію проекту, розробленого з використанням
фреймворку Next.js. зображено рисунку 1.7.
Рисунок 1.7 - Структура та організація проекту з використанням Next.js
18
Next.js надає можливість рендерити сторінки на стороні сервера, що
покращує SEO та швидкість завантаження сторінок. Можна використовувати
клієнтський рендеринг, коли це необхідно, для інтерактивних елементів.
Next.js має вбудований маршрутизатор, що полегшує створення різних
сторінок та маршрутів. Підтримує статичну генерацію, що дозволяє
генерувати статичні сторінки на основі даних та API.
Він має велику та активну спільноту розробників та регулярно
оновлюється. Next.js дозволяє використовувати різні плагіни та розширення
для розширення функціональності.
Next.js є дуже потужним фреймворком для розробки веб-додатків та
сайтів. Він підходить для різних видів проектів, від невеликих сайтів до
великих корпоративних додатків.
Gatsby - це фреймворк для розробки веб-сайтів, який спеціалізується
на статичній генерації сайтів.
Основна особливість Gatsby - це можливість статично генерувати
сторінки сайту на підставі даних та джерел, таких як файли Markdown, бази
даних або зовнішні API. Це дозволяє створювати статичні сайти, які
завантажуються швидко та мають високий рівень продуктивності.
Gatsby використовує бібліотеку React для побудови інтерфейсу сайту,
що робить його потужним та розширюваним. Має велику кількість плагінів,
які дозволяють додавати різні функціональності та джерела даних до сайту.
Можна легко інтегрувати плагіни для SEO, аналітики, форм, зображень тощо.
Gatsby сприяє модульній розробці, де можна створювати та
використовувати компоненти для побудови сторінок та шаблонів. Сайти,
побудовані з використанням Gatsby, відомі своєю швидкістю завантаження
та продуктивністю, що робить їх ідеальними для розробки
високопродуктивних проектів. Також легко розгортати сайти на різних
хостинг-платформах, включаючи Netlify, Vercel, GitHub Pages тощо [7].
19
Gatsby надає можливість легко оптимізувати сайт для пошукових систем, що
поліпшує його видимість та доступність в пошукових результатах.
Gatsby підходить для розробки різних видів сайтів, від блогів та
особистих сторінок до корпоративних веб-сайтів та магазинів. Цей
фреймворк сприяє створенню швидких, ефективних та легко розширюваних
сайтів.
1.2 Вибір напряму дослідження
Мікрофронтенди. Термін "мікрофронтенди" зустрічається досить
часто в контексті розробки веб-додатків.
У контексті сучасного розробництва веб-сайтів, термін "додатки" часто
вживається як синонім "сайти". У загальній архітектурі будь-якого веб-
додатка можна виділити три основні складові:
1. Багато бібліотек і, як наслідок, значна кількість залежностей.
2. Загальне сховище (store), яке дозволяє обмінюватися даними між
компонентами, сторінками тощо, а також зберігати інформацію з бази даних.
3. Різноманітні компоненти, які потрібно об'єднати для створення
функціонального додатку.
Мікрофронтенди - це архітектурний підхід у розробці веб-додатків,
який передбачає розбиття веб-додатка на невеликі незалежні модулі або
"фронтенди", які можуть бути розроблені, розгорнуті та відлагоджені
незалежно один від одного. Кожен мікрофронтенд являє собою окремий
функціональний блок, який відповідає за конкретну частину
функціональності додатка. Цей підхід спрощує розробку та підтримку
великих та складних веб-додатків, оскільки він дозволяє розділити весь
додаток на менші компоненти, які можна розробляти паралельно.
Кожен мікрофронтенд може бути розроблений різними командами або
навіть різними технологіями. Це дозволяє використовувати найкращі
практики та інструменти для конкретної функціональності.
Можуть бути масштабовані незалежно один від одного. Якщо певна
20
частина додатка потребує більше ресурсів, її можна масштабувати окремо від
інших частин. Можуть використовувати спільні ресурси, такі як стилі,
бібліотеки або даний, що дозволяє уникнути дублювання і зменшує обсяг
завдань.
Помилки в одному мікрофронтенді не впливають на решту додатка. Це
допомагає підтримувати стабільність та надійність додатка. Також можуть
динамічно підключатися та відключатися від основного додатка, що дає
можливість оновлювати частини додатка без повного перезавантаження.
Мікрофронтенди можуть бути споживачами (користувачі) та виробниками
(постачальники) інших мікрофронтендів. Хоча вони дозволяють покращити
масштабованість та підтримку великих додатків, вони також вносять
складність у процес розробки та управління. Для їх успішної реалізації
потрібні добре визначені стандарти та керування версіями, а також
інструменти для інтеграції та моніторингу.
Зараз мікрофронтенди вважаються однією з передових архітектурних
концепцій у розробці веб-додатків, оскільки вони пропонують спосіб
ефективно розбити складний додаток на менші, керовані незалежно
компоненти.
Переваги мікрофронтендів полягають в тому, що дозволяють розділити
великі додатки на менші, керовані окремо частини. Це полегшує розробку,
тестування та підтримку. Також кожен мікрофронтенд може бути
розроблений окремою командою з використанням різних технологій та мов
програмування. Або можуть бути масштабовані незалежно один від одного,
що дозволяє витратити ресурси лише там, де вони необхідні. Також
дозволяють змінювати та оновлювати окремі мікрофронтенди, не торкаючись
інших частин додатка.
Мікрофронтенди можуть бути споживачами та виробниками для інших
мікрофронтендів, що дозволяє побудувати динамічний стек додатків.
Мікрофронтенди - це потужний інструмент для покращення розробки
та масштабування веб-додатків. Однак їх впровадження потребує гарного
21
планування, визначення стандартів та засобів управління для досягнення
успіху.
Інструменти для розробки мікрофронтендов. У сфері серверного
програмування розбиття традиційних монолітних бекендів на мікросервіси
стало ключовим фактором у досягненні підвищеної ефективності та раніше
недосяжних можливостей щодо масштабування проектів. Проте, попри це,
більшість фронтенд-систем і досі залишаються монолітами. Це ускладнює
оптимізацію роботи над такими системами та заважає покращенню їх
масштабування.
Основна ідея мікрофронтендів полягає в розбитті монолітної
клієнтської частини веб-проекта на менші складові, керовані незалежно. За
цим підходом кожна команда, яка працює над проектом, відповідає за свій
власний сегмент роботи та повністю самостійно розвиває його. Кожна
команда працює зі своєю власною кодовою базою, випускає нові версії своєї
підсистеми та постійно вносить до неї невеликі інкрементальним шляхом
використання спеціальних методів маршрутизації.
Однією з найпопулярніших платформ є Bit, яка дозволяє збирати
фронтенди з незалежних компонентів. Вона сприяє розробці та керуванню
компонентами та, можливо, найкраще підготовлена до використання в
продакшн-розробці.
Bit відзначається своєю гнучкістю та інтеграцією, дозволяючи
розробникам створювати цілісний інтерфейс проекту з незалежних
компонентів, які розроблені різними командами та мають різні кодові бази.і
покращення. Інтеграція цих підсистем з іншими частинами додатка, над
якими працюють інші команди, здійснюється за допомогою API. За такою
схемою інтерфейсні частини проектів збираються з незалежних фрагментів,
які спільно працюють.
В розробці мікрофронтендів існує безліч підходів: від інтелектуальної
інтеграції компонентів під час збірки проекту до організації спільної роботи
різних частин додатка під час виконання коду шляхом використання
22
спеціальних методів маршрутизації [8].
Однією з найпопулярніших платформ є Bit, яка дозволяє збирати
фронтенди з незалежних компонентів. Вона сприяє розробці та керуванню
компонентами та, можливо, найкраще підготовлена до використання в
продакшн-розробці.
Порівняно з іншими Bit відзначається своєю гнучкістю та інтеграцією,
дозволяючи розробникам створювати цілісний інтерфейс проекту з
незалежних компонентів, які розроблені різними командами та мають різні
кодові бази.
Webpack 5 та Архітектура Module Federation. Архітектура JavaScript
під назвою "Module Federation" була запропонована Заком Джексоном, який
також став ініціатором створення плагіна для Webpack з метою втілення цієї
архітектури.
Основна ідея Module Federation полягає в тому, що декілька окремих
збірок мають формувати єдиний додаток. Ці окремі збірки не повинні мати
взаємозалежностей одна від одної, що дозволяє розробляти та розгортати їх в
індивідуальному порядку.
Застосування Module Federation дозволяє JavaScript-додатку динамічно,
під час виконання, імпортувати код з інших додатків. Кожен модуль створює
файл, який експортує його можливості і є точкою входу для коду, який може
бути завантажений іншими додатками. Це досягається за допомогою
налаштувань Webpack.
Цей підхід розв'язує проблему залежностей від коду та проблему
збільшення розміру бандлів, завдяки організації спільного використання
залежностей.
Архітектура Module Federation відкриває можливості для розробки
мікрофронтендів та сприяє подальшій оптимізації роботи додатків.
Single-spa. Реалізує концепцію життєвого циклу окремої сутності у
контексті кожного окремого додатка, який входить до складу проекту. Кожен
додаток може реагувати на події маршрутизації та повинен мати знання про
23
те, як його слід розгортати, монтувати в DOM та демонтувати від DOM.
Основна відмінність звичайних Односторінкових Веб-Додатків та того, що
отримується при використанні Single-spa, полягає в тому, що додатки Single-
spa повинні мати можливість співіснування з іншими додатками, які входять
до складу певного проекту. При цьому у цих додатків немає власних HTML-
сторінок.
Отже, якщо виникає потреба використовувати на одній сторінці різні
фреймворки або бібліотеки, які повинні інтегруватися один з одним під час
виконання коду проекту, варто обрати Single-spa.
Загрузчик модулів SystemJS. Загрузчик модулів SystemJS, хоч і не є
фреймворком для розробки мікрофронтендів, пропонує розв'язання проблеми
кросс-браузерного управління незалежними модулями. Це важливий аспект
для впровадження мікрофронтендних архітектур (які фактично
використовують цей підхід, як у випадку з single-spa).
SystemJS можна розглядати як оркестратор JS-модулів. Він дозволяє
використовувати різноманітні можливості модулів, такі як динамічні імпорти
та карти імпорту, не обмежуючись стандартними механізмами браузерів. І
все це виконується з рівнем продуктивності, що наближається до вбудованих
можливостей браузера. Поміж цікавих можливостей SystemJS можна
виділити наявність поліфілів для застарілих браузерів, імпорт модулів за
допомогою імен (за допомогою відповідності імен модулів і шляхів до них),
завантаження кількох модулів за один запит (використовуючи API для
представлення кількох модулів як єдиного файлу).
Поза тим, SystemJS дозволяє працювати з "реєстром модулів", що
дозволяє розробнику знати, які саме модулі доступні у браузері у певний
момент часу [9].
Розробка мікрофронтендів — це підхід, що дозволяє поділити веб-
додаток на незалежні модулі. Для цього існують спеціальні фреймворки, такі
як single-spa, які спрощують розробку та оркестрацію цих модулів. Важливо
забезпечити їх ізоляцію та можливість використання на сторінках додатка.
24
Засоби інтеграції, такі як архітектура Module Federation, дозволяють
динамічно завантажувати код та обмінюватися даними між модулями. Для
розробки можна використовувати інструменти, такі як Piral, SystemJS,
Webpack 5. Розробка мікрофронтендів покращує масштабованість та
продуктивність проектів, зменшуючи залежності між модулями та
використовуючи можливості оптимізації завантаження коду.
Мікрофронтенд для великих команд. Мікрофронтенд дозволяє
розділення великих проектів на менші частини. Великі команди зазвичай
працюють над великими проектами, і розбивка їх на менші незалежні модулі
(мікрофронтенди) спрощує розробку та підтримку. Кожна команда може
відповідати за окремий мікрофронтенд, що полегшує розподіл завдань.
Різні команди можуть розробляти та впроваджувати свої
мікрофронтенди без значного впливу на інші частини проекту. Це полегшує
процес впровадження, оновлення та тестування. Якщо виникають проблеми
або помилки в одному мікрофронтенді, вони не повинні впливати на інші
частини проекту. Це допомагає уникнути ефекту, коли одна помилка
поширюється по всьому додатку. Різні команди можуть паралельно
працювати над різними мікрофронтендами, що прискорює виготовлення
продукту.
Великим командам часто доводиться використовувати різні технології
та стеки. Мікрофронтенди дозволяють використовувати різні технології для
різних частин проекту. Також можуть бути оновлені окремо, що дозволяє
великим командам впроваджувати оновлення без ризику для всього проекту.
Загалом, мікрофронтенди полегшують спільну розробку для великих
команд і дозволяють ефективно працювати над складними проектами. Вони
легко дають масштабувати проекти. Можна додавати нові мікрофронтенди
або видаляти існуючі, щоб відповідати змінюючим потребам додатка.
Оскільки різні команди відповідають за різні мікрофронтенди, це
сприяє зменшенню конфліктів та перевантаженню комунікації між ними.
Також можна швидко реагувати на зміни на ринку або в потребах
25
користувачів, оновлюючи лише ті мікрофронтенди, які стосуються цих змін.
Різні мікрофронтенди можуть використовувати різні інструменти та
технології відповідно до їхніх потреб, що дозволяє використовувати
найкращі практики для кожного конкретного випадку. Також це дає свободу
вибору найкращого підходу для кожного елемента додатку. Можна
використовувати SPA , MPA або навіть суміш обох.
Усі ці переваги роблять мікрофронтенди потужним інструментом для
розробки великих проектів і для забезпечення ефективної роботи великих
команд.
1.3 Постановка задачі
За останні десятиліття розвиток WEB-додатків значно посилився, і
користувачі стали більш вимогливими до швидкості та продуктивності WEB-
додатків. Однак традиційні методи розробки не завжди можуть задовольнити
ці вимоги. У цьому контексті виникає актуальність дослідження методів і
засобів розробки користувацьких WEB-додатків з використанням
мікросервісного підходу, які можуть покращити архітектурну гнучкість і
продуктивність додатків, де кожен сервіс - це окремий користувацький
додаток, який працює окремо і незалежно.
Головною метою кваліфікаційної роботи магістра є розробка
користувацького веб-додатку, використовуючи підходи мікрофронтендів, і
дослідження методів та засобів для його реалізації. Зокрема, потрібно
досягнути таких основних цілей як:
1. Розробка користувацького веб-додатку, який складається з двох або
більше незалежних користувацьких додатків, обʼєднаних за
допомогою технології мікрофронтентів.
2. Дослідження можливостей використання різних технологій та
інструментів для реалізації мікрофронтендів.
3. Оцінка продуктивності та масштабованості веб-додатку,
побудованого на основі мікрофронтендів.
26
Для досягнення поставленої мети, кваліфікаційна робота передбачає
вирішення наступних завдань:
1. Розробка архітектури користувацького веб-додатку з використанням
мікрофронтендів, включаючи розподілену структуру, способи
комунікації між мікрофронтендами та способи завантаження.
2. Вибір та налаштування інструментів для реалізації мікрофронтендів,
таких як бібліотеки для мікрофронтендів, інструменти збірки та
пакування.
3. Реалізація та тестування мікрофронтендів, включаючи їхню
функціональність та інтерфейс.
4. Оцінка продуктивності та масштабованості користувацького веб-
додатку з використанням мікрофронтендів.
Дослідження та розробка користувацького веб-додатку на основі
мікрофронтендів сприяє створенню більш модульної та розширюваної
архітектури, що покращує підтримку та розвиток додатка в майбутньому.
Знання інструментів та методів розробки на основі мікрофронтендів
дає можливість розробнику бути більш конкурентоспроможним на ринку
розробників веб-додатків.
На основі виконання цих завдань очікується отримати наступні
результати:
1. Розроблений користувацький веб-додаток з використанням
мікрофронтендів, який буде містити незалежні модулі та мати
модульну архітектуру.
2. Оцінка і порівняння інструментів та методів для розробки
мікрофронтендів у контексті розробки веб-додатків.
3. Аналіз продуктивності та масштабованості веб-додатку, побудованого
на основі мікрофронтендів.
4. Розробка практичних рекомендацій для використання мікрофронтендів
у реальних веб-проектах.
Це дослідження важливе для подальшого розвитку сучасних методів
27
веб-розробки та може призвести до поліпшення архітектури веб-додатків та
підвищення їхньої продуктивності. Результати цього дослідження можуть
бути корисними для розробників та компаній, які цікавляться використанням
мікрофронтендів у своїх проектах.
1.4 Висновки до розділу 1
Під час аналізу предметної області було детально розглянуто типи
розробки користувацьких веб-додатків, а саме Single Page Application (SPA)
та Multi Page Application (MPA). Також розглянуто популярні фреймворки,
які використовуються для розробки SPA та MPA.
На основі отриманої інформації було визначено напрямок роботи, який
містить вивчення концепції мікрофронтенд, інструментів для розробки
мікрофронтенда та переваг, які цей підхід може надати великим командам з
розробки веб-додатків.
Завдяки аналізу предметної області та вибору напряму дослідження
отримано чітке уявлення про те, які аспекти будуть враховані в роботі та які
завдання необхідно виконати для досягнення поставленої мети.
28
РОЗДІЛ 2 ВИБІР ТЕХНОЛОГІЇ ТА ІНСТРУМЕНТАЛЬНИХ ЗАСОБІВ
РОЗРОБКИ СИСТЕМИ
2.1 Огляд існуючих технологій
Огляд існуючих технологій з розробки користувацького веб-додатку з
використанням мікросервісного підходу дає можливість краще розібратися у
доступних інструментах та методах для досягнення цієї мети.
Більш детально розглянемо Single-SPA. Single-SPA (Single Page
Application) - це фреймворк для розробки веб-застосунків з використанням
архітектури мікрофронтендів. Ця архітектура дозволяє розбити великий веб-
застосунок на менші незалежні підзастосунки, які можна розробляти та
розгортати окремо. Single-SPA надає інфраструктуру та інструменти для
об'єднання цих підзастосунків на одній сторінці та управління взаємодією
між ними.
Кожен підзастосунок може бути розроблений з використанням різних
технологій, мов програмування та фреймворків, топ найпопулярніших SPA
фреймворків зображено на рисунку 2.1.
Рисунок 2.1 - Топ найпопулярніших SPA фреймворків
29
Вони можуть мати власний життєвий цикл, бібліотеки та залежності.
Single-SPA надає інфраструктуру для інтеграції підзастосунків на одній
сторінці. Можна об'єднувати підзастосунки так, щоб вони спільно
використовували сторінку, роутинг та стан. Дозволяє налаштовувати
спільний роутинг між підзастосунками [10]. Це означає, що можна
переходити між підзастосунками, не перезавантажуючи сторінку.
Оскільки підзастосунки завантажуються за потребою, Single-SPA
допомагає зменшити час завантаження сторінки та обсяг завантажуваних
ресурсів. Легко поєднується з архітектурою мікросервісів, оскільки кожен
підзастосунок може бути розроблений як незалежний мікросервіс.
Є можливість розгортати кожен підзастосунок окремо, що полегшує
процес розгортки та оновлення. Single-SPA надає можливість спільного
управління станом та спільно використовувати бібліотеки та ресурси між
підзастосунками, що дозволяє зменшити дублювання коду.
Single-SPA робить розробку та підтримку більш простою,
організованою та масштабованою. Дозволяє великим командам розробників
працювати над окремими частинами застосунку, зберігаючи гнучкість та
незалежність.
Single-SPA базується на принципі модульної архітектури, де кожен
підзастосунок являє собою окремий модуль. Ці модулі можуть бути написані
на різних мовах (наприклад, Angular, React, Vue.js) і використовувати різні
версії бібліотек [11]. Основною ідеєю є те, що кожен підзастосунок може
самостійно завантажувати та розгортатися на сторінці за потреби.Single-SPA
використовує завантаження за запитом, що дозволяє завантажувати
підзастосунки лише тоді, коли вони дійсно потрібні. Це сприяє зменшенню
часу завантаження та ефективному використанню ресурсів.
Single-SPA підтримує серверний рендеринг (Server-Side Rendering,
SSR), що дозволяє використовувати цей фреймворк для розробки
універсальних застосунків, які можуть працювати як на клієнтському, так і на
серверному боці.
30
Фреймворк надає зручні інструменти для налаштування роутингу між
підзастосунками. Це означає, що можна визначити, який підзастосунок
відповідає за обробку певних URL-шляхів та дозволяє спільно
використовувати стан та взаємодіяти за допомогою подій. Це спрощує
спільну роботу та обмін даними між ними. Є багато плагінів, які полегшують
розробку та підтримку. Це включає плагіни для інтеграції з різними
фреймворками, інструменти для налагодження, аналізу та тестування.
Single-SPA - це потужний інструмент для розробки мікрофронтендів,
який допомагає розв'язувати багато проблем, пов'язаних з розробкою великих
веб-застосунків, і полегшує впровадження модульної архітектури у проекті.
Існує безліч прикладів SPA додатків, які виконують широкий спектр
завдань, які можна порівняти з традиційними багатосторінковими додатками.
Деякі з найпоширеніших прикладів включають в себе Gmail, Grammarly і
Google Maps. Наприклад, за допомогою Gmail можна легко переглядати,
видаляти, створювати та надсилати електронні листи, а за допомогою Google
Maps можна шукати нові місця на карті. Усі ці дії можна виконувати без
перезавантаження сторінки, що забезпечує набагато якісніший
користувацький досвід.
Piral Framework - це інструмент для створення порталів та
розширення фронтенд-застосунків за допомогою підходу мікрофронтендів.
Він дозволяє розробникам створювати модульні фронтенд-застосунки, які
можна розширювати та поєднувати у реальному часі, використовуючи
незалежні модулі, відомі як "пілети" (pilets) [12].
Це невеликі незалежні модулі, які містять код, ресурси та
функціональність, яку можна додавати до основного фронтенд-застосунку.
Пілети можна розробляти незалежно та використовувати їх для розширення
функціональності основного застосунку. На рисунку 2.2 зображено
налаштування та процес розробки за допомогою Piral.
31
Рисунок 2.2 - Налаштування та процес розробки за допомогою Piral
Рисунок ілюструє налаштування, де передумови доволі мінімальні, і як
розробнику потрібно лише улюблений редактор, термінал, Інтернет-браузер і
встановлений Node.js. Екземпляр Piral (оболонка програми) і пілети (модулі
функцій) можна виконувати та налагоджувати в емуляторі на локальній
машині розробки.
Piral - це оболонка або "основа" фронтенд-застосунка, яка вміє
завантажувати, підключати та розширювати пілети. Пірал надає загальний
контекст для пілетів та забезпечує їх зв'язок і взаємодію.
Основний фронтенд-застосунок може динамічно завантажувати,
видаляти та активувати пілети в реальному часі без перезавантаження
сторінки. Це робить Piral ідеальним інструментом для створення
розширюваних та модульних застосунків. Розробники можуть створювати
пілети незалежно один від одного, що дозволяє розробляти окремі
функціональність та компоненти. Це полегшує роботу великим командам, де
різні групи можуть відповідати за різні пілети.
Piral Framework дозволяє розширювати функціональність фронтенд-
застосунку за допомогою пілетів, що полегшує додавання нових функцій та
модулів у вже існуючий застосунок.
32
Завдяки Piral Framework можна створювати складні фронтенд-
застосунки, які можна легко розширювати та модифікувати, незалежно від їх
розміру та складності. Цей інструмент допомагає розв'язувати проблеми
великих команд з розробки та сприяє створенню більш модульних та
розширюваних фронтенд-застосунків.
Luigi Framework - це інструмент для створення корпоративних веб-
додатків на основі мікрофронтендів. Він розроблений компанією Taulia та
розповсюджується як відкрите програмне забезпечення з ліцензією MIT.
Luigi надає можливість побудувати різнорідний веб-додаток, який може
містити незалежні частини (мікрофронтенди), створені на різних технологіях
та мовах програмування [13]. Основною метою Luigi є спрощення розробки
корпоративних веб-додатків і полегшення їх інтеграції з існуючими
системами.
У мікросервісній архітектурі додатка основна ідея полягає в тому, що
весь додаток розбивається на невеликі функціональні модулі, які можуть
бути розвивані незалежно. Luigi дозволяє розробляти незалежні
мікрофронтенди, які включають в себе окремі компоненти та можуть бути
розгорнуті на окремих серверах. Це полегшує відділений розвиток окремих
частин додатка та дозволяє їхню незалежне розгортання.
Може інтегруватися з різними системами та існуючими
корпоративними додатками. Надає можливість легко вбудовувати
мікрофронтенди у вже існуючий користувацький інтерфейс без необхідності
змінювати весь додаток.
Luigi забезпечує зручну систему маршрутизації та навігації між
різними мікрофронтендами. Він дозволяє створювати складні інтерфейси та
об'єднувати їх в єдиний зручний додаток.
Також забезпечує вбудовану підтримку автентифікації та безпеки, що
дозволяє захищати доступ до мікрофронтендів та забезпечувати
конфіденційність даних.
33
Luigi Framework створений для розв'язання проблем розробки великих
корпоративних веб-додатків і надає зручні засоби для створення та інтеграції
мікрофронтендів. Цей інструмент полегшує розробку, підтримку та
розгортання складних корпоративних застосунків і є важливим інструментом
для багатьох підприємств.
OpenComponents спрямований на впровадження безсерверних
технологій у світ фронтенду. З точки зору розробника, цей проект
розроблявся як фреймворк для створення мікрофронтендів, який надає
повний інструментарій для створення екосистеми, включаючи засоби роботи
з компонентами, реєстр компонентів, шаблони та навіть інструмент
командного рядка. Проект Open Components складається з двох основних
частин:
1. Компоненти (components) - це малі фрагменти ізоморфного вмісту,
які складаються в основному з коду, написаного на HTML, JavaScript та CSS.
Вони можуть також містити логіку, що дозволяє серверному застосунку
Node.js створювати моделі, які використовуються для рендерингу візуальних
представлень компонентів. Після рендерингу ці сутності перетворюються на
звичайний HTML-код, який можна вбудовувати в будь-яку веб-сторінку.
2. Споживачі (consumers) - це веб-сайти або мікросайти, які потребують
компоненти для рендерингу певних частин веб-сторінок. Вони можуть бути
підключені за допомогою механізму маршрутизації або спільного сервісу,
який служить точкою входу в систему, і використовується для спільного
рендерингу контенту.
Mosaic Framework. Активний науковий проект від UW Interactive Data
Lab у співпраці з CMU Data Interaction Group. Це система, яка дозволяє
ефективно управляти та створювати мікрофронтенди, що складаються з
невеликих і незалежних компонентів [14].
34
Він спрощує процес взаємодії та інтеграції різноманітних фронтенд-
застосунків, надаючи зручні інструменти для швидкої розробки та
впровадження. Архітектура Mosaic зображено на рисунку 2.3.
Рисунок 2.3 - Архітектура Mosaic Framework
Mosaic фреймворк спрямований на забезпечення гнучкості та
масштабованості при створенні веб-додатків, а також на забезпечення
оптимальної продуктивності та ефективного керування залежностями між
компонентами. Він надає розробникам можливість легко збирати, керувати
та розгортати мікрофронтенди, спрощуючи процес розробки складних веб-
проектів.
2.2 Вибір технологій
Користувацький додаток - це програмне забезпечення, призначене для
використання та обробки користувачем на пристрої, такому як комп'ютер,
смартфон, планшет, або інші електронні пристрої. Користувацькі додатки
призначені для вирішення різноманітних завдань та функцій, і вони можуть
бути розроблені для різних платформ та операційних систем.
Користувацькі додатки можуть бути загального призначення, або ж
спеціалізованими для конкретних завдань чи галузей. Вони встановлюються
на пристрої користувача і надають можливість використовувати різні функції
35
та сервіси на цих пристроях, роблять їх більш функціональними та
користувацько орієнтованими.
WEB додаток - це програмне забезпечення, яке використовується через
веб-браузер на комп'ютері або іншому електронному пристрої, що має доступ
до Інтернету. Веб-додатки використовують технології веб-розробки для
надання різних функцій та послуг користувачам через інтерфейс веб-
сторінки.
Основні характеристики WEB-додатків включають:
1. Доступність через браузер;
2. Не потребує встановлення;
3. Можливість оновлення;
4. Платформонезалежність;
5. Зв'язок з сервером;
6. Різноманітність функцій.
Користувач може отримати доступ до веб-додатку, відкривши веб-
браузер на своєму пристрої і перейшовши за відповідним посиланням (URL).
WEB-додатки не вимагають встановлення на пристрої користувача. Всі
необхідні файли та ресурси зазвичай знаходяться на віддаленому веб-сервері.
Оновлення та вдосконалення веб-додатків можуть виконуватися
централізовано на веб-сервері, тому користувачі завжди працюють з
останньою версією програми.
WEB-додатки можуть працювати на різних операційних системах та
пристроях, оскільки їх запуск відбувається через браузер. Також даний тип
додатків взаємодіє з WEB-сервером для отримання та передачі даних, що
дозволяє їм виконувати різні завдання та зберігати інформацію.
Користувацькі додатки, побудовані на базі WEB технологій можуть
виконувати різні функції, включаючи обробку даних, комунікацію,
відображення мультимедійного контенту, спілкування та інше.
36
Прикладами веб-додатків є соціальні мережі, електронна пошта,
онлайн-магазини, онлайн-офіси, банківські системи, онлайн-ігри та багато
інших інтерактивних веб-сервісів та ресурсів.
Для розробки такого типу додатків існує багато технологій, мов
програмування та інструментів. Вибір конкретних технологій зазвичай
залежить від потреб та завдань проекту.
HTML (Hypertext Markup Language) - це стандартна мова розмітки, яка
використовується для створення структури та вигляду веб-сторінок. HTML є
однією з основних мов для розробки веб-додатків та веб-сайтів і
використовується для визначення структури документа та включення різних
типів вмісту, таких як текст, зображення, посилання, таблиці, форми, відео та
багато інших елементів [15].
HTML використовується для описування того, як вміст сторінки
повинен бути відображений у веб-браузері. Ця мова використовує теги
(розміткові елементи), які визначають різні частини сторінки та їхні
властивості. HTML-документ складається зі звичайного тексту та різних
HTML-тегів, які вказують на те, як браузер повинен відображати сторінку.
CSS (Cascading Style Sheets) - це мова стилізації, яка використовується
для визначення вигляду та оформлення веб-сторінок, які написані за
допомогою HTML або інших мов розмітки. CSS дозволяє розробникам
встановлювати кольори, шрифти, розміщення, розміри, відступи та інші
стилізаційні властивості для різних елементів веб-сторінки, щоб надати їм
бажаний вигляд.
CSS відокремлює вміст сторінки (визначений за допомогою HTML) від
його представлення. Це дозволяє змінювати вигляд сторінки без зміни її
вмісту.
Каскадність в CSS означає, що стилі можуть бути визначені на різних
рівнях (наприклад, локально, на рівні елементу, в різних файлах CSS), і вони
будуть об'єднуватися, дотримуючись певного пріоритету.
37
CSS використовує селектори для вибору елементів сторінки, які
потребують стилізації. Наприклад, ви можете використовувати селектор h1,
щоб визначити стилі для всіх заголовків першого рівня на сторінці. Дана
мова стилізації також надає широкий набір властивостей, які дозволяють
налаштовувати різні аспекти вигляду елементів, включаючи колір, шрифт,
розміщення, фон, границі та інші [16].
CSS використовується разом з HTML та JavaScript для створення
динамічних та привабливих веб-додатків та веб-сайтів.
JavaScript - це високорівнева мова програмування, яка
використовується для розробки динамічних та інтерактивних веб-додатків.
JavaScript є однією з основних мов для фронтенд-розробки веб-сайтів і веб-
додатків, і вона використовується для створення клієнтської логіки, яка
запускається в браузері користувача.
JavaScript дозволяє створювати інтерактивні елементи на веб-сторінці,
такі як форми, кнопки, відкривають меню та інші елементи, які взаємодіють з
користувачем. Також дана мова програмування може змінювати структуру та
вміст веб-сторінок, використовуючи Document Object Model (DOM). Це
дозволяє змінювати, додавати чи видаляти елементи на сторінці.
JavaScript є стандартною мовою для розробки клієнтського додатку
разом з HTML і CSS. Вона підтримується всіма сучасними WEB-браузерами,
що робить її універсальним інструментом для створення веб-додатків. Крім
користувацької розробки, JavaScript також використовується для розробки
серверних додатків (за допомогою Node.js) та мобільних додатків (за
допомогою фреймворків, таких як React Native) [17].
Існує багато популярних фреймворков для розробки WEB-додатків, які
спрощують та прискорюють процес розробки.
React - це відкритий фреймворк для розробки фронтенду, розроблений
Facebook, який використовується для створення інтерактивних та
користувацьких інтерфейсів веб-додатків. Він є одним з найпопулярніших
38
фреймворків для розробки користувацьких інтерфейсів та знаменитий своєю
простотою використання та великою спільнотою розробників.
React базується на концепції компонентів. Даний фреймворк дає
можливість створювати невеликі, незалежні компоненти, які відповідають за
окремі частини інтерфейсу. Це полегшує розробку та підтримку великих
додатків.
Також, React використовує віртуальний DOM для оптимізації процесу
оновлення сторінки. Вміст сторінки оновлюється не в реальному DOM, а в
його віртуальному представленні, що робить операції оновлення більш
ефективними.
Даний фреймворк широко використовується в індустрії та знайомий як
рішення для розробки користувацьких інтерфейсів на таких веб-сайтах, як
Facebook, Instagram, Airbnb, Netflix та багатьох інших. Цей фреймворк надає
розробникам інструменти для ефективного створення веб-додатків та
додатків для мобільних платформ.
Vue.js - це прогресивний фреймворк для розробки веб-додатків та
користувацьких інтерфейсів. Він славиться своєю простотою та легкістю
вивчення, і водночас надає потужні інструменти для створення
інтерактивних та ефективних додатків.
Vue.js базується на концепції компонентів, так як і React. Кожен
компонент є окремим модулем, який містить власну логіку, шаблон та стилі.
Це полегшує розробку та підтримку великих додатків шляхом розділення їх
на маленькі частини.
Даний фреймворк надає можливості для реактивності даних. Це
означає, що зміни у даних автоматично відображаються в інтерфейсі, і немає
потреби вручну оновлювати сторінку.
Vue.js часто порівнюють з React та Angular, і він є чудовим вибором
для розробників, які шукають рішення для розробки користувацьких
інтерфейсів та додатків на основі компонентів.
39
Angular - це популярний фреймворк для розробки веб-додатків,
розроблений командою розробників від Google. Angular надає повноцінний
набір інструментів для створення великих та складних веб-додатків, які
включають в себе фронтенд, бекенд і базу даних.
Angular використовує TypeScript, який дозволяє встановлювати типи
для змінних, функцій та об'єктів, що допомагає виявити помилки на ранніх
етапах розробки [18]. Це підвищує надійність та полегшує рефакторинг коду.
Даний фреймворк також базується на компонентній архітектурі, де кожна
частина додатка представлена як окремий компонент. Це дозволяє
створювати перевикористовувані та легко підтримувані елементи інтерфейсу.
Даний інструмент є потужним фреймворком, особливо підходить для
великих та складних проектів, де підтримка типізації та стандартизація
грають важливу роль. Він широко використовується в корпоративному та
підприємницькому середовищі для створення надійних і швидких веб-
додатків.
Вибір інструментів розробки для розробки мікрофронтендів - важливий
крок у створенні ефективної архітектури. Мікрофронтенди дозволяють
розділити великий монолітний фронтенд на менші та незалежні частини, що
можуть бути розроблені та підтримані окремо.
Для реалізації цілей даної дипломної роботи можна використати
мікрофреймворки, такі як Single-SPA, Piral, або qiankun, які допомагають
організувати та інтегрувати окремі клієнтські додатки в один веб-додаток.
Вони надають можливість зберігати структуру та координувати роботу
мікрофронтендів.
Вибір Single-SPA може бути обгрунтований рядом переваг, які ця
бібліотека пропонує для розробки мікрофронтендів і створення комплексних
веб-додатків.
Single-SPA не прив'язаний до конкретного фреймворка або бібліотеки.
Він підтримує інтеграцію мікрофронтендів, розроблених на різних
технологіях, таких як React, Angular, Vue.js, або навіть просто нативний
40
JavaScript. Це дає велику гнучкість у виборі технологій для окремих
мікрофронтендів.
Загалом, Single-SPA допомагає створювати масштабовані та гнучкі
мікрофронтенди, що можуть бути інтегровані в один великий веб-додаток.
Якщо потрібна гнучкість до технологій, Single-SPA може бути відмінним
вибором для проєкту [19].
Обираючи інструменти комунікації між мікрофронтендами, у
розробника створює основу для успішної інтеграції та співпраці між
окремими частинами додатка. Важливість правильного вибору інструментів
комунікації між мікрофронтендами може бути пояснена наступними
причинами:
1. Розділеність та незалежність.
2. Спільне використання даних.
3. Підтримка різних технологій та мов програмування.
4. Швидкодія та масштабованість.
5. Підтримка асинхронності.
6. Легкість налагодження та тестування.
7. Безпека та захист даних.
Основна мета використання мікрофронтендів є розділеність і
незалежність компонентів. Вибір правильних інструментів допомагає
зберегти цю незалежність, дозволяючи окремим мікрофронтендам працювати
без залежності від інших.
Мікрофронтенди можуть потребувати обміну даними та станом між
собою. Правильні інструменти комунікації дозволяють це робити без
конфліктів та простіше забезпечувати синхронізацію між компонентами.
Даний метод розробки WEB додатків дає можливість розроблювати
додатки з використанням різних технологій та мов програмування.
Інструменти комунікації повинні дозволяти спільно взаємодіяти між
частинами, незалежно від технологій, використаних у кожному
мікрофронтенді.
41
Ефективні інструменти комунікації допомагають забезпечити
швидкодію веб-додатку та його масштабованість. Вони дозволяють
зменшити накладні витрати на мережевий обмін даними та забезпечують
ефективну комунікацію.
Деякі мікрофронтенди можуть бути асинхронними та працювати з
віддаленими ресурсами. Інструменти комунікації повинні бути здатні робити
асинхронні запити та обробляти асинхронні події.
Вибір правильних інструментів для комунікації між мікрофронтендами
допомагає створити високопродуктивні, масштабовані та легко підтримувані
мікрофронтенди, що можуть працювати разом в гармонії.
Для того, щоб розроблені додатки могли комунікувати з сервером, в
рамках дипломної роботи потрібно зробити простий і зручний спосіб
комунікації з сервером.
GraphQL - це мова запитів та оптимізована система для отримання
даних з сервера. Вона була розроблена компанією Facebook і публічно
представлена в 2015 році. GraphQL надає клієнтам можливість запитувати
лише ті дані, які їм потрібні, і отримувати відповіді в структурованому
форматі.
Запити в GraphQL визначаються клієнтом, а не сервером. Це означає,
що клієнт може запитати лише ті дані, які йому потрібні, без зайвих запитів
або надлишкових даних. Клієнт може включати кілька запитів до різних
ресурсів у одному запиті GraphQL. Це дозволяє зменшити кількість запитів
до сервера та покращити продуктивність.
GraphQL надає лише ті дані, які були запитані, що може зменшити
обсяг трафіку та прискорити завантаження сторінок. Відповідь на запит
GraphQL повертається у форматі JSON і має ту саму структуру, яка була
запитана. Це полегшує розбір та обробку даних.
JSON (JavaScript Object Notation) - це легкий текстовий формат обміну
даними, що використовується для представлення структурованих даних в
зчитуваному інтерпретатором вигляді. JSON був вперше визначений
42
Дугласом Крокфордом і отримав популярність як альтернатива форматам,
таким як XML, для передачі даних через мережу та зберігання конфігурацій.
GraphQL може бути використаний для розробки серверів та клієнтів на
різних мовах програмування. Існують бібліотеки та інструменти для багатьох
популярних мов програмування [20]. GraphQL став дедалі популярнішим у
сучасному розвитку веб-додатків і API. Він допомагає розв'язувати проблеми
зв'язаних з великими та складними API, надаючи клієнтам більшу гнучкість
та ефективність в отриманні даних з сервера.
Використання TypeScript для розробки мікрофронтендів має декілька
значущих переваг і сприяє покращенню якості та стабільності проекту:
1. Статична типізація;
2. Підтримка сучасних JavaScript-фреймворків;
3. Модульність;
4. Покращена IDE підтримка.
TypeScript надає можливість визначати типи даних для змінних,
функцій та об'єктів, що допомагає виявляти і виправляти помилки на етапі
розробки. Це особливо корисно у великих проектах, де розділення
мікрофронтендів може призвести до багато шляхів взаємодії між
компонентами.
Також, TypeScript підтримує багато популярних JavaScript-фреймворків
і бібліотек, таких як React, Angular, Vue.js та інші. Це означає, що у
розробника є можливість розробляти мікрофронтенди, використовуючи
фреймворк за вибором, і отримувати переваги статичної типізації.
Дана мова типізації підтримує модульність, що робить його ідеальним
для розділення коду між мікрофронтендами. У розробника є можливість
створювати окремі модулі та типи для кожного мікрофронтенду, що спрощує
підтримку та розширення проекту.
Більшість популярних інтегрованих середовищ розробки (IDE), такі як
Visual Studio Code, підтримують TypeScript та надають розширену підказку
43
під час роботи з кодом, що робить розробку більш комфортною та
продуктивною.
Загалом, використання TypeScript для розробки мікрофронтендів
допомагає підвищити рівень надійності та стабільності проекту, полегшує
співпрацю розробників та дозволяє зберігати контроль над кодом у великих
проектах.
Вибір технологій для CI/CD (Continuous Integration/Continuous
Deployment) для мікрофронтендів важливий, оскільки він допомагає
автоматизувати процеси розробки, тестування та розгортання
мікрофронтендів.
У розробника є можливість використовувати інструменти, такі як
Webpack або Rollup, для збирання та пакування мікрофронтенд коду. Вони
допоможуть створити оптимізовані пакунки для розгортання.
Важливо мати інтеграцію з тестовими фреймворками, такими як Jest,
Mocha або Cypress, для автоматизованого тестування мікрофронтенд
додатку. CI/CD повинен запускати тести під час кожного змісту коду.
Існують спеціалізовані CI/CD платформи, такі як Jenkins, Travis CI,
CircleCI, GitLab CI/CD, GitHub Actions та інші, які допомагають
автоматизувати процеси збирання, тестування та розгортання.
GitHub Actions - це вбудована система автоматизованої CI/CD, яка
надається платформою GitHub. Вона дозволяє автоматизувати різні завдання
та процеси, пов'язані з розробкою та розгортанням коду, включаючи
збирання, тестування, створення пакунків, розгортання на сервери та багато
інших операцій.
GitHub Actions є потужним і дуже зручним інструментом для
автоматизації CI/CD процесів для проектів, включаючи мікрофронтенди. Він
дозволяє значно спростити та прискорити розробку та розгортання,
підвищити якість коду та впевнитися в його стабільності.
Обрані технології для розробки мікрофронтендів, такі як Angular і
React для користувацьких інтерфейсів, Single-SPA для об'єднання
44
фреймворків, TypeScript для статичної типізації, GraphQL для взаємодії з
сервером та GitHub Actions для автоматизованого CI/CD, створюють
потужний інструментарій для ефективної розробки та розгортання
мікрофронтендів, забезпечуючи високу якість та розширюваність коду.
2.3 Висновки до розділу 2
У цьому розділі було проведено детальний огляд різноманітних
технологій, фреймворків та інструментів, які використовуються для розробки
веб-додатків на основі мікросервісної архітектури. Було розглянуто ключові
аспекти, такі як мікросервісні архітектури, фреймворки розробки,
інструменти контейнеризації, безпеки та моніторингу, а також патерни
розробки, що сприяють розумінню різноманітних можливостей у цій області.
На основі проведеного огляду було зроблено вибір технологій для
подальшої роботи над розробкою веб-додатку з використанням
мікросервісного підходу. Враховуючи вимоги проекту, були обрані конкретні
інструменти та підходи, які найкращим чином відповідають поставленим
завданням.
Вибір оптимальних технологій є ключовим кроком у забезпеченні
ефективної та надійної розробки веб-додатку з використанням
мікросервісного підходу.
45
РОЗДІЛ 3 ОПТИМІЗАЦІЯ МЕТОДІВ ТА ЗАСОБІВ РОЗРОБКИ
КОРИСТУВАЦЬКОГОWEB ДОДАТКУ З ВИКОРИСТАННЯМ
МІКРОСЕРВІСНОГО ПІДХОДУ
3.1 Структура системи
Сьогодні інтернет є одним із ключових каналів для залучення клієнтів
та розширення аудиторії для бізнесу. Завдяки зростанню використання
інтернету, компанії мають унікальну можливість взаємодіяти з клієнтами,
незалежно від їх місця розташування. Створення та підтримка власного веб-
сайту є обов'язковою складовою для багатьох бізнесів, оскільки це дозволяє
надавати інформацію клієнтам цілодобово та здійснювати продажі в онлайн-
режимі.
Веб-сайт не лише надає можливість представити інформацію про
компанію та її послуги, але також створює платформу для зв'язку з
клієнтами. Використання форм зв'язку, чат-ботів та інших інструментів на
сайті дозволяє клієнтам легко зв'язатися з компанією, запитати питання,
надіслати запити або залишити відгук. Це полегшує обслуговування клієнтів
і сприяє задоволенню їх потреб.
Власний веб-сайт дозволяє компанії ефективно просувати свій бренд та
зміцнювати впізнаваність серед клієнтів. Візуально привабливий та
інформаційний веб-сайт може позитивно позначитися на сприйнятті бренду
клієнтами.
Використання мікросервісного підходу при розробці веб-додатку
(Micro Frontends) може бути корисним для розробки веб-сайту компанії з
кількох причин:
- Модульність та розширюваність;
- Швидкість розробки;
- Можливість використання найкращих практик;
46
- Спрощена підтримка і оновлення;
- Підвищена масштабованість;
- Більш ефективне використання ресурсів.
Використання мікрофронтендів дозволяє розділити веб-сайт на
невеликі, незалежні модулі, які можуть бути розроблені та підтримувані
окремо. Це спрощує розробку, тестування та розгортання, а також дозволяє
внесення змін в одну частину сайту, не впливаючи на інші.
Кожен мікрофронтенд може бути розроблений окремою командою або
використовувати різні технології та мови програмування. Це дозволяє
прискорити розробку, оскільки команди можуть працювати паралельно над
різними частинами сайту.
Кожен мікрофронтенд може бути розроблений з використанням
найкращих практик та технологій, що відповідають конкретному завданню.
Це дозволяє використовувати найефективніші рішення для кожної частини
сайту.
Підтримка та оновлення мікрофронтендів може виконуватися окремо,
що спрощує процес підтримки і дозволяє швидко виправляти помилки або
додавати новий функціонал без впливу на інші частини сайту.
Мікрофронтенди дозволяють легко масштабувати сайт. При потребі
можна додавати нові мікрофронтенди або видаляти існуючі, не ламаючи весь
сайт. Також використання мікрофронтендів дає можливість завантажити
лише ті частини веб-сайту, які необхідні на певній сторінці, що дозволяє
зменшити завантаження та споживання ресурсів користувачами.
Загалом, використання мікрофронтендів сприяє швидкій розробці та
ефективному управлінню веб-сайтом завдяки можливості паралельної роботи
над окремими частинами сайту та розділенню проекту на менші, керовані
модулі.
Розроблений веб-сайт для компанії представляє собою важливий
інструмент, який включає дві ключові складові: головну сторінку (landing
page) та адміністративну панель. Додатково, на сайті функціонує backend
47
сервер, який відповідає за обробку запитів та збереження даних, і механізм
авторизації, що забезпечує безпеку та обмежує доступ до адміністративних
функцій. Структура розробленої системи зображено на рисунку 3.1.
Рисунок 3.1 - Структура розробленої системи
Головна сторінка є публічною частиною веб-сайту, яка доступна всім
відвідувачам. Вона містить загальну інформацію про компанію, її послуги,
продукти, контакти, та іншу важливу інформацію.
Даний додаток розроблено з урахуванням ефективного дизайну та
візуальної привабливості для зацікавлення відвідувачів та створення
позитивного першого враження.
48
Дизайн даного клієнтського додатку адаптується до різних типів
пристроїв (планшети, смартфони, настільні комп'ютери), що забезпечує
зручний досвід користувачів на будь-якому пристрої.
Для розробки додатку головної сторінки компанії було прийнято
стратегічне рішення використовувати платний дизайн, що значно сприяло
зниженню часу розробки та підвищенню якості результату. Використання
платного дизайну для розробки landing page дозволило значно скоротити час
розробки, забезпечити відмінну якість та професіоналізм дизайну, а також
зосередити увагу на інших важливих аспектах розробки та маркетингу веб-
сайту.
Використання React фреймворку для розробки головної сторінки сайту
компанії є раціональним рішенням для забезпечення швидкодії та
ефективності розробленого додатку.
React використовує віртуальний DOM, що дозволяє оптимізувати
перерендеринг та забезпечує високу швидкість роботи веб-сторінки. Це
особливо важливо для головної сторінки веб-сайту, оскільки він повинен
завантажуватися та відображати інформацію швидко.
Також, React сприяє створенню компонентів, які можна повторно
використовувати на сторінці або в інших частинах сайту. Це спрощує
розробку та підтримку коду.
Панель адміністратора дозволяє адміністраторам компанії змінювати,
оновлювати та додавати вміст на веб-сайті без необхідності залучення
розробників. Це включає в себе редагування текстів, додавання зображень,
відео та іншого контенту.
Також через даний додаток, адміністратори можуть проводити
актуалізацію сайту. Адміністратори можуть відразу внести зміни на сайті,
коли це потрібно, не чекаючи розробників. Це дозволяє зберігати сайт
актуальним та реагувати на зміни у бізнесі компанії або на ринку.
49
Панель адміністратора дозволяє встановити додаткові рівні безпеки.
Адміністратори можуть контролювати доступ до адміністративних функцій,
забезпечуючи безпеку даних та запобігаючи несанкціонованому доступу.
В цілому, панель адміністратора спрощує управління та підтримку веб-
сайту, дозволяє реагувати на зміни та забезпечує безпеку даних та контенту,
що робить її важливим компонентом для веб-сайту компанії.
Використання Angular для розробки додатку адміністратора має свої
основні переваги і обґрунтовується наступними факторами:
- Структурованість і модульність;
- Розширені інструменти;
- Контроль над проектом;
- Сувора типізація;
- Безпека та захист даних.
Angular сприяє структурованій розробці завдяки використанню
компонентів, модулів та сервісів. Ця модульність спрощує розробку
адміністративної панелі, робить код більш організованим і дозволяє легко
відокремити різні функціональні частини.
Також, Angular надає розробникам доступ до різноманітних
інструментів для розробки, включаючи Angular CLI для автоматизації
завдань та генерації коду, що значно прискорює процес.
TypeScript, який використовується в Angular, надає сувору типізацію.
Це сприяє попередженню помилок на етапі розробки та полегшує підтримку
додатку в майбутньому.
Angular надає інструменти для забезпечення безпеки додатків,
включаючи обробку аутентифікації, авторизації та захисту від хакерських
атак.
Об'єднання додатку головної сторінки, написаному на React
фреймворку та додатку панелі адміністратора, написаного на Angular в
одному додатку за допомогою мікрофронтендів і фреймворку Single Spa має
декілька вагомих переваг.
50
Використання мікрофронтендів дозволяє об'єднати спільну базу коду
для обох частин сайту (головної сторінки та панелі адміністратора),
зменшуючи дублювання коду і спрощуючи процес розробки та підтримки.
Фреймворк Single Spa дозволяє ефективно управляти локальними
залежностями (наприклад, версіями React, Angular, Vue, тощо) для різних
мікрофронтендів. Це означає, що кожна частина сайту може використовувати
свою технологію без конфліктів.
Комбінування обох частин сайту в одному додатку дозволяє робити
швидку навігацію між головною сторінкою і панеллю адміністратора без
повного перезавантаження сторінки. Це забезпечує зручний та швидкий
користувацький досвід.
Мікрофронтенди можуть завантажуватися асинхронно, що дозволяє
скоротити час завантаження сторінки, оскільки користувачі завжди
завантажують тільки те, що їм потрібно, замість всього сайту одразу.
Розділення на мікрофронтенди дозволяє проводити ізольовану
розробку та тестування кожної частини сайту. Це полегшує підтримку та
розвиток окремих компонентів. Фреймворк Single Spa сприяє
масштабованості проекту, оскільки дозволяє додавати нові мікрофронтенди
або змінювати існуючі без впливу на решту сайту.
Можливість керування правами доступу до різних частин сайту через
панель адміністратора стає більш дієвою, оскільки адміністратори можуть
управляти доступом до мікрофронтендів на рівні користувачів.
За допомогою мікрофронтендів та фреймворку Single Spa, розроблений
проект поєднує ефективність управління кодом та ресурсами, швидкість
навігації та зручність користувацького досвіду в одному додатку, що робить
це рішення ефективним для об'єднання головної сторінки, як окремого
додатку і панелі адміністратора на веб-сайті компанії.
Backend сервер для веб-сайту компанії є невід'ємною частиною, і він
виконує низку важливих функцій:
- Управління даними;
51
- Бізнес-логіка;
- Автентифікація та безпека;
- Інтеграція зі сторонніми сервісами;
- Оптимізація доставки даних;
- Масштабованість.
Backend сервер відповідає за зберігання та управління даними, які
використовуються на веб-сайті компанії. Це може включати в себе дані про
користувачів, продукти, послуги, замовлення, коментарі тощо.
Всі обчислення, обробка даних та логіка бізнес-процесів відбуваються
на backend стороні. Backend сервер реалізує логіку сайту, включаючи
обчислення цін, обробку замовлень, авторизацію та інші бізнес-процеси.
Backend сервер відповідає за автентифікацію та авторизацію
користувачів. Він забезпечує захист даних, включаючи паролі користувачів
та іншу конфіденційну інформацію.
Також, Backend сервер може оптимізувати доставку даних до
клієнтських додатків, зменшуючи обсяг передаваних даних, використовуючи
кешування, стискання даних та інші технік.
Розробка backend серверу дає можливість в майбутньому масштабувати
це рішення, що дозволяє розраховувати на зростання навантаження та
кількості користувачів без втрати продуктивності.
В цілому, backend сервер є мозковим центром будь-якого веб-сайту
компанії, він відповідає за обробку даних, забезпечення функціональності та
безпеки, і грає важливу роль у роботі веб-сайту.
Для розробки серверного додатку було обрано технологію GraphQL,
яка значно спрощує розробку та проектування рішення. GraphQL дозволяє
розробленим клієнтським додаткам запитувати тільки ті дані, які потрібні, а
не завантажувати всю структуру даних. Це зменшує кількість надлишкової
інформації, що передається по мережі, і покращує продуктивність.
GraphQL допомагає уникнути проблем "overfetching" (завантаження
зайвих даних) та "underfetching" (недостатньо даних для запиту). Клієнти
52
можуть точно вказати, які саме поля їм потрібні, уникнувши надлишкових
або недостатніх даних.
Також, GraphQL дозволяє включати декілька запитів в одному HTTP-
запиті і отримувати відповіді на всі запити в одному відповіді. Це зменшує
кількість запитів на сервер і покращує продуктивність. GraphQL може бути
використаний для підтримки реактивного програмування, яке дозволяє
створювати реагуючі та інтерактивні додатки.
Загалом, GraphQL спрощує розробку веб-додатків, забезпечуючи
більшу гнучкість, продуктивність та ефективність при спілкуванні між
клієнтом і сервером.
Node.js побудований на JavaScript, що робить його ідеальним вибором
для GraphQL, оскільки сам GraphQL також базується на JavaScript. Також,
якщо використовується TypeScript, то розробних отримуєте додатковий
контроль над типами і відзивчістю коду. Node.js є одним з найшвидших
серверних середовищ виконання, що дозволяє побудувати високовіддаючі
GraphQL сервери з низькою затратою на ресурси.
Також, вибір Node.js для розробки backend серверу веб-сайту дозволяє
розгортати GraphQL сервери на різних платформах, що робить його
універсальним рішенням. Використовуючи Node.js для розробки як
серверної, так і клієнтської частини додатку дає можливість розробляти весь
стек в одній мові (JavaScript/TypeScript), що спрощує комунікацію між обома
частинами додатку.
Зважаючи на ці переваги, вибір Node.js для розробки GraphQL сервера
є розумним та ефективним рішенням.
Для збереження даних в розробленій системі було використано СУБД
MySQL. Вибір MySQL для розробки цієї системи було обґрунтовано
наступними причинами:
- Надійність і стабільність;
- Велика спільнота і підтримка;
- Підтримка SQL;
53
- Висока швидкість та відзивчивість;
- Безпека даних.
MySQL вважається однією з найнадійніших систем управління базами
даних. Вона має довгу історію та широке поширення, що свідчить про її
стабільність та надійність.
Дана СУБД має велику та активну спільноту розробників і
користувачів. Це означає, що розробник зможе легко знайти відповіді на свої
питання та отримати підтримку в разі необхідності.
MySQL використовує мову SQL, яка є стандартною мовою для роботи
з реляційними базами даних. Це полегшує роботу з даними та запитами.
Також, MySQL володіє високою швидкістю роботи та відзивчістю, що
важливо для веб-додатків, особливо тих, які мають багато запитів до бази
даних.
Обрана база даних має вбудовані засоби для захисту даних, включаючи
можливість шифрування та керування доступом до бази даних.
3.2 Опис функцій системи
Розроблена система є комплексним рішенням, спрямованим на надання
зручного та ефективного способу взаємодії з відвідувачами та управлінням
вмістом в на веб-сайті компанії. Розроблена система складається з:
- Головна сторінка;
- Панель адміністратора;
- Система адміністрування для керуванням веб-сайтом.
Головна сторінка виступає як головний засіб виведення інформації про
продукти, послуги чи інші пропозиції компанії до потенційних клієнтів та
відвідувачів. Ця сторінка має відмінний візуальний дизайн та привабливий
контент, що заохочує відвідувачів виконувати бажані дії, такі як заповнення
контактних форм, підписка на розсилку, виклик на гарячу лінію або
придбання продукту, зображено на рисунку 3.2.
54
Рисунок 3.2 - Головна сторінка WEB-сайту
Головна сторінка може включати загальний опис компанії, її місії,
цінностей та історії. Ця інформація допомагає відвідувачам зрозуміти, що це
за компанія, які цінності вона прагне втілювати.
Для підтримки актуальності інформації, можна включити секцію новин
або блогу, де компанія публікує свіжі новини, анонси подій, корисні статті та
інше. Це сприяє залученню та утриманню відвідувачів на сторінці.
Для зручності клієнтів сторінка містить контактну інформацію, таку як
адреса, телефон та адреса електронної пошти. Також може бути включена
55
форма зворотнього зв'язку, за допомогою якої відвідувачі можуть надсилати
запити або повідомлення, зображено на рисунку 3.3.
Рисунок 3.3 - Контактна форма WEB-сайту
Посилання на профілі компанії в соціальних мережах допомагають
встановити зв'язок між сторінкою і соціальними медіа.
Окрім загальної форми зворотного зв'язку, можна включити форми для
реєстрації на розсилку новин, відправки повідомлень або запитів. Це
спрощує взаємодію з потенційними клієнтами та допомагає збирати їхні
контактні дані для подальшого зв'язку.
Важливим етапом є встановлення аналітичних інструментів, таких як
Google Analytics, для відстеження трафіку та поведінки відвідувачів на
сторінці. Це допомагає визначити ефективність сторінки та здійснювати
вдосконалення на основі даних.
56
Головна сторінка є важливим інструментом для компаній, які бажають
представити свою діяльність та привернути нових клієнтів. Вона може бути
ефективним інструментом маркетингу та продажів, а також сприяти
покращенню комунікації з аудиторією.
Розроблена сторінка використовує принцип whitelabeling, який
дозволяє різним компаніям налаштовувати сторінки веб-сайту по різному.
Whitelabeling (білий лейбл) - це практика, коли одна компанія створює
продукт чи послугу, а інші компанії можуть використовувати цей продукт
або послугу під своїм власним брендом і логотипом, як буде виглядати для
клієнтів від компанії-користувача (партнера), мов буде їхнім власним
продуктом чи послугою.
Головна сторінка розроблена та утримується однією компанією
(наприклад, розробником програмного забезпечення чи послуги). Однак інші
компанії, які використовують цю систему, можуть замовити "білий лейбл"
цієї сторінки. Це означає, що головна сторінка може бути легко адаптована
до бренду та стилю цих компаній, включаючи їхній логотип, кольорову
палітру та інші визначальні елементи бренду.
Кожна компанія-партнер, яка використовує головну сторінку з білою
заставкою, може налаштовувати цю сторінку під свої потреби. Вони можуть
внести зміни до вмісту, графічного дизайну, а також додати свою власну
інформацію та контент.
Незважаючи на індивідуалізацію для кожної компанії-партнера,
головна сторінка може залишатися функціональною та технічно подібною до
оригінальної версії продукту чи послуги.
Ця практика дозволяє компаніям розширювати свій бізнес, надаючи
свої продукти чи послуги під іншими брендами, а також дозволяє партнерам
швидко і без значних витрат отримувати доступ до готових рішень, які вони
можуть індивідуалізувати та просувати під своїм власним ім'ям.
Незважаючи на індивідуалізацію для кожної компанії-партнера,
головна сторінка може залишатися функціональною та технічно подібною до
57
оригінальної версії продукту чи послуги.
Панель адміністратора є інструментом для внутрішнього управління та
керування вмістом та функціональністю веб-сайту. Адміністратори можуть
вносити зміни до вмісту, додавати нові матеріали, редагувати існуючі,
відстежувати активність користувачів, а також адмініструвати інші аспекти
веб-сайту.
Для доступу до адміністративної панелі потрібно пройти процес
авторизації. Авторизація — це процедура, за допомогою якої користувач
підтверджує свою ідентичність та отримує доступ до обмежених функцій або
даних на веб-сайті або в додатку. Вона є необхідною для забезпечення
безпеки та контролю над доступом до адміністративних ресурсів, зображено
на рисунку 3.4.
Рисунок 3.4 - Авторизація в панель адміністратора
Основні етапи авторизації включають наступні дії:
- Ідентифікація користувача;
- Визначення ролі і прав доступу;
- Створення сесії;
- Перенаправлення до адмін панелі.
Користувач вводить свої ідентифікаційні дані, такі як адресу
електронної пошти та пароль. Введені дані порівнюються з даними,
58
збереженими в базі даних. Якщо дані відповідають, користувач успішно
ідентифікується.
Після ідентифікації система визначає, яку роль має користувач
(наприклад, адміністратор, модератор, редактор) та які права доступу він має.
Після успішної авторизації користувачу видається тимчасовий маркер або
сесія, яка підтверджує його статус авторизованого користувача.
Користувач, який успішно авторизувався, перенаправляється до
адміністративної панелі, де він може здійснювати різні дії, такі як управління
контентом, налаштуваннями та іншими функціями.
Сесія авторизації зазвичай має обмежений термін дії. Після закінчення
сесії користувач повинен повторно авторизуватися для продовження роботи
в адмін панелі.
Авторизація є важливим елементом забезпечення безпеки в
адміністративних панелях та допомагає контролювати доступ до важливих
функцій та даних. Вона також дозволяє ідентифікувати користувачів та
відстежувати їхню діяльність для забезпечення внутрішньої безпеки та
виконання ролей та обов'язків.
Панель адміністратора — це інструмент, який призначений для
управління та керування вмістом та функціональністю веб-сайту. Вона надає
адміністраторам зручний і централізований доступ до різних функцій для
керування вмістом та контактною інформацією сайту.
Адміністратор може додавати нові новини або статті на сайт. Це
включає в себе додавання заголовків, тексту, зображень та інших
мультимедійних вкладень. Адміністратор також може редагувати та
оновлювати існуючі новини, вносячи зміни до тексту, виправляючи помилки
та оновлюючи інформацію. Панель адміністратора зображено на рисунку 3.5.
59
Рисунок 3.5 - Панель адміністратора
Панель адміністратора дозволяє переглядати повідомлення, які
надійшли через контактну форму на сайті. Це дозволяє відстежувати та
відповідати на запити від відвідувачів. Адміністратор може класифікувати
повідомлення, визначаючи їх важливість, статус та призначення для
подальшого оброблення.
За допомогою панелі адміністратора можна налаштувати whitelabeling
для індивідуалізації продукту або послуги для партнерів. Це включає в себе
додавання логотипів, зміну кольорової схеми, а також зміну інших
візуальних елементів, щоб відповідати бренду партнера.
Адміністратор може налаштовувати параметри білого лейблу для
кожного партнера окремо, забезпечуючи індивідуальний підхід та різні рівні
персоналізації.
Ці функції дозволяють адміністраторам легко управляти вмістом та
інформацією на веб-сайті, а також забезпечують інструменти для
індивідуалізації продукту чи послуги для партнерів через whitelabeling.
60
Інтеграція з Google Analytics в панель адміністратора є важливою
функцією, яка дозволяє адміністраторам отримувати доступ до детальної
аналітики про використання та відвідуваність веб-сайту.
Адміністратори можуть переглядати загальну статистику щодо
кількості відвідувачів, сторінок, сеансів, часу перебування та інших
важливих показників, які допомагають оцінити загальну активність на веб-
сайті.
З Google Analytics адміністратори можуть отримувати детальну
інформацію про трафік на сайті, включаючи джерела трафіку (органічний,
прямий, від пошукових систем, від посилань тощо), ключові сторінки, на які
відвідувачі переходять, та поведінку користувачів на сайті.
Загальна аналітика, яка доступна через інтеграцію з Google Analytics,
допомагає адміністраторам отримувати важливу інформацію для прийняття
рішень щодо оптимізації сайту, покращення стратегії маркетингу та
збільшення виторгу. Ця інтеграція дозволяє ефективно відстежувати та
аналізувати роботу веб-сайту та виявляти області для покращень.
3.3 Забезпечення захисту інформації при роботі зі створеною
системою
Захист інформації в розробленій системі є критично важливим
аспектом для забезпечення конфіденційності, цілісності та доступності
даних. Автентифікація та авторизація - це два основних аспекти захисту
систем та даних, які важливі для забезпечення безпеки та конфіденційності.
Автентифікація - це процес перевірки ідентичності користувача. Це
означає, що користувач повинен довести, що він той, за кого себе видає.
Зазвичай автентифікація включає в себе введення ідентифікатора (наприклад,
ім'я користувача або адреса електронної пошти) та пароля.
61
Під час процесу автентифікації система порівнює введені користувачем
дані з даними, збереженими в базі даних. Якщо вони відповідають, то
користувач автентифікується і отримує доступ до системи.
Авторизація - це процес надання прав доступу користувачу після
успішної автентифікації. Після того як користувач ідентифікував себе,
система визначає, до яких ресурсів, функцій та даних він має доступ. В
системах з авторизацією ролей користувачам присвоюються певні ролі
(наприклад, адміністратор, користувач, гість), і кожна роль має визначені
права доступу. Авторизація визначає, які ресурси та функції можуть бути
використані користувачем на основі його ролі.
Важливо розрізняти ці два терміни: автентифікація визначає, хто є
поточний користувач, ідентифікуючи при цьому особу, в той час, як
авторизація визначає, можна робити після того, як особа була
ідентифікована. Обидва аспекти важливі для забезпечення безпеки та
обмеження доступу до важливих ресурсів і даних в системі.
Шифрування даних при пересиланні інформації через HTTPS - це
захисна технологія, яка забезпечує конфіденційність та цілісність даних, які
передаються між веб-сервером та клієнтом під час взаємодії з веб-сайтом.
HTTPS використовує шифрування для захисту вмісту передачі даних від
несанкціонованого доступу та забезпечення безпеки.
Під час взаємодії між клієнтом (наприклад, веб-браузером) та веб-
сервером, дані шифруються на стороні сервера та розшифровуються на
стороні клієнта, і навпаки. Це означає, що навіть якщо дані перехоплюються
на шляху, вони будуть зашифровані та недоступні для зловмисників.
HTTPS використовує протоколи шифрування, такі як SSL (Secure
Sockets Layer) і TLS (Transport Layer Security), для захисту даних. Вони
використовують шифрувальні алгоритми для перетворення даних в такий
формат, який може бути розшифрований лише з правильним ключем.
Веб-сервери, які використовують HTTPS, повинні мати встановлені
SSL-сертифікати, що видані довіреними центрами сертифікації. Ці
62
сертифікати підтверджують ідентичність сервера та забезпечують довіру
клієнтів. Клієнти перевіряють ці сертифікати під час з'єднання з сервером.
Шифрування HTTPS також допомагає захистити від атак середнього
чоловіка (Man-in-the-Middle атак), які можуть спрямовувати або
перехоплювати комунікацію між клієнтом і сервером.
Загалом, HTTPS є важливою технологією для забезпечення безпеки та
конфіденційності даних при пересиланні через Інтернет, і він
використовується для захисту конфіденційних інформаційних обмінів на
багатьох веб-сайтах, включаючи банківські операції, онлайн-магазини та
соціальні мережі.
Захист від атак в розробленій системі є критично важливим для
забезпечення безпеки та цілісності інформації та функціональності. Всі
вхідні дані, які надходять в систему від користувачів або інших джерел,
повинні бути валідовані та фільтровані для запобігання атак вронгування,
SQL-ін'єкцій та інших атак на вразливості.
Захист від SQL-ін'єкцій містить використання параметризованих
запитів та обмеження доступу до бази даних лише на обрані дії, які дозволені
користувачеві.
Всі вихідні дані, які відображаються на сторінці, є екранованими для
уникнення вставки зловмисного JavaScript. Також було використано
заголовки безпеки, такі як Content Security Policy (CSP), для обмеження
виконання скриптів.
Всі запити, які змінюють стан системи (наприклад, виконують дії, такі
як оновлення даних), є забезпечені анти-CSRF токенами для перевірки
джерела запиту.
Загальна стратегія захисту від атак включає в себе поєднання технічних
заходів безпеки, процедур та навичок для забезпечення максимального рівня
захисту для системи та даних користувачів.
Резервне копіювання та відновлення (Backup and Recovery) - це
важливий аспект забезпечення безпеки та доступності даних у будь-якій
63
інформаційній системі або на веб-сайтах. Ця стратегія передбачає створення
резервних копій даних і процедур відновлення, щоб в разі втрати або
пошкодження даних можна було швидко та надійно відновити їх до
нормального стану.
Дані повинні резервуватися регулярно, в залежності від важливості та
критичності інформації. Це може бути щоденним, щотижневим, щомісячним
або за іншим графіком. Резервні копії повинні містити всі дані, необхідні для
відновлення системи або інформації.
Резервні копії повинні зберігатися в безпечному місці, яке захищене від
фізичних та кібератак, із забезпеченням конфіденційності.
Резервне копіювання та відновлення є важливою складовою стратегії
безпеки та дозволяють мінімізувати ризик втрати даних та перерви в роботі
системи у разі надзвичайних ситуацій.
Навчання персоналу є критично важливою складовою розробки та
виконання стратегії захисту системи. Грамотний персонал, який розуміє і
виконує кращі практики забезпечення безпеки, важливий для запобігання
загрозам та вразливостям.
Персонал повинен бути проінформований про типові загрози безпеки,
які можуть вплинути на систему, включаючи атаки, вразливості та можливі
ризики. Навчання повинно включати розпізнавання соціального інжинірингу,
фішингу, кросс-сайтових сценаріїв та інших потенційних загроз.
Персонал повинен розуміти політики безпеки організації та
відповідальність кожного працівника за дотримання цих політик. Навчання
повинно охоплювати питання доступу до даних, обміну інформацією,
паролів, зберігання та обробки конфіденційної інформації.
Персонал повинен отримати необхідні технічні навички для
впровадження та керування заходами безпеки. Це може включати в себе
роботу з антивірусними програмами, брандмауерами, системами моніторингу
та іншими інструментами безпеки.
64
Навчання персоналу є необхідною інвестицією у безпеку організації та
захист інформації. Вона сприяє зменшенню ризиків та підвищує свідомість
всього колективу про важливість безпеки.
Захист інформації при виборі хостингу для сайту є надзвичайно
важливим завданням, оскільки невірний вибір хостинг-постачальника може
призвести до потенційних проблем з безпекою та конфіденційністю даних на
веб-сайті.
Важливо, щоб хостинг-постачальник підтримував та надавав
можливість встановити SSL-сертифікат для сайту. Це забезпечить
шифрування даних, які передаються між сервером і користувачем, і
підвищить безпеку комунікації.
Потрібно переконатися, що хостинг-постачальник забезпечує регулярні
резервні копії даних та можливість їх відновлення в разі втрати або
пошкодження інформації.
Важливо, щоб хостинг-постачальник мав високий рівень безпеки
мережі. Це включає застосування брандмауерів, систем виявлення вторгнень
та інших заходів для захисту від мережевих атак.
Відомий і надійний хостинг-постачальник має захист від DDoS-атак
для забезпечення доступності сайту.
Обираючи хостинг-постачальника, розробник повинен бути готовим
задавати запитання про їхні заходи безпеки та сертифікації. Забезпечення
безпеки інформації - це важливий аспект роботи веб-сайту, і він повинен
бути у відповідності зі сучасними стандартами безпеки.
3.4 Технічні вимоги для роботи з системою
Технічні вимоги - це документ або специфікація, яка містить
докладний опис технічних параметрів, характеристик і функціональних
вимог, які повинні бути виконані при розробці, впровадженні або підтримці
інформаційної системи, програмного забезпечення або технічного продукту.
65
Технічні вимоги є важливим інструментом для узгодження очікувань між
замовником і розробником та визначення стандартів, які має відповідати
продукт або система.
Технічні вимоги допомагають забезпечити однакове розуміння вимог
до проекту всіма сторонами та служать основою для оцінки успішності
розробки та впровадження системи. Цей документ може бути постійно
оновлюваним і розширюваним під час розробки проекту для врахування
нових вимог і змін.
Для роботи з розробленим рішенням потрібно визначити мінімальні
вимоги до VPS серверу. VPS (Virtual Private Server) - це віртуальний
приватний сервер, який функціонує на фізичному сервері віртуалізації. Він є
проміжним рішенням між спільним веб-хостингом і дедикованим фізичним
сервером і надає користувачеві значну кількість контролю та ізоляції, але за
більш доступною ціною порівняно зі стандартними дедикованими серверами.
Вибір VPS-сервера повинен відповідати потребам проекту в ресурсах,
включаючи обсяг оперативної пам'яті, кількість процесорних ядер і обсяг
сховища. Ресурси повинні бути достатніми для оптимальної роботи системи.
Вибір операційної системи для VPS залежить від технічних вимог
проекту. Популярні варіанти включають Ubuntu, CentOS, Debian і Windows
Server.
Потрібно переконатися, що VPS-сервер має достатню пропускну
спроможність та швидкість мережі для забезпечення ефективної роботи
системи та задоволення потреб користувачів.
Нижче наведено мінімальні та оптимальні вимоги для розробленого
рішення у таблиці 3.1.
Різниця між мінімальними і оптимальними технічними вимогами
полягає у рівнях продуктивності, ефективності та якості обладнання чи
програмного забезпечення, які вимагаються для певного завдання чи
проекту.
66
Таблиця 3.1 - Мінімальні та максимальні вимоги
Мінімальні вимоги Оптимальні вимоги
ОЗУ 1 GB 2 GB
Процесор 1 Ядро 4 ядра
ОС Debian/Ubuntu Debian/Ubuntu
Памʼять 1GB HDD 1GB SSD
Мережа Безлімітний трафік Безлімітний трафік
Мінімальні вимоги представляють найнижчий рівень технічних
характеристик, які дозволять виконувати певну функцію чи виконувати
завдання. Вони зазвичай визначаються так, щоб продукт чи система
запускалися, але можуть не гарантувати оптимальної продуктивності чи
ефективності.
Мінімальні вимоги часто використовуються для запуску програмного
забезпечення на слабших пристроях чи умовах з обмеженими ресурсами.
Вони можуть бути важливі для тих, хто має обмежений бюджет або ресурси.
Оптимальні вимоги вказують на вищий рівень продуктивності,
ефективності та якості. Вони визначають рівень ресурсів, який дозволяє
продукту чи системі працювати на найкращому рівні, з врахуванням
швидкодії, зручності та надійності.
Оптимальні вимоги зазвичай використовуються в тих випадках, коли
хочете надати користувачам найкращий досвід використання продукту чи
системи, і готові інвестувати в високоякісне обладнання або програмне
забезпечення.
Отже, вибір між мінімальними та оптимальними технічними вимогами
залежить від конкретних потреб проекту чи завдання. Якщо у користувача
системи є обмежений бюджет або ресурси, то можливо, потрібно почати з
мінімальних вимог, а потім розглянути можливість покращення якщо буде
знайдено фінансові ресурси для цього. У випадку, коли ставиться завдання
67
забезпечити високу якість та продуктивність, оптимальні технічні вимоги
будуть відповідним вибором.
3.5 Оцінка ефективності застосування системи
Оцінка ефективності при роботі з мікрофронтендами є важливою для
забезпечення успішності проекту та максимізації користі від цього підходу.
Мікрофронтенди - це архітектурний шаблон, в якому веб-інтерфейс
розбивається на невеликі, незалежні фрагменти (фронтенди), які можуть бути
розвивані, підтримувані та масштабовані окремо. Оцінка ефективності
включає в себе такі аспекти:
- Продуктивність;
- Споживачі ресурсів;
- Завантаження на мережу;
- Масштабованість;
При роботі з подібними системами оцінюється швидкість завантаження
та відкликання мікрофронтендів. Важливо враховувати, що кожен
мікрофронтенд має працювати ефективно та не сповільнювати загальну
продуктивність системи.
Також потрібно оцінювати споживання ресурсів (пам'яті, CPU, мережі)
кожним мікрофронтендом. Важливо, щоб ресурси були розподілені
ефективно та збалансовано між мікрофронтендами.
Потрібно перевірити, наскільки ефективно обробляються запити на
завантаження мікрофронтендів з сервера. Робота з CDN (мережевою
службою доставки контенту) може покращити швидкість завантаження.
Загалом, оцінка ефективності при роботі з мікрофронтендами вимагає
систематичного аналізу та вдосконалення різних аспектів розробки, від
архітектури до моніторингу та безпеки, для забезпечення успішності та
оптимальності проекту на основі цього підходу.
68
Порівнюючи мікрофронтенди з аналогічними системами, важливо
враховувати конкретні потреби та цілі проекту. Мікрофронтенди можуть
бути ефективним вибором для команд, які шукають більшу гнучкість та
швидкість розробки, але вони також вимагають додаткового управління та
координації між компонентами.
Мікрофронтенди надають можливість розробляти окремі частини
системи незалежно одна від одної. Це є однією з ключових переваг цього
підходу до розробки веб-інтерфейсів.
Однак варто зазначити, що розробка мікрофронтендами також вимагає
додаткового управління та координації між мікрофронтендами, а також
створення механізмів для їх спільної взаємодії. Крім того, існують сценарії, в
яких мікрофронтенди можуть бути менш ефективними, наприклад, для дуже
маленьких проектів чи проектів із великим обсягом загальної логіки та
спільного функціоналу.
Для порівняння ефективності розробленого рішення на базі
мікросервісоного (мікрофронтенд) підходу потрібно порівнювати розробку
звичайного клієнтського додатка та додатку, який було розроблена в рамках
даної кваліфікаційної роботи, зображено в таблиці 3.2.
Таблиця 3.2 - Порівняння ефективності розробленого рішення
Розробка звичайного Використання
клієнтського додатка мікросервісного підходу
(мікрофронтенду)
Швидкість 1 команда Можливість розділити
розробки розробку на декілька
незалежних команд
Тестування Тестування всього Можливість тестування як
проекту окремої частини, так і цілого
проекту
69
Продовження таблиці 3.2
Процес При зміні коду потрібно Є можливість розгортати
розгортання розгортати весь тільки змінену частину додатка
розроблений додаток
Використання Однакові технології та Є можливість використовувати
технологій підходи для всього різні технології для різних
додатку частин системи
Використання мікрофронтендів порівняно з традиційною монолітною
розробкою веб-інтерфейсу має численні переваги. Мікрофронтенди
дозволяють розробляти окремі компоненти системи незалежно один від
одного, що полегшує організацію роботи та прискорює процес розробки.
Вони також забезпечують гнучкість та розширюваність системи, дозволяючи
додавати та змінювати компоненти без впливу на інші частини системи. Це
сприяє швидкому впровадженню нового функціоналу та покращує гнучкість
розробки.
3.6 Висновки до розділу 3
У розділі було представлено структуру інформаційної системи, її
архітектурні рішення та основні компоненти, що входять в склад
мікросервісного додатку. Також розглянуто функції та можливості системи,
які надають користувачам та дозволяють досягти їхніх цілей та завдань.
Приділено увагу аспектам безпеки в мікросервісному підході. Розглянуто
заходи забезпечення захисту інформації та безпеки даних при роботі з
системою. Представлено технічні вимоги та рекомендації для користувачів,
які планують використовувати створену систему. Як підсумок була
проведена оцінка ефективності використання розробленої системи на основі
попередніх розділів. Визначено переваги мікросервісного підходу та
оптимізації методів та засобів розробки.
70
Загалом надано детальну інформацію щодо розробки веб-додатків з
використанням мікросервісного підходу та підкреслено важливість
оптимізації цього процесу для досягнення кращої продуктивності та
задоволення потреб користувачів.
Результати досліджень і аналізу, проведені в цьому розділі, надають
цінний внесок у розумінні ефективності та переваг мікросервісного підходу в
розробці веб-додатків.
71
ВИСНОВКИ
У рамках кваліфікаційної роботи магістра було проведено аналіз
предметної області, яка стосується розробки користувацьких веб-додатків.
Детально досліджено два основних типи розробки веб-додатків: Single Page
Application (SPA) та Multi Page Application (MPA). Розглянуто їх відмінності,
переваги та недоліки, а також детально проаналізовано популярні
фреймворки, які використовуються для створення веб-додатків обох типів.
На основі цього аналізу визначено, що робота буде зосереджена на
концепції мікрофронтенду, яка є декомпозицією фронтенду великого веб-
додатку на невеликі, незалежні модулі. Мікрофронтенди дозволяють
ефективно керувати великими кодовими базами та великими командами
розробників.
Для реалізації поставлених задач у роботі обрано технології для
розробки мікрофронтендів, такі як Angular і React для користувацьких
інтерфейсів, Single-SPA для об'єднання фреймворків, TypeScript для
статичної типізації, GraphQL для взаємодії з сервером та GitHub Actions для
автоматизованого CI/CD. Це створює потужний інструментарій для
ефективної розробки та розгортання мікрофронтендів, забезпечуючи високу
якість та розширюваність коду.
Також у роботі визначено з яких частин складається програмна
система, де головна сторінка виступає як головний засіб виведення
інформації про продукти. Панель адміністратора є інструментом для
внутрішнього управління та керування вмістом та функціональністю веб-
сайту, а також забезпечують інструменти для індивідуалізації продукту чи
послуги для партнерів через whitelabeling.
Щодо розробленої програмної системи визначено функції та
можливості, забезпечено важливі аспекти безпеки та встановлено технічні
вимоги для користувачів, які планують використовувати дану систему.
72
Завершальна оцінка ефективності використання розробленої
інформаційної системи підкреслила переваги мікросервісного підходу та
показала, що вибрані технології та методи розробки допомагають досягнути
високої продуктивності та задоволення потреб користувачів.
Результати вказують на важливість мікросервісного підходу та
оптимізації методів та засобів розробки для реалізації ефективних веб-
додатків у сучасному інформаційному середовищі. Кваліфікаційна робота
надає цінний внесок у розуміння цих технологій і підходів та підкреслює їх
важливість для успішної розробки веб-додатків.
73
ПЕРЕЛІК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ
SPA – Односторінкова програма (Single Page Application).
MPA – Багатосторінковий додаток (Multiple Page Application).
API – Інтерфейс програмування застосунків (Application Programming
Interface).
UI – Інтерфейс користувача (User Interface).
UX – Взаємодія користувача (User Experience).
DOM – Об'єктна модель документа (Document Object Model).
CI/CD – Постійна інтеграція та постійна доставка (Continuous Integration and
Continuous Delivery).
DevOps – Розробка та операції (Development and Operations).
Microservices – Мікросервіси (архітектурний підхід до структуризації
програмного забезпечення на невеликі, автономні сервіси).
Containerization – Контейнеризація (технологія ізолювання та розгортання
програмного забезпечення в контейнерах).
Docker – Відомий інструмент для контейнеризації додатків.
Kubernetes – Система оркестрації контейнерів для автоматизації їх
розгортання, масштабування та керування.
Frontend – Користувацький інтерфейс та клієнтська частина веб-додатку.
Backend – Серверна частина веб-додатку, яка відповідає за бізнес-логіку та
обробку запитів.
CDN – Мережа доставки контенту (Content Delivery Network) – розподілений
підхід до доставки вмісту для підвищення продуктивності.
REST – Представлення стану передачі (Representational State Transfer) –
архітектурний стиль для створення веб-служб.
GraphQL – Запит-мова для вашого API – альтернативний підхід до роботи з
API.
74
JWT – Токен доступу JSON (JSON Web Token) – метод автентифікації та
передачі даних між сторонами.
SQL – Мова структурованих запитів (Structured Query Language) – мова для
взаємодії з базами даних.
NoSQL – Бази даних без використання SQL – альтернативний підхід до
зберігання даних.
HTTP – Протокол передачі гіпертексту (Hypertext Transfer Protocol) –
основний протокол для обміну даними в інтернеті.
HTTPS – Захищений протокол передачі гіпертексту (Hypertext Transfer
Protocol Secure) – безпечна версія HTTP.
SSL/TLS – Протоколи захищеного з'єднання (Secure Sockets Layer / Transport
Layer Security) – забезпечують шифрування з'єднань.
JSON – Об'єктна нотація JavaScript (JavaScript Object Notation) – формат
обміну даними.
CRUD – Створення, читання, оновлення, видалення (Create, Read, Update,
Delete) – основні операції над ресурсами.
DNS – Служба доменних імен (Domain Name System) – система для
перетворення доменних імен на IP-адреси.
API Gateway – Шлюз API – проксі-сервер, який об'єднує запити до різних
мікросервісів в одному місці.
SLA – Угода про рівень обслуговування (Service Level Agreement) –
зобов'язання щодо якості обслуговування.
75
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Chris Richardson. Microservices Patterns: With examples in Java. Shelter
Island, NY: Manning Publications, 2018. 477 p.
2. Sam Newman. Building Microservices: Designing Fine-Grained Systems.
Sebastopol, CA: O'Reilly Media, 2015. 280 p.
3. Martin Fowler. Microservices: A definition of this new architectural term.
4. Eberhard Wolff. Microservices: Flexible Software Architecture. Raleigh,
NC: Pragmatic Bookshelf, 2016. 292 p.
5. Chris Klug. Microservices with Spring Boot and Spring Cloud.
Birmingham: Packt Publishing, 2019. 406 p.
6. Sam Newman. Monolith to Microservices: Evolutionary Patterns to
Transform Your Monolith. Sebastopol, CA: O'Reilly Media, 2020. 207 p.
7. Brent Laster. Kubernetes Best Practices. Raleigh, NC: O'Reilly Media,
2019. 108 p.
8. Eric Evans. Domain-Driven Design: Tackling Complexity in the Heart of
Software. Boston, MA: Addison-Wesley Professional, 2003. 560 p.
9. Mark Foster. Microservices for Java Developers: A Hands-On Introduction
to Frameworks and Containers. Anirban Sen Chowdhary, Eberhard Wolff.
Raleigh, NC: O'Reilly Media, 2016. 86 p.
10.Dino Esposito. Modern Web Development with ASP.NET Core 3.
Birmingham: Packt Publishing, 2020. 624 p.
11.Chris Woodruff. Building and Deploying Microservices with ASP.NET
Core. Birmingham: Packt Publishing, 2020. 476 p.
12.Chris Richardson. Microservices Patterns: With examples in Java. Shelter
Island, NY: Manning Publications, 2018. 477 p.
13.Sam Newman. Building Microservices: Designing Fine-Grained Systems.
Sebastopol, CA: O'Reilly Media, 2015. 280 p.
76
14.Eberhard Wolff. Microservices: Flexible Software Architecture. Raleigh,
NC: Pragmatic Bookshelf, 2016. 292 p.
15.Chris Klug. Microservices with Spring Boot and Spring Cloud.
Birmingham: Packt Publishing, 2019. 406 p.
16.Dino Esposito. Modern Web Development with ASP.NET Core 3.
Birmingham: Packt Publishing, 2020. 624 p.
17.Chris Woodruff. Building and Deploying Microservices with ASP.NET
Core. Birmingham: Packt Publishing, 2020. 476 p.
18.Mark Foster, Anirban Sen Chowdhary, Eberhard Wolff. Microservices for
Java Developers: A Hands-On Introduction to Frameworks and Containers.
Raleigh, NC: O'Reilly Media, 2016. 86 p.
19.Brent Laster. Kubernetes Best Practices. Raleigh, NC: O'Reilly Media,
2019. 108 p.
20.Eric Evans. Domain-Driven Design: Tackling Complexity in the Heart of
Software. Boston, MA: Addison-Wesley Professional, 2003. 560 p.
ДОДАТОК А
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор Віра БАБЕНКО
__________________
“___” _____________ 2023р.
Методи та засоби розробки користувацького WEB додатку з
використанням мікросервісного підходу
Специфікація
482.ЧДТУ.32289-01
Листів 2
Розробник _______________ Олександр КОВАЛЬ
Керівник _______________ Володимир РУДНИЦЬКИЙ
Черкаси 2023
2
482.ЧДТУ.32289-01
Позначення Найменування Примітка
Документація
482.ЧДТУ.32289-04 12 01 Текст програми
482.ЧДТУ.32289-01 34 01 Інструкція користувача
ДОДАТОК Б
Методи та засоби розробки користувацького WEB додатку з
використанням мікросервісного підходу
Текст програми
482.ЧДТУ.32289-01 12 01
Листів 12
Розробник _______________ Олександр КОВАЛЬ
Черкаси 2023
2
482.ЧДТУ.32289-01 12 01
import { Component } from '@angular/core';
@Component({
templateUrl: './admin.html',
styleUrls: [ './admin.scss' ]
})
export class AdminComponent {
isVisible = true;
isMobile = true;
buttonStateChange(): void {
this.isVisible = !this.isVisible;
}
closeMenu(): void {
if (this.isVisible && this.isMobile) {
this.isVisible = !this.isVisible;
}
}
windowWidthChange(event: boolean): void {
this.isMobile = event;
if (this.isMobile) {
this.closeMenu();
}
}
}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NewsRestService } from '@rest/news/news.service';
import { NewsListDto } from '@rest/news/news.list.dto';
import { NewsParams } from '@rest/news/news.params';
import { NewsResponseDto } from '@rest/news/news.response.dto';
import { RestMetaDto } from '@modules/rest/rest.meta.dto';
@Component({
templateUrl: './list.html',
styleUrls: [ './list.scss' ],
providers: [ NewsRestService ]
})
export class NewsListComponent implements OnInit {
news = new NewsListDto();
3
482.ЧДТУ.32289-01 12 01
params = new NewsParams();
meta: RestMetaDto = new RestMetaDto();
news: NewsResponseDto;
constructor(
private newsRestService: NewsRestService,
private router: Router,
private route: ActivatedRoute
) { }
ngOnInit(): void {
this.params.page = this.route.snapshot.queryParams.page ?
+this.route.snapshot.queryParams.page : null;
this.initNews(this.params);
}
navigateToCreatePage(): void {
this.router.navigateByUrl('/news/create');
}
selectNews(news: NewsResponseDto = null): void {
this.news = news;
}
deleteNews(id: string): void {
this.newsRestService.deleteNews(id).subscribe(() => {
this.initNews(this.params);
this.selectNews(null);
});
}
initNews(params): void {
this.newsRestService.getNews(params).subscribe(news => {
this.news.items = news.items.map(news => new NewsResponseDto(news));
this.meta = new RestMetaDto(news.meta);
this.params.page = news.meta.currentPage;
});
}
newsSearch(searchField: string): void {
this.params.search = searchField;
this.params.page = 1;
this.initNews(this.params);
}
}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
4
482.ЧДТУ.32289-01 12 01
import { NewsRequestDto } from '@rest/news/news.request.dto';
import { NewsResponseDto } from '@rest/news/news.response.dto';
import { NewsRestService } from '@rest/news/news.service';
@Component({
selector: 'news-manage',
templateUrl: './manage.html',
styleUrls: [ './manage.scss' ],
providers: [ NewsRestService ]
})
export class ManageComponent implements OnInit {
newsId: string;
news = new NewsResponseDto();
constructor(
private activatedRoute: ActivatedRoute,
private router: Router,
private newsRestService: NewsRestService
) { }
ngOnInit(): void {
this.activatedRoute.params.subscribe(data => this.newsId = data.id);
if (this.newsId) {
this.initLocation();
}
}
saveChanges(news: NewsRequestDto): void {
if (this.newsId) {
this.updateLocation(news);
} else {
this.createLocation(news);
}
}
private createLocation(newLocation: NewsRequestDto): void {
this.newsRestService.createLocation(newLocation)
.subscribe(() => this.router.navigateByUrl('/news'));
}
private updateLocation(newsChange: NewsRequestDto): void {
this.newsRestService.updateLocation(this.newsId, newsChange)
.subscribe(() => this.router.navigateByUrl('/news'));
}
private initLocation(): void {
this.newsRestService.getLocation(this.newsId)
.subscribe(data => this.news = new NewsResponseDto(data));
5
482.ЧДТУ.32289-01 12 01
}
}
import { Component, ContentChild, ElementRef, Input, OnInit, TemplateRef } from
'@angular/core';
import { ContainerComponent } from '../container/container.component';
@Component({
selector: 'table-column',
template: ''
})
export class ColumnComponent implements OnInit {
@ContentChild(TemplateRef, { static: true })
template: TemplateRef<ElementRef>;
@Input()
id: string;
@Input()
name: string;
@Input()
width: number;
@Input()
position: 'left' | 'center' | 'right' = 'left';
@Input()
isSorted: boolean;
@Input()
isRowClickableByCurrentTd = true;
constructor(private container: ContainerComponent) {}
ngOnInit() {
this.container.addColumn(this);
}
}
import { Component, EventEmitter, Input, ViewEncapsulation, Output } from '@angular/core';
import { Params } from '@modules/rest/rest.params';
import { ColumnComponent } from '../column/column.component';
@Component({
6
482.ЧДТУ.32289-01 12 01
selector: 'table-container',
templateUrl: './container.html',
styleUrls: [ './container.scss' ],
encapsulation: ViewEncapsulation.None
})
export class ContainerComponent {
@Output()
update = new EventEmitter<void>();
@Output()
rowClick = new EventEmitter<string>();
@Input()
items = [];
@Input()
params: Params;
columns: ColumnComponent[] = [];
sortField: string;
sortDirection: string;
addColumn(column: ColumnComponent): void {
this.columns.push(column);
}
changeSort(name: string): void {
this.sortField = name;
this.sortDirection = this.getSortDirection(name);
this.params.sort = `${name},${this.sortDirection}`;
this.update.emit();
}
initRowClick(id: string): void {
this.rowClick.emit(id);
}
private getSortDirection(field: string): string {
const direction = this.sortField !== field || this.sortDirection === 'desc';
return direction ? 'asc' : 'desc';
}
}
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from
'@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
7
482.ЧДТУ.32289-01 12 01
import { Params } from '@modules/rest/rest.params';
@Component({
selector: 'table-navigation',
templateUrl: './navigation.html',
styleUrls: [ './navigation.scss' ]
})
export class NavigationComponent implements OnChanges, OnInit {
@Output()
update = new EventEmitter<void>();
@Input()
params: Params;
@Input()
totalPages: number;
@Input()
totalItems: number;
page: number = null;
lastPage = false;
firstPage = false;
sectionCount = 5;
sections: number[] = [];
startPage: number;
endPage: number;
pageLinkClicked = true;
url: string = null;
rangePosition: string = null;
sectionCountBeforeCurrentPage: number;
sectionCountAfterCurrentPage: number;
constructor(
private route: ActivatedRoute,
private router: Router
) {}
ngOnChanges(changes: SimpleChanges) {
this.sectionCountBeforeCurrentPage = Math.floor(this.sectionCount / 2);
this.sectionCountAfterCurrentPage = Math.ceil(this.sectionCount / 2) - 1;
this.page = this.route.snapshot.queryParams.page || 1;
this.firstPage = this.page === 1;
this.lastPage = this.page === this.totalPages;
if (this.totalItems && !changes.totalItems.firstChange) {
this.page = 1;
this.params.page = this.page;
this.navigateToPage(this.page);
8
482.ЧДТУ.32289-01 12 01
}
this.createSectionPagesRange();
}
ngOnInit() {
this.getUrl();
this.route
.queryParams
.subscribe(params => {
this.page = +params.page || 1;
this.params.page = this.page;
if (!this.pageLinkClicked) {
this.openPage(this.page);
}
if (this.page > this.totalPages) {
this.page = this.totalPages;
this.openPage(this.page);
}
this.pageLinkClicked = false;
});
}
openPage(page: number) {
this.navigateToPage(page);
this.page = page;
this.firstPage = this.page === 1;
this.lastPage = this.page === this.totalPages;
this.changeListPage();
this.createSectionPagesRange();
}
private getUrl() {
this.url = this.router.url.split('?')[0];
}
private changeListPage() {
this.params.page = this.page;
this.update.emit();
}
private navigateToPage(page) {
this.router.navigate([ this.url ], { queryParams: { page } }).then(() => {
this.pageLinkClicked = false;
});
}
private checkTotalPage() {
if (this.totalPages <= this.sectionCount) {
this.rangePosition = 'start';
9
482.ЧДТУ.32289-01 12 01
}
}
private checkPositionCurrentPageRelativeStart() {
if (this.page - 1 <= this.sectionCountBeforeCurrentPage && this.rangePosition !== 'start') {
this.rangePosition = 'nearStart';
}
}
private checkPositionCurrentPageRelativeEnd() {
if (this.page - 1 + this.sectionCountAfterCurrentPage >= this.totalPages &&
this.rangePosition !== 'start') {
this.rangePosition = 'nearEnd';
}
}
private setDefaultSectionCount() {
this.sectionCount = 5;
this.sectionCountBeforeCurrentPage = Math.floor(this.sectionCount / 2);
this.sectionCountAfterCurrentPage = Math.ceil(this.sectionCount / 2) - 1;
}
private setSmallSectionCount() {
if ((this.totalPages - this.page) >= 3) {
this.sectionCount = 3;
this.sectionCountBeforeCurrentPage = Math.floor(this.sectionCount / 2);
this.sectionCountAfterCurrentPage = Math.ceil(this.sectionCount / 2) - 1;
} else {
this.setDefaultSectionCount();
}
}
private setRangePosition(startPage, endPage) {
this.setDefaultSectionCount();
this.startPage = startPage;
this.endPage = endPage;
this.rangePosition = null;
}
private checkRangePosition(): void {
switch (this.rangePosition) {
case 'start':
this.setRangePosition(0, this.totalPages - 1);
break;
case 'nearStart':
this.setRangePosition(0, this.sectionCount - 1);
break;
case 'nearEnd':
this.setRangePosition(this.totalPages - this.sectionCount, this.totalPages - 1);
10
482.ЧДТУ.32289-01 12 01
break;
default: {
this.setSmallSectionCount();
this.startPage = this.page - 1 - this.sectionCountBeforeCurrentPage;
this.endPage = this.page - 1 + this.sectionCountAfterCurrentPage;
}
}
}
private createSectionPagesRange() {
this.checkTotalPage();
this.checkPositionCurrentPageRelativeStart();
this.checkPositionCurrentPageRelativeEnd();
this.checkRangePosition();
this.sections = Array.from(Array((this.endPage + 1) - this.startPage).keys()).map(i =>
this.startPage + i);
}
}
import { Injectable } from '@angular/core';
import { SessionStorageService } from 'ngx-webstorage';
import { LoginResponseDto } from '@rest/login/login.response.dto';
@Injectable()
export class AuthorizationService {
private tokenStore = 'token';
private emailStore = 'email';
constructor(private storageService: SessionStorageService) {}
saveAuthorization(account: LoginResponseDto, email?: string) {
if (email) {
this.storageService.store(this.emailStore, email);
}
this.storageService.store(this.tokenStore, account.token);
}
resetToken(): void {
this.storageService.clear(this.tokenStore);
}
resetAuthorization() {
this.storageService.clear();
}
}
11
482.ЧДТУ.32289-01 12 01
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
import { SessionStorage } from 'ngx-webstorage';
@Injectable()
export class PortalGuard {
@SessionStorage()
private token;
@SessionStorage()
private email;
constructor(private router: Router) { }
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.checkIfCanActivate();
}
canActivateChild(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.checkIfCanActivate();
}
private checkIfCanActivate(): boolean {
if (!this.token && !this.email) {
this.router.navigateByUrl('/auth');
return false;
}
if (!this.token && this.email) {
this.router.navigateByUrl('/auth/session-lock');
return false;
}
return true;
}
}
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'content-modal',
templateUrl: './content-modal.html',
styleUrls: [ './content-modal.scss' ]
})
export class ContentModalComponent {
@Output()
12
482.ЧДТУ.32289-01 12 01
cancel = new EventEmitter();
@Input()
name: string;
@Input()
visible = false;
@Input()
size: 'sm' | 'lg' | 'md' = 'md';
@Input()
position: 'top' | 'center' | 'bottom' = 'center';
closePopup(): void {
this.cancel.emit();
}
}
ДОДАТОК В
Методи та засоби розробки користувацького WEB додатку з
використанням мікросервісного підходу
Інструкція користувача
482.ЧДТУ.32289-01 34 01
Листів 4
Розробник _______________ Олександр КОВАЛЬ
Черкаси 2023
2
482.ЧДТУ.32289-01 34 01
Підготовка VPS-сервера перед розгортанням додатка на базі
мікрофронтендів є важливим кроком. По-перше, потрібно вибрати
провайдера VPS (Amazon Web Services, DigitalOcean, Linode, Google Cloud,
інші). Вибір провайдера залежить від бюджету проекту, потреб в ресурсах,
географічної локації сервера та інших факторів. Обравши сервіс потрібно в
ньому зареєструватися та створити екземпляр VPS з вибраною
конфігурацією.
Під час створення екземпляра VPS адміністратор системи повинен
вибрати операційну систему (ОС). Популярні варіанти включають Ubuntu,
CentOS, Debian, а також спеціалізовані ОС для конкретних завдань.
Після створення екземпляра VPS адміністраторові може бути надано
SSH-ключ або пароль для доступу. Використовуючи SSH-клієнт (наприклад,
PuTTY для Windows або термінал для Linux/Mac) для підключення до
сервера, адміністратор може під'єднатися до серверу за допомогою наступної
команди:
ssh username@IP_адреса_сервера
де username - ім'я користувача, а IP_адреса_сервера - IP-адреса створеного
VPS.
Після підключення до сервера рекомендується оновити список пакетів
та встановити оновлення:
sudo apt update
sudo apt upgrade
Конфігурація Nginx є ключовим етапом підготовки VPS-сервера для
розгортання додатку на базі мікрофронтендів. В Nginx конфігурація сервера
зазвичай розміщується у файлі /etc/nginx/sites-available/ і зазвичай має
розширення .conf. Серверний блок визначає налаштування для конкретного
домену або IP-адреси сервера:
3
482.ЧДТУ.32289-01 34 01
server {
listen 80;
server_name myapp.com;
}
Для HTTPS, ви також повинні вказати SSL-сертифікат та приватний
ключ. Наприклад:
server {
listen 443 ssl;
server_name myapp.com;
ssl_certificate /etc/nginx/ssl/myapp.crt;
ssl_certificate_key /etc/nginx/ssl/myapp.key;
}
Далі потрібно вказати кореневу директорію, де знаходяться файли
додатку. Це папка, з якої Nginx буде обслуговувати статичний контент.
Наприклад:
server {
listen 80;
server_name myapp.com;
location / {
alias /повний/шлях/до/кореневої/директорії/додатку;
index index.html;
}
}
У розділі location в адміністратора є можливість вказати додаткові
налаштування для конкретних шляхів на розробленому сайті.
4
482.ЧДТУ.32289-01 34 01
Потрібно памʼятати, що конфігураційний файл серверного блоку
повинен бути також символьним посиланням в директорії /etc/nginx/sites-
enabled/. Для цього можна скористатися наступною командою:
sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
Після цих кроків, сервер буде готовий обслуговувати розроблений
додаток через Nginx на вказаному домені та порту.
Наступним кроком потрібно відкрити веб-браузер і перейти за адресою
домену, щоб перевірити доступність налаштованого додатка.
Для запуску сервера розробленої системи потрібно скористатися
додатковим програмним забезпеченням PM2.
PM2 (Process Manager 2) - це популярний процес-менеджер для
виконання та керування Node.js додатками на сервері. Він дозволяє легко
запускати, моніторити та керувати Node.js застосунками.
Переконайтеся, що PM2 встановлено на сервері. Якщо ПЗ не
встановлено, потрібно встановити його глобально за допомогою npm (Node
Package Manager):
npm install -g pm2
Для запуску серверного додатка потрібно перейти до директорії, де
розташований Node.js додаток. Далі потрібно використати команду pm2 start
для запуску додатка через PM2:
pm2 start app.js
Де app.js - це основний файл Node.js додатку.