Báo cáo Đồ án 1: Xây dựng ứng dụng hỗ trợ dạy học tương tác (UIT)

Đồ án nghiên cứu Xây dựng ứng dụng hỗ trợ dạy học tương tác đồ án môn học đồ án 1, áp dụng công nghệ tiên tiến, tối ưu giải pháp kỹ thuật cho bài toán giáo dục.

• Tác giả: Lê Trung Kiên
• Người hướng dẫn: Thạc Sĩ Huỳnh Hồ Thị Mộng Trinh
• 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 ứng dụng hỗ trợ dạy học tương tác
• Loại tài liệu: Đồ án môn học
• Năm xuất bản: 2025
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Ứng Dụng Hỗ Trợ Dạy Học Tương Tác

Ứng dụng hỗ trợ dạy học tương tác là một giải pháp công nghệ hiện đại nhằm cải thiện chất lượng giáo dục và tạo môi trường học tập năng động. Trong bối cảnh chuyển đổi số trong giáo dục, các nền tảng học tập trực tuyến đã trở thành một phần không thể thiếu của hệ thống giáo dục toàn cầu. Đồ án này tập trung xây dựng một ứng dụng đa nền tảng cho phép giáo viên và học sinh tương tác một cách hiệu quả thông qua các tính năng như lớp học trực tuyến, quản lý tài liệu, và trò chơi giáo dục tương tác. Mục tiêu chính là nâng cao hiệu quả học tập và tạo sự hứng thú cho người học, đồng thời cung cấp cho giáo viên các công cụ quản lý lớp học hiệu quả.

1.1. Lý Do Chọn Đề Tài

Giáo dục hiện đại đòi hỏi sự kết hợp giữa phương pháp truyền thống và công nghệ số. Nhiều trường học vẫn gặp khó khăn trong việc quản lý quá trình dạy học, đặc biệt là sau những thay đổi toàn cầu về mô hình giáo dục lai ghép. Ứng dụng hỗ trợ dạy học tương tác giải quyết những vấn đề này bằng cách cung cấp nền tảng tập trung, cho phép giáo viên tạo và quản lý lớp học, chia sẻ tài liệu, và tương tác với học sinh một cách trực tiếp và có kiểm soát. Đây là cơ hội để áp dụng kiến thức công nghệ vào lĩnh vực giáo dục có ý nghĩa.

1.2. Phạm Vi Và Chức Năng Chính

Ứng dụng được phát triển với các chức năng cốt lõi bao gồm: xác thực người dùng (đăng nhập, đăng ký, quên mật khẩu), quản lý lớp học (tạo, chỉnh sửa, xóa lớp học), quản lý học sinh (thêm, xóa, phân nhóm học sinh), tạo và quản lý buổi học trực tuyến (live class), chia sẻ tài liệu học tập, và tích hợp các trò chơi giáo dục tương tác. Hệ thống được thiết kế để hỗ trợ cả giáo viên và học sinh trên nền tảng web và mobile, đảm bảo trải nghiệm người dùng mượt mà trên các thiết bị khác nhau.

II. Kiến Trúc Công Nghệ Và Stack Phát Triển

Đồ án sử dụng một stack công nghệ hiện đại được lựa chọn dựa trên yêu cầu về hiệu năng, khả năng mở rộng, và trải nghiệm người dùng. Phía Front-end được xây dựng bằng các công nghệ React.js hoặc Vue.js để tạo ra giao diện người dùng tương tác và đáp ứng nhanh. Phía Back-end sử dụng Node.js hoặc Python (Django/Flask) để xử lý logic ứng dụng, quản lý dữ liệu, và xác thực người dùng. Cơ sở dữ liệu được lựa chọn là PostgreSQL hoặc MongoDB tùy thuộc vào cấu trúc dữ liệu. Lựa chọn công nghệ này đảm bảo tính bảo mật cao, khả năng mở rộng tốt, và dễ dàng bảo trì. Ngoài ra, ứng dụng tích hợp các dịch vụ cloud để lưu trữ tài liệu và hỗ trợ streaming video cho live class.

2.1. Phía Front End

Giao diện người dùng được xây dựng với React.js hoặc Vue.js, tạo ra một ứng dụng đơn trang (SPA) với hiệu năng cao. Công nghệ này cho phép tải nội dung động mà không cần tải lại trang, cải thiện trải nghiệm người dùng đáng kể. Giao diện được thiết kế responsive để hoạt động hoàn hảo trên máy tính, tablet, và điện thoại di động. Sử dụng CSS framework như Bootstrap hoặc Tailwind CSS để đảm bảo thiết kế hiện đại và nhất quán trên tất cả nền tảng.

2.2. Phía Back End

Backend được xây dựng trên Node.js với Express.js hoặc Python với Django, cung cấp một API RESTful hoặc GraphQL. Hệ thống quản lý xác thực và phân quyền người dùng thông qua JWT (JSON Web Tokens). Cơ sở dữ liệu được thiết kế để lưu trữ thông tin người dùng, lớp học, tài liệu, và dữ liệu buổi học trực tuyến. Kiến trúc microservices có thể được áp dụng để tách biệt các chức năng và dễ dàng mở rộng trong tương lai.

III. Thiết Kế Hệ Thống Và Quản Lý Dữ Liệu

Thiết kế hệ thống được thực hiện theo phương pháp UML (Unified Modeling Language) với các use case diagrams chi tiết cho từng vai trò người dùng. Mô hình cơ sở dữ liệu được thiết kế bằng Entity-Relationship Diagram (ERD) để đảm bảo tính toàn vẹn dữ liệu và hiệu quả truy vấn. Hệ thống được chia thành các module chính: module xác thực, module quản lý lớp học, module quản lý người dùng, module live class, và module tài liệu. Mỗi module được thiết kế độc lập nhưng có khả năng tương tác với các module khác. Bảo mật dữ liệu là ưu tiên hàng đầu với việc mã hóa mật khẩu, xác thực hai yếu tố, và kiểm soát truy cập dựa trên vai trò (RBAC).

3.1. Thiết Kế Cơ Sở Dữ Liệu

Schema cơ sở dữ liệu bao gồm các bảng chính như Users (người dùng), Classrooms (lớp học), Students (học sinh), Teachers (giáo viên), LiveClasses (buổi học trực tuyến), Materials (tài liệu), và Groups (nhóm học). Mỗi bảng được thiết kế với các khóa chính và khóa ngoại để đảm bảo mối quan hệ dữ liệu chính xác. Sử dụng indexes trên các cột thường xuyên được truy vấn để tối ưu hóa hiệu năng. Normalization được áp dụng để loại bỏ dữ liệu trùng lặp và giảm dung lượng lưu trữ.

3.2. Thiết Kế Use Case

Use case diagram mô tả các tương tác chính giữa người dùng (giáo viên và học sinh) và hệ thống. Giáo viên có thể thực hiện các use case như: tạo lớp học, quản lý học sinh, tạo buổi live class, tải tài liệu, và xem báo cáo tiến độ. Học sinh có thể đăng ký lớp học, tham gia live class, xem tài liệu, và tham gia các trò chơi giáo dục. Mỗi use case được mô tả chi tiết với các điều kiện tiên quyết, quy trình chính, và trường hợp ngoại lệ.

IV. Kết Quả Đạt Được Và Hướng Phát Triển Tương Lai

Đồ án đã thành công xây dựng một ứng dụng hỗ trợ dạy học tương tác hoạt động đầy đủ trên cả nền tảng web và mobile. Giao diện người dùng được đánh giá là thân thiện, dễ sử dụng, và hỗ trợ tốt các chức năng chính. Hệ thống đã được kiểm thử trên các trường hợp sử dụng khác nhau để đảm bảo tính ổn định và độ tin cậy. Ứng dụng cung cấp giá trị thực tiễn cho cả giáo viên (quản lý lớp học hiệu quả) và học sinh (tăng cường tương tác và sự tham gia). Tuy nhiên, còn những cơ hội cải thiện và mở rộng trong các phiên bản tương lai, như tích hợp AI để cá nhân hóa học tập, phân tích dữ liệu học tập nâng cao, và mở rộng thư viện trò chơi giáo dục.

4.1. Ưu Điểm Và Kết Quả Đạt Được

Ứng dụng thành công triển khai tất cả chức năng thiết kế với hiệu suất tốt và giao diện trực quan. Người dùng có thể dễ dàng tạo và quản lý lớp học, tương tác với học sinh, và chia sẻ tài liệu. Tính năng live class cho phép giáo dục trực tuyến thực sự, còn trò chơi tương tác tăng sự hứng thú học tập. Bảo mật được đảm bảo thông qua xác thực mạnh và mã hóa dữ liệu. Hệ thống đã được kiểm thử kỹ và tối ưu hiệu năng để đáp ứng nhu cầu thực tế.

