ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
--------------------

BÁO CÁO ĐỒ ÁN 2
Đề tài
TÌM HIỂU REACT - EXPRESS VÀ XÂY
DỰNG ỨNG DỤNG MINH HỌA
Giảng viên hướng dẫn: ThS. NGUYỄN CÔNG HOAN
Sinh viên thực hiện:
NGUYỄN TRẦN HỮU ĐĂNG

18520014

HOÀNG PHÚC

19520221

Thành phố Hồ Chí Minh, ngày 16 tháng 6 năm 2022


NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
……………………………………………………………………………………….
.………………………………………………………………………………………
……………………………………………………………………………………….
.………………………………………………………………………………………
……………………………………………………………………………………….
.………………………………………………………………………………………
……………………………………………………………………………………….
.………………………………………………………………………………………

……………………………………………………………………………………….
.………………………………………………………………………………………
……………………………………………………………………………………….
.………………………………………………………………………………………
……………………………………………………………………………………….
.………………………………………………………………………………………
……………………………………………………………………………………….
.………………………………………………………………………………………
……………………………………………………………………………………….
.………………………………………………………………………………………
……………………………………………………………………………………….
.………………………………………………………………………………………
……………………………………………………………………………………….
.………………………………………………………………………………………
……………………………………………………………………………………….
.………………………………………………………………………………………
……………………………………………………………………………………….


LỜI CẢM ƠN
Để thực hiện tốt đề tài này, với tất cả sự kính trọng, nhóm em xin kính gửi lời cảm
ơn đến thầy Nguyễn Công Hoan đã trực tiếp giảng dạy, truyền đạt và hỗ trợ cho nhóm
trong quá trình nghiên cứu để nhóm em hồn thành đề tài này.
Trong quá trình thực hiện, cũng như quá trình làm báo cáo, chúng em khó tránh
khỏi những sai sót, nhóm em hi vọng thầy bỏ qua cũng như chúng em rất mong nhận được
ý kiến đóng góp của thầy để có thể học thêm được nhiều kinh nghiệm để hồn thành tốt
những đồ án lần sau. Một lần nữa nhóm em xin chân thành cảm ơn thầy.
Chúng em xin chân thành cảm ơn!
Nhóm nghiên cứu
Tp. Hồ Chí Minh, tháng 6 năm 2022



Mục lục
I.

GIỚI THIỆU TỔNG QUAN .................................................................................. 1
1.

Thơng tin nhóm...................................................................................................... 1

2.

Tổng quan đề tài .................................................................................................... 1

3.
II.

1.1.

Giới thiệu đề tài............................................................................................... 1

1.2.

Phạm vi nghiên cứu......................................................................................... 2

1.3.

Nội dung nghiên cứu ....................................................................................... 2

1.4.


Kết quả hướng tới ........................................................................................... 2

Công cụ sử dụng .................................................................................................... 2
REACT ..................................................................................................................... 3

1.

Giới thiệu chung .................................................................................................... 3

2.

Các từ khố chính (key concepts) .......................................................................... 3
2.1.

Component-based approach ............................................................................ 3

2.2.

Virtual DOM ................................................................................................... 4

2.3.

Props - State .................................................................................................... 4

2.4.

Component Lifecycle ...................................................................................... 5

2.5.


React Hook...................................................................................................... 6

3.

Cách thức hoạt động của ReactJS .......................................................................... 6

4.

Lý do ReactJS được ưa chuộng ............................................................................. 7

5.

Một số thư viện - package phổ biến được sử dụng trong ReactJS......................... 8

III.

5.1.

React Hook...................................................................................................... 8

5.2.

React Router.................................................................................................... 9

5.3.

React Redux - Redux toolkit ......................................................................... 10

5.4.


Redux Thunk ................................................................................................. 10

EXPRESSJS........................................................................................................... 11

1.

Giới thiệu chung .................................................................................................. 11

2.

Ưu điểm của ExpressJS ....................................................................................... 11

3.

Một số chương trình, thư viện được sử dụng phổ biến với ExpressJS ................ 12


4.
IV.
1.

2.

3.

4.

3.1.


EJS ................................................................................................................ 12

3.2.

Json Web Token ............................................................................................ 12

3.3.

Dotenv ........................................................................................................... 12

3.4.

Bcrypt ............................................................................................................ 13

3.5.

Postman ......................................................................................................... 13

Xây dựng Codebase cho ứng dụng ExpressJS..................................................... 13
ỨNG DỤNG MINH HOẠ .................................................................................... 14
Giới thiệu ứng dụng minh hoạ ............................................................................. 14
1.1.

Bài toán thực tế ............................................................................................. 14

1.2.

Hướng giải quyết của nhóm .......................................................................... 15

1.3.


Tổng quan ứng dụng đã phát triển ................................................................ 15

1.4.

Source code ................................................................................................... 16

Product Requirement Document.......................................................................... 17
2.1.

Objective ....................................................................................................... 17

2.2.

