Маркетингова інформаційна система магазину квітів

САПАЙ, Альона
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/8589
Title:	Маркетингова інформаційна система магазину квітів
Authors:	ГРЕСЬКО, Світлана САПАЙ, Альона
Keywords:	ВЕБ-САЙТ;МАРКЕТИНГОВА ІНФОРМАЦІЙНА СИСТЕМА;ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ;МАГАЗИН КВІТІВ;ВЕБ- ТЕХНОЛОГІЇ;ІНФОРМАЦІЙНІ ТЕХНОЛОГІЇ
Issue Date:	2023
Abstract:	В кваліфікаційній роботі бакалавра спроєктованомаркетингову інформаційну систему магазину квітів. В роботі виконано огляд програмного забезпечення, який необхідний для створення веб-сайту. Веб-сайт створено в середовищі WebStorm. Створений веб-сайт виконує наступні функції:  Функції перегляду інформації про магазин і його послуги:  Інформація про історію магазину та його місію  Огляд послуг та товарів, які пропонує магазин  Розділ зі статтями про квіти, їх вирощування та догляд за ними  Контактна інформація про магазин, така як адреса, телефон, електронна пошта тощо  Функції перегляду каталогу товарів та послуг:  Категорії товарів та послуг, зокрема букети, горщики з рослинами, аксесуари до квітів  Детальна інформація про кожен товар, така як назва, опис, фото, ціна, наявність  Функції оформлення замовлення:  Додавання товарів до кошика та перегляд його змісту  Функції контактної інформації про магазин:  Інформація про режим роботи магазину та можливість зв'язку з ним у позаурочний час В першому розділі обґрунтовано актуальність теми та мету розробки. В другому розділі розглянуто засоби реалізації маркетингової інформаційної системи магазину квітів. В третьому розділі проаналізовано теоретичні основи маркетингових інформаційних систем та сучасні рішення для застосування при розробці інформаційної системи магазину квітів. В четвертому розділі спроектовано маркетингову інформаційну систему магазину квітів. Кваліфікаційна робота бакалавра складається з пояснювальної записки об’ємом 75 сторінокта 2 додатків.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/8589
Appears in Collections:	123 Комп’ютерна інженерія (Комп'ютерні системи та мережі)
Files in This Item:
File	Description	Size	Format
1_ТИТУЛКА_САПАЙ-merged.pdf Restricted Access		4.23 MB	Adobe PDF	View/Open Request a copy
Show full item record
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНОЇ БЕЗПЕКИ ТА КОМП’ЮТЕРНОЇ ІНЖЕНЕРІЇ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему:«Маркетингова інформаційна система
магазину квітів»
ЧДТУ.232247.001 ПЗ
Виконала: студентка2 курсу, групи КМС-2155
спеціальності 123 – «Комп’ютерна інженерія»
за освітньою програмою – «Комп’ютерні системи та
мережі»
Альона САПАЙ
Керівник
старший викладач Світлана ГРЕСЬКО
Рецензент
старший викладач кафедри інформаційних
технологій Черкаського національного університету
ім. Б. Хмельницького, к.т.н. Інна РОЗЛОМІЙ
«ЗАХИСТ ДОЗВОЛЯЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор ______ Володимир РУДНИЦЬКИЙ
Черкаси 2023 року
Форма № Н-9.01
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет: інформаційних технологій і систем
Кафедра: інформаційної безпеки та комп’ютерної інженерії
Освітньо-кваліфікаційний рівень: Бакалавр
Спеціальність 123 – Комп’ютерна інженерія
Освітня програма Комп’ютерні системи та мережі
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор ________ Володимир РУДНИЦЬКИЙ
«28» лютого 2023 року
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Сапай Альоні Михайлівні
(прізвище, ім‘я, по батькові)
1. Тема роботи: Маркетингова інформаційна система магазину квітів
Керівник роботи: старший викладач Гресько Світлана Олексіївна
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «24» лютого2023 р. № 43/04
2. Строк подання студентом роботи:
3. Вихідні дані до роботи:
 розробка сайту в середовищі WebStorm за допомогою фреймворку Rect;
 реалізація на платформі веб-сервера.
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
1. Постановка задачі
2. Засоби реалізації маркетингової інформаційної системи магазину квітів
3. Теоретичні основи маркетиногових інформаційних систем та аналіз сучасних рішень
4. Розробка маркетингової інформаційної системи магазину квітів
Висновки
Список використаних джерел. Додатки
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів):
1. Специфікація
2. Текст програми
6. Консультанти розділів роботи:
Розділ Прізвище, ініціали Підпис, дата
консультанта завдання видав завдання прийняв
7. Дата видачі завдання: 27 лютого 2023 року
КАЛЕНДАРНИЙ ПЛАН
Термін
№ з/п Назва етапів роботи виконання Примітка
етапів роботи
1 Збір матеріалу 27.02 – 12.03 виконано
2 Обробка матеріалу 13.03 – 19.03 виконано
3 Вибір програмного забезпечення та його виконано
обґрунтування 20.03 – 26.03
4 Аналіз сучасних рішень маркетингових
інформаційних систем 27.03 – 02.04 виконано
5 Проектування архітектури інформаційної 03.04 – 16.04 виконано
системи
6 Розробка інформаційної системи 17.04 – 30.04 виконано
7 Розробка веб-дизайну інформаційної системи 01.05 – 14.05 виконано
8 Оформлення пояснювальної записки 15.05 – 21.05 виконано
9 Оформлення додатків 22.05 – 28.05 виконано
10 Подання роботи на відгук та рецензування 30.05.2023 виконано
Студентка ___________________________ Альона САПАЙ
(підпис)
Керівник роботи ___________________________ Світлана ГРЕСЬКО
(підпис)
АНОТАЦІЯ
В кваліфікаційній роботі бакалавра спроєктованомаркетингову
інформаційну систему магазину квітів. В роботі виконано огляд програмного
забезпечення, який необхідний для створення веб-сайту. Веб-сайт створено в
середовищі WebStorm.
Створений веб-сайт виконує наступні функції:
 Функції перегляду інформації про магазин і його послуги:
 Інформація про історію магазину та його місію
 Огляд послуг та товарів, які пропонує магазин
 Розділ зі статтями про квіти, їх вирощування та догляд за ними
 Контактна інформація про магазин, така як адреса, телефон,
електронна пошта тощо
 Функції перегляду каталогу товарів та послуг:
 Категорії товарів та послуг, зокрема букети, горщики з
рослинами, аксесуари до квітів
 Детальна інформація про кожен товар, така як назва, опис, фото,
ціна, наявність
 Функції оформлення замовлення:
 Додавання товарів до кошика та перегляд його змісту
 Функції контактної інформації про магазин:
 Інформація про режим роботи магазину та можливість зв'язку з
ним у позаурочний час
В першому розділі обґрунтовано актуальність теми та мету розробки.
В другому розділі розглянуто засоби реалізації маркетингової
інформаційної системи магазину квітів.
В третьому розділі проаналізовано теоретичні основи маркетингових
інформаційних систем та сучасні рішення для застосування при розробці
інформаційної системи магазину квітів.
В четвертому розділі спроектовано маркетингову інформаційну
систему магазину квітів.
Кваліфікаційна робота бакалавра складається з пояснювальної записки
об’ємом 75 сторінокта 2 додатків.
Ключові слова: ВЕБ-САЙТ, МАРКЕТИНГОВА ІНФОРМАЦІЙНА
СИСТЕМА, ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ, МАГАЗИН КВІТІВ, ВЕБ-
ТЕХНОЛОГІЇ, ІНФОРМАЦІЙНІ ТЕХНОЛОГІЇ.
ANNOTATION
In the qualification work of the bachelor, the Marketing Information System
of the flower shop was designed. An overview of the software required to create a
website has been completed. The website was created in the WebStorm
environment.
The created website performs the following functions:
 Functions for viewing information about the store and its services:
 Information about the history of the store and its mission
 Overview of services and products offered by the store
 Section with articles about flowers, their cultivation and care
 Store contact information such as address, phone, email, etc
 Functions for viewing the catalog of goods and services:
 Categories of goods and services, including bouquets, pots with
plants, flower accessories
 Detailed information about each product, such as name, description,
photo, price, availability
 Order processing functions:
 Adding products to the cart and viewing its contents
 Functions of store contact information:
 Information about the store's operating hours and the possibility of
