đồ án 2 phát triển website hỗ trợ học tiếng anh

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Thành phố Hồ Chí Minh, 10 tháng 1 năm 2024

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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

LỜI CẢM ƠN

Nhóm xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người đã trực tiếp tận tìnhhướng dẫn nhóm trong suốt quá trình thực hiện đồ án Nhóm vô cùng biết ơn sự tậntình chỉ dẫn của cô trong quá trình nhóm thực hiện đề tài này Bước đầu tiếp cận cáccông nghệ mới, nhóm còn nhiều thiếu sót về mặt kiến thức cũng như kinh nghiệm thựctiễn nên không tránh khỏi nhiều sai sót Những nhận xét, góp ý chân tình của cô chínhlà cơ sở để nhóm có thể cải tiến và hoàn thiện đề tài này một cách tốt nhất Nếu khôngcó những lời chỉ bảo tận tình của cô thì đồ án này của nhóm rất khó để thực hiện.

Trong quá trình thực hiện đồ án, nhóm có thể không tránh khỏi được sai sót, chúngem kính mong nhận được sự góp ý, hướng dẫn của cô để có thể hoàn thiện đồ án hơnnữa.

Chúng em xin gửi lời cảm ơn chân thành nhất đến cô.

TP.HCM, ngày 30 tháng 12 năm 2023Nhóm sinh viên thực hiện

Nguyễn Minh Hiếu - Đặng Bảo Trâm

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

1.4 Phân tích và đánh giá các hướng nghiên cứu đã có 4

1.4.1 Phân tích các hướng nghiên cứu và phương pháp đã được áp dụng 4

1.4.2 Đánh giá các ưu điểm và hạn chế của những nghiên cứu này 4

1.5 Vấn đề còn tồn tại 5

1.5.1 Liệt kê những vấn đề chưa được giải quyết 5

1.5.2 Đánh giá tầm quan trọng của những vấn đề này và tác động 5

1.6 Vấn đề cần tập trung và nghiên cứu giải quyết 6

1.6.1 Xác định và trình bày những vấn đề mà đề tài cần tập trung vào 6

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

2.1 ReactJS 7

2.2 NodeJS 9

2.3 Mongoose 10

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 11

3.1 Phân tích yêu cầu 11

3.1.1 Yêu cầu chức năng 11

3.1.2 Yêu cầu phi chức năng 13

3.2 Xây dựng hệ thống 14

3.2.1 Kiến trúc hệ thống 14

3.2.2 Mô tả các thành phần trong hệ thống 14

3.3 Thiết kế sơ đồ Use case 16

3.3.1 Sơ đồ Use case 16

3.4.2 Mô tả chi tiết từng bảng dữ liệu 56

CHƯƠNG 4: XÂY DỰNG TRANG WEB 61

4.1 Sơ đồ màn hình 61

4.2 Danh sách giao diện 62

4.3 Chi tiết giao diện 64

4.3.1 Login 64

4.3.2 Sign Up 65

4.3.3 Forgot Password 66

4.3.8 Kiểm tra thông tin 71

Hình 3.2 Sơ đồ Use case đối với người dùng chưa đăng nhập 16

Hình 3.3 Sơ đồ Use case đối với người dùng đã đăng nhập User 17

Hình 3.4 Sơ đồ Use case đối với người dùng đã đăng nhập Author 18

Hình 3.5 Sơ đồ Use case đối với người dùng đã đăng nhập Censor 18

Hình 3.6 Sơ đồ Logic 54

Hình 4.1 Sơ đồ màn hình 61

Hình 4.2 Giao diện trang Login 64

Hình 4.3 Giao diện trang Sign Up 65

Hình 4.4 Giao diện trang Forgot Password 66

Hình 4.5 Giao diện trang Verify 67

Hình 4.6 Giao diện trang Home 68

Hình 4.7 Giao diện trang Create Course 69

Hình 4.8 Giao diện trang History 70

Hình 4.9 Giao diện trang ChangeInfor 71

Hình 4.10 Giao diện trang News 72

Hình 4.22 Giao diện trang Video 79

Hình 4.23 Giao diện trang MiniGame 80

Hình 4.24 Giao diện trang Score 81

Hình 4.25 Giao diện trang League 82

Hình 4.26 Giao diện trang quản lý 83

Hình 4.27 Giao diện trang tạo quản lý 84

Hình 4.28 Giao diện màn hình duyệt khóa học 85

Hình 4.29 Giao diện xem khóa học cần duyệt 86

DANH MỤC BẢNG

Bảng 3.1 Yêu cầu chức năng 11

Bảng 3.2 Bảng mô tả các thành phần trong hệ thống 14

Bảng 3.3 Danh sách các Actors 19

