Đồ án website hỗ trợ cứu trợ động vật (pescue)

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

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

ĐỒ ÁN 1

Website Hỗ Trợ Cứu Trợ Động Vật (Pescue)

Giảng viên hướng dẫn :

Thầy Nguyễn Tấn Toàn

Sinh viên thực hiện 1

:

Lê Hoàng Phúc

Mã sinh viên 1

:

20521761

Sinh viên thực hiện 2

:

Đặng Hồ Anh Quân

Mã sinh viên 2

:

20521785

TP. HỒ CHÍ MINH, 2023


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

………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
Ngày…tháng……năm 2023
Người nhận xét

(Ký tên và ghi rõ họ tên)

LỜI CẢM ƠN

Đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến Thầy Nguyễn Tấn Toàn –
giảng viên bộ môn Đồ Án 1. Thầy đã trực tiếp hướng dẫn, tận tình chia sẻ những
kiến thức, hỗ trợ và đóng góp những ý kiến quý báu để giúp chúng em hoàn thành
thật tốt đồ án và báo cáo của mình.
Trong thời đại cơng nghệ phát triển mạnh mẽ vượt bậc ngày nay, việc cứu trợ
các bé thú cưng nên được phổ biến hơn đến với nhiều người yêu động vật hơn.
Chính nhận thức về điều này đã thúc đẩy chúng em xây dựng ứng dụng web
"Pescue" - một website hỗ trợ các người muốn nhận nuôi được tiếp cận với nhiều
các bé thú nuôi hơn và đưa các bé ở các trại thú nuôi đến với nhiều người yêu
động vật hơn. Đồng thời, website cũng sẽ giúp các bạn muốn giúp đỡ các bé thú
cưng nhưng không đủ khả năng để có thể ni một bé thú cưng có cơ hội giúp các
bé qua các hành động nhỏ hơn như đóng góp các gói cứu trợ hay là nhận ni
online.
Trong q trình thực hiện đồ án, chúng em khơng tránh khỏi những thách thức và
sai sót, nhưng sự hỗ trợ và góp ý chân thành từ Thầy đã giúp chúng em vượt qua
những khó khăn và hồn thiện đồ án một cách tốt nhất. Chúng em xin cam kết sẽ
tiếp thu và áp dụng những kinh nghiệm quý báu này để nâng cao khả năng thực
hiện các dự án tương lai.
Một lần nữa, chúng em xin chân thành cảm ơn Thầy Nguyễn Tấn Tồn và hy
vọng sự đóng góp của thầy sẽ tiếp tục giúp đỡ và hỗ trợ chúng em trong hành
trình học tập và nghiên cứu trong tương lai.

Xin chân thành cảm ơn quý thầy cô !


DANH SÁCH THÀNH VIÊN NHĨM

Tên thành viên

MSSV

Lê Hồng Phúc

20521761

Đặng Hồ Anh Quân

20521785


MỤC LỤC

LỜI CẢM ƠN ................................................................................................................ 3
DANH SÁCH THÀNH VIÊN NHÓM .......................................................................... 4
DANH MỤC HÌNH ..................................................................................................... 13
TĨM TẮT ĐỒ ÁN......................................................................................................... 1
CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI .............................................................................. 2
1.1 Đặt vấn đề............................................................................................................. 2
1.2 Giải Pháp .............................................................................................................. 2
1.3 Mục tiêu đề tài ...................................................................................................... 2
1.4 Đối tượng sử dụng ................................................................................................ 3
1.5 Công cụ sử dụng ................................................................................................... 3
1.6 Phạm vi nghiên cứu .............................................................................................. 3
CHƯƠNG 2: TỔNG QUAN .......................................................................................... 4
2.1 Tổng quan về đồ án .............................................................................................. 4
2.1.1

Mơ tả quy trình thực hiện các cơng việc chính ............................................. 4

2.2 Cơ sở lý thuyết ..................................................................................................... 5
2.2.1.2

Cách thức hoạt động.................................................................................... 5

2.2.1.3

Ưu diểm ....................................................................................................... 6

2.2.1.4

Nhược điểm ................................................................................................. 6

2.2.2
2.2.2.1

Ngôn ngữ lập trình TypeScript ..................................................................... 6
Lịch sử hình thành TypeScript .................................................................... 7


2.2.2.2
2.2.3

Ưu nhược điểm của TypeScript .................................................................. 7
Angular .......................................................................................................... 9

2.2.3.2

Cách thức hoạt động.................................................................................... 9

2.2.3.3

Ưu điểm ....................................................................................................... 9

2.2.3.4

Nhược điểm ............................................................................................... 10

2.2.4

Spring Boot ................................................................................................. 10

2.2.4.2

Cách thức hoạt động.................................................................................. 11

2.2.4.3

Ưu điểm ..................................................................................................... 11

2.2.4.4

Nhược điểm ............................................................................................... 11

2.2.5

Phần mềm lập trình VSCode ....................................................................... 11

