XÂY DỰNG WEBSITE HỌC TIẾNG ANH SỬ DỤNG MERN STACK

Phạm vi nghiên cứu Đề tài “Xây dựng trang web học tiếng Anh sử dụng MERN STACK” chủ yếutập trung vào các chức năng cơ bản của một trang web học tiếng Anh trực tuyến baogồm 2 phần là phần

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN

-o0o -TIỂU LUẬN CHUYÊN NGÀNH

XÂY DỰNG WEBSITE HỌC TIẾNG ANH SỬ DỤNG MERN STACK

GVHD : TS LÊ VĂN VINH

Tp Hồ Chí Minh, tháng 12 năm 2021

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN

-o0o -TIỂU LUẬN CHUYÊN NGÀNH

XÂY DỰNG WEBSITE HỌC TIẾNG ANH SỬ DỤNG MERN STACK

GVHD : TS LÊ VĂN VINH

Tp Hồ Chí Minh, tháng 12 năm 2021

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Giáo viên hướng dẫn

Lê Văn Vinh

NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Giáo viên phản biện

LỜI CẢM ƠN

Lời đầu tiên, nhóm sinh viên thực hiện báo cáo xin gửi lời cảm ơn chânthành nhất đến nhà trường và quý thầy cô Trong quá trình học tập tại trường Đạihọc Sư phạm kỹ thuật thành phố Hồ Chí Minh, quý thầy cô đã tạo nhiều điều kiệncho chúng em được học tập tốt nhất, truyền đạt những kiến thức nền tảng và chuyênngành, cũng như hỗ trợ, giúp đỡ khi nhóm gặp khó khăn trong quá trình học tập vàtrong lúc thực hiện đồ án

Tiếp đó, nhóm sinh viên thực hiện báo cáo xin gửi lời cảm ơn sâu sắc đếnthầy Lê Văn Vinh – người đã hướng dẫn, giúp đỡ cho nhóm trong suốt quá trìnhthực hiện đề tài

Do có những hạn chế về kiến thức và thiếu kinh nghiệm trong việc tìm hiểuthực tế, vì thế nhóm chúng em còn có nhiều thiếu sót, nhóm hy vọng nhận đượcnhững ý kiến đóng góp quý báu từ quý thầy cô để rút ra kinh nghiệm cho các đồ ánkhác trong tương lai Nhóm thực hiện xin chân thành cảm ơn

Lời cuối cùng, nhóm chúng em xin chúc thầy cô có thật nhiều sức khỏe đểtiếp tục thực hiện sứ mệnh cao cả của mình đó chính là truyền đạt những kiến thức

bổ ích cho nhiều thế hệ sinh viên tiếp theo Chúng em xin bày tỏ lòng biết ơn thầy

cô rất nhiều!

Nhóm thực hiện

Trần Phương Linh

Võ Ngọc Phong

- Bảo mật là một trong những yêu cầu quan trọng cho website thực tế.

- Không thể lưu video, audio bằng Blob

3 Các phương pháp giải quyết vấn đề

- Sử dụng JWT để cải thiện yêu cầu bảo mật cho website

- Chuyển đổi video, audio về chuỗi base64 và lưu chuỗi đó vào database

4 Kết quả đạt được

- Hệ thống học tiếng Anh trực tuyến bao gồm: giao diện cho phía người dùng

và giao diện phía người quản trị

- Giao diện dễ sử dụng, thân thiện và thu hút người dùng

- Dễ dàng quản lý, sửa chữa và mở rộng

MỤC LỤC MỤC LỤC BẢNG I MỤC LỤC HÌNH ẢNH V DANH MỤC CÁC TỪ VIẾT TẮT XI

PHẦN MỞ ĐẦU 1

1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1

1.2 MỤC ĐÍCH CỦA ĐỀ TÀI 1

1.3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 1

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

1.3.2 Phạm vi nghiên cứu 2

1.4 PHÂN TÍCH CÁC ỨNG DỤNG CÓ LIÊN QUAN 3

1.5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 3

PHẦN NỘI DUNG 4

Chương 1 CƠ SỞ LÝ THUYẾT 4

1.1 NODEJS [1] 4

1.1.1 Định nghĩa về NodeJS 4

1.1.2 Các tính năng của NodeJS 4

1.1.3 Đối tượng và ứng dụng của NodeJS 5

1.1.4 Một số ưu, nhược điểm của NodeJS 5

1.1.5 Sử dụng NodeJS trong đề tài 6

1.2 EXPRESSJS 7

1.2.1 Định nghĩa về ExpressJS [2] 7

1.2.2 Tại sao nên sử dụng Expressjs trong lập trình web? [3] 7

1.2.3 Những tính năng của Expressjs là gì?[3] 8

1.2.4 Sử dụng ExpressJS trong đề tài 9

1.3 MONGODB [4] 9

1.3.1 Giới thiệu về MongoDB 9

1.3.2 Sử dụng MongoDB mang lại những lợi ích gì? 10

1.3.3 MongoDB có những ưu và nhược điểm gì? 11

1.3.4 Sử dụng MongoDB trong đề tài 13

1.4 RESTFUL API [5] 13

1.4.1 Các khái niệm 13

1.4.2 Cách thức hoạt động 14

1.4.3 Sử dụng RESTFUL API trong đề tài 14

1.5 REACTJS 14

1.5.1 Reactjs là gì [6] 14

1.5.2 Đặc trưng của ReactJS [7] 15

1.5.3 Sử dùng ReactJS trong đề tài 17

1.6 JSON WEB TOKEN [8] 17

1.6.1 Định nghĩa JSON Web Token 17

1.6.2 Cấu trúc của một JWT 17

1.6.3 Flow hệ thống sử dụng JWT 19

1.6.4 Hệ thống Verify chuỗi JWT thế nào? 20

1.6.5 Khi nào sử dụng JWT? 21

1.6.6 Sử dụng JSON Web Token trong hệ thống 21

Chương 2 KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 21

2.1 KHẢO SÁT HIỆN TRẠNG 21

2.1.1 Duolingo 21

2.1.2 Elllo 22

2.1.3 BBC English 23

2.1.4 Voca.vn 24

2.1.5 Busuu 26

2.1.5.1.Các chức năng chính 26

2.1.6 Kết luận 27

2.2 XÁC ĐỊNH YÊU CẦU 27

2.2.1 Yêu cầu chức năng 27

2.2.2 Yêu cầu phi chức năng 30

2.3 MÔ HÌNH HÓA YÊU CẦU 31

2.3.1 Lược đồ Usecase 31

2.4 MÔ TẢ USECASE 33

2.4.1 Chức năng của “Khách vãng lai” 33

