Xây dựng website dạy học số sử dụng công nghệ mern stack

Giao diện đẹp nhưng hơi khó sử dụng hơn Giao diện ở mức căn bản và khó cho người dùng mới khai thác lỗ hổng sẽ khó khăn hơn Đây là mã nguồn mở nên là việc có thể dựa vào mã nguồn và tìm

TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Giáo dục 4.0 là mô hình giáo dục thông minh, kết nối chặt chẽ giữa nhà trường, nhà quản lý và doanh nghiệp, tạo điều kiện cho sinh viên phát triển năng lực cá nhân một cách tự do Mô hình này không chỉ gắn kết công nghệ với sự phát triển kinh tế, xã hội trong thời đại 4.0 mà còn được áp dụng rộng rãi tại nhiều trường đại học ở Việt Nam và trên toàn thế giới.

Giáo dục 4.0 tại các trường cao đẳng, đại học đã trở nên linh hoạt hơn, ứng dụng công nghệ và thiết bị hiện đại để tạo điều kiện cho học sinh, sinh viên trải nghiệm và thực hành Học tập không chỉ giới hạn trong lớp học hay phòng thí nghiệm mà còn mở rộng ra các tổ chức doanh nghiệp, giúp sinh viên rèn luyện kiến thức thực tiễn Điều này giúp họ có tay nghề, kinh nghiệm và khả năng thích ứng cao khi ra trường Trong bối cảnh kinh tế biến động, việc nâng cao chất lượng nhân lực là cần thiết, đòi hỏi giáo dục phải đổi mới và sáng tạo.

Nhiều nước đang gặp khó khăn trong việc phát triển nguồn nhân lực do thiếu kinh nghiệm làm việc thực tế, kỹ năng phân tích và tổng hợp thông tin, cũng như khả năng làm việc độc lập Trong bối cảnh cách mạng công nghệ đang tạo ra những cơ hội mới, việc áp dụng giáo dục 4.0 trở thành giải pháp cần thiết để nâng cao chất lượng nguồn nhân lực.

Công nghệ giáo dục 4.0 sẽ mang đến một phương pháp học tập linh hoạt, không còn gò bó vào lý thuyết suông hay học thuộc lòng Học sinh và sinh viên sẽ được trang bị kiến thức sâu sắc, phù hợp với chuyên ngành mà họ theo đuổi.

Công nghệ 4.0 trong giáo dục giúp người học áp dụng kiến thức vào thực tiễn, từ đó nắm vững vấn đề thay vì chỉ học lý thuyết Mô hình giáo dục này tạo động lực cho học sinh, sinh viên phấn đấu trau dồi kiến thức, kinh nghiệm thực tiễn và chuyên môn.

KHẢO SÁT HIỆN TRẠNG CỦA CÁC WEBSITE TƯƠNG TỰ

Đánh giá tổng quan cả 3 trang web

Bảng 1: Phân tích chức năng của các website tương tự

CÁC TIÊU CHÍ SHUB UTEXLMS EDUZ

Giao diện Website Giao diện đẹp, dễ sử dụng Giao diện đẹp nhưng hơi khó sử dụng hơn

Giao diện ở mức căn bản và khó cho người dùng mới

Tốc độ phản hồi Nhanh Nhanh Nhanh

Bảo mật của mã nguồn đóng làm cho việc khai thác lỗ hổng trở nên khó khăn hơn Ngược lại, với mã nguồn mở, người dùng có thể truy cập vào mã nguồn và dễ dàng tìm ra cách tấn công.

Mã nguồn đóng nên việc khai thác lỗ hổng sẽ khó khăn hơn

Quản trị Hệ thống không quá lớn nên việc quản trị dễ dàng

Hệ thống lớn với lượng người dùng lớn nên việc quản trị sẽ khó khăn hơn

Về cơ bản đây là 1 trang web cho phép người dùng truy cập vào các khóa học nên cũng không quá khó để quản trị

Tính năng website Gồm những tính năng cơ bản cho 1 trang web ELearning

Nhiều tính năng tuy nhiên không dễ sử dụng cho những người mới

Chức năng khá nhiều tuy nhiên là quá khó cho người mới sử dụng

Tốc độ tải trang website

Tốc độ load nhanh Tốc độ load nhanh Tốc độ load nhanh

Dễ dàng thao tác và điều hướng Điều hướng thao tác dễ dàng, dễ thực hiện

Một số chỗ điều hướng còn đang hơi khó sử dụng Điều hướng chưa được tốt lắm

Thân thiện với các thiết bị di động

Không có responsive Có responsive đầy đủ Có responsive

Hạn chế tối thiểu các lỗi

Phần lớn lỗi đã được hạn chế ít thấy bug ở console và thao tác khá mượt mà

Còn một số bug nhỏ tuy nhiên cũng không đáng gì so với tính năng đồ sộ

Một số chỗ thì chưa thể biết là bị giới hạn quyền hay là bugs

Website dễ dàng nâng cấp

Có thể thêm được nhiều tính năng một cách dễ dàng mà không ảnh hưởng đến những tính năng cũ

Số lượng tính năng phần lớn đã có code sẵn chỉ cần áp dụng vào site custom lại là được

Giao diện hiện tại chưa đủ tốt nên việc phát triển thêm tính năng thì chỉ gây khó hiểu cho người dùng nhiều hơn

Website dễ dàng triển khai

Website sử dung giao diện và số tính năng cũng không nhiều thì việc triển khai web lên host sẽ không tốn quá nhiều tài nguyên và nguồn lực

Website có số lượng tính năng quá là nhiều nên việc triển khai cho những cơ sở nhỏ những nơi chưa có đủ nguồn lực thì là không thể

Website sử dụng giao diện và số tính năng cũng không nhiều nên việc triển khai web lên host sẽ không tốn quá nhiều tài nguyên và nguồn lực

Các chức năng đặc biệt của từng trang web

Bảng 2: Phân tích chức năng của các website tương tự

CÁC TIÊU CHÍ SHUB UTEXLMS EDUZ

Giao diện Website Giao diện đẹp, dễ sử dụng Giao diện đẹp nhưng hơi khó sử dụng hơn

Giao diện ở mức căn bản và khó cho người dùng mới

Tốc độ phản hồi Nhanh Nhanh Nhanh

Bảo mật của mã nguồn đóng làm cho việc khai thác lỗ hổng trở nên khó khăn hơn Ngược lại, với mã nguồn mở, người dùng có thể truy cập vào mã nguồn và dễ dàng tìm ra cách tấn công.

