Дослідження і синтез web – додатку техноблог системного адміністратора

БОЙКО, Денис
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/8608
Title:	Дослідження і синтез web – додатку техноблог системного адміністратора
Authors:	ТАЗЕТДІНОВ, Валерій БОЙКО, Денис
Keywords:	ДОСЛІДЖЕННЯ;АНАЛІЗ;РОЗРОБКА;ТЕХНОЛОГІЯ;КОРИСТУВАЧІ
Issue Date:	2024
Abstract:	Мета роботи – дослідження синтез web – додатку техноблог системного адміністратора.Оцінка технологій розробки веб додатку, а також розробка про- грамного забезпечення що представляє з себе сайт блог сучасного виду. Об’єкт дослідження – єаналоги техноблогів, мови програмування, середи їх виконання а також бази даних. Практичне значення отриманих результатів – полягає у тому, щоб полегшити розробку майбутнім програмістам і надати оцінку кожній з техноло- гій для розробки веб-сайтів. Також для закріплення результату згідно з отри- маними даними було обрано технології розробки і синтезовано техноблог си- стемного адміністратора. Було досліджено деякі технології розробки і на практиці порівняно їх між собою. В першому розділі проводиться аналіз існуючих техноблогів, збір інформації про них. Розробка системи критеріїв і їх оцінка. В другому розділі було детально проаналізовано стектехнологій, які активно використовуються у веброзробці, а саме HTML, JS,PosgreSQL. Третій розділ присвячений моделюванню та синтезу додатку, а також ро- зібрано основні функції. Змодельовано всі аспекти роботи додатку. В четвертому розділі було досліджено технічні аспекти додатку, розі- брано його роботу, представлено графічно у вигляді діаграм для більш зручної демонстрації. П’ятий розділ присвячений дослідженню веб додатку техноблог, було роз- роблено його спочатку старим легким способом. Після цього його було про- аналізовано, визначено його слабкі місця. І нарешті виправлено застарілі методи, доведено код до охайного вигляду, в результаті покращився захист даних, читаємість коду, а також швидкодія серверу. Метою шостого розділу було тестування додатку. Було використано прості юніт тести, а також продемонстровано роботу додатку і описано всі мо- жливості з описом і інструкцію до додатку.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/8608
Appears in Collections:	123 Комп’ютерна інженерія (Комп'ютерні системи та мережі)
Files in This Item:
File	Description	Size	Format
1_ТИТУЛКА_Бойко-merged.pdf Restricted Access		7.59 MB	Adobe PDF	View/Open Request a copy
Show full item record
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНОЇ БЕЗПЕКИ ТА КОМП’ЮТЕРНОЇ ІНЖЕНЕРІЇ
Пояснювальна записка
до кваліфікаційної роботи магістра
на тему: «Дослідження і синтез web – додатку
техноблог системного адміністратора»
ЧДТУ. 242324.001 ПЗ
Виконав: студент 2 курсу, групи МКМ-2305
спеціальності 123 – Комп’ютерна інженерія
за освітньою програмою – Комп’ютерні системи
та мережі
Денис БОЙКО
Керівник
кандидат технічних наук, доцент
Валерій ТАЗЕТДІНОВ
Н. контроль
Світлана ГРЕСЬКО
Рецензент
к.т.н., доцент, доцент кафедри комп’ютерної
інженерії та інформаційних технологій
Черкаського державного бізнес коледжу
Марія ЗАХАРОВА
«ЗАХИСТ ДОЗВОЛЯЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор ___________ Віра БАБЕНКО
Черкаси 2024 року
Форма № Н-9.01
Черкаський державний технологічний університет
Факультет інформаційних технологій і систем
Кафедра інформаційної безпеки та комп‘ютерної інженерії
Освітньо-кваліфікаційний рівень Магістр
Спеціальність 123 – Комп’ютерна інженерія
Освітня програма Комп’ютерні системи та мережі
«ЗАТВЕРДЖУЮ»
Завідувач кафедри _____ Віра БАБЕНКО
«10» жовтня 2024 року
ЗАВДАННЯ
на кваліфікаційну роботу магістра студенту
Бойко Денису Юрійовичу
(прізвище, ім‘я, по батькові)
1. Тема роботи Дослідження і синтез web – додатку техноблог системного
адміністратора
Керівник роботи Тазетдінов Валерій Абударович, кандидат технічних наук, доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «07» жовтня 2024 р. № 299/04
2. Строк подання студентом роботи
3. Вихідні дані до роботи: Аналіз і інформація про стек технологій розробки
Web – додатків. Опис і оцінка використованих технологій. Синтез технологу.
Об’єкт дослідження — web – додаток техноблог системного адміністратора.
Предмет дослідження — процес визначення найефективнішого стеку технологій, який
забезпечить швидку та якісну розробку веб-додатків.
Тестування додатку
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
Розділ 1. Огляд та аналіз аналогів та технологій розробки
Розділ 2. Опис обраних технологій програмування
Розділ 3. Синтез техноблогу
Розділ 4. Дослідження web – додатку Техноблог системного адміністратора
Розділ 5. Дослідження серверу, його оптимізація і рефакторинг
Розділ 6. Тестування програмного забезпечення
Висновки
Список використаних джерел. Додатки
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів):
Додаток А Специфікація
Додаток Б Текст програм
Додаток В Інструкція користувача
6. Консультанти розділів роботи
Підпис, дата
Розділ Прізвище, ініціали та
посада завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 10 жовтня 2024 року
КАЛЕНДАРНИЙ ПЛАН
№ з/п Назва етапів кваліфікаційної роботи магістра Строк виконання
етапів роботи Примітка
1 Постановка задачі 03.09 – 10.09 виконано
2 Підбір матеріалів 11.09 – 30.09 виконано
3 Аналіз шляхів вирішення поставленої задачі 10.10 – 15.10 виконано
4 Розрахунок основних параметрів роботи 16.10 – 25.10 виконано
5 Вибір кінцевого варіанту проектного рішення 26.10 – 28.10 виконано
6 Оформлення первісної редакції роботи 29.10 – 05.11 виконано
7 Узгодження прийнятих проектних рішень з виконано
керівником 06.11 – 15.11
8 Оформлення пояснювальної записки роботи в
кінцевій редакції 16.11 – 30.11 виконано
9 Подання роботи на відгук та рецензування 03.12.24 виконано
10 Захист роботи 17.12.2024
Студент-магістрант __________________________ Денис БОЙКО
(підпис)
Керівник роботи ___________________________ Валерій ТАЗЕТДІНОВ
(підпис)
АНОТАЦІЯ
Мета роботи – дослідження синтез web – додатку техноблог системного
адміністратора.Оцінка технологій розробки веб додатку, а також розробка про-
грамного забезпечення що представляє з себе сайт блог сучасного виду.
Об’єкт дослідження – єаналоги техноблогів, мови програмування,
середи їх виконання а також бази даних.
Практичне значення отриманих результатів – полягає у тому, щоб
полегшити розробку майбутнім програмістам і надати оцінку кожній з техноло-
гій для розробки веб-сайтів. Також для закріплення результату згідно з отри-
маними даними було обрано технології розробки і синтезовано техноблог си-
стемного адміністратора. Було досліджено деякі технології розробки і на
практиці порівняно їх між собою.
В першому розділі проводиться аналіз існуючих техноблогів, збір
інформації про них. Розробка системи критеріїв і їх оцінка.
В другому розділі було детально проаналізовано стектехнологій, які
активно використовуються у веброзробці, а саме HTML, JS,PosgreSQL.
Третій розділ присвячений моделюванню та синтезу додатку, а також ро-
зібрано основні функції. Змодельовано всі аспекти роботи додатку.
В четвертому розділі було досліджено технічні аспекти додатку, розі-
брано його роботу, представлено графічно у вигляді діаграм для більш зручної
демонстрації.
П’ятий розділ присвячений дослідженню веб додатку техноблог, було роз-
роблено його спочатку старим легким способом. Після цього його було про-
аналізовано, визначено його слабкі місця. І нарешті виправлено застарілі
методи, доведено код до охайного вигляду, в результаті покращився захист
даних, читаємість коду, а також швидкодія серверу.
Метою шостого розділу було тестування додатку. Було використано
прості юніт тести, а також продемонстровано роботу додатку і описано всі мо-
жливості з описом і інструкцію до додатку.
Ключові слова: ДОСЛІДЖЕННЯ, АНАЛІЗ, РОЗРОБКА, ТЕХНОЛОГІЯ,
КОРИСТУВАЧІ.
ANNOTATION
The purpose of the work is to study the synthesis of a web application for a
system administrator's technoblog. Evaluation of web application development tech-
nologies, as well as software development that is a modern blog site.
Object of research - analogs of technoblogs, programming languages, their ex-
ecution environments and databases.
The practical significance of the results obtained is to facilitate the develop-
ment of future programmers and to evaluate each of the technologies for website de-
velopment. In addition, to consolidate the result according to the data obtained, devel-
opment technologies were selected and a system administrator's technoblog was syn-
thesized. Some development technologies were investigated and compared with each
other in practice.
The first section analyzes existing technoblogs and collects information about
them. A system of criteria was developed and evaluated.
The second section analyzes in detail the stack of technologies that are actively
used in web development, namely HTML, JS, PosgreSQL.
The third section is devoted to the modeling and synthesis of the application, as
well as the main functions. All aspects of the application are modeled.
In the fourth chapter, the technical aspects of the application were studied, its
operation was analyzed, and presented graphically in the form of diagrams for a more
convenient demonstration.
The fifth chapter is devoted to the study of the technoblog web application,
which was developed first in the old easy way. After that, it was analyzed and its
weaknesses were identified. Finally, outdated methods were fixed, the code was
brought to a neat look, and as a result, data protection, code readability, and server
performance improved.
The purpose of the sixth chapter was to test the application. We used simple
unit tests, demonstrated the application's operation, and described all the features with
a description and instructions for the application.
Keywords: RESEARCH, ANALYSIS, DEVELOPMENT, TECHNOLOGY,
USERS.
3
ЗМІСТ
ВСТУП………………………………………………………………………………6
РОЗДІЛ 1 ОГЛЯД ТА АНАЛІЗ АНАЛОГІВ ТА ТЕХНОЛОГІЙ РОЗРОБКИ......8
1.1 Аналіз існуючих аналогів...........................................................................8
1.1.1 TechCrunch ..........................................................................................9
1.1.2 The Verge...........................................................................................10
1.1.3 Wired..................................................................................................11
1.1.4 Engadget.............................................................................................12
1.1.5 Ars Technica.......................................................................................14
1.2 Система критеріїв і оцінка техноблогів .................................................. 15
1.3 Аналіз мов програмування.......................................................................19
1.4 Оцінка мов програмування для веброзробки..........................................19
1.5 Аналіз та оцінка IDE для веброзробки....................................................23
1.7 Аналіз і оцінка баз даних..........................................................................29
1.8 Висновок до розділу 1...............................................................................33
РОЗДІЛ 2 ОПИС ОБРАНИХ ТЕХНОЛОГІЙ ПРОГРАМУВАННЯ....................35
2.1 Опис HTML................................................................................................35
2.1.1 Історія та еволюція HTML...............................................................36
2.1.2 Технічні аспекти HTML...................................................................36
2.1.3 Використання HTML........................................................................37
2.1.4 Переваги та недоліки HTML..........................................................38
2.2 Опис мови JavaScript.................................................................................38
2.2.1 Історія розвитку JavaScript ..............................................................39
2.2.2 Технічні аспекти JavaScript ............................................................. 41
2.2.3 Сфери застосування JavaScript........................................................42
2.2.4 Переваги та недоліки JavaScript......................................................42
2.2.5 Node.js................................................................................................43
2.3 Опис PostgreSQL........................................................................................44
4
2.3.1 Історія розвитку PostgreSQL........................................................... 45
2.3.2 Технічні аспекти PostgreSQL...........................................................45
2.3.3 pgAdmin.............................................................................................47
2.3.4 Сфери застосування PostgreSQL.....................................................48
2.4 Висновок до розділу 2...............................................................................49
РОЗДІЛ 3 СИНТЕЗ ТЕХНОБЛОГУ........................................................................51
3.1 Обґрунтування вибору засобів реалізації................................................51
3.2 Опис структурної (функціональної) схеми.............................................52
3.3 Опис логічної схеми системи...................................................................53
3.4 Розробка бази даних..................................................................................55
3.5 Розробка інтерфейсу користувача ........................................................... 59
3.6 Опис розробки програмних компонентів................................................61
3.7 Висновок до розділу 3...............................................................................69
РОЗДІЛ 4 ДОСЛІДЖЕННЯ ВЕБ ДОДАТКУ ТЕХНОБЛОГ................................71
4.1 Опис предметної області .......................................................................... 71
4.1.1 Область моделювання. Модель області. Глосарій термінів.........71
4.1.2 Елементи Техноблогу.......................................................................73
4.1.3 Робоча область моделювання..........................................................74
4.2 Дослідження та аналіз вимог....................................................................76
4.3 Аналіз логічної структури програмного комплексу..............................80
4.3.1 Діаграми класів.................................................................................80
4.3.2 Діаграми пакетів...............................................................................81
4.4 Архітектурне проектування......................................................................83
4.4.1 Діаграма компонентів ......................................................................83
4.4.2 Розгортання програмної системи на апаратних засобах. ............. 84
4.5 Дослідження поведінки системи..............................................................89
4.5.1 Діаграма діяльності ..........................................................................89
4.5.2 Діаграма послідовності....................................................................91
4.5.3 Діаграма комунікації........................................................................92
5
4.5.4 Діаграма скінченого автомату.........................................................93
4.6 Висновок до розділу 4.............................................................................94
РОЗДІЛ 5 ДОСЛІДЖЕННЯ СЕРВЕРУ, ЙОГО ОПТИМІЗАЦІЯ ТА
4
РЕФАКТОРИНГ........................................................................................................95
5.1 Аналіз коду.................................................................................................95
5.2 Розбір коду та план оптимізації...............................................................99
5.3 Процес рефакторингу................................................................................99
5.3.1 Передача даних через метод POST.................................................99
5.3.2 SQL запити......................................................................................101
5.3.3 RESTful API .................................................................................... 102
5.4 Результати дослідження і оптимізації...................................................103
5.5 Висновок до розділу 5.............................................................................107
РОЗДІЛ 6 ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ........................109
6.1 Модульне тестування..............................................................................109
6.2 Інтеграційне тестування..........................................................................112
6.3 Системне тестування...............................................................................113
6.4 Приймальне тестування..........................................................................116
6.5 Висновок до розділу 6.............................................................................120
ВИСНОВКИ.............................................................................................................122
СПИСОК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ.....................................124
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ...............................................................125
ДОДАТКИ:
А – 482.ЧДТУ.42324-01 Дослідження і синтез web – додатку
техноблог системного адміністратора
6
ВСТУП
Актуальність дослідження і розробки проекту інформаційного блогу
зумовлена необхідністю поширювати знання серед людей, які працюють у цих
сферах або цікавляться ними. Цей інструмент може бути корисним для всіх,
хто працює з комп'ютерами та технологіями. Доступ до своєчасної інформації
дозволяє краще прогнозувати потреби ринку в програмному забезпеченні та
технічних рішеннях.
У сучасну цифрову епоху, коли суспільство стає все більш
взаємопов'язаним і залежним від технологій, доступ до більшості інформації
здійснюється через електронні засоби масової інформації. Для багатьох людей
блоги та інформаційні веб-сайти є ключовими джерелами знань. По суті, блог
– це інформаційний онлайн-щоденник, що складається із записів, які можуть
містити текст, ілюстрації або мультимедійні матеріали, авторами яких є одна
або кілька осіб. На відміну від особистих щоденників, блоги призначені для
читання та взаємодії з певною аудиторією.Питання розробки веб-додатків у
різний час досліджували різні вчені: Тім Бернерс, Брендан Айк, Майкл Фаулер
та ін.
Цей проект буде зосереджений на дослідженні та синтезу техноблогу,
сайту зосередженого на електроніці та комп'ютерних науках. Розробка
охоплюватиме методи та інструменти для створення веб-сайтів, дизайну та
оцінки актуальності різних мов веб-розробки. Проект має на меті донести
цінну інформацію до користувачів, дати уявлення про ведення блогу та
проаналізувати тенденції технологічного ринку. Крім того, він пропонуватиме
освітній контент, підвищуючи комп'ютерну грамотність користувачів за
допомогою посібників.
Метою цього проекту є дослідження синтез web – додатку техноблог
системного адміністратора. Для досягнення цієї мети будуть виконані
наступні завдання з розробки:
7
1. Аналіз переваг та недоліків подібних існуючих платформ, щоб
визначити майбутній напрямок проекту.
2. Аналіз технологій розробки, оцінка їхніх переваг та недоліків.
3. Дослідження веб - додатку техноблог
4. Розробка продукту з акцентом на методи оптимізації.
5. Тестування готової системи.
6. Документування результатів розробки.
Об’єкт дослідження — web – додаток техноблог системного
адміністратора
Предмет дослідження — процес визначення найефективнішого стеку
технологій, який забезпечить швидку та якісну розробку веб-додатків.
Наукова новизна – Автором було зібрано інформацію про технології,
обґрунтовано теоретичні аспекти їх вибору, а також розроблено систему їх
оцінки. Сформульовано практичні рекомендації щодо їх ефективного
використання. Виконано аналіз та порівняння сучасних підходів і технологій
для веб-розробки, що дозволяє визначити найбільш доцільні рішення для
створення веб-додатків.
Результатом роботи є аналіз мов програмування, серед виконання а
також аналогів та синтезований блог, з гнучким шаблоном, який можна
адаптувати до різних тем. Розроблений з використанням сучасної мови
програмування, блог пропонує посилений захист інформації порівняно з
існуючими платформами. Крім того, він підтримує більше функцій і надає
більше можливостей для кастомізації. Результати роботи пройшли апробацію
на міжнародній науково-практичній Інтернет-конференції «ІННОВАЦІЇ ТА
ПЕРСПЕКТИВНІ ШЛЯХИ РОЗВИТКУ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ
(ІПШРІТ-2024)». [1]
8
РОЗДІЛ 1 ОГЛЯД ТА АНАЛІЗ АНАЛОГІВ ТА ТЕХНОЛОГІЙ
РОЗРОБКИ
1.1 Аналіз існуючих аналогів
До аналізу існуючих блог-сайтів можна підходити з різних боків,
наприклад, з точки зору дизайну, контенту, технічних елементів тощо. Однак,
успішні блоги часто мають деякі ключові характеристики:
 Якісний контент: Блоги, які пропонують цікаву та корисну
інформацію, як правило, приваблюють велику аудиторію та мають
високий трафік. Контент повинен бути оригінальним, привабливим і
актуальним для читачів.
 Зручний дизайн: Дизайн блогу повинен бути візуально привабливим і
зручним для навігації. Важливі елементи, такі як навігаційне меню і
рядок пошуку, повинні бути доступними і організованими в рамках
чистого, зрозумілого макета.
 SEO-оптимізація: Блог повинен бути оптимізований для пошукових
систем, щоб його було легко знайти. Ефективні блоги включають
ключові слова, мета-теги та інші SEO-стратегії для підвищення
видимості та трафіку.
 Активна спільнота: Блоги з активною аудиторією, яка бере участь в
обговоренні, коментуючи та ділячись, часто є більш привабливими.
Увімкнення опцій коментування та поширення в соціальних мережах
може сприяти створенню живої, інтерактивної спільноти.
При розробці будь-якого веб-сайту або додатку розробнику важливо
вивчити існуючі рішення в цій галузі, щоб зрозуміти, які функції є успішними.
Щоб ефективно побудувати наш проект, ми проаналізуємо поточні додатки,
які слугуватимуть корисними порівняннями.
Для аналізу було обрано основні найпопулярніші техноблоги світу,
розроблено систему оцінок і оцінено їх зі сторони фінального користувача.
9
1.1.1. TechCrunch
TechCrunch[2] — це американський вебсайт, заснований у 2005 році,
який зосереджений на новинах технологій, стартапах, інвестиціях та
венчурному капіталі. Блог активно висвітлює події в світі технологічних
компаній, зокрема новини стартапів, нові продукти та інновації.
Рисунок 1.1 – Вигляд сайту «TechCrunch»
Рисунок 1.2 – Вигляд сайту «TechCrunch»
10
Сильні сторони:
 Фокус на стартапах та інвестиціях: TechCrunch є ключовим ресурсом
для інвесторів та підприємців, що шукають останні новини про
стартапи та технологічні інновації.
 Глибокі аналізи: Регулярно публікуються матеріали про ринкові
тренди, фінансові огляди стартапів та нові бізнес-моделі.
 Значні інтерв'ю: TechCrunch часто бере інтерв'ю у лідерів
технологічних компаній та венчурних капіталістів, надаючи читачам
інсайти з перших вуст.
Додаткова інформація: TechCrunch не тільки публікує новини, але й
організовує події, такі як TechCrunch Disrupt, де стартапи змагаються за
можливість отримати інвестиції від венчурних капіталістів. Це робить сайт
важливим майданчиком для інвесторів і підприємців, а також дає додатковий
авторитет до контенту.
1.1.2 The Verge
The Verge[3] був заснований у 2011 році компанією Vox Media і став
однією з найпопулярніших платформ для оглядів технологій, новин про науку,
культуру та інші аспекти сучасного світу. Блог поєднує огляди гаджетів,
новини про технології, а також соціальні, культурні та політичні аспекти,
пов'язані з інноваціями.
Рисунок 1.3 – Вигляд сайту «The Verge»
11
Сильні сторони:
 Широка тематика: Окрім традиційних новин про технології, The
Verge публікує матеріали про науку, культуру, бізнес і навіть
політику. Це дає можливість обговорювати новини з різних точок
зору.
 Візуальна складова: The Verge відомий своїми стильними та
сучасними дизайнами сайтів та відеооглядами, що робить контент
більш привабливим та доступним.
 Мультимедійний контент: Вебсайт активно використовує відео,
