1. Repository at ChSTU
  2. Випускні кваліфікаційні роботи
  3. Бакалавр
  4. 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення)
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/9140
Title: Розробка інформаційного WEB-додатку підтримки майбутніх батьків
Authors: Півень, Олександр Борисович
Деркач, Каріна Володимирівна
Keywords: інформаційний web ресурс;розробка;батьківство;проектування nporpaмннoro забезпечення;information web resource;development;parenting;software design
Issue Date: 17-Jun-2023
Abstract: ЛІІОТАЦІЯ У роботі представлено процес проєктування і програму реалізації інформаційної системи, що використовується для підготовки молодих батьків. Розглянуто існуючі моделі системи на основі тематичного підходу, організовано роботу нового додатка. Проект розроблявся для молодих батьків, які мorли б мати місце та можливості для обміну новою інформацією та знаннями з іншими нa цю тематику. Проєкт являє собою велику базу даних, яка формується самими користувачами у процесі взаємодії з сайтом. В основі розробки стояла ціль показати масштаб та кількість можливостей, функцій, цікавих рішень проекту такого плану.
ANNOTATION The work ·presents an overview of the system of training young parents. The existing system models were considered and the work of the new application was organized based on а thematic approach. The project was developed for young parents who could have а place and opportunities to exchange new information and knowledge with others on this topic. The project is а large database, which is formed bу the users themselves in the process of interaction with the site. The basis of the development was the goal of showing the scale and number of opportunities, functions, and interesting solutions of the project of such а plan.
URI: https://er.chdtu.edu.ua/handle/ChSTU/9140
Appears in Collections:121 Інженерія програмного забезпечення (Інженерія програмного забезпечення)

Files in This Item:
File Description SizeFormat 
Кваліфікаційна робота бакалавра Деркач Каріна Володимирівна.pdf
  Restricted Access		62.15 MBAdobe PDFView/Open Request a copy
Show full item record


Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.

