Xây dựng ứng dụng quản lý gia đình hafaly

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1
XÂY DỰNG ỨNG DỤNG
QUẢN LÝ GIA ĐÌNH
Giảng viên hướng dẫn :

TS. Đỗ Thị Thanh Tuyền

Sinh viên thực hiện 1 :

Nguyễn Đức Long - 20521566

Sinh viên thực hiện 2 :

Lê Ngọc Minh - 20521600

TP. HỒ CHÍ MINH, tháng 7 năm 2023


LỜI CẢM ƠN
Sự phát triển như vũ bão của công nghệ tông tin (CNTT) đã tác động mạnh mẽ
và to lớn đến mọi mặt đời sống kinh tế xã hội. Ngày nay, CNTT đã trở thành một
trong những động lực quan trọng nhất của sự phát triển. Với khả năng số hóa mọi
loại thơng tin, máy tính trở thành phương tiện xử lý thông tin thống nhất và đa năng,
thực hiện được nhiều chức năng khác nhau trên mọi dạng thông tin thuộc mọi lĩnh
vực như: nghiên cứu, quản lý, kinh doanh, giáo dục, ...
Những ứng dụng của CNTT trong lĩnh vực quản lý là những ứng dụng vô cùng

quan trọng. Nó khơng những giải phóng cơng sức cho những người quản lý mà cịn
đem lại sự chính xác và nhanh nhạy trong quản lý.
Là sinh viên CNTT, trong đồ án 1 này, nhóm chúng em đã chọn và thực hiện đồ
án “XÂY DỰNG ỨNG DỤNG QUẢN LÝ GIA ĐÌNH”.
Nhóm xin gửi lời cảm ơn chân thành đến Cô Đỗ Thị Thanh Tuyền đã tận tình
giảng dạy, hướng dẫn chúng em trong suốt thời gian học vừa qua và các bạn học đã
góp ý và giúp đỡ nhóm trong quá trình thực hiện đồ án này.
Do kiến thức và thời gian thực hiện hạn chế, đồ án của nhóm vẫn cịn nhiều thiếu
sót. Nhóm rất mong nhận được góp ý của Cơ và các bạn để đồ án của nhóm được
hồn thiện.
Nhóm sinh viên thực hiện

NGUYỄN ĐỨC LONG – LÊ NGỌC MINH

2


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

Tp.HCM, ngày … tháng 07 năm 2023
GVHD

TS. Đỗ Thị Thanh Tuyền

3


MỤC LỤC
Nội dung
CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI

10

1.1

Tên đề tài:

10

1.2

Mô tả đề tài:

10

1.3

Lý do chọn đề tài:

10

1.4

Các chức năng chính của đề tài:

10

1.5

Đối tượng sử dụng

12

1.6

Công nghệ sử dụng

12

1.7

Môi trường lập trình:

12

1.8

Cơng cụ hỗ trợ (nếu có):

12

2 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

14

2.1

14

React

2.1.1

React là gì.....................................................................................14

2.1.2

Lịch sử React................................................................................14

2.1.3

Kiến trúc React.............................................................................16

2.1.4

Ưu điểm React..............................................................................18

2.1.5

Nhược điểm React........................................................................19

2.2

SpringBoot

20

2.2.1

Giới thiệu Spring Boot..................................................................20

2.2.2

Kiến trúc Spring Boot...................................................................21

2.2.3

Ưu điểm Spring Boot....................................................................23

2.2.4

Nhược điểm Spring Boot..............................................................24

2.3

PostgresSQL

25
4


2.3.1

Giới thiệu PostgresSQL................................................................25

2.3.2

Tại sao lại là PostgresSQL............................................................26

2.3.3

Nhược điểm PostgresSQL............................................................27

2.3.4

Lưu ý khi sử dụng PostgresSQL...................................................27

3 CHƯƠNG 3: KHẢO SÁT VÀ XÁC ĐỊNH YÊU CẦU

