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
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6891| Title: | Інформаційно-розважальний web-ресурс для любителів подорожей з використаням WordPress та NextJS |
| Authors: | Ланських , Євген Володимирович Кашніков, Євгеній Михайлович |
| Keywords: | інформаційна система;контент;подорожі;блог;система керування вмістом;WordPress;фреймворк;Next.JS;сервер;React |
| Issue Date: | 12-Jun-2024 |
| Abstract: | У кваліфікаційній роботі бакалавра розроблено інформаційно-розважальний веб-ресурс про подорожі. В якості інструменту для розробки вибрано Next.JS – фреймворк від React і WordPress в якості готового бекенду. Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає 76 сторінок, в тому числі вступ, 3 розділи, висновки, додаток та список використаних джерел. Робота містить 32 рисунка та 22 інформаційних джерела. Перший розділ кваліфікаційної роботи присвячений аналізу сучасних інформаційних веб-ресурсів, а саме блогів. Визначено актуальність та доцільність створення блогу, які цілі може переслідувати блог. Здійснено аналітичний огляд існуючих типів блогів та визначено їх ключові відмінності. Визначено структуру і функціональні можливості типового блогу. Другий розділ присвячений проектуванню блогу: визначено принципи створення сучасних веб-додатків. Обґрунтовано вибір технологій, які будуть використовуватись при реалізації блогу. У третьому розділі описано процес налаштування середовища розробки. Показано як налаштовувати локальний сервер з PHP, WordPress і базу даних для нього. Описано як налаштувати Next.js додаток, що потрібно для цього. Описано процес розробки та інтерфейс розробленого блогу. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6891 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Кашніков_WEB-2011.pdf Restricted Access | 3.18 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
Пояснювальна записка
до кваліфікаційної роботи бакалавра
на тему: «Інформаційно-розважальний web-ресурс для любителів
подорожей з використаням WordPress та NextJS»
Виконав студент 4 курсу,
групи Web-2011,
спеціальності 126 –
Інформаційні системи та
технології,
освітня програма – Web-
технології, Web-дизайн,
Кашніков Є.М.
Керівник к.т.н. Ланських Є.В.
Рецензент
Черкаси – 2024 року
АНОТАЦІЯ
У кваліфікаційній роботі бакалавра розроблено інформаційно-розважальний
веб-ресурс про подорожі. В якості інструменту для розробки вибрано Next.JS –
фреймворк від React і WordPress в якості готового бекенду.
Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає 76
сторінок, в тому числі вступ, 3 розділи, висновки, додаток та список використаних
джерел. Робота містить 32 рисунка та 22 інформаційних джерела.
Перший розділ кваліфікаційної роботи присвячений аналізу сучасних
інформаційних веб-ресурсів, а саме блогів. Визначено актуальність та доцільність
створення блогу, які цілі може переслідувати блог. Здійснено аналітичний огляд
існуючих типів блогів та визначено їх ключові відмінності. Визначено структуру і
функціональні можливості типового блогу.
Другий розділ присвячений проектуванню блогу: визначено принципи
створення сучасних веб-додатків. Обґрунтовано вибір технологій, які будуть
використовуватись при реалізації блогу.
У третьому розділі описано процес налаштування середовища розробки.
Показано як налаштовувати локальний сервер з PHP, WordPress і базу даних для
нього. Описано як налаштувати Next.js додаток, що потрібно для цього. Описано
процес розробки та інтерфейс розробленого блогу.
Ключові слова: блог, подорожі, інформаційна система, система керування
вмістом, WordPress, фреймворк, Next.JS, React, сервер, контент, публікація, пост
ABSTRACT
In this bachelor's thesis, a travel blog was developed. Next.js, a framework from
React, was chosen as a development tool and WordPress as a ready-made backend.
The volume of the explanatory note of the bachelor's thesis is 76 pages, including
the introduction, 3 chapters, conclusions, appendix and list of references. The work
contains 32 drawings and 22 information sources.
The first chapter of the qualification work is devoted to the description of the
concept of "blog". The relevance and feasibility of creating a blog are determined, as well
as the goals that a blog can pursue. An analytical review of existing types of blogs is
carried out and their key differences are identified. The structure and functional
capabilities of each type of blog are defined.
The second section is devoted to the design of a blog: the principles of creating
modern web applications are defined. The choice of technologies that will be used in the
implementation of the blog is substantiated.
The third section describes the process of setting up the development
environment. It shows how to set up a local server with PHP, WordPress and a database
for it. It describes how to set up the Next.js application and what is needed for this. The
development process and the interface of the developed blog are described.
Keywords: blog, travel, information system, content management system,
WordPress, framework, Next.JS, React, server, content, publication, post
Зміст
ВСТУП ......................................................................................................................................................... 7
1 ОСНОВНІ ПОНЯТТЯ ПРО БЛОГ ......................................................................................................... 9
1.1 Поняття та цілі блогу .............................................................................................. 9
1.2 Огляд та аналіз існуючих типів блогів .............................................................. 12
1.3 Структура та функціональні можливості блогу .............................................. 21
1.4 Висновки до розділу 1 ........................................................................................... 24
2 ПРОЄКТУВАННЯ БЛОГУ ................................................................................................................... 25
2.1 Принципи розробки сучасних веб-додатків ..................................................... 25
2.2 Огляд фреймворку Next.js, його можливості і переваги ................................ 29
2.3 Використання WordPress API для розробки блогу ......................................... 32
2.4 Висновки до розділу 2 ........................................................................................... 37
3 РОЗРОБКА БЛОГУ ПРО ПОДОРОЖІ ................................................................................................ 38
3.1 Структура розроблюваного проекту ................................................................. 38
3.2 Налаштування середовища розробки WordPress ........................................... 41
3.3 Встановлення і налаштування Next.js ............................................................... 43
3.4 Розробка додатку ................................................................................................... 46
3.4 Висновки до розділу 3 ........................................................................................... 54
ВИСНОВКИ .............................................................................................................................................. 55
ДОДАТОК A.............................................................................................................................................. 56
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ................................................................................................. 76
ВСТУП
Через стрімкий розвиток інтернет-маркетингу почали набувати популярності
різні інформаційно-розважальні веб-ресурси, наприклад, блоги.
Підприємці почали цікавитися темою блогів і бачать в цьому інструмент для
просування свого бренду і своїх послуг. І це дійсно являється правдою, блог для
бізнесу – це не лише спосіб донести якусь інформацію, а і дієвий засіб для
залучення нової аудиторії, яка може стати потенційним клієнтом. Блог збільшує
конверсію для бізнесу і якщо вести його правильно, то буде працювати лише в плюс
для нього.
Зв’язка із блогу і активних соціальних мереж призводить до створення
аудиторії навколо бренду, яка не віддасть перевагу конкурентам, через довіру до
цього бренду. Щоб досягти такої цілі використовуючи блог потрібно розуміти
принципи успішності такого виду діяльності. Перш за все це якість, а не кількість.
Вичерпні статті з правильно поданою інформацією, яка за короткий час, зрозуміло і
стисло доносить свою мету – ключ до успіху.
Актуальність. Наше сьогоднішнє життя дуже тісно переплетено з
інтернетом. З розвитком інформаційних технологій, блоги стали не маленькою
частиною життя людей. Вони регулярно читають їх, знаходять в них потрібну
інформацію і довіряють їм.
Блоги можуть використовуватись для маніпулювання свідомістю людей в
інформаційному просторі, особливо тих, хто не здатний до критичного мислення та
аналізу. Враховуючи швидке поширення інтернету, і ефективності блогу для
бізнесу, створення такого є актуальним і визначається потребами сучасних реалій.
Об’єктом дослідження є розробка інформаційно-розважального веб-ресурсу
про подорожі використовуючи Next.js та WordPress.
Предметом дослідження є методи і алгоритми розробки веб-орієнтованих
інформаційних систем.
Метою кваліфікаційної роботи бакалавра є створення інформаційно-
розважального веб-ресурсу про подорожі на основі застосування Next.JS та
WordPress. Для досягнення поставленої мети кваліфікаційної роботи бакалавра
необхідно розв’язати наступні задачі:
• проаналізувати предметну область розробки;
• здійснити порівняльний аналіз засобів розробки веб-орієнтованої системи і
визначити доцільність використання фреймворку Next.js та WordPress;
• сформувати вимоги до інтерфейсу розробленого блогу;
• розробити веб-орієнтовану інформаційну систему.
Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає 73
сторінки, в тому числі вступ, 3 розділи, висновки та додаток.
1 ОСНОВНІ ПОНЯТТЯ ПРО БЛОГ
1.1 Поняття та цілі блогу
Блоги є важливою складовою сьогоднішнього інтернету. Вони відіграють
досить велику роль у інформуванні або просуванні особистого бренду або компанії.
Блоги представляють собою онлайн-платформи, де автори, відомі як блогери,
публікують свої думки, ідеї, дослідження, рецензії та інші матеріали на різноманітні
теми. Вміст блогу часто називають записами в блозі, публікаціями або постами.
Мета блогу може бути різною. Наприклад, вони можуть існувати для
вираження особистих думок, для того щоб ділитися своїм досвідом або знаннями,
бути інструментом для просування продуктів або послуг тощо. Блог може підвищити
кількість продаж для компаній шляхом надання пошуковим системам вміст для
індексації та відображення в результатах пошуку.
Блог може вестись як однією людиною, так і групою людей, які публікують
інформацію, спрямовану на розмовний стиль. У сучасному світі багато компаній
також ведуть свої блоги, де викладають інформативний контент, відповідний до
сфери діяльності бізнесу.
Багато людей ведуть блоги на постійній основі і заробляють на цьому
продаючи, наприклад, рекламу. Блоги для бізнесу дають маркетингові результати, які
потім впливають на їх продажі. Також можна просувати свій блог через соціальні
мережі, а контент блогу використовувати як контент для цих самих соціальних мереж
у стислому вигляді, що вигідно в обидві сторони.
Блог – це такий веб-сайт який постійно і регулярно оновлює свій контент і дає
можливість писати статті, використовуючи важливі пошукові терміни. Це платформа
для контент-маркетингу, де можна публікувати статті, новини та інформацію про
продукти і послуги компанії. Мета цього - побудувати відносини зі споживачами,
щоб вони сприймали бізнес позитивно.
Коли люди досліджують компанію, вони можуть прочитати допис у блозі,
щоб дізнатися більше про організацію перед тим, як зробити покупку. Бізнес-блог -
це потужний інструмент, який може збільшити кількість людей, що мають доступ до
бренду. Він допомагає достукатися до потенційних клієнтів за допомогою контенту
і дозволяє переконати читачів стати реальними клієнтами. За статистикою HubSpot
[1] – 56% респондентів відповіли позитивно коли їх запитали, чи робили вони колись
покупки після того як прочитали статтю блогу цієї компанії.
Контент публікації може бути поширеним читачами в соціальних мережах,
що в свою чергу, розповсюдиться на більш широку аудиторію і може створити
всеохоплюючий ефект. Це дає можливість привести нову релевантну цільову
аудиторію і створити вищі рейтинги в пошукових системах.
Важливо також зазначити, що ведення блогів дає можливість бізнесу зміцнити
довіру та авторитет перед своєю аудиторією. Публікації в блозі можуть підвищити
рейтинг у пошуку та надати більше можливостей для прямого переходу на цільову
сторінку або сторінку покупки. Споживачі можуть знайти контент через пошук,
потім прочитати публікацію і легко перейти на сторінку покупки після того, як
контент переконає їх купити товар.
З часом було помічено, що деякі статті користуються більшою популярністю,
ніж інші, і генерують значно більше трафіку, ніж інші. Такі статті отримали назву
"складні новини". У своїй статті HubSpot [2] стверджує, що 10% публікацій у блозі
можуть генерувати 38% трафіку всього веб-сайту. Зазвичай це ті публікації, які
залишаються актуальними протягом тривалого часу, мають логічну і прозору
структуру, передають важливу інформацію в стислій формі і є легко зрозумілими для
сприйняття.
Але просто вести блог і писати статті не є достатнім, якщо ціллю такого блогу
є збільшення продажів або впізнаваності продукту. Потрібно брати до уваги дуже
багато речей які на перший погляд можуть бути не очевидними. Наприклад, SEO
налаштування і просування. Також слід пам’ятати, що такі речі як блог можуть не
дати моментальних результатів, і частіше являються інструментами для
довгострокової перспективи розвитку і збільшення продаж продукту.
Блог може слугувати загальним ресурсом для відвідувачів сайту ще до того, як
вони будуть готові зробити покупку. Наприклад, бізнес, який продає товари для
інтернет-магазинів. Цей бізнес може привабити власників інтернет-магазинів, які
вже шукають їхні товари в інтернеті. Однак у більшості випадків власник інтернет-
магазину ще не готовий здійснити покупку.
Альтернативним підходом може стати ведення блогу з порадами для власників
роздрібних магазинів, які тільки починають свою діяльність, наприклад, "Як
створити роздрібний веб-сайт" або "Переваги електронної комерції порівняно з
фізичним магазином". Це поступово приверне аудиторію, якій сподобається ваш
контент і яка знайде його корисним. Коли інтернет-магазини цих відвідувачів
почнуть зростати (частково завдяки вашому блогу), вони вже знатимуть про ваш
бренд і довірятимуть йому як корисному джерелу. На цьому етапі вони будуть готові
до покупок вашого товару.
Говорячи про блоги не можна не охопити таку тему як SEO. SEO, або Search
Engine Optimization – це процес підвищення видимості веб-сайту в пошукових
системах, таких як Google, Microsoft Bing та інших. Ця видимість підвищується, коли
користувач шукає товари, послуги, інформацію або теми, в яких власник веб-сайту є
експертом. Чим більша видимість, тим більша ймовірність того, що веб-сайт
знайдуть і перейдуть на нього. Зрештою, метою пошукової оптимізації є залучення
відвідувачів сайту, які стануть покупцями, клієнтами або аудиторією, що постійно
повертається. Звичайний пошук в інтернеті формує 53% усього трафіку [3].
Google та інші пошукові системи використовують набір факторів ранжування
для визначення результатів, які з'являються за кожним пошуковим запитом. Ці
фактори також впливають на ранжування результатів.
Досягти результатів в пошукових системах можна дотримуючись декількох
основних пунктів:
визначити цільову аудиторію блогу
провести дослідження ключових слів
додати візуальні елементи, такі як зображення або відео
придумати назву, що запам'ятовується
оптимізувати сторінки за допомоги мета інформації
Одна з найпоширеніших помилок ведення блогу полягає в тому, що він
спрямований на залучення якомога більшої кількості читачів. Намагання охопити
ширшу аудиторію за допомогою більш експансивної стратегії розповсюдження може
бути не найефективнішим підходом до створення онлайн-контенту. Існує потенціал
для розмивання контенту, який намагається здобути масову привабливість, що в
кінцевому підсумку може призвести до недостатньої залученості та зниження
рентабельності інвестицій.
Блог повинен бути написаний безпосередньо для потенційного покупця, а не
для когось іншого. Важливо провести ретельне дослідження, щоб удосконалити
свою стратегію і включити контент, написаний для конкретної ніші.
Ще одна хибна думка про ведення блогу полягає в тому, що кількість - це
ключ до успіху. Прикладом цього є віра в те, що публікація більшої кількості статей
призведе до збільшення трафіку на сайт. Стратегія, послідовність і якість важливіші
за кількість. Добре продумана стратегія дасть результати, якщо статті написані
таким чином, щоб заохочувати читачів до конверсії. Послідовність створює
лояльність, а якість - довіру.
Послідовне ведення блогу також має вирішальне значення для побудови
довіри до домену. Успішна стратегія побудови посилань полягає в тому, щоб
пов'язати сторінки вашого блогу зі сторінками пропозицій компанії на вашому веб-
сайті. Інші блоги також почнуть посилатися на цей контент, якщо він буде
релевантним і корисним. З часом ця мережа посилань розвинеться, і Google
визначить, що сайт є релевантним і корисним для певних запитів користувачів.
1.2 Огляд та аналіз існуючих типів блогів
На початку історії блогінгу більшість з них були особистими. Зараз блоги в
основному призначені для заробітку, їх ведуть для продажі реклами, просуванні
свого бізнесу, або власного бренду.
Сьогодні у світі налічується понад 600 мільйонів блогів [4], що є
беззаперечним свідченням ефективності блогів. Щоб побачити, як сьогодні
використовуються блоги, розглянемо список найпопулярніших типів блогів.
1) Персональні блоги.
Традиційний блог, який відображає первинну концепцію терміну, коли він
вперше з'явився, в першу чергу функціонував як особистий онлайн-простір. У цьому
контексті автор ділився своїми особистими роздумами та думками, не маючи жодних
намірів монетизації чи стратегічних бізнес-цілей (див. рис. 1.1). Незважаючи на те,
що простір блогерства значно змінився, персональні блоги зберігаються.
Ці автори, керовані пристрастю до написання текстів, займаються цією
діяльністю без необхідності залучення значної аудиторії або участі в комерційних
операціях. Це підкреслює внутрішню цінність самовираження та поширення
особистих думок.
Рисунок 1.1 – Приклад особистого блогу
2) Бізнес/корпоративні блоги.
З роками блоги перетворилися на потужний інструмент для бізнесу, який
дозволяє взаємодіяти з клієнтською базою, розвивати зв'язки з громадськістю та
залучати потенційних клієнтів. Згідно з даними ActiveBlogs, 81% опитаних компаній
вважають свої блоги "корисними", "важливими" або "критично важливими" для своєї
діяльності [5].
Компанії часто використовують блоги для поширення інформації про запуск
нових продуктів, поточні проекти, майбутні релізи та рекламні заходи, такі як
конкурси. Просуваючи контент через свої блоги, ці компанії не лише збільшують
відвідуваність своїх веб-сайтів, але й підвищують коефіцієнт конверсії (див. рис. 1.2).
Таке стратегічне використання блогів підкреслює їхню важливість у сучасних бізнес-
комунікаціях та маркетингових стратегіях.
Крім того, є компанії, які використовують блоги як засіб поширення своїх
експертних думок у відповідних спільнотах. Це досягається завдяки створенню
якісного контенту, незалежно від профілю компанії. В результаті блог стає
авторитетним виданням у своїй ніші. Такий підхід вигідний у довгостроковій
перспективі, оскільки дозволяє компанії продовжувати просувати свої послуги.
Рисунок 1.2 – Приклад бізнес-блогу
3) Професійні блоги.
Ці типи блогів є поєднанням бізнес-блогу та особистого блогу. Як правило,
такий блог є проектом однієї людини, яка з часом йде по бізнес-шляху, стаючи
власником і отримуючи від нього дохід. Це контрастує з особистими блогами, які не
керуються в першу чергу фінансовою вигодою.
Власник такого блогу дотримується бізнес-стратегії, створюючи план,
обираючи нішу, розробляючи редакційний план, укладаючи партнерства з брендами,
аналізуючи ринок і регулярно беручи участь у розвитку блогу. Вони також шукають
нові маркетингові можливості.
Контент цих блогів сфокусований на темах, які цікавлять цільову аудиторію
в межах ніші. Ті, хто володіють такими блогами і стають відомими в певній спільноті,
вважаються блогерами, або інфлюенсерами.
Іншими блогерами, які потрапляють до цієї категорії, є фрілансери та
власники онлайн-портфоліо, які ведуть блоги про свою роботу і використовують цю
можливість, щоб наймати компанії для різних проектів. (рис. 1.3).
Рисунок 1.3 – Приклад професійного блогу
4) Модні блоги.
Останніми роками помітно зросла популярність модних інфлюенсерів та
блогерів. Багато людей звертаються до них за порадами та натхненням у питаннях
моди. Ці блогери та інфлюенсери отримали значну платформу, за допомогою якої
вони можуть взаємодіяти з широкою аудиторією та ділитися своїми знаннями про
моду, значною мірою завдяки зростанню соціальних мереж.
Модні блогери та інфлюенсери є важливими джерелами знань та порад для
покупців, які впливають на їхні рішення про покупку. Підписники цінують їхні
коментарі та пропозиції щодо товарів, що може збільшити продажі для виробників
та магазинів одягу. Це пояснюється тим, що люди більш схильні купувати товар,
якщо вони бачили, як він використовується, або якщо його настійно рекомендує
надійний інфлюенсер.
Рисунок 1.4 – Приклад модного блогу
5) Блоги про стиль життя.
Блоги про стиль життя, як і модні блоги, охоплюють широкий спектр тем,
включаючи продуктивність, здоров'я, фітнес, харчування та інші аспекти, пов'язані з
веденням більш повноцінного життя. На додаток до моди, блоги про стиль життя
також користуються високим попитом через повсюдний пошук прагматичних та
ефективних порад щодо того, як покращити якість свого життя. Варто зазначити, що
найпопулярніші блоги у світі можуть мати мільйон підписників, тоді як
середньостатистичний блогер зазвичай має близько 2 000 підписників (рис. 1.5).
Рисунок 1.5 – Приклад блогу про стиль життя
6) Блоги про подорожі.
Тревел-блоги зараз привертають до себе значну увагу, ймовірно, через великі
дослідження, які проводять люди, перш ніж приймати рішення, пов'язані з
подорожами. Роль тревел-блогера, безсумнівно, складна, незважаючи на те, що
спочатку здається, що це відносно просте і приємне заняття. До обов'язків тревел-
блогера входить проведення ретельних досліджень, визначення та оцінка
потенційних напрямків за оптимальними цінами, розробка маршрутів, вивчення
культурних нюансів країни, про яку йдеться, та поширення цієї інформації серед
своїх читачів (рис. 1.6).
Рисунок 1.6 – Приклад блогу про подорожі
Хоча це може здатися ідеальною роботою, важливо визнати, що створення
контенту вимагає значного часу і зусиль, часто охоплюючи кілька днів або навіть
тижнів. Це спонукає до роздумів про те, чи варто розпочинати подорож і створювати
тревел-блог. Статистичні дані свідчать, що 80% людей використовують тревел-блоги
як засіб планування своїх подорожей. Це підкреслює популярність таких блогів як
платформи для обміну інформацією та досвідом.
7) Фуд-блоги.
Очевидно, що їжа є фундаментальною необхідністю для виживання людини.
Тому не дивно, що їжа є однією з найпопулярніших тем у блогах по всьому світу.
Дійсно, відвідування ресторанів, приготування здорової їжі та купівля продуктів є
невід'ємною частиною нашого повсякденного життя, незалежно від наших особистих
уподобань. Фуд-блогери побачили в цій постійній потребі можливість і перетворили
її на бізнес, який виявився ефективним способом монетизації свого хобі (рис. 1.7).
Рисунок 1.7 – Приклад фуд-блогу
Ті, хто любить готувати щодня і вважає, що їм є чим поділитися з
поціновувачами їжі, можуть замислитися над кар'єрою фуд-блогера. Найуспішніші
кулінарні блогери мають у чотири рази більше підписників, ніж блогери в будь-якій
іншій галузі.
8) Спорт та здоров’я.
Спортивні блоги є цінним ресурсом для людей, які захоплюються спортом, і
для спортсменів. Ці платформи забезпечують всебічне висвітлення різних тем, таких
як новини, аналітика, поради щодо тренувань та особисті історії. Незалежно від того,
чи ведуть їх медіа-професіонали, спортивні експерти або віддані вболівальники, ці
блоги пропонують глибокий погляд на світ спорту.
Основна увага спортивних блогів зосереджена на своєчасному інформуванні
про поточні події, ігри, змагання та турніри. Крім того, вони надають новини в
режимі реального часу, детальний аналіз матчів, розбір ігор та ексклюзивні інтерв'ю
з гравцями та тренерами. Окрім новин та аналітики, спортивні блоги також надають
поради щодо тренувань, харчування та загального самопочуття. Вони орієнтовані як
на спортсменів-початківців, які прагнуть підвищити свій рівень фізичної підготовки,
так і на професіоналів, які шукають інноваційні методи тренувань.
По суті, спортивні блоги діють як платформи для всього, що пов'язано зі
спортом, надаючи безліч інформації та мотивації для ентузіастів на всіх рівнях
підготовки (рис. 1.8).
Рисунок 1.8 – Приклад спортивного блогу
9) Блоги з подкастами.
Подкаст-блоги, або подкастинг-блоги, поєднують традиційний письмовий
контент з аудіо- або відеоподкастами. Така інтеграція дозволяє авторам створювати
контент у різних форматах, щоб задовольнити вподобання своєї різноманітної
аудиторії. Подкаст-блоги включають поєднання текстових статей і подкастів. Це
можуть бути стенограми подкастів, детальні нотатки до шоу або додатковий текст,
що доповнює аудіо- чи відеоконтент.
Гнучкість подкастів дозволяє користувачам споживати контент, займаючись
іншими справами, що робить їх зручним вибором для людей з обмеженим часом на
читання довгих статей.
Подкастинг-блоги пропонують різні можливості для монетизації, включаючи
спонсорство, рекламу, передплату, продаж продуктів і послуг.
Рисунок 1.9 – Приклад подкаст блогу
10) Новинні блоги.
На сьогоднішній день блоги новин стали популярною платформою для
поширення актуальної інформації. Ці блоги охоплюють широкий спектр тем,
включаючи політику, економіку, спорт, технології, культуру тощо. Завдяки частим
оновленням протягом дня, вони забезпечують своєчасний доступ до останніх новин,
що робить їх незамінним ресурсом для людей, які прагнуть бути в курсі подій, що
відбуваються.
Однією з ключових переваг новинних блогів є їхня здатність зосереджуватися
на конкретних сферах, таких як технології, політика чи спорт, або ж надавати
всебічне висвітлення, яке ефективно задовольняє інтереси різних аудиторій. На
відміну від традиційних ЗМІ, блоги новин пропонують незалежний погляд на поточні
події, що приваблює читачів, які шукають різноманітні точки зору та альтернативні
джерела інформації.
Рисунок 1.10 – Приклад блогу новин
1.3 Структура та функціональні можливості блогу
Щоб ефективно взаємодіяти з веб-сайтом, важливо розуміти його структуру
та функції, оскільки вони значною мірою впливають на те, як користувачі
сприймають його та керують контентом.
Блоги слугують платформою для обміну контентом з аудиторією та
обговорення різноманітних тем. Їх ефективність залежить від того, як вони
структуровані, і від того, які користувацькі функції вони надають для створення та
управління контентом.
Майже в будь-якому блозі можна виділити основні елементи які присутні в
кожному з них. Наприклад:
Головна сторінка:
o Останні статті: блок, який відображає останні статті в порядку їх
публікації. Цей розділ може містити прев'ю, описи та посилання для
доступу до повного тексту кожної статті.
o Вибрані статті: відображає статті, які отримали найбільшу увагу або
популярність, забезпечуючи зручний доступ до цікавого контенту.
o Категорії та теги: полегшують швидкий пошук статей на основі
присвоєної їм категорії або тегу, покращуючи навігацію на сайті.
o Форма підписки: дозволяє користувачам отримувати нові публікації
електронною поштою або через RSS-стрічку.
Сторінка публікації:
o Основний текст: розділ змісту статті - це місце, де знаходиться
основний текст статті. Він пропонує гнучкість включення тексту,
зображень, відео та інших медіафайлів, щоб покращити досвід
читання.
o Відгуки користувачів: розділ "Коментарі користувачів" дозволяє
читачам вільно ділитися своїми думками і надавати цінні відгуки про
статтю. Цей розділ також сприяє ефективному управлінню
коментарями, дозволяючи відповідати на них і здійснювати
ефективну модерацію.
o Поділитись в соціальних мережах: зручно розташовані кнопки
дозволяють безперешкодно ділитися статтею на різних платформах
соціальних мереж, розширюючи її охоплення і заохочуючи до участі.
Сторінка категорії або тегу:
o Категорії: використання категорій має важливе значення для
організації статей на основі певних тем або тематик, полегшуючи
навігацію для користувачів і дозволяючи їм знаходити контент, який
відповідає їхнім інтересам. Наприклад, блог про подорожі може мати
такі категорії, як пляжний відпочинок, екскурсії містом, гірські
походи та багато інших, щоб читачам було зручніше переглядати
матеріали.
o Теги - це дескриптори або фрази, які класифікують публікації за
певними атрибутами або темами. Вони допомагають користувачам
швидко знаходити статті, які мають схожі теми або ключові слова.
Наприклад, у кулінарному блозі теги можуть включати "рецепти",
"рослинна кухня", "солодкі страви" тощо.
o Роль цих функцій у створенні добре організованої та зручної системи
категоризації контенту важко переоцінити, оскільки вони значно
покращують загальний досвід перегляду та полегшують пошук
статей у блозі.
Говорячи про функціональні елементи будь-якого блогу можна виділити
наступні можливості:
Панель адміністратора: необхідна для ефективного управління блогом.
Вона надає ряд функцій, таких як управління контентом, модерація
коментарів і нагляд за ролями користувачів.
Керування контентом: включає створення та редагування постів, а
також видалення неактуального контенту для підтримки якості та
актуальності.
Управління коментарями: дозволяє схвалювати або відхиляти
коментарі, а також видаляти спам, щоб забезпечити безпечне та якісне
дискусійне середовище.
Управління користувачами: дозволяє адміністраторам призначати різні
рівні доступу користувачам для виконання таких завдань, як створення
контенту і модерація коментарів, ефективно організовуючи роботу
команди або спільноти над блогом.
Пошук по сайту: надає можливість легко знайти статті за допомогою
ключових слів або фраз, що спрощує навігацію сайтом і покращує
загальний досвід користування ним.
Коментування: залишаючи коментарі, відвідувачі можуть ділитися
своїми відгуками, думками і питаннями про статті, стимулюючи жваві
дискусії і залучаючи аудиторію до спілкування в блозі.
Поширення в соціальних мережах: ця функція відіграє життєво важливу
роль у просуванні контенту та налагодженні зв'язку з аудиторією,
дозволяючи користувачам без особливих зусиль ділитися цікавим
контентом на таких платформах, як Facebook, Twitter і LinkedIn,
розширюючи охоплення та залучаючи нових читачів до блогу.
Аналітичні дані: аналітика і статистика дають цінну інформацію про
активність відвідувачів і ефективність блогу, відстежуючи дані про
відвідувачів, джерела трафіку і поведінку користувачів за допомогою
таких інструментів, як Google Analytics, щоб покращити розуміння
контенту і користувацький досвід.
Метрики контенту: Збір даних про популярність статей, час, проведений
на сайті, та ключові показники допомагає користувачам оцінити
ефективність контенту, що дозволяє їм розробити стратегічний план
подальшого розвитку блогу.
Форма контактів: наявність контактної форми в блозі має вирішальне
значення для того, щоб користувачі могли ділитися відгуками та
зв'язуватися з адміністрацією сайту. Зазвичай таку форму можна знайти
на спеціальній сторінці, легко доступній з головного меню блогу.
Фільтрація постів: фільтрація контенту за категоріями - це важливий
інструмент, який допомагає впорядкувати блог і полегшити
користувачам навігацію. Сортуючи контент за різними категоріями,
відвідувачі можуть легко знайти статті, які відповідають їхнім
інтересам.
1.4 Висновки до розділу 1
На початку поширення інтернету блоги використовувались як онлайн-
платформи на яких автори могли ділитись своїми ідеями, думками або досвідом. Але
з тим як інтернет еволюціонував, стало зрозуміло, що блоги можна монетизувати.
Сьогодні ж блоги використовуються як одна із важливих частин
функціонування, просування і розвитку бізнесу. Підприємці частіше використовують
їх для залучення нової, а також закріплення вже існуючої аудиторії, яку потім можна
легко конвертувати в клієнтів.
Ведення блогу може бути і самим бізнесом. Сьогоднішні можливості дають
стати блогам основним видом прибутку, продаючи рекламу, або розміщуючи платні
публікації на своїй платформі.
В першому розділі кваліфікаційної роботи визначено основні види блогів,
розглянуто структурні та функціональні можливості блогів.
2 ПРОЄКТУВАННЯ БЛОГУ
2.1 Принципи розробки сучасних веб-додатків
Розробка сучасних веб-додатків - це складний процес, який вимагає
дотримання певних принципів і найкращих практик. Метою є створення ефективних,
надійних і зручних рішень, які відповідають потребам користувачів, забезпечуючи
високу продуктивність, безпеку, масштабованість і зручність на різних пристроях і
платформах. Це передбачає використання передових технологій, фреймворків та
інструментів, а також дотримання методологій розробки для створення
високоякісних і стійких додатків. Ключові принципи сучасної розробки веб-додатків
включають модульність і повторне використання коду, дотримання веб-стандартів і
семантики, забезпечення адаптивності та сумісності інтерфейсів, оптимізацію
продуктивності, надійні заходи безпеки та безперешкодну інтеграцію з іншими
системами і сервісами. Ці принципи є основою для розробки додатків, здатних
витримувати високі навантаження від користувачів, швидко адаптуватися до змін і
забезпечувати високий рівень комфорту та доступності для користувачів.
Дотримання цих принципів дозволяє розробникам створювати продукти, які є не
лише функціональними, але й стійкими та здатними розвиватися відповідно до вимог
бізнесу та технологій.
Модульність і повторне використання коду:
У сучасній розробці веб-додатків модульність і повторне використання коду
відіграють вирішальну роль у створенні добре організованого, зрозумілого і стійкого
коду. Дотримання цього підходу сприяє адаптивності, масштабованості та загальній
продуктивності в процесі розробки.
Компоненти - це будівельні блоки сучасних веб-додатків. Кожен компонент
відповідає за певну частину користувацького інтерфейсу і може включати HTML,
CSS та JavaScript для забезпечення функціональності. Такі фреймворки, як React,
Angular та Vue.js, використовують компонентний підхід, що полегшує створення
незалежних компонентів для багаторазового використання.
Компоненти пропонують великий потенціал для повторного використання в
різних частинах програми або навіть окремих проектах, зменшуючи дублювання
коду та покращуючи зручність обслуговування і масштабування. Наприклад, такі
елементи, як кнопки, форми та модальні вікна, можуть бути розроблені як
компоненти і використовуватися в різних частинах програми без необхідності
повторного створення коду.
Компоненти також можна комбінувати для створення більш складних
інтерфейсів з простих, невеликих компонентів, що забезпечує чітке і організоване
обслуговування коду. Наприклад, компонент форми можна створити з менших
компонентів, таких як текстові поля, випадаючі списки та кнопки.
Модульний підхід покращує організацію та полегшує підтримку коду. Він
дозволяє розробникам швидко знаходити та виправляти помилки, а також легко
інтегрувати нові функції.
Веб-стандарти та семантика.
Дотримання веб-стандартів та семантики є важливими принципами розробки
сучасних веб-додатків. Ці принципи забезпечують сумісність, доступність та високу
якість користувацького досвіду на всіх пристроях та платформах.
Використовуючи сучасні фреймворки та бібліотеки, такі як React, Angular та
Vue.js, розробники можуть дотримуватися найкращих практик та стандартів,
забезпечуючи створення високоякісного коду.
Використання семантичних тегів HTML5, таких як `<header>', `<nav>',
`<main>', `<article>', `<section>' і `<footer>', покращує організацію коду і
читабельність.
Ці семантичні теги також відіграють важливу роль у покращенні індексації
контенту пошуковими системами і роблять контент більш доступним для
користувачів з обмеженими можливостями.
Крім того, включення атрибутів ARIA, таких як `aria-label', ̀ aria-hidden' і `aria-
live', може значно поліпшити доступність додатків для користувачів з обмеженими
можливостями, допомагаючи програмам для зчитування з екрану точно
інтерпретувати вміст.
Проведення кросбраузерного тестування має важливе значення для
забезпечення узгодженої функціональності та користувацького досвіду в різних
браузерах (Chrome, Firefox, Safari, Edge) і на різних пристроях (мобільні телефони,
планшети, настільні комп'ютери).
Крім того, оптимізація зображень з використанням сучасних форматів, таких
як WebP і SVG, а також таких методів, як ліниве завантаження і адаптивні
зображення, може значно підвищити продуктивність і швидкість завантаження
сторінок.
Безпека.
Важливість безпеки веб-додатків неможливо переоцінити. У сучасному
середовищі критично важливо визначити пріоритет безпеки під час розробки веб-
додатків, щоб захистити користувачів та їхні дані від потенційних кіберзагроз,
зберігаючи при цьому цілісність організації.
Використання надійних методів автентифікації, такі як багатофакторна
автентифікація (MFA), щоб забезпечити надійний процес перевірки особи
користувача. Використання безпечних методів зберігання паролів, такі як хешування
паролів за різних алгоритмів.
Важливо створити унікальні ролі та привілеї доступу, щоб контролювати
доступ до різних частин програми. Використовувати токени, такі як JSON Web
Tokens (JWT) для ефективного управління сеансами і контролю доступу.
Нещодавні дослідження показали, що 94% веб-додатків мають серйозні
вразливості в системі безпеки, що робить їх вразливими до таких поширених загроз,
як міжсайтовий скриптинг та SQL-ін'єкції. Шокує те, що багато з цих вразливостей
відомі і їм можна запобігти, проте вони продовжують використовуватися у бізнес-
додатках. Це часто пов'язано з тим, що розробники ставляться до безпеки як до
другорядної, а не невід'ємної частини процесу розробки. Інтеграція надійних заходів
безпеки на ранніх стадіях розробки додатків сьогодні стала більш важливою, ніж
будь-коли.
Вкрай важливо надавати пріоритет міркуванням безпеки і дотримуватися
встановлених стандартів і вимог при розробці та структуруванні додатків. Таким
чином, організації можуть ефективно мінімізувати фінансові та репутаційні ризики,
пов'язані з вразливостями, кібератаками, витоком даних і простоєм веб-сайтів
внаслідок хакерських атак.
SEO.
Пошукова оптимізація (SEO) - це процес підвищення видимості веб-сайту в
результатах пошуку за допомогою різноманітних методів і стратегій.
Важливо зазначити, що контент є вирішальним фактором у SEO. Створення
високоякісного, оригінального та релевантного контенту, який відповідає на запити
користувачів, є ключовим. Включення ключових слів у заголовки, підзаголовки та
текст допомагає пошуковим системам точно розуміти та індексувати контент.
Оптимізація мультимедійного контенту, наприклад, зображень і відео, також
має важливе значення. Використання описових назв файлів і додавання атрибутів alt
до зображень допомагає пошуковим системам зрозуміти їхній контекст. Важливо
забезпечити швидке завантаження мультимедійного контенту, оскільки швидкість
завантаження сторінки має значний вплив на ранжування в пошукових системах.
Посилання також мають вирішальне значення для SEO. Розробка
високоякісних внутрішніх посилань, які допомагають користувачам і пошуковим
системам орієнтуватися на вашому сайті, має важливе значення. Отримання
зворотних посилань з авторитетних і релевантних веб-сайтів підвищує довіру до
вашого сайту в очах пошукових систем. Цього можна досягти за допомогою таких
стратегій, як розміщення гостьових постів, співпраця з іншими платформами або
створення цінного контенту, яким захочуть поділитися інші.
Архітектура додатку
Архітектура додатку має вирішальне значення для визначення його структури,
функціональності, масштабованості та довговічності протягом усього процесу
розробки програмного забезпечення. Вона має значний вплив на кожну стадію
життєвого циклу програми, від початкового планування та розробки до розгортання
та обслуговування. Всебічне розуміння та ефективне впровадження відповідної
архітектури може значно підвищити продуктивність команди розробників і
забезпечити вищий рівень задоволеності користувачів.
Архітектура додатків, прийнята організацією, слугує для структурування та
впорядкування коду, тим самим спрощуючи навігацію в проекті для розробників. Це
спрощення полегшує впровадження змін та інтеграцію нових функцій. Впровадження
модульності та чітко визначених компонентів дозволяє зменшити складність
системи, мінімізувати помилки та підвищити загальну якість коду.
Крім того, архітектура відіграє важливу роль у визначенні продуктивності та
масштабованості програми. Використовуючи відповідні шаблони проектування, такі
як мікросервіси або сервіс-орієнтована архітектура (SOA), можна ефективно
розподіляти робоче навантаження і підтримувати високий рівень продуктивності в
міру зростання користувацької бази. Це особливо важливо для додатків, які
обробляють великі обсяги даних або виконують складні обчислення в реальному часі.
Отже, сучасний веб-додаток це не лише про код, потрібно враховувати багато
аспектів. Відштовхуючись від вимог проекту потрібно правильно підбирати
технології які будуть використовуватись в проекті, потрібно ще на початку мислити
на перед, продумувати структуру і архітектуру додатку. Також не менш важливим є
забезпечення безпеки додатку. Розробник має знати слабкі місця свого додатку і
вміти майстерно ці місця захистити.
Ще одним важливим пунктом є оптимізація додатку. В середньому сайт має
завантажуватись менш ніж за 2 секунди. Користувачі очікують швидке завантаження,
а в іншому випадку 53% з них просто покинуть сторінку [6].
2.2 Огляд фреймворку Next.js, його можливості і переваги
Next.js - популярний фреймворк для розробки веб-додатків на основі React
[7]. Він пропонує безліч потужних функцій для створення швидких, масштабованих
та SEO-дружніх додатків. Основні можливості Next.js включають:
1. Server-side rendering (SSR): Next.js підтримує рендеринг на стороні сервера,
що дозволяє серверу генерувати HTML і відправляти його браузеру. Це
призводить до швидшого завантаження сторінок, кращої видимості в
пошукових системах і кращого користувацького досвіду, особливо на
повільних з'єднаннях [8].
2. Static site generator (SSG): Next.js також підтримує статичний рендеринг, коли
HTML-сторінки створюються заздалегідь під час розробки і зберігаються на
сервері. Це допомагає доставляти контент користувачам швидко та ефективно.
Статичний рендеринг добре підходить для контенту, який не часто змінюється,
і може значно зменшити навантаження на сервер [9].
3. Hybrid Rendering: Next.js дозволяє розробникам поєднувати серверний і
статичний рендеринг в одному додатку. Це дозволяє використовувати
статичний рендеринг для більшості сторінок і серверний рендеринг для
динамічного контенту, оптимізуючи ресурси і підвищуючи продуктивність і
швидкість роботи додатків
4. Автоматичне розбиття коду: Next.js автоматично розбиває код програми на
менші фрагменти, завантажуючи лише ті компоненти, які потрібні для
відображення поточної сторінки. Це значно скорочує час завантаження і
покращує продуктивність програми.
5. Пошукова оптимізація (SEO): Завдяки рендерингу на стороні сервера та
можливості налаштовувати мета-теги для кожної сторінки, Next.js пропонує
виняткову SEO-оптимізацію. Це дозволяє підвищити видимість вашого
додатку в пошукових системах і залучити більше трафіку.
6. Підтримка TypeScript: Next.js має вбудовану підтримку TypeScript, що
дозволяє розробникам використовувати статичну типізацію для підвищення
надійності та простоти розробки. TypeScript допомагає виявляти помилки під
час написання коду і покращує загальну якість коду.
7. Маршрутизація на основі файлів: Маршрутизація Next.js залежить від
файлової структури проекту. Кожен файл у папці pages автоматично стає
маршрутом додатку. Це спрощує процес створення нових сторінок і покращує
розуміння структури проекту.
8. Маршрути API: Next.js дозволяє створювати маршрути API на стороні
сервера безпосередньо в додатку. Ця функція дозволяє розробляти серверну
функціональність, таку як обробка форм або взаємодія з базами даних, без
необхідності створення окремого серверного додатку
9. Автоматична оптимізація зображень: Next.js має вбудовані інструменти для
оптимізації зображень, які допомагають підвищити швидкість завантаження
сторінок і загальну продуктивність програми за рахунок ефективного
масштабування і конвертації зображень в сучасні формати зі збереженням
якості і розміру.
10. Підтримка CSS і CSS в JS: Next.js надає комплексну підтримку стилів за
допомогою звичайного CSS, Sass і CSS-in-JS, що дає розробникам гнучкість у
виборі бажаних інструментів стилів і впровадженні кращих практик для
створення адаптивного і зручного інтерфейсу.
11. Інтеграція з зовнішніми сервісами: Next.js легко інтегрується з різними
зовнішніми сервісами та бібліотеками, такими як GraphQL, Redux та іншими,
що дозволяє розробникам створювати надійні та масштабовані додатки з
використанням новітніх технологій.
12. Hot module replacement (HMR): Next.js підтримує гарячу заміну модулів, що
дозволяє розробникам бачити зміни коду в реальному часі без
перезавантаження сторінки, значно прискорюючи процеси розробки та
покращуючи продуктивність [10]. Така сучасна технологія також
використовується у бандлері Vite та ін.
На сьогоднішній день навіть офіційна документація React вказує що краще
використовувати його у поєднанні з мета-фреймворками такими як Next.js [11]. Тому
це найкращий вибір і go-to рішення при початку розробки будь-якого React веб-
додатку.
Next.js - це потужний фреймворк, який поєднує рендеринг на стороні сервера
та статичну генерацію сторінок. Він забезпечує покращену продуктивність, переваги
для SEO, спрощену розробку та розгортання, чудовий developer experience та
можливість працювати з різноманітними та масштабованими проектами.
За допомогою нього розробники можуть створювати захоплюючі веб-додатки,
які забезпечують винятковий користувацький досвід і високу продуктивність.
Він спрощує розробку завдяки ефективному робочому процесу. Він включає
підтримку React-компонентів та маршрутизації, що полегшує створення та керування
інтерфейсом. Гаряча заміна модулів дозволяє розробникам миттєво бачити зміни, не
перезавантажуючи сторінку.
Next.js також поставляється з вбудованим сервером розробки, що усуває
необхідність у додатковому налаштуванні. Додатки Next.js легко розгортаються і
можуть бути розміщені на будь-якому сумісному сервері, пропонуючи рендеринг на
стороні сервера і статичну генерацію сторінок.
Next.js оптимізує веб-сайти для швидкого завантаження за допомогою таких
методів, як розділення коду та його мініфікація. Він надає такі функції, як
маршрутизація URL-адрес, стилізація та пошук даних для покращення роботи
розробників.
Завдяки вбудованій підтримці TypeScript, є можливість писати безпечний за
типом код і відстежувати помилки під час компіляції.
Обширна документація та приклади дозволяють розробникам швидко
розпочати роботу і ефективно реалізовувати нові продукти.
2.3 Використання WordPress API для розробки блогу
WordPress - це надзвичайно зручна і широко використовувана платформа для
розробки веб-сайтів і блогів. Наразі на ній працює понад 42,7% веб-сайтів у світі, що
свідчить про її широку популярність [12].
Технічно WordPress - це система управління контентом з відкритим вихідним
кодом, випущена під ліцензією GPLv2, що дозволяє користувачам вільно
використовувати або модифікувати програмне забезпечення. По суті, така система
управління контентом, як WordPress, спрощує управління веб-сайтом, зокрема,
діяльність, пов'язану з контентом, не вимагаючи досвіду програмування. Таким
чином, WordPress демократизує процес створення веб-сайтів, роблячи його
доступним для всіх, а не лише для розробників.
Кілька років тому WordPress використовувався переважно для створення
блогів, а не традиційних веб-сайтів. Однак, завдяки вдосконаленню основного коду
та широкому спектру доступних плагінів і тем, зараз на WordPress можна створювати
будь-які веб-сайти. Це включає, але не обмежується:
бізнес-сайти
інтернет-магазини
особисті блоги
портфоліо
форуми
Коли справа доходить до створення нової сторінки або публікації в блозі,
редактор контенту WordPress працює подібно до стандартного текстового редактору
на комп'ютері. Просто вводите текст, додаєте зображення і натискаєте кнопку
"опублікувати", щоб WordPress створив HTML-код, необхідний для відображення
вашого контенту в Інтернеті.
Найкраще те, що WordPress є абсолютно безкоштовним у використанні, без
плати за встановлення або поточних витрат, окрім хостингу. Завдяки широкому
спектру доступних тем і плагінів, він вважається одним з найкращих варіантів для
бізнесу, який бажає створити повністю індивідуальний веб-сайт.
З переваг використання WordPress можна виділити наступні:
Простота у використанні: WordPress довзоляє створювати контент і
керувати ним без навичок програмування завдяки інтуїтивно зрозумілому
інтерфейсу адміністрування. Він пропонує сучасний і зручний редактор
тексту, який вміє вставляти різні елементи розмітки у контент сайту.
Кастомізація та масштабованість: широкий вибір тем і плагінів дозволяє
адаптувати сайт до конкретних потреб. Плагіни, в свою чергу, пропонують
додаткові функції, такі як SEO, інтеграція з соціальними мережами, безпека
та оптимізація зображень. Є плагіни які пропонують вбудований
конструктор сайту з графічним інтерфейсом, де користувач який не вміє
розробляти сайти може сам зробити свій, використовуючи лише
вбудований функціонал цього плагіну.
Спільнота: спільнота розробників і користувачів забезпечує постійні
оновлення, виправлення помилок і підтримку нових функцій, багато тем і
плагінів оновлюються постійно і регулярно, так само часто оновлюється і
ядро самого WordPress.
SEO-сумісність: вбудовані інструменти та плагіни для пошукової
оптимізації допомагають підвищити видимість сайту в пошукових
системах. Є багато плагінів які пропонують зручний інтерфейс для
налаштування SEO прямо в адміністраторській панелі.
Підвищена безпека: Регулярні оновлення ядра WordPress забезпечують
захист від відомих вразливостей. Команда розробників слідкує за новими
прогалинами у ядрі коду і швидко їх виправляє.
Багатомовна підтримка: Завдяки підтримці багатьох мов і простоті
перекладу WordPress є чудовим вибором для багатомовних сайтів, також є
безліч плагінів які пропонують зручне рішення для багатомовності сайту.
Вони пропонують широкий вибір мов, вибір мови за замовчуванням і
інтеграцію перекладів у ваш сайт лише після мінімального налаштування.
Але, також можна виділити декілька недоліків сайтів побудованих на основі
WordPress, наприклад:
Ефективність: Широкий спектр функцій та адаптивність WordPress може
призвести до зниження продуктивності порівняно з більш спеціалізованими
платформами, особливо при використанні численних плагінів. Якщо
встановити занадто велику кількість плагінів – це може призвести до
зниження швидкодії сайту.
Безпека: Незважаючи на регулярні оновлення, велика кількість сторонніх
плагінів і тем для WordPress може створювати потенційні ризики для
безпеки, що вимагає своєчасного оновлення. Приблизно 13000 сайтів в день
стають скомпрометованими через невчасне оновлення плагінів, тем або
ядра, або ж через велику кількість різних плагінів [13].
Потреба в кастомізації: Налаштування та оптимізація WordPress можуть
бути важливими для досягнення оптимального рівня безпеки та
продуктивності, що вимагає певного рівня технічних знань.
Проблеми масштабування: Забезпечення стабільної роботи веб-сайту для
великих проектів з високим трафіком може вимагати додаткових методів
оптимізації, таких як використання CDN, кешування та інших технологій.
Застарілі технології: через те що WordPress був випущений ще у далекому
2003 році, він був орієнтованим спочатку лише на блоги і був написаний на
популярних в той час технологіях такі як PHP. Зараз ядро все так само
написано на PHP, на фронті ж використовується в основному jQuery. Це
змушує розробників також використовувати PHP, jQuery і інші застарілі
речі. Це в першу чергу впливає на перфоменс сайту і, що є не менш
важливим, на так званий досвід розробки, який в порівнянні з сучасними
фреймворками – не найкращий.
WordPress, як і будь-яка система, має свої недоліки. Термін "ядро WordPress"
відноситься до основних файлів, які існують до того, як будуть додані будь-які
налаштування, такі як плагіни, теми та конфігурації. Згідно з аналізом Sucuri про
зломи WordPress за 2021 рік, на ядро припадає лише 0,58% всіх вразливостей, тобто
трохи більше піввідсотка порушень. На противагу цьому, теми були пов'язані з 6,61%
вразливостей, в той час як плагіни відповідальні за значні 92,81%. Sucuri також
класифікує теми та плагіни відповідно до того, чи є вони безкоштовними або
преміум-класу. На преміум-теми та плагіни припадає 8,62% всіх сторонніх
вразливостей, в той час як на безкоштовні версії припадає решта 91,38% [14].
Headless WordPress - це сучасний підхід до веб-розробки, при якому система
управління контентом (CMS) WordPress відокремлена від фронтенд частини [15]. На
відміну від традиційних схем, де CMS управляє як контентом, так і фронтендом, в
headless WordPress основна увага приділяється виключно управлінню контентом.
Фронтенд обробляється окремим фреймворком.
У цій архітектурі бекенд самостійно займається створенням, зберіганням і
управлінням контентом, тоді як фронтенд керує тим, як контент представляється і як
з ним взаємодіють користувачі. Зазвичай ці компоненти взаємодіють через API
(інтерфейс прикладного програмування).
Розділивши ці компоненти, розробники мають свободу вибору та
впровадження різних технологій інтерфейсу, таких як фреймворки JavaScript
(наприклад, React, Vue.js) або мобільні додатки, водночас користуючись перевагами
надійних функцій управління контентом WordPress. Контент отримується з бекенду
WordPress за допомогою API, що робить процес розробки більш гнучким і
масштабованим.
Headless WordPress пропонує кілька ключових переваг для веб-розробки:
1) Підвищена гнучкість для розробки інтерфейсу:
Розділення бекенду та фронтенду в headless WordPress дає розробникам
гнучкість у виборі будь-якої технології для розробки інтерфейсу користувача,
включаючи сучасні фреймворки JavaScript, такі як React або Vue.js. Результат - більш
динамічний та інтерактивний користувацький досвід.
2) Покращена продуктивність:
На відміну від традиційних налаштувань WordPress, які завантажують цілі
структури сторінок при незначних оновленнях, headless архітектура отримує лише
необхідні дані, що призводить до пришвидшення часу завантаження та покращення
загальної продуктивності. Це важливо для створення адаптивних і
високопродуктивних веб-сайтів.
3) Масштабованість:
Відокремлюючи фронтенд від бекенд, headless WordPress забезпечує кращу
масштабованість, дозволяючи кожному рівню масштабуватися незалежно від
конкретних потреб. Це важливо для обробки збільшеного трафіку та забезпечення
оптимальної продуктивності в періоди високого попиту.
4) Підхід на основі API:
Headless WordPress працює за принципом API-first, надаючи надійний
RESTful API, який може використовуватися не тільки вибраними технологіями
інтерфейсу, але й сторонніми додатками. Це відкриває можливості для
безперешкодної інтеграції та взаємодії з різними платформами.
5) Покращена безпека:
Розділення фронтенду і бекенду в headless WordPress допомагає зменшити
ризики безпеки, дозволяючи застосовувати незалежні заходи безпеки для обох рівнів.
Це зменшує потенційну площу атаки порівняно з традиційними налаштуваннями, які
ризикують скомпрометувати весь додаток через вразливості плагінів або тем.
6) Простіше управління контентом:
Творці контенту отримують вигоду від використання знайомого бекенду
WordPress для управління контентом при headless підході, зберігаючи переваги
зручної для користувача CMS, тоді як розробники можуть створювати унікальні
інтерфейси. Це покращує співпрацю між обома сторонами.
7) Перспектива на майбутнє:
Headless WordPress забезпечує перспективне рішення, дозволяючи
розробникам адаптуватися до нових тенденцій, не вимагаючи повної перебудови
системи. Розділення завдань полегшує інтеграцію нових технологій інтерфейсу або
прийняття нових стандартів, забезпечуючи довговічність проектів з веб-розробки.
Переваги headless WordPress численні, що робить його привабливим
варіантом для розробників, які прагнуть створювати сучасні, ефективні веб-додатки.
Гнучкість, покращена продуктивність, масштабованість, підхід на основі API,
підвищена безпека, спрощене управління контентом та інші переваги роблять
headless WordPress цінним інструментом у сучасній практиці веб-розробки.
Відокремивши фронтенд від бекенду, розробники можуть створювати динамічні,
безпечні та масштабовані додатки, які відповідають вимогам сучасної веб-розробки.
2.4 Висновки до розділу 2
Сьогодні існує безліч інструментів для розробки веб-додатків: різні
фреймворки, бібліотеки, системи управління контентом, мови програмування тощо.
Важливо не загубитись у цьому різноманітті і вміти обирати ту технологію, яка
найкраще підходить до поставленої задачі.
Будь-який розробник має знати основні принципи розробки якісних,
сучасних і успішних додатків. Потрібно притримуватись їх, розуміти яку роль вони
відіграють і вдало використовувати.
В другому розділі було визначено основні принципи розробки веб-додатків.
Досліджено яке вони мають призначення.
Також розглянуто фронтенд фреймворк Next.js, його основні переваги і
можливості. Розглянуто можливості серверного і статичного рендерингу. Основні
переваги Next.js включають легкість у використанні, потужні інструменти для SEO-
оптимізації, а також підтримки TypeScript тощо.
Було також розглянуто систему управління контентом WordPress, а саме її
headless частину. У традиційному підході WordPress використовується як монолітна
CMS, де фронтенд і бекенд знаходяться в одному місці і тісно пов’язані між собою.
Однак, headless підхід дозволяє розділити ці частини на окремі незалежні сервіси.
Це відкриває можливість вибору будь-якої технології для реалізації фронтенд
частини додатку. Такий спосіб покращує продуктивність, надає більшу гнучкість і
розширяє можливості для користувацького інтерфейсу.
3 РОЗРОБКА БЛОГУ ПРО ПОДОРОЖІ
3.1 Структура розроблюваного проекту
Проект буде містити 5 різних сторінок.
Перша сторінка головна, на ній будуть розміщені, останній пост, який буде
займати всю ширину сторінки, список публікацій і сайдбар з найпопулярнішими
постами (рис. 3.1).
Рисунок 3.1 – Wireframe головної сторінки
Сторінка публікацій буде містити кнопки з категоріями, які слугуватимуть
фільтрами за ними. Список публікацій за обраною категорією і сайдбар с
найпопулярнішими постами (рис. 3.2).
Рисунок 3.2 – wireframe сторінки публікацій
Сторінка про нас буде містити один блок з картинкою і текст про автора
блогу (рис. 3.3).
Рисунок 3.3 – wireframe сторінки про нас
Сторінка контактів буде містити зображення на всю ширину і форму
контактів (рис. 3.4).
Остання сторінка – сторінка публікації, на ній буде весь контент публікації,
назва, автор, аватар автора, дата створення, категорія (рис. 3.5).
Рисунок 3.5 – wireframe сторінки публікації
3.2 Налаштування середовища розробки WordPress
Є багато варіантів встановлення WordPress, можна, наприклад, використати
Docker.
Docker – це програмне забезпечення, що дає можливість розгортати додаток у
ізольованому контейнері на базі операційної системи Linux [16]. Контейнери
дозволяють пакувати додатки з усіма конфігураціями та залежностями в один пакет,
який потім можна використовувати однаково в різних середовищах.
Але, наш вибір падає на Open Server [17]. Це програмне забезпечення яке
розраховане на розробку додатків, на базі Windows, яке включає в себе такі
інструменти як PHP, MySQL, Apache. Тому нам потрібно просто скачати і виконати
всі кроки для встановлення Open Server для Windows.
Для розгортання WordPress потрібно виконати наступні кроки:
В папці OSPanel/domains потрібно створити папку з назвою нашого
проекту, в ній буде лежати наш WordPress сайт. Адреса вашого сайту буде
відповідати назві цієї папки. Назвемо її для прикладу next-wp-blog.test.
Наступним кроком йде створення пустої бази даних. Перейдіть за
посиланням 127.0.0.1/openserver/phpmyadmin/index.php. Увійдіть в
phpMyAdmin, використовуючи свої облікові дані. Далі ви маєте бачити
панель для адміністрування локальних баз даних.
Створюємо нову базу. Це можна зробити за допомогою інтерфейсу
phpMyAdmin, натиснувши на вкладку "Бази даних" і заповнивши
необхідні поля. (рис. 3.6).
Рисунок 3.6 – Адміністративна панель для керування базами даних
Наступним кроком буде завантаження останньої версії WordPress з
офіційного сайту. Скачуємо архів розпаковуємо його вміст у папку з
нашим проектом.
Перезапускаємо локальний сервер.
Переходимо за посиланням http://next-wp-blog.test, на цьому етапі ми
маємо побачити стартову сторінку з налаштування WordPress (рис. 3.7).
Проходимо усі кроки з налаштуванням, вказуємо базу даних,
користувача бази даних, натискаємо Run the installation, вказуємо логін і
пароль для адмін користувача, пошту і переходимо далі.
Рисунок 3.7 – Стартова сторінка налаштування WordPress
Виконавши усі ці кроки маємо побачити привітальну сторінку
адміністративної панелі (рис. 3.8).
Рисунок 3.8 – сторінка адміністративної панелі
3.3 Встановлення і налаштування Next.js
Передусім Next.js вимагає встановленого NodeJS та npm у вашому
середовищі [18]. Для встановлення NodeJS потрібно виконати наступні кроки:
Потрібно перейти на офіційний сайт NodeJS, скачати і встановити
останню стабільну версію.
Npm в свою чергу встановлюється автоматично разом із NodeJS.
Далі потрібно відкрити термінал перейти в каталог в якому буде
розміщений наш додаток і виконати команду "npx create-next-app next-
wp-blog". Це запустить процес встановлення додатку.
Наступним кроком потрібно перейти в папку з проектом і виконати
команду "npm run dev".
За замовчування сервером для розробки являється http://localhost:3000,
тому перейшовши за цим посиланням маємо побачити стартову
сторінку додатку (рис. 3.9).
Рисунок 3.9 – початкова сторінка Next.js.
Відкривши проект в IDEA, можна побачити 2 основні папки проекту, src і
public.
Папка src містить весь код нашого додатку, роутинг, сторінки, компоненти і
тд. Це головна директорія для розробки додатку.
В середині src лежить папка app. В ній будуть розміщені наші сторінки.
Роутинг в Next.js 14 версії працює дещо по іншому від старої версії. Кожна нова
папка, що знаходиться в середині папки app – це роут [19]. Всередині кожного роуту
потрібно створити файл page.tsx – все що знаходиться в ньому буде відображатись
на відповідній сторінці. Файл page.tsx в корні папки app відповідає за головну
сторінку. Також в кожному роуті може бути файл layout.tsx, все, що знаходиться в
цьому файлі буде відображатись в усіх вкладених роутах.
В папці public знаходяться статичні елементи, такі як картинки, фавікон і тд.
Також в проекті знаходяться конфігураційні файли для налаштування TypeScript,
Tailwind, Eslint тощо.
У Next.js є вбудована система оптимізації зображень. Вона автоматично
оптимізує зображення для швидшої роботи додатку. Але, для коректної роботи
оптимізації у файлі next.config.mjs потрібно зазначити віддалені джерела які будуть
використовуватись в додатку (рис. 3.10).
Рисунок 3.10 – налаштування nextConfig
Images.remotePatterns - це масив об'єктів, який визначає дозволені віддалені
джерела зображень для використання у додатку. Кожен об'єкт у цьому масиві
описує шаблон для URL-адрес дозволених зображень.
Опис полів в об'єктах remotePatterns
protocol: протокол, який використовується для завантаження зображень
(наприклад, http або https).
hostname: домен, з якого дозволено завантажувати зображення.
port: порт, що використовується (якщо вказано); якщо залишити
порожнім, буде використано порт за замовчуванням для протоколу (80
для http і 443 для https).
pathname: шаблон шляху, який визначає дозволені шляхи для
завантаження зображень. Використовується шаблон **, що означає, що
дозволено будь-який вкладений шлях.
Файл globals.css у папці app містить в собі глобальні стилі. В кваліфікаційній
роботі для стилізування додатку було обрано бібліотеку Tailwind [20]. Це сучасна
бібліотека, яка пропонує набір утилітарних класів, які можна використовувати для
створення сучасного дизайну. Тому в файлі globals.css буде всього 3 рядки, які
потрібні для коректної роботи Tailwind (рис. 3.11).
Рисунок 3.11 – вміст файлу globals.css
Також для зручного використання потрібно налаштувати тему tailwind. Це
можна зробити у файлі tailwind.config.ts (рис. 3.12).
Рисунок 3.12 – вміст tailwind.config.ts
3.4 Розробка додатку
Точкою входу в наш додаток являється файл layout.tsx в папці app. Усі файли
в папці app з назвою layout.tsx – це спеціальні файли роутингу Next.js. Лейаут
розміщений у файлах з такою назвою буде використовуватись на всіх сторінках, що
знаходяться в тій же дерикторії або на рівнях нижче. Також при переході і сторінки
на сторінку, все, що знаходиться в цьому файлі не буде перемальовуватись.
Отже в цьому файлі розміщено шапку і футер додатку (рис. 3.13). Ця
структура забезпечує єдиний вигляд і поведінку на всіх сторінках додатку, що
робить користувацький досвід більш цілісним і приємним. Таким чином файли
layout.tsx являються одним із ключових елементів архітектури Next.js додатку.
Рисунок 3.13 – код layout.tsx
1) Головна сторінка
Верстка головної сторінки знаходиться у файлі page.tsx в корні папки app.
Файли з назвою page.tsx розпізнаються Next.js як файл в якому розміщено лейаут
роуту. Тобто іншими словами все що знаходиться в такому файлі буде відображено
на сторінці за відповідною адресою.
Головна сторінка складається з декількох компонентів, які визначають її
вигляд (рис. 3.14). Hero – компонент який рендерить останній доданий поста (рис.
3.15). LatestPost – відповідальний за рендер п’яти останніх постів і кнопки, по кліку
на яку підвантажуються ще 3 публікації. І компонент TopPosts – компонент з
найпопулярнішими публікаціями в сайдбарі (рис. 3.16).
Рисунок 3.14 – код головної сторінки
Рисунок 3.15 – вигляд компоненту Hero на головній сторінці
Рисунок 3.16 – вигляд компонентів LatestPost і TopPosts
2) Сторінка публікацій:
Сторінка публікацій знаходиться під маршрутом /posts, для цього створено
папку с такою назвою і вже знайомим page.tsx в ній.
Next.js підтримує як серверні компоненти так і клієнтські. За допомоги
директиви "use client" на першому рядку файлу Next.js розуміє, що цей компонент
буде клієнтським. Це дає доступ до використання react хуків, такі, як useState,
useEffect і тд.
На цій сторінці реалізовано фільтри по категорії постів, для цього як раз таки
і потрібні клієнтські компоненти. Для цього використовується локальний стейт
"selectedCategory" який за замовчуваням містить в собі айді першої категорії в
списку (рис. 3.17).
Категорії, як і публікації, приходять за адміністраторської панелі WordPress
по API запиту. Для цього використовуються популярні бібліотеки Axios (бібліотека
для запитів, яка заміняє метод fetch) і tanstack-query – бібліотека для стейт
менеджменту запитів, зручного кешування, ревалідації запитів тощо [21].
Також використовується хендлер, який приймає айді клікнутої категорії,
робить запит, і отримує публікації за цією категорією (рис. 3.18).
Рисунок 3.17 –вигляд сторінки публікацій
Рисунок 3.18 – компонент Posts
3) Сторінка автора
На цій сторінці можна побачити список публікацій, які було додано цим
автором. Для цього створюється спеціальний роут "[slug]".
Це роут з динамічним параметром. Next.js зрозуміє, що slug – це параметр
який змінюється від сторінки до сторінки. І за допомогою цього можна буде на
сторінці автора отримати значення цього параметру і по ньому зробити запит (рис.
3.19).
Рисунок 3.19 – лістинг коду сторінки автора
4) Сторінка публікації:
Так само як і сторінка автора, сторінка публікації має динамічний параметр
"id". За таким самим принципом ми отримуємо айді поточної публікації, і за
запитом з цим айді можемо отримати автора, категорію, дату створення і контент
публікації (рис 3.20).
За допомоги параметру "dangerouslySetInnerHTML" є можливість вставити на
сторінку контент публікації, зберігши при цьому структуру розмітки.
Рисунок 3.20 – код сторінки публікації
Також, як йшлось раніше у кваліфікаційній роботі, одним з важливих пунктів
успішного блогу є SEO. Next.js пропонує нам функцію "generateMetadata", яка так
само має доступ до параметрів сторінки, тобто в цьому випадку до айді публікації
(рис.3.21). По цьому айді можна зробити запит і отримати усю SEO
метаінформацію. Ця функція має повертати об’єкт з полями які відповідають SEO
мета тегам.
Рисунок 3.21 – функція "generateMetadata"
Перед цим звісно налаштувавши її в адміністраторській панелі WordPress,
наприклад, за допомоги плагіну Yoast SEO (рис. 3.22) [22].
Рисунок 3.22 – налаштування SEO в адміністраторській панелі WordPress
3.4 Висновки до розділу 3
В третьому розділі було детально розглянуто і описано процес реалізації
блогу, представлено частина його кодової бази і користувацького інтерфейсу.
Описано кроки для налаштування і створення нового WordPress і Next.js проекту.
ВИСНОВКИ
Важливість створення блогу сьогодні неймовірно різноманітна. Блоги
слугують багатьом цілям, включаючи: самовираження, обмін знаннями, розвиток
професійних навичок, надання можливості власникам бізнесу зв'язатися з клієнтами
і масштабувати його за рахунок нових клієнтів, залучення трафіку з пошукових
систем, надання можливості журналістам висловити особисту думку на різні теми,
допомогу користувачам пошукових систем у пошуку релевантної та корисної
інформації, надання можливостей пасивного доходу для звичайних людей тощо.
В рамках кваліфікаційної роботи бакалавра було розроблено блог з
використанням фреймворку Next.js, який базується на React для рендерингу веб-
сторінок. Цей фреймворк дозволяє створювати React-додатки, які можуть генерувати
та відображати статичну веб-сторінку на стороні сервера без будь-якої конфігурації.
Основною перевагою використання статичної генерації сторінок або рендерингу на
стороні сервера є чудові можливості пошукової оптимізації (SEO), а також помітне
покращення початкової швидкості завантаження сторінки у порівнянні зі
стандартним React-додатком.
Для бекенду було використано вбудовану у WordPress API. Вона дає широкі
можливості отримання інформації, яка заповнюється в адміністраторській панелі.
Таким чином WordPress слугує сховищем контенту для блогу, за відображення якого
відповідає Next.js.
Отже, можна стверджувати, що мета роботи досягнута, всі вимоги технічного
завдання виконані у повному обсязі.
ДОДАТОК A
ЗАТВЕРДЖЕУЮ
Завідувач кафедри ІТП
_____________ Тетяна ПРОКОПЕНКО
«____» ________________ 2024 р.
ІНФОРМАЦІЙНО-РОЗВАЖАЛЬНИЙ WEB-РЕСУРС ДЛЯ ЛЮБИТЕЛІВ
ПОДОРОЖЕЙ З ВИКОРИСТАНЯМ WORDPRESS ТА NEXTJS
Специфікація
482 ЧДТУ 222144-01
Листів 2
Розробник _______________ Кашніков Є.М.
Керівник _______________ Ланських Є.В.
Н. Контроль _______________
Черкаси, 2022
2
482 ЧДТУ 222144-01
Позначення Найменування Примітка
Документація
482 ЧДТУ 222144-01 12 01 Текст програми
ІНФОРМАЦІЙНО-РОЗВАЖАЛЬНИЙ WEB-РЕСУРС ДЛЯ
ЛЮБИТЕЛІВ ПОДОРОЖЕЙ З ВИКОРИСТАНЯМ WORDPRESS
ТА NEXTJS
482 ЧДТУ 222144-01 12 01
Текст програми
Листів 17
Розробник _____________ Кашніков Є.М.
2024
Лістинг програмного коду файлу app/layout.tsx
import { ReactNode } from 'react';
import { Roboto } from 'next/font/google';
import './globals.css';
import Footer from 'components/shared/Footer';
import Navbar from 'components/shared/Navbar';
const roboto = Roboto({
subsets: ['latin'],
weight: ['100', '400', '700', '900'],
});
export default async function RootLayout({
children,
}: {
children: ReactNode;
}) {
return (
<html lang="en">
<body className={`${roboto.className} overflow-x-hidden bg-light`}>
<Navbar />
{children}
<Footer />
</body>
</html>
);
}
Лістинг програмного коду файлу components/shared/NavBar.tsx
'use client';
import { FC, useEffect, useState } from 'react';
import clsx from 'clsx';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import MobileMenu from 'components/shared/MobileMenu';
import Route from 'components/ui/Route';
import { navLinks } from 'constants/navLinks';
const Navbar: FC = () => {
const [isScrolling, setIsScrolling] = useState(false);
const [openUserMenu, setOpenUserMenu] = useState(false);
const pathname = usePathname();
useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 0) {
setIsScrolling(true);
} else {
setIsScrolling(false);
}
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
<nav
className={clsx(
'py-4 w-full',
isScrolling ? 'fixed top-0 bg-white shadow-lg z-10' : 'relative',
)}
>
<div
className={clsx(
'w-[95%] mx-auto max-w-[1450px] flex items-center justify-between border-b border-
gray-100',
isScrolling && 'pb-0 border-none',
!isScrolling && 'pb-5',
)}
>
<div className="flex-1">
<Link href="/">
<h1 className="text-3xl font-extrabold text-secondary">
Explore
<span className="text-primary">X</span>
</h1>
</Link>
</div>
<ul className="flex items-center justify-center gap-16 flex-2 max-md:hidden">
{navLinks.map((link, index) => (
<li key={index}>
<Route
route={link.route}
label={link.label}
isActive={pathname === link.route}
/>
</li>
))}
</ul>
{openUserMenu && (
<ul className="z-10 absolute right-12 top-[70px] w-48 bg-white shadow-md rounded-md
p-4">
<Link href="/create" onClick={() => setOpenUserMenu(false)}>
<li>Create a post</li>
</Link>
<Link href="/userposts" onClick={() => setOpenUserMenu(false)}>
<li>My Post</li>
</Link>
</ul>
)}
<div>
<MobileMenu />
</div>
</div>
</nav>
);
};
export default Navbar;
Лістинг програмного коду файлу components/shared/Footer.tsx
'use client';
import Link from 'next/link';
import Route from 'components/ui/Route';
import { navLinks } from 'constants/navLinks';
import useMenuActive from 'hooks/useMenuActive';
const Footer = () => (
<div className="w-full py-5 bg-tertiary mt-10">
<div className="w-[95%] mx-auto max-w-[1450px]">
<div className="py-5 border-b border-gray-300 border-opacity-20 flex justify-between
items-center max-md:flex-col max-md:gap-8">
<div className="flex-1">
<Link href="/">
<h1 className="text-3xl font-extrabold text-light">
Explore
<span className="text-primary">X</span>
</h1>
</Link>
</div>
<ul className="flex item-center justify-center gap-16 flex-1 text-white max-md:flex-col
max-md:gap-5">
{navLinks.map((link, index) => {
const isActive = useMenuActive(link.route);
return (
<li key={index}>
<Route
route={link.route}
label={link.label}
isActive={isActive}
/>
</li>
);
})}
</ul>
<div className="flex gap-5 text-white flex-1 justify-end text-2xl" />
</div>
<div className="w-full text-center mt-3 text-sm text-white">
<span>All Rights Reserved ExploreX.com</span>
</div>
</div>
</div>
);
export default Footer;
Лістинг програмного коду файлу app/page.tsx
import { postsAdapter } from 'utils/postsAdapter';
const Home = async () => {
const postsResponse = await getPostsApi();
const posts = postsAdapter(postsResponse.data);
return (
<>
<Hero posts={posts} />
<div className="grid lg:grid-cols-3 grid-cols-1 lg:gap-10 w-[95%] mx-auto max-w-
[1450px] overflow-y-hidden h-fit mt-10">
<LatestPost posts={posts} />
<TopPosts posts={posts} />
</div>
</>
);
};
export default Home;
Лістинг програмного коду файлу components/shared/Hero.tsx
import { FC } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Author } from 'components/ui/Author';
import Overlay from 'components/ui/Overlay';
import Tag from 'components/ui/Tag';
import { PostPreview } from 'types/postTypes';
const Hero: FC<{ posts: PostPreview[] }> = ({ posts }) => {
const featuredPost = posts[0];
return (
<section className="relative">
<div className="w-[95%] mx-auto max-w-[1450px] z-1">
<article
key={featuredPost.id}
className="flex flex-col gap-5 mb-5 relative"
>
<h2 className="text-6xl font-extrabold uppercase text-tertiary">
{featuredPost.title}
</h2>
<div className="flex items-center gap-5">
<Author post={featuredPost} />
<Tag text={featuredPost.categories[0].name} />
</div>
<Link href={`/blog/${featuredPost.id}`}>
<div className="relative max-h-[600px] overflow-hidden shadow-xl">
{featuredPost.featuredImage && (
<Image
width={1200}
height={500}
src={featuredPost.featuredImage}
alt={`image for ${featuredPost.title}`}
className="object-cover w-full h-full rounded-md"
/>
)}
<Overlay />
</div>
</Link>
</article>
</div>
</section>
);
};
export default Hero;
Лістинг програмного коду файлу components/shared/LatestPost.tsx
'use client';
import { FC, useState } from 'react';
import BlogCard from 'components/shared/BlogCard';
import Button from 'components/ui/Button';
import { PostPreview } from 'types/postTypes';
const LatestPost: FC<{ posts: PostPreview[] }> = ({ posts }) => {
const [visibleBlogs, setVisibleBlogs] = useState(5);
const showMoreBlogs = () => {
setVisibleBlogs((prevVisibleBlogs) => prevVisibleBlogs + 3);
};
return (
<section className="col-span-2" aria-labelledby="latest-post">
<div className="w-full text-center">
<h2
id="latest-post"
className="text-center text-2xl font-extrabold uppercase text-tertiary inline-block px-2
mb-10"
>
Latest Post
</h2>
</div>
<div className="flex flex-col gap-10 h-full">
{posts.slice(0, visibleBlogs).map((post, id) => (
<BlogCard post={post} key={id} />
))}
{visibleBlogs < posts.length && (
<div className="flex justify-center">
<Button
onClick={showMoreBlogs}
text="Show more"
aria="Show more blog post"
/>
</div>
)}
</div>
</section>
);
};
export default LatestPost;
Лістинг програмного коду файлу components/shared/TopPosts.tsx
import { FC } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Author } from 'components/ui/Author';
import Overlay from 'components/ui/Overlay';
import Tag from 'components/ui/Tag';
import { PostPreview } from 'types/postTypes';
const TopPosts: FC<{ posts: PostPreview[] }> = ({ posts }) => {
const topPosts = posts.slice(6, 9);
return (
<section aria-labelledby="top-post">
<div className="w-full text-center">
<h2
id="top-post"
className="text-center text-2xl font-extrabold uppercase text-tertiary inline-block px-2
mb-10"
>
Top Posts
</h2>
</div>
<div className="flex h-full flex-col gap-12">
{topPosts.map((topPost) => (
<article key={topPost.id} className="flex flex-col gap-2">
<Link href={`/blog/${topPost.id}`} className="flex flex-col gap-2">
<div className="relative cursor-pointer">
{topPost.featuredImage && (
<Image
width={500}
height={300}
src={topPost.featuredImage}
alt={`Image for ${topPost.title}`}
className="h-[300px] rounded-md"
/>
)}
<Overlay />
</div>
<h3 className="font-extrabold uppercase text-tertiary">
{topPost.title}
</h3>
</Link>
<div className="w-full flex gap-5">
<Author post={topPost} />
<Tag text={topPost.categories[0].name} />
</div>
</article>
))}
</div>
</section>
);
};
export default TopPosts;
Лістинг програмного коду файлу app/posts/page.tsx
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { getPostsApi } from 'api/controllers/postsController';
import Posts from 'components/shared/Posts';
import TopPosts from 'components/shared/TopPosts';
import { postsAdapter } from 'utils/postsAdapter';
const queryClient = new QueryClient();
const page = async () => {
const postsResponse = await getPostsApi();
const posts = postsAdapter(postsResponse.data);
return (
<QueryClientProvider client={queryClient}>
<div>
<div className="grid lg:grid-cols-3 lg:gap-10 grid-cols-1 w-[95%] max-w-[1450px] mx-
auto overflow-y-hidden h-fit mt-10 max-lg:space-y-7">
<Posts />
<TopPosts posts={posts} />
</div>
</div>
</QueryClientProvider>
);
};
export default page;
Лістинг програмного коду файлу components/shared/Posts.tsx
'use client';
import { FC, useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import clsx from 'clsx';
import { getCategories } from 'api/controllers/categoriesController';
import { getPostsByCategoryId } from 'api/controllers/postsController';
import BlogCard from 'components/shared/BlogCard';
import Button from 'components/ui/Button';
import { QueryKeys } from 'constants/queryKeys';
import { postsAdapter } from 'utils/postsAdapter';
const Posts: FC = () => {
const [visiblePosts, setVisiblePosts] = useState(5);
const [selectedCategory, setSelectedCategory] = useState(6);
const queryClient = useQueryClient();
const categoriesQuery = useQuery({
queryFn: () => getCategories(),
queryKey: [QueryKeys.CATEGORIES],
});
const postsQuery = useQuery({
queryFn: () => getPostsByCategoryId(selectedCategory),
queryKey: [QueryKeys.POSTS, selectedCategory],
});
const categories = categoriesQuery.data?.data;
const posts = postsQuery.data?.data ? postsAdapter(postsQuery.data.data) : [];
const showMoreBlogs = () => {
setVisiblePosts((prevVisibleBlogs) => prevVisibleBlogs + 3);
};
const handleCategoryChange = (id: number) => {
setSelectedCategory(id);
queryClient.invalidateQueries({
queryKey: [QueryKeys.POSTS, id],
});
};
return (
<section className="col-span-2" aria-labelledby="posts">
<div className="w-full text-center">
<h2
id="posts"
className="text-center text-2xl font-extrabold uppercase text-tertiary inline-block px-2
mb-10"
>
All Posts
</h2>
</div>
<div className="flex justify-center space-x-4 flex-wrap">
{categories ? (
categories.map(
(category) =>
category.slug !== 'uncategorized' && (
<button
key={category.id}
onClick={() => handleCategoryChange(category.id)}
className={clsx(
selectedCategory === category.id
? 'bg-tertiary/60 text-white'
: 'bg-tertiary text-white',
'px-4 py-2 rounded hover:bg-tertiary/50 mb-10',
)}
>
{category.name}
</button>
),
)
) : (
<p>Loading...</p>
)}
</div>
<div className="flex flex-col gap-10 h-full">
{posts.length > 0 ? (
posts
.slice(0, visiblePosts)
.map((post) => <BlogCard post={post} key={post.id} />)
) : (
<p>Loading...</p>
)}
{posts.length > 0 && visiblePosts < posts.length && (
<div className="flex justify-center">
<Button
onClick={showMoreBlogs}
text="Show more"
aria="Show more blog post"
/>
</div>
)}
</div>
</section>
);
};
export default Posts;
Лістинг програмного коду файлу components/shared/BlogCard
import { FC } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import Overlay from 'components/ui/Overlay';
import Tag from 'components/ui/Tag';
import { PostPreview } from 'types/postTypes';
const BlogCard: FC<{ post: PostPreview }> = ({ post }) => (
<Link
href={`/blog/${post.id}`}
className="relative rounded-lg overflow-hidden"
>
<div className="w-[1000px] h-[450px] relative">
{post.featuredImage && (
<Image
src={post.featuredImage}
fill
alt={`image for ${post.title}`}
className="object-cover"
/>
)}
<Overlay />
</div>
<div className="absolute w-full h-full top-0 p-5 flex flex-col justify-between">
<div>
<Tag text={post.categories[0].name} />
<h3 className="text-3xl font-extrabold uppercase text-white">
{post.title}
</h3>
</div>
</div>
</Link>
);
export default BlogCard;
Лістинг програмного коду файлу app/blog/[id]/page.tsx
import { Metadata } from 'next';
import Image from 'next/image';
import { getPostByIdApi } from 'api/controllers/postsController';
import { Author } from 'components/ui/Author';
import Tag from 'components/ui/Tag';
import { Post } from 'types/postTypes';
import { singlePostAdapter } from 'utils/postsAdapter';
type Props = {
params: {
id: number;
};
};
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const postResponse = await getPostByIdApi(params.id);
const { yoast_head_json } = singlePostAdapter(postResponse.data);
return {
alternates: {
canonical: yoast_head_json.canonical,
},
title: yoast_head_json.title,
robots: {
follow: yoast_head_json.robots.follow,
index: yoast_head_json.robots.index,
'max-snippet': yoast_head_json.robots['max-snippet'],
'max-image-preview': yoast_head_json.robots['max-image-preview'],
'max-video-preview': yoast_head_json.robots['max-video-preview'],
},
openGraph: {
title: yoast_head_json.og_title,
description: yoast_head_json.og_description,
images: [
{
url: yoast_head_json.og_image.url,
width: yoast_head_json.og_image.width,
height: yoast_head_json.og_image.height,
type: yoast_head_json.og_image.type,
},
],
locale: yoast_head_json.og_locale,
url: yoast_head_json.og_url,
siteName: yoast_head_json.og_site_name,
type: yoast_head_json.og_type,
},
description: yoast_head_json.description,
};
}
const page = async ({ params }: { params: Post }) => {
const { id } = params;
const postResponse = await getPostByIdApi(id);
const post = singlePostAdapter(postResponse.data);
return (
<div>
<div className="w-[95%] mx-auto max-w-[1450px]">
<div className="w-full h-[400px] relative mb-5">
{post.featuredImage && (
<Image
fill
alt="image for blog"
src={post.featuredImage}
className="object-cover"
/>
)}
</div>
<div className="flex items-center gap-5">
<Author post={post} />
<Tag text={post.categories[0].name} />
</div>
<h2 className="text-4xl font-extrabold uppercase text-tertiary my-3">
{post.title}
</h2>
<div className="flex md:gap-20 gap-5 relative mt-10 md:flex-row flex-col">
<article>
<div
className="text-xl"
dangerouslySetInnerHTML={{ __html: post.content }}
/>
</article>
</div>
</div>
</div>
);
};
export default page;
Лістинг програмного коду сторінки app/author/[slug]/page.tsx
import { FC } from 'react';
import { getPostsByAuthorSlug } from 'api/controllers/postsController';
import BlogCard from 'components/shared/BlogCard';
import TopPosts from 'components/shared/TopPosts';
import { AuthorType } from 'types/authorType';
import { postsAdapter } from 'utils/postsAdapter';
const Page: FC<{ params: AuthorType }> = async ({ params }) => {
const { id } = params;
const postsQuery = await getPostsByAuthorSlug(id);
const posts = postsAdapter(postsQuery.data);
return (
<section className="w-[95%] mx-auto max-w-[1450px]">
<div className="w-full text-center">
<h2 className="text-center text-2xl font-extrabold uppercase text-tertiary inline-block px-
2 mb-10">
Posts by Author
</h2>
</div>
<div className="grid lg:grid-cols-3 grid-cols-1 lg:gap-10 w-[95%] mx-auto max-w-
[1450px] overflow-y-hidden h-fit mt-10">
<div className="flex flex-col gap-10 h-full col-span-2">
{posts.length ? (
posts.map((post) => <BlogCard post={post} key={post.id} />)
) : (
<p>Loading...</p>
)}
</div>
<TopPosts posts={posts} />
</div>
</section>
);
};
export default Page;
Лістинг програмного коду файлу app/about/page.tsx
import Image from 'next/image';
import Overlay from 'components/ui/Overlay';
const page = () => (
<div className="w-[95%] mx-auto max-w-[1450px]">
<div className="relative h-[500px] w-full">
<Image src="/about.jpg" fill alt="about image" className="object-cover" />
<Overlay />
<h1 className="flex absolute w-full h-full justify-center items-center text-4xl font-
extrabold uppercase text-white">
About Us
</h1>
</div>
<div className="leading-8 text-lg bg-white mt-[-80px] relative w-[90%] m-auto rounded-lg
p-5 shadow-xl text-center max-md:mt-0 max-md:w-full max-md:bg-transparent max-
md:shadow-none">
<p>
Welcome to ExploreX! We're passionate travelers dedicated to
sharing our adventures, tips, and insights to inspire your next journey.
From breathtaking destinations to hidden gems, we cover it all. Whether
you're a seasoned traveler or planning your first trip, our expert
advice, travel guides, and personal stories aim to make your travels
unforgettable. Join us as we explore diverse cultures, savor local
cuisines, and discover the world's wonders. Let's embark on
this journey together, creating memories and experiences that will last
a lifetime. Adventure awaits – let's wander and wonder together!
</p>
<div className="w-full items-center flex justify-center">
<Image src="/signature.png" width={500} height={500} alt="singnature" />
</div>
</div>
</div>
);
export default page;
Лістинг програмного коду файлу app/components/contact/contact.tsx
import Image from 'next/image';
import Button from 'components/ui/Button';
import Map from 'components/ui/Map';
import Overlay from 'components/ui/Overlay';
const page = () => (
<div>
<div className="relative h-[500px] w-full">
<Image
src="/contact.jpg"
fill
alt="contact image"
className="object-cover"
/>
<Overlay />
<h1 className="flex absolute w-full h-full justify-center items-center text-4xl font-
extrabold uppercase text-white">
Contact Us
</h1>
</div>
<div className="p-10 leading-8 text-lg mt-10 relative m-auto rouded-lg text-center">
<h1 className="text-4xl font-extrabold w-full text-center uppercase text-primary mb-10">
Lets Discuss
</h1>
<form className="flex flex-col w-full gap-5">
<div className="flex gap-5 max-sm:flex-col">
<input
type="text"
placeholder="Name"
className="px-1 py-3 border-gray-300 w-full rounded-md text-gray-900 shadow-sm
ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary outline-none"
/>
<input
type="email"
placeholder="Email"
className="px-1 py-3 border-gray-300 w-full rounded-md text-gray-900 shadow-sm
ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary outline-none"
/>
</div>
<div className="flex gap-5 max-sm:flex-col">
<input
type="text"
placeholder="Subject"
className="px-1 py-3 border-gray-300 w-full rounded-md text-gray-900 shadow-sm
ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary outline-none"
/>
<input
type="tel"
placeholder="Phone"
className="px-1 py-3 border-gray-300 w-full rounded-md text-gray-900 shadow-sm
ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary outline-none"
/>
</div>
<textarea
name="message"
placeholder="Message"
rows={8}
className="px-1 py-3 border-gray-300 w-full rounded-md text-gray-900 shadow-sm
ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-primary outline-none"
/>
<div className="flex justify-center">
<Button aria="submit contact form" text="Submit" />
</div>
</form>
</div>
<Map />
</div>
);
export default page;
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Study Shows Business Blogging Leads to 55% More Website Visitors.
[Електронний ресурс]. – Режим доступу: https://blog.hubspot.com/marketing/do-
blog-posts-lead-to-purchases. Дата звернення – 28.04.2024.
2. 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.04.2024
3. Organic search responsible for 53% of all site traffic, paid 15% [Study].
[Електронний ресурс]. – Режим доступу: https://searchengineland.com/organic-
search-responsible-for-53-of-all-site-traffic-paid-15-study-322298/. Дата
звернення – 28.04.2024
4. How Many Blogs Are There Worldwide in 2024?. [Електронний
ресурс]. – Режим доступу: https://masterblogging.com/how-many-blogs-are-there.
Дата звернення – 29.04.2024.
5. Blogging Statistics 2023: Ultimate List with 47 Facts and Stats.
[Електронний ресурс]. – Режим доступу: https://firstsiteguide.com/blogging-
stats/. Дата звернення – 29.04.2024.
6. How Fast Should My Website Be? [Електронний ресурс]. – Режим
доступу: https://www.webfx.com/blog/web-design/how-fast-should-my-website-
be. Дата звернення – 01.05.2024.
7. Фреймворки React: Next.js, Remix, Gatsby - який обрати для
новачка? [Електронний ресурс]. – Режим доступу:
https://drukarnia.com.ua/articles/freimvorki-react-next-js-remix-gatsby-yakii-
obrati-dlya-novachka-S65wh. Дата звернення – 02.05.2024.
8. Rendering. [Електронний ресурс]. – Режим доступу:
https://nextjs.org/docs/app/building-your-application/rendering. Дата звернення
05.05.2024.
9. How to use Next.js as a static site generator. [Електронний ресурс]. –
Режим доступу: https://pagepro.co/blog/how-to-use-next-js-static-site-generator.
Дата звернення 05.05.2024.
10. Hot Module Replacement . [Електронний ресурс]. – Режим
доступу: https://webpack.js.org/concepts/hot-module-replacement. Дата
звернення 05.05.2024.
11. Start a New React Project [Електронний ресурс]. – Режим доступу:
https://react.dev/learn/start-a-new-react-project. Дата звернення – 05.05.2024.
12. WordPress Market Share Statistics. [Електронний ресурс]. – Режим
доступу: https://kinsta.com/wordpress-market-share. Дата звернення –
08.05.2024.
13. WordPress Security Based on Facts and Statistics. [Електронний
ресурс]. – Режим доступу: https://wpmayor.com/wordpress-security-based-on-
facts-and-statistics. Дата звернення – 08.05.2024.
14. The Dangers of Installing Nulled WordPress Themes & Plugins.
[Електронний ресурс]. – Режим доступу: https://blog.sucuri.net/2023/02/the-
dangers-of-installing-nulled-wordpress-themes-and-plugins.html. Дата звернення
– 08.05.2024.
15. How To Create a Headless WordPress Site With React.js.
[Електронний ресурс]. – Режим доступу: https://kinsta.com/blog/wordpress-
react/. Дата звернення – 10.05.2024.
16. Docker overview. [Електронний ресурс]. – Режим доступу:
https://docs.docker.com/get-started/overview/. Дата звернення – 10.05.2024.
17. Документация. [Електронний ресурс]. – Режим доступу:
https://ospanel.io/docs/. Дата звернення – 10.05.2024.
18. Node.js v22.2.0 documentation. [Електронний ресурс]. – Режим
доступу: https://nodejs.org/docs/latest/api/. Дата звернення – 10.05.2024.
19. Routing Fundamentals. [Електронний ресурс]. – Режим доступу:
https://nextjs.org/docs/app/building-your-application/routing. Дата звернення –
12.05.2024.
20. Get started with Tailwind CSS. [Електронний ресурс]. – Режим
доступу: https://tailwindcss.com/docs/installation. Дата звернення – 12.05.2024.
21. WordPress Market Share Statistics. [Електронний ресурс]. – Режим
доступу: https://kinsta.com/wordpress-market-share. Дата звернення –
12.05.2024.
22. Installation. [Електронний ресурс]. – Режим доступу:
https://tanstack.com/query/latest/docs/framework/react/installation. Дата
звернення – 12.05.2024.