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

CƠ SỞ LÝ THUYẾT

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ức nă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ành các phần mềm đơn giản Hiểu đơn giản thì các render dữ liệu không chỉ được thự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ạn chế đó 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ên DOM 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 đặc biệ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 code dễ 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ếp và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 giao diệ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àng cho bảo trì và sửa lỗi.

NodeJS

 NodeJS là một nền tảng được xây dựng trên “V8 Javascript engine” được viết bằng C++ và Javascript Nền tảng này được phát triển bởi Ryan Lienhart Dahl và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ủa mì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ới các website Cả trình duyệt JavaScript và Node.js đều chạy trên JavaScript runtime V8 engine Công cụ này lấy code JavaScript của bạn và convert nó sang mã máy (bytecode) cho việc thực thi nhanh hơn Mã máy là loại code thấp cấp hơn để máy tính có thể chạy mà không cần biên dịch nó.

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

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

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

Chức năng Mô tả Đăng ký tài khoản Người dùng đăng ký tài khoản mới để có thể sao lưu lại quá trình học bằng cách sử dụng email/số điện thoại Đăng nhập tài khoản/Quên mật khẩu

Người dùng/người bản lý sử dụng thông tin đã đăng ký tài khoản để đăng nhập vào web Nếu người dùng quên mật khẩu thì chỉ cần nhập email hệ thống sẽ gửi email xác thực, sau đó người dùng có thể đổi mật khẩu

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ười dùng có thể gửi mail để liên hệ thông qua mục Contact

Người dùng có thể xem tin tức mà các người dùng khác, hoặc ban quản lý đăng, và có thể bình luận vào bài viết đó Đồng thời có 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 chi tiế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ọc từ vựng mới thông qua các trò chơi đơn giản nhân/ “Change info” Đăng ký tạo khóa học

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ét duyệ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ất cả 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

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 web

Dành cho Admin, tài khoản quản lí toàn bộ trang web, Admin có 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.

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 Password củ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ất kế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ốn tham 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ười dù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ỗi và 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.

Xây dựng hệ thống

Hình 3.4 Kiến trúc hệ thống

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

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

STT Thành phần Diễn giải

1 Views Là các thành phần mà người dùng mà thông qua đó tương tác với ứng dụng.

2 Components Là các thành phần tạo nên giao diện người dùng.

Là quá trình chuyển đổi các thành phần và các props của chúng thành một cây Virtual DOM.

4 Virtual DOM Là một bản sao của DOM, được lưu trữ tạm thờ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à

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.

8 Request/Response Handling Là quá trình xử lý các yêu cầu/lời đáp.

Là quá trình cho phép tạo và trả về các trang web hoàn chỉnh từ máy chủ.

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ệu trong ứng dụng.

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

Thiết kế 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

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

T Tên Actor Mô tả ngắn/ Ghi chú

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.

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.

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.

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ểm duyệt các bình luận và các bài blog.

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

STT Tên của Use case Mô tả/ Ghi chú

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.

STT Tên của Use case Mô 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 trang web.

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ĩ năng

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ụ

STT Tên của Use case Mô tả/ Ghi chú thể.

19 Làm bài Chọn/điền đáp án cho các câu hỏi trong các bài kiểm tra.

Xem bảng xếp hạng về điểm làm bài test của bản thân so với những người khác đã học khóa học đó.

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.

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.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.

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.

- 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.

+ 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 đặc biệ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.

- 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.

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

2 Người dùng chọn lệnh quên mật khẩu.

3 Người dùng nhập Email tài khoản và chọn lệnh cấp lại mật khẩu.

4 Hệ thống kiểm tra tính hợp lệ của Email, đảm bảo Email này đã được đăng ký tài khoản trước đó, sau đó hệ thống tiến hành gửi tới Email đó tới địa chỉ đã được đăng ký.

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

- Hệ thống xác thực thông tin Email không thành công và hiển thị thông báo.

+ TH1: Người dùng hủy quên mật khẩu.

+ TH2: Người dùng nhập lại thông tin Use case quay lại bước 3.

+ TH3: Người dùng chọn lệnh quay lại Use case quay lại bước 2.

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

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

