(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh

(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh(Đồ án tốt nghiệp) Xây dựng hệ thống hỗ trợ học tiếng anh

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO



ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG HỆ THỐNG HỖ TRỢ HỌC TIẾNG

ANH

SVTH: LUYỆN NGỌC THANH

NGUYỄN THANH LẬP MSSV: 17110221

17110169 Khóa: 2017 Ngành: CÔNG NGHỆ THÔNG TIN GVHD: THS LÊ THỊ MINH CHÂU

TP Hồ Chí Minh, tháng 07 năm 2021

LỜI CẢM ƠN

Trong học kỳ này, được sự phân công của quý thầy cô khoa Đào tạo chất lượng cao, Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh, nhóm đã hoàn thành khóa luận tốt nghiệp “XÂY DỰNG HỆ THỐNG HỖ TRỢ HỌC TIẾNG ANH”

Nhóm xin bày tỏ lòng biết ơn chân thành và sâu sắc nhất đến giảng viên hướng dẫn: Thạc sĩ Lê Thị Minh Châu đã tận tình hướng dẫn nhóm trong suốt quá trình nghiên cứu và thực hiện đề tài Nhóm xin gửi lời cảm ơn đến quý thầy cô trong khoa Đào Tạo Chất Lượng Cao, quý thầy cô trong khoa Công Nghệ Thông Tin đã trang bị cho nhóm những kiến thức và kinh nghiệm quý giá trong quá trình học tập và nhiệt tình giúp đỡ nhóm thực hiện đề tài này

Nhóm cũng xin chân thành cảm ơn phòng thư viện đã cung cấp tài liệu và tạo mọi điều kiện thuận lợi để nhóm hoàn thành khóa luận tốt nghiệp này Mặc dù đã có nhiều cố gắng, nhưng do thời gian có hạn, trình độ, kỹ năng của bản thân còn nhiều hạn chế nên chắc chắn không tránh khỏi những hạn chế, thiếu sót Rất mong được sự đóng góp, chỉ bảo, bổ sung thêm của thầy cô và các bạn

Nhóm xin chân thành cảm ơn

Thành phố Hồ Chí Minh, Ngày 20 tháng 07 năm 2021

Sinh viên thực hiện Nguyễn Thanh Lập Luyện Ngọc Thanh

TÓM TẮT

Trong bối cảnh cuộc cách mạng công nghiệp 4.0 đang đi vào cao trào thì vai trò của website và ứng dụng ngày càng quan trọng Thậm chí một số doanh nghiệp phát triển đến 80 – 90% doanh thu từ website và ứng dụng Website và ứng dụng không những đã trở nên rất phổ biến mà còn là công cụ không thể thiếu đối với mỗi trung trâm và cá nhân hoạt động học tập hiện nay Đây là phương thức truyền đạt kiến thức nhanh chóng và tiếp cận khá hiệu quả đối với người dùng Internet để học tập Website

và ứng dụng được đánh giá là công cụ dễ dàng để nâng cao trình độ kiến thức cải thiện khả năng học tập Mặt khác, website và ứng dụng chính là bước tiến quan trọng

và hiệu quả trong việc thực hiện chiến lược dạy online Đối với cá nhân, sử dụng các trang website và ứng dụng là cách đơn giản và nhanh nhất để có thể nắm được các kiến thức, cải thiện trình độ tự học của bản thân và tiết kiệm thời gian học

MỤC LỤC

LỜI CẢM ƠN i

TÓM TẮT ii

MỤC LỤC iii

DANH MỤC CÁC TỪ VIẾT TẮT vii

MỤC LỤC HÌNH viii

MỤC LỤC BẢNG xi

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

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

1.2 Mục tiêu nghiên cứu 1

1.3 Khảo sát hiện trạng 1

1.3.1 Duolingo 1

1.3.2 Busuu 7

1.4 Mô tả tổng thể 12

1.4.1 Chức năng sản phẩm 12

1.4.2 Các lớp người dùng và đặc điểm người dùng 12

1.4.3 Môi trường hoạt động 12

1.4.4 Ràng buộc 13

1.5 Tính cấp thiết của đề tài 13

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

2.1 .NET core 14

2.1.1 Giới thiệu về NET core 14

2.1.2 Đặc điểm của NET core 14

2.1.3 Thành phần của NET core 14

2.2 ReactJs 15

2.2.1 Giới thiệu 15

2.2.2 Thành phần chính của ReactJs 15

2.2.3 Lợi ích khi sử dụng ReactJs 15

2.3 React Native 16

2.3.1 Giới thiệu về React Native 16

2.3.2 Cách hoạt động của React Native 16

2.3.3 Ưu điểm của React Native 16

2.4 SQL Server 16

2.4.1 Giới thiệu về SQL Server 16

2.4.2 Tại sao lại sử dụng SQL trong thiết kế Website 17

CHƯƠNG 3: PHÂN TÍCH VÀ MÔI TRƯỜNG HÓA YÊU CẦU 18

3.1 Phân tích yêu cầu chức năng 18

3.1.1 Chức năng quản lý quiz 18

3.1.2 Chức năng quản lý lộ trình học 18

3.1.3 Chức năng quản lý bài học 18

3.1.4 Chức năng quản lý câu hỏi 19

3.1.5 Chức năng quản lý exam 19

3.1.6 Chức năng học với từ vựng 20

3.1.7 Chức năng tra cứu từ vựng 20

3.1.8 Chức năng thảo luận 20

3.1.9 Chức năng làm exam 21

3.1.10 Chức năng làm quiz 21

3.1.11 Chức năng nhắn tin 22

3.2 Phân tích yêu cầu phi chức năng 22

3.2.1 Khả năng sử dụng 22

3.2.2 Độ khả dụng 22

3.2.3 Độ tin cậy 22

3.2.4 Hiệu suất 23

3.2.5 Khả năng hỗ trợ 23

3.2.6 Ràng buộc thiết kế 23

3.3 Mô hình hóa yêu cầu 24

3.3.1 Usecase tổng quát 24

3.3.2 Mô tả sơ đồ usecase 24

3.3.3 Đặc tả một số USE CASE chính 27

3.4 Sơ đồ kiến trúc hệ thống 36

3.5 Lược đồ tuần tự 36

3.5.1 Làm exam 36

3.5.2 Học theo lộ trình 38

3.5.3 Đăng nhập với social account 39

3.5.4 Gửi tin nhắn 40

3.5.5 Thêm bài viết 40

3.5.6 Làm quiz 41

3.5.7 Theo dõi 42

3.6 Sơ đồ lớp 43

CHƯƠNG 4: THIẾT KẾ WEBSITE 46

4.1 Thiết kế cơ sở dữ liệu 46

4.1.1 Account 47

4.1.2 Exam 48

4.1.3 Quiz 48

4.1.4 Question 49

4.1.5 Post 50

4.1.6 Comment 50

4.1.7 Word 51

4.1.8 QuizHistory 51

4.1.9 ExamHistory 52

4.1.10 Route 53

4.1.11 Section 53

4.1.12 Script 54

4.1.14 PostImage 55

4.1.15 Memory 55

4.1.16 Notification 56

4.1.17 Message 56

4.1.18 BoxChat 57

4.2 Thiết kế giao diện 58

4.2.1 Screen Flow của ứng dụng web phía người học 58

1.2.2 Screen Flow của ứng dụng mobile app phía người học 78

1.2.3 Screen Flow của ứng dụng web phía quản trị viên 92

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 105

5.1 Cài đặt 105

5.1.1 Môi trường lập trình 105

5.1.2 Cài đặt môi trường phát triển 105

5.1.3 Back-end 105

5.1.4 Front-end 107

5.1.5 Mobile app 109

5.2 Kiểm thử 110

5.2.1 Test case làm exam 110

5.2.2 Test case học theo lộ trình 111

5.2.3 Test case học theo lộ trình 112

5.2.4 Test case Đăng nhập 113

5.2.5 Test case thích bình luận 114

CHƯƠNG 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 116

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

6.2 Ưu điểm 116

6.3 Hạn chế 116

6.4 Hướng phát triển 117

CHƯƠNG 7: TÀI LIỆU THAM KHẢO 118

DANH MỤC CÁC TỪ VIẾT TẮT SQL: Structured Query Language

API: Application Programming Interface

IIS: Internet Information Services

MỤC LỤC HÌNH

Hình 1.1: Các bài học theo chủ đề trên Duolingo 3

Hình 1.2: Học từ vựng trên Duolingo 4

Hình 1.3: Luyện tập trên Duolingo 5

Hình 1.4: Forum thảo luận trên Duolingo 5

Hình 1.5: Tra cứu từ vựng trên Duolingo 6

Hình 1.6: Luyện nghe trên Duolingo 6

Hình 1.7: Các bài học theo chủ đề trên Busuu 8

Hình 1.8: Học từ vựng trên Busuu 9

Hình 1.9: Luyện tập trên Busuu 10

Hình 1.10: Forum thảo luận 11

Hình 3.1: Usecase tổng quát 24

Hình 3.2: Sơ đồ kiến trúc hệ thống 36

Hình 3.3: Sequence Diagram làm exam 38

Hình 3.4: Sequence Diagram học theo lộ trình 39

Hình 3.5: Sequence Diagram đăng nhập với social account 39

Hình 3.6: Sequence Diagram gửi tin nhắn 40

Hình 3.7: Sequence Diagram thêm bài viết 41

Hình 3.8: Sequence Diagram làm quiz 42

Hình 3.9: Sequence Diagram theo dõi 43

Hình 3.10: Class diagram 43

Hình 3.11: Sơ lược class diagram 44

Hình 3.12: Sơ lược class diagram 45

Hình 4.1: Sơ đồ ERD 46

Hình 4.2: Screen Flow của ứng dụng web phía người học 58

Hình 4.3: SCL001 List Section Screen 59

Hình 4.4: SCL002 List FlashCard Screen 61

Hình 4.5: SCL003 FlashCard Screen 63

Hình 4.6: SCL004 List Exam Screen 65

Hình 4.7: SCL005 Do Exam Screen 67

Hình 4.8: SCL006 Learn Section Screen 69

Hình 4.9: SCL007 Vocabulary Learning Progress Screen 71

Hình 4.10: SCL008 Forum Screen 72

Hình 4.11: SCL009 Detail Discussion Screen 74

Hình 4.12: SCL010 Chat Screen 76

Hình 4.13: Screen Flow của ứng dụng mobile app phía người học 78

Hình 4.14: SCLA001 Home Screen 79

Hình 4.15: SCLA002 Calendar Screen 81

Hình 4.16: SCLA003 Create Reminder Screen 83

Hình 4.17: SCLA004 List Section Screen 84

Hình 4.18: SCLA005 Section Screen 86

Hình 4.19: SCLA006 List Quiz Screen 88

Hình 4.20: SCLA007 Do Quiz Screen 89

Hình 4.21: SCLA008 FlashCard Screen 91

Hình 4.22: Screen Flow của ứng dụng web phía quản trị viên 92

Hình 4.23: SCA001 Manage Quiz/Exam Screen 93

Hình 4.24: SCA002 Manage Study Route Screen 95

Hình 4.25: SCA003 Create Study Route Screen 97

Hình 4.26: SCA004 Manage Bank Question Screen 97

Hình 4.27: SCA005 Create Match Word Question Screen 99

Hình 4.28: SCA006 Manage Section Screen 101

Hình 4.29: SCA007 Censorship Quiz/Exam Screen 103

Hình 5.1: Trang tải Node.js 105

Hình 5.2: Cài đặt môi trường 106

Hình 5.3: Clone backend repo 106

Hình 5.4: Restore project 106

Hình 5.5: Truy cập vào thư mục Engrisk 106

Hình 5.6: Khỏi chạy server 107

Hình 5.7: Kết quả chạy backend 107

Hình 5.8: Clone project với nhánh FrontEnd 107

Hình 5.9: Truy cập vào thư mục EngriskApi 107

Hình 5.10: Cài đặt môi trường 108

Hình 5.11: Cấu hình đường dẫn API 108

Hình 5.12: Khởi chạy ứng dụng 108

Hình 5.13: Kết quả chạy project front-end 108

Hình 5.14: Clone project với nhánh DevApp 109

Hình 5.15: Truy cập vào thư mục EngriskApi 109

Hình 5.16: Cài đặt môi trường 109

Hình 5.17: Cấu hình đường dẫn API 109

Hình 5.18: Khởi chạy ứng dụng 110

Hình 5.19: Kết quả chạy project mobile app 110

MỤC LỤC BẢNG

Bảng 1.1: Môi trường hoạt động 13

Bảng 3.1: Yêu cầu chức năng quản lý quiz 18

Bảng 3.2: Yêu cầu chức năng quản lý tài khoản 18

Bảng 3.3: Yêu cầu chức năng quản lý tài khoản 19

Bảng 3.4: Yêu cầu chức năng nhắn tin với chatbot 19

Bảng 3.5: Yêu cầu chức năng quản lý exam 20

Bảng 3.6: Yêu cầu chức năng học với flashcard 20

Bảng 3.7: Yêu cầu chức năng tra cứu từ vựng 20

Bảng 3.8: Yêu cầu chức năng bình luận 21

Bảng 3.9: Yêu cầu chức năng làm exam 21

Bảng 3.10: Yêu cầu làm quiz 22

Bảng 3.11: Yêu cầu chức năng nhắn tin 22

Bảng 3.12: Mô tả sơ đồ usecase 27

Bảng 3.13: USE CASE - OLMS_UC_32 28

Bảng 3.14: USE CASE - OLMS_UC_27 28

Bảng 3.15: USE CASE - OLMS_UC_12 29

Bảng 3.16: USE CASE - OLMS_UC_13 30

Bảng 3.17: USE CASE - OLMS_UC_04 31

Bảng 3.18: USE CASE - OLMS_UC_25 31

Bảng 3.19: USE CASE - OLMS_UC_24 32

Bảng 3.20: USE CASE - OLMS_UC_14 33

Bảng 3.21: USE CASE - OLMS_UC_17 34

Bảng 3.22: USE CASE - OLMS_UC_15 34

Bảng 3.23:USE CASE - OLMS_UC_16 35

Bảng 3.24: Luồng xử lý sequence diagram làm exam 37

Bảng 3.25: Luồng xử lý sequence diagram học theo lộ trình 38

Bảng 3.26: Luồng xử lý sequence diagram đăng nhập với social account 39

Bảng 3.27: Luồng xử lý sequence diagram gửi tin nhắn 40

Bảng 3.28: Luồng xử lý sequence diagram thêm bài viết 41

Bảng 3.29: Luồng xử lý sequence diagram làm quiz 41

Bảng 3.30: Luồng xử lý sequence diagram theo dõi 43

Bảng 4.1: Mô tả khái quát về các class 47

Bảng 4.2: Account 48

Bảng 4.3: Exam 48

Bảng 4.4: Quiz 49

Bảng 4.5: Questions 49

Bảng 4.6: Post 50

Bảng 4.7: Comments 50

Bảng 4.8: Word 51

Bảng 4.9: Histories 52

Bảng 4.10: ExamHistory 52

Bảng 4.11: Route 53

Bảng 4.12: Section 54

Bảng 4.13: Script 54

Bảng 4.14: Answers 55

Bảng 4.15: Postimages 55

Bảng 4.16: Memories 56

Bảng 4.17: Notification 56

Bảng 4.18: Message 57

Bảng 4.19: BoxChats 57

Bảng 4.20: Screen Flow của ứng dụng web phía người học 58

Bảng 4.21: SCL001 List Section Screen 61

Bảng 4.22: SCA002 List FlashCard Screen 63

Bảng 4.23: SCL003 FlashCard Screen 65

Bảng 4.24: SCL004 List Exam Screen 66

Bảng 4.25: SCL005 Do Exam Screen 68

Bảng 4.26: SCL006 Learn Section Screen 70

Bảng 4.27: SCL007 Vocabulary Learning Progress Screen 72

Bảng 4.28: SCL008 Forum Screen 73

Bảng 4.29: SCL009 Detail Discussion Screen 75

Bảng 4.30: SCL010 Chat Screen 77

Bảng 4.31: Screen Flow của ứng dụng mobile app phía người học 78

Bảng 4.32: SCLA001 Home Screen 80

Bảng 4.33: SCLA002 Calendar Screen 82

Bảng 4.34: SCLA003 Create Reminder Screen 84

Bảng 4.35: SCLA004 List Section Screen 85

Bảng 4.36: SCLA005 Section Screen 87

Bảng 4.37: SCLA006 List Quiz Screen 88

Bảng 4.38: SCLA007 Do Quiz Screen 90

Bảng 4.39: SCLA008 FlashCard Screen 92

Bảng 4.40: Screen Flow của ứng dụng web phía quản trị viên 93

Bảng 4.41: SCA001 Manage Quiz/Exam Screen 94

Bảng 4.42: SCA002 Manage Study Route Screen 96

Bảng 4.43: SCA003 Create Study Route Screen 97

Bảng 4.44: SCA004 Manage Bank Question Screen 99

Bảng 4.45: SCA005 Create Match Word Question Screen 101

Bảng 4.46: SCA006 Manage Section Screen 102

Bảng 4.47: SCA007 Censorship Quiz/Exam Screen 104

Bảng 5.1: Test case làm exam 111

Bảng 5.2: Test case học theo lộ trình 112

Bảng 5.3: Test case học theo lộ trình 113

Bảng 5.4: Test case đăng nhập 114

Bảng 5.5: Test case thích bình luận 115

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

YÊU CẦU 1.1 Lý do chọn đề tài

Ở thời điểm hiện nay, khi công nghệ đang vô cùng phát triển cùng với cuộc cách mạng 4.0 đã làm thay đổi cách chúng ta tiếp cận với các nguồn thông tin mới, và một trong số đó là việc chúng ta chuyển từ việc học tiếng anh từ những cuốn sách bìa cứng sang những ứng dụng hỗ trợ học tiếng anh online

Tiếng anh là ngôn ngữ chung của toàn cầu nó giúp chúng ta tiếp cận thêm kiến thức, nền văn hóa mới trên khắp thế giới, tạo ra nhiều cơ hội việc làm với các mối quan hệ Chính vì thế việc học tiếng anh là vô cùng quan trọng đối với mọi người Việc học tiếng anh đối với một số người làm rất khó khăn vì phải học trên những cuốn sách toàn chữ tạo nên cảm giác nhàm chán không thu hút người học

Với các hệ thống học tiếng anh thì khác nó có những nội dung học phong phú,

sử dụng hình ảnh màu sắc vô cùng sinh động nhằm thu hút và tạo sự hứng thú cho người học Người học có thể tương tác, thực hành giao tiếp như thực tế Các hệ thống học tiếng anh sẽ giúp cho người học dễ dàng cải thiện các kỹ năng một cách nhanh chóng và hiệu quả nhất

1.2 Mục tiêu nghiên cứu

• Xây dựng một hệ thống hỗ trợ học tiếng Anh mang đến cho người dùng sự tiện lợi, thú vị trong việc học tiếng Anh

• Tìm hiểu về các chức năng chính của một hệ thống hỗ trợ học ngôn ngữ trực tuyến (cụ thể): Học từ vựng, luyện nghe, làm các bài quiz, làm bài kiểm tra Cách cấu hình và cài đặt các chức năng này cho hệ thống hỗ trợ học tiếng Anh

• Cấu hình và cài đặt một hệ thống hỗ trợ học tiếng Anh bao gồm ứng dụng website và ứng dụng mobile

• Nghiên cứu và ứng dụng Machine Learning vào việc ngăn chặn các hành vi spam (Ví dụ): Spam bình luận, spam bài viết, spam làm bài kiểm tra, …

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

1.3.1 Duolingo

1.3.1.1 Giới thiệu

Duolingo là một trang giúp chúng ta học ngoại ngữ miễn phí hàng đầu trên thế giới hiện nay" Có cả giao diện sử dụng bằng tiếng Việt giúp mọi người dễ dàng sử dụng Khẩu hiệu của Duolingo là: Mọi người đều có quyền được hưởng giáo dục chất lượng cao miễn phí

Ứng dụng có những tính năng đầy đủ cho phép luyện tập với cái bài tập đơn giản từ đó độ khó tăng dần, với các chủ đề khác nhau giúp người dùng cải thiện các kỹ năng, kho từ vựng đầy đủ Website thống kê tiến độ học của người dùng, nhắc nhở luyện tập hằng ngày Ngoài ra còn có bảng thống kê tăng tính cạnh tranh giữa các người dùng

1.3.1.2 Các chức năng chính

- Các bài học theo từng chủ đề

Hình 1.1: Các bài học theo chủ đề trên Duolingo

- Học từ vựng

Hình 1.2: Học từ vựng trên Duolingo

- Luyện tập

Hình 1.3: Luyện tập trên Duolingo

- Forum thảo luận

Hình 1.4: Forum thảo luận trên Duolingo

- Tra cứu từ vựng

Hình 1.5: Tra cứu từ vựng trên Duolingo

- Các bài học được hiển thị theo dạng danh sách card kèm hình ảnh, giúp bài học sinh động dễ hiểu

- Xem lại được bài học sau khi hoàn thành

- Trang web không có quảng cáo, tăng trải nghiệm người dùng

- Có thể sử dụng trên điện thoại

- Tốc độ phản hồi trang nhanh

- Có thể đăng nhập bằng facebook/google

1.3.1.3.2 Hạn chế

- Chưa có quy định thời gian trả lời các câu hỏi

- Chưa có các bài exam như toeic, …

- Chưa có chức năng hiển thị kết quả các bài exam

1.3.2 Busuu

1.3.2.1 Giới thiệu

Busuu là mạng xã hội học ngôn ngữ lớn nhất thế giới, cung cấp 12 khóa học ngôn ngữ khác nhau trên trang web và điện thoại di động cho hơn 100 triệu học viên trên toàn cầu Học viên có thể đăng ký miễn phí hoặc đăng ký quyền thành viên Premium để mở khóa những tính năng cao cấp như bài học ngữ pháp, Chế

độ ngoại tuyến, chứng chỉ ngôn ngữ McGraw-Hill Education hoặc Bộ luyện từ vựng thích ứng

1.3.2.2 Các chức năng chính

- Các bài học theo từng chủ đề

Hình 1.7: Các bài học theo chủ đề trên Busuu

- Học từ vựng

Hình 1.8: Học từ vựng trên Busuu

- Luyện tập

Hình 1.9: Luyện tập trên Busuu

- Forum thảo luận

Hình 1.10: Forum thảo luận

1.3.2.3 Đánh giá website

1.3.2.3.1 Ưu điểm

- Các chức năng của trang web được thể hiện rõ ràng, phân theo cụm chức năng nên dễ dàng sử dụng, tìm kiếm

- Có các bài quiz cho người học làm với các chủ đề khác nhau

- Các bài học được hiển thị theo dạng danh sách card kèm hình ảnh, giúp bài học sinh động dễ hiểu

- Trang web không có quảng cáo, tăng trải nghiệm người dùng

- Có thể sử dụng trên điện thoại

- Có thể đăng nhập bằng facebook/google

1.3.2.3.2 Hạn chế

- Chưa có chức năng tra cứu từ vựng

- Chưa có chức năng học bằng flashcard

- Chưa có chức năng làm bài exam để kiểm tra trình độ

• Trao đổi và thảo luận

• Cập nhật thông tin cá nhân

• Các tính năng thời gian thực

• Theo dõi người dùng khác, nhận thông báo từ họ

• Đóng góp các bản dịch, ví dụ cho từ vựng

• Tạo, chia sẻ các bài quiz, exam

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

• Quản lý từ vựng

• Quản lý quiz

• Quản lý exam

• Quản lý thông báo

• Quản lý bài viết

• Quản lý bài học

• Quản lý lộ trình học

1.4.2 Các lớp người dùng và đặc điểm người dùng

Để sử dụng hệ thống người dùng cần có tài khoản Có 3 loại tài khoản:

 Tài khoản của người quản lý: Quản lý hệ thống, tài khoản người dùng

 Tài khoản của nhân viên: Quản lý nội dung học, quản lý form, quản lý exam, cập nhật từ vựng, quản lý quiz

 Tài khoản của người học: Học theo lộ trình, học từ vựng với flashcard, tra cứu

từ vựng, làm quiz, làm exam

1.4.3 Môi trường hoạt động

Hệ điều hành Windows 10 Hệ điều hành và nền tảng để

phát triển Tài nguyên Net Core 3.1

ReactJs React Native

Xây dựng các WebApi Framework front-end để phát triển ứng dụng web Framework để phát triển ứng

dụng mobile Công cụ thiết kế

liệu của website Quản lý source Github Lưu trữ và kiểm soát source Trình duyệt web Opera GX, Cốc Cốc Trình duyệt thử nghiệm

Bảng 1.1: Môi trường hoạt động

1.4.4 Ràng buộc

Môi trường hoạt động phải kết nối internet

1.5 Tính cấp thiết của đề tài

Tiếng Anh đã và đang là một ngôn ngữ thông dụng nhất thế giới, việc giỏi tiếng Anh sẽ hỗ trợ rất nhiều trong cuộc sống và công việc, tuy nhiên việc học tiếng anh cũng không phải là dễ dàng, với đặc thù là phần từ vựng, chia thì, phát âm, … và đặc thù là người Việt Nam rất ngại việc học ngôn ngữ, chính vì vậy việc có các website

và ứng dụng học ngôn ngữ nói chung và tiếng Anh nói riêng là vô cùng cần thiết hiện nay

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 .NET core

2.1.1 Giới thiệu về NET core

.NET Core là một nền tảng phát triển đa mục đích, mã nguồn mở được duy trì bởi Microsoft và cộng đồng NET trên GitHub Đó là nền tảng chéo (hỗ trợ Windows, macOS và Linux) và có thể được sử dụng để xây dựng các ứng dụng thiết bị, đám mây và IoT

2.1.2 Đặc điểm của NET core

Đa nền tảng: Chạy trên các hệ điều hành Windows, macOS và Linux

Nhất quán trên các kiến trúc: có thể chạy mã nguồn với cùng một hành vi trên nhiều kiến trúc hệ thống, bao gồm x64, x86 và ARM

Các công cụ dòng lệnh: Bao gồm các công cụ dòng lệnh dễ sử dụng, có thể được sử dụng để phát triển cục bộ và trong các tình huống tích hợp liên tục Triển khai linh hoạt: có thể cài đặt song song (cài đặt toàn người dùng hoặc toàn hệ thống) Có thể được sử dụng với các container Docker

Tương thích: NET Core tương thích với NET Framework, Xamarin và Mono, thông qua NET Standard

Nguồn mở: Nền tảng NET Core là nguồn mở, sử dụng giấy phép MIT và Apache 2 .NET Core là một dự án NET Foundation

Được hỗ trợ bởi Microsoft: NET Core được Microsoft hỗ trợ, theo Hỗ trợ NET Core

2.1.3 Thành phần của NET core

.NET Core bao gồm các phần sau:

.NET Core runtime: cung cấp một hệ thống kiểu, tải lắp ráp, trình thu gom rác, interop gốc và các dịch vụ cơ bản khác Các thư viện khung NET Core cung cấp các kiểu dữ liệu nguyên thủy, các kiểu thành phần ứng dụng và các tiện ích cơ bản

ASP.NET Core runtime: cung cấp khung để xây dựng các ứng dụng kết nối internet, điện toán đám mây hiện đại, chẳng hạn như ứng dụng web, ứng dụng IoT

và phụ trợ di động

.NET Core SDK và trình biên dịch ngôn ngữ (Roslyn và F #) cho phép trải nghiệm nhà phát triển NET Core

Dotnet command, được sử dụng để khởi chạy các ứng dụng NET Core và các lệnh CLI Nó chọn thời gian chạy và lưu trữ thời gian chạy, cung cấp chính sách tải lắp ráp và khởi chạy các ứng dụng và công cụ

2.2 ReactJs

2.2.1 Giới thiệu

ReactJS được hiểu nôm na là một thư viện trong đó có chứa nhiều JavaScript

mã nguồn mở và cha đẻ của ReactJS đó chính là một ông lớn với cái tên ai cũng biết đó chính là Facebook Mục đích của việc tạo ra ReactJS là để tạo ra những ứng dụng website hấp dẫn với tốc độ nhanh và hiệu quả cao với những mã hóa tối thiểu Và mục đích chủ chốt của ReactJS đó chính là mỗi website khi đã sử dụng ReactJS thì phải chạy thật mượt thật nhanh và có khả năng mở rộng cao và đơn giản thực hiện

2.2.2 Thành phần chính của ReactJs

Redux: Đây có thể gọi là một phần cực kỳ quan trọng đối với ReactJS và không một ai sử dụng mà không biết đến redux Trong một reactJS không bao gồm những module chuyên dụng để xử lý dữ liệu vì thế ReactJS được thiết lập một cách độc lập bằng việc chia nhỏ view thành các component nhỏ để chúng liên kết chặt chẽ với nhau hơn

Sự liên kết và mối quan hệ giữa các component trong ReactJS cần được quan tâm đặc biệt là vì luồng dữ liệu một chiều từ cha xuống con là luồng dữ liệu duy nhất trong một reactJS việc sử dụng luồng dữ liệu một chiều này có một chút khó khăn cho những người mới tìm hiểu sử dụng và ứng dụng vô các dự án tuy nhiên bên cạnh mặt hạn chế vẫn có mặt nổi trội đó chính là ReactJS sẽ phát huy được hết tất cả chức năng vai trò của mình khi sử dụng cơ chế một chiều này vì nó sẽ làm cho các chức năng của view trở nên phức tạp hơn

Virtual Dom: đây là phần mà hầu như những Framework đều sử dụng Virtual dom và sử dụng nó như một ReactJS khi mà virtual dom thay đổi, điều đặc biệt ở đây là chúng ta không cần thao tác trực tiếp trên dom mà vẫn có thể thấy được view và thấy được những thay đổi đó

2.2.3 Lợi ích khi sử dụng ReactJs

• Lợi ích đầu tiên mà ReactJS đó chính là việc tạo ra cho chính bản thân nó một dom ảo, đây là nơi mà các component được tồn tại trên đó

• Lợi ích thứ hai mà ReactJS đem lại đó chính là việc viết các đoạn code JS sẽ trở nên dễ dàng hơn vì nó sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX nghĩa là cú pháp này cho phép ta trộn được giữa code HTML và Javascript

• Có nhiều công cụ phát triển là lợi ích tiếp theo của ReactJS

• Thân thiện với SEO

2.3 React Native

2.3.1 Giới thiệu về React Native

React Native là một framework do Facebook phát triển hướng đến tối ưu hóa hiệu năng Hybrid và tối giản số lượng ngôn ngữ Native di động

2.3.2 Cách hoạt động của React Native

Bằng cách tích hợp 2 thread là Main Thread và JS Thread cho ứng dụng mobile Với Main Thread sẽ đảm nhận vai trò cập nhật giao diện người dùng(UI) Sau đó sẽ xử lý tương tác người dùng Trong khi đó, JS Thread sẽ thực thi và xử

lý code Javascript Hai luồng này hoạt động độc lập với nhau

Để tương tác được với nhau hai Thread sẽ sử dụng một Bridge(cầu nối) Cho phép chúng giao tiếp mà không phụ thuộc lẫn nhau, chuyển đổi dữ liệu từ thread này sang thread khác Dữ liệu từ hai Thread được vận hành khi tiếp nối dữ liệu cho nhau

2.3.3 Ưu điểm của React Native

• Tối ưu thời gian

• Hiệu năng ổn định

• Tiết kiệm chi phí

• Đội ngũ phát triển ứng dụng không quá lớn

• Ứng dụng tin cậy, ổn định

• Xây dựng ứng dụng ít native code nhất cho nhiều hệ điều hành khác nhau

• Trải nghiệm người dùng tốt hơn khi so sánh với ứng dụng Hybrid

2.4 SQL Server

2.4.1 Giới thiệu về SQL Server

SQL Server chính là một hệ quản trị dữ liệu quan hệ sử dụng câu lệnh SQL

để trao đổi dữ liệu giữa máy cài SQL Server và máy Client Một Relational Database Management System – RDBMS gồm có: databases, database engine và các chương trình ứng dụng dùng để quản lý các bộ phận trong RDBMS và những

dữ liệu khác

Các thành cơ bản trong SQL Server gồm có: Reporting Services, Database Engine, Integration Services, Notification Services, Full Text Search Service,…

Tất cả kết hợp với nhau tạo thành một giải pháp hoàn chỉnh giúp cho việc phân tích và lưu trữ dữ liệu trở nên dễ dàng hơn

• Database Engine (Lõi của SQL Server)

• Replication (Cơ chế tạo bản sao):

2.4.2 Tại sao lại sử dụng SQL trong thiết kế Website

SQL Server không phải là một hệ quản trị cơ sở dữ liệu độc lập mà nó chỉ là một thành phần với vai trò ngôn ngữ là công cụ giao tiếp giữa hệ cơ sở dữ liệu và người dùng Chính vì thế nó được sử dụng trong các dịch vụ thiết kế web đẹp với chức năng giao tiếp với người dùng với các vai trò sau:

• SQL là một ngôn ngữ đòi hỏi có tính tương tác cao

• SQL là một ngôn ngữ lập trình cơ sở dữ liệu

• SQL là một ngôn ngữ lập trình quản trị cơ sở dữ liệu

• SQL là một ngôn ngữ lập trình cho các hệ thống chủ khách

• SQL là ngôn ngữ truy cập dữ liệu trên Internet

• SQL là ngôn ngữ cơ sở dữ liệu phân tán

CHƯƠNG 3: PHÂN TÍCH VÀ MÔI TRƯỜNG HÓA YÊU

CẦU 3.1 Phân tích yêu cầu chức năng

3.1.1 Chức năng quản lý quiz

3.1.1.1 Mô tả

Chức năng dùng để thêm, chỉnh sửa, xóa quiz trong hệ thống Mức độ ưu tiên: cao

3.1.1.2 Yêu cầu chức năng

1 Thêm quiz Thêm quiz mới vào hệ thống: Câu hỏi, đáp án, …

2 Xóa quiz Xóa quiz ra khỏi hệ thống

3 Chỉnh sửa quiz Chỉnh sửa thông tin, nội dung quiz trong hệ thống cho

phù hợp

4 Thêm câu hỏi Thêm, xóa câu hỏi khỏi quiz

Bảng 3.1: Yêu cầu chức năng quản lý quiz

3.1.2 Chức năng quản lý lộ trình học

3.1.2.1 Mô tả

Quản lý các lộ trình học có trên hệ thống Lộ trình sẽ bao gồm các bài học Mức độ ưu tiên: cao

3.1.2.2 Yêu cầu chức năng

1 Thêm lộ trình học Thêm lộ trình học mới

2 Cập nhật lộ trình học Cập nhật nội dung lộ trình theo yêu cầu Thêm, loại

bỏ, sắp xếp bài học

3 Xóa lộ trình học Xóa lộ trình học

Bảng 3.2: Yêu cầu chức năng quản lý tài khoản

3.1.3 Chức năng quản lý bài học

3.1.3.1 Mô tả

Quản lý các bài học có trên hệ thống, bài học là phần chi tiết của lộ trình học Bài học bao gồm các kịch bản học

Mức độ ưu tiên: cao

3.1.3.2 Yêu cầu chức năng

1 Thêm bài học Thêm bài học mới

2 Cập nhật bài học Cập nhật nội dung bài học theo yêu cầu Chỉnh sửa

nội dung các kịch bản có trong bài học

3 Xóa bài học Xóa bài học

Bảng 3.3: Yêu cầu chức năng quản lý tài khoản

3.1.4 Chức năng quản lý câu hỏi

3.1.4.1 Mô tả

Chức năng dùng để quản lý ngân hàng câu hỏi có trên hệ thống

Mức độ ưu tiên: Cao

3.1.4.2 Yêu cầu chức năng

1 Thêm câu hỏi Thêm câu hỏi vào hệ thống với các mẫu câu hỏi được cung

cấp sẵn

2 Cập nhật câu

hỏi Cập nhật lại câu hỏi theo yêu cầu

3 Xóa câu hỏi Xóa câu hỏi khỏi hệ thống

Bảng 3.4: Yêu cầu chức năng nhắn tin với chatbot

3.1.5 Chức năng quản lý exam

3.1.5.1 Mô tả

Chức năng dùng để thêm, chỉnh sửa, xóa exam trong hệ thống Mức độ ưu tiên: cao

3.1.5.2 Yêu cầu chức năng

1 Thêm exam Thêm exam mới vào hệ thống

2 Xóa exam Xóa exam ra khỏi hệ thống

3 Chỉnh sửa exam Chỉnh sửa thông tin, nội dung exam trong hệ thống cho

phù hợp

4 Thêm câu hỏi Thêm, xóa các câu hỏi khỏi exam

Bảng 3.5: Yêu cầu chức năng quản lý exam

3.1.6 Chức năng học với từ vựng

3.1.6.1 Mô tả

Chức năng dùng để người dùng học các từ vựng bằng flashcard trong hệ thống Mức độ ưu tiên: Cao

3.1.6.2 Yêu cầu chức năng

Yêu cầu Mô tả

Bảng 3.6: Yêu cầu chức năng học với flashcard

3.1.7 Chức năng tra cứu từ vựng

3.1.7.1 Mô tả

Chức năng dùng để tra cứu các từ vựng trong hệ thống Mức độ ưu tiên: cao

3.1.7.2 Yêu cầu chức năng

Yêu cầu Mô tả

Bảng 3.7: Yêu cầu chức năng tra cứu từ vựng

3.1.8 Chức năng thảo luận

3.1.8.1 Mô tả

Chức năng dùng để trao đổi, thảo luận giữa người dùng với nhau nhằm mục đích hỗ trợ học tập Mức độ ưu tiên: trung bình

3.1.8.2 Yêu cầu chức năng

Yêu cầu Mô tả

1 Bình luận Bình luận các bài viết được post lên trang forum của hệ

thống

2 Thích bài viết Tăng lượt tương tác với bài viết

Bảng 3.8: Yêu cầu chức năng bình luận

3.1.9 Chức năng làm exam

3.1.9.1 Mô tả

Chức năng dùng để người dùng học làm các bài exam tương tự các bài thi toeic để kiểm tra trình độ học của mình Mức độ ưu tiên: Cao

3.1.9.2 Yêu cầu chức năng

1 Làm exam Người dùng sẽ trả lời các câu hỏi trong bài exam mà hệ

thống đưa ra

2 Xem kết quả Hiển thị số câu trả lời đúng và số điểm của người dùng

Bảng 3.9: Yêu cầu chức năng làm exam

3.1.10 Chức năng làm quiz

3.1.10.1 Mô tả

Chức năng dùng để người dùng học làm các bài quiz kiểm tra nhanh các câu hỏi trong chủ đề mà người dùng vừa học Mức độ ưu tiên: Cao

3.1.10.2 Yêu cầu chức năng

1 Làm quiz Người dùng sẽ trả lời các câu hỏi trong bài quiz được hệ

thống cung cấp

2 Kết quả Hiển thị kết quả đúng/sai cho từng câu hỏi trong quiz sau

khi trả lời

3 Lặp Lặp lại những câu hỏi trả lời sai cho đến khi kết thúc bài

3.1.12.2 Yêu cầu chức năng

Yêu cầu Mô tả

1 Nhắn tin Người dùng nhắn tin qua lại với nhau

2 Tạo boxchat Tạo boxchat cho phép mời người dùng khác cùng tham gia

trao đổi

Bảng 3.11: Yêu cầu chức năng nhắn tin

3.2 Phân tích yêu cầu phi chức năng

3.2.1 Khả năng sử dụng

Hệ thống cho phép người dùng truy cập bằng internet

Hệ thống sử dụng trình duyệt website và mobile app như là giao diện người dùng

Hệ thống thân thiện với người dùng

Hệ thống phải được thiết kế sao cho phù hợp với nhiều loại browser hiện có

Hệ thống phải hỗ trợ cho phép người dùng báo lỗi nếu có

3.2.6 Ràng buộc thiết kế

3.2.6.1 Ngôn ngữ lập trình

Front-end: Sử dụng framework ReactJs, HTML, CSS, Javascript

Back-end: Sử dụng ngôn ngữ C# để thiết kế WebApi dựa trên Net Core framework

Mobile App: React Native

3.2.6.2 Công cụ phát triển

Sử dụng Visual Studio Code để lập trình

Sử dụng các package của net và các extensions cho IDE

3.3 Mô hình hóa yêu cầu

UC04 Học theo lộ trình Học các lý thuyết, ngữ pháp, kĩ năng

nghe, đọc, viết thông qua các bài học UC05 Chọn lộ trình Lựa chọn lộ trình từ danh sách lộ trình

UC10 Thảo luận Trao đổi thảo luận bằng các bài viết giữa

các người học với nhau

UC11 Đăng xuất Đăng xuất tài khoản ra khỏi hệ thống UC12 Làm exam Làm quen, nâng cao kĩ năng làm bài với

các bài exam được cung cấp hoặc do

UC15 Quản lý quiz/exam Quản lý các bài quiz/exam (của người học

đối với người học) UC16 Chia sẻ Chia sẻ quiz/exam cho người học khác UC17 Quản lý ngân hàng câu hỏi Quản lý ngân hàng câu hỏi (của người học

đối với người học) UC18 Quản lý bài viết Quản lý bài viết (của người học đối với

người học)

UC19 Nhắn tin Nhắn tin trao đổi riêng tư với người dùng/

nhóm người dùng khác

UC20 Thay đổi thông tin tài khoản Thay đổi địa chỉ email, mật khẩu, thông

tin cá nhân khác của người học

UC21 Đóng góp Người học đóng góp bản ghi cho tài

nguyên của hệ thống

UC22 Đóng góp ví dụ Người học đóng góp các ví dụ

UC23 Đóng góp ảnh ghi nhớ Người học cá nhân hóa thẻ ghi nhớ cho từ

vựng

UC24 Quản lý từ vựng Quản lý từ vựng học được trên hệ thống

bao gồm thêm, sửa, xóa từ vựng UC25 Quản lý lộ trình học Quản lý lộ trình học bao gồm thêm, sửa,

UC31 Kiểm duyệt quiz/exam Kiểm duyệt quiz/exam của người học khi

người học tiến hành chia sẻ

UC32 Kiểm duyệt đóng góp Kiểm duyệt đóng góp của người dùng để

xác định có được công khai

UC33 Quản lý tài khoản Quản lý tài khoản bao gồm khóa, mở

khóa, phân quyền, đặt lại mật khẩu