1. Trang chủ
  2. » Luận Văn - Báo Cáo

Xây dựng website hỗ trợ học tập và đánh giá năng lực

89 1 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây Dựng Website Hỗ Trợ Học Tập Và Đánh Giá Năng Lực
Tác giả Phan Cao Cường
Người hướng dẫn Th.S Nguyễn Trần Thi Văn
Trường học Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành Công nghệ Thông tin
Thể loại đề tài
Năm xuất bản 2022
Thành phố Hồ Chí Minh
Định dạng
Số trang 89
Dung lượng 5,83 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Cấu trúc

  • Chương 1. TỔNG QUAN (16)
    • 1.1. Lý do chọn đề tài (16)
    • 1.2. Mục tiêu nghiên cứu (16)
    • 1.3. Phạm vi của đề tài (17)
    • 1.4. Phương pháp nghiên cứu (17)
  • Chương 2. CƠ SỞ LÝ THUYẾT (19)
    • 2.1. Tổng quan về MERN Stack (19)
      • 2.1.1. MongoDB (19)
      • 2.1.2. ExpressJs (21)
      • 2.1.3. ReactJs (23)
      • 2.1.4. NodeJs (24)
  • Chương 3. KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU (25)
    • 3.1. Khảo sát hiện trạng (25)
      • 3.1.1. Bài thi đánh giá năng lực là gì ? (25)
      • 3.1.2. Cấu trúc đề thi (25)
      • 3.1.3. Mục tiêu kỳ thi đánh giá năng lực (25)
    • 3.2. Tính cấp thiết của đề tài (26)
  • Chương 4. ĐẶC TẢ YÊU CẦU HỆ THỐNG (28)
    • 4.1. Mô tả hệ thống (28)
    • 4.2. Yêu cầu chức năng (28)
      • 4.2.1. Yêu cầu người dùng (28)
      • 4.2.2. Yêu cầu hệ thống (29)
      • 4.2.3. Mô tả usecase (34)
    • 4.3. Yêu cầu phi chức năng (52)
      • 4.3.1. Khả năng sử dụng (52)
      • 4.3.2. Tính xác thực (52)
      • 4.3.3. Hiệu suất (52)
      • 4.3.4. Công cụ thực hiện (53)
  • Chương 5. THIẾT KẾ HỆ THỐNG (54)
    • 5.1. Thiết kế kiến trúc (54)
      • 5.1.1. Back-end (54)
      • 5.1.2. Cơ sở dữ liệu (56)
      • 5.1.3. Mô hình ERD (57)
      • 5.1.4. Danh sách bảng (57)
      • 5.1.5. Chi tiết bảng (58)
      • 5.1.6. Kiến trúc Front-end (61)
      • 5.1.7. Lược đồ tuần tự chức năng Đăng ký (63)
      • 5.1.8. Lược đồ tuần tự chức năng đăng nhập bằng email (64)
      • 5.1.9. Lược đồ tuần tự chức năng đăng nhập bằng google (65)
      • 5.1.10. Lược đồ tuần tự chức năng đăng nhập bằng facebook (0)
    • 5.2. Thiết kế giao diện (66)
      • 5.2.1. Quản lý người dùng (66)
      • 5.2.2. Quản lý dịch vụ (67)
      • 5.2.3. Thêm dịch vụ (68)
      • 5.2.4. Quản lý bài kiểm tra (69)
      • 5.2.5. Chỉnh sửa bài kiểm tra (69)
      • 5.2.6. Thêm bài kiểm tra (70)
      • 5.2.7. Quản lý topic (72)
      • 5.2.8. Giao diện điều hướng đến các chức năng chính (72)
      • 5.2.9. Giao diện nội dung chủ đề (73)
      • 5.2.10. Giao diện các đề kiểm tra (74)
      • 5.2.11. Giao diện chi tiết bài kiểm tra (74)
      • 5.2.12. Giao diện bài kiểm tra (76)
      • 5.2.13. Giao diện kết quả bài kiểm tra (77)
      • 5.2.14. Giao diện thống kê kết quả bài kiểm tra (78)
      • 5.2.15. Giao diện các gói dịch vụ (79)
      • 5.2.16. Giao diện luyện tập theo chủ đề (80)
  • Chương 6. CÀI ĐẶT VÀ KIỂM THỬ (82)
    • 6.1. Công cụ và môi trường phát triển (82)
    • 6.2. Công nghệ sử dụng (82)
    • 6.3. Quản lý Source code (82)
    • 6.4. Kiểm thử (83)
      • 6.4.1. Kiểm thử chức năng đăng ký (83)
      • 6.4.2. Kiểm thử tạo topic (83)
      • 6.4.3. Kiểm thử tạo bài kiểm tra (84)
  • Chương 7. TỔNG KẾT (86)
    • 7.1. Nội dung thực hiện được (86)
    • 7.2. Ưu và nhược điểm (86)
      • 7.2.1. Ưu điểm (86)
      • 7.2.2. Nhược điểm (87)
    • 7.3. Hướng phát triển (87)
  • TÀI LIỆU THAM KHẢO (87)

Nội dung

TỔNG QUAN

Lý do chọn đề tài

Công nghệ thông tin ngày nay bao gồm các phương pháp khoa học và công cụ kỹ thuật hiện đại, đặc biệt là kỹ thuật máy tính và viễn thông, nhằm khai thác hiệu quả nguồn tài nguyên thông tin trong mọi lĩnh vực Sự phát triển nhanh chóng của kỹ thuật máy tính và mạng điện tử đã đưa công nghệ thông tin lên một tầm cao mới Internet, một sản phẩm giá trị to lớn, đã trở thành nền tảng không thể thiếu cho việc truyền tải và trao đổi thông tin trên toàn cầu.

Internet đã giúp công việc trở nên nhanh chóng và tiết kiệm chi phí hơn Tuy nhiên, thông tin tràn lan trên mạng cần được kiểm chứng để tránh gây hoang mang cho học sinh Việc học từ nhiều nguồn khác nhau có thể giúp tăng khả năng vào đại học.

Đề tài "Xây dựng Website hỗ trợ học tập và đánh giá năng lực" được chọn nhằm áp dụng kiến thức đã học và hỗ trợ học sinh ôn luyện trước kỳ thi đánh giá năng lực đại học.

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

- Tìm hiểu về viết giao diện trên Website bằng ReactJs, viết các endpoint bằng Nodejs

- Khảo sát tình trạng và phân tích thiết kế ứng dụng bao gồm giao diện, các chức năng nhằm đáp ứng nhu cầu người dùng và người quản lý

- Xây dựng thành công website hỗ trợ học tập và đánh giá năng lực

Phạm vi của đề tài

- Công việc khảo sát và tìm hiểu sẽ dựa trên những khảo sát thực tế và các tài liệu liên quan

- Phân tích dữ liệu khảo sát và cấu trúc bài kiểm tra.

Phương pháp nghiên cứu

Nghiên cứu trong lớp học giúp sinh viên áp dụng kiến thức đã học để giải quyết vấn đề thực tế, cụ thể là xây dựng chương trình hoàn chỉnh có tính ứng dụng cao.

Lên kế hoạch thực hiện là bước quan trọng đầu tiên, giúp nhóm tác giả định hình rõ ràng hướng đi và mục tiêu của đề tài ngay từ giai đoạn lên ý tưởng, từ đó tiết kiệm thời gian và nâng cao hiệu quả công việc.

Chủ động tìm kiếm tài liệu, thông tin từ nhiều nguồn khác nhau như diễn đàn, mạng xã hội, sách báo, bạn bè, và giảng viên hướng dẫn là yếu tố then chốt Việc tự mình tìm tòi, học hỏi thay vì phụ thuộc vào nguồn có sẵn giúp nhóm đạt được kết quả tốt nhất.