Release .......................................................................................................... 19

2.3.

Features ......................................................................................................... 20

2.4.

Analytics - Phân tích ..................................................................................... 26

2.5.

Future work - Hướng phát triển .................................................................... 27

Các màn hình minh hoạ ....................................................................................... 29
3.1.


Trang chủ ...................................................................................................... 29

3.2.

Trang sản phẩm ............................................................................................. 29

3.3.

Trang chi tiết sản phẩm ................................................................................. 30

3.4.

Giỏ hàng ........................................................................................................ 31

3.5.

Xác thực thông tin để đặt hàng ..................................................................... 32

3.6.

Các đơn hàng ................................................................................................ 32

Giao diện quản trị hệ thống ................................................................................. 33
4.1.

Giao diện Admin tổng quan .......................................................................... 33

4.2.


Quản lý thể loại sản phẩm ............................................................................. 34

4.3.

Quản lý giao diện tổng thể ............................................................................ 35


V.

KIẾN TRÚC HỆ THỐNG.................................................................................... 36

VI.

KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN ....................................... 37

1.

Kết quả đạt được .................................................................................................. 37

2.

Hướng phát triển .................................................................................................. 38

TÀI LIỆU THAM KHẢO .............................................................................................. 39


I.

GIỚI THIỆU TỔNG QUAN


1. Thơng tin nhóm

MSSV

Họ tên

Email

18520014

Nguyễn Trần Hữu Đăng



19520221

Hoàng Phúc



2. Tổng quan đề tài
1.1.

Giới thiệu đề tài

Với các doanh nghiệp trong thời đại công nghệ, website là công cụ vơ cùng cần thiết.
Nó mang lại hàng loạt tiện ích tuyệt vời, giúp việc kinh doanh trở nên dễ dàng và nhanh
chóng hơn bao giờ hết. Do đó, việc thiết kế, phát triển một ứng dụng web hỗ trợ cho các
doanh nghiệp tăng trưởng mạnh mẽ.
Hiện nay, có rất nhiều framework hoặc thư viện hỗ trợ việc phát triển một ứng dụng

web một cách nhanh chóng, tiện lợi nhưng vẫn đảm bảo tính bảo mật thơng tin khách hàng.
Xét về mặt thiết kế bố cục: ReactJS giúp các nhà phát triển tạo ra một giao diện website
theo hệ thống các component dễ dàng quản lý, bảo trì và mở rộng ứng dụng. Các thư viện
hỗ trợ cho thư viện này có thể giúp các nhà phát triển tạo ra một trang web thân thiện với
người dùng, giao diện thu hút khách hàng.
Xét về phía máy chủ: JavaScript là một ngơn ngữ lập trình phổ biến được các nhà phát
triển sử dụng. Sử dụng JavaScript, các nhà phát triển có thể tận dụng rất nhiều điểm mạnh
mà nó đem lại như “viết một lần, thực thi ở khắp nơi" - đây là câu nói khiến JavaScript vẫn
cịn phổ biến cho đến tận bây giờ. Tuy nhiên, để cấu hình một ứng dụng JavaScript thì cần

1


rất nhiều bước, do đó, ExpressJS ra đời nhằm rút ngắn thời gian cài đặt ứng dụng, các nhà
phát triển sẽ tập trung hơn vào nghiệp vụ hơn là việc cấu hình.
1.2.

Phạm vi nghiên cứu

Trong đồ án lần này, nhóm chủ yếu tập trung vào nghiên cứu tổng quan cách thức hoạt
động của ReactJS và ExpressJS. Đồng thời, nhóm áp dụng các nghiên cứu trên vào một
ứng dụng thực tế để giúp nhóm có thể hiểu sâu hơn các kiến thức đã tìm hiểu.
1.3.

Nội dung nghiên cứu

Nhóm sẽ tiến hành nghiên cứu chi tiết về cách thức hoạt động, ưu - khuyết điểm cũng
như các thư viện - tính năng - package liên quan đến ReactJS và ExpressJS.
1.4.


Kết quả hướng tới

Với đề tài này, nhóm đề ra hai mục tiêu chính:
Đối với cá nhân các thành viên trong nhóm: mở rộng kiến thức của thành viên trong
nhóm về ReactJS và ExpressJS thơng qua q trình tìm hiểu và áp dụng vào ứng dụng thực
tế. Các kiến thức tìm hiểu được thơng qua đồ án thúc đẩy nhóm phát triển thêm các ứng
dụng khác bằng ReactJS và ExpressJS. Đồng thời, nhóm học được cách nghiên cứu và sử
dụng một framework mới cần trải qua q trình gì nhằm giúp nhóm dễ dàng tiếp xúc với
các công nghệ mới hơn trong tương lai.
Đối với các lập trình viên dùng đồ án nghiên cứu này làm tài liệu tham khảo: thông qua
tài liệu nghiên cứu và ứng dụng nhóm đã xây dựng, các lập trình viên khác có thể dễ dàng
định hướng cần phải tìm hiểu gì khi sử dụng ReactJS và ExpressJS. Đồng thời nhóm có
ghi một số khái niệm, kiến thức cơ bản và thư viện phổ biến được đề xuất bởi cộng đồng
khi sử dụng ReactJS và ExpressJS, các lập trình viên khác có thể tham khảo và tìm hiểu
sâu hơn.
3. Cơng cụ sử dụng
Trong q trình xây dựng phần mềm, nhóm đã sử dụng phần mềm sau:

