Đồ án tìm HIỂU REACT SPRING BOOT và xây DỰNG ỨNG DỤNG MINH họa

ĐẠ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 1
Đề tài: TÌM HIỂU REACT - SPRING BOOT
VÀ XÂY DỰNG ỨNG DỤNG MINH HỌA
Giảng viên hướng dẫn:
ThS. MAI TRỌNG KHANG
Sinh viên thực hiện:
ĐINH NGỌC UYÊN PHƯƠNG

18520335

PHẠM NGỌC THỊNH

18520368

Thành phố Hồ Chí Minh, ngày 1 tháng 7 năm 2021


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 Mai Trọng Khang và 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 q trình
nghiên cứu để nhóm em hồn thành đề tài này.
Trong q trình thực hiện, cũng như q 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 để hoà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 7 năm 2021


MỤC LỤC

I. GIỚI THIỆU TỔNG QUAN
1. Thơng tin nhóm
2. Tổng quan đề tài
2.1. Giới thiệu đề tài
2.2. Phạm vi nghiên cứu
2.3. Nội dung nghiên cứu
2.4. Kết quả hướng tới
3. Công cụ sử dụng

1
1
1
1
2
2
2
3

II. REACT
1. Giới thiệu chung
2. Các từ khoá chính (key concepts)
2.1. Component-based approach
2.2. Virtual DOM
2.3. Props - State
2.4. Component Lifecycle
2.5. React Hook
3. Cách thức hoạt động của ReactJS
4. Lý do ReactJS được ưa chuộng
5. Một số thư viện - package phổ biến được sử dụng trong ReactJS
5.1. React Hook

5.2. React Router
5.3. React Redux - Redux toolkit
5.4. Redux Thunk

4
4
4
4
4
5
6
7
7
8
9
9
11
11
12

III. SPRING BOOT
1. Giới thiệu chung:
2. Ưu điểm của Spring Boot:
3. Một số thư viện được sử dụng phổ biến với Spring Boot:
3.1. Hibernate:
3.2. Spring Data JPA:
3.3. Spring Security:
3.4. Bcrypt:

14

14
14
15
15
15
16
16


3.5. Jjwt:
3.6. Swagger:
4. Xây dựng Codebase cho ứng dụng Spring Boot:
IV. ỨNG DỤNG MINH HOẠ
1. Giới thiệu ứng dụng minh hoạ
1.1. Bài tốn thực tế
1.2. Hướng giải quyết của nhóm
1.3. Tổng quan ứng dụng đã phát triển
2. Product Requirement Document
2.1. Objective
2.2. Release
2.3. Features
2.3.1. Thanh điều hướng đến các loại sản phẩm
2.3.2. Gợi ý các dòng sản phẩm liên quan
2.3.3. Đánh giá chất lượng sản phẩm
2.3.4. Theo dõi các đơn hàng
2.3.5. Tạo giỏ hàng và đặt hàng nhanh chóng
2.3.6. Tạo danh sách các sản phẩm u thích
2.3.7. Xem thơng tin chi tiết sản phẩm
2.3.8. Cập nhật các loại thông tin cá nhân
2.3.9. Cập nhật các sản phẩm trending trong thời gian hiện tại

2.4. Analytics - Phân tích
2.4.1. Tính năng gợi ý các dịng sản phẩm liên quan
2.4.2. Tính năng đánh giá chất lượng sản phẩm
2.4.3. Tính năng theo dõi các đơn hàng
2.4.4. Tính năng tạo giỏ hàng và thanh tốn
2.4.5. Tính năng tạo danh sách sản phẩm yêu thích
2.5. Future work - Hướng phát triển
3. Các màn hình minh hoạ
3.1. Trang chủ
3.2. Trang sản phẩm
3.3. Trang chi tiết sản phẩm
3.4. Giỏ hàng

16
17
17
20
20
20
20
20
22
22
23
24
24
25
25
26
26

27
27
28
29
29
29
29
30
30
30
31
32
32
33
34
37


3.5. Đăng nhập
3.6. Trang sản phẩm yêu thích
3.7. Các đơn hàng

38
39
40

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

42

VI. KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN
1. Kết quả đạt được
2. Hướng phát triển

44
44
44

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

45


Final Report - Project 1

Research ReactJS - Spring Boot

I. GIỚI THIỆU TỔNG QUAN
1. Thơng tin nhóm
MSSV

Họ tên

Email

18520335

Đinh Ngọc Un Phương

18520368

Phạm Ngọc Thịnh



2. Tổng quan đề tài
2.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ủ: Java 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 Java, 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 Java
vẫn cịn phổ biến cho đến tận bây giờ. Tuy nhiên, để cấu hình
1