Tên 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. đầ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 web

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 biểu tượng tùy chọn trên trang chủ có hình

3 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.

 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.

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ự.

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.

Người dùng đã đăng xuất và không còn các quyền truy cập vào cá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 Home

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ủ

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ủ.

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.

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ủ.

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

3.3.4.9 Use case Xem gợi ý lộ trình

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

Tên Use case Xem gợi ý lộ trình

Mục đích Người dùng xem các khóa học thuộc trình độ của bản thân và các gợi gợi ý khóa học tiếp theo.

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 một kỹ năng “Courses”

Hệ thống hiển thị các khóa học đề xuất.

Luồng sự kiện chính 1 Người dùng nhấn vào kỹ năng trong Courses

2 Hệ thống hiển thị các khóa học được đề xuất.

3.3.4.10 Use case Làm bài test trình độ

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

Tên Use case Làm bài test trình độ

Mục đích Người dùng xem trình độ của mình ở vị trí nào để hệ thống gợi ý các khóa học mà người dùng nên học.

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 “Check Level” trong “Courses” hoặc “Check your level/Level_x” ở góc phải header.

Hệ thống hiển thị trình độ của người dùng và hiển thị các khóa học gợi ý trong Courses

Luồng sự kiện chính 1 Người dùng nhấn vào Check level

2 Hệ thống hiển thị màn hình để chọn các từ vựng bạn biết, sau đó tính ra level của bạn

3.3.4.11 Use case Xem lịch sử học tập

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

Tên Use case Xem lịch sử học tập

Mục đích Người dùng muốn xem lịch sử học tập, kiểm tra khóa học nào chưa học xong để tiếp tục

Người dùng Người dùng đã đăng nhập. Điều kiện kích hoạt Người dùng chọn Xem lịch sử học tập

Người dùng thực đã đăng nhập

Hệ thống hiển thị danh sách các khóa học người dùng đã, đang học

Luồng sự kiện chính 1 Người dùng truy cập vào trang web.

2 Người dùng đăng nhập tài khoản

3 Người dùng chọn mục xem lịch sử đã học Luồng sự kiện phụ Không.

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

Tên Use case Xem Blog

Mục đích Người dùng xem các bài đăng được chia sẽ về kiến thức anh văn

Người dùng Không Điều kiện kích hoạt Người dùng chọn mục Xem Blog

Hệ thống hiển thị danh sách các bài đăng

3 Người dùng chọn mục xem blog Luồng sự kiện phụ Không.

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

Tên Use case Tạo Blog

Mục đích Người dùng tạo các bài Blog để chia sẻ

Người dùng Người dùng đã đăng nhập Điều kiện kích hoạt Người dùng chọn mục Tạo Blog

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

Hiển thị trang tạo blog

Hệ thống hiển thị màn hình tạo blog

3 Người dùng chọn mục tạo blog

4 Hệ thống lưu trữ thông tin bài blog và thông báo “Chờ duyệt”

3.3.4.14 Use case Bình luận trên Blog

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

Tên Use case Bình luận trên Blog

Mục đích Người dùng tạo các bình luận trên Blog

Người dùng Người dùng đã đăng nhập Điều kiện kích hoạt Người dùng click vào ô bình luận trên bài Blog Trạng thái hệ thống trước khi bắt đầu Use case

Hệ thống hiển thị màn hình bài blog đã có bình luận

3 Người dùng chọn mục bài blog

4 Người dùng bình luận và gửi Luồng sự kiện phụ Không.

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

Tên Use case Xóa Blog

Mục đích Người dùng xóa bài Blog đã tạo

Người dùng Người dùng đã đăng nhập Điều kiện kích hoạt Người dùng chọn mục Xóa Blog

Hệ thống hiển thị màn hình tạo blog

3 Người dùng chọn bài blog

4 Người dùng nhấn nút xóa và xác nhận Luồng sự kiện phụ Không

3.3.4.16 Use case Làm bài BigTest

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

Tên Use case Làm bài BigTest

Mục đích Kiểm tra kiến thức của người dùng về khóa học đó Người dùng Người dùng đã đăng nhập. Điều kiện kích hoạt  Người dùng đã chọn bài học