2.4.2 Chức năng của “Người dùng” 36

2.4.3 Chức năng của “Người tạo nội dung” 55

2.4.4 Chức năng của “Người quản trị” 90

Chương 3 THIẾT KẾ PHẦN MỀM 104

3.1 LƯỢC ĐỒ LỚP 104

3.2 LƯỢC ĐỒ TUẦN TỰ 104

3.2.1 Khách vãng lai 104

3.2.2 Người dùng 105

3.2.3 Người tạo nội dung 112

3.2.4 Người quản trị 126

3.3 THIẾT KẾ CƠ SỞ DỮ LIỆU 132

3.3.1 Lược đồ cơ sở dữ liệu 133

3.3.2 Mô tả các bảng 133

3.4 THIẾT KẾ GIAO DIỆN 138

3.4.1 Giao diện Người dùng và Khách vãng lai 138

3.4.2 Giao diện Người quản trị và Người tạo nội dung 160

Chương 4 CÀI ĐẶT VÀ KIỂM THỬ 184

4.1 CÀI ĐẶT 184

4.1.1 Cài đặt ứng dụng 184

4.1.2 Công cụ dùng trong dự án 185

4.1.3 Công nghệ dùng trong dự án 186

4.2 KIỂM THỬ 186

4.2.1 Các trường hợp kiểm thử 186

4.2.2 Kết quả kiểm thử 187

PHẦN KẾT LUẬN 204

5.1 KẾT QUẢ ĐẠT ĐƯỢC 204

5.2 ƯU ĐIỂM 204

5.3 NHƯỢC ĐIỂM 204

5.4 HƯỚNG PHÁT TRIỂN 204

TÀI LIỆU THAM KHẢO 204

-MỤC LỤC BẢNG

Bảng 1 Bảng chức năng của Người quản trị 28

Bảng 2 Bảng chức năng của Người tạo nội dung 28

Bảng 3 Bảng chức năng của Người dùng được xác thực 29

Bảng 4 Bảng chức năng của Khách vãng lai 30

Bảng 5 Bảng mô tả chức năng Đăng ký 34

Bảng 6 Bảng mô tả chức năng đăng nhập 36

Bảng 7 Bảng mô tả chức năng đăng xuất 38

Bảng 8 Bảng mô tả chức năng học bảng phiên âm 40

Bảng 9 Bảng mô tả chức năng học ngữ pháp 42

Bảng 10 Bảng mô tả chức năng học từ vựng 44

Bảng 11 Bảng mô tả chức năng học bài luyện nghe 46

Bảng 12 Bảng mô tả chức năng đổi mật khẩu 48

Bảng 13 Bảng mô tả chức năng Chỉnh sửa thông tin cá nhân 50

Bảng 14 Bảng mô tả chức năng chơi trò chơi 52

Bảng 15 Bảng mô tả chức năng xem bảng xếp hạng 54

Bảng 16 Bảng mô tả chức năng Xem danh sách bài nghe 56

Bảng 17 Bảng mô tả chức năng thêm bài nghe 58

Bảng 18 Bảng mô tả chức năng chỉnh sửa bài nghe 60

Bảng 19 Bảng mô tả chức năng Xóa bài nghe 63

Bảng 20 Bảng mô tả chức năng Xem danh sách ngữ pháp 65

Bảng 21 Bảng mô tả chức năng them ngữ pháp 67

Bảng 22 Bảng mô tả chức năng Sửa ngữ pháp 70

Bảng 23 Bảng mô tả chức năng Xóa ngữ pháp 73

Bảng 24 Bảng mô tả chức năng Xem danh sách từ vựng 75

Bảng 25 Bảng mô tả chức năng Thêm từ vựng 77

Bảng 26 Bảng mô tả chức năng Sửa từ vựng 80

Bảng 27 Bảng mô tả chức Xóa từ vựng 82

Bảng 28 Bảng mô tả chức năng Thêm bài trắc nghiệm 84

Bảng 29 Bảng mô tả chức năng Thêm bài trắc nghiệm 87

Bảng 30 Bảng mô tả chức năng Khóa tài khoản 90

Bảng 31 Bảng mô tả chức năng Mở khóa tài khoản 92

Bảng 32 Bảng mô tả chức năng phân quyền người dùng 94

Bảng 33 Bảng mô tả chức năng Thêm người dùng 96

Bảng 34 Bảng mô tả chức năng chỉnh sửa người dùng 98

Bảng 35 Bảng mô tả chức năng Xem danh sách người dùng 100

Bảng 36 Bảng mô tả chức năng Xem thống kê 102

Bảng 37 Bảng Grammars 133

Bảng 38 Bảng Highscores 134

Bảng 39 Bảng IPA 134

Bảng 40 Bảng Listenings 135

Bảng 41 Bảng Questions 135

Bảng 42 Bảng Quizzes 136

Bảng 43 Bảng Users 136

Bảng 44 Bảng Words 137

Bảng 45 Bảng mô tả Giao diện Đăng nhập 139

Bảng 46 Bảng mô tả Giao diện Đăng ký 140

Bảng 47 Bảng mô tả giao diện Quên mật khẩu 142

Bảng 48 Bảng mô tả giao diện Đặt lại mật khẩu 142

Bảng 49 Bảng mô tả giao diện Trang chủ 144

Bảng 50 Bảng mô tả giao diện chủ đề bài nghe 146

Bảng 51 Bảng mô tả giao diện danh sách bài nghe 146

Bảng 52 Bảng mô tả giao diện chi tiết bài nghe 147

Bảng 53 Bảng mô tả giao diện cấp độ của ngữ pháp 148

Bảng 54 Bảng mô tả giao diện danh sách ngữ pháp của cấp dộ 149

Bảng 55 Bảng mô tả giao diện chi tiết ngữ pháp 150

Bảng 56 Bảng mô tả giao diện chủ đề của từ vựng 151

Bảng 57 Bảng mô tả giao diện danh sách từ vựng theo hai chế độ xem 152

Bảng 58 Bảng mô tả giao diện danh sách phiên âm 154

Bảng 59 Bảng mô tả giao diện chi tiết phiên âm 155

Bảng 60 Bảng mô tả giao diện danh sách trò choie 156

Bảng 61 Bảng mô tả giao diện Bảng xếp hạng 157

Bảng 62 Bảng mô tả giao dện trò chơi Hãy chọn từ đúng 158

Bảng 63 Bảng mô tả giao diện trò chơi Ghép từ 159

Bảng 64 Bảng mô tả giao diện trò chơi Tay nhanh hơn nào 160

Bảng 65 Bảng mô tả Giao diện quản lý từ vựng 161