4.2. Hướng Phát Triển Tương Lai

Các hướng phát triển tiềm năng bao gồm: tích hợp học máy (Machine Learning) để cá nhân hóa học tập theo từng học sinh, phát triển bảng điều khiển phân tích chi tiết cho giáo viên, mở rộng thư viện game với các trò chơi giáo dục đa dạng, hỗ trợ đánh giá tự động, và tích hợp với các nền tảng học tập khác. Ứng dụng cũng có thể mở rộng sang các trường học khác và phát triển các tính năng cho quản lý nhà trường. Trong dài hạn, nền tảng có thể trở thành một giải pháp giáo dục toàn diện hỗ trợ toàn bộ hệ thống quản lý học tập của trường.

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

Chương 1: Giới thiệu đề tài - Trình bày tổng quan về đề tài, nêu rõ lý do chọn đề tài và các công nghệ được sử dụng trong quá trình thực hiện. Chương 2: Cơ sở lý thuyết - Khái quát các lý thuyết nền tảng và mô tả chi tiết các công nghệ áp dụng trong quá trình triển khai đề tài. Chương 3: Phân tích thiết kế hệ thống - Phân tích chi tiết hệ thống, bao gồm các thiết kế chức năng và cơ sở dữ liệu của hệ thống. Chương 4: Xây dựng ứng dụng - Trình bày hình ảnh minh họa tổng quan các giao diện của ứng dụng.

Chương 5: Kết luận - Đưa ra những kết luận tổng hợp từ quá trình thực hiện đồ án, đánh giá các ưu điểm, hạn chế, và đề xuất các định hướng phát triển trong tương lai. GIỚI THIỆU ĐỀ TÀI 1. Lý do chọn đề tài Trong bối cảnh giáo dục hiện đại, việc giảng dạy và học tập ngày càng đòi hỏi sự tương tác cao, hiệu quả và sáng tạo. Tuy nhiên, các công cụ hỗ trợ dạy và học hiện nay thường bị phân tán, thiếu tính tích hợp, dẫn đến việc sử dụng trở nên phức tạp và không đáp ứng đầy đủ nhu cầu của giáo viên lân học sinh.

Nhận thấy thực trạng này, chúng em đã quyết định chọn đề tài “Xây dựng ứng dụng hỗ trợ dạy học tương tác” với mong muốn phát triển một nền tảng tích hợp đa chức năng. Ứng dụng này sẽ bao gồm các tính năng như trình chiếu bài giảng, thu thập phản hồi thời gian thực từ học sinh, và tạo các hoạt động tương tác trực tuyến như các trò chơi tương tác, nâng cao hiệu quả giảng dạy và tăng cường sự tham gia của học sinh. Việc thực hiện đề tài không chỉ giúp chúng em áp dụng những kiến thức đã học vào thực tế mà còn là cơ hội để rèn luyện các kỹ năng như thiết kế hệ thống, lập trình, và giải quyết vấn đề. Đồng thời, chúng em kỳ vọng sản phẩm này sẽ trở thành một công cụ hữu ích, hỗ trợ giáo viên tối ưu hoá quá trình giảng dạy, từ đó góp phần nâng cao chất lượng giáo dục.

Khảo sát hiện trạng Hiện nay, nhiều công cụ hỗ trợ dạy học tương tác đã và đang được sử dụng phổ biến trong môi trường giáo dục, điển hình như “Zoom”, “Quizziz”, “Kahoot!”, “bảng tương tác White Board”, “Classpoint”, … Những công cụ này đã góp phần đáng kể trong việc nâng cao hiệu quả giảng dạy và học tập thông qua các tính năng như họp trực tuyến, quản lý lớp học, và chia sẻ tài liệu. Tuy nhiên, qua quá trình nghiên cứu và khảo sát, chúng em nhận thấy các công cụ này vẫn tồn tại một số hạn chế nhất định: - Tính năng phân tán: Mỗi công cụ chỉ tập trung vào một số khía cạnh vủa quá trình dạy học. Ví dụ, Zoom tối ưu cho họp trực tuyến nhưng thiếu các tính năng hỗ trợ bài giảng trực quan hay tương tác học sinh. Trong khi đó, Kahoot! quản lý tốt các câu hỏi tương tác trực tuyến nhưng lại thiếu các công cụ hỗ trợ dạy và học.