Người dùng thực đã đăng nhập Người dùng đã học xong bài học của khóa học đó

Hệ thống hiển thị bài test

Luồng sự kiện chính 1 Người dùng nhấn vào BigTest

2 Trang web chuyển đến trang Làm bài BigTest

3 Người dùng làm bài test.

4 Hệ thống hiển thị kết quả kiểm tra, điểm số. Luồng sự kiện phụ Không.

3.3.4.17 Use case Bắt đầu khóa học

Bảng 3.21 Đặc tả Use case Bắt đầu khóa học

Tên Use case Bắt đầu khóa học

Mục đích Người dùng bắt đầu học.

Người dùng Người dùng đã đăng nhập. Điều kiện kích hoạt Người dùng chọn vào 1 bài học cụ thể.

Người dùng thực đã đăng nhập Người dùng đã chọn bài học cụ thể

Hệ thống hiển thị lần lượt các câu hỏi của bài học.

Luồng sự kiện chính 1 Người dùng chọn mục xem khóa học.

2 Hệ thống hiển thị các khóa học mà hệ thống có.

3 Người dùng chọn 1 khóa học cụ thể.

4 Người dùng chọn mục xem bài học.

5 Người dùng chọn vào 1 bài học đã được mở khóa trong danh sách bài học.

6 Hệ thống chuyển sang các màn hình chơi trò chơi. Luồng sự kiện phụ Không.

3.3.4.18 Use case Xem chi tiết khóa học

Bảng 3.22 Đặc tả Use case Xem chi tiết khóa học

Tên Use case Xem danh sách bài học

Mục đích Người dùng muốn xem danh sách bài học trong một khóa học cụ thể.

Người dùng Người dùng đã đăng nhập. Điều kiện kích hoạt  Người dùng thực hiện Use case 17.

 Người dùng chọn vào 1 khóa học cụ thể.

 Người dùng chọn vào mục xem danh sách bài học. Trạng thái hệ thống trước khi bắt đầu Use case

 Người dùng thực đã đăng nhập Người dùng đã chọn khóa học cụ thể Trạng thái hệ thống sau khi thực hiện Use case

Hệ thống hiển thị danh sách các bài học của một khóa học cụ thể mà người dùng chọn.

4 Hệ thống hiển thị các bài học của khóa học đó.

3.3.4.19 Use case Làm bài BigTest

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

Tên Use case Xem Blog

Mục đích Người dùng xem các bài đăng được chia sẽ về kiến thức anh văn

Người dùng Không Điều kiện kích hoạt Người dùng chọn mục Xem Blog

Hệ thống hiển thị danh sách các bài đăng

3 Người dùng chọn mục xem blog Luồng sự kiện phụ Không.

3.3.4.20 Use case Xem bảng xếp hạng

Bảng 3.24 Đặc tả Use case Xem bảng xếp hạng

Tên Use case Xem bảng xếp hạng khóa học

Mục đích Người dùng muốn xem bảng xếp hạng của hóa học, bao gồm thông tin về điểm làm bài kiểm tra cuối khóa của các học viên khác đã học khóa đó.

Người dùng Người dùng đã đăng nhập. Điều kiện kích hoạt  Người dùng thực hiện Use case 17.

 Người dùng chọn vào 1 khóa học cụ thể.

 Người dùng bấm chọn mục xem bảng xếp hạng.

 Người dùng thực đã đăng nhập Người dùng đã chọn bài học cụ thể

Hệ thống hiển thị danh sách các điểm và người dùng đã hoàn thành bài kiểm tra cuối khóa.

Tên Use case Giải trí

Mục đích Người dùng muốn chơi trò chơi ôn tập kiến thức. Người dùng Người dùng đã đăng nhập. Điều kiện kích hoạt  Người dùng đã đăng nhập

 Người dùng chọn mục Play Game Trạng thái hệ thống trước khi bắt đầu Use case

Hệ thống chuyển đổi các màn hình trò chơi.

Luồng sự kiện chính 1 Người dùng chọn mục Play Game.

2 Hệ thống hiển thị các Game mà hệ thống có.

3 Người dùng chọn 1 game cụ thể.

4 Người dùng chọn Play Game.

