Мы создали клон nordstrom.com за 6 дней!
Это были сложные 6 дней, но результат того стоил!
Привет Блогеры!
На курсе Full Stack Web Developer Школы Масаи каждый модуль (начиная со 2-го) завершается неделей разработки. На этой неделе 6 дней посвящены только работе в команде, чтобы применить все, что мы узнали в ходе курса, и клонировать один из существующих веб-сайтов. В настоящее время я нахожусь в модуле 2 и за последние 10 недель изучил HTML, CSS, ванильный JavaScript и манипулирование DOM. Поскольку неделя сборки модуля 2 подходит к концу, я пишу этот блог, чтобы задокументировать все, что мы испытали до сих пор, и проект, который мы построили.
Наша команда состоит из четырех человек:
Нам поручили клонировать сайт Нордстрем. Это веб-сайт электронной коммерции в США, где пользователи могут покупать одежду, аксессуары, товары для дома и образ жизни.
В команде мы сначала установили общие каналы связи — Slack и Zoom, а также репозиторий GitHub для совместной работы и фиксации нашего кода. Каждый из нас прошел через веб-сайт, чтобы посмотреть на его макет и поток, через который проходит пользователь при просмотре веб-сайта.
После того, как мы провели наше индивидуальное исследование, мы собрались вместе на нашем первом звонке в Zoom как команда и разделили наш проект на модули:
- Страницы входа и регистрации
- Целевая страница, список продуктов и страницы отдельных продуктов
- Корзина и страницы оформления заказа
Первые два дня ушли на создание отдельных страниц — входа, регистрации, целевой страницы, списка продуктов и страниц отдельных продуктов. Поскольку Пратику было поручено создать целевую страницу, его самой большой обязанностью было создание панели навигации, которая должна быть размещена в верхней части каждой страницы. Как только панель навигации была готова, мы добавили ее на все наши отдельные страницы.
Наша первая задача и откровение:
Начну с откровения, у каждого из нас были компьютеры с разным разрешением экрана. Поэтому, когда мы увидели, как наши страницы отображаются на экранах друг друга, мы поняли, что то, что выглядело идеально на моем собственном экране, когда я его создавал, не выглядело так, когда та же самая страница отображалась на экране члена моей команды.
Задача состояла в том, чтобы убедиться, что наш код CSS был написан таким образом, чтобы он адаптировался к различным разрешениям экрана, отдавая приоритет процентным значениям, а не жесткому кодированию размеров. Большая часть третьего дня была потрачена на отладку кода, который мы написали до сих пор, а Ахил взял на себя инициативу в выяснении, где и какие изменения требуются. К счастью, мы вовремя усвоили этот важный урок.
Поскольку мы начали объединять наши коды в начале недели, у нас было достаточно времени для отладки и исправления всего, что требовалось. Частые коммиты в репозиторий GitHub также помогли нам оставаться в курсе того, как продвигается наш проект.
К пятому дню у каждого из нас были готовы все страницы. С этими страницами у нас был наш основной поток:
Использование JavaScript DOM и локального хранилища:
Для создания списка продуктов, отдельных страниц продуктов, корзины для покупок и страницы оформления заказа пригодился JavaScript DOM, поскольку мы использовали один и тот же макет для отображения разных значений из одних и тех же наборов данных — базы данных продуктов и списка продуктов в корзине пользователя. Мы использовали локальное хранилище в браузере для хранения этих наборов данных вместе с пользовательской базой данных. Локальное хранилище также выступало в качестве посредника, когда нам приходилось передавать данные туда и обратно между страницами. Nikhil был первым, кто реализовал код, который извлекал и использовал данные из локального хранилища для «рисования» DOM.
Преодоление трудностей индивидуально и в команде:
По отдельности мы тоже столкнулись с проблемами и проблемами. Чтобы преодолеть их, мы пересмотрели наши концепции и попытались решить их самостоятельно. Если самостоятельное решение этих проблем оказывалось трудным, мы часто созванивались по зум-звонкам, чтобы помочь друг другу.
Моя задача состояла в том, чтобы создать список продуктов и страницы корзины. Для страницы со списком продуктов крупным прорывом стало определение фильтров флажков, на основе которых пользователь может фильтровать продукты и сужать выбор. На странице корзины на 5-й день после многочисленных проб и ошибок мне удалось добавить опции обновления количества отдельных товаров в корзине и удаления товара из корзины. Я также научился создавать модальные окна CSS!
Опыт до сих пор…
Этот проект стал поистине незабываемым и плодотворным опытом. Это научило меня эффективно сотрудничать — поскольку у каждого из нас было разное образование, объяснение технической концепции/решения таким образом, чтобы все в команде понимали, было хорошим опытом обучения. Это также сделало меня более настойчивым. Я часто предлагал улучшения/изменения, некоторые из них были реализованы, а некоторые нет. Я рад, что мои предложения были услышаны и справедливо рассмотрены. Наше постоянное общение как в Slack, так и в Zoom создало действительно хорошую среду для построения команды, и я действительно наслаждался временем, проведенным с членами моей команды.
Описание Проекта:
Индивидуальные обязанности:
- Akhil: страницы входа и регистрации
- Pratik: целевые страницы и страницы оформления заказа
- Nikhil: страница сведений о продукте
- Вайшнави: страницы списка продуктов и корзины для покупок
Языки и концепции, которые мы использовали:
- HTML, CSS, ванильный JavaScript
- Манипуляции с DOM
- Хранение данных и выборка данных из локального хранилища
- Модальные окна CSS и z-индекс
Наш репозиторий на GitHub:нажмите здесь
Демонстрация проекта в реальном времени:нажмите здесь
Снимки клонированного веб-сайта:
- Страницы регистрации и входа
Макет и функциональность страниц входа и регистрации были реализованы компанией Akhil. Как только пользователь создает учетную запись на странице регистрации, он добавляется в нашу базу данных пользователей в локальном хранилище. Затем они перенаправляются на страницу входа для входа на веб-сайт.
После входа в систему данные пользователя — имя, адрес электронной почты, пароль — сохраняются в переменной под названием «loggeduser». Эта переменная упоминается на всем веб-сайте, чтобы сделать доступными или заблокировать определенные функции.
2. Целевая страница с выпадающей панелью навигации
Макет и дополнительные функции на целевой странице были реализованы Pratik. Важной частью этой страницы является панель навигации вверху, на которой отображаются все категории продуктов, ввод для поиска, кнопка учетной записи пользователя и значок корзины.
На панели навигации при наведении курсора на определенную категорию товаров отображается выпадающий раздел со всеми подкатегориями. Пользователь может щелкнуть любого, чтобы просмотреть список продуктов в этой категории.
3. Страница со списком продуктов
Я создал макет и реализовал функционал на этой странице. Здесь у пользователя есть два варианта сузить свой выбор — сортировка и фильтрация. Выбор сортировки в верхней правой части страницы позволяет сортировать и упорядочивать товары по возрастанию цены или по убыванию цены. Фильтры в левой части страницы можно использовать для выбора конкретных брендов, цветов и типов продуктов.
Пользователь может нажать на название продукта, чтобы открыть страницу сведений об этом продукте. Если они наводят курсор на какой-либо продукт, отображается кнопка «Быстрый просмотр». При нажатии на нее на экране появляется модальное окно, в котором отображается краткое описание продукта и кнопка «Добавить в корзину», которую пользователь может использовать для непосредственного добавления продукта в свою корзину.
4. Страница сведений о продукте
Нихил создал и внедрил функциональные возможности этой страницы. Здесь пользователь может увидеть описание продукта и доступные цветовые варианты. Если они хотят купить продукт, они могут ввести количество в поле количества, а затем нажать кнопку «Добавить в корзину».
При нажатии кнопки «Добавить в корзину» открывается модальное окно, предоставляющее пользователю возможность посетить страницу «Корзина» или перейти непосредственно к оформлению заказа.
5. Страница корзины для покупок
Я также реализовал эту страницу. Здесь будут перечислены все товары, добавленные в корзину. Пользователь может внести изменения в количество каждого продукта или даже удалить продукт из пакета, если пожелает. Если сумка пуста, кнопка оформления заказа не отображается. Кроме того, если пользователь добавил товары в корзину, но не авторизовался на сайте, при нажатии кнопки оформления заказа он перенаправляется на страницу входа. После входа/регистрации продукты, которые они добавили в корзину, становятся доступными для оформления заказа.
6. Страница оформления заказа
Эта страница также была реализована Pratik. Здесь пользователь может заполнить свой адрес, контактные данные и выбрать способ доставки. Стоимость доставки меняется для разных способов. При нажатии «Продолжить» пользователю предлагается ввести данные своей кредитной/дебетовой карты.
При нажатии на кнопку «Разместить заказ» отобразится модальное окно с созданным идентификатором заказа. Закрытие модального окна перенаправит пользователя на целевую страницу.
Если вы дочитали до этого места, спасибо, что дочитали до конца!