Bảng 3.4 Danh sách các Use case 19

Bảng 3.5 Đặc tả Use case Tạo tài khoản 22

Bảng 3.6 Đặc tả Use case Quên mật khẩu 25

Bảng 3.7 Đặc tả Use case Đăng nhập 26

Bảng 3.8 Đặc tả Use case thay đổi thông tin 27

Bảng 3.9 Đặc tả Use case đăng xuất 28

Bảng 3.10 Đặc tả Use case Xem trang chủ 29

Bảng 3.11 Đặc tả Use case Liên hệ 30

Bảng 3.12 Đặc tả Use case Chat trực tiếp 31

Bảng 3.13 Đặc tả Use case xem gợi ý lộ trình 32

Bảng 3.14 Đặc tả Use case Làm bài test trình độ 33

Bảng 3.15 Đặc tả Use case Xem lịch sử học tập 34

Bảng 3.16 Đặc tả Use case Xem Blog 35

Bảng 3.17 Đặc tả Use case Tạo Blog 36

Bảng 3.18 Đặc tả Use case Bình luận trên Blog 37

Bảng 3.19 Đặc tả Use case Xóa Blog 38

Bảng 3.20 Đặc tả Use case Làm bài BigTest 39

Bảng 3.27 Đặc tả Use case Chơi game Từ vựng rơi 46

Bảng 3.28 Đặc tả Use case Xem phim ngắn 47

Bảng 3.29 Đặc tả Use case Tạo khóa học 48

Bảng 3.30 Đặc tả Use case Xem danh sách khóa học đã tạo 49

Bảng 3.31 Đặc tả Use case Xóa khóa học 50

Bảng 3.32 Đặc tả Use case Xem danh sách bình luận 51

Bảng 3.33 Đặc tả Use case Xóa bình luận 52

Bảng 3.34 Đặc tả Use case Ẩn bình luận 53

Bảng 3.35 Danh sách bảng trong cơ sở dữ liệu 55

Bảng 3.36 Mô tả chi tiết bảng NGUOIDUNG 56

Bảng 3.37 Mô tả chi tiết bảng KETQUABAITEST 57

Bảng 3.38 Mô tả chi tiết bảng LICHSUNGUOIDUNG 57

Bảng 3.39 Mô tả chi tiết bảng BLOG 57

Bảng 3.41 Mô tả chi tiết bảng BANGXEPHANG 58

Bảng 3.42 Mô tả chi tiết bảng KHOAHOC 58

Bảng 3.43 Mô tả chi tiết bảng DEXUATLOTRINH 59

Bảng 3.45 Mô tả chi tiết bảng BINHLUAN 59

Bảng 3.46 Mô tả chi tiết bảng TUVUNG 60

Bảng 4.1 Danh sách các màn hình 62

TÓM TẮT ĐỒ ÁNVấn đề nghiên cứu:

 Khó khăn trong việc học tiếng Anh cho trẻ em: Học tiếng Anh có thể là một tháchthức đối với trẻ em, đặc biệt là trong môi trường học tập truyền thống

 Sự quan trọng của trò chơi và hoạt động tương tác: Trẻ em thường hứng thú vàhọc hỏi tốt thông qua trò chơi và hoạt động tương tác.

 Sự phát triển toàn diện cho trẻ em: Đồ án tập trung vào việc xây dựng một trangweb không chỉ giúp trẻ học tiếng Anh mà còn phát triển các kỹ năng khác.

Các hướng tiếp cận và giải quyết vấn đề:

 Phương pháp thực hiện: 

o Tìm hiểu công nghệ: Reactjs, Nodejs, Figma Thu thập yêu cầu thông qua:khảo sát các website tương tự trên thị trường, tạo các form khảo sát để lấythêm các yêu cầu của mọi người.

o Phân tích và xác định yêu cầu Thiết kế: đối tượng, dữ liệu, giao diện.o Cài đặt, kiểm thử, hoàn thiện sản phẩm.

 Công nghệ sử dụng: figma, Javascript, HTML5, CSS3, ReactJS, ExpressJS,Swagger, Github, MongoDB, Mongoose, Firebase.

Một số kết quả đạt được:

Thiết kế trang web hỗ trợ học tiếng Anh: Đồ án đã tạo ra một trang web dễ sửdụng, thân thiện với trẻ em Giao diện đơn giản, màu sắc sáng tạo và hình ảnh hấp dẫnđã được sử dụng để thu hút sự quan tâm và tham gia của trẻ Cung cấp các bài học, bàikiểm tra, lưu kết quả, xếp hạng và đề xuất khóa học cho học viên.

Nội dung báo cáo:

Nội dung đồ án được trình bày trong 5 chương như sau:

CHƯƠNG 1 MỞ ĐẦU: Xác định lí do, mục tiêu đề tài, đối tượng, phạm vi và

phương pháp nghiên cứu, phân tích và đánh giá hướng nghiên cứu đã có, phântích các vấn đề còn tồn tại và đề ra các hướng giải quyết

CHƯƠNG 2 CƠ SỞ LÍ THUYẾT: Giới thiệu các công nghệ và ngôn ngữ đã sử

dụng gồm: ngôn ngữ Javascript, công nghệ ReactJS, công nghệ NodeJS

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG: Phân tích yêu cầu, sơ đồ

use case, sơ đồ hoạt động và thiết kế dữ liệu cho website hỗ trợ học tiếng Anh

CHƯƠNG 4 XÂY DỰNG ỨNG DỤNG: Xây dựng website hỗ trợ học tiếng

Anh được mô tả thông qua danh sách và chi tiết các màn hình

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

Trong xu thế toàn cầu hóa hiện nay, việc các nước trên thế giới có một ngônngữ chung để giao tiếp là một nhu cầu tất yếu Trong số các ngôn ngữ phổ biến thìtiếng Anh có độ phổ biến đứng hàng thứ ba (sau tiếng Trung và tiếng Tây BanNha), tuy nhiên dường như tiếng Anh đang là “văn hóa thế hệ” quốc tế Đa số cácnước trên thế giới đều xem việc học tiếng Anh là ưu tiên hàng đầu khi nói đến họcngoại ngữ Ngoài ra, hiện nay hầu hết các bài nghiên cứu khoa học, cập nhật côngnghệ hiện đại hay tài liệu hướng dẫn đều có bản viết bằng tiếng Anh Vì vậy để cóthể bắt kịp xu hướng phát triển của xã hội thì việc học tiếng Anh là vô cùng cầnthiết.

Bên cạnh đó, ngày nay công nghệ thông tin nói chung và Internet nói riêngđang ngày một phát triển mạnh mẽ và trở thành một phần không thể thiếu trongcuộc sống

Kết hợp hai vấn đề trên ta có thể thấy, việc học anh văn trực tuyến đang là nhucầu tất yếu Nắm bắt được thực trạng hầu hết mọi người đều mong muốn nâng caotrình độ tiếng Anh nhưng lại không có thời gian tới lớp học hoặc không đủ điềukiện tài chính cho việc theo học một lớp ngoại ngữ chính khóa, chúng em quyếtđịnh chọn đề tài Xây dựng website hỗ trợ học tiếng Anh để giải quyết vấn đề này

Chỉ cần một đường truyền Internet và một số thao tác đơn giản, chúng ta vẫn

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

Đối tượng nghiên cứu của đồ án là trẻ em trong độ tuổi học tiếng Anh, thườnglà từ 5 đến 12 tuổi Đây là giai đoạn phát triển ngôn ngữ quan trọng trong cuộc sốngcủa trẻ, và việc hỗ trợ họ học tiếng Anh thông qua các trò chơi và bài học đơn giảncó thể giúp tăng cường khả năng ngôn ngữ, từ vựng, ngữ pháp và giao tiếp của trẻ.

Nội dung học tiếng Anh sẽ được tổ chức thành các bài học đơn giản và có cấutrúc, tương tác và phù hợp với trình độ của trẻ Các bài học có thể bao gồm từ vựng,ngữ pháp, cấu trúc câu, phát âm và các hoạt động luyện nghe và nói Trò chơi sẽđược tích hợp vào các bài học để tăng cường sự hứng thú và tiếp thu kiến thức củatrẻ.

1.4 Phân tích và đánh giá các hướng nghiên cứu đã có

1.4.1 Phân tích các hướng nghiên cứu và phương pháp đã được áp dụng

Các tác giả ngoài nước đã áp dụng các hướng nghiên cứu và phương pháp đadạng để nghiên cứu lập trình web tiếng Anh cho trẻ em Các hướng nghiên cứu vàphương pháp chủ yếu bao gồm:

Phát triển các ứng dụng và công cụ học tập: Các tác giả đã phát triển các ứngdụng và công cụ học tập đa phương tiện nhằm giúp trẻ em học tiếng Anh và lậptrình web một cách hiệu quả Các ứng dụng này thường có giao diện đồ họa thânthiện và các hoạt động thú vị để tăng cường sự tham gia và quan tâm của trẻ em.

1.4.2 Đánh giá các ưu điểm và hạn chế của những nghiên cứu này

Các nghiên cứu của tác giả ngoài nước đã mang lại một số ưu điểm và hạnchế nhất định Các ưu điểm bao gồm:

Sự sáng tạo và đổi mới: Các tác giả đã đưa ra các ý tưởng mới và sáng tạotrong việc kết hợp lập trình web và học tiếng Anh cho trẻ em Các phương pháp và