Mã nguồn đóng nên việc khai thác lỗ hổng sẽ khó khăn hơn

Quản trị Hệ thống không quá lớn nên việc quản trị dễ dàng

Hệ thống lớn với lượng người dùng lớn nên việc quản trị sẽ khó khăn hơn

Về cơ bản đây là 1 trang web cho phép người dùng truy cập vào các khóa học nên cũng không quá khó để quản trị

Tính năng website Gồm những tính năng cơ bản cho 1 trang web ELearning

Nhiều tính năng tuy nhiên không dễ sử dụng cho những người mới

Chức năng khá nhiều tuy nhiên là quá khó cho người mới sử dụng

Tốc độ tải trang website

Tốc độ load nhanh Tốc độ load nhanh Tốc độ load nhanh

Dễ dàng thao tác và điều hướng Điều hướng thao tác dễ dàng, dễ thực hiện

Một số chỗ điều hướng còn đang hơi khó sử dụng Điều hướng chưa được tốt lắm

Thân thiện với các thiết bị di động

Không có responsive Có responsive đầy đủ Có responsive

Hạn chế tối thiểu các lỗi

Phần lớn lỗi đã được hạn chế ít thấy bug ở console và thao tác khá mượt mà

Còn một số bug nhỏ tuy nhiên cũng không đáng gì so với tính năng đồ sộ

Một số chỗ thì chưa thể biết là bị giới hạn quyền hay là bugs

Website dễ dàng nâng cấp

Có thể thêm được nhiều tính năng một cách dễ dàng mà không ảnh hưởng đến những tính năng cũ

Số lượng tính năng phần lớn đã có code sẳn chỉ cần áp dụng vào site custom lại là được

Giao diện hiện tại chưa đủ tốt nên việc phát triển thêm tính năng thì chỉ gây khó hiểu cho người dùng nhiều hơn

Website dễ dàng triển khai

Website sử dung giao diện và số tính năng cũng không nhiều thì việc triển khai web lên host sẽ không tốn quá nhiều tài nguyên và nguồn lực

Website có số lượng tính năng quá là nhiều nên việc triển khai cho những cơ sở nhỏ những nơi chưa có đủ nguồn lực thì là không thể

Website sử dụng giao diện và số tính năng cũng không nhiều nên việc triển khai web lên host sẽ không tốn quá nhiều tài nguyên và nguồn lực

KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

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

Tạo và tham gia các khoá học

Diễn đàn trao đổi, tương tác giữa các thành viên trong lớp, có thể đăng bài, bình luận

Làm bài kiểm tra trắc nghiệm trên ứng dụng

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

Giao diện đẹp, đơn giả, dễ sử dụng

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

Hạn chế xuất hiện lỗi trên giao diện người dùng

Thân thiện với các thiết bị di động (responsive).

Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Đề tài nhấn mạnh tầm quan trọng của việc nâng cao kỹ năng lập trình thông qua việc học công nghệ mới, nhằm phát triển ứng dụng web Bên cạnh đó, nó cũng tập trung vào việc quản lý học sinh và đánh giá năng lực thông qua hình thức trắc nghiệm khách quan.

Đề tài không chỉ có ý nghĩa khoa học mà còn hứa hẹn đóng góp tích cực cho phương pháp dạy học online trong quá trình Chuyển đổi số giáo dục tại Việt Nam.

CÁC CÔNG NGHỆ SỬ DỤNG

KIẾN TRÚC CHUNG CỦA HỆ THỐNG

Hình 1: Hình minh hoạ kiến trúc hệ thống

The overall architecture of the system consists of three traditional layers: the front-end layer using ReactJS, the back-end application layer built with ExpressJS and NodeJS, and the database layer utilizing MongoDB.

Kiến trúc ứng dụng bao gồm 6 phần cơ bản, trong đó người dùng (client) gửi yêu cầu thông qua tầng giao diện Frontend sẽ chuyển tiếp yêu cầu đó đến backend, nơi nhận và truy xuất cơ sở dữ liệu (CSDL) để trả lại thông tin mà người dùng mong muốn cho frontend hiển thị.

TÌM HIỂU CÔNG NGHỆ MERN STACK

1.2.1 Công nghệ MERN stack là gì?

Thuật ngữ MERN Stack được dùng để chỉ tập hợp các công nghệ dựa trên ngôn ngữ lập trình

JavaScript Chúng được sửa dụng để phát triển ứng dụng web full-stack Bốn chữ M-E-R-N đại diện cho bốn công nghệ chính cấu thành nên giải pháp này:

MongoDB là một cơ sở dữ liệu NoSQL, lưu trữ dữ liệu dưới định dạng JSON, giúp dễ dàng truyền tải dữ liệu giữa server và client.

 E - Express.js là một web framework được xây dựng trên Node.js Nó được sử dụng để tạo API và phát triển ứng dụng web

React.js là thư viện JavaScript hàng đầu để phát triển giao diện người dùng (UI), được Facebook phát triển Ra mắt vào năm 2013, React.js là một công cụ mã nguồn mở phổ biến trong cộng đồng lập trình.

 N - Node.js là Java Runtime Environment (JRE), được sử dụng để tạo ra web server

Hình 2: Tổng quan MERN Stack 1.2.2 Quy trình hoạt động của MERN Stack

 Người dùng tương tác với các component của React.js ở giao diện người dùng

 Bất kỳ tương tác nào tạo ra một yêu cầu thay đổi dữ liệu được gửi đến Node.js để phân tích cú pháp yêu cầu

 Node.js chuyển yêu cầu đã được phân tích qua máy chủ Express.js để thực hiện việc kêu gọi đến MongoDB để lấy hoặc thiết lập dữ liệu

 MongoDB sẽ lấy dữ liệu được yêu cầu và trả về cho Express.js

 Express.js lại truyền dữ liệu về cho Node.js và Node.js gửi kết quả dữ liệu cho React.js

 React.js sẵn sàng hiển thị thông tin mà người dùng muốn có trên giao diện người dùng

Hình 3: Quy trình hoạt động của MERN Stack

1.2.3 Lý do lựa chọn công nghệ MERN Stack

1.2.3.1 Đơn giản hóa việc chuyển đổi giữa máy khách và máy chủ

Phát triển ứng dụng với MERN Stack giúp lập trình viên tiết kiệm thời gian và công sức, vì chỉ cần sử dụng một ngôn ngữ duy nhất là JavaScript cho cả máy khách và máy chủ.

