CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 1. KHẢO SÁT HIỆN TRẠNG 1. Ucademy Udemy là một nền tảng giáo dục trực tuyến nổi tiếng trên thế giới, số lượng lên đến hàng ngàn khóa học với nhiều chủ đề khác nhau từ nhiều nguồn và giáo viên khác nhau. Ưu điểm: • Đa dạng về nội dung • Giáo viên đa dạng • Dễ sử dụng Nhược điểm: • Chất lượng khóa học không đồng đều bởi ai cũng có thể trở thành giáo viên trên Ucademy • Một số khóa học không được cập nhật thường xuyên 1.
ClassTime ClassTime là một nền tảng giáo dục trực tuyến chuyên về kiểm tra và theo dõi hiệu suất học tập. Ưu điểm: • Tạo bài kiểm tra dễ dàng • Phân loại và theo dõi kết quả tự động • Tương tác trực tuyến • Giao diện dễ sử dụng Nhược điểm • Giới hạn về khả năng tích hợp với các nền tảng khác • Gia hạn về chủ đề giáo dục • ClassTime có thể yêu cầu về phí dịch vụ 15 1. XÁC ĐỊNH YÊU CẦU 1. Yêu cầu chức năng Bảng 2.
Yêu cầu chức năng Vai trò Chức năng Học sinh (Student) - Xem các khóa học - Làm bài kiểm tra - Xem thông tin cá nhân - Xem điểm - Download tài liệu tham khảo - Đăng bài viết thảo luận - Xem video Người hướng dẫn (Instructor) - Xem các lớp học của cá nhân quản lý - Quản lý bài kiểm tra - Upload tài liệu tham khảo - Upload video Quản trị viên (Admin) - Quản lý khóa học - Quản lý người dùng - Quản lý lớp học - Thống kê điểm 1. Định hướng phát triển - Tích hợp thêm api ChatGPT 3.5 để tạo bộ câu hỏi theo chủ đề đưa ra. - Phát triển chức năng trả lời câu hỏi trong quá trình xem video bài giảng cho học sinh. 16 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.
KIẾN TRÚC CHUNG CỦA HỆ THỐNG Hình 1. Kiến trúc chung của hệ thống 2. Tổng quan về ReactJS 2. ReactJS là gì? React là một thư viện JavaScript được sử dụng để xây dựng giao diện người dùng.
Facebook và một cộng đồng phát triển mã nguồn mở quản lý nó. Mặc dù React chỉ là một thư viện chứ không phải là một ngôn ngữ, nhưng nó rất phổ biến trong phát triển web. Thư viện này xuất hiện lần đầu vào tháng 5 năm 2013 và hiện đang là một trong những thư viện frontend phổ biến nhất cho phát triển web. React cung cấp các phần mở rộng khác nhau để hỗ trợ toàn bộ kiến trúc ứng dụng, như Flux và React Native, không chỉ là giao diện người dùng.
So với các công nghệ khác trên thị trường, React là một công nghệ mới. Jordan Walke, một kỹ sư phần mềm tại Facebook, sáng lập thư viện vào năm 2011, đưa nó trở nên phổ biến. Các công nghệ như XHP, một framework thành phần HTML đơn giản cho PHP, đã ảnh hưởng đến React. Ứng dụng đầu tiên của React là newsfeed, ra mắt vào năm 2011.
Sau đó, Instagram áp dụng và tích hợp nó vào nền tảng của họ. Đặc điểm của ReactJS React cung cấp một số đặc điểm nổi bật làm cho nó trở thành thư viện phổ biến nhất cho phát triển ứng dụng frontend. Dưới đây là danh sách những đặc điểm nổi bật đó: 17 - JSX (JavaScript Syntactic Extension): JSX là một mở rộng cú pháp của JavaScript. Đây là một thuật ngữ được sử dụng trong React để mô tả cách giao diện người dùng nên hiển thị.
Bạn có thể viết cấu trúc HTML trong cùng một tệp với mã JavaScript bằng cách sử dụng JSX. - Virtual Document Object Model (DOM): Đây là phiên bản nhẹ của Real DOM trong React. Việc thay đổi Real DOM một cách thủ công chậm hơn đáng kể so với việc thao tác Virtual DOM. Khi trạng thái của một đối tượng thay đổi, Virtual DOM chỉ cập nhật đối tượng đó trong Real DOM thay vì cập nhật tất cả.
Ưu điểm của ReactJs Sử dụng cấu trúc JavaScript được biết đến là Virtual DOM. Vì Virtual DOM của JavaScript nhanh hơn so với DOM truyền thống, điều này sẽ tăng tốc độ của các chương trình. React tích hợp nhiều kiến trúc khác nhau. Việc sử dụng được với nhiều hệ thống và cả hai phía, cả client và server, là đáng khen ngợi.
Các thành phần và nhận biết xu hướng giúp quản lý dễ dàng hơn cho các ứng dụng lớn bằng cách tăng tính rõ ràng; Các mô-đun và dữ liệu hợp lệ giúp quản lý dễ dàng hơn cho các ứng dụng lớn bằng cách tăng tính đọc dễ hiểu; React làm cho toàn bộ quá trình môi trường kịch bản trở nên đơn giản hơn; Nó làm cho việc bảo trì nâng cao dễ dàng hơn và tăng hiệu suất. Đảm bảo tốc độ hiển thị nhanh hơn. Hơn nữa, ReactJS tạo điều kiện cho một giao diện người dùng tuyệt vời; ReactJS thân thiện với công cụ tìm kiếm; ReactJS được hỗ trợ bởi một cộng đồng lớn. Hạn chế của ReactJs Chỉ giải quyết góc và khoảng cách của ứng dụng; do đó, bạn phải chọn các kỹ thuật bổ sung nếu muốn có bộ sưu tập đầy đủ các công cụ phát triển.
Sử dụng tập lệnh nội tuyến và JSX, điều mà một số lập trình viên có thể cảm thấy không thoải mái. Tổng quan về Spring Spring Framework là một nền tảng Java cung cấp hỗ trợ cơ sở hạ tầng toàn diện cho việc phát triển ứng dụng Java. Spring xử lý cơ sở hạ tầng để bạn có thể tập trung vào ứng dụng của mình. Spring cho phép bạn xây dựng ứng dụng từ "các đối tượng Java cũ đơn giản" (POJOs) và áp dụng các dịch vụ doanh nghiệp một cách không xâm phạ vào POJOs.
Khả năng này áp dụng cho mô hình lập trình Java SE và cho Java EE đầy đủ và bán phần. Ưu điểm của Spring Spring cho phép các lập trình viên sử dụng POJOs, và việc sử dụng POJOs này sẽ đảm bảo bạn không cần phải làm việc với EJBs, ứng dụng, cấu hình, và luồng. chúng sẽ trở nên đơn giản hơn. Hơn nữa, Spring thường được tổ chức dựa trên tính modular, do đó số lượng các lớp và gói có thể trở nên khá lớn.
Tuy nhiên, người dùng chỉ cần quan tâm đến những gì họ cần và có thể bỏ qua phần còn lại. Spring thường được sử dụng để hỗ trợ nhiều loại công nghệ như ORM Framework, JEE, thư viện có khả năng tạo mã lập trình,. Module Web của Spring được thiết kế dựa trên mô hình MVC, nên có khả năng cung cấp một sự thay thế hoàn chỉnh cho các framework web tương tự như Struts. Framework Web của Spring, là một framework Web MVC với thiết kế tốt, sẽ giúp bạn thay thế Struts và các công nghệ ít phổ biến hơn.
Spring có khả năng cung cấp một API thuận tiện để chuyển đổi các ngoại lệ cụ thể của công nghệ thành các ngoại lệ không kiểm soát và nhất quán. Container IoC nhẹ, do đó rất có lợi cho việc phát triển và triển khai ứng dụng mới trên máy tính có tài nguyên bộ nhớ và CPU hạn chế. Spring sẽ cung cấp một giao diện quản lý giao dịch nhất quán. Từ đó, nó có thể mở rộng từ giao dịch cục bộ lên giao dịch toàn cầu.
MySQL MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational Database Management System, viết tắt là RDBMS) hoạt động theo mô hình client-server. RDBMS 19 là một phần mềm hay dịch vụ dùng để tạo và quản lý các cơ sở dữ liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng. Cách vận hành chính trong môi trường MySQL: - MySQL tạo ra bảng để lưu trữ dữ liệu, định nghĩa sự liên quan giữa các bảng đó. - Client sẽ gửi yêu cầu SQL bằng một lệnh đặc biệt trên MySQL.
- Ứng dụng trên server sẽ phản hồi thông tin và trả về kết quả trên máy client. Vận hành giữa server và client Cách ưu điểm của MySQL: - Linh hoạt và dễ dùng - Hiệu năng cao - Tiêu chuẩn trong ngành - An toàn 20 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ PHẦN MỀM 3. MÔ HÌNH HÓA YÊU CẦU 3. Lược đồ usecase Hình 3.
Lược đồ usecase 21 Hình 4. Mô tả chi tiết usecase 3. Chức năng đăng nhập Bảng 3. Usecase đăng nhập Tên - Name Đăng nhập Mô tả - Người dùng sử dụng chức năng này để đăng nhập vào hệ thống Description Đối tượng - Người dùng đã có tài khoản Actor(s) Tiền điều kiện - Người dùng đã đăng kí tài khoản trong hệ thống Pre-conditions Hậu điều kiện - Nếu đăng nhập thành công: Người dùng được xác thực và hệ Post-conditions thống hiển thị trang web tương ứng với từng quyền hạn của người dùng 22 Nếu đăng nhập không thành công: Người dùng không được xác thực và hiển thị thông báo Luồng điều kiện - Không có Flow of events Luồng cơ bản - Use case bắt đầu khi người dùng truy cập vào trang login Basic flow 1.
Hệ thống hiển thị form đăng nhập 2. Người dùng nhập username và password 3. Hệ thống xác thực tài khoản thông qua jwt 4. Hệ thống thông báo đăng nhập thành công 5.
Hệ thống mở các chức năng được phép truy cập của người dùng Luồng thay thế - Nếu người dùng nhập email và password không chính xác Alternative flow 1. Hệ thống hiển thị thông báo lỗi “Sai tài khoản hoặc mật khẩu” 2. Hệ thống yêu cầu người dùng đăng nhập lại 3. Bước 2 ở luồng cơ bản được thực hiện Quy định nghiệp Không có vụ - Professional regulations Yêu cầu phi chức Không có năng - Non- functional requirements 3.
Chức năng chỉnh sửa thông tin tài khoản Bảng 4. Usecase chỉnh sửa thông tin tài khoản Tên - Name Chỉnh sửa thông tin cá nhân Mô tả - Người dùng sử dụng chức năng chỉnh sửa thông tin cá nhân để Description thay đổi thông tin cá nhân Đối tượng - Học sinh, giáo viên Actor(s) Tiền điều kiện - Người dùng đã đăng nhập thành công Pre-conditions 23 Hậu điều kiện - Không có Post-conditions Luồng điều kiện - Không có Flow of events Luồng cơ bản - 1. Người dùng nhấn vào avatar Basic flow 2. Người dùng nhấn vào nút “Profile” 3.
Người dùng chỉnh sửa thông tin muốn thay đổi 4. Người dùng nhấn nút “OK” Luồng thay thế - Không có Alternative flow Quy định nghiệp Không có vụ - Professional regulations Yêu cầu phi chức Không có năng - Non- functional requirements 3. Chức năng làm bài quiz Bảng 5. Usecase làm bài quiz Tên - Name Làm bài quiz Mô tả - Người dùng làm bài quiz của môn học Description Đối tượng - Học sinh Actor(s) Tiền điều kiện - Đã đăng nhập thành công, tài khoản đã được kích hoạt Pre-conditions Hậu điều kiện - Các câu trả lời bài quiz của học sinh sẽ được lưu Post-conditions Luồng điều kiện - Không có Flow of events Luồng cơ bản - 1.