● NodeJS IDE: IDE hỗ trợ xây dựng ứng dụng phía server (ExpressJS).
2


● Visual Studio Code: hỗ trợ xây dựng giao diện người dùng (ReactJS).
● Postman: hỗ trợ nhóm test các api để lấy dữ liệu từ phía server.
● MongoDB Atlas: hỗ trợ nhóm lưu trữ cơ sở dữ liệu.
II.

REACT

1. Giới thiệu chung

React là một thư viện Javascript, được phát triển bởi Facebook, hỗ trợ xây dựng giao
diện người dùng.
Một ứng dụng có giao diện xây dựng bằng ReactJS sẽ được tạo bởi nhiều thành phần
nhỏ (component), trong đó, output của mỗi component là một đoạn code HTML nhỏ và có
thể tái sử dụng xuyên suốt ứng dụng. Component được xem là từ khố chính (key concept)
khi nhắc đến React. Mỗi component có thể chứa các component nhỏ hơn, do đó, một ứng
dụng với cấu trúc phức tạp sẽ được hình thành từ nhiều component con. Đồng thời, chỉ cần
định nghĩa component con 1 lần và có thể sử dụng ở nhiều nơi.
Một lợi thế khi tìm hiểu ReactJS chính là sau khi có đầy đủ kiến thức cơ bản về ReactJS,
lập trình viên có thể dễ dàng học tiếp React Native - framework hỗ trợ xây dựng ứng dụng
di động đa nền tảng.
2. Các từ khố chính (key concepts)
2.1.

Component-based approach

Đây là concept chính của React. Ứng dụng được chia thành các component nhỏ, điều
này giúp lập trình viên dễ dàng tái sử dụng các component này và có thể quản lý, bảo trì
và phát triển ứng dụng một cách dễ dàng. Concept này giúp đỡ rất nhiều trong việc quản
lý một ứng dụng lớn và phức tạp, bởi lẽ khi xảy ra lỗi, các lập trình viên chỉ cần thay đổi
và chỉnh sửa trong một component nhỏ mà không ảnh hưởng đến code của toàn bộ ứng
dụng.

3


2.2.

Virtual DOM


Virtual DOM chỉ là một đại diện ảo của DOM, Virtual DOM ra đời đã tăng hiệu suất
các ứng dụng ReactJS một cách đáng kể.
Cách thức hoạt động của virtual DOM trong ReactJS:
• Ứng dụng React được tạo bởi rất nhiều component con, mỗi component này đều chứa
một state và React sẽ theo dõi trạng thái của state. Khi state của một component thay
đổi, React sẽ so sánh sự khác nhau giữa phiên bản hiện tại và trước đó thơng qua thuật
tốn Diff, đồng thời thực hiện cập nhật trên virtual DOM.
• Một khi nắm được component nào thay đổi, React sẽ tiến hành cập nhật duy nhất
component đó trên DOM. Điều này đã hạn chế được việc cập nhật toàn bộ component
trên DOM một cách thường xuyên, tăng hiệu năng của ứng dụng web.
2.3.

Props - State

2.3.1. Props
• Để truyền dữ liệu giữa các component, ReactJS cho ra đời khái niệm props (hay cịn
gọi là properties).
• Đối với ReactJS, component con không được thay đổi giá trị của props, bởi vì, props
có thể được truyền cho rất nhiều component con, nếu các component con thay đổi
props sẽ dẫn đến nhập nhằng khi testing, dữ liệu giữa các component không thống
nhất.
2.3.2. State
• Nếu props dùng để hứng dữ liệu từ component cha thì state được dùng để lưu dữ liệu
của chính component đó với giá trị có thể thay đổi phụ thuộc vào logic bên trong
component đó.
• Tuy nhiên, khi sử dụng thao tác cập nhật giá trị của state, lập trình viên phải chú ý
nguyên tắc mỗi khi state thay đổi, component sẽ được render lại. Do đó, cần cân nhắc
trong việc thay đổi giá trị state nhằm tránh việc render liên tục, giảm hiệu suất ứng
dụng.


4


2.4.

Component Lifecycle

