Đồ án xây dựng website hỗ trợ học tiếng anh cho người đi làm

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN XÂY DỰNG WEBSITE HỖ TRỢ HỌC TIẾNG ANH CHO NGƯỜI ĐI LÀM GV HƯỚNG DẪN: TS Đỗ Thị Thanh Tuyền SV THỰC HIỆN: Nguyễn Khánh Huyền – 20520558 TP HỒ CHÍ MINH, 2023 LỜI CẢM ƠN Em xin chân thành gửi lời cảm ơn đến cô Đỗ Thị Thanh Tuyền giúp đỡ hướng dẫn em suốt q trình hồn thành đồ án xây dựng Website Hỗ trợ học tiếng Anh cho người làm Cảm ơn cô dành thời gian giúp em hiểu rõ chủ đề, giải đáp thắc mắc, gợi ý hướng giải vấn đề hướng phát triển để đồ án trở nên hoàn thiện Nhờ vào giúp đỡ tận tình đó, em hoàn thành đồ án cách tốt Bên cạnh đó, em trao dồi nhiều kĩ cứng kỹ mềm khác kỹ tư duy, giải vấn đề, lên kế hoạch ghi chép Em chân thành cảm ơn lời động viên, tư vấn quan tâm cô dành cho em Những lời động viên giúp em có thêm động lực để hoàn thành đồ án, dần ổn định hướng Em mong có hội nhận cố vấn, hướng dẫn cô tương lai Sinh viên thực hiện: Nguyễn Khánh Huyền MSSV: 20520558 MỤC LỤC CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 12 1.1 Lí chọn đề tài .12 1.2 Mục đích nghiên cứu 12 1.3 Phạm vi ứng dụng 13 1.4 Đối tượng sử dụng 14 CHƯƠNG 2: CÔNG NGHỆ VÀ PHƯƠNG PHÁP THỰC HIỆN 15 2.1 Các công nghệ, thư viện, ngôn ngữ, công cụ sử dụng 15 2.1.1 Các ngôn ngữ: Typescript, TSX, CSS/SCSS 15 2.1.2 Công nghệ/thư viện: React, Redux, Firebase 16 2.1.3 Các công cụ: Github, Figma, Visual Studio Code 18 2.1.4 Các thư viện khác 18 2.2 Phương pháp phát triển 18 2.3 Kết mong đợi 19 CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG .20 3.1 Khảo sát 20 3.1.1 Khảo sát giao diện người dùng qua form: .20 3.1.2 Khảo sát chức qua Website liên quan: .22 3.2 Use-case 24 3.2.1 Use-case “Đăng nhập” 28 3.2.2 Use-case “Đăng kí” 30 3.2.3 Use-case “Quên mật khẩu” .31 3.2.4 Use-case “Cập nhật thông tin cá nhân” 32 3.2.5 Use-case “Đổi mật khẩu” 33 3.2.6 Use-case “Lấy gợi ý lộ trình học” 35 3.2.7 Use-case “Học theo lộ trình” 36 3.2.8 Use-case “Luyện tập” 37 3.2.9 Use-case “Đăng viết” 38 3.2.10 Use-case “Yêu thích viết” .40 3.2.11 Use-case “Bình luận” 41 3.2.12 Use-case “Thêm lộ trình học” .42 3.2.13 Use-case “Cập nhật lộ trình học” 43 3.2.14 Use-case “Xóa lộ trình học” 45 3.2.15 Use-case “Thêm tài liệu” 46 3.2.16 Use-case “Cập nhật tài liệu” 47 3.2.17 Use-case “Xóa tài liệu” 49 3.2.18 Use-case “Thêm luyện tập” .50 3.2.19 Use-case “Cập nhật luyện tập” 51 3.2.20 Use-case “Xóa luyện tập” .53 3.3 Thiết kế 54 3.3.1 Thiết kế giao diện 54 3.3.2 Thiết kế liệu .57 3.3.3 Thiết kế kiến trúc 57 CHƯƠNG 4: CÀI ĐẶT 59 4.1 Màn hình “Đăng nhập” 59 4.2 Màn hình “Đăng kí” .61 Màn hình “Quên mật khẩu” 63 4.3 Màn hình “Onboarding” 65 4.4 Màn hình “Gợi ý lộ trình học” .67 4.5 Màn hình “Trang chủ” 69 4.6 Màn hình “Mơ tả học” 70 4.7 Màn hình “Học theo lộ trình” .72 4.8 Màn hình “Tổng kết học” 74 4.9 Màn hình “Luyện tập” 76 4.10 Màn hình “Mơ tả luyện tập” 78 4.11 Màn hình “Làm luyện tập” .80 4.12 Màn hình “Kết luyện tập” .82 4.13 Màn hình “Chi tiết kết luyện tập” 84 4.14 Màn hình “Tài liệu” .86 4.15 Màn hình “Chi tiết tài liệu” 88 4.16 Màn hình “Diễn đàn” 90 4.17 Màn hình “Tạo viết mới” .92 4.18 Màn hình “Chi tiết viết” 94 4.19 Màn hình “Thơng tin cá nhân” .96 4.20 Màn hình hộp thoại “Cập nhật thơng tin cá nhân” .98 4.21 Màn hình hộp thoại “Đổi mật khẩu” 99 4.22 Màn hình “Quản lý lộ trình học” .100 4.23 Màn hình hộp thoại “Thêm lộ trình học mới” 101 4.24 Màn hình “Chi tiết lộ trình học” 102 4.25 Màn hình hộp thoại “Thêm chặng mới” 104 4.26 Màn hình hộp thoại “Thêm câu mới” 105 4.27 Màn hình “Quản lý tài liệu” .106 4.28 Màn hình hộp thoại “Thêm tài liệu mới” 108 4.29 Màn hình “Chi tiết tài liệu” 109 4.30 Màn hình hộp thoại “Thêm thẻ mới” 110 4.31 Màn hình “Quản lý luyện tập” .112 4.32 Màn hình hộp thoại “Thêm luyện tập mới” 113 4.33 Màn hình “Chi tiết luyện tập” 114 4.34 Màn hình hộp thoại “Thêm câu hỏi mới” 116 CHƯƠNG 5: KẾT LUẬN 118 5.1 Kết 118 5.2 Ưu điểm/Nhược điểm 118 5.2.1 Ưu điểm 118 5.2.2 Nhược điểm 118 5.3 Hướng phát triển 119 MỤC LỤC HÌNH ẢNH Hình 3.1 Khảo sát người dùng màu sắc chủ đề 20 Hình 3.2 Khảo sát người dùng phong cách 21 Hình 3.3 Khảo sát người dùng phông chữ 21 Hình 3.4 Khảo sát người dùng vị trí điều hướng .22 Hình 3.5 Hình ảnh use-case Hệ thống Hỗ trợ học tiếng Anh cho người làm 25 Hình 3.6 Hình ảnh giao diện hoàn chỉnh 55 Hình 3.7 Hình ảnh Wireframe giao diện 56 Hình 3.8 Hình ảnh thiết kế liệu 57 Hình 3.9 Hình ảnh kiến trúc Website .58 Hình 4.1 Hình ảnh hình “Đăng nhập” 59 Hình 4.2 Hình ảnh hình “Đăng kí” 61 Hình 4.3 Hình ảnh hình “Quên mật khẩu” .63 Hình 4.4 Hình ảnh hình “Onboarding” 65 Hình 4.5 Hình ảnh hình “Gợi ý lộ trình học” 67 Hình 4.6 Hình ảnh hình “Trang chủ” .69 Hình 4.7 Hình ảnh hình “Mơ tả học” 70 Hình 4.8 Hình ảnh hình “Học theo lộ trình” 72 Hình 4.9 Hình ảnh hình “Tổng kết học” 74 Hình 4.10 Hình ảnh hình “Luyện tập” .76 Hình 4.11 Hình ảnh hình “Mơ tả luyện tập” 78 Hình 4.12 Hình ảnh hình “Làm luyện tập” 80 Hình 4.13 Hình ảnh hình “Kết luyện tập” 82 Hình 4.14 Hình ảnh hình “Chi tiết kết luyện tập” .84 Hình 4.15 Hình ảnh hình “Tài liệu” 86 Hình 4.16 Hình ảnh hình “Chi tiết tài liệu” .88 Hình 4.17 Hình ảnh hình “Diễn đàn” .90 Hình 4.18 Hình ảnh hình “Tạo viết mới” 92 Hình 4.19 Hình ảnh hình “Chi tiết viết” 94 Hình 4.20 Hình ảnh hình “Thơng tin cá nhân” 96 Hình 4.21 Hình ảnh hình “Cập nhật thơng tin cá nhân” 98 Hình 4.22 Hình ảnh hình “Quản lý lộ trình học” 100 Hình 4.23 Hình ảnh hình “Thêm lộ trình học mới” .101 Hình 4.24 Hình ảnh hình “Chi tiết lộ trình học” 102 Hình 4.25 Hình ảnh hình “Thêm chặng mới” 104 Hình 4.26 Hình ảnh hình “Thêm câu mới” 105 Hình 4.27 Hình ảnh hình “Quản lý tài liệu” 106 Hình 4.28 Hình ảnh hình “Thêm tài liệu mới” .108 Hình 4.29 Hình ảnh hình “Chi tiết tài liệu” 109 Hình 4.30 Hình ảnh hình “Thêm thẻ mới” .110 Hình 4.31 Hình ảnh hình “Quản lý luyện tập” 112 Hình 4.32 Hình ảnh hình “Thêm luyện tập mới” .113 Hình 4.33 Hình ảnh hình “Chi tiết luyện tập” 114 Hình 4.34 Hình ảnh hình “Thêm câu hỏi mới” 116 MỤC LỤC BẢNG Bảng 3.1 Danh sách use-case người dùng .26 Bảng 3.2 Danh sách use-case quản trị viên .26 Bảng 3.3 Use-case “Đăng nhập” .28 Bảng 3.4 Use-case “Đăng kí” 30 Bảng 3.5 Use-case “Quên mật khẩu” 31 Bảng 3.6 Use-case “Cập nhật thông tin người dùng” .32 Bảng 3.7 Use-case “Đổi mật khẩu” 33 Bảng 3.8 Use-case “Lấy gợi ý lộ trình học” .35 Bảng 3.9 Use-case “Học theo lộ trình” .36 Bảng 3.10 Use-case “Luyện tập” 37 Bảng 3.11 Use-case “Đăng viết” 38 Bảng 3.12 Use-case “Yêu thích viết” 40 Bảng 3.13 Use-case “Bình luận” .41 Bảng 3.14 Use-case “Thêm lộ trình học” 42 Bảng 3.15 Use-case “Cập nhật lộ trình học” 43 Bảng 3.16 Use-case “Xố lộ trình học” 45 Bảng 3.17 Use-case “Thêm tài liệu” 46 Bảng 3.18 Use-case “Cập nhật tài liệu” 47 Bảng 3.19 Use-case “Xoá tài liệu” 49 Bảng 3.20 Use-case “Thêm luyện tập” .50 Bảng 3.21 Use-case “Cập nhật luyện tập” 51 Bảng 3.22 Use-case “Xoá luyện tập” 53 Bảng 4.1 Thiết kế xử lý hình “Đăng nhập” .60 Bảng 4.2 Thiết kế xử lý hình “Đăng kí” 61 Bảng 4.3 Thiết kế xử lý hình “Quên mật khẩu” 63 Bảng 4.4 Thiết kế xử lý hình “Onboarding” .65 Bảng 4.5 Thiết kế xử lý hình “Gợi ý lộ trình học” 67 Bảng 4.6 Thiết kế xử lý hình “Trang chủ” 69 Bảng 4.7 Thiết kế xử lý hình “Mơ tả học” 71 Bảng 4.8 Thiết kế xử lý hình “Học theo lộ trình” .72 Bảng 4.9 Thiết kế xử lý hình “Tổng kết học” .74 Bảng 4.10 Bảng 3.33 Thiết kế xử lý hình “Luyện tập” 77 Bảng 4.11 Thiết kế xử lý hình “Mơ tả luyện tập” .78 Bảng 4.12 Thiết kế xử lý hình “Làm luyện tập” 81 Bảng 4.13 Thiết kế xử lý hình “Kết luyện tập” 82 Bảng 4.14 Thiết kế xử lý hình “Chi tiết kết luyện tập” 85 Bảng 4.15 Thiết kế xử lý hình “Tài liệu” 86 Bảng 4.16 Thiết kế xử lý hình “Chi tiết tài liệu” 88 Bảng 4.17 Thiết kế xử lý hình “Diễn đàn” 91 Bảng 4.18 Thiết kế xử lý hình “Tạo viết mới” 92 Bảng 4.19 Thiết kế xử lý hình “Chi tiết viết” .95 Bảng 4.20 Thiết kế xử lý hình “Thông tin cá nhân” 97 Bảng 4.21 Thiết kế xử lý hình “Đổi mật khẩu” 98 Bảng 4.22 Thiết kế xử lý hình “Quản lý lộ trình học” 100 Bảng 4.23 Thiết kế xử lý hình “Thêm lộ trình học mới” 101 Bảng 4.24 Thiết kế xử lý hình “Chi tiết lộ trình học” .102 Bảng 4.25 Thiết kế xử lý hình “Thêm chặng mới” 104 Bảng 4.26 Thiết kế xử lý hình “Thêm câu mới” .106 Bảng 4.27 Thiết kế xử lý hình “Quản lý tài liệu” 107 Bảng 4.28 Thiết kế xử lý hình “Thêm tài liệu mới” .108 Bảng 4.29 Thiết kế xử lý hình “Chi tiết tài liệu” 109 Bảng 4.30 Thiết kế xử lý hình “Thêm thẻ mới” 111 Bảng 4.31 Thiết kế xử lý hình “Quản lý luyện tập” 112 Bảng 4.32 Thiết kế xử lý hình “Thêm luyện tập mới” 113 Bảng 4.33 Thiết kế xử lý hình “Chi tiết luyện tập” 114 10 Bảng 4.29 Thiết kế xử lý hình “Quản lý tài liệu” STT Tên thành phần Menu Loại Hành động Thanh điều Điều hướng sang trang khác hướng Thanh điều hướng Dropdown Có thể thao tác “Đăng xuất” quản trị viên Nút “Loại tài Chọn loại tài liệu muốn thực Button liệu” Nút “Xem chi thao tác: xem, cập nhật, xóa Button/Link Chuyển sang trang “Xem chi tiết” tiết” Nút “Tạo mới” Button Mở hộp thoại “Thêm tài liệu mới” Danh sách Table Hiển thị danh sách “Tài liệu” “Tài liệu” Chọn tài liệu theo chủ đề loại tài liệu Chọn tài liệu để thực thao Checkbox tác “Xem chi tiết” “Xóa” 107 4.28 Màn hình hộp thoại “Thêm tài liệu mới” Hình 4.28 Hình ảnh hình “Thêm tài liệu mới” Bảng 4.30 Thiết kế xử lý hình “Thêm tài liệu mới” STT Tên thành phần Loại Hành động Ô nhập Chủ đề Input/Text Nhập Chủ đề tài liệu Ơ nhập Mơ tả Input/Text Nhập mơ tả cho chủ đề Nút “Đóng” Button Đóng hộp thoại Nút “Xác nhận” Button Xác nhận thay đổi, Đóng hộp thoại 108 4.29 Màn hình “Chi tiết tài liệu” 10 Hình 4.29 Hình ảnh hình “Chi tiết tài liệu” Bảng 4.31 Thiết kế xử lý hình “Chi tiết tài liệu” STT Tên thành phần Menu Loại Hành động Thanh điều Điều hướng sang trang khác hướng Thanh điều hướng Dropdown Có thể thao tác “Đăng xuất” quản trị viên Ô nhập Chủ đề Input/Text Nhập Chủ đề muốn Ô nhập Mô tả Input/Text Nhập Mô tả muốn Nút “Cập nhật” Button Cập nhật thông tin “Chủ đề”, “Mơ tả” lộ trình học 109 Nút “Xem chi Button Mở hội thoại “Cập nhật câu/từ” Button Mở hộp thoại “Thêm thẻ mới” Button Mở hộp thoại “Xóa câu/từ” tiết” câu/từ Nút “Tạo mới” chặng Nút “Xóa” thẻ câu/từ Danh sách thẻ Table Hiển thị danh sách “Câu/từ” “Câu/từ” chủ đề loại tài liệu chọn xem chi tiết 10 Chọn thẻ Chọn thẻ câu/từ để thực Checkbox câu/từ thao tác “Xem chi tiết” “Xóa” 4.30 Màn hình hộp thoại “Thêm thẻ mới” Hình 4.30 Hình ảnh hình “Thêm thẻ mới” 110 Bảng 4.32 Thiết kế xử lý hình “Thêm thẻ mới” STT Tên thành phần Ô nhập câu/từ Loại Hành động Input/Text Nhập Câu/từ tiếng Anh Input/Text Nhập Nghĩa câu/từ tiếng Anh tiếng Anh Ô nhập Nghĩa Ô nhập Hình ảnh Chọn File hình ảnh cho câu/từ (nếu Input/File có) Ơ nhập Âm Input/File Chọn File âm cho câu/từ tiếng Anh (nếu có) Nút “Đóng” Button Đóng hộp thoại Nút “Xác nhận” Button Xác nhận thay đổi, Đóng hộp thoại 111 4.31 Màn hình “Quản lý luyện tập” Hình 4.31 Hình ảnh hình “Quản lý luyện tập” Bảng 4.33 Thiết kế xử lý hình “Quản lý luyện tập” STT Tên thành phần Menu Loại Hành động Thanh điều Điều hướng sang trang khác hướng Thanh điều hướng Dropdown Có thể thao tác “Đăng xuất” quản trị viên Nút “Xem chi Button/Link Chuyển sang trang “Xem chi tiết” Button Mở hộp thoại “Thêm luyện tập tiết” Nút “Tạo mới” mới” 112 Danh sách Hiển thị danh sách “Bài luyện Table “Bài luyện tập” Chọn tập” theo chủ đề Chọn luyện tập để thực Checkbox luyện tập thao tác “Xem chi tiết” “Xóa” 4.32 Màn hình hộp thoại “Thêm luyện tập mới” Hình 4.32 Hình ảnh hình “Thêm luyện tập mới” Bảng 4.34 Thiết kế xử lý hình “Thêm luyện tập mới” STT Tên thành phần Loại Hành động Ô nhập Chủ đề Input/Text Nhập Chủ đề luyện tập Ơ nhập Mơ tả Input/Text Nhập mơ tả cho chủ đề Nút “Đóng” Button Đóng hộp thoại 113 Nút “Xác nhận” Xác nhận thay đổi, Đóng hộp thoại Button 4.33 Màn hình “Chi tiết luyện tập” 10 11 Hình 4.33 Hình ảnh hình “Chi tiết luyện tập” Bảng 4.35 Thiết kế xử lý hình “Chi tiết luyện tập” STT Tên thành phần Menu Loại Hành động Thanh điều Điều hướng sang trang khác hướng Thanh điều hướng Dropdown Có thể thao tác “Đăng xuất” quản trị viên Ô nhập Chủ đề Input/Text Nhập Chủ đề muốn Ơ nhập Mơ tả Input/Text Nhập Mơ tả muốn 114 Nút “Cập nhật” Cập nhật thông tin “Chủ đề”, Button “Mô tả” luyện tập Nút “Xoá” Xoá Bài luyện tập tại, Chuyển Button trang “Quản lý luyện tập” Nút “Xem chi Button Mở hội thoại “Cập nhật câu hỏi” Button Mở hộp thoại “Thêm câu hỏi mới” Button Mở hộp thoại “Xóa câu hỏi” Table Hiển thị danh sách “Câu hỏi” tiết” câu hỏi Nút “Tạo mới” câu hỏi Nút “Xóa” câu hỏi 10 Danh sách “Câu hỏi” 11 Chọn câu hỏi chủ đề chọn xem chi tiết Chọn câu hỏi để thực thao Checkbox tác “Xem chi tiết” “Xóa” 115 4.34 Màn hình hộp thoại “Thêm câu hỏi mới” Hình 4.34 Hình ảnh hình “Thêm câu hỏi mới” Bảng 4.36 Thiết kế xử lý hình “Thêm câu hỏi mới” STT Tên thành phần Danh sách Loại Hành động Danh sách câu/từ có chủ đề Table câu/từ tương ứng với luyện tập “Tài liệu” Ô nhập Câu trả Input/Text Nhập Câu trả lời Input/Text Nhập Câu trả lời Input/Text Nhập Câu trả lời lời Ô nhập Câu trả lời Ô nhập Câu trả lời 116 Ô nhập Câu trả Input/Text Nhập Câu trả lời Nhập đán án lời Ô nhập Đáp án Input/Text Ô nhập Loại câu Input/Dropdown Chọn loại câu hỏi hỏi Nút “Đóng” Button Đóng hộp thoại Nút “Xác nhận” Button Xác nhận thay đổi, Đóng hộp thoại 117 CHƯƠNG 5: KẾT LUẬN 5.1 Kết Sau tháng đồ án, em hoàn thành đồ án với đề tài “Xây dựng Website hỗ trợ học tiếng Anh cho người làm” với hướng dẫn GVHD Đỗ Thị Thanh Tuyền Đồ án bao gồm chức Ở phía người dùng hồn thành chức năng: Học theo lộ trình, xem tài liệu, làm luyện tập, đăng bình luận diễn đàn Ở phía quản trị viên, hồn thành chức năng: Quản lý lộ trình học, Quản lý tài liệu Quản lý luyện tập Số lượng chức so với lúc lên kế hoạch đề cương chưa đủ nhiều Nhưng với chức bản, hoàn thành Phần hấp dẫn Website phần làm luyện tập, luyện tập bao gồm hình thức làm câu trắc nghiệm xếp từ thành câu hồn chỉnh Bên cạnh đó, mẻ Website, việc tích hợp thêm “Diễn đàn”, giúp người học trao đổi, chia sẻ, giúp đỡ nhau; từ đó, tăng hiệu hứng thú học 5.2 Ưu điểm/Nhược điểm 5.2.1 Ưu điểm • Đồ án đáp ứng nhu cầu người dùng • Giao diện thân thiện, màu sắc tươi vui kích thích học tập • Sử dụng cơng nghệ mới, phổ biến 5.2.2 Nhược điểm • Chưa tối ưu việc truy xuất liệu Firebase • Chưa có liệu hồn chỉnh • Code chưa clean 118 5.3 Hướng phát triển Trong tương lai, em tiếp tục phát triển toàn chức đề ban đầu: • Lưu trữ thẻ từ/câu vào mục u thích • Điểm thưởng hồn thành luyện tập • Chia sẻ kết luyện tập thành tích lên mạng xã hội lên Diễn đàn Website Và thêm chức như: • Gợi ý lộ trình học (bằng thuật tốn gợi ý) • Thống kê lộ trình học, luyện tập làm • Thêm game vui để kích thích luyện tập • Tích hợp điểm thưởng hình thức “Tạo nhân vật chibi (búp bê)” với số điểm tương ứng, có link kiện trang phục tương ứng • Quản lý người dùng (Quản trị viên) • Quản lý diễn đàn (Quản trị viên) • Đăng thơng báo, ghim viết Diễn đàn (Quản trị viên) 119 TÀI LIỆU THAM KHẢO Doulingo, https://www.duolingo.com/ (truy cập lần cuối: 29/06/2023) Viblo, https://viblo.asia/newest (truy cập lần cuối: 29/06/2023) Felicity O'Dell, Michael McCarthy, ENGLISH VOCABULARY IN USE, July 13, 2017 Aran Kim, Business English Pro - Tiếng Anh Thương Mại, 2021 120 PHỤ LỤC 121