29

3.1

29

Khảo sát và xác định yêu cầu:

3.1.1

Phương pháp khảo sát...................................................................29

3.1.2

Câu hỏi khảo sát............................................................................29

3.1.3

Kết quả khảo sát............................................................................30

3.2

Phân tích yêu cầu

31

3.2.1

Sơ đồ Use case..............................................................................31

3.2.2

Đặc tả Use case.............................................................................32

3.3

Thiết kế cơ sở dữ liệu

45

3.3.1

Khảo sát hiện trạng.......................................................................45

3.3.2

Mô tả tân từ...................................................................................45

3.3.3

Sơ đồ cơ sở dữ liệu.......................................................................47

3.3.4

Danh sách các thực thể.................................................................47

3.3.5

Mô tả chi tiết các thực thể.............................................................48

3.4

Thiết kế kiến trúc

54

3.4.1.

Ứng dụng kiến trúc 3 lớp..............................................................54

3.4.2

Mục đích lựa chọn........................................................................57

4 CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG

Error! Bookmark not defined.

4.1

Sơ đồ màn hình

58

4.2

Danh sách màn hình

58

5


4.3

Mơ tả các màn hình

59

4.3.1

Màn hình trang chủ.......................................................................59

4.3.2

Màn hình đăng nhập đăng ký........................................................61

4.3.3

Màn hình cài đặt...........................................................................64

4.3.4

Màn hình quản lý cơng việc..........................................................65

4.3.5

Màn hình quản lý kế hoạch bữa ăn...............................................67

4.3.6

Màn hình quản lý ghi chú.............................................................72

4.3.7

Màn hình quản lý lịch trình...........................................................73

4.3.8

Màn hình các món ăn....................................................................76

4.3.9

Màn hình quản lý liên hệ..............................................................77

5 CHƯƠNG 5: KẾT LUẬN

78

5.1

Ưu điểm đồ án

78

5.2

Nhược điểm đồ án

78

5.3

Hướng phát triển

78

TÀI LIỆU THAM KHẢO

80

6


MỤC LỤC HÌNH ẢNH
Hình 4.1 Sơ đồ màn hình

58

Hình 4.2 Màn hình trang chủ chính của Website

60

Hình 4.3 Màn hình đăng ký

61

Hình 4.4 Màn hình đăng nhập

63

Hình 4.5 Màn hình cài đặt

64

Hình 4.6 Màn hình quản lý cơng việc

65

Hình 4.7 Màn hình thêm cơng việc

66

Hình 4.8 Màn hình quản lý bữa ăn

67

Hình 4.9 Màn hình thêm kế hoạch bữa ăn

68

Hình 4.10 Màn hình edit sự kiện

70

Hình 4.11 Màn hình quản lý ghi chú

72

Hình 4.12 Màn hình quản lý lịch trình

73

Hình 4.13 Màn hình thao tác với quản lý lịch trình

73

Hình 4.14 Màn hình thêm lịch trình

75

Hình 4.15 Màn hình quản lý món ăn

76

Hình 4.16 Màn hình quản lý liên hệ

77

7

DANH MỤC BẢNG
Bảng 3.1 RequestsUC

32

Bảng 3.2 Join family UC

33

Bảng 3.3 Update Info UC

34

Bảng 3.4 Manage task UC

35

Bảng 3.5 Manage schedule UC

36

Bảng 3.6 Manage contact UC

37

Bảng 3.7 Manage mealplan UC

38

Bảng 3.8 Manage meber UC

39

Bảng 3.9 Assign task UC

41

Bảng 3.10 Check Order Meal UC

42

Bảng 3.11 Add Meal Favorite UC

43

Bảng 3.12 Danh sách các thực thể

47

Bảng 3.13 Requests

48

Bảng 3.14 FamiliMembers

48

Bảng 3.15 Families

49

Bảng 3.16 Events

49

Bảng 3.17 Tasks

50