2.2.5.2

Ưu điểm ..................................................................................................... 12

2.2.5.3

Nhược điểm ............................................................................................... 13

2.2.6

GitHub ......................................................................................................... 14

CHƯƠNG 3: ĐẶC TẢ USE CASE ............................................................................. 16
3.1 Sơ đồ Use case ................................................................................................... 16
3.2 Danh sách Use case ............................................................................................ 16
3.3 Đặc tả Use case .................................................................................................. 17
3.3.1

Đăng nhập ................................................................................................... 17

3.3.2

Đăng ký ....................................................................................................... 18

3.3.3

Nhận nuôi .................................................................................................... 19

3.3.4

Ủng hộ ......................................................................................................... 20

3.3.5

Cứu trợ ........................................................................................................ 21

3.3.6

Nhắn tin ....................................................................................................... 22

3.3.7

Quản lý thông tin cá nhân ........................................................................... 22


3.3.8

Gửi yêu cầu nhận quỹ cứu trợ ..................................................................... 23

3.3.9

Quản lý Thú cưng........................................................................................ 24

3.3.10

Quản lý Nhận nuôi .................................................................................... 26

3.3.11

Cứu trợ ...................................................................................................... 27

3.3.12

Quản lý Quỹ cứu trợ.................................................................................. 28

3.3.13

Quản lý các yêu cầu .................................................................................. 29

CHƯƠNG 4: PHÂN TÍCH HỆ THỐNG ..................................................................... 31
4.1 Kiến trúc hệ thống: ............................................................................................. 31
Ưu điểm của kiến trúc Client Server:....................................................................... 32
Nhược điểm của kiến trúc MVC: ............................................................................. 32
CHƯƠNG 5: THIẾT KẾ DỮ LIỆU ............................................................................ 33
5.1 Sơ đồ Logic ........................................................................................................ 33
5.2 Mô tả chi tiết các kiểu dữ liệu Bảng User .......................................................... 34
Bảng Animal ............................................................................................................ 34
Bảng Shelter ............................................................................................................. 35
Bảng Fund ................................................................................................................ 36
Bảng RescuePost ...................................................................................................... 36
Bảng OTPConfirmEmail .......................................................................................... 37
Bảng OTPResetPassword......................................................................................... 37
Bảng AdoptionApplication ...................................................................................... 38
Bảng OnlineAdoptionApplication ........................................................................... 38
Bảng FundingRequest .............................................................................................. 39
Bảng Donation ......................................................................................................... 39
Bảng Donation ......................................................................................................... 40


Bảng FundTransaction ............................................................................................. 40

Bảng ChatRoom ....................................................................................................... 40
Bảng ChatMessage ................................................................................................... 41
CHƯƠNG 6: THIẾT KẾ GIAO DIỆN ........................................................................ 42
6.1 Danh sách các màn hình ..................................................................................... 42
6.2 Mơ tả màn hình .................................................................................................. 42
6.2.1

Màn hình đăng nhập .................................................................................... 42

6.2.1.1.

Giao diện ................................................................................................ 42

6.2.1.2.

Mơ tả cách sử dụng và xử lý................................................................. 43

6.2.2

Màn hình đăng ký........................................................................................ 43

6.2.2.1.

Giao diện ................................................................................................ 44

6.2.2.2.

Mô tả cách sử dụng và xử lý .................................................................. 44

6.2.3

6.2.3.1.

Màn hình Trang chủ ................................................................................... 44
Giao diện .............................................................................................. 44

6.2.3.1

Mơ tả cách sử dụng và xử lý .................................................................... 46

6.2.4

Màn hình Nhận nuôi.................................................................................... 46

6.2.4.2
6.2.5
6.2.5.2
6.2.6
6.2.6.2
6.2.7
6.2.7.2
6.2.8

Mô tả cách sử dụng và xử lý ..................................................................... 47
Màn hình Chi tiết thú cưng ......................................................................... 47
Mơ tả cách sử dụng và xử lý ..................................................................... 49
Màn hình Ủng hộ ........................................................................................ 50
Mô tả cách sử dụng và xử lý ..................................................................... 52
Màn hình Cứu trợ ........................................................................................ 52
Mơ tả cách sử dụng và xử lý ..................................................................... 54
Màn hình Tin nhắn ...................................................................................... 54

6.2.8.2
6.2.9

Mô tả cách sử dụng và xử lý ..................................................................... 55
Màn hình Thơng tin cá nhân ....................................................................... 55

6.2.9.2

Mơ tả cách sử dụng và xử lý ..................................................................... 56

6.2.10

Màn hình Đăng ký trại cứu trợ .................................................................. 56

6.2.10.2
6.2.11
6.2.11.2
6.2.12
6.2.12.2
6.2.13
6.2.13.2
6.2.14
6.2.14.2
6.2.15
6.2.15.2
6.2.16
6.2.16.2
6.2.17

