Xây dựng website dạy học số sử dụng công nghệ mern stack

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

ĐỒ ÁN TỐT NGHIỆP
NGÀNH CƠNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE DẠY HỌC SỐ
SỬ DỤNG CÔNG NGHỆ MERN STACK

GVHD: TS. LÊ VĂN VINH
SVTH : LÊ THỊ MINH NGUYỆT

SKL011250

Tp. Hồ Chí Minh, tháng 07/2023


BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA CƠNG NGHỆ THƠNG TIN


Lê Thị Minh Nguyệt

19110413

ĐỀ TÀI:

XÂY DỰNG WEBSITE DẠY HỌC SỐ
SỬ DỤNG CƠNG NGHỆ MERN STACK

KHỐ LUẬN TỐT NGHIỆP
GIÁO VIÊN HƯỚNG DẪN
TS. LÊ VĂN VINH

Thành phố Hồ Chí Minh – Tháng 07/2023


ĐH SƯ PHẠM KỸ THUẬT TP. HCM

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CÔNG NGHỆ THÔNG TIN

Độc lập – Tự do – Hạnh phúc

********

********

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
Họ và tên sinh viên thực hiện: Lê Thị Minh Nguyệt

MSSV: 19110413

Ngành: Công nghệ thông tin
Tên đề tài: Xây dựng website dạy học số sử dụng công nghệ MERN Stack
Họ và tên giảng viên hướng dẫn: TS. Lê Văn Vinh
NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện

.................................................................................................................................................................
.................................................................................................................................................................
2. Ưu điểm
.................................................................................................................................................................
.................................................................................................................................................................
3. Khuyết điểm
.......................................................................................................................................................................
.......................................................................................................................................................................
4. Đề Nghị cho bảo vệ hay không?
.......................................................................................................................................................................
5. Đánh giá loại: ......................................................................................................................................
6. Điểm: ....................................................................
Tp. Hồ Chí Minh, Ngày … Tháng … Năm 2023
Giảng viên hướng dẫn
(Ký và ghi rõ họ tên)

1


ĐH SƯ PHẠM KỸ THUẬT TP. HCM

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CÔNG NGHỆ THÔNG TIN

Độc lập – Tự do – Hạnh phúc

********

********

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

Họ và tên sinh viên thực hiện: Lê Thị Minh Nguyệt

MSSV: 19110413

Ngành: Công nghệ thông tin
Tên đề tài: Xây dựng website dạy học số sử dụng công nghệ MERN Stack
Họ và tên giảng viên phản biện: ThS. Mai Anh Thơ
NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện
.................................................................................................................................................................
.................................................................................................................................................................
2. Ưu điểm
.................................................................................................................................................................
.................................................................................................................................................................
3. Khuyết điểm
.......................................................................................................................................................................
.......................................................................................................................................................................
4. Đề Nghị cho bảo vệ hay không?
.......................................................................................................................................................................
5. Đánh giá loại: ......................................................................................................................................
6. Điểm: ....................................................................
Tp. Hồ Chí Minh, Ngày … Tháng … Năm 2023
Giảng viên phản biện
(Ký và ghi rõ họ tên)

2

LỜI CẢM ƠN
Đầu tiên, em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đến thầy Lê Văn Vinh đã tận tình
dìu dắt chỉ bảo em trong suốt quá trình học tập và thực hiện đề tài này. Em xin cảm ơn thầy đã nhiệt tình
giảng dạy và hướng dẫn em trong việc lựa chọn đề tài, hướng tiếp cận và chỉnh sửa những thiếu sót trong
quá trình thực hiện.
Em cũng xin gửi lời cám ơn tới các thầy cô của trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí
Minh – đặc biệt là các giảng viên của khoa Công Nghệ Thông Tin, đã nhiệt tình giảng dạy, và chia sẻ rất
nhiều kiến thức và kinh nghiệm cho chúng em trong quá trình học tập tại trường. Để giúp em có thể hồn
thành đề tài một cách thành cơng nhất.
Tuy nhiên trong q trình thực hiện đề tài khơng thể tránh khỏi những sai sót rất mong các thầy
(cơ) có thể bỏ qua. Em rất mong nhận được ý kiến đóng góp của thầy (cơ) để em có thêm nhiều kinh
nghiệm, nâng cao kiến thức cho bản thân để phục vụ tốt cho quá trình học tập và làm việc sau này.
Chúng em xin chân thành cảm ơn!
Nhóm thực hiện
Lê Thị Minh Nguyệt

3


ĐH SƯ PHẠM KỸ THUẬT TP. HCM
KHOA CÔNG NGHỆ THÔNG TIN

ĐỀ CƯƠNG TIỂU LUẬN CHUYÊN NGÀNH
Họ và tên sinh viên:

Lê Thị Minh Nguyệt

MSSV :

19110413

