Інтернет-магазин з адаптацією під мобільні пристрої

Андрієнко, Святослав Віталійович

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

Title:	Інтернет-магазин з адаптацією під мобільні пристрої
Authors:	Андрієнко, Володимир Олександрович Андрієнко, Святослав Віталійович
Keywords:	ІНТЕРНЕТ-МАГАЗИН;МОБІЛЬНІ ПРИСТРОЇ;АДАПТИВНІСТЬ;ДИЗАЙН;АНАЛІЗ;HTML;FIREBASE;JAVASCRIPT.
Issue Date:	15-Jun-2023
Abstract:	У сучасному світі у сфері електронної комерції конкуренція дуже велика, інтернет-магазини займають значну частку ринку, і підприємства повинні постійно вдосконалювати свої інтернет-магазини, щоб залучати та утримувати клієнтів. Адаптація під мобільні пристрої стала одним із стратегічних факторів успіху для електронних магазинів. Зміна способу шопінгу спричинює потребу у високоякісних та зручних мобільних додатках для покупців. Мобільні пристрої, такі як смартфони та планшети, стали необхідними компаньйонами для багатьох людей. Зростаюча кількість покупців використовує мобільні пристрої для здійснення покупок, отже, необхідно мати добре адаптований інтернет-магазин, щоб задовольнити потреби користувачів. Метою роботи є розробка такого інтернет-магазину з використанням сучасних технологій та методів. Головною метою роботи є створення зручного та ефективного інструменту для онлайн-торгівлі, який наддасть користувачам можливість здійснювати покупки через мобільні пристрої з максимальним комфортом. Об’єкт дослідження: Інтернет-магазин з адаптацією під мобільні пристрої. Предмет дослідження: Адаптація інтернет-магазину під мобільні пристрої. Методи дослідження: вивчення актуальних джерел, наукових статей, книг, журналів та інших матеріалів, що стосуються розробки інтернет-магазинів, адаптації для мобільних пристроїв, дизайну та користувацького досвіду; аналіз функціональності, дизайну та адаптації інших інтернет-магазинів під мобільні пристрої для ідентифікації кращих практик та особливостей.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/6207
Appears in Collections:	122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування)

Files in This Item:

File	Description	Size	Format
Пояснювальна записка_Андрієнко Святослав_КНС-2101_2022-2023 .pdf Restricted Access		4.6 MB	Adobe PDF	View/Open Request a copy

Show full item record

Extracted text

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

Факультет інформаційних технологій і систем

Кафедра комп’ютерних наук та системного аналізу

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

на тему: «Інтернет-магазин з адаптацією під мобільні пристрої»

Виконав: студент 4 курсу, групи КНС-2101

спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)

Освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування»

Андрієнко Святослав Віталійович

Керівник Андрієнко В.О.
(прізвище та ініціали)

Рецензент Антонюк В.С.
(прізвище та ініціали)

Черкаси 2023 року

Бланк завдання на кваліфікаційну роботу бакалавра студенту

Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування

ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2023 р.

ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Андрієнко Святослав Віталійович
(прізвище, ім‘я, по батькові)
1. Тема роботи Інтернет-магазин з адаптацією під мобільні пристрої

Керівник роботи Андрієнко Володимир Олександрович к. т. н., доцент
(прізвище, ім‘я, по батькові, наукова ступінь, вчене звання)
затверджені наказом університету від «24» лютого 2023 р. №43/04.

2. Строк подання студентом роботи 12 червня 2023 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Аналіз сучасного стану інтернет-магазинів та мобільних пристроїв
4.2. Проектування та створення інтернет-магазину з адаптацією під мобільні пристрої
4.3. Тестування та дослідження експлуатації
Висновки.
5 . Перелік додатків (з точним зазначенням назв додатків):
5 .1. Додаток А. Специфікація 482.ЧДТУ. 32202-01.
1. Інструкція користувача
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.

6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта

7. Дата видачі завдання 19.12.2022

КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ з/п Назва етапів кваліфікаційної роботи бакалавра Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
19.12.2022 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
до 06.01.2023 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної
до 12.02.2023 Виконано
роботи бакалавра.
4 Написання аналітичного розділу (аналіз об’єкту
до 01.04.2023 Виконано
й предмету дослідження).
5 Написання практичних розділів й висновків по
до 01.05.2023 Виконано
роботі.
6 Передзахист кваліфікаційної роботи бакалавра
25.05.2023 Виконано
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 12.06.2023 Виконано
8 Захист кваліфікаційної роботи бакалавра. 15.06.2023 Виконано

Студент Андрієнко С.В.
(підпис)

Керівник роботи Андрієнко В.О.
(підпис)

РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 93 с., 56 рис., 2 таблиці, 21
використаних джерел, 3 додатків.
Актуальність теми. У сучасному світі у сфері електронної комерції
конкуренція дуже велика, інтернет-магазини займають значну частку ринку, і
підприємства повинні постійно вдосконалювати свої інтернет-магазини, щоб
залучати та утримувати клієнтів. Адаптація під мобільні пристрої стала одним із
стратегічних факторів успіху для електронних магазинів. Зміна способу шопінгу
спричинює потребу у високоякісних та зручних мобільних додатках для покупців.
Мобільні пристрої, такі як смартфони та планшети, стали необхідними компаньйонами
для багатьох людей. Зростаюча кількість покупців використовує мобільні пристрої для
здійснення покупок, отже, необхідно мати добре адаптований інтернет-магазин, щоб
задовольнити потреби користувачів.
Метою роботи є розробка такого інтернет-магазину з використанням сучасних
технологій та методів. Головною метою роботи є створення зручного та ефективного
інструменту для онлайн-торгівлі, який наддасть користувачам можливість
здійснювати покупки через мобільні пристрої з максимальним комфортом.
Завдання кваліфікаційної роботи бакалавра:
 дослідити сучасні тенденції у сфері електронної комерції та інтернет-
магазинів, зокрема звернути увагу на зростаючу популярність мобільних пристроїв
серед користувачів;
 проаналізувати переваги та виклики, пов'язані з розробкою інтернет-
магазину з адаптацією під мобільні пристрої, включаючи плюси і мінуси різних
підходів до мобільної оптимізації;
 розробити концепцію інтернет-магазину з використанням методів адаптації
до різних типів мобільних пристроїв (смартфони, планшети тощо);
 дослідити технологічні аспекти розробки мобільного інтернет-магазину,
включаючи вибір платформи (наприклад, веб-програмування, фреймворки, готові
рішення).

Об’єкт дослідження: Інтернет-магазин з адаптацією під мобільні пристрої.
Предмет дослідження: Адаптація інтернет-магазину під мобільні пристрої.
Методи дослідження: вивчення актуальних джерел, наукових статей, книг,
журналів та інших матеріалів, що стосуються розробки інтернет-магазинів, адаптації для
мобільних пристроїв, дизайну та користувацького досвіду; аналіз функціональності,
дизайну та адаптації інших інтернет-магазинів під мобільні пристрої для ідентифікації
кращих практик та особливостей.
Перелік ключових слів: ІНТЕРНЕТ-МАГАЗИН, МОБІЛЬНІ ПРИСТРОЇ,
АДАПТИВНІСТЬ ПІД МОБІЛЬНІ ПРИСТРОЇ, АДАПТИВНІСТЬ, ДИЗАЙН, АНАЛІЗ,
HTML, CSS, REACT, API, FIREBASE, JAVASCRIPT.
ABSTRACT
The qualification work of bachelor contains: 93 pages, 56 figures, 2 tables, 21
sources used, 3 attachments.
Actuality of theme. In today's e-commerce world, competition is fierce, online stores
have a significant market share, and businesses must constantly improve their online stores
to attract and retain customers. Adaptation to mobile devices has become one of the strategic
success factors for e-commerce stores. The changing way of shopping is driving the need
for high-quality and user-friendly mobile applications for customers. Mobile devices such
as smartphones and tablets have become essential companions for many people. A growing
number of customers are using mobile devices to make purchases, so it is necessary to have
a well-adapted online store to meet the needs of users.
The purpose of the work is development of such an online store using modern
technologies and methods. The main goal of the work is to create a convenient and efficient
tool for online trading that will allow users to make purchases via mobile devices with
maximum comfort.
Objectives of qualifying work:
 to study current trends in e-commerce and online shopping, in particular, to pay
attention to the growing popularity of mobile devices among users;

 analyze the advantages and challenges associated with developing a mobile-friendly
online store, including the pros and cons of different approaches to mobile optimization;
 to develop the concept of an online store using methods of adaptation to different
types of mobile devices (smartphones, tablets, etc.);
 explore the technological aspects of developing a mobile online store, including
the choice of platform (e.g., web programming, frameworks, off-the-shelf solutions).
The object of research: An online store with adaptation for mobile devices.
The subject of research: Adaptation of an online store to mobile devices.
Research methods: studying relevant sources, scientific articles, books, magazines,
and other materials related to e-commerce development, mobile adaptation, design, and user
experience; analyzing the functionality, design, and adaptation of other e-commerce sites to
mobile devices to identify best practices and features.
Keywords: ONLINE STORE, MOBILE DEVICES, MOBILE
RESPONSIVENESS, ADAPTABILITY, DESIGN, ANALYSIS, HTML, CSS, REACT, API,
FIREBASE, JAVASCRIPT

7
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ 9
ВСТУП 10
1 АНАЛІЗ СУЧАСНОГО СТАНУ ІНТЕРНЕТ-МАГАЗИНІВ ТА МОБІЛЬНИХ
ПРИСТРОЇВ 16
1.1 Огляд існуючих інтернет-магазинів 16
1.1.1 Огляд та аналіз інтернет-магазину «Amazon» 17
1.1.2 Огляд та аналіз інтернет-магазину «Rozetka» 20
1.1.3 Огляд та аналіз інтернет-магазину «Prom» 22
1.1.4 Огляд та аналіз інтернет-магазину «OLX» 25
1.1.5 Аналіз переваг та існуючих рішень розглянутих реалізацій 28
1.1.6 Визначення вимог до інтернет магазину з адаптацією під мобільні
пристрої 29
1.2 Тенденції розвитку мобільного електронного бізнесу 30
1.3 Огляд особливостей мобільних пристроїв 31
Висновки до розділу 1 32
2 ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ІНТЕРНЕТ МАГАЗИНУ З
АДАПТАЦІЄЮ ПІД МОБІЛЬНІ ПРИСТРОЇ 33
2.1 Опис функціонального програмного середовища для розробки 33
2.2 Вимоги до інтернет-магазину 34
2.3 Вибір технологій розробки та інструментів для створення
інтернет-магазину 35
2.4 Етапи створення інтернет-магазину 39
2.5 Проектування архітектури інтернет-магазину з адаптацією під
мобільні пристрої 41
2.5.1 Проектування інтерфейсу інтернет магазину 44
2.6 Розробка функціоналу інтернет-магазину для мобільних пристроїв 48
2.6.1 Створення проекту React 49
2.6.2 Розробку структури інтернет-магазину на React 51
8
2.6.3 Адаптація інтернет-магазину під різні розміри мобільних пристроїв 53
2.7 Розгортання інтернет-магазину на хостинг 56
Висновки до розділу 2 62
3 ТЕСТУВАННЯ ТА ДОСЛІДЖЕННЯ ЕКСПУЛАТАЦІЇ 64
3.1 Особливості тестування веб-сайтів 64
3.2 Тестові сценарії перевірки працездатності інтернет-магазину 67
3.3 Тестування веб-сайту інтернет-магазин 68
3.3.1 Тестування адаптивності інтернет-магазину на комп’ютері 69
3.3.2 Тестування адаптивності інтернет-магазину на мобільному пристрої 76
Висновки до розділу 3 81
ВИСНОВКИ 82
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 84
Додаток А Специфікація 482.ЧДТУ. 32202-01 87
Додаток Б Текст програми 89
Додаток В Інструкція користувача 91

