Báo cáo Xây dựng ứng dụng học tập trực tuyến môn Đồ án tốt nghiệp | Trường Đại học Bách Khoa Hà Nội

ĐẠI HỌC BÁCH KHOA HÀ NỘI
Trường Công nghệ thông tin và Truyền thông
ĐỀ TÀI: Xây dựng ứng dụng học tập trực
tuyến thông qua flashcard
Học phần: Nghiên cứu tốt nghiệp 1
GVHD: ThS. Lê Đức Trung
SV thực hiện: Nguyễn Văn Phú An - 20214982
Hà Nội, tháng 6 năm 2024
I. Khả o sát bài toán .................................................................................................................... 3
1. Mụ c đích ............................................................................................................................. 3
2. Phả m vi ............................................................................................................................... 3
3. Từ điể n thuả t ngừ .............................................................................................................. 3
II. Đả c tả yêu cả u ....................................................................................................................... 3
III. Thiể t kể cơ sơ dừ liể u........................................................................................................... 4
1. Sơ đồ thừ c thể liên kể t ........................................................................................................ 4
2. Biể u diể n mô hình dừ liể u logic, quan hể giừ a các bả ng .................................................... 4
IV. Công nghể sừ dụ ng .............................................................................................................. 5
1. React ................................................................................................................................... 5
2. Next.js ................................................................................................................................. 5
3. Tailwind CSS ...................................................................................................................... 5 1.
PostgreSQL ..................................................................................................................... 5
V. Giao diể n mồ t sồ trang chính ................................................................................................ 6
VI. Kể t luả n và hừơ ng phát triể n ............................................................................................... 8
Phụ lụ c .................................................................................................................................. 10 I. Khảo sát bài toán 1. Mục đích
Tài liệu này mô tả chi tiết về đặc tả yêu cầu, quá trình thiết kế, xây dựng và kiểm
thử cho Ứng dụng học trực tuyến qua flashcard có tên là Spark. Tài liệu mô tả
mục đích và các tính năng của hệ thống, các giao diện, ràng buộc của hệ thống
cần thực hiện để phản ứng tới các kích thích bên ngoài, cũng như thiết kế chi tiết
về dữ liệu, mã nguồn của phần mềm. 2. Phạm vi
Ứng dụng Spark là ứng dụng học tập trực tuyến, người dùng có thể tạo tài khoản,
quản lý thông tin cá nhân, theo dõi tiến trình học tập và đặt ra mục tiêu học tập.
Người dùng có thể sử dụng những bộ flashcard của người dùng khác để học tập
hoặc tự tạo thẻ ghi nhớ cho các môn học, chủ đề hoặc nội dung khác nhau. Mỗi
thẻ ghi nhớ bao gồm mặt trước (thông tin cần ghi nhớ) và mặt sau (câu trả lời kèm
theo ví dụ hoặc giải thích).
3. Từ điển thuật ngữ Thuật ngữ Mô tả
Thẻ ghi nhớ (flashcard) Là công cụ học tập truyền thống bao gồm một thẻ có
thông tin cần ghi nhớ ở mặt trước và câu trả lời kèm
theo ví dụ hoặc giải thích ở mặt sau. Bộ thẻ (deck)
Là một bộ các thẻ ghi nhớ có cùng chủ đề. VD: bộ
thẻ từ vựng tiếng Nhật, bộ thẻ công thức hoá học các chất hữu cơ, v.v. II. Đặc tả yêu cầu
Ứng dụng có tác nhân chính là Người dùng. Một người dùng có thể đăng ký tài
khoản, đăng nhập, có thể cập nhật hồ sơ của mình, hoặc là đăng xuất.
Người dùng có thể xem một bộ thẻ do mình hoặc người dùng khác đã tạo. Người
dùng có thể tạo các bộ thẻ, thay đổi thông tin của bộ thẻ và xoá bộ thẻ của mình.
Ngoài ra, người tạo ra bộ thẻ có thể thêm, chỉnh sửa và xoá các thẻ ghi nhớ trong bộ thẻ đó.
III. Thiết kế cơ sở dữ liệu
1. Sơ đồ thực thể liên kết
2. Biểu diễn mô hình dữ liệu logic, quan hệ giữa các bảng
IV. Công nghệ sử dụng 1. React
React là một thư viện JavaScript để xây dựng giao diện người dùng. Nó được
Facebook tạo ra và duy trì, và nhanh chóng trở thành một trong những thư viện
JavaScript phổ biến nhất hiện nay. React cho phép người phát triển tạo ra các
thành phần UI có thể tái sử dụng và dễ dàng quản lý, giúp việc xây dựng các ứng
dụng web phức tạp trở nên đơn giản hơn. 2. Next.js
Next.js là một framework React giúp người phát triển tạo các ứng dụng web
Single Page Application (SPA) và các trang web tĩnh. Next.js cung cấp nhiều tính
năng hữu ích cho việc phát triển SPA, bao gồm định tuyến, xử lý dữ liệu phía máy
chủ và tối ưu hóa hiệu suất. Next.js cũng giúp đơn giản hóa việc triển khai ứng dụng web. 3. Tailwind CSS
Tailwind CSS là một framework CSS cung cấp các lớp CSS cấp thấp mà người
phát triển có thể sử dụng để tạo giao diện người dùng. Nó khác với các framework
CSS khác như Bootstrap ở chỗ nó không cung cấp các thành phần UI được xây
dựng sẵn, mà thay vào đó cho phép lập trình viên xây dựng giao diện người dùng
của riêng mình bằng cách sử dụng các lớp CSS. Tailwind CSS rất linh hoạt và có
thể tùy chỉnh, giúp bạn tạo ra các giao diện người dùng đẹp mắt và độc đáo. 4. PostgreSQL
PostgreSQL, hay còn gọi là Postgres, là một hệ quản trị cơ sở dữ liệu quan hệ
(RDBMS) mã nguồn mở mạnh mẽ và linh hoạt. PostgreSQL nổi bật với nhiều
tính năng tiên tiến, bao gồm ACID Compliance, hỗ trợ JSON và JSONB, indexing đa dạng.
V. Giao diện một số trang chính Hình 1: Trang chủ Hình 2: Đăng nhập
Hình 3: Danh sách các bộ thẻ ghi nhớ
Hình 4: Danh sách các bộ thẻ người dùng đã tạo
Hình 5: Chỉnh sửa một bộ thẻ
Hình 6: Tạo một bộ thẻ mới
VI. Kết luận và hướng phát triển
Ứng dụng hiện tại đã có thể chạy sơ bộ với các chức năng cơ bản như tạo tài
khoản, đăng nhập, đăng xuất, tạo các bộ thẻ ghi nhớ và chỉnh sửa các bộ thẻ cũng
như là các thẻ bài trong các bộ thẻ đó.
Trong quá trình phát triển ứng dụng, em đã chú trọng vào việc xây dựng một
giao diện người dùng thân thiện, dễ sử dụng và hiệu quả. Việc sử dụng kỹ thuật
server component của Next.js (các thành phần trên giao diện web sẽ được compile
ở trên server thay vì trình duyệt web) giúp cho trải nghiệm sử dụng ứng dụng
mượt mà hơn nhờ giảm đi thời gian compile các thành phần giao diện.
Ngoài ra em cũng đã chú ý đến khả năng mở rộng của ứng dụng, cho phép
tích hợp thêm tính năng mới và nâng cấp dễ dàng trong tương lai. Hướng phát
triển cho ứng dụng này có thể tập trung vào việc nâng cao khả năng tương tác và
tính tiện ích cho người dùng. Một trong những hướng tiêu biểu là tích hợp các
tính năng như làm bài kiểm tra trắc nghiệm và gợi ý các bộ thẻ khác dựa trên trình
độ của người dùng thông qua kết quả của các bài kiểm tra đó.
Đồng thời, trong tương lai ứng dụng có thể kết hợp trí tuệ nhân tạo (AI) và
học máy (Machine Learning) để giúp ứng dụng đưa ra gợi ý dựa trên xu hướng
lựa chọn và tạo bộ thẻ của người dùng, và tối ưu hóa trải nghiệm học cho từng người dùng cá nhân. Phụ lục
Link GitHub: notverygood135/spark-gr1 (github.com)
Link demo ứng dụng: Spark (spark-gr1.vercel.app)