5 Hệ thống hiển thị trò chơi Luồng sự kiện phụ Không

3.3.4.22 Use case Chơi game Lật cặp

Bảng 3.26 Đặc tả Use case Chơi game Lật cặp

Tên Use case Chơi game Lật cặp

Mục đích Người dùng muốn chơi trò chơi ôn tập kiến thức.

Người dùng Người dùng đã đăng nhập. Điều kiện kích hoạt Người dùng đã đăng nhập

Người dùng đã ở use case 21

Hệ thống chuyển sang màn hình game Lật cặp

Luồng sự kiện chính 1 Người dùng chọn mục Lật cặp.

2 Hệ thống hiển thị các mức độ, nội dung để người dùng chọn

3 Người dùng chọn 1 mức độ, nội dung bài.

5 Hệ thống hiển thị trò chơi Luồng sự kiện phụ 3.a Người dùng không chọn mức độ, nội dung của game

Mục đích Người dùng muốn chơi trò chơi ôn tập kiến thức.

Hệ thống chuyển sang màn hình game Từ vựng rơi

Luồng sự kiện chính 1 Người dùng chọn mục Lật cặp.

2 Hệ thống hiển thị các mức độ, nội dung để người dùng chọn

3 Người dùng chọn 1 mức độ, nội dung bài.

7 Hệ thống hiển thị trò chơi Luồng sự kiện phụ 23.a Người dùng không chọn mức độ của game Không chuyển tiếp

3.3.4.24 Use case Xem phim ngắn

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

Tên Use case Xem phim ngắn

Mục đích Rèn luyện kĩ năng nghe đọc của người dùng qua phim

Người dùng Không Điều kiện kích hoạt Không

Hệ thống hiển thị video và bài kiểm tra

Luồng sự kiện chính  Người dùng chọn mục Game

 Người dùng chọn video trong Game

Luồng sự kiện phụ Người dùng trả lời câu hỏi bên dưới video

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

3.3.4.25 Use case Tạo khóa học

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

Tên Use case Tạo khóa học

Mục đích Người dùng muốn mở rộng bài học cho web

Hệ thống chuyển sang màn hình Create Course

Luồng sự kiện chính 1 Người dùng chọn mục Create Course ở header

2 Hệ thống hiển thị các input yêu cầu thông tin cần để tạo khóa học

3 Người dùng nhập nội dung đã chuẩn bị

5 Hệ thống lưu data vào database Luồng sự kiện phụ Nội dung người dùng đăng ký sẽ được admin/manager duyệt có đủ điều kiện để đăng bài không

3.3.4.26 Use case Xem danh sách khóa học đã tạo

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

Tên Use case Xem danh sách khóa học đã tạo

Mục đích Người dùng xem lại các khóa học mà mình đã tạo

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

Hệ thống chuyển sang màn hình danh sách khóa học mình đã tạo

Luồng sự kiện chính 1 Người dùng chọn mục My Course

2 Hệ thống hiển thị các khóa học người dùng đã tạo

3 Người dùng chọn 1 khóa học

4 Hệ thống hiển thị nội dung của khóa học Luồng sự kiện phụ Không

3.3.4.27 Use case Xóa khóa học

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

Tên Use case Xóa khóa học

Mục đích Người dùng muốn xóa khóa học mà mình đã tạo Người dùng Người dùng đã đăng nhập. Điều kiện kích hoạt Người dùng đã đăng nhập

Hệ thống chuyển sang màn hình game Từ vựng rơi

Luồng sự kiện chính  Người dùng chọn 1 mục khóa học

 Hệ thống hiển thị Dialog xác nhận Luồng sự kiện phụ Không

3.3.4.28 Use case Xem danh sách bình luận

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

Tên Use case Xem danh sách bình luận

Mục đích Người dùng muốn xem bình luận của bài học

Người dùng Không Điều kiện kích hoạt Không

Hệ thống hiển thị danh sách bình luận

Luồng sự kiện chính  Người dùng chọn mục News

 Người dùng lăn vào 1 bài news và xem bình luận

3.3.4.29 Use case Xóa bình luận

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

Tên Use case Xóa bình luận

Mục đích Người dùng/ quản trị viên muốn xóa bình luận

