Xây dựng website cộng đồng hỗ trợ học tập học siêu dễ easy learn

Trang web Học Siêu Dễ Easy Learn là một cộng đồng học tập trực tuyến được xây dựng trên hệ sinh thái giáo dục 4.0, nhằm đáp ứng nhu cầu ngày càng tăng về giáo dục trực tuyến và cung cấp một môi trường học tập đơn giản, dễ triển khai và tiếp cận. Với sự hỗ trợ của công nghệ MERN Stack (MongoDB, Express.js, React.js, Node.js), Học Siêu Dễ mang đến một giao diện trực quan và tính năng mạnh mẽ. Trang web tạo điều kiện cho cộng đồng người học và trợ giảng giao lưu, chia sẻ kiến thức và hỗ trợ lẫn nhau trong quá trình học tập. Học Siêu Dễ giúp người dùng dễ dàng tìm kiếm và tham gia vào các khóa học, bài giảng và tài liệu học tập. Ngoài ra, trang web còn cung cấp công cụ thảo luận giữa trợ giảng và học viên, tạo ra một môi trường học tập tương tác và đáng tin cậy. Cộng đồng Học Siêu Dễ cũng cho phép người dùng đánh giá và chia sẻ phản hồi về khóa học, giúp cải thiện chất lượng giảng dạy và tạo ra sự minh bạch trong quá trình học tập. Với sự phát triển của công nghệ và tác động của đại dịch COVID19, Học Siêu Dễ đóng vai trò quan trọng trong việc cung cấp một giải pháp học tập linh hoạt và tiện ích, tạo điều kiện thuận lợi cho mọi người tiếp cận kiến thức và phát triển cá nhân trong một cộng đồng hỗ trợ sôi nổi.

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM BÁO CÁO KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE CỘNG ĐỒNG HỖ TRỢ HỌC TẬP HỌC SIÊU DỄ - EASY LEARN GIÁO VIÊN HƯỚNG DẪN: ThS Mai Anh Thơ GIÁO VIÊN PHẢN BIỆN: ThS Nguyễn Hữu Trung NHIỆM VỤ THỰC HIỆN KHOÁ LUẬN TỐT NGHIỆP Chuyên ngành: Công nghệ phần mềm Tên đề tài: Xây dựng website cộng đồng hỗ trợ học tập Học Siêu Dễ - Easy Learn Nội dung thực hiện: Lý thuyết: - Tìm hiểu MERN stack - Tìm hiểu lập trình Website với MERN - Tìm hiểu nhớ đám mây với Cloudinary Thực hành: -Xây dựng website cộng đồng hỗ trợ học tập, với tính sau: + Quản lý viết, khóa học,… + Thao tác, tìm kiếm, xem chi tiết viết, khóa học,… + Hỏi trực tiếp trợ giảng + Thực nhiệm vụ kiếm thưởng + Quản lý hệ thống người dùng + Đăng ký, đăng nhập -Xây dựng API Server cho website ứng dụng NodeJs/Express/MongoDB -Xây dựng website ReactJs -Thời gian thực hiện: Bắt đầu từ 30/01/2023 đến 07/07/2023 Chữ ký SV: …………………………………………………………… Chữ ký SV: …………………………………………………………… TP.HCM, tháng năm GIẢNG VIÊN PHẢN BIỆN GIẢNG VIÊN HƯỚNG DẪN LỜI CẢM ƠN Trước tiên, chúng em muốn gửi lời cảm ơn chân thành đến với Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tạo điều kiện cho nhóm học tập phát triển kiến thức chuyên môn kỹ mềm Bên cạnh đó, nhóm chúng em xin gửi lời cảm ơn chân thành sâu sắc đến cô Mai Anh Thơ giảng viên hướng dẫn nhóm Cơ nhiệt tình hướng dẫn đưa góp ý q báu cho nhóm suốt q trình từ lúc bắt đầu kết thúc đề tài Tuy nhiên, q trình làm khơng tránh khỏi sai sót, chúng em mong nhận góp ý tận tình q thầy (cơ) qua nhóm rút học kinh nghiệm, hoàn thiện cải thiện nâng cấp lại sản phẩm cách tốt Chúng em xin chân thành cảm ơn! Nhóm sinh viên thực TÓM TẮT Trang web Học Siêu Dễ - Easy Learn cộng đồng học tập trực tuyến xây dựng hệ sinh thái giáo dục 4.0, nhằm đáp ứng nhu cầu ngày tăng giáo dục trực tuyến cung cấp môi trường học tập đơn giản, dễ triển khai tiếp cận Với hỗ trợ công nghệ MERN Stack (MongoDB, Express.js, React.js, Node.js), Học Siêu Dễ mang đến giao diện trực quan tính mạnh mẽ Trang web tạo điều kiện cho cộng đồng người học trợ giảng giao lưu, chia sẻ kiến thức hỗ trợ lẫn trình học tập Học Siêu Dễ giúp người dùng dễ dàng tìm kiếm tham gia vào khóa học, giảng tài liệu học tập Ngoài ra, trang web cịn cung cấp cơng cụ thảo luận trợ giảng học viên, tạo môi trường học tập tương tác đáng tin cậy Cộng đồng Học Siêu Dễ cho phép người dùng đánh giá chia sẻ phản hồi khóa học, giúp cải thiện chất lượng giảng dạy tạo minh bạch trình học tập Với phát triển công nghệ tác động đại dịch COVID-19, Học Siêu Dễ đóng vai trị quan trọng việc cung cấp giải pháp học tập linh hoạt tiện ích, tạo điều kiện thuận lợi cho người tiếp cận kiến thức phát triển cá nhân cộng đồng hỗ trợ sôi MỤC LỤC DANH MỤC HÌNH DANH MỤC BẢNG DANH MỤC TỪ VIẾT TẮT CHƯƠNG 1: TỔNG QUAN ỨNG DỤNG 1.1 Lý chọn đề tài .6 1.2 Tính cấp thiết đề tài 1.3 Mục tiêu xây dựng ứng dụng 1.4 Đối tượng nghiên cứu .7 1.5 Phạm vi nghiên cứu CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 Đánh giá tổng quan website dạy học số tương tự 2.2 Các chức đặc biệt trang web 10 2.3 Đặc tả yêu cầu người dùng 10 2.3.1 Yêu cầu Quản trị viên 10 2.3.2 Yêu cầu Trợ giảng 11 2.3.3 Yêu cầu Người dùng 11 2.4 Đặc tả yêu cầu hệ thống 11 2.4.1 Yêu cầu giao diện 11 2.4.2 Yêu cầu Internet 11 2.4.3 Yêu cầu hệ điều hành 12 2.4.4 Kiến trúc hệ thống 12 CHƯƠNG 3: CƠ SỞ LÝ THUYẾT 13 3.1 MERN Stack 13 3.1.1 Khái niệm 13 3.1.2 Cách thức hoạt động 14 3.1.3 Ưu điểm 14 3.1.4 Nhược điểm 15 3.1.4 Áp dụng MERN Stack cho dự án 15 3.2 Các công nghệ sử dụng Back-end .16 3.2.1 Nodejs 16 3.2.2 Express 17 3.2.3 MongoDB 19 3.2.4 Cloudinary 19 3.3 Các công nghệ sử dụng Front-end 20 3.3.1 React Framework 20 3.3.2 Tailwind CSS 22 3.3.3 React Query 23 3.3.4 Các thư viện hỗ trợ khác 24 CHƯƠNG THIẾT KẾ HỆ THỐNG PHẦN MỀM 25 4.1 Sơ đồ phân rã chức 25 4.2 Sơ đồ lớp 25 4.3 Mơ hình hoá yêu cầu .26 4.3.1 Lược đồ Usecase 26 4.3.1.1 Usecase khách 26 4.3.1.2 Usecase người dùng 27 4.3.1.3 Usecase trợ giảng 28 4.3.1.4 Usecase quản trị 28 4.3.2 Lược đồ mô tả chi tiết chức 29 4.3.2.1 Chức “Đăng nhập” 29 4.3.2.2 Chức “Đăng ký” 30 4.3.2.3 Chức “Quên mật khẩu” 32 4.3.2.4 Chức “Chỉnh sửa thông tin tài khoản” 33 4.3.2.5 Chức “Tìm kiếm” 35 4.3.2.6 Chức “Tạo viết” 36 4.3.2.7 Chức “Quản lý viết” 38 4.3.2.8 Chức “Xem bảng xếp hạng" 41 4.3.2.9 Chức “Điểm danh” 42 4.3.2.10 Chức “Cho điểm người trả lời” 43 4.3.2.11 Chức “Hỏi trả lời” 45 4.3.2.12 Chức “Bình chọn câu trả lời” 46 4.3.2.13 Chức “Báo cáo viết” 47 4.3.2.14 Chức “Đăng ký làm trợ giảng” 49 4.3.2.15 Chức “Trợ giảng đăng ký trả lời hỗ trợ” 50 4.3.2.16 Chức “Quản trị xét duyệt” 51 4.3.2.17 Chức “Tạo khoá học” 53 4.3.2.18 Chức “Quản lý khoá học” 54 4.3.2.19 Chức “Quản lý giỏ hàng” 57 4.3.2.20 Chức “Thanh toán” 59 4.4 Thiết kế sở liệu 61 4.4.1 Nhóm sở liệu người dùng 61 4.4.2 Nhóm sở liệu viết 66 4.4.3 Nhóm sở liệu khố học 72 4.5 Thiết kế giao diện 78 4.5.1 Giao diện cho khách (chưa đăng nhập) 78 4.5.2 Giao diện cho người dùng 81 4.5.3 Giao diện cho trợ giảng 88 4.5.4 Giao diện cho quản trị viên 90 CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ 95 5.1 Cài đặt .95 5.1.1 Truy cập Visual Studio Code 95 5.1.2 Truy cập trình duyệt web 95 5.2 Kiểm thử 96 5.2.1 Kế hoạch kiểm thử 96 5.2.1.1 Phạm vi kiểm thử 96 5.2.1.2 Loại kiểm thử 98 5.2.1.3 Rủi ro vấn đề 99 5.2.1.4 Logistics kiểm thử 99 5.2.2 Quy trình kiểm thử 5.2.3 Kết kiểm thử 99 100 5.2.3.1 Kết kiểm thử chức phía Người dùng 100 5.2.3.2 Kết kiểm thử chức phía Người dùng (Người dùng đăng nhập) 101 5.2.3.3 Kết kiểm thử chức phía Trợ giảng 103 5.2.3.4 Kết kiểm thử chức phía Quản trị viên 103 CHƯƠNG KẾT LUẬN 104 6.1 Kết đạt 104 6.1.1 Về lý thuyết: 104 6.1.2 Về kĩ năng: 104 6.1.3 Về ứng dụng: 105 6.2 Ưu điểm .105 6.3 Nhược điểm 106 6.4 Hướng phát triển 106 DANH MỤC TÀI LIỆU THAM KHẢO 107 DANH MỤC HÌNH Hình Sơ đồ kiến trúc hệ thống Hình Mơ hình hoạt động MERN Stack Hình Code minh hoạ sử dụng thư viện Paginate Hình Code minh hoạ sử dụng Express Hình Code giá tiền sản phẩm Hình Code minh hoạ sử dụng Tailwind hình ảnh Hình Code minh hoạ sử dụng useQuery để gọi API Hình Code minh hoạ sử dụng useMutation để gọi API Hình Sơ đồ phân rã chức Hình 10 Sơ đồ lớp Hình 11 Usecase Khách Hình 12 Usecase Người dùng Hình 13 Usecase Trợ giảng Hình 14 Usecase Quản trị Hình 15 Sequence Diagram Đăng nhập Hình 16 Sequence Diagram Đăng ký Hình 17 Sequence Diagram Quên mật Hình 18 Sequence Diagram Chỉnh sửa thơng tin tài khoản Hình 19 Sequence Diagram Tìm kiếm Hình 20 Sequence Diagram Tạo viết Hình 21 Sequence Diagram Quản lý viết Hình 22 Sequence Diagram Xem bảng xếp hạng Hình 23 Sequence Diagram Điểm danh Hình 24 Sequence Diagram Cho điểm người trả lời Hình 25 Sequence Diagram Hỏi trả lời Hình 26 Sequence Diagram Bình chọn câu trả lời Hình 27 Sequence Diagram Báo cáo viết Hình 28 Sequence Diagram Đăng ký làm trợ giảng Hình 29 Sequence Diagram Trợ giảng đăng ký trả lời hỗ trợ Hình 30 Sequence Diagram Quản trị xét duyệt Hình 31 Sequence Diagram Tạo khố học Hình 32 Sequence Diagram Quản lý khố học Hình 33 Sequence Diagram Quản lý giỏ hàng Hình 34 Sequence Diagram Thanh tốn Hình 35 Nhóm sở liệu người dùng Hình 36 Nhóm sở liệu viết Hình 37 Nhóm sở liệu khố học Hình 38: Trang chủ cho khách Hình 39: Trang tìm kiếm Hình 40: Trang đăng kí Hình 41: Trang đăng nhập 12 14 17 18 22 22 23 24 25 25 26 27 28 28 29 30 32 33 35 36 38 41 42 43 45 46 47 49 50 51 53 54 57 59 61 66 72 78 78 79 79 Trang Hình 42: Trang bảng xếp hạng Hình 43: Trang khóa học Hình 44: Trang chi tiết khóa học Hình 45: Trang chủ cho người dùng đăng nhập Hình 46: Trang cá nhân Hình 47: Trang khóa học tơi Hình 48: Trang đơn hàng Hình 49: Trang điểm Hình 50:Trang danh sách u thích Hình 51: Trang bạn bè Hình 52: Trang nhiệm vụ Hình 53: Trang giỏ hàng Hình 54: Trang thơng tin tốn Hình 55: Trang tốn Hình 56 Trang hỏi gia sư Hình 57 Trang quản lý câu hỏi gia sư Hình 58: Trang trợ giảng Hình 59: Trang đăng kí làm trợ giảng Hình 60 Trang hỗ trợ khố học Hình 61 Trang hỗ trợ câu hỏi Hình 62: Trang chủ quản trị viên Hình 63: Trang quản lí người dùng Hình 64: Trang quản lí trợ giảng Hình 65: Trang quản lí viết vi phạm Hình 66: Trang quản lí khóa học Hình 67: Quản lí quảng cáo Hình 68 Trang quản lý trợ giảng khố học Hình 69 Trang quản lý viết gia sư 80 80 81 81 82 82 83 83 84 84 85 85 86 86 87 88 88 89 89 90 90 91 91 92 92 93 93 94 Trang DANH MỤC BẢNG Bảng Đánh giá webite dạy học số tương tự Bảng Phân tích chức website tương tự Bảng Usecase Đăng nhập Bảng Usecase Đăng ký tài khoản Bảng Usecase Quên mật Bảng Usecase Chỉnh sửa thơng tin tài khoản Bảng Usecase Tìm kiếm Bảng Usecase Tạo viết Bảng Usecase Xem danh sách viết Bảng 10 Usecase Chỉnh sửa viết Bảng 11 Usecase Xoá viết Bảng 12 Usecase Xem bảng xếp hạng Bảng 13 Usecase Điểm danh ngày Bảng 14 Usecase Cho điểm người trả lời Bảng 15 Usecase Bình luận viết Bảng 16 Usecase Bình chọn câu trả lời Bảng 17 Usecase Báo cáo viết Bảng 18 Usecase Đăng ký làm trợ giảng Bảng 19 Usecase Trợ giảng đăng ký trả lời hỗ trợ Bảng 20 Usecase Quản trị xét duyệt Bảng 21 Usecase Tạo khoá học Bảng 22 Usecase Xem khoá học Bảng 23 Usecase Chỉnh sửa khoá học Bảng 24 Usecase Xoá khoá học Bảng 25 Usecase Thêm khoá học vào giỏ hàng Bảng 26 Usecase Xoá khoá học giỏ hàng Bảng 27 Usecase Thanh toán Bảng 28 Model User Bảng 29 Model Rank Bảng 30 Model OTP Bảng 31 Model Point Bảng 32 Model HistoryPoint Bảng 33 Model Mission Bảng 34 Model ViewMission Bảng 35 Model Notification Bảng 36 Model Post Bảng 37 Model Comment Bảng 38 Model React Bảng 39 Model ObIClass Subject 10 10 30 31 33 34 36 37 39 40 40 42 43 44 46 47 48 50 51 52 54 55 56 56 58 59 60 62 63 63 64 64 65 65 66 67 68 69 69 Trang