6.2.17.2
6.2.18
6.2.18.2
6.2.19
6.2.19.2
6.2.20

Mô tả cách sử dụng và xử lý .................................................................. 57
Màn hình Gửi yêu cầu nhận quỹ cứu trợ .................................................. 57
Mô tả cách sử dụng và xử lý .................................................................. 58
Màn hình Quản lý thú cưng ...................................................................... 59
Mơ tả cách sử dụng và xử lý .................................................................. 60
Màn hình Chi tiết thú cưng (Trại cứu trợ) ................................................ 60
Mô tả cách sử dụng và xử lý .................................................................. 61
Màn hình Yêu cầu nhận nuôi .................................................................... 61
Mô tả cách sử dụng và xử lý .................................................................. 61
Màn hình Chi tiết u cầu nhận ni (Trại cứu trợ) ................................. 62
Mô tả cách sử dụng và xử lý .................................................................. 62
Màn hình Cứu trợ (Trại cứu trợ) ............................................................... 63
Mô tả cách sử dụng và xử lý .................................................................. 63
Màn hình Chi tiết cứu trợ .......................................................................... 64
Mơ tả cách sử dụng và xử lý .................................................................. 64
Màn hình Quản lý nhận nuôi online.......................................................... 65
Mô tả cách sử dụng và xử lý .................................................................. 66
Màn hình Quản lý đăng ký trại cứu trợ ..................................................... 66
Mô tả cách sử dụng và xử lý .................................................................. 67
Màn hình Quản lý quỹ cứu trợ .................................................................. 68


6.2.20.1.

Giao diện ................................................................................................ 68

6.2.20.2.

Mô tả cách sử dụng và xử lý .................................................................. 69
Màn hình Quản lý yêu cầu ủng hộ ............................................................ 69

6.2.21
6.2.21.1.

Giao diện ................................................................................................ 70

6.2.21.2.

Mô tả cách sử dụng và xử lý .................................................................. 70
Màn hình Quản lý yêu cầu hỗ trợ tài chính ............................................... 70

6.2.22.
6.2.22.1.

Giao diện ................................................................................................ 70

6.2.22.2.

Mơ tả cách sử dụng và xử lý .................................................................. 71

CHƯƠNG 7: CÀI ĐẶT VÀ THỬ NGHIỆM .............................................................. 72
7.1 Môi trường cài đặt .............................................................................................. 72
7.1.1

Môi trường cài đặt và thử nghiệm ............................................................... 72

7.1.2

Kết quả đánh giá.......................................................................................... 72

CHƯƠNG 8: NHẬN XÉT VÀ KẾT LUẬN ............................................................... 73
8.1 Kết quả đạt được ................................................................................................ 73
8.2 Hạn chế ............................................................................................................... 73
8.3 Hướng phát triển ................................................................................................ 73
TÀI LIỆU THAM KHẢO ............................................................................................ 74
Tài liệu Tiếng Anh: .................................................. Error! Bookmark not defined.
Tài liệu Tiếng Việt: .................................................. Error! Bookmark not defined.


DANH MỤC BẢNG
Bảng 1: Danh sách Use Case ............................................................................................ 17
Bảng 2. Usecase Đăng nhập ............................................................................................. 18
Bảng 3. Usecase Đăng ký ................................................................................................. 19
Bảng 4. Usecase Nhận nuôi .............................................................................................. 20
Bảng 5. Usecase Ủng hộ ................................................................................................... 20
Bảng 6. Usecase Cứu trợ................................................................................................... 22
Bảng 7. Usecase Nhắn tin ................................................................................................. 22
Bảng 8. Usecase Quản lý thông tin cá nhân ..................................................................... 23
Bảng 9. Usecase Gửi yêu cầu nhận quỹ cứu trợ ............................................................. 24
Bảng 10. Usecase Quản lý thú cưng ................................................................................. 26
Bảng 11. Usecase Quản lý nhận nuôi ............................................................................... 27
Bảng 12. Usecase Cứu trợ................................................................................................. 28
Bảng 13. Usecase Quản lý quỹ cứu trợ............................................................................. 29

Bảng 14. Usecase Quản lý các yêu cầu ............................................................................ 30
Bảng 15. Bảng thuộc tính User ....................................................................................... 34
Bảng 16. Bảng thuộc tính Animal .................................................................................... 35
Bảng 17. Bảng thuộc tính Shelter ................................................................................... 36
Bảng 18. Bảng thuộc tính Fund ...................................................................................... 36
Bảng 19. Bảng thuộc tính RescuePost ............................................................................ 37
Bảng 20. Bảng thuộc tính OTPConfirmEmail ............................................................... 37
Bảng 21. Bảng thuộc tính OTPResetPassword .............................................................. 38
Bảng 22. Bảng thuộc tính AdoptionApplication ........................................................... 38
Bảng 23. Bảng thuộc tính OnlineAdoptionApplication ................................................ 38
Bảng 24. Bảng thuộc tính FundingRequest.................................................................... 39
Bảng 25. Bảng thuộc tính Donation ............................................................................... 39
Bảng 26. Bảng thuộc tính Donation ............................................................................... 40
Bảng 27. Bảng thuộc tính FundTransaction ................................................................... 40
Bảng 28. Bảng thuộc tính FundTransaction ................................................................... 40
Bảng 29. Bảng thuộc tính ChatMessage ........................................................................ 41
Bảng 30. Bảng Danh sách các màn hình ........................................................................ 42
Bảng 31. Mơ tả cách sử dụng màn hình Đăng nhập ...................................................... 43


Bảng 32. Mơ tả cách sử dụng màn hình Đăng ký .......................................................... 44
Bảng 33. Mô tả cách sử dụng màn hình Trang chủ ....................................................... 46
Bảng 34. Mơ tả cách sử dụng màn hình Nhận ni ................................................... 47
Bảng 35. Mơ tả cách sử dụng màn hình Chi tiết thú cưng ............................................ 50
Bảng 36. Màn hình thơng tin thanh tốn Ủng hộ quỹ ...................................................... 52
Bảng 37. Mô tả cách sử dụng màn hình Ủng hộ............................................................... 52
Bảng 38. Mơ tả cách sử dụng màn hình Cứu trợ .............................................................. 54
Bảng 39. Mơ tả cách sử dụng màn hình Thơng tin cá nhân ............................................. 56
Bảng 40. Mơ tả cách sử dụng màn hình Đăng ký trại cứu trợ .......................................... 57
Bảng 41. Mô tả cách sử dụng màn hình Yêu cầu nhận quỹ cứu trợ ................................. 59

Bảng 42. Mơ tả cách sử dụng màn hình Chi tiết thú cưng (Trại cứu trợ)......................... 61
Bảng 43. Mô tả cách sử dụng màn hình u cầu nhận ni ............................................ 62
Bảng 44. Mơ tả cách sử dụng màn hình Chi tiết yêu cầu nhận nuôi ................................ 63
Bảng 45. Mô tả cách sử dụng màn hình Cứu trợ (Trại cứu trợ) ....................................... 64
Bảng 46. Mơ tả cách sử dụng màn hình Chi tiết bài cứu trợ ............................................ 65
Bảng 47. Mô tả cách sử dụng màn hình Quản lý nhận ni online .................................. 66
Bảng 48. Mơ tả cách sử dụng màn hình Quản lý đăng ký trại cứu trợ ............................. 68
Bảng 49. Mơ tả màn hình Quản lý quỹ cứu trợ ................................................................ 69
Bảng 50. Mơ tả cách sử dụng màn hình Quản lý đăng ký trại cứu trợ ............................ 70
Bảng 51. Mô tả cách sử dụng màn hình Quản lý yêu cầu hỗ trợ tài chính ....................... 71


DANH MỤC HÌNH
Hình 1. Figma ..................................................................................................................... 5
Hình 2. TypeScript .............................................................................................................. 7
Hình 3. Angular .................................................................................................................. 9
Hình 4. Spring Boot .......................................................................................................... 10
Hình 5. Visual Studio Code .............................................................................................. 12
Hình 6. Github .................................................................................................................. 14
Hình 7. Sơ đồ Usecase ...................................................................................................... 16
Hình 8. Màn hình đăng nhập ............................................................................................ 43
Hình 9. Màn hình đăng nhập Admin page ........................................................................ 43
Hình 10. Màn hình Trang chủ ........................................................................................... 46
Hình 11. Màn hình Nhận ni .......................................................................................... 46
Hình 12. Màn hình Chi tiết thú cưng ................................................................................ 48
Hình 13. Màn hình Chi tiết thú cưng sau khi gửi yêu cầu nhận nuôi ............................... 49
Hình 14. Màn hình thơng tin chuyển khoản khi u cầu nhận ni online ...................... 49
Hình 15. Màn hình Ủng hộ ............................................................................................... 51
Hình 16. Màn hình cứu trợ ............................................................................................... 53
Hình 17. Màn hình thêm bài cứu trợ ................................................................................. 53

Hình 18. Màn hình tin nhắn .............................................................................................. 55
Hình 19. Mơ tả cách sử dụng màn hinh Tin nhắn............................................................ 55
Hình 20. Màn hình Thơng tin cá nhân .............................................................................. 56
Hình 21. Màn hình Đăng ký trại cứu trợ .......................................................................... 57
Hình 22. Màn hình Danh sách quỹ cứu trợ ....................................................................... 58
Hình 23. Màn hình yêu cầu quỹ cứu trợ ........................................................................... 58
Hình 24. Màn hình Quản lý thú cưng ............................................................................... 59
Hình 25. Màn hình Chi tiết thú cưng (Trại cứu trợ) ......................................................... 60
Hình 26. Màn hình u cầu nhận ni ............................................................................. 61
Hình 27. Màn hình Chi tiết u cầu nhận ni (Trại cứu trợ) .......................................... 62
Hình 28. Màn hình Cứu trợ (Trại cứu trợ) ........................................................................ 63
Hình 29. Màn hình Chi tiết bài cứu trợ ............................................................................. 64
Hình 30. Màn hình Quản lý u cầu nhận ni online ..................................................... 65
Hình 31. Màn hình Chi tiết yêu cầu nhận nuôi online ...................................................... 66