Bảng 3.18 Notes

51

Bảng 3.19 Contacts

51

Bảng 3.20 MealPlans

52

Bảng 3.21 Foods

52

Bảng 3.22 Recipes

53

Bảng 3.23 Ingredients

53

Bảng 3.24 MealPlan Recipes

53

Bảng 3.25 Task Assignments

54

Bảng 3.26 ParticipateEvents

54

Bảng 4.1 Danh sách màn hình

Error! Bookmark not defined.

Bảng 4.2 Chú thích màn hình trang chủ

61

Bảng 4.3 Chú thích màn hình đăng ký

62
8

Bảng 4.4 Chú thích màn hình đăng nhập

63

Bảng 4.5 Chú thích màn hình cài đặt

64

Bảng 4.6 Chú thích màn hình quản lý cơng việc

66

Bảng 4.7 Chú thích màn hình quản lý kế hoạch bữa ăn

67

Bảng 4.8 Chú thích màn hình thêm ký hoạch bữa ăn

68

Bảng 4.9 Chú thích màn hình chỉnh sửa sự kiện

70

Bảng 4.10 Chú thích màn hình quản lý ghi chú

72

Bảng 4.11 Chú thích màn hình quản lý lịch trình

73

Bảng 4.12 Chú thích màn hình thêm lịch trình

75

Bảng 4.13 Chú thích màn hình quản lý liên hệ

77

9


CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
1.1 Tên đề tài:
XÂY DỰNG ỨNG DỤNG QUẢN LÝ GIA ĐÌNH HAFALY
1.2 Lý do chọn đề tài:
- Tối ưu thời gian: Việc quản lý gia đình bao gồm nhiều nhiệm vụ khác nhau
như quản lý tài chính, lịch trình, mua sắm, v.v. Sử dụng một ứng dụng quản
lý gia đình giúp tối ưu thời gian và năng suất của người dùng bằng cách giảm
thiểu thời gian phân tán trong việc quản lý và sắp xếp các công việc.
-

Sự tiện lợi: Với sự phát triển của cơng nghệ, việc quản lý gia đình bằng cách
ghi chép trên giấy tờ đã trở nên khó khăn và bất tiện hơn. Sử dụng một ứng
dụng quản lý gia đình trên website giúp việc quản lý trở nên dễ dàng hơn và
tiện lợi hơn.

-

Tránh xung đột: Việc quản lý gia đình là một nhiệm vụ phức tạp và dễ xảy ra
những xung đột trong gia đình. Sử dụng ứng dụng quản lý gia đình giúp các
thành viên trong gia đình có thể cập nhật thơng tin về các kế hoạch, lịch
trình, chi tiêu, v.v., tránh xung đột xảy ra.

-

Kiểm sốt chi tiêu: Quản lý tài chính là một phần quan trọng trong việc quản
lý gia đình. Sử dụng ứng dụng quản lý gia đình giúp người dùng có thể kiểm
sốt chi tiêu của gia đình một cách nhanh chóng và chính xác hơn.

-

Sự an tồn: Sử dụng ứng dụng quản lý gia đình giúp bảo vệ thơng tin gia
đình của người dùng. Thông tin được lưu trữ trên một máy chủ an tồn và có
tính bảo mật cao, đảm bảo an tồn cho người dùng.

-

Vì vậy, việc chọn đề tài xây dựng ứng dụng website quản lý gia đình là một
lựa chọn hợp lý và tiềm năng để giải quyết các vấn đề quản lý gia đình một
cách hiệu quả và thuận tiện hơn

1.3 Mô tả đề tài:
- Đề tài quản lý gia đình được chọn vì nó giải quyết được nhu cầu cần thiết
của người dùng trong việc tổ chức và quản lý các hoạt động trong gia đình,
từ việc quản lý chi tiêu, lịch trình, cho đến việc phân công công việc và cập
nhật thông tin cá nhân của các thành viên trong gia đình.

10