Bảng 66 Bảng mô tả Giao diện Thêm từ vựng 162

Bảng 67 Bảng mô tả giao diện Sửa từ vựng 164

Bảng 68 Bảng mô tả giao diện quản lý bài nghe 165

Bảng 69 Bảng mô tả giao diện Thêm bài nghe 167

Bảng 70 Bảng mô tả giao diện Sửa bài nghe 168

Bảng 71 Bảng mô tả Giao diện quản lý bài trắc nghiệm 170

Bảng 72 Bảng mô tả giao diện chi tiết bài trắc nghiệm 171

Bảng 73 Bảng mô tả giao diện thêm câu hỏi 172

Bảng 74 Bảng mô tả giao diện sửa câu hỏi 173

Bảng 75 Bảng mô tả giao diện quản lý ngữ pháp 174

Bảng 76 Bảng mô tả giao diện chi tiết ngữ pháp 175

Bảng 77 Bảng mô tả giao diện thêm ngữ pháp 176

Bảng 78 Bảng mô tả giao diện sửa ngữ pháp 178

Bảng 79 Bảng mô tả giao diện quản lý người dùng 180

Bảng 80 Bảng mô tả giao diện chi tiết người dùng 181

Bảng 81 Bảng mô tả giao diện thêm tài khoản 182

Bảng 82 Bảng mô tả giao diện sửa người dùng 183

Bảng 83 Bảng mô tả giao diện trang chủ Admin 184

Bảng 84 Bảng công cụ dùng trong dự án 185

Bảng 85 Bảng công nghệ dùng trong dự án 186

Bảng 86 Các trường hợp kiểm thử 186

Bảng 87 Kết quả kiểm thử chức năng Đăng nhập 187

Bảng 88 Kết quả kiểm thử chức năng Đăng ký 190

Bảng 89 Kết quả kiểm thử chức năng Thêm từ vựng 196

Bảng 90 Kết quả kiểm thử chức năng Thêm người dùng 201

MỤC LỤC HÌNH ẢNH

Hình 1 Cấu trúc một API được xây dựng với ExpressJS 7

Hình 2 Express.js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website .9 Hình 3 MongoDB 10

Hình 4 Hình minh họa chức năng truy vấn cơ sở dữ liệu đặc biệt 11

Hình 5 Hình minh họa ưu điểm của MongoDB 12

Hình 6 Hình minh hoa nhược điểm của MongoDB 13

Hình 7 JSX 15

Hình 8 Luồng dữ liệu một chiều 16

Hình 9 Virtual DOM 16

Hình 10 JSON Web Token 17

Hình 11 JWT 18

Hình 12 Header 18

Hình 13 JWT format 20

Hình 14 Màn hình trang chủ website Doulingo 22

Hình 15 Màn hình trang chủ website Ello 23

Hình 16 Màn hình trang chủ website BBC English 24

Hình 17 Màn hình trang chủ website Voca.vn 25

Hình 18 Màn hình trang chủ website Busuu 26

Hình 19 Lược đồ chức năng Người quản trị và Người tạo nội dung 32

Hình 20 Lược đồ chức năng của Khách vãng lai và Người dùng 33

Hình 21 Lược đồ chức năng Đăng ký 34

Hình 22 Lược đồ chức năng Đăng nhập 36

Hình 23 Lược đồ chức năng Đăng xuất 38

Hình 24 Lược đồ chức năng học bảng phiên âm 40

Hình 25 Lược đồ chức năng học ngữ pháp 42

Hình 26 Lược đồ chức năng học từ vựng 44

Hình 27 Lược đồ chức năng học bài luyện nghe 46

Hình 28 Lược đồ chức năng Đổi mật khẩu 48

Hình 29 Lược đồ chức năng Chỉnh sửa thông tin cá nhân 50

Hình 30 Lược đồ chức năng chơi trò chơi 52

Hình 31 Lược đồ chức năng Xem bảng xếp hạng 54

Hình 32 Lược đồ chức năng Xem danh sách bài nghe 56

Hình 33 Lược đồ chức năng Thêm tệp nghe 58

Hình 34 Lược đồ chức năng chỉnh sửa bài nghe 60

Hình 35 Lược đồ chức năng Xóa bài nghe 63

Hình 36 Lược đồ chức năng Xem danh sách ngữ pháp 65

Hình 37 Lược đồ chức năng Thêm ngữ pháp 67

Hình 38 Lược đồ chức năng Sửa ngữ pháp 70

Hình 39 Lược đồ chức năng xóa ngữ pháp 73

Hình 40 Lược đồ chức năng Xem danh sách từ vựng 75

Hình 41 Lược đồ chức năng Thêm từ vựng 77

Hình 42 Lược đồ chức năng Sửa từ vựng 80

Hình 43 Lược đồ chức năng Xóa từ vựng 82

Hình 44 Lược đồ chức năng Thêm bài trắc nghiệm 84

Hình 45 Lược đồ chức năng Thêm bài trắc nghiệm 87

Hình 46 Lược đồ chức năng Khóa tài khoản 90

Hình 47 Lược đồ chức năng Mở khóa tài khoản 92

Hình 48 Lược đồ chức năng Phân quyền người dùng 94

Hình 49 Lược đồ chức năng Thêm người dùng 96

Hình 50 Lược đồ chức năng Chỉnh sửa người dùng 98

Hình 51 Lược đồ chức năng Xem danh sách người dùng 100

Hình 52 Lược đồ chức năng Xem thống kê 102

Hình 53 Lược đồ lớp website Learning English 104

Hình 54 Lược đồ tuần tự chức năng Đăng ký 105

Hình 55 Lược đồ tuần tự chức năng Đăng nhập 106

Hình 56 Lược đồ tuần tự chức năng Đăng xuất 107

Hình 57 Lược đồ tuần tự chức năng Học phiên âm 108

Hình 58 Lược đồ tuần tự chức năng Học ngữ pháp 109

Hình 59 Lược đồ tuần tự chức năng Học từ vựng 110

Hình 60 Lược đồ tuần tự chức năng Học bài nghe 111

Hình 61 Lược đồ tuần tự chức năng Đổi mật khẩu 112

Hình 62 Lược đồ tuần tự chức năng Xem danh sách bài nghe 113

Hình 63 Lược đồ tuần tự chức năng Thêm bài nghe 114

Hình 64 Lược đồ tuần tự chức năng Chỉnh sửa bài nghe 115

Hình 65 Lược đồ tuần tự chức năng Xóa bài nghe 116

Hình 66 Lược đồ tuần tự chức năng Xem danh sách ngữ pháp 117

Hình 67 Lược đồ tuần tự chức năng Thêm ngữ pháp 118

