Đồ án nghiên cứu và xây dựng website hỗ trợ gây quỹ cộng đồng

ĐẠ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 BÁO CÁO ĐỒ ÁN ĐỀ TÀI NGHIÊN CỨU VÀ XÂY DỰNG WEBSITE HỖ TRỢ GÂY QUỸ CỘNG ĐỒNG Giảng viên hướng dẫn: Nguyễn Tấn Toàn Sinh viên thực hiện: Lê Phi Long 20520621 Nguyễn Đình Đức Thịnh 20520782 TP Hồ Chí Minh, tháng năm 2023 BÁO CÁO ĐỒ ÁN LỜI CẢM ƠN Trong sống chúng ta, có lẽ thất bại thành cơng, dù kết nỗ lực cá nhân tập thể Và đằng sau hỗ trợ giúp đỡ từ người Xét mặt thành công, thực tế khơng có thành cơng mà khơng có giúp đỡ, học tập Dân gian ta có câu “Khơng thầy đố mày làm nên” thật đúng, học sinh thành cơng khơng có giúp đỡ, truyền đạt bảo tận tình người Thầy Hơm nay, để hồn thành đồ án mơn học này, nhóm chúng em biết ơn thầy hỗ trợ tận tình, cung cấp cho chúng em nhiều kiến thức kinh nghiệm người trước, lời chúng em xin cảm ơn tập thể cán bộ, giảng viên trường Đại học Công Nghệ Thơng Tin – ĐHQG Tp Hồ Chí Minh, nơi mà chúng em tự nghiên cứu có thêm nhiều kiến thức Với lịng biết ơn sâu sắc nhất, nhóm chúng em xin gửi đến quý Thầy Cô Khoa Công nghệ phần mềm – Trường Đại Học Công Nghệ Thông Tin với tri thức tâm huyết để truyền đạt vốn kiến thức quý báu cho chúng em suốt thời gian học tập trường Trong có thầy Nguyễn Tấn Toàn, thầy cung cấp cho chúng em định hướng đề tài hấp dẫn, tạo tiền đề động lực cho chúng em tìm hiểu cơng nghệ mới, bổ ích q trình nghiên cứu phát triển website, kinh nghiệm quý báu trải nghiệm người dùng nghiệp vụ Ngoài ra, để đồ án hồn thành khơng thể khơng cảm ơn người làm đó, cảm ơn bạn thành viên nhóm chăm chịu khó hồn thành nhiệm vụ tiến độ Với giúp đỡ, cuối nhóm hồn thành đồ án có tên: “Nghiên cứu xây dựng website hỗ trợ gây quỹ cộng đồng” Trải qua thời gian học đề tài Với hướng dẫn tận tình đóng góp q báu thầy bạn giúp chúng em hoàn thành tốt báo cáo mơn học Bên cạnh việc vận dụng kiến thức học lớp đồng thời kết hợp với việc học hỏi tìm hiểu kiến thức Từ đó, nhóm vận dụng tối đa tiếp thu để hoàn thành báo cáo đồ án tốt Tuy nhiên, q trình thực hiện, khơng tránh khỏi sai sót Dó đó, mong nhận góp ý từ phía thầy nhằm BÁO CÁO ĐỒ ÁN giúp nhóm hồn thiện kiến thức học tập hành trang để nhóm thực tiếp đề tài khác tương lai Xin chân thành cảm ơn thầy bạn! Trân trọng cảm ơn Thành phố Hồ Chí Minh, tháng năm 2023 Nhóm sinh viên thực BÁO CÁO ĐỒ ÁN NHẬN XÉT CỦA GIẢNG VIÊN ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… BÁO CÁO ĐỒ ÁN MỤC LỤC LỜI CẢM ƠN NHẬN XÉT CỦA GIẢNG VIÊN MỤC LỤC TÓM TẮT ĐỀ TÀI HƯỚNG TIẾP CẬN VÀ PHƯƠNG PHÁP GIẢI QUYẾT 1 Giai đoạn phân tích nghiên cứu: Giai đoạn thiết kế Giai đoạn cài đặt kiểm thử Giai đoạn xuất KẾT QUẢ ĐẠT ĐƯỢC MỞ ĐẦU 1.1 Lý chọn đề tài 1.1.1 Các hình thức gây vốn doanh nghiệp 1.1.2 Hình thức gây quỹ cộng đồng 1.1.3 Một số thiếu sót tảng gây vốn cộng đồng 1.2 Mục đích đề tài 1.3 Đối tượng phạm vi nghiên cứu 1.3.1 Đối tượng sử dụng 1.3.2 Phạm vi nghiên cứu 10 TỔNG QUAN 10 2.1 Phân tích trang web gây vốn cộng đồng 10 2.1.1 Kickstarter.com 10 2.1.2 RocketHub.com 11 2.1.3 Gofundme.com 12 2.2 Phân tích vấn đề hạn chế trang web gây vốn cộng đồng 13 BÁO CÁO ĐỒ ÁN 2.2.1 Ưu điểm 13 2.2.2 Nhược điểm 14 2.3 Những yêu cầu cần giải trang web đồ án hướng đến 14 2.4 Tổng quan yêu cầu hệ thống 15 2.4.2 Yêu cầu phi chức .16 2.4.2.1 Yêu cầu giao diện .16 2.4.2.2 Yêu cầu độ tin cậy, bảo mật 16 2.4.2.3 Yêu cầu độ tương thích 16 2.4.2.4 Yêu cầu khả mở rộng 16 2.4.2.5 Yêu cầu tính hiệu 16 2.5 Phương pháp phát triển 16 NGHIÊN CỨU CƠ SỞ LÝ THUYẾT 17 3.1 Quy trình phát triển phần mềm Scrum 17 3.1.1 Tổng quan Scrum .17 3.1.2 Ưu điểm nhược điểm Scrum 19 3.1.2.1 Ưu điểm 19 3.1.2.2 Nhược điểm 20 3.1.3 Lý cho chọn quy trình phát triển phần mềm Scrum 20 3.2 Phương pháp phân tích thiết kế hướng đối tượng 20 3.2.1 Cách tiếp cận 20 3.2.2 tượng Ưu điểm nhược điểm phương pháp phân tích thiết kế hướng đối 22 3.2.2.1 Ưu điểm 22 3.2.2.2 Nhược điểm 22 3.2.3 Lý chọn phương pháp phân tích thiết kế hướng đối tượng .22 3.3 Các tảng công nghệ sử dụng 22 3.3.1 ReactJS .22 3.3.2 NodeJS 24 3.3.3 ExpressJS 26 BÁO CÁO ĐỒ ÁN 3.3.4 Stripe 27 3.3.5 JSON Web Tokens 29 3.3.6 MongoDB 30 3.3.7 Styled-Component 32 3.3.8 React-Router .34 3.3.9 Socket.IO 36 3.4 Chiến lược “Thiên chúa ngôi” phương pháp SEO 38 3.4.1 Xây dựng chiến lược phát triển “Thiên chúa ngôi” cho Happy Fund 38 3.4.1.1 Chi phí hoa hồng ln rẻ 38 3.4.1.2 Phản hồi nhanh chóng 39 3.4.1.3 FulFill By Happy Fund (FBHF) 39 3.4.2 Phương pháp SEO 40 TRÌNH BÀY KẾT QUẢ 41 4.1 Xây dựng hệ thống 41 4.1.1 Kiến trúc hệ thống MVC 41 4.1.2 Mô tả thành phần hệ thống .42 4.1.2.1 Models 42 4.1.2.2 Views 43 4.1.2.3 Controller 43 4.1.2.4 Thành phần tối ưu hóa SEO .43 4.2 Đặc tả hệ thống 44 4.2.1 Sơ đồ Use-case 45 4.2.2 Sơ đồ Activity 45 4.2.2.1 Sơ đồ Activity cho Use-case Đăng nhập 45 4.2.2.2 Sơ đồ Activity cho Use-case Quản lý dự án 46 4.2.2.3 Sơ đồ Activity cho Use-case Quản lý toán 48 4.2.2.4 Sơ đồ Activity cho Use-case Quản lý người dùng 49 4.2.2.5 Sơ đồ Activity cho Use-case Quản lý liên hệ 50 4.2.2.6 Sơ đồ Activity cho Use-case Đăng kí 51 4.2.2.7 Sơ đồ Activity cho Use-case Xác thực thông tin .51 BÁO CÁO ĐỒ ÁN 4.2.2.8 Sơ đồ Activity cho Use-case Quản lý dự án cá nhân 52 4.2.2.9 Sơ đồ Activity cho Use-case Xem dự án 54 4.2.2.10 Sơ đồ Activity cho Use-case Đánh giá bình luận .55 4.2.2.11 Sơ đồ Activity cho Use-case Ủng hộ dự án .55 4.2.3 Sơ đồ Sequence 56 4.2.3.1 Sơ đồ Sequence cho Use-case Đăng nhập 56 4.2.3.2 Sơ đồ Sequence cho Use-case Quản lý dự án 57 4.2.3.3 Sơ đồ Sequence cho Use-case Quản lý toán 59 4.2.3.4 Sơ đồ Sequence cho Use-case Quản lý người dùng 59 4.2.3.5 Sơ đồ Sequence cho Use-case Quản lý liên hệ 61 4.2.3.6 Sơ đồ Sequence cho Use-case Đăng kí 61 4.2.3.7 Sơ đồ Sequence cho Use-case Xác thực thông tin .62 4.2.3.8 Sơ đồ Sequence cho Use-case Quản lý dự án cá nhân 63 4.2.3.9 Sơ đồ Sequence cho Use-case Xem dự án 65 4.2.3.10 Sơ đồ Sequence cho Use-case Đánh giá bình luận .65 4.2.3.11 Sơ đồ Sequence cho Use-case Ủng hộ dự án 66 4.2.4 Sơ đồ Class .67 4.2.4.1 Sơ đồ Class hoàn chỉnh 67 4.2.4.2 Mô tả thành phần có sơ đồ 68 4.2.4.3 Mô tả chi tiết thành phần có sơ đồ .69 4.3 Thiết kế hệ thống 72 4.3.1 Sơ đồ hình 73 4.3.2 Sơ đồ thiết kế chi tiết hình .75 KẾT LUẬN 95 5.1 Kết đạt 95 5.2 Đóng góp đề xuất 95 HƯỚNG PHÁT TRIỂN 96 TÀI LIỆU THAM KHẢO 97 PHỤ LỤC 98 BÁO CÁO ĐỒ ÁN PHỤ LỤC 1: DANH MỤC BẢNG 98 PHỤ LỤC 2: DANH MỤC HÌNH ẢNH 98 BÁO CÁO ĐỒ ÁN TÓM TẮT ĐỀ TÀI Xã hội công nghệ ngày phát triển tạo điều kiện cho nhiều doanh nghiệp lớn nhỏ với dự án kèm phát triển theo Trong trình phát triển dự án doanh nghiệp, họ cần số vốn từ nhà đầu tư, gây vốn xã hội hóa hình thức gây vốn ưa chuộng thời gian gần Các trang web hỗ trợ gây vốn cộng đồng trở thành công cụ quan trọng cho dự án, tổ chức cá nhân muốn thu hút quan tâm ủng hộ tài từ cộng đồng Tuy nhiên, việc xây dựng trang web hiệu thu hút quan tâm đại chúng đòi hỏi kiến thức thiết kế giao diện hấp dẫn, nội dung thuyết phục phương pháp quảng bá HƯỚNG TIẾP CẬN VÀ PHƯƠNG PHÁP GIẢI QUYẾT Để giải vấn đề này, nhóm tập trung vào khía cạnh sau đây: Giai đoạn phân tích nghiên cứu: Sử dụng phân tích theo hướng đối tượng, giúp tối ưu q trình phân tích đồng thời đưa nhận định đắn chức trang web, giúp việc phát triển theo mơ hình Agile trở nên dễ dàng tính mở rộng hiệu mà phương pháp mang lại Nghiên cứu hình thức gây vốn tìm thấy hiệu gây vốn cộng đồng Đồng thời q trình đó, nhóm cịn tìm hiểu q trình hoạt động trang web gây vốn cộng đồng khác để làm tư liệu, tiền đề cho trực quan hóa đề tài Phân tích, nghiên cứu vấn đề pháp lý liên quan để đảm bảo trang web xuất thu hút cộng đồng người tham gia cách hiệu nhất, tránh rườm rà pháp lý gây trở ngại cho người dùng Giai đoạn thiết kế BÁO CÁO ĐỒ ÁN 1 Hình 4.17 Giao diện Dự án – Đã ủng hộ BÁO CÁO ĐỒ ÁN 85 Hình 4.18 Giao diện Dự án – Đánh giá BÁO CÁO ĐỒ ÁN 86 Hình 4.19 Giao diện Thêm dự án BÁO CÁO ĐỒ ÁN 87 Hình 4.20 Giao diện cập nhật tiến độ dự án BÁO CÁO ĐỒ ÁN 88 Hình 4.21 Giao diện chỉnh sửa dự án BÁO CÁO ĐỒ ÁN 89 Hình 4.22 Giao diện Trang chủ Admin Hình 4.23 Giao diện Quản lý người dùng - Admin BÁO CÁO ĐỒ ÁN 90 Hình 4.24 Giao diện quản lý dự án - Admin Hình 4.25 Giao diện Quản lý toán - Admin BÁO CÁO ĐỒ ÁN 91 Hình 4.26 Giao diện quản lý dự án chờ - Admin Hình 4.27 Giao diện quản lý người dùng – chi tiết BÁO CÁO ĐỒ ÁN 92 Hình 4.28 Giao diện quản lý dự án – chi tiết – Admin Hình 4.29 Giao diện Thêm dự án – Admin BÁO CÁO ĐỒ ÁN 93 Hình 4.30 Giao diện thêm người dùng – Admin Hình 4.31 Giao diện tốn BÁO CÁO ĐỒ ÁN 94 KẾT LUẬN 5.1 Kết đạt - Xây dựng phân tích hồn thiện hệ thống, xây dựng thiết kế hoàn thiện hệ thống - Nghiên cứu khái quát tìm ưu điểm, nhược điểm Website gây quỹ cộng đồng thị trường, từ tìm lợi cạnh tranh sản phẩm - Xây dựng chiến lược cạnh tranh “Thiên chúa ngôi”, xây dựng tảng gây quỹ cộng đồng - Xây dựng website với tính theo phân tích thiết kế - Tiến hành kiểm thử đơn vị kiểm thử hệ thống cho chức sửa chữa số lỗi - Có thêm kiến thức lập trình website, thiết kế giao diện người dùng, kiến thức tảng ReactJS, NodeJS, Socket, Cơ sở liệu không quan hệ MongoDB, - Có thêm kĩ làm việc nhóm, kĩ phân tích giải vấn đề, kĩ quản lý dự án bản, - Ứng dụng môn học khác vào đồ án Phân tích thiết kế hướng đối tượng, Cơng nghệ Web ứng dụng, Thương mại Điện tử, 5.2 Đóng góp đề xuất - Xây dựng website gây quỹ cộng đồng với hoa hồng rẻ, tiện dụng, tích hợp thêm chức người dùng, nhắn tin, - Tăng cường trải nghiệm người dùng với chiến lược “Thiên chúa ngơi” - Góp phần phát triển thị phần doanh nghiệp đại, tạo công cụ cho dự án non trẻ có tiềm phát triển BÁO CÁO ĐỒ ÁN 95 - Cung cấp khả tương tác xã hội mạnh mẽ: Đề xuất tích hợp tính tương tác xã hội bình luận, đánh giá chia sẻ ý kiến Điều tạo điều kiện cho người dùng thảo luận, chia sẻ ý kiến tạo tương tác tích cực cộng đồng gây quỹ - Cải tiến quy trình quản lý dự án: Đề xuất cải tiến quy trình quản lý dự án cách cung cấp công cụ quản lý dự án linh hoạt dễ sử dụng Điều giúp người dùng tạo quản lý chiến dịch gây quỹ cách hiệu hơn, từ việc thiết lập mục tiêu, theo dõi tiến độ, định lịch công việc báo cáo phân tích kết HƯỚNG PHÁT TRIỂN - Phát triển thêm nhiều hình thức tốn điện tử Momo, VN-QR, Thẻ ngân hàng nội địa, - Xuất phát triển SEO cho trang web, đẩy trang web lên top cơng cụ tìm kiếm Google, Cốc cốc, Yahoo, Bing, - Phát triển trang web trở thành mạng xã hội chủ dự án, nơi họ tìm kiếm chia sẻ với nhau, tạo cộng đồng chủ dự án thực sự, nơi họ chia sẻ bày tỏ quan điểm cập nhật trạng thái cá nhân, - Tích hợp chatbot thuật toán tối ưu mạng xã hội để đề xuất tốt dự án cho cộng đồng người dùng BÁO CÁO ĐỒ ÁN 96 TÀI LIỆU THAM KHẢO https://react.dev/learn https://recharts.org/en-US/guide https://www.youtube.com/@WebDevSimplified https://socket.io/docs/v4/ https://axios-http.com/docs/intro https://firebase.google.com/docs https://stripe.com/docs/stripe-js/react https://github.com/rt2zz/redux-persist https://styled-components.com/docs 10 https://github.com/hustcc/timeago.js/ 11 https://fontawesome.com/docs 12 https://mui.com/material-ui/getting-started/ 13 https://reactrouter.com/en/main/start/tutorial 14 https://www.youtube.com/@Fireship BÁO CÁO ĐỒ ÁN 97 PHỤ LỤC PHỤ LỤC 1: DANH MỤC BẢNG Bảng 4.1 Mô tả thành phần sơ đồ lớp 69 Bảng 4.2 Mô tả chi tiết thành phần sơ đồ lớp 72 PHỤ LỤC 2: DANH MỤC HÌNH ẢNH Hình 2.1 Website gây vốn cộng đồng Kickstarter 11 Hình 2.2 Website gây vốn cộng đồng RocketHub 12 Hình 2.3 Website gây vốn cộng đồng Gofundme.com 13 Hình 3.1 Mơ hình phát triển phần mềm SCRUM 18 Hình 3.2 Logo ReactJS 24 Hình 3.3 Logo NodeJS 25 Hình 3.4 Logo ExpressJS 27 Hình 3.5 Nền tảng toán Stripe 29 Hình 3.6 Logo hệ quản trị sở liệu MongoDB 32 Hình 3.7 Logo Styled-Component 34 Hình 3.8 Logo React Router 36 Hình 3.9 Logo Socket.IO 38 Hình 4.1 Mơ hình MVC 41 Hình 4.2 Sơ đồ Use-case cho hệ thống Happy Fund .45 Hình 4.3.1 Sơ đồ hệ thống hình cho Người dùng .73 Hình 4.3.2 Sơ đồ hệ thống hình cho Admin 74 Hình 4.4 Giao diện trang chủ 75 Hình 4.5 Giao diện đăng nhập 76 Hình 4.6 Giao diện đăng kí 76 Hình 4.7 Giao diện Quản lý dự án 77 Hình 4.8 Giao diện Quản lý dự án kèm chức lọc 78 Hình 4.9 Giao diện liên hệ chủ website 79 Hình 4.10 Giao diện Quản lý dự án - admin 80 Hình 4.11 Giao diện quản lý tài khoản - .81 BÁO CÁO ĐỒ ÁN 98 Hình 4.12 Giao diện quản lý tài khoản - .81 Hình 4.13 Giao diện quản lý tài khoản - .82 Hình 4.14 Giao diện chatbox 82 Hình 4.15 Giao diện Dự án – Chi tiết 83 Hình 4.16 Giao diện dự án – cập nhật 84 Hình 4.17 Giao diện Dự án – Đã ủng hộ 85 Hình 4.18 Giao diện Dự án – Đánh giá 86 Hình 4.19 Giao diện Thêm dự án .87 Hình 4.20 Giao diện cập nhật tiến độ dự án .88 Hình 4.21 Giao diện chỉnh sửa dự án .89 Hình 4.22 Giao diện Trang chủ Admin .90 Hình 4.23 Giao diện Quản lý người dùng - Admin 90 Hình 4.24 Giao diện quản lý dự án - Admin 91 Hình 4.25 Giao diện Quản lý toán - Admin 91 Hình 4.26 Giao diện quản lý dự án chờ - Admin 92 Hình 4.27 Giao diện quản lý người dùng – chi tiết 92 Hình 4.28 Giao diện quản lý dự án – chi tiết – Admin 93 Hình 4.29 Giao diện Thêm dự án – Admin 93 Hình 4.30 Giao diện thêm người dùng – Admin 94 Hình 4.31 Giao diện tốn .94 BÁO CÁO ĐỒ ÁN 99