công nghệ mới đã được áp dụng để cung cấp một trải nghiệm học tập tốt hơn vàhấp dẫn hơn.

Mở rộng phạm vi nghiên cứu: Các tác giả ngoài nước đã đưa ra các phươngpháp và quan điểm mới trong lĩnh vực này, mở rộng phạm vi nghiên cứu và tạođiều kiện cho những nghiên cứu tương lai.

1.5 Vấn đề còn tồn tại

1.5.1 Liệt kê những vấn đề chưa được giải quyết

Trong lĩnh vực xây dựng web học tiếng Anh cho trẻ em, có một số vấn đềchưa được giải quyết hoặc đang tồn tại Dưới đây là một số ví dụ về những vấn đềnày:

Thiết kế giao diện người dùng hấp dẫn và thân thiện với trẻ em: Đối tượngngười dùng là trẻ em đòi hỏi một giao diện người dùng được thiết kế đơn giản,màu sắc tươi sáng và có tính tương tác cao Tuy nhiên, việc tạo ra giao diện hấpdẫn và đồng thời đảm bảo tính tương thích với nhiều thiết bị và kích thước mànhình khác nhau vẫn là một thách thức.

1.5.2 Đánh giá tầm quan trọng của những vấn đề này và tác động

Tầm quan trọng: Việc giải quyết những vấn đề này là quan trọng vì trẻ em làmột đối tượng người dùng đặc biệt và yêu cầu một giao diện người dùng và nộidung phù hợp với họ Nếu không thể đáp ứng được các yêu cầu và mong đợi củatrẻ em, Website sẽ không đạt được hiệu quả học tập và sự tham gia của trẻ.

Đáng quan tâm về mặt đạo đức và pháp lý: Việc không đáp ứng các yêu cầuvề quyền riêng tư và an toàn trực tuyến có thể dẫn đến vấn đề đạo đức và pháp lý.Bảo vệ thông tin cá nhân của trẻ em và đảm bảo an toàn trong quá trình sử dụngWebsite là một trách nhiệm quan trọng và cần được coi trọng.

1.6 Vấn đề cần tập trung và nghiên cứu giải quyết

1.6.1 Xác định và trình bày những vấn đề mà đề tài cần tập trung vào

Xây dựng giao diện người dùng đáp ứng (Responsive User Interface): Với sựphát triển của thiết bị di động và đa nền tảng, việc xây dựng giao diện web linhhoạt, tương thích với nhiều loại màn hình và thiết bị là một vấn đề quan trọng Đềtài của nhóm tập trung vào phân tích, thiết kế và triển khai các phương pháp và kỹthuật để xây dựng giao diện người dùng đáp ứng một cách hiệu quả.

Tối ưu hóa tốc độ tải trang (Page Load Speed Optimization): Hiệu suất và tốcđộ tải trang là yếu tố quan trọng ảnh hưởng đến trải nghiệm người dùng và SEO(Search Engine Optimization) Nghiên cứu cách tối ưu hóa tốc độ tải trang bằngcách sử dụng kỹ thuật caching, tối ưu hóa mã nguồn và tải dữ liệu hiệu quả có thểlà một phần quan trọng trong đề tài của nhóm em.

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT2.1 ReactJS

Hình 2.1 Logo ReactJS

 [CITATION rea23 \l 1033 ] Về cơ bản, các tính năng của reactJS thường xuất

phát từ việc tập trung các phần mềm riêng lẻ, cho phép các developer có chứcnăng phá vỡ giao diện của người dùng từ một cách phức tạp và biến nó trở thànhcác phần mềm đơn giản Hiểu đơn giản thì các render dữ liệu không chỉ đượcthực hiện ở vị trí server mà còn ở vị trí client khi sử dụng reactJS [1]

 Hiện nay, reactJS thường được dùng để thiết kế bố cục cho trang web, nhưng hạnchế đó chính là cấu trúc khó Thay vào đó sử dụng JSX và nhúng vào các đoạnHTML và javascript, bạn sẽ thấy cú pháp dễ hiểu hơn và JSX cũng có thể tối ưu

chỉ thực hiện chúng Điều này giúp Reactjs tránh những thao tác cần trênDOM mà nhiều chi phí.

o Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp đặcbiệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML vàJavascript Ta có thể thêm vào các đoạn HTML vào trong hàm render màkhông cần phải nối chuỗi Đây là đặc tính thú vị của Reactjs Nó sẽ chuyểnđổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biếnđổi JSX.

o Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặtứng dụng mở rộng của Chrome dành cho Reactjs Nó giúp bạn debug codedễ dàng hơn Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếpvào virtual DOM như thể bạn đang xem cây DOM thông thường.

o Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giaodiện vì virtual DOM được cài đặt hoàn toàn bằng JS.

o Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàngcho bảo trì và sửa lỗi.

2.2 NodeJS

Hình 2.2 Logo NodeJS

 NodeJS là một nền tảng được xây dựng trên “V8 Javascript engine” được viếtbằng C++ và Javascript Nền tảng này được phát triển bởi Ryan Lienhart Dahlvào năm 2009. [2]

 Node.js ra đời khi các developer đời đầu của JavaScript mở rộng nó từ một thứbạn chỉ chạy được trên trình duyệt thành một thứ bạn có thể chạy trên máy củamình dưới dạng ứng dụng độc lập.

 Giờ đây bạn có thể làm được nhiều thứ với JavaScript hơn là chỉ tương tác vớicác website Cả trình duyệt JavaScript và Node.js đều chạy trên JavaScriptruntime V8 engine Công cụ này lấy code JavaScript của bạn và convert nó sangmã máy (bytecode) cho việc thực thi nhanh hơn Mã máy là loại code thấp cấphơn để máy tính có thể chạy mà không cần biên dịch nó.

2.3 Mongoose

Hình 2.3 Logo Mongoose

 Mongoose là một thư viện mô hình hóa đối tượng (Object Data Model - ODM)cho MongoDB và Node.js Nó quản lý mối quan hệ giữa dữ liệu, cung cấp sự xácnhận giản đồ và được sử dụng để dịch giữa các đối tượng trong mã và biểu diễncác đối tượng trong MongoDB. [3]

 Mongoose cho phép bạn định nghĩa các object (đối tượng) với một schema đượcđịnh nghĩa rõ ràng, được ánh xạ tới một MongoDB document Mongoose cũngcung cấp một số lượng đáng kinh ngạc các chức năng cho việc tạo ra và làm việcvới các schema.

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG3.1 Phân tích yêu cầu

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

Bảng 3.1 Yêu cầu chức năng

Liên hệ qua email Nếu có thắc mắc hoặc nhu cầu liên hệ để góp ý cải thiện, ngườidùng có thể gửi mail để liên hệ thông qua mục Contact

Xem tin tức “News”

Người dùng có thể xem tin tức mà các người dùng khác, hoặcban quản lý đăng, và có thể bình luận vào bài viết đó Đồng thờicó thể đăng tin mà mình muốn đăng

Xem các khóa học

Người dùng chọn “Courses” trên header và sau đó lựa chọn kỹnăng mình muốn,từng kĩ năng sẽ có từng khóa học để xem chitiết của khóa học đó bao gồm: chủ đề, số lượng bài học

Học các bài học Người dùng nhấn vào từng bài học trong khóa học để có thể họctừ vựng mới thông qua các trò chơi đơn giản

Ở mỗi khóa học sẽ cung cấp một bài kiểm tra lại cho toàn bộ

nhân/ “Change info”Đăng ký tạo khóa học “Create Course”

Người dùng chọn đăng ký và điền đầy đủ thông tin theo yêu cầuđể tạo ra được 1 khóa học Sau khi đăng kí, ban quản lí sẽ xétduyệt, nếu chất lượng hợp lệ thì khóa học này sẽ được đăng lên.Xem bảng xếp hạng

khóa học/ toàn khóa học

Người dùng có thể xem bảng xếp hạng theo tuần/tháng của tấtcả người học đã tham gia kiểm tra của khóa học đó để có thểbiết được vị trí hiện tại của bản thân

Xem lịch sử học tập “History”

Người dùng xem lại các bài học, trạng thái bài học mà mình đãhọc, và lựa chọn học lại nếu chưa hoàn thành học

Đăng xuất Người dùng thoát tài khoản của mình trên webQuản lý manager

“Manager List”

Dành cho Admin, tài khoản quản lí toàn bộ trang web, Admincó thể tạo và xóa tài khoản của một manager.

Xét duyệt các đăng ký tạo khóa học “Courses review”

Dành cho Admin và manager, cả hai đều có quyền kiểm tra vàxét duyệt chất lượng của khóa học, và quyết định nó có đượcđưa vào danh sách khóa học hay không.

Quản lí tin tức

Admin và manager xem xét thông tin trên trang “News” nếu cóbất kì vấn đề thì cả hai có quyền xóa bình luận, thậm chí và cảtin tức.

3.1.2 Yêu cầu phi chức năng

 Đảm bảo tính an toàn và bảo mật:

o Người sử dụng chương trình: được cấp username và password Passwordcủa người sử dụng được mã hóa trước khi ghi vào dữ liệu.

