XÂY DỰNG WEBSITE HỌC TIẾNG ANH SỬ DỤNG MERN STACK

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN -o0o - TIỂU LUẬN CHUYÊN NGÀNH XÂY DỰNG WEBSITE HỌC TIẾNG ANH SỬ DỤNG MERN STACK GVHD : TS LÊ VĂN VINH SINH VIÊN THỰC HIỆN MSSV TRẦN PHƯƠNG LINH 18110146 VÕ NGỌC PHONG 18110174 Tp Hồ Chí Minh, tháng 12 năm 2021 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN -o0o - TIỂU LUẬN CHUYÊN NGÀNH XÂY DỰNG WEBSITE HỌC TIẾNG ANH SỬ DỤNG MERN STACK GVHD : TS LÊ VĂN VINH SINH VIÊN THỰC HIỆN MSSV TRẦN PHƯƠNG LINH 18110146 VÕ NGỌC PHONG 18110174 Tp Hồ Chí Minh, tháng 12 năm 2021 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Giáo viên hướng dẫn Lê Văn Vinh NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Giáo viên phản biện LỜI CẢM ƠN Lời đầu tiên, nhóm sinh viên thực báo cáo xin gửi lời cảm ơn chân thành đến nhà trường q thầy Trong q trình học tập trường Đại học Sư phạm kỹ thuật thành phố Hồ Chí Minh, q thầy tạo nhiều điều kiện cho chúng em học tập tốt nhất, truyền đạt kiến thức tảng chuyên ngành, hỗ trợ, giúp đỡ nhóm gặp khó khăn trình học tập lúc thực đồ án Tiếp đó, nhóm sinh viên thực báo cáo xin gửi lời cảm ơn sâu sắc đến thầy Lê Văn Vinh – người hướng dẫn, giúp đỡ cho nhóm suốt q trình thực đề tài Do có hạn chế kiến thức thiếu kinh nghiệm việc tìm hiểu thực tế, nhóm chúng em cịn có nhiều thiếu sót, nhóm hy vọng nhận ý kiến đóng góp quý báu từ quý thầy cô để rút kinh nghiệm cho đồ án khác tương lai Nhóm thực xin chân thành cảm ơn Lời cuối cùng, nhóm chúng em xin chúc thầy có thật nhiều sức khỏe để tiếp tục thực sứ mệnh cao truyền đạt kiến thức bổ ích cho nhiều hệ sinh viên Chúng em xin bày tỏ lịng biết ơn thầy nhiều! Nhóm thực Trần Phương Linh Võ Ngọc Phong TĨM TẮT Các vấn đề nghiên cứu - Tìm hiểu hệ thống tương tự, phân tích để tìm điểm mạnh phù hợp để áp dụng - Tìm hiểu Reactjs, Framework Expressjs Nodejs để giải vấn đề cung cấp dịch vụ API cho hệ thống học tiếng Anh trực tuyến Các vấn đề phát sinh - Bảo mật yêu cầu quan trọng cho website thực tế - Không thể lưu video, audio Blob Các phương pháp giải vấn đề - Sử dụng JWT để cải thiện yêu cầu bảo mật cho website - Chuyển đổi video, audio chuỗi base64 lưu chuỗi vào database Kết đạt - Hệ thống học tiếng Anh trực tuyến bao gồm: giao diện cho phía người dùng giao diện phía người quản trị - Giao diện dễ sử dụng, thân thiện thu hút người dùng - Dễ dàng quản lý, sửa chữa mở rộng MỤC LỤC - MỤC LỤC BẢNG 10 - TC_SU_ 02 Kiểm tra phản hồi ứng dụng người dùng đăng ký email tồn - - TC_SU_ 03 Kiểm tra phản hồi ứng dụng người dùng nhập mật xác nhận mật không - - Nhấn nút “Đăng ký” đến trang đăng nhập Click button “Đăng ký” trang chủ Nhập họ tên Nhập email Nhập mật Nhập lại mật Nhấn nút “Đăng ký” Họ tên: Linh” “Phuong Thơng báo lỗi xuất Email: “18110146@student phía hcmute.edu.vn” tài Mật khẩu: “123456” khoản Nhập lại mật người dùng: khẩu:”123456” “This email already exists” Như Đạt mon g đợi Click button “Đăng ký” trang chủ Nhập họ tên Nhập email Nhập mật Họ tên: Linh” Như Đạt mon g đợi “Phuong Thông báo lỗi xác Email: nhận “18110146@student mật hcmute.edu.vn” Mật khẩu: “123456” “Nhập Nhập lại mật xác nhận khẩu:”123456789” mật 212 trùng khớp - - TC_SU_ 04 Kiểm tra phản hồi ứng dụng người dùng nhập email không hợp lệ - - - - TC_SU_ 05 Kiểm tra phản hồi ứng dụng người dùng nhập mật - Nhập lại mật Nhấn nút “Đăng ký” không trùng khớp” Click button “Đăng ký” trang chủ Nhập họ tên Nhập email Nhập mật Nhập lại mật Nhấn nút “Đăng ký” Họ tên: Linh” “Phuong Thông báo lỗi Email: trường “tranphuonglinh nhập 1507gmail.com” “Email Mật khẩu: “123456” không Nhập lại mật hợp lệ” Click button “Đăng ký” trang chủ Nhập họ tên Nhập Họ tên: Linh” Như Đạt mon g đợi khẩu:”123456” “Phuong Thông báo lỗi mật Email: “tranphuonglinh “Mật 1507gmail.com” Mật khẩu: “12345” Nhập lại mật ký tự” 213 Như Đạt mon g đợi ký tự - - - email khẩu:”123456” Nhập mật Nhập lại mật Nhấn nút “Đăng ký” Hình 127 Kết kiểm thử test case TC_SU_01 214 Hình 128 Kết kiểm thử test case TC_SU_01 Hình 129 Kết kiểm thử test case TC_SU_02 215 Hình 130 Kết kiểm thử test case TC_SU_03 Hình 131 Kết kiểm thử test case TC_SU_04 216 Hình 132 Kết kiểm thử test case TC_SU_05 Kết kiểm thử chức Thêm từ vựng Bảng 89 Kết kiểm thử chức Thêm từ vựng STT Mô tả Các bước Dữ liệu thử kiểm thử TC_AW_ 01 Kiểm tra phản hồi ứng dụng người dùng nhập thông tin đầy đủ xác - Chọn mục “Quản lý từ vựng” Click icon Add trang quản lý Nhập Từ: “studying” Kết mong đợi Hiển Nghĩa từ: “học, thị thông nghiên cứu” báo Phiên âm: “studying” “Thêm Loại từ: “động từ” từ thành Chủ đề: “Khác” công” Chuyên ngành: “Không” Cấp bậc: “Chưa xác định” 217 Kết thự c tế Trạn g thái Như Đạt mon g đợi - - - - TC_AW_ 02 Kiểm tra phản hồi ứng dụng người dùng thêm từ tồn - - từ Nhập nghĩa từ Nhập phiên âm Chọn loại từ Chọn chủ đề Chọn chuyê n ngành Chọn cấp bậc Chọn mục “Quản lý từ vựng” Click icon Add trang quản lý Nhập từ Nhập nghĩa từ Nhập phiên Từ: “study” Hiển Nghĩa từ: “học, thị thông nghiên cứu” báo Phiên âm: “studying” “Từ Loại từ: “động từ” study (v) Chủ đề: “Khác” tồn Chuyên ngành: “Không” từ Cấp bậc: “Chưa xác điển” định” 218 Như Đạt mon g đợi - TC_AW_ 03 Kiểm tra phản hồi ứng dụng người dùng thêm từ có câu ví dụ khơng chứa từ vựng - - - âm Chọn loại từ Chọn chủ đề Chọn chuyê n ngành Chọn cấp bậc Chọn mục “Quản lý từ vựng” Click icon Add trang quản lý Nhập từ Nhập nghĩa từ Nhập phiên âm Chọn loại từ Chọn chủ đề Chọn chuyê Từ: “studying” Hiển Nghĩa từ: “học, thị thông nghiên cứu” báo Phiên âm: “studying” “Câu Loại từ: “động từ” ví dụ phải Chủ đề: “Khác” chứa từ Chuyên ngành: vựng “Không” mới” Cấp bậc: “Chưa xác định” Câu ví dụ: “I study English” 219 Như Đạt mon g đợi - - n ngành Chọn cấp bậc Nhập câu ví dụ Hình 133 Kết kiểm thử test case TC_AW_01 220 Hình 134 Kết kiểm thử test case TC_AW_02 Hình 135 Kết kiểm thử test case TC_AW_03 Kết kiểm thử chức Thêm người dùng Bảng 90 Kết kiểm thử chức Thêm người dùng STT Mô tả Các bước Dữ liệu thử kiểm thử 221 Kết Kết Kết mong đợi TC_AU_ 01 Kiểm tra phản hồi ứng dụng người dùng nhập thơng tin xác - - TC_AU_ 02 Kiểm tra phản hồi ứng dụng người dùng thêm tài khoản email tồn thự c tế Chọn mục “Quản lý người dùng” Click icon Add trang quản lý Nhập họ tên Nhập email Chọn phân quyền Nhấn nút “Thêm ” Họ tên: Linh” “Phuong Hiển thị thông Email: báo “tranphuonglinh thành 1507@gmail.com” công, Phân quyền: “user” quay lại quản lý người dùng Như Đạt mon g đợi Chọn mục “Quản lý người dùng” Click icon Add Họ tên: Linh” Như Đạt mon g đợi “Phuong Hiển thị thông Email: “tranphuonglinh19226 báo “This @gmail.com” email Phân quyền: “user” already exists” 222 - trang quản lý Nhập họ tên Nhập email Chọn phân quyền Nhấn nút “Thêm ” Hình 136 Kết kiểm thử test case TC_AU_01 223 Hình 137 Kết kiểm thử test case TC_AU_02 224 PHẦN KẾT LUẬN 6.1 KẾT QUẢ ĐẠT ĐƯỢC Dự án hoàn thiện 100%, cung cấp nhìn tổng quan kiến trúc thiết kế hệ thống, hoàn thiện tất chức ứng dụng đề từ đầu Từ có nhìn tổng quan cho hoạt động hệ thống học tiếng Anh trực tuyến Chúng em áp dụng kiến thức học kiến thức tự tìm tịi để xây dựng trang web Link truy cập website dự án: https://englishwebsite.herokuapp.com/ Link Github source https://github.com/phongvn2611/LearningEnglishWebsite/tree/main code: 6.2 ƯU ĐIỂM - Giao diện thân thiện với người dùng, dễ sử dụng Hệ thống đáp ứng chức website học tiếng Anh trực tuyến Ứng dụng dễ bảo trì nâng cấp 6.3 NHƯỢC ĐIỂM - Chưa thể hạn chế hết tất trường hợp lỗi web Các chức trang web đơn giản Chưa có chức quản lý tiến độ học 6.4 HƯỚNG PHÁT TRIỂN - Cần thiết kế thêm chức quản lý tiến độ học người dùng Cải thiện thêm chức phân loại học theo trình độ khác Tạo diễn đàn giao lưu tiếng anh trực tuyến Cần thêm chức kiểm tra trình độ người dung Thiết kế thêm chức cho phép người dùng thi thử qua kiểm tra trực tuyến Thêm chức tra cứu từ điển Thêm chức ghim học từ vựng TÀI LIỆU THAM KHẢO [1] Doan Van Phu, Tổng quan NodeJS - Một số điểm khác biệt với PHP, viblo.asia, 15/10/2020, https://viblo.asia/p/tong-quan-ve-nodejs-mot-so-diem-khacbiet-voi-php-1Je5E9945nL 225 [2] Topdev.vn, Expressjs Express.js, /https://topdev.vn/blog/express-js-la-gi/ Tất tần tật [3] Pokimobile.vn, Expressjs Là Gì – Tất Tần Tật Về Khái Niệm Express, https://pokimobile.vn/expressjs-la-gi-1639669048#Expressjs_la_gi [4] Tuấn Thanh, MongoDB gì? Tìm hiểu chi tiết MongoDB, wiki.tino.org, https://wiki.tino.org/mongodb-la-gi/ [5] Lê Đức Mạnh, RESTful API https://viblo.asia/p/restful-api-la-gi-1Je5EDJ4lnL gì, viblo.asia, 05/09/2020, [6] Hai G, React Và hoạt động nào, hostinger.vn, 23/03/2020, https://www.hostinger.vn/huong-dan/react-la-gi-va-no-hoat-dong-nhu-the-nao [7] topdev.vn, ReactJS – Những điều bạn https://topdev.vn/blog/reactjs-nhung-dieu-ban-can-phai-biet/ cần phải biết, [8] topdev.vn, JSON Web Token gì, https://topdev.vn/blog/json-web-token-la-gi/ 226 ... cho đề tài ? ?Xây dựng trang web học tiếng Anh sử dụng MERN STACK? ?? sau: Đề tài xây dựng trang web học tiếng Anh nên chức phải có học ngữ pháp, từ vựng, phiên âm, luyện nghe Giao diện học phải dễ nhìn... Đối với đề tài ? ?Xây dựng trang web học tiếng Anh sử dụng MERN STACK? ??, đối tượng nghiên cứu dựa nhu cầu cần thiết phải học tiếng Anh Đồng thời kèm theo cơng nghệ áp dụng để tạo ứng dụng Cụ thể sau:... nghiệp Nhận thấy tầm quan trọng tiếng Anh, nhóm chúng em định chọn đề tài ? ?Xây dựng trang web học tiếng Anh sử dụng MERN STACK? ?? để giúp người học rèn luyện tiếng Anh, củng cố thêm vốn từ vựng 1.2