ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/8849| Title: | Проектування та створення онлайн сервісу з продажу електронної техніки |
| Authors: | Оксамитна, Любов Павлівна Ковтун, Станіслав Станіславович |
| Keywords: | ІНФОРМАЦІЙНІ ТЕХНОЛОГІЇ;ЕЛЕКТРОННА ТЕХНІКА;ІНТЕРНЕТ МАГАЗИН;JAVA;HTML;SPRING. |
| Issue Date: | 16-Jun-2022 |
| Abstract: | Розвиток ринкових відносин та вдосконалення інформаційних технологій сьогодення спричинили появу багатьох нових видів бізнесу, одним з яких є Інтернет-торгівля. Особливого значення вона набуває в період нестабільної ситуації в Україні, адже дозволяє працювати на віртуальному ринку, що значною мірою знижує витрати підприємств малого бізнесу, дає змогу істотно і швидко розширити коло потенційних клієнтів. Тема дослідження є досить актуальною, оскільки щоденно в різних регіонах країни зростає попит на придбання електронної техніки. Це обумовлено покращенням процесу пошуку та підбору бажаної продукції, що не призводить до втрати часу та довіри адміністраторів порталів, а представить зручний вибір пропозицій під бажані потреби користувачів. Метою кваліфікаційної роботи бакалавра є проектування та створення онлайн сервісу з продажу електронної техніки, який збільшить зручність продажу продукту для потенційного клієнта. Основні положення і результати кваліфікаційної роботи бакалавра доповідалися і були обговорені на студентській науково-практичній конференції ЧДТУ (Черкаси, 2022). Результати кваліфікаційної роботи бакалавра опубліковані у збірнику тез доповідей ЧДТУ: Ковтун С. С., Оксамитна Л. П. Проектування та створення онлайн сервісу з продажу електронної техніки : Збірник тез доповідей студентської науково-практичної конференції ЧДТУ : 19-22 квітня 2022 / [упорядник Мельник І.В.]; Міністерство освіти і науки України, Черкаський державний технологічний ун-т. Черкаси : ЧДТУ, 2022. С. 65-66. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/8849 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Ковтун Станіслав_КНС-2001_2021-2022.pdf Restricted Access | 3.49 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Проектування та створення онлайн сервісу з продажу електронної
техніки»
Виконав: студент 4 курсу, групи КНС-2001
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування
Ковтун Станіслав Станіславович
Керівник __________ Оксамитна Л.П.
(прізвище та ініціали)
Рецензент __________ Стась С.В.
(прізвище та ініціали)
Черкаси 2022 рік
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітній рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
ЗАТВЕРДЖУЮ
Завідувач кафедри КН та СА
_______________ Триус Ю.В.
«____» _____________ 2022 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Ковтуну Станіславу Станіславовичу
(прізвище, ім‘я, по батькові)
1. Тема роботи «Проектування та створення онлайн сервісу з продажу електронної техніки»
Керівник роботи Оксамитна Л.П., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «7» лютого 2022 р. №45/04.
2. Строк подання студентом роботи до 16 червня 2022 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з наукової практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Дослідження предметної області.
4.2. Проектування та моделювання онлайн сервісу з продажу електронної техніки.
4.3. Програмна реалізація.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток A. Специфікація 482.ЧДТУ. 22093-01.
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5.4. Додаток Г. Публікація по темі кваліфікаційної роботи бакалавра в збірнику тез ЧДТУ.
5.5. Презентація у вигляді 35 слайдів.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 11.01.2022
КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ з/п Назва етапів кваліфікаційної роботи бакалавра Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
11.01.2022 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
до 13.02.2022 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної
до 04.03.2022 Виконано
роботи бакалавра.
4 Написання аналітичного розділу кваліфікаційної
до 01.04.2022 Виконано
роботи бакалавра.
5 Написання практичних розділів й висновків до
до 01.05.2022 Виконано
кваліфікаційної роботи бакалавра.
6 Передзахист кваліфікаційної роботи бакалавра
01.06.2022 Виконано
на засіданні кафедри КН та СА.
7 Подання роботи завідувачу кафедри КН та СА. до 16.06.2022 Виконано
8 Захист кваліфікаційної роботи бакалавра. 16.06.2022 Виконано
Студент _____________________________ Ковтун С. С.
(підпис)
Керівник роботи ____________________________ Оксамитна Л. П.
(підпис)
3
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 90 с., 35 рис., 6 таблиць, 16
використаних джерел, 4 додатки.
Актуальність теми. Розвиток ринкових відносин та вдосконалення
інформаційних технологій сьогодення спричинили появу багатьох нових видів
бізнесу, одним з яких є Інтернет-торгівля. Особливого значення вона набуває в
період нестабільної ситуації в Україні, адже дозволяє працювати на віртуальному
ринку, що значною мірою знижує витрати підприємств малого бізнесу, дає змогу
істотно і швидко розширити коло потенційних клієнтів.
Тема дослідження є досить актуальною, оскільки щоденно в різних регіонах
країни зростає попит на придбання електронної техніки. Це обумовлено
покращенням процесу пошуку та підбору бажаної продукції, що не призводить до
втрати часу та довіри адміністраторів порталів, а представить зручний вибір
пропозицій під бажані потреби користувачів.
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи
бакалавра є проектування та створення онлайн сервісу з продажу електронної
техніки, який збільшить зручність продажу продукту для потенційного клієнта.
Для досягнення поставленої мети в роботі розв’язуються наступні завдання:
– провести аналіз сайтів аналогів;
– дослідження процесів організації інтернет торгівлі;
– провести аналіз основних вимог до створення онлайн сервісу з продажу
електронної техніки;
– обрати та налаштувати інструменти реалізації;
– розробити концепцію, дизайн та програмну реалізацію.
Об’єкт дослідження: процес електронної комерції.
Предмет дослідження: онлайн сервіс з продажу електронної техніки.
Методи дослідження. У роботі застосовувалися:
– теоретичний метод (аналіз літератури з проблеми дослідження);
4
– емпіричний – полягав у спостереженні систем та налаштуванні сервісу з
продажу електронної техніки;
– порівняльний – для здійснення порівнянь сервісів з продажу електронної
техніки.
Апробація результатів роботи. Основні положення і результати
кваліфікаційної роботи бакалавра доповідалися і були обговорені на студентській
науково-практичній конференції ЧДТУ (Черкаси, 2022).
Публікації. Результати кваліфікаційної роботи бакалавра опубліковані у
збірнику тез доповідей ЧДТУ: Ковтун С. С., Оксамитна Л. П. Проектування та
створення онлайн сервісу з продажу електронної техніки : Збірник тез доповідей
студентської науково-практичної конференції ЧДТУ : 19-22 квітня 2022 /
[упорядник Мельник І.В.]; Міністерство освіти і науки України, Черкаський
державний технологічний ун-т. Черкаси : ЧДТУ, 2022. С. 65-66.
Перелік ключових слів: ІНФОРМАЦІЙНІ ТЕХНОЛОГІЇ, ЕЛЕКТРОННА
ТЕХНІКА, ІНТЕРНЕТ МАГАЗИН, JAVA, HTML, CSS, SPRING.
ABSTRACT
Master’s work contains. 90 pages, 35 figures, 6 tables, 16 sources used, 4
attachments.
Actuality of theme. The development of market relations and the improvement of
information technology today have led to the emergence of many new types of business,
one of which is Internet commerce. It is especially important during the unstable situation
in Ukraine, because it allows you to work in the virtual market, which significantly
reduces the costs of small businesses, allows you to significantly and quickly expand the
range of potential customers.
The topic of the study is quite relevant, as the demand for the purchase of electronic
equipment is growing daily in different regions of the country. This is due to the
improvement of the process of finding and selecting the desired products, which does not
waste time and trust of portal administrators, but will provide a convenient choice of
proposals for the desired needs of users.
5
Purpose and tasks of the research.
The purpose of the bachelor's qualification work is to design and create an online
service for the sale of electronic equipment, which will increase the visibility of the
product for potential customers.
To achieve this goal, the following tasks are solved in the work:
– to analyze existing analogues;
– study of the processes of organization of Internet trade;
– to analyze the basic requirements for the creation of a service for the sale of
electronic equipment;
– select and configure implementation tools;
– develop a concept, design and software implementation.
The object of research: e-commerce process.
The subject of research: online service for the sale of electronic equipment.
Research methods:
– theoretical method (analysis of the literature on the research problem);
– empirical - was to monitor systems and set up a service for the sale of electronic
equipment;
– comparative - to make comparisons of services for the sale of electronic equipment.
Approval of the results of work. The main provisions and results of the bachelor's
qualification work were reported and discussed at the student scientific-practical
conference of CHDTU (Cherkasy, 2022).
Publications. The results of the high-quality robotics of the master are published
in the book of abstracts of the student scientific-practical conference of the ChDTU:
Kovtun S. S., Oksamytna L. P. Design and creation Design and creation of an online
service for the sale of electronic equipment: Abstracts of the student scientific and
practical conferences of the ChDTU, 19-22 April 2022 Cherkasy : ChDTU, 2022 /
[compiler Melnyk IV]; Ministry of Education and Science of Ukraine, Cherkasy State
Technological University Cherkasy: ChDTU, 2022. P. 65-66.
The list of keywords: INFORMATION TECHNOLOGIES, ELECTRONIC
EQUIPMENT, ONLINE STORE, JAVA, HTML, CSS, SPRING.
6
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ .... 8
ВСТУП .............................................................................................................................. 9
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ ....................................................... 11
1.1 Аналіз предметної області .................................................................................. 11
1.2 Огляд існуючих рішень ...................................................................................... 12
1.2.1 Аналіз сайту інтернет магазину «Moyo». ................................................ 12
1.2.2 Аналіз сайту інтернет магазину «Foxtrot».. ............................................. 14
1.2.3 Аналіз сайту інтернет магазину «Stylus».. ............................................... 16
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій .......................... 17
1.4 Визначення технічних вимог до системи кінцевого користувача ................. 19
1.5 Визначення вимог до онлайн сервісу з продажу електронної техніки .......... 20
Висновки до розділу 1 ............................................................................................... 20
2 ПРОЕКТУВАННЯ ТА МОДЕЛЮВАННЯ ОНЛАЙН СЕРВІСУ З ПРОДАЖУ
ЕЛЕКТРОННОЇ ТЕХНІКИ ........................................................................................... 21
2.1 Обґрунтування вибору сучасних технологій веб-програмування для
створення онлайн сервісу з продажу електронної техніки .................................... 21
2.1.1 Мова розмітки HTML. ............................................................................... 21
2.1.2 Спеціальна мова стилю сторінок CSS. ..................................................... 22
2.1.3 Мова програмування Java. ......................................................................... 23
2.1.4 Мова програмування JavaScript.. .............................................................. 24
2.1.5 Система керування базами даних PostgreSQL. ....................................... 24
2.2 Проектування структури бази даних ................................................................. 25
2.3 Опис процесу проектування онлайн сервісу «Snap Electronics» з продажу
електронної техніки ................................................................................................... 27
2.3.1 Проектування інтерфейсу користувача.. .................................................. 30
Висновки до розділу 2 ............................................................................................... 34
3 ПРОГРАМНА РЕАЛІЗАЦІЯ ................................................................................. 36
7
3.1 Архітектура онлайн сервісу ............................................................................... 36
3.2 Програмна реалізація онлайн сервісу ............................................................... 36
3.3 Тестування та огляд онлайн сервісу .................................................................. 42
3.3.1Особливості тестування веб-орієнтованого програмного забезпечення.. 42
Висновки до розділу 3 ............................................................................................... 48
ВИСНОВКИ ................................................................................................................... 49
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ..................................................................... 50
ДОДАТОК А .................................................................................................................. 51
ДОДАТОК Б ................................................................................................................... 53
ДОДАТОК В .................................................................................................................. 79
ДОДАТОК Г ................................................................................................................... 88
8
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І
ТЕРМІНІВ
БД – база даних;
ПЗ – програмне забезпечення;
SQL (Structured Query Language) – структуризована мова запитів;
HTML – HyperText Markup Language;
CSS – Cascading Style Sheets.
9
ВСТУП
Початок 21 століття розглядається як інформаційна революція технології.
Спочатку інтернет був лише для наукового, військового і академічного
використання. Однак, оскільки інформація та спілкування через інтернет виходить
за географічні межі, люди отримують доступ практично до всієї інформації та
ресурсів в інтернеті, і це звичайне явище у наш час побачити людей, які читають,
навчаються, спілкуються та роблять покупки в інтернеті. Таким чином,
далекоглядні підприємці побачили безмежний потенціал у веденні бізнесу в цьому
середовищі без кордонів. Так почалась нова тенденція створення підприємництва:
відкриття електронного бізнесу, який веде бізнес за допомогою електронних
посередників, зокрема Інтернету.
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи
бакалавра є проектування та створення онлайн сервісу з продажу електронної
техніки, який збільшить зручність продажу продукту для потенційного клієнта.
Додатково метою цього проекту є створення веб-сайту, який можна регулярно
оновлювати працівниками магазину, які мають мало або зовсім не мають технічних
навичок програмування. Тобто, можливість оновлення асортименту сервісу з
панелі адміністратора безпосередньо в самому сервісі.
Для досягнення поставленої мети в роботі розв’язуються наступні завдання:
– провести аналіз сайтів аналогів;
– дослідження процесів організації інтернет торгівлі;
– провести аналіз основних вимог до створення онлайн сервісу з продажу
електронної техніки;
– обрати та налаштувати інструменти реалізації;
– розробити концепцію, дизайн та програмну реалізацію.
Об’єктом дослідження є процес електронної комерції.
Предметом дослідження є онлайн сервіс з продажу електронної техніки.
Методи дослідження.
10
Для вирішення поставлених завдань були застосовані наступні методи
дослідження:
– теоретичний (аналіз літератури з проблеми дослідження);
– емпіричний – полягав у спостереженні систем та налаштуванні сервісу з
продажу електронної техніки;
– порівняльний – для здійснення порівнянь сервісів з продажу електронної
техніки.
Для створення програмного забезпечення використано новітні технології, а
саме: Java, Spring Framework, HTML, CSS, JavaScript і база даних PostgreSQL.
Обрані технології задовольняють всім функціональним і не функціональним
вимогам до такого типу програмного забезпечення (ПЗ).
11
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Аналіз предметної області
Електронна комерція – це сучасний спосіб ведення бізнесу, в якому
здійснюється купівля-продаж товарів і послуг здійснюється через електронні
канали, переважно в Інтернеті.
Електронна комерція стала однією з найважливіших частин бізнесу,
більшість компаній використовують або намагаються впровадити електронну
комерцію у свій бізнес скрізь, де це можливо.
Електронна комерція є типом бізнес-моделі або частиною більшої бізнес-
модель, за якої бізнес здійснюється через електронну мережу, наприклад Інтернет.
Електронна комерція стала дуже популярною бізнес-моделлю тому, що це
допомагає легко створювати, керувати та розвивати бізнес за рахунок скорочення
необхідності фізичного створення компанії. Це дозволяє вести бізнес 24 години на
добу без будь-яких географічних обмежень. Це знижує експлуатаційні витрати, а
також покращує якість послуг. Електронна комерція дозволяє клієнтам легко
порівнювати, вибирати та купувати продукти та послуги різних постачальників зі
свого дому.
Поряд із перевагами електронна комерція має ряд недоліків. Будь-хто може
легко розпочати свій бізнес з меншими ресурсами, використовуючи електронну
комерцію було створено багато шахрайських компаній, які обманюють клієнтів.
Бізнес електронної комерції має високий ризик від хакерів, а також йому не
вистачає лояльності клієнтів.
Разом із розвитком Інтернету також розвивається ринок електронної
комерції, зростаючи з кожним роком, що можна побачити зі статистики (рис. 1.1).
12
Рисунок 1.1 – Графік розвитку електронної комерції
1.2 Огляд існуючих рішень
Для того, щоб визначитися з тим, як саме буде виглядати онлайн сервіс з
продажу електронної техніки, необхідно вивчити існуючі аналоги. Для аналізу
було обрано декілька сайтів інтернет магазинів зі схожою тематикою і
призначенням, детальний аналіз яких представлено далі.
1.2.1 Аналіз сайту інтернет магазину «Moyo». Першим розглянемо сайт
«Moyo», проаналізувавши його дизайн та функціонал [1]. Сайт «Moyo»
знаходиться за адресою: https://www.moyo.ua. Проаналізуємо його недоліки та
переваги.
Переваги:
– зручність використання;
– гарний дизайн;
– впорядкованість контенту;
13
– велика інформативність.
Недоліки:
– погана оптимізація;
– реклама
– не реалізований перегляд з різних пристроїв;
– одна кольорова гама.
Головна сторінка сайту «Moyo» представлена на рис. 1.2.
Рисунок 1.2 – Головна сторінка сайту «Moyo»
Основний акцент головної сторінки сайту «Moyo» зроблено на панелі з
новими товарами та товарими на які є знижки. Для роботи із сайтом потрібно
обов'язково пройти реєстрацію, після чого виконати авторизацію.
Сайту притаманні відмінна технічна підтримка та добре продумане меню.
Працювати з таким сайтом досить приємно, але іноді спостерігається сильна
завантаженість, через що ресурс відверто гальмує. Не дивлячись на певні недоліки
сайту, він вважається одним з найкращих сайтів з продажу.
На рис. 1.3 представлено загальний вигляд сторінки товару.
14
Рисунок 1.3 – Загальний вигляд сторінки товару
1.2.2 Аналіз сайту інтернет магазину «Foxtrot». Другим в роботі
проаналізовано сайт інтернет магазину «Foxtrot» [2]. Сайт «Foxtrot» знаходиться за
адресою: https://www.foxtrot.com.ua. Проаналізуємо його недоліки та переваги.
Переваги:
– гарна оптимізація;
– зручний інтерфейс;
– можливість зворотного зв’язку.
Недоліки:
– мала інформативність;
– реклама;
– не реалізований перегляд з різних пристроїв.
Головна сторінка сайту «Foxtrot» представлена на рис. 1.4.
Об’єктивно, що сайт «Foxtrot» це найкращий ресурс з продажу електронної
техніки. Приємно вражає користувача гама кольорів, розгорнутий каталог товарів
сайту.
15
Рисунок 1.4 – Головна сторінка сайту «Foxtrot»
На рис. 1.5 представлено загальний вигляд сторінки товару сайту «Foxtrot».
Варто відмітити, що дуже високо користувачі оцінили систему фільтрації
пошуку товару на сайті, де є близько 120 різних параметрів і критеріїв. Служба
підтримки працює чудово, є телефонні помічники, а також онлайн консультанти з
продажу електронної техніки. Безумовно, з цього сайту є дещо, що можна
використати для власної розробки онлайн сервісу з продажу електронної техніки.
Рисунок 1.5 – Загальний вигляд сторінки товару
16
1.2.3 Аналіз сайту інтернет магазину «Stylus». Останнім в кваліфікаційні
роботі бакалавра проаналізовано сайт інтернет магазину «Stylus» [3]. Сайт «Stylus»
знаходиться за адресою: https://stylus.ua. Проаналізуємо дизайн та функціонал
цього сайту.
Переваги:
– хороша оптимізація;
– зручний інтерфейс;
– впорядкованість контенту;
– гарний дизайн.
Недоліки:
– мала інформативність;
– реклама.
Головна сторінка сайту «Stylus» представлена на рис. 1.6.
Рисунок 1.6 – Головна сторінка сайту «Stylus»
На головній сторінці сайту є:
− футер, в якому міститься рядок пошуку товарів, корзина, список бажаного,
та декілька посилань на інформаційні сторінки з акціями;
− велике рекламне фото з посиланням на акційний продукт;
− каталог товарів, який розбивається на інші підкатегорії.
17
Сайт «Stylus» є досить популярним. Він пропонує близько 250 тисяч
оголошень та дозволяє шукати бажану електронну техніку.
На рис. 1.7 представлено загальний вигляд сторінки товару сайту «Stylus».
Рисунок 1.7 – Загальний вигляд сторінки товару
Сайт «Stylus» виглядає зовсім просто, в тому числі забезпечує комфортну
навігацію. Приємним враженням є те, що навіть не заважає нав'язлива реклама –
проста, але зі смаком.
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій
У таблиці 1.1 представлено порівняльний аналіз розглянутих сайтів, а саме:
«Moyo», «Foxtrot», «Stylus».
У якості критеріїв для порівняння було обрано такі критерії:
− дизайн;
− швидкість завантаження;
− зручність замовлення;
− інформативність товару;
− можливість задати питання онлайн;
− можливість відслідковувати вартість електронної техніки;
− наявність новин та відгуків про сайт.
18
Таблиця 1.1 – Таблиця порівнянь існуючих рішень розглянутих реалізацій
Критерії Назва сайту
порівняння
«Moyo» «Foxtrot» «Stylus»
сайтів
Дизайн
5 2 3
(0-5)
Швидкість
завантаження 4 3 4
(0-5)
Зручність
замовлення 4 5 4
(0-5)
Інформативність
5 2 3
товару(0-5)
Можливість
задати питання + + –
онлайн
Наявність
новин та + – –
відгуків про сайт
Підсумовуючи перегляд та оцінку приведених вище сайтів, варто зазначити,
що всі вони мають наступні характеристики: це є сайт, який містить в собі
стандартні функції з пошуку та підбору електронної техніки. Кожен користувач має
можливість швидко знайти бажаний товар, який задовольняє його вимоги. Також
існує можливість якісно та кількісно оцінити окремі товари з електронної техніки.
Варто зауважити, що інтерфейс деяких з них не завжди є інтуїтивно зрозумілим та
доступним новачку, з непривабливою гамою кольорів.
Проаналізувавши існуючі рішення розглянутих реалізацій, в кваліфікаційній
роботі бакалавра при розробці онлайн сервісу «Snap Electronics» з продажу
електронної техніки пропонується звернути увагу на такі моменти:
19
– онлайн сервіс «Snap Electronics» повинен мати зручний, зрозумілий та
приємний інтерфейс;
– онлайн сервіс «Snap Electronics» повинен мати швидкість завантаження серед
оцінок (0-5), а саме: 4;
– онлайн сервіс «Snap Electronics» передбачено можливість відслідковувати
вартість товару.
1.4 Визначення технічних вимог до системи кінцевого користувача
Системні вимоги – стале поняття, яке використовується для опису
характеристик, яким повинен відповідати цифровий пристрій (ПК, гральна
консоль, мобільний телефон тощо) для коректної роботи певного програмного
забезпечення. Ці вимоги можуть описувати, як апаратне забезпечення, так і
програмне забезпечення (необхідні драйвери, операційна система тощо).
Розрізняють мінімальні та рекомендовані системні вимоги. Якщо мінімальні
системні вимоги показують, яка конфігурація системи цілковито необхідна для
запуску ПЗ, то рекомендовані системні вимоги показують, яка конфігурація
здатна забезпечити максимально комфортні умови роботи ПЗ. Також інколи
виділяють максимальні системні вимоги, при яких забезпечується повна
функціональність і можливість користуватись усіма послугами потрібної
програми.
Мінімальні системні вимоги для роботи онлайн сервісу:
− операційна система: Windows 200/XP/Windows Vista/Windows 7 (з останнім
пакетом оновлень);
− процесор: Двоядерний Intel Celeron 1037U (1.8 ГГц);
− об'єм оперативної пам’яті: 1-2 ГБ;
− тип пам'яті: DDR3;
− тип відео карти та об’єм відеопам’яті: Інтегрована, Intel HD Graphics;
− материнська плата :Intel NM70;
− об’єм HDD: 250 ГБ.
20
1.5 Визначення вимог до онлайн сервісу з продажу електронної
техніки
Основною метою розробки кваліфікаційної роботи бакалавра є концепція
єдності, щоб вся необхідна для роботи інформація зберігалася на єдиному веб-
сервісі. Онлайн сервіс «Snap Electronics» з продажу електронної техніки повинен
бути кросбраузерним та не вимогливим до системних ресурсів. Його інтерфейс має
бути мінімалістичним, сучасним та інтуїтивно зрозумілим.
В таблиці 1.2 представлено перелік мінімальних версій браузерів, які має
підтримувати розроблений сервіс.
Таблиця 1.2 – Перелік мінімальних версій браузерів, яких має підтримувати сервіс
Браузери Мінімальні версії
Chrome 49+
Firefox 52+
В онлайн сервісі «Snap Electronics» з продажу електронної потрібно
реалізувати наступні функції:
− можливість реєстрації облікового запису;
− можливість входу до облікового запису;
− пошук оголошень за параметрами;
− додавання нових оголошень;
− детальний опис товару та його виробника;
− зворотний зв’язок;
− дані про стан електронної техніки;
− додавання новин порталу.
Висновки до розділу 1
В даному розділі виконано порівняльний аналіз аналогів з продажу
електронної техніки: «Moyo», «Foxtrot», «Stylus». Представлено таблицю
порівнянь існуючих рішень розглянутих реалізацій. Визначено технічні вимоги до
системи кінцевого користувача.
21
2 ПРОЕКТУВАННЯ ТА МОДЕЛЮВАННЯ ОНЛАЙН СЕРВІСУ З
ПРОДАЖУ ЕЛЕКТРОННОЇ ТЕХНІКИ
2.1 Обґрунтування вибору сучасних технологій веб-програмування
для створення онлайн сервісу з продажу електронної техніки
Для створення онлайн сервісу «Snap Electronics» з продажу електронної
техніки, в кваліфікаційній роботі бакалавра використано такі засоби:
− HTML, CSS;
− backend мова програмування: Java;
− spring framework для розширення можливостей Java;
− frontend мова програмування: JavaScript;
− система управління базою даних PostgreSQL.
Опишемо обґрунтованість даного вибору.
2.1.1 Мова розмітки HTML. HTML (походить від англ. HyperText Markup
Language − мова розмітки гіпертексту) − стандартна мова розмітки веб-сторінок.
Документ HTML оброблюється браузером та відтворюється на екрані у звичному
для людини вигляді. HTML надає засоби для [4]:
− створення структурованого документу шляхом позначення структурного
складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;
− створення зв’язків між веб-сторінками через гіперпосилання;
− створення інтерактивних форм;
− включення зображень, звуку, відео та ін. Розмітка HTML Весь контент
описується з використанням спеціальних правил – правил розмітки. Розмітка в
HTML складається з чотирьох основних компонентів [4]:
− елементів;
− базових типів даних (визначають тип вмісту атрибутів: символьні дані, числа
та ін.);
− символьних мнемонік;
− декларації типу документа (оголошує версію HTML).
22
2.1.2 Спеціальна мова стилю сторінок CSS. CSS − спеціальна мова, що
використовується для опису зовнішнього вигляду сторінок, написаних мовами
розмітки даних [4].
Найчастіше CSS використовують для візуальної презентації сторінок,
написаних HTML та XHTML, але формат CSS може застосовуватися до інших
видів XML-документів.
Специфікації CSS були створені та розвиваються Консорціумом Всесвітньої
мережі [4].
CSS має різні рівні та профілі. Наступний рівень CSS створюється на основі
попередніх, додаючи нову функціональність або розширюючи вже наявні функції.
Рівні позначаються як CSS1, CSS2 та CSS3. Профілі − сукупність правил CSS
одного або більше рівнів, створені для окремих типів пристроїв або інтерфейсів.
Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо [4].
CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-
сторінок. Головна перевага блочної верстки − розділення змісту сторінки (даних)
та їхньої візуальної презентації.
CSS використовується авторами та відвідувачами веб-сторінок, щоб
визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки. Одна з
головних переваг − можливість розділити зміст сторінки (або контент, наповнення,
зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що
описується в CSS).
Таке розділення може покращити сприйняття та доступність контенту,
забезпечити більшу гнучкість та контроль за відображенням контенту в різних
умовах, зробити контент більш структурованим та простим, прибрати повтори
тощо. CSS також дозволяє адаптувати контент до різних умов відображення (на
екрані монітора, мобільного пристрою (КПК), у роздрукованому вигляді, на екрані
телевізора, пристроях з підтримкою шрифту Брайля або голосових браузерах [4].
Один і той самий HTML або XML документ може бути відображений по-
різному залежно від використаного CSS. Стилі для відображення сторінки можуть
бути [4]:
23
Стилі автора (інформація надана автором сторінки):
− зовнішні таблиці стилів (англ. stylesheet), найчастіше окремий файл або
файли .css;
− внутрішні таблиці стилів, включені як частина документу або блоку;
− стилі для окремого елементу.
Стилі користувача:
− локальний .css-файл, вказаний користувачем для використання на сторінках
і вказаний в налаштуваннях браузера (наприклад Opera).
Стилі переглядача (браузера):
− стандартний стиль переглядача, наприклад стандартні стилі для елементів,
визначені браузером, використовуються коли немає інформації про стиль елемента
або вона неповна.
Стандарт CSS визначає порядок та діапазон застосування стилів, тобто, в якій
послідовності і для яких елементів застосовуються стилі. Таким чином,
використовується принцип каскадності, коли для елементів вказується лише та
інформація про стилі, що змінилася або не визначена загальнішими стилями.
2.1.3 Мова програмування Java. Java − це обєктно–орієнтована мова
програмування, розроблена Джеймсом Ослингом і запущена в 1995 році в якості
одного із ключових компонентів платформи java Sun Microsystems.
Cинтаксис мови взятий в більшості з мови програмування С++ і С, про те java
має більш простішу обєктивну модель і більш низький рівень обєктів. Java –
додатки як правило трансліровані в байт–код (довжина кожного коду операції −
один байт). Який може бути оброблений любою віртуальною машиною Java (Java
Virtual Mashine. JVM) незалежно від компютерної архітектури.
Принципи мови Java [5]:
Розробляючи мову, спеціалісти керувались п’ятьма завданнями, які були
перетворені в наступні принципи.
− простота в використанні, обєктна орієнтованість і легкість вивчення;
− надійність і безпечність;
− незалежність від архітектури;
24
− можливість інтерпретації;
− інтерактивність і динамічність.
2.1.4 Мова програмування JavaScript. JavaScript – динамічна, об'єктно-
орієнтована прототипна мова програмування. Реалізація стандарту ECMAScript.
Найчастіше використовується для створення сценаріїв веб-сторінок, що надає
можливість на стороні клієнта (пристрої кінцевого користувача) взаємодіяти з
користувачем, керувати браузером, асинхронно обмінюватися даними з сервером,
змінювати структуру та зовнішній вигляд веб-сторінки [5].
JavaScript класифікують як прототипну (підмножина об'єктно-орієнтованої),
скриптову мову програмування з динамічною типізацією. Окрім прототипної,
JavaScript також частково підтримує інші парадигми програмування (імперативну
та частково функціональну) і деякі відповідні архітектурні властивості, зокрема:
динамічна та слабка типізація, автоматичне керування пам'яттю, прототипне
наслідування, функції як об'єкти першого класу.
Мова JavaScript використовується для [5]:
− написання сценаріїв веб-сторінок для надання їм інтерактивності;
− створення односторінкових веб-застосунків (React, AngularJS, Vue.js);
− програмування на стороні сервера (Node.js);
− стаціонарних застосунків (Electron, NW.js);
− мобільних застосунків (React Native, Cordova);
− сценаріїв в прикладному ПЗ (наприклад, в програмах зі складу Adobe Creative
Suite чи Apache JMeter);
− всередині PDF-документів тощо.
2.1.5 Система керування базами даних PostgreSQL. PostgreSQL (також
відомий як Postgres) – це RDBMS з відкритим кодом (поширюється безкоштовно),
що наголошує на дотриманні технічних стандартів та гнучкість даних. PostgreSQL
поширюється з вільною / безкоштовною ліцензією, так що її можна
використовувати, змінювати та поширювати серед населення вільно / безкоштовно
для особистих, комерційних чи академічних цілей [6].
25
PostgreSQL призначений для обробки робочих навантажень даних з машини
до веб-сервісу, до якого багато людей отримують доступ одночасно. PostgreSQL –
це система управління базами даних, яка покликана добре працювати в системах
MacOS Server розвиток це стосується і платформи Linux,FreeBSD, OpenBSD та 32-
розрядні та 64-розрядні Windows аж до версії 10. PostgreSQL. Крім того, виходячи
з версії PostgreSQL 11 розроблялася лише для 64-бітних платформ MacOS та
Windows 64-біт.
2.2 Проектування структури бази даних
Під час розробки онлайн сервісу «Snap Electronics» було створено такі
таблиці: address, product, brand, cart_item, category, payment, role, shipping, user, user
_order, user _role (рис. 2.1).
Рисунок 2.1 – Структура бази даних
У наступних таблицях буде детально описано структуру, вміст та відношення
з іншими таблицями для основних таблиць, зображених на рис. 2.1.
У табл. 2.1 містяться дані про таблицю Товари (product), а саме: інформація
про поля таблиці, їх тип, опис цільового призначення та обмеження. В ній
зберігаються посилання на фото продукту, ціна продукту, кількість одиниць на
26
складі та його назва. Ця таблиця має відношення Many to One з таблицею Виробник
(brand), Товар в корзині (cart_item), Категорія (category).
Таблиця 2.1 – Товари (product)
Властивість Тип Розмірність Ідентифікатор
id serial - id
посилання на фото varchar 55 picture
ціна продукту double - price
кількість продукту int - stock
назва продукту varchar 55 title
У табл. 2.2. містяться дані про таблицю Виробник (brand), а саме: інформація
про поля таблиці, їх тип, опис цільового призначення та обмеження. В ній
зберігаються назва виробника та посилання на продукт цього виробника. Ця
таблиця має відношення One to Many з таблицею Товари (product).
Таблиця 2.2 – Виробник (brand)
Властивість Тип Розмірність Ідентифікатор
id serial - id
назва varchar 55 name
id продукту int - product_id
У табл. 2.3 містяться дані про таблицю Користувач (user), а саме: інформація
про поля таблиці, їх тип, опис цільового призначення та обмеження. В ній
зберігаються: пошта, ім’я та прізвище, пароль, ім’я користувача та посилання на
адресу. Ця таблиця має відношення Many to One з таблицею roles (Ролі) та
відношення One to One з таблицею Адреса (address).
Таблиця 2.3 – Користувач (user)
Властивість Тип Розмірність Ідентифікатор
id serial - id
пошта varchar 255 email
ім’я varchar 255 first_name
прізвище varchar 255 last_name
27
пароль varchar 255 pass
ім’я користувача varchar 255 username
посилання на адресу int - address_id
У табл. 2.4 містяться дані про таблицю Ролі (role), а саме: інформація про
поля таблиці, їх тип, опис цільового призначення та обмеження. В ній зберігаються
загальні дані роль користувача. В онлайн сервісі буде всього дві ролі: адміністратор
та користувач.
Таблиця 2.4 – Ролі (role)
Властивість Тип Розмірність Ідентифікатор
id serial - id
id ролі int - role_id
id користувача int - user_id
2.3 Опис процесу проектування онлайн сервісу «Snap Electronics» з
продажу електронної техніки
Файлова структура проекту складається з: бібліотек, які необхідні для
роботи онлайн сервісу; файлів які відповідають за підключення всіх необхідних
бібліотек та файлів. Також головним місцем, в якому і відбувається саме
кодування, є сторінки сервісу, що несуть інформаційну функціональність та
взаємодіють з користувачем.
Проект складається з наступних каталогів:
− ..idea, build, out: каталоги, які створює середовище розробки IntelliJ IDEA. В
цих каталогах містяться файли необхідні для функціонування IntelliJ IDEA, та наш
збудований додаток який можна буде запустити на будь-якому сервері, який має
необхідний інструментарій для роботи додатку;
− gradle, .gradle:каталоги, які створює Gradle для підтримки функціоналу цього
інструментарію. Всі сучасні проекти джава використовують інструменти
автоматизації збірки.
28
Файлова структура проекту представлена на рис. 2.2.
Рисунок 2.2 – Файлова структура проекту
Для пояснення функціоналу окремих частин проекту доцільно представити
архітектуру розроблюваного онлайн сервісу «Snap Electronics» з продажу
електронної техніки (рис. 2.3).
Бек-енд частина сервісу розроблена з використанням джава, так як джава
одна з найкращих та найпопулярніших мов програмування на сьогоднішній день.
Звичайно в сучасні дні не можна уявити додаток джава який би не використовував
29
величезний доступний інструментарій який було створено за більш ніж 20 років її
розвитку.
Рисунок 2.3 – Архітектура онлайн сервісу з продажу електронної техніки «Snap
Electronics»
В цьому проекті використано java 17 версії, це одна з останніх версій і вона
буде підтримуватись до 2030 року. Для спрощення роботи з даними був
використаний Spring Framework який дозволяє інжектити дані в потрібні класи
лише з допомогою декількох анотацій. Spring Boot спрощує початкову розробку
додатку за рахунок самостійної конфігурації розроблюваного додатку. Spring Data
яка спрощує роботу з базами даних.
Самим завданням бек-енд частини було отримання даних які приходять з
фронт-енду, їх обробка та зберігання в базу даних. Бек-енд частина також надсилає
дані на фронт-енд у відповідь на запити які йдуть з браузеру.
Фрон-енд частина додатку розроблена з використанням HTML, CSS та
JavaScript. Дані на фронтенд частину передаються за допомогою фреймворку
30
ThymeLeaf, який дозволяє працювати з даними джава безпосередньо на html
сторінках.
Завданням фронт-енд частини є робота з безпосереднім користувачем
сервісу, тобто користувач повинен зайти на сторінку додатку й зрозуміти як з ним
працювати, бачити дані з якими він може взаємодіяти без додаткових пояснень.
2.3.1 Проектування інтерфейсу користувача. В рамках кваліфікаційної
роботи бакалавра стояло завдання розробити мокапи сторінок таким чином, щоб
працювати з онлайн сервісом було зручно, зрозуміло та легко, як клієнту, так і
адміністратору.
Макети основних сторінок розроблюваного сервісу зображені на рисунках
нижче (рис. 2.4-2.6).
Рисунок 2.4 – Макет головної сторінки онлайн сервісу «Snap Electronics»
31
Рисунок 2.5 – Макет сторінки товарів онлайн сервісу «Snap Electronics»
Рисунок 2.6 – Макет сторінки реєстрації онлайн сервісу «Snap Electronics»
2.3.2 Проектування процесу роботи онлайн сервісу з продажу
електронної техніки «Snap Electronics». Завжди початковим етапом створення
сайту є вивчення, аналіз та моделювання діяльності замовника для можливого
поліпшення і оптимальних методів роботи, які будуть реалізовані в створюваному
додатку. Для цього доцільно скористатися можливостями засобу AllFusion Process
Modeler (BPwin).
32
AllFusion Process Modeler (раніше BPwin) – інструмент, призначений для
моделювання, аналізу, документування та оптимізації бізнес-процесів і має
достатньо простий та інтуїтивно зрозумілий інтерфейс користувача, що дає
можливість аналітикові створювати складні моделі при мінімальних зусиллях. Він
призначений для побудови контекстної діаграми бізнес-процесу з метою
полегшення праці і збільшення продуктивності системного аналітика на першому
етапі розробки системи [7, 8].
У процесі аналізу предметної області складено контекстні діаграми моделі у
стандарті IDEF0 засобами AllFusion Process Modeler (рис. 2.7-2.10).
Модель визначає основну функцію інтернет магазину – функцію продажу
товарів через інтернет.
Контекстна діаграма функціональної моделі «Робота магазину» зображена на
рис. 2.7.
Рисунок 2.7 – Контекстна діаграма моделі «Робота магазину»
Вихідний потік один – це «Оброблене замовлення».
Керуючих потік один – це «Правила використання».
«Правила використання» – це правила корпоративної етики певного
інтернет-магазину.
33
Для процесу «Робота магазину» можна вказати такі вхідні потоки:
− дані користувача;
− запити користувача.
Декомпозиція контекстної діаграми «Робота магазину» зображена на рис. 2.8.
Рисунок 2.8 – Декомпозиція контекстної діаграми «Робота магазину»
На другому рівні декомпозиції процес «Робота магазину» поділяється на 3
підпроцеси:
− реєстрація користувача;
− додавання товарів в корзину;
− підтвердження замовлення.
Процес «Реєстрація користувача» (рис. 2.9) декомпозується на 3 підпроцеси:
− запит даних користувача;
− перевірка користувача за базою даних;
− внесення користувача до бази.
Процес «Додавання товарів у корзину» (рис. 2.10) декомпозується на 2
підпроцеси:
− перевірка присутності товару на складі;
− відправлення даних про товар у кошик. Цей процес елементарний.
34
Рисунок 2.9 – Декомпозиція контекстної діаграми «Реєстрація користувача»
Рисунок 2.10 – Декомпозиція контекстної діаграми «Додавання товару в корзину»
Висновки до розділу 2
В цьому розділі представлений опис функціонального програмного
середовища та обґрунтовано вибір сучасних технологій веб-програмування для
проектування і розробки онлайн сервісу «Snap Electronics» з продажу електронної
техніки.
35
Описано предметну область та представлено онлайн сервіс «Snap Electronics»
за допомогою засобу моделювання AllFusion Process Modeler. Створено базу даних,
структуру та представлено головну сторінку онлайн сервісу з продажу електронної
техніки.
36
3 ПРОГРАМНА РЕАЛІЗАЦІЯ
3.1 Архітектура онлайн сервісу
Онлайн сервіс буде складатись з двох частин, а саме: адміністративної і
користувацької.
Адміністративна частина сервісу надає можливість додавання, редагування
та видалення вмісту статичних, динамічних сторінок, розділів і блоків сервісу.
Користувацький інтерфейс сервісу повинен бути зрозумілим, інтуїтивно
представляти структуру розміщеної на ньому інформації та швидко й логічно
переходити до розділів та сторінок.
В онлайн сервісі повинні бути такі розділи:
− головна сторінка;
− сторінка з товарами;
− сторінка з авторизацією/реєстрацією;
− сторінки окремих товарів;
− корзина;
− сторінка адміністратора для додавання/редагування товарів;
− сторінка з інформацією користувача.
3.2 Програмна реалізація онлайн сервісу
В кваліфікаційній роботі бакалавра для візуального відображення
використовуються: мова розмітки гіпертексту HTML, каскадні таблиці стилів CSS
та JavaScript.
Розглянемо його головну сторінку. На початку сторінки знаходиться
привітання користувача (рис. 3.1).
37
Рисунок 3.1 – Головна сторінка онлайн сервісу «Snap Electronics»
В додатку Б представлено коди всіх сторінок.
Якщо прогорнути вниз, то буде показано рекомендовані товари та футер
онлайн сервісу з даними про магазин (рис. 3.2).
Рисунок 3.2 – Головна сторінка онлайн сервісу «Snap Electronics»
Сторінка з товарами представлена на рис. 3.3. На цій сторінці існує
можливість вибрати продукти по категорії та виробнику, або знайти по назві. Також
є можливість сортування по ціні або по часу додавання товару (рис. 3.4).
38
Рисунок 3.3 – Сторінка з товарами
Рисунок 3.4 – Сторінка з товарами
Для додавання товару в кошик потрібно пройти реєстрацію або увійти в уже
існуючий аккаунт (рис. 3.5).
39
Рисунок 3.5 – Сторінка реєстрації та авторизації
Після авторизації в онлайн сервісі зберігається інформація про користувача,
яку він може переглянути та відредагувати (рис. 3.6).
Рисунок 3.6 – Сторінка з інформацією користувача
40
Сторінка продукту, на якій є можливість додавання товару в корзину,
зображена на рис. 3.7.
Рисунок 3.7 – Сторінка товару
Після додавання продукту в корзину можна переглянути всі обрані товари на
сторінки корзини, а також загальну суму вартості товарів в корзині (рис. 3.8).
Рисунок 3.8 – Сторінка «Корзина»
41
Після натискання кнопки підтведження покупки, користувача перенаправить
на сторінку підтвердження замовлення. На цій сторінці потрібно буде ввести більш
детальні дані щодо замовлення (рис. 3 .9).
Рисунок 3.9 – Сторінка замовлення
Якщо у авторизованого користувача є роль адміна, то на панелі навігації
з’являється вікно, яке веде на сторінку адміністратора де можна редагувати та
видаляти товари (рис. 3.10).
Рисунок 3.10 – Сторінка адміна
42
3.3 Тестування та огляд онлайн сервісу
3.3.1 Особливості тестування веб-орієнтованого програмного
забезпечення. Завершальний етап розробки сайту – його веб-тестування. Ця
процедура грає найважливішу роль створенні ресурсу, оскільки саме від якості
тестування залежить подальше життя проекту. Як показує практика, багато
розробників не приділяють належну увагу цьому етапу, покладаючись виключно
на свої знання та досвід. Як результат отримуємо помилки, що призводять до
колосальних витрат часу, сил та грошей. Ресурс, який працює некоректно, викликає
у користувачів негатив, в результаті довіра до компанії падає, що негативно
впливає на її репутацію. Тест сайту може займати до 50% часу розробки [15].
Основна мета тестування – перевірка функціонування ресурсу на
відповідність до пред'явлених вимог. Здавалося б, як можна перевірити сайт або
програмне забезпечення на помилки, якщо спочатку ніхто не користується
проектом? Виявляється, що лише потрібно створити штучні ситуації, які можуть у
майбутньому виникнути у роботі з ресурсом. Проводиться аналіз поведінки
ресурсу на запропонованих умовах. Коли виявлено баг, його пітрібно виправити і
повторити тестування. Тестування буде проводитись доти, доки сайт не стане
ідеальним.
Тестування на помилки здійснюється різними методами і щоб домогтися
коректного функціонування сайту, фахівці створюють певний план дій.
3.2.2 Тестування онлайн сервісу «Snap Electronics». По завершенню
розробки онлайн сервісу «Snap Electronics» проведено тестування сайта за
допомогою додатку «Lighthouse».
Lighthouse – це автоматизований інструмент з відкритим кодом для
підвищення продуктивності, якості та правильності ваших веб-програм.
Під час аудиту сторінки Lighthouse виконує ряд тестів для сторінки, а потім
створює звіт про те, наскільки добре сторінка працювала. Звідси можна
використовувати невдалі тести як індикатори того, що можна зробити, щоб
покращити свою програму [16].
43
Результати тестування можна побачити на рис. 3.11-3.18.
Так як сервіс завантажено на безкоштовну хмарну платформу «Heroku»,
доступна лише обмежена швидкість завантаження сайту, тому можемо бачити що
завантаження сайту йде в середній швидкості (рис. 3.11-3.12).
Рисунок 3.11 – Швидкість завантаження
44
Рисунок 3.12 – Пройдені тести на швидкість роботи
Наступним параметром тестування виступила доступність сайту. Доступний
веб-сайт усуває бар’єри, які заважають людям із певними видами порушень ним
користуватись і, таким чином, під час взаємодії з ним усі користувачі знаходяться
в рівних умовах. Якщо веб-сайт розроблено відповідно до стандартів доступності,
він є зручним для користувачів будь-яких пристроїв: як стаціонарних комп’ютерів,
так і мобільних телефонів. Як можна побачити за результатами тестування
розроблений онлайн сервіс «Snap Electronics» знаходиться на вищому рівні
доступності (рис. 3.13-3.14).
45
Рисунок 3.13 – Рівень доступності онлайн сервісу «Snap Electronics»
Рисунок 3.14 – Пройдені тести на доступність онлайн сервісу
Наступним параметром тестування визначено користування найкращими
практиками при розробці сервісу. Шістнадцять найкращих практик, перевірених
Lighthouse, в основному зосереджені на аспектах безпеки веб-сайтів і сучасних
стандартах веб-розробки [16].
46
Lighthouse аналізує, чи використовуються HTTPS і HTTP/2, перевіряє, чи
надходять ресурси із безпечних джерел, і оцінює вразливість бібліотек JavaScript.
Інші найкращі практики розглядають безпечні підключення до бази даних і
уникнення використання незахищених команд, таких як document.write(), або
включення застарілих API (рис. 3.15-3.16).
Рисунок 3.15 – Рівень користування найкращими практиками
Рисунок 3.16 – Пройдені тести на найкращі практики
47
Останнім параметром тестування виступила SEO оптимізація. SEO
оптимізація сайту – є оптимізацією сайту під певні запити пошукових систем.
Іншими словами це комплекс різних заходів, спрямованих на підвищення позиції
свого ресурсу при певних пошукових запитах користувача (рис. 3.17-3.18).
Рисунок 3.17 – Рівень SEO оптимізації
Рисунок 3.18 – Тести на рівень SEO оптимізації
48
Висновки до розділу 3
В цьому розділі розглянуто архітектуру розроблюваного онлайн срвісу «Snap
Electronics» з продажу електронної техніки та показано його програмну реалізацію.
Було протестовано розробку онлайн сервісу за 4 критеріями:
− швидкість;
− доступність;
− найкращі практики;
− SEO оптимізація.
Для візуального відображення використано: мову розмітки гіпертексту
HTML, каскадні таблиці стилів CSS та JavaScript.
49
ВИСНОВКИ
Під час виконання кваліфікаційної роботи бакалавра було створено онлайн
сервіс «Snap Electronics» з продажу електронної техніки.
Для досягнення поставленої мети в роботі вирішені наступні завдання:
– проведено аналіз сайтів аналогів;
– досліджено процеси організації інтернет торгівлі;
– проведено аналіз основних вимог до створення онлайн сервісу з продажу
електронної техніки;
– обрано та налаштовано інструменти реалізації;
– розроблено концепцію, дизайн та програмну реалізацію.
Завдання полягало в аналізі уже існуючих рішень та розробці власного
програмного продукту.
В аналітичній частині розглянуто веб-сайти та виділено їх переваги й
недоліки, в результаті чого сформовано критерії, по яких розроблено власний
програмний продукт.
При дослідженні українського сегменту мережі інтернет було розглянуто вже
існуючі аналоги, як: «Moyo», «Foxtrot» та «Stylus».
Під час виконання проектування сервісу «Snap Electronics» з продажу
електронної техніки була проведена робота з визначення призначення та області
об’єкта проектування; проведений огляд існуючих рішень; сконструйована робота
сервісу шляхом реалізації контекстних діаграм моделі у стандарті IDEF0 і в
подальшому на основі діаграм за допомогою програмних засобів Java, HTML, CSS
та JavaScript; написано код самого онлайн сервісу.
Результатом кваліфікаційної роботи бакалавра став онлайн сервіс «Snap
Electronics» з продажу електронної техніки.
Таким чином, усі поставлені задачі дослідження виконано.
50
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Сайт «Moyo». URL: https://www.moyo.ua (дата звернення: 15.01.2022).
2. Сайт «Foxtrot». URL: https://www.foxtrot.com.ua (дата звернення:
15.01.2022).
3. Сайт «Stylus». URL: https://stylus.ua (дата звернення: 15.01.2022).
4. Кожем'якін А. А. HTML та CSS у прикладах. М. : Альтекс-А, 2014. 416 с.
5. Мова програмування JavaScript. URL:
http://www.znannya.org/?view=javascript (дата звернення: 15.02.2022).
6. SQL – Мова БД SQL її переваги, недоліки, оператори. URL:
http://programmersworld.xyz/product/18/62 (дата звернення: 25.02.2022).
7. AllFusion Process Modeler. URL: https://businessarchitecture.ru/bwin/ (дата
звернення: 20.03. 2022).
8. IDEF0. URL: https://uk.wikipedia.org/wiki/IDEF0 (дата звернення: 20.03. 2022).
9. Adobe Photoshop. URL: https://photoshop-master.ru/lessons (дата звернення:
13.03.22).
10. Habr JS. URL: https://habr.com/ru/hub/javascript (дата звернення: 23.03.2022).
11. Htmlbook .URL: http://htmlbook.ru (дата звернення: 05.04.2022).
12. Wikipedia. URL: https://uk.wikipedia.org/wiki (дата звернення: 05.05.2022).
13. Tsatu URL: http://www.tsatu.edu.ua/ (дата звернення: 15.04.2022).
14. Ковтун С. С., Оксамитна Л. П. Проектування та створення онлайн сервісу з
продажу електронної техніки : Збірник тез доповідей студентської науково-
практичної конференції ЧДТУ : 19-22 квітня 2022 / [упорядник Мельник
І.В.]; Міністерство освіти і науки України, Черкаський державний
технологічний ун-т. Черкаси : ЧДТУ, 2022. С. 65-66.
15. Особенности тестирования веб-приложений. URL: https://quality-
lab.ru/blog/key-principles-of-web-testing/ (дата обращения: 23.05.2022).
16. Огляд рішень для тестування сайтів, різні види тестів для веб-додатків і
вживане. URL: http://hostinfo.ru/articles/442 (дата звернення: 23.05.2022).
51
ДОДАТОК А
Затверджую
Зав. кафедри КНтаСА,
______________ Триус Ю.В.
«____»____________2022 р.
ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ОНЛАЙН СЕРВІСУ З ПРОДАЖУ
ЕЛЕКТРОННОЇ ТЕХНІКИ
Специфікація
482.ЧДТУ. 22093-01 12 01
Листів 2
Розробник ____________________ Ковтун С.С.
Керівник ____________________ Оксамитна Л.П.
Черкаси – 2022
52
482.ЧДТУ. 22093-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 22093-01 12 01 Текст програми
482.ЧДТУ. 22093-01 34 01 Інструкція користувача
482.ЧДТУ. 22093-01 90 01 Публікація по темі
кваліфікаційної роботи
бакалавра
53
ДОДАТОК Б
ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ОНЛАЙН СЕРВІСУ З ПРОДАЖУ
ЕЛЕКТРОННОЇ ТЕХНІКИ
Текст програми
482.ЧДТУ. 22093-01 12 01
Листів 25
Розробник _____________ Ковтун С.С.
Черкаси – 2022
54
Код головної сторінки
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: common-header" />
<body class="d-flex flex-column" >
<div th:replace="common/header :: navMenu"> </div>
<div class="jumbotron jumbotron-fluid mt-0"
th:style="'background-image: url(/image/background/2222_2.jpg);'">
<div class=‘container’>
<div class=“rows text-left py-5">
<div class="col-sm-12 col-md-10 offset-md-1 col-lg-8
offset-lg-3 col-xl-6 offset-xl-6 my-auto">
<h2 class="bg-warning text-dark d-inline-block p-
1">Найкращі</h2>
<h1 class="text-dark font-weight-bold">Електронні
товари Черкас</h1>
<a th:href="@{/store}" class="button button-primary
rounded-pill" data-addclass-on-xs="button-sm">ОБЕРИ ЩОСЬ ДЛЯ СЕБЕ</a>
</div>
</div>
</div>
</div>
<section class="section py-5 ">
<div class="container text-center">
<h4 class="font-weight-bold ">Наші рекомендації</h4>
<div class="featured-items mt-4">
<div class="cart cart-product cart-featured"
th:each="product : ${products}">
<div class="cart-body">
<a th:href="@{/product-
detail?id=}+${product.id}"><img class="cart-img-top"
th:src="${product.picture} ?
'/image/product/pictures/'+${product.picture}+'.jpg' :
'/image/product/itemexample.jpg'" alt="Cart image cap"></a>
<a th:href="@{/product-detail?id=}+${product.id}"
class="cart-name" th:text="${product.name}"></a>
<div class="price"><span
th:text="'$'+${product.price}"></span></div>
</div>
</div>
</div>
</div>
</section>
<div th:replace="common/header :: footer"> </div>
55
<div th:replace="common/header :: body-scripts"> </div>
<script type="text/javascript">
$(document).ready(function(){
$('.featured-items').slick({
infinite: true,
visibleImages: 4,
skipedImages: 4,
responsive: [
{
breakpoint: 1200,
settings: {
visibleImages: 3,
skipedImages: 3,
}
},
{
breakpoint: 768,
settings: {
visibleImages: 2,
skipedImages: 2
}
},
{
breakpoint: 480,
settings: {
visibleImages: 1,
skipedImages: 1
}
}
]
})
.on('setPosition', function (event, slick) {
slick.$slides.css('height', slick.$slideTrack.height()
+ 'px');
});
$('.featured-brands').slick({
visibleImages: 6,
skipedImages: 1,
responsive: [
{
breakpoint: 1200,
settings: {
visibleImages: 5,
skipedImages: 1,
}
},
{
breakpoint: 992,
settings: {
visibleImages: 4,
skipedImages: 4
}
56
},
{
breakpoint: 768,
settings: {
visibleImages: 3,
skipedImages: 3
}
},
{
breakpoint: 550,
settings: {
visibleImages: 2,
skipedImages: 2
}
},
{
breakpoint: 380,
settings: {
visibleImages: 1,
skipedImages: 1
}
},
]
});
});
</script>
</body>
</html>
Код сторінки з товарами
><!doctype html>
<html lang="en" xmlns:th="http://www.w3.org./1999/xhtml">
<head th:replace="common/header :: common-header">
<body class="d-flex flex-column">
<div th:replace="common/header :: navMenu"> </div>
<form id="filter-form" th:action="@{/store}" method="get">
<div class="container page-content">
<div class=“rows gutters-3">
<div class="col-lg-3 col-md-4">
<div class="accordion accordion-caret accordion-sidebar
d-none d-md-block">
<div class="cart">
<div class="cart-header">
57
<a href="/filter-categories" data-
toggle="collapse" aria-expanded="true" aria-controls="filter-
categories" role="button" class="h6">
КАТЕГОРІЇ
</a>
</div>
<div id="filter-categories" class="collapse show">
<div class="cart-body">
<div th:each="item : ${allCategories}"
class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-
input" th:id="${item}" th:name="category" th:value="${item}"
th:checked="${((param.category != null)
and (/lists.contains(param.category, item )))} ? checked">
<label class="custom-control-label"
th:for="${item}" th:text="${item}"></label>
</div>
</div>
</div>
</div>
<div class="cart">
<div class="cart-header">
<a href="/filter-price" data-toggle="collapse"
aria-expanded="true" aria-controls="filter-price" role="button"
class="h6">
ЦІНА
</a>
</div>
<div id="filter-price" class="collapse show">
<div class="cart-body">
<div class="d-flex justify-content-between">
<input type="text" class="form-control form-
control-sm rounded-pill text-center font-weight-bold bg-light mr-2
minw-0"
th:name="pricelow"
th:value="${param.pricelow}">
<input type="text" class="form-control form-
control-sm rounded-pill text-center font-weight-bold bg-light ml-2
minw-0"
th:name="pricehigh"
th:value="${param.pricehigh}">
</div>
</div>
</div>
</div>
<div class="cart">
<div class="cart-header">
<a href="/filter-brands" data-toggle="collapse"
aria-expanded="true" aria-controls="filter-brands" role="button"
class="h6">
ВИРОБНИК
</a>
</div>
58
<div id="filter-brands" class="collapse show">
<div class="cart-body">
<div th:each="item : ${allBrands}"
class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-
input" th:id="${item}" th:name="brand" th:value="${item}"
th:checked="${((param.brand != null)
and (/lists.contains(param.brand, item )))} ? checked">
<label class="custom-control-label"
th:for="${item}" th:text="${item}"></label>
</div>
</div>
</div>
</div>
<div class="cart">
<div class="cart-header px-5 py-2 text-center">
<button type="submit" form="filter-form"
class="button button-primary rounded-pill button-block button-
sm">ПІДТВЕРДИТИ</button>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-8">
<div class="cart mb-3">
<div class=“rows cart-body d-flex justify-content-
between align-items-start py-2">
<div class="col-8 col-md-7 col-lg-6">
<button type="button" class="button button-sm
button-outline-primary rounded-pill d-block d-md-none mb-2" data-
toggle="modal" data-target="/filterModal">
<i data-feather="filter"></i> Filter</button>
<div class="input-group input-group-search input-
group-sm mb-2">
<input type="text" class="form-control border-0
bg-light input-search" placeholder="Пошук..."
th:name="search"
th:value="${filters.search}">
<div class="input-group-append">
<button class="button button-light"
type="submit"><i data-feather="search"></i></button>
</div>
</div>
</div>
<div class="button-group ml-3">
59
<button type="button" class="button button-light
button-sm border rounded-pill" data-toggle="dropdown"
aria-haspopup="true" aria-
expanded="false">
<th:block th:switch="${filters.sort}">
<span id="dropdown-sort-text"
th:case="'priceasc'">Від дешевих до дорогих</span>
<span id="dropdown-sort-text"
th:case="'pricedesc'">Від дорогих до дешевих</span>
<span id="dropdown-sort-text"
th:case="'alphasc'">A - Z Алфавітно</span>
<span id="dropdown-sort-text"
th:case="'alphdesc'">Z - A Алфавітно</span>
<span id="dropdown-sort-text"
th:case="*">Новинки</span>
</th:block>
<i data-feather="chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-menu-right
shadow-sm">
<button class="dropdown-item button-sort"
type="button" value="newest">Новинки</button>
<button class="dropdown-item button-sort"
type="button" value="priceasc">Від дешевих до дорогих</button>
<button class="dropdown-item button-sort"
type="button" value="pricedesc">Від дорогих до дешевих</button>
<button class="dropdown-item button-sort"
type="button" value="alphasc">A - Z Алфавітно</button>
<button class="dropdown-item button-sort"
type="button" value="alphdesc">Z - A Алфавітно</button>
</div>
</div>
<input id="input-sort" hidden="hidden" type="text"
name="sort" th:value="${filters.sort}">
</div>
</div>
<div class="grid grid-gap-3 grid-col-2 grid-col-lg-3 mb-
3">
<div class="cart cart-product" th:each="product :
${products}">
<div class="cart-body">
<a th:href="@{/product-
detail?id=}+${product.id}"><img class="cart-img-top"
th:src="${product.picture} ?
'/image/product/pictures/'+${product.picture}+'.jpg' :
'/image/product/itemexample.jpg'" alt="Cart image cap"></a>
<a th:href="@{/product-detail?id=}+${product.id}"
class="cart-name" th:text="${product.name}"></a>
<div class="price"><span class="h5"
th:text="'$'+${product.price}"> </span></div>
</div>
</div>
60
</div>
<div class="cart" >
<div class="cart-body d-flex justify-content-center">
<div id="light-pagination"></div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="filterModal" tabindex="-1"
role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<h5 class="modal-name">Shop Filters</h5>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-0">
</div>
</div>
</div>
</div>
<input id="page" hidden="hidden" type="text" name="page"
th:value="${filters.page}">
<input id="totalitems" hidden="hidden" type="text"
th:value="${totalitems}">
<input id="itemsperpage" hidden="hidden" type="text"
th:value="${itemsperpage}">
</form>
<div th:replace="common/header :: footer"> </div>
<div th:replace="common/header :: body-scripts"> </div>
<script>
var sidebarContent = $('.accordion-sidebar').html()
$('/filterModal').on('show.bs.modal', function () {
$(this).find('.modal-body').html('<div class="accordion
accordion-caret accordion-sidebar accordion-
modal">'+sidebarContent+'</div>')
$('.accordion-sidebar:not(.accordion-modal)').html('')
})
$('/filterModal').on('hidden.bs.modal', function () {
61
$('.accordion-modal').remove()
$('.accordion-sidebar').html(sidebarContent)
})
$('.button-sort').click(function () {
var value = $(this).val()
var text = $(this).text()
$('/input-sort').val(value)
$('/dropdown-sort-text').text(text)
$('/filter-form').submit()
})
$(function() {
$('/light-pagination').pagination({
items: $('/totalitems').val(),
itemsOnPage: $('/itemsperpage').val(),
currentPage: $('/page').val(),
cssStyle: 'light-theme',
useAnchors: false,
prevText: "<",
nextText: ">",
displayedPages: 1,
edges: 1,
onPageClick: function(pageNumber) {
$('/page').val(pageNumber)
$('/filter-form').submit()
}
});
});
</script>
</body>
</html>
Код авторизації
><!doctype html>
<html lang="en" xmlns:th="http://www.w3.org./1999/xhtml">
<head th:replace="common/header :: common-header" />
<body class="d-flex flex-column">
<div th:replace="common/header :: navMenu"> </div>
<div class="container my-3 my-sm-5 page-content">
<div class=“rows justify-content-center" id=“rows-login">
<div class="col-sm-10 col-md-11 col-lg-9 col-xl-8">
<div class="cart cart-login">
<div class="cart-body">
<div class=“rows">
<div class="col-md-8 col-login">
<form th:action="@{/login}" method="post" >
<div class="form-group text-center mb-2">
62
<h2 class="mb-0">Вхід</h2>
<em>в існуючий аккаунт</em>
</div>
<div class="form-group">
<div class="input-icon">
<i data-feather="exploiter"></i>
<input required="required" type="text"
class="form-control" placeholder="Ім'я користувача"
name="exploitername"
th:classappend="${param.error} ?
is-invalid" >
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i data-feather="lock"></i>
<input required="required" type="pass"
class="form-control" placeholder="Пароль" name="pass"
th:classappend="${param.error} ?
is-invalid" >
<div class="invalid-feedback">Неправильне
ім'я користувача або пароль</div>
</div>
</div>
<div class="form-group d-flex justify-content-
between">
<div class="custom-control custom-checkbox">
<input type="checkbox"
class="custom-control-input"
id="loginRemember" name="remember-me">
<label class="custom-control-label"
for="loginRemember">Запам'ятайте
мене</label>
</div>
<a href="/" class="text-primary small
reset">Забули пароль?</a>
</div>
<button type="submit"
class="button button-primary button-
block">УВІЙТИ</button>
</form>
</div>
<span class="or-divider">АБО</span>
<div class="col-md-8 col-register">
<form th:action="@{/new-exploiter}"
method="post">
<div class="form-group text-center">
<h2 class="bold">Реєстрація</h2>
</div>
<div class="form-group">
<div class="input-icon">
63
<i data-feather="mail"></i>
<input required="required" type="email"
class="form-control" th:classappend="${emailExists} ? is-invalid"
name="email" placeholder="Поштова
адреса" th:value="${email}">
<div class="invalid-feedback">Ця поштова
скринька вже зайнята</div>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i data-feather="exploiter"></i>
<input required="required" type="text"
class="form-control" th:classappend="${exploiternameExists} ? is-
invalid"
placeholder="Ім'я користувача"
name="exploitername" th:value="${exploitername}">
<div class="invalid-feedback">Це ім'я
користувача вже зайнято</div>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i data-feather="lock"></i> <input
type="pass" required="required"
class="form-control" name="new-pass"
placeholder="Пароль" autocomplete="new-
pass">
</div>
</div>
<button type="submit"
class="button button-outline-primary button-
block">ЗАРЕЄСТРУВАТИ</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div th:replace="common/header :: footer"> </div>
<div th:replace="common/header :: body-scripts"> </div>
</body>
</html>
Код сторінки користувача
><!doctype html>
64
<html lang="en" xmlns:th="http://www.w3.org./1999/xhtml">
<head th:replace="common/header :: common-header" />
<body class="d-flex flex-column">
<div th:replace="common/header :: navMenu"> </div>
<div class="container page-content">
<div class=“rows">
<div class="col-md-4 col-lg-3">
<div class="cart">
<div class="cart-body text-center">
<img src="/image/exploiter/exploiter.png"
width="100" height="100" alt="Exploiter" class="rounded-circle mb-3">
<h5 class="bold mb-0"
th:text="${/strings.capitalize(exploiter.exploitername)}"></h5>
<small class="text-secondary" th:text="'Last seen
'+${/dates.format(/dates.createNow(), 'MMM dd, yyyy')}"></small>
</div>
<div class="list-group list-group-flush">
<a th:href="@{/my-profile}" class="list-group-item
list-group-item-action active"><i data-feather="exploiter" class="mr-
3"></i> Профіль</a>
<a th:href="@{/my-orders}" class="list-group-item
list-group-item-action"><i data-feather="shopping-bag" class="mr-
3"></i> Замовлення</a>
<a th:href="@{/logout}" class="list-group-item list-
group-item-action text-danger"><i data-feather="log-out" class="mr-
3"></i> Вихід</a>
</div>
</div>
</div>
<div class="col mt-3 mt-md-0">
<div th:if="${updateSuccess}" class="alert alert-
success alert-dismissible fade show" role="alert">
<strong>Профіль успішно оновлено!</strong>
<button type="button" class="close" data-
dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div th:if="${incorrectPass}" class="alert alert-
danger alert-dismissible fade show" role="alert">
<strong>Неправильний пароль</strong>
<button type="button" class="close" data-
dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="cart">
<div class="cart-body">
65
<h3>Мій профіль</h3><hr>
<form id="profileForm" th:action="@{/update-
exploiter-info}" novalidate method="post">
<div class="form-rows”>
<div class="form-group col-sm-6">
<label for="firstName">Ім'я</label>
<input type="text" class="form-control"
id="firstName" name="firstName"
th:value="${exploiter.firstName}">
</div>
<div class="form-group col-sm-6">
<label for="lastName">Прізвище</label>
<input type="text" class="form-control"
id="lastName" name="lastName"
th:value="${exploiter.lastName}">
</div>
<div class="form-group col-sm-6">
<label for="exploiterName">Ім'я
користувача</label>
<input required="required" type="text"
class="form-control" th:classappend="${exploiternameExists} ? is-
invalid"
id="exploiterName"
name="exploitername" th:value="${exploiter.exploitername}">
<div class="invalid-feedback">Це ім'я
користувача зайнято.</div>
</div>
<div class="form-group col-sm-6">
<label for="email">Поштова скринька</label>
<input required="required" type="text"
class="form-control" th:classappend="${emailExists} ? is-invalid"
id="email" name="email"
th:value="${exploiter.email}">
<div class="invalid-feedback">Ця поштова
скринька зайнята.</div>
</div>
<div class="form-group col-sm-6">
<label for="txtNewPass">Новий пароль</label>
<input type="pass" class="form-control"
id="txtNewPass" name="newPass"
autocomplete="new-pass">
</div>
<div class="form-group col-sm-6">
<label for="txtConfirmPass">Підтвердіть
пароль</label>
<input type="pass" class="form-control"
id="txtConfirmPass" >
<div class="invalid-feedback">Паролі не
співпадають</div>
</div>
<div class="form-group col-11">
<button id="updateExploiterInfoButton"
type="button" class="button button-primary">ОНОВИТИ ПРОФІЛЬ</button>
66
</div>
</div>
<div class="modal fade" id="passModal"
tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterName"
aria-hidden="true">
<div class="modal-dialog modal-dialog-
centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-name"
id="exampleModalLongName">Введіть ваш старий пароль</h5>
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-
hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="pass" class="form-control"
id="pass" name="pass">
</div>
<div class="modal-footer">
<button type="button" class="button
button-secondary" data-dismiss="modal">Закрити</button>
<button type="submit" class="button
button-primary">Оновити</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div th:replace="common/header :: footer"> </div>
<div th:replace="common/header :: body-scripts"> </div>
<script>
function checkPassMatch() {
var pass = $("/txtNewPass").val();
var confirmPass = $("/txtConfirmPass").val();
if (pass == "" && confirmPass == "") {
$("/updateExploiterInfoButton").attr("disabled",
false);
} else {
if (pass != confirmPass) {
67
$("/updateExploiterInfoButton").attr("disabled", true);
$("/txtConfirmPass").addClass("is-invalid");
} else {
$("/updateExploiterInfoButton").attr("disabled", false);
$("/txtConfirmPass").removeClass("is-
invalid");
}
}
}
$(document).ready(function(){
$("/txtConfirmPass").keyup(checkPassMatch);
$("/txtNewPass").keyup(checkPassMatch);
$('/updateExploiterInfoButton').click(function() {
console.log("clickeo")
if ($('/txtNewPass').val() == '') {
$('/profileForm').submit()
} else {
$('/passModal').modal('show');
}
});
});
</script>
</body>
</html>
Код сторінки товару
><!doctype html>
<html lang="en" xmlns:th="http://www.w3.org./1999/xhtml">
<head th:replace="common/header :: common-header" />
<body class="d-flex flex-column">
<div th:replace="common/header :: navMenu"> </div>
<div class="container page-content mt-3 mb-3">
<div th:if="${addProductSuccess}" class="alert alert-success
alert-dismissible fade show" role="alert">
<strong>Продукт додано до корзини!</strong>
<div class="d-flex mt-2">
<a th:href="@{/store}" class="button button-info
rounded-pill mx-2"><i data-feather="arrow-left"></i> Continue
shopping</a>
68
<a th:href="@{/shopping-cart/cart}" class="button
button-primary rounded-pill mx-2">Перейти в корзину <i data-
feather="arrow-right"></i></a>
</div>
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div th:if="${notEnoughStock}" class="alert alert-danger
alert-dismissible fade show" role="alert">
<strong>Не можна додати в корзину, тільки <span
th:text="${product.stock}"></span> в наявності.</strong>
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="cart">
<div class="cart-body">
<div class=“rows">
<div class="col-md-8">
<img class="img-fluid"
th:src="'/image/product/pictures/'+${product.picture}+'.jpg'">
</div>
<div class="col-md-8 mt-3 mt-md-0">
<h2 class="cart-name"
th:text="${product.name}"></h2>
<div class="d-flex align-items-center">
<h2 class="price font-weight-bold mr-3">
<span th:text="'$'+${product.price}"></span>
</h2>
<h6>(<span th:text="${product.stock}"></span> в
наявності)</h6>
</div>
<p class="d-none d-lg-block">Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Dicta voluptatibus quos ea dolore
rem, molestias laudantium et explicabo assumenda fugiat deserunt in,
facilis laborum excepturi aliquid nobis ipsam deleniti aut? Aliquid
sit hic id velit qui fuga nemo suscipit obcaecati. Officia nisi quaerat
minus nulla saepe aperiam sint possimus magni veniam provident.</p>
<form th:action="@{/shopping-cart/add-item}"
method="post">
<input hidden="hidden" th:field="*{product.id}">
<div class="form-rows”>
<div class="form-group col-sm-3">
<label class="font-weight-bold"
for="quantity">Кількість</label>
<select class="form-control" id="quantity"
th:name="quantity">
<option>1</option>
<option>2</option>
<option>3</option>
69
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group col-sm-6 offset-sm-3 d-
flex align-items-end">
<button type="submit" class="button button-
primary button-block rounded-pill atc-demo">Додати в корзину</button>
</div>
</div>
</form>
<hr>
</div>
</div>
</div>
</div>
</div>
<div th:replace="common/header :: footer"> </div>
<div th:replace="common/header :: body-scripts"> </div>
</body>
</html>
Код сторінки «Корзина»
><!doctype html>
<html lang="en" xmlns:th="http://www.w3.org./1999/xhtml">
<head th:replace="common/header :: common-header" />
<body class="d-flex flex-column">
<div th:replace="common/header :: navMenu"> </div>
<div class="container page-content">
<form th:action="@{/shopping-cart/update-item}"
method="post">
<input hidden="hidden" id="newquantity" th:name="quantity">
<input hidden="hidden" id="newid" th:name="id">
<div class="cart">
<div class="cart-body">
<div class=“rows border-bottom pb-2 pt-2"
th:each="cartItem : ${cartItemList}">
<div class="col-11 col-md-8">
<div class=“rows align-items-center">
<div class="col-4">
<a th:href="@{/product-
detail?id=}+${cartItem.product.id}"><img class="img-fluid"
th:src="'/image/product/pictures/'+${cartItem.product.picture}+'.jpg
'" alt="${cartItem.product.name}"></a>
</div>
<div class="col-8">
70
<a th:href="@{/product-
detail?id=}+${cartItem.product.id}" class="h6 bold d-inline-block"
th:text=${cartItem.product.name}></a>
<div><i data-feather="check-circle"
class="text-success"></i> В наявності</div>
<small><b>Ціна за одиницю</b>: $<span
th:text="${/numbers.formatDecimal(cartItem.product.price, 0, 'COMMA',
2, 'POINT')}"></span></small>
</div>
</div>
</div>
<div class="col-11 col-md-8">
<div class=“rows align-items-center mt-3">
<div class="col-5">
<div class=“rows ">
<label th:for="${cartItem.id}" class="col-
sm-6 col-form-label text-sm-right">Кількість</label>
<div class="col-sm-6">
<input th:id="${cartItem.id}"
th:disabled="${cartItem.product.stock==0}"
type="number" min="0"
max="${cartItem.product.stock}"
class="form-control cartItemQuantity"
th:value="${cartItem.quantity}">
<button style="display: none;"
th:id="'update-item-'+${cartItem.id}"
type="submit"
class="button button-warning button-
xs">Оновити</button>
</div>
</div>
</div>
<div class="col-5 text-right">
<span class="font-weight-bold">$ <span
th:id="'price'+${cartItem.id}"
th:text="${/numbers.formatDecimal(cartItem.subtotal, 0, 'COMMA', 2,
'POINT')}"></span></span>
</div>
<div class="col-2 ">
<a th:href="@{/shopping-cart/remove-
item?id=}+${cartItem.id}"><i class="mb-1" data-feather="trash-
2"></i></a>
</div>
</div>
</div>
</div>
<div class="text-center mt-3">
<div th:if="${/lists.isEmpty(cartItemList)}">В
корзині пусто! </div>
<small class="counter">Всього</small>
<h3 class="font-weight-bold">$ <span
th:text="${/numbers.formatDecimal(shoppingCart.getGrandTotal(), 0,
'COMMA', 2, 'POINT')}"></span></h3>
71
<a th:href="@{/store}" class="button button-info
rounded-pill "><i data-feather="arrow-left"></i> Продовжити
покупки</a>
<a th:href="@{/checkout}" class="button button-
primary rounded-pill">Оформити замовлення <i data-feather="arrow-
right"></i></a>
</div>
</div>
</div>
</form>
</div>
<div th:replace="common/header :: footer"> </div>
<div th:replace="common/header :: body-scripts"> </div>
<script>
$(document).ready(function(){
$(".cartItemQuantity").on('change', function(){
var id=this.id;
var quantity=this.value;
$('/newquantity').val(quantity)
$('/newid').val(id)
$('/update-item-'+id).css('display', 'inline-
block');
});
});
</script>
</body>
</html>
Код сторінки замовлення
><!doctype html>
<html lang="en" xmlns:th="http://www.w3.org./1999/xhtml">
<head th:replace="common/header :: common-header" />
<body class="d-flex flex-column">
<div th:replace="common/header :: navMenu"> </div>
<div class="container page-content">
<form th:action="@{/checkout}" method="post">
<div class=“rows">
<div class="col-lg-8 mb-3" >
<div th:if="${missingRequiredField}">
<h5 class="alert alert-warning">There are some
required fields missing.</h5>
</div>
<div id="accordion">
<div class="cart">
<div class="cart-header bg-white" id="headingOne">
72
<h5 class="mb-0">
<button class="button button-link checkout-
header" data-toggle="collapse" data-target="/collapseOne" aria-
expanded="true" aria-controls="collapseOne">
ОБРАНІ ТОВАРИ <i data-feather="chevron-down"
class="mb-1"></i>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-
labelledby="headingOne" data-parent="/accordion">
<div class="cart-body border-bottom">
<div class=“rows align-items-center border-
bottom pb-2 pt-2" th:each="cartItem : ${cartItemList}">
<div class="col-11 col-md-8 mb-2">
<div class=“rows align-items-center">
<div class="col-4">
<a th:href="@{/product-
detail?id=}+${cartItem.product.id}"><img class="img-fluid"
th:src="'/image/product/pictures/'+${cartItem.product.picture}+'.jpg
'" alt="${cartItem.product.name}"></a>
</div>
<div class="col-8">
<a th:href="@{/product-
detail?id=}+${cartItem.product.id}" class="h6 bold d-inline-block"
th:text=${cartItem.product.name}></a>
<div><i data-feather="check-circle"
class="text-success"></i> В наявності</div>
<small><b>Ціна за одиницю</b>:
$<span th:text="${/numbers.formatDecimal(cartItem.product.price, 0,
'COMMA', 2, 'POINT')}"></span></small>
</div>
</div>
</div>
<div class="col-11 col-md-8 text-right">
<span>x<span
th:text="${cartItem.quantity}"></span> одиниць: </span>
<span class="font-weight-bold text-info">$
<span th:id="'price'+${cartItem.id}"
th:text="${/numbers.formatDecimal(cartItem.subtotal, 0, 'COMMA', 2,
'POINT')}"></span></span>
</div>
</div>
<div class="text-center mx-auto">
<small class="counter">ВСЬОГО</small>
<h3 class="font-weight-bold">$ <span
th:text="${/numbers.formatDecimal(shoppingCart.getGrandTotal(), 0,
'COMMA', 2, 'POINT')}"></span></h3>
</div>
<div class="d-flex flex-wrap justify-content-
between align-items-center mt-3">
73
<a th:href="@{/shopping-cart/cart}"
class="button button-info rounded-pill "><i data-feather="arrow-
left"></i> Відредагувати корзину</a>
<a data-toggle="collapse" data-
parent="/accordion"
class="button button-primary rounded-
pill " href="/collapseTwo">Далі <i data-feather="arrow-
right"></i></a>
</div>
</div>
</div>
</div>
<div class="cart">
<div class="cart-header bg-white" id="headingTwo">
<h5 class="mb-0">
<button class="button button-link checkout-
header" data-toggle="collapse" data-target="/collapseTwo" aria-
expanded="false" aria-controls="collapseTwo">
SHIPPING <i data-feather="chevron-down"
class="mb-1"></i>
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-
labelledby="headingTwo" data-parent="/accordion">
<div class="cart-body border-bottom">
<div class="form-rows”>
<div class="form-group col-11">
<label for="receiver">Receiver
Name</label>
<input type="text" class="form-control"
id="receiver" name="receiver" required="required"/>
</div>
<div class="form-group col-11">
<label for="streetAddress">Address</label>
<input type="text" class="form-control"
id="streetAddress" name="streetAddress" required="required" />
</div>
<div class="form-group col-4">
<label for="city">City</label> <input
type="text"
class="form-control" id="city"
th:name="city"
required="required"/>
</div>
<div class="form-group col-4">
<label for="country">Country</label>
<input type="text"
class="form-control" id="country"
th:name="country"
required="required"/>
</div>
<div class="form-group col-4">
74
<label for="zipCode">Zipcode</label>
<input
type="text" class="form-control"
id="zipCode"
th:name="zipCode" required="required" />
</div>
</div>
<div class="mt-2 text-right">
<a data-toggle="collapse" data-
parent="/accordion"
class="button button-primary rounded-pill"
href="/collapseThree">Next <i data-feather="arrow-right"></i></a>
</div>
</div>
</div>
</div>
<div class="cart">
<div class="cart-header bg-white"
id="headingThree">
<h5 class="mb-0">
<button class="button button-link checkout-
header collapsed" data-toggle="collapse" data-target="/collapseThree"
aria-expanded="false" aria-controls="collapseThree">
PAYMENT <i data-feather="chevron-down"
class="mb-1"></i>
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-
labelledby="headingThree" data-parent="/accordion">
<div class="cart-body border-bottom">
<div class=“rows">
<div class="col-11">
<img src="/image/creditcart.png"
class="img-fluid mb-2" /><br />
<div class="form-group">
<label for="cartType">Select Cart Type:
</label> <select
class="form-control" id="cartType"
name="type">
<option value="visa">Visa</option>
<option
value="mastercart">Mastercart</option>
</select>
</div>
<div class="form-group">
<label for="cartHolder">Cart Holder
Name:</label> <input
type="text" class="form-control"
id="cartHolder"
required="required"
th:name="holderName">
75
</div>
<div class="form-group">
<label for="cartNumber">Cart
Number:</label>
<div class="input-group">
<input type="tel" class="form-control"
id="cartNumber"
required="required"
th:name="cartNumber">
</div>
</div>
</div>
</div>
<div class=“rows">
<div class="col-7">
<div class="form-group">
<label>Expiration Date</label>
<div class=“rows">
<div class="col-6">
<select class="form-control"
name="expiryMonth"
required="required">
<option disabled="disabled">--
Month --</option>
<option value="1"> (01)</option>
<option value="2"> (02)</option>
<option value="3"> (03)</option>
<option value="4"> (04)</option>
<option value="5"> (05)</option>
<option value="6"> (06)</option>
<option value="7"> (07)</option>
<option value="8"> (08)</option>
<option value="9"> (09)</option>
<option value="10"> (10)</option>
<option value="11"> (11)</option>
<option value="12"> (12)</option>
</select>
</div>
<div class="col-6">
<select class="form-control"
name="expiryYear">
<option disabled="disabled">--
Year --</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
76
<option value="2029">2029</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-5">
<div class="form-group">
<label for="cartCVC">CV Code</label>
<input id="cartCVC"
type="tel" class="form-control"
name="cvc"/>
</div>
</div>
</div>
<div class="mt-2 text-right">
<a data-toggle="collapse" data-
parent="/accordion"
class="button button-primary rounded-pill"
href="/collapseThree">Next <i data-feather="arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="cart">
<div class="cart-header bg-white checkout-
header">ЧЕК</div>
<div class="cart-body">
<div class="d-flex justify-content-between">
<span>Ціна товарів в корзині</span>
<span>$ <span
th:text="${/numbers.formatDecimal(shoppingCart.getGrandTotal(), 0,
'COMMA', 2, 'POINT')}"> </span></span>
</div>
<div class="d-flex justify-content-between">
<span>Доставка</span>
<span>$0.00</span>
</div>
<hr>
<div class="d-flex justify-content-between">
<span>Всього</span>
<span class="font-weight-bold">$ <span
th:text="${/numbers.formatDecimal(shoppingCart.getGrandTotal(), 0,
'COMMA', 2, 'POINT')}"> </span></span>
</div>
</div>
<div class="cart-footer bg-white border-top-0">
77
<button type="submit" class="button button-primary
rounded-pill button-lg button-block mt-2 mb-3">
Підтвердити замовлення
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div th:replace="common/header :: footer"> </div>
<div th:replace="common/header :: body-scripts"> </div>
</body>
</html>
Код сторінки адміністратора
><!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org./1999/xhtml"
xmlns:sec="http://www.w3.org./1999/xhtml">
<head th:replace="common/header :: common-header" />
<body>
<div th:replace="adminHome :: navMenuAdmin"> </div>
<div class="container page-content">
<table id="table-product" class="table table-striped table-
bordered table-hover">
<thead class="thead-dark">
<tr>
<th>Назва</th>
<th>Категорія</th>
<th>Виробник</th>
<th>Ціна</th>
<th>Кількість</th>
<th>Операція</th>
</tr>
</thead>
<tbody>
<tr data-th-each="product : ${products}">
<td th:text="${product.name}"></td>
<td><div style="display:flex;"><span th:each="item :
${product.categories}"
th:text="${item.getName()}" class="badge badge-
secondary mt-1 mr-1" ></span></div></td>
<td><div style="display:flex;"><span th:each="item :
${product.brands}"
th:text="${item.getName()}" class="badge badge-
secondary mt-1 mr-1" ></span></div></td>
78
<td th:text="${product.price}"></td>
<td th:text="${product.stock}"></td>
<td><a th:href="@{/product/edit?id=}+${product.id}"
class="badge badge-primary">ЗМІНИТИ</a>
<a th:href="@{/product/delete?id=}+${product.id}"
class="badge badge-danger">ВИДАЛИТИ </a> </td>
</tr>
</tbody>
</table>
</div>
<div th:replace="common/header :: body-scripts"> </div>
<script>
$(document).ready(function() {
$('/table-product').DataTable({
stateSave: true
});
} );
</script>
</body>
</html>
79
ДОДАТОК В
ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ОНЛАЙН СЕРВІСУ З ПРОДАЖУ
ЕЛЕКТРОННОЇ ТЕХНІКИ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482. ЧДТУ. 22093-01 34 01
Листів 8
Розробник _____________ Ковтун С.С.
Черкаси – 2022
80
Для початку роботи з інтернет-магазином «Snap Electonics» потрібно перейти
на онлайн сервіс за посиланням https://snap-electronics.herokuapp.com і подальше
користування сервісом повинно бути інтуітивно зрозумілим.
На головній сторінці сайту можна переглянути рекомендовані продукти або
перейти на сторінку з усіма товарами (рис. В.1-В.2).
Рисунок В.1 – Головна сторінка онлайн сервісу «Snap Electronics»
Рисунок В.2 – Головна сторінка онлайн сервісу «Snap Electronics»
81
Наступна сторінка якою може користуватись користувач, є сторінка з
переліком усих товарів магазину (рис. В.3).
Рисунок В.3 – Сторінка з товарами
На цій сторінкі у користувача є можливість відфільтрувати товар по
критеріям на вибір користувача (рис. В.4).
Рисунок В.4 – Сторінка з товарами
82
При натисненні на товар користувача буде переведено на сторінку з описом
товару (рис. В.5).
Рисунок В.5 – Сторінка товару
Для додавання товару в кошик користувачу потрібно пройти реєстрацію або
увійти у вже існуючий аккаунт (рис. В.6).
Рисунок В.6 – Сторінка реєстрації та авторизації
83
При додаванні товару у користувача є можливість перейти до кошику або
продовжити вибір товару на сторінкі товарів (рис. В.7).
Рисунок В.7 – Сторінка товару
Після додавання продукту в корзину можна переглянути всі обрані товари на
сторінки корзини, а також загальну суму вартості товарів в корзині (рис. В.8).
Рисунок В.8 – Сторінка «Корзина»
84
Після натискання кнопки підтведження покупки, користувача перенаправить
на сторінку підтвердження замовлення. На цій сторінці потрібно буде ввести більш
детальні дані щодо замовлення (рис. В.9-В.11).
Рисунок В.9 – Сторінка замовлення
Рисунок В.10 – Сторінка замовлення
85
Рисунок В.11 – Сторінка замовлення
Після підтвердження замовлення є можливість переглянути його статус на
сторінці користувача (рис. В.12-В.13).
Рисунок В.12 – Сторінка користувача
86
Рисунок В.13 – Сторінка користувача
Якщо у авторизованого користувача є роль адміна, то на панелі навігації
з’являється вікно, яке веде на сторінку адміністратора де можна редагувати та
видаляти товари (рис. В.14-В.16).
Рисунок В.14 – Сторінка адміна
87
Рисунок В.15 – Редагування товару
Рисунок В.16 – Додавання нового товару
88
ДОДАТОК Г
ТЕЗИ ДОПОВІДЕЙ СТУДЕНТСЬКОЇ НАУКОВО-ПРАКТИЧНОЇ
КОНФЕРЕНЦІЇ ЧДТУ
Публікація по темі кваліфікаційної роботи бакалавра
482.ЧДТУ. 22093-01 90 01
Листів 3
Розробник: _________________ Ковтун С.С.
Черкаси – 2022
89
90
ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ОНЛАЙН СЕРВІСУ З ПРОДАЖУ
ЕЛЕКТРОННОЇ ТЕХНІКИ
Ковтун С.С. (студент ФІТІС), Оксамитна Л.П., к.т.н., доцент
Черкаський державний технологічний університет
Сьогодні в кожній сфері набувають дедалі більшої популярності серед
користувачів онлайн сервіси. Не винятком є сфера торгівлі. Мета роботи – розробка
онлайн сервісу з продажу електронної техніки, який можна представити для вже
існуючих локальних дилерів, хто ще не має власного сайту з представленням
відповідної продукції. В ході розробки щодо вимог для створюваного програмного
забезпечення було розглянуто такі існуючі аналоги, як: «Moyo» «Foxtrot» «Stylus».
Підсумовуючи перегляд та оцінку приведених вище сайтів, варто зазначити, що всі
вони містять в собі стандартні функції з пошуку та підбору електронної техніки,
також існує можливість якісної та кількісної оцінки окремих товарів з електронної
техніки. При створенні онлайн сервісу з продажу електронної техніки будуть
використані такі інструменти: backend мова програмування Java та фреймворк
Spring, система керування реляційними базами даних PostgreSQL, мова розмітки
HTML, спеціальна мова стилю сторінок CSS, frontend мова програмування
Javascript. Основною метою розробки є концепція єдності – щоб вся необхідна для
роботи інформація зберігалася на єдиному веб-сервісі. Онлайн сервіс з продажу
електронної техніки повинен бути кросбраузерним та невимогливим до системних
ресурсів. Інтерфейс його має бути мінімалістичним, сучасним та інтуїтивно
зрозумілим. Розроблений сервіс можна буде використовувати для перегляду та
покупки продукції магазину цифрової техніки.