o Hệ thống tự động sao lưu và có thể khôi phục trong trường hợp đột ngột mấtkết nối mạng.

 Đảm bảo tính hiệu quả: thời gian truy xuất phải tối ưu: người dùng khi muốntham gia bài học mới không cần thực hiện quá nhiều thao tác; Mã nguồn phải tốiưu, không lưu dữ liệu dư thừa đảm bảo hệ thống luôn hoạt động công suất hợp lý; Đảm bảo tính tương thích: đảm bảo phần mềm hoạt động được trên nhiều thiết bị,

hỗ trợ import/export dữ liệu;

 Đảm bảo tính tiện dụng: phần mềm phải dễ học và dễ sử dụng; giao diện ngườidùng phải trực quan, dễ hiểu; Khả năng truy cập, khai thác dữ liệu cũng phảiđược đảm bảo tối ưu;

 Đảm bảo tính tin cậy: phần mềm phải luôn sẵn sàng phục vụ; có khả năng chịu lỗivà khả năng phục hồi;

 Đảm bảo an toàn thông tin: thông tin nhập vào hay truy xuất từ cơ sở dữ liệu phảiđược bảo mật; toàn vẹn và xác thực.

3.2 Xây dựng hệ thống3.2.1 Kiến trúc hệ thống

4 Virtual DOM Là một bản sao của DOM, được lưu trữ tạmthời trong bộ nhớ, giúp tối ưu việc cập nhật

giao diện.

Là Document Object Model, là một biểu diễn cây dữ liệu cho toàn bộ nội dung của trang web.

6 RestfulAPI Nơi thực hiện kết nối giữa Frontend và Backend.

7 Node Server

Là một máy chủ NodeJS để xử lý các yêu cầu HTTP và cung cấp dữ liệu cho ứng dụng.

Là quá trình kết nối các ứng dụng và dịch vụ khác nhau để chia sẻ dữ liệu và chức năng.

11 Controller Là nơi tiếp nhận các yêu cầu từ Frontend.12 Service Là nơi xử lý logic của Server

13 Models Là lớp đại diện cho các đối tượng và dữ liệutrong ứng dụng.

14 Database

(mongoDB) Là cơ sở dữ liệu của ứng dụng.

3.3 Thiết kế sơ đồ Use case3.3.1 Sơ đồ Use case

Hình 3.5 Sơ đồ Use case đối với người dùng chưa đăng nhập

Hình 3.6 Sơ đồ Use case đối với người dùng đã đăng nhập User

Hình 3.7 Sơ đồ Use case đối với người dùng đã đăng nhập Author

Hình 3.8 Sơ đồ Use case đối với người dùng đã đăng nhập Censor

3.3.2 Danh sách Actor

Bảng 3.3 Danh sách các Actors

1 Người dùng chưa đăng nhập

Người dùng sử dụng ứng dụng nhưng chưa đăng nhập.

2 Người dùng đăng nhập User

Người dùng sử dụng ứng dụng đã đăng nhập với vai trò là người dùng thông thường.3 Người dùng đăng nhập

Người dùng sử dụng ứng dụng đã đăng nhập với vai trò là tác giả có quyền đăng khóa học.4 Người dùng đăng nhập

Người dùng sử dụng ứng dụng đã đăng nhập với vai trò là người kiểm duyệt có quyền kiểmduyệt các bình luận và các bài blog.

3.3.3 Danh sách Use case

Bảng 3.4 Danh sách các Use case

1 Tạo tài khoản Tạo tài khoản mới để sử dụng trang web.

2 Quên mật khẩu Người sử dụng quên mật khẩu tài khoản và cần cấp lại mật khẩu mới.

3 Đăng nhập Đăng nhập bằng tài khoản đã đăng ký

STTTên của Use caseMô tả/ Ghi chú

5 Đăng xuất Đăng xuất khỏi tài khoản hiện tại.

6 Xem trang chủ Người dùng xem thông tin giới thiệu của trangweb.

7 Liên hệ Gửi mail với tiêu đề và nội dung đến nhà phát triển.

8 Chat trực tiếp Người dùng chat với AI tư vấn trực tiếp.9 Xem gợi ý lộ trình Người dùng xem gợi ý lộ trình để học.

10 Kiểm tra trình độ Người dùng làm bài kiểm tra để hệ thống biết được và gợi ý lộ trình học cho người dùng.

11 Xem lịch sử học tập Xem lại lịch sử học để tiếp tục học những bài học chưa hoàn thành.

12 Xem Blog Xem những bài đăng về tips học tiếng anh, hoặc các kiến thức mới lạ.

13 Tạo Blog Người dùng tạo những bài đăng hữu ích.14 Bình luận trên Blog Người dùng nhận xét bài blog.