Extracted text 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
. 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
Факультет інформаційних технологій і систем 
Кафедра програмного забезпечення автоматизованих систем 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
до кваліфікаційної роботи 
<<бакалавра>> 
. .- . 
OCBlTHlИ р1вень 
на тему: Розробка інформаційного WЕВ-додатку підтримки майбутніх батьків 
Виконала: студентка 5 курсу, групи ЗПЗ-184 
, 
Спеціальності 
• 
121 <<Інженерія програмного забезпечення>> 
(шифр і назва напряму підготовки) 
Студентка Деркач К. 
(прізвище та ініціали) 
Керівник Півень О.Б. 
• 
(прізвище та ініціали) 
Рецензент Слюсар А. · 
(прізвище та ініціали) 
Черкаси 2023 
• 
V V • V • 
Черкаським державним технолог1чнии ун1верситет 
повне найменування випtого нав•1ального закладу 
Факультет інформаційних технологій і систем 
Кафедра програмного забезпечення автоматизованих систем 
• • V • 
Осв1тн1и р1вень бакалавр 
Спеціальність 121 <<Інженерія програмного забезпечення>> 
Освітня програма Інженерія програмного забезпечення 
С, професор 
бе.в. 
~/,i-.-.~~--2022 року 
ЗАВДАННЯ 
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ 
Деркач Каріна Володимирівна 
(прізвище, ім'я, по батькові) 
Тема проекту (роботи) Розробка інформаційного WЕВ-додатку підтримки 
майбутніх батьків 
Керівник проекту (роботи) Півень Олександр Борисович к.ф.-м.н., доцент 
(прізвище; ім'я, по батькові, науковий ступінь, вчене звання) 
Затверджені наказом Черкаського державного технологічного університету від << 19>> гру дня 
2022 року N°368/04 
, 
2. Строк подання студентом проекту (роботи) 8 червня 2023 р. 
З. Вхідні дані до проекту (роботи) стандарти програмного забезпечення; процеси 
\ . . . 
управл1ння; вимоги до проекту; календарне планування проекту; управл1ння ризиками . 
• 
проекту; управл1ння ресурсами 
• 
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити) 
Вступ; · 
Розділ 1 Існуючі методи та засоби розв'язання поставлених завдань ; 
Розділ 2 Проектування програмного забезпечення інформаційних систем; 
Розділ З Розробка та тестування програмного забезпечення; 
Висновки; 
Список використаних джерел; 
Додатки; 
5. Перелік графічного матеріалу (з точним зазначенням обов'язкових робіт проекту; 
Презентація на 1О  слайдів: 1 - титульний слайд; 2- Мета роботи; З - Діаграма прецедентів; 
4 - Діаграма діяльності; 5- діаграма послідовності; 6 - Діаграма комунікації; 7 - Тестування; 
8 - Інтерфейс проекту; 9- Висновки; 1О  - . заключний слайд. 
6. Дата видачі завдання О 1 жовтня 2022 р. 
КАЛЕНДАРНИЙ ПЛАН 
Строк 
виконання 
~ 
No Назва етапів випускної роботи • •• 
етап1в випускно1 При~і11 
п/п роботи 
І. 
. . 05.12.2022 викоuа
1 Постановка задач~ 1 
10.12.2022 викоnа
2 Підготовка завдання 1 
12.12.2022 -
викоuан 
з Погодження завдання 
' 
16.02.2023 
4 виконав 
Затвердження завдання 
Основна стадія ' 
, 
1 Підбір матеріалів 20.02.2023 виконан 
2 Аналіз шляхів вирішення поставленої задачі 08.03.2023 виконан 
з Розрахунок основних параметрів роботи 14.·оз .202з виконан 
4 Вибір кінцевого варіанту проектного рішення 19.03.2023 виконан~ 
5 Оформлення первісної редакції роботи 25.03.2023 виконан, 
. 
Заключна стадія • 
.., 
1 • 
Узгодження приинятих проектних р1шень з . 10.05.2023 виконан< 
. 
• 
кер1вником 
•• 
2 Оформлення пояснювально1 записки роботи в 19.05.2023 виконане 
• . .., ••• 
к1нцев1и редакц11 . 
• 
з Попередній захист роботи 22.05.2023 виконане 
4 Затвердження роботи 29.05.2023 виконане 
' 
5 Рецензування роботи 10.06.2023 виконано 
6 Захист роботи 14.06.2023 
~ 
. 
~ 
с тудент !Чt 7/ ') , Деркач К.В. . 
• (/j, ., с) (прізвище та ініціали) 
Керівник проекту (роботи) Півень О.Б. 
(підпис) (прізвище та ініціали) 
• 
І 
ЛІІОТАЦІЯ 
У роботі r1рс11стаnлс110 npoucc просктуваJ111я і r1рогра.,,11ої рсалізаuії 
і1-1формаuій11ої системи, що викор11стовується дл.я 1·1ід.готовк11 ~,олод11х батьків. 
f>оз,~ля1-1уто іс1-1уючі моделі с1tсге~ га tta основі те~1ат1-1 11J1ого підходу орга1-1ізова1-1а 
робота 11ового додатку. Проект розроб.,явся д.11я ~,олод11х батьків, які 1"torл1,1 б ~,ат11 
місuе та можливості для обміну новою інфор~1аuією та знанняІ',111 з іншИ!';11'І tra uю 
тематику. Іlроект являє собою ве;~ику базу дан11х, яка фор!';rується сам~1~11-1 
корисrувачами у процесі взаємодії з саrпо!\1. В основі розробк11 стояла uіль 
• 
показати масштаб та кількість можливостей, функцій, цікав11х ріu1ень п·роекту 
такого 11ла1-1у. 
Кл1очові слова: інформаційн1-ІХ web ресурс, розробка, батьківство, 
проектува1-11-1я nporpaм1-1oro забезпечення. 
ANNOTATION 
The work ·presents an overview of the system of training young parents. The 
' 
existing system models were considered and the work of the new application was 
organized based on а thematic approach. The project was developed for young parents 
' 
who could have а place and opportunities to exchange new information and knowledge 
with others on this topic. The project is а large database, which is formed Ьу the users 
themselves in the process of interaction with the site. The basis of the development was 
the goal of showing the scale and number of opportunities, functions, and interesting 
solutions of the project of such а plan. 
Кеу words: information web resource, development, parenting, software design 
ЗМІСТ 
ПЕРЕЛІК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ ........................... б 
ВСТУП.................................. 7 
•••••••••••••••••••••••••••••••••••••••••••••••••••••• 
Розділ 1 Існуючі метод11 та засоби розв'яза1111я nоставле1111х завдань 
І.\ Актуальні проблеми, що виникають в процесі виконання завдань ........ І О 
1.2 Методи та засоби, які вже використовуються для усунення проблем та 
виконання завдань ................................................................................ 12 
І .З Конкретизація завдань роботи ..................................................... 18 
Розділ 2 Проектування проrрамноrо забезпечення інформаційних систем 
2.1 Моделювання предметної області ... : ............................................ 20 
2.1.1 Предметна область моделювання. Модель предметної області. 
Словник предметної області ................................................ 20 
2.1.2 Елементи моделювання предметної області .......................... •. 22 
2.1.3 Робоча область моделювання ..............................· . ............ •. . 23 
2.2 Формування та аналіз вимог ....................................... •.••••••••••••• .24 
2.2.1 Формування вимог до програмного забе~печення. Первинні і 
· детальні вимоги. Вимоги замовника і розробника. Функціональні та 
нефункц1.о нальн1.  вимоги ........................... •••••••••••••••••·•··· ····· 24 
- 2.2.2 Формування вимог за • 
допомогою д1аграми 
прецедент1.в  ............. •. •• • • • ·  · · · · · · · · · · · · · · · · · · · · · · · · · .· · · . ...................2 7  
2.3 Проектування логічної структури програмного комплексу .................2 8 
2. 3 .1 Д1.а грами клас1.в  ...... •• • • ·  · · · · · · · · · · · · · · · · · · · · · · · · · · · ......................... 2 8 
2 .3 .2 Д~.а грами пакет1.в  ... •• • • • ·  · · · · · · · · · · · · · · · · · · · · ................................. з о 
2.4 Архітектурне проектув~ння ........ ~ ....................................... : ....... 32 
ЧДТУ .231815-002 ПЗ 
1-З~м~Л~и~ст~~№_ _л "о~кv~м. ~- :.~ )Пf~і ,,,л_t, п.,·~ ,, 1-,/Д' атgа шiРqоз_р;об:ка: і~нф~ор;ма:ці:й;но~го~ WVЕВE-Вдо7даoт;ку~ п~1· д~тр;им: к;и ;І-.;.,tдли:тщ.~,.-~1-:...J:.л::. :;~:и~~стJ-t. :...:..Л ;!,,и.,;с,;G,,т.,;і. ~.в.. .=.. ,1  
1-...:,Р~оз~ро~б~.+ ~д=ер:...ка_ч-;К~.В-:-. -r-..,,_їZ, ~/R-------t майбутніх батьків (Пояснювальна записка) 1-JU....J~-~~~~, 
1-!!пе~:о~ев~рі~ ив~_П:,:і::,:ве:.:.:н:..ьО:.:·.:.:Б·-f- Ші~.~~  ..1,.,,4-_-t ФІТІС, кафедра ПЗАС, ПЗ-
Н. КОНтР. Півень О.Б 1904 
/.U .,,, ~ V 
Затверд. Голуб С.В. 7'/ /І' - • 
2.4.1 Діаграма компонетів ......................................................... 32 
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма 
розгортання .....................................................................3 4 
• 
2.5 Моделювання поведінки системи .................................................3 5 
2.5.1 Діаграма діяльності .......................... .- ................................3 5 
2.5.1 Діаграма послідовності .......................................................3 7 
' 
2.5.3 Діаграма комунікації .......................................................... 38 
. 
2.5 .4 Діаграма скінченного автомату ............................................ 39 
-
Розділ 3 Розробка та тестування програмного забезпечення 
\ 
3 .1 Розробка програмного комплексу .................................................4 1 
3 .1.1 Обrрунтування вибору засобів реалізації ................................4 1 
3.1.2 Опис структурної ( функціональної) схеми .............................. 43 
3. І .З Опис логічної схеми системи .... ·. ...................................... ~ .. 45 
. 3.1.4 Розробка бази даних ......................................................... 48 
. 
3 .1.5 Розробка інт.ерфейсу користувача ........................................4 8 
3.1.6 Опис розробки програмних компонентів ............................... 55 
3.2 Тестування системи .................... ·. ............................................ 65 
• 
3.2.1 Модульне тестування .......................................................6 5 
3.2.2 Інтеграційне тестування ...... ~ ............ ~ ................................6 6 
3 .2.3 Системне тестування ................................... ~ ....................6 7 
3 .2.4 Приймальне- тестування ..................... ·.· .............................6 8 
висновки • • • • • • • • • • • • • • • • • • • • • • • • • • • • ...........................................• ................... 7О  
. 
Список викорис· таних джерел .................................. •• • . •• • • • • • • • • • • • • • • • • • • • • • • • • • · 72 
• 
ЧДТУ.231815-002 ПЗ 
t 
'-Ull-Y ~23 18 І 5.0021 rз 
ЛEPE,.;tJJK СКОГОtfЕІІЬ T v\ )і~ІОВІІ JfX flOJtf \ tJEltb 
• 
АСІ-ІТД ., З},-~О ВОа -ТCX_l-{ 1'-{Jtil ~tll 
ЛІС - авт·омат~tюва,,а і11фюрмаuій11а с,,стс:\.Са~ 
ІСО 
АРМ - автоматизова.1,і робоt,і мictUt· 
10 - і11q>ормаuій11ий об ' а-т; 
сис1·сма упрао,1і1111я база.,,,, да.111,х; 
uм·L - у11і~)ікоnа11а мова ~,О,':\СJ1108311ІІЯ . 
• 
б 
482.ЧДТУ .231815-002 
ВСТУП 
Актуальність. Становлення , • • 
постІндустрІального інформаційного 
суспільства потягло за собою зміни, у першу чергу, в статусних позиціях жінок і 
. ' 
чоловіків, а також у політичній, соціальній, економічній, культурній, освітній та 
приватній сферах, що породило низку специфічних проблем у представників 
обох статей. 
Проблема полягає в тому, що жінкам і чоловікам треба усвідомити 
• • • • • • 
ВІДМІННІСТЬ МІЖ соцІокультурними особливостями історичного перІоду, протягом 
якого формувалися стереотипи, і реаліями сьогодення. Вектор розв'язання цієї 
• 
проблеми спрямований на здатність адаптуватися і коригувати свою поведінку 
• • 
ВІДПОВІДНО до вимог сучасного життя. 
Отже, необхідність в розробці програмного забезпечення допоміжних 
ресурсів зростає. Реалізація програмного продукту, який представлятиме собою 
WEB-pecypc для підтримки та невідкладної інформаційної допомоги для людей, 
які планують батьківство, або щойно стали батьками, і. мало розуміються в 
•• u • 
тонкощах сво1 нових ролеи - мами 1 тата, має за мету полегшити життя молодим 
. 
батькам, забезпечити комунікацію батьків з різних куточків світу, та допомогти у 
вирішенні _ багатьох проблем, які можуть виникати з . немовлятами, за допомогою 
створеного програмного забезпечення. 
• • 
Метою · роботи Основна мета роботи спроектувати І реал1зувати 
програмний продукт, який забезпечить молодим батькам отримувати інформацію 
за допомогою створеного програмного продукту . . 
Для досягнення поставленої мети в роботі вирішувались наступні завдання 
\ 
розробки: 
• 
огляд методів і засобів реалізації. · 
перегляд подібних· програмних продуктів. 
• 7 
482. Ч) (І'У .231815-002 
- уточнення задач проекту 1•  проектування програмного продукту. 
- оптимізація проекrnого рішення і реалізація програмного продукту. 
тестування програмного продукту. 
Об'єкт розробки. Процеси розробки програмного забезпечення, внесення, 
• 
зберігання отримання актуальної та необхідної інформації. 
Предмет . розробки: Методи та засоби розробки інформаційних web 
• 
ресурс1в. 
• 
У даній роботі методи розробки включають в се_бе використання 
середовища розробки Je tBrains. Це міжнародна компанія, яка розробляє 
1 
інструменти для розробки на мовах Java, Kotlin, С #, F #, С ++, Ruby, Python, РНР, 
JavaScript і багатьох інших, а також засоби командної роботи. 
JetBrains Webstorm поширюється. безкоштовно на 30 днів з подальшою 
мо.ж ливістю купувати повну версію. Можливості системи: розумна допомога при . 
написанні коду, сучасні фреймворки, розумний редактор, навігація і пошук, 
налагодження, тестування, шаблони проектів, підтримка систем контролю версій. 
Методи розробки. Для розробки було обрано системний підхід та індукцію . 
. 
Опис отриманих результатів. ·в даній роботі було розроблено 
• 
інформаційний WЕВ-додаток підтримки майбутніх батьків 
Практичне значення отриманих результатів. Після дослідження методів 
та засобів розробки інформаційних систем, аналізуючи функції і недоліки 
. . 
існуючих засобів, було поставлено завдання розробити інформаційну систему, яка 
буде допомагити молодим батькам отримувати всю необхідну актуальну 
інформацію для виховання та розвитку дитини. 
Особистий внесок автора. Головною метою даної кваліфікаційної роботи 
було розробити інформаційний WЕВ-додаток, який .буде включати в себе 
наступний функціонал:написання постів/записів та можливість їх редагування, 
• V • • •• 
введення в користування зручного редактора для цих ц1леи, реал1зац1я власно~ 
8 
• 
482.ЧДІ-У.231815-002 
сrорі1tки кор1,1стуnача з yci1't 11собхід1111~,, так,,~, як: сr·11,сок друзів, nідл11с•111ків, 
відобра.жсння літей Т'З короткої і1-1фор~1а11ії u1оло •11,х, фільтрува,,ня зап11сів, 
... . . . ..,. 
ка1·егор11 за1111с1в, архrв запис1в та чернетка, пр11ваn11111 .. ,ат, де кор11стуваt1 з~1оже 
• 
спілкува11,1ся з і,~шими та об,.,інюваrnсь фотографія~r11 ·та ін. 
9 
482.Ч) ('І'У.231815-002 
ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ'ЯЗАННЯ ПОСТАВЛЕНИХ 
ЗАВДАНЬ 
1.1 Актуальні проблеми, що виникають в процесі виконання завдань 
Сучасна сім'я все більше стає головною ланкою у вихованні дитини. Вона 
• • 
має забезпечувати ·1-1·  . • • 
достатн1 матер1альн1 та педагог1чн1 умови для 
інтелектуального, фізичного, морального та духовного розвитку. 
Інформатизація - це сукупність взаємопов'язаних організаційних, правових, 
• 
політичних, соціально-економічних, науково-технічних, виробничих процесів, що 
спрямовані на створення умов для задоволення інформаційних потреб, рещ~ізації 
1•  • • 
прав громадян сусп1льства на основ~ створення, розвитку, використання 
•v 
інформаційних сист~м, мереж, ресурсів та інформаційних технолог1и, 
побудованих на основі застосування сучасної обчислювальної та комунікаційної 
техніки[ І]. 
Найбільш перспективні системи зв'язку для побудови інформаційного 
• 
сусп1льства: 
- цифрові мережі інтегрованих послуг (ISDN); 
широкосмугові лінії зв' язку; 
мобільна телефонія; 
- супутниковий зв' язок. 
В У країні процес інформатизації здійснюється згідно · з Національною 
програмою інформатизації, яка визначає стратегію розв'язання проблеми 
. ' 
забезпечення інформаційних потреб та інформаційної підтримки соціально-
економічної, екологічної, науково-технічної, оборонної, національно-культурної 
та іншої діяльнQсті у сферах загальнодержавного значення. Основні напрями 
реалізації стратегії розвитку інформаційного суспільства в Україні 
10 
482.Ч)(І'У.231815-002 
визначені Законом України "Про Основні засади розвитку інформаційного 
суспільства в Україні на 2007-2015 роки": 
прискорення розробки та впровадження новітніх конкурентоспроможних 
інформаційно-комунікаційних технологій (ІКТ) в усі сфери суспільного 
життя, зокрема в економіку України і в діяльність органів державної 
• • 
влади та органІв мІсцевого самоврядування; 
- забезпечення комп'ютерної та інформаційної грамоrnості населення, 
• • •• 
насамперед шляхом створення системи освІти, орІєнтованоІ на 
• • .. 
використання НОВІТНІХ ІКТ у формуванні всебічно розвиненоІ 
особистості; 
розвиток національної інформаційної інфраструктури та їі інтеграція із 
світовою інфраструктурою; -
державна підтримка нових "електронних" секторів економіки (торгівлі, 
надання фінансових і банківських послуг тощо); 
- створення загальнодержавних інформаційних систем, насамперед у 
сферах охорони здоров'я, освіти, науки, культури, охорони довкілля; 
збереження культурної спадтт(ини України шляхом їі електронного 
документування; 
- державна підтримка використання новітніх ІКТ засобами масової 
інформації; 
використання ІКТ для вдосконалення державного управління, відносин 
між державою і громадянами, становлення електронних форм взаємодії 
між органами державної влади та органами місцевого самоврядування і 
фізичними та юридичними особами; 
досягнення ефективної участі всіх регіонів у процесах становлення 
інформаційного суспільства шляхом децентралізації та підтримки 
регіональних і місцевих ініціатив; 
11 
,''   
482. LЩТУ.231815-002 
з~1х~,1с1· i1-1(jJOJJtv1aцiй1-111x прав громад5ІН, 1-1асампе1J~д щодо дос·гуп1-1ос ·1·і 
і 1-1(j ) C)ІJ ~, ct ІJ ії. з:.:1х 1,1с ·1·у і 1-1<jJО/Jмації п (JO особу. г, irt ·г1J 1-1~ 11( 1-1; Je1v1 о 1,1,с1т1, 1, 11-11-1х  
• 
пrtoc 1<(11-1 ал е1-1 Н5І за1<он о давства з регу люван1--151 і 1--1 cj)OJ)~1 :.:1  Lti й 1-11,1;,,,; Вl)JІІОСІІІІ: 
с·га1-1у і1-1q_Jормацій1-1ої безпеки в умовах в~,1кор~,1с1-~11-11-151 1-1ові ·г1-1іх ІІ( -Г. І_ І _І 
Я1< бt1L1i,1мo з 13~,1111,ес1<:.:1заного, процес інс[Jормат~,1зації в У1<1)аЇ1;і /JОзн~,1нt1 є··, 1,L:~1 
• • • -
с1·р1м 1<(1 І ОХОПЛІ-ОЄ ВСІ галуз1 суспільства. В~,1ходяL11,1 з цього /JOЗ!)Ou l< ,:J 
~ • • 
прое1<ту, ЯІ(И/1 1-1адає мо)1<л11в1сть молодим батькам отр1-1tv1увати і 1-1с рор~-1 а 1Ji 10 . ') С'1  
допомо1~01{) і1-1(lJОJ)Маційних засобів, є актуальною. 
І . 2 • 
ЯКІ вже В 1·11~0 І) 1-1с то І\ ~1 1o·r 1-.С SI JJ .ГІЯ 
• • 
]l ~ 
ер " 
IJJ 1,11\1 с1Н,1ЛОГОМ, Я l(J,JИ МО)І<:На ВІДМ ІТИТІ--1 є са 1,,т 
(l1ttps ://  сІ u Ь.11 utгicia. ua/co11 fi dent-dad/psihologia-tata/1no lod і 111-batk:a111-al~ -pra v і І 110- , 
, 
vi]10VLIV,1ti-cl і li 11 LI) 
• 
.... 
. ' ' l , О 8 
~ТRІСІА ... . ' 
ьаптн1сть !v1ій /..1 алюк Усп ішна lvla,,a 
CLUB 
і!}.Р"'"'-'"' ··· 
' 
\, " 
' ,.,, 
,, 
; ,_:,;, .;~;;,., , 
>'· .. •,. 
, \}' 
;\';:  ' 
' ' 
:·; -, 
J)1,1C)'I-101c 1.1 - l~oлoвi-ra сторі1-11са с~1і,іту [7_1 
• 
482. ЧДТУ .231815-002 
1-Іа цій сторінці є декілька заrальн~,х блоків для ознайомлення користувача з 
. . -
можливостями, серв1са~tи та розд1ла~1и саиту. 
Оди,-1 із таких блоків називає1 ься <<Мій ~,алюк>>. 
У 1-1ьому є посилання на статті, а також на сторінку консультацій. 
Нижче 1-1аявний блок під назвою <<Вагіт11ість>>. У ньому є сортува1-11-1я по 
триместрам і по місяцям. Кожна цифра має посилання на окрему стапю з описом 
• • •• • • • • 
в1дпов1дно1 нед1л1 ваг1тност1. 
• • 
У низу цього блоку також є посилання <<Додатков1 матер1али по 
• • • • • • 
плануванню ваг1тност1>>, яке має у соб1 статтю з рекоl\11ендац1ями щодо ваг1тност1. 
Також у цьому блоці наявна інформація щодо соціальних мереж сайту, 
к11опки, які ведуть на сторінку завантаження додатку на власний смартфон, та 
8 8 • - 8 V • 
запропо11ован1 вар1ант1 входу на саит через аккаунти соц1альнии мереж, як1 на 
сьогодні мають найбільшу популярність, як один із найзручніших способів 
' 
... 
авторизац11. 
Розділ << У спіш1-1а мама>> вміщає у себе публікації користувачів та має зручні 
вкладки-фільтри, всього їх чотири: <<Всі записи>>, <<Планування>>, <<Вагітність>>, 
<<Виховання>>. 
Біля заголовку є кнопка <<Сервіси>>, а зверху кнопка повернення на головну 
• 
стор1нку. 
З точки зору UI тут є більшість необхідних елементів для карточки-запису: 
1 Автор запису 
2 Категорія запису 
З Заголовок 
4 Опис 
5 Дата публікації 
6 Кнопка додання в обране. 
1. 3 
482.ЧДГУ.231815-002 
7 Лічильник переглядів запису 
8 Лічильник комен·тарів • 
9 Лічильник кількості вподобань. 
Кнопка <<Найти подруг>> веде користувача на іншу сторінку 
Сторі11ка пошуку має наступні фільтри: 
1 Ім'я 
2 Місто 
З Район 
4 Вік 
5 Статус 
У результатах пошуку відображається наступна інформація та кнопки: 
І Ім'я 
2 Місто 
З Фото профіля користувача 
4 Діти та їх кількість 
5 К1-1опка <<Написать сообщение>> 
6 Кнопка <<Посмотреть журнал>> 
7 Кнопка <<Подружиться>> 
З результатів пошуку по натисненні на кнопку <<Подивитись журнал>>, . 
можна перейти до особистого профілю користувача. У ньому є декілька вкладок з 
різною інформацією: 
І Анкета 
2 Діти 
З Що нового 
4 Журнал 
14 
482.Ч}(І'У.231815-002 
' 
5 Відповіді 
6 Подруги 
7 Спільноти 
8 Фото 
9 Закладки 
10· Рецепти 
Також наявні кнопки взаємодії з користувачем, такі як: 
1 Кнопка відправлення повідомлень 
2 Кнопка відправлення запиту на дружбу 
' 
З Кнопка подання скарги на користувача 
4 Кнопка блокування користувача персонально для себе 
У шапці профілю можна знайти інформацію щодо місця проживання 
V • • • V 
користувача, останнього заходу на саит та кІлькостІ дІтеи . . 
. . 
Сторінка спільнот має сортування по категоріям, деякі з яких представлені 
у вигляді вкладок-перемикачів, а інші визиваються за допомогою кнопки <<Ещё>> . 
У сього наявна 11 різних категорій записів. У кожній категорії є блок з 
популярними записами, який відображає найбільш обговорювані теми з великою 
• • • 
КІЛЬКІСТЮ коментар1в. 
За посиланням можна перейти на сторінку під · назвою <<бзбі журнал>>, де 
зібрані новини щодо відомих особистостей та їх дітей. 
Є блок з кнопками для швидкого переходу до цікавої категорії. 
• u u 
у сі новини та теми мають лакон1чнии дизаин: картинка, заголовок та опис. 
• • • 
Кожного дня головна новина, яка слІдує зразу пІсля заголовку, зм1нюєтьс~ 
на нову. 
. ·-· . . . . . 
Після переходу у статтю та читанн1 11 до к1нця, 1нш1 статт1 <<п1дтягуються>> 
. . 
автоматично, це спрацьовує механізм <<infinite scroll>>. ✓ 
15 
• 
482.ЧДТУ.231815-002 
Наступна сторінка, яку можна розглянути, знаходиться за посиланням та 
має назву <<Запитання та відповіді>>. 
Кнопки навігації та пошуку розташовані у верхній частині блоку, добре 
помітні та інтуїmвно зрозумілі. Також є поле вводу пошукових запитів. 
Задаm своє питання можна наmснувши кнопку <<Задаm своє запитання>>. 
З правої сторони від основного блоку контенту є віджети <<Найкращі за 
тиждень>>, <<Рейmнг знавців>>, де показуються найактивніші автори та автори з 
найбільшою кількістю відповідей у темах. 
Основним сортуванням записів слугує select вибору категорії. 
Серед популярних можна виділити: 
1 Всі рубрики 
2 Планування 
з Діти до року 
4 Від року до трьох 
5 Від трьох ДО семи 
6 Школьники 
7 Сім'я 
8 Офф 
З інших сторінок можна відмітити <<Гороскоп>>. 
На цій сторінці можна вибрати найближчі дні для перегляду статті, а також 
вибрати період та знак гороскопу, щоб перейm на наступну сторінку для 
детального ознайомлення з інформацією по темі. 
• • u u 
Якщо спуститись нижче по стор1нц1, то там наявнии гороскоп на по.точнии 
рік, · блок з рекомендованими гороскопами, наприклад такими як <<Здоров' є>>, 
<<Фінансовий>>, <<Любовний>>, і блок з іншими статтями-рекомендаціями по 
rемі[7]. 
16 
І 
; L І 
• 
J:.1 д~11111 ,'1111 с~1і,і1·у JJecyJJC rv,uє 11аступ1-1у стат11с·r1,11<.,v : . 
, 
Prost:oDaby 
Т' ,' 1 1 ••••ІОЦ /i >,G :..,1 ; ~••· f ' 
' 
. 
Іlорів11я1111я ці11 на riocлyrи дпя діrей та батьків 
. ,. .. -- ~ · ·-
Розподіл елеме1-1тіn 1-1а цій сторінці має 1<лaci,1t.111y cxerv1y: 111ап1,,1 саіі 1:· 
міст1,1ть у собі пос1,1ла1-11-151 1-1а ос1-1оnні розділи та 1<1-1оп1<1 , 1 вхоJJ.)'/реє·с1 ·ра1tії, 1\Іl'ІІІ t ) 
• 
зл І ва ГІ J)e,LtCl'c! ІЗJ/ JІЄ J{OJ)OTl(/,J J-,J . .- . 
п е1)ел І к категор1 и )' сп ІЛ ь 1-(()'Гах , ({ І · ( о 11 І,)· П() І IJ ) ' І,) І/( ) 
. ,,.. 
стаття,,,, Т,1 /(І/ОГ/1()' СТІЗС)реІ·ІІ ·ІЯ І·ІОІЗОГО запису; OI<p1rv1 цього Є 0Jl01( З /·І('І!Иl\ІІ, ( J~lllll(II 
кор.J,1 с1у ва t.J і u[8]. 
3 ,l ГІ uc J,JJI ,І І-І І-/}/ 1\1 l\10)1( 1-1 ,1 Il ере йти на с·го рі 1-1 ку З 1-1 е LЦО l t,1131-1 ьо І() 31('('(,(1 311 Ї (1 І l 1 
l(OjJl,J Cl')1 133 t.J • 
І ІЗ. 
1-1,І цій сторінці відобра)І(3ЄТЬСЯ дата події, ім ' JІ l{OJ)J;/Cl)'B3t./a ·га ІІОДЇ>І. 
' 
Т,11<0)1< за лос1,1ла1-1нJ1л1 доступна сторінка зі спіль1-101-аrv11,1, у 1<0)1(1-1ої з >11<1,1,\ r 
•v • •v -.., • 
св1и · перел 11< 1<атегор1~-1 для зручного сортування стате,,, та тем з:-1 1н1-е1Jес,1 , 111. 
• 
1(0)1<1-ra та1<а спіль1-1ота сул1Jовод)1<ується іл1остраціє10. У nерх1-1ій l1ac1.,11-11,1 11і (·ї 
сторіr-11<1,1 є поле ВІЗОL~У лошуr<ового запиту. 
у СЬ()/~О 1-1,1лі t.1yє·rьCJ/ 12 спіЛЬ!-ІОТ та від TJJЬOX до 12 /(;1·ге,~о,Jій у І," () )((J:-І 1 і ~і. 
І-І,1 с·го1Jі1-1ці с11іJ1ьно·г11 є г1ерелік с підка·гегоріJ1ми ін,.uих c11i J1ь1-1t)1·. 
Jl ер 111 i,1 f\,1 1~іде бл 01< с голо в1-1 ою іл1остраці є,о потоLІ 1-1о ї с rr іл ь1-1 ої 1,1, ,, 1-10 Ії 1(;_1 \ 1, -, 
<<Вступ ,.,,ть 1з сообutество>> та <<Добавить запись>>, заголово1< с 11 іль1-1 С)ї·и, LU 1:31,1,11,1,1~і  
~остуг1 до лс)перед1-1іх сторіно1<, невелика інформація щодо 1<іль1<осї·і з,1111,1сі1~ 1:1  
• 
1итаlJJІЗ. 
17 
i 
482. Ч) (І'У .231815-002 
Першим йде блок с головною ілюстрацією поточної спільноти, кнопками 
<<Вступить в сообщество>> та <<Добавить запись>>, заголовок спільноти, швидкий 
доступ до попередніх сторінок, невелика інформація щодо кількості записів та 
• 
читач1в. 
. . 
Наявна також і КНОП!(а пошуку по спільноті та кнопка <<0 сообществе>>, яка 
відображає дату створення спільноти та їі рейтинг. 
' 
Серед інших функцій можна виділити кнопку <<свернуть список>>, яка може 
. 
бути корисна при великій кількості елементів у списку. 
Нижче, під списком спільнот є список записів, які можна відфільтрувати за 
наступними параметрами: 
, 
І · Цікаві 
2 Нові · 
З Обговорювані 
4 Топ 
5 Популярні ( 
, 
V • о 
Інтерфеис окремого елемента 1з списку сп1льнот складається за наступних 
І 
частин: 
І Заголовку запису; 
. 
2 Блоку з короткою інформацією про користувача; 
з Частини тексту самого за1:ису; 
V о 
4 Кнопки, яка дозволяє переити на окрему стор1нку та читати статтю 
• 
повн1стю; 
5 Лічильника коментарів; 
І 
' ' 
' 
6 Кнопки вподобання; 
7 Кнопки <<Поделиться>>; 
• 
18 
482.ЧДГУ.231815-002 
І .3 Ко11крстп1а11ія зав,1а111. роб,от1, 
Нсобхіт,о poзpoбa-tn-t са-tстс~,у nідтр11~1к11 ~,олоm1х батьків, яка буде 
включаrn о себе 1,аступ111-tй фу11к11іо11ал: 
І Іаfаписа1111я постів/запа-tсів та l'tожл1tвість їх ре.ааrува1111я. І3всдс1111я в 
корисrування зручного редактора для u11x . ... 
uше11. 
2 Реа;1ізація власної сторінки кор11сrувача з усL,.І необхіднttl\f, тaкrtl\t як: 
список друзів, підписників, ві.дображе1111я дітей та короткої ЇF1формації 
щодо 1-1их, фільтрування записів, категорії зап11сів, архів зап1'1сів та 
чернетка. 
• • 
з Приваrnий чат, де користувач З~Іоже СП1ЛІ\1'ВЗПІСЯ з Іf-ІШJІМИ та 
обмі1-11оватись фотографіями. 
. 
4 С1·орінка зі спільнотами, а також oкpel\ta сторінка спіль1-1оти. 
S Бібліотека зі статтями від різних рецензован11х авторів. 
6 Модулr> керува1-1ня для модераторів спільнот. 
7 Окрема сторі11ка для перегляду сповіще11ь та фільтри для зруч1·1ого 
• • 
сортува1-11-1я по вид1лен1-1м т1-1пам спов1щень. 
8 Зруч·1-1ий інтерфейс головної сторінки сайту та швидкий доступ до 
. . . ~ 
рІЗІіИХ роздІЛІВ CЗJfl)'. 
9 Форма зворотного зв 'яз~--у для ~1ожливості сповіщення про знайдені 
• 
проблеl\tJ.І та ПОІ\t1-1люі на сайті. 
1О  Тем11а тel\ta саі,іту для більш зручного кориС'І)'вання сайтом у нічний 
• • 
11 Фopl\ta пошуку по са11ту. 
19 
, 
' 
!'  
482.ЧДТУ.231815-002 
• 
2.П І~ОЕІ{rІ'УВАННЯ n·РОГРАМНОГ() ЗА БЕЗП 1,: L[ЕІ-11 - 1 ~І 
ІНФОРМАЦІЙНИХ СИСТЕМ 
2.1 1\1одеЛІОВ3 І·ІІ-ІЯ преді\'ІСТІіОЇ області 
• 
2.1.1 Предметна область моделювання. Модель ПJ)еД]vrетної обл:1с-гі. 
Слов11и1< пред~1ет1-1ої облас,,і ,, 
: Модель ПJ)едметної області є системою, що вi.rto6J)a)1<aє c·rpy1<·гyJJ)1 ч11 
фун1<ціонал певної предмет11ої області. Властивості моделей від0Gра)1<~110·11~<.:}1 J :.1 
допомого10 rpaфit.11-1r1x методів, що повинні відобра)1<ати і нфо1Jмаці10 про 1 r~1c1111111 
сис·гс 1\-111 . 
C.nOІ~l-11-fl(l-f Іtе ІlеJJеЛ іІ< 1·еJJІ\1іІ- ІіІ3 , IJJO ВІ-ff(ОJ)ИС'І'ОВ)' ІОТІ-,СЯ ~ n,< tІІіН () І' ' Іас · 1 і 1:1 ч : 1 с 1r, 
не ЗJ\·І і 1-:11-0 к.11-1~с я. і·х :\І О)1<у1- ь в1/11<ори сто ву вати п ід 1.1 ас J)ОЗ J)Об ,, 1/1 П З. 1\ t >.01и  11 с t) Сі., і_ l 11 , , 
утворІ-rти гру·пи з існу·ючJ-ІХ даних та потім ви1<ористовуватJ-1 ui групУІ. Та,,0/1, по,,1- 1 
lOBИHJ-Ji бут,,, прості тя 11\,JЇJ-JJ{)BcfTJ,fCЬ ЛJ1Ше у BJ1HЯTJ{OBJ1X ВІ-1ПсІ,1!([1\: . ' 
.. 
Ми бу демо в11корис·гову ва·ги мову UML ДЛ}І мод~JlІ<Jва1-:11-1}1 1111 t: ) 1!\ 1С  І II l  J І 
. 
>6.ГJ3СТЇ ТЯ 1·ІfJ(>eK1y· R<iHHЯ СІ1С'Ге!\1J1 В UЇЛОМу. UMf_, l\ifrlf' 1'}111 · г111111 І~ І - ~., ,. :-1.' І І - І 11 І\ 
1
IOЗHclLJeІ-If:, лля ліаГJJ3М: ГJ)афі чні символи, ЗВ ЯЗКJ,[ (ЯІ(і з'є л.1-1у1от1, сле ,\І е І Ії І І ) І :1 
еr{СТОВЇ е.1еJ\1е1-1т11 (р11С)1 І-ІОІ{ 2.1-2.2). 
і 1·pn4,1•1111tli ('trмnoл : tf""11н1 .- .:темNІТf4 
! , .... ~ ......... ........... ·-···••·•····· ·· . 
І ·f-· ; ,.1іJіош1 ,кv(,а. (а.к1 ор і і 
(І  .... ... /' і 
·· ·ь·•·· · •· · .. · -· · ··т · •;~:~·;:·; ~:~·::··;:·;~·;:· ;~:~-;~;·:·~:~-!: ... . . .. . .. . .. ... .... , 
f----,==;c--~---- ---- - --.. , 
І ~ і """'·'"'"''Р 
• 
JJиcyr-101{ 2.1 - Основні графіt.1ні символ1,1 UML[ 15] 
1 
• 
, 
482.ЧДТУ.231815-002 
• 
'І  Г1•nфі•11111іі е11м110;, ІІ  1\азuа rдемrІІrR 
r- -·-·-------·····-··-- ----·---·-········-·-- ·-··- -·---· -·-·--·- .. _________ __ - ---- -------- . ·-
І І віm101пснпs зсог.і~п,ї 
• 
----► і оід.нсчоенпя зал,~11ості 
r·----- · · · , - -----------------------·--···•--•··----·-·- - -- · ·····•• і'  
' ... ! • 1 
1t · ··--·~ .... · 1І ·ВІ--і·(н ·о п...r:е· н·п я. .у.с.т..т.а.,..1.ь.-.:. у1·щн пя · · 1 
J 
! : и.rреrа1оя ! 
: І І 
г---- - ----- -----t·- - .. ----------- --- -------- -- - - -і 
[ j КОМ ПО~fІІ tія 1 
~:' : ' ------<- ---"------- j 
-------- -'!'  
і - -- ' 
: , ПрІІІІМі!'І Ш,;111 
~-- ' і 
. І --◊ І джерело по~ії·--·-·· .. ·· .. ·••·· .................... j 
. 
, 
---<( J 3аміна 
' 
' ' 
--о 
• 
іі  - І 
r-------------------------·-.. ПJIOC.. -m-i-t- -n-c-r-r-·i-,- у--п--r--ю--о--л--і--1-н
, 
т·-·- --1-··я··· ··········.. ! 
·······-1 
: · пос.1а111 ! 
.:  - .... І 
,., _ , ...... .... -... ......1...  .. . ' 
;'  nюспrк 
r····----- .. -···-··---···-·······----·····---------·------·-· 1' -------·- ·········-···----- --········· -·-- --·-···----··-··- · - - .. · ~'  
'і  -- tі  рскурсв•f  :;  
·-·-----·· ---- ···-· ,. ___ ··- - ; 
1 ~ ... - ... ! ПQЗ~рr1уп1 ' 
L..._ ____.. .....I. ,_---
Рису1;ок 2.2 - Єднальні елементи UML[15] 
Під час 111Jоек1,ува1--11-151 ПЗ для кваліфікаційної JJ06o·r11 б)1л о вJ:11,01J1, 1c1~111 <) 
\ . . . 
.,  ключов1 д1аграми мови UML для створення моделі предl\t1етної області, ;_11--1;1J1Ї J) ' , : 1 
формування вимог до системи, а тако)І< для логічного та фізи{._1ного модел1ова1111; 1 , 
• 
структури та повед1нки системи. 
Р озроб 1-11,11ci,1 
чле1-1а ми 1<0 м J 1-1 Jt1,1. 1_ii a1J1,eq)a1<·rи м О)І<уть вклJочати вим о г1, 1 до с 1-1 с ·ге і\1111. а11 '- і ї l' 1,·1 ) 1: .) . 
прое1<т, вихід1-11:1й 1<од, прое1<т1-1і плани, тести та прототt1пt1. В1,11<:01-1а111151 де511,11:-.: p<..JG i, 
1 
МО)І<е бути більш формальним, ні)І< інших, зале)І<но від ГІJJJ:1tiн51 ·roї м~·1·l)JJ 111<11 
розроб1<и. Ва)1сливо заз1-1ачити, що ці артефакти не є просто с1сладо1з11м1,1 111Joe1,·1·~/ _ 
, 
але є необхід1-1~,1ми елементами для успішного ви1со1-1а1-11--1я роз1Jоб1<1,1 -га г, i1t·г1J11!\11,, 1 
системи. 
П JJедме·rна обs1ас1,ь модел1овання - це кон1<1Jет1-1а С)6J1с1с ·г1:> з1•1;--1нь , я 131,111 l 1 111 
ПJ)ОЦесів, що !3y[l3LJ310TbC5l ·га оr1исуються у ме)І(аХ J\ІІОДеJІІОВ[11-ІІ-І}І. У MOi(C jll()!)c\1·1111 
, 
J • ! 
• 482. Ч) (l'Y .231815-002 
• 
Предметна область моделювання - це конкретна область знань, явищ чи 
• 
процес1в, що вивчаються та описуються у межах моделювання. У моделюванні 
предметної області створюються моделі, які відображають реальні об'єкти, явища 
чи процеси як абстракцій, тобто. спрощених та усереднених відображень. 
Предметна область моделювання сайту - це конкретний веб-сайт, який 
вивчається та описується в рамках моделювання. У моделюванні предметної 
• 
області сайту створюються моделі, що відображають основні елементи, 
функціональні можливості та процеси, що відбуваються на сайті[ 14] 
Якщо йдеться про моделювання сайту допомоги молодим батькам, то 
пр. едметна область може включати такі елементи: . 
1 Інформаційний розділ - розділ, в якому представлена інформація про 
вагітність, пологи, догляд за новонародженим, здоровий спосіб життя і 
т.д. 
2 Форум - майданчик для спілкування молодих батьків, де вони можуть 
обмінятися досвідом та поставити питання один одному чи досвідченим 
батькам. 
З Статті та блоги - розділи, в яких публікуються статті, блоги та новини на 
. • 
., 
тему виховання д1теи та догляду за ними. 
4 Відео-курси відео-уроки, які допомагають молодим батькам 
розібратися у тонкощах догляду за дитиною. 
. . . . "" . . 
5 Календар ваг1тност1 - · 1нструмент, якии -допомагає ж1нкам, як1 
перебувають у положенні, стежити за перебігом своєї вагітності. 
• • • u • • • • • • 
6 Розд1л питань та в1дпов1деи - розд1л, де досв1дчен1 п~д1атри в1дпов1дають 
. 
на запитання молодих батьків на тему догляду за дітьми та вагітністю. 
7 Крім того, предметна область може включати в себе інші елементи, які 
можуть допомогти молодим батькам, такі як калькулятори розрахунку 
•кількості памперсів або суміші для дитини, розділ з порадами щодо 
22 
482.Ч)(l'У.231815-002 
вибору іграшок та дитячого одягу, а також розділ з порадами та 
• • 
1нструкц1ями щодо здорового харчування для дітей. 
2.1.2 Елементи моделювання предметної області 
. 
Моделювання відбувалось з використанням мови UМL, що була створена 
• .. 
для в1зуального моделювання складних та простих програм: 1х структуру та 
функціонал. Для цього, UML має велику кількість елементів, що полегшують 
V 
процес моделювання. При побудові моделеи з використанням UМL, 
використовуються основні три компоненти - об' єкти чи сутності, їх взаємодії та 
• 
д1аграми. 
Структурні об' єкти відображають реальні сутності та речі, які мають 
• 
статичну повед1нку. 
Поведінкові об'єкти зображують поведінку системи. Наприклад у діаграмі 
діяльності, поведінка системи описується за допомогою об' єктів. 
За необхідності елементи моделі можна згрупувати _за допомогою об'єкту 
'пакет' (package ). Існують також об' єкти для створення описів і коментарів на 
діаграмах(nоtе ). 
Важливою складовою моделі є взаємодії між сутностями. Вони описують як 
сутності повинні взаємодіяти між собою для коректної роботи системи, модель 
якої створюється. Типи взаємодій на діаграмах позначаються відношеннями. 
2.1.3 Робоча область моделювання 
Моделювання було проведено в додатку App.diagrams.net. App.diagrams.net 
- це безкоштовний додаток для побудови діаграм, що дозволяє користувачам 
створювати схеми, моделі та діаграми та обмінюватися ними у веб-браузері. 
Інтернет-сервіс та відкрите ПЗ від розробника призначено для побудови 
робочих схем та діаграм у різних нотаціях. Онлайн-інструмент працює з Google та 
Dropbox. Користувачі можуть працювати над діаграмами в автономному режимі 
23 
482.Ч) (l'Y.231815-002 
та зберігати їх локально за допомогою настільної програми для macOS, Windows 
та Linux. 
· Інструмент app.diagrams.net забезпечує інтуїтивно зрозумілий інтерфейс з 
функцією перетягування, шаблонами діаграм, що налаштовуються, і великою 
бібліотекою графічних елементів. Користувачі можуть створювати та редагувати 
різні діаграми, включаючи блок-схеми, організаційні діаграми, діаграми процесів 
. 
(ВРМN), діаграми сутність-зв'язок (ER), схеми уніфікованою мовою моделювання 
(UМL), мережеві діаграми та багато іншого. draw.io. Багата функціональність 
• • • • 
дозволяє користувачам в1дстежувати та в1дновлювати зм1ни, 1мпортувати та 
експортувати різні формати, а також автоматично публікувати роботи та ділитися 
. 
ними [12]. ' 
2.2 Формування .та аналіз вимог 
. . 
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні 
. 
вимоm. Вимоги замовника і розробника. Функціональні та нефункціональні 
вимоги 
Первинні вимоги _(вимоги замовника) 
, 
Вимоги -замовника до сайту допомоги молодим батькам можуть включати 
. . 
' 
, 
наступне: 
І Зручність використання: сайт має бути інтуїтивно зрозумілим та простим 
у використанні для молодих батьків. Він повинен бути легким у 
навігації, мати інтуїтивно зрозумілий інтерфейс та бути доступним на 
' . 
різних пристроях, включаючи мобільні телефони та планшети. 
·, 
2 Корисний контент: сайт повинен надавати молодим батькам корисну 
, 
інформацію та поради про виховання дітей, турботу про них та їх 
24 
І 
• 
482. Ч) (І'У .231815-002 
здоров'я. Це може включати статгі, відеоуроки, форуми і багато інших 
• 
корисних ресурсІв. 
З Можливість зворотного зв'язку: сайт повинен надавати молодим батькам 
можливість поставити _запитання та отримати відповіді від експертів чи 
інших батьків. Контактна інформація, така як електронна пошта, телефон 
або онлайн-чат, має бути легко доступною. 
4 Актуальність інформації: інформація на сайті має бути актуальною та 
оновлюватися регулярно. Сайт повинен містити останні новини та події, 
які можуть бути корисними для молодих батьків. 
5 Соціальна інтеграція: сайт повинен мати можливість інтеграції із 
• • 
соцІальними мережами, щоб молоді батьки могли легко подІлитися 
• 
корисною інформацією з іншими та спілкуватися з експертами та 
іншими батьками. 
6 Доступність: сайт має бути доступним для всіх молодих батьків, 
незалежно від віку, раси, культури або мови. Повинні бути надані 
, . . . ' 
. ., " " 
переклади рІзними мовами та можливІсть використання саиту для людеи 
з обмеженими можливостями. 
Детальні вимоги (вимоги розробника) 
Вимоги розробника до сайту допомоги -молодим батькам можуть включати 
наступне: 
1 Масштабованість: сайт має бути спроектований таким чином, щоб його 
, можна було легко масштабувати у разі потреби. Він повинен бути 
готовий до збільшення трафіку та обробки великої кількості даних. 
' 
2 Висока продуктивність: сайт повинен працювати швидко та ефективно, 
без затримок та -простоїв. Він має бути оптимізований для швидкого 
, 
•• • • • 
завантаження та використання меншоІ кІлькостІ ресурсІв. 
25 
• 
І 
482.Чj (l'Y.231815-002 
З Адаптивний дизайн: сайт повинен бути спроектований за допомогою 
адаптивного дизайну, щоб він міг коректно відображатися на різних 
пристроях, включаючи мобільні телефони та планшети. 
4 Зручність використання: сайт має бути легким у навігації та мати 
інтуїтивно зрозумілий інтерфейс. Він повинен бути простим у 
використанні для . молодих батьків, і всі функції та можливості сайту 
мають бути легко доступними та зрозумілими. 
5 SEO оптимізація: сайт має бути <;проектований з урахуванням правил 
пошукової оптимізації (SEO). Він має бути оптимізований для 
пошукових . систем, щоб збільшити видимість сайту у результатах 
пошуку. 
) 
6 · Технічна підтримка: сайт повинен мати надійну технічну підтримку, яка 
швидко реагує на можливі проблеми та проблеми. Розробник повинен 
забезпечити повну документацію та інструкції щодо використання сайту, 
щоб користувачі могли швидко розібратися в_ його функціях та 
можливостях. 
Функціональні вимоги 
1 Написання постів/записів та можливість їх редагування. Введення в 
. .., 
2 ' користування зручного редактора для цих ц1леи. 
З Реалізація власної сторінки користувача з усім необхідним, таким як: 
список друзів, підписників, відображення дітей та короткої інформації 
• ••• • • • 
щодо них, фільтрування запис1в, категор11 запис1в, арх1в запис1в та 
чернетка. 
• • 
4 Приватний чат, де користувач зможе сп1лкуватися з 1ншими та 
обмінюватись фотографіями. 
5 Сторінка зі спільнотами, а також окрема сторінка спільноти . 
. 
6 Бібліотека зі статтями від різних рецензованих авторів. 
' 26 
І 
482.ЧJ f'1 'I'Y.231815-002 
г 
7 Модуль керування для модераторів спільнот. 
8 Окрема сторінка для перегляду сповіщень та фільтри для зручного 
' 
сортування по виділеним типам сповіщень. 
9 Зручний інтерфейс головної сторінки сайту та швидкий доступ до 
. . . '-" 
р1зних розд1л1в саиту. 
1О  Форма зворотного зв' язку для можливості сповіщення про знайдені 
проблеми та помилки на сайті. 
11 Темна тема сайту для більш зручного користування сайтом у нічний 
, 
час. 
12 Форма пошуку по сайту 
Нефункціональні вимоги 
Нижче наведено кілька можливих нефункціональних вимог для сайту 
допомоги молодим батькам: 
V V 
1 Доступність: саит повинен бути доступним для використання 
користувачем у будь-який час та з будь-якого пристрою, який має доступ 
ДО Інтернету. 
2 Продуктивність: сайт повинен швидко завантажуватись та швидко 
відображати інформацію, щоб користувачі не відчували затримок або . 
проблем з доступом до ресурсів . 
. 
З Зручність використання: сайт повинен бути простим у використанні та 
мати зрозумілий інтерфейс, щоб користувачі могли легко ·з находити 
' 
необхідну інформацію та використовувати функціонал сайту. 
4 Сумісність із браузерами та пристроями: сайт повинен працювати 
коректно на різних браузерах та пристроях, щоб користувачі могли 
використовувати його з будь-якого пристрою, який має доступ до 
Інтернету. 
27 
І 
482. Ч FJ  'І, 'І'У .231815-002 
· 5 Підтримка: сайт повинен надавати підтримку користувачам, які мають 
проблеми з використанням сайту або мають питання щодо його 
функціоналу. 
6 Візуальний дизайн: сайт повинен мати привабливий візуальний дизайн 
та зручне оформлення, щоб користувачі були зацікавлені у використанні. 
7 Відповідність стандартам: сайт повинен відповідати стандартам веб­
розробки, включаючи встановлені технічні вимоги, протоколи та 
рекомендації для веб-сторінок. 
8 Масштабованість: сайт має бути масштабованим, тобто готовим до 
розширення та збільшення обсягу інформації та функціоналу за потреби . 
• 
2.2.2 Формування вимог за допомогою діаграми прецедентів 
, На рисунку 2.4 зображенна діаграма прецедентів для орієнтованого 
додатку. 
На котрій зображенна два актори: 
користувач; 
• • 
адм1н1стратор. 
Користувач здійснює перегляд даних (прецедент <<Перегляд інформації>>). 
Адміністратор може здійснювати редагування вмісту сайту(прецедент 
<<Редагування інформації>>), за умови що ~ін авторизувався на сайті( прецедент 
<<Перевірка правильності логіна і пароля>>) та перегляд даних(прецедент 
<<Перегляд інформації>>) на орієнтованому додатку (прецедент <<Перегляд 
інформації>>). 
28 
І 
482.ЧДТУ.231815-002 
обр,бка даt11х 
, П~Т!е~)!fІtІІІ 
tna?l)eltlll НОВІ і ТU 
НІф'4))\і • 
- • J . -+-----J 
nер,ФІенІІ 
HJI Hr.si Jel.tl у 
. 'ІТі 
Пере~ сrатаі 
ет.е1t111 н~в,іте1.11 · -· 
ttф,py.t 
Т!JPellltl lIOID JeLII 
, Чаті 
, І 
Рисунок 2.3 - Діаграма прецедентів. 
2.3 Проектування логічної структури програмного комплексу 
2.3 .1 Діаграми класів 
Імена класів повинні відобража~и поняття предметної області та описувати 
тільки одну сутність. Ім'я класу може бути простим або складеним, яке 
• • • • • • 
складається з самого 1мен1 класу та 1мен1 пакету, якому належить клас. Кр1м того, 
ім'я класу має бути унікальним в межах пакету. Хоча діаграма класів може 
• • •• • • 
включати позначення елемент1в повед1нки, 1х динам1ка розкривається в 1н111их 
• 
типах д1аграм. 
29 
J 
І 
І 
482.Ч) (І'У.231815-002 
Можливо скласти ім'я об'єкту, яке складається з імені класу і імені самого 
об'єкту, розділених двокрапкою. У разі, якщо ім'я об'єкту невідоме, воно може 
' 
' 
бути анонімним. На діаграмі такий об'єкт зображується з ім'ям, яке складається з 
двокрапки та імені класу, до якого належить об'єкт. Якщо клас, до якого належить 
об'єкт, ще невідомий, то на діаграмі зображується ім'я об'єкту з двокрапкою. 
Такий об'єкт називається <<сиротою>>. 
Діаграма класів для сайту допомоги молодим батькам - це візуальне 
• •• • • 
представлення клас1в та 1х залежностей. Однак, загалом, д1аграма клас1в може 
• 
включати так1 класи: 
1 Користувач - клас, який представляє користувача сайту. Може містити 
такі властивості, як ім'я користувача, адресу електронної пошти, пароль і 
т.д. 
І 
-
2 Батьки - клас, який представляє батьків, який шукає допомогу на сайті. 
Може містити такі властивості, як ім'я, прізвище, дата народження 
• 
дитини, м1сце проживання тощо. 
З Радник - клас, який представляє експерта, який надає . поради та 
рекомендації на сайті. Може містити такі властивості, як ім'я, прізвище, 
. 
спеціалізація, досвід роботи і т.д. • 
• 
4 Стаття - клас, що представляє статтю на сайті. Може містити такі 
властивості, як заголовок, текст, дата публікації, автор і т .д. 
5 Форум - клас, що представляє форум на сайті. Може містити такі 
властивості, як теми, повідомлення, дата публікації і т.д. 
6 Категорія - клас, що представляє категорію на сайті. Може містити такі 
властивості, як назва, опис і т.д. 
І 
7 Коментар - клас, який представляє коментар до статті або повідомлення 
на форумі. Може містити такі властивості, як текст, дата публікації, 
1• автор  т.д. 
30 
482.ЧДТУ .231815-002 
-
Пошук чаr 
. 
'~ 
- - - - - ' 
' - ' -
Корис:туаачІ 
- ' ' 
' Р1ДНМІС 
&атwи 
- . ' - - -
. -
--
• 
> 
-
Citil ІН > 
. 
. ·-
- - - .> 
' '. .  - - - - - _, - - . -
' 
Ком1,11ар 
-~·-------,-. - _, . 
. . - - . 
І 
. . . • 
·- - -
--~-· l<am'OplJI 
. _,.,.._,,__ 
' ' Форум 
··------ ' 
ч 
. - - . - > - > 
. 
-
> , 
' 
І Рисунок 2.4 Діаграма класів 
І 
2.3.2 Діаграми пакетів 
• • • • 
Діаграма пакет1в (Package diagram) - це ОДИН 13 ВИДІВ д1аграм UМL, що 
• ., 
використовуються для візуалізації та організації компонент1в та залежностеи у 
• 
систем~. 
. ., 
• • 
Для зображення пакет1в - на д1аграмах використовується спец1альнии 
., ., 
графічний - великии прямокутник з невеликим прямокутником, якии символ 
приєднаний до лівого верхнього кута першого. Символ пакету візуально схожий 
на піктограму теки на екрані монітора. 
Відношення залежності зображують у вигляді пунктирної лінії зі стрілкою, 
спрямованою від залежного класу до незалежного кла,су. 
31 
-,-' 
-,,.,:_, 
,""-'"" ,-.;:_:!, .- ·'' 
1 
482.ЧJ ll'Y .231815-002 
Іншим способом зоб_раження взаємозв'язків між пакетами є відношення 
вкладеності або включення одного пакету в інший, і це можна зобразити шляхом 
• 
розм1щення одного пакету всередині іншого або використання відрізків ліній, що 
нагадують графічне представлення дерева. Це відношення між пакетами може 
бути використано для управління складністю моделі. · 
Для ·сайту, діаграма пакетів може бути використана для відображення 
структури та організації компонентів та підсистем ' які складають сайт. Наприклад, . 
веб~сторінки, серверні програми, бази даних, бібліотеки тощо. 
На діаграмі пакетів компоненти представлені як прямокутників, які 
. . 
називаються пакетами. Всередині пакетів можуть відображатися інші пакети або 
компоненти, а також зв'язки між ними, такі як залежності, спадкування або 
. ... , 
асоц1ац11. · 
· Діаграма пакетів може бути корисною для розуміння, як компоненти та 
підсистеми взаємодіють один з одним і які залежності між ними існують. Це може 
допомu1·1·и при розробці та підтримці сайту, а також· при комунікації між членами 
• • • • • 
команди, яю вщповщають за р1зн1 компоненти системи. 
Якщо створити діаграму пакетів для сайту допомоги молодим батькам, 
можна використовувати таку структуру: 
Пакет "Загальна інформація" - основний пакет, який містить усі інші пакети 
та класи. 
с . ' . . . 
Пакет "Реєстрація" мІстить класи, пов язанІ з управлІнням реєстрацІх нових 
• 
користувач1в І 
І 
• 
Пакет "Інформація для вагітних жінок" МІСТИТЬ класи, пов'язані з 
управлінням статей призначених для сімей які готуються стати батьками. 
Пакет " Інформація для молодих батьків " - містить класи, пов'язані з 
. . 
"' . "' . 
містить класи ' пов'язані з управлІнням статеи призначених для сІмеи яуІ вже стали . 
батьками. 
32 
І 
482.Ч) (І'У.231815-002 
І 
. 
загальна Інформація 
• 
, ' 
. 
І w 
ІнформацІя дnяваrtтних Інформація для 
жІ нок молодих 
батькІв 
' 
і 
. 
І 
Реєстрація 
Рисунок 2.5 -Діаграма пакетів 
2.4 Архітектурне проектування 
2.4.1 Діаграма компонентів 
• 
Архітектура програмного забезпечення (ПЗ) - це множина основних 
проектних рішень про ПЗ [10]. Архітектура ПЗ є планом розробки майбутнього 
програмного рішення, а також основою для подальшого життєвого циклу ПЗ. 
За допомогою зв' язків між компонентами можна уточнити їх взаєм·одію, що 
' 
забезпечує краще розуміння архітектури системи . .У  мові UМL 1 компонент 
зображується у вигляді прямокутника з двома прямокутниками меншого розміру в 
лівій частині. В середині великого прямокутника зазначається ім'я компонента та 
інша додаткова інформація. У UМL 2 компонент зображується також у формі 
прямокутника, але з необов'язковим ключовим словом "component", записаним у 
' 
, вигляді стереотипу. Крім того, на символі класифікатора може бути зображена 
· 33 
482. ЧДТУ .231815-002 
піктограма компонента. До символу прямокутника можуть бути приєднані 
символи інтерфейсів за допомогою з'єднувачів. 
На відміну від інших діаграм, діаграма компонентів описує фізичне 
представлення системи і дозволяє визначити архітектуру розроблюваної системи, 
встановлюючи зв 'я зки м1. ж програмними компонентами. У багатьох середовищах 
розроб_ки, модуль або компонент відповідає файлу . 
..._ Кnієктський 
......, Інтерфейс 
Сервер 
База 
даних 
Рисунок 2.6 - Діаграма компонентів 
Для сайту допомоги молодим батькам можна виділити наступні компоненти: 
1 Клієнтський інтерфейс - цей компонент містить інтерфейс веб-сторінки 
для користувачів. Він забезпечує користувачам можливість взаємодії зі 
сторінкою та отримання необхідної інформації. 
2 Сервер - цей компонент містить серверне програмне забезпечення, яке 
• 
обслуговує запити користувачів. Він забезпечує доступ до бази даних та 
інших необхідних ресурсів. 
З База даних - цей компонент містить базу · даних, яка зберігає всю 
інформацію, яка використовується на сайті. Вона може містити 
• u · • 
інформацію про товари для д1теи, поради щодо догляду за д1тьми, 
34 
І 
482.ЧДТУ.231815-002 
піктограма компонента. До символу прямокутника можуть бути приєднані 
символи інтерфейсів за допомогою з'єднувачів. 
На відміну від інших діаграм, діаграма компонентів описує фізичне 
представлення системи і дозволяє визначити архітектуру розроблюваної системи, 
І • 
встановлюючи зв язки м1ж програмними компонентами. У багатьох середовищах 
розроб_ки, модуль або компонент відповідає файлу . 
...,... Кnієнтський 
- Інтерфейс 
Сервер 
- - База 
-т-
даних 
, 
Рисунок 2.6 - Діаграма компонентів 
Для сайту допомоги молодим батькам можна виділити наступні компоненти: 
І Клієнтський інтерфейс - цей компонент містить інтерфейс веб-сторінки 
І 
І 
для користувачів. Він забезпечує користувачам можливість взаємодії зі І 
сторінкою та отримання необхідної інформації. І 
2 Сервер - цей компонент містить серверне програмне забезпечення, яке 
' 
обслуговує запити користувачів. Він забезпечує доступ до бази даних та 
інших необхідних ресурсів. 
З База даних - цей компонент містить базу · даних, яка зберігає всю 
інформацію, яка використовується на сайті. Вона може містити 
. 
інформацію про товари для дітей, поради щодо догляду за дітьми, 
34 
482.ЧДТУ.231815-002 
• 
в1дгуки користувачів та іншу інформацію, яка може буги корисною 
молодим батькам. 
· 2.4.2 Розгортання програмної системи на апаратних засобах. діаграма 
розгортання 
Діаграма розгортання (Deployment diagram) - це один із видів діаграм UМL, 
що використовуються для візуалізації фізичної архітектури системи та розміщення 
їі компонентів на конкретних пристроях та серверах. 
Для сайту допомоги молодим батькам, діаграма розгортання може виглядати 
так: 
1 Веб-сервер - на якому розміщується веб-програма, що забезпечує 
інтерфейс для користувачів·. 
2 База даних - містить дані, що використовуються сайтом, такі як 
інформація про продукти для дітей, поради щодо догляду за дитиною, 
в1дгуки користувач1в 1т  .д. 
З Клієнтські пристрої можуть бути різні пристрої, такі як комп'ютери, 
смартфони, планшети і т.д., за допомогою яких користувачі отримують 
V 
доступ до саиту. 
, . . \ . . . . 
На д1аграм1 розгортання компоненти представлен1 у вигляд~ вузл1в, як1 
можуть бути фізичними чи віртуальними. Зв'язки між вузлами позначаються 
лініями, що показують тип з'єднання та протоколи, які використовуються для 
. 
обміну даними. 
Діаграма розгортання може бути корисною для розуміння того, як 
компоненти сайту розподілені по вузлах і як вони взаємодіють один з одним. Це 
може допомогти при розробці, налаштуванні та обслуговуванні сайту. 
35 
І 
482. LJДTY .231815-002 
1 
<< dcvicc >> 
:DB Servcr • 
<<artilact>> 
MySQL DB 
<<device>> 
Web Server 
<<ar·titact>> 
Wcbsile 
<:< r.levice :>:> 
: U s І 
е rC І і е r, t 
<< dcvice >> 
:Browscr 
<<artifдct>> 
HTML5 
Р11су1-101< 2. 7 - Діаграма розгортання апарат1-11,1х засобі 1з с 1 ,1сте!\111 
2. 5 Модел1ова1-111я поведі1-1ки систеІ\'ІИ 
2.5. 1 Діаг1)ама діяль1-1ос,rі 
Для . ~ • 
і\1 одел1-о ва1-11-1 я процесу ВИІ(Онан 1-ІЯ о п е11<1 LL 11,1 V \ 'І О 11 І 
.,/ 
• • • 
ВИК0\)І-ІСТОІ3)1 10'[1:> ДІс1Г\)а1v1у ДІЯЛЬІ-ІОСТl (рису1-1ок 2.8) , ЯІ([1 зо61Jа)І(аt·1 · ься ГІ):Іq) l )\1. 
верш111-1ам~,,1 я1<ого є ста1-1и (дій і/або видів діяльності), с1 дуга1v1~,,1 - 11eptxo;11,1 1)i_<l 
одно1~0 ста1-rу (дій/в~,,1ду діяльності) до іншого стану (дій/в1,1ду діяль1-10L:·ті). ·' 
У діаГJ)аl\ІІ і дЇ5ІЛЬНОСТі ВИІ<Ористовуються різні ВИД1'1 вузлів, l(O)I(eH З 511{1 ІХ :-.1 [\(_' 
власну rpa(\Ji LJ 1-1у нотацію: вузол дії, вузол виклику діJ1s1ь1-1ості, вузол t)б · ('1( 1·\, 
• 
вузл J,,І у П ра l3Jl І І-І І-І Я. 
• • • V • • 
Дs1я зo61)a)t{eI-ІI-l5l ПOCJllДOBHOCTl ДlИ в111користовує·гьс51 LLY га Lt 15ІЛЬІ-ІОС11. 
предс'гавлJ1є собо10 лі1-1і10 зі стріл1<ою. Назва дуг11 !\1ІО)1се б)1 ·г1 - 1 1зідс)гг11)1 
записується з !\1 алої s1iтe1J1,i біля СТ]JЇл1<и. Для по1<1)аще1-11-1я зрl1З)1 і\11ілос·гі l\1()Jtc:1i ; t)'І ; 1 
, 
. , -
діяль1-1ості та1<0)1< МО)І<е бути позначена за допомого10 з'єд1-1уваt1а, я1<ий !\'І~1с· с1\і ,-, 
1 
унікальний iдe1-1т1,iqJi1<a1'0]J ( циqJри або букви). Ви1<ор111ста1-1ня ·rа1<0Ї 1- 1(1та1tії с· J І 11111 L' 
зруч1-1іст10 і не вплv1ває на модель. 
, 
Діаг,)ама діяль1-1ості встановлює правила послідов1-1ос1'і дій ,,r:1J1)1 6) ' LLЬ->IІ,L) 1·L ) . 
хто в111<01-1ує 111)оцес, дозволя1-ОLІИ вибирати порядок в 1,1 І( о І-І а І-І І-І 51 ді і,і . це () с L) 6 .1 1111 \( \  
• • 
ва)І<J1111зо дs1я І\,1одел1ова1-11-1я біз1-~ес-процесів, де деІ(ІJІЬІ(а ПJ)Ol lCC111 
' 
. .:: ... .. ' 
,. " ' 
482-чдтУ.231815-002 \"" ' ·...:. 
.: . . 
,,, '• ", ·~ 
важливо для моделювання б. 
1знес-процес~·в , . . 
де декmька процес1в можуть 
виконуватись паралельно Так· 
. . • 1 . 
д1аграми к • 
орисн1 також при розробці паралельних 
алгоритм1в, як1 дозволяють незал . 
. . .. ежним потокам виконувати роботу паралельно. 
На наведен1и нижче діа . 
.., . грам~ можемо побачити що спершу слід зайти на 
саит, дал1 у корисl)'Вача зявляєтьс . . 
" я можлив1сть переглянути інформацію, і за 
бажанням проити авторизацію . 
, якщо вона усп1шна користувач отримує змогу 
редагувати дані. 
.' 
'.  
! '..   
• 
j 
І 
І 
• 
''і   
і 
j 
;'  ' 
' 
' ( f .І 
r ' 
Рисунок 2.8 - Діаграма діяльності. 
2.5.2 Діаграма послідовності 
• • 
Діаграма ПОСЛІДОВНОСТІ (рисунок 2.9) відображає взаємодії об'єктів 
впорядкованих за часом. Зокрема, такі діаграми відображають задіяні об'єкти та 
послідовність відправлених повідомлень. 
• 
В наведеному внизу прикладі діаграми послідовності демонструється 
послідовність дій, які ініціюється актором (деяким користувачем системи) 
· f '• 
' . ... ,. 
";-'<.. І., :::. , • 
• • u • 
ліворуч. Ці дії ~а відповідні пов1домлення У сам1и програм~ описують один з 
варіантів використання програми - процес авторизації. Повідомлення, якими 
37 
., 
І 
J 
..... -
, 
~ • -'• 
482-ЧДТУ.231815-002 
при цьому обмінюються об' єкти програмної 
системи, стають методами 
відповідних класів. 
f 
,А о..11 .ін істратор ~ite ) 
• !&.uthorization 
• і 
• ~ata Base ] 
••  • і 
• 
••  ••  ••  
..• • ••  
••.  • 
- ••  
1: \/ewl~ trtamatton 
., 
• .. 
2: Enter ІсЇgіn and password • 
• ••  
•• 
 
•  
- •
•• 
 
•  
і 
• ••  З: N:rt ас cess 
••  •• 
' •• 
 
 
- ..••   4: Access 
•'  
5: \/ewl~ Іrtmnatton ••  
•'  
• -• 
••  • 
' ••'   б: Editing data 
' ••'  
•'  
~ -
7 _S encfng .. 
reІJJest 
•'  
•'' •   
•'  
''  
Рисунок 2.9-Діаграма послідовності. 
2.5.3 Діаграма комунікації 
Поняття комунікації (collaboration) є одним з фундаментальних понять у 
мові UМL. Воно служить для позначення безлічі взаємодіючих з певною метою 
об'єктів в загальному контексті модельованої системи. 
Мета самої комунікації полягає в тому, щоб специфікувати особливості 
реалізації окремих найбільш значущих операцій в системі. Кооперація визначає 
структуру поведінки системи в термінах взаємодії учасників цієї кооперації. 
Д_іаграма комунікації (рисунок 2.1 О) насамперед відображає структуру 
взаємодії та містить такі елементи: 
екземпляри акторів і класів, що беруть участь в .реалізації варіанту 
використання; 
38 
482.ЧДГУ.231815-002 
• • 
асоц1ац1ю між екземплярами • 1•  • 
актор1в клас1в; 
• 
пов1домлення , що . . 
п ередаються м1ж екземплярами • 1• • 
актор1в  клас1в. 
І.·Е 111 •• І •1І n1nd,-ord 
. 
~-······· ···· ,luftorizoion 
5:1101, .... 
12:Entt 
Sill 
4:Rtcehln1 1 raqu" і 3:Son tllng raqu" 
1 . 
Data 8111 
Рисунок 2.1 О - Діаграма комунікації. 
2.5.4 Діаграма скінченного автомату 
І Діаграма кінцевих автоматів для ~ 
саиту допомоги молодим батькам може 
І 
виглядати так: 
Система 
j 
•----,•~/nочІІТІ<О8ИЙ СТІІН ~ВІдображенНА Гоnовна 
сrорІнка 
ВІдображення 
j kІдображенн, Результати 
Коментар до статтt •залмшенняl стаття j nowyкy 
'-·- ----- ------..J 
Рисунок 1.11 - Діаграма скінчених автоматів 
39 
1 
І 
4 82.tШl-Y "231 81, .002 
1-Іа 11а,1ій niaJl)a.,,i 1-обра:іt{ с,,і рі з ,,і ста,,,, , я•, і ~~o~)ifb бут,, у carrry1 дono~iont 
молодим ба1ькам, а саме: 
І 1-1оча1"коnиіt ста,, 
2 Ві11ображс1111я rолов11ої сторі1пс11 
3 Поu1ук статті 
4 Dідображс1111я результатів пошуку 
5 Відображе1-11tя ста 111 
6 Залише1-11-1я коме1-1тарю .zio cra11і 
7 Рссстраuія користувача 
8 Вхід в сис1·ему 
9 Відображе1-11-1я профілю корис,увача 
1О  .Рсдагува1111я профілю користувача 
• 
40 
' 
J 
І•'  - І  
482.ЧДТУ.231815-002 
3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ 
3.1 Розробка програмного комплексу. 
З .1.1 Обrрунтування вибору засобів реалізації. 
Je tBrains - міжнародна компанія, яка розробляє _інструменти для розробки 
на мовах Java, Kotlin, С #, F #, С ++, Ruby, Python, РНР, JavaScript і багатьох 
інших, а також засоби командної роботи. 
JetBrains Webstorm поширюється безкоштовно на 30 • 
дн1в з подальшою 
можливістю купувати повну версію . 
. 
Офіційний сайт розробника https://www.jetbrains.com/ru-ru/webstorm/ . 
Ось перелік із продуктів, які може запропонувати компанія розробникам. 
IDE .NET и Visual StLid io 
AppCode Rider ReSt1arper Kotl ir1 
CLion Rider Ktor 
DataGrip ReSharper С ++  MPS 
Golar1d clotCo'i1er 
lntelliJ ІDЕА dottv1eгnorv 
. ' 
• • ••• 
Рисунок З .1 - Перел1к продукт1в компан11 
МОЖЛИВОСТІ 
• 
1 Розумна допомога при написанн1 коду 
WebStorm допомагає писати код на JavaScript, мовами, компільованих в 
Java Sc r1· pt,  НТМL і CSS, а також з використанням Node.js. 
41 
1іі 
І 
482.ЧДТУ.231815-002 
. 
Автодоповнення коду, зручна навігація, митrєве виявлення помилок і 
рефакторинг доступні для всіх цих мов. 
2 Сучасніфреймворки 
WebStorm допомагає розробляти програму для використання Angular, 
' 
React, Vue.js і Meteor. Якщо ви використовуєте React Native, PhoneGap, 
Cordova або Ionic для мобільного розробки або Node.js, WebStorm теж 
зможе вам допомогти працювати продуктивніше. І все це в одній IDE ! 
З Розумний редактор 
На основі аналізу коду в проекті IDE пропонує найбільш підходящі 
в_аріанти автодоповнення для всіх підтримуваних мов. Сотні вбудованих · 
• , . • '-І . • 
. І 
1нспекц1и митrєво вказують на можливі помилки і пропонують вар1анти 
•• 
1х виправлення. 
• 
І 
4 Навігація і пошук 
WebStorm допомагає швидко переміщатися по коду і економити час при 
. 
роботі над великими проектами. В один клік можна перейти до 
визначення будь-якого методу; функції або змінної або знайти їх 
• 
використання в проект~. 
• 
5 Налагодження, трасування 1т естування 
WebStorm • • • 
має вбудован1 1нструменти для налагодження, трасування 1 
тестування клієнтських і Nоdе.js-додатків. Продумана інтеграція 
дозволяє . вирішувати ці завдання набагато простіше і без складного 
налаштування. 
6 · Тестування 
Тестувати програми за допомогою WebStorm простіше, так як IDE 
інтегрується з Karma, Mocha, Jest і Protractor. Запускайте і налаштовуйте 
тести прямо в IDE, переглядайте результати в зручному форматі і легко 
переходьте до тестованого коду. 
42 
482.ЧДТУ.231815-002 
7 Інструменти збірки 
Простий універсальний інтерфеиvс 
дозволяє запускати завдання за 
допомогою Grunt, Gulp і npm прямо з IDE. Всі завдання відображаються 
• 
в .с пец~альному вікні і запускаються подвійним кліком по імені 
завдання. 
8 Інструменти для аналізу якості коду 
' 
На додаток до сотень власних інспекцій WebStorrn може перевіряти код 
за допомогою ESLint, JSCS, TSLint, Stylelint, JSHint або JSLint і 
• • 
п1дсв1чувати помилки на льоту прямо в редакторі. 
9 Шаблони проектів 
Створюйте нові . проекти . прямо зі стартового екрану WebStorm, 
використовуючи популярні шаблони, такі як Express або Wе Ь Starter Kit, 
• 
1 отримаєте доступ до безлічі інших генераторів проектів завдяки 
інтеграції з У eoman. 
1О  Підтримка систем контролю версій 
У WebStorrn реалізований універсальний інтерфейс для роботи з 
•v 
популярними системами контролю верс1и, тому працювати з проектами, 
які використовують Git, SVN, Mercurial і Perforce, однаково зручно. 
З .1.2 Опис структурної ( функціональної) схеми 
Функціональна схема веб-додатку - це діаграма або опис, який визначає 
' 
функціональні можливості та компоненти веб-додатку і взаємодію між ними. ·це 
' 
• • 
візуальне представлення струкrури та повед1нки ~одатку, яке допомагає розум1ти, 
як він працює і які функції виконує. . 
• • 
Функціональна схема веб-додатку може включати так1 елементи: 
43 
• 
• 
482. ЧДТУ .231815-002 
1 Користувацький інтерфейс: це те, що бачить користувач на стороні 
клієнта, такі як сторінки, кнопки, форми, меню тощо. Користувач 
взаємодіє 3 цим інтерфейсом для виконання різних операцій у додатку. 
2 Серверна частина: це бекенд-скрипти, які обробляють запити 
• • 
користувач~в 1 виконують різні операції на стороні сервера, наприклад, 
обробка даних, доступ до бази даних, бізнес-логіка тощо. 
З База даних: це місце, де зберігаються дані, необхідні для роботи додатку. 
Веб-додаток може зчитувати, записувати, оновлювати та видаляти дані з 
бази даних в залежності від дій користувачів або внутрішніх операцій. 
4 Комунікація між _клієнтом та сервером: це процес передачі даних між 
клієнтом (браузером користувача) і сервером. Веб-додаток використовує 
· протоколи, такі як НТТР або HTTPS, для обміну даними між клієнтом і 
сервером. 
5 Додаткові компоненти: це можуть бути зовнішні сервіси, АРІ, бібліотеки 
або інші компоненти 
Функціональна схема веб-додатку підтримки молодих батьків включає такі 
елементи: 
І Реєстрація та аутентифікація: користувачі можуть створити обліковий 
••• • V 
запис в додатку за допомогою реєстрац11 та ув1ити до системи з 
використанням своїх облікових даних (л о гін та пароль, аутентифікація 
через соціальні мережі тощо). 
2 Профіль користувача: після реєстрації користувач .може створити та 
налаштувати свій профіль, вказати інформацію про себе та своє дитя, 
таку як вік, інтереси, потреби тощо. 
3 Календар та планування: додаток може мати календар, де батьки можуть 
• V ••• • 8 • 
планувати та відстежувати розклади д1теи, под11, зустр1ч1 з л1карями, 
44 
. ,'  . ~ 
'°"--., . '--
. ., 
~ "' .. 
,. .•·.'  
,;ч""',, <-· 
І .:..-· -:,_ 
,. ,'~:;·<~ 
;;< 
• 
482.ЧДТУ.231815-002 
вакцинації та інші ~ажливі події. Вони можуть отримувати сповіщення 
про наближення подій та нагадування. 
4 Спільнота та обмін інформацією~ додаток може мати функціонал 
спільноти, де батьки можуть обміmоватись досвідом, порадами та 
підтримкою. Вони можуть створювати тематичні групи чи форуми, 
коментувати та взаємодІ• яти з І• ншими користувачами. 
5 Інформаційний розділ: веб-додаток може містити блог, статті, новини 
або інші джерела інформації, що стосуються виховання та догляду за 
дітьми. Батьки можуть читати корисні статті, отримувати поради ВІ• Д 
експертів, ознайомлюватись з актуальними новинами та ресурсами. 
~-. -:- ·-----, -· ~~~ -
' 
І, 
І , 
. 
Ре«траця та СТеореtИІ СІі/1,ноm ПІ 
~-.я ОбМІНІН~ 
.r Розробка 
1Нф)рt,t2ЦІ"кrо рщд~ 
Створення~ 
корис,ун~а 
. ~ 
Стаорення кane!WIP 
таn~ання 
Рисунок 3 .2 _ Функціональна схема 
З .1.3 Опис логічної схеми сис~еми 
[ 
_ ... 
Логічна схема веб-додатку ц е візуальне представлення логіки та взаємод11 •v • V • 
компонентів веб-додатку без прив ,я зки до конкретних тех.. нолог, 1и чи 1нтерфеис1в~ 
Вона описує осно:І;Jні функц~.о нальн~.  блоки до· датку та 1х зв язки, що дозволяє 
І 
І 
та логіку роботи додатку. 
зрозуміти загальну структуру . ступні елементи: 
Логічна схема веб-додатку може МІСТИТИ на 
45 .· , 
_., \:,..,.,;,. .... 
']і 
І! 
jl 
' 
і 
"' ' ', 
•,  .. ,. ,zo"-·, •• ,(-,. ..,  ., . : о{,. _. ... ~- ' ~~ .,: ,,. : -~ ' .,., ,.,:....,- • 
.,  
482.ЧДТУ .231815-002 
1 Користувацьк ии"'  ·~ нтер ф еи....с : це частина додатку, з якою взаємод1.є  
користувач. Вона може включати сторінки, елементи керування (кнопки, 
поля введення тощо), . меню, форми та інші елементи, які дозволяють 
користувачеві взаємодіяти з додатком. 
2 Модулі та функції: логічна схема веб-додатку визначає основні модулі та 
функціональні блоки, які виконують певні завдання або операції . . 
Наприклад, можуть бути модулі для • 
аутентифікації користувач1в, 
• 
управл1ння профілем, обробки даних, спілкування з базою даних, 
• • •• • • 
1нтеграц11 з зовн1шн1ми сервісами та ін. 
З Логічні зв'язки та потік даних: схема веб-додатку показує, як дані та 
інформація переходять між різними модулями та функціональними 
блоками. Вона відображає потік даних, керування та виклики функцій 
• • • • 
м1ж компонентами, що дозволяє зрозум1ти, як додаток працює в ц1лому. 
4 У мови та правила: логічна схема може містити умови, правила та логіку 
_, обробки даних. 
• 
Логічна схема веб-додатку допомоги молодим батькам включає так1 
елементи: 
1 Реєстрація та аутентифікація: користувачі можуть створити обліковий 
••• • V 
запис в додатку за допомогою реєстрац11 та ув1ити до системи з 
використанням своїх облікових даних (логін та пароль, аутентифікація 
через соціальні мережі тощо). 
2 Профіль користувача: після реєстрації користувач може створити та 
налаштувати свій профіль, вказати інформацію про себе та своє дитя, 
таку як вік, інтереси, потреби тощо. 
· ання· додаток може мати календар, де батьки можуть 
з Календар та планув · , 
8 V 8 88 8 8 8 
вl·дстежувати розклади . д1теи, под11, зустр1ч1 з л1карями, 
планувати та 
46 
• 
482.ЧДТУ .231815-002 
••• • • • 
вакцинац11 та 1нш1 в~жливі події. Вони можуть отримувати спов1щення 
про наближення подій та нагадування. 
' 
4 Спільнота та обмін інформацією: додаток може мати функціонал 
спільноти, . де батьки можуть обмінюватись досвідом, порадами та 
підтримкою. Вони можуть створювати тематичні групи чи форуми, 
коментувати та взаємодіяти з іншими користувачами. 
5 Інформаційний розділ: веб-додаток може містити блог, · статті, новини 
, 
або інші джерела інформації, що стосуються виховання та догляду за 
• 
дітьми. Батьки можуть читати корисні статті, отримувати поради в~д 
експертів, ознайомлюватись з актуальними новинами та ресурсами. 
Логічна схема роботи в додатку представлена на рисунку• 
• 
6>qЦ в додаrок 
н 
ак 
Реторизація 
н 
так 
Переmяд необ_>qЦНОТ 
іtформ~•1 ' 
' 
І 
r 
Введення даних по 
обраним темам , 
~ 
• ·-
11 
л . на схема роботи з веб додатком 
Рисунок З.З - ог1ч / 47 
__________________,,  
482,ЧДТУ.231815-002 
З .1.4 Розробка бази даних 
. 
База даних не розроблювал · 
ась, так як тема роботи не потребує бази даних. 
3.1.5 Розробка інтерфейсу користувача 
Головна сторінка проекту Babyki виглядає наступним чином (рис. 3.4): 
Од8У6tОС Q Search 
0 Communities Answers to any questions abou 
@ ConceP.tion 
children and family Ііfе 
G) ~gnaocY. 
@ АІ\ about children Search ~mong tips 
0 Not onlY. mom 
QJ Useful articles .. 
(?) Consultations · Health 
Рисунок 3.4-. Головна сторінка сайту Babyki 
З особливостей головної сторінки можна відмітити: 
І Розширений блок <<Спільноти>> з набором із шести категорій та прямими 
• • 
посиланнями на рекомендован1 сп1льноти. 
Q Search 
ConceQtion,_P-regnancY. Afc 
(о Communities 
and childbirth famil•.  
@ ConceP.tlon . 
Pregnancy_Qlanning .. famil• 
• 
G) fLegnancY. . .[ 
PregnancY, 1,. .. '  Finar 
,:,tт< 
@ АІІ about children . ::\' ., ··.·"t  
ЕСО ",.!~,.• ,;,.; :;,, intimi 
""і.і' 
,,~г 
\ ·.п, 
@ · Not л. 
оnІу mom childbirth '\ '.; >( .!:шР.Р. 
''і' '" 'Ї., 'ІІ, ·:t!i , 
.t.  t.·· 
[jJ Useful articles Our с 
-t-..w, 
. ,-
ф Consultations і v .... 
( .,_. " І 
Рисунок З .5- Блок зі спільнотами 
, 
48 
-• 
482-чдтУ.231815-002 
2 Також наявний блок << К алендар вагітності і розвитку>> (рис. З .6), де 
можна швидко і зруч 
но перейти до перегляду :відповідного тижня 
вагітності. Поруч знаходиться блок с посиланнями на відповідні роки 
розвитку дитини ' який р оз б итииv  на категорії <<Перший рік розвитку в 
місяцях>>, <<Від року до трьох>>, <<3 .т рьох до семи і старше>>. 
~ -:► С і babyblog.ru/cb 
....., ,. 
FIR...S ,.-Т-.  ТRIM, .E SТER Months of pregnancy 
one 2 3 four 5 6 • 
7 eight 
9 ter, eLeve 12 13 
SECOND- T· RIMESТER -· Nine amazing months separate а woman 
from pLanning а ЬаЬу to meeting her 
fourtmftee 16 17 eight, 19 twent 21 beLoved ЬаЬу. Every week, every hour, eve 
second, the organs and systems of the fe 
arP laid dPVPlnnPd and imnrnvPd. ThP. 
Рисунок З .6- Календар вагітності 
З У нижній частині сайту знаходиться секція <<Спільности по віку дітей>> 
(рисунок · З. 7), де можна вибрати спільноти з відповідним роком 
, 
народження дитини·. Секція розділена на блоки за порами року. 
UдtW'UWG U Search 
Communities Ьу date of birth of children 
(о Communlties 
October-2020 
®.  ConceP.tion 
д community for mothers whose babies аге born in October 2020. We discui 
. Q frggoancy, · issues related to pregnancy, childbirth, the first successes of babies . 
40 participants 6 eпtr·ies 
© АІІ about chHdren 
, 'І· ~ December-2020 
0 Not onlY. mom І 'f'Л  ·'  д community for mothers whose babies are bom in December 2020. We disc 
Useful articles issues related to pregnancy, childbirth, the first successes of babies. 
Q] 
41 participar1ts 1 eпtry 
G) Consultations 
' Рисунок З. 7- Спільноти по віку дітей 
49 
' 
482.ЧДТУ.231815-002 
4 При натисканні кнопки «Реєстрація», яка знаходиться поруч з кнопкою 
«Вхід» У верхній «шапці» сайту, відкривається модальне вікно (рисунок 
З .8) з формою реєстрації, де присутні наступні кнопки: 
_ Кн~пка входу через соціальну мережу <<Facebook>> 
_ Кнопка входу через аккаунт у пошуковій системі.  <<Google>> 
_ Кнопка <<пользовательскоrо соглашения>> 
- Кнопка <<Уже. є акаунт, войти>>, яка відкриває інше модальне вікно 
Q Search 
(а Communities 
@ ConceP.tion 
G) PregnancY. 
. Your location 
g дІІ about children 
Let's create а ribbon fo r У1 
@ Not onlY. mom 
[!] Useful ar1icles Country 
Рисунок з .8  - модальне вікно входу/реєстрації 
у верхній правій частин~.  с-аи.., ту є кнопка <<Мій щоденнк>> (рисинок 3.9), яка 
• 
має дві функції: · 
1 . . . иває особисту сторінку користувача 
При натисканн1 в1дкр б . . 
2 . . б . , список з посиланнями на нео ХІДНІ 
При наведеннІ.  курсо РУ в1до ражає 
для користувача сторІ. нки та налаштування. 
J 
50 
482-чдтУ.231815-002 
ЗдSУОtОс Q Search 
~ Ribbon Ribbon 
) Notifications 
АІІ Friends 
) Messag~ Communities Minsk 
~ МУ. Communities 
:) Bookmark§ 
Те 5 t · · 
' another one, please take а Іооk 
, , Conception 
Рисунок З. 9- Елемент <<Мій щоденник>> 
Переходячи до сторінки к ористувача (рисунок 3.10), можна виділити 
с 
основні елементи інтерфейсу: 
1 Верхній блок. 
1.1 Задній фон особистого профілю. 
1.2 Фотографія (аватар) користувача та індикатор присутності на сайті. 
1.3 Ім' я користувача. 
1.4 М~сто та країна. 
1.5 Кнопка <<Написати в щрденник>>, яка відкриває сторінку для 
• написання посту у щоденник користувача; 
1.6 Кількість записів, друзів та підписників. 
1. 7 • V •• • • 
Список д1теи користувача, 1х ~мена та в1к. 
2 Нижній блок. 
2.1 Вкладка <<Записи>>, де відображаються записи користувача, також 
наявна кнопка пошуку серед записів та кнопка фільтру по . 
категоріям (якщо при створенні запису категорія була вказана). 
2.2 Вкладка <<Черновики>>, де можна переглянути записи, які не були 
• 
опубліковані та повернутися до їх редагування чи публікації. 
. ' . ...  
2.3 Вкладка <<Активність>> показує нещодавн1 д11. 
51 
• 
482· ЧДТУ .231815-002 
2.4 І31<J1ад1<а <<АJ)ХЇ1З>> ( 
' рису~-1ок З. l О), де rv10:i1<11~1 ГІІ.:І)ЄГJІ}І .[t~ІІ 'И J~\1111(11 ·__:; 1 
COpl'YBc\Hl-l}IM ро1<у • 
та •• 
МІСЯЦЮ публікс1uії. Іх 
Q Search 
МЛІN 
Categories 
-N-o·ti·fi-cations Rerso11al inforn,ation Ву puь : ish1ng а,, entry ,n ycur d•Dry оп o ,Jr ' • 
Social n~tworks tt10 f tJt~Jre it •.,vr \1 L10 e a sy to find .:,ІІ в п Іr: ,.:- t.- о ! 
I\J1essages 
a iJ(J ,.it ttї l.:.! ь о : , ~ i u 1 11:у ь _-: ~, 1• ~S (.л. -., Р .І ;_; •. · :; ~ 
~tl<1І)QQ..Rass1;vord 
-~,1·1 .v, - -С-·о гпп·1--u-п-·і-·-t-і-е·-s 
:J Bookmarks CHІLDREN 
' 
... .. І 
' 
Р11су1-101< 3 .1 О- Загальний вид сторінк1,1 1<ор1,1стуваt1а 
Бло 1< t<atJTOLJ 1<1,1 запису. , 
3 .1 І{ноп1<а вподобання. 
3.2 Аватар користувача, його ім'я, місто та дата публікації зап~,1су. • 
'І  
З.З І-Іазвазапису. 
3 .4 l{о1)о'г1,а ве1)с і }І зап11 су для попереднього оз 1-1а ~іоІ\,1.п е 1-11-151. 
3.5 І{1-1оп1<а від1<ритr51 се1<цїі з коментарами. 
З .6 l{ноп1<а дода1-1ня запису до списку обраного. 
~CWG Q Search 
1 
3 
:..., R ibbon Useful articles 
) ·N•--·o··-t·i·f-i·c--a- ti"o""""n--s··  Conception Pregnancy ChHdren \.'Vo1nen 's inter er_,н, • 
' =2 Messages 
, .,,, І 
-..., ,.,, '.':1[ .І" 
.,:;, МУ. Corт1munities 
...'., . .\ , .,; i:,, ~: : ., 
_-.-,;- : .. 
,,, .. ~--,-,,· і}:} .J{\.. <;:; _1 ._ 
- , ~~ .щ;~ :~~-.::t\. ,,, _,,.. ,,.4.~_,;{$/м., . , ,..,.. 
,_j Bookrnarks 
S-- ections_of the sit~ / 
. '~-~---> - ,м._t.t&/~:ц_~=1J$;<,._:,~,< .,. h .н--~/~-~,, :,i§,~'t·i~¼~Ш  ..., \ .{ 
., ttff·-~-. ·: :.:~, :. ·. &,г,-,,?;'<\,,,. ·-, · · :,;щчлs&r@: :;~½4· ,А"' w~ .:(:: 
Corr11nunities 
• • 
Рису но~< з .11- Кор~,1сн1 стаг1· 1 
' 
• 
:att ; &JZJ&ACk&EJJlkA.C. . t&X& а а _ 2 ::ед ±.:ааа : а 
► ' ' 
482·чдтУ.2З 1815-002 
По наведенні на одт.n, 1. 3 · 
&&J кнопок у ве . V 
відкривається додаткове м . рхн1и частині сайту (рисунок 3.13) 
еню 13 вибором м. 
і babyblog.ru/new-post lСЦЯ Та типу НаПИСаННЯ посту/статті. 
іr  '"' ., ~ , 
l r 
Post title 
+ в І С-:> 
j-·----
i ----------------
, 
1 І 
Рисунок 3. l З - Додаткове меню сайту 
На рисунку З .1 З показано як виглядає стор1· нка дл-я написання статті. 
\ 
Основні елементи інтерфейсу: 
1 Поле для вводу заголовку 
2 Панель інструментів 
2.1 Кнопка для виділення тексту жирним шрифтом 
2.2 Кнопка для написання тексту курсивом 
2.3 Кнопка додання посилання чи його подальшого редагування 
2.4 Кнопка додання фотоматеріалів 
2.5 Кнопка додання прикріпленого до статті голосування· 
2.6 Кнопка додання функції <<Cut>> до певного місця у статті 
З Поле для вводу тексту 
4 Кнопки навігації ( <<Відмінити>>, <<Далі>>) 
' 
Серед інших розділів, які доступні через випадаюче меню можна виділити 
сторінку налаштувань (рисунок З .14 ). 53 
482·Ч ДТу .231815-002 
ВдВУвtос Q Search 
Enter а request 
~ l 1Y\llt"St\lUI І~ 
J Messag~ 
МАІN 
'. С) МУ. Communities Notifications 
P..ersonal information 
Bookmarks Social networks NEWSLETTER 
Changg_Rassword The most , t e rest 1 пg th , пg that happened о п 
;:: Sections of the site v 
ра mers 
CHILDREN 
і! Site news 
Рисунок З .14 - Список налашrувань 
. .., 
1 На •v 
НlИ присутн1и перелік • • • 
розд1л1в з категор~ями наступних 
налаштувань: 
2 <<Приватна інформація>>, де можна вибрати ім'я, день свого народження, 
•• • 
кра1ну, МІ сто та вказати електронну пошту. 
З <<Соціальні мережі>>, д~є змогу під'єднати низку соціальних мереж . 
• 
4 <<Змінити пароль>>. 
5 <<Діти>>, дає змогу додати інформацію щодо дітей (вік, стать та фото). 
6 <<Планування>>, можливість вказати дату з якої ви плануєте завагітніти. 
7 <<Вагітність>> 
8 <<Категорії записів>> 
, 
9 <<Приватність>>, дає змогу вказати хто може бачити нові записи та власну 
• 
активнІсть. 
10 <<Видалення>>, слугує для видалення своєї власної сторінки з сайту. 
11 <<Повідомлення>>, дозволяє вмикати або вимикати сповіщення різних 
• 
ТИПІВ · 
\ 54 
- -- _ ... 
482
... ·ЧДтУ.231815-002 
12 << Чорнии списоІ<:>> р . 
' озд1л, в яко 
до чорного списІ<:у му Можна додавати інших користувачів 
'тим самим блокуючи їх. 
З .1.6 Опис розробІ<:и про гр 
. ... амних компонентів 
у верхн1и частині робочого Простору з ~ . 
1 <<File>> находя гься наступн1 кнопки: 
2 <<Edit>>, яка містить у соб·1  . 
all>>, <<Ex1.t >>, << Settings>>. nунnи <<New>>, <<Open>>, <<Close Project>>, <<Save 
з <<View>> 
, 
4 <<Code>> ; 
< 
'
,' ,.;.   
5 -
<<Refa ctor>> ' 
6 <<Run>> 
--
7 -
<<Tools>> 
8 <<VCS>>, яка містить у собі пункти керування Git, наприклад <<Commit>>, 
<<Update Project>>, <<Get from Version Control>>. 
9 << Window>> 
І О <<Help>>, яка містить у собі такі пункти як <<Register>>; <<Check for 
Updates>>, <<About>>, <<Contact Support>> та інші. 
Рисунок З .15 - " вигляд вікна програми WebStortn 
Загальним .. 
55 
482
·Ч ДтУ.23 1815-002 
такий вигляд має панель керу . 
••• вання Git гілками. Вона допомагає зручно 
аvнати ДІІ з локальними даними т . . 
8nf(O"J- а взаємод1яти з gіt-репозитор1ями. 
Зона відображення розділена на 3 . . ( . ) · списком 
ВlКНа: з гшками злmа , з1 
коr,01ітів (по центру) та з детальним оглядом змін у комміті (праворуч). 
Панель керування дозволяє виконувати н • •·· 
аступнІ ДІІ: 
1 Переключатись на різні локальні та зовнішні гілки. 
2 Завантажити з репозиторію свіжі дані на конкретну гілку за допомогою 
кнопки << Update Selected>>. 
3 Порівнювати гілки. 
4 Показати гілки, які були створені виключено пото. чним користувачем. 
5 Видаляти непотрібні та неактуальні гілки за допомогою кнопки «Delete 
Branch>>. 
6 Маркувати гілки за допомогою кнопки <<Mark/Unmark as Favorite>>. 
7 Виконувати фільтрування по різним параметрам. 
' 
g Робити <<cheny pick>>. 
9 Переглядати історію змінень кожного окремого файлу за допомогою 
кнопки <<History up to here>>. 
V • мент для керування Gіt-гілками 
Рисунок з . 16 - Вбудовании ~нстру 56 
482'-ІДГ 
. у .23 l ~ l S-002 
· - ' 
·l•,'!(- ' 
.. J., 
:_ • > 
Рисунок 3. l 7 -Консоль для відстеження помилок 
• • 
Із корисних 1нструмент1в тако~ можна відмітити керування існуючими у 
• • 
проект~ пом1тками <<TODO>>. Це дає. змогу зручно ~ 
дивитися якии код потребує 
подальшого вдосконалення та виправлення. 
• 
482
-ЧДrу .2з l 81 s-002 
JІ;1ожна відмітити ще вкладку «Probierns», в якій знаходиться консоль. Вона 
омаrає оглядати помилки у 
µо JІ реальному • • 
час1 .. 
1 зручно ІХ 
аходження. відстежувати 
місuезн 
JDE завжди вказує файл, з якого надходить помилка та кількість таких 
JI01V.. 1п1'хJ лок. 
Також можна побачити тип помилки • 
І на якому саме рядку вона 
вІІfІи:кла. Декілька помилок з одного файлу 
Рисунок 3. 19- Вкладка <<Problems>> 
з • наявна кнопка << St ru cture>>, яка визиває наступне 
ЛІВОГО боку програми 
• 
• • перегляду структури елемент1в у файлі . в1кно. Це для 
дуже зручна функц1я 
58 
482. ЧДтУ.23 І 8І  5-002 
рnклад, можна проаналізувати r-IafJ та nерегл 
• • янути <<дерево>> 
cSS І-ІТМL-елементів та 
J(]ІаСИ ВІДПОВІДНО ДО НИХ. 
,,,,; i-lX:;:J' .. 
' 
Рисунок 3.20 - Вкладка <<Structure>> 
Ще одна важлива вкладка <<Project>> дає змогу зручно переміщуватись по 
• 
файлам проекту, створювати, видаляти та редагувати їх. Також, якщо пщключена 
• • 
можливість Gіt-репозиторієм прямо ІЗ-ПІД IDE, то 
керувати 
•• 
файли підсвічуються кожен своІм кольором, редаговані/видалені/нові що дуже 
спрощує сприйняття структури файлів проекту. 
59 
4s2.ч дт у .23 18 15-002 
.. 
, .. 
• 
.. 
.; •• 
Гf/~ 
·' 
(~ 
·;·- \ 1 
>:~ 
·-~ 
~/:1,~l,;  
",: 
-""~-
•"✓.":;_, ~ 
~~~ 
~J~,.:..  
"'%.•,,~ -,;.
: .' <,  
'І•~~ 
<іо,, . ..
/..  
~.,;,.~  
-~·:1'f 
;с.:: ~ 
.J,',;,' • 
'~· 
~':.  
Рисунок 3 .21- Вкладка <<Project>> 
• • • 
На вкладц1 <<Event Log>> можна в1дстежувати та переглядати системи~ І 
• • • • 
п1дказки 
пов1домлення робочому процес~, та деяк~ щодо робочого 
помилки в І 
І 
' І 
циклу від самої програми W ebStorm. Системні повідомлення мають глобальну 
дату формату <<день.місяць. рік>> та точний час у форматі <<години • 
• ХВИЛИНИ>> . 
Також у цій вкладці наявні наступні кнопки: 
• • 
as read>>, яка маркує ус1 пов1домлення як 
1 <<Mark all notifi cati ons 
• 
прочитан1. 
2 <<Clear all>> очищає весь список повідомлень. 
\ 
з <<Settings>> 
60 
• 
• 
482.ЧДту 
.23 1815-002 
Рисунок З .22 - Вкладка <<Event Log>> 
• 
у • • 
нижньому право~у кут1 є кнопка, яка надає МОЖЛИВІСТЬ швидко 
переглянути усі гілки. конкретного проекту (локальні та віддалені). Крім · іншого, 
можна виконувати у цьому вікні наступні дії з вибраною гілкою: 
1 <<Checkout>> 
2 <<New Branch from Selected ... >> 
з <<Compare with Current>> 
4 <<Show Diff with Working tree>> 
.5 <<Merge into Current>> 
' 
6 <<Rebase Current onto Selected>> 
• 
7 << U pdate>> 
8 <<Push>> 
9 <<Rename>> 
61 
482.ЧДту .23 1815-002 
1O <<Delete>> 
. ' 
-;;;. :" , .. ~~ ,''· ""' · 
~· ., ' " :, .,. +'li 
•• "'' t.: • ~ 
• \ . ',_ ··, ,,~ -
~;;.r,, 
..... .. 4"t . 
·• . 
-~;• ,:.--, ; ,~, & ~.:"''' 
·~·.;-.;; ' 
~ .:-J.\ . 
• .. ·J::;:;J~ 
•~- -. ..!-
Рисунок 3 -23-· Швидкий доступ до гілок 
Через меню <<File>> можна • 
визвати голрвн1 налаштування << Settings>>, де 
• • • 
багато • • 
знаходяться рІзнІ пІд-меню, у яких є вар1ант1в конфігурування IDE та 
• • 
безліч ІНШИХ налаштувань, ЯКІ допомагають покращити роботу з кодом та 
зробити цей процес комфортніше. 
Із найкорисніших можна виділити: 
1 <<System settings>>, де можна налаштування авто-збереження файлів та 
вказати інтервал часу, після якого IDE буде це робити. 
..., 
2 <<Appearance>>, де можна вказати бажаний розмір шрифту та иого вид, 
кольорову тему, налаштувати 
вид відображення 
вибрати глобальну 
панелей, ·активувати різні параметри щодо нумерації. 
<<Live Templates>>, у якому можна 
з <<Editor>>, де знаходиться меню 
•• 
шаблони, при потребі ІХ конфігурувати та 
переглянути вже існуючі 
• 
створити нов1. 
62 
482ЧДт 
. У.231815-002 
4 <<Plugins>>, де можна підкл 
ючити І-Іеобх· . . 
розширеної роботи з код ~дн, плаrіни для більш зручної та 
ом. Є вкладка М 
допомогою рядку пошуку ~ « arketplace», у якій можна за 
знаити потрібний 
плагін. 
5 <<Languages and Framework S>>, Де знаходять ся детальн1.  налаштування мов 
програмування, таких як JavaScript, TypeScript, 
налаштування фрєймворк· Markdown, а також 
~в, таких як s,ty1e1int, Bower, Webpack. 
Рисунок 3.24 -Меню налаштувань IDE 
• • • V 
Наявна функція пошуку файлів, класІв, СИМВОЛІВ та ДІИ у проекті. Вона 
.., 
допомагає швидко необхідний файл (а бо клас, наприклад) у великому знаити 
• 
проекті. Також можна розширити МОЖЛИВОСТІ пошуку за допомогою чекбоксу 
• 
«Include non-project items>>. Окрім цього є МОЖЛИВІСТЬ виставити фільтри за 
допомогою кнопки 
63 
Рисунок З .25 - Вікно пошуку по проекту 
3.2 Тестування системи 
3.2.1 Модульне тестування 
3.2.2 Модульне тестування сайту підтримки молодих батьків є важливою 
• 
складовою розробки п1дтримки цього сайту . Цей тип та тестування 
процесу 
• • V 
• модул1в або компонент1в саиту з метою 
спрямований на перев1рку окремих 
виявлення помилок та переконання у їхній коректній роботі. 
Таблиця З.І 
Етапи модульного тестування 
64 
482.ЧДту .231815-002 
Основні етапи 
Виконання 
~gаЛіз вимог На ц. ьому етапі п ро водиться v 
анал1з вимог до сай : детальнии Виконано 
ту п~дтримки 
батьків · в молодих 
- . имоги визначають ЯКl.  ф ... 
повинен в ' ункц11 
иконувати сайт 1· . V 
ЯКl ИОГО · 
компон· енти потріб но протестувати. 
розробка На основі вимог 
... розробляються тестові Виконано 
тестових сцен.а р11, які .о пису ють посл1.д овність дій 
••• 
сценар11в для перевірки кожн . 
ого модуля окремо. 
Тесто· ві сценарії пови нн~.  б ути якомога 
повними і включати р·l ЗHl.  МОЖЛИВІ.  BXl. ДHl.  
• 
дан1 та умови. 
Розробка На цьому етапі формується набір Виконано 
тестових тестових випадків, які виконують тестові 
наборів сценарії. Кожен тестовий випадок 
V • 
спрямовании на перев1рку певного 
модуля або компонента сайту. 
З .2.3 Інтеграційне тестування 
Інтеграційне тестування сайту . підтримки молодих батьків є наступним 
етапом після модульного тестування і спрямоване на перевірку взаємодії між 
різними модулями та компонентами сайту. Цей тип тестування виявляє помилки, 
. III{j можуть виникати під час обміну даними, комунікації та інтеграції між різними 
частинами сайту. 
65 
... 
482·чдтУ.2з 1815-002 
• 
Таблиця 3.2 
Етапи моду · 
льного тестування 
---------~1~О~с=н~о~в~н~і~е_т_а_п_и----------------,-------, 
Erafl · Виконання 
визначення Це перший 
.. ., крок, де ідентифікуються Виконано 
• 
іnrеграц1иних компоненти та модулі, які повинні бути 
проінтегровані. Вони можуть включати функції, 
бази даних, зовнішні сервіси або інші елементи, 
що взаємодіють між собою 
' 
Розробка На основі інтеграційних точок розробляються Виконано 
. .. . . . . . . " 
тестових тестов1 сценар11, ЯКІ описують ПОСЛ1ДОВН1СТЬ ДlИ 
••• 
сценар11в для перевірки взаємодії між компонентами. Ці 
сценарії включають вхідні дані, передачу даних 
між компонентами, обробку та . отримання 
• 
результат1в. 
• 
' ' 
, 
• 
66 
І 
їfіС nsт:rs т%Srss1bt nir t"'&t11·1t1i·їжlilii118iiiбit1C11l1 i~l,. .,1 8is•:••z- ---:-.:\- - -
482·чдтУ .231815-002 
розробка На цьому е · ф 
. тапІ армується 1-1абір тестових Виконано 
1есrо:вйХ випадкІв, які викон . 
УІОть 1нтеграційні тестові 
• 
1-1абор1:в сценарії. Кожен тест " 
овии випадок спрямований 
на перевірку певної . 
взаємодії МІЖ 
компонентами 
та перевірку • 
коректност1 
передачі даних . 
....- . 
3. 2. 4  Системне тестування 
. .., . 
системне · тестування саиту ПІдтримки молодих батьків є останнім етапом 
т естування перед вип'у ском виробу в експлуатацію. Його мета - перевірити 
функціональність та продуктивність системи в цілому, • 
а також їі _взаємодІю з 
• 
реальними користувачами та Іншими системами. 
Таблиця 3.3 
Етапи системного тестування 
Етап Основні етапи Виконання 
Тестування На цьому етапі перевіряються всі Виконано 
J 
функціональності · функціональні вимоги, включаючи 
. 
можливості сайту підтримки молодих 
• • 
батьків, так1 як реєстрац1я 
користувачів, пошук інформації, 
взаємодія з форумами чи чатами, 
• 
д~ступ до ресурсів тощо. Тестувальн1 
... озробляються з орієнтацією 
сценар11 Р 
. ситуації використання 
на реальн1 
67 
482.ЧДту .231815-002 
V 
саиту. 
На цьому 
етапі ne . 
••• взаємо · v ревІряється Виконано 
взаємод11 дІя саиту з ін 
. шими системами 
або серв1сами на -
. ' приклад, зовнішніми 
плат1жними шл 
юзами, соціальними 
мережами або систем -
ами електронної 
пошти. Також 
- перевіряється 
взаємодія з реа.л ьними . 
користувачами 
шляхом тестування 
взаємодії через 
інтерфейс сайту. 
\ 
тестування На . цьому етапі • 
ОЦІНЮЄТЬСЯ Виконано 
• 
продуктивност1 продуктивність V • 
саиту ПІД 
навантаженням. Проводяться тести на 
. 
масштабованість, завантаження та 
. 
швидкість реакції сайту в умовах 
•'  
реального навантаження. 
3.2.4 Приймальне тестування • 
Приймальне тестування ( або тестування прийняття) сайту підтримки молодих 
батьків є завершальним етапом тестування перед його впровадженням в роботу. 
V 
Иого мета - перевірити готовність са~ту до використання, впевнитись в його 
якості та відповідності вимогам замовника або клієнта . 
• • 
Таблиця 3.4 
. 
Етапи приймального тестування 
Виконання 
Етап . 
Основні етапи 
-
68 
482.ЧДтУ.231815-002 
Визначення обсягу 
... тестування, встановлення 
критер11в успішності т Виконано 
естування та вибір 
тестових 
сценаріїв, 
будуть 
використовуватись під 
час V 
nриимального 
тестування. 
--------==:-Тз~==~------....:.·_J_ ___ J 
В~ntонання а допомогою внутрішнього 
r••' команди або Виконано 
тестування залучення зовніmніх 
тестувальників 
. 
виконуються тестові сценарії, які охоплюють 
ключові функції та сценарії використання 
сайту. Важливо перевірити, чи працює сайт 
правильно, чи коректно обробляються дані 
• 
користувачІв та чи відповідає вимогам 
безпеки 
виявлення та Під час приймального тестування виявлені Виконано 
документува проблеми, помилки або невідповідності 
ння дефектів вимогам документуються. Детальні звіти про 
дефекти допомагають розробникам виправити 
. . " 
проблеми та ПОЛІПШИТИ ЯКІСТЬ саиту. . 
' 
\ 
69 
' 
482ЧДт 
. У.231815-002 
В~сновkи 
І1ід час розробки проекту був 
· розроблен " 
. ь всі необхідні функції для . ии програмний додаток, який 
мicfll'f n~дтримки моло . . 
:но врахували аспекти м дих батьк1в. При проектуванн~ 
ретеJІЬ одульності та · • -
1нтерфейсу дод о на 
відJІовідJІУ навчальну .л ітераrуру, Щоб атку. пиралась 
. забезпечити належне виконання 
заnла:н:ованих етап1в. 
Всі результати роботи • 
ПІД час проектування системи були втілені в 
додатку. Додаток • 
. n1ддавали в1· дпов.1 дному тестуванню, щоб 
nереконатись, що в1н працює н 
алежним чином і задовольняє всі вимоги. 
результати тестування були дуже задов • . . · 
1льн1, п1дтверджуючи безперебійну та 
uалежнУ роботу додатку в його предметній області. 
В першому розділі було опис аво мету розробки програмного забезпеченн-я, 
І 
проведено аналіз аналогів с.истеми. Висновок, що в Україні інформатизація ,І  
здійснюється згідно з Національною програмою інформатизації, був зроблений. 
Ця програма визначає стратегію для вирішення проблем забезпечення 
інформаційних потреб та підтримки різних сфер діяльності загальнодержавного 
. ' 
значення, таких як соціально-економічна, екологічна, науково-технічна, оборонна, 
національно-культурна тощо. 
Тема молодого батьківства завжди є актуальною, тому розробка систем, ~кі 
• 
• 
полегшують завдання молодим батькам, є необхідними для користувачів і 
компаній, · що займаються розробкою сайтів. 
В другому розділі о пи сан процес розробки додатку. Була використана 
• • • 
уніфікована мова моделювання (UML) для моделювання I опису вс1х про_цес1в. 
діагр зд~· лити на дві категорії: поведінкові .та структурні. 
ами можна умовно ро _ 
П · . . . · ть процеси що відбуваються в модельованому 
овед1нков1 д1аграми в1до 6р ажаю ' 
. · · діаграми відображають елементи, з яких 
середовищі, тод1 як структури~ . . 
.., . 
c1rn зазначити, що одн1 и т1 ж типи д1аграм ~ожуть 
'"' 1адається система. Варто 
70 
з ааа&: z_q ФA.Lt(tt 1_: сзя:е:.а~ е а: а 
482·ЧДтУ.2з 1815-002 
J(ористовуватися як для моделю ви · вання біз 
Нес-процесів, так і для проектування 
архітектУРИ-
у рамках бакалаврської робо 
ти 6У  ло створено різні типи діаграм, зокрема: 
іаrраму розгортання, діаграму к . ... . 
д . . омун1кац11, д1аrраму діяльності, діаграму 
мnонент1в, д1аграму пакетів ді 
J{O ' аrраму класів, діаграму послідовностей та 
. граму прецеде1-1тів. Ці діаграм 
дtа и допомогли візуалізувати та уточнити різні 
аспекти проекту, що дозволило забезпечити краще розуміння системи та сприяло 
ефективному процесу розробки. 
• • 
В третьому розд~лt описа1-10 розробку програмного додатку з необхідними 
функція1.1и. Під час проекrування були ретельно враховані всі аспекти створення 
модулів та ЇІПерфейсу додатку, з використанням відповідної навчальної 
літератури дл.я правиль11ої реалізації запла1-1ова1-1их етапів. База даних була 
)'Сnіш110 спроектова11а та рсалізова11а під час розробки. Результати проектування 
СlіСгеАІІІ були втіле1-1і в кі1-1цево1.tу додатку, який пройшов відповідне тестування. 
в11с 11овко1'І тесrувш-11-1я є безперебіnна та належна робота додатку у своїй 
прс.  1"fст11ій області . 
• 
71 
482.ЧДтУ.231815-002 
список вик 
. ОРИ~ТАНИХДЖЕРЕЛ 
1 Думанська В.П. Монетар ... 
нии nронаталізм· . ф . П 
Думанська // Демографія · оц1нка е ективносn / В. . 
• 
2 і соц1альна економіка. _ 20 
· 1З . - No- 1 ( 19) - С. 28-36. - d 01.:  
10. 15407/ds e 20 13.01.028 · 
3 Кример Б.О. Демографічні ез 
. · Р ультати запровадження допомоги при 
народженн1 дитини / Б о К 
· · ример // Демографія і соціальна економіка. -
ZOl 3· -№ l (l 9)- - С. 37---4б. - doi: І 0. l 5407/dse201 З.О І .037 
4· Офіційний сайт UNICEF [Еле .. • 
ктроннии ресурс]. -Режим доступу: 
http://www.unicef.org/earlychildhood/·1 n d 
ех_ 69 849.html 
5 Шлюб, сім'я і дітородні орієн · ... у · .. · · 
тац11 в кра1н1 :· [к олективна монограф1я] / 
Наук. кер. Лібанова Е.М. - К.: АДЕФ-Україна, 2008. - 256 · с. І І 
І 
6 European Values Studies. Family section. [Електронний ресурс]._ Режим 
доступу: 
http:// www.europeanvaluesstudy.eu/frmShowpage?v_ page_id=7 4619898514 
26413 
) 
7 NUTRICIA CLUB. [Електронний ресурс]. - Режим доступу: 
' 
https://club.nutricia.ua/confident-dad/psihologia-tata/molodim-batkam-ak-
. . 
pravilno-vihovuvati-ditinu 
' 
8 <<Prostobaby>> [Електронний . ресурс]. Режим доступу: 
' 
http://ua.prostobaby.eom.ua/spravochniki/zavedeniya_dlya_roditeley/l/8. 
J 
9 Gomick J .С., Meyers М.К. Families That Work: Policies for Reconciling • 
Parenthood and Employment. -Russell Sage Foundation, 2003. - 404 р. 
10 н 1m an L ., ·s· Ь en І ., Van zundert М. Atlas of European Values: Trends and 
а 1е 
, т ra d"1 t·1 ons at t h tum f the Century. - Leiden, the Netherlands: Brill. 2011. 
е о . 
72 
• 
~!.  \'t'"'-'\', 1\ . \;,к · ,,,,,,,. , к . ~ ~,, ' 
- ,. ,-.,."1  11J '\~. . 
\ ~ І t \. - . 
iv\J\,\..,,~,ч~ ,,. :J\)i1' ,llh. і \ciiu~•,)I. - J lOІ ) I. l uO . - : v2. 
'3 ;1,;t,,)11 М,tІ<І1)~1 U\l. 1-ес111 nа,,1,я оо·t'І{ІІІ()--() 1). ( І І І( і \~ Іі ( (' urp<~ 11, \ t і І \• І \~ 
1~,бс ·3 ~-,с'ІС111ІЯ. / Ді1,011 Макrрегор. ДсвіJ Саії ~с. _ І ~І : \·· 1 ···. _Q(t . ! ~ 
• 
\ .i 1· ,J; 1 ~-б L:.U.~ Заспа 1~. 0., Півень О.Б .. к~-r cr1-J с .lU. t.: dr,~ ,ii; ' · • 
мс1·с;1ап f3.lЗ., 0 JlCKC10K В.В. Meтo.J,1t111i r~~(,\\Cll ~\.ltlll . \\ (\ \ і( ,, \ \ І 
• • 
• .. , ·· ,_. ,- - · ~Ї \!(\ \ \І І І \ \ 
1,uаJ ІЇL\JІІ,аUІ\11~01 i)UUUlll оака:,авра ;].\Я З.1( :, \_ t \\t \\\\\ \ 
І 
\ 1, і)•' \ 1\ 1 
~ІІ~І.LЇ'-І .1ІІ,І·\tІ~1- і 121 ((\\ІЖ\..Не\JЇЯ lll)Ull)d\ltlt~i-u <1(1
( ,1\ '-- L\\..tl l l " ~· ~ ' 
І \~\13' 1а11 І \Я. 
• 
• 
' 
• 
• 
\ 
------ --·- · . -· •.•  . іЇІІЇІІІІ. ....і 1881 __- ;1~---. -~ 
додлтокл 
• 
3АТВЕР ЕНО: 
Зав. 
, F-тгою ПЗАС, професор 
--- Голуб С.В. 
(;)& 2023 р. 
Розробка інформаційного WЕВ-додатку підтримки майбутніх батьків 
. . 
Специфікація 
482.ЧДТУ.231815-002 
Листів 2 
Розробник Деркач К.В. 
Керівник Півень О.Б. 
Норм о контроль Півень О.Б. 
2023 рік 
482-ЧДту.231815-002 2 
f{ачення .., 
rтоз н аим:енування • 
Пр им1тка 
v-- qДТУ.231815-002 12-01 34-01 
482- І нструкція користувачеві 
482-,ЧДТ У.231815-002 12-01 12-01 • 
л 1ст.и нг програми 
-----1-.JДТУ .231815-002 12-01 90-01 
482- Презентація 
V-
V-
. 
І--- -
- - . 
~ 
-
-
. 
. 
. 
- - -
- -
- ~ 
- -
- - - - -
- -
L..--- -- - 75 
- - - -
·\ 
І 
домтокв 
Розробка інформаційного WЕВ-додатку підтримки майбутніх батьків 
Лістинг програми 
482.ЧДТУ.231815~002 12 01 
Лисrів 8 
• 
Розробник Деркач К.В. 
Керівник Півень О.Б. 
• 2023 
. 482·чд-гУ.2з 18 
com.api.RealProperty . 15-0021201 
ac~age -conf1.g; 2 
р . 
com.api.RealProperty . 
j_JllP o:rt com. ар1.. R 
po:rt .  ealProperty . serv1.. ce -AuthMan · 
j_Jll t com- ар1. RealProperty -sseer v1.. ce · Т ager• 
okenRememЬ' 
·rnpor org.springframework ь· rv1.ce.userDet ·1 erмeservice; 
Jj_. JllP ortt  org.springframework.· boea nt s · f actory.annа1o. t sSe_ rv1· .ceirnpl; 
j_rnP0 :rt org.springframework с O •Web.servlet М ~t:on.Autowired; 
j_rnpo:r · ontext.annotat· · u t1.partConfigFactory; 
. porpt ringframework. securi ty 1.on. Bean; 
J.!11 
o:rg.s .authenticat· 
j_rnpos:rpt ri• ngframework • sec ur1. .ty 1..o n.RernemЬerMeAuthenticationProvider; wеь 
org · 1 . · · authent · 
уІІ!ІР '  icat1.. on · rerne mЬ errne. JdЬcTokenRepos1.  tor 
·rnport 
J. springframework.security.w Ь 
o:rg, ·1ter· е .authenticat· 
cationFi ' . 1.on.rernemЬerrne.RernernЬerMeAuthenti 
. rnport . 
J. springframework.security wеь 
org- . . · -authentic t· 
мeser"1~·1ces' . а 1.on · rernemЬerme. TokenBasedRememЬer 
·rn ort org. springframework. stereot . ·. 
~rn~ort org.springframework.web.mul~~e.Controller; 
і~О rt , part.MultipartResolver·,  
org. springframework. web. mul tipart. su 
pport.StandardServletMultipartResolver; 
irnport javax.servlet.MultipartConf' El 
import javax.sql.DataSource; 1.g ement·'  
import ~ava.secur~ty.MessageDigest; 
import Java.security.NoSuchAlgorithmE . 
xcept1.on; 
@Controller 
public class BeanGenerator { 
@Autowired 
private DataSource dataSource; 
@Autowired 
private . UserDetailsServiceimpl userDetailsService; 
, 
@Autowired 
private TokenBasedRememЬerMeServices tokenBasedRememЬerMeServices; 
@Autowired 
private JdbcTokenRepositoryimpl jdbcTokenRepository; 
@Autowired 
private ·AuthManager authenticationManager; 
@Bean , 
public MessageDigest messageDigest () { • 
MessageD.i ges t messa geoi· ge. st = null; 
try { . Digest.getinstance(''SHA-256''); 
messageDigest = Message 
return messageDigest ; . е) { 
} catch (NoSuchAlgorithmException 
e.printStackTrace(); 
} 
return messageDigest; 
} 
@Bean mbe rMeAuthenticationFilter() { . 
PUblic ·cationFilter reme 
RememberMeAuthenti 77 
482·Ч ДТу .2318 
return new Remem.ьerмeд 15-002 12 01 з 
sedReme mЬ erMeServices). Uthent·i cationp·l 
t 0кєо8а ' · 1 ter(authenticationManager, 
} 
@веаn 
ь~іс. RememЬerMeAuthentic t· 
rp\nl ЬerMeAut h en t i· catio· nProvideа r(io) nPr ovi·c ter 
x:erne return new RememberMeA th {. 
u enticat· . 
} ionProvider(''secret''); 
@веаn 
pu ь1іс TokenBasedRememЬerм е 8 ervi. ces 
return ~ew TokenBasedRemernЬ М tok~nBasedRememЬerMeServices() { 
0etailsServ1ce); er eServices(''secret'' 
user , 
} 
@веаn 
public JdbcTokenRepositoryimpl . 
· JdbcTokenRepositoryimpl t kJdЬcTokenRepository() { 
тokenRepos1. dЬ toryimpl(); о enReposi ·t ory = new 
J с . 
tokenRepos1tory.setDataSou 
return tokenRepository; rce(dataSource); 
} 
@веаn 
Public TokenRememЬerMeService myT k R 
t O en ememberMeService() { 
re urn new TokenRememЬerMeService("secret", userDetailsService); 
} 
@Bean (name = "commonsMultipartResolver") 
public MultipartResolver multipartResolver() { 
return new StandardServletMultipartResolver(); 
} 
. 
@Bean 
public MultipartConfigElement multipartConfigElement() { 
MultipartConfigFactory factory = new MultipartConfigFactory(); 
factory.setMaxFileSize( !'lOMB''); 
factory.setMaxRequ~stSize(''lOMB''); 
return factory.createMultipartConfig(); 
} 
} 
package com.api.RealProperty.service; 
import com.api.RealProperty.entity.Role; 
import com.api.RealProperty.entity.User; 't . 
. . ository.UserRepos1 ory, · 
1mport com.ap1.RealProperty.rep tor annotation.Autowired; 
import org.springframework.beans:fac t~~ntication.AuthenticationManager; 
import org.springframework.secur~ty.authentication.BadCredentialsException; 
i·m port org. springframewor k • s·e  cur1ty · au 
import . authent1. ca t'i on.  UsernamePasswordAuthenticationTok 
org. springframework. secur1 ty · . 
en; . е Authentication; 
l·m port org.springframewor k .se cur1. ty.cor · Authent1• cat1· onЕ  хсер t'i on,·  
1. k curity.core. h 't . 
mport org. springframewor · se . core. GrantedAut ~ri У' . 
i.m port org.spr1•n g f ram ework.secur·ittyy.  core.aut hority.S1mpleGranted,Author1ty; 
1
. mport org. spr1· ng f ramew orkk . setecrueroit yp· e. compon ent '·  . 
import org. springframewor · 5 
' 
lmport java. util. HashSet; 78 
482.ЧДТу 
. java.util.Set; 23 
il11Port · IS І 5-002 12 01 
4 
onent 
@corn~ class AuthManager impl 
р uь11с - ements 
pr ivate final UserRepoзitory 
UserRep . i . _ 
3
@дutowired L o ry; 
ublic AuthManager(User Rep . 
р h. - R . -os1 tory us: 
t 1s. user epos1 tory == u , · e r Rep,osi t o r , \ и 
} serRepos1-·t o ry; у , Q 
@override 
public Authentication authe t· 
}\Ut henticati,o nE1x cep· tion { n icate (Authent ication a uthe nticatlona th r ows 
String ogin = authentic t· 
String loginPassworct = а 10" •?etPrincipa l() + ••; 
User expectedUser = useraRuath ent.. 1.cat: 
ion . geL Crede ntial s {) + ""; 
- Posi tory . fi nct·serByLoqi n f l og in ) ; 
if (expectedUser == null) { 
" . throw new BadCredentialsгxcepL· (" 
ьаsе ) , ,.. · ion error 
} l oad user fr om dat в 
if (!hexpectedUser.getPassword().equals(loginPassword)) ( 
t row new BadCrectent · 1 Е ~ · · · 
} ia s xcepLion("password 1nval1d"); 
Set<GrantedAuthority> grantedAuthorities - new HashSet< (); 
Role role = expectedUser.getRole(); 
grantedAuthorities.add(new SimpleGranted.Authori t y(ro le . g t N . m.e ( ) ) ) ; 
UsernamePasswordAuthenticationToken token = new 
usernamePasswordAuthenticationToken( 
login, 
expectedUser.getPassword(), 
grantedAuthorities); 
token.setDetails(authentication.getDetails()); • 
return token; 
} 
} 
package com.api.RealProperty.service; 
import org. springframework. beans · factory.annotation.Autowired; 
oimrgp.o srpt ringframework. securi· t authent1.. ca t·i on.  UsernamePasswordAuthenticationTok 
У· 
en; 't .core.Authenticatio~; . 
import org springframewo·rk • secur1. У ntext securi tyContextHolder, 
1. mport org . springframewor k • secu ri.t y.core.cuos erdeta. 1. .ls. UserDe.t a·i1  s,. . 
. . . k ecurity.core. . 
1mport org.springframewor · 5 type cornponent; 
1•m port org. spri.n gframewo rk · stereo · 
letRequest; 
import javax.servlet.http.HttpServletResponse; 
1. mport javax.servlet.ht t Р· HttpServ 
@Cornponen t 
PUblic class AuthService { 
aut hм nager; · 
Private final а ilsServ1..ce.,  
AuthManager viceirnpl deta R mernЬerMeService; 
Private final UserDetailsSe~eservice token е 
Private final TokenRemember 79 
PJ 1t1;11s- r:t &ес tctrrss-- , q т п •• - rr те rzFP s:RFs 
482.чдгУ23 
. . 1815-002 12 01 
ь~іс AuthService(Authм 5 
p·u1 sserv1. ce, Т k anager 
о enRememberм authMan 
oetai this.authManager = а t~Service tokager, UserDetailsServicelmpl 
this.detailsService ~ Manager; enRememЬerMeService) t -
this.to k enRememЬerMes-  det. a 1·  1 
. ervice _sS erv. i . 
се, 
} - tokenRemeть 
erMeService; 
• 
public boolean login(string 
HttpServletResponse res) { login, S tring · 
teq, userDetails userDetails Password, HttpServletRequest 
= detailsser . 
if (userDetails == · vice.loadUserByUsername(login); 
return false; nu11) { 
} 
if (!userDetails.getPa 
re t urn false; ssworct(.) . equals(password)) { 
} 
UsernamePasswordAuthent· 
new icationToken token = 
usernamePasswordAuthenticationTok ( 
userDetails.getPassword(), userDe~:i~serDetails.?e~Username(), 
token.setDetails(userDetails)~.getAuthorities()); 
Authentication authenticat = · 
е authManager.authenticate(token); 
tokenRememberMeService.login(req, І 
res, authenticate); 
\ 
if (token.isAuthenticated()) { 
SecurityContextHolder.getContext() .setAuthentication(token); 
return true; , 
} else { 
return false; 
} 
} 
public void logout(HttpServletRequest req, HttpServletResponse res) { 
Authentication authentication = 
SecurityContextHolder.getContext() .getAuthentication(); 
tokenRememberMeService.logout(req, res, authentication); 
'SecurityContextHolder.clearContext(); 
} 
} 
package com.api.RealProperty.service; 
import com.api.RealProperty.entity.Role; 
~mport com.api.RealProperty.entit~.User~ Repository· 
import corn.api.RealProperty.repository. se~notation A~towired; 
im port org.sprin. gframewor k · beans : factory.aG ranted.Aut· hority; 
im • k security.core. . 
. port org.springframewor · . е authority.SimpleGranted.Authority; 
~mport org. springframework • secur~.ty · cor е · userdetails. UserDetails; 
~mport org.springframework.secur~ty.cor ·userdetails.UserDetailsService; 
i.m  Port org. springframewor k • se curi ty · core . 
import d tails.UsernameNotFoundException; 
or ·ty core user е 
. g · springf rarnework. secur l · · component; 
1rnp 0 rt org.springfrarnewor k · stereotype · . 
' 
~IТlPort j ava. util. HashSet і 
irnport J. ava.ut.i l. S t 
е; 80 
аю & .! і ЗЗОЧ_д .i .WU!Ц.QQ_.Qbi!ILW& з -
· ·rrarз 111:f&Xtffs@ 1 'Ф ,-,-,-а а zr@r :sr:чzrz· 
482.чд-гУ2 
. з 1815-002 12 01 
6 
UserDetailsServ· 
1.cerrnp1 • 
l.Inplernents 
final UserRepository UserDetailsService { 
userRe . 
Pository; 
@лu.towired . _ 
pu. bliC UserDetailsS
thi. s.userRepos. ervicer 
itory _ rnpl(U serReposit 
- userReposit ory 
} ory; userRepository) { 
@override · 
pu.blic UserDetails loadUserв U 
у sernarne(St r1. 
. 
.ng login) throws 
pacJ<a ge com.api.RealProperty • serv.i ce; 
·com.api.RealProperty.entit u 
com.ap. i.RealProperty.reposУ'.t  ser '·  
org.springframework.beans l.f ory.UserRepository; 
org.spri.n gframework.stereo. t actory · an. n 0 t t·
а 1 .on.Autowired; 
. ype.Service; 
import java.util.List; 
import static j ava. util. Obj ects. isNull; 
@service 
public class ~serService implements IUserService { 
private final UserRepository userRepository; І 
І 
@Autowired 
public UserService(UserRepository userRepository) { 
this.userRepository - userRepository; 
} 
@Override 
public User addUser(User user) ·{ 
return userRepository.saveAndFlush(user); 
} 
І • 
@Override 
public User getUser(Long userld) { 
User user = userRepository.getOne(userid); 
if (isNull(user)) { 
return null; 
} 
return user; 
} 
@Override 
public User userUpdate(User user) { . 
return userRepository.save(user), 
} 
@Override 
L ng userid) { 
public User deleteUser ( O tOne(userid); 
User user = userRepository.ge 
if ' (isNull(user)) { 
return null; 
} 
return user; 81 
а: ECШJQ.O&@,.&№Jйtf½@A-.д.:.t::zn~.s . : с , 
, 
482.ЧДrу2 
. З 1815-002 12 01 
} 7 
@overrid~ 
ь~іс List<User> getдll 
ри return userRepositorUse:() { 
Y,findAll(); 
} 
@override _ 
ubliC User getUserByLo . 
р if (isNull(login)) 1in(St ring login) { 
return null·,  
} 
return userRepository f' 
. J..ndUserв L . 
} У ogin(login); 
@Qverride 
public List<User> getUserв F' · 
if '(isNull (firstName)) у { irstNarne (String first_Name) { 
return null; 
} 
return userRepository.findUse . -
} rByFirstNarne(firstName); 
@Override 
public List<User> getUserByL tN . 
if (isNull(lastName)) { as arne(St ring lastName) { 
return null; 
} 
return userRepository f' d 
. · in UserByLastName(lastName); 
} І 
} І 
package com.api.RealProperty.config; 
import org.spr~ngframework.beans.factory.annotation.Value; 
import org.springframework.context.annotation.Bean; 
import org.springframework.context.annotation.Configuration; 
import springfox.documentation.builders.PathSelectors; 
import springfox.documentation.service.ApiKey; 
import springfox.documentation.service.AuthorizationScope; 
import springfox.documentation.service.SecurityReference; 
import springfox.documentation.spi.DocumentationType; 
import springf ох. documentation. spi. service. co_ntexts. Securi tyContext; 
import springfox.documentation.spring.web.plugins.Docket; 
import springfox.documentation.swagger2.annotations.EnableSwagger2; 
1' mport j ava. util. Collections; 
• 
1mport j ava. util. List; 
@EnableSwagger2 
@Configuration 
PUblic class SwaggerConfig { 
AUTHENTICATION_HEADER - "Authorization"; 
private static final String 
@Value(''${swagger.host}'') 
private String ·host; 
І 
@Bean І 
Public Docket арі() { tationType.SWAGGER_2) 
return new Docket(DocumenCollections.singletonList(authToken())) 
.. securitySchemes( 
List(securityContext())) 
•SecurityContexts(Collections.singleton . 
. host(host) 82 
482.Ufrh, 
I 
.select() -ц у ·23 1в  I s-0,02 12 о 1 8 
.build(); 
) 
Prl· vate АріКеу authToken() ( 
return new АріКеу ( "Bearer 
~der"); { accessToken І", /-1.ILDitfEJ,r- -; д1' і 0~ ttEADER , 
"11е~ -
) 
pr1· vate SecurityC. ontext securityco t .. 
ru ext () ( 
return Securit~Context.builder() 
.securityReferences(def . . 
f р th ( th au 1 tP.uth ()} 
:ь~~l:(): pa -> PathSelectors.ant( "/ ••• ) .appl!(path ) ) 
} 
pr 1· vate Lis. t<Se. curSi tyReference.>  defaultAu th() { 
дuthor1zat1on соре authorizationScope = new 
th0 izationScope(''global", "accessEverything"); 
дu r дuthorizationScope[] authorizationScopes = {authori zationScope }; 
return Collections.singletonList(new SecurityReference ("Bea r e r 
{access Token}. '', authorizationScopes)); 
} user user = userRepository.findUserByLogin(login); 
І 
• 
, • 
• 
83 
, - . ... .. 
додАток в 
. \ 
Розробка інформаційного WЕВ-додатку підтримки майбутніх батьків 
І 
, І 
і 
Інструкція корис'І)'Вачеві 
482.ЧДТУ.231815-002 34 01 
Листів 8 
І • 
Розробник Деркач К.В. 
Керівник Півень О.Б. 
, 
А 
2023 
• · •s s-:::#~-::4 (·( Eic..t ±tFYІW Stf(Іrf s11 r;тt:s· r , r щ]]srsrrrr s 
482U~r ' 
• ~l у .231815 
-002 34 01 
2 
r0 п0вна сторінка про ек ту Babyk· 
. ~п_. n,. 1 вигля 
Q. дає наст'у  
Search пним чином (рис. В.1 ): 
Со .9ommunlties Answersto 
@ conceQtion children any questions abou· 
Q PregnancY. and family_І іfе 
@ ДІІ about chi\dren 
Search among tips 
(і) Not ОПІУ. mom 
QJ Useful articles 
(?) ConsultationsР исунок.  Health 
B.l -- Г · ~ ть."'"rио1о.fl._~ 
оловна сто . ... -
З особливостей головної с . р~нка саиту Babyki 
. тор1нки м ожна в1. дмітити· 
1. Розширений блок <<С 
осиланн Пl. ЛЬНОТИ)) з набором·  1. 3 шести категорій та 
прям ими п ями на рекомен дован1• СПІ. ЛЬНОТИ. 
Q Search 
ConceP-tion ~-P-regnancY. Afc 
~ Со Communities 
" and childbirth 
{#- fami11 
@ ConceP-tion 
, Pregnancy_glanning fami\1 
:, G) PregnancY. 
PregnancY. Finar 
.. © АІІ about children 
ЕСО intimi 
..l· 
0 Not onlY. mom childbirth 
16 
~· QJ Useful articles Our с 
·. ф Consultations , 
Рисунок В.2 - Блок зі спільнотами 
2. Також наявний блок <<Календар вагітності і розвитку>> (рис. В.З), де 
М~ ожна ш видко 1.  зручно перейти до перегляду в1. дпов1. дного тижня вагітності. 
0РУч зн аходиться блок с посиланнями на в1· дпов1·д н1· роки розвитку дитини, який 
Розбитии" на категорії «Перщий рік розвитку в м1.с яЦЯХ>), «в ·1 д року до трьох)), «З 
1Р ьох до . . 
семи 1 старше>>. 85 
• І 
, --· ІІІ·і іІІі-і....-.і. . .. .- ··· • ·· . іІ'І ІІІііІііІііііІfііМ------
482ЧДту 
➔ () і babyblog.ru/cb . .2з1s1s 
- -002 34 01 
~ _,,,,,~ 3 
, . 
., flR_ST_!RIMESTE~ 
one 2 3 . four s 
• 6 
,  7 eight 
.~-
9 ten eLeve 12 13 
", ' 
S_E_C_O_ND_ _TR_ ,,.,,I,,,M,,.,,,,, ESTER 
==m•~N=-~•П,,N 
• Nine amazi 
_;, fourtliftee, 16 ng months separate а woman 
17 eight1 19 fЬ r oLm  pLa nnt·n twen1 21 g а ЬаЬу to meeting her 
е oved ЬаЬу. Every week every hour eve 
р second.  ·t he organs and sy' stems of th•e  fe· 
Исунок В .З - К ;irp \;i1rt rlPVPlnnPrt anrt imnrnvPri. ThP 
3.  у ниж· н1."и'  частині сай алендар в аг1• тності 
. . ту знаходиться сек . . 
~ис. В.4), де можна вибрати спіл . ц1я «Сп1льноти по віку дітей» 
. ..  . ЬНОТИ З ВІДП . 
СеКІ1ІЯ роздшена на блоки за п ов1дним рок 
орами року. ом народження дитини 
· 
(;И.ОG Q Search 
\ 
• 
:~ (о Communities Comm UПІ·· t·І еs Ьу date of birth of children 
,; ® . Concei:2tion Jj& October-2020 
-. 'ltl. f..l l А community for mothers whose babies are Ьо . . І 
PregnancY. issues related to pregnancy childb'rth th rn ,n October 2020. We discu~ 
п . ·, . . ~ . ' ' ' е first successes of babies. 
4u pa1t1c1pa11ts ь евtпеs 
АІІ about children 
,. Not onlY. mom December-2020 
:; 0 . 
s- А.  c, ommunity for mothers whose babies are bom і n Oe cemЬ  er 2020. We disc 
[р Useful articles issues related to pregnancy, childbirth, the first successes of babies. 
".., '. . .. 41 participants 1-entry 
® Consultations 
Рисунок В .4 - Спільноти по віку дітей 
4. При натисканні кнопки «Реєстрація», яка знаходиться поруч 3 
~0nко ІО <<Вх1.д >> у верхній «mапц~.»  саи~т у, в1· дкривається модал· ьне в1· кно (рис. в.5) 
]ф ' 
0Рмою реєстрації, де присутні наступ1п·  кнопк и··  
• І<н • еЖУ <<Facebook>> 
0пка входу через соц1альну мер 
• І<:н ковій системі «Google» 
0пка входу через аккаунт У noUIY 
86 
• 
482.ЧДГу.231815-002 34 01 · 
ока <<пользовательского со 4 
.. J{J-ІO глащения>> 
J{t10I1Ka <<Уже є акаунт, войти>>, яка ві . 
" п•,.,.,. Q дІ<риває 1нше модальне вікно 
~ Search 
-communlties 
(о 
• 
@ -conceP-tion 
!'-
, Q -PregnancY. 
, 
@ дІІ about children Your Іocation 
о 
!- @) -Not onlY. mom Let's create а ribbon for У 1 
OJ useful articles 
1.',  
Country 
Рисунок В.5 - Модальне вікно входу/реєстрації 
. ..., . '-' . .... 
у верхн1и прав1и частин~ саиту є кнопка <<Мій щоденик>> (рис. в .6), яка має 
••• 
ві функц11: 
д . • . 
1. При натисканн1 в1дкриває особисту сторінку користувача 
2. При наведенні курсору відображає список з посиланнями на 
• 
обхідні для к. ористув. ача стор1нки та налаштування. не 
3/JВУ Q Search 
~ Ribbon Ribbon 
) Notifications 
АІІ Friends Communities Minsk 
J Messag.@ 
~ МУ. Communities ШУ~ . 0611112022 
е ~ Moscow 
~ Bookmarks Test, another one, please take а _Іооk . 
conception 
- l' __ ..:  ___ -z "а.. __ : .. _ • , . В 6 - Елемент <<Мій щоденник>> 
Рисунок • . 
• 
. (рис · в ·7 ) ' можна вид1лити OCHOBHl 
Переходячи до сторінки корис тувача · 
:лементи інтерфейсу: 
1. Верхній блок. 
· . 
1.1 п Oф 1лю. 
Задній фон особистого Р 
87 
) 
. 482.чд-гУ.2з1&1s-002 34 о1 s 
1.2 фотограф1я (аватар) користува . 
1. 3 Ім, я користувача. '-Іа та •ндикат ор присутност1.  на саи...т, 1..  
•• 
Місто та кра1на. • 
1. 4 
кнопка <<Написати в 
1. 5 ЩрдеІ-ІІ-Іик>>, яка 
• • 
~с~" я посту .у  щоденник користувача . в1дкриває стор1нку для 
~~f1 6 Кількість записів, друзів та ni· . 
1. . " дnисІ-Іик1в. 
7 Список д1теи користувача їх ім . 
1. ' еІ-Іа та в1к. 
2. Нижній блок. 
1 вкладка <<Записи>>, де відображаються 
2. записи користувача, також 
.,веа J(ІІОПКа пошуку серед записів та кнопка фільтру по категоріям (якщо при 
~~ . б 
crвopen ні з.а пису категор1я ула вказана). · 
2.2 Вкладка «Черновики», де можна· переглянути записи, які не були 
0~Лб 1· ковані та повернутися до їх ре.д агув. ання чи пуб· лікації. 
2.з -Вкладка <<Активність>> показує нещодавні дії. . 
2.4 Вкладка <<Архів>> (рис. В.8), де можна переглядати записи за 
сортув анням року та м_і_с_я_ц_ю_ п_уб_л_ік_а_ці_ї_. _Ї_х _мо__ж__н_а_ ш_в_и_дко редагувати та видаляти. - ----- -- ___ ______ __ -----
Здв Q Search 
І 
~ Ribbon MAIN Categories І 
) Notifications i:2ersonal information Ву publishing an entry in your diary on our ' 
the future it will ье easy to find а\\ entries of 
Social networks 
) Messag~ about the son's funny sayings cou\d Ье "Ре 
Changg_Qassword 
~ МУ. Communities You have 110t added categories yet . 
. 
CHILDREN · 
~ Bookmarks 
&-
Children 
• 
Рисунок В.7 _,. з агал. ь ний в,и д сторінки користув~ча 
3. Блок карточки запису. 
3. 1 Кнопка вподобання. . ата публікації запису• 
з.2 його 1· м'я , м1сто та д Аватар користувача, 
88 
• 
482.U Т1'"Г,.,. 
-'-1-\1у.231815-002 34 01 ' 
назва запису. 6 
3.3 
• 
J{оротка верс1я запису для по 
3.4 . переднього ознайомлення. 
J{ноnка в1дкриття секції с к 
3.5 0ментарами. 
3,6 кнопка додання запису до 
- -- списку обраного . 
Q Search 
-RibbOl1. Useful articles 
-Notifications 
Conception Pregnancy Children 
~ ~essag~ Women's interests shopping 
My_ Communities 
• 
-вookmarks \ .і 
--- -sections of the site 
'"'\ 
-communities 
() 
Рисунок В.8 - Корисні статті 
• • • 
• V • 
По наведенн1 на одну 13 кнопок у верхн1и частин~ сайту (рис. В.9) 
відкривається додаткове меню із вибором місця та типу написання посту/статті. 
і babyblog.ru/new-post 
( -/ , 
.. ї • 
/ 
; h. 
::";: 
, ,. " 
,.., ;і,  Post titte 
,. ',; :: 
; \ -~ 
' 
.... ,. . 
t 
+ в І С-:> 
'.  
r ' 
• 
''  
V 
Додаткове меню саиту 
Рисунок В.9 - • 
. нка для написання статr1. 
lia рисунку З .22 показано як виглядає стор~ 
. 
Основні елементи інтерфейсу: 
1. Поле для вводу заголовку 89 
, І 
482 UТТ'Г'\,. 
. ~1у.231815 
z, f1анель інструментів · -ОО2 34 О 1 
7 
z. J{нопка для виділення 
1 тексту )Ки 
Рним щ 
_2 J{нопка для написання тексту рифтом 
2 ' курсиво 
J{нопка доданн_я посил м 
2. 3 ання чи й 
ого подал 
2.4 J{нопка додання фотоматеріалів ьmого редагування 
2.5 J{нопка додання прикріпленого . 
до ста · 
2:6 Кнопка додання функції <<Cut>> тт~ голосування 
· до nевног · · 
з. Поле для вводу тексту O м~сця у статті 
4. Кнопки навігації (< <Відмінити>> Д 
. . . , << алі>>) 
Серед 1нших розд1л1в, які досту . 
пн1 через випадаюче м 
s~дiJJlfl'II стоJ)інку нал~штувань (рис. В. І О). еню (рис. В.9) можна 
---~· - - - --- ·-
-
ш Q Search 
: Enter а request • 
ё( І'4V\lllvCI\IVI І.;І 
) Messag~ 
MAIN . 
Notifications 
~ .МУ. Communities 
.с, P-ersonal information 
~ Bookmarks Social networks NEWSLETTER 
Chang§..P-assword Т!1е 1n ost interesting thing that happeneli on 
-' 
::. Sections of the site v partners 
CHILDREN В Site news 
Рисунок В.1 О -· Список налаштувань 
На ній присутній перелік розділів з категоріями наступних налаштувань: 
. ~ 
1. <<Приватна інформація>>, де можна вибрати ім'я, день свого 
• 
народження, країну, місто та вказати електронну пошту• 
2. <<Соціальні мережі>>, дає змогу під'єднати низку соціальних мереж. 
з. <<Змінити пароль>>. 
4. «Діти», дає змоrу додати інформацію щодо дітей (вік, стать та фото) . 
•• 
5 · вказати дату з яко1 ви плануєте 
· <<Планування>> МОЖЛИВІСТЬ , 
lasarjl'tJ. ' 
111ти. 
90 
,. 
482.ЧДТУ.231815-002 34 01 8 
6. <<Вагітність>> 
7. <<Категорії записів>> 
8. <<Приватність>>, дає змогу вказати хто може бачити нові записи та 
• 
власну активн1сть. , 
9. <<Видалення>>, слугує для видалення своєї власної сторінки з сайту. 
10.· <<Повідомлення>>, дозволяє вмикати або вимикати сповіщення різних 
• 
ТИПІВ 
11. <<Чорний список>>, розділ, в якому можна додавати • 
ІНШИХ 
• 
користувач1в до чорного списку, тим самим блокуючи їх. 
' 
9\ 
--. 
додлток г 
ЗАТВЕРД)І 
І І pO(\JeCO J"' 
-------:t------.::==---7,f--=----~.---- - Гo:·i\~· n С . І~ . 
Розробка інформаційного WЕВ-додатку підтримк11 майбутні х батьків '<·.:3 
·: J -
J _:-
Презе1-1т1ція 
482.ЧДТУ.231815-002 90 01 
Листів б 
.. ,  
Розробник д~ркач К.В. 
Керівн1-1к Іlівень О.Г, 
• 
2023 ptK 
,· ,,, ...,~ 
-"""" J-1., ,. ,._..,, .. 
f / ,. 
• 
••  
482 .L.[  дТУ.23 18 І 5-002 90 О І 
-~.; ~. r 
'" .... 7 
-'~ "';:'~ 
'-·:". •. :, ..., . 
, \:"';:.~ 
·' ."·::f;'~{;--:, .  
, - ""~ t 
т.;: · :---· .... 
~ 
___,. ,.,.  
з~"~' 
і,,..4,.,.  
-·'·.­ 
Рисунок 1 Сла~и д «Вступ» 
, 
Р11сунок 2 - Слайд <<Мета>> 
і: - .&9 .$ 2 
..., к; •_ . .. 
І 
• І 
4 82. ЧДТу -23 18 І S-002 
.'(-;'f ." 90 01 
. '/◄ ' ' 
•·•  '' t  І 
' .... 
' 
1· . 
о 
. , 
,.,_ . І 
.'.  . ,..., . \ •· • 
, • і ' І 11 
І'"< і н;. ' 
• -:..·  11' ,,. 
~ . 
.. .1$,. 1 
''1'. .. . ~' 
~ 
"' 
(ti-
- І 
' 
•..  ,.  
' 
• 
' 
І 
Рисуно1< З Слайд <<Діаграма прецедентів» 
) 
:' ~~-е,-:""Ііt ~~-
: !t""""' 
., ' ' - ·· 
' 
. ама діяльност1» 
- слайд <<дiarp 
9-1 
01 
4 
,.,._ _ , - ~ '-О"'\· .... '..' і: ,, 
..:__. . ·- ,;;· ~ 
~,<' 
'} ~ 
f..  ..,, ' \ ' ', 
' 
• J 
• ·r-
t." ~.--. • 
-І' :t 
"11.t,;.~ с,,..-..· ~ 
; , -,~~ .,,- •- •a~i·,..._~ 
_r_~- . ,·· .... ·• 
.;-~~-~ - .• ".7: t 1 ~ 
-~ а,,., >,'-'·'<"' f • І 
.,;.. · ·- 1, ' 
:' .>·±1,.:  ї: ~!J:.::J,~. ~ .-~~--.1.•. .... .'. . ," .:.!.  [~'  --,--:t}',"  
1.~ ::..-:_-- ".1. ' ... . ~"~--">,,._ --~~-~,_.. ~~•J' f: ,.,.,. ~. .. 
~ - . ' -
' ·~--~-- _:~  ':?J :t :-.:' : 
;._~flч·\"-""~t:::."""-
'. ·§i\i~j_ ~¼:f:E:- • 
..:...-~ - . ' ...::_:::.-; 
- . '\~ 
~ : ~- .... « 
" •=•"' ,~..,~оо~ : 
-~--=-:-б: • 
;- ::-:---~:- --
Editing ,:І,н.а \ ---n 
·------------"""'·:---~------------ lJ 
.;  І Senr.!w)g r~<1\J~st : 
Рисунок 5 - Слайд <<Діаграма послідовності» 
1 
1:E,iter t-oнin and password ~-----·--·-
Site ., 
4:Receivi11g а req11est І l З:Se:11din9 req11est 
... 
• КОІVІУJ-1 і 1(3Lll І» 
:РJ,,1суно1< 6 - Слайд <<д1аграма 
$ -
..S 4 
•, 
, 
/ ~ 
., ,( 
, • ,J ,  І: 
, , ' ,. ' 
., ½ У.'~ 
, , -? 
, • , \ 
, , 
1 # \ 
~ 
, t, Q .. 
~--.- f,,.,, ,,А  
~,  /1 ~,  
Пров~:1с11п неі ега r ~ •• те'-· Г\ н:11111я 
В11яв.1е1ю 2 11ом~1лю1 . U1111равл..:11u . 
Проведено 
,., .... всі ета nr,, теСf'tr в ання. 
,,. 
І' 
Помилок не виявлено. 
Проведено всі етапи тестування . 
Виявлено 1 помилку. Виправлено. 
Проведено повторне тесту R;1ння . 
Виявлено О пом~1лок. 
,., 
Проведено всі етапи тестування. 
·-~...,.{·~ ~А"'° ;,і_ ,. ,.~ 
.;,...,.-;....~.j -- ..~.  ... ,..\'-;, •·І  
Помилок не виявлено. • •. , ...... __) 1" ... r • .,.....,,{ ! 
(V. V' ~ ._..,_ ~ І 
.. ,, ,1 ' ... 
,t ~»~~. ..... .. "' 
..,..,)~ 
-,.... -.. ... . 
 
. ' 
--,,., :": ,. і 
... .. ~~ 
і --
4\ 
Рисунок 7 - Слайд «Тестування» 
f 
Answers to any questions about pregnancyf 
children and family life 
,, 
; ' , 
6 7 
, _. .. . ,. .• 
, 
І 
482.ЧДТУ.2318 J S-00 О І 
• 2 90 
6 
,і' s • 
•• 
• ·' і 
1 
Рисунок 9 Слайд <<Висновкvt>> 
' ' '"""'' ''"'" ,,,;,,: ,,-,, «',,, '':Т , ,і; ,'}·',''!,- :,",1,,•,  ,,  ",,,,, с,,,~,,,' ,,і,,,,і ,; н/ 1•,,,,,і, ,, 't,, ,,С ,<.',• ,і,, ,,, ''\:;>,:,'< ,,;' , ,« :' ,С",  ,:\.  ,,А,,\ " ;:,;\,,,,:, ,',",!с<.-,~,і<,, ,,<,,,,,:,"~ ,,,, ,,, " ' '"' ' ,к''' %іа/,,:,>• : ' '- ' : , u:,, ' -' ,,,, ', '-> ' , ),,, , ,, <Кс% , •', '- ''t: :: ' ,- , , , 
11 , ,, ,,, , ~, , , ,, , ,,,  '<, , ,, ,,  ,,,, , ,,,, ,, ,-, -:.",,, ,,,,, ,,,, ;, ,, ,,  /,  ', ,,,:,, ,і, ,,,,;;,:,у, , ·,,,,о, ,:",',"  ,, t ",,, 
'l!l~о~ •>ч~,.,.~",,·,  ,! •• ]-!It-~~;~(;'t;,,qli~i\;! ,lJt'~''f:i ~"•1Оо~,i<.~•~"w•~" 't"' !'О~, iО.  1Ге' t ;Ч"i' ,°,:" i,·."/,  .;Ji, l,  !J>!  :·  : ' 1,Т , , ; •а ·!: '[· .;?, f1 ·5 і ,.; ,.~ ';,;; ,;I ::'О,i;E; • ,§ l•·  , _ , 
1 1
,  .', ~,4•'  " ,., • ' " , >• ¼~"" ¾ ,: •• ;, •, >·•· "• • , ,. , >. " •· ·», ,< ,', ,' ,;.,,,  ,;.;:.~ '' ' . _,,, ~~, . . :,;,;: J; 
,,. , , · • С. 
·'i~'-"~• !~Jz'  .. , t"' t.i.•:Y, ,.,,,.i,,),~,,,i,,i tJ"H' . ,f ,,r1i'  ,.[," '."i !,i,~,,; .;; ~,' ь,., '~ ' ,~,,, -~-,.,~, " ," ;~ ·~ " ' ~',. ~,,,.,i,i,.: 'ih' ' '  ;·(-:j;,C"'"', '9 ,'!'i'L:f\;. t',,;,; ::;;;t ;:•" ;і !: ~ 
' ..., ,. . ,,, ,, ' ' .., ,, '"'·' ' '' ·'" 
.·, .І. , ., '·t". "" ' , .. ,,, .. ' " ' ' "Ч ., І ,,. ' ••,  ' .... ~" ' ' ' ' ' .t',g ,. ' ,. ' , . ' ' ' ·" ' .. •,  ' '., ' ... 
... ,,~ ..,...r "a"": .,.._...~..,~ ,,,f,, f'." "1" '1 ;,..  ~.. ~... ,."x " "~ "·· 'l" "M" 1-~',!·i -'~"t i.. )~,. "~ ;..1...r.., ,i  ~' ;'' ~_,' ;.t..U ' 1'  .1' ;"J  
', ,,, ""·" ..  ". .# . =,, .. .• ·- " '. • ·-· ',,,,.,,,. ... . '' ...... ,, ' • ,,, • , . •• ,•, . .. ' . ' ' .•• ,.,."" •• " 
¼;' &;;/1'11%'ff~.f .. '!ІІІ 1111111 ,, ..... '13 'ІІІ ··• •., ., .~ ' •~· ~ . ~ ,, , ,,,,, ' .•, ,,• . , .., ,.~ ,,.  
• ,. .І:11  ,W ffi,. .. 1•11" " . :• ,«, 1 'fJ •. ·;.~ ,:~
'8 11 · • -~iltt"JІ~iJf:-t~l1ii~!-iі~-!,~.i,~~~•1  
' . . . " ' " •·• ,,, -· .•.,  ' ' .,, .,,, , ' ' " • ' ' ' ' ' " ' ' "' " . ' . ' ,. "" . .. , ' ' ' . ' 
fW~ri; ~d:Ші■" м
IQ, . 0
1./~'т'- . iJ ІІ І .% •~.•. 'ІІІ •• ,,_. .~.,  ~..,.- 1.;...:.,  J•!у•1·~'"z .f.!. ":"i' ";"Д ' ~~.~. !!' i' ";' :t' ~•e.. ,,  • ·•· ' , ' • • ' . ' ' 
F • ' <,!~ ';,1/4;,ii e:: t•,:;;;:;;; 
/1.•_,1: /..•.I,W;.•..f f~&._  :1.%.g;,1;, - .--1/.,~ 1/, ._%~,W•_¼ ':••, і- .!•.¾..• ,.~ -•• 1••••,, -_-,.. ~ v•,..,l , ",~, "~ ',~•. •. ·~,·  ,'  ., ,~.,,_ .t., . І., ~ , .., ,,, ~,,, -., . ,, '·-~,. ... . ' ... , .,. ., ... .. ,,,, - ·-.. • ., ' ' • 
...... ,~., . .." ~·\ "·~\ , ~,,, •# .K.'.. !;\.j ;:~it"!;,¾i\,EІ " ,. "• 
••І ■, r~;@, %..%,)*·~,Л•'.-iлl,Y1~1_g•ж&•A,"WW~■~ "••'i$®-Wf;~·~JlfЛ,Wi~"~f~fif''1fiilk!fЧ"'f ,,,8, ""~&;я#1~:>,,• 'W":";i'i'(і)\%t(·},,j ,f,/-,,~. 'J- АI r~,.:ii~ut~,"''"''' .. 
~ ~Ai■"i' ,ffй!.lff, м,!, .~\,у1.,;  ;,,,д.,;,;,,  :;, »,~<,(c ,'\ ' . , , ЦЬ>> r 
·-"*~·•~~!$-Jif',ft.2,  ,&.:,.,ir JY•11 ела и"' д << к 1н  е 
Рисунок 10-
•