-

Ứng dụng này phù hợp với người dùng hiện nay vì trong cuộc sống hiện đại,
việc quản lý và tổ chức các hoạt động trong gia đình trở nên ngày càng phức
tạp, đặc biệt là khi các thành viên trong gia đình đều có các lịch trình và cơng
việc riêng. Việc sử dụng ứng dụng quản lý gia đình sẽ giúp người dùng tiết
kiệm thời gian và nâng cao hiệu quả cơng việc trong gia đình.

1.4 Các chức năng chính của đề tài:
- Quản lý tài chính: Ứng dụng cung cấp chức năng quản lý tài chính cho người
dùng, giúp theo dõi các chi tiêu, thu nhập, tiền mặt và các tài khoản ngân
hàng của gia đình. o Lịch trình: Ứng dụng cho phép người dùng lên kế hoạch
và quản lý lịch trình của gia đình, từ các cuộc họp, sự kiện cho đến các kỳ
nghỉ, chuyến đi, v.v.
-

Quản lý mua sắm: Chức năng quản lý mua sắm giúp người dùng theo dõi
danh sách các mặt hàng cần mua, lịch sử mua sắm và các đơn đặt hàng, từ đó
giúp người dùng tiết kiệm thời gian và tiền bạc khi mua sắm.

-

Ghi chú và nhắc nhở: Ứng dụng cung cấp chức năng ghi chú và nhắc nhở để
giúp người dùng ghi nhớ và thực hiện các công việc quan trọng trong gia
đình.

-

Quản lý danh bạ liên lạc: Chức năng quản lý danh bạ giúp người dùng lưu
trữ và quản lý các thông tin liên lạc của các thành viên trong gia đình, từ đó
giúp cho việc giao tiếp và trao đổi thông tin giữa các thành viên được thuận
tiện hơn.

-

Chia sẻ thông tin: Chức năng cho phép người dùng chia sẻ thơng tin và lịch
trình với các thành viên khác trong gia đình, giúp tăng cường sự liên kết và
giao tiếp giữa các thành viên.

-

Thống kê báo cáo: Ứng dụng cung cấp chức năng thống kê và báo cáo để
người dùng có thể xem tổng quan về các hoạt động trong gia đình, từ đó giúp
cho việc quản lý và ra quyết định được hiệu quả hơn.

-

Tính năng bảo mật: Ứng dụng sử dụng các tính năng bảo mật để đảm bảo
thơng tin cá nhân và dữ liệu gia đình được bảo vệ an toàn.

1.5 Đối tượng sử dụng
11


-

Các gia đình có nhiều thành viên: Khi số lượng thành viên trong gia đình
nhiều, việc quản lý và tổ chức các hoạt động sẽ trở nên phức tạp hơn.

Ứng dụng này có thể giúp họ tăng cường sự liên kết và giao tiếp, đồng
thời giúp quản lý tài chính và các cơng việc trong gia đình một cách hiệu
quả hơn.

-

Các bố mẹ có con nhỏ: Đối với các bố mẹ có con nhỏ, việc quản lý cơng
việc trong gia đình như chăm sóc trẻ, nấu ăn, giặt giũ, v.v. có thể rất phức
tạp. Ứng dụng này có thể giúp họ tổ chức và quản lý các công việc này
một cách dễ dàng và hiệu quả hơn.

-

Những người bận rộn: Nếu bạn là một người bận rộn với công việc hoặc
các hoạt động khác, việc quản lý và tổ chức các hoạt động trong gia đình
có thể trở nên khó khăn. Ứng dụng này có thể giúp bạn quản lý thời gian
và tổ chức cơng việc trong gia đình một cách hiệu quả hơn.

-

Các sinh viên xa nhà: Với các sinh viên sống xa nhà, việc quản lý tài
chính và các chi tiêu cần thiết có thể trở nên khó khăn. Ứng dụng này có
thể giúp họ quản lý tài chính và theo dõi các chi tiêu một cách dễ dàng
hơn.