Chuyển code sang một framework khác được viết bởi một framework cụ thể sẽ dễ dàng hơn với sự hỗ trợ của MERN Stack

Với MERN, việc kiểm tra ứng dụng trên nền tảng đám mây trở nên dễ dàng sau khi hoàn tất quy trình phát triển Ngoài ra, MERN cũng hỗ trợ việc thêm thông tin bổ sung một cách thuận tiện thông qua việc thêm các trường vào biểu mẫu.

Sử dụng MERN Stack cho phát triển ứng dụng chỉ cần lập trình viên thành thạo JavaScript, trong khi LAMP Stack yêu cầu nhiều kỹ năng hơn Điều này giúp các công ty công nghệ tiết kiệm chi phí thuê và đào tạo nhân lực.

1.2.3.5 Có tốc độ cao và tái sử dụng được

Node.js nổi bật với tốc độ xử lý nhanh chóng và kiến trúc non-blocking, trong khi React.js là một thư viện mã nguồn mở của JavaScript, mang lại khả năng bảo trì, kiểm tra và tái sử dụng hiệu quả.

1.2.3.6 Mã nguồn mở và có khả năng tương thích với đám mây

Công nghệ MERN Stack hoàn toàn miễn phí và mã nguồn mở, mang lại cho lập trình viên nhiều lựa chọn về thư viện và kho lưu trữ công cộng Việc sử dụng MERN Stack giúp giảm chi phí phát triển phần mềm hiệu quả Đặc biệt, MongoDB hỗ trợ triển khai các chức năng đám mây trong ứng dụng, giúp tiết kiệm chi phí không gian đĩa.

REACTJS

1.3.1 Giới thiệu, khái niệm React

React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những

20 thành phần (components) UI có tính tương tác cao, có trạng thái (state) và có thể sử dụng lại được

React là một thư viện hấp dẫn vì nó không chỉ hoạt động trên phía client mà còn có khả năng render trên server, cho phép kết nối linh hoạt Thư viện này so sánh sự thay đổi giữa các giá trị của lần render hiện tại và lần render trước, từ đó cập nhật những thay đổi tối thiểu trên DOM.

Công nghệ Virtual DOM trong React JS giúp cải thiện hiệu năng ứng dụng bằng cách chỉ thay đổi node gốc khi có sự thay đổi trạng thái, từ đó tái cấu trúc một phần của cây DOM Điều này giúp giảm thiểu ảnh hưởng đến tốc độ xử lý và tối ưu hóa hiệu suất tổng thể của ứng dụng.

Hình 4: DOM ảo trong ExpressJS dung để tối ưu hoá việc re-render DOM thật

Virtual DOM là một đối tượng Javascript chứa thông tin cần thiết để tạo ra DOM Khi dữ liệu thay đổi, nó tính toán sự khác biệt giữa đối tượng và cây DOM thật, giúp tối ưu hóa việc re-render React áp dụng cơ chế one-way data binding, cho phép dữ liệu được truyền từ parent đến child qua props Luồng dữ liệu đơn giản này giúp dễ dàng kiểm soát và sửa lỗi.

React là một công cụ lý tưởng để phát triển các ứng dụng lớn, nơi dữ liệu liên tục thay đổi theo thời gian Sự thay đổi dữ liệu thường đi kèm với việc cập nhật giao diện người dùng, giúp cải thiện trải nghiệm người dùng.

Facebook's Newsfeed displays various statuses simultaneously, each with a constantly changing number of likes, shares, and comments In this context, React proves to be extremely useful for managing and updating these dynamic interactions efficiently.

1.3.2 So sánh React và những Framework khác

Bảng 3: Đánh giá ngôn ngữ lập trình tương tự

Tốc độ code Chậm Bình thường Nhanh Độ khó Phải học Typescript Bình thường Dễ

Chậm vì codebase lớn Nhanh Nhanh

Virtual DOM (Document Object Model)

Virtual DOM (Document Object Model)

Phạm vi Dự án lớn và phục vụ cho doanh nghiệp với nhiều tính năng

Hoàn hảo cho việc phát triển những website hiện đại và native render apps cho IOS và android

Dự án nhỏ và startup phù hợp với các dự án single page application

Tái sử dụng lại code Được Chỉ tái sử dụng được css Được tái sử dụng lại cả html và css

LoadTime Cao Trung bình Thấp

Cú pháp TypeScript Javascript, TypeScript Javascript,

Baseline Một framework với hiệu suất cao

Thư viện hỗ trợ xây dựng UI tuyệt vời

Một thư viện có cả những điểm tốt của angular và react

Nếu bạn code typescript, dễ bảo trì

Nếu bạn muốn tất cả mọi thứ đều được code bằng javascript

Khi mà bạn muốn code bằng javascript và cả html cho phần giao diện

1.3.3 Ưu nhược điểm của React

Khi sử dụng React, ta dễ dàng thấy được React có một số ưu điểm vượt trội như:

Reactjs rất hiệu quả nhờ vào việc tạo ra DOM ảo, nơi các component thực sự tồn tại, giúp cải thiện hiệu suất đáng kể Nó chuyển đổi các hàm khởi tạo đối tượng HTML thông qua bộ biến đổi JSX.

Render tầng server là một giải pháp quan trọng cho các ứng dụng đơn trang nhằm tối ưu hóa SEO và thời gian tải trang Khi toàn bộ quá trình xây dựng và hiển thị trang diễn ra trên client, người dùng sẽ phải chờ đợi để trang được khởi tạo, dẫn đến trải nghiệm chậm chạp Nếu người dùng vô hiệu hóa Javascript, điều này càng trở nên nghiêm trọng Reactjs, với khả năng render cả trên trình duyệt và từ các chuỗi HTML mà server cung cấp, giúp cải thiện hiệu suất Bạn có thể tìm hiểu thêm về cách render side servering tại đây.

Việc kiểm tra giao diện trở nên đơn giản nhờ vào việc virtual DOM được triển khai hoàn toàn bằng JavaScript Điều này mang lại hiệu suất cao cho các ứng dụng có dữ liệu thay đổi liên tục, đồng thời cũng giúp dễ dàng trong việc bảo trì và sửa lỗi.

Tuy có nhiều ưu điểm, nhưng React không tránh khỏi việc còn tồn tại một số nhược điểm Cụ thể như sau:

ReactJS chỉ đảm nhiệm vai trò của tầng View và không phải là một framework MVC như các framework khác Đây là thư viện do Facebook phát triển, chuyên dùng để render phần view Do đó, React không bao gồm phần Model và Controller, mà cần kết hợp với các thư viện khác để hoàn thiện Ngoài ra, React cũng không hỗ trợ 2-way binding hay Ajax.