Hình 32. Màn hình Quản lý đăng ký trại cứu trợ.............................................................. 67
Hình 33. Màn hình Chi tiết thơng tin u cầu trại cứu trợ ............................................... 67
Hình 34. Màn hình Quản lý quỹ cứu trợ ........................................................................... 68
Hình 35. Màn hình Chi tiết quỹ cứu trợ............................................................................ 69
Hình 36. Màn hình Quản lý ủng hộ .................................................................................. 70
Hình 37. Màn hình Danh sách yêu cầu hỗ trợ tài chính từ quỹ ........................................ 71


TÓM TẮT ĐỒ ÁN

"Pescue" là một website hỗ trợ việc cứu trợ động vật. Được tạo ra để đưa các
bạn muốn nhận nuôi hay giúp đỡ các bé thú nuôi bị bỏ rơi hoặc các bé thú nuôi tại
các trại động vật được giúp đỡ các bé một cách trực tiếp hay gián tiếp. Với giao
diện trực quan và thân thiện với người dùng, "Pescue" cung cấp các tính năng như

nhận ni thú cưng, nhận ni thú cưng online, đóng góp quỹ cứu trợ và cho các
trại cứu trợ biết về các bé thú đang trong tình trạng bị bỏ hoang.
Website này giúp cho các ban quản lý trại có thể quản lý các bé thú cưng có
trong trại và hiện liên website giúp các bé tiếp cận với nhiều người hơn, cũng như là
có một nguồn cứu trợ từ ban quản lí Pescue. Về phía ban quản lí của Pescue, sẽ là
người quản lý các giao dịch quỹ cũng như là yêu cầu nhận nuôi online hay yêu cầu
đăng ký làm trại cứu trợ trên hệ thống. Ngoài ra, "Pescue" cung cấp các chức năng
giúp cho người quản lý trại cứu trợ có thể giao tiếp trực tiếp với người nhận trực
tiếp trên hệ thống không cần đến bên thứ 3.
Đặc biệt, "Pescue" là một nơi mà các trại cứu trợ có thể kiếm được một
nguồn hỗ trợ giúp các trại cứu trợ có thể duy trì hoạt động của trại. Bằng các quỹ
cứu trợ, các trại cứu trợ gặp khó khăn sẽ có thể tiếp tục duy trì hoạt động cứu trợ
của mình. Ngồi ra, đây cũng là nơi mọi người sẽ đăng các bài đăng về các bé thú
ni hoang và từ đó các trại cứu trợ sẽ có thể đến và đưa bé đó về trại của mình.
Với mục tiêu đưa việc cứu trợ động vật đến nhiều người hơn và đơn giản hóa
việc nhận ni thú cưng. “Pescue” sẽ là giải pháp cho các trại cứu trợ để quảng bá
bản thân và có một điều kiện tốt hơn để có thể chăm lo cho các bé ở trại của mình.

1


CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
1.1 Đặt vấn đề
Ngày nay, số lượng người yêu động vật là rất lớn nhưng khơng phải ai trong
số họ cũng có đủ điều kiện để có thể nhận ni cho mình một bé thú cưng. Do việc
nhận ni một bé thú cưng địi hỏi rất nhiều điều kiện như chỗ ở, thức ăn và thời
gian rảnh để chơi với các bé, việc này đã ngăn cản số lượng lớn người yêu thú cưng
nhận nuôi một bé thú cưng. Ngoài ra các trại cứu trợ thú cưng hiện nay vẫn chưa có
một địa điểm chính thống và lớn để có thể đưa các bé thú cưng trong trại của mình
đến mọi người.

1.2 Giải Pháp
Nhận thấy tình hình trên, nhóm em đã lên ý tưởng xây dựng một website hỗ
trợ cứu trợ động vật. “Pescue” ra đời nhằm đáp ứng và giải quyết các vấn đề đã nói
trên, giúp các bạn có thể giúp các bé thú cưng chỉ bằng các hành động nhỏ và các
trai cứu trợ cũng có một nơi để kiếm được một nguồn cứu trợ giúp duy trì hoạt động
của trại cứu trợ. ứng dụng hỗ trợ công tác quản lý và bán hàng. “Xây dựng ứng
dụng web Plan”
1.3 Mục tiêu đề tài
- Tối ưu hóa quy trình nhận ni thú cưng: "Pescue" được phát triển nhằm
tối ưu hóa quy trình nhận nuôi cũng như việc ủng hộ các bé thú cưng cho các bạn
yêu động vật và các trại cứu trợ. Website cung cấp các tính năng quản lý việc nhận
ni trên website và có thể trao đổi trực tiếp giữa trại cứu trợ và người nhận nuôi
trên website.
- Quản lý quỹ cứu trợ: "Pescue" cung cấp chức năng quản lý quỹ cứu trợ, các
giao dịch liên quan đến quỹ và quản lý các yêu cầu trợ thành trại cứu trợ cho ban
quản lý. Nhờ đó, ban quản lý có thể dễ dàng quản lý các quỹ cứu trợ, nhận tiền từ
các mạnh thường quân và phân phát đến các trại cứu trợ đang cần.
- Giúp các bạn khơng có nhiều điều kiện vẫn có thể giúp đỡ các bé thú cưng:
"Pescue" cung cấp các chức năng như nhận nuôi online và ủng hộ đế các bạn khơng
có đủ điều kiện vẫn có thể bày tỏ tình thương của mình đến các bé thú cưng đang
2


