Xây dựng hệ thống chia sẻ kiến thức cho sinh viên

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN ĐỀ TÀI: Xây dựng hệ thống chia sẻ kiến thức cho sinh viên Giảng viên hướng dẫn: ThS Nguyễn Tấn Toàn Sinh viên thực hiện: Thái Chí Bảo – 19521256 Tp Hồ Chí Minh, tháng 12 năm 2022 NHẬN XÉT (của giảng viên hướng dẫn) ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… LỜI CẢM ƠN Lời em xin chân thành gửi lời cảm ơn đến trường Đại học Công Nghệ Thông Tin tạo điều kiện cho em có mơi trường học tập thật tốt, xin cảm ơn tất thầy hết lòng quan tâm, dạy dỗ trang bị cho chúng em kiến cần thiết để chuẩn bị cho việc làm đồ án nghiệp tương lai Em xin chân thành cảm ơn thầy Nguyễn Tấn Toàn tận tình hướng dẫn giúp đỡ em trình tìm hiểu, triển khai thực đồ án Nhờ có giúp đỡ thầy mà em hồn thành đồ án cách tốt Vì kiến thức em cịn hạn hẹp nên khơng thể tránh khỏi thiếu sót trình thực đồ án Tuy nhiên, em cố gắng hoàn thành hạn hạn chế lỗi Em mong nhận ý kiến đóng góp q báu từ thầy qua rút kinh nghiệm sửa chữa, hồn thiện thân tinh thần nghiêm túc, tự giác học hỏi MỤC LỤC BÁO CÁO ĐỒ ÁN NHẬN XÉT (của giảng viên hướng dẫn) LỜI CẢM ƠN Chương 1: Tổng quan 1.1 Lý chọn đề tài 1.2 Mục tiêu đề tài 1.2.1 Lý thuyết: 1.2.2 Thực hành: Chương 2: Cơ sở lý thuyết 2.1 Svelte 2.1.1 Giới thiệu: 2.1.2 Svelte compiler: 2.1.3 Svelte có cú pháp dễ đơn giản: 2.1.4 Ưu – nhược điểm: 2.2 SvelteKit 10 2.2.1 Giới thiệu: 10 2.2.2 Cấu trúc project rõ ràng: 11 2.2.3 Ưu – nhược điểm: 12 2.3 Tailwind CSS 13 2.3.1 Giới thiệu: 13 2.3.2 Pseudo-class dạng class: 13 2.3.3 Just-in-Time Mode: 14 2.3.4 Responsive design dễ dàng: 14 2.3.5 Mở rộng thay đổi: 15 2.3.6 Ưu – nhược điểm: 16 2.4 Supabase: 16 2.4.1 Giới thiệu: 16 2.4.2 Kiến trúc: 17 2.4.3 Toàn quyền quản lý sở liệu: 18 2.4.4 Truy xuất liệu dễ dàng với supabase-js: 18 Chương 3: Phân tích, thiết kế sở liệu 18 3.1 ERD (Entity Relationship Diagram): 33 3.2 Chi tiết bảng: 34 3.2.1 profiles: 34 3.2.2 post_questions: 36 3.2.3 post_question_stars: 37 3.2.4 post_question_comments: 38 3.2.5 post_question_comment_stars: 40 3.2.6 post_sharings: 41 3.2.7 post_sharing_stars: 43 3.2.8 post_sharing_comments: 44 3.2.9 post_sharing_comment_stars: 46 3.2.10 post_sharing_bookmarks: 47 3.2.11 post_teams: 48 3.2.12 post_team_comments: 50 3.2.13 post_team_members: 52 Chương 4: Thiết kế thực hóa giao diện 53 Chương 5: Tổng kết 67 Tài liệu tham khảo 69 Chương 1: Tổng quan 1.1 Lý chọn đề tài Ờ thời đại ngày nay, internet năm giữ vai trị quan trọng, cốt yếu cho phát triển lồi người Từ liên lạc đến giải trí, từ chia sẻ đến tiếp thu kiến thức, internet mở cánh cửa cho phép ta đạt điều nói cách dễ dàng hiệu Trong khơng thể khơng kể đến việc chia sẻ tiếp thu kiến thức, ta có trang web hỏi đáp lập trình stackoverflow, trang chia sẻ tài liệu học tập cuuduongthancong, hay group facebook thuộc nhiều thể loại khác phục vụ cho việc hỏi đáp, tìm nhóm cho loại yêu cầu người dùng Nhưng chưa có trang web thống ba việc hỏi đáp, chia sẻ kiến thức tìm nhóm học tập lại với Việc tạo nên tảng mà sinh viên thỏa mãn nhu cầu lí mà em chọn để tài này, nhằm cố gắng xây dựng trang web làm điều đồng thời học cách hoạt động tổ chức liệu trang hỏi đáp 1.2 Mục tiêu đề tài 1.2.1 Lý thuyết: - Nghiên cứu frontend component framework Svelte - Nghiên cứu backend framework SvelteKit - Nghiên cứu CSS framework Tailwind CSS - Nghiên cứu tảng backend Supabase - Cách thức xây dựng kết hợp SvelteKit với Supabase để xây dựng trang web hoàn chỉnh 1.2.2 Thực hành: - Xây dựng giao diện cho trang web với responsive design thân thiện người dùng làm chủ đạo - Các tính quan trọng đăng nhập/đăng ký, thêm/sửa/xóa viết, đánh giá viết thơng qua bình luận, đánh sao, lưu viết - Các tính khác trang cá nhân, xếp/lọc viết, thông tin viết ngày đăng, chủ viết, số lượt xem, … Chương 2: Cơ sở lý thuyết 2.1 Svelte Hình Logo Svelte 2.1.1 Giới thiệu: Svelte frontend component framework mã nguồn mở phát triển Rich Harris nhằm xây dựng giao diện người dùng cách nhanh chóng dễ dàng Cũng giống React hay VueJs, Svelte cho phép tạo component, khai báo biến bind biến vào template nhìn giống HTML cung cấp cách để handle event, cung cấp hàm life-cycle, … Nhưng điều đặc biết khiến Svelte khác so với component framework khác syntax đơn giản dễ đọc-hiểu, Svelte compiler Điều có nghĩa Svelte biên dịch cú pháp đặc thù mà ta viết từ Svelte sang HTML, JS, CSS thời điểm build, giúp tăng hiệu suất nhờ giảm bước xử lý từ phía client 2.1.2 Svelte compiler: Đối với component framework React hay VueJs, code chương trình với runtime-library framework đưa cho trình duyệt, thay đổi UI từ code chương trình lưu vào virtual DOM runtime thực thi thay đổi lên DOM trình duyệt (browser DOM hay real DOM), điều làm cho chương trình chạy trình duyệt mềm dẻo, ta tải thêm code chương trình chuyển vào runtime để thực thi thay đổi mà khơng cần phải thông qua bước compile code rườm rà Hình Virtual DOM browser DOM Nhưng nhược điểm phương pháp phần lớn code xử lý UI nằm bên phía client (phía người dùng) Điều có ảnh hưởng xấu đến chất lượng trải nghiệm người dùng trang web có nhiều tính phức tạp, giao diện cần xử lý render liên tục dẫn đến runtime overhead cao Đây lí mà Svelte component framwork phù hợp để giải vấn đề Svelte giải vấn đề theo cách tiếp cận khác, thay phải tối ưu hóa runtime-library để giảm thiểu runtime overhead chạy ứng dụng trình duyệt, Svelte chuyển cơng việc tính tốn trình duyệt sang giai đoạn compile, nghĩa công việc thực lần nhất, compile code chương trình sang mã Javascript Việc compile chương trình đem lại nhiều hệ lợi thế: code chương trình sau build khơng có dung lượng nhỏ trước mà cịn tối ưu hóa, giúp chương trình chạy hiệu Điều làm giảm tính mềm dẻo chương trình so với React hay VueJS cần phải compile trước chạy, điều thú vị Svelte cho phép thực thao tác yêu cầu tính mềm dẻo lazy-loading compoent, Svelte phải cung cấp thêm code thư viện runtime vào chương trình đầu ra, lúc compile code chương trình Svelte không thêm code thư viện không cần thiết vào chương trình đầu Hệ code chương trình ln tối ưu hóa có độ lớn nhỏ 2.1.3 Svelte có cú pháp dễ đơn giản: Vì compiler, Svelte mở rộng HTML, CSS JavaScript mà không cần phải tuân theo cú pháp ngơn ngữ lập trình Javascript Điều cho phép cú pháp Svelte trở nên ngắn gọn dễ hiểu Mặc dù vậy, cú pháp Svelte hầu hết tuân theo cú pháp JavaScript, điều giúp người lặp trình khơng gặp khó khăn q trình học ngơn ngữ Cú pháp Svelte kết hợp mở rộng HTML, CSS JavaScript: - Mở rộng HTML cách cho phép nhúng code javascript vào markup HTML, cung cấp directive để thực câu điều kiện, vòng lặp vào HTML - Mở rộng CSS cách thêm kỹ thuật scoping, cho phép CSS định nghĩa component không ảnh hưởng đến CSS component khác - Mở rộng JavaScript cách thêm directive để đạt tính reactivity quản lý state dễ dàng 2.1.4 Ưu – nhược điểm: Svelte có nhiều ưu điểm: - Có tính đại mà lập trình viên web thường dùng giống với component framework khác React, VueJs - Việc mở rộng ba ngôn ngữ HTML, CSS JavaScript tạo nên tính cohesive cao, khơng chia thành nhiều file khác chúng thực chung mục đích - Chương trình viết Svelte tối ưu hóa có dung lượng file nhỏ so với source code, điều giúp cho trang web code Svelte tải trình duyệt nhanh hơn, không chứa runtime library không cần thiết - Cú pháp đơn giản, điều giúp code dễ đọc dễ hiểu, giảm thiểu dòng code viết để xử lý logic, dẫn đến code dễ bảo trì bị bug Một số nhược điểm Svelte: - Do không sử dụng runtime lớn dùng để biên dịch code, tính mềm dẻo chương trình khơng cao React hay VueJS, điều khắc phục cách sử dụng cú pháp đặc biệt Svelte mặc định chương trình viết Svelte sau compile hoạt động chương trình viết JavaScript bình thường chứa code thư viện cần thiết Svelte - Svelte giai đoạn phát triển chưa có cộng đồng lớn React, dẫn đến việc gặp khó khăn khó tìm kiếm giải pháp trang stackoverflow - Vẫn chưa có “hệ sinh thái” dồi giàu: số lượng thư viện, tooling ít, coding convention chưa thống cho ngơn ngữ Svelte 2.2 SvelteKit Hình Logo SvelteKit 2.2.1 Giới thiệu: SvelteKit xây dựng chồng lên Svelte Sveltekit cung cấp thêm tính backend sau: - Xây dựng trang web hoàn chỉnh đạt chuẩn SEO thơng qua dynamic server-side rendering Hình 27 Trang đăng nhập – Desktop Hình 28 Trang đăng nhập – Mobile 5.2.2 Trang đăng ký Hình 29 Trang đăng ký – Thiết kế Hình 30 Trang đăng ký - Desktop 5.2.3 Trang chủ Hình 31 Trang chủ - Thiết kế Hình 32 Trang chủ - Desktop Hình 33 Trang chủ - Mobile 5.2.4 Trang hỏi đáp Hình 34 Trang hỏi đáp - Thiết kế 5.2.5 Trang chia sẻ Hình 35 Trang chia sẻ - Thiết kế 5.2.6 Trang tìm nhóm Hình 36 Trang tìm nhóm - Thiết kế 5.2.7 Trang chi tiết câu hỏi Hình 37 Trang chi tiết câu hỏi - Thiết kế 5.2.8 Trang chi tiết viết chia sẻ Hình 38 Trang chi tiết viết chia sẻ - Thiết kế 5.2.9 Trang chi tiết viết tìm nhóm Hình 39 Trang chi iết viết tìm nhóm - Thiết kế 5.2.10 Trang cá nhân Hình 40 Trang cá nhân - Thiết kế Chương 6: Tổng kết 6.1 Kết đạt Thơng qua q trình làm việc nghiên cứu Em hoàn thành hầu hết tính đề Tuy nhiên, nhiều chức mà em muốn cải thiện tính mẻ cần thêm vào để ứng dụng trở nên hoàn thiện thân thiện với người dùng Đặc biệt phần code cách thức tổ chức code nhiều điểm xấu khơng quy trình phải đẩy nhanh tiến dộ Source code ứng dung: https://github.com/comaybay/we-share Trang web demo ứng dụng: https://we-share.pages.dev/ 6.2 Hướng phát triển Đề tài nhiều điểm cần thêm mở rộng, sau số tính cần hồn thiện/thêm: - Tính summary: sử dụng AI để rút ngắn viết chia sẻ cho người có thời gian, cần đọc nhanh - Thực role moderator: kiểm duyệt viết người dùng Thêm role đặc biệt người dùng tích cực, người dùng uy tín, … - Tìm kiếm theo viết theo nội dung, tiêu đề, tên người dùng, … - Cải thiện tính lọc, xếp Tài liệu tham khảo Viblo - Svelte - Tổng quan cách xây dựng web app Svelte: https://viblo.asia/p/svelte-tong-quan-va-cach-xay-dung-mot-web-app-bangsvelte-m68Z0agdlkG MDN - Getting started with Svelte: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Clientside_JavaScript_frameworks/Svelte_getting_started Svelte - Cybernetically enhanced web apps: https://svelte.dev SvleteKit - Docs: https://kit.svelte.dev/docs Supabase - Docs: https://supabase.com/docs TailwindCSS – Tailwind CSS - Rapidly build modern websites without ever leaving your HTML: https://tailwindcss.com ... chưa có trang web thống ba việc hỏi đáp, chia sẻ kiến thức tìm nhóm học tập lại với Việc tạo nên tảng mà sinh viên thỏa mãn nhu cầu lí mà em chọn để tài này, nhằm cố gắng xây dựng trang web làm... cho phát triển loài người Từ liên lạc đến giải trí, từ chia sẻ đến tiếp thu kiến thức, internet mở cánh cửa cho phép ta đạt điều nói cách dễ dàng hiệu Trong khơng thể không kể đến việc chia sẻ. .. Nghiên cứu tảng backend Supabase - Cách thức xây dựng kết hợp SvelteKit với Supabase để xây dựng trang web hoàn chỉnh 1.2.2 Thực hành: - Xây dựng giao diện cho trang web với responsive design thân