Để có thể hiểu rõ cách thức hoạt động của một component, lập trình viên cần nắm rõ
vịng đời (lifecycle) của React component. Để có thể quản lý dữ liệu từ component cha
(props), dữ liệu nội tại (state) và các điều kiện logic khiến component re-render, lập trình
viên phải thực sự hiểu rõ định nghĩa và cách sử dụng các phương thức trong lifecycle. Vòng
đời của một component được chia làm 3 nhóm chính:
2.4.1. Mounting
Khi một component được khởi tạo, nó sẽ thực thi các câu lệnh dưới đây theo thứ tự
nhằm thêm component đó vào DOM để render
- constructor() được sử dụng để khởi tạo các state cho component, do đó, tránh cập nhật
giá trị state tại hàm này vì sẽ gây render liên tục.
- render()

5


- componentDidMount() là nơi thực hiện các side effect như gọi api lấy dữ liệu, thực hiện
một số thao tác lên DOM,...
2.4.2. Updating
Khi state hoặc props của component thay đổi, các hàm trong nhóm này sẽ được thực
thi và quyết định xem có cần phải render lại UI hay khơng. Trường hợp UI không được rerender khi hàm shouldComponentUpdate() trả về giá trị false.
2.4.3. Unmounting
Khi một component bị xoá khỏi DOM, các hàm thuộc nhóm này sẽ được thực thi. Đây
nơi là để xử lý các biến thời gian như SetInterval, ngắt các network request.

2.5.

React Hook

Đối với các lập trình viên vừa tiếp xúc với JS, việc sử dụng class component và các
phương thức trong lifecycle rất dễ gây ra lỗi. Trong khi đó, các functional component thì
khơng thể sử dụng state và lifecycle nhưng lại dễ sử dụng và dễ học hơn class component
cho những người mới bắt đầu. Do vậy, React Hook ra đời nhằm giải quyết các vấn đề trên,
các hooks cho phép kết nối state và các lifecycle vào functional component.
Ở đồ án này, nhóm đã sử dụng React Hook để các component trở nên gọn nhẹ, dễ đọc,
dễ sửa chữa và mở rộng.
3. Cách thức hoạt động của ReactJS
ReactJS thường được sử dụng để tạo ra giao diện cho các SPA - single page application.
Khi sử dụng ReactJS, ứng dụng web được chia thành từng component nhỏ, mỗi component
chứa hai thành phần chính là state và props. Dữ liệu được truyền từ component cha sang
con gọi là props, trong khi đó state được định nghĩa là dữ liệu của riêng component đó.
Component chỉ được re-render khi state của nó thay đổi, chính vì lý do này, ứng dụng
khơng render lại tồn bộ trang web mà chỉ re-render component mà người dùng thao tác
lên. Chính vì nguyên tắc hoạt động trên cùng với các component chỉ định nghĩa một lần

6


mà có thể sử dụng ở nhiều nơi, ReactJS đã tăng hiệu suất của ứng dụng web và trở thành
thư viện phát triển giao diện được nhiều người sử dụng.
4. Lý do ReactJS được ưa chuộng
Một số lợi ích của ReactJS khiến nhóm quyết định chọn thư viện này để tìm hiểu trong
đồ án:
• So với đối thủ cạnh tranh là Angular, React có một số điểm nổi trội hơn khiến nhóm
quyết định tìm hiểu và áp dụng React trong đồ án này.

Về mặt hiệu suất: React sử dụng công nghệ DOM ảo cịn Angular thì sử dụng DOM
thường. Với DOM thường, Angular sử dụng DOM API để tìm và cập nhật các element,
hiệu suất của ứng dụng sẽ giảm đi đáng kể khi phải liên tục tìm và cập nhật DOM. Chính
vì thế, DOM ảo ra đời giải quyết bài toán cập nhật DOM sao cho hiệu năng tốt nhất. Tất
cả thay đổi trong React sẽ được cập nhật trong DOM ảo, React sử dụng thuật toán Diff để
kiểm tra sự khác biệt giữa DOM ảo và DOM gốc rồi cập nhật những thay đổi tại những vị
trí cần thiết.
Về mặt cộng đồng hỗ trợ: Mặc dù còn non trẻ, React.js đã đạt được 163 nghìn sao và 32,7
nghìn lần Fork trên Github và vượt qua AngularJS một cách rõ ràng khi nó xoay quanh
59,5 nghìn Sao và 1,578 nghìn Người đóng góp. Do đó, cộng đồng hỗ trợ ReactJS rất mạnh,
điều này có thể hỗ trợ nhóm trong việc tìm và sửa chữa lỗi.
• JSX: Để tạo ra giao diện web bằng ReactJS, các nhà phát triển phải sử dụng câu lệnh
React.createElement, tuy nhiên điều này làm cho file thiết kế giao diện trở nên khó quản
lý, sửa lỗi và mở rộng. Do đó, JSX ra đời, cho phép viết mã code HTML trong ứng
dụng React và biển đổi các HTML tags thành các React elements. Chính vì thế, JSX đã
hỗ trợ các lập trình viên rất tốt trong việc xây dựng giao diện ứng dụng web.
• Để khởi tạo một ứng dụng React chỉ cần dùng lệnh “create-react-app" mà không cần
tốn quá nhiều thời gian cho việc config.
• Component: các component được tách thành từng file nhỏ và có thể tái sử dụng, vì vậy
có thể tránh được việc code bị trùng nhau, dễ sửa chữa, duy trì và phát triển ứng dụng.
7