trong tình trạng khơng tốt.
- Tăng cường khả năng tiếp cận các bạn có nhu cầu nhận ni: "Pescue" hỗ
trợ các trại cứu trợ có thể đưa các bé trong trại cứu trợ của mình lên website để có
thể tiếp xúc với nhiều bạn có nhu cầu nhận ni hơn.
- Giải cứu các bé thú nuôi bị bỏ rơi: "Pescue" là nơi mà các bạn có thể đăng
các bài đăng về các bé thú ni bị bỏ rơi ngồi đường và các trại cứu trợ trong khu
vực đó hoặc là có thể tiếp cận khu vực đó có thể đến và giải cứu các bé

1.4 Đối tượng sử dụng
Pescue hướng đến các trại cứu trợ động vật và các bạn yêu động vật. Đối
tượng sử dụng sẽ là các bạn mn được góp một phần nhỏ vào các hoạt động cứu trợ
thú ni hoặc có thể là nhận ni một bé thú ni từ trại cứu trợ cho riêng mình,
ngồi ra các trại cứu trợ cũng sẽ sử dụng website để trại cứu trợ của mình được
nhiều người biết đến hơn.
1.5 Công cụ sử dụng
- Công cụ dùng để phân tích, thiết kế: Figma, draw.io, StarUML
- Cơng cụ phát triền: Visual Studio Code, InteliJ
- Công cụ quản lý dự án: Github, Firebase Storage, Zalo
- Công cụ soạn thảo văn bản: Microsoft Word
1.6 Phạm vi nghiên cứu
- Thiết kế giao diện người dùng: Figma
- Các ngơn ngữ lập trình và cơng nghệ phát triển website: HTML, CSS,
TypeScript, Java.
- Các framework hỗ trợ: Angular, Spring Boot.
- Phần mềm lập trình: Visual Studio Code, InteliJ
- Cơ sở dữ liệu: MongoDB
- Công cụ deploy: Railway

3


CHƯƠNG 2: TỔNG QUAN
2.1 Tổng quan về đồ án
Website Pescue là một trang web giúp các bạn yêu động vật có thể nhận ni
thú cưng, ủng hộ các trại cứu trợ và đăng các bài đăng về các bé thú ni bị bỏ rơi.
Về phí trại cứu trợ có thể quản lí các bé thú ni hiện có trên hệ thống và gửi các
yêu cầu nhận quỹ cứu trợ để duy trì hoạt động.
2.1.1 Mơ tả quy trình thực hiện các cơng việc chính

⚫

⚫

Bước 1: Xác định các u cầu:
-

Phân tích khả thi quy mơ thực hiện.

-

Tìm hiểu quy trình nghiệp vụ.

-

Tham khảo và trải nghiệm các ứng dụng liên quan.

-

Khảo sát người dùng qua mạng.

Bước 2: Thiết kế hệ thống:
- Vẽ sơ đồ Use-case: phân tích nghiệp vụ tổng quan.

⚫

Bước 3: Thiết kế dữ liệu
- Thiết kế dữ liệu tương ứng với từng loại yêu cầu của phần mềm để đảm
bảo được tính đúng đắn và tính tiến hóa với phần mềm, có hiệu quả về
mặt truy xuất và lưu trữ

- Xác định và lập danh sách các bảng dữ liệu cần thiết cho các yêu cầu của
phần mềm
- Xây dựng sơ đồ logic cụ thể của phần mềm

⚫

Bước 4: Thiết kế giao diện
- Lập ra danh sách các màn hình khi người dùng tương tác với phần mềm
- Mơ tả các đối tượng trên từng màn hình
4


- Xác định những chức năng hiển thị trên từng màn hình
⚫

Bước 5: Code và kiểm thử
- Code trình bày theo mơ hình 3 lớp và được phân chia theo các nhiệm vụ
yêu cầu.
- Testcase rõ ràng để kiểm tra tính hiệu quả của hệ thống.

2.2 Cơ sở lý thuyết
2.2.1 Thiết kế giao diện ngươi dùng Figma
2.2.1.1 Tổng quan về Figma

