Đồ án xây dựng website hỗ trợ học tiếng anh

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE HỖ TRỢ HỌC TIẾNG ANH GV HƯỚNG DẪN: TH.S TRẦN THỊ HỒNG YẾN SINH VIÊN THỰC HIỆN: NGUYỄN MINH HIẾU – 20520183 ĐẶNG BẢO TRÂM – 205202033 LỚP: SE121.N21 Thành phố Hồ Chí Minh, tháng 06 năm 2023 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN XÂY DỰNG WEBSITE HỖ TRỢ HỌC TIẾNG ANH GV HƯỚNG DẪN: TH.S TRẦN THỊ HỒNG YẾN SINH VIÊN THỰC HIỆN: NGUYỄN MINH HIẾU – 20520183 ĐẶNG BẢO TRÂM – 205202033 LỚP: SE121.N21 Thành phố Hồ Chí Minh, tháng 06 năm 2023 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Người nhận xét (Ký ghi rõ họ tên) Trần Thị Hồng Yến LỜI CẢM ƠN Nhóm xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người trực tiếp tận tình hướng dẫn nhóm suốt q trình thực đồ án Nhóm vơ biết ơn tận tình dẫn q trình nhóm thực đề tài Bước đầu tiếp cận cơng nghệ mới, nhóm cịn nhiều thiếu sót mặt kiến thức kinh nghiệm thực tiễn nên khơng tránh khỏi nhiều sai sót Những nhận xét, góp ý chân tình sở để nhóm cải tiến hồn thiện đề tài cách tốt Nếu Không lời bảo tận tình đồ án nhóm khó để thực Trong q trình thực đồ án, nhóm khơng tránh khỏi sai sót, chúng em kính mong nhận góp ý, hướng dẫn để hồn thiện đồ án nữa, không dừng lại đồ án mà phát triển lên thành đồ án Chúng em xin gửi lời cảm ơn chân thành đến cô TP.HCM, ngày 17 tháng năm 2023 Nhóm sinh viên thực Nguyễn Minh Hiếu - Đặng Bảo Trâm MỤC LỤC TÓM TẮT ĐỒ ÁN CHƯƠNG 1: MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Mục tiêu đề tài 1.3 Đối tượng nghiên cứu 1.4 Phạm vi 1.5 Phân tích đánh giá hướng nghiên cứu có 1.5.1 Phân tích hướng nghiên cứu phương pháp áp dụng 1.5.2 Đánh giá ưu điểm hạn chế nghiên cứu 1.6 Vấn đề tồn 1.6.1 Liệt kê vấn đề chưa giải 1.6.2 Đánh giá tầm quan trọng vấn đề tác động 1.7 Vấn đề cần tập trung nghiên cứu giải 1.7.1 Xác định trình bày vấn đề mà đề tài cần tập trung vào 1.7.2 Giải thích tầm quan trọng lợi ích 1.7.3 Đề xuất phương pháp nghiên cứu phân tích CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Ngôn ngữ Javascript 2.2 ReactJS 12 2.3 HTML 14 2.4 CSS 16 2.5 NodeJS 18 2.6 MongoDB 20 2.7 ExpressJS 21 2.8 Mongoose 22 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 23 3.1 Phân tích yêu cầu 23 3.1.1 Yêu cầu chức 23 3.1.2 Yêu cầu phi chức 24 3.2 Xây dựng hệ thống 25 3.2.1 Kiến trúc hệ thống 25 3.2.2 Mô tả thành phần hệ thống 25 3.3 Thiết kế sơ đồ Use case 27 3.3.1 Sơ đồ Use case 27 3.3.2 Danh sách Actor 29 3.3.3 Danh sách Use case 29 3.3.4 Danh sách đặc tả Use case 30 3.3.4.1 Use case Đăng nhập 30 3.4 Thiết kế liệu 47 3.4.1 Sơ đồ Logic 47 3.4.2 Mô tả chi tiết bảng liệu 49 CHƯƠNG 4: XÂY DỰNG TRANG WEB 55 4.1 Danh sách giao diện 55 4.2 Chi tiết giao diện 56 4.2.1 Login 56 4.2.2 Sign Up 58 4.2.3 Forgot Pass 59 4.2.4 Verify 60 4.2.5 Home 61 4.2.6 ChangInfor 62 4.2.7 Courses 64 4.2.8 Course Detail 65 4.2.9 Vocab 67 4.2.10 Game1 68 4.2.11 Game2 69 4.2.12 Game3 70 4.2.13 Game4 71 4.2.14 Game5 72 4.2.15 Big test 73 4.2.16 Video 74 4.2.17 MiniGame 75 4.2.18 Score 76 4.2.19 League 77 KẾT LUẬN 78 TÀI LIỆU THAM KHẢO 80 DANH MỤC HÌNH Hình 2.1 Logo Javascript Hình 2.2 Logo ReactJS 12 Hình 2.3 Logo HTML 14 Hình 2.4 Logo CSS 16 Hình 2.5 Logo NodeJS 18 Hình 2.6 Logo MongoDB 20 Hình 2.7 Logo ExpressJS 21 Hình 2.8 Logo Mongoose 22 Hình 3.1 Kiến trúc hệ thống 25 Hình 3.2 Sơ đồ Use case người dùng chưa đăng nhập 27 Hình 3.3 Sơ đồ Use case người dùng đăng nhập 28 Hình 3.4 Sơ đồ Logic 47 Hình 4.1 Giao diện trang Login 56 Hình 4.2 Giao diện trang Sign Up 58 Hình 4.3 Giao diện trang Forgot Password 59 Hình 4.4 Giao diện trang Verify 60 Hình 4.5 Giao diện trang Home 61 Hình 4.6 Giao diện trang ChangeInfor 62 Hình 4.7 Giao diện trang Courses 64 Hình 4.8 Giao diện trang CoursesDetail 65 Hình 4.9 Giao diện trang Vocab 67 Hình 4.10 Giao diện trang Game1 68 Hình 4.11 Giao diện trang Game 69 Hình 4.12 Giao diện trang Game3 70 Hình 4.13 Giao diện trang Game 71 Hình 4.14 Giao diện trang Game5 72 Hình 4.15 Giao diện trang Big test 73 Hình 4.16 Giao diện trang Video 74 Hình 4.17 Giao diện trang MiniGame 75 Hình 4.18 Giao diện trang Score 76 Hình 4.19 Giao diện trang League 77 DANH MỤC BẢNG Bảng 3.1 Yêu cầu chức 23 Bảng 3.2 Bảng mô tả thành phần hệ thống 25 Bảng 3.3 Danh sách Actors 29 Bảng 3.4 Danh sách Use case 29 Bảng 3.5 Đặc tả Use case Đăng nhập 30 Bảng 3.6 Đặc tả Use case Đăng ký 32 Bảng 3.7 Đặc tả Use case Quên mật 33 Bảng 3.8 Đặc tả Use case thay đổi thông tin 34 Bảng 3.9 Đặc tả Use case đăng xuất 36 Bảng 3.10 Đặc tả Use case Xem bảng xếp hạng tổng thể 37 Bảng 3.11 Đặc tả Use case Xem trang giới thiệu trang web 37 Bảng 3.12 Đặc tả Use case Xem khóa học 39 Bảng 3.13 Đặc tả Use case Liên hệ 40 Bảng 3.14 Đặc tả Use case Xem danh sách từ vựng 41 Bảng 3.15 Đặc tả Use case xem danh sách học 42 Bảng 3.16 Đặc tả Use case xem bảng xếp hạng khóa học 42 Bảng 3.17 Đặc tả Use case bắt đầu khóa học 43 Bảng 3.18 Đặc tả Use case chơi trò chơi 44 Bảng 3.19 Danh sách bảng sở liệu 48 Bảng 3.20 Mô tả chi tiết bảng NGUOIDUNG 49 Bảng 3.21 Mô tả chi tiết bảng ND_KH 49 Bảng 3.22 Mô tả chi tiết bảng KHOAHOC 50 Bảng 3.23 Mô tả chi tiết bảng BAIHOC 50 Bảng 3.24 Mô tả chi tiết bảng LICHSUHOCTAP 51 Bảng 3.25 Mô tả chi tiết bảng BAIKIEMTRA 51 Bảng 3.26 Mô tả chi tiết bảng TUVUNG 52 Bảng 3.27 Mô tả chi tiết bảng CAUHOI_TUVUNG 52 • Màn hình CoursesDetail có bảng biểu trình bày nội dung phải học khóa học • Màn hình CoursesDetail có bảng tên khóa học button Start Learn/ Listen để người dùng bắt đầu học khóa học 66 4.2.9 Vocabulary Hình 4.9 Giao diện trang Vocab 67 • Màn hình Vocab có menu, footer tương tự trang Login • Màn hình Vocab có bảng biểu trình bày chi tiết từ vựng mà người dùng cần học • Màn hình Vocab có button “Pre” để trở trang trước, button “Next” để tiếp tục sang trang Game để ôn tập 4.2.10 Game Hình 4.10 Giao diện trang Game1 • Màn hình Game có menu, footer tương tự trang Login • Màn hình Game có thơng tin trình bày thể loại học, vị trí học tên học • Màn hình Game có câu hỏi button chọn đáp án • Màn hình Game có button bottom dùng để chuyển trang nộp 68 4.2.11 Game Hình 4.11 Giao diện trang Game • Màn hình Game có menu, footer tương tự trang Login • Màn hình Game có thơng tin trình bày, button bottom giống game • Màn hình Game có câu hỏi, hình ảnh textbox để người dùng trả lời 69 4.2.12 Game Hình 4.12 Giao diện trang Game3 • Màn hình Game có menu, footer tương tự trang Login • Màn hình Game có thơng tin trình bày, button bottom giống game • Màn hình Game có table, button, button kéo vào table, đáp án chuyển trang sau 70 4.2.13 Game Hình 4.13 Giao diện trang Game • Màn hình Game có menu, footer tương tự trang Login • Màn hình Game có thơng tin trình bày, button bottom giống game • Màn hình Game có table, button kéo vào table, đáp án chuyển trang sau 71 4.2.14 Game Hình 4.14 Giao diện trang Game5 • Màn hình Game có menu, footer tương tự trang Login • Màn hình Game có thơng tin trình bày, button bottom giống game • Màn hình Game u cầu người dùng click vào biểu tượng âm để nghe thông tin chọn đáp án xác button 72 4.2.15 Big test Hình 4.15 Giao diện trang Big test • Màn hình Big Test có menu, footer tương tự trang Login • Màn hình Big Test có thơng tin tương tự Game • Màn hình Big Test có test nhỏ lấy từ component Game 1, Game 2, Game 3, Game • Màn hình Big Test có button bottom “Pre”, “Submit” 73 4.2.16 Video Hình 4.16 Giao diện trang Video • Màn hình Video có menu, footer tương tự trang Login • Màn hình Video có tên chủ đề video kể câu chuyện chủ đề 74 4.2.17 MiniGame Hình 4.17 Giao diện trang MiniGame • Màn hình MiniGame có menu, footer tương tự trang Login • Màn hình MiniGame có hình ảnh từ vựng nghĩa Khi người dùng chọn cặp từ hồn thành game 75 4.2.18 Score Hình 4.18 Giao diện trang Score • Màn hình Scores có menu, footer tương tự trang Login • Màn hình Scores có biểu đồ hiển thị tỷ lệ điểm kiểm tra người dùng • Màn hình Scores có bảng trình bày phần trăm sai người dùng, câu câu sai người dùng • Màn hình Scores có button để chuyển trang 76 4.2.19 League Hình 4.19 Giao diện trang League • Màn hình League có menu, footer tương tự trang Login • Màn hình League có bảng biểu trình bày thứ hạng người chơi, trình bày vị trí người chơi bên 77 KẾT LUẬN Ưu điểm: • Front-end backend làm độc lập nên không cần phải chờ đợi nhau, làm phần việc người • Sử dụng cơng nghệ phổ biến (reactjs nodejs) có cộng đồng hỗ trợ mạnh mẽ • Mục tiêu đồ án chưa phức tạp, chủ yếu để làm quen công nghệ phục vụ cho đồ án có hội • Lần làm việc với công nghệ reactjs nodejs nên tốn nhiều thời gian để tìm hiểu cơng nghệ • Chưa có nghiệp vụ cao giảng dạy tiếng Anh nên chưa biết xếp chương trình cho phù hợp với người bắt đầu; nhóm chủ yếu lựa chọn từ vựng thường gặp đời sống ngày Hạn chế: • Giao diện thân thiện, đơn giản, dễ thao tác • Có hỗ trợ responsive sử dụng nhiều thiết bị • Đáp ứng tính học từ vựng qua câu hỏi • Số lượng tính cịn hạn chế • Các khóa học cố định, chưa hỗ trợ tùy biến • Chưa hỗ trợ đánh giá, trao đổi trực tuyến người Hướng phát triển: 78 • Bổ sung thêm đối tượng: người đăng bài, quản trị viên duyệt đăng • Bổ sung thêm tính năng: đăng khóa học, lưu lại từ vựng vào để học theo dạng flashcard, tra cứu từ vựng, bổ sung thêm tính điểm danh • Bổ sung thêm tính tạo thi đồng loạt cho học viên tham gia; tính đăng blog tiếng Anh • Tạo thêm diễn đàn để người trao đổi việc học anh văn 79 TÀI LIỆU THAM KHẢO [1] Cloud, F (2022, 1) fptcloud Đã truy lục 26, 2023, từ https://fptcloud.com/: https://fptcloud.com/javascript/ [2] Google (2023, 1) Firebase Đã truy lục 25, 2023, từ Firebase.com: https://console.firebase.google.com [3] mongoosejs.com (2023, 2) mongoosejs Đã truy lục 30, 2023, từ mongoosejs.com/docs/guide.html: https://mongoosejs.com/docs/guide.html [4] nodejs.org (2023, 11) nodejs.org Đã truy lục 15, 2023, từ https://nodejs.org/en/docs: https://nodejs.org/en/docs [5] react.dev (2023, 1) react.dev Đã truy lục 23, 2023, từ react.dev/learn: https://react.dev/learn [6] Studocu (2023, 1) Studocu Đã truy lục 14, 2023, từ www.studocu.com: https://www.studocu.com/vn/document/truong-daihoc-bach-khoa-ha-noi [7] www.w3schools.com (2023, 1) www.w3schools.com Đã truy lục 30, 2023, từ www.w3schools.com: https://www.w3schools.com/html/ 80