contacting it outside of business hours
The bachelor's qualification work consists of an explanatory note of
75 pages and 2 appendices.
Key words: WEBSITE, MARKETING INFORMATION SYSTEM,
SOFTWARE, FLOWER SHOP, WEB TECHNOLOGIES, INFORMATION
TECHNOLOGIES.
ЗМІСТ
ВСТУП………………………………………...………………………............ 4
. 5
1 ПОСТАНОВКА 5
ЗАДАЧІ………………………………………………….... 6
1.1 Актуальність
теми………………..……………………………….... 7
1.2 Мета 7
розробки…………..………………………………………….. 8
2 ЗАСОБИ РЕАЛІЗАЦІЇ МАРКЕТИНГОВОЇ ІНФОРМАЦІЙНОЇ 8
СИСТЕМИ МАГАЗИНУ 1
КВІТІВ………….……….………………………... 0
2.1 1
Node.js………………………………………………………………. 3
2.2 1
NPM…………………………………………………………………. 6
2.3
GIT…..………………………………………………………………. 1
2.4 Web 9
Storm..…………………………………………………………. 1
2.5 Java 9
Script..…………………………………………………………..
2.6 2
React...………………………………………………………………. 1
3 ТЕОРЕТИЧНІ ОСНОВИ МАРКЕТИНГОВИХ ІНФОРМАЦІЙНИХ
СИСТЕМ ТА АНАЛІЗ СУЧАСНИХ 2
РІШЕНЬ……………………………... ЧДТУ.232247.001 ПЗ 5
Змн. Арк. № д3о.к1ум. ТеоПрідептисичнДіат основи маркетинговий інформаційних 2
РозрКобив Сапай А.М. а Маркетингова Літ. Лист Листів
Керівник Гресько С.О. інформаційна система 2 75
Рецеанзент Розломій І.О.
Н.Контроль Гресько С.О. магазину квітів Кафедра ІБ та КІ
Затвфердив Рудницький Пояснювальна записка гр. КМС-2155
е В.М.
д
р
а
К
К
-
0
6
систем…..…. 5
3.2 Аналіз сучасних рішень у сфері маркетингу для магазину 3
квітів……………………………………………………………………. 6
. 3
4 РОЗРОБКА МАРКЕТИНГОВОЇ ІНФОРМАЦІЙНОЇ СИСТЕМИ 7
МАГАЗИНУ 3
КВІТІВ…..……………………………………………………... 8
4.1 Налаштування середовища розробки Web 4
Storm………………... 0
4.2
Архітектура………………………………………………………….
4.3 Принцип
роботи………………………………….............................
4.4 Дизайн 4
сайту….…………………………………………………….. 7
4.5 Опис 4
розробки...……………………………………………………. 9
7
ВИСНОВКИ……………………………………………………………….…. 3
..
СПИСОК СКОРОЧЕНЬ ТА УМОВНИХ
ПОЗНАЧЕНЬ……………………
ДОДАТКИ:
А – 482.ЧДТУ.32247-01 Маркетингова інформаційна система
магазину квітів
СПИСОК ВИКОРИСТАНИХ
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 3
а
ДЖЕРЕЛ……………………………...……...
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 4
а
ВСТУП
Чи знаєте ви, що світова квіткова індустрія сьогодні коштує понад сто
мільярдів доларів? Багатьох квітникарів це може здивувати. Зрештою,
отримати пристойний прибуток від місцевого квіткового магазину – завдання
не з легких. Гроші можуть бути, але також є діри, через які важко зароблені
доходи вислизають. Давайте розглянемо кілька останніх статистичних даних
про квіткові магазини, щоб побачити, як ми можемо заповнити деякі з цих
прогалин, щоб збільшити прибутки та підвищити ймовірність успіху в
квітковому магазині
Спочатку давайте розглянемо найважливішу частину будь-якого
квіткового магазину – самі квіти. Статистика продажів квітів, яка шокує
багатьох нових власників магазинів, - це кількість запасів, які доводиться
викидати щодня. Колосальні 45% усіх квітів гинуть і повинні бути викинуті,
перш ніж їх продати. Це майже одна з кожних двох квіток!
Збільшення продажів квітів значною мірою залежить від знання ваших
клієнтів і надання їм того, чого вони хочуть. Жінки різного віку, походження
та фінансового становища складають найбільший цільовий ринок квіткових
магазинів, причому майже 80% продажів квітів припадає на покупців-жінок.
Крім того, варто відзначити ще одну цікаву статистику щодо квітів: понад
60% продажів квітів купуються для тих, хто насправді їх купує. Подібна
статистика квіткових магазинів може допомогти флористам краще зрозуміти,
хто є їхніми ідеальними клієнтами, і дати їм маркетинговий кут, потрібний
для просування свого бізнесу способами, які є набагато більш контекстними.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 5
а
1 ПОСТАНОВКА ЗАДАЧІ
1.1 Актуальність теми
У сучасному бізнес-середовищі ефективне використання
інформаційних технологій стає ключовим фактором успіху підприємств у
всіх галузях. Сфера роздрібної торгівлі не є винятком, і компанії, що
займаються продажом квітів, постійно залучаються до пошуку інноваційних
рішень для вдосконалення своєї діяльності. У цьому контексті розробка та
впровадження маркетингової інформаційної системи стає актуальною та
важливою задачею.
На сучасному ринку роздрібної торгівлі квітами спостерігається
зростання конкуренції та зміна вимог споживачів. Інтернет-технології та
електронна комерція стають все більш поширеними, що приводить до зміни у
способах купівлі та продажу квітів.
Актуальність дипломної роботи «Маркетингова інформаційна система
магазину квітів», полягає у вирішенні проблем, з якими стикаються магазини
квітів у сучасних умовах. Традиційні методи продажу та управління
квітковим бізнесом не відповідають новим вимогам ринку, де споживачі
шукають зручність, швидкість та персоналізацію в обслуговуванні.
Зворотний зв'язок з клієнтами та розуміння їхніх потреб, настроїв та
поведінки стають ключовими факторами для розробки ефективної
маркетингової стратегії. Інформаційна система магазину квітів забезпечує
збір даних про переважні вподобання клієнтів, що дозволяє розпізнати їхній
профіль та поведінку під час покупок. Це важлива інформація, яка дозволяє
підприємству побудувати персоналізовані маркетингові кампанії та
забезпечити більшу ефективність комунікації з клієнтами.
Це також допомагає приймати обґрунтовані рішення щодо стратегії
ціноутворення, акцій та промоційних заходів, що сприяють збільшенню
обсягів продажу. Вона дозволяє проводити аналіз різних параметрів, таких як
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 6
а
популярність конкретних видів квітів, кількість продажів за певний період,
пропозиції та акції, залежно від яких можна розробляти спеціальні
пропозиції для покупців та покращувати якість обслуговування.
1.2 Мета розробки
Метою кваліфікаційної роботи бакалавра є «Маркетингова
інформаційна система магазину квітів», є розробка та реалізація
функціонального веб-додатку, який надасть магазину квітів зручні та
ефективні інструменти для керування та продажу своїх товарів онлайн.
Основною метою є покращення ділових процесів магазину, забезпечення
зручного способу замовлення квітів клієнтами та підвищення
конкурентоспроможності підприємства.
Веб-сайт спрямований на залучення клієнтів та розширення бізнесу
магазину квітів за допомогою маркетингових інструментів. На майбутнє
передбачається підключення бази даних, що дозволить збирати та
аналізувати дані про клієнтів і їх замовлення, що в свою чергу допоможе
покращити маркетингову стратегію магазину.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 7
а
2 ЗАСОБИ РЕАЛІЗАЦІЇ МАРКЕТИНГОВОЇ ІНФОРМАЦІЙНОЇ
СИСТЕМИМАГАЗИНУ КВІТІВ
2.1 Node.js
Node.js — це міжплатформне середовище виконання та бібліотека з
відкритим кодом, яка використовується для запуску веб-додатків поза
браузером клієнта.
Він використовується для програмування на стороні сервера та в
основному розгортається для неблокуючих серверів, керованих подіями,
таких як традиційні веб-сайти та серверні служби API, але спочатку був
розроблений з урахуванням архітектур реального часу, заснованих на
надсиланні. Кожен браузер має власну версію механізму JS, а node.js
побудовано на механізмі Google Chrome V8 JavaScript.
Простіше кажучи, це означає, що цілі сайти можна запускати за
допомогою єдиного «стеку», що робить розробку та обслуговування
швидкими та легкими, дозволяючи вам зосередитися на досягненні бізнес-
цілей проекту.
Той факт, що Node.js є відкритим вихідним кодом, означає, що він
безкоштовний для використання та постійно налаштовується та
вдосконалюється глобальною спільнотою розробників .
Важливо розуміти, що Node.js насправді не є ані фреймворком, ані
бібліотекою, як у випадку з традиційним прикладним програмним
забезпеченням, а середовищем виконання .
Середовище виконання (іноді скорочене до RTE) містить веб-
інтерфейси API, до яких розробник може отримати доступ для створення
коду, і механізм JavaScript, який аналізує цей код. Це робить його легким,
гнучким і простим у розгортанні, усі функції допоможуть оптимізувати та
пришвидшити ваш прикладний проект.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 8
а
2.2 NPM
Node Package Manager (NPM) — це інструмент командного рядка, який
встановлює, оновлює або видаляє пакети Node.js у вашій програмі. Це також
онлайн-сховище пакетів Node.js з відкритим кодом.
NPM:
- онлайн-репозиторій для публікації проектів Node.js з відкритим
кодом
- утиліта командного рядка для взаємодії з згаданим репозиторієм, що
допомагає встановлювати пакети та керувати версіями пакетів і
залежностями.
NPM є безкоштовним і на нього покладаються понад 11 мільйонів
розробників у всьому світі.
Звичайно, можна самостійно керувати залежностями вашого проекту.
Однак у міру розвитку вашого проекту це може стати важким завданням.
Тут на допомогу приходить такий менеджер пакетів, як npm. npm
вирішує цю проблему, керуючи залежностями та керуючи пакетами для
вашого проекту.
Ви визначаєте всі залежності свого проекту у своєму файлі
package.json. Кожного разу, коли вам або члену команди потрібно розпочати
роботу над вашим проектом, усе, що їм потрібно зробити, це запустити npm
install .
Це негайно встановить усі необхідні залежності для вашого проекту. У
файлі package.json ви також можете вказати, від яких версій залежить ваш
проект. Це корисно, щоб запобігти руйнуванню проекту оновленнями з цих
пакетів.
2.3 GIT
На сьогоднішній день найпоширенішою сучасною системою контролю
версій у світі є Git.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 9
а
Git — це зрілий проект із відкритим кодом, який активно
підтримується, спочатку розроблений у 2005 році Лінусом Торвальдсом,
відомим творцем ядра операційної системи Linux. Приголомшлива кількість
проектів програмного забезпечення покладаються на Git для контролю
версій, включаючи комерційні проекти, а також проекти з відкритим кодом
На відміну від деяких програм контролю версій, Git не спирається на
імена файлів, коли визначає, яким має бути сховище та історія версій дерева
файлів, замість цього Git зосереджується на самому вмісті файлу. Зрештою,
файли вихідного коду часто перейменовують, розділяють і змінюють
порядок. Об’єктний формат файлів сховища Git використовує комбінацію
дельта-кодування (зберігання відмінностей у вмісті), стиснення та явно
зберігає вміст каталогу та об’єкти метаданих версії.
Однією з ключових переваг GIT є його здатність до локальної роботи.
Кожен розробник може мати повну копію репозиторію проекту на своєму
комп'ютері, що дозволяє працювати навіть у відсутності підключення до
мережі. Це забезпечує гнучкість та продуктивність, особливо в умовах
розробки на віддалених серверах або в командній роботі.
Іншою важливою функціональністю GIT є можливість створення гілок.
Гілки дозволяють розробникам незалежно працювати над різними функціями
або виправленнями, не впливаючи на головну гілку проекту. Це дозволяє
виконувати паралельну розробку і експериментувати з новими функціями,
зберігаючи стабільність основного коду. Після завершення роботи над
функцією гілку можна злити з головною гілкою, об'єднуючи зміни.
GIT також надає механізм для відстеження та відкату змін. Кожне
зміна в коді фіксується в коміті, що дозволяє розробникам легко повертатися
до попередніх версій коду або порівнювати різні стани проекту. Це особливо
корисно у випадку помилок або некоректних змін.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 10
а
2.4 Web Storm
WebStorm — це інтегроване середовище розробки (IDE), розроблене
спеціально для сучасного JavaScript. Ця технологія легка, але комплексна,
оскільки містить рішення для складної розробки на стороні клієнта та
розробки на стороні сервера за допомогою Node.js.
Створений розробником продуктивного програмного забезпечення
JetBrains, WebStorm використовує потужну екосистему JavaScript.
Розробники можуть використовувати інтелектуальне завершення коду,
виявлення помилок у реальному часі, рефакторинг і навігацію JavaScript,
мовну таблицю стилів, TypeScript і провідні фреймворки.
Користувачі можуть легко налагоджувати програми Node.js на стороні
клієнта. Технологія встановлює правильні контрольні точки вихідного коду,
встановлює годинники, досліджує змінні та виклики, а також використовує
інтерактивну консоль.
Безпроблемна інтеграція інструментів дозволяє розробникам
максимально використовувати вбудовані лінтери, тестові програми, клієнт
REST та інші глибоко інтегровані властивості. Функції модульного
тестування дозволяють користувачам налагоджувати тести, запускаючи
Mocha, Jest, Karma та Protractor. Тестові статуси миттєво доступні як у
вигляді дерева, так і в редакторі.
Завдяки інтеграції WebStorm із VCS розробники можуть скористатися
простим уніфікованим інтерфейсом користувача для роботи з Git, GitHub,
Mercurial тощо. Користувачі можуть фіксувати файли, переглядати зміни та
вирішувати конфлікти за допомогою візуального інструменту, інтегрованого
в IDE.
Огляд функцій WebStorm:
- Допомога в кодуванні для мов JavaScript і скомпільованих у
JavaScript, Node.js, HTML і CSS.
- Розширена допомога в кодуванні для Angular, React, Vue.js і Meteor.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 11
а
- Підтримка React Native, PhoneGap, Cordova та Ionic і Node.js.
- Розумний редактор.
- Розширені можливості навігації та пошуку.
- Вбудований відладчик.
- Інструменти тестування, які інтегруються з тестувальником Karma,
Mocha, Jest і Protractor.
- Інструмент Spy-js для відстеження коду JavaScript.
- Безпроблемна інтеграція інструментів.
- Простий уніфікований інтерфейс користувача для запуску завдань
Grunt, Gulp або npm прямо з IDE.
- Інструменти якості коду.
- Шаблони проектів.
- Створено на основі платформи IntelliJ з відкритим кодом.
- Уніфікований інтерфейс користувача для роботи з багатьма
популярними системами керування версій.
- Локальне сховище.
Огляд переваг WebStorm
WebStorm надає інтуїтивно зрозумілу допомогу в кодуванні для мов
JavaScript і скомпільованих у JavaScript, Node.js, HTML і CSS. Розробники
можуть насолоджуватися автозавершенням коду, розширеними функціями
навігації, розпізнаванням помилок на льоту та рефакторингом для всіх цих
мов. Програма надає розширену допомогу в кодуванні для Angular, React,
Vue.js і Meteor. WebStorm також підтримує React Native, PhoneGap, Cordova
та Ionic для мобільної розробки та розробки на сервері за допомогою Node.js.
Оскільки всі ці можливості доступні лише в одній системі, розробникам не
потрібно купувати окремі програми.
Інтуїтивно зрозумілий редактор WebStorm може ретельно оцінити
проект, щоб отримати найкращі результати завершення коду для всіх
підтримуваних мов. Сотні інтегрованих перевірок позначають будь-які
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 12
а
можливі проблеми прямо під час введення користувачем, а потім
пропонують варіанти швидкого вирішення. Це забезпечує якість
розробленого проекту.
WebStorm має функції навігації та пошуку, які допомагають
користувачам ефективніше та швидше орієнтуватися в коді. Можна перейти
до визначення методу, функції чи змінної. Це особливо корисно для
розробників, які працюють над великими проектами.
WebStorm має вбудовані функції для налагодження, тестування та
відстеження ваших програм на стороні клієнта та Node.js. Завдання стають
набагато легшими, оскільки для них потрібна лише мінімальна конфігурація.
Користувачі можуть вказувати контрольні точки, виконувати кроки по коду
та оцінювати вирази – і все це, не виходячи з IDE. WebStorm також містить
spy-js, вбудований інструмент, який допомагає відстежувати коди JavaScript.
Файли з’єднуються за допомогою викликів функцій, а потенційні проблемні
області визначаються для підвищення ефективності.
WebStorm легко інтегрується з основними інструментами командного
рядка для веб-розробки. Це забезпечує спрощений досвід розробки, що
підвищує продуктивність, без використання командного рядка. Інструменти
збірки відображаються в простому уніфікованому інтерфейсі користувача
для виконання завдань Grunt, Gulp або npm.
Крім сотень власних перевірок WebStorm, технологія може запускати
ESLint, JSCS, TSLint, Stylelint, JSHint або JSLint з вашим кодом. WebStorm
має функцію локальної історії, яка може перевіряти всі дії та повертатися до
попередніх версій.
Розробники можуть працювати над більшою кількістю програм за
допомогою вбудованих шаблонів WebStorm. Окрім популярних, таких як
Express або Web starter kit, користувачі можуть отримати доступ до інших
генераторів проектів за допомогою інтеграції WebStorm із Yeoman.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 13
а
WebStorm дуже легко налаштовується, оскільки його можна
налаштувати відповідно до будь-якого стилю кодування розробника.
Користувачі можуть налаштовувати ярлики, шрифти та візуальні теми для
вікон інструментів і компонування редактора.
2.5 JavaScript
JavaScript — це текстова мова програмування, яка використовується як
на стороні клієнта, так і на стороні сервера, що дозволяє зробити веб-
сторінки інтерактивними. Якщо HTML і CSS є мовами, які надають
структуру та стиль веб-сторінкам, JavaScript надає веб-сторінкам
інтерактивні елементи, які залучають користувача. Поширені приклади
JavaScript, які ви можете використовувати щодня, включають вікно пошуку
на Amazon, відео з підсумками новин, вбудоване в The New York Times, або
оновлення вашої стрічки Twitter.
Включення JavaScript покращує взаємодію з веб-сторінкою,
перетворюючи її зі статичної сторінки на інтерактивну. Підсумовуючи,
JavaScript додає поведінку до веб-сторінок.
Для чого використовується JavaScript?
JavaScript в основному використовується для веб-додатків і веб-
браузерів. Але JavaScript також використовується за межами Інтернету в
програмному забезпеченні, серверах і вбудованих апаратних елементах
керування.
Ось деякі основні речі, для яких використовується JavaScript:
- Додавання інтерактивної поведінки до веб-сторінок
- Показати або приховати більше інформації одним натисканням
кнопки
- Змінити колір кнопки, коли на неї наводиться курсор миші
- Гортайте карусель зображень на головній сторінці
- Збільшення або зменшення масштабу зображення
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 14
а
- Відображення таймера або зворотного відліку на веб-сайті
- Відтворення аудіо та відео на веб-сторінці
- Відображення анімацій
- Використання спадного меню
- Створення веб- та мобільних додатків
Розробники можуть використовувати різні фреймворки JavaScript для
розробки та створення веб- і мобільних додатків. Фреймворки JavaScript —
це набори бібліотек коду JavaScript, які надають розробникам попередньо
написаний код для використання для рутинних функцій і завдань
програмування — буквально фреймворк для створення веб-сайтів або веб-
додатків.
До популярних інтерфейсних фреймворків JavaScript належать React,
React Native, Angular і Vue. Багато компаній використовують Node.js,
середовище виконання JavaScript, побудоване на механізмі Google Chrome
JavaScript V8. Кілька відомих прикладів включають Paypal, LinkedIn, Netflix і
Uber!
- Створення веб-серверів і розробка серверних додатків
Окрім веб-сайтів і програм, розробники також можуть використовувати
JavaScript для створення простих веб-серверів і розробки внутрішньої
інфраструктури за допомогою Node.js.
- Розвиток гри
Звичайно, ви також можете використовувати JavaScript для створення
браузерних ігор. Це чудові способи для початківців розробників потренувати
свої навички JavaScript.
Що може робити JavaScript у браузері?
Сучасний JavaScript є «безпечною» мовою програмування. Він не надає
низькорівневого доступу до пам'яті чи ЦП, оскільки спочатку був створений
для браузерів, яким це не потрібно.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 15
а
Можливості JavaScript значною мірою залежать від середовища, у
якому він працює. Наприклад, Node.js підтримує функції, які дозволяють
JavaScript читати/записувати довільні файли, виконувати мережеві запити
тощо.
Внутрішньобраузерний JavaScript може робити все, що стосується
маніпулювання веб-сторінками, взаємодії з користувачем і веб-сервером.
Наприклад, JavaScript у веб-переглядачі може:
 Додайте новий HTML на сторінку, змініть наявний вміст, змініть
стилі.
 Реагувати на дії користувача, запускати на клацання мишкою, рух
вказівника, натискання клавіш.
 Надсилати запити по мережі на віддалені сервери, завантажувати та
завантажувати файли (так звані технології AJAX і COMET ).
 Отримувати та встановлювати файли cookie, ставити запитання
відвідувачу, показувати повідомлення.
 Пам’ятти дані на стороні клієнта («локальне сховище»).
Що не може робити javascript у веб-переглядачі?
Можливості JavaScript у браузері обмежені для захисту безпеки
користувача. Мета полягає в тому, щоб запобігти зловмисній веб-сторінці
отримати доступ до приватної інформації або зашкодити даним користувача.
Приклади таких обмежень:
JavaScript на веб-сторінці не може читати/записувати довільні файли на
жорсткому диску, копіювати їх або виконувати програми. Він не має прямого
доступу до функцій ОС.
Сучасні браузери дозволяють йому працювати з файлами, але доступ
обмежений і надається лише в тому випадку, якщо користувач виконує певні
дії, наприклад «скидає» файл у вікно браузера або вибирає його за
допомогою тегу <input>.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 16
а
Є способи взаємодії з камерою/мікрофоном та іншими пристроями, але
для цього потрібен явний дозвіл користувача.
Різні вкладки/вікна зазвичай не знають одне про одного. Іноді так,
наприклад, коли одне вікно використовує JavaScript, щоб відкрити інше. Але
навіть у цьому випадку JavaScript з однієї сторінки може не мати доступу до
іншої сторінки, якщо вони надходять з інших сайтів (з іншого домену,
протоколу чи порту).
Це називається «Політика однакового походження». Щоб вирішити цю
проблему, обидві сторінки мають узгодити обмін даними та містити
спеціальний код JavaScript, який його обробляє. Ми розглянемо це в
підручнику.
Це обмеження, знову ж таки, для безпеки користувача. Сторінка
http://anysite.com, яку відкрив користувач, не повинна мати доступ до іншої
вкладки веб-переглядача з URL-адресою http://gmail.com, наприклад, і
викрасти звідти інформацію.
JavaScript може легко спілкуватися через мережу з сервером, з якого
надійшла поточна сторінка. Але його здатність отримувати дані з інших
сайтів/доменів обмежена. Хоча це можливо, це вимагає явної згоди
(вираженої в заголовках HTTP) від віддаленої сторони. Знову ж таки, це
обмеження безпеки.
Такі обмеження не існують, якщо JavaScript використовується поза
браузером, наприклад на сервері. Сучасні браузери також дозволяють
плагіни/розширення, які можуть запитувати розширені дозволи.
2.6 React
React.js — бібліотека JavaScript з відкритим вихідним кодом для
створення інтерфейсів користувача. React — це не повноцінний фреймворк, а
скоріше бібліотека, що означає, що це набір функцій JavaScript, які можна
використовувати для створення інтерфейсів користувача. Бібліотека React
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 17
а
була розроблена Facebook і опублікована в 2013 році. Зараз вона
підтримується Facebook разом із великою спільнотою розробників.
React — це бібліотека на основі компонентів. Це означає, що
інтерфейси користувача складаються з окремих компонентів, які потім
об’єднуються, щоб створити більший інтерфейс користувача. Компоненти
React можна писати на звичайному JavaScript або за допомогою JSX,
розширення синтаксису, яке дозволяє розробникам писати HTML на
JavaScript. Компоненти React відображаються в HTML за допомогою
ReactDOM, бібліотеки, яка забезпечує інтерфейс між React і DOM.
Компоненти React дуже багаторазові та їх можна використовувати в
кількох проектах. React також має інтуїтивно зрозумілу систему зв’язування
даних і віртуальний DOM, які допомагають розробникам створювати
ефективні, високопродуктивні веб-додатки.
Як працює React.js?
Компоненти React.js написані на звичайному JavaScript або з
використанням JSX, синтаксичного розширення, яке дозволяє розробникам
писати HTML на JavaScript. Потім компоненти React відображаються в
HTML за допомогою ReactDOM, бібліотеки, яка забезпечує інтерфейс між
React і DOM.
Компоненти React дуже багаторазові та їх можна використовувати в
кількох проектах. Компоненти React складаються з елементів, які є тегами
HTML, такими як div, span і p. Елементи також можуть бути компонентами,
які є визначеними користувачем компонентами React. Компоненти
складаються з елементів та інших компонентів, які потім відображаються в
DOM.
React також має інтуїтивно зрозумілу систему зв’язування даних, яка
дозволяє відображати компоненти на основі даних із джерела даних.
Джерелом даних може бути простий об’єкт JavaScript, серверний API або
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 18
а
база даних. Система прив’язки даних дозволяє розробникам легко
синхронізувати інтерфейс користувача з джерелом даних.
React також містить віртуальний DOM, який є віртуальним
представленням DOM. Віртуальний DOM використовується для відстеження
змін у DOM та оптимізації оновлень DOM. Це дозволяє розробникам
створювати ефективні та високопродуктивні веб-додатки.
Переваги використання React.js
React.js — це потужна та інтуїтивно зрозуміла бібліотека для створення
інтерфейсів користувача. Компонентний підхід React дозволяє розробникам
створювати повторно використовувані компоненти, які можна
використовувати в кількох проектах. Інтуїтивно зрозуміла система
зв’язування даних React дозволяє легко синхронізувати інтерфейс
користувача з джерелом даних. React також має віртуальний DOM, який
допомагає розробникам створювати ефективні, високопродуктивні веб-
додатки.
React також полегшує розробникам створення адаптивних та
інтерактивних інтерфейсів користувача. Компоненти React складаються з
елементів і компонентів, якими можна керувати за допомогою JavaScript. Це
дозволяє розробникам створювати потужні та інтерактивні інтерфейси
користувача.
Крім того, React є популярною та добре підтримуваною бібліотекою.
Бібліотека React підтримується Facebook разом із великою спільнотою
розробників. Це полегшує розробникам пошук підтримки та ресурсів для
розробки програм React.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 19
а
3 ТЕОРЕТИЧНІ ОСНОВИМАРКЕТИНГОВИХ ІНФОРМАЦІЙНИХ
СИСТЕМ ТА АНАЛІЗ СУЧАСНИХ РІШЕНЬ
3.1 Теоретичні основи маркетингових інформаційних систем
Поняття маркетингової інформаційної системи
Маркетингова інформаційна система (МІС) є комплексом методів,
процедур, технологій та інструментів, що забезпечують збір, обробку, аналіз
та поширення інформації, необхідної для прийняття рішень у маркетинговій
діяльності. Вона використовується для збору та аналізу даних про
споживачів, ринки, конкурентів та інші фактори, що впливають на
маркетингові стратегії та рішення підприємства.
Роль маркетингової інформаційної системи в магазині квітів
У контексті магазину квітів, маркетингова інформаційна система
відіграє важливу роль у забезпеченні ефективної маркетингової стратегії та
прийнятті обґрунтованих рішень. Вона допомагає збирати дані про
споживачів, їхні вподобання та звички, аналізувати конкурентну ситуацію на
ринку, вимоги та тенденції споживачів, а також оцінювати результативність
маркетингових кампаній. Завдяки МІС, магазин квітів може покращити свою
конкурентоспроможність, залучити більше клієнтів та забезпечити
задоволення їхніх потреб.
Ключові компоненти маркетингової інформаційної системи
Маркетингова інформаційна система складається з різних компонентів,
які взаємодіють між собою для забезпечення потреб у інформації. Серед них
можна виокремити такі ключові компоненти маркетингової інформаційної
системи:
- Збір інформації
Один з головних компонентів МІС - це процес збору інформації. Це
може включати збір даних про споживачів, їхні вподобання, демографічні
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 20
а
характеристики, статистичні дані про ринок та конкурентів, відгуки клієнтів
тощо. Збирання інформації може здійснюватися через різні джерела,
включаючи опитування, аналіз соціальних мереж, внутрішні бази даних
тощо.
- Обробка інформації
Отримана інформація потребує подальшої обробки для отримання
цінних даних та знань. Цей компонент МІС включає методи і технології для
аналізу, класифікації, інтерпретації та візуалізації інформації. Це можуть
бути статистичні методи, моделі аналізу даних, дашборди та інші
інструменти для виявлення тенденцій, патернів та інсайтів.
- Зберігання інформації
Зберігання інформації є важливим компонентом МІС, оскільки він
забезпечує доступність та надійність даних. В цьому компоненті
використовуються бази даних та системи управління даними для зберігання
та організації інформації. Це дозволяє зберігати історичні дані, резервувати
інформацію та забезпечувати її безпеку.
- Аналіз та звітність
Цей компонент МІС включає інструменти та методи для аналізу
отриманих даних та підготовки з відповідних звітів та аналітичних
матеріалів. Це може включати створення звітів, графіків, діаграм,
інфографіків та інших інструментів візуалізації даних. Аналіз та звітність
допомагають зрозуміти отриману інформацію, виділити ключові тренди та
використати ці знання для прийняття маркетингових рішень.
- Розповсюдження інформації
Останній компонент МІС - це процес розповсюдження інформації між
зацікавленими сторонами. Це може включати внутрішні звіти та
повідомлення для команди магазину квітів, створення маркетингових
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 21
а
матеріалів для клієнтів, публікації на веб-сайті чи соціальних мережах тощо.
Розповсюдження інформації забезпечує зв'язок між всіма зацікавленими
сторонами і допомагає досягти поставлених маркетингових цілей.
Застосування маркетингової інформаційної системи в магазині квітів
В магазині квітів МІС може бути використана для багатьох завдань.
Наприклад, збирання інформації про вподобання клієнтів стосовно квітів,
аналіз конкурентного середовища та виявлення нових трендів у сфері
квіткового бізнесу. Вона також може бути використана для планування та
впровадження маркетингових кампаній, оцінки їх ефективності та
вимірювання рівня задоволеності клієнтів.
3.2 Аналіз сучасних рішень у сфері маркетингу для магазинів
квітів
Проаналізуємо сучасні рішення у сфері маркетингу, які можуть бути
застосовані в магазинах квітів. Розглянемо новітні технології, стратегії та
інструменти, що дозволяють ефективно просувати бізнес, привертати нових
клієнтів та підвищувати рівень задоволеності наявних клієнтів.
Використання соціальних мереж
Одним з найпопулярніших та ефективних інструментів маркетингу для
магазинів квітів є використання соціальних мереж. Платформи, такі як
Instagram, Facebook та Pinterest, надають можливість демонструвати красу
квітів за допомогою фото та відео, спілкуватися зі споживачами та
встановлювати з ними прямий зв'язок. Крім того, вони дозволяють запускати
рекламні кампанії, просувати акції та залучати нових клієнтів.
Електронна комерція та онлайн-продажі
Зростання популярності електронної комерції відкриває широкі
можливості для магазинів квітів. Онлайн-продажі дозволяють розширити
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 22
а
аудиторію та привернути клієнтів з усього світу. Створення зручного та
привабливого веб-сайту, де клієнти можуть швидко знайти та придбати
бажані квіти, стає ключовим фактором успіху. Також варто враховувати
можливість доставки квітів за допомогою кур'єрських служб, що сприяє
зручності та задоволенню кл ієнтів. Крім того, важливо розвивати систему
онлайн-платежів та забезпечувати безпеку та конфіденційність інформації
клієнтів.
Використання відео та вебінарів
Відео є потужним засобом привертання уваги та взаємодії зі
споживачами. Магазини квітів можуть створювати відео-контент, де
демонструють красу та властивості різних видів квітів, надають поради щодо
догляду та аранжування квітів, а також організовувати вебінари для клієнтів,
де досвідчені флористи діляться своїми знаннями та вміннями. Це сприяє
залученню та збереженню клієнтів, а також підвищує авторитет магазину в
галузі квіткового бізнесу.
Використання персоналізованого маркетингу
Персоналізований маркетинг стає все більш важливим у сучасному
світі. Магазини квітів можуть використовувати дані про своїх клієнтів,
наприклад, їхні вподобання, дати народження або особливі події, щоб
створювати персоналізовані пропозиції та акції. Наприклад, надсилання
спеціальних пропозицій на день народження або важливу подію клієнта. Це
допомагає побудувати ближчі взаємини з клієнтами та підвищує ймовірність
повторних покупок.
Використання інфлюенсер-маркетингу
Інфлюенсер-маркетинг є ефективним способом просування бренду
магазину квітів. Співпраця з відомими особистостями, блогерами або
інфлюенсерами, які мають велику аудиторію в соціальних мережах, може
допомогти залучити нових клієнтів та збільшити свідомість про магазин
квітів. Інфлюенсери можуть розміщувати фото та відео з квітами,
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 23
а
розповідати про свої позитивні враження від покупки у магазині та
рекомендувати його своїм підписникам. Це дозволяє створити довіру до
бренду та привернути увагу нової аудиторії.
Використання інтерактивних технологій
Інтерактивні технології, такі як віртуальна реальність (VR) та
доповнена реальність (AR), можуть надати унікальний досвід покупки квітів.
Наприклад, клієнти можуть використовувати VR-окуляри, щоб віртуально
перебувати в квітковому саду, обирати та аранжувати букети. AR-додатки
можуть дозволити клієнтам спробувати віртуально на собі різні варіанти
квіткового оформлення, візуалізувати, як будуть виглядати квіти в їхному
приміщенні. Це робить процес вибору квітів більш захоплюючим та
персоналізованим.
Використання аналітики та штучного інтелекту
Аналітика та штучний інтелект дозволяють магазинам квітів
отримувати значну кількість даних та проводити їх аналіз для виявлення
трендів, розуміння поведінки споживачів та виявлення нових можливостей.
Застосування аналітики допомагає визначити найефективніші маркетингові
канали, оцінити ефективність рекламних кампаній та підвищити рівень
персоналізації комунікації з клієнтами. Штучний інтелект може бути
використаний для автоматизації процесів, наприклад, відповідей на
запитання клієнтів, пропозицій товарів на основі їхніх попередніх покупок
або вподобань, аналізу даних про клієнтів для розробки індивідуальних
рекомендацій та багато іншого.
Використання геолокаційних послуг
Геолокаційні послуги дозволяють магазинам квітів пропонувати
розумну таргетовану рекламу на основі місцезнаходження клієнтів.
Наприклад, коли клієнт перебуває поблизу магазину, йому може надходити
сповіщення про акції, знижки або нові надходження квітів. Це сприяє
збільшенню конверсії та стимулює клієнтів до відвідування магазину.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 24
а
Використання програм лояльності
Програми лояльності є ефективним інструментом для залучення та
утримання клієнтів. Магазини квітів можуть запровадити систему
накопичення балів або знижок за кожну покупку, додаткові послуги, такі як
безкоштовна доставка або консультації флориста, а також особливі привілеї
для постійних клієнтів. Це підтримує вірність клієнтів та стимулює їх до
повторних покупок у магазині.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 25
а
4 РОЗРОБКА МАРКЕТИНГОВОЇ ІНФОРМАЦІЙНОЇ СИСТЕМИ
КВІТКОВОГОМАГАЗИНУ
4.1 Налаштування середовища розробки Web Storm
Створення проєкту розпочнемо з завантаження IDE WebStorm з
офіційного сайту Jet Brains (рисунок 4.1).
Рисунок 4.1 – Вікно завантаження IDE JetBrains WebStorm
Після завантаження встановимо IDE на комп’ютер (рисунок 4.2), по
завершенню установки нам відкриється стартове меню (рисунок 4.3).
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 26
а
Рисунок 4.2 – Встановлення IDE JetBrains WebStorm
Рисунок 4.3 – Вікно запуску IDE JetBrains WebStorm
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 27
а
Наступним кроком буде завантаження з офіційного сайту Node.js, який
допоможе нам використовувати npm-пакети та керувати їх версіями та їх
взаємозв’язками (рисунок 4.4).
Рисунок 4.4 – Завантаження Node.js
Встановлення Node.js зображено на рисунку 4.5.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 28
а
Рисунок 4.5 – Встановлення Node.js
Під час встановлення платформи Node.js має відкритися командна
оболонка PowerShell. Проте у випадку якщо цього не відбувається, то після
закінчення інсталяції Node.js, можемо відкрити її вручну(рисунок 4.6).
Рисунок 4.6 – Вікно терміналу Windows PowerShell
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 29
а
Далі ми можемо переконатися, що Node.js встановлено за допомогою
команди «node -v» яку вводимо у командному рядку/терміналі PowerShell
(рисунок 4.7).
Рисунок 4.7 – Перевірка чи встановлено Node.js та її версія.
Подібним чином переконуємося у правильному встановленні та потчні
версії npm завдяки команді «npm -v» (рисунок 4.8).
Рисунок 4.8 – Перевірка чи встановлено npm та її версія
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 30
а
Далі переходимо у заздалегіть створену директорію де будуть
збегіратись файли майбутнього проєкту та файли середовища «Create React
App». Для переходу вводимо в командному рядку/ терміналі PowerShell
команду «cd ‘.\react tutorial\’ (рисунок 4.9).
Рисунок 4.9 – Перехід до каталогу react tutorial
Командою «npx create-react-app first-app» створюємо безпосередньо сам
проєкт. Результат виконання команди зображено на рисунку 4.10.
Рисунок 4.10 – Створення першого застосунку в вибраний каталог
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 31
а
Після створення проекту переходимо в нього командою «cd first-app».
Встановлюємо React Router та React-Bootstrap за до помогою команд: «npm
install react-router-dom@6» та «npm install react-bootstrap [email protected]»
відповідно. виконання даних команд зображено на рисунках 4.11 та 4.12.
Рисунок 4.11 – Перехід до каталогу застосунку та встановлення react-router.
Рисунок 4.12 – Встановлення react-bootstrap.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 32
а
По завершенню встановлення React Router та React-Bootstrap
запускаємо виконання створеного проєкту (рисунок 4.13), в терміналі
відображаються деталі запуску які можна переглянути на рисунку 4.14.
Рисунок 4.13 – Запуск.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 33
а
Рисунок 4.14 – Робочий Localhost. Вид в терміналі
Проте окрім результату запуску проєкту в вікні терміналу ми також
можемо побачити результат в вікні браузера де нам відкриється стартова
сторінка майбутнього веб-сайту (рисунок 4.15).
Рисунок 4.15 – Робочий Localhost. Вид в вікні браузера.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 34
а
Наступним кроком буде відкриття проєкту у IDE WebStorm. Тепер ми
можемо модифікувати файл src/App.js. Приклад файлу зображено на
рисунку 4.16.
Рисунок 16 – Створення файлу App.js з відповідним кодом програми.
Стартова сторінка у вікні браузера оновлюється автоматично і
результат змін які ми вносили у файл можна відразу переглянути
(рисунок 4.17).
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 35
а
Рисунок 4.17 – Вікно браузера з виконаним кодом
Подібним чином створені наступні необхідні для проєкту директорії
(рисунок 4.18).
Рисунок 4.18 – створені директорії Components та Pages.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 36
а
4.2 Архітектура
Архітектура маркетингової інформаційної системи магазину квітів
включає головну сторінку з каталогом товарів та послуг, сторінку «Про нас»
з історією магазину та командою, сторінку «Контакти» з контактною
інформацією та годинами роботи, а також сторінку «Блог» зі списком статей
про світ квітів та флористики. Кожна сторінка має чітку навігаційну
структуру та зображення, що допомагають користувачам знайти потрібну
інформацію та переглянути товари та послуги магазину зручним способом.
Архітектура сайту підтримує зручний користувацький досвід та відображає
професіоналізм магазину квітів.[18]
1. Головна сторінка сайту:
 Заголовок та логотип магазину квітів.
 Каталог товарів та послуг, де клієнти можуть переглядати різні