Vận dụng kiến thức từ môn học để giải quyết bài toán là yếu tố then chốt, đòi hỏi bám sát đề tài và nội dung đã học để khai thác sâu Chương trình cần được ứng dụng thực tế, phù hợp với môi trường mục tiêu Bên cạnh đó, việc tích hợp kiến thức từ các môn học khác như Database và Lập trình Android giúp tăng tốc và nâng cao hiệu quả thực hiện đồ án.

Sau khi thu thập tài liệu, nhóm cần đọc và chọn lọc lại, đánh dấu những ý quan trọng để đảm bảo tính chính xác và phù hợp của thông tin.

3 quan trọng Ghi chú, tóm tắt một cách có hệ thống Sắp xếp theo một trật tự phù hợp với thói quen hoặc ý đồ trình bày của nhóm

CƠ SỞ LÝ THUYẾT

Tổng quan về MERN Stack

MERN stack is a popular open-source JavaScript-based technology stack that includes MongoDB, ExpressJS, React/React Native, and NodeJS, commonly used to build React Universal Apps.

MongoDB, một hệ quản trị cơ sở dữ liệu NoSQL mã nguồn mở, được sử dụng rộng rãi bởi hàng triệu người nhờ khả năng lưu trữ dữ liệu hướng tài liệu linh hoạt.

(document), các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh

In relational databases like MySQL or SQL Server, data is stored in tables, but MongoDB uses collections instead In MongoDB, a collection is analogous to a table in a relational database management system (RDBMS), while a document corresponds to a row MongoDB employs documents in place of rows, as used in RDBMS.

Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB

MongoDB sử dụng định dạng Document JSON, cho phép mỗi collection có kích thước và cấu trúc document khác nhau, tạo sự linh hoạt tối đa khi lưu trữ dữ liệu.

MongoDB nổi bật với khả năng mở rộng theo chiều ngang (Horizontal Scalability) một cách dễ dàng, nhờ vào kiến trúc cluster, là cụm các node chứa dữ liệu và giao tiếp với nhau Việc mở rộng hệ thống trở nên đơn giản bằng cách thêm một node mới vào cluster hiện có.

MongoDB nổi bật với hiệu năng cao, đặc biệt trong các thao tác truy vấn như tìm kiếm, cập nhật, thêm và xóa dữ liệu, vượt trội so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Thử nghiệm cho thấy, với lượng dữ liệu lớn, tốc độ insert của MongoDB có thể nhanh hơn MySQL tới 100 lần MongoDB cung cấp đa dạng các kiểu dữ liệu, đáp ứng nhu cầu lưu trữ và xử lý thông tin hiệu quả.

• Chuỗi: Đây là kiểu dữ liệu được sử dụng phổ biến nhất để lưu giữ dữ liệu Chuỗi trong MongoDB phải là UTF-8 hợp lệ

• Số nguyên: Kiểu dữ liệu này được sử dụng để lưu một giá trị số Số nguyên có thể là 32 bit hoặc 64 bit phụ thuộc vào Server của bạn

• Boolean: Kiểu dữ liệu này được sử dụng để lưu giữ một giá trị Boolean (true/false)

• Double: Kiểu dữ liệu này được sử dụng để lưu các giá trị số thực dấu chấm động

• Min/ Max keys: Kiểu dữ liệu này được sử dụng để so sánh một giá trị với các phần tử BSON thấp nhất và cao nhất

• Mảng: Kiểu dữ liệu này được sử dụng để lưu giữ các mảng hoặc danh sách hoặc nhiều giá trị vào trong một key

• Timestamp: Giúp thuận tiện cho việc ghi chép hoặc đánh dấu thời điểm một Document được sửa đổi hoặc được thêm vào

• Object: Kiểu dữ liệu này được sử dụng cho các Document được nhúng vào

• Null: Kiểu dữ liệu này được sử dụng để lưu một giá trị Null

Kiểu dữ liệu Symbol, tương tự như chuỗi, thường được các ngôn ngữ lập trình sử dụng để biểu diễn các định danh duy nhất.

Kiểu dữ liệu Date được dùng để lưu trữ ngày và giờ hiện tại theo định dạng UNIX time, cho phép tạo đối tượng Date tùy chỉnh với ngày, tháng, năm cụ thể.

• Object ID: Kiểu dữ liệu này được sử dụng để lưu giữ ID của Document

• Binary data: Kiểu dữ liệu này được sử dụng để lưu giữ dữ liệu nhị phân

• Code: Kiểu dữ liệu này được sử dụng để lưu giữ JavaScrip code vào trong Document

• Regular expression: Kiểu dữ liệu này được sử dụng để lưu giữ Regular Expresion

Express.js là một framework mã nguồn mở miễn phí dành cho Node.js, được sử dụng để thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng.

Express.js đơn giản hóa việc xây dựng ứng dụng web và API nhờ sử dụng ngôn ngữ lập trình Javascript quen thuộc và là một khuôn khổ của Node.js, cung cấp nhiều mã nguồn có sẵn, giúp lập trình viên làm việc hiệu quả hơn.

Expressjs là một framework nhẹ giúp đơn giản hóa việc xây dựng các ứng dụng web đơn trang (single-page), đa trang (multi-page) hoặc hybrid, đồng thời tổ chức ứng dụng theo kiến trúc MVC một cách hiệu quả Để sử dụng Expressjs, lập trình viên cần có kiến thức về Javascript và HTML.

Expressjs là một phần quan trọng của ngăn xếp phần mềm MEAN, giúp quản lý các ứng dụng web một cách dễ dàng Thư viện Javascript của Expressjs hỗ trợ các nhà lập trình xây dựng ứng dụng web hiệu quả và nhanh chóng hơn Expressjs còn được sử dụng để nâng cao các chức năng của Node.js.

Các Module quan trọng được cài đặt cùng với express:

• Body-parser: Là một lớp trung gian NodeJS để xử lý JSON, dữ liệu thô, text và mã hóa URL

• Cookie-parser: Giúp chuyển đổi header của Cookie và phân bố đến các req.cookies

• Multer: Là một thành phần trung gian trong NodeJS để xử lý phần muitipart/from-data

React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng, nó không phải là 1 framework js nào hết

React hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được

React được xây dựng xung quanh các component

React không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau…

ReactJS là một thư viện JavaScript mã nguồn mở được Facebook thiết kế để xây dựng các ứng dụng web nhanh, hiệu quả và hấp dẫn với lượng mã hóa tối thiểu Mục tiêu chính của ReactJS là tạo ra các trang web mượt mà, nhanh chóng, có khả năng mở rộng cao và đơn giản.

Node.js là một nền tảng độc lập, xây dựng trên JavaScript Runtime của Chrome, cho phép xây dựng ứng dụng mạng nhanh chóng và dễ dàng mở rộng.

Node.js được thiết kế bởi Ryan Lienhart Dahl - một kỹ sư phần mềm người Mỹ vào năm 2009 và phát triển dưới sự bảo trợ của Joyent

Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao

Các ứng dụng được tạo ra bởi Node.js có tốc độ xử lý nhanh, realtime thời gian thực

Node.js là lựa chọn lý tưởng cho các sản phẩm có lưu lượng truy cập lớn Công nghệ này phù hợp khi cần thay đổi công nghệ hiện tại và mở rộng dự án Node.js đặc biệt hữu ích cho việc phát triển nhanh các dự án Startup.

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

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

3.1.1 Bài thi đánh giá năng lực là gì ?

Kỳ thi đánh giá năng lực là bài kiểm tra quan trọng để xét tuyển vào Đại học, được tổ chức riêng bởi các trường Đại học nhằm đánh giá năng lực của thí sinh.