1.6 Công nghệ sử dụng
- Frontend: ReactJS
-

Backend: SpringBoot

-

Database: PostgreSql

1.7 Môi trường lập trình:
- Visual Studio Code
-

IntelliJ IDEA

1.8 Cơng cụ hỗ trợ (nếu có):
- Figma: Thiết kế giao diện
-

Notion: Ghi chú thông tin

12


2 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
2.1 React
2.1.1
React là gì
React (hay còn được gọi là React.js hoặc ReactJS) là một thư viện JavaScript
front-end mã nguồn mở và miễn phí để xây dựng giao diện người dùng dựa trên các
thành phần UI riêng lẻ. Nó được phát triển và duy trì bởi Meta (trước đây là
Facebook) và cộng đồng các nhà phát triển và cơng ty cá nhân. React có thể được
sử dụng làm cơ sở để phát triển các ứng dụng SPA (Single-page), thiết bị di động
hoặc ứng dụng được kết xuất bằng máy chủ với các thư viện khác như Next.js. Tuy

nhiên, React chỉ hướng tới việc quản lý trạng thái và hiển thị trạng thái đó cho
DOM, vì vậy việc tạo ứng dụng bằng React thường yêu cầu sử dụng thêm các thư
viện bổ sung để thực hiện định tuyến trang, cũng như thêm một số chức năng ở phía
máy khách.
2.1.2
Lịch sử React
ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook.
Nó ra mắt lần đầu vào năm 2013 và đã nhanh chóng trở thành một trong những
công nghệ phát triển ứng dụng web phổ biến nhất trên thế giới. Dưới đây là một cái
nhìn tổng quan về lịch sử của ReactJS:
● Năm 2011: Jordan Walke, một nhân viên của Facebook, phát triển ReactJS
ban đầu để giúp cải thiện hiệu suất của Facebook Ads Manager. ReactJS
được sử dụng nội bộ trong Facebook và được gọi là "React".
● Năm 2013: Facebook công bố ReactJS cho cộng đồng phát triển. Phiên bản
đầu tiên được công bố là ReactJS 0.3, và sau đó, các phiên bản tiếp theo
được phát triển và công bố liên tục.
● Năm 2015: ReactJS được Facebook giới thiệu cùng với khái niệm "React
Native", một framework để phát triển ứng dụng di động sử dụng ReactJS.
React Native cho phép các nhà phát triển sử dụng ReactJS để xây dựng ứng
dụng di động đa nền tảng.

13


● Năm 2016: ReactJS trở thành mã nguồn mở hoàn toàn khi Facebook chuyển
giao dự án cho tổ chức mã nguồn mở chung là "Facebook Open Source".
Điều này tạo điều kiện thuận lợi cho cộng đồng phát triển đóng góp vào việc
cải thiện ReactJS và tạo ra các thư viện hỗ trợ phát triển mở rộng.
● Năm 2017: ReactJS 16 được ra mắt với một số tính năng quan trọng, bao
gồm hỗ trợ cho React Fiber (một kiến trúc nâng cao giúp cải thiện hiệu suất)

và React Portal (cho phép phát triển đưa các phần tử React vào nút DOM bên
ngoài).
● Từ năm 2018 đến nay: ReactJS tiếp tục phát triển với các phiên bản mới, cải
tiến hiệu suất và tính năng. Cộng đồng React đã tạo ra nhiều thư viện và
cơng cụ phát triển hữu ích như Redux, React Router, Next.js, Create React
App và nhiều hơn nữa.

Hình 2.1 Lịch sử React

14


2.1.3
Kiến trúc React
ReactJS là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện
người dùng (UI) tương tác trong các ứng dụng web. Dưới đây là một số khái niệm
và thành phần chính trong kiến trúc của ReactJS:
● Components (Các thành phần): ReactJS sử dụng kiến trúc dựa trên thành
phần. Các thành phần là những khối xây dựng độc lập và có thể tái sử dụng
trong một ứng dụng React. Có hai loại thành phần chính trong React: Thành
phần lớp (Class Components) và Thành phần hàm (Function Components).
Thành phần lớp là các lớp JavaScript được viết theo cú pháp của ES6 và kế
thừa từ lớp cơ sở React.Component. Thành phần hàm là các hàm JavaScript
thông thường.
● Virtual DOM (DOM ảo) là một phiên bản nhẹ của DOM thực tế (Document
Object Model) được React duy trì trong bộ nhớ. Nó là một biểu diễn của giao
diện người dùng được lưu trữ trong bộ nhớ. Khi có sự thay đổi trong trạng
thái của một thành phần, React cập nhật Virtual DOM và thực hiện thuật
toán diffing để xác định số lượng thay đổi tối thiểu cần thiết để cập nhật
DOM thực tế. Phương pháp này cải thiện hiệu suất bằng cách giảm thiểu việc

