Đồ á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 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 : Lê Hoàng Phúc Mã sinh viên : 20521761 Sinh viên thực : Đặng Hồ Anh Quân Mã sinh viên : 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 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 môn Đồ Án Thầy trực tiếp hướng dẫn, tận tình chia sẻ kiến thức, hỗ trợ đóng góp ý kiến quý báu để giúp chúng em hoàn thành thật tốt đồ án báo cáo 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ợ bé thú cưng nên phổ biến đến với nhiều người yêu động vật Chính nhận thức điều thúc đẩy chúng em xây dựng ứng dụng web "Pescue" - website hỗ trợ người muốn nhận nuôi tiếp cận với nhiều bé thú nuôi đưa bé trại thú nuôi đến với nhiều người yêu động vật Đồng thời, website giúp bạn muốn giúp đỡ bé thú cưng không đủ khả để ni bé thú cưng có hội giúp bé qua hành động nhỏ đóng góp gói cứu trợ nhận ni online Trong q trình thực đồ án, chúng em không tránh khỏi thách thức sai sót, hỗ trợ góp ý chân thành từ Thầy giúp chúng em vượt qua khó khăn hoàn thiện đồ án cách tốt Chúng em xin cam kết tiếp thu áp dụng kinh nghiệm quý báu để nâng cao khả thự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 hy vọng đóng góp thầy tiếp tục giúp đỡ hỗ trợ chúng em hành trình học tập nghiên cứu 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ê Hoàng Phúc 20521761 Đặng Hồ Anh Quân 20521785 MỤC LỤC LỜI CẢM ƠN DANH SÁCH THÀNH VIÊN NHÓM DANH MỤC HÌNH 13 TÓM TẮT ĐỒ ÁN CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Đặt vấn đề 1.2 Giải Pháp 1.3 Mục tiêu đề tài 1.4 Đối tượng sử dụng 1.5 Công cụ sử dụng 1.6 Phạm vi nghiên cứu CHƯƠNG 2: TỔNG QUAN 2.1 Tổng quan đồ án 2.1.1 Mơ tả quy trình thực cơng việc 2.2 Cơ sở lý thuyết 2.2.1.2 Cách thức hoạt động 2.2.1.3 Ưu diểm 2.2.1.4 Nhược điểm 2.2.2 2.2.2.1 Ngơn ngữ lập trình TypeScript Lịch sử hình thành TypeScript 2.2.2.2 2.2.3 Ưu nhược điểm TypeScript Angular 2.2.3.2 Cách thức hoạt động 2.2.3.3 Ưu điểm 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ý 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 kiến trúc Client Server: 32 Nhược điểm 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 kiểu 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 hình 42 6.2 Mô tả 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 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 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 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 xử lý 47 Màn hình Chi tiết thú cưng 47 Mô tả cách sử dụng xử lý 49 Màn hình Ủng hộ 50 Mô tả cách sử dụng xử lý 52 Màn hình Cứu trợ 52 Mô tả cách sử dụng 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 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 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 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 xử lý 58 Màn hình Quản lý thú cưng 59 Mô tả cách sử dụng 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 xử lý 61 Màn hình Yêu cầu nhận nuôi 61 Mô tả cách sử dụng xử lý 61 Màn hình Chi tiết yêu cầu nhận nuôi (Trại cứu trợ) 62 Mô tả cách sử dụng xử lý 62 Màn hình Cứu trợ (Trại cứu trợ) 63 Mô tả cách sử dụng xử lý 63 Màn hình Chi tiết cứu trợ 64 Mô tả cách sử dụng xử lý 64 Màn hình Quản lý nhận nuôi online 65 Mô tả cách sử dụng 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 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 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 xử lý 70 Màn hình Quản lý yêu cầu hỗ trợ tài 70 6.2.22 6.2.22.1 Giao diện 70 6.2.22.2 Mô tả cách sử dụng 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 thử nghiệm 72 7.1.2 Kết đánh giá 72 CHƯƠNG 8: NHẬN XÉT VÀ KẾT LUẬN 73 8.1 Kết đạt 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 6.2.12.2 Mô tả cách sử dụng xử lý Biến cố Xử lý Thêm Thêm thú cưng vào hệ thống Tìm kiếm Tìm kiếm thú cưng trại quản lý Danh sách thú cưng Danh sách thú cưng quản lý STT trại, ấn vào thú cưng để chuyến sang hình Chi tiết thú cưng Bảng 35 Mô tả cách sử dụng hình Biểu đồ 6.2.13 Màn hình Chi tiết thú cưng (Trại cứu trợ) 6.2.13.1 Giao diện Hình 25 Màn hình Chi tiết thú cưng (Trại cứu trợ) 60 6.2.13.2 Mô tả cách sử dụng xử lý Biến cố Xử lý Thông tin thú cưng Các thông tin thú cưng Sửa thông tin Mở form sửa thơng tin thú cưng Xố thú cưng Xoá thú cưng khỏi hệ thống STT Bảng 42 Mơ tả cách sử dụng hình Chi tiết thú cưng (Trại cứu trợ) 6.2.14 Màn hình Yêu cầu nhận ni 6.2.14.1 Giao diện Hình 26 Màn hình Yêu cầu nhận nuôi 6.2.14.2 Mô tả cách sử dụng xử lý STT Biến cố Xử lý Tìm kiếm Tìm kiếm u cầu nhận ni 61 Danh sách yêu cầu Danh sách yêu cầu nhận nuôi gửi, click vào yêu cầu để xem chi tiết yêu cầu Bảng 43 Mô tả cách sử dụng hình u cầu nhận ni 6.2.15 Màn hình Chi tiết yêu cầu nhận nuôi (Trại cứu trợ) 6.2.15.1 Giao diện Hình 27 Màn hình Chi tiết u cầu nhận ni (Trại cứu trợ) 6.2.15.2 Mô tả cách sử dụng xử lý Biến cố Xử lý Thông tin thú cưng Thông tin thú cưng Thông tin người Thông tin người gửi yêu cầu STT nhận nuôi Liên hệ Liên hệ người gửi u cầu thơng qua tính tin 62 nhắn hệ thống Chấp nhận Chấp nhận yêu cầu nhận nuôi, gửi email thông báo cho người gửi yêu cầu Từ chối Từ chối yêu cầu nhận nuôi Bảng 44 Mơ tả cách sử dụng hình Chi tiết u cầu nhận ni 6.2.16 Màn hình Cứu trợ (Trại cứu trợ) 6.2.16.1 Giao diện Hình 28 Màn hình Cứu trợ (Trại cứu trợ) 6.2.16.2 Mô tả cách sử dụng xử lý 63 Biến cố Xử lý Tìm kiếm lọc thơng tin Tìm kiếm lọc cứu trợ Bài cứu trợ Các cứu trợ người dùng đăng Các cứu trợ đảm nhận Các cứu trợ nhận STT thực trại cứu trợ Bảng 45 Mơ tả cách sử dụng hình Cứu trợ (Trại cứu trợ) 6.2.17 Màn hình Chi tiết cứu trợ 6.2.17.1 Giao diện Hình 29 Màn hình Chi tiết cứu trợ 6.2.17.2 Mô tả cách sử dụng xử lý STT Biến cố Xử lý 64 Thông tin cứu trợ Thông tin thú cưng Thông tin người Thông tin người đăng đăng Liên hệ Liên hệ người gửi u cầu thơng qua tính tin nhắn hệ thống Đảm nhận việc cứu Chấp nhận thực cứu trợ trợ Hồn thành cứu trợ Gửi thơng báo hoàn thành cứu trợ cảm ơn người đăng qua email họ Khơng thể hồn Gửi thơng báo chưa thể hoàn thành cứu trợ xin lỗi thành cứu trợ người đăng qua email họ Bảng 46 Mơ tả cách sử dụng hình Chi tiết cứu trợ 6.2.18 Màn hình Quản lý nhận ni online 6.2.18.1 Giao diện 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 6.2.18.2 Mô tả cách sử dụng xử lý STT Biến cố Xử lý Danh sách yêu cầu Danh sách yêu cầu, click vào yêu cầu để chuyển sang hình chi tiết yêu cầu Thông tin thú cưng Thông tin thú cưng Thông tin người gửi yêu cầu Thông tin người gửi yêu cầu Liên hệ Liên hệ người gửi yêu cầu thơng qua tính tin nhắn hệ thống Chấp nhận Chấp nhận yêu cầu nhận nuôi online Từ chối Từ chối yêu cầu nhận nuôi online Bảng 47 Mơ tả cách sử dụng hình Quản lý nhận ni online 6.2.19 Màn hình Quản lý đăng ký trại cứu trợ 6.2.19.1 Giao diện 66 Hình 32 Màn hình Quản lý đăng ký trại cứu trợ Hình 33 Màn hình Chi tiết thơng tin u cầu trại cứu trợ 6.2.19.2 Mô tả cách sử dụng xử lý Biến cố Xử lý Danh sách yêu cầu Danh sách yêu cầu trở thành trại cứu trợ Thông tin trại cứu trợ Thông tin người yêu cầu điền vào STT 67 Liên hệ Liên hệ người gửi u cầu thơng qua tính tin nhắn hệ thống Chấp nhận Chấp nhận yêu cầu Từ chối Từ chối yêu cầu Bảng 48 Mô tả cách sử dụng hình Quản lý đăng ký trại cứu trợ 6.2.20 Màn hình Quản lý quỹ cứu trợ 6.2.20.1 Giao diện 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ợ 6.2.20.2 Mô tả cách sử dụng xử lý STT Biến cố Xử lý Danh sách quỹ cứu trợ Danh sách quỹ cứu trợ, click vào quỹ cứu trợ để chuyển sang trang Chi tiết quỹ cứu trợ Thông tin quỹ cứu trợ Thông tin quỹ cứu trợ Cập nhật Cập nhật lại thông tin quỹ cứu trợ Bảng 49 Mơ tả hình Quản lý quỹ cứu trợ 6.2.21 Màn hình Quản lý yêu cầu ủng hộ 69 6.2.21.1 Giao diện Hình 36 Màn hình Quản lý ủng hộ 6.2.21.2 Mô tả cách sử dụng xử lý Biến cố Xử lý Danh sách ủng hộ Danh sách yêu cầu ủng hộ Chấp nhận Xác thực yêu cầu, thực thay đổi số tiền STT khả dụng cho quỹ tương ứng Từ chối Từ chối yêu cầu Bảng 50 Mô tả cách sử dụng hình Quản lý đăng ký trại cứu trợ 6.2.22 Màn hình Quản lý u cầu hỗ trợ tài 6.2.22.1 Giao diện 70 Hình 37 Màn hình Danh sách yêu cầu hỗ trợ tài từ quỹ 6.2.22.2 Mơ tả cách sử dụng xử lý Biến cố Xử lý Danh sách yêu cầu Danh sách yêu cầu hỗ trợ Chấp nhận Xác thực yêu cầu, thực thay đổi số tiền STT khả dụng cho quỹ tương ứng Từ chối Từ chối yêu cầu Bảng 51 Mơ tả cách sử dụng hình Quản lý u cầu hỗ trợ tài 71 CHƯƠNG 7: CÀI ĐẶT VÀ THỬ NGHIỆM Sau thiết kế đầy đủ mô hình kiến trúc, bảng sở liệu giao diện ứng với chức năng, nhóm tiến hành cài đặt phần mềm theo quy mô hệ thống gồm Visual Studio Code để chạy Front-end Phần mềm InteliJ để chạy Back-end mã nguồn tải từ Github Link GitHub Back-end: PHoangLe/DoAn01-BE (github.com) Link GitHub Front-end: PHoangLe/DoAn01-FE (github.com) Link GitHub Front-end-Admin: PHoangLe/DoAn01-FE-Admin (github.com) 7.1 Môi trường cài đặt 7.1.1 Môi trường cài đặt thử nghiệm - Môi trường Local: Github, InteliJ, VS Code - Deploy Back-end: Railway 7.1.2 Kết đánh giá - Sau hoàn thành việc phát triển thử nghiệm website để đảm bảo hoạt động khơng có lỗi Sau kiểm thử tính chế bảo mật, tất hoạt động mục đích 72 CHƯƠNG 8: NHẬN XÉT VÀ KẾT LUẬN 8.1 Kết đạt ⚫ Hiểu nắm kiến thức quy trình phát triển website ⚫ Nắm rõ HTML, CSS framework Angular để thiết kế giao diện website phát triển phía Front-end ⚫ Nắm rõ Spring Boot để phát triển phía Back-end ⚫ Làm quen với NoSQL database ⚫ Có chế bảo mật API ⚫ Giao diện người dùng thân thiện, dễ sử dụng ⚫ Đầy đủ chức 8.2 Hạn chế ⚫ Chưa đào sâu vào chức năng: Các chức dừng mức sử dụng hoạt động hiệu Tuy nhiên, chức tiện ích cần cải tiến thêm để nâng cao trải nghiệm người dùng ⚫ Giao diện đơn giản: Giao diện dừng mức thân thiện với người dùng, cịn phát triển thêm đến mức độ tiện ích cho người dùng 8.3 Hướng phát triển ⚫ Mở rộng tính năng: Bổ sung tính chia sẻ thơng tin thú cưng lên mạng xã hội, cập nhật tình trạng thú cưng thời gian thực sau nhận nuôi, nhiều tính liên quan đến việc thống kê cho ban quản lý trại ban quản lý “Pescue” ⚫ Phát triển ứng dụng di động: Xây dựng phiên ứng dụng di động "Pescue" để đáp ứng nhu cầu người dùng thiết bị di động, tạo thuận tiện trải nghiệm sử dụng người dùng tốt 73 TÀI LIỆU THAM KHẢO [1] CoreUI, "CoreUI Angular," [Online] Available: https://coreui.io/angular/docs/getting-started/introduction [2] A Design, "Ant Design," [Online] Available: https://ant.design/docs/react/introduce?fbclid=IwAR2r7jowrwTMDs7BsfBrmNYc_GuMprvGyTBwYJ-4PJEwHIbUtMWJ9QjWyQ [3] PrimeNG, "PrimeNG," [Online] Available: https://primeng.org [4] S Boot, "Spring Boot," [Online] Available: https://spring.io/projects/spring-boot [5] N L Victor, "Angular Basics: CanActivate—Introduction to Routing Guards," [Online] Available: https://www.telerik.com/blogs/angular-basics-canactivateintroduction-routing-guards [6] C S f Firebase, "Firebase," [Online] Available: https://firebase.google.com/docs/storage [7] T W API, "The WebSocket API," [Online] Available: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API [8] N C S B, "Giới thiệu tổng quan Angular," [Online] Available: https://viblo.asia/p/gioi-thieu-tong-quan-ve-angular-07LKX9j2ZV4 [9] H Nguyen, "Figma gì?," [Online] Available: https://www.toponseek.com/blogs/figma-la-gi/ [10] N Hưng, "Visual Studio Code gì? Những ưu điểm vượt trội sử dụng Visual Studio Code," [Online] Available: https://vietnix.vn/visual-studio-code-la-gi/ [11] N Hưng, "GitHub gì? Lợi ích GitHub lập trình viên," [Online] Available: https://vietnix.vn/github-lagi/?gad=1&gclid=CjwKCAjwqZSlBhBwEiwAfoZUIHJP6GcpMoGfCvM51jybzoL6bCV9ZhgWkC1xFU0ljFwseGjeoPZXBoCQY8QAvD_BwE [12] Unknown, "Spring Boot gì? Giới thiệu Spring Boot Framework," [Online] Available: https://stackjava.com/spring/spring-boot-la-gi-gioi-thieu-spring-bootframework.html [13] T Tran, "Angular Authentication: Sử dụng Route Guards," [Online] Available: https://viblo.asia/p/angular-authentication-su-dung-route-guards-Ljy5Vqaolra 74