Bài thi gồm 120 câu hỏi, thời gian làm 150 phút không hoàn toàn dựa trên lý thuyết, mà còn bao gồm kiến thức xã hội và suy luận logic

Bài đánh giá năng lực tập trung vào việc tích hợp kiến thức và tư duy thông qua các hình thức đa dạng, bao gồm cung cấp số liệu, dữ liệu và công thức cơ bản, nhằm đánh giá khả năng suy luận và giải quyết vấn đề của thí sinh.

3.1.3 Mục tiêu kỳ thi đánh giá năng lực

Hình 3.1 Cấu trúc bài thi

Kỳ thi đánh giá năng lực là một kênh xét tuyển độc lập, mở ra cơ hội lớn hơn vào đại học cho thí sinh Phương thức này không phụ thuộc vào kết quả thi tốt nghiệp THPT hay học bạ, giúp đa dạng hóa các hình thức tuyển sinh.

Hướng nghiệp cho học sinh cần dựa trên nền tảng kiến thức và năng lực cơ bản Việc này bao gồm kiểm tra kiến thức tự nhiên, xã hội, tư duy và kỹ năng của học sinh Thái độ của học sinh cũng là một yếu tố quan trọng cần được đánh giá trong quá trình hướng nghiệp.

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

Kỳ thi Đánh giá năng lực là một kênh xét tuyển độc lập do đó tăng cơ hội vào Đại học của các thí sinh

so với kỳ thi THPT Quốc gia gây trở ngại cho thí sinh vùng sâu vùng xa trong việc tiếp cận thông tin và phương pháp ôn luyện hiệu quả.

Nhận thấy sự cần thiết của việc ôn luyện và kiểm tra kiến thức trước kỳ thi, đề tài "Xây dựng website hỗ trợ học tập và đánh giá năng lực" được thực hiện nhằm cung cấp một nền tảng giúp người dùng ôn luyện và thi thử hiệu quả, từ đó đánh giá năng lực bản thân một cách chính xác.

Mục đích của đề tài

• Cung cấp tài liệu ôn thi theo các nội dung

• Chức năng cho phép người dùng làm bài trắc nghiệm tương tự như đề thi thật

• Cho phép người dùng luyện đề bằng các bài thi được hệ thống tạo ra dựa vào ngân hàng câu hỏi các đề thi theo từng năm

• Cho phép người dùng luyện tập với các câu hỏi theo chủ đề tự chọn

• Cho phép người dùng theo dõi thống kê về dữ liệu học tập của mình một cách trực quan

• Nghiên cứu và xây dựng hệ thống bao gồm giao diện người dùng và giao diện quản lý

Mục tiêu về công nghệ:

• Tìm hiểu đặc điểm, chức năng, cách thức sử dụng và điểm nổi bật của công nghệ MERN: MongoDB, ExpressJS, React, NodeJS

• Cài đặt bộ công cụ sử dụng được MERN

• Áp dụng kiến thức đã học trước đây của các môn học khác để hoàn thành

ĐẶC TẢ YÊU CẦU HỆ THỐNG

Mô tả hệ thống

Website cung cấp kiến thức cơ bản cần nắm, bài kiểm tra qua các năm và phương thức quản lý hệ thống website

Hệ thống hướng đến 4 đối tượng người dùng:

• Nhóm chưa đăng nhập: có thể xem các thông tin cơ bản trên website như lộ trình học, các bài học theo từng chủ đề…

Thành viên có thể tham gia thi thử từ các đề thi thật trên hệ thống, xem kết quả thi ngay sau khi hoàn thành và luyện tập hiệu quả với các chế độ luyện thi đa dạng của website.

Nhóm thành viên nâng cao là nhóm khách hàng đã mua gói dịch vụ, được hưởng các quyền lợi đặc biệt như xem giải thích chi tiết câu hỏi trong đề thi, theo dõi thống kê số liệu các lần thi trước, và nắm bắt quá trình học tập một cách toàn diện, giúp tối ưu hóa hiệu quả ôn luyện và đạt kết quả tốt nhất.

• Admin: quản lý nội dung, quản lý người dùng, quản lý câu hỏi và đề thi, quản lý doanh thu, quản lý bảng tin, thống kê số liệu.

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

Dựa vào mô tả vấn đề có thể xác định được các tác nhân của hệ thống như sau:

Tên tác nhân Chức năng

Nhóm người chưa đăng nhập

- Xem thông tin của chủ đề bài học

- Xem thông tin các bài học

- Xem các gói dịch vụ

- Xem phương thức luyện tập Thành viên - Đăng xuất

- Xem kết quả sau khi thực hiện kiểm tra

- Xem thống kê số liệu học tập

- Thực hiện thi với câu hỏi từ các đề thi thật khác nhau

- Luyện thi bằng dựa trên ngân hàng câu hỏi theo chủ đề

- Xem lịch sử luyện thi và làm bài thi trên hệ thống Thành viên nâng cao

- Xem giải thích đáp án của câu hỏi trong đề thi

- Xem đáp án của câu hỏi

- Xem cơ sở lý thuyết ứng với từng câu hỏi Quản trị viên - Quản lý người dùng (Chặn truy cập, thống kê người dùng)

- Quản lý các chủ đề bài học

- Quản lý nội dung các bài học

- Quản lý các gói dịch vụ

Bảng 4.1 Mô tả tác nhân

15 4.2.2.1 Usecase mô tả tác nhân

Hình 4.1 Usecase mô tả tác nhân

16 4.2.2.2 Usecase với nhóm chưa đăng nhập

Hình 4.2 Usecase với nhóm chưa đăng nhập

Hình 4.3 Usecase với thành viên

4.2.2.4 Usecase với thành viên nâng cao

Hình 4.4 Usecase với thành viên nâng cao

Name Đăng ký tài khoản

Brief description Người dùng cần tạo một tài khoản cá nhân để đăng nhập vào hệ thống Website

Actor(s) Người dùng chưa có tài khoản

Pre-conditions Người dùng cần có đủ điều kiện cần thiết để vào hệ thống

Khi đăng ký thành công, hệ thống sẽ kiểm tra tính hợp lệ của email và thông báo hoàn tất quá trình đăng ký, đồng thời cho phép người dùng đăng nhập ngay lập tức.

- Nếu thất bại: hệ thống thông báo lỗi khi dữ liệu khởi tạo có bất kì vấn đề không phù hợp, tài khoản sẽ không được tạo

Basic flow Usecase bắt đầu khi người dùng chọn chức năng đăng ký tài khoản

1 Người dùng truy cập vào website và chọn button đăng ký trên thanh header của website

2 Người dùng nhập các thông tin bắt buộc: o Email: email phải đúng định dạng của một email tiêu chuẩn o Fullname: Tên của người đăng ký và không chứa ký tự đặt biệt, không được phép để trống o Password: mật khẩu để an toàn thì có ít nhất một ký tự đặt biệt, một chữ số, một chữ hoa và có đợ dài tối tiểu 8-16 ký tự o Confirm password: Mật khẩu xác nhận phải trùng khớp với mật khẩu đã nhập ở trên

3 Hệ thống kiểm dữ liệu mà người gửi lên

4 Thêm tài khoản vào cơ sở dữ liệu

5 Hiển thị thông báo khi đăng ký tài khoản thành công

Alternative flow Nếu dữ liệu người dùng nhập lên không hợp lệ Những trường hợp sau sẽ xảy ra:

1 Dữ liệu không đúng format, thiếu dữ liệu cần thiết

2 Email đã tồn tại trên hệ thống

Bảng 4.2 Đăng ký tài khoản

4.2.3.2 Đăng nhập bằng email

Name Đăng nhập bằng email

Brief description Người dùng sử dụng email chưa được đăng ký để đăng nhập vào hệ thống mà không cần phải tạo tài khoản trước đó

