4

ЗМІСТ
Contents
ЗМІСТ.......................................................................................................................4
ВСТУП......................................................................................................................5
1 ЗАГАЛЬНИЙ РОЗДІЛ.........................................................................................6
1.1 Бэкенд..............................................................................................................6
1.2 Клієнт-серверна архітектура.........................................................................9
2 РОЗРОБКА ТЕХНІЧНОГО ПРОЕКТУ.........................................................14
2.1 JavaScript..........................................................................................................14
2.2 TypeScript.........................................................................................................17
2.3 Node.js...............................................................................................................22
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ.............................................................23

ОКС 123
Змн. Арк. № докум. Підпис Дата
Розроб. . Літ. Арк. Акрушів
Перевір.
Н.Контроль
Н.Контроль
Реценз. ОККТ, гр.
Н.Контроль
Затвердив Козуб С.А.
 5

ВСТУП

В даний час просування бізнесу в інтернеті є невід'ємною частиною

ведення бізнесу. У майбутньому це буде сильніше розвиватися, але вже зараз
складно знайти успішний бізнес без сайту, програми або соціальних мереж.
Наш продукт підходить до бізнесу готового корисного харчування.
Підприємцям вигідно мати сайт свого продукту. Це і можливість
реклами, і можливість прийняття замовлень чи заявок, і база даних із номерами
для розсилок. Також сайт дасть хороший старт для бізнесу завдяки
можливостям маркетингу. Також бізнес може мати сайт, але не мати території
для прийому відвідувачів і бути успішним. Наприклад, для доставки корисного
харчування потрібна тільки кухня.
Сайт не є ніяким ризиком. Він не піде в мінус і не зазнає збитків. Він
створений щоб наводити нових клієнтів і ніяк не може негативно вплинути на
бізнес на початку.
Налагодження сайту допомагає структурувати інформацію. Вся
інформація зберігається у базі даних та структурована. Її легко можна знайти,
видалити, додати, редагувати.
Також сайт можна використовувати як візитну картку. Його легко
просуватиме через «сарафанне радіо». Також можна підключити рекламу із
соціальних мереж із посиланням на сайт.
Наш проект із сильною візуальною складовою. Він може змінювати
зовнішній вигляд буквально протягом дня завдяки стилю написання коду.
Також є зручна адміністративна панель та можливість швидко змінювати
актуальну інформацію. Власнику бізнесу не обов'язково щоразу звертатися до
програміста, щоб додати новий продукт на свій сайт. Він може зробити це сам у
адмін-панелі.
На сайті є можливість викласти багато фотографій. Також є сторінка із
статтями, щоб клієнти могли дізнатися щось нове для себе або більше дізнатися
про щось, що вже знали. Так само статтями можна ділитися в соціальних
 6

мережах, що теж можна використовувати як рекламу.

Після заповнення форми для замовлення контакти клієнта залишаються
у базі даних. Цю інформацію можна використовувати надалі для розсилок.
 7

1 ЗАГАЛЬНИЙ РОЗДІЛ

1.1 Бэкенд

Веб-розробка розділена на дві великі частини – фронтенд і бекенд. Це

дві половинки цілого, які створюють можливість існування сучасного
інтернету. Таке подвійне представлення сучасного сайту є наслідком класичної
архітектури клієнт-сервер. Фронтенд – це створення дизайну, відображення
зовнішнього вигляду сайту (всередині вікна браузера).
Backend – це внутрішня частина сайту і сервера (Back – back). Якщо
говорити в цілому, то це програмно-апаратний комплекс, що дозволяє сайту і
серверу коректно працювати, логіка його роботи, взаємодія веб-сервера і
контенту [1] (рисунок 1.1).

Рисунок 1.1 – Backend

Ця частина вважається більш складною в порівнянні з фронтенд, тут

розробник вибирає ту мову програмування, яка підтримується сервером.
Схема роботи Backend і загальна логіка сайту в цілому зводяться до
трьох пунктів:
 прийом і обробка даних від користувача (наприклад, введення
пошукового запиту);
 обробка даних на сервері (пошук даних в базі даних, будь-яких інших
 8

вибірках);
 отримання відповіді від сервера і переклад інформації в читабельну
форму (висновок результату).
Таким чином, взаємодія з бекендом виглядає просто, але може бути
важкою в реалізації. Частково складність полягає в тому, що різні веб-сервери
використовують різні мови програмування для обробки даних. Також можуть
використовуватися різні бази даних, різні комунікаційні інтерфейси та
архітектури. Все це потрібно зібрати воєдино і перевіряти на кожному кроці,
інакше замість тексту можна отримати «кашу» символів.
Основні мови програмування використовуються для розробки логіки
сайту і бекенда. У список входять Java, PHP, Python, Ruby тощо. Розглянемо
більш глибше:
1. Java – це класична сильно типізована об'єктно-орієнтована мова
програмування загального призначення, розроблена Sun Microsystems. Зараз він
належить oracle. Саме на Java працює Android. Мова з'явився в 1995 році і в
даний час активно розвивається. Відзначається, що мова в деяких випадках
поступається программам на C/C++ по времени выполнения, однако иногда
наблюдается и обратная ситуация. Язык применяется как для веб-приложений,
так и для десктопных/мобильных.
2. PHP – ще одна класична бекенд-мова. Він також був створений в 1995
році. На відміну від Java, вона використовується лише для веб-додатків, але
вона є однією з найпопулярніших мов веб-розробки (хоча станом на 2022 рік
вона вважається трохи застарілою). Він керує Facebook, Вікіпедією, Yahoo!,
Baidu та багатьма іншими сайтами. Він також створює найпопулярніший веб-
движок WordPress.
3. Python – одна з мов, яка підходить як для веб-додатків, так і для
локальних. Ця мова повністю замінює старі, він кросплатформний і забезпечує
хорошу продуктивність програм. Звичайно, до PHP ще далеко, але процес йде
повним ходом. Він був створений в 1991 році.
4. Ruby – ще одна мова, який націлений на простоту і легкість розробки.
Він був створений в 1995 році і розвивається повільно, але його можливості
 9