9
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
HTML – HyperText Markup Language;
CSS – Cascading Style Sheets;
JS – JavaScript;
PWA – progressive web app;
API – Application Programming Interface;
ПЗ – програмне забезпечення;
БД – база даних;
DOM – Document Object Model;
JSX – JavaScript XML;
URL – Uniform Resource Locator;
SPA – Single Page Applications;
HTTP – Hypertext Transfer Protocol;
RWD – Responsive Web Design;
CLI – Command Line Interface;
NPM – Node Package Manager.
10
ВСТУП
Ця кваліфікаційна робота бакалавра спрямована на розробку інтернет-магазину,
який буде оптимізований для мобільних пристроїв, таких як смартфони та планшети.
Основна мета полягає в створенні зручного та ефективного інтерфейсу, який
дозволить користувачам з легкістю переглядати товари, робити покупки та
здійснювати оплату, використовуючи мобільні пристрої.
Адаптація під мобільні пристрої стала одним із стратегічних факторів успіху
для електронних магазинів. Зміна способу шопінгу спричинює потребу у високоякісних
та зручних мобільних додатках для покупців. Мобільні пристрої, такі як смартфони та
планшети, стали необхідними компаньйонами для багатьох людей.
Актуальність даної теми.
"Розробка інтернет-магазину з адаптацією під мобільні пристрої" полягає в її
значущості та важливості у сучасному електронному бізнесі. Нижче наведено
докладне пояснення актуальності даної теми:
– Зростання використання мобільних пристроїв. За останні роки
спостерігається значний ріст використання мобільних пристроїв, таких як смартфони
та планшети, для доступу до Інтернету та здійснення покупок. Це створює потребу в
розробці інтернет-магазинів, які будуть повністю адаптовані до мобільних пристроїв,
щоб задовольнити зростаючий попит споживачів.
– Зміни у способах покупок. Споживачі все більше віддають перевагу зручності
та доступності онлайн-покупок через мобільні пристрої. Вони шукають можливість
здійснювати покупки будь-де і будь-коли, адаптовані до їхніх особистих потреб та
пристосовані до розміру екрану мобільного пристрою. Розробка інтернет-магазину з
адаптацією під мобільні пристрої дозволяє залучати та зберігати клієнтів,
пропонуючи їм зручний та високоякісний досвід покупок.
– Конкурентний тиск. У сфері електронної комерції конкуренція постійно
зростає. Інтернет-магазини, які не забезпечують адаптацію під мобільні пристрої,
ризикують втратити клієнтів на користь конкурентів, які надають зручні та мобільно-
дружні інтерфейси. Розробка інтернет-магазину з адаптацією під мобільні пристрої
допомагає зберегти конкурентоспроможність та залучити більше клієнтів.
11
– Покращення користувацького досвіду. Мобільні пристрої мають свої
особливості, такі як тактильний екран, прискорений доступ до інтернету тощо.
Адаптація інтернет-магазину до цих особливостей дозволяє створити більш
інтуїтивний та зручний користувацький інтерфейс, полегшуючи процес пошуку та
придбання товарів. Задоволеність користувачів збільшується, що впливає на
лояльність та повторні покупки.
Враховуючи ці фактори, актуальність теми "Розробка інтернет-магазину з
адаптацією під мобільні пристрої" очевидна, оскільки вона відповідає сучасним
вимогам ринку та споживачів, сприяє покращенню конкурентоспроможності та
забезпечує зручний користувацький досвід.
Мета кваліфікаційної роботи бакалавра – розробка інтернет-магазину з
адаптацією під мобільні пристрої з метою поліпшення користувацького досвіду та
забезпечення зручності покупок для клієнтів. Основна увага буде приділена
проектуванню та розробці дизайну мобільної версії сайту, що забезпечує оптимальне
відображення та взаємодію з інтернет-магазином на різних мобільних пристроях.
Завдання дослідження:
1) Аналіз сучасного стану інтернет-магазинів та мобільних пристроїв:
a) огляд існуючих інтернет-магазинів з адаптацією під мобільні пристрої;
b) вивчення тенденцій розвитку мобільного електронного бізнесу;
c) аналіз особливостей мобільних пристроїв та їх впливу на веб-дизайн та
функціонал інтернет-магазину.
2) Проектування та розробка інтернет-магазину з адаптацією під мобільні пристрої:
a) визначення вимог до інтернет-магазину та його функціоналу;
b) вибір оптимальних технологій розробки та інструментів;
c) розробка архітектури інтернет-магазину, враховуючи адаптацію під мобільні
пристрої;
d) розробка та інтеграція функціоналу, що забезпечує зручне взаємодію з
інтернет-магазином на мобільних пристроях.
3) Тестування та перевірка розробленого інтернет-магазину:
a) проведення функціонального та тестування користувацького інтерфейсу для
12
розробленого функціоналу;
b) перевірка відповідності розробленого інтернет-магазину заявленим вимогам;
c) визначення ефективності та користувацької зручності інтернет-магазину на
різних мобільних пристроях.
Метою та завданнями дослідження є розробка інтернет-магазину, що буде
оптимально адаптований до мобільних пристроїв та забезпечуватиме зручність та
задоволення клієнтів під час їхніх онлайн-покупок.
Об’єктом дослідження є інтернет-магазин з адаптацією під мобільні пристрої.
Об'єктом є сама система електронної торгівлі, яка дозволяє клієнтам здійснювати
покупки через інтернет, а також включає в себе інтерфейс, функціонал та зв'язки з
базою даних, необхідні для забезпечення роботи інтернет-магазину.
Предметом дослідження є розробка інтернет-магазину з адаптацією під
мобільні пристрої. Дослідження спрямоване на вивчення та розробку спеціального
функціоналу та інтерфейсу, що дозволять інтернет-магазину оптимально працювати
на різних мобільних пристроях. Предметом дослідження також є аналіз тенденцій у
розвитку мобільного електронного бізнесу та вимог клієнтів, спрямованих на
поліпшення користувацького досвіду та зручності покупок.
У результаті дослідження планується отримати готовий інтернет-магазин, який
буде успішно працювати на мобільних пристроях та задовольняти потреби
користувачів, забезпечуючи їм зручність та ефективність під час покупок онлайн.
Методи дослідження.
Для досягнення поставлених цілей та вирішення завдань дослідження буде
використана наступна методологія:
– Аналіз літературних джерел. Перед початком розробки інтернет-магазину з
адаптацією під мобільні пристрої буде проведений детальний аналіз літературних
джерел, наукових статей та публікацій, що стосуються електронної торгівлі,
мобільних додатків, дизайну інтерфейсів та інших відповідних тем. Це допоможе
отримати необхідні знання та контекст для ефективного розроблення інтернет-
магазину.
– Аналіз сучасних трендів та практик. Вивчення сучасних трендів і практик у
13
галузі мобільної електронної торгівлі та адаптації інтерфейсів до мобільних
пристроїв. Це включає аналіз існуючих успішних інтернет-магазинів, їхніх
функціональних можливостей, дизайну та користувацького досвіду, що дозволить
визначити найкращі практики та стандарти для впровадження в розроблюваний
інтернет-магазин.
– Вибір технологій та інструментів. Враховуючи аналіз літературних джерел
та сучасних трендів, будуть вибрані оптимальні технології та інструменти для
розробки інтернет-магазину з адаптацією під мобільні пристрої. Це можуть бути
фреймворки для веб-розробки, мобільні платформи, інструменти для тестування та
перевірка, бази даних тощо.
– Проектування та розробка. Згідно зі зібраними вимогами та враховуючи
вибрані технології, буде проведено проектування архітектури інтернет-магазину та
розробка його функціоналу. Це включатиме розробку користувацького інтерфейсу,
забезпечення адаптивності та адаптивного дизайну, інтеграцію з платіжними
системами, створення бази даних тощо.
– Тестування та перевірка. Розроблений інтернет-магазин буде підданий
ретельному тестуванню, щоб перевірити його функціональність, сумісність з різними
мобільними пристроями та коректність взаємодії з користувачем. Також будуть
проведені вимірювання продуктивності та завантаження інтернет-магазину, а також
збір даних щодо задоволеності та використання користувачами.
Методологія дослідження буде структурованою, систематичною та науково
обґрунтованою, що дозволить досягти поставлених цілей дослідження та отримати
достовірні результати.
Наукова новизна дослідження полягає в наступному:
– Розробка інтернет-магазину з адаптацією під мобільні пристрої.
дослідження спрямоване на розробку інтернет-магазину, який буде спеціально
адаптований до використання на мобільних пристроях. Це включає оптимізацію
інтерфейсу, дизайну та функціоналу, що забезпечуватимуть зручне та ефективне
користування магазином на різних типах мобільних пристроїв.
– Вивчення сучасних трендів мобільної електронної торгівлі. дослідження
14
включає аналіз сучасних трендів та практик у галузі мобільної електронної торгівлі.
Це дозволить виявити нові інноваційні підходи, технології та стратегії, що можуть
бути використані в розробці інтернет-магазину з адаптацією під мобільні пристрої.
– Пропозиції щодо вдосконалення та розвитку мобільної електронної торгівлі.
дослідження спрямоване на формулювання пропозицій щодо подальшого
вдосконалення та розвитку мобільної електронної торгівлі. Це можуть бути нові
підходи до дизайну інтерфейсу, використання розширених можливостей мобільних
пристроїв або впровадження інтеграції з іншими технологіями.
Результати дослідження вносять важливий внесок у сферу розробки інтернет-
магазинів та мобільної електронної торгівлі. Це дозволить покращити
користувацький досвід під час покупок в мобільних інтернет-магазинах та створити
більш зручні та ефективні рішення для клієнтів.
Практичне значення дослідження "Розробка інтернет-магазину з адаптацією під
мобільні пристрої" включає наступне:
– Покращення користувацького досвіду. Результати дослідження дозволять
розробити інтернет-магазин, який буде оптимально пристосований до використання
на мобільних пристроях. Це покращить користувацький досвід та зручність покупок
для клієнтів, забезпечуючи їм швидкий та зручний доступ до товарів і послуг.
– Збільшення конкурентоспроможності бізнесу. Розроблений інтернет-магазин
з адаптацією під мобільні пристрої допоможе підвищити конкурентоспроможність
бізнесу. З мобільними пристроями стає все більше користувачів, які здійснюють
покупки онлайн. Наявність оптимізованого мобільного інтерфейсу дозволить
залучити більше клієнтів та збільшити обсяги продажів.
– Розширення аудиторії. Забезпечення адаптації інтернет-магазину під
мобільні пристрої дозволить залучити нову аудиторію клієнтів. Мобільні пристрої є
популярними серед різних груп користувачів, включаючи молодь, активних
мобільних користувачів та людей, які шукають зручний спосіб здійснювати покупки.
Це розширить потенційну базу клієнтів і сприятиме росту бізнесу.
– Підвищення ефективності продажів. Адаптація інтернет-магазину під
мобільні пристрої дозволить зробити процес покупки швидшим та зручнішим для
15
клієнтів. Це сприятиме збільшенню конверсії та покращенню показників продажів.
Клієнти зможуть здійснювати покупки з будь-якого місця та в будь-який зручний для
них час, що підвищує ймовірність здійснення покупки.
– Використання сучасних технологій. Розробка інтернет-магазину з адаптацією
під мобільні пристрої включає використання сучасних технологій та підходів у сфері
розробки програмного забезпечення. Це дозволить оновити технологічний стек
бізнесу та забезпечити використання найефективніших рішень для розробки
інтернет-магазину.
Таким чином, дослідження має практичне значення, оскільки впливає на
покращення користувацького досвіду, збільшення конкурентоспроможності бізнесу,
розширення аудиторії та підвищення ефективності продажів. Внесок у наукове
дослідження полягає у внесенні нових знань та рекомендацій у галузь розробки
інтернет-магазинів з адаптацією під мобільні пристрої.
Для створення програмного забезпечення використано новітні технології, а
саме: HTML, CSS, фреймворк React, JS, API, Firebase. Обрані технології
задовольняють всім функціональним і не функціональним вимогам до такого типу
програмного забезпечення (ПЗ).

16
1 АНАЛІЗ СУЧАСНОГО СТАНУ ІНТЕРНЕТ-МАГАЗИНІВ ТА МОБІЛЬНИХ
ПРИСТРОЇВ
1.1 Огляд існуючих інтернет-магазинів
Огляд існуючих інтернет-магазинів є важливою частиною дослідження
"Розробка інтернет-магазину з адаптацією під мобільні пристрої". В рамках цього
огляду проводиться аналіз різних інтернет-магазинів з метою визначення їх
особливостей, тенденцій, сильних та слабких сторін. Детальний огляд існуючих
інтернет-магазинів дозволяє отримати цінні висновки та ідеї для розробки власного
інтернет-магазину з адаптацією під мобільні пристрої.
Огляд існуючих інтернет-магазинів включає такі етапи:
– Вибір представників. Обираються різні інтернет-магазини, які вже мають
успіх або займають провідні позиції в своїй галузі. Вибір може здійснюватися на
основі рейтингів, рекомендацій, популярності та репутації.
– Аналіз дизайну та інтерфейсу. Вивчаються дизайн та інтерфейс інтернет-
магазинів, зокрема їхній зовнішній вигляд, навігація, розміщення елементів,
використання кольорів, шрифтів та графіки. Оцінюється естетика та зручність
використання.
– Аналіз мобільної адаптації. Вивчаються особливості мобільної адаптації
інтернет-магазинів, зокрема їхній адаптивний дизайн, оптимізація для різних типів
мобільних пристроїв, використання мобільних додатків або PWA (прогресивні веб-
додатки). Аналізується якість та ефективність мобільної версії інтернет-магазину.
– Сильні та слабкі сторони. Визначаються сильні та слабкі сторони кожного
інтернет-магазину, зокрема їхні особливості, конкурентні переваги та недоліки. Це
дозволяє зробити порівняльний аналіз та виділити основні аспекти, які слід
враховувати при розробці власного інтернет-магазину.
Огляд існуючих інтернет-магазинів дозволяє отримати важливу інформацію та
ідеї для розробки власного інтернет-магазину з адаптацією під мобільні пристрої. Він
сприяє розумінню тенденцій у сфері електронної торгівлі, виявленню конкурентних
переваг та можливостей для покращення користувацького досвіду. Крім того, огляд
17
існуючих інтернет-магазинів допомагає уникнути повторення помилок та врахувати
найкращі практики при розробці власного проекту.
Для того, щоб визначитися, як саме буде виглядати інтернет-магазину з
адаптацією під мобільні пристрої, необхідно дослідити та проаналізувати існуючі
аналоги. Для аналізу було відібрано чотири популярних інтернет магазинів які мають
адаптацію під мобільні пристрої, детальний аналіз яких представлено далі.
1.1.1 Огляд та аналіз інтернет магазину «Amazon». Першим в роботі виконав
огляд сайт «Amazon», дослідив його дизайн та адаптацію. Сайт «Amazon»
знаходиться за адресую: https://www.amazon.com/.
В роботі проведено аналіз його недоліків та переваг.
Переваги:
− великий вибір товарів;
– зручний процес покупки;
– клієнтська підтримка;
– програма лояльності Prime;
– рецензії та відгуки користувачів.
Недоліки:
– перевантаженість та складність пошукових результатів;
– залежність від доставки;
– застарілий дизайн;
– відсутня Українська локалізація;
– незручний перегляд категорій;
– одна кольорова схема (відсутня можливість змінити колір сайту на
темний).
Основним акцентом сайту «Amazon» є широкий вибір товарів та розмаїття
категорій, що доступні для покупців. Amazon визначається як один з найбільших
інтернет-магазинів, де клієнти можуть знайти практично будь-який товар, починаючи
від електроніки та домашнього обладнання до книжок, одягу та продуктів
харчування.
Один з ключових елементів успіху Amazon полягає у його партнерській моделі
18
бізнесу. Крім власного асортименту товарів, Amazon також дозволяє третім сторонам
продавати свої товари через платформу, що розширює вибір і доступність товарів для
покупців. Це робить сайт Amazon місцем, де можна знайти навіть рідкісні або
унікальні товари.
Amazon також відомий своєю системою рекомендацій, що базується на аналізі
покупок та переглядів користувачів. Завдяки цьому, покупці отримують
персоналізовані рекомендації щодо товарів, які можуть їх зацікавити, що полегшує
процес пошуку та вибору товару. Крім того, Amazon зосереджується на забезпеченні
зручного та швидкого процесу покупки. Сайт має інтуїтивно зрозумілий інтерфейс,
просту навігацію та ефективну систему фільтрів, що дозволяє клієнтам швидко
знайти потрібний товар.
Крім того, Amazon пропонує широкі можливості доставки, включаючи швидку
доставку та послугу Prime для передплатників, яка надає додаткові переваги, такі як
безкоштовна доставка та доступ до ексклюзивних акцій.
Для роботи з «Amazon» потрібно обов'язково пройти реєстрацію, після чого
виконати авторизацію.
Сайт Amazon є добре структурованим та привабливим для користувачів.
Основний дизайн сайту використовує білий фон, що створює враження чистоти та
простоти. На головній сторінці зустрічається простий інтерфейс з лаконічним меню
навігації, що дозволяє зорієнтуватися і знайти потрібні категорії товарів.
Незалежно від сторінки, на якій перебуває користувач, сайт Amazon
відрізняється швидкістю завантаження сторінок, що допомагає зберегти час та
забезпечує позитивний досвід користувачів.
Працювати з таким сайтом комфорт, але не вистачає зміни кольорової схеми
сайту. Не дивлячись на певні недоліки сайту, він вважається одним з найкращих
сайтів з продажу.

