У цьому завданні вам необхідно створити простий веб-додаток, який імітує роботу інтернет-магазину. Для побудови вказаного додатку ви можете використовувати верстку, виконану в рамках попередніх завдань.
Основний акцент цього завдання робиться на фронтенд. Перелік товарів та категорій береться з заздалегідь поданого зовнішнього бекенду за допомогою отримання JSON-даних із API. Збереження замовлень відбувається за допомогою відправки POST-запиту на один з методів API із обов'язковим вказанням унікального токена у кожному із запитів. Токен видається персонально кожному із студентів на відповідній сторінці (необхідна аутентифікація через корпоративний обліковий запис у Office 365).
Умовно додаток можна розділити на три представлення (views). Основні представлення додатку:
Переключення між різними представленнями, наприклад, можна зробити за допомогою JS зберігаючи їх код в єдиному файлі. Втім, ви можете спробувати створити іншу реалізацію, якщо уявляєте як та вона буде коректно працювати.
У представленні із товарами самі товари мають виводитись сіткою по декілька в ряд як наразі це робиться в більшості інтернет-магазинів. Міні-картка товару має точно містити такі елементи:
Окрім того у представленні категорії (згори або збоку) має бути розташований клікабельний список категорій. При кліку на категорію в списку товарів виводяться лише товари з цієї категорії. Також на початку списку категорій має знаходитись пункт для виводу усіх товарів.
В представленні товару має бути деталізована інформація про нього - все те саме, що і у міні-картці товару, текстовий опис товару та, у разі наявності додаткових полей у об'єкті з API можна виводити інформацію з них. Має бути присутня кнопка для додавання товару в кошик. Окрім того має бути передбачена можливість повернення у категорію товару.
В представленні кошику мають бути товари, додані до кошика (або повідомлення про пустий кошик), у товарів має бути вказана поточна кількість однакових товарів в кошику, а також кнопки "+" та "-" для збільшення/зменшення кількості відповідного товару в кошику та кнопка видалення товару з кошику. Окрім того мають бути поля вводу для імені клієнта, номеру телефону та електронної пошти. В кінці - кнопка замовлення. Представлення кошику може виводитись у вигляді окремої сторінки або як бокова менюшка або як модальне вікно - на ваш розсуд, головне - щоби зручно та приємно для вашого користувача.
При кліку на кнопку оформлення замовлення відповідний запит має бути надісланий на відповідний метод з поданого API через AJAX. У разі повернення помилки з API додаток має коректно обробити її та вивести відповідне повідомлення. Особливо важливо коректно виводити помилки у формі створення замовлення для того, щоби користувач вашого додатку знав, що саме він неправильно зробив при оформленні замовлення. У разі успішного оформлення клієнт також має отримати сповіщення про це, а кошик має бути почищений.
Верстка додатку має бути адаптивна, бажано mobile-first. За бажання ви можете користуватись Bootstrap або іншим подібним CSS-фреймворком.
Використання JS-фреймворків (jQuery, React, Angular) - на ваш розсуд. Взагалі, буде прикольно, якщо ви розберетесь в якомусь з сучасних JS-фреймворків для побудови односторінкових повноцінних додатків, але якщо відчуваєте це занадто складним для себе на даний момент - можете помучитись із генерацією HTML за допомогою jQuery.
Головне - попіклуйтесь про те, щоби створений вами простий інтернет-магазин був приємним та зручним у використанні, в тому числі із мобільних девайсів.
Якщо у вас є ідеї як зробити проект ще кращим, аніж вимагається - welcome! Додаткові фічі вітаються.
На виході проект має бути залитий на GitHub у якості публічного репозиторію разом із публікацією через GitHub Pages. Перевірятись ваш проект на працездатність буде шляхом відкриття його як сайту та переглядом репозиторію. Також основні файли проекту мають бути продубльовані завантаженням на distedu у якості zip-архіву.
| Метод | Опис |
|---|---|
| GET /api/category/list | перегляд доступних категорій |
| GET /api/category/<category_id> |
перегляд інформації про категорію, де <category_id> - ID категорії
|
| GET /api/product/list | перегляд усіх товарів |
| GET /api/product/list/category/<category_id> |
перегляд усіх товарів з категорії, де ID дорівнює <category_id>
|
| GET /api/product/<product_id> |
перегляд інформації про товар, де <product_id> - ID товару
|
| POST /api/order/add |
створення нового замовлення. Список POST-параметрів:
|
npm init, яка в свою чергу має на виході створити файл package.json.node_modules/ для того, щоби пізніше при інсталяції npm-пакетів вони не потрапляли в репозиторій.Init commit.npm install --save-dev webpack webpack-cli.scripts додаємо підполе build з текстом webpack.console.log('Hello!');).npm run build.<script src="./js/main.js"></script>.npm install -D babel-loader @babel/core @babel/preset-env webpack.console.log(`The time is ${new Date()}`); та запускаємо Webpack.npm install --save-dev node-sass sass-loader css-loader mini-css-extract-plugin.import './scss/main.scss'; та запускаємо Webpack.<link rel="stylesheet" href="./css/main.css">.Тут, впринципі, мало чого пояснювати - пишемо свій HTML код у відповідних файлах в папці docs/ та CSS/SCSS + JS код у відповідних файлах у папці src/ з подальшою компіляцією через Webpack.
У разі потреби - підключаємо зовнішні бібліотеки до проекту. Найкращий спосіб - за допомогою встановлення npm-пакетів та підключення через src/index.js.