вражають.
1. Perl – ця мова вже пішов у минуле, але до сих пір багато хто ним
користуються. Це скриптова мова на стороні сервера з досить заплутаним
Синтаксис.
Ви також можете вибрати з різних систем керування базами даних.
Найчастіше використовується MySQL, але на ринку також є PostgreSQL,
SQLite, MongoDB та інші. Звичайно, кожна мова і кожна система баз даних
працює трохи по-різному. Так що є досить багато інструментів на вибір. Але
при цьому їх перелік досить жорсткий, що дозволяє не розосереджувати сили.
Розробнику бекенду потрібно знати і вміти:
 знання мов програмування – php, python, ruby, java, go тощо;
 навички роботи з базами даних і системами управління базами даних.
бажано mysql, але підійдуть і інші;
 використання шаблонів програмування, фреймворків і так далі. серед
них відзначимо ruby on rails, yii, django;
 знання алгоритмів серверної частини і вміння їх застосовувати.
Виходячи з вищенаписаного, бекенд розробнику необхідно виконати
наступні завдання:
 підтримка веб-ресурсу, бізнес-логіки проекту і бекенд-системи в
цілому;
 проектування та підтримка інфраструктури на базі sourcejs;
 створити програмний інтерфейс веб-ресурсу для його взаємодії з
іншими платформами;
 створити єдину бібліотеку елементів для інтерфейсних програмістів і
дизайнерів;
 адаптувати систему до різних платформ, використовуючи css3 і html5;
 розробка користувальницьких інтерфейсів;
 оптимізувати існуючі веб-додатки для підвищення продуктивності.
Таким чином, бекенд-розробнику доводиться обслуговувати весь набір
веб-систем, крім функціонування самого веб-сервера і каналів зв'язку (це вже
 10

завдання системного адміністратора).

З інших особливостей бажано знати методи тестування коду, знати
прийоми Agile-підходу і Scrum для ефективної командної роботи, а також вміти
розробляти документацію.

1.2 Клієнт-серверна архітектура

Клієнт – це локальний комп'ютер на стороні віртуального користувача,

який відправляє запит на сервер для можливості надання даних або виконання
певної групи системних дій.
Сервер – це дуже потужний комп'ютер або спеціальне системне
обладнання, яке призначене для вирішення певного кола завдань в процесі
виконання програмних кодів. Вона виконує сервісну роботу за клієнтськими
запитами, надає користувачам доступ до певних системних ресурсів, зберігає
дані або базу даних.
Особливості цієї моделі полягають в тому, що користувач відправляє
певний запит на сервер, де він систематично обробляється і кінцевий результат
відправляється клієнту. Можливості сервера включають в себе одночасне
обслуговування відразу декількох клієнтів (рисунок 1.2).

Рисунок 1.2 – Клієнт-серверна архітектура

Якщо одночасно надходить більше одного запиту, такі запити задаються
 11

в певну чергу і виконуються сервером по черзі. Іноді запити можуть мати свої
пріоритети. Частина запитів з більш високими пріоритетами буде постійно
виконуватися в першому порядку.
Параметри, які можуть бути реалізовані на стороні сервера:
 зберігання, захист і доступ до даних;
 робота з вхідними клієнтськими запитами;
 процес відправки відповіді клієнту;
Параметри, які можуть бути реалізовані на стороні клієнта:
 платформа для надання призначеного для користувача графічного
інтерфейсу;
 формулювання запиту на сервер і його подальша відправка;
 отримати результати запиту і відправити додаткову групу команд
(запити на додавання, оновлення інформації, видалення групи даних).
Архітектура клієнт-серверної системи формулює принципи віртуальної
комунікації між локальними комп'ютерами, а всі правила і принципи взаємодії
знаходяться всередині протоколу.
Мережевий протокол - це певний набір правил, який виконує точний
зв'язок між комп'ютерами всередині віртуальної мережі.
Типи мережевих протоколів [2]:
1. TCP/IP – це набір протоколів передачі інформації. Спеціальне
позначення всієї мережі, яке функціонує на основі протоколів TCP, а також IP.
2. TCP – це вид протоколу, який є сполучною ланкою для встановлення
якісного з'єднання між 2 пристроями, передачі даних і перевірки їх отримання.
3. IP – протокол, в функції якого входить правильна доставка
повідомлень за обраною адресою. При цьому інформація розбивається на
пакети, які можуть поставлятися різними способами.
4. MAC – це вид протоколу, на основі якого відбувається процес
перевірки мережевих пристроїв. Всі пристрої, які підключені до інтернету,
містять свій оригінальний MAC-адресу.
5. ICMP – це протокол, який відповідає за обмін даними, але не
 12

використовується для процесу передачі інформації.

6. UDP – це протокол, який контролює передачу даних, але дані не
перевіряються при отриманні. Цей протокол швидше, ніж протокол TCP.
7. HTTP – це протокол передачі інформації (гіпертекст), на основі якого
працюють всі сьогоднішні сайти. До його можливостей можна віднести процес
запиту необхідних даних з практично віддаленої системи (файли, веб-сторінки і
т.д.).
8. FTP – це протокол передачі інформації зі спеціального файлового
сервера на ПК кінцевого користувача.
9. POP3 – це класичний простий протокол з'єднання пошти, який
відповідає за передачу пошти.
10. SMTP – це тип протоколу, який може встановлювати правила
передачі віртуальної пошти. Він відповідає за передачу і перевірку доставки, а
також повідомлення про можливі помилки.
Концепції побудови клієнт-серверної системи:
1. Слабкий клієнт – це продуктивний сервер. При такій моделі весь
процес обробки інформації переноситься на серверні потужності, а права
доступу користувача дуже строго обмежені. Сервер починає надсилати
відповідь, яка взагалі не потребує додаткової роботи з обробки. Клієнт
взаємодіє з користувачем: створює і відправляє запит, приймає вхідні підсумки,
відображає дані на екрані користувача.
2. Сильний клієнт. Концепція, в якій частина обробки даних надається
замовнику. У такій ситуації сервер являє собою просте сховище інформації, а
вся діяльність по обробці і наданню даних переноситься на ПК користувача.
Продукт або система, яка вказує на те, що частина інформації про
обробку надається користувачеві. У такій ситуації сервер виступає в якості
спеціального сховища інформації, а вся діяльність по обробці і забезпеченню
даних може бути перенесена на ПК користувача.
Існує відразу 2 типи клієнт-серверних архітектур:
1. Дворівневі, що складаються відразу з 2 вузлів:
 сервер, який відповідає за прийом вхідних запитів і відправку
 13