15 Xóa Blog Người dùng xóa bài blog mình đã tạo.16 Làm Bigtest từng kĩ

Làm bài kiểm tra kiến thức đã học của khóa học đó.

17 Bắt đầu khóa học Bắt đầu vào khóa học.

18 Xem chi tiết khóa học Xem danh sách bài học trong một khóa học cụ

STTTên của Use caseMô tả/ Ghi chú

21 Giải trí Bao gồm nhiều game để người dùng ôn tập kiến thức.

22 Chơi game Lật cặp Chơi game chọn cặp đôi từ vựng và ảnh cùng nghĩa rèn luyện trí nhớ.

23 Chơi game từ vựng rơi Chơi game chọn từ vựng đang rơi rèn luyện trí nhớ.

24 Xem phim ngắn Xem các video tiếng anh có phụ đề rèn luyện kĩ năng nghe.

25 Tạo khóa học

Người dùng vai trò tác giả có thể thêm danh sách từ vựng theo một form có sẵn để tạo thành khóa học.

26 Xem danh sách khóa học

Người dùng vai trò tác giả có thể xem lại khóa học bản thân đã tạo.

27 Xóa khóa học đã tạo Người dùng xem khóa học xong có thể tùy chọn xóa các khóa học trong danh sách.

3.3.4 Đặc tả Use case

3.3.4.1 Use case Tạo tài khoản

Bảng 3.5 Đặc tả Use case Tạo tài khoản

Tên Use case Tạo tài khoản

Mục đích Tạo tài khoản mới để sử dụng các tính năng chính của trang web.Người dùng Người dùng chưa đăng nhập

Điều kiện kích

hoạt Người dùng vào trang “Đăng ký tài khoản” và nhấn nút đăng ký.Trạng thái hệ

thống trước khi bắt đầu Use case

Người dùng chưa có tài khoản.

Trạng thái hệ thống sau khi thực hiện Use case

- Người dùng đăng ký tài khoản mới thành công.- Hệ thống lưu thông tin tài khoản mới vào dữ liệu.

Luồng sự kiện chính

1 Người dùng truy cập vào ứng dụng.2 Người dùng chọn lệnh đăng ký tài khoản.

3 Người dùng nhập Email, mật khẩu, xác nhận mật khẩu và chọn lệnh đăng ký.

4 Sau khi nhấn lệnh đăng ký, trang web tự động chuyển người dùng đến trang “Chờ xác nhận Email”.

Luồng sự kiện 2.a Người dùng chọn đăng nhập vào Google nhưng tài khoản

phụ Google này chưa đăng ký trước với hệ thống.Tiếp tục Use case 1.6

Mở rộng

- Người dùng đăng ký tạo tài khoản và thoát trang web nhưng chưa hoàn thành bước xác thực Email hoặc điền thông tin Người dùng truy cập lại vào trang web ở lần sau:

+ Trường hợp 1: Người dùng chưa xác thực Email.Tiếp tục Use case 2.4.

+ Trường hợp 2: Người dùng chưa điền thông tin cá nhân.Tiếp tục Use case 2.6.

Các yêu cầu đặcbiệt

Email phải là Email hợp lệ, mật khẩu phải có tối thiểu ít nhất 8 ký tự.

3.3.4.2 Use case Quên mật khẩu

Bảng 3.6 Đặc tả Use case Quên mật khẩu

Tên Use case Quên mật khẩu

Mục đích Cấp lại mật khẩu mới cho người dùng.Người dùng Người dùng chưa đăng nhập

Điều kiện kích hoạt Người dùng nhấn vào nút quên mật khẩu ở trang “Quên mật khẩu”.

Trạng thái hệ thống trước khi bắt đầu Use case

Người dùng chưa đăng nhập.

Trạng thái hệ thống sau khi thực hiện Use case

- Người dùng đổi mật khẩu cho tài khoản thành công.- Hệ thống lưu thông tin mật khẩu mới vào dữ liệu.

Luồng sự kiện phụ Không

Các yêu cầu đặc biệt Không.

3.3.4.3 Use case Đăng nhập

Bảng 3.7 Đặc tả Use case Đăng nhập

Mục đích Đăng nhập bằng tài khoản đã đăng ký.Người dùng Người dùng chưa đăng nhập.

Điều kiện kích hoạt Người dùng ấn nút đăng nhập hoặc đăng nhập với Google.Trạng thái hệ thống

trước khi bắt đầu Use case

Người dùng chưa đăng nhập trước đó hoặc đã đăng xuất.Trạng thái hệ thống sau

khi thực hiện Use case Người dùng đăng nhập trang web thành công.1 Người dùng truy cập vào trang web.

đầu thực hiện xác thực Tiếp tục Use case 1.3

Các yêu cầu đặc biệt Không