Điều này khiến giáo viên phải kết hợp nhiều công cụ cùng lúc, gây khó khăn trong quản lý và giảm tính liền mạch của buổi học. 2 - Hạn chế về tính tương tác: Hầu hết các ứng dụng hiện tại chưa đáp ứng đầy đủ nhu cầu tương tác đa chiều giữa giáo viên và học sinh. Các tính năng như thu nhập phản hồi tức thời, tổ chức bài kiểm tra ngắn ngay trong bài giảng, hoặc tạo các hoạt động nhóm trực tuyến còn thiếu hoặc chưa được tích hợp hiệu quả. - Thiếu sự linh hoạt và cá nhân hoá: Giao diện và chức năng của các công cụ hiện này thường chưa thân thiện với các nhóm đối tượng đa dạng, đặc biệt là những lớp học nhỏ hoặc các buổi dạy học mang tính cá nhân hoá.

- Khả năng tích hợp còn hạn chế: Giáo viên thường phải chuyển đổi qua lại giữa nhiều nền tảng để thực hiện các tác vụ như trình chiếu bài giảng, tổ chức thảo luận, và chấm bài tập. Điều này gây mất thời gian và giảm hiệu quả giảng dạy. - Chi phí sử dụng: Một số ứng dụng yêu cầu trả phí để sử dụng các tính năng nâng cao, trở thành rào cản cho các trường học hoặc giáo viên muốn tối ưu hoá quá trình dạy học nhưng có nguồn kinh phí hạn chế. Từ những thực trạng trên, chúng em nhận thấy cần thiết phải xây dựng một ứng dụng hỗ trợ dạy học tương tác với tính năng tích hợp và tối ưu hoá trải nghiệm người dùng.

Ứng dụng này sẽ tập trung vào việc đáp ứng các nhu cầu thiết yếu của giáo viên như giảng dạy trực tuyến, quản lý tài liệu, tổ chức hoạt động tương tác, và thu thập phản hồi từ học sinh, hướng tới việc cải thiện chất lượng giáo dục một cách toàn diện. Phạm vi đề tài 1. Các chức năng chính Ứng dụng hỗ trợ dạy học tương tác này được nhóm chúng em phát triển tập trung vào các chức năng sau: - Quản lý thông tin người dùng: o Cho phép người dùng có thể đăng nhập, đăng ký, và chỉnh sửa thông tin cá nhân của mình. o Có 2 role được áp dụng: Giáo viên (Teacher) và Học sinh (Student).

- Quản lý lớp học và các hoạt động của lớp học: 3 o Tạo không gian như một lớp học trực tuyến ảo. o Giáo viên có thể tạo mới các lớp học và quản lý các hoạt động của lớp, như thêm mới học sinh vào lớp, tạo nhóm, thêm tài liệu, xem báo cáo, … o Học sinh có thể gia nhập lớp học và xem các thông tin có liên quan đến lớp học này. - Trò chơi tương tác: o Cung cấp môi trường làm việc hiệu quả để giáo viên có thể tạo và quản lý các trò chơi tương tác. o Học sinh có thể tham gia các trò chơi thông qua nhập mã Code hoặc QR Code.

Đối tượng sử dụng Ứng dụng này hướng đến học sinh, sinh viên và giáo viên, giảng viên ở các nhóm hoặc lớp học tập quy mô vừa và nhỏ, nhưng có thể được mở rộng trong tương lai. Phạm vi kỹ thuật Ứng dụng được phát triển trên nền tảng web và có thể được truy cập từ nhiều thiết bị khác nhau. Ưu tiên sử dụng các công nghệ có mã nguồn mở để giảm chi phí và dễ dàng tích hợp các tính năng mới. Phạm vi đồ án này tập trung vào việc xây dựng một phiên bản thử nghiệm với các tính năng cơ bản.

Các chức năng nâng cao hoặc mở rộng sẽ được xem xét bổ sung trong giai đoạn tiếp theo. Công nghệ sử dụng Ứng dụng hỗ trợ dạy học tương tác được xây dựng bằng cách tích hợp nhiều công nghệ hiện đại, đảm bảo hiệu năng, trải nghiệm người dùng tối ưu, và khả năng mở rộng trong tương lai. Các công nghệ chính được sử dụng bao gồm: 4 1.js: Đây là Framework mạnh mẽ giúp phát triển giao diện người dùng nhanh chóng. Hỗ trợ tối ưu hiệu suất, SEO, và tích hợp API mượt mà.

