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/8845| Title: | Проектування та створення веб-орієнтованого інформаційного ресурсу для замовлення продукції від малих фермерських господарств |
| Authors: | Оксамитна, Любов Павлівна Михайлов, Сергій Володимирович |
| Keywords: | ІНФОРМАЦІЙНІ ТЕХНОЛОГІЇ;ВЕБ-РЕСУРС;ПРОЕКТУВАННЯ;ФЕРМЕРСЬКЕ ГОСПОДАРСТВО;ЗАМОВЛЕННЯ ПРОДУКЦІЇ. |
| Issue Date: | 16-Jun-2022 |
| Abstract: | Здоров’я людини, опірність до несприятливих умов зовнішнього середовища, розумова та фізична працездатність, ефективність навчання, обмін речовин, функція і структура всіх клітин, тканин і органів залежить від характеру харчування. Враховуючи це, погіршення стану з контролем безпеки виробництва продуктів, виснаження ґрунтів через недотримання сівозміни та сліпу гонитву виробників продуктів харчування за зиском, що в свою чергу призведене до зниження якості вироблюваних продуктів, може стати загрозою для здоров’я населення. У зв'язку з вище переліченими фактами, збільшується потреба у доступі саме до корисної, екологічно чистої фермерської продукції. З розвитком інформаційних технологій з’являється все більше можливостей налагодити комфортну взаємодію з малими фермерськими господарствами. Звісно, вже зараз існує певна кількість сервісів замовлення фермерських продуктів харчування, але лише мала частина з них здатна постачати саме якісні, екологічно чисті товари та ефективно вирішувати поставлену проблему. Мета кваліфікаційної роботи бакалавра – створення сучасного, веб-орієнтованого інформаційного ресурсу з пошуком та замовленням сертифікованої продукції, призначеного для розміщення та придбання товарів з різних фермерських господарств України. Методи дослідження. В роботі застосовувалися: аналіз літератури з проблеми дослідження, аналіз існуючих сайтів замовлення продуктів харчування від фермерських господарств України, дослідження можливості програмування на мові програмування JavaScript та його фреймворків: React, Node.js, Express.js. Основні положення і результати кваліфікаційної роботи бакалавра доповідалися і були обговорені на студентській конференції ЧДТУ (Черкаси, 2022). Результати кваліфікаційної роботи бакалавра опубліковані у збірнику тез доповідей ЧДТУ: Михайлов С. В., Оксамитна Л. П. Проектування та створення веб-орієнтованого інформаційного ресурсу для замовлення продукції від малих фермерських господарств: Збірник тез доповідей студентської науково-практичної конференції ЧДТУ : 19-22 квітня 2022 / [упорядник Мельник І.В.]; Міністерство освіти і науки України, Черкаський державний технологічний ун-т. Черкаси : ЧДТУ, 2022. С. 66-67. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/8845 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Михайлов Сергій_КНС-2001_2021-2022.pdf Restricted Access | 3.33 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 рік
2
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітній рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
ЗАТВЕРДЖУЮ
Завідувач кафедри КН та СА
_______________ Триус Ю.В.
«____» _____________ 2022 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Михайлову Сергію Володимировичу
(прізвище, ім‘я, по батькові)
1. Тема роботи «Проектування та створення веб-орієнтованого інформаційного ресурсу
для замовлення продукції від малих фермерських господарств»
Керівник роботи Оксамитна Л.П., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «07» лютого 2022 р. №45/04.
2. Строк подання студентом роботи до 16 червня 2022 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з наукової практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. НЕОБХІДНІСТЬ СТВОРЕННЯ ВЕБ-ОРІЄНТОВАНОГО ІНФОРМАЦІЙНОГО РЕСУРСУ
ДЛЯ ЗАМОВЛЕННЯ ПРОДУКЦІЇ ВІД МАЛИХ ФЕРМЕРСЬКИХ ГОСПОДАРСТВ.
4.2. ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ВЕБ-ОРІЄНТОВАНОГО ІНФОРМАЦІЙНОГО
РЕСУРСУ «FOODMART».
4.3. РЕАЛІЗАЦІЯ ВЕБ-ОРІЄНТОВАНОГО РЕСУРСУ «FOODMART».
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 22094-01.
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5.4. Додаток Г. Публікація по темі кваліфікаційної роботи бакалавра в збірнику тез ЧДТУ.
5.5. Презентація у вигляді 28 слайдів.
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
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 95 с., 30 рис., 21 таблицю, 14
використаних джерел, 4 додатки.
Актуальність теми. Здоров’я людини, опірність до несприятливих умов
зовнішнього середовища, розумова та фізична працездатність, ефективність
навчання, обмін речовин, функція і структура всіх клітин, тканин і органів залежить
від характеру харчування. Враховуючи це, погіршення стану з контролем безпеки
виробництва продуктів, виснаження ґрунтів через недотримання сівозміни та сліпу
гонитву виробників продуктів харчування за зиском, що в свою чергу призведене
до зниження якості вироблюваних продуктів, може стати загрозою для здоров’я
населення. У зв'язку з вище переліченими фактами, збільшується потреба у доступі
саме до корисної, екологічно чистої фермерської продукції.
З розвитком інформаційних технологій з’являється все більше можливостей
налагодити комфортну взаємодію з малими фермерськими господарствами.
Звісно, вже зараз існує певна кількість сервісів замовлення фермерських
продуктів харчування, але лише мала частина з них здатна постачати саме якісні,
екологічно чисті товари та ефективно вирішувати поставлену проблему.
Мета роботи і задачі дослідження: Мета кваліфікаційної роботи
бакалавра – створення сучасного, веб-орієнтованого інформаційного ресурсу з
пошуком та замовленням сертифікованої продукції, призначеного для розміщення
та придбання товарів з різних фермерських господарств України.
Для досягнення поставленої мети в роботі розв’язуються наступні завдання:
– провести дослідження засобів для розробки веб-орієнтованого
інформаційного ресурсу для замовлення продуктів харчування;
– провести порівняльний аналіз основних аналогів для виокремлення важливих
рішень і уникнення можливих недоліків додатку;
– встановити функціональні та нефункціональні вимоги до розроблюваного
інформаційного ресурсу;
– здійснити вибір програмно-технічних засобів для розробки інформаційного
ресурсу «FOODMART»;
4
– розробити базу даних інформаційного ресурсу «FOODMART»;
– розробити інтерфейс веб-орієнтованого інформаційного ресурсу
«FOODMART» з урахуванням сучасних тенденцій та перевірених рішень;
– розробити веб-орієнтований інформаційний ресурс для замовлення товарів
від малих фермерських господарств «FOODMART»;
– виконати тестування веб-орієнтованого інформаційного ресурсу
«FOODMART».
Об’єкт дослідження: процес пошуку, підбору та замовлення якісних
фермерських продуктів харчування.
Предмет дослідження: веб-орієнтований інформаційний ресурс для
замовлення фермерських товарів.
Методи дослідження. В роботі застосовувалися: аналіз літератури з
проблеми дослідження, аналіз існуючих сайтів замовлення продуктів харчування
від фермерських господарств України, дослідження можливості програмування на
мові програмування JavaScript та його фреймворків: React, Node.js, Express.js.
Апробація результатів роботи. Основні положення і результати
кваліфікаційної роботи бакалавра доповідалися і були обговорені на студентській
конференції ЧДТУ (Черкаси, 2022).
Публікації. Результати кваліфікаційної роботи бакалавра опубліковані у
збірнику тез доповідей ЧДТУ: Михайлов С. В., Оксамитна Л. П. Проектування та
створення веб-орієнтованого інформаційного ресурсу для замовлення продукції від
малих фермерських господарств: Збірник тез доповідей студентської науково-
практичної конференції ЧДТУ : 19-22 квітня 2022 / [упорядник Мельник І.В.];
Міністерство освіти і науки України, Черкаський державний технологічний ун-т.
Черкаси : ЧДТУ, 2022. С. 66-67.
Перелік ключових слів: ІНФОРМАЦІЙНІ ТЕХНОЛОГІЇ, ВЕБ-РЕСУРС,
ПРОЕКТУВАННЯ, ФЕРМЕРСЬКЕ ГОСПОДАРСТВО, ЗАМОВЛЕННЯ
ПРОДУКЦІЇ.
5
ABSTRACT
Master’s work contains. 95 pages, 30 figures, 21 table, 14 sources used, 4
attachments.
Actuality of theme. Human health, resistance to adverse environmental
conditions, mental and physical performance, learning efficiency, metabolism, function
and structure of all cells, tissues and organs depends on the quality of nutrition. According
to this information, deteriorating food safety controls, soil depletion due following to
violation of crop rotation and blind pursuit of profit by food producers, which in turn lead
to lower quality products, can pose a threat to public health. Due to the above facts, needs
of access to useful, environmentally friendly farm products is increasing.
With the development of information technology, there are more and more
opportunities to establish comfortable interaction with small farms.
Of course, there are already a number of services for ordering farm food, but only
a small part of them is able to supply high-quality, environmentally friendly products and
effectively solve the problem.
Purpose and tasks of the research. The purpose of the bachelor's qualification
work – create a modern, web-oriented information resource with the search and ordering
of certified products, purchase and placement goods from various small farms in Ukraine.
To achieve this goal, the following tasks are solved in the work:
– conduct research on the means to develop a web-based information resource for
ordering food from farmers;
– to conduct a comparative analysis of the main analogues to identify important
decisions and avoid possible shortcomings of the application;
– establish functional and non-functional requirements for the develop an
information resource;
– to choose software and hardware for the development of information resources
"FOODMART";
– to develop a database of information resource "FOODMART";
– to develop the interface of the web-oriented information resource "FOODMART"
taking into account current trends and proven solutions;
6
– to develop a web-oriented information resource for ordering goods from small
farms "FOODMART";
– perform testing of web-oriented information resource "FOODMART".
The object of research: the process of finding, selecting and ordering quality farm
products.
The subject of research: web-based information resource for ordering farm
products.
Research methods: In work used: analysis of the literature on the research
problem, analysis of existing food ordering sites from farms of Ukraine, research of the
possibility of programming in the JavaScript programming language and its frameworks:
React, Node.js, Express.js..
Approval of the results of work. The main provisions and results of the bachelor's
qualification work were reported and discussed at the student conference of ChSTU
(Cherkasy, 2022).
Publications.
The results of the qualification work of the bachelor's degree were published in the
collection of abstracts of the advanced studies of the ChDTU: Mikhailov S.V., Oksamitna
L.P. April 22, 2022 / [commander Melnik I.V.]; Ministry of Education and Science of
Ukraine, Cherkasy State Technological University Cherkasi: ChDTU, 2022. P. 66-67.
The list of keywords: INFORMATION TECHNOLOGIES, WEB RESOURCE,
DESIGN, FARM, ORDER OF PRODUCTS.
7
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ .... 8
ВСТУП .............................................................................................................................. 9
1 НЕОБХІДНІСТЬ СТВОРЕННЯ ВЕБ-ОРІЄНТОВАНОГО ІНФОРМАЦІЙНОГО
РЕСУРСУ ДЛЯ ЗАМОВЛЕННЯ ПРОДУКЦІЇ ВІД МАЛИХ ФЕРМЕРСЬКИХ
ГОСПОДАРСТВ ............................................................................................................ 12
1.1 Теоретичні основи фермерських господарств .................................................. 12
1.2 Актуальність теми дослідження ......................................................................... 13
1.3 Порівняльний аналіз аналогів інформаційних ресурсів для замовлення
продукції ..................................................................................................................... 17
Висновки до розділу 1 ............................................................................................... 28
2 ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ВЕБ-ОРІЄНТОВАНОГО
ІНФОРМАЦІЙНОГО РЕСУРСУ «FOODMART» ..................................................... 29
2.1 Постановка задачі ............................................................................................... 29
2.2 Обґрунтування вибору сучасних веб-технологій для створення
інформаційного ресурсу для замовлення продукції ............................................... 31
2.3 Проектування архітектури бази даних веб-орієнтованого інформаційного
ресурсу «FOODMART» ……………………………................................................ 37
Висновки до розділу 2…………………………….. ................................................. 45
3 РЕАЛІЗАЦІЯ ВЕБ-ОРІЄНТОВАНОГО ІНФОРМАЦІЙНОГО РЕСУРСУ
«FOODMART» ............................................................................................................... 46
3.1 Розробка структури веб-орієнтованого ресурсу ............................................... 46
3.2 Розробка інтерфейсу веб-орієнтованого ресурсу …………………………….48
3.3 Тестування веб-орієнтованого інформаційного ресурсу «FOODMART»…..58
Висновки до розділу 3 ............................................................................................... 61
ВИСНОВКИ ................................................................................................................... 62
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ..................................................................... 63
Додаток А. Специфікація 482.ЧДТУ. 22094-01 ........................................................ 65
Додаток Б. Текст програми........................................................................................... 67
Додаток В. Інструкція користувача ............................................................................. 89
Додаток Г. Публікація по темі кваліфікаційної роботи бакалавра .......................... 93
8
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І
ТЕРМІНІВ
БД – база даних;
ІС – інформаційна система;
ПЗ – програмне забезпечення;
SQL (Structured Query Language) – структуризована мова запитів;
HTML – HyperText Markup Language;
CSS – Cascading Style Sheets;
DOM (Document Object Model) – об'єктна модель документа;
ORM (Object-Relational Mapping) – об'єктно-реляційне відображення;
API (Application Programming Interface) – інтерфейс програмування застосунків;
REST API (REpresentational State Transfer API) – репрезентативна передача стану
інтерфейсу програмування застосунків;
SPA (Single Page Application) – односторінковий додаток;
MPA (Multi Page Application) – багатосторінковий додаток;
JSX – JavaScript XML;
XML – eXtensible Markup Language;
ACID (Atomicity, Consistency, Isolation, Durability) – Атомарність, узгодженість,
ізоляція, довговічність;
MVCC (Multiversion Concurrency Control) – керування паралельним доступом за
допомогою багатоверсійності;
npm (node package manager) – менеджер пакетів.
9
ВСТУП
Ще давньогрецький філософ Сократ казав: "Здоров'я – не все, але все без
здоров'я – ніщо". Ці слова доволі чітко описують важливість цього найціннішого
ресурсу людини. Скільки б не було інших ресурсів, без здоров’я, людина не зможе
ними розпоряджатися. Здоров’я людини залежить від багатьох факторів: фізичної
активності, умов довкілля, психоемоційного стану людини, спадковості. Кожен з
них в певній мірі впливає на стан здоров’я людини, та серед них всіх виділяється
один найбільш впливовий фактор – харчування.
В прямому сенсі, людина є те, що вона їсть. Отримані з їжею нутрієнти
деструктуруються тілом людини на найменші частини та будуть використані для
створення клітин нашого організму. Цей процес надає людині здатність до
регенерації, забезпечує стабільний стан структур організму та підтримує її життя.
Враховуючи це, погіршення стану з контролем безпеки виробництва
продуктів, виснаження ґрунтів через недотримання сівозміни та сліпу гонитву
виробників продуктів харчування за зиском, що в свою чергу призведене до
зниження якості вироблюваних продуктів, може стати загрозою для здоров’я
населення.
З розвитком інформаційних технологій з’являється все більше можливостей
налагодити комфортну взаємодію з малими фермерськими господарства, що
виробляють якісну та екологічно чисту продукцію.
Звісно, зараз існують веб-ресурси та рішення, що допомагають замовляти
товари від фермерських господарств, але вагома частина з них має застарілий,
погано структурований інтерфейс, недостатній функціонал для швидкого пошуку
та підбору товару з необхідними параметрами, деякі з них застосовують
непротестовані рішення для організації елементів сторінок та меню, що ускладнює
використання сайту та призводить до важкого сприйняття користувачем. До того
ж, існуючі ресурси для замовлення товарів від фермерських господарств не
розміщують інформацію про результати перевірок продуктів харчування, вони не
гарантують їх якість. Існуючі аналоги не підтримують додатковий функціонал у
10
вигляді створення персональних замовлень користувача на вирощування
необхідних сортів рослинних культур та продуктів харчування. Але основним
недоліком є те, що більша частина ресурсів замовлення товарів від фермерських
господарств пропонують рішення тільки в локальному плані, та не впливають на
рішення проблеми в цілому.
Мета кваліфікаційної роботи бакалавра – створення сучасного, веб-
орієнтованого інформаційного ресурсу з пошуком та замовленням сертифікованої
продукції, призначеного для розміщення та придбання товарів з різних
фермерських господарств України.
Для досягнення поставленої мети в роботі розв’язуються наступні завдання:
– провести дослідження засобів для розробки веб-орієнтованого
інформаційного ресурсу для замовлення продуктів харчування;
– провести порівняльний аналіз основних аналогів для виокремлення важливих
рішень і уникнення можливих недоліків додатку;
– встановити функціональні та нефункціональні вимоги до розроблюваного
інформаційного ресурсу;
– здійснити вибір програмно-технічних засобів для розробки інформаційного
ресурсу «FOODMART»;
– розробити базу даних інформаційного ресурсу «FOODMART»;
– розробити інтерфейс веб-орієнтованого інформаційного ресурсу
«FOODMART» з урахуванням сучасних тенденцій та перевірених рішень;
– розробити веб-орієнтований інформаційний ресурс для замовлення товарів
від малих фермерських господарств «FOODMART»;
– виконати тестування веб-орієнтованого інформаційного ресурсу
«FOODMART».
Об’єктом дослідження є процес пошуку, підбору та замовлення якісних
фермерських продуктів харчування.
Предметом дослідження є веб-орієнтований інформаційний ресурс для
замовлення фермерських товарів.
Методи дослідження.
11
Для вирішення поставлених завдань були застосовані наступні методи
дослідження:
– теоретичний (аналіз літератури з проблеми дослідження);
– емпіричний – полягав у аналізі, спостереженні та налаштуванні існуючих
систем замовлення фермерських продуктів харчування;
– порівняльний – для здійснення порівнянь систем існуючих аналогів.
Для створення програмного забезпечення використано новітні технології, а
саме: JavaScript-фреймворк React, фреймворк Bootstrap, платформа Node.js з
фреймворком Express.js та ORM Sequelize, а також сервером і базою даних
PostgreSQL. Обрані технології задовольняють всім функціональним і не
функціональним вимогам до такого типу програмного забезпечення (ПЗ).
12
1 НЕОБХІДНІСТЬ СТВОРЕННЯ ВЕБ-ОРІЄНТОВАНОГО
ІНФОРМАЦІЙНОГО РЕСУРСУ ДЛЯ ЗАМОВЛЕННЯ ПРОДУКЦІЇ ВІД
МАЛИХ ФЕРМЕРСЬКИХ ГОСПОДАРСТВ
1.1 Теоретичні основи фермерських господарств
Аграрні господарства є основою економіки будь-якої держави. Саме за
рахунок цих господарств забезпечується продовольча безпека. Фермерські
господарства стали найбільш поширеними підприємствами в Україні. Такі
господарства виробляють широкий асортимент сільськогосподарської продукції
для внутрішніх потреб [1].
На даному етапі функціонування вітчизняного аграрного сектору фермерські
господарства являють собою важливу складову в системі аграрного
підприємництва, проте їхній вплив на загальний розвиток галузі не є визначальним.
Водночас вітчизняне фермерство є за сучасних умов єдиною можливістю
легалізувати товарне сільгоспвиробництво, яке сформоване на базі
домогосподарств та має постійно створювати і реалізовувати
конкурентоспроможну продукцію як запоруку забезпечення своєї подальшої
життєдіяльності. При цьому слід враховувати надзвичайно важливе соціально-
економічне значення самого факту функціонування малих форм аграрного бізнесу
для існування українського села.
Фермерським господарством вважається товарне сільськогосподарське
підприємство, власник якого самостійно веде господарство на своїй або
орендованій землі.
Малі підприємства здатні швидко реагувати на зміни попиту, змінювати
асортимент продукції в умовах кризи [1]. Сектор малого підприємництва являє
собою широку мережу підприємств, що діють в основному на місцевих ринках, які
пов’язані зі споживачем товарів і послуг. Невеликі розміри малих підприємств, їх
технологічна, виробнича і управлінська гнучкість дозволяють своєчасно реагувати
на ринкову кон’юнктуру. Ступінь розвитку малих форм господарювання в аграрній
13
сфері впливає на насичення ринку товарами, розширення конкуренції, зростання
зайнятості та сприяє підвищенню економічної ефективності агропромислового
виробництва. Малий бізнес є необхідним елементом ринкової економіки, що
створює необхідне конкурентне середовище, тим самим надаючи змогу
суспільству розвиватися. Розвиток малого бізнесу в аграрній сфері може
відбуватися в різних напрямах і різними способами. На сьогоднішній день сільське
господарство України представлене приватним сектором, що характеризується
різноманітними формами господарювання [1]. Найбільш поширеною формою
малого бізнесу в аграрній сфері є фермерські господарства та аграрні
домогосподарства, основною складовою яких є особисті селянські господарства.
Фермерські господарства є основою підприємництва в аграрній сфері, так як
принципи їх створення та функціонування найбільш повно відповідають цьому
явищу ринкової економіки. З розвитком фермерства на селі формується
повноцінний господарник-власник, відповідальний за ефективне використання
землі та інших засобів виробництва. Тому стійкі фермерські господарства являють
собою важливе джерело збільшення доходів сільського населення, насамперед
через створення робочих місць на селі [2, 3]. На сьогоднішній день фермерські
господарства є вагомою складовою виробників сільськогосподарської продукції,
але з кожним днем їм все важче працювати й сприяти забезпеченню продовольчої
безпеки України.
1.2 Актуальність теми дослідження
Харчування – складний процес надходження, перетравлювання,
всмоктування і засвоєння харчових речовин, які необхідні для відновлення
енергетичних витрат, процесу побудови та безперервного оновлення клітин і
тканин тіла, регуляції функцій організму.
Їжа є важливим чинником забезпечення життєдіяльності людини, росту та
розвитку організму, попередження та лікування багатьох захворювань. Доведено,
що біологічна роль компонентів їжі не обмежується лише їхнім значенням як
14
основних джерел пластичних та енергетичних ресурсів організму. З нею організм
отримує речовини, які сприяють утворенню ферментів, гормонів, інших
регуляторів обмінних процесів та життєдіяльності. Здоров’я молодої людини,
опірність до несприятливих умов зовнішнього середовища, розумова та фізична
працездатність, ефективність навчання, обмін речовин, функція і структура всіх
клітин, тканин і органів залежить від характеру харчування [4, 5].
Саме тому порушення в цьому важливому процесі призводить до суттєвих
проблем.
За даними ВООЗ, здоров’я людини на 70% залежить від того, що вона їсть.
Хвороби, спричинені неправильним та неякісним харчуванням, зумовлюють
понад 2/3 загальної захворюваності та близько 86% смертей українських громадян.
Нераціональне харчування суттєво впливає на тривалість життя людини та
призводить до виникнення та розвитку неінфекційних захворювань,
повідомляє МОЗ [6].
Тому безпеку харчових продуктів і продовольчої сировини відносять до
основних факторів, що визначають здоров'я населення України і збереження його
генофонду. Сам стан справ з безпекою продовольства в Україні, погіршився в
зв'язку з демонополізацією харчової промисловості, збільшенням обсягів
постачань з-за кордону, ослабленням контролю за виробництвом і реалізацією
продуктів харчування.
6 травня 2015 року Міністерство економічного розвитку та торгівлі України
(МЕРТ) своїм наказом № 451 «Про внесення змін до Переліку продукції, що
підлягає обов'язковій сертифікації в Україні, та визнання такими, що втратили
чинність, деяких наказів Державного комітету України зі стандартизації,
метрології та сертифікації» остаточно скасувало обов'язкову сертифікацію
харчової продукції, у тому числі дитячого харчування. Цим же наказом було
скасовано і Правила обов'язкової сертифікації харчових продуктів, затверджені
наказом Державного комітету України зі стандартизації, метрології та сертифікації
ще 2 червня 1997 року за №322 [7].
15
Це викликає серйозну тривогу. Результати контролю якості продуктів
харчування свідчать про високі рівні забруднення продуктів токсичними хімічними
сполуками, біологічними агентами і мікроорганізмами. Використання медичних
антибіотиків як харчової добавки, їхнє застосування у ветеринарній практиці
приводять до того, що вони виявляються в 15–26% продукції тваринництва і
птахівництва. Нераціональне використання в сільському господарстві добрив веде
до надлишкового нагромадження нітратів і важких металів у рослинницькій
продукції. Разом з тим викликають тривогу факти виявлення в окремих видах
продовольства, у тому числі дитячого харчування, одночасно декількох
пестицидів.
Майже половина підприємств молокопереробної промисловості
експлуатується від 25 до 50 років. Багато хто з них без капітального ремонту і
реконструкції. Понад 40% не мають необхідного холодильного устаткування,
близько 30% не забезпечені водою гарантованої якості, багато підприємств
знаходиться в незадовільному санітарно-технічному стані, відсутні спеціалізовані
організації по ремонту технологічного і холодильного устаткування [8].
З іншого боку, безперервний прогрес у напрямі європейської інтеграції та
впровадження в останні декілька років в Україні системи НАССР – міжнародно
визнаного метода виявлення та управління ризиками, пов’язаними із безпечністю
харчових продуктів, що став обов'язковим для всіх учасників ринку продуктів
харчування, дещо покращує ситуацію, але ще багато роботи необхідно зробити в
цьому напрямку. До того ж система НАССР стосується тільки безпечності
харчових продуктів і не стосується їх якості [9, 10].
Будь-які продукти, що з’являються в нашій тарілці легко можуть виявитися
генетично модифікованими. Суперечки про шкідливість чи нешкідливість
модифікованої їжі йдуть і, напевно, будуть тривати ще багато років. Обмовимося,
що створена для вивчення цього питання організація при Європейському союзі
беззастережно винесла вердикт про повну нешкідливість трансгенних продуктів
для вживання у якості страв людиною.
16
Незважаючи на це тільки деякі держави Євросоюзу дозволяють вирощувати
в себе або імпортувати генномодифіковані (ГМ) продукти. Офіційне пояснення це
турбота про правовий бік питання. У країнах СНД загальна точка зору на цю
проблему не вироблена, а ось трансгенні продукти завозяться в неконтрольованих
кількостях.
В наш час, одною з основних позицій, що вказує на шкідливість ГМ-
продуктів, полягає в тому, що мікроорганізми які населяють травний тракт людини
можуть вибирати посторонні гени і впроваджувати їх у себе. Так, методом
підселення, гени мають можливість функціонувати. Яким може бути їхній вплив на
організм людини? Існують гени, які активізують швидкий ріст та набування форми
в овочах і фруктах. Такі гени можуть сприяти росту різних новоутворень.
Генномодифіковані картопля та соя можуть бути причиною порушення функції
залоз внутрішньої секреції та алергічних реакцій [5].
За даними МОЗ України, лише 1% фінансування спрямовано безпосередньо
на профілактику захворювань, решта 99% коштів та уваги – на лікування громадян
[6].
У зв'язку з вище переліченими фактами, збільшується потреба у доступі саме
до корисної, екологічно чистої фермерської продукції. І можливості для цього
існують, адже фермерські господарства є найбільш поширеними підприємствами в
Україні. Але разом із тим малі та середні виробники якісних продуктів харчування
залишаються на рівні локального бізнесу та не мають сучасних каналів взаємодії з
клієнтами.
Тому актуальність теми дослідження, що розглядається в кваліфікаційній
роботі бакалавра, цілком обумовлена необхідністю створення зручного для
користувача веб-орієнтованого інформаційного ресурсу по замовленню продукції
від малих фермерських господарств.
17
1.3 Порівняльний аналіз аналогів інформаційних ресурсів для
замовлення продукції
Дослідивши велику кількість інформаційних ресурсів для замовлення
продукції, в кваліфікаційній роботі бакалавра визначено найкращі варіанти і
виокремлено особливості кожного з них для проектування власної розробки:
- сайт «TheLavka»;
- сайт «Наше.все»;
- сайт «FermerGreen».
Аналіз сайту інтернет магазину «The Lavka».
Для того, щоб визначитися з тим, як саме буде виглядати інформаційна
система «FOODMART», необхідно вивчити існуючі аналоги. Для аналізу було
обрано декілька сайтів інтернет-магазинів зі схожою тематикою і призначенням,
детальний аналіз яких представлено далі.
Першим розглянемо сайт «The Lavka», проаналізувавши його дизайн та
функціонал. Сайт «The Lavka» [11] знаходиться за адресою: https://thelavka.com/.
Проаналізуємо його недоліки та переваги.
Переваги:
– чудово оформлене меню товарів;
– інформативні картки з товарами;
– банер з додатковою інформацією.
Недоліки:
– великі картки товарів;
– неточна видача результатів пошуку;
– відсутня фільтрація товарів;
– відсутнє сортування товарів;
– погано помітні позначки при наведенні на картку;
– не структуровані елементи кабінету користувача – список з обраними
товарами знаходиться поза кабінетом користувача;
– нераціональне розміщення елементів форми замовлення товарів;
18
– відсутня інформація про контроль якості товарів;
– платформою непередбачена можливість на обробку особливих замовлень
клієнтів;
– на сторінці товару немає інформації щодо можливих варіантів доставки та
оплати замовлення;
– при пошуку певної категорії видається ненормована кількість товарів;
– мінімальна сума замовлення – 1000 грн;
Головна сторінка сайту «The Lavka» представлена на рис. 1.1.
Сайт складається з невеликого головного меню, логотипу з контактними
даними, випадаючого горизонтального меню товарів, банеру, та списку товарів.
Головне меню включає в себе додаткове меню з інформацією про новини,
виробників, можливості співпраці. Наступними елементами головного меню є
вкладки: “Про Нас”, “Чому саме ми”, “Доставка”, “Оплата”, кнопка обрання мови,
пошук, корзина.
Рисунок 1.1 – Головна сторінка сайту «The Lavka»
На головній сторінці користувача зустрічає доволі привабливий банер та
цікавий список категорій товарів.
Картки товарів займають значну частину сторінки, такий нестандартний
розмір карток в деякій мірі дезорієнтує покупця. Також через це важко розмістити
19
достатню кількість товарів у полі зору, тому на пошук необхідного товару потрібно
витратити більше часу.
На рис. 1.2 представлено загальний вигляд карток товарів.
Рисунок 1.2 – Загальний вигляд карток товарів
Картки товарів достатньо інформативні, вони відображають більшу частину
необхідних даних. Кнопки замовлення та додання товару до обраних погано
помітні. На рис. 1.3 зображено вигляд позначок на картках товарів при наведенні.
Деякі елементи кабінету користувача знаходяться поза його межами,
наприклад, меню обраних товарів користувача. Елементи сторінки оформлення
замовлення нераціонально розташовані, та не використовують доступне місце на
сторінці, в результаті чого форма приймає витягнуте положення, що робить її не
дуже зручною для користування.
Також у інтернет-магазині «The Lavka» відсутня фільтрація та сортування
товарів. При використанні пошуку іноді трапляється видача помилкових
результатів, що не відповідає шуканим товарам. На сторінці товару немає
інформації щодо можливих варіантів оплати та доставки замовлення.
Додатковим мінусом магазину є те, що мінімальна сума замовлення дорівнює
1000 гривень.
Вигляд форми оформлення замовлення відображено на рис. 1.4.
20
Рисунок 1.3 – Вигляд позначок на картці товару
Рисунок 1.4 – Вигляд форми оформлення замовлення
Аналіз сайту інтернет магазину «Наше.все».
Другим проаналізуємо сайт інтернет-магазину фермерської кооперації
«Наше.все». Сайт «Наше.все» [12] знаходиться за адресою: https://nashe-vse.com/.
Проаналізуємо його недоліки та переваги.
Переваги:
– чудово оформлене меню товарів;
– інформативні картки з товарами;
21
– привабливий дизайн;
– банер з додатковою інформацією;
– інформативний список категорій;
– інформацію про доставку та оплату на сторінці товару;
– оптимальний розмір карток товарів;
– правильно працюючий пошук;
– помітні позначки на картках товарів;
– сортування;
– фільтрація;
– раціональне розташування елементів на сторінці замовлення товару.
Недоліки:
– незначна кількість фільтрів;
– немає інформації про контроль якості товарів;
– платформою непередбачена можливість на створення особливих замовлень
від клієнтів.
Головна сторінка сайту «Наше.все» представлена на рис. 1.5.
Рисунок 1.5 – Головна сторінка сайту «Наше.все»
Зовнішній вигляд сайту «Наше.все» є одним з накращих серед інших аналогів
для замовлення фермерських товарів. Приємно вражає дизайн меню та карток
22
товарів, а також каталог категорій товарів сайту. Під банером та стрічкою нових і
найбільш популярних товарів, користувача зустрічає гарно оформлене, розширене
меню категорій.
На рис. 1.6 продемонстровано розширене меню категорій товарів сайту
«Наше.все».
Рисунок 1.6 – Розширене меню категорій товарів сайту «Наше.все»
Варто відмітити, що дуже добре працює система фільтрації, сортування та
пошуку товару на сайті, але мінусом є те, що параметрів для фільтрації часто не
вистачає, є можливість відфільтрувати тільки за ціною. Доволі вдалим є баланс між
інформативністю карток з товарами та їх розміром, вони гармонічно вписуються в
дизайн інтерфейсу і не викликають дискомфорту. На рис. 1.7 зображено фільтр та
сітка товарів сайту «Наше.все». Приємною перевагою є те, що всередині кожного
товару розміщена інформація про доставку та оплату замовлення, що безсумнівно,
є плюсом до інформативності та зручності сайту.
23
Рисунок 1.7 – Товари сайту «Наше.все»
Хоча інтерфейс оформлення замовлення виглядає дещо стиснуто, але
розташування елементів форми доволі раціональне, тому основні поля необхідні
для заповнення поміщаються на одному відрізку екрану, що робить взаємодію з
нею більш зручною. На рис. 1.8 зображений детальний вигляд форми оформлення
замовлення сайту «Наше.все».
Рисунок 1.8 – Форма оформлення замовлення сайту «Наше.все»
24
На мою думку, цей сайт є одним з найкращих аналогів тому, певну кількість
рішень, можна використати для власної розробки інформаційного ресурсу для
замовлення продукції від малих фермерських господарств.
Аналіз сайту інтернет магазину «FermerGreen».
Третім аналогом є сайт «FermerGreen». Сайт «FermerGreen» [13] знаходиться
за адресою: https://fermergreen.com.ua/. Проаналізуємо його недоліки та переваги.
Переваги:
– справно працюючий пошук;
– інформативні картки товарів;
– інформаційні блоки на головній сторінці, що описують основні особливості
сервісу;
– звичний дизайн корзини.
Недоліки:
– великі картки товарів;
– слабкий дизайн;
– відсутність головного меню, його замінює список категорій;
– категорій товарів не відформатовані;
– великий розмір карток товарів, позначки карток товарів розміщені майже
посеред картки, маленький текст;
– відсутнє сортування;
– відсутня фільтрація;
– оформлення замовлення з ручним вводом важливих даних.
Головна сторінка третього аналога виглядає хаотично, на місці головного
меню розміщений список категорій, текст якого замалий та погано помітний.
Заголовок сайту зливається з заднім фоном. В цілому, дизайн сайту доволі слабкий,
деякі елементи інтерфейсу навіть не мають оформлення.
Головна сторінка сайту «FermerGreen» представлена на рис. 1.9.
До переваг сервісу можна віднести інформативні блоки з основними
особливостями сайту, а також справно працюючий пошук.
25
Рисунок 1.9 – Головне меню сайту «FermerGreen»
Картки з товарами займають більшу частину сторінки, та незважаючи на це,
більша частина картки залишається незаповненою, а текст малим. Також позначка
розміщення товару в кошик покупця розташована майже посеред зображення. Але
картка товару має інформацію про рейтинг товару та кількість відгуків, що є
перевагою. На рис. 1.10 представлено вигляд товарів сайту «FermerGreen».
Рисунок 1.10 – Головне меню сайту «FermerGreen»
26
Також варто помітити, що у даного інтернет-ресурсу відсутнє сортування та
фільтрація товарів, що уповільнить пошук продукту з необхідними параметрами.
Кошик покупця оформлено непогано, розташування елементів вигладає доволі
звично і не викликає негативних емоцій. Сторінка оформлення замовлення
компактно розміщена, має просту структуру, що робить оформлення замовлення
більш комфортним та швидким, але недоліком є поле адреси доставки.
Заповнювати його потрібно вручну, хоча сервіс працює відправляючи посилки
поштою, та повинен мати список адрес поштових відділень. Інтернет магазин
«FermerGreen» стверджує, що працює з сертифікованою продукцією, але ніде на
сайті немає жодного розміщеного сертифікату для підтвердження якості продукту.
На рис. 1.11 зображений детальний вигляд форми оформлення замовлення сайту
«FermerGreen».
Рисунок 1.11 – Форма оформлення замовлення сайту «FermerGreen»
Підводячи підсумок аналізу сайту «FermerGreen», можна сказати, що хоча у
інтернет ресурсу є свої недоліки та недоробки, все-таки деякі елементи можна
використати для доповнення своєї розробки. У таблиці 1.1 представлено
порівняльний аналіз розглянутих аналогів, а саме: «TheLavka», «Наше.все»,
«FermerGreen».
27
Таблиця 1.1 – Таблиця порівнянь існуючих рішень розглянутих аналогів
Назва сайту Критерії порівняння сайтів
Дизайн Зручність Функціонал Сертифікати Особливі
(0-5) (0-5) (0-5) якості товарів замов-
лення
«The Lavka» 3 3 3 - -
«Наше.все» 5 5 5 - -
«FermerGreen» 2 3 3 - -
Підсумовуючи результати оцінювання та аналізу приведених вище аналогів,
варто зазначити, що всі вони мають спільні риси: це є сайт, який містить в
стандартні функції з пошуку та придбання продуктів харчування. Кожен
користувач має можливість знайти бажаний товар, переглянути його опис,
побачити інші відгуки про товар та залишити свій, додати продукт до кошику та
оформити замовлення. Також існує можливість додати товар до обраного. Треба
підмітити, що інтерфейс деяких з аналогів не є правильно оформленим і
побудованим у зв’язку з традиційною структурою веб-сайтів, через це при
взаємодії з інтерфейсом виникає певний дискомфорт, та не робить використання
сервісу зручним. Деяким з аналогів не вистачає необхідних функцій для більш
швидкого підбору потрібного товару. Жоден з розглянутих сайтів не розміщує
сертифікати якості для товарів, продажем яких займається та не підтримує функцію
прийому особливих замовлень від клієнтів.
Проаналізувавши існуючі рішення розглянутих реалізацій, в кваліфікаційній
роботі бакалавра при розробці веб-орієнтованого інформаційного ресурсу для
замовлення продукції від малих фермерських господарств «FOODMART»
пропонується звернути увагу на такі моменти:
– веб-орієнтований інформаційний ресурс «FOODMART» повинен мати
традиційний, зручний та привабливо оформлений інтерфейс;
– веб-орієнтований інформаційний ресурс «FOODMART» повинен мати весь
необхідний функціонал для пошуку, фільтрації та сортування товарів, функціонал
серед оцінок (0-5) має дорівнювати максимальному балу, а саме: 5;
28
– веб-орієнтований інформаційний ресурс «FOODMART» повинен мати
систему відгуків та оцінювання товарів;
– веб-орієнтований інформаційний ресурс «FOODMART» мати можливість
розміщення сертифікатів якості для товарів;
– веб-орієнтований інформаційний ресурс «FOODMART» повинен мати
можливість розміщення особливих замовлень від клієнтів.
Висновки до розділу 1
В даному розділі виконано аналіз аналогів з продажу продукції від
фермерських господарств: «TheLavka», «Наше.все», «FermerGreen».
Результати аналізу існуючих рішень надають представлення про переваги та
недоліки кожного з розглянутих веб-додатків.
Визначено основні групи вимог до розроблюваного веб-орієнтованого
інформаційного ресурсу для замовлення продукції від малих фермерських
господарств.
29
2 ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ВЕБ-ОРІЄНТОВАНОГО
ІНФОРМАЦІЙНОГО РЕСУРСУ «FOODMART»
2.1 Постановка задачі
Найбільш відповідним типом веб-ресурсу для замовлення продукції від
малих фермерських господарств є маркетплейс, такий вибір дозволить зробити
рішення універсальним для кожного міста, допоможе створити унікальний ринок
пропозицій та організувати вільну торгівлю, що стане можливістю для фермерів
реалізовувати продукцію на власних умовах.
Для користувача маркетплейс є доволі звичним та комфортним типом
інтернет-ресурсу, багатьом користувачам знайомий його функціонал та механізм
роботи, що також грає важливу роль, адже від того, наскільки зручний та
зрозумілий для користувача буде фунціонал і інтерфейс сайту, залежить успіх веб-
додатку. З боку облікового запису користувача, висунуті функціональні вимоги
мало чим відрізняються від звичного інтернет-магазину, це пошук та фільтрація
товарів, створення облікового запису, додавання товару до корзини, оформлення
замовлення, перегляд минулих замовлень та написання відгуків. Але є і певні
відмінності: це можливість розміщення оголошень – спеціальних замовлень на
вирощування певних сортів рослинних культур чи іншого товару.
Для облікового запису продавця більша частина також є доволі знайомою,
реєстрація магазину, створення та додавання товару до асортименту крамниці,
перегляд отриманих замовлень і відгуків, але як і у першому випадку є певні
особливості, це можливість розміщення сертифікатів якості власного товару та
збереження спеціальних замовлень користувача. Розміщення сертифікатів якості –
результатів перевірки товару, є необов’язковою, але привабливою можливістю,
адже продавець з сертифікованим товаром буде користуватися більшою
популярністю, ніж продавець, торгуючий продуктами невідомої якості. В свою
чергу збереження особливого замовлення користувача повідомить про
зацікавленість фермера у його виконанні.
30
До нефункціональних вимог можна віднести сучасний, звичний та
зрозумілий для користувача інтерфейс, швидку реєстрацію та базову для
маркетплейсів систему розмежування ролей доступу до сервісу, це необхідно для
розподілення функціонала між користувачем та продавцем.
Підсумовуючи вимоги до веб-орієнтованого інформаційного ресурсу, можна
виділити наступне:
Функціональні вимоги:
– створення облікового запису користувача;
– створення облікового запису магазину;
– додавання товарів до корзини;
– оформлення замовлень;
– розміщення спеціальних замовлень;
– додавання товарів у обране;
– перегляд статусу замовлення;
– перегляд історії замовлень;
– розміщення відгуків;
– пошук товарів;
– фільтрація товарів за ціною, способами оплати, способами доставки;
– сортування товарів за ціною;
– створення нового товару;
– додавання сертифікатів якості до кожного товару;
– перегляд отриманих замовлень;
– перегляд відгуків;
– збереження спеціальних замовлень.
Нефункціональні вимоги:
– зручний, сучасний інтерфейс;
– розмежування прав доступу до сервісу;
– швидка мінімалістична реєстрація.
31
2.2 Обґрунтування вибору сучасних веб-технологій для створення веб-
орієнтованого інформаційного ресурсу для замовлення продукції
Стек технологій – це набір інструментів, що застосовується при роботі в
проектах і включає фреймворки, мови програмування, додаткові бібліотеки та
модулі, системи управління бази даних, за допомогою яких будуть розроблятися
всі частини веб-додатка, починаючи від інтерфейсу користувача, та закінчуючи
базою даних. Розроблюваний проект відноситься до веб-орієнтованих додатків,
тому доцільно залучити технологічний стек JavaScript – PERN.
Абревіатура розшифровується наступним чином:
– P – PostgreSQL.
– E – Express.js.
– R – React.js.
– N – Node.js.
Повний список технологій, що були залучені для створення веб-
орієнтованого інформаційного ресурсу для замовлення продукції від малих
фермерських господарств «FOODMART», демонструє наступний список:
− HTML, CSS, Bootstrap;
− backend: платформа Node.js та фреймворк Express.js;
− frontend: мова програмування JavaScript та бібліотека React;
− система управління базою даних: PostgreSQL;
− orm: Sequelize.
Опишемо обґрунтованість даного вибору.
JavaScript – швидка, сучасна, високорівнева, об’єктно-орієнтована мова
програмування. По результатам опитування є найбільш популярною мовою
програмування, такий статус JavaScript утримує протягом багатьох років.
Являється №1 для написання клієнтської частини майже будь-якого веб-додатку.
Жоден сучасний браузер не обходиться без підтримки JavaScript, він використовує
модель DOM, яка має велику кількість функціоналу для роботи з різноманітними
об’єктами на сторінці, що робить його доволі легким для розробки та вирішення
32
встановлених цілей. JavaScript доволі універсальний, гарно працює з іншими
мовами програмування і може використовуватися в найрізноманітніших додатках.
Тому ще однією перевагою цієї мови є саме її поширеність. Цю мову можна
зустріти буквально всюди. JavaScript підтримується на всіх браузерах, всіх
операційних системах настільних комп'ютерів та мобільних пристроїв. Величезна
популярність робить JavaScript ще більш популярним та забезпечує його надійне
майбутнє серед інших мов програмування.
Bootstrap – це безкоштовний HTML, CSS та JS фреймворк з відкритим кодом,
який використовується веб-розробниками для швидкого створення адаптивних
дизайнів веб-додатків. Важливою перевагою Bootstrap, є його кросбраузерність,
кросплатформенність та зручний функціонал для забезпечення адаптивності сайту,
елементи інтерфейсу будуть коректно відображатися на екранах різного розміру
всіх браузерів та операційних систем. Також Bootstrap легко використовувати у
розробці, фреймворк дозволяє створювати веб-додатки в декілька разів швидше, за
рахунок вбудованих компонентів, в ньому доступні: кнопки, меню, модальні вікна,
форми, шаблони та інші готові рішення.
React – це бібліотека JavaScript для створення інтерфейсів на будь-якій
платформі, React не залежить від браузера. Бібліотека розробляється потужною
компанією Facebook, що у свою чергу забезпечує надійність та довготривалу
підтримку. На даний час React являється найбільш популярним фронтенд-
фреймворком.
Класичні сайти працюють на основі концепції MPA – багатосторінкового
додатку. В такому випадку додаток складається з певної кількості html файлів, та
скриптів, що підключається до них. Кожен html файл виступає окремою сторінкою
в додатку та об’єднується з іншими через спеціальні посилання, для переміщення
між ними. Мінусом є те, що при переході на іншу сторінку ми підвантажуємо
додаткові html файли, що містять спільні, однакові для всіх html сторінок елементи
– головне меню, бокові панелі, тощо. Тобто повторно завантажуємо однакові
елементи, що у свою чергу уповільнює роботу додатка.
33
Іншою концепцією є SPA – односторінкові додатки. В додатках даного типу
існує один html файл, наповнення якого генерується за допомогою JavaScript.
Перевагою такого рішення є висока швидкість роботи додатку, адже всі основні
елементи вже були заздалегідь завантажені, а повторювані елементи генеруються
один раз і з кожною зміною сторінки їх не потрібно повторно завантажувати. Саме
така концепція реалізовується бібліотекою React.
React працює по принципу компонентного підходу, розробник створюється
певну кількість компонентів та використовує їх для побудови додатку, розміщуючи
один в одного в необхідному порядку, створюючи таким чином складні та
розвинені інтерфейси.
Ще однією особливістю React є дерево react елементів, або віртуальне DOM-
дерево.
Вся структура веб-сторінки може бути представлена за допомогою DOM, що
являє собою організація елементів html, якими ми можемо маніпулювати,
змінювати, видаляти чи додавати нові. Однак, коли ми намагаємося маніпулювати
html-елементами за допомогою JavaScript, ми можемо зіткнутися зі зниженням
продуктивності, особливо при зміні великої кількості елементів. А операції над
елементами можуть зайняти деякий час, що неминуче позначиться на швидкості
роботи додатка.
Для вирішення проблеми продуктивності якраз і виникла концепція
віртуального DOM.
Віртуальний DOM є легковажною копією звичайного DOM. І відмінністю
React є те, що дана бібліотека працює саме з віртуальним DOM, а не звичайним.
Якщо відбуваються зміни в елементах DOM дерева, вони не вносяться до
його структури відразу, замість цього React будує копію DOM-дерева з оновленими
значенням та порівнює копію з минулою версією. Після того як React знаходить
різницю, відбувається візуалізація змін з розділенням за пріоритетом та вносить
більш важливі в першу чергу, для досягнення максимально плавного оновлення
зображення сторінки.
34
Через це веб-додатки написані з використанням бібліотеки React працюють
набагато ефективніше і швидше.
Корисною функцією React є написання html розмітки всередині JavaScript
файлу, це можливо завдяки JSX. JSX представляє спосіб опису візуального коду за
допомогою комбінації коду JavaScript і розмітки XML, що полегшить модифікацію
DOM і покращить читабельність коду.
Node.js – один з найпопулярніших інструментів для розробки серверної
частин засобами мови JavaScript. Node.js перетворює її на мову загального
призначення, з його допомогою на JavaScript можна використовувати не тільки для
розробки веб-сайту, а і для повноцінних додатків, що виконуються без підтримки
браузера. До переваг Node.js можна віднести його велику гнучкість та швидкість
написання, відносну простоту, що в забезпечує високу швидкість розробки.
Популярність JavaScript автоматично відноситься і до Node.js, що гарантує
підтримку спільноти та стрімкий розвиток. Ще однією особливістю є npm. Це
менеджер пакетів, що автоматично встановлюється з Node.js, він дозволяє
отримати та встановити велику кількість бібліотек і сторонніх модулів, написавши
при цьому тільки одну стрічку коду. Технологію Node.js використовують для веб-
ресурсів, які потребують активного обміну даними з користувачами. Поки Node JS
додаток чекає на відповідь від бази даних сервера, він обробляє інші запити, що
дозволяє працювати з тисячами з'єднань зберігаючи гарний темп роботи.
За допомогою Node.js були розроблені доволі відомі проекти, такі як Mozilla,
PayPal, eBay, Shutterstock, Walmart. Вагома частина яких є маркетплейсом або
інтернет-магазином, що ще раз підкреслює доцільність використання саме цією
технології.
Express.js – це популярний фреймворк та гнучка середа розробки на базі
Node.js, що використовується для створення надійного API та більш потужних і
розвинутих додатків. Основна перевага Express – швидкість, зменшення
необхідних часових витрат та збільшення комфортності розробки, що досягається
за рахунок розвинутого функціоналу обробки HTTP запитів та проміжних
обробників, а також надійного механізму маршрутизації, спрощення
35
налаштовування коду, просунутих інструментів взаємодії з контентами, та цілим
рядом готових конфігурацій для рішення різноманітних задач. Express
відзначається дуже високою продуктивністю, гарною здатністю до масштабування
та спільною для всіх JavaScript фреймворків гнучкістю. Express.js є чудовим
доповненням до Node.js, та за рахунок вище перелічених особливостей, робить
його зручним інструментом для розробки REST API.
SQL – це мова програмування структурованих запитів, що використовується
для взаємодії з базою даних, з ціллю збереження, пошуку, оновлення, вилучення та
видалення даних. База даних на основі SQL чудово підходить для систем
електронної комерції, бухгалтерського програмного забезпечення, та інших
систем, що орієнтовані на фінансові транзакції. У базі даних SQL встановлені чіткі,
структуровані зв’язки між рядками та стовпцями таблиць. Бази даних SQL
відповідають стандартам ACID.
ACID означає:
Атомарність – кожна транзакція буде повністю виконана, або не виконається
зовсім.
Узгодженість – записані в базу даних дані, мають відповідати всім
встановленим правилам.
Ізоляція – транзакції повинні виконуватися ізольовано від інших, тобто
жодна з транзакції не повинна впливати на іншу під час її виконання.
Довговічність – після того, як транзакція була завершена і зафіксована в базі
даних, вона залишиться в системі, навіть у разі збою.
Відповідність до стандартів ACID захищає цілісність даних вашої БД. Це
дозволить не допустити розсинхронізації таблиць бази даних, що відіграє важливу
роль для виконання фінансових транзакцій.
PostgreSQL – це одна з найбільш функціональних реляційних систем
управління базою даних, яка підтримується протягом 30 років та є однією з
найвідоміших серед усіх існуючих реляційних баз даних. База даних PostgreSQL
відрізняється від інших СУБД наявністю об'єктно-орієнтованих функціональних
можливостей, тобто підтримує як реляційні, так і нереляційні запити. Має повну
36
підтримку стандартів ACID, рівні ізоляції, ефективну серіалізація транзакцій, все
це робить її правильним вибором для платформ електронної комерції. Ще одна
відмінна риса PostgreSQL – висока масштабованість. Масштабованість PostgreSQL
стосується як обсягу даних, якими може керувати ця БД, так й кількості одночасно
працюючих у ній користувачів. Система здатна одночасно обробляти декілька
задач, вона має функцію MVCC для надання одночасного доступу до бази даних
великій кількості користувачів. PostgreSQL має повну SQL сумісність та підтримує
велику кількість різних типів даних та додаткових інструментів для роботи, в тому
числі можливість створювати власні плагіни. Додатковою перевагою для IT
проектів є те, що вона повністю безкоштовна та має відкритий системний код, це
означає, що вона постійно покращується профільною спільнотою з більш ніж 700
учасників. Ця СУБД зарекомендувала себе в багатьох відомих компаніях, серед
яких є Apple, Facebook, Skype. PostgreSQL набуває все більше популярності завдяки
набору функцій і постійному розвитку.
Sequelize – це ORM бібліотека для додатків написаних на мові Node.js.
ORM – інструмент, що дозволяє організувати взаємодію з реляційними
базами даних без використання мови SQL. Є багато інших ORM для роботи з
базами даних, але саме ця одна з найбільш функціональних та перевірених часом.
Sequelize працює через створення об’єктів моделі – абстракцій, що
представляють таблицю в базі даних. Модель повідомляє Sequilize про параметри
таблиці, те які колонки вона містить, яким типам даних вони відповідають, та деякі
додаткові параметри, наприклад дозвіл для поля на відсутність значення.
Використовуючи Sequelize необхідно тільки створювати об’єкти моделей та
викликати методи запитів, що усуває необхідність в написанні складних операторів
SQL, а також дозволяє уникнути зайвих помилок. Зв’язки між полями Sequelize
встановить автоматично, потрібно тільки вказати тип зв’язку між таблицями
спеціальними командами. Sequelize дозволяє спростити роботу з базою даних та
значно пришвидшити швидкість розробки.
37
2.3 Проектування архітектури бази даних веб-орієнтованого
інформаційного ресурсу «FOODMART»
Під час розробки веб-орієнтованого інформаційного ресурсу для замовлення
товарів від малих фермерських господарств у вигляді сайту «FOODMART» було
створено двадцять таблиць: user, wishlist, wishlist_product, cart, order, order_item,
special_order, store_special_order, store, location, deliver, store_deliver, payment,
store_payment, store_review, product, category, product_category, product_review,
certificate.
В розробленій базі даних існують 4 головні таблиці та 16 допоміжних, що
забезпечують декомпозицію бази даних та збереження додаткової інформації.
До головних таблиць відносяться:
– user – таблиця, створена для збереження облікових записів користувачів;
– store – таблиця, створена для збереження облікових записів магазинів;
– product – таблиця, створена для збереження товарів;
– order – таблиця, створена для збереження замовлень користувача.
До допоміжних таблиць відносяться:
– cart – таблиця, створена для збереження кошика користувача для додавання
товарів;
– product_review – таблиця, створена для збереження інформації про відгуки
користувача про придбані товари;
– store_review – таблиця, створена для збереження відгуків користувача про
магазини;
– special_order – таблиця, створена для збереження спеціальних замовлень
користувача;
– store_special_order – таблиця, створена для збереження магазином
спеціальних замовлень розміщених користувачем;
– delivery – таблиця, створена для збереження можливих варіантів доставки;
– store_delivery – таблиця, створена для збереження варіантів доставки, що
підтримуються магазином;
38
– payment – таблиця, створена для збереження можливих варіантів оплати;
– store_payment – таблиця, створена для збереження варіантів оплати, що
підтримуються магазином;
– wishlist – таблиця, створена для збереження списку з обраними товарами
користувача;
– wishlist_product – таблиця, створена для збереження товарів, що будуть
відображатися у списку обраних товарів користувача;
– location – таблиця, створена для збереження переліку населених пунктів, в
яких працює сервіс, та можливе створення магазинів;
– order_item – таблиця, створена для збереження товарів доданих користувачем
до замовлення;
– certificate – таблиця, створена для збереження сертифікатів, що будуть
розміщуватися на сторінці товару;
– category – таблиця, створена для збереження можливих категорій товарів;
– product_category – таблиця, створена для збереження відповідностей
товарами та їх категоріями.
Таблиці: cart, store_review, special_order, wishlist, store, product_review
зв’язані з першою головною таблицею – user.
Другою головною сутністю є таблиця store, з нею пов’язані такі таблиці: user,
store_review, store_special_order, store_deliver, store_payment, product, order,location.
З третьою головною таблицею product пов’язані:
order_item,product_review,wishlist_product, certificate, product_category.
Зв’язок з останньою головною таблицею order підтримують:
order_itme,store,cart.
Також варто підкреслити зв’язок між таблицями wishlist та wishlist_product,
delivery та store_delivery, payment та store_payment, category та product_category.
Структура бази даних зображена на рис. 2.1.
39
Рисунок 2.1 – Структура бази даних
Розглядаючи схему бази даних, можна помітити, що деякі стовпці таблиць
об’єднані між собою та з основними таблицями зовнішніми ключами для
дотримування правил створення реляційних баз даних.
Розглянемо короткий опис назв таблиць та їх призначення.
В таблиці 2.1 представлено повний опис користувача.
Таблиця 2.1 – Таблиця повного опису користувача
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Логін varchar 13 login
Пароль varchar 255 password
Ім’я та прізвище varchar 128 name
Роль користувача varchar 255 role
В таблиці 2.2 представлено повну інформацію про обліковий запис магазину.
40
Таблиця 2.2 – Таблиця повного опису облікового запису магазину
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Ідентифікатор int 2147483647 name
користувача
Назва магазину varchar 255 name
Іконка магазину text 65535 img
Локація магазину int 2147483647 location_id
В таблиці 2.3 представлено повну інформацію про товар.
Таблиця 2.3 – Таблиця повного опису товару
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Назва varchar 255 name
Статус varchar 100 status
Ідентифікатор int 2147483647 store_id
магазину
Зображення товару text 65535 img
Ціна decimal 922337203685477.5807 price
Кількість int 2147483647 amount
Опис text 65535 info
В таблиці 2.4 представлено повну інформацію про замовлення користувача.
Таблиця 2.4 – Таблиця повного опису замовлення користувача
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Номер замовлення int 2147483647 order_number
Ідентифікатор кошику int 2147483647 cart_id
Ідентифікатор int 2147483647 store_id
магазину
Статус varchar 100 status
41
Кількість предметів int 2147483647 order_items_amount
Загальна ціна decimal 2147483647 total_price
В таблиці 2.5 представлено повну інформацію про кошик користувача.
Таблиця 2.5 – Таблиця повного опису кошика користувача
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Ідентифікатор int 2147483647 user_id
користувача
В таблиці 2.6 представлено повну інформацію про таблицю відгуків про
товари, а в таблиці 2.7 – повну інформацію про таблицю відгуків про магазини.
Таблиця 2.6 – Таблиця повного опису відгуків про товари
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Ідентифікатор int 2147483647 user_id
користувача
Ідентифікатор товару int 2147483647 product_id
Оцінка int 2147483647 rate
Коментар text 65535 text
Таблиця 2.7 – Таблиця повного опису таблиця відгуків про магазини
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Ідентифікатор int 2147483647 user_id
користувача
Ідентифікатор int 2147483647 store_id
магазину
Оцінка int 1 rate
Коментар text 65535 text
В таблиці 2.8 представлено повну інформацію про таблицю спеціальних
замовлень користувача.
42
Таблиця 2.8 – Таблиця повного опису спеціальних замовлень користувача
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Ідентифікатор int 2147483647 user_id
користувача
Текст замовлення varchar 255 text
Категорія int 2147483647 category_id
В таблиці 2.9 представлено повну інформацію про відповідності між
спеціальними замовленнями та магазинами, що їх зберегли.
Таблиця 2.9 – Таблиця повного опису відповідностей між спеціальними
замовленнями та магазинами, що їх зберегли
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 special_order_id
спеціального
замовлення
Ідентифікатор int 2147483647 store_id
магазину
В таблиці 2.10 представлено повну інформацію про можливі варіанти
доставки.
Таблиця 2.10 – Таблиця повного опису варіантів доставки товару
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Назва варіанту varchar 255 name
В таблиці 2.11 представлено повну інформацію про варіанти доставки, що
підтримає магазин.
43
Таблиця 2.11 – Таблиця повного опису варіантів доставки магазину
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 store_id
магазину
Ідентифікатор int 2147483647 delivery_id
доставки
В таблиці 2.12 представлено повну інформацію про можливі варіанти оплати.
Таблиця 2.12 – Таблиця повного опису варіантів оплати
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Назва варіанту varchar 255 name
В таблиці 2.13 представлено повну інформацію про варіанти оплати, що
підтримуються магазином.
Таблиця 2.13 – Таблиця повного опису варіантів оплати, що підтримуються
магазином
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 store_id
магазину
Ідентифікатор оплати int 2147483647 payment_id
В таблиці 2.14 представлено повну інформацію про список для додавання
обраних товарів користувача.
Таблиця 2.14 – Таблиця повного опису списку для додавання обраних товарів
користувача
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Ідентифікатор int 2147483647 user_id
користувача
В таблиці 2.15 представлено повну інформацію про товари збережених
користувачем до списку обраного.
44
Таблиця 2.15 – Таблиця повного опису товарів доданих до списку обраного
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор списку int 2147483647 wishlist_id
Ідентифікатор int 2147483647 product_id
продукту
В таблиці 2.16 представлено повну інформацію про можливий список
локацій для створення магазинів.
Таблиця 2.16 – Таблиця повного опису можливих локацій
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Назва локації varchar 255 name
В таблиці 2.17 представлено повну інформацію про додані до замовлення
користувача товари.
Таблиця 2.17 – Таблиця повного опису доданих до замовлення товарів
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Ідентифікатор int 2147483647 order_id
замовлення
Ідентифікатор int 2147483647 product_id
продукту
Кількість одиниць int 2147483647 amount
продукту
Загальна ціна decimal 922337203685477.5807 total_price
В таблиці 2.18 представлено повну інформацію про сертифікати якості
товарів.
В таблиці 2.19 представлено повну інформацію про можливі категорії
товарів.
45
Таблиця 2.18 – Таблиця повного опису сертифікатів якості продуктів
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Ідентифікатор int 2147483647 product_id
продукту
Дата перевірки date 5874897 date
Файл сертифікату text 65535 file
Оцінка int 1 mark
Таблиця 2.19 – Таблиця повного опису категорій товарів
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор int 2147483647 id
Назва категорії varchar 100 name
В таблиці 2.20 представлено повну інформацію про відповідності між
товарами та їх категоріями.
Таблиця 2.20 – Таблиця повного опису відповідностей між товарами та їх
категоріями
Властивість Тип Розмірність Ідентифікатор
Ідентифікатор товару int 2147483647 product_id
Ідентифікатор int 2147483647 category_id
категорії
Висновки до розділу 2
В цьому розділі представлений опис функціональних та нефункціональних
вимог, описано основний технологічний стек, приведено переваги та обґрунтовано
вибір кожної з технологій веб-програмування для проектування і розробки веб-
орієнтованого інформаційного ресурсу «FOODMART» для замовлення товарів від
малих фермерських господарств.
Представлено архітектуру бази даних та описано кожну з її таблиць.
46
3 РЕАЛІЗАЦІЯ ВЕБ-ОРІЄНТОВАНОГО ІНФОРМАЦІЙНОГО РЕСУРСУ
«FOODMART»
3.1 Розробка структури веб-орієнтованого ресурсу
Кожен веб-орієнтований ресурс складається з клієнтської – фронтенд та
серверної – бекенд частини. Клієнтська частина відповідає за обробку запитів
користувача, відображення інформації і обробку деяких операцій, серверна частина
відповідає за обробку запитів надісланих з клієнтської частини, взаємодію з базою
даних для збереження, завантаження, оновлення та видалення інформації, а також
виконує основну частину операцій, обрахунків, якщо цього потребує додаток.
Перейдемо до розгляду структури ресурсу.
В директорії baсkend знаходяться модулі та файли для роботи серверної
частини, в директорії frontend розміщені ті, що необхідні для функціонування
клієнтської. На рис. 3.1 зображена структура проекту.
Рисунок 3.1 – Структура проекту «FOODMART»
47
Розглянемо перш за все файли та директорії серверної частини. Структура
серверної частини складається з моделей, роутерів, контролерів і файлів, що
виконають певні організаційні роботи та об’єднують всі перелічені вище модулі та
директорії. У файлі .env розміщені змінні, що відповідають за збереження основної
інформації, необхідної для підключення до бази даних та запуску сервера.
Всі ці дані використовуються в файлі db.js для створення об’єкту бази даних,
через який в подальшому буде відбуватися взаємодія з самою базою даних.
Створення відбувається за допомогою модуля Sequelize, що в декілька разів
спростить роботу з базою даних під час розробки додатку. Об’єкт бази даних
імпортується в index.js, головний файл серверної частини, в якому відбувається
підключення до бази даних через створений раніше об’єкт. Директорія models
містить файл models.js, що розміщує в собі опис об’єктів таблиць бази даних.
Надалі створені об’єкти будуть використовуватися для виконання операцій з
відповідними до них таблицями.
Файл index.js має встановлений маршрут прийому запитів з клієнтської
частини веб-ресурсу, після відправлення, запит, в залежності від шляху по якому
був направлений, направляється до роутера через файл index.js з директорії routes,
що об’єднує всі бекенд роутери, кожен з яких обробляє запити для конкретної
категорії компонентів та сутностей, таких як користувач, товар, магазин, тощо.
Всередині роутера конкретної категорії прописані шляхи, та відповідні до
цих шляхів контролери, що безпосередньо будуть обробляти отримані запити. В
кожному контролері описані методи, які викликаються для обробки запиту, що
пройшов по одному з шляхів. У методах наведено алгоритми перевірки, обробки
запиту, взаємодії з таблицями бази даних, після завершення всіх процедур на
клієнтську частину додатку відправиться відповідь з результатом обробки.
Клієнтська сторона додатку складається з директорій компонентів, сторінок,
локального сховища даних, запитів, констант і декількох важливих службових
файлів, що налагодять взаємодію та організують запуск елементів додатку.
В директорії components зберігаються окремі частини інтерфейсу, та
функціональні модулі, які будуть спільними для всіх сторінок, наприклад, головне
48
меню. Папка pages містить сторінки, що будуть генеруватися у основному файлі
програми при переході на них. Файл routes.js відповідає за зберігання масивів, які
містять шлях до сторінок та їх компонентів. Масиви використовуються для
розмежування сторінок, які можуть відвідувати зареєстровані та незареєстровані
користувачі. За допомогою цих даних, у файлі AppRoutes.js з директорії
components, буде відбуватися генерації маршрутів для переходу по сторінкам
сайту. Директорія storage розміщує в собі файли та класи основних сутностей
додатку, саме вони відповідають за збереження отриманих з бекенду даних для
відображення на сторінках веб-ресурсу. Директорія http являється ланкою, що
зв’язує клієнтську та серверну частини, адже містить файли, що відповідають за
прийом та передачу запитів до серверу. Всередині App.js розміщені теги для
генерації компонентів сайту, у свою чергу файл App.js монтується всередину файлу
index.js, що виконує фінальне розміщення програми у файлі index.html, що буде
єдиним html файлом, який буде завантажений браузером для взаємодії з сайтом.
3.2 Розробка інтерфейсу веб-орієнтованого ресурсу
Інтерфейс – один з найвагоміших критеріїв, що забезпечує успіх веб-ресурсу,
адже від того наскільки інтерфейс буде інтуїтивно зрозумілий, правильно
структурований та відповідно оформлений залежить зручність його використання
і перші враження користувача, що в підсумку визначать відношення до цього
ресурсу та його популярність. Оскільки в даному випадку розробляється веб-
орієнтований інформаційний ресурс для замовлення продукції від малих
фермерських господарств, то доцільно орієнтуватися на структуру онлайн-
магазинів та маркетплейсів. Розглянемо зовнішній вигляд основних компонентів.
Головна сторінка веб-ресурсу. Важливою частиною будь-якого ресурсу є
його титульна, головна сторінка, що одразу дає представлення про організацію та
призначення веб-ресурсу.
Головне меню веб-ресурсу «FOODMART» буде складатися з: логотипу,
списку вибору міста для ранжування товарів доступних у обраній локації,
49
декількох сторінок для додаткового інформування користувача, контактної
інформації та посилань на соціальні мережі, каталогу з категоріями товарів,
пошуку, кнопки реєстрації облікового запису та входу в нього, кошика покупця.
Після входу в обліковий запис меню зміниться, замість кнопки входу
з’явиться перехід до кабінету користувача.
Друга частина головної сторінки складається з банера, декількох
інформаційних блоків, що пояснює новому користувачу про особливі риси та
можливості даного веб-ресурсу.
Також на головній сторінці розміщене додаткове меню з вибором категорій,
для більш швидкого та комфортного пошуку необхідної категорії, адже шукати їх
в обмеженому по розміру випадаючому списку не завжди буває зручним. Після
чого користувача зустрічає стрічка з акційними та популярними товарами.
На рис. 3.2 демонструється макет головного меню веб-ресурсу
«FOODMART».
Вікно реєстрації.
Форми реєстрації та входу виконані у мінімалістичному форматі та
представлять з себе модальне вікно. Першим після натискання на кнопку входу та
реєстрації з’являється вікно входу, вхід відбувається за введенням мобільного
телефону та пароля. У разі, якщо в користувача відсутній обліковий запис, внизу
форми входу розміщена кнопка реєстрації, яка переміщує користувача на друге
модальне вікно, де відбувається введення необхідних даних та після натискання на
кнопку реєстрації запускається ряд механізмів по створення облікового запису.
50
Рисунок 3.2 – Головна сторінка веб-ресурсу «FOODMART»
Вигляд макету вікна реєстрації зображено на рис. 3.3.
Рисунок 3.3 – Макет вікна реєстрації веб-ресурсу «FOODMART»
Картка товару.
Картка товару містить в собі фото товару, інформацію про наявність, ціну,
рейтинг та кількість відгуків, а також дані про назву і рейтинг магазину продавця.
51
На картці присутня кнопка придбання товару та кнопка додавання продукту до
обраного, що з’являється при наведенні на товар. Переглянути макет картки товару
можна на рис. 3.4.
Сітка товарів.
Сітка товарів магазину складається з двох частин, зліва розташована панель
з назвою обраної категорії, варіантами сортування та списком доступних для
категорії варіантів фільтрування списку товарів. Права частина займає більшу
частину сторінки та вміщує в собі список з картками товарів. Макет сітки товарів
зображено на рис. 3.5.
Рисунок 3.4 – Макет вікна реєстрації веб-ресурсу «FOODMART»
Рисунок 3.5 – Макет сітки товарів веб-ресурсу «FOODMART»
52
Сторінка товару.
Сторінка товару зображена на рис. 3.6. Вона включає в себе фотографію
товару, його опис, назву, статус та рейтинг, а також відомості про сертифікати
якості товару, варіанти доставки і оплати та інформацію про магазин продавця.
Рисунок 3.6 – Макет сторінки товару веб-ресурсу «FOODMART»
Кошик.
Кошик реалізований у вигляді модального вікна, всередину якого розміщені
товари для формування замовлення, в самій горі наповнення кошика розташована
назва магазину, його рейтинг та інформація про доданий товар, що включає в себе:
фото, назву, рейтинг, сертифікати якості, ціну та кількість одиниць товару для
придбання. Внизу форми знаходиться інформація про загальну суму замовлення та
кнопка, що переносить користувача на сторінку оформлення замовлення. Макет
кошика користувача зображено на рис. 3.7.
53
Рисунок 3.7 – Макет кошика користувача веб-ресурсу «FOODMART»
Сторінка оформлення замовлення.
Сторінка оформлення замовлення складається з двох основних частин. В
лівій частині знаходяться три блоки, що вміщують в себе форми для введення
контактної інформації, обрання способу доставки, та вибору способу оплати. Права
частина вміщує в собі інформацію про магазин продавця та товари, що планує
придбати користувач. В нижній частині розташоване поле загальної суми до сплати
замовлення та кнопку оформлення замовлення.
Макет сторінки оформлення замовлення продемонстровано на рис. 3.8.
Рисунок 3.8 – Макет оформлення замовлення веб-ресурсу «FOODMART»
54
Сторінка особливих замовлень користувача.
Сторінка особливих замовлень складається з модифікованого категоріями
меню, що було використано при розробці сітки товарів та списку особливих
замовлень користувачів.
Особливе замовлення складається з короткої назви, тексту замовлення та
дати розміщення.
Над списком оголошень знаходиться кнопка додання особливого
замовлення. Макет сторінки зображено на рис. 3.9.
Рисунок 3.9 – Макет особливих замовлень веб-ресурсу «FOODMART»
Кабінет користувача.
Доступ до кабінету відкривається одразу після реєстрації або входу
користувача, кабінет складається з панелі пунктів меню та вікна, що буде
генерувати відповідне до пунктів меню представлення.
До пунктів меню входять: список обраних товарів, історія замовлень, що
вміщує в собі горизонтальні картки замовлень та панель перемикача, який замінює
відображенням звичайних замовлень користувача на особливі.
По схожій структурі реалізований пункт відгуків, панель перемикача якого
замінює відображення відгуків про товари на відгуки про магазини продавців.
Структуру макету кабінету та списку обраних товарів користувача можна
переглянути на рис. 3.10.
55
Структуру макету замовлень та особливих замовлень у кабінеті користувача
можна переглянути на рис. 3.11 та рис. 3.12 відповідно.
Рисунок 3.10 – Макет кабінету користувача та списку обраних товарів
веб-ресурсу «FOODMART»
Рисунок 3.11 – Макет кабінету користувача та списку замовлень
веб-ресурсу «FOODMART»
56
Рисунок 3.12 – Макет кабінету користувача та списку особливих замовлень
веб-ресурсу «FOODMART»
Структуру макету відгуків у кабінеті користувача зображено на рис. 3.13.
Рисунок 3.13 – Макет списку відгуків та його відображення на веб-ресурсі
«FOODMART»
Кабінет продавця.
Кабінет продавця реалізованій по тій самій структурі, що й кабінет
користувача. Різниця буде полягати в генерації нових пунктів меню, що різняться
57
від ролі, що має обліковий запис. Замість списку обраних товарів будуть
розміщуватися два нових пункта меню, що відповідають за створення товару та
перегляду товарів, якими торгує продавець.
Переглянути макети сторінки перегляду товарів продавця та сторінки
створення товару зображено на рис. 3.14 та рис. 3.15 відповідно. Сторінка
перегляду товарів відповідає сторінці з сіткою товарів, за виключенням бокового
меню кабінета продавця. Сторінка створення товару вміщує в себе декілька форм,
що відповідають за додавання фотографій, сертифікатів, характеристик та опису
товарів.
Рисунок 3.14 – Макет кабінету продавця та представлення сторінки
перегляду товарів продавця веб-ресурсу «FOODMART»
58
Рисунок 3.15 – Макет кабінету продавця та представлення сторінки
створення товару веб-ресурсу «FOODMART»
3.3 Тестування веб-орієнтованого інформаційного ресурсу
«FOODMART»
Тестування – це перевірка сайту, що спрямована на виявлення відхилень,
тобто процес пошуку помилок (багів), а також перевірка його оптимізації, пошук
можливих вразливостей. Одним з безкоштовних та універсальних інструментів
перевірки веб-сайтів є програмне забезпечення компанії Google під назвою Google
Lighthouse. Це інструмент для оцінки якості сайту, що допомагає провести аналіз,
оцінити отримані результати та висунути рекомендації для покращення його
роботи.
Одним з критеріїв аналізу Lighthouse є швидкість роботи сайту, вона
складається з 6 метрик:
– First ContentFul Paint. Фіксує час, за який перший текст або зображення
відобразилося на екрані.
– Speed Index. Показує наскільки швидко відображається наповнення сторінки.
– Time to Interactive. Демнострує час, за який сторінка стала інтерактивною –
відповідає на дії користувача.
– Total Blocking Time. Час, за який користувач не може нічого робити на сайті,
59
час завантаження сторінки.
– Largest Contentful Paint. Фіксує час, за який більша частина сторінки
завантажилась.
– Cumulative Layout Shift. Цей показник вимірює зміщення елементів під час
завантаження інтерфейсу.
Після оцінювання цих метрик відбудеться їх порівняння з метриками інших
сайтів, в результаті чого буде визначено значення за стобальною шкалою, що буде
демонструвати наскільки швидше працює сайт порівняно з іншими веб-ресурсами.
100 балів означають результат кращій ніж у 98% сайтів, 50 балів – краще ніж 75%.
Результати тестування оптимізації веб-орієнтованого інформаційного
ресурсу «FOODMART» можна переглянути на рис. 3.16.
Рисунок 3.16 – Результати тестування оптимізації веб-орієнтованого
інформаційного ресурсу «FOODMART»
Показники метрик швидкості роботи веб-орієнтованого інформаційного
ресурсу «FOODMART» зображено на рис. 3.17.
60
Рисунок 3.17 – Показники метрик швидкості роботи веб-орієнтованого
інформаційного ресурсу «FOODMART»
Як бачимо з метрик, веб-орієнтований інформаційний ресурс «FOODMART»
має доволі значну швидкість роботи, але показник Cumulative Layout Shift отримав
достатньо велике значення через динамічну генерацію сторінки.
Також веб-ресурс знайшов декілька багів та згенерував поради для
покращення його роботи, а саме: застереження, щодо вразливостей під’єднаних
бібліотек та порада про відображення зображення з урахуванням їх пропорцій.
Результат перевірки зображено на рис. 3.18.
Рисунок 3.18 – Поради для покращення роботи веб-ресурсу «FOODMART»
61
Висновки до розділу 3
В цьому розділі розглянуто особливості розробки структури веб-ресурсу,
пояснено взаємодію основних компонентів програми, що забезпечують роботу та
справне його функціонування. Розроблено та описано інтерфейс головних
компонентів ресурсу з урахуванням сучасних трендів та перевірених рішень.
Виконано тестування веб-орієнтованого ресурсу «FOODMART» для замовлення
товарів від малих фермерських господарств засобами універсального інструменту
для перевірки веб-додатків Lighthouse.
62
ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра досягнута. В ході її виконання
створено сучасний веб-орієнтований інформаційний ресурс з пошуку та
замовлення сертифікованої продукції, призначений для розміщення та придбання
товарів з різних фермерських господарств України.
Для досягнення поставленої мети в роботі розв’язувалися наступні завдання:
– проведено дослідження засобів для розробки веб-орієнтованого
інформаційного ресурсу для замовлення продуктів харчування;
– проведено порівняльний аналіз основних аналогів для виокремлення
важливих рішень і уникнення можливих недоліків додатку;
– встановлено функціональні та нефункціональні вимоги до розроблюваного
інформаційного ресурсу;
– здійснено вибір програмно-технічних засобів для розробки інформаційного
ресурсу «FOODMART»;
– розроблено базу даних інформаційного ресурсу «FOODMART»;
– розроблено інтерфейс веб-орієнтованого інформаційного ресурсу
«FOODMART» з урахуванням сучасних тенденцій та перевірених рішень;
– розроблено веб-орієнтований інформаційний ресурс для замовлення товарів
від малих фермерських господарств «FOODMART»;
– виконано тестування веб-орієнтованого інформаційного ресурсу
«FOODMART».
63
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Андрійчук В.Г. Економіка аграрних підприємств / Підручник. 2-ге вид., доп. і
перероблене / В.Г. Андрійчук. К. : КНЕУ, 2002. 624 с.
2. Горьовий В.П. Розвиток і сучасний стан функціонування фермерських
господарств регіону / В.П. Горьовий // Економіка України. 2017. № 12. С. 61-68.
3. Колокольчикова І.В. Сучасний стан розвитку фермерських господарств / І.В.
Колокольчикова // Держава та регіони. 2018. № 3. С. 71-74.
4. Буц М. Формування культури здорового харчування школярів. Молодий
вчений. 2017. №9.1 (49.1). С. 13–15.
5. Олексієнко Я. І., Шахматов В. А., Верещагіна О. П. Харчування та його вплив
на здоров’я людини. Черкаси, 2014. 42 с.
6. 2/3 усіх хвороб в Україні є наслідком неправильного харчування – МОЗ.
URL: https://life.pravda.com.ua/health/2017/05/30/224444/#:~:text=2%2F3 (дата
звернення: 01.03.22).
7. Отмена обязательной сертификации пищевой продукции может
привести к катастрофе. URL: https://sud.ua/ru/news/sud-info/79625-otmena-
obyazatelnoj-sertifikatsii-pishchevoj-prodyktsii-mozhet-privesti-k-katastrofe-
?__cf_chl_tk=JsYmv8oTVWH_vlnYqNFxGOB5jy2gdqaELKRgLGPAr8I-
1653224352-0-gaNycGzNCVE (дата звернення: 01.03.2022).
8. Якість продуктів харчування.URL: https://pidru4niki.com/13150910/ekologiya/ya
kist_produktiv_harchuvannya (дата звернення: 01.03.2022).
9. Що необхідно знати про HACCP? URL: https://dpsscn.gov.ua/bezpechnist-
kharchovykh-produktiv-ta-veterynariia/haccp/shcho-potribno-znaty-pro-haccp.html
(дата звернення: 02.03.2022).
10. СТАНДАРТИ НАССР. URL: https://mon.gov.ua/ua/osvita/zagalna-serednya-
osvita/shkilne-harchuvannya/standarti-nassr (дата звернення: 02.03.2022).
11. Сайт інтернет-магазину «The Lavka». URL: https://thelavka.com/ (дата
звернення: 28.04.2022).
64
12. Сайт інтернет-магазину фермерської кооперації «Наше.все». URL: https://nashe-
vse.com/ (дата звернення: 29.04.2022).
13. Сайт інтернет-магазину «FermerGreen». URL: https://fermergreen.com.ua/
(дата звернення: 30.04.2022).
14. Михайлов С.В., Оксамитна Л.П. Проектування та створення веб-орієнтованого
інформаційного ресурсу для замовлення продукції від малих фермерських
господарств: Збірник тез доповідей студентської науково-практичної
конференції ЧДТУ : 19-22 квітня 2022 / [упорядник Мельник І.В.]; Міністерство
освіти і науки України, Черкаський державний технологічний ун-т. Черкаси :
ЧДТУ, 2022. С.66-67.
65
ДОДАТОК А
Затверджую
Зав. кафедри КНтаСА,
______________ Триус Ю.В.
«____»____________2022 р.
ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ВЕБ-ОРІЄНТОВАНОГО
ІНФОРМАЦІЙНОГО РЕСУРСУ ДЛЯ ЗАМОВЛЕННЯ ПРОДУКЦІЇ ВІД
МАЛИХ ФЕРМЕРСЬКИХ ГОСПОДАРСТВ
Специфікація
482.ЧДТУ. 22094-01 12 01
Листів 2
Розробник ____________________ Михайлов С.В.
Керівник ____________________ Оксамитна Л.П.
Черкаси – 2022
66
482.ЧДТУ. 22094-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 22094-01 12 01 Текст програми
482.ЧДТУ. 22094-01 34 01 Інструкція користувача
482.ЧДТУ. 22094-01 90 01 Публікація по темі
кваліфікаційної роботи
бакалавра
67
ДОДАТОК Б
ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ВЕБ-ОРІЄНТОВАНОГО
ІНФОРМАЦІЙНОГО РЕСУРСУ ДЛЯ ЗАМОВЛЕННЯ ПРОДУКЦІЇ ВІД
МАЛИХ ФЕРМЕРСЬКИХ ГОСПОДАРСТВ
Текст програми
482.ЧДТУ. 22094-01 12 01
Листів 20
Розробник _____________ Михайлов С.В.
Черкаси – 2022
68
Фрагмент коду компонента авторизації
import React, {useContext, useState} from 'react';
import {Button, Form, Modal} from "react-bootstrap";
import {Context} from "../../index";
import {observer} from "mobx-react-lite";
import {changeUserRole, logIn, registration} from "../../http/userAPI";
import {getStore, storeRegistration} from "../../http/storeAPI";
import {getLocations} from "../../http/storeAPI";
import {authRoutes} from "../../routes";
import {Route} from "react-router-dom";
const Registration = observer(({show, onHide}, value) => {
const {user} = useContext(Context)
const [isLogIn,setLogIn] = useState(value)
const [name, setName] = useState()
const [login, setLogin] = useState()
const [password,setPassword] = useState()
const [storeName,setStoreName] = useState()
const [location, setLocation] = useState(1)
const click = async () => {
try {
let data;
if(isLogIn){
data = await logIn(login, password);
}
else{
data = await registration(login, password, name);
}
if (data.role){
user.setUser(data)
user.setIsAuth(true)
}
if (data.role === 'SELLER'){
await storeReg();
}
} catch (e) {
alert(e.response.data)
}
}
const storeReg = async() => {
let store;
if (user._isAuth && user._user.role === 'USER') {
store = await storeRegistration(user._user.id, storeName,'gfhfgh',location);
if(store.id){
let result = await changeUserRole(user._user.id)
}
}
69
else{
store = await getStore(user._user.id)
}
user.setStore(store)
}
return (
<>
<Modal show={show} onHide={onHide} size={"sm"} centered>
<Modal.Header closeButton>
{
user._isAuth ?
<Modal.Title style={{marginLeft: 8 }} >Реєстрація
магазину</Modal.Title>
: !user._isAuth && isLogIn ?
<Modal.Title style={{marginLeft: 8 }} >Вхід</Modal.Title>
:
<Modal.Title style={{marginLeft: 8 }} >Реєстрація</Modal.Title>
}
</Modal.Header>
<Modal.Body className='mx-2'>
<Form >
{
user._isAuth ?
<>
<Form.Text muted>Назва магазину</Form.Text>
<Form.Control className='my-1' type="text" placeholder=''
onChange={e => setStoreName(e.target.value)} autoFocus/>
</>
:
<>
{ isLogIn ? '':
<>
<Form.Text muted>Ім'я та фамілія</Form.Text>
<Form.Control className='my-1' type="text" placeholder=''
onChange={e => setName(e.target.value)} autoFocus/>
</>
}
<Form.Text muted>Номер телефону</Form.Text>
<Form.Control className='my-1' type="tel" placeholder='+380' autoFocus
onChange={e => setLogin(e.target.value)}/>
<Form.Text muted>Пароль</Form.Text>
<Form.Control className='my-1' type="password"
onChange={e => setPassword(e.target.value)} />
</>
}
</Form>
</Modal.Body>
<Modal.Footer>
<div className='col-11 mx-auto' >
{ user._isAuth ?
70
<Button style={{backgroundColor:'#0e7f11',color:'white'}}
variant="outline-none" className='col-12 my-2 mx-auto ms-auto' onClick={ () =>
{storeReg();onHide();}}>
Зареєструвати
</Button>
:
<Button style={{backgroundColor:'#0e7f11',color:'white'}}
variant="outline-none" className='col-12 my-2 mx-auto ms-auto' onClick={ () =>
{click();onHide();}}>
{ isLogIn ? 'Увійти' : 'Зареєструватися'}
</Button>
}
{
user._isAuth ?
''
: isLogIn ?
<div className='col-12 text-center mx-auto'>Немає аккаунту? <a
href='#' style={{cursor:'pointer', textDecoration:"none"}} onClick={() => setLogIn(false)}
>Зареєструватися!</a></div>
:
<div className='col-11 text-center mx-auto' >Маєте аккаунт? <a
href='#' style={{cursor:'pointer', textDecoration:"none"}} onClick={() =>
setLogIn(true)}>Увійти!</a></div>
}
</div>
</Modal.Footer>
</Modal>
</>
);
}
);
export default Registration;
Фрагмент коду компонента картки товару
import React, {useContext, useEffect} from 'react';
import {observer} from "mobx-react-lite";
import {Context} from "../index";
import {Button, Card, Col, Image, Row} from "react-bootstrap";
import {useNavigate} from "react-router-dom";
import {PRODUCT_ROUTE} from "../utils/consts";
import {MDBIcon} from "mdb-react-ui-kit";
const ProductCard = ( {product}) => {
const navigation = useNavigate()
let review;
useEffect(()=>{
for(let i = 0; i>5;i++){
if(product.averageMark>=i){
review += <MDBIcon fas icon="star" color={'warning'} />
71
}
else{
review += <MDBIcon far icon="star" />
}
}
})
return (
<Col className={"mt-3 mb-1 col-3 px-0 ms-0 me-0 pe-0 "} onClick={() =>
navigation(PRODUCT_ROUTE + '/' + product.id)}>
<Card style={{width: 254, cursor: 'pointer', fontFamily: 'sans-serif'}}
border={"black"}>
<Image style={{objectFit:'cover'}} height={352} src={'http://localhost:5000/' +
product.img}/>
<Card.Text className={'col-12 px-1'}>
<div className="badge text-wrap ms-2 my-1" style={{width:
"6rem",backgroundColor:'#0e7f11',color:'white'}}>{product.amount>0?'В
наявності':'Відсутній'}</div>
<div className='col-12 ms-2 fs-6 w-100 d-block font-weight-
light'>{product.name}
</div>
<div className='col-12' style={{fontSize: 12}} >
<span className='col-6 text-center ms-2' >
{review}
</span>
<span className='col-6 d-inline-flex ms-1 text-center '
style={{color:'#42A5F5'}} >{product.reviewsQuantity} {product.reviewsQuantity === 1? 'відгук':
'відгуків' } </span>
</div>
<div className='col-12 d-flex justify-content-between mt-1' >
<span className='col-4 fs-5 ms-2 pt-1 flex-grow-1 ps-1 font-weight-bolder'
>{product.price} грн</span>
<Button style={{backgroundColor:'#0e7f11',color:'white'}} variant={'outline-
none'} className=' col-6 me-2' >Придбати</Button>
</div>
<hr className='my-2 p-0' />
<div className='col-12 m-1 my-2 ' >
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"
fill="currentColor"
className="bi bi-shop col-2 align-content-start" viewBox="0 0 16 16">
<path
d="M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5
1.5 0 0 1 16 5.37v.255a2.375 2.375 0 0 1-4.25 1.458A2.371 2.371 0 0 1 9.875 8 2.37 2.37 0 0 1 8
7.083 2.37 2.37 0 0 1 6.125 8a2.37 2.37 0 0 1-1.875-.917A2.375 2.375 0 0 1 0 5.625V5.37a1.5 1.5 0 0
1 .361-.976l2.61-3.045zm1.78 4.275a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 0 0 2.75 0
.5.5 0 0 1 1 0 1.375 1.375 0 1 0 2.75 0V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L1.12 5.045A.5.5 0 0 0
1 5.37v.255a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0zM1.5 8.5A.5.5 0 0 1 2 9v6h1v-5a1 1 0 0 1 1-1h3a1
1 0 0 1 1 1v5h6V9a.5.5 0 0 1 1 0v6h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V9a.5.5 0 0 1 .5-.5zM4
15h3v-5H4v5zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3zm3 0h-
2v3h2v-3z"/>
</svg>
72
<span className='d-inline-flex col-9 ps-2 align-middle text-
center'>{product.store.name}</span>
</div>
</Card.Text>
</Card>
</Col>
);
};
export default ProductCard;
import React, {useContext, useEffect, useState} from 'react';
import {fetchOneProduct} from "../http/productAPI";
import {useParams} from "react-router-dom";
import {Button, Col, Container, Image, Row} from "react-bootstrap";
import {Context} from "../index";
import Cart from "./modals/Cart";
import Review from "./modals/Review";
import {MDBIcon} from "mdb-react-ui-kit";
import dateFormat, { masks } from "dateformat";
Фрагмент коду компонента сторінки товару
const ProductPage = () => {
const {cart} = useContext(Context)
const {user} = useContext(Context)
const [product,setProduct] = useState()
const [show,setShow]= useState(false)
const [showReview,setShowReview]= useState(false)
const [isProductReview,setProductReview] = useState(false)
const {id} = useParams()
useEffect(() => {
fetchOneProduct(id).then(data => {
setProduct(data)
})
}, [])
const handleCartClose = () => setShow(false);
const handleCartShow = () => setShow(true);
const handleReviewClose = () => setShowReview(false);
const handleReviewShow = () => setShowReview(true);
return (
<Row className={'col-12'}>
{product ?
<Row className=' my-3 '>
<Col className={'col-8 m-0 p-0'}>
73
<div className={'border p-0'} style={{borderRadius: `7px `}}>
<div className={'d-block '}>
<Image style={{objectFit:'cover',width: '100%',
height: 'auto',borderRadius: `7px `}} w src={'http://localhost:5000/' +
product.img}/>
</div>
</div>
<div className={'border my-2 p-0'} style={{borderRadius: `7px `}}>
<div className={'d-block px-3'}>
<Row className={'col-12 fs-5 font-weight-bold py-2'}>Опис</Row>
<Row className={''}>{product.info}</Row>
</div>
</div>
</Col>
<Col className={'ms-3 p-0 col-2 flex-grow-1'} >
<div className={' px-3 py-2 col-12 border ' } style={{borderRadius: `7px
`}}>
<div className={'d-flex justify-content-between my-1'}>
<div className="badge "
style={{backgroundColor:'#0e7f11',color:'white'}}>{product.amount>0?'В
наявності':'Відсутній'}</div>
<div style={{fontSize: 12}} >
<span className='text-center ms-2' >
{product.review}
</span>
<span className=' d-inline-flex ms-1 text-center '
style={{color:'#42A5F5'}} >{product.reviewsQuantity === 1? 'відгук': 'відгуків' } </span>
</div>
</div>
<div className={'fs-4 '}>
{product.name}
</div>
<div className={'fs-1 my-1 text-danger font-weight-bolder'}
style={{fontWeight: `bold `}}>
{product.price} <span className={'fs-4 '} > грн</span>
</div>
</div>
<div className={'col-12 my-2 flex-grow-1 border ' } style={{borderRadius:
`7px `}}>
<Button className={'flex-grow-1 w-100 fs-4'}
style={{backgroundColor:'#0e7f11',color:'white'}} variant={'outline-none'} onClick={()=>{
let isProductAdded= cart._products.find(element => {return element.id
=== product.id})
if(!isProductAdded || undefined){
cart.setCartProduct(product)
}
handleCartShow()}}>Придбати</Button>
74
</div>
<div className={'col-12 my-2 flex-grow-1 border ' } style={{borderRadius:
`7px `}}>
<Row className={'col-12 fs-5 d-block px-3 py-1'}>Сертифікати
якості</Row>
<hr className={'p-0 m-0'}/>
<div className={' d-flex flex-row justify-content-start '}>
{
Array.from(product.certificates).map((element,index)=>
(
<div className={'m-0'}>
<Button className={'m-0'} style={{border:0}}
variant={'outline-success'} >
{
<>
<div className={'pt-2'}>
<MDBIcon fas icon="award" size='5x'/>
</div>
<div className='mt-2'>{dateFormat(new
Date(element.date),"dd.mm.yyyy")}</div>
</>
}
</Button>
</div>
))
}
</div>
</div>
<div className={'col-12 my-2 flex-grow-1 border ' } style={{borderRadius:
`7px `}}>
<Row className={'col-12 fs-5 d-block px-3 py-1 '}>Доставка</Row>
<hr className={'p-0 m-0'}/>
<div className={'px-3 py-2 fs-5'}>
<div className={'py-1'}>
<MDBIcon fas icon="store" color={'success'} />
<span className={' ps-3'} style={{fontSize:16}}>Самовивіз з точки
видачі</span>
</div>
<div className={'py-1'}>
<MDBIcon fas icon="truck" color={'warning'} />
<span className={' ps-3'} style={{fontSize:16}}>Адресна
доставка</span>
</div>
</div>
</div>
<div className={'col-12 my-2 flex-grow-1 border ' } style={{borderRadius:
`7px `}}>
75
<Row className={'col-12 fs-5 d-block px-3 py-1 '}>Оплата</Row>
<hr className={'p-0 m-0'}/>
<div className={'px-3 py-2 fs-5'}>
<div className={'py-1'}>
<MDBIcon fas icon="money-check" color={'primary'} />
<span className={' ps-3'} style={{fontSize:16}}>Оплата на
карту</span>
</div>
<div className={'py-1'}>
<MDBIcon fas icon="money-bill" color={'success'} />
<span className={' ps-3'} style={{fontSize:16}}>Готівкою</span>
</div>
</div>
</div>
<Col>
<Button
onClick={()=>{handleReviewShow();setProductReview(true)}}>Залишити відгук</Button>
<Button
onClick={()=>{handleReviewShow();setProductReview(false)}}>Залишити відгук про
продавця</Button>
</Col>
</Col>
</Row>
:
<></>
}
<Cart show={show} onHide={handleCartClose} />
<Review show={showReview} onHide={handleReviewClose}
isProductReview={isProductReview} product={product} user={user}/>
</Row>
);
}
export default ProductPage;
Фрагмент коду компонента UserController
const {User,Cart, Order, OrderItem, ProductReview, StoreReview} =
require('../models/models')
const bcrypt = require("bcrypt")
class UserController{
async registration(req, res){
const {login, password, name, role} = req.body
try{
if (!login || !password){
res.send('Неправильний логін або пароль')
}
76
const userExist = await User.findOne({where:{login: login}})
if(userExist){
res.send('Користувача з таким номером вже існує')
}
const hashPassword = await bcrypt.hash(password, 5)
const user = await User.create({login,password:hashPassword,name, role})
const cart = await Cart.create({userId: user.id})
res.send(user)
}
catch (e) {
console.log(e)
}
}
async login(req, res) {
const {login, password} = req.body
try{
const user = await User.findOne({where:{login: login}})
if (!user){
res.send('Користувач з таким номером не існує')
}
let comparePassword = bcrypt.compareSync(password, user.password)
if (!comparePassword) {
res.send('Помилковий пароль')
}
else{
res.send(user)
}
}
catch (e) {
console.log(e)
}
}
async changeRole(req,res) {
const {id,role} = req.body
try{
if (!id || !role){
res.send('Неправильний id або роль')
}
const userIdExist = await User.findOne({where:{id: id}})
if(!userIdExist){
res.send('Користувача з таким id не існує')
}
const updatedUser = await User.update({role:role}, {where:{id:id}})
if(updatedUser){
res.send('Роль змінено')
}
else {
res.send('Роль не змінено')
}
77
}
catch (e) {
console.log(e)
}
}
async createProductReview(req,res) {
const {mark,comment, productId, userId} = req.body.review
if (!mark || !comment || !productId || !userId){
res.send('Неправильні дані')
}
const checkDuplicate = await
ProductReview.findOne({where:{productId:productId,userId:userId}})
if( checkDuplicate){
res.send('Ви вже залишили свій відгук раніше')
}
else {
const productReview = await ProductReview.create({mark,text:comment,productId,
userId})
if(productReview){
return res.send('Створено')
}
else{
return res.send('Помилка створення')
}
}
}
async createStoreReview(req,res) {
const { mark , comment ,storeId, userId} = req.body.review
if (!mark || !comment ||!storeId ||!userId){
res.send('Неправильні дані')
}
const checkDuplicate = await
StoreReview.findOne({where:{storeId:storeId,userId:userId}})
if( checkDuplicate){
res.send('Ви вже залишили свій відгук’)
}
else {
const storeReview = await StoreReview.create({mark,text:comment,storeId, userId})
if(storeReview){
res.send(storeReview)
}
else{
res.send('Помилка створення')
}
}
}
async createOrder(req,res) {
78
const {orderNumber,status,itemsAmount, cartId, totalPrice,payment,delivery} =
req.body.order
const orderItems = req.body.order.orderItems
try{
if (!orderNumber|| !status || !itemsAmount || ! cartId || !totalPrice || !payment ||
!delivery){
res.send('Неправильні дані')
}
else {
const order = await
Order.create({orderNumber,status,itemsAmount,totalPrice,payment,delivery})
orderItems.map(async(element,index) => {
const {orderItemAmount, totalItemsPrice} = orderItems[index]
const orderItem = await OrderItem.create({amount:orderItemAmount,total_price:
totalItemsPrice})
if(orderItem){
console.log('orderItem' + index)
}
})
res.send('Створено')
}
}
catch (e) {
console.log(e)
}
}
}
module.exports = new UserController()
Фрагмент коду компонента userRouter
const Router = require ('express');
const router = new Router();
const userController = require('../controllers/UserController')
router.post('/registration', userController.registration)
router.post('/login', userController.login)
router.put('/change-role/:id', userController.changeRole)
router.post('/create-order', userController.createOrder)
router.post('/product-review',userController.createProductReview)
router.post('/store-review',userController.createStoreReview)
router.get('/:id')
module.exports = router
Фрагмент коду компонента index.js
const Router = require('express');
const router = new Router();
const userRouter = require('./userRouter');
const storeRouter = require('./storeRouter');
79
const productRouter = require('./productRouter');
const serviceRouter = require('./serviceRouter');
router.use('/user', userRouter)
router.use('/store', storeRouter)
router.use('/product', productRouter)
router.use('/service', serviceRouter)
module.exports = router
Фрагмент коду компонента AppRouter
import React, {useContext} from 'react';
import {Routes, Route, Navigate} from 'react-router-dom';
import {authRoutes, publicRoutes} from "../routes";
import {MAIN_PAGE_ROUTE, PRODUCT_LIST_ROUTE} from "../utils/consts";
import {Context} from "../index";
import {Component} from "react";
import {observer} from "mobx-react-lite";
const AppRouter = observer(() => {
const {user} = useContext(Context)
return (
<Routes>
{user._isAuth && authRoutes.map((route, index) =>
<Route key={index} path={route.path} element={<route.Component/>} exact>
{ route.subRoutes.map((subRoute, index) =>
<Route key={index} path={subRoute.subPath}
element={<subRoute.subComponent/>} exact/>)}}
</Route>)}
{publicRoutes.map(({path, Component}) =>
<Route key={path} path={path} element={<Component/>} exact />)}
<Route path='*' element={<Navigate to={MAIN_PAGE_ROUTE} />}/>
</Routes>
);
});
Фрагмент коду компонента routes
export default AppRouter; import ProductList from "./components/ProductList";
import {
PRODUCT_ROUTE,
PRODUCT_LIST_ROUTE,
USER_ACCOUNT_ROUTE,
MAIN_PAGE_ROUTE, ADD_PRODUCT_ROUTE, SHOP_PAGE_ROUTE,
CHECKOUT_ROUTE
} from "./utils/consts";
import UserAccountPage from "./pages/UserAccountPage";
import ProductPage from "./pages/ProductPage";
import MainPage from './pages/MainPage'
import AddProductPage from "./pages/AddProductPage";
80
import ShopPage from "./pages/ShopPage";
import CheckoutPage from "./pages/CheckoutPage";
export const authRoutes = [
{
path: USER_ACCOUNT_ROUTE,
Component: UserAccountPage,
subRoutes: [
{
subPath:ADD_PRODUCT_ROUTE,
subComponent: AddProductPage
},
]
}
]
export const publicRoutes = [
{
path: MAIN_PAGE_ROUTE,
Component: MainPage
},
{
path: SHOP_PAGE_ROUTE,
Component: ShopPage
},
{
path: CHECKOUT_ROUTE,
Component: CheckoutPage
},
{
path: PRODUCT_LIST_ROUTE,
Component: ProductList
},
{
path: PRODUCT_ROUTE + '/:id',
Component: ProductPage
}
]
Фрагмент коду компонента consts
export const MAIN_PAGE_ROUTE = '/main-page'
export const SHOP_PAGE_ROUTE = '/shop-page'
export const PRODUCT_LIST_ROUTE = '/product-list'
export const CHECKOUT_ROUTE = '/checkout'
export const USER_ACCOUNT_ROUTE = '/user-account'
export const PRODUCT_ROUTE = '/product'
export const ADD_PRODUCT_ROUTE = 'add-product'
Фрагмент коду компонента userAPI
import {$host} from "./index";
81
export const registration = async (login,password, name) => {
const {data} = await $host.post('api/user/registration', {login, password, name, role:
'USER'})
return data
}
export const logIn = async (login,password) => {
const {data} = await $host.post('api/user/login', {login, password})
return data
}
export const changeUserRole = async(id) => {
const {data} = await $host.put(`api/user/change-role/${id}`, {id, role: 'SELLER'})
return data
}
export const sendOrder = async (order) => {
const {data} = await $host.post('api/user/create-order', {order})
return data
}
export const sendProductReview = async (review) => {
const {data} = await $host.post('api/user/product-review', {review})
return data
}
export const sendStoreReview = async (review) => {
const {data} = await $host.post('api/user/store-review', {review})
return data
}
Фрагмент коду компонента OrderItem
import React, {useContext, useState} from 'react';
import {Button, Col, Image, Row} from "react-bootstrap";
import {Context} from "../index";
import {observer} from "mobx-react-lite";
import {CHECKOUT_ROUTE} from "../utils/consts";
import {useNavigate} from "react-router-dom";
import {MDBIcon} from "mdb-react-ui-kit";
import dateFormat from "dateformat";
import {getCategories} from "../http/serviceAPI";
const OrderItem = observer(({element,index}) => {
const navigation = useNavigate()
const {cart} = useContext(Context)
const[amount,setAmount] = useState(1)
const incrementCount = () => {
setAmount(amount + 1);
};
82
const decrementCount = () => {
setAmount(amount - 1);
};
const totalItemsPrice = amount * element.price
async function fetchItem(item) {
let orderItem = {...item, orderItemAmount:amount, totalItemsPrice: totalItemsPrice }
cart.setOrderItem(orderItem);
navigation(CHECKOUT_ROUTE)
}
return (
<Row className={'col-12'} key={index} value={element.id}>
<Col className={' col-3 p-3 text-center'}>
<Image style={{objectFit:'cover',width: '100%',
}} className='align-content-center' height={150} src={'http://localhost:5000/' +
element.img}/>
</Col>
<Col className={'col-2 p-2 text-center'}>
<div className={'fs-5'}>{element.name}</div>
<div className={'fs-6 col-12 py-2 text-center'}>
<Button size={'sm'} className={'w-25'}
style={{backgroundColor:'#0e7f11',color:'white'}} variant={'outline-none'}
onClick={decrementCount}>-</Button>
<span className={'p-4'}>{amount}</span>
<Button size={'sm'} className={'w-25'}
style={{backgroundColor:'#0e7f11',color:'white'}} variant={'outline-none'}
onClick={incrementCount} >+</Button>
</div>
</Col>
<Col className={'p-2 col-2 text-center'}>
<div>
<span className=' text-center ms-2' >
{product.review}
</span>
</div>
</Col>
<Col className={'col-3 p-3 text-center d-flex d-row'}>
{
Array.from(element.certificates).map((element,index)=>
(
<div className={'m-0 '}>
<Button className={'m-0'} style={{border:0}} variant={'outline-
success'} >
{
<>
<div className={'pt-2'}>
<MDBIcon fas icon="award" size='5x'/>
83
</div>
<div className='mt-2'>{dateFormat(new
Date(element.date),"dd.mm.yyyy")}</div>
</>
}
</Button>
</div>
))
}
</Col>
<Col className={'col-1 text-center'}>
<div className={'fs-4 '} style={{fontWeight:"bold"}} >{totalItemsPrice} <span
className={'fs-5'}>грн</span></div>
</Col>
<Col className={'col-1 text-center'} onClick={()=> {cart.deleteCartProduct(element);
console.log('Удалено')}}>
<MDBIcon far icon="trash-alt" color={'danger'} />
</Col>
<>
{cart._fetchOrderItems?
fetchItem(element)
: ''}</>
</Row>
);
});
export default OrderItem;
Фрагмент коду компонента Order
import React, {useContext, useState} from 'react';
import {Col, FormControl, Image, Row} from "react-bootstrap";
import {Context} from "../index";
import OrderItem from "./OrderItem";
import {observer} from "mobx-react-lite";
const Order = observer(() => {
const {cart} = useContext(Context)
return (
<>
{ cart._products.length>0 ?
Array.from(cart._products).map((element,index) => (
<OrderItem element={element} index={index} />
))
:
<Row>
<div> Кошик порожній</div>
</Row>
}
</>
84
)
})
export default Order;
Фрагмент коду компонента Cart
import React, {useContext, useEffect, useState} from 'react';
import {Button, Col, Form, Image, Modal, Row} from "react-bootstrap";
import {Context} from "../../index";
import {observer} from "mobx-react-lite";
import Order from "../../components/Order";
import {useNavigate} from "react-router-dom";
import {CHECKOUT_ROUTE} from "../../utils/consts";
const Cart = observer(({show,onHide}) => {
const {cart} = useContext(Context)
const navigation = useNavigate();
return (
<div>
<Modal show={show} onHide={onHide} size={"xl"} centered>
<Modal.Header className={' mx-4 fs-4'} closeButton>
Кошик
</Modal.Header>
<Modal.Body className='mx-2'>
<Order />
</Modal.Body>
<Modal.Footer className={'d-flex justify-content-between mx-4'}>
<div>
<Button style={{backgroundColor:'#0e7f11',color:'white'}}
variant={'outline-none'} onClick={onHide}>Продовжити покупки</Button>
</div>
<div>
<Button style={{backgroundColor:'#0e7f11',color:'white'}}
variant={'outline-none'} onClick={()=>{cart.setFetchOrderItems(true); }}>Оформити
замовлення</Button>
</div>
</Modal.Footer>
</Modal>
</div>
);
});
export default Cart;
Фрагмент коду компонента UserStorage
import {makeAutoObservable} from "mobx";
export default class UserStorage {
constructor() {
85
this._isAuth = false
this._user = {}
this._store = {}
this._location = null
makeAutoObservable(this)
}
setIsAuth(bool) {
this._isAuth = bool
}
setLocation(location) {
this._location = location
}
setUser(user) {
this._user = user
}
setStore(store) {
this._store = store
}
getIsAuth() {
return this._isAuth
}
getLocation() {
return this._location
}
get user(){
return this._user
}
get cart() {
return this._cart
}
get order(){
return this._order
}
get store(){
return this._store
}
}
Фрагмент коду компонента CartStorage
import {makeAutoObservable} from "mobx";
86
export default class CartStorage {
constructor() {
this._fetchOrderItems = false
this._products = []
this._cart = {}
this._order = {}
this._orderItems = []
makeAutoObservable(this)
}
setFetchOrderItems(value) {
this._fetchOrderItems = value
}
get fetchOrderItems() {
return this._fetchOrderItems
}
setCartProduct(product) {
this._products.push(product)
}
get products() {
return this._products
}
setCart(cart) {
this._cart = cart
}
get cart() {
return this._cart
}
setOrder(order) {
this._order = order
}
get order() {
return this._order
}
setOrderItem(orderItem) {
this._orderItems.push(orderItem)
}
deleteCartProduct(value) {
let index = this._products.indexOf(value);
if (index > -1) {
this._products.splice(index, 1); // 2nd parameter means remove one item only
}
}
87
}
Фрагмент коду компонента Review
import React, {useState} from 'react';
import {Button, Col, Form, FormControl, FormSelect, FormText, Modal, Row} from "react-
bootstrap";
import Order from "../../components/Order";
import {sendProductReview, sendStoreReview} from "../../http/userAPI";
import {useParams} from "react-router-dom";
import {observer} from "mobx-react-lite";
const Review = observer(({show,onHide,isProductReview, product, user}) => {
const [mark,setMark] = useState()
const [comment,setComment] = useState()
let userId = user._user.id
async function setProductReview(){
let productId = product.id
let review = {mark,comment,productId, userId}
await sendProductReview(review)
}
async function setStoreReview(){
let storeId = product.store.id
let review = {mark,comment,storeId, userId}
await sendStoreReview(review)
}
return (
<div>
<Modal show={show} onHide={onHide} size={"lg"} centered>
<Modal.Header closeButton>
{isProductReview? 'Відгук про товар' : 'Відгук про продавця'}
</Modal.Header>
<Modal.Body className='mx-2'>
<Form>
<FormText>Оцінка</FormText>
<FormSelect onChange={(e)=> setMark(e.target.value)}>
<option value='1' >1</option>
<option value='2' >2</option>
<option value='3' >3</option>
<option value='4' >4</option>
<option value='5' >5</option>
</FormSelect>
<FormText>Коментар</FormText>
<FormControl as='textarea' onChange={(e)=> setComment(e.target.value)}
rows={3}/>
</Form>
</Modal.Body>
<Modal.Footer >
88
<Col>
{
isProductReview?
<Button onClick={()=>{onHide();setProductReview()}}>Залишити
відгук</Button>
:
<Button onClick={()=> {onHide();setStoreReview()}}>Залишити
відгук</Button>
}
</Col>
</Modal.Footer>
</Modal>
</div>
);
});
export default Review;
89
ДОДАТОК В
ПРОЕКТУВАННЯ ТА СТВОРЕННЯ ВЕБ-ОРІЄНТОВАНОГО
ІНФОРМАЦІЙНОГО РЕСУРСУ ДЛЯ ЗАМОВЛЕННЯ ПРОДУКЦІЇ ВІД
МАЛИХ ФЕРМЕРСЬКИХ ГОСПОДАРСТВ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482. ЧДТУ. 22094-01 34 01
Листів 3
Розробник _____________ Михайлов С.В.
Черкаси – 2022
90
Для початку роботи з веб-орієнтованим інформаційним ресурсом
«FOODMART», необхідно зареєструватися (рис. В.1). Для цього необхідно
натиснути іконку користувача на правій частині меню, та ввести необхідні дані
(рис. В.2). Після чого необхідно обрати одну з категорій або скористатися
пошуком, щоб знайти необхідний товар. Категорії та вікно пошуку розташовані на
головному меню (рис. В.1).
Рисунок В.1 – Головна сторінка та меню веб-орієнтованого інформаційного
ресурсу «FOODMART»
Рисунок В.2 – Створення облікового запису на інформаційному ресурсі
«FOODMART»
91
Після чого на екрані відобразиться список товарів, необхідно натиснути на
один з товарів (рис. В.3).
Рисунок В.3 – Картка товару інформаційного ресурсу «FOODMART»
Таким чином користувач перейде на сторінку товару (рис. В.4).Щоб
придбати товар необхідно натиснути кнопку «Придбати», що розташована на
правій частині сторінки.
Рисунок В.4 – Сторінка товару інформаційного ресурсу «FOODMART»
92
Після чого на сторінці з’явиться вікно кошику з доданим до нього товаром
(рис. В.5). Щоб придбати товар необхідно натиснути кнопку «Оформити
замовлення». Далі користувач потрапляє на сторінку оформлення замовлення, де
йому потрібно ввести необхідні контактні дані, обрати варіант доставки та оплати
замовлення (рис. В.6). Для остаточного оформлення замовлення потрібно
натиснути кнопку «Оформити замовлення». Таким чином, введені дані та обраний
товар буде відправлено продавцю для подальшої обробки.
Рисунок В.5 – Кошик інформаційного ресурсу «FOODMART»
Рисунок В.6 – Сторінка оформлення замовлення інформаційного ресурсу
«FOODMART»
93
ДОДАТОК Г
ТЕЗИ ДОПОВІДЕЙ СТУДЕНТСЬКОЇ НАУКОВО-ПРАКТИЧНОЇ
КОНФЕРЕНЦІЇ ЧДТУ
Публікація по темі кваліфікаційної роботи бакалавра
482.ЧДТУ. 22094-01 90 01
Листів 3
Розробник: _________________ Михайлов С.В.
Черкаси – 2022
94
95