Тема, Мета, Місце розташування

Тема: Адаптивний web-застосунок інтернет-магазину елементів інтер’єру.

Мета: Метою роботи є аналіз і моделювання предметної області інтернет-магазину елементів інтер’єру та розроблення адаптивного web-застосунку, який забезпечує зручний перегляд каталогу товарів, навігацію між розділами сайту, ознайомлення з інформацією про товари та контактними даними магазину на різних типах пристроїв.

Місце розташування:

GitHub: https://github.com/karolinarm08/Interior_RudykhKO
Live demo: https://karolinarm08.github.io/Interior_RudykhKO/

Актуальність теми

У сучасних умовах значна частина покупок товарів для дому, декору та облаштування інтер’єру здійснюється через мережу Інтернет. Користувачі очікують від web-застосунків не лише наявності каталогу товарів, а й зручної навігації, адаптивного інтерфейсу, швидкого доступу до інформації про товари, можливості перегляду категорій, порівняння варіантів та оформлення замовлення з різних пристроїв. Особливої актуальності набувають адаптивні інтернет-магазини, які коректно працюють на персональних комп’ютерах, планшетах і смартфонах.

Обрана тема є актуальною, оскільки товари для інтер’єру мають високий візуальний складник: користувачеві важливо бачити картки товарів, фотографії, ціни, короткий опис, категорії та контактну інформацію магазину в зручному й зрозумілому вигляді. Наявність адаптивного web-застосунку дозволяє покращити взаємодію користувача із системою, зробити процес вибору товарів більш комфортним та підвищити зручність онлайн-покупок.

Завдання роботи

провести аналіз предметної області інтернет-магазину елементів інтер’єру;
визначити основні сутності, їх атрибути та зв’язки в системі;
розробити концептуальну модель системи (Use-case, ER-діаграма);
спроєктувати структуру web-застосунку та його основні модулі;
розробити зручний та адаптивний інтерфейс користувача;
реалізувати функціонал перегляду каталогу товарів і категорій;
забезпечити логічну організацію даних і можливість масштабування системи;
організувати структуру проєкту та контроль версій за допомогою GitHub;
підготувати систему до подальшого розширення (кошик, замовлення, користувачі).

Об’єкт роботи

Об’єктом роботи є web-застосунок інтернет-магазину товарів для інтер’єру, призначений для перегляду каталогу, навігації між сторінками сайту та ознайомлення користувачів із товарами і послугами магазину.

Предмет роботи

Предметом роботи є методи аналізу, моделювання та реалізації адаптивного інтерфейсу інтернет-магазину елементів інтер’єру, а також засоби організації даних і взаємодії користувача з web-застосунком.

Практичне значення роботи

Практичне значення полягає в тому, що розроблений web-застосунок може використовуватись як прототип інтернет-магазину з продажу декору, меблевих аксесуарів, текстилю, освітлення та інших елементів оформлення інтер’єру. Отримані результати можуть бути надалі розширені до повноцінного e-commerce-рішення з кошиком, фільтрацією товарів, особистим кабінетом користувача та інтеграцією з серверною частиною.

Бізнес-логіка системи

Бізнес-логіка інтернет-магазину елементів інтер’єру полягає в організації процесу ознайомлення користувача з товарами та подальшого вибору продукції для оформлення замовлення.

Система повинна забезпечувати поділ товарів на категорії, наприклад: декор, освітлення, текстиль, меблеві аксесуари, настінне оформлення. Кожен товар повинен мати назву, короткий опис, ціну, зображення, категорію та ознаку наявності. Користувач повинен мати можливість переглядати головну сторінку, переходити між категоріями, відкривати сторінку з товарами, переглядати окремі картки та отримувати контактну інформацію магазину.

Якщо товар доступний, система відображає його як активний для перегляду та потенційного замовлення. Якщо товар відсутній, система повинна показувати відповідну позначку. Для акційних товарів може застосовуватися знижка, а кінцева ціна повинна відображатися з урахуванням акційної пропозиції.

Навігація між сторінками повинна залишатися зручною незалежно від типу пристрою. На малих екранах меню має перетворюватися на бургер-меню, а сітка товарів — перебудовуватися у меншу кількість стовпців відповідно до розміру екрана. Такі вимоги до структурних компонентів інтерфейсу, адаптивної навігації, сітки, media queries та файлової організації прямо визначені у методичних вказівках.

Функціональні вимоги

Система повинна відображати головну сторінку інтернет-магазину.
Система повинна містити шапку сайту з логотипом і навігаційним меню.
Система повинна надавати перехід між основними сторінками сайту.
Система повинна відображати каталог товарів у вигляді карток.
Система повинна групувати товари за категоріями.
Система повинна відображати для кожного товару зображення, назву, короткий опис і ціну.
Система повинна показувати інформацію про акційні товари.
Система повинна дозволяти перегляд окремих тематичних розділів, наприклад «Декор», «Освітлення», «Текстиль», «Контакти».
Система повинна відображати контактну інформацію магазину у footer.
Система повинна мати адаптивне меню для мобільних пристроїв.
Система повинна перебудовувати сітку контенту залежно від ширини екрана.
Система повинна підтримувати hover-ефекти та базові анімації елементів інтерфейсу.

Нефункціональні вимоги

Web-застосунок повинен коректно відображатися на екранах персональних комп’ютерів, планшетів і смартфонів.
Інтерфейс повинен бути адаптивним і зручним для користувача.
Сторінки повинні мати логічну та семантичну HTML-структуру.
Час завантаження сторінок повинен бути мінімальним за рахунок простої структури та оптимізованих зображень.
Файлова структура проєкту повинна бути логічно організованою.
Код повинен бути читабельним, структурованим і придатним до подальшого розширення.
Репозиторій повинен містити README-файл з описом проєкту та інструкцією щодо запуску.
Розробка повинна супроводжуватися змістовними комітами та використанням гілок Git.
Інтерфейс повинен зберігати цілісність стилю на різних пристроях.
Елементи керування повинні бути доступними та зрозумілими для користувача.

Use-case діаграма системи

На Use-case діаграмі зображено взаємодію користувачів із системою інтернет-магазину елементів інтер’єру. Актор Гість може переглядати головну сторінку, категорії товарів, картки товарів, акційні пропозиції, контактну інформацію та користуватися навігаційним меню. Актор Адміністратор має можливість додавати нові товари, редагувати опис товару, змінювати його ціну та категорію, оновлювати статус наявності й керувати акційними пропозиціями. Діаграма відображає основні сценарії взаємодії користувачів із web-застосунком.

ER-діаграма даних

Основною сутністю є товар, оскільки саме навколо нього будується робота інтернет-магазину. Кожен товар належить до певної категорії. Клієнт може оформити одне або кілька замовлень. Кожне замовлення складається з окремих позицій, де зазначено конкретний товар, його кількість і ціну на момент замовлення.

Опис інтерфейсу web-застосунку

Згідно з вимогами лабораторної роботи, інтерфейс повинен містити шапку, основний блок і нижній колонтитул. У цьому проєкті шапка сайту включає логотип магазину, назву та головне меню навігації. Основний блок містить банер, секцію категорій, сітку карток товарів, блок акцій або популярних пропозицій. Нижній колонтитул містить контактні дані, посилання на соціальні мережі та коротку довідкову інформацію.

На широких екранах меню має відображатися горизонтально, а картки товарів — у кілька стовпців. На планшетах кількість стовпців зменшується, а на смартфонах контент перебудовується в один стовпець. Меню на малих екранах трансформується в бургер-меню. Для оформлення інтерфейсу доцільно використати CSS Grid або Flexbox, media queries, відносні одиниці вимірювання та плавні візуальні ефекти. Саме такі структурні та стилістичні вимоги наведені у завданні до лабораторної.

Організація файлової структури проєкту

InteriorShop/
│
├── index.html
├── catalog.html
├── product.html
├── cart.html
├── contacts.html
├── about.html
│
├── css/
│   └── style.css
│
├── js/
│   ├── script.js
│   ├── menu.js
│   ├── catalog.js
│   └── cart.js
│
├── components/
│   ├── header.html
│   ├── footer.html
│   ├── product-card.html
│   ├── category-card.html
│   └── banner.html
│
├── assets/
│   ├── images/
│   │   ├── products/
│   │   ├── categories/
│   │   ├── banners/
│   │   └── icons/
│   │
│   └── fonts/
│
└── README.md

Висновки

У ході виконання лабораторної роботи було обрано предметну область інтернет-магазину елементів інтер’єру, проаналізовано її особливості та сформовано основні складові опису інформаційної системи. Було визначено актуальність теми, мету, завдання, об’єкт і предмет роботи, а також сформовано бізнес-логіку функціонування системи. На основі аналізу предметної області було визначено функціональні та нефункціональні вимоги, описано основні сценарії взаємодії користувачів із системою у вигляді Use-case-представлення та змодельовано структуру даних за допомогою ER-діаграми.