види квітів, букети, композиції, декоративні елементи та інші продукти.
 Меню або навігаційна панель, яка допомагає користувачам
перейти до різних розділів сайту, таких як «Про нас», «Контакти», «Блог»
тощо.
 Короткий опис магазину та його особливостей.
 Важливі акції, новини або спеціальні пропозиції.
 Кошик.
2. Сторінка «Про нас»:
- Історія магазину квітів, яка описує його заснування, розвиток та
досягнення.
- Команда магазину, де представлені основні фахівці, флористи та
співробітники, які працюють у магазині.
- Фотографії або відео команди, їхні досягнення та найкращі
проекти.
3. Сторінка «Контакти»:
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 37
а
- Контактна інформація магазину, така як адреса, телефони,
електронна пошта.
- Можливі години роботи магазину.
4. Сторінка «Блог»:
- Список статей або дописів, пов'язаних зі світом квітів,
флористики, догляду за квітами та іншими відповідними темами.
- Короткий опис кожної статті та зображення, що викликає інтерес
у читачів.[19][20]
4.3 Принцип роботи
Принцип роботи інформаційної системи магазину квітів базується на
створенні зручного та привабливого досвіду для клієнтів під час перегляду та
покупки квітів та пов'язаних товарів. Система прагне надати клієнтам
простий і легкий спосіб взаємодії з каталогом товарів та зручний процес
оформлення замовлення.
На головній сторінці сайту розташований каталог квітів та товарів,
який приваблює увагу клієнтів. Кожна позиція в каталозі супроводжується
чіткою та привабливою картинкою, яка надає візуальне представлення про
товар. Під кожною картинкою розміщена назва позиції, детальний опис, ціна
та кнопка "Додати до кошика". Для зручності користувачів, картинка
збільшується у розмірі при наведенні курсора, дозволяючи докладніше
роздивитися товар. Кнопка "Додати до кошика" також збільшується, щоб
залучити увагу клієнтів та забезпечити зручну можливість додавання товару
до кошика.
Після відбору товарів з каталогу, клієнт переходить до процесу
оформлення замовлення. Замовлення відправляється на обробку, і менеджер
магазину зв'язується з клієнтом для уточнення деталей. У цьому етапі,
менеджер запитує клієнта про вибір способу оплати, чи це буде готівка чи
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 38
а
карта. Також уточнюється адреса доставки та наявність потреби у листівці до
замовлення. У разі вибору замовлення з листівкою, клієнту пропонується
вказати текст листівки. Магазин також надає можливість доставки квітів як
самому замовнику, так і іншій вказаній людині.
Принцип роботи інформаційної системи магазину квітів базується на
спрощенні процесу вибору товару та оформлення замовлення, а також на
забезпеченні зручності та задоволення потреб клієнтів. Шляхом надання
докладної інформації про кожен товар, зручного каталогу та зв'язку з
менеджером магазину, система створює позитивний та персоналізований
досвід для кожного клієнта. Це сприяє залученню та збереженню клієнтів, а
також підвищенню задоволення від покупок у магазині квітів.[23]
4.4 Дизайн сайту
Однією з ключових складових успіху інформаційної системи магазину
квітів є його привабливий та зручний дизайн. Дизайн сайту спроектовано з
урахуванням максимального комфорту та задоволення користувачів.
Основною метою було забезпечити фокус на квітах та їх представленні,
використовуючи нейтральні кольори, які не відволікають від головного
завдання - демонстрації квітів.
Дизайн сайту магазину квітів відзначається своєю естетичністю та
чистотою. Використання нейтральних кольорів, таких як білий, кремовий та
пастельні відтінки, створює спокійну та гармонійну атмосферу, де головною
акцентується увага на квітах. Це допомагає клієнтам зосередитися на
товарах. Кожен елемент дизайну, від шрифтів та кнопок до ілюстрацій,
дбайливо підібрано з метою підсилити враження від відвідування сайту та
забезпечити зручну навігацію.[21][22]
Колірну гаму сайту зображено на рисунку 4.19.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 39
а
Рисунок 4.19 – Колірна гама сайту
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 40
а
4.5 Опис розробки
Розробку проєкту розпочнемо зі створення верхнього блоку який буде
містити головне меню сайту. Воно буде відображено на кожній сторінці
нашої інформаційної системи та використовуватиметься для навігації по
сайту. Тому в ньому прописуємо основні сторінки такі як «Домашня
сторінка» (вона ж головна сторінка нашої інформаційної системи), «Про
нас», «Контакти» та «Блог».
Також у верхній блок додамо логотип магазину квітів та назву
магазину, стрічку пошуку, кошик та кнопку входу в систему.
Рисунок 4.20 – Верхній блок та головне меню
Головна сторінка
Далі перейдемо до створення головної сторінки. На ній у верхній
частині створимо банер, який буде містити декілька зображень з текстом.
Зображення використані для банера можна побачити на рисунку 4.21.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 41
а
Рисунок 4.21 – Картинки банера
Також на головній сторінці створюємо каталог товарів, які
представлені в магазині. Каталог товарі представляє собою сітку в якій кожен
товар представлений в окремій комірці. Комірка в свою чергу має
зображення. яке найкращим чином відображає товар, а також детальний опис
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 42
а
даної позиції товару, ціну та кнопку додавання до кошику. При наведення
курсора мишки на зображення воно збільшується проте не виходячи за рамки
відведеної йому комірки, таким чином надається змога краще роздивитись
товар не порушуючи естетичне відображення каталогу. За таким самим
принципом збільшується і кнопка додавання товару в кошик.
Рисунок 4.22 – Каталог товарів
Про нас
Перейдемо до створення сторінки «Про нас». Головна ціль даної
сторінки ознайомити потенційних покупців з командою магазину,
можливими варіантами співпраці та готовими проектами.
Рисунок 4.23 – Сторінка «Про нас»
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 43
а
Для максимального комфорту дана сторінка була створена з
підсторінками, а навігацію можна здійснювати за допомогою бічного меню.
Рисунок 4.24 – Бічне меню сторінки «Про нас»
Рисунок 4.25 – Підсторінка «Команда» сторінки «Про нас»
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 44
а
Рисунок 4.26 – Підсторінка «Композиції» сторінки «Про нас»
Рисунок 4.27 – Підсторінка «Інтер’єр» сторінки «Про нас»
Рисунок 4.28 – Підсторінка «Екстер’єр» сторінки «Про нас»
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 45
а
Контакти
Наступною створеною сторінкою буде сторінка «Контакти». Дана
сторінка відображає контактну інформацію та можливі години роботи.
Рисунок 4.29 – Сторінка «Контакти»
Блог
Ведення блогу на сайті магазину квітів має великий потенціал для
покращення комунікації з клієнтами та створення стійкого іміджу бренду.
Блог може виступати як цінний інструмент маркетингу та забезпечувати
додаткові переваги для бізнесу.
Однією з основних цілей ведення блогу є надання клієнтам корисної та
цікавої інформації про квіти, догляд за ними, останні тенденції в сфері
флористики та рекомендації щодо вибору квіткових композицій для різних
випадків. Це допомагає встановити ближчий зв'язок з клієнтами, проявити
експертність магазину та підвищити довіру до його продуктів і послуг.
Тому було прийнято рішення про створення сторінки «Блог». На цій
сторінці також є сітка в кожній комірці якої розташоване тематичне
зображення анонсованої статті, короткі тези та кнопка для переходу на саму
статтю блогу.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 46
а
Рисунок 4.30 – Сторінка «Блог»
При натисканні на кнопку «Детальніше» ми переходимо до статті яка
анонсована в цій конкретній комірці.
Рисунок 4.31 – Сторінка зі статтею блогу
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 47
а
ВИСНОВКИ
Метою кваліфікаційної роботи бакалавра «Маркетингова
інформаційна система магазину квітів», є розробка та реалізація
функціонального веб-додатку, який надасть магазину квітів зручні та
ефективні інструменти для керування та продажу своїх товарів онлайн.
Основною метою є покращення ділових процесів магазину, забезпечення
зручного способу замовлення квітів клієнтами та підвищення
конкурентоспроможності підприємства.
Веб-сайт спрямований на залучення клієнтів та розширення бізнесу
магазину квітів за допомогою маркетингових інструментів. На майбутнє
передбачається підключення бази даних, що дозволить збирати та
аналізувати дані про клієнтів і їх замовлення, що в свою чергу допоможе
покращити маркетингову стратегію магазину.
Загальна мета будь-якої маркетингової інформаційної системи полягає
у якісному представленні продукту або послуги та задоволенні потреб
клієнтів. Маркетингова інформаційна система магазину квітів є ефективним
інструментом для просування та продажу квітів, забезпечуючи зручність
користування та задоволення потреб клієнтів.
В цілому, маркетингова інформаційна система магазину квітів
виявилась ефективним інструментом для просування та продажу квітів. Вона
дозволяє забезпечити зручність та задоволення потреб клієнтів, а також
підтримується зростанням бренду магазину. Продуманий дизайн, зручний
користувальницький інтерфейс та наявність блогу сприяють створенню
привабливого та функціонального середовища для клієнтів.
Для подальшого розвитку маркетингової інформаційної системи
рекомендується проводити постійний моніторинг задоволеності клієнтів,
вдосконалювати функціонал та додавати нові можливості, а також активно
просувати сайт у пошукових системах та соціальних мережах. Це дозволить
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 48
а
магазину квітів збільшити свою конкурентоспроможність і залучити більше
клієнтів.
Під час реалізації проєкту були розроблені та впроваджені
функціональні можливості системи, що відповідають цілям та завданням
магазину квітів. Проектування архітектури системи передбачало
використання сучасних технологій та забезпечення масштабованості та
надійності.
У процесі розробки було звернуто особливу увагу на забезпечення
зручності користування системою. Навігація по сайту була ретельно
продумана, а інтерфейс був розроблений інтуїтивно зрозумілим для
користувачів. Велика увага приділялась також візуальному оформленню
сайту та привабливості каталогу квітів та товарів.
Отже, кваліфікаційна робота виконана в повному обсязі згідно
технічного завдання на розробку.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 49
а
СПИСОК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ
CSS – (англ. Cascading Style Sheets – каскадні таблиці стилів), опис
зовнішнього вигляду документа, написаного з використанням
мови розмітки.
API – (англ. Application Programming Interface - інтерфейс прикладного
програмування), опис способів взаємодії однієї комп'ютерної
програми з іншими.
JS – (англ. JavaScript) — динамічна, об'єктно-орієнтована прототипна
мова програмування.
NPM – (англ. Node Package Manager) – це менеджер пакунків для мови
програмування JavaScript
GIT – Розподілена система керування версіями файлів та спільної
роботи.
IDE – (англ. іntegrated development environment- інтегроване
середовище розробки) — комплексне програмне рішення для
розробки програмного забезпечення.
HTML – (англ. HyperText Markup Language — мова розмітки гіпертексту)
— стандартизована мова розмітки документів для перегляду
вебсторінок у браузері.
МІС – Маркетингова інформаційна система
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 50
а
ДОДАТОК А
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор Володимир РУДНИЦЬКИЙ
__________________________
«___» ____________ 2023 року
Маркетингова інформаційна система магазину квітів
Специфікація
482.ЧДТУ.32247-01
Листів 2
Розробник _______________ Альона САПАЙ
Керівник _______________ Світлана ГРЕСЬКО
Черкаси 2023
2
482.ЧДТУ.32247-01
Позначення Найменування Примітка
Документація
482.ЧДТУ.32247-01 12 01 Текст програми
ДОДАТОК Б
Маркетингова інформаційна система магазину квітів
Текст програми
482.ЧДТУ.32247-01 12 01
Листів 22
Розробник: Альона Сапай
Черкаси 2023
2
482.ЧДТУ.32247-01 12 01
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
App.js
import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from "./Components/Header";
import './App.css';
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./Pages/Home";
import About from "./Pages/About";
import Contacts from "./Pages/Contacts";
import Blog from "./Pages/Blog";
import Pos1 from "./Components/Pos1";
import Pos2 from "./Components/Pos2";
import Pos3 from "./Components/Pos3";
import Pos4 from "./Components/Pos4";
import Pos5 from "./Components/Pos5";
import Pos6 from "./Components/Pos6";
class App extends React.Component {
render() {
return (
<div className='wrapper'>
<Header/>
<Router>
<Routes>
<Route path="/home" element={<Home/>}/>
<Route path="/about" element={<About/>}/>
<Route path="/contacts" element={<Contacts/>}/>
<Route path="/blog" element={<Blog/>}/>
<Route path="/pos1" element={<Pos1/>}/>
3
482.ЧДТУ.32247-01 12 01
<Route path="/pos2" element={<Pos2/>}/>
<Route path="/pos3" element={<Pos3/>}/>
<Route path="/pos4" element={<Pos4/>}/>
<Route path="/pos5" element={<Pos5/>}/>
<Route path="/pos6" element={<Pos6/>}/>
</Routes>
</Router>
</div>
)
}
}
export default App;
CarouselBox.js
import React from "react";
import {Carousel} from "react-bootstrap";
import {Component} from "react";
import Fusciello from '../assets/1.png';
import Medeiros from '../assets/2.png';
import Keawnet from '../assets/3.png';
import Boltneva from '../assets/4.png';
import Iriser from '../assets/5.png';
class CarouselBoxHk extends Component {
render() {
return (
<Carousel>
<Carousel.Item style={{'height': '350px'}}>
<img
className= "d-block w-100"
src={Fusciello}
alt="Flowers"/>
<Carousel.Caption>
<h3>Flowers home</h3>
<p></p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item style={{'height': '350px'}}>
<img
className= "d-block w-100"
src={Medeiros}
4
482.ЧДТУ.32247-01 12 01
alt="Flowers"/>
<Carousel.Caption>
<h3>Flowers home</h3>
<p></p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item style={{'height': '350px'}}>
<img
className= "d-block w-100"
src={Keawnet}
alt="Flowers"/>
<Carousel.Caption>
<h3>Flowers home</h3>
<p></p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item style={{'height': '350px'}}>
<img
className= "d-block w-100"
src={Boltneva}
alt="Flowers"/>
<Carousel.Caption>
<h3> Flowers home</h3>
<p></p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item style={{'height': '350px'}}>
<img
className= "d-block w-100"
src={Iriser}
alt="Flowers"/>
<Carousel.Caption>
<h3> Flowers home</h3>
<p></p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
}
}
export default CarouselBoxHk;
Heared.js
5
482.ЧДТУ.32247-01 12 01
import React, {useEffect, useState} from "react";
import {
Navbar,
Nav,
FormControl,
Container,
Form,
Button,
Modal
} from "react-bootstrap";
import logo from "./logo.png";
import {FaShoppingCart} from "react-icons/fa"
import Order from "./Order";
const showOrders = (props) =>{
return (
<div>
{props.orders.map(el => (
<Order onDelete={props.onDelete} key={el.id} item={el} />
))}
</div>
)
}
const showNothing = () => {
return (
<div className="empty">
<h2> Товару немає </h2>
</div>
)
}
export default function Header(props){
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [emailDirty, setEmailDirty] = useState( false)
const [passwordDirty, setPasswordDirty] = useState( false)
const [emailError, setEmailError] = useState( 'Email не може бути порожнім')
const [passwordError, setPasswordError] = useState( 'Пароль не може бути порожнім')
const [formValid, setFormValid] = useState(false)
let [cartOpen, setCartOpen] = useState(false)
const emailHandler = (e) => {
setEmail(e.target.value)
6
482.ЧДТУ.32247-01 12 01
const re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if (!re.test(String(e.target.value.toLowerCase()))) {
setEmailError('Некоректний email')
} else {
setEmailError('')
}
}
const passwordHandler = (e) => {
setPassword(e.target.value)
if (e.target.value.length < 3 || e.target.length > 8) {
setPasswordError('Пароль повинен мати не менше 3 і не більше 8 символів')
if (!e.target.value) {
setPasswordError('Пароль не може бути порожнім')
}
} else {
setPasswordError('')
}
}
const blurHandler = (e) => {
switch (e.target.name) {
case 'email':
setEmailDirty(true)
break
case 'password':
setPasswordDirty(true)
break
}
}
useEffect(() =>{
if (emailError || passwordError) {
setFormValid(false)
}else {
setFormValid(true)
}
}, [emailError, passwordError])
return (
<header>
<Navbar fixed= "top" collapseOnSelect expand="md" bg="dark" variant="dark" >
<Container>
<Navbar.Brand href="/home">
<img
src={logo}
height="30"
width="30"
className="d-inline-block align-top"
alt = "Logo"
7
482.ЧДТУ.32247-01 12 01
/> Flowers Home
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto" >
<Nav.Link href="/home"> Home </Nav.Link>
<Nav.Link href="/about"> About us </Nav.Link>
<Nav.Link href="/contacts"> Contacts </Nav.Link>
<Nav.Link href="/blog"> Blog </Nav.Link>
</Nav>
<Form className="d-inline-flex">
<FormControl
type="text"
placeholder="Search"
className="me-2"
/>
<Button variant="outline-info"> Search </Button>
</Form>
</Navbar.Collapse>
<FaShoppingCart onClick={() => setCartOpen(cartOpen = !cartOpen)}
className={`shop-cart-button ${cartOpen && 'active'}`}/>
{cartOpen && (
<div className="shop-cart">
{props.orders.length > 0 ?
showOrders(props) : showNothing()}
</div>
)}
</Container>
<Button className="me-2" onClick={handleShow}>Login</Button>
</Navbar>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Log in</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="fromBasicEmail">
<Form.Label>Email Address</Form.Label>
<div style={{color:"red"}}>{emailError}</div>
<Form.Control onChange={e => emailHandler(e)}
name="email"
value={email}
onBlur={e => blurHandler(e)}
type="email"
placeholder="Enter Email"/>
</Form.Group>
<Form.Group controlId="fromBasicPassword">
8
482.ЧДТУ.32247-01 12 01
<Form.Label>Password</Form.Label>
{(passwordError && passwordDirty) && <div
style={{color:"red"}}>{passwordError}</div>}
<Form.Control onChange={e => passwordHandler(e)}
name="name"
value={password}
onBlur={e => blurHandler(e)}
type="password"
placeholder="Enter password">
</Form.Control>
</Form.Group>
<Form.Group controlId="fromBasicCheckbox">
<Form.Check type="checkbox"
label="Remember me"/>
</Form.Group>
<Button disabled={!formValid}
variant="primary"
type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal>
</header>
)
}
Items.js
import React, {Component} from 'react';
import Item from "./UI/item";
class Items extends Component {
render() {
return (
<main>
{this.props.items.map(el => (
<Item key={el.id} item={el} onAdd={this.props.onAdd}/>
))}
</main>
);
}
}
export default Items;
Order.js
9
482.ЧДТУ.32247-01 12 01
import React, {Component} from 'react';
import {FaTrash} from 'react-icons/fa'
class Order extends Component {
render() {
return (
<div className='item'>
<img src={'./img/'+this.props.item.img}/>
<h2>{this.props.item.title}</h2>
<p>{this.props.item.price}$</p>
<FaTrash className='delete-icon' onClick={() =>
this.props.onDelete(this.props.item.id)}/>
</div>
);
}
}
export default Order;
Post1.js
import React, {Component} from 'react';
import {Card, Image} from "react-bootstrap";
import Fl1 from '../Content/1/pexels-cottonbro-studio-4273464.jpg';
import Fl2 from '../Content/1/pexels-cottonbro-studio-4273427.jpg';
import Fl3 from '../Content/1/pexels-cottonbro-studio-4273468.jpg';
class Pos1 extends Component {
render() {
return (
<div>
<Image
className="mx-auto d-block"
width={550}
height={450}
src={Fl2}
/>
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Body>
<Card.Title>Вибухова бавовна</Card.Title>
<Card.Text>
Сьогодні ми хочемо розповісти про квіти бавовни - цікавий вид рослин,
який може здивувати
своєю незвичайністю.
Квіти бавовни мають білосніжні квіти з великими жовтими серединками,
які нагадують величезні
кульки. Ці рослини мають дуже приємний аромат, який наповнює повітря
навколо.
10
482.ЧДТУ.32247-01 12 01
Квіти бавовни символізують чистоту, свіжість і ніжність, тому їх дуже
часто використовують
для створення букетів на весільні та романтичні події. Але ці квіти також
можуть бути
чудовим подарунком для будь-якої іншої важливої події, наприклад,
народження дитини або
день народження.
У нашому магазині ми пропонуємо широкий вибір квітів бавовни, які ми
доставимо прямо до
вашої двері. Замовляйте букет з квітів бавовни вже сьогодні і порадуйте
своїх близьких або
колег приємним сюрпризом!
</Card.Text>
</Card.Body>
</Card>
</div>
);
}
}
export default Pos1;
Post2.js
import React, {Component} from 'react';
import {Image, Card} from "react-bootstrap";
import L1 from '../Content/2/pexels-cup-of-couple-6633450.jpg'
class Pos2 extends Component {
render() {
return (
<div>
<Image
className="mx-auto d-block"
width={350}
height={350}
src={L1}
/>
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Body>
<Card.Title>Витончені лілії</Card.Title>
<Card.Text>
Лілії - це красиві та ніжні квіти, які завжди привертають увагу своїм
ароматом та грацією.
У нашому магазині квітів ви знайдете широкий вибір лілій різних сортів
та кольорів.
Лілії дуже популярні в букетах, а також можуть бути використані для
11
482.ЧДТУ.32247-01 12 01
декорування приміщень,
святкових заходів та подарунків. Відправте своїй коханій людині букет
лілій, щоб виразити своє
ніжне та романтичне ставлення до неї. Замовляйте лілії у нашому
магазині квітів та насолоджуйтесь
їх красою та ароматом!
</Card.Text>
</Card.Body>
</Card>
</div>
);
}
}
export default Pos2;
Post3.js
import React, {Component} from 'react';
import {Image, Card,} from "react-bootstrap";
import M1 from '../Content/3/pexels-biferyal-7649719.jpg';
import M2 from '../Content/3/pexels-biferyal-7649716.jpg'
import M3 from '../Content/3/pexels-biferyal-7649803.jpg'
class Pos3 extends Component {
render() {
return (
<div>
<Image
className="mx-auto d-block"
width={350}
height={450}
src={M2}
/>
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Body>
<Card.Title>Загадкові маргаритки</Card.Title>
<Card.Text>
Сьогодні ми хочемо вам розповісти про дуже особливий вид квітів - загадкові
маргаритки.
Ці квіти вражають своєю незвичайністю та таємничістю. Вони мають білі
пелюстки з чорними краями,
що надає їм дивовижну графічність та концентрує увагу на їх красі.
Загадкові маргаритки вважаються символом загадковості та таємниці. Вони
часто використовуються в
букетах, щоб додати їм неповторності та особливого шарму.
12
482.ЧДТУ.32247-01 12 01
У нашому магазині ми маємо широкий вибір цих унікальних квітів. Замовте
букет з загадковими
маргаритками прямо зараз та пориньте у світ загадковості та краси!
</Card.Text>
</Card.Body>
</Card>
</div>
);
}
}
export default Pos3;
Post4.js
import React, {Component} from 'react';
import {Card, Image} from "react-bootstrap";
import T1 from '../Content/4/pexels-elina-sazonova-4555291.jpg'
import T2 from '../Content/4/pexels-ioana-motoc-7521431.jpg'
import T3 from '../Content/4/pexels-ivan-samkov-7910902.jpg'
class Pos4 extends Component {
render() {
return (
<div>
<Image
className="mx-auto d-block"
width={350}
height={350}
src={T1}
/>
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Body>
<Card.Title>Цнотливі тюльпани</Card.Title>
<Card.Text>
Ми раді представити вам нашу найпопулярнішу колекцію - тюльпани. Ці
квіти відомі своєю
красою та ніжністю, і стали символом весни та народження нового життя.
Тюльпани - це дуже різноманітні квіти, які можуть бути різних кольорів
та відтінків,
від яскравих червоних до ніжно-рожевих та білих. Вони також мають
різні форми та розміри
квіток, що дозволяє створювати різноманітні букети та композиції.
Тюльпани - ідеальний вибір для будь-якої випадковості - від
романтичного подарунка до дня
13
482.ЧДТУ.32247-01 12 01
народження до весільного букету. Замовляючи тюльпани у нашому
магазині, ви можете бути
впевнені, що отримаєте тільки свіжі та якісні квіти.
</Card.Text>
</Card.Body>
</Card>
</div>
);
}
}
export default Pos4;
Post5.js
import React, {Component} from 'react';
import {Button, Card, Image} from "react-bootstrap";
import Tr1 from'../Content/5/pexels-леся-терехова-10559838.jpg'
import Tr2 from'../Content/5/pexels-леся-терехова-10559839.jpg'
import Tr3 from'../Content/5/pexels-леся-терехова-10559842.jpg'
class Pos5 extends Component {
render() {
return (
<div>
<Image
className="mx-auto d-block"
width={350}
height={350}
src={Tr1}
/>
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Body>
<Card.Title> Мрійливі троянди</Card.Title>
<Card.Text>
Ласкаво просимо до нашого магазину квітів, де ви знайдете найкрасивіші
троянди,
що вважаються одними з найбільш мрійливих квітів у світі. З їх ніжним
ароматом та
розкішними квітами, троянди завжди привертають увагу своєю красою та
грацією.
Ці квіти мають неповторний шарм, який надихає нас на мрії та
романтичні уявлення.
Вони символізують любов, романтику та чуттєвість, і є чудовим
подарунком для будь-якої
важливої події у вашому житті.
Тож, якщо ви хочете виразити свої почуття та надіслати найніжніші
привітання, оберіть
14
482.ЧДТУ.32247-01 12 01
наші троянди - квіти, які мріються кожному.
</Card.Text>
</Card.Body>
</Card>
</div>
);
}
}
export default Pos5;
Pos6.js
import React, {Component} from 'react';
import { Card, Image} from "react-bootstrap";
import P1 from '../Content/6/pexels-marta-dzedyshko-7693956.jpg'
class Pos6 extends Component {
render() {
return (
<div>
<Image
className="mx-auto d-block"
width={350}
height={350}
src={P1}
/>
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Body>
<Card.Title>Ніжні півонії</Card.Title>
<Card.Text>
Ласкаво просимо до нашого магазину квітів! Ми раді представити вам
нашу колекцію півоній -
цих ніжних та чарівних квітів, які без сумніву зроблять ваші дні
яскравішими та більш
красивими.
Півонії - це квіти ніжності, краси та гармонії. Вони мають великі, повні
квіти з ніжними
пелюстками, що розкриваються перед вами. Кожен відтінок півонії має
свою унікальну красу,
від блідо-рожевого до яскравого червоного.
Не зважаючи на те, що півонії можуть бути більш ніжними та м'якими, їх
також можна описати
як досить міцні та стійкі квіти. Вони можуть довго зберігати свою
свіжість та красу, роблячи
їх ідеальним вибором для подарунку або декорування вашого особистого
простору.
15
482.ЧДТУ.32247-01 12 01
Замовляйте півонії в нашому магазині квітів сьогодні та отримуйте
найкращі квіти, які
додають ніжності та краси у ваше життя. Наша команда готова надати вам
найкращий сервіс та
допомогти вам з кожним кроком вашого замовлення.
</Card.Text>
</Card.Body>
</Card>
</div>
);
}
}
export default Pos6;
Home.js
import React, {Component} from 'react';
import CarouselBoxHk from "../Components/CarouselBoxHk";
import { Container,} from "react-bootstrap";
import Items from "../Components/Items";
import Header from "../Components/Header";
export class Home extends Component {
constructor(props) {
super(props)
this.state = {
orders: [],
items: [
{
id: 1,
title: 'Вибухова бавовна',
img: '1/pexels-cottonbro-studio-4273464.jpg',
desc: 'Відкрийте для себе світ вибухової краси квітів бавовни!',
price: '400'
},
{
id: 2,
title: 'Витончені лілії',
img: '2/pexels-cup-of-couple-6633450.jpg',
desc: 'Квіти, які завжди привертають увагу своїм ароматом та грацією. ',
price: '50'
},
{
id: 3,
title: 'Загадкова маргаритка',
img: '3/pexels-biferyal-7649719.jpg',
desc: 'Ці квіти вражають своєю незвичайністю та таємничістю. ',
price: '300'
16
482.ЧДТУ.32247-01 12 01
},
{
id: 4,
title: 'Цнотливі тюльпани',
img: '4/pexels-elina-sazonova-4555291.jpg',
desc: 'Тюльпани - ідеальний вибір для будь-якої випадковості - від
романтичного подарунка до дня' +
' народження до весільного букету.',
price: '200'
},
{
id: 5,
title: 'Мрійливі троянди',
img: '5/pexels-леся-терехова-10559838.jpg',
desc: 'Якщо ви хочете виразити свої почуття та надіслати найніжніші
привітання, оберіть наші ' +
'троянди - квіти, які мріються кожному.',
price: '159'
},
{
id: 6,
title: 'Ніжні півонії',
img: '6/pexels-marta-dzedyshko-7693956.jpg',
desc: 'Квіти, які додадуть ніжності та краси у ваше життя',
price: '170'
},
]
};
this.addToOrder = this.addToOrder.bind(this)
this.deleteOrder = this.deleteOrder.bind(this)
}
render() {
return (
<div className='wrapper'>
<CarouselBoxHk/>
<Header orders={this.state.orders} onDelete={this.deleteOrder}/>
<Container className='header'>
<Items items={this.state.items} onAdd={this.addToOrder}/>
</Container>
</div>
);
}
deleteOrder(id){
this.setState({orders:this.state.orders.filter(el => el.id !== id)})
}
17
482.ЧДТУ.32247-01 12 01
addToOrder(item) {
let isInArray = false
this.state.orders.forEach(el => {
if(el.id === item.id)
isInArray = true
})
if(!isInArray)
this.setState({orders: [...this.state.orders, item]})
}
}
export default Home;
Contacts.js
import React, {Component} from 'react';
import {Image} from "react-bootstrap";
class Contacts extends Component {
render() {
return (
<div>
<Image
className="mx-auto d-block"
width={750}
height={550}
src="https://images.pexels.com/photos/1686974/pexels-photo-
1686974.jpeg?auto=compress&cs=tinysrgb&w=1600"
/>
<h2 className=" text-center">Ви завжди можете нас знайти за адресами:</h2>
<ul>
<li><h5>вул. Нижня горова, 12</h5></li>
<li><h5>вул. Героїв України, 10</h5></li>
<li><h5> вул. Незалежності, 15</h5></li>
</ul>
<h2 className=" text-center">Та зателефонувати нам в будь який зручний для
Вас час</h2>
<ul>
<li><h5>+380 73 584 56 85</h5></li>
<li><h5>+380 50 584 56 85</h5></li>
<li><h5>+380 96 584 56 85</h5></li>
</ul>
</div>
);
}
}
export default Contacts;
18
482.ЧДТУ.32247-01 12 01
Blog.js
import React, {Component} from 'react';
import {Button, Card, Container,} from "react-bootstrap";
import Flo1 from '../Content/1/pexels-cottonbro-studio-4273464.jpg';
import Flo2 from '../Content/2/pexels-cup-of-couple-6633450.jpg';
import Flo3 from '../Content/3/pexels-biferyal-7649719.jpg';
import Flo4 from '../Content/4/pexels-elina-sazonova-4555291.jpg';
import Flo5 from '../Content/5/pexels-леся-терехова-10559838.jpg';
import Flo6 from '../Content/6/pexels-marta-dzedyshko-7693956.jpg';
export class Blog extends Component {
render() {
return (
<div>
<Container>
<h2 className="text-center m-4">Блог про квіти</h2>
<div className="row">
<div className="col">
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Img
variant="top"
src={Flo1}
/>
<Card.Body>
<Card.Title>Вибухова Бавовна</Card.Title>
<Card.Text>
Разом- ми сила!
</Card.Text>
<Button variant="primary"
href={'/Pos1'}>
Детальніше
</Button>
</Card.Body>
</Card>
</div>
<div className="col">
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Img
variant="top"
src={Flo2}
/>
<Card.Body>
<Card.Title>Витончені лілії</Card.Title>
<Card.Text>
19
482.ЧДТУ.32247-01 12 01
Нас надихає природа
</Card.Text>
<Button variant="primary"
href={'/pos2'}>
Детальніше
</Button>
</Card.Body>
</Card>
</div>
<div className="col">
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Img
variant="top"
src={Flo3}
/>
<Card.Body>
<Card.Title>Загадкові маргаритки</Card.Title>
<Card.Text>
Ми знаємо, що Вам потрібно
</Card.Text>
<Button variant="primary"
href={'/pos3'}>
Детальніше
</Button>
</Card.Body>
</Card>
</div>
</div>
<div className="row">
<div className="col">
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Img
variant="top"
src={Flo4}
/>
<Card.Body>
<Card.Title>Цнотливі тюльпани</Card.Title>
<Card.Text>
Разом- ми сила!
</Card.Text>
<Button variant="primary"
href={'/pos4'}>
Детальніше
</Button>
20
482.ЧДТУ.32247-01 12 01
</Card.Body>
</Card>
</div>
<div className="col">
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Img
variant="top"
src={Flo5}
/>
<Card.Body>
<Card.Title>Мрійливі троянди</Card.Title>
<Card.Text>
Нас надихає природа
</Card.Text>
<Button variant="primary"
href={'/pos5'}>
Детальніше
</Button>
</Card.Body>
</Card>
</div>
<div className="col">
<Card className="m-4 text-center" bg="light" border="primary">
<Card.Img
variant="top"
src={Flo6}
/>
<Card.Body>
<Card.Title>Ніжні півонії</Card.Title>
<Card.Text>
Ми знаємо, що Вам потрібно
</Card.Text>
<Button variant="primary"
href={'/pos6'}>
Детальніше
</Button>
</Card.Body>
</Card>
</div>
</div>
</Container>
</div>
);
}
21
482.ЧДТУ.32247-01 12 01
}
export default Blog;
About.js
import React, {Component} from 'react';
import Tab from "react-bootstrap/Tab";
import {Container} from "react-bootstrap";
import {Col,Nav, Row} from "react-bootstrap";
class About extends Component {
render() {
return (
<Container>
<Tab.Container id="left-tabs-example" defaultActiveKey="first">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column mt-2">
<Nav.Item>
<Nav.Link eventKey="first">Дизайн</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">Команда</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="third">Композиції</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="fourth">Інтер'єр</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="fifth">Екстер'єр</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={7}>
<Tab.Content >
<Tab.Pane eventKey="first">
<p className=" text-center">
<h4>Ми працюємо з кожним замовленням вкладаючи частинку
душі </h4>
</p>
<img className="imgabout"
src="https://images.pexels.com/photos/3766221/pexels-photo-
3766221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="picture one"/>
</Tab.Pane>
<Tab.Pane eventKey="second">
<p className=" text-center"> <h4>І все таки разом ми -
сила!</h4></p>
22
482.ЧДТУ.32247-01 12 01
<img className="imgabout"
src="https://images.pexels.com/photos/5409735/pexels-photo-
5409735.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="picture two"/>
</Tab.Pane>
<Tab.Pane eventKey="third">
<p className=" text-center"> <h4>Краса обов'язково врятує
світ</h4></p>
<img className="imgabout"
src="https://images.pexels.com/photos/4466544/pexels-photo-
4466544.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="picture three"/>
</Tab.Pane>
<Tab.Pane eventKey="fourth">
<p className=" text-center"> <h4>І в будинку значно
затишніше</h4></p>
<img className="imgabout"
src="https://images.pexels.com/photos/3775156/pexels-photo-
3775156.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="picture fourth"/>
</Tab.Pane>
<Tab.Pane eventKey="fifth">
<p className="text-center"><h4>Прикрасимо так, щоб обов'язково
хотілось завітати</h4></p>
<img className="imgabout"
src="https://images.pexels.com/photos/302588/pexels-photo-
302588.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="picture fifth"/>
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
</Container>
);
}
}
export default About;
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. What Is Node.js? Complex Guide for 2022 [Електронний ресурс]. –
Режим доступу: https://www.netguru.com/glossary/node-js#nodejs-terms-
worth-knowing
2. Що таке NPM [Електронний ресурс]. – Режим доступу:
https://www.tutorialsteacher.com/nodejs/what-is-node-package-manager
3. Що таке Git [Електронний ресурс]. – Режим доступу:
https://www.atlassian.com/git/tutorials/what-is-git
4. Огляд WebStorm [Електронний ресурс]. – Режим доступу:
https://reviews.financesonline.com/p/webstorm/
5. Чому WebStorm є найкращим другом розробника JavaScript
[Електронний ресурс]. – Режим доступу:
https://content.techgig.com/tech-talk/this-is-why-webstorm-is-a-javascript-
developers-best-friend/articleshow/81464944.cms
6. Що таке JavaScript? Визначення мови програмування JS[Електронний
ресурс]. – Режим доступу: https://www.freecodecamp.org/news/what-is-
javascript-definition-of-js/
7. FlenganD. Javascript: The Definitive Guide, 7th edition, 2020. – 687с.
8. Jesse Cravens, Thomas Q Brady. BuildingWebAppswith Ember.js: Write
Ambitious JavaScript 1st Edition, 2014. – 188с.
9. What Is React Used For? [Електронний ресурс]. – Режим доступу:
https://www.telerik.com/blogs/what-is-react-used-for
10. Duckett Jon. HTML and CSS: Design and Build Websites, 2011. – 490с.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 73
а
11. What is React js: How does it work and what is it for? [Електронний
ресурс]. – Режим доступу: https://lovtechnology.com/en/What-is-react-
js%2C-how-does-it-work-and-what-is-it-for%3F/
12. Alex Banks. Learning React: Functional Web Development with React and
Redux 1st Edition, 2017. – 320с.
13.Інформаційний маркетинг (2002) 2.4. Маркетингові інформаційні
системи [Електронний ресурс]. – Режим доступу:
https://library.if.ua/book/97/6660.html
14. Перспективи розвитку інтернет-торгівлі [Електроннийресурс] –Режим
доступу до ресурсу:
http://www.webtec.com.ua/uk/articles/index/view/2011-05-05/web-site/
15. Eli Schwartz. Product-Led SEO: The Why Behind Building Your Organic
Growth Strategy, 2021. – 262 с.
16. Ur.co.ua [Електронний ресурс]: [Веб-сайт] – Режим доступу до
ресурсу: http://ur.co.ua/33/3009-1-poiskovye-sistemy-interneta.html –
Пошукові системи Інтернету
17. Deane Barker. Web Content Management: Systems, Features, and Best
Practices 1st Edition, 2016. – 380с.
18. Розробка макету сайту [Електронний ресурс]. – Режим доступу:
http://dist.org.ua/pluginfile.php/7033/mod_resource/content/1/2.%20%D0
%A0%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B
0%20%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D1%83%20%D
1%81%D0%B0%D0%B9%D1%82%D1%83.pdf
19. Урок 26 (web-версія конспекту без зображень) [Електронний ресурс].
– Режим доступу: http://urokinformatiki.in.ua/urok-26-struktura-veb-
sajtiv-riznovidi-veb-sajtiv/
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 74
а
20. Основні етапи створення сайту [Електронний ресурс]. – Режим
доступу: http://repair.lviv.ua/stvorennya-sajtiv/osnovni-etapi-stvorennya-
sajtu/
21. Дизайн сайтів [Електронний ресурс]. – Режим доступу:
http://webstudio2u.net/ua/design-site/106-what-is-web-design.html
22. Webometr.kpi.ua [Електронний ресурс]: [Веб-сайт] – Режим доступу
до ресурсу: https://webometr.kpi.ua/citation-scholar –Google Scholar
23. Addy Osmani. Developing Backbone.js Applications:
BuildingBetterJavaScriptApplications 1st Edition, 2013. – 374с.
Лист
ЧДТУ.232247.001 ПЗ т
Зм. Лист № докум. Підпис Дат 75
а
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
