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/5452| Title: | Web-сервіс обслуговування клієнтів крафтової кав’ярні |
| Authors: | Тарасенко, Ярослав Володимирович Чмир, Роман Вікторович |
| Keywords: | COFFEE HOUSE;WEBSTORM;JAVASCRIPT;REACT;TYPESCRIPT;ВЕБ-САЙТ |
| Issue Date: | 14-Jun-2023 |
| Abstract: | Робота є актуальною, оскільки існує зростаючий інтерес до веб-сервісів кав’ярень та зручність їх використання через веб-сайти. Метою роботи є створення зручного та доступного сервісу, який дозволяє користувачам швидко та ефективно замовляти та отримувати своє замовлення. Об’єкт дослідження – процес розробки веб-сервісу. Предмет дослідження – Web-сервіс обслуговування клієнтів крафтової кав’ярні. Було використано такі основні методи: аналіз літературних джерел, дослідження ринку, розробка прототипу. Практична значущість отриманих результатів полягає в наступному: Розвиток веб-сервісів кав’ярень, розвиток актуальності веб-сайтів, швидкий та популярний сервіс обслуговування. У першому розділі проведено детальний аналіз теоретичних аспектів, пов’язаних з темою веб-сервісів, їх актуальністю в сучасному світі та принципами створення ефективного веб-сервісу. У другому розділі проведено аналіз та вимоги до веб-сайту, його архітектуру, яка має на меті забезпечити ефективну розробку зручного та корисного веб-сайту. Третій розділ присвячений процесу розробки та втіленню нового Webсервісу обслуговування клієнтів крафтової кав’ярні згідно з концепнією. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/5452 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Чмир_WEB-1911.pdf Restricted Access | Web-сервіс обслуговування клієнтів крафтової кав’ярні | 3.03 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра інформаційних технологій проектування
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи
«бакалавра»
освітній рівень
на тему: «Web-сервіс обслуговування клієнтів крафтової кав’ярні»
Виконав: студент 4 курсу, групи Web-1911
Спеціальності
126 «Інформаційні системи та технології»
(шифр і назва напряму підготовки)
Студент Чмир Роман Вікторович
(прізвище та ініціали)
Керівник Тарасенко Ярослав
Володимирович
(прізвище та ініціали)
Директор ТОВ Андерсенлаб
Рецензент Алесін Олег Вікторович
(прізвище та ініціали)
Черкаси 2023
Черкаський державний технологічний університет
Факультет інформаційних технологій і систем
Кафедра інформаційних технологій проектування
Освітній рівень бакалавр
Спеціальність 126 «Інформаційні системи та технології»
ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
___________ Тетяна ПРОКОПЕНКО
«_____» ______________20___ року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Чмир Роману Вікторовичу
(прізвище, ім’я, по батькові)
1. Тему проекту (роботи) Web-сервіс обслуговування клієнтів крафтової
кав’ярні _________________________________________________________
Керівник проекту (роботи) Тарасенко Ярослав Володимирович
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету
від « 24 » ___02_______ 20 23 року № ____43/04____
2. Строк подання студентом проекту (роботи) ____01.06.2023_________
3. Вхідні дані до проекту ___JavaScript, React, TypeScript, HTML, SCSS,
WebStorm, Git, GitHub______________________________________
__________________________________________________________________
__________________________________________________________________
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно
розробити) ________________________________________________________
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт
проекту Блок-схеми функціональних модулів, ілюстрації роботи системи,
зображення структури, зображення зовнішнього вигляду веб-сайту.
6. Консультанти розділів проекту (роботи)
Підпис, дата
Прізвище, ініціали та
Розділ Завдання
посади консультанта Завдання видав
прийняв
1
2
7. Дата видачі завдання __27.02.2023_____________________________
КАЛЕНДАРНИЙ ПЛАН
Строк
виконання
№
Назва етапів випускної роботи етапів Примітки
п/п
випускної
роботи
1 Постановка задачі 05.12.2022 виконано
2 Підготовка завдання 13.12.2022 виконано
3 Погодження завдання 16.12.2022 виконано
4 Затвердження завдання 19.02.2023 виконано
Основна стадія
1 Підбір матеріалів 27.02.2023 виконано
2 Аналіз шляхів вирішення поставленої 04.02.2023 виконано
задачі
4 Вибір кінцевого варіанту проектного 17.03.2023 виконано
рішення
5 Оформлення первісної редакції роботи 25.03.2023 виконано
Заключна стадія
1 Узгодження прийнятих проектних рішень 31.04.2023 виконано
з керівником
2 Оформлення пояснювальної записки 13.05.2023 виконано
роботи в кінцевій редакції
3 Попередній захист роботи 15.05.2023 виконано
4 Затвердження роботи 02.06.2023
5 Рецензування роботи 06.06.2023
6 Захист роботи 14.06.2023
Студент _____________________ Роман ЧМИР
(підпис)
Керівник проекту (роботи) ___________________ Ярослав ТАРАСЕНКО
АНОТАЦІЯ
Бакалаврська кваліфікаційна робота на тему «Web-сервіс
обслуговування клієнтів крафтової кав’ярні» містить _63___ сторінок, ___0__
таблиць, ____37__ рисунків, список літератури з _____6___ найменувань,
___2__додатків.
Робота є актуальною, оскільки існує зростаючий інтерес до веб-сервісів
кав’ярень та зручність їх використання через веб-сайти.
Метою роботи є створення зручного та доступного сервісу, який
дозволяє користувачам швидко та ефективно замовляти та отримувати своє
замовлення.
Об’єкт дослідження – процес розробки веб-сервісу. Предмет
дослідження – Web-сервіс обслуговування клієнтів крафтової кав’ярні.
Було використано такі основні методи: аналіз літературних джерел,
дослідження ринку, розробка прототипу.
Практична значущість отриманих результатів полягає в наступному:
Розвиток веб-сервісів кав’ярень, розвиток актуальності веб-сайтів, швидкий та
популярний сервіс обслуговування.
У першому розділі проведено детальний аналіз теоретичних аспектів,
пов’язаних з темою веб-сервісів, їх актуальністю в сучасному світі та
принципами створення ефективного веб-сервісу.
У другому розділі проведено аналіз та вимоги до веб-сайту, його
архітектуру, яка має на меті забезпечити ефективну розробку зручного та
корисного веб-сайту.
Третій розділ присвячений процесу розробки та втіленню нового Web-
сервісу обслуговування клієнтів крафтової кав’ярні згідно з концепнією.
КЛЮЧОВІ СЛОВА: COFFEE HOUSE, JAVASCRIPT, REACT, TYPESCRIPT,
WEBSTORM, ВЕБ-САЙТ.
SUMMARY
The bachelor's thesis on the topic "Web-service for customer service of a craft
coffee shop" contains _63___ pages, ___0__ tables, ____37__ figures, a list of
literature with _____6___ names, ___2__appendices.
The work is relevant because there is a growing interest in web-based coffee
shop services and their usability through websites.
The goal of the work is to create a convenient and accessible service that allows
users to order and receive their order quickly and efficiently.
The object of research is the process of developing a web service. The subject
of the research is the Web service for customer service of a craft coffee shop.
The following main methods were used: analysis of literary sources, market research,
prototype development.
The practical significance of the obtained results is as follows: Development
of web services of coffee shops, development of relevance of websites, fast and
popular service.
In the first chapter, a detailed analysis of theoretical aspects related to the topic
of web services, their relevance in the modern world and the principles of creating an
effective web service is carried out.
In the second chapter, the analysis and requirements for the website, its
architecture, which aims to ensure the effective development of a user-friendly and
useful website, is carried out.
The third section is devoted to the process of development and implementation
of a new web service for customer service of a craft coffee shop according to the
concept.
KEYWORDS: COFFEE HOUSE, JAVASCRIPT, REACT, TYPESCRIPT,
WEBSTORM, WEBSITE.
ЗМІСТ
ВСТУП …………………………………………………………………………...3
РОЗДІЛ 1 ЩО ТАКЕ ВЕБ-САЙТИ: ПОНЯТТЯ, ПРИНЦИПИ РОБОТИ ,
ПЕРЕВАГИ І НЕДОЛІКИ.................................................................................... 4
1.1 Потяння веб-сайтів ................................................................................... 4
1.2 Загальні принципи для створення веб-сайтів ......................................... 5
1.3 Актуальність веб-сайтів ........................................................................... 7
1.4 Головні проблеми при створенні веб-сайту та їх вирішення ................ 9
РОЗДІЛ 2 МОДЕЛЮВАННЯ ПРОГРАМНОЇ РЕАЛІЗАЦІЇ ВЕБ-ДОДАТКУ 14
2.1 Моделювання предметної області......................................................... 14
2.2 Вимоги до веб-сайтів ............................................................................. 18
2.3 Архітектура веб-сайту ........................................................................... 19
РОЗДІЛ 3 ПРОГРАМНА РЕАЛІЗАЦІЯ ВЕБ-ДОДАТКУ ................................ 23
3.1 Опис середовища розробки ................................................................... 23
3.2 Реалізація веб-сайту кав’ярні Coffee House .......................................... 35
3.3 Порівняння з аналогами......................................................................... 53
ВИСНОВКИ ....................................................................................................... 57
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ........................................................... 59
ДОДАТОК А ...................................................................................................... 61
ДОДАТОК Б ....................................................................................................... 63
ЧДТУ 231947.005 ПЗ
Зм. Лист № докумемента Підпис Дата
Розроб. Прізвище Літ. Лист Листів
Перев. Тарасенко Я.В. Web-сервіс обслуговування клієнтів Н 2
Реценз. Алесін О.В. крафтової кав’ярні ФІТІС,
Н.контр. Тарасенко Я.В.
Пояснювальна записка кафедра ІТП, Web-1911
Затв. Прокопенко Т.О.
ВСТУП
Актуальність теми. У сучасному світі, де досить складно уникнути
застосування інформаційних технологій, та швидкість і актуальність
розповсюдження інформації інтернетом програмування веб-сервісів для
розвитку бізнесу стало необхідністю в багатьох сферах людської діяльності.
Особливо це стосується створення веб-сайтів та веб-додатків, де розробка
швидкісного і якісного функціоналу сайту може стати запорукою успіху. Web-
сервіс обслуговування клієнтів крафтової кав’ярні створюється саме з таким
функціоналом, який допоможе швидко і в короткий час замовити і отримати
замовлення, що допоможе скоротити час на буденні справи.
Мета і завдання розробки
Метою розробки є:
‒ Створення швидкого і функціонального Web-сервісу обслуговування
клієнтів крафтової кав’ярні з використанням сучасних технологій
програмування та оптимізації контенту. В результаті роботи буде розроблено
зручний веб-сайт, який зможе зменшити та пришвидшити час на замовлення,
що допоможете це робити в декілька кліків.
Завданням розробки є:
‒ Дослідження існуючих веб-сервісів кав`ярні.
‒ Аналіз та порівняння ефективності різних веб-сервісів, їх функціонал.
‒ Розробка Web-сервісу обслуговування клієнтів крафтової кав’ярні та
його оптимізація.
‒ Проведення досліджень розробленого веб-сервісу, щоб оцінити його
ефективність та швидкість.
Об’єкт розробки
Процес розробки Інтернет-магазинів.
Предмет розробки
Web-сервіс обслуговування клієнтів крафтової кав’ярні.
Методи розробки
Реалізація веб-сервісу, дослідження літературних джерел.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 3
РОЗДІЛ 1
ЩО ТАКЕ ВЕБ-САЙТИ: ПОНЯТТЯ, ПРИНЦИПИ РОБОТИ,
ПЕРЕВАГИ І НЕДОЛІКИ
1.1 Поняття веб-сайтів
Веб-сайт (website) – це колекція веб-сторінок, пов`язаних між собою
гіперпосиланнями та розміщених на одному або кількох веб-серверах. Веб-
сайт доступний через мережу Інтернет і може містити різноманітний контент,
такий як текст, зображення, відео, аудіо, графіка, форми взаємодії. Веб-сайти
використовуються для різних цілей, від особистих блогів до корпоративних
порталів або онлайн-магазинів [1].
Основні компоненти веб-сайту включають [2]:
- Веб-сторінки: Веб-сайт складається з окремих веб-сторінок, які можуть
бути відображені у браузері. Кожна веб-сторінка містить HTML-код, який
визначає структуру та вміст сторінки.
- Доменне ім`я: Доменне ім`я є унікальною адресою веб-сайту, за
допомогою якої користувачі можуть отримати доступ до цього веб-сайту через
Інтернет. Воно служить ідентифікатором веб-ресурсу. Доменні імена
слугують для зручності користувачів та допомагають встановити ідентичність
та розпізнаваність веб-сайту.
- Веб-сервер: Веб-сайт розміщений на веб-сервері, який зберігає веб-
сторінки та надає їх користувачам по запиту через мережу Інтернет. Веб-
сервер обробляє запити веб-клієнтів, таких як веб-браузери, і надсилає їм
відповіді, які містять веб-сторінки.
- Веб-дизайн: Веб-дизайн включає в себе вигляд та оформлення веб-
сторінок, включаючи вибір кольорів, шрифтів, компонування елементів,
графіку та логотипу.
- Навігація: Веб-сайт має систему навігації, яка допомагає
Арк.
ЧДТУ 231947.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата
користувачам орієнтуватися та переходити між різними сторінками.
- Вміст: Веб-сайт може містити різноманітний вміст, такий як
інформацію про компанію, новини, продукти та послуги, блоги, фотографії,
відео, соціальні мережі, контактну інформацію.
1.2 Загальні принципи для створення веб-сайтів
Принцип роботи веб-сайтів [3] базується на взаємодії між клієнтом
(користувачем) і сервером. Веб-сайти можуть містити різноманітні елементи
взаємодії, такі як форми, кнопки, посилання, які дозволяють користувачеві
здійснювати дії, вводити дані або змінювати стан сторінки. У таких випадках
взаємодії між клієнтом і сервером стає більш складною, і вимагає більш
складної логіки та додаткової передачі інформації між сторінками.
Загальні принципи яких потрібно дотримуватись при створенні веб-
сайтів [4]:
- Зрозумілість та простота використання: Веб-сайт повинен мати
зрозумілий та легкий у використанні інтерфейс. Навігація має бути лаконічно
та інтуїтивно зрозумілою для користувачів.
- Спрямованість на цільову аудиторію: Веб-сайт повинен бути
розроблений з урахуванням потреб та очікувань цільової аудиторії. Він
повинен надавати корисний та цікавий контент, що відповідає інтересам
користувачів.
- Респонсивний дизайн: Веб-сайт повинен бути адаптивним до різних
пристроїв та розмірів екранів, забезпечуючи зручне відображення та навігацію
незалежно від використовуваного пристрою.
- Швидкість завантаження: Веб-сайт повинен завантажуватись швидко,
оскільки користувачі мають обмежений час та вимоги до швидкості.
Оптимізація зображень, коду та інших елементів допоможете зменшити час
завантаження сторінок.
Арк.
ЧДТУ 231947.005 ПЗ
5
З мн. Арк. № докум. Підпис Дата
- Якісний контент: Веб-сайт повинен містити якісний та цікавий
контент, що відповідає цілям та потребам користувачів. Інформація має бути
коректною, актуальною та легко засвоюваною.
- SEO-оптимізація: Веб-сайт повинен бути оптимізований для
пошукових систем, щоб забезпечувати високу видимість у пошукових
результатах. Це включає використання правильних ключових слів, зручну
структуру URL, мета-теги, описи.
- Безпека: Веб-сайт повинен мати належні заходи безпеки, щоб
захистити інформацію користувачів та запобігти злому. Це може включати
використання захищених протоколів передачі даних. Регулярне оновлення
програмного забезпечення та використання надійних систем автентифікації.
- Аналітика та відстеження: Веб-сайт повинен мати вбудовану
аналітику, яка дозволяє відстежувати трафік, поведінку користувачів та інші
метрики. Це допомагає зрозуміти ефективність веб-сайту та вносити необхідні
зміни для поліпшення його роботи.
Веб-сайт базується на використанні розподіленої мережі Інтернет і
специфікації веб-протоколу HTTP.
HTTP [5] – це протокол передачі гіпертексту, який використовується для
передачі даних між веб-сервісами і клієнтськими програмами. Це основний
протокол, який використовується в Інтернеті для отримання веб-сторінок.
1. HTTP використовує URL для ідентифікації ресурсів, які клієнт хоче
отримати.
2. HTTP дозволяє отримувати різні типи ресурсів, такі як HTML-
сторінки, зображення, відео, аудіо та інші файли, що розміщені на веб-
серверах.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 6
1.3 Актуальність веб-сайтів
Веб-сайти [6] ( Рис. 1.1 ) - є необхідним елементом сучасного світу і
мають значний вплив на різні аспекти життя. Вони стали основним засобом
доступу до інформації, комунікацій, розваг та комерційних послуг.
Веб-сайти надають широкий доступ до різноманітної інформації. Вони є
джерелом новин, статей, наукових досліджень, навчальних матеріалів, блогів
та багато іншого. Користувачі можуть знайти відповіді на свої запитання та
оновлену інформацію в різних галузях.
Рисунок 1.1 – Веб-сайти
Веб-сайти відкривають широкий спектр комерційних можливостей для
бізнесу. Вони дозволяють бізнесу залучати нових клієнтів, покращувати
комунікацію з ними, розширювати свій обсяг ринку та забезпечувати
зручність покупок та обслуговування.
1. Веб-сайти можуть ви користовуватись як платформа для здійснення
електронної комерції. Компанії можуть продавати свої товари та послуги
онлайн.
2. Веб-сайти надають можливість розміщувати рекламу і проводити
маркетингові компанії. Компанії можуть розміщувати банери, текстові
оголошення, партнерські посилання та інші форми реклами на своїх веб-
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 7
сайтах для привертання нових клієнтів та збільшення своєї видимості.
3. Веб сайти можуть слугувати платформою для проведення онлайн-
курсів, тренінгів та вебінарів.
Соціальна комунікація сайтів таких як соціальні мережі, форуми, блоги,
дозволяють користувачам вступати в контакт і взаємодіяти один з одним
незалежно від фізичної відстані. Вони створюють можливості для
спілкування, обміну думками, обговорення і спільної діяльності. Вони
допомагають нам залишатися зв`язанами з нашими друзями, родиною та
допомагають знаходити нові знайомства. Соціальні мережі дають нам
можливість спілкуватись, ділитись фотографіями, думками, відео та іншим
контентом. Веб-сайти створюють можливість для віртуальних спілкувань,
спільного розвитку і обміну інформації з людьми з усього світу [7].
Не менш актуальною темою Веб-сайтів є розваги та відпочинок. Веб-
сайти пропонують нам безліч розважального контенту та можливостей для
відпочинку. Ми можемо дивитися фільми та серіали, слухати музику, грати в
онлайн ігри, читати книги та комікси, слідкувати за виставами та концертами,
відвідувати віртуальні музеї та подорожувати світом безпосередньо зі свого
пристрою.
Одним з найголовніших, що можуть дати нам веб-сайти це, звичайно,
освіту та розвиток, передачу та пошук різноманітної інформації. Веб-сайти
стали важливим інструментом для навчання та саморозвитку. Ми можемо
вивчати нові навички, брати онлайн-курси, слухати вебінари та лекції,
отримувати доступ до освітньої актуальної інформації. Веб-сайти дають нам
змогу здобувати нові знання та вдосконалювати свої навички з будь-якого
місця і в будь-який час. Онлайн освіта та розвиток в Інтернеті демократизують
доступ до знань та сприяють неперервному саморозвитку. Вони дають
можливість швидко на ефективно шукати та вивчати нову інформацію та
розвивати навички, та розширювати свої можливості незалежно від
традиційних освітніх рамок.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. 8
Арк. № докум. Підпис Дата
Працевлаштування та рекрутинг досить популярна та розвинена тема
для веб-сайтів. Сайти з робочими оголошеннями та платформи для рекрутингу
допомагають знаходити роботу та працівників. Ми можемо розміщувати свої
резюме, шукати вакансії, проводити співбесіди віддалено та знаходити
професійні можливості не виходячи з дому. Ми маємо великий набір різних
пропозицій, що дає нам можливість швидко та ефективно шукати роботу в
короткий термін.
Веб-сайти впливають майже на кожен аспект нашого життя відіграючи
велику роль в нашому житті, надаючи нам доступ до інформації, спілкування,
покупок, розваг, освіти та професійних можливостей. Вони стали необхідною
складовою нашої сучасної культури та сприяють нашій зв`язаності зі світом
навколо нас.
1.4 Головні проблеми при створенні веб-сайту та їх вирішення
При створенні веб-сайтів на різних етапах створення можуть з`являтися
проблеми для вирішення яких потрібен буде час та знання.
Найбільш поширені проблеми при створенні веб-сайту це [8]:
Недостатня відповідність до вимог користувача: Одна з найбільш
поширених проблем – це веб-сайт, який не задовольняє потреби та очікування
користувачів. Важливу роль відіграє дизайн і візуальна привабливість.
Незадовільний дизайн, поганий вибір кольорів, погана композиція і
незручність використання може призвести до зменшення активності на сайті і
його популярності.
Вирішенням цієї проблеми може бути ретельне дослідження аудиторії,
її потреби, очікування.
1. Важливо розуміти головні цілі сайту.
2. Зручний та інтуїтивно зрозумілий дизайн сайту який дасть можливість
користувачам легко зорієнтуватись на веб-сайті. Важливо використовувати
логічну структуру зрозумілі навігаційні елементи, визначені розділи та
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 9
зручний пошуковий механізм.
3. Забезпечення веб-сайту якісним та актуальним контентом, який
задовільнить потреби користувачів. Чітка, зрозуміла та легко доступна
інформація є залагом успіху.
4. Проведення тестування веб-сайту з реальними користувачами, щоб
отримати зворотній зв`язок та виявити проблеми.
5. Веб-сайти повинні постійно вдосконалюватись на оновлюватись, щоб
відповідати змінним потребам користувачів. Важливо слідкувати за трендами
та актуальними варіантами дизайну та функціоналу веб-сайту.
6. Повільна швидкість завантаження веб-сайту є досить серйозною
проблемою, що може вплинути на користувацький досвід і збити з пантелику
відвідувачів. Повільна швидкість завантаження може призвести до зниження
актуальності веб-сайту, кількості користувачів та зниження конверсії і
погіршення рейтингу сайту у пошукових системах [9].
Вирішенням цієї проблеми можуть бути такі дії:
- Оптимізувати розмір і стиснення зображень. Зображення займають
багато простору і можуть сповільнювати завантаження сторінки. Потрібно
використовувати оптимальні формати зображень, такі як JPEG чи PNG, та
стиснення без втрати якості, щоб зменшити їх розмір.
- Використовувати кешування. Налаштування кешування на веб-сервері,
щоб забезпечити, що статичні ресурси, такі як зображення або файли коду,
кешувалися на стороні клієнта. Це дозволить браузерам зберігати копії цих
ресурсів і завантажувати їх з кешу, замість повторного запиту до сервера, при
кожному відвідуванні сторінки.
- Потрібно переконатись що хостинг та сервер мають достатньо ресурсів
для обробки запитів. Важливо використовувати швидкі та надійні хостинги,
які забезпечать оптимальні умови для роботи веб-сайту.
- Потрібно мінімізувати внутрішні перенаправлення. Занадто багато
внутрішніх перенаправлень можуть сповільнювати завантаження сторінок.
Арк.
ЧДТУ 231947.005 ПЗ
Змн. Арк. № докум. Підпис Дата 10
- Очищення та видалення не потрібних скриптів може сприяти
продуктивності сайту.
Неадаптивний дизайн [10] для мобільних пристроїв є серйозною
проблемою, оскільки все більше користувачів використовують смартфони і
планшети для доступу до Інтернету. Неадаптивний дизайн може призвести до
незручного відображення контенту, погіршення користувацького досвіду та
втрати відвідувачів.
Вирішенням цієї проблеми може бути такі дії:
- Розробляти веб-сайт з використання адаптивного дизайну, який
динамічно змінюється в залежності від розміру екрана пристрою. Це дозволяє
веб-сайту коректно відображатись на будь-якому пристрої, включаючи
смартфони, планшети та комп`ютери.
- Розробляти макет веб-сайту з допомогою вимірів, таких як відсотки,
або відносні одиниці, замість фіксованих пікселів. Це дозволить елементам на
сторонці гнучко пристосовуватись до розмірів екрану.
- Важливо вказати стилі, які мають застосовуватись на певних розмірах
екрану за допомогою медіа запитів. Потрібно налаштувати різні стилі для
різних пристроїв, що дозволить оптимізувати відображення веб-сайту на
кожному пристрої.
- Важливою частиною є забезпечення зручності використання веб-сайту
на різних мобільних пристроях. Потрібно зробити кнопки та посилання
достатньо великими для комфортного натискання пальцями, забезпечити
зручну навігацію та прокрутку сторінок, щоб пришвидшити взаємодію на веб-
сайті.
- Тестування швидкості завантаження є важливою частиною при
створенні веб-сайту. Важливо переконатись, що веб-сайт швидко
завантажується на мобільних пристроях. Застосування попередньо
завантажених ресурсів, стиснення файлів та їх оптимізація пришвидшить
швидкість завантаження.
Арк.
ЧДТУ 231947.005 ПЗ
11
З мн. Арк. № докум. Підпис Дата
Веб сайти піддаються ризики хакерських атак, злому та крадіжки даних.
Для вирішення цих проблем слід приділити увагу заходам безпеки.
Безпека веб-сайтів є критично важливою, оскільки вона часто містить
конфіденційну та особисту інформацію [11].
Вирішенням цієї проблеми можуть бути такі дії:
1. Веб-сайти можуть мати вразливості в програмному забезпечені, такі
як SQL-ін`єкції [12].
SQL-ін`єкція ( рис 1.2) – це метод отримання несанкціонованого доступу
( різновид злому ) до бази даних, при якому шкідливий код виконується прямо
з поля вводу звичайної форми. Якщо SQL-і`єкція пройшла успішно,
неавторизовані особи можуть читати, створювати, оновлювати або навіть
видаляти записи з таблиць бази даних.
Рисунок 1.2 – SQL-ін`єкція
XSS ( Cross-Site Scripting ) [13] – тип вразливості інтерактивних
інформаційних систем. XSS виникає, коли на сторінки, які були згенеровані
сервером, з якоїсь причини потрапляють користувацькі скрипти.
CSRF ( Cross-Site Request Forgery ) [14] – ти веб атаки, що призводить до
виконання певних дій від імені користувача на веб-сторінці де останній
аутентифікований. Головною метою CSRF-атаки є підробка запитів, а не
викрадення даних.
Арк.
ЧДТУ 231947.005 ПЗ
12
З мн. Арк. № докум. Підпис Дата
Для вирішення цих проблем важливо регулярно оновлювати програмне
забезпечення до останньої версії та використовувати надійні бібліотека та
плагіни.
2. Використання слабких і не надійних паролів може зробити веб-сайт
легко піддатливим до атак перебору паролів або вторгнення. Рекомендується
використовувати сильні паролі, які містять комбінацію букв, цифр і
спеціальних символів. Крім того, рекомендується використовувати
двофакторну аутентифікацію ( 2FA ), щоб забезпечити додатковий шар
безпеки.
3. Важливо застосовувати шифрування. Одним з прикладів шифрування
може бути протокол HTTPS для передачі конфіденційної інформації. Такої як
паролі, особисті дані, або платіжні дані. Шифрування забезпечує захист даних
під час їх передачі між користувачем там веб-сервером.
4. HTTPS протокол ( hyper text transfer protocol secure ) – це дуже
просунута і просто версія протоколу HTTP для створення безпечних
транзакцій шляхом шифрування використовується порт № 443. Він також
дозволяє створення безпечно зашифрованого з`єднання між сервером і
браузером.
5. Некоректна обробка введених даних може призвести до атак, таких як
введення зловмисного коду Code injection. Завжди важливо перевіряти та
очищувати введені дані перед використання, використовувати коректні запити
до бази даних та обмежувати права доступу для користувачів.
Code Injection – це використання програмних помилок для обробки
невірних даних. Включення коду може бути використане зловмисниками для
введення або виведення коду в комп`ютерну програму.
Арк.
ЧДТУ 231947.005 ПЗ
13
З мн. Арк. № докум. Підпис Дата
РОЗДІЛ 2
МОДЕЛЮВАННЯ ПРОГРАМНОЇ РЕАЛІЗАЦІЇ ВЕБ-ДОДАТКУ
2.1 Моделювання предметної області
Веб-додаток Coffee House створюється для зручного та швидкого
сервісу замовлення кави. Його основна ідея полягає у зменшені витрат часу
клієнта на замовлення, що є важливим але по часу витратній справі.
Вхідними даними сайту є персональні дані клієнта для пришвидшення,
та запам’ятовування його замовлень. Після реєстрації, дані клієнта
залишаються в базі, що допомагає при наступному логіні швидко підбирати
потрібні дані. Клієнт який має аккаунт на сайті може не заповнювати форму
замовлення, це робиться автоматично з уведених ним раніше даних.
Вихідними даними в результаті буде велика база даних користувачів з
можливими варіантами їх побажань, щоб пришвидшити швидкість
оформлення замовлення.
Сайт повинен виконувати наступні функції [15]:
- Реєстрації та логін: Сайт повинен мати форму реєстрації та логіну, щоб
потенційний клієнт міг можливість зареєструватись і зайти на сайт. Дані
повинні зберігатись і підв’язуватись при кожному заході на сайт.
- Доступний каталог: Сайт повинен містити великий каталог товарів,
щоб клієнт мав можливість вибору. Доступність та зрозумілість є головним
завдатком хорошого маркетингу.
- Зрозумілий дизайн: Веб-сайт повинен бути створений з лаконічно
зручним дизайном, з правильним і зручним розміщенням кнопок, гарним
шрифтом і короткой, але зрозумілой інформацією. Клієнт повинен
зацікавитись у веб-сайті в перші секунди перебування на сайті.
Поверхова робота веб-сайту (рис. 2.1 – поверхова структура сайту)
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 14
Рисунок 2.1 – поверхова структура сайту
Веб-сайт кав’ярні Coffee House використовує дані зареєстрованих
клієнтів для збереження інформації про них та їх вподобання. При заході на
веб-сторінку реєстрація або логін не є важливим або необхідним, але це
пришвидшить та полегшить перебування клієнта на сайті.
Створення веб-сайту заключатиме в собі чітке розуміння стандартів
програмування та дизайну сучасного часу. Реалізація швидкого і зручного
інтерфейсу є запорукою популярності веб-сайту. Використання
стандартизованих розмірів кнопок, полів та тексу є важливим аспектом сайту.
Текст сайту повинен відповідати певним критеріям, щоб забезпечити
якість.
- Важливо використовувати зрозумілі речення, короткі абзаци, чіткий
шрифт та достатній розмір тексту.
- Веб-сайт повинен передавати повідомлення чітко і зрозуміло.
- Текст та сторінці повинен бути пов’язаним з темою та контекстом
сторінки. Важливо уникати зайвої інформації яка буде відволікати
користувача.
- При створенні веб-сайту важливо використовувати SEO-оптимізацію,
тобто використовувати ключові слова та фрази у заголовках, мета-тегах,
описах та контенті сторінки.
Важливо оптимізувати дизайн веб-сайту для швидкого завантаження.
Повільне завантаження сторінки, може негативно впливати на веб-сайт та його
популярність.
Арк.
ЧДТУ 231947.005 ПЗ
Змн. Арк. № докум. 15
Підпис Дата
Створення зручного функціонування сайту насамперед залежить від
якості коду. Створення швидкого і зручного сайту це перша задача яка
закладена в розробці кав’ярні Coffee House. Використання скриптів які будуть
допомагати пришвидшити певні процеси є досить важливим пунктом.
При написанні коду важливо дотримуватись певних критеріїв, для його
покращення. Код повинен бути читабельним та організованим. Створюючи
змінні, функції та класи потрібно використовувати чіткі і зрозумілі назви, що
будуть описувати, що цей код виконує. Дотримання однакових позначень і
відступів в коді підвищує його чистоту. Дублювання коду є досить поганим
рішенням, що може дати однаковий код, але в різних місцях, що виконує одні
і ті ж функції.
Код повинен бути ефективним та оптимізованим. Важливо уникати
зайвого використання ресурсів, такі як не потрібні обчислення та великі
потоки даних, які не є актуальним, або є не потрібними для частини де вони
застосовуються. Використовуючи критерії написання коду, створюється
більш зрозуміла картина розробки та поступової розробки програми.
Важливі критерії і особливості веб-сайту це наявність окремих
незалежних один від одного систем. Клієнт частина і Server частина повинні
знаходитись окремо і ніяк не впливати один на одного. Змінюючи дизайн
сайту, міняючи логотип, фото, структуру веб-сторінки не повинна
змінюватись серверна частина сайту.
Клієнт частина веб-сайту [16] може створюватись як в першу чергу, так
і в останню. Сюди входить створення дизайну сайту та його інтерфейсу.
Налаштування та вирішення проблем на стороні клієнта. Реалізацію у веб-
сайті Coffee House буде зручний та зрозумілий інтерфейс, використовуючи
мінімалізм буде забезпечуватись зрозумілість та креативність. На сайті будуть
використовуватись модальні вікна завдяки яким, буде створено зручний
інтерфейс користування.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 16
Server частина сайту [16] створюється окремо і включає в себе всі
механізми які створюються для з’єднання клієнт-серверної частини. Реалізація
таких систем як, винесення state компонента, створення функціонал реєстрації
та логіну. Збереження клієнтських даних в систему виконується за наступним
критерієм ( рис. 2.2 – структура серверної частини авторизації ).
Рисунок 2.2 – структура серверної частини авторизації
Серверна взаємодія з даними досить важлива частина, яка виконує
зберігання, оновлення та видалення необхідних даних. Клієнт матиме
можливість, як створювати свій аккаунт так його і видаляти.
Структура даних про товари буде приходити у форматі об’єкта в якому
будуть спеціально виведені поля для звернення та отримання інформації.
Клієнт не матиме ніякої можливості змінювати, видаляти, або додавати дані.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. 17
Арк. № докум. Підпис Дата
2.2 Вимоги до веб-сайту
Для реалізації веб-сайту крафтової кав’ярні Coffee House, необхідні
вимоги [17]:
- Мова програмування: Для реалізації веб-сайту можна використовувати
будь-який стек технологій, проте віддаючи перевагу прогресуючим мовам
програмування, які найбільш розвинулись у веб-розробці, вирішено
використовувати такий стек технологій як, React, JavaScript, TypeScript.
- Інтерфейс користувача: Для взаємодії користувача з функціоналом веб-
сайту необхідно розробити інтерфейс. Інтерфейс повинен бути легким та
зрозумілим, щоб полегшити взаємодію користувача з веб-сайтом, з зрозумілим
дизайном та розположенням об’єктів.
- Меню та продукти: На веб-сайті повинно розміщуватись повне меню
кав’ярні з усіма доступними напоями та десертами. Важливо додати детальний
опис кожного продукту, включаючи ціни.
- Вхідні дані: Веб-сайт повинен мати можливість авторизації клієнтів
задля подальшого пришвидшення та полегшення взаємодії клієнта з додатком.
- Обробка даних: Веб-сайт повинен отримувати добавлені клієнтом
товари, які він хоче придбати, обробляти замовлення, та зберігати їх на
сервері.
- Автоматизація веб-сайту: Веб-сайт повинен автоматично обробляти та
зберігати запити, які приходять від клієнтів.
- Вихідні дані: Після отримання і обробки замовлення клієнта, веб-сайт
повинен відправити повідомлення клієнту, що його замовлення прийняте та
відправлене в обробку.
- Швидкість: Веб-сайт повинен швидко працювати, швидко обробляти
запити і вертати результат, без додаткової нагрузки на веб-сайт.
- Надійність: Веб-сайт повинен бути надійним і стійким до помилок, які
можуть виникати під час роботи веб-сайту, та бути стійким до великого потоку
клієнтів.
Арк.
ЧДТУ 231947.005 ПЗ 18
З мн. Арк. № докум. Підпис Дата
- Контактна інформація: На сторінці веб-сайту повинна розміщуватись
контактна інформація така як, адреса, номер телефону, електронна пошта.
- SEO-оптимізація: Використання правильних метатегів, ключових слів
та оптимізованого контенту для покращення видимості сайту в пошуковій
системі.
Ці вимоги допоможуть створити веб-сайт крафтової кав’ярні, який буде
привабливим, зручним для клієнтів та відображатиме унікальний характер
веб-сайту.
2.3 Архітектура веб-сайту
Архітектура веб-сайту [18] – це структура сторінок і програмної частини
сайту, яка дозволяє уявити всі розділи та сторінки проекту, перед його
розробкою. Сюди входить навігація по сторінкам, сторінки категорій, контент
сайту, взаємодія сторінок та внутрішня вкладеність сторінок від головних до
прилеглих.
Це важливий етап проектування веб-сайту, який включає в себе розгляд
різних аспектів розробки [19]. Архітектура веб-сайту визначає логічну
структуру сторінок та їх взаємозв’язок. Архітектура веб-сайту також включає
в себе планування розробки навігації , яка дозволяє користувачам легко
переміщатись по веб-сайту і знаходити потрібну інформацію [20].
Загальна архітектура веб-сайту крафтової кав’ярні Coffee House
представлена на рисунку 2.3.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 19
Рисунок 2.3 – архітектура веб-сайту
Розглянемо кожну сторінку окремо та їх взаємодію між собою, зв’язки
та залежності .
Веб-сайт крафтової кав’ярні Coffee House розпочинається з Головної
сторінки сайту, яка є головною сторінкою сайту та на якій буде навігація на
всі сторінки веб-сайту. Перебуваючи на Головній сторінці, користувач матиме
можливість потрапити на такі сторінки як: Меню сайту, Реєстрацію, Логін та
Корзину.
Головна сторінка – це сторінка яку користувач буде бачити при
відвідуванні веб-сайту. Вона несе важливе значення адже несе декілька
важливих функцій. Головна сторінка веб-сайту створює перше враження про
веб-сайт для користувача. Вона повинна бути привабливою, професійно
оформленою, інформативною та відповідати стилю і тематиці сайту. Вона є
навігацією веб-сайту і повинна містити посилання або кнопки які
допомагатимуть користувачеві легко переміщатись по веб-сайту. Головна
сторінка матиме такі елементи як, Header сайту на якому ми зможемо
потрапити на такі сторінки як: Login, Registration та зможе відкрити меню
категорій продуктів, що є на веб-сайті крафтової кав’ярні Coffee House.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 20
Опустившись в низ ми зможемо побачити короткі цитати та найцікавіші
і найпопулярніші категорії меню на веб-сайті. Також буде присутнім Footer на
веб-сайті, що також буде важливим елементом навігації з якого користувач
зможе подорожувати по веб-сайті.
Потрапивши на сторінку Menu, відразу користувач зможе побачити
Меню Категорій продуктів які є присутні на сайті і лише вибравши відповідну
категорії побачити всю наявну продукцію до відповідної категорії. Основна
мета сторінки меню полягає в тому, щоб забезпечити зручну навігацію для
користувачів, допомагаючи їм знайти потрібну інформацію. Сторінка меню
повинна мати привабливий та зручний дизайн, який допоможе користувачам
легко орієнтуватись та використовувати навігацію. Елементи меню можуть
бути підкресленими, або виділятися задля привернення уваги користувача.
Важливо зробити їх привабливими і актуальними.
Користувач матиме можливість прочитати коротку інформацію про
продукт, про його виготовлення та вміст деяких продуктів, фотографію
зовнішнього вигляду продукту та його ціну. Якщо клієнт зацікавився в цьому
продукті то він матиме можливість додати продукцію, яка сподобалась до
кошику вибравши кількість.
Вибравши продукт та його кількість, та додавши до кошику, користувач
матиме можливість перейти до самого кошика, натиснувши на відповідну
іконку. Перед натискання клієнт зможе побачити загальну кількість вибраних
елементів, які були додані ним до кошику.
Кошик веб-сайту є функціональною частиною електронної комерції, яка
дозволяє користувачам збирати і зберігати товари, які вони бажають придбати
на веб-сайті. Кошик служить як проміжне сховище для вибраних
товарів.
Зовнішній вигляд кошику є досить класичним, але функціональним.
Важливо, щоб користувач міг легко розібратися як користуватись кошиком.
Зрозумілі кнопки і коротка інформація про добавлений товар є важливим
аспектом кошика.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 21
Користувач матиме можливість збільшувати або зменшувати кількість
товару, додавати ще, або видаляти вибраний товар. Також користувач матиме
можливість видалити всі товари з кошику.
Користувач матиме можливість збільшувати або зменшувати кількість
товару, додавати ще, або видаляти вибраний товар. Також користувач матиме
можливість видалити всі товари з кошику.
Вибравши потрібні товари, користувач матиме можливість оформити
замовлення натиснувши відповідну кнопку. Наступним етапом буде
підтвердження інформації про користувача. Його ім’я, фамілію, поштовий
адрес і адрес місця проживання. Ввівши всю інформацію, інформації
перевіриться на корректність і лише потім стане доступна кнопка підтвердити
замовлення. Підтвердивши замовлення користувач матиме можливість
побачити повідомлення, про успішно виконане замовлення, або про його
невдачу.
РОЗДІЛ 3
ПРОГРАМНА РЕАЛІЗАЦІЇ ВЕБ-ДОДАТКУ
3.1 Опис середовища розробки
Для створення дипломного проекту було використано інтегрований
засіб для створення та редагування сучасних веб-застосунків і програм
WebStorm, версія 17.0.5, веб-переглядач Google Chrome, версія 113.0.5672, та
операційна система macOS, версія 12.6, система керування версіями Git, версія
2.37.1 та веб-сервіс для хостінга IT-проектів GitHub [21].
WebStorm
WebStorm ( рис. 3.1 – логотип WebStorm ) [22] – це інтегроване
середовище розробки на JavaScript і зв’язаних з ним технологій від компанії
JetBrains, розроблена на основі платформи IntelliJ IDEA.
Арк.
ЧДТУ 231947.005 ПЗ 22
З мн. Арк. № докум. Підпис Дата
WebStorm є спеціалізованою версією PhpStorm. WebStorm підтримує мови
JavaScript, CoffeeScript, TypeScript, та Dart.
WebStorm забезпечує автодоповнення, аналіз коду на льоту, навігацію
по коду, рефакторинг, зневадження та інтеграцію з системами управління
версіями та вбудований Git. Користувачі можуть налаштовувати під себе
дизайн та функціонал, міняти тему, комбінацію клавіш.
Рисунок 3.1 – Логотип WebStorm.
Історія WebStorm починається з початку 2000-х років, коли JetBrains
почали розробляти інструменти для програмістів. У 2000 році JetBrains
випустила IntelliJ IDEA, IDE для розробки Java. IntelliJ IDEA здобула
популярність серед розробників і отримала позитивні відгуки за свої
розширені функції і підвищення продуктивності.
Спираючись на успіх IntelliJ IDEA, JetBrains визнала зростаючий попит
на спеціалізовані IDE для певних мов програмування та фреймворків. У 2009
році вони випустили WebStorm як окрему IDE, орієнтовану на веб-розробку.
WebStorm був розроблений, щоб надати веб-розробникам спеціальне
середовище для створення веб-додатків ( рис. 3.2 – зовнішній вигляд
WebStorm ), пропонуючи функції та інструменти, спеціально адаптовані до
потреб проектів веб-розробки. Він мав на меті спростити процес розробки та
підвищити продуктивність веб-розробників, які працюють із HTML, CSS,
JavaScript, і популярними фреймворками.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. 23
№ докум. Підпис Дата
Рисунок 3.2 – зовнішній вигляд WebStorm
Протягом багатьох років WebStorm розвивався та представляв нові
функції, щоб не відставати від мінливого ландшафту веб-розробки. Він
включає підтримку нових веб-технологій, фреймворків і мов, що гарантує, що
розробники можуть працювати з найновішими інструментами та залишатися
продуктивними.
Використовуючи можливості коду HTML / XHTML і XML, WebStorm
забезпечує автоматичне завершення стилів, посилань, атрибутів і інших
елементів коду. При роботі з CSS здійснюється завершення коду класів,
HTML-номерів, ключових слів. WebStorm пропонує автоматичне рішення
таких проблем, як вибір формату, властивостей, класів, посилань на файли і
інших атрибутів CSS. Рішення дозволяє використовувати потужність
інструменту Zen coding для верстки HTML, відображає дії тега на web-
сторінці.
Zen coding – це набір плагінів для текстових редакторів, які пришвидшують
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 24
написання HTML коду.
Продукт WebStorm здійснює завершення коду JavaScript для ключових
слів, лейблів, змінних, параметрів і функцій DOM і підтримує специфічні
особливості популярних браузерів. Реалізовані в рішенні функції рефакторінга
JavaScript дозволяють перетворювати структуру коду і файлів.
WebStorm забезпечує налагодження коду JavaScript і надає широкий
діапазон можливостей:
- знаходження точки зупину в HTML і JavaScript.
- настройка параметрів точки зупину.
- тестування синтаксису коду в режимі реального часу.
Продукт підтримує функцію котролю версій і попередніх варіантів коду
і фіксує всі вироблені дії та зміни. Завдяки створенню історії в WebStorm
можна відновлювати кодові вирази, блоки і навіть цілі файли.
Основні можливості тестового редактора:
- Модифікація файлів .css, .html, .js, з одночасним переглядом
результатів.
- Підтримка HTML.
- Підтримка Node.js.
- Можливість ZenCodding і Emmet.
- Налагодження коду на JavaScript.
- Інтеграція з системами управління версіями, такими як: Subversion, Git,
GitHub, Perforce, Mercurial, CVS ( Concurrent Versions System ) підтримуються
із коробки з можливістю створення списків змін і відкладених змін.
- Інтеграція з системою відслідковування помилок
WebStorm здобув потужну базу користувачів і репутацію потужної та
надійної IDE для веб-розробки. Він продовжує регулярно оновлюватися
новими функціями, виправленнями помилок і вдосконаленнями, що
відображає прагнення JetBrains надавати першокласний досвід розробки для
веб-розробників.
Арк.
ЧДТУ 231947.005 ПЗ
25
З мн. Арк. № докум. Підпис Дата
Сьогодні WebStorm широко використовується професійними веб-
розробниками в усьому світі на залишається однією з провідних IDE у галузі
веб-розробки.
Google Chrome
Google Chrome ( рис. 3.3 – логотип Google Chrome ) [23] – популярний
веб браузер, розроблений компанією Google на основі браузера з відкритим
кодом Chromium. Його програмна архітектура була розроблена з чистого
аркуша. Він був вперше випущений у 2008 році і із тих пір став одним із
найпоширеніших веб-браузерів у всьому світі.
Рисунок 3.3 – логотип від 2020 року Google Chrome
Google Chrome доступний для різних операційних систем, включаючи
Windows, macOS, Linux, Android та iOS.
Протягом шести років головний виконавчий директор Google Ерік
Шмідт не підтримував ідею про створення окремого браузера. Він вказував на
те, що Google була невеликою компанією, і що він не хотів брати участі у
«болючих війнах браузерів». Після того, як засновники компанії Сергій Брін і
Ларрі Пейдж найняли декількох розробників Mozilla Firefox і створили
демонстрацію Chrome, виконавчий директор все ж підтримав цю ідею.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. 26
Підпис Дата
2 вересня 2008 року компанія Google оголосила про випуск власного браузера
Chrome.
Перша бета версія браузера була опублікована для Microsoft Windows і
була доступна на 43 мова. Chrome швидко надбав близько 1% ринку. За перші
кілька годин після випуску в Google було відправлено кілька сотень різних
повідомлень про помилки. Після початкового сплеску користувачів частка
впала до найнижчого рівня в 0,73% в жовтні 2008 року. Команда розробників
Chrome вирішила використовувати у своєму браузері рушій WebKit, як їм
порадила команда Android.
Google Chrome націлений на підвищення безпеки, швидкості та
стабільності. Chrome періодично завантажує оновлення і попереджає
користувача, коли той намагається відвідати шкідливий сайт. Chrome, як
правило, створює для кожної вкладки окремий процес, щоб не допустити
ситуації коли вміст однієї вкладки має можливість впливати на вміст іншої.
Процесу вкладки дається найменше число привілеїв, процес може здійснювати
обчислення, але може зчитувати або записувати.
В Google Chrome плагіни ( або розширення ) є додатковими програмами,
які можна встановити для розширення функціональності браузера. Вони
дозволяють користувачам налаштовувати свій досвід перегляду в Інтернеті та
додаткові функції до браузера. Плагіни доступні у Chrome Web Store, веб-
магазині, де користувачі можуть шукати, встановлювати та керувати
розширеннями. Як правило плагіни, не є частиною браузера. 30 березня 2010
року Google оголосив, що один з найпопулярніших плагінів Adobe Flash Player
буде вбудований браузер.
Браузер підтримує режим інкогніто. Сторінки, які проглядаються в
анонімному вікні, не з’являються в історії браузера або історії пошуку, а також
не залишають на комп’ютері інших слідів, таких як файли cookie, вони
автоматично видаляться, коли користувач закриє це вікно.
Арк.
ЧДТУ 231947.003 ПЗ
З мн. Арк. № докум. Підпис Дата 27
Інтерфейс Chrome ( рис 3.4 – інтерфейс Google Chrome ) включає
наявність кнопок, що відповідають за відповідні функції, такі як: вперед,
назад, відновити, перейти на головну сторінку. Панель вкладок є основним
компонентом інтерфейсу і знаходиться у верхній частині вікна, а не під рядком
адреси. Ця зміна є досить креативною в порівняні з іншими браузерами. Кожна
вкладка має свій власний набір елементів, в тому числі і Omnibox.
Omnibox – це адресний рядок, який знаходиться зверху кожної вкладки.
Він поєднує в собі адресний рядок і пошуковий рядок. Omnibox перенаправляє
запит в пошукову систему в тому випадку, якщо адреса не відповідає правилам
написання URL. При відвідуванні сайтів браузер автоматично копіює звідти
рядок пошукових запитів.
Рисунок 3.4 – інтерфейс Google Chrome
Однією з відмінних рис Chrome є сторінка швидкого доступу, яка може
заміняти домашню сторінку і відкривається при створенні нової вкладки. На
сторінці швидкого доступу міститься 8 найбільш відвідуваних веб-сайтів,
недавно закриті вкладки та поради з використання Chrome. За бажання
користувач може змінити зовнішній вигляд сторінки, змінити колір,
Арк.
ЧДТУ 231947.005 ПЗ
З 28
мн. Арк. № докум. Підпис Дата
або навіть тему
Важливою функцією Google Chrome є консоль розробника ( Developer
Console ) ( рис. 3.5 – консоль розробника Google Chrome ). Консоль
розробника є потужним інструментом для веб-розробника, яка надає доступ
до різноманітних інструментів і функцій для аналізу та взаємодії з веб-
сторінками.
Відкрити консоль можна зробити різними способами, такими як:
- Комбінація клавіш Ctrl+Shift+J для Windows чи Linux
- Комбінація клавіш Command+Option+J для macOS
- Клавіша F12 для Windows
- Використати головне меню натиснувши на 3 точки, вибрати більше
функцій та вибрати консоль розробника.
Рисунок 3.5 – консоль розробника Google Chrome
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 29
У консолі розробника ми можемо виконувати JavaScript-код на сторінці,
тестувати функції, змінювати значення змінних та переглядати результати.
Аналізувати сторінки, перевіряти структуру HTML та CSS коду, та DOM-
дерева сторінки, а також змінювати їх.
В консолі розробника можливо переглядати повідомлення про помилки
JavaScript, HTTP-запити, попередження та інші повідомлення пов’язані з веб-
сторінкою. Є можливим переглядати, додавати, редагувати або видаляти кукі,
пов’язані з поточною сторінкою.
Консоль розробника є потужним і неймовірно важливим інструментом
для аналізу та налагодження веб-сторінок, дозволяючи більш ефективно
працювати з веб-розробкою та вирішувати проблеми, що виникають під час
розробки веб-додатків.
macOS
macOS ( рисунок 3.6 – логотип Apple ) [24] – перша комерційна графічна
операційна система розроблена компанією Apple Inc. Вона призначена для
використання на комп’ютера Mac, які виробляються самою Apple. macOS є
однією з основних операційних систем на ринку персональних комп’ютерів і
відома своєю надійністю, продуктивністю та інтуїтивно зрозумілим
інтерфейсом.
Рисунок 3.6 – логотип Apple
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 30
Компанія Apple завжди прагнула створювати унікальні новаторські
продукти. Тому ще на початку своєї історії у 1984 році була представлена нова
операційна система, що принципово відрізнялась від інших. MacOS стала
еталоном збалансованості та продуктивності для багатьох фахівців.
MacOS стала справжнім проривом у сфері розробки програмного
забезпечення. Ще в самих перших версіях простежувався стиль, який стане
фірмовим на довгі роки для компанії Apple. Досить цікавим фактом є те, що
перші релізи цієї системи, навіть не мали окремої назви, а позначались як
System і номер версії, це продовжувалось аж до 8-ї версії, що отримала назву
MacOS 8.
Перша версія MacOS могла похвалитися віконним режимом і
підтримкою одного з перших маніпуляторів для управління курсором –
комп’ютерної миші. До виходу першої MacOS управління комп’ютером
здійснювалося виключно за допомогою командного рядка.
Можливо, одною з найголовніших заслуг Apple, стало впровадження в
операційну систему графічного інтерфейсу, що стало справжній проривом
того часу, та еталоном для розробників і понині.
Головним завданням розробників Mac OS було створення такої
операційної системи, яка була б інтуїтивно зрозуміла і зручна для широкого
кола споживачів, навіть для тих, хто вперше познайомився з комп’ютерною
технікою. Головною відмінною рисою MacOS на тлі інших операційних
систем можна назвати стабільність в роботі та оптимізацію операційної
системи.
Разом з розвитком технологій, та розуміючи потреби користувачів,
керівництво Apple, прийняло важливе рішення про випуск принципово нової
операційної системи OS X (10). Перша версія нової системи була презентована
у березні 2001 року. Нова система дійсно дуже відрізнялася від попередників.
Вона була розроблена з використанням вільного програмного забезпечення
Darwin. OS X була дуже стійкою та надійною системою, практично не
схильною до збоїв, не вразливою для вірусів і шкідливих
Арк.
ЧДТУ 231947.005 ПЗ
З 31
мн. Арк. № докум. Підпис Дата
програм. Важливою особливістю було використання абсолютно нового
графічного інтерфейсу Aqua. Графічний інтерфейс був складався з
напівпрозорих елементів, світлих смуг, заокруглених кутів, та в цілому
складав враження вільного водного середовища. Новий інтерфейс був
створений не тільки для краси, але й для комфорту користувачів, адже має
широкий функціонал для зручної роботи з вікнами, інтернетом і іншими
функціями. Нововведення вважалось настільки вдалим, що його почали
використовувати і інші розробники.
MacOS – це програмне забезпечення яке дозволить вам забути про
несподівані відключення комп’ютера. Всі процеси в MacOS оптимізовані
таким чином, щоб не викликати перенавантажень системи, а вбудований
інструмент бекапів дозволить зберегти результат роботи не тільки на
робочому столі, але і в хмарному сховищі ICloud.
Окремої згадки також варта захищеність MacOS від шкідливого
програмного забезпечення. На відміну від Windows, на яку ви можете
встановити будь-яку програмну з будь-якого джерела. Натомість MacOS
підтримує лише сертифіковані компанією Apple програми. Це забезпечує
максимальний рівень безпеки ваших даних і практично виключає ймовірність
потрапляння шкідливих файлів.
Git
Git ( рис. 3.7 – логотип Git ) [25] – це розподілена система керування
версіями, що використовується для відстеження змін в файловій системі під
час розробки програмного забезпечення. Вона дозволяє розробникам
працювати одночасно над проектами, відстежувати зміни, зливати різні версії
коду та керувати розгалуженнями розробки.
Арк.
ЧДТУ 231947.005 ПЗ
32
З мн. Арк. № докум. Підпис Дата
Рисунок 3.7 – логотип Git
Git є однією з найефективніших, надійних і високопродуктивних систем
керування версіями, що надає гнучкі засоби нелінійної розробки, що базується
на відгалужені і злитті гілок. Git, на відміну від подібних до неї систем не
зберігає інформацію як список змін для файлів. Замість цього Git зберігає дані
набором зліпків. Кожного разу при фіксації поточної версії проекту Git
зберігає зліпок того, як виглядають всі файли проекту. Git схожий на своєрідну
файлову систему з інструментами, які працюють поверх неї. Він зберігає
розмір, час створення останньої зміни.
Більшість дій можна виконувати на локальній файловій системі без
використання інтернет підключення. Вся історія змін зберігається локально і
при необхідності вивантажується у віддалений репозиторій.
Галуження – це розмежування від основної лінії розробки. Git дозволяє
створити декілька гілок і перемикатися між ними. Це корисно, оскільки
дозволяє працювати декільком розробникам над своїм функціоналом не
заважаючи іншим. За замовчуванням назва головної гілки master. Гілка в Git
являє собою вказівник на одну із фіксацій. При кожній новій фіксації гілка
рухається автоматично.
Git підтримує два способи для інтеграції змін з гілки в гілку:
- merge ( зливання )
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 33
- rebase ( перебазування )
Основна різниця полягає в тому, що перебазування запам’ятовує
фіксації у вигляді патчів, перемотує гілку і застосовує патчі у вигляді фіксацій
на відміну від merge, який зливає дві гілки в одну.
GitHub
GitHub ( рис. 3.8 – логотип GitHub ) [25] – це веб-платформа для спільної
розробки програмного забезпечення, що базується на системі керування
версіями Git. Вона надає хостинг репозиторіїв Git і додаткові інструменти для
спільної роботи над проектами.
Рисунок 3.8 – логотип GitHub
Розробники сайту називають GitHub «соціальною мережею для
розробників». Окрім розміщення коду, учасники можуть спілкуватись,
коментувати редагування один одного, а також слідкувати за новинами
знайомих. За допомогою широких можливостей Git програмісти можуть
поєднувати свої репозиторії – GitHub дає зручний інтерфейс для цього.
Для проектів є персональні сторінки, Вікіпедія та система відстеження
помилок. Прямо на сайті можна переглядати файли проектів, реалізовано
підсвічення синтаксису для більшості мов програмування.
Арк.
Змн. Арк. № докум. ЧДТУ 231947.005 ПЗ 34
Підпис Дата
3.2 Реалізація веб-сайту кав’ярні Coffee House
Coffee House – це веб-сайт крафтової кав’ярні, який створений за
допомогою стека технологій JavaScript, TypeScript, React, HTML, SCSS та
багатьох додаткових бібліотек, що поліпшують розробку веб-додатку.
JavaScript – це динамічна об’єктно-орієнтована мова програмування, яка
найчастіше використовується для створення веб-додатків.
React – це відкрита JavaScript бібліотека для створення інтерфейсів
користувачів, яка покликана вирішувати проблеми часткового оновлення
вмісту веб-сторінки.
TypeScript – це мова програмування, яка позиціонує себе як засіб
розробки веб-застосунків, що розширює можливості JavaScript.
HTML – стандартизована мова гіпертекстової розмітки документів для
перегляду веб-сторінок у браузері.
SCSS – скриптова метамова, яка інтерпретується в каскадні таблиці
стилів.
Основна ідея додатку, полягає в створенні зручного і швидкого веб-
сайту для замовлення кави, що зменшить час затрачений на буденні, але
важливі справи.
Створення веб-сайту розпочинається зі створення актуальної та
продуманої структури сайту.
Отже першим етапом в створенні веб-сайту було створення блок-схеми
реалізації приблизного бачення структури ( рис. 3.9 – блок-схема структури
веб-сайту Coffee House ).
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 35
Рисунок 3.9 – блок-схема структури веб-сайту Coffee House
На блок-схемі ми можемо побачити «Головну сторінку сайту» з якої і
буде розпочинатись навігацію по веб-сайту кав’ярні Coffee House. Ми можемо
бачити 5 додаткових сторінок, які будуть нам допомагати подорожувати по
сайту та знаходити корисну для нас інформацію. Роботу над веб-сайтом я
розділив на 3 етапи, на кожному етапі розроблялась певна сторінка, її
функціонал, блок-схема сторінки та її дизайн.
Реалізація блок-схеми лише перший крок, який показує нам можливі
варіанти та приблизну структуру веб-сайту, кількість сторінок та його
бачення.
Етап 1.
Перший етап розробки містив в собі, створення середовище розробки.
Відразу я розпочав пошук стеку технологій на якому буде розроблятись веб-
сайт. Серед можливих варіантів було використання основних мов
програмування таких як: Python, JavaScript використовуючи спеціальні
фреймворки. Для Python це був фреймворк Django, який використовує
Арк.
ЧДТУ 231947.005 ПЗ
Змн. Арк. № докум. Підпис 36
Дата
шаблон проектування MVC. Для JavaScript вибір був між Angular чи React.
Мій вибір зупинився та стекі технологій JavaScript, React, TypeScript.
JavaScript використовується як функціональна частина веб-сайту. React для
налаштування та створення інтерфейсу. TypeScript використовується для
доповнення JavaScript та допомагає налаштовувати типи даних, для
правильної та лаконічної структури коду.
Отже першим кроком було створення проекту та встановлення
додаткових бібліотек. Щоб створити проект потрібно відкрити термінал та
увести певну команду.
Створення проекту ( рисунок 3.10 – команда для створення React
проекту із налаштуванням TypeScript )
Рисунок 3.10 – команда для створення React проекту із налаштуванням
TypeScript
Ввівши дану команду ми можемо розуміти що у нас розпочалось
створення нашого проекту для подальшої.
Після створення проекту ми можемо спостерігати початковий вигляд
нашого сайту та його контент запустивши наш сервер ( рис. 3.11, рис. 3.12
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 37
Початковий вигляд проекту, Початковий вигляд веб-сайту Coffee House).
Рисунок 3.11 – Початковий вигляд проекту
Рисунок 3.12 – Початковий вигляд веб-сайту Coffee House
Після створення початкового проекту розпочав встановлення
додаткових бібліотек для полегшення розробки, та для додавання додаткових
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 38
функцій.
В першу чергу встановив React-Router для створення зручної навігацію
по сайту, щоб пришвидшити загрузку сторінок та покращити структурну
навігацію сайту.
Важливою додатковою бібліотекою також є бібліотека Redux ( рис 3.15
– Redux ), яка допомагає винести state компонентів в окремі глобальні файли,
щоб робити це окремо від Vue-частини і мати можливість змінювати дані без
залежності від дизайну сайту. Також установив React-Redux, який допомагає
зв’язати React та Redux
Наступним важливим кроком було створення GitHub репозиторію під
назвою coffee-house та запушив початковий код сайту на репозиторій.
Етап 2.
Етап 2 заключає в собі створення дизайну головної сторінки та за
структуру сторінки використав блок-схему ( рис. 3.9 – блок-схема структури
веб-сайту Coffee House ).
Для створення дизайну сайту використав веб-додаток Figma в якому
розробив дизайн головної сторінки.
Створення головної сторінки розпочав зі створення Header сайту
( рисунок 3.13 – Header сайту ).
Рисунок 3.13 – Header сайту
Ми можемо спостерігати в Header декілька пунктів.
1. Бокове модальне вікно яке буде використовуватись як навігація для
сторінки Menu
2. Пошукове поле для пошуку інформації на сайті
3. Логотип веб-сайту
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. 39
№ докум. Підпис Дата
4. Модульне вікно для реєстрації та логіну ( рис. 3.14 – модульне вікно
для реєстрації та логіну )
Рисунок 3.14 – модульне вікно для реєстрації та логіну
5. Кошик для покупок в якому буде відображатись інформація про
вибраний товар, та можливість його оформлення
В першу чергу створив папку Header в якій будуть розміщатись всі
файли та папки які відносяться до Header ( рис. 3.15 – файлова структура
Header ).
1. Створив 2 файла Header.tsx та Header.module.scss ці файли головні в
концепції Header від яких буть створюватись додаткові файли та папки.
2. Створив Папку SingPages в якій знаходиться 2 додаткові папки SignIn
і SignUp, які відповідають за сторінку реєстрація та логіну, також створив
додатковий файл Auth.tsx який відповідає за зв’язування реєстрації і логіну.
3. Створив папку HeaderModal яка відповідає за модальне вікно Menu в
якому буде знаходить навігація по категоріям меню
4.Створив папку CartModal яка відповідає за модальне вікно корзини для
покупок. В якій є додаткові папки з назвами CartModalOrder і ShoppingCart.
5. Створив папку SignModal яка відповідає за модальне вікно для
реєстрації та логіну.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 40
Рисунок 3.15 – файлова структура Header
Розпочав створення Header зі основного файла Header.tsx і
Header.module.scss в яких описав стилі та функціональність Header. Створив
модальні вікна в які помістив контент та додав відповідні стилі.
При створенні кнопки Menu для Header створив модальне вікно в якому
реалізував власний дизайн та додав контент ( рис. 3.16 – модальне вікно
Menu ).
Меню реалізоване таким таким чином, що при наведені на будь який
елемент, він візуально збільшується, задля ясності. Для кожного елемента
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 41
меню використана навігація яка веде до відповідної категорії в основному
меню сайта.
Рисунок 3.16 – модальне вікно Menu.
Створення реєстрації і логіну відбулось зі створення блок-схеми для
розуміння концепції розробки та можливих варіантів ( рис. 3.17 блок-схема
логіну і реєстрації ).
Концепція логіна і реєстрації відбувається за принципом. При вході на
сайт, веб-сайт не змушує нас зареєструватись, це відбувається лише з
принципового бажання клієнта, але це нам дає деякі привілеї. При оформленні
замовлення, дані які ми вводимо при реєстрації і логіну зберігаються в системі
і самостійно підтягуються у форму, що допомагає нам в декілька кліків
оформити замовлення.
Якщо клієнт вирішив зареєструватись на сайті, то йому потрібно
перейти до сторінки реєстрації, натиснувши на кнопку «Your Account».
Відкриється модальне вікно в якому потрібно натиснути на кнопку Register,
яка перенаправе клієнта на сторінку реєстрації ( рис. 3.18 – сторінка
реєстрації ) в якому ми повинні ввести наші контактні дані і після перевірки,
Арк.
ЧДТУ 231947.005 ПЗ
42
З мн. Арк. № докум. Підпис Дата
що дані введені правильно і цього аккаунта немає в мережі нас
зареєструє і запропонує перейти на сторінку Login ( рис. 3.19 – сторінка
логіну ) де ми повинні ввести наші дані.
Рисунок 3.17 – блок схема логіну і реєстрації
Сторінка реєстрації і логіну реалізована в стилі мінімалізм. На сторінці
реєстрації ( рис. 3.18 – сторінка реєстрації ) ми можемо побачити головне
background фото і блок по центру екрана з формою. Ми маємо 4 поля: Name,
Surname, Email, Password для цих полів був створений файл Validation ( рис.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 43
3.20 – файл Validation ), який відповідає за валідацію цих форм, що допомагає
перевіряти введені дані і контролювати процес реєстрації. В низу форми є 2
основні кнопки. «Sign Up» відповідає за кнопку реєстрації, яка при корректно
введених даних зареєструє клієнта в базу і запропонує перейти на сторінку
реєстрації. Кнопка «You already have account?» відповідає за перенаправлення
на сторінку Login.
Рисунок 3.18 – сторінка реєстрації
Сторінка Логіну ( рис. 3.19 – сторінка Логіну ) містить структуру як і
реєстрація але з формою з 2 текстових полів в які ми можемо ввести свої дані
і якщо клієнт був зареєстрований в системі, то нас залогіне і перенаправе на
головну сторінку сайту.
Рисунок 3.19 – сторінка Логіну
Арк.
ЧДТУ 231947.005 ПЗ
44
Змн. Арк. № докум. Підпис Дата
Вверху кожної з цих 2 сторінок ми маємо кнопку « < Back » що вертає
нас назад на головну сторінку.
Файл Validation ( рис. 3.20 – файл Validation ) – є дуже важливим і
використовується в багатьох частинах сайту. Це унікальний файл, який
створено під різні випадки, а не конкретно під один.
Рисунок 3.20 – файл Validation
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 45
Після створення Header, розпочалось створення контенту сайту. При
вході на сайт ми можемо бачити головне фото ( рис. 3.21 – головне сторінка )
на якій є кнопка «View Menu», що перенаправляє на сторінку Menu.
Рисунок 3.21 – головна сторінка
Розпочавши скролл сайту ми можемо побачити коротку історію про
кофе та самі популярні категорії кофе ( рис. 3.22 – кращі категорії кофе ).
Найкращих категорій, кожна з категорій розділена окремим блоком з
фотографією та назвою категорії кофе. Також можна спостерігати кнопку
Show in Menu для переходу в меню цієї категорії кофе. На сайті також присутні
ласощі до напоїв.
Рисунок 3.22 – кращі категорії кофе
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 46
Останній аспект кожної сторінки є її Footer. Footer Coffee House це
насамперед це блок з контактною інформацією про заклад, про його місце
розташування, номер телефону та графік роботи, що є досить важливою
частиною, адже бути завжди на зв’язку з клієнтами дуже важливо. Важливо
донести і показати клієнтам графік роботи і точне місце знаходження закладу.
Сам же Footer ( рис. 3.23 – контактна інформація і Footer сайту ) включає
в себе один суцільний блок в який входить логотип веб-сайту, невеликий блок
з позитивною цитатою. Важливим пунктом є Quick Links, що допоможуть
швидко переходити по самих важливих сторінках сайту і швидко знаходити
інформацію. Блок з контактною інформацією відображає головну інформацію
про заклад, та допомагає, знайти заклад і в необхідності зв’язатись з
працівниками.
Рисунок 3.23 – контактна інформація і Footer сайту
Етап 3
Етап 3 включає в себе створення сторінок Menu та наповнення сайту
контентом, підключення Redux та реалізація корзини веб-сайту.
Першим кроком було створення папки redux ( рис. 3.24 – файлова
структура папки redux ) яка відповідає за store проекту. Redux містить в собі
основний файл store, в якому ми створюємо наш store спеціальною командою
Арк.
ЧДТУ 231947.005 ПЗ
Змн. Арк. № докум. Підпис 47
Дата
та експортуємо його в наший головний файл сайту index.tsx. Для кожного
нашого компонента, state якого ми хочемо отримувати, зберігати або навіть
змінювати ми створюємо спеціальні файли Reducer.
Reducer – це чиста функція, яка приймає минулий state і action, та вертає
новий state. Reducer використовується для зберігання даних, та різних
взаємодій з ними.
Важливим елементом є Action – це звичайні об’єкти в JavaScript, які
відправляють дані з компонентів в store. Action приймають 2 значення: type і
payload.
Використовувати наш store ми можемо в наших файлах і за допомогою
action передавати дані в reducer і змінювати дані. Отримувати дані в
компоненті ми можемо 2 варіантами використовуючи функцію connect що
з’єднує React з Redux store. Функція connect допомагає створювати
компоненти вищого порядку, що є потрібним для створення компонентів-
контейнерів на основі базових компонентів.
Перший і застарілий варіант - це використання двох спеціальних
функцій mapStateToProps і mapDispatchToProps.
mapStateToProps – це перший аргумент функції connect, що
використовується для читання state. Функція отримує весь state в store і вертає
об’єкт з необхідними цьому компоненту даними.
mapDispatchToProps – це другий аргумент функції connect, що
використовує dispatch для відправки змін в store. Функція дозволяє нам
створювати функції, які відправляють дію при їх виклику.
Другий і більш новий варіант – це використання хуків useSelector та
useDispatch.
useSelector – це хук який є аналогом mapStateToProps. Хук приймає на
вхід селектор – метод, який приймає redux state та повертає з нього необхідні
дані.
useDispatch – це хук який повертає посилання на функцію dispatch.
Арк.
ЧДТУ 231947.005 ПЗ
48
З мн. Арк. № докум. Підпис Дата
Рисунок 3.24 – файлова структура папки redux.
Сторінка Menu веб-сайту Coffee House розподілена на частини.
Як ми можемо побачити ( рис. 3.21 – головна сторінка ) на головну сторінку
сайту, ми маємо кнопку, що перенаправляє нас на сторінку Menu, також на цю
сторінку нас веде посилання у Footer ( рис. 3.23 – контактна інформація і Footer
сайту) сайту. Натиснувши на ці посилання ми можемо попасти на сторінку
Menu, але відразу нас перенесе на сторінку Categories ( рис. 3.25 – сторінка
Categories ). На цій сторінці ми маємо можливість бачити всі категорії кави,
чаю або десертів на які ми можемо перейти.
Сторінка розділена на 2 головні частини. Перша це навігація по
категоріям, де відображається всі можливі категорії. При натисканні на будь-
яку категорію ми маємо змогу спостерігати виділення категорії ( рис. 3.26 –
сторінка Menu ).
Друга частина це також категорії кофе, але особливість цього блоку, що
він має фото напою, або десерту, його назву і при натисканні на блок зміниться
лише права частина сторінки, коли як ліва залишиться незмінною і
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. 49
Підпис Дата
буде виконувати й надалі роль навігації.
Рисунок 3.25 – сторінка Categories
При переході на будь яку категорію відкривається сторінка з цією
категорією напоїв або десертів. Структура сторінки аналогічна, але внизу під
назвою ми бачимо ціну напою і при наведенні ми маємо можливість побачити
кнопку «Add to Cart».
Рисунок 3.26 – сторінка Menu
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. 50
№ докум. Підпис Дата
Якщо ми натиснемо на кнопку ( рис. 3.27 – модальне вікно замовлень ),
відкриється модальне вікно в якому ми маємо можливість побачити назву
напою/десерту, збільшену фотографію продукту і інформацію про цей
продукт, його структуру та особливість. Під інформацією показано ціну, та
можливість додати цей продукт до корзини. Ми маємо 3 кнопки, при
натисканні на яких ми можемо вибрати кількість продукту та натиснувши
кнопку «Add to Trip» додати до корзини. Коли кількість дорівнює нуль, кнопка
зменшити і додати до корзини заблоковані.
Рисунок 3.27 – модальне вікно замовлень
Після того як ми натиснули на кнопку, в правом куті Header ми можемо
побачити, що збільшилась кількість елементів в нашій корзині.
Корзина сайту ( рис. 3.28 – корзина продуктів ) реалізований в стилі
модального вікна в якому в нас добавляються наші продукти, які ми додали.
Клієнт має можливість збільшувати або зменшувати кількість певного товару,
або зовсім видаляти його з корзини. Також є функція очищення всієї корзині.
У лівому верху корзини є кнопка «Back to store» що повертає нас назад до
магазину.
Модальне вікно Корзини реалізоване таким чином, що воно розділене
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис Дата 51
на 2 частини. Зліва у нас інформація про товар та можливість взаємодії з ними.
З права ж, клієнт може побачити блок. У верху блоку відображається сума
замовлення і можливу скидку. В низу блоку клієнт може побачити кінцеву
суму замовлення і кнопку підтвердження замовлення.
Рисунок 3.28 – корзина продуктів
Натиснувши на кнопку «Checkout» ми можемо підтвердити наше
замовлення і перейти на сторінку оформлення замовлення ( рис 3.29 – файл
Оформлення замовлення ). Дана сторінка розділена на 2 частини.
З ліва знаходиться форма в якій клієнт повинен ввести коректні дані, або
якщо клієнт авторизований на сайті то дані з’являться самі. Форма керується
валідацією файла Validation ( рис. 3.20 – файл Validation ). Внизу форми є
кнопка «Confirm Order», яка при корректно введеній формі підтвердить
замовлення. Спосіб оплати лише готівкою.
З права знаходиться блок в якому знаходяться продукти які ми
замовляємо, їх кількість, ціна та загальна сума замовлення. Вверху
знаходиться кнопка «Back to cart», що поверне клієнта на сторінку корзини.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис 52
Дата
Рисунок 3.29 – файл Оформлення замовлення.
Після введення інформації і натиснення кнопки, клієнт отримає
повідомлення про успішність, або відміну замовлення.
3.3 Порівняння з аналогами
Aroma Kava
Aroma Kava – одна з найбільших українських мереж кав’ярень, що
працює в 45 містах України. У кав’ярні представлений широкий вибір
ароматної кави, кавових напоїв і унікальних десертів. Головною особливістю
закладу є якісна кава. Велику увагу приділяють якості кавових зерен, сортів,
ступеня обсмаження. Унікальний стиль кав’ярні простежується у багатьох
аспектах. Мальовничі стаканчики, яскраво блакитні й помаранчеві стіки
цукру.
Aroma Kava має свій власний сайт ( рис. 3.30 – веб-сайт кав’ярні Aroma
Kava ), де потенційні відвідувачі можуть побачити потрібну для них
інформацію.
Сайт розроблений у футуристичному стилі з красивими переходами,
скролом сторінки. Яскравий та анімований сайт є залогом позитивних
Арк.
ЧДТУ 231947.005 ПЗ
З 53
мн. Арк. № докум. Підпис Дата
відгуків та зацікавлення клієнта з перших секунд перебування на сайті. Досить
великий сайт з достатньою і головною інформацією для клієнта та красиво
оформленим меню.
Рисунок 3.30 – веб-сайт кав’ярні Aroma Kava
Світ кави
Світ кави – це українська мережа кав’ярень і власний обсмажуваний цех
у Львові, заснована Маркіяном Бедрієм у 2000 році у місті Львів. За час свого
існування у кав’ярні з’явилося багато постійних клієнтів. Головною рисою
кав’ярні є гостинність, тому й персонал відбирається певними критеріями
основним з яких є любов до справи, до людей і кави.
Меню кав’ярні є класичним, і в деяких частинах не змінюється роками,
що зберігає особливу традицію кав’ярні. Кав’ярня не відрізняється
мальовничими кольорами, а зберігає класичні кольори, що надають їй певну
оригінальність та красу.
Світ кави має свій власний сайт ( рис. 3.31 – веб-сайт кав’ярні Світ кави ),
що створений в класичному стилі із застосуванням світлих тонів в дизайні.
Сайт має анімовано головну сторінку та зрозумілу навігацію, що допомагаєте
швидко орієнтуватись по веб-сайту. Гарний та швидкий сайт – це саме те, що
можна сказати про веб-сайт кав’ярні Світ кави. Зручне, та
Арк.
ЧДТУ 231947.005 ПЗ
54
З мн. Арк. № докум. Підпис Дата
зрозуміле меню допомагає в декілька кліків зробити замовлення.
Рисунок 3.31 – веб-сайт кав’ярні Світ кави
COFFEELAT
COFFEELAT – це український бренд мережі кав’ярень, котрий працює у
форматі «кава з собою». На сьогодні кав’ярня працює понад 13 років та має
понад 28 кав’ярень.
Місія кав’ярні – розвивати культуру споживання якісної кави,
застосовуючи високі стандарти обслуговування, надаючи можливість
кожному насолодитись смаком преміальної арабіки. Кав’ярня COFFEELAT
використовує власні стандарти обсмаження, та виготовляє десерти у власному
цеху. Важливою задачею кав’ярні є – отримання стовідсотково якісного як
напою так і десерту.
Кав’ярня має власний веб-сайт ( рис. 3.32 – веб-сайт кав’ярні
COFFEELAT), що створений в красивому різноманітному дизайні з
використанням сучасних технологій. Анімовані сторінки, швидка та зрозуміла
навігація по сайту, зрозумілий дизайн і функціонал – це те що чекає клієнта на
цьому веб-сайті. Важливим пунком є швидкість оформлення замовлення, що є
характерною рисою цієї кав’ярні.
Арк.
ЧДТУ 231947.005 ПЗ
З мн. Арк. № докум. Підпис 55
Дата
Рисунок 3.32 – веб-сайт кав’ярні COFFEELAT
Арк.
ЧДТУ 231947.005 ПЗ
56
З мн. Арк. № докум. Підпис Дата
ВИСНОВКИ
У даній кваліфікаційній роботі було проведено дослідження та розробка
Web-сервіс обслуговування клієнтів крафтової кав’ярні. Web-сервіс
обслуговування клієнтів крафтової кав’ярні представляє собою великий крок
у контексті веб розробки, де веб-послуги стали невід’ємною частиною світу.
Цей веб-сервіс надає змогу швидко та зручно отримати можливість
насолодитися смачною кавою та десертами не виходячи з дому, допомагає
клієнтам швидко та ефективно подорожувати по сайту та замовляти каву.
Однією з головних переваг веб-сайту є його швидкість замовлення,
зручний та зрозумілий дизайн і, звичайно, ефективність. Цей веб-сервіс
дозволяє в декілька кліків переглянути веб-сайт та вибрати для себе бажане
замовлення. Він, в силу свого зручного дизайну, допомагає розібратися
клієнтам з веб-сайтом та зацікавлює своєю простотою і зручністю.
Аналізуючи існуючі Web-сервіси кав’ярень, було виявлено деякі
недоліки та переваги. Переваги Web-сервісів заключаються в їх багатій історії
створення кав’ярні та кількості інформації розміщеної на сайті. У великій
кількості зручних та красивих анімацій, що відразу трапляються на очі і
заохочують клієнта залишитись на веб-сайті. Зручний пошук та фільтрація на
деяких веб-сайтах є також більш кращою, оптимізованою та зручнішою. До
недоліків веб-сайтів відноситься в деяких місцях не зручний інтерфейс
користувача, або навіть помилки з його роботою та розміщенням на сайті.
Переклад деяких сторінок є проблемним або взагалі зникає текст.
У процесі розробки Web-сервісу обслуговування клієнтів крафтової
кав’ярні Coffee House були визначені основні цілі та функціональні вимоги.
До цілей проекту входить створення більш швидкого і зручного веб-сервісу
крафтової кав’ярні, що матиме можливість швидше обробляти замовлення ніж
його аналоги. Функціональні вимоги включають пошуку, фільтрації та
замовлення актуальних і смачних продуктів на розсуд користувача. Швидка
авторизація та швидка обробка замовлень.
Арк.
ЧДТУ 231947.005 ПЗ 57
З мн. Арк. № докум. Підпис Дата
Вибір стека технологій JavaScript, React, TypeScript для розробки веб-
сайту є зручним та високо продуктивним, оскільки завдяки цьому стеку є
можливість створювати динамічний інтерфейс та при цьому зберігати
швидкість дії допомагаючи налагоджувати типи даних та їх взаємодію між
собою. Використання WebStorm як інтегроване середовище розробки є також
вдалим вибором, адже воно надає зручні інструменти роботи з кодом і
зменшує обсяг роботи з Git.
Після завершення розробки Web-сервісу крафтової кав’рні Coffee House
і проведення аналізу роботи, можна визначити подальші покращення веб-
сервісу. Вдосконалення та збільшення меню веб-сайту, покращення дизайну
сторінок та додавання більш обширної інформації про товар та його вигляд.
Створення додаткових сторінок, таких як відгуки для клієнтів та систему
підтримки для покращення роботи веб-сайту та виявлення помилок у сервісі.
У загальному розробка Web-сервісу крафтової кав’ярні Coffee House
представляє собою зручний сервіс для замовлення кави, що має доволі
великий потенціал розвитку. Цей веб-сайт може стати популярним місцем для
замовлення та отримання смачної і гарячої кави з десертами, що покращить
настрій та ефективність клієнтів веб-сервісу, та буде доступним для кожного
Інтернет-користувача.
Арк.
ЧДТУ 231947.005 ПЗ 58
З мн. Арк. № докум. Підпис Дата
СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ
1. Веб-сайт: визначення й застосування. URL:
http://www.webtec.com.ua/uk/articles/index/view/2011-05-05/web-site
2. Що таке Веб-сайт? URL: https://futurenow.com.ua/shho-take-veb-sajt-
yaka-istoriya-yih-vynyknennya-ta-vydy-veb-sajtiv-shho-take-veb-storinka/
3. Як визначити актуальність Веб-сайту? URL: https://istec.com.ua/uk/yak-
viznachiti-aktualnist-veb-sajtu-internet-magazina/
4. Загальні принципи створення Веб-сайтів. URL:
https://studfile.net/preview/9911327/page:2/
5. Протоколи HTTP і HTTPS. URL:
https://besthosting.ua/ua/http_and_https_protocols.php
6. У чому полягає актуальність створення Веб-сайту? URL:
https://www.0532.ua/list/220579
7. Переваги Веб-сайту. URL: https://phoneinfo8.info/perevahy-vlasnoho-
saitu/
8. Помилки при створенні Веб-сайту. URL: https://impulse-
design.com.ua/ua/20-oshibok-pri-sozdanii-sajta.html
9. Аналіз головних недоліків Веб-сайтів. URL:
http://www.economy.nayka.com.ua/?op=1&z=5995
10. Адаптивність сайту. URL: https://webtune.com.ua/statti/internet-
marketing/yak-pereviryty-adaptyvnist-za-dopomogoyu-brauzera/.
11. Як захистити сайт від злому? URL: https://datami.ua/yak-zahistiti-sajt-vid-
zlomu-i-vtrati-danih/
12. Дослідження методів забезпеченн захищеності веб-ресурсів. URL:
http://eprints.library.odeku.edu.ua/id/eprint/7040/1/Grosu_doslidzhennya_m
etodiv_zabezpechennya.pdf
13. What is cross-site scripting (XSS)? URL: https:// portswigger.net/web-
security/cross-site-scripting
14. What is CSRF? URL: https://portswigger.net/web-security/csrf
Арк.
ЧДТУ 231947.005 ПЗ
59
З мн. Арк. № докум. Підпис Дата
15. Поняття, структура та різновиди Веб-сайтів. URL:
http://www.ndu.edu.ua/liceum/web.pdf
16. Архітектура клієнт-сервера. URL:
http://educational.mariroz.com/InformTechVInfrastrRynku/lect/lect8.pdf
17. Основні вимоги до Веб-сайту. URL:
https://studfile.net/preview/7205230/page:4/
18. Базові поняття і терміни Веб-технологій. URL:
https://lib.iitta.gov.ua/6472/1/%D0%91%D0%90%D0%97%D0%9E%D0%
92%D0%86_%D0%9F%D0%9E%D0%9D%D0%AF%D0%A2%D0%A2%
D0%AF.pdf
19. Архітектура і проектування програмного забезпечення. URL:
https://www.dstu.dp.ua/Portal/Data/3/19/3-19-kl34.pdf
20. SEO-оптимізація в системі моніторингу Веб-ресурсів. URL:
https://vistnuk.knutd.edu.ua/wp-content/uploads/sites/2/2023/05/1-1-
2023.pdf .
21. Технології розробки Веб-ресурсів. URL:
http://repository.hneu.edu.ua/bitstream/123456789/22466/1/2019%20-%20
%D0%9C%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%BE%D
0%B2%20%D0%92%20%D0%9F%2C%20%D0%9F%D0%B0%D0%BD
%D0%B4%D0%BE%D1%80%D1%96%D0%BD%20%D0%9E%20%D0%
9A.pdf
22. JetBrains WebStorm. URL: https://sva.ua/jetbrains-webstorm/
23. Google Chrome. URL: https://step.org.ua/konspekt/www/tema3
24. Що таке Mac OS? URL: https://mac.org.ua/macos/about-os-x/
25. Що таке Git та GitHub. URL: https://sebweo.com/scho-take-git-ta-github-
kerivnitstvo-dlya-pochatkivtsiv/
Арк.
ЧДТУ 231947.005 ПЗ
З мн. 60
Арк. № докум. Підпис Дата
ДОДАТОК А
ЗАТВЕРДЖЕНО
Зав.кафедри ІТП
Тетяна ПРОКОПЕНКО.
“_____” _____________2023р.
Розробка веб-сайту – «Web-сервіс обслуговування клієнтів крафтової
кав’ярні»
Спецефикація
482 ЧДТУ 231947 – 01
Листів 2
Розробник _____________ ЧМИР Роман
Керівник _____________ ТАРАСЕНКО Ярослав
Н. контроль _____________ ТАРАСЕНКО Ярослав
Черкаси, 2023
62
482 ЧДТУ 231947 – 01
Позначення Найменування Примітка
482 ЧДТУ 231947 – 01 12 01 Текст програми
ДОДАТОК Б
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ «Web-сервіс обслуговування клієнтів
крафтової кав’ярні»
ТЕКСТ ПРОГРАМИ
482 ЧДТУ 231947 – 01 12 01
Листів 32
Розробник _____________ ЧМИР Роман
Черкаси, 2023
64
482 ЧДТУ 231947 – 01 12 01
Фрагмент коду що позначає головний файл проекту, в якому
передається store даних.
Index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import store from './redux/createStore';
import App from './App';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
);
reportWebVitals();
Фрагмент коду в який відповідає за навігацію веб-сайту.
App.tsx
import React, { useEffect } from 'react';
import { Routes, Route, Outlet, useLocation } from 'react-router-dom';
import Header from './component/Header/Header';
65
482 ЧДТУ 231947 – 01 12 01
import Footer from './component/Footer/Footer';
import HomePageContainer from './component/HomePage/HomePageContainer';
import Auth from './component/Header/SignPages/Auth';
import CoffeeMenu from './component/CoffeeMenu/CoffeeMenu';
import './App.css';
const CurrentPage = () => {
return (
<div>
<Header />
<Outlet />
<Footer />
</div>
)
}
const App = () => {
const location = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [location.pathname]);
const items = [
{ type: '' }, { type: 'latte' }, { type: 'cappuccino' }, { type: 'mocha' },
{ type: 'green-tea' }, { type: 'black-coffee' }, { type: 'cupcake' },
{ type: 'black-tea' }, { type: 'espresso' }, { type: 'hot-chocolate' }
]
// const menu = coffeeMenu[type]
return (
<>
66
482 ЧДТУ 231947 – 01 12 01
<Routes>
<Route path="/" element={<CurrentPage />}>
<Route path="" element={<HomePageContainer />} />
{ items.map(({type}) => <Route path={/menu/${type}} element={<CoffeeMenu
type={type} />} />) }
</Route>
<Route path="/login" element={<Auth />} />
<Route path="/register" element={<Auth />} />
</Routes>
</>
)
}
export default App;
Header сайту, який завжди відображається і є блоком в яком міститься
корзина сайту
Header.tsx
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Grid } from '@mui/material';
import { Link } from 'react-router-dom';
import SearchIcon from '@mui/icons-material/Search';
import CoffeeHouse from '../../assets/icons/coffee-house.webp';
import allActions from '../../redux/actions/actions';
import { CustomInput } from '../common/component/CustomInput/CustomInput'
import { HeaderModal } from './HeaderModal/HeaderModal';
import { SignModal } from './SignModal/SignModal';
import CartModalContainer from './CartModal/CartModalContainer';
67
482 ЧДТУ 231947 – 01 12 01
import styles from './Header.module.scss';
import '../common/styles/main.scss'
const Header = () => {
const [isOpen, setIsOpen] = useState(false)
const [isLogModal, setIsLogModal] = useState(false)
const [isUserLog, setIsUserLog] = useState(false);
const [orderStatus, setOrderStatus] = useState(false);
const [isCartModal, setIsCartModal] = useState(false);
const [confirmOrder, setConfirmOrder] = useState(false);
const state = useSelector((state: any) => state);
const { categories }: any = state.coffeeMenu;
const { userLog }: any = state.signStatus;
const { cart }: any = state.coffeeMenuItems;
const dispatch = useDispatch()
const handleChange = () => setOrderStatus(!orderStatus);
const successOrder = () => {
dispatch(allActions.counterActions.removeCartItems())
setConfirmOrder(false);
setOrderStatus(false);
setIsCartModal(false);
}
const handleModal = () => {
setIsOpen(!isOpen);
setIsLogModal(false);
}
const handleLogModal = () => setIsLogModal(!isLogModal);
const handleCartModal = () => {
68
482 ЧДТУ 231947 – 01 12 01
setIsCartModal(!isCartModal);
setIsLogModal(false);
setOrderStatus(false)
}
const logOut = () => {
dispatch(allActions.signActions.logOutAction(userLog))
}
useEffect(() => {
if (userLog.length > 0) {
setIsUserLog(true)
} else {
setIsUserLog(false)
}
}, [userLog.length > 0])
return (
<Grid className={styles.header}>
<Grid className={styles.menuIcon}>
<HeaderModal isOpen={isOpen} handleModal={handleModal}
categories={categories} />
</Grid>
<Grid className="vertical-line" />
<Grid className={styles.row}>
<CustomInput placeholder={"Search Products Here"} customHeaderStyle />
<SearchIcon />
</Grid>
<Grid className="vertical-line" />
<Grid className={styles['coffee-house-icon']}>
<Link to="/">
<img src={CoffeeHouse} alt="coffee-house" />
</Link>
69
482 ЧДТУ 231947 – 01 12 01
</Grid>
<Grid className="vertical-line" />
<Grid className={styles.row}>
<SignModal isLogModal={isLogModal} handleLogModal={handleLogModal}
isUserLog={isUserLog} userLog={userLog} logOut={logOut} />
</Grid>
<Grid className="vertical-line" />
<Grid className={styles['shop-row']}>
<CartModalContainer
cart={cart}
isCartModal={isCartModal}
handleCartModal={handleCartModal}
handleChange={handleChange}
orderStatus={orderStatus}
confirmOrder={confirmOrder}
setConfirmOrder={setConfirmOrder}
successOrder={successOrder}
/>
</Grid>
</Grid>
)
}
export default Header;
Файл CSS стилів Header файлу, в якому створено його дизайн.
Header.module.scss
// main color: #b8a392
.header {
position: sticky;
top: 0;
70
482 ЧДТУ 231947 – 01 12 01
background-color: white;
height: 75px;
display: flex;
padding: 0 25px 0 25px;
align-items: center;
width: 100%;
z-index: 999;
border-bottom: 1px solid silver;
.menuIcon {
display: flex;
width: 80px;
justify-content: space-between;
font-size: large;
font-weight: bolder;
}
.row {
display: flex;
align-items: center;
}
.coffee-house-icon {
display: flex;
width: 550px;
justify-content: center;
img {
height: 100px;
width: 200px;
cursor: pointer;
}
}
71
482 ЧДТУ 231947 – 01 12 01
.shop-row {
display: flex;
width: 110px;
align-items: center;
p {
font-size: large;
font-weight: bolder;
}
}
}
Файл з програмним кодом що відповідає за поєднання сторінок SignIn і
SignUp та створює між ними взаємодію
Auth.tsx
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Grid } from '@mui/material';
import classnames from 'classnames';
import SignInContainer from './SignIn/SignInContainer';
import SignUpContainer from './SignUp/SignUpContainer';
import BackButton from '../../../assets/icons/back-button.png';
import styles from './Auth.module.scss';
const Auth = () => {
const location = useLocation()
const pathLocation = {
login: location.pathname === '/login',
72
482 ЧДТУ 231947 – 01 12 01
register: location.pathname === '/register',
}
const checkLocation = () => {
if (pathLocation.login) {
return <SignInContainer />
}
if (pathLocation.register) {
return <SignUpContainer />
}
}
return (
<Grid className={classnames({
[styles.sign]: true,
[styles['sign-background-photo-register']]: pathLocation.register,
[styles['sign-background-photo-login']]: pathLocation.login,
})}>
<Grid className={styles['sign-content']}>
<Link to="/" className={styles['sign-content-back-button']}>
<img src={BackButton} alt="back-button" />
<p>Back</p>
</Link>
{checkLocation()}
</Grid>
</Grid>
)
}
export default Auth;
Контейнер-обгортка файлу SignIn, який створений задля обробки і
73
482 ЧДТУ 231947 – 01 12 01
отримання даних, що слугують функціональністю Логіну веб-сайту.
SignInContainer.tsx
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { SignIn } from './SignIn';
import { checkEmailValidation, checkFormLength, checkPasswordValidation } from
'../../../common/component/validation/Validation';
import allActions from '../../../../redux/actions/actions';
const SignInContainer = () => {
const [acceptOrder, setAcceptOrder]: any = useState(false);
const [correctField, setCorrectField] = useState('');
const [emailValid, setEmailValid]: any = useState({
content: '',
status: false,
});
const [passwordValid, setPasswordValid]: any = useState({
content: '',
status: false,
});
const [validContact, setValidContact] = useState({
email: '',
password: '',
})
const state = useSelector((state: any) => state);
const { userLog, userLogError, userLogStatus }: any = state.signStatus;
74
482 ЧДТУ 231947 – 01 12 01
const dispatch = useDispatch()
const signIn = () => {
setAcceptOrder(checkFormLength(setAcceptOrder, setCorrectField, emailValid.status,
validContact, passwordValid.status))
}
useEffect(() => {
if (acceptOrder) {
dispatch(allActions.signActions.signInAction(validContact))
}
setAcceptOrder(false)
}, [acceptOrder])
const navigate = useNavigate();
useEffect(() => {
if (userLogStatus) {
navigate("/");
}
}, [userLog.length]);
return (
<SignIn
signIn={signIn}
validContact={validContact}
setValidContact={setValidContact}
checkEmailValidation={checkEmailValidation}
checkPasswordValidation={checkPasswordValidation}
emailValid={emailValid}
correctField={correctField}
75
482 ЧДТУ 231947 – 01 12 01
setEmailValid={setEmailValid}
passwordValid={passwordValid}
setPasswordValid={setPasswordValid}
emailError={userLogError.email}
passwordError={userLogError.password}
userLogStatus={userLogStatus}
/>
)
}
export default SignInContainer;
Фрагмент програмного коду, що слугує чистим компонентом, який
лише вертає JSX розмітку Логіну веб-сайту.
SignIn.tsx
import React from 'react';
import { Link } from 'react-router-dom';
import { Grid } from '@mui/material';
import classnames from 'classnames';
import { CustomInput } from '../../../common/component/CustomInput/CustomInput';
import { Button } from '../../../common/component/CustomButton/Button';
import styles from './SignIn.module.scss';
export const SignIn = ({
signIn, validContact, setValidContact, checkEmailValidation, setEmailValid,
emailValid,
setPasswordValid, checkPasswordValidation, correctField, passwordValid, emailError,
passwordError
}: any) => {
return (
76
482 ЧДТУ 231947 – 01 12 01
<Grid
className={classnames({
[styles['signIn-content-modal']]: true,
[styles['signIn-content-modal-with-status']]: emailError.errorStatus &&
passwordError.errorStatus
})}
>
<Grid className={styles['signIn-content-modal-data']}>
<Grid className={styles['signIn-content-modal-data-form']}>
<p>Email</p>
<CustomInput
placeholder="Please enter your email address"
onChange={(e: any) => (
setValidContact({ email: e.target.value, password: validContact.password }),
checkEmailValidation(setValidContact, setEmailValid, validContact)
)}
/>
<p className={styles['signIn-content-modal-data-form-
error']}>{emailError.errorStatus && emailError.errorMessage}</p>
{validContact.email.length <= 0 && <p className={styles['signIn-content-modal-
data-form-text-field']}>{correctField}</p>}
<p className={styles['signIn-content-modal-data-form-
email']}>{ validContact.email.length > 0 && emailValid.content}</p>
</Grid>
<Grid className={styles['signIn-content-modal-data-form']}>
<p>Password</p>
<CustomInput
placeholder="Please enter your password"
type="password"
onChange={(e: any) => (
setValidContact({ email: validContact.email, password: e.target.value }),
checkPasswordValidation(setPasswordValid, validContact.password)
)}
77
482 ЧДТУ 231947 – 01 12 01
/>
<p className={styles['signIn-content-modal-data-form-
error']}>{passwordError.errorStatus && passwordError.errorMessage}</p>
{validContact.password.length <= 0 && <p className={styles['signIn-content-
modal-data-form-text-field']}>{correctField}</p>}
<p className={styles['signIn-content-modal-data-form-
email']}>{passwordValid.content}</p>
</Grid>
</Grid>
<Grid className={styles['signIn-content-modal-button']}>
<Button content="Login" onClick={signIn} />
</Grid>
<Grid className={styles['signIn-content-modal-button']}>
<p>You don`t have account? <Link to="/register">Sign Up!</Link></p>
</Grid>
</Grid>
)
}
Контейнер-обгортка файлу SignUp, який створений задля обробки і
отримання даних, що слугують функціональністю Реєстрації веб-сайту.
SignUpContainer.tsx
import React, {useState, useEffect} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { SignUp } from './SignUp';
import allActions from '../../../../redux/actions/actions';
import { checkEmailValidation, checkFormLength, checkPasswordValidation } from
'../../../common/component/validation/Validation';
78
482 ЧДТУ 231947 – 01 12 01
const SignUpContainer = () => {
const [acceptOrder, setAcceptOrder]: any = useState(false);
const [correctField, setCorrectField] = useState('');
const [emailValid, setEmailValid]: any = useState({
content: '',
status: false,
});
const [passwordValid, setPasswordValid]: any = useState({
content: '',
status: false,
});
const [validContact, setValidContact] = useState({
name: '',
surname: '',
email: '',
password: '',
})
const state = useSelector((state: any) => state);
const { content }: any = state.signStatus;
const dispatch = useDispatch()
const createUser = () => {
setAcceptOrder(checkFormLength(setAcceptOrder, setCorrectField, emailValid.status,
validContact, passwordValid.status))
}
useEffect(() => {
if (acceptOrder) {
dispatch(allActions.signActions.signUpAction(validContact))
}
79
482 ЧДТУ 231947 – 01 12 01
setAcceptOrder(false)
}, [acceptOrder])
return (
<SignUp
checkEmailValidation={checkEmailValidation}
validContact={validContact}
emailValid={emailValid}
setValidContact={setValidContact}
setEmailValid={setEmailValid}
correctField={correctField}
setCorrectField={setCorrectField}
checkPasswordValidation={checkPasswordValidation}
setPasswordValid={setPasswordValid}
passwordValid={passwordValid}
createUser={createUser}
content={content}
/>
)
}
export default SignUpContainer;
Фрагмент програмного коду, що слугує чистим компонентом, який
лише вертає JSX розмітку Реєстрації веб-сайту.
SignUp.tsx
import React from 'react';
import { Link } from 'react-router-dom';
import { Grid } from '@mui/material';
80
482 ЧДТУ 231947 – 01 12 01
import { CustomInput } from '../../../common/component/CustomInput/CustomInput';
import { Button } from '../../../common/component/CustomButton/Button';
import styles from './SignUp.module.scss';
export const SignUp = ({
checkEmailValidation, validContact, setValidContact, setEmailValid, emailValid,
createUser,
correctField, checkPasswordValidation, setPasswordValid, passwordValid, content
}: any) => {
return (
<Grid className={styles['signUp-content-modal']}>
<Grid className={styles['signUp-content-modal-data']}>
<Grid className={styles['signUp-content-modal-data-form']}>
<p>Name</p>
<CustomInput
placeholder="Please enter your Name"
onChange={(e: any) => setValidContact({ name: e.target.value, surname:
validContact.surname, email: validContact.email, password: validContact.password })}
/>
{validContact.name.length <= 0 && <p className={styles['signUp-content-
modal-data-form-text-field']}>{correctField}</p>}
</Grid>
<Grid className={styles['signUp-content-modal-data-form']}>
<p>Surname</p>
<CustomInput
placeholder="Please enter your Surname"
onChange={(e: any) => setValidContact({ name: validContact.name, surname:
e.target.value, email: validContact.email, password: validContact.password })}
/>
{validContact.surname.length <= 0 && <p className={styles['signUp-content-
modal-data-form-text-field']}>{correctField}</p>}
81
482 ЧДТУ 231947 – 01 12 01
</Grid>
<Grid className={styles['signUp-content-modal-data-form']}>
<p>Email</p>
<CustomInput
placeholder="Please enter your email address"
onChange={(e: any) => (
setValidContact({ name: validContact.name, surname: validContact.surname,
email: e.target.value, password: validContact.password }),
checkEmailValidation(setValidContact, setEmailValid, validContact)
)}
/>
{validContact.email.length <= 0 && <p className={styles['signUp-content-
modal-data-form-text-field']}>{correctField}</p>}
<p className={styles['signUp-content-modal-data-form-
email']}>{emailValid.content}</p>
</Grid>
<Grid className={styles['signUp-content-modal-data-form']}>
<p>Password</p>
<CustomInput
placeholder="Please enter your password"
onChange={(e: any) => (
setValidContact({ name: validContact.name, surname: validContact.surname,
email: validContact.email, password: e.target.value }),
checkPasswordValidation(setPasswordValid, validContact.password)
)}
/>
{validContact.password.length <= 0 && <p className={styles['signUp-content-
modal-data-form-text-field']}>{correctField}</p>}
<p className={styles['signUp-content-modal-data-form-
email']}>{passwordValid.content}</p>
</Grid>
</Grid>
82
482 ЧДТУ 231947 – 01 12 01
<Grid className={styles['signUp-content-modal-button']}>
<Button
onClick={() => createUser()}
content="Sign Up"
/>
</Grid>
{ content.length > 0 ? (
<Grid className={styles['signUp-content-modal-text']}>
<p>{content}</p>
<Link to="/login">Sign In</Link>
</Grid>
) : (
<Grid className={styles['signUp-content-modal-button']}>
<Link to="/login">You already have account?</Link>
</Grid>
)}
</Grid>
)
}
Фрагмент програмного коду, що слугує Menu сайту.
CoffeeMenu.tsx
import React from 'react';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { Grid } from '@mui/material';
import { CoffeeMenuItems } from './CoffeeMenuItems/CoffeeMenuItems';
import { CoffeeMenuSideBar } from './CoffeeMenuSideBar/CoffeeMenuSideBar';
import styles from './CoffeeMenu.module.scss';
83
482 ЧДТУ 231947 – 01 12 01
interface ICoffeeMenuProps {
type: string
}
interface IMapStateToProps {
coffeeMenu: IState
coffeeMenuItems: any
}
interface IState {
menu: IStateProps
categories: IStateCategoriesProps[]
counter: any
}
interface IStateCategoriesProps {
id: number
name: string
link: string
img: string
}
interface IStateProps {
coffeeLatteMenu: IStateToProps[]
coffeeMochaMenu: IStateToProps[]
coffeeCappuccinoMenu: IStateToProps[]
greenTeaMenu: IStateToProps[]
blackCoffeeMenu: IMapStateToProps[]
cupcakeMenu: IMapStateToProps[]
blackTeaMenu: IMapStateToProps[]
espressoMenu: IMapStateToProps[]
hotChocolateMenu: IMapStateToProps[]
}
84
482 ЧДТУ 231947 – 01 12 01
interface IStateToProps {
id: number
name: string
price: number
total: number
img: string
link: string
description: string
}
const CoffeeMenu: React.FC<ICoffeeMenuProps> = ({ type }) => {
const state = useSelector((state: IMapStateToProps) => state);
const { menu, categories } = state.coffeeMenu;
const { count } = state.coffeeMenuItems;
const items = [
{ itemType: '', title: '', data: categories },
{ itemType: 'latte', title: 'Latte', data: menu.coffeeLatteMenu },
{ itemType: 'cappuccino', title: 'Cappuccino', data: menu.coffeeCappuccinoMenu },
{ itemType: 'mocha', title: 'Mocha', data: menu.coffeeMochaMenu },
{ itemType: 'green-tea', title: 'Green Tea', data: menu.greenTeaMenu },
{ itemType: 'black-coffee', title: 'Black Coffee', data: menu.blackCoffeeMenu },
{ itemType: 'cupcake', title: 'Cupcake', data: menu.cupcakeMenu },
{ itemType: 'black-tea', title: 'Black Tea', data: menu.blackTeaMenu },
{ itemType: 'espresso', title: 'Espresso', data: menu.espressoMenu },
{ itemType: 'hot-chocolate', title: 'Hot Chocolate', data: menu.hotChocolateMenu },
]
const coffeeMenuItems = (sideBar: boolean) => {
return items.map(({ itemType, data, title }) => (
sideBar ? (
85
482 ЧДТУ 231947 – 01 12 01
<CoffeeMenuSideBar name={title} activeLink={type === itemType}
link={/menu/${itemType}} />
) : (
(type === itemType) && data.map(({ id, name, price, img, description, link, total }:
any) => (
<CoffeeMenuItems
id={id}
name={name}
price={price}
total={total}
menuPath={type === ''}
content='Show in Menu'
img={img}
description={description}
link={link}
count={count}
/>
))
)
))
}
return (
<Grid className={styles['coffee-menu']}>
<Grid className={styles['coffee-menu-header']}>
<Link to="/menu">Menu</Link>
</Grid>
<Grid className={styles['coffee-menu-body']}>
<Grid className={styles['coffee-menu-body-left']}>
<Grid className={styles['coffee-menu-body-left-title']}>Categories</Grid>
<Grid>
{coffeeMenuItems(true)}
</Grid>
86
482 ЧДТУ 231947 – 01 12 01
</Grid>
<hr className={styles['coffee-menu-body-line']} />
<Grid className={styles['coffee-menu-body-right']}>
{coffeeMenuItems(false)}
</Grid>
</Grid>
</Grid>
)
}
export default CoffeeMenu;
Фрагмент програмного коду, що слугує CSS файлом та відповідає за
дизайн сторінки Menu
CoffeeMenu.module.scss
.coffee-menu {
&-header {
display: flex;
align-items: center;
justify-content: center;
background-color: #f0eae4;
height: 120px;
font-weight: 100;
font-size: larger;
font-family: AppleMyungjo;
a {
text-decoration: none;
color: black;
&:hover {
opacity: 0.7;
87
482 ЧДТУ 231947 – 01 12 01
}
}
}
&-body {
display: flex;
justify-content: space-evenly;
&-left {
width: 25%;
text-align: center;
&-title {
margin-top: 15px;
font-size: x-large;
font-weight: lighter;
color: #b8a392;
text-align: center;
text-decoration: underline #b8a392;
}
.container {
display: flex;
justify-content: end;
margin: 5% 30% 0 30%;
width: 145px;
&-content {
display: flex;
justify-content: start;
width: 130px;
a {
88
482 ЧДТУ 231947 – 01 12 01
text-decoration: none;
text-align: center;
color: black;
opacity: 0.6;
font-weight: 300;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
&:hover {
opacity: 1;
color: #b8a392;
cursor: pointer;
}
}
&-active-link {
color: #b8a392 !important;
margin-left: 5px;
zoom: 1.1;
}
}
}
}
&-line {
display: inline;
margin: 0 40px 0 10px;
border-left: 1px solid silver;
opacity: 0.4;
}
&-right {
display: flex;
89
482 ЧДТУ 231947 – 01 12 01
flex-wrap: wrap;
width: 75%;
margin: 0 5% 0 5%;
}
}
}
Фрагмент програмного коду, що відповідає за створення store сайту із
redux з підключенням reducers.
createStore.ts
import { combineReducers, createStore } from 'redux';
import { HomePageReducer } from './HomePageReducer';
import { SignStatusReducer } from './SignStatusReducer';
import { CoffeeMenuReducer } from './CoffeeMenuReducer';
import { FooterReducer } from './FooterReducer';
import { CoffeeMenuItemsReducer } from './CoffeeMenuItemsReducer';
let reducers = combineReducers({
homePage: HomePageReducer,
signStatus: SignStatusReducer,
coffeeMenu : CoffeeMenuReducer,
footer: FooterReducer,
coffeeMenuItems: CoffeeMenuItemsReducer,
})
const store = createStore(reducers);
export default store;
Фрагмент програмного коду, що є Reducer та відповідає за
функціональні можливості Menu та ShoppingCart сайту.
90
482 ЧДТУ 231947 – 01 12 01
CoffeeMenuItemsReducer.ts
import { ADD_TO_CART, DECREMENT, DELETE_ITEM, INCREMENT,
REMOVE_CART_ITEMS } from './actions/counterActions';
const initialState = {
count: 0,
// @ts-ignore
cart: JSON.parse(localStorage.getItem('cartItem')) || [],
}
const addItemToCart = (state: any, item?: any) => {
const { count, cart } = state;
if (count) {
for (let i = 1; i <= count; i++) {
cart.push(item)
localStorage.setItem('cartItem', JSON.stringify([...cart]))
}
} else {
cart.push(item)
localStorage.setItem('cartItem', JSON.stringify([...cart]))
}
return {
...state,
count: 0
}
}
const deleteItem = (state: any, itemId: number, itemsStatus: boolean, item?: any ) => {
const { cart } = state;
if (itemsStatus) {
const getCommonItems = cart.filter((el: any) => el.name === item.name)
cart.map((el: any, id: number) => el.name === item.name ? (
91
482 ЧДТУ 231947 – 01 12 01
cart.splice(id, getCommonItems.length),
localStorage.setItem('cartItem', JSON.stringify([...cart]))
) : false)
} else {
cart.splice(itemId, 1)
localStorage.setItem('cartItem', JSON.stringify([...cart]))
}
return {
...state
}
}
const removeCartItems = (state: any) => {
const { cart } = state;
if (cart.length) {
cart.splice(0, cart.length);
localStorage.setItem('cartItem', JSON.stringify([...cart]))
}
return {
...state
}
}
export const CoffeeMenuItemsReducer = (state = initialState, action: any) => {
switch (action.type) {
case INCREMENT:
return {
...state,
count: action.payload
};
case DECREMENT:
return {
...state,
92
482 ЧДТУ 231947 – 01 12 01
count: action.payload
};
case ADD_TO_CART:
return addItemToCart(state, action.payload)
case DELETE_ITEM:
return deleteItem(state, action.payload.itemId, action.payload.itemsStatus,
action.payload.item)
case REMOVE_CART_ITEMS:
return removeCartItems(state)
default:
return state
}
}
Фрагмент програмного коду, що є Reducer сайту та відповідає за
функціональні можливості SignIn та SignUp сайту.
SignStatusReducer.ts
import { SIGN_IN, SIGN_UP, LOG_OUT } from './actions/signActions';
const initialState = {
// @ts-ignore
userLog: JSON.parse(localStorage.getItem('userLog')) [],
userLogStatus: false,
userLogError: {
email: {
errorMessage: '',
errorStatus: false,
},
password: {
errorMessage: '',
errorStatus: false,
}
93
482 ЧДТУ 231947 – 01 12 01
},
content: '',
// @ts-ignore
register: JSON.parse(localStorage.getItem('userData')) []
}
const createUser = (state: any, userData: any) => {
const { register } = state;
if (register.length <= 0) {
register.push(userData)
localStorage.setItem('userData', JSON.stringify([...register]))
state.content = '';
}
if (!register.find((el: any) => el.email === userData.email)) {
register.push(userData)
localStorage.setItem('userData', JSON.stringify([...register]))
state.content = '';
} else {
state.content = 'This account is registered!';
}
return {
...state,
}
}
const signIn = (state: any, userData: any) => {
const { register, userLog } = state;
if (register.length <= 0) {
state.userLogError.email.errorMessage = 'This email does not exist!';
state.userLogError.email.errorStatus = true;
94
482 ЧДТУ 231947 – 01 12 01
state.userLogError.password.errorMessage = 'This password is incorrect!';
state.userLogError.password.errorStatus = true;
} else {
state.userLogError.email.errorMessage = '';
state.userLogError.email.errorStatus = false;
state.userLogError.password.errorMessage = '';
state.userLogError.password.errorStatus = false;
}
register.map((el: any) => {
if ((el.email === userData.email) && (el.password === userData.password) &&
(userLog.length < 1)) {
state.content = ''
state.userLogStatus = true;
userLog.push({
name: el.name,
surname: el.surname,
email: el.email,
password: el.password,
})
localStorage.setItem('userLog', JSON.stringify([...userLog]))
}
if (el.email !== userData.email) {
state.userLogError.email.errorMessage = 'This email does not exist!';
state.userLogError.email.errorStatus = true;
state.userLogStatus = false;
}
if (el.password !== userData.password) {
state.userLogError.password.errorMessage = 'This password is incorrect!';
state.userLogError.password.errorStatus = true;
state.userLogStatus = false;
}
95
482 ЧДТУ 231947 – 01 12 01
})
return {
...state,
}
}
const logOut = (state: any, userData: any) => {
userData.splice(0, 1)
localStorage.setItem('userLog', JSON.stringify([...userData]))
state.userLogStatus = false;
return {
...state,
}
}
export const SignStatusReducer = (state = initialState, action: any) => {
switch (action.type) {
case SIGN_UP:
return createUser(state, action.payload.userData)
case SIGN_IN:
return signIn(state, action.payload.userData)
case LOG_OUT:
return logOut(state, action.payload)
default:
return state
}
}