Đồ án 1: Xây dựng hệ thống LMS hỗ trợ dạy và học lập trình web - Lê Quí Tứ

Đồ án 1: Xây dựng hệ thống LMS hỗ trợ dạy và học lập trình web. Báo cáo chi tiết phân tích yêu cầu, thiết kế hệ thống, CSDL và các giao diện.

• Tác giả: Lê Quí Tứ
• Người hướng dẫn: TS. Đỗ Thị Thanh Tuyền
• Trường học: Trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ Phần mềm
• Đề tài: Xây dựng hệ thống LMS hỗ trợ dạy và học lập trình web tương tác
• Loại tài liệu: Đồ án
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án LMS Dạy học Lập trình Web Tương tác

Đồ án LMS (Learning Management System) là một hệ thống quản lý học tập toàn diện, được xây dựng nhằm hỗ trợ dạy và học lập trình web tương tác một cách hiệu quả. Đây là dự án capstone của sinh viên ngành Công nghệ Phần mềm tại Trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh. Hệ thống này kết hợp các công nghệ web hiện đại để tạo nên một nền tảng học tập tương tác với đầy đủ tính năng cho giảng viên và học viên. Mục tiêu chính của đồ án là giải quyết những vấn đề tồn tại trong giáo dục lập trình web trực tuyến, từ việc quản lý khóa học, tương tác giữa giáo viên và học sinh, đến việc thực hành code thực tế trong một môi trường an toàn và hiệu quả.

1.1. Lý do chọn đề tài và mục tiêu chính

Nhu cầu học lập trình web online ngày càng gia tăng nhưng các nền tảng hiện có chưa đáp ứng đầy đủ. Đồ án này nhằm xây dựng một hệ thống LMS chuyên biệt có tích hợp công cụ biên soạn code, live streaming, và quản lý dự án. Mục tiêu là cung cấp một giải pháp toàn diện cho các khóa học lập trình web tương tác, giúp học viên thực hành code trực tiếp, tương tác với giảng viên qua video call, forum và các công cụ hỗ trợ khác.

1.2. Đối tượng sử dụng và phạm vi ứng dụng

Hệ thống LMS này được thiết kế cho hai nhóm người dùng chính: giảng viên (quản lý khóa học, thống kê doanh thu, tạo bài tập) và học viên (đăng ký khóa học, xem video, thực hành code, tham gia forum). Phạm vi ứng dụng bao gồm quản lý khóa học, video streaming, code editor tích hợp, live stream, task management, whiteboard drawing, và forum thảo luận. Đây là một nền tảng hoàn chỉnh cho các khóa học lập trình web chuyên nghiệp.

II. Các Tính năng Chính của Hệ thống LMS

Hệ thống LMS được phát triển với một bộ tính năng phong phú nhằm tối ưu hóa trải nghiệm dạy và học. Mỗi tính năng được thiết kế dựa trên phân tích yêu cầu chức năng chi tiết, đảm bảo đáp ứng nhu cầu thực tế của cả giảng viên và học viên. Các tính năng này bao gồm quản lý tài khoản, quản lý khóa học, code editor tương tác, live streaming, task management, whiteboard, và forum thảo luận. Mỗi module được tích hợp với nhau một cách liền mạch để tạo ra một nền tảng học tập toàn diện và dễ sử dụng.

2.1. Quản lý Khóa học và Dữ liệu Học viên

Giảng viên có khả năng tạo, chỉnh sửa, và quản lý khóa học một cách dễ dàng thông qua giao diện quản lý. Hệ thống LMS cho phép tổ chức nội dung theo chương, với mỗi chương chứa các bài giảng video, tài liệu, và bài tập. Ngoài ra, giảng viên có thể xem thống kê doanh thu, theo dõi tiến độ học viên, và quản lý danh sách học viên một cách tổng thể. Dữ liệu học viên được lưu trữ an toàn với xác thực email và quản lý mật khẩu bảo mật.

2.2. Code Editor và Công cụ Lập trình Web Tương tác

