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/6172| Title: | Сайт інтернет-магазину енергонезалежних пристроїв |
| Authors: | Андрієнко, Володимир Олександрович Кузьменко, Владислав Юрійович |
| Keywords: | ІНТЕРНЕТ-МАГАЗИН;ЕНЕРГОНЕЗАЛЕЖНІ ПРИСТРОЇ;ЕЛЕКТРОННА КОМЕРЦІЯ;WORDPRESS;MAMP. |
| Issue Date: | 11-Jun-2024 |
| Abstract: | Сучасний світ стикається зі складними екологічними проблемами та зростаючою потребою у збереженні природних ресурсів. У зв'язку з цим, енергонезалежні пристрої, що використовують альтернативні джерела енергії, стають необхідними для зменшення негативного впливу на навколишнє середовище. Постійні зміни в технологіях та зростання вартості традиційних енергоресурсів також підсилюють попит на енергоефективні рішення. Розвиток інтернет-магазинів енергонезалежних пристроїв має велике значення з економічного погляду, сприяючи створенню нових ринків та збільшенню інвестицій у цей сектор. Крім того, впровадження таких пристроїв сприяє підвищенню енергетичної самодостатності та зниженню енергозалежності населення, що впливає на покращення якості життя та соціальний розвиток суспільства в цілому. Таким чином, інтернет-магазин енергонезалежних пристроїв має важливе значення як для екологічного, так і для економічного та соціального прогресу. Метою кваліфікаційної роботи бакалавра є розробка ефективного сайту інтернет-магазину енергонезалежних пристроїв. Об'єкт дослідження: об'єктом дослідження кваліфікаційної роботи бакалавра є сайт інтернет-магазину енергонезалежних пристроїв. Предмет дослідження: предметом дослідження кваліфікаційної роботи бакалавра є розвиток та покращення функціоналу інтернет-магазину енергонезалежних пристроїв, зокрема аналіз його працездатності та задоволення потреб споживачів. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6172 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Кузьменка Владислава_КНС-2103_2023-2024.pdf Restricted Access | 3.08 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 курсу, групи КНС-2103
спеціальності 122 – «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування»
Кузьменко Владислав Юрійович
Керівник___________ Андрієнко В.О.
(прізвище та ініціали)
Рецензент___________ Антонюк В.С.
(прізвище та ініціали)
Черкаси 2024 року
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2024 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Кузьменку Владиславу Юрійовичу
(прізвище, ім’я, по батькові)
1. Тема роботи Сайт інтернет-магазину енергонезалежних пристроїв
Керівник роботи Андрієнко В.О., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «26» лютого 2024 р. №60/04.
2. Строк подання студентом роботи «10» червня 2024 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Дослідження предметної області
4.2. Проєктування сайту інтернет-магазину енергонезалежних пристроїв
4.3. Програмна реалізація інтернет-магазину енергонезалежних пристроїв
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 42220-01.
1. Інструкція користувача
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5 .4. Презентація у вигляді 20 слайдів.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 15.01.2024 р.
КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ з/п Назва етапів кваліфікаційної роботи бакалавра Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
до 15.01.2024 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
до 12.02.2024 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної
до 18.03.2024 Виконано
роботи бакалавра.
4 Написання аналітичного розділу (аналіз об’єкту
до 01.04.2024 Виконано
й предмету дослідження).
5 Написання практичних розділів й висновків по
до 01.05.2024 Виконано
роботі.
6 Передзахист кваліфікаційної роботи бакалавра
до 03.06.2024 Виконано
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 10.06. 2024 Виконано
8 Захист кваліфікаційної роботи бакалавра. 11.06.2024 Виконано
Студент _____________________________ Владислав КУЗЬМЕНКО
(підпис)
Керівник роботи _____________________________ Володимир АНДРІЄНКО
(підпис)
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 57 с., 23 рис., 1 таблицю, 10
використаних джерел, 3 додатки.
Актуальність теми. Сучасний світ стикається зі складними екологічними
проблемами та зростаючою потребою у збереженні природних ресурсів. У зв'язку з
цим, енергонезалежні пристрої, що використовують альтернативні джерела енергії,
стають необхідними для зменшення негативного впливу на навколишнє середовище.
Постійні зміни в технологіях та зростання вартості традиційних енергоресурсів також
підсилюють попит на енергоефективні рішення. Розвиток інтернет-магазинів
енергонезалежних пристроїв має велике значення з економічного погляду, сприяючи
створенню нових ринків та збільшенню інвестицій у цей сектор. Крім того,
впровадження таких пристроїв сприяє підвищенню енергетичної самодостатності та
зниженню енергозалежності населення, що впливає на покращення якості життя та
соціальний розвиток суспільства в цілому. Таким чином, інтернет-магазин
енергонезалежних пристроїв має важливе значення як для екологічного, так і для
економічного та соціального прогресу.
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи бакалавра є
розробка ефективного сайту інтернет-магазину енергонезалежних пристроїв. Для
досягнення цієї мети необхідно вирішити такі задачі:
Провести аналіз існуючих інтернет-магазинів енергонезалежних пристроїв для
визначення їхніх переваг і недоліків.
Виявити потреби та вимоги споживачів щодо таких пристроїв.
Впровадити новітні технологічні рішення для покращення функціоналу та
зручності користування магазином.
Здійснити аналіз результатів впровадження стратегії та внести необхідні
корективи для досягнення максимального ефекту.
Об'єкт дослідження: об'єктом дослідження кваліфікаційної роботи бакалавра
є сайт інтернет-магазину енергонезалежних пристроїв.
Предмет дослідження: предметом дослідження кваліфікаційної роботи
бакалавра є розвиток та покращення функціоналу інтернет-магазину
енергонезалежних пристроїв, зокрема аналіз його працездатності та задоволення
потреб споживачів.
Методи дослідження. Для досягнення поставлених цілей
використовуватимуться наступні методи дослідження:
1. Аналіз існуючих інтернет-магазинів: проведення детального аналізу
функціоналу, дизайну, маркетингових стратегій та клієнтського сервісу
інтернет-магазинів енергонезалежних пристроїв.
2. Опитування споживачів: проведення опитувань серед потенційних та поточних
клієнтів для визначення їхніх потреб, вимог та оцінки задоволеності послугами
магазину.
3. SWOT-аналіз: визначення сильних сторін, слабких сторін, можливостей та
загроз інтернет-магазину для розробки стратегій розвитку.
4. Теоретичний аналіз: вивчення наукової літератури, статистичних даних та
публікацій, що стосуються ефективності маркетингових стратегій, тенденцій у
сфері енергонезалежних пристроїв та інновацій у технологіях електронної
комерції.
5. Експертні оцінки: консультації з експертами у сфері електронної комерції,
маркетингу та енергоефективності для отримання додаткових рекомендацій та
порад.
Перелік ключових слів: ІНТЕРНЕТ-МАГАЗИН, ЕНЕРГОНЕЗАЛЕЖНІ
ПРИСТРОЇ, ЕЛЕКТРОННА КОМЕРЦІЯ, WORDPRESS, MAMP.
ABSTRACT
Master’s work contains: 57 pages, 23 figures, 1 table, 10 used sources, 3
attachments.
Actuality of theme. The modern world is faced with complex environmental
problems and the growing need to preserve natural resources. In this regard, non-volatile
devices using alternative energy sources become necessary to reduce the negative impact on
the environment. Constant changes in technology and the rising cost of traditional energy
resources also increase the demand for energy-efficient solutions. The development of
online stores of non-volatile devices is of great importance from an economic point of view,
contributing to the creation of new markets and increased investment in this sector. In
addition, the introduction of such devices contributes to increasing energy self-sufficiency
and reducing energy dependence of the population, which affects the improvement of the
quality of life and social development of society as a whole. Thus, the online store of energy-
independent devices is important for both environmental and economic and social progress.
Purpose and tasks of the research. The purpose of this thesis is to develop an
effective website for a non-volatile devices online store. To achieve this goal, it is necessary
to solve the following tasks:
Analyze existing online stores of non-volatile devices to determine their advantages
and disadvantages.
Identify the needs and requirements of consumers regarding such devices.
Implement the latest technological solutions to improve the functionality and ease of
use of the store.
Analyze the results of strategy implementation and make the necessary adjustments
to achieve the maximum effect.
The object of research: the object of research in this thesis is the website of an online
store of non-volatile devices.
The subject of research: the subject of research in this thesis is the development and
improvement of the functionality of the online store of non-volatile devices, in particular,
the analysis of its performance and satisfaction of consumer needs.
Research methods. To achieve the set goals, the following research methods will be
used:
1. Analysis of existing online stores: conducting a detailed analysis of the functionality,
design, marketing strategies and customer service of online stores of non-volatile
devices.
2. Survey of consumers: conducting surveys among potential and current customers to
determine their needs, requirements and assess satisfaction with store services.
3. SWOT analysis: determination of the strengths, weaknesses, opportunities and threats
of the online store to develop development strategies.
4. Theoretical analysis: study of scientific literature, statistical data and publications
related to the effectiveness of marketing strategies, trends in the field of non-volatile
devices and innovations in electronic commerce technologies.
5. Expert assessments: consultations with experts in the field of e-commerce, marketing
and energy efficiency for additional recommendations and advice.
The list of keywords: ONLINE SHOP, ENERGY DEPENDENT DEVICES,
ELECTRONIC COMMERCE, WORDPRESS, MAMP.
8
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ ...... 10
ВСТУП ................................................................................................................................ 11
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ ............................................................... 13
1.1 Аналіз сучасного стану сайтів інтернет-магазинів енергонезалежних пристроїв
....................................................................................................................................... 13
1.2 Огляд існуючих аналогів веб-сайтів інтернет-магазинів енергонезалежних
пристроїв ...................................................................................................................... 14
1.2.1 Аналіз сайту інтернет-магазину «Енерджи Юа» ...................................... 14
1.2.2 Аналіз сайту інтернет-магазину «Energo Sklad» ...................................... 15
1.2.3 Аналіз сайту інтернет-магазину «Альцест» .............................................. 16
1.2.4 Аналіз сайту інтернет-магазину «Епіцентр» ............................................ 17
1.2.5 Аналіз сайту інтернет-магазину «ЕСКО» ................................................. 18
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та постановка
завдання ........................................................................................................................ 19
Висновки до розділу 1 ................................................................................................ 21
2 ПРОЄКТУВАННЯ САЙТУ ІНТЕРНЕТ-МАГАЗИНУ ЕНЕРГОНЕЗАЛЕЖНИХ
ПРИСТРОЇВ ....................................................................................................................... 23
2.1 Опис функціонального програмного середовища для розробки ..................... 23
2.2 Основні принципи розробки веб-сайту .............................................................. 25
2.3 Архітектура веб-сайтів ......................................................................................... 27
2.4 Розробка діаграми варіантів використання ........................................................ 31
2.5 Проєктування структури бази даних .................................................................. 34
2.6 Опис процесу проєктування структури сайту інтернет-магазину
енергонезалежних товарів .......................................................................................... 35
2.7 Проєктування інтерфейсу користувача .............................................................. 40
Висновки до розділу 2 ................................................................................................ 41
3 ПРОГРАМНА РЕАЛІЗАЦІЯ ІНТЕРНЕТ-МАГАЗИНУ ЕНЕРГОНЕЗАЛЕЖНИХ
ПРИСТРОЇВ ....................................................................................................................... 43
9
3.1 Опис реалізації завдання ...................................................................................... 43
3.2 Опис архітектури програмного забезпечення .................................................... 44
3.3 Огляд сторінок та інструкції користувача .......................................................... 45
3.4 Особливості тестування веб-сайту ...................................................................... 50
3.5 Аналіз отриманих результатів ............................................................................. 52
Висновки до розділу 3 ................................................................................................ 54
ВИСНОВКИ ....................................................................................................................... 56
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 57
ДОДАТОК А. Специфікація 482.ЧДТУ. 42220-01 ........................................................ 59
ДОДАТОК Б. Текст програми ......................................................................................... 61
ДОДАТОК В. Інструкція користувача ............................................................................ 67
10
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
БД – база даних;
Система управління вмістом – CMS (Content Management System) – це програмне
забезпечення, яке використовується для створення, управління і публікації веб-
контенту;
UX/UI – UX (User Experience) – це взаємодія користувача з продуктом, включаючи
його перцепції та задоволення від використання. UI (User Interface) – це зовнішній
вигляд та взаємодія користувача з інтерфейсом продукту.
CDN (Content Delivery Network) – це мережа серверів, що допомагає швидко та
ефективно доставляти контент до користувачів.
SSL – це криптографічний протокол для захисту передачі даних між веб-сервером і
браузером користувача.
URL-адрес (або URL) – це унікальний ідентифікатор для визначення ресурсів в
інтернеті, таких як веб-сторінки, зображення або файли.
SEO (Search Engine Optimization) – це набір стратегій і методів, спрямованих на
покращення видимості і рейтингу веб-сайту у пошукових системах, що забезпечує
збільшення трафіку на сайт і покращення його позицій у пошукових результатах.
SQL-ін'єкція – це вразливість веб-додатків, яка дозволяє зловмисникам впливати на
базу даних, вставляючи зловмисний SQL-код через веб-інтерфейс.
Мікроінтеракції – це невеликі взаємодії користувача з продуктом, які покращують
зручність користування, наприклад, анімація кнопки після натискання на неї чи
відображення додаткової інформації при наведенні курсора.
11
ВСТУП
У сучасному світі, де на тлі зростаючої уваги до питань енергоефективності та
потреби у розвитку альтернативних джерел енергії, роль енергонезалежних пристроїв
стає ще більш визначальною. Вони не лише знаходять широке застосування в різних
галузях промисловості та побуту, але й перетворюються на об'єкт значного попиту
серед споживачів. Питання енергонезалежності та ефективного використання
ресурсів стають не тільки актуальними, але й нагадують нам про важливість
збереження навколишнього середовища та раціонального використання
енергетичних ресурсів для забезпечення сталого розвитку.
Актуальність кваліфікаційної роботи бакалавра. Актуальність роботи полягає
в тому, що сучасний світ надзвичайно зацікавлений у розвитку та використанні
енергонезалежних пристроїв. Ці пристрої є не лише корисними для збереження
енергії та довкілля, але й дуже зручними у використанні для кінцевих споживачів.
Завдяки інтернет-магазинам, які спеціалізуються на цих товарах, їх можна легко
знайти та придбати в будь-який зручний для клієнта час. Популярність таких
пристроїв постійно зростає, що свідчить про актуальність дослідження їхнього
присутності та продажу в інтернет-магазинах. Крім того, інтернет-магазини надають
можливість швидкого порівняння товарів, отримання знижок та зручну доставку
безпосередньо до дверей покупця.
Мета кваліфікаційної роботи бакалавра – створення сайту інтернет-магазину
енергонезалежних пристроїв для їх продажу.
Для досягнення поставленої мети були поставлені такі завдання:
дослідити предметну область;
виконати порівняльний аналіз вже існуючих інтернет-магазинів з продажу
енергонезалежних товарів;
аналіз сучасних технологічних рішень та розробка стратегії для просування
інтернет-магазину енергонезалежних пристроїв;
обрати програмно-технічні засоби для реалізації сайту інтернет-магазину;
розробити сайт інтернет-магазину та виконати його тестування.
12
Об’єкт і предмет дослідження.
Об’єктом дослідження є технологічні та маркетингові аспекти створення
інтернет-магазину енергонезалежних пристроїв.
Предметом дослідження є сайт інтернет-магазину енергонезалежних
пристроїв.
Для вирішення поставлених завдань були застосовані наступні методи
дослідження:
теоретичний – використовувався для аналізу літератури з проблеми
дослідження;
порівняльний – застосовувався для здійснення порівнянь існуючих аналогів
сайтів інтернет-магазинів;
емпіричний – полягав у спостереженні та налаштуванні сайту для замовлення
енергонезалежних пристроїв;
експериментальний – використовувався для тестування різних варіантів
дизайну сайту з метою визначення оптимальних рішень для задоволення потреб
користувачів.
Сайт інтернет-магазину енергонезалежних пристроїв був розроблений за
допомогою платформи WordPress та запущений на локальному сервері за допомогою
MAMP (Apache, MySQL).
13
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Аналіз сучасного стану сайтів інтернет-магазинів енергонезалежних
пристроїв
Сучасний розвиток інтернет-магазинів є складним і динамічним процесом, який
обумовлений численними факторами. Одним із основних аспектів є зростання
популярності онлайн-торгівлі серед споживачів, які віддають перевагу зручності та
доступності покупок в інтернеті. Це призводить до збільшення конкуренції між
інтернет-магазинами і стимулює їхні зусилля у поліпшенні сервісу та інноваціях.
Однією з головних тенденцій є розширення функціоналу інтернет-магазинів,
зокрема, впровадження розумних технологій, таких як інтелектуальний аналіз даних
та машинне навчання. Ці технології допомагають вдосконалити персоналізацію
пропозицій для кожного користувача, забезпечуючи більш ефективний маркетинг та
збільшення продажів.
За останні роки спостерігається також зростання уваги до екологічної стійкості
та соціальної відповідальності веб-сайтів. Багато компаній звертають увагу на
зменшення вуглецевого сліду своєї діяльності, використання екологічно чистих
матеріалів та підтримку соціальних проєктів. Це сприяє позитивному іміджу бренду
та привертає увагу нових клієнтів.
Ще одним важливим аспектом є розвиток мобільної торгівлі та адаптація
інтернет-магазинів під мобільні пристрої. За останні роки зростає кількість
користувачів, які здійснюють покупки через смартфони та планшети, тому важливо
мати мобільно-дружню версію веб-сайту для зручності клієнтів.
Крім того, важливою характеристикою є забезпечення безпеки та захисту даних
користувачів. Зростаючі загрози кібербезпеки вимагають від інтернет-магазинів
надійних заходів захисту, включаючи шифрування даних, двофакторну
автентифікацію та системи виявлення шахрайства.
У цілому, аналіз сучасного стану інтернет-магазинів свідчить про те, що цей
сегмент електронної комерції розвивається швидко та постійно адаптується до вимог
сучасного ринку та потреб споживачів.
14
1.2 Огляд існуючих аналогів веб-сайтів інтернет-магазинів
енергонезалежних пристроїв
У рамках кваліфікаційної роботи бакалавра був проведений огляд існуючих
аналогів сайтів інтернет-магазинів, які пропонують енергонезалежні пристрої,
зокрема: «Енерджи Юа», «Energo Sklad», «Альцест», «Епіцентр», «ЕСКО». Кожен з
цих магазинів варто розглядати як важливий учасник ринку енергонезалежних
пристроїв, що відзначається своїм унікальним підходом та різноманітними
можливостями для клієнтів.
1.2.1 Аналіз сайту інтернет-магазину «Енерджи Юа». Сайт «Енерджи Юа» є
інтернет-магазином, який спеціалізується на продажу енергонезалежних пристроїв та
рішень для використання в умовах відсутності джерела електроенергії. Магазин
пропонує широкий асортимент продукції, включаючи сонячні панелі, портативні
акумулятори, вітряні турбіни та інші альтернативні джерела енергії [4].
На рис. 1.1 представлена головна сторінка сайту інтернет-магазину «Енерджи
Юа».
Рисунок 1.1 – Головна сторінка сайту інтернет-магазину «Енерджи Юа» [4]
Переваги інтернет-магазину «Енерджи Юа»:
Різноманітність продукції: «Енерджи Юа» пропонує широкий вибір
15
енергонезалежних пристроїв, що відповідають потребам різних категорій
клієнтів.
Якість продукції: Товари, представлені на сайті, відомі своєю якістю та
надійністю, що підтверджено відгуками клієнтів та експертів.
Зручність покупок: Сайт має інтуїтивно зрозумілий і зручний інтерфейс, що
дозволяє швидко знаходити необхідні товари та здійснювати покупки без
зайвих ускладнень.
Недоліки інтернет-магазину «Енерджи Юа»:
Цінова політика: деякі товари на сайті можуть бути дещо дорогими порівняно
з аналогічними продуктами на інших платформах.
Доставка та сервіс: деякі відгуки клієнтів свідчать про можливість затримок у
доставці та не завжди ефективний сервіс після продажу.
1.2.2 Аналіз сайту інтернет-магазину «Energo Sklad». «Energo Sklad» –
інтернет-магазин, спеціалізується на продажу енергонезалежних пристроїв та рішень
для дому та бізнесу. В асортименті магазину можна знайти сонячні панелі,
акумулятори, вітряні генератори, конвертори енергії та інші продукти, що дозволяють
користувачам забезпечити енергетичну автономію [5].
На рис. 1.2 представлена головна сторінка інтернет-магазину «Energo Sklad».
Рисунок 1.2 – Головна сторінка сайту інтернет-магазину «Energo Sklad» [5]
16
Переваги інтернет-магазину «Energo Sklad»:
Широкий вибір енергонезалежних пристроїв.
Висока якість продукції, що підтверджена позитивними відгуками клієнтів.
Зручний інтерфейс сайту та швидкий процес замовлення.
Гарантійне обслуговування та можливість повернення товару.
Компетентна підтримка клієнтів і консультації щодо вибору продуктів.
Недоліки інтернет-магазину «Energo Sklad»:
Вища цінова категорія порівняно з деякими конкурентами.
Можливість затримок у доставці товарів, особливо при великих обсягах
замовлень.
Обмежена доступність деяких товарів через попит та обмежену кількість
виробництва.
Візуально головна сторінка не дуже приваблива.
1.2.3 Аналіз сайту інтернет-магазину «Альцест». «Альцест» – інтернет-
магазин, спеціалізується на продажу енергонезалежних пристроїв та аксесуарів для
них. Магазин пропонує широкий асортимент товарів для забезпечення енергетичної
автономії, включаючи сонячні панелі, вітряні турбіни, акумулятори та інше [3].
На рис. 1.3 представлена головна сторінка сайту інтернет-магазину «Альцест».
Рисунок 1.3 – Головна сторінка сайту інтернет-магазину «Альцест» [3]
17
Переваги інтернет-магазину «Альцест»:
Розгалужена лінійка продуктів для різних потреб користувачів.
Доступні ціни порівняно з якістю пропонованих товарів.
Простий та зручний інтерфейс сайту для швидкого замовлення.
Широкий вибір опцій доставки та гнучкі умови оплати.
Кваліфікована підтримка клієнтів і консультації щодо вибору та використання
продуктів.
Недоліки інтернет-магазину «Альцест»:
Головна сторінка інтернет-магазину має недостатню привабливість та містить
надмірну кількість тексту.
Можливість затримок у доставці товарів у віддалені регіони.
Обмежений асортимент деяких категорій товарів на складі.
Не завжди чітка інформація про технічні характеристики товарів на сайті.
1.2.4 Аналіз сайту інтернет-магазину «Епіцентр». «Епіцентр» – великий
роздрібний мережевий магазин, який пропонує широкий вибір товарів для
будівництва, ремонту та побутових потреб. В їх асортименті є також енергонезалежні
пристрої [2]. На рис. 1.4 представлена головна сторінка сайту інтернет-магазину
«Епіцентр».
Рисунок 1.4 – Головна сторінка сайту інтернет-магазину «Епіцентр» [2]
18
Переваги інтернет-магазину «Епіцентр»:
Великий вибір енергонезалежних пристроїв та аксесуарів для них.
Наявність фізичних магазинів, що дозволяє клієнтам особисто переглянути та
придбати товар.
Різноманітність опцій доставки та зручні умови оплати.
Компетентна підтримка клієнтів і консультації щодо вибору продуктів.
Чітка інформація про товари та їх технічні характеристики на сайті.
Недоліки інтернет-магазину «Епіцентр»:
Можливість обмеженості асортименту енергонезалежних пристроїв порівняно
зі спеціалізованими магазинами.
Вища цінова категорія деяких товарів порівняно з конкурентами.
Можливість затримок у доставці товарів під час великих навантажень.
Надмірна кількість товарів на головній сторінці.
1.2.5 Аналіз сайту інтернет-магазину «ЕСКО». «ЕСКО» – інтернет-магазин,
спеціалізується на продажу електроніки, побутової техніки та енергонезалежних
пристроїв для дому та офісу. На сайті «ЕСКО» клієнти можуть знайти широкий вибір
сучасних технологічних рішень для забезпечення комфорту в будинку та офісі, в
інших місцях [1].
На рис. 1.5 представлена головна сторінка сайту інтернет-магазину «ЕСКО».
Рисунок 1.5 – Головна сторінка сайту інтернет-магазину «ЕСКО» [1]
19
Переваги інтернет-магазину «ЕСКО»:
Широкий вибір енергонезалежних пристроїв, включаючи сонячні панелі,
акумулятори, інвертори та інше.
Привабливі ціни та регулярні акції та знижки для клієнтів.
Зручний та інтуїтивно зрозумілий інтерфейс сайту для швидкого та зручного
замовлення товарів.
Гнучка система доставки та можливість самовивозу товарів з магазину.
Професійна підтримка клієнтів та консультації щодо вибору оптимальних
рішень.
Недоліки інтернет-магазину «ЕСКО»:
Можливість обмеженості асортименту в деяких категоріях товарів.
Не завжди чітка та докладна інформація про технічні характеристики товарів
на сайті.
Часом можливість затримок у виконанні замовлень та доставці товарів,
особливо під час великих навантажень.
Неприємний дизайн сайту.
Головна сторінка погано виглядає та має забагато тексту.
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та
постановка завдання
Після ретельного огляду існуючих інтернет-магазинів, таких як «Енерджи Юа»,
«Energo Sklad», «Альцест», «Епіцентр» і «ЕСКО» можна провести аналіз з метою
визначення їхніх основних переваг і недоліків. Цей аналіз допоможе виявити
проблемні аспекти у функціональності та сервісах, які можна врахувати при створенні
нового інтернет-магазину енергонезалежних пристроїв.
Під час аналізу було виявлено наступні ключові висновки:
Різноманітність продукції та якість товарів є важливими критеріями для
покупців.
Цінова політика та доступність товарів впливають на конкурентоспроможність
20
магазину.
Зручний та інтуїтивно зрозумілий інтерфейс сайту сприяє задоволенню
користувачів.
Швидка та якісна доставка є ключовими елементами клієнтського досвіду.
Професійна підтримка та консультації щодо продуктів допомагають збільшити
лояльність клієнтів.
У таблиці 1.1 представлений порівняльний аналіз розглянутих інтернет-
магазинів енергонезалежних товарів, а саме: «Енерджи Юа», «Energo Sklad»,
«Альцест», «Епіцентр», «ЕСКО».
Таблиця 1.1 – Таблиця порівнянь існуючих рішень розглянутих реалізацій
Критерії Назва інтернет-магазину
порівняння «Енерджи «Energo
«Альцест» «Епіцентр» «ЕСКО»
сайтів Юа» Sklad»
Дизайн
5 4 3 3 3
(0-5)
Інтуїтивність
та зручність 5 4 4 5 4
(0-5)
Функціонал
4 4 3 4 4
(0-5)
Якість
контенту та
5 3 3 3 4
інформації
(0-5)
За даними у табл. 1.1, інтернет-магазин «Енерджи Юа» видається лідером,
перевершуючи всі інші інтернет-магазини у трьох аспектах: дизайні, інтуїтивності та
зручності і також якості наданої інформації. У той же час, щодо функціональності,
«Енерджи Юа» зрівнявся з іншими магазинами, такими як «Energo Sklad», «Епіцентр»
та «ЕСКО». Тоді ж як, інтернет-магазин «Альцест» виявився найслабшим серед цих
конкурентів.
Проаналізувавши існуючі рішення розглянутих реалізацій, в кваліфікаційній
роботі бакалавра при розробці сайту інтернет-магазину енергонезалежних товарів
21
варто звернути увагу на такі моменти:
− сайт повинен мати зручний, зрозумілий та приємний інтерфейс;
− сайт повинен мати достатню швидкість та ефективність процесів;
− сайт повинен мати безпеку високого рівня.
Постановка завдання
1. Розробка інтуїтивно зрозумілого інтерфейсу:
Створення інтерфейсу, який легко розуміти та використовувати для різних
категорій користувачів.
Налаштування інтерфейсу з урахуванням індивідуальних потреб користувачів
та забезпечення максимальної зручності при використанні сайту.
2. Покращення швидкості та ефективності процесів:
Оптимізація роботи сайту.
Вдосконалення системи пошуку та фільтрації товарів для швидкого
знаходження потрібних позицій користувачами.
3. Забезпечення високого рівня безпеки та захисту персональних даних:
Розробка системи захисту даних, що включає шифрування та заходи захисту
від несанкціонованого доступу.
Забезпечення дотримання вимог щодо конфіденційності та безпеки
персональної інформації користувачів відповідно до відповідних законодавчих
актів.
Висновки до розділу 1
У першому розділі кваліфікаційної роботи, було проведено детальний аналіз
існуючих інтернет-магазинів енергонезалежних пристроїв, таких як «Енерджи Юа»,
«Energo Sklad», «Альцест», «Епіцентр» і «ЕСКО». В розділі були розглянуті переваги
та недоліки кожного з цих магазинів з точки зору дизайну, інтуїтивності та зручності
інтерфейсу, функціональності, якості контенту та інформації.
На основі аналізу були виявлені ключові аспекти, які впливають на
конкурентоспроможність та задоволення користувачів, такі як:
22
1. Якість та розгалуженість асортименту товарів.
2. Цінова політика та доступність продукції.
3. Зручність та інтуїтивність інтерфейсу сайту.
4. Швидкість та якість обслуговування, включаючи доставку та консультації.
5. Якість інформації про товари та їх технічні характеристики.
Була підготовлена таблиця порівнянь існуючих рішень розглянутих реалізацій,
що дозволило визначити ключові параметри для подальшої постановки завдання у
кваліфікаційній роботі бакалавра.
На основі таблиці були сформульовані завдання для подальшої розробки
інтернет-магазину енергонезалежних пристроїв, а саме:
1. Розробка інтуїтивно зрозумілого інтерфейсу.
2. Покращення швидкості та ефективності процесів на сайті.
3. Забезпечення високого рівня безпеки та захисту персональних даних
користувачів.
В результаті цього розділу були визначені ключові напрямки розвитку та
удосконалення майбутнього інтернет-магазину енергонезалежних пристроїв з метою
створення конкурентоспроможного та задовільного серед користувачів сервісу.
23
2 ПРОЄКТУВАННЯ САЙТУ ІНТЕРНЕТ-МАГАЗИНУ
ЕНЕРГОНЕЗАЛЕЖНИХ ПРИСТРОЇВ
2.1 Опис функціонального програмного середовища для розробки
Для розробки веб-сайту інтернет-магазину енергонезалежних пристроїв було
використано ряд потужних інструментів та технологій, спрямованих на забезпечення
ефективності та надійності роботи. Основними компонентами функціонального
програмного середовища були WordPress та MAMP.
WordPress – це відкрита платформа для управління вмістом, яка надає широкі
можливості для створення різноманітних веб-сайтів, включаючи інтернет-магазини.
Однією з основних переваг WordPress є його простота в установці та використанні,
що робить його досить популярним серед розробників. Він має велику спільноту
користувачів і розробників, які постійно вносять покращення і нові функції.
WordPress дозволяє легко керувати вмістом сайту, додавати нові сторінки та
публікації, редагувати тексти і зображення без необхідності знання програмування
[9].
MAMP – це локальне середовище для розробки веб-додатків, яке включає в себе
веб-сервер Apache, базу даних MySQL та мову програмування PHP. Використання
MAMP дозволяє легко налаштовувати і тестувати веб-сайти локально на вашому
комп'ютері перед їхнім розгортанням на живому сервері. Це особливо важливо для
розробників, які можуть ефективно вести роботу над проєктами без необхідності
постійного підключення до Інтернету та публікації змін на живому сайті до
завершення розробки та тестування. Крім того, MAMP має інтуїтивно зрозумілий
інтерфейс, що робить його дуже зручним для користувачів будь-якого рівня досвіду
[10].
Для ефективного та функціонального розвитку веб-сайту інтернет-магазину
енергонезалежних пристроїв, були використані наступні плагіни для WordPress:
1. Elementor:
Цей плагін є одним з найпопулярніших інструментів для створення сторінок на
24
WordPress без необхідності програмування.
Він має інтуїтивний інтерфейс, що дозволяє легко створювати різноманітні
дизайни сторінок за допомогою перетягування та опускання елементів.
Elementor надає доступ до широкого спектру віджетів та шаблонів, що
полегшує процес розробки і покращує дизайн сайту.
2. WooCommerce:
Цей плагін є основним інструментом для створення і управління інтернет-
магазинами на платформі WordPress.
WooCommerce дозволяє додавати необмежену кількість товарів,
налаштовувати ціни, здійснювати оплату та доставку, відстежувати статистику
продажів тощо.
Він має розширену систему налаштувань, що дозволяє індивідуалізувати
функціональність магазину під конкретні потреби.
3. Login/Signup Popup:
Цей плагін додає можливість швидкого входу або реєстрації користувачів за
допомогою спливаючого вікна.
Він полегшує процес реєстрації або входу для відвідувачів сайту, збільшуючи
зручність використання ресурсу.
4. Kadence WooCommerce Email Designer:
Цей плагін дозволяє налаштовувати дизайн та вміст електронних листів, які
відправляються покупцям через WooCommerce.
Ви можете кастомізувати шаблони листів, додавати логотип, змінювати
кольори та шрифти для створення професійного вигляду повідомлень.
5. Kadence Blocks – Gutenberg Blocks for Page Builder Features:
Цей плагін додає розширені блоки для редактора Gutenberg, що дозволяє легко
створювати різноманітні макети сторінок без необхідності кодування.
Він розширює можливості Gutenberg Editor і дозволяє швидко налаштовувати
вигляд та функціональність сторінок сайту.
6. Kadence AI Starter Templates:
Цей плагін надає доступ до широкого спектру шаблонів, що полегшує початок
25
розробки сайту.
Ви можете вибрати потрібний шаблон і швидко налаштувати його під потреби,
що зберігає час на створення базового вигляду сайту.
7. Fluent Forms:
Цей плагін дозволяє створювати різноманітні форми для зворотного зв'язку,
реєстрації користувачів, опитувань тощо.
Він має інтуїтивний конструктор форм, який дозволяє налаштовувати різні
поля, валідацію даних та налаштування повідомлень про відправку форми.
Ці плагіни спільно допомогли створити функціональний та ефективний сайт
інтернет-магазину з урахуванням різноманітних потреб користувачів та вимог
сучасного електронного бізнесу.
Як основа для дизайну інтерфейсу була використана тема Kadence, яка була
перероблена і доповнена відповідно до вимог інтернет-магазину енергонезалежних
пристроїв. Це дозволило досягти злагодженого і сучасного вигляду сайту, а також
забезпечити його адаптивність для різних пристроїв.
Таке поєднання плагінів і теми в середовищі WordPress разом із MAMP
створило ефективне та зручне програмне середовище для розробки та експлуатації
веб-сайту інтернет-магазину енергонезалежних пристроїв з високою
функціональністю та стабільністю.
2.2 Основні принципи розробки веб-сайту
При розробці веб-сайту інтернет-магазину енергонезалежних пристроїв
важливо керуватися ключовими принципами, що забезпечують успішну роботу та
задоволення користувачів. Основні принципи розробки веб-сайту включають:
1. Дизайн та UX/UI:
Розробка зручного та привабливого дизайну, що відповідає потребам та
стилістиці аудиторії.
Створення інтуїтивного інтерфейсу користувача (UI) та приємного досвіду
взаємодії (UX) за допомогою анімацій, мікроінтеракцій та адаптивних
26
елементів.
2. Мобільна адаптивність:
Оптимізація дизайну та контенту для максимального зручного відображення на
різних пристроях.
Використання мобільних специфічних функцій, таких як GPS, камера,
повідомлення, для покращення взаємодії з користувачами.
3. Швидкість завантаження:
Оптимізація зображень, скриптів та CSS для мінімізації часу завантаження
сторінок.
Використання CDN (Content Delivery Network) та кешування для швидшого
доступу до контенту користувачів з усього світу.
4. Безпека та захист даних:
Використання SSL-шифрування для захисту конфіденційної інформації
користувачів та даних платежів.
Регулярне оновлення платформи, теми, плагінів та використання найновіших
заходів безпеки.
5. SEO-оптимізація:
Вивчення ключових слів та оптимізація метатегів, URL-адрес, тегів зображень
та іншого контенту для підвищення позицій в пошукових системах.
Створення унікального та цікавого контенту, що привертає увагу користувачів
та стимулює пошукові системи.
6. Аналітика та відстеження:
Встановлення інструментів аналітики, таких як Google Analytics, для збору та
аналізу даних про відвідувачів.
Проведення A/B тестів та аналіз ефективності рекламних кампаній для
постійного вдосконалення веб-сайту та стратегій маркетингу.
Дотримуючись цих основних принципів розробки веб-сайту, забезпечується
висока якість користувацького досвіду, що відображається у збільшенні конверсії та
задоволенні відвідувачів. Застосування цих принципів дозволяє не лише створити
ефективний веб-сайт, але й зберегти відповідність до сучасних технологічних та
27
дизайнерських стандартів.
2.3 Архітектура веб-сайтів
Архітектура веб-сайту визначає не лише його структуру, а й ефективність у
використанні ресурсів та безпеку. Правильно спроєктована архітектура забезпечує
зручну навігацію для користувачів, оптимальне завантаження сторінок, а також
захист від потенційних загроз. Крім того, вона впливає на швидкість реагування сайту
на запити користувачів, що має значний вплив на загальний досвід взаємодії з веб-
ресурсом.
1. Структура сайту та її організація:
Структура сайту та її організація відіграють важливу роль у створенні
ефективного та зручного веб-ресурсу. На початковому етапі розробки важливо
визначити основні розділи та категорії, які будуть присутні на сайті. Це може
включати в себе розділи товарів або послуг, інформаційні блоки, контактну
інформацію, сторінки «Про нас» та інші.
Організація структури повинна бути логічною і зручною для користувачів.
Наприклад, основне меню має включати найважливіші розділи, які відображають
основну діяльність сайту. Для сайтів з великою кількістю товарів або послуг
рекомендується використовувати класифікацію та під класифікацію для полегшення
навігації.
При розробці структури сайту також слід враховувати SEO-аспекти, такі як
ключові слова та оптимізовані URL-адреси. Це допоможе підвищити видимість сайту
в пошукових системах і залучити більше цільової аудиторії.
Додатково, важливо враховувати мобільну адаптивність при організації
структури сайту. З урахуванням широкого використання мобільних пристроїв
користувачами, сайт повинен оптимально відображатися на різних екранах і
пристроях, забезпечуючи приємний користувацький досвід незалежно від типу
пристрою, який використовує відвідувач.
2. Меню та система навігації:
Меню та система навігації відіграють важливу роль у забезпеченні зручності
28
користувачів під час взаємодії з веб-сайтом. Ефективна організація меню дозволяє
відвідувачам швидко знаходити потрібну інформацію та переходити до неї без зайвих
зусиль. Правильно розміщені посилання та категорії сприяють покращенню
користувацького досвіду і збільшенню конверсії.
У меню слід враховувати ієрархію категорій та розділів, розташування
основних елементів, таких як «Головна», «Каталог товарів», «Акції», «Контакти» та
інші, щоб користувачі могли швидко зорієнтуватися на сайті. Також важливо
додавати підкатегорії або фільтри для більш деталізованого пошуку товарів або
інформації.
Крім того, система навігації повинна бути інтуїтивно зрозумілою та легкою для
використання. Це означає, що кнопки та посилання мають бути видимими та
доступними на будь-якій сторінці сайту, а структура навігації має бути послідовною
і логічною для користувача. Такий підхід допомагає уникнути складності під час
переходів між розділами сайту.
3. Безпека сайту:
Архітектура веб-сайту повинна бути побудована з урахуванням важливих
аспектів безпеки. Використання SSL-шифрування, регулярні оновлення програмного
забезпечення та застосування найновіших заходів безпеки допомагають захистити
сайт від атак та витоків даних.
Важливим елементом безпеки є також застосування правильних налаштувань
доступу до адміністративної панелі, використання сильних паролів та механізмів
двофакторної аутентифікації для забезпечення безпеки адміністративних функцій.
Крім того, регулярні аудити безпеки, перевірка на наявність вразливостей та
вчасне виправлення потенційних проблем є необхідними кроками для забезпечення
стійкості сайту до різноманітних загроз.
4. Мобільна адаптивність та швидкість завантаження:
Мобільна адаптивність та швидкість завантаження є критично важливими
аспектами сучасного веб-сайту. Оскільки користувачі все частіше використовують
мобільні пристрої для перегляду інформації та здійснення покупок, сайт повинен
оптимально відображатися на різних екранах і пристроях. Адаптивний дизайн
29
дозволяє автоматично підлаштовувати вигляд сайту до розмірів екрану користувача,
забезпечуючи зручну навігацію та читабельність контенту.
Крім того, швидкість завантаження сторінок також має велике значення для
користувацького досвіду. Оптимізація зображень, скриптів та інших ресурсів
дозволяє зменшити час очікування при завантаженні сторінок, що позитивно впливає
на задоволення відвідувачів та знижує ймовірність відмови. Застосування CDN
(Content Delivery Network) та кешування допомагає покращити швидкість доступу до
контенту з різних регіонів, що особливо важливо для сайтів з міжнародною
аудиторією.
5. SEO-оптимізація та аналітика:
SEO-оптимізація та аналітика є ключовими аспектами успішного інтернет-
магазину. Вони допомагають підняти ваш сайт на вершину пошукових результатів та
аналізувати ефективність вашої діяльності.
SEO-оптимізація є стратегічним підходом до покращення видимості вашого
сайту в пошукових системах, таких як Google, Bing, Yahoo та інші. Вона включає в
себе використання ключових слів у контенті вашого сайту, оптимізацію метатегів,
URL-адрес, зображень та іншого контенту для підвищення позицій у пошукових
результатів. Також важливо враховувати фактори, такі як швидкість завантаження
сторінок, мобільна дружність та безпека сайту, оскільки це також впливає на рейтинг
у пошукових системах.
Одним із ключових інструментів для відстеження ефективності вашого сайту є
аналітика. Використання інструментів, таких як Google Analytics, дозволяє збирати та
аналізувати різноманітні дані про відвідувачів, такі як кількість відвідувань, джерела
трафіку, поведінку користувачів на сайті та конверсійні показники. Ця інформація
надає вам можливість краще розуміти потреби та уподобання вашої аудиторії,
вдосконалювати стратегії маркетингу та реклами, а також здійснювати зміни на сайті
для покращення його ефективності.
При SEO-оптимізації та аналітиці важливо постійно вдосконалювати свої
стратегії, аналізувати результати та реагувати на зміни у пошукових алгоритмах та
поведінці користувачів. Це допоможе забезпечити стабільний ріст трафіку, конверсій
30
та прибутку для вашого інтернет-магазину.
6. Схема архітектури веб-сайту:
Архітектура веб-сайту є фундаментом для успішного функціонування та
розвитку проєкту. З правильно побудованою архітектурою забезпечується
ефективність, безпека та зручність для користувачів, що відображається у
позитивному досвіді відвідувачів та підвищенні конверсії.
На рисунку архітектури веб-сайту інтернет-магазину видно чітку структуру та
організацію компонентів сайту. Головною особливістю є логічне розміщення різних
розділів та функціональних блоків. Зліва ви бачите головне меню з важливими
сторінками, такими як «Контакти», «Про нас», «Оплата» та інші. Ці сторінки
дозволяють користувачам легко та швидко переходити до необхідної інформації.
Додатково, праворуч ви бачите категорії і підкатегорії товарів, що дозволяє
організувати асортимент товарів для зручності покупців. Така структура сприяє
зручній навігації користувачів по сайту та допомагає їм знайти потрібний товар без
зайвих зусиль (рис. 2.1).
Рисунок 2.1 – Схема архітектури сайту інтернет-магазину
31
В цілому, рисунок архітектури веб-сайту інтернет-магазину відображає
грамотно спроєктовану структуру, яка сприяє зручній навігації та покращенню
загального користувацького досвіду.
Архітектура веб-сайту визначає не лише його структуру, а й ефективність у
використанні ресурсів та безпеку. Правильно спроєктована архітектура забезпечує
зручну навігацію для користувачів, оптимальне завантаження сторінок, а також
захист від потенційних загроз. Крім того, вона впливає на швидкість реагування сайту
на запити користувачів, що має значний вплив на загальний досвід взаємодії з веб-
ресурсом. Всі ці аспекти важливі для успішного функціонування та розвитку веб-
проєкту і визначають його конкурентоспроможність і привабливість для відвідувачів.
Наведена схема архітектури веб-сайту інтернет-магазину є яскравим прикладом того,
як правильно організована структура сприяє позитивному користувацькому досвіду і
підвищує ефективність ресурсу.
2.4 Розробка діаграми варіантів використання
Розробка діаграми варіантів використання є важливим етапом у проєктуванні
веб-сайту інтернет-магазину енергонезалежних пристроїв. Діаграма варіантів
використання дозволяє систематизувати та узагальнити основні функціональні
вимоги до сайту, виокремити різні сценарії взаємодії користувачів з ресурсом та
визначити основні актори, які беруть участь у цих взаємодіях.
Для початку розробки діаграми варіантів використання необхідно провести
аналіз потреб та очікувань користувачів. Важливо визначити основні функції, які має
виконувати сайт, такі як перегляд товарів, оформлення замовлення, оплата,
реєстрація користувачів та інші. На основі цього аналізу можна скласти перелік
варіантів використання, які будуть включені до діаграми.
Після цього можна перейти до складання самої діаграми варіантів
використання. Для цього використовуються спеціальні засоби моделювання, такі як
UML (Unified Modeling Language). У діаграмі варіантів використання вказуються
основні сценарії взаємодії користувачів з сайтом, кожен сценарій описується від імені
конкретного актора та включає послідовність дій та можливі взаємодії з системою.
32
Діаграма варіантів використання може включати такі елементи:
1. Актори – основні учасники взаємодії з системою, наприклад, адміністратор,
користувач, гість.
2. Сценарії – послідовність кроків або дій, які виконуються користувачем або
системою.
3. Взаємодії – способи спілкування між акторами та системою, наприклад, запити,
відповіді, обмін даними.
Основні функції та можливості інтернет-магазину включають:
1. Покупка та доставка товарів:
Користувачі можуть переглядати асортимент енергонезалежних пристроїв,
додавати їх до кошика та оформляти замовлення.
Система автоматично розраховує вартість замовлення, включаючи вартість
доставки, і надає користувачеві зручні варіанти оплати.
Після оформлення замовлення користувач отримує підтвердження та
інформацію про стан замовлення та його доставку.
2. Сортування та пошук товарів:
Система надає можливість сортувати різні моделі енергонезалежних пристроїв
за ціною та критеріями.
3. Реєстрація та особистий кабінет:
Користувачі можуть створювати особисті облікові записи для зручного ведення
історії замовлень, зберігання адрес доставки та інформації про оплату.
У особистому кабінеті користувач може переглядати статус замовлень,
редагувати особисті дані та отримувати персоналізовані пропозиції.
4. Відгуки та рейтинги товарів:
Користувачі можуть залишати відгуки та оцінювати куплені товари, що
дозволяє іншим користувачам зробити об'єктивний вибір при покупці.
Система автоматично формує рейтинг товарів на основі відгуків користувачів,
що полегшує вибір клієнтам.
5. Акції та спеціальні пропозиції:
Система надає можливість створення акцій та спеціальних пропозицій для
33
залучення нових користувачів та збереження вірних клієнтів.
Користувачі отримують сповіщення про акції та знижки, що стимулює їх до
покупок.
Перед тим, як розглядати конкретні варіанти використання, важливо
відзначити, що діаграма варіантів використання є інструментом, який допомагає
систематизувати та візуалізувати функціональні вимоги до веб-сайту. Це дозволяє
команді проєктувальників та розробників чітко розуміти, як користувачі будуть
взаємодіяти з сайтом та які операції вони зможуть виконати (рис. 2.2).
Рисунок 2.2 – Діаграма варіантів використання
Після створення діаграми варіантів використання вона стає цінним
інструментом для подальшого проєктування та розробки веб-сайту. Вона дозволяє не
лише чітко визначити функціонал системи, а й забезпечити оптимальний досвід
користувачів. Крім того, вона є основою для проведення тестування та вдосконалення
функціоналу сайту в майбутньому, що робить її важливою частиною проєктного
процесу.
34
2.5 Проєктування структури бази даних
Проєктування структури бази даних є ключовим етапом у розробці веб-сайтів,
особливо при використанні систем управління вмістом, а саме WordPress та
локальних серверів, наприклад, MAMP, з базою даних MySQL. Належне
проєктування структури бази даних забезпечує ефективне зберігання та організацію
інформації, що використовується на веб-сайті та сприяє оптимальному
функціонуванню системи в цілому.
Під час проєктування структури бази даних для веб-сайту, який базується на
WordPress та використовує локальний сервер MAMP з MySQL, слід враховувати
декілька ключових аспектів:
1. Аналіз потреб сайту: перш ніж приступити до проєктування бази даних,
важливо провести детальний аналіз потреб вашого веб-сайту. Це включає
визначення типів даних, які потрібно зберігати (наприклад, користувачі,
товари, замовлення), їх взаємозв'язки та обсяг інформації, яку слід обробляти.
2. Структура таблиць: на основі аналізу потреб сайту слід розробити структуру
таблиць для бази даних. Це означає визначення таблиць для кожного типу
даних та їх взаємозв'язки через ключі. Наприклад, для інтернет-магазину
можуть бути таблиці для товарів, користувачів, замовлень тощо.
3. Нормалізація даних: важливим етапом проєктування є нормалізація даних, яка
дозволяє уникнути дублювання та забезпечити консистентність інформації. Це
включає розподіл даних між таблицями таким чином, щоб кожен фрагмент
інформації був представлений лише в одному місці.
4. Індексація: для оптимізації швидкості доступу до даних в базі даних слід також
враховувати використання індексів. Індекси дозволяють швидше здійснювати
пошук та сортування даних, зменшуючи час відповіді системи на запити
користувачів.
5. Безпека даних: особливу увагу слід приділити заходам безпеки даних. Це
включає використання захисту від SQL-ін'єкцій, обмеження доступу до бази
даних тільки авторизованим користувачам та регулярне резервне копіювання
35
інформації.
6. Оптимізація продуктивності: для забезпечення оптимальної продуктивності
важливо розглянути можливості оптимізації запитів до бази даних,
використання кешування та інші методи підвищення ефективності роботи
системи.
Після розробки структури бази даних та її впровадження, важливо звернути
увагу на етап тестування та валідації. Цей процес дозволяє перевірити не лише
правильність функціонування бази даних, а й її ефективність в реальних умовах
використання. Під час тестування можуть виявитися різні проблеми або недоліки, які
слід виправити до введення системи в експлуатацію.
Крім того, важливо забезпечити стабільну роботу веб-сайту з базою даних у
майбутньому. Це можна досягти шляхом регулярного моніторингу та підтримки бази
даних, вчасного виявлення та усунення можливих проблем, а також вдосконалення її
функціональності з урахуванням змін у потребах користувачів та розвитку веб-сайту.
Загалом, правильно спроєктована та належно протестована база даних (БД) є
фундаментом для успішної та ефективної роботи веб-сайту, що дозволяє забезпечити
користувачам зручний та надійний доступ до необхідної інформації.
2.6 Опис процесу проєктування структури сайту інтернет-магазину
енергонезалежних товарів
Процес проєктування структури сайту інтернет-магазину енергонезалежних
товарів був складним та детально продуманим, охоплюючи кілька ключових етапів,
що відіграли важливу роль у створенні оптимального та функціонального середовища
для користувачів.
Першим кроком у процесі було створення макетів сторінок на сайті за
допомогою сервісу Ninjamock. Це дозволило візуалізувати основні елементи
інтерфейсу, розміщення контенту та зручність навігації для користувачів. Важливим
аспектом цього етапу було забезпечення узгодженості дизайну та логіки веб-сайту з
вимогами та очікуваннями цільової аудиторії.
На основі макетів було розроблено структуру сайту з використанням системи
36
управління контентом WordPress та локального серверу MAMP. Вибір теми Kadence
став додатковим кроком у сторону оптимізації дизайну та функціональності сайту,
оскільки ця тема надає широкі можливості налаштування і привабливий вигляд.
Структура сайту включає такі основні сторінки:
1. Головна сторінка: це центральний вузол сайту, де користувач зустрічається з
загальним оглядом продуктів та акцій, які пропонуються. Тут відображається
найбільш актуальна інформація про нові надходження, знижки та акційні пропозиції.
Головна сторінка створена з урахуванням максимальної зручності для користувача,
щоб вони могли швидко знайти потрібні товари або інформацію про акції (рис. 2.3).
Рисунок 2.3 – Макет сторінки «Головна»
2. Сторінка «Каталог»: ця сторінка є центральним місцем, де представлений
повний каталог енергонезалежних пристроїв, доступних на сайті. Користувачі
можуть зручно переглядати товари і скористатися можливістю сортування та
37
фільтрації за різними критеріями, такими як ціна, категорія товарів, рейтинг
користувачів, новинки тощо. Це значно полегшує процес знаходження потрібного
товару і дозволяє здійснити покупку швидко та зручно (рис. 2.4).
Рисунок 2.4 – Макет сторінки «Товари»
3. Сторінка «Перегляд товару»: на цій сторінці детально описані характеристики
кожного товару, його особливості та переваги. Користувачам надається можливість
додати товар до кошика безпосередньо з цієї сторінки, а також переглянути відгуки
та оцінки інших покупців, що дозволяє зробити обґрунтований вибір при покупці.
Завдяки інформації на цій сторінці користувач може докладно ознайомитися з
продуктом перед придбанням, що робить цю сторінку ключовою для прийняття
рішення про покупку (рис. 2.5).
38
Рисунок 2.5 – Макет сторінки «Перегляд товару»
4. Сторінка «Про нас»: тут надана інформація про компанію, її історія, місія та
цінності. Користувачі можуть дізнатися більше про те, хто стоїть за веб-сайтом і які
принципи керують діяльністю компанії (рис. 2.6).
Рисунок 2.6 – Макет сторінки «Про нас»
39
5. Сторінка «Контакти»: на цій сторінці розміщена вся необхідна контактна
інформація для зв'язку з клієнтами. Користувачі можуть звертатися до компанії для
отримання консультації з питань, що стосуються продуктів чи послуг, вирішення
технічних проблем, а також надання відгуку чи скарги. Компанія забезпечує
оперативний та професійний зворотній зв'язок з клієнтами, щоб забезпечити високий
рівень задоволеності і комфорту у взаємодії (рис. 2.7).
Рисунок 2.7 – Макет сторінки «Контакти»
6. Сторінка «Оформлення замовлення»: тут користувачі можуть здійснити
оформлення свого замовлення зручним та простим способом. Вони мають
можливість вибрати оптимальний для них спосіб доставки та оплати, заповнити
необхідні дані для доставки товару та завершити оформлення покупки. Сторінка
дозволяє користувачам швидко та ефективно зробити покупку без зайвих ускладнень,
що підвищує зручність та задоволення від покупки (рис. 2.8).
40
Рисунок 2.8 – Макет сторінки «Оформлення замовлення»
Увесь процес проєктування структури сайту був орієнтований на забезпечення
зручності використання для користувачів, оптимізації швидкості завантаження
сторінок та безпеки обробки особистої інформації клієнтів. Крім того, було приділено
увагу адаптивності дизайну під різні пристрої, щоб забезпечити однаково зручний
доступ до сайту як на комп'ютерах, так і на мобільних пристроях.
Загальною метою проєктування структури сайту було створення ефективного
та привабливого інтернет-магазину енергонезалежних товарів, який задовольняє
потреби користувачів і сприяє успішному розвитку бізнесу.
2.7 Проєктування інтерфейсу користувача
Проєктування інтерфейсу користувача є ключовим етапом у розробці веб-
сайтів, особливо для інтернет-магазинів енергонезалежних пристроїв. При розробці
інтерфейсу враховуються не лише естетичні аспекти, але й функціональність та
зручність для користувачів. Основні принципи, які враховуються:
1. Навігація та структура сайту: грамотно спроєктована навігація дозволяє
41
користувачам легко знаходити потрібну інформацію. Це включає чіткі меню,
логічну структуру сторінок та шляхи для швидкого переходу між розділами.
2. Адаптивний дизайн: з урахуванням різних пристроїв, на яких може
переглядатися сайт (комп'ютери, планшети, смартфони), інтерфейс повинен
бути адаптивним для оптимального відображення на будь-якому пристрої.
3. Привабливий дизайн: дизайн інтерфейсу має бути привабливим та сучасним,
використовуючи відповідні кольори, шрифти, іконки та інші графічні елементи,
щоб створити позитивне враження у відвідувачів.
4. Зручність використання: користувачам повинно бути легко здійснювати
основні дії на сайті, такі як пошук товарів, додавання їх до кошика, оформлення
замовлення та зв'язок з підтримкою.
5. Функціональність: інтерфейс повинен забезпечувати всі необхідні функції для
успішної покупки, включаючи перегляд деталей товару, відгуки користувачів,
опції доставки та оплати.
6. Тестування та оптимізація: після розробки інтерфейсу проводиться тестування
для виявлення можливих проблем або недоліків. На основі результатів
тестування вносяться корективи та вдосконалення для покращення
користувацького досвіду.
7. Контент і взаємодія з користувачем: інтерфейс також має забезпечувати якісний
контент і можливість взаємодії з користувачами через форми зворотнього
зв'язку, чати для підтримки, реагування на відгуки тощо.
Проєктування інтерфейсу користувача для інтернет-магазину
енергонезалежних пристроїв включає в себе комплексний підхід, що спрямований на
забезпечення зручності, ефективності та задоволення потреб користувачів під час
їхнього перебування на сайті.
Висновки до розділу 2
У другому розділі були розглянуті основні аспекти розробки інтернет-магазину
енергонезалежних пристроїв, зокрема проєктування бази даних, структури сайту та
інтерфейсу користувача. Нижче наведено основні висновки:
42
1. Проєктування бази даних: належне проєктування структури бази даних є
ключовим для ефективного зберігання та організації інформації на сайті.
Врахування основних принципів проєктування дозволяє створити надійну та
продуктивну базу даних.
2. Структура сайту: важливою складовою успішного інтернет-магазину є
правильно спроєктована структура сайту з урахуванням потреб користувачів.
Чітка навігація, зручний каталог товарів та інші сторінки сприяють збільшенню
зручності використання сайту.
3. Інтерфейс користувача: правильно спроєктований інтерфейс користувача є
важливим елементом для залучення та утримання клієнтів. Зручність
використання, привабливий дизайн та функціональність інтерфейсу є
ключовими факторами успішного інтернет-магазину.
4. Адаптивність та оптимізація: врахування адаптивності сайту до різних
пристроїв та оптимізація швидкості роботи сайту є важливими аспектами, що
впливають на задоволення користувачів та рейтинг сайту у пошукових
системах.
5. Заключні зауваження: дотримання вищезазначених принципів та впровадження
передових технологій у розробку інтернет-магазину енергонезалежних
пристроїв допомагає створити конкурентоздатний та успішний проєкт.
Даний розділ надає важливу базу для подальшого розвитку та вдосконалення
інтернет-магазину, забезпечуючи ефективну та задовільну роботу для користувачів
та власників бізнесу.
43
3 ПРОГРАМНА РЕАЛІЗАЦІЯ ІНТЕРНЕТ-МАГАЗИНУ
ЕНЕРГОНЕЗАЛЕЖНИХ ПРИСТРОЇВ
3.1 Опис реалізації завдання
Основним завданням кваліфікаційної роботи бакалавра є розробка сайту
інтернет-магазину енергонезалежних пристроїв.
Під час розробки веб-сайту для інтернет-магазину енергонезалежних пристроїв
було використано платформу WordPress разом з локальним сервером MAMP. БД була
створена на MySQL Server та підключена до WordPress під назвою «wordpress». Цей
підхід дозволив мати автоматичне оновлення бази даних при внесенні змін на сайті,
забезпечуючи швидке та ефективне оновлення інформації для користувачів.
Процес реалізації завдання включав кілька ключових кроків:
1. Створення структури бази даних: Була розроблена детальна структура бази
даних, в якій визначалися таблиці для категорій товарів, товарів, замовлень,
користувачів та іншої необхідної інформації для роботи магазину.
2. Розробка інтерфейсу користувача: Застосовувалась тема Kadence для
WordPress, яка забезпечувала зручний та привабливий інтерфейс для
користувачів. До цього були розроблені макети сторінок на сайті за допомогою
сервісу Ninjamock, що дозволило уникнути зайвих затримок під час розробки.
3. Функціональні можливості: Для користувачів було реалізовано можливість
перегляду каталогу товарів, сортування за різними критеріями, додавання
товарів до кошика та оформлення замовлення з обраною доставкою та оплатою.
4. Забезпечення безпеки та ефективності: Були використані сучасні методи
захисту даних та оптимізації продуктивності сайту для забезпечення стабільної
та ефективної роботи веб-сайту у майбутньому.
Під час розробки сайту виникла необхідність уважно аналізувати та виправляти
помилки, що допускалися під час програмування та налаштування. Важливою
складовою було також тестування функціоналу на різних пристроях та веб-браузерах,
щоб забезпечити коректну роботу сайту для всіх користувачів.
У результаті реалізації завдання вдалося створити функціональний та
44
привабливий інтернет-магазин, який задовольняє потреби користувачів у зручному та
безпечному шопінгу енергонезалежних пристроїв.
3.2 Опис архітектури програмного забезпечення
Інтернет-магазин «Вільна енергія» базується на сучасних технологіях та
платформах для забезпечення надійності та ефективності його роботи. Основні
технічні параметри включають в себе:
CMS (Content Management System): Веб-сайт розроблено з використанням
популярної системи управління контентом WordPress, що дозволяє легко
керувати вмістом сайту та його функціональністю.
Хостинг: Для локального розроблення та тестування використовується MAMP
(Apache, MySQL, PHP), що забезпечує зручність та швидкість роботи з сайтом
на власному комп'ютері.
БД: Дані сайту зберігаються в MySQL Server, назва бази даних «wordpress», що
забезпечує надійну та швидку роботу з великим обсягом інформації.
Мови програмування: Веб-сайт написаний на PHP, використовує HTML, CSS,
та JavaScript для коректного відображення та взаємодії з користувачами.
Ці технічні характеристики визначають стабільність та надійність роботи
інтернет-магазину «Вільна енергія» та забезпечують його ефективне функціонування.
Веб-сайт «Вільна енергія» має детально розроблену структуру сторінок, яка
включає в себе основні розділи та функціональність:
Головна: сторінка, яка вітає користувачів та надає загальну інформацію про
магазин та його пропозиції.
Каталог: розділ з усіма доступними товарами, поділений на категорії для
зручного пошуку.
Про магазин: інформація про історію, цілі та цінності компанії.
Контакти: контактна інформація для зв'язку з адміністрацією магазину.
Особистий кабінет: сторінка для зареєстрованих користувачів з можливістю
перегляду інформації про замовлення та особисті налаштування.
45
Кошик: місце, де користувачі можуть переглядати та керувати товарами, які
вони додали до кошика перед оформленням замовлення.
Оформлення замовлення: сторінка, на якій користувачі вводять свої дані та
підтверджують замовлення.
Додаткові сторінки: додаткові розділи та інформаційні сторінки, які
розширюють функціональність та інформативність магазину.
Ця структура сторінок забезпечує зручність та легкість використання для
користувачів та допомагає їм знайти необхідну інформацію та товари швидко та
ефективно.
Важливо зазначити, що правильно спроєктована архітектура дозволяє
ефективно використовувати ресурси сервера, забезпечуючи швидкий відгук та роботу
сайту без затримок для користувачів. Також, вірно налаштована система керування
контентом та БД дозволяють зручно керувати вмістом та зберігати важливі дані про
товари та замовлення.
3.3 Огляд сторінок та інструкції користувача
Інтернет-магазин «Вільна енергія» пропонує широкий вибір енергонезалежних
пристроїв від провідних виробників. Зусилля спрямовані на забезпечення зручності
та надійності під час покупок. Кожна сторінка сайту ретельно розроблена з
урахуванням потреб користувачів.
1. Сторінка «Головна»
Початкова сторінка сайту (рис. 3.1) привітно вітає з відгуками задоволених
клієнтів, коротким описом магазину та спеціальними акційними пропозиціями. Для
зручності навігації по сайту, розміщено верхнє меню, що містить всі основні категорії
товарів та сервісів. Завдяки цьому, можна легко знайти потрібну інформацію та
перейти до відповідних розділів сайту.
46
Рисунок 3.1 – Сторінка «Головна»
2. Сторінка «Каталог»
В каталозі (рис. 3.2) представлені усі доступні товари з можливістю фільтрації
за категоріями, цінами та іншими параметрами для зручного пошуку необхідних
позицій. Тут користувач може одразу додати товар, який йому сподобався, до кошика,
або перейти на сторінку товару для отримання додаткової інформації. З
використанням фільтрів користувач можете швидко знаходити товари, що
відповідають його потребам та побажанням.
Рисунок 3.2 – Сторінка «Каталог»
3. Сторінка «Про магазин»
47
На сторінці «Про магазин» (рис. 3.3) представлена детальна інформація про
команду, історію розвитку та основні цінності, що втілюються в роботі з клієнтами.
Знайти важливі дані про склад команди, історичні кроки у розвитку магазину та
основні принципи співпраці з покупцями можна саме тут.
Рисунок 3.3 – Сторінка «Про магазин»
4. Сторінка «Контакти»
На сторінці «Контакти» (рис. 3.4) доступна контактна інформація та форма для
зв'язку з менеджерами для консультацій чи вирішення питань.
Рисунок 3.4 – Сторінка «Контакти»
5. Сторінка «Особистий кабінет»
48
У своєму особистому кабінеті (рис. 3.5) клієнти можуть не лише переглядати
історію своїх замовлень, але і відстежувати їхній статус та дати доставки. Крім того,
вони можуть зручно редагувати свої особисті дані, такі як адреса доставки, контактні
номери телефонів і адреса електронної пошти. На цій сторінці також доступні інші
корисні функції, такі як додавання улюблених товарів до списку бажань, підписка на
новини та отримання персоналізованих рекомендацій щодо покупок.
Рисунок 3.5 – Сторінка «Особистий кабінет»
6. Сторінки «Кошик» та «Оформлення замовлення»
На сторінці «Кошик» (рис. 3.6) клієнти можуть переглядати і змінювати
кількість, видаляти товари та переглядати загальну вартість замовлення перед
оформленням.
Сторінка «Оформлення замовлення» (рис. 3.7) дозволяє вибрати зручний спосіб
доставки та оплати, заповнити необхідні контактні дані і завершити процес покупки
з підтвердженням замовлення.
49
Рисунок 3.6 – Сторінка «Кошик»
Рисунок 3.7 – Сторінка «Оформлення замовлення»
На веб-сайті також доступні додаткові сторінки з угодою користувача,
процедурою повернення товару, а також інформацією про оплату та доставку.
Користувачі можуть легко знайти відповіді на свої питання, переходячи на ці
сторінки через посилання внизу кожної сторінки.
У нижній частині кожної сторінки (рис. 3.8) розміщені посилання на всі
доступні категорії товарів, що дозволяє швидко переходити до необхідних розділів
50
сайту. Крім того, користувач також знайде посилання на офіційні сторінки в
соціальних мережах, де регулярно публікується цікава інформація та акції для
клієнтів.
Рисунок 3.8 – Футер сайту
3.4 Особливості тестування веб-сайту
Тестування веб-сайту є важливим етапом розробки, який дозволяє перевірити
функціональність, продуктивність та коректність відображення на різних пристроях
та браузерах.
Веб-сайт «Вільна енергія» піддається інтенсивному тестуванню з метою
виявлення та усунення будь-яких недоліків і помилок, що можуть вплинути на
коректну роботу та зручність використання сайту. Процес тестування включає в себе
ряд методів та процедур, які дозволяють гарантувати оптимальну функціональність
та продуктивність.
Методи тестування:
1. Функціональне тестування: оцінка відповідності функціональних вимог до
реальної роботи сайту, включаючи перевірку основних функцій, процесу
оформлення замовлення, роботи особистого кабінету користувача та інші
аспекти.
2. Інтерфейсне тестування: перевірка коректності відображення та взаємодії
елементів інтерфейсу, зокрема перевірка адаптивності для різних пристроїв та
браузерів.
51
3. Продуктивність тестування: оцінка швидкодії та продуктивності сайту,
включаючи аналіз часу завантаження сторінок, реакції сервера та інші
параметри продуктивності.
4. Сумісність тестування: перевірка коректності відображення та роботи сайту на
різних пристроях і браузерах, щоб забезпечити коректну роботу на різних
платформах.
Процедури тестування:
1. Підготовка тестових сценаріїв: розробка та виконання тестових сценаріїв для
оцінки різних аспектів роботи сайту.
2. Виконання тестів на реальних умовах: тестування в реальних умовах
використання сайту, залучення реальних користувачів для оцінки
функціональності та зручності використання.
3. Аналіз результатів тестування: оцінка отриманих результатів тестування,
ідентифікація помилок та недоліків, розробка плану вдосконалення та
оптимізації роботи сайту.
Тестування важливе для забезпечення якості та надійності роботи веб-сайту
«Вільна енергія» і допомагає виявляти та виправляти можливі проблеми з
функціональністю та взаємодією з користувачами. Під час тестування веб-сайту
використовуються різні методи, такі як модульне тестування, інтеграційне
тестування, системне тестування та випробування користувачами.
Модульне тестування дозволяє перевірити окремі компоненти сайту, такі як
функції, модулі та інші елементи, щоб переконатися у їхній правильній роботі.
Інтеграційне тестування оцінює взаємодію між цими компонентами та впевненість у
їхній взаємодії на рівні системи. Системне тестування перевіряє весь веб-сайт як
єдину систему, переконуючись у його коректній роботі та відповідності вимогам.
Випробування користувачами, або тестування UX/UI, відтворює реальні умови
використання сайту користувачами для оцінки його зручності, ефективності та
задоволеності користувачів. Ці методи тестування в комбінації допомагають
забезпечити високу якість та надійність веб-сайту «Вільна енергія» перед його
випуском в продуктивне середовище.
52
3.5 Аналіз отриманих результатів
Оцінка продуктивності та швидкодії сайту є важливим етапом аналізу
результатів його функціонування, оскільки вона надає об'єктивні дані про роботу веб-
сайту. Для цього використовуються різні інструменти та метрики, які дозволяють
отримати повну картину ефективності ресурсів та загальну продуктивність. Цей
аналіз допомагає виявити можливі проблеми з продуктивністю та швидкодією, які
можуть вплинути на користувацький досвід, забезпечуючи таким чином підґрунтя
для подальших покращень та оптимізації сайту.
Однією з ключових метрик був час завантаження сторінок сайту. Ця метрика
вимірюється у секундах і є важливою для користувачів, оскільки швидке
завантаження сторінок забезпечує комфортне користування і зменшує ймовірність
відхилень. Оптимальний час завантаження сторінок сприяє задоволеності
користувачів і позитивному враженню від взаємодії з веб-сайтом. Швидкий час
завантаження є критичним для забезпечення ефективної взаємодії з сайтом, особливо
в умовах зростаючої конкуренції та вимог користувачів до якості веб-сервісів. Такий
підхід допомагає підтримувати високу продуктивність та забезпечувати позитивне
враження від відвідування сайту, що сприяє залученню і утриманню аудиторії.
Додатково, проводилися тести на різних пристроях і браузерах для перевірки
сумісності та правильності відображення контенту. Це дозволяє забезпечити
коректну роботу сайту на різних платформах і зменшити кількість можливих проблем
з відображенням. Відповідність сайту різним пристроям розширює його аудиторію і
забезпечує консистентне відтворення контенту для всіх користувачів.
Також важливим аспектом було визначення продуктивності бази даних,
особливо при збільшенні обсягу інформації та завантаженості сервера. Для цього
використовувалися інструменти моніторингу та аналізу роботи бази даних.
Оптимізація роботи бази даних сприяє ефективному використанню ресурсів сервера
та підвищує швидкодію веб-сайту.
Оцінка продуктивності сайту в Lighthouse (рис. 3.9–3.10) показала покращення
рейтингу продуктивності з 72 до 81 після проведених оптимізаційних заходів. Це
53
свідчить про успішність впроваджених змін та позитивний вплив на продуктивність
веб-сайту.
Рисунок 3.9 – Оцінка продуктивності сайту в Lighthouse до оптимізації
Рисунок 3.10 – Оцінка продуктивності сайту в Lighthouse після оптимізації
Під час аналізу продуктивності та швидкодії веб-сайту «Вільна енергія» було
54
враховано кілька ключових аспектів:
1. Час завантаження сторінок: оптимізація часу завантаження сторінок позитивно
впливає на користувацький досвід і зменшує ймовірність відхилень.
2. Сумісність з різними пристроями: перевірка коректності відображення та
роботи сайту на різних пристроях забезпечує його оптимальну
функціональність для всіх користувачів.
3. Продуктивність бази даних: ефективне використання бази даних допомагає
забезпечити швидкодію та стабільність роботи сайту під великими
навантаженнями.
4. Аналіз рейтингу продуктивності: використання інструментів, таких як
Lighthouse, дозволяє отримати об'єктивну оцінку продуктивності і виявити
можливості для покращення.
В результаті проведення цих оцінок та аналізу отриманих результатів було
виявлено певні аспекти, які потребують удосконалення та оптимізації. Наприклад,
виявлено, що певні запити до бази даних можуть працювати менш ефективно при
великому обсязі даних, що може впливати на загальну продуктивність сайту.
Загалом, аналіз продуктивності та швидкодії сайту дозволяє виявити слабкі
місця та приймати заходи для їх вдосконалення, що сприяє покращенню
користувацького досвіду та ефективності роботи веб-сайту.
Висновки до розділу 3
У третьому розділі кваліфікаційної роботи було детально розглянуто програмну
реалізацію інтернет-магазину енергонезалежних пристроїв «Вільна енергія». У цьому
розділі були розглянуті основні аспекти розробки сайту, включаючи опис реалізації
завдання, опис архітектури програмного забезпечення, опис особливостей тестування
веб-сайту та аналіз отриманих результатів.
Під час реалізації проєкту було використано сучасні технології та методи, що
дозволило створити функціональний та продуктивний інтернет-магазин. Проведене
тестування підтвердило коректну роботу сайту на різних пристроях та браузерах, його
високу продуктивність та зручність використання для користувачів.
55
Аналіз отриманих результатів дозволив виявити можливості для подальшого
вдосконалення та оптимізації роботи веб-сайту, зокрема, в області швидкодії
завантаження сторінок та реакції сервера, адаптивності для різних пристроїв, а також
управління базою даних для ефективного використання ресурсів сервера.
Усі проведені дослідження та аналізи свідчать про високий рівень реалізації та
розробки інтернет-магазину енергонезалежних пристроїв «Вільна енергія», що
відповідає сучасним вимогам та стандартам якості веб-ресурсів. Під час аналізу
продуктивності та швидкодії сайту було враховано кілька ключових аспектів, таких
як час завантаження сторінок, сумісність з різними пристроями, продуктивність бази
даних, аналіз рейтингу продуктивності в Lighthouse. Такий комплексний підхід
дозволяє забезпечити надійну та ефективну роботу веб-сайту для користувачів з
різних пристроїв та платформ.
56
ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра досягнута. В ході її виконання був
проведений детальний аналіз та реалізація інтернет-магазину «Вільна енергія» для
енергонезалежних пристроїв. Були сформульовані та чітко визначені завдання
проєкту, включаючи розробку інтерфейсу, оптимізацію процесів та забезпечення
безпеки даних.
Результатом цієї роботи є розроблений інтернет-магазин з широким
асортиментом енергонезалежних пристроїв, таких як генератори, сонячні панелі,
вітрогенератори та інші товари. Тестування різних аспектів магазину дозволило
підвищити його ефективність та надійність, що є важливим кроком у забезпеченні
зручного та надійного середовища для покупців.
Розроблений інтернет-магазин може стати важливим інструментом у
забезпеченні доступу до енергонезалежних пристроїв для користувачів, що
сприятиме розвитку зеленого енергетичного сектору та підвищенню екологічної
свідомості.
Є можливості для подальшого вдосконалення функціональності магазину,
розширення асортименту пропонованих товарів та покращення його інтерфейсу.
Результати цієї роботи можуть бути корисними для подальшого дослідження у сфері
енергонезалежних технологій та розвитку подібних інтернет-магазинів.
У цілому, реалізація інтернет-магазину «Вільна енергія» є важливим кроком у
напрямку розвитку сталого енергетичного сектору та сприяє зменшенню впливу на
довкілля.
57
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Інтернет-магазин «ЕСКО». URL: https://www.esco.ua/uk/ (дата звернення:
11.03.2024).
2. Інтернет-магазин «Епіцентр».URL: https://epicentrk.ua/ (дата звернення:
11.03.2024).
3. Інтернет-магазин «Альцест». URL: https://e-altsest.com/ua/ (дата звернення:
11.03.2024).
4. Інтернет-магазин «Енерджі Юа». URL: https://energyua.com.ua/ (дата звернення:
11.03.2024).
5. Інтернет-магазин «Energo Sklad». URL: https://energosklad.com.ua/ua/ (дата
звернення: 11.03.2024).
6. Васильєв О.С., Васильєва І.В. Дизайн інтернет-магазину: вагома складова його
успішності. // Інноватика: збірник наукових праць. - 2020. - № 4. - С. 467-472.
URL: https://journals.sagepub.com/doi/abs/10.1177/10538259221098549 (дата
звернення: 20.03.2024).
7. Стаття: Тренди в Створенні Сайтів. URL: https://www.plerdy.com/
ua/blog/trends-2020-ecommerce-website-creation/ (дата звернення: 21.03.2024).
8. Інтернет-магазин «Розетка». URL: https://rozetka.com.ua/ (дата
звернення: 28.03.2024).
9. Система керування вмістом WordPress. URL: https://uk.wordpress.org/ (дата
звернення: 15.03.2024).
10. Набір програмного забезпечення для створення локального веб-сервера
MAMP. URL: https://www.mamp.info/en/mamp/windows/ (дата звернення:
15.03.2024).
11. Стаття: 15+ визначних прикладів інтернет-магазинів. Як відкрити інтернет-
магазин: https://impulse-design.com.ua/ua/15-vydayushchikhsya-primerov-
internet-magazinov.html (дата звернення: 21.03.2024).
12. Стаття: Як відкрити інтернет-магазин. URL:
https://fondy.ua/uk/knowledge/online-store-creation/ (дата звернення: 21.03.2024).
58
13. Стаття: СТВОРЕННЯ ІНТЕРНЕТ-МАГАЗИНУ. URL:
https://koloro.ua/ua/sozdanie-internet-magazina.html (дата звернення: 22.03.2024).
14. Стаття: Як вивести правильну структуру сайту. URL: https://elit-
web.ua/ua/blog/kak-vyvesti-tekuschuju-strukturu-sajta (дата звернення:
23.03.2024).
15. Стаття: Як відкрити свій інтернет-магазин. URL: https://appointer.ua/blog/yak-
vidkrity-sviy-internet-magazin-ukraini-v%E2%80%93ukraine-z-nulya-pokrokoviy-
putivnik/ (дата звернення: 25.03.2024).
59
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2024 р.
САЙТ ІНТЕРНЕТ-МАГАЗИНУ ЕНЕРГОНЕЗАЛЕЖНИХ ПРИСТРОЇВ
Специфікація
482.ЧДТУ. 42220-01
Листів 2
Розробник ____________________ Кузьменко В.Ю.
Керівник ____________________ Андрієнко В.О.
Черкаси – 2024
60
482.ЧДТУ. 42220-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 42220-01 12 01 Текст програми
482.ЧДТУ. 42220-01 34 01 Інструкція користувача
61
ДОДАТОК Б
«Затверджую»
Завідувач кафедри КНСА
__________ проф. Юрій ТРИУС
«____»______________2024 р.
САЙТ ІНТЕРНЕТ-МАГАЗИНУ ЕНЕРГОНЕЗАЛЕЖНИХ ПРИСТРОЇВ
Текст програми
482.ЧДТУ. 42220-01 12 01
Листів 6
Розробник _____________ Кузьменко В.Ю.
Черкаси – 2024
62
Фрагмент коду для входу, реєстрації та скидання пароля на веб-сторінці:
<div class="xoo-el-form-container xoo-el-form-inline" data-active="login">
<div class="xoo-el-header">
<ul class="xoo-el-tabs">
<li data-tab="login" class="xoo-el-login-tgr xoo-el-active">Увійти</li>
<li data-tab="register" class="xoo-el-reg-tgr">Зареєструватися</li>
</ul>
</div>
<div data-section="login" class="xoo-el-section xoo-el-active">
<div class="xoo-el-fields">
<div class="xoo-el-notice" style="display: none;"></div>
<form class="xoo-el-action-form xoo-el-form-login">
<div class="xoo-aff-group xoo-aff-cont-text one xoo-aff-cont-required xoo-el-username_cont">
<div class="xoo-aff-input-group">
<span class="xoo-aff-input-icon fas fa-user-plus"></span>
<input type="text" class="xoo-aff-required xoo-aff-text" name="xoo-el-username" placeholder="Ім'я
користувача/E-mail" value="" required="">
</div>
</div>
<div class="xoo-aff-group xoo-aff-cont-password one xoo-aff-cont-required xoo-el-password_cont">
<div class="xoo-aff-input-group">
<span class="xoo-aff-input-icon fas fa-key"></span>
<input type="password" class="xoo-aff-required xoo-aff-password" name="xoo-el-password"
placeholder="Пароль" value="" autocomplete="new-password" required="">
<div class="xoo-aff-pw-toggle">
<span class="xoo-aff-pwtog-show"><i class="far fa-eye"></i></span>
<span class="xoo-aff-pwtog-hide"><i class="far fa-eye-slash"></i></span>
</div>
</div>
</div>
<div class="xoo-aff-group xoo-el-login-btm-fields">
<label class="xoo-el-form-label">
<input type="checkbox" name="xoo-el-rememberme" value="forever">
<span>Запам'ятати мене</span>
</label>
63
<a class="xoo-el-lostpw-tgr" rel="nofollow" href="#">Забули пароль?</a>
</div>
<input type="hidden" name="_xoo_el_form" value="login">
<button type="submit" class="button btn xoo-el-action-btn xoo-el-login-btn">Sign in</button>
<input type="hidden" name="xoo_el_redirect" value="/my-account/">
</form>
</div>
</div>
<div data-section="register" class="xoo-el-section">
<div class="xoo-el-fields">
<div class="xoo-el-notice"></div>
<form class="xoo-el-action-form xoo-el-form-register">
<div class="xoo-aff-group xoo-aff-cont-text one xoo-aff-cont-required xoo_el_reg_username_cont">
<div class="xoo-aff-input-group">
<span class="xoo-aff-input-icon fas fa-user-plus"></span>
<input type="text" class="xoo-aff-required xoo-aff-text" name="xoo_el_reg_username" placeholder="Ім'я
користувача" value="" maxlength="20" minlength="3" required="">
</div>
</div>
<div class="xoo-aff-group xoo-aff-cont-email one xoo-aff-cont-required xoo_el_reg_email_cont">
<div class="xoo-aff-input-group">
<span class="xoo-aff-input-icon fas fa-at"></span>
<input type="email" class="xoo-aff-required xoo-aff-email" name="xoo_el_reg_email" placeholder="E-
mail" value="" autocomplete="email" required="">
</div>
</div>
<div class="xoo-aff-group xoo-aff-cont-password one xoo-aff-cont-required xoo_el_reg_pass_cont">
<div class="xoo-aff-input-group">
<span class="xoo-aff-input-icon fas fa-key"></span>
<input type="password" class="xoo-aff-required xoo-aff-password" name="xoo_el_reg_pass"
placeholder="Пароль" value="" maxlength="20" minlength="6" autocomplete="new-password"
required="">
<div class="xoo-aff-pw-toggle">
<span class="xoo-aff-pwtog-show"><i class="far fa-eye"></i></span>
<span class="xoo-aff-pwtog-hide"><i class="far fa-eye-slash"></i></span>
64
</div>
</div>
</div>
<div class="xoo-aff-group xoo-aff-cont-password one xoo-aff-cont-required
xoo_el_reg_pass_again_cont">
<div class="xoo-aff-input-group">
<span class="xoo-aff-input-icon fas fa-key"></span>
<input type="password" class="xoo-aff-required xoo-aff-password" name="xoo_el_reg_pass_again"
placeholder="Підтвердьте пароль" value="" autocomplete="new-password" required="">
<div class="xoo-aff-pw-toggle">
<span class="xoo-aff-pwtog-show"><i class="far fa-eye"></i></span>
<span class="xoo-aff-pwtog-hide"><i class="far fa-eye-slash"></i></span>
</div>
</div>
</div>
<div class="xoo-aff-group xoo-aff-cont-checkbox_single one xoo-aff-cont-required
xoo_el_reg_terms_cont">
<div class="xoo-aff-required xoo-aff-checkbox_single">
<label>
<input type="checkbox" name="xoo_el_reg_terms" class="xoo-aff-required xoo-aff-checkbox_single"
value="yes">Я приймаю <a href="http://localhost/%d1%83%d0%b3%d0%be%d0%b4%d0%b0-
%d0%ba%d0%be%d1%80%d0%b8%d1%81%d1%82%d1%83%d0%b2%d0%b0%d1%87%d0%b0/"
target="_blank"> умови користувальницької угоди </a>
</label>
</div>
</div>
<input type="hidden" name="_xoo_el_form" value="register">
<button type="submit" class="button btn xoo-el-action-btn xoo-el-register-
btn">Зареєструватися</button>
<input type="hidden" name="xoo_el_redirect" value="/my-account/">
</form>
</div>
</div>
<div data-section="lostpw" class="xoo-el-section">
<div class="xoo-el-fields">
65
<div class="xoo-el-notice"></div>
<form class="xoo-el-action-form xoo-el-form-lostpw">
<span class="xoo-el-form-txt">Забули пароль? Будь ласка, введіть ваш логін або адресу електронної
пошти. Ви отримаєте електронною поштою посилання для створення нового паролю.</span>
<div class="xoo-aff-group xoo-aff-cont-text one xoo-aff-cont-required user_login_cont">
<div class="xoo-aff-input-group">
<span class="xoo-aff-input-icon fas fa-user-plus"></span>
<input type="text" class="xoo-aff-required xoo-aff-text" name="user_login" placeholder="Ім'я
користувача/Email" value="" required="">
</div>
</div>
<input type="hidden" name="_xoo_el_form" value="lostPassword">
<input type="hidden" name="_wp_http_referer" value="/my-account/">
<button type="submit" class="button btn xoo-el-action-btn xoo-el-lostpw-btn">Посилання для скидання
ел. пошти</button>
</form>
</div>
</div>
</div>
Додатковий код CSS:
.woocommerce ul.products li.product a img {
width: auto;
height: 200px;
display: block;
margin: auto;
box-shadow: none;
}
.woocommerce div.product div.images img {
display: block;
height: 500px;
width: auto;
box-shadow: none;
margin: auto;
}
66
a.woocommerce-LoopProduct-link-title.woocommerce-loop-product__title_ink {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
height: 40px;
}
.woocommerce-MyAccount-navigation {
display:none;
}
.woocommerce-account .woocommerce-MyAccount-content {
width: 100%;
}
67
ДОДАТОК В
САЙТ ІНТЕРНЕТ-МАГАЗИНУ ЕНЕРГОНЕЗАЛЕЖНИХ ПРИСТРОЇВ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482.ЧДТУ. 42220-01 34 01
Листів 4
Розробник _____________ Кузьменко В.Ю.
Черкаси – 2024
68
Додаток було створено з таким підходом, що містить дві головні ролі
користувача:
Покупець.
Адміністратор.
Покупець – користувач, що використовує додаток для покупок товарів або
послуг.
Адміністратор – користувач з повним доступом, який управляє та контролює
роботу додатку.
Основні функції магазину:
1. Реєстрація та вхід на сайт.
Користувач може зареєструватися та увійти на сайт для перегляду історії
покупок та їхній стан (рис. В.1).
Рисунок В.1 – вигляд сторінки «Особистий кабінет»
2. Пошук та перегляд товарів
Користувач може скористатися функцією пошуку для знаходження товарів за
категоріями або ключовими словами та фільтрувати результати за ціною та іншими
параметрами. Після цього користувач може переглянути сторінку товару та
ознайомитися з детальною інформацією (рис. В.2).
69
Рисунок В.2 – результат фільтрації товарів
3. Додавання товарів до кошика
Користувач може вибрати товар та додати його до кошика для подальшого
перегляду та визначення кількості (рис. В.3).
Рисунок В.3 – вигляд сторінки товару
4. Оформлення замовлення
Користувач може обрати метод доставки та спосіб оплати, ввести необхідні дані
для оформлення замовлення та отримати підтвердження на електронну пошту (рис.
В.4).
70
Рисунок В.4 – вигляд сторінки «Оформлення замовлення»
5. Зв'язок з підтримкою
Користувач може звернутися до служби підтримки, через контактні форми на
сайті, або за вказаними телефонами та електронною поштою (рис. В.5).
Рисунок В.5 – вигляд контактної форми