Sản phẩm Website học tiếng Anh sử dụng Mern Stack với đầy đủ các tính năng cơ bản cho phía người dùng và người quản trị viên.. Lược đồ tuần tự chức năng Học ngữ pháp .... Lược đồ tuần tự
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 KHĨA LUẬN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE HỌC TIẾNG ANH SỬ DỤNG MERN STACK GVHD: TS LÊ VĂN VINH SVTH: TRẦN PHƯƠNG LINH VÕ NGỌC PHONG SKL009836 Tp Hồ Chí Minh, tháng 6/2022 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 - KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE HỌC TIẾNG ANH SỬ DỤNG MERN STACK GVHD : TS LÊ VĂN VINH SVTH: TRẦN PHƯƠNG LINH MSSV: 18110146 SVTH: VÕ NGỌC PHONG MSSV: 18110174 Tp Hồ Chí Minh, tháng năm 2022 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 - KHĨA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE HỌC TIẾNG ANH SỬ DỤNG MERN STACK GVHD : TS LÊ VĂN VINH SVTH: TRẦN PHƯƠNG LINH MSSV: 18110146 SVTH: VÕ NGỌC PHONG MSSV: 18110174 Tp Hồ Chí Minh, tháng năm 2022 Trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM Cộng Hòa Xã Hội Chủ Nghĩa Việt Nam Độc lập – Tự – Hạnh phúc Khoa Đào Tạo Chất Lượng Cao -*** *** -Tp Hồ Chí Minh, ngày 20 tháng 06 năm 2022 NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên: Trần Phương Linh MSSV: 18110146 Họ tên sinh viên: Võ Ngọc Phong MSSV: 18110174 Chuyên ngành: Công Nghệ Phần Mềm Lớp: 18110CLC Giáo viên hướng dẫn: TS Lê Văn Vinh Ngày giao đề tài: 07/03/2022 Ngày nộp đề tài: 18/06/2022 Tên đề tài: Xây dựng website học tiếng Anh sử dụng Mern Stack Các số liệu, tài liệu ban đầu Khảo sát trạng thông qua ứng dụng học tiếng Anh phổ biến áp dụng thơng tin tìm hiểu vào đồ án Nội dung thuyết minh tính tốn - 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, Restful API, MongoDB để giải vấn đề cung cấp dịch vụ API cho hệ thống học tiếng Anh trực tuyến - Xây dựng trang web học tiếng Anh trực tuyến với tính bản, đáp ứng nhu cầu học tiếng Anh cho người dùng - Xây dựng website để quản lý thông tin hệ thống cho người tạo nội dung quản trị viên Sản phẩm Website học tiếng Anh sử dụng Mern Stack với đầy đủ tính cho phía người dùng người quản trị viên Trưởng ngành Giáo viên hướng dẫn NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Giáo viên hướng dẫn TS 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 quý thầy cô Trong 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 nhóm 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 q 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 thực cịn có nhiều thiếu sót, nhóm hy vọng nhận ý kiến đóng góp q báu từ q thầy để 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 thực đề tài 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 Nhóm thực đề tài 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 LỜI CẢM ƠN V DANH MỤC BẢNG BIỂU I DANH MỤC HÌNH ẢNH V DANH MỤC CÁC TỪ VIẾT TẮT X 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 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC PHẦN NỘI DUNG Chương CƠ SỞ LÝ THUYẾT 1.1 NODE JS 1.1.1 Định nghĩa NodeJS 1.1.2 Các tính NodeJS 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 EXPRESS JS 1.2.1 Định nghĩa ExpressJS 1.2.2 Tại nên sử dụng ExpressJS lập trình web? 1.2.3 Những tính ExpressJS gì? 1.2.4 Sử dụng ExpressJS đề tài 1.3 MONGODB 1.3.1 Giới thiệu MongoDB 1.3.2 Sử dụng MongoDB mang lại lợi ích gì? 1.3.3 MongoDB có ưu nhược điểm gì? 10 1.3.4 Sử dụng MongoDB đề tài 10 1.4 RESTFUL API 10 1.4.1 Các khái niệm 10 1.4.2 Cách thức hoạt động 11 1.4.3 Sử dụng RESTFUL API đề tài 11 1.5 REACT JS 11 1.5.1 ReactJS gì? 11 1.5.2 Đặc trưng ReactJS 11 1.5.3 Sử dùng ReactJS đề tài 12 1.6 JSON WEB TOKEN 12 1.6.1 Định nghĩa JSON Web Token 12 1.6.2 Cấu trúc JWT 12 1.6.3 Flow hệ thống sử dụng JWT 14 1.6.4 Sử dụng JSON Web Token hệ thống 15 Chương KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 16 2.1 KHẢO SÁT HIỆN TRẠNG 16 2.1.1 Duolingo 16 2.1.2 Elllo 17 2.1.3 BBC English 18 2.1.4 Voca.vn 19 2.1.5 Busuu 20 2.1.6 Kết luận 21 2.2 XÁC ĐỊNH YÊU CẦU 21 2.2.1 Yêu cầu chức 21 2.2.2 Yêu cầu phi chức 25 TC_SU_05 Kiểm tra phản hồi ứng Click button “Đăng Họ tên: “Phuong Linh” Email: “tranphuonglinh dụng người dùng 1507gmail.com” ký” Mật khẩu: “12345” trang nhập mật ký tự chủ Nhập lại Nhập họ khẩu:”123456” tên - Nhập email Nhập mật - Nhập lại mật - Nhấn nút “Đăng ký” 193 Thông Như Đạt báo lỗi mong mật đợi “Mật mật ký tự” Hình 4.4 Kết kiểm thử test case TC_SU_01 Hình 4.5 Kết kiểm thử test case TC_SU_01 194 Hình 4.6 Kết kiểm thử test case TC_SU_02 Hình 4.7 Kết kiểm thử test case TC_SU_03 195 Hình 4.8 Kết kiểm thử test case TC_SU_04 Hình 4.9 Kết kiểm thử test case TC_SU_05 4.2.2.3 Kết kiểm thử chức Thêm từ vựng Bảng 4.6 Kết kiểm thử chức Thêm từ vựng 196 STT Các Mô tả bước Dữ liệu thử kiểm thử TC_AW_01 Kiểm tra phản hồi Từ: “studying” Chọn mục ứng “Quản dụng lý Nghĩa từ: nghiên cứu” từ Phiên âm: “studying” vựng” Click thơng tin đầy đủ xác icon Chủ đề: “Khác” Add Chuyên ngành: “Không” trang quản lý Cấp bậc: “Chưa xác định” Nhập từ Nhập Loại từ: “động từ” 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 197 Trạng mong đợi thái thực tế Hiển thị Như Đạt mong “học, thông báo đợi người dùng nhập - - Kết Kết “Thêm từ thành công” TC_AW_02 Kiểm tra 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 dùng thêm từ có câu ví dụ không Chọn mục “Quản Từ: “study” Nghĩa nghiên cứu” từ: Hiển thị Như Đạt mong “học, thông báo “Từ đợi lý từ Phiên âm: “studying” vựng” Loại từ: “động từ” Click icon Chủ đề: “Khác” Add Chuyên ngành: “Không” trang quản lý Cấp bậc: “Chưa xác định” study (v) tồn từ điển” 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 Chọn mục “Quản lý từ vựng” Click icon Add trang Từ: “studying” Hiển thị Như Đạt mong Nghĩa từ: “học, thơng báo đợi nghiên cứu” “Câu ví Phiên âm: “studying” dụ phải Loại từ: “động từ” chứa từ vựng Chủ đề: “Khác” mới” Chuyên ngành: “Không” 198 chứa từ vựng - quản lý Cấp bậc: “Chưa xác định” Nhập từ Nhập Câu ví dụ: “I English” 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 dụ ví 199 study Hình 4.10 Kết kiểm thử test case TC_AW_01 Hình 4.11 Kết kiểm thử test case TC_AW_02 200 Hình 4.12 Kết kiểm thử test case TC_AW_03 4.2.2.4 Kết kiểm thử chức Thêm người dùng Bảng 4.7 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 Họ tên: “Phuong Linh” mục Email: “tranphuonglinh “Quản lý 1507@gmail.com” người Phân quyền: “user” dùng” Click icon Add trang quản lý Nhập họ tên 201 Kết Kết mong đợi thực tế Kết Hiển thị Như Đạt thông mong báo đợi thành công, quay lại quản lý người dùng - Nhập - email Chọn phân quyền - TC_AU_02 Kiểm phản Nhấn nút “Thêm” tra - Chọn Họ tên: “Phuong Linh” Hiển thị Như hồi mục Email: thông mong báo “This email already exists” đợi ứng dụng người dùng thêm tài khoản email “Quản lý “tranphuonglinh19226 người @gmail.com” dùng” Phân quyền: “user” Click icon Add tồn trang - quản lý Nhập họ tên Nhập email Chọn phân quyền Nhấn nút “Thêm” 202 Đạt Hình 4.13 Kết kiểm thử test case TC_AU_01 Hình 4.14 Kết kiểm thử test case TC_AU_02 203 PHẦN KẾT LUẬN 204 5.1 KẾT QUẢ ĐẠT ĐƯỢC Nhóm thực sử dụng cơng nghệ Mern Stack để xây dựng website, 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 Nhóm á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 code: https://github.com/phongvn2611/LearningEnglishWebsite/tree/main 5.2 ƯU ĐIỂM - Giao diện dễ nhìn, thân thiện với người dùng Hệ thống đáp ứng chức website học tiếng Anh trực tuyến - Chức làm thi thử theo sát với format Toeic Ứng dụng có trị chơi giúp người dùng ghi nhớ từ vựng tốt 5.3 NHƯỢC ĐIỂM VÀ HƯỚNG PHÁT TRIỂN Một số chức phát triển thêm tương lai để cải tiến ứng dụng như: - Chức quản lý tiến độ học Chức kiểm tra trình độ người dùng Chức học theo lộ trình 205 TÀI LIỆU THAM KHẢO [1] Topdev.vn, Expressjs Tất tần tật Express.js, https://topdev.vn/blog/express-js-la-gi/ [2] topdev.vn, JSON Web Token gì, https://topdev.vn/blog/json-web-token-la-gi/ 206 S K L 0