Hình 68 Lược đồ tuần tự chức năng Chỉnh sửa ngữ pháp 119

Hình 69 Lược đồ tuần tự chức năng Xóa ngữ pháp 120

Hình 70 Lược đồ tuần tự chức năng Xem danh sách từ vựng 121

Hình 71 Lược đồ tuần tự chức năng Thêm từ vựng 122

Hình 72 Lược đồ tuần tự chức năng Chỉnh sửa từ vựng 123

Hình 73 Lược đồ tuần tự chức năng Xóa từ vựng 124

Hình 74 Lược đồ tuần tự chức năng Thêm bài trắc nghiệm 125

Hình 75 Lược đồ tuần tự chức năng Chỉnh sửa bài trắc nghiệm 126

Hình 76 Lược đồ tuần tự chức năng Khóa tài khoản 127

Hình 77 Lược đồ tuần tự chức năng Mở khóa tài khoản 128

Hình 78 Lược đồ tuần tự chức năng Phân quyền người dùng 129

Hình 79 Lược đồ tuần tự chức năng Thêm người dùng 130

Hình 80 Lược đồ tuần tự chức năng Chỉnh sửa người dùng 131

Hình 81 Lược đồ tuần tự Xem danh sách người dùng 132

Hình 82 Lược đồ tuần tự chức năng Xem thống kế 132

Hình 83 Lược đồ Cơ sở dữ liệu 133

Hình 84 Giao diện Đăng nhập 139

Hình 85 Giao diện Đăng ký 140

Hình 86 Giao diện quên mật khẩu 141

Hình 87 Giao diện Đặt lại mật khẩu 142

Hình 88 Giao diện trang chủ 144

Hình 89 Giao diện chủ đề bài nghe 145

Hình 90 Giao diện Danh sách bài nghe của một chủ đề 146

Hình 91 Giao diện chi tiết bài nghe 147

Hình 92 Giao diện cấp độ của ngữ pháp 148

Hình 93 Giao diện Danh sách ngữ pháp của cấp độ 149

Hình 94 Giao diện chi tiết ngữ pháp 150

Hình 95 Giao diện chủ đề của từ vựng 151

Hình 96 Danh sách từ vựng theo chế độ gallery 152

Hình 97 Danh sách từ vựng theo chế độ slide 152

Hình 98 Giao diện Danh sách phiên âm 154

Hình 99 Giao diện Chi tiết phiên âm 155

Hình 100 Giao diện Danh sách các trò chơi 156

Hình 101 Giao diện Bảng xếp hạng 157

Hình 102 Giao diện trò chơi Hãy chọn từ đúng 158

Hình 103 Giao diện trò chơi Ghép từ 159

Hình 104 Giao diện trò chơi Tay nhanh hơn não 160

Hình 105 Giao diện Quản lý từ vựng 161

Hình 106 Giao diện Thêm từ vựng 162

Hình 107 Giao diện Sửa từ vựng 164

Hình 108 Giao diện Quản lý bài nghe 165

Hình 109 Giao diện Thêm bài nghe 167

Hình 110 Giao diện Sửa bài nghe 168

Hình 111 Giao diện Quản lý bài trắc nghiệm 170

Hình 112 Giao diện Chi tiết bài trắc nghiệm 171

Hình 113 Giao diện Thêm câu hỏi 172

Hình 114 Giao diện Sửa câu hỏi 173

Hình 115 Giao diện Quản lý ngữ pháp 174

Hình 116 Giao diện Chi tiết ngữ pháp 175

Hình 117 Giao diện Thêm ngữ pháp 176

Hình 118 Giao diện Sửa ngữ pháp 178

Hình 119 Giao diện Quản lý người dùng 180

Hình 120 Giao diện Chi tiết người dùng 181

Hình 121 Giao diện thêm người dùng 182

Hình 122 Giao diện sửa người dùng 183

Hình 123 Giao diện Trang chủ Admin 184

Hình 124 Kết quả kiểm thử test case TC_SI_01 189

Hình 125 Kết quả kiểm thử test case TC_SI_02 189

Hình 126 Kết quả kiểm thử test case TC_SI_03 190

Hình 127 Kết quả kiểm thử test case TC_SU_01 194

Hình 128 Kết quả kiểm thử test case TC_SU_01 194

Hình 129 Kết quả kiểm thử test case TC_SU_02 195

Hình 130 Kết quả kiểm thử test case TC_SU_03 195

Hình 131 Kết quả kiểm thử test case TC_SU_04 196

Hình 132 Kết quả kiểm thử test case TC_SU_05 196

Hình 133 Kết quả kiểm thử test case TC_AW_01 200

Hình 134 Kết quả kiểm thử test case TC_AW_02 200

Hình 135 Kết quả kiểm thử test case TC_AW_03 201 Hình 136 Kết quả kiểm thử test case TC_AU_01 203 Hình 137 Kết quả kiểm thử test case TC_AU_02 203

DANH MỤC CÁC TỪ VIẾT TẮTAPI: Application Programming Interface

BSON: Binary JSON

CLI: Command line interface

DOM: Document Object Model

HTML: Hyper Text Markup Language

HTTP: Hyper Text Transfer Protocol

IDE: Integrated Development Environment

JSON: JavaScript Object Notation

JSON: JavaScript Object Notation

JSX: JavaScript + XML

JWT: JSON Web Token

MAC: Media Access Control

MERN STACK: bộ công nghệ mã nguồn mở liên quan đến JavaScript, bao gồm

các công nghệ: MongoDB, Express, React/React Native và Nodejs

MIT: Massachusetts Institute of Technology

I/O: Input/Output

URL: Uniform Resource Locator

XML: Extensible Markup Language

PHẦN MỞ ĐẦU1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong xu thế hội nhập kinh tế thế giới như hiện nay, ngôn ngữ được coi là một yếu

tố quan trong Nó chính là công cụ để giúp cho mọi người dân tại các quốc gia khácnhau có thể hiểu nhau, giao lưu kinh tế, văn hóa xã hội và cùng nhau phát triển Tuynhiên, các quốc gia khác nhau có một ngôn ngữ khác nhau Chỉnh vì vậy mà đã tạo

ra rào cản giữa các quốc gia dân tộc có sự bất đồng về ngôn ngữ Trước xu thế toàncầu, hội nhập kinh tế sâu rộng như hiện nay cùng với nhu cầu hợp tác, giao lưu kinh

tế, văn hóa – xã hội giữa các quốc gia, đòi hỏi phải có một ngôn ngữ thống nhất làmngôn ngữ giao tiếp chung cho mọi người trên khắp thế giới Theo các chuyên giangôn ngữ học, tiếng Anh là một trong những ngôn ngữ dễ học và dễ giao tiếp nhất.Ngoài ra, do sự ảnh hưởng các nước phát triển trong nhiều lĩnh vực, nên tiếng Anhcàng được sử dụng phổ biến hơn Do đó, ngày nay, tiếng Anh được xem là mộtngôn ngữ chung, một hành lang quan trọng cho mọi người

Tiếng Anh có vai trò vô cùng quan trọng, nó không chỉ là công cụ giao tiếp giữamọi người với nhau, mà tạo cơ hội thăng tiến cho những người đang làm việc, vànhất là những người đang làm việc trong những doanh nghiệp nước ngoài, và còn làmột trong những điều kiện quyết định tương lai của hầu hết sinh viên khi tốtnghiệp

Nhận thấy được tầm quan trọng của tiếng Anh, nhóm chúng em đã quyết địnhchọn đề tài “Xây dựng trang web học tiếng Anh sử dụng MERN STACK” để giúpmọi người có thể học và rèn luyện tiếng Anh, củng cố thêm vốn từ vựng của mình

1.2 MỤC ĐÍCH CỦA ĐỀ TÀI

Các mục tiêu của dự án nằm trong danh sách dưới đây:

- Phát triển hai mô-đun chính Đầu tiên là hệ thống quản lý bao gồm các tính năngcần thiết giúp quản trị viên và người tạo nội dung có thể quản lý dữ liệu của trangweb Phần thứ hai tập trung vào trang web của người dùng, giúp người dùng có thểluyện nghe, học, chơi các trò chơi nhỏ để củng cố thêm vốn từ vựng và rèn luyện kỹnăng luyện nghe

- Bên cạnh việc thực hiện chức năng chính, hệ thống phải đáp ứng các yêu cầu phichức năng như xác thực giữa người dùng và máy chủ, áp dụng phương pháp mã hóamật khẩu người dùng và thiết lập cơ chế phân quyền cho toàn hệ thống

1.3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

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

Đối với đề tài “Xây dựng trang web học tiếng Anh sử dụng MERN STACK”,đối tượng nghiên cứu dựa trên những nhu cầu cần thiết phải học tiếng Anh Đồngthời kèm theo đó là các công nghệ áp dụng để tạo ra ứng dụng Cụ thể như sau:

 Tập trung nghiên cứu Restful API, NodeJS, ExpressJS để xây dựng nên hệthống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng nhất

 Áp dụng cơ sở dữ liệu noSQL là MongoDB để lưu trữ dữ liệu người dùngcủa hệ thống

 Về phần bảo mật hệ thống, tiến hành nghiên cứu công nghệ Json Web Tokenlàm bảo mật cho hệ thống, tất cả các luồng dữ liệu vào ra đều được kiểm soátthông qua Token Người dùng bắt buộc phải đăng nhập vào hệ thống để cómột Token riêng và mỗi request từ phía người dùng đều phải thông qua một

“cánh cửa” Interceptor và Token là “chìa khóa”

 Về phần hiển thị cho người sử dụng cuối nhóm chúng em tiến hành nghiêncứu Framework ReactJS và một số thư viện được hỗ trợ cho ReactJS để xâydựng và xử lý giao diện và cho người dùng sử dụng

1.3.2 Phạm vi nghiên cứu

Đề tài “Xây dựng trang web học tiếng Anh sử dụng MERN STACK” chủ yếutập trung vào các chức năng cơ bản của một trang web học tiếng Anh trực tuyến baogồm 2 phần là phần Quản trị và phần Người dùng

Trong phần Quản trị, tập trung vào các nghiệp vụ như:

 Quản lý tài khoản

 Quản lý bài nghe

 Quản lý ngữ pháp

 Quản lý từ vựng

 Quản lý bài trắc nghiệm

Trong phần Người dùng tập trung vào:

 Đăng ký

 Đăng nhập

1.4 PHÂN TÍCH CÁC ỨNG DỤNG CÓ LIÊN QUAN

Hầu hết các website học tiếng anh đã được xây dựng và ra mắt rất nhiều, có nhiềutính năng từ cơ bản đến phức tạp Tuy nhiên một số ứng dụng vẫn có những nhượcđiểm sau:

- Có tính phí người dùng

- Giao diện còn hơi khó sử dụng đối với một số người mới dùng lần đầu

- Các trang web hầu như chỉ chuyên về một tính năng nhất định

1.5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

Xây dựng một trang web học tiếng Anh trực tuyến với các tính năng cơ bản, đápứng được nhu cầu học tiếng Anh cho người dùng

Ở chế độ đồng bộ thực thi từng dòng và tiến hành thực thi dòng tiếp theo khidòng hiện tại đã thực thi xong.

Khi bất đồng bộ thực thi tất cả dòng code cùng một lúc

NodeJS là một nền tảng được xây dựng trên JavaScript runtime của Chrome vớimục đích xây dựng các ứng dụng mạng nhanh chóng và có thể mở rộng được mộtcách dễ dàng hơn NodeJS sử dụng mô hình I/O lập trình theo sự kiện, non-blocking, do đó nodeJS khá gọn nhẹ và hiệu quả - công cụ hoàn hảo cho các ứngdụng chuyên sâu về dữ liệu theo thời gian thực chạy trên các thiết bị phân tán.NodeJS là môi trường runtime mã nguồn mở đa nền tảng, được sử dụng để pháttriển các ứng dụng mạng và ứng dụng server-side Các ứng dụng NodeJS được viếtbằng JavaScript và có thể chạy trong NodeJS runtime trên OS X, MicrosoftWindows và Linux

NodeJS cũng cung cấp một thư viện bao gồm rất nhiều các module JavaScriptkhác nhau nhằm đơn giản hóa việc phát triển các ứng dụng web, qua đó giảm thiểutình trạng sử dụng quá nhiều Node.js

1.3.4 Các tính năng của NodeJS

Lập trình hướng sự kiện và không đồng bộ: Toàn bộ API trong thư viện NodeJS đềukhông đồng bộ, hay không bị chặn Về cơ bản điều này có nghĩa là một server sửdụng NodeJS sẽ không bao giờ chờ một API trả về dữ liệu Server sẽ chuyển sangAPI kế tiếp sau khi gọi API đó và cơ chế thông báo của Events trong NodeJS giúpserver nhận được phản hồi từ lần gọi API trước

Cực kỳ nhanh chóng: Được xây dựng trên Công cụ JavaScript V8 của GoogleChrome, thư viện NodeJS có khả năng xử lý mã vô cùng nhanh