відповіді користувачеві, при цьому використовуючи власні ресурси системи;

 клієнт, який може надати графічний інтерфейс користувача.
Особливості роботи полягають в тому, що певний запит надходить на
сервер, потім обробляється і дається безпосередньо, без додаткового
використання групи зовнішніх ресурсів.
2.Трирівнева система складається з використання наступних
компонентів:
 надання інформації – графічний користувач, об'єкт додатку у вигляді
сервера додатків;
 управління ресурсами – сервер баз даних, який може надавати дані.
Особливість роботи в тому, що обробляти клієнтські запити можуть
відразу кілька серверів. Процес розподілу операцій дозволяє значно знизити
навантаження на використовуваний сервер.
Трирівнева архітектура може трансформуватися в багаторівневу, з
можливістю установки групи додаткових серверів. Така віртуальна архітектура
дозволяє значно підвищити ефективність функціонування інформаційних
систем, а також виконати оптимізований розподіл частини своїх програмних і
апаратних ресурсів.

2 РОЗРОБКА ТЕХНІЧНОГО ПРОЕКТУ

 14

2.1 JavaScript

JavaScript – це кросплатформна, об'єктно-орієнтована мова сценаріїв, яка

використовується для створення інтерактивних веб-сторінок (наприклад,
використання складних анімацій, створення клікабельних кнопок, спливаючих
меню тощо). Програми на цій мові називаються скриптами. Вони можуть бути
записані безпосередньо в HTML веб-сторінки і запускатися автоматично при її
завантаженні.
JavaScript є найбільш зручним інструментом для створення інтерфейсів в
браузері. Ось чому:
 повністю інтегрований з html/css;
 підтримується всіма основними браузерами і включений за
замовчуванням;
 дозволяє робити додатки не тільки в браузерах, але і на сервері, на
мобільних пристроях тощо.
Основним плюсом вважається повна інтеграція з HTML, що дозволяє
трансформувати сторінку без обмежень. За допомогою JavaScript спеціаліст
може:
 швидко інтегрувати у код сторінки будь-які теги;
 визначати зовнішній вигляд елементів;
 виконувати позиціонування об'єктів;
 отримувати дані користувача;
 взаємодіяти із сервером (AJAX).
І це перераховані лише основні та найвикористаніші можливості
технології. Застосування JavaScript дозволяє робити в межах сторінки
практично все, що потрібно.
JavaScript в браузері може робити все, що пов'язано з маніпулюванням
веб-сторінкою, взаємодією з користувачем і веб-сервером. Наприклад:
 15

1. Можемо додати новий html-код на сторінку, змініємо наявний вміст,

змініємо стилі.
2. Реагуем на дії користувача, клацання мишею, рухи покажчика,
натискання клавіш.
3. Надсилаемо мережеві запити на віддалені сервери, завантажуемо і
завантажуемо файли.
4. Отримуемо і встановлюемо файли cookie, задаваемо питання
відвідувачеві та показуемо повідомлення. Зберігаемо дані про клієнта
(«локальне сховище»).
JavaScript і Java різні мови, створені різними командами для різних
завдань. Схожість в назвах пов'язано лише з маркетинговим ходом в середині
1990-х років.
Java – це скомпільована мова для створення програмного забезпечення.
JavaScript – це мова сценаріїв для створення динамічних веб-сторінок,
тобто веб-сторінок, які відображають різний вміст на кожному виді.
Ядро мови JavaScript складається з ряду загальних можливостей, які
дозволяють зробити наступне:
1. Зберігти дані всередині змінних. Наприклад, ми попросили ввести
нове ім'я, після чого зберегли ім'я в змінній name.
2. Операції над фрагментами текстів (відомі в програмуванні як
«струни»). Взяти рядок "Player 1: " і додати її до значення іменної змінної, щоб
отримати повний текст, наприклад: ''Player 1: Chris''.
3. Запускати код відповідно до певних подій, що відбуваються на веб-
сторінці.
Ще більш захоплюючим є функціонал, створений поверх основної мови
JavaScript. Так звані інтерфейси прикладного програмування (API) надають вам
додаткові надздібності для використання у коді JavaScript.
JavaScript обмежена, тим що може функціонувати тільки в рамках
браузера. Але навіть тут є обмеження щодо вимог безпеки. Наприклад,
можливості JavaScript дозволяють закрити тільки ту вкладку, яка була створена
ним. Загально, ця мова програмування створена для браузерів та інтернету, а за
 16

їх межами вона і не повинна була використовуватися.

Кожна вкладка браузера є окремим полем для запуску коду (в
технічному сенсі ці поля називаються «середовища виконання») – це означає,
що в більшості випадків код на кожній вкладці запускається абсолютно окремо,
а код однієї вкладки не може безпосередньо впливати на код іншої вкладки або
на іншому веб-сайті. Це хороший захід безпеки – якби було інакше, пірати
могли б написати код, який крав інформацію з інших сайтів або робив інші
погані речі.
Послідовність виконання JavaScript: зазвичай, коли браузер стикається з
блоком JavaScript, він запускає його по порядку, зверху вниз. Це означає, що
вибирати замовлення потрібно ретельно. Наприклад:

const para = document.querySelector('p');

para.addEventListener('click', updateName);
function updateName() {
let name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
}

Тут вибираємо абзац тексту (рядок 1), а потім додаємо до нього

виявлення події (рядок 3), щоб при натисканні на цей абзац був виконаний блок
коду updateName() (рядки 5-8). Кодовий блок updateName() (ці типи блоків коду
багаторазового використання називаються «функціями») запитує у користувача
нове ім'я, а потім вставляє це ім'я в абзац для оновлення дисплея.
Якщо змінити порядок перших двох рядків коду, він перестане
працювати замість цього отримаєте помилку, повернуту на консоль браузера –
TypeError: para невизначений. Це означає, що параоб'єкт ще не існує і не можно
додати до нього виявлення подій.
У контексті програмування можно почути тлумачення та компіляцію
термінів. JavaScript є інтерпретованою мовою – код запускається зверху вниз і
результат запуску відразу повертається. Вам не потрібно конвертувати код в
іншу форму, перш ніж запускати його в браузері.
 17

2.2 TypeScript