Người dùng Người dùng/ quản trị viên Điều kiện kích hoạt Không

Hệ thống hiển thị danh sách bình luận không có bình luận đó

 Người dùng chọn bình luận của chính mình/ quản trị viên chọn bình luận không hợp lệ và xóa

3.3.4.30 Use case Ẩn bình luận

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

Tên Use case Ẩn bình luận

Mục đích Người dùng/ quản trị viên muốn ẩn bình luận

Người dùng Người dùng/ quản trị viên Điều kiện kích hoạt Không

Hệ thống hiển thị danh sách bình luận không có bình luận đó

 Người dùng chọn bình luận của chính mình/ quản trị viên chọn bình luận không hợp lệ và ẩn

Thiết kế dữ liệu

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

STT Tên bảng dữ liệu Diễn giải

1 NGUOIDUNG Bảng Người dùng: lưu trữ thông tin người dùng.

Bảng Kết quả bài kiểm tra năng lực: lưu trữ kết quả bài kiểm tra năng lực của người dùng, dùng để làm cơ sở gợi ý khóa học.

3 LICHSUNGUOIDUNG Bảng lịch sử người dùng: lưu trữ lịch sử học tập của người dùng.

4 BLOG Bảng bài viết: lưu trữ các bài viết người dùng đăng.

5 CHITIETNHANXET Bảng chi tiết nhận xét: lưu trữ mô trả chi tiết nhận xét ứng với kết quả kiểm tra năng lực

Bảng bảng xếp hạng: lưu trữ tổng điểm các lần kiểm tra của người dùng đối với các loại bài kiểm tra khác nhau.

7 KHOAHOC Bảng khóa học: lưu trữ tên các khóa học theo chủ đề và phân loại từ dễ tới khó.

8 DEXUATLOTRINH Bảng đề xuất lộ trình: lưu trữ các lộ trình đề xuất dựa trên điểm test đầu vào.

9 LOTRINH Bảng lộ trình: lưu trữ chi tiết các mô tả lộ trình dựa trên lộ trình đề xuất

10 BINHLUAN Bảng bình luận: lưu trữ nội dung các bài bình luận của người dùng trên bài viết cụ thể

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 MaNguoiDung ObjectId Primary key Mã người dùng

2 TenNguoiDung String Not null Tên người dùng

3 Email String Not null Email người dùng

4 MatKhau String Not null Mật khẩu người dùng

5 NgaySinh Number Not null Số lượng học viên đã tham gia khóa học

6 HinhAnh String Not null Tên người tạo khóa học

7 MaChucVu ObjectId Foreign key Mã chức vụ của người dùng

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

1 MaKetQuaBaiTest ObjectId Primary key Mã kết quả bài test

2 MaNguoiDung ObjectId Foreign key Mã người dùng

3 MaBaiTest ObjectId Foreign key Mã bài test

4 Diem Number Not null Điểm

5 KyNang String Not null Kỹ năng

6 LanLamBai Number Not null Lần làm bài

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

1 MaLichSu ObjectId Primary key Mã lịch sử

3 MaKhoaHoc ObjectId Foreign key Mã khóa học

4 TrangThai Boolean Not null Trạng thái khóa học

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

1 MaBlog ObjectId Primarykey Mã blog

3 TieuDe String Not null Tiêu đề

1 MaBangXepHang ObjectId Primary key Mã bảng xếp hạng

2 MaBaiLam ObjectId Foreign key Mã bài làm

4 PhanLoai String Not null Phân loại

5 Diem Number Not null Điểm

6 LanLamBai Number Not null Lần làm bài

Bảng 3.41 Mô tả chi tiết bảng KHOAHOC

2 TenKhoaHoc String Not null Tên khóa học

3 HinhAnh String Not null Hình ảnh

4 MoTa String Not null Mô tả

5 KyNang String Not null Kỹ năng

6 CapDo String Not null Cấp độ

7 SoLuongNguoi Number Not null Số lượng người

Bảng 3.42 Mô tả chi tiết bảng DEXUATLOTRINH

1 MaLoTrinhDeXuat ObjectId Primary key Mã lộ trình đề xuất

2 MaLoTrinh ObjectId Foreign key Mã lộ trình

