BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI THÀNH PHỐ HỒ CHÍ MINH BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI NGHIÊN CỨU VÀ XÂY DỰNG MẠNG XÃ HỘI CHIA SẺ HÌNH ẢNH Giảng viên hướng dẫn Th[.]
BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢI PHÂN HIỆU TẠI THÀNH PHỐ HỒ CHÍ MINH BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: NGHIÊN CỨU VÀ XÂY DỰNG MẠNG XÃ HỘI CHIA SẺ HÌNH ẢNH Giảng viên hướng dẫn: ThS PHẠM THỊ MIÊN Sinh viên thực hiện: LÊ NGUYỄN THÁI KHANG Lớp: CQ.59.CNTT MSV: 5951071043 Khố: 59 Tp Hồ Chí Minh, năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI THÀNH PHỐ HỒ CHÍ MINH BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: NGHIÊN CỨU VÀ XÂY DỰNG MẠNG XÃ HỘI CHIA SẺ HÌNH ẢNH Giảng viên hướng dẫn: ThS PHẠM THỊ MIÊN Sinh viên thực hiện: LÊ NGUYỄN THÁI KHANG Lớp: CQ.59.CNTT MSV: 5951071043 Khố: 59 Tp Hồ Chí Minh, năm 2022 TRƯỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢI CỘNG HỊA XÃ HỘI CHỦ NGHIÃ VIỆT NAM Độc lập – Tự – Hạnh phúc PHÂN HIỆU TẠI THÀNH PHỐ HỒ CHÍ MINH NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP BỘ MÔN: CÔNG NGHỆ THÔNG TIN -*** Mã sinh viên: 5951071043 Họ tên SV: Lê Nguyễn Thái Khang Khóa: 59 Lớp: CQ.59.CNTT Tên đề tài NGHIÊN CỨU VÀ XÂY DỰNG MẠNG XÃ HỘI CHIA SẺ HÌNH ẢNH Mục đích, yêu cầu a Mục đích: Hiểu phương pháp xây dựng trang web hoàn chỉnh từ khâu chuẩn bị, phân tích, thiết kế thực thi Xây dựng mạng xã hội với mục đích áp dụng kiến thức mà học tìm hiểu để tạo cho người nơi để người tương tác, chia sẻ trạng thái hình ảnh việc, tin tức mà người bắt gặp sống đến với người xung quanh nhầm nâng cao mối quan hệ người với người sống Hệ thống xây dựng tảng Web Platform b Yêu cầu: - Yêu cầu cơng nghệ Sử dụng ngơn ngữ lập trình HTML, CSS, Javascript Công nghệ, Framework áp dụng: ReactJS, Redux, Mongodb, Nodejs, Socket.io, Express i Thư viện hỗ trợ thiết kế: Material UI Sử dụng công cụ Visual Studio Code - Yêu cầu chức Phần mềm cho phép người dùng: - Đăng nhập, đăng ký tài khoảng - Chat video call - Chức theo dõi (follow) - Thêm, xóa, sửa, cập nhật trạng thái hoạt động - Quản lý trang cá nhân người dùng - Quản lý user người quản trị - Nhấn like - Tạo, xem, xóa bình luận viết - Tìm kiếm user tên - Giao diện responsive Sử dụng phương pháp database realtime mongodb kết hợp socket.io để thực chức nhắn tin, gọi video call - Yêu cầu phi chức Tốc độ: Nhận truy cập nhanh, truy xuất liệu nhanh Giao diện: Thân thiện với người sử dụng - Yêu cầu tổ chức code Tổ chức code ngắn dễ đọc, lược bỏ thành phần rườm rà Nội dung phạm vi đề tài a Nội dung: - Tổng quan ngơn ngữ lập trình HTML, CSS, Javascript - Tổng quan công nghệ sử dụng - Tổng quan tốn - Phân tích thiết kế database - Phân tích thiết kế giao diện người dùng - Lập trình xây dựng trang web ii - Kiểm thử chạy thực nghiệm - Kết thu b Phạm vi: - Nghiên cứu sử dụng kết hợp NodeJS, Express, Mongodb, ReactJS, Redux thư viện Material UI - Nghiên cứu sử dụng công cụ Visual Studio Code Công nghệ, công cụ ngôn ngữ lập trình - Cơng nghệ sử dụng: ReactJS, Express, Mongodb, socket.io, NodeJS - Công cụ Visual Studio Code - Ngôn ngữ lập trình: HTML, CSS, Javascript Các kết dự kiến sẻ đạt ứng dụng - Quyển báo cáo đề tài tốt nghiệp - Xây dựng trang web với chức nêu - Sử dụng kết hợp ReactJS, Express, Mongodb, socket.io, NodeJS Giáo viên cán hướng dẫn Họ tên: ThS Phạm Thị Miên Đơn vị công tác: Trường Đại học Giao thông Vận tải Phân hiệu Thành phố Hồ Chí Minh Điện thoại: Email: Ngày tháng năm 2022 Đã giao nhiệm vụ TKTN Trưởng BM Công nghệ Thông tin Giảng viên hướng dẫn iii Đã nhận nhiệm vụ TKTN Sinh viên: Lê Nguyễn Thái Khang Ký tên: Điện thoại: 0392203700 Email: lenguyenthaikhang700@gmail.com Tp Hồ Chí Minh, ngày … Tháng … năm 2022 iv LỜI CẢM ƠN Để hoàn thành đề tài tốt nghiệp trước hết em xin gửi đến quý thầy, cô Bộ môn Công nghệ thông tin – Trường Đại học Giao thông Vận tải Phân hiệu Thành phố Hồ Chí Minh lời cảm ơn chân thành truyền đạt cho em kiến thức khơng từ sách vở, mà cịn kinh nghiệm quý giá từ sống khoảng thời gian học tập trường Đặc biệt em xin gửi đến cô Phạm Thị Miên lời cảm ơn sâu sắc nhất, thầy tận tình hướng dẫn, bảo em suốt trình thực đề tài Tuy đề tài không lớn lao không hướng dẫn bảo tận tình thầy đề tài tốt nghiệp khó hồn thành Vì thời gian làm đồ án có hạn hiểu biết cá nhân cịn hạn chế, em nỗ lực để hoàn thành báo cáo đồ án cách tốt nhất, chắn sẻ có thiếu sót khơng thể tránh khỏi Em kính mong nhận thơng cảm ý kiến đóng góp chân thành từ q thầy Sau cùng, em xin kính chúc Q Thầy Cô công tác Bộ môn Công nghệ thông tin thầy cô công tác trường mạnh khoẻ, hạnh phúc thành công công việc sống Em xin chân thành cảm ơn! Tp Hồ Chí Minh, ngày ….… tháng ….… năm 2022 Sinh viên thực Lê Nguyễn Thái Khang v NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Tp Hồ Chí Minh, ngày …… tháng ….… năm 2022 Giảng viên hướng dẫn vi MỤC LỤC NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP i LỜI CẢM ƠN v NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN vi CHƯƠNG MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Mục đích nghiên cứu 1.3 Đối tượng phạm vi nghiên cứu 1.4 Phương pháp nghiên cứu 1.5 Cấu trúc báo cáo đồ án tốt nghiệp 1.6 Kết luận CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Tổng quan MongoDB 2.1.1 MongoDB gì? 2.1.2 Định nghĩa MongoDB 2.1.3 Ứng dụng MongoDB 2.1.4 Ưu điểm MongoDB 2.1.5 Nhược điểm MongoDB 2.2 NodeJS 2.2.1 Nodejs gì? 2.2.2 Lịch sử đời NodeJS 2.2.3 Ưu điểm NodeJS 2.2.4 Nhược điểm NodeJS 2.2.5 Những ứng dụng nên viết NodeJS 2.2.6 Một số lý nên sử dụng NodeJS 2.3 Express NodeJS 2.3.1 Expressjs gì? 2.3.2 Tại nên sử dụng Expressjs lập trình web? 2.3.3 Những tính Expressjs 10 2.3.4 Làm để phân biệt Expressjs Nodejs 11 vii 2.4 ReactJS 12 2.4.1 ReactJS gì? 12 2.4.2 Các khái niệm ReactJS 12 2.4.3 Ưu điểm: 14 2.4.4 Nhược điểm 15 2.5 Socketio 15 2.5.1 Socket IO gì? 15 2.5.2 Ưu bật Socket IO 16 CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG 18 3.1 Tổng quan mạng xã hội 18 3.2 Phân tích yêu cầu hệ thống 18 3.2.1 Khái quát chung hệ thống 18 3.2.2 Các tác nhân hệ thống: 20 3.3 Use case hệ thống 20 3.3.1 Biểu đồ Use case 20 3.3.2 Mô tả Use case 24 3.4 Biểu đồ 29 3.4.1 Biểu đồ chức đăng nhập 29 3.4.2 Biểu đồ chức đăng ký tài khoản 29 3.4.3 Biểu đồ chức tìm user 29 3.4.4 Biểu đồ chức đăng 30 3.4.5 Biểu đồ chức nhấn like viết 31 3.4.7 Biểu đồ chức tạo bình luận 32 3.4.8 Biểu đồ chức nhắn tin 33 3.4.8 Biểu đồ chức gọi điện video call 33 3.5 Biểu đồ hoạt động 34 3.5.1 Biểu đồ hoạt dộng chức cập nhật trạng thái hoạt động 34 3.5.2 Biểu đồ hoạt động chức cập nhật trang cá nhân 35 3.5.3 Biểu đồ hoạt động chức nhắn tin, gọi điện , video call 36 3.5.4 Biểu đồ hoạt động chức xem viết, like, comment 37 3.6 Sơ đồ lớp 38 3.7 Cách tổ chức liệu thiết kế chương trình 39 3.7.1 Bảng user 39 3.7.2 Bảng posts 40 viii 4.2.1 Giao diện đăng nhập Tại trang giao diện đăng nhập, người dùng phải nhập email password để truy cập vào trang mạng xã hội Nếu người dùng chưa có tài khoản truy cập tiếp vào Register now để đăng ký tài khoản Hình 4.1 Giao diện đăng nhập 46 4.2.2 Giao diện đăng ký Khi người dùng muốn đăng ký tài khoảng cần phải nhập đầy đủ thơng tin cần thiết theo yêu cầu form bên để tạo tài khoản cho với thơng tin thân Hình 4.2 Giao diện đăng ký 47 4.2.3 Giao diện trang Home Tại giao diện trang người dùng thấy logo trang mạng xã hội bên cạnh cơng cụ tìm kiếm người dùng tìm kiếm bạn bè thơng qua việc gõ username người muốn tìm Tiếp theo bên cơng cụ để cập nhật trạng thái, đăng hình ảnh, viết cảm nghĩ tạo thành viết chia đến với người Phần phần tin tức Phần hiển thị viết người mà theo dõi với lượt thích, bình luận tương tác Ở nhấn like, viết bình luận, trả lời bình luận có sẵn trước Hình 4.3 Giao diện trang Home 48 4.2.4 Giao diện trang đăng tin Ở trang giao diện đăng tin, nơi mà người dùng tạo viết để chia đến với người Vì mạng xã hội hình ảnh việc đính kèm ảnh bắt buộc Hình 4.4 Giao diện trang đăng tin 49 4.2.5 Giao diện trang nhắn tin Ở trang giao giao diện nhắn tin, người dùng tìm kiếm bạn bè mà trước nhắn tin tìm người thơng qua cơng cụ tìm kiếm phía Người dùng thực chức gửi tin nhắn với đoạn text bình thường, gửi ảnh, gọi điện video call Tất chức có đảm bảo tính thời gian thực Hình 4.5 Giao diện trang nhắn tin 50 4.2.6 Giao diện chức gọi điện Hình bên chức gọi điện, gọi điện hiển thị thời gian gọi thơng tin cần thiết Hình 4.6 Giao diện chức gọi điện 51 4.2.7 Giao diện chức video call Hình bên chức video call, gọi hiển thị thời gian gọi, hình ảnh trược tiếp user Hình 4.7 Giao diện chức video call 52 4.2.8 Giao diện hiển thị thông báo Hiển thị thông báo dropdown menu cho phép người dùng theo dỗi hoạt động mà người khác tương tác viết nhấn theo dỗi Hình 4.8 Giao diện hiển thị thông báo 53 4.7.9 Giao diện trang cá nhân Giao diện trang cá nhân nơi mà người dùng quản lý thơng tin cá nhân viết, đăng thân Ở người dùng thực chức chỉnh sửa lại thông tin cá nhân, xem thơng tin thuộc Xem lại viết, hình ảnh đăng trước Hình 4.9 Giao diện trang cá nhân 54 4.7.8 Giao diện chỉnh sửa thông tin cá nhân Đây nơi mà người dùng chỉnh sửa lại thơng tin cá nhân thay đổi ảnh đại diện thân Hình 4.10 Giao diện chỉnh sửa thơng tin cá nhân 55 4.7.9 Giao diện trang admin Đây nơi mà người quản trị quản lý user, xem viết user, xóa user , xóa viết đưa cảnh báo người dùng thơng qua tin nhắn Hình 4.11 Giao diện trang admin 56 4.3 Kết đánh giá Chương trình hoạt động với đầy đủ chức kể trên, giao diện website dễ nhìn, đơn giản, có đầy đủ thơng tin - Các chức người quản trị hoạt động tốt, xử lý hiệu quy trình quản lý - Đối với người sử dụng, thông tin cụ thể, trực quan hình ảnh đem đến cho người dùng nhìn khách quan sản phẩm thơng qua đánh giá từ người dùng khác - Chương trình hoạt động đơi bị giật, lag, xử lý liệu chậm chưa tối ưu hóa sở liệu - 4.4 Kết luận chương Trong chương trình bày tổng quan cơng cụ, cơng nghệ, ngơn ngữ lập trình sử dụng, giao diện demo chức chương trình 57 KẾT LUẬN VÀ KIẾN NGHỊ Kết đạt được: Trong suốt khoảng thời gian nghiên cứu thực đề tài, em cố gắng làm hết khả thời gian làm đồ án có hạn nên kết đạt nhiều hạn chế em học hỏi nhiều kiến thức mẻ chuyên sâu thuật toán, lập trình việc em đạt sau: - Trình bày kiến thức công nghệ, ngôn ngữ, công cụ hỗ trợ xây dựng trang web - Phân tích, thiết kế giải vấn đề trình xây dựng - Xây dựng mạng xã hội chia sẻ hình ảnh với chức mà mạng xã hội cần có - Sử dụng kết hợp nodeJS, Express, MongoDB, ReactJS - Ứng dụng socket.io để dựng chức chat video call - Bước đầu hoàn thiện thân đường trở thành fullstack developer Tồn Trong trình làm đồ án, hiển nhiên sẻ có lỗi chưa khắc phục hồn tồn với thời gian có hạn nên sẻ có chức chưa hồn thiện: - Giao diện chương trình cịn sơ xài - Các chức cịn chưa thực hoàn thiện - Số lượng chức cịn - Cịn thiếu sót chức chat nhóm Hướng phát triển - Cần tối ứu hóa đầu vào trang web hoạt động cách ổn định nhanh chống - Cần cải thiện giao diện cho thân thiện với người dùng - Cần xây dựng thêm chức chat nhóm để phục vụ nhu cầu giao tiếp ngày rộng rãi người 58 - Vì thời gian có hạn trình chạy demo sẻ phát sinh số lỗi khách quan, cần phải chạy thực nghiệm thật nhiều để tìm lỗi giúp cho việc trải nghiệm người dùng tốt 59 TÀI LIỆU THAM KHẢO [1] Sách lập trình JavaScript: The Good Parts tác giả Douglas Crockford [2] HTML & CSS: Design and Build Web Sites tác giả Jon Duckett [3] JavaScript and JQuery: Interactive Front-End Web Development tác giả Jon Duckett [4] https://nodejs.org/en/docs/ [5] https://www.mongodb.com/docs/ [6] https://devdocs.io/express/ [7] https://reactjs.org/docs/getting-started.html [8] https://www.geeksforgeeks.org/mern-stack/ [9] https://www.w3schools.com/ [10] https://vietjack.com/javascript/ 60