Đồ án xây dựng mạng xã hội du lịch

ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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 XÂY DỰNG MẠNG XÃ HỘI DU LỊCH Lớp: SE122.N21 Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Dương Hoài Nam - 19521868 Võ Quốc Minh - 19521857 TP Hồ Chí Minh, tháng 07 năm 2023 ĐẠI HỌC QUỐC GIA THÀNH PHỐ 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 XÂY DỰNG MẠNG XÃ HỘI DU LỊCH Lớp: SE122.N21 Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Sinh viên thực hiện: Dương Hoài Nam - 19521868 Võ Quốc Minh - 19521857 TP Hồ Chí Minh, tháng 07 năm 2023 LỜI CẢM ƠN Nhóm xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người trực tiếp tận tình hướng dẫn nhóm suốt q trình thực đồ án Nhóm vơ biết ơn tận tình dẫn q trình nhóm thực đề tài Bước đầu tiếp cận cơng nghệ mới, nhóm cịn nhiều thiếu sót mặt kiến thức kinh nghiệm thực tiễn nên không tránh khỏi nhiều sai sót Những nhận xét, góp ý chân tình sở để nhóm cải tiến hồn thiện đề tài cách tốt Nếu khơng có lời bảo tận tình đồ án nhóm khó để thực Nhóm xin cảm ơn thầy cô khoa Công nghệ phần mềm hỗ trợ, tạo điều kiện cho nhóm hồn thành báo cáo Nhóm xin chân thành cảm ơn! TP Hồ Chí Minh, ngày 05 tháng 07 năm 2023 Nhóm sinh viên thực Võ Quốc Minh – Dương Hoài Nam NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN , ngày , tháng , năm Trần Thị Hồng Yến ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG MẠNG XÃ HỘI DU LỊCH Cán hướng dẫn: ThS Trần Thị Hồng Yến Thời gian thực hiện: Từ ngày 27/02/2023 đến ngày 17/06/2023 Sinh viên thực hiện: Võ Quốc Minh - 19521857 Dương Hoài Nam - 19521868 Nội dung đề tài: Lý chọn đề tài: Ngày nay, mạng xã hội người dùng Internet phần tất yếu sống Mạng xã hội hệ thống trực tuyến kết nối người thông qua tương tác xã hội chia sẻ thông tin, tương tác kết nối với tảng mạng Mạng xã hội trở thành phương tiện truyền thông quan trọng cho hàng triệu người khắp giới để tương tác chia sẻ thông tin với Liên quan đến lĩnh vực du lịch, mạng xã hội du lịch sử dụng công cụ để giúp người dùng tìm kiếm thơng tin địa điểm du lịch, khám phá kinh nghiệm lời khuyên từ người đến địa điểm đó, chia sẻ hình ảnh video chuyến tìm kiếm đối tác du lịch để tham gia hoạt động du lịch Mạng xã hội du lịch sử dụng phương tiện để quảng bá địa điểm du lịch thu hút khách du lịch đến địa điểm Từ đó, mạng xã hội du lịch đóng vai trò quan trọng việc tạo phát triển cho ngành du lịch Nhận thấy nhu cầu thực tiễn lợi ích đó, nhóm định thực đề tài “XÂY DỰNG MẠNG XÃ HỘI DU LỊCH” cho môn học đồ án Mục tiêu đề tài: Xây dựng ứng dụng mạng xã hội du lịch, giúp người, đặt biệt người có đam mê du lịch kết nối với nhau, chia sẻ hình ảnh, thước phim ý nghĩa chuyến hành trình họ Phạm vi đề tài: • Phạm vi mơi trường: Ứng dụng xây dựng mơi trường web • Phạm vi chức năng: - Đăng ký, đăng nhập - Chia sẻ nội dung, tương tác, bình luận… - Tìm kiếm bạn bè, viết… - Nhắn tin, trị chuyện - Thơng báo Đối tượng sử dụng: Người dùng mạng xã hội, người yêu thích du lịch Phương pháp thực hiện: • Khảo sát ứng dụng tương tự • Tìm hiểu cơng nghệ, sở lý thuyết • Phân tích thiết kế hệ thống • Xây dựng hệ thống • Kiểm thử triển khai sản phẩm Công nghệ sử dụng: • Front-end: ReactJS • Back-end: NodeJS • Database: MongoDB, Neo4j • Cơng cụ hỗ trợ: Github, VS Code, Docker, Kết mong đợi: • Hiểu nắm vững công nghệ, sở lý thuyết • Xây dựng ứng dụng hồn chỉnh, có đủ tính thiết yếu • Ứng dụng triển khai sử dụng thực tế Kế hoạch thực hiện: Công việc Thành viên Thành viên (Minh) (Nam) Thời gian Tuần - Khảo sát ứng dụng tương tự Tuần - Xác định danh sách tính (06/03 –12/03) - Soạn đề cương chi tiết Tuần - Tìm hiểu cơng nghệ, sở lý thuyết - Phân tích thiết kế hệ (27/02 – 05/03) (13/03 –19/03) Tuần - (27/03 –02/04) Tuần (03/04 –09/04) Tuần (10/04 –16/04) Tuần (17/04 –23/04) Thiết kế sở liệu Phân tích thiết kế hệ thống thống (20/03 –26/03) Tuần - Thiết kế giao diện Khởi tạo setup source back- Khởi tạo setup source front- end end Xây dựng API đăng nhập, đăng Xây dựng giao diện tính ký, xác thực người dùng đăng nhập, đăng ký Xây dựng API tạo, chỉnh sửa Xây dựng giao diện tính xóa đăng tạo, chỉnh sửa xóa đăng Xây dựng API tương tác, bình Xây dựng giao diện tính luận tương tác, bình luận Tuần (24/04 –30/04) Xây dựng API tìm kiếm người Xây dựng giao diện tính dùng, đăng khám phá, tìm kiếm người dùng, viết Tuần 10 (01/05 –07/05) Tuần 11 (08/05 –14/05) Xây dựng API quản lý hồ sơ Xây dựng giao diện tính người dùng quản lý hồ sơ người dùng Xây dựng API nhắn tin, trị Xây dựng giao diện tính chuyện nhắn tin, trị chuyện Xây dựng API thơng báo Xây dựng giao diện tính Tuần 12 (15/05 –21/05) Tuần 13 thông báo (22/05 –28/05) Tuần 14 - Fix bug (29/05 –04/06) - Chỉnh sửa, tối ưu tính - Tối ưu hóa code, hiệu xuất Tuần 15 - Kiểm thử toàn hệ thống (05/06 –11/06) - Fix bug phát sinh Tuần 16 - Hoàn thành tài liệu báo cáo (12/06 –17/06) - Chuẩn bị slide tiến hành báo cáo TP Hồ Chí Minh, ngày 21 tháng 03 năm 2023 Xác nhận CBHD Sinh viên Sinh viên (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) (Ký tên ghi rõ họ tên) ThS Trần Thị Hồng Yến Võ Quốc Minh Dương Hoài Nam MỤC LỤC CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1.1 Thông tin đề tài 1.2 Lý chọn đề tài 1.3 Mục tiêu 1.4 Phạm vi 1.5 Phương pháp thực 1.6 Công nghệ sử dụng CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Ngơn ngữ lập trình Typescript .3 2.2 Front end 2.2.1 2.3 ReactJS Back end 2.3.1 NodeJS 2.3.2 ExpressJS 2.3.3 Mongoose 2.4 Database 2.4.1 MongoDB .9 2.4.2 Neo4j .10 CHƯƠNG 3: PHÂN TÍCH, THIẾT KẾ HỆ THỐNG 12 3.1 Phân tích yêu cầu 12 3.1.1 Yêu cầu chức 12 3.1.2 Yêu cầu phi chức 13 Là endpoint trang web phía server, API Gateway client gọi API liên quan đến tính web thông qua thành phần Thành phần trung gian để service tương Message broker tác với Các service không gọi trực tiếp service khác mà gọi thông qua message broker Service Đây module đảm nhận việc xử lý, quản lý chức hệ thống Các service yêu cầu việc lưu trữ liệu có Service Database database tương ứng hoạt động độc lập gắn liền với service Chúng dùng để lưu trữ liệu riêng cho service 28 3.4.2 Tổ chức services back end Hình 3.3 Sơ đồ tổ chức services Bảng 3.17 Mô tả tổ chức services STT Tên thành phần Phân loại Mô tả Endpoint để truy cập đến services API Gateway Gateway khác, tương ứng với tính ứng dụng Quản lý thông tin tài khoản user, User Service Service quản lý mối quan hệ follow user recommend follow cho user Lưu trữ thông tin user tài khoản User DB Database tương ứng, lưu trữ thông tin hoạt động follow, like post, 29 Post Service Service Post DB Database Chat Service Service Chat DB Database Notification Service Notification DB Quản lý liệu post, comment Lưu trữ thông tin post Quản lý trò chuyện, tin nhắn user Lưu trữ thơng tin trị chuyện, tin nhắn user Quản lý thông báo đến người Service dùng Database Lưu trữ thông báo người dùng Quản lý tài nguyên hình ảnh, file, 10 Media Service Service upload post, tin nhắn, Quản lý tác vụ liên quan đến thông 11 Mailer Service Service báo qua email xác thực email, gửi email thông báo 30 CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG 4.1 Trang đăng nhập 4.1.1 Giao diện Hình 4.1 Màn hình đăng nhập 4.1.2 Mơ tả - Người dùng vào trang đăng nhập nhập email mật minh để đăng nhập vào hệ thống - Nhấn nút login: hệ thống kiểm tra thông tin đăng nhập mà người dùng nhập vào, chuyển đến trang chủ, ngược lại thông báo lỗi - Nút Register: chuyển đến trang ký tài khoản 31 4.2 Trang đăng ký 4.2.1 Giao diện Hình 4.2 Màn hình đăng ký 4.2.2 Mơ tả - Trên trang đăng ký tài khoản, người dùng nhập thông tin cần thiết để đăng ký tài khoản bao gồm: tên, tên đăng nhập (email), ngày sinh, giới tính, mật - Nhấn nút Register: hệ thống kiểm tra thông tin đăng ký, hợp lệ thông báo đăng ký thành công chuyển sang trang đăng nhập Nếu thông tin không hợp lệ, thông báo lỗi - Nhấn nút Login now: chuyển sang trang đăng nhập 32 4.3 Trang chủ 4.3.1 Giao diện Hình 4.3 Màn hình trang chủ 4.3.2 Mơ tả - Thanh điều hướng: o Logo: nhấn vào dẫn trang chủ o Thanh tìm kiếm dùng để tìm kiếm bạn bè, viết o Icon home: điều hướng đến trang chủ o Icon điện thoại: điều hướng đến trang trò chuyện o Icon tạo mới: điều hướng đến trang đăng viết o Icon chuông: hiển thị thông báo o Khung tròn avatar: hiển thị tùy chọn đến trang cá nhân đăng xuất - Danh sách đăng nằm bên trái hình, đăng hiển thị dạng thẻ bao gồm thông tin tên tác giả, hình ảnh, nút thích, nút xem chi tiết, nút gửi tin nhắn - Danh sách gợi ý bạn bè năm bên phải hình, hiển thị người dùng bạn biết với thơng tin gồm avatar, tên số người theo dõi chung 33 4.4 Trang chi tiết viết 4.4.1 Giao diện Hình 4.4 Màn hình chi tiết viết 4.4.2 Mơ tả - Các hình ảnh hiển thị bên phải hình dạng slide, có nút di chuyển qua lại để sang hình - Khu vực bên phải gồm: o Avatar tên tác giả đăng o Danh sách bình luận viết hiển thị dạng thẻ với thông tin avatar tên người bình luận, nội dung, thời gian, nút thích bình luận o Nội dung đầy đủ viết o Nút thích viết o Khung nhập bình luận 34 4.5 Trang nhắn tin 4.5.1 Giao diện Hình 4.5 Màn hình nhắn tin 4.5.2 Mơ tả - Khu vực bên trái hình nhắn tin: o Nút tạo trò chuyện mới: nhấn nút tạo trò chuyện mới, pop up để người dùng chọn người mà họ muốn gửi tin nhắn sau nhấn nút tạo để tạo trị chuyện o Hiển thị danhs sách trò chuyện gần hành động gần thêm vào trị chuyện, tin nhắn cuối cùng, - Khu vực bên phải hình tin nhắn: o Avatar nút xem thông tin: nhấn vào nút xem thông tin thị pop up thơng tin chi tiết trị chuyện, số thành viên, nút xóa trị chuyện Nếu nhấn nút xóa trị chuyện, hệ thống xóa trị chuyện trở lại hình nhắn tin o Khu vược hiển thị tin nhắn thành viên o Khung nhập tin nhắn nút upload hình ảnh 35 4.6 Trang đăng viết 4.6.1 Giao diện Hình 4.6 Màn hình đăng viết 4.6.2 Mơ tả - Nút thêm ảnh nhấn vào hệ thống mở hộp thoại cho người dùng chọn hình ảnh muốn đăng - Sau khu upload thành cơng, hình ảnh hiển thị xem trước hình - Khung nhận nội dung cho phép người dùng nhập nội dung đăng - Nút icon cho phép người dùng chèn vào nội dung đăng icon 36 4.7 Trang cá nhân 4.7.1 Giao diện Hình 4.7 Màn hình trang cá nhân 4.7.2 Mô tả - Phần giao diện trang cá nhân: o Avatar: hiểu thị ảnh đại diện người dùng o Hiển thị thông tin tên, số lượng đăng, số người theo dõi, theo dõi người o Nút sửa thông tin: nhấp vào hiển thị hình chỉnh sửa thông tin - Phần hiển thị đăng dạng lưới Khi di chuyển trỏ chuột vào đăng hiển thị nút chỉnh sửa xòa bải đăng o Khi nhấn nút chỉnh sửa đăng, hiển thị hình chỉnh sửa đăng với giao diện tương tự trang đăng viết o Khi nhấn nút xóa đăng, hệ thống thơng bật thơng báo để xát nhận có xóa hay khơng, người dùng xát nhận xóa, trang cá nhân cập nhật lại giao diện 37 4.8 Trang chỉnh sửa thơng tin cá nhân 4.8.1 Giao diện Hình 4.8 Màn hình chỉnh sửa thơng tin cá nhân 4.8.2 Mô tả - Avatar: Nhấn vào để hiển thị hộp thoại upload ảnh đại diện - Name: Nơi nhập tên người dùng - Email: Nơi nhập email người dùng - Mobile: Nơi nhập sồ điện thoại người dùng - Gender: Nơi chọn giới tính - Save: Nhấn vào nút save để lưu lại thông tin 38 4.9 Trang đổi mật 4.9.1 Giao diện Hình 4.9 Màn hình đổi mật 4.9.2 Mô tả - Old Password: Nơi nhập mật cũ - New Password: Nơi nhập mật - Confirm New Password: Nợi nhập mật lần để xát nhận - Save: nhấp nút save để xát nhận tha đổi mật Nếu hộ thống kiểm tra thấy thông tin không hợp lệ thông báo lỗi 39 CHƯƠNG 5: TỔNG KẾT 5.1 Đánh giá trình thực đồ án Thuận lợi - Giảng viên hướng dẫn tận tình, hỗ trợ định hướng nhóm nghiên cứu thực đề tài - Các tài liệu ngơn ngữ lập trình, cơng nghệ thực chia sẻ rộng rãi Internet - Cộng đồng lớn giúp giải vấn đề thường gặp phải sử dụng cơng nghệ cách nhanh chóng - Vận dụng kiến thức, quy trình phát triển học Khó khăn - Bước đầu tiếp cận số công nghệ nên cần nhiều thời gian tìm hiểu làm quen - Cả thành viên thực tập làm nên quỹ thời gian tương đối hạn chế 5.2 Kết đồ án - Source code Front end: https://github.com/voquocminh1209/ms-socialnetworking-site-fe - Source code Back end: https://github.com/voquocminh1209/ms-socialnetworking-site-be - Report documents: 5.2.1 Ưu điểm - Đáp ứng đầy đủ yêu cầu chức đề - Tích hợp tính dành cho người yêu thích du lịch gắn vị trí, gợi ý địa điểm bật - Tạo tảng giúp người, đặt biệt người u thích du lịch kết nối, giao lưu với 5.2.2 Nhược điểm - Các tính mang yếu tố du lịch cịn hạn chế 40 - Một số thành phần giao diện chưa tương thích với nhiều kích thước hình khác (responsive) - Tính gợi ý (recommendation) cịn đơn giản, chưa khai thác tốt nguồn liệu có, thiếu gợi ý viết 5.3 Hướng phát triển - Phát triển thêm tính mang yếu tố du lịch tìm kiếm địa điểm du lich hay dịch vụ quanh - Cải thiện giao diện, chỉnh sửa tương thích với kích thước hình khác - Phát triển hệ thống gợi ý viết - Phát triển tính Video call - Tích hợp AI chatbox để người dùng tìm kiếm câu trả lời cho thắc mắc nên đâu, làm gì, ăn 5.4 Phân cơng công việc Bảng 5.1 Bảng phân công công việc STT Công việc Thành viên Thành viên (Minh) (Nam) Lên kế hoạch, tìm hiểu cơng nghệ x x Khảo sát, đặc tả yêu cầu x x Thiết kế liệu x Thiết kế giao diện x Xây dựng Front end x Xây dựng Back end API x Viết báo cáo x Tỷ lệ cơng việc phân cơng 50% 50% Mức độ hồn thành công việc 100% 100% 41 TÀI LIỆU THAM KHẢO [1] TongThom (2021), “ReactJS gì? Các kiến thức tổng quan reactJS”, https://ruaxetudong.org/reactjs-la-gi/ , truy cập ngày 01/07/2023 [2] Topdev, “Node.js thực gì?”, https://topdev.vn/blog/node-js-la-gi/, truy cập ngày 01/07/2023 [3] Topdev, “Expressjs gì? Tất tần tật Express.js”, https://topdev.vn/blog/express-js-la-gi/, truy cập lần cuối ngày 17/07/2023 [4] Z.com cloud, “Typescript gì? Hướng dẫn code Type Script biên dịch thành Javascript”, https://cloud.z.com/vn/news/typescript/, truy cập ngày 17/07/2023 [5] Neo4j Inc, “What is a Graph Database?”, https://neo4j.com/developer/graphdatabase/, truy cập ngày 17/07/2023 [6] VIETNIX, “TypeScript gì? Tồn kiến thức TypeScript dành cho người mới”, https://vietnix.vn/typescript-la-gi/, truy cập ngày 17/07/2023 [7] Nguyen Van Hien, “Tổng quan MongoDB”, https://viblo.asia/p/tong-quanve-mongodb-EoDkQoxqGbV, truy cập ngày 17/07/2023 [8] Hoang Hung, “Mongoose cho MongoDB, Nodejs”, https://viblo.asia/p/mongoose-cho-mongodb-nodejs-Qbq5QWvJZD8, truy cập ngày 17/07/2023 42