19
На Рис. 1.1 представлена головна сторінка інтернет-магазину «Amazon».

Рисунок 1.1 – Головна сторінка сайту «Amazon»
На Рис. 1.2 представлено загальний вигляд категорій (каталогу).

Рисунок 1.2 – Загальний вигляд категорій (каталогу)
На Рис. 1.3 представлено загальний вигляд сторінки товару.

Рисунок 1.3 – Загальний вигляд сторінки товару
20
1.1.2 Огляд та аналіз інтернет магазину «Rozetka». Другим в роботі виконав
аналіз сайт «Rozetka», Сайт «Rozetka» знаходиться за адресую: https://rozetka.com.ua/.
В роботі проведено аналіз його недоліків та переваг.
Переваги:
– хороша оптимізація;
– широкий вибір товарів;
– якість та достовірність товарів;
– зручність покупки;
– привабливі акції та знижки;
– швидка та зручна доставка.
Недоліки:
– завантаження сторінок;
– одна кольорова схема (відсутня можливість змінити колір сайту на
темний).
Основний акцент сайту «Rozetka» полягає в наданні широкого вибору товарів
різних категорій і високоякісного обслуговування користувачів. На головній сторінці
сайту зустрічається чіткий та зручний дизайн, який дозволяє легко зорієнтуватися і
знайти потрібну інформацію.
Одним з основних елементів сайту «Rozetka» є пошукова панель, яка дозволяє
швидко знайти конкретний товар за його назвою або категорією. Користувачі також
можуть використовувати фільтри для точного уточнення своїх пошукових запитів.
Сайт «Rozetka» акцентує увагу на детальних описах товарів, технічних
характеристиках, відгуках та рейтингах покупців. Це допомагає користувачам
отримати достовірну інформацію про товари та зробити обґрунтований вибір під час
покупки.
Окрім того, на сайті «Rozetka» присутня розділ "Акції та знижки", де
користувачі можуть знайти спеціальні пропозиції, розпродажі та знижки на популярні
товари. Це дозволяє покупцям отримати вигідні умови при придбанні товарів.
Розетка також надає зручні опції доставки, включаючи кур'єрську доставку,
само вивіз з пунктів видачі та поштову доставку. Користувачі мають можливість
21
обрати найзручніший спосіб отримання свого замовлення.
Основний акцент сайту Rozetka полягає в тому, щоб зробити процес покупки
легким, зручним і задовольняючим для своїх клієнтів. Широкий асортимент товарів,
детальна інформація, акції та вигідні умов.
Працювати з таким сайтом приємно, але не вистачає зміни кольорової схеми
сайту. Не дивлячись на певні недоліки сайту, він вважається одним з найкращих
сайтів з продажу в Україні.
На Рис. 1.4 представлена головна сторінка інтернет-магазину «Rozetka».

Рисунок 1.4 – Головна сторінка сайту «Rozetka»
На рис. 1.5 представлено загальний вигляд категорій (каталогу) сайту
«Rozetka».

Рисунок 1.5 – Загальний вигляд категорій (каталогу)
22
На рис. 1.6 представлено загальний вигляд сторінки товару сайту «Rozetka».

Рисунок 1.6 – Загальний вигляд сторінки товару
1.1.3 Огляд та аналіз інтернет магазину «Prom». Третім в роботі виконав
аналіз сайт «Prom», Сайт «Prom» знаходиться за адресую: https://prom.ua/.
В роботі проведено аналіз його недоліків та переваг.
Переваги:
– хороша оптимізація;
– впорядкованість контенту;
– гарний дизайн;
– доступно декілька кольорових схем.
Недоліки:
– перевантажений каталог.
Основний акцент сайту Prom.ua зроблений на торгівлю товарами для бізнесу і
споживачів. Це великий інтернет-майданчик, де продавці з різних галузей можуть
23
розмістити свої товари і послуги. Сайт спеціалізується на пропозиціях для оптової і
роздрібної торгівлі, будівництва, ресторанного бізнесу, побутових товарів та багатьох
інших сфер.
Prom.ua пропонує широкий асортимент товарів від різноманітних продавців,
включаючи електроніку, одяг, взуття, меблі, спортивні товари, харчові продукти та
багато іншого. Сайт дозволяє зручно шукати і порівнювати товари, користуючись
фільтрами, описами, відгуками покупців та іншими важливими параметрами.
Окрім того, Prom.ua надає можливість бізнесам створювати свої власні
магазини на платформі, що дозволяє їм привертати увагу клієнтів і розширювати свій
бізнес онлайн. Сайт також надає різноманітні послуги, такі як логістика, обробка
платежів та інші, щоб полегшити процес торгівлі для продавців.
Пром.ua відомий своєю широкою мережею партнерів і надійними продавцями,
що гарантує якість і надійність товарів, а також надає підтримку та консультації
клієнтам.
Сайт також пропонує різноманітні способи оплати, включаючи платіжні
системи, кредитні картки та готівку при отриманні товару. Це забезпечує зручність і
гнучкість при здійсненні покупок.
Prom.ua також активно розвивається та впроваджує нові функціональні
можливості для поліпшення користувацького досвіду. Вони постійно оновлюють
свою платформу, додаючи нові функції та інструменти, щоб задовольнити потреби
своїх користувачів.
Загалом, сайт Prom.ua відомий своїм широким вибором товарів, зручним
інтерфейсом, можливістю порівняння цін і доступом до відгуків покупців. Він є
популярним майданчиком для здійснення покупок як для бізнесу, так і для приватних
споживачів.
Працювати з таким сайтом приємно та зручно. Prom вважається одним з
найкращих сайтів з продажу в Україні.

24
На Рис. 1.7 представлена головна сторінка інтернет-магазину «Prom».

Рисунок 1.7 – Головна сторінка сайту «Prom»
На рис. 1.8 представлено загальний вигляд категорій (каталогу) сайту «Prom».

Рисунок 1.8 – Загальний вигляд категорій (каталогу)
25
На рис. 1.9 представлено загальний вигляд сторінки товару сайту «Prom».

Рисунок 1.9 – Загальний вигляд сторінки товару
1.1.4 Огляд та аналіз інтернет магазину «OLX». Останнім в
кваліфікаційні роботі виконав аналіз сайт «OLX», Сайт «OLX» знаходиться за
адресую: https://www.olx.ua/uk/.
В роботі проведено аналіз його недоліків та переваг.
Переваги:
− широкий вибір категорій;
− простий інтерфейс та швидкість розміщення оголошень;
– зручний процес покупки;
Недоліки:
– велика кількість недобросовісних користувачів;
– відсутність контролю якості;
– незручний перегляд категорій;
– конкуренція та перевантаженість;
– обмежена підтримка клієнтів;
26
– одна кольорова схема (відсутня можливість змінити колір сайту на
темний).
Основний акцент сайту OLX зроблений на онлайн-оголошення та торгівлю
різноманітними товарами та послугами. OLX є одним з найбільших і популярних
майданчиків для купівлі та продажу товарів в Україні та інших країнах.
Сайт OLX дозволяє користувачам безкоштовно розміщувати оголошення про
продаж різноманітних товарів, включаючи автомобілі, електроніку, нерухомість,
одяг, меблі, послуги та багато іншого. Користувачі можуть створювати облікові
записи, додавати фотографії та детальні описи своїх товарів, а також встановлювати
ціни та контактну інформацію.
Основна перевага OLX полягає в його простоті та доступності. Сайт має
зручний інтерфейс, що дозволяє швидко розміщувати оголошення та шукати
необхідні товари. Користувачі мають можливість шукати товари за категоріями,
фільтрувати результати за різними параметрами, а також використовувати
пошуковий двигун для більш точного пошуку.
Крім того, OLX дозволяє користувачам взаємодіяти один з одним
безпосередньо, без посередництва сайту. Це означає, що покупець та продавець
можуть узгодити деталі угоди, обговорити умови, встановити зручний спосіб оплати
та доставки.
Однак, варто враховувати деякі недоліки OLX. Заради відкритого характеру
сайту, можуть виникати ситуації, коли користувачам доводиться мати справу з
недобросовісними або шахрайськими продавцями. Тому ретельна перевірка і
дотримання заходів безпеки є важливими.
Також важливо відзначити, що OLX є платформою для приватних продажів, і
не всі бізнеси мають можливість розміщувати оголошення на цьому сайті. Це може
бути обмеженням для покупців, які шукають товари від офіційних дилерів або
великих компаній.
Загалом, сайт OLX пропонує широкі можливості для купівлі та продажу
товарів, але має свої недоліки, такі як ризик шахрайства, конкуренція та відсутність
контролю якості. Все це потребує уважності та обережності з боку користувачів при
27
взаємодії на платформі.
Працювати з таким сайтом комфорт. Не дивлячись на певні недоліки сайту, він
вважається одним з найкращих сайтів з продажу.
Головна сторінка інтернет магазину «OLX» представлена на Рис. 1.10.

Рисунок 1.10 – Головна сторінка сайту «OLX»
На рис. 1.11 представлено загальний вигляд категорій (каталогу) сайту «OLX».

Рисунок 1.11 – Загальний вигляд категорій (каталогу)
28
На рис. 1.12 представлено загальний вигляд сторінки товару сайту «OLX».

Рисунок 1.12 – Загальний вигляд сторінки товару
1.1.5 Аналіз переваг та існуючих рішень розглянутих реалізацій. У таблиці
1.1 відображено порівняльний аналіз розглянутих інтернет магазинів, а саме:
«Amazon», «Rozetka», «Prom», «OLX».
У якості критеріїв для порівняльного аналізу було обрано такі критерії: дизайн,
швидкість завантаження, адаптивність сайту.
У таблиці 1.1 наведені результати порівняльного аналізу інтернет-магазинів
Таблиця 1.1 – Результат порівняльного аналізу інтернет-магазинів
Критерії порівняння інтернет Назва інтернет-магазину
магазинів «Amazon» «Rozetka» «Prom» «OLX»
Дизайн (0-5) 2 3 4 4
Швидкість завантаження (0-5) 5 3 4 4
Адаптивність сайту (0-5) 3 4 5 4
29
Підсумовуючи результати та оцінки приведених вище сайтів, варто зазначити,
що всі вони мають наступні характеристики: це є сайт, який містить в собі стандартні
функції з пошуку та підбору потрібного товару. Кожен користувач має можливість
швидко знайти бажаний товар, який задовольняє його вимоги. Також існує
можливість якісно та кількісно оцінити окремі товари. Варто зауважити, що
інтерфейс деяких з них не завжди є інтуїтивно зрозумілим та доступним новачку,
неукраїномовний, з непривабливою гамою кольорів. Всі приведених інтернет-
магазини мають адаптацію під мобільні пристрої та планшети.
Проаналізувавши існуючі рішення розглянутих реалізацій, в кваліфікаційній
роботі бакалавра при розробці інтернет магазину «ASV Store» пропонується звернути
увагу на такі моменти:
– інтернет-магазин «ASV Store» повинен мати зручний, зрозумілий та
приємний інтерфейс;
– інтернет-магазин «ASV Store» повинен мати швидкість завантаження
серед оцінок (0-5), а саме: 4.
1.1.6 Визначення вимог до інтернет магазину з адаптацією під мобільні
пристрої. Головною метою розробки кваліфікаційної роботи бакалавра є ідея єдності,
щоб вся необхідна для роботи інформацію зберігалося на єдиному веб-сервісі.
Інтернет-магазин з продажу різноманітних товарів має являти собою веб-сайт
«ASV Store» і повинен бути крос-браузерним та не вимогливим до системних
ресурсів. Інтерфейс системи має бути мінімалістичним, сучасним та інтуїтивно
зрозумілим і головне зручним в використані на мобільних пристроях та планшетах.
В таблиці 1.2 представлено перелік мінімальних версій браузерів, які має
підтримувати розроблений сервіс.
Таблиця 1.2 – Перелік мінімальних версій браузерів
Браузери

