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