− Tích hợp ReactJS vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại

React có kích thước tương đương với Angular, khoảng 35kB so với 39kB của Angular, tuy nhiên React lại nhẹ hơn so với nhiều framework khác Điều này cho thấy React có thể là một lựa chọn tối ưu cho các dự án cần hiệu suất cao, mặc dù Angular là một framework hoàn chỉnh.

NODEJS

NodeJS là một nền tảng được xây dựng trên “V8 Javascript engine” và là một mã

23 nguồn mở đượ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

Node.js được phát triển khi các lập trình viên JavaScript mở rộng ngôn ngữ này từ một công cụ chạy trên trình duyệt thành ứng dụng độc lập trên máy tính Cả JavaScript trong trình duyệt và Node.js đều sử dụng động cơ V8 runtime, giúp chuyển đổi mã JavaScript thành mã máy (bytecode 4) để thực thi nhanh hơn.

Hình 5: Quá trình chuyển đổi từ mã nguồn NodeJS sang JavaScript nhờ vào Chrome V8 engine

Node.js có một thư viện tích hợp cho phép ứng dụng hoạt động như một Webserver mà không cần sử dụng phần mềm bên ngoài như Nginx, Apache HTTP Server hoặc IIS Với kiến trúc hướng sự kiện và API non-blocking I/O, Node.js tối ưu hóa hiệu suất và khả năng mở rộng của ứng dụng.

Mọi hàm trong Node.js là không đồng bộ (asynchronous) Do đó, các tác vụ đều được xử lý và thực thi ở chế độ nền (background processing)

Những ứng dụng có thể và nên viết bằng Nodejs:

− Websocket server: Các máy chủ web socket như là Online Chat, Game Server

− Fast File Upload Client: là các chương trình upload file tốc độ cao

− Ad Server: Các máy chủ quảng cáo

− Cloud Services: Các dịch vụ đám mây

− RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API

− Bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực

1.4.2 Ưu và nhược điểm của NodeJS

Node JS có một số ưu điểm nổi bật như sau:

Có khả năng xử lý nhanh chóng nhờ vào cơ chế xử lý bất đồng bộ (non-blocking), giúp dễ dàng quản lý hàng ngàn kết nối trong thời gian ngắn nhất.

− Dễ dàng mở rộng khi có nhu cầu phát triển website

Node.js cho phép nhận và xử lý nhiều kết nối chỉ với một luồng đơn, giúp tiết kiệm RAM và tăng tốc độ xử lý.

Hình 6: Quá trình chuyển đổi từ mã nguồn NodeJS sang JavaScript nhờ vào Chrome V8 engine

− Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất

− Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất

− Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng dụng chat, mạng xã hội

Hiện tại, Node JS vẫn còn tồn tại một số nhược điểm có thể kể đến như:

NodeJS không phù hợp cho các ứng dụng tốn tài nguyên CPU như encoding video, chuyển đổi file hay giải mã mã hóa, vì nó được viết bằng C++ và JavaScript, dẫn đến việc cần thêm một trình biên dịch của NodeJS, làm tăng thời gian xử lý.

NodeJS, mặc dù mới phát triển và bùng nổ gần đây, vẫn chưa thể hoàn toàn thay thế các ngôn ngữ lập trình khác như PHP, Ruby, Python và NET trong việc phát triển ứng dụng web.

Đối với các ứng dụng yêu cầu tính ổn định cao và logic phức tạp, ngôn ngữ PHP và Ruby vẫn là những lựa chọn tốt hơn so với 25 thống hiện có.

EXPRESS JS

ExpressJS, hay còn gọi là Express JS hoặc Express.js, là một framework mã nguồn mở miễn phí dành cho Node.js Framework này giúp 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, với nhiều mã code đã được viết sẵn, hỗ trợ lập trình viên trong quá trình phát triển.

Express JS cho phép lập trình viên dễ dàng phát triển ứng dụng web nhờ vào dung lượng nhẹ và khả năng tổ chức ứng dụng theo kiến trúc MVC Để sử dụng mã nguồn này, người dùng cần có kiến thức về Javascript và HTML.

Express JS đã làm cho lập trình trong Node.js trở nên dễ dàng hơn, đồng thời cung cấp nhiều tính năng mới, giúp đơn giản hóa quá trình xây dựng các API.

1.5.2 Các tính năng nổi bật

Các tính năng nổi bật của Express JS có thể kể đến như:

Express JS giúp phát triển máy chủ nhanh chóng nhờ vào việc cung cấp nhiều tính năng dưới dạng hàm, dễ dàng sử dụng trong toàn bộ chương trình Điều này không chỉ loại bỏ nhu cầu viết mã phức tạp mà còn tiết kiệm thời gian cho lập trình viên.

− Định tuyến - Routing: Express JS cung cấp cơ chế định tuyến giúp duy trì trạng thái của website với sự trợ giúp của URL

Các công cụ tạo mẫu trong Express JS cho phép các nhà phát triển xây dựng nội dung động trên website thông qua việc tạo ra các mẫu linh hoạt.

Middleware là phần mềm trung gian có khả năng truy cập vào cơ sở dữ liệu (CSDL), xử lý yêu cầu từ khách hàng và tương tác với các phần mềm trung gian khác Nó đóng vai trò quan trọng trong việc tổ chức hệ thống các chức năng của Express JS.

Hình 7: Triển khai Middleware trong ExpressJS

Gỡ lỗi là một bước quan trọng trong phát triển ứng dụng web, và với Express JS, quá trình này trở nên dễ dàng hơn Express JS giúp xác định chính xác các phần của ứng dụng web có lỗi, từ đó hỗ trợ lập trình viên khắc phục sự cố hiệu quả hơn.

MONGODB

Hiện nay có khá nhiều hệ quản trị CSDL dạng NoSQL (như MongoDB, Cassandra, Redis,

HBase), trong đó phổ biến nhất có thể kể đến là MongoDB

MongoDB là một cơ sở dữ liệu hướng đối tượng với cấu trúc bảng linh hoạt, cho phép lưu trữ dữ liệu mà không cần tuân theo một định dạng cố định Điều này giúp MongoDB phù hợp cho việc lưu trữ các loại dữ liệu phức tạp, đa dạng và không cố định, thường được gọi là Big Data.