Chrome Safari Firefox Opera
Мінімальні версії 49+ 9+ 49+ 40+
В інтернет-магазині «ASV Store» потрібно реалізувати наступне:
– можливість реєстрації облікового запису;
30
– можливість входу до облікового запису;
– пошук оголошень за параметрами;
– детальний опис товару та його виробника;
– адаптивність під будь-який розміри екрану.
1.2 Тенденції розвитку мобільного електронного бізнесу
Тенденції розвитку мобільного електронного бізнесу визначають напрямки і
перспективи, в яких ця галузь рухається. Оскільки мобільні пристрої стають все більш
поширеними і потужними, мобільний електронний бізнес знаходиться у стадії
активного зростання та інноваційного розвитку. Деякі з найважливіших тенденцій
розвитку мобільного електронного бізнесу включають:
– Збільшення використання мобільних пристроїв. За останні роки значно зросла
кількість користувачів мобільних пристроїв, таких як смартфони та планшети. Люди
все частіше використовують мобільні пристрої для доступу до Інтернету та
здійснення покупок. Це створює потужну базу користувачів для мобільного
електронного бізнесу.
– Розширення функціональності мобільних додатків. Мобільні додатки
набувають все більшої популярності в електронній торгівлі. Вони надають зручний і
персоналізований доступ до товарів і послуг, дозволяють здійснювати швидкі
покупки, отримувати спеціальні пропозиції та сповіщення. Розширення
функціональності мобільних додатків, таких як додавання голосового керування,
використання штучного інтелекту та аналізу даних, забезпечує ще більш зручний та
ефективний досвід користувачів.
– Зростання мобільного комерцію (m-commerce). Мобільна комерція стає все
більш популярною, оскільки користувачі віддають перевагу здійсненню покупок на
своїх мобільних пристроях. Зручність та доступність мобільного комерцію дозволяє
покупцям здійснювати покупки у будь-який час та з будь-якого місця. Тому компанії
все більше інвестують у розвиток мобільних платформ та оптимізацію сайтів для
мобільних пристроїв.
31
Ці тенденції визначають розвиток мобільного електронного бізнесу і
відкривають нові можливості для покращення користувацького досвіду, збільшення
продажів та розширення бізнесу в цій сфері. Дослідження цих тенденцій дозволяє
розуміти потреби та очікування користувачів, а також адаптувати стратегії розвитку
мобільного електронного бізнесу до сучасного ринку.
1.3 Огляд особливостей мобільних пристроїв
Аналіз особливостей мобільних пристроїв є важливою частиною розробки
інтернет-магазину з адаптацією під мобільні пристрої. Деякі з основних
особливостей, які потрібно враховувати, включають:
– Розмір екрану. Мобільні пристрої мають різні розміри екранів, починаючи від
невеликих смартфонів до великих планшетів. Важливо забезпечити, щоб дизайн
інтернет-магазину був адаптований до різних розмірів екранів, забезпечуючи при
цьому зручну діючий та читабельність контенту.
– Сенсорний інтерфейс. Більшість мобільних пристроїв мають сенсорний
екран, що дозволяє користувачам взаємодіяти з контентом шляхом дотику до екрану
та жестів. Важливо забезпечити інтуїтивно зрозумілий та зручний інтерфейс, який
буде легко використовувати на сенсорних пристроях.
– Переносність. Мобільні пристрої є переносними і використовуються у різних
умовах, включаючи рухливість користувачів. Це означає, що інтернет-магазин
повинен бути готовим до роботи на різних мобільних мережах і забезпечувати
швидку завантаження сторінок.
– Орієнтація екрану. Мобільні пристрої можуть мати портретну або альбомну
орієнтацію екрану. Важливо забезпечити, щоб дизайн інтернет-магазину був гнучким
і працював ефективно в обох режимах.
Аналіз особливостей мобільних пристроїв допомагає врахувати їхні технічні та
функціональні характеристики при розробці інтернет-магазину. Це дозволяє
забезпечити оптимальний досвід користувача та максимальну ефективність роботи на
різних мобільних платформах.
32
Висновки до розділу 1
1. У цьому розділі було проведено порівняльний аналіз інтернет магазинів які
мають мобільну версію сайту а саме: «Amazon», «Rozetka», «Prom», «OLX». В
результаті аналізу отримано важливі висновки та рекомендації щодо розробки
інтернет-магазину з адаптацією під мобільні пристрої. Мобільні пристрої, такі як
смартфони та планшети, стають все більш популярними серед користувачів, і вони
активно використовують їх для виконання різних завдань, включаючи покупки в
інтернет-магазинах. Це свідчить про необхідність розробки інтерфейсів, які будуть
оптимізовані під мобільні пристрої. З огляду на зростання використання мобільних
пристроїв, необхідною умовою успіху для інтернет-магазинів є адаптація їх
інтерфейсу та функціоналу під мобільні платформи. Користувачі вимагають зручного
та ефективного досвіду покупок на своїх мобільних пристроях, і недостатня адаптація
може призвести до втрати потенційних клієнтів.
На підставі цього висновку можна зробити висновок про необхідність розробки
інтернет-магазину з адаптацією під мобільні пристрої. Використання мобільного
дизайну та технологій, а також врахування особливостей мобільних пристроїв,
дозволить створити зручний та привабливий інтерфейс для користувачів, що
сприятиме збільшенню задоволенню клієнтів та підвищенню ефективності магазину.
2. Представлено таблицю порівнянь існуючих інтернет-магазинів та визначено
вимоги щодо інтернет-магазину з адаптацією під мобільні пристрої.

33
2 ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ІНТЕРНЕТ-МАГАЗИНУ З
АДАПТАЦІЄЮ ПІД МОБІЛЬНІ ПРИСТРОЇ
2.1 Опис функціонального програмного середовища для розробки
Visual Studio Code (часто називають VS Code) - це безкоштовний редактор коду,
розроблений компанією Microsoft. Він надає зручне середовище для написання,
редагування та налагодження програмного коду. VS Code підтримує багато мов
програмування, включаючи JavaScript, Python, C++, Java і багато інших.
VS Code має велику кількість розширень, які дозволяють розширити його
функціональність, додати підтримку для конкретної мови програмування,
фреймворку або інструменту. Завдяки розширенням можна налаштувати VS Code під
свої потреби, додати підсвічування синтаксису, автодоповнення, систему контролю
версій та інші корисні функції.
Особливості Visual Studio Code включають інтегровану підтримку збірки та
налагодження, розширену систему керування розширеннями, вбудовану підтримку
Git, можливість розробки на віддалених серверах і багато іншого. Він також має
простий інтерфейс, що полегшує роботу з ним навіть новачкам.
Загалом, Visual Studio Code є популярним вибором серед розробників
програмного забезпечення завдяки своїм можливостям, розширюваності та широкій
спільноті, що підтримує його.
Ключові можливості та плюси VS Code:
− підтримкою багатьох мов програмування;
− розширень;
− підсвічування синтаксису;
− автодоповнення;
− системи контролю версій;
− роботи з віддаленими серверами;
− вбудовані термінали;
– зручний інтерфейс.

34
На рис. 2.1 представлено фрагмент роботи в VS Code.

Рисунок 2.1 – вигляд інтерфейсу VS Code
2.2 Вимоги до інтернет-магазину
Вимоги до інтернет-магазину, розробленого з адаптацією під мобільні пристрої,
мають на меті забезпечити зручну та ефективну взаємодію користувачів з магазином
на різних пристроях. Деякі з основних вимог включають:
– Адаптивний дизайн. Інтернет-магазин повинен мати адаптивний дизайн, який
забезпечує оптимальне відображення та коректне функціонування на різних розмірах
екранів мобільних пристроїв. Це означає, що контент, картинки, кнопки та інші
елементи магазину повинні пристосовуватись до розміру екрану, забезпечуючи
зручну навігацію та читабельність.
– Інтуїтивний інтерфейс. Інтерфейс інтернет-магазину повинен бути легким у
використанні та інтуїтивно зрозумілим для користувачів. Навігація повинна бути
зручною та логічною, дозволяючи легко знаходити товари, деталі продуктів, кошик
покупок та інші необхідні функції.
– Швидка завантаження сторінок. Мобільні користувачі очікують швидкого
35
завантаження сторінок. Інтернет-магазин повинен бути оптимізований для швидкого
завантаження, зменшуючи розмір файлів, використовуючи хешування, стискання
зображень та інші техніки для поліпшення продуктивності.
– Зміна кольорової схеми. В сучасних інтернет-магазинах зазвичай розробляють
дві кольорові схеми: світлі схема (переважає світлі кольори), темна схема
(переважають темні кольори). Зазвичай світлу схему використовують протягом дня
коли світить сильне сонце, а темну схему переважно використовують вечері, або в
ночі.
Враховуючи ці вимоги, розробка інтернет-магазину з адаптацією під мобільні
пристрої допоможе забезпечити зручність та задовольнити досвід користувачів, що
сприятиме підвищенню продажів та розвитку бізнесу.
2.3 Вибір технологій розробки та інструментів для створення інтернет-
магазину
Кожна мова має свої особливості, сфери застосування і вирішує свої задачі. На
рис. 2.2 представлено рейтинг мов написання веб-сайту.

Рисунок 2.1 – рейтинг мов програмування
36
При виборі технологій розробки та інструментів для створення інтернет-
магазину з адаптацією під мобільні пристрої, важливо враховувати такі фактори:
– Веб-розробка. Для розробки веб-версії інтернет-магазину можна
використовувати популярні веб-фреймворки та технології, такі як HTML, CSS,
JavaScript та фреймворки, наприклад, React, Angular або Vue.js. Ці інструменти
дозволяють розробляти адаптивний дизайн, що адаптується до різних розмірів
екранів.
– База даних. Для збереження даних про товари, замовлення, користувачів та
іншої інформації можна використовувати реляційні бази даних, наприклад, MySQL
або PostgreSQL. Також можливі варіанти нереляційних баз даних, таких як MongoDB
або Firebase для збереження даних, або використання API такі як: ML Kit's, Platzi Fake
Store, SendGrid, Amazon Product Advertising і так далі. API дозволяє розробникам
створювати нові програми або розширювати існуючі шляхом використання
функціональності, що надається іншою програмою чи сервісом. Він дозволяє
взаємодіяти з програмними системами, використовуючи стандартні методи звертання
до функцій, обмін даними та виконання запитів. API може бути доступним як веб-
сервіс, бібліотека програмного забезпечення, набір команд, файл конфігурації тощо.
– Хостинг та розгортання. Для розгортання інтернет-магазину можна
використовувати різні хостинг-провайдери та платформи, такі як AWS, Google Cloud,
Azure, Firebase або спеціалізовані платформи для електронної комерції, такі як
Shopify або Magento.
При виборі технологій розробки та інструментів варто враховувати такі
фактори, як вимоги проекту, бюджет, ресурси та вміння команди розробників. Також
корисно провести дослідження, порівняти різні варіанти технологій та
консультуватися з досвідченими фахівцями для прийняття найкращого рішення.
Для створення web-сервісу з продажу різноманітних товарів «ASV Store», в
кваліфікаційній роботі бакалавра використано такі засоби:
− створення веб-дизайну Figma;
− мова розмітки HTML;
− мова каскадних стилів CSS;
37
− мова програмування: JavaScript;
− фреймворк React;
− бібліотека REDUX;
− API;
− хостинг Firebase.
Для створення зовнішнього вигляду сайту, який буде видно кінцевим
користувачам, на сьогоднішній день існують дві базові мови: HTML і СSS.
HTML – це мова розмітки гіпертексту. Вона дозволяє користувачеві створювати
і структурувати розділи, параграфи, заголовки, посилання і блоки для веб-сторінок і
додатків.
HTML-сторінка – це файл, який містить в собі код, створений з використанням
мови HTML.
HTML надає наступні можливості:
 видавати мережеві документи з заголовками, текстом, таблицями, списками,
фотографіями;
 отримувати інформацію з мережі через посилання гіпертексту при натисканні
кнопки;
 створювати форми для посилки запитів на віддалені комп'ютери, щоб
проводити пошук інформації, здійснювати бронювання, замовляти товари і тому
подібне;
 вставляти електронні таблиці, відео, аудіо та інші програмні додатки
безпосередньо в їх документи.
Мова HTML використовується для формування та оформлення сторінок тексту,
які будуть відображатися в інтернеті за допомогою спеціальних програм браузерів.
HTML-теги умовно можна розділити на дві категорії:
 теги, які визначають, як тіло документа буде відображатися веб браузером в
цілому;
 теги, що описують загальні властивості документа, такі як заголовок або автор
документа.
38
СSS – мова каскадних таблиць стилів. Ця мова використовується для опису
зовнішнього вигляду документа, написаного на мові розмітки. СSS використовується
розробниками веб-сторінок для визначення кольорів, шрифтів, розташування
окремих блоків та інших аспектів подання зовнішнього вигляду цих веб-сторінок.
Основна мета розробки СSS полягала в розділенні опису логічної структури веб-
сторінки, тобто виконаної за допомогою HTML або інших мов розмітки, від опису
зовнішнього вигляду цієї веб-сторінки, який тепер проводиться за допомогою
формальної мови СSS. Такий поділ може поліпшити доступність документа,
забезпечити більшу гнучкість і можливість управління, а також зменшити складність
і повторення структурного змісту.
Це одна з базових технологій в сучасному Інтернеті. Практично жоден сайт не
обходиться без СSS, тому HTML і СSS працюють разом.
Коли браузер робить запит на сторінку, то він отримує її вихідний HTML-код в
якості відповіді від сервера, і для початку повинен проаналізувати його. У процесі
аналізу і розбору HTML-коду на його основі браузер створює DОM-дерево.
DОM – це об'єктна модель документа, яку браузер створює в пам'яті комп'ютера
на основі HTML, отриманого з сервера. Простіше кажучи, HTML – це текст сторінки,
а DОM – це серія пов'язаних об'єктів, створених браузером при аналізі тексту. На
рисунку 2.2 зображено схему роботи DОM.

Рисунок 2.2 – Схема роботи DОM

39
2.4 Етапи створення інтернет-магазину
Розробка веб-ресурсів у більшості випадків складається з декількох основних
та другорядних процесів: підготовчий, етап проектування, розробка, тестування,
розміщення (рис. 2.3).

Рисунок 2.3 – Основні етапи створення інтернет-магазину
Перед першим основним етапом розробки інтернет-магазину необхідно пройти
підготовчий етап. На цій стадії проводиться ретельний аналіз сегмента, до якого
належатиме майбутній веб-ресурс, вивчається потенційна цільова аудиторія, її
потреби та вподобання.
На особливу увагу варто звернути при аналізі діяльності конкурентів.
Необхідно виокремити основні переваги, які використовують конкуренти, а також
ретельно проаналізувати їхні недоліки.
40
Крім того, на підготовчому етапі варто визначити головну особливість сайту
(оригінальний дизайн, корисна інформація), кількість товарів, які будуть продаватися
через сайт, а також кількість додаткових сторінок (крім категорій товарів,
виробників).
До наступного етапу відноситься етап проектування інтернет-магазину.
Ключовим пунктом етапу проектування є складання технічного завдання на розробку.
У технічному завданні зазвичай описується цілі і завдання інтернет-магазину,
особливості цільової аудиторії та запропонованих товарів, особливості концепції
інтернет-магазину, вимоги до оформлення та змісту інтернет-магазину, а також
функціональні та технічні вимоги.
Основною метою цього етапу є створення оптимальних варіантів навігації, які
б полегшили користування сайтом для покупців товарів. За результатами придуманої
структури надалі буде створюватися сайт.
Наступним пунктом є створення дизайну сайту. На цьому етапі вже враховують
яким буде сайт: адаптивним, з динамічними кнопками, картинками і іншими
елементами під розмір екрану користувача, або з мобільною версією, коли для
смартфонів і мобільних телефонів розробляють іншу версію.
Важливо, щоб сайт не тільки добре виглядав, але і був на інтуїтивному рівні
зрозумілим користувачеві. Вже з перших секунд повинна бути очевидна тематика
сайту і те, які товари можна знайти на веб-ресурсі.
Розробка дизайну проходить в кілька етапів:
– Вибір колірної гами для оформлення (гармонійне поєднання кольорів і
контрастний відтінок для розставляння акцентів).
– Створення єдиної композиції з усіх елементів, легкої для сприйняття. –
Опрацювання типографій. Вибір шрифтів, стилів, накреслення і т. п.
– Впровадження анімаційних елементів для залучення відвідувача.

