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/9407| Title: | Інтернет магазин техніки «TechMol» |
| Authors: | СИСОЄНКО, Світлана МОЛЧАН, Ігор |
| Keywords: | ІНТЕРНЕТ МАГАЗИН;БРАУЗЕР;REACTJS;REACTROUTER- DOM;REDUX;MODULECSS |
| Issue Date: | 2022 |
| Abstract: | Метою даної кваліфікаційної роботи для отримання першого (бакалаврського) рівня вищої освіти є створення інтернет магазину для покупок техніки на основі ReactJS. Практична цінність проведеної роботи полягає у створенні інтернет магазину для покупок техніки, що дозволить швидко та легко орієнутуватись у ассортименті магазину, купувати та оплачувати товар. Методика проведеної роботи полягала у пошуку рішень для побудови архітектури сайту, яка забезпечить його гнучкість, програмну сумісність та масштабованість, а також рішень для реалізації його функціональних можливостей та створення зручного інтерфейсу користувача. Розроблений додаток створений за допомогою ReactJS з використанням npm пакетівReact-router-dom, Reduxта Module CSS. Інтернет магазин підтримуєтьсяусіма браузерами та має адаптований дизайн, що дозволяє користуватись пристроям з різною роздільною здатністю екрану. Базову архітектуру було побудовано на основі загальноприйнятих шаблонів проектування. Загальний обсяг роботи становить 81 сторінок. Пояснювальна записка містить 26 рисунків та 3 додатки. Для виконання роботи використано 20 літературних джерел. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/9407 |
| Appears in Collections: | 123 Комп’ютерна інженерія (Комп'ютерні системи та мережі) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| 1_ТИТУЛКА_Молчан_Друк-merged.pdf Restricted Access | 2.76 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНОЇ БЕЗПЕКИ ТА КОМП’ЮТЕРНОЇ ІНЖЕНЕРІЇ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему:
«Інтернет магазин техніки «TechMol»»
ЧДТУ.221827.005 ПЗ
Виконав: студент 4 курсу, групи КМ-185
спеціальності 123 – «Комп’ютерна інженерія»
за освітньою програмою – «Комп’ютерні системи та
мережі»
Ігор МОЛЧАН
Керівник
к.т.н. Світлана СИСОЄНКО
Рецензент
комерційний директор ТОВ «Техпродсервіс»
Владислав ЧЕРЕДНІЧЕНКО
«ЗАХИСТ ДОЗВОЛЯЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор ______ Володимир РУДНИЦЬКИЙ
Черкаси 2022 року
Форма № Н-9.01
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет: інформаційних технологій і систем
Кафедра: інформаційної безпеки та комп’ютерної інженерії
Освітньо-кваліфікаційний рівень: Бакалавр
Спеціальність 123 – Комп’ютерна інженерія
Освітня програма Комп’ютерні системи та мережі
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор ________ Володимир РУДНИЦЬКИЙ
«11» лютого 2022 року
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Молчану Ігорю Валерійовичу
(прізвище, ім‘я, по батькові)
1. Тема роботи: Інтернет магазин техніки «TechMol»
Керівник роботи: к.т.н., Сисоєнко Світлана Володимирівна
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «07» лютого 2022 р. № 45/04
2. Строк подання студентом роботи: 31.05.2022 р.
3. Вихідні дані до роботи:
Мова програмування: React.js, Node.js; система управління базами даних: MySQL; мова таблиці
стилів: CSS. Функціональність магазину: перегляд товару, (зокрема опис, зображення та
вартість), розбиття товарів на категорії, оформлення та оплати замовлення, пошук по
каталогу товарів, сортування товарів за групами.
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
1. Аргументація вибору тематики
2. Аналіз існуючих рішень та обґрунтування вибору принципу побудови системи
3. Інсталяція та налаштування системи
4. Проектування UML – діаграм
В5и. сновки
Додатки
Список використаних джерел
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів):
1. Специфікація
2. Текст програми
3. Інструкція користувача
6. Консультанти розділів роботи:
Розділ Прізвище, ініціали Підпис, дата
консультанта завдання видав завдання прийняв
7. Дата видачі завдання: 10 лютого 2022 року
КАЛЕНДАРНИЙ ПЛАН
Термін
№ з/п Назва етапів роботи виконання Примітка
етапів роботи
1 Отримання завдання 10.02 – 16.02 виконано
2 Збір матеріалу 17.03 – 1.04 виконано
3 Обробка матеріалу 02.04 – 13.04 виконано
4 Вибір програмного забезпечення та його виконано
обґрунтування 14.04 – 21.04
5 Створення бази даних інформаційної системи 22.04 – 06.05 виконано
6 Розробка інтерфейсу програми інформаційної 07.05 – 07.05 виконано
системи
7 Оформлення пояснювальної записки 08.05 – 20.05 виконано
8 Оформлення додатків 21.05 – 30.05 виконано
9 Подання роботи на відгук та рецензування 31.05.22 виконано
10 Захист кваліфікаційної роботи 07.06.22
Студент ____________________________ Ігор МОЛЧАН
(підпис)
Керівник роботи ____________________________ Світлана СИСОЄНКО
(підпис)
АНОТАЦІЯ
Метою даної кваліфікаційної роботи для отримання першого
(бакалаврського) рівня вищої освіти є створення інтернет магазину для покупок
техніки на основі ReactJS.
Практична цінність проведеної роботи полягає у створенні інтернет
магазину для покупок техніки, що дозволить швидко та легко орієнутуватись у
ассортименті магазину, купувати та оплачувати товар.
Методика проведеної роботи полягала у пошуку рішень для побудови
архітектури сайту, яка забезпечить його гнучкість, програмну сумісність та
масштабованість, а також рішень для реалізації його функціональних
можливостей та створення зручного інтерфейсу користувача.
Розроблений додаток створений за допомогою ReactJS з використанням
npm пакетівReact-router-dom, Reduxта Module CSS. Інтернет магазин
підтримуєтьсяусіма браузерами та має адаптований дизайн, що дозволяє
користуватись пристроям з різною роздільною здатністю екрану. Базову
архітектурубуло побудовано на основі загальноприйнятих шаблонів
проектування.
Загальний обсяг роботи становить 81 сторінок. Пояснювальна записка
містить 26 рисунків та 3 додатки. Для виконання роботи використано
20 літературних джерел.
Ключові слова: ІНТЕРНЕТ МАГАЗИН, БРАУЗЕР, REACTJS, REACT-
ROUTER-DOM, REDUX, MODULECSS
ABSTRACT
The purpose of this qualification work to obtain the first (bachelor's) level of
higher education is to create an online store for the purchase of equipment based on
ReactJS.
The practical value of this work is to create an online store for the purchase of
equipment, which will quickly and easily navigate the range of the store, buy and pay
for goods.
The methodology of the work was to find solutions to build the architecture of
the site, which will provide its flexibility, software compatibility and scalability, as
well as solutions to implement its functionality and create a user-friendly interface.
The developed application was created using ReactJS using npm packages
React-router-dom, Redux and Module CSS. The online store is supported by all
browsers and has an adapted design that allows you to use devices with different
screen resolutions. The basic architecture was built on the basis of generally accepted
design templates.
The total volume of the work is 81 pages. The explanatory note contains
26 figures and 3 appendices. 20 literature sources were used to perform the work.
Keywords: ONLINE STORE, BROWSER, REACTJS, REACT-ROUTER-
DOM, REDUX, MODULECSS
ЗМІСТ
ВСТУП…………………………………………………………………….... 4
1 АРГУМЕНТАЦІЯ ВИБОРУ ТЕМАТИКИ…………………………… 5
1.1 Поняття web-сайт………………………………………………… 5
1.1.1 Типи веб-сайтів…………………………………………….. 6
1.1.2 Робота веб-сайту…................................................................ 7
1.1.3 Програмне забезпечення для веб-сайтів, домен і хостинг
для веб-сайтів…………………………………………………….. 8
1.1.4 Статичні та динамічні веб-сайти………………………….. 8
1.2 Веб-сайт для бізнесу...………….………………………………... 9
1.3 Переваги та недоліки сайтів…………………………………… 10
2 АНАЛІЗ ІСНУЮЧИХ РІШЕНЬ ТА ОБГРУНТУВАННЯ ВИБОРУ
ПРИНЦИПУ ПОБУДОВИ СИСТЕМИ……………………………….. 15
2.1. Огляд існуючих аналогів………………….................................... 15
2.1.1 Інтернет-магазин q-techno.cоm.ua........................................ 15
2.1.2 Інтернет-магазин www.mоyо.ua……….………..……….... 18
2.1.3 Інтернет-магазин kvshоp.cоm.ua….………..…………….... 22
2.2 Односторінковий застосунок......................................................... 24
2.2.1 Переваги Sіngle Page Applicatiоn………………………….. 25
2.2.2 Чому односторінкові програми та системи керування
вмістом історично були складними……….……………………. 28
2.2.3 Аналіз фреймворків для Single Page Applicatiоn ………... 30
2.2.4SinglePageApplicatiоnдляпроекту………………………….. 33
2.2.5 Фактори, які слід врахувати при виборі SPA
фреймворку……………………………………………………….. 34
ЧДТУ.221827.005 ПЗ
Змн. Арк. № докум. Підпис Дата
РозрКобив .Молчан І.В.
Керівник Сисоєнко С.В. Інтернет магазин Літ. Лист Листів
Рецеа
2 81
нзент ЧередніченкоВ.В. техніки «TechMol»
Н.Кофнтроль Гресько С.О. Пояснювальна записка Кафедра ІБ та КІ
Затвеердив Рудницький В.М. гр. КМ-185
д
р
а
К
К
-
0
6 .
2.3 Обгрунтування вибору фреймворку для SPA………………….. 36
3 ІНСТАЛЯЦІЯ ТА НАЛАШТУВАННЯ СИСТЕМИ…………….….... 41
3.1 Інсталяція та налаштування проекту на ReactJS ….…………... 41
3.2 Використання nрm пакетів……………………………….……... 46
4 ПРОЕКТУВАННЯ UML – ДІАГРАМ………………………………… 48
4.1 Побудова діаграми прецедентів…..…………………………..... 48
4.2 Побудова діаграми послідовностей…….…………………….... 49
4.3 Побудова діаграми кооперацій………..………………………... 52
ВИСНОВКИ……………………………………………………..………….. 53
ПЕРЕЛІК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ……..………….. 54
ДОДАТКИ:
А – 482.ЧДТУ.21827-01 Інтернет магазин техніки «TechMоl»
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ………………………………….. 80
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 3
ВСТУП
Інтернет – це всесвітня комп’ютерна мережа [1]. Процес з’єднання двох
або більше комп’ютерів за допомогою кабелю або модему відомий як
Інтернет. Інтернет є єдиним засобом обміну даними через комп'ютерну
мережу. Це може бути дуже легко доступним. Щоб отримати необхідну
інформацію, просто знайдіть її в Google, якщо маєте підключення до
Інтернету. Інтернет відіграє важливу роль усфері торгівлі та комерції. В
даний час електронна комерція стала дуже популярною в усьому світі. Тому
що кожен може купити все що завгодно в Інтернеті, не відвідуючи ринки чи
торгові центри. Це також відіграє важливу роль у сфері освіти, оскільки
студенти можуть легко отримати необхідну інформацію через Інтернет.
Інтернет також має деякі недоліки. Наше молоде покоління може легко
отримати порнографічні зображення та відео через Інтернет. В результаті
вони стають залежними від Інтернету. Тому потрібно знати обмеженість
використання Інтернету, щоб отримати від нього користь.
Останні роки були дійсно складними для усього світу, а особливо для
нашої країни, в якій зараз йде війна. Однією з перших найглобальніших
подій стала пандемія COVІD-19.З приходом пандемії, в країнах ввели
карантин та обмеження, від яких постраждало багато сфер діяльності, але
інтернет-магазини отримали від цього найбільше вигоди, так як потреба в
них стала такою, як ніколи раніше. Щорічно кількість інтернет-магазинів
збільшується, так як це вигідно і зручно для покупця, не кажучи про економії
бюджету і часу.
Метою роботи є створення Інтернет-магазину для продажу
повсякденної техніки через мережу Інтернет. Основою цього додатку є
aвтомaтизація процесу замовлення та aвтомaтизація процесу кaталогізaції
товaру. Додаток нaдaсть змогу швидко оформити заявку на придбання товару
та відповідно до зaмовлення, користувач має змогу обрaти, як йому внести
плaту за товар: зa допомогою кaртки aбо при отримaнні.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 4
1 АРГУМЕНТАЦІЯ ВИБОРУ ТЕМАТИКИ
1.1 Поняття web-сайт
Як випливає з назви, веб-сайт відноситься до «сайту» в «мережі», де ми
можемо розмістити інформацію про себе, свій бізнес або будь-яку іншу тему,
і користувачі можуть отримати до неї доступ через Інтернет [2]. Інколи веб-
сайти називають веб-сторінками, це однозначно неправильно, оскільки веб-
сайт складається з декількох веб-сторінок.
Щоб краще зрозуміти це, ось аналогія! Так само, як фізичний «сайт» на
землі, де ми будуємо будинок і живемо, ми створюємо веб-сайт в Інтернеті, і
наша інформація живе на ньому.
І, як і адреса нашого будинку, наш веб-сайт також матиме унікальну
адресу під назвою «веб-адреса». За допомогою веб-адреси користувачі
Інтернету можуть легко знайти ваш веб-сайт та отримати доступ до
інформації на ньому.
Технічно веб-сайт – це сукупність взаємопов’язаних сторінок в
Інтернеті, згрупованих під унікальним ім’ям або адресою в Інтернеті.
Ці сторінки, відомі як веб-сторінки, містять інформацію чи послуги
компанії чи організації. Інформація може бути в різних форматах, як текст,
зображення, відео, аудіо та анімація, а послуги можуть бути схожими на
купівлю або продаж продуктів, завантаження цифрових продуктів тощо.
Як користувачеві, для доступу до веб-сайту нам просто потрібен
комп’ютер, смартфон або будь-який пристрій із веб-браузером та
підключенням до Інтернету.
Нам потрібно ввести веб-адресу в адресному рядку веб-браузера
нашого пристрою. Після цьогоми перейдемо на головну сторінку, яка
називається домашньою сторінкою цього сайту.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 5
1.1.1 Типи веб-сайтів
Ось деякі з популярних типів веб-сайтів, а також для чого вони
використовуються:
Веб-сайт блогу – надайте інформацію на різні теми. Приклад:
www.sitesaga.com (технологічний блог про створення веб-сайтів).
Розважальний веб-сайт – дозволяє дивитися фільми, відео,
слухати пісні, грати в ігри тощо. Приклад: www.youtube.com
(безкоштовні відео різних типів, наприклад музичні відео,
фільми, комедійні шоу тощо)
Портал новин – інформує читачів про останні новини про
світовий сценарій. Наприклад, www.bcc.com (сайт новин із
новинами про здоров’я, світову політику, спорт, культуру,
майбутнє тощо)
Сайт для членства – пропонує преміальний вміст зареєстрованим
або платним учасникам. Приклад: www.netflix.com (сайт
трансляції відео та фільмів, де доступ до них мають лише платні
користувачі).
Сайт соціальних медіа – дозволяє користувачам взаємодіяти та
взаємодіяти з іншими користувачами. Приклад:
www.facebook.com (сайт соціальної мережі, де люди можуть
спілкуватися, спілкуватися та ділитися ідеями один з одним).
Освітній веб-сайт – веб-сайти шкіл, університетів або незалежних
академічних організацій, які надають інформацію про різні
доступні курси або пропонують навчальні матеріали в Інтернеті.
Приклад: www.yale.edc (веб-сайт Єльського університету, який
надає інформацію про різні програми бакалаврату та
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 6
магістратури, процедуру вступу, а також пропонує деякі онлайн-
курси).
Веб-сайт уряду – надає різні типи інформації та послуг і
заощаджує багато часу. Приклад: www.CSA.gov (офіційний веб-
сайт уряду Сполучених Штатів, який містить інформацію про
різні державні програми, такі як охорона здоров’я, освіта,
паспорти тощо).
Сайт пошукової системи – допоможіть користувачам шукати речі
в Інтернеті та отримувати корисні результати. Приклад:
www.google.com (найпопулярніший веб-сайт пошукової
системи).
1.1.2 Робота веб-сайту
Простіше кажучи, веб-сайт створюється за допомогою певного
програмного забезпечення або набору коду. Але він працює лише поверх
потужних винаходів. Це технології, які роблять вміст, створений на якомусь
віддаленому комп’ютері, доступним для людей з усього світу.
Перш за все, давайте коротко поговоримо про Інтернет та World Wide
Web, які створюють основу для веб-сайтів. Зазвичай люди взаємозамінні ці
терміни, але це різні технології.
Інтернет – це технологія або структура, яка з’єднує комп’ютери по
всьому світу та дозволяє обмінюватися інформацією.
World Wide Web (Web) – це система, яка дозволяє обмінюватися
інформацією за допомогою Інтернету.
Іншими словами, Інтернет — це величезна колекція цифрових
документів, веб-сайтів, веб-сторінок, медіа тощо.
Точніше, Web є одним із багатьох способів обміну інформацією через
Інтернет. Інші включають електронну пошту, миттєві повідомлення,
протокол передачі файлів (FTP) тощо.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 7
1.1.3 Програмне забезпечення для веб-сайтів, домен і хостинг для
веб-сайтів
Наступний набір технологій:
Програмне забезпечення для веб-сайтів/код
Доменне ім'я
Веб хостинг
Перш за все, веб-сайт складається з набору коду або мов
програмування. Найпоширенішими мовами програмування є HTML (мова
розмітки гіпертексту), CSS (каскадні таблицістилів), PHP (препроцесор
гіпертексту) тощо.
Однак більшість веб-сайтів сьогодністворюються за допомогою
програмного забезпечення CMS, такого як WordPress, Joomla, або навіть
повністю розміщених конструкторів веб-сайтів, таких як Wix або Jimdo.
Цi платформи також використовують кодування, але вам не
обов’язково знати кодування, щоб використовувати їх. Вони забезпечують
зручний інтерфейс для тих, хто не кодує, і дозволяють створювати веб-сайти
для всіх.
Далі йдуть доменне ім’я та веб-хостинг. Це 2 найважливішіречі, які вам
потрібні для створення веб-сайту. Веб-сайт працює, коли ці двіречі
працюють разом.
Простіше кажучи, доменне ім’я – це ім’я вашого веб-сайту. Щоб
отримати унікальну веб-адресу, вам потрібно зареєструвати ім’я свого веб-
сайту в компанії з реєстрації доменів.
1.1.4 Статичні та динамічні веб-сайти
Статичні веб-сайти – це веб-сайти з фіксованою інформацією та
однаковим вмістом для відображення. Тоді як динамічні веб-сайти – це ті, що
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 8
мають можливість змінювати вміст веб-сторінки відповідно до взаємодії з
користувачем.
Динамічні веб-сайти можуть оновлювати веб-сторінки відповідно до
поведінки користувачів. Він здатний залучати користувачів до використання
бази даних. База даних дозволяє додавати та видаляти компоненти веб-
сторінки.
Статичні веб-сайти містять кілька фіксованих сторінок, які містять
лише інформацію, без інтерактивних компонентів. Прикладами статичних
веб-сайтів є веб-сайти-брошури, веб-сайти-портфоліо, інформаційні веб-
сайти тощо. В основному вони створені на основі базових мов кодування
HTML і CSS. Тоді як для динамічних веб-сайтів потрібні складніші мови
програмування, такі як PHP.
Однак ви можете легкостворювати статичні або динамічні веб-сайти,
використовуючи конструктори веб-сайтів, без необхідності писати код.
1.2 Веб-сайт для бізнесу?
Незалежно від масштабу вашого бізнесу, сьогодні дуже важливо мати
веб-сайт. Це само собою зрозуміло, більшість з них проводять он-лайн-
дослідження, перш ніж щось купувати.
Згідно зі статистикою покупок Thіnk wіth Google, 53% покупців
кажуть, що вони досліджують, перш ніж зробити покупку. Тепер
припустимо, що у вас немає веб-сайту. Тоді як люди дізнаються про вашу
продукцію?
Чому вам потрібен веб-сайт для вашого бізнесу:
Збільшення охоплення: ваш веб-сайт допомагає вашому продукту
охопити більше людей, які можуть бути вашим можливим
клієнтом.
Присутність в Інтернеті: це дозволяє вашим клієнтам знайти вас
у будь-який часі з будь-якого місця. І, перебуваючи в Інтернеті
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 9
щоразу, ви перестанете втрачати клієнтів через своїх
конкурентів.
Підвищує довіру: присутність вашого бізнесу в Інтернеті робить
ваш бізнес більш професійним. Це підвищує фактор довіри
ваших клієнтів.
Розширення ринку: оскільки ваш веб-сайт можна переглянути з
усього світу. Таким чином, ви можете зустріти своїх потенційних
клієнтів з різних куточків світу.
Економічність: наявність сайту електронної комерції може бути
економічно вигідною в порівнянні зі справжнім магазином. Це
скорочує експлуатаційні витрати, заробітну плату, комунальні
послуги тощо. Скорочення таких накладних витрат знизить ціни
на продукцію, а отже, збільшить продажі.
Взаємодія з клієнтами: вашим клієнтам легше зв’язатися з вами в
Інтернеті, задати запитання та залишити відгук. Спілкування з
користувачами допомагає покращити свої продукти. І це в
кінцевому підсумку збільшить ваші продажі.
1.3 Переваги та недоліки сайтів
Переваги:
Інформація
Інтернет містить мільйони веб-сайтів, присвячених різним темам.
Інформацію, пов’язану з навчанням, технікою чи підвищенням IQ, надається
веб-сайтом. Навіть деякі з цих веб-сайтів зосереджені на наданні покрокових
інструкцій щодо вирішення проблеми. Пошукові системи відображають усі
перераховані веб-сайти, щойно користувач введе відповідне ключове слово.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 10
Спілкування
Веб-сайт дозволяє спілкуватися між покупцем і продавцем. Більшість
продавців показують свою контактну інформацію або створюють контактну
форму, щоб полегшити спілкування. З метою спілкування веб-сайти
використовують такі режими, як відео конференції, чат або інші методи.
Цей вид комунікації вважається набагато дешевшим варіантом
порівняно з іншими традиційними методами. Компанії та деякі особи
віддають перевагу електронній пошті як більш захищеному засобу зв’язку.
Розваги
Веб-сайти також використовуються як форма розваги. На веб-сайті
доступні численні варіанти розваг, такі як ігри, музика, фільми. Деякі сервіси
є абсолютно безкоштовними, що не вимагає від користувача жодної копійки.
Крім цього, є також можливість заробити на індустрії розваг.
Користувачі можуть вести блог і завантажувати власні таланти. Таланти
включають співи, танці та інші розваги, де людям буде цікаво.
Банківська справа
Наразі банківські галузі також використовують веб-сайти, щоб клієнти
могли підключитися до їхньої служби. Навіть не приходячи до банку, клієнти
зможуть перевірити дані свого рахунку.
І ця послуга працює цілодобово. Тобто послуга доступна навіть тоді,
коли банк закритий. Банки могли негайно сповістити своїх клієнтів у
надзвичайній ситуації.
Маркетинг
Маркетинг на веб-сайтах може отримати користь як для запуску, так і
для вже створеного бізнесу. За допомогою веб-сайтів підприємства можуть
орієнтуватися на своїх потенційних клієнтів. Клієнти, зацікавлені у ваших
продуктах та послугах, можуть легко здійснювати транзакції. Однак
підприємства повинні переконатися, що їхні веб-сайти є зручними та добре
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 11
оптимізованими. Таким чином, клієнти можуть легко знайти потрібну
інформацію.
Реклама
Якщоу вас є веб-сайт, ви також можете розмістити рекламу та почати
заробляти. Існують різні рекламні служби, такі як GoogleAdSenseіMedia.net,
які пропонують рекламу для потенційних веб-сайтів. Крім того, така реклама
має тенденцію охоплювати клієнтів точніше, ніж інші оф-лайн методи
реклами.
Працевлаштування
Веб-сайт надає різноманітні можливості працевлаштування, незалежно
від того, чи може це бути позаштатна робота з дому або он-лайн. Наприклад,
компанії показують свої вакансії в Інтернеті, щоб можна було знайти
відповідних кандидатів.
Так само кандидатам легко знайти потрібну роботу, подавши заявку в
Інтернеті, а не шукати вакансій у газеті.
Недоліки:
Вартість
Веб-сайти не є абсолютно безкоштовною послугою. Для створення веб-
сайту потрібно найняти професіонала, який має оплачувати свою роботу.
Крім того, компанії повинні витрачати кошти на веб-хостинг і домен. Тепер
це не одноразовий платіж, користувачам потрібно поновлювати їх щороку.
Існують також інші непрямі витрати, такі як підключення до Інтернету
та комп’ютерна система, що може збільшити витрати.
Конфіденційність
Деякі веб-сайти вимагають особисту інформацію від користувача для
ринкових даних. Найчастіше ці дані використовуються хакерами з метою
крадіжки особистих даних та інших шахрайств. Наприклад, банківські веб-
сайти вимагають, щоб користувачі вводили конфіденційну інформацію, таку
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 12
як PІN-код безпеки, CVV та номер рахунку. Цю інформацію загрожує
крадіжка.
Соціалізація
Хоча веб-сайти допомагають налагоджувати зв’язок з людьми з усього
світу, те ж саме може відірвати вас від людей навколо вас. Користувачі, які
більше зосереджуються на веб-сайтах, вважають за краще спілкуватися в
чатів повідомленнях, а не спілкуватися віч-на-віч. Їм важко розмовляти з
людьми по-справжньому.
Тепер ця звичка шкідлива не тільки для користувача, але й для
суспільства, що його оточує, особливо для їх сім’ї. В ідеалі це ризик для
особистих відносин.
Залежність
Надмірне використання веб-сайту через певний період може призвести
до багатьох негативних наслідків для користувача. Зокрема, веб-сайти, які
рекламують такі розваги, як ігри, можуть викликати у користувача звикання.
Дослідження виявили, що в іграх виділяється гормон дофамін, який
викликає відчуття щастя. Через це відчуття несвідомо у гравців може
виникнути звикання, що вони не можуть вийти.
Незаконна діяльність
Веб-сайти також використовуються для незаконної діяльності. Частина
наданої інформації використовується для роботи з кібер злочинами. Навіть
інші небезпечні злочини, такі як тероризм та викрадення, здійснюються за
допомогою веб-сайту.
Крім того, проблеми конфіденційності виникають, якщо контакти,
надані веб-сайтом, надходять з інших джерел. Якщо від початкового
власника не буде отримано необхідних дозволів, це може призвести до
попереджень щодо авторських прав.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 13
Невідповідний вміст
Не весь вміст, розміщений в Інтернеті, підходить для всіх. Деякі вкрай
невідповідні матеріали, такі як порнографія та насильство, легко доступні на
веб-сайтах.
Зокрема, неповнолітні діти можуть ознайомлюватися з таким вмістом
без згоди батьків. Хоча на веб-сайтах встановлено вікове обмеження, будь-
хто може легко підробити свій вік, щоб отримати доступ до цього вмісту.
Спам
Веб-сайти також можна використовувати для розсилки спаму окремих
осіб. Зокрема, фальшиві сайти електронної комерції створюються
зловмисниками для обману грошей людей. Ці типи веб-сайтів рекламують
продукти, які ніколи не будуть доставлені клієнту. Інакше продукція буде
низької якості.
Щойно користувaч вводить свою особисту інформaцію для трaнзaкції,
його дaні збирaються, щоб вони могли використовувaтися для іншиx
шаxрaйств.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 14
2 АНАЛІЗ ІСНУЮЧИХ РІШЕНЬ ТА ОБГРУНТУВАННЯ ВИБОРУ
ПРИНЦИПУ ПОБУДОВИ СИСТЕМИ
2.1 Огляд існуючих аналогів
Огляд аналогів інтернет магазинів пов’язаних з торгівлею повсякденної
техніки є важливим пунктом в цій роботі. Метою роботи є порівняння усіх
вибраних веб магазинів, виявлення їх плюсів та мінусів.
Критерії оцінки інтернет-магазину:
- простота й зрозумілість сайту;
- асортимент;
- дизайн;
- реєстрація;
- інформативність.
2.1.1 Інтернет-магазин q-techno.com.ua
Інтернет магазин «Q-Techno» є одним з найпопулярніших веб
магазинів на території України. Серед інших схожих магазинів він
виділяється ассортиментом, представленим на сайті. Окрім самої техніки, ми
можемо побачити наступні категорії:
домашній текстиль;
товари для здоров’я;
Автотовари;
сантехніка;
меблі;
торгівельне обладнання;
товари для школи;
товари для дітей;
товари для спорту та відпочинку;
альтернативна енергетика.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 15
Дизайн виглядає доволі просто і зрозуміло (рисунок 2.1). Каталог
знаходиться у лівій частині сайту, а при наведенні на нього курсором
розкривається список всіх доступних категорій та при наведенні на одну з
них розкривається широкий асортимент товарів пов’язаних з цією категорією
(рисунок 2.2). У шапці сайтуми можемо знайти наступну інформацію:
Контакти, Гарантія, Доставка, Оплата, Допомога, Оформлення замовлення.
Також ми можемо побачити номера телефонів різних операторів, вхід до
особистого кабінету та можливість змінити мову. Домінантними кольорами
сайту є білий та синій кольори.
Рисунок 2.1— Головна сторінка інтернет-магазину «Q-Techno»
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 16
Рисунок 2.2— Структура каталогу інтернет-магазину «Q-Techno»
Кожний товар має стислий опис та інформації, яка там знаходиться
достатньо для ознайомлення. Сайт має коректне відображення інформації
при будь-яких розмірах екрану. Ми це можемо побачити на рисунку 2.3, де
відображення опису товару виглядає зрозуміло і без помилок.
Рисунок 2.3— Коректне відображення характеристик товару на сайті
«Q-Techno»
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 17
Вікно реестрації на сайті виглядає просто і зрозуміло, немає нічого
зайвого(рисунок 2.4).
Рисунок 2.4— Вікно реєстрації інтернет магазину «Q-Techno»
Після заповнення усіх полів, на Emaіl приходить повідомлення з
інформацією про ваш Логін та Пароль, у випадку якщо ви їх забудете. Також
там знаходиться опис всіх доступних функцій після входу у свій обліковий
запис.
Інтерфейс інтернет-магазину максимально простий і зрозумілий, під
час вивчення даного сайту питань ніяких не виникло.
2.1.2 Інтернет-магазин www.moyo.ua
Наступним інтернет-магазином повсякденної техніки за популярністю
в Україні – «Moyo». Вигляд головної сторінки зображений на рисунку 2.5.
Шапка сайту має наступну інформацію: Блог, Акції, Магазини, Оплата і
доставка, Що з моїм замовленням?, MOYO обмін. Також там можна знайти
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 18
функцію для зміни мови, спосіб зв’язатися за допомогою номера телефона та
перелік міст, в яких є магазин MOYO. Нижче відображено Каталог з
категоріями товарів, пошук та Вхід у свій обліковий запис(рисунок 2.7).
Рисунок 2.5— Головна сторінка інтернет-магазину «Moyo»
При натисканні на кнопку Каталог товарів відкривається модальне
вікно, яке має простий дизайн та лаконічну структуру (рисунок 2.6).
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 19
Рисунок 2.6— Структура калогу інтернет-магазину «Moyo»
Асортимент інтернет-магазину має досить широкий вибір і деякі
нетипові категорії, такі як: Дитячий світ, Гральна зона та Товари для дому та
авто. Кожний товар має стислий опис, характеристики та багато загальної
інформації з можливостями, якої достатньо для ознайомлення.
Реєстрація зроблена у вигляді модального вікна (рисунок 2.7).
Користувач має можливість Увійти або зареєструватись за допомогою
акаунту Google та Facebook, що дуже спрощує реєстрацію на даному сайті.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 20
Рисунок 2.7— Сторінка для реєстрації в інтернет-магазині «Moyo»
Після заповнення обов’язкових рядків, та реєстрації, нам відправляють
СМС повідомлення з кодом для підтвердження нашої особистості. Після
цього ми маємо змогу перейти до особистого кабінету.
Єдиним недоліком цього сайту є багато реклами, яка часто з’являється
на екрані і заважає користувачу проглядати товари.
Інтерфейс інтернет-магазину максимально простий і зрозумілий, під
час вивчення даного сайту питань ніяких не виникло.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 21
2.1.3 Інтернет-магазин kvshop.com.ua
Третім за популярністю інтернет-магазином повсякденної техніки є
«Комп’ютерний всесвіт». Головна сторінка зображена на рисунку 2.8.
Дизайн виконаний у лаконічному стилі, де основними кольорами є
білий та темно-сірий. Шапка сайту має схожий вигляд з інтернет-магазином
«Moyo». Каталог відображений як у шапці сайту, так і з лівого боку. При
наведенні курсору на будь-яку категорію, відкривається структура цієї
категорії (рисунок 2.9).
Рисунок 2.8— Головна сторінка інтернем-магазину «Комп’ютерний всесвіт»
Рисунок 2.9—Структура каталогу інтернет-магазину «Комп’ютерний
всесвіт»
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 22
Кожний товар має стислий опис, інформації про товар та відгуки чого
достатньо для ознайомлення.
Реєстрація виконана у вигляді модального вікна (рисунок 2.10).
Рисунок 2.10— Вікно реєстрації інтернет-магазину «Комп’ютерний всесвіт»
Після заповнення всіх обов’язкових полів для реєстрації нас одразу
перекидає на головну сторінку сайту. Недоліком цього є те, що користувач
може зареєструватись під чужою поштою та номером телефону.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 23
Отже головним недоліком цього сайту є те, що при реєстрації
користувач не має змоги підтвердити свою особистість, тим самим
зловмисники можуть увійти в систему використовуючи чужу конфіденційну
інформацію.
2.2 Односторінковий застосунок
Односторінковий додаток (SPA) — це одна сторінка (звідси й назва), де
багато інформації залишається незмінною, і лише кілька частин потрібно
оновлювати за раз [3].
Наприклад, коли ви переглядаєте свою електронну пошту, ви помітите,
що під час навігації мало змінюється — бічна панель і заголовок
залишаються недоторканими, коли ви переглядаєте папку «Вхідні».
SPA надсилає лише те, що вам потрібно, з кожним клацанням миші, а
ваш браузер відправляє вам цю інформацію. Це відрізняється від
традиційного завантаження сторінки, коли сервер повторно відтворює повну
сторінку з кожним зробленим вами кліком і надсилає її у ваш браузер [4].
Цей покроковий метод на стороні клієнта значно пришвидшує час
завантаження для користувачів і робить кількість інформації, яку сервер має
надіслати, значно меншою та набагато більш економічною. Безпрограшний
варіант
Як працює SinglePageApplication (SPA)
Односторінковий додаток — це веб-додаток або веб-сайт, який
взаємодіє з користувачем шляхом динамічного переписування поточної
сторінки, а не завантаження цілих нових сторінок із сервера.
Цей підхід позбавляє користувацького досвіду переривання між
послідовними сторінками, завдяки чому програма веде себе більше як
настільна програма.
На більшості веб-сайтів багато повторюваного вмісту. Деякі з них
залишаються незмінними незалежно від того, куди йде користувач
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 24
(заголовки, колонтитули, логотипи, панель навігації тощо), деякі з них
постійні лише в певному розділі (смуги фільтрів, банери), і є багато
повторюваних макетів і шаблонів (блоги, самообслуговування, вищезгадане
налаштування пошти Google).
Односторінкові програми використовують переваги цього повторення.
Скажімо, ваш погляд на веб-сайт – це малюнок будинку та дерева.
Традиційні багатосторінкові веб-сайти малюють для вас всю картину на
сервері та надсилають її у ваш браузер.
SPA надають вам посібники з розфарбовування за номерами для сайту,
включаючи повторювані посібники, які ви, ймовірно, використовуватимете, а
потім надають потрібну фарбу (дані та вміст), щоб заповнити шаблон.
У будь-якому випадку ви бачите те саме дерево, але швидкість SPA
з’являється, коли ви запитуєте новий вміст — наприклад, натискаєте «Далі»,
фільтруєте результати, відкриваєте лист або, у нашому випадку, просите
переглянути інше дерево.
На традиційному веб-сайті ваш запит на нове дерево змусить сервер
перефарбувати всю картинку та надіслати її назад
З односторінковим додатком сервер каже «Привіт, у мене є для вас
нове дерево, але у вас вже є будинок, тому просто залиште його таким же», а
потім надсилає вам оновлені інструкції щодо нового дерева та фарби зробити
це.
Передаючи роботу з фарбування (відображення сторінки) із сервера
клієнту (вам), сторінку можна динамічно переписати, замість того, щоб
перезавантажувати її повністю. Це робить речі набагато швидшими.
2.2.1Переваги Single Page Application
Рішення SPA мають багато переваг, зокрема покращення
продуктивності додатків, узгодженість, скорочення часу розробки та витрати
на інфраструктуру. Відокремлюючи презентацію від вмісту та даних,
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 25
команди розробників можуть працювати з різною швидкістю, залишаючись
інтегрованими для загального рішення. SPA добре підходить для створення
адаптивного дизайну для мобільних пристроїв, комп’ютерів і планшетів.
Одноразове завантаження файлів HTML, CSS, JS
Односторінковий додаток, після початкового завантаження сторінки,
вже має на самому початку HTML, а сервер вам його більше не надсилає.
Сервер надсилає вам сторінку оболонки, а ваш браузер відображає
інтерфейс користувача (UI).
Потім, коли ви клацаєте мишкою, SPA надсилає запити на дані та
розмітку, сервер повертає необхідну сировину, а ваш браузер приймає це й
відтворює оновлений інтерфейс користувача — змінюючи фрагменти без
необхідності оновлювати всю сторінку[5]. Ця швидка взаємозамінність
робить SPA неймовірно корисними на сторінках із високою навігацією та
використанням повторюваних шаблонів.
Немає додаткових запитів до сервера
Оскільки серверу не потрібно витрачати часі енергію на повне
використання, SPA зменшують вплив на ваші сервери в цілому: це означає,
що ви можете заощадити гроші, використовуючи менше серверів для того ж
обсягу трафіку [6].
Швидкий і чуйний інтерфейс
Поряд із швидшим часом продуктивності, описаним вище, SPA також
дозволяють розробникам створювати інтерфейс набагато швидше. Це
пов’язано з відокремленою архітектурою SPA або розділенням внутрішніх
служб інтерфейсного дисплея [7].
Багато важливих для бізнесу функціональних можливостей майже не
змінюються у серверній частині. Хоча те, як ваші клієнти входять в систему,
реєструються, купують та відстежують замовлення, може час від часу
змінювати свій «вигляд» або презентацію, логіка та оркестровка даних, що
стоять за цим, досить постійні — і ви не хочете ризикувати зіпсувати це.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 26
Аналогічно, ваш необроблений вміст і дані можуть залишитися
незмінними, але спосіб, який ви хочете відобразити, відрізняється.
Відокремлюючи цю внутрішню логіку та дані від того, як вони представлені,
ви перетворюєте їх на «сервіс», і розробники можуть створити багато різних
зовнішніх способів показу та використання цієї служби.
Завдяки відокремленому налаштуванню розробники можуть
розгортати, створювати та експериментувати з інтерфейсом незалежно від
базової внутрішньої технології. Вони розробляють, як вони хочуть, щоб
користувацький досвід виглядав і відчував, а потім залучають вміст, дані та
функціональність за допомогою цих служб.
Це виконується за допомогою API, які є стандартним набором правил
між додатками щодо того, як вони будуть структурувати, обмінюватися та
повторно збирати дані [8].
Це налаштування API дає змогу розробникам швидко працювати над
інтерфейсом користувача без ризику для критичних бізнес-технологій.
Покращений досвід користувача
Оскільки все більше і більше функціональних можливостей будуються
як модульні служби (архітектура мікро сервісів), які можна оновлювати
незалежно, стає легше експериментувати з тим, як вони відображаються та
використовуються[9].
Фреймворки SPA чудово підходять для того, щоб пограти з цими
сервісами, щоб створити привабливий, динамічний і навіть анімований
досвід користувачів.
Крім того, багатьом людям просто подобається розробляти певною
мовою програмування (багато фреймворків SPA використовують java script),
і завдяки API, SPA, які ви створюєте однією мовою, можуть щасливо
працювати з серверними службами, розробленими різними мовами.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 27
2.2.2 Чому односторінкові програми та системи керування вмістом
історично були складними
Використовуючи SPA, розробники можуть вважати цей досвід
«додатком», але відвідувач все одно буде думати про нього як про веб-
сторінку, а там, де є веб-сторінка, маркетингова команда прагне її
оптимізувати.
Оскільки SPA – це програми, які вимагають розробки, щоб поміняти
відображення та надання досвіду, маркетологам доводиться повертатися до
цифрового кам’яного віку (він же 90-ті) і звертатися за допомогою
дорозробки для кожного налаштування, щоспричиняє неминучі вузькі місця.
Вилучено інструменти редагування, до яких звикли маркетологи
Функції редагування CMS, на які покладаються маркетингові групи
(попередній перегляд у реальному часі, перетягування, редагування тощо),
зазвичай прив’язані до рівня доставки в CMS [10].
У SPA доставка визначається SPA, а вміст просто зберігається в CMS
стандартним способом, який можуть читати API. Оскільки SPA
відображається на передньому плані, серверна CMS не має уявлення, як він
має виглядати, і тому не може розгорнути попередній перегляд.
Тож користувачі CMS в кінцевому підсумку застрягають із дуже
застарілим підходом — заповніть форму, схрестіть пальці, натисніть на
опублікування та подивіться, як це виглядає в прямому ефірі.
Щоб повернутися до прикладу розфарбовування за номерами, CMS
зберігає необроблений вміст (фарбу), а SPA має посібник із розфарбовування
за номерами, як цей вміст має виглядати. У попередньому перегляді немає
цього посібника, тому не можу зрозуміти, як має виглядати вміст.
Це чиста «безголовна» доставка вмісту (він же не має рівня доставки
CMS як «голову»). Це чудово для швидкої розробки, але трохи грубо для
маркетологів, які хочуть змінити веб-сайт самостійно без необхідності
кодування.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 28
Крім того, маркетологи звикли думати проречі на «сторінках», але
оскільки SPA — це одна сторінка, функції створення та редагування
сторінок, необхідні маркетологам, недоступні. Якщо вони хочуть нову
«сторінку» («маршрут» у SPA) або хочуть, щоб вигляд виглядав по-іншому,
вони повинні запитати розробника.
Утруднювало повторне використання вмісту
Ця проблема виникає з двох основних причин: одна із застарілими
системами керування вмістом, а інша — дизайном SPA.
По-перше, існують певні системи керування вмістом, де просто не
існує роз’єднання між тим, як ваш контент виглядає і як він зберігається.
Оскільки зберігання вмісту не є стандартним, нейтральним до презентації
форматом, SPA не може використовувати його на основі API [11].
Звичайно, це проблема не лише під час використання SPA. Таке
налаштування CMS унеможливлює повторне використання вмісту в різних
каналах загалом. Оскільки вміст прив’язаний до того, як він відображається
(система на основі сторінок), поширені запитання, які ви розміщуєте на
своєму веб-сайті, не можна просто натиснути, щоб хтось прогортав їх на
своєму розумному годиннику — вам доведеться зберігати той самий вміст у
два різні способи.
Для належної роботи SPA потрібна CMS на основі контенту, щоб вона
могла отримувати необроблений вміст і відображати його, як захоче.
З боку SPA, складність пов’язана з тим, що багато веб-сайтів будуть
гібридними.
Хоча ви можете захотіти, щоб деякі частини були SPA, ви можете
захотіти, щоб інші були налаштовані традиційним способом (часто краще для
SEO), і між ними має бути згуртованість.
Якщо ваша установка складається з двох відерів контенту, частин для
традиційного сайту та SPA, ця згуртованість порушиться. Вам потрібен
контент, який працює у всьому.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 29
Важко з персоналізацією/релевантністю
SPA захоплюють вміст «сервісним» способом, так що це невеликий
шматочок вмісту без особливого контексту, що не дуже допомагає у
відповідній доставці.
Крім того, багатосистем керування вмістом персоналізують або на
основісторінок (не корисно в SPA), або на стороні клієнта. На жаль, ці
правила персоналізації java sсript не дуже добре діють поверх Java Script SPA
2.2.3 Аналіз фреймворків для SPA
EmberJS
EmberJS — це односторінковий фреймворк, заснований на мові Java
Script [12]. Це надійний фреймворк, вбудований з великою кількістю
функціональних можливостей, які допоможуть вам розробити інтерфейс веб-
сайтів. Кожна програма Ember JS працює як односторінкова програма.
Фреймворк пропонує стандартні налаштування та базові шаблони, щоб
заохочувати найкращі методи розробки. Деякі інші виняткові функції, які
пропонує Ember:
Framework з батареями – у ньому є всі утиліти, необхідні
розробнику для розробки високо функціонального додатка. Він
пропонує сотні високоякісних, підібраних пакетів npm.
Масштабована, проста у використанні архітектура інтерфейсу
користувача
Ember Addоns для впровадження нових функцій у вашу
програму.
Ember CLI постачається із вбудованим середовищем зі швидким
відновленням та автоперезавантаженням
Легке тестування та розгортання веб-додатків
Маршрутизація URL-адрес
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 30
Вбудований рівень даних і також може бути інтегрований з
популярними середовищами баз даних
Конвенція щодо конфігурації
Angular JS
Angular JS, розроблений Google, є однією з найстаріших фреймворків
JavaSсrірt з відкритим кодом. Це багатоцільова платформа, хоча багато
розробників віддають перевагу Angular JS для розробки програмна стороні
клієнта [13].
Angular JS є найкращим вибором для розробки інтерфейсу завдяки
своїй простоті, рендерингу DOM і функціям прив’язки даних. Хоча були
деякі повідомлення про проблеми з продуктивністю, ви можете легко
підвищити продуктивність програми AngularJS за допомогою кількох
простих прийомів.
Деякі функції цієї одно сторінкової програми:
Висока продуктивність і швидкість
Ін'єкція залежності
Дуже розширюваний з іншими бібліотеками
Кешування
Налагодження та тестування
Функція двостороннього зв’язування даних, що усуває
необхідність маніпулювання DOM
Немає залежностей від коду
ReactJS
ReactJS — це бібліотека JavaScript компонентів інтерфейсу, що
використовуються для розробки інтерактивного інтерфейсу веб-програми.
Цю бібліотеку часто плутають із фреймворком на стороні клієнта через
широкий набір функцій, які вона пропонує [14].
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 31
ReactJS — це легке рішення для швидкої розробки односторінкових
додатків з його компонентною архітектурою. Завдяки двосторонньому
зв’язуванню даних і віртуальній DOM веб-сайти React неймовірно швидкі.
React є кращим фреймворком для розробки SPA, оскільки він:
Легкий
Розділення проблем (SoC)
JSX – синтаксис, подібний до XML, дозволяє відображати
HTML-код за допомогою JavaScript
Фреймворк на основі компонентів, щосприяє повторному
використанню та гнучкості
Віртуальні DOM
Об’єктно-орієнтована парадигма
Дуже масштабований і гнучкий
Висока ефективність
BackBoneJS
BackboneJS — це надлегка бібліотека JavaScript, яка використовується
для розробки клієнтських програм у веб-браузері [15]. Він відповідає
архітектурі MV* з моделями та представленнями для обробки інтерфейсу
користувача та коду бізнес-логіки.
* - рівень обробки компонентів, але в BackboneJS логіку компонента
обробляють самі Views.
Деякі функції, які пропонує фреймворк BackboneJS:
Включає такі будівельні блоки, як моделі, представлення, події,
маршрутизатори для створення значущих розділів у вихідному
коді
Має широку підтримку JQuery
Автоматичне оновлення тегів HTML
Розширюється за допомогою сотень модулів і плагінів
Прості та зрозумілі конструкції кодування
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 32
Легко навчатися та використовувати
Надзвичайно гнучкий
Vue
Vue — це популярний прогресивний фреймворк JavaScript, який
використовується для розробки високопродуктивних веб-додатків та веб-
інтерфейсів [16].
Будучи гнучкою платформою з відкритим вихідним кодом, її можна
використовувати для швидкої та економічно ефективної розробки веб-
додатків. Ви можете розробляти складні традиційні веб-додатки з
інтенсивним трафіком або невеликістатичні веб-сайти. Це також найкращий
вибір для розробки ігор, і використовується у знаменитій мобільній грі
«2048» та веселому виконанні класичних шахів.
Дивно, але Vue також підходить для розробки односторінкових
програм. Це пов’язано з багатьма функціями, які він пропонує, наприклад:
Легкий, простий у використанні
Мінімалістична екосистема
Віртуальний DOM призводить до швидшого відтворення
динамічних HTML-сторінок
Реактивне двостороннє прив’язування даних
Легкоінтегрується з іншими фреймворками Vue
Настроювані та багаторазові компоненти
Архітектура проектування програмного забезпечення MVVM
Зручне середовище кодування
Гнучкий для інтеграції з будь-якими сторонніми програмами
2.2.4 Single Page Application для проекту
Хоча є багато переваг використання архітектури односторінкової
програми, вона також має деякі недоліки, які можуть призвести до можливих
підводних каменів.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 33
Тому важливо проаналізувати, чи дійсно проект вимагає
односторінкового додатка, чи багатосторінковий веб-додаток більше підійде.
Існує незліченна кількість прикладів односторінкових додатків, таких
як Twitter, Lifehacker і Delicious, коли використовується односторінкова
програма, яка дала зворотний ефект і призвела до повного перероблення в
багатосторінковий додаток.
Використання SPA рекомендується лише якщо ви відповідаєте одній із
наступних вимог:
Багаті, складні вимоги до інтерфейсу користувача, і ви хочете
розробити унікальний і креативний інтерфейс користувача
Ваш розробник знайомий з Javascript/Typescript, оскільки більшість
SPA вимагає кодування JavaScript
Підтримка браузерів без сценаріїв
Мінімальна поведінка програми на стороні клієнта
Невеликий обсяг даних і динамічні платформи, оскільки багато вмісту
буде важко передавати через мережу і не поміститься на одній веб-
сторінці
Пошукова оптимізація не має значення. Платформи SAAS та соціальні
мережі не потребують оптимізації для веб-сканерів
Розробка мобільних додатків є частиною вашого плану, оскільки SPA
надзвичайно зручні для мобільних пристроїв, і якщо ви використовуєте
ReactJS, ви можете легко перетворити свою односторінкову програму
на мобільну програму за допомогою React Native.
Корпоративні програми, які не мають кількох веб-сайтів і наборів
даних
2.2.5 Фактори, які слід враховувати при виборі SPA Framework
Рекомендується чітко зрозуміти вимоги проекту та провести
порівняння платформи SPA на основі ваших цілей. Деякі питання, які слід
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 34
пам’ятати, вибираючи фреймворк односторінкової програми для свого
проекту:
Чи очікуєте ви керувати потребами тисяч чи мільйонів
користувачів?
Чи вимагає ваш проект гнучкості, наприклад, додавання нової
функції після його публікації?
Чи буде програма великого масштабу, як-от Gmail, чи щось із
меншою базою користувачів, як-от Trello?
Чи потребує ваш веб-сайт оновлення вмісту в реальному часі?
Наприклад, оновлення випадків Covid у прямому ефірі чи
футбольний коментар?
Чи буде зручним повільний час початкового завантаження?
Віддавайте перевагу AngularJS для підвищення продуктивності та
зменшення часу завантаження.
Скільки заходів безпеки потрібно?
Скільки JavaScript ви збираєтеся використовувати у своїй
програмі? Односторінкові програми вимагають увімкнення
JavaScript на пристроях користувача. Чи буде це проблема
пізніше?
Чи потребує ваш проект SEO оптимізація?
Вам потрібне комплексне рішення, включаючи тестування,
конфігурацію сервера? Віддайте перевагу EmberJS через його
надійність і підхід, що включає батареї.
Вам потрібне просте цілеспрямоване рішення – просто дизайн
інтерфейсу користувача чи рендеринг на стороні клієнта?
Віддайте перевагу Vue або BackboneJS для полегшеногорішення
Чи потрібна вам масштабованість? SPA не дуже масштабовані.
Різні фреймворки пропонують різнірівні масштабованості. Ми
пропонуємо React для найвищої масштабованості
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 35
2.3 Обгрунтування вибору фреймворка
Я вважаю, що для мого проекту найбільше підходить фреймворк
ReactJS. Ось перелік причин чому я обрав саме його:
Навчитися легко
Reaсt, порівняно з іншими популярними інтерфейсними фреймворками,
такими як Angular і Vue, набагато легше вивчити.
Насправді, це одна з головних причин, чому React отримав таку
популярність за короткий час. Це допомагає підприємствам швидко будувати
свої проекти.
Чим важче вивчити певну технологію чи фреймворк, тим більше часу
знадобиться, щоб почати процес розробки [17]. І ми, як люди, часто схильні
уникати речей, яких важко навчитися.
Але оскільки React — це проста структура, яку легко вивчити та
почати, компанії та великі бренди більш схильні використовувати її.
Це допомагає створювати багаті користувацькі інтерфейси. Сьогодні
якість інтерфейсу користувача в додатку відіграє важливу роль. Якщо
користувальницький інтерфейс розроблено погано, то це знижує шанси на
успіх програми. Але якщо програма має високоякісний інтерфейс
користувача, то є більші шанси, що вашим користувачам сподобається
використовувати програму. Тому створення багатих користувацьких
інтерфейсів є начебто необхідним для того, щоб програма вижила та
процвітала. Хороша новина полягає в тому, що React дозволяє створювати
такі високоякісні, багаті користувацькі інтерфейси за допомогою своїх
декларативних компонентів, що підводить нас до наступного пункту.
Це дозволяє писати власні компоненти
Reaсt постачається з JSX, додатковим розширенням синтаксису, яке дає
змогу писати власні компоненти.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 36
Ці компоненти в основному приймають цитування HTML, а також
роблять відтворення всіх підкомпонентів чудовим досвідом для розробників.
Хоча було багато дебатів щодо JSX, але він уже стосується написання
користувацьких компонентів, створення програм великого обсягу та
перетворення HTML-макетів у дерева ReactElement.
Це підвищує продуктивність розробників
Часті оновлення часто перетворюються на головний біль, коли
програма має складну логіку і коли одна зміна в одному компоненті може
сильно вплинути на інші компоненти. Але для боротьби з цією проблемою
Facebook розширив React за допомогою функції повторного використання
компонентів. Повторне використання компонентів у React в основному
дозволяє розробникам повторно використовувати ті самі цифрові об’єкти.
Процес також простий! – розробники, наприклад, можуть почати
додавати прості компоненти, такі як кнопки, текстові поля та прапорці, а
потім перемістити їх до компонентів обгортки, які в кінцевому підсумку
переміщуються вперед до кореневого компонента. Цей підхід в основному
забезпечує краще обслуговування та зростання коду, оскільки кожен
компонент у React має свою внутрішню логіку, якою легко маніпулювати, і,
як наслідок, підвищує продуктивність розробки додатків.
Він пропонує швидке відтворення
Коли ви створюєте складну програму з високим навантаженням, на
початку стає обов’язковим визначити структуру програми, оскільки це може
вплинути на продуктивність вашої програми.
Простими словами, модель DOM є деревоподібною. Таким чином,
незначна модифікація на рівні вищого рівня може дуже вплинути на
інтерфейс користувача програми. Щоб вирішити цю проблему, Facebook
представив функцію віртуального DOM.
Віртуальний DOM, як випливає з назви, є віртуальним уявленням
DOM, що дозволяє спочатку тестувати всі зміни у віртуальній DOM, щоб
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 37
розрахувати ризики з кожною модифікацією [18]. Таким чином, такий підхід
допомагає підтримувати високу продуктивність програми та гарантує
кращий досвід роботи з користувачем.
Це зручно для SEO
Для будь-якого он-лайн бізнесу пошукова оптимізація є воротами до
успіху. За словами Moz, чим менше час завантаження сторінки та швидше
швидкість візуалізації, тим вище буде рейтинг програми в Google [19].
Завдяки швидкому рендерингу, React, порівняно з іншими
фреймворками, значно скорочує час завантаження сторінки, що значно
допомагає підприємствам закріпити перше місце на сторінці результатів
пошукової системи Google.
Він поставляється з корисним набором інструментів розробника
Вивчення нових технологій та використання їх у реальних проектах
може бути як веселим, так і корисним, але лише за умови правильного
використання.
Facebook це розуміє, і саме з цієї причини вони додали дуже необхідні
інструменти розробника React та інструменти розробника Chrome у свою
структуру React JS.
Ці інструменти React в основному допомагають розробникам виявляти
дочірні та батьківські компоненти, спостерігати за ієрархією компонентів, а
також перевіряти поточний стан і параметри компонентів.
Сильна підтримка спільноти
Як і Angular, React також має дуже сильну підтримку спільноти, що є
однією з головних причин використовувати React JS у своєму проекті.
Щодня велика кількість окремих розробників React робить свій внесок
у те, щоб зробити React кращою платформою інтерфейсу. На даний момент
React JS отримав 136 079 зірок на Github і 1 331 постійний автор.
Мало того, експерти також регулярно завантажують безкоштовні
посібники з React на Уoutube і пишуть докладні статті та блоги з React в
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 38
Інтернеті. Наприклад, простий пошук «безкоштовного посібника з React» у
Google дає 13 00 00 000 результатів.
Крім цього, експерти React також регулярно вирішують сумніви на
сайтах QA, таких як Staсk Overflow і Quora, тобто якщо ви коли-небудь
застрягнете під час використання React, ви можете aуs отримати надійні
рішення, надані експертами.
Це забезпечує кращу стабільність коду
React слідує за низхідним потоком даних, щоб гарантувати, що
батьківська структура не зазнає жодних змін у її дочірній структурі.
Отже, щоразу, коли розробник вносить зміни в об’єкт, йому або їй
потрібно лише змінити його стани та внести відповідні поправки. Таким
чином буде оновлено лише певний компонент. Цей потік даних і структура,
як наслідок, забезпечують кращу стабільність коду та плавну роботу
програми.
Грамотне зв'язування даних
React використовує одностороннє прив’язування даних і flux, який є
конструктором додатків, який обробляє потік даних з однієї точки. Таким
чином, будь-хто має можливість відстежувати всі зміни, які вносяться для
зміни окремих частин даних.
Розширюйте свої інструменти та можливості
Основною перевагою React у проекті є те, що розробники можуть
писати на javascriрt, а також на модемі JSX. Такий підхід дозволить їм
використовувати HTML-вставки в коді, що дає великі шанси на
реструктуризацію та підвищення продуктивності.
Тестування та функціональність
React дає результати не тільки в продуктивності, але і в додатках, які
можна перевірити. Це полегшує розробку чіткого дизайну, зручного для
тестування. Їх можна контролювати за допомогою активованих вихідних
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 39
даних, функцій, подій тощо. Перевірте це перед використанням, і React JS
спрощує це.
Дизайн, орієнтований на інтерфейс користувача
React JS надає потенціал для будь-якого макету інтерфейсу. Це
дозволяє значним змінам даних автоматично перетворювати окремі елементи
інтерфейсу користувача. Завдяки цій новітній функції вам не потрібно нічого
для оновлення інтерфейсу користувача.
Він забезпечує унікальний шар абстракції
Однією з надійних сторін React є те, що він пропонує хорошу
абстракцію, що означає, що він не відкриває користувачам жодних складних
внутрішніх елементів. Розробники повинні знати кілька основ і не вивчати
внутрішні функції.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 40
3 ІНСТАЛЯЦІЯ ТА НАЛАШТУВАННЯ СИСТЕМИ
3.1 Інсталяція та налаштування проекту на ReactJS
Для початку роботи з Reactнам потрібно мати NodeJS>= 14.0.0 і
npm >= 5.6 на нашому комп’ютері. Після встановлення цих утиліт ми
можемо почати створювати свій проект, для цього нам потрібно відкрити
папку, в якій ми хочемо зберігати свій проект в терміналі і запустити
наступні команди:
npxcreate-react-appmy-app – створення самого проекту і встановлення
потрібних пакетів для роботи з ним
cdmy-app – перехід до створеної папки з проектом
npm start – запуск проекту
Після виконання всіх шляхів в терміналі ми побачимо наступне
повідомлення:
Рисунок 3.1 – Результат запуску створеного проекту на ReactJS
Це означає що всі шляхи були виконані правильно і наш проект був
запущений по посиланню http://localhost:3000. Перейшовши на це посилання
ми потрапляємо на Головну сторінку нашого проекту:
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 41
Рисунок 3.2 – Вигляд головної сторінки після запуску проекту
Відкривши наш проект в редакторі коду ми побачимо наступну
структуру:
Рисунок 3.3 – Структура папок створеного проекту
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 42
Основною папкою в цьому проекті є папка src, саме в цій папці ми і
будемо створювати компоненти та сторінки для нашого веб-сайту.
Ось так наприклад зараз виглядає код головної сторінки, яку зображено
на рисунку 2.11.
Рисунок 3.4 – Вигляд коду компоненту головної сторінки
Використовуючи цю сторінку як шаблон, ми можемо створити новий
компонент або змінити даний код для того, що нам потрібно.
Для того щоб додати новий компонент нам достатньо створити новий
файл в папці srс, яку зображено на рисунку 3.5. Створюємо новий файл, який
назвемо About.js і додамо в нього наступний код:
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 43
Рисунок 3.5 – Створення власного компоненту
Тепер для того щоб на головній сторінці відображався наш компонент
замість того, що був на початку, достатньо лише в файл index.js імпортувати
його та записати в середину функції render як самозакриваючий тег HTML -
<About/>.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 44
3.6 – Додавання створеного компоненту на головний екран
Тепер перейшовши по тому ж посиланню (http://localhost:3000) ми
побачимо створений нами компонент з інформацією, яку ми записали в
ньому.
3.7 – Результат створення нового компоненту
Таким чином ми можемо створювати нові сторінки для нашого сайту та
додавати до нього ті елементи, які нам потрібні. Також до кожного
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 45
компоненту можна підключити CSSдля того щоб простилізувати їх так, як ми
хочемо.
3.2 Використання npmпакетів
Якщо нам потрібно використовувати якісь складні функції чи
конструкції, які ми не хочемо писати самостійно, то ми можемо спробувати
пошукати nрm пакети, які вже надають можливість додати цю
функціональність до сайту [20]. Для того щоб це зробити, нам достатньо
пошукати на сайті https://www.npmjs.соm той пакет, який нам потрібен.
Наприклад нам потрібно додати до нашого сайту слайдер. Заходимо на
сайт, який я вказав вище і в пошуці пишемо slider.
Рисунок 3.8 – Результат пошуку по запиту slider
Таким чином, ми бачимо що вже є достатньо багато пакетів, які можуть
надати нам можливість інтегрувати слайдер до нашого проекту. Для того
щоб додати один із них нам потрібно лише вписати відповідну команду в
терміналі нашого проекту.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 46
Рисунок 3.9 – Загальна інформація про nрmпакет slider
Обравши перший пакет після результатів пошуку ми бачимо опис
цього пакету та як нам встановити його. В правій частині екрану знаходиться
команда «npmislider», саме цю команду нам і потрібно вписати в термінал
щоб додати цей пакет до проекту та почати користуватися його
можливостями.
Виконавши всі кроки вище та розібравшись як працюють npmпакети,
ми маємо всі загальні знання для того щоб створювати свої веб-додатки.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 47
4 ПРОЕКТУВАННЯ UML – ДІАГРАМ
4.1 Побудова діаграми прецедентів
Діаграму прецедентів до створення інтернет-магазину зображено на
рисунку 4.1.
Рисунок 4.1 – Діаграма прецедентів до створення інтернет-магазину
Діаграму прецедентів після створення інтернет-магазину зображено на
рисунку 4.2.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 48
Рисунок 4.2 – Діаграма прецедентів після створення інтернет-магазину
4.2 Побудова діаграми послідовностей
Діаграму послідовностей до створення інтернет-магазину зображено на
рисунку 4.3.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 49
Рисунок 4.3 – Діаграма послідовностей до створення інтернет-магазину
Діаграму послідовностей після створення інтернет-магазину зображено
на рисунку 4.4.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 50
Рисунок 4.4 – Діаграма послідовностей після створення інтернет-магазину
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 51
4.3 Побудова діаграми кооперацій
Діаграму кооперацій до створення інтернет-магазину зображено на
рисунку 4.5.
Рисунок 4.5 – Діаграма кооперацій до створення інтернет-магазину
Діаграму кооперацій після створення інтернет-магазину зображено на
рисунку 4.6.
Рисунок 4.6 – Діаграма кооперацій після створення інтернет-магазину
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 52
ВИСНОВКИ
Беручи до уваги основні вимоги до створення Інтернет-магазину та за
допомогою сучасних технологій мови програмування JavaScript і системи
управління базами даних MySQL, було розроблено Wеb-сайт Інтернет
магазину техніки. Функціональна структура якого складається з Wеb-сайту
та бази даних, елементи даних яких взаємодіють між собою.
Для виконання поставленої мети було використано:
фрейморк ReactJS та прилягаючі до нього nрm пакети для додавання
функціональності. Було використано наступні пакети:
React-router-dom — повнофункціональна бібліотека маршрутизації на
стороні клієнта та сервера для React, бібліотеки JavaScriрt для створення
інтерфейсів користувача. ReactRouter працює скрізь, де працює React в
Інтернеті та на сервері.
Redux — шаблон і бібліотека для керування та оновлення стану програми
за допомогою подій які називаються «дії». Він служить централізованим
сховищем для стану, який потрібно використовувати в усій нашій
програмі, з правилами які гарантують, що стан можна оновлювати лише в
передбачуваний спосіб.
Модуль CSS — файл .css, де класи діють подібно до локальних змінних
у Javascriрt. Це інструмент, який робить кожен клас унікальним, включаючи
хеш в його назву.
Позитивними якостями розробленого Інтернет-магазину є:
зручний та простий інтерфейс;
реєстрація клієнтів магазину за бажанням;
сортування товарів по категоріям, що пришвидшує пошук потрібного
товару;
опис кожного товару.
Враховуючи вище сказане можна зробити висновок, що всі поставленні
завдання в кваліфікаційній роботі виконані в повному обсязі.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 53
ПЕРЕЛІК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ
SPA— Односторінковий застосунок
SEO— Пошукова оптимізація
DOM— Об'єктна модель документа
HTTP — Протокол передачі гіпертексту (HypertextTransferPrоtоcоl).
NPM — Стандартний менеджер пакетів, що автоматично
встановлюється разом з Node.js (nodepackagemanager)
СУБД — Система управління базами даних. Комплекс програм, що
дозволяють створити базу даних (БД) і маніпулювати даним
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дата 54
ДОДАТОК А
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор Володимир РУДНИЦЬКИЙ
__________________
«___» ____________ 2022 року
Інтернет магазин техніки «TechMol»
Специфікація
482.ЧДТУ.21827-01
Листів 2
Розробник _______________ Ігор МОЛЧАН
Керівник _______________ Світлана СИСОЄНКО
Черкаси 2022
2
482.ЧДТУ.21827-01
Позначення Найменування Примітка
Документація
482.ЧДТУ.21827-01 12 01 Текст програми
482.ЧДТУ.21827-01 34 01 Інструкція користувача
ДОДАТОК Б
Інтернет магазин техніки «TechMol»
Текст програми
482.ЧДТУ.21827-01 12 01
Листів 16
Розробник: Ігор МОЛЧАН
Черкаси 2022
2
482.ЧДТУ.21827-01 12 01
import{PolymerElement,html}from'@polymer/polymer/polymerelement.js';import'@po
lymer/ironicon/ironicon.js';import'./shopbutton.js';import'./shopicons.js';classShop404
WarningextendsPolymerElement{staticgettemplate(){returnhtml`<styleinclude="shopb
utton">:host{display:block;textalign:center;color:var(appsecondarycolor);}ironicon{displ
ay:inlineblock;width:60px;height:60px;}h1{margin:50px050px0;fontweight:300;}</style>
<div><ironiconicon="error"></ironicon><h1>Sorry,wecouldn'tfindthatpage</h1></div>
<shopbutton><ahref="/">Gotothehomepage</a></shopbutton>`;}staticgetis(){return's
hop404warning';}}customElements.define(Shop404Warning.is,Shop404Warning);classS
hopAnalyticsextendsHTMLElement{connectedCallback(){//trackmetricswithgoogleanaly
tics...(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q
||[]).push(arguments)},i[r].l=1*newDate();a=s.createElement(o),m=s.getElementsByTag
Name('body')[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,documen
t,'script','//www.googleanalytics.com/analytics.js','ga');ga('create',this.getAttribute('key'),'
auto');ga('send','pageview');}}customElements.define('shopanalytics',ShopAnalytics);imp
ort{PolymerElement,html}from'@polymer/polymer/polymerelement.js';import'@polym
er/applayout/appheader/appheader.js';import'@polymer/applayout/appscrolleffects/ef
fects/waterfall.js';import'@polymer/applayout/apptoolbar/apptoolbar.js';import{scroll}f
rom'@polymer/applayout/helpers/helpers.js';import'@polymer/approute/applocation.j
s';import'@polymer/approute/approute.js';import'@polymer/ironflexlayout/ironflexlay
out.js';import'@polymer/ironmediaquery/ironmediaquery.js';import'@polymer/ironpag
es/ironpages.js';import'@polymer/ironselector/ironselector.js';import'./shopcategoryda
ta.js';import'./shophome.js';import{afterNextRender}from'@polymer/polymer/lib/utils/
renderstatus.js';import{timeOut}from'@polymer/polymer/lib/utils/async.js';import{Deb
ouncer}from'@polymer/polymer/lib/utils/debounce.js';//performanceloggingwindow.p
erformance&&performance.mark&&performance.mark('shopappbeforeregister');class
ShopAppextendsPolymerElement{staticgettemplate(){returnhtml`<style>:host{display:
block;position:relative;paddingtop:130px;paddingbottom:64px;minheight:100vh;apppri
marycolor:#202020;appsecondarycolor:#757575;appaccentcolor:#172c50;paperbutton
inkcolor:var(appaccentcolor);papericonbuttoninkcolor:var(appaccentcolor);paperspinn
ercolor:var(appaccentcolor);webkittaphighlightcolor:rgba(0,0,0,0);color:var(appprimaryc
olor);}appheader{@applylayoutfixedtop;zindex:1;backgroundcolor:rgba(255,255,255,0.
95);appheadershadow:{boxshadow:inset0px5px6px3pxrgba(0,0,0,0.2);height:10px;bott
om:10px;}}papericonbutton{color:var(appprimarycolor);}.searchinput{border:2pxsolidv
ar(appprimarycolor);outline:none;}.logo{textalign:center;}.logoa{fontsize:16px;fontweig
ht:600;letterspacing:0.3em;color:var(appprimarycolor);textdecoration:none;/*requiredf
orIE11,sothis<a>canreceivepointerevents*/display:inlineblock;pointerevents:auto;padd
ingright:50px;}.menubtn{display:none;}.cartbtncontainer{position:relative;width:40px;}.
announcer{position:fixed;height:0;overflow:hidden;}:host(:not([page='detail'])).backbtn{
display:none;}[hidden]{display:none!important;}#tabContainer{position:relative;height:
66px;}shoptabs,shoptab{shoptaboverlay:{borderbottom:2pxsolidvar(appaccentcolor);}}
shoptabs{height:100%;}shoptab{margin:010px;}shoptaba{display:inlineblock;outline:n
one;padding:9px5px;fontsize:13px;fontweight:500;textdecoration:none;color:var(apppr
imarycolor);}.cartbadge{position:absolute;top:2px;right:0;width:20px;height:20px;backg
3
482.ЧДТУ.21827-01 12 01
roundcolor:var(appaccentcolor);borderradius:50%;color:white;fontsize:12px;fontweight
:500;pointerevents:none;@applylayoutvertical;@applylayoutcentercenter;}.drawerlist{
margin:020px;}.drawerlista{display:block;padding:016px;lineheight:40px;textdecoration
:none;color:var(appsecondarycolor);}.drawerlista.ironselected{color:black;fontweight:b
old;}shopcartmodal{zindex:2;}appdrawer{zindex:3;}ironpages{maxwidth:1440px;margi
n:0auto;}footer{position:absolute;bottom:0;left:0;right:0;textalign:center;margintop:20
px;lineheight:24px;}footer>a{color:var(appsecondarycolor);textdecoration:none;}footer
>a:hover{textdecoration:underline;}.demolabel{boxsizing:borderbox;width:120px;padd
ing:6px;margin:8pxauto0;backgroundcolor:var(appprimarycolor);color:white;texttransf
orm:uppercase;}/*smallscreen*/@media(maxwidth:767px){:host{paddingtop:64px;}.m
enubtn{display:block;}:host([page='detail']).menubtn{display:none;}.logoa{paddingright
:0;}}@media(maxwidth:375px){.searchinput{width:100px;}}</style><shopanalyticskey="
UA3933430716"></shopanalytics><!applocationandapprouteelementsprovidethestateo
ftheURLfortheapp.><applocationroute="{{route}}"></applocation><approuteroute="{{r
oute}}"pattern="/:page"data="{{routeData}}"tail="{{subroute}}"></approute><ironmedi
aqueryquery="maxwidth:767px"querymatches="{{smallScreen}}"></ironmediaquery><
!shopcategorydataprovidesthelistofcategories.><shopcategorydatacategories="{{categ
ories}}"></shopcategorydata><!shopcartdatamaintainsthestateoftheuser'sshoppingcar
t(inlocalstorage)andcalculatesthetotalamount.><shopcartdataid="cart"cart="{{cart}}"nu
mitems="{{numItems}}"total="{{total}}"></shopcartdata><appheaderrole="navigation"i
d="header"effects="waterfall"condenses=""reveals=""><apptoolbar><divclass="leftbarit
em"><papericonbuttonclass="menubtn"icon="menu"onclick="_toggleDrawer"arialabel
="Categories"></papericonbutton><aclass="backbtn"href="/list/[[categoryName]]"tabin
dex="1"><papericonbuttonicon="arrowback"arialabel="Goback"></papericonbutton></
a></div><divclass="search"><inputtype="search"placeholder="Search..."/></div><divcla
ss="logo"maintitle=""><ahref="/"arialabel="SHOPHome">TechMol</a></div><divclass=
"cartbtncontainer"><ahref="/cart"tabindex="1"><papericonbuttonicon="shoppingcart"
arialabel$="Shoppingcart:[[_computePluralizedQuantity(numItems)]]"></papericonbutt
on></a><divclass="cartbadge"ariahidden="true"hidden$="[[!numItems]]">[[numItems]]
</div></div></apptoolbar><!Lazycreatethetabsforlargerscreensizes.><divid="tabContai
ner"sticky$="[[_shouldShowTabs]]"hidden$="[[!_shouldShowTabs]]"><domifif="[[_shoul
dRenderTabs]]"><template><shoptabsselected="[[categoryName]]"attrforselected="na
me"><domrepeatitems="[[categories]]"as="category"initialcount="4"><template><shop
tabname="[[category.name]]"><ahref="/list/[[category.name]]">[[category.title]]</a></s
hoptab></template></domrepeat></shoptabs></template></domif></div></appheade
r><!Lazycreatethedrawerforsmallscreensizes.><domifif="[[_shouldRenderDrawer]]"><t
emplate><!Twowaybind\`drawerOpened\`sinceappdrawercanupdate\`opened\`itself.
><appdraweropened="{{drawerOpened}}"swipeopen=""tabindex="0"><ironselectorrol
e="navigation"class="drawerlist"selected="[[categoryName]]"attrforselected="name"><
domrepeatitems="[[categories]]"as="category"initialcount="4"><template><aname="[[c
ategory.name]]"href="/list/[[category.name]]">[[category.title]]</a></template></domr
epeat></ironselector></appdrawer></template></domif><ironpagesrole="main"select
ed="[[page]]"attrforselected="name"selectedattribute="visible"fallbackselection="404">
<!homeview><shophomename="home"categories="[[categories]]"></shophome><!listv
4
482.ЧДТУ.21827-01 12 01
iewofitemsinacategory><shoplistname="list"route="[[subroute]]"offline="[[offline]]"></
shoplist><!detailviewofoneitem><shopdetailname="detail"route="[[subroute]]"offline="
[[offline]]"></shopdetail><!cartview><shopcartname="cart"cart="[[cart]]"total="[[total]]"
></shopcart><!checkoutview><shopcheckoutname="checkout"cart="[[cart]]"total="[[tot
al]]"route="{{subroute}}"></shopcheckout><shop404warningname="404"></shop404w
arning></ironpages><footer><ahref="https://www.polymerproject.org/3.0/toolbox/">M
adebyPolymer</a></footer><!a11yannouncer><divclass="announcer"arialive="assertiv
e">[[_a11yLabel]]</div>`;}staticgetis(){return'shopapp';}staticgetproperties(){return{pa
ge:{type:String,reflectToAttribute:true,observer:'_pageChanged',},numItems:{type:Num
ber,value:0,},_shouldShowTabs:{computed:'_computeShouldShowTabs(page,smallScre
en)',},_shouldRenderTabs:{computed:'_computeShouldRenderTabs(_shouldShowTabs,l
oadComplete)',},_shouldRenderDrawer:{computed:'_computeShouldRenderDrawer(sm
allScreen,loadComplete)',},};}staticgetobservers(){return['_routePageChanged(routeDat
a.page)'];}constructor(){super();window.performance&&performance.mark&&performa
nce.mark('shopapp.created');}ready(){super.ready();//Customelementspolyfillsafewaytoi
ndicateanelementhasbeenupgraded.this.removeAttribute('unresolved');//listenforcusto
meventsthis.addEventListener('addcartitem',(e)=>this._onAddCartItem(e));this.addEvent
Listener('setcartitem',(e)=>this._onSetCartItem(e));this.addEventListener('clearcart',(e)=>
this._onClearCart(e));this.addEventListener('changesection',(e)=>this._onChangeSection(
e));this.addEventListener('announce',(e)=>this._onAnnounce(e));this.addEventListener('
domchange',(e)=>this._domChange(e));this.addEventListener('showinvalidurlwarning',(e
)=>this._onFallbackSelectionTriggered(e));//listenforonline/offlineafterNextRender(this,()
=>{window.addEventListener('online',(e)=>this._notifyNetworkStatus(e));window.addEv
entListener('offline',(e)=>this._notifyNetworkStatus(e));});}_routePageChanged(page){if(t
his.page==='list'){this._listScrollTop=window.pageYOffset;}this.page=page||'home';//Cl
osethedrawerincasethe*route*changecamefromalinkinthedrawer.this.drawerOpened=
false;}_pageChanged(page,oldPage){if(page!=null){letcb=this._pageLoaded.bind(this,Bo
olean(oldPage));switch(page){case'list':import('./shoplist.js').then(cb);break;case'detail':i
mport('./shopdetail.js').then(cb);break;case'cart':import('./shopcart.js').then(cb);break;ca
se'checkout':import('./shopcheckout.js').then(cb);break;default:this._pageLoaded(Boole
an(oldPage));}}}_pageLoaded(shouldResetLayout){this._ensureLazyLoaded();if(shouldRe
setLayout){//Thesizeoftheheaderdependsonthepage(e.g.onsomepagesthetabs//donota
ppear),soresettheheader'slayoutonlywhenswitchingpages.timeOut.run(()=>{this.$.head
er.resetLayout();},1);}}_ensureLazyLoaded(){//loadlazyresourcesafterrenderandset`load
Complete`whendone.if(!this.loadComplete){afterNextRender(this,()=>{import('./lazyres
ources.js').then(()=>{//Registerserviceworkerifsupported.if('serviceWorker'innavigator){
navigator.serviceWorker.register('serviceworker.js',{scope:'/',});}this._notifyNetworkStat
us();this.loadComplete=true;});});}}_notifyNetworkStatus(){letoldOffline=this.offline;this.
offline=!navigator.onLine;//Showthesnackbariftheuserisofflinewhenstartinganewsessio
n//orifthenetworkstatuschanged.if(this.offline||(!this.offline&&oldOffline===true)){if(!th
is._networkSnackbar){this._networkSnackbar=document.createElement('shopsnackbar'
);this.root.appendChild(this._networkSnackbar);}this._networkSnackbar.innerHTML=thi
s.offline?'Youareoffline':'Youareonline';this._networkSnackbar.open();}}_toggleDrawer(){
this.drawerOpened=!this.drawerOpened;}_setMeta(attrName,attrValue,content){letele
5
482.ЧДТУ.21827-01 12 01
ment=document.head.querySelector(`meta[${attrName}="${attrValue}"]`);if(!element){
element=document.createElement('meta');element.setAttribute(attrName,attrValue);do
cument.head.appendChild(element);}element.setAttribute('content',content||'');}//Ele
mentsintheappcannotifysectionchanges.//Responsebya11yannouncingthesectionandsy
ncronizingthecategory._onChangeSection(event){letdetail=event.detail;//Scrolltothetop
ofthepagewhennavigatingtoanonlistpage.Forlistview,//scrolltothelastsavedpositiononlyi
fthecategoryhasnotchanged.letscrollTop=0;if(this.page==='list'){if(this.categoryName==
=detail.category){scrollTop=this._listScrollTop;}else{//ResetthelistviewscrollTopifthecate
gorychanged.this._listScrollTop=0;}}//Use`Polymer.AppLayout.scroll`with`behavior:'sil
ent'`todisableheaderscroll//effectsduringthescroll.scroll({top:scrollTop,behavior:'silent'
});this.categoryName=detail.category||'';//Announcethepage'stitleif(detail.title){docum
ent.title=detail.title+'TechMol';this._announce(detail.title+',loaded');//Setopengraphmet
adatathis._setMeta('property','og:title',detail.title);this._setMeta('property','og:descriptio
n',detail.description||document.title);this._setMeta('property','og:url',document.locatio
n.href);this._setMeta('property','og:image',detail.image||this.baseURI+'images/shopico
n128.png');//Settwittercardmetadatathis._setMeta('property','twitter:title',detail.title);thi
s._setMeta('property','twitter:description',detail.description||document.title);this._setM
eta('property','twitter:url',document.location.href);this._setMeta('property','twitter:imag
e:src',detail.image||this.baseURI+'images/shopicon128.png');}}_onAddCartItem(event){
if(!this._cartModal){this._cartModal=document.createElement('shopcartmodal');this.roo
t.appendChild(this._cartModal);}this.$.cart.addItem(event.detail);this._cartModal.open();
this._announce('Itemaddedtothecart');}_onSetCartItem(event){letdetail=event.detail;this
.$.cart.setItem(detail);if(detail.quantity===0){this._announce('Itemdeleted');}else{this._a
nnounce('Quantitychangedto'+detail.quantity);}}_onClearCart(){this.$.cart.clearCart();thi
s._announce('Cartcleared');}//Elementsintheappcannotifyachangetobea11yannounced._
onAnnounce(e){this._announce(e.detail);}//A11yannouncethegivenmessage._announce(
message){this._a11yLabel='';this._announceDebouncer=Debouncer.debounce(this._ann
ounceDebouncer,timeOut.after(100),()=>{this._a11yLabel=message;});}//Thisisforperfor
manceloggingonly._domChange(e){if(window.performance&&performance.mark&&!thi
s.__loggedDomChange){lettarget=e.composedPath()[0];lethost=target.getRootNode().h
ost;if(host&&host.localName.match(this.page)){this.__loggedDomChange=true;perform
ance.mark(host.localName+'.domChange');}}}_onFallbackSelectionTriggered(){this.page
='404';}_computeShouldShowTabs(page,smallScreen){return((page==='home'||page==
='list'||page==='detail')&&!smallScreen);}_computeShouldRenderTabs(_shouldShowTa
bs,loadComplete){return_shouldShowTabs&&loadComplete;}_computeShouldRenderD
rawer(smallScreen,loadComplete){returnsmallScreen&&loadComplete;}_computePlural
izedQuantity(quantity){returnquantity+''+(quantity===1?'item':'items');}}customElement
s.define(ShopApp.is,ShopApp);import'@polymer/polymer/polymerelement.js';const$_d
ocumentContainer=document.createElement('template');$_documentContainer.innerH
TML=`<dommoduleid="shopbutton"><template><style>shopbutton{display:inlinebloc
k;}shopbutton>*{display:inlineblock;boxsizing:borderbox;border:2pxsolid#000;backgro
undcolor:#FFF;fontsize:14px;fontweight:500;color:var(appprimarycolor);margin:0;paddi
ng:8px44px;textalign:center;textdecoration:none;texttransform:uppercase;borderradiu
s:0;outline:none;webkitappearance:none;}shopbutton>*:focus{backgroundcolor:#c5ca
6
482.ЧДТУ.21827-01 12 01
d3;}shopbutton>*:active{backgroundcolor:#000;color:#FFF;}@media(maxwidth:767px){
/*Responsivebuttonsareusedinshopdetail,shopcartandshopcheckout*/shopbutton[res
ponsive]{@applylayoutfixedbottom;height:64px;zindex:1;}shopbutton[responsive]>*{b
ackgroundcolor:var(appaccentcolor);border:none;color:white;padding:20px;width:100%
;height:100%;fontsize:15px;}shopbutton[responsive]>*:focus{backgroundcolor:var(app
accentcolor);}}</style></template></dommodule>`;document.head.appendChild($_do
cumentContainer.content);import{PolymerElement,html}from'@polymer/polymer/poly
merelement.js';import'@polymer/appstorage/applocalstorage/applocalstoragedocume
nt.js';classShopCartDataextendsPolymerElement{staticgettemplate(){returnhtml`<appl
ocalstoragedocumentkey="shopcartdata"data="{{cart}}"></applocalstoragedocument>
`;}staticgetis(){return'shopcartdata';}staticgetproperties(){return{cart:{type:Array,value:
()=>[],notify:true},numItems:{type:Number,computed:'_computeNumItems(cart.splices)
',notify:true},total:{type:Number,computed:'_computeTotal(cart.splices)',notify:true}}}a
ddItem(detail){leti=this._indexOfEntry(detail.item.name,detail.size);if(i!==1){detail.quant
ity+=this.cart[i].quantity;}this.setItem(detail);}setItem(detail){leti=this._indexOfEntry(det
ail.item.name,detail.size);if(detail.quantity===0){//Removeitemfromcartwhenthenewqu
antityis0.if(i!==1){this.splice('cart',i,1);}}else{//UsePolymer'sarraymutationmethods(`spli
ce`,`push`)sothatobservers//on`cart.splices`aretriggered.if(i!==1){this.splice('cart',i,1,d
etail);}else{this.push('cart',detail);}}}clearCart(){this.cart=[];}_computeNumItems(){if(this.
cart){returnthis.cart.reduce((total,entry)=>{returntotal+entry.quantity;},0);}return0;}_co
mputeTotal(){if(this.cart){returnthis.cart.reduce((total,entry)=>{returntotal+entry.quanti
ty*entry.item.price;},0);}return0;}_indexOfEntry(name,size){if(this.cart){for(leti=0;i<this.c
art.length;++i){letentry=this.cart[i];if(entry.item.name===name&&entry.size===size){ret
urni;}}}return1;}}customElements.define(ShopCartData.is,ShopCartData);import{Polym
erElement,html}from'@polymer/polymer/polymerelement.js';import'@polymer/ironfle
xlayout/ironflexlayout.js';import'@polymer/papericonbutton/papericonbutton.js';impor
t'./shopicons.js';import'./shopimage.js';import'./shopselect.js';classShopCartItemextend
sPolymerElement{staticgettemplate(){returnhtml`<styleinclude="shopselect">:host{@a
pplylayouthorizontal;position:relative;marginbottom:24px;}shopimage{width:72px;heig
ht:72px;}shopselect>select{fontsize:16px;paddingleft:40px;}shopselect>shopmddecora
tor{fontsize:12px;border:none;}.name{@applylayoutflexauto;lineheight:20px;fontweigh
t:500;float:left;width:calc(100%438px);margintop:26px;marginright:30px;}.namea{displa
y:inlineblock;maxwidth:100%;textdecoration:none;color:var(appprimarycolor);whitespa
ce:nowrap;overflow:hidden;textoverflow:ellipsis;}.price,.size{display:inlineblock;whitesp
ace:nowrap;color:var(appsecondarycolor);}.size{minwidth:70px;width:144px;}.size>spa
n{marginleft:10px;}.price{minwidth:70px;width:100px;}.quantity{minwidth:80px;width:
160px;}.deletebutton{width:34px;height:34px;color:var(appsecondarycolor);position:ab
solute;top:18px;right:0;}.flex{@applylayouthorizontal;@applylayoutflexauto;marginleft:
24px;}.detail{@applylayouthorizontal;@applylayoutcenter;margintop:26px;marginright:
30px;height:20px;}@media(maxwidth:767px){.flex{@applylayoutvertical;marginleft:10p
x;}.name{margintop:16px;marginright:0;width:calc(100%40px);}.detail{@applylayoutself
end;margin:10px10px00;}.quantity,.size,.price{textalign:right;width:auto;}.deletebutton{
top:8px;}}@media(maxwidth:360px){.name{margintop:0;}.detail{@applylayoutvertical;
@applylayoutstart;@applylayoutselfstart;height:auto;margintop:0;}.deletebutton{top:6
7
482.ЧДТУ.21827-01 12 01
px;}shopselect>select{padding:2px24px2px40px;}.quantity,.size,.price{textalign:left;wid
th:auto;}}</style><ahref\$="/detail/[[entry.item.category]]/[[entry.item.name]]"title\$="[
[entry.item.title]]"><shopimagesrc="[[entry.item.image]]"alt="[[entry.item.title]]"></sho
pimage></a><divclass="flex"><divclass="name"><ahref\$="/detail/[[entry.item.categor
y]]/[[entry.item.name]]">[[entry.item.title]]</a></div><divclass="detail"><divclass="qua
ntity"><shopselect><labelprefix="">Qty:</label><selectid="quantitySelect"arialabel="Ch
angequantity"value="[[entry.quantity]]"onchange="_quantityChange"><optionvalue="1
">1</option><optionvalue="2">2</option><optionvalue="3">3</option><optionvalue="
4">4</option><optionvalue="5">5</option><optionvalue="6">6</option><optionvalue
="7">7</option><optionvalue="8">8</option><optionvalue="9">9</option><optionvalu
e="10">10</option><optionvalue="11">11</option><optionvalue="12">12</option></s
elect><shopmddecoratorariahidden="true"></shopmddecorator></shopselect></div><
divclass="size">Size:<span>[[entry.size]]</span></div><divclass="price">[[_formatPrice(
entry.item.price)]]</div><!Useonclickinsteadofontaptopreventthenextcartitemtobefocu
sed><papericonbuttonclass="deletebutton"icon="close"arialabel\$="Deleteitem[[entry.i
tem.title]]"onclick="_removeItem"></papericonbutton></div></div>`;}staticgetis(){retur
n'shopcartitem';}staticgetproperties(){return{entry:Object}}_quantityChange(){this._set
CartItem(parseInt(this.$.quantitySelect.value,10));}_setCartItem(quantity){this.dispatchE
vent(newCustomEvent('setcartitem',{bubbles:true,composed:true,detail:{item:this.entry
.item,quantity:quantity,size:this.entry.size}}));}_formatPrice(price){returnprice?'$'+price.
toFixed(2):'';}_removeItem(){this._setCartItem(0);}}customElements.define(ShopCartIte
m.is,ShopCartItem);import{PolymerElement,html}from'@polymer/polymer/polymerele
ment.js';import'@polymer/ironflexlayout/ironflexlayout.js';import'@polymer/papericon
button/papericonbutton.js';import{IronOverlayBehaviorImpl}from'@polymer/ironoverl
aybehavior/ironoverlaybehavior.js';import'./shopbutton.js';import{mixinBehaviors}fro
m'@polymer/polymer/lib/legacy/class.js';classShopCartModalextendsmixinBehaviors([I
ronOverlayBehaviorImpl],PolymerElement){staticgettemplate(){returnhtml`<styleinclud
e="shopbutton">:host{display:block;position:fixed;backgroundcolor:#FFF;boxshadow:0
010pxrgba(0,0,0,0.2);width:320px;padding:12px;visibility:hidden;willchange:transform;t
op:56px;right:16px;webkittransform:translate3d(calc(100%+16px),0,0);transform:transl
ate3d(calc(100%+16px),0,0);transitionproperty:visibility,webkittransform;transitionprop
erty:visibility,transform;transitionduration:0.2s;transitiondelay:0.1s;}:host(.opened){visi
bility:visible;webkittransform:translate3d(0,0,0);transform:translate3d(0,0,0);}.layouthor
izontal{@applylayouthorizontal;}.label{@applylayoutflex;lineheight:24px;margin:8px;}.
modalbutton{@applylayoutflex;margin:16px8px;}.modalbutton>a{boxsizing:borderbox
;width:100%;padding:8px24px;}#closeBtn{position:absolute;right:5px;top:5px;}@media
(maxwidth:767px){:host{top:auto;bottom:0;left:0;right:0;width:auto;webkittransform:tr
anslate3d(0,100%,0);transform:translate3d(0,100%,0);}}</style><divclass="layouthorizo
ntal"><divclass="label">Addedtocart</div></div><divclass="layouthorizontal"><shopbu
ttonclass="modalbutton"><ahref="/cart"onclick="close"id="viewCartAnchor">ViewCart<
/a></shopbutton><shopbuttonclass="modalbutton"><ahref="/checkout"onclick="close
">Checkout</a></shopbutton></div><papericonbuttonicon="close"id="closeBtn"ariala
bel="Closedialog"onclick="close"></papericonbutton>`;}staticgetis(){return'shopcartm
odal';}staticgetproperties(){return{withBackdrop:{type:Boolean,value:true}}}ready(){sup
8
482.ЧДТУ.21827-01 12 01
er.ready();this.setAttribute('role','dialog');this.setAttribute('ariamodal','true');this.addEve
ntListener('transitionend',(e)=>this._transitionEnd(e));this.addEventListener('ironoverlay
canceled',(e)=>this._onCancel(e));}_renderOpened(){this.restoreFocusOnClose=true;this
.backdropElement.style.display='none';this.classList.add('opened');}_renderClosed(){this
.classList.remove('opened');}_onCancel(e){//Don'trestorefocuswhentheoverlayiscloseda
fteramouseeventif(e.detailinstanceofMouseEvent){this.restoreFocusOnClose=false;}}_tr
ansitionEnd(e){if(e.target!==this||e.propertyName!=='transform'){return;}if(this.opened
){this._finishRenderOpened();this.fire('announce','Itemaddedtothecart');}else{this._finis
hRenderClosed();this.backdropElement.style.display='';}}get_focusableNodes(){return[t
his.$.viewCartAnchor,this.$.closeBtn];}refit(){}notifyResize(){}}customElements.define(S
hopCartModal.is,ShopCartModal);import{PolymerElement,html}from'@polymer/polym
er/polymerelement.js';import'./shopbutton.js';import'./shopcommonstyles.js';import'./s
hopformstyles.js';classShopCartextendsPolymerElement{staticgettemplate(){returnhtm
l`<styleinclude="shopcommonstylesshopbuttonshopformstyles">.list{margin:40px0;}.c
heckoutbox{fontweight:bold;textalign:right;marginright:10px;}.subtotal{margin:064px0
24px;}@media(maxwidth:767px){.subtotal{margin:00024px;}}</style><divclass="mainfr
ame"><divclass="subsection"visible$="[[!_hasItems]]"><pclass="emptycart">Your<ironi
conicon="shoppingcart"></ironicon>isempty.</p></div><divclass="subsection"visible$=
"[[_hasItems]]"><header><h1>YourCart</h1><span>([[_getPluralizedQuantity(cart.lengt
h)]])</span></header><divclass="list"><domrepeatitems="[[cart]]"as="entry"><templat
e><shopcartitementry="[[entry]]"></shopcartitem></template></domrepeat></div><di
vclass="checkoutbox">Total:<spanclass="subtotal">[[_formatTotal(total)]]</span><sho
pbuttonresponsive><ahref="/checkout">Checkout</a></shopbutton></div></div></div
>`;}staticgetis(){return'shopcart';}staticgetproperties(){return{total:Number,cart:Array,v
isible:{type:Boolean,observer:'_visibleChanged'},_hasItems:{type:Boolean,computed:'_c
omputeHasItem(cart.length)'}}}_formatTotal(total){returnisNaN(total)?'':'$'+total.toFixed
(2);}_computeHasItem(cartLength){returncartLength>0;}_getPluralizedQuantity(quantit
y){returnquantity+''+(quantity===1?'item':'items');}_visibleChanged(visible){if(visible){//N
otifythesection'stitlethis.dispatchEvent(newCustomEvent('changesection',{bubbles:true,
composed:true,detail:{title:'Yourcart'}}));}}}customElements.define(ShopCart.is,ShopCar
t);import{PolymerElement,html}from'@polymer/polymer/polymerelement.js';import{D
ebouncer}from'@polymer/polymer/lib/utils/debounce.js';import{timeOut}from'@poly
mer/polymer/lib/utils/async.js';letcategoryList=[{name:'computers',title:'Computers',im
age:'images/mens_tshirts.jpg',placeholder:'data:image/jpeg;base64,/9j/4QAYRXhpZgAA
SUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAeAAD/7gAOQWRvYmUAZMAA
AAAB/9sAhAAQCwsLDAsQDAwQFw8NDxcbFBAQFBsfFxcXFxcfHhcaGhoaFx4eIyUnJSMeL
y8zMy8vQEBAQEBAQEBAQEBAQEBAAREPDxETERUSEhUUERQRFBoUFhYUGiYaGhwaGi
YwIx4eHh4jMCsuJycnLis1NTAwNTVAQD9AQEBAQEBAQEBAQED/wAARCAADAA4DASIAA
hEBAxEB/8QAWwABAQEAAAAAAAAAAAAAAAAAAAMEAQEAAAAAAAAAAAAAAAAAAAAA
EAABAwEJAAAAAAAAAAAAAAARAAESEyFhodEygjMUBREAAwAAAAAAAAAAAAAAAAAAAE
FC/9oADAMBAAIRAxEAPwDb7kupZU1MTGnvOCgxpvzEXTyRElCmf//Z',},{name:'tablets',t
itle:'Tablets',image:'images/ladies_tshirts.jpg',placeholder:'data:image/jpeg;base64,/9j/4
QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAeAAD/7gAOQ
WRvYmUAZMAAAAAB/9sAhAAQCwsLDAsQDAwQFw8NDxcbFBAQFBsfFxcXFxcfHhcaGho
9
482.ЧДТУ.21827-01 12 01
aFx4eIyUnJSMeLy8zMy8vQEBAQEBAQEBAQEBAQEBAAREPDxETERUSEhUUERQRFBoUF
hYUGiYaGhwaGiYwIx4eHh4jMCsuJycnLis1NTAwNTVAQD9AQEBAQEBAQEBAQED/wAAR
CAADAA4DASIAAhEBAxEB/8QAXwABAQEAAAAAAAAAAAAAAAAAAAMFAQEBAAAAAAAA
AAAAAAAAAAABAhAAAQIDCQAAAAAAAAAAAAAAEQABITETYZECEjJCAzMVEQACAwAAAA
AAAAAAAAAAAAAAATFBgf/aAAwDAQACEQMRAD8AzeADAZiFc5J7BC9Scek3VrtooilSNaf/
2Q==',},{name:'phones',title:'Phones',image:'images/allPhones.jpeg',placeholder:'data:i
mage/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABA
AQAAAAeAAD/7gAOQWRvYmUAZMAAAAAB/9sAhAAQCwsLDAsQDAwQFw8NDxcbFBAQ
FBsfFxcXFxcfHhcaGhoaFx4eIyUnJSMeLy8zMy8vQEBAQEBAQEBAQEBAQEBAAREPDxETE
RUSEhUUERQRFBoUFhYUGiYaGhwaGiYwIx4eHh4jMCsuJycnLis1NTAwNTVAQD9AQEBA
QEBAQEBAQED/wAARCAADAA4DASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAA
AAEBAQEAAAAAAAAAAAAAAAAAAAIDEAABAwMFAQAAAAAAAAAAAAARAAEygRIDIlITMw
UVEQEBAAAAAAAAAAAAAAAAAAAAQf/aAAwDAQACEQMRAD8Avqn5meQ0kwk1UyclmL
tNj7L4PQoioFf/2Q==',},{name:'watch',title:'Watch',image:'images/ladies_tshirts.jpg',plac
eholder:'',},{name:'printers',title:'Printers',image:'images/ladies_tshirts.jpg',placeholder:'
',},{name:'routers',title:'Routers',image:'images/ladies_tshirts.jpg',placeholder:'',},{name:
'cleaning',title:'Cleaning',image:'images/mens_outerwear.jpg',placeholder:'data:image/j
peg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAA
AeAAD/7gAOQWRvYmUAZMAAAAAB/9sAhAAQCwsLDAsQDAwQFw8NDxcbFBAQFBsfFx
cXFxcfHhcaGhoaFx4eIyUnJSMeLy8zMy8vQEBAQEBAQEBAQEBAQEBAAREPDxETERUSEh
UUERQRFBoUFhYUGiYaGhwaGiYwIx4eHh4jMCsuJycnLis1NTAwNTVAQD9AQEBAQEBAQ
EBAQED/wAARCAADAA4DASIAAhEBAxEB/8QAXAABAQEAAAAAAAAAAAAAAAAAAAIEAQE
AAAAAAAAAAAAAAAAAAAACEAAAAwYHAQAAAAAAAAAAAAAAERMBAhIyYhQhkaEDIwU
VNREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A3dkr5e8tfpwuneJITOzIcm
Qpit037Bw4mnCVNOpAAQv/2Q==',},{name:'game_console',title:'GameConsole',image:'i
mages/ladies_tshirts.jpg',placeholder:'',},];classShopCategoryDataextendsPolymerElem
ent{staticgetis(){return'shopcategorydata';}staticgetproperties(){return{categoryName:
String,itemName:String,categories:{type:Array,value:categoryList,readOnly:true,notify:tr
ue,},category:{type:Object,computed:'_computeCategory(categoryName)',notify:true,},it
em:{type:Object,computed:'_computeItem(category.items,itemName)',notify:true,},failu
re:{type:Boolean,notify:true,readOnly:true,},};}_getCategoryObject(categoryName){for(l
eti=0,c;(c=this.categories[i]);++i){if(c.name===categoryName){returnc;}}}_computeCateg
ory(categoryName){//Fetchtheitemsofthecategory.Notethatthefetchisasynchronous,//w
hichmeans`category.items`maynotbesetinitially(butthatpath//willbenotifiedwhenthefe
tchcompletes).letcategoryObj=this._getCategoryObject(categoryName);this._fetchItems(
categoryObj,1);returncategoryObj;}_computeItem(items,itemName){if(!items||!itemNa
me){return;}for(leti=0,item;(item=items[i]);++i){if(item.name===itemName){returnitem;}
}}_fetchItems(category,attempts){this._setFailure(false);//Onlyfetchtheitemsofacategoryi
fithasnotbeenpreviouslyset.if(!category||category.items){return;}this._getResource({url
:'data/'+category.name+'.json',onLoad(e){this.set('category.items',JSON.parse(e.target.r
esponseText));},onError(e){this._setFailure(true);},},attempts);}_getResource(rq,attempts
){letxhr=newXMLHttpRequest();xhr.addEventListener('load',rq.onLoad.bind(this));xhr.ad
dEventListener('error',(e)=>{//Flakyconnectionsmightfailfetchingresourcesif(attempts>1
){this._getResourceDebouncer=Debouncer.debounce(this._getResourceDebouncer,tim
10
482.ЧДТУ.21827-01 12 01
eOut.after(200),this._getResource.bind(this,rq,attempts1));}else{rq.onError.call(this,e);}}
);xhr.open('GET',rq.url);xhr.send();}refresh(){if(this.categoryName){//Tryatmost3timesto
gettheitems.this._fetchItems(this._getCategoryObject(this.categoryName),3);}}}customE
lements.define(ShopCategoryData.is,ShopCategoryData);import'@polymer/polymer/po
lymerelement.js';const$_documentContainer=document.createElement('template');$_d
ocumentContainer.innerHTML=`<dommoduleid="shopcheckbox"><template><style>s
hopcheckbox{display:inlineblock;width:14px;height:14px;position:relative;border:2pxso
lidvar(appaccentcolor);borderradius:2px;}shopcheckbox>input[type=checkbox]{positio
n:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;}shopcheckbox>sho
pmddecorator{pointerevents:none;}/*Checkedstateoverlay*/shopcheckbox>shopmdd
ecorator::after{content:'';position:absolute;top:5px;left:5px;right:5px;bottom:5px;backg
roundimage:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.
w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath
%20fill%3D%22%23172C50%22%20d%3D%22M19%203H5c1.11%2002%20.92%202v14
c0%201.1.89%202%202%202h14c1.11%200%202.9%2022V5c01.1.89222zm9%2014l55
%201.411.41L10%2014.17l7.597.59L19%208l9%209z%22%2F%3E%3C%2Fsvg%3E');opac
ity:0;transition:opacity0.1s;willchange:opacity;}shopcheckbox>input[type=checkbox]:ch
ecked+shopmddecorator::after{opacity:1;}/*Focusedstate*/shopcheckbox>shopmddec
orator::before{content:'';pointerevents:none;position:absolute;top:13px;left:13px;width
:40px;height:40px;backgroundcolor:var(appaccentcolor);borderradius:50%;opacity:0.2;
webkittransform:scale3d(0,0,0);transform:scale3d(0,0,0);transition:webkittransform0.1s
;transition:transform0.1s;willchange:transform;}shopcheckbox>input[type=checkbox]:f
ocus+shopmddecorator::before{webkittransform:scale3d(1,1,1);transform:scale3d(1,1,
1);}</style></template></dommodule>`;document.head.appendChild($_documentCon
tainer.content);import{PolymerElement,html}from'@polymer/polymer/polymerelemen
t.js';import'@polymer/approute/approute.js';import'@polymer/ironflexlayout/ironflexla
yout.js';import'./shopbutton.js';import'./shopcommonstyles.js';import'./shopformstyles.
js';import'./shopinput.js';import'./shopselect.js';import'./shopcheckbox.js';import{Debo
uncer}from'@polymer/polymer/lib/utils/debounce.js';import{timeOut}from'@polymer/
polymer/lib/utils/async.js';classShopCheckoutextendsPolymerElement{staticgettemplat
e(){returnhtml`<styleinclude="shopcommonstylesshopbuttonshopformstylesshopinpu
tshopselectshopcheckbox">.mainframe{transition:opacity0.5s;}:host([waiting]).mainfra
me{opacity:0.1;}shopinput,shopselect{fontsize:16px;}shopselect{marginbottom:20px;}
paperspinnerlite{position:fixed;top:calc(50%14px);left:calc(50%14px);}.billingaddresspic
ker{margin:28px0;height:20px;@applylayouthorizontal;}.billingaddresspicker>label{ma
rginleft:12px;}.grid{margintop:40px;@applylayouthorizontal;}.grid>section{@applylayo
utflex;}.grid>section:not(:firstchild){marginleft:80px;}.row{@applylayouthorizontal;@ap
plylayoutend;}.column{@applylayoutvertical;}.row>.flex,.inputrow>*{@applylayoutflex;}
.inputrow>*:not(:firstchild){marginleft:8px;}.shopselectlabel{lineheight:20px;}.ordersu
mmaryrow{lineheight:24px;}.totalrow{fontweight:500;margin:30px0;}@media(maxwidt
h:767px){.grid{display:block;margintop:0;}.grid>section:not(:firstchild){marginleft:0;}}</
style><divclass="mainframe"><ironpagesid="pages"selected="[[state]]"attrforselected=
"state"><divstate="init"><ironformid="checkoutForm"onironformresponse="_didReceiv
eResponse"onironformpresubmit="_willSendRequest"><formmethod="post"action="d
11
482.ЧДТУ.21827-01 12 01
ata/sample_success_response.json"enctype="application/xwwwformurlencoded"><divc
lass="subsection"visible$="[[!_hasItems]]"><pclass="emptycart">Your<ironiconicon="sh
oppingcart"></ironicon>isempty.</p></div><headerclass="subsection"visible$="[[_hasI
tems]]"><h1>Checkout</h1></header><divclass="subsectiongrid"visible$="[[_hasItems
]]"><section><h2id="accountInfoHeading">AccountInformation</h2><divclass="rowinp
utrow"><shopinput><inputtype="email"id="accountEmail"name="accountEmail"placeh
older="Email"autofocusrequiredarialabelledby="accountEmailLabelaccountInfoHeadin
g"><shopmddecoratorerrormessage="InvalidEmail"ariahidden="true"><labelid="accou
ntEmailLabel">Email</label><shopunderline></shopunderline></shopmddecorator></
shopinput></div><divclass="rowinputrow"><shopinput><inputtype="tel"id="accountPh
one"name="accountPhone"pattern="\\d{10,}"placeholder="PhoneNumber"requiredari
alabelledby="accountPhoneLabelaccountInfoHeading"><shopmddecoratorerrormessa
ge="InvalidPhoneNumber"ariahidden="true"><labelid="accountPhoneLabel">PhoneNu
mber</label><shopunderline></shopunderline></shopmddecorator></shopinput></di
v><h2id="shipAddressHeading">ShippingAddress</h2><divclass="rowinputrow"><sho
pinput><inputtype="text"id="shipAddress"name="shipAddress"pattern=".{5,}"placehol
der="Address"requiredarialabelledby="shipAddressLabelshipAddressHeading"><shop
mddecoratorerrormessage="InvalidAddress"ariahidden="true"><labelid="shipAddress
Label">Address</label><shopunderline></shopunderline></shopmddecorator></shop
input></div><divclass="rowinputrow"><shopinput><inputtype="text"id="shipCity"nam
e="shipCity"pattern=".{2,}"placeholder="City"requiredarialabelledby="shipCityLabelship
AddressHeading"><shopmddecoratorerrormessage="InvalidCity"ariahidden="true"><la
belid="shipCityLabel">City</label><shopunderline></shopunderline></shopmddecorat
or></shopinput></div><divclass="rowinputrow"><shopinput><inputtype="text"id="shi
pState"name="shipState"pattern=".{2,}"placeholder="State/Province"requiredarialabell
edby="shipStateLabelshipAddressHeading"><shopmddecoratorerrormessage="Invalid
State/Province"ariahidden="true"><labelid="shipStateLabel">State/Province</label><s
hopunderline></shopunderline></shopmddecorator></shopinput><shopinput><input
type="text"id="shipZip"name="shipZip"pattern=".{4,}"placeholder="Zip/PostalCode"req
uiredarialabelledby="shipZipLabelshipAddressHeading"><shopmddecoratorerrormess
age="InvalidZip/PostalCode"ariahidden="true"><labelid="shipZipLabel">Zip/PostalCode
</label><shopunderline></shopunderline></shopmddecorator></shopinput></div><di
vclass="column"><labelid="shipCountryLabel"class="shopselectlabel">Country</label>
<shopselect><selectid="shipCountry"name="shipCountry"requiredarialabelledby="ship
CountryLabelshipAddressHeading"><optionvalue="US"selected>UnitedStates</option>
<optionvalue="Ukr">Ukraine</option><optionvalue="UK">UnitedKingdom</option><o
ptionvalue="PO">Poland</option></select><shopmddecoratorariahidden="true"><sho
punderline></shopunderline></shopmddecorator></shopselect></div><h2id="billAddr
essHeading">BillingAddress</h2><divclass="billingaddresspicker"><shopcheckbox><in
puttype="checkbox"id="setBilling"name="setBilling"checked$="[[hasBillingAddress]]"on
change="_toggleBillingAddress"><shopmddecorator></shopmddecoratorariahidden="t
rue"></shopcheckbox><labelfor="setBilling">Usedifferentbillingaddress</label></div><
divhidden$="[[!hasBillingAddress]]"><divclass="rowinputrow"><shopinput><inputtype=
"text"id="billAddress"name="billAddress"pattern=".{5,}"placeholder="Address"required
12
482.ЧДТУ.21827-01 12 01
$="[[hasBillingAddress]]"autocomplete="billingstreetaddress"arialabelledby="billAddre
ssLabelbillAddressHeading"><shopmddecoratorerrormessage="InvalidAddress"ariahid
den="true"><labelid="billAddressLabel">Address</label><shopunderline></shopunder
line></shopmddecorator></shopinput></div><divclass="rowinputrow"><shopinput><i
nputtype="text"id="billCity"name="billCity"pattern=".{2,}"placeholder="City"required$=
"[[hasBillingAddress]]"autocomplete="billingaddresslevel2"arialabelledby="billCityLabel
billAddressHeading"><shopmddecoratorerrormessage="InvalidCity"ariahidden="true">
<labelid="billCityLabel">City</label><shopunderline></shopunderline></shopmddecor
ator></shopinput></div><divclass="rowinputrow"><shopinput><inputtype="text"id="bi
llState"name="billState"pattern=".{2,}"placeholder="State/Province"required$="[[hasBill
ingAddress]]"autocomplete="billingaddresslevel1"arialabelledby="billStateLabelbillAdd
ressHeading"><shopmddecoratorerrormessage="InvalidState/Province"ariahidden="tr
ue"><labelid="billStateLabel">State/Province</label><shopunderline></shopunderline
></shopmddecorator></shopinput><shopinput><inputtype="text"id="billZip"name="bi
llZip"pattern=".{4,}"placeholder="Zip/PostalCode"required$="[[hasBillingAddress]]"auto
complete="billingpostalcode"arialabelledby="billZipLabelbillAddressHeading"><shopm
ddecoratorerrormessage="InvalidZip/PostalCode"ariahidden="true"><labelid="billZipLa
bel">Zip/PostalCode</label><shopunderline></shopunderline></shopmddecorator></
shopinput></div><divclass="column"><labelid="billCountryLabel"class="shopselectlabe
l">Country</label><shopselect><selectid="billCountry"name="billCountry"required$="[
[hasBillingAddress]]"autocomplete="billingcountry"arialabelledby="billCountryLabelbill
AddressHeading"><optionvalue="US"selected>UnitedStates</option><optionvalue="CA
">Canada</option></select><shopmddecoratorariahidden="true"><shopunderline></s
hopunderline></shopmddecorator></shopselect></div></div></section><section><h2
>PaymentMethod</h2><divclass="rowinputrow"><shopinput><inputtype="text"id="cc
Name"name="ccName"pattern=".{3,}"placeholder="CardholderName"requiredautoco
mplete="ccname"><shopmddecoratorerrormessage="InvalidCardholderName"ariahid
den="true"><labelfor="ccName">CardholderName</label><shopunderline></shopund
erline></shopmddecorator></shopinput></div><divclass="rowinputrow"><shopinput>
<inputtype="tel"id="ccNumber"name="ccNumber"pattern="[\\d\\s]{15,}"placeholder="
CardNumber"requiredautocomplete="ccnumber"><shopmddecoratorerrormessage="I
nvalidCardNumber"ariahidden="true"><labelfor="ccNumber">CardNumber</label><sh
opunderline></shopunderline></shopmddecorator></shopinput></div><divclass="row
inputrow"><divclass="column"><labelfor="ccExpMonth">Expiry</label><shopselect><s
electid="ccExpMonth"name="ccExpMonth"requiredautocomplete="ccexpmonth"ariala
bel="Expirymonth"><optionvalue="01"selected>Jan</option><optionvalue="02">Feb</
option><optionvalue="03">Mar</option><optionvalue="04">Apr</option><optionvalu
e="05">May</option><optionvalue="06">Jun</option><optionvalue="07">Jul</option>
<optionvalue="08">Aug</option><optionvalue="09">Sep</option><optionvalue="10">
Oct</option><optionvalue="11">Nov</option><optionvalue="12">Dec</option></selec
t><shopmddecoratorariahidden="true"><shopunderline></shopunderline></shopmdd
ecorator></shopselect></div><shopselect><selectid="ccExpYear"name="ccExpYear"req
uiredautocomplete="ccexpyear"arialabel="Expiryyear"><optionvalue="2016"selected>2
016</option><optionvalue="2017">2017</option><optionvalue="2018">2018</option>
13
482.ЧДТУ.21827-01 12 01
<optionvalue="2019">2019</option><optionvalue="2020">2020</option><optionvalue
="2021">2021</option><optionvalue="2022">2022</option><optionvalue="2023">202
3</option><optionvalue="2024">2024</option><optionvalue="2025">2025</option><o
ptionvalue="2026">2026</option></select><shopmddecoratorariahidden="true"><sho
punderline></shopunderline></shopmddecorator></shopselect><shopinput><inputty
pe="tel"id="ccCVV"name="ccCVV"pattern="\\d{3,4}"placeholder="CVV"requiredautoco
mplete="cccsc"><shopmddecoratorerrormessage="InvalidCVV"ariahidden="true"><lab
elfor="ccCVV">CVV</label><shopunderline></shopunderline></shopmddecorator></s
hopinput></div><h2>OrderSummary</h2><domrepeatitems="[[cart]]"as="entry"><te
mplate><divclass="rowordersummaryrow"><divclass="flex">[[entry.item.title]]</div><d
iv>[[_getEntryTotal(entry)]]</div></div></template></domrepeat><divclass="rowtotalro
w"><divclass="flex">Total</div><div>[[_formatPrice(total)]]</div></div><shopbuttonres
ponsiveid="submitBox"><inputtype="button"onclick="_submit"value="PlaceOrder"></s
hopbutton></section></div></form></ironform></div><!SuccessmessageUI><headerst
ate="success"><h1>Thankyou</h1><p>[[response.successMessage]]</p><shopbuttonr
esponsive><ahref="/">Finish</a></shopbutton></header><!ErrormessageUI><headers
tate="error"><h1>Wecouldn´tprocessyourorder</h1><pid="errorMessage">[[res
ponse.errorMessage]]</p><shopbuttonresponsive><ahref="/checkout">Tryagain</a></
shopbutton></header></ironpages></div><!Handlestheroutingforthesuccessanderrors
ubroutes><approuteactive="{{routeActive}}"data="{{routeData}}"route="[[route]]"patte
rn="/:state"></approute><!Showspinnerwhenwaitingfortheservertorepond><paperspin
nerliteactive="[[waiting]]"></paperspinnerlite>`;}staticgetis(){return'shopcheckout';}sta
ticgetproperties(){return{/***Therouteforthestate.e.g.`success`and`error`aremounte
dinthe*`checkout/`route.*/route:{type:Object,notify:true,},/***Thetotalpriceofthecont
entsintheuser'scart.*/total:Number,/***Thestateoftheform.Validvaluesare:*`init`,`suc
cess`and`error`.*/state:{type:String,value:'init',},/***Anarraycontainingtheitemsinthec
art.*/cart:Array,/***Theserver'sresponse.*/response:Object,/***Iftrue,theusermustent
erabillingaddress.*/hasBillingAddress:{type:Boolean,value:false,},/***Iftrue,shopchecko
utiscurrentlyvisibleonthescreen.*/visible:{type:Boolean,observer:'_visibleChanged',},/**
*Truewhenwaitingfortheservertorepond.*/waiting:{type:Boolean,readOnly:true,reflectT
oAttribute:true,},/***Truewhenwaitingfortheservertorepond.*/_hasItems:{type:Boolea
n,computed:'_computeHasItem(cart.length)',},};}staticgetobservers(){return['_updateSta
te(routeActive,routeData)'];}_submit(e){if(this._validateForm()){//Tosendtheformdatatot
heserver://2)Removethecodebelow.//3)Uncomment`this.$.checkoutForm.submit()`.thi
s.$.checkoutForm.dispatchEvent(newCustomEvent('ironformpresubmit',{composed:tru
e,}));this._submitFormDebouncer=Debouncer.debounce(this._submitFormDebouncer,ti
meOut.after(1000),()=>{this.$.checkoutForm.dispatchEvent(newCustomEvent('ironform
response',{composed:true,detail:{response:{success:1,successMessage:'Democheckout
processcomplete.',},},}));});//this.$.checkoutForm.submit();}}/***Setsthevalidstateandup
datesthelocation.*/_pushState(state){this._validState=state;this.set('route.path',state);}/
***Checksthatthe`:state`subrouteiscorrect.Thatis,thestatehasbeenpushed*afterreceiv
ingresponsefromtheserver.e.g.Userscanonlygoto`/checkout/success`*iftheserverrespo
nsedwithasuccessmessage.*/_updateState(active,routeData){if(active&&routeData){lets
tate=routeData.state;if(this._validState===state){this.state=state;this._validState='';retur
14
482.ЧДТУ.21827-01 12 01
n;}}this.state='init';}/***Setstheinitialstate.*/_reset(){letform=this.$.checkoutForm;this._
setWaiting(false);form.reset&&form.reset();letnativeForm=form._form;if(!nativeForm){r
eturn;}//Removethe`ariainvalid`attributefromtheforminputs.for(letel,i=0;(el=nativeFor
m.elements[i]),i<nativeForm.elements.length;i++){el.removeAttribute('ariainvalid');}}/**
*Validatestheform'sinputsandaddsthe`ariainvalid`attributetotheinputs*thatdon'tmatc
hthepatternspecifiedinthemarkup.*/_validateForm(){letform=this.$.checkoutForm;letfir
stInvalid=false;letnativeForm=form._form;for(letel,i=0;(el=nativeForm.elements[i]),i<nati
veForm.elements.length;i++){if(el.checkValidity()){el.removeAttribute('ariainvalid');}else{
if(!firstInvalid){//announceerrormessageif(el.nextElementSibling){this.dispatchEvent(ne
wCustomEvent('announce',{bubbles:true,composed:true,detail:el.nextElementSibling.g
etAttribute('errormessage'),}));}if(el.scrollIntoViewIfNeeded){//safari,chromeel.scrollInto
ViewIfNeeded();}else{//firefox,edge,ieel.scrollIntoView(false);}el.focus();firstInvalid=true;
}el.setAttribute('ariainvalid','true');}}return!firstInvalid;}/***Addsthecartdatatothepayloa
dthatwillbesenttotheserver*andupdatestheUItoreflectthewaitingstate.*/_willSendRequ
est(e){letform=e.target;letbody=form.request&&form.request.body;this._setWaiting(tru
e);if(!body){return;}//Populatetherequestbodywhere`cartItemsId[i]`istheIDand`cartIte
msQuantity[i]`//isthequantityforsomeitem`i`.body.cartItemsId=[];body.cartItemsQuan
tity=[];this.cart.forEach((cartItem)=>{body.cartItemsId.push(cartItem.item.name);body.c
artItemsQuantity.push(cartItem.quantity);});}/***Handlestheresponsefromtheserverby
checkingtheresponsestatus*andtransitioningtothesuccessorerrorUI.*/_didReceiveResp
onse(e){letresponse=e.detail.response;this.response=response;this._setWaiting(true);if(
response.success){this._pushState('success');this._reset();this.dispatchEvent(newCusto
mEvent('clearcart',{bubbles:true,composed:true}));}else{this._pushState('error');}}_toggl
eBillingAddress(e){this.hasBillingAddress=e.target.checked;if(this.hasBillingAddress){thi
s.$.billAddress.focus();}}_computeHasItem(cartLength){returncartLength>0;}_formatPri
ce(total){returnisNaN(total)?'':'$'+total.toFixed(2);}_getEntryTotal(entry){returnthis._form
atPrice(entry.quantity*entry.item.price);}_visibleChanged(visible){if(!visible){return;}//Re
settheUIstatesthis._reset();//Notifythepage'stitlethis.dispatchEvent(newCustomEvent('c
hangesection',{bubbles:true,composed:true,detail:{title:'Checkout'},}));}}customElement
s.define(ShopCheckout.is,ShopCheckout);import'@polymer/polymer/polymerelement.j
s';import'@polymer/ironflexlayout/ironflexlayout.js';const$_documentContainer=docu
ment.createElement('template');$_documentContainer.innerHTML=`<dommoduleid="s
hopcommonstyles"><template><style>[hidden]{display:none!important;}header{textali
gn:center;}header>h1{margin:004px0;fontsize:1.3em;fontweight:500;}header>span{col
or:var(appsecondarycolor);fontsize:12px;}header>shopbutton[responsive]{margintop:2
0px;}@media(maxwidth:767px){header>h1{fontsize:1.1em;}}</style></template></dom
module>`;document.head.appendChild($_documentContainer.content);import{Polyme
rElement,html}from'@polymer/polymer/polymerelement.js';import'@polymer/approut
e/approute.js';import'@polymer/ironflexlayout/ironflexlayout.js';import'./shopbutton.js
';import'./shopcategorydata.js';import'./shopcommonstyles.js';import'./shopimage.js';i
mport'./shopselect.js';import{Debouncer}from'@polymer/polymer/lib/utils/debounce.js
';import{microTask}from'@polymer/polymer/lib/utils/async.js';classShopDetailextendsP
olymerElement{staticgettemplate(){returnhtml`<styleinclude="shopcommonstylessho
pbuttonshopselect">:host{display:block;}#content{@applylayouthorizontal;@applylayo
15
482.ЧДТУ.21827-01 12 01
utcenterjustified;}shopimage{position:relative;margin:64px32px;width:50%;maxwidth:6
00px;shopimageimg:{@applylayoutfit;}}shopimage::before{content:'';display:block;pad
dingtop:100%;}.detail{margin:64px32px;width:50%;maxwidth:400px;transition:opacity0
.4s;opacity:0;}.detail[hascontent]{opacity:1;}h1{fontsize:24px;fontweight:500;lineheight:
28px;margin:0;}.price{margin:16px040px;fontsize:16px;color:var(appsecondarycolor);}.
description{margin:32px0;}.description>h2{margin:16px0;fontsize:13px;}.description>p
{margin:0;color:var(appsecondarycolor);}.pickers{@applylayoutvertical;bordertop:1pxs
olid#ccc;}shopselect>select{fontsize:16px;padding:16px24px16px70px;}@media(maxwi
dth:767px){#content{@applylayoutvertical;@applylayoutcenter;}shopimage{margin:0;w
idth:80%;}.detail{boxsizing:borderbox;margin:32px0;padding:024px;width:100%;maxwi
dth:600px;}h1{fontsize:20px;lineheight:24px;}.price{fontsize:inherit;margin:12px032px;
}}</style><!approuteprovidesthenameofthecategoryandtheitem.><approuteroute="[[ro
ute]]"pattern="/:category/:item"data="{{routeData}}"></approute><!shopcategorydata
providestheitemdataforagivencategoryanditemname.><shopcategorydataid="category
Data"categoryname="[[routeData.category]]"itemname="[[routeData.item]]"item="{{ite
m}}"failure="{{failure}}"></shopcategorydata><divid="content"hidden$="[[failure]]"><s
hopimagealt="[[item.title]]"src="[[item.largeImage]]"></shopimage><divclass="detail"h
ascontent$="[[_isDefined(item)]]"><h1>[[item.title]]</h1><divclass="price">[[_formatPri
ce(item.price)]]</div><divclass="pickers"><shopselect><labelid="sizeLabel"prefix>Stora
ge</label><selectid="sizeSelect"arialabelledby="sizeLabel"><optionvalue="XS">64GB</
option><optionvalue="S">128GB</option><optionvalue="M"selected>256GB</option>
<optionvalue="L">512GB</option><optionvalue="XL">1T</option></select><shopmdd
ecoratorariahidden="true"><shopunderline></shopunderline></shopmddecorator></s
hopselect><shopselect><labelid="quantityLabel"prefix>Quantity</label><selectid="qua
ntitySelect"arialabelledby="quantityLabel"><optionvalue="1"selected>1</option><opti
onvalue="2">2</option><optionvalue="3">3</option><optionvalue="4">4</option><op
tionvalue="5">5</option></select><shopmddecoratorariahidden="true"><shopunderli
ne></shopunderline></shopmddecorator></shopselect></div><divclass="description"
><h2>Description</h2><pid="desc"></p></div><shopbuttonresponsive><buttononclick
="_addToCart"arialabel="Addthisitemtocart">AddtoCart</button></shopbutton></div>
</div><!shopnetworkwarningshowsawarningmessagewhentheitemscan'tberendereddu
etonetworkconditions.><shopnetworkwarninghidden$="[[!failure]]"offline="[[offline]]"o
ntryreconnect="_tryReconnect"></shopnetworkwarning>`;}staticgetis(){return'shopdet
ail';}staticgetproperties(){return{item:Object,route:Object,routeData:Object,visible:{type
:Boolean,value:false,},offline:{type:Boolean,observer:'_offlineChanged',},failure:Boolean
,};}staticgetobservers(){return['_itemChanged(item,visible)'];}_itemChanged(item,visible)
{if(visible){this._itemChangeDebouncer=Debouncer.debounce(this._itemChangeDebou
ncer,microTask,()=>{//TheitemdescriptioncontainsescapedHTML(e.g."<br>"),sowen
eedto//unescapeit("<br>")andsetitasinnerHTML.lettext=item?item.description:'';this.$.d
esc.innerHTML=this._unescapeText(text);//Resettheselectmenus.this.$.quantitySelect.v
alue='1';this.$.sizeSelect.value='M';this.dispatchEvent(newCustomEvent('changesection'
,{bubbles:true,composed:true,detail:{category:item?item.category:'',title:item?item.title:
'',description:item?item.description.substring(0,100):'',image:item?this.baseURI+item.im
age:'',},}));});}}_unescapeText(text){letelem=document.createElement('textarea');elem.in
16
482.ЧДТУ.21827-01 12 01
nerHTML=text;returnelem.textContent;}_formatPrice(price){returnprice?'$'+price.toFixe
d(2):'';}_addToCart(){//Thiseventwillbehandledbyshopapp.this.dispatchEvent(newCusto
mEvent('addcartitem',{bubbles:true,composed:true,detail:{item:this.item,quantity:pars
eInt(this.$.quantitySelect.value,10),size:this.$.sizeSelect.value,},}));}_isDefined(item){retu
rnitem!=null;}_tryReconnect(){this.$.categoryData.refresh();}_offlineChanged(offline){if(!
offline){this._tryReconnect();}}}customElements.define(ShopDetail.is,ShopDetail);import
'@polymer/polymer/polymerelement.js';import'@polymer/ironflexlayout/ironflexlayout
.js';const$_documentContainer=document.createElement('template');$_documentCont
ainer.innerHTML=`<dommoduleid="shopformstyles"><template><style>:host{display:
block;}.mainframe{margin:0auto;padding:024px48px24px;maxwidth:900px;overflow:hi
dden;}.subsection:not([visible]){display:none;}.emptycart{textalign:center;whitespace:n
owrap;color:var(appsecondarycolor);}h2{fontsize:13px;}</style></template></dommod
ule>`;document.head.appendChild($_documentContainer.content);import{PolymerEle
ment,html}from'@polymer/polymer/polymerelement.js';import'./shopbutton.js';import'
./shopimage.js';classShopHomeextendsPolymerElement{staticgettemplate(){returnhtm
l`<styleinclude="shopbutton">.imagelink{outline:none;}.imagelink>shopimage::after{di
splay:block;content:'';position:absolute;transitionproperty:opacity;transitionduration:0s
;transitiondelay:90ms;pointerevents:none;opacity:0;top:5px;left:5px;right:5px;bottom:5
px;outline:#2196F3auto5px;outline:mozmacfocusringauto5px;outline:webkitfocusringc
olorauto5px;}.imagelink:focus>shopimage::after{opacity:1;}.item{display:block;textdeco
ration:none;textalign:center;marginbottom:40px;}.item:nthoftype(3),.item:nthoftype(4){
display:inlineblock;width:50%;}shopimage{position:relative;height:320px;overflow:hidd
en;shopimageimg:{position:absolute;top:0;bottom:0;left:9999px;right:9999px;maxwidt
h:none;};}h2{fontsize:1.3em;fontweight:500;margin:32px0;}.item:nthoftype(3)>h2,.item:
nthoftype(4)>h2{fontsize:1.1em;}@media(maxwidth:767px){shopimage{height:240px;}
h2{margin:24px0;}.item:nthoftype(3)>shopbutton>a,.item:nthoftype(4)>shopbutton>a{
padding:8px24px;}}</style><domrepeatitems="[[categories]]"><templatestripwhitespa
ce=""><divclass="item"><aclass="imagelink"href\$="/list/[[item.name]]"><shopimagesr
c="[[item.image]]"alt="[[item.title]]"placeholderimg="[[item.placeholder]]"></shopimag
e></a><h2>[[item.title]]</h2><shopbutton><aarialabel\$="[[item.title]]ShopNow"href\$
="/list/[[item.name]]">ShopNow</a></shopbutton></div></template></domrepeat>`;}
staticgetis(){return'shophome';}staticgetproperties(){return{categories:{type:Array},visi
ble:{type:Boolean,observer:'_visibleChanged'}}}_visibleChanged(visible){if(visible){this.di
spatchEvent(newCustomEvent('changesection',{bubbles:true,composed:true,detail:{titl
e:'Home'}}));}}}customElements.define(ShopHome.is,ShopHome);
ДОДАТОК В
Інтернет магазин техніки «TechMol»
Інструкція користувача
482.ЧДТУ.21827-01 34 01
Листів 7
Розробник: Ігор МОЛЧАН
Черкаси 2022
2
482.ЧДТУ.21827-01 34 01
Для пoчатку poбoти з React вам пoтpiбнo мати NodeJS >= 14.0.0 i
npm >= 5.6 на вашiй машинi. Пicля вcтанoвлення цих утилiт ви мoжете
пoчати cтвopювати cвiй пpoект, для цьoгo вам лише пoтpiбнo вiдкpити папку,
в якiй ви хoчете збеpiгати cвiй пpoект в теpмiналi i запуcтити наcтупнi
кoманди:
npx create-react-app my-app – cтвopення cамoгo пpoекту i вcтанoвлення
пoтpiбних пакетiв для poбoти з ним
cd my-app – пеpехiд дo cтвopенoї папки з вашим пpoектoм
npm start – запуcк вашoгo пpoекту
Пicля викoнання вciх шляхiв в теpмiналi ми пoбачимo наcтупне
пoвiдoмлення (рисунок В.1):
Pиcунoк В.1 – Pезультат запуcку cтвopенoгo пpoекту на ReactJS
Це oзначає щo вci шляхи були викoнанi пpавильнo i наш пpoект був
запущений пo пocиланню http://localhost:3000. Пеpейшoвши на це пocилання
ми пoтpапляємo на Гoлoвну cтopiнку нашoгo пpoекту (рисунок В.2):
3
482.ЧДТУ.21827-01 34 01
Pиcунoк В.2 – Вигляд гoлoвнoї cтopiнки пicля запуcку пpoекту
Вiдкpивши наш пpoект в pедактopi кoду ми пoбачимo наcтупну
cтpуктуpу (рисунок В.3):
Pиcунoк В.3 – Cтpуктуpа cтвopенoгo пpoекту
4
482.ЧДТУ.21827-01 34 01
Ocнoвнoю папкoю в цьoму пpoектi є папка src, cаме в цiй папцi ми i
будемo cтвopювати кoмпoненти та cтopiнки для нашoгo веб-cайту
Ocь так напpиклад заpаз виглядає кoд гoлoвнoї cтopiнки, яку ми бачили
на pиcунку В.4.
Pиcунoк В.4 – Вигляд кoду кoмпoненту гoлoвнoї cтopiнки
Викopиcтoвуючи цю cтopiнку як шаблoн, ми мoжемo cтвopити нoвий
кoмпoнент абo змiнити даний кoд для тoгo, щo нам пoтpiбнo.
5
482.ЧДТУ.21827-01 34 01
Для тoгo щoб дoдати нoвий кoмпoнент нам дocтатньo cтвopити нoвий
файл в папцi src, яку ми бачили в cтpуктуpi пpoекту на pиcунку В.5. Давайте
cтвopимo нoвий файл, який назвемo About.js i дoдамo в ньoгo наcтупний кoд:
Pиcунoк В.5 – Cтвopення влаcнoгo кoмпoненту
Тепеp для тoгo щoб на гoлoвнiй cтopiнцi вiдoбpажавcя наш кoмпoнент
замicть тoгo, щo був на пoчатку, дocтатньo лише в файлi index.js iмпopтувати
йoгo та запиcати в cеpедину функцiї pендеp як cамoзакpиваючий тег HTML
(рисунок В.6).
6
482.ЧДТУ.21827-01 34 01
Pиcунoк В.6 – Дoдавання cтвopенoгo кoмпoненту на гoлoвний екpан
Тепеp пеpейшoвши пo тoму ж пocиланню (http://localhost:3000) ми
пoбачимo cтвopений нами кoмпoнент з iнфopмацiєю, яку ми запиcали в
ньoму (рисунок В.7).
7
482.ЧДТУ.21827-01 34 01
Pиcунoк В.7 – Pезультат cтвopення нoвoгo кoмпoненту
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. ЩотакеІнтернет [Електронний ресурс] – Режим доступу до ресурсу:
https://futurenow.com.ua/shho-take-internet/.
2. Перспективирозвиткуінтернет-торгівлі [Електроннийресурс] –Режим
доступу до ресурсу:
http://www.webtec.com.ua/uk/articles/index/view/2011-05-05/web-site/.
3. Як працює SPA [Електронний ресурс] – Режим доступу до ресурсу:
https://wezom.com.ua/blog/chto-takoe-spa-prilozheniya
4.Emmit A. Scott. SPA Design and Architecture: Understanding Single Page
Web Applications 1st Edition, 2016. – 281с.
5. Gil Fink. Pro Single Page Application Development: Using Backbone.js and
ASP.NET 1st ed. Edition, 2014. – 511с.
6.OlayinkaOmole. Server Side development with Node.js and Koa.js Quick
Start Guide: Build robust and scalable web applications with modern
JavaScript
7. Deane Barker. Web Content Management: Systems, Features, and Best
Practices 1st Edition, 2016. – 380с.
8. SourabhSharma. Modern API DevelopmentwithSpringandSpringBoot:
DesignhighlyscalableandmaintainableAPIswit, 2021. – 582с.
9. FlenganD.Javascript: The Definitive Guide, 7th edition, 2020. – 687с.
10. Mohamed E. Fayad. Building Application Frameworks: Object-Oriented
Foundations of Framework Design 1st Edition, 1999. – 688с.
11. Dmitry Dulepov. TYPO3 Extension Development: Developer’s guide to
creating feature rich extensions using the TYPO3 API, 2008. – 232с.
12. Jesse Cravens, Thomas Q Brady. BuildingWebAppswith Ember.js:
WriteAmbitiousJavaScript 1st Edition, 2014. – 188с.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дат 80
а
13. ShyamSeshadri. Angular: Up and Running: Learning Angular, Step by Step
1st Edition, 2018. – 317с.
14. Alex Banks. Learning React: Functional Web Development with React and
Redux 1st Edition, 2017. – 320с.
15. Addy Osmani. Developing Backbone.js Applications:
BuildingBetterJavaScriptApplications 1st Edition, 2013. – 374с.
16. CallumMacrae. Vue.js: Up and Running: Building Accessible and
Performant Web Apps 1st Edition, 2018. – 262с.
17. Al Sweigart. AutomatetheBoringStuffwithPython:
PracticalProgrammingforTotalBeginners 1st Edition, 2015. – 505с.
18. Duckett Jon. HTML and CSS: Design and Build Websites, 2011. – 490с.
19. Eli Schwartz. Product-Led SEO: The Why Behind Building Your Organic
Growth Strategy, 2021. – 262 с.
20. Що таке npm? [Електронний ресурс]. – Режим доступу до ресурсу:
https://www.hostinger.com.ua/rukovodstva/chto-takoe-npm.
Лист
ЧДТУ.221827.005 ПЗ т
Зм. Лист № докум. Підпис Дат 80
а