Bảng 3.43 Mô tả chi tiết bảng BINHLUAN

1 MaBinhLuan ObjectId Primary key Mã bình luận

3 MaBlog ObjectId Foreign key Mã blog

4 NoiDung String Not null Nội dung

Bảng 3.44 Mô tả chi tiết bảng TUVUNG

1 MaTuVung ObjectId Primary key Mã từ vựng

3 Nghia String Not null Nghĩa

4 PhatAm String Not null Phát âm

5 HinhAnh String Not null Hình ảnh

6 CapDo String Not null Cấp độ

7 Ten String Not null Tên

XÂY DỰNG TRANG WEB

Danh sách giao diện

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

STT Tên màn hình Ý nghĩa

1 Login Màn hình đăng nhập web

2 Sign Up Màn hình đăng ký

3 Forgot Pass Màn hình quên mật khẩu

4 Verify Màn hình lấy lại mật khẩu

5 Home Màn hình chính của web

6 History Màn hình xem lại lịch sử học tập của mình

7 ChangeInfor Màn hình thay đổi thông tin

8 News Màn hình xem tin tức mới

9 Courses Màn hình tất cả khóa học

10 Courses Detail Chi tiết thông tin khóa học

11 Vocabulary Màn hình trình bày nội dung bài học của khóa học

12 Big Test Màn hình bài kiểm tra lớn sau khóa học

13 Check Level Màn hình bài kiểm tra trình độ

14 Game Màn hình danh sách các game

15 Drop Game Màn hình game từ vựng rơi

16 Video Màn hình chiếu video để người dùng xem và học theo cách phát âm, cách đọc tiếng anh

17 MiniGame Màn hình chơi game để ôn lại nhiều từ vựng đã học

18 Scores Màn hình điểm số khi người dùng kết thúc bài kiểm tra

19 League Thứ hạng của người dùng trong khóa học

20 Manager List Màn hình quản lý danh sách các người quản lý ( dành cho admin chính)