41
2.5 Проектування архітектури інтернет-магазину з адаптацією під
мобільні пристрої
Проектування архітектури інтернет-магазину є важливим етапом розробки,
який визначає структуру, компоненти та взаємозв'язки системи. Основні кроки при
проектуванні архітектури інтернет-магазину включають наступне:
– Визначення функціональних та нефункціональних вимог. Спочатку важливо
зрозуміти, які функції повинен виконувати інтернет-магазин (наприклад, перегляд
товарів, розміщення замовлень, оплата, реєстрація користувачів тощо) та встановити
нефункціональні вимоги (наприклад, швидкодія, безпека, масштабованість,
надійність).
– Розбиття на компоненти. Інтернет-магазин можна розглядати як набір
компонентів, що взаємодіють між собою. Спочатку ідентифікуйте основні
функціональні області, такі як frontend (клієнтська частина), backend (серверна
частина), база даних, система платежів, система доставки тощо. Розбиття на
компоненти допоможе покращити модульність та керованість системи.
– Вибір архітектурного підходу. Існує кілька популярних архітектурних
підходів, які можна використовувати для проектування інтернет-магазину.
Наприклад, можна використовувати клієнт-серверну архітектуру, де клієнти (веб-
браузери або мобільні додатки) взаємодіють з сервером, який обробляє запити та
надає відповіді. Інші підходи можуть включати мікро-сервісну архітектуру або
шарову архітектуру.
– Вибір технології. На основі вимог і архітектурного підходу виберіть
технології, які найкраще підходять для реалізації компонентів. Наприклад, для
frontend можна використовувати HTML, CSS та JavaScript. Важливо врахувати
фактори, такі як продуктивність, масштабованість, доступність розробників та
екосистема інструментів.
– Розгортання та масштабування. При проектуванні архітектури врахуйте
можливості розгортання системи та масштабування. Використання хмарних
42
платформ або контейнеризацію для полегшення розгортання та гнучкого
масштабування системи.
Враховуючи ці кроки, проектування архітектури інтернет-магазину допоможе
створити структуровану, масштабовану та надійну систему, яка задовольнятиме
потреби користувачів та бізнесу.
Архітектура інтернет-магазину що розроблявся в роботі, представлена на рис.
2.4.

Рисунок 2.4 – Архітектура інтернет магазину
Роль сховища даних та хостингу виконує сервіс Firebase. Для розробки
інтернет-магазину використовується React.
Firebase - це платформа розробки мобільних та веб-додатків, яку розробляє
компанія Google. Вона надає набір інструментів та сервісів для швидкої розробки та
розгортання додатків з функціональністю, такою як бази даних в реальному часі,
аутентифікація користувачів, зберігання файлів, хостинг веб-сайтів та інші.
Деякі ключові компоненти Firebase включають:
– Firebase Realtime Database. Це реально-часова база даних, яка дозволяє
синхронізувати дані між різними пристроями в реальному часі.
– Firebase Authentication. Цей сервіс надає інструменти для аутентифікації та
авторизації користувачів в додатках шляхом інтеграції з різними методами входу,
такими як електронна пошта, соціальні мережі та інші.
– Firebase Cloud Firestore. Це гнучка документ база даних, яка дозволяє
зберігати та синхронізувати дані між додатками, працюючи в режимі оф-лайн.
43
– Firebase Storage. Цей сервіс надає можливість зберігання та керування
файлами, такими як зображення, відео або аудіо, на хмарних серверах Firebase.
– Firebase Hosting. Це сервіс хостингу веб-сайтів, який дозволяє розгортати
статичні та динамічні веб-сайти з швидким завантаженням і простим керуванням.
– Інші сервіси. Firebase також має інші інструменти, такі як Firebase Cloud
Functions (функції в хмарі), Firebase Performance Monitoring (моніторинг
продуктивності) та Firebase Cloud Messaging (повідомлення в хмарі), які розширюють
функціональність платформи.
Firebase надає простий інтерфейс та добре документовану платформу, що
робить його популярним вибором для швидкої розробки додатків з хмарною
інфраструктурою.
React – це відкрита JavaScript бібліотека для розробки користувацького
інтерфейсу. Вона дозволяє розробникам будувати ефективні та повторно
використовувані компоненти інтерфейсу, які реагують на зміни даних.
Деякі ключові особливості React включають:
– Компонентний підхід. React дозволяє розбити інтерфейс на незалежні
компоненти, які можна повторно використовувати та комбінувати для побудови
складних інтерфейсів. Компоненти розробляються з використанням JSX -розширення
JavaScript, що дозволяє змішувати HTML-подібний синтаксис з JavaScript.
– Віртуальний DOM. React використовує віртуальний DOM для ефективного
оновлення та маніпуляції елементами інтерфейсу. Зміни відбуваються спочатку в
віртуальному DOM, а потім реактивно оновлюються реальний DOM для покращення
продуктивності.
– Одно-сторінкова архітектура. React часто використовується для розробки
одно-сторінкових додатків (Single-Page Applications), де зміна контенту відбувається
без перезавантаження сторінки. Це забезпечує більш плавні та швидкі взаємодії з
додатком.
– Управління станом. React надає підхід для управління станом додатка.
Розробники можуть використовувати власну локальну станову інформацію
компонентів та зв'язувати її зі станом додатка за допомогою зовнішніх бібліотек,
44
таких як Redux або React Context API.
– Реактивність. React дає можливість реагувати на зміни даних та автоматично
оновлювати відповідний інтерфейс. Це дозволяє створювати динамічні компоненти,
які оновлюються під час зміни даних.
React широко використовується у сфері веб-розробки для створення сучасних
та інтерактивних інтерфейсів користувача.
2.5.1 Проектування інтерфейсу інтернет-магазину. В рамках кваліфікаційної
роботи бакалавра появилося завдання розробити макет дизайну для інтернет-
магазину, з метою створення зручного, зрозумілого та легкого середовища для
користувачів. Для досягнення цієї мети було використано веб-сервіс «Figma», який
дозволяє проектувати та розробляти інтерфейси. В результаті було створено дві версії
дизайну - комп'ютерну та мобільну.
У процесі розробки дизайну інтернет-магазину були враховані основні
принципи зручності та ефективності використання. Інтерфейс магазину був
розроблений таким чином, щоб користувачі мали зручний доступ до всіх необхідних
функцій та інформації. Елементи інтерфейсу були розташовані так, щоб було
забезпечено логічну послідовність дій та інтуїтивно зрозуміле навігаційне меню.
Крім того, було приділено особливу увагу адаптивності дизайну. У зв'язку з
ростом використання мобільних пристроїв, важливо було забезпечити, щоб інтернет-
магазин виглядав естетично та функціонував на різних типах пристроїв, включаючи
комп'ютери, смартфони та планшети. Таким чином, була створена окрема версія
дизайну, оптимізована для використання на мобільних пристроях, з урахуванням
обмеженого простору та особливостей сенсорного інтерфейсу.
Загальний результат роботи полягав у створенні привабливого та
функціонального дизайну інтернет-магазину, який забезпечує зручність, зрозумілість
та легкість взаємодії для користувачів, як на комп'ютерах, так і на мобільних
пристроях.

45
На рис. 2.5 показана комп'ютерна версія розробленого дизайну інтернет-
магазину в Figma.

Рисунок 2.5 – Комп'ютерна версія розробленого дизайну
Головний екран відображає привабливий та легкий у використанні інтерфейс.
У верхній частині розташоване навігаційне меню, яке містить основні категорії
товарів та посилання на інші важливі розділи магазину, такі як кошик та обліковий
запис користувача. Пошукове поле відображається в центральній частині екрану,
надаючи можливість здійснювати швидкий пошук потрібних товарів. На головному
екрані також присутні важливі акції, рекомендації та нові надходження товарів.
Дизайн інтернет-магазину включає чітку структуру, привабливі кольорові схеми та
інтуїтивно зрозумілу навігацію, що забезпечує зручну та приємний досвід
користування.
46
На рис. 2.6 показана мобільну версію розробленого дизайну інтернет-магазину
в Figma.

Рисунок 2.6 – Мобільна версія розробленого дизайну
Інтерфейс мобільної версії був оптимізований для ефективного використання
на смартфонах та планшетах. Елементи інтерфейсу розташовані таким чином, щоб
забезпечити зручний доступ до основних функцій та інформації на обмеженому
екрані. Головний екран відображає компактне навігаційне меню, пошукове поле та
важливі промоції або рекомендації. Користувачі можуть швидко переглядати товари,
здійснювати пошук та здійснювати покупки, прокручуючи екран вниз. Мобільна
версія дизайну забезпечує зручну навігацію через натискання, перетягування та
прокручування, забезпечуючи покупцям зручність та задоволення від використання
інтернет-магазину на мобільних пристроях.
Також був розроблений світлий дизайн для інтернет-магазину. У цьому дизайні
використовуються світлі кольори, що створюють відчуття простору, свіжості та
легкості. Основний фон сайту має світлий відтінок, що робить його приємним для
очей та додає візуальної привабливості. Кольорова палітра включає світлі та
нейтральні відтінки, які створюють гармонійний і збалансований вигляд.
Світлий дизайн сайту підкреслює чистоту та лаконічність інтерфейсу,
забезпечуючи зручність у сприйнятті контенту. Текст та графічні елементи чітко
47
виділяються на світлому тлі, що сприяє легкому читанню та сприйняттю інформації
користувачами.
Світлий дизайн сайту створює атмосферу довіри, професіоналізму та
естетичного задоволення, надаючи позитивний враження від взаємодії з інтернет-
магазином. Цей дизайн створює гармонійне середовище, яке сприяє залученню
користувачів та підвищенню їхньої задоволеності від використання сайту.
На рис. 2.7 показана комп'ютерна версія розробленого дизайну інтернет-
магазину в Figma зі світлою кольоровою схемою.

Рисунок 2.7 – Комп'ютерна версія розробленого дизайну зі світлою схемою
На рис. 2.8 показана мобільну версію розробленого дизайну інтернет-магазину.
в Figma зі світлою кольоровою схемою.

Рисунок 2.8 – Мобільна версія розробленого дизайну зі світлою схемою
48
2.6 Розробка функціоналу інтернет-магазину для мобільних пристроїв
При розробці функціоналу для мобільних пристроїв в інтернет-магазині варто
враховувати особливості цільової платформи та забезпечити зручний та ефективний
досвід користувача. Основні кроки при розробці функціоналу для мобільних
пристроїв включають наступне:
– Аналіз вимог. Ретельно проаналізуйте вимоги до функціоналу для мобільних
пристроїв. Визначте, які функції повинні бути доступні для користувачів мобільних
пристроїв, наприклад, перегляд товарів.
– Проектування інтерфейсу. Розробіть інтерфейс, який буде зручним та
ефективним для користувачів мобільних пристроїв. Врахуйте розмір екрану,
можливості взаємодії (сенсорний екран, жести), орієнтацію екрану (портретна або
альбомна) та дотримуйтесь дизайну, специфічного для платформи.
– Розробка структури та навігації. Важливим кроком є визначення структури
магазину та логічної навігації. Вирішується питання про розміщення основних
категорій товарів, сторінок товарів, кошика, процесу оформлення замовлення тощо.
Забезпечення зручної та легкою для користувачів навігації допомагає покупцям
швидко знаходити потрібні товари та ефективно взаємодіяти з магазином.
– Інтеграція з існуючим backend. Забезпечте взаємодію зі серверною частиною
інтернет-магазину. Реалізуйте механізми обміну даними, такі як запити API, обробка
відповідей сервера та синхронізація даних між мобільним пристроєм та сервером.
– Розгортання та налаштування. Після успішного тестування магазин готовий
до розгортання. На цьому етапі відбувається розміщення інтернет-магазину на
хостингу та налаштування необхідних параметрів, таких як доменне ім'я, безпека,
зв'язок з базою даних та інші. Це дозволяє зробити магазин доступним для
відвідувачів у і.нтернеті.
Розробка функціоналу для мобільних пристроїв дозволить створити зручний та
привабливий досвід покупки для користувачів, які використовують мобільні пристрої
для доступу до інтернет-магазину.

49
2.6.1 Створення проекту React. В проекті використовуються різні технології
та компоненти такі як: API, React, Redux Toolkit, React Router DOM.
Спершу в роботі створюється проект React і встановлюються всі необхідні
пакети. Для створення проекту в консолі використовується команда "npx create-react-
app" (рис. 2.9).

Рисунок 2.9 – Створення проекту React
Наступна команда "yarn add react-router-dom @reduxjs/toolkit axios" (рис. 2.10).

Рисунок 2.10 – Додавання пакетів в проект
50
Ця команда встановлює пакети для розробки проекту на React:
– react-router-dom - це бібліотека маршрутизації для React. Вона надає
можливість створювати маршрути і навігацію в додатку React. За допомогою React
Router можна визначити, який компонент має відображатись на певних шляхах URL,
створювати вкладені маршрути, передавати параметри і багато іншого. Ця бібліотека
є дуже популярною для розробки одно-сторінкових додатків SPA.
– @reduxjs/toolkit - це офіційний набір інструментів Redux, який спрощує
розробку додатків з використанням станового керування. Redux - це бібліотека
станового керування, яка допомагає організовувати і керувати станом додатку в
прогнозований спосіб. @reduxjs/toolkit містить набір зручних утиліт, які спрощують
створення дій (actions), зменшувачів (reducers) і магазину (store) Redux.
Використовуючи Redux, можна ефективно керувати станом додатку і забезпечити
однозначність даних між компонентами.
– axios - це бібліотека для здійснення HTTP-запитів з браузера або з Node.js.
Axios надає простий і зручний інтерфейс для взаємодії з API. Можна використовувати
Axios для виконання запитів GET, POST, PUT, DELETE і т. д., обробки відповідей
сервера, встановлення заголовків, передачі параметрів запиту і багато іншого. Axios
є дуже популярним варіантом для роботи з API в додатках React.
Команда yarn add встановлює ці пакети у проекті, використовуючи менеджер
пакетів Yarn. Вона додає пакети до взаємозв'язків проекту, щоб їх можна було
використовувати у своєму коді. Після виконання цієї команди, пакети будуть
встановлені у папку node_modules вашого проекту, і тоді можна імпортувати їх у свої
компоненти та файлову структуру додатку React.
Тепер можна почати розробку проекту React, редагуючи файли в папці src.
Зміни, зроблені в коді, автоматично перезавантажують сторінку в браузері, щоб ви
могли бачити їх вплив під час розробки.

51
2.6.2 Розробку структури інтернет-магазину на React. У проекті React було
створено кілька компонентів, які допомагають організувати структуру та
функціональність додатку (рис. 2.11).