TypeScript – це мова програмування, яка виправляє багато недоліків

JavaScript. Код TypeScript виглядає майже так само, як і JS-код, і якщо у вас є
досвід фронтенд розробки, вивчити TypeScript досить легко. Особливо
враховуючи, що писати JS код можна безпосередньо в скриптах TS.
Код TypeScript компілюється в JS і підходить для розробки будь-яких
проектів для будь-яких браузерів – тим більше що можна вибрати версію JS, в
яку буде компілюватися код.
TypeScript – це проект з відкритим вихідним кодом, тому він
розвивається дуже швидко. Багато що з'являється в TS пізніше, переходить в
JavaScript: наприклад, let і const, функції зі стрілками і інше.
Основні переваги TS перед JS [3]:
1. Сильна типізація. Багато проблем в JavaScript виникають через
динамічну типізацію і взагалі дивну поведінку типів даних.
2. У TypeScript введення тексту є статичним, що усуває багато проблем.
Розрізняють числовий тип, рядковий, булевий і інші. Також є можливість
описати власні типи даних, наприклад, за допомогою enum.
3. Покращений ООП. І JS, і TS мають підтримку об'єктно-орієнтованого
програмування: класи, об'єкти, успадкування. Однак TypeScript пішов трохи
далі і використовує більше можливостей OPP.
Ще один великий плюс – модифікатори доступу [4]. У TypeScript їх три:
1. Публічний (public) – якщо до властивостей та функцій класів не
застосовується модифікатор, то такі властивості та функції розцінюються як
public. Тобто таке визначення класу:

class Person {
name: string;
year: number;
}
 18

Буде еквівалентно:

class Person {
public name: string;
public year: number;
}

2. Приватний (private) – якщо до властивостей і методів застосовується

модифікатор private, то до них не можна буде звернутися ззовні при створенні
об'єкта даного класу. Наприклад, створимо клас із приватними властивостями
та методами:

class Person {
private _name: string;
private _year: number;
constructor(name: string, age: number) {
this._name = name;
this._year = this.setYear(age);
}
public print(): void {
console.log(`Имя: ${this._name} Год рождения: ${this._year}`);
}
private setYear(age: number): number {
return new Date().getFullYear() - age;
}
let tom = new Person("Tom", 24);
tom.print();
}
}

Дві властивості _name та _year використовуються з модифікатором

private, тому ми не можемо їх використовувати поза класом, наприклад
console.log(tom._name). Те саме стосується функції setYear(). Інші функції
доступні.
 19

3. Захищений(protected) – визначає поля та методи, які з поза класу

видно тільки в класах-спадкоємцях:

class Person {
protected name: string;
private year: number;
constructor(name: string, age: number) {
this.name = name;
this.year = this.
setYear(вік);
}
захищений printPerson(): void {
console.log(`Імя: ${this.name} Рік народження: ${this.year}`);
}
private setYear(age: number): number {
return new Date().getFullYear() - вік;
}
}
class Employee extends Person {
захищена компанія: рядок;
конструктор (назва: рядок, вік: число,
company: string) {
super(name, age);
this.company = company;
}
public printEmployee(): void {
//console.log("Year:" + this.year); // поле року недоступне, тому що private
// setYear(25); // Метод setYear недоступний, оскільки private
this.printPerson();
// метод printPerson доступний, тому що protected
console.log(`Компанія: ${this.company}`);
}
}
let sam = New Employee("Sam", 31, "Microsoft");
sam.printEmployee();
 20

У класі Employee буде доступне поле name, а також метод printPerson(),

тому що вони мають модифікатор protected. А ось приватна властивість year та
приватний метод setYear() будуть недоступні.
Також є й інші можливості:
 визначити поля в проектувальнику;
 перетворення типів;
 абстрактні заняття;
 узагальнення і так далі.
Надалі все це може з'явитися в JavaScript, але браузери дуже скоро
почнуть підтримувати такі можливості. Мінуси TypeScript: розробники люблять
цю мову, і деякі великі проекти вже переходять на нього. Наприклад,
популярний кутовий фреймворк.JS. Але цього все одно недостатньо, щоб він
став таким же популярним, як JavaScript. Це пов'язано з тим, що розробка веб-
додатка в TypeScript коштує дорожче і займає більше часу.
Особливо якщо вам потрібно використовувати якусь бібліотеку або
фреймворк, який не портується на TS. В цьому випадку розробникам
доведеться самостійно описувати підписи (вказувати типи даних) всіх функцій і
методів – досить тривалий процес, враховуючи розміри сучасних бібліотек.
Крім того, поріг входу для TypeScript вищий – щоб скористатися ним, важливо
знати типи даних та об'єктно-орієнтоване програмування.

2.3 Node.js

Node.js – це система, яка виконує JavaScript окремо від вашого браузера.

Можна сказати, що це окреме середовище для запуску JavaScript. Node.js можна
встановити на сервер (так само, як Python) і виконати на ньому свій код,
видаючи результат виконання користувачам. На ньому також можна робити
окремі додатки, використовуючи додаткові фреймворки.
Якщо ви почали вивчати програмування, то зрозумієте поняття
послідовного виконання програми. Спочатку виконується перша лінія, потім
 21

друга, потім третя і так далі. Може десь програма буде стрибати туди-сюди,
десь зациклюватися, але в цілому виконується лінійно.
У JS є хитрість – вона може виконувати код паралельно (умовно
кажучи). Програмісти називають цю подію обробкою. Програмі можна сказати:
"Якщо це коли-небудь станеться, виконайте цю функцію, вона знає, що
робити". Таких подій можна передбачити багато – виходить, що процеси
начебто паралельні. Програма може просто сидіти і чекати, коли щось
станеться.
Причому процеси асинхронні: програма може щось запросити на самому
початку роботи – наприклад, запитати щось з бази даних. І поки база даних
свербить, вузол.js програма буде продовжувати займатися своєю справою. І як
тільки прийде відповідь, він візьме його і обробить.
При розробці будь-якої програми Node.js можуть відбуватися сотні
таких паралельних подій і обробників. Щоб будь-який з них не натягнув ковдру
на себе, Node.js робить нескінченний цикл, в якому забезпечує процесорний час
кожної функції по колу.
В результаті створюється ілюзія, що вони працюють паралельно і не
заважають один одному, але насправді строго контролюються самою
платформою. Саме такий рівномірний розподіл всього в циклі подій дає Node.js
перевагу при створенні серверних додатків.
Давайте розглянемо як працює звичайний веб-сервер (рисунок 2.1) та як
веб-сервер вузла.js (рисунок 2.2). Звичайний веб-сервер:
1. На сторінці потрібно, наприклад, показати аватарку і нікнейм
користувача. Для цього, сервер зробив запит в базу даних, щоб отримати звідти
цю інформацію.
2. Поки база даних не відповість, сервер нічого не може зробити, він
терпляче чекає.
3. Коли з бази приходить відповідь з картинкою і ніком, сервер знову
оживає, продовжує завантажувати сторінку і в самому кінці запитує фонове
зображення для сайту з бази даних. Сервер чекає.
4. Сторінка також поки не працює, тому що не завантажилася до кінця.
 22

