Đồ án 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 HAFALY
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

2.2

2.3

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

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

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

3.2

3.3

3.4

Khảo sát và xác định yêu cầu: ..............................................................29
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

Phân tích yêu cầu ..................................................................................31
3.2.1

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

3.2.2

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

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

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

8


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

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

10


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

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

11


-

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 tồn.

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

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

12


-

Notion: Ghi chú thông tin

13


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.

14


• 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
ngồ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

15


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
đổ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.

16


• 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. Ngoài ra, có các thư viện phổ biến như styledcomponents 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..

17


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


đọ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
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.

19


• 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 q trình phát triển ứng dụng, tạo điều kiện thuận lợi cho các
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ủ.

20


• 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.
• Cộng đồng phát triển mạnh mẽ: Spring Boot có một cộng đồng phát triể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. Ngồi ra, có nhiều cơng cụ hỗ trợ và framework xây dựng trên
nền Spring Boot như Spring Cloud, Spring Batch, và Spring Data, giúp mở
rộng khả năng phát triển và triển khai ứng dụng.
2.2.2 Kiến trúc Spring Boot
Kiến trúc của Spring Boot tn theo mơ hình kiến trúc MVC (Model-ViewController) và sử dụng các thành phần của Spring Framework để xây dựng ứng
dụng. Dưới đây là các thành phần và khái niệm chính trong kiến trúc của Spring
Boot:

21


Model: Model đại diện cho dữ liệu và logic xử lý dữ liệu trong ứng dụng. Spring
Boot hỗ trợ sử dụng các công nghệ như Spring Data để quản lý truy vấn cơ sở dữ

liệu và xử lý dữ liệu.
View: View là giao diện người dùng hiển thị dữ liệu cho người dùng. Spring
Boot hỗ trợ sử dụng các công nghệ như Thymeleaf, FreeMarker, hoặc AngularJS để
xây dựng giao diện người dùng.
Controller: Controller nhận các yêu cầu từ người dùng thông qua giao diện
người dùng và xử lý các yêu cầu đó. Nó tương tác với Model để truy xuất và cung
cấp dữ liệu cho View. Trong Spring Boot, Controller được triển khai bằng cách sử
dụng các annotation như @Controller, @RestController và @RequestMapping để
xác định các endpoint và xử lý các yêu cầu HTTP.
Dependency Injection (DI): Spring Boot sử dụng Dependency Injection để quản
lý và cung cấp các thành phần và phụ thuộc của ứng dụng. DI giúp giảm sự phụ
thuộc giữa các thành phần, tạo ra sự linh hoạt và dễ dàng kiểm thử.
Auto-configuration: Spring Boot cung cấp khả năng tự động cấu hình (autoconfiguration) cho ứng dụng. Điều này cho phép Spring Boot tự động phát hiện các
thành phần có sẵn trong classpath và cấu hình chúng một cách tự động. Ví dụ, khi
bạn thêm thư viện JDBC vào classpath của ứng dụng, Spring Boot sẽ tự động cấu
hình một DataSource để truy cập cơ sở dữ liệu.
Embedded Server: Spring Boot đi kèm với các máy chủ web nhúng như
Tomcat, Jetty hoặc Undertow. Điều này cho phép triển khai ứng dụng một cách đơn
giản chỉ cần chạy ứng dụng như một tệp JAR hoặc WAR mà không cần cài đặt và
cấu hình máy chủ web riêng biệt.
Actuator: Spring Boot Actuator cung cấp các công cụ để quản lý, giám sát và
theo dõi ứng dụng. Nó cung cấp các endpoint để kiểm tra sức khỏe ứng dụng, thu
thập thông tin về các thành phần của ứng dụng và quản lý các hành động như khởi
động lại ứng dụng.

22


Hình 2.3 Kiến trúc Spring framework
2.2.3 Ưu điểm Spring Boot

Dễ sử dụng: Spring Boot giúp đơn giản hóa q trình phát triển ứng dụng Java.
Nó cung cấp một cấu hình mặc định tự động, giảm thiểu cơng việc cấu hình và giúp
bạn tập trung vào việc viết mã logic chức năng chính của ứng dụng.
Tự động cấu hình: Spring Boot sử dụng khả năng tự động cấu hình để cấu hình
ứng dụng dựa trên các quy ước mặc định. Nó tự động phát hiện các thành phần có
sẵn trong classpath và cấu hình chúng một cách tự động, giúp tiết kiệm thời gian và
cơng sức trong việc cấu hình thủ cơng.
Tích hợp tốt: 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, Spring Data,
Spring Security, Hibernate, Thymeleaf và nhiều công nghệ khác, giúp bạn xây dựng
các ứng dụng phức tạp một cách dễ dàng và hiệu quả.

