Это были сложные 6 дней, но результат того стоил!
Привет Блогеры!
На курсе Full Stack Web Developer Школы Масаи каждый модуль (начиная со 2-го) завершается неделей разработки. На этой неделе 6 дней посвящены только работе в команде, чтобы применить все, что мы узнали в ходе курса, и клонировать один из существующих веб-сайтов. В настоящее время я нахожусь в модуле 4 и изучил CSS, JavaScript, манипулирование DOM, API, JSON, EJS, а для серверной части мы использовали MongoDB и NodeJS. Поскольку неделя сборки модуля 4 подходит к концу, я пишу этот блог, чтобы задокументировать все, что мы испытали до сих пор, и проект, который мы построили.
Наша команда состоит из трех человек:
- Ашвини Ратод (я!)
- Сельвакумар П
- Бхавани Дасари
Нам поручили клонировать сайт Lybrate. Lybrate — компания, занимающаяся мобильными технологиями в сфере здравоохранения, которая разработала онлайн-платформу для связи врачей и пациентов.
В команде мы сначала установили общие каналы связи — Slack и Zoom, а также репозиторий GitHub для совместной работы и фиксации нашего кода. Каждый из нас прошел через веб-сайт, чтобы посмотреть на его макет и поток, через который проходит пользователь при просмотре веб-сайта.
После того, как мы провели наше индивидуальное исследование, мы собрались вместе на нашем первом звонке в Zoom как команда и разделили наш проект на модули:
- Страницы входа и регистрации
- Целевая страница, список продуктов и страницы отдельных продуктов
- Страница корзины и страницы оформления заказа
Первые два дня ушли на создание отдельных страниц — входа, регистрации, целевой страницы, списка продуктов и страниц отдельных продуктов. С Selvakumar было поручено создать целевую страницу, а я взял на себя ответственность за создание панели навигации, которая должна быть размещена вверху каждой страницы. Как только панель навигации была готова, мы добавили ее на все наши отдельные страницы.
Наша первая задача и откровение:
Начну с откровения, у каждого из нас были компьютеры с разным разрешением экрана. Поэтому, когда мы увидели, как наши страницы отображаются на экранах друг друга, мы поняли, что то, что выглядело идеально на моем собственном экране, когда я его создавал, не выглядело так, когда та же самая страница отображалась на экране члена моей команды.
Задача состояла в том, чтобы убедиться, что наш код CSS был написан таким образом, чтобы он адаптировался к различным разрешениям экрана, отдавая приоритет процентным значениям, а не жесткому кодированию размеров. Большая часть третьего дня была потрачена на отладку кода, который мы написали до сих пор, а Сельвакумар взял на себя инициативу в выяснении того, где и какие изменения требуются. К счастью, мы вовремя усвоили этот важный урок.
Для внешнего интерфейса мы использовали CSS, JavaScript, DOM, EJS, а для внутреннего интерфейса мы использовали MongoDB, NodeJS:
Для создания списка продуктов, отдельных страниц продуктов, страницы корзины и страницы оформления заказа пригодился JavaScript DOM Back-end, поскольку мы использовали один и тот же макет для отображения разных значений из одних и тех же наборов данных — базы данных продуктов и страницы корзины пользователя. список продуктов. Мы использовали серверную часть MongoDB Atlas для хранения этих баз данных вместе с пользовательской базой данных. Серверная часть также выступала в качестве посредника, когда нам приходилось передавать данные туда и обратно между страницами. Мы были первыми, кто реализовал код, который извлекал и использовал данные из серверной части во внешний интерфейс.
Преодоление трудностей индивидуально и в команде:
По отдельности мы тоже столкнулись с проблемами и проблемами. Чтобы преодолеть их, мы пересмотрели наши концепции и попытались решить их самостоятельно. Если самостоятельное решение этих проблем оказывалось трудным, мы часто созванивались по зум-звонкам, чтобы помочь друг другу.
Моей задачей было создать панель навигации и страницы входа/регистрации. Для главной и целевой страниц крупным прорывом стало определение категорий, на основе которых пользователь может переходить по продуктам и сужать выбор. Я также научился создавать модальные окна CSS!
Опыт до сих пор…
Этот проект стал поистине незабываемым и плодотворным опытом. Это научило меня эффективно сотрудничать — поскольку у каждого из нас было разное образование, объяснение технической концепции/решения таким образом, чтобы все в команде понимали, было хорошим опытом обучения. Это также сделало меня более настойчивым. Я часто предлагал улучшения/изменения, некоторые из них были реализованы, а некоторые нет. Я рад, что мои предложения были услышаны и справедливо рассмотрены. Наше постоянное общение как в Slack, так и в Zoom создало действительно хорошую среду для построения команды, и я действительно наслаждался временем, проведенным с членами моей команды.
Описание Проекта:
Индивидуальные обязанности:
- Ашвини Ратод: страницы входа и регистрации
- Selvakumar P : Целевая страница и страницы корзины
- Бхавани Дасари: домашняя страница и страницы оформления заказа
Языки и концепции, которые мы использовали:
- CSS, JavaScript
- Управление DOM, EJS
- Хранение данных и выборка данных из MongoDB Atlas
- Для серверной части мы использовали MongoDB и NodeJS.
Наш репозиторий на GitHub:нажмите здесь
Демонстрация проекта в реальном времени:нажмите здесь
Снимки клонированного веб-сайта:
- Страницы регистрации и входа
Макет и функциональность страниц входа и регистрации были реализованы Ашвини Ратодом (мной). Как только пользователь создает учетную запись на странице регистрации, он добавляется в нашу базу данных пользователей в MongoDB Atlas. Затем они перенаправляются на страницу входа для входа на веб-сайт.
После входа в систему данные пользователя — имя, пароль — сохраняются.
2. Целевая страница с выпадающей панелью навигации
Макет и дополнительные функции на целевой странице были реализованы Selvakumar P. Значительной частью этой страницы является панель навигации вверху, на которой отображаются все категории, ввод данных для поиска, учетная запись пользователя и кнопка домашней страницы, а также значок корзины.
3. Домашняя страница
Бхавани создал домашнюю страницу и реализовал функциональность на этой странице, а также добавил категории продуктов на эту страницу — панель навигации вверху с отображением всех категорий, вводом данных для поиска, учетной записью пользователя и кнопкой домашней страницы, а также значком корзины. Здесь у пользователя есть два варианта сузить свой выбор — сортировка и фильтрация.
4. Страница со списком продуктов
Мы создали макет и реализовали функционал на этой странице. Здесь у пользователя есть два варианта сузить свой выбор — сортировка и фильтрация. Выбор сортировки в верхней правой части страницы позволяет сортировать и упорядочивать товары по возрастанию цены или по убыванию цены. Фильтры в левой части страницы можно использовать для выбора конкретных брендов, цветов и типов продуктов.
5. Страница сведений о продукте
Мы создали и реализовали функционал этой страницы. Здесь пользователь может увидеть описание продукта и доступные цветовые варианты. Если они хотят купить продукт, они могут ввести количество в поле количества, а затем нажать кнопку «Добавить в корзину».
6. Страница корзины
Мы также реализовали эту страницу. Здесь будут перечислены все товары, добавленные в корзину. Пользователь может внести изменения в количество каждого продукта или даже удалить продукт из пакета, если пожелает. Если корзина пуста, кнопка оформления заказа не отображается. Кроме того, если пользователь добавил товары в корзину, но не авторизовался на сайте, при нажатии кнопки оформления заказа он перенаправляется на страницу входа. После входа/регистрации продукты, которые они добавили в корзину, становятся доступными для оформления заказа.
7. Страница оформления заказа
Эта страница была реализована нами. Здесь пользователь может заполнить свой адрес, контактные данные и выбрать способ доставки. Стоимость доставки меняется для разных способов. При нажатии на «Оформить заказ» пользователю предлагается ввести свое имя, адрес, номер мобильного телефона, город, а после нажатия «Сохранить и доставить сюда» страница будет перенаправлена на страницу оплаты и щелкнет любой тип оплаты. используя данные кредитной/дебетовой карты.
Нажатие на кнопку «Разместить заказ» отобразит страницу «Заказ успешно выполнен» и перенаправит пользователя на домашнюю страницу.
Если вы дочитали до этого места, спасибо, что дочитали до конца!
