Báo cáo Đồ án 1: Xây dựng Ứng dụng Hỗ trợ Học tập cho Sinh viên UIT

Tham khảo báo cáo đồ án xây dựng ứng dụng hỗ trợ học tập cho sinh viên. Dự án tích hợp các tính năng họp trực tuyến, diễn đàn và soạn thảo văn bản.

• Tác giả: Trần Nhật Khánh
• Người hướng dẫn: ThS. Huỳnh Hồ Thị Mộng Trinh
• Trường học: Đại học Quốc gia Thành phố Hồ Chí Minh, Trường Đại học Công nghệ Thông tin, Khoa Công nghệ Phần mềm
• Đề tài: Xây dựng Ứng dụng Hỗ trợ Học tập của Sinh viên
• 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 Xây dựng App Hỗ trợ Học tập

Đồ án xây dựng app hỗ trợ học tập là một dự án công nghệ thông tin nhằm phát triển một nền tảng toàn diện cho sinh viên hiện đại. Ứng dụng này được thiết kế để giải quyết những thách thức trong quá trình học tập của sinh viên bằng cách tích hợp các tính năng hiện đại như họp trực tuyến, soạn thảo văn bản cộng tác và diễn đàn trao đổi học tập. Dự án được thực hiện bởi các sinh viên từ Trường Đại học Công nghệ Thông tin, Đại học Quốc gia TP. HCM, dưới sự hướng dẫn của các giảng viên chuyên môn. Mục tiêu chính là tạo ra một ứng dụng hỗ trợ sinh viên toàn diện, giúp nâng cao hiệu quả học tập và tạo môi trường học tập tương tác.

1.1. Lý do chọn đề tài

Lý do chọn đề tài này xuất phát từ nhận thức rõ ràng về nhu cầu của sinh viên hiện đại trong việc tìm kiếm các công cụ hỗ trợ học tập hiệu quả. Trong bối cảnh giáo dục số hóa, sinh viên cần một nền tảng tập trung giúp họ quản lý học tập, cộng tác với bạn cùng lớp và tương tác với giảng viên. Ứng dụng này sẽ giảm bớt sự phân tán giữa các công cụ và tạo ra một không gian học tập tích hợp cho tất cả sinh viên.

1.2. Phạm vi và mục tiêu dự án

Phạm vi đồ án bao gồm xây dựng một ứng dụng web đầy đủ chức năng với ba module chính: hệ thống diễn đàn trao đổi, nền tảng soạn thảo tài liệu cộng tác, và công cụ họp trực tuyến. Dự án sử dụng công nghệ hiện đại như React, Node.js, MongoDB và các API chuyên biệt. Mục tiêu là tạo ra một sản phẩm hoàn thiện, có giao diện thân thiện và các tính năng đáp ứng nhu cầu của sinh viên đại học.

II. Công nghệ và Công cụ Sử dụng

Công nghệ sử dụng trong đồ án được lựa chọn kỹ lưỡng để đảm bảo hiệu suất, bảo mật và khả năng mở rộng. Ứng dụng được phát triển trên nền tảng web hiện đại, kết hợp frontend framework mạnh mẽ với backend API linh hoạt. Các công cụ hỗ trợ bao gồm hệ thống xác thực người dùng Clerk, thư viện UI React shadcn dựa trên Tailwind CSS, nền tảng cộng tác GetStream cho các tính năng real-time, và Liveblocks để soạn thảo văn bản thời gian thực. Cơ sở dữ liệu NoSQL MongoDB được chọn để lưu trữ dữ liệu linh hoạt. Những lựa chọn này đảm bảo ứng dụng hỗ trợ học tập có hiệu suất cao và trải nghiệm người dùng tốt.

2.1. Công nghệ Frontend và Backend

Frontend được xây dựng bằng React kết hợp với Tailwind CSS để tạo giao diện đẹp mắt và responsive. Backend sử dụng Node.js và Express để xử lý các yêu cầu API. MongoDB được sử dụng như cơ sở dữ liệu chính để lưu trữ dữ liệu người dùng, bài đăng, tài liệu và thông tin cuộc họp. Kiến trúc này cho phép ứng dụng hỗ trợ sinh viên xử lý nhiều người dùng đồng thời một cách hiệu quả.