Code editor tích hợp trong hệ thống cho phép học viên viết, chỉnh sửa, và thực thi code trực tiếp trên nền tảng mà không cần cài đặt công cụ bên ngoài. Tính năng format code, thay đổi theme, thay đổi ngôn ngữ lập trình giúp tối ưu hóa trải nghiệm lập trình. Snippet library cho phép lưu và tái sử dụng đoạn code, còn code sharing giúp cộng tác giữa học viên và giảng viên một cách hiệu quả.

III. Kiến trúc Công nghệ và Thiết kế Hệ thống

Kiến trúc hệ thống LMS được xây dựng theo mô hình 3-layer (Presentation, Business Logic, Data Access) đảm bảo tính mô-đun và dễ bảo trì. Thiết kế sơ đồ Use case được xây dựng chi tiết cho cả giảng viên và học viên, bao gồm các quy trình đăng ký, đăng nhập, quản lý khóa học, thực hành code, và tương tác qua forum. Database được thiết kế với các bảng dữ liệu chi tiết lưu trữ thông tin người dùng, khóa học, chương học, tasks, comments, và code snippets. Hệ thống này sử dụng các công nghệ web hiện đại để đảm bảo hiệu suất và khả năng mở rộng.

3.1. Phân tích Yêu cầu Chức năng và Phi chức năng

Yêu cầu chức năng bao gồm: quản lý tài khoản người dùng, tạo và quản lý khóa học, code editor tương tác, live streaming, task management, whiteboard drawing, forum thảo luận, và video sharing. Yêu cầu phi chức năng tập trung vào hiệu suất (thời gian tải trang < 2 giây), bảo mật (mã hóa mật khẩu, xác thực email), khả năng mở rộng (xử lý 1000+ người dùng đồng thời), và độ tin cậy (uptime > 99.9%).

3.2. Thiết kế Giao diện Người dùng UI UX

Giao diện hệ thống được thiết kế thân thiện với người dùng với các màn hình chính bao gồm: đăng ký/đăng nhập, quản lý profile, danh sách khóa học, chi tiết khóa học, code editor, live streaming, task management, whiteboard, và forum. Mỗi giao diện được tối ưu hóa cho responsive design, hoạt động tốt trên desktop, tablet, và mobile. UI/UX tuân theo các nguyên tắc thiết kế hiện đại để đảm bảo trải nghiệm người dùng tốt nhất.

IV. Các Công cụ Hỗ trợ Dạy Học Tương tác

Hệ thống LMS được trang bị các công cụ hỗ trợ dạy và học toàn diện nhằm tạo ra một môi trường học tập tương tác và hiệu quả. Bao gồm live streaming video, code editor tích hợp, whiteboard drawing, task/project management, forum thảo luận, và screen sharing. Các công cụ này cho phép giảng viên tương tác trực tiếp với học viên, cung cấp phản hồi real-time, và hỗ trợ học viên trong quá trình thực hành lập trình web. Tính năng livestream hỗ trợ share screen và cấu hình OBS cho phép giảng viên demo code một cách chuyên nghiệp.

4.1. Live Streaming Video Conferencing và Screen Sharing

Tính năng livestream cho phép giảng viên phát sóng trực tiếp khóa học với hỗ trợ video conferencing và screen sharing. Danh sách phiên live hiển thị các khóa học sắp diễn ra, học viên có thể tham gia phiên livestream và xem demo code từ giảng viên. Hệ thống hỗ trợ cấu hình OBS cho phép chất lượng video cao và ổn định. Tính năng chặn người dùng xấu bảo vệ môi trường học tập an toàn và tích cực.

4.2. Task Management Whiteboard và Forum Thảo luận

Task management cho phép giảng viên tạo và quản lý các nhiệm vụ, với view bảng Kanban, lịch và danh sách chi tiết. Whiteboard drawing cung cấp công cụ vẽ hình, chèn ảnh, link, minimap, và tính năng xuất ảnh. Forum thảo luận cho phép học viên đặt câu hỏi, thảo luận code, và chia sẻ kinh nghiệm. Các công cụ này tạo ra tương tác hai chiều giữa giảng viên và học viên, giúp tăng cường việc học tập và xây dựng cộng đồng học tập.

Trích đoạn nội dung tài liệu

