Розробка універсального блогу на основі застосування Next.JS

Стойшич, Богдан

Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/6900

Title:	Розробка універсального блогу на основі застосування Next.JS
Authors:	Прокопенко , Тетяна Олександрівна Стойшич, Богдан
Keywords:	інформаційна система;контент;блогінг;блог;система керування вмістом;фреймворк;Next.JS;React;сервер;хостинг;публікація
Issue Date:	14-Jun-2022
Abstract:	У кваліфікаційній роботі бакалавра розроблено універсальний блог. В якості інструменту для розробки вибрано Next.JS – фреймворк від React. Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає 77 сторінок, в тому числі вступ, 3 розділи, висновки, додаток та список використаних джерел. Робота містить 22 рисунка та 50 інформаційних джерел. Перший розділ кваліфікаційної роботи присвячений опису поняття «блог» та «блогінг». Визначено актуальність та доцільність створення універсального блогу, принципи розробки сучасних веб-додатків. Здійснено аналітичний огляд існуючих типів блогів та визначено їх ключові відмінності. Другий розділ присвячений проектуванню універсального блогу: визначено ключові принципи написання блогу, правила ефективного застосування web-дизайну та описано етапи створення блогу. У третьому розділі здійснено огляд інструментів розробки web-додатків, визначено їх переваги і недоліки. Обґрунтовано вибір фреймворку Next.js для розробки універсального блогу. Описано процес розробки та інтерфейс розробленого блогу.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/6900
Appears in Collections:	126 Інформаційні системи та технології (Web-технології, web-дизайн)

Files in This Item:

File	Description	Size	Format
РЕП_БАК_Стойшич_WEB-1811.pdf Restricted Access		2.79 MB	Adobe PDF	View/Open Request a copy

Show full item record

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ

КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ

Пояснювальна записка
до кваліфікаційної роботи бакалавра

на тему: «Розробка універсального блогу на основі застосування
Next.JS»

Виконав студент 4 курсу,
групи Web-1811,
спеціальності 126 –
Інформаційні системи та
технології,
освітня програма – Web-
технології, Web-дизайн,

Стойшич Б.
Керівник д.т.н., проф. Прокопенко Т.О.
Рецензент

Черкаси – 2022 року

АНОТАЦІЯ
У кваліфікаційній роботі бакалавра розроблено універсальний блог. В
якості інструменту для розробки вибрано Next.JS – фреймворк від React.
Обсяг пояснювальної записки кваліфікаційної роботи бакалавра
складає 77 сторінок, в тому числі вступ, 3 розділи, висновки, додаток та
список використаних джерел. Робота містить 22 рисунка та 50 інформаційних
джерел.
Перший розділ кваліфікаційної роботи присвячений опису поняття
«блог» та «блогінг». Визначено актуальність та доцільність створення
універсального блогу, принципи розробки сучасних веб-додатків. Здійснено
аналітичний огляд існуючих типів блогів та визначено їх ключові відмінності.
Другий розділ присвячений проектуванню універсального блогу:
визначено ключові принципи написання блогу, правила ефективного
застосування web-дизайну та описано етапи створення блогу.
У третьому розділі здійснено огляд інструментів розробки web-
додатків, визначено їх переваги і недоліки. Обґрунтовано вибір фреймворку
Next.js для розробки універсального блогу. Описано процес розробки та
інтерфейс розробленого блогу.
Ключові слова: блог, блогінг, інформаційна система, система керування
вмістом, фреймворк, Next.JS, React, сервер, хостинг, контент, публікація.

ABSTRACT
A universal blog has been developed in the bachelor's thesis. Next.JS, a
framework from React, was chosen as the development tool.
The volume of the explanatory note of the bachelor's qualification work is
77 pages, including the introduction, 3 sections, conclusions, appendix and the list
of used sources. The work contains 22 drawings and 50 references.
The first section of the qualification work is devoted to the description of
the concept of "blog" and "blogging". The relevance and expediency of creating a
universal blog, the principles of development of modern web applications are
determined. An analytical review of existing types of blogs was performed and
their key differences were identified.
The second section is devoted to the design of a universal blog: the key
principles of blog writing, the rules of effective use of web-design and describes
the stages of creating a blog.
The third section reviews the tools for developing web-applications,
identifies their advantages and disadvantages. The choice of the Next.js
framework for the development of a universal blog is substantiated. The
development process and the interface of the developed blog are described.
Keywords: blog, blogging, information system, content management
system, framework, Next.JS, react, server, hosting, content, publication.

ЗМІСТ
ВСТУП .................................................................................................................. 3
1 ПОНЯТТЯ «БЛОГ» ТА МЕТОДИ ЙОГО СТВОРЕННЯ ............................. 5
1.1 Поняття та перспективи блогінгу ......................................................... 5
1.2 Принципи розробки сучасних веб-додатків ........................................ 9
1.3 Огляд та аналіз існуючих типів блогів .............................................. 13
1.4 Висновки до розділу 1 ......................................................................... 22
2 ПРОЄКТУВАННЯ УНІВЕРСАЛЬНОГО БЛОГУ ....................................... 23
2.1 Ключові принципи написання блогу ................................................. 23
2.2 Правила ефективного дизайну блогу ................................................. 26
2.3 Основні етапи розробки універсального блогу ................................ 30
2.4 Висновки до розділу 2 ......................................................................... 34
3 РОЗРОБКА УНІВЕРСАЛЬНОГО БЛОГУ ................................................... 35
3.1 Вибір засобів розробки універсального блогу .................................. 35
3.2 Фреймворк Next.JS для розробки блогу ............................................ 38
3.2.1 Особливості Next.JS.................................................................. 38
3.2.2 Налаштування Next.JS .............................................................. 39
3.2.3 Розробка універсального блогу ............................................... 42
3.4 Інтерфейс розробленого універсального блогу ................................ 59
3.5 Висновки до розділу 3 ......................................................................... 62
ВИСНОВКИ ........................................................................................................ 63
ДОДАТОК A 482 ЧДТУ 20000-01 Розробка універсального блогу на основі
застосування Next.JS. Специфікація ................................................................ 64
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ .......................................................... 73

ЧДТУ 220000.004 ПЗ
Зм. Лист № докумемента Підпис Дата
Розроб. Стойшич Б. Літ. Лист Листів
Перев. Прокопенко Т.О. Розробка універсального блогу на Н 2 77

Реценз основі застосування Next.JS. ФІТІС,
Н. . контр. Пояснювальна записка
П рокопенко Т.О. кафедра ІТП, Web-1811
Затв.

ВСТУП
На піку популярності контент-маркетингу багато підприємців не
випадково цікавляться темою блогінгу і цілком справедливо вважають цю
сферу інструментом для розвитку бізнесу. І я повинен сказати, що це так,
оскільки блог для бізнес-сайту чи інтернет-магазину – це не лише платформа,
за допомогою якої блогер ділиться інформацією зі своєю аудиторією, а й засіб
залучення нових читачів блогу. Важливо, що деякі з них потім можуть бути
перетворені в клієнтів.
Ведення блогів разом із активністю в соціальних мережах — це
надійний спосіб створити лояльну аудиторію навколо бренду, яка не зможе
бути передана конкурентам, навіть якщо вони мають подібний продукт.
Пріоритетом досягнення цієї мети має бути якість – вичерпні статті, що
розкривають тему, із заздалегідь виділеним смисловим ядром для висвітлення
питань, які цікавлять людей.
Актуальність. Сучасне життя надзвичайно тісно пов’язане з
інтернетом. Швидкий розвиток інформаційних технологій породив феномен
блогів, який зараз займає більшу частину життя пересічної людини. Блогери,
яких сьогодні ще називають «лідери думок», — харизматичні особистості, які
впливають на інших і є прикладом наслідування для багатьох людей.
Блогери знають секрети маніпулювання свідомістю людей в
інформаційному суспільстві, особливо тих, хто не здатний до критичного
мислення та аналізу. Враховуючи швидке поширення блогерства та його
неабиякий вплив на людей різного віку та соціального статусу, створення
блогів у мережі інтернет з точки зору його багатофункціональності є
актуальним і визначається потребами сучасних соціальних реалій, зокрема
бізнесу, та інформаційних технологій.
Об’єктом дослідження є способи розробки універсальних блогів
засобами Next.JS.
Арк.
ЧДТУ 220000.004 ПЗ 3
З м н. Арк. № докум. Підпис Дата

Предметом дослідження є методи і алгоритми розробки веб-
орієнтованих інформаційних систем.
Метою кваліфікаційної роботи бакалавра є створення веб-орієнтованих
інформаційних систем та розробка і створення універсального блогу на основі
застосування Next.JS. Для досягнення поставленої мети кваліфікаційної роботи
бакалавра необхідно розв’язати наступні задачі:
 проаналізувати предметну область розробки;
 здійснити порівняльний аналіз засобів розробки веб-орієнтованої
системи і визначити доцільність використання фреймворку Next.JS;
 сформувати вимоги до інтерфейсу розробленого блогу;
 розробити веб-орієнтовану інформаційну систему комп’ютерних
ігрових новин.
Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає
77 сторінок, в тому числі вступ, 3 розділи, висновки, додаток та список
використаних джерел. Робота містить 22 рисунка та 50 інформаційних джерел.

Арк.
ЧДТУ 220000.004 ПЗ 4
З м н. Арк. № докум. Підпис Дата

1 ПОНЯТТЯ «БЛОГ» ТА МЕТОДИ ЙОГО СТВОРЕННЯ
1.1 Поняття та перспективи блогінгу
Блог – це тип веб-сайту, на якому вміст представлено у зворотному
хронологічному порядку (першим з’являється новий вміст). Вміст блогу часто
називають записами в блозі або «публікаціями в блозі».
Блоги, зазвичай, ведуть окрема особа або невелика група людей, щоб
подати інформацію в розмовному стилі. Однак зараз є багато корпоративних
блогів, які створюють інформативний та продуманий контент в стилі свого
бізнесу.
Мета блогу – надати інформацію на веб-сайті, який дасть відповіді на
запитання потенційних клієнтів і допоможе їм дізнатися більше про продукт чи
послугу. Це підвищує помітність і впізнаваність бренду, надаючи Google та
іншим пошуковим системам вміст, який можна індексувати та відображати в
результатах пошуку.
Бізнес-блог – це частина веб-сайту бренду, на якому публікується
контент, який допомагає інформувати цільову аудиторію компанії про її
продукти чи послуги. Блог – це маркетинговий канал і важлива частина
контент-маркетингової стратегії бренду, оскільки він допомагає залучити
потенційних клієнтів за допомогою пошукових систем.
Бізнес-блогінг дає реальні маркетингові результати. Контент є
ключовим фактором для сильної стратегії SEO. До прикладу, розглянемо
статистику HubSpot [1]. Середній прибуток від веб-сайтів, які мають блог:
 на 55% більше відвідувачів;
 на 97% більше вхідних посилань;
 на 434% більше проіндексованих сторінок.
Блог постійно оновлює контент і дає можливість писати статті,
використовуючи важливі пошукові терміни. За даними Demand Metric [2],
компанії, що ведуть блоги, в середньому генерують на 67% більше
потенційних клієнтів на місяць, ніж компанії, які не ведуть блоги.
Арк.
ЧДТУ 220000.004 ПЗ 5
З м н. Арк. № докум. Підпис Дата

Зміст блогу дає бізнесу нову інформацію, якою інші користувачі
можуть поділитися в соціальних мережах та електронному маркетингу, якою, у
свою чергу, можна поділитися з більш широкою аудиторією і створити
всеохоплюючий ефект. Це дає більше охоплення релевантної цільової
аудиторії і вищі рейтинги в пошукових системах.
Найважливіше те, що ведення блогів дає можливість бізнесу зміцнити
довіру та авторитет в аудиторії. Підвищуючи впізнаваність бренду, одержуючи
відповіді на запитання користувачів/клієнтів, надаючи корисну інформацію,
яка допоможе їм приймати рішення про покупку, і надаючи «безкоштовну»
цінність, ведення блогу є одним із найкращих способів зв’язатися з клієнтами
та взаємодіяти з ними.
Хороша стаття в блозі – багатошарова. Вона приваблює відвідувачів
веб-сайту, збільшується кількість кліків, які вона отримує з результатів
пошуку, вона займає все вище й вище місце в пошуковій системі, що підвищує
її позиції в результатах пошуку.
Після певного часу ведення блогу виявляється, що деякі дописи за
популярністю перевершують інші і збирають набагато більший відсоток
відвідувачів веб-сайту. Ці статті називаються «складовими новинами».
HubSpot [3] має детальну статтю про те, що найбільший вплив мають довші
статті, які мають тактичний характер і надають контент, який приваблює
велику частину аудиторії компанії.
Ведення блогів не є магією і не змушує відвідувачів автоматично
знаходити сайт компанії. Існує багато речей, які відбуваються за лаштунками,
щоб зробити публікацію в блозі успішною, наприклад SEO та просування. У
більшості випадків результати помітні лише через кілька місяців.

Блог не продає продукт безпосередньо. Його використовують, щоб
навчати, інформувати, надихати або розважати свою аудиторію. Вміст блогу
знаходиться у верхній частині воронки продажів. Відвідувачі, які відвідують
Арк.
ЧДТУ 220000.004 ПЗ 6
З м н. Арк. № докум. Підпис Дата

