TIỂU LUẬN CHUYÊN NGÀNH 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 I MỤC LỤC HÌNH ẢNH V DANH MỤC CÁC TỪ VIẾT TẮT XI PHẦN MỞ ĐẦU 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1.2 MỤC ĐÍCH CỦA ĐỀ TÀI 1.3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 1.3.1 Đối tượng nghiên cứu 1.3.2 Phạm vi nghiên cứu 1.4 PHÂN TÍCH CÁC ỨNG DỤNG CĨ LIÊN QUAN 1.5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC PHẦN NỘI DUNG Chương CƠ SỞ LÝ THUYẾT .4 1.1 NODEJS [1] .4 1.1.1 Định nghĩa NodeJS .4 1.1.2 Các tính NodeJS .4 1.1.3 Đối tượng ứng dụng NodeJS 1.1.4 Một số ưu, nhược điểm NodeJS 1.1.5 Sử dụng NodeJS đề tài 1.2 EXPRESSJS .7 1.2.1 Định nghĩa ExpressJS [2] 1.2.2 Tại nên sử dụng Expressjs lập trình web? [3] 1.2.3 Những tính Expressjs gì?[3] 1.2.4 Sử dụng ExpressJS đề tài 1.3 MONGODB [4] 1.3.1 Giới thiệu MongoDB 1.3.2 Sử dụng MongoDB mang lại lợi ích gì? .10 1.3.3 MongoDB có ưu nhược điểm gì? 11 1.3.4 Sử dụng MongoDB đề tài .13 1.4 RESTFUL API [5] 13 1.4.1 Các khái niệm 13 1.4.2 Cách thức hoạt động 14 1.4.3 Sử dụng RESTFUL API đề tài 14 1.5 REACTJS 14 1.5.1 Reactjs [6] 14 1.5.2 Đặc trưng ReactJS [7] 15 1.5.3 Sử dùng ReactJS đề tài 17 1.6 JSON WEB TOKEN [8] 17 1.6.1 Định nghĩa JSON Web Token 17 1.6.2 Cấu trúc JWT 17 1.6.3 Flow hệ thống sử dụng JWT 19 1.6.4 Hệ thống Verify chuỗi JWT nào? .20 1.6.5 Khi sử dụng JWT? 21 1.6.6 Sử dụng JSON Web Token hệ thống 21 Chương KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 21 2.1 KHẢO SÁT HIỆN TRẠNG 21 2.1.1 Duolingo 21 2.1.2 Elllo .22 2.1.3 BBC English 23 2.1.4 Voca.vn 24 2.1.5 Busuu .26 2.1.5.1.Các chức .26 2.1.6 Kết luận 27 đợi TC_SU_ 01 Kiểm tra phản hồi ứng dụng người dùng nhập thơng tin đăng ký xác - - - - TC_SU_ 02 Kiểm tra phản hồi ứng dụng người dùng đăng ký email tồn - - c tế 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 Người dùng đăng Email: ký “tranphuonglinh thành 1507@gmail.com” công, Mật khẩu: “123456” gửi Nhập lại mật mail xác khẩu:”123456” thực tài khoản chuyển hướng đến trang đăng nhập Như Đạt mon g đợi Click button “Đăng ký” trang chủ Nhập họ tên Nhập email Nhập mật Nhập Họ tên: Linh” Như Đạt mon g đợi “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” 186 lại mật Nhấn nút “Đăng ký” 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 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 - 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 xác Email: “18110146@student nhận 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 không trùng khớp” Như Đạt mon g đợi Click button “Đăng ký” trang chủ Nhập họ tên Nhập Họ tên: Linh” Như Đạt mon g đợi “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ệ” 187 hợp lệ - - - TC_SU_ 05 Kiểm tra phản hồi ứng dụng người dùng nhập mật ký tự - - - email khẩu:”123456” Nhập mật Nhập lại mật Nhấn nút “Đăng ký” 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 mật Email: “tranphuonglinh “Mật 1507gmail.com” Mật khẩu: “12345” Nhập lại mật ký tự” khẩu:”123456” 188 Như Đạt mon g đợi Hình 127 Kết kiểm thử test case TC_SU_01 Hình 128 Kết kiểm thử test case TC_SU_01 189 Hình 129 Kết kiểm thử test case TC_SU_02 Hình 130 Kết kiểm thử test case TC_SU_03 190 Hình 131 Kết kiểm thử test case TC_SU_04 Hình 132 Kết kiểm thử test case TC_SU_05 1.1.1.3 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ử 191 Kết Kết Trạn 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 - - - - TC_AW_ Kiểm tra - mong đợi 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ê n ngành Chọn cấp bậc Từ: “studying” 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” Chọn Từ: “study” thự c tế g thái Như Đạt mon g đợi Cấp bậc: “Chưa xác định” 192 Hiển Như Đạt 02 phản hồi ứng dụng người dùng thêm từ tồn - - - TC_AW_ 03 Kiểm tra phản hồi ứng dụng người 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ê n ngành Chọn cấp bậc Nghĩa từ: “học, thị mon nghiên cứu” thông g đợi Phiên âm: “studying” báo “Từ Loại từ: “động từ” study Chủ đề: “Khác” (v) Chuyên ngành: tồn “Không” từ Cấp bậc: “Chưa xác điển” định” Chọn mục “Quản lý từ vựng” Từ: “studying” Hiển Nghĩa từ: “học, thị thông nghiên cứu” báo Phiên âm: “studying” “Câu 193 Như Đạt mon g đợi dùng thêm từ có câu ví dụ khơng chứa 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ê n ngành Chọn cấp bậc Nhập câu ví dụ 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” 194 Hình 133 Kết kiểm thử test case TC_AW_01 Hình 134 Kết kiểm thử test case TC_AW_02 195 Hình 135 Kết kiểm thử test case TC_AW_03 4.1.4.4 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ử TC_AU_ 01 Kiểm tra phản hồi ứng dụng người dùng nhập thơng tin xác Chọn mục “Quản lý người dùng” Click icon Add trang quản lý Họ tên: Linh” Kết mong đợi “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 196 Kết thự c tế Kết Như Đạt mon g đợi - - 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 - Nhập họ tên Nhập email Chọn phân quyền Nhấn nút “Thêm ” 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: “tranphuonglinh19226 báo “This @gmail.com” email Phân quyền: “user” already exists” 197 Như Đạt mon g đợi Hình 136 Kết kiểm thử test case TC_AU_01 Hình 137 Kết kiểm thử test case TC_AU_02 198 PHẦN KẾT LUẬN 6.1 KẾT QUẢ ĐẠT ĐƯỢC Dự án hồ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 cịn đơ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 199 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 [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/ 200 ...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 :... 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ễ... Đố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: