Tìm hiểu công nghệ mevn stack để xây dựng website

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN TÌM HIỂU CÔNG NGHỆ MEVN STACK ĐỂ XÂY DỰNG WEBSITE VỀ HỌC TẬP SỐ GVHD: TS MAI ANH THƠ SVTH: CHUNG THIÊN NHI THI LÝ VŨ SKL009446 TP HỒ CHÍ MINH, năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA CÔNG NGHỆ THÔNG TIN 🕯✡🕮✡🕯 KHÓA LUẬN TỐT NGHIỆP TÌM HIỂU CÔNG NGHỆ MEVN STACK ĐỂ XÂY DỰNG WEBSITE VỀ HỌC TẬP SỐ GVHD: ThS MAI ANH THƠ SVTH: CHUNG THIÊN NHI - 18110330 THI LÝ VŨ - 18110399 TP HỒ CHÍ MINH – Năm 2022 i BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA CÔNG NGHỆ THÔNG TIN 🕯✡🕮✡🕯 KHÓA LUẬN TỐT NGHIỆP TÌM HIỂU CÔNG NGHỆ MEVN STACK ĐỂ XÂY DỰNG WEBSITE VỀ HỌC TẬP SỐ GVHD: ThS MAI ANH THƠ SVTH: CHUNG THIÊN NHI - 18110330 THI LÝ VŨ - 18110399 TP HỒ CHÍ MINH – Năm 2022 ii CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc Tp Hồ Chí Minh, ngày 12 tháng 07 năm 2022 NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên: Chung Thiên Nhi MSSV: 18110330 Thi Lý Vũ MSSV: 18110399 Ngành: Công Nghệ Thông Tin Lớp: 18110ST3 Giảng viên hướng dẫn: ThS Mai Anh Thơ Ngày nhận đề tài: 14/02/2022 Ngày nộp đề tài: 19/06/2022 Tên đề tài: Tìm hiểu công nghệ MEVN stack để xây dựng website học tập số Các số liệu, tài liệu ban đầu: Khảo sát trạng qua website dạy học số phổ biến mạng ngày Nội dung thực đề tài: - Xây dựng trang quản lý - Xây dựng trang quản trị để ban quản trị có thể quản lý website bao gồm: chức quản lý người dùng, quản lý lớp học, quản lý kiểm tra quản lý thời khóa biểu, quản lý học liệu Sản phẩm đạt được: Website dạy học số TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN iii CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc Tp Hồ Chí Minh, ngày 12 tháng 07 năm 2022 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên: Chung Thiên Nhi MSSV: 18110330 Thi Lý Vũ MSSV: 18110399 Ngành: Công Nghệ Thông Tin Tên đề tài: Tìm hiểu công nghệ MEVN stack để xây dựng website học tập số Họ Tên Giáo viên hướng dẫn: ThS Mai Anh Thơ NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: ……………………………………………………………………………………… ……………………………………………………………………………………… Ưu điểm: ……………………………………………………………………………………… ……………………………………………………………………………………… Khuyết điểm: ……………………………………………………………………………………… ……………………………………………………………………….…………… Đề nghị cho bảo vệ hay không? ……………………………………………………………………………………… ……………………………………………………………………………………… iv Đánh giá loại:……………………………………………………………… Điểm:…………………… (Bằng chữ:…………………………………….) Tp Hồ Chí Minh, ngày 12 tháng 07 năm 2022 Giảng viên hướng dẫn (Ký & ghi rõ họ tên) v CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên: Chung Thiên Nhi MSSV: 18110330 Thi Lý Vũ MSSV: 18110399 Ngành: Công Nghệ Thông Tin Tên đề tài: Tìm hiểu công nghệ MEVN stack để xây dựng website học tập số Họ Tên Giáo viên phản biện: ThS Nguyễn Trần Thi Văn NHẬN XÉT Về nội dung đề tài khối lượng thực hiện: ……………………………………………………………………………………… ……………………………………………………………………………………… Ưu điểm: ……………………………………………………………………………………… ……………………………………………………………………………………… Khuyết điểm: ……………………………………………………………………………………… ……………………………………………………………………………………… Đề nghị cho bảo vệ hay không? ……………………………………………………………………………………… ……………………………………………………………………………………… vi Đánh giá loại:……………………………………………………………… Điểm:…………………… (Bằng chữ:…………………………………….) Tp Hồ Chí Minh, ngày 12 tháng 07 năm 2022 Giảng viên phản biện (Ký & ghi rõ họ tên) vii MỤC LỤC CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG 1.1 LÍ DO CHỌN ĐỀ TÀI 1.2 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1.3 KHẢO SÁT HIỆN TRẠNG CÁC ỨNG DỤNG TƯƠNG TỰ 1.3.1 Đánh giá tổng quan trang web 1.3.2 Các chức đặc biệt trang web 1.4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 1.4.1 Yêu cầu phi chức năng: 1.4.2 Yêu cầu chức năng: 1.5 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 1.5.1 Đối tượng 1.5.2 Phạm vi nghiên cứu 1.6 BẢNG PHÂN CÔNG CHƯƠNG 2: CÁC CÔNG NGHỆ SỬ DỤNG 2.1 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 2.2 TÌM HIỂU CÔNG NGHỆ MEVN STACK 2.2.1 Công nghệ MEVN stack gì? 2.2.2 Quy trình hoạt động MEVN stack 2.2.3 Lý lựa chọn công nghệ MEVN stack 2.3 CÔNG NGHỆ SỬ DỤNG Ở FRONT-END 10 2.3.1 Vuejs Framework Vue 10 2.3.2 Setup Vuejs cho project: 12 2.3.3 Các thư viện hỗ trợ thiết kế giao diện 14 2.4 CÔNG NGHỆ SỬ DỤNG Ở BACK-END: 14 viii 2.4.1 Tổng quan MONGODB MONGOOSE: 14 2.4.2 Tổng quan Nodejs Framework: 16 2.4.3 Tổng quan Express Framework: 16 2.4.4 Setup Back-end: 17 2.4.5 Thiết lập API: 21 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ 24 3.1 LƯỢC ĐỒ USE CASE 24 3.1.1 Quản lý xác thực người dùng 24 3.1.2 Quản lý tài khoản 31 3.1.3 Tương tác học sinh trang chủ 36 3.1.4 Tương tác học sinh trang lớp học 41 3.1.5 Tương tác giáo viên trang chủ 47 3.1.6 Tương tác giáo viên trang lớp học 49 3.2 LƯỢC ĐỒ TUẦN TỰ - SEQUENCE DIAGRAM 59 3.2.1 Xem thông tin trang web 59 3.2.2 Đăng nhập 60 3.2.3 Đăng xuất 60 3.2.4 Đăng ký tài khoản 61 3.2.5 Hiển thị thông báo 61 3.2.6 Đặt lại mật 62 3.2.7 Quản lý lớp học 62 3.2.8 Thêm lớp học 63 3.2.9 Tham gia lớp học 63 3.2.10 Rời khỏi lớp học 64 3.2.11 Ẩn lớp học 65 3.2.12 Chỉnh sửa lớp học 65 3.2.13 Xóa lớp học 66 ix 10 Quản lý giảng Sequence Diagram 30 Quản lý giảng 11 Thêm giảng Sequence Diagram 31 Thêm giảng 12 Xóa giảng Sequence Diagram 32 Xóa giảng 13 Quản lý tập Sequence Diagram 33 Quản lý tập 14 Thêm tập Sequence Diagram 34 Thêm tập 15 Xóa tập Sequence Diagram 35 Xóa tập 16 Quản lý tài liệu Sequence Diagram 36 Quản lý tài liệu 17 Thêm tài liệu Sequence Diagram 37 Thêm tài liệu 18 Xóa tài liệu Sequence Diagram 38 Xóa tài liệu 19 Quản lý thành viên Sequence Diagram 39 Quản lý thành viên 20 Thêm thành viên Sequence Diagram 40 Thêm thành viên 21 Xóa thành viên Sequence Diagram 41 Xóa thành viên PHỤ LỤC YÊU CẦU VỀ TÀI NGUYÊN KIỂM THỬ Phần cứng Máy tính cá nhân có kết nối mạng Internet CPU RAM SSD Architecture Intel Core i7, 4.1 GHz 16 GB 512 GB 64 bits Bảng 85 Tài nguyên phần cứng cần để kiểm thử PC Điện thoại cá nhân có kết nối mạng Internet CPU RAM SD Qualcom Snapdragon, 660, 2.3 GHz GB 64 GB Architecture 64 bits Bảng 86 Tài nguyên phần cứng cần để kiểm thử mobile Phần mềm Tên phần mềm Phiên Loại Mozilla Firefox Mới nhất phù hợp với hệ điều hành Trình duyệt web Microsoft Windows 10 Professional 10 Hệ điều hành Ubuntu 20.04 LTS 20.04 Hệ điều hành Google Chrome Trình duyệt web Android 10 Orio Hệ điều hành 10 Bảng 87 Tài nguyên phần mềm cần để kiểm thử Công cụ kiểm thử Hoạt động Công cụ Nhà cung cấp Phiên Quản lý Test Case Microsoft Office Excel Microsoft 365 Quản lý Configuration Microsoft Office Word Microsoft 365 Defect Tracking Microsoft Office Excel Microsoft 365 Quản lý tiến độ kiểm thử Microsoft Project Professional Microsoft 2019 Bảng 88 Công cụ kiểm thử Môi trường kiểm thử Máy tính cá nhân có kết nối mạng Internet để có thể truy cập vào trang web Ehub.edu.vn Các chức trang web kiểm thử web browser đã nêu có cho phép cookies javascript Bảng phân công kiểm thử Thành viên Thi Lý Vũ Vai trò Test Designer / Tester: Thiết kế viết test case, thực thi testcase cho chức Quản lý xác thực người dùng Quản lý tài khoản, xem lại Test Plan Chung Thiên Nhi Test Manager / Test Designer / Tester: Thiết kế viết testcase bổ sung, thực thi testcase bổ sung, đọc tài liệu tham khảo để cung cấp thơng tin cần thiết cho nhóm, xem lại Test Plan Bảng 89 Phân công kiểm thử PHỤ LỤC CHIẾN LƯỢC KIỂM THỬ Test Stages Unit Tests, Integration Tests, System Tests, and Acceptance Tests (UAT) Các loại kiểm thử 2.4 Kiểm thử chức Mục đích kiểm tra Đảm bảo chức kiểm tra hoạt động xác theo đặc tả yêu cầu Kỹ thuật Thực thi tất trường hợp có thể có cho mỡi nhóm chức năng, sử dụng liệu hợp lệ không hợp lệ để xác định: - Kết mong đợi liệu hợp lệ sử dụng - Cảnh báo phù hợp liệu không hợp lệ sử dụng Tiêu chuẩn dừng Tất testcase đã thiết kế thực thi Tất lỗi tìm thấy ghi nhận lý rõ ràng để có thể giúp cho developer khắc phục Chịu trách nhiệm kiểm thử Test Designer / Tester Cách kiểm thử Kiểm thử tay thủ công, theo bước định nghĩa testcase Xử lý ngoại lệ Liệt kê tất vấn đề liên quan phát sinh trình thực thi kiểm thử Bảng 90 Kiểm thử chức 2.2 Kiểm thử thiết bị Mục đích kiểm tra Đảm bảo chức kiểm tra hoạt động xác theo đặc tả yêu cầu loại thiết bị khác Kỹ thuật Thực thi chức nhiều thiết bị khác để xác thực khả thích nghi với thiết bị khác Kết đạt mong đợi hệ thống tương thích tốt với nhiều hệ điều hành, thiết bị Cảnh báo không phù hợp cho môi trường, thiết bị đã cũ Tiêu chuẩn dừng Tất testcase đã thiết kế thực thi Tất lỗi tìm thấy ghi nhận lý rõ ràng để có thể giúp cho developer khắc phục Chịu trách nhiệm kiểm thử Test Designer / Tester Cách kiểm thử Kiểm thử tay thủ công, theo bước định nghĩa testcase Xử lý ngoại lệ Liệt kê tất vấn đề liên quan phát sinh trình thực thi kiểm thử Bảng 91 Kiểm thử thiết bị 2.4 Kiểm tra luồng liệu Mục đích kiểm tra Đảm bảo đoạn mã nguồn kiểm tra lập trình khơng có bất thường luồng liệu Kỹ thuật Phân tích vẽ đồ thị dịng điều khiển, dòng điều khiển bản, dòng liệu từ xác định bất thường Tiêu chuẩn dừng Kiểm tra hết đoạn code chọn mà không tìm thấy bất thường Chịu trách nhiệm kiểm thử Test Designer / Tester Cách kiểm thử Kiểm thử tay thủ công, theo bước định nghĩa testcase Xử lý ngoại lệ Liệt kê tất vấn đề liên quan phát sinh trình thực thi kiểm thử Bảng 92 Kiểm tra luồng liệu 2.4 Kiểm thử UI UX Mục đích kiểm tra Đảm bảo chức kiểm tra hoạt động xác theo đặc tả yêu cầu Kỹ thuật Quan sát so sánh UI/UX ứng dụng với thiết kế Mockup/Wire frame ứng dụng từ xác định lỡi UI/UX xuất Tiêu chuẩn dừng Kiểm tra tất UI/UX mô tả mokup / wires frame Chịu trách nhiệm kiểm thử Test Designer / Tester Cách kiểm thử Kiểm thử tay thủ công, theo bước định nghĩa testcase Xử lý ngoại lệ Liệt kê tất vấn đề liên quan phát sinh trình thực thi kiểm thử Bảng 93 Kiểm thử UI UX S K L 0