MongoDB sử dụng cơ chế NoSQL để thực hiện truy vấn, được phát triển bằng ngôn ngữ C++ Nhờ đó, nó có khả năng tính toán nhanh chóng, khác biệt so với các hệ quản trị cơ sở dữ liệu quan hệ hiện tại.

Mỗi bảng dữ liệu trong SQL tương ứng với một collection trong MongoDB Một bản ghi trong MongoDB được lưu trữ dưới dạng tài liệu, với cấu trúc field : value, tương tự như một đối tượng JSON.

MongoDB hoạt động dưới một tiến trình ngầm, service luôn mở một cổng (cổng mặc định là

27017) để lắng nghe các yêu cầu truy vấn, thao tác từ các ứng dụng gửi vào sau đó mới tiến hành xử lý

Mỗi bản ghi trong MongoDB đều có một trường dữ liệu tự động gán tên là “_id” với kiểu dữ liệu ObjectId, giúp xác định tính duy nhất của bản ghi Trường “_id” không chỉ hỗ trợ cho việc tìm kiếm và truy vấn thông tin mà còn được tự động đánh index, đảm bảo tốc độ truy vấn đạt hiệu suất cao nhất.

Khi có một truy vấn dữ liệu, bản ghi sẽ được lưu trữ trong bộ nhớ RAM để tăng tốc độ truy vấn sau mà không cần truy cập ổ cứng Đối với các yêu cầu thêm, sửa hoặc xóa bản ghi, hệ thống sẽ xử lý trực tiếp trên dữ liệu đã được cache.

Để đảm bảo hiệu suất của ứng dụng, MongoDB sẽ không cập nhật dữ liệu xuống ổ cứng ngay lập tức Thay vào đó, sau 60 giây, MongoDB sẽ thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng.

Một số ưu điểm của MongoDB có thể kể đến như:

Lưu trữ dữ liệu linh hoạt với nhiều kích cỡ khác nhau, cho phép chèn thông tin tùy ý dưới dạng tài liệu JSON.

Khác với hệ quản trị cơ sở dữ liệu quan hệ, dữ liệu trong hệ thống này không bị ràng buộc và không yêu cầu tuân theo khuôn khổ nhất định Điều này giúp tiết kiệm thời gian cho việc kiểm tra cấu trúc khi chèn, xóa, cập nhật hoặc thay đổi dữ liệu trong bảng.

Hình 8: So sánh tốc độ khi thêm 1 bản ghi giữa MongoDB và SQL

− MongoDB dễ dàng mở rộng hệ thống bằng cách thêm node vào cluster – cụm các node chứa dữ liệu giao tiếp với nhau

Tốc độ truy vấn của hệ thống này nhanh hơn nhiều so với các hệ quản trị cơ sở dữ liệu quan hệ, nhờ vào việc dữ liệu được lưu trữ trong bộ nhớ RAM, giúp tăng tốc độ truy vấn cho các lần tiếp theo mà không cần phải đọc từ ổ cứng.

− Trường dữ liệu “_id” luôn được tự động đánh chỉ mục để đạt hiệu suất cao nhất

Bên cạnh các ưu điểm được nêu ra ở trên, thì MongoDB còn tồn tại một số nhược điểm như sau:

− Không ràng buộc toàn vẹn nên không ứng dụng được cho các mô hình giao dịch yêu cầu độ chính xác cao

− Không có cơ chế transaction (giao dịch) để phục vụ các ứng dụng ngân hàng

− Dữ liệu được caching, lấy RAM làm trọng tâm hoạt động vì vậy khi hoạt động yêu cầu một bộ nhớ RAM lớn

Việc lưu trữ dữ liệu dưới dạng key-value tiêu tốn bộ nhớ, vì các document chỉ khác nhau ở giá trị, dẫn đến việc lặp lại key và gây ra sự thừa thãi trong dữ liệu.

Dữ liệu thường mất khoảng 60 giây để chuyển từ RAM xuống ổ cứng, điều này tạo ra nguy cơ mất dữ liệu nếu xảy ra mất điện trong khoảng thời gian này.

RESTFUL API

RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web

Dịch vụ thiết kế web giúp quản lý hiệu quả các tài nguyên hệ thống như tệp văn bản, hình ảnh, âm thanh, video và dữ liệu động Nó tập trung vào việc định dạng và truyền tải các trạng thái tài nguyên qua giao thức HTTP.

API (Giao diện lập trình ứng dụng) là tập hợp các quy tắc và cơ chế cho phép các ứng dụng hoặc thành phần tương tác với nhau Nó cung cấp dữ liệu cần thiết cho ứng dụng của bạn dưới các định dạng phổ biến như JSON hoặc XML.

REST (REpresentational State Transfer) là một kiến trúc API sử dụng phương thức HTTP để giao tiếp giữa các máy Thay vì xử lý thông tin người dùng qua một URL duy nhất, REST gửi yêu cầu HTTP (như GET, POST, DELETE) đến URL để quản lý dữ liệu.

RESTful API là tiêu chuẩn thiết kế API cho ứng dụng web nhằm quản lý tài nguyên Đây là một trong những kiểu thiết kế API phổ biến hiện nay, cho phép các ứng dụng web và di động giao tiếp hiệu quả với nhau.

Chức năng quan trọng nhất của REST là quy định cách sử dụng các phương thức HTTP như GET, POST, PUT, DELETE và cách định dạng URL cho ứng dụng web nhằm quản lý các tài nguyên RESTful không quy định logic code của ứng dụng và không bị giới hạn bởi ngôn ngữ lập trình, cho phép bất kỳ ngôn ngữ hoặc framework nào cũng có thể được sử dụng để thiết kế một RESTful API.

REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng

− GET (SELECT): Trả về một Resource hoặc một danh sách Resource

− POST (CREATE): Tạo mới một Resource

− PUT (UPDATE): Cập nhật thông tin cho Resource

− DELETE (DELETE): Xoá một Resource

Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa

Một số ưu điểm mà RESTful API mang lại:

− Giúp cho ứng dụng trở nên rõ ràng hơn bao giờ hết

− REST URL là đại diện cho resource chứ không mang tính chất hành động

− Code ngắn gọn và đơn giản

− Dữ liệu với nhiều định dạng khác nhau (như HTML, XML, JSON) được trả về

− Tài nguyên của hệ thống được REST chú trọng

− Cho phép các trang web có khả năng kết nối đến mọi dữ liệu của họ với các ứng dụng bên ngoài khác

PHÂN TÍCH THIẾT KẾ

LƯỢC ĐỒ USE CASE