Actor(s) Người dùng chưa đăng nhập

Pre-conditions Người dùng cần có đủ điều kiện cần thiết để vào hệ thống

Post-conditions Nếu thành công: hệ thống kiểm tra tính hợp lệ của tài khoản và các tính năng mà tài khoản hiện có

Nếu thất bại: Trả về lỗi hiện tại và không truy cập vào hệ thống được.

Basic flow Usecase bắt đầu khi người dùng thực hiện tính năng đăng nhập vào hệ thống

1 Người dùng chọn nút đăng nhập

3 Hệ thống kiểm tra email có trong hệ thống

4 Hệ thống kiểm tra email và password có hợp lệ không

5 Hệ thống kiểm tra giao dịch có hợp lệ hay không và chuyển đến trang chủ.

Alternative flow Nếu người dùng nhập sai thông tin Những công việc sau đây được thực hiện:

1 Hệ thông sẽ báo các lỗi liên quan như thiếu tin cậy, chưa đăng ký với nhà phát hành

2 Người dùng nhập các email và mật khẩu

3 Quay lại bước 3 ở Basic flow

Bảng 4.3 Đăng nhập bằng email

4.2.3.3 Đăng nhập bằng Google

Name Đăng nhập bằng Google

Brief description Người dùng đăng nhập vào hệ thống bằng tài khoản google

Actor(s) Người dùng chưa đăng nhập

Pre-conditions Người dùng cần có đủ điều kiện cần thiết để vào hệ thống

Post-conditions Nếu thành công: hệ thống kiểm tra tính hợp lệ của tài khoản và các tính năng mà tài khoản hiện có

Nếu thất bại: Trả về lỗi hiện tại và không truy cập vào hệ thống được

Basic flow Usecase bắt đầu khi người dùng thực hiện tính năng đăng nhập vào hệ thống

1 Vào màn hình đăng nhập và chọn nút Google

2 Một cửa sổ hiện ra cho phép người dùng chọn tài khoản mong muốn

3 Kiểm tra tính hợp lệ của tài khoản và đối chiếu với cơ sở dữ liệu

4 Thành công chuyển đến giao diện trang chủ

Alternative flow Nếu người dùng nhập sai thông tin Những công việc sau đây được thực hiện:

1 Hệ thống kiểm tra tính xác thực của tài khoản

2 Cấp quyền cho tài khoản hoặc chọn một tài khoản khác

3 Quay lại bước 2 ở Basic flow sẽ được thực hiện

Bảng 4.4 Đăng nhập bằng Google

4.2.3.4 Đăng nhập bằng Facebook

Name Đăng nhập bằng Facebook

Brief description Người dùng đăng nhập vào trang web bằng tài khoản facebook

Actor(s) Người dùng chưa đăng nhập

Pre-conditions Người dùng cần có đủ điều kiện cần thiết để vào hệ thống

Post-conditions Nếu thành công: hệ thống kiểm tra tính hợp lệ của tài khoản và các tính năng mà tài khoản hiện có

Nếu thất bại: Trả về lỗi hiện tại và không truy cập vào hệ thống được

Basic flow Usecase bắt đầu khi người dùng thực hiện tính năng đăng nhập vào hệ thống

1 Vào màn hình đăng nhập và chọn nút Facebook

2 Một cửa sổ hiện ra cho phép người dùng chọn tài khoản mong muốn

3 Kiểm tra tính hợp lệ của tài khoản và đối chiếu với cơ sở dữ liệu

4 Thành công chuyển đến giao diện trang chủ.

Alternative flow Nếu người dùng nhập sai thông tin Những công việc sau đây được thực hiện:

1 Hệ thống kiểm tra tính xác thực của tài khoản

2 Cấp quyền cho tài khoản hoặc chọn một tài khoản khác

Quay lại bước 2 ở Basic flow sẽ được thực hiện Quay lại bước 2 ở Basic flow sẽ được thực hiện

Bảng 4.5 Đăng nhập bằng Facebook

Brief description Người dùng quên mật khẩu

Actor(s) Người dùng đã có tài khoản

Pre-conditions Người dùng cần có đủ điều kiện cần thiết để vào hệ thống

Post-conditions Nếu thành công: Người dùng cập nhật lại mật khẩu mới

Nếu thất bại: Thông báo lỗi và mặt khẩu không được cập nhật

Basic flow Usecase bắt đầu khi người dùng chọn chức năng quên mật khẩu

1 Vào màn hình đăng nhập chọn quên mật khẩu

2 Nhập email đã đăng ký nhưng quên mật khẩu

4 Chọn vào đường dẫn gửi đến

5 Điền mật khẩu mới và mật khẩu xác nhận

7 Thông báo cập nhật thành công

Alternative flow Nếu người dùng nhập sai thông tin Những công việc sau đây được thực hiện:

1 Email chưa được đăng ký

2 Người dùng nhập lại email

3 Quay lại bước 2 ở Basic flow sẽ được thực hiện

Brief description Các kiến thức có trong bài kiểm tra được tổng hợp theo chủ đề

Actor(s) Người dùng chưa đăng nhập hoặc đã đăng nhập

Pre-conditions Mọi người dùng đều có thể xem

Post-conditions Nếu thành công: Kiến thức sắp xếp theo chủ đề

Nếu thất bại: Dữ liệu chủ đề sẽ bị ẩn đi

Basic flow Use case bắt đầu khi :

1 Người dùng chọn kiến thức trên thanh điều hướng

2 Chuyển đến màn hình chủ đề của từng kiến thức

Bảng 4.7 Xem lộ trình học

4.2.3.7 Xem thông tin chủ đề bài học

Name Xem thông tin chủ đề bài học

Brief description Xem chi tiết từng chủ đề

Actor(s) Người dùng chưa đăng nhập hoặc người dùng đã đăng nhập

Pre-conditions Mọi người dùng

Nếu thao tác thành công, hệ thống hiển thị chi tiết nội dung theo chủ đề đã chọn, tối ưu trải nghiệm người dùng Ngược lại, nếu thất bại, dữ liệu chi tiết của chủ đề sẽ bị ẩn đi, đảm bảo tính toàn vẹn và bảo mật thông tin.

Basic flow Usecase bắt đầu khi:

1 Người dùng chọn Kiến thức trên thanh điều hướng

2 Chủ một chủ đề mà người dùng quan tâm

3 Màn hình hiển thị chi tiết nội dung của chủ đề được chọn

Bảng 4.8 Xem thông tin chủ đề bài học

4.2.3.8 Xem thông tin bài học

Name Xem thông tin bài học

Brief description Xem nội dung bài học

Actor(s) Người dùng chưa đăng nhập

Pre-conditions Người dùng chưa đăng nhập truy cập vào trang web

Khi thành công, màn hình hiển thị thông tin chi tiết về bài học thuộc chủ đề đã chọn; ngược lại, hệ thống sẽ thông báo lỗi nếu không thể hiển thị thông tin.

Basic flow Usecase bắt đầu khi:

1 Người dùng chọn Learning Path ở thanh Header ở trang chủ

2 Màn hình chuyển sang các kiến thức có trong hệ thống

3 Người dùng chọn chủ đề bất kỳ

4 Màn hình chuyển sang trang nội dung chủ đề bài học

5 Chọn một bài học bất kỳ

6 Màn hình chuyển sang trang nội dung mà người dùng chọn chủ đề học

Bảng 4.9 Xem thông tin bài học

4.2.3.9 Xem chi tiết bài kiểm tra

Name Xem chi tiết bài kiểm tra

Brief description Xem chi tiết bài kiểm tra qua từng năm

Actor(s) Người dùng chưa đăng nhập

Pre-conditions Người dùng chưa đăng nhập truy cập vào trang web