подкасти і графіку для доповнення текстових статей. Це робить
споживання контенту більш динамічним і зручним для різних типів
аудиторій.
Додаткова інформація: The Verge став популярним завдяки своїй
здатності інтегрувати технології з поп-культурою та суспільними трендами.
Блог часто публікує огляди на нові гаджети та з’являється у списках кращих
техноблогів за версією популярних медіа.
1.1.3 Wired
Wired [4] — це американський журнал, який з 1993 року публікує
матеріали про технології, бізнес, науку та культуру. Wired зазвичай публікує
довгі аналітичні статті, які надають глибокий контекст і огляд глобальних
технологічних тенденцій.
Додаткова інформація: Wired вважається більш «глибоким» і
«розумним» техноблогом серед популярних медіа. Він має високий рівень
авторитету, завдяки чому став впливовим джерелом для тих, хто цікавиться не
лише технологіями, але й їх впливом на суспільство та культуру.
12
Рисунок 1.4 – Вигляд сайту «Wired»
Сильні сторони:
 Глибокий контекст і аналітика: Wired славиться своїм фокусом на
глибокому дослідженні великих технологічних змін, таких як
розвиток штучного інтелекту, блокчейн, біотехнології та інші.
 Інтерв'ю з лідерами індустрії: Wired регулярно публікує інтерв'ю з
впливовими фігурами, що дає читачам унікальну перспективу на
події в світі технологій.
 Академічний підхід: Завдяки аналітичним статтям та ретельному
підходу до дослідження Wired часто публікує матеріали, що можуть
бути використані для наукових та академічних цілей.
1.1.4 Engadget
Engadget [5] був заснований у 2004 році і відомий своєю орієнтацією на
огляди технологічних продуктів, від смартфонів до побутових гаджетів. Він
активно висвітлює новини технологічного ринку, огляди пристроїв і інновації
в технічному світі.
13
Рисунок 1.5 – Вигляд сайту «Engadget»
Рисунок 1.6 – Вигляд сайту «Engadget»
Сильні сторони:
 Широкий спектр продуктів: Engadget охоплює величезну кількість
гаджетів і технологічних новинок, що дає можливість читачам
знайти огляди на практично будь-який сучасний пристрій.
14
 Простота і доступність контенту: Engadget використовує просту та
зрозумілу мову, що робить контент доступним навіть для тих, хто не
має технічного досвіду.
 Чітка структура оглядів: Огляди гаджетів на Engadget часто
включають таблиці з порівнянням характеристик, оцінками
продуктивності та рейтингами, що допомагає користувачам швидко
зрозуміти переваги продукту.
Додаткова інформація: Engadget також є одним з найбільших сайтів для
новин і оглядів в галузі техніки. Вебсайт активно публікує новини та огляди
відомих брендів, таких як Apple, Samsung та Google, і слідкує за найновішими
технологічними трендами.
1.1.5 Ars Technica
Ars Technica [6] — це один з найстаріших техноблогів, заснований у
1998 році, який фокусується на глибокому аналізі технологій, комп'ютерних
наук, інженерії та програмного забезпечення.
Рисунок 1.7 – Вигляд сайту «Ars Technica»
Сильні сторони:
15
 Глибокі технічні огляди: Ars Technica спеціалізується на детальних
оглядах продуктів та технологій, часто звертаючи увагу на аспекти
продуктивності, безпеки та довговічності.
 Експертний підхід: Журналісти Ars Technica мають високий рівень
кваліфікації і часто пишуть для аудиторії з технічним фоном, що
дозволяє надавати глибокі та точні технічні деталі.
 Дослідження нових технологій: Ars Technica активно досліджує нові
технології, такі як криптовалюти, штучний інтелект, нові процесори
та системи зберігання даних.
Додаткова інформація: Ars Technica є особливо популярним серед
технічних спеціалістів і програмістів завдяки своїм детальним оглядам
апаратних і програмних продуктів. Вебсайт регулярно публікує статті з
новинами, що мають високу технічну точність.
1.2 Система критеріїв і оцінка техноблогів
Щоб здійснити порівняння техноблогів, можна використовувати кілька
основних критеріїв, що дозволяють оцінити якості та ефективність кожного
ресурсу. Ці критерії допомагають зрозуміти, чим кожен блог відрізняється від
інших, а також оцінити його сильні та слабкі сторони.
Ключові критерії для оцінки техноблогів
1. Широта тематики
 Оцінка охоплення різних категорій: технології, культура, наука,
бізнес, політика, стартапи.
 Важливість цього критерію полягає в тому, чи здатен блог залучати
широку аудиторію, не обмежуючись вузьким колом користувачів.
2. Глибина контенту
 Оцінка рівня аналітики та деталізації публікацій (огляди продуктів,
аналіз ринку, технічні статті).
16
 Цей критерій важливий для блогів, орієнтованих на професіоналів і
технічних ентузіастів, де важливі точність і експертні огляди.
3. Актуальність та швидкість публікацій
 Час, необхідний для публікації нових новин, реакція на події в
реальному часі.
 Визначає, наскільки оперативно блог надає актуальну інформацію.
4. Мультимедійність
 Використання відео, графіки, подкастів та інших мультимедійних
форматів для підкріплення текстового контенту.
 Цей критерій важливий для блогів, що надають додаткову візуальну
або слухову інформацію, що сприяє кращому сприйняттю матеріалів.
5. Простота і доступність контенту
 Оцінка того, наскільки легко користувачі можуть зрозуміти і
використовувати інформацію з блогу (якість мови, зрозумілість
викладу).
 Важливо для залучення ширшої аудиторії, включаючи користувачів
без технічної підготовки.
6. Авторитетність та надійність
 Оцінка джерел інформації, точність публікацій, репутація блогу.
 Важливо для блогів, які прагнуть бути надійними та авторитетними
джерелами інформації.
7. Інтерактивність та співтовариство
 Оцінка активності користувачів у коментарях, обговореннях,
наявність форумів, інтерактивних елементів (наприклад, опитувань
або можливість задавати питання).
 Важливий критерій для створення активного та залученого
співтовариства.
17
Рисунок 1.8 – Таблиця порівняння техноблогів
Ключове з порівняння:
 TechCrunch демонструє найкращу актуальність та швидкість
публікацій і авторитетність, що робить його ідеальним ресурсом для
тих, хто слідкує за стартапами та інвестиціями.
 The Verge є найбільш широким за тематикою та має високу
мультимедійність, що робить його привабливим для читачів, які
шукають не тільки технічні новини, а й культурні та соціальні
аспекти технологій.
 Wired вирізняється глибиною контенту та авторитетністю,
орієнтуючись на більш інтелектуальну і наукову аудиторію.
 Engadget має високу доступність контенту і мультимедійність,
роблячи його чудовим вибором для звичайних споживачів, які
шукають прості огляди та новини.
 Ars Technica оцінюється високо за глибину контенту і
авторитетність, що робить його одним з найкращих виборів для
технічних фахівців і програмістів.
Ці критерії дозволяють обрати блог, який найкраще відповідає потребам
різних аудиторій, від звичайних користувачів до професіоналів.
Результати аналізу
Ці техноблоги мають різні підходи до публікацій, але всі вони є
важливими ресурсами для тих, хто цікавиться технологіями. TechCrunch
18
спеціалізується на стартапах та інвестиціях, The Verge привертає увагу своєю
мультимедійною та культурною експансією, Wired пропонує глибокі
аналітичні матеріали, Engadget забезпечує доступні огляди продуктів, а Ars
Technica орієнтований на глибокий технічний контент для професіоналів.
Кожен з цих блогів має свою аудиторію, стиль і цілі, що робить їх
незамінними в сучасному світі технологій.
Після дослідження даних аналогівбуло прийнято що для синтезу власного
блогу слід дотримуватися наступних принципів:
 Навігація повинна бути максимально простою для користувачів.
 Сторінки каталогу повинні бути логічно організовані та добре
оптимізовані.
 Сайт повинен бути зручним для користувачів, навіть для тих, хто має
мінімальний технічний досвід.
Деякі типові помилки включають:
 Постійне створення нових сторінок без потреби
 Дублювання елементів за назвою або змістом
 Розміщення елементів з підкатегорій безпосередньо в основних
категоріях
 Наявність неповних сторінок або категорій з дуже малою кількістю
товарів
 Нерівномірний розподіл товарів між категоріями
 Розміщення товарів та аксесуарів на одній сторінці
 Обмежені можливості або параметри фільтрації
Створення ефективного макету сайту - це складний і трудомісткий
процес. Проаналізувавши існуючі приклади, ми визначили ключові елементи,
на які слід звернути увагу, вибравши найкращі функції з кожного з них.
19
1.3Аналіз мов програмування
Для успішного створення веб додатку потрібно вибрати середовище
розробки та мови програмування, тому для цього вибору було
проаналізовано основні мови програмування та їх середовища з найбільш
популярних на даний час.
Для аналізу візьмемо рейтинг мов програмування з вільного доступу в
інтернеті, з новини dou.ua. [7]
Рисунок 1.9 – Рейтинг мов програмування
1.4 Оцінка мов програмування для веброзробки
1. JavaScript [8] (Загальний бал: 9.15)
20
 Легкість вивчення (9): JavaScript має простий синтаксис, що робить
його доступним для новачків.
 Універсальність (10): Використовується як на стороні клієнта, так і
на сервері (через Node.js), що робить його універсальним.
 Ширина використання (10): Є однією з найпопулярніших мов для
веброзробки з великою спільнотою.
 Бібліотеки та фреймворки (10): Множинні бібліотеки (наприклад,
React, Angular, Vue) полегшують розробку.
 Продуктивність (8): Показує хорошу продуктивність, але може мати
проблеми з оптимізацією в деяких випадках.
 Підтримка (9): Є величезна кількість ресурсів і документації.
 Безпека (8): Є ризики безпеки, але існують інструменти для їх
мінімізації.
 Тестування (8): Підтримка різних інструментів для тестування,
зокрема Jest і Mocha.
 Кросплатформеність (10): Підходить для різних платформ і
пристроїв.
2. Python [9] (Загальний бал: 8.95)
 Легкість вивчення (10): Дуже простий синтаксис, що робить його
ідеальним для новачків.
 Універсальність (9): Використовується в багатьох сферах, не лише у
веброзробці (наука, автоматизація, штучний інтелект).
 Ширина використання (9): Зростаюча популярність, особливо в сфері
даних і науки.
 Бібліотеки та фреймворки (9): Множинні фреймворки для
веброзробки, такі як Django та Flask.
 Продуктивність (7): Може бути повільнішим в порівнянні з
компільованими мовами.
 Підтримка (9): Величезна спільнота та ресурси для навчання.
21
 Безпека (8): Має хороші можливості для забезпечення безпеки, хоча
залежать від фреймворків.
 Тестування (9): Підтримує багато інструментів для тестування, таких
як pytest.
 Кросплатформеність (9): Підходить для Windows, macOS та Linux.
3. Ruby [10] (Загальний бал: 8.6)
 Легкість вивчення (8): Легко вчити, але може бути не таким простим,
як Python.
 Універсальність (8): Використовується переважно для веброзробки.
 Ширина використання (7): Популярність зменшилася в останні роки,
але все ще є активна спільнота.
 Бібліотеки та фреймворки (9): Ruby on Rails є дуже потужним
фреймворком для веброзробки.
 Продуктивність (7): Може бути повільніше, ніж інші мови.
 Підтримка (8): Є хороша документація та спільнота.
 Безпека (8): Має хороші інструменти для забезпечення безпеки.
 Тестування (9): Включає в себе потужні інструменти для тестування.
 Кросплатформеність (8): Підходить для всіх основних платформ.
4. PHP [11] (Загальний бал: 8.15)
 Легкість вивчення (8): Простий синтаксис, доступний для новачків.
 Універсальність (7): Переважно використовується для веброзробки.
 Ширина використання (9): Один із найбільш поширених мов для веб-
сайтів.
 Бібліотеки та фреймворки (8): Є кілька популярних фреймворків,
таких як Laravel та Symfony.
 Продуктивність (7): Добра продуктивність, але може бути
повільнішою у великих проектах.
 Підтримка (8): Величезна кількість ресурсів та документації.
 Безпека (7): Має вразливості, але з розвитком фреймворків безпека
покращується.
22
 Тестування (7): Підтримка деяких інструментів для тестування, але
не така широка, як у Python.
 Кросплатформеність (8): Підходить для всіх основних платформ.
5. TypeScript [12] (Загальний бал: 8.3)
 Легкість вивчення (8): Складніший синтаксис в порівнянні з
JavaScript, але простіший, ніж багато інших мов.
 Універсальність (9): Використовується для фронтенд- та бекенд-
розробки.
 Ширина використання (9): Все більше популярний серед
розробників, особливо у проєктах, де використовується JavaScript.
 Бібліотеки та фреймворки (8): Сумісність з популярними JavaScript-
фреймворками.
 Продуктивність (8): Відмінна продуктивність завдяки компіляції в
JavaScript.
 Підтримка (9): Гарна документація та активна спільнота.
 Безпека (8): Типізація дозволяє зменшити кількість помилок.
 Тестування (8): Підтримує багато інструментів для тестування.
 Кросплатформеність (9): Підходить для всіх основних платформ.
6. Go [13] (Загальний бал: 8.0)
 Легкість вивчення (8): Простий синтаксис, що робить його
доступним для новачків.
 Універсальність (8): Використовується для веброзробки, системного
програмування, мікросервісів.
 Ширина використання (7): Поступово набирає популярності, але ще
не є такою масовою, як інші мови.
 Бібліотеки та фреймворки (7): Має кілька популярних бібліотек, але
менше фреймворків.
 Продуктивність (9): Висока продуктивність завдяки компіляції.
 Підтримка (7): Активна спільнота, але документація може бути
обмеженою в деяких аспектах.
23
 Безпека (8): Має хороші можливості для забезпечення безпеки.
 Тестування (7): Підтримує тестування, але інструменти можуть бути
обмеженими.
 Кросплатформеність (8): Підходить для Windows, macOS та Linux.
Також було додано коефіцієнт корисності згідно поставленої задачі і
результати дослідження було занесено в таблицю (рисунок 1.10).
Рисунок 1.10 – Таблиця оцінки мов програмування
Кожна з мов програмування має свої сильні та слабкі сторони, що
впливають на вибір в залежності від потреб конкретного проекту. JavaScript
залишається найпопулярнішою мовою для веброзробки, в той час як Python
та Ruby пропонують зручність для новачків. TypeScript і Go набирають
популярності, пропонуючи цікаві можливості для розробників.
1.5 Аналіз та оцінка IDE для веброзробки
1. Visual Studio Code[14] (Загальний бал: 9.05)
 Інтуїтивно зрозумілий інтерфейс (9): Visual Studio Code має простий
і зручний інтерфейс, що дозволяє швидко знайти необхідні функції.
 Продуктивність (8): Підтримує високу продуктивність, але може
бути дещо важчою для старих комп’ютерів.
 Підтримка мов програмування (10): Надзвичайно широкий вибір
підтримуваних мов програмування завдяки численним розширенням.
24
 Плагіни та розширення (10): Має величезну бібліотеку плагінів, які
розширюють функціонал редактора.
 Дебаггер (9): Вбудовані інструменти для дебагу забезпечують
легкість у відстеженні помилок.
 Автозавершення коду (9): Потужне автозавершення, яке допомагає
швидше писати код.
 Інструменти для тестування (8): Підтримує різні фреймворки для
тестування, хоча їх кількість обмежена у порівнянні з іншими IDE.
 Документація (10): Відмінна документація з багатьма прикладами.
 Спільнота (10): Величезна спільнота, що активно ділиться плагінами
та ресурсами.
 Кросплатформеність (10): Підходить для Windows, macOS і Linux.
2. PyCharm[15] (Загальний бал: 8.1)
 Інтуїтивно зрозумілий інтерфейс (8): Інтерфейс є зрозумілим, але
може бути складнішим для новачків.
 Продуктивність (7): Може споживати більше ресурсів системи, що
іноді впливає на продуктивність.
 Підтримка мов програмування (8): Основна підтримка Python, але
також підтримує інші мови.
 Плагіни та розширення (8): Має добру підтримку плагінів, але їх
менше, ніж у VS Code.
 Дебаггер (8): Включає потужний дебаггер, з можливістю крокування
по коду.
 Автозавершення коду (9): Сильне автозавершення, яке допомагає з
економією часу.
 Інструменти для тестування (9): Відмінні інструменти для
тестування, що включають інтеграцію з популярними
фреймворками.
 Документація (9): Документація є зрозумілою та детальною.
25
 Спільнота (9): Відзначається активною спільнотою, що підтримує
користувачів.
 Кросплатформеність (8): Працює на всіх основних платформах, але
потребує більше ресурсів.
3. RubyMine[16] (Загальний бал: 7.6)
 Інтуїтивно зрозумілий інтерфейс (8): Інтерфейс простий, але
новачкам може бути важко адаптуватися.
 Продуктивність (7): Може бути важким для старих систем.
 Підтримка мов програмування (7): Головна підтримка для Ruby, але
має обмежену підтримку інших мов.
 Плагіни та розширення (7): Підтримка плагінів обмежена у
порівнянні з іншими IDE.
 Дебаггер (8): Міцний дебаггер, що дозволяє ефективно шукати
помилки.
 Автозавершення коду (8): Достатньо добре функціонує, полегшуючи
написання коду.
 Інструменти для тестування (8): Пропонує хороші інструменти для
тестування, зокрема для RSpec.
 Документація (8): Якісна документація, хоча іноді може бути
недостатньо детальною.
 Спільнота (8): Досить активна спільнота, але не така велика, як у
інших IDE.
 Кросплатформеність (8): Підтримується на всіх основних
платформах.
4. PHPStorm[17] (Загальний бал: 7.7)
 Інтуїтивно зрозумілий інтерфейс (8): Зрозумілий інтерфейс, хоча
може бути перевантаженим для новачків.
 Продуктивність (7): Висока продуктивність, але може вимагати
значних ресурсів.
26
 Підтримка мов програмування (7): Переважно підтримує PHP, але
має обмежену підтримку інших мов.
 Плагіни та розширення (8): Може бути розширено через плагіни, але
їх менше, ніж у VS Code.
 Дебаггер (8): Потужні інструменти для дебагу, що дозволяють легше
виявляти помилки.
 Автозавершення коду (8): Ефективне автозавершення, що підвищує
продуктивність.
 Інструменти для тестування (8): Добре підтримує тестування,
зокрема PHPUnit.
 Документація (8): Документація є зрозумілою та детальною.
 Спільнота (8): Досить активна спільнота, що підтримує нових
користувачів.
 Кросплатформеність (8): Підходить для Windows, macOS і Linux.
5. Atom[18] (Загальний бал: 7.6)
 Інтуїтивно зрозумілий інтерфейс (8): Інтерфейс є простим і
зрозумілим.
 Продуктивність (8): Може бути повільним на старих комп'ютерах.
 Підтримка мов програмування (8): Широка підтримка мов
програмування завдяки плагінам.
 Плагіни та розширення (8): Велика кількість плагінів для додаткових
можливостей.
 Дебаггер (7): Відсутність вбудованого дебаггера може ускладнити
процес.
 Автозавершення коду (7): Автозавершення працює, але не так добре,
як у інших IDE.
 Інструменти для тестування (7): Обмежена підтримка інструментів
для тестування.
 Документація (7): Документація досить добре структурована.
 Спільнота (8): Активна спільнота, що пропонує безліч ресурсів.
27
 Кросплатформеність (9): Підходить для всіх основних платформ.
6. IntelliJ IDEA[19] (Загальний бал: 8.6)
 Інтуїтивно зрозумілий інтерфейс (8): Інтерфейс зрозумілий, але може
виглядати перевантаженим.
 Продуктивність (8): Висока продуктивність, але потребує значних
ресурсів.
 Підтримка мов програмування (9): Підтримує велику кількість мов,
особливо Java.
 Плагіни та розширення (9): Широкий вибір плагінів для розширення
можливостей.
 Дебаггер (9): Включає потужний дебаггер для Java та інших мов.
 Автозавершення коду (9): Високоякісне автозавершення для
швидкого написання коду.
 Інструменти для тестування (9): Відмінна підтримка тестування,
зокрема JUnit.
 Документація (8): Якісна документація з багатьма прикладами.
 Спільнота (9): Активна спільнота, що ділиться ресурсами та
плагінами.
 Кросплатформеність (9): Підходить для Windows, macOS і Linux.
7. Sublime Text[20] (Загальний бал: 6.75)
 Інтуїтивно зрозумілий інтерфейс (8): Простий і зрозумілий
інтерфейс, але відсутні деякі функції.
 Продуктивність (9): Дуже швидкий та легкий, добре працює на
старих комп'ютерах.
 Підтримка мов програмування (6): Обмежена підтримка мов
програмування без плагінів.
 Плагіни та розширення (6): Невелика кількість плагінів, що обмежує
функціональність.
28
 Дебаггер (6): Відсутність вбудованого дебаггера ускладнює
розробку.
 Автозавершення коду (6): Обмежене автозавершення, але працює.
 Інструменти для тестування (5): Відсутня підтримка тестування без
додаткових плагінів.
 Документація (6): Документація є, але може бути недостатньо
детальною.
 Спільнота (7): Активна, але не така велика, як у інших IDE.
 Кросплатформеність (8): Підходить для всіх основних платформ.
8. Notepad++ [21] (Загальний бал: 7.15)
 Інтуїтивно зрозумілий інтерфейс (9): Дуже простий і зрозумілий
інтерфейс, з якого легко почати.
 Продуктивність (9): Легкий та швидкий, добре працює навіть на
старих системах.
 Підтримка мов програмування (7): Підтримує основні мови, але має
обмежену функціональність для складних проєктів.
 Плагіни та розширення (6): Доступна кількість плагінів, але не так
багато, як у інших IDE.
 Дебаггер (5): Відсутність дебаггера обмежує можливості відстеження
помилок.
 Автозавершення коду (5): Автозавершення є, але досить базове.
 Інструменти для тестування (4): Відсутні вбудовані інструменти для
тестування.
 Документація (6): Документація достатня, але могла б бути більш
детальною.
 Спільнота (8): Активна спільнота, що пропонує підтримку та
ресурси.
 Кросплатформеність (8): Підходить для Windows; на інших