сайт компанії вперше, ймовірно, не готові прийняти рішення. Спочатку вони
повинні знати, чи можуть вони довіряти компанії.
Одне з найбільших хибних уявлень про блог полягає в тому, що він
повинен залучати якомога більше читачів. Закидання ширшої мережі не
допоможе зловити більше риби в Інтернеті. В результаті можна отримати
розбавлений вміст, який намагається отримати масову привабливість. Блог має
бути написаний безпосередньо для потенційного покупця, а не для когось
іншого. Важливо провести дослідження, щоб уточнити свою стратегію та
включити контент, написаний для певної ніші.
Ще один міф про ведення блогів, який потрібно розвіяти, полягає в
тому, що він залежить від кількості, як от «Чим більше статей я публікую, тим
більше трафіку отримає мій сайт». Хоча ведення блогів досить часто є
важливим, я стверджую, що стратегія, послідовність і якість важливіші за
кількість. Надійна стратегія допоможе блогу отримати результати, якщо статті
написані таким чином, щоб заохочувати читачів до конверсії. Послідовність
зміцнює лояльність, а якість створює довіру.
Гарний блог рідко досягає успіху без реклами. Успішний блог буде
цікавим і піддається поширенню. Але спочатку ним потрібно поділитися – у
соціальних мережах та на форумах.
Постійне ведення блогу також має вирішальне значення для створення
довіри до домену. Успішна стратегія формування посилань – це пов’язувати
сторінки блогу зі сторінками пропозицій компанії на веб-сайті. Інші блоги
також почнуть посилатися на даний контент, якщо він релевантний і корисний.
З часом ця мережа посилань буде опрацьована і Google визначить, що сайт
релевантний і корисний для певних запитів користувачів.
Дослідження ключових слів допоможе визначити теми публікацій в
блозі, які стосуються цільової аудиторії, теми, які користувачі шукають у
Google та інших пошукових системах, а також теми, про які пишуть
конкуренти. Дуже важливо для блогу компанії досліджувати ключові слова для
Арк.
ЧДТУ 220000.004 ПЗ 7
З м н. Арк. № докум. Підпис Дата

вибору тем, про які хочуть прочитати користувачі, а також тем, які не
висвітлюють потенційні конкуренти. Ці прогалини у вмісті дають можливість
надати цінний вміст, який відповідає поширеним запитам.
Невід’ємною частиною успішного блогу є професійні, привабливі
зображення та інфографіка до публікацій. Джефф Буллас стверджує, що
дописи в блозі із зображеннями отримують на 94% більше переглядів [4]. А
статті блогу з інфографікою отримують на 12% більше переглядів. Зображення
також допомагають публікаціям у блозі виділитися, коли підписники діляться
ними в соціальних мережах.
Не потрібно бути графічним дизайнером або фотографом, щоб
створювати привабливі та відповідні візуальні елементи. Можна
використовувати для цього безкоштовні зображення. Вибираючи зображення
для публікації в блозі, необхідно переконатися, що воно відповідає змісту
статті та має відповідний формат.
Також обов’язково потрібно додати альтернативний текст до зображень
перед завантаженням їх у власну CMS.
Створення контенту не є разовою подією. Щоб збільшити охоплення та
видимість бренду, а також отримати додатковий відсоток вмісту блогу, можна
використовувати наступну тактику:
 поширення статтей у своїх соціальних каналах;
 створення зображень, що відповідають формату соцмережі
Pinterest, і закріплення їх в Pinterest із посиланнями на свої статті;
 перетворення статтей блогу на відео;
 посилання на джерела, на які є посилання у власних статтях, і
прохання їх поділитися ними в соціальних мережах;
 створення pdf-файлів з основними даними зі своєї статті та
розміщення їх у Linkedin як pdf-каруселі;
 об’єднання кількох статей блогу на подібну тему в одну
електронну книгу з можливістю її завантаження;
Арк.
ЧДТУ 220000.004 ПЗ 8
З м н. Арк. № докум. Підпис Дата

 додавання структурованих даних до статей блогу, щоб допомогти
пошуковим системам «зрозуміти» його вміст.
1.2 Принципи розробки сучасних веб-додатків
Завдяки останнім тенденціям розвиток веб-додатків за останні роки
змінився. Застосовувані раніше принципи розвитку більше не мають сенсу,
оскільки з’явилися нові. Далі розглянемо принципи, яких повинні
дотримуватися сучасні веб-розробники при створенні успішних додатків.
Що робить розробника продуктивним? Відповідь не така очевидна, як
може здатися. Загалом, потужність безпосередньо пов’язана зі швидкістю. Але
з розробниками все інакше. Швидкість не обов’язково дорівнює
продуктивності. Припустимо, що розробник виконує проект за половину
очікуваного часу. Тоді виникають наступні питання. Чи відповідає додаток
специфікаціям? Чи можна його використовувати безпечно? Чи буде він
розширюватися разом з компанією? Чи адаптується він до майбутніх потреб?
тощо. Як бачимо, термін «продуктивний розробник» неоднозначний.
«Швидкий» розробник, який створює складні додатки, які неможливо
підтримувати, не є продуктивним. З точністю до навпаки. Я б сказав, що
«продуктивний розробник» – це той, хто правильно створює додатки
найефективнішим способом. Іншими словами, продуктивність = швидкість +
якість.
Наступне логічне запитання: що таке «якісний» додаток? Чи відповідає
він специфікаціям? Якісний додаток – це програма, розроблена як для
сьогодення, так і для майбутнього. Він адаптується до змінних технологій,
задовольняє довгострокові потреби користувачів, росте разом із бізнесом і його
легко обслуговувати.
Тож як розробникам створювати якісні програми? Починається з
розуміння принципів сучасної веб-розробки. Ці принципи допомагають
розробникам створювати успішні додатки – такі, які відповідають поточним і
майбутнім потребам їхніх користувачів і адаптуються до постійно мінливих
Арк.
ЧДТУ 220000.004 ПЗ 9
З м н. Арк. № докум. Підпис Дата

технологічних тенденцій. Хоча це далеко не вичерпний список, ось 7 важливих
принципів розробки сучасних веб-додатків:
 Принцип №1: Все залежить від користувача.
Інтернет розвивався з роками. Змінилися інструменти та техніка.
З’явилися нові пристрої. Однак один принцип залишається незмінним
протягом багатьох років – все залежить від користувача.
Проблема в тому, що дуже часто цей ключовий принцип губиться під
час розробок. Іноді розробники висвітлюють новітні та найкращі технології. В
інших випадках їм доводиться вкладатися в термін і прискорити виконання
проекту. Розробники та користувачі думають по-різному. При створенні веб-
додатку акцент робиться на побажаннях замовника, а не на технологіях та
перевагах розробника. Мислення категоріями користувачів дуже допомагає у
визначенні задач і кінцевого продукту.
 Принцип №2: Безпека.
Статистика показує, що 94% веб-додатків страждають від
високорівневих вразливостей безпеки. Гірше того, переважна більшість
тестованих веб-додатків страждала від поширених уразливостей, таких як
міжсайтові сценарії, SQL ін’єкції тощо.
Більшість бізнес-веб-додатків страждають від відомих уразливостей
безпеки, які можна запобігти. Ці вразливості були визначені як основні загрози
безпеці понад 10 років тому. Чому це відбувається? Хоча причини різні, одна
проблема полягає в тому, що багато розробників все ще користуються
застарілим підходом до безпеки. Вони бачать у цьому функцію, яку вони
можуть просто додати в кінці. Справа в тому, що сучасна безпека веб-додатків
не працює. Більш ніж будь-коли, безпека має бути вбудована у веб-додатки з
самого початку.
Дизайн та архітектура додатку повинні включати всі аспекти безпеки
відповідно до встановлених вимог і стандартів. Таким чином, можна уникнути
Арк.
ЧДТУ 220000.004 ПЗ 10
З м н. Арк. № докум. Підпис Дата

фінансових і репутаційних витрат, пов’язаних із виявленням уразливостей,
експлойтів, втратою даних або простоєм через злом веб-сайтів.
 Принцип №3: Інструменти.
Останнім часом спостерігається значне збільшення інструментів
розробки. Розробники мають доступ до бібліотек, фреймворків і шаблонів.
Можна використовувати GitHub, IDE та платформи розробки з низьким кодом.
Такі інструменти швидко стають необхідністю для сучасних розробників. Це
можна пояснити кількома причинами:
1) Розробка веб-додатків є більш складним процесом. У минулому
розробка додатків була більш спеціалізованою. Програмісти часто
зосереджували свій розвиток на одній мові. Тепер це змінюється. Сучасний
веб-розробник – це щось на кшталт «майстра». Йому потрібно розуміти мови
програмування, веб-уразливості, інтеграцію API, адаптивний дизайн, javascript,
принципи UX, сучасну архітектуру тощо. Іншими словами, розробка веб-
додатків стає дедалі складнішою. Це вимагає постійного розвитку цілого ряду
навичок. Інструменти дозволяють розробникам подолати цей недолік у
навичках, допомагаючи їм виконувати завдання, які вони не можуть виконати
самостійно.
2) Розробники стикаються з більшим тиском, щоб діяти швидко.
Розробники знаходяться під тиском термінів, як ніколи раніше. Підприємства
хочуть, щоб їхні додатки відкривались швидко без шкоди для
функціональності та безпеки.
У багатьох випадках ці вимоги фізично неможливі за допомогою
ручних методів кодування. В результаті все більше компаній використовують
інструменти розробки для прискорення цього процесу.
 Принцип №4: Додаткам потрібна швидкість.
В останні роки помітна необхідність збільшення швидкості додатків
через два основні фактори. По-перше, користувачі Інтернету стають все менш
терплячими. Зменшення інтервалу уваги відбувається під час швидкого
Арк.
ЧДТУ 220000.004 ПЗ 11
З м н. Арк. № докум. Підпис Дата

зростання даних. Сучасні програми повинні обробляти більше даних з більшої
кількості джерел, ніж будь-коли раніше. Якщо це не оптимізувати належним
чином, це збільшення даних може сповільнити роботу додатків, що призведе
до відключення користувачів. По-друге, швидкість завантаження сторінок
корисна для бізнесу. Google очолив цю тенденцію, оголосивши, що буде
використовувати швидкість завантаження сторінки як фактор рейтингу.
Повільні сторінки штрафуються в результатах пошуку. Що це означає для
розробників? Оптимізація продуктивності веб-додатків швидко стає важливою
частиною процесу розробки.
 Принцип № 5: Коли мова йде про архітектуру, потрібно
думати довгостроково.
Сьогодні розробка зосереджена на досвіді користувачів. Розробники
повинні надавати користувачам добре розроблені та прості у використанні
додатки, інакше є ризик бути проігнорованим. Але не варто настільки
захоплюватися інтерфейсом користувача, щоб забути найважливішу частину
програми: архітектуру. Хоча архітектура програми може бути невидимою для
користувачів, вплив архітектури на додаток в цілому величезний.
Наприклад, архітектура впливає на безпеку, обслуговування, гнучкість,
масштабованість тощо. Хороша архітектура може зайняти більше часу, але це
важлива частина створення довгострокових програм.
Кілька ідей для хорошої архітектури додатку:
1) Дотримання перевірених технологій. Розробники люблять
випробовувати найновішу та найкращу структуру чи інструмент. У цьому
немає нічого поганого, поки вони не використають це для свого наступного
великого проекту. Хоча це може здатися виснажливим, варто дотримуватися
перевірених технологій під час створення корпоративних веб-додатків.
2) Плануючи архітектуру програми, виходьте за рамки початкових
вимог.
 Принцип №6: Відокремлення проблем у додатках.
Арк.
ЧДТУ 220000.004 ПЗ 12
З м н. Арк. № докум. Підпис Дата

Раніше розробники використовували монолітний підхід, вбудовуючи
кожну функцію безпосередньо в свою програму. Велика проблема такого
підходу – обслуговування. Зміна в одній області може порушити інші області.
З часом програми стали некерованими. Сучасна архітектура вимагає
відокремлення проблем. Наприклад, ми є великим прихильником підходу n-
рівневої архітектури, який поділяє програму на рівні. Перевага цього підходу:
можна підтримувати та покращувати кожен рівень програми окремо.
Припустимо, вам потрібно адаптувати свої програми для мобільного
використання. Або, припустимо, ви хочете оновити зовнішній вигляд своєї
програми. N-рівнева архітектура дозволяє змінювати рівень презентації, не
торкаючись інших областей. Це робить програми гнучкими та допомагає
адаптуватися до змін, коли це необхідно.
 Принцип №7: Єдина константа - це зміни.
Технологія постійно розвивається. Як відомо розробникам, це і
благословення, і прокляття. З одного боку, розробка додатків постійно
розвивається. Нові бібліотеки, інструменти, методи та фреймворки з’являються
регулярно. Ці досягнення призводять до кращої функціональності програми та
ефективнішої розробки. З іншого боку, постійно з’являються нові прогалини в
безпеці. Раніше захищена програма тепер може мати кричущу діру в безпеці.
Розробник зобов’язаний підтримувати свої програми в актуальному стані
відповідно до останніх стандартів безпеки.
Іншими словами, сучасні веб-додатки ніколи не бувають «закінченими».
Не можна написати програму і забути про неї. Сучасним розробникам
необхідно постійно оновлювати свої програми, щоб адаптуватися до мінливих
тенденцій і стандартів безпеки.
1.3 Огляд та аналіз існуючих типів блогів
Історія блогінгу почалась з особистих блогів, де кожен писав про
власний щоденний досвід. Але з тих пір термін «блог» вибухнув у вживанні.
Арк.
ЧДТУ 220000.004 ПЗ 13
З м н. Арк. № докум. Підпис Дата

Зараз багато людей заробляють гроші на своїх блогах, або через бізнес, або
через фрілансерів.
Сьогодні у світі налічується понад 570 мільйонів блогів [5], що є
беззаперечним свідченням ефективності блогів. Щоб побачити, як сьогодні
використовуються блоги, розглянемо список найпопулярніших типів блогів,
проаналізувати їх і визначитись з типом розроблюваного блогу.
1) Персональні блоги.
«Класичний» блог. Власне, саме з цим поняттям і асоціювався блог,
коли цей термін з’явився вперше. Раніше це був чийсь особистий онлайн-
простір, де автор ділився своїми думками, не маючи на увазі жодної
монетизації чи бізнес-стратегії (рис. 1.1).
Звичайно, особисті блоги все ще існують, і вони відіграють роль
інтернет-журналів. Якщо автор любить писати, він просто робить це, не
турбуючись про охоплення великої аудиторії або про продажі чогось.