Đơn luồng/Single thread nhưng có khả năng mở rộng cao: NodeJS sử dụng một môhình luồng đơn với vòng lặp sự kiện/event Cơ chế event cho phép máy chủ phảnhồi non-blocking và cũng cho phép khả năng mở rộng cao hơn so với các servertruyền thống hỗ trợ giới hạn các thread để xử lý yêu cầu NodeJS sử dụng mộtchương trình đơn luồng, cùng một chương trình có thể cung cấp dịch vụ cho một sốlượng yêu cầu lớn hơn so với các máy chủ truyền thống như Apache HTTP Server.Không có buffer - Các ứng dụng NodeJS không có vùng nhớ tạm thời (buffer) chobất kỳ dữ liệu nào Các ứng dụng này chỉ đơn giản xuất dữ liệu theo khối.

License - NodeJS được phát hành theo giấy phép MIT

1.3.5 Đối tượng và ứng dụng của NodeJS

1.3.5.1 Đối tượng

Các công ty đang sử dụng Nodejs có thể kể đến một số tên tuổi lớn như eBay,General Electric, GoDaddy, Microsoft, PayPal, Uber, Wikipin, Yahoo, và Yammer

1.3.5.2 Ứng dụng

- Hệ thống Notification - Giống như Facebook hay Twitter

- Websocket server - Các máy chủ web socket như là Online Chat, GameServer…

- Fast File Upload Client - Các chương trình upload file tốc độ cao

- Ad Server - Các máy chủ quảng cáo

- Cloud Services - Các dịch vụ đám mây

- RESTful API - Những ứng dụng mà được sử dụng cho các ứng dụng khácthông qua API

- Any Real-time Data Application - Bất kỳ một ứng dụng nào có yêu cầu vềtốc độ thời gian thực

- Ứng dụng Single Page Application (SPA) - Những ứng dụng này thườngrequest rất nhiều đến server thông qua AJAX

- Ứng dụng truy vấn tới NoSQL database - Như MongoDB, CouchDB, …

- Ứng dụng CLI - Các công cụ sử dụng command-line

1.3.6 Một số ưu, nhược điểm của NodeJS

1.3.6.1 Ưu điểm

- Nhận và xử lý nhiều kết nối chỉ với một single-thread giúp hệ thống tốn ítRAM nhất và chạy nhanh nhất khi không phải tạo thread mới cho mỗi truyvấn.

- NodeJS tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ vì ápdụng ưu điểm non-blocking I/O của Javascript

- Với cơ chế event-driven, non-blocking I/O (Input/Output) và mô hình kếthợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Website làm bằngJSON

- Với khả năng xử lý nhiều Request/s đồng thời thời gian phản hồi nhanh Rấtphù hợp để áp dụng NodeJS để xây dựng các ứng dụng Single pageApplication, các ứng dụng không muốn tải lại trang, gồm rất nhiều request từngười dùng cần sự hoạt động nhanh, các **ứng dụng thời gian thực **nhưứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter, …

- NodeJS sẽ tận dụng tối đa Unix để hoạt động Tức là NodeJS có thể xử lýhàng nghìn process và trả ra một luồng khiến cho hiệu xuất hoạt động đạtmức tối đa nhất và tuyệt vời nhất

- Streaming Data: Các web thông thường gửi HTTP request và nhận phản hồilại (Luồng dữ liệu) Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn, NodeJS sẽxây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạtđộng cho các luồng dữ liệu khác

- Viết được cho cả 2 phía server và client Chạy đa nền tảng trên Windows,MAC hoặc Linux Hơn nữa cộng đồng NodeJS rất lớn và hoàn toàn miễnphí

1.3.6.2 Nhược điểm

- Rất hạn chế khi áp dụng NodeJS khi xây dựng ứng dụng nặng, tốn tàinguyên Bởi vì NodeJS được viết bằng C++ & Javascript, nên phải thông quathêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1 chút

- Giống như hầu hết các công nghệ mới, việc triển khai NodeJS trên hostkhông phải là điều dễ dàng

- Thiếu sự kiểm duyệt chất lượng các module NodeJS

1.3.7 Sử dụng NodeJS trong đề tài

Sử dụng NodeJS để làm môi trường xây dựng website bên phía server

1.6 EXPRESSJS

1.4.1 Định nghĩa về ExpressJS [2]

ExpressJS là một framework được xây dựng trên nền tảng của NodeJS Nó cungcấp các tính năng mạnh mẽ để phát triển web hoặc mobile ExpressJS hỗ trợ cácmethod HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng

Hình 1 Cấu trúc một API được xây dựng với ExpressJS 1.4.2 Tại sao nên sử dụng Expressjs trong lập trình web? [3]

1.4.2.1 Sự phổ biến của Javascript

Javascript là một ngôn ngữ lập trình được sử dụng rộng rãi hiện nay, dễ đọc

và được hỗ trợ ở mọi nơi Mà Expressjs lại hỗ trợ Javascript, do đó nếu bạn đã biếtđến Javascript thì chắc chắn việc lập trình bằng Express.js là vô cùng đơn giản.Ngay cả những người mới bắt đầu tham gia vào lĩnh vực phát triển web này cũng cóthể sử dụng Expressjs

Javascript là ngôn ngữ lập trình dễ học với cả những người không có bất kỳkiến thức gì về ngôn ngữ lập trình khác Chính vì tính phổ biến, dễ học và dễ sửdụng này mà Express.js cho phép các tài năng trẻ tham gia và đạt được nhiều thànhcông trong phát triển ứng dụng web

1.4.2.2 Hỗ trợ xây dựng website một cách nhanh chóng

Thời gian chính là tài sản quý giá của bất kỳ doanh nghiệp nào Hơn thế, nhiều lậptrình viên còn phải chịu áp lực xây dựng các ứng dụng web một cách hiệu quả trong

thời gian ngắn Nhưng để thực hiện tốt công việc này cần rất nhiều thời gian vàExpress.js chính là công cụ cứu cánh cho các nhà lập trình.

Express.js có thể giúp làm giảm một nửa thời gian viết mã mà vẫn xây dựng lên cácứng dụng web hiệu quả Không chỉ trợ giúp về mặt thời gian Expressjs còn làmgiảm những áp lực cần thiết để xây dựng với sự trợ giúp của các tính năng khácnhau của nó Express js còn cung cấp một phần mềm trung gian đảm nhận nhiệm vụđưa ra các quyết định để phản hồi chính xác những yêu cầu của khách hàng

Nếu không có Express.js, các lập trình viên phải viết mã code riêng để xây dựngnên thành phần định tuyến Đó là một công việc vô cùng tẻ nhạt và tốn thời gian.Express.js đã giúp cho công việc này trở nên đơn giản và hiệu quả hơn rất nhiều