23


Embedded Server: Spring Boot đi kèm với các máy chủ web nhúng như Tomcat,
Jetty hoặc Undertow. Điều này cho phép bạn 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, mà không cần cài đặt và cấu hình máy
chủ web riêng biệt.
Quản lý phụ thuộc: Spring Boot sử dụng Dependency Injection để quản lý và
cung cấp các phụ thuộc của ứng dụng. Điều này giúp giảm sự phụ thuộc giữa các
thành phần, tạo ra sự linh hoạt và dễ dàng kiểm thử trong quá trình phát triển ứng
dụng.
Cộng đồng và tài liệu phong phú: Spring Boot có một cộng đồng phát triển mạnh
mẽ và tích cực. Cộng đồng này cung cấp nhiều tài liệu, ví dụ, và hỗ trợ thơng qua
các diễn đàn, trang web, và khố học trực tuyến. Bạn có thể dễ dàng tìm kiếm thơng
tin và giải đáp các câu hỏi trong quá trình sử dụng Spring Boot.
Hỗ trợ Actuator: Spring Boot Actuator cung cấp các công cụ và endpoints để
quản lý, giám sát và theo dõi ứng dụng. Nó cho phép bạn kiểm tra sức khỏe của ứng
dụng, thu thập thông tin về hiệu suất và lỗi, và quản lý các hành động như khởi

động lại ứng dụng.
2.2.4 Nhược điểm Spring Boot
Tính phức tạp: Mặc dù Spring Boot giúp đơn giản hóa việc phát triển ứng dụng
Java, nhưng nó vẫn có độ phức tạp. Cấu hình và tùy chỉnh một số tính năng cụ thể
có thể gây khó khăn cho những người mới làm quen với Spring Boot.
Hiệu suất: Mặc dù Spring Boot nhanh và hiệu quả, nhưng khi xây dựng các ứng
dụng lớn và phức tạp, hiệu suất có thể trở thành một vấn đề. Cấu hình khơng tốt và
sử dụng sai cách các tính năng của Spring Boot có thể dẫn đến hiệu suất kém.
Dung lượng: Spring Boot cung cấp một số tính năng mạnh mẽ và tiện ích, nhưng
điều này đồng nghĩa với việc nó cũng có dung lượng lớn. Khi triển khai ứng dụng,
kích thước gói jar hoặc war có thể lớn hơn so với các ứng dụng không sử dụng
Spring Boot.

24


Khả năng mở rộng: Mặc dù Spring Boot có nhiều tính năng mạnh mẽ, nhưng
việc mở rộng và tùy chỉnh một số tính năng có thể gặp khó khăn. Điều này đặc biệt
đúng khi bạn cần tuỳ chỉnh một số khía cạnh của Spring Boot để phù hợp với nhu
cầu cụ thể của dự án.
Hạn chế của Java: Spring Boot dựa trên ngơn ngữ lập trình Java, điều này có thể
là một hạn chế đối với những người muốn sử dụng ngơn ngữ lập trình khác. Nếu
bạn muốn sử dụng một ngơn ngữ khác, bạn có thể gặp khó khăn trong việc sử dụng
Spring Boot hoặc phải tìm các phiên bản khơng chính thức của Spring Boot hỗ trợ
ngơn ngữ đó.
2.3 PostgresSQL
2.3.1 Giới thiệu PostgresSQL
PostgreSQL có một lịch sử phát triển dài và hình thành từ dự án POSTGRES tại
Đại học California, Berkeley vào những năm 1980. POSTGRES ban đầu được phát
triển như một nghiên cứu để nghiên cứu các vấn đề trong hệ quản trị cơ sở dữ liệu

quan hệ truyền thống. Điều này đã dẫn đến sự tập trung vào tính năng mở rộng và
khả năng mở rộng của hệ thống.
Năm 1989, POSTGRES được công bố lần đầu tiên, và từ đó, nó đã tiếp tục được
phát triển và mở rộng bởi cộng đồng người dùng và các nhà phát triển. Năm 1996,
phiên bản PostgreSQL đầu tiên chính thức được phát hành, đánh dấu bước đầu tiên
trong việc trở thành một hệ quản trị cơ sở dữ liệu đầy đủ và hồn chỉnh.
Kể từ đó, PostgreSQL đã trải qua nhiều phiên bản và cải tiến đáng kể. Với sự hỗ
trợ từ cộng đồng người dùng rộng lớn và sự cam kết của các nhà phát triển,
PostgreSQL đã ngày càng trở nên phổ biến và được sử dụng rộng rãi trên toàn thế
giới.

25