Рисунок 1.1 – Приклад особистого блогу
2) Бізнес/корпоративні блоги.
З часом блоги виявилися ефективними для бізнесу, щоб спілкуватися зі
своїми клієнтами, створювати спільноти та залучати нових клієнтів. За даними
Арк.
ЧДТУ 220000.004 ПЗ 14
З м н. Арк. № докум. Підпис Дата

ActiveBlogs, 81% опитаних компаній вважають свій блог «корисним, важливим
або критичним» для свого бізнесу [6].
Деякі компанії використовують блоги для оприлюднення запуску нових
продуктів, проектів, над якими вони працюють, майбутніх випусків, конкурсів
тощо. Блоги допомагають компаніям збільшити трафік на свій веб-сайт і, отже,
підвищити коефіцієнт конверсії шляхом просування вмісту (рис. 1.2).
Є також компанії, які використовують блоги, щоб висловити свої
експертні голоси в спільноті, пишучи якісний контент незалежно від їх
профілю. Таким чином, їхній блог стає авторитетним виданням у своїй ніші.
Це хороший довгостроковий підхід і ефективний спосіб продовжувати
просувати свої послуги в довгостроковій перспективі.

Рисунок 1.2 – Приклад бізнес-блогу
3) Особистий бренд/професійні блоги.
Ці типи блогів є комбінацією ділового та особистого блогу. Цей блог, як
правило, є проектом однієї людини, яка врешті-решт стає на шлях бізнесу – він
власник, який заробляє на цьому гроші, а не лише для особистих історій.
Власник такого блогу дотримується бізнес-стратегії, створює план,
обирає нішу, створює редакційний план, вступає в партнерські відносини з
Арк.
ЧДТУ 220000.004 ПЗ 15
З м н. Арк. № докум. Підпис Дата

брендами, аналізує ринок і регулярно бере участь у розвитку блогу та шукає
нові маркетингові можливості.
Вони пишуть на теми, які цікавлять людей у обраній ними ніші. Ті, хто
володіє такими типами блогів і стають відомими в певній спільноті, є
блогерами, яких більшість людей називають інфлюенсерами. Семруш писав,
що 46% користувачів Інтернету звертаються за порадою до блогерів, на яких
вони підписані, і вживають відповідних заходів [7].
Інші блогери, які потрапляють в цю категорію, – це фрілансери та
власники портфоліо в Інтернеті, які ведуть блоги про свою роботу і
користуються цією можливістю, щоб наймати компанії для різних проектів
(рис. 1.3).

Рисунок 1.3 – Приклад професійного блогу
4) Модні блоги.
Тема моди є популярним джерелом для ведення блогів у всьому світі
(рис. 1.4). Але й конкуренція також надзвичайно велика, а ще потрібно зібрати
Арк.
ЧДТУ 220000.004 ПЗ 16
З м н. Арк. № докум. Підпис Дата

багато інформації, яку потрібно знайти на різних веб-сайтах. Цим типом блогу
користується звичайна людина, яка знайома з темою, або експерт.
Джеймс Норд, засновник Fohr, каже, що модний блогер з близько 500
тис. підписників може заробити значну суму – до 7500 доларів за фотографію в
Instagram від спонсорованого контенту. Мода також лідирує в партнерському
маркетингу, на яку припадає 23% партнерської програми [8].

Рисунок 1.4 – Приклад модного блогу
5) Блоги про стиль життя.
Блоги про стиль життя, як і блоги про моду, охоплюють широкий
спектр тем від продуктивності до здоров’я, фізичних вправ, харчування та
інших аспектів кращого життя. Крім моди, популярний блог про стиль життя
ще й тому, що людям постійно потрібні круті, дієві та практичні поради для
гарного життя. Щоб зрозуміти, наскільки популярні блоги про стиль життя,
просто знайте, що найкращі блоги світу можуть досягти мільйона підписників,
тоді як середній блогер має близько 2000 фоловерів (рис. 1.5).
Арк.
ЧДТУ 220000.004 ПЗ 17
З м н. Арк. № докум. Підпис Дата

Рисунок 1.5 – Приклад блогу про стиль життя
6) Блоги про подорожі.
Здається, останнім часом блоги про подорожі привертають багато уваги,
тому що люди проводять багато досліджень, перш ніж приймати рішення про
подорож чи відпустку. Робота тревел-блогерів складна (хоча спочатку це може
здатися веселою та легкою), тому що вони годинами досліджують, знаходять
різні туристичні напрямки за найкращими цінами, складають маршрути,
вивчають культуру країни та обмінюються інформацією з своїми читачами
(рис. 1.6).

Рисунок 1.6 – Приклад блогу про подорожі
Незважаючи на те, що це може здатися роботою мрії, слід пам’ятати, що
створення контенту займає багато роботи та часу від годин до днів. Чи варто
Арк.
ЧДТУ 220000.004 ПЗ 18
З м н. Арк. № докум. Підпис Дата

вести трепел-блог? Статистика свідчить, що 80% людей використовують
туристичні блоги для планування своїх поїздок, тому це є вагомою причиною,
чому туристичні блоги настільки популярні.
7) Фуд-блоги.
Ніхто не може жити без їжі, тому не дивно, що їжа є однією з
найпопулярніших тематик блогів у світі. Насправді,
урізноманітнювати харчування, готувати здорову їжу та купувати інгредієнти є
частиною нашого щоденного розпорядку, хочемо ми цього чи ні. Фуд-блогери
знайшли можливість у цій постійній потребі і перетворили її на бізнес, який
виявився ефективним способом монетизації свого хобі (рис. 1.7).

Рисунок 1.7 – Приклад українського фуд-блогу Є.Клопотенка
Якщо ви любите готувати кожен день і думаєте, що можете поділитися
цікавими речами з гурманами, врахуйте це для своїх майбутніх планів, тому
що успішні фуд-блогери мають у чотири рази більше фоловерів, ніж будь-яка
інша галузь.
8) Партнерські/оглядові блоги.
Ці типи блогів зосереджені на огляді продуктів або послуг на певному
ринку. Це може бути ніша ринку (наприклад, обладнання для кемпінгу) або
більш широкий ринок (наприклад, технології). Власники цих блогів вибирають
різноманітні продукти та визначають їх переваги та недоліки, ціни та загальні
Арк.
ЧДТУ 220000.004 ПЗ 19
З м н. Арк. № докум. Підпис Дата

витрати. Вони також дають рекомендації на основі свого досвіду в цій галузі
(рис. 1.8).

Рисунок 1.8 – Приклад оглядового блогу в сфері управління проектами
Ці типи блогів заробляють гроші завдяки партнерському маркетингу та
партнерству з різними брендами. Якщо блог досить великий, бренди будуть
платити за перегляд і оцінку їх продукції. Потрібна наполеглива робота,
терпіння та час, щоб підтримувати такий блог у найкращому вигляді, тому
можуть знадобитися роки, щоб охопити аудиторію, яка залучає спонсоровану
рекламу.
9) Мультимедійні блоги.
Мультимедійні блоги досягли значної популярності за останні 10 років,
оскільки візуальний контент набирає популярності серед читачів. Сьогодні
відеоблоги, подкасти та візуальні історії популярні, і багато людей переходять
на цей тип контенту для розваг, новин, освіти та інформації (рис. 1.9).
Автори таких блогів використовують класичний формат блогу, але
публікують мультимедіа замість письмових дописів. Дослідження Venngage
передбачало, що до 2021 року від 51% до 80% компаній використовуватимуть
маркетинг візуального контенту [9], в чому ми можемо переконатися на власні
очі, споглядаючи контент в Інтернеті.
Арк.
ЧДТУ 220000.004 ПЗ 20
З м н. Арк. № докум. Підпис Дата

Рисунок 1.9 – Приклад мультимедійного блогу
10) Новинні блоги.
Ці типи блогів інформують читачів про останні події в певній галузі. В
основному вони зосереджені на презентації останніх подій, нових релізів,
планів та ідей, які були або втілюються в конкретній сфері інтересів. На
відміну від інших типів блогів, блоги новин, як правило, не публікують думки
чи контент, орієнтований на людину (наприклад, блоги про стиль життя чи
моду) (рис. 1.10).

Рисунок 1.10 – Приклад блогу українських новин
Арк.
ЧДТУ 220000.004 ПЗ 21
З м н. Арк. № докум. Підпис Дата

Вміст, який підписники читають в новинних блогах, зосереджено на
інформуванні читачів, а не на їх розважанні, шляхом написання особистих
історій і тем, які передбачають суб’єктивність.
1.4 Висновки до розділу 1
Колись блоги використовувалися в основному як онлайн-журнали або
щоденники, де блогери могли записувати свої думки та ідеї у своєму
«маленькому просторі» в Інтернеті, поки всі інші читали про них. Протягом
багатьох років еволюція зробила блоги більше, ніж просто віртуальні
щоденники. Сьогодні ведення блогів визнано одним із найефективніших
способів обміну інформацією та корисним засобом комунікації у світі, що
швидко розвивається. У деяких випадках, блогінгу – це спосіб отримати
визнання та створити репутацію в певній ніші. До речі, ведення блогів також
стало прибутковим бізнесом і зараз блогери бачать у ньому спосіб заробити
додаткові гроші або, навіть, заробити на життя. Насправді, остання причина є,
мабуть, найвагомішою причиною для багатьох людей, які хочуть створити
власний блог.
В першому розділі кваліфікаційної роботи визначено основні етапи
створення блогу та здійснено аналітичний огляд найпоширеніших типів блогів
з наведенням наочних прикладів.

Арк.
ЧДТУ 220000.004 ПЗ 22
З м н. Арк. № докум. Підпис Дата

2 ПРОЄКТУВАННЯ УНІВЕРСАЛЬНОГО БЛОГУ
2.1 Ключові принципи написання блогу
В епоху Інтернету та соціальних медіа люди використовують блоги як
ефективний спосіб привернути увагу потенційних клієнтів і журналістів.
Більшість читає про те, як ключові блоги конкурентів і провідних брендів
впливають на ринок і хочуть зробити те ж саме. Деяким брендам пощастило
мати експертів у своїх власних рядах, які можуть застосувати свій досвід і
розуміння для приваблення нових клієнтів через блоги.
Однак не всім пощастило мати когось, хто може виразити свої глибокі
знання в чіткому та привабливому стилі письма. І навіть коли вони це роблять,
їхні робочі дні зазвичай настільки зайняті, що на них просто не вистачає часу.
Натомість все більше клієнтів звертаються до фрілансерів та агентств, щоб
вони писали для них блоги.
Замовники часто мають технічний або інженерний досвід. Це світ, який
справедливо поважає науковий прогрес з точки зору надійності,
універсальності та високої продуктивності. Інженери та виробники колись
правили світом. У ХІХ-ХХ століттях основним рушієм інновацій було тверде
переконання, що «якщо ви побудуєте кращу мишоловку, світ прийде до вас». У
ХХІ столітті мало просто створити кращу мишоловку, потрібно переконати
Інтернет у своїй репутації. Зростання репутації має позитивно впливати на
продажі. За словами відомої консалтингової фірми McKinsey, ми стоїмо на
порозі золотого віку, в якому «цікава історія та наукові підходи поєднуються
захоплюючим чином». Вони кажуть, що історія, разом з наукою, змістом,
простотою та швидкістю, буде визначальною рисою успіху організації на довгі
роки. Ведення блогів є ключовим інструментом для розповіді цієї історії.
Ведення блогів – це, по суті, мистецтво розповідати переконливу історію, яку
легко використовувати в Інтернеті, щоб підвищити капітал бренду.
Арк.
ЧДТУ 220000.004 ПЗ 23
З м н. Арк. № докум. Підпис Дата

Існує багато різних підходів до ведення блогів. Інтернет рясніє
публікаціями на цю тему, кожна зі своїми порадами та підказками. Однак
найкращі, як правило, дотримуються невеликого набору вказівок щодо змісту,
стилю та форми:
 Контент – надає новий вигляд або оригінальну ідею, яка додає
цінності предмету чи темі в очах читачів. Посилання на
пов’язаний вміст із авторитетних джерел, щоб додати ваги
аргументам. Оптимізація пошукового вміст.
 Стиль – нагадує, що більшість читачів нетерплячі і читатимуть
вміст швидко. Обтяжені текстом сторінки з щільними абзацами
виглядають занадто жорстко. Речення краще робити короткими та
розмовними. Якщо можливо, уникати технічного жаргону або
пояснювати його чітко та коротко.
 Форма – містить один елемент, підтримуваний чітким потоком
думки, що відслідковується від початку до кінця.
Одразу, як буде створена найкраща «мишоловка», блог стане чудовим
інструментом для створення діалогу, налагодження відносин, завоювання
довіри та підвищення авторитету та репутації компанії. Люди купують у людей
онлайн або особисто, тому побудова стосунків є ключовою. Блоги – це вікно до
людей, які стоять за продуктами. За змістом – блог не про мишоловку, а про
зміцнення репутації бренду.
Існує багато факторів, які сприяють успішному розвитку блогу. Окрім
створення добре написаних дописів та ефективного їх просування, також
потрібно регулярно оновлювати їх, щоб максимізувати охоплення. Далі
описано ключові принципи ведення блогу, які допоможуть підтримувати та
розвивати блог:
1) Регулярність постингу. Існує приказка, що якщо робити щось протягом
тривалого часу, то все обов’язково вийде. Письмо – це специфічна діяльність,
яка виграє від постійних зусиль і постійної практики. Блоги вимагають
Арк.
ЧДТУ 220000.004 ПЗ 24
З м н. Арк. № докум. Підпис Дата

