Xây dựng WEBSITE hỗ trợ dạy học tiếng anh cho trung tâm ngoại ngữ

ĐẠ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 -🙞🙜🕮🙞🙜 - BÁO CÁO ĐỒ ÁN ĐỀ TÀI: XÂY DỰNG WEBSITE HỖ TRỢ DẠY HỌC TIẾNG ANH CHO TRUNG TÂM NGOẠI NGỮ WEBSITE: MR.SMITH GVHD: Nguyễn Thị Thanh Trúc Sinh viên thực hiện: Nguyễn Văn Dương - 18520211 TP.Thủ Đức, tháng năm 2021 Copyright © 2020 by HOMIES team Báo cáo cuối kì Đồ án ii LỜI CẢM ƠN Lời đầu tiên, nhóm tác giả xin chân thành cảm ơn q thầy khoa Công nghệ Phần mềm, trường Đại Học Công Nghệ Thông Tin, ĐHQG TP.HCM, tận tình hướng dẫn nhóm suốt thời gian qua Những kiến thức mà thầy cô truyền đạt tảng quan trọng để nhóm hồn thành đề tài Nhóm tác giả xin gửi lời cảm ơn chân thành lòng biết ơn sâu sắc đến ThS Nguyễn Thị Thanh Trúc, cảm ơn tận tình hướng dẫn tạo điều kiện tốt cho nhóm hồn thành đề tài Những lời động viên, góp ý chân tình động lực q báu để nhóm vượt qua khó khăn tìm hiểu thực đề tài Trong thời gian tháng thực đề tài, nhóm tác giả cố gắng vận dụng kiến thức tảng học, kết hợp học hỏi tìm hiểu cơng nghệ để ứng dụng xây dựng đề tài mơn học Tuy nhiên q trình thực hiện, kiến thức kinh nghiệm nhiều hạn chế, khó tránh khỏi thiếu sót Chính vậy, nhóm tác giả mong nhận góp ý từ q thầy để nhóm hồn thiện thêm kiến thức mà nhóm học tập, làm hành trang q báu cho nhóm cơng việc sau Sau cùng, nhóm tác giả xin kính chúc q thầy khoa Công nghệ phần mềm cô Nguyễn Thị Thanh Trúc thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Xin chân thành cảm ơn q thầy ! Nhóm tác giả Báo cáo cuối kì Đồ án iii NHẬN XÉT (Của giáo viên hướng dẫn) Báo cáo cuối kì Đồ án iv DANH SÁCH THÀNH VIÊN NHÓM Tên thành viên Nguyễn Văn Dương MSSV 18520211 Báo cáo cuối kì Đồ án v MỤC LỤC TỔNG QUAN VỀ ĐỀ TÀI 1.1 Đặt vấn đề 1.2 Giải pháp 1.3 Mục tiêu đề tài 1.4 Phạm vi đề tài 1.5 Công cụ sử dụng 1.6 Đối tượng nghiên cứu CƠ SỞ LÝ THUYẾT 2.1 Kiến trúc Client-Server 2.2 NestJS 2.3 PostgreSQL 2.4 JWT … 2.5 NextJS 2.6 Axios … 10 KHẢO SÁT VÀ PHÂN TÍCH ĐẶC TẢ YÊU CẦU 12 3.1 Khảo sát trạng 12 3.2 Danh sách yêu cầu 14 Yêu cầu khách hàng 14 Bảng trách nhiệm cho yêu cầu 17 Yêu cầu phần cứng 23 3.3 Quy tắc nghiệp vụ 25 3.4 Báo cáo khả thi 25 Báo cáo tóm tắt đề tài 25 Nền tảng dự án 26 Chi tiết dự án 26 Đánh giá 27 3.5 Usecase, Đặc tả usecase sơ đồ hoạt động 27 Usecase tổng quát 29 Báo cáo cuối kì Đồ án vi Usecase cho Khách 29 Usecase cho Thành viên 35 Usecase cho Giảng viên 42 Usecase cho Học viên 54 Usecase cho Quản lý 62 3.6 Sơ đồ 79 Sơ đồ việc xem khóa học 79 Sơ đồ cho việc đăng ký khóa học 80 Sơ đồ cho việc nhập thêm thông báo 80 Sơ đồ cho việc thêm tài khoản 80 Sơ đồ cho việc thêm khóa học 82 Sơ đồ cho việc lập báo cáo 82 3.7 Sơ đồ trạng thái 83 Sơ đồ trạng thái cho Đăng nhập 83 Sơ đồ trạng thái cho Thêm tài khoản 84 Sơ đồ trạng thái cho đăng ký khóa học 84 Sơ đồ trạng thái cho Tạo khóa học 86 Sơ đồ trạng thái cho Tạo thông báo 86 State Diagram cho bình luận 87 3.8 Sơ đồ lớp 89 Mơ hình thực thể ERD hồn thiện 89 Sơ đồ lớp 90 Mô tả sơ đồ lớp 90 THIẾT KẾ HỆ THỐNG 96 4.1 Sơ đồ logic 96 Thiết kế sơ đồ logic 96 Mô tả sơ đồ logic 97 4.2 Thiết kế kiến trúc 102 Kiến trúc tổng quan 102 Báo cáo cuối kì Đồ án vii 4.3 Thiết kế giao diện 103 Đăng nhập 103 Đăng ký 104 Trang chủ 104 Khóa học 105 Đăng ký lớp 106 4.4 Triển khai 106 Môi trường phát triển ứng dụng 106 Môi trường triển khai ứng dụng 106 Kiểm thử 106 Kết luận hướng phát triển 108 5.1 Kết luận 108 Kết đạt 108 Điểm đặc sắc đề tài 108 5.2 Hướng phát triển 108 Báo cáo cuối kì Đồ án TỔNG QUAN VỀ ĐỀ TÀI 1.1 Đặt vấn đề Để bám kịp tốc độ phát triển chóng mặt giáo dục giới nói chung Việt Nam nói riêng, hoạt động giáo dục dần “số hoá”, đặc biệt thời kì covid19, học sinh khơng thể đến trường việc học qua trực tuyến vô cấp thiết Thấy nhu cầu trên, nhóm định chọn đề tài “XÂY DỰNG WEBSITE HỖ TRỢ DẠY HỌC TIẾNG ANH CHO TRUNG TÂM NGOẠI NGỮ” (đồ án ThS Nguyễn Thị Thanh Trúc nắm vai trò giảng viên hướng dẫn) Với tiềm rộng mở dự án dành cho dạy học nay, khóa học trực tuyến dần lên tượng phát triển rộng khắp nước, nay, học trực tuyến đặt chân đến Việt Nam Mr Smith mô trung tâm ngoại ngữ dựa nhu cầu thực tế số trung tâm chưa tiếp cận nhiều với công nghệ Mr Smith hứa hẹn trung web đắc lực cho không học viên mà quản lý trung tâm, mở rộng tiềm năng, tiếp cận thêm với nhiều đối tượng học viên giảng viên Rút ngắn nhiều thời gian việc vận hành giảng dạy, quản lý mang lại trải nghiệm tuyệt vời với công việc 1.2 Giải pháp Để hồn thành đề tài cần phải nghiên cứu nội dung sau: • Tìm hiểu cách thức vận hành quản lý trung tâm ngoại ngữ • Nghiên cứu nhu cầu đối tượng người sử dụng (học viên, giảng viên quản lý) để có giải pháp thích hợp • Tìm hiểu vài trung tâm ngoại ngữ • Nghiên cứu phương pháp dạy học tiếng anh 1.3 Mục tiêu đề tài Mục tiêu thực hóa kiến thức học trình triển khai đồ án Đó xây dựng website hoàn thiện mặt giao diện trải nghiệm người dùng xử lý liệu Xây dựng website Mr Smith Báo cáo cuối kì Đồ án 2 • Thực chức website dạy học • Trang dashboard giúp trung tâm quản lý, cập nhật thơng tin • Tìm kiếm hỗ trợ người dùng 1.4 Phạm vi đề tài Do thời gian thực đề tài có giới hạn, kiến thức nhóm trung tâm ngoại ngữ chưa hoàn toàn sâu sắc, nên phạm vi khóa luận nhóm tác giả tập trung làm chức website, đánh giá ưu khuyết điểm bật website Về mặt hiệu hệ thống triển khai thời gian dài điều kiện hạ tầng khác, khơng có điều kiện kiểm chứng thực tế, nhóm trình bày lại theo số nguồn tài liệu tham khảo Về việc xây dựng website quản lý trung tâm ngoại ngữ , tập trung vào việc hỗ trợ cơng tác Quản lý khóa học, Quản lý kỳ thi, Quản lý lớp học,… 1.5 Công cụ sử dụng Cơng cụ dùng để phân tích, thiết kế: draw.io, Astah, Adobe XD Công cụ chạy thử API: Postman, Swagger UI Công cụ xây dựng website: Visual Studio Code, Node package manager Công cụ quản lý dự án: Github, Messenger Group, Microsoft Teams Công cụ soạn thảo: Excel, Word, Notepad 1.6 Đối tượng nghiên cứu Công nghệ xây dựng back-end: NestJS Công nghệ xây dựng sở liệu: PostgreSQL Công nghệ bảo mật: JWT Công nghệ xây dựng font-end: NextJS Công nghệ kết nối liệu: Axios Báo cáo cuối kì Đồ án CƠ SỞ LÝ THUYẾT 2.1 Kiến trúc Client-Server Figure 1Kiến trúc client-server Mơ hình Client-Server mơ hình tiếng mạng máy tính, phổ biến áp dụng rộng rãi trang Web Ý tưởng mơ hình sau: Client (máy khách) gửi yêu cầu (request) đến Server (máy chủ, cung ứng dịch vụ cho máy khách) Server xử lý liệu gửi kết cho Client Lý nhóm chọn Client-Server: – Client-Server có khả chống tải mạng – Client-Server đảm bảo toàn vẹn liệu có cố xảy – Dễ dàng mở rộng hệ thống mạng – Chỉ cần chung định dạng giao tiếp mà không cần chung tảng hoạt động – Client server cho phép tích hợp kỹ thuật đại GIS, mơ hình thiết kế hướng đối tượng, … – Với mơ hình Client server, người dùng truy cập liệu từ xa, thực thao tác gửi, nhận file hay tìm kiếm thơng tin đơn giản Báo cáo cuối kì Đồ án 95 3.8.3.2.16 Sự kiện STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi EventID int PK Mã kiện EventName int private Tên kiện Address string private Địa kiện Note string private Nội dung kiện DayTimeBegin datetime private Ngày bắt đầu kiện Order money private Lệ phí kiện 3.8.3.2.17 Chi tiết kiện STT Tên thuộc tính Loại EventID int UserID int isPaid bool Ràng buộc PK private Ý nghĩa/ghi Mã kiện Điểm đánh giá Nội dung đánh giá 3.8.3.2.18 Đánh giá STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi ReviewID int PK Mã đánh giá Rating int private Điểm đánh giá Note string private Nội dung đánh giá StudentClassID int FK Mã học viên lớp TeacherID int FK Mã giảng viên Báo cáo cuối kì Đồ án 96 THIẾT KẾ HỆ THỐNG 4.1 Sơ đồ logic Thiết kế sơ đồ logic Báo cáo cuối kì mơn học Công nghệ phần mềm chuyên sâu 97 Mô tả sơ đồ logic 4.1.2.1.1 Người dùng Tên thuộc tính STT Loại Ràng Ý nghĩa/ghi buộc Mã người dùng UserID int PK UserName string private Tài khoản Password char private Mật RoleID string FK SurName string private Họ Name string private Tên SDT int private Số điện thoại Email string private Email Adress string private Địa 10 DateOfBirth DateTime private Ngày sinh 11 Gender string private Giới tính 12 PlaceOfBirth string private Nơi sinh 13 EthenicType string private Dân tộc Mã vai trò 4.1.2.1.2 Vai trò STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi RoleID int PK Mã vai trò RoleName string private Tên vai trò PermissionID string FK Mã quyền 4.1.2.1.3 Phân quyền STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi PermissionID int PK Mã quyền PermissionName int private Tên quyền 4.1.2.1.4 Chi tiết vai trị Copyright © 2021 by Nguyễn Văn Dương Báo cáo cuối kì mơn học Cơng nghệ phần mềm chun sâu STT Tên thuộc tính 98 Loại RoleID int PermissionID int Active bool Ràng buộc PK Ý nghĩa/ghi Mã vai trò Mã quyền private Kích hoạt Ràng buộc Ý nghĩa/ghi 4.1.2.1.5 Học viên lớp học STT Tên thuộc tính Loại StudentClassID int PK Mã học viên lớp ClassID int FK Mã lớp UserID int FK Mã người dùng isPaid bool private Đã toán học phí 4.1.2.1.6 Giảng viên STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi TeacherID int PK Mã giảng viên UserID int FK Mã người dùng ClassID int FK Mã lớp wage money private Lương WorkTime int private Thời gian làm việc subsidies salary money private Lương trợ cấp 4.1.2.1.7 Lớp học STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi ClassID int PK Mã lớp học ClassName string private Tên lớp học ClassRoomID int FK Phòng học NotificationID int FK Mã thơng báo 4.1.2.1.8 Phịng học STT Tên thuộc tính Loại Ràng buộc Copyright © 2021 by Nguyễn Văn Dương Ý nghĩa/ghi Báo cáo cuối kì mơn học Cơng nghệ phần mềm chun sâu 99 ClassRoomID int PK Mã phòng học ClassRoomName string private Tên phòng học Address string private Địa phịng học 4.1.2.1.9 Thơng báo STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi NotiificationID int PK Mã thông báo NotificationTypeID int FK Mã loại thông báo Note string private Nội dung thông báo UserID int FK Mã người dùng CommentID int FK Mã bình luận DateTime Datetime private Thời gian thơng báo 4.1.2.1.10 Loại thơng báo STT Tên thuộc tính Loại NotificationTypeID int NotificationTypeName string Ràng buộc Ý nghĩa/ghi PK Loại thông báo private Tên loại thông báo 4.1.2.1.11 Bình luận STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi CommentID int PK Mã bình luận CommentID string private Nội dung bình luận UserID int FK Mã người dùng DateTime Datetime private Thời gian bình luận 4.1.2.1.12 Khóa học STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi CourseID int PK Mã khóa học CourseName string private Tên học ClassID int FK Mã lớp TimeBegin Datetime private Thời gian bắt đầu Copyright © 2021 by Nguyễn Văn Dương Báo cáo cuối kì mơn học Cơng nghệ phần mềm chuyên sâu 100 buổi học Thời gian kết thúc TimeEnd Datetime private DayBegin Datetime private Ngày bắt đàu học DayEnd Datetime private Ngày kết thúc học Order money private Học phí buổi học 4.1.2.1.13 Kỳ thi STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi ExamID int PK Mã kỳ thi ExamType int FK Loại kỳ thi RoomID int FK Phòng thi DateBegin Datetime private Ngày thi Orther money private Lệ phí thi 4.1.2.1.14 Loại kỳ thi STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi ExamTypeID int PK Mã loại kỳ thi ExamTypeName string private Tên kỳ thi Time int private Thời gian thi 4.1.2.1.15 Chi tiết kỳ thi STT Tên thuộc tính Loại StudentExamID int ExamID int Score float Ràng buộc PK private Ý nghĩa/ghi Mã thí sinh dự thi Mã kỳ thi Điểm thi 4.1.2.1.16 Sự kiện STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi EventID int PK Mã kiện EventName int private Tên kiện Copyright © 2021 by Nguyễn Văn Dương Báo cáo cuối kì mơn học Cơng nghệ phần mềm chuyên sâu 101 Address string private Địa kiện Note string private Nội dung kiện DayTimeBegin datetime private Ngày bắt đầu kiện Order money private Lệ phí kiện 4.1.2.1.17 Chi tiết kiện STT Tên thuộc tính Loại EventID int UserID int isPaid bool Ràng buộc PK private Ý nghĩa/ghi Mã kiện Điểm đánh giá Nội dung đánh giá 4.1.2.1.18 Đánh giá STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi ReviewID int PK Mã đánh giá Rating int private Điểm đánh giá Note string private Nội dung đánh giá StudentClassID int FK Mã học viên lớp TeacherID int FK Mã giảng viên Copyright © 2021 by Nguyễn Văn Dương Báo cáo cuối kì mơn học Cơng nghệ phần mềm chuyên sâu 102 4.2 Thiết kế kiến trúc Kiến trúc tổng quan Hệ thống sử dụng kiến trúc sử dụng mơ hình kiến trúc Client-Serve (ModelView-Control) • Database: PostgreSQL để lưu trữ liệu • Client : dùng NextJS tạo giao diện hiển thi • Server : dùng NestJS để tạo giao thức API, truy xuất sở liệu, chuyển cho client để đưa giao diện 4.2.1.1 Ngun tắc hoạt động mơ hình Client Server 4.2.1.1.1 Client Khi nói đến Client (khách hàng), có nghĩa người hay tổ chức sử dụng dịch vụ cụ thể Trong giới kỹ thuật số tương tự Client máy tính (Host), tức có khả nhận thông tin sử dụng dịch vụ cụ thể từ nhà cung cấp dịch vụ (Server) 4.2.1.1.2 Server Copyright © 2021 by Nguyễn Văn Dương Báo cáo cuối kì mơn học Cơng nghệ phần mềm chun sâu 103 Server máy chủ hay phương tiện phục vụ dịch vụ Trong lĩnh vực cơng nghệ Server máy tính từ xa Nó cung cấp thơng tin (dữ liệu) quyền truy cập vào dịch vụ cụ thể Vì vậy, mơ hình Client Server, Client đối tượng u cầu thứ Server phục vụ nó, miễn có mặt sở liệu 4.2.1.2 Bảng so sánh mô hình client server với mơ hình khác Tiêu chí đánh giá Client Server Peer-to-Peer Hybrid Khả bảo mật Khả bảo mật Khả bảo mật Khả bảo mật an tồn thơng tin an tồn thơng tin an tồn thơng tin thơng tin độ an cao Có thể điều Phần lớn phụ cao Có thể điều tồn chỉnh quyền truy cập thuộc vào mức độ chỉnh quyền truy cập thông tin quyền chia sẻ thông tin Khả cài đặt Cài đặt khó khăn Bao gồm: Yêu cầu phần + Máy chủ cứng phần mềm + Hệ điều hành + Phần cứng Cài dặt dễ dàng Chỉ cần phần cứng bổ sung Ngồi khơng cần máy chủ hệ điều hành mơ hình Cài đặt khó khăn Bao gồm: + Máy chủ + Hệ điều hành + Phần cứng Yêu cầu quản trị Cần phải có quản trị Khơng cần quản trị Cần phải có quản trị mạng mạng mạng mạng Có Khơng Khơng Chi phí cao Chi phí thấp Chi phí thấp Có khả xử lý lưu trữ tập trung khơng? Chi phí cài đặt 4.3 Thiết kế giao diện Đăng nhập Copyright © 2021 by Nguyễn Văn Dương Báo cáo cuối kì mơn học Cơng nghệ phần mềm chuyên sâu Đăng ký Trang chủ Copyright © 2021 by Nguyễn Văn Dương 104 Báo cáo cuối kì mơn học Cơng nghệ phần mềm chun sâu Khóa học Copyright © 2021 by Nguyễn Văn Dương 105 Báo cáo cuối kì mơn học Cơng nghệ phần mềm chun sâu 106 Đăng ký lớp 4.4 Triển khai Môi trường phát triển ứng dụng • Hệ điều hành: Windows 10 • Hệ quản trị sở liệu: PostgreSQL • Mơi trường chạy thử: Trình duyệt Yandex, Chrome,… • Mơi trường lập trình: Visual Code • Mơi trường quản lý code: Github • Framework sử dụng: NestJS Framework, NextJS Framework, Identity Server, Swagger API … Môi trường triển khai ứng dụng • Hệ điều hành: Windows/ Linux/ MacOSX • RAM: 1GB • Môi trường chạy hệ thống: công cụ duyệt web Microsoft Egde, Chrome (khuyến khích), Firefox, Yandex,… Kiểm thử Copyright © 2021 by Nguyễn Văn Dương Báo cáo cuối kì mơn học Cơng nghệ phần mềm chun sâu 107 4.4.3.1 Testcase Nhóm thực làm testcase với phương pháp kiểm thử hộp đen module ứng dụng Kết kiểm thử 63 testcase modules đạt tỉ lệ pass 98.41%, chi tiết kết thể bảng đây: No Module code Đăng ký Đăng nhập Trang chủ Cài đặt Quản lý khóa học Sub total Pass Fail Untested N/A 11 10 24 62 0 0 0 0 0 Number of test cases 0 0 0 Copyright © 2021 by Nguyễn Văn Dương 11 11 24 63 Báo cáo cuối kì mơn học Cơng nghệ phần mềm chuyên sâu 108 Kết luận hướng phát triển 5.1 Kết luận Kết đạt • • Website thực chức website quản lý, giúp cho việc quản lý, đăng kýcác khóa học trở nên dễ dàng dành cho học viên người quản lý Xây dựng website có giao diện thân thiện với người dùng dễ dàng tương tác Website hỗ trợ tính giúp cho học viên tương tác với giảng viên trung tâm tốt Nhóm thực hoàn chỉnh chức đặt đề tài • Giao diện thân thiện, dễ sử dụng • Thực việc kiểm thử, có testcase • • Điểm đặc sắc đề tài • Mật bảo mật hash • Tài khoản xác thực đăng nhập JWT • Giao Diện thân thiện dễ sử dụng • Hỗ trợ loại ngơn ngữ tiếng anh tiếng việt • Phần mêm quản lý tài khoản theo vai trị • Các tương tác thực thiện realtime • Có mục quản lý để dễ dàng cập nhật chỉnh sửa thông tin • Các thông báo cập nhật thường xuyên cho người dùng 5.2 Hướng phát triển • Liên kết ứng dụng toán để tiện lợi cho người dùng • Phát triển UI thêm animation • Thêm tính tốn online • Sẽ tiếp tục nghiên cứu để phát triển hoàn thiện nữa, sửa chữa sai sót website đưa vào hoạt động thực tiễn Copyright © 2021 by Nguyễn Văn Dương Báo cáo cuối kì mơn học Cơng nghệ phần mềm chun sâu 109 • Thêm tính để hiểu rõ nhu cầu ngườu dùng chatbot, kênh social media Youtube, Facebook, TikTok để bắt kịp xu hướng mở rộng thị trường • Thêm kênh học trực tuyến • Phát triển đa tảng nhằm hỗ trợ trự tiện lợi cho người dùng • Phát triển AI theo dõi trình học học viên nhằm đánh giá lực đưa giải pháp để học tiếng anh tốt Copyright © 2021 by Nguyễn Văn Dương ... kì covid19, học sinh khơng thể đến trường việc học qua trực tuyến vô cấp thiết Thấy nhu cầu trên, nhóm định chọn đề tài “XÂY DỰNG WEBSITE HỖ TRỢ DẠY HỌC TIẾNG ANH CHO TRUNG TÂM NGOẠI NGỮ” (đồ án... tâm Đặc biệt, thông tin quan trọng trung tâm thể cách rõ ràng tạo điều kiện thuận lợi • Đề tài: Xây dựng website hỗ trợ dạy học tiếng anh cho trung tâm ngoại ngữ • Framework: NestJS, NextJS •... nguồn tài liệu tham khảo Về việc xây dựng website quản lý trung tâm ngoại ngữ , tập trung vào việc hỗ trợ công tác Quản lý khóa học, Quản lý kỳ thi, Quản lý lớp học, … 1.5 Công cụ sử dụng Công cụ