Hình 1. Figma
⚫

Figma là một ứng dụng web, cho phép người dùng truy cập và làm việc trên
trình duyệt mà khơng cần cài đặt phần mềm.

⚫

Nó cung cấp mơi trường làm việc đám mây, giúp người dùng lưu trữ và
chia sẻ dự án dễ dàng.

⚫

Figma hỗ trợ các tính năng như thiết kế giao diện, tạo wireframe, tạo
prototype và quản lý thư viện.
2.2.1.2 Cách thức hoạt động

⚫
⚫

Người dùng có thể tạo mới dự án hoặc mở dự án đã tồn tại trên Figma.
Figma cung cấp một giao diện dễ sử dụng, với các công cụ vẽ và chỉnh sửa
5


các yếu tố trên giao diện.
⚫

Người dùng có thể tạo component (thành phần) để tái sử dụng và duy trì
tính nhất quán trên toàn bộ dự án.

⚫

Figma cũng hỗ trợ tính năng cộng tác đồng thời, cho phép nhiều người dùng
làm việc trên cùng một dự án và theo dõi sự thay đổi trong thời gian thực.
2.2.1.3 Ưu diểm

⚫

Truy cập và làm việc trực tuyến, không cần cài đặt phần mềm.

⚫

Dễ sử dụng, với giao diện thân thiện và các công cụ mạnh mẽ.

⚫

Hỗ trợ cộng tác đồng thời, giúp đội ngũ làm việc chung một cách hiệu quả.

⚫

Cho phép chia sẻ và gửi mời người dùng khác để xem, chỉnh sửa hoặc phản
hồi.
2.2.1.4 Nhược điểm

⚫

Cần kết nối internet để truy cập và làm việc.

⚫

Có thể hạn chế một số tính năng so với các ứng dụng thiết kế giao diện
truyền thống.

⚫

Phiên bản miễn phí của Figma có giới hạn băng thông lưu trữ và số lượng
dự án.
2.2.2 Ngôn ngữ lập trình TypeScript
TypeScript là một phiên bản cao hơn của JavaScript, được thiết kế để xây

dựng các ứng dụng lớn và phức tạp. Nó kế thừa nhiều khái niệm từ Java và C#,
TypeScript là ngơn ngữ tĩnh (Static typed) có nghĩa là nó nghiêm ngặt và có trật tự
trái ngược với free-type. Nó cịn được bổ sung thêm lớp hướng đối tượng mà điều
này khơng có ở Javascript.
Với TypeScript, ta có thể bê nguyên xi code JavaScript vào trong cùng một
file và chạy cùng nhau bình thường, bởi vì TypeScript duy trì cú pháp của
JavaScript và mở rộng nó bằng một loạt tính năng mới. Nhờ đó mà hiệu năng làm
việc được tăng lên đáng kể.

6


Hình 2. TypeScript
2.2.2.1 Lịch sử hình thành TypeScript
TypeScript là một dự án kéo dài hơn 3 năm của Microsoft nhằm tạo ra một
ngơn ngữ để mở rộng JavaScript. Giúp nó trở nên phù hợp hơn với những ứng dụng
lớn, nhưng vẫn quen thuộc với cấu trúc ngôn ngữ JS hiện tại để mọi người có thể
học nhanh hơn. Trưởng nhóm dự án này là Anders Hejlsberg, cha đẻ của C#, Turbo
Pascal và Delphi.
2.2.2.2 Ưu nhược điểm của TypeScript
Ưu điểm của Typescript:
• Dễ dàng hơn trong phát triển các dự án lớn, được hỗ trợ bởi các Javascript
Framework lớn.
• Hầu hết các cú pháp hướng đối tượng đều được hỗ trợ bởi Typescript như kế thừa,
đóng gói, constructor, abstract, interface, implement, override…v.v

• Cách tổ chức code rõ ràng hơn, hỗ trợ cơ chế giúp kiến trúc hệ thống code hướng
module, hỗ trợ namespace, giúp xây dựng các hệ thống lớn nơi mà nhiều lập trình
viên có thể làm việc cùng nhau một cách dễ dàng hơn.
• Hỗ trợ các tính năng mới nhất của Javascript. TypeScript luôn đảm bảo việc sử
dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như version hiện tại là
ECMAScript 2015 (ES6).
• Một lợi thế của Typescript nữa là mã nguồn mở vì vậy nó miễn phí và có cộng
đồng hỗ trợ rất lớn.
• Với static typing, code viết bằng TypeScript dễ dự đoán hơn, và dễ debug hơn
Nhược điểm của Typescript:
Vì là một ngôn ngữ rất dễ dàng bị lộ code nên dễ bị khai thác. Hacker
7


có thể nhập một đoạn code bất kì vào khung console của trình duyệt, lúc này
trình duyệt sẽ hiểu rằng đoạn code đó là chính thống, nên hacker có thể gửi
nhửng request lên server một cách dễ dàng.