постійного потоку вмісту від своїх авторів. Блоги – це спосіб спілкуватися з
відвідувачами та клієнтами певного бренду. Постійно спілкуючись зі своєю
аудиторією, автор завойовує довіру своїх читачів. Використання слів «ти» та
«я» може завоювати цю довіру та глибше пов’язатися з аудиторією, даючи
більше шансів на конверсію.
2) Постійна видимість. Блогу потрібно приділяти багато часу та ресурсів,
щоб постійно оновлювати його контент. Блог покладається на безперервний
потік інформації, щоб залишатися актуальним. Варто підтримувати свою
видимість, постійно публікуючи новий контент. Кількість публікацій
встановлює присутність автора блогу і створює послідовність і довіру. Якщо
вести блог у стабільному і постійному темпі, це надасть можливість залучати
трафік до блогу. Використовуючи заплановану кількість публікацій,
опублікованих у певні дні тижня, можена керувати годинами постингу та
відповідати очікуванням аудиторії. Це не лише генерує трафік, а й створює
довіру. І навпаки, якщо публікації нерегулярні, вони порушують потік трафіку
і може призвести до падіння охоплень, які важко відновити.
3) Реклама. Використання контекстної чи таргетованої реклами блогу не
дасть повноцінного результату, якщо повною мірою не використовувати для
реклами багато каналів, доступних в Інтернеті. Прикладами таких каналів є
соцмережі Twitter, Linkedin, Instagram тощо. Варто подумати, яким соціальним
мережам віддає перевагу аудиторія блогу. Також потрібно враховувати, що
використовують конкуренти для реклами. Кожен канал – це можливість
змінити мету контенту блогу та побачити свою присутність на різних
платформах. Чим більше цих платформ, тим більше трафіку для блогу.
Створюючи дописи на цих платформах, завжди варто пам’ятати про посилання
на сайт блогу, щоб максимізувати весь створюваний трафік.
4) Формат контенту. Оскільки сьогодні всі користуються своїми
гаджетами, варто переконатися, що вміст блогу є мобільним і портативним.
Під мобільним мається на увазі, що вміст має бути доступним і читаним на
Арк.
ЧДТУ 220000.004 ПЗ 25
З м н. Арк. № докум. Підпис Дата

мобільних пристроях. Не варто очікувати, що аудиторія завжди буде вдома
перед комп’ютером. Швидше за все, вони перебувають на вулиці з планшетом
або смартфоном. Більшість маркетингових інструментів можуть
відформатувати вміст блогу, щоб він відповідав усім типам мобільних
пристроїв.
5) Присутність в пошукових системах. Блоги – це онлайн-інструменти.
Вони покладаються на вбудовані ключові слова для пошуку та релевантності.
Досягнення рейтингу SEO означає, що блог має хороший контент, який містить
ключові слова, щоб полегшити пошук публікації в мережі Інтернет. Перш ніж
писати свою публікацію в блозі, варто дослідити найважливіші ключові слова.
В Інтернеті є кілька інструментів пошуку ключових слів, за допомогою яких
вводяться ключові слова, що відповідають темі публікації. Ці інструменти
надають список подібних фраз для пошуку, які є популярними. Включення
результатів пошуку до вмісту публікації в блозі призведе до кращих
результатів пошуку і, відповідно, підніме публікацію в пошуковому рейтингу.
Описані вище принципи можуть не є основним підходом до написання,
форматування та просування вмісту блогу, але є ключовими для розробки
блогу.
2.2 Правила ефективного дизайну блогу
Перше, що помічають користувачі при відвідинах будь-якого сайту – це
дизайн. Кольори, які вони бачать, анімація, яка привертає увагу, і зображення,
які викликають цікавість. Тільки після цього вони читають фактичний вміст
сторінки. Ці перші кілька секунд оцінки аудиторії веб-сторінки можуть
визначити хід взаємодії. Для цього потрібне складне планування та розуміння,
що «зачепить» відвідувача тієї чи іншої сторінки.
Сьогодні ведення блогів є важливою частиною будь-якої галузі та
цифрового бізнесу. Незалежно від того, чи це ексклюзивна точка продажу, чи
використовується вона для маркетингових стратегій, дизайн повинен бути
привабливим. Зміст блогу завжди важливіший за дизайн, але спочатку
Арк.
ЧДТУ 220000.004 ПЗ 26
З м н. Арк. № докум. Підпис Дата

потрібно зацікавити людей своїм дизайном. Найкраще – це залучати їх за
допомогою дизайну та підтримки контенту.
Кілька правил ефективного залучення аудиторії до блогу:
 Функціональність важливіша за естетику. 76% користувачів хочуть,
щоб їм було легко знайти те, що вони шукають [10]. Потрібно мати на увазі,
що люди проводять більшу частину свого часу на інших веб-сайтах, і
прототипи веб-сайтів майже завжди оцінюються як найкращі. Варто уникати
абсолютно нових і ніколи не бачених макетів, краще використовувати макети,
які зарекомендували себе на інших блогах. Пошук має вирішальне значення
для того, щоб користувачі поверталися в блог. Для цього потрібно
переконатися, що поле пошуку добре видно (угорі сторінки), має принаймні 27
символів завширшки і що такий пошук дійсно може дати потрібну інформацію
на запит користувачів.
 Вершина ідеальності – в простоті. Пробіли, кнопки та інші візуальні
елементи дизайну допомагають підкреслити зображення та вміст і не
захаращують макет. Білий простір, також відомий як негативний простір, є
важливим аспектом будь-якого цілеспрямованого дизайну. Без цього
публікації можуть стати розмитими. Не варто заповнювати всі можливі місця
банерами, повідомленнями чи чимось іншим. Чим більше простору, тим легше
споживати отриману інформацію.
 «Правило третин» зробить блог приємнішим. Не варто публікувати
дописи в блозі без зображення. Візуальне зображення передає ідеї набагато
швидше, ніж будь-який текст. Найкращі малюнки дотримуються правила
третин: малюнок потрібно розділити на дев’ять рівних частин двома
рівновіддаленими горизонтальними лініями і двома рівновіддаленими
вертикальними лініями, а важливі композиції розташувати вздовж цих ліній
або на їх перетині.
 Чіткість і конкретність. Зміст і чіткість є важливими частинами
дизайну. Що це за місце? Що я можу тут зробити? Чим це корисно? Відповіді
Арк.
ЧДТУ 220000.004 ПЗ 27
З м н. Арк. № докум. Підпис Дата

на ці запитання мають отримати користувачі протягом перших кількох секунд.
Переконайтеся, що ви можете чітко розуміти, про що ваш блог і для кого він
призначений, незалежно від того, який сайт відвідують користувачі. Чим
краще ви спілкуєтеся зі своїм читачем і своїм блогом, тим більше шансів
залишитися. Користувачі мають побачити назву блогу у верхньому лівому
куті. Корисні посилання – в порядку зліва направо. Саме тут потрібно
розмістити найважливішу інформацію.
Контент має бути логічним, плавним і вписуватися в ієрархію. Контент
повинен привести аудиторію до неминучого висновку, причому кожен
фрагмент ґрунтується на тому, що було до нього. Кожне речення має
пропонувати більше ясності щодо бренду та мети, щоб читачі читали в
очікуванні того, що має статися далі.
Теги заголовків слід використовувати для структурування вмісту та
допомоги веб-сканерам ранжувати сайт за пошуковими запитами. Якщо немає
всього готового вмісту на початку, можна, принаймні, використати заголовки,
щоб сформулювати те, про що буде блог.
Візуальні елементи також повинні бути організовані. Необхідно чітко
визначити розділи із зображеннями, що доповнюють письмовий зміст.
 Текст. Текст у блозі має бути красивим і легким для читання. Краще
використовувати великі шрифти (мінімум 14 пікселів), короткі рядки і багато
пробілів. Новий абзац через кожні 3-4 рядки. Підзаголовок через кожні 2-3
абзаци. Найкраща типографіка блогу надає вмісту значущу мету, викликаючи
емоції у читачів. Крім вибору красивого веб-шрифту, варто переконатися, що
різні текстові елементи виглядають і відчуваються по-різному (основні
заголовки, підзаголовки, звичайний текст, курсив, лапки, списки тощо).
 Запрошення на повторне відвідування. Більше 95% людей нічого не
купують під час першого відвідування. Тож не потрібно намагатися щось
продати відвідувачам, які вперше зайшли. Натомість варто спробувати змусити
Арк.
ЧДТУ 220000.004 ПЗ 28
З м н. Арк. № докум. Підпис Дата

їх повернутися, щоб налагодити стосунки та додати цінності ще до того, як
зробити їм пропозицію. Варіанти як це зробити:
 Запропонувати їм підписатися на RSS-канал (із вказівкою, скільки
людей це вже зробили – соціальний доказ).
 Запропонувати їм зареєструватися у списку розсилки.
 Запропонувати підписатися на публікації блогу електронною
поштою.
 Підписка на блог у Twitter, Facebook чи інших соцмережах.
 Використання зручних реєстраційних форм. Найкращі форми
реєстрації:
 розмістіть мітки форми над полем введення (не поруч один з
одним);
 надати чіткі причини для дій;
 кнопка "Надіслати" має показати, що буде далі;
 запитуйте якомога менше даних – у більшості випадків достатньо
адреси електронної пошти.
Чим більше полів люди мають заповнити, тим менше людей це робить.
Персоналізація електронних листів за іменем все ще не працює добре, тому,
можливо, не варто питати про це. Чому заповнення форм діє ефективно?
Форма містить саме те, що користувачі шукають у Google, щоб потрапити на
сайт. Якщо ви запропонуєте людям те, що вони хочуть, вони будуть раді
зареєструватися.
 За можливості, використання текстових логотипів. Не потрібно
наймати досвідченого дизайнера і платити великі гроші за свій логотип.
Можна створити красивий логотип з текстом. Для цього потрібно просто
вибрати гарний шрифт і колір фону.
 Ретельний підхід до вибору стокових зображень. Стокові фотографії
здаються гарною ідеєю, але 90% з них абсолютно неправильні та банальні.
Однозначно, краще використовувати власне фото, а не сток, адже унікальність
Арк.
ЧДТУ 220000.004 ПЗ 29
З м н. Арк. № докум. Підпис Дата

краще ранжується пошуковими системами. Не можете визначитися з
кольоровою гамою? Скажімо, вам подобається червоний, але ви не можете
вирішити, які ще кольори поєднуються з вашим улюбленим червоним. Не
потрібно гадати чи питати друзів. Для цього можна скористатися онлайн-
інструментами підбору кольорів: Adobe Kuler, Aviary Color Swatches або
Colorexplorer.
 Кольорова гамма. Вибрана палітра для дизайну блогу говорить багато
про що. Вона може бути грайливою, як для компанії з виробництва іграшок,
або більш серйозною для веб-сайту, що пропонує фінансові послуги.
Кольорова гамма може значною мірою відображати дух і посил бренду. Варто
вибирати кольори, які виражають індивідуальність бренду (корпоративні
коьори) і, головне, полегшують читання вмісту. Тому варто завжди перевіряти
поєднання кольорів за допомогою засобу перевірки контрастності кольорів,
щоб забезпечити читабельність.
 Редизайн лише в разі необхідності. Його слід міняти лише в тому
випадку, якщо це дійсно необхідно. Що у вас сьогодні не працює? Спочатку
мета, а далі редизайн. Чи допоможе новий дизайн отримати більше кліків
оголошень? Збільшити кількість переглядів сторінок чи реєстрацій? В ідеалі
блог – це живий, дихаючий організм, який постійно розвивається. Варто
постійно тестувати ключові сторінки блогу та елементи дизайну і, відповідно,
оцінювати покращення.
Якщо використовувати описані вище правила застосування дизайну у
блозі, незабаром можна побачити збільшення трафіку та конверсій.
Відстеження тенденцій – це те, як аудиторія сприймає те, що викладається в
блозі. Зосередьтеся на SEO, дизайні та, головне, чудовому контенті, щоб не
відставати.
2.3 Основні етапи розробки універсального блогу
Хороша новина полягає в тому, що Інтернет швидко розвивається. На
2022 рік кількість людей в Інтернеті більша, ніж будь-коли. Це стрімке
Арк.
ЧДТУ 220000.004 ПЗ 30
З м н. Арк. № докум. Підпис Дата

зростання означає більше потенційних читачів для певного блогу. Це означає,
що для створення блогу, немає кращого часу, ніж зараз.
Розглянемо декілька ключових етапів розробки універсального блогу.
Етап 1. Вибір назви блогу.
Перш ніж створити успішний блог, потрібно вибрати доменне ім’я – і
знайти місце для його розміщення. Доменне ім’я – це те, що користувачі
вводять в адресний рядок, щоб перейти на веб-сайт. Це домашня база для
всього бренду. Найкращі доменні імена не є смішними чи кричущими; це
доменні імена, які люди можуть легко запам’ятати. Хороші доменні імена
також допомагають Google знати, про що йдеться у блозі.
Хороша назва блогу має бути описовою, щоб потенційні відвідувачі
могли відразу зрозуміти, про що цей блог, лише з назви. Якщо блог на певну
тему, варто згадати це при виборі доменного імені. Краще не зосереджуватися
лише на одному слові. Наприклад, у кулінарному блозі не обов’язково містити
слово «кулінарія». Слова «рецепти» та «їжа» також дають людям зрозуміти, що
блог присвячений кулінарії.
Етап 2. Вибір веб-хостингу.
Веб-хостинг – це компанія, яка пропонує простір на сервері, щоб
зробити веб-сайти або блоги своїх клієнтів доступними в Інтернеті. Іншими
словами, вони забезпечують простір, який ви займатимете у всесвітній мережі.
Існує багато причин, чому варто вибрати власний хостинг замість
безкоштовного хостингу. При виборі платного веб-хостингу, ви маєте перевагу
мати власне доменне ім’я та мати повний контроль над блогом, від його
зовнішнього вигляду до проблем безпеки та резервного копіювання.
Багато провайдерів веб-хостингу мають різні тарифи та ціни з
відповідними функціями. Вибираючи послугу веб-хостингу, варто звернути
увагу на наступне:
 Обсяг веб-простору. Звісно, блог буде розвиватися в майбутньому,
тому слід розглянути веб-хостинг, який пропонує більш ніж достатньо місця
Арк.
ЧДТУ 220000.004 ПЗ 31
З м н. Арк. № докум. Підпис Дата

для зберігання. Також потрібно розглянути вміст, який планується
публікуватись у блозі. Якщо він багатий на медіа (зображення, відео, аудіо), то
однозначно потрібно більше місця в Інтернеті.
 Вартість та спосіб оплати. В першу чергу тут потрібно визначитись
з ціною за хостинг. Це точка порівняння для багатьох початківців блогерів,
коли порівнюють плату від різних провайдерів веб-хостингу. Деякі провайдери
стягують щомісячну плату, а інші надають можливість своїм клієнтам платити
щорічно. Це, в свою чергу, залежить від готовності та спроможності власника
блогу платити.
 Налаштування та наявність інструментів. Веб-хост повинен
надавати певний рівень контролю над тим, як повинен розміщуватися та
функціонувати блог. Тут варто порівняти різні плани та подивиться, які
інструменти та функції потрібні для налаштування й керування блогом.
 Заходи безпеки, час роботи та швидкість доступу. Належну увагу
слід приділити захисту розміщуваних на хостингу блогів. Якщо блог
завантажується дуже довго, читачі можуть «переїхати» в інше місце.
Етап 3. Вибір платформи для функціонування блогу.
Перш ніж почати створення блогу, потрібно вибрати, де будуть
розміщуватися дописи, тобто, де буде базуватись блог. Можливо варто писати
на зовнішній платформі, наприклад, Medium? Можливо варто вибрати проект з
відкритим кодом, наприклад, WordPress? Або варто створити власну
платформу? Всі три варіанти мають плюси і мінуси.
 Використання зовнішньої платформи.
Medium – це чудова платформа, де багато людей пишуть дивовижні
речі. На цій платформі не потрібно нічого налаштовувати, і можна почати
роботу відразу. Також тут є доступ до тисяч потенційних читачів, які вже
користуються платформою.
Все здається простим, але відсутність конфігурації також означає
відсутність можливості налаштувати блог. Якщо є бажання інтегруватися зі
Арк.
ЧДТУ 220000.004 ПЗ 32
З м н. Арк. № докум. Підпис Дата

StackBlitz або GitHub, то цього зробити не вийде. Інша річ, про яку слід
пам’ятати, що читачі блогу – це читачі платформи. Вони приходять, щоб
прочитати дописи блогу, але віддають свої гроші Medium, а це означає, що
блог працюєте (майже) безкоштовно. Останнє, що стосується Medium, і не в
останню чергу, це те, що це не власний сайт. Це означає, що якщо в якийсь
момент Medium вирішить вигнати власника блогу зі своєї платформи (це
сталося з деякими людьми), то власник блогу втратить все – просту у
використанні платформу, тисячі читачів тощо.
 Використання платформи з відкритим кодом.
Використання платфоми з відкритим кодом часто є хорошим вибором,
оскільки сучасні рішення досить прості у використанні, навіть якщо вони
вимагають кількох конфігурацій. Розглянемо лише про WordPress та Ghost,
оскільки перша є найбільш використовуваною платформою, а Ghost —
аутсайдер, який постійно використовує цю платформу.
З WordPress, Ghost або іншими проектами з відкритим кодом ваші дані є
вашими. Звичайно, у вас немає середньої аудиторії, і вам доведеться
наполегливо попрацювати, щоб створити власну спільноту, але замість цього
ваші читачі будуть вашими користувачами, і ваш бізнес не залежатиме від
третьої сторони.
Ваш вибір платформи з відкритим кодом повинен залежати від того, що
ви дійсно хочете робити. WordPress був створений для блогерів, але
розвинувся так, що тепер його використовують для створення будь-якого
сайту, що робить його очевидним вибором, якщо ви хочете вести більше, ніж
просто блог. Його можна значно розширити завдяки системі плагінів. Однак,
якщо створювати просто блог, то варто спробувати Ghost. Він може зробити
тільки одне, але робить це добре. У ньому є все необхідне для ведення блогів,
включаючи красивий і потужний редактор, соціальні та SEO-функції, а також
швидкість і потужність.
 Створення платформи «з нуля».
Арк.
ЧДТУ 220000.004 ПЗ 33
З м н. Арк. № докум. Підпис Дата

Це рішення підходить лише для людей, які точно знають, чим хочуть
займатися, і мають час. Створення платформи справді займає багато часу, тому
що потрібно не лише створювати контент і будувати свою спільноту, але й
відповідати за програмування сайту, на якій користувачі читатимуть контент.
Однак створений веб-сайт працюватиме саме так, як ви хочете. Ви маєте
повний контроль над вмістом, тим, як він відображається та яким чином ви
отримуєте доступ до вмісту. Крім того, ваш веб-сайт буде вашим побічним
проектом. Ви дізнаєтеся багато нового і виростите як розробник. Це справжня
перевага для створення вашої власної платформи, оскільки це дає вам
впевненість в тому, що блог буде розвиватись за задумом власника блогу.
Якщо створення платформи здається занадто трудомістким, існує
варіант змішати та поєднати вищевказані варіанти. Наприклад:
 щоб управляти своїми даними, використати проект з відкритим
кодом;
 а щоб створити власну платформу, виберіть програму інтерфейсу,
яка працює з API проектом з відкритим кодом (або шаблоном
WordPress/Ghost).
Гібридизація різних підходів може мати багато переваг.
2.4 Висновки до розділу 2
Наявність привабливого та цікавого сайту є метою кожного власника
особистого блогу, а для людей, які керують малим бізнесом, зовнішній вигляд
блогу є життєво важливим. Саме тут відвідувачі справляють своє перше
враження – ті короткі секунди, за які вони приймають або відкидають те, що
бачать на своїх екранах. Дизайн блогу також відповідає за утримання уваги
кожного відвідувача та спрямування його через його вміст.
В другому розділі описано ключові принципи розробки універсального
блогу, які допоможуть керуватися під час вибору того, як представляти бренд
в Інтернеті.
Арк.
ЧДТУ 220000.004 ПЗ 34
З м н. Арк. № докум. Підпис Дата

3 РОЗРОБКА УНІВЕРСАЛЬНОГО БЛОГУ
3.1 Вибір засобів розробки універсального блогу
Перш ніж розпочати розробку блогу, потрібно вирішити, чи має
майбутнє рішення базуватися на CMS чи фреймворку – двох
найпопулярніших способів створення веб-розробок. Цей вибір має значний
вплив на подальший процес розробки та кінцевий продукт. Він визначає,
скільки часу знадобиться розробникам, щоб завершити роботу, який бюджет
вони витратять, а також які функції та можливості матиме веб-рішення. Тому
дуже важливо зрозуміти, чим відрізняються ці варіанти і які наслідки кожного
з них будуть впливати на роботу кінцевого продукту.
По суті, CMS (або система управління контентом) – це тип
програмного забезпечення, що дозволяє користувачам створювати веб-
рішення з використанням набору готових будівельних блоків і керувати
цифровим контентом через стандартну панель адміністратора. WordPress,
Drupal і Joomla є найпопулярнішими прикладами CMS. Для створення веб-
додатків за допомогою системи керування вмістом користувачам необхідно
завантажити програмне забезпечення та адаптувати його до потреб свого
бізнесу.
З іншого боку, фреймворк — це набір готових фрагментів коду для
повторного використання, які охоплюють деякі загальні функції.
Використання платформи допомагає розробникам програмного забезпечення
заощадити час на виконання типових завдань програмування, оскільки їм не
потрібно створювати всю функціональність з нуля. Сьогодні існує безліч веб-
фреймворків, написаних різними мовами програмування.
Загалом розробку веб-продуктів на основі CMS можна порівняти зі
складанням меблів з кількох збірних деталей. З іншого боку, створення веб-
рішень з використанням фреймворку – це все одно, що замовляти окремі
елементи відповідно до ваших конкретних потреб. В останньому випадку
столяри використовують трохи деревини від виробника замість того, щоб
Арк.
ЧДТУ 220000.004 ПЗ 35
З м н. Арк. № докум. Підпис Дата

виготовляти її з сирих колод. Але ви все одно отримуєте предмет меблів на
замовлення.
Важливо базове розуміння того, чим системи керування вмістом
відрізняються від фреймворків веб-розробки. Але для багатьох підприємців
набагато важливіше знати, як ця різниця впливає на процес розробки та
основні властивості веб-рішення. Отже, давайте розглянемо основні аспекти,
які потрібно враховувати, вибираючи між веб-фреймворком і розробкою CMS:
 Гнучкість. Рішення на основі CMS мають деякі стандартні функції,
які можна налаштувати та розширити за допомогою різних доповнень.
Наприклад, офіційний каталог плагінів WordPress пропонує понад 58 000
плагінів, які користувачі можуть встановити на додаток до основної
функціональності. Однак кількість можливих модифікацій завжди обмежена
наявними можливостями CMS. Це означає, що можна створити робочий веб-
продукт за допомогою CMS, але можна лише до певної міри налаштувати його
відповідно до потреб.
Якщо створювати веб-продукт на основі фреймворку, можна вбудувати
в нього будь-які функції. Хоча розробники використовують деякі готові
фрагменти коду, вони можуть змінювати їх за потреби без будь-яких
обмежень. Крім того, фреймворк є лише основою для веб-продукту. Щоб
створити деякі унікальні функції, програмісти пишуть абсолютно новий
користувацький код. Тому потрібно визначити вимоги до якості та кількості
функцій, ступеня масштабованості продукту та сторонньої інтеграції.
 Безпека – це ще один критерій, який слід враховувати при виборі
CMS або фреймворк веб-розробки для свого проекту. Веб-рішення на основі
CMS є більш вразливими до кібератак і піддаються підвищеному ризику
витоку даних. Причина цього в тому, що багато популярних систем керування
вмістом мають відкритий код, а це означає, що їх код є загальнодоступним.
Звичайно, хакерам легше отримати доступ до рішення, якщо вони знають, як
Арк.
ЧДТУ 220000.004 ПЗ 36
З м н. Арк. № докум. Підпис Дата

воно побудоване. Розширення або оновлення, завантажені з ненадійних
джерел, також можуть поставити під загрозу рівень безпеки.
Веб-продукти на основі фреймворку складніше атакувати, оскільки
третім сторонам важче знайти діри в безпеці. Крім того, більшість сучасних
фреймворків надають набір вбудованих функцій безпеки, які захищають
рішення від найпоширеніших кіберзагроз.
 Час розробки та бюджет. Створення веб-рішення на основі CMS
дешевше і займає менше часу, ніж розробка на замовлення. Процес
встановлення CMS зазвичай такий же простий, як і встановлення звичайних
веб-додатків. Навіть можна створити та налаштувати базовий веб-сайт за
лічені дні. Оскільки більшість CMS орієнтовані на нетехнічних людей, багато
завдань на етапі розробки та обслуговування можна виконувати без залучення
програмістів.
Використання фреймворків для веб-проекту завжди вимагає широких
знань із програмування та міцних навичок програмування. Крім того, такий
тип розробки досить тривалий. Хоча ІТ-команда може використовувати деякі
заздалегідь створені функції, розробникам доводиться виконувати багато
роботи самостійно. Збільшення часу розробки, природно, призводить до
вищих витрат на розробку. Через це веб-проекти на основі фреймворків
набагато дорожчі, ніж проекти на основі CMS. Оновлення (тобто додавання
нових функцій) та підтримка таких продуктів також вимагає більше
фінансових ресурсів.
 Управління контентом. CMS надає стандартні функції керування
вмістом. Ці системи мають готову до використання панель адміністратора, яка
дозволяє користувачам легко змінювати інформацію на веб-сайті. Додавання,
видалення та редагування вмісту зазвичай не є проблемою навіть для новачків.
Фреймворки не дозволяють користувачам керувати вмістом – вони
допомагають розробникам створювати рішення (наприклад, спеціальні панелі
адміністратора), які можуть містити функції керування вмістом. Доклавши
Арк.
ЧДТУ 220000.004 ПЗ 37
З м н. Арк. № докум. Підпис Дата

розумних зусиль, можна створити спеціальну панель адміністратора, яка буде
так само зручна, як стандартна CMS або навіть краща. Крім того, контент-
менеджери можуть редагувати інформацію про веб-сайти на основі
фреймворків, вносячи зміни безпосередньо у файли сайту. Однак цей варіант
вимагає хороших знань з програмування, тому він не підходить, якщо
потрібно запустити веб-сайт із інтенсивним вмістом.
Обидва методи створення веб-додатків мають свої переваги і недоліки.
При виборі CMS, створення веб-рішення буде коштувати менше часу та
грошей, але веб-додатки будуть обмежені функціями CMS. Тим часом за
допомогою розробки на основі фреймворків можна створити
багатофункціональне рішення, яке точно відповідатиме потребам
розроблюваного веб-додатку. Але вартість проекту буде значно вищою, а на
запуск кінцевого продукту програмістам знадобиться більше часу.
3.2 Фреймворк Next.JS для розробки блогу
3.2.1 Особливості Next.JS
Next.js – це фреймворк React для розробки односторінкових програм
JavaScript. Технологічні рішення відіграють важливу роль у створенні
потужних, масштабованих та успішних додатків. Вибір Next.js для розробки
блогу обумовлений кількома причинами, в основному з точки зору швидкості
та продуктивності.
Компоненти React, які складають частину веб-сайту на стороні
користувача, спочатку відображаються на стороні сервера (SSR). Це означає,
що після відправлення HTML-коду клієнту (браузеру користувача), нічого
іншого не повинно відбуватися, щоб користувач міг прочитати вміст сторінки.
Це значно прискорює завантаження сторінки для користувача.
SSR також дає переваги попередньо створеного веб-сайту, який можна
індексувати та сканувати, що важливо для пошукової оптимізації (SEO),
Арк.
ЧДТУ 220000.004 ПЗ 38
З м н. Арк. № докум. Підпис Дата