Половина скриптів теж не працює, тому що вони чекають повного

завантаження сторінки. Всі чекають відповіді бази.
Для кожного такого запиту потрібні ресурси, щоб зберегти зв'язок з
базою даних. Якщо таких запитів дуже багато, ресурси на сервері швидко
закінчуються, і тоді сайт починає гальмувати відразу всіх. Сервер починає
притуплятися, а іноді вилітає з помилкою. Сторінки вилітають, користувачі
божеволіють і переходять на інший сайт (рис. 2.1).

Рисунок 2.1 – Праця звичайний веб-сервер

Сервер вузла.js:
1. На сторінці потрібно, наприклад, показати аватарку і нікнейм
користувача.
2. Для цього сервер робить запит в базу даних, щоб отримати звідти цю
інформацію, і вона продовжує формувати сторінку далі.
3. Поки не прийшов аватар, сервер вже зробив все інше і побачив, що
потрібна фонова картинка.
4. Сервер запитує картинку, і в цей час він отримав аватарку від
попереднього запиту. Після того, як аватар прибув, сервер вставляє його в
потрібне місце. Поки він це робив, з'явилася фонова картина.
5. Всі матеріали на місці, можна показати сторінку користувачеві.
Сторінка завантажується швидше, тому що збірка відбувалася паралельно.
Крім веб-додатків, ця мова використовується для створення будь-яких
сервісів, де необхідний постійний обмін інформацією з користувачем:
 чати;
 23

 соціальні мережі;
 системи спільної роботи над проектом;
 онлайн-текстові редактори (рис. 2.2).

Рисунок 2.2 – Праця веб-сервер вузла.js

А на ньому можна написати практично будь-який додаток і запустити

його під Windows, MacOs або Linux. Це можна використовувати для розробки
універсальних додатків, наприклад, списку завдань, які повинні працювати на
всіх платформах, синхронізувати дані в режимі реального часу і мати
можливість відправляти все на мобільний пристрій.
Останнім часом велику популярність набирає використання Node.js для
«інтернету речей» – розумних чайників, ваг та іншої побутової техніки. Тут
Node.js допомагає управляти цими пристроями і робити сервери, який може
обробляти багато запитів одночасно.

2.4 RestApi

REST (REpresentational State Transfer) – це був термін, спочатку

придуманий Роєм Філдінгом, який також був одним з творців протоколу HTTP.
Чудова річ у сервісах REST полягає в тому, що вони найкраще
використовують протокол HTTP.
Коли ми переглядаємо веб-сторінки, багато речей відбувається за
 24

лаштунками. Спрощене уявлення про те, що відбувається між браузером і

серверами, що працюють на веб-сайтах, які ви відвідуєте (рисунок 2.3).

Рисунок 2.3 – Що відбувається між браузером і серверами

Давайте розглянемо принцип роботи HTTP [5]:

Коли ви вводите URL-адресу у браузері, наприклад www.google.com, на
сервер надсилається запит на веб-сайт, визначений за URL-адресою.
Потім цей сервер генерує та видає відповідь. Формат цих запитів і
відповідей важливий. Ці формати визначаються протоколом HTTP (протоколом
передачі гіпертексту).
Коли ви вводите URL-адресу у своєму браузері, він надсилає запит GET
на вказаний сервер. Потім сервер відповідає відповіддю HTTP, яка містить дані
у форматі HTML, мові розмітки гіпертексту. Потім браузер отримує цей HTML-
код і відображає його на екрані.
Коли заповнюєте форму, представлену на веб-сторінці зі списком
елементів. У цьому випадку, коли натискаєте кнопку Надіслати, на сервер
надсилається запит HTTP POST.
HTTP надає базовий рівень для створення веб-служб. Тому важливо
розуміти HTTP. Ось кілька ключових абстракцій:
1. Ресурс – це ключова абстракція, на якій зосереджений протокол
HTTP. Ресурс – це все, що ви хочете показати зовнішньому світу через свій
додаток. Наприклад, якщо ми пишемо додаток для управління завданнями,
екземпляри ресурсів будуть наступними:
 конкретний користувач;
 25

 конкретне завдання;
 список завдань.
2. Ресурс URI. При розробці сервісів RESTful слід акцентувати свою
увагу на ресурсах програми. Спосіб, яким ми ідентифікуємо ресурс, який
потрібно розкрити, полягає в тому, щоб присвоїти йому URI, уніфікований
ідентифікатор ресурсу. Наприклад:
 створити користувача: POST /users;
 видалити користувача: DELETE /users/1;
 отримайте всіх користувачів: GET /users;
 отримайте одного користувача: GET /users/1.
Важливо зазначити, що з REST вам потрібно думати про свій додаток з
точки зору ресурсів. Треба визначити, які ресурси ви хочете відкрити для
зовнішнього світу та використовати вже визначені http дієслова для виконання
операцій на цих ресурсах. Ось як зазвичай реалізується послуга REST:
1. Формат обміну даними: тут немає обмежень. JSON є дуже
популярним форматом, хоча можна використовувати і інші, такі як XML.
2. Транспорт: завжди HTTP. REST повністю побудований на основі
HTTP.
3. Визначення послуги: Для цього немає стандарту, а REST гнучкий. Це
може бути недоліком у деяких сценаріях, оскільки споживаючій програмі може
знадобитися зрозуміти формати запитів та відповідей. Однак широко
використовуються мова визначення веб-додатків (WADL) і Swagger.
REST фокусуться на ресурсах і на тому, наскільки ефективно ви
виконуєте операції над ними за допомогою HTTP.