MỞ ĐẦU 1. Lý do chọn đề tài Trong thời đại công nghệ số phát triển mạnh mẽ, việc học tập và giảng dạy trực tuyến ngày càng trở nên phổ biến và cần thiết. Đặc biệt, lập trình web là một lĩnh vực không ngừng mở rộng với nhu cầu cao về kỹ năng thực hành và tương tác. Tuy nhiên, các hệ thống quản lý học tập (LMS) hiện tại còn nhiều hạn chế trong việc hỗ trợ giảng dạy và học tập lập trình web, đặc biệt là thiếu tính năng tương tác trực quan, quản lý học viên hiệu quả, và hỗ trợ thực hành trực tiếp.

Đề tài "Xây dựng hệ thống LMS hỗ trợ dạy và học lập trình web tương tác" được chọn nhằm mục đích tạo ra một nền tảng toàn diện, kết hợp các tính năng hiện đại như live coding, quản lý khóa học qua video, whiteboard realtime, và coding editor. Hệ thống không chỉ đáp ứng nhu cầu giảng dạy và học tập lập trình, mà còn tăng cường khả năng tương tác giữa giảng viên và học viên, mang lại trải nghiệm học tập hiệu quả và thực tiễn hơn. Việc thực hiện đề tài không chỉ giải quyết các vấn đề còn tồn đọng trong LMS truyền thống mà còn góp phần vào việc nâng cao chất lượng giảng dạy và học tập trong lĩnh vực công nghệ thông tin. Đây là một bước tiến quan trọng để xây dựng môi trường học tập trực tuyến sáng tạo, linh hoạt và hiệu quả.

Mục tiêu đề tài Mục tiêu của đề tài là xây dựng một hệ thống LMS hiện đại, hỗ trợ dạy và học lập trình web tương tác, tập trung vào việc cung cấp các công cụ quản lý khóa học, thảo luận trực tuyến, thực hành lập trình trực tiếp, và hợp tác trong thời gian thực. Hệ thống hướng đến việc nâng cao trải nghiệm người dùng, tăng cường sự tương tác giữa giảng viên và học viên, đồng thời khắc phục các hạn chế của các nền tảng LMS truyền thống. Đối tượng nghiên cứu Đối tượng nghiên cứu của đề tài là các hệ thống quản lý học tập (LMS) và các công nghệ hỗ trợ giảng dạy, học tập trực tuyến. Đặc biệt, đề tài tập trung vào việc nghiên cứu các giải pháp tăng cường tính tương tác trong dạy và học lập trình web, bao gồm quản lý khóa học, giao tiếp thời gian thực, công cụ thực hành lập trình, và các tính năng cộng tác trực tuyến.

Đồng thời, các công nghệ và công cụ hiện đại như MUX, LiveKit, Convex, Piston, và Liveblocks cũng được nghiên cứu để tích hợp và tối ưu hóa trong hệ thống. Phân tích và đánh giá các hướng nghiên cứu đã có 1. Các hướng nghiên cứu Đề tài tập trung vào việc giải quyết các vấn đề liên quan đến dạy và học lập trình web tương tác. Các hướng nghiên cứu chính bao gồm: − Hệ thống quản lý học tập (LMS): Nghiên cứu cách xây dựng và tối ưu hóa hệ thống LMS để quản lý khóa học hiệu quả, tích hợp công nghệ phát video và hỗ trợ giảng dạy trực quan.

− Giao tiếp thời gian thực: Tìm hiểu các giải pháp realtime để nâng cao tính tương tác giữa giảng viên và học viên, bao gồm chat, video conferencing, và whiteboard trực tuyến. − Thực hành lập trình: Khám phá các công cụ hỗ trợ học viên viết, chạy, và kiểm tra mã nguồn ngay trên hệ thống, đảm bảo môi trường an toàn và linh hoạt. − Hợp tác trực tuyến: Nghiên cứu các công cụ cộng tác thời gian thực giúp giảng viên và học viên trao đổi, thảo luận và làm việc nhóm hiệu quả. − Tối ưu trải nghiệm người dùng: Nghiên cứu giao diện, trải nghiệm người dùng (UX/UI), và khả năng tối ưu hóa hiệu suất hệ thống.

Phương pháp đã được áp dụng Để hiện thực hóa các mục tiêu đề tài, các phương pháp chính đã được áp dụng bao gồm: − Phương pháp thiết kế module hóa: Hệ thống được chia thành các module chức năng như quản lý khóa học, forum chat, live coding, và whiteboard để dễ dàng triển khai và mở rộng. − Phương pháp tích hợp công nghệ: Lựa chọn và sử dụng các công nghệ hiện đại phù hợp với từng tính năng: o MUX: Xử lý và phát trực tuyến video (HLS). o Convex: Cơ sở dữ liệu realtime cho chat. o LiveKit: Hỗ trợ video conferencing và live streaming.

o Liveblocks và Yjs: Tạo whiteboard trực tuyến thời gian thực. o Piston: Chạy mã nguồn an toàn trong môi trường cách ly. − Phương pháp tối ưu hóa hiệu năng: Áp dụng các công nghệ tối ưu trải nghiệm người dùng, bao gồm drag-and-drop (Dnd Kit), skeleton loading, và responsive design. Đánh giá các ưu điểm và hạn chế của những nghiên cứu này Ưu điểm − Tính tương tác cao: Các nghiên cứu tập trung vào giải pháp realtime, như chat trực tuyến, whiteboard cộng tác, và live coding, giúp tăng cường sự tương tác giữa giảng viên và học viên.

− Tích hợp công nghệ hiện đại: Việc sử dụng các công cụ tiên tiến như MUX, LiveKit, Convex, và Piston đảm bảo hiệu suất cao, tính năng phong phú, và khả năng mở rộng của hệ thống. − Tính thực tế và khả thi: Hệ thống được thiết kế đáp ứng đúng nhu cầu thực tế của người dùng, đặc biệt là trong việc học lập trình web, một lĩnh vực cần kết hợp lý thuyết và thực hành. − Tối ưu trải nghiệm người dùng (UX/UI): Hệ thống áp dụng các giải pháp như drag-and-drop, responsive design, và skeleton loading, giúp cải thiện 7 giao diện và khả năng sử dụng. − Khả năng mở rộng và nâng cấp: Thiết kế module hóa giúp hệ thống dễ dàng tích hợp thêm tính năng mới Hạn chế − Độ phức tạp của công nghệ: Việc sử dụng nhiều công nghệ tiên tiến đòi hỏi phải có kiến thức sâu rộng, dẫn đến chi phí học tập và thời gian triển khai cao hơn.

− Chưa hoàn thiện một số chức năng: Một số tính năng quan trọng, như lưu lịch sử chat trong live coding hoặc phát lại stream, vẫn chưa được triển khai đầy đủ, làm giảm trải nghiệm người dùng. − Hạn chế về tài nguyên và môi trường thực thi: Coding Editor chưa hỗ trợ cây thư mục hoặc chạy dự án lớn, giới hạn trong các bài toán nhỏ hoặc ví dụ minh họa, khiến người dùng khó áp dụng trong các trường hợp thực tế phức tạp hơn. − Độ phụ thuộc vào công nghệ bên ngoài: Hệ thống sử dụng nhiều công cụ bên thứ ba (MUX, LiveKit, Convex, Piston, v.), dẫn đến phụ thuộc vào các nền tảng này và có thể gặp rủi ro nếu có thay đổi hoặc gián đoạn từ nhà cung cấp. − Tính toàn vẹn của hệ thống: Do hệ thống chưa áp dụng phương pháp kiểm thử tích hợp, việc đảm bảo sự phối hợp mượt mà giữa các module vẫn còn hạn chế.

Vấn đề còn tồn tại 1. Những vấn đề chưa được giải quyết − Lưu trữ và quản lý lịch sử chat trong live coding: Hiện tại, hệ thống chưa hỗ trợ lưu trữ lịch sử chat trong phiên live, khiến học viên không thể xem lại các nội dung thảo luận quan trọng sau khi buổi học kết thúc. − Phát lại các phiên live stream: Các buổi live stream chưa được ghi lại và lưu trữ, dẫn đến việc học viên không thể xem lại các nội dung đã bỏ lỡ hoặc ôn tập. − Hỗ trợ diagram trên whiteboard: Mặc dù whiteboard hỗ trợ nhiều hình dạng 8 và đường nối, nhưng việc di chuyển các thành phần vẫn chưa tối ưu, đặc biệt trong việc vẽ và chỉnh sửa các diagram phức tạp.

− Hạn chế trong Coding Editor: o Cây thư mục và cấu trúc dự án lớn. o Tự cài đặt thêm package hoặc plugin, làm giảm khả năng tùy chỉnh cho người dùng. o Thực thi mã JavaScript trong môi trường trình duyệt, do các vấn đề bảo mật. − Tối ưu hóa tài nguyên hệ thống: Chưa có cơ chế tối ưu hóa hiệu quả tài nguyên (CPU, RAM) khi chạy các tác vụ nặng như live coding hoặc chạy mã nguồn trên Coding Editor.

− Chưa tích hợp đầy đủ SEO: Các tính năng như open graph image và metadata khi chia sẻ khóa học hoặc phiên live stream chưa được triển khai toàn diện. Đánh giá tầm quan trọng của những vấn đề này và tác động − Tầm quan trọng: Các vấn đề chưa được giải quyết, như lưu trữ lịch sử chat, phát lại stream, và hỗ trợ coding editor đầy đủ, đều liên quan trực tiếp đến trải nghiệm và hiệu quả học tập của người dùng. Ngoài ra, khả năng mở rộng, tối ưu hóa tài nguyên và kiểm thử tích hợp cũng rất quan trọng để đảm bảo hệ thống hoạt động ổn định và đáp ứng nhu cầu phát triển lâu dài. − Tác động: Những hạn chế này có thể làm giảm sự hài lòng của người dùng, đặc biệt là học viên không thể truy cập lại nội dung hoặc sử dụng các tính năng nâng cao để thực hành và học tập hiệu quả.

− Đánh giá: Việc giải quyết các vấn đề này là cần thiết để đảm bảo hệ thống LMS không chỉ đáp ứng nhu cầu hiện tại mà còn có khả năng phát triển trong tương lai. Ưu tiên cải thiện các tính năng cốt lõi như coding editor, live stream và khả năng phối hợp module sẽ nâng cao giá trị của hệ thống, tạo tiền đề vững chắc cho sự mở rộng và ứng dụng thực tiễn. Vấn đề cần tập trung và nghiên cứu giải quyết − Tăng cường tính tương tác: Xây dựng các công cụ hỗ trợ thời gian thực như chat, whiteboard, và live coding để nâng cao sự gắn kết giữa giảng viên và học viên. − Nâng cao trải nghiệm thực hành: Phát triển coding editor mạnh mẽ, hỗ trợ nhiều ngôn ngữ và chạy mã an toàn, đáp ứng nhu cầu thực hành lập trình trực tiếp.

− Quản lý và trình bày nội dung hiệu quả: Tối ưu việc tạo, quản lý khóa học và phát video trực tuyến với giao diện thân thiện, kết hợp SEO để tăng khả năng tiếp cận. − Tối ưu hiệu suất và mở rộng: Đảm bảo hệ thống hoạt động ổn định, xử lý tốt nhiều người dùng đồng thời, và có khả năng mở rộng dễ dàng trong tương lai. 10 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2. Nextjs Hình CƠ SỞ LÝ THUYẾT.js là một framework React được phát triển bởi Vercel, được thiết kế để xây dựng các ứng dụng web hiện đại với hiệu suất cao và trải nghiệm người dùng tuyệt vời.

Phiên bản Next.js 14, mới nhất, đã mang lại nhiều cải tiến đáng kể so với các phiên bản trước, đặc biệt trong việc tối ưu hóa hiệu năng, phát triển giao diện người dùng và hỗ trợ các tính năng tiên tiến như React Server Components (RSC). Ưu điểm − Trải nghiệm phát triển thân thiện: Các công cụ tích hợp và cấu hình mặc định hợp lý giúp giảm thời gian thiết lập và triển khai ứng dụng.