KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG MẠNG XÃ HỘI KẾT NỐI TÌNH NGUYỆN

ĐẠ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 PHAN THANH HỒNG TRẦN ĐÌNH THIỆN KHĨA LUẬN TỐT NGHIỆP XÂY DỰNG MẠNG XÃ HỘI KẾT NỐI TÌNH NGUYỆN BUILDING A SOCIAL NETWORK CONNECTS VOLUNTEERS KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2021 ĐẠ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 TP HỒ CHÍ MINH, 2021 PHAN THANH HỒNG TRẦN ĐÌNH THIỆN KHĨA LUẬN TỐT NGHIỆP XÂY DỰNG MẠNG XÃ HỘI KẾT NỐI TÌNH NGUYỆN BUILDING A SOCIAL NETWORK CONNECTS VOLUNTEERS KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN TS ĐỖ THỊ THANH TUYỀN ThS HUỲNH HỒ THỊ MỘNG TRINH TP HỒ CHÍ MINH, 2021 THƠNG TIN HỘI ĐỒNG CHẤM KHĨA LUẬN TỐT NGHIỆP Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số …………………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin • • • • ………………………………………… – Chủ tịch ………………………………………… – Thư ký ………………………………………… – Ủy viên ………………………………………… – Ủy viên LỜI CẢM ƠN Để hồn thành khóa luận cách hồn chỉnh, nhóm em nhận nhiều hướng dẫn nhiệt tình q Thầy Cơ Vì vậy, nhóm xin phép gửi lời cảm ơn chân thành Đầu tiên, nhóm em xin chân thành cảm ơn bày tỏ lòng biết ơn sâu sắc đến TS Đỗ Thị Thanh Tuyền, ThS Huỳnh Hồ Thị Mộng Trinh, tận tình bảo, hướng dẫn, truyền đạt kinh nghiệm, kiến thức chuyên mơn tài liệu liên quan để nhóm hồn khóa luận tốt Nhóm xin gởi đến cô lời tri ân điều mà dành cho nhóm Nhóm xin chân thành cảm ơn tồn thể q thầy khoa Cơng Nghệ Phần Mềm tồn thể q thầy Trường Đại Học Công Nghệ Thông Tin TP.HCM Quý thầy ln tận tình truyền đạt kiến thức, kinh nghiệm quý báu tạo điều kiện thuận lợi cho nhóm suốt q trình học tập trường đặc biệt suốt q trình thực khóa luận Sau cùng, nhóm xin kính chúc tồn thể q thầy khoa Công Nghệ Phần Mềm, TS Đỗ Thị Thanh Tuyền, ThS Huỳnh Hồ Thị Mộng Trinh dồi sức khỏe, nhiệt huyết thành công sống sứ mệnh truyền đạt kiến thức cho hệ trẻ mai sau TP Hồ Chí Minh, ngày 25 tháng 12 năm 2021 Sinh viên Sinh viên Phan Thanh Hồng Trần Đình Thiện MỤC LỤC Chương TỔNG QUAN 1.1 Đặt vấn đề 1.2 Các ứng dụng có 1.2.1 Group Facebook “Tặng đồ từ thiện - kết nối yêu thương” 1.2.2 “Zalo Connect” ứng dụng Zalo 1.2.3 Hiến máu 1.2.4 Be My Eyes - Helping the blind 1.2.5 “Ví nhân ái” ứng dụng MoMo 1.2.6 Web Wishare 1.3 Tóm lược 1.4 Mục tiêu 1.5 Phạm vi ứng dụng Chương TỔNG QUAN CÔNG NGHỆ 2.1 React Native, Redux Toolkit, Redux-Saga 2.2.1 React native 2.2.2 Redux Toolkit 2.2.3 Redux-Saga 2.2 NestJs MongoDB 10 2.2.1 NestJs 10 2.2.2 MongoDB 10 2.3 Firebase Cloud Messaging SocketIO 10 2.3.1 Firebase Cloud Messaging 10 2.3.2 SocketIO 11 Chương PHÂN TÍCH THIẾT KẾ ỨNG DỤNG 12 3.1 Phân tích ứng dụng 12 3.1.1 Danh sách yêu cầu hệ thống Use case 12 3.1.2 Sơ đồ hoạt động chức 22 3.2 Thiết kế ứng dụng 29 3.2.1 Thiết kế sở liệu 29 3.2.2 Thiết kế giao diện 37 3.2.3 Thiết kế kiến trúc hệ thống 39 Chương Kết luận 39 4.1 Kết đạt 39 4.2 Thuận lợi, khó khăn hướng phát triển 50 4.2.1 Thuận lợi 50 4.2.2 Khó khăn thách thức 50 4.2.3 Hướng phát triển 50 DANH MỤC HÌNH Hình 1.1: Hình ảnh thống kê “We are social Hootsuite” Hình 2.1: Logo ứng dụng React Native Hình 2.2: Cách hoạt động Redux Toolkit Hình 2.3: Cách hoạt động Redux-Saga Hình 2.4: Các tính Firebase 10 Hình 3.1: Sơ đồ hình liên kết 37 Hình 3.2: Kiến trúc hệ thống 39 Hình 3.3: Kiến trúc tầng API 39 Hình 3.4: Kiến trúc React Native 39 Hình 4.1: Màn hình trang chủ 40 Hình 4.2: Màn hình tạo chiến dịch bước 40 Hình 4.3: Màn hình tạo chiến dịch bước 41 Hình 4.4: Màn hình tạo chiến dịch bước 41 Hình 4.5: Màn hình tìm kiếm 42 Hình 4.6: Màn hình tìm kiếm người dùng 42 Hình 4.7: Màn hình tin 43 Hình 4.8: Màn hình tạo đăng 43 Hình 4.9: Màn hình chiến dịch tham gia 44 Hình 4.10: Màn hình thơng báo 44 Hình 4.11: Màn hình thơng báo kết bạn 45 Hình 4.12: Màn hình kết bạn 45 Hình 4.13: Màn hình nhóm chiến dịch 46 Hình 4.14: Màn hình thành viên nhóm 46 Hình 4.15: Màn hình hiển thị chiến dịch chi tiết 47 Hình 4.16: Màn hình hiển thị chi tiết đăng 47 Hình 4.17: Màn hình hiển thị thời gian biểu chiến dịch 48 Hình 4.18: Màn hình danh sách tin nhắn 48 Hình 4.19: Màn hình trị chuyện 49 Hình 4.20: Trang cá nhân 49 Hình 4.21: Tạo thời gian biểu cho chiến dịch 50 DANH MỤC BẢNG Bảng 1.1: Bảng so sánh chức ứng dụng thiện nguyện Bảng 3.1: Danh sách yêu cầu ứng dụng 12 Bảng 3.2: Bảng danh sách Use case 14 Bảng 3.3: Đặc tả chức đăng nhập 15 Bảng 3.4: Bảng đặc tả chức tạo chiến dịch 16 Bảng 3.5: Đặc tả chức xem danh sách chiến dịch 16 Bảng 3.6: Đặc tả chức xuất Excel 17 Bảng 3.7: Đặc tả chức trao đổi trực tuyến 18 Bảng 3.8: Đặc tả chức đánh giá 19 Bảng 3.9: Đặc tả chức quản lý chiến dịch 20 Bảng 3.10: Đặc tả chức kết nối 20 Bảng 3.11: Đặc tả chức tham gia chiến dịch 21 Bảng 3.12: Danh sách bảng 30 Bảng 3.13: Danh sách thuộc tính bảng User 30 Bảng 3.14: Danh sách thuộc tính bảng User Friend 31 Bảng 3.15: Danh sách thuộc tính bảng User Participate 32 Bảng 3.16: Danh sách thuộc tính bảng Notification 32 Bảng 3.17: Danh sách thuộc tính bảng Conversation 33 Bảng 3.18: Danh sách thuộc tính bảng Message 33 Bảng 3.19: Danh sách thuộc tính bảng Group 34 Bảng 3.20: Danh sách thuộc tính bảng Member 34 Bảng 3.21: Danh sách thuộc tính bảng Activity 34 Bảng 3.22: Danh sách thuộc tính bảng Post 35 Bảng 3.23: Danh sách thuộc tính bảng Comment 36 Bảng 3.24: Bảng danh sách hình với quyền người dùng hệ thống 38 Bảng 3.25: Bảng thành phần kiến trúc tầng API 39 Bảng 3.26: Bảng mô tả kiến trúc tầng React Native 39 DANH MỤC SƠ ĐỒ Sơ đồ 3.1: Sơ đồ Use case 13 Sơ đồ 3.2: Sơ đồ hoạt động mô tả chức tạo nhóm 22 Sơ đồ 3.3: Sơ đồ hoạt động chức tham gia nhóm 23 Sơ đồ 3.4: Sơ đồ hoạt động chức tạo chiến dịch 23 Sơ đồ 3.5: Sơ đồ hoạt động chức tham gia chiến dịch 24 Sơ đồ 3.6: Sơ đồ hoạt động chức mời tham gia chiến dịch 24 Sơ đồ 3.7: Sơ đồ hoạt động chức thêm tình nguyện viên vào ban tổ chức 25 Sơ đồ 3.8: Sơ đồ hoạt động chức đánh giá người tham gia 25 Sơ đồ 3.9: Sơ đồ hoạt động chức xét duyệt người tham gia 26 Sơ đồ 3.10: Sơ đồ hoạt động chức tạo đăng chiến dịch 26 Sơ đồ 3.11: Sơ đồ hoạt động chức tạo đăng nhóm 27 Sơ đồ 3.12: Sơ đồ hoạt động chức xuất excel hoạt động tham gia 27 Sơ đồ 3.13: Sơ đồ thiết kế sở liệu 29 TÓM TẮT KHÓA LUẬN Ngày mạng xã hội trở nên vô phổ biến sử dụng cộng đồng lớn Mạng xã hội có nhiều chức khác nhau, mục đích cốt lõi chia sẻ khoảng khắc đẹp, ý nghĩa câu chuyện mà người dùng muốn cho người hưởng ứng Với năm gần đây, việc vấn đề trở thành xu hướng nhanh chóng (trending), đồng thời mạng xã hội cơng cụ nhanh chóng để truyền đạt tin tức Mạng xã hội chia thành nhiều loại với nhiều mục đích khác Facebook đại diện cho mạng xã hội tin tức, Instagram biến thể mạng xã hội tin tức, liệu hình ảnh Youtube, Tiktok đại diện cho mạng xã hội video kèm theo tính xu hướng (trend) Theo đó, bên cạnh mạng xã lớn trên, có tồn mạng xã hội ngách tập trung vào số lượng nhỏ người dùng có chung sở thích nhận khơng quan tâm cộng đồng Chính thấy mạng xã hội nghách tập trung vào nhóm đối tượng định mà không bị “ông lớn” đè nặng, chúng em xây dựng nên mạng xã hội kết nối tình nguyện viên ứng dụng di động dành riêng cho cá nhân, tổ chức yêu thích hoạt động tình nguyện, thiện nguyện cách áp dụng Nodejs sở liệu mã nguồn mở MongoDB Để thực tốt đề tài này, chúng em tham khảo ứng dụng tình nguyện trang mạng xã hội để xây dựng mạng xã hội kết nối tình nguyện viên dành riêng thị trường Việt Nam Kết thúc đề tài, nhóm chúng em đạt kết quả: - Học sử dụng thành thạo tảng NodeJS - Học sử dụng bên thứ (third party) SocketIO, Firebase Cloud Messaging, Cloud Store - Xây dựng ứng dụng kết nối tình nguyện viên thiết bị di động Mô tả hình sơ đồ: Bảng 3.24: Bảng danh sách hình với quyền người dùng hệ thống STT Tên Mô tả Đăng nhập Thực chức đăng nhập, có hỗ trợ xác thực tài khoản email + số điện thoại Trang cá nhân Hiển thị thông tin cá nhân, đăng cá nhân Cài đặt thông báo Cài đặt nhận thông báo từ hệ thống Quản lý thông tin tài khoản Hiển thị thông tin người dùng hệ thống, cho phép người dùng chỉnh sửa thông tin Trang chủ Hiển thị thông tin tất chiến dịch gần bạn Tạo chiến dịch Hiển thị hình tạo chiến dịch Chiến dịch chi tiết Hiển thị chi tiết đầy đủ chiến dịch số lượng người tham gia, mô tả, thời gian biểu, … Mời người tham gia chiến dịch Mời bạn bè tham gia vào chiến dịch Và đánh giá người tham gia Cho phép người tham gia làm ban quản trị Những bạn bè tham gia mời họ làm ban quản trị 10 Mời bạn bè tham gia chiến dịch Mời bạn bè tham gia vào chiến dịch Và đánh giá người tham gia 11 Thời gian biểu Bảng biểu thời gian hoạt động chiến dịch, thông báo tới người dùng hoạt động diễn 12 Tạo thời gian biểu Hiển thị hình tạo thời gian biểu dành cho chủ chiến dịch 13 Tạo đăng chiến dịch Tạo đăng hình chi tiết chiến dịch 14 Hoạt động nhóm Danh sách hình nhóm bên chiến dịch 15 Tạo đăng nhóm Tạo đăng hình nhóm 16 Quản lý thành viên nhóm Hiển thị thơng tin thành viên nhóm 17 Bản tin Hiển thị đăng từ chiến dịch nhóm 38 18 Bài đăng chi tiết Hiển thị phần bình luận từ người 19 Thơng báo Hiển thị tất thông báo từ hệ thống 20 Lời mời kết bạn Hiển thị lời mời kết bạn 21 Yêu cầu tham gia chiến Hiển thị yêu cầu tham gia chiến dịch dịch 22 Yêu cầu tham gia nhóm Hiển thị yêu cầu tham gia nhóm 23 Hoạt động tham gia Hiển thị hoạt động tham gia phần đánh giá từ ban quản trị 24 Xuất excel Xuất tất thông tin từ hình excel 25 Tìm kiếm Màn hình tìm kiếm với lọc phần từ khố 26 Tìm kiếm viết Tìm kiếm viết với lọc viết từ khố 27 Tìm kiếm người dùng Tìm kiếm viết với lọc người từ khoá 3.2.3 Thiết kế kiến trúc hệ thống Chương Kết luận 4.1 Kết đạt Tìm hiểu ứng dụng kiến thức liên quan để xây dựng hệ thống mạng xã hội kết nối thiện nguyện Hiểu rõ lý thuyết để vận dụng xây dựng hệ thống tảng android Vận dụng kiến thức học, sử dụng thành thạo công cụ thư viện React Native, NestJs, Firebase, SocketIO, Hiểu vận dụng quy trình phát triển hệ thống phần mềm từ bước ban đầu Qua quản lý phân chia công việc rõ ràng, tiết kiệm thời gian đảm bảo ứng dụng phát triển hướng với mục tiêu đề Tìm hiểu vận dụng chức nghiệp vụ việc thiện nguyện mạng xã hội Từ kết hợp lại để phát triển mạng xã hội dành riêng cho việc thiện nguyện Hiện thực chức đề giải vấn đề phía ban tổ chức thiện nguyện vấn đề tình nguyện viên, để từ giúp cho việc thiện nguyện ngày hiệu Bên cạnh đó, hệ thống giúp cho bạn tình nguyện viên dễ dàng tìm kiếm thông tin chiến dịch diễn gần 39 với nơi bạn, hỗ trợ ban tổ chức việc quản lý vấn đề người thời gian chiến dịch Hình 4.1: Màn hình trang chủ Hình 4.2: Màn hình tạo chiến dịch bước 40 Hình 4.3: Màn hình tạo chiến dịch bước Hình 4.4: Màn hình tạo chiến dịch bước 41 Hình 4.5: Màn hình tìm kiếm Hình 4.6: Màn hình tìm kiếm người dùng 42 Hình 4.7: Màn hình tin Hình 4.8: Màn hình tạo đăng 43 Hình 4.9: Màn hình chiến dịch tham gia Hình 4.10: Màn hình thơng báo 44 Hình 4.11: Màn hình thơng báo kết bạn Hình 4.12: Màn hình kết bạn 45 Hình 4.13: Màn hình nhóm chiến dịch Hình 4.14: Màn hình thành viên nhóm 46 Hình 4.15: Màn hình hiển thị chiến dịch chi tiết Hình 4.16: Màn hình hiển thị chi tiết đăng 47 Hình 4.17: Màn hình hiển thị thời gian biểu chiến dịch Hình 4.18: Màn hình danh sách tin nhắn 48 Hình 4.19: Màn hình trị chuyện Hình 4.20: Trang cá nhân 49 Hình 4.21: Tạo thời gian biểu cho chiến dịch 4.2 Thuận lợi, khó khăn hướng phát triển 4.2.1 Thuận lợi Những thuận lợi q trình thực hiện: - Nhờ có kiến thức môn học trước nên việc tiếp cận đồ án dễ dàng nhanh chóng - React Native, MongoDB thư viện mở rộng liên quan đáp ứng đủ tính đề - Thành viên nhóm có khả tự học tìm hiểu nhanh 4.2.2 Khó khăn thách thức Bên cạnh thuận lợi nhóm gặp nhiều khó khăn như: - Do tình hình dịch bệnh trình phức tạp nên phần lớn nhóm làm việc độc lập từ phát sinh nhiều suy nghĩ khác hướng xử lý vấn đề - Khó khăn mặt cơng nghệ, có thư viện React Native cần version android để thư viện chạy được, thân thư viện đơi có bug khiến cho trình phát triển ứng dụng tốn thêm thời gian 4.2.3 Hướng phát triển Mặc dù hệ thống có chức mạng xã hội việc thiện nguyện, nhiên chức mức Trong tương lai nhóm 50 tiếp tục phát triển hoàn thiện chức có thêm vào số chức đồng thời mở rộng ứng dụng qua môi trường iOS môi trường web 51 TÀI LIỆU THAM KHẢO Tài liệu tiếng Việt [1] RESTful API: “RESTful API gì? Cách thiết kế RESTful API”, https://topdev.vn/blog/restful-api-la-gi/, https://jsonapi.org/ Tài liệu tiếng Anh [1] Fontawesome: “Fontawesome docs”, https://fontawesome.com/ [2] JSON: “JSON with Ajax”, https://www.tutorialspoint.com/json/json_ajax_example.htm [3] Git Tutorial: “Learn GIT simply easy learning”, https://www.tutorialspoint.com/git/index.htm [4] MongoDB: “MongoDB Node Driver”, https://docs.mongodb.com/drivers/node/current/ [5] NodeJS: “”NodeJS docs”, https://nodejs.org/en/docs/ [6] Postman:” Use Postman to test API calls”, https://developer.mypurecloud.com/api/rest/postman/index.html [7] SocketIO: “SocketIO docs”, https://socket.io/ [8] React Native: “React native docs”, https://reactnative.dev/ [9] React native element: “React native elements docs”, https://reactnativeelements.com/ [10] React navigation: “React navigation docs”, https://reactnavigation.org/docs/bottom-tab-navigator/ 52 ... động tình nguyện, thiện nguyện cách áp dụng Nodejs sở liệu mã nguồn mở MongoDB Để thực tốt đề tài này, chúng em tham khảo ứng dụng tình nguyện trang mạng xã hội để xây dựng mạng xã hội kết nối tình. .. tình nguyện viên tổ chức tình nguyện dễ dàng kết nối, trao đổi với Vì việc ứng dụng công nghệ vào việc xây dựng mạng xã hội để kết nối tình nguyện viên, tổ chức tình nguyện nhà hảo tâm hỗ trợ khắc... CÔNG NGHỆ PHẦN MỀM TP HỒ CHÍ MINH, 2021 PHAN THANH HỒNG TRẦN ĐÌNH THIỆN KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG MẠNG XÃ HỘI KẾT NỐI TÌNH NGUYỆN BUILDING A SOCIAL NETWORK CONNECTS VOLUNTEERS KỸ SƯ NGÀNH KỸ