2.2. Công cụ hỗ trợ và Tích hợp API

Clerk cung cấp hệ thống xác thực an toàn và quản lý tài khoản người dùng. GetStream tích hợp tính năng cộng tác thời gian thực cho diễn đàn và chat. Liveblocks hỗ trợ soạn thảo tài liệu cộng tác cho phép nhiều người sửa tài liệu cùng lúc. Svix cung cấp dịch vụ webhook để đồng bộ dữ liệu. DeepInfra hỗ trợ các tính năng AI nâng cao. Bộ công cụ này tạo nên một app hỗ trợ học tập toàn diện và hiện đại.

III. Kiến trúc Hệ thống và Thiết kế Dữ liệu

Kiến trúc hệ thống được thiết kế theo mô hình lớp, tách biệt rõ ràng giữa presentation layer, business logic layer và data layer. Mô hình này đảm bảo tính bảo trì cao và dễ mở rộng. Thiết kế dữ liệu sử dụng NoSQL schema linh hoạt để lưu trữ thông tin người dùng, bài đăng trong diễn đàn, tài liệu soạn thảo, và dữ liệu cuộc họp. Các collection trong MongoDB bao gồm users, posts, comments, documents, documents_access, meetings và recordings. Hệ thống sử dụng các usecase để định nghĩa rõ ràng tương tác giữa người dùng và ứng dụng hỗ trợ học tập. Thiết kế này cho phép quản lý hiệu quả các chức năng như đăng nhập, tạo bài đăng, chia sẻ tài liệu và tổ chức họp trực tuyến.

3.1. Mô hình Dữ liệu NoSQL

MongoDB được sử dụng để lưu trữ dữ liệu với schema linh hoạt. Các collection chính bao gồm users cho thông tin người dùng, posts cho bài đăng diễn đàn, comments cho câu trả lời, documents cho tài liệu soạn thảo, meetings cho thông tin cuộc họp, và recordings cho video ghi hình. Mỗi collection có các field phù hợp như timestamps, ownership, permissions và metadata. Thiết kế này cho phép app hỗ trợ sinh viên truy vấn dữ liệu nhanh chóng và xử lý các tính năng phức tạp như tìm kiếm, filter và sorting.

3.2. Usecase và Luồng Xử lý

Hệ thống định nghĩa 26 usecase chính bao gồm quản lý tài khoản, quản lý bài đăng diễn đàn, soạn thảo tài liệu cộng tác và quản lý cuộc họp trực tuyến. Mỗi usecase chi tiết mục tiêu, tiền điều kiện, bước thực hiện và kết quả. Ví dụ, usecase 'Tạo bài đăng' cho phép sinh viên đăng câu hỏi hoặc chia sẻ kiến thức trên ứng dụng hỗ trợ học tập, trong khi 'Soạn thảo cộng tác' cho phép nhóm sinh viên cùng chỉnh sửa tài liệu.

IV. Tính năng Chính của Ứng dụng

Ứng dụng hỗ trợ học tập được xây dựng với ba tính năng chính tích hợp một cách hiệu quả. Diễn đàn trao đổi cho phép sinh viên đặt câu hỏi, chia sẻ kiến thức và bình luận dưới các bài đăng. Hệ thống soạn thảo tài liệu hỗ trợ tạo, chỉnh sửa và chia sẻ tài liệu với quyền truy cập linh hoạt. Nền tảng họp trực tuyến cung cấp khả năng tạo cuộc họp, lên lịch, ghi hình và xem lại. Giao diện người dùng được thiết kế thân thiện sử dụng Tailwind CSS và shadcn components. Toàn bộ hệ thống được tối ưu hóa cho hiệu suất, bảo mật và trải nghiệm người dùng. App hỗ trợ sinh viên này cung cấp một môi trường học tập toàn diện.

