Đề tài 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): 18 3.2 Chi tiết bảng: 19 3.2.1 profiles: .19 3.2.2 post_questions: 22 3.2.3 post_question_stars: 23 3.2.4 post_question_comments: .24 3.2.5 post_question_comment_stars: 25 3.2.6 post_sharings: 26 3.2.7 post_sharing_stars: 27 3.2.8 post_sharing_comments: 28 3.2.9 post_sharing_comment_stars: 29 3.2.10 post_sharing_bookmarks: 30 3.2.11 post_teams: .31 3.2.12 post_team_comments: 32 3.2.13 post_team_members: 32 Chương 4: Thiết kế thực hóa giao diện 33 Chương 5: Tổng kết 33 Tài liệu tham khảo .34 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 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 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 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 cịn ít, coding convention cịn 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 hồn chỉnh đạt chuẩn SEO thơng qua dynamic server-side rendering ... 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... 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... 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