tương tác trực tiếp với DOM thực tế.
● JSX (JavaScript XML là một phần mở rộng cú pháp cho JavaScript, cho
phép bạn viết mã HTML tương tự trong JavaScript. JSX cho phép kết hợp
cấu trúc HTML và logic JavaScript trong một tệp tin đơn. JSX được biên
dịch thành mã JavaScript thông qua các công cụ như Babel, giúp tương thích
với trình duyệt.
● State (Trạng thái): State đại diện cho dữ liệu hiện tại hoặc trạng thái của một
thành phần. Nó là dữ liệu có thể thay đổi theo thời gian. React cung cấp một
đối tượng state để quản lý trạng thái của các thành phần. Khi trạng thái thay

15


đổi, React tự động cập nhật và render lại các phần tử giao diện người dùng
tương ứng.
● Lifecycle Methods (Phương thức vịng đời): Các thành phần React có một
số phương thức vòng đời, cung cấp các điểm kết nối vào các giai đoạn khác
nhau của vòng đời của một thành phần. Một số phương thức vòng đời phổ
biến bao gồm componentDidMount (được gọi sau khi thành phần đã được
render lần đầu tiên), componentDidUpdate (được gọi sau khi thành phần đã
được cập nhật), và componentWillUnmount (được gọi trước khi thành phần
bị gỡ bỏ khỏi DOM). Các phương thức vòng đời này cho phép thực thi mã để
thực hiện các hoạt động như lấy dữ liệu, đăng ký sự kiện, hoặc giải phóng tài
ngun.
● Props (Thuộc tính): Props là các thuộc tính chỉ đọc được truyền từ thành
phần cha đến các thành phần con. Props cho phép dữ liệu chảy từ thành phần
cha xuống các thành phần con. Props giúp tạo ra các thành phần có thể tái sử
dụng và modul hóa, vì chúng cho phép tùy chỉnh hành vi và dữ liệu của các
thành phần.
● Data Flow (Luồng dữ liệu): Trong React, dữ liệu chảy theo hướng một

chiều, thường được gọi là "one-way data binding" hoặc "uni-directional data
flow". Dữ liệu thường chảy từ thành phần cha xuống các thành phần con
thông qua props. Để thay đổi dữ liệu, các thành phần con có thể gọi các
callback được cung cấp bởi thành phần cha. Phương pháp này giúp duy trì
một trạng thái ứng dụng dễ dàng hiểu và giảm khả năng xảy ra xung đột dữ
liệu.
● Styling: React cho phép viết CSS cho các thành phần bằng cách sử dụng các
tệp tin CSS truyền thống hoặc sử dụng inline styles bằng cách sử dụng các
đối tượng JavaScript. Ngồi ra, có các thư viện phổ biến như styled-

16


components và các giải pháp CSS-in-JS khác cung cấp các tùy chọn tạo kiểu
tiên tiến hơn..

Hình 2.2 Kiến trúc ReactJs
2.1.4

Ưu điểm React

● Thư viện JavaScript mạnh mẽ: ReactJS là một thư viện JavaScript mạnh mẽ
và phổ biến. Nó được phát triển bởi Facebook và được cộng đồng lập trình
viên rộng lớn hỗ trợ. ReactJS cung cấp nhiều tính năng và công cụ giúp xây
dựng giao diện người dùng tương tác phức tạp một cách dễ dàng và hiệu quả.
● Virtual DOM và hiệu suất cao: ReactJS sử dụng Virtual DOM, một biến thể
nhẹ của DOM, để tối ưu hóa việc cập nhật giao diện người dùng. Khi có sự
thay đổi trong trạng thái của một thành phần, React sẽ cập nhật Virtual DOM
và áp dụng thuật toán diffing để chỉ cập nhật những phần tử thay đổi trong
DOM thực tế. Điều này giúp cải thiện hiệu suất và tăng tốc độ render của

ứng dụng.
● Khả năng tái sử dụng cao: ReactJS khuyến khích việc xây dựng các thành
phần có thể tái sử dụng. Các thành phần có thể được sử dụng lại trong các

17


phần của ứng dụng khác nhau, giúp tăng tính modul hóa và giảm sự lặp lại
của mã. Điều này giúp cải thiện năng suất phát triển và bảo trì mã nguồn.
● JSX - Kết hợp mã HTML và JavaScript: ReactJS sử dụng JSX, một phần mở
rộng cú pháp cho JavaScript, cho phép kết hợp mã HTML và JavaScript
trong cùng một tệp tin. JSX giúp việc viết mã giao diện trở nên dễ hiểu và dễ
đọc hơn. Nó cung cấp một cách tiện lợi để định nghĩa các thành phần UI và
tạo ra cú pháp gần gũi với HTML.
● Hỗ trợ rộng rãi và cộng đồng phát triển mạnh mẽ: ReactJS có một cộng đồng
lập trình viên rộng lớn và tích cực. Cộng đồng này cung cấp nhiều tài liệu, ví
dụ và thư viện bổ sung cho ReactJS. Ngồi ra, có nhiều công cụ hỗ trợ và
framework xây dựng trên nền React như Next.js, Redux, và React Router,
giúp mở rộng khả năng phát triển và triển khai ứng dụng React.
● Thân thiện với SEO: Mặc dù ứng dụng ReactJS là một ứng dụng đơn trang
(Single Page Application - SPA), nhưng React cung cấp các công cụ và cách
tiếp cận để tối ưu hóa SEO. Các trang React có thể được render trước và gửi
đến trình duyệt với nội dung được tối ưu cho các cơng cụ tìm kiếm, giúp cải
thiện khả năng tìm thấy và xếp hạng trên các cơng cụ tìm kiếm.
2.1.5

Nhược điểm React

● Khả năng học tập ban đầu: Với những người mới bắt đầu hoặc người không
quen với cú pháp JSX và khái niệm về kiến trúc component-based, việc học

và hiểu ReactJS ban đầu có thể tốn nhiều thời gian và đòi hỏi sự quen thuộc
với các khái niệm mới.
● Mức độ phức tạp: Mặc dù ReactJS cung cấp một cách tiếp cận mạnh mẽ cho
việc xây dựng giao diện người dùng, nhưng nó có thể trở nên phức tạp đối
với các ứng dụng lớn và phức tạp. Quản lý trạng thái, tương tác giữa các

18


thành phần và điều phối dữ liệu có thể trở thành thách thức đối với các dự án
phức tạp.
● Học công nghệ liên quan: Để sử dụng ReactJS một cách hiệu quả, thường
cần học thêm các công nghệ khác như JSX, Babel, Webpack và các thư viện
quản lý trạng thái như Redux hoặc MobX. Điều này đòi hỏi sự đầu tư thêm
thời gian và công sức để nắm vững và sử dụng tốt các cơng nghệ kết hợp.

● Tương thích ngược với các phiên bản cũ: Với việc ReactJS thường có các
phiên bản mới và phát triển nhanh chóng, các phiên bản cũ có thể khơng
tương thích ngược hồn tồn với nhau. Điều này có thể gây ra sự bất tiện cho
việc nâng cấp và bảo trì các ứng dụng ReactJS đã tồn tại.
● Tài nguyên và kích thước ứng dụng: Một ứng dụng ReactJS có thể có kích
thước lớn do việc sử dụng thư viện và công cụ bổ sung. Điều này có thể ảnh
hưởng đến tốc độ tải trang ban đầu và tăng dung lượng tải về cho người
dùng.
● Không hỗ trợ đầy đủ cho ứng dụng di động: Mặc dù React Native là một dự
án phát triển ứng dụng di động dựa trên ReactJS, nhưng ReactJS chính thức
tập trung vào phát triển ứng dụng web. Việc xây dựng ứng dụng di động đa
nền tảng có thể địi hỏi sử dụng các công nghệ khác như React Native hoặc
Flutter.
2.2 SpringBoot

2.2.1
Giới thiệu Spring Boot
Spring Boot là một framework phát triển ứng dụng Java dựa trên Spring
Framework. Nó được thiết kế để giúp đơn giản hóa việc xây dựng các ứng dụng
Java độc lập và dễ dàng triển khai. Spring Boot giúp giảm bớt sự phức tạp và công
việc cấu hình trong quá trình phát triển ứng dụng, tạo điều kiện thuận lợi cho các

19


nhà phát triển tập trung vào việc triển khai chức năng của ứng dụng thay vì quản lý
các cấu hình phức tạp.
Dưới đây là một số điểm nổi bật và đặc điểm chính của Spring Boot:
● Quản lý cấu hình tự động: Spring Boot cung cấp khả năng quản lý cấu hình tự
động một cách thơng minh. Nó sử dụng các quy ước mặc định để cấu hình
ứng dụng, giảm bớt cơng việc cấu hình thủ cơng. Spring Boot cũng hỗ trợ
nhiều nguồn cấu hình khác nhau như file properties, YAML, environment
variables, và cấu hình trên máy chủ.

● Tích hợp dễ dàng: Spring Boot tích hợp tốt với các cơng nghệ và thư viện phổ
biến trong cộng đồng Java. Nó hỗ trợ tích hợp với Spring Framework, JDBC,
JPA, Thymeleaf, Hibernate, RESTful Web Services, Security, và nhiều thư
viện khác. Điều này giúp nhà phát triển dễ dàng xây dựng các ứng dụng phức
tạp và hiệu quả.
● Cung cấp Embedded Server: Spring Boot đi kèm với một máy chủ web nhúng
(embedded server) như Tomcat, Jetty hoặc Undertow. Điều này cho phép
triển khai và chạy ứng dụng một cách đơn giản chỉ với một tệp JAR hoặc
WAR. Không cần cài đặt và cấu hình máy chủ riêng biệt, việc triển khai ứng
dụng trở nên đơn giản và tiện lợi.
● Hỗ trợ Spring Ecosystem: Spring Boot được tích hợp một cách tốt với Spring

Ecosystem, bao gồm Spring Data, Spring Security, Spring Cloud, và Spring
Integration. Điều này cho phép nhà phát triển sử dụng các công nghệ mạnh
mẽ này để xây dựng các ứng dụng phức tạp và phân tán.
● Hiệu suất và quản lý lỗi: Spring Boot cung cấp các cơng cụ và tính năng để
quản lý hiệu suất ứng dụng và xử lý lỗi một cách hiệu quả. Nó hỗ trợ điều
chỉnh và giám sát hiệu suất ứng dụng, quản lý các lỗi và ngoại lệ, và cung cấp
các công cụ hỗ trợ gỡ lỗi và theo dõi.
20