Xem mẫu
- DEVELOPING E-COMMERCE WEB APPLICATIONS USING
MERN STACK AND ELK STACK
SVTH: Nguyễn Mạnh Tiến, Trần Anh Tú
GVHD: ThS Đỗ Thị Phương Thảo
Tóm tắt - Với sự phát triển nhanh chóng của Internet và công nghệ, các hoạt động hàng
ngày đang dần được cải thiện để mang đến cho con người một cuộc sống chất lượng hơn.
Thương mại điện tử với những tiện ích không thể phủ nhận mà nó mang lại đang dần thay thế các
phương thức mua sắm truyền thống. Một phần lý giải cho điều này là các công nghệ mới nổi đang
giúp các nhà phát triển web tạo, xử lý và duy trì các ứng dụng web hiệu suất cao dễ dàng hơn.
Trong bài báo này, chúng tôi sẽ thảo luận về kỹ thuật, lý do sử dụng ngăn xếp, cách thức hoạt
động và kết quả của chúng tôi khi áp dụng các công nghệ này trên thương mại điện tử.
Abstract - With the rapid development of the Internet and technology, daily activities are
gradually improving to offer human beings a better quality of life. E-commerce, with the undeniable
convenience it provides, is gradually replacing traditional shopping methods. Part of the
explanation for this is that emerging technologies are making it easier for web developers to
create, handle, and sustain high-performing web applications. In this paper, we will discuss the
technique, reasons to use the stacks, the way it works and our results by applying these
technologies on e-commerce.
Keywords – ExpressJS, MERN stack, MongoDB, NodeJS, ReactJs, ,E-commerce,
Elasticsearch, Kibana, ELK stack
I. INTRODUCTION
Technology is constantly advancing and penetrating every aspect of today's life.
People are getting more and more excited about big data, digitizing businesses, and
incorporating technology into the workplace. Furthermore, the covid pandemic (Covid-19)
has spread and shows no signs of abating, leading to an explosion of e-commerce with the
ability to shop without leaving your seat. A normal website cannot afford to build a large
system like e-commerce, since it requires a variety of different and complex techniques.
Additionally, a simple website built with basic HTML, CSS, and a few lines of Javascript
to handle the logic is no longer sufficient to meet the growing needs of customers. A
website nowadays not only has to be user-friendly interface but also required to have an
acceptable performance as well as a secure system to store data and customer identities.
To have the abilities to build a web application that meet the user needs, many techniques
and approaches were introduced and widely adopted to not only handle the majority of the
time-consuming development process, but also to make the application highly efficient
and scalable on demand. One of the most popular approaches, which will be addressed in
this paper, is the stack - the collection of a series of technologies allow developers to
handle both the front-end and back-end development of a website.
33
- II. MAIN CONTENT
A. What are MERN, ELK stack?
1. MERN Stack
As stated above, a stack is a set combined of different programming languages, tools
and technologies needed in order to develop a complete web application.
MERN stack is named after the four key technologies that make up the stack:
MongoDB, ExpressJS, ReactJS, NodeJS. It is an open-source full stack development
framework all based on the language of Javascript. MongoDB - a cross platform, NoSQL
database management system - provides a highly scalable storage which can be used to
store large volumes of data in binary JSON (JavaScript Object Notation) format, which
allows the fast data exchange rate between the server and client. ExpressJS is a module
built on NodeJS, taking charge of server's and routes' management. ReactJS is a
Facebook-developed open source library for creating user interfaces for SPAs (single page
applications) and mobile apps. Because of its scalability and reusability across multiple
platforms, it is becoming increasingly popular among developers. Last but not least,
NodeJS is an open-source, cross-platform runtime environment that connects to the Node
Package Manager (NPM), a repository of thousands of widely used packages [1].
2. ELK Stack
The ELK stack is an acronym that stands for Elasticsearch, Logstash, and Kibana,
which are three common open-source projects. Elasticsearch is an open-source, RESTful,
distributed search and analytics engine. Logstash is a server-side data processing pipeline
that simultaneously ingests data from multiple sources, transforms it, and sends it to
Elasticsearch. Kibana - an open-source data visualization - allows users to visualize data
stored in Elasticsearch using charts and graphs [5].
B. Why use MERN, ELK stack?
1. MERN Stack
MERN is now considered one of the most popular stacks among developers and
architects with all the advantages it brings. It includes four robust open-source
technologies, which covers the entire web development cycle from front-end development
to back-end development, allowing the development of a full-fledged web application with
probably lowest development cost. Moreover, it facilitates the MVC (Model View
Controller) architecture, which ensures a smooth web development process along with a
pre-built extensive suite of testing tools for easier testing processes. Initially, MongoDB
has a simple setup process, high scalability as massive data sets are divided across several
computers, and since it is schema-less, various types of data are stored in separate
documents, resulting in no dependencies. Next, ExpressJS provides a robust API along
with rapid speed and minimal architecture. It's also perfect for code reusability with its
built-in router. Thirdly, ReactJS includes features such as Virtual DOM, JSX, and
34
- Components, all of which contribute significantly to the framework's high performance
when compared to other frameworks. React Components also help code reuse and make
developing and understanding a web application much simpler. Last but not least, the
application’s environment, NodeJS, based on Google Chrome's JavaScript Engine, has
high scalability, quick code execution, and data streaming capabilities [2].
2. ELK Stack
With a powerful, integrated toolset designed to provide actionable real-time insights
from vast sets of search data, the Elastic Stack meets the needs of many growing
businesses such as Netflix, Medium, Linkedin, etc. It provides a highly personalized
search experience since it empowers users to search for everything from anywhere and
unifies content platforms at the search level. Moreover, regardless of a company's
technological infrastructure, Elastic deploys at scale. Elastic is designed to work with any
company's systems whether private or public cloud implementations and to adapt as
businesses expand. Especially for an e-commerce website, a fast and powerful enterprise
search is momentous for the growth of the business.
C. The way stack work
1. MERN stack
React is the frontend, express is the backend. They communicate with each other
through Axios . It is an HTTP client written based on Promises that is used to assist in
building API applications from simple to complex and can be used both in the browser or
in Node.js.
Figure 1 – Application Structure
MongoDb is connected to a back-end server through mongoose. It is an Object Document
Mapper (ODM). This means that Mongoose allows you to define objects with a well-
defined schema mapped to a MongoDB document [4].
35
- Figure 2 – How MongoDB work
2. The way ELK stack work and connect with back-end
ELK Stack is ElasticSearch, Logstash, and Kibana. ElasticSearch is used as a second
database just for search. It replaces the job for mongoDb because when there is much TB
data, finding the product starts having problems. Kibana is used for visualizing the
Elasticsearch documents and helps developers to have a quick insight into it. Kibana
dashboard offers various interactive diagrams, geospatial data, and graphs to visualize
complex queries. Logstash is the data collection pipeline tool. It collects data inputs and
feeds into Elasticsearch. It gathers all types of data from the different sources and makes it
available for further use [3].
We need to create an ELK stack first, there are two options in the homepage of
elasticsearch and initialized with docker. Next, ElasticSearch connect with Express
through the library @elastic/elasticsearch.
Figure 3 – Connect to ElasticSearch
Next, the two databases must be synchronized in terms of data at least in the product
table. To do that, when creating, modifying, or deleting products, we have to add edit and
delete in both databases.
36
- Figure 4 - Delete product in two databases
Figure 5 – How ELK Stack work
D. E-commerce web application - Result of work:
In this segment, we will give a quick overview of our e-commerce web application,
which employs both the MERN and ELK stacks.
For data storage, we created a database consisting of nine collections (like tables in
SQL) that enable us to apply the CRUD for the stored data since the project is an e-
37
- commerce web application with a large amount of data to be stored and work with.
Figure 6 - Database
Each collection in the database, though more or less, is closely related and linked.
The image below is the homepage of our e-commerce web application, it has a
sidebar with the categories of product, a slideshow of advertisement pictures, different
sections of product suggestion, trendy search categories, etc.
Figure 7 - Homepage
When a user clicks on Cart, he/she will be redirected to the personal cart page, where
he/she can make changes to their cart or click Order to make an order.
Figure 8 - Cart
38
- Figure 9 - Order
Moreover, when clicking on User (if logged in), a page of the user profile will be
displayed, allowing you to make any change to the account information. Furthermore, if
the user clicks on the Change to Seller Channel, the user will be redirected to the seller
site, where they can sell their own product on our website.
Figure 10 - User profile
Figure 11 - Seller Channel
As our website applies an ELK stack, the search performance is enhanced at a fast
rate, and the user's search logs are also stored securely, convenient for retrieval of the
searched product.
39
- Figure 12 - Search result
Besides, there are plenty more of aspects of our web application that we cannot fully
deliver is this paper.
III. CONCLUSION
Over time, the Internet and technology has shown remarkable growth, and users now
have access to modern software, online applications with numerous powerful features for
operations and graphical user interfaces. As a result, developers can build websites for a
wide range of purposes without being restricted by technological constraints. In this paper,
we provided a brief overview of the MERN and ELK stacks, as well as a basic
demonstration of an e-commerce web application built using these modern web
application technology stacks to deliver a better understanding of these technologies as
well as the benefits they bring during both the development and the deployment stage.
REFERENCES
[1] Blockchain Simplified. (2020, January 19). What is MERN Stack?. Retrieved
from: https://medium.com/@blockchain_simplified/what-is-mern-stack-9c867dbad302
[2] Gupta, K. (2020, September 1). Why is MERN stack our preferred platform for
Startups app? [Web blog post]. Retrieve from:
https://www.classicinformatics.com/blog/why-is-mern-stack-our-preferred-platform-for-
startups-apps
[3] Guru99. (Unknown). ELK Stack Tutorial: What is Kibana, Logstash &
Elasticsearch?. Retrieve from: https://www.guru99.com/elk-stack-tutorial.html
[4] Bruno, J. (2017, October 9). An Introduction to Mongoose for MongoDB and
Node.js. Retrieve from: https://code.tutsplus.com/articles/an-introduction-to-mongoose-
for-mongodb-and-nodejs--cms-29527
[5] Insights. (Unknown). Why you should be using the Elastic (ELK) Stack.
Retrieve from: https://www.mcplusa.com/the-3-reasons-why-you-should-be-using-elk/
40
nguon tai.lieu . vn
