Khóa luận tốt nghiệp mạng xã hội hẹn hò

ĐẠ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 NGƠ ĐỨC QUANG HỒNG THÙY TRANG KHĨA LUẬN TỐT NGHIỆP MẠNG XÃ HỘI HẸN HÒ SOCIAL NETWORKING FOR DATING 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 NGƠ ĐỨC QUANG – 16520995 HỒNG THÙY TRANG – 16521277 KHĨA LUẬN TỐT NGHIỆP MẠNG XÃ HỘI HẸN HỊ SOCIAL NETWORKING FOR DATING KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS HUỲNH NGUYỄN KHẮC HUY 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 LỜI CẢM ƠN Sau năm học tập rèn luyện Trường Đại học Công nghệ Thông tin, tận tình giảng dạy giúp đỡ quý thầy cô, đặc biệt quý thầy cô khoa Công nghệ Phần mềm, chúng em gặt hái nhiều kiến thức tảng bổ ích, áp dụng vào luận văn áp dụng chặng đường sau Chúng em xin chân thành cảm ơn quý thầy cô trường Đại học Cơng nghệ Thơng tin nói chung, q thầy khoa Cơng nghệ Phần mềm nói riêng, đặc biệt thầy Huỳnh Nguyễn Khắc Huy tận tình hướng dẫn đóng góp ý kiến để chúng em hồn thành khóa luận cách tốt Bên cạnh đó, nhóm xin gửi lời cảm ơn đến bạn lớp có lời góp ý, động viên để nhóm có thêm động lực thực khóa luận khoảng thời gian khó khăn Trong trình thực đề tài Chúng em sử dụng kiến thức tảng tích lũy từ việc học trường đồng thời kết hợp với trình học hỏi nghiên cứu kiến thức nhằm hồn thành khóa luận tốt nghiệp cách tốt Tuy nhiên, trình thực chúng em tránh khỏi thiếu sót Vì vậy, chúng em mong nhận đóng góp q báu từ q Thầy Cơ nhằm hồn thiện kiến thức mà chúng em học tập suốt năm đại học Đó hành trang để tác giả thực tiếp đề tài tương lai Sau cùng, nhóm em xin kính chúc q Thầy/ Cô thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Thành phố Hồ Chí Minh, ngày 15 tháng 01 năm 2021 Ngơ Đức Quang Hồng Thùy Trang ĐỀ CƯƠNG CHI TIẾT ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH Cộng hòa Xã hội Chủ nghĩa Việt Nam TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN Độc lập - Tự – Hạnh phúc KHOA CÔNG NGHỆ PHẦN MỀM - TÊN ĐỀ TÀI: MẠNG XÃ HỘI HẸN HÒ Giảng viên hướng dẫn: ThS Huỳnh Nguyễn Khắc Huy Thời gian thực hiện: Từ ngày 07/09/2020 đến ngày 15/01/2021 Sinh viên thực hiện: Ngơ Đức Quang - 16520995, Hồng Thùy Trang - 16521277 Nội dung đề tài: Hiện với phát triển internet mạng xã hội, người có thêm phương tiện để giao tiếp, trao đổi, chia sẻ thơng tin, hình ảnh video lúc nơi mà không bị cản trở yếu tố không gian địa lý Bên cạnh hẹn hị trực tuyến lên giúp cho việc tìm kiếm người yêu trở lên thuận tiện lúc hết, hẹn hò trực tuyến giúp tiết kiệm thời gian công sức, gặp gỡ người hoàn toàn mới, cách để tìm hiểu trước đối phương xem có hợp với thân không Trong phạm vi đề tài nhóm chúng em định xây dựng mạng xã hội cho giới trẻ nhằm hỗ trợ người dùng kết nối, kết đôi với Phương pháp: Làm việc theo nhóm, bám theo kế hoạch đặt ra, họp nhóm lần tuần, báo cáo hàng tuần Kết mong đợi: Xây dựng thành công mạng xã hội cho giới trẻ với tính như: Người dùng dễ dàng tìm kiếm theo dõi người dùng, người bạn đời, bạn tình, hẹn bình thường, đối tượng hẹn hị phù hợp với Người dùng bắt đầu tìm kiếm kết nối với nhiều đối tượng phù hợp gần khu vực bạn sống nơi đâu, họ cần chọn khoảng cách giới hạn độ tuổi người muốn kết bạn Người dùng nhắn tin, call, đăng bài, bình luận, chia sẻ thơng tin, theo dõi người dùng Kế hoạch thực hiện: Đề tài thực vòng 15 tuần, với nội dung thời gian cụ thể sau: ST T Nội dung thực Thời gian thực Phân tích nghiệp vụ: Nghiên cứu, tìm hiểu u cầu tốn giải pháp liên 07/09/2020 - 13/09/2020 quan Nghiên cứu: Tìm hiểu graphql, Django, Rust Golang, mysql, Reactjs, 14/09/2020 – 20/09/2020 Redux, Typescript Phân tích, thiết kế, lên kế hoạch: 21/09/2020 Phân tích tốn, thiết kế giao diện, sở liệu 05/10/2020 – Xây dựng: - Xây dựng sở liệu: mysql - Back-end: GraphQL, Python/Django, Rust, Golang 06/10/2020 30/11/2020 - Front-end: Reactjs + Redux + Typescript Các bước thực hiện: – - Xây dựng modules CRM (Customer Relationship Management) quản lý nghiệp vụ người dùng mạng xã hội - Xây dựng modules Chat management quản lý tương tác trò chuyện người dùng trực tuyến - Xây dựng modules Dating quản lý nghiệp vụ match user theo yêu cầu kết bạn người dùng 01/12/2020 Kiểm thử: 27/12/2020 Viết báo cáo: Tổng kết hoàn thiện toàn nội dung cho 28/12/2021 báo cáo cuối kỳ – 15/01/2021 Xác nhận GVHD TP.HCM, ngày 26 tháng năm 2020 (ký ghi rõ họ tên) (ký ghi rõ họ tên) GVHD GVH SV1 SV2 D2 ThS Huỳnh Nguyễn Khắc Huy – Ngô Đức Quang Hồng Thùy Trang MỤC LỤC TĨM TẮT KHĨA LUẬN CHƯƠNG 1: MỞ ĐẦU .2 1.1 Dẫn nhập 1.2 Mục tiêu .2 1.3 Đối tượng 1.4 Nội dung thực .3 1.5 Phạm vi hệ thống 1.6 Kết dự kiến CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 FrontEnd 2.1.1 NextJS 2.1.2 ReactJS 2.1.3 TypeScript 2.2 BackEnd 2.1.4 Python Django 2.1.5 ExpressJS 10 2.3 Kiến trúc Microservice 11 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ 15 3.1 Phân tích thiết kế hệ thống 15 3.1.1 Các tác nhân hệ thống 15 3.1.2 Các Chức hệ thống 16 3.1.3 Biểu đồ usecase 22 a) Biểu đồ usecase toàn hệ thống 22 b) Biểu đồ usecase user 23 c) Biểu đồ usecase admin 24 d) Đặc tả usecase 24 3.1.4 Biểu đồ sequence 33 a) Biểu đồ sequence đăng nhập 33 b) Biểu đồ sequence đăng ký 34 c) Biểu đồ sequence Thay đổi mật 35 d) Biểu đồ sequence quên mật 36 e) Biểu đồ sequence Story 37 f) Biểu đồ sequence đăng 38 g) Biểu đồ sequence tương tác đăng 39 h) Biểu đồ sequence theo dõi người dùng 39 i) Biểu đồ sequence trò chuyện 40 j) Biểu đồ sequence gọi thoại 41 k) Biểu đồ sequence hẹn hò 42 l) Biểu đồ sequence chỉnh sửa thông tin cá nhân 43 3.2 Thiết kế sở liệu 44 3.2.1 Tổng quan sở liệu 45 3.3 Thiết kế giao diện 54 3.3.1 Thiết kế giao diện figma 54 3.3.2 Danh sách hình 55 3.3.3 Mơ tả chi tiết hình 56 a) Giao diện đăng ký 56 b) Giao diện quên mật 58 c) Giao diện đăng nhập 59 d) Giao diện trang chủ 60 e) Giao diện Chi tiết đăng 63 f) Giao diện thông tin cá nhân 65 g) Giao diện thông báo 70 h) Giao diện trò chuyện 71 i) Giao diện tìm kiếm trò chuyện 73 j) Giao diện story 74 k) Giao diện hẹn hò 75 l) Giao diện smart chat 76 m) Giao diện matching 77 n) Giao diện xem thông tin tài khoản gợi ý hẹn hò 78 CHƯƠNG 4: XÂY DỰNG VÀ CÀI ĐẶT CHƯƠNG TRÌNH 79 4.1 Cài đặt môi trường 79 - Yêu cầu: 79 4.2 Cài đặt sở liệu 79 4.3 Cài đặt backend 79 4.4 Cài đặt frontend 79 CHƯƠNG 5: ĐÁNH GIÁ, KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 80 5.1 Nhận xét Đánh giá 80 5.2 Tổng kết 81 5.3 Hướng phát triển 81 TÀI LIỆU THAM KHẢO 82 Người dùng bấm chọn để tiến hành cài đặt ngôn ngữ Người dùng bấm chọn Người dùng bấm chọn để chuyển qua tài khoản khác để thoát khỏi hệ thống để tiến hành đổi mật Người dùng bấm chọn cho tài khoản 68 Hình 3.25: Giao diện thay đổi mật Khi người dùng chọn chức đổi mật hệ thống yêu cầu người dùng nhập mật cũ, mật xác nhận mật Người dùng nhấn để xem mật 69 g) Giao diện thông báo Hình 3.26: Giao diện hiển thị thơng báo Người xem thơng báo (thơng báo lượt thích, bình luận đăng …) Khi bấm vào thông báo dẫn tới đăng, bình luận… thơng báo Bấm để xem tất thông báo Bấm để xem thông báo người theo dõi 70 Bấm để chuyển sang giao diện trò chuyện Bấm để chuyển sang giao diện hẹn hò để chuyển sang giao diện thông tin cá nhân ( xem thông tin cá nhân, đổi Bấm mật khẩu, chỉnh sửa thơng tin cá nhân, xem, sửa, xóa viết …) h) Giao diện trị chuyện Hình 3.27: Giao diện trị chuyện Người dùng nhắn tin, gửi hình ảnh, video, … qua lại hai tài khoản theo dõi Nếu tài khoản theo dõi tài khoản khác gửi tin nhắn chờ Nếu 71 tài khoản nhận tin nhắn chờ, đọc trả lời tin nhắn tài khoản tự động xác nhận theo dõi tài khoản gửi tin nhắn chờ tới Bấm để bắt đầu tạo story cho tài khoản Bấm chọn story ( )để xem story Với tin nhắn chưa đọc hệ thống thông báo số tin chưa đọc trị chuyện Bấm vào trị chuyện để xem chi tiết tin nhắn Hình 3.28: Giao diện chi tiết trò chuyện Bấm chọn để xem danh sách trò chuyện Bấm chọn để thực gọi thoại 72 Bấm chọn để thêm file, hình ảnh… vào nội dung tin nhắn Nhập nội dung tin nhắn bấm i) để gửi tin nhắn Giao diện tìm kiếm trị chuyện Hình 3.29: Giao diện tìm kiếm trị chuyện Nhập nội dung tìm kiếm vào tìm kiếm bấm tìm kiếm để tìm kiếm trị chuyện Bấm chọn hội thoại để xem chi tiết hội thoại Bấm chọn để khỏi tìm kiếm 73 j) Giao diện story Hình 3.30: Giao diện story Story: Nơi người dùng quay video ngắn chụp ảnh để chia sẻ khoảnh khắc đáng nhớ ngày Và nội dung người dùng đăng lên Story bị hủy vòng 24 kể từ đăng lên Nhập nội dung bấm để trả lời story 74 k) Giao diện hẹn hị Hình 3.31: Giao diện hẹn hị Khu vực hẹn hị nơi hiển thị thơng tin danh sách người sẵn sàng hẹn hò, gợi ý người hẹn hị, người dùng tìm kiếm đối tượng hẹn hò tùy chỉnh độ tuổi, khu vực giới tính Người dùng bấm chọn để tùy chỉnh độ tuổi, khu vực, giới tính danh sách người gợi ý hẹn hò Bấm Bấm chọn để vào khu vực smart chat để vào khu vực maching 75 l) Giao diện smart chat Kết đôi ngẫu nhiên hai tài khoản tham gia smart chat Mọi người có phút để tìm hiểu đối phương xác định mối quan hệ Hình 3.32: Giao diện smart chat Nếu người dùng khơng muốn tiếp tục trị chuyện dùng bấm chọn để khỏi phịng chat Trường hợp bạn chat gửi nội dung vi phạm đạo đức, pháp luật người dùng báo cáo với admin cách nhấn chọn Nhập nội dung nhấn send để gửi tin nhắn 76 m) Giao diện matching Hình 3.33: Giao diện matching Người dùng bấm chọn vào phần giới thiệu để xem chi tiết người gợi ý hẹn hò Bấm chọn để bỏ qua gợi ý Bấm chọn để đặt làm ưu tiên Bấm chọn để u thích người gợi ý hẹn hị Bấm chọn để thiết lập gợi ý hẹn hò ( độ tuổi, khoảng cách, giới tính) Bấm chọn để quay trở giao diện hẹn hò 77 n) Giao diện xem thơng tin tài khoản gợi ý hẹn hị Hình 3.34: Giao diện xem thông tin tài khoản gợi ý hẹn hò Bấm chọn để bỏ qua gợi ý Bấm chọn để u thích người gợi ý hẹn hị Bấm chọn để quay trở giao diện matching 78 CHƯƠNG 4: XÂY DỰNG VÀ CÀI ĐẶT CHƯƠNG TRÌNH 4.1 Cài đặt môi trường - Yêu cầu: + Hệ điều hành: MacOS Linux + Tools: Docker, git, cmake… - - Đặc tả: + Ứng dụng xây dựng dựa trên chế client-server nên setup backend frontend để build hệ thống + Backend gồm công nghệ Nodejs, Django + Frontend gồm công nghệ PWA, Nextjs + Database sử dụng Mysql Note: Để tiện cho việc setup nhóm sử dụng tool cmake tạo file “Makefile” để thực toàn bước phức tạp khởi động hệ thống 4.2 Cài đặt sở liệu - Được setup chung với backend 4.3 Cài đặt backend - Clone sourcecode từ github: https://github.com/FinalGame/social_network_backend Mở terminal thay đổi đường dẫn tới project */social_network_backend Run command: “make start” (“make shutdown” để tắt sau hoàn thiện demo) 4.4 Cài đặt frontend - Clone sourcecode từ github: https://github.com/FinalGame/social_network_pwa Mở terminal thay đổi đường dẫn tới project */social_networ_pwa Run command: “make start” (“make shutdown” để tắt sau hoàn thiện demo) 79 CHƯƠNG 5: ĐÁNH GIÁ, KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Nhận xét Đánh giá Ưu điểm: - Thực hóa đầy đủ nghiệp vụ mạng xã hội hẹn hò: + Đăng ký, đăng nhập, đăng xuất + Quên mật khẩu, đổi mật + Đăng + Đăng story + reply story + Bình luận + u thích đăng + Theo dõi người dùng + Nhắn tin, gọi thoại + Gợi ý hẹn hị: smart chat, matching + u thích tài khoản + Báo cáo tài khoản - Giao diện đơn giản, trực quan, tốc độ tải liệu cực nhanh, thao tác trải nghiệm người dùng tối ưu hóa - Danh tính người dùng xác thực đảm bảo, chế quản lý an toàn Nhược điểm: Trong thời gian có hạn, việc hồn thành dự án vượt qua nhiều thử thách định, phần mềm cịn nhiều điểm cải tiến nhằm nâng cao chất lượng phục vụ trải nghiệm người dùng 80 5.2 Tổng kết Phần mềm bước đầu phát triển theo dự tính kế hoạch Tuy gặp nhiều khó khăn vấn đề tiếp cận với cơng nghệ lập trình mới, nhóm đảm bảo tiến độ làm việc đặt 5.3 Hướng phát triển - Hồn thiện thêm tính năng, sửa lỗi nâng cấp cho ứng dụng - Cải thiện giao diện người dùng hợp lý hơn, thao tác thân thiện với đa số người dùng Khắc phục rào cản người dùng không quên sử dụng công nghệ - Cải tiến tăng tính bảo mật, xác thực người dùng chủ sử dụng ứng dụng để chống tình trạng người dùng bị đánh cắp tài khoản Thêm tính liên quan đến commercial để đem lại lợi nhuận trực tiếp cho sản phẩm Mở rộng tảng hỗ trợ Giải vấn đề giúp người dùng tránh mối nguy tiềm tàng mạng xã hội Mở rộng thêm nhiều tính 81 TÀI LIỆU THAM KHẢO Tài liệu tiếng anh [1] Tiềm mạng xã hội hẹn hò: https://theblog.okcupid.com/the-future-of-dating-b6755d5011c0 [2] Tài liệu kiến trúc phần mềm thông dụng: https://levelup.gitconnected.com/software-architecture-the-important-architecturalpatterns-you-need-to-know-a1f5ea7e4e3d [3] Giới thiệu hệ thống microservice: https://www.edureka.co/blog/what-is-microservices/ [4] Phát triển mở rộng quy mô với kiến trúc phần mềm: https://medium.com/@i.gorton/six-rules-of-thumb-for-scaling-softwarearchitectures-a831960414f9 [5] Giao tiếp service hệ thông Microservice: https://medium.com/better-software/rest-in-peace-grpc-for-micro-service-and-grpcfor-the-web-a-how-to-908cc05e1083 [6] Tiềm ứng https://www.youtube.com/watch?v=1QILz1lAzWY dụng PWA: [7] Ưu nhược điểm công nghệ Nodejs xây dựng tảng backend as service: https://www.youtube.com/watch?v=2gQG4cFjahw [8] Những lý nên chọn Python Django để phát triển tảng backend: https://youtu.be/57rYSDWs_8o Và số tài liệu khác 82 ... quản lý nhiều thiết bị Xây dựng chức mạng xã hội hẹn hò như: Nhắn tin, call, đăng bài, bình luận, theo dõi người dùng, tìm kiếm, lọc đối tượng hẹn hò, gợi ý hẹn hò, báo cáo người dùng… 1.5 Phạm vi... thành chức bật mạng xã hội hẹn hị (Ghép đơi ngẫu nhiên, gợi ý hẹn hò, thiết lập, tùy chỉnh gợi ý hẹn hị: khu vực, độ tuổi, giới tính, u thích người dùng) - Hồn thành chức bật mạng xã hội (nhắn tin,... kết luận đồng thời đưa hướng phát triển đề tài tương lai CHƯƠNG 1: MỞ ĐẦU 1.1 Dẫn nhập Giữa đại dịch toàn giới, mạng xã hội xem cầu nối người, hoàn cảnh cách ly, giãn cách xã hội Mạng xã hội