Khi thành công, hệ thống hiển thị thông tin cơ bản của năm được chọn; ngược lại, nếu thất bại, hệ thống sẽ thông báo lỗi không thể hiển thị thông tin.

Basic flow Usecase bắt đầu khi:

1 Người dùng chọn Exam ở thanh Header ở trang chủ

2 Màn hình chuyển sang danh sách bài kiểm tra qua các năm

3 Chọn một bài thi bất kỳ

4 Màn hình chuyển sang trang xem chi tiết bài kiểm tra của năm đó

Bảng 4.10 Xem chi tiết bài kiểm tra

4.2.3.10 Xem các gói dịch vụ

Name Xem các gói dịch vụ

Brief description Người dùng chưa đăng nhập có thể xem thông tin chi tiết của các gói dịch vụ

Actor(s) Người dùng chưa đăng nhập

Pre-conditions Người dùng chưa đăng nhập truy cập vào trang web

Post-conditions Nếu thành công: Màn hình hiển thị thông tin về các gói dịch vụ

Nếu thất bại: hệ thống báo lỗi không thể hiển thị thông tin

Basic flow Usecase bắt đầu khi:

1 Người dùng chọn Pricing ở thanh Header ở trang chủ

2 Màn hình chuyển sang danh sách các gói dịch vụ

Bảng 4.11 Xem các gói dịch vụ

4.2.3.11 Xem các phương thức luyện tập

Name Xem các phương thức luyện tập

Brief description Người dùng có thể xem phương thức luyện tập theo chủ đề hoặc đề thi mà hệ thống cung cấp

Actor(s) Người dùng chưa đăng nhập

Pre-conditions Người dùng chưa đăng nhập truy cập vào trang web

Khi thành công, màn hình hiển thị thông tin chi tiết về các phương pháp luyện tập; ngược lại, hệ thống sẽ thông báo lỗi nếu không thể hiển thị thông tin.

Basic flow Usecase bắt đầu khi:

1 Người dùng chọn Practice ở thanh Header ở trang chủ

2 Màn hình chuyển sang danh sách các phương thức luyện tập

Bảng 4.12 Xem các phương thức luyện tập

Brief description Người dùng muốn đăng xuất tài khoản khỏi hệ thống

Actor(s) Người dùng đã đăng nhập

Pre-conditions Người dùng đã đăng nhập thành công vào hệ thống

Post-conditions Nếu thành công: Hệ thống cho phép người dùng thoát khỏi hệ thống và tiếp tục sử dụng những chức năng của một khác vãng lai

Nếu thất bại: hệ thống thông báo lỗi không thể đăng xuất và người dùng vẫn giữ trạng thái đăng nhập

Basic flow Usecase bắt đầu khi người dùng chọn chức năng đăng xuất tài khoản

1 Người dùng chọn biểu tượng ảnh đại diện

3 Hệ thống trở lại trang đăng nhập

Name Thực hiện kiểm tra với bài thi

Brief description Thành viên có thể luyện thi bằng các thực hiện các đề thi

Pre-conditions Thành viên đã đăng nhập thành công

Khi thành công, hệ thống hiển thị giao diện làm bài, cho phép thành viên đọc câu hỏi và chọn đáp án; ngược lại, nếu thất bại, hệ thống sẽ báo lỗi không thể hoàn thành kiểm tra.

Basic flow Usecase bắt đầu khi

1 Thành viên chọn Kiểm tra ở thanh điều hướng ở trang chủ

2 Chọn một đề thi bất kỳ

3 Chọn nút Kiểm tra ngay

5 Chọn nút Chọn và tiếp tục

6 Sau khi hoàn thành bấm nút Nộp để nộp bài

Bảng 4.14 Thực hiện kiểm tra

4.2.3.14 Xem kết quả sau khi thực hiện kiểm tra

Name Xem kết quả sau khi thực hiện kiểm tra

Sau khi hoàn thành bài kiểm tra và nộp bài thành công, thành viên có thể xem lại kết quả chi tiết và các số liệu thống kê liên quan đến lần thi đó, giúp đánh giá hiệu quả và theo dõi sự tiến bộ.

Actor(s) Người dùng đã đăng nhập

Pre-conditions Người dùng đăng nhập thành công

Nếu thành công, giao diện kết quả bài làm hiển thị đầy đủ, cho phép người dùng xem đáp án và thống kê chi tiết; nếu thất bại, hệ thống sẽ thông báo lỗi do sự cố hiển thị dữ liệu từ server.

Basic flow Usecase bắt đầu khi:

1 Người dùng chọn Kiểm tra ở thanh điều hướng ở trang chủ

2 Chọn một đề thi bất kỳ

3 Chọn nút Kiểm tra ngay

4 Hoàn thành bài thi và bấm Nộp

5 Giao diện kết quả hiện ra trên màn hình

Alternative flow Usecase bắt đầu khi:

1 Thành viên chọn biểu tượng Avatart góc phải và chọn Profile

2 Chọn Lịch sử kiểm tra

3 Màn hình hiển thị lịch sử làm bài thi

4 Chọn một bài thi bất kỳ và bấm View Detail

5 Kết quả bài thi hiện ra màn hình

Bảng 4.15 Xem kết quả sau khi thực hiện kiểm tra

Name Thanh toán dịch vụ

Brief description Thành viên có thể xem các gói dịch vụ và lựa chọn và thanh toán gói dịch vụ đó bằng ví điện tử

Pre-conditions Thành viên đã đăng nhập thành công

Thanh toán thành công hiển thị thông báo và yêu cầu đăng nhập lại, ngược lại, hệ thống báo lỗi nếu giao dịch thất bại do sự cố server.

Basic flow Use case bắt đầu khi:

1 Thành viên chọn Nâng cấp ở thanh điều hướng ở trang chủ

2 Chọn một gói dịch vụ muốn mua

3 Màn hình chuyển đến trang thanh toán bằng Paypal

5 Giao diện thanh toán thành công hiện ra màn hình và yêu câu thành viên đăng nhập lại để sử dụng dịch vụ

Bảng 4.16 Thanh toán dịch vụ

4.2.3.16 Luyện thi dựa trên ngân hàng câu hỏi theo chủ đề

Name Luyện thi dựa trên ngân hàng câu hỏi theo chủ đề

để tối ưu hóa quá trình ôn luyện.

Pre-conditions Thành viên đã đăng nhập thành công

Khi thành công, giao diện luyện thi hiển thị cho phép chọn chủ đề câu hỏi; nếu thất bại, hệ thống báo lỗi do không thể luyện thi.

Basic flow Use case bắt đầu khi:

1 Người dùng chọn Luyện tập ở thanh điều hướng ở trang chủ

2 Chọn một hoặc nhiều chủ đề bất kỳ

3 Chọn số câu và thời gian thực hiện làm bài

4 Chọn nút Kiểm tra ngay

5 Hoàn thành bài thi và bấm Nộp

6 Giao diện kết quả hiện ra trên màn hình

Bảng 4.17 Luyện thi dựa trên ngân hàng câu hỏi theo chủ đề

4.2.3.17 Xem lịch sử giao dịch

Name Xem lịch sử giao dịch

Brief description Người dùng có thể xem lịch sử mua dịch vụ của mình

Actor(s) Người dùng đã đăng nhập

Pre-conditions Thành viên đăng nhập thành công

Post-conditions Nếu thành công: Hiển thị lịch sử các gói đã mua

Nếu thất bại: hệ thống báo lỗi do sever không thể hiển thị

Basic flow Use case bắt đầu khi:

1 Người dùng chọn biểu tượng góc phải là chọn Profile

2 Chọn lịch sử giao dịch

3 Giao diện kết quả hiện ra trên màn hình

Bảng 4.18 Xem lịch sử giao dịch

4.2.3.18 Xem lịch sử luyện thi và thống kê số liệu các lần thi

