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/6195| Title: | Сайт-виставка пірографічних картин |
| Authors: | Оксамитна, Любов Павлівна Компанєєць, Артем Богданович |
| Keywords: | ІНФОРМАЦІЙНІ ТЕХНОЛОГІЇ;САЙТ-ВИСТАВКА;ПІРОГРАФІЯ;ПІРОГРАФІЧНІ КАРТИНИ;ПРОЕКТУВАННЯ;БАЗА ДАНИХ. |
| Issue Date: | 14-Jun-2023 |
| Abstract: | В Україні пірографія є досить мало поширеним видом мистецтва. Тема кваліфікаційної роботи бакалавра є актуальною не лише для галузі інформатики та цифрового мистецтва, але й для ширшого культурного контексту. Вона має на меті дослідити потенціал поєднання традиційних форм мистецтва з сучасними технологіями для створення унікального та цікавого культурного досвіду мистецтвознавців. Це сприятиме розвитку та популяризації пірографії як виду мистецтва, а також використанню ІТ-технологій у сфері мистецтва та культури. Мета кваліфікаційної роботи бакалавра – створення сайту-виставки пірографічних картин, який збільшить популяризацію даного виду мистецтва. Об’єкт дослідження: діяльність пірографічних мистецьких об’єднань за інтересами. Предмет дослідження: сайт-виставка пірографічних картин. Основні положення і результати кваліфікаційної роботи бакалавра доповідалися і були обговорені на студентській науково-практичній конференції ЧДТУ (Черкаси, 2023). |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6195 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Компанєєць Артем_КН-1901_2022-2023.pdf Restricted Access | 3.15 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Сайт-виставка пірографічних картин»
Виконав: студент 4 курсу, групи КН-1901
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування
Компанєєць Артем Богданович
Керівник __________ Оксамитна Л.П.
(прізвище та ініціали)
Рецензент __________ Стась С.В.
(прізвище та ініціали)
Черкаси 2023 року
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2023 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Компанєйцю Артему Богдановичу
(прізвище, ім’я, по батькові)
1. Тема роботи Сайт-виставка пірографічних картин
Керівник роботи Оксамитна Л.П., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «24» лютого 2023 р. №43/04.
2. Строк подання студентом роботи до 12 червня 2023 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Дослідження пірографії як виду мистецтва.
4.2. Проектування та розробка сайту-виставки пірографічних картин.
4.3. Реалізація сайту-виставки «Wood Burning Ukraine».
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 32003-01.
5 .2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5.4. Додаток Г. Публікація по темі кваліфікаційної роботи бакалавра в збірнику тез ЧДТУ.
5.5. Презентація у вигляді 32 слайдів.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 11.01.2023
КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ з/п Назва етапів кваліфікаційної роботи бакалавра Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
11.01.2023 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
до 13.02.2023 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної
до 15.03.2023 Виконано
роботи бакалавра.
4 Написання аналітичного розділу кваліфікаційної
до 01.04.2023 Виконано
роботи бакалавра.
5 Написання практичних розділів й висновків до
до 01.05.2023 Виконано
кваліфікаційної роботи бакалавра.
6 Передзахист кваліфікаційної роботи бакалавра
01.06.2023 Виконано
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 12.06.2023 Виконано
8 Захист кваліфікаційної роботи бакалавра. 14.06.2023 Виконано
Студент _____________________________ Компанєєць А. Б.
(підпис)
Керівник роботи ____________________________ Оксамитна Л. П.
(підпис)
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 63 с., 37 рис., 1 таблицю, 21
використаних джерел, 4 додатки.
Актуальність теми. В Україні пірографія є досить мало поширеним видом
мистецтва. Тема кваліфікаційної роботи бакалавра є актуальною не лише для галузі
інформатики та цифрового мистецтва, але й для ширшого культурного контексту.
Воно має на меті дослідити потенціал поєднання традиційних форм мистецтва з
сучасними технологіями для створення унікального та цікавого культурного досвіду
мистецтвознавців. Це сприятиме розвитку та популяризації пірографії як виду
мистецтва, а також використанню ІТ-технологій у сфері мистецтва та культури.
Мета роботи і задачі дослідження. Мета кваліфікаційної роботи бакалавра –
створення сайту-виставки пірографічних картин, який збільшить популяризацію
даного виду мистецтва.
Для досягнення поставленої мети були поставлені такі завдання:
дослідити пірографію як вид мистецтва;
виконати порівняльний аналіз існуючих аналогів сайтів пірографічних картин;
розробити базу даних;
провести аналіз програмних рішень для розробки сайту-виставки
пірографічних картин;
розробити сайт-виставку пірографічних картин «Wood Burning Ukraine»;
провести тестування сайту «Wood Burning Ukraine».
Об’єкт дослідження: діяльність пірографічних мистецьких об’єднань за
інтересами.
Предмет дослідження: сайт-виставка пірографічних картин.
Методи дослідження.
– теоретичний (аналіз літератури з проблеми дослідження);
– емпіричний – полягав у спостереженні та налаштуванні сайту пірографічних
картин;
– порівняльний – для здійснення порівнянь сайтів пірографічних картин.
Апробація результатів роботи. Основні положення і результати
кваліфікаційної роботи бакалавра доповідалися і були обговорені на студентській
науково-практичній конференції ЧДТУ (Черкаси, 2023).
Публікації. Результати кваліфікаційної роботи бакалавра опубліковані у
збірнику тез доповідей студентської науково-практичної конференції ЧДТУ:
Компанєєць А. Б., Оксамитна Л. П. Сайт-виставка пірографічних картин. Тези
доповідей студентської науково-практичної конференції ЧДТУ, 18-20 квітня 2023 р.
Черкаси : ЧДТУ, 2023. С. 29.
Перелік ключових слів: ІНФОРМАЦІЙНІ ТЕХНОЛОГІЇ, САЙТ-ВИСТАВКА,
ПІРОГРАФІЯ, ПІРОГРАФІЧНІ КАРТИНИ, ПРОЕКТУВАННЯ, БАЗА ДАНИХ.
ABSTRACT
Master’s work contains. 63 pages, 37 figures, 1 table, 21 sources used, 4
attachments.
Actuality of theme. In Ukraine, pyrography is a fairly uncommon art form. The topic
of the bachelor’s thesis is relevant not only to the field of computer science and digital art,
but also to the broader cultural context. It aims to explore the potential of combining
traditional art forms with modern technologies to create a unique and interesting cultural
experience for art historians. This will contribute to the development and popularization of
pyrography as an art form, as well as the use of IT technologies in the field of art and culture.
Purpose and tasks of the research. The goal of the bachelor's qualification work is
to create a site-exhibition of pyrographic paintings, which will increase the popularization
of this type of art.
To achieve this goal, the following tasks were set:
explore pyrography as an art form;
perform a comparative analysis of existing analogues of sites of pyrographic
paintings;
develop a database;
conduct an analysis of software solutions for the development of a site-exhibition of
pyrographic paintings;
to develop a site-exhibition of pyrographic paintings «Wood Burning Ukraine»;
conduct testing of the «Wood Burning Ukraine» site.
The object of research: website development.
The subject of research: website-exhibition of pyrographic paintings.
Research methods:
theoretical (analysis of the literature on the research problem);
empirical – to observe and set up a pyrographic paintings website;
comparative – to compare pyrographic paintings websites.
Approval of the results of work. The main provisions and results of the bachelor’s
qualification work were reported and discussed at the student scientific and practical
conference of the ChSTU.
Publications. The results of the bachelor’s thesis are published in the collection of
abstracts of the student scientific and practical conference of the ChSTU:
Kompanyeyets A. B., Oksamytna L. P. Site-exhibition of pyrographic paintings. Abstracts
of the student scientific and practical conferences of the ChDTU, 18-20 April 2023
Cherkasy: ChDTU, 2023. P. 29.
The list of keywords: INFORMATION TECHNOLOGY, WEBSITE
EXHIBITION, PYROGRAPHY, PYROGRAPHIC PAINTINGS, DESIGN, DATABASE.
7
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ ........ 9
ВСТУП ................................................................................................................................ 10
1 ДОСЛІДЖЕННЯ ПІРОГРАФІЇ ЯК ВИДУ МИСТЕЦТВА ........................................ 12
1.1 Пірографія та сучасні інформаційні технології .................................................... 12
1.2 Порівняльний аналіз сайтів пірографічних картин .............................................. 13
1.2.1 Аналіз сайту «Pyro Craft» ................................................................................. 14
1.2.2 Аналіз сайту «Wood burning art» ..................................................................... 16
1.2.3 Аналіз сайту «Julie Bender Fine Art» ............................................................... 17
1.2.4 Аналіз сайту «Charred Wood» .......................................................................... 18
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій ............................... 20
1.4 Визначення технічних вимог до системи кінцевого користувача ...................... 21
1.5 Визначення вимог до розроблювального сайту «Wood Burning Ukraine» .........22
Висновки до розділу 1 ................................................................................................... 22
2 ПРОЕКТУВАННЯ ТА РОЗРОБКА САЙТУ-ВИСТАВКИ ПІРОГРАФІЧНИХ
КАРТИН ............................................................................................................................. 23
2.1 Вибір технологій для створення сайту-виставки пірографічних картин ........... 23
2.2 Проектування структури бази даних ..................................................................... 28
2.3 Проектування серверної частини ........................................................................... 32
2.4 Дизайн веб-інтерфейсу користувача ...................................................................... 37
Висновки до розділу 2 ................................................................................................... 42
3 РЕАЛІЗАЦІЯ САЙТУ-ВИСТАВКИ «WOOD BURNING UKRAINE» ..................... 43
3.1 Архітектура сайту-виставки ................................................................................... 43
3.2 Реалізація розробки сайту-виставки пірографічних картин ................................ 47
3.3 Розгортання сайту-виставки пірографічних картин ............................................. 52
3.4 Тестування сайту-виставки «Wood Burning Ukraine» .......................................... 56
Висновки до розділу 3 ................................................................................................... 60
ВИСНОВКИ ....................................................................................................................... 61
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 62
8
Додаток А. Специфікація 482.ЧДТУ. 32003-01 ……………………………………… 64
Додаток Б. Текст програми............................................................................................... 66
Додаток В. Інструкція користувача ................................................................................. 80
Додаток Г. Публікація по темі кваліфікаційної роботи бакалавра .............................. 82
9
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
ІТ – інформаційні технології;
БД – база даних;
ПЗ – програмне забезпечення;
HTML – HyperText Markup Language;
SCSS – Sassy Cascading Style Sheets;
TS – TypeScript.
10
ВСТУП
В сучасному світі, інформаційні технології (ІТ) займають важливе місце у житті
людей, забезпечуючи швидкий та зручний доступ до різноманітної інформації, розваг
та послуг. У цьому контексті важливо не лише використовувати технології для
задоволення потреб суспільства, але й підвищувати культурний рівень населення.
Серед таких видів мистецтва, які зміг знайти нове життя завдяки ІТ-технологіям, є
пірографія.
Пірографія – це мистецтво створення малюнків та зображень на поверхнях
дерева, застосовуючи для цього різноманітні інструменти, що нагріваються [1].
Цей вид мистецтва, хоч і має старовинне коріння та знайшов друге життя
завдяки сучасним технологіям, а саме, Інтернету. Створення сайту-виставки
пірографічних картин є важливим кроком у популяризації цього виду мистецтва та
приведення його до широкої аудиторії.
Актуальність кваліфікаційної роботи бакалавра обумовлена необхідністю
людей в спілкуванні, обміні досвідом, фінансової та моральної підтримки в складних
ситуаціях, а також в підвищенні культурного рівня життя.
В Україні пірографія є досить мало поширеним видом мистецтва, а ІТ-
технології знаходяться у стадії активного розвитку, що дає можливість поєднувати їх
у здійсненні проекту з популяризації пірографії.
Крім того, пандемія COVID-19 прискорила тенденцію віртуального
спілкування та взаємодії онлайн. Оскільки багато людей залишаються вдома і
проводять більше часу онлайн, зростає попит на цифровий контент і розваги. Це
створює можливість для поєднання традиційних форм мистецтва, таких як
пірографія, із сучасними технологіями для створення унікального та цікавого
цифрового досвіду.
Реалізація проектування та створення сайту-виставки пірографічних картин
дозволить зробити це мистецтво більш доступним та зрозумілим для широкої
аудиторії, а також стане стимулом для розвитку самого виду мистецтва.
11
Дослідження, що розглядається в кваліфікаційній роботі бакалавра, є
актуальним не лише для галузі інформатики та цифрового мистецтва, але й для
ширшого культурного контексту. Воно має на меті дослідити потенціал поєднання
традиційних форм мистецтва з сучасними технологіями для створення унікального та
цікавого культурного досвіду мистецтвознавців. Це сприятиме розвитку та
популяризації пірографії як виду мистецтва, а також використанню ІТ-технологій у
сфері мистецтва та культури.
Мета кваліфікаційної роботи бакалавра – проектування та створення сайту-
виставки пірографічних картин, який збільшить популяризацію даного виду
мистецтва.
Для досягнення поставленої мети були поставлені такі завдання:
дослідити пірографію як вид мистецтва;
виконати порівняльний аналіз існуючих аналогів сайтів пірографічних картин;
розробити базу даних;
провести аналіз програмних рішень для розробки сайту-виставки
пірографічних картин;
розробити сайт-виставку пірографічних картин «Wood Burning Ukraine»;
провести тестування сайту «Wood Burning Ukraine».
Об’єкт і предмет дослідження.
Об’єктом дослідження є діяльність пірографічних мистецьких об’єднань за
інтересами.
Предметом дослідження є сайт-виставка пірографічних картин.
Для вирішення поставлених завдань були застосовані наступні методи
дослідження: теоретичний (аналіз літератури з проблеми дослідження); емпіричний –
полягав у спостереженні та налаштуванні сайту пірографічних картин; порівняльний
– для здійснення порівнянь сайтів пірографічних картин.
Для створення програмного забезпечення використано новітні технології, а
саме: NextJS, HTML, SCSS, TypeScript і база даних MongoDB. Обрані технології
задовольняють всім функціональним і не функціональним вимогам до такого типу
програмного забезпечення (ПЗ).
12
1 ДОСЛІДЖЕННЯ ПІРОГРАФІЇ ЯК ВИДУ МИСТЕЦТВА
1.1 Пірографія та сучасні інформаційні технології
Пірографія – це мистецтво створення малюнків, використовуючи техніку
паління деревини за допомогою нагріву. Нещодавно пірографія стала популярною не
тільки як хобі, а й як вид мистецтва [2].
Пірографія – це художнє ремесло, яке полягає в випалюванні зображень на
деревній основі. Свій початок випалювання по дереву бере з далеких років
Стародавнього Єгипту. Особливо популярна пірографія була в африканських племен.
Розвиток пірографії припав на другу половину ХХ століття. Це пов’язано з
виникненням електричного пірографа – приладу для гарячого гравіювання або
випалювання. Майстра, який володіє пірографією, називають пірографістом.
Пірографія в перекладі з грецького означає «гаряче малювання». Цей прийом отримав
широке поширення тільки в другій половині ХХ ст. після винаходу електричного
приладу для випалювання. Раніше цей спосіб був досить рідкісним і його майстри
застосовували для гравіювання по кістці, дереві і шкірі. Малюнок випалювали
спеціальними інструментами, які нагрівали на газовому пальнику або спиртівці, що
було дуже важко [2].
Використання технології пірографії може допомогти художникам розширити
свій творчий потенціал і спростити рутинну роботу. Сьогодні багато художників
знаходять нові способи використання технологій для створення своїх пірографічних
шедеврів. Одним із основних засобів спілкування є візуальне сприйняття, тому
образотворче мистецтво має важливе значення в нашому житті.
На сьогоднішній день мистецтво випалювання по дереву переживає нову хвилю
популярності і оновлення. Швидше за все, вина цього поява нових, простих у
використанні приладів випалювання – випалювача. Як би там не було, пірографія є
незвичайним видом мистецтва, що вражає уяву людей витонченістю і таємничістю
своїх ескізів. Пірографія є одним із видів мистецтва, який щоденно завойовує все
більше прихильників.
13
Завдяки технічному прогресу пірографія стала доступнішою і може
поєднуватися з ІТ-технологіями. На сучасному етапі діяльності мистецтвознавців
більшість художників використовують комп’ютери для створення малюнків перед
перенесенням їх на папір чи інші матеріали. Подібним чином пірографічні малюнки
можна створювати на комп’ютері, а потім переносити на дерево. Це дає можливість
створювати складні конструкції, які важче виготовити своїми руками.
Одним із основних способів поєднання пірографії та інформаційних технологій
є використання комп’ютерних програм для побудови малюнків та перенесення їх на
поверхню. Наприклад, за допомогою графічних програм можна створювати векторні
малюнки, які потім переносяться на поверхню за допомогою лазерної різки або
гравіювання. Цей спосіб дозволяє створювати дуже складні малюнки з великою
кількістю деталей, які раніше було б дуже важко зробити вручну.
Використання сучасних ІТ-технологій, таких як веб-сайти, допомагає зробити
пірографію більш популярною та доступною для людей у різних куточках світу.
Окрім цього, сучасні ІТ-технології дозволяють вивчати пірографію та
знаходити нові ідеї та рішення в області мистецтва. Наприклад, можна
використовувати онлайн-курси та вебінари для вивчення основ пірографії та
розширення знань у цій галузі. Також, на спеціалізованих форумах та соціальних
мережах можна спілкуватись з іншими митцями та ділитись своїми досягненнями.
Отже, можна з упевненістю сказати, що ІТ-технології значно допомагають у
популяризації та розвитку пірографії, збільшуючи доступність та якість витворів
мистецтва, а також сприяють поглибленню знань та спрощують обмін досвідом між
митцями шляхом використання мережі Інтернет.
1.2 Порівняльний аналіз сайтів пірографічних картин
Для того, щоб визначитися з тим, як саме буде виглядати сайт-виставка
пірографічних картин, необхідно вивчити існуючі аналоги. Для аналізу було обрано
декілька сайтів зі схожою тематикою і призначенням, детальний аналіз яких
представлено далі.
14
1.2.1. Аналіз сайту «Pyro Craft». Першим розглянемо сайт «Pyro Craft»,
проаналізувавши його дизайн та функціонал [3]. Сайт «Pyro Craft» знаходиться за
адресою: https://pyro-craft.com.ua.
Головна сторінка сайту «Pyro Craft» представлена на рис. 1.1.
Рисунок 1.1 – Головна сторінка сайту «Pyro Craft»
Проаналізуємо недоліки та переваги сайту «Pyro Craft».
До недоліків сайту «Pyro Craft» можна віднести бажання власника сайту
нав’язати свої послуги. Це можна зрозуміти по спливаючому повідомленню, як
показано на рисунку 1.2.
Також не подобається те, що вся інформація знаходиться на одній сторінці.
Наприклад, якщо натиснути на будь-який розділ у шапці сайту, як от «Ціни та
розміри», то користувач опиниться на тому місці сторінки, де знаходиться інформація
про обраний розділ, а не на новій сторінці. Ще один недолік полягає в тому, що сайт
створений для продажу картин із випалювання, як це видно з назви сайту та на
початку сторінки, а по факту можна також замовити й листівки. Тому це виглядає
непрофесійно.
До переваг сайту «Pyro Craft» варто віднести достатню інформативність та
насиченість контентом, а також функціональність. Вражає те, що вся інформація
подана на сайті, є зрозумілою. Сайт, у цілому, досить зручний в користуванні.
15
Рисунок 1.2 – Недолік (спливаюче повідомлення) сайту «Pyro Craft»
Із сайту відомо, що майстерня «Pyro Craft» випалює портрети вже два роки. За
цей час вони випалили портрети для 1500 замовників із різних куточків України. У
своїх відгуках клієнти відзначають високу якість картин, хорошу упаковку, високу
швидкість виготовлення та доставки, а також те, що портрети можна випалювати на
дереві. Замовники також цінують те, що портрет можна подарувати, а дерево, на
якому випалюються портрети, найвищої якості. Замовлення обробляються швидко,
майже 90 % з них доставляються на наступний день. Робота над портретом
починається тільки після погодження замовником попереднього макету. Ціни на
картини випалювання по дереву доступні для загального огляду. Рамку та упаковку
замовник отримує в подарунок від майстерні. При замовленні портрета, користувач
може вибрати будь-який зручний спосіб доставки. Немає необхідності підписуватися
на будь-які служби доставки. Оплатити замовлення можна у відділенні служби
доставки післяплатою. Підприємство сплачує податки та видає фіскальний чек на
кожне замовлення [3].
Не дивлячись на певні недоліки сайту, він вважається одним з кращих сайтів
пірографічних картин.
16
1.2.2. Аналіз сайту «Wood burning art». Другим в роботі проаналізовано сайт
пірографічних картин «Wood burning art» [4]. Сайт «Wood burning art» знаходиться за
адресою: http://www.woodburningart.co.uk.
Головна сторінка сайту «Wood burning art» представлена на рис. 1.3.
Рисунок 1.3 – Головна сторінка сайту «Wood burning art»
Сайт «Wood burning art» – це сайт майстрині з випалювання картин по дереву
Даніель Діксон. Як розповідає сама майстриня вона виросла в Корнуолі,
Великобританія та спочатку вивчала ілюстрацію. Потім змінила кар’єру та вивчала
садівництво, зараз же вона головний садівник у маєтку в Корнуолі. Усе ще
продовжуючи свою мистецьку практику намагаючись зробити етикетки рослин для
саду, вона відкрила для себе пірографію та почала випалювати назви рослин на
дерев’яних етикетках. Тож вона перейшла в пірографію замість малювання фарбами
для створення витворів мистецтва. Для цього вона використовує інструмент, який
пропускає електрику через дротяне вістря, яке нагрівається, і таким чином робить
позначки та лінії на дереві. Деревину, безпосередньо липу, бере в маєтку, де працює.
Даніель використовує саме липу, оскільки вона має гладку поверхню та блідий колір,
завдяки чому картини виходять дуже виразними. Випалювання займає дуже багато
часу, тому що Даніель полюбляє робити кожну деталь якомога витонченою, тож для
виготовлення однієї роботи може знадобитися понад 60 годин. Найулюбленіша
17
тематика майстрині, як правило, це тварини, оскільки вона відчуває певний зв’язок із
ними і їй подобається намагатися відтворити їхні емоції та душу [4].
Для цього сайту також притаманні переваги та недоліки.
До переваг сайту «Wood burning art» можна віднести те, що сайт виглядає
досить привабливо, а також те, що майстриня додала короткий опис про себе, як вона
прийшла до цього виду діяльності й чим займається в повсякденному житті. Це
мимоволі зближує потенційного клієнта з виконавцем робіт. Знайомство з автором
створює дружню атмосферу й бажання подальшого спілкування з власницею даного
сайту.
Недоліки сайту сайту «Wood burning art» – це повільне завантаження контенту
у зв’язку з тим, що сайт створений за допомогою CMS SITE123 і, як наслідок, як і всі
сайти, що створені за допомогою CMS, має відносно низьку продуктивність.
Безумовно, з цього сайту є дещо, що можна використати для власної розробки.
1.2.3. Аналіз сайту «Julie Bender Fine Art». Наступним в роботі
проаналізовано сайт пірографічних картин «Julie Bender Fine Art» [5]. Сайт «Julie
Bender Fine Art» знаходиться за адресою: http://www.juliebender.com.
Сайт «Julie Bender Fine Art» – це сайт художниці Джулі Бендер, яка народилася
в Сент-Луїсі, штат Міссурі та проживає в Лавленді, штат Колорадо. Джулі все життя,
із самого дитинства, захоплювалась малюванням тварин. Будучи самоучкою в
мистецтві пірографії, вона постійно знаходить інноваційні способи розвитку своєї
творчості та впроваджує нові навички та знання, щоби бути на плаву в конкурентному
світі образотворчого мистецтва. Її кар’єра включає продаж робіт на міжнародному
рівні, виставки в музеях, викладання, публікації у великих виданнях, участь на
великих міжнародних виставках із журі та нагороди на цих виставках. Вона
насолоджується відданістю своїх студентів, багато, з яких продовжили будувати
власну мистецьку кар’єру після проходження її курсів. Пристрасть Джулі до
пірографії поєднується з її точним і майстерним зображенням тварин. Природний світ
заходу країни є постійним джерелом її натхнення. Вона часто відвідує високогір’я
Колорадо, прерії, ранчо та родео в пошуках натхнення для створення своїх витворів
мистецтва. Вона особливо захоплюється тим рідкісним моментом, коли вона бачить
18
якусь сцену або незвичну поведінку тварин, що перехоплює подих та змушує її серце
битися частіше – це й надихає її розпочати нову роботу [5].
Головна сторінка сайту «Julie Bender Fine Art» представлена на рис. 1.4.
Рисунок 1.4 – Головна сторінка сайту «Julie Bender Fine Art»
Розглянемо переваги та недоліки сайту «Julie Bender Fine Art».
Переваги сайту «Julie Bender Fine Art» полягають у тому, що він містить
аутентичну назву в шапці. Це виглядає досить оригінально. Також сайт містить багато
розділів, деякі, з яких поділяються на підрозділи. Завдяки цьому матеріал розміщений
на даному сайті виглядає впорядковано.
Недоліки сайту «Julie Bender Fine Art» полягають у тому, що оформлення сайту,
сам дизайн, виглядає непрофесійно. Невеликий контраст між фоном та деякими
надписами та й загалом весь користувацький інтерфейс виглядає тьмяно. Із цього
можна зробити висновок, що у виконавців, котрі створювали сайт, або в замовника,
не було натхнення, або бюджету для створення прийнятного дизайну. Дизайн є
головним чинником, що спонукає користувача зацікавитись ресурсом і тим паче
бажати замовити послуги чи товар, якщо це бізнес-ресурс.
1.2.4. Аналіз сайту «Charred Wood». Останнім в кваліфікаційні роботі
бакалавра проаналізовано сайт пірографічних картин «Charred Wood» [6]. Сайт
«Charred Wood» знаходиться за адресою: http://www.charredwooduk.com.
19
Головна сторінка сайту «Charred Wood» представлена на рис. 1.5.
Рисунок 1.5 – Головна сторінка сайту «Charred Wood»
«Charred Wood» – це невеликий сімейний бізнес у Великобританії в
Нортумберленді, який закуповує та підготовляє деревину взяту із шотландських
кордонів та вручну випалює дизайн на вибір клієнта, щоб зробити унікальні та якісні
картини. Вони використовують пірографічні ручки та паяльні лампи для
виготовлення кожного виробу за допомогою техніки випалювання деревини.
Хоча більшість їхніх картин є настінними прикрасами, вони можуть виготовити
будь-який витвір мистецтва на замовлення відповідно до вимог або ідей клієнта.
Макет можна взяти з фотографії, або майстри можуть створити дизайн на основі ідей,
які можна їм надіслати, також можна додати персоналізований надпис на будь-яку
дошку. Щоб зробити замовлення треба вибрати високоякісну фотографію та
надіслати її електронною поштою або надіслати повідомлення в соціальних мережах.
Після цього компанія надає варіанти розміру, типу деревини та узгоджує будь-які
інші побажання, які замовник хоче реалізувати. Коли всі деталі узгоджені і клієнт
підтверджує замовлення, це займає приблизно 2/3 тижні, щоб виконати роботу та
доставити її до замовника.
Переваги сайту «Charred Wood» полягають у тому, що на головній сторінці
користувач у три прості кроки може дізнатися, чим займаються ці люди, як
20
виконуються роботи та, як саме зробити замовлення. Усе дуже просто, що позбавляє
потреби зайвий раз шукати потрібну інформацію та витрачати додатковий час.
Недоліки цього сайту полягають у тому, що він розроблений за допомогою CMS
Weebly. Це створює проблеми з продуктивністю, а саме – проблеми зі швидкістю
завантаження картинок, що може позбавити потенційного покупця бажання
замовляти роботу на цьому сайті. Також основний шрифт даного сайту достатньо
маленький, користувачеві не зручно читати текст, бо треба придивлятися. Це не
тільки не зручно, а ще і шкідливо, тому що це дає зайву напругу на очі.
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій
Для порівняння існуючих рішень розглянутих реалізацій були обрані наступні
критерії: дизайн; швидкість завантаження; професійність; зручність;
інформативність; функціональність; насиченість контентом; оригінальність.
Беручи до уваги порівняння сайтів зазначених у таблиці 1.1 можна виділити такі
основні характеристики: всі вищезгадані ресурси є сайтами, тематикою даних сайтів
є пірографія, на кожному сайті можна зробити замовлення, а також є контакти для
того, щоб замовник витвору мистецтва зміг узгоджувати деталі та комунікувати з
виконавцем. Слід зауважити, що розглянуті аналоги не є ідеальними.
Проаналізувавши існуючі рішення розглянутих реалізацій, в кваліфікаційній
роботі бакалавра при розробці сайту-виставки «Wood Burning Ukraine» пірографічних
картин пропонується звернути увагу на такі моменти:
– онлайн сервіс «Wood Burning Ukraine» повинен мати привабливий дизайн, бути
інформативним, зручним у користуванні та оригінальним;
– онлайн сервіс «Wood Burning Ukraine» повинен мати гарну швидкість
завантаження контенту;
– онлайн сервіс «Wood Burning Ukraine» повинен мати форму для замовлення, а
також контактну інформацію майстра.
У таблиці 1.1 представлено порівняльний аналіз розглянутих сайтів, а саме:
«Pyro Craft», «Wood burning art», «Julie Bender Fine Art», «Charred Wood».
21
Таблиця 1.1 – Таблиця порівнянь існуючих рішень розглянутих реалізацій
Назва сайту
Критерії
«Pyro «Julie Bender «Charred
порівняння сайтів «Wood burning art»
Craft» Fine Art» Wood»
Дизайн
4 4 3 3
(0-5)
Швидкість
завантаження 5 3 3 3
(0-5)
Професійність
3 4 5 4
(0-5)
Зручність
5 4 4 5
(0-5)
Інформативність
5 5 5 5
(0-5)
Функціональність
4 3 5 4
(0-5)
Насиченість
контентом 5 4 5 4
(0-5)
Оригінальність
3 4 5 3
(0-5)
1.4 Визначення технічних вимог до системи кінцевого користувача
Розглянемо технічні вимоги до системи кінцевого користувача. Щоб
запустити програмне забезпечення, пристрій має відповідати певним системним
вимогам. Ці вимоги можуть описувати як обладнання, яке потрібне пристрою
(наприклад, обсяг оперативної пам’яті чи місця на жорсткому диску), так і
програмне забезпечення (необхідні драйвери, операційна система тощо). Іноді
встановлюються максимальні системні вимоги, щоб забезпечити повне
використання потенціалу програмного забезпечення та доступність усіх служб.
Мінімальні системні вимоги для роботи онлайн сервісу:
22
− операційна система: будь-яка;
− процесор: будь-який Intel Celeron;
− об’єм оперативної пам’яті: 4 ГБ;
− можливість запускати браузер.
1.5 Визначення вимог до розроблювального сайту «Wood Burning
Ukraine»
Основна мета розробки кваліфікаційної роботи бакалавра – уніфікувати
концепцію, щоб вся необхідна для роботи інформація зберігалася на одному сайті.
Сайт-виставка пірографічних картин «Wood Burning Ukraine» має бути
кросбраузерним та невибагливим до системних ресурсів. Його інтерфейс повинен
бути мінімальним, сучасним і інтуїтивно зрозумілим. В розробленому сайті
пірографічних картин потрібно реалізувати наступні функції:
− можливість красивого перегляду картин на головній сторінці в «каруселі»;
− вкладка креативної галереї;
− можливість замовити картину;
− перегляд контактів;
− легке додавання контенту до сайту за допомогою адмін-панелі.
Висновки до розділу 1
В даному розділі досліджено предметну область, а саме: пірографію як вид
мистецтва та сучасні інформаційні технології.
Виконано порівняльний аналіз сайтів аналогів пірографічних картин: «Pyro
Craft», «Wood burning art», «Julie Bender Fine Art», «Charred Wood».
Представлено таблицю порівнянь існуючих рішень розглянутих реалізацій.
Визначено технічні вимоги до системи кінцевого користувача та сайту-виставки
пірографічних картин «Wood Burning Ukraine».
23
2 ПРОЕКТУВАННЯ ТА РОЗРОБКА САЙТУ-ВИСТАВКИ ПІРОГРАФІЧНИХ
КАРТИН
2.1 Вибір технологій для створення сайту-виставки пірографічних картин
Для створення сайту-виставки пірографічних картин «Wood Burning Ukraine» в
кваліфікаційній роботі бакалавра використано такі засоби:
− HTML, SCSS;
− основна мова програмування: TypeScript;
− фреймворк: NextJS;
− технологія Serverless;
− база даних: MongoDB.
Опишемо обґрунтованість даного вибору.
HTML (HyperText Markup Language – мова розмітки гіпертексту) – це мова
розмітки, яка використовується для створення та структурування контенту в
Інтернеті. HTML є основою більшості веб-сайтів і використовується для створення
веб-сторінок, які читаються веб-браузерами.
HTML використовує ряд тегів для створення структури та форматування
контенту. Теги беруться в кутові дужки (< >) і використовуються для позначення
початку і кінця елемента HTML. Наприклад, тег <head> використовується для
визначення заголовка HTML-документа, а тег <p> – для визначення абзацу тексту.
HTML-документи складаються з декількох елементів, зокрема:
– Оголошення типу документа: Це перший рядок HTML-документа, в якому
вказується тип створюваного документа.
– Заголовок документа: Цей розділ містить метадані про документ, такі як назва
документа, набір символів і посилання на зовнішні ресурси.
– Основний розділ: Цей розділ містить основний вміст документа, включаючи
текст, зображення, відео та інші мультимедійні дані.
HTML впроваджує засоби для:
24
– створення структурованого документа шляхом позначення структурного
складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;
– отримання інформації із Всесвітньої мережі через гіперпосилання;
– створення інтерактивних форм;
– включення зображень, звуку, відео, та інших об'єктів до тексту.
HTML є універсальною мовою і може використовуватися для створення
широкого спектру веб-сторінок, від простих текстових сторінок до складних веб-
додатків. HTML також можна комбінувати з іншими веб-технологіями, такими як
CSS (каскадні таблиці стилів) і JavaScript, для створення більш динамічних та
інтерактивних веб-сторінок.
SCSS (Sassy CSS) – це препроцесор для CSS, який додає додаткову
функціональність та можливості до CSS. SCSS дозволяє розробникам писати CSS-код
більш організовано та ефективно, використовуючи такі функції, як змінні,
вкладеність та міксини [8].
Деякі з ключових можливостей SCSS включають:
– Змінні: SCSS дозволяє розробникам створювати змінні для зберігання часто
використовуваних значень, таких як кольори, шрифти або розміри. Змінні можуть
повторно використовуватися у всьому файлі SCSS і можуть допомогти зберегти код
CSS послідовним і зручним для підтримки.
– Вкладеність: SCSS дозволяє розробникам вкладати селектори CSS один в
одного, що полегшує організацію та структурування коду. Це може допомогти
поліпшити читабельність і полегшити розуміння того, як різні елементи сторінки
пов’язані один з одним.
– Міксини: SCSS дозволяє розробникам створювати міксини – багаторазові блоки
коду CSS, які можна включати в різні місця файлу. Це може допомогти зменшити
дублювання коду та покращити організацію коду.
– Успадкування: SCSS дозволяє розробникам використовувати спадковість -
функцію, яка дозволяє одному класу успадковувати властивості іншого класу. Це
може допомогти зменшити дублювання коду і полегшити підтримку узгодженості
всієї кодової бази.
25
Код SCSS компілюється у звичайний код CSS перед відправкою браузеру, тому
його можна використовувати в будь-якому веб-проекті, що використовує CSS. SCSS
часто використовується в поєднанні з іншими веб-технологіями, такими як
фреймворки JavaScript, наприклад, React, для створення більш потужних і динамічних
веб-додатків.
Next.js – це фреймворк з відкритим вихідним кодом, побудований на основі
React та Node.js. Він покликаний спростити розробку веб-додатків, надаючи набір
угод та найкращих практик для створення сучасних React-додатків, що візуалізуються
на сервері [8].
Філософія Next.js базується на кількох ключових принципах:
– Угода над конфігурацією: Next.js надає набір розумних налаштувань за
замовчуванням та угод для створення веб-додатків. Це полегшує початок роботи та
зменшує кількість шаблонного коду, який потрібно писати розробникам.
– Рендеринг на стороні сервера: Next.js підтримує рендеринг на стороні сервера з
коробки, що може покращити продуктивність та SEO веб-додатків. Серверний
рендеринг дозволяє рендерити початкову сторінку на сервері та надсилати її клієнту
у форматі HTML, що може бути швидше, ніж клієнтський рендеринг.
– Автоматичне розділення коду: Next.js автоматично розбиває код на менші
фрагменти, що може підвищити продуктивність веб-додатків за рахунок зменшення
кількості коду, який потрібно завантажувати клієнту.
– Статична генерація сайту: Next.js підтримує статичну генерацію сайтів, яка
дозволяє попередньо відображати веб-сторінки у вигляді статичних HTML-файлів.
Це може підвищити продуктивність і масштабованість веб-додатків, а також
зменшити кількість необхідних серверних ресурсів.
– Розширюваність: Next.js є дуже розширюваним і може бути налаштований для
задоволення конкретних потреб різних проектів. Він надає систему плагінів, яка
дозволяє розробникам створювати нову функціональність і можливості для своїх
додатків.
Загалом, філософія Next.js спрямована на спрощення розробки веб-додатків,
підвищення їх продуктивності та масштабованості. Надаючи набір угод і кращих
26
практик, Next.js дозволяє розробникам зосередитися на створенні автентичних
застосунків.
Serverless (безсерверність) у Next.js означає можливість розгортати та запускати
ваш додаток без необхідності виділених серверів або управління інфраструктурою.
Іншими словами, замість того, щоб налаштовувати та керувати серверами для
розміщення власного Next.js додатку, можна використовувати хмарні сервіси, такі як
AWS Lambda або Google Cloud Functions, для виконання певного коду на вимогу [9].
При безсерверному розгортанні йде оплата лише за ресурси, які фактично
використовує додаток користувача, що може призвести до значної економії коштів у
порівнянні з традиційним розгортанням на основі серверів. Крім того, безсерверні
архітектури часто пропонують кращу масштабованість, відмовостійкість і безпеку,
оскільки хмарний провайдер вирішує багато з цих проблем автоматично.
У Next.js можна використовувати безсерверні функції, також відомі як
безсерверні API або безсерверні кінцеві точки, для обробки функціональності
бекенда. Ці функції можуть бути розгорнуті як окремі, ізольовані функції, які
відповідають на HTTP-запити, що дозволяє створювати динамічні, керовані даними
додатки з легким, гнучким бекендом.
Загалом, безсерверна технологія в Next.js забезпечує зручний, економічно
ефективний спосіб створення та розгортання масштабованих веб-додатків з
мінімальними накладними витратами на інфраструктуру.
MongoDB – це популярна NoSQL-база даних документів з відкритим вихідним
кодом, яка зберігає дані у вигляді JSON-документів з динамічними схемами, що
робить її гнучкою та простою в роботі. Ось деякі ключові особливості та концепції,
пов’язані з MongoDB [10]:
– Документно-орієнтована: MongoDB зберігає дані в документах, які схожі на
об’єкти JSON. Кожен документ може мати власну унікальну структуру та поля.
– Без схем: MongoDB не має схем, тобто вам не потрібно заздалегідь визначати
фіксовану схему для конкретних даних. Це дозволяє легко розвивати власну модель
даних у міру зміни потреб власного додатку.
27
– Створення запитів: MongoDB підтримує потужні можливості запитів,
включаючи індексування, агрегацію та повнотекстовий пошук.
– Масштабованість: MongoDB розроблена для горизонтального масштабування
на декількох серверах, що дозволяє легко обробляти великі обсяги даних.
– Реплікація: MongoDB підтримує автоматичну реплікацію, коли дані
автоматично копіюються на декілька серверів для забезпечення надмірності та
високої доступності.
– Шардинг: MongoDB підтримує шардинг, який дозволяє розподіляти дані між
декількома серверами для обробки великих обсягів даних і трафіку.
– Драйвери: MongoDB надає драйвери для широкого спектру мов програмування,
що полегшує інтеграцію з власним додатком.
Загалом, MongoDB – це гнучке та потужне рішення для роботи з базами даних,
яке пропонує широкий спектр функцій та можливостей для сучасних веб-додатків.
Нарешті, Next.js, serverless та MongoDB – це популярні технології, які мають
свої унікальні переваги. Next.js – популярний фреймворк React, який пропонує
рендеринг на стороні сервера, статичну генерацію сайту та інші функції, які можуть
допомогти покращити продуктивність сайту та користувацький досвід. Він також
забезпечує автоматичне розділення коду та маршрутизацію на стороні клієнта, що
може зменшити час завантаження вашого сайту. Безсерверні обчислення дозволяють
створювати і запускати додатки, не турбуючись про управління інфраструктурою. Це
забезпечує автоматичне масштабування, зниження операційних витрат і високу
доступність, що може допомогти підвищити продуктивність додатків і скоротити час
простою. MongoDB забезпечує гнучку модель даних і легко масштабується по
горизонталі. Ця БД також забезпечує високу доступність, автоматичний шардинг і
сильні гарантії узгодженості, що може допомогти забезпечити надійність і
масштабованість власного додатку.
Поєднуючи ці технології, можна створити сучасний, високопродуктивний веб-
додаток, який легко і надійно масштабується. Next.js відповідає за фронтенд, в той
час як безсерверна архітектура забезпечує бекенд-сервіси, а MongoDB відповідає за
зберігання та пошук даних. Крім того, використання безсерверної архітектури може
28
допомогти зменшити витрати на інфраструктуру, оскільки йде оплата лише за
ресурси, які використовуємо, а MongoDB може забезпечити автоматичне
масштабування по мірі зростання конкретних даних.
2.2 Проектування структури бази даних
При проектуванні бази даних потрібно знати головні концепції MongoDB.
Документ – це основна одиниця даних в MongoDB. Це структурований запис,
який може містити пари ключ-значення, масиви та інші вкладені документи.
Документи зберігаються в колекціях.
Колекція – це група документів, які мають схожу структуру. Її можна уявити як
еквівалент таблиці в реляційній базі даних.
База даних – це логічний контейнер для колекцій. Один екземпляр MongoDB
може містити кілька баз даних.
Індекс – це структура даних, яка допомагає оптимізувати продуктивність
запитів. Він може бути створений на одному або декількох полях колекції для
прискорення пошуку.
Запит – це запит на отримання даних з бази даних. У MongoDB запити пишуться
з використанням JSON-подібного синтаксису і можуть використовуватися для
фільтрації, сортування та агрегування даних.
Для створення документів на JavaScript можна використовувати нотацію
об’єктних літералів, яка є стислим і читабельним способом визначення об’єкта з його
властивостями і значеннями, як представлено на рис. 2.1.
У цьому прикладі об’єкт person має три властивості: ім’я, вік та email, кожна з
яких має відповідні значення.
Щоб створити колекцію у MongoDB, необхідно використати метод
createCollection(). Приклад коду на JavaScript, який створює колекцію з назвою users,
представлено на рис. 2.2.
29
Рисунок 2.1 – Приклад документу
Рисунок 2.2 – Створення mongodb-колекції
У цьому прикладі спочатку завантажуємо драйвер MongoDB Node.js і
визначаємо URL-адресу підключення та ім’я бази даних. Потім використовуємо
метод MongoClient.connect() для підключення до сервера MongoDB.
Після підключення викликаємо метод createCollection() в об’єкті бази даних
(db), щоб створити нову колекцію під назвою «customers». Цей метод приймає
функцію зворотного виклику, яка буде викликана з об’єктом помилки, якщо при
створенні колекції виникла помилка, або з об’єктом результату, якщо колекція була
створена успішно.
30
Для створення індексів у MongoDB можна використовувати метод createIndex()
для колекції. Цей метод приймає два параметри: перший параметр – це об’єкт, який
вказує поля, на основі яких створюється індекс, а другий параметр – необов’язковий
об’єкт, який вказує додаткові опції для індексу.
Приклад створення простого індексу для колекції в MongoDB за допомогою
JavaScript представлено на рис. 2.3.
Рисунок 2.3 – Створення mongodb-індексу
У цьому прикладі спочатку підключаємося до сервера MongoDB і отримуємо
посилання на колекцію «mycollection». Потім викликаємо метод createIndex() в
об’єкті колекції, щоб створити індекс на поле «name». Об’єкт { name: 1 }, переданий
як перший параметр, вказує на те, що хоче створити розробник індекс за полем
«name» за зростанням (1). Для створення індексу за спаданням, варто
використовувати -1 замість 1. Функція зворотного виклику, передана другим
параметром до createIndex(), буде викликана з об’єктом помилки, якщо при створенні
індексу сталася помилка, або з об’єктом результату, якщо індекс було створено
успішно.
У MongoDB база даних – це контейнер, який містить набір пов’язаних даних.
Це логічна група з однієї або декількох колекцій. Бази даних MongoDB є
безсхемними, тобто вони не мають фіксованої структури або схеми. Натомість вони
дозволяють зберігати будь-який тип даних у вигляді документів. Коли створюється
нова база даних у MongoDB, вона є порожньою і не містить жодних колекцій чи
документів. Можна створювати колекції в базі даних, а потім вставляти та отримувати
документи з цих колекцій. Кожна база даних у MongoDB має унікальне ім’я. Щоб
31
працювати з конкретною базою даних, користувачу потрібно підключитися до неї за
допомогою клієнта, наприклад, оболонки MongoDB або драйвера для відповідної
мови програмування. Після підключення можна створювати, читати, оновлювати,
видаляти колекції та документи в базі даних.
Варто зазначити, що MongoDB дозволяє запускати декілька баз даних на
одному сервері MongoDB, що може бути корисно, якщо потрібно зберігати різні типи
даних або тримати дані для різних додатків окремо один від одного.
У розроблювальному сайті-виставці пірографічних картин буде одна база даних
з трьома колекціями: users, state та images (рис. 2.4).
Рисунок 2.4 – Структура бази даних сайту-виставки пірографічних картин
Колекція state зберігає кількість картин на сайті та чи потрібно зробити
редеплой сайту (якщо адміністратор вніс зміни у контент сайту).
Колекція users зберігає людей, які мають адмін-доступ до сайту.
Колекція images зберігає дані про додані зображення на сайт.
Колекція state має наступні поля:
– image_counter – лічильник кількості завантажених картин для виставлення
унікальних ідентифікаторів картинам;
– frontend_needs_redeploy – чи потребує сайт перебудування.
Колекція users має такі поля:
– name – імʼя користувача;
– token – рядок даних для автентифікації;
– email – цифрова пошта користувача.
32
Колекція images має наступні поля:
– name – назва файлу картини;
– added_at – дата додавання картини на сайт;
– sort_index – індекс для сортування картин (чим більше індекс, тим далі буде
розташована картинка у галереї);
– in_carousel – чи фігуруватиме ця картина в каруселі на головній сторінці сайту;
– data – байтові дані високоякісного знімку картини;
– data_small – байтові дані зображення малого розміру для швидкого
відображення в адмін-панелі.
Загалом, архітектура вийшла максимально спрощеною. Звісно, краще бути
прихильником мінімалізму та простоти, коли мова йде про створення програмного
забезпечення.
2.3 Проектування серверної частини
Щоб виконати вимоги щодо наявності адміністративної панелі для керування
зображеннями та позначення їх для показу на головній сторінці в каруселі, потрібно
створити бекенд для веб-сайту з фотовиставкою. Бекенд відповідатиме за
автентифікацію адміністратора, зберігання даних про зображення та управління
доступом до адміністративної панелі. Для створення бекенду використовуємо NextJS
API Routes. Також використовуємо базу даних MongoDB для зберігання даних
зображень.
Бекенд забезпечить кінцеві точки (ендпоїнти) для додавання, видалення та
сортування зображень. Ці кінцеві точки будуть захищені проміжним програмним
забезпеченням для автентифікації, щоб гарантувати, що тільки авторизовані
користувачі зможуть отримати до них доступ. Внутрішня частина також може
надавати кінцеву точку для позначення зображень як вибраних, що дозволить їм
відображатися на головній сторінці.
Надсилання електронних листів: щоб надсилати електронні листи, коли хтось
замовляє картину, нам також потрібен бекенд. Бекенд отримає деталі замовлення від
33
фронтенду і відправить листа відповідному одержувачу. Можна використовувати
бібліотеку Nodemailer для обробки процесу надсилання електронних листів.
Підсумовуючи вище розглянуте варто зазначити, що створення бекенду для
веб-сайту з виставками картин дасть змогу мати панель адміністратора для
управління картинами та надсилання електронних листів, коли хтось замовляє
картину. Це також забезпечило б необхідною інфраструктурою для зберігання даних
про картини та управління автентифікацією адміністратора сайту.
Маршрути API Next.js – це потужна функція, яка дозволяє розробникам
створювати безсерверні кінцеві точки API у своїх Next.js-додатках.
Створення маршруту API: можна створити маршрут API, створивши файл у
каталозі pages/api власного додатку Next.js. Ім’я файлу стає ім’ям кінцевої точки.
Обробка HTTP-запитів: можна обробляти HTTP-запити (такі як GET, POST,
PUT, DELETE), використовуючи об’єкти req і res, передані в якості аргументів
функції обробника маршруту API.
Повернення JSON-відповідей: можна повертати JSON-відповіді з бажаних
маршрутів API за допомогою методу res.json(). Використання параметрів запиту:
можна отримати доступ до параметрів запиту, переданих в URL, використовуючи
об’єкт req.query.
Маршрути API в Next.js реалізовані як безсерверні функції, що означає, що
вони можуть бути розгорнуті як окремі сервіси без необхідності виділеного сервера.
Загалом, маршрути API в Next.js забезпечують простий і гнучкий спосіб створення
безсерверних кінцевих точок API у вашому додатку Next.js.
Існує кілька типів HTTP-запитів, кожен з яких має своє призначення і
синтаксис. Розглянемо найпоширеніші з них.
GET: це найпоширеніший тип HTTP-запиту, який використовується для
отримання ресурсу з сервера. Коли клієнт надсилає GET-запит, він просить сервер
відправити назад ресурс (наприклад, HTML-сторінку або зображення),
ідентифікований URL-адресою.
POST: цей тип запитів використовується для відправки даних на сервер для
створення або оновлення ресурсу. Коли клієнт надсилає POST-запит, він включає в
34
тіло запиту дані, які сервер може використовувати для створення або оновлення
ресурсу.
PUT: цей тип запиту використовується для оновлення існуючого ресурсу на
сервері. Коли клієнт надсилає PUT-запит, він включає нову версію ресурсу в тіло
запиту.
DELETE: цей тип запиту використовується для видалення ресурсу з сервера.
Коли клієнт надсилає запит DELETE, він просить сервер видалити ресурс,
ідентифікований за URL-адресою.
HEAD: цей тип запиту схожий на запит GET, але він запитує тільки заголовки
ресурсу, не отримуючи вміст самого ресурсу. Це може бути корисно для перевірки
стану ресурсу без необхідності завантажувати весь його вміст.
OPTIONS: цей тип запиту використовується для отримання параметрів зв’язку,
доступних для ресурсу. Коли клієнт надсилає запит OPTIONS, сервер відповідає
списком HTTP-методів, дозволених для ресурсу.
TRACE: цей тип запиту використовується для отримання діагностичного
трасування HTTP-запиту і повідомлень-відповідей, які надсилаються між клієнтом і
сервером. В основному використовується для налагодження та усунення
несправностей.
Основні ендпоїнти бекенду для розробки:
– /api/user/admin_login [POST] – приймає email та token у форматі JSON для
авторизації адміністратора. При успіху встановлює серверні куки у браузера для
автоматичної авторизації при наступних запитах.
– /api/user/admin_logout [POST] – винищує серверні куки в браузері, щоб не
можна було робити подальші адмін-запити.
– /api/user/forgot_password [POST] – приймає email на відправляє на нього
відповідний пароль адміністратора, якщо існує адмін з такою поштою.
– /api/picture/list [GET] – видає список зображешь в форматі JSON.
– /api/picture [GET] – видає дані зображення відповідно до query-парамертів name,
type (розмір даних – малий чи найкращий розмір).
35
– /api/picture [POST] – додає нову картину в БД, приймає дані файлу зображення
в форматі form-data.
– /api/picture [DELETE] – видаляє зображення за параметром name.
– /api/update_pictures [POST] – оновлює параметри картини: sort_index,
in_carousel.
– /api/make_order [POST] – відсилає дані замовлення адміністратору на email.
– /api/was_frontend_changes [POST] – повертає значення типа Boolean, яке
говорить про те, чи було оновлено контент сайту.
– /api/apply_changes [POST] – посилає запит на хостинг для редеплою сайту.
Клієнтські та серверні файли cookie – це два типи файлів cookie, які
використовуються у веб-розробці для зберігання даних на комп’ютері користувача
або на сервері.
Клієнтські файли cookie – це невеликі текстові файли, які зберігаються на
комп’ютері користувача веб-браузером. Ці файли створюються і управляються веб-
сайтом, який відвідує користувач. Вони використовуються для запам’ятовування
налаштувань користувача, інформації для входу та інших деталей про взаємодію
користувача з веб-сайтом. Файли cookie на стороні клієнта можуть бути доступні та
модифіковані за допомогою JavaScript та інших мов сценаріїв на стороні клієнта.
Зазвичай вони видаляються через певний проміжок часу, і користувачі можуть
видалити їх у будь-який час у налаштуваннях свого браузера.
Серверні файли cookie, також відомі як сесійні, зберігаються на сервері, а не на
комп’ютері користувача. Ці файли cookie створюються і управляються веб-сервером
і використовуються для зберігання тимчасової інформації про взаємодію користувача
з веб-сайтом. Зазвичай вони використовуються для відстеження ідентифікатора
сеансу користувача або інших даних, які необхідно зберігати в різних запитах. На
відміну від клієнтських файлів cookie, серверні файли cookie не можуть бути доступні
або змінені за допомогою клієнтських скриптових мов. Зазвичай вони видаляються
після завершення сеансу користувача або через певний проміжок часу.
Таким чином, клієнтські файли cookie зберігаються на комп’ютері користувача
і створюються та управляються веб-сайтом, тоді як серверні файли cookie
36
зберігаються на сервері і створюються та управляються веб-сервером. Обидва типи
файлів cookie використовуються для зберігання даних про взаємодію користувача з
веб-сайтом і можуть бути використані для покращення користувацького досвіду.
Для хостингу застосуємо безкоштовний хостинг Vercel.com, який має найкращу
підтримку фреймворку NextJS. Головна сторінка розроблювального сайту-виставки
пірографічних картин на хостингу Vercel.com представлена рис. 2.5.
Рисунок 2.5 – Головна сторінка розроблювального сайту-виставки пірографічних
картин на хостингу Vercel.com
Vercel – це хмарна платформа, яка надає послуги хостингу та розгортання веб-
додатків, зокрема тих, що побудовані з використанням безсерверної архітектури. Це
популярний вибір серед розробників, оскільки він дозволяє швидко і легко розгортати
веб-додатки з мінімальною конфігурацією [11].
Головною особливістю Vercel є можливість автоматичного створення та
розгортання додатків з Git-репозиторіїв. Це означає, що кожного разу, коли до коду в
репозиторії вносяться зміни, Vercel автоматично перебудовує і перерозгортає
додаток. Він також надає такі функції, як автоматичне HTTPS управління доменами
та інтеграція з CDN для забезпечення швидкої та безпечної доставки веб-контенту.
37
Vercel також підтримує безсерверні функції, які дозволяють розробникам писати код,
що запускається на вимогу у відповідь на події або запити. Це може допомогти
зменшити вартість і складність запуску та масштабування веб-додатків.
Таким чином, Vercel – це платформа, яка забезпечує легке розгортання та
хостинг для веб-додатків, особливо тих, що використовують безсерверну архітектуру.
Її ключові особливості включають автоматичну збірку і розгортання з репозиторіїв
Git, підтримку безсерверних функцій, а також вбудовані функції безпеки і
продуктивності.
2.4 Дизайн веб-інтерфейсу користувача
У сучасну цифрову епоху наявність веб-сайту стала важливим інструментом як
для бізнесу, так і для приватних осіб. Веб-сайт діє як цифрова вітрина, що демонструє
продукти, послуги та інформацію про бренд. Однак, мати веб-сайт недостатньо; не
менш важливо мати добре розроблений веб-сайт, який може залучати та утримувати
відвідувачів. У цьому технічному документі розглянемо основи дизайну веб-сайту та
дамо рекомендації щодо створення ефективного веб-сайту [12].
Користувацький досвід (UX) – це загальний досвід, який відвідувач отримує під
час перегляду веб-сайту. Він охоплює простоту використання, функціональність та
естетику веб-сайту. Ефективний дизайн веб-сайту повинен враховувати такі основні
принципи UX:
– Навігація (рис. 2.6): навігація на веб-сайті має бути простою та інтуїтивно
зрозумілою, щоб користувачі могли легко знайти те, що вони шукають.
– Доступність: веб-сайт має бути доступним для всіх користувачів, у тому числі
для людей з обмеженими можливостями.
– Час завантаження (рис. 2.7): веб-сайт повинен завантажуватися швидко, щоб не
розчаровувати користувачів і не змушувати їх залишати сайт.
– Мобільна оптимізація (рис. 2.8): веб-сайт повинен бути оптимізований для
мобільних пристроїв, оскільки все більше людей отримують доступ до інтернету
через смартфони та планшети.
38
Рисунок 2.6 – Приклад навігаційної панелі
Рисунок 2.7 – Метрики сайту «pyro-craft.com.ua» в інструменті «Lighthouse»
Рисунок 2.8 – Приклад вигляду сайту на мобільному телефоні
39
Візуальний дизайн – це використання візуальних елементів для створення
привабливого та цікавого веб-сайту. Ефективний дизайн веб-сайту повинен
враховувати наступні основи візуального дизайну:
– Колір: використання кольору може викликати емоції та створювати певний
настрій. Колірна гамма веб-сайту повинна відповідати ідентичності та посланню
бренду.
– Типографіка (рис. 2.9): тип і розмір шрифту, що використовується на веб-сайті,
повинен легко читатися і бути однаковим на всьому сайті.
– Зображення та графіка: використання зображень і графіки може покращити
користувацький досвід і забезпечити візуальний інтерес. Вони повинні бути якісними
та релевантними до контенту.
– Пробіли: використання білого простору (порожнього простору) може створити
чистий і організований вигляд веб-сайту.
– Контент – це інформація, представлена на веб-сайті, включаючи текст,
зображення та відео. Ефективний дизайн веб-сайту повинен враховувати такі основні
принципи контенту:
Рисунок 2.9 – Приклад шрифту (типографіка)
40
– Ясність: контент повинен бути чітким і лаконічним, надаючи користувачам
інформацію, яку вони шукають.
– Релевантність: контент повинен відповідати меті та аудиторії веб-сайту.
– Якість: контент повинен бути якісним і без помилок.
– Заклик до дії: веб-сайт повинен містити чіткий заклик до дії (CTA), що спонукає
користувачів до конкретної дії, наприклад, зробити покупку або заповнити форму.
Врешті-решт, ефективний дизайн веб-сайту повинен враховувати основи
користувацького досвіду, візуального дизайну та контенту.
Для початку було намальовано прелімінарний дизайн сайту-виставки
пірографічних картин (рис. 2.10).
Рисунок 2.10 – Вигляд початкової ідеї розроблювального сайту
41
Включаючи ці елементи, веб-сайт може залучати та утримувати відвідувачів,
що призводить до збільшення залученості та конверсії. Важливо постійно оцінювати
та оновлювати дизайн веб-сайту, щоб він залишався ефективним та актуальним.
Створення фізичного представлення дизайну розроблюваного веб-сайту на
папері допомагає візуалізувати, як веб-сайт виглядатиме і відчуватиметься. Це
дозволяє краще зрозуміти, як елементи будуть поєднуватися між собою і як
користувач буде взаємодіяти з сайтом. Паперовий макет може слугувати
документацією процесу проектування. Можна звертатися до нього протягом усього
процесу проектування, щоб переконатися, що немає відхилень від плану та початкові
цілі реалізовано.
Провівши аналіз сайтів існуючих реалізацій, визначено, що для кваліфікаційної
роботи бакалавра буде доречним виконати меню сайту-виставки пірографічних
картин, що складається з таких розділів:
Головна сторінка:
Головна сторінка;
Сторінка про пірографію;
Галерея;
Сторінка для створення замовлення;
Контакти.
Структура сайту ««Wood Burning Ukraine» представлена на рисунку 2.11.
Рисунок 2.11 – Структура сайту-виставки пірографічних картин
В кваліфікаційній роботі бакалавра за порадою товариша, було прийнято
рішення про повсюдне використання дерев’яного фону на сайті (рис. 2.12).
42
Рисунок 2.12 – Вигляд пропонованого фону
Висновки до розділу 2
В даному розділі розглянуто ключові технології, які було використано для
розробки веб-сайту. Визначено, що:
– TypeScript є основною мовою програмування, яка дозволяє розробникам
створювати більш безпечний та зручний код.
– NextJS є фреймворком для розробки веб-додатків на базі React, що дозволяє
швидко розгорнути серверну частину.
– Використання технології Serverless дозволяє зменшити витрати на хостинг і
збільшити масштабованість системи.
– База даних MongoDB є документ-орієнтованою і дозволяє зберігати дані у
вигляді документів у JSON-подібному форматі, що спрощує роботу з ними.
Також описано проектування бази даних та серверної частини, що дозволяє
створювати добре організовану та ефективну систему. Наведено початкову ідею
дизайну веб-інтерфейсу користувача для подальшої програмної реалізації.
В цілому, застосування таких технологій дозволить створити сучасний,
безпечний та ефективний веб-сайт виставки пірографічних картин.
43
3 РЕАЛІЗАЦІЯ САЙТУ-ВИСТАВКИ «WOOD BURNING UKRAINE»
3.1 Архітектура сайту-виставки
Архітектура каталогів сайту-виставки на Next.js зазвичай складається з
декількох компонентів [8]:
Каталог «pages»: каталог сторінок є основною точкою входу в додаток. Кожен
файл у цьому каталозі представляє сторінку додатку і автоматично зіставляється з
URL-адресою. Сторінки можуть бути згенеровані статично, відрендереними на
стороні сервера або на стороні клієнта.
Каталог «components»: каталог компонентів містить багаторазові React-
компоненти, які можна використовувати на різних сторінках додатку.
Каталог «public»: публічний каталог містить статичні ресурси, які надаються
безпосередньо клієнту, такі як зображення, відео та шрифти.
Каталог «styles»: каталог стилів містить глобальні стилі для програми. Це
можуть бути файли CSS, Sass або будь-який інший препроцесор стилів.
Каталог «pages/api» містить безсерверні (serverless) функції, які можна
використовувати як кінцеві точки API для програми.
Файл «next.config.js» містить параметри конфігурації для Next.js, такі як
конфігурація веб-пакету, змінні оточення тощо.
Загалом, архітектура проекту на Next.js розроблена таким чином, щоб
забезпечити гнучкість і масштабованість, а також спростити процес розробки завдяки
таким функціям, як автоматичне розділення коду, рендеринг на стороні сервера та
оптимізоване завантаження зображень.
Для того, щоб можна було вести моніторинг змін коду, застосовано Git з
подальшим зберіганням репозиторію на Github.
Git – це система контролю версій, що дозволяє зберігати, відстежувати та
керувати версіями файлів та папок. Git був створений Лінусом Торвальдсом в 2005
році для управління розробкою ядра Linux [13]. З тих пір він став дуже популярним і
застосовується в багатьох проектах програмного забезпечення.
44
Github (рис. 3.1) – це онлайн-сервіс для спільної роботи з Git-репозиторіями.
Рисунок 3.1 – Вигляд приватного репозиторію «woodburningukraine» на GitHub
Він дозволяє користувачам зберігати свої репозиторії на серверах Github, що
забезпечує зручний доступ до проектів та можливість спільної роботи з іншими
розробниками. Крім того, Github надає багато інструментів для управління
проектами, таких як можливість створення задач (issues), підтримки планування
(projects), можливість створення гілок (branches) та ін [14].
Репозиторій Git – це основна одиниця зберігання інформації в Git. Він містить
всю історію змін файлів та папок, що знаходяться в ньому. Користувачі можуть
створювати нові репозиторії, додавати файли, здійснювати коміти (commit),
змінювати файли та об’єднувати різні версії проекту. Git забезпечує можливість
працювати з репозиторієм навіть у випадку, якщо він зберігається на різних
пристроях або в мережі.
У Github є багато корисних функцій, що допомагають зберігати, управляти та
розглядати репозиторії. Наприклад, користувачі можуть зробити fork (створення
копії) іншого репозиторію, щоб здійснити зміни у ньому безпосередньо, створювати
pull requests (запити на об’єднування) щоб зміни в одній гілці (branch) були
об’єднувані з іншою, робити code review (оцінку коду) та коментувати код, стежити
45
за змінами в репозиторії, додавати collaborators (співробітників) до проекту та
надавати їм різні рівні доступу до репозиторію.
Крім того, Github надає можливість інтегрувати репозиторій з іншими
сервісами, наприклад, з сервісами збирання (CI/CD) та автоматизації тестування, що
дозволяє зменшити кількість ручної роботи та покращити якість продукту.
У Github є також багато соціальних функцій, таких як можливість фолловити
(слідкувати) за іншими користувачами та їх проектами, створення та участь у групах
(organizations), обговорення проектів у коментарях та багато іншого.
Узагальнюючи, Git та Github дозволяють розробникам ефективно працювати з
кодом та спільно працювати над проектами. Вони є важливим інструментом для будь-
якого професійного розробника та допомагають збільшити якість та швидкість
розробки програмного забезпечення.
Для менеджменту базою даних застосовано MongoDB Compass (рис. 3.2) – це
офіційний графічний інтерфейс користувача для роботи з базами даних MongoDB.
Рисунок 3.2 – Вигляд програми MongoDB Compass
46
Він надає зручний та інтуїтивно зрозумілий інтерфейс для взаємодії з базами
даних MongoDB без необхідності введення команд в командному рядку.
MongoDB Compass дозволяє переглядати та редагувати дані в базі даних,
створювати запити та агрегації, визначати індекси та налаштовувати параметри
конфігурації. Він також дозволяє візуалізувати структуру бази даних та зв’язки між
різними колекціями. Крім цього, є підтримка багатьох функцій, таких як автоматичне
завантаження даних, індексація полів та перевірка синтаксису запитів. Він також
надає додаткові можливості, такі як автоматична генерація коду для різних мов
програмування та інструменти для взаємодії з документацією MongoDB [15].
MongoDB Compass можна встановити як локальну програму на комп’ютер або
використовувати в якості онлайн сервісу через MongoDB Atlas. Це дозволяє зручно
та ефективно працювати з базами даних MongoDB, надаючи широкі можливості для
адміністрування та розробки.
Архітектура розроблювального сайту-виставки представлена на рис. 3.3. Саме
така впорядкована схема значно полегшує роботу над проектуванням.
Рисунок 3.3 – Файлова архітектура сайту-виставки «woodburningukraine»
47
3.2 Реалізація розробки сайту-виставки пірографічних картин
При розробці сайту-виставки пірографічних картин потрібно мати на увазі
найважливіші аспекти програмування. Розглянемо їх детальніше.
1. Чистий та організований код: розробники повинні дотримуватись
найкращих практик організації та структурування коду, щоб забезпечити його
зрозумілість та легкість супроводу.
2. Код-ревю: розробники повинні регулярно переглядати код інших учасників
команди, щоб забезпечити високу якість коду та виявляти можливі помилки.
3. Тестування: розробники повинні ретельно тестувати свій код, щоб
забезпечити його стабільність та працездатність.
4. Неперервна інтеграція: розробники повинні використовувати систему
неперервної інтеграції, щоб автоматизувати процес збірки та тестування коду.
5. Комунікація: розробники повинні бути відкриті до спілкування та співпраці
з іншими учасниками команди, щоб забезпечити взаємодію та розуміння між ними.
Використання культури програмування допомагає забезпечити якість продукту
та зменшити технічний борг, що в свою чергу сприяє покращенню задоволення
клієнтів та підвищенню ефективності розробки програмного забезпечення.
Для створення проекту використано yarn – менеджер залежностей для NodeJs,
створений компанією Facebook з метою поліпшення процесу установки та оновлення
пакетів. Yarn дозволяє швидше встановлювати пакети зі сторонніх репозиторіїв та
забезпечує більш ефективне кешування пакетів, що зменшує час завантаження
пакетів. Yarn дозволяє розробникам використовувати версії пакетів забезпечуючи
зручний та швидкий процес встановлення [16]. Він також має інші функції, які
дозволяють легше керувати залежностями, такі як автоматичне встановлення
залежностей для проекту та здійснення залежностей від певної версії пакетів. У
порівнянні з іншими менеджерами залежностей, такими як npm, Yarn забезпечує
більш швидку та надійну роботу залежностей. Yarn також має більш високий рівень
захисту, що забезпечує безпеку проектів від можливих загроз. Загалом, Yarn є
48
корисним інструментом для розробників, що дозволяє швидко та ефективно
управляти залежностями в проектах на JavaScript.
Спочатку потрібно реалізувати фронтенд – частина веб-розробки, що
займається створенням користувацького інтерфейсу веб-додатку. Код головної
сторінки сайту-виставки пірографічних картин представлено на рис 3.4. Як бачимо,
тут використано концепцію хуків з React.
Рисунок 3.4 – Код головної сторінки сайту-виставки пірографічних картин
Хуки (hooks) дозволяють функціональним компонентам React мати стан (state)
та інші функції, що раніше були доступні тільки в класових компонентах. Хуки
дозволяють розширити функціональний компонент та додати до нього стан і логіку.
Основні хуки, що використовуються в React, це useState, useEffect, useContext,
useReducer та багато інших.
49
В даному випадку це використовується для створення адаптивного режиму для
мобільних пристроїв (useWindowDimensions, useMediaQuery), а також використано
useTranslation – хук для розпізнання поточної мови інтерфейсу.
Як можна бачити, в коді використовується компонент Carousel – сепаративний
компонент для відображення комплексної каруселі картин з анімаціями.
Для того, щоб картинки в каруселі прокручувались, потрібно розробити
алгоритм «shiftItems», який буде це робити (рис. 3.5).
Рисунок 3.5 – Код алгоритму зміщення картин в каруселі
Для розробки вкладки «галерея» також потрібно придумати алгоритм (рис. 3.6)
з метою правильного розташування картин, щоб їх номери йшли інтуїтивним чином
– чим нижче, тим більше число.
Інші вкладки, а саме інформація про «парографію», «зробити замовлення» та
«контакти» реалізовані дуже схожим чином.
50
Рисунок 3.6 – Код алгоритму калькулювання позицій картин в галереї
Наступним етапом в розробці є реалізація бекенду. Приклад обробки serverless
GET-запиту, а саме отримання картини за її id, показано на рис. 3.7.
Рисунок 3.7 – Код GET-енпоінту /api/picture
51
Звісно, що отримання картин не буде працювати без підключення до бази
даних. Тому потрібно використати потрібну бібліотеку (mongodb), щоб зробити це
(рис. 3.8).
Рисунок 3.8 – Код підключення до бази даних MongoDB
Для роботи вкладки «Зробити замовлення» потрібно реалізувати підключення
до email-аккаунту, щоб замовлення надсилались на адмін-пошту. Це робиться через
SMTP-сервер Gmail (рис. 3.9). SMTP – це протокол, що використовується для
передачі електронної пошти між серверами. SMTP забезпечує надійну доставку
електронної пошти з одного сервера до іншого. Протокол використовується для
відправлення та отримання електронної пошти, а також для розсилки повідомлень
групі адресатів [17].
Рисунок 3.9 – Код підключення до електронної пошти
Для зручної модифікації контенту сайту реалізована адмін-панель (рис. 3.10).
52
Рисунок 3.10 – Вигляд адмін-панелі
3.3 Розгортання сайту-виставки пірографічних картин
Для публікування розробленого сайту-виставки пірографічних картин «Wood
Burning Ukraine» в інтернет використано хостинг Vercel (рис. 3.11) [11].
Рисунок 3.11 – Вигляд головної сторінки розробленого сайту-виставки
пірографічних картин «Wood Burning Ukraine» на Vercel
53
Для розгортання сайту-виставки пірографічних картин потрібно зробити
наступні кроки:
1. Створити обліковий запис на Vercel, якщо такого ще не існує.
2. Натиснути кнопку «New Project» на панелі керування Vercel та вибрати
«Import Git Repository».
3. Підключити репозиторій з GitHub, GitLab або Bitbucket та дозволити Vercel
отримати доступ до нього. Вибрати гілку, яку потрібно розгорнути.
4. Перевірити налаштування проекту. Якщо це Next.js проект, то Vercel
автоматично розпізнає його і встановить необхідні залежності.
5. Натиснути кнопку «Deploy» на панелі керування Vercel, щоб почати процес
розгортання.
6. Перевірити результати. Після успішного розгортання сайту на Vercel,
отримати URL, щоб перевірити роботу сайту.
7. Після підключення репозиторію до Vercel, створення подальших комітів у
головну гілку супроводжуватиметься «редеплоєм» – розгортанням оновленого
проекту. Вигляд сторінки розгортань сайту-виставки пірографічних картин на Vercel
показано на рис. 3.12.
Рисунок 3.12 – Вигляд сторінки розгортань сайту-виставки пірографічних картин на
Vercel
54
Так, як Vercel надає безкоштовний піддомен *.vercel.app, можна використати
його та зекономити кошти. Вигляд сторінки доменів сайту-виставки пірографічних
картин на Vercel показано на рис. 3.13.
Рисунок 3.13 – Вигляд сторінки доменів сайту-виставки пірографічних картин на
Vercel
Для того, щоб працювало підключення бази даних та електронної пошти,
потрібно додати відповідні змінні навколишнього середовища (рис. 3.14).
Рисунок 3.14 – Вигляд сторінки налаштувань змінних середовища сайту-виставки
пірографічних картин на Vercel
55
На сторінці налаштувань також можна побачити «Deploy Hooks» (рис. 3.15) –
функціонал, який забезпечує багато сервісів для безпосереднього запуску
користувацьких дій або зовнішніх сценаріїв перед або після розгортання сайту-
виставки пірографічних картин.
Рисунок 3.15 – Вигляд налаштувань Deploy Hooks сайту-виставки пірографічних
картин на Vercel
Для налагодження можливих помилок на сайті присутня сторінка «Logs» для
перегляду логів сайту (рис. 3.16).
Рисунок 3.16 – Вигляд сторінки «Logs» сайту-виставки пірографічних картин на
Vercel
56
На сторінці логів можна переглянути інформацію про різні події, що сталися в
процесі розгортання, такі як:
– завантаження коду та залежностей проекту;
– будівництво та оптимізація проекту;
– відправлення запитів на сервер;
– обробка помилок.
Це допомагає виявляти та вирішувати проблеми, які виникають під час
розгортання та роботи додатку, а також відслідковувати статус розгортання. Сторінка
«Logs» є корисним інструментом для розробників, щоб вивчити, як працює додаток в
середовищі реального світу, а також для виявлення та вирішення проблем швидко та
ефективно.
Результати розробки представлено в додатку А, а основні частини коду – в
додатку Б. Розроблений сайт доступний за адресою https://woodburningukraine
.vercel.app.
3.4 Тестування сайту-виставки «Wood Burning Ukraine»
Тестування веб-сайтів – це процес перевірки функціональності, продуктивності
та безпеки веб-додатка, з метою забезпечення якості веб-сайту перед його випуском
в продакшен [18].
Основні види тестування веб-сайтів:
1. Функціональне тестування: перевірка функцій та функціональності веб-
сайту, включаючи перевірку форм, пошукової функції, навігації, оплати, реєстрації та
інших функцій.
2. Тестування безпеки: перевірка вразливостей веб-сайту на різних рівнях,
включаючи SQL-ін’єкції, XSS-атаки, CSRF-атаки, брутфорс паролів та інші.
3. Тестування продуктивності: перевірка продуктивності веб-сайту під
навантаженням, включаючи тестування швидкості завантаження сторінок, кількості
запитів до сервера, обсягу даних, які передаються між клієнтом та сервером, та інших
показників продуктивності.
57
4. Тестування сумісності: перевірка того, як веб-сайт відображається на різних
пристроях та в різних браузерах.
5. Тестування на доступність: перевірка того, наскільки веб-сайт доступний
для людей з обмеженими можливостями.
6. Тестування на коректність відображення мов: перевірка коректності
відображення та роботи веб-сайту на різних мовах.
Для тестування веб-сайтів використовуються різні інструменти, такі як:
Selenium, JMeter, Postman, SoapUI, та інші. Також важливо забезпечити покриття веб-
сайту тестами на автоматичному рівні, що дозволяє покращити ефективність
тестування та швидко виявляти проблеми веб-сайту. Для цього можна
використовувати фреймворки тестування, такі як Jest, Mocha, Chai, TestCafe та інші.
У процесі тестування веб-сайту важливо враховувати особливості тестування
веб-додатків, такі як: необхідність перевірки на різних браузерах та пристроях,
відсутність доступу до бази даних та інших компонентів сервера під час тестування
та інші.
Крім того, можна використовувати різні методи тестування, такі як ручне
тестування, автоматичне тестування, тестування на основі рекомендацій (наприклад,
згідно зі стандартами WCAG для тестування доступності), а також тестування на
основі відгуків користувачів та моніторингу поведінки користувачів.
Узагальнюючи, тестування веб-сайтів, важливо зазначити, що це важливий етап
в розробці веб-додатків, який дозволяє забезпечити якість та надійність веб-сайту
перед його випуском в продакшен, а також знизити ризики пов’язані зі збоєм веб-
додатка та забезпечити задоволеність користувачів веб-сайтом.
Для перевірки роботи serverless-функцій було застосовано Postman – це
популярний інструмент для тестування API, який дозволяє розробникам,
тестувальникам та іншим зацікавленим особам перевірити функціональність та
надійність своїх API.
API (Application Programming Interface) – це набір інструкцій та структур, що
дозволяє різним програмам та сервісам взаємодіяти один з одним та обмінюватися
даними. API може бути реалізовано у вигляді протоколу, бібліотеки, веб-сервісу або
58
іншого інтерфейсу, що дозволяє взаємодіяти з програмою або сервісом. Він дозволяє
різним програмам і системам використовувати функції та дані інших програм та
сервісів без необхідності мати доступ до вихідного коду. API дозволяє розробникам
створювати програми та сервіси, які взаємодіють з іншими програмами та сервісами,
що дозволяє швидко та ефективно розробляти нові програми та сервіси, а також
посилювати їх функціональність [19].
За допомогою Postman (рис. 3.17) можна відправляти HTTP-запити до API,
тестувати їх та перевіряти отримані відповіді.
Інтерфейс Postman дозволяє зручно налаштувати різні параметри запитів, такі
як тип запиту (GET, POST, PUT, DELETE), заголовки запиту, тіло запиту, параметри
запиту та багато іншого [20]. Крім того, Postman дозволяє зберігати запити та колекції
запитів, щоб можна було швидко відновити їх в разі необхідності. Також Postman
дозволяє автоматизувати тестування API за допомогою колекцій запитів та тестів, що
дозволяє швидко та ефективно тестувати функціональність та надійність API. Однією
з корисних функцій Postman є можливість створення документації API на основі
колекцій запитів, що дозволяє швидко створювати та підтримувати документацію
API.
Рисунок 3.17 – Вигляд програми Postman
59
Список serverless-функцій для тестування представлено на рис. 3.18.
Рисунок 3.18 – Список ендпоінтів в Postman
Для перевірки правильної роботи сайту з точки зору користувача було
застосовано мануальне тестування – це процес тестування програмного забезпечення,
який виконується вручну, без використання автоматичних тестів або скриптів. Цей
процес включає в себе запуск програми, введення різних даних та перевірку
результатів, щоб забезпечити правильну роботу програмного забезпечення та виявити
можливі помилки та дефекти.
Мануальне тестування може виконуватися різними способами, включаючи:
1. Функціональне тестування: перевірка того, чи виконуються функції
програми згідно з очікуваннями. Це включає в себе тестування різних сценаріїв
взаємодії з програмою та перевірку результатів.
2. Тестування інтерфейсу користувача: перевірка того, чи працює інтерфейс
користувача програми правильно, чи функціонують кнопки та інші елементи
інтерфейсу коректно.
3. Тестування відмови: перевірка того, як програма поводиться в разі помилки
або відмови, наприклад, як вона поводиться, коли вхідні дані невірні.
4. Тестування продуктивності: перевірка швидкості та продуктивності
програми, яка включає тестування обсягу даних, часу відгуку та інші параметри.
5. Тестування безпеки: перевірка захисту програми від потенційних атак,
перехоплення даних та інших загроз безпеці програми.
60
Під час мануального тестування тестувальник повинен бути уважним та
систематичним, здатним до виявлення потенційних помилок та проблем. Після
виконання тестування тестувальник повинен згенерувати звіт з результатами
тестування, де описані знайдені дефекти та їхній статус.
Тестування продуктивності розробленого сайту-виставки пірографічних картин
«Wood Burning Ukraine» показало найвищі результати (рис. 3.19).
Рисунок 3.19 – Результати тестування продуктивності розробленого сайту «Wood
Burning Ukraine» в браузері Chrome за допомогою інструменту «Lighhouse»
Висновки до розділу 3
В даному розділі представлені важливі елементи проектування, такі як:
архітектура, реалізація, розгортання та тестування. Була детально описана
архітектура сайту-виставки пірографічних картин на базі Next.js, яка дозволяє
забезпечити високу продуктивність та швидкість роботи веб-додатку.
Сайт-виставка пірографічних картин успішно реалізований з використанням
зручного та інтуїтивно зрозумілого інтерфейсу. Розгортання сайту було здійснене з
використанням платформи Vercel, що забезпечило швидкість та надійність його
роботи. Тестування сайту-виставки пірографічних картин виконувалось з
використанням Postman та мануальним методом, що дозволило перевірити
правильність роботи різних компонентів сайту та підтвердити якість розробленого
продукту.
61
ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра досягнута. В ході її виконання
спроектовано та розроблено сайт-виставку пірографічних картин «Wood Burning
Ukraine», який збільшить популяризацію даного виду мистецтва.
Для досягнення поставленої мети в роботі розв’язувалися наступні завдання:
досліджено пірографію як вид мистецтва;
проведено порівняльний аналіз існуючих аналогів сайтів пірографічних картин:
«Pyro Craft», «Wood burning art», «Julie Bender Fine Art», «Charred Wood»;
розроблено базу даних;
проведено аналіз програмних рішень для розробки сайту-виставки
пірографічних картин;
розроблено сайт-виставку пірографічних картин «Wood Burning Ukraine»;
виконано тестування сайту «Wood Burning Ukraine» в браузері Chrome за
допомогою інструменту «Lighhouse».
За проведеним тестуванням розроблений сайт має найвищі значення
продуктивності, SEO-оптимізації, вигляду, а також адаптації.
Використані в ході розробки технології, а саме: NextJS, MongoDB, Vercel,
задовольнили потреби розробки на досить високому рівні.
В цілому, дана робота була успішною та дозволила розробити функціональний
сайт-виставку пірографічних картин з використанням сучасних веб-технологій.
62
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Пірографія-мистецтво випалювання. URL:
https://prezi.com/tpqsb_ycwmpc/presentation/ (дата звернення: 12.01.23).
2. Усе про картини, створені вогнем. URL: https://ocnt.com.ua/use-pro-kartini-
stvoreni-vognem/ (дата звернення: 12.01.23).
3. Сайт пірографічних картин «Pyro Craft». URL: https://pyro-craft.com.ua (дата
звернення: 14.01.2023).
4. Сайт пірографічних картин «Wood burning art». URL:
http://www.woodburningart.co.uk (дата звернення: 14.01.2023).
5. Сайт пірографічних картин «Julie Bender Fine Art». URL:
https://www.juliebender.com (дата звернення: 14.01.2023).
6. Сайт пірографічних картин «Charred Wood». URL:
https://www.charredwooduk.com (дата звернення: 14.01.2023).
7. SCSS. URL: https://sass-lang.com (дата звернення: 23.03.2023).
8. Next.js by Vercel. URL: https://nextjs.org (дата звернення: 23.03.2023).
9. Огляд Serverless архітектури. URL: https://codeguida.com/post/1466 (дата
звернення: 14.01.2023).
10. MongoDB. URL: https://www.mongodb.com (дата звернення: 23.03.2023).
11. Vercel. URL: https://vercel.com (дата звернення: 23.03.2023).
12. Веб дизайн. Як створити дизайн для сайту? URL:
https://www.markweb.pro/veb-dizajn-yak-stvoriti-dizajn-dlya-sajtu/ (дата звернення:
23.03.2023).
13. Git. URL: https://git-scm.com/ (дата звернення: 10.05.2023).
14. Github. URL: https://github.com (дата звернення: 10.05.2023).
15. MongoDB Compass. URL: https://www.mongodb.com/products/compass (дата
звернення: 10.05.2023).
16. Yarn. URL: https://yarnpkg.com/ (дата звернення: 10.05.2023).
17. SMTP. URL: https://uk.wikipedia.org/wiki/SMTP (дата звернення:
10.05.2023).
63
18. Як тестувати веб-сайт: основні етапи і поради. URL:
https://brainlab.com.ua/uk/blog-uk/yak-testuvati-veb-sayt-osnovn-etapi-poradi (дата
звернення: 10.05.2023).
19. What is an API?. URL: https://aws.amazon.com/what-is/api/ (дата звернення:
10.05.2023).
20. Postman API Platform. URL: https://www.postman.com/ (дата звернення:
10.05.2023).
21. Компанєєць А. Б., Оксамитна Л. П. Сайт-виставка пірографічних картин.
Тези доповідей студентської науково-практичної конференції ЧДТУ, 18-20 квітня
2023 р. Черкаси : ЧДТУ, 2023. С. 29.
64
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2023 р.
САЙТ-ВИСТАВКА ПІРОГРАФІЧНИХ КАРТИН
Специфікація
482.ЧДТУ. 32003-01 01
Листів 2
Розробник ____________________ Компанєєць А.Б.
Керівник ____________________ Оксамитна Л.П.
Черкаси – 2023
65
482.ЧДТУ. 32003-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 32003-01 12 01 Текст програми
482.ЧДТУ. 32003-01 34 01 Інструкція користувача
482.ЧДТУ. 32003-01 90 01 Публікація по темі
кваліфікаційної роботи
бакалавра
66
ДОДАТОК Б
САЙТ-ВИСТАВКА ПІРОГРАФІЧНИХ КАРТИН
Текст програми
482.ЧДТУ. 32003-01 12 01
Листів 13
Розробник _____________ Компанєєць А.Б.
Черкаси – 2023
67
index.tsx
import styles from “@/styles/index.module.scss”;
import SiteLayout from “@/components/layout/SiteLayout”;
import Carousel from “@/components/carousel/Carousel”;
import { GetStaticProps, GetStaticPropsContext } from “next”;
import { getPictures, PictureInfo } from “@/lib/backend/static”;
import { useTranslation } from “next-i18next”;
import { serverSideTranslations } from “next-i18next/serverSideTranslations”;
import useWindowDimensions, { BACKGROUND, DESKTOP_MIN_WIDTH, useMediaQuery } from “@/lib/frontend/utils”;
import { useMemo } from “react”;
export interface HomeProps {
images: PictureInfo[];
}
export default function Home(props: HomeProps) {
const { t } = useTranslation(“common”);
const isMobile = useMediaQuery(`(max-width: ${DESKTOP_MIN_WIDTH})`);
const dims = useWindowDimensions();
const images = useMemo(() => {
return props.images.map((info) => info.url);
}, [props.images]);
return (
<SiteLayout background={BACKGROUND}>
<div className={styles.description}>{t(“description”)}</div>
<Carousel
images={images}
visibleItems={7}
itemWidth={isMobile ? dims.width * 0.85 : 275}
itemHeight={isMobile ? 325 : 275}
activeSizeRatio={isMobile ? 1 : 2}
className={styles.carousel}
currentItemClassName={styles.currentCarouselItem}
/>
</SiteLayout>
);
}
export const getStaticProps: GetStaticProps = async (
ctx: GetStaticPropsContext
): Promise<any> => {
const props: HomeProps = {
images: (await getPictures()).filter((info) => info.inCarousel),
};
return {
props: {
...props,
...(await serverSideTranslations(ctx.locale ?? ““, [“common”])),
},
};
};
68
gallery.tsx
import SiteLayout from “@/components/layout/SiteLayout”;
import { getPictures, PictureInfo } from “@/lib/backend/static”;
import { GetStaticProps, GetStaticPropsContext } from “next”;
import { NextSeo } from “next-seo”;
import Image from “next/image”;
import styles from “@/styles/gallery.module.scss”;
import { serverSideTranslations } from “next-i18next/serverSideTranslations”;
import { useTranslation } from “next-i18next”;
import useWindowDimensions, {
BACKGROUND,
DESKTOP_MIN_WIDTH,
getPublicUrl,
useMediaQuery,
} from “@/lib/frontend/utils”;
import { useState } from “react”;
const imgWidth = 400;
const minAspect = 0.7;
const maxAspect = 1.2;
export interface GalleryProps {
images: PictureInfo[];
}
export default function Gallery(props: GalleryProps) {
const { t } = useTranslation(“common”);
const isMobile = useMediaQuery(`(max-width: ${DESKTOP_MIN_WIDTH})`);
const dims = useWindowDimensions();
const [imageViewOpened, setImageViewOpened] = useState(false);
const [imageViewSrc, setImageViewSrc] = useState(““);
const images = props.images.map((info, i) => {
// const aspect = Math.max(
// minAspect,
// Math.min(maxAspect, info.height / info.width)
// );
const aspect = info.height / info.width;
return {
index: i,
width: imgWidth,
height: imgWidth * aspect,
url: info.url,
};
});
const openImageView = (src: string) => {
setImageViewSrc(src);
setImageViewOpened(true);
};
const imageViews = images.map((img) => (
<div
key={img.url}
style={{ position: “relative” }}
onClick={() => openImageView(img.url)}
>
<Image
src={img.url}
width={isMobile ? dims.width : img.width}
height={isMobile ? (dims.width * img.height) / img.width : img.height}
69
alt=““
className={styles.img}
/>
<span
style={{
position: “absolute”,
top: 0,
left: 0,
backgroundColor: “#3A2214”,
color: “white”,
padding: 4,
borderRadius: 5,
fontFamily: “monospace”,
fontSize: 18,
}}
>
{img.index + 1}
</span>
</div>
));
const stackedImageViews: JSX.Element[][] = [[], [], []];
const trackHeights = [0, 0, 0];
if (isMobile) {
for (let i = 0; i < images.length; i++) {
const img = images[i];
const view = imageViews[i];
stackedImageViews[0].push(view);
trackHeights[0] += img.height;
}
} else {
for (let i = 0; i < images.length; i++) {
const img = images[i];
const view = imageViews[i];
const maxHeight = Math.max(...trackHeights);
const freeHeights = trackHeights.map((h) => maxHeight - h);
const freeHeightsSorted = trackHeights.map((h, i) => [maxHeight - h, i]);
freeHeightsSorted.sort((a, b) => b[0] - a[0]);
let freePlace;
if (freeHeightsSorted[0][0] >= img.height) {
freePlace = freeHeights.indexOf(freeHeightsSorted[0][0]);
} else if (freeHeightsSorted[0][0] > 60) {
if (freeHeightsSorted[0][0] - freeHeightsSorted[1][0] > 60) {
freePlace = freeHeights.indexOf(freeHeightsSorted[0][0]);
} else {
freePlace = Math.min(
freeHeightsSorted[0][1],
freeHeightsSorted[1][1]
);
}
} else {
freePlace = 0;
}
stackedImageViews[freePlace].push(view);
trackHeights[freePlace] += img.height;
}
}
70
return (
<SiteLayout background={BACKGROUND} disableScroll={imageViewOpened}>
<NextSeo
title={t(“galleryPageName”)}
openGraph={{
images: [
{
url: `${getPublicUrl()}/images/gallery-og.jpeg`,
width: 1154,
height: 866,
},
],
}}
/>
<div className={styles.gallery}>
<div className={styles.track}>{stackedImageViews[0]}</div>
{!isMobile && (
<>
<div className={styles.track}>{stackedImageViews[1]}</div>
<div className={styles.track}>{stackedImageViews[2]}</div>
</>
)}
</div>
{imageViewOpened && (
<div
className={styles.imageView}
onScrollCapture={(e) => {
e.preventDefault();
return false;
}}
>
<div className={styles.imageView__box}>
<Image src={imageViewSrc} alt=““ fill />
</div>
<div
className={styles.imageView__closeButton}
onClick={() => setImageViewOpened(false)}
>
<i className=“bx bx-x” />
</div>
</div>
)}
</SiteLayout>
);
}
export const getStaticProps: GetStaticProps = async (
ctx: GetStaticPropsContext
): Promise<any> => {
const props: GalleryProps = {
images: await getPictures(),
};
return {
props: {
...props,
...(await serverSideTranslations(ctx.locale ?? ““, [“common”])),
},
};
};
71
pyrography.tsx
import SiteLayout from “@/components/layout/SiteLayout”;
import { NextSeo } from “next-seo”;
import styles from “@/styles/pyrography.module.scss”;
import { GetStaticProps, GetStaticPropsContext } from “next”;
import { serverSideTranslations } from “next-i18next/serverSideTranslations”;
import { useTranslation } from “next-i18next”;
import { BACKGROUND } from “@/lib/frontend/utils”;
import burningImage from “@/public/images/burning.jpg”;
import Image from “next/image”;
export default function Pyrography() {
const { t } = useTranslation(“common”);
return (
<SiteLayout background={BACKGROUND}>
<NextSeo title={t(“contactPageName”)} />
<div className={styles.container}>
<div className={styles.form}>
<div className={styles.row} style={{ textAlign: “justify” }}>
{t(“pyrographyInfo”)}
</div>
<div
className={styles.row}
style={{
alignItems: “center”,
position: “relative”,
aspectRatio: “3/2”,
}}
>
<Image
src={burningImage}
alt=““
style={{ objectFit: “cover” }}
fill
priority
/>
</div>
</div>
</div>
</SiteLayout>
);
}
export const getStaticProps: GetStaticProps = async (
ctx: GetStaticPropsContext
): Promise<any> => {
return {
props: {
...(await serverSideTranslations(ctx.locale ?? ““, [“common”])),
},
};
};
72
order.tsx
import SiteLayout from “@/components/layout/SiteLayout”;
import { NextSeo } from “next-seo”;
import styles from “@/styles/order.module.scss”;
import { Dispatch, useEffect, useState } from “react”;
import { OrderRequest } from “@/lib/dto”;
import { postRequestJson } from “@/lib/backend/http”;
import { serverSideTranslations } from “next-i18next/serverSideTranslations”;
import { GetStaticProps, GetStaticPropsContext } from “next”;
import { useTranslation } from “next-i18next”;
import { BACKGROUND } from “@/lib/frontend/utils”;
import {
MAX_COMMENT_LEN,
MAX_EMAIL_LEN,
MAX_NAME_LEN,
MAX_PHONE_NUMBER_LEN,
} from “@/lib/common”;
function useSessionState(
key: string,
initial: string
): [string, Dispatch<string>] {
const [state, setState] = useState(initial);
useEffect(() => {
const curr = sessionStorage.getItem(key);
if (curr) {
setState(curr);
} else {
sessionStorage.setItem(key, state);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
sessionStorage.setItem(key, state);
}, [key, state]);
const modifiedSetState = (value: string) => {
sessionStorage.setItem(key, value);
setState(value);
};
return [state, modifiedSetState];
}
export default function Order() {
const { t } = useTranslation(“common”);
const [name, setName] = useSessionState(“order_name”, ““);
const [email, setEmail] = useSessionState(“order_email”, ““);
const [phone, setPhone] = useSessionState(“order_phone”, ““);
const [pictureNumber, setPictureNumber] = useSessionState(
“order_pictureNumber”,
““
);
const [preferredSizes, setPreferredSizes] = useSessionState(
“order_preferredSizes”,
““
);
const [comment, setComment] = useSessionState(“order_comment”, ““);
73
const [ordered, setOrdered] = useState(false);
useEffect(() => {
window.addEventListener(“unload”, () => {
setName(““);
setEmail(““);
setPhone(““);
setPictureNumber(““);
setPreferredSizes(““);
setComment(““);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const onOrder = async () => {
const dto: OrderRequest = {
name,
email,
phone,
pictureNumber,
preferredSizes,
comment,
};
setName(““);
setEmail(““);
setPhone(““);
setPictureNumber(““);
setPreferredSizes(““);
setComment(““);
setOrdered(true);
await postRequestJson(“/api/make_order”, dto).catch(() => {});
};
return (
<SiteLayout background={BACKGROUND}>
<NextSeo title={t(“orderPageName”)} />
<div className={styles.container}>
<form
className={styles.form}
onSubmit={(e) => {
onOrder();
e.preventDefault();
}}
>
{!ordered ? (
<>
<input
type=“text”
placeholder={`${t(“name”)} *`}
maxLength={MAX_NAME_LEN}
autoFocus
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<input
type=“email”
placeholder=“E-mail”
maxLength={MAX_EMAIL_LEN}
value={email}
onChange={(e) => setEmail(e.target.value)}
74
/>
<input
type=“tel”
placeholder={`${t(“phoneNumber”)} *`}
maxLength={MAX_PHONE_NUMBER_LEN}
value={phone}
onChange={(e) => setPhone(e.target.value)}
required
/>
<input
type=“text”
placeholder={t(“pictureNumberFromGallery”)}
maxLength={100}
value={pictureNumber}
onChange={(e) => setPictureNumber(e.target.value)}
/>
<input
type=“text”
placeholder={t(“preferredSizes”)}
maxLength={150}
value={preferredSizes}
onChange={(e) => setPreferredSizes(e.target.value)}
/>
<textarea
placeholder={t(“orderComment”)}
maxLength={MAX_COMMENT_LEN}
value={comment}
onChange={(e) => setComment(e.target.value)}
/>
<button type=“submit” className={styles.orderButton}>
{t(“doOrder”)}
</button>
</>
) : (
<div
style={{
alignSelf: “center”,
marginTop: 130,
}}
>
{t(“orderSuccessful”)}
</div>
)}
</form>
</div>
</SiteLayout>
);
}
export const getStaticProps: GetStaticProps = async (
ctx: GetStaticPropsContext
): Promise<any> => {
return {
props: {
...(await serverSideTranslations(ctx.locale ?? ““, [“common”])),
},
};
};
75
contact.tsx
import SiteLayout from “@/components/layout/SiteLayout”;
import { NextSeo } from “next-seo”;
import styles from “@/styles/contact.module.scss”;
import { GetStaticProps, GetStaticPropsContext } from “next”;
import { serverSideTranslations } from “next-i18next/serverSideTranslations”;
import { useTranslation } from “next-i18next”;
import { BACKGROUND } from “@/lib/frontend/utils”;
export default function Contact() {
const { t } = useTranslation(“common”);
const tel = “ +380 (63) 898 36 23”;
const email = “[email protected]”;
return (
<SiteLayout background={BACKGROUND}>
<NextSeo title={t(“contactPageName”)} />
<div className={styles.container}>
<div className={styles.form}>
<div className={styles.row}>
<div>
<div style={{ display: “flex”, alignItems: “center” }}>
<i className=“bx bx-phone” />
{t(“ourPhone”)}
</div>
<div className={styles.hint}>{t(“callAtYourConvenience”)}</div>
</div>
<div>
<a href={`tel:${tel}`}>{tel}</a>
</div>
</div>
<div className={styles.row}>
<div>
<div style={{ display: “flex”, alignItems: “center” }}>
<i className=“bx bx-envelope” />
E-mail {t(“address”)}
</div>
<div className={styles.hint}>{t(“emailAddressHint”)}</div>
</div>
<div>
<a href={`mailto:${email}`}>{email}</a>
</div>
</div>
<div className={styles.row}>
<div>
<div style={{ display: “flex”, alignItems: “center” }}>
<i className=“bx bxl-instagram” />
Instagram
</div>
<div className={styles.hint}>{t(“instagramHint”)}</div>
</div>
<div>
<a href=“https://instagram.com/woodburning_ukraine”>
@woodburning_ukraine
</a>
</div>
</div>
</div>
</div>
</SiteLayout>
);
76
}
export const getStaticProps: GetStaticProps = async (
ctx: GetStaticPropsContext
): Promise<any> => {
return {
props: {
...(await serverSideTranslations(ctx.locale ?? ““, [“common”])),
},
};
};
carousel.tsx
import Image from “next/image”;
import React, { useEffect, useRef, useState } from “react”;
import { CSSTransition, TransitionGroup } from “react-transition-group”;
import styles from “./Carousel.module.scss”;
interface CarouselProps {
images: string[];
visibleItems: number;
itemWidth: number;
itemHeight: number;
activeSizeRatio: number;
className?: string;
currentItemClassName?: string;
}
interface Item {
src: string;
id: number;
srcIdx: number;
}
function shuffleArray(array: any[]) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
export default function Carousel(props: CarouselProps) {
const [items, setItems] = useState<Item[]>([]);
const idCounter = useRef(0);
const [currIdx, setCurrIdx] = useState(0);
useEffect(() => {
let len = props.images.length * 3;
// Make the number odd so there’s one item at the center
len -= 1 - (len % 2);
const shuffledImages = props.images.slice();
shuffleArray(shuffledImages);
const arr = [];
for (let i = 0; i < len; i++) {
77
const offsetI = i + 1;
const srcIdx = offsetI % props.images.length;
const src = shuffledImages[srcIdx];
const id = idCounter.current++;
arr.push({ src, srcIdx, id });
}
setItems(arr);
}, [props.images]);
useEffect(() => {
setCurrIdx(Math.floor(items.length / 2));
}, [items]);
const shiftItems = (count: number) => {
if (items.length == 0) {
return;
}
const arr = items.slice();
if (count > 0) {
for (let i = 0; i < count; i++) {
const first = arr.shift()!;
first.id = idCounter.current++;
arr.push(first!);
}
} else {
for (let i = 0; i < -count; i++) {
const last = arr.pop()!;
last.id = idCounter.current++;
arr.unshift(last!);
}
}
setItems(arr);
};
const switchToPrev = () => {
shiftItems(-1);
};
const switchToNext = () => {
shiftItems(1);
};
const onItemClick = (idx: number) => {
const delta = idx - currIdx;
shiftItems(delta);
};
const trackWidth = props.itemWidth * items.length;
const activeItemWidth = props.itemWidth * props.activeSizeRatio;
const activeItemHeight = props.itemHeight * props.activeSizeRatio;
const trackHeight = activeItemHeight;
return (
<div className={`${styles.container} ${props.className}`}>
<style jsx>{`
.item {
position: relative;
transform: scale(0.9);
display: flex;
78
min-width: ${props.itemWidth}px;
min-height: ${props.itemHeight}px;
transition: 0.8s ease-out;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.item__current {
min-width: ${activeItemWidth}px;
min-height: ${activeItemHeight}px;
}
.item__enter {
min-width: 0;
}
.item__enter_active {
min-width: ${props.itemWidth}px;
}
.item__exit {
min-width: ${props.itemHeight}px;
}
.item__exit_active {
min-width: 0;
}
.controls {
position: absolute;
display: flex;
justify-content: space-between;
color: white;
width: ${activeItemWidth * 0.9 + 85}px;
font-size: 40px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
`}</style>
<TransitionGroup
className={styles.track}
style={{ width: trackWidth, height: trackHeight }}
>
{items.map((item, i) => (
<CSSTransition
key={item.id}
timeout={1000}
classNames={{
enter: “item__enter”,
enterActive: “item__enter_active”,
exit: “item__exit”,
exitActive: “item__exit_active”,
}}
>
<div
className={`item ${i == currIdx ? “item__current” : ““} ${
i == currIdx ? props.currentItemClassName : ““
}`}
>
<Image
onClick={() => onItemClick(i)}
src={item.src}
fill
79
sizes={`${activeItemWidth}px`}
alt=““
priority
className={styles.picture}
/>
</div>
</CSSTransition>
))}
</TransitionGroup>
<div className=“controls”>
<div onClick={switchToPrev} className=“bx bxs-chevron-left” />
<div onClick={switchToNext} className=“bx bxs-chevron-right” />
</div>
</div>
);
}
80
ДОДАТОК В
САЙТ-ВИСТАВКА ПІРОГРАФІЧНИХ КАРТИН
ІНСТРУКЦІЯ КОРИСТУВАЧА
482. ЧДТУ. 32003-01 34 01
Листів 2
Розробник _____________ Компанєєць А.Б.
Черкаси – 2023
81
Розглянемо етапи користування розробленим сайтом-виставкою пірографічних
картин «Wood Burning Ukraine».
Запуск локального сервера:
1. Встановити NodeJs, Yarn.
2. Запустити консоль, перейти до папки проєкту.
3. Запустити сервер в режимі розробки, виконавши команду «yarn dev»:
4. Перейти в браузері за виведеною в консолі адресою: http://localhost:3000
(рис. В.1).
Рисунок В.1 – Перехід на головну сторінку сайту «Wood Burning Ukraine»
Перегляд сайту в розгорнутій версії розробленого сайту:
1. Запустити браузер.
2. Перейти за адресою: https://woodburningukraine.vercel.app.
82
ДОДАТОК Г
ТЕЗИ ДОПОВІДЕЙ СТУДЕНТСЬКОЇ НАУКОВО-ПРАКТИЧНОЇ
КОНФЕРЕНЦІЇ ЧДТУ
Публікація по темі кваліфікаційної роботи бакалавра
482.ЧДТУ. 32003-01 90 01
Листів 3
Розробник: _________________ Компанєєць А.Б.
Черкаси – 2023
83
84