21 Create Manager Màn hình tạo người quản lý (dành cho admin chính

22 Course Review Màn hình danh sách các khóa học đã được đăng ký ( dành cho người quản lý)

Chi tiết giao diện

4.3.1 Login o Courses: chuyển tới trang các khóa học Courses; o Sign Up: chuyển tới trang đăng ký; o Login: chuyển tới trang đăng nhập;

 Màn hình Login có các textbox để nhập thông tin;

 Màn hình Login có button Forgot Password để chuyển tới trang Forgot;

Hình 4.12 Giao diện trang Sign Up

 Màn hình Sign Up có thanh menu tương tự trang Login;

 Màn hình Sign Up có các textbox để nhập thông tin;

 Màn hình Sign Up có button Sign Up để đăng ký;

 Màn hình Sign Up có button Continue with Google để đăng ký với google;

 Màn hình Sign Up có thanh footer giống với Login.

Hình 4.13 Giao diện trang Forgot Password

Màn hình Forgot Pass có thanh menu tương tự trang Login;

Hình 4.14 Giao diện trang Verify

 Màn hình Verify có thanh menu tương tự trang Login;

 Màn hình Verify có các textbox để nhập thông tin;

 Màn hình Verify có button Save để lưu mật khẩu mới;

 Màn hình Verify có thanh footer giống với Login.

 Màn hình Home có thanh menu tương tự trang Login.

 Màn hình Home có component About để hiển thị thông tin cho người dùng biết về nội dung, chức năng của trang web.

Hình 4.16 Giao diện trang Create Course

 Màn hình Create Course có thanh menu tương tự trang Login.

 Màn hình Create Course có các textbox để yêu cầu người dùng nhập thông tin cần thiết để tạo ra khóa học.

 Màn hình Create Cours có button “Submit” để nộp các thông tin mà người dùng điền vào hệ thống.

 Màn hình Create Cours có thanh footer giống với Login.

Hình 4.17 Giao diện trang History

 Màn hình History có thanh menu tương tự trang Login.

 Màn hình History có table hiển thị toàn bộ thông tin mà người dùng đã học lên cho người dùng

Hình 4.18 Giao diện trang ChangeInfor

 Màn hình ChangeInfor có thanh menu tương tự trang Login;

 Màn hình ChangeInfor có các textbox để nhập và thay đổi thông tin nếu muốn;

 Màn hình News có thanh menu tương tự trang Login;

 Màn hình News có các ô tin từ người dùng đăng lên, và bên phải là các bình luận của người người khác (cũng có thể là chính người đó) đăng lên cho tin tức đó. Bên dưới bình luận là textbox để người dùng hiện tại bình luận vào tin tức đó.

 Phần trên có button “Add news” để người dùng có thể tự tạo 1 tin tức gì đó để chia sẻ cho mọi người.

 Màn hình News có thanh footer giống với Login.

Hình 4.20 Giao diện trang CoursesDetail

 Màn hình CoursesDetail có thanh menu, footer tương tự trang Login.

 Màn hình CoursesDetail có bảng biểu trình bày nội dung sẽ phải học của khóa học.

 Màn hình CoursesDetail có bảng tên khóa học và button Start Learn/ Listen để

Hình 4.21 Giao diện trang Vocab

 Màn hình Vocab có thanh menu, footer tương tự trang Login.

 Màn hình Vocab có bảng biểu trình bày chi tiết về từ vựng mà người dùng cần học.

 Màn hình Vocab có button “Pre” để trở về trang trước, button “Next” để tiếp tục sang các trang Game để ôn tập.

Hình 4.22 Giao diện trang Big test

 Màn hình Big Test có thanh menu, footer tương tự trang Login.

Hình 4.23 Giao diện trang Check Level

 Màn hình Check Level có thanh menu, footer tương tự trang Login.

 Màn hình Check Level có các ô từ vựng để người dùng chọn, sau đó dựa trên đó hệ thống sẽ đánh giá được trình độ người dùng đang ở mức nào

 Màn hình Check Level chứa button “Submitted” để người dùng nộp kết quả đã chọn

 Màn hình Check Level chứa button “Save my level” để khi người dùng lưu vào thì hệ thống ghi nhớ và gợi ý các khóa học phù hợp.

Hình 4.24 Giao diện trò chơi từ vựng rơi

 Màn hình Drop Game có thanh menu, footer tương tự trang Login.

 Màn hình Drop Game có một div lớn là màn hình để từ vựng rơi

Hình 4.25 Giao diện trang Video

 Màn hình Video có thanh menu, footer tương tự trang Login.

 Màn hình Video có tên chủ đề và video kể về câu chuyện của chủ đề đó.

 Màn hình Video có thêm các câu hỏi để người dùng trả lời sau khi xem xong video.

 Màn hình Video có nút “Submit” để biết được đáp án sau khi mình chọn.

Hình 4.26 Giao diện trang MiniGame

Hình 4.27 Giao diện trang Score

 Màn hình Scores có thanh menu, footer tương tự trang Login.

 Màn hình Scores có các biểu đồ hiển thị tỷ lệ điểm bài kiểm tra của người dùng.

 Màn hình Scores có bảng trình bày phần trăm đúng sai của người dùng, và câu đúng câu sai của người dùng.

 Màn hình Scores có các button để chuyển trang.

Hình 4.28 Giao diện trang League

 Màn hình League có thanh menu, footer tương tự trang Login.

Màn hình League có bảng biểu trình bày thứ hạng của các người chơi, và trình

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

 Màn hình Manager List có thanh menu, footer tương tự trang Login.

 Màn hình Manager List có table chứa thông tin của các manager cho trang(page/role này chỉ dành riêng cho admin)

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

 Màn hình Create Manager có thanh menu, footer tương tự trang Login.

 Màn hình Create Manager có các textbox để nhập thông tin của manager

 Màn hình Create Manager có button “Create Manager” để admin submit và tạo ra người quản lý mới cho web

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

 Màn hình Course Review có header, footer tương tự như page login

 Màn hình Course Review có table chứa danh sách các khóa học đã đăng kí bởi người dùng lên hệ thống

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

 Màn hình Check Course có header, footer tương tự như page login

 Màn hình Check Course có button “Request Correction” để từ chối những khóa học không đạt tiêu chuẩn.

Định dạng
Số trang	97
Dung lượng	5,55 MB