Name Xem lịch sử luyện thi và thống kê số liệu các lần thi

Brief description Người dùng có thể xem lại lịch sử các lần kiểm tra và thống kê số liệu của các lần thi

Actor(s) Người dùng đã đăng nhập

Pre-conditions Thành viên đã đăng nhập thành công

Khi thành công, hệ thống hiển thị giao diện cho phép người dùng xem lịch sử thi và các biểu đồ biểu diễn dữ liệu, giúp người dùng theo dõi quá trình và kết quả thi một cách trực quan.

Nếu thất bại: hệ thống báo lỗi

Basic flow Use case bắt đầu khi:

1 Người dùng chọn thông tin Profile

2 Chọn lịch sử kiểm tra

3 Thông tin các lần thi được hiển thị

Bảng 4.19 Xem lịch sử luyện thi và thống kê số liệu các lần thi

4.2.3.19 Xem giải thích đáp án của câu hỏi trong đề thi

Name Xem giải thích đáp án của câu hỏi trong đề thi

Brief description Đối với người dùng đã nâng cấp lên gói nâng cao, sau khi làm đề thi hoặc luyện tập có thể xem giải thích câu hỏi đó

Actor(s) Người dùng đã mua gói nâng cấp

Pre-conditions Người dùng đã mua gói nâng cao và tiến hành kiểm tra một bài thi bất kì

Post-conditions Nếu thành công: Màn hình hiển thị lời giải của câu hỏi nếu có

Nếu thất bại: Không xuất hiện lời giải thích

Basic flow Usecase bắt đầu khi:

1 Chọn luyện tập hoặc chọn một bài thi

4 Chú thích của câu hỏi hiện ra nếu có

Bảng 4.20 3.2.4.20 Xem giải thích đáp án của câu hỏi trong đề thi

4.2.3.20 Xem xem đáp án của câu hỏi

Name Xem xem đáp án của câu hỏi

Brief description Đối với người dùng đã nâng cấp lên gói nâng cao, sau khi làm đề thi hoặc luyện tập có thể xem đáp án câu hỏi đó

Actor(s) Người dùng đã mua gói nâng cấp

Pre-conditions Người dùng đã mua gói nâng cao và tiến hành kiểm tra một bài thi bất kì

Post-conditions Nếu thành công: Hiển thị đáp được bôi xanh và đáp lựa chọn của mình Nếu thất bại: Đáp án không được bôi xanh

Basic flow Usecase bắt đầu khi:

1 Chọn luyện tập hoặc chọn một bài thi

4 Đáp án câu hỏi được bôi xanh

Bảng 4.21 Xem xem đáp án của câu hỏi

4.2.3.21 Xem cơ sở lý thuyết của câu hỏi

Name Xem cơ sở lý thuyết của câu hỏi

Người dùng gói nâng cao có thể dễ dàng xác định chủ đề và kiến thức liên quan đến từng câu hỏi sau khi hoàn thành bài thi hoặc luyện tập, giúp tối ưu hóa quá trình học tập và ôn luyện.

Actor(s) Người dùng đã mua gói nâng cấp

Pre-conditions Người dùng đã mua gói nâng cao và tiến hành kiểm tra một bài thi bất kì

Khi thành công, hệ thống hiển thị một bảng chứa tất cả các câu hỏi cùng với nút xem lý thuyết, trong khi đó, nếu thất bại, trang "không tìm thấy" sẽ xuất hiện, đảm bảo người dùng nhận được phản hồi rõ ràng về trạng thái của yêu cầu.

Basic flow Usecase bắt đầu khi:

1 Chọn luyện tập hoặc chọn một bài thi

5 Chọn câu hỏi muốn xem lý thuyết

6 Cơ sở lý thuyết sẽ hiện ra

Bảng 4.22 Xem cơ sở lý thuyết của câu hỏi

Brief description Admin thêm đề thi với các câu hỏi đã chuẩn bị

Pre-conditions Admin đã đăng nhập thành công

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

• Người dùng chỉ có thể thực kiện các chức năng như luyện tập, mua gói, điểm tra đều phải đăng nhập trước đó

• Người dùng mua gói nâng cao sẽ có thêm nhiều chức năng so với người dùng cơ bản

• Admin chịu trách nhiệm quản lý hoàn bộ hệ thống

• Bảo mật: Mỗi người dùng đều có tài khoản riêng biệt, mọi thông tin riêng tư đều được mã hóa

- Nếu hệ thống lỗi tìm cách khác phục ngay

- Chỉ cho phép các lỗi không quá nghiêm trọng ảnh hưởng đến hệ thống

• Cải thiện hiệu xuất để người dùng cảm thấy website mượt nhất có thể

• Duy trì kết nối ổn định

Các công cụ như VSCode, MongoDB Compass, Enterprise Architect

THIẾT KẾ HỆ THỐNG

Thiết kế kiến trúc

Node.js là một nền tảng mã nguồn mở JavaScript runtime, xây dựng trên Chrome V8, lý tưởng cho việc phát triển ứng dụng web realtime và được cộng đồng back-end developer ưa chuộng Node.js cho phép lập trình viên viết ứng dụng phía server bằng Javascript Cấu trúc thư mục thường bao gồm "share" cho các tính năng tái sử dụng và "Api" để xử lý yêu cầu từ client.

• Thự mục “Controller” có vai trò điều hướng dữ liệu

• Thư mục “Model” chứa tất cả các files như schema của bạn và và các chức năng cần thiết cho schema cũng sẽ nằm ở đây

• Thư mục “Route” chứa tất cả các tuyến đường mà bạn đã tạo bằng cách sử dụng Express Router và kết hợp với Controllers

• Thư mục “Service” chứa các xử lý logic từ Controler xuống Model

Để đảm bảo tính cấu trúc và dễ bảo trì, dự án được tổ chức thành các thư mục chính: "Validation" để xác thực dữ liệu, "configs" chứa cấu hình hệ thống, "libs" để lưu trữ log người dùng, "loaders" để chia nhỏ cấu hình, "middleware" để xác thực trung gian, và "Utils" chứa các tham số dùng chung.

5.1.1.2 Thiết kế luồng dữ liệu

5.1.1.3 Quy trình xây dựng endpoint

- Bước 1: Xác định mục đích của endpoint

- Bước 2: Lựa chọn phương thức phù hợp

- Bươc 3: Định tuyến đường đi

- Bước 4: Điều hướng dữ liệu

- Bước 5: Xử lý logic dữ liệu

Hình 5.2 Mô hình luồng dữ liệu Hình 5.1 Cấu trúc BackEnd

- Bước 7: Gửi Resquest ra bên ngoài

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

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

1 User Dữ liệu người dùng

2 Role Dữ liệu quyền người dùng

3 Pricing Dữu liệu gói nâng cấp

4 UserPricing Dữ liệu gói nâng cấp của người dùng

5 UserExam Dữ liệu một lần thi của người dùng

6 Submission Dữ liệu đáp án của người dùng

7 Exam Dữ liệu đề thi

8 Question Dữ liệu câu hỏi trong đề thi

9 QuestionItem Dữ liệu một đáp án trong câu hỏi

10 Topic Dữ liệu chủ đề câu hỏi

11 TopicSection Dữ liệu các đầu mục của chủ đề

12 TopicLesson Dữ liệu nội dung của đầu mục chủ đề

Bảng 4 1 Bảng diễn giải các bảng dữ liệu

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

2 name Tên người dùng String

3 email Email người dùng String

4 avatar Ảnh người dùng String

5 role Quyền người dùng String

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

3 pricing Dữ liệu gói đăng ký String

4 expireDate Ngày hết hạn String

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

3 description Mô tả gói String

4 abilities Chức năng gói dịch vụ

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

2 user Dữ liệu người thi String

3 exam Dữ liệu đề thi String

4 submissions Dữ liệu bài làm String

5 status Trạng thái bài thi String

6 isPassed Trạng thái đậu String

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

2 answer Dữ liệu câu trả lời String

3 question Dữ liệu câu hỏi String

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

2 name Tên đề thi String

3 content Nội dung đề thi String

4 description Mô tả đề thi String

5 isPublic Trạng thái công khai Boolean

7 numberExamines Số người thi Number

8 hasShowRightAnswer Trạng thái hiện đáp án

10 questions Câu hỏi của đề Array

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

2 type Loại câu hỏi String

3 explanation Mô tả đáp án String

4 topic Dữ liệu chủ đề String

5 choices Dữ liệu đáp án Array

6 answer Đáp án được chọn String

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

2 label Nhãn đáp án String

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

2 title Tên Chủ đề String

4 objective Thông tin tiêu chí Array

6 sections Dữ liệu chủ đề Array

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

4 lessons Dữ liệu bài học Array

5 status Trạng thái hoạt động String

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

1 _id Khóa định danh String

2 title Tên bài học String

4 status Trạng thái hoạt động String

Kiến trúc cho thư mục dự án sao cho phù hợp ngay từ ban đầu là 1 trong

When working with React JS, it's crucial to adopt effective architectural practices, including separating styles into shared CSS files while keeping components distinct from their associated styles.

Component trong ReactJS là cấu trúc cốt lõi, tạo nên mọi ứng dụng React và giúp xây dựng giao diện người dùng (UI) dễ dàng hơn.

ReactJS là một thư viện JavaScript mạnh mẽ, cho phép chia giao diện người dùng thành các phần nhỏ, độc lập gọi là component, giúp quản lý và tái sử dụng code hiệu quả hơn Thư mục base chứa các component cốt lõi của chương trình, tạo nền tảng vững chắc cho việc xây dựng giao diện người dùng cuối cùng.

- Thư mục core chứa các API của client gọi đến Service

- Thư mục “pages” chứa giao hiện của website

- Thư mục “store” nhận vào các state để Redux xử lý

- Thư mục “utils” chứa các component, functions, có thể tái sử dụng ở các dự án khác

- Thư mục hooks chứa các function có khả năng tái sử dụng

- Thư mục scss design layout

Hình 5.5 Sơ đồ react-redux

Để xây dựng phiên bản tĩnh của ứng dụng hiển thị mô hình dữ liệu, hãy tạo các component tái sử dụng và truyền dữ liệu bằng props, là cách truyền dữ liệu từ component cha sang component con Không nên sử dụng state cho phiên bản tĩnh này, vì state dành cho các tương tác và dữ liệu thay đổi theo thời gian.

Actions, hay còn gọi là events, là bước khởi đầu trong luồng hoạt động của Redux, cho phép gửi dữ liệu từ ứng dụng đến Redux Store Mỗi khi trạng thái ứng dụng hoặc render của view thay đổi, một action sẽ được tạo ra Dữ liệu mô tả action này xuất phát từ tương tác người dùng, API calls và form submissions.

Trong ứng dụng Redux, Store là nơi duy nhất lưu trữ trạng thái ứng dụng, quản lý và cho phép truy cập state thông qua `getState()`, cập nhật state bằng `dispatch()`, và đăng ký/hủy đăng ký listeners để theo dõi thay đổi.

View: Là nơi sẽ hiển thị các dữ liệu được cung cấp bởi store Lược đồ tuần tự

5.1.7 Lược đồ tuần tự chức năng Đăng ký

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

5.1.8 Lược đồ tuần tự chức năng đăng nhập bằng email

5.1.9 Lược đồ tuần tự chức năng đăng nhập bằng google

Hình 5.7 Lược đồ tuần tự chức năng đăng nhập bằng email

Hình 5.8 Lược đồ tuần tự chức năng đăng nhập bằng google

5.1.10 Lược đồ tuần tự chức năng đăng nhập bằng facebook

Thiết kế giao diện

Hình 5.9 Giao diện quản lý người dùng

Cho phép admin chặn hoặc bỏ chọn người dùng

Bảng 5.1 Mô tả giao diện quản lý người dùng

Hình 5.10 Giao diện quản lý dịch vụ

STT Thành phần Mô tả

1 Edit Chỉnh sửa dịch vụ hiện có

2 Delete Xóa dịch vụ hiện có

3 New Service Thêm dịch vụ mới

Bảng 5.2 Mô tả giao diện quản lý dịch vụ

STT Thành phần Mô tả

2 Description Giới thiệu nội dung dịch vụ

3 Duration Số ngày sử dụng

Hình 5.11 Giao diện thêm dịch vụ

6 Close Hủy bỏ thêm mới

Bảng 5.3 Mô tả giao diện thêm dịch vụ

5.2.4 Quản lý bài kiểm tra

STT Thành phần Mô tả

1 New Exam Thêm bài thi

2 Edit Chỉnh sửa đề thi hiện có

3 Delete Xóa bài thi hiện có

Bảng 5.4 Mô tả giao diện quản lý bài kiểm tra

5.2.5 Chỉnh sửa bài kiểm tra

Hình 5.12 Giao diện quản lý bài kiểm tra

STT Thành phần Mô tả

1 Save Exam Lưu các thay đổi

2 Title Tên bài kiểm tra

3 Content Giới thiệu nội dung trong bài kiểm tra

4 Add new question Thêm câu hỏi cho bài kiểm tra

Bảng 5.5.Mô tả giao diện chỉnh sửa bài kiểm tra

Hình 5.13 Giao diện chỉnh sửa bài kiểm tra

STT Thành phần Mô tả

1 Title Exam Tiêu đề bài kiểm tra

2 Description Mô tả nếu có

3 Content Giới thiệu nội dung trong bài kiểm tra

4 Submit Tạo bài kiểm tra

5 Close Hủy bỏ thêm mới

Bảng 5.6 Mô tả giao diện thêm bài kiểm tra Hình 5.14 giao diện thêm bài kiểm tra

STT Thành phần Mô tả

1 New Topic Thêm topic mới

2 Edit Chỉnh sửa topic hiện có

3 Delete Xóa topic hiện có

Bảng 5.7 Mô tả giao diện quản lý topic

5.2.8 Giao diện điều hướng đến các chức năng chính

STT Thành phần Mô tả

1 Trang chủ Thông tin cơ bản của kì thi

2 Kiến thức Các kiến thức phân theo chủ đề

3 Kiểm tra Danh sách các đề kiểm tra các năm

4 Nâng cấp Các gói dịch vụ

5 Luyện tập Giao diện luyện tập theo chủ đề

Bảng 5.8 Mô tả giao diện điều hướng các trang

Hình 5.15 Giao diện quản lý topic

Hình 5.16 Giao diện điều hướng các trang

5.2.9 Giao diện nội dung chủ đề

Hình 5.17 Giao diện nội dung các chủ đề

STT Thành phần Mô tả

1 Ngôn ngữ Nội dung liên quan đến chủ đề ngôn ngữ nếu được chọn

2 Toán học, tư duy logic, phân tích số liệu

Nội dung liên quan đến chủ đề toán học, tư duy logic, phân tích số liệu nếu được chọn

3 Giải quyết vấn đề Nội dung liên quan đến chủ giải quyết vấn đề nếu được chọn

Hình 5.18 Mô tả giao diện nội dung các chủ đề

5.2.10 Giao diện các đề kiểm tra

Bảng 5.9 Mô tả giao diện các đề kiểm tra

5.2.11 Giao diện chi tiết bài kiểm tra

STT Thành phần Mô tả

1 View Detail Xem chi tiết bài kiểm tra

Hình 5.19 Giao diện các đề kiểm tra

STT Thành phần Mô tả