- Tailwind CSS: Framework CSS linh hoạt, dễ sử dụng, giúp tạo diện hiện đại, đồng nhất. - Shadcn/ui: Thư viện giao diện người dùng tích hợp với Tailwind CSS, cung cấp các thành phần giao diện tiên tiến, phù hợp với ứng dụng hiện đại. - TanStack Query: Công cụ quản lý liệu mạnh mẽ phía frontend, giúp xử lý truy vấn, đồng bộ và cập nhật dữ liệu từ backend hiệu quả.IO: Cung cấp tính năng thời gian thực, đảm bảo tương tác đồng bộ giữa các người dùng như thảo luận nhóm, hoạt động trực tuyến. - Figma: Nền tảng thiết kế giao diện người dùng, đảm bảo tính thẩm mỹ và nhất quán trong giao diện người dùng.

Backend - NestJS: Framework phát triển backend hiệu quả, hỗ trợ xây dựng API mạnh mẽ và cấu trúc dự án rõ ràng. - Swagger: Công cụ thiết kế và tài liệu hoá API, giúp dễ dàng kiểm tra và tích hợp. - Prisma: ORM (Object-Relational Mapping) mạnh mẽ, giúp giao tiếp với cơ sở dữ liệu dễ dàng và tối ưu hoá truy vấn dữ liệu. Triển khai - Supabase: Nền tảng backend-as-a-service, cung cấp cơ sở dữ liệu PostgreSQL, tính năng xác thực và lưu trữ thời gian thực.

- PostgreSQL: là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở, nổi bật với tính linh hoạt, hiệu suất cao và khả năng mở rộng vượt trội. - Google Cloud VM (Virtual Machine): VM của Google Cloud thông qua dịch vụ Compute Engine được sử dụng đế triển khai toàn bộ hệ thống. 5 - Dropbox: Một dịch vụ lưu trữ đám mây cho phép lưu trữ và đồng bộ hóa các tệp tin giữa nhiều thiết bị. - Cloudinary: Một nền tảng đám mây cho phép quản lý, lưu trữ và biến đổi hình ảnh và video.

Lý do lựa chọn công nghệ - Hiệu suất cao: Sử dụng các công cụ tối ưu giúp tăng tốc độ xử lý và trải nghiệm người dùng. - Khả năng mở rộng: Hỗ trợ nâng cấp và bổ sung tính năng dễ dàng trong tương lai. - Hỗ trợ mạnh mẽ từ cộng đồng: Giúp giải quyết các vấn đề kỹ thuật nhanh chóng và đảm bảo tính ổn định. Công cụ hỗ trợ - Visual Studio Code: Trình soạn thảo mã nguồn mạnh mẽ với nhiều plugin hỗ trợ cho React, Next.js, Tailwind CSS và MongoDB.

Đây là công cụ chính được nhóm em sử dụng để viết mã, kiểm tra và triển khai các tính năng. - Git & GitHub: Hệ thống kiểm soát phiên bản giúp nhóm em quản lý mã nguồn hiệu quả, phối hợp làm việc nhóm, và lưu trữ các phiên bản mã trên GitHub để dễ dàng theo dõi và triển khai. - Figma: Dùng để thiết kế giao diện người dùng (UI), tạo prototype và chia sẻ các thiết kế trực quan trước khi triển khai. Môi trường phát triển Nhóm em phát triển ứng dụng chủ yếu trên hệ thống Windows đảm bảo tính tương thích và linh hoạt trong việc thiết lập môi trường làm việc cho từng thành viên.

NextJS Hình CƠ SỞ LÝ THUYẾT.js là một framework React do Vercel phát triển, nổi bật với các tính năng như Server-Side Rendering (SSR), Static Site Generation (SSG) và Incremental Static Regeneration (ISR), giúp tối ưu hiệu suất và hỗ trợ SEO hiệu quả. Hệ thống routing tự động, tích hợp API routes, và công cụ tối ưu hình ảnh giúp Next.js trở thành lựa chọn lý tưởng cho các ứng dụng web hiện đại. Trong dự án của nhóm, Next.js được sử dụng để xây dựng giao diện người dùng, tối ưu SEO và xử lý dữ liệu, mang lại trải nghiệm tốt nhất cho sinh viên. Tailwind CSS Hình CƠ SỞ LÝ THUYẾT.