Hình 10: Use case tổng quan

2.1.2.1 Quản lý xác thực người dung

Hình 11: Use case Quản lý xác thực người dung

Hình 12: Use case quản lý tài khoản

2.1.2.3 Tương tác của học sinh trên trang chủ

Hình 13: Use case Tương tác của học sinh trên trang chủ

2.1.2.4 Tương tác của học sinh trên trang lớp học

Hình 14: Use case Tương tác của học sinh trên trang lớp học

2.1.2.4 Tương tác của giáo viên trên trang chủ

Hình 15: Use case Tương tác của giáo viên trên trang chủ

2.1.2.5 Tương tác của giáo viên trên trang lớp học

Hình 16: Use case Tương tác của giáo viên trên trang lớp học

Bảng 4: Đặc tả use case Đăng ký tài khoản

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

Khách truy cập tạo mới tài khoản

Post- conditions Người dùng được tạo mới được tài khoản, thông tin cá nhân được lưu vào CSDL, hệ thống chuyển hướng sang Trang đăng nhập

Use case bắt đầu khi khách truy cập vào Modal đăng ký tài khoản

1 Hệ thống hiển thị biểu mẫu cho khách thông tin đăng ký

2 Khách nhập thông tin đăng ký gồm email, username và mật khẩu sau đó bấm nút Đăng ký

3 Khách kiểm tra thông tin, bấm vào nút Đăng ký để đăng ký tài khoản

4 Hệ thống xác thực, lưu thông tin đăng ký tài khoản của khách vào CSDL và chuyển hướng đến trang Đăng nhập (1)

(1) Email hoặc Username của Khách nhập đã tồn tại

- Hiển thị thông báo Username hoặc Email đã được đăng ký, yêu cầu khách nhập lại thông tin

Extension point Đã có tài khoản chuyển sang Đăng nhập

Bảng 5: Đặc tả use case Đăng nhập

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

Pre-conditions Người dung đã có tài khoản

Post- conditions Access token của người dùng sẽ được lưu vào Cookies Hệ thống chuyển hướng đến Trang chủ

Use case bắt đầu khi khách truy cập vào Modal đăng nhập

1 Hệ thống hiển thị biểu mẫu cho khách điền thông tin đăng nhập

2 Khách nhập thông tin đăng nhập gồm username và mật khẩu rồi bấm nút Đăng nhập (a) (1)

3 Hệ thống kiểm tra các giá trị nhập vào (1) (2)

4 Hệ thống lưu Access token của người dùng vào Cookies, thông báo đăng nhập thành công và chuyển hướng đến trang chủ

2.(1) Thông tin khách điền không đầy đủ như biểu mẫu yêu cầu - Hiển thị thông báo còn thiếu username hoặc mật khẩu, yêu cầu khách nhập lại thông tin

3.(1) Tài khoản không tồn tại

- Hiển thị thông báo tài khoản không tồn tại, yêu cầu đăng nhập lại

- Hiển thị thông báo mật khẩu nhập vào không đúng, yêu cầu nhập lại mật khẩu

Extension point Chưa có tài khoản, đăng ký tài khoản mới

Bảng 6: Đặc tả use case Đăng xuất

Người dùng muốn đăng xuất ra khỏi tài khoản

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

Access token của người dùng bị xóa khỏi Cookies, hệ thống chuyển hướng đến trang chủ

1 Người dùng bấm vào nút Đăng xuất trên thanh điều hướng

2 Hệ thống xóa Access token của người dùng khỏi Cookies, thông báo đăng xuất thành công và chuyển hướng đến Trang chủ

Bảng 7: Đặc tả Use case Thay đổi mật khẩu

Name Thay đổi mật khẩu

Người dùng muốn thay đổi mật khẩu

Pre-conditions Là Người dung đã có tài khoản và đã đăng nhập vào hệ thống

Post- conditions Mật khẩu của người dùng được cập nhật thành công, trở về trang cá nhân

Use case bắt đầu khi người dùng đã đăng nhập và truy cập vào Trang cá nhân

1 Người dùng bấm vào nút Đổi mật khẩu

2 Hệ thống hiện biểu mẫu Đổi mật khẩu

3 Người dùng nhập thông tin và bấm nút Xác nhận (1) (2)

4 Hệ thống lưu lại mật khẩu mới vào CSDL và hiển thị thông báo mật khẩu được cập nhật thành công

3.(1) Người dùng chưa điền đủ thông tin

- Hiển thị thông báo chưa nhập đủ thông tin, yêu cầu khách nhập lại thông tin

3.(2) Sai mật khẩu hiện tại

- Hiển thị thông báo mật khẩu sai, yêu cầu nhập lại

- Hiển thị thông báo mật khẩu nhập lại không khớp, yêu cầu nhập lại mật khẩu

Extension point - Người dùng bấm nút Đóng để thoát khỏi biểu mẫu

Bảng 8: Đặc tả use case Vào lớp học

Name Tham gia vào lớp học

Người dùng muốn truy cập trang của lớp học

Pre-conditions Là người dung có tài khoản và đã đăng nhập vào hệ thống Người dung tham gia ít nhất một lớp học

Post- conditions Người dùng được chuyển đến trang riêng của lớp học

Flow of events Basic flow

1 Người dùng đang ở trang chủ của ứng dụng

2 Người dùng chọn lớp học mà mình muốn vào

3 Người dùng chọn nhấn chọn trên lớp học mong muốn

4 Hệ thống chuyển người dùng sang trang riêng của lớp học

Hệ thống không thể chuyển trang do lớp học đang gặp vấn đề

Hệ thống không thể chuyển trang do người dung chưa tham gia vào lớp học, sẽ hiện biểu mẫu để thông báo

Bảng 9: Đặc tả use case Rời lớp học

Người dùng muốn rời lớp học

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

Người dung tham gia ít nhất một lớp học

Post- conditions Người dùng rời lớp học thành công

Flow of events Basic flow

1 Người dùng ở trang chủ ứng dụng

2 Người dùng chọn lớp học mình muốn rời

3 Người dùng chọn rời lớp học

4 Hệ thống xác thực mã xác nhận hợp lệ và ghi nhận người dùng rời lớp học thành công

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

Bảng 10: Đặc tả use case Cập nhật thông tin cá nhân

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

Người dùng muốn cập nhật thông tin cá nhân

Tất cả người dùng có tài khoản của hệ thống

Pre-conditions Là người dùng có tài khoản vào đã đăng nhập vào hệ thống

