Разделяй и властвуй. Это то, чего, по сути, требовал этот недельный проект от нашей группы. На этой неделе нам было поручено создать проект Full Stack, состоящий как из внутренних, так и из внешних элементов управления.
Начиная со спины
Наша группа решила создать веб-сайт электронной коммерции спортивных товаров, который сможет создавать пользователей и заказы в соответствующих таблицах, считывать инвентарь из нашей таблицы продуктов, обновлять информацию о пользователях из нашей таблицы пользователей и удалять заказы из нашей таблицы заказов. Внутренняя база данных была создана с использованием PostgreSQL и маршрутизирована через Express. Перед тем, как начать наш код, мы спланировали отношения между базой данных и таблицами.
Мы отслеживали и контролировали нашу базу данных в BeeKeeper и тестировали наши маршруты с помощью Postman. Убедившись, что маршруты связываются с нашей базой данных, мы начали создавать функции для этих маршрутов во внешнем интерфейсе.
Подключение
Функциональность была ключевым моментом в проекте, поэтому сразу же были созданы функции для каждой страницы нашего веб-сайта с использованием экспресс-маршрутов со стороны нашего сервера. На каждой странице использовались асинхронные функции для извлечения данных из нашей базы данных в PostgreSQL или их отправки в нее. Чтобы показать, что наши маршруты могут выполнять C.R.U.D (создание, чтение, обновление, удаление) в нашей базе данных, функции были тщательно протестированы и отредактированы перед стилизацией каждой страницы. Эта часть стала сложной, поскольку функции были написаны в файлах JavaScript на стороне клиента, однако маршруты Express были написаны на стороне сервера, нацеленные на базу данных, также созданную на стороне сервера. Наша группа работала над этой проблемой, постоянно обновляя репозиторий GitHub и сообщая, какие файлы обновляются и кем. Мы бы порекомендовали в будущих проектах развертывать свою базу данных в Интернете (используя ElephantSQL или Heroku PostgreSQL), чтобы каждый пользователь мог протестировать JS-файлы на стороне клиента.
Конец фронта
Стиль был очень важен для этого проекта, так как он продемонстрировал бы нашу возросшую способность использовать HTML, CSS, DOM и фреймворки. После создания цветовой палитры и выбора стиля шрифта мы перенесли эту тему по всему сайту. CSS-анимация и фреймворки Bootstrap помогли вывести веб-сайт на новый уровень, одновременно помогая связать каждую страницу с другой. Первоначально наша группа использовала шаблоны движка Express-Es6 для отображения нашего контента на нашей странице, однако после нескольких проблем с живым сервером в коде VS стало очевидно, что DOM лучше для этого проекта. Веб-сайт состоит из целевой страницы, на которой пользователя просят войти в систему или зарегистрироваться. Обе кнопки запускают функции, которые затем либо создают пользователя в нашей базе данных, либо проверяют, что пользователь уже находится в нашей базе данных.
После входа в систему или регистрации пользователь перенаправляется на домашнюю страницу. На домашней странице пользователь может просматривать наш инвентарь продуктов, а также искать определенные продукты в нашем инвентаре. Страница отображает инвентарь продуктов, хранящийся в нашей базе данных, в контейнере, а затем очищает этот контейнер при запуске функции поиска, заменяя элементы искомыми продуктами в нашей базе данных.
На странице управления учетной записью вызывается часть обновления нашего CRUD. Пользователи, которые вошли в систему, имеют возможность обновить информацию своей учетной записи (которая была предоставлена нашей базе данных при регистрации) через форму на этой странице. Затем пользователи получают уведомление о том, что их учетная запись была обновлена.
Последняя страница нашего сайта - это корзина покупок. Здесь пользователи могут просматривать созданные ими заказы, нажимая кнопки добавления в корзину на главной странице. Функции, созданные для этой страницы, запускаются только тогда, когда товары добавлены в корзину.
Фуллстэк спереди-сзади
Этот проект был создан с использованием:
PostgreSQL
Node.js
НПМ
выражать
Продолжить
Пчеловод
Почтальон
HTML
CSS
JavaScript
Бутстрап
GitHub
Код VS
Посмотрите репозиторий GitHub для этого проекта ниже!
Соавторы: Рональд Давенпорт