3.3.4.4 Use case Thay đổi thông tin

Bảng 3.8 Đặc tả Use case thay đổi thông tin

Tên Use case Thay đổi thông tin

Mục đích Thay đổi thông tin cá nhân của người sử dụng trang webNgười dùng Người dùng đã đăng nhập

Điều kiện kích hoạt Người dùng nhấn vào biểu tượng tùy chọn trên trang chủ có hình3 dấu chấm và chọn vào thay đổi thông tin

Trạng thái hệ thống trước khi bắt đầu Use case

 Người dùng đã đăng nhập

 Thông tin người dùng được tải lên.Trạng thái hệ thống sau

khi thực hiện Use case

 Người dùng cập nhật thông tin thành công.

 Thông tin mới của người dùng được lưu trữ lại trong hệ thống.

Luồng sự kiện chính

1 Người dùng truy cập vào trang web.

2 Người dùng chọn tùy chọn thay đổi thông tin.3 Người dùng cập nhật các thông tin mong muốn.4 Người dùng ấn nút “Cập nhật”.

5 Hệ thống thông báo cập nhật thành công.

6 Hệ thống cập nhật thông tin người dùng mới cập nhật vào cơsở dữ liệu.

Luồng sự kiện phụ Không có.

Các yêu cầu đặc biệt Tên phải đúng quy chuẩn, ngày sinh phải nhập ngày trong quá

khứ, mật khẩu phải tối thiểu 8 ký tự.

3.3.4.5 Use case Đăng xuất

Bảng 3.9 Đặc tả Use case đăng xuất

Tên Use case Đăng xuất.

Mục đích Người dùng thoát khỏi tài khoản đang sử dụng.Người dùng Người dùng đã đăng nhập.

Điều kiện kích hoạt Người dùng nhấn nút đăng xuất trong mục tùy chọn hình ba dấu chấm của trang web.

Trạng thái hệ thống trước khi bắt đầu Use case

Không.Trạng thái hệ thống sau

khi thực hiện Use case

Người dùng đã đăng xuất và không còn các quyền truy cập vàocác tính năng nhất định.

Luồng sự kiện chính 1 Người dùng chọn mục tùy chọn.2 Người dùng chọn lệnh đăng xuất.

3 Phần mềm hiển thị thông báo yêu cầu người dùng xác nhận muốn đăng xuất khỏi phần mềm.

3 Hệ thống quay trở lại màn hình trang chủ.Luồng sự kiện phụ Không.

Các yêu cầu đặc biệt Không.

Điều kiện kích hoạt Người dùng bấm nút HomeTrạng thái hệ thống trước

khi bắt đầu Use case

Không.Trạng thái hệ thống sau

khi thực hiện Use case

Hệ thống hiển thị trang chủLuồng sự kiện chính 1 Người dùng chọn nút Home

2 Hệ thống hiển thị trang chủLuồng sự kiện phụ Không.

Các yêu cầu đặc biệt Không.

3.3.4.7 Use case Liên hệ

Bảng 3.11 Đặc tả Use case Liên hệ

Tên Use case Liên hệ.

Mục đích Người dùng muốn liên hệ với nhà phát triển thông qua email.Người dùng Người dùng đã đăng nhập.

Điều kiện kích hoạt Người dùng nhấn vào mục liên hệ trong trong trang chủ.Trạng thái hệ thống trước

khi bắt đầu Use case

Không.Trạng thái hệ thống sau

khi thực hiện Use case

Hệ thống gửi mail cho nhà phát triển.

Luồng sự kiện chính 1 Người dùng nhấn vào mục liên hệ ở trang chủ.2 Trang web chuyển đến trang liên hệ.

3 Người dùng điền nội dung và bấm gửi.

4 Hệ thống hiển thị thông báo gửi mail thành công.

Hệ thống gửi mail đến nhà phát triển bằng email đăng nhập của

người dùng.Luồng sự kiện phụ Không.

Các yêu cầu đặc biệt Không.

3.3.4.8 Use case Chat trực tiếp

Bảng 3.12 Đặc tả Use case Chat trực tiếp

Tên Use case Chat trực tiếp

Mục đích Người dùng nhắn tin trực tiếp cho AI để nhận tư vấn trực tiếp.Người dùng Người dùng đã đăng nhập

Điều kiện kích hoạt Người dùng nhấn vào mục “Chat trực tiếp” trong trong trang chủ.

Trạng thái hệ thống trước khi bắt đầu Use case

Không.Trạng thái hệ thống sau

khi thực hiện Use case

Hệ thống lưu trữ lại đoạn hội thoại với người dùng

Luồng sự kiện chính Người dùng nhấn vào Chat trực tiếp

Luồng sự kiện phụ Không.