Thời gian làm khố luận:
Chun ngành: Cơng Nghệ Phần Mềm
Tên đề tài: Xây dựng website dạy học số sử dụng công nghệ MERN Stack
Giảng viên hướng dẫn: TS. Lê Văn Vinh
Nhiệm vụ của tiểu luận:
1. Lý thuyết
Tìm hiểu về các công nghệ: MERN Stack, Restful API, Json Web Token.
2. Thực hành
Sử dụng Restful API, NodeJS, Express JS để viết APIs cho các module trong hệ thống.
Sử dụng MongoDB để lưu trữ dữ liệu người dùng của hệ thống.
Sử dụng Json Web Token để xác thực và ủy quyền cho hệ thống APIs hoạt động tốt và hiệu quả.
Sử dụng React JS làm Framework để thiết kế và xử lý giao diện web cho người dùng thao tác.
Tp. Hồ Chí Minh, Ngày … Tháng … Năm 2023
Giảng viên hướng dẫn
(Ký và ghi rõ họ tên)

4


MỤC LỤC
PHẦN MỞ ĐẦU .......................................................................................................................................... 11
1.

LÝ DO CHỌN ĐỀ TÀI .............................................................................................................................. 11

2.

TÍNH CẤP THIẾT CỦA ĐỀ TÀI ............................................................................................................. 11

3.

KHẢO SÁT HIỆN TRẠNG CỦA CÁC WEBSITE TƯƠNG TỰ ......................................................... 12
3.1.
3.2.

4.

KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC ........................................................................................................... 15
4.1.
4.2.

5.

Yêu cầu phi chức năng ........................................................................................................................................ 15
Yêu cầu phi chức năng ........................................................................................................................................ 15

ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU .......................................................................................... 15
5.1.
5.2.

6.

Đánh giá tổng quan cả 3 trang web ..................................................................................................................... 12
Các chức năng đặc biệt của từng trang web ........................................................................................................ 13

Đối tượng nghiên cứu ......................................................................................................................................... 15
Phạm vi nghiên cứu ............................................................................................................................................ 16

Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN ............................................................................................... 16

PHẦN NỘI DUNG ...................................................................................................................................... 17
CHƯƠNG 1: CÁC CÔNG NGHỆ SỬ DỤNG ........................................................................................... 17
1.1. KIẾN TRÚC CHUNG CỦA HỆ THỐNG .................................................................................................. 17
1.2. TÌM HIỂU CƠNG NGHỆ MERN STACK ................................................................................................ 17
1.2.1. Cơng nghệ MERN stack là gì? ................................................................................................................................. 17
1.2.2. Quy trình hoạt động của MERN Stack ..................................................................................................................... 18
1.2.3. Lý do lựa chọn công nghệ MERN Stack .................................................................................................................. 19

1.3. REACTJS ...................................................................................................................................................... 19
1.3.1. Giới thiệu, khái niệm React ...................................................................................................................................... 19
1.3.2. So sánh React và những Framework khác ................................................................................................................ 20
1.3.3. Ưu nhược điểm của React ........................................................................................................................................ 22

1.4. NODEJS ......................................................................................................................................................... 22
1.4.1. Giới thiệu khái niệm ................................................................................................................................................. 22
1.4.2. Ưu và nhược điểm của NodeJS ................................................................................................................................ 24

1.5. EXPRESS JS ................................................................................................................................................. 25
1.5.1. Giới thiệu .................................................................................................................................................................. 25
1.5.2. Các tính năng nổi bật ................................................................................................................................................ 25

1.6. MONGODB ................................................................................................................................................... 26
1.6.1. Giới thiệu .................................................................................................................................................................. 26
1.6.2. Cách hoạt động ......................................................................................................................................................... 26
1.6.3. Ưu và nhược điểm .................................................................................................................................................... 27

1.7. RESTFUL API .............................................................................................................................................. 28
1.7.1. Giới thiệu, khái niệm ................................................................................................................................................ 28
1.7.2. Cách hoạt động ......................................................................................................................................................... 29

1.7.3. Ưu điểm .................................................................................................................................................................... 29

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ...................................................................................................... 30
2.1. LƯỢC ĐỒ USE CASE ................................................................................................................................. 30
2.1.1. Use case tổng quan ................................................................................................................................................... 30
2.1.2. Use case chi tiết ........................................................................................................................................................ 30
2.1.3. Đặc tả use case ......................................................................................................................................................... 32

2.2. LƯỢC ĐỒ TUẦN TỰ - SEQUENCE DIAGRAM .................................................................................... 49
2.2.1. Xem thông tin trang web .......................................................................................................................................... 49
2.2.2. Đăng nhập................................................................................................................................................................. 49
2.2.3. Đăng xuất ................................................................................................................................................................. 50

5


2.2.4. Đăng ký tài khoản..................................................................................................................................................... 50
2.2.5. Thêm lớp học ........................................................................................................................................................... 51
2.2.6. Tham gia lớp học ...................................................................................................................................................... 52
2.2.7. Rời khỏi lớp học ....................................................................................................................................................... 52
2.2.8. Xoá lớp học .............................................................................................................................................................. 53
2.2.9. Quản lý bảng tin ....................................................................................................................................................... 53
2.2.10. Thêm bài đăng ........................................................................................................................................................ 54
2.2.11. Xoá bài đăng ........................................................................................................................................................... 54
2.2.12. Thêm bình luận ....................................................................................................................................................... 55
2.2.13. Xố bình luận ......................................................................................................................................................... 55
2.2.14. Xố thành viên........................................................................................................................................................ 56
2.2.15. Quản lý bài tập........................................................................................................................................................ 56
2.2.16. Thêm bài tập ........................................................................................................................................................... 57
2.2.17. Xoá bài tập.............................................................................................................................................................. 57

2.3. LƯỢC ĐỒ LỚP ............................................................................................................................................ 58
2.4. THIẾT KẾ CƠ SỞ DỮ LIỆU ...................................................................................................................... 59
2.4.1. Lược đồ cơ sở dữ liệu ............................................................................................................................................... 59
2.4.2. Mô tả các bảng ......................................................................................................................................................... 59

2.4. THIẾT KẾ GIAO DIỆN............................................................................................................................... 65
2.4.1. Landing Page ............................................................................................................................................................ 65
2.4.2. Modal đăng nhập ...................................................................................................................................................... 66
2.4.3. Modal đăng ký tài khoản .......................................................................................................................................... 67
2.4.4. Giao diện trang home sau khi đăng nhập.................................................................................................................. 68
2.4.5. Tạo lớp học ............................................................................................................................................................... 71
2.4.6. Modal tham gia lớp................................................................................................................................................... 72
2.4.7. Thêm sự lựa chọn khi click vào mỗi lớp học............................................................................................................ 73
2.4.8. Lớp học chi tiết ......................................................................................................................................................... 74
2.4.9. Đăng bài trong Bảng tin ........................................................................................................................................... 75
2.4.10. Bình luận bài viết.................................................................................................................................................... 76
2.4.11. Các lựa chọn của mỗi bài đăng ............................................................................................................................... 76
2.4.12. Các lựa chọn của bình luận..................................................................................................................................... 77
2.4.13. Bài kiểm tra ............................................................................................................................................................ 78
2.4.14. Tạo bài kiểm tra ...................................................................................................................................................... 79
2.4.15. Tạo tiêu đề bài kiểm tra .......................................................................................................................................... 80

CHƯƠNG 3: CÀI ĐẶT VÀ KIỂM THỬ.................................................................................................... 82
3.1. KẾ HOẠCH KIỂM THỬ............................................................................................................................. 82
3.1.1. Mục đích kiểm thử.................................................................................................................................................... 82
3.1.2. Lịch trình kiểm thử ................................................................................................................................................... 82

3.2. PHẠM VI KIỂM THỬ ................................................................................................................................. 82
3.3. THEO DÕI LỖI ............................................................................................................................................ 83

3.3.1. Phân loại lỗi .............................................................................................................................................................. 83
3.3.2. Quy trình xử lý lỗi .................................................................................................................................................... 84
3.4. Kiểm thử một số chức năng của hệ thống ................................................................................................................... 84

PHẦN KẾT LUẬN ...................................................................................................................................... 86
1.

VỀ LÝ THUYẾT ........................................................................................................................................ 86

2.

CHỨC NĂNG CỦA WEBSITE ................................................................................................................ 86

3.

ƯU ĐIỂM .................................................................................................................................................... 86

4.

NHƯỢC ĐIỂM ........................................................................................................................................... 87

5.

HƯỚNG PHÁT TRIỂN ............................................................................................................................. 87

TÀI LIỆU THAM KHẢO............................................................................................................................ 88

6

DANH MỤC HÌNH ẢNH
Hình 1: Hình minh hoạ kiến trúc hệ thống ................................................................................................... 17
Hình 2: Tổng quan MERN Stack ................................................................................................................. 18
Hình 3: Quy trình hoạt động của MERN Stack ........................................................................................... 18
Hình 4: DOM ảo trong ExpressJS dung để tối ưu hố việc re-render DOM thật ........................................ 20
Hình 5: Q trình chuyển đổi từ mã nguồn NodeJS sang JavaScript nhờ vào Chrome V8 engine ............. 23
Hình 6: Quá trình chuyển đổi từ mã nguồn NodeJS sang JavaScript nhờ vào Chrome V8 engine ............. 24
Hình 7: Triển khai Middleware trong ExpressJS ......................................................................................... 26
Hình 8: So sánh tốc độ khi thêm 1 bản ghi giữa MongoDB và SQL ........................................................... 27
Hình 9: Kiến trúc REST ............................................................................................................................... 29
Hình 10: Use case tổng quan ........................................................................................................................ 30
Hình 11: Use case Quản lý xác thực người dung ......................................................................................... 30
Hình 12: Use case quản lý tài khoản ............................................................................................................ 31
Hình 13: Use case Tương tác của học sinh trên trang chủ ........................................................................... 31
Hình 14: Use case Tương tác của học sinh trên trang lớp học ..................................................................... 31
Hình 15: Use case Tương tác của giáo viên trên trang chủ .......................................................................... 32
Hình 16: Use case Tương tác của giáo viên trên trang lớp học ................................................................... 32
Hình 17: Sequence Diagram Xem thơng tin trang web ............................................................................... 49
Hình 18: Sequence Diagramn Đăng nhập .................................................................................................... 50
Hình 19: Sequence Diagram Đăng xuất ....................................................................................................... 50
Hình 20: Sequence Diagram Đăng ký tài khoản .......................................................................................... 51
Hình 21: Sequence Diagram Thêm lớp học ................................................................................................. 51
Hình 22: Sequence Diagram Tham gia lớp học ........................................................................................... 52
Hình 23: Sequence Diagram Rời khỏi lớp học ............................................................................................ 52
Hình 24: Sequence Diagram Xố lớp học .................................................................................................... 53
Hình 25: Sequence Diagram Quản lý bảng tin ............................................................................................. 53
Hình 26: Sequence Diagram Thêm bài đăng ............................................................................................... 54
Hình 27: Sequence Diagram Xố bài đăng .................................................................................................. 54
Hình 28: Sequence Diagram Thêm bình luận .............................................................................................. 55
Hình 29: Sequence Diagram Xố bình luận ................................................................................................. 55

Hình 30: Sequence Diagram Xố thành viên ............................................................................................... 56
Hình 31: Sequence Diagram Quản lý bài tập ............................................................................................... 56
Hình 32: Sequence Diagram Thêm bài tập .................................................................................................. 57
Hình 33: SequenceDiagram Xố bài tập ...................................................................................................... 57
Hình 34: Class Diagram ............................................................................................................................... 58
Hình 35: Lược đồ cơ sở dữ liệu.................................................................................................................... 59
Hình 36: Landing page 1 .............................................................................................................................. 65
Hình 37: Landing Page 2 .............................................................................................................................. 65
Hình 38: Đăng nhập ..................................................................................................................................... 66
Hình 39: Đăng ký tài khoản ......................................................................................................................... 67
Hình 40: Giao diện trang Home ................................................................................................................... 68
Hình 41: Giao khi click vào dấu + ............................................................................................................... 69
Hình 42: Giao diện khi click vào tên và ảnh đại diện .................................................................................. 69
Hình 43: Giao diện khi click vào icon Hamberger trên header .................................................................... 70
Hình 44: Giao diện tạo lớp học .................................................................................................................... 71
Hình 45: Giao diện modal tham gia lớp học ................................................................................................ 72
Hình 46: Giao diện khi click vào lớp mà người dùng chưa tham gia .......................................................... 73
Hình 47: Giao diện khi click vào lớp của mình ........................................................................................... 73
Hình 48: Giao diện khi click vào lớp user đã tham gia ................................................................................ 74
Hình 49: Giao diện của lớp học chi tiết........................................................................................................ 75
7


Hình 50: Giao diện đăng bài ........................................................................................................................ 75
Hình 51: Giao diện bình luận bài viết .......................................................................................................... 76
Hình 52: Giao diện lựa chọn của mỗi bài đăng ............................................................................................ 77
Hình 53: Giao diện các lựa chọn của bình luận ........................................................................................... 78
Hình 54: Giao diện của bài kiểm tra ............................................................................................................ 78
Hình 55: Giao diện tạo bài kiểm tra ............................................................................................................. 79
Hình 56: Giao diện tạo tiêu đề bài kiểm tra ................................................................................................. 80

8


DANH MỤC BẢNG BIỂU
Bảng 1: Phân tích chức năng của các website tương tự ............................................................................... 12
Bảng 2: Phân tích chức năng của các website tương tự ............................................................................... 13
Bảng 3: Đánh giá ngơn ngữ lập trình tương tự ............................................................................................ 20
Bảng 4: Đặc tả use case Đăng ký tài khoản ................................................................................................. 32
Bảng 5: Đặc tả use case Đăng nhập ............................................................................................................. 34
Bảng 6: Đặc tả use case Đăng xuất .............................................................................................................. 35
Bảng 7: Đặc tả Use case Thay đổi mật khẩu ................................................................................................ 37
Bảng 8: Đặc tả use case Vào lớp học ........................................................................................................... 39
Bảng 9: Đặc tả use case Rời lớp học ............................................................................................................ 40
Bảng 10: Đặc tả use case Cập nhật thông tin cá nhân .................................................................................. 40
Bảng 11: Đặc tả use case Đăng bài viết ....................................................................................................... 42
Bảng 12: Đặc tả use case Làm bài kiểm tra ................................................................................................. 43
Bảng 13: Đặc tả use case Bình luận bài viết ................................................................................................ 44
Bảng 14: Đặc tả use case Tạo lớp học.......................................................................................................... 45
Bảng 15: Đặc tả use case Chỉnh sửa thông tin lớp học ................................................................................ 46
Bảng 16: Đặc tả use case Xem kết quả của các bài kiểm tra ....................................................................... 47
Bảng 17: Đặc tả use case Xoá lớp học ......................................................................................................... 48
Bảng 18: User ............................................................................................................................................... 59
Bảng 19: Class.............................................................................................................................................. 60
Bảng 20: Bảng Newsfeed ............................................................................................................................. 61
Bảng 21: Bảng Comment ............................................................................................................................. 61
Bảng 22: Bảng Test ...................................................................................................................................... 62
Bảng 23: Bảng Questions ............................................................................................................................. 62
Bảng 24: Bảng Answers ............................................................................................................................... 63
Bảng 25: Bảng Take test .............................................................................................................................. 63

Bảng 26: Test Log ........................................................................................................................................ 64
Bảng 27: Chức năng của Landing page ....................................................................................................... 65
Bảng 28: Chức năng đăng nhập ................................................................................................................... 66
Bảng 29: Chức năng Đăng kí tài khoản ....................................................................................................... 67
Bảng 30: Chức năng ở trang Home .............................................................................................................. 68
Bảng 31: Chức năng khi click vào dấu + ..................................................................................................... 69
Bảng 32: Chức năng khi click vào tên ......................................................................................................... 69
Bảng 33: Chức năng của thanh slide bar ...................................................................................................... 70
Bảng 34: Chức năng tạo lớp học .................................................................................................................. 71
Bảng 35: Chức năng tham gia lớp học ......................................................................................................... 72
Bảng 36: Chức năng khi click vào lớp mà người dùng chưa tham gia ........................................................ 73
Bảng 37: Chức năng khi click vào lớp của mình tạo ................................................................................... 74
Bảng 38: Chức năng khi click vào lớp user đã tham gia .............................................................................. 74
Bảng 39: Chức năng của lớp học chi tiết ..................................................................................................... 75
Bảng 40: Chức năng đăng bài trong bảng tin ............................................................................................... 76
Bảng 41: Chức năng bình luận bài viết ........................................................................................................ 76
Bảng 42: Chức năng lựa chọn của mỗi bài đăng .......................................................................................... 77
Bảng 43: Chức năng của các lựa chọn của bình luận ................................................................................... 78
Bảng 44: Chức năng của bài kiểm tra .......................................................................................................... 78
Bảng 45: Chức năng tạo bài kiểm tra ........................................................................................................... 79
Bảng 46: Chức năng tạo tiêu đề bài kiểm tra ............................................................................................... 80
Bảng 47: Lịch trình kiểm thử ....................................................................................................................... 82
Bảng 48: Phân loại lỗi .................................................................................................................................. 83
Bảng 49: Bảng kiểm thử một số chức năng của Giáo viên .......................................................................... 84
9


Bảng 50: Kiểm thử một số chức năng của học viên ..................................................................................... 85

10

PHẦN MỞ ĐẦU
1. LÝ DO CHỌN ĐỀ TÀI
Ứng dụng CNTT vào giảng dạy và học tập đang là xu hướng được toàn cầu quan tâm và hưởng
ứng. Hầu hết các tổ chức, cơ sở giáo dục trên thế giới đều đã trang bị các trang web dạy học trực tuyến để
lưu trữ tài liệu dạy học hoặc thậm chí dùng làm kênh dạy học chính thức, học viên của họ có thể tham gia
học tập mọi lúc mọi nơi vơ cùng thuận tiện. Song song với đó là việc tổ chức kiểm tra, đánh giá chất
lượng của học viên cũng được tổ chức bằng hình thức trực tuyến, nổi bậc như các kỳ thi TOEFL, GMAT,
GRE của ETS (Educational Testing Service) hay MCSE, MCAD của Microsoft.
Đại dịch COVID-19 trong một thời gian khá dài cũng chính là điều kiện để trường học và ngành
giáo dục nhận thấy tầm quan trọng lớn của việc chuyển đổi số trong giáo dục đào tạo. Chính phủ tại nhiều
nước bao gồm Việt Nam đã áp dụng phương pháp dạy trực tuyến để có thể đảm bảo được sự trở lại bình
thường mới. Đồng thời, nhiều nước cũng đã xác định chuyển đổi số trong giáo dục sẽ không chỉ giới hạn
tại thời kỳ dịch bệnh mà nó sẽ được áp dụng rộng rãi trong tương lai.
Để trực tiếp đi vào thực tiễn nghiên cứu các khó khăn, vướng mắc và đóng góp một giải pháp
trong việc chuyển đổi dạy học số, nhóm chúng em quyết định chọn đề tài “Xây dựng website dạy học số”.
Với đề tài này nhóm chúng em mong muốn xây dựng một hệ thống e-learning đơn giản, gọn nhẹ, dễ dàng
triển khai, tiếp cận, sử dụng, một môi trường học tập trực tuyến với sự trợ giúp của công nghệ MERN
Stack
2. TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Giáo dục 4.0 là mơ hình giáo dục thơng minh với sự liên kết chặt chẽ giữa nhiều tổ chức với nhau,
bao gồm: Nhà trường – nhà quản lý – doanh nghiệp. Đây là mối liên kết mang lại điều kiện học tập cho
mỗi sinh viên có cơ hội phát triển năng lực của bản thân theo hướng tự do. Đồng thời, gắn kết công nghệ
vào sự phát triển kinh tế, xã hội trong thời đại công nghệ 4.0 và được áp dụng trong phần lớn các trường
đại học ở Việt Nam và trên thế giới.
Giáo dục 4.0 tại các trường cao đẳng, đại học khơng cịn q cứng nhắc và bó buộc như trước kia.
Thay vào đó, mơi trường học tập sẽ ứng dụng nhiều thiết bị công nghệ, trang bị kỹ thuật nhằm giúp học
sinh, sinh viên được trải nghiệm, thực hành, tiếp cận nhiều hơn. Học tập trong nền giáo dục 4.0 sẽ không
chỉ là các buổi học trên lớp, những phịng thí nghiệm mà rộng hơn thế nữa. Học sinh, sinh viên sẽ được

tham gia vào những phòng ban, bộ máy tổ chức của doanh nghiệp để trau dồi, rèn luyện thêm những kiến
thực thực tiễn. Nhờ đó, sau khi ra trường, học sinh sinh viên sẽ có tay nghề, kinh nghiệm cùng khả năng
thích ứng cao.
Đứng trước bối cảnh nền kinh tế có nhiều biến động ngày càng căng thẳng thì cũng là lúc cần phải
đưa ra những giải pháp về chất lượng nhân lực, điều đó địi hỏi nền giáo dục cần phải có sự đổi thay cùng
với tư duy sáng tạo. Hoặc các bạn cũng có thể liên tưởng với thực trạng của sinh viên mới ra trường của
11


nước ta, đa phần là khơng có kinh nghiệm làm việc thực tế, chưa có kỹ năng phân tích, thiếu kỹ năng tổng
hợp thơng tin, gặp khó khăn khi làm việc độc lập... Trong khi thành tựu của cách mạng công nghệ đang
giống như “miếng mồi” hấp dẫn giải tỏa đi được “cơn đói” chất lượng nguồn nhân lực. Do vậy mà cách
mạng giáo dục 4.0 chính là một trong những giải pháp vô cùng cần thiết.
Công nghệ giáo dục 4.0 sẽ khơng gị bó, cứng nhắc vào việc chỉ học lý thuyết sng, học vẹt, học
tủ. Thay vào đó, học sinh và sinh viên sẽ được trang bị những kiến thức có chiều sâu, phù hợp với chuyên
ngành mà mình đang theo đuổi.
Cơng nghệ 4.0 trong giáo dục là q trình học đến đâu, vận dụng tới đó vào thực tiễn. Vì thế, người học sẽ
nắm chắc kiến thức, hiểu rõ vấn đề thay vì chỉ học lý thuyết sng như trước kia. Với mơ hình giáo dục
4.0 sẽ là động lực để học sinh, sinh viên cố gắng, phấn đấu để trau dồi kiến thức, kinh nghiệm thực tiễn và
cả chuyên môn.
3. KHẢO SÁT HIỆN TRẠNG CỦA CÁC WEBSITE TƯƠNG TỰ
3.1.

Đánh giá tổng quan cả 3 trang web
Bảng 1: Phân tích chức năng của các website tương tự

CÁC TIÊU CHÍ
Giao diện Website

SHUB

UTEXLMS

EDUZ

Giao diện đẹp, dễ sử dụng. Giao diện đẹp nhưng hơi Giao diện ở mức căn bản
khó sử dụng hơn

và khó cho người dùng
mới

Tốc độ phản hồi

Nhanh.

Nhanh.

Nhanh.

Bảo mật

Mã nguồn đóng nên việc Đây là mã nguồn mở nên Mã nguồn đóng nên việc
khai thác lỗ hổng sẽ khó là việc có thể dựa vào mã khai thác lỗ hổng sẽ khó
khăn hơn

nguồn và tìm cách để tấn khăn hơn
cơng là có thể xãy ra

Quản trị

Hệ thống khơng quá lớn Hệ thống lớn với lượng Về cơ bản đây là 1 trang
nên việc quản trị dễ dàng.

người dùng lớn nên việc web cho phép người dùng
quản trị sẽ khó khăn hơn. truy cập vào các khóa học
nên cũng khơng q khó
để quản trị

12


Tính năng website

Gồm những tính năng cơ Nhiều tính năng tuy Chức năng khá nhiều tuy
bản cho 1 trang web nhiên khơng dễ sử dụng nhiên là q khó cho

Tốc độ tải trang

ELearning

cho những người mới.

người mới sử dụng

Tốc độ load nhanh

Tốc độ load nhanh

Tốc độ load nhanh

website
Dễ dàng thao tác và Điều hướng thao tác dễ Một số chỗ điều hướng Điều hướng chưa được tốt
điều hướng.

dàng, dễ thực hiện

cịn đang hơi khó sử lắm.
dụng.

Thân thiện với các

Khơng có responsive

Có responsive đầy đủ

Có responsive

thiết bị di động
(responsive)
Hạn chế tối thiểu

Phần lớn lỗi đã được hạn Còn một số bug nhỏ tuy Một số chỗ thì chưa thể

các lỗi

chế ít thấy bug ở console nhiên cũng khơng đáng gì biết là bị giới hạn quyền
và thao tác khá mượt mà

so với tính năng đồ sộ.

hay là bugs

Website dễ dàng

Có thể thêm được nhiều Số lượng tính năng phần Giao diện hiện tại chưa đủ

nâng cấp

tính năng một cách dễ lớn đã có code sẵn chỉ cần tốt nên việc phát triển
dàng mà không ảnh hưởng áp dụng vào site custom thêm tính năng thì chỉ gây
đến những tính năng cũ

lại là được

khó hiểu cho người dùng
nhiều hơn.

Website dễ dàng

Website sử dung giao diện Website có số lượng tính Website sử dụng giao

triển khai

và số tính năng cũng năng quá là nhiều nên diện và số tính năng cũng
khơng nhiều thì việc triển việc triển khai cho những không nhiều nên việc
khai web lên host sẽ không cơ sở nhỏ những nơi chưa triển khai web lên host sẽ
tốn quá nhiều tài ngun có đủ nguồn lực thì là khơng tốn quá nhiều tài
và nguồn lực

3.2.

không thể

nguyên và nguồn lực

Các chức năng đặc biệt của từng trang web
Bảng 2: Phân tích chức năng của các website tương tự

CÁC TIÊU CHÍ

SHUB

UTEXLMS

EDUZ
13


Giao diện Website

Giao diện đẹp, dễ sử dụng. Giao diện đẹp nhưng hơi Giao diện ở mức căn bản
khó sử dụng hơn

và khó cho người dùng
mới

Tốc độ phản hồi

Nhanh.

Nhanh.

Nhanh.

Bảo mật

Mã nguồn đóng nên việc Đây là mã nguồn mở nên Mã nguồn đóng nên việc
khai thác lỗ hổng sẽ khó là việc có thể dựa vào mã khai thác lỗ hổng sẽ khó
khăn hơn

nguồn và tìm cách để tấn khăn hơn
cơng là có thể xãy ra

Quản trị

Hệ thống khơng q lớn Hệ thống lớn với lượng Về cơ bản đây là 1 trang
nên việc quản trị dễ dàng.

người dùng lớn nên việc web cho phép người dùng
quản trị sẽ khó khăn hơn. truy cập vào các khóa học
nên cũng khơng q khó
để quản trị

Tính năng website

Gồm những tính năng cơ Nhiều tính năng tuy Chức năng khá nhiều tuy
bản cho 1 trang web nhiên không dễ sử dụng nhiên là quá khó cho

Tốc độ tải trang

ELearning

cho những người mới.

người mới sử dụng

Tốc độ load nhanh

Tốc độ load nhanh

Tốc độ load nhanh

website
Dễ dàng thao tác và Điều hướng thao tác dễ Một số chỗ điều hướng Điều hướng chưa được tốt
điều hướng.

dàng, dễ thực hiện

cịn đang hơi khó sử lắm.
dụng.

Thân thiện với các

Khơng có responsive

Có responsive đầy đủ

Có responsive

thiết bị di động

(responsive)
Hạn chế tối thiểu

Phần lớn lỗi đã được hạn Còn một số bug nhỏ tuy Một số chỗ thì chưa thể

các lỗi

chế ít thấy bug ở console nhiên cũng khơng đáng gì biết là bị giới hạn quyền
và thao tác khá mượt mà

so với tính năng đồ sộ.

hay là bugs

14


Website dễ dàng

Có thể thêm được nhiều Số lượng tính năng phần Giao diện hiện tại chưa đủ

nâng cấp

tính năng một cách dễ lớn đã có code sẳn chỉ cần tốt nên việc phát triển
dàng mà không ảnh hưởng áp dụng vào site custom thêm tính năng thì chỉ gây
đến những tính năng cũ

lại là được

khó hiểu cho người dùng

nhiều hơn.

Website dễ dàng

Website sử dung giao diện Website có số lượng tính Website sử dụng giao

triển khai

và số tính năng cũng năng quá là nhiều nên diện và số tính năng cũng
khơng nhiều thì việc triển việc triển khai cho những không nhiều nên việc
khai web lên host sẽ không cơ sở nhỏ những nơi chưa triển khai web lên host sẽ
tốn quá nhiều tài nguyên có đủ nguồn lực thì là khơng tốn q nhiều tài
và nguồn lực

khơng thể

ngun và nguồn lực

4. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Dựa trên kết quả khảo sát hiện trạng, nhóm chúng em nhận thấy một Website dạy học số cần có
những yêu cầu sau đây
4.1.

Yêu cầu phi chức năng
Tạo và tham gia các khoá học
Quản lý học viên
Diễn đàn trao đổi, tương tác giữa các thành viên trong lớp, có thể đăng bài, bình luận
Làm bài kiểm tra trắc nghiệm trên ứng dụng

4.2.

Yêu cầu phi chức năng
Giao diện đẹp, đơn giả, dễ sử dụng.
Tốc độ phản hồi nhanh.
Hạn chế xuất hiện lỗi trên giao diện người dùng.
Thân thiện với các thiết bị di động (responsive).

5. ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU
5.1.

Đối tượng nghiên cứu

Với đề tài này, em tập trung nghiên cứu về các web dạy học số, các
dạng câu hỏi trắc nghiệm đã từng được sử dụng và quan trọng hơn chính là cơng nghệ để có thể xây dựng
ứng dụng web, cụ thể:
− Nghiên cứu thực tiễn những hình thức quản lý học sinh online và kiểm tra online đã và đang được sử
dụng để nắm bắt tâm lý người dùng.
15


− Nghiên cứu và học cách sử dụng NodeJS, Express JS và API để xây dụng một hệ thống có các API hỗ
trợ truy vấn dữ liệu nhanh chóng và hiệu quả.
− Về phần dữ liệu, nghiên cứu sử dụng CSDL NoSQL (cụ thể là MongoDB) để lưu trữ dữ liệu của hệ
thống.
− Framework ReactJS và một số thư việc khác để xây dựng giao diện cho cả hệ thống.
− Nghiên cứu JWT (Json Web Token) bảo mật cho hệ thống, cung cấp token riêng cho người dùng mỗi
lần đăng nhập.
− Nghiên cứu Redux, Redux Toolkit để quản lý state cho single-page
5.2.

Phạm vi nghiên cứu
Website chủ yếu tập trung đi vào việc xử lý các nghiệp vụ của một website, diễn đàn thảo luận về

dạy học số, như những website thực tế hiện nay và nhận thấy rằng với lượng kiến thức vơ tận cần có một
website để mọi người có cơ hội cùng nhau học tập, giải đáp câu hỏi được đăng tải trên diễn đàn, cùng
nhau chia sẻ các phương pháp học ở nhiều môn học và lĩnh vực khác nhau nhằm nâng cao hiệu quả trong
quá trình học tập, trao đổi các phương pháp học tập bổ ích, kinh nghiệm và kỹ năng làm bài thi, tài liệu
học tập, kinh nghiệm nghiên cứu, tự học,… với nhiều bạn bè đồng trang lứa trên khắp mọi. Cụ thể là:
đăng nhập, tạo bài đăng tin và bình luận, tạo bài kiểm tra, lưu trữ tài liệu với nhiều loại đa dạng, thống kê
các quả của các bài kiểm tra
6. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Đề tài đề cao khả năng trao dồi, tiếp thu và năng cao khả năng lập trình thơng qua việc học tập cơng
nghệ mới để ứng dụng vào việc xây dựng ứng dụng web; nắm bắt được các nghiệp vụ liên quan đến việc
quản lý học sinh, kiểm tra, đánh giá năng lực bằng hình thức trắc nghiệm khách quan.
Bên cạnh ý nghĩa khoa học, đề tài hy vọng mang đến một đóng góp tích cực cho hình thức dạy học
online trong tiến trình Chuyển đổi số trong giáo dục Việt Nam.

16


PHẦN NỘI DUNG
CHƯƠNG 1: CÁC CÔNG NGHỆ SỬ DỤNG
1.1. KIẾN TRÚC CHUNG CỦA HỆ THỐNG

Hình 1: Hình minh hoạ kiến trúc hệ thống

Kiến trúc chung của hệ thống bao gồm có 3 tầng truyền thống, tầng hiển thị front-end(reactjs),tầng
ứng dụng backend (expressJs và nodeJs) và tầng cơ sở dữ liệu (mongodb).
Kiến trúc của ứng dụng gồm 6 phần cơ bản người dùng (client) gửi yêu cầu ( make request) thông
qua tầng giao diện, sau đó phía frontend sẽ gửi request đó cho backend, backend nhận được request và

tiến hành truy xuất CSDL và trả lại cho frontend để hiển thị thơng tin mà người dùng mong muốn.
1.2. TÌM HIỂU CƠNG NGHỆ MERN STACK
1.2.1. Cơng nghệ MERN stack là gì?
Thuật ngữ MERN Stack được dùng để chỉ tập hợp các công nghệ dựa trên ngơn ngữ lập trình
JavaScript. Chúng được sửa dụng để phát triển ứng dụng web full-stack. Bốn chữ M-E-R-N đại diện cho
bốn cơng nghệ chính cấu thành nên giải pháp này:


M - MongoDB là một cơ sở dữ liệu NoSQL. Nó lưu trữ dữ liệu dưới định dạng JSON định phân nhằm
dễ dàng truyền tải dữ liệu giữa server và client.



E - Express.js là một web framework được xây dựng trên Node.js. Nó được sử dụng để tạo API và phát
triển ứng dụng web.



R - React.js là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI). Components
của công cụ này được phát triển bởi Facebook. Nó được ra mắt như một cơng cụ JavaScript mã nguồn
mở vào năm 2013



N - Node.js là Java Runtime Environment (JRE), được sử dụng để tạo ra web server.
17


Hình 2: Tổng quan MERN Stack

1.2.2. Quy trình hoạt động của MERN Stack
 Người dùng tương tác với các component của React.js ở giao diện người dùng.
 Bất kỳ tương tác nào tạo ra một yêu cầu thay đổi dữ liệu được gửi đến Node.js để phân tích cú pháp yêu
cầu.
 Node.js chuyển yêu cầu đã được phân tích qua máy chủ Express.js để thực hiện việc kêu gọi đến
MongoDB để lấy hoặc thiết lập dữ liệu.
 MongoDB sẽ lấy dữ liệu được yêu cầu và trả về cho Express.js.
 Express.js lại truyền dữ liệu về cho Node.js và Node.js gửi kết quả dữ liệu cho React.js.
 React.js sẵn sàng hiển thị thơng tin mà người dùng muốn có trên giao diện người dùng.

Hình 3: Quy trình hoạt động của MERN Stack

18