Nếu thành công: Thông tin người dùng được cập nhật

Nếu thất bại: Hiển thị thông báo lỗi đã xảy ra khi cập nhật thông tin cá nhân

Flow of events Basic flow

Use case bắt đầu khi người dùng muốn cập nhật thông tin cá nhân

1 – Người dùng chọn cập nhập thông tin cá nhân

2 – Hệ thống hiển thị các thông tin của người dùng

3 – Người dùng nhập các thông tin cần chỉnh sửa

5 – Hệ thống kiểm tra các thông của người dùng đã nhập

6 – Hệ thống lưu lại các thông tin mới của người dùng

Nếu kiểm tra dữ liệu mà người dùng nhập

1 – Hệ thống thông báo lỗi đã xảy ra trong quá trình cập nhập thông tin cho người dùng

2 – Người dùng chỉnh sửa lại các thông tin mà hệ thống báo lỗi

 Quay lại bước 4 Basic flow

Bảng 11: Đặc tả use case Đăng bài viết

Người dùng muốn đăng bài viết mới lên trang riêng của lớp học

Pre-conditions Người dùng đang trong trang riêng của một lớp học

Người dùng đăng bài viết mới thành công

Flow of events Basic flow

1 Người dùng đang ở trang riêng của lớp học

2 Người dùng chọn vào khung tạo bài viết

3 Người dùng nhập nội dung bài viết, có thể đính kèm file (nếu có) và chọn lệnh đăng bài

4 Hệ thống xác nhận đăng bài viết thành công

5 Hệ thống hiển thị bài viết mới ghi lên trang của lớp học

Hệ thống thông báo đăng bài viết thất bại

Người dùng hủy đăng bài viết

Bảng 12: Đặc tả use case Làm bài kiểm tra

Name Làm bài kiểm tra

Người dùng làm bài kiểm tra trực tiếp trên ứng dụng

Pre-conditions Người dùng đang trong trang riêng của một lớp học

Lớp học có ít nhất 1 bài kiểm tra

Học sinh có thể làm bài kiểm tra và lưu lại bài làm và kết quả

1 Người dùng đang ở trang riêng của lớp học

2 Người dùng chọn bài kiểm tra mình muốn làm

3 Người dùng hoàn thành bài kiểm tra và chọn lệnh nộp bài trong thời gian quy định

4 Hệ thống ghi nhận bài làm của người dùng và có hoặc không hiển thị điểm tùy theo cài đặt của giáo viên

Hệ thống bị nghẽn do kết nối mạng và vẫn còn thời gian làm bài

Hệ thống tự động lưu lại bài làm của người dùng

Bảng 13: Đặc tả use case Bình luận bài viết

Name Bình luận bài viết

Người dùng bình luận bài viết đã có trên trang riêng của lớp học

Pre-conditions Người dùng đang trong trang riêng của một lớp học

Lớp học có ít nhất 1 bài viết

Người dùng bình luận bài viết thành công

Bình luận được hiển thị trên bài viết và số lượt bình luận của bài viết tăng

1 Người dùng đang ở trang riêng của lớp học

2 Người dùng chọn bài viết mình muốn bình luận

3 Người dùng soạn thảo bình luận và chọn lệnh đăng

4 Hệ thống xác nhận bình luận bài viết thành công

5 Hệ thống hiển thị bình luận lên bài viết đó và số lượng bình luận của bài viết tăng một

Bài viết bị xóa trước khi người dùng gửi bình luận

Người dùng hủy bình luận

Bảng 14: Đặc tả use case Tạo lớp học

Người dùng muốn tạo một lớp học mới

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

Người dùng tạo thành công một lớp học mới

1 Người dùng đang ở trang chủ của ứng dụng

2 Người dùng chọn chức năng thêm lớp học

3 Hệ thống mở biểu mẫu thêm lớp học

4 Người dùng bổ sung thông tin lớp học và chọn lệnh xác nhận

5 Hệ thống xác nhận người dùng tạo lớp học mới thành công

Hệ thống hiển thị thông báo tạo lớp học không thành công do người dùng chưa điền đủ các thông tin bắt buộc

Người dùng bổ sung các thông tin bắt buộc còn thiếu

Use case quay lại bước 4

Người dùng hủy tạo mới lớp học

2.1.3.12 Chỉnh sửa thông tin lớp học

Bảng 15: Đặc tả use case Chỉnh sửa thông tin lớp học

Name Chỉnh sửa thông tin lớp học

Người dùng muốn chỉnh sửa thông tin lớp học của mình

Pre-conditions Người dùng có ít nhất một lớp học của mình

Thông tin lớp học được chỉnh sửa thành công

1 Người dùng truy cập trang chủ có lớp học của mình cần chỉnh sửa

2 Người dùng chọn chức năng chỉnh sửa lớp học

3 Người dùng thay đổi thông tin lớp học và chọn lệnh xác nhận

4 Hệ thống xác thực thông tin lớp học hợp lệ

5 Hệ thống ghi nhận thông tin của lớp học được chỉnh sửa thành công

4a Hệ thống xác thực thông tin không hợp lệ

4a1 Người dùng chọn hủy chỉnh sửa lớp học

4a2 Người dùng chỉnh sửa lại thông tin lớp học

Use case quay lại bước 3

2.1.3.13 Xem kết quả các các bài kiểm tra

Bảng 16: Đặc tả use case Xem kết quả của các bài kiểm tra

Name Xem kết quả của các bài kiểm tra

Người dùng muốn danh sách các bài tập, điểm số các học sinh trong lớp và số học sinh đã làm bài

Pre-conditions Người dùng có ít nhất một lớp học của mình

Hệ thống hiển thị danh sách bài tập

Hệ thống hiển thị điểm số trung bình của học sinh

Hệ thống tổng kết kết quả và xếp hạng học sinh theo điểm số từ các bài tập trong lớp

1 Người dùng truy cập bài tập của lớp học

2 Hệ thống hiển thị danh sách các bài tập

3 Người dùng chọn bài tập mình muốn xem chi tiết

4 Hệ thống hiển thị điểm số trung bình của học sinh thông qua bài tập

2b Lớp học chưa có bài tập nào

2b1 Người dùng không thể xem kết quả bài tập

Bảng 17: Đặc tả use case Xoá lớp học

Người dung muốn xoá lớp học

Pre-conditions Người dùng có ít nhất một lớp học của mình

Xóa lớp học thành công

Cập nhật lại danh sách lớp học của học sinh trong lớp

1 Người dùng ở trang chủ có hiện danh sách lớp học