4.1. Tính năng Diễn đàn Trao đổi Học tập

Diễn đàn cho phép sinh viên tạo bài đăng câu hỏi, chia sẻ bài học hoặc thảo luận các chủ đề học tập. Người dùng có thể vote, lưu bài đăng yêu thích, và trả lời câu hỏi. Hệ thống hỗ trợ phân loại theo nhãn (tags) giúp tổ chức nội dung. Tính năng bình luận lồng nhau tạo luồng trò chuyện logic. Ứng dụng hỗ trợ học tập này giúp sinh viên tương tác và học hỏi từ nhau.

4.2. Tính năng Soạn thảo và Họp trực tuyến

Soạn thảo tài liệu cộng tác cho phép nhiều sinh viên chỉnh sửa cùng một tài liệu trong thời gian thực bằng Liveblocks. Họp trực tuyến được hỗ trợ bởi GetStream, cho phép tạo cuộc họp, lên lịch, chia sẻ màn hình và ghi hình. Tính năng ghi hình tự động lưu lại buổi học để xem lại sau. App hỗ trợ học tập này kết hợp các công cụ này một cách seamless.

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

Chương 1 GIỚI THIỆU ĐỀ TÀI 1.1 Lý do chọn đề tài Trong bối cảnh học tập và làm việc hiện đại, sinh viên ngày càng đối mặt với nhiều thách thức trong việc quản lý thời gian, tương tác nhóm và tiếp cận thông tin học tập. Các công cụ hỗ trợ hiện nay thường bị phân mảnh, khiến việc sử dụng trở nên phức tạp và kém hiệu quả. Nhận thấy nhu cầu này, nhóm quyết định chọn đề tài "Xây dựng ứng dụng hỗ trợ học tập của sinh viên" với mục tiêu phát triển một nền tảng tích hợp đa chức năng. Ứng dụng này bao gồm các tính năng như họp trực tuyến, soạn thảo văn bản theo nhóm, và diễn đàn trao đổi thông tin, nhằm tạo điều kiện thuận lợi cho sinh viên trong việc học tập và hợp tác.

Việc thực hiện đề tài không chỉ giúp chúng em áp dụng kiến thức đã học vào thực tế mà còn rèn luyện các kỹ năng thiết kế, lập trình, và giải quyết vấn đề. Đồng thời, chúng em mong muốn đóng góp một giải pháp hữu ích, hỗ trợ sinh viên tối ưu hóa quá trình học tập và phát triển cá nhân.2 Khảo sát hiện trạng Hiện nay, nhiều công cụ được sử dụng để hỗ trợ sinh viên trong học tập và làm việc nhóm, chẳng hạn như Microsoft Teams, Google Classroom, hay Zoom. Mặc dù những công cụ này đã đáp ứng một phần nhu cầu quản lý, giao tiếp và hợp tác, nhưng nhóm em nhận thấy chúng vẫn tồn tại một số hạn chế đáng chú ý: ● Tính năng phân tán: Mỗi công cụ chỉ tập trung vào một số chức năng cụ thể. Ví dụ, Zoom tối ưu cho họp trực tuyến nhưng thiếu công cụ quản lý tài liệu, trong khi Google Classroom hỗ trợ bài tập tốt nhưng không có diễn đàn trao đổi thông tin.

● Thiếu sự linh hoạt: Giao diện và chức năng của các ứng dụng chưa được tối ưu để đáp ứng đầy đủ nhu cầu đa dạng của sinh viên, đặc biệt là các nhóm nhỏ. 14 ● Khả năng tích hợp còn hạn chế: Người dùng thường phải sử dụng nhiều ứng dụng song song, dẫn đến mất thời gian và giảm hiệu quả làm việc. ● Chi phí sử dụng: Một số công cụ yêu cầu trả phí để sử dụng các tính năng nâng cao, tạo ra rào cản cho sinh viên và các nhóm học tập nhỏ. Từ những vấn đề trên, nhóm em quyết định phát triển một ứng dụng tích hợp, nhằm cung cấp các chức năng như họp trực tuyến, soạn thảo văn bản, và diễn đàn trao đổi.