Рисунок 2.11 – Додані компоненти в проект
Banner. Цей компонент відповідає за відображення банера на домашній
сторінці. Він містить інформацію про акції, новини або будь-яку іншу важливу
інформацію, яку потрібно виділити на головній сторінці.
Cart. Компонент "Cart" відповідає за відображення вмісту кошика покупок. Він
містить список товарів, цін, кількість одиниць кожного товару та загальну суму
замовлення. Крім того, цей компонент надає можливість змінювати кількість товарів,
видаляти товари з кошика або здійснювати оформлення замовлення.
Categories. Компонент "Categories" відповідає за відображення списку категорій
або розділів товарів. Він містить посилання, що представляють кожну категорію. При
натисканні на категорію відбувається перехід до відповідної сторінки з товарами.
Favorite. Цей компонент відповідає за відображення списку улюблених товарів
користувача. Він може містити список товарів, що були додані в улюблені, та
надавати можливість видалення товарів зі списку улюблених.
Footer. Компонент "Footer" представляє нижню частину сторінки. Він містить
інформацію про додаток, контактну інформацію, посилання на соціальні мережі або
52
будь-яку іншу додаткову інформацію, яка потрібна на кожній сторінці.
Header. Компонент "Header" відповідає за верхню частину сторінки. Він може
містить логотип, пошуковий рядок, кнопку зміни кольорової схеми, акаунт
користувача, корзину та навігаційне меню категорій що надають зручний доступ до
різних розділів магазину.
Home. Компонент "Home" представляє домашню сторінку додатку. Він містить
банер, категорії товарів, рекомендовані товари і будь-який інший контент, що
потрібен на головній сторінці.
Poster. Компонент "Poster" відповідає за відображення афіші або зображення
товару. Це може бути зображення товару, яке використовується в списку товарів або
на сторінці окремого товару.
Products. Компонент "Products" відповідає за відображення списку товарів. Він
містить картки товарів з інформацією про кожен товар, таку як назва, ціна,
зображення та інші деталі. Крім того, цей компонент надає можливість сортування
товарів за різними критеріями або фільтрації товарів за певними параметрами.
Profile. Компонент "Profile" відповідає за відображення профілю користувача.
Він може містити інформацію про користувача, таку як ім'я, фотографію, адресу
доставки або інші персональні дані.
Routers. Компонент "Routers" відповідає за встановлення маршрутів в додатку
з використанням React Router. Він визначає, який компонент має бути відображений
на певних шляхах URL, реалізує навігацію між різними сторінками додатку.
Sidebar. Компонент "Sidebar" представляє бічне меню або панель навігації, яка
відображається на бічній панелі додатку. Він містить посилання на різні розділи
додатку та інші елементи, що допомагають користувачу пересуватись по інтернет-
магазину.
User. Компонент "User" відповідає за відображення інформації про
користувача, наприклад, ім'я, фотографію, роль або інші деталі. Він може
використовуватись в різних частинах додатку, де потрібно відображати інформацію
про поточного користувача.
Ці компоненти є ключовими елементами структури інтернет-магазину проекті
53
React і використовуються для організації різних частин магазину та забезпечення
відповідного відображення та функціональності. Можна додати власну логіку та
стилізацію до цих компонентів, щоб вони відповідали потребам проекту.
2.6.3 Адаптація інтернет-магазину під різні розміри мобільних пристроїв.
Існує кілька видів адаптації сайтів під різні розширення екрану. Основні види
адаптації включають:
1) Responsive Web Design (RWD) – це найпоширенішим підходом до адаптації
сайтів. За допомогою CSS медіа-запитів, гнучких сіток та розмірів шрифтів він
забезпечує оптимальне відображення контенту на різних пристроях та розмірах
екрану. Сайт реагує на зміну розміру вікна браузера та перебудовується,
забезпечуючи зручне відображення на десктопах, планшетах і смартфонах.
2) Adaptive Web Design (AWD) – використовує набір заздалегідь визначених
макетів, які залежать від розширення екрану. Сервер або клієнтський скрипт визначає
характеристики пристрою і вибирає відповідний макет для його завантаження. Це
дозволяє точніше контролювати відображення контенту на різних пристроях, але
вимагає більше ресурсів для розробки та підтримки.
3) Mobile-First Design – передбачає розробку сайту, спочатку зосереджуючись
на мобільних пристроях, а потім розширюючи його до більших екранів. За допомогою
цього підходу забезпечується оптимальний досвід для користувачів мобільних
пристроїв, а потім збільшується функціональність та елементи дизайну для більших
екранів.
4) Separate Mobile Site – це створення окремого мобільного сайту, що
відображається тільки на мобільних пристроях. У такому випадку сайт відрізняється
від основної версії, і використовується окремий URL або піддомен для мобільної
версії. Цей підхід забезпечує більшу гнучкість в адаптації контенту під мобільні
пристрої, але вимагає додаткових зусиль для розробки та підтримки двох окремих
сайтів.
5) Progressive Enhancement – базується на ідеї, що сайт повинен спочатку
працювати на всіх пристроях з базовим набором функцій і стилів, а потім
покращуватися залежно від можливостей пристрою. Використовуючи цей підхід,
54
розробники забезпечують базовий функціонал для всіх пристроїв, а потім додають
більш складені функції для пристроїв з більшими можливостями.
Ці різні підходи до адаптації сайтів під різні розширення екрану дозволяють
забезпечити зручне та ефективне відображення контенту для користувачів на різних
пристроях. Вибір конкретного підходу залежить від потреб, обмежень та вимог
проекту.
В роботі використовувався перший і найпопулярніший вид адаптацію сайту а
саме Responsive Web Design. Ключові переваги цього методу є:
– Універсальність. Завдяки RWD, веб-сайт буде добре працювати на різних
пристроях та розмірах екранів, включаючи десктопи, планшети і смартфони. Вам не
потрібно створювати окремі версії сайту для кожного типу пристрою, що спрощує
розробку та підтримку.
– Зручний для користувачів. RWD забезпечує зручний досвід для користувачів,
оскільки веб-сайт адаптується до їх пристрою та розміру екрану. Це означає, що
користувачі можуть зручно переглядати контент, незалежно від того, чи вони
використовують десктоп, планшет або смартфон.
– Оптимізація для пошукових систем. RWD сприяє поліпшенню оптимізації
для пошукових систем, оскільки весь контент веб-сайту знаходиться в одному місці,
а URL залишається незмінним. Це допомагає пошуковим системам ефективно
індексувати та класифікувати сайт.
– Економія часу та ресурсів. Завдяки RWD ви можете уникнути необхідності
розробки окремих версій сайту для різних пристроїв. Це дозволяє зберегти час і
зусилля, оскільки вам потрібно буде підтримувати тільки одну кодову базу.
– Простота управління. RWD спрощує управління веб-сайтом, оскільки не
потрібно керувати окремими версіями контенту для кожного пристрою. Можна
зосередитись на створенні та підтримці одного набору контенту, який автоматично
адаптується до різних пристроїв.
В цілому, розробка за допомогою Responsive Web Design є вигідним варіантом,
який дозволяє створювати універсальні, зручні для користувачів та ефективно
оптимізовані веб-сайти.
55
На рис. 2.12 відображено схематична робота методі RWD.

Рисунок 2.12 – Робота методу RWD
Тобто при розробці за допомогою RWD елементи на веб-сайті залишаються
тими ж, але їх розмір, розташування та вигляд змінюються залежно від розміру екрану
користувача. Це досягається за допомогою гнучких сіток, адаптивних зображень та
CSS медіа-запитів.
Основна ідея RWD полягає в тому, щоб веб-сайт адаптувався до різних
пристроїв, таких як настільні комп'ютери, планшети та смартфони, надаючи
оптимальне відображення контенту на кожному з них. Це означає, що елементи, такі
як заголовки, текстові блоки, зображення, кнопки та інші компоненти, можуть
змінювати свою ширину, висоту та розташування, щоб забезпечити приємний та
зручний досвід користувачам.
Процес адаптації полягає в тому, щоб встановити правила та параметри для
кожного елемента, використовуючи CSS. Наприклад, можна визначити, яка ширина
блока буде відображатися на десктопі, а яка на смартфоні. Також можна змінювати
розмір шрифтів, кількість стовпців в сітці, налаштовувати відступи та інші параметри.
Окрім того, за допомогою медіа-запитів можна визначити конкретні розміри
екрану, при яких змінювати стилізацію елементів. Наприклад, можна налаштувати,
щоб при ширині екрану менше 768 пікселів певні елементи ставали більшими або
мали інше розташування.
Таким чином, за допомогою RWD можна забезпечити адаптивність веб-сайту
до різних розмірів екрану, дозволяючи користувачам зручно переглядати та
взаємодіяти з контентом незалежно від пристрою, який вони використовують.
56
2.7 Розгортання інтернет-магазину на хостинг
Після завершення роботи над проектом його можна розгорнути на хостинг, щоб
зробити його доступним для відвідувачів інтернету. Розгортання на хостинг включає
встановлення необхідних файлів на сервері хостинг-провайдера, налаштування
необхідних параметрів та перевірку роботи проекту на веб-сервері.
Цей процес може включати копіювання файлів проекту на хостинг-сервер,
налаштування доменного імені та DNS-записів для вказівки на хостинг-сервер.
Після успішного розгортання на хостинг проект буде доступний через вказану
доменну адресу або IP-адресу. Користувачі зможуть відвідувати сайт, переглядати
його сторінки, взаємодіяти з функціями та здійснювати огляд товарів (у випадку
інтернет-магазину).
Розгортання на хостинг є важливим кроком для публікації проекту в інтернеті і
забезпечення його доступності для широкої аудиторії. Після розгортання можна
продовжувати підтримувати та розвивати проект, надавати оновлення та новий
контент для користувачів.
В ролі хостингу був обраний хостинг від компанії Google, а саме Firebase. На
рис. 2.13 відображено головну сторінку Firebase.

Рисунок 2.13 – Головна сторінка Firebase
57
Хостинг на Firebase дозволяє швидко та легко розгорнути проект в інтернеті.
Можна завантажити файли та ресурси на сервери Firebase, і вони будуть доступні
через унікальну доменну адресу, надану Firebase.
Одна з великих переваг Firebase - це його масштабованість. Можна почати з
невеликого проекту і поступово масштабувати. Firebase надає гнучкі можливості для
масштабування додатку, забезпечуючи високу доступність і продуктивність, навіть
при великому навантаженні.
Крім того, Firebase має добре документовану API та зручний інтерфейс
керування, що спрощує розгортання та керування проектом. Можна легко
налаштувати безпеку, настроїти права доступу до файлів і даних, а також
використовувати інші сервіси Firebase для покращення функціональності проекту.
Розгортання на Firebase дозволяє швидко запустити проект в інтернеті,
отримати доступ до всіх переваг хостингу Firebase та надати користувачам зручний
та надійний досвід.
Для розгортання сайту на хостингу потрібно виконати крок зібрання
проекту в окремий файл "build". Для цього в даній роботі використовується команда
"yarn build" (рис. 2.14).

Рисунок 2.14 – Виконання команди "yarn build"
58
Команда "yarn build" є частиною інструменту збирання проектів за допомогою
Yarn, який є менеджером пакетів для JavaScript. Ця команда виконує процес збирання
інтернет-магазину, компілюючи і об'єднуючи всі необхідні файли і ресурси.
Під час виконання команди "yarn build", Yarn переглядає конфігураційні файли
проекту, включаючи файл "package.json" для збирання інформації про структуру
проекту та налаштування збирання.
Після збору проекту, Yarn створює папку "build" в якій зберігаються
оптимізовані та скомпільовані файли проекту. Ці файли готові для розгортання на
хостинг-сервері.
Збірка проекту перед розгортанням на хостингу дозволяє оптимізувати розмір
файлів, видалити непотрібні або тестові дані, скомпілювати файли препроцесорів та
зберегти ресурси в оптимальному форматі. Це допомагає зменшити час завантаження
сторінок та поліпшити продуктивність сайту на хостингу.
Отже, виконавши команду "yarn build", отримано готовий для розгортання файл
"build", який містить оптимізовану версію сайту і може бути завантажений на хостинг
для публікації в інтернеті.
Після завершення налаштування проекту і вибору Firebase як хостингу,
наступним кроком було встановлення Firebase CLI. Для цього використано команду
"npm install -g firebase-tools" (рис. 2.15).

Рисунок 2.15 – Виконання команди "npm install -g firebase-tools"
59
Команда "npm install" використовується для встановлення пакетів Node.js з
репозиторію NPM. В роботі встановлено пакет з назвою "firebase-tools", який є
інструментом командного рядка для роботи з Firebase.
Опція "-g" вказує на глобальне встановлення пакета. Це означає, що пакет буде
встановлений на рівні системи і буде доступний з будь-якого місця в командному
рядку.
Після виконання команди "npm install -g firebase-tools", NPM завантажує
відповідний пакет з репозиторію і встановлює його в систему. Цей пакет містить
необхідні утиліти та скрипти для взаємодії з Firebase, зокрема для розгортання та
керування вашим проектом на хостингу Firebase.
Після успішної установки Firebase CLI, можна використовувати різноманітні
команди Firebase через командний рядок.
Firebase CLI спрощує процес розгортання, керування та налаштування проекту
на хостингу Firebase, надаючи зручний інтерфейс командного рядка для взаємодії з
Firebase платформою.
Наступним кроком виконується команда "firebase login". Після виконання даної
команди використовуємо наступну команду "firebase init" (рис. 2.16).

Рисунок 2.16 – Виконання команди "firebase init"
60
Команда "firebase init" використовується для ініціалізації проекту Firebase.
Після її виконання відкриється інтерактивний процес налаштування, який допомагає
налаштувати проект та зв'язати його зі зазначеним проектом Firebase.
Під час виконання команди "firebase init" отримаємо наступні опції для
налаштування проекту:
1) Вибір типу проекту. Можна вибрати тип проекту, який створиться.
Наприклад, вибір "Hosting" дозволить налаштувати хостинг проекту на Firebase.
2) Вибір проекту Firebase. Виберіть проект Firebase, з яким пов'язати проект.
3) Налаштування налаштувань хостингу. Потрібно вибрати папку зі збіркою
проекту, яку розгорнути на хостингу.
4) Інші налаштування. Залежно від потреб, також можна налаштувати додаткові
параметри, такі як налаштування бази даних, налаштування аутентифікації та інші.
Після виконання команди "firebase init" і налаштування проекту, Firebase CLI
створить необхідні файли конфігурації та структуру проекту, що дозволить локально
розробляти та розгортати проект на хостингу Firebase.
Після завершення ініціалізації проекту Firebase за допомогою команди "firebase
init", останнім кроком є виконано команду "firebase deploy" (рис. 2.17).