1 Kiểm tra ngay Bắt đầu kiểm tra

Bảng 5.10 Mô tả giao diện chi tiết bài kiểm tra Hình 5.20 Giao diện chi tiết bài kiểm tra

5.2.12 Giao diện bài kiểm tra

STT Thành phần Mô tả

1 Danh sách câu hỏi Các câu hỏi có trong bài kiểm tra

2 Lựa chọn Bốn phương án lựa chọn

3 Câu trước Quay lại câu trước đó

4 Chọn và tiếp tục Đánh dấu câu được chọn và chuyển đến câu tiếp theo

Bảng 5.11 Mô tả giao diện bài kiểm tra Hình 5.21 Giao diện bài kiểm tra

5.2.13 Giao diện kết quả bài kiểm tra

STT Thành phần Mô tả

1 Danh sách câu hỏi Câu hỏi có trong bài kiểm tra

2 Đáp án câu hỏi Đáp án của từng câu hỏi

3 Câu trước Quay lại câu trước đó

4 Câu tiếp theo Đi đến câu tiếp theo

5 Kiểm tra lại Kiểm tra lại

Bảng 5.12 Mô tả giao diện kết quả bài kiểm tra Hình 5.22 Giao diện kết quả bài kiểm tra

5.2.14 Giao diện thống kê kết quả bài kiểm tra

STT Thành phần Mô tả

1 Tỉ lệ câu hỏi theo chủ đề

Biểu đồ mô tả phần trăm chủ đề

2 Tỉ lệ câu hỏi trả lời Biểu đồ mô tả phần trăm trả lời

3 Số câu trả lời theo chủ đề Giải quyết vấn đề

Số câu trả lời đúng và tỉ lệ câu đúng theo chủ đề

4 Số câu trả lời theo chủ đề Toán học, tư duy, phân tích số liệu

Số câu trả lời đúng và tỉ lệ câu đúng theo chủ đề

Hình 5.23 Giao diện thống kê kết quả bài kì

5 Số câu trả lời theo chủ đề Ngôn ngữ

Số câu trả lời đúng và tỉ lệ câu đúng theo chủ đề

Bảng 5.13 Mô tả giao diện thống kê kết quả bài thi

5.2.15 Giao diện các gói dịch vụ

STT Thành phần Mô tả

1 Gói cơ bản Gói cơ bản mọi thành viên đề có sẵn

2 Gói nâng cao Người dùng phải mua để có tính nâng cao

Bảng 5.14 Mô tả giao diện các gói dịch vụ Hình 5.24 Giao diện các gói dịch vụ

5.2.16 Giao diện luyện tập theo chủ đề

Hình 5.25 Giao diện luyện tập theo chủ đề

STT Thành phần Mô tả

1 Luyện tập Luyện tập theo chủ đề Ngôn ngữ

2 Luyện tập Luyện tập theo chủ đề Toán học, tư duy logic, phân tích số liệu

3 Luyện tập Luyện tập theo chủ đề Giải quyết vấn đề

4 Luyện tập chuẩn Luyện tập theo tất cả chủ đề

Bảng 5.15 Mô tả giao diện luyện tập theo chủ đề

CÀI ĐẶT VÀ KIỂM THỬ

Công cụ và môi trường phát triển

Modelling tools Draw.io, Enterprise Architect

Bảng 6.1 Công cụ và môi trường phát triển

Công nghệ sử dụng

- RestFul API : Xây dựng endpoint

- GoogleAPI : Đăng nhập bằng email

- FaceBookApi: Đăng nhập bằng tài khoản facebook

Quản lý Source code

- Source: https://gitlab.com/phancaocuong0000/project_final.git

Kiểm thử

6.4.1 Kiểm thử chức năng đăng ký

Hình 6.1 Kiểm thử chức năng đăng ký

Hình 6.2 Kiểm thử chức năng tạo topic

6.4.3 Kiểm thử tạo bài kiểm tra

Hình 6.3 Kiểm thử chức năng tạo bài kiểm tra

TỔNG KẾT

Nội dung thực hiện được

Sau khi nghiên cứu, tìm hiểu, nhóm đã thực hiện được các công việc sau:

- Tiếp cận được một cơ sở dữ liệu mới

- Sử dụng được các query mà Mongodb hỗ trợ

- Xậy dựng mô hình hiện đang phổ biến là MVC thông qua boilerplate

- Tạo ra endpoint hỗ trợ cho Frontend

- Các đồng bộ hóa các tiến trình, giảm thiểu xung đột

- Tìm hiểu được tính năng, cơ chế vận hành của ReactJs

- Thiết kế giao diện kết hợp ReactJs và các thư viện khác

- Sử dụng một số thư viện phổ biếng hiện nay giải quyết các vấn đề cụ thể nhanh chóng

- Hoàn thành các tính năng mà người dùng có thể sư dụng

- Tự dựng được một chương trình hoàn chỉnh và có thể sử dụng

- Áp dụng các kiến thức được học vào đề tài

- Ứng dụng một số công nghệ mới

Ưu và nhược điểm

- Chương trình có giao diện dễ nhìn, trực quan, sinh động giúp người dùng thoải mái khi sử dụng

- Đáp ứng các chức năng cơ bản của một website luyện thi: Củng cố kiến thức, năng cấp để có tính năng mới

- Có phân cấp quyền đăng nhập theo 3 dạng người dùng

- Chương trình có Verify theo gmail cung cấp

- Các dữ liệu các nhân riêng tư được mã hóa trước khi lưu vào database

- Chương trình còn khá đơn giản

- Chưa deploy lên hệ thống thực tế

- Vẫn chưa có nhiều chức năng mở rộng.

Hướng phát triển

- Tìm hiểu thêm các tính năng nâng cao

- Phát triển trên hệ thống FlashForm khác

- Tối ưu hóa hệ thống tốt hơn, tăng tính bảo mật

Ngày đăng: 17/07/2023, 14:58

HÌNH ẢNH LIÊN QUAN

Hình 2.4. ReactJS - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Hình 2.4. ReactJS (Trang 23)
Hình 2.5. NodeJS - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Hình 2.5. NodeJS (Trang 24)
Hình 3.1. Cấu trúc bài thi - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Hình 3.1. Cấu trúc bài thi (Trang 25)
Hình 4.1. Usecase mô tả tác nhân - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Hình 4.1. Usecase mô tả tác nhân (Trang 30)
Hình 4.3. Usecase với thành viên - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Hình 4.3. Usecase với thành viên (Trang 33)
Hình 4.5. Usecase với Admin - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Hình 4.5. Usecase với Admin (Trang 34)
Bảng 4.6. Quên mật khẩu - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Bảng 4.6. Quên mật khẩu (Trang 39)
Hình 5.3. Lược đồ cơ sở dữ liệu - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Hình 5.3. Lược đồ cơ sở dữ liệu (Trang 56)
Hình 5.5. Sơ đồ react-redux - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Hình 5.5. Sơ đồ react-redux (Trang 62)
Hình 5.6. Lược đồ tuần tự chức năng Đăng ký - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Hình 5.6. Lược đồ tuần tự chức năng Đăng ký (Trang 64)
Bảng 5.13. Mô tả giao diện thống kê kết quả bài thi - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Bảng 5.13. Mô tả giao diện thống kê kết quả bài thi (Trang 79)
Hình 6.2. Kiểm thử chức năng tạo topic - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Hình 6.2. Kiểm thử chức năng tạo topic (Trang 84)
Hình 6.3. Kiểm thử chức năng tạo bài kiểm tra - Xây dựng website hỗ trợ học tập và đánh giá năng lực
Hình 6.3. Kiểm thử chức năng tạo bài kiểm tra (Trang 85)

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

🧩 Sản phẩm bạn có thể quan tâm

w