Đang tải... (xem toàn văn)
Thời đại công nghệ 4.0 cùng với sự phát triển bùng nổ của Internet, việc đổi mới trong giáo dục để phù hợp với thời đại là rất cần thiết. Ngày nay, eLearning không còn là một khái niệm xa lạ đối với mọi người. Việc áp dụng công nghệ thông tin mang lại lợi ích to lớn trong ngành giáo dục. ELearning giúp ta tiết kiệm thời gian, công sức và tiền bạc. Chỉ cần có một thiết bị có kết nối Internet, ta có thể học hoặc dạy học mọi lúc, tại bất cứ đâu ta muốn thay vì phải lên lớp đúng giờ đồng thời tiết kiệm được chi phí đi lại, chi phí mua tài liệu,... Giáo viên có thể kiểm soát chặt chẽ các học viên, quản lý các khóa học, tài liệu, các bài kiểm tra, điểm số một cách dễ dàng. Nhà trường hoàn toàn có thể quản lý các giáo viên, học viên, khóa học, nhận được các số liệu thống kê để dễ dàng kiểm soát quá trình giảng dạy trong trường. Dự án Xây dựng web dạy học số ELearning tạo ra một trang web đáp ứng nhu cầu học trực tuyến với môi trường dạy học hiện đại, dễ dàng, thuận tiện cho học viên và giáo viên. Người quản trị có thể dễ dàng quản lý các hoạt động dạy học diễn ra trong hệ thống.
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN Tìm hiểu Spring Boot, React xây dựng website dạy học số E-Learning KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN HỮU TRUNG LỜI CẢM ƠN Lời đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Hữu Trung – người trực tiếp quan tâm, hướng dẫn giúp đỡ chúng em nhiều trình thực đề tài Những ý kiến đóng góp thầy kiến thức quý báu giúp chúng em hồn thành khóa luận Nhóm chúng em xin cảm ơn Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh tạo điều kiện thuận lợi cho chúng em học tập trau dồi kiến thức, phát triển thân năm qua Cảm ơn thầy cô Khoa Công Nghệ Thông Tin truyền đạt vốn kiến thức quý báu, tảng vững để chúng em có thể phát triển tương lai Trong trình thực đề tài, chúng em nhận thấy thân người cố gắng Tuy nhiên, hạn chế kiến thức, nhóm em khơng thể tránh khỏi thiếu sót q trình làm Vì vậy, nhóm em mong nhận góp ý, hướng dẫn từ thầy để chúng em có thể học thêm nhiều kinh nghiệm phát triển nghiệp tương lai Một lần nữa, chúng em xin bày tỏ lòng biết ơn chân thành tri ân sâu sắc đến thầy Nguyễn Hữu Trung, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh thầy cô Khoa Công Nghệ Thông Tin Xin chân thành cảm ơn! MỤC LỤC PHẦN MỞ ĐẦU 1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI ĐỐI TƯỢNG NGHIÊN CỨU PHẠM VI NGHIÊN CỨU MỤC TIÊU ĐỀ TÀI PHẦN NỘI DUNG CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT-END 1.1.1 React 1.1.2 TypeScript 1.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK-END 1.2.1 Spring Boot 1.2.2 Keycloak 1.2.3 MySQL 1.2.4 MongoDB 12 1.2.5 Cadence Workflow 14 1.2.6 MinIO 15 CHƯƠNG KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HỐ U CẦU 16 2.1 KHẢO SÁT HIỆN TRẠNG 16 2.1.1 Website UTEx trường Đại học Sư phạm Kỹ thuật TP.HCM 16 2.1.2 Website “Edumall” 17 2.1.3 Website “Moon” 18 2.1.4 Website “Udemy” 19 2.2 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 21 2.2.1 Kiến trúc hệ thống 21 2.2.2 Mô tả kiến trúc hệ thống 21 2.3 XÁC ĐỊNH YÊU CẦU 22 2.3.1 Yêu cầu chức 22 2.4 MƠ HÌNH HỐ YÊU CẦU 26 2.4.1 Lược đồ Use case 26 2.4.2 Mô tả chi tiết Use case 27 CHƯƠNG THIẾT KẾ PHẦN MỀM 59 3.1 LƯỢC ĐỒ TUẦN TỰ 59 3.1.1 Chức đăng nhập 59 3.1.2 Chức đăng ký 60 3.1.3 Chức Làm kiểm tra 61 3.1.4 Chức Định danh 64 3.1.5 Chức Phê duyệt giảng viên 65 3.1.6 Chức Từ chối duyệt giảng viên 66 3.1.7 Chức Đăng ký khóa học 67 3.1.8 Chức Thanh toán 68 3.1.9 Chức Rút tiền 69 3.2 LƯỢC ĐỒ LỚP 70 3.2.1 Lượt đồ lớp (Class Diagram) 70 3.2.2 Chi tiết lượt đồ 71 3.3 THIẾT KẾ CƠ SỞ DỮ LIỆU 84 3.3.1 Lược đồ thực thể kết hợp (ERD) 84 3.3.2 Chi tiết bảng liệu 84 CHƯƠNG THIẾT KẾ GIAO DIỆN 99 4.1 Đăng nhập 99 4.2 Đăng ký .100 4.3 Quên mật 101 4.4 Trang home 102 4.5 Sidebar Quản trị viên .103 4.6 Thống kê cho người quản trị 105 4.7 Quản lý Quản trị viên 106 4.8 Quản lý giảng viên 107 4.9 Quản lý học viên 108 4.10 Quản lý khóa học phía quản trị viên 109 4.11 Sidebar giảng viên 110 4.12 Sidebar học viên 112 4.13 Danh sách khóa học đăng ký 113 4.14 Danh sách khóa học chưa đăng ký .114 4.15 Trang lịch sử giao dịch .115 4.16 Trang thông tin cá nhân 116 4.17 Danh sách học .117 4.18 Danh sách kiểm tra .118 4.19 Làm kiểm tra 119 4.20 Xem lại làm 121 4.21 Thơng tin khóa học .122 4.22 Thanh toán KLB 123 4.23 Thanh toán VNPAY 123 4.24 Trang định danh 124 4.25 Trang diễn đàn 125 4.26 Quản lý diễn đàn 126 4.27 Trang trò chuyện 127 4.28 Quản lý số dư 128 4.29 Thống kê cho giảng viên 129 4.30 Quản lý khóa học phía giảng viên 130 4.31 Thêm khóa học 131 4.32 Quản lý chi tiết khóa học 132 4.33 Quản lý học 133 CHƯƠNG KIỂM THỬ 135 5.1 Dành cho người dùng 135 5.1.1 Đăng nhập 135 5.1.2 Quên mật 136 5.1.3 Đăng ký tài khoản 136 5.1.4 Kiểm tra hiển thị thông tin cá nhân 137 5.1.5 Chỉnh sửa thông tin cá nhân 138 5.1.6 Đổi mật .140 5.1.7 Định danh 142 5.1.8 Đăng ký khóa học 143 5.1.9 Thơng tin khóa học 146 5.1.10 Trò chuyện .147 5.1.11 Lịch sử giao dịch .149 5.2 Kiểm thử chức quản trị viên 150 5.2.1 Trang chủ 150 5.2.2 Quản lý giáo viên .151 5.2.3 Phê duyệt Ekyc 152 5.2.4 Quản lý sinh viên .153 5.2.5 Thông tin chi tiết học sinh 154 5.2.6 Quản lý khóa học .155 5.2.7 Quản lý diễn đàn 157 5.2.8 Lịch sử giao dịch .159 5.2.9 Lịch sử rút tiền 161 PHẦN KẾT LUẬN .163 KẾT QUẢ ĐẠT ĐƯỢC 163 ƯU ĐIỂM 164 NHƯỢC ĐIỂM 165 HƯỚNG PHÁT TRIỂN 165 TÀI LIỆU THAM KHẢO 167 DANH MỤC HÌNH ẢNH Hình 1.1 React[14] Hình 1.3 DOM ảo React[18] Hình 1.4 TypeScript[11] Hình 1.5 Cách hoạt động TypeScript[17] Hình 1.6 Spring Boot[16] Hình 1.7 MicroService[13] Hình 1.8 Dịng chảy Spring Boot[6] Hình 1.9 Keycloak[10] Hình 1.10 MySql[9] 10 Hình 1.11 MongoDB[8] 12 Hình 1.12 MinIO[2] 15 Hình 2.1 Website ‘Thư viện số trường Đại học Sư phạm Kỹ thuật Tp.HCM’ 16 Hình 2.2 Website Edumall 17 Hình 2.3 Website ‘Moon’ 18 Hình 2.4 Website ‘Udemy’ 19 Hình 2.5 Kiến trúc chi tiết hệ thống 21 Hình 2.6 Lược đồ Use Case 26 Hình 3.1 Lược đồ chức Đăng nhập 59 Hình 3.2 Lược đồ chức Đăng ký 60 Hình 3.3 Lược đồ chức Làm kiểm tra – Bắt đầu làm 61 Hình 3.4 Lược đồ chức Làm kiểm tra – Trong lúc làm 62 Hình 3.5 Lược đồ chức Làm kiểm tra – Kết thúc làm 63 Hình 3.6 Lược đồ chức Định danh 64 Hình 3.7 Lược đồ chức Phê duyệt giảng viên 65 Hình 3.8 Lược đồ chức Từ chối duyệt giảng viên 66 Hình 3.9 Lược đồ chức Đăng ký khóa học 67 Hình 3.10 Lược đồ chức Thanh toán 68 Hình 3.11 Lược đồ chức Rút tiền 69 Hình 3.12 Class Diagram 70 Hình 3.13 Thiết kế sở liệu 84 Hình 4.1 Giao diện trang Đăng nhập 99 Hình 4.2 Giao diện trang Đăng ký 100 Hình 4.3 Giao diện Quên mật 101 Hình 4.4 Giao diện trang home 102 Hình 4.5 Giao diện Sidebar Quản trị viên 103 Hình 4.6 Giao diện trang Thống kê cho người quản trị .105 Hình 4.7 Giao diện trang Quản lý quản trị viên 106 Hình 4.8 Giao diện trang Quản lý giảng viên .107 Hình 4.9 Giao diện trang Quản lý học viên 108 Hình 4.10 Giao diện trang Quản lý khóa học phía quản trị viên 109 Hình 4.11 Giao diện Sidebar giảng viên 110 Hình 4.12 Giao diện Sidebar học viên 112 Hình 4.13 Giao diện trang Khóa học đăng ký .113 Hình 4.14 Giao diện Khóa học chưa đăng ký 114 Hình 4.15 Giao diện trang Lịch sử giao dịch .115 Hình 4.16 Giao diện trang Quản lý thông tin .116 Hình 4.17 Giao diện trang Bài học .117 Hình 4.18 Giao diện trang Bài kiểm tra .118 Hình 4.19 Giao diện trang Làm kiểm tra 119 Hình 4.20 Giao diện trang Xem lại làm 121 Hình 4.21 Giao diện trang Thơng tin khóa học 122 Hình 4.22 Giao diện trang Thanh toán KLB 123 Hình 4.23 Giao diện trang Thanh tốn VNPAY 123 Hình 4.24 Giao diện trang Định danh 124 Hình 4.25 Giao diện trang diễn đàn 125 Hình 4.26 Giao diện trang quản lý diễn đàn .126 Hình 4.27 Giao diện trang Trị chuyện .127 Hình 4.28 Giao diện trang Quản lý số dư 128 Hình 4.29 Giao diện trang Thống kê cho giảng viên 129 Hình 4.30 Giao diện trang Quản lý khóa học phía giảng viên 130 Hình 4.31 Giao diện Thêm khóa học 131 Hình 4.32 Giao diện trang Quản lý chi tiết khóa học 132 Hình 4.33 Giao diện Quản lý học 133 ""Duyệt"" Truy cập vào trang phê duyệt eKYC Xem thông tin định danh thông tin cá Đảm bảo chối trình từ eKYC thành công thông tin cập nhật trang phê duyệt eKYC nhân người dùng Kiểm tra xem trạng thái duyệt hiển thị có ""Đã duyệt"" Kiểm tra xem thông tin cá nhân người dùng cập nhật đầy đủ Nhấp vào nút ""Từ chối"" để từ chối eKYC Trạng thái duyệt hiển thị ""Đã duyệt"" Thông tin cá nhân người dùng cập nhật Pass đầy đủ Kết phê duyệt hiển thị ""Từ chối"" Kiểm tra xem kết phê duyệt hiển thị có ""Từ chối"" 5.2.4 Quản lý sinh viên Bảng 5.15 Kết kiểm thử Quản lý sinh viên STT Mô tả Đảm bảo thông tin sinh viên hiển thị đầy đủ trang quản lý sinh viên Các bước Kết mong đợi Trạng thái Truy cập vào trang quản lý sinh viên Thông tin sinh viên Kiểm tra xem thông tin hiển thị xác sinh viên hiển thị có đầy đủ Pass đầy đủ trường trang quản lý sinh tên, trạng thái, ngày tạo viên ảnh đại diện 153 Kiểm tra xem thông tin sinh viên họ, tên, ngày sinh, số điện thoại, email, trạng thái ngày tạo hiển thị xác Đảm bảo trạng thái hoạt động sinh viên hiển thị xác trang quản lý sinh viên Truy cập vào trang quản lý sinh viên Kiểm tra xem trạng thái hoạt động sinh viên hiển thị có ""Hoạt động"" Trạng thái hoạt động sinh viên hiển thị xác Pass trang quản lý sinh viên 5.2.5 Thông tin chi tiết học sinh Bảng 5.16 Kết kiểm thử Thông tin chi tiết học sinh STT Mô tả Các bước Kết Trạng thái mong đợi Truy cập vào trang thông tin chi tiết học sinh Kiểm Thông tin chi tra xem tiết học sinh Đảm bảo số lượng thông tin chi tiết hiển thị khóa học hiển thị học sinh hiển thị xác đầy đủ trang chủ admin có với ảnh Pass trang đại diện, họ, tên, thông tin chi ngày sinh, giới tiết học sinh tính, số điện thoại, email, địa chi 154 tiết, người trạng dùng thái ngày đăng ký Kiểm tra xem thông tin học sinh tên khóa học, mơ tả, giá ngày tạo hiển thị xác Đảm bảo số lượng giao Truy cập vào trang Ảnh đại diện dịch hiển thị trang thông tin chi tiết học sinh chủ admin.Đảm bảo học sinh hiển thị ảnh đại diện học Kiểm tra xem ảnh trang Pass sinh hiển thị trang đại diện học thông tin chi thông tin chi tiết học sinh sinh hiển thị tiết học sinh 5.2.6 Quản lý khóa học Bảng 5.17 Kết kiểm thử Quản lý khóa học Mơ tả STT Các bước Kết mong đợi Trạng thái Truy cập vào trang quản lý khóa học Đảm bảo Kiểm tra xem thơng tin thơng tin khóa khóa học hiển thị có đầy học hiển thị đủ trường tên đầy đủ khóa học, mơ tả, giá, trang quản trạng thái trạng thái lý khóa học Thơng tin khóa học hiển thị xác đầy đủ trang Pass quản lý khóa học phê duyệt, ngày tạo ảnh khóa học Kiểm tra xem thơng 155 tin khóa học tên khóa học, mô tả, giá, trạng thái trạng thái phê duyệt, ngày tạo hiển thị xác Đảm bảo trình phê Truy cập vào trang quản duyệt eKYC lý khóa học thành cơng Kiểm tra xem trạng thái thơng tin hoạt động khóa học cập nhật hiển thị có trang phê ""Hoạt động"" Trạng thái hoạt động khóa học hiển thị xác Pass trang quản lý khóa học duyệt eKYC Đảm bảo trạng thái phê duyệt khóa học hiển thị xác trang quản lý khóa học Truy cập vào trang quản lý khóa học Kiểm tra xem trạng thái phê duyệt khóa học hiển thị có ""Đã duyệt"" Đảm bảo trình phê duyệt eKYC thành công thông tin cập nhật trang phê duyệt eKYC Trạng thái phê duyệt khóa học hiển thị xác Pass trang quản lý khóa học Kết xem Truy cập vào trang quản lý khóa học Kiểm tra xem ngày tạo khóa học hiển thị có với ngày tạo ""Pass"" ngày tạo hiển thị Kết xem Pass ""Fail"" ngày tạo không hiển thị hiển thị sai Đảm bảo Truy cập vào trang quản Ảnh khóa học hiển Pass 156 ảnh khóa học lý khóa học thị trang hiển thị Kiểm tra xem ảnh khóa quản lý khóa học trang quản học hiển thị lý khóa học 5.2.7 Quản lý diễn đàn Bảng 5.18 Kết kiểm thử Quản lý diễn đàn STT Mô tả Các bước Kết mong đợi Trạng thái Truy cập vào trang quản lý diễn đàn Kiểm tra xem thông tin danh mục diễn đàn hiển thị có đầy đủ trường Đảm bảo tên danh mục, mô tả, thông tin danh số lượng topic, số mục diễn đàn lượng post, trạng hiển thị thái hành động đầy đủ Kiểm tra xem trang quản lý thông tin danh diễn đàn Thông tin danh mục diễn đàn hiển thị xác đầy đủ trang Pass quản lý diễn đàn mục diễn đàn tên danh mục, mô tả, số lượng topic, số lượng post, trạng thái hành động hiển thị xác Đảm bảo Truy cập vào trang Trạng thái hoạt động trạng thái hoạt quản lý diễn đàn danh mục diễn đàn Pass 157 động danh Kiểm tra xem trạng hiển thị xác mục diễn đàn thái hoạt động trang quản lý diễn đàn hiển thị danh mục diễn đàn xác trang hiển thị có quản lý diễn ""Hoạt động"" đàn Nhấp vào chức ""Thêm category"" trang quản lý diễn đàn Đảm bảo người dùng có thể thêm category vào quản lý diễn đàn Điền thông tin cho category bao gồm: tên category, mô tả trạng thái Chọn trạng thái cho category Xác nhận Category thêm vào hệ thống hiển thị danh sách Pass quản lý diễn đàn thêm category cách nhấn ""Lưu"" nút ""Thêm"" Tìm Đảm bảo người dùng có thể cập nhật thông tin category quản lý diễn đàn Truy cập vào trang quản lý khóa học Kiểm tra xem ngày tạo khóa học hiển thị có với ngày tạo kiếm chọn category cần cập nhật trang quản lý diễn đàn Chọn chức ""Cập Pass nhật"" ""Chỉnh sửa"" để cập nhật thông tin category Cập nhật thông tin 158 cho category bao gồm: tên category, mô tả trạng thái Chọn category nguồn (nếu có) cho category cập nhật Xác nhận cập nhật category cách nhấn nút ""Lưu"" ""Cập nhật"" 5.2.8 Lịch sử giao dịch Bảng 5.19 Kết kiểm thử Lịch sử giao dịch STT Mô tả Các bước Kết mong đợi Trạng thái Truy cập vào trang lịch sử giao dịch Kiểm tra xem thơng tin giao dịch hiển thị có đầy đủ trường Đảm bảo mã giao dịch, tên, thông tin giao email, số điện thoại, Thông tin giao dịch dịch hiển thị khóa học, giá, link hiển thị xác đầy đủ toán, trạng thái và đầy đủ trang trang lịch ngày giao dịch sử giao dịch Pass lịch sử giao dịch Kiểm tra xem thông tin giao dịch mã giao dịch, tên, email, số điện thoại, khóa học, giá, link tốn, trạng thái 159 ngày giao dịch hiển thị xác Đảm bảo trạng thái giao dịch hiển thị xác ""Thành công"" trang lịch sử giao dịch Đảm bảo ngày giao dịch hiển thị xác trang lịch sử giao dịch Truy cập vào trang lịch sử giao dịch Kiểm tra xem trạng thái giao dịch hiển thị có ""Thành cơng"" Truy cập vào trang lịch sử giao dịch Kiểm tra xem ngày giao dịch hiển thị có với ngày giao dịch Trạng thái giao dịch hiển thị xác ""Thành công"" Pass trang lịch sử giao dịch Ngày giao dịch hiển thị xác trang lịch sử giao Pass dịch Đảm bảo người dùng có Truy cập vào trang lịch thể cập nhật sử giao dịch thông tin Kiểm tra xem link category tốn hiển thị có quản lý hoạt động Link toán hiển thị hoạt động trang Pass lịch sử giao dịch diễn đàn Đảm bảo trạng thái giao Truy cập vào trang lịch Trạng thái giao dịch dịch hiển thị sử giao dịch ""Tạo xác hiển thị xác là Kiểm tra xem trạng thái ""Tạo mới"" Pass mới"" giao dịch hiển thị có trang lịch sử giao trang lịch ""Tạo mới"" dịch sử giao dịch 160 5.2.9 Lịch sử rút tiền Bảng 5.20 Kết kiểm thử Lịch sử rút tiền Mô tả STT Các bước Kết mong đợi Trạng thái Truy cập vào trang lịch sử giao dịch rút tiền Kiểm tra xem thơng tin giao dịch rút tiền hiển thị có đầy đủ trường mã giao dịch, tên, Đảm bảo thông tin giao dịch rút tiền hiển thị đầy đủ trang lịch sử giao dịch email, số điện thoại, tên ngân hàng, tên tài khoản, số tài khoản, số tiền, trạng thái ngày giao dịch Kiểm tra xem thông tin giao dịch rút tiền Thông tin giao dịch rút tiền hiển thị xác đầy đủ Pass trang lịch sử giao dịch mã giao dịch, tên, email, số điện thoại, tên ngân hàng, tên tài khoản, số tài khoản, số tiền, trạng thái ngày giao dịch hiển thị xác Đảm bảo Truy cập vào trang lịch trạng thái giao sử giao dịch rút tiền dịch rút tiền Kiểm tra xem trạng thái hiển thị giao dịch rút tiền hiển xác "Thành thị có ""Thành cơng" cơng"" Trạng thái giao dịch rút tiền hiển thị xác "Thành công" Pass trang lịch sử giao dịch 161 trang lịch sử giao dịch Đảm bảo Truy cập vào trang lịch ngày giao dịch sử giao dịch rút tiền Ngày giao dịch rút rút tiền hiển thị Kiểm tra xem ngày giao tiền hiển thị xác xác dịch rút tiền hiển thị có trang lịch sử giao Pass trang lịch sử với ngày giao dịch giao dịch dịch Đảm bảo người dùng có Truy cập vào trang lịch thể cập nhật sử giao dịch rút tiền thông tin Kiểm tra xem số tiền rút category hiển thị có quản lý xác Số tiền rút hiển thị xác trang lịch sử giao Pass dịch diễn đàn Đảm bảo trạng thái giao Truy cập vào trang lịch dịch rút tiền sử giao dịch rút tiền hiển thị Kiểm tra xem trạng thái xác "Tạo giao dịch rút tiền hiển mới" trang thị có ""Tạo lịch sử giao mới"" Trạng thái giao dịch rút tiền hiển thị xác ""Tạo mới"" Pass trang lịch sử giao dịch dịch 162 PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC 1.1 Về lý thuyết Đề tài mang lại cho nhóm chúng em hội học hỏi quý báu hai công nghệ mạnh lĩnh vực lập trình web React Spring Boot Nhóm em khơng ngừng tìm hiểu nghiên cứu thơng qua nhiều nguồn tài liệu sách báo, giao lưu với bạn bè ngành, hướng dẫn từ giảng viên Qua q trình này, chúng em tích lũy kiến thức lý thuyết kinh nghiệm thực tiễn để áp dụng vào dự án Đồ án giúp nhóm em làm quen nắm vững cơng nghệ liên quan q trình phát triển ứng dụng web Ví dụ, chúng em áp dụng KeyCloak vào dự án để xác thực tài khoản người dùng, tạo bảo mật quản lý truy cập hiệu Bên cạnh đó, chúng em sử dụng TypeScript để viết mã front-end, giúp tăng tính rõ ràng kiểm sốt lỗi q trình phát triển Đồng thời, việc sử dụng MySQL, MongoDB để lưu trữ liệu trang web giúp chúng em hiểu rõ quy trình thiết kế sở liệu tương tác với thơng qua Spring Boot Ngồi biết thêm dịch vụ khác như: EKYC, MinIO, Cadence Workflow, service toán VNPay, KienlongBank Pay Tổng kết lại, đề tài mang đến cho nhóm chúng em hội học hỏi to lớn công nghệ chủ chốt lĩnh vực lập trình web Chúng em khơng nắm vững kiến thức lý thuyết mà cịn có thể áp dụng công nghệ KeyCloak, TypeScript MySQL, MongoDB, EKYC, MinIO, Cadence Workflow vào dự án Điều giúp chúng em xây dựng trang web E-Learning hiệu đáp ứng yêu cầu người dùng 1.2 Về ứng dụng Trong khoảng thời gian ngắn ngủi để vừa học vừa làm nên nhóm chúng em kịp hồn thành chức web - Người dùng có thể đăng ký tài khoản, đăng nhập kiểm sốt quyền truy cập Điều tạo mơi trường an tồn riêng tư cho người dùng 163 trình sử dụng ứng dụng - Người dùng có thể xem thơng tin khóa học, bao gồm mơ tả, giảng viên chi tiết khác Họ có thể quản lý tài khoản cá nhân cách thay đổi thông tin cá nhân, mật ảnh đại diện Đồng thời, người dùng có thể tham gia vào diễn đàn trao đổi thông tin, tương tác với người dùng khác chia sẻ kiến thức - Học viên có thể đăng ký khóa học mà họ quan tâm tiến hành học tập Họ có thể xem tài liệu học, tham gia tập kiểm tra, xem lại kết học tập thân Điều giúp học viên tự học cách linh hoạt theo tốc độ riêng - Giảng viên có quyền quản lý thơng tin khóa học, bao gồm tạo khóa học, cập nhật thơng tin khóa học Họ có khả thống kê doanh thu từ khóa học duyệt, tạo nguồn thu nhập từ chia sẻ kiến thức - Người quản trị có thể quản lý thơng tin học viên, khóa học, giao dịch thống kê liệu khóa học, học viên, điều giúp quản trị viên có nhìn tổng quan quản lý hiệu hệ thống E-Learning Đồng thời có doanh thu từ việc lấy theo phần trăm từ giao dịch đăng ký khóa học có hệ thống 1.3 Source Code - Front-end Portal: https://gitlab.com/taiwd123/fe_e-learning (Branch “antd”) - Front-end CMS: https://gitlab.com/taiwd123/cms-e-learning (Branch “admin”) - Back-end: https://gitlab.com/vantinh101/e-learning (Branch “refactor”) ƯU ĐIỂM - Đăng ký dễ dàng: Người dùng có thể dễ dàng đăng ký để tham gia vào hệ thống E-Learning, từ tận hưởng chức tài liệu học tập - Trao đổi thông tin người dùng: Hệ thống cho phép người dùng nhắn tin trao đổi thông tin với nhau, tạo điều kiện thuận lợi cho việc học tập trao đổi kinh nghiệm - Học viên đăng ký học tập dễ dàng: Học viên có thể đăng ký tham gia vào khóa học cách dễ dàng, truy cập vào tài liệu học, tập kiểm tra Điều 164 giúp tăng tính linh hoạt tiện lợi cho q trình học tập - Tích hợp phương thức tốn: Hệ thống tích hợp hai phương thức toán VNPay KienlongBank Pay, giúp người dùng có thể tốn cách dễ dàng tiện lợi - Hệ thống cho phép học viên đánh giá khóa học giảng viên, cung cấp phản hồi chất lượng giảng dạy nội dung học tập Điều giúp cải thiện chất lượng khóa học đáp ứng tốt nhu cầu học viên - Dịch vụ ekyc định danh người dùng: Hệ thống tích hợp dịch vụ ekyc giúp xác thực định danh giấy tờ CCCD CMND người dùng - Đăng ký tài khoản giảng viên dễ dàng: Giảng viên có thể dễ dàng đăng ký tài khoản giảng viên thơng qua quy trình định danh, từ có thể tạo khóa học quản lý khóa học cách thuận tiện - Kiếm thu nhập từ giảng dạy: Giảng viên có thể kiếm thu nhập thơng qua việc chia sẻ kiến thức tạo khóa học website E-Learning - Chức quản lý mạnh mẽ: Hệ thống cung cấp nhiều chức quản lý giúp người quản trị dễ dàng quản lý hệ thống, bao gồm quản lý học viên, khóa học, giao dịch thống kê liệu liên quan NHƯỢC ĐIỂM - Chưa có chức để tiếp cận người dùng khách - Chưa có trang thống kê cho học viên - Giao diện hệ thống chưa tối ưu bắt mắt HƯỚNG PHÁT TRIỂN Hiện web nhiều hướng phát triển để chức đầy đủ hơn: - Thêm tính xem trước khóa học cho người dùng khách - Thống kê cho người dùng học viên số lượng khóa học đăng ký, q trình học,… - Tích hợp cơng nghệ học trực tuyến trực tiếp, cho phép giảng viên học viên tương tác trực tiếp thông qua video, âm chat - Phát triển ứng dụng di động dành cho học viên giảng viên, giúp tăng tính tiện 165 ích truy cập linh hoạt vào nội dung học tập, cung cấp tính thơng báo, tương tác theo dõi tiến trình học tập 166 TÀI LIỆU THAM KHẢO [1] Adservio (2022), What is Spring Boot? https://www.adservio.fr/post/what-is-spring-boot [2] Alex Ellis (2017), https://blog.alexellis.io/meet-minio [3] anshubajaj911(2021), Introduction to TypeScript, https://www.geeksforgeeks.org/introduction-totypescript/#article-meta-div [4] Ben Bromhead and Emrah Seker (2022), Meet Cadence: Workflow Engine for Taming Complex Processes, https://thenewstack.io/meet-cadence-workflow-engine-for-taming-complex-processes/ [5] David Herbert (27/06/2022), What is React.js? (Uses, Examples, & More), https://blog.hubspot.com/website/react-js [6] Deft (2021), Kiến trúc WorkFlow Spring Boot Framework, https://shareprogramming.net/kientruc-va-workflow-cua-spring-boot-framework/ [7] Do Van Nam (2018), Minio – Object storage server AWS S3, https://viblo.asia/p/minioobject-storage-server-nhu-aws-s3-LzD5d0AW5jY [8] File: MongoDB Logo.svg, https://commons.wikimedia.org/wiki/File:MongoDB_Logo.svg [9] Huyền (2020), Mysql gì? Tổng hợp thơng tin chi tiết Mysql, https://bizflycloud.vn/tin-tuc/mysqlla-gi-tai-sao-nen-su-dung-mysql-20200917180705499.htm [10] Marcus Povey (2020), https://www.marcus-povey.co.uk/2020/10/12/using-the-keycloak-accountsmanagement-api/ [11] Mary Branscombe (01/02/2022), https://thenewstack.io/how-typescript-helps-enterprise-developers [12] Meenakshi Goyal (2021), Introduction to Keycloak, https://blog.knoldus.com/introduction-tokeycloak/ [13] MW Team (2023), What are Microservices? How Microservices architecture works, https://middleware.io/blog/microservices-architecture/ [14] Reactjs, logo Icon, https://icon-icons.com/icon/reactjs-logo/170805 [15] TopDev, Giới thiệu Spring Boot Spring Boot gì? https://topdev.vn/blog/gioi-thieu-ve-springboot-spring-boot-la-gi/ [16] TopDev, MongoDB gì? Định nghĩa đầy đủ chi tiết MongoDB, https://topdev.vn/blog/mongodb-la-gi/ [17] TopDev, Typescript gì? Ưu nhược điểm Typescript, https://topdev.vn/blog/typescript-la-gi-uuva-nhuoc-diem-cua-typescript/ [18] What is Dom in React?, https://www.javatpoint.com/what-is-dom-in-react 167