2 Người dùng chọn lớp học mình muốn xóa

3 Người dùng chọn xóa lớp học

4 Hệ thống tiến hành xoá lớp học và ghi nhận lớp học đã xóa thành công

4 Người dùng hủy xóa lớp

LƯỢC ĐỒ TUẦN TỰ - SEQUENCE DIAGRAM

2.2.1 Xem thông tin trang web

Hình 17: Sequence Diagram Xem thông tin trang web

Hình 18: Sequence Diagramn Đăng nhập

Hình 19: Sequence Diagram Đăng xuất

Hình 20: Sequence Diagram Đăng ký tài khoản

Hình 21: Sequence Diagram Thêm lớp học

Hình 22: Sequence Diagram Tham gia lớp học 2.2.7 Rời khỏi lớp học

Hình 23: Sequence Diagram Rời khỏi lớp học

Hình 24: Sequence Diagram Xoá lớp học 2.2.9 Quản lý bảng tin

Hình 25: Sequence Diagram Quản lý bảng tin

Hình 26: Sequence Diagram Thêm bài đăng 2.2.11 Xoá bài đăng

Hình 27: Sequence Diagram Xoá bài đăng

Hình 28: Sequence Diagram Thêm bình luận 2.2.13 Xoá bình luận

Hình 29: Sequence Diagram Xoá bình luận

Hình 30: Sequence Diagram Xoá thành viên 2.2.15 Quản lý bài tập

Hình 31: Sequence Diagram Quản lý bài tập

Hình 32: Sequence Diagram Thêm bài tập 2.2.17 Xoá bài tập

Hình 33: SequenceDiagram Xoá bài tập

LƯỢC ĐỒ LỚP

THIẾT KẾ CƠ SỞ DỮ LIỆU

2.4.1 Lược đồ cơ sở dữ liệu

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

2.4.2.1 Tài khoản người dùng user

STT TÊN THUỘC TÍNH KIỂU DỮ LIỆU MÔ TẢ

1 ID String PK Mã người dùng

2 username String Tên đăng nhập

3 email String Tài khoản email

7 phone String Số điện thoại

8 avatar String Ảnh đại diện

STT TÊN THUỘC TÍNH KIỂU DỮ LIỆU MÔ TẢ

1 ID String PK Mã lớp học

2 Students Array Danh sách học sinh

3 Name String Tên lớp học

4 ClassCode String Mã vào lớp học

5 Description String Mô tả cho lớp học

7 Newsfeed Array Danh sách các bảng tin

8 Tests Array Danh sách các bài Test

STT TÊN THUỘC TÍNH KIỂU DỮ LIỆU MÔ TẢ

1 ID String PK Mã bảng tin

2 Comment Array Danh sách các bình luận

3 Content String Nội dung bài đăng

4 Creator String ID người tạo

5 CreateAt String Ngày tạo bảng tin

6 UpdateAt String Ngày update bảng tin

STT TÊN THUỘC TÍNH KIỂU DỮ LIỆU MÔ TẢ

1 ID String PK Mã bình luận

2 Content String Nội dung bình luận

3 Creator String ID người tạo

4 CreateAt String Ngày tạo bình luận

5 UpdateAt String Ngày update bình luận

STT TÊN THUỘC TÍNH KIỂU DỮ LIỆU MÔ TẢ

1 ID String PK Mã bài test

2 Name String Tên bài test

3 Creator String ID người tạo

4 Description String Mô tả về bài test

5 StartTime String Thời gian bắt đầu

6 EndTime String Thời gian kết thúc

7 NumberOfQuestion Number Số câu hỏi

8 MaxPoint Number Điểm tối đa

9 Questions Array Mảng chứa các Id câu hỏi

STT TÊN THUỘC TÍNH KIỂU DỮ LIỆU MÔ TẢ

1 ID String PK Mã câu hỏi

2 Content String Nội dung câu hỏi

3 Answers Array Mảng chứa câu trả lời

STT TÊN THUỘC TÍNH KIỂU DỮ LIỆU MÔ TẢ

1 ID String PK Mã trả lời

2 Content String Nội dung câu trả lời

3 IsCorrect Boolean Đáp án đúng hay sai

4 CreateAt String Thời gian tạo

5 UpdateAt String Thời gian chỉnh sửa

STT TÊN THUỘC TÍNH KIỂU DỮ LIỆU MÔ TẢ

1 ID String PK Mã làm bài test

2 TestId String Mã bài test

3 UserId Boolean Mã người làm bài test

4 StartTime String Thời gian bắt đầu làm bài

5 SubmitTime String Thời gian nộp bài

6 Point Number Điểm của bài làm

7 Result Array Lưu kết quả bài làm

2.4.2.9 Nhật ký làm bài – Test Log

STT TÊN THUỘC TÍNH KIỂU DỮ LIỆU MÔ TẢ

1 ID String PK Mã nhật ký

2 takeTestId String Mã làm bài thi

3 logs Array Danh sách các hành động thực hiện

THIẾT KẾ GIAO DIỆN

Hình 37: Landing Page 2 Bảng 27: Chức năng của Landing page

STT Tên Loại Điều kiện Chức năng

Click Mở Modal Đăng nhập

Click Mở Modal Đăng ký tài khoản

Hình 38: Đăng nhập Bảng 28: Chức năng đăng nhập

STT Tên Loại Điều kiện Chức năng

1 Đăng nhập Thẻ Click button

“Đăng nhập” sau khi điền đầy đủ thông tin hợp lý

1 Nhận thông tin đăng nhập

2 Gọi API “Login” và truyền dữ liệu vào request theo JSON bằng phương thức POST

3 Dữ liệu hợp lệ - Đăng nhập thành công

2 Tên tài khoản Thẻ Input Người dùng nhập username

3 Mật khẩu Thẻ Input Người dùng nhập mật khẩu

2.4.3 Modal đăng ký tài khoản

Hình 39: Đăng ký tài khoản Bảng 29: Chức năng Đăng kí tài khoản

STT Tên Loại Điều kiện Chức năng

“Đăng kí” sau khi điền đầy đủ thông tin hợp lý

Submit đăng ký tài khoản

2.4.4 Giao diện trang home sau khi đăng nhập

Hình 40: Giao diện trang Home Bảng 30: Chức năng ở trang Home

STT Tên Loại Điều kiện Chức năng

Click Nếu đang ở trang khác - chuyển về trang chủ

Nếu đang ở trang chủ - giữ nguyên

2 Các lớp học Thẻ