8


2.2.3 Angular
2.2.3.1

Tổng quan về Angular

Angular là một mã nguồn mở viết bằng TypeScript và được sử dụng để thiết
kế giao diện web (front – end). Angular được xây dựng, phát triển từ những năm
2009 và đang duy trì cho đến nay bởi Google. Đây được xem là framework front
end mạnh mẽ và chuyên dụng dành cho các lập trình viên sử dụng HTML cao cấp.

Hình 3. Angular
2.2.3.2

Cách thức hoạt động

Angular được ứng dụng rộng rãi để xây dựng các project Single Page
Application (ứng dụng trang đơn). Hiện tại, version stable của Angular là Angular 9
(released on February 7, 2020) với TypeScript 3.6 và 3.7.
Hiện nay, Angular được các công ty lớn lựa chọn sử dụng như: Upwork,
Forbes, General Motors,… Đây sẽ là cơ hội việc làm rất lớn nếu bạn sử dụng thành
thạo Angular. Tuy nhiên, trước đó bạn cần nắm vững các kiến thức nền tảng về
JavaScript, CSS và HTML, cách làm việc với kiến trúc Model-View-Controller
(MVC).
2.2.3.3

Ưu điểm

• Angular được các chuyên gia đánh giá cao, mã nguồn này giúp các Single
Page Application làm việc dễ dàng, nhanh chóng.
• Nhờ khả năng Binding data lên trên các nền tảng HTML nên code front-end
thường rất thân thiện với người dùng.
• Bạn có thể thuận tiện Unit Test.
9


• Component có thể tái sử dụng dễ dàng hơn.
• Angular có khả năng hỗ trợ cho các lập trình viên có thể viết code được ít
hơn cùng với nhiều chức năng hơn. Từ đó giúp tiết kiệm thời gian lập trình
và tăng hiệu suất cơng việc.

• AngularJS tương thích với nhiều nền tảng khác nhau. Bạn có thể dùng được
trên nhiều loại trình duyệt khác nhau cả trong máy tính và thiết bị điện thoại
di động.
2.2.3.4

Nhược điểm

• Tính bảo mật: Bản chất của Angular là một framework front-end. Thông
thường, tính bảo mật của front-end thường khơng cao bằng back-end. Chính
vì thế, bạn cần xây dựng một hệ thống kiểm tra dữ liệu sao cho việc trả về
được tốt nhất khi sử dụng API.
• Khả năng an tồn: Website có thể trở nên khơng an tồn nếu bạn sử dụng
một số trình duyệt sở hữu tính năng Disable JavaScript

2.2.4 Spring Boot
2.2.4.1 Tổng quan về Spring Boot
Spring Spring Boot là một extension của Spring Framework giúp các lập
trình viên loại bỏ các bước cấu hình phức tạp mà Spring bắt buộc. Spring Boot là dự
án phát triển bởi ngôn ngữ Java (JAV) trong hệ sinh thái Spring framework.

Hình 4. Spring Boot

10


2.2.4.2 Cách thức hoạt động
Java Spring Boot (Spring Boot) là một công cụ giúp phát triển ứng dụng web
và microservices bằng Spring Framework nhanh hơn và dễ dàng hơn.
2.2.4.3 Ưu điểm
• Hội tụ đầy đủ các tính năng của Spring framework.

• Đơn giản hóa cấu hình và xây dựng được các ứng dụng độc lập có khả năng
chạy bằng java-jar nhờ các dependency starter.
• Dễ dàng deploy vì các ứng dụng server được nhúng trực tiếp vào ứng dụng
để tránh những khó khăn khi triển khai lên mơi trường production mà
khơng cần thiết phải tải file WAR.
• Cấu hình ít, tự động được hỗ trợ bất cứ khi nào cho chức năng spring như
tăng năng suất, giảm thời gian viết code và khơng u cầu XML config.
• Đa luồng
• Cung cấp nhiều plugin, số liệu, cấu hình ứng dụng từ bên ngồi
2.2.4.4 Nhược điểm
• Thiếu kiểm sốt. Do style cố định, Spring Boot tạo ra nhiều phụ thuộc
không được sử dụng dẫn đến kích thước tệp triển khai lớn.
• Q trình chuyển đổi dự án Spring cũ hoặc hiện có thành các ứng dụng
Spring Boot nhiều khó khăn và tốn thời gian.
• Khơng thích hợp cho các dự án quy mô lớn. Hoạt động liên tục với các
microservices, theo nhiều nhà phát triển, Spring Boot không phù hợp để
xây dựng các ứng dụng nguyên khối
2.2.5 Phần mềm lập trình VSCode
2.2.5.1 Tổng quan về VSCode
Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo
mã nguồn phổ biến nhất được sử dụng bởi các lập trình viên. Nhanh, nhẹ, hỗ trợ đa
nền tảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trội
khiến VS Code ngày càng được ứng dụng rộng rãi.

11