(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến

(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile dạy học trực tuyến

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

-

KHÓA LUẬN TỐT NGHIỆP

XÂY DỰNG WEBSITE VÀ ỨNG DỤNG MOBILE

DẠY HỌC TRỰC TUYẾN SVTH: TRẦN NGỌC HÙNG

LỜI CẢM ƠN

Qua đề tài này chúng em đã có thêm những kiến thức phần mềm cũng như kỹ năng nghiệp vụ để xây dựng website và ứng dụng di động chuyên nghiệp có thể áp dụng trong kinh doanh dịch vụ dạy học trực tuyến Chúng em xin chân thành gửi lời cảm

ơn đến những người đã hỗ trợ, giúp đỡ chúng em rất nhiều trong thời gian qua thực hiện đề tài

Đầu tiên chúng em xin gửi lời cảm ơn tới các Thầy Cô trong trường Đại Học Sư Phạm

Kỹ Thuật TP.Hồ Chí Minh, đặc biệt là các Thầy Cô trong Khoa Công Nghệ Thông Tin và Khoa Đào Tạo Chất Lượng Cao, đã nhiệt tình giảng dạy, trau dồi, vun đắp kiến thức cho chúng em trong nhiều năm ngồi trên ghế nhà trường

Đặc biệt chúng em chân thành cảm ơn Thầy Lê Văn Vinh trong thời gian qua đã

cung cấp cho chúng em những kiến thức về cũng như tài liệu rất hữu ích và hướng

dẫn chi tiết trong quá trình chúng em làm để tài Thầy luôn giải đáp tận tình những

vướng mắc khi chúng em gặp phải Và chúng em cũng xin gửi lời cảm ơn đến bạn

bè trong và ngoài lớp - những người bạn đã cùng chia sẻ, trao đổi kiến thức với

chúng em

Trong phạm vi khả năng cho phép, chúng em đã rất cố gắng để hoàn thành đề tài

một cách tốt nhất Tuy nhiên không thể tránh khỏi nhiều thiếu sót, chúng em kính

mong nhận được sự cảm thông và những ý kiến đóng góp của quý thầy cô và các

MỤC LỤC

LỜI CẢM ƠN I MỤC LỤC II DANH MỤC HÌNH VẼ VII DANH MỤC BẢNG BIỂU X

CHƯƠNG 1: MỞ ĐẦU 1

1.1 Lý do chọn đề tài 1

1.2 Mục tiêu đề tài 1

1.3 Đối tượng và phạm vi nghiên cứu 2

1.3.1 Đối tượng 2

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

1.4 Kết quả dự kiến đạt được 2

1.4.1 Phía người dùng 2

1.4.2 Phía người quản trị 3

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 4

2.1 Tổng quan về ASP.NET Core 4

2.1.1 Lịch sử phát triển 4

2.1.2 Một số khái niệm 4

2.1.3 Ưu điểm của ASP.NET Core 5

2.1.4 Cải tiến của ASP.NET Core 5

2.2 Tổng quan về Restful API 5

2.2.1 Restful là gì? 5

2.2.2 Nguyên tắc của Restful API 6

2.2.3 Các ràng buộc trong REST 6

2.3 Cài đặt môi trường ASP.NET Core 7

2.3.1 Giới thiệu chung về các công cụ cho ASP.NET Core 7

2.3.2 Cài đặt ASP.NET Core SDK trên Windows 7

2.4 Tổng quan về Angular 10 8

2.5 Môi trường phát triển Angular 10 9

2.6 Kiến trúc Angular 9

2.6.1 Module 9

2.6.2 Component 9

2.6.3 Templates 9

2.6.4 Metadatas 10

2.6.5 Data Binding 10

2.6.6 Services 10

2.6.7 Directives 10

2.6.8 Dependency Injection 10

2.7 Cài đặt môi trường Angular 10 11

2.7.1 Cài đặt Node trên Windows 11

2.7.2 Cài đặt Typescript và Angular 11

2.8 Tổng quan về React Native 11

2.9 Môi trường phát triển React Native 12

2.10 Kiến trúc React Native 12

2.10.1 Component 12

2.10.1.1 Functional (Stateless) Components 12

2.10.2 Component 12

2.10.3 Props 13

2.10.3 State 13

2.10.4 Hook 13

2.10.5 Effect Hook 13

2.10.6 Life Circle 13

2.11 Cài đặt môi trường React native 14

CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 15

3.1 Khảo sát hiện trạng 15

3.1.1 Khảo sát nhu cầu người dùng 15

3.1.2 Khảo sát phần mềm 15

3.1.3 Tổng kết sau khi khảo sát 18

3.2 Xác định yêu cầu 19

3.2.1 Lược đồ usecase 19

3.2.2 Bảng Requirement dành cho Usecase 22

3.2.3 Đặc tả Usecase 26

CHƯƠNG 4: THIẾT KẾ ỨNG DỤNG 73

4.1 Thiết kế dữ liệu 73

4.1.1 Sơ đồ thiết kế dữ liệu (Database Diagram) 73

4.1.2 Mô tả sơ đồ thiết kế dữ liệu 73

4.1.3 Các ràng buộc toàn vẹn 81

4.2 Sơ đồ tuần tự 87

4.3 Sơ đồ ERD 98

4.4 Sơ đồ Class Diagram 99

4.5 Application Architecture 100

4.6 Thiết kế giao diện 101

4.6.1 SCP001 Trang chủ chưa đăng nhập 101

4.6.2 SCP002 Trang đăng ký 102

4.6.3 SCP003 Trang đăng nhập 105

4.6.4 SCP004 Trang chủ với quyền học viên 107

4.6.5 SCP005 Trang đăng ký giảng viên 108

4.6.6 SCP006 Trang chủ với quyền giảng viên 110

4.6.7 SCP007 Trang tạo khóa học 112

4.6.8 SCP008 Trang tạo thông tin chi tiết khóa học 113

4.6.9 SCP009 Trang quản lý bộ câu hỏi (Questionpool) 126

4.6.10 SCP010 Trang chi tiết bộ câu hỏi (Questionpool Detail Page) 131

4.611 SCP011 Trang tạo đề thi (Create Exam Page) 135

4.6.12 SCP012 Trang quản lý khóa học xuất bản (Manage Publish Course Page) 138

4.6.14 SCP014 Trang danh mục khóa học (Category) 143

4.6.15 SCP015 Trang chi tiết giỏ hàng (Cart Detail) 148

4.6.16 SCP016 Trang chi tiết bài giảng khóa học (Course Detail) 150

4.6.17 SCP017 Trang lịch sử thanh toán (Invoice History) 153

4.6.18 SCP018 Trang thông tin cá nhân (Profile) 160

4.6.19 SCP019 Trang thông tin giảng viên (Instructor Profile) 162

4.6.20 SCP020 Trang khóa học đã đăng ký (My Course) 165

4.6.21 SCP021 Trang chủ với quyền quản trị viên 169

4.6.22 SCP022 Trang quản lý tài khoản người dùng 173

4.6.23 SCP023 Trang quản lý khóa học 177

4.6.24 SCP024 Trang quản lý thu nhập giảng viên 181

4.6.25 SCPM001 Trang đăng nhập (Login Page) (Mobile) 186

4.6.26 SCPM002 Trang đăng ký tài khoản (Register Page) (Mobile) 188

4.6.27 SCPM003 Trang chủ (Home Page) (Mobile) 191

4.6.28 SCPM004 Trang chi tiết khóa học (CourseDetail Page) (Mobile) 193

4.6.29 SCPM005 Trang tìm kiếm khóa học (Search Page) (Mobile) 196

4.6.30 SCPM006 Trang chi tiết khóa học tìm kiếm (Search Course Detail Page) (Mobile) 199

4.6.31 SCPM007 Trang danh sách khóa học đã đăng ký (My Course Page) (Mobile) 202

4.6.32 SCPM008 Trang nội dung khóa học (Course Content Page) (Mobile) 204

4.6.33 SCPM009 Trang chi tiết bài giảng (Course Content Page) (Mobile) 207

4.6.34 SCPM010 Trang thi (Exam Page) (Mobile) 209

4.6.35 SCPM011 Trang kết quả thi (Exam Result Page) (Mobile) 212

4.6.36 SCPM012 Trang thông tin tài khoản (Account Page) (Mobile) 215

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 217

5.1 Cài đặt ứng dụng 217

5.2 System Architecture 218

5.3 Kiểm thử phần mềm 218

CHƯƠNG 6: KẾT LUẬN 222

6.1 Kết quả đạt được 222

6.1.1 Kiến thức tìm hiểu được 222

6.1.2 Về chương trình đã xây dựng 222

6.1.3 Ưu khuyết điểm 222

6.2 Hướng phát triển 223

TÀI LIỆU THAM KHẢO 224

DANH MỤC HÌNH VẼ

Chương 3:

Hình 3.1 Khảo sát trang Udemy 15

Hình 3.2 Khảo sát trang Coursera 16

Hình 3.3 Khảo sát trang SkillShare 17

Hình 3.4 Sơ đồ use case tổng quát (Web) 19

Hình 3.5 Sơ đồ use case actor User (Web) 20

Hình 3.6: Sơ đồ Usecase actor User (Mobile) 21

Hình 3.7 Sơ đồ Usecase actor Admin (Web) 22

Hình 3.8 Sơ đồ use case xem thông tin khóa học 32

Hình 3.9 Sơ đồ use case quản lý khóa học 40

Hình 3.10 Sơ đồ use case bình luận 45

Hình 3.11 Sơ đồ use case quản lý tài khoản hệ thống 58

Chương 4: Hình 4.1 Sơ đồ thiết kế dữ liệu 73

Hình 4.2 Sequence Đăng nhập hệ thống 87

Hình 4.3 Sequence Đăng ký tài khoản 88

Hình 4.4 Sequence Tạo nội dung khóa học 89

Hình 4.5 Sequence Tạo nội dung chương 89

Hình 4.6 Sequence Tạo nội dung chủ đề 90

Hình 4.7 Sequence Tạo nội dung bài học 90

Hình 4.8 Sequence Mua khóa học 91

Hình 4.9 Sequence Thanh toán 91

Hình 4.10 Sequence Tìm kiếm 92

Hình 4.11 Sequence Quản lí bộ câu hỏi 92

Hình 4.12 Sequence Thực hiện bài thi 93

Hình 4.13 Sequence Quản lí câu hỏi 93

Hình 4.14 Sequence Tạo đề thi 94

Hình 4.15 Sequence Chỉnh sửa/ xóa đề thi 94

Hình 4.16 Sequence Đăng bình luận 95

Hình 4.17: Sequene Đăng ký trở thành giảng viên 95

Hình 4.18: Sequence Quản lý tài khoản 96

Hình 4.19: Sequence Quản lý khóa học 96

Hình 4.20: Sequence Thống kê số dư tài khoản giảng viên 97

Hình 4.21 Sơ đồ ERD 98

Hình 4.22 Sơ đồ Class Diagaram 99

Hình 4.24 Giao diện trang chủ chưa đăng nhập (1) 101

Hình 4.25 Giao diện trang chủ chưa đăng nhập (2) 101

Hình 4.26 Giao diện trang đăng ký (1) 102

Hình 4.27 Giao diện trang đăng ký (2) 103

Hình 4.28 Giao diện trang đăng nhập 105

Hình 4.29 Giao diện trang chủ với quyền học viên 107

Hình 4.30 Giao diện trang đăng ký giảng viên 108

Hình 4.31 Giao diện trang chủ với quyền giảng viên 110

Hình 4.32 Giao diện trang tạo khóa học 112

Hình 4.33 Giao diện trang tạo thông tin chi tiết khóa học (1) 113

Hình 4.34 Giao diện trang tạo thông tin chi tiết khóa học (2) 114

Hình 4.35 Giao diện trang tạo thông tin chi tiết khóa học (3) 115

Hình 4.36 Giao diện trang tạo thông tin chi tiết khóa học (4) 116

Hình 4.37 Giao diện trang tạo thông tin chi tiết khóa học (5) 116

Hình 4.38 Giao diện trang tạo thông tin chi tiết khóa học (6) 117

Hình 4.39 Giao diện trang quản lý bộ câu hỏi (1) 126

Hình 4.40 Giao diện trang quản lý bộ câu hỏi (2) 126

Hình 4.41 Giao diện trang quản lý bộ câu hỏi (3) 127

Hình 4.42 Giao diện trang chi tiết bộ câu hỏi (1) 131

Hình 4.43 Giao diện trang chi tiết bộ câu hỏi (2) 131

Hình 4.44 Giao diện trang tạo đề thi (1) 135

Hình 4.45 Giao diện trang tạo đề thi (2) 136

Hình 4.46 Giao diện trang quản lý khóa học xuất bản 138

Hình 4.47 Giao diện trang lớp học trực tuyến 141

Hình 4.48 Giao diện trang danh mục khóa học (1) 143

Hình 4.49 Giao diện trang danh mục khóa học (2) 144

Hình 4.50 Giao diện trang chi tiết giỏ hàng 148

Hình 4.51 Giao diện trang chi tiết bài giảng khóa học 150

Hình 4.52 Giao diện trang lịch sử thanh toán (1) 153

Hình 4.53 Giao diện trang lịch sử thanh toán (2) 154

Hình 4.54 Giao diện trang thông tin cá nhân 160

Hình 4.55 Giao diện trang thông tin giảng viên 162

Hình 4.56 Giao diện trang khóa học đã đăng ký (1) 165

Hình 4.57 Giao diện trang khóa học đã đăng ký (2) 166

Hình 4.58 Giao diện trang chủ với quyền quản trị viên (1) 169

Hình 4.59 Giao diện trang chủ với quyền quản trị viên (2) 169

Hình 4.60 Giao diện trang quản lý tài khoản người dùng 173

Hình 4.62 Giao diện trang quản lý thu nhập giảng viên 181

Hình 4.63 Giao diện trang đăng nhập 186

Hình 4.64 Giao diện trang đăng ký tài khoản (1) 188

Hình 4.65 Giao diện trang đăng ký tài khoản (2) 189

Hình 4.66 Giao diện trang chủ 191

Hình 4.67 Giao diện chi tiết khóa học 193

Hình 4.68 Giao diện trang tìm kiếm khóa học 196

Hình 4.69 Giao diện trang chi tiết khóa học tìm kiếm 199

Hình 4.70 Giao diện trang danh sách khóa học đã đăng ký 202

Hình 4.71 Giao diện trang nội dung khóa học 204

Hình 4.72 Giao diện trang chi tiết bài giảng 207

Hình 4.73 Giao diện trang thi 209

Hình 4.74 Giao diện trang kết quả thi – Pass 212

Hình 4.75 Giao diện trang kết quả thi – Fail 213

Hình 4.76 Giao diện trang thông tin tài khoản 215

Chương 5: Hình 5.1: Sơ đồ System Architecture 218

DANH MỤC BẢNG BIỂU

Chương 3

Bảng 3.1: Bảng yêu cầu dành cho Usecase Desktop 22

Bảng 3.2: Bảng yêu cầu danh cho Usecase Mobile 25

Bảng 3.3: Đặc tả Usecase Đăng ký 26

Bảng 3.4: Đặc tả Usecase Đăng nhập 27

Bảng 3.5: Đặc tả Usecase Đăng xuất 29

Bảng 3.6: Đặc tả Usecase Tìm kiếm khóa học 30

Bảng 3.7: Đặc tả Usecase Xem thông tin khóa học 32

Bảng 3.8: Đặc tả Usecase Đăng ký khóa học 33

Bảng 3.9: Đặc tả Usecase Xem chi tiết khóa học 34

Bảng 3.10: Đặc tả Usecase Xem bài học 36

Bảng 3.11: Đặc tả Usecase Thanh toán 38

Bảng 3.12: Đặc tả Usecase Quản lý khóa học 40

Bảng 3.13: Đặc tả Usecase Tạo nội dung bài học 41

Bảng 3.14: Đặc tả Usecase Tạo bài Quiz 43

Bảng 3.15: Đặc tả Usecase Bình luận 45

Bảng 3.16: Đậc tả Usecase Chỉnh sửa nội dung bình luận 46

Bảng 3.17: Đặc tả Usecase Xóa bình luận 48

Bảng 3.18: Đặc tả Usecase Trở thành giảng viên 49

Bảng 3.19: Đặc tả Usecase Tạo phòng học trực tuyến 50

Bảng 3.20: Đặc tả Usecase Thực hiện Quiz 52

Bảng 3.21: Đặc tả Usecase Xem lịch sử thực hiện Quiz 53

Bảng 3.22: Đặc tả Usecase Đánh giá khóa học 54

Bảng 3.23: Đặc tả Usecase Xem thông tin hóa đơn 55

Bảng 3.24: Đặc tả Usecase Quản lý số dư giảng viên 56

Bảng 3.25: Đặc tả Usecase Quản lý tài khoản hệ thống 58

Bảng 3.26: Đậc tả Usecase Kích hoạt tài khoản bị vô hiệu hóa 59

Bảng 3.27: Đặc tả Uscase Vô hiệu hóa tài khoản đang hoạt đông 60

Bảng 3.28: Đặc tả Usecase mobile Đăng ký 62

Bảng 3.29: Đặc tả Usecase mobile Đăng nhập 64

Bảng 3.30: Đặc tả Usecase mobile Đăng xuất 65

Bảng 3.31: Đặc tả Usecase mobile Tìm kiếm khóa học 66

Bảng 3.32: Đặc tả Usecase mobile Xem thông tin khóa học 67

Bảng 3.33: Đặc tả Usecase mobile Xem thông tin chi tiết khóa học 68

Bảng 3.34: Đặc tả Usecase mobile Xem bài học 70

Chương 4:

Bảng 4.1: Bảng Users 73

Bảng 4.2: Bảng Accounts 74

Bảng 4.3: Bảng AccountInCourse 75

Bảng 4.4: Bảng Courses 75

Bảng 4.5: Bảng Topic 76

Bảng 4.6: Bảng SubTopic 76

Bảng 4.7: Bảng Lesson 76

Bảng 4.8: Bảng AccountInLesson 77

Bảng 4.9: Bảng Comment 77

Bảng 4.10: Bảng SubComment 78

Bảng 4.11: Bảng QuestionPool 78

Bảng 4.12: Bảng Quiz 79

Bảng 4.13: Bảng Choice 79

Bảng 4.14: Bảng ExamQuiz 80

Bảng 4.15: Ràng buộc về đánh giá khóa học 82

Bảng 4.16: Ràng buộc về thông tin tài khoản 82

Bảng 4.17: Bảng ràng buộc về khóa học 83

Bảng 4.18: Ràng buộc về nội dung chương 84

Bảng 4.19: Ràng buộc về nội dung chủ đề 84

Bảng 4.20: Ràng buộc về danh sách giỏ hàng, hóa đơn 84

Bảng 4.21: Ràng buộc về nội dung bộ câu hỏi 85

Bảng 4.22: Ràng buộc về nội dung câu hỏi 85

Bảng 4.23: Ràng buộc về bộ đề thi 85

Bảng 4.24: Ràng buộc nội dung bình luận 86

Bảng 4.25: Bảng mô tả màn hình trang chủ chưa đăng nhập 101

Bảng 4.26: Bảng mô tả màn hình trang đăng ký 103

Bảng 4.27: Bảng mô tả màn hình trang đăng nhập 105

Bảng 4.28: Bảng mô tả màn hình trang chủ với quyền học viên 107

Bảng 4.29: Bảng mô tả màn hình trang đăng ký giảng viên 108

Bảng 4.30: Bảng mô tả màn hình trang chủ với quyền giảng viên 110

Bảng 4.31: Bảng mô tả màn hình trang tạo khóa học 112

Bảng 4.32: Bảng mô tả màn hình trang tạo thông tin chi tiết khóa học 117

Bảng 4.33: Bảng mô tả màn hình trang quản lý bộ câu hỏi 127

Bảng 4.34: Bảng mô tả màn hình trang chi tiết bộ câu hỏi 132

Bảng 4.35: Bảng mô tả màn hình trang tạo đề thi 136

Bảng 4.36: Bảng mô tả màn hình trang quản lý khóa học xuất bản 138

Bảng 4.38: Bảng mô tả màn hình trang danh mục khóa học 144

Bảng 4.39: Bảng mô tả màn hình trang chi tiết giỏ hàng 148

Bảng 4.40: Bảng mô tả màn hình trang chi tiết bài giảng khóa học 150

Bảng 4.41: Bảng mô tả màn hình trang lịch sử thanh toán 154

Bảng 4.42: Bảng mô tả màn hình trang thông tin cá nhân 160

Bảng 4.43: Bảng mô tả màn hình trang thông tin giảng viên 162

Bảng 4.44: Bảng mô tả màn hình trang khóa học đã đăng ký 166

Bảng 4.45: Bảng mô tả màn hình trang chủ với quyền quản trị viên 169

Bảng 4.46: Bảng mô tả màn hình trang quản lý tài khoản người dùng 173

Bảng 4.47: Bảng mô tả màn hình trang quản lý khóa học 177

Bảng 4.48: Bảng mô tả màn hình trang quản lý thu nhập giảng viên 181

Bảng 4.49: Bảng mô tả màn hình di động trang đăng nhập 186

Bảng 4.50: Bảng mô tả màn hình di động trang đăng ký tài khoản 189

Bảng 4.51: Bảng mô tả màn hình di động trang chủ 192

Bảng 4.52: Bảng mô tả màn hình di động trang chi tiết khóa học 194

Bảng 4.53: Bảng mô tả màn hình di động trang tìm kiếm khóa học 197

Bảng 4.54: Bảng mô tả màn hình di động trang chi tiết khóa học tìm kiếm 200

Bảng 4.55: Bảng mô tả màn hình di động trang danh sách khóa học đã đăng ký 203

Bảng 4.56: Bảng mô tả màn hình di động trang nội dung khóa học 205

Bảng 4.57: Bảng mô tả màn hình di động trang chi tiết bài giảng 208

Bảng 4.58: Bảng mô tả màn hình di động trang thi 210

Bảng 4.59: Bảng mô tả màn hình di động trang kết quả thi 214

Bảng 4.60: Bảng mô tả màn hình di động trang thông tin tài khoản 216

Chương 5: Bảng 5.1: Bảng kiểm thử phần mềm 218

CHƯƠNG 1: MỞ ĐẦU 1.1 Lý do chọn đề tài

Ngày nay, cuộc sống xã hội ngày càng phát triển, hiện đại và tiến bộ hơn, đòi hỏi con người phải có đầy đủ kiến thức, kỹ năng để hội nhập, giúp ích cho bản thân, gia đình

và xã hội Từ đó, vai trò của việc học luôn được đề cao và chú trọng Việc học ngày càng quan trọng thì cách tiếp cận việc học cũng quan trọng không kém Nhất là trong thời buổi hiện đại, con người có thể tiếp cận việc học với nhiều cách học khác nhau Trong đó, không thể không nhắc đến phương pháp học trực tuyến đang phát triển và phổ biến trên thế giới Chỉ cần một chiếc laptop hay điện thoại có kết nối Internet, người học hoàn toàn có thể học tập bất kì nơi đâu Đây là một cách học nhanh chóng,

dễ dàng, thuận tiện và tiết kiệm Chính bởi thấy được tầm quan trọng và những ưu điểm vượt trội của phương thức học trực tuyến, nhóm em quyết định chọn đề tài xây dựng trang web dạy học online

Học online hay còn gọi là E-learning (Electronic Learning) là một khái niệm mới được mọi người chú ý hiện nay Có khá nhiều định nghĩa về E-learning Hay theo quan điểm hiện đại, E-learning là sự phân phát các nội dung học sử dụng các công cụ điện tử hiện đại như máy tính, mạng vệ tinh, mạng Internet, Intranet trong đó nội dung học có thể thu được từ các website, đĩa CD, video, audio thông qua một máy tính hay TV; người dạy và người học có thể giao tiếp với nhau qua mạng dưới các hình thức như: email, thảo luận trực tuyến (chat), diễn đàn (forum), hội thảo video

Ngoài E-learning một hình thức khác của việc học online là tự học qua mạng của các học sinh, sinh viên bằng các trang web học online miễn phí Việc học online hiện nay trở nên phổ biến và dễ dàng tiếp cận đến mọi người, không những học sinh sinh viên

mà còn hướng đến những đối tượng mong muốn cập nhật kiến thức, kĩ năng [1]

1.2 Mục tiêu đề tài

Đề tài này thực hiện xây dựng hệ thống website dạy học, vận dụng tốt công nghệ RESTful API, Angular và React Native cho ứng dụng di động Đề tài này có thể được sử dụng cho công việc quản lý khóa học online, tìm kiếm, đăng ký khóa học, trình bày nội dung bài giảng cùng với bài kiểm tra củng cố kiến thức với giao diện đẹp mắt, dễ dàng sử dụng, thao tác nhanh gọn vì có đầy đủ các chức năng cơ bản cho phép thực hiện công việc chính xác, an toàn

1.3 Đối tượng và phạm vi nghiên cứu

1.4 Kết quả dự kiến đạt được

1.4.1 Phía người dùng

1.4.1.1 Phía người học

Cho phép người học đăng ký, đăng nhập vào website để:

● Xem/chỉnh sửa thông tin cá nhân

● Tìm kiếm khóa học mong muốn

● Đăng ký và tham gia khóa học

● Đăng ký trở thành giảng viên

● Xem thông tin giảng viên

● Thanh toán khóa học đăng ký

● Xem thông tin thanh toán, xuất hóa đơn

● Thực hiện và xem lịch sử hoàn thành các bài kiểm tra ôn luyện

● Đánh giá (rating) khóa học

● Bình luận góp ý khóa học

1.4.1.2 Phía người dạy

Cho phép người dạy đăng ký, đăng nhập vào website để:

● Xem/chỉnh sửa thông tin cá nhân

● Quản lý khóa học

● Quản lý bộ câu hỏi và các bộ đề ôn tập kiến thức

● Đăng ký và thanh toán khóa học khác bằng tiền kiếm được nhờ bán khóa học

1.4.2 Phía người quản trị

Cho phép người quản trị đăng nhập vào website để:

● Quản lý tài khoản người dùng

● Khóa tài khoản người dùng vi phạm

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Tổng quan về ASP.NET Core

ASP.NET Core là một framework luôn được cập nhật và hỗ trợ của Microsoft Nó được thiết kế và cải tiến để trở nên nhanh chóng, linh hoạt và tương thích với nhiều nền tảng khác nhau với hiệu suất ngày càng được nâng cao Trong báo cáo này, ASP.NET Core là một framework có thể được sử dụng để phát triển web với NET Nếu bạn có kinh nghiệm làm việc với MVC hoặc Web API trong một vài năm thì bạn

sẽ nhận thấy những tính năng quen thuộc cũng như rất nhiều công cụ khác được phát triển để hỗ trợ người dùng [2]

● ASP.NET Core không phải là phiên bản tiếp theo của ASP.NET 4.6

● Đó là một framework hoàn toàn mới, may mắn rằng nó một dự án side-by-side tương tự với mọi thứ mà chúng ta biết

● Nó thực ra được viết lại trên framework ASP.NET 4.6 hiện tại những kích thước nhỏ hơn và nhiều modular hơn [2]

2.1.2 Một số khái niệm

ASP.NET Core là một web framework mã nguồn và được tối ưu hóa cho cloud để phát triển các ứng dụng web chạy trên nhiều nền tảng như Windows, Linux và Mac Hiện tại, nó bao gồm MVC framework được kết hợp các tính năng của MVC và Web API thành một web framework duy nhất

● Các ứng dụng ASP.NET Core có thể chạy trên NET Core hoặc trên NET Framework hoàn chỉnh

● Nó đã được thiết kế để cung cấp một framework tối ưu cho các ứng dụng để triển khai tới cloud hoặc chạy on-premises

● Nó bao gồm những modular với các thành phần tối thiểu, do đó bạn giữ được tính linh hoạt trong quá trình xây dựng các giải pháp của mình

● Bạn có thể phát triển và chạy các ứng dụng đa nền tảng từ ASP.NET Core trên

2.1.3 Ưu điểm của ASP.NET Core

ASP.NET Core đi kèm với những ưu điểm sau:

● ASP.NET Core có một số thay đổi kiến trúc dẫn đến modular framework nhỏ hơn

● ASP.NET Core không còn dựa trên System.Web.dll

● Nó dựa trên một tập hợp nhiều yếu tố của Nuget packages

● Điều này cho phép bạn tối ưu ứng dụng của mình chỉ cần những NuGet packages cần thiết

● Lợi ích của diện tích bề mặt ứng dụng nhỏ hơn thì bảo mật chặt chẽ hơn, giảm dịch vụ, cải thiện hiệu suất và giảm chi phí [2]

2.1.4 Cải tiến của ASP.NET Core

Với ASP.NET Core, bạn có thể nhận được các cải tiến sau:

● Xây dựng và chạy các ứng dụng ASP.NET Core đa nền tảng trên Windows, Mac và Linux

● Được xây dựng trên NET Core, hỗ trợ side-by-side app versioning

● Công cụ mới giúp đơn giản hóa việc phát triển web hiện đại Liên kết đơn các web stack như Web UI và API Web

● Cấu hình dựa trên môi trường đám mây sẵn có

● Được xây dựng dựa trên cho DI (Dependency Injection)

● Tag Helpers làm cho các Razor makup trở nên tự nhiên hơn với HTML

● Có khả năng host trên IIS hoặc self-host [2]

2.2 Tổng quan về Restful API

2.2.1 Restful là gì?

REST (Representational State Transfer) là một kiểu kiến trúc được định nghĩa bởi Roy Fielding Mục đích của REST là thiết kế các ứng dụng mạng phân tán sử dụng HTTP như là một giao thức tầng ứng dụng và nó là một mô hình kiến trúc thực sự cho web

Theo cách hiểu đơn giản, REST là một loạt hướng dẫn và dạng cấu trúc dùng cho việc chuyển đổi dữ liệu Thông thường, REST hay được dùng cho ứng dụng web,

API là viết tắt của Application Programming Interface, phương thức kết nối với các thư viện và ứng dụng khác Windows có nhiều API, và Twitter cũng có web API, tuy chúng thực hiện các chức năng khác nhau, với mục tiêu khác nhau

Nhìn chung, RESTful API là những API đi theo cấu trúc REST Bản thân REST không phải là một loại công nghệ, mà là phương thức tạo API với nguyên lý tổ chức nhất định Những nguyên lý này nhằm hướng dẫn lập trình viên tạo môi trường xử lý API request được toàn diện hơn [3]

2.2.2 Nguyên tắc của Restful API

Như một hệ quả tất yếu của quá trình phức tạp ngày càng lớn của các dịch vụ web lớn nên RESTful đã được đưa ra như là một giải pháp để thay thế việc thực hiện triệu gọi từ xa (RPC) thông qua web

Web dựa vào tài nguyên, nhưng các dịch vụ web lớn lại không dựa vào tài nguyên Web dựa vào URI và liên kết nhưng các dịch vụ web lớn lại không dựa vào chúng Web dựa vào HTTP và các tính năng của nó, nhưng các dịch vụ web hầu như không dựa vào bất kỳ tính năng nào của HTTP Vấn đề này không phải là các dịch vụ web lớn không nhận ra mà nó cảm thấy không nhận được lợi ích gì từ dịch vụ web hướng tài nguyên Chúng không có khả năng đánh địa chỉ, không cache, kết nối không tốt Chúng cũng không cần giao diện đồng nhất Chúng không được rõ ràng, hiểu được một vấn đề không giúp mình hiểu được vấn đề tiếp theo, trong thực tế chúng cũng có vấn đề khi tương tác với nhiều khách hàng cùng một lúc

REST là một kiểu kiến trúc cho hệ thống phân tán như World Wide Web Để thực thi kiến trúc RESTful ta cần phải tuân thủ theo hướng dẫn của ROA, kiến trúc hướng tài nguyên, trong báo cáo này sẽ có các quy tắc cho phép ta thiết kế dịch vụ RESTful [3]

2.2.3 Các ràng buộc trong REST

● Giao diện đồng nhất: Nhằm đơn giản hóa và tách biệt kiến trúc, cho phép từng phần phát triển độc lập, người phát triển đã tạo ra API cơ bản để thiết kế bất

kỳ dịch vụ REST nào (dù là web hay mobile thì đều có thể kết nối vào được) Tuy nhiên khi chuẩn hóa thì ta không thể tối ưu từng kết nối được

● Phi trạng thái: Hiểu đơn giản là server và client không lưu trạng thái của nhau Với mỗi một request được gửi đi đều phải được đóng gói đầy đủ thông tin để server có thể nhận và hiểu được Điều này giúp hệ thống dễ phát triển, bảo trì,

mở rộng vì không tốn công CRUD trạng thái của Client Tuy nhiên có mặt hạn

● Client – server: Hoạt động theo mô hình Client - Server, việc tách biệt này

nhằm đơn giản hóa việc thực hiện các thành phần, giảm sự phức tạp của ngữ nghĩa kết nối, nâng cao hiệu quả của việc điều chỉnh hiệu năng, tăng khả năng

mở rộng của máy chủ

● Khả năng caching: Các response có thể lấy từ cache Bằng cách cache các response, server giảm tải việc xử lý request, client cũng nhận được thông tin nhanh hơn Có 2 phương pháp nên được áp dụng là Etag và Last-Modified

● Phân lớp hệ thống: giảm mức độ phức tạp của hệ thống, giúp các thành phần tách biệt nhau từ đó dễ dàng mở rộng Với mỗi một lớp chỉ trao đổi trực tiếp với lớp ngay dưới và trên nó [3]

2.3 Cài đặt môi trường ASP.NET Core

2.3.1 Giới thiệu chung về các công cụ cho ASP.NET Core

Để phát triển ứng dụng ASP NET Core bạn cần các công cụ sau:

từ đường link: https://visualstudio.microsoft.com/downloads/ Riêng JetBrains Rider không có bản miễn phí mà chỉ có bản dùng thử 30 ngày Nhìn chung, trên Windows việc cài đặt môi trường phát triển cho ASP.NET Core rất đơn giản Để đơn giản hóa việc hướng dẫn, tất cả các bài học về sau đều sử dụng Visual Studio 2019 Community Nếu muốn dùng một IDE khác, bạn có thể tìm hiểu thêm thông qua hệ thống tài liệu (docs) được cung cấp miễn phí trên mạng Internet [4]

2.3.2 Cài đặt ASP.NET Core SDK trên Windows

Do được thiết kế để phát triển và tương thích đa nền tảng, việc cài đặt ASP.NET Core tương đối dễ dàng trên các hệ điều hành Để chạy các ứng dụng ASP.NET Core, bạn cần cài đặt ASP.NET Core Runtime Để phát triển ứng dụng, bạn cần cài đặt ASP NET Core SDK Khi cài đặt SDK hệ thống sẽ đồng thời cài đặt Runtime Bạn có thể chọn tải bản SDK mới nhất từ đường link:

Tải bộ cài về và thực hiện tiến trình cài đặt như bất kỳ chương trình Windows bình thường nào [4]

2.3.3 Cài đặt ASP.NET Core SDK với Visual Studio 2019

Nếu bạn sử dụng Windows và Visual Studio, việc cài đặt NET Core Runtime và SDK vô cùng đơn giản Do NET Core 3.0 (phiên bản mới nhất hiện nay) đòi hỏi sử dụng Visual Studio 2019 (v16.3 trở lên), nên:

● Nếu chưa có hoặc đang dùng một bản Visual Studio cũ, hãy cài đặt Visual Studio (community) 2019 Trong quá trình cài đặt, hãy chọn Workloads ASP.NET and web development (phát triển ứng dụng trên cả ASP.NET và ASP.NET Core) hoặc NET Core cross-platform development (phát triển ứng dụng trên NET Core và ASP.NET Core)

● Nếu bạn đã cài đặt sẵn Visual Studio 2019, hãy update bản cập nhật mới nhất Sau đó chạy chương trình Visual Studio Installer => chọn Modify => chọn tab Workloads và cũng lựa chọn một trong hai mục như trên Lựa chọn một trong hai workload trên sẽ giúp bạn cài đặt tất cả các thành phần cần thiết cho phát triển và thực thi ứng dụng ASP.NET Core trên Windows Khi quá trình cài đặt hoàn tất, bạn đã sẵn sàng cho cả việc phát triển và chạy ứng dụng ASP.NET Core Bạn cũng có thể chạy lệnh dotnet version trên Command Prompt hoặc PowerShell để kiểm tra kết quả Đây là cách thức dễ dàng nhất để cài đặt môi trường phát triển ASP.NET Core trên Windows [4]

2.4 Tổng quan về Angular 10

Angular 10 là một framework Javascript mã nguồn mở được sử dụng để xây dựng các ứng dụng web bằng HTML, Javascript và là 1 lựa chọn cho các lập trình viên phát triển các ứng dụng cho các thiết bị di động

Angular 10 được đưa ra vào tháng 4 năm 2020 nhằm thay thế AngularJS 1 với các khái niệm mới nhằm đơn giản hóa và tối ưu cho quá trình phát triển sử dụng framework này

Một số lợi ích của Angular 10:

● Nhanh hơn AngularJS 1

● Hỗ trợ đa nền tảng và đa trình duyệt

● Cấu trúc code được tổ chức đơn giản hơn

● Sử dụng Dependency Injection để maintane ứng dụng

● Tất cả mọi thứ dựa vào component [5]

2.5 Môi trường phát triển Angular 10

Angular 10 sử dụng TypeScript để phục vụ cho quá trình phát triển ứng dụng Angular TypeScript là một ngôn ngữ có thể gọi là bao hàm Javascript được sử dụng để viết các ứng dụng Angular và một trình compiler cho phép chúng ta biên dịch thành file Javascript thuần tùy theo nhu cầu người dùng TypeScript giúp giảm thiểu các lỗi khi viết các ứng dụng Angular

Môi trường để phát triển ứng dụng angular cần có:

2.6.2 Component

Component trong Angular 10 có thể coi như là một controller (tương ứng trong AngularJS 1) cùng với template nó giúp xử lý một tác vụ nào đó và có thể hiển thị data lên view Component có thể được tái sử dụng trong ứng dụng Ở component có thể tự render ra view và cấu hình các Dependency Injection Ngoài ra ta cũng có thể thực hiện các thao tác về CSS đối với template của component trong component Để

sử dụng component ta cần đăng ký nó thông qua @Component decorator

2.6.4 Metadatas

Metadata là cách chúng ta mô tả một class component bằng các dữ liệu cụ thể Một component vẫn sẽ chỉ là một class cho đến khi ta mô tả chúng cho Angular biết đó là component thông qua metadata Thông tin metadata được mô tả bằng việc khai báo trong decorator @Component Các thông tin cơ bản của metadata có thể có là: selector - đây là html tag tự định nghĩa mà trong đó component có hiệu lực, template

- đây là nơi định nghĩa template của component, directives - khai báo các component khác hoặc các directives

● Event Binding: khi tác thực hiện một thao tác lên một component method nó

sẽ fire event và thực hiện thao tác tương ứng

● Two-way binding: sử dụng ngModel để binding các giá trị của component với view

2.6.6 Services

Services là các block code thực hiện một tác vụ nào đó Các services của Angular hoạt động dựa trên cơ chế Dependency Injection Các service bao gồm các giá trị, các hàm và các tính năng sẽ được yêu cầu bởi ứng dụng

Sử dụng Dependency Injection cho phép chúng ta thêm các service, provider, component khác vào component để sử dụng một cách dễ dàng, nhanh chóng hơn [5]

2.7 Cài đặt môi trường Angular 10

2.7.1 Cài đặt Node trên Windows

Bước 1: Tải bản cài đặt của NodeJS trên trang chủ của NodeJS (v10.14.1 LTS) Bước 2: Chạy file cài đặt, làm theo các hướng dẫn trong tiến trình

Bước 3: Chọn đường dẫn cài đặt cho NodeJS

Bước 4: Chọn các component để cài đặt, khuyến khích chọn tất cả các bộ công cụ đi

kèm

Bước 5: Nhấn Install để bắt đầu tiến trình cài đặt

Bước 6: Trình cài đặt hoàn tất, khởi động lại máy tính để hoàn tất [6]

2.7.2 Cài đặt Typescript và Angular

Bước 1: Cài đặt Typescript bằng lệnh npm install -g typescript và sau đó kiểm tra phiên bản Typescript cài đặt thành công bằng lệnh tsc -v

Bước 2: Cài đặt Angular-cli, một bộ công cụ sinh code để tạo kiến trúc khung sườn

cho một ứng dụng Angular 10 hoàn chỉnh Cài đặt Angular-cli bằng lệnh tải package npm install -g angular-cli, và kiểm tra phiên bản đã cài đặt bằng lệnh ng -v

Bước 3: Tạo một Project Angular 10 bằng Angular-cli thông qua lệnh ng new

project-name [5]

2.8 Tổng quan về React Native

React native là một công cụ giúp chúng ta lập trình đa nền tảng để tạo ra các ứng dụng trên môi trường native Nó là một framework mã nguồn mở được phát triển bởi Facebook, cho phép bạn sử dụng Javascript để phát triển phần mềm trên điện thoại di động Android và IOS React native cũng giống như React vậy chúng sử dụng các native components thay vì các web components Vì vậy để hiểu về cấu trúc của React native chúng ta cần phải có các kiến thức cơ bản với các khái niệm cơ bản của React như là JSX, components, props hay là state

Một số lợi ích của React Native:

● Khả năng tái sử dụng code và các components đã được phát triển sẵn

● Có một cộng đồng developers hùng hậu

● Sự tuyệt vời của Live and Hot reloading

● Tiết kiệm effort khi có thể code 1 mà có thể run cho cả IOS và Android [7]

2.9 Môi trường phát triển React Native

React Native sử dụng JavaScript để phục vụ cho quá trình phát triển ứng dụng di động

Môi trường để phát triển ứng dụng angular cần có:

React Native có 2 loại component: Funtional (Stateless) và Class (Stateful)

2.10.1.1 Functional (Stateless) Components

Functional components cũng được nói với một cái tên là stateless components bởi vì chúng ta không thể làm nhiều thứ phức tạp như quản lý React State (data) hoặc phương thức life-cycle trong functional components Tuy nhiên, React giới thiệu React Hooks trong versions 16.8, giờ nó cho phép chúng ta sử dụng state và những features khác trong functional components

2.10.1.2 Class (Stateful) Components

Class Components phức tạp hơn functional components ở chỗ nó còn có: phương thức khởi tạo, life-cycle, hàm render() và quản lý state (data)

2.10.3 Props

Props là viết tắt của Properties Một điều mà bạn cần phải nhớ khi sử dụng props đó

là không bao giờ nên thay đổi giá trị của nó, hay nói cách khác, đây là một dữ liệu immutable Các component nhận props từ component cha Bạn không được thay đổi giá trị của props trong các component này mà chỉ được phép đọc giá trị ra thôi Trong React thì dữ liệu sẽ đi theo một chiều, có nghĩa là từ component cha => các component con Bạn có thể tạo ra component sử dụng props Ý tưởng của props đó

là việc trừu tượng hoá các component để có thể sử dụng được ở nhiều chỗ khác nhau trong app

2.10.3 State

State thì hoạt động khác với props state là dữ liệu nội bộ của một Component, trong khi props là dữ liệu được truyền cho Component Chính vì vậy chúng ta hoàn toàn có thể thay đổi state, và coi nó là một kiểu dữ liệu mutable Tuy vậy, hãy nhớ rằng đừng bao giờ thay đổi trực tiếp biến this.state Thay vào đó hãy dùng hàm setState để cập nhật giá trị Sở dĩ chúng ta cần dùng hàm này là do nó sẽ kích hoạt việc render lại component và tất cả component con nằm trong nó, còn thay đổi this.state thì không Còn một vấn đề nữa, đó là setState chạy bất đồng bộ, vậy nên nếu bạn tiến hành đọc

ra giá trị state ngay sau khi setState thì giá trị sẽ chưa được cập nhật liền vì đây là hàm bất đồng bộ

2.10.4 Hook

Hooks là các hàm mà cho phép bạn “hook into (móc vào)” trạng thái của React và các tính năng vòng đời từ các hàm components Hooks không hoạt động bên trong classes — chúng cho phép bạn sử dụng React không cần class

2.10.5 Effect Hook

Effect Hook, useEffect, thêm khả năng để thực hiện side effects từ các components dạng hàm Nó phục vụ cùng mục đích như componentDidMount, componentDidUpdate, và componentWillUnmount trong React classes, nhưng thống nhất lại trong một API duy nhất [9]

2.10.6 Life Circle

React Native cho phép định nghĩa các component như class hoặc function Component định nghĩa như class cung cấp nhiều tính năng, để khai báo 1 React component cần extend Component

Để view hiển thị lên màn hình, phương thức bắt buộc bạn cần gọi đó là render() Mỗi component có các method lifecycle cho phép bạn có thể override để chạy code hiển thị lên màn hình mobile Lifecycle thường được chia làm 3 phần chính:

2.11 Cài đặt môi trường React native

Bước 1: Cài đặt Chocolately

Bước 2: Cài đặt React native CLI

Bước 3: Cài đặt Android Studio

Bước 4: Cài đặt Android SDK

Bước 5: Cấu hình ANDROID_HOME environment thay giá trị variable value bằng đường dẫn đến file SDK

CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU

CẦU 3.1 Khảo sát hiện trạng

3.1.1 Khảo sát nhu cầu người dùng

Ngày nay với sự ra đời của các trang web hướng dẫn tự học và thi thử Toeic, các clip hướng dẫn của các Youtuber, các trang web thay đổi về chức năng và cả giao diện để đáp ứng nhu cầu học mọi lúc, mọi nơi của người dùng Vì vậy, các website liên quan đến sách hiện nay phải đáp ứng được về cả giao diện đẹp, dễ thao tác và chức năng

đa dạng dễ sử dụng, tiện lợi

○ Trang giới thiệu cung cấp thông tin rõ ràng

○ Cách phối màu hợp lý, đẹp

○ Bố cục rõ ràng, thể hiện đầy đủ thông tin về các khóa học

● Nhược điểm :

○ Giao diện quá nhiều chữ gây rối mắt

○ Giá khóa học khá đắt so với mặt bằng chung

○ liên kết được với nhiều công ty và đại học danh tiếng

○ Có tín chỉ sau mỗi khóa học

● Nhược điểm :

○ Giao diện quá sơ sài

○ Thanh tiêu đề không đủ yêu cầu, khó khăn cho người mới

● SkillShare: https://www.skillshare.com/

Hình 3.3 Khảo sát trang SkillShare

● Ưu điểm :

○ Giao diện đơn giản dễ tiếp cận với người dùng

○ Đa dạng về số lượng hastag và các bài giảng

○ Người dùng có thể đăng ký premium để nhận được nhiều ưu đãi

○ Cho phép xem 1 số lượng bài giảng trước khi đăng ký mua khóa học

● Nhược điểm :

○ Sau khi đăng ký người dùng phải tốn phí để trải nghiệm dịch vụ tốt hơn

○ Số lượng khóa học miễn phí còn khá ít

○ Giao diện web còn chưa thực sự hấp dẫn

○ Chưa có tính năng tìm kiếm nâng cao

● Kết luận

○ Trang Udemy đẹp hơn trang Coursera, SkillShare về mặt giao diện

○ Trang Coursera liên kết được với nhiều công ty và đại học danh tiếng

○ Giao diện Udemy quá nhiều chữ gây khó chịu còn trang Coursera thì quá ít chữ tạo quá nhiều khoảng trống trắng, trình bày danh sách khóa học và trang chi tiết khóa học SkillShare chưa tốt

○ Giá khóa học trang Udemy khá mắc so với mặt bằng chung còn bên

3.1.3 Tổng kết sau khi khảo sát

Tổng kết: Người dùng có nhu cầu về trang học trực tuyến với các nội dung được phân

bố rõ ràng theo hastag và level để tiện dụng trong việc theo dõi, tìm kiếm khóa học Các khóa học cần được đề xuất theo lộ trình phù hợp, cho phép đánh giá và bình luận góp ý, tương tác trực tiếp với giảng viên thông qua comment, nhắn tin và forum để giải quyết khúc mắc trong quá trình học; các bài giảng có thể mở khóa 1 phần trước khi thanh toán đăng ký giúp người dùng lựa chọn khóa học phù hợp với bản thân Ngoài ra cần có các bài kiểm tra giúp người dùng củng cố kiến thức, có các achievement giúp khích lệ tinh thần người học Cho phép đăng ký trở thành giảng viên với thao tác đơn giản, các tác vụ quản lý khóa học, nội dung học, bộ câu hỏi và

đề thi dễ tiếp cận và sử dụng hỗ trợ tốt cho việc giảng dạy, việc phân chia thu nhập với giảng viên hợp lý => Nhóm quyết định lựa chọn framework Angular vì phân chia theo các module và service giúp phân nhóm giao diện, chức năng theo role người dùng dễ giàng, API sử dụng ASP.NET Core vì tính dễ tiếp cận, hỗ trợ tốt với NuGet Package,MS SQLServer cho việc quản lý dữ liệu vì hỗ trợ tốt cho sử dụng cục bộ (local) và khá tốt khi host, React Native phù hợp cho UI đẹp mắt cũng như ổn định trong xây dựng chức năng

3.2 Xác định yêu cầu

3.2.1 Lược đồ usecase

3.2.1.1 Lược đồ usecase tổng quát (Web)

Hình 3.4 Sơ đồ use case tổng quát (Web)

3.2.1.2 Lược đồ usecase actor User (Web)

Hình 3.5 Sơ đồ use case actor User (Web)

3.2.1.3 Lược đồ usecase actor User (Mobile)

Hình 3.6: Sơ đồ Usecase actor User (Mobile)

3.2.1.4 Lược đồ usecase actor Admin (Web)

Hình 3.7 Sơ đồ Usecase actor Admin (Web) 3.2.2 Bảng Requirement dành cho Usecase

Bảng 3.1: Bảng yêu cầu dành cho Usecase Desktop

tài khoản trên hệ thống

khoản trên hệ thống

nhập vào hệ thống

4 Tìm kiếm khóa học UC_04 Người dùng chưa có

tài khoản hoặc đã đăng nhập vào hệ thống

5 Xem thông tin khóa học UC_05 Người dùng đã đăng

nhập hoặc người dùng chưa đăng nhập

5.1 Đăng ký khóa học UC_06 Người dùng đã đăng

nhập với quyền giảng viên

6.1 Tạo nội dung bài học UC_11 Người dùng đã đăng

nhập với quyền giảng viên

nhập với quyền giảng viên

7.2 Xóa bình luận UC_15 Người dùng đã đăng

nhập vào hệ thống

8

Trở thành giảng viên UC_16 Người dùng đã đăng

nhập với quyền học viên

9

Tạo phòng học trực tuyến UC_17 Người dùng đã đăng

nhập với quyền giảng viên

Quản lý số dư giảng viên UC_22 Người dùng đã đăng

nhập với quyền quản trị viên

15

Quản lý tài khoản trang web UC_23 Người dùng đã đăng

nhập với quyền quản trị viên

15.1 Kích hoạt tài khoản bị vô hiệu hóa UC_24 Người dùng đã đăng

nhập với quyền quản trị viên

15.2 Vô hiệu hóa tài khoản đang hoạt

động

UC_25

Người dùng đã đăng nhập với quyền quản trị viên

Bảng 3.2: Bảng yêu cầu danh cho Usecase Mobile

tài khoản trên hệ thống

khoản trên hệ thống

nhập vào hệ thống

tài khoản hoặc đã đăng nhập vào hệ thống

5 Xem thông tin khóa học UCM_05 Người dùng đã đăng

nhập hoặc người dùng chưa đăng nhập

5.1 Đăng ký khóa học UCM_06 Người dùng đã đăng

3.2.3 Đặc tả Usecase

3.2.3.1 Đặc tả Usecase actor User (Web)

Bảng 3.3: Đặc tả Usecase Đăng ký

USE CASE_UC_01

Use Case No UC_01 Use case version 1.0

Use case name Đăng ký

● Thành công: Người dùng đăng ký được với hệ thống

● Thất bại: Hệ thống hiển thị lỗi

Main Success Scenario:

1 Người dùng mở ứng dụng lên Hệ thống hiển thị màn hình “Đăng

ký” Hệ thống yêu cầu người dùng nhập vào các thông tin cá nhân và

chuyển qua nhập: tài khoản(text) và mật khẩu (text)

2 Người dùng nhập thông tin hệ

2 -Thông tin đăng ký chưa hợp lệ

(thiếu trường thông tin, sai định

dạng dữ liệu)

-Nhập xác nhận mật khẩu sai

Hệ thống sẽ hiện thông báo (alert) và

có warning dòng dữ liệu cho người dùng

Relationships:

Business Rules:

● Tên đăng nhập: không được để trống

● Mật khẩu: không được để trống, chiều dài tối thiểu 8 ký tự, phải bao gồm 1 chữ cái viết hoa, chữ số và 1 ký tự đặc biệt

● Email: có định dạng @gmail.com

● Trường họ tên, số điện thoại không được để trống

Bảng 3.4: Đặc tả Usecase Đăng nhập

USE CASE_UC_02

Use Case No UC_02 Use case version 1.0

Use case name Đăng nhập

Author Châu Huỳnh Phước Toàn