1.4.2.3 Express.js hoàn toàn miễn phí

Một trong những yếu tố để tổ chức, doanh nghiệp nên sử dụng công cụ, ứngdụng nào chính là chi phí Với một ứng dụng web với nhiều tính năng tuyệt vời nhưvậy mà lại không tốn một chút kinh phí nào thì không có lý do gì để không sử dụngnó

1.4.3 Những tính năng của Expressjs là gì?[3]

- Phát triển máy chủ nhanh chóng: Expressjs cung cấp nhiều tính năng dướidạng các hàm để dễ dàng sử dụng ở bất kỳ đâu trong chương trình Điều này

đã loại bỏ nhu cầu viết mã từ đó tiết kiệm được thời gian

- Phần mềm trung gian Middleware: Đây là phần mềm trung gian có quyềntruy cập vào cơ sở dữ liệu, yêu cầu của khách hàng và những phần mềmtrung gian khác Phần mềm Middleware này chịu trách nhiệm chính cho việc

tổ chức có hệ thống các chức năng của Express.js

- Định tuyến - Routing: Express js cung cấp cơ chế định tuyến giúp duy trìtrạng thái của website với sự trợ giúp của URL

- Tạo mẫu - Templating: Các công cụ tạo khuôn mẫu được Express.js cungcấp cho phép các nhà xây dựng nội dung động trên các website bằng cách tạodựng các mẫu HTML ở phía máy chủ

- Gỡ lỗi - Debugging: Để phát triển thành công các ứng dụng web không thểthiết đi việc gỡ lỗi Giờ đây với Expressjs việc gỡ lỗi đã trở nên dễ dàng hơnnhờ khả năng xác định chính xác các phần ứng dụng web có lỗi

Hình 2 Express.js cung cấp cơ chế định tuyến giúp duy trì trạng thái của website 1.4.4 Sử dụng ExpressJS trong đề tài

ExpressJs được dùng để xây dựng các API bên phía server cho website

1.7 MONGODB [4]

1.5.1 Giới thiệu về MongoDB

MongoDB là phần mềm cơ sở dữ liệu mã nguồn mở NoSQL, được thiết kếhướng theo đối tượng và hỗ trợ trên đa nền tảng Các bảng MongoDB có cấu trúclinh hoạt, cho phép dữ liệu không cần tuân theo bất kỳ dạng cấu trúc nào

MongoDB hoạt động trên collection, hướng tài liệu kiểu JSON thay cho bảng đểtăng tốc độ truy vấn MongoDB có chức năng định hướng tài liệu cung cấp, hiệusuất cao, tính sẵn sàng cao và khả năng mở rộng dễ dàng

Giải thích thêm về NoSQL được nhắc đến ở khái niệm MongoDB

NoSQL là cơ sở dữ liệu được xây dựng dành riêng cho các ứng dụng hiệnđại, dữ liệu lưu trữ lớn và ứng dụng nền web thời gian thực NoSQL cần đơn giảntrong thiết kế, kiểm soát tính khả dụng tốt và yêu cầu database lưu trữ dữ liệu dunglượng cực lớn, tăng khả năng chịu lỗi tốt, thực hiện các truy vấn tốc độ cao khôngđòi hỏi năng lực phần cứng và tài nguyên hệ thống

1.5.2 Sử dụng MongoDB mang lại những lợi ích gì?

Nhờ vào tính linh hoạt và sự đa dạng hóa trong cách thức chuyển hóa cơ sở dữliệu, MongoDB trở thành giải pháp đáng tin cậy đối với nhiều doanh nghiệp.MongoDB không chỉ là một cơ sở dữ liệu dựa trên tài liệu điển hình, mà nó còn nổibật nhờ vào một số tính năng khác như sau

1.5.2.1 Truy vấn cơ sở dữ liệu đặc biệt

Thay vì sử dụng các lược đồ để xác định trước thì MongoDB lại sử dụng mộttrong những lợi thế của mình là khả năng xử lý dữ liệu mà không cần lược đồ xácđịnh Để nâng cao tính tối ưu và khả năng tiếp cận với các nhà phát triển,

MongoDB đã sử dụng ngôn ngữ truy vấn tương tự như cơ sở dữ liệu SQL Với khảnăng này, MongoDB sẽ giúp chúng ta đơn giản hóa việc sắp xếp, truy vấn, cập nhật

và xuất dữ liệu của mình thông qua các phương pháp phổ biến khác

Hình 4 Hình minh họa chức năng truy vấn cơ sở dữ liệu đặc biệt

1.5.2.2 Cân bằng tải

Để đảm bảo tính khả dụng và độ tin cậy của dịch vụ, yêu cầu quy mô ứngdụng đám mây của doanh nghiệp phải tăng lên MongoDB sẽ duy trì sự cân bằngthông qua sự phân phối các tập dữ liệu trên nhiều máy ảo cùng lúc, có thể thực hiệntác vụ đọc và ghi ở mức có thể chấp nhận Đối với MongoDB dữ liệu lưu trữ được

mở rộng tính qui mô theo chiều ngang, đây được gọi là Sharding Dựa vào điều này,các tổ chức, doanh nghiệp sẽ tiết kiệm được chi phí mở rộng theo chiều dọc củaphần cứng, trong khi khả năng hoạt động trên đám mây vẫn giữ nguyên

1.5.2.3 Hỗ trợ đa ngôn ngữ

Đây là một trong những điều tuyệt vời khi nhắc đến MongoDB, các phiên bảnđược cập nhật và phát triển liên tục nhằm hỗ trợ cho quá trình điều khiển các ngônngữ lập trình phổ biến như Python, PHP, Ruby, C++, Javascript, …

1.5.3 MongoDB có những ưu và nhược điểm gì?

1.5.3.1 Ưu điểm

- MongoDB là một cơ sở dữ liệu hướng tài liệu, sử dụng bộ nhờ nội tại,truy cập dễ dàng nhờ vào việc lập ra các chỉ mục, tăng tốc độ phản hồi

truy vấn nhanh Theo đánh giá thì tốc độ MongoDB có thể nhanh hơn

100 lần so với cơ sở dữ liệu quan hệ

- Sự linh hoạt của cơ sở dữ liệu: MongoDB sử dụng lưu trữ dữ liệu dướidạng Document JSON nên mỗi collection sẽ có kích cỡ khác nhau và cácdocument cũng khác nhau Do sử dụng cơ sở dữ liệu không có lược đồnên điều này mang lại sử linh hoạt và tự do lưu trữ dữ liệu thuộc nhiềuloại khác nhau

