CC BY
176Создание веб-приложения интернет-магазина с использованием современных инструментов разработки
Урусов Тимур Тимборович
магистрант, факультет «Информационных технологий и анализа больших данных», ФГОБУ ВО «Финансовый университет при Правительстве Российской Федерации», t.urusov14 @mail.ru
Данная статья подробно рассматривает процесс разработки коммерческого веб-сайта в виде полнофункционального интернет-магазина с использованием современных технологий и подходов проектирования. В работе описан популярный на сегодняшний день технический набор инструментов веб-разработки и детально продемонстрирована реализация серверной и клиентской частей приложения, включая настройку базы данных и иных прикладных решений среднего слоя комплексного веб-проекта.
Ключевые слова: интернет-магазин, веб-приложение, электронная коммерция, создание сайтов, современные фреймворки, разработка сервера, разработка клиента, backend, frontend, html, css, javascript, react, redux, nodejs, expressjs, mongodb.
Введение
Электронная коммерция — это быстро развивающаяся отрасль, и предприятия все больше полагаются на свое присутствие в Интернете для привлечения глобальных клиентов. Предприятиям нужны полнофункциональные веб-приложения, которые могут поддерживать их деятельность на протяжении всего жизненного цикла электронной коммерции, чтобы удовлетворить растущий спрос [1].
В данной работе предполагается создать веб-приложение, объединяющее клиентские (front-end) и серверные (back-end) технологии для оптимизации процессов электронной коммерции. Используя различные программные решения и языки программирования, приложение нацелено создать мощную платформу онлайн-бизнеса. Данная статья дает представление о трудностях разработки полнофункциональных приложений электронной коммерции и предлагает стратегии преодоления этих препятствий.
В работе используются технологии React и Redux для frontend, и Node.js и Express для back-end. Основной системой базы данных программы является MongoDB. JavaScript является основным языком программирования, а HTML/CSS поддерживается для веб-структуры и дизайна.
Материалы и методы
Процесс разработки полнофункционального веб-приложения состоит из нескольких этапов, каждый из которых представляет собой уникальные проблемы и сложности. Начальный этап разработки фронтенда включает в себя создание дружественного пользователю интерфейса, отзывчивого дизайна и интуитивно понятной навигации. И наоборот, последующая стадия разработки back-end сосредоточена на создании отказоустойчивых приложений и API на стороне сервера. Этап интеграции базы данных имеет огромное значение и требует тщательного планирования моделирования, хранения и извлечения данных. Для обеспечения бесперебойной и безопасной работы пользователей необходимо, чтобы веб-приложение электронной коммерции органично интегрировало все эти компоненты [2].
В работе освещаются фундаментальные принципы, инструменты и технологии, используемые при создании комплексного полнофункционального веб-приложения для электронной коммерции. Был проведен всесторонний обзор соответствующей научной и отраслевой литературы, а также тематических исследований, чтобы определить оптимальные подходы и методологии для создания веб-сайтов электронной коммерции, которые являются эффективными, надежными и безопасными. В работе предлагается практический опыт создания и реализации веб-сайта электронной коммерции с использованием распространенных механизмов веб-разработки, систем управления контентом (CMS) и хостинговых платформ.
X X
о го А с.
X
го m
о
Система управления базами данных MONGODB
MongoDB - это документо-ориентированная база данных NoSQL, обеспечивающая гибкое и масштабируемое хранение данных. Она предназначена для управления большими объемами неструктурированных и полуструктурированных данных, что делает ее идеальной для современных веб-приложений и
2 О
м
CJ
fO CS
о
CS
to
о ш m
X
<
m О X X
обработки больших данных [3]. Инструмент также обеспечивает высокую доступность и функции автоматического масштабирования, которые гарантируют, что приложения смогут обрабатывать все большие объемы данных без ущерба для производительности и надежности. Динамическая схема MongoDB позволяет легко модифицировать и развивать модели данных по мере изменения потребностей бизнеса.
Вместо таблиц и строк, как в реляционных базах данных, архитектура MongoDB, как NoSQL-базы данных, состоит из коллекций и документов. Документы состоят из пар ключ-значение - основной единицы данных. Коллекции, эквивалент таблиц SQL, содержат наборы документов. MongoDB поддерживает множество языков программирования, таких как C, C++, C#, Go, Java, Python, Ruby и Swift.
Кроме того, MongoDB предлагает гибкий язык запросов и мощные возможности индексирования, которые позволяют разработчикам быстро и эффективно извлекать данные. Эти возможности делают MongoDB популярным выбором для создания современных, масштабируемых приложений.
Среди преимуществ использования MongoDB - возможность горизонтального масштабирования, гибкая модель данных и поддержка динамических запросов. Кроме того, MongoDB документо-ориентированный подход позволяет легче интегрироваться с объектно-ориентированными языками программирования [4]. Это делает ее популярной среди разработчиков, которые хотят создавать приложения со сложными структурами данных. Кроме того, функции автоматического шардинга и репликации MongoDB обеспечивают высокую доступность и отказоустойчивость для критически важных приложений.
MongoDB подходит как для малых, так и для крупных проектов благодаря своей гибкости, которая позволяет легко масштабироваться в ответ на растущие требования к данным. Кроме того, ее парадигма, основанная на документах, упрощает процесс разработки, позволяя разработчикам работать с данными в манере, более соответствующей их естественному мышлению. Это, в свою очередь, делает процесс более простым.
Реализация модели данных MongoDB
В данной работе демонстрируются два основных типа данных: Продукт и Пользователь, также создаются второстепенные модели Корзина и Избранные, которые будут принадлежать объекту Пользователь и содержать Продукты.
Тип данных Product включает несколько важных свойств типичного товара: название, фирму/тип, описание, цену, изображение и метрики посещаемости, количества добавлений в избранное и корзину.
Тип данных User включает базовые свойства пользователя: логин и пароль. В системе предусмотрен администратор, для начального удобства будут заданы значения "admin" как для логина, так и для пароля.
Тип данных CartItem является вспомогательной моделью для хранения в объектах корзины с учетом количества сохраненных товаров.
Обзор технологии NodeJS
NodeJs - это кроссплатформенная среда выполнения JavaScript с открытым исходным кодом, которая позволяет разработчикам создавать серверные приложения на JavaScript. Она построена на базе движка V8 JavaScript и обеспечивает событийно-управляемую, неблокирующую модель ввода-вывода, что делает ее легкой и эффективной для создания масштабируемых сетевых приложений.
Возможности NodeJS включают богатую библиотеку различных модулей JavaScript, которая упрощает разработку веб-
приложений, возможность одновременной обработки нескольких клиентских запросов и поддержку веб-приложений реального времени с двусторонними соединениями. Кроме того, он имеет большое и активное сообщество, которое вносит свой вклад в его постоянное совершенствование и развитие [5].
carmem.js models models > B cartltem.js > [®] cartltemSchema
You, 17 months ago 11 author (You)
1 const mongoose = require("mongoose");
2
3 const Schema = mongoose.Schema;
4
5 const cartltemSchema = new Schema({
6 product: { type: mongoose.Types.Objectld, ref: "Product", required: true },
7 quantity: { type: Number, required: true },
8 // cart,
9 >);
10
11 module.exports = mongoose.model("CartItem", cartltemSchema);
type: Bongoose.Typei.Object]
userSchea*.plugIn(uniqucValldetor);
aodule.export» • ■oneoote.aodelfuser", uierScheae);
Рисунок 1. Модели данных Product, User и CartItem
Рисунок 2. Формальный вид базы данных
NodeJS используется потому, что он позволяет разработчикам использовать JavaScript как на фронт-энде, так и на бэк-энде веб-приложений, что делает его универсальным и эффективным инструментом для создания полнофункциональных приложений.
NodeJS используется в веб-разработке в качестве серверной платформы для создания масштабируемых и высокопроизводительных веб-приложений. Она позволяет разработчикам писать код на стороне сервера на JavaScript, что упрощает разработку как внешней, так и внутренней части веб-приложений с использованием одного языка программирования.
NodeJS предлагает ряд преимуществ в веб-разработке, включая более быстрые циклы разработки, улучшенную масштабируемость и производительность, а также обширную библиотеку готовых модулей и пакетов, которые можно легко интегрировать в приложения. Кроме того, NodeJS поддерживает неблокирующие операции ввода-вывода, что позволяет эффективно обрабатывать большие объемы данных и одновременные соединения.
Обзор инструмента ExpressJS
ExpressJS - это популярная и широко используемая среда веб-приложений для Node.js, которая упрощает процесс создания надежных, масштабируемых и поддерживаемых веб-приложений. Он предоставляет ряд функций и инструментов для обработки HTTP-запросов, маршрутизации, промежуточного программного обеспечения и многого другого.
Некоторые из особенностей ExpressJS включают поддержку различных методов HTTP, легкую интеграцию с базами данных и возможность создания RESTful ApI. Кроме того, ExpressJS позволяет использовать промежуточные функции для обработки запросов и ответов. ExpressJS используется потому, что он упрощает процесс создания веб-приложений и API в Node.js, позволяя быстрее и проще разрабатывать надежные приложения на стороне сервера.
ExpressJS представляет собой минималистичный фреймворк, позволяющий разработчикам быстро и эффективно создавать веб-приложения [6]. Кроме того, он обеспечивает гибкость в плане интеграции с другими библиотеками и базами данных, что делает его популярным выбором для создания API и микросервисов.
ExpressJS также известен своей промежуточной архитектурой, которая позволяет разработчикам добавлять функциональность в свои приложения без необходимости изменять основной код. Это облегчает сопровождение и масштабирование приложений с течением времени.
Реализация прикладного слоя в связке с NodeJS и ExpressJS
Серверная часть проекта отвечает за операции CRUD (Create Read Update Delete), которые включают следующие аспекты внутреннего взаимодействия (рассмотрим на модели Product) [7]:
1. Создание: эта операция подразумевает создание нового продукта и его добавление в базу данных. Обычно это делается при добавлении нового продукта в список товаров.
2. Чтение: эта операция извлекает информацию о конкретном продукте из базы данных. Она часто используется при отображении информации о продукте на сайте магазина.
3. Обновление: эта операция заключается в изменении информации о существующем товаре в базе данных. Обычно она выполняется, когда необходимо изменить атрибуты продукта, такие как цена или описание.
4. Удаление: эта операция подразумевает удаление конкретного продукта из базы данных. Как правило, это происходит, когда продукт снят с производства или больше не продается.
Для реализации данных операций нам необходимо разработать соответствующие функции:
1. createProduct: получает информацию о новом продукте и сохраняет этот новый продукт в базе данных.
2. findProductByld: получает аргумент в виде идентификатора продукта и перебирает информацию об этом продукте. Возвращает ошибку, если продукт не может быть найден в базе данных.
3. findAllProducts: возвращает все продукты, имеющиеся в базе данных.
4. updateProduct: принимает два аргумента, ID продукта, который должен быть изменен, и новые данные продукта, которые должны заменить старые данные продукта.
этого продукта. Возвращает ошибку, если продукт не может быть найден.
5. deleteProduct: принимает один аргумент - ID продукта, который должен быть удален из базы данных. Возвращает ошибку, если продукт не может быть
найти в базе данных.
Аналогичные функции требуется реализовать также и для объектов пользователей: createUser, findAllUsers, deleteUser и т. п.
Так как кодовая база данных модулей достаточно объемная по причине множественных проверок и методов бесперебойной обработки ошибок в обращении с базой данных, далее будет приведен всего единичный пример функции, остальную же реализацию можно найти на репозитории GitHub, который размещен в открытом доступе по следующей ссылке: https://github.com/timmygunja/mern-learn-backend. Реализация методов объектов Product, User, Cart и Favorites находится в подпапке controllers. Также представлены файлы проверки авторизации и загрузки медиа контента в подпапке middleware. Подкаталог routes содержит функции маршрутизации сервера, а входной точкой приложения и местом запуска сервера является файл в корневом каталоге index.js.
const { check > = require!"express-validator");
const productsControllers = requireC../controllers/products-controllers"); const fileUpload = require!"../niddleware/file-upload"); router.getC'/", productsCont rollers. getProductsList ) ; router.get("/:pid", productsControllers.getProductByld);
// router.post("/", checkCname") .not( ). isEmpty( ), productsControllers.createProduct); // router.postC/", fileUpload.singleC'inage"), productsControllers.createProduct);
router.post(
fileUpload.array("image", 4), productsControllers.createProduct
);
router.patch("/:pid", productsCont rollers.updateProduct);
// router.postC'/:pid", productsControllers.updateProduct);
// filtered find if req.headers.productfilter) { const filter = req.headers.productfilter.toLowerCasel); if (filter = "popular") {
products.sort((a, b) => a.viewedCount > b.viewedCount ? -1 : 1)); > else if (filter = "liked") {
products.sort(la, b) => a.likedCount > b.likedCount ? -1 : 1)); } else if (filter = "bestseller") { products.sort((a, b) => a.purchasedCount > b.purchasedCount ? -1 : 1));
> catch (error) {
return nextlnew HttpErrorC'Could not find any product", 5W)>;
>
// console.log(products);
res.status(2M).json({ products: products.aap((product) => product.toObjectl getters: true >)),
Рисунок 3. Методы контроллера и маршрутизации объектов Product
Процесс аутентификации пользователей в системе
Методы аутентификации на уровне back-end (серверном) получают информацию для авторизации в систему из запроса по протоколу HTTP на вход на front-end (клиентской части) и проверяют пользователя с помощью JSON web-токена.
JSON web token (JWT) - это компактный и безопасный способ передачи информации между сторонами в виде объекта JSON. Он может использоваться для аутентификации, авторизации и обмена информацией. Он состоит из трех компонентов: заголовка, полезной нагрузки и подписи.
Алгоритм шифрования токена, такой как HMAC SHA256 или RSA, указывается в заголовке токена. Полезная нагрузка содержит передаваемые утверждения или данные, такие как
X X
о
го А
с.
X
го m
о
2 О M
со
СО CS
о
CS
оэ
о ш m
X
3
<
m
о
X X
имя пользователя или роль. Подпись используется для подтверждения того, что сообщение не было изменено и что отправитель является тем, за кого себя выдает.
Сервер генерирует JWT с информацией о пользователе, подписывает его секретным ключом и отправляет клиенту при входе пользователя в систему [8]. Клиент сохраняет JWT и включает его в последующие запросы к серверу в заголовке авторизации. Затем сервер может расшифровать и проверить JWT, чтобы определить, имеет ли пользователь право доступа к запрашиваемому ресурсу.
Запуск сервера
Запуск сервера осуществляется из файла index.js, который располагается в корневом каталоге серверной части проекта. Здесь мы сначала импортируем модули файловой системы, express, mongoose для работы с БД, маршрутизации и иные вспомогательные библиотеки, а затем инициируем переменную app, которой позже определяем использование вышеназванных модулей.
Точка запуска сервера предусматривает как отработку запросов по зарегистрированным в системе путям/маршрутам, так и ошибочные запросы на сторонние URL-пути сервера, в том числе и те, к которым у определенных пользователей доступа быть не должно [9].
38 app.use("/api/products", productsRoutes);
39 app.use("/api/users", usersRoutes);
48 app.useC'/api/favorites", favsRoutes);
41 app.use("/api/cart", cartRoutes);
42
43 app.use((req, res, next) => {
44 return nexttnew HttpErrorC'Could not find this path", 404));
45 });
46
47 // FAILED REQUESTS LAND HERE
48 app.use((error, req, res, next) => {
49 if (req.file) {
50 fs.unlink(req.file.path, (err) => {
51 console.log(err);
52 });
53 }
54 if (res.headerSent) <
55 return next(error);
56 >
57 // res.status(error.code || 500);
58 res.statuslerror.status || 500);
59 res.json({ message: error.message || "An unknown error occurred!" >);
60 »; 61
62 mongoose
63 .connect(
64 // "mongodb+srv://admin:[email protected]/myFirstDatabase?retryWrites=true&w=majority",
65 process.env.MONGODBJJRL,
66 { useNewllrlParser: true, usellnifiedTopology: true }
67 )
68 .then(() => {
69 // app.listen(5000);
70 app.listen!process.env.PORT);
71 »
72 .catcM(err) => {
73 console.log(err);
74 »;
Рисунок 4. Точка запуска сервера - файл index.js
Введение в разработку клиентской части приложения
Front-end разработка относится к процессу создания пользовательского интерфейса и визуального дизайна веб-сайта или приложения. Она включает использование таких языков, как HTML, CSS и JavaScript, для создания визуально привлекательных и функциональных интерфейсов, удобных для навигации и взаимодействия с пользователями. Front-end разработка является важной частью веб-разработки, поскольку она отвечает за внешний вид и функциональность веб-сайта или приложения. Она также играет важную роль в улучшении пользовательского опыта, обеспечивая отзывчивость интерфейса и его доступность на различных устройствах [10].
Front-end разработчики тесно сотрудничают с дизайнерами и back-end разработчиками, чтобы убедиться, что сайт или приложение визуально привлекательны, функциональны и просты в использовании. Они также должны быть в курсе последних технологий и тенденций в веб-разработке, чтобы со-
здавать современные и инновационные пользовательские интерфейсы. Кроме того, в обязанности front-end разработчиков может входить оптимизация сайта или приложения для поисковых систем и обеспечение его доступности для пользователей с ограниченными возможностями. Это требует глубокого понимания веб-стандартов и лучших практик.
React
React - это библиотека JavaScript, используемая для создания пользовательских интерфейсов. Разработчики могут создавать модульные элементы пользовательского интерфейса, которые можно использовать в разных местах, и пользовательский интерфейс может быстро обновляться при изменении данных [11]. React был разработан компанией Facebook и широко используется в веб-разработке. Он позволяет с легкостью создавать сложные и интерактивные пользовательские интерфейсы.
React становится идеальным выбором для новичков, которые хотят быстро и эффективно приступить к разработке. Кроме того, его универсальность и масштабируемость делают его популярным выбором для создания сложных приложений и программных систем. В целом, React предлагает простой и эффективный метод разработки пользовательских интерфейсов, что делает его идеальным выбором для веб-разработчиков.
Компонентный подход
Компонентный React позволяет повторно использовать существующий код и создавать сложные пользовательские интерфейсы из простых строительных блоков, называемых компонентами [12].
— React поощряет повторное использование компонентов, позволяя разработчику создать библиотеку многократно используемых компонентов, которые можно размещать на всем сайте.
— Это помогает сократить время разработки и улучшить организацию кода, а также позволяет упростить обслуживание и обновление программных систем за счет изоляции и модульности конкретных функциональных возможностей.
Виртуальное DOM - дерево
React использует виртуальный DOM вместо реального DOM для отрисовки обновлений. Это позволяет React вносить изменения, не требуя перезагрузки страницы. Использование виртуального DOM позволяет эффективно обновлять интерфейс, отображая только измененные компоненты [13].
— Виртуальный DOM в React позволяет эффективно обновлять и рендерить, что приводит к повышению производительности по сравнению с традиционными методами. Это делает React популярным выбором для создания высокопроизводительных веб-приложений.
— Предотвращает межсайтовые скриптовые атаки, что делает его безопасным вариантом для веб-разработки. Более того, односторонняя привязка данных в React снижает риск манипулирования данными и повышает безопасность.
— Обеспечивает эффективный рендеринг компонентов, что приводит к улучшению масштабируемости и производительности веб-приложений.
Redux
Redux - это популярная библиотека управления состоянием JavaScript, вдохновленная архитектурой Flux. Она предлагает предсказуемый контейнер состояния, который может управлять и обновлять состояние приложения. Redux совместим со всеми фронтенд-фреймворками и библиотеками, такими как React, Angular и Vue [14]. Он централизует и предсказуемо обновляет состояние, облегчая анализ и отладку приложения. Redux также облегчает
управление потоком данных и состоянием различных компонентов приложения, тем самым повышая общую производительность приложения. Redux широко используется веб-разработчиками, поскольку он обеспечивает более эффективный и надежный метод управления состоянием приложения.
Кроме того, Redux облегчает тестирование и отладку изменений состояния приложения, что делает его популярным выбором для крупномасштабных проектов. Его популярность также привела к созданию многочисленных инструментов и библиотек, которые улучшают его функциональность. Примерами таких инструментов являются Redux DevTools, который обеспечивает визуальное представление изменений состояния в реальном времени, и Reselect, который позволяет эффективно вычислять производные данные из хранилища Redux. Эти возможности делают Redux мощным инструментом управления состоянием для современных веб-приложений [15].
Структура клиентской части приложения
Структура клиентской части конечного проекта выглядит следующим образом (некоторые файлы были исключены для облегчения общего вида конструкции):
rontend h ГвриЬИс | h index.html | L manifest.json h r»src | b ^admin
I b lecomponents | I | b AddProductForm.js
| L AddProductForm.module.css | | L f»pages
| b Admin.js | L Admin.module.css | b l»cart
| b 9components | | | Ь Cartltem.js
| PaycardltemsList.module.css I I L f*pages | I | b Cart.js
| L Cart.module.css | b f»favourite
I b l®components | I | b Favltem.js
| FavItemsList.module .css | | L ftpages
| b Favorites.js | Favorites.module.css | b Ahorne
| b (®components | | | Ь LikeButton.js
| b LikeButton.module.css | SelectBoxHorizontal.module.css | | L f»pages
| b Home.j s | | | b ProductDetail.js
| ProductDetail .module. css | b l^shared | | b P»UIElements
| b Backdrop.css | Section.module.css | b l^components | | | b r*footer I I I I b Footer.js
I Footer.module.css | b C*formElements I b ImageUpload.js I I I I L ImageUpload.module.css I I I L r»navigation | | | | Ь NavBar.css | I I I L NavBar.js | b l®hooks
| b auth-hook.js | | I L http-hook.js
I b ^store
I b cart-slice.js I b products-slice.js | | L ui-slice.js | b (*user
I b lecomponents | L ftpages | | | b Auth.js
| L Auth.module.css | b-DS_Store | b App.css I I" App.js | b env.js I h index.css
h README. md L TODO. txt|
Рисунок 5. Дерево файлов на front-end
Теперь в общих чертах опишем предназначение и функциональное содержимое всех папок и отдельных файлов:
Каталог Файл(ы) Содержание
public index.html manifest.json heart.svg menu-mobile.svg robots.txt Один из корневых каталогов любого React-проекта, содержащий статические активы, такие как HTML, изображения, шрифты и другие файлы, доступные для общего пользования.
src/admin AddProductForm.js Admin.js Admin.module.css Данная папка содержит файлы, связанные с администраторской панелью приложения. В данном каталоге собраны файлы представления самой панели, а также управление добавлением, редактированием и удалением товаров и услуг для главной страницы и базы данных.
src/cart Cart.js Cart.module.css Cartltem.js Cartltem.module.css CartltemsList.js CartltemsList.css EmptyCartCard.js EmptyCartCard.css Paycard.js Paycard.module.css Cart, очевидно, объект корзины приложения. В этом каталоге собраны компоненты различных представлений разных состояний корзины: пустой и заполненной. Также присутствует логика добавления и удаления товаров, увеличения штучного количества отдельного продукта, расчет стоимости корзины, подтверждаемый на сервере, и приглашение к оплате заказа.
src/favourite EmptyFavCard.js EmptyFavCard.css Favourites.js Favourites.css Папка "favourite" предназначена для фрагментов программы, связанных с товарами, помеченных посетителем избранными.
src/home Productltem.js Productltem.css ProductsList.js ProductsList.css RecommendSlider.js RecommendSlider.css Home.js ProductDetail.js ProductDetail.css Данный каталог представляет домашнюю (основную) страницу приложения, которая является точкой входа на Интернет-ресурс. Здесь расположена сетка товаров, которая адаптируется к разным разрешениям экранов в зависимости от устройства пользователя, будь это компьютер, планшет или ноутбук.
src/shared/ UlElements BackDrop.js BackDrop.css Button.js Button.css Card.js Card.css ErrorModal.js Modal.js Modal.css LoadingSpinner.js LoadingSpinner.css Каталог "shared" - является обобщенной папкой проекта. Назначение "общей" папки в веб-приложениях - хранить файлы и ресурсы, которые используются несколькими частями приложения. В данном случае в папке собраны компоненты всплывающих окон уведомлений и ошибок, общие карточки товаров, иконка загрузки и ожидания, секций и т. д.
src/shared/ components Footer.js Footer.module.css ImageUpload.js ImageUpload.css Navbar.js Navbar.css В этом подкаталоге собраны более значимые фрагменты приложения: навигационная панель, футер (подвал ресурса) и компонент загрузки фото.
src/shared/ hooks auth-hook.js http-hook.js Данная папка содержит функции-хуки. Хуки позволяют повторно использовать логику манипуляции состоянием между компонентами и делают ее более читаемой и удобной для сопровождения.
src/store cart-slice.js favourites-slice.js index.js products-slice.js ui-slice.js Объект store в приложениях React предназначен для хранения и управления состоянием приложения. Это централизованное место, где хранятся все данные и логика, что упрощает доступ и изменение состояния из любого компонента приложения
src/user auth.js auth.module.css Папка "user" содержит представление личной страницы пользователя. Здесь можно получить основную информацию о своем аккаунте, выйти из него или авторизоваться.
src env.js Конфигурационный файл проекта, содержит переменные окружения соединения к базе данных, url-пути к серверу и т. п.
src index.js Автоматически генерируемый файл любого React-приложения, является самым высоким скриптовым файлом.
src index.css Таблица стилей самого высокого уровня, реализует переменные адаптирующихся размеров шрифтов для настольных и мобильных разрешений экранов и содержит правила для корневых тегов HTML-документа.
Основные страницы разработанного приложения выглядят следующим образом:
а о в * □ О(о».о»п. О Корзина: 3 Избранное Админ Авторизация
Корзина: 3 Избранное
а <г в * □ О (обновив Г) Админ Авторизация
Монстр энерджи 0,5л
Липтон 0,5л 79 Р Рад булл 0,5л 200 Р Кока-кола 0,5л 90 Р Фиджи 1,5л 235 Р
Холодный чай С Энергетик С> Газировка О Вода питьевая С
СП
Рисунок 10. Страница избранных продуктов
Рисунок 6. Домашняя страница проекта /основной каталог
й > С » □ (
Популярное ■ Популярно« Лучшее Беслтеллер
о
ъЫь
Ред булл 0,5л 200 Р Монстр энерджи 0,5л 119Р Липтон 0,5л
Энергетик С Энергетик С Холодный чай
79 Р Архыз 5л
Ред булл 0,5л
Энергетик
Монстр энерджи 0,5л
Энергетик
Корзина: 2 Избранное Админ Авторизация
Рисунок 11. Корзина пользователя
Рисунок 7. Рекомендованные товары по разным фильтрам
Ф OMa I Ootid: UoogoDB Cloud * ©»««!«» < +
<" • С » mem-tiinmygunja.veicel.app й 4 О » □
А
ъ
'сЗ 1
Корзина: 2 Избранное Админ Авторизация
СО CS
о
CS
оэ
о ш m
X
<
m о х
X
Фанта 0,5л
Архыз 5л 150 Р Пепси 0,5л
Рисунок 8. Подвал / футер приложения
Корзина: 3 Избранное Админ Авторизация
Липтон ОДп Холодный чай
Ред булл 0,5л Энергетик
Рисунок 12. Панель администратора
Конечная версия клиентской части приложения составила 24 папки, 82 файла и более 4 тысяч строк программного кода. Репозиторий проекта также располагается на сервисе GitHub в открытом доступе (URL: https://github.com/timmygunja/mern-learn-frontend). Полностью же проект развернут на облачном сервисе Vercel и доступен в сети (URL: https://mern-timmygunja.vercel.app).
Заключение
Реализация современного веб-приложения для электронной коммерции требует стратегического подхода, включающего тщательное планирование, проектирование и тестирование. Разработка данного приложения с использованием MongoDB, JavaScript, NodeJS, ExpressJS, React и Redux была сложным, но полезным делом.
Рисунок 9. Отдельная страница просмотра товара
Работа началась с определения функциональных требований, которые включали создание учетных записей пользователей, вход в систему, создание и публикацию контента. На начальном этапе разработки была создана схема базы данных с помощью MongoDB, а NodeJS и ExpressJS были настроены для создания кода на стороне сервера. Затем мы написали фронтенд-компоненты на JavaScript и интегрировали их с React и Redux.
Общий дизайн приложения кажется надежным, и оно обеспечивает безопасный механизм аутентификации, защищающий пользователей от несанкционированного доступа
Литература
1. Алексунин В. А. Электронная коммерция и маркетинг в Интернете: учебное пособие. / В. А. Алексунин. - М. : Дашков и К, 2010. - 380 с.
2. Эспозито Дино Дино Разработка современных веб-приложений. Анализ предметных областей и технологий Подробнее: https://www.labirint.ru/books/597978/ / Дино Эспозито Дино.
- ? : Вильямс, 2017. - 464 с. - ISBN 978-5-9908910-3-6
3. Брэдшоу Шеннон MongoDB: полное руководство. Мощная и масштабируемая система управления базами данных / Шеннон Брэдшоу, Йон Брэзил, К. Ходоров. - пер. с англ. Д. А. Беликова. - Москва : ДМК Пресс, 2020. - 540 с.
4. Бэнкер, Кайл MongoDB в действии / Кайл Бэнкер. -Москва : ДМК-Пресс, 2018. - 394 с.
5. Дронов В.А. JavaScript и Node.js для веб-разработчиков / В.А. Дронов, Н.А. Прохоренок. - Санкт-Петербург : БХВ, 2022. - 768 с.
6. Lim, G. Beginning Node.js, Express & MongoDB Development / G. Lim. - Internet : Independently published, 2019.
- 155 с.
7. Браун, И Веб-разработка с применением Node и Express. Полноценное использование стека JavaScript / И Браун. - СПб : Питер, 2017. - 336 с. - ISBN 978-5-496-02156-2.
8. Браун Э. Изучаем JavaScript. Руководство по созданию современных веб-сайтов / Э. Браун. - Москва : Альфа-книга, 2017. - 368 с.
9. Хэррон Д. Node.js Разработка серверных веб-приложений на JavaScript / Д. Хэррон. - Москва : ДМК, 2014. - 144 с.
10. Коэн Исси , Лазаро; Исси Коэн, Джозеф. А.О. Полный справочник по HTML, CSS и JavaScript / А.О. Коэн Исси , Лазаро; Исси Коэн, Джозеф.. - Паблишерз : Эксмо, 2017. - 246 с.
11. Бэнкс А. React: современные шаблоны для разработки приложений / А. Бэнкс, Ева Порселло. - Санкт-Петербург : Питер, 2022. - 320 с. - ISBN 978-5-4461-1492-4
12. Бэнкс А. React и Redux. Функциональная веб-разработка / А. Бэнкс, Е. Порселло. - СПб : Питер, 2018. - 336 с.
13. Азат, М. React быстро. Веб-приложения на React, JSX, Redux и GraphQL / М. Азат. - СПб : Питер, 2019. - 560 с. - ISBN 978-5-4461-0952-4.
14. Скотт, А. Разработка на JavaScript. Построение крос-сплатформенных приложений с помощью GraphQL, React, React Native и Electron / А. Скотт. - СПб : Питер, 2021. - 320 с.
- ISBN 978-5-4461-1462-7.
15. Чиннатамби, К. Изучаем React / К. Чиннатамби. -Москва : Эксмо, 2019. - 368 с.
Creating a web application for an online store using modern development tools Urusov T.T.
Financial University under the Government of the Russian Federation
JEL classification: C10, C50, C60, C61, C80, C87, C90_
This article presents the process of developing a commercial website as a full-featured online store using modern technologies and design approaches in detail. The work describes the currently popular technical set of web-development tools and demonstrates the implementation of the server and client parts of the application, including the development of the database and other application solutions of the middle layer of the complex web project. Keywords: online store, web application, e-commerce, website creation, modern frameworks, server development, client development, backend, frontend, html, css, javascript, react, redux, nodejs, expressjs, mongodb. References
1. Aleksunin V. A. Electronic commerce and marketing on the Internet: a tutorial. / V.
A. Aleksunin. - M. : Dashkov i K, 2010. - 380 p.
2. Esposito Dino Dino Development of modern web applications. Analysis of subject
areas and technologies More: https://www.labirint.ru/books/597978/ / Dino Esposito Dino. - ? : Williams, 2017. - 464 p. - ISBN 978-5-9908910-3-6
3. Bradshaw Shannon MongoDB: The Complete Guide. Powerful and scalable
database management system / Shannon Bradshaw, Jon Brasil, K. Khodorov. -per. from English. D. A. Belikova. - Moscow: DMK Press, 2020. - 540 p.
4. Banker, Kyle MongoDB in action / Kyle Banker. - Moscow: DMK-Press, 2018. - 394
p.
5. Dronov V.A. JavaScript and Node.js for web developers / V.A. Dronov, N.A.
Prokhorenok. - St. Petersburg: BHV, 2022. - 768 p.
6. Lim, G. Beginning Node.js, Express & MongoDB Development / G. Lim. - Internet
: Independently published, 2019. - 155 p.
7. Brown, I Web Development with Node and Express. Making Full Use of the
JavaScript Stack / And Brown. - St. Petersburg: Piter, 2017. - 336 p. - ISBN 9785-496-02156-2.
8. Brown E. Learning JavaScript. Guide to creating modern websites / E. Brown. -
Moscow: Alfa-book, 2017. - 368 p.
9. Harron D. Node.js Development of server-side web applications with JavaScript /
D. Harron. - Moscow: DMK, 2014. - 144 p.
10. Cohen Issi, Lazaro; Issy Cohen, Joseph. A.O. Complete reference to HTML, CSS
and JavaScript / A.O. Cohen Issi, Lazaro; Issy Cohen, Joseph .. - Publishers : Eksmo, 2017. - 246 p.
11. Banks A. React: modern patterns for application development / A. Banks, Eva
Porcello. - St. Petersburg: Piter, 2022. - 320 p. - ISBN 978-5-4461-1492-4
12. Banks A. React and Redux. Functional web development / A. Banks, E. Porcello.
- St. Petersburg: Piter, 2018. - 336 p.
13. Azat, M. React fast. Web applications on React, JSX, Redux and GraphQL / M.
Azat. - St. Petersburg: Piter, 2019. - 560 p. - ISBN 978-5-4461-0952-4.
14. Scott, A. JavaScript development. Building cross-platform applications with GraphQL, React, React Native and Electron / A. Scott. - St. Petersburg: Piter, 2021. - 320 p. - ISBN 978-5-4461-1462-7.
15. Chinnatambi, K. Learning React / K. Chinnatambi. - Moscow: Eksmo, 2019. - 368
p.
X X О го А С.
X
го m
о
2 О
м
CJ