5. Một số thư viện - package phổ biến được sử dụng trong ReactJS
5.1.

React Hook

5.1.1. Khái niệm
Hooks là những hàm cho phép kết nối React state và lifecycle vào các components sử

dụng hàm. Với Hooks có thể sử dụng state và lifecycles mà không cần dùng ES6 class. Sự
ra đời này đã giúp các lập trình viên tránh sự nhập nhằng về con trỏ this
5.1.2. Các hook phổ biến: useState, useEffect, useRef.
a. useState: cập nhật giá trị của state, trong class component để thay đổi state phải
dùng cú pháp this.state. Tuy nhiên với cú pháp này sẽ bị nhập nhằng con trỏ this, do
đó, hook useState ra đời để giảm bớt sự nhập nhằng trên. Để thay đổi state trong
functional component chỉ cần dùng hàm setState().
b. useEffect: là nơi thích hợp để xử lý các side effect như gọi api lấy dữ liệu từ server,
các thao tác liên quan đến DOM cũng như các vấn đề liên quan đến setInterval,
network request.

Một useEffect sẽ gồm 3 thành phần: side effect, dependencies và cleanup:
-

Side Effect: những ảnh hưởng từ bên ngoài vd gọi API, tương tác dom hay
setInterval.

-

Cleanup: Là nơi xử lý các tác vụ liên quan đến hỷ network request, các biến thời
gian. Một ví dụ điển hình cho phần clean up: nếu có timeInterval mà ko clear sau
khi unmount component thì khi unmount component rồi những setinterval vẫn chạy
8


và vẫn update state sẽ dẫn đến lỗi đã unmount rồi mà vẫn cố gắng update state =>
phải clear setinterval trong hàm cleanup của use effect.
-

Có 3 loại dependencies:


• Khơng truyền dependencies vào thì use effect chạy lại sau khi hàm render được gọi
• Nếu truyền vào mảng rỗng [] thì sẽ giống với hàm componentDidMount, use effect
chỉ chạy 1 lần, side effect chạy sau render lần đầu và clean up chỉ chạy khi compo
unmount
• Truyền filter vào mảng dependencies: chỉ chạy use effect khi filter thay đổi. Ví dụ
thanh search, gọi api theo filter của thanh search, filter thay đổi thì sẽ gọi api (chạy
lại use effect), cịn filter ko đổi thì ko gọi api (ko chạy use effect).
c. useRef: dùng để lưu trữ giá trị của một biến qua các lần render. Sau mỗi lần render,
giá trị của một số biến trong component sẽ quay lại giá trị ban đầu, sử dụng useRef để lưu
trữ các giá trị này.
5.2.

React Router

5.2.1. Khái niệm: là một thư viện định tuyến, với Url này sẽ tương đương với Route
này và render ra giao diện tương ứng.
5.2.2. Các tính năng - tiện ích: <Link>, <NavLink>, <Redirect>, useLocation,
useParams
a. <Link> <NavLink>: đối với HTML, cặp thẻ để chuyển hướng
là <a></a>, cịn ở React thì dùng <Link>, <NavLink>
b. <Redirect>: dùng để chuyển trang, có thể lấy thông tin các
trang trước để sử dụng thông qua useLocation
c. useParams (chỉ có ở React router v5): dùng để lấy thơng tin các params trên url
d. useLocation (chỉ có ở React router v5): với react router v4, để lấy được thơng tin từ
url (params, pathname, …) thì phải dùng đối tượng location được truyền như props
vào component. Tuy nhiên, ở v5, chỉ cần dùng hook useLocation thì vấn đề này có
thể giải quyết mà khơng cần truyền đối tượng location
9



5.3.

React Redux - Redux toolkit

5.3.1. Khái niệm Redux và Redux Toolkit
a. Redux: là công cụ dùng để quản lý state của ứng dụng. Ứng dụng có thể truy xuất
state này ở mọi nơi thông qua store mà không cần truyền state từ component cha sang con
b. Redux toolkit: là một package được sinh ra để tiết kiệm thời gian trong việc cấu hình
store, các file action hay reducer trong redux khá tách biệt và code lặp lại khá nhiều. Tuy
nhiên, đến với redux toolkit, việc config store, action, reducer trở nên dễ dàng, nhanh chóng
và ngắn gọn
5.3.2. Các tính năng - tiện ích: store, action, reducer và nguyên lý hoạt động
a. Store: là nơi lưu trạng thái của ứng dụng và là duy nhất, có thể lưu trữ, truy xuất
hoặc cập nhật giá trị state trong store thông qua các action
b. Action: là các event, các event này bao gồm type (để reducer biết đây là loại action
gì, từ đó thực hiện các hành động cập nhật state thích hợp) và payload (chứa thông
tin state mới)
c. Reducer: là các pure function, các hàm này lấy state hiện tại, kết hợp với loại action,
state mới và logic được khai báo trong reducer để cho một state có giá trị khác state
ban đầu
5.3.3. Các tính năng - tiện ích của redux được thay thế bởi redux toolkit:
Slice: Với redux, khi định nghĩa action và reducer phải tách ra thành các file khác nhau,
trong khi đó đối với slice, reducer và action được kết hợp lại trong cùng 1 file.
5.4.