- Khả năng mở rộng: Lợi thế về cơ sở dữ liệu theo chiều ngang, vì vậy, khi

xử lý một dữ liệu lớn thì chúng ta có thể phân phối cho nhiều máy

- Đội ngũ hỗ trợ chuyên nghiệp: Khi gặp phải bất kỳ sự cố nào chúng ta cóthể liên hệ trực tiếp đến hệ thống hỗ trợ để xử lý kịp thời

- Tính khả dụng cao: MongoDB không chỉ có các tính năng về sao chép

mà có thể sử dụng gridFS (có thể lưu trữ và truy xuất các tệp vượt quákích thước 16MB) Các tính năng giúp tăng tính khả dụng và đạt hiệusuất cao

Hình 5 Hình minh họa ưu điểm của MongoDB

- MongoDB không được phép Joins như cơ sở dữ liệu quan hệ Để sử dụngchức năng Joins, chúng ta có thể thêm Coding theo cách thủ công, vì làthủ công nên có thể làm chậm quá trình và bị ảnh hưởng đến hiệu suất.

- Lồng dữ liệu trong BSON bị hạn chế, không được phép lồng những dữliệu hơn 100 cấp

- Không có chức năng Joins nên sẽ có sự dư thừa dữ liệu, điều này là dunglượng bộ nhớ tăng không cần thiết

Hình 6 Hình minh hoa nhược điểm của MongoDB

Việc tận dụng các chức năng MongoDB giúp mang lại hiệu suất hoạt động tốthơn Chúng ta nên cân nhắc việc lựa chọn phù hợp với nhu cầu của mình để có thểvận hành tốt MongoDB trong công việc

1.5.4 Sử dụng MongoDB trong đề tài

Sử dụng MongoDB để xậy dựng cơ sở dữ liệu NoSQL cho ứng dung

1.8 RESTFUL API [5]

1.6.1 Các khái niệm

API (Application Programming Interface) là một tập các quy tắc và cơ chế màtheo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng haythành phần khác API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ởnhững kiểu dữ liệu phổ biến như JSON hay XML

REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữliệu, một kiểu kiến trúc để viết API Nó sử dụng phương thức HTTP đơn giản để tạocho giao tiếp giữa các máy Vì vậy, thay vì sử dụng một URL cho việc xử lý một sốthông tin người dùng, REST gửi một yêu cầu HTTP như GET, POST, DELETE, …đến một URL để xử lý dữ liệu.

RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứngdụng web để quản lý các resource RESTful là một trong những kiểu thiết kế APIđược sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…) khác nhaugiao tiếp với nhau

Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTPmethod (như GET, POST, PUT, DELETE…) và cách định dạng các URL cho ứngdụng web để quản các resource RESTful không quy định logic code ứng dụng vàkhông giới hạn bởi ngôn ngữ lập trình ứng dụng, bất kỳ ngôn ngữ hoặc frameworknào cũng có thể sử dụng để thiết kế một RESTful API

1.6.2 Cách thức hoạt động

REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêutrên sẽ sử dụng những phương thức HTTP riêng

- GET (SELECT): Trả về một Resource hoặc một danh sách Resource

- POST (CREATE): Tạo mới một Resource

- PUT (UPDATE): Cập nhật thông tin cho Resource

- DELETE (DELETE): Xoá một Resource

Những phương thức hay hoạt động này thường được gọi là CRUD tương ứngvới Create, Read, Update, Delete (Tạo, Đọc, Sửa, Xóa)

1.6.3 Sử dụng RESTFUL API trong đề tài

RESTFUL API được dùng làm giao thức giao tiếp giữa Client và Server trongứng dụng

1.9 REACTJS

1.7.1 Reactjs là gì [6]

React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng(UI) Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phươngpháp mới để render trang web

Components của công cụ này được phát triển bởi Facebook Nó được ra mắtnhư một công cụ JavaScript mã nguồn mở vào năm 2013 Hiện tại, nó đã đi trướccác đối thủ chính như Angular và Bootstrap, hai thư viện JavaScript bán chạy nhấtthời bấy giờ.

1.7.2 Đặc trưng của ReactJS [7]

Những đặc điểm nổi bật của ReactJS:

1.7.2.1 JSX

Hình 7 JSX

Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trangweb thì sẽ dùng JSX JSX được đánh giá là sử dụng đơn giản hơn JavaScript và chophép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render cácsubcomponent JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so vớicode JavaScript tương đương

Hình 8 Luồng dữ liệu một chiều

ReactJS không có những module chuyên dụng để xử lý data, vì vậy ReactJSchia nhỏ view thành các component nhỏ có mối quan hệ chặt chẽ với nhau Tại saochúng ta phải quan tâm tới cấu trúc và mối quan hệ giữa các component trongReactJS? Câu trả lời chính là luồng truyền dữ liệu trong ReactJS: Luồng dữ liệu mộtchiều từ cha xuống con Việc ReactJS sử dụng one-way data flow có thể gây ra mộtchút khó khăn cho những người muốn tìm hiểu và ứng dụng vào trong các dự án.Tuy nhiên, cơ chế này sẽ phát huy được ưu điểm của mình khi cấu trúc cũng nhưchức năng của view trở nên phức tạp thì ReactJS sẽ phát huy được vai trò của mình

- Virtual DOM

Hình 9 Virtual DOM

Những Framework sử dụng Virtual DOM như ReactJS khi Virtual DOM

ánh được sự thay đổi đó Do Virtual DOM vừa đóng vai trò là Model, vừa đóng vaitrò là View nên mọi sự thay đổi trên Model đã kéo theo sự thay đổi trên View vàngược lại Có nghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tửDOM ở View nhưng vẫn thực hiện được cơ chế Data-binding Điều này làm cho tốc

độ ứng dụng tăng lên đáng kể – một lợi thế không thể tuyệt vời hơn khi sử dụngVirtual-DOM

1.7.3 Sử dùng ReactJS trong đề tài

ReactJS được dùng để xây dựng các giao diện bên phía Client cho ứng dụng

1.8.1 Định nghĩa JSON Web Token

Json Web Token là một chuỗi mã hóa mà nguồn gốc ban đầu là một chuỗiJSON Chuỗi thông tin dạng JSON bằng phương pháp mã hóa nào đó, nó trở thành

1 chuỗi ký tự lộn xộn nhìn vào sẽ rất khó hiểu

Như vậy, Bảo mật JWT là phương pháp xác thực quyền truy cập(Authentication) bằng JSON Web Token

1.8.2 Cấu trúc của một JWT

Dưới đây là 1 JSON Web Token

Hình 10 JSON Web Token

JWT trên bao gồm 3 phần:

- Header

- Payload

- Signature