2.5 Бази даних

База даних – це організована структура, призначена для зберігання,

модифікації та обробки взаємопов'язаної інформації, в першу чергу великих
обсягів. Бази даних активно використовуються для динамічних сайтів зі
 26

значними обсягами даних – часто це інтернет-магазини, портали, корпоративні

сайти. Такі сайти зазвичай розробляються з використанням серверної мови
програмування (як приклад, PHP) або на основі CMS (як приклад, WordPress), і
не мають готових сторінок з даними за аналогією з HTML-сайтами. Сторінки
динамічних сайтів формуються «на льоту» в результаті взаємодії скриптів і баз
даних після відповідного клієнтського запиту на веб-сервер.
Існує безліч різних типів баз даних. Вибір найкращої бази даних для
конкретної компанії залежить від того, як вона має намір використовувати дані.
Реляційні бази даних. Набули поширення в 1980-х роках. Дані в
реляційній базі даних організовані в таблиці, що складаються зі стовпців і
рядків. Реляційна СКБД забезпечує швидкий та ефективний доступ до
структурованої інформації:
1. Об'єктно-орієнтовані бази даних. Інформація в об'єктно-орієнтованій
базі даних представлена у вигляді об'єкта, як в об'єктно-орієнтованому
програмуванні.
2. Розподілені бази даних. Розподілена база даних складається з двох або
більше частин, розташованих на різних серверах. Така база даних може
зберігатися на декількох комп'ютерах.
3. Сховища даних. Це тип бази даних, спеціально розроблений для для
быстрого выполнения запросов и анализа.
4. База даних Oracle NoSQL. База даних NoSQL, або нереляційна база
даних, дозволяє зберігати і обробляти неструктуровані або напівструктуровані
дані (на відміну від реляційної бази даних, яка визначає структуру даних, які
вона містить). Популярність баз даних NoSQL зростає, оскільки веб-додатки
поширюються і ускладнюються.
5. Графічні бази даних. База даних графів зберігає дані в контексті
сутностей і зв'язків між сутностями.
6. Бази даних OLTP. База даних OLTP – це база даних, призначена для
виконання господарських операцій, які виконуються декількома
користувачами.
Це лише деякі з десятків типів баз даних, які зараз використовуються.
 27

Інші, менш поширені бази даних розраховані на цілком конкретні наукові,

фінансові та інші завдання. Крім появи нових типів, бази даних розвиваються в
абсолютно нових напрямках – змінюються підходи до розвитку технологій,
відбуваються значні зрушення, такі як впровадження хмарних технологій і
автоматизація. Зокрема, останнім часом з'явилися такі бази даних:
1. Бази даних з відкритим вихідним кодом. Такі бази даних є відкритим
вихідним кодом і можуть управлятися за допомогою як SQL, так і NoSQL.
2. Хмарні бази даних. Хмарна база даних – це набір структурованих або
неструктурованих даних, розміщених на приватній, загальнодоступній або
гібридній платформі хмарних обчислень. Існує два типи хмарних моделей баз
даних: традиційна база даних і база даних як послуга (DBaaS). У моделі DBaaS
адміністративні завдання і технічне обслуговування виконує постачальник
хмарних послуг.
3. Багатомодельні бази даних. Багатомодельна база даних об'єднує різні
типи моделей баз даних в єдину інтегровану серверну СКБД. Це означає, що він
може містити різні типи даних.
4. Бази даних документів/JSON. Бази даних документів призначені для
зберігання, отримання та обробки інформації, орієнтованої на документи, і
забезпечують сучасний спосіб зберігання даних у форматі JSON, а не у вигляді
рядків та стовпців.
5. Автономні бази даних. Самокеровані бази даних (також звані
автономними базами даних) – це найновіші та найбільш революційні хмарні
бази даних, які використовують машинне навчання для автоматизації
конфігурації, захисту, резервного копіювання, оновлення та інших стандартних
завдань технічного обслуговування, які зазвичай виконуються
адміністраторами баз даних.
Для бази даних зазвичай потрібне комплексне програмне забезпечення,
яке називається системою управління базами даних (СУБД). СКБД служить
інтерфейсом між базою даних і користувачами або програмами, надаючи
користувачам можливість отримувати і оновлювати інформацію, а також
управляти її упорядкуванням і оптимізацією. С
 28

УБД забезпечує контроль і управління даними, дозволяючи виконувати

різні адміністративні операції, такі як моніторинг продуктивності, настройка, а
також резервне копіювання та відновлення.
Приклади популярного програмного забезпечення для керування базами
даних або СУБД включають MySQL, Microsoft Access, Microsoft SQL Server,
FileMaker Pro, базу даних Oracle і dBASE.
Сьогоднішні бази даних великих підприємств часто підтримують дуже
складні запити, і вони повинні надавати майже миттєві відповіді на них. В
результаті адміністратори баз даних змушені використовувати різноманітні
методи підвищення продуктивності. Ось деякі з найпоширеніших проблем, з
якими вони стикаються.
Значно збільшилися обсяги даних. Вибух даних з датчиків, підключених
приладів і десятків інших джерел змушує адміністраторів шукати способи
ефективного управління і організації даних своєї компанії. Ось такі:
1. Забезпечення безпеки даних. У наші дні відбуваються регулярні
витоки даних, і хакери стають все більш винахідливими. Зараз, як ніколи,
важливо забезпечити захист даних, але при цьому вони легко доступні для
користувачів.
2. Задоволення зростаючих потреб. У сучасному динамічному бізнес
середовищі компаніям потрібен доступ до даних в режимі реального часу для
прийняття своєчасних рішень і використання нових можливостей.
3. Управління базами даних та інфраструктури та їх обслуговування.
Адміністратори баз даних повинні постійно контролювати базу даних на
наявність проблем, виконувати профілактичні роботи та встановлювати
оновлення програмного забезпечення та виправлення. Але бази даних
ускладнюються, обсяги даних зростають, і компанії стикаються з необхідністю
залучення додаткових фахівців для моніторингу та налаштування баз даних.
4. Виключіть межі масштабованості. Якщо бізнес хоче вижити, він
должен развиваться, и возможности управления данными должны расти вместе
с ним. Но администраторам баз данных очень сложно предугадать, какие
мощности потребуются компании, особенно при использовании локальных баз
 29

данных.
5. Дотримання вимог щодо хостингу даних, суверенітету даних та
затримки. Для деяких компаній бази даних краще працювати локально. У таких
випадках ідеально підійдуть готові системи, які налаштовані і оптимізовані для
розміщення баз даних. З Oracle Exadata клієнти досягають високої доступності,
підвищують продуктивність і знижують витрати до 40%.
Всі ці завдання можуть зайняти багато часу і відвернути дБАС від
стратегічних завдань.
 30

3 РЕАЛІЗАЦІЯ РОБОЧОГО ПРОЕКТУ

 31

4 ОХОРОНА ПРАЦІ ТА БЕЗПЕКА ЖИТТЄДІЯЛЬНОСТІ

4.1 Авторські права

Авторські права – це юридичний термін, що використовується для опису

прав, якими мають автори на свої літературні та художні твори. Авторське
право охоплює цілий діапазон творів – від книг, музики, картин, скульптури та
фільмів до комп'ютерних програм, баз даних, реклами, карт та технічних
креслень.
Відмінності між охороною та захистом авторських прав:
Існують дві думки. Згідно з одним, не існує принципових відмінностей
між охороною та захистом авторських прав, тоді як інше припускає, що,
незважаючи на схожість, терміни описують суміжні, перетинаються, схожі, але
в жодному разі не рівнозначні явища.
Згідно з першою думкою, терміни нерівнозначні, оскільки «охорона
авторських прав» – це формулювання, що передбачає широкий спектр
діяльності, яка є єдиною метою. Вона описує саме поточний стан речей, що не є
відповіддю на чиїсь протиправні дії, а просто перелік правил, обов'язкових до
дотримання, що включають такі сфери, як політична та законодавча підтримка,
створення та наявність економічної системи, здатної забезпечити нормальне
функціонування цього явища, вирішення організаційних процесів та інші
складові загальної структури. Описана підтримка здійснюється постійно.
"Захист авторських прав" – вужче поняття, що входить до структури
систем охорони авторських прав. Воно описує ряд заходів, спрямованих на
відновлення або підтвердження інтелектуальної власності, якщо на неї хтось
зазіхнув. Іншими словами, це не пасивна діяльність, а захід у відповідь на чиїсь
протиправні дії, посягання на авторські права, спроби їх привласнити,
оскаржити чи іншими способами позбавити правовласника його законної
переваги.
У кожного з описаних процесів виділяються власні цілі. Мета охорони
 32

авторських прав – це надання володарю безумовних повноважень щодо

розпорядження своєю інтелектуальною власністю, як певним само собою
очевидним авторським привілеєм. Мета захисту авторських прав – відновлення
або підтвердження прав на інтелектуальну власність у випадку, якщо вони з
якоїсь причини були заперечені, порушені або втрачені.
З погляду авторського права комп'ютерне та інше програмне
забезпечення прирівнюється до літературних творів. Тому воно автоматично
користується охороною без якої-чи реєстрації.

4.2 Охорона праці під час роботи

Науково-технічний прогрес вніс серйозні зміни до умов виробничої

діяльності робітників розумової праці. Їх праця стала більш інтенсивною,
напруженою, які вимагають значних витрат розумової, емоційної та фізичної
енергії. Це потребувало комплексного вирішення проблем ергономіки, гігієни
та організації праці, регламентації режимів праці та відпочинку. В даний час
комп'ютерна техніка широко застосовується у всіх галузях діяльності людини.
При роботі з комп'ютером людина піддається дії ряду небезпечних та
шкідливих виробничих факторів: електромагнітних полів (діапазон радіочастот:
ВЧ, УВЧ та НВЧ), інфрачервоного та іонізуючого випромінювань, шуму та
вібрації, статичної електрики тощо.
Робота з комп'ютером характеризується значним розумовим
напруженням і нервно-емоційним навантаженням операторів, високою
напруженістю зорової роботи та досить великим навантаженням на м'язи рук
при роботі з клавіатурою ЕОМ. Велике значення має раціональна конструкція
та розташування елементів робочого місця, що важливо для підтримки
оптимальної робочої пози людини-оператора.
У процесі роботи з комп'ютером необхідно дотримуватись правильного
режиму праці та відпочинку. В іншому випадку у персоналу наголошуються
значне напруження зорового апарату з появою скарг на незадоволеність
роботою, головні болі, дратівливість, порушення сну, утому і хворобливі
 33

відчуття в очах, у попереку, в області шиї та руках.

Правильно спроектоване та виконане виробниче освітлення покращує
умови зорової роботи, знижує стомлюваність, сприяє підвищенню
продуктивності праці, благотворно впливає на виробничу среду, надаючи
позитивну психологічну дію на працюючого, підвищує безпеку праці та знижує
травматизм.
Аналіз умов праці показує, що у приміщенні лабораторії на програміста
можуть негативно впливати наступні фізичні та психофізіологічні фактори:
 підвищена або знижена температура повітря робочої зони;
 підвищена чи знижена вологість повітря;
 недостатня освітленість робочого місця;
 підвищений рівень шуму на робочому місці;
 підвищена іонізація повітря;
 підвищений рівень електромагнітних випромінювань;
 нервно-психічні перевантаження (розумова перенапруга, перенапруга
аналізаторів);
 фізичні перевантаження (одноманітна поза викликає статичну втому).
Недостатність освітлення приводить до напруги зору, ослабляє увагу,
приводить до настання передчасної стомленості. Надмірно яскраве освітлення
викликає засліплення, роздратування і різь в очах. Неправильний напрямок
світла на робочому місці може створювати різкі тіні, відблиски, дезорієнтувати
працюючого. Всі ці причини можуть призвести до нещасного випадку або
профзахворювань, тому такий важливий правильний розрахунок освітленості.
Шум погіршує умови праці надаючи шкідливу дію на організм людини.
Працюючі в умовах тривалої шумової дії випробовують дратівливість, головні
болі, запаморочення, зниження пам'яті, підвищену стомлюваність, зниження
апетиту, біль у вухах тощо. Такі порушення в роботі ряду органів і систем
організму людини можуть викликати негативні зміни в емоційному стані
людини аж до стресових. Під впливом шуму знижується концентрація уваги,
порушуються фізіологічні функції, з'являється втома у зв'язку з підвищеними
 34

енергетичними витратами і нервово-психічним напруженням, погіршується

мовна комутація. Все це знижує працездатність людини і її продуктивність,
якість і безпеку праці. Тривала дія інтенсивного шуму [вище 80 дБ (А)] на слух
людини приводить до його часткової або повної втрати.
Ергономічні вимоги до робочого місця:
Робоче місце і взаємне розташування всіх його елементів повинне
відповідати антропометричним, фізичним і психологічним вимогам. Велике
значення має також характер роботи. Зокрема, при організації робочого місця
програміста повинні бути дотримані наступні основні умови: оптимальне
розміщення устаткування, що до складу робочого місця і достатній робочий
простір, що дозволяє здійснювати всі необхідні рухи і переміщення.
Ергономічними аспектами проектування відеотермінальних робочих
місць, зокрема, є: висота робочої поверхні, розміри простору для ніг, вимоги до
розташування документів на робочому місці (наявність і розміри підставки для
документів, можливість різного розміщення документів, відстань від очей
користувача до екрану, документа, клавіатури тощо), характеристики робочого
крісла, вимоги до поверхні робочого столу, регульованість елементів робочого
місця.
Головними елементами робочого місця програміста є стіл і крісло.
Основним робочим положенням є положення сидячи (рисунок 4.1).
 35

Рисунок 4.1 – Вимоги до робочої пози при користуванні комп'ютером

Робоча поза сидячи викликає мінімальне стомлення програміста.

Раціональне планування робочого місця передбачає чіткий порядок і сталість
розміщення предметів, засобів праці і документації. Те, що потрібно для
виконання робіт частіше, розташоване в зоні легкої досяжності робочого
простору.
Моторне поле – простір робочого місця, в якому можуть здійснюватися
рухові дії людини.
Максимальна зона досяжності рук – це частина моторного поля
робочого місця, обмеженого дугами, описуваними максимально витягнутими
руками при русі їх у плечовому суглобі.
Оптимальна зона – частина моторного поля робочого місця, обмеженого
дугами, описуваними передпліччями при русі в ліктьових суглобах з опорою в
точці ліктя і з відносно нерухомим плечем.

4.3 Пожежна безпека

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

призначення, категорії по вибухопожежній і пожежній небезпеці, по
поверховості, площі поверху в межах пожежного відсіку згідно НАПБ Б.03.002
2007.
Будинок, у якому знаходиться лабораторія по пожежній небезпеці
будівельних конструкцій відноситься до категорії K1 (малопожежонебезпечні),
оскільки тут присутні займисті (книги, документи, меблі, оргтехніка тощо) і
тяжкогорючі речовини (сейфи, різне устаткування тощо), що при взаємодії з
вогнем можуть горіти без вибуху.
По конструктивних характеристиках будинок можна віднести до
будинків з несучими і огороджуючими конструкціями із природних або
штучних кам'яних матеріалів, бетону або залізобетону, де для перекриттів
допускається використання дерев'яних конструкцій, захищених штукатуркою
 36

або важкогорючими листовими, а також плитними матеріалами.

Отже, ступінь вогнестійкості будинку можна визначити як третю (III).
Приміщення лабораторії по функціональній пожежній небезпеці відноситься до
класу Ф 4.2 – вищі навчальні заклади, установи підвищення кваліфікації.

4.4 Вимоги щодо електричної безпеки

Персональний комп’ютер – електроприлад. Від інших приладів він

відрізняється тим, що для нього передбачена можливість тривалої експлуатації
без відключення від електричної мережі. Крім звичайного режиму роботи,
комп’ютер може перебувати в режимі роботи зі зниженим електроспоживанням
або в черговому режимі очікування запиту. У зв’язку з можливістю тривалої
роботи комп’ютера без відключення електромережі слід приділити особливу
увагу якості організації електроживлення.
Неприпустимим є використання неякісних та зношених компонентів у
системі електропостачання, а також їх сурогатних замінників: розеток,
подовжувачів, перехідників, трійників. Неприпустимо самостійно
модифікувати розетки для підключення вилок, які відповідають іншим
стандартам. Електричні контакти розеток не повинні зазнавати механічних
навантажень, пов’язаних із підключенням масивних компонентів (адаптерів,
трійників тощо).
Всі кабелі та кабелі живлення повинні розташовуватися з задньої
сторони комп’ютера і периферійних пристроїв. Їхнє розміщення в робочій зоні
користувача неприпустимо.
Забороняється проводити будь-які операції, пов’язані з підключенням,
вимкненням або переміщенням компонентів комп’ютерної системи без
попереднього вимкнення живлення.
Комп’ютер не слід встановлювати поблизу електронагрівальних
приладів та систем опалення.
Не можна розміщувати на системному блоці, моніторі та периферійних
пристроях сторонні предмети: книги, аркуші паперу, серветки, чохли для
 37

захисту від пилу. Це призводить до постійного або тимчасового перекриття

вентиляційних отворів.
Забороняється впроваджувати сторонні предмети в експлуатаційні чи
вентиляційні отвори компонентів комп’ютерної системи.
Монітор має елементи, здатні зберігати високу напругу протягом
тривалого часу після вимкнення мережі. Розкриття монітора користувачем
неприпустимо за жодних умов. Це не тільки небезпечно для життя, але й
технічно марно, тому що всередині монітора немає жодних органів,
регулюванням або налаштуванням яких користувач міг би покращити його
роботу. Розкриття та обслуговування моніторів може здійснюватися лише у
спеціальних майстернях.
 38

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. Визначення Backend [Електронний ресурс] – Режим доступу:

https://highload.today/backend/
2. Типи мережевих протоколів [Електронний ресурс] – Режим доступу:
https://testmatick.com/ru/osnovnye-ponyatiya-i-osobennosti-klient-servernoj-
arhitektury/
3. Переваги TS перед JS [Електронний ресурс] – Режим доступу:
https://developer.mozilla.org/ru/docs/Learn/JavaScript/First_steps/
What_is_JavaScript
4. Модифікатори доступу TypeScript [Електронний ресурс] – Режим
доступу: https://metanit.com/web/typescript/3.4.php
5. Принцип роботи HTTP [Електронний ресурс] – Режим доступу:
https://habr.com/ru/post/483202/