Redux Thunk

Đối với Redux, Action chỉ nhận vào POJO rồi chuyển qua cho reducer. Tuy nhiên, 1 số
trường hợp action cần truyền vào function (Async Action) cho các tác vụ bất đồng bộ (như

gọi api, settimeout).
Khi cần thực hiện các thao tác kể trên, middleware giúp action thực hiện thao tác bất
động bộ xong mới chuyển cho reducer. Một số loại middleware có thể giải quyết bài toán

10


trên như redux thunk, redux saga. Nhóm quyết định chọn redux thunk vì dễ sử dụng, cấu
hình dễ dàng và phù hợp với những ứng dụng vừa và nhỏ.
Redux Thunk là một Middleware cho phép viết các Action trả về một function thay vì
một plain javascript object bằng cách trì hoãn việc đưa action đến reducer.
Redux Thunk được sử dụng để xử lý các logic bất đồng bộ phức tạp cần truy cập đến
Store hoặc đơn giản là việc lấy dữ liệu như Ajax request.
III.

EXPRESSJS

1. Giới thiệu chung
ExpressJS là một framework của NodeJS, cung cấp tập hợp nhiều tính năng mạnh cho
việc viết những chương trình trên web và điện thoại.
ExpressJS ra đời nhằm rút ngắn thời gian cài đặt và cấu hình các routes của những API
trong NodeJS. Giúp các lập trình viên tập trung hơn vào việc phát triển nghiệp vụ thay vì
tốn nhiều thời gian cho việc cấu hình dự án. ExpressJS dễ dàng trong việc tích hợp với các
hệ sinh thái của NodeJS như: Json Web token, Mongoose, Mailgun,...
2. Ưu điểm của ExpressJS
ExpressJS hỗ trợ định nghĩa những routes của chương trình bạn dựa trên những phương
thức HTTPs và URLs.
Express cho phép bạn tạo những REST API server.
ExpressJS cho phép bạn định nghĩa một lỗi handling của middleware.
Express giúp bạn có thể dễ dàng mở rộng dự án của bạn một cách nhanh chóng với sự

hỗ trợ của NodeJS với rất nhiều mã nguồn mở đi kèm.
ExpressJS hỗ trợ tính năng bộ nhớ đệm, và lợi thế của tính năng này là chúng ta khơng
phải chạy lại code lặp lại nhiều lần. Thêm nữa, nó sẽ giúp web của chúng ta load nhanh
hơn bao giờ hết.

11


3. Một số chương trình, thư viện được sử dụng phổ biến với ExpressJS
3.1.

EJS

3.1.1. Khái niệm
EJS là viết tắt của embeded-javascript-syntax,là một khuôn mẫu ngôn ngữ đơn giản cho
phép bạn tạo những HTML markup với những lệnh JavaScript đơn giản
3.1.2. Ưu điểm
• EJS giúp q trình phát triển nhanh hơn bằng cách đơn giản hóa q trình hiển thị dữ
liệu.
• EJS rất dễ để xác định và sửa những lỗi trong quá trình lập trình. Những lỗi của bạn là
những câu lệnh JavaScript cơ bản với những khuôn mẫu cùng hiển thị số thứ tự của
dịng kèm theo.
• EJS có một cộng đồng hỗ trợ rất lớn có thể hỗ trợ bạn bất cứ khi nào bạn cần.
3.2.

Json Web Token

Là một thư viện hỗ trợ các tác vụ và thao tác với Json Web Token như việc tạo ra các
token, cấu hình token, đọc các token.....
Json Web Token là một chuẩn để truyền tải thơng tin một cách an tồn giữa các bên

bằng đối tượng Json.
Json Web Token thường được dùng để xác thực và phân quyền người dùng
(authentication và authorization), chuỗi token sẽ được gửi kèm trong phần header của
request và server sẽ thơng qua token đó xác thực request.
3.3.

Dotenv

Là một môđun tải những biến môi trường từ một file .env vào trong process.env
Dotenv cấu hình việc lưu trữ mơi trường, tách bạch hồn tồn với code dựa trên phương
pháp chương trình mười hai lớp.

12


3.4.

Bcrypt

Là một thuật tốn hỗ trợ việc mã hóa các thông tin quan trọng.
Bcrypt được đánh giá là bảo mật và an toàn hơn so với MD5 và SHA.
3.5.

Postman

