Khóa luận xây dựng mạng xã hội du lịch

ĐẠ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 NGUYỄN ĐỨC CHÍ ĐẠT – 19521334 HỒ QUANG LINH – 19521750 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG MẠNG XÃ HỘI DU LỊCH Building a travel social network KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2023 ĐẠ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 NGUYỄN ĐỨC CHÍ ĐẠT – 19521334 HỒ QUANG LINH - 19521750 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG MẠNG XÃ HỘI DU LỊCH Building a travel social network KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS TRẦN THỊ HỒNG YẾN TP HỒ CHÍ MINH, 2023 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 Thành khố luận tốt nghiệp thể đề tài "XÂY DỰNG MẠNG XÃ HỘI DU LỊCH", nhóm tự tin khả chun mơn khẳng định Đây không bước tiến việc giải vấn đề thực tế mà cảm xúc thăng hoa biết kiến thức cơng sức đánh giá cao Thời gian thực khố luận, nhóm nhận bảo hướng dẫn tận tâm từ quý thầy cô, giúp đỡ hỗ trợ đồng lòng từ gia đình người bạn đáng quý Đặc biệt, nhóm xin gửi lời cảm ơn chân thành đến: • Các thầy cô trường Đại học Công nghệ Thông Tin, đặc biệt thầy cô Khoa Cơng nghệ Phần mềm Sự tận tình bảo thầy cô việc truyền đạt kiến thức suốt thời gian học tập trường tài sản q báu mà khơng thể đo lường Đó nguồn động lực trụ cột vững giúp nhóm hồn thành khố luận • Nhóm xin gửi lời cảm ơn sâu sắc đến cô ThS Trần Thị Hồng Yến, người đồng hành hướng dẫn nhóm suốt q trình thực khố luận Sự tận tâm chia sẻ kiến thức đóng góp quan trọng vào việc hồn thành khố luận cách tiến độ đạt yêu cầu đề ban đầu • Cảm ơn góp ý q báu, lời khích lệ đồng cảm từ giảng viên phản biện hội đồng chấm luận văn Đó nguồn động lực quan trọng giúp nhóm vượt qua thử thách tự tin tiến bước đường chinh phục mục tiêu Lời cuối cùng, nhóm xin chân thành gửi lời cảm ơn tới gia đình, anh chị, bạn bè ln đồng hành ủng hộ tinh thần suốt q trình hồn thành khố luận Thành phố Hồ Chí Minh, tháng 07 năm 2023 Sinh viên thực Nguyễn Đức Chí Đạt - Hồ Quang Linh MỤC LỤC MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG DANH MỤC TỪ VIẾT TẮT 10 TÓM TẮT KHÓA LUẬN .11 Chương TỔNG QUAN ĐỀ TÀI 13 1.1 Giới thiệu đề tài 13 1.2 Lý chọn đề tài .14 1.3 Khảo sát trạng 15 1.3.1 Nhu cầu người dùng 15 1.3.2 Các sản phẩm tương tự thị trường 15 1.4 Mục tiêu .19 1.5 Phạm vi đề tài 19 1.6 Phạm vi chức 20 1.7 Đối tượng sử dụng .20 1.8 Phương pháp thực 21 1.9 Công nghệ sử dụng 21 1.10 Kết dự kiến 21 Chương 2.1 CƠ SỞ LÝ THUYẾT 22 Kiến trúc hệ thống .22 2.1.1 Tổng quan hệ thống 22 2.1.2 Mơ hình kiến trúc hệ thống 22 2.1.3 Mô tả chi tiết thành phần hệ thống 23 2.2 Machine Learning - The Universal Recommender 24 2.2.1 Khái niệm 24 2.2.2 Đặc trưng 24 2.2.3 Ưu điểm .24 2.3 ReactJS 24 2.3.1 Khái niệm 25 2.3.2 Đặc trưng 25 2.4 MongoDB 26 2.4.1 Các đặc điểm 26 2.4.2 Ưu nhược điểm MongoDB 26 Chương PHÂN TÍCH PHẦN MỀM 28 3.1 Phân tích yêu cầu hệ thống 28 3.1.1 Yêu cầu tính 28 3.1.2 Yêu cầu phi chức .28 3.2 Use case .29 3.2.1 Sơ đồ Use case 29 3.2.2 Danh sách Actor 30 3.2.3 Danh sách Use case .31 3.2.4 Đặc tả Use case 32 3.3 Sequence Diagram 47 3.3.1 Đăng nhập 47 3.3.2 Đăng ký 48 3.3.3 Đăng .49 3.3.4 Tạo nhóm 49 3.3.5 Nhắn tin 50 3.3.6 Nạp tiền 51 3.3.7 Mua dịch vụ .51 Chương THIẾT KẾ PHẦN MỀM 52 4.1 Thiết kế sở liệu 52 4.1.1 Sơ đồ logic 52 4.1.2 Mô tả thành phần sơ đồ logic .53 4.2 Thiết kế giao diện 64 4.2.1 Danh sách hình 64 4.2.2 Mơ tả chi tiết hình 66 Chương TỔNG KẾT 105 5.1 Kết đạt 105 5.2 Thuận lợi khó khăn 106 5.2.1 Thuận lợi 106 5.2.2 Khó khăn 106 5.3 Hướng phát triển 107 TÀI LIỆU THAM KHẢO 108 Tài liệu tiếng Việt 108 Tài liệu tiếng Anh 109 DANH MỤC HÌNH ẢNH Hình 1.1: Lượng khách du lịch tăng trưởng 13 Hình 1.2: Dự báo ABD Châu Á Thái Bình Dương 14 Hình 1.3: Logo facebook 15 Hình 1.4: Logo mạng xã hội travelocity 17 Hình 2.1 Mơ hình Client – Server .22 Hình 2.2: Mơ hình Client – Server 22 Hình 2.3: Chi tiết thành phần hệ thống 23 Hình 3.1: Use case tổng thể .29 Hình 3.2: Sơ đồ chức Đăng nhập 47 Hình 3.3: Sơ đồ chức đăng ký .48 Hình 3.4: Sơ đồ chức đăng 49 Hình 3.5: Sơ đồ chức tạo nhóm .49 Hình 3.6: Sơ đồ chức nhắn tin 50 Hình 3.7: Sơ đồ chức nạp tiền .51 Hình 3.8: Sơ đồ chức mua dịch vụ 51 Hình 4.1: Sơ đồ logic 52 Hình 4.2: Màn hình phân tích 66 Hình 4.3: Màn hình phân tích - Dark mode 67 Hình 4.4: Màn hình truyền thơng xã hội 68 Hình 4.5: Dach sách dịch vụ .69 Hình 4.6: Cấu hình dịch vụ .70 Hình 4.7: Danh sách thành viên 71 Hình 4.8: Danh sách hội nhóm 72 Hình 4.9: Danh sách doanh nghiệp 73 Hình 4.10: Danh sách kiện 74 Hình 4.11: Danh sách câu hỏi 75 Hình 4.12: Biểu đồ cột thống kê tổng quan 76 Hình 4.13: Biểu đồ trịn thống kê gói dịch vụ 76 Hình 4.14: Biểu đồ đường thống kê năm 77 Hình 4.15: Thơng tin cá nhân 77 Hình 4.16: Chỉnh sửa thông tin 78 Hình 4.17: Đổi mật 79 Hình 4.18: Dịch vụ doanh nghiệp .80 Hình 4.19: Thơng báo tốn 80 Hình 4.20: Thơng báo xác nhận toán 81 Hình 4.21: Màn hình hóa đơn tốn 81 Hình 4.22: Nạp tiền vào hệ thống .82 Hình 4.23: Thơng báo nạp tiền thành công .82 Hình 4.24: Tạo viết 83 Hình 4.25: Gắn thẻ bạn bè .84 Hình 4.26: Gắn địa 85 Hình 4.27: Bài đăng 86 Hình 4.28: Nhóm .87 Hình 4.29: Tạo nhóm 88 Hình 4.30: Chi tiết nhóm - Giới thiệu .89 Hình 4.31: Chi tiết nhóm - Thành viên .90 Hình 4.32: Cá nhân 91 Hình 4.33: Bài đăng - lưu .91 Hình 4.34: Chỉnh sửa thơng tin cá nhân 92 Hình 4.35: Danh sách người theo dõi .93 Hình 4.36: Danh sách dang theo dõi 94 Hình 4.37: Màn hình nhắn tin 95 Hình 4.38: Màn hình gọi video 95 Hình 4.39: Màn hình gọi 96 Hình 4.40: Cửa hàng du lịch .96 Hình 4.41: Cửa hàng .97 Hình 4.42: Thêm sản phẩm .98 4.2.2.2.6 Message Hình 4.37: Màn hình nhắn tin Màn hình hiển thị danh sách bạn bè khung chat với thành phần như: - Danh sách người dùng: Danh sách bạn bè nhắn tin - Khung chat: Nơi để tiến hành nhắn tin - Icon gọi điện: Nhấn để gọi điện - Icon gọi video: Nhấn để gọi video Hình 4.38: Màn hình gọi video Màn hình hiển thị gọi nhấn gọi video với thành phần - Nút tắt: Nhấn để tắt gọi 95 Hình 4.39: Màn hình gọi Màn hình hiển thị gọi nhấn gọi với thành phần: - Nút tắt: Nhấn để tắt gọi 4.2.2.2.7 Market Hình 4.40: Cửa hàng du lịch Màn hình hiển thị hàng du lịch với thành phần: - Tìm kiếm: Nhập thơng tin để tìm kiếm sản phẩm - Danh sách sản phẩm:Cho thấy danh sách sản phẩm 96 4.2.2.2.8 Shop Hình 4.41: Cửa hàng tơi Màn hình hiển thị cửa hàng du lịch với thành phần: - Tìm kiếm: Nhập thơng tin để tìm kiếm sản phẩm - Danh sách sản phẩm: Cho thấy danh sách sản phẩm - Nút thêm sản phẩm: Nhấn để thêm sản phẩm 97 Hình 4.42: Thêm sản phẩm Màn hình thêm sản phẩm với thành phần: - Ô tên sản phẩm: Nhập tên sản phẩm - Ô giá sản phẩm: Nhập giá sản phẩm - Ô thời gian: Nhập thời gian sản phẩm - Ô thời lượng: Nhập thời lượng sản phẩm - Ô địa điểm: Chọn địa địa điểm sản phẩm - Ơ nhóm: Chọn nhóm cho sản phẩm - Ô số lượng: Nhập số lượng sản phẩm - Ơ mơ tả: Nhập thơng tin mơ tả sản phẩm - Nút hình ảnh: Nhấn để chọn hình ảnh cho sản phẩm 98 4.2.2.2.9 Package Hình 4.43: Chi tiết sản phẩm Màn hình chi tiết thơng tin sản phẩm với thành phần: - Hình ảnh: Danh sách hình ảnh sản phẩm - Cột bên trái: Thơng tin thuộc tính sản phẩm - Nút gửi tin nhắn đến người bán: Nhấn để nhắn tin cho người bán - Giá sản phẩm: Giá sản phẩm - Thời gian: Thời gian sản phẩm - Thời lượng: Thời lượng sản phẩm - Địa điểm: Địa địa điểm sản phẩm - Nhóm: Nhóm cho sản phẩm - Số lượng: Số lượng sản phẩm - Mô tả: Thông tin mơ tả sản phẩm 99 4.2.2.2.10 Bạn bè Hình 4.44: Bạn bè Màn hình bạn bè với thành phần: - Tìm kiếm: Nhập tìm kiếm bạn bè - Trang chủ: Cho thấy thông tin chung lời mời kết bạn, người bạn biết, … - Lời mời kết bạn: Hiển thị danh sách lời mời kết bạn - Gợi ý: Hiển thị danh sách người bạn biết - Tất bạn bè: Cho thấy danh sách bạn bè Hình 4.45: Tất bạn bè Màn hình tất bạn bè cho thấy danh sách bạn bè bạn 100 4.2.2.2.11 Đăng nhập Hình 4.46: Đăng nhập Màn hình đăng nhập với thành phần: - Ô địa email: Nhập email đăng nhập - Ô mật khẩu: Nhập thông tin mật đăng nhập - Nút đăng nhập: Nhấn để tiến hành đăng nhập - Nút đăng ký ngay: Nhấn để tiến hành đăng ký 101 4.2.2.2.12 Đăng ký Hình 4.47: Đăng ký người dùng Màn hình đăng ký với thành phần: - Ô tên người dùng: Nhập tên người dùng - Ô địa email: Nhập email đăng nhập - Ô mật khẩu: Nhập mật đăng nhập - Ô xác thực mật khẩu: Nhập mật xác nhận - Ơ chọn giới tính: Nhấn để chọn giới tính - Nút đăng nhập ngay: Nhấn để tiến hành đăng nhập - Nút đăng ký: Nhấn để tiến hành đăng ký 102 Hình 4.48: Đăng ký doanh nghiệp Màn hình đăng ký doanh nghiệp với thành phần: - Ô tên doanh nghiệp: Nhập tên doanh nghiệp - Ô tên tài khoản: Nhập tên tài khoản doanh nghiệp - Ô địa email: Nhập email đăng nhập - Ơ mật khẩu: Nhập thơng tin mật đăng nhập - Ơ xác thực mật khẩu: Nhập thơng tin mật xác nhận - Ô mã số thuế: Nhập mã số thuế - Ơ địa chỉ: Nhập thơng tin địa - Nút đăng nhập ngay: Nhấn để tiến hành đăng nhập - Nút đăng ký: Nhấn để tiến hành đăng ký 103 4.2.2.2.13 Bản tin Hình 4.49: Bản tin Màn hình tin với thành phần: - Danh sách tin: Hiển thị danh sách tin theo chiều ngang - Nút tiến: Nhấn để kéo tin sang phải - Nút lùi: Nhấn để khéo tin sang trái Hình 4.50: Màn hình hiển thị tin Màn hình hiển thị tin với nội dung tự động chuyển đổi 104 Chương TỔNG KẾT 5.1 Kết đạt Thông qua việc nghiên cứu tìm hiểu cơng nghệ, đặc biệt cơng nghệ mới, nhóm phát triển website mạng xã hội du lịch hồn chỉnh Nhóm đưa sản phẩm lên internet với tên miền “travel.onrender.com” Nhóm cố gắng trì website phát triển vịng năm tới Về mặt kỹ thuật, nhóm đạt kết sau: • Tìm hiểu, áp dụng framework NodeJS database mã nguồn mở MoogoDB việc thao tác CRUD với liệu, upload file • Tìm hiểu ReacJs, cơng nghệ lập trình giao diện web Ngồi ra, cịn áp dụng thư viện UI phổ biến MUI, Tailwindcss, Boostrap để tạo giao diện web đơn giản, dễ nhìn • Học nhiều kiến thức, có thêm kinh nghiệm việc sử dụng MoongoDB, Socket.io, triển khai ứng dụng Web • Tìm hiểu biết cách triển khai máy chủ lên tảng đám mây để sử dụng khơng mạng cục 105 Về mặt thực tiễn nhóm đạt được: • Phát triển kỹ lập trình: Xây dựng hồn thiện website du lịch giúp nhóm phát triển cải thiện kỹ lập trình, bao gồm thiết kế web, lập trình, quản lý liệu, tìm kiếm thơng tin,… • Tạo dấu ấn cá nhân: Một website du lịch hoàn thiện mang lại cho cá nhân nhóm hội để thể cá nhân, khám phá phát triển ý tưởng sáng tạo Nhóm thiết kế giao diện độc đáo, viết nội dung chất lượng chia sẻ thông tin du lịch độc đáo Điều giúp nhóm xây dựng thương hiệu cá nhân tạo dấu ấn riêng lĩnh vực du lịch • Thúc đẩy sáng tạo phát triển thân: Xây dựng hoàn thiện website du lịch đòi hỏi kiên nhẫn, sáng tạo tâm Q trình giúp nhóm rèn luyện khả giải vấn đề, tư sáng tạo phát triển thân 5.2 Thuận lợi khó khăn 5.2.1 Thuận lợi • Cả có kinh nghiệm việc thiết kế giao diện xây dựng mạng xã hội từ đồ án trước thực tập • Được giảng viên hướng dẫn quan tâm giúp đỡ để cải thiện tiến độ lúc nhóm bị “trơi” 5.2.2 Khó khăn • Ý tưởng sản phẩm tương tự thị trường hiếm, nên việc tham khảo giao diện chức trở nên hạn chế Nhóm chia tham khảo loại chức nhóm sản phẩm khác để có giải pháp giao diện hợp lý • Tìm kiếm để đưa giải pháp chức tốt cho website so sánh với website khác thị trường • Tự đặt thử thách với chức yêu cầu real-time khiến nhóm 106 nhiều thời gian tìm giải pháp từ internet, giảng viên hướng dẫn • Dự án thực giai đoạn mà thành viên làm, nên đòi hỏi khả xếp thời gian quan trọng 5.3 Hướng phát triển Đề tài cịn mở rộng phát triển thêm nhiều tính tối ưu chư: • Tính đặt vé đặt phòng trực tuyến: Hiện tại, sản phẩm chưa cung cấp tính đặt vé máy bay, đặt vé tham quan hay đặt phòng khách sạn trực tuyến tảng Việc có tính giúp người dùng tiện lợi lên kế hoạch đặt chỗ cho chuyến • Tính hướng dẫn dịch vụ: Sản phẩm chưa có tính hướng dẫn dịch vụ chi tiết hướng dẫn lại, hướng dẫn địa điểm tham quan, thơng tin văn hóa lịch sử điểm đến Tính giúp người dùng có thêm thơng tin hướng dẫn chi tiết trình khám phá điểm đến du lịch • Tính đa ngơn ngữ: Hiện tại, Sản phẩm chưa hỗ trợ đa ngơn ngữ hồn chỉnh Điều làm giới hạn tham gia người dùng quốc tế, đặc biệt người tiếng Anh tiếng Việt Để mở rộng phát triển thu hút tảng, tính đa ngơn ngữ hữu ích • Tính tương tác tính mạnh mẽ: So với mạng xã hội du lịch quốc tế khác, sản phẩm nhóm cịn thiếu tính tương tác tính mạnh mẽ Điều làm hạn chế trải nghiệm người dùng không thỏa mãn nhu cầu du lịch đa dạng • Tính bảo mật quyền riêng tư: Việc bảo mật quyền riêng tư yếu tố quan trọng mạng xã hội Nhóm nghiên cứu để tăng thêm tính bảo mật đảm bảo quyền riêng tư người dùng để tạo niềm tin an tâm cho cộng đồng người dùng 107 TÀI LIỆU THAM KHẢO Tài liệu tiếng Việt [1] “UNWTO: Du lịch giới phục hồi mạnh mẽ năm 2023.” https://congdoansonla.org.vn/kinh-te-chinh-tri-xa-hoi/unwto-du-lich-the-gioi-sephuc-hoi-manh-me-trong-nam-2023-23314 (accessed Jun 23, 2023) [2] Bank A D., “ADB DỰ BÁO TĂNG TRƯỞNG CỦA CHÂU Á VÀ THÁI BÌNH DƯƠNG Ở MỨC 4,8% TRONG NĂM 2023 VÀ 2024,” Asian Development Bank, Apr 04, 2023 https://www.adb.org/vi/news/adb-forecasts-4-8-growthasia-and-pacific-2023-and-2024 (accessed Jun 23, 2023) [3] CN Huỳnh Thị Kiều Linh, TS Phan Bùi Gia Thủy, and TS Trần Ái Cầm, “Khảo sát đánh giá thực trạng tham gia du lịch trải nghiệm,” Tạp chí Cơng Thương, Jan 03, 2022 https://tapchicongthuong.vn/bai-viet/khao-sat-va-danh-gia-thuctrang-tham-gia-du-lich-trai-nghiem-truong-hop-sinh-vien-truong-dai-hocnguyen-tat-thanh-86200.htm (accessed Jun 30, 2023) [4] Linherest, “Kỹ Thuật Lazy Loading,” https://codelearn.io/sharing/ky-thuat-lazyloading-images.html (accessed Jun 23, 2023) [5] Viblo Algorithm, “Các giải thuật tìm kiếm đồ thị,” https://viblo.asia/p/cacgiai-thuat-tim-kiem-tren-do-thi-1Je5EBRGKnL.html (accessed Jun 23, 2023) [6] ThS Nguyễn Công Hoan (2022), Các phương pháp thiết kế phát triển Web, Khoa Công Nghệ Phần Mềm - Đại học Công Nghệ Thông Tin - Đại Học Quốc Gia TP.HCM [7] ThS Phan Trung Hiếu (2021), Chuyên đề E-Commerce, Khoa Công Nghệ Phần Mềm - Đại học Công Nghệ Thông Tin - Đại Học Quốc Gia TP.HCM 108 Tài liệu tiếng Anh [8] B Pavan, “Build a Real-time Chat Application with Socket.io and Node.js [With Automated Testing],” DEV Community, Apr 17, 2023 https://dev.to/pavanbelagatti/build-a-real-time-chat-application-with-socketioand-nodejs-with-automated-testing-38h8 (accessed Jun 30, 2023) [9] “Cloud Application Hosting for Developers | Render,” Cloud Application Hosting for Developers | Render https://render.com/ (accessed Jul 08, 2023) [10] “MongoDB: The Developer Data Platform,” MongoDB https://www.mongodb.com (accessed Jul 08, 2023) [11] “Google Maps Platform,” Google for Developers https://developers.google.com/maps (accessed Jul 08, 2023) [12] “Hướng dẫn tích hợp Cổng tốn VNPAY · Cổng toán VNPAY.” https://sandbox.vnpayment.vn/apis/docs/huong-dan-tich-hop/ (accessed Jul 08, 2023) [13] “Image and Video Upload, Storage, Optimization and CDN,” Cloudinary https://cloudinary.com/ (accessed Jul 16, 2023) [14] “Installation - Tailwind CSS.” https://tailwindcss.com/docs/installation (accessed Jul 16, 2023) [15] “Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.,” Nov 15, 2020 https://tailwindcss.com/ (accessed Jul 16, 2023) 109