Final Report - Project 1

Research ReactJS - Spring Boot

một ứng dụng Java thì cần rất nhiều bước, do đó, Spring Boot
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.

2.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à Spring Boot. Đồ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.

2.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à Spring Boot.

2.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à Spring Boot 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à Spring Boot.
Đồ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à Spring
Boot. Đồ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à Spring Boot, các lập trình viên khác có thể
tham khảo và tìm hiểu sâu hơn.
2


Final Report - Project 1

Research ReactJS - Spring Boot

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:
● Eclipse IDE: IDE hỗ trợ xây dựng ứng dụng phía server
(Spring Boot).
● 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.
● MySQL Workbench: hỗ trợ nhóm lưu trữ cơ sở dữ liệu.

3


Final Report - Project 1

Research ReactJS - Spring Boot

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 React JS 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.

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:

4


Final Report - Project 1

Research ReactJS - Spring Boot

● Ứ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
a. 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.
b. 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.

5


Final Report - Project 1

Research ReactJS - Spring Boot

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:
a. 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.
6


Final Report - Project 1

Research ReactJS - Spring Boot

- render()
- 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,...
b. 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
re-render khi hàm shouldComponentUpdate() trả về giá trị
false.
c. 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
7


Final Report - Project 1

Research ReactJS - Spring Boot

component mà người dùng thao tác lên. Chính vì ngun tắc hoạt động
trên cùng với các component chỉ định nghĩa một lần 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 tố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

8


Final Report - Project 1

Research ReactJS - Spring Boot

đã 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 1 ứ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

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.

9


Final Report - Project 1

Research ReactJS - Spring Boot

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 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

10


Final Report - Project 1

Research ReactJS - Spring Boot

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

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.
11


Final Report - Project 1

Research ReactJS - Spring Boot

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:
a. 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
5.4.1. Khái niệm
Đố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ố

12


Final Report - Project 1

Research ReactJS - Spring Boot

loại middleware có thể giải quyết bài tốn 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ì hỗ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.

13


Final Report - Project 1

Research ReactJS - Spring Boot

III. SPRING BOOT
1. Giới thiệu chung:
Spring Boot là một module của Spring Framework, cung cấp tính
năng RAD (Rapid Application Development - Phát triển ứng dụng nhanh).
Spring Boot ra đời nhằm rút ngắn thời gian cài đặt và cấu hình Spring
MVC Project. 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.
Spring Boot dễ dàng trong việc tích hợp với các hệ sinh thái của
Spring như: Spring JDBC, Spring ORM, Spring Security,...

2. Ưu điểm của Spring Boot:
Spring Boot hỗ trợ nhúng trực tiếp các file Server như Tomcat, Jetty
hoặc Undertow (Do đó, khi sử dụng Spring Boot khơng cần phải deploy ra
file war). Điều này hỗ trợ cho lập trình viên rất nhiều trong việc phát triển
ứng dụng nhanh và đặc biệt là tiết kiệm được rất nhiều thời gian trong việc
deploy ứng dụng Spring.
Khác với Spring Framework đơn thuần, Spring Boot hỗ trợ việc tự
động cấu hình Spring khi cần thiết. Và đặc biệt Spring Boot không sinh ra
code cấu hình và cũng khơng cần cấu hình bằng XML. Những việc cấu
hình thường rất tốn thời gian trong việc phát triển một ứng dụng. Với tiêu
chí phát triển một ứng dụng nhanh, Spring Boot đã giúp cho người dùng
giảm thiểu lượng thời gian đáng kể cho việc cấu hình.
Spring Boot cịn được biết đến là chuẩn cho Microservices (Cloud
support, giảm việc setup, config các thư viện hỗ trợ). Do đó, việc triển khai
Microservices trên các ứng dụng Spring Boot là rất dễ dàng.

14


Final Report - Project 1

Research ReactJS - Spring Boot

3. Một số thư viện được sử dụng phổ biến với Spring Boot:
3.1. Hibernate:
3.1.1. Khái niệm:

● ORM là gì ? ORM là viết tắt của
object-relational-mapping, công nghệ cho phép chuyển
đổi từ các object trong ngôn ngữ hướng đối tượng sang
database quan hệ và ngược lại.
● Hibernate là một ORM framework mã nguồn mở giúp các
lập trình viên viết các ứng dụng Java có thể tham chiếu
các đối tượng (entity) với bảng (table) trong hệ quản trị
cơ sở dữ liệu.
● Hibernate giúp thực hiện giao tiếp giữa tầng ứng dụng
với tầng dữ liệu (kết nối, truy xuất, lưu trữ,...)