Là một phần mềm mã nguồn mở được sử dụng để phát triển, xây dựng, thiết kế và làm
tài liệu cho các RESTful Web Service.
POSTMan được tìm hiểu và tích hợp trong đồ án để hỗ trợ việc tự động làm các tài liệu,
mô tả các API của đồ án.
4. Xây dựng Codebase cho ứng dụng ExpressJS

Nhóm chúng em đã tìm hiểu và xây dựng một Codebase hoàn chỉnh để triển khai một
ứng dụng ExpressJS tiêu chuẩn. Codebase này khá hoàn chỉnh, rõ ràng và phù hợp trong
việc phát triển một ứng dụng ExpressJS thực tế. Từ đó, các lập trình viên có nhu cầu sử
dụng bản báo cáo này để làm tài liệu tham khảo, hồn tồn có thể áp dụng Codebase này
để làm nền tảng phát triển các ứng dụng ExpressJS sau này.

Hình ảnh Codebase (chụp từ ứng dụng)
13


Mơ tả Codebase:
• .vscode: chứa cấu hình code editor phù hợp nhất với ngơn ngữ hiện tại
• bin: set up những lệnh cơ bản nhất để chạy được 1 chương trình NodeJS
• constants: Những data cơ bản khơng cần thiết phải lưu xuống database sẽ được
hardcode trong folder này
• controllers: Chứa những file xử lý chính của chương trình
• middlewares: Chứa những chương trình midlleware người dùng sẽ viết
• models: Để tạo shcema lưu về database
• node_modules: Chứa các package, thư viện cần thiết để chạy được chương trình
• public: Chứa những phần xử lý giao diện không sử dụng React
• routes: Chứa những route chính của chương trình
• utils: Chứa những logic được sử dụng nhiều trong chương trình
• views: Những phần giao diện sử dụng template engine của express để render sẽ được
chứa ở đây
• .env: Chứa những link môi trường quan trọng sẽ được thư viện dotenv đảm bảo tính
bảo mật
• .gitignore: Chứa các file khơng cần thiết upload lên github
• app.js: Chứa những đường dẫn chính của chương trình và truy xuất tới middleware,
controller để xử lý
• config.js: Cấu hình cho các biến của file dotenv

• package.json: Ghi lại những điều cần set up để có thể chạy được trương trình
IV.

ỨNG DỤNG MINH HOẠ

1. Giới thiệu ứng dụng minh hoạ
1.1. Bài toán thực tế
Các ứng dụng mua hàng online đã ra đời từ rất lâu về trước như Tiki, Shopee. Tuy
nhiên, các ứng dụng này không chuyên về mảng cung cấp sản phẩm về tổ yến, còn đối với
một số cửa hàng chuyên cung cấp các sản phẩm về yến thì khơng tạo được sự tin tưởng
14


tuyệt đối cho khách hàng về mặt chất lượng sản phẩm cũng như về vấn đề bảo mật thông
tin khách hàng. Đồng thời tận dụng thời điểm hậu covid, các sản phẩm về sức khỏe được
quan tâm nhiều hơn, một cơ hội để nhóm nắm bắt thời điểm xây dựng chuyên trang bán
hàng thực phẩm chức năng.
Do đó, hiện tại trên thị trường không những cần các trang web chuyên cung cấp các
mặt hàng liên quan đến công nghệ mà còn phải đảm bảo chất lượng sản phẩm giống với
quảng cáo, đồng thời bảo mật thông tin khách hàng luôn được đặt lên hàng đầu.
1.2. Hướng giải quyết của nhóm
Nhóm đã đề ra kế hoạch và phát triển một trang web mua hàng online DamiNest để có
thể giải quyết vấn đề của bài toán thực tế hiện nay.
DamiNest cung cấp các mặt hàng liên quan đến yến và tổ yến. Với các mặt hàng đa
dạng, chất lượng đúng với giá tiền mà người sử dụng bỏ ra, DamiNest mong muốn đem
đến cho người dùng một trải nghiệm tốt hơn trong việc mua hàng online mà không cần
nghi ngại về các chiêu trị lừa đảo cũng như là vấn đề thơng tin khách hàng bị lộ ra bên
ngoài.
1.3. Tổng quan ứng dụng đã phát triển
Với một ứng dụng web, trải nghiệm người dùng và giao diện mang tính thẩm mỹ cao

được xem như là các tiêu chí hàng đầu thu hút khách hàng. Sau khi nghiên cứu và tìm hiểu
về ReactJS, nhóm nhận thấy sử dụng thư viện này cho việc phát triển phần frontend của
ứng dụng DamiNest là vô cùng hợp lý. Bởi vì:
• Một trang web bán hàng online được xem là một ứng dụng với độ phức tạp vừa phải và
có tính mở rộng cao và ReactJS là thư viện tuyệt vời trong việc quản lý code và khả
năng mở rộng ứng dụng.
• Concept của ReactJS là chỉ render lại những thành phần cần thiết chứ không load lại
toàn bộ trang (Single application page), điều này tăng hiệu suất đáng kể cho một trang
web, dẫn đến trải nghiệm người dùng tốt.