оскільки для відображення вмісту сторінки не потрібен JavaScript на стороні
клієнта.
Відтворення тих самих компонентів на стороні сервера, що й на стороні
клієнта (універсальний рендеринг) означає, що час розробки скорочується,
оскільки можна створити компоненти React один раз, а Next.js подбає про все,
що стосується відтворення цих компонентів у користувачів. Розробники
можуть просто зосередитися на створенні компонентів і не турбуватися про
середовище, в якому компонент буде відтворено.
Next.js достатньо розумний, щоб завантажувати лише JavaScript і CSS,
необхідні для кожної сторінки. Це значно прискорює завантаження сторінки,
оскільки браузер користувача не повинен завантажувати JavaScript і CSS, які
йому не потрібні для певної сторінки, яку переглядає користувач. Це збільшує
продуктивність, оскільки браузер користувача може завантажувати менше, а
користувач отримує вигоду від швидшого перегляду вмісту сторінки.
HMR (гаряча заміна модуля) дозволяє розробникам бачити всі зміни,
які вони внесли під час розробки, у реальному часі в програмі. Однак, на
відміну від традиційних методів «перезапуску в реальному часі»,
перезапускаються лише ті модулі, які фактично змінилися, зберігаючи стан, у
якому перебувала програма, і час, необхідний для перегляду змін у дії, значно
скорочується. Зрештою, позитивним ефектом використання Next.js є те, що
розробнику потрібно менше часу на розробку.
Отже, найважливіші переваги Next.js:
 покращений процес розробки = переваги для кінцевого
користувача;
 покращена продуктивність = швидші додатки;
 покращене SEO = більше SEO-дружніх індексованих програм.
3.2.2 Налаштування Next.JS
Перш, ніж почати розробку блогу, необхідно встановити Node.js на
комп’ютері. Next.js працює з Node.js версії 10.13 або вище.
Арк.
ЧДТУ 220000.004 ПЗ 39
З м н. Арк. № докум. Підпис Дата

Інсталяція Node.js постачається з npx запущеними пакетами npm. Щоб
створити нову програму Next.js, потрібно виконати таку команду на своєму
терміналі:

Це має створити нову програму Next.js у каталозі під назвою nextjs-
mdx-blog. Щоб побачити, як виглядає програма Next.js у браузері, необхідно
перейти до каталогу, який був щойно створений, і виконати таку команду:

Сервером розробки за замовчуванням є http://localhost:3000.
Відповідно, коли відкриваєтся URL-адреса у браузері, з’являється вікно
наступного вигляду (рис. 3.1).

Рисунок 3.1 – Початкова сторінка Next.js
Коли програма успішно створена, можна відкрити каталог nextjs-mdx-
blog у IDE або редакторі та подивитися на згенеровані файли та структуру
папок (рис. 3.2).
Арк.
ЧДТУ 220000.004 ПЗ 40
З м н. Арк. № докум. Підпис Дата

Рисунок 3.2 – Каталог Next.js
Каталог .next створюється, коли запускається сервер розробки за
допомогою команди npm run dev. Він містить кеш програми, сервер і статичні
файли.
Каталог сторінок містить різні сторінки програми. Файл index.js у
ньому – це сторінка за замовчуванням, яку видно при переході на базову URL-
адресу: http://localhost:3000. Щоб додати нову сторінку, потрібно створити
файл у каталозі сторінок. Наприклад, якщо створюється файл під назвою
contact у каталозі сайту, то можна отримати до нього доступ у браузері,
перейшовши за адресою http://localhost:3000/contact. Також можна створювати
папки всередині каталогу сайту так само, як і для API. Каталог api є каталогом
за замовчуванням для розміщення файлів API, а файл _app.js містить макет
програми, яка в даному випадку є створеним блогом.
Усі статичні файли, такі як зображення, зберігаються у
загальнодоступному каталозі. Зараз там знаходяться файли favicon.ico та
vercel.svg. Для розроблюваного блогу розміщуються всі зображення з
Арк.
ЧДТУ 220000.004 ПЗ 41
З м н. Арк. № докум. Підпис Дата

публікацій у загальнодоступному каталозі. URL-адреса файлів у
загальнодоступному каталозі у цьому
випадку http://localhost:3000/favicon.ico або http://localhost:3000/vercel.svg.
Всередині каталогу стилів знаходяться файли стилів за замовчуванням,
globals.css і home.module.css.
Можна додати спеціальні конфігурації для блогу на Next.js до файлу
next.config.js. Наприклад, щоб Next.js не обслуговував файли в каталозі /pages
як сторінки сайту, можна вимкнути маршрутизацію файлової системи за
замовчуванням, додавши таку пару ключ-значення до об’єкта конфігурації, а
потім перезапустити сервер розробника:

3.2.3 Розробка універсального блогу
В кваліфікаційній роботі створюється блог на Next.js, який підтримує
двох або більше авторів. Кожен допис приписується автору та відображати
його ім’я та зображення разом із публікаціями. Кожен автор також матиме
сторінку профілю з переліком усіх опублікованих ним публікацій.
Щоб потрапити в блог, потрібна навігація. Можна додати ці сторінки
до /_app.js до того, як сторінки будуть створені:
Арк.
ЧДТУ 220000.004 ПЗ 42
З м н. Арк. № докум. Підпис Дата

Далі додаються відсутні сторінки до точок навігації. Спочатку додам
кілька публікацій, щоб було над чим попрацювати на сторінці огляду блогу.
Щоб вміст був окремо від коду, дописи розміщуються в каталозі під
назвою _posts/. Для зручності написання та редагування створюється кожен
допис як файл Markdown. Наприклад, файл _posts/hello-world.md буде
доступний у розділі /posts/hello-world.
Деякі відомості, такі як повна назва та короткий уривок допису,
розміщені на початку файлу.

Далі додам ще кілька файлів, щоб він не був пустим:
Арк.
ЧДТУ 220000.004 ПЗ 43
З м н. Арк. № докум. Підпис Дата

Тепер, коли є кілька публікацій, потрібен спосіб опублікувати їх у
блозі. Почну з додавання сторінки зі списком їх усіх, яка буде служити
індексом блогу.
У Next.js файл, створений за адресою pages/posts/index.js, буде
доступний як /posts на сайті. Файл повинен експортувати функцію, яка
служить тілом цієї сторінки. Його перша версія виглядає приблизно так:

Після цього можна перейти до https://localhost:3000/posts, але
відображатиметься лише назва (рис. 3.3).

Рисунок 3.3 – Візуалізація головної сторінки блогу
Арк.
ЧДТУ 220000.004 ПЗ 44
З м н. Арк. № докум. Підпис Дата

Тепер потрібен спосіб розмістити тут дописи. Next.js використовує
функцію getStaticProps() для передачі даних компоненту сторінки.
За допомогою getStaticProps() передається повідомлення компоненту,
яка називається posts. На цьому першому кроці ми жорстко кодуємо дві
публікації-заповнювачі. Виходячи з цього методу, ми визначаємо, в якому
форматі ми хочемо отримувати реальні повідомлення пізніше. Якщо
допоміжна функція повертає його в цьому форматі, ми можемо
переключитися на нього, не змінюючи компонент.
Огляд публікацій не показує повний текст публікацій. Для цієї сторінки
достатньо назви, уривка, постійного посилання та дати кожної публікації:

Далі потрібно включити назву, дату створення, уривок та посилання на
публікацію. Поки що це посилання нікуди не приведе:
Арк.
ЧДТУ 220000.004 ПЗ 45
З м н. Арк. № докум. Підпис Дата

Після перезавантаження сторінки у веб-переглядачі вона тепер показує
ці дві публікації (рис. 3.4).

Рисунок 3.4 – Візуалізація сторінки «Публікації».
Прочитати файли в каталозі _posts/ можна за допомогою функції
getStaticProps(). Оскільки ця функція виконується на стороні сервера, а не на
Арк.
ЧДТУ 220000.004 ПЗ 46
З м н. Арк. № докум. Підпис Дата

стороні клієнта, то, відповідно, є доступ до рідних модулів Node.js, таких як fs.
Можна читати, конвертувати та навіть маніпулювати локальними файлами в
тому самому файлі, де зберігається компонент сторінки.
Щоб файл був коротким і зосередженим на одному завданні, ця функція
переміщується в окремий файл. Тому компонент post має лише відображати
дані, а не читати їх. Це додає деяку роздільність та організованість
розроблюваному проекту.
Функції, які зчитують дані, упаковуються у файл під назвою lib/api.js.
Цей файл містить усі функції, які фіксують вміст для компонентів, які його
відображають.
Для сторінки огляду потрібна функція, яка читає, обробляє та повертає
всі повідомлення. Вона називається getAllPosts(). У ній спочатку створюється
шлях до каталогу _posts/ за допомогою path.join(). Потім використовується
fs.readdirSync() для читання цього каталогу, який видає імена всіх файлів у
ньому. Коли відображаються ці імена, то читається кожен файл по черзі:

Після прочитання файлу отримуємо його вміст у вигляді одного довгого
рядка. Щоб відокремити основну частину від тексту публікації, цей рядок
запускається через gray-matter. Також зафіксуємо слаги кожної публікації,
видаливши .md з кінця назви файлу. Нам потрібен цей контрольний список,
щоб створити URL-адресу, за якою публікація пізніше буде доступна. Оскільки
Арк.
ЧДТУ 220000.004 ПЗ 47
З м н. Арк. № докум. Підпис Дата

нам не потрібен текст Markdown для цієї функції, ми можемо ігнорувати решту
вмісту:

Посилання, які були додані до кожної публікації, ще нікуди не ведуть.
Ще немає сторінки, яка відповідає на такі URL-адреси /posts/hello-world. За
допомогою динамічної маршрутизації [11] можна додати сторінку, яка
відповідає всім цим шляхам.
Файл, створений як pages/posts/[slug].js, відповідатиме будь-якій URL-
адресі, яка виглядає як /posts/abc. Значення, що відображається замість [Slug]
URL-адреси, доступне для сторінки як параметр запиту. Можна
використовувати це на відповідній сторінці getStaticProps() для params.slug щоб
викликати допоміжну функцію.
Як аналог getAllPosts(), можна використати допоміжну функцію
getPostBySlug(slug). Замість усіх повідомлень вона надішле назад
Арк.
ЧДТУ 220000.004 ПЗ 48
З м н. Арк. № докум. Підпис Дата

повідомлення, яке відповідає тому, що йому передається. Також потрібно
показати вміст основного файлу розмітки на сторінці публікації.
Сторінка окремих публікацій виглядає як сторінка огляду публікацій.
Замість того, щоб переходити від дописів до сторінки в getStaticProps(), просто
передаємо одну публікацію. Перш ніж розглянути, як перетворити текст
публікації Markdown у придатний для використання HTML, спочатку вносяться
деякі загальні зміни.

Тепер потрібно додати функцію getPostBySlug(Slug) до допоміжного
файлу lib/api.js. Це як getAllPosts(), з кількома помітними відмінностями. Якщо
слагом є «hello-world», то прочитається файл під назвою _posts/hello-world.md.
Якщо цей файл не існує, Next.js відобразить сторінку помилки 404.
Інша відмінність getAllPosts() полягає в тому, що цього разу також
потрібно прочитати вміст публікації. Можна повернути його як HTML замість
необробленої Markdown, попередньо обробивши його remark.
Арк.
ЧДТУ 220000.004 ПЗ 49
З м н. Арк. № докум. Підпис Дата

Теоретично функцію getAllPosts() можна використати всередині
getPostBySlug(Slug). Спочатку отримаємо всі елементи разом із ним, а потім
зможемо шукати той, який відповідає заданому слагу.
Оскільки дві допоміжні функції виконують різні дії, вони залишаться
окремо. Це дозволяє зосередити функції саме на тій роботі, для якої вони
призначені.
Сторінки, що використовують динамічну маршрутизацію, можуть
використовувати getStaticPaths() поряд із getStaticProps(). Ця функція
повідомляє Next.js, для яких динамічних значень сегментів створювати
сторінки:
Арк.
ЧДТУ 220000.004 ПЗ 50
З м н. Арк. № докум. Підпис Дата

Оскільки ми аналізуємо вміст Markdown у getPostBySlug(Slug), тепер
можна відобразити його на сторінці. Для цього потрібно використовувати
DangerlySetInnerHTML на цьому етапі, щоб Next.js міг відображати HTML
позаду post.body. Незважаючи на назву, можна безпечно використовувати
властивість у цьому сценарії. Оскільки я маю повний контроль над своїми
публікаціями, навряд чи вони будуть вводити небезпечні сценарії.

Арк.
ЧДТУ 220000.004 ПЗ 51
З м н. Арк. № докум. Підпис Дата

При переході за одним з посилань на публікацію, буде відображатись
текст тієї публікації.
Тепер, після підключення постів, потрібно повторити такі самі кроки для
авторів. Цього разу для їх опису використовується JSON замість Markdown.
Можна змішувати різні типи файлів у такому проекті, якщо це має сенс.
Допоміжні функції, які використовуються для читання файлів, подбають про
будь-які відмінності. Сторінки можуть використовувати ці функції, не знаючи,
в якому форматі зберігається вміст.
Спочатку потрібно створити каталог _authors/ і додати кілька файлів. Як
і у публікаціях, файли іменуються за ім’ям кожного автора, оскільки це буде
використано для пошуку авторів пізніше. У кожному файлі прописується повне
ім’я автора в об’єкті JSON:

В моєму блозі наразі буде двоє авторів. Щоб надати їм більше
індивідуальності, додаємо зображення профілю для кожного автора,
помістивши ці статичні файли в каталог public/. Присвоюючи імена файлам
одним і тим самим протоколом, можна об’єднати їх лише за неявною умовою.
Можна додати шлях до зображення до файлу JSON кожного автора, щоб
зв’язати їх. Даючи імена всім файлам, можна керувати цим з’єднанням, не
записуючи його. Об’єкти JSON повинні містити лише інформацію, яку не
можна створити за допомогою коду. Після цих маніпуляцій, каталог проекту
виглядає приблизно так (рис. 3.5):
Арк.
ЧДТУ 220000.004 ПЗ 52
З м н. Арк. № докум. Підпис Дата

Рисунок 3.5 – Каталог проекту
Як і у випадку з публікаціями, тепер потрібна додаткова
функціональність для читання всіх авторів та отримання окремих авторів. Нові
функції getAllAuthors() і getAuthorBySlug(Slug) записуються в lib/api.js. Вони
роблять майже те ж саме, що й їхні «поштові колеги». Оскільки
використовується JSON для опису авторів, не потрібно аналізувати Markdown з
remark. А також не потрібна gray-matter для аналізу frontmatter. Замість цього
можна використовувати вбудований JavaScript JSON.parse() для читання
текстового вмісту файлів в об’єкти.
Завдяки тому, як читаються автори у програмі, тепер можна додати
сторінку зі списком усіх авторів. Створення нової сторінки за адресою
pages/authors/index.js дає сторінку /authors на сайті.
Допоміжні функції виконують читання файлів за нас. Цей компонент
сторінки не повинен знати, що автори файлів JSON знаходяться у файловій
системі. Він може використовувати getAllAuthors(), не знаючи, де і як отримати
свої дані. Формат не має значення, якщо допоміжні функції повертають свої
дані у форматі, з яким можна працювати. Такі абстракції дозволяють змішувати
різні типи контенту в програмі.
Індексна сторінка для авторів дуже схожа на сторінку публікацій. Ми
отримуємо всіх авторів у getStaticProps(), який передає їх Authors компоненту.
Арк.
ЧДТУ 220000.004 ПЗ 53
З м н. Арк. № докум. Підпис Дата

Цей компонент відображає кожного автора та перераховує деяку інформацію
про нього. Не потрібно створювати будь-які інші посилання чи URL-адреси зі
слагу. Допоміжна функція вже повертає авторів у зручному для користувача
форматі.
Автори та публікації на цьому етапі ще не пов’язані. Далі потрібно їх
пов’язати, щоб можна було додати список дописів кожного автора до сторінок
його профілю.
Щоб зв’язати два фрагменти вмісту (авторів і публікації), потрібно
посилання один на одного. Оскільки ми вже ідентифікуємо дописи та авторів за
їхніми слагами, ми будемо посилатися на них. Можна було б додавати авторів
до публікацій і дописи до авторів, але одного посилання буде достатньо, щоб
зв’язати їх. Оскільки потрібно приписувати дописи авторам, можна додати слаг
автора до основної частини кожного допису.

Якщо залишити все так, то запуск публікції gray-matter додає поле
автора до публікації у вигляді рядка:

Щоб отримати об’єкт, що представляє автора, можна використовувати
цей slug і викликати з ним getAuthorBySlug(slug):
Арк.
ЧДТУ 220000.004 ПЗ 54
З м н. Арк. № докум. Підпис Дата

Щоб додати автора до однієї із сторінок публікації, потрібно
використати getAuthorBySlug(slug) і один раз викликати getStaticProps().

Додавання авторів на сторінку огляду вимагає аналогічних змін. Замість
того, щоб викликати getAuthorBySlug(Slug) один раз, нам потрібно зіставити всі
публікації та викликати їх по одному.

Це додасть авторів до кожної публікації в огляді дописів.
Не потрібно додавати список публікацій автора до його файлу JSON. На
їх сторінках профілю спочатку отримуються всі повідомлення від getAllPosts().
Потім можна відфільтрувати повний список для тих публікацій, що пов’язані з
цим автором.
Арк.
ЧДТУ 220000.004 ПЗ 55
З м н. Арк. № докум. Підпис Дата

На сторінці автора можна додати ще кількість написаних постів, щоб не
перевантажувати інтерфейс.

Після цього на сторінці авторів буде показано, скільки дописів зробив
кожен автор.
Публікації та автори повністю пов’язані. Під час навігації по блогу,
можна перейти з допису на сторінку профілю автора, а звідти до інших його
дописів.
Ще однією корисною функцією є пошук публікацій в блозі. Основні
характеристики компонента пошуку:
Арк.
ЧДТУ 220000.004 ПЗ 56
З м н. Арк. № докум. Підпис Дата

 Поле введення, в яке користувач може вводити текст.
 Під час введення користувачем тексту, з’явиться динамічний
список результатів дописів у блозі, які відповідають пошуковому
запиту.
 Коли користувач натискає результат, він переходить до публікації
блогу.
 Якщо користувач клацне за межами поля введення, загальний
список дописів блогу знову відображається, а пошуковий запит у
полі введення видаляється.
Основна структура компонента пошуку має наступний вигляд:

Далі використовуються функції onChange та onFocus. Завдяки onFocus
функція зворотного виклику викликається щоразу, коли елемент введення має
фокус, тобто коли користувач натискає на нього. У цьому випадку я хочу, щоб
активний стан був істинним (тобто показував список результатів) і додав
onClick, який дозволяє визначити поведінку, яка має статися під час наступного
клацання користувача, незалежно від того, чи є це результатом публікація в
блозі або за межами елемента input.
Арк.
ЧДТУ 220000.004 ПЗ 57
З м н. Арк. № докум. Підпис Дата

З onChange ця функція зворотного виклику викликається щоразу, коли
змінюється значення елемента введення, наприклад, коли користувач вводить
пошуковий запит. У цьому випадку фіксується event.target.value і
встановлюється як статус query запиту. Оскільки onChange викликається
щоразу, коли користувач вводить або видаляє літеру, масив результатів
постійно оновлюється, що робить його динамічним.
Далі потрібно визначити, що відбувається при onClick. Якщо користувач
клацає де-небудь за межами компонента пошуку, потрібно встановити
активний стан на false, оскільки користувач більше не хоче перебувати в
«режимі пошуку», а також очистити пошуковий запит і масив результатів.
Останнім кроком є вбудовування новоствореного компонента пошуку на
сторінку блогу. Загальний список дописів блогу буде приховано щоразу, коли
активовано режим пошуку, тому потрібен компонент, щоб відстежувати деякі
SearchActive стани. Потім пов’язуємо це з onFocusHandler.

Після цього сторінки блогу вже містять рядок блогу і навігаційна панель
має наступний вигляд (рис. 3.6):

Рисунок 3.6 – Навігаційна панель з пошуком.
Арк.
ЧДТУ 220000.004 ПЗ 58
З м н. Арк. № докум. Підпис Дата

3.4 Інтерфейс розробленого універсального блогу
Працюючи над завданням створення універсального блогу, потрібно було
побудувати зрозумілий і легкий для сприйняття користувачами інтерфейс, не
обтяжений зайвими функціями, але достатньо наповнений потрібною
інформацією з функціональними можливостями інтерактивної системи. На
прикладі блогу http://uniblog.com/ це вдалося зробити.
Сайт розроблено у стриманій сірій кольоровій гамі з урахуванням
ергономічних вимог читання, що легко сприймається користувачами. При
завантаженні головної сторінки блогу користувач бачить головне меню,
розташоване у верхній панелі сайту, та вітальний текст від авторів блогу.
Головне меню сайту, яке знаходиться зверху сторінки, просте і легке для
сприйняття. Назви сторінок короткі і інтуїтивно зрозумілі. Також, для
швидкого пошуку необхідної публікації, додано пошукову панель (рис. 3.7):

Рисунок 3.7 – Головне меню блогу
Головне меню включає в себе сторінки:
 На головну. На головній сторінці користувач може ознайомитись
з загальною інформацією про тематику блогу (рис. 3.8).

Рисунок 3.8 – Головна сторінка блогу
Арк.
ЧДТУ 220000.004 ПЗ 59
З м н. Арк. № докум. Підпис Дата

Публікації. На сторінці містяться посилання на публікації блогу,
розміщені в хронологічному порядку (рис. 3.8).

Рисунок 3.8 – Сторінка «Публікації»
Кожне посилання містить інформацію про автора, дату публікації і
короткий опис. При натисканні «Читати далі…» користувач переходить на
розгорнуту сторінку публікації (рис. 3.9).

Рисунок 3.9 – Сторінка вибраної публікації
Арк.
ЧДТУ 220000.004 ПЗ 60
З м н. Арк. № докум. Підпис Дата

На сторінці вибраної публікації є посилання на сторінку профілю автора
разом із його іменем (підсвічується блакитним кольором) та зображенням
автора.
Автори. Сторінка огляду авторів крім фото та імені автора, показує,
скільки дописів зробив кожен автор (рис. 3.10).

Рисунок 3.10 – Сторінка «Автори»
При переході за посиланням «Переглянути профіль…» перед
користувачем з’явиться сторінка вибраного автора (його профіль) із
зазначенням активних посилань на його публікації (рис. 3.11).

Рисунок 3.11 – Профіль вибраного автора
Арк.
ЧДТУ 220000.004 ПЗ 61
З м н. Арк. № докум. Підпис Дата

3.5 Висновки до розділу 3
В третьому розділі детально описано процес розробки універсального
блогу, представлено його дизайн та інтерфейс. В якості інструменту для
розробки блогу вибрано фреймворк Next.js. Обґрунтування вибору даного
фреймворку детально описано в третьому розділі. Також описано структуру
побудови сторінок та інтерфейс блогу.

Арк.
ЧДТУ 220000.004 ПЗ 62
З м н. Арк. № докум. Підпис Дата

ВИСНОВКИ
Актуальність створення блогу на сьогодні обумовлена вирішенням цілої
низки проблем. Ведення блогів допомагає вчителям спілкуватися з учнями,
власникам бізнесу взаємодіяти з клієнтами, об’єднати мислителів-однодумців і
спільноти по всьому світу, отримати більше трафіку веб-сайту від пошукових
систем, журналістам ділитися своїми особистими поглядами на різні теми зі
своїми читачами, політикам спілкуватися з громадянами, студентам знайти
нове рішення старої проблеми, користувачам пошукових систем знаходити
актуальну й ефективну інформацію та знання, звичайним людям отримувати
пасивний дохід, Google відображати власний пошуковий бізнес або
високоякісні результати пошуку та заробляти гроші, показуючи релевантну або
нативну рекламу в блогах, монетизованих за допомогою Google AdSense тощо.
У кваліфікаційній роботі розроблено блог із використанням фреймворку
Next.js на основі React для відтворення веб-сторінок. Цей фреймворк дозволяє
створювати програми React, здатні генерувати і відтворювати статичний сайт
на стороні сервера без необхідності налаштування. Основна перевага
використання статичного створення сайту або рендерингу на стороні сервера
полягає в тому, що це набагато краще для пошукової оптимізації (SEO), і
помітно, що початкове завантаження сторінки відбувається набагато швидше,
ніж звичайна програма React. Завдяки генерації на стороні сервера є
можливість «витягувати» дані безпосередньо з джерела даних перед тим, як
сторінка буде відтворена та надіслана клієнту, а не отримувати ці дані з API.
В роботі ставилась задача розробити універсальний блог, наповнення
якого можна було б швидко змінювати/доповнювати відповідно до тематики
блогу. Детально описано процес розробки універсального блогу, представлено
інтерфейс розробленого блогу.
Отже, можна стверджувати, що мета роботи досягнута, всі вимоги
технічного завдання виконані у повному обсязі.
Арк.
ЧДТУ 220000.004 ПЗ 63
З м н. Арк. № докум. Підпис Дата

ДОДАТОК A

ЗАТВЕРДЖЕНО
Зав. кафедри ІТП, проф.
_________________ Прокопенко Т.О.
«____» ________________ 2022 р.

РОЗРОБКА УНІВЕРСАЛЬНОГО БЛОГУ НА ОСНОВІ ЗАСТОСУВАННЯ NEXT.JS

Специфікація
482 ЧДТУ 20000-01
Листів 2

Розробник _______________ Стойшич Б.
Керівник _______________ Прокопенко Т.О.
Н. Контроль _______________

Черкаси, 2022

2
482 ЧДТУ 20000-01
Позначення Найменування Примітка
Документація
482 ЧДТУ 20000-01 12 01 Текст програми

РОЗРОБКА УНІВЕРСАЛЬНОГО БЛОГУ НА ОСНОВІ ЗАСТОСУВАННЯ
NEXT.JS
482 ЧДТУ 20000-01 12 01
Текст програми
Листів 8

Розробник _____________ Стойшич Б.

Н

2022

2
482 ЧДТУ 20000-01 34 01

Лістинг програмного коду файлу posts\index.js:

import Image from 'next/image'
+import Link from 'next/link'
-import { getAllAuthors, getAuthorBySlug } from '../../lib/api'
+import { getAllAuthors, getAllPosts, getAuthorBySlug } from '../../lib/api'
-import { getAllPosts } from '../../lib/api'
+import { getAllPosts, getAuthorBySlug } from '../../lib/api'
export default function Posts({ posts }) {
return (
<div className="posts">
<h1>Posts</h1>
{posts.map(post => {
const prettyDate = new Date(post.createdAt).toLocaleString('en-US', {
month: 'short',
day: '2-digit',
year: 'numeric',
})
return (
<article key={post.slug}>
<h2>
<Link href={post.permalink}>
<a>{post.title}</a>
</Link>
</h2>
<time dateTime={post.createdAt}>{prettyDate}</time>

+ <div>
+ <Image alt={post.author.name} src={post.author.profilePictureUrl}
height="40" width="40" />
+
+ <span>{post.author.name}</span>
+ </div>

3
482 ЧДТУ 20000-01 34 01

<p>{post.excerpt}</p>

<Link href={post.permalink}>
<a>Read more →</a>
</Link>
</article>
)
})}
</div>
)
}
export default function Author({ author }) {
return (
<div className="author">
<h1>{author.name}</h1>
<Image alt={author.name} src={author.profilePictureUrl} height="40" width="40"
/>
+ <h2>Posts</h2>
+
+ <ul>
+ {author.posts.map(post => (
+ <li>
+ <Link href={post.permalink}>
+ <a>
+ {post.title}
+ </a>
+ </Link>
+ </li>
+ ))}
+ </ul>
</div>
)
}
export function getStaticProps({ params }) {

4
482 ЧДТУ 20000-01 34 01

const author = getAuthorBySlug(params.slug)
return {
props: {
- author: getAuthorBySlug(params.slug),
+ author: {
+ ...author,
+ posts: getAllPosts().filter(post => post.author === author.slug),
+ },
},
}
}
export function getStaticPaths() {
return {
fallback: false,
paths: getAllAuthors().map(author => ({
params: {
slug: author.slug,
},
})),
}
}