Рисунок 2.17 – Виконання команди "firebase deploy"
61
Команда "firebase deploy" використовується для розгортання проекту на
хостингу Firebase. Після виконання цієї команди, Firebase CLI завантажує проект на
сервери Firebase і розгортає його, щоб стати доступним в інтернеті.
Під час виконання команди "firebase deploy" Firebase CLI завантажує файли
проекту, включаючи HTML, CSS, JavaScript, зображення та інші ресурси, на сервери
Firebase. Firebase інфраструктура оброблює ці файли та генерує веб-сторінки, які
можна переглядати за допомогою URL-адреси хостингу Firebase.
Крім розгортання статичного контенту, команда "firebase deploy" також може
розгортати інші ресурси, такі як Cloud Functions, бази даних, зображення,
конфігураційні файли тощо, залежно від того, як проект був налаштований.
Після успішного виконання команди "firebase deploy" проект стає доступним в
інтернеті за URL-адресую, яку надає хостинг Firebase. Тепер можна переглядати та
тестувати веб-сайт або додаток, а також поділитися ним з користувачами.
Команда "firebase deploy" дозволяє зручно та швидко розгорнути проект на
хостингу Firebase, забезпечуючи його доступність для широкого кола користувачів
через інтернет. На рис. 2.18 зображено сторінку хостингу Firebase та URL-адрес
розгорнутого проекту.

Рисунок 2.18 – сторінку хостингу Firebase
62
На рис. 2.19 зображено головна сторінка розгорнутого проекту на Firebase яка
знаходиться за посиланнями:
1) https://store-test-2663e.web.app/.
2) https://store-test-2663e.firebaseapp.com/.

Рисунок 2.19 – Головна сторінка розгорнутого проекту
Висновки до розділу 2
1. В цьому розділі представлено проектування та розробка інтернет-магазину.
Висновком є те що адаптацією під мобільні пристрої є складним та багатогранним
процесом, але варто відзначити, що цей розділ допоміг визначити ключові аспекти та
етапи роботи, які необхідно врахувати для успішної реалізації проекту.
Під час проектування архітектури магазину були враховані вимоги до зручності
використання, ефективності та безпеки. Було розроблено логічну структуру системи,
а також використання API для зберігання товарів, замовлень та інших даних.
При розробці функціоналу для мобільних пристроїв було звернуто особливу
увагу на адаптивність та відповідність мобільним платформам. Було розроблено
інтерфейс, який забезпечує зручну навігацію, швидкий доступ до інформації та
зручність у використанні на різних розмірах екранів.
63
Загальний результат проектування та розробки інтернет-магазину з адаптацією
під мобільні пристрої підтверджує важливість цього напрямку для сучасних бізнесів.
Оптимізація магазину під мобільні пристрої дозволить залучити широку аудиторію
користувачів та забезпечити зручний та приємний досвід покупок. Практичне
значення проекту полягає в можливості покращення конкурентоспроможності
підприємств, збільшенні обсягів продажів та задоволенні потреб сучасних
споживачів.
2. У цьому розділі було представлено процес розробки та розгортання проекту
на хостингу. Використовуючи технології, такі як React, Firebase, інструменти
командного рядка та пакетні менеджери, було розроблено компоненти, виконано
налаштування проекту та зібрано його для реліз-версії. Далі, використовуючи Firebase
CLI, було здійснено розгортання проекту на хостингу Firebase.
Крім того, розгортання на хостингу Firebase дозволяє легко зробити проект
доступним для світу. Це дозволяє легко ділитися додатком або веб-сайтом з іншими
користувачами та отримувати реальний зворотний зв'язок.
Завдяки зручному інтерфейсу командного рядка, процес розгортання на
хостингу Firebase стає простим і зрозумілим. Можна швидко оновлювати проект,
виконувати тестування та проводити інші операції безпосередньо з командного рядка.
У підсумку, розробка та розгортання проекту на хостингу Firebase є потужним
та зручним процесом. Вона дозволяє швидко розробляти та розгортати проекти, надає
доступ до багатого набору інструментів Firebase та дозволяє легко поділитися сайтом
зі світом.

64
3 ТЕСТУВАННЯ ТА ДОСЛІДЖЕННЯ ЕКСПУЛАТАЦІЇ
3.1 Особливості тестування веб-сайтів
Тестування веб-сайтів - це захоплюючий та важливий процес, який допомагає
створювати якісні та надійні веб-додатки. Воно вимагає уваги до деталей, технічних
знань та здатності мислити як користувач. У результаті тестування допомагає
покращити користувацький досвід та довіру до сайту.
Тестування веб-сайтів є одним з найважливіших етапів розробки, оскільки воно
допомагає гарантувати якість та функціональність веб-додатків. Тестування веб-
сайтів включає декілька аспектів, кожен з яких відіграє важливу роль у забезпеченні
безпомилкової роботи сайту.
Існує кілька видів тестування веб-сайтів, кожен з яких має свою специфіку та
ціль.
Функціональне тестування (рис. 3.1). Це перевірка роботи основних функцій та
елементів веб-сайту. Включає перевірку роботи посилань, кнопок, форм, меню та
інших функціональних елементів. Метою є переконатися, що вони працюють
правильно та виконують свої завдання.

Рисунок 3.1 – Типи функціонального тестування
65
Тестування користувальницького інтерфейсу (рис. 3.2). Це перевірка зручності
використання та естетичного оформлення веб-сайту. Метою є переконатися, що
інтерфейс логічний, інтуїтивно зрозумілий та забезпечує приємний користувацький
досвід.

Рисунок 3.2 – Тестування інтерфейсу
Тестування сумісності (рис. 3.3). Веб-сайти повинні працювати на різних
браузерах, операційних системах та пристроях. Тестування сумісності перевіряє, як
сайт відображається та працює на різних комбінаціях платформ.

Рисунок 3.3 – Приклад тестування сумісності
66
Тестування продуктивності (рис. 3.4). Це перевірка швидкості та
продуктивності веб-сайту. Може включати тестування завантаження сторінок,
швидкості відгуку, обробки запитів та ресурс-ємності. Метою є забезпечення
швидкого та ефективного роботи сайту навіть при великому навантаженні.

Рисунок 3.4 – Типи функціонального тестування
Тестування на різних розширеннях екрану (рис. 3.5). Веб-сайти повинні
адаптуватися до різних розмірів екрану, від мобільних пристроїв до настільних
комп'ютерів. Тестування на різних розширеннях перевіряє, як сайт виглядає та
працює на різних пристроях.

Рисунок 3.5 – Тестування на різних екранах
67
Крім цих основних видів, існує також інтеграційне тестування, регресійне
тестування, автоматизоване тестування та багато інших методів та підходів, які
можуть бути використані залежно від конкретних потреб та вимог проекту.
Важливо пам'ятати, що тестування веб-сайтів є невід'ємною частиною процесу
розробки та допомагає забезпечити якість та надійність веб-сайтів перед їх випуском.
3.2 Тестові сценарії перевірки працездатності інтернет-магазину
Для впевненості у створеному інтернет-магазині потрібно запровадити
наступні тестові сценарії для перевірки працездатності:
Базові:
– Додатковий перехід до головної сторінки здійснюється після успішного
входу в систему.
– На головній сторінці правильно відображаються продукти та їх деталі.
– У налаштуваннях працює кнопка виходу з аккаунту, після натискання на
неї відбувається вихід з облікового запису та перехід на сторінку входу.
Сторінка каталогу продуктів:
– По натисканню на кнопку "Додати до кошика" можна додати продукт до
кошика.
– Після додавання продукту до кошика він відображається в кошику.
– Функціонал відображення вилучених продуктів працює.
– Коректна відображення короткої інформації про продукти в каталозі.
Сторінка кошика:
– Правильно розраховується загальна сума замовлення в кошику.
– Можливість змінити кількість продуктів у кошику та оновлення вартості
замовлення.
– Працює функціонал видалення продукту з кошика.
Це лише кілька прикладів тестових сценаріїв для перевірки працездатності
інтернет-магазину. Реальний перелік тестів може варіюватися в залежності від
конкретного проекту та його функціональності.
68
3.3 Тестування веб-сайту інтернет-магазин
Для тестування інтернет-магазину використовуються різні браузери, такі як
Google Chrome, Opera і Mozilla Firefox, а також їхні мобільні версії. Кожен з цих
браузерів має свої особливості та властивості, які можуть впливати на відображення
та функціональність веб-сайту.
Google Chrome (рис. 3.6) є одним з найпопулярніших браузерів, який володіє
швидкістю та хорошою підтримкою сучасних веб-стандартів. Він часто
використовується для тестування та розробки веб-сайтів, оскільки має розширений
інструментарій для розробників, такий як інспектор елементів, консоль розробника і
засоби для профілювання.

Рисунок 3.6 – Логотип Google Chrome
Opera (рис. 3.7) - ще один популярний браузер, який володіє широким
функціоналом та набором додатків. Він також базується на движку Chromium, що
робить його схожим на Google Chrome. Тестування в Opera дозволяє переконатися,
що веб-сайт працює належним чином на цьому браузері та не має сумнівних
відмінностей від інших браузерів.

Рисунок 3.7 – Логотип Opera
69
Mozilla Firefox (рис. 3.8) - це інший популярний браузер, який відрізняється
своєю швидкодією та відкритим джерелом. Firefox має велику спільноту розробників,
що активно працюють над покращенням браузера. Він також надає розширений набір
інструментів для розробників, таких як інспектор елементів, консоль розробника та
можливості настройки.

Рисунок 3.8 – Логотип Mozilla Firefox
Тестування веб-сайту на різних браузерах допомагає переконатися, що він
працює правильно та відображається належним чином для різних користувачів.
Кожен браузер має свої особливості, тому важливо переконатися, що веб-сайт
підтримується на всіх популярних браузерах, що використовуються вашою цільовою
аудиторією.
3.3.1 Тестування адаптивності інтернет-магазину на комп’ютері.
Тестування адаптивності інтернет-магазину включатиме перевірку його
відображення на різних розширеннях екрану браузера на комп'ютера. Основні
розширення, на яких буде проводитися тестування, включають 1200 пікселів, 992
пікселя, 769 пікселів та 576 пікселів. Ці розширення є фундаментальними при
адаптації сайту під різні пристрої та екрани.
На розширенні 1200 пікселів перевірятиметься, як інтернет-магазин
відображається на широких екранах комп'ютера, забезпечуючи оптимальне
70
використання доступного простору та відображення всіх важливих елементів.
Розширення 992 пікселя відображає, як інтернет-магазин адаптується до
середньої ширини екрана, що може бути характерно для планшетів та ноутбуків.
На розширенні 769 пікселів перевірятиметься, як інтернет-магазин адаптується
до мобільних пристроїв зі середньою шириною екрана, забезпечуючи зручне та
ефективне використання сайту на таких пристроях.
Розширення 576 пікселів відображає, як інтернет-магазин відповідає на
найменших екранах мобільних пристроїв, забезпечуючи зручне переглядання та
навігацію.
Тестування адаптивності на цих розширеннях допоможе переконатися, що
інтернет-магазин належним чином адаптується до різних пристроїв та забезпечує
зручну та ефективну користувальницьку спрямованість незалежно від екрану, на
якому його переглядають.
На рис. 3.9 зображено головну сторінку інтернет-магазину в браузері Google
Chrome з розширенням 1200+ пікселів.

Рисунок 3.9 – Головна сторінка інтернет-магазину в Google Chrome
В Google Chrome з розширенням 1200+ пікселів сайт відображається
правильно.
71
На рис. 3.10 зображено головну сторінку інтернет-магазину в браузері Opera з
розширенням 1200+ пікселів.

Рисунок 3.10 – Головна сторінка інтернет-магазину в Opera
В Opera з розширенням 1200+ пікселів сайт відображається правильно.
На рис. 3.11 зображено головну сторінку інтернет-магазину в браузері Mozilla
Firefox з розширенням 1200+ пікселів.

Рисунок 3.11 – Головна сторінка інтернет-магазину в Mozilla Firefox
В Mozilla Firefox з розширенням 1200+ пікселів сайт відображається
правильно.
72
На рис. 3.12 зображено головну сторінку інтернет-магазину в браузері Google
Chrome з розширенням 992 пікселя.

Рисунок 3.12 – Головна сторінка інтернет-магазину в Google Chrome
В Google Chrome з розширенням 992 пікселя сайт відображається правильно.
На рис. 3.13 зображено головну сторінку інтернет-магазину в браузері Opera з
розширенням 992 пікселі.

Рисунок 3.13 – Головна сторінка інтернет-магазину в Opera
В Opera з розширенням 992 пікселі сайт відображається правильно.
73
На рис. 3.14 зображено головну сторінку інтернет-магазину в браузері Mozilla
Firefox з розширенням 992 пікселі.

Рисунок 3.14 – Головна сторінка інтернет-магазину в Mozilla Firefox
В Mozilla Firefox з розширенням 992 пікселі сайт відображається правильно.
На рис. 3.15 зображено головну сторінку інтернет-магазину в браузері Google
Chrome з розширенням 768 пікселів.

Рисунок 3.15 – Головна сторінка інтернет-магазину в Google Chrome
В Google Chrome з розширенням 768 пікселів сайт відображається правильно.
74
На рис. 3.16 зображено головну сторінку інтернет-магазину в браузері Opera з
розширенням 768 пікселів.

Рисунок 3.16 – Головна сторінка інтернет-магазину в Google Chrome
В Opera з розширенням 768 пікселів сайт відображається правильно.
На рис. 3.17 зображено головну сторінку інтернет-магазину в браузері Mozilla
Firefox з розширенням 768 пікселів.

Рисунок 3.17 – Головна сторінка інтернет-магазину в Google Chrome
В Mozilla Firefox з розширенням 768 пікселів сайт відображається правильно.
75
На рис. 3.18 зображено головну сторінку інтернет-магазину в браузері Google
Chrome з розширенням 576 пікселів.

Рисунок 3.18 – Головна сторінка інтернет-магазину в Google Chrome
В Google Chrome з розширенням 576 пікселів сайт відображається правильно.
На рис. 3.19 зображено головну сторінку інтернет-магазину в браузері Opera з
розширенням 576 пікселів.

Рисунок 3.19 – Головна сторінка інтернет-магазину в Google Chrome
В Opera з розширенням 576 пікселів сайт відображається правильно.
76
На рис. 3.20 зображено головну сторінку інтернет-магазину в браузері Mozilla
Firefox з розширенням 576 пікселів.

Рисунок 3.20 – Головна сторінка інтернет-магазину в Google Chrome
В Mozilla Firefox з розширенням 576 пікселів сайт відображається правильно.
3.3.2 Тестування адаптивності інтернет-магазину на мобільному пристрої.
Після успішного тестування сайту на комп'ютері в різних фундаментальних
розширеннях екрану, наступним кроком є перевірка його адаптації на мобільних
пристроях.
Мобільна адаптація включає перегляд та оцінку сайту на різних моделях та
розмірах мобільних пристроїв, таких як смартфони та планшети. Під час тестування
буде звернена увага на наступні аспекти:
1) Відповідність розмірів та пропорцій. Сайт повинен пристосовуватися до
екранів різного розміру, забезпечуючи зручне та естетичне відображення контенту.
Шрифти, зображення та інші елементи мають бути чіткими та легко читабельними.
2) Мобільна навігація. Перегляд сайту на мобільних пристроях вимагає зручної
та інтуїтивно зрозумілої навігації. Меню, кнопки та інші елементи навігації повинні
бути легкодоступними та легкими у використанні на сенсорних екранах.
3) Пристосування контенту. Контент на сайті повинен пристосовуватися до
мобільних пристроїв. Наприклад, списки товарів або категорій можуть бути
77
відображені у вигляді компактного списку, а зображення можуть бути оптимізовані
для швидкого завантаження на мобільних мережах.
Тестування сайту на мобільних пристроях допоможе переконатися, що він
забезпечує зручний та задоволений користувацький досвід незалежно від пристрою,
на якому він відкривається. Мобільна адаптація є важливим аспектом розробки веб-
сайтів, оскільки все більше користувачів переглядають веб-контент саме на
мобільних пристроях.
На рис. 3.21 зображено головну сторінку мобільної версію інтернет-магазину.

Рисунок 3.21 – Головна сторінка інтернет-магазину
Головна сторінка інтернет-магазину чудово пристосована до мобільних
пристроїв, забезпечуючи комфортний користувацький досвід на мобільних екранах.
Текст на сторінці має оптимальний розмір, що дозволяє зручно читати інформацію
навіть на менших екранах. Картинки адаптовані таким чином, щоб вони були чіткими
та привабливими на малих дисплеях, не втрачаючи якості. Кожен блок на сторінці
має своє оптимальне розташування, забезпечуючи зручний доступ до важливої
78
інформації з мобільних пристроїв. Кнопки та інші елементи взаємодії з сайтом
достатнього розміру, щоб забезпечити легке та точне натискання пальцем. Всі ці
аспекти створюють оптимальну мобільну адаптацію, забезпечуючи зручне та
приємне користування інтернет-магазином на мобільних пристроях.
На рис. 3.22 зображено спливаюче гамбургер меню мобільної версію інтернет-
магазину.

Рисунок 3.22 – Гамбургер меню
Гамбургер меню в інтернет-магазині реалізовано з високою якістю. Воно
забезпечує зручну навігацію на мобільних пристроях, дозволяючи згортати та
розгортати меню за необхідністю. Відстань між категоріями в меню оптимально
підібрана, що робить навігацію зручною для користувачів з різними розмірами
екранів. Користувачам легко вибирати потрібну категорію, натискаючи на
79
відповідний пункт меню пальцем. Такий підхід дозволяє забезпечити зручну та
ефективну навігацію для мобільних користувачів, забезпечуючи їм легкий доступ до
потрібних розділів та категорій сайту.
На рис. 3.23 зображено сторінка з обраним продуктом та його
характеристиками.

Рисунок 3.23 – Сторінка продукту
На сторінці продукту інтернет-магазину розташування картинок продукту
продумано до дрібних деталей, щоб користувачам було зручно переглядати їх навіть
на мобільних пристроях. Розмір тексту на сторінці продукту підібраний оптимально,
що дозволяє зручно читати інформацію навіть на малих екранах. Колір тексту також
добре підібраний, щоб забезпечити зручне читання та забезпечити виділення
важливої інформації. Кнопка "Додати в кошик" має зручний розмір, що дозволяє
80
легко та швидко натиснути на неї пальцем. В цілому, сторінка продукту має добре
організовану структуру, яка забезпечує комфортний користувацький досвід на
мобільних пристроях.
Після натискання на кнопку "Додати в кошик", обраний товар миттєво
додається до кошика. На рис. 3.24 показана сторінка кошику, де зібрані всі додані
товари.

Рисунок 3.24 – Сторінка кошику
У кошику товари відображаються з відповідною назвою, ціною та кількістю
обраного продукту. Кожен товар має чітку інформацію, що дозволяє користувачам
швидко зорієнтуватися в своїх покупках. На сторінці кошика доступні різні функції,
які полегшують управління товарами. Користувачі можуть легко видалити товари з
81
кошика, змінити кількість одиниць товару або перейти до оформлення замовлення.
Всі ці функції розташовані зручно і інтуїтивно зрозуміло, що сприяє легкій навігації
та забезпечує користувачам зручну покупку товарів. Крім того, загальна ціна товарів
чітко відображається, дозволяючи користувачам легко відслідковувати свої витрати.
Всі ці елементи створюють приємне враження від процесу покупки та забезпечують
зручну та задоволену покупку для користувачів.
Висновок до розділу 3
В даному розділі розглянуто основні поняття тестування веб-сайтів та наведено
тестові сценарії для перевірки працездатності інтернет-магазину. Після проведення
тестування можна зробити висновок, що сайт успішно пройшов перевірку щодо
адаптивності під різні розміри екранів. Він оптимально відображається на
комп'ютерах з різними розширеннями екрану (1200 пікселів, 992 пікселя, 769 пікселів
та 576 пікселів) та на мобільних пристроях. Мобільна версія сайту належним чином
адаптована, зручна для користування та забезпечує доступ до всіх функцій та
інформації. На підставі результатів тестування можна стверджувати, що сайт надає
зручне та задоволене користування для різних груп користувачів з різними
пристроями та екранами. Загальний висновок полягає в тому, що сайт успішно
пройшов вимоги щодо адаптивності та забезпечує зручну та інтуїтивну навігацію по
магазину.
82
ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра досягнута, тобто в ході її виконання
досліджено інтернет-магазин з адаптацією під мобільні пристрої, а завдання
включали аналіз сучасного стану інтернет-магазинів та мобільних пристроїв,
визначення вимог до інтернет-магазину, вибір технологій розробки, проектування
архітектури та розробку функціоналу для мобільних пристроїв, тестування та
перевіркою розробленого інтернет-магазину.
Під час дослідження був проведений детальний аналіз сучасного стану
інтернет-магазинів та мобільних пристроїв. Цей аналіз дозволив виявити актуальні
тенденції розвитку мобільного електронного бізнесу, особливості мобільних
пристроїв та вимоги до інтернет-магазину, що адаптується під них. На основі цих
даних були визначені критерії оцінки ефективності та користувацької зручності
інтернет-магазину.
У процесі розробки інтернет-магазину були використані сучасні технології, такі
як мова розмітки HTML, мова каскадних стилів CSS, мова програмування JavaScript,
фреймворк React, бібліотека Redux, API та хостинг Firebase. Ці технології дозволили
ефективно створити адаптивний та функціональний інтерфейс для мобільних
пристроїв.
Результатом роботи є створений інтернет-магазин, який має зручний та
інтуїтивно зрозумілий інтерфейс, адаптований під різні мобільні пристрої.
Функціонал магазину дозволяє користувачам швидко та зручно знаходити товари.
Після розробки інтернет-магазину було проведено тестування та перевірку, що
дозволило перевірити його працездатність, стабільність та відповідність вимогам.
Оцінка продуктивності та завантаження інтернет-магазину показала, що він здатний
ефективно працювати та обробляти велику кількість запитів. Крім того, була
проведена оцінка користувацької зручності інтерфейсу, яка підтвердила його
зручність та навігаційну зрозумілість для користувачів.
Отже, виконання мети та завдань дослідження дозволило успішно розробити
інтернет-магазин з адаптацією під мобільні пристрої. Результатом роботи є
83
функціональний, ефективний та зручний для користувачів інтернет-магазин, який
відповідає сучасним вимогам та тенденціям розвитку мобільного електронного
бізнесу. Також результати роботи можуть бути використані підприємствами для
поліпшення своїх електронних торгових платформ та пристосування до змінних
потреб сучасного ринку.
84
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Вікіпедія. Інтернет-магазин. URL: https://uk.wikipedia.org/wiki/%D0%86%D0%BD
%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-
%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD (дата
звернення: 05.03.23).
2. Прикладні аспекти створення інтернет-магазинів як фактор розвитку вітчизняного
електронного бізнесу. URL: http://www.agrosvit.info/pdf/11_2017/12.pdf (дата
звернення: 05.03.23).
3. Як створити та відкрити свій інтернет-магазин. URL: https://hostiq.ua/blog/ukr/how-
to-open-online-store/ (дата звернення: 05.03.23).
4. Як створити успішний інтернет-магазин. URL: https://horoshop.ua/ua/blog/kak-
sozdat-prodaushchiy-internet-magazin/ (дата звернення: 05.03.23).
5. Вікіпедія. Адаптивний веб-дизайн. URL: https://uk.wikipedia.org/wiki/%D0%90%
D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B
9_%D0%B2%D0%B5%D0%B1%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D
0%BD (дата звернення: 05.03.23).
6. Що таке адаптивний сайт. URL: https://brainlab.com.ua/uk/blog-uk/shho-take-
adaptivnij-sajt (дата звернення: 03.04.23).
7. Перевірка адаптивності сайту за допомогою браузера. URL: https://webtune.com.ua/
statti/internet-marketing/yak-pereviryty-adaptyvnist-za-dopomogoyu-brauzera/ (дата
звернення: 03.04.23).
8. Що таке мобільна версія сайту. URL:https://brainlab.com.ua/uk/blog-uk/chto-takoe-
mobilnaya-versiya-sajta#:~:text=%D0%9C%D0%BE%D0%B1%D1%96%D0%BB%D
1%8C%D0%BD%D0%B0%20%D0%B2%D0%B5%D1%80%D1%81%D1%96%D1%
8F%20%D1%81%D0%B0%D0%B9%D1%82%D1%83%20%E2%80%93%20%D1%8
6%D0%B5%20%D0%BE%D0%BA%D1%80%D0%B5%D0%BC%D0%B0,%D1%81
%D0%B0%D0%B9%D1%82%20%D0%B7%D1%96%20%D1%81%D0%BC%D0%B
0%D1%80%D1%82%D1%84%D0%BE%D0%BD%D1%96%D0%B2%20%D1%96%
20%D0%BF%D0%BB%D0%B0%D0%BD%D1%88%D0%B5%D1%82%D1%96%D
85
0%B2. (дата звернення: 03.04.23).
9. Документація HTML, CSS та JavaScript. URL: https://developer.mozilla.org/ru/ (дата
звернення: 08.04.23).
10. Довідник HTML. URL: https://htmlreference.io/ (дата звернення: 08.04.23).
11. Довідник CSS. URL: https://cssreference.io/ (дата звернення: 08.04.23).
12. Сучасний підручник з JavaScript. URL: https://uk.javascript.info/ (дата звернення:
08.04.23).
13. Документація та початок роботи з фреймворком React. URL: https://create-react-
app.dev/docs/getting-started (дата звернення: 08.04.23).
14. Документація та початок роботи з інструментом React Toolkit. URL: https://redux-
toolkit.js.org/introduction/getting-started (дата звернення: 08.04.23).
15. Бібліотека React Router. URL: https://reactrouter.com/en/main/start/overview (дата
звернення: 08.04.23).
16. API Platzi Fake Store. URL: https://fakeapi.platzi.com/en/rest/introduction (дата
звернення: 08.04.23).
17. Документація Firebase. URL: https://firebase.google.com/docs/guides?hl=ru (дата
звернення: 17.04.23).
18. Особливості тестування сайту. URL:https://armedsoft.com/ua/blog/osoblyvosti-
testuvannya-saytu#:~:text=%D0%A2%D0%B5%D1%81%D1%82%D1%83%D0%B2
%D0%B0%D0%BD%D0%BD%D1%8F%20%2D%20%D1%86%D0%B5%20%D0%
BF%D0%B5%D1%80%D0%B5%D0%B2%D1%96%D1%80%D0%BA%D0%B0%20
%D1%81%D0%B0%D0%B9%D1%82%D1%83%2C%20%D1%89%D0%BE,%D0%
BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%20%D0%BF%D0%BE%D1%88
%D1%83%D0%BA%D1%83%20%D0%BF%D0%BE%D0%BC%D0%B8%D0%BB
%D0%BE%D0%BA%20(%D0%B1%D0%B0%D0%B3%D1%96%D0%B2). (дата
звернення: 10.05.23).
19. Тестування веб-проектів: основні етапи та поради. URL:https://qalight.ua/baza-
znaniy/testuvannya-veb-proektiv-osnovni-etapi-ta-poradi/ (дата звернення: 10.05.23).
20. Як тестувати веб-сайт: основні етапи і поради. URL:https://brainlab.com.ua/uk/blog-
uk/yak-testuvati-veb-sayt-osnovn-etapi-poradi (дата звернення: 10.05.23).
86
21. Види тестування сайтів. URL: https://webtune.com.ua/statti/web-rozrobka/vydy-
testuvannya-sajtiv/ (дата звернення: 10.05.23).

ДОДАТОК А

Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2023р.

ІНТЕРНЕТ-МАГАЗИН З АДАПТАЦІЄЮ ПІД МОБІЛЬНІ ПРИСТРОЇ

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

Розробник ____________________ Андрієнко С.В.

Керівник ____________________ Андрієнко В.О.

Черкаси – 2023
88
482.ЧДТУ. 32202-01
Позначення Найменування Примітка

Документація

482.ЧДТУ. 32202-01 Текст програми

482.ЧДТУ. 32202-01 Інструкція користувача

ДОДАТОК Б

ІНТЕРНЕТ-МАГАЗИН З АДАПТАЦІЄЮ ПІД МОБІЛЬНІ ПРИСТРОЇ

Текст програми
482.ЧДТУ. 32202-01
Листів 18

Розробник _____________ Андрієнко С.В.

Черкаси – 2023
90
Фрагмент коду

ДОДАТОК В

ІНТЕРНЕТ-МАГАЗИН З АДАПТАЦІЄЮ ПІД МОБІЛЬНІ ПРИСТРОЇ

ІНСТРУКЦІЯ КОРИСТУВАЧА
482.ЧДТУ. 32202-01
Листів 6

Розробник _____________ Андрієнко С.В.

Черкаси – 2023
92
Для початку роботи з SAP потрібно інсталювати на комп’ютер користувача
GUI, так званий графічний інтерфейс користувача (рис. В.1-В.5).

Рисунок В.1 – Запуск процесу встановлення клієнтського місця

Рисунок В.2 – Процес установки клієнтського місця SAP GUI
93

Рисунок В.3 – Процес установки клієнтського місця SAP GUI

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