15


• ReactJS có rất nhiều thư viện hỗ trợ việc xây dựng một ứng dụng web, sử dụng các thư
viện này, các lập trình viên sẽ tiết kiệm thời gian và chi phí khi phát triển DamiNest.
Ngồi phần giao diện, một web bán hàng online được đánh giá cao khi tốc độ xử lý dữ
liệu nhanh, bảo mật thông tin khách hàng tốt. Và nhóm nhận thấy rằng, ExpressJS có khả
năng thực hiện rất tốt các công việc nêu trên. Bởi vì:
• Khả năng bảo mật của ExpressJS được đánh giá là rất tốt vì được NodeJS hỗ trợ
framework vơ cùng mạnh mẽ. Hơn thế nữa, cấu trúc của ExpressJS được cho rằng là
rất chặt chẽ. Thêm vào đó, nhóm sử dụng các công nghệ bảo mật rất được thịnh hành
và tin dùng ngày nay như mã hoá bằng Bcrypt, JWT….
• ExpressJS được cung cấp rất nhiều các thư viện khác hỗ trợ việc xây dựng một ứng
dụng với đầy đủ và đáp ứng được hết những yêu cầu thực tế ngày nay. Nhờ vậy, việc
chọn phát triển bằng ExpressJS cũng đem lại rất nhiều lợi thế cũng như là tiết kiệm
được rất nhiều thời gian trong việc triển khai ứng dụng.
• Ứng dụng ExpressJS rất dễ để bảo trì cũng như là nâng cấp về sau.
1.4. Source code
Customer: />Admin: />
16



2. Product Requirement Document
2.1. Objective

17


DamiNest muốn trở thành dịch vụ cung cấp đầy đủ các sản phẩm
tổ yến chất lượng nhất hiện nay. Mọi người có thể mua sắm và tìm thấy
Vision

mọi sản phẩm về Yến tại DamiNest với chi phí thấp nhất.
DamiNest cam kết ln ln đáp ứng các tiêu chí về chất lượng,
giá cả, dịch vụ chăm sóc khách hàng một cách tuyệt vời nhất.
1. Chỉ cần có sản phẩm nào về yến được ra mắt, thì khách hàng có thể
tìm kiếm và sở hữu ngay thông qua DamiNest.

Goals

2. Là ứng dụng được nhắc đến đầu tiên khi khách hàng có nhu cầu mua
các sản phẩm về yến xào.
3. Giúp công ty bán yến có thể quản lý đơn hàng và khách hàng của mình
1. Để khách hàng có thể tìm kiếm và sở hữu ngay các sản phẩm tổ yến
chất lượng nhất, nhóm phải ln theo dõi, cập nhật tin tức trong thị
trường chăn ni yến, nhà yến và tìm nguồn hàng uy tín với giá ưu đãi
để nhập về kho sớm nhất có thể.
2. Bổ sung tất cả kiến thức liên quan đến sức khỏe, công dụng của tổ yến
để có thể tư vấn, giúp khách hàng sở hữu sản phẩm phù hợp với mong


Initiatives

muốn của họ nhất.
3. Nghiên cứu các chính sách đổi trả, giao hàng miễn phí, ưu đãi cho
khách quen nhằm thu hút và tiếp cận khách hàng nhanh chóng.
4. Tìm hiểu thêm về marketing, chạy quảng cáo ứng dụng đến các khách
hàng tiềm năng.
5. Tìm hiểu về tâm lý hành vi để tăng trải nghiệm người dùng.

18


1. Những khách hàng có nhu cầu sử dụng tổ yến nhưng khơng có thời
gian để trực tiếp đến cửa hàng mua sắm hoặc khoảng cách địa lý quá
xa.
2. Những khách hàng không rành về các sản phẩm về yến và cần được
Persona(s)

tư vấn để chọn ra được sản phẩm phù hợp với nhu cầu và chi tiêu của
mình.
3. Quản lý của cửa hàng bán yến để có thể theo dõi đơn hàng, nắm được
những phản hồi của khách hàng để có cách chăm sóc khách hàng tốt
nhất.

2.2. Release

Release
Date

DamiNest

Thời gian dự kiến: 18/6/2022
1. Để có thể cạnh tranh với các cơng ty đối thủ, nhóm ln theo dõi và chỉnh
sửa theo phản hồi từ người dùng sau khi đã trải nghiệm dịch vụ.
2. Về phần ra mắt thị trường: nhóm tìm hiểu và tham khảo các buổi triển

Initiative

lãm các sản phẩm nông sản của các doanh nghiệp nổi tiếng trên khắp đất
nước để tạo ấn tượng mạnh bằng hình ảnh và gây tị mị, hứng thú với
những thơng tin cung cấp đến cơng chúng.
3. Đầu tư chi phí để phủ rộng thương hiệu, hình ảnh thương hiệu xuất hiện
với tần suất lớn, thường xuyên để công chúng ghi nhớ.

19