3.1.2. Ưu điểm:
● Hibernate giúp cải thiện rất nhiều vấn đề khi sử dụng
JDBC:
○ Hạn chế lặp đi lặp lại những dòng code giống nhau
trong ứng dụng chỉ để lấy dữ liệu từ database.
○ Giúp các lập trình viên đỡ phải vất vả với việc map
giữa Object Java với các table tương ứng trong
database.
○ Giúp giảm thiểu công sức khi thay đổi từ hệ quản trị
cơ sở dữ liệu này sang hệ quản trị cơ sở dữ liệu
khác (Hibernate viết một lần chạy mọi loại cơ sở dữ
liệu).

3.2. Spring Data JPA:
● JPA (Java Persistence API) là một module nhỏ của Spring
Data.
● JPA được tạo ra với mục đích giảm thiểu các đoạn code lặp đi
lặp lại nhiều lần khi tương tác với cơ sở dữ liệu.
● JPA chỉ là một API định nghĩa các đặc tả cần thiết và khơng có

code hiện thực từ những đặc tả đó.
15


Final Report - Project 1

Research ReactJS - Spring Boot

● Cần phải có một cài đặt ORM để hoạt động. Các ORM
framework có thể sử dụng cho JPA như: Hibernate, iBatis,
Eclipse Link, OpenJPA,... Trong đồ án 1, chúng em tìm hiểu và
sử dụng Hibernate là ORM framework cho đồ án.
● Có thể hiểu nôm na JPA là một interface và Hibernate chính là
người hiện thực cái interface đó.

3.3. Spring Security:
● Là một framework của Spring được cung cấp để xử lý các vấn
đề liên quan đến bảo mật.
● Spring Security cung cấp 2 cơ chế cơ bản:
○ Authentication (Xác thực): Là tiến trình xác thực (kiểm
tra) danh tính của một người dùng hoặc một hệ thống
khác đang truy cập vào hệ thống hiện tại.
○ Authorization (Phân quyền): Là tiến trình quyết định xem
người dùng hoặc hệ thống sau khi xác thực có được
quyền thực hiện một hành động nào đó trong ứng dụng
hay khơng.

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. Jjwt:
●

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 toà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.

16


Final Report - Project 1

Research ReactJS - Spring Boot

3.6. Swagger:
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.
● Swagger UI đượ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 Spring Boot:

Trong đồ án 1, 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 Spring Boot 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 Spring Boot 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 Spring Boot sau
này.
Hình ảnh Codebase (chụp từ ứng dụng):

Mơ tả Codebase:

17


Final Report - Project 1

Research ReactJS - Spring Boot

● com.techshopbe: chứa file SpringBootApplication để
chạy ứng dụng Spring Boot (có thể hiểu
SpringBootApplication là file main dùng để khởi chạy
chương trình).
● com.techshopbe.config: chứa các class dùng để Config
hệ thống (VD: CorsConfig,..) hoặc Config những thư viện,
framework sử dụng (VD: SwaggerConfig,..).
● com.techshopbe.controller: chức các class Controller (
ở đây là các RestController trong Spring Boot), các
Controller giúp điều hướng và mapping các request đến
server.
● com.techshopbe.dto: chứa các class được định nghĩa là

dto (data transfer object). (Vd: AuthenticationDTO là một
data transfer object chứa những thông tin nhỏ của user
dùng để xác thực đăng nhập,...).
● com.techshopbe.entity: chứa các class là entity của dự
án, các entity có khả năng mapping với các table dưới cơ
sở dữ liệu (sử dụng ORM framework).
● com.techshopbe.repository: chứa các repository của
dự án, các repository này được kế thừa từ JPARepository
(được cung cấp bởi Spring JPA).
● com.techshopbe.security: chứa các class dùng để
secure hệ thống, các class có tính năng bảo mật như xác
thực và phân quyền và các cấu hình security cho ứng
dụng.
● com.techshopbe.service: chứa các Service Interface
của ứng dụng, các Service Interface này sinh ra giúp cho
việc định nghĩa và liệt kê các phương thức trở nên linh
hoạt hơn. Giúp cho dự án dễ bảo trì và nâng cấp về sau.
● com.techshopbe.service.impl: chứa các class Service,
các class Service này sẽ implements những Service
Interface và định nghĩa những phương thức của Service
Interface đó.
● File pom.xml: file này chứa các thông tin cần thiết định
nghĩa một dự án, phiên bản, nhóm phát triển, các thư
18


Final Report - Project 1

Research ReactJS - Spring Boot

viện hoặc plugins được sử dụng. Để sử dụng một thư
viện - plugins bất kỳ trong dự án Spring Boot chỉ cần khai
báo dependency với pom.xml.

19