Ứng dụng được thiết kế với mục tiêu thân thiện với người dùng, chi phí hợp lý, và có khả năng đáp ứng linh hoạt các nhu cầu học tập và làm việc của sinh viên.3 Phạm vi đề tài Ứng dụng hỗ trợ sinh viên do nhóm em phát triển tập trung vào các chức năng chính như sau: 1. Họp trực tuyến: o Cho phép người dùng tạo và tham gia các cuộc họp trực tuyến. o Hỗ trợ chia sẻ màn hình, trò chuyện, và ghi lại nội dung cuộc họp. Soạn thảo văn bản theo nhóm: o Cung cấp môi trường làm việc chung để nhiều người cùng chỉnh sửa tài liệu theo thời gian thực.

o Hỗ trợ lưu trữ và quản lý tài liệu một cách hiệu quả. Diễn đàn trao đổi: o Tạo không gian để sinh viên đăng bài, thảo luận và giải đáp thắc mắc về các chủ đề học tập. o Phân chia các chủ đề theo nhóm hoặc môn học để dễ dàng quản lý. Đối tượng sử dụng: o Ứng dụng hướng đến sinh viên đại học và các nhóm học tập nhỏ, nhưng có thể mở rộng cho các đối tượng khác trong tương lai.

Phạm vi kỹ thuật: 15 o Ứng dụng được phát triển trên nền tảng web và có thể truy cập từ nhiều thiết bị khác nhau. o Ưu tiên sử dụng công nghệ 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 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.4 Công nghệ sử dụng Ứng dụng hỗ trợ sinh viên được xây dựng bằng cách tích hợp nhiều công nghệ hiện đại, nhằm tối ưu hóa hiệu năng và mang lại trải nghiệm người dùng tốt nhất: Frontend ● Next.js: Framework giúp xây dựng giao diện người dùng nhanh chóng, tối ưu hiệu suất và hỗ trợ tốt cho SEO.

● Clerk: Công cụ quản lý xác thực người dùng, đảm bảo bảo mật và trải nghiệm đăng nhập mượt mà. ● Svix: Được tích hợp trong Clerk webhook nhằm gọi API đồng bộ dữ liệu người dùng của Clerk vào Database. ● TinyMCE: Công cụ định dạng và soạn thảo văn bản giúp hiển thị các văn bản trên nền tảng web bắt mắt và dễ nhìn hơn. ● Tailwind CSS: Framework CSS linh hoạt, giúp thiết kế giao diện đơn giản, đồng nhất và hiện đại.

● GetStream: Hỗ trợ triển khai các tính năng họp trực tuyến và gọi video chất lượng cao. ● Liveblocks: Công cụ mạnh mẽ cho phép đồng bộ dữ liệu và hỗ trợ soạn thảo thời gian thực. 16 ● Shadcn-ui: Thư viện giao diện người dùng kết hợp giữa Tailwind CSS và các thành phần UI tiên tiến, giúp xây dựng giao diện nhất quán và tùy biến cao, phù hợp với các ứng dụng hiện đại.js API Routes: Được sử dụng để xây dựng các API mạnh mẽ và tích hợp liền mạch với frontend. ● DeepInfra: Cung cấp các API gọi đến AI để tạo các câu trả lời dựa trên câu hỏi cho trước.

● MongoDB: Cơ sở dữ liệu NoSQL linh hoạt, giúp lưu trữ và truy vấn dữ liệu hiệu quả. Triển khai ● Vercel: Nền tảng triển khai ứng dụng nhanh chóng, dễ dàng quản lý với khả năng tự động hóa (CI/CD nếu cần thiết). Lý do chọn công nghệ Các công nghệ được lựa chọn dựa trên khả năng đáp ứng yêu cầu phát triển, tính mở rộng, và hỗ trợ tốt từ cộng đồng. Chúng đảm bảo ứng dụng không chỉ hoạt động ổn định mà còn có thể nâng cấp dễ dàng trong các phiên bản tiếp theo.5 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. 17 ● 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.6 Môi trường phát triển Nhóm em phát triển ứng dụng chủ yếu trên các hệ điều hành Windows và macOS, đả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. Chương 2 CƠ SỞ LÝ THUYẾT 2.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.2 Công cụ xác thực người dùng clerk Clerk là một nền tảng quản lý xác thực người dùng mạnh mẽ, cung cấp các tính năng như đăng ký, đăng nhập, quản lý phiên làm việc và xác thực đa yếu tố (MFA). Với khả năng tích hợp dễ dàng vào các framework như Next.js, Clerk giúp đơn giản hóa việc bảo mật ứng dụng và cải thiện trải nghiệm người dùng nhờ giao diện hiện đại và tùy chỉnh cao. Trong dự án của nhóm, Clerk được sử dụng để đảm bảo quy trình xác thực an toàn, cho phép sinh viên truy cập các tính năng như họp trực tuyến, soạn thảo tài liệu và trao đổi trên diễn đàn một cách mượt mà và bảo mật.7 Tailwind CSS Hình 2.3 Framework Tailwind CSS Tailwind CSS là một framework CSS hiện đại, tập trung vào việc sử dụng các lớp tiện ích (utility classes) để thiết kế giao diện nhanh chóng và hiệu quả.

Với các lớp dựng sẵn, Tailwind CSS giúp giảm thiểu việc viết mã CSS thủ công, đồng thời hỗ trợ tùy chỉnh linh hoạt thông qua file cấu hình. Framework này đặc biệt phù hợp với các ứng dụng cần giao 19 diện thống nhất và dễ bảo trì. Trong dự án, Tailwind CSS được sử dụng để xây dựng giao diện người dùng hiện đại, trực quan và đáp ứng tốt trên nhiều thiết bị.4 Công cụ cộng tác trực tuyến GetStream GetStream là một nền tảng mạnh mẽ cung cấp API và SDK để xây dựng các tính năng thời gian thực như gọi video, nhắn tin, và cộng tác trực tuyến. Được thiết kế với hiệu suất cao và khả năng mở rộng, GetStream hỗ trợ triển khai nhanh các ứng dụng tương tác như họp trực tuyến, phù hợp cho cả quy mô nhỏ lẫn lớn.

Trong dự án, GetStream được sử dụng để tích hợp tính năng họp và gọi video, đảm bảo chất lượng ổn định, giúp sinh viên dễ dàng trao đổi và làm việc nhóm trực tuyến hiệu quả.5 Liveblocks – soạn thảo văn bản thời gian thực Liveblocks là một công cụ mạnh mẽ giúp xây dựng các ứng dụng thời gian thực, đặc biệt là trong việc đồng bộ dữ liệu giữa nhiều người dùng. Với Liveblocks, người phát triển có thể dễ dàng triển khai các tính năng như soạn thảo văn bản thời gian thực, chia sẻ bảng trắng, và cộng tác trên các tài liệu mà không cần phải lo lắng về việc quản lý trạng thái và đồng bộ hóa dữ liệu. Công cụ này hỗ trợ tích hợp dễ dàng với các ứng dụng web hiện đại và giúp tối ưu hóa hiệu suất trong các tình huống có nhiều người dùng tương tác cùng 20 lúc. Trong dự án của nhóm, Liveblocks được sử dụng để cung cấp khả năng soạn thảo văn bản và cập nhật dữ liệu theo thời gian thực, giúp sinh viên dễ dàng làm việc nhóm và trao đổi thông tin ngay lập tức.10 Shadcn/ui Hình 2.6 Shadcn – thư viện UI React dựa trên Tailwind CSS ShadCN-UI là một bộ công cụ giao diện người dùng (UI) được thiết kế để giúp phát triển ứng dụng web với các thành phần giao diện đẹp mắt và dễ sử dụng.

Bộ công cụ này cung cấp các component UI hiện đại, dễ tùy chỉnh, giúp tăng tốc quá trình thiết kế và phát triển giao diện.