платформах працює через емулятори.
29
Рисунок 1.11 – Таблиця оцінки середовищ розробки
Результати дослідження
Кожна з IDE має свої сильні та слабкі сторони, які можуть вплинути на
вибір в залежності від потреб конкретного користувача. Visual Studio Code
виділяється своєю гнучкістю та величезною підтримкою мов, тоді як
Notepad++ є простим, але обмеженим інструментом для базових задач.
PyCharm, RubyMine та PHPStorm добре підходять для специфічних мов, але
можуть вимагати більше ресурсів.
1.7 Аналіз і оцінка баз даних
Для вибору бази даних для зберігання інформації було коротко
проаналізовано основні бази даних.
1. MySQL
НазваMySQL[22]
Тип: Реляційна база даних (RDBMS).
Особливості:
 Популярна через простоту у використанні.
 Підтримує транзакції та основні типи індексів.
 Добре інтегрується з популярними мовами програмування (PHP,
Python).
 Відкрита версія (Community Edition) є безкоштовною.
Переваги:
 Висока швидкість для читання та запису.
30
 Велика спільнота користувачів і доступна документація.
 Легка у розгортанні.
Недоліки:
 Менш гнучка порівняно з PostgreSQL.
 Не підтримує складні типи даних і розширені операції з JSON.
Сценарії використання:
 Веб-додатки, блоги (WordPress), системи управління контентом
(CMS).
 Електронна комерція (Shopify, Magento).
2. PostgreSQL
Назва : PostgreSQL[23]
Тип: Реляційна база даних (RDBMS).
Особливості:
 Підтримує складні типи даних (JSON, XML, геопросторові дані).
 Підтримує розширення для спеціалізованих задач.
 Висока відповідність стандартам SQL.
Переваги:
 Потужні можливості для складної обробки даних.
 Транзакції ACID забезпечують високу надійність.
 Масштабована та підходить для аналітичних запитів.
Недоліки:
 Складніше у використанні для новачків.
 Деякі операції можуть бути повільнішими порівняно з MySQL.
Сценарії використання:
 Аналітика великих обсягів даних, корпоративні системи,
геоінформаційні системи (GIS).
 Складні веб-додатки, які потребують роботи з JSON.
3. MongoDB
Назва:MongoDB[24]
31
Тип: Документо-орієнтована база даних (NoSQL).
Особливості:
 Дані зберігаються у вигляді документів JSON/BSON.
 Легка масштабованість.
 Не потребує фіксованої схеми.
Переваги:
 Висока продуктивність при роботі з неструктурованими даними.
 Легка інтеграція з сучасними веб-додатками.
 Гнучкість у зміні структури даних.
Недоліки:
 Не підтримує транзакції ACID у повному обсязі.
 Може займати більше пам’яті через дублювання даних.
Сценарії використання:
 Системи реального часу (чати, стрімінгові сервіси).
 Великі дані (Big Data) та аналітика.
4. SQLite
Назва: SQLite[25]
Тип: Вбудована база даних.
Особливості:
 Легка вага, працює без сервера.
 Дані зберігаються у звичайному файлі.
Переваги:
 Ідеально підходить для невеликих проєктів.
 Не потребує складного налаштування.
 Висока швидкість для локальних операцій.
Недоліки:
 Обмежена масштабованість.
 Не підходить для багатокористувацьких систем.
Сценарії використання:
32
 Мобільні додатки (iOS, Android).
 Локальні десктопні програми.
5. Microsoft SQL Server
Назва:Microsoft SQL Server[26]
Тип: Реляційна база даних (RDBMS).
Особливості:
 Тісна інтеграція з іншими продуктами Microsoft.
 Висока продуктивність і безпека.
 Підтримка аналітичних запитів через SQL Server Analysis Services
(SSAS).
Переваги:
 Підтримка складних бізнес-аналітичних задач.
 Зручний графічний інтерфейс для адміністрування.
 Інструменти для резервного копіювання та відновлення даних.
Недоліки:
 Дорогі ліцензії.
 Вимоги до високих ресурсів.
Сценарії використання:
 Корпоративні системи, фінансові платформи.
6. Oracle Database
Назва: Oracle Database[27]
Тип: Реляційна база даних (RDBMS).
Особливості:
 Потужна архітектура для високих навантажень.
 Підтримка функцій машинного навчання, аналітики.
Переваги:
 Надійна для масштабних систем.
 Високий рівень безпеки та управління доступом.
 Гнучкість у роботі з великими обсягами даних.
33
Недоліки:
 Дуже висока вартість ліцензій.
 Складність у навчанні та налаштуванні.
Сценарії використання:
 Великі корпорації, банківські системи, телекомунікації.
Було обрано кращі бази даних і проаналізовано більш детально,
результати внесено в таблицю (рисунок 1.12).
Рисунок 1.12 – Таблиця оцінки баз даних
1.8 Висновок до розділу 1
У розділі проведено комплексний аналіз сучасних техноблогів та
технологій, які використовуються для розробки веб-додатків. Було досліджено
п'ять популярних техноблогів – TechCrunch, The Verge, Wired, Engadget та
Ars Technica, що дозволило оцінити їх функціональні можливості, зручність
користування, дизайн та інтерактивність. Це дало змогу визначити ключові
особливості, які є стандартом у даній сфері, а також виокремити недоліки, які
можна врахувати при створенні власного блогу.
Розглянуто критерії оцінки техноблогів, серед яких особливу увагу
приділено зручності навігації, швидкодії, функціональності, інтеграції з
34
соціальними мережами та можливостям персоналізації. На основі цих
критеріїв розроблено систему оцінювання, яка допомогла у формуванні
технічного завдання для розробки веб-додатку.
У ході аналізу мов програмування досліджено особливості, переваги та
недоліки таких мов, як JavaScript, Python, Ruby, PHP, TypeScript, Java та
Go. Проведено їх порівняння за критеріями продуктивності, зручності
використання, популярності, сумісності з веб-фреймворками та підтримки
спільнотою. Це дало змогу обрати найбільш відповідний стек технологій для
розробки веб-додатку.
Дослідження інтегрованих середовищ розробки (IDE), таких як Visual
Studio Code, PyCharm, RubyMine, PHPStorm, Atom, IntelliJ IDEA, Sublime
Text та Notepad++, дало змогу визначити найзручніші та найефективніші
інструменти для розробників залежно від їхніх потреб. Оцінено
продуктивність, підтримку мов програмування та додаткові можливості цих
середовищ.
Особлива увага приділена базам даних, серед яких розглянуто
PostgreSQL, MongoDB, SQLite, Microsoft SQL Server та Oracle Database.
Порівняння виконувалося за критеріями швидкодії, масштабованості,
підтримки ACID-транзакцій та зручності інтеграції з веб-додатками.
У результаті проведеного аналізу було сформовано уявлення про
найкращі практики у сфері створення веб-додатків, визначено оптимальні
інструменти та технології, що забезпечують швидку, ефективну та якісну
розробку сучасного техноблогу. Ці дані стали основою для подальшої
реалізації проекту.
35
РОЗДІЛ 2 ОПИС ОБРАНИХ ТЕХНОЛОГІЙ ПРОГРАМУВАНЯЯ
2.1 Опис HTML
HTML (HyperText Markup Language) - це стандартизована мова розмітки,
яка використовується для відображення веб-сторінок у браузері. Браузери
отримують HTML-документ з сервера за допомогою протоколів HTTP/HTTPS
або відкривають його з локального сховища, інтерпретуючи код для
відображення видимого інтерфейсу на екрані.[28]
Елементи HTML формують основу веб-сторінок, дозволяючи
інтегрувати зображення, інтерактивні форми та інші об'єкти в макет сторінки.
HTML дозволяє структурувати вміст, розмічаючи текст за допомогою таких
елементів, як заголовки, абзаци, списки, посилання та цитати. Елементи
визначаються тегами, укладеними в кутові дужки, такими як <img /> або
<input /> для безпосереднього відображення вмісту, тоді як теги типу <p>
визначають структуру і можуть містити вкладені елементи. Хоча браузери не
відображають самі теги HTML, вони використовують їх для інтерпретації
вмісту сторінки.
HTML також може включати мови сценаріїв, такі як JavaScript, для
покращення поведінки та взаємодії веб-сторінок, тоді як CSS
використовується для стилізації та форматування контенту. З 1997 року
Консорціум Всесвітньої павутини (W3C), який наглядає за стандартами HTML
і CSS, рекомендує використовувати CSS замість вбудованого стилю
HTML.[29]
Вона визначає, як контент (текст, зображення, відео, мультимедіа)
відображатиметься у браузерах. HTML є базовим компонентом вебтехнологій
поряд із CSS і JavaScript. Його розвиток і широке впровадження сприяли
становленню сучасного Інтернету, доступного мільярдам людей.
36
2.1.1 Історія та еволюція HTML
HTML має багату історію, що відображає еволюцію Інтернету:
Ранні етапи розвитку
HTML був запропонований у 1991 році Тімом Бернерсом-Лі як стандарт
для обміну гіпертекстовими документами через Всесвітню павутину. Перша
версія включала лише 18 базових тегів, таких як <p>, <a>, <img>.
Становлення стандарту
HTML 2.0 (1995): Стандартна мова для ранніх вебсайтів. Включала
базові теги, форми, таблиці.
HTML 3.2 (1997): Вдосконалення роботи з таблицями, підтримка CSS і
початок використання JavaScript.
HTML 4.01 (1999): Три варіанти (Strict, Transitional, Frameset) для різних
потреб розробників. Включала підтримку мультимедіа, інтеграцію з CSS2.
Сучасний стандарт HTML5
HTML5 (випущений у 2014 році) значно розширив можливості:
Додав підтримку мультимедійних елементів: <audio>, <video>.
Нові семантичні теги: <article>, <section>, <header>, <footer>.
Підтримка сучасних вебтехнологій, таких як Canvas API, WebRTC.
Перспективи розвитку HTML
HTML має величезний потенціал для адаптації до нових технологій:
Віртуальна та доповнена реальність: Інтеграція з WebXR API для
створення VR/AR-застосунків.
Мобільна оптимізація: Удосконалення для роботи на мобільних
пристроях із низькою потужністю.
Підтримка доступності: Більший акцент на створенні сторінок,
доступних для людей із вадами зору та слуху.
Семантика та автоматизація: HTML буде ще більше адаптований для
роботи з AI та автоматизованими системами аналізу контенту.
37
2.1.2 Технічні аспекти HTML
Структура HTML-документа
HTML-документ складається з наступних частин:
<!DOCTYPE html><!-- Оголошення типу документа -->
<html lang="en"><!-- Кореневий елемент -->
<head><!-- Метаінформація -->
<meta charset="UTF-8">
<title>Назва сторінки</title>
</head>
<body><!-- Вміст сторінки -->
<h1>Заголовок</h1>
<p>Текст сторінки</p>
</body>
</html>
DOCTYPE визначає стандарт HTML.
Елементи <html>, <head>, <body> забезпечують структуру документа.
Типи тегів
Структурні теги: <div>, <header>, <footer>.
Текстові елементи: <h1>-<h6>, <p>, <span>.
Посилання та мультимедіа: <a>, <img>, <video>.
Інтерактивні елементи: <form>, <button>, <input>.
Семантика HTML
Семантичні елементи HTML5 забезпечують зрозумілу структуру, що
покращує SEO, доступність і полегшує розробку, існує декілька підходів
опису тегів:
Старі підходи: <div id="header">
Сучасні семантичні теги: <header>
2.1.3 Використання HTML
Створення вебсайтів
38
HTML — це основа будь-якого вебсайту. Разом із CSS і JavaScript
створює сучасні, інтерактивні сторінки.
Інтеграція з іншими технологіями
HTML легко інтегрується із сучасними фреймворками (React, Angular,
Vue.js). Також він використовується в мобільній розробці (наприклад, через
Cordova або Ionic).
Оформлення електронних листів
HTML дозволяє створювати шаблони листів, які відображаються
однаково у більшості поштових клієнтів.
Додатки на основі HTML
HTML використовується у програмах, таких як Electron, для створення
кросплатформних десктопних додатків.
2.1.4 Переваги та недоліки HTML
Переваги:
Простота навчання: Інтуїтивно зрозумілий синтаксис.
Універсальність: Підтримується всіма браузерами та пристроями.
Кросплатформенність: Працює на ПК, мобільних пристроях,
телевізорах.
Відкритість стандарту: Відсутність ліцензійних обмежень.
Сумісність із CSS і JavaScript: Забезпечує багатий користувацький
досвід.
Недоліки:
Не є мовою програмування: HTML не має умов, циклів або інших
конструкцій для логіки.
Обмежені можливості дизайну: Візуальні ефекти залежать від CSS.
Складність великих проєктів: HTML-документи можуть стати
громіздкими без належної структури.
39
Залежність від браузера: Деякі елементи можуть по-різному
відображатися в різних браузерах.
2.2 Опис мови JavaScript
JavaScript (JS) — це одна з найпопулярніших мов програмування, яка
використовується для створення інтерактивних і динамічних вебсайтів. Як
основний елемент сучасної веброзробки поряд з HTML і CSS, JavaScript
забезпечує інтерактивність, динамічну зміну контенту та багатий
користувацький досвід.
це динамічна, заснована на прототипах, об'єктно-орієнтована мова, яка
відповідає стандарту ECMAScript. Вона в основному використовується для
написання веб-скриптів на стороні клієнта, дозволяючи користувачам
взаємодіяти зі сторінкою, керувати браузером, асинхронно обмінюватися
даними з серверами, а також змінювати структуру і стиль веб-сторінок.
JavaScript, динамічно типізована і слаботипізована мова, підтримує
успадкування на основі прототипів і розглядає функції як першокласні
об'єкти, що дозволяє поєднувати імперативні та частково функціональні стилі
програмування.[30]
Хоча початково JS створювався для клієнтської веброзробки, сьогодні
він використовується і на сервері (зокрема, через Node.js), а також для
створення мобільних, десктопних і навіть вбудованих систем.
2.2.1 Історія розвитку JavaScript
Походження
JavaScript був створений у 1995 році Бренданом Айком у компанії
Netscape. Мова спочатку називалася Mocha, потім перейменована в
LiveScript, а згодом у JavaScript для маркетингових цілей (через популярність
Java).
Стандартизація ECMAScript
40
JavaScript базується на специфікації ECMAScript, яку розробляє
організація ECMA International.
ECMAScript 3 (1999): Перша широко впроваджена версія.
ES5 (2009): Додав нові функції, такі як strict mode і JSON.
ES6 (2015): Революційне оновлення із введенням класів, стрілочних
функцій, модулів, let і const.
Поточні оновлення: ECMAScript оновлюється щороку, додаючи нові
функції та вдосконалення.
Розвиток екосистеми
JavaScript виріс із простої скриптової мови в багатофункціональну
платформу:
Node.js (2009): Запустив використання JS на сервері.
Фреймворки (Angular, React, Vue): Спрощують розробку складних
вебзастосунків.
Мобільна розробка: Інструменти, як React Native, дозволяють
створювати кросплатформенні додатки.
Розвиток екосистеми JavaScript
Екосистема JS активно розвивається:
Нові фреймворки: React, Angular, Vue.
Розширення функціональності: Додавання нових API для роботи з
WebAssembly, WebGL, WebRTC.
Кросплатформеність: Вихід JS за межі браузера через Node.js, React
Native, Electron.
Перспективи розвитку JavaScript
JavaScript залишатиметься ключовою мовою для веброзробки, оскільки
браузери й інтернет продовжують домінувати у цифровому світі. Основні
перспективи:
Оптимізація продуктивності: Використання WebAssembly для
покращення швидкості.
41
Розширення можливостей браузерів: Інтеграція з API для штучного
інтелекту, IoT, VR/AR.
Удосконалення безпеки: Нові інструменти для захисту коду від атак.
Масштабованість: Фреймворки і платформи стають дедалі кращими
для роботи з великими системами.
2.2.2 Технічні аспекти JavaScript
Динамічність та інтерпретація
JS є динамічно типізованою мовою, що означає, що тип змінної
визначається під час виконання програми.
let x = 10; // Число
x = "text"; // Змінна стає рядком
JS інтерпретується в реальному часі, виконуючись безпосередньо у
браузері або серверному середовищі.
Прототипно-орієнтоване програмування
JavaScript використовує прототипну модель для реалізації об’єктів. Це
дозволяє створювати ієрархії об'єктів без класів (хоча ES6 ввів синтаксис
класів для зручності).
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} каже: Привіт!`);
};
const dog = new Animal("Пес");
dog.speak(); // Пес каже: Привіт!
Асинхронність
Асинхронні операції є ключовою особливістю JS. Вони забезпечують
обробку довготривалих завдань без блокування головного потоку.
42
Callbacks
Promises
async/await
Приклад:
async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);}
fetchData();
Модулі
ES6 ввів підтримку модулів, що спрощує управління кодом:
// module.js
export const greet = () => console.log("Привіт!");
// main.js
import { greet } from './module.js';
greet(); // Привіт!
2.2.3 Сфери застосування JavaScript
Клієнтська веброзробка
JS використовується для створення інтерактивності:
Анімації, спливаючі вікна, каруселі.
Реакція на події користувача (клік, натискання клавіш).
Серверна розробка
Node.js дозволяє запускати JS на сервері, створюючи вебсервери, API та
інші серверні рішення.
Мобільна розробка
Інструменти, такі як React Native, дозволяють розробляти мобільні
застосунки на базі JavaScript.
Десктопні додатки
43
Фреймворк Electron дозволяє створювати кросплатформенні десктопні
програми (наприклад, Slack, VS Code).
Ігрова розробка
JS-фреймворки, такі як Three.js або Babylon.js, дозволяють створювати
3D-ігри та віртуальні середовища.
2.2.4 Переваги та недоліки JavaScript
Переваги
 Універсальність: JS працює як на клієнті, так і на сервері.
 Широка підтримка: Усі сучасні браузери підтримують JavaScript.
 Швидкість: JS виконується у браузері без компіляції.
 Велика спільнота: Безліч бібліотек, фреймворків і навчальних
ресурсів.
 Асинхронність: Можливість обробляти кілька завдань одночасно.
Недоліки:
 Відсутність типізації: Динамічна типізація може призводити до
помилок.
 Різна поведінка в браузерах: Деякі функції JS можуть працювати по-
різному у різних браузерах.
 Проблеми з безпекою: JS-код може бути вразливим до атак, таких як
XSS.
 Складність великих проєктів: Без структуризації (модулів,
фреймворків) великі проєкти стають важкими для підтримки.
2.2.5 Node.js
Node.js[31] - це платформа з відкритим вихідним кодом, що дозволяє
створювати високопродуктивні веб-додатки на JavaScript. У той час як
JavaScript традиційно працює на стороні клієнта, Node.js забезпечує виконання
на стороні сервера, дозволяючи запускати код JavaScript на сервері, а
44
результати надсилати назад клієнту. Node.js перетворив JavaScript на
універсальну мову, яку підтримує велика спільнота розробників. Її основні
можливості включають
 Асинхронна, однопотокова модель виконання
 Неблокуючі операції вводу/виводу
 Модульна система на основі CommonJS
 Високопродуктивний JavaScript-рушійник Google V8
 npm (Node Package Manager) використовується для управління
модулями в Node.js.
Переваги Node.js
 Підходить для обробки багатьох одночасних запитів.
 Швидка розробка завдяки численним бібліотекам.
 Добре працює з JSON, що спрощує створення API.
 Підтримує мікросервісну архітектуру.
 Недоліки Node.js
 Однопотокова модель може бути вразливою до важких обчислень.
 Велика залежність від npm-бібліотек може створювати проблеми з
безпекою.
 Підходить не для всіх типів завдань (наприклад, CPU-інтенсивні
операції).
Сфери застосування
 Вебсервери (Express.js).
 Реальний час (чати, стрімінг).
 Інтернет речей (IoT).
 Розподілені системи та мікросервіси.
2.3 Опис PostgreSQL
PostgreSQL — це потужна, об'єктно-реляційна система управління
базами даних (СУБД) з відкритим вихідним кодом, яка забезпечує високу
45
масштабованість, надійність і відповідність сучасним стандартам. PostgreSQL
вважається однією з найбільш функціонально багатих і універсальних СУБД у
світі.[32]
PostgreSQL, або Postgres, був створений для роботи з великими обсягами
даних і складними запитами. Його відкритий код дозволяє розробникам
вносити зміни, створювати розширення і адаптувати систему під конкретні
потреби бізнесу. Завдяки своїй надійності та функціональності PostgreSQL
широко використовується як у стартапах, так і в масштабних корпораціях.
2.3.1 Історія розвитку PostgreSQL
PostgreSQL походить від системи Ingres, яка була створена в 1977 році в
Каліфорнійському університеті в Берклі. У 1986 році проєкт був
модернізований під назвою Postgres для додавання підтримки об'єктно-
орієнтованих функцій.
У 1996 році система отримала підтримку мови SQL, після чого була
перейменована в PostgreSQL.
З тих пір PostgreSQL регулярно оновлюється, включаючи нові функції,
такі як підтримка JSON/JSONB, паралельні запити, реплікація та розширення
для роботи з великими даними.
Перспективи розвитку PostgreSQL
Інтеграція з хмарними платформами: Постійне вдосконалення
PostgreSQL у AWS, Google Cloud, Azure.
Оптимізація швидкості: Додавання нових механізмів для покращення
продуктивності.
Зростання підтримки NoSQL: Розширення можливостей роботи з
неструктурованими даними.
Паралельна обробка: Поглиблення підтримки багатопоточності.
Штучний інтелект і машинне навчання: Інтеграція з інструментами
AI/ML.
46
2.3.2 Технічні аспекти PostgreSQL
Архітектура PostgreSQL
PostgreSQL побудований за принципом клієнт-серверної архітектури:
Сервер (Postmaster): Відповідає за обробку запитів, збереження даних і
управління транзакціями.
Клієнтські інструменти: Наприклад, psql для роботи з базою через
командний рядок.
Ключові особливості
Об'єктно-реляційна модельPostgreSQL підтримує реляційні таблиці та
об'єкти, такі як типи даних, функції, тригери.
A C I D - т р а н з а к ц і ї
Гарантує надійність і цілісність даних завдяки виконанню принципів
атомарності, узгодженості, ізоляції та стійкості.
Масштабованість
PostgreSQL може працювати з великими базами даних і розподіленими
системами через шардінг і реплікацію.
Розширюваність
Можливість створювати власні типи даних, функції, мови програмування
(PL/pgSQL, Python).
Типи даних у PostgreSQL
PostgreSQL підтримує великий набір типів даних:
 Примітивні: INTEGER, FLOAT, CHAR, TEXT.
 Дата і час: DATE, TIMESTAMP, INTERVAL.
 Масиви: INTEGER[], TEXT[].
 JSON/JSONB: Для зберігання та маніпуляції структурованими
даними.
 Геопросторові дані: Завдяки розширенню PostGIS.
47
Запити SQL
 PostgreSQL повністю підтримує SQL і забезпечує розширені
можливості:
 Складні запити із вкладеними підзапитами.
 Розширення запитів за допомогою WITH (Common Table
Expressions).
 Вбудована підтримка аналітичних функцій, таких як
ROW_NUMBER, RANK.
Розширення PostgreSQL
 PostGIS – це розширення для роботи з географічними
інформаційними системами. Використовується в картографічних
сервісах.
 pgAdmin – це графічний інструмент для адміністрування PostgreSQL.
 PL/pgSQL – це вбудована мова програмування для створення
процедур і тригерів.
 Foreign Data Wrappers (FDW) – це механізм для доступу до зовнішніх
джерел даних, таких як інші СУБД, файли CSV.
2.3.3 pgAdmin
pgAdmin — це графічний інтерфейс для адміністрування та керування
базами даних PostgreSQL. Це одна з найпопулярніших та найбільш зручних
утиліт для роботи з PostgreSQL. Вона використовується для створення,
редагування та аналізу баз даних, а також для виконання SQL-запитів,
моніторингу продуктивності та керування користувачами.
Основні функції pgAdmin:
Керування базами даних:
Створення та видалення баз даних.
Управління таблицями, індексами, схемами, функціями, тригерами та
іншими об'єктами.
48
Виконання SQL-запитів:
Вбудований редактор SQL з підсвічуванням синтаксису,
автодоповненням і можливістю аналізу результатів виконання запитів.
Виконання складних запитів і скриптів.
Моніторинг:
Відображення статистики продуктивності серверів.
Аналіз активності користувачів і запитів.
Управління користувачами та ролями:
Додавання, видалення та редагування користувачів.
Налаштування прав доступу.
Імпорт/експорт даних:
Експорт таблиць у різних форматах (CSV, JSON тощо).
Імпорт даних у базу.
Робота з розширеннями:
Підтримка популярних розширень PostgreSQL, таких як PostGIS, pgAudit
тощо.
Особливості pgAdmin:
Платформа: pgAdmin підтримує Windows, macOS та Linux. Також
доступна веб-версія.
Інтерфейс: Інтуїтивно зрозумілий графічний інтерфейс з підтримкою
drag-and-drop для багатьох операцій.
Розширюваність: Можливість додавання плагінів або розширень для
нових функцій.
2.3.4 Сфери застосування PostgreSQL
PostgreSQL є популярним вибором для вебзастосунків завдяки своїй
стабільності та сумісності з фреймворками (Django, Ruby on Rails).
PostgreSQL інтегрується з інструментами Big Data, такими як Hadoop, і
підтримує паралельне виконання запитів.
49
З розширенням PostGIS PostgreSQL використовується для зберігання та
аналізу геоданих у ГІС-системах.
PostgreSQL забезпечує швидке збереження та обробку даних від
сенсорів і пристроїв IoT.
PostgreSQL використовується великими корпораціями, такими як Apple,
Fujitsu, для зберігання та обробки даних у критично важливих системах.
Переваги та недоліки PostgreSQL
Переваги:
Безкоштовність: Повністю відкритий код і відсутність ліцензійних
платежів.
Надійність: Завдяки ACID-транзакціям і механізму точок відновлення.
Широка функціональність: Підтримка JSON, аналітичних функцій,
геоданих.
Масштабованість: Можливість обробляти великі обсяги даних і
працювати в кластерних середовищах.
Розширюваність: Користувачі можуть створювати власні функції,
розширення, типи даних.
Гнучка реплікація: Як синхронна, так і асинхронна реплікація для
резервування.
Недоліки:
Крута крива навчання: PostgreSQL складніший для освоєння, ніж деякі
інші СУБД.
Відносно повільніша швидкість: У простих запитах MySQL може бути
швидшим через оптимізовані механізми кешування.
Великі обсяги пам’яті: Для складних задач PostgreSQL вимагає більше
ресурсів.
Налаштування: PostgreSQL потребує ретельного конфігурування для
оптимальної роботи у великих системах.
50
2.4 Висновок до розділу 2
У цьому розділі було детально досліджено технології, які лягли в основу
розробки веб-додатку.
Розглянуто еволюцію мови HTML – від початкових версій до сучасного
HTML5, що забезпечує розширені можливості для розробки веб-додатків.
Проаналізовано технічні аспекти, серед яких семантичні теги, підтримка
мультимедійного контенту та інтерактивних елементів. Визначено переваги
HTML, як універсальної основи для створення веб-сторінок, а також деякі
недоліки, наприклад, обмеженість у функціональності без використання
додаткових технологій.
Досліджено історію розвитку JavaScript, що трансформувався із простої
мови сценаріїв у потужний інструмент для клієнтської та серверної розробки.
Було розглянуто технічні особливості, включаючи роботу з DOM,
асинхронність та модульність. Особливу увагу приділено платформі Node.js,
яка відкриває можливості серверного програмування. Відзначено значний
вплив JavaScript на інтерактивність веб-додатків, хоча серед недоліків
виділено складність підтримки великого коду без належної організації.
Описано еволюцію бази даних PostgreSQL як однієї з найнадійніших
систем управління базами даних із відкритим кодом. Проаналізовано її
технічні аспекти, включаючи підтримку ACID-транзакцій, розширення, та
роботу зі складними запитами. Також розглянуто інструмент pgAdmin, що
спрощує адміністрування бази даних. Відзначено широкі можливості
застосування PostgreSQL у проєктах із великим обсягом даних і вимогами до
надійності.
Загальний висновок
Розглянуті технології продемонстрували високу ефективність та
універсальність для розробки сучасного веб-додатку. HTML забезпечує
надійну основу для створення структури сторінок, JavaScript додає
51
динамічність і функціональність, а PostgreSQL гарантує надійність і
продуктивність роботи з даними. Отримані результати аналізу підтверджують
доцільність використання цих технологій у проекті, спрямованому на
створення сучасного техноблогу.
52
РОЗДІЛ 3 СИНТЕЗ ТЕХНОБЛОГУ
3.1 Обґрунтування вибору засобів реалізації
Вибір програмних та апаратних засобів є важливою складовою етапу
розробки будь-якого проєкту, оскільки він визначає успіх реалізації
поставленої мети. Цей процес залежить від визначених вимог до системи,
структури об'єкта та алгоритмів його функціонування, а також від факторів,
що впливають на ефективність розробки, таких як час, вартість і
функціональні можливості. У цьому контексті, при виборі засобів розробки
для кваліфікаційної роботи магістра, слід звернути увагу на такі параметри:
1. Інтегровані середовища розробки (IDE): Для роботи з PostgreSQL,
JavaScript (JS), Node.js і HTML можна використовувати різні IDE:
 Visual Studio Code — популярне безкоштовне середовище розробки, яке
підтримує кілька мов програмування, включаючи JavaScript, Node.js і
HTML. Воно має багатий набір розширень і зручний інтерфейс для
розробників.
 WebStorm — потужне комерційне IDE, спеціалізоване на розробці веб-
додатків з використанням JavaScript, Node.js і HTML. Включає підтримку
фреймворків, таких як React і Angular, та інші інструменти для оптимізації
продуктивності розробки.
Система керування базами даних (СКБД): Для зберігання та обробки
даних рекомендується використовувати PostgreSQL, оскільки це потужна
реляційна СКБД з відкритим кодом, яка підтримує SQL-запити, транзакції,
індекси, реплікацію та інші важливі функції для ефективного управління
даними.
Додаткові інструменти для розробки:
 npm (Node Package Manager) — інструмент для керування залежностями в
проєктах на Node.js, який дозволяє встановлювати та оновлювати пакети,
полегшуючи роботу з бібліотеками.
53
 HTML/CSS — основні технології для створення веб-інтерфейсів. CSS
можна використовувати разом із фреймворками, такими як Bootstrap або
Tailwind CSS, для полегшення процесу стилізації та адаптивного дизайну.
 Git — система контролю версій, яка дозволяє зберігати історію змін у коді
та співпрацювати з іншими розробниками.
 Testing Frameworks — для забезпечення якості коду рекомендується
використовувати інструменти для тестування, наприклад, Jest або Mocha,
що дозволяють автоматизувати процес перевірки функціональності.
 Deployment and Hosting — для розгортання веб-додатків можна
використовувати сервіси, такі як Heroku, AWS або Netlify, які надають
зручні інструменти для хостингу та масштабування проєктів.
 Express.js — популярний фреймворк для Node.js, який дозволяє швидко
створювати веб-сервери та API.
Такий підхід дозволить створити ефективну та масштабовану систему,
що відповідає всім вимогам сучасних веб-додатків.
3.2 Опис структурної (функціональної) схеми
Схема структурної програмної системи представлена на рисунку 3.1. В
ній зображено окремі модулі для роботи з певним функціоналом програми. В
ній показано модуль призначений для Авторизації та реєстрації, модуль для
перегляду блогів та коментарів та модуль для внесення змін в блоги та
коментарі.[33]
Рисунок 3.1– Схема структурної програмної системи
54
Схема функціональної програмної системи представлена на рисунку 4.2.
В ній зображено окрім окремих модулів для роботи з певним функціоналом
програми, який було показано вище, а й основні принципи їх роботи.
 Для модуля Реєстрація та авторизація є елемент для вводу даних
користувачем та вивід інформації про успішність чи помилці при
виконання цих цій.
 Для модуля додавання блогів та коментарів є зв'язок з модулем
реєстрації та авторизації для перевірки користувача, а також поля для
вводу інформації.
 Для модуля Перегляд блогів та коментарів є лише вивід інформації.
 Всі 3 модуля мають зв`язок з Бд для зберігання чи отримання
інформації.
Рисунок 3.2 – Схема функціональної програмної системи
3.3 Опис логічної схеми системи
У цьому підрозділі описується послідовність дій, яка відбувається в
проєктованому об'єкті і призводить до певного результату. Зазвичай, логічна
схема представляється у вигляді текстового опису алгоритму функціонування
системи або програми, який потім може бути перетворений на графічну блок-
схему алгоритму представлену на рисунках 3.3-3.5.
55
Рисунок 3.3 – Блок схема «Опис логічної схеми системи» сайту
Рисунок 3.4 – Блок схема «Опис логічної схеми системи» модуля авторизація
та реєстрація
56
Рисунок 3.5 – Блок схема «Опис логічної схеми системи» модуля додавання
блогу чи коментаря
Логічна структура повинна однозначно описувати основні інформаційні
процеси, які відбуваються в проєктованому об'єкті, та їхній характер, такі як
операції зберігання, обробки, відображення та передачі даних, циклічні
структури, переходи за умовою і т.д.
3.4 Розробка бази даних
База даних (БД) є важливою складовою численних інформаційних
систем, що функціонують як єдине та об'ємне сховище даних. Ця БД
створюється один раз, а потім використовується спільно різними
користувачами або функціональними компонентами системи. Замість окремих
файлів з дублюючими даними, БД об'єднує всю інформацію з мінімальним
надлишком. Зазвичай БД вважається загальним ресурсом, який розділяється
між клієнтами. Збережені дані в БД мають логічну структуру, яка описується
підтримуваною моделлю даних. Реляційна модель є найпоширенішою
моделлю даних, оскільки вона проста, гнучка, зрозуміла та легко
реалізовується. Однак, зі збільшенням кількості таблиць може спостерігатися
падіння продуктивності роботи з БД.
57
Концептуальна модель даних є високорівневим описом структури та
взаємозв'язків даних в інформаційній системі. Вона визначає загальні поняття,
сутності, атрибути та зв'язки між ними, не залежно від конкретної реалізації в
базі даних. Концептуальна модель даних допомагає відображати бізнес-логіку
та вимоги користувачів до системи, а також служить основою для подальшої
розробки фізичної моделі даних, яка враховує конкретні аспекти реалізації в
базі даних. Концептуальна модель даних може бути представлена у вигляді
діаграми сутностей-зв'язків (ER-діаграми) або інших графічних засобів, що
допомагають візуалізувати структуру та взаємозв'язки даних.
Рисунок 3.6 – Блок схема «Концептуальна модель даних»
Логічна модель даних є детальним описом структури даних,
включаючи таблиці, колонки та взаємозв'язки між ними, в рамках певної
58
моделі даних, такої як реляційна модель. Вона відображає специфічні деталі
даних, їх типи, обмеження та правила, які встановлені на рівні бази даних.
Логічна модель даних служить основою для створення фізичної моделі даних,
яка враховує деталі реалізації в конкретній системі управління базами даних.
Вона може бути представлена у вигляді схеми бази даних або діаграми, де
кожна таблиця представлена своїми колонками та зв'язками з іншими
таблицями.
Рисунок 3.7 – Блок схема «Логічна модель даних»
Фізична модель даних визначає спосіб фізичного збереження та
організації даних на рівні конкретної системи управління базами даних. Вона
враховує технічні деталі, такі як формат файлів, індекси, розташування даних
на диску та оптимізацію запитів. Фізична модель визначає структуру таблиць,
способи зберігання та індексування даних, розподіл даних між різними
пристроями зберігання, а також відображення зв'язків між таблицями.
Фізична модель даних є конкретною реалізацією логічної моделі даних для
певної системи управління базами даних.
Нижче представлено фізичну модель даних для кожної таблиці на
рисунках 3.8-3.12.
59
Рисунок 3.8 – Фізична модель даних таблиці Moderator
Рисунок 3.9 – Фізична модель даних таблиці Users
Рисунок 3.10 – Фізична модель даних таблиці Blog
60
Рисунок 3.11 – Фізична модель даних таблиці TextBlog
Рисунок 3.12 – Фізична модель даних таблиці Comment
3.5 Розробка інтерфейсу користувача
Розробка інтерфейсу користувача є ключовим етапом у процесі
конструювання інформаційної системи. Інтерфейс відповідає за взаємодію
користувача з програмно-технічним забезпеченням системи.
Ефективність інтерфейсу залежить від здатності проєктувальника
передбачити потреби та вимоги користувачів, які можуть виникнути на різних
етапах використання інформаційної системи. Важливо прогнозувати майбутнє
зростання або зміну вимог до програмно-технічного комплексу і забезпечити
систему здатністю виконувати ці вимоги без необхідності розширення або
значних модифікацій.
Під час розробки інтерфейсу користувача слід враховувати зручність та
логічність його використання, інтуїтивність, зрозумілість та доступність
функціональних можливостей системи для різних категорій користувачів.
Дизайн інтерфейсу повинен бути естетичним і забезпечувати зручну навігацію
та взаємодію з інформаційною системою.
61
Під час розробки інтерфейсу також слід враховувати можливість
масштабування та адаптації системи до змінних вимог і потреб користувачів.
Інтерфейс повинен бути гнучким і здатним пристосовуватися до нових
функціональних вимог, забезпечуючи зручну та ефективну роботу з системою.
Рисунок 3.13 – Інтерфейс користувача(головна сторінка)
Рисунок 3.14 – Інтерфейс користувача(сторінка профіля)
62
Рисунок 3.15 – Інтерфейс користувача(сторінка контакти)
Рисунок 3.16 – Інтерфейс користувача(сторінка авторизації)
3.6 Опис розробки програмних компонентів
Опис розробки проведено по функціям програми:
1. Створення серверу node js та підключення до Бд
Імпортуємо необхідні модулі для розробки веб-додатку:
const express = require('express');
const cors = require('cors');
const http = require("http");
const fs = require("fs");
const { Client } = require('pg');
Ініціалізуємо об'єкт додатку Express:
const app = express();
Встановлюємо CORS для дозволу запитів з будь-якого джерела:
app.use(cors());
Додаємо middleware, який встановлює заголовок "Access-Control-Allow-
Origin" для дозволу доступу з будь-якого джерела:
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
63
next();
});
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});
Створюємо об'єкт клієнта для підключення до бази даних PostgreSQL:
const client = new Client({
user: 'postgres',
host: 'localhost',
database: 'DB1',
password: '1234566',
port: 5432,
});
Встановлюємо з'єднання з базою даних PostgreSQL:
client.connect(function (err) {
if (err) throw err;
console.log("Connected!");
});
Створюємо HTTP сервер і оброблюємо запити:
http.createServer(function (request, response) {
// код обробки запитів
});
В даному уривку коду проводиться розробка програмних компонентів
для створення веб-додатку на базі Express.js, який використовує базу даних
PostgreSQL. Код налаштовує CORS, встановлює з'єднання з базою даних та
створює HTTP сервер для обробки запитів.
2. Фрагмент коду відповідає за обробку запиту GET на шляху "/blog"
і відправку відповіді з даними з таблиці "Blog" в форматі JSON. Нижче
наведено опис розробки програмних компонентів за цим уривком:
if (request.url === "/blog" && request.method === "GET") {
// Перевіряємо, чи запит є GET-запитом на шляху "/blog"
response.writeHead(200, { "Content-Type":
"application/json" });
// Встановлюємо заголовки відповіді, включаючи тип контенту
як "application/json"
let query = `
SELECT *
FROM Blog
`;
// SQL-запит для вибірки всіх рядків з таблиці "Blog"
let mas = [];
// Масив для зберігання результатів запиту
64
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row;
for (row of res.rows) {
mas.push(row);
// Додаємо кожен рядок з результатів запиту до масиву
}
response.end(JSON.stringify(mas));
// Відправляємо відповідь з масивом даних у форматі JSON
response.end();
// Завершуємо відправку відповіді
});}
Опис розробки програмних компонентів:
1. Перевіряється, чи отриманий запит є GET-запитом на шляху "/blog".
2. Встановлюються заголовки відповіді з типом контенту
"application/json".
3. Виконується SQL-запит до бази даних для вибірки всіх рядків з таблиці
"Blog".
4. Результати запиту зберігаються у масиві "mas".
5. Отриманий масив даних перетворюється у JSON-строку.
6. Відповідь з JSON-строкою надсилається клієнту.
7. Завершується процес відправки відповіді.
Таким чином, коли отримується GET-запит на шляху "/blog", сервер
виконує SQL-запит до бази даних, отримує результати та надсилає їх клієнту у
вигляді JSON.
3. Уривок коду відповідає за генерацію HTML-коду для
відображення блогів на стороні клієнта. Нижче наведено опис розробки
програмних компонентів за цим уривком:
const displayBlogs = (blogs) => {
const blogContainer = document.querySelector('#blog-
container');
blogContainer.innerHTML = '';
blogs.forEach((blog) => {
const blogItem = document.createElement('div');
blogItem.classList.add('blog-item');
const blogHeader = document.createElement('h3');
blogHeader.innerText = blog.blog_name;
65
blogHeader.classList.add('Text_big');
const blogImage = document.createElement('img');
blogImage.src = blog.path_foto;
blogImage.classList.add('blog-image');
blogImage.alt = 'Blog Image';
const blogText = document.createElement('p');
blogText.classList.add('blogtext');
fetch(`http://127.0.0.1:8081/TextBlog?id_blog=${blog.id_blog}
`)
.then((response) => response.json())
.then((data) => {
const texts = data.map((item) => item.text);
blogText.innerText = texts; // Встановлюємо
текст блогу
})
.catch((error) => console.log(error));
const blogcomment = document.createElement('p');
blogcomment.classList.add('blogcomment');
fetch(`http://127.0.0.1:8081/comment?id_blog=${blog.id_blog}`
)
.then((response) => response.json())
.then((data) => {
fetch(`http://127.0.0.1:8081/Users`)
.then((response) => response.json())
.then((userData) => {
const comments = data.map((item) => {
const user = userData.find((user) => user.id_user ===
item.id_user);
const login = user ? user.login_user :
'Unknown User';
return `Від користувача: ${login},:
${item.comment_text}`;
});
blogcomment.innerText = comments.join('\n');
})
.catch((error) => console.log(error));
})
.catch((error) => console.log(error));
const commentForm = document.createElement('form');
commentForm.classList.add('comment-form');
const commentInput = document.createElement('input');
commentInput.type = 'text';
commentInput.placeholder = 'Введіть коментар...';
commentInput.classList.add('comment-input');
const commentButton =
document.createElement('button');
commentButton.type = 'button';
commentButton.innerText = 'Додати коментар';
commentButton.classList.add('comment-button');
66
let dateNew = blog.blog_date.slice(0, 10);
let timeNew = blog.blog_time.slice(0, 5);
fetch(`http://127.0.0.1:8081/Users`)
.then((response) => response.json())
.then((userData) => {
const user = userData.find((user) => user.id_user ===
blog.id_user);
const login = user ? user.login_user : 'Unknown User';
const blogDetails = document.createElement('p');
let dateNew = blog.blog_date.slice(0, 10);
let timeNew = blog.blog_time.slice(0, 5);
blogDetails.innerText = `Автор блогу: ${login}, дата
публікації: ${dateNew}, час публікації: ${timeNew}`;
blogDetails.classList.add('Text_info');
blogItem.appendChild(blogDetails);
})
.catch((error) => console.log(error));
Функція displayBlogs призначена для відображення блогів на сторінці.
Вона отримує масив блогів і для кожного блогу створює DOM-елемент з
необхідною інформацією (заголовок, зображення, текст, коментарі). Елементи
додаються до контейнера з ідентифікатором blog-container.
Для кожного блогу створюються наступні елементи:
1. blogItem: <div> елемент, який представляє окремий блог.
2. blogHeader: <h3> елемент, який містить заголовок блогу (blog_name).
3. blogImage: <img> елемент, який відображає зображення блогу
(path_foto).
4. blogText: <p> елемент, який відображає текст блогу. Текст
отримується за допомогою запиту fetch до сервера за URL
http://127.0.0.1:8081/TextBlog?id_blog=${blog.id_blog}.
5. blogcomment: <p> елемент, який відображає коментарі до блогу.
Коментарі отримуються за допомогою запиту fetch до сервера за
URL http://127.0.0.1:8081/comment?id_blog=${blog.id_blog}. Перед
відображенням коментарів, також виконується запит до сервера за
URL http://127.0.0.1:8081/Users, щоб отримати дані про користувачів,
67
які залишили коментарі. Коментарі об'єднуються разом з
інформацією про користувачів і відображаються у вигляді рядків.
6. commentForm: <form> елемент, який містить поле для введення
коментаря (commentInput) і кнопку для додавання коментаря
(commentButton).
7. Функція createCommentForm створює елемент форми для введення
коментарів. Вона створює <form> елемент, поле для введення
коментаря (commentInput) і кнопку для додавання коментаря
(commentButton).
8. Інформація про автора блогу (ім'я автора, дата публікації, час
публікації) отримується за допомогою запиту до сервера заURL
http://127.0.0.1:8081/Users. Після отримання даних про користувачів,
шукається користувач, який є автором блогу за допомогою
ідентифікатора id_user. Якщо користувач знайдений,
використовується його ім'я для відображення інформації про автора
блогу. Якщо користувач не знайдений, використовується значення
"Unknown User". Інформація про автора блогу (ім'я, дата публікації,
час публікації) відображається за допомогою елементу <p> з класом
"Text_info", який додається до blogItem.
Загалом, цей код відповідає за відображення блогів на сторінці і
отримання необхідної інформації з сервера для відображення заголовків,
зображень, текстів і коментарів до блогів. Також надає можливість додавати
нові коментарі до блогів за допомогою форми.
4. Функції додавання та видалення блогів
const addBlog = () => {
const addBlogForm = document.querySelector('#add-blog-
form');
const id_blog =
addBlogForm.querySelector('#id_blog').value;
const blog_name =
addBlogForm.querySelector('#blog_name').value;
68
const blog_date =
addBlogForm.querySelector('#blog_date').value;
const blog_time =
addBlogForm.querySelector('#blog_time').value;
const id_user =
addBlogForm.querySelector('#id_user').value;
const path_foto =
addBlogForm.querySelector('#path_foto').value;
const blog_text =
addBlogForm.querySelector('#blogtext').value;
fetch('http://127.0.0.1:8081/addblog', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id_blog: id_blog,
blog_name: blog_name,
blog_date: blog_date,
blog_time: blog_time,
id_user: id_user,
path_foto: path_foto,
blog_text: blog_text,
}),
})
.then((response) => {
return response.json();
})
.then((data) => {
if (data.success) {
generateBlogHTML();
addBlogForm.reset();
// console.log(data.message);
} else {
// console.log(data.message);
}
})
.catch((error) => {
console.log(error);
});
};
// Видалення блогу
const deleteBlog = () => {
const deleteBlogInput = document.querySelector('#delete-
blog-input').value;
fetch('http://127.0.0.1:8081/blog/${deleteBlogInput}', {
method: 'DELETE',
})
.then((response) => {
69
return response.json();
})
.then((data) => {
if (data.success) {
generateBlogHTML();
console.log(data.message);
} else {
console.log(data.message);
}
})
.catch((error) => {
console.log(error);
});
};
Функція addBlog відповідає за додавання нового блогу. Вона отримує
значення полів форми з додавання блогу (addBlogForm) і виконує запит до
сервера за адресою http://127.0.0.1:8081/addblog методом GET. Запит містить
дані про новий блог у форматі JSON. Дані блогу включають id_blog,
blog_name, blog_date, blog_time, id_user, path_foto та blog_text.
Після отримання відповіді від сервера, функція перевіряє поле success в
отриманих даних. Якщо success має значення true, то викликається функція
generateBlogHTML() для оновлення відображення блогів, форма очищається
методом reset(), і, можливо, виводиться повідомлення у консоль
(console.log(data.message)). У разі, якщо success має значення false, можливо,
виводиться повідомлення про помилку у консоль.
Функція deleteBlog відповідає за видалення блогу. Вона отримує
значення поля введення для видалення блогу (deleteBlogInput) і виконує запит
до сервера за адресою http://127.0.0.1:8081/blog/${deleteBlogInput} методом
DELETE.
Після отримання відповіді від сервера, функція перевіряє поле success в
отриманих даних. Якщо success має значення true, то викликається функція
generateBlogHTML() для оновлення відображення блогів і можливо
виводиться повідомлення у консоль (console.log(data.message)). У разі, якщо
success має значення false, можливо виводиться повідомлення про помилку у
консоль.
70
3.7 Висновок до розділу 3
У цьому розділі розглянуто ключові аспекти розробки програмного
комплексу для веб-додатку Техноблог системного адміністратора. Було
обґрунтовано вибір технологій, розроблено архітектуру системи, створено
базу даних та інтерфейс користувача. Завершальним етапом стало комплексне
тестування, яке підтвердило відповідність розробленої системи поставленим
вимогам.
Розробка програмного комплексу
 Обґрунтовано вибір інструментів та технологій для реалізації
проєкту, зокрема використання JavaScript, Node.js, PostgreSQL та
інших компонентів. Цей вибір базувався на їхній продуктивності,
гнучкості та сумісності.
 Створено логічну схему системи, що описує ключові функціональні
модулі та їх взаємодію. Схема забезпечує чітке уявлення про
структуру додатку.
 Розроблено базу даних із врахуванням специфіки предметної області.
PostgreSQL було обрано за її стабільність, підтримку транзакцій та
гнучкість у роботі з великими обсягами даних.
 Інтерфейс користувача було створено з орієнтацією на зручність,
інтуїтивність і адаптивність, що забезпечує позитивний
користувацький досвід.
Тестування системи
 Проведено модульне тестування, яке перевірило правильність роботи
окремих компонентів системи, забезпечуючи стабільну
функціональність кожного модуля.
 Інтеграційне тестування виявило та усунуло можливі проблеми у
взаємодії між компонентами.
71
 Системне тестування підтвердило відповідність програмного
комплексу усім функціональним і нефункціональним вимогам.
 Приймальне тестування довело, що система готова до впровадження
та здатна задовольнити потреби користувачів.
Розроблений web -додаток Техноблог системного адміністратора
повністю відповідає вимогам сучасних технологій розробки програмного
забезпечення. Використання актуальних інструментів і методів тестування
забезпечило надійність, продуктивність і зручність системи. Успішне
завершення етапу розробки та тестування закладає основу для впровадження
програмного комплексу в експлуатацію.
72
РОЗДІЛ 4 ДОСЛІДЖЕННЯ ВЕБ ДОДАТКУ ТЕХНОБЛОГ
4.1 Опис предметної області
4.1.1 Область моделювання. Модель області. Глосарій термінів
Магістерська кваліфікаційна робота передбачає розробку веб-додатку у
вигляді інформаційного блогу. Цей додаток містить три основні компоненти:
фронтенд, бекенд і базу даних.
Фронтенд виступає веб-інтерфейсом, доступним для користувачів. Вони
можуть авторизуватися на сайті, після чого отримують можливість
створювати та редагувати записи, коментувати, реєструватися та
авторизуватися. Адміністратори отримують додаткові права, які дозволяють
створювати нові записи, редагувати існуючі, а також призначати
адміністративні права іншим користувачам.
Бекенд є проміжною ланкою між фронтендом та базою даних. Він
відповідає за обробку запитів від фронтенду та передачу їх до бази даних, а
також за автентифікацію та авторизацію користувачів, перевірку коректності
даних і їх збереження.
Компонент бази даних містить усі дані веб-додатку, включаючи
інформацію про користувачів, записи блогу, коментарі та інші необхідні дані.
Оскільки цей проєкт виконується в рамках магістерського курсу,
передбачається використання відповідних технологій і засобів програмування
для забезпечення оптимальної роботи та ефективного використання ресурсів.
Під час проектування ПЗ для кваліфікаційної роботи слід
використовувати основні діаграми мови UML для моделювання предметної
області, формулювання та аналізу вимог до системи, а також для визначення
логічної і фізичної структури та поведінки системи (див. рисунок 2.3).
Модель предметної області зображеної у вигляді UML діаграми
представлено на рисунку 4.1
73
Рисунок 4.1 – UML діаграма моделі предметної області
Глосарій термінів:
Моделювання — це важливий процес, який дозволяє створити
спрощене уявлення про реальність, що допомагає досліджувати, аналізувати,
прогнозувати та оптимізувати її роботу. Цей метод широко застосовується в
науці та технологіях для дослідження поведінки різних систем і передбачення
їхніх результатів.
Система — це складна структура, яка об'єднує взаємопов'язані
елементи, що спільно виконують визначену функцію. Елементи можуть бути
як фізичними, так і програмними, та взаємодіють між собою для досягнення
певної мети.
Інформація — це знання, яке використовується для ухвалення рішень і
взаємодії з навколишнім середовищем. Інформація може зберігатися в базі
даних, яка є структурованим набором даних, організованих за певними
правилами та розміщених на зовнішньому носії.
74
Програмне забезпечення — це сукупність програм, що забезпечують
роботу комп'ютерної системи. Воно складається з двох головних компонентів:
фронтенду та бекенду. Фронтенд відповідає за взаємодію з користувачем, а
бекенд — за обробку даних, роботу з базою даних і взаємодію з іншими
системами.
База даних — це структурована колекція даних, організованих за
визначеними правилами та збережена на зовнішньому носії. Бази даних
дозволяють зберігати великі обсяги інформації, яка легко доступна для
подальшої обробки. Вони можуть містити різні типи даних, зокрема числа,
тексти, зображення, аудіо та відео.
Система управління базами даних (СУБД) — це програмне
забезпечення, що забезпечує доступ до даних у базі, їхнє оновлення та
безпечне зберігання. Існують різні типи СУБД, включно з реляційними,
об'єктно-орієнтованими, ієрархічними тощо.
Адміністратор бази даних відповідає за управління базою даних,
налагодження її роботи та забезпечення захисту даних. Він також контролює
доступ користувачів і створює резервні копії для відновлення даних у разі
потреби.
Бази даних є невід'ємною частиною таких галузей, як бізнес, освіта,
медицина тощо. Вони сприяють зберіганню, організації та аналізу інформації,
що допомагає приймати обґрунтовані рішення та підвищувати ефективність
діяльності.
4.1.2 Елементи Техноблогу
Проєкт включає різні сутності, які представляють об'єкти або концепції,
характерні для даної предметної області. Основними сутностями нашого
проєкту є: адміністратор, користувач, база даних, блог, коментар, категорії та
теги.
75
Сутність Користувач описує атрибути й дії особи, що взаємодіє із
системою, включаючи особисті дані, ролі та функції, доступні користувачу в
межах системи. Цей об'єкт може містити такі атрибути, як ім'я, прізвище,
адреса електронної пошти, логін, пароль тощо. Користувач також може
виконувати певні дії, наприклад, створення, редагування та видалення записів,
створення та перегляд даних тощо.
Елементи предметної області охоплюють такі компоненти:
Блог — це сайт або сторінка, де публікуються різноманітні пости,
коментарі, а також інформація про авторів.
Пости — це матеріали, опубліковані в блозі. Вони можуть бути
представлені у різних форматах: текстовому, аудіо, відео тощо, і відображати
різні теми, події або думки авторів.
Коментарі — елементи, що містять текст, дату, автора, оцінку
користувачів та інші дані. Коментар може бути прив'язаний до поста чи блогу,
а також до користувача, який його написав. Коментарі можуть містити
відгуки, запитання та обговорення щодо постів.
Категорії — тематичні розділи, які систематизують пости за темами,
полегшуючи пошук і перегляд відповідного контенту для користувачів.
Теги — ключові слова, що класифікують пости за певними темами,
стилем або іншими ознаками. Вони допомагають швидко знайти записи, що
містять потрібні ключові слова.
Адміністратор — користувач із повним доступом до функцій
управління блогом, включаючи редагування постів, видалення коментарів,
створення нових користувачів і призначення їм прав доступу.
4.1.3 Робоча область моделювання
Розробка веб додатку охоплює три основні компоненти: фронтенд,
бекенд і базу даних.
76
Фронтенд містить інтерфейси для реєстрації, авторизації, перегляду
блогів, профілю, контактної інформації та коментарів. Сторінки реєстрації та
авторизації включають відповідні форми, які дозволяють користувачам
створювати обліковий запис або входити до системи. Сторінка блогу
відображає записи блогу з основною інформацією про користувача, що їх
публікував. Сторінка профілю містить персональну інформацію про
користувача, а сторінка контактів — дані про авторів сайту і проєкту.[34]
Бекенд забезпечує логіку додатку та обробку даних. Він включає
сервіси для адміністратора, які підтримують авторизацію, створення блогів та
додавання коментарів. Також бекенд обробляє запити користувачів і керує
інформацією про профілі користувачів та коментарі, які вони залишають.[35]
База даних зберігає дані про користувачів, блоги та коментарі, а також
містить таблиці для кожного з цих елементів.
У процесі моделювання важливо визначити чіткі взаємодії між
фронтендом, бекендом і базою даних. Фронтенд відповідає за взаємодію з
користувачем, передачу даних на бекенд і відображення результатів. Бекенд
виконує бізнес-логіку, обробляє запити від фронтенду і взаємодіє з базою
даних, яка, своєю чергою, містить основні дані системи, зокрема про
користувачів, коментарі та блоги. Для забезпечення ефективності та
надійності роботи системи взаємодії між цими компонентами повинні бути
чітко спроектовані.
Програмне забезпечення «Техноблог» дозволяє адміністраторам
створювати та редагувати блоги, керувати коментарями (редагувати, видаляти,
забороняти порушникам правил залишати коментарі) і призначати інших
адміністраторів. Користувачі можуть реєструватися, додавати особисту
інформацію в профіль та залишати коментарі. Адміністратори також мають
доступ до перегляду коментарів, залишених конкретним користувачем.
77
4.2 Дослідження та аналіз вимог
Первинні вимоги до програмного забезпечення автоматизованої системи
тестування абітурієнтів університету можуть включати такі функціональні
пункти:
 Система має забезпечувати можливість авторизації для адміністратора.
 Система має надавати адміністратору можливість створювати та редагувати
блоги.
 Система має дозволяти адміністратору призначати права адміністратора
іншим користувачам.
 Система має забезпечувати можливість авторизації для користувачів.
 Система має дозволяти користувачам залишати коментарі.
 Система має надавати користувачам можливість переглядати інформацію
про інших користувачів.
Детальні вимоги до програмного забезпечення включають:
 Наявність модуля для створення нових блогів.
 Наявність модуля для перегляду блогів.
 Наявність модуля особистого кабінету з інформацією про користувача.
 Наявність модуля для управління коментарями.
Ці вимоги спрямовані на забезпечення функціональності, необхідної для
повноцінної роботи системи, та враховують як адміністративні можливості,
так і взаємодію користувачів із контентом.
ВИМОГИ ЗАМОВНИКА:
1. Система повинна дозволяти перегляд блогів.
2. Система повинна забезпечувати можливість створення блогів та їх
редагування.
3. Система повинна бути легкою у використанні та мати інтуїтивний
інтерфейс користувача.
78
4. Система повинна мати можливість працювати з багатьма користувачами
одночасно та зберігати інформацію про кожного користувача окремо.
5. Система повинна бути безпечною та забезпечувати захист
конфіденційної інформації.
ВИМОГИ РОЗРОБНИКА:
1. Система повинна підтримувати створення блогів.
2. Система має надавати можливість перегляду та редагування блогів.
3. Система повинна забезпечувати збереження блогів і їх відображення.
4. Система повинна бути розроблена з використанням сучасних технологій
програмування, що забезпечують високу продуктивність.
5. Система має бути легкою у розгортанні, підтримуючи різні операційні
системи та браузери.
6. Система повинна гарантувати безпеку даних і захист від
несанкціонованого доступу до інформації користувачів.
ФУНКЦІОНАЛЬНІ ВИМОГИ:
1. Система повинна мати механізми для реєстрації користувачів та
збереження їхніх персональних даних.
2. Система повинна дозволяти адміністраторам створювати блоги.
3. Система повинна відображати блоги та коментарі, залишені
користувачами.
НЕФУНКЦІОНАЛЬНІ ВИМОГИ:
1. Система повинна бути доступною для користувачів з будь-якої точки з
доступом до Інтернету.
2. Система повинна витримувати навантаження і забезпечувати швидкий
відгук.
3. Система має гарантувати безпеку даних і конфіденційність
користувацької інформації.
4. Інтерфейс системи повинен бути інтуїтивно зрозумілим для
користувачів.
79
5. Система має підтримувати можливість редагування блогів і додавання
коментарів.
6. Система повинна бути розроблена з використанням сучасних технологій
програмування та баз даних.
Моделювання та проектування системи:
Для моделювання предметної області та проектування системи доцільно
використовувати мову UML (Unified Modeling Language). UML надає засоби
для створення діаграм, які описують як структуру, так і поведінку системи,
забезпечуючи візуалізацію її основних компонентів та зв'язків між ними.
Більшість розробників використовують обмежений набір діаграм UML,
обираючи лише ті, що найкраще відповідають конкретним потребам проєкту.
Аналізвеб додатку за допомогою діаграми прецедентів
Діаграма прецедентів (англ. Use Case Diagram) — це один із типів
діаграм, який використовується в мові моделювання UML (Unified Modeling
Language) для графічного зображення функціональних можливостей системи.
Ця діаграма демонструє, які функції (прецеденти) виконує система, і як
користувачі (актори) взаємодіють із цими функціями.
Вона є основою для аналізу вимог до системи та планування її
архітектури. Використовується на початкових етапах розробки, щоб зрозуміти
загальні завдання системи та визначити функціонал, який потрібно
реалізувати.
Діаграма прецендентів для веб - додатку зображена на рисунку 4.2
80
Рисунок 4.2 - Діграма прецендентів
Діаграма прецендентів складається з два акторів - адміністратора та
користувача, а також відображає основні прецеденти, що можливі для цих
акторів.
Адміністратор має можливість:
 Створювати блоги
 Редагувати блоги
 Видаляти блоги
 Переглянути всю інформацію про користувача
Користувач має можливість:
 Частковий перегляд інформацію про користувачів
 Реєстрацію
Спільні можливості обох акторів такі:
 Перегляд блогів
 Коментування блогів
 Авторизація
81
Діаграма показує зв'язки між прецедентами, які пов'язані з акторами, і
допоможе розробникам зрозуміти, які прецеденти необхідно реалізувати та які
зв'язки між ними існують.
4.3 Аналіз логічної структури програмного комплексу
4.3.1 Діаграми класів
Діаграма класів (англ. Class Diagram) — це структурна діаграма в мові
моделювання UML (Unified Modeling Language), яка використовується для
моделювання статичної структури системи. Вона відображає класи, їхні
атрибути, методи та відносини між ними. Діаграма класів є фундаментальною
частиною об'єктно-орієнтованого аналізу та проектування.
Діаграма класів зображена на рисунку 4.3.
Рисунок 4.3 – Діаграма класів
Діаграма класів відображає основні класи та їх взаємодію в бекенд-
частині додатку. Основні елементи цієї діаграми:
 Головний клас – виконує базові задачі й слугує центральною ланкою для
інших класів. Цей клас підтримує перехід до інших компонентів системи,
спрощуючи взаємодію між ними.
82
 Клас Зв'язок з БД – забезпечує доступ до бази даних, виконуючи запити
для внесення змін та обробки даних. Також відповідає за підключення до
бази даних для забезпечення роботи бекенду.
 Клас Робота з коментарями – відповідає за обробку коментарів,
включаючи їх створення, збереження та відображення, а також керування
їх статусом у системі.
 Клас Авторизація – забезпечує функціонал авторизації користувачів та
реєстрації нових акаунтів. Використовує базу даних для зберігання
інформації про облікові записи.
 Клас Особистий кабінет – зберігає й відображає інформацію про
користувача, а також дозволяє редагувати та заповнювати особисті дані.
Таким чином, ця діаграма є відображенням основних класів та їх
взаємодії в бекенді.
4.3.2 Діаграми пакетів
Діаграма пакетів (англ. Package Diagram) — це тип структурної діаграми
в UML (Unified Modeling Language), який використовується для моделювання
організації та залежностей між пакетами (групами класів чи компонентів).
Вона демонструє, як система структурована на рівні високорівневих модулів,
що полегшує розуміння її архітектури.
Діаграма пакетів зображена на рисунку 3.4.
Рисунок 4.4 – Діаграма пакетів
83
Ця діаграма показує компоненти додатку, їх залежності і взаємодію.
У системі можна виділити наступні основні функціональні компоненти:
Фронтенд:
 Авторизація та реєстрація: Забезпечує користувачам можливість авторизації
та реєстрації через інтуїтивний інтерфейс, який дозволяє швидко увійти
або створити обліковий запис.
 Вивід інформації: Показує користувачам дані, що були отримані з бази
даних через бекенд, дозволяючи переглядати відповідну інформацію.
 Форми для введення даних: Забезпечують можливість внесення нової
інформації користувачами, яку потім обробляє бекенд та передає в базу
даних.
 Меню: Організовує навігацію по додатку для зручного користування,
дозволяючи користувачам легко переходити між розділами.
Бекенд:
 Модуль безпеки: Управляє обліковими записами користувачів та забезпечує
надійний захист даних.
 Зберігання інформації: Виконує роль буфера між базою даних і фронтендом
— тимчасово зберігає інформацію перед її відправкою на фронтенд або
збереженням у базі даних.
 Обробка інформації: Конвертує вхідні дані у формат запитів для бази даних,
що дозволяє ефективно здійснювати операції з даними.
Бд використовується для зберігання інформації
Такий розподіл забезпечує чітку взаємодію між фронтендом та
бекендом, що дозволяє системі працювати стабільно й зручно для
користувачів.
84
4.4 Архітектурне проектування
4.4.1 Діаграма компонентів
Діаграма компонентів (англ. Component Diagram) — це вид
структурної діаграми в UML (Unified Modeling Language), який
використовується для моделювання фізичних компонентів системи і зв'язків
між ними. Вона відображає, як окремі модулі (компоненти) взаємодіють один
з одним і з іншими частинами системи, такими як інтерфейси чи зовнішні
ресурси.
Діаграма компонентів є важливим інструментом для візуалізації та
планування архітектури програмної системи. Вона допомагає зрозуміти, як
різні компоненти програми взаємодіють один з одним, визначаючи їхні
функції та залежності. Цей вид діаграми використовують для відображення
зв'язків між програмними компонентами, що робить її корисною на етапах
проектування, розробки, тестування та підтримки програмного забезпечення.
Основні елементи діаграми компонентів:
Компоненти — представляють собою функціональні частини системи,
такі як модулі, сервіси або окремі програмні частини. Компоненти
зображуються прямокутниками з назвою та можуть бути описані їхніми
внутрішніми функціями.
Інтерфейси— це точки взаємодії між компонентами. Вони можуть бути
показані як вхідні або вихідні канали для передачі даних.
Зв'язки — стрілки або лінії, які з'єднують компоненти та показують
напрямок і тип взаємодії між ними. Це можуть бути, наприклад, запити або
потоки даних, що передаються між різними частинами системи.
Діаграма компонентів дозволяє:
 Визначити, які компоненти взаємодіють один з одним, і як це відбувається.
 Підвищити ефективність співпраці між розробниками, допомагаючи чітко
описати архітектуру.
85
 Оцінити розподіл навантаження між різними компонентами програми для
покращення продуктивності.
 Легко ідентифікувати необхідні зміни чи доповнення до архітектури
системи на етапі тестування чи рефакторингу.
Використання діаграм компонентів дозволяє розробникам краще
планувати структуру програми, передбачити потенційні проблеми та
оптимізувати розподіл ресурсів.
Рисунок 4.5 – Діаграма компонентів
4.4.2 Розгортання програмної системи на апаратних засобах.
Процес розгортання програмної системи на апаратних засобах включає
кілька ключових етапів. Ось детальний план цього процесу:
1. Вибір хостинг-провайдера та серверів
Вибір хостинг-провайдера: Потрібно вибрати хостинг, який підтримує
технології, що використовуються у проєкті, зокрема Node.js, JavaScript (JS),
PostgreSQL, а також має хорошу репутацію в плані доступності та надійності.
Популярними провайдерами для таких задач є:
 AWS (Amazon Web Services)
 Google Cloud
 Microsoft Azure
86
 DigitalOcean
 Heroku (якщо потрібно швидке розгортання для тестування)
Вибір кількості серверів: Кількість серверів залежить від
передбачуваного навантаження:
 Один сервер для початку може бути достатнім для невеликого проєкту або
для тестування.
 Для масштабованої системи, особливо з великим трафіком, можуть
знадобитися додаткові сервери для фронтенду, бекенду, а також для бази
даних.
2. Налаштування інфраструктури
 Node.js: Встановлення на сервер для забезпечення роботи бекенду.
Використовується для обробки запитів користувачів, взаємодії з базою
даних та логіки програми.
 PostgreSQL: Встановлення та налаштування бази даних для зберігання
даних користувачів, блогів, коментарів тощо.
3. Налаштування PostgreSQL
 Резервне копіювання: Налаштування регулярних бекапів бази даних
(наприклад, з використанням cron або pg_dump) для забезпечення безпеки
даних у разі збоїв.
 Оптимізація запитів: Використання індексів для швидкого доступу до
найбільш використовуваних даних, налаштування кешування запитів для
підвищення продуктивності.
 Моніторинг: Встановлення інструментів моніторингу бази даних
(наприклад, pgAdmin, Prometheus з Grafana) для спостереження за
продуктивністю та станом бази даних.
4. Налаштування зв'язку між бекендом та базою даних
 Зв'язок серверу з PostgreSQL: Налаштування з'єднання між сервером Node.js
і базою даних PostgreSQL. Для цього можна використовувати популярні
бібліотеки, наприклад, pg-promise або sequelize.
87
 Конфігурація середовища: Установлення змінних середовища для
зберігання чутливих даних, таких як облікові дані для бази даних.
5. Розгортання бекенду та фронтенду
 Запуск бекенд-сервера за допомогою процесу менеджера, наприклад, PM2
або Forever, для забезпечення стійкості при перезапусках.
 Налаштування роутерів та API для взаємодії з фронтендом та базою даних.
 Використання Express.js для побудови RESTful API або Socket.io для
реального часу.
 Фронтенд може бути розгорнутий за допомогою статичних серверів
(наприклад, Nginx) або за допомогою фреймворків, таких як React.js,
Vue.js чи Angular.
 Статичні файли (HTML, CSS, JS) можуть бути оброблені за допомогою веб-
сервера, наприклад, Nginx або Apache.
6. Тестування та моніторинг
Тестування системи: Після налаштування сервера та бази даних
необхідно провести тестування системи, перевіривши її на різні сценарії
навантаження, безпеку та правильність роботи.
Моніторинг: Встановлення інструментів для моніторингу роботи
серверів та додатків, таких як New Relic, Prometheus, Grafana.
7. Масштабування та підтримка
Масштабування: У разі росту кількості користувачів можна додати
додаткові сервери (як для фронтенду, так і для бекенду), використовуючи
масштабування по вертикалі чи горизонталі.
Балансування навантаження: Для збереження стабільної роботи системи
при високому трафіку можна використовувати балансувальники навантаження
(наприклад, NGINX або HAProxy).
Діаграма розгортання зображена на рисунку 4.6.
88
Рисунок 4.6 – Діаграма розгортання
Діаграма компонентів, що описує взаємодію між клієнтом, сервером та
базою даних, є важливим інструментом для розуміння архітектури програмної
системи. Ось як виглядає структура взаємодії:
Компоненти:
1. Клієнт:
Це користувацький інтерфейс, з яким взаємодіє кінцевий користувач.
Зазвичай реалізується у вигляді веб-сторінки або мобільного додатку,
що надає користувачам можливість переглядати, додавати та редагувати
блоги, коментарі та редагувати свої профілі.
Взаємодіє з сервером через HTTP/HTTPS запити, що можуть включати
GET, POST, PUT, DELETE для отримання та надсилання даних.
2. Сервер:
Сервер виконує роль обробки запитів від клієнта, обробляючи їх і
взаємодіючи з базою даних для отримання чи зберігання інформації.
89
Реалізує бізнес-логіку додатку: обробка даних, перевірка аутентифікації,
обробка запитів на створення або редагування контенту тощо.
Використовує HTTP/HTTPS протокол для передачі даних між клієнтом і
сервером.
3. База даних:
База даних зберігає всю критичну інформацію про користувачів, блоги
та коментарі.
Також містить дані для аутентифікації користувачів (логіни, паролі,
токени безпеки тощо).
Сервер може виконувати SQL запити для отримання, редагування або
видалення даних з бази.
Взаємодія:
1. Запити від клієнта до сервера:
Клієнт надсилає запити через HTTP/HTTPS для доступу до інформації
чи взаємодії з системою (наприклад, запит на реєстрацію, авторизацію,
створення коментаря, перегляд блогу).
Запити можуть бути GET (для отримання інформації) або POST (для
відправки даних, таких як новий блог або коментар).
2. Обробка запитів на сервері:
Сервер отримує запит і перевіряє, чи правильно він сформульований
(наприклад, чи вірний токен авторизації, чи є дані для додавання).
Якщо запит правильний, сервер звертається до бази даних для
зберігання чи отримання необхідної інформації.
Взаємодія з базою даних:
Сервер виконує SQL-запити до бази даних для отримання, додавання,
оновлення або видалення даних (наприклад, отримання списку всіх блогів,
додавання нового користувача, оновлення коментарів).
База даних може зберігати інформацію про користувачів, історію їхніх
запитів, коментарі, а також логіни та паролі для безпеки.
90
3. Відповідь від сервера до клієнта:
Після обробки запиту сервер формує відповідь (наприклад,
підтвердження створення блогу, інформацію про користувача або список
коментарів).
Відповідь відправляється назад до клієнта через HTTP/HTTPS, де вона
відображається в інтерфейсі користувача.
4. Безпека через HTTPS:
Всі запити та відповіді обробляються через HTTPS, що забезпечує
шифрування передачі даних та захищає від несанкціонованого доступу до
чутливої інформації (наприклад, паролів, персональних даних користувачів).
Ключові переваги цієї архітектури:
 Модульність: Логічне розділення на клієнт, сервер та базу даних дає
змогу кожному компоненту зосередитися на своїй частині роботи.
 Безпека: Використання HTTPS протоколу забезпечує захист даних на
кожному етапі взаємодії.
 Масштабованість: Легко можна масштабувати кожен з компонентів
окремо, наприклад, додавати нові сервери для зростаючої кількості
користувачів або нові ресурси для бази даних.
Ця модель архітектури є ефективною для створення веб-систем, які
потребують високої доступності та безпеки.
4.5 Дослідження поведінки системи
4.5.1 Діаграма діяльності
Діаграма діяльності (англ. Activity Diagram) — це тип поведінкової
діаграми UML (Unified Modeling Language), який використовується для
моделювання потоків робіт або алгоритмів у системі. Вона демонструє, як
виконуються дії або процеси, і показує послідовність та логіку виконання цих
дій.Діаграма діяльності зображена на рисунку 4.7
91
Рисунок 4.7 – Діаграма діяльності
Діаграма діяльності показує процес взаємодії користувача та
адміністратора після авторизації:
Авторизація:
Користувач або адміністратор вводять логін та пароль.
Система перевіряє правильність даних.
Доступ після авторизації:
1. Користувач: може переглядати особистий кабінет, блоги та залишати
коментарі.
2. Адміністратор: може створювати/редагувати блоги та коментарі,
переглядати інформацію про користувачів.
92
3. Завершення сесії: Користувач або адміністратор виходять з системи.
Це коротка послідовність дій, яка визначає доступ до різних функцій
залежно від ролі користувача.
4.5.2 Діаграма послідовності
Діаграма послідовності (англ. Sequence Diagram) — це один із типів
поведінкових діаграм UML, який використовується для моделювання
взаємодії між об'єктами у часовій послідовності. Вона показує, як об'єкти
обмінюються повідомленнями, щоб виконати певний сценарій або
функціональність. Діаграма послідовності зображена на рисунку 4.8.
Рисунок 4.8– Діаграма послідовності
Діаграма візуалізує послідовності з акторами "Інтерфейс", а також з
учасниками "Бекенд " та "БД". Діаграма починається з авторизації або
реєстрації на веб-сайті, перегляд блогу, створення нового блогу а також
коментування блогу.
93
4.5.3 Діаграма комунікації
Діаграма комунікації — це одна з поведінкових діаграм UML, яка
відображає взаємодію між об'єктами або компонентами системи у вигляді
мережі зв'язків. Вона фокусується на структурі взаємодій, підкреслюючи, як
об'єкти обмінюються повідомленнями в певному сценарії.Діаграма
комунікації зображена на рисунку 4.9.
Рисунок 4.9 – Діаграма комунікації
У цій діаграмі показані дії і комунікації, всі дії в даному сайті
відбуваються через сам сайт, напряму нема можливості взаємодії адміністрації
та користувачів. І ті які саме можуть ці актори дії виконувати
94
4.5.4 Діаграма скінченого автомату
Діаграма скінченого автомату (англ. State Machine Diagram, або State
Diagram) — це поведінкова діаграма в UML, яка описує всі можливі стани
об'єкта системи і переходи між ними в результаті виконання певних дій або
подій. Вона ґрунтується на концепції скінчених автоматів (Finite State
Machines). Діаграма скінченого автомату зображена на рисунку 4.10.
Рисунок 4.10 – Діаграма скінченого автомату
Ця діаграма візуалізує процес користування сайтом. Адміністратор
авторизується на сайті, створює блог. Реєструється або авторизується
користувач, додає інформацію про себе якщо вона не заповнена, переглядає
блог, залишає коментар, адміністратор перевіряє коментар на дотримання
правил, переглядає інформацію про користувача.Даний цикл може
повторюватись безліч разів, з усіма етапами, або ж випустив деякі.
95
4.6 Висновок до розділу 4
У цьому розділі виконано комплексне дослідження предметної області,
проведено моделювання та розробку архітектури веб-додатку "Техноблог".
Розгляд усіх аспектів системи дозволив визначити ключові елементи, вимоги
та структуру проєкту.
На основі аналізу техноблогів було визначено основні елементи,
необхідні для успішної роботи веб-додатку. Побудовано модель предметної
області та створено глосарій термінів, що систематизує основні поняття.
Розглянуто ключові функціональні елементи техноблогу, включаючи
структуру контенту, механізми взаємодії користувачів та адміністратора з
системою.
Проаналізовано функціональні та нефункціональні вимоги до
програмного забезпечення. Основний акцент зроблено на зручності
використання, інтерактивності, швидкодії та безпеці.
Побудовано діаграми класів і пакетів, що забезпечують структурний
огляд компонентів системи та їх взаємодії. Це допомогло візуалізувати
ключові об'єкти програмного забезпечення та взаємозв'язки між ними.
Розроблено діаграму компонентів, що демонструє взаємодію між
модулями системи.
Побудовано діаграми діяльності, послідовності, комунікації та скінченого
автомату, які відображають сценарії взаємодії користувачів із системою. Це
дозволило чітко окреслити логіку роботи додатку, включаючи дії
адміністратора, користувачів та внутрішні процеси системи.
Дослідження підтвердило доцільність обраного підходу до розробки веб-
додатку "Техноблог". Побудова чіткої моделі предметної області, визначення
вимог та архітектурного дизайну дозволяють забезпечити ефективність
реалізації програмного комплексу. Проведене моделювання створює міцну
основу для подальшої розробки функціоналу, оптимізації продуктивності та
впровадження.
96
РОЗДІЛ 5 ДОСЛІДЖЕННЯ СЕРВЕРУ, ЙОГО ОПТИМІЗАЦІЯ ТА
РЕФАКТОРИНГ
5.1 Аналіз коду
Техноблог — це веб-додаток, який використовує базу даних для
зберігання інформації про блоги. Основні функції:
 Отримання списку блогів (/blog).
 Додавання нових блогів (/addblog).
 Видалення блогу (/delblog).
Для наглядності розберемо перший і останній варіант коду і зрівняємо
прогрес змін і результати таких змін.
Перший варіант передбачав передачу даних через request.url і функцію
split для їх подальшого використання
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});
const http = require("http");
const fs = require("fs");
const { Client } = require('pg')
const client = new Client({
user: 'postgres',
host: 'localhost',
database: 'DB1',
password: '1234566',
port: 5432,
})
client.connect(function (err) {
if (err) throw err;
console.log("Connected!");
});
97
http.createServer(function (request, response) {
// перегляд блогів /////////////////////////////////////////////////
if (request.url === "/blog" && request.method === "GET") {
response.writeHead(200, { "Content-Type": "application/json" });
let query = `
SELECT *
FROM Blog
`;
let mas = [];
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row
for (row of res.rows) {
mas.push(row);
}
response.end(JSON.stringify(mas));
response.end();
});}
// додавання блогу //////////////////////////////////////////////////
if (request.url.split('?')[0] === "/addblog" && request.method ===
"GET") {
try {
const params = request.url.split('?')[1].split('&');
const id_blog = +params[0].split('=')[1];
const blog_name = +params[1].split('=')[1];
const blog_date = +params[2].split('=')[1];
const blog_time = +params[3].split('=')[1];
const id_user = +params[4].split('=')[1];
const path_foto = +params[5].split('=')[1];
const blog_text = +params[6].split('=')[1];
let query = `
98
SELECT *
FROM Blog
`;
let mas = [];
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row;
for (row of res.rows) {
mas.push(row);
}
let a = mas.length > 0 ? mas[mas.length - 1].id_blog + 1 : 1;
query = `
SELECT *
FROM TextBlog`;
let mas2 = [];
client.query(query, (err, res) => {
if (err) {
console.error(err);
return;
}
let row;
for (row of res.rows) {
mas2.push(row);
}
let b = mas2.length > 0 ? mas2[mas2.length - 1].id_TextBlog + 1 : 1;
if (blog_text.length > 255) {
let text255 = '';
let id_TextBlog = b;
let id_blog = a;
if (blog_text.length > 255) {
for (let i = 0; i < blog_text.length; i += 255) {
text255 = blog_text.slice(i, i + 255);
query = `INSERT INTO TextBlog (id_TextBlog, id_blog, text) VALUES
(${id_TextBlog}, ${id_blog}, '${text255}')`;
client.query(query);
99
id_TextBlog++;
}
} else {
document.getElementById('text-Out').innerText = blog_text;
query = `INSERT INTO TextBlog (id_TextBlog, id_blog, text) VALUES
(${id_TextBlog}, ${id_blog}, '${blog_text}')`;
client.query(query);
id_TextBlog++;
}
}
query = `INSERT INTO blog (id_blog, blog_name, blog_date, blog_time,
id_user, path_foto) VALUES (${id_blog}, '${blog_name}', '${blog_date}',
'${blog_time}', ${id_user}, '${path_foto}')`;
client.query(query);
response.writeHead(200, { "Content-Type": "application/json" });
});
});
} catch (error) {
response.writeHead(404, { "Content-Type": "application/json" });
response.end(JSON.stringify({ message: error }));
}
}
// Видалення блогу /////////////////////////////////////////////////////
if (request.url.split('?')[0] === "/delblog" && request.method ===
"GET") {
try {
const params = request.url.split('?')[1].split('&')
const table_name = +params[0].split('=')[1];
let query = "DELETE FROM blog WHERE id_blog =" + table_name;
client.query(query);
response.writeHead(200, { "Content-Type": "application/json" });
} catch (error) {
response.writeHead(404, { "Content-Type": "application/json" });
response.end(JSON.stringify({ message: error }));
} }
100
5.2 Розбір коду та план оптимізації
1. Загальна структура
 Використовується Express для побудови серверної логіки.
 Використовується pg для роботи з PostgreSQL.
 Механізм обробки запитів реалізовано на основі URL-адрес і методів
HTTP.
Як бачимо з прикладу коду сервера наведеного вище код має досить
складний вигляд, можемо легко допустити помилку під час отримання даних з
фронтенду і неправильно їх обробити.
Якщо буде порушено почерговість маємо шанс або внести помилку в
базу даних або отримати купу помилок при виконанні.
Рішенням даної проблеми може стати використання REST Api а саме
його функцій передачі даних від фронтенду до бекенду через більш доречніші
через post запити, використовуючи req.query або req.body для POST-запитів.
Іншим мінусом який я хотів би змінити це захист від SQL-ін’єкції це
вставка параметрів напряму в SQL-запити, це покращить безпеку такої
передачі, також це покращить зовнішній вигляд коду, зробить його менш
складним.
Також код має багато повторень без яких у старому підході обійтись
складно, це по перше робить програму (код) більшим, а також може впливати
на оптимізацію і швидкодію при роботі з великим обсягом даних
Відсутність RESTful-підходу: URL-адреси /addblog і /delblog краще
замінити на POST /blog і DELETE /blog.
5.3 Процес рефакторингу
5.3.1 Передача даних через метод POST
Об'єкт req.body дозволяє клієнту отримати доступ до даних у рядку або
об'єкті JSON. Як правило, об'єкт req.body використовується для отримання
101
даних через запити POST і PUT на сервері Express. Тобто ми фундаментально
змінимо функцію get на функцію Post.
POST[36] – це метод, який підтримується HTTP, який показує, що веб-
сервер приймає дані, включені в тіло повідомлення. POST часто
використовується у Всесвітній павутині для відправки даних користувача на
веб-сервер або при завантаженні файлу.
Особливості GET
Ось важливі особливості GET:
 Додати дані в закладки за допомогою методу GET дуже просто.
 Обмеження по довжині методу GET обмежене.
 Ви можете використовувати цей метод лише для отримання даних з
адресного рядка браузера.
 Цей метод дозволяє легко зберігати дані.
Особливості POST
Ось важливі особливості POST:
 Запит методу POST отримує вхідні дані з тіла запиту та рядка запиту.
 Дані, передані за допомогою методу POST, не будуть відображатися
в параметрах запиту в URL браузера.
 Налаштування методу POST не зберігаються в історії браузера.
 Тривалість відправки даних не обмежена.
 Це допомагає безпечно передавати конфіденційну інформацію, таку
як дані для входу на сервер.
Тому для додатку буде доречніше використовувати req.query для GET
або req.body для POST.
app.use(express.json()); // для роботи з JSON
app.use(express.urlencoded({ extended: true })); // для роботи з form-
data
Для коду програми це буде виглядати так:
// Отримання одного блогу
app.get('/blogs/:id', async (req, res) => {
102
const { id } = req.params;
try {
const result = await pool.query('SELECT * FROM Blog WHERE id_blog =
$1', [id]);
res.json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
5.3.2 SQL запити
SQL-ін’єкція — це один із найпоширеніших та найнебезпечніших типів
атак на веб-додатки. Зловмисник може використати недоліки в обробці
введених даних, щоб виконати небажані SQL-запити, які загрожують безпеці
бази даних.
Як працює SQL-ін’єкція ?
Вразливість: SQL-запити у коді будуються безпосередньо з рядків,
введених користувачем, без перевірки чи екранування.
Приклад уразливого коду:
const userId = req.query.id;
const query = `SELECT * FROM users WHERE id_user = '${userId}'`;
const result = await pool.query(query);
Якщо id у запиті є, наприклад, 1 OR 1=1, результат запиту буде:
SELECT * FROM users WHERE id_user = '1 OR 1=1';
Це може призвести до того, що база поверне всі рядки таблиці.
Зловмисні дії:
Отримання конфіденційних даних.
Зміна даних у базі.
Видалення даних або навіть знищення бази.
Захист
Використання параметризованих запитів
Замість формування SQL-запитів через рядки використовуйте
параметризовані запити. Це автоматично екранує вхідні дані.
Приклад
103
const userId = req.query.id;
const query = 'SELECT * FROM users WHERE id_user = $1';
const result = await pool.query(query, [userId]);
У цьому випадку навіть шкідливе введення, наприклад 1 OR 1=1, буде
сприйнято як текст.
5.3.3 RESTful API
RESTful API[37] — це інтерфейс, який використовується двома
комп'ютерними системами для безпечного обміну інформацією через
Інтернет. Більшість бізнес-додатків повинні взаємодіяти з іншими
внутрішніми та сторонніми програмами для виконання різних завдань.
Наприклад, щоб генерувати щомісячні нарахування заробітної плати, ваша
внутрішня система бухгалтерського обліку повинна взаємодіяти з банківською
системою вашого клієнта, щоб автоматизувати виставлення рахунків і
взаємодіяти з внутрішнім додатком для відстеження робочого часу. RESTful
API підтримують цей обмін інформацією, оскільки вони дотримуються
безпечних, надійних та ефективних стандартів програмної взаємодії.
Що таке API?
Інтерфейс прикладного програмування (API) визначає правила, яких
необхідно дотримуватися для зв'язку з іншими програмними системами.
Розробники впроваджують або створюють API, щоб інші додатки могли
програмно взаємодіяти з їхніми додатками. Отримавши інформацію, сервер
внутрішньо обробляє його і повертає інформацію на інтерфейс.
Таким чином, мережевий API функціонує як шлюз між клієнтами та
ресурсами в Інтернеті.
Що таке REST
Representational State Transfer (REST) – це архітектура програмного
забезпечення, яка визначає умови API. Спочатку REST був створений як
посібник для керування взаємодіями в такій складній мережі, як Інтернет. Ви
можете використовувати архітектуру на основі REST для підтримки
104
високопродуктивного та надійного зв'язку в масштабі. Вона може бути легко
впроваджена та модифікована, забезпечуючи прозорість та кросплатформну
переносимість будь-якої API-системи.
Розробники можуть створювати API за допомогою кількох архітектур.
API, які дотримуються архітектурного стилю REST, називаються REST API.
Веб-сервіси, які реалізують архітектуру REST, називаються веб-сервісами
RESTful. Як правило, термін RESTful API відноситься до мережевих RESTful
API. Однак REST API та RESTful API є взаємозамінними термінами.
5.4 Результати дослідження і оптимізації
В результаті дослідження було виявлено слабкі місця програми і
виправлено, в результаті маємо код:
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const { Pool } = require('pg');
const app = express();
app.use(cors());
app.use(bodyParser.json());
// Підключення до бази даних PostgreSQL
const pool = new Pool({
user: 'postgres',
host: 'localhost',
database: 'DB1',
password: '1234566',
port: 5432,
});
// Отримання всіх блогів з пагінацією
app.get('/blogs', async (req, res) => {
const { page = 1, limit = 5 } = req.query;
const offset = (page - 1) * limit;
try {
const result = await pool.query(
'SELECT * FROM Blog ORDER BY id_blog DESC LIMIT $1 OFFSET $2',
[limit, offset]
);
res.json(result.rows); // Відправляємо список блогів
} catch (err) {
console.error('Error in /blogs route:', err.message); // Додатковий лог
помилки
res.status(500).json({ error: 'Internal Server Error', details:
err.message });
}
});
105
// Отримання одного блогу
app.get('/blogs/:id', async (req, res) => {
const { id } = req.params;
try {
const result = await pool.query('SELECT * FROM Blog WHERE id_blog = $1',
[id]);
res.json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Додавання блогу
app.post('/blogs', async (req, res) => {
const { blog_name, path_foto, blog_text, id_user } = req.body;
const blog_date = new Date().toISOString().slice(0, 10);
const blog_time = new Date().toISOString().slice(11, 16);
try {
const result = await pool.query(
'INSERT INTO Blog (blog_name, path_foto, blog_text, blog_date, blog_time,
id_user) VALUES ($1, $2, $3, $4, $5, $6) RETURNING *',
[blog_name, path_foto, blog_text, blog_date, blog_time, id_user]
);
res.status(201).json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Видалення блогу
app.delete('/blogs/:id', async (req, res) => {
const { id } = req.params;
try {
const result = await pool.query('DELETE FROM Blog WHERE id_blog = $1',
[id]);
if (result.rowCount > 0) {
res.status(200).json({ message: 'Blog deleted' });
} else {
res.status(404).json({ error: 'Blog not found' });
}
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Отримання тексту блогу
app.get('/TextBlog', async (req, res) => {
const { id_blog } = req.query; // Отримуємо id_blog з параметрів запиту
if (!id_blog) {
return res.status(400).json({ error: 'id_blog is required' }); // Перевірка
на наявність id_blog
}
try {
const result = await pool.query('SELECT * FROM TextBlog WHERE id_blog = $1',
[id_blog]);
106
if (result.rowCount > 0) {
res.json(result.rows); // Відправляємо всі знайдені записи з таблиці
TextBlog для конкретного id_blog
} else {
res.status(404).json({ error: 'No text blogs found for the provided
id_blog' });
}
} catch (err) {
console.error('Error fetching text blogs:', err.message);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Отримання коментарів до блогу
app.get('/comment', async (req, res) => {
const { id_blog } = req.query; // Отримуємо id_blog з параметрів запиту
if (!id_blog) {
// Перевірка на наявність id_blog у запиті
return res.status(400).json({ error: 'id_blog is required' });
}
try {
// Виконуємо запит до бази даних для отримання коментарів
const result = await pool.query('SELECT * FROM Comment WHERE id_blog = $1',
[id_blog]);
if (result.rowCount > 0) {
// Якщо коментарі знайдено, відправляємо їх у відповідь
res.json(result.rows);
} else {
// Якщо коментарів немає, повертаємо порожній масив
res.status(200).json([]);
}
} catch (err) {
// Логування помилки сервера
console.error('Error fetching comments:', err.message);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Реєстрація користувача
app.post('/users/register', async (req, res) => {
const { login_user, password_user } = req.body;
try {
const result = await pool.query(
'INSERT INTO users (login_user, password_user) VALUES ($1, $2) RETURNING *',
[login_user, password_user]
);
res.status(201).json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Авторизація користувача
app.post('/users/login', async (req, res) => {
const { login_user, password_user } = req.body;
107
try {
const result = await pool.query(
'SELECT * FROM users WHERE login_user = $1 AND password_user = $2',
[login_user, password_user]
);
if (result.rowCount > 0) {
res.json({ message: 'Login successful' });
} else {
res.status(401).json({ error: 'Invalid credentials' });
}
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Отримання даних користувача
app.get('/Users', async (req, res) => {
const { user_id } = req.query;
try {
const result = await pool.query('SELECT * FROM users WHERE id_user = $1',
[user_id]);
res.json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Запуск сервера на порту 8081
const port = 8081;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
Як бачимо охайність коду вже стала кращою, також тепер підвищився
захист програми , також підвищилась продуктивність, в рамках невеликого
веб- додатку можливо і несуттєво, але для розробки великих проектів
економія майже в половину часу виконання , а також відповідно зменшення
навантаження на сервер.
На рисунку 5.1 маємо результати тесту старого варіанту програми.
108
Рисунок 5.1 – Тестування першого варіанту додатку
На рисунку 5.2 маємо результати тесту фінального варіанту серверу
Рисунок 5.2 – Тестування фінального варіанту додатку
Тепер можемо порахувати процент економії часу виконання просто
поділивши ці два результати 0.26/0.39 = 0.66667 тобто економія становить
приблизно 67%.
5.5 Висновок до розділу 5
У результаті дослідження та аналізу продуктивності сервера було
виявлено кілька ключових аспектів, що потребують покращення для
підвищення ефективності роботи системи в цілому. Основні проблеми, які
були виявлені, включають надмірне навантаження на окремі компоненти
серверної архітектури, затримки в обробці запитів, а також неефективне
використання ресурсів.
109
Оптимізація серверних налаштувань дозволила значно зменшити час
відповіді системи та знизити навантаження на базу даних, що було досягнуто
завдяки новим підходам, білш правильної предачі даних з серверу і
впровадженню асинхронної обробки деяких процесів. Рефакторинг коду
сервера дозволив зробити його більш зрозумілим, масштабованим та
підтримуваним, що, в свою чергу, знизило ймовірність виникнення помилок і
спростило процеси тестування й оновлення.
Загалом, виконані заходи щодо оптимізації й рефакторингу сервера
дозволили досягти значного покращення його продуктивності та надійності.
Це забезпечить стабільну роботу системи в умовах високих навантажень, а
також дозволить легко адаптувати сервер до майбутніх вимог і технологічних
змін.
110
РОЗДІЛ 6 ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
6.1 Модульне тестування
Модульне тестування є одним з методів тестування програмного
забезпечення, який використовується для перевірки окремих модулів або
компонентів (функцій, методів, класів) програми на правильність їх роботи.
У модульному тестуванні кожен модуль тестується ізольовано від інших
частин програми, зазвичай з використанням автоматизованих тестових
сценаріїв.
Основна мета модульного тестування - перевірка коректності роботи
окремих модулів без залучення інших залежних компонентів або зовнішніх
ресурсів, таких як бази даних або мережеві служби. Це дозволяє виявляти та
виправляти помилки ранніх етапах розробки, поліпшувати структуру коду
та забезпечувати більшу стабільність і надійність програми.
Модульні тести зазвичай описуються у вигляді коду тестів, який
перевіряє очікувані результати виконання певних функцій або методів і
порівнює їх з фактичними результатами. Успішне проходження модульних
тестів підтверджує правильність роботи модулів, а виявлення
несправностей допомагає виявити й виправити помилки.
Тестування було проведено подібним методом:
// Модульне тестування функції generateBlogHTML
function testGenerateBlogHTML() {
// Підготовка тестових даних
const data = [
{
id_blog: 1,
blog_name: 'Blog 1',
path_foto: 'path/to/image1.jpg',
blog_date: '2023-05-14',
blog_time: '10:00:00',
id_user: 1,
},
{
id_blog: 2,
blog_name: 'Blog 2',
path_foto: 'path/to/image2.jpg',
111
blog_date: '2023-05-13',
blog_time: '12:00:00',
id_user: 2,
},
];
// Маніпуляція з DOM
const blogContainer = document.createElement('div');
blogContainer.setAttribute('id', 'blog-container');
document.body.appendChild(blogContainer);
// Виклик функції, яку тестуємо
displayBlogs(data);
// Перевірка результату
const blogItems = document.getElementsByClassName('blog-
item');
if (blogItems.length !== data.length) {
console.error('Test failed: Incorrect number of blog
items');
}
// Очищення DOM
document.body.removeChild(blogContainer);
}
// Запуск тестування
testGenerateBlogHTML();
У цьому прикладі ми створюємо тестові дані з двома блогами і
викликаємо функцію displayBlogs, передаючи їй ці дані. Потім перевіряємо, чи
відображено правильну кількість блогів у DOM. Якщо кількість блогів не
співпадає з очікуваною, виводимо повідомлення про помилку.
Приклад модульного тесту для даного коду, використовуючи популярну
бібліотеку для модульного тестування у JavaScript - Jest:
const { test, expect, beforeEach, afterEach } =
require('jest');
// Підключення необхідних модулів та налаштування
const { createServer } = require('http');
const { Client } = require('your-database-library'); //
Замініть 'your-database-library' на бібліотеку, яку ви
використовуєте
const yourModule = require('./your-module'); // Замініть
'./your-module' на шлях до вашого модуля
let server;
let client;
beforeEach(() => {
// Перед кожним тестом створюємо сервер та клієнта бази
даних
112
server = createServer(yourModule);
client = new Client();
client.connect();
});
afterEach((done) => {
// Після кожного тесту закриваємо сервер та клієнта бази
даних
server.close();
client.end(done);
});
test('GET /blog should return JSON array of blog data',
(done) => {
const options = {
hostname: 'localhost',
port: 3000, // Замініть на потрібний порт
path: '/blog',
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
};
// Виконуємо HTTP-запит на сервер
const req = http.request(options, (res) => {
expect(res.statusCode).toBe(200);
expect(res.headers['content-
type']).toBe('application/json');
let responseData = '';
res.on('data', (chunk) => {
responseData += chunk;
});
res.on('end', () => {
const blogData = JSON.parse(responseData);
expect(Array.isArray(blogData)).toBe(true);
blogData
done(); // Повідомляємо Jest, що тест завершено
});
});
req.end();
});
У цьому прикладі ми використовуємо Jest для створення тесту, який
виконує GET-запит на сервер за URL-адресою "/blog" і перевіряє, чи
повертається правильна відповідь. Також перевіряється код статусу,
заголовки та формат даних (JSON масив). також можна додатково
розширити тест, щоб перевірити структуру даних, якщо необхідно.
113
6.2 Інтеграційне тестування
Інтеграційне тестування - це процес перевірки взаємодії між різними
компонентами або модулями системи з метою виявлення помилок, що можуть
виникнути при їхній спільній роботі. Це тестування дозволяє перевірити, чи
працюють окремі компоненти системи належним чином разом і чи передають
вони дані із заявленими специфікаціями.
Щоб провести інтеграційне тестування коду, потрібно створити тестове
середовище, включаючи моковані дані та серверну частину.
Інтеграційне тестування передбачає перевірку взаємодії між різними
компонентами системи, включаючи клієнтську і серверну частини. В даному
випадку, це означає перевірку взаємодії між клієнтом (браузером) і сервером,
коли відбувається завантаження блогів, додавання блогів, видалення блогів та
інші операції.
Основні кроки для проведення інтеграційного тестування коду будуть
наступними:
Налаштування тестового середовища:
1. Запустив серверну частину коду на локальному сервері або
використовуйте сервіс для тестування API (наприклад, Postman Mock
Server).
2. Забезпечив наявність мокованих даних для тестування, які можна
використовувати під час запитів до сервера.
3. Написав тести, які перевіряють різні аспекти функціональності коду, такі
як завантаження блогів, додавання блогів, видалення блогів та інші
операції.
4. Використав тестовий фреймворк Jest, для створення й виконання тестів.
Тести були проведені на працюючій програмі, використовуючи тестові
дані, в ході тестування було виправлено баг на відображення коментарів
114
6.3 Системне тестування
Системне тестування (System Testing) є одним з етапів тестування
програмного забезпечення і включає в себе перевірку функціональності
системи в цілому.
Системне тестування головного меню:
Рисунок 6.1 - Головне меню
Під час відкриття головного меню сайту виконується такі процедури
функції section1, в якій виконуються наступні дії:
1. Ініціалізація змінних для керування сторінками та кількістю блогів на
сторінці.
2. Створення функції generateBlogHTML, яка отримує дані з сервера, сортує
їх у зворотньому порядку за значенням id_blog, вибирає поточну сторінку
блогів та відображає їх.
3. Створення функції addLoadMoreButton, яка додає кнопку "Завантажити
ще" та встановлює обробник події для завантаження нових блогів.
4. Створення функції displayBlogs, яка відображає блоги на сторінці.
5. Встановлення обробників подій для додавання блогу та видалення блогу.
6. Функція saveComment, яка зберігає коментарі до блогів.
115
7. Виклик функції section1 для ініціалізації програми.
8. Створення функції section2, в якій виконуються наступні дії:
9. Отримання поточної дати і часу.
10.Заповнення полів форми для додавання блогу.
11.Отримання останнього id_blog з бази даних та автоматичне заповнення
поля для id_blog.
12.Виклик функції section2 для ініціалізації програми.
Цей флоу програми дозволяє відображати блоги, додавати нові блоги,
видаляти блоги та зберігати коментарі до блогів.
Системне тестування Авторизації:
Рисунок 6.2 - Сторінка авторизації
Під час відкриття розділу авторизації сайту виконується такі процедури:
1 Користувач відкриває сторінку авторизації.
2 Користувач вводить свої облікові дані, такі як логін і пароль.
3 Користувач натискає кнопку "Увійти" або подібний елемент для
підтвердження введених даних.
4 На сервер відправляється запит на перевірку облікових даних.
116
5 Сервер перевіряє введені дані збережених користувачів, що зберігаються
в базі даних або іншому місці.
6 Якщо облікові дані вірні, сервер надсилає відповідь з позитивним
результатом авторизації.
7 Клієнт отримує позитивну відповідь і переходить до основної частини
програми або відображає повідомлення про успішну авторизацію.
8 Якщо облікові дані невірні, сервер надсилає відповідь з негативним
результатом авторизації.
9 Клієнт отримує негативну відповідь і відображає повідомлення про
невдалий вхід або додає інші візуальні підказки для користувача.
10 Користувач може повторити процес авторизації, введення облікових
даних і натискання кнопки "Увійти" для спроби знову увійти.
Системне тестування реєстрації:
Рисунок 6.3 - Сторінка реєстрації
Під час роботи розділу реєстрації сайту виконується такі процедури:
1. Користувач відкриває сторінку реєстрації.
2. Клієнт заповнює поле "Логін" введенням бажаного логіну.
3. Клієнт заповнює поле "Пароль" введенням бажаного пароля.
117
4. Клієнт заповнює поле "Прізвище ім'я По-Батькові" введенням свого
повного імені.
5. Клієнт заповнює поле "Дата народження" введенням своєї дати
народження.
6. Клієнт натискає кнопку "Зареєструватися".
7. Виконується запит до сервера за допомогою fetch(), з отриманням даних
користувачів за адресою http://127.0.0.1:8081/Users.
8. Отримані дані про користувачів обробляються в форматі JSON.
9. Кількість користувачів визначається шляхом підрахунку кількості
отриманих записів.
10.Клієнт встановлює отриману кількість користувачів + 1 у полі "Ваш ID
буде".
11.Клієнт отримує значення логіну, пароля, повного імені та дати
народження, які він ввів.
12.Виконується шифрування пароля за допомогою алгоритму зі здвигом.
13.Виведення результату шифрування пароля на сторінці.
14.Створення об'єкту FormData і заповнення його даними про користувача,
включаючи ID, логін, зашифрований пароль, повне ім'я, дату народження
та ID модератора.
15.Виконується POST-запит до адреси /addUser з використанням створеного
об'єкту FormData.
16.Сервер обробляє отримані дані і зберігає нового користувача в базі даних.
17.Після успішного виконання запиту, на сторінці очищує поля вводу
6.4 Приймальне тестування
Після запуску програми бачимо таке вікно
118
Рисунок 6.4 – Головна сторінка
Після запуску можна лише переглядати блоги та контакти
Рисунок 6.5 - Сторінка контактів
Для подальших функцій потрібно зареєструватися і авторизуватись,
тому натискаємо кнопку для реєстрації і отримуємо таке вікно:
119
Рисунок 6.6 - Сторінка реєстрації
Після вводу інформації і натискання кнопки зареєструватись аккаунт
створено і можемо перейти до авторизації, натискаємо кнопку авторизації
Рисунок 6.7 - Сторінка авторизації
Вводимо логін і пароль , якщо авторизація успішна можемо перейти і
переглянути свій профіль натиснувши відповідну кнопку.
120
Рисунок 6.8 - Сторінка профіль
Тепер якщо ми маємо права адміністратора можемо добавляти та
видаляти блоги.
Рисунок 6.9 – Додання та видалення блогу
121
Для цього заповняємо поля і натискаємо відповідно кнопку
Для перегляду іншої сторінки з блогами більш давнішими потрібно
натиснути кнопку «Завантажити ще».
Рисунок 6.10 - Кнопка «Завантажити ще»
Використовуючи описані елементи навігації здійснюється основні
функції сайту.
6.5 Висновок до розділу 6
У цьому розділі розглянуто ключові аспекти тестування програмного
комплексу для веб-додатку "Техноблог". Було розглянуто тести, розрібрано
архітектуру системи та інтерфейс користувача. Завершальним етапом стало
122
комплексне тестування, яке підтвердило відповідність розробленої системи
поставленим вимогам.
Тестування системи
 Проведено модульне тестування, яке перевірило правильність роботи
окремих компонентів системи, забезпечуючи стабільну
функціональність кожного модуля.
 Інтеграційне тестування виявило та усунуло можливі проблеми у
взаємодії між компонентами.
 Системне тестування підтвердило відповідність програмного
комплексу усім функціональним і нефункціональним вимогам.
 Приймальне тестування довело, що система готова до впровадження
та здатна задовольнити потреби користувачів.
Загальний висновок
Розроблений веб-додаток "Техноблог" повністю відповідає вимогам
сучасних технологій розробки програмного забезпечення. Використання
актуальних інструментів і методів тестування забезпечило надійність,
продуктивність і зручність системи. Успішне завершення етапу розробки та
тестування закладає основу для впровадження програмного комплексу в
експлуатацію.
123
ВИСНОВКИ
У процесі виконання кваліфікаційної роботи магістра було проведено
комплексне дослідження найпопулярніших технологій програмування, що
включало аналіз мов програмування, середовищ розробки та баз даних, а
також дослідження різних підходів до програмування, зрівняння старої школи
програмування і нових технологій. Кожна з цих складових детально вивчалася
з метою оцінки їх ефективності, зручності використання та сучасних потреб
для веб - розробки.
Перший розділ містить в тому щоб зібрати інформацію про блоги і
технології розробки, проаналізувати їх основні характеристики для подальшої
оцінки.
Результатом другого розділу було детально описанотехнології, які
активно використовуються у веброзробці, а саме HTML, JS,PosgreSQL
Третій розділ присвячений моделюванню та синтезу додатку, а
також розібрано основні функції.
В четвертому розділі було досліджено технічні аспекти додатку,
розібрано його роботу, представлено графічно у вигляді діаграм для більш
зручної демонстрації.
П’ятий розділ присвячений дослідженню веб додатку техноблог, було
розроблено його спочатку старим легким способом. Після цього його було
проаналізовано, визначено його слабкі місця. І нарешті виправлено застарілі
методи, доведено код до охайного вигляду, в результаті покращився захист
даних, читаємість коду, а також швидкодія серверу.
Метою шостого розділу було тестування додатку. Було використано
прості юніт тести, а також продемонстровано роботу додатку і описано всі
можливості з описом і інструкцію до додатку.
124
Результати цього дослідження можуть стати корисними для
програмістів, які прагнуть обрати оптимальні комбінації технологій, що
відповідають їхнім критеріям, проєктам та задачам.
В рамках роботи було розроблено тестовий проєкт, що демонструє
застосування обраних технологій у реальних умовах. Створений вебдодаток —
техноблог — є не лише завершеним продуктом, але й універсальною
платформою, яку можна використовувати як базу для подальшої розробки та
кастомізації блогу будь-якої тематики.
Дослідження та розробка, проведені у кваліфікаційній роботі,
дозволяють зробити наступні висновки:
 Запропоновані технології забезпечують високий рівень продуктивності та
зручності розробки.
 Тестовий проєкт підтверджує практичну цінність дослідження,
демонструючи, як можна інтегрувати сучані технології для створення
сучасного вебдодатка.
 Робота сприяє вдосконаленню підходів до вибору технологій у веброзробці
та є прикладом для інших програмістів у пошуку оптимальних рішень.
Таким чином, виконана робота не лише вирішує поставлені завдання,
але й створює ґрунт для подальших досліджень і вдосконалень у сфері
вебтехнологій.
125
СПИСОК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ
БД – База даних.
СУБД – Система управління базами даних.
Блог – Веб-сайт або платформа для публікації статей, новин та особистих
записів.
Бекенд – Серверна частина програмного забезпечення, відповідальна за
обробку даних та логіку додатка.
Фронтенд – Клієнтська частина програмного забезпечення, яка відповідає
за відображення інтерфейсу користувача.
Веб-розробка – Процес створення веб-додатків або веб-сайтів.
Програмування – Процес створення програмного забезпечення шляхом
написання коду.
Тестування – Процес перевірки функціональності та якості програмного
забезпечення.
SQL – Структурована мова запитів, яка використовується для роботи з
реляційними базами даних.
UML-діаграми – Unified Modeling Language (уніфікована мова
моделювання) – графічні діаграми для візуалізації, специфікації,
конструювання та документування програмних систем.
JS – JavaScript, мова програмування для створення динамічного контенту
на веб-сторінках.
HTML – HyperText Markup Language, стандартна мова розмітки для
створення веб-сторінок.
126
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. ІПШРІТ-2024 [Електронний ресурс]. – Режим доступу:
https://itp.chdtu.edu.ua/iii-mizhnarodna-naukovo-praktychna-internet-
konferencziya-innovacziyi-ta-perspektyvni-shlyahy-rozvytku-informacziynyh-
tehnologiy-ipshrit-2024/
2. Techcrunch [Електронний ресурс]. – Режим доступу:
https://techcrunch.com/
3. The Verge [Електронний ресурс]. – Режим доступу:
https://www.theverge.com/
4. Wired [Електронний ресурс]. – Режим доступу: https://www.wired.com/
5. Engadget [Електронний ресурс]. – Режим доступу:
https://www.engadget.com/
6. Ars Technica [Електронний ресурс]. – Режим доступу:
https://arstechnica.com/
7. dou.ua [Електронний ресурс]. – Режим доступу:
https://dou.ua/lenta/articles/language-rating-2024/
8. Вікіпедія JavaScript [Електронний ресурс]. – Режим доступу:
https://uk.wikipedia.org/wiki/ JavaScript
9. Вікіпедія Python [Електронний ресурс]. – Режим доступу:
https://uk.wikipedia.org/wiki/Python
10.Вікіпедія Ruby [Електронний ресурс]. – Режим доступу:
https://uk.wikipedia.org/wiki/Ruby
11.Вікіпедія PHP [Електронний ресурс]. – Режим доступу:
https://uk.wikipedia.org/wiki/PHP
12.Вікіпедія TypeScript [Електронний ресурс]. – Режим доступу:
https://uk.wikipedia.org/wiki/TypeScript
13.Вікіпедія Go [Електронний ресурс]. – Режим доступу:
https://uk.wikipedia.org/wiki/Go
127
14.Visual Studio Code [Електронний ресурс]. – Режим доступу:
https://code.visualstudio.com/
15.PyCharm [Електронний ресурс]. – Режим доступу:
https://www.jetbrains.com/pycharm/
16.RubyMine [Електронний ресурс]. – Режим доступу:
https://www.jetbrains.com/ruby/
17.PHPStorm [Електронний ресурс]. – Режим доступу:
https://www.jetbrains.com/phpstorm/
18.Atom [Електронний ресурс]. – Режим доступу: https://atom.io/
19.IntelliJ IDEA [Електронний ресурс]. – Режим доступу:
https://www.jetbrains.com/idea/
20.Sublime Text [Електронний ресурс]. – Режим доступу:
https://www.sublimetext.com/
21.Notepad++ [Електронний ресурс]. – Режим доступу: https://notepad-plus-
plus.org/
22.MySQL Reference Manual [Електронний ресурс]. – Режим доступу:
https://dev.mysql.com/doc/refman/.
23.PostgreSQL Documentation [Електронний ресурс]. – Режим доступу:
https://www.postgresql.org/docs/.
24.MongoDB Documentation [Електронний ресурс]. – Режим доступу:
https://www.mongodb.com/docs/.
25.SQLite Documentation [Електронний ресурс]. – Режим доступу:
https://www.sqlite.org/docs.html.
26.Microsoft SQL Server Documentation [Електронний ресурс]. – Режим
доступу: https://learn.microsoft.com/en-us/sql/.
27.Oracle Database Documentation [Електронний ресурс]. – Режим доступу:
https://docs.oracle.com/en/database/.
28.HTML and CSS: Design and Build Websites [Книга]. Автор: Jon Duckett. Рік
видання: 2011.
128
29.Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and
Web Graphics [Книга]. Автор: Jennifer Robbins. Рік видання: 2018.
30.Основи UML [Електронний ресурс]. Режим доступу:
https://docs.kde.org/trunk5/uk/umbrello/umbrello/uml-basics.html.
31.Practical Node.js: Building Real-World Scalable Web Apps [Книга]. Автор:
Azat Mardan. Рік видання: 2014.
32.Mastering PostgreSQL [Книга]. Автор: Hans-Jürgen Schönig. Рік видання:
2020.
33.Авраменко В.С. Проектування інформаційних систем / В.С. Авраменко.
[Електронне видання]. – Черкаси: ЧНУ ім. Богдана Хмельницького, 2015.
– 496 с.
34.Pro HTML5 and CSS3 Design Patterns [Книга]. Автор: Michael Bowers. Рік
видання: 2011.
35.Freeman, Eric. Head First Design Patterns: Building Extensible and
Maintainable Object-Oriented Software [Книга]. Автори: Eric Freeman,
Elisabeth Robson. Рік видання: 2021.
36.Mullen, Richard. Understanding HTTP: A Beginner's Guide to GET, POST,
and RESTful APIs [Електронний ресурс]. Режим доступу:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST
37.Richardson, Leonard. RESTful Web APIs [Книга]. Автори: Leonard
Richardson, Mike Amundsen. Рік видання: 2013.
ДОДАТОК А
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор Віра БАБЕНКО
__________________
«___» ____________ 2024 року
Дослідження і синтез web – додатку техноблог системного адміністратора
Специфікація
482.ЧДТУ.42324-01
Листів 2
Розробник _______________ Денис БОЙКО
Керівник _______________ Валерій ТАЗЕТДІНОВ
Черкаси 2024
2
482.ЧДТУ.42324-01
Позначення Найменування Примітка
Документація
482.ЧДТУ.42324-01 12 01 Текст програми
482.ЧДТУ.42324-01 34 01 Інструкція користувача
ДОДАТОК Б
Дослідження і синтез web – додатку техноблог системного адміністратора
Текст програми
482.ЧДТУ.42324-01 12 01
Листів 11
Розробник _______________ Денис БОЙКО
Черкаси 2024
2
482.ЧДТУ.42324-01 12 01
Лістинг бекенду JS:
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const { Pool } = require('pg');
const app = express();
app.use(cors());
app.use(bodyParser.json());
// Підключення до бази даних PostgreSQL
const pool = new Pool({
user: 'postgres',
host: 'localhost',
database: 'DB1',
password: '1234566',
port: 5432,
});
// Отримання всіх блогів з пагінацією
app.get('/blogs', async (req, res) => {
const { page = 1, limit = 5 } = req.query;
const offset = (page - 1) * limit;
try {
const result = await pool.query(
'SELECT * FROM Blog ORDER BY id_blog DESC LIMIT $1 OFFSET $2',
[limit, offset]
);
res.json(result.rows); // Відправляємо список блогів
} catch (err) {
console.error('Error in /blogs route:', err.message); // Додатковий лог помилки
res.status(500).json({ error: 'Internal Server Error', details: err.message });
}
});
// Отримання одного блогу
app.get('/blogs/:id', async (req, res) => {
const { id } = req.params;
try {
const result = await pool.query('SELECT * FROM Blog WHERE id_blog = $1', [id]);
res.json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
3
482.ЧДТУ.42324-01 12 01
// Додавання блогу
app.post('/blogs', async (req, res) => {
const { blog_name, path_foto, blog_text, id_user } = req.body;
const blog_date = new Date().toISOString().slice(0, 10);
const blog_time = new Date().toISOString().slice(11, 16);
try {
const result = await pool.query(
'INSERT INTO Blog (blog_name, path_foto, blog_text, blog_date, blog_time,
id_user) VALUES ($1, $2, $3, $4, $5, $6) RETURNING *',
[blog_name, path_foto, blog_text, blog_date, blog_time, id_user]
);
res.status(201).json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Видалення блогу
app.delete('/blogs/:id', async (req, res) => {
const { id } = req.params;
try {
const result = await pool.query('DELETE FROM Blog WHERE id_blog = $1', [id]);
if (result.rowCount > 0) {
res.status(200).json({ message: 'Blog deleted' });
} else {
res.status(404).json({ error: 'Blog not found' });
}
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Отримання тексту блогу
app.get('/TextBlog', async (req, res) => {
const { id_blog } = req.query; // Отримуємо id_blog з параметрів запиту
if (!id_blog) {
return res.status(400).json({ error: 'id_blog is required' }); // Перевірка на наявність
id_blog
}
try {
const result = await pool.query('SELECT * FROM TextBlog WHERE id_blog = $1',
[id_blog]);
4
482.ЧДТУ.42324-01 12 01
if (result.rowCount > 0) {
res.json(result.rows); // Відправляємо всі знайдені записи з таблиці TextBlog для
конкретного id_blog
} else {
res.status(404).json({ error: 'No text blogs found for the provided id_blog' });
}
} catch (err) {
console.error('Error fetching text blogs:', err.message);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Отримання коментарів до блогу
app.get('/comment', async (req, res) => {
const { id_blog } = req.query; // Отримуємо id_blog з параметрів запиту
if (!id_blog) {
// Перевірка на наявність id_blog у запиті
return res.status(400).json({ error: 'id_blog is required' });
}
try {
// Виконуємо запит до бази даних для отримання коментарів
const result = await pool.query('SELECT * FROM Comment WHERE id_blog = $1',
[id_blog]);
if (result.rowCount > 0) {
// Якщо коментарі знайдено, відправляємо їх у відповідь
res.json(result.rows);
} else {
// Якщо коментарів немає, повертаємо порожній масив
res.status(200).json([]);
}
} catch (err) {
// Логування помилки сервера
console.error('Error fetching comments:', err.message);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Реєстрація користувача
app.post('/users/register', async (req, res) => {
const { login_user, password_user } = req.body;
try {
const result = await pool.query(
'INSERT INTO users (login_user, password_user) VALUES ($1, $2) RETURNING
5
482.ЧДТУ.42324-01 12 01
*',
[login_user, password_user]
);
res.status(201).json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Авторизація користувача
app.post('/users/login', async (req, res) => {
const { login_user, password_user } = req.body;
try {
const result = await pool.query(
'SELECT * FROM users WHERE login_user = $1 AND password_user = $2',
[login_user, password_user]
);
if (result.rowCount > 0) {
res.json({ message: 'Login successful' });
} else {
res.status(401).json({ error: 'Invalid credentials' });
}
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Отримання даних користувача
app.get('/Users', async (req, res) => {
const { user_id } = req.query;
try {
const result = await pool.query('SELECT * FROM users WHERE id_user = $1',
[user_id]);
res.json(result.rows[0]);
} catch (err) {
console.error(err);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Запуск сервера на порту 8081
const port = 8081;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
6
482.ЧДТУ.42324-01 12 01
Лістинг Фронтенду index.html
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Техноблог</title>
<link rel="stylesheet" href="styles.css">
<script src="js.js" defer></script>
</head>
<body>
<header class="header">
<div class="logo">
<img src="logo.png" alt="Blog Logo">
<div id="login-output"></div>
<h1>Техноблог</h1>
</div>
<nav class="navbar">
<ul class="nav-menu">
<li><a href="index.html">Головна</a></li>
<li><a href="profile.html">Профіль</a></li>
<li><a href="contacts.html">Контакти</a></li>
<li><a href="avtorize.html">Авторизація</a></li>
<li><a href="registr.html">Реєстрація</a></li>
</ul>
</nav>
</header>
<main class="main-content">
<div id="blog-container"></div>
<h2>Додати блог</h2>
<form id="add-blog-form">
<div class="form-group">
<label for="id_blog">ID Blog:</label>
<input type="text" id="id_blog" name="id_blog" readonly>
</div>
<div class="form-group">
<label for="blog_name">Заголовок Блогу:</label>
<input type="text" id="blog_name" name="blog_name" style="width: 400px;">
</div>
<div class="form-group">
<label for="path_foto">Посилання на фото:</label>
<input type="text" id="path_foto" name="path_foto">
7
482.ЧДТУ.42324-01 12 01
</div>
<div class="form-group">
<label for="blogtext">Текст Блогу:</label>
<textarea id="blogtext" name="blogtext" style="width: 400px; height:
200px;"></textarea>
</div>
<div class="form-group">
<label for="blog_date">Дата:</label>
<input type="text" id="blog_date" name="blog_date" readonly>
</div>
<div class="form-group">
<label for="blog_time">Час:</label>
<input type="text" id="blog_time" name="blog_time" readonly>
</div>
<div class="form-group">
<label for="id_user">ID User:</label>
<input type="text" id="id_user" name="id_user" readonly>
</div>
<button type="submit">Додати</button>
</form>
<div class="delete-blog">
<h3>Видалити блог</h3>
<div class="form-group">
<label for="delete-blog-input">Введіть ID блогу:</label>
<input type="text" id="delete-blog-input" name="delete-blog-input">
<button class="delete-blog" type="button" id="delete-blog-
button">Видалити</button>
</div>
</div>
</main>
<footer class="footer">
<p>м.Черкаси &copy; 2024 Техноблог</p>
</footer>
</body>
</html>
Лістинг Фронтенду Js.js
document.addEventListener('DOMContentLoaded', () => {
generateBlogHTML(); // Завантаження блогів після завантаження сторінки
});
8
482.ЧДТУ.42324-01 12 01
let currentPage = 1;
const blogsPerPage = 5;
// Завантаження блогів
const generateBlogHTML = async () => {
try {
const response = await fetch(`http://127.0.0.1:8081/blogs?page=${currentPage}`);
const blogs = await response.json();
if (!blogs || blogs.length === 0) {
console.log('Більше блогів немає для завантаження.');
return;
}
const blogContainer = document.getElementById('blog-container');
blogContainer.innerHTML = ''; // Очищаємо контейнер перед додаванням нових
блогів
for (const blog of blogs) {
const blogItem = await createBlogItem(blog);
blogContainer.appendChild(blogItem);
}
// Додаємо кнопку, якщо є більше блогів
if (blogs.length > 0) {
addLoadMoreButton();
}
} catch (error) {
console.error('Error fetching blogs:', error);
}
};
// Створення HTML елементу для кожного блогу
const createBlogItem = async (blog) => {
const blogItem = document.createElement('div');
blogItem.classList.add('blog-item');
const blogHeader = document.createElement('h3');
blogHeader.innerText = blog.blog_name;
blogHeader.classList.add('Text_big');
const blogImage = document.createElement('img');
blogImage.src = blog.path_foto;
blogImage.classList.add('blog-image');
blogImage.alt = 'Blog Image';
const blogText = document.createElement('p');
blogText.classList.add('blogtext');
const blogDetails = document.createElement('p');
9
482.ЧДТУ.42324-01 12 01
blogDetails.classList.add('Text_info');
// Завантажуємо текст блогу
try {
const textResponse = await
fetch(`http://127.0.0.1:8081/TextBlog?id_blog=${blog.id_blog}`);
const textData = await textResponse.json();
console.log('Text Data:', textData);
// Очищаємо старий текст перед додаванням
blogText.innerText = '';
// Якщо це масив частин тексту
if (Array.isArray(textData)) {
// Початковий індекс для частин тексту
let index = 0;
// Функція для поступового додавання тексту
const addTextPart = () => {
if (index < textData.length) {
blogText.innerText += textData[index].text + '\n';
index++;
setTimeout(addTextPart, 1000); // Затримка між частинами (1 секунда)
}
};
// Починаємо додавати текст
addTextPart();
} else {
// Якщо повертається лише один текст
blogText.innerText = textData.text || '';
}
} catch (error) {
console.error('Error fetching blog text:', error);
}
// Завантажуємо коментарі для блогу
const blogcomment = document.createElement('p');
blogcomment.classList.add('blogcomment');
try {
const commentResponse = await
fetch(`http://127.0.0.1:8081/comment?id_blog=${blog.id_blog}`);
const commentsData = await commentResponse.json();
const userResponse = await fetch(`http://127.0.0.1:8081/Users`);
const usersData = await userResponse.json();
// Перевірка та формування списку коментарів
10
482.ЧДТУ.42324-01 12 01
if (Array.isArray(commentsData) && commentsData.length > 0) {
const comments = commentsData.map((comment) => {
const user = usersData.find((user) => user.id_user === comment.id_user);
const login = user ? user.login_user : 'Unknown User';
return `Від користувача: ${login} — ${comment.comment_text}`;
});
blogcomment.innerText = comments.join('\n');
} else {
blogcomment.innerText = 'Коментарів ще немає';
}
} catch (error) {
console.error('Error fetching blog comments or users:', error);
blogcomment.innerText = 'Не вдалося завантажити коментарі';
}
// Дата та час публікації
let dateNew = blog.blog_date.slice(0, 10);
let timeNew = blog.blog_time.slice(0, 5);
// Автор блогу
try {
const userResponse = await
fetch(`http://127.0.0.1:8081/Users?user_id=${blog.id_user}`);
const userData = await userResponse.json();
const login = userData ? userData.login_user : 'Unknown User';
blogDetails.innerText = `Автор блогу: ${login}, дата публікації: ${dateNew}, час
публікації: ${timeNew}`;
} catch (error) {
console.error('Error fetching user data:', error);
}
// Формування блогу
blogItem.appendChild(blogHeader);
blogItem.appendChild(blogImage);
blogItem.appendChild(blogText);
blogItem.appendChild(blogcomment);
blogItem.appendChild(blogDetails);
return blogItem;
};
// Додавання кнопки "Завантажити ще"
const addLoadMoreButton = () => {
const blogContainer = document.querySelector('#blog-container');
// Видаляємо попередню кнопку, якщо вона існує
const existingButton = document.querySelector('.load-more-button');
11
482.ЧДТУ.42324-01 12 01
if (existingButton) {
existingButton.remove();
}
const loadMoreButton = document.createElement('button');
loadMoreButton.innerText = 'Завантажити ще';
loadMoreButton.classList.add('load-more-button');
loadMoreButton.addEventListener('click', async () => {
currentPage++; // Збільшення номера поточної сторінки
await generateBlogHTML(); // Завантаження нових блогів
});
blogContainer.appendChild(loadMoreButton);
};
// Додавання нового блогу
const addBlog = async (blogData) => {
try {
const response = await fetch('http://127.0.0.1:8081/blogs', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(blogData)
});
const newBlog = await response.json();
if (newBlog) {
generateBlogHTML(); // Оновлення списку після додавання блогу
}
} catch (error) {
console.error('Error adding blog:', error);
}
};
// Видалення блогу
const deleteBlog = async (blogId) => {
try {
const response = await fetch(`http://127.0.0.1:8081/blogs/${blogId}`, {
method: 'DELETE'
});
if (response.ok) {
generateBlogHTML(); // Оновлення списку після видалення
}
} catch (error) {
console.error('Error deleting blog:', error);
}
};
ДОДАТОК В
Дослідження і синтез web – додатку техноблог системного адміністратора
Інструкція користувача
482.ЧДТУ.42324-01 34 01
Листів 8
Розробник _______________ Денис БОЙКО
Черкаси 2024
2
482.ЧДТУ.42324-01 34 01
2
Техноблог системного адміністратора це web – додаток доступ до
якого здістнюється через web браузер. Для запуску потрібно запустити
сервер командою npm start і відкрити файл фронтенду index.html. Після
запуску бачимо таке вікно:
Головна сторінка
Після запуску програми ви побачите головну сторінку (Рисунок Б.1).
На цьому етапі доступні такі функції:
 Перегляд блогів — список останніх опублікованих статей.
 Реєстрація — натисніть кнопку «Реєстрація» (Рисунок В.2).
Щоб отримати доступ до інших функцій, необхідно зареєструватися та
авторизуватися.
Рисунок В.1 – Головна сторінка
Реєстрація
Натисніть кнопку «Зареєструватися», щоб перейти на сторінку
реєстрації (Рисунок В.2).
3
482.ЧДТУ.42324-01 34 01
Заповніть необхідні поля:
 Ім'я користувача
 Електронна пошта
 Пароль
Натисніть кнопку «Зареєструватися». Після цього ваш обліковий запис
буде створено.
Рисунок В.2 – Сторінка реєстрації
Після вводу інформації і натискання кнопки зареєструватись акаунт
створено і можемо перейти до авторизації, натискаємо кнопку авторизації
Авторизація
Натисніть кнопку «Увійти», щоб перейти на сторінку авторизації
(Рисунок В.3).
Введіть ваш логін і пароль.
Натисніть «Увійти». Якщо авторизація пройшла успішно, ви отримаєте
доступ до свого профілю.
4
482.ЧДТУ.42324-01 34 01
Рисунок В.3 – Сторінка авторизації
Профіль користувача
Після входу в систему натисніть кнопку «Профіль», щоб переглянути
ваш обліковий запис (Рисунок В.4).
У профілі відображається:
 Ваше ім’я
 Контактна інформація
 Статус користувача (звичайний або адміністратор).
Вводимо логін і пароль , якщо авторизація успішна можемо перейти і
переглянути свій профіль натиснувши відповідну кнопку.
5
482.ЧДТУ.42324-01 34 01
Рисунок В.4 – Сторінка профіль
Додавання та видалення блогів
Ця функція доступна лише для користувачів з правами адміністратора.
Перейдіть на сторінку управління блогами (Рисунок В.5).
Для додавання блогу:
 Заповніть поля, такі як заголовок, текст статті та теги.
 Натисніть кнопку «Додати».
Для видалення блогу виберіть статтю зі списку і впишіть її номер.
Натисніть кнопку «Видалити».
Для цього заповняємо поля і натискаємо відповідно кнопку.
6
482.ЧДТУ.42324-01 34 01
Рисунок В.5 – Додання та видалення блогу
Перегляд додаткових блогів
Якщо ви хочете переглянути старіші публікації, натисніть кнопку
«Завантажити ще» (Рисунок В.6). Це оновить список доступних блогів на
сторінці.
7
482.ЧДТУ.42324-01 34 01
Рисунок В.6 – Кнопка «Завантажити ще»
Контактна інформація
Якщо вам потрібно звернутися до адміністрації блогу, натисніть
кнопку «Контакти», щоб переглянути відповідну інформацію (Рисунок В.7).
8
482.ЧДТУ.42324-01 34 01
Рисунок В.7 – Сторінка «Контакти»
Ця інструкція допоможе швидко освоїти функціонал техноблогу. У разі
виникнення питань звертайтеся до технічної підтримки через розділ
«Контакти».
ChSTU repository

ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