Лістинг програмного коду файлу authors\index.js:

import Image from 'next/image'
import Link from 'next/link'
import { getAllAuthors, getAllPosts } from '../../lib/api'
export default function Authors({ authors }) {
return (
<div className="authors">
<h1>Authors</h1>
{authors.map(author => (
<div key={author.slug}>
<h2>

5
482 ЧДТУ 20000-01 34 01

<Link href={author.permalink}>
<a>{author.name}</a>
</Link>
</h2>
<Image alt={author.name} src={author.profilePictureUrl} height="80" width="80"
/>
<p>{author.posts.length} post(s)</p>
<Link href={author.permalink}>
<a>Переглянути профіль…</a>
</Link>
</div>
))}
</div>
)
}
export function getStaticProps() {
return {
props: {
authors: getAllAuthors().map(author => ({
...author,
posts: getAllPosts().filter(post => post.author === author.slug),
})),
}
}
}

Лістинг програмного коду файлу lib\api.js:

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import {remark} from 'remark'
import remarkHtml from 'remark-html'

6
482 ЧДТУ 20000-01 34 01

export function getAllAuthors() {
const authorsDirectory = path.join(process.cwd(), '_authors')
const filenames = fs.readdirSync(authorsDirectory)

return filenames.map(filename => {
const file = fs.readFileSync(path.join(process.cwd(), '_authors', filename),
'utf8')

// get data
const data = JSON.parse(file)

// get slug from filename
const slug = filename.replace(/\.json/, '')

// return combined frontmatter and slug; build permalink
return {
...data,
permalink: `/authors/${slug}`,
profilePictureUrl: `/${slug}.jpg`,
slug,
}
})
}

export function getAllPosts() {
const postsDirectory = path.join(process.cwd(), '_posts')
const filenames = fs.readdirSync(postsDirectory)

7
482 ЧДТУ 20000-01 34 01

return filenames.map(filename => {
const file = fs.readFileSync(path.join(process.cwd(), '_posts', filename), 'utf8')

// get frontmatter
const { data } = matter(file)

// get slug from filename
const slug = filename.replace(/\.md$/, '')

// return combined frontmatter and slug; build permalink
return {
...data,
permalink: `/posts/${slug}`,
slug,
}
})
}

export function getAuthorBySlug(slug) {
const file = fs.readFileSync(path.join(process.cwd(), '_authors', `${slug}.json`),
'utf8')

const data = JSON.parse(file)

return {
...data,
permalink: `/authors/${slug}`,
profilePictureUrl: `/${slug}.jpg`,
slug,

8
482 ЧДТУ 20000-01 34 01

}
}

export function getPostBySlug(slug) {
const file = fs.readFileSync(path.join(process.cwd(), '_posts', `${slug}.md`),
'utf8')

const {
content,
data,
} = matter(file)

const body = remark().use(remarkHtml).processSync(content).toString()

return {
...data,
body,
slug,
}
}

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Study Shows Business Blogging Leads to 55% More Website Visitors.
[Електронний ресурс]. – Режим доступу:
https://blog.hubspot.com/blog/tabid/6307/bid/5014/Study-Shows-Business-
Blogging-Leads-to-55-More-Website-Visitors.aspx. Дата звернення – 28.03.2022.
2. Content Marketing Infographic [Електронний ресурс]. – Режим
доступу: https://www.demandmetric.com/content/content-marketing-infographic.
Дата звернення – 28.03.2022.
3. Compounding Posts Generate 38% of Your Blog's Traffic: Here's What
HubSpot's Look Like [Електронний ресурс]. – Режим доступу:
https://blog.hubspot.com/marketing/hubspot-blog-compounding-posts. Дата
звернення – 28.03.2022.
4. 6 Powerful Reasons Why you Should include Images in your Marketing
– Infographic [Електронний ресурс]. – Режим доступу:
https://www.jeffbullas.com/6-powerful-reasons-why-you-should-include-images-in-
your-marketing-infographic/. Дата звернення – 28.03.2022.
5. Blogging Statistics 2022: Ultimate List with 47 Facts and Stats
[Електронний ресурс]. – Режим доступу: https://firstsiteguide.com/blogging-
stats/. Дата звернення – 02.04.2022.
6. Business Blogging Facts & Stats That Should Not Be Ignored
[Електронний ресурс]. – Режим доступу: https://www.activeblogs.com/blogging-
facts-stats/. Дата звернення – 02.04.2022.
7. 81 of the Most Up-to-Date Blogging Statistics in 2021 [Електронний
ресурс]. – Режим доступу: https://www.semrush.com/blog/blogging-stats/. Дата
звернення – 02.04.2022.
8. Affiliate Marketing Statistics [Електронний ресурс]. – Режим
доступу: https://truelist.co/blog/affiliate-marketing-statistics. Дата звернення –
02.04.2022.
Арк.
ЧДТУ 22000.004 ПЗ 73
Зм н. Арк. № докум. Підпис Дата

9. 15 Visual Content Marketing Statistics to Know for 2021 [Infographic]
[Електронний ресурс]. – Режим доступу: https://venngage.com/blog/visual-
content-marketing-statistics/. Дата звернення – 02.04.2022.
10. What Do 76% of Consumers Want From Your Website? [Електронний
ресурс]. – Режим доступу: https://blog.hubspot.com/blog/tabid/6307/bid/
14953/What-Do-76-of-Consumers-Want-From-Your-Website-New-Data.aspx. Дата
звернення – 09.04.2022.
11. Dynamic Routes [Електронний ресурс]. – Режим доступу:
https://nextjs.org/docs/routing/dynamic-routes. Дата звернення – 12.04.2022.
12. Gizas A., Christodoulou S., Papatheodorou T. Comparative Evaluation
of Javascript Frameworks [Текст] // Proceedings of the 21st Annual Conference on
World Wide Web Companion. – 2018. – P. 513-514.
13. Graziotin D., Abrahamsson P. Making Sense out of a Jungle of
Javascript Frameworks, Towards a Practitioner-friendly Comparative Analysis
[Текст] // Lecture Notes in Computer Science. – 2017. – P. 334- 337.
14. Бодров М.Ю. Вебдодатки як еволюційний розвиток Web [Текст] //
Зб. наукових праць за матеріалами III Міжнародної науково-практичної
конференції «Теоретичні та прикладні аспекти сучасної науки». – 2014. – № 1.
– С. 18-21.
15. Павлиш В.А. Основи інформаційних технологій і систем.
Підручник [Текст] / В.А. Павлиш, Л.К. Гліненко, Н.Б. Шаховська. Львів:
Видавництво Львівської політехніки, – 2018. – 620 с.
16. De Lamadrid J.C. Computer Organization. Basic Processor Structure /
J.C. De Lamadrid. – Boca Raton: CRC, 2018. – 384 p.
17. Peterson J.L. Computer Organization and Assembly Language
Programming / J.L. Peterson. – Independently published, 2019. – 434 p.
18. Warford J.S. Computer Systems / J.S. Warford // New York: Jones &
Bartlett Learning, 2016. — 892 p.
Арк.
ЧДТУ 220000.004 ПЗ 74
Зм н. Арк. № докум. Підпис Дата

19. Wu Junjie. Advanced Computer Architecture / J. Wu, L. Li // Springer,
2016. – 224 p.
20. Fox C. Go Data Structures and Algorithms / C. Fox // Bookboon.com,
2018. – 265 p.
21. Kelvin L. Data Structures & Algorithms in Swift / L. Kelvin, N.
Vincent. – Razeware, 2018. – 328 p.
22. Karumanchi N. Data Structures and Algorithms Made Easy: Data
Structure and Algorithmic Puzzles / N. Karumanchi // 5th Edition. – CareerMonk
Publications, 2017. – 828 p.
23. Седжвик Р., Уэйн К. Computer Science. Основы программирования
на Java, ООП, алгоритмы и структуры данных. – СПб: Питер. – 2016. – 1072 с.
24. Smith William. Everyday Data Structures / W. Smith. – Packt
Publishing, 2017. – 385 p.
25. Бабенко М. А. Введение в теорию алгоритмов и структур данных /
М.А. Бабенко. – М.: МЦНМО, 2016. – 243 c.
26. Таккар М. Next.js // Создание приложений React с рендерингом на
стороне сервера. – Апресс, Беркли, Калифорния, 2020. – С. 93-137.
27. Таккар М. Модульное тестирование с использованием Jest //
Создание приложений React с рендерингом на стороне сервера. – Апресс,
Беркли, Калифорния, 2020. – С. 153-174.
28. Мардан Азат. React быстро. Веб-приложения на React, JSX, Redux
и GraphQL. – СПб.: «Питер», 2019. – С. 560.
29. Бэнкс Алекс, Порселло Ева. GraphQL: язык запросов для
современных веб-приложений. — СПб.: «Питер», 2019. — С. 240.
30. Бэнкс Алекс, Порселло Ева. React и Redux: функциональная веб-
разработка. — СПб.: «Питер», 2018. — С. 336.
31. Томас Марк Тиленс. React в действии. — СПб.: «Питер», 2019. —
С. 368.
Арк.
ЧДТУ 220000.004 ПЗ 75
Зм н. Арк. № докум. Підпис Дата

32. Кирупа Чиннатамби. Изучаем React. — СПб.: «Питер», 2019. —
С. 368.
33. Бибо Беэр, Марас Иосип. Секреты Javascript ниндзя 2-е изд.. –
М.: «Диалектика», 2017. — 544 с.
34. Фаулер, Мартин. Рефакторинг кода на JavaScript: улучшение
проекта существующего кода, 2-е изд. — М.: «Диалектика», 2019. — 464 с.
35. Никсон Р. Создаем динамические веб-сайты с помощью PHP,
MySQL, JavaScript, CSS и HTML5. 4-е изд. — СПб.. — М.: «Диалектика»,
2016. — 768 с.
36. Дакетт, Джон. Javascript и jQuery. Интерактивная веб-
разработка. — М., 2017. — 640 с.
37. Резиг Джон, Бибо Беэр, Марас Иосип. Секреты Javascript ниндзя 2-
е изд.. — М.: «Диалектика», 2017. — 544 с.
38. Богданенко Д. А. Подходы к архитектурному проектированию веб-
приложений // Молодой ученый. — 2018. — № 9 (195). — С. 24-29.
39. Бекирова Э.А., Халилова З. Э. Основные этапы создания web-
приложений // информационно-компьютерные технологии в экономике,
образовании и социальной сфере. — государственное бюджетное
образовательное учреждение высшего образования республики крым
«крымский инженерно-педагогический университет имени февзи якубова»
(симферополь), 2019. — с. 84-91.
40. Волков А. С., Волкова К. А. Обзор архитектурных компонентов
современного веб-приложения // аллея науки. — ИП Шелистов Денис
Александрович (Издательский центр «Quantum»), 2019. — С. 958—961.
41. Методичні рекомендаціії до виконання кваліфікаційної роботи для
здобувачів освітнього ступеня бакалавра зі спеціальності 126 Інформаційні
системи та технології (освітня програма «Web-технології, Web-дизайн»)
[Текст] / [упоряд.: Колесніков К.В., Прокопенко Т.О.]; М-во освіти і науки
України, Черкас. держ. технол. ун-т. – Черкаси: ЧДТУ, 2019 – 31 с.
Арк.
ЧДТУ 220000.004 ПЗ 76
Зм н. Арк. № докум. Підпис Дата

42. Максим Капинус. Открываем блог: секреты и советы // Домашний
ПК. — 2011. — № 6 (150). — С. 64—67.
43. Александр Чумиков, Михаил Бочаров, Мария Тишкова. PR в
Интернете. Web 1.0, Web 2.0, Web 3.0. — М.: Альпина Паблишер, 2010. —
136 с.
44. Aichner, T., Jacob, F. Measuring the Degree of Corporate Social Media
Use // International Journal of Market Research. – 2017. – 57 (2). – Рр. 257–275.
45. Thakkar, Mohit. Building React Apps with Server-Side Rendering: Use
React, Redux, and Next to Build Full Server-Side Rendering Applications. –
Berkeley, CA: Apress. – 2020. – Pp. 93–137.
46. Flanagan, David. JavaScript: The Definitive Guide. 7th edition. –
Sebastopol, California: O'Reilly, 2020. – Pp. 289-193.
47. Haverbeke, Marijn. Eloquent JavaScript. 3rd edition. – No Starch Press.
– 2018. – 472 p.
48. Smith, Craig S. Have You Noticed The New Web? It's Faster, More
Secure. [Електронний ресурс]. – Режим доступу:
https://www.forbes.com/sites/craigsmith/2020/04/21/have-you-noticed-the-new-
web-its-faster-more-secure/. Дата звернення – 17.04.2022.
49. Krill P. Next.js 2.0 plays better with React and JavaScript
[Електронний ресурс]. – Режим доступу:
https://www.infoworld.com/article/3185385/nextjs-20-plays-better-with-react-and-
javascript.html. Дата звернення – 17.04.2022.
50. Режим доступу: https://www.infoworld.com/article/3185385/nextjs-
20-plays-better-with-react-and-javascript.html. Дата звернення – 17.04.2022.
ПРОГРАМНІ ЗАСОБИ
1. Microsoft 365 © Microsoft Inc., 2022.
2. Next.js © Vercel Inc., 2022.
Арк.
ЧДТУ 220000.004 ПЗ 77
Зм н. Арк. № докум. Підпис Дата

ChSTU repository

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