Đề tài xây dựng hệ thống chia sẻ kiến thức cho sinh viên

Hiển thị tính năng quản lý tài khoản nếu tài khoản là của Actor đang sử dụng và Actor là Authenticated User hoặc kế thừa Authenticated User UC4: Đăng xuất Mô tả Đăng xuất tài khoản mà Ac

Trang 1

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO ĐỒ ÁN 1

ĐỀ 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

Trang 2

NHẬN XÉT (của giảng viên hướng dẫn)

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

……….

………

Trang 3

đỡ của thầy mà em có thể hoàn thành được đồ án một cách tốt nhất.

Vì kiến thức của em vẫn còn hạn hẹp nên không thể tránh khỏi những thiếu sót trong quá trình thực hiện đồ án Tuy nhiên, em đã cố gắng hoàn thành đúng hạn và hạnchế lỗi nhất có thể Em mong sẽ nhận được những ý kiến đóng góp quý báu từ thầy cô

và qua đó có thể rút kinh nghiệm và sửa chữa, hoàn thiện bản thân mình trên tinh thần nghiêm túc, tự giác học hỏi

Trang 4

MỤC LỤC

BÁO CÁO ĐỒ ÁN 1 1

NHẬN XÉT (của giảng viên hướng dẫn) 2

LỜI CẢM ƠN 3

Chương 1: Tổng quan 6

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

1.2 Mục tiêu đề tài 6

1.2.1 Lý thuyết: 6

1.2.2 Thực hành: 6

Chương 2: Cơ sở lý thuyết 7

2.1 Svelte 7

2.1.1 Giới thiệu: 7

2.1.2 Svelte là một compiler: 7

2.1.3 Svelte có cú pháp dễ đơn giản: 9

2.1.4 Ưu – nhược điểm: 9

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 và 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ý cơ sở dữ liệu: 18

2.4.4 Truy xuất dữ liệu dễ dàng với supabase-js: 18

Chương 3: Phân tích, thiết kế cơ sở dữ liệu 18

3.1 ERD (Entity Relationship Diagram): 18

3.2 Chi tiết các bảng: 19

3.2.1 profiles: 19

Trang 5

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ế và hiện thực hóa giao diện 33

Chương 5: Tổng kết 33

Tài liệu tham khảo 34

Trang 6

Chương 1: Tổng quan

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

Ờ thời đại ngày nay, internet đang năm giữ vai trò cực kì quan trọng, cốt yếu cho sự phát triển của 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ở ra cánh cửa cho phép ta có thể đạt được những điều nói trên một cách dễ dàng và hiệu quả

Trong đó không thể không kể đến việc chia sẻ và tiếp thu kiến thức, ta có nhữngtrang web hỏi đáp về lập trình như stackoverflow, trang chia sẻ tài liệu học tập như cuuduongthancong, hay cả những group facebook thuộc nhiều thể loại khác nhau phục

vụ cho việc hỏi đáp, tìm nhóm cho từng loại yêu cầu của người dùng Nhưng vẫn chưa

có một trang web nào thống nhất cả ba việc hỏi đáp, chia sẻ kiến thức và tìm nhóm họctập lại với nhau

Việc tạo nên một nền tảng mà sinh viên có thể thỏa mãn cả 3 nhu cầu này chính

là lí do mà em chọn để tài này, nhằm cố gắng xây dựng một trang web làm được những điều trên và đồng thời học được cách hoạt động và tổ chức dữ liệu của một trang hỏi đáp

1.2 Mục tiêu đề tài

1.2.1 Lý thuyết:

- Nghiên cứu về frontend component framework Svelte

- Nghiên cứu về backend framework SvelteKit

- Nghiên cứu về CSS framework Tailwind CSS

- Nghiên cứu về nền tảng backend Supabase

- Cách thức xây dựng và 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 và thân thiện người dùng làm chủ đạo

Trang 7

- Các tính năng quan trọng như đăng nhập/đăng ký, thêm/sửa/xóa bài viết, đánh giá bài viết thông qua bình luận, đánh sao, lưu bài viết.

- Các tính năng khác như trang cá nhân, sắp xếp/lọc bài viết, thông tin bài viết như ngày đăng, chủ bài viết, số lượt xem, …

Chương 2: Cơ sở lý thuyết

và bind các biến đó vào trong template nhìn giống HTML cũng cung cấp cách để handle event, cung cấp các hàm life-cycle, …

Nhưng điều đặc biết khiến Svelte khác so với các component framework khác

là ngoài syntax cực kỳ đơn giản và dễ đọc-hiểu, Svelte là một compiler Điều này có nghĩa là Svelte sẽ biên dịch các cú pháp đặc thù mà ta viết từ Svelte sang HTML, JS, CSS thuần tại thời điểm build, giúp tăng hiệu suất nhờ giảm các bước xử lý từ phía client

2.1.2 Svelte là một compiler:

Đối với component framework như React hay VueJs, code chương trình cùng với runtime-library của framework đó sẽ được đưa cho trình duyệt, những thay đổi về

UI từ code chương trình sẽ được lưu vào virtual DOM và runtime sẽ thực thi thay đổi

đó lên DOM trên trình duyệt (browser DOM hay real DOM), điều này làm cho chương

Trang 8

trình chạy trên trình duyệt cực kì mềm dẻo, ta có thể tải thêm code chương trình và chuyển 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à nào cả

Hình 2 Virtual DOM và browser DOM

Nhưng nhược điểm của phương pháp này là phần lớn code xử lý UI này nằm bên phía client (phía người dùng) Điều này có ảnh hưởng xấu đến chất lượng trải nghiệm người dùng nếu trang web có nhiều tính năng phức tạp, giao diện cần xử lý và render liên tục dẫn đến runtime overhead cao

Đây là lí do mà Svelte là một component framwork phù hợp để giải quyết vấn

đề này Svelte giải quyết vấn đề này theo một cách tiếp cận khác, thay vì phải tối ưu hóa runtime-library để giảm thiểu runtime overhead nhất có thể khi chạy ứng dụng trên trình duyệt, Svelte chuyển công việc tính toán trên trình duyệt đó sang giai đoạn compile, nghĩa là công việc này chỉ thực hiện một lần duy nhất, compile code chương trình sang mã Javascript

Việc compile chương trình đem lại nhiều hệ quả lợi thế: code của chương trình sau khi build không chỉ có dung lượng nhỏ hơn trước mà còn được tối ưu hóa, giúp chương trình chạy hiệu quả hơn

Trang 9

Điều này làm giảm tính mềm dẻo của chương trình so với React hay VueJS do cần phải compile trước khi chạy, nhưng điều thú vị là Svelte vẫn cho phép thực hiện những thao tác yêu cầu tính mềm dẻo như lazy-loading compoent, chỉ là Svelte sẽ phảicung 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 sẽ không thêm code thư viện không cần thiết vào chương trình đầu

ra Hệ quả là code chương trình luôn được tối ưu hóa và có độ lớn nhỏ nhất có thể

2.1.3 Svelte có cú pháp dễ đơn giản:

Vì là một compiler, Svelte có thể mở rộng HTML, CSS và JavaScript mà khôngcần phải tuân theo cú pháp của ngôn ngữ lập trình Javascript Điều này cho phép cú pháp của Svelte trở nên ngắn gọn và dễ hiểu hơn Mặc dù vậy, cú pháp của Svelte hầu hết đều tuân theo cú pháp của JavaScript, điều này giúp người lặp trình không gặp khó khăn trong quá trình học ngôn ngữ này

Cú pháp Svelte kết hợp và mở rộng HTML, CSS và JavaScript:

- Mở rộng HTML bằng cách cho phép nhúng code javascript vào markup HTML, cung cấp các directive để thực hiện câu điều kiện, vòng lặp vào HTML

- Mở rộng CSS bằng cách thêm kỹ thuật scoping, cho phép CSS định nghĩa trong component này không ảnh hưởng đến CSS trong component khác

- Mở rộng JavaScript bằng cách thêm các directive để đạt được tính reactivity

và quản lý state dễ dàng hơn

2.1.4 Ưu – nhược điểm:

Svelte có khá nhiều ưu điểm:

- Có các tính năng hiện đại mà lập trình viên web thường dùng giống với các component framework khác như React, VueJs

- Việc mở rộng cả ba ngôn ngữ HTML, CSS và JavaScript tạo nên tính

cohesive cao, không chia thành nhiều file khác nhau do chúng cùng thực hiện chung một mục đích

- Chương trình viết bằng Svelte sẽ được tối ưu hóa và sẽ có dung lượng file nhỏ hơn so với source code, điều này giúp cho trang web code bằng Svelte

Trang 10

tải về trình duyệt được nhanh hơn, do không chứa các runtime library khôngcần thiết.

- Cú pháp đơn giản, điều này giúp code dễ đọc và dễ hiểu, giảm thiểu dòng code viết để xử lý logic, dẫn đến code dễ bảo trì và ít bị bug hơn

Một số nhược điểm của Svelte:

- Do không sử dụng một runtime lớn dùng để biên dịch code, tính mềm dẻo của chương trình sẽ không được cao như React hay VueJS, điều này có thể khắc phục bằng cách sử dụng các cú pháp đặc biệt của Svelte nhưng mặc định chương trình viết bằng Svelte sau khi compile sẽ hoạt động như một chương trình viết bằng JavaScript bình thường và chỉ chứa code thư viện nào cần thiết của Svelte

- Svelte vẫn còn trong giai đoạn phát triển và chưa có được một cộng đồng lớn như React, dẫn đến việc khi gặp khó khăn sẽ khó tìm kiếm giải pháp ở các trang như stackoverflow

- Vẫn chưa có một “hệ sinh thái” dồi giàu: số lượng thư viện, tooling vẫn còn

ít, coding convention vẫn còn chưa được thống nhất cho ngôn ngữ Svelte

Trang 11

- Xây dựng một ứng dụng hoàn toàn client-rendered như Progressive Web Application

- Ta có thể kết hợp cả hai loại trên bằng cách chọn trang nào cần server-side rendering, trang nào là client-side rendering

- Cho phép lưu trữ và truy cập các secret thông qua các enviroment variable

- Sử dụng node để viết code backend

- Cung cấp các thư viện dùng để đơn giản hóa việc viết code backend và lấy

dữ liệu, giao tiếp giữa backend và frontend

2.2.2 Cấu trúc project rõ ràng:

SvelteKit yêu cầu một cấu trúc project rõ ràng, bắt lập trình viên phải tuân thủ theo cấu trúc project này, điều này có thể được xem là một điểm yếu do không cho phép lập trình viên được code theo ý muốn nhưng lợi thế của yêu cầu này nhiều hơn điểm yếu:

- Phân biệt được đâu là code backend, đâu là frontend do file đều được đặt têntheo cấu trúc được đề ra

- Lập trình viên luôn chắc chắn các thư mục tạo ra có ý nghĩa gì, lập trình viên mới vào project sẽ học nhanh source code hơn do các lập trình viên đềutuân thủ theo cấu trúc mà SvelteKit đề ra

Trang 12

Hình 4 Cấu trúc thông thường của project SvelteKit

Các thư mục trong hình trên có ý nghĩa như sau:

- src: nơi chứa source code của chương trình.

- src/lib: nơi chứa các file thư viện lập trình viên viết ra.

- src/lib/server: nơi chứa các file thư viện lập trình viên viết ra nhưng chỉ

dùng cho code server

- src/params: chứa các file “matcher” dùng để kiểm tra tính đúng đắng của

route parameter

- src/routes: đây là nơi chứa các file code Svetle và JavaScript dành cho từng

trang của trang web, mỗi trang sẽ nằm trong một thư mục riêng

- static: nơi chứa các file mà ta muốn giữ nguyên, không phải qua tiền xử lý

như file ảnh, icon, font…

- test: nơi chứa các test case để kiểm thử chương trình.

Ưu điểm:

Trang 13

- Có thể viết trang web hoàn chỉnh sử dụng SvelteKit mà không cần sử dụng một thư viện nào khác do SvelteKit đã tích hợp đầy đủ các tính năng cần thiết.

- Do là backend framework, ta có thể dùng SvelteKit không để viết trang web

mà có thể sử dụng để viết thư viện hay API

Nó khác với CSS framework như Bootstrap, chứa các class với thiết kế sẵn có,

ta cần phải ghi đè CSS nếu thiết kế sẵn có đó không giống với ý muốn

Cách tiếp cận này cho phép ta xây UI mà không cần hoặc động rất ít đến file CSS, ta chỉ cần sử dụng các utility class cung cấp bới Tailwind CSS

Điều này có một nhược điểm là do phải kết hợp nhiều class khác nhau, nó khiếncho thẻ HTML trở nên dài dòng và khó đọc Điều này mặc dù có phần đúng nhưng đốivới bản thân em, sau khi đã hiểu cú pháp sử dụng CSS framework này thì việc đọ classHTML trở nên rất dễ đọc hơn là giấu hết mọi thứ trong một class duy nhất, ta có thể hình dung được giao diện sẽ nhìn như thế nào chỉ qua việc đọc các utility class

2.3.2 Pseudo-class ở dạng class:

Các utility class trong Tailwind CSS đều có thể được áp dụng ở trạng thái nào

đó mà ta muốn, ví dụ nếu ta muốn chữ có màu đỏ khi được hover, ta chỉ cần cho thẻ

đó class là “hover:text-red” Các pseudo-class cũng có trong Tailwind CSS như focus,

Trang 14

focus-within, group-hover, active, disabled, …

Ta còn có thể gắn vào utility class tiền tố “dark:” để áp dụng class đó ở dạng dark mode

Ngoài ra tính năng này còn giúp cho quá trình code development trở nên nhanh gọn hơn do mọi thứ được chạy ngay mỗi khi có thay đổi, ta không cần phải tự tay chạylệnh build CSS

2.3.4 Responsive design dễ dàng:

Các utility class trong Tailwind CSS đều có thể được áp dụng ở các breakpoint khác nhau bằng cách thêm ký hiệu break point trước utility class, điều này giúp ta xây dựng UI responsive 1 cách dễ dàng mà không cần phải động đến file CSS Mặc định

có 5 breakpoint: sm, md, lg, xl, 2xl tương ứng với từng độ lớn khác nhau

Hình 5 Các breakpoint mặc định trong Tailwind CSS

Tất nhiên, ta có thể thêm các breakpoint khác mà ta muốn và có thể áp dụng breakpoint tự tạo đó cho các utility class giống như breakpoint mặc định

Trang 15

Hình 6 Ví dụ về cách sử dụng breakpoint trong Tailiwnd CSS

2.3.5 Mở rộng và thay đổi:

Ta có thể thêm, bớt hoặc thêm các class trong Tailwind CSS, thậm chí ta có thể sửa class sẵn có bằng cách chỉnh sửa file “tailwind.config.js”

Trang 16

Hình 7 Minh họa chỉnh sửa file config Tailwind CSS

Ưu điểm:

- Xây dựng UI rất tiện do ta không cần phải viết CSS, chỉ cần sử dụng các class có sẵn trong Tailwind CSS, giúp đẩy nhanh tiến độ xây dựng ứng dụng

- Không phải lo về tính compatibility của class so với các browser khác nhau

Nhược điểm:

- Cách sử dụng Tailwind CSS không tuân theo “best practice” khi viết class CSS, dẫn đến nhiều lập trình viên không đồng tình với cách Tailwind CSS được thiết kế

- Việc phải gán quá nhiều class khác nhau để thiết kế một UI nào đó làm cho thẻ nhìn dài dòng, việc đây là lợi thế hay điểm yếu là điều còn nhiều bàn cãi

- Không phù hợp cho project không sử dụng component framework, do sẽ phải lặp đi lặp lại hàng loạt tên class cho những thẻ có UI giống nhau

2.4 Supabase:

2.4.1 Giới thiệu:

Trang 17

Hình 8 Logo Supabase

Supabase là một nền tảng backend mã nguồn mở, được cho là lựa chọn thay thếcho Firebase Supabase chứa nhiều tính năng backend cần thiết để xây dựng ứng dụng.Đặc biệt Supabase sử dụng PostgreSQL, cơ sở dữ liệu quan hệ để lưu trữ dữ liệu, cho phép người dùng trực tiếp truy cập đến hệ thống cơ sở dữ liệu, mở ra nhiều cơ hội để xây dựng một cơ sở dữ liệu phức tạp phù hợp với từng yêu cầu của từng loại ứng dụng

2.4.2 Kiến trúc:

Hình 9 Kiến trúc của Supabase

Supabase có kiến trúc đa dạng với nhiều nhiệm vụ khác nhau:

- GoTrue (Auth): quản lý và xác thực người dùng sử dụng access token, dựa trên đây mà Supabase cho phép đăng nhập bằng các tài khoản bên thứ ba như google, github, … hoặc nội bộ trong supabase

- PostgRest (API): chuyển CSDL của người dùng sang dạng RESTful API để

Trang 18

có thể truy xuất từ phía client.

- Realtime (API & multiplayer): websocket engine dùng để quản lý các tính năng realtime như stream những thay đổi của CSDL

- Storage API (large file storage): dùng để chứa các file dung lượng lớn ví dụ như ảnh, video, …

- postgres-meta (Database management): RESTful API để quản lý trực tiếp Postgres

- Deno (Edge Functions): cho phép người dùng xây dựng các hàm được phân

bố ra khắp thế giới nhằm giảm latency, được xây dựng sử dụng Deno

- Kong (API Gateway): cloud-native API gateway, xây dựng chồng lên Nginx

Trong đó, PostgreSQL là phần lõi của cả một project trong Supabase, và API Gateway mà người dùng tương tác được xây dựng sử dụng Kong

2.4.3 Toàn quyền quản lý cơ sở dữ liệu:

Supabase không trừu tượng CSDL, mà cho phép người dùng toàn quyền quản

lý nó, nghĩa là ta hoàn toàn tự định nghĩa các bảng mà ta cần, các constraint cho bảng, các trigger hay mọi tính năng mà PostgreSQL cung cấp Điều này mở ra nhiều cơ hội

để xây dựng hệ thống CSDL theo yêu cầu của từng loại ứng dụng mà ta mong muốn

2.4.4 Truy xuất dữ liệu dễ dàng với supabase-js:

Ngoài cung cấp một nền tảng backend hoàn chỉnh, Supabase còn cung cấp một thư viện JavaScript cho phép ta truy xuất dữ liệu hay sử dụng các tính năng của

Supabase từ chính trang web mà ta xây dựng Việc truy xuất dữ liệu được thực hiện thông qua các hàm được xây dựng sẵn, khiến việc truy xuất được thực hiện dễ dàng, không yêu cầu ta phải viết câu lệnh theo cú pháp của PostgreSQL

Chương 3: Đặc tả yêu cầu

Trang web là nền tảng cung cấp cho ba nhu cầu: hỏi đáp, chia sẻ và tìm nhóm

Vì vậy, trang web sẽ có tên là WeShare, tên mang ý nghĩa cộng đồng và là nơi chia sẻ kiến thức, giúp đỡ lẫn nhau

Trang 19

3.1 Sơ đồ Use Case

Hình 10 Sơ đồ Use Case

3.2 Người dùng

UC1: Đăng nhập

Mô tả Cho phép người dùng đăng nhập vào trang web

Tác nhân (Actors) User

Sự kiện kích hoạt Được dẫn đến trang đăng nhập

Trang 20

Điều kiện tiên quyết

(Preconditions)

Tài khoản của User đã được tạo trước đó

Điều kiện có sau

(Postconditions)

User được đăng nhập vào hệ thống (trở thành Authenticated User)

sử dụng tài khoản được nhập

Luồng chính

(Basic Flow)

1 User truy cập trang đăng nhập

2 Actor Nhập thông tin đăng nhập

3 Hệ thống xác thực đăng nhập thành công

4 User được đăng nhập vào trang web

5 User được dẫn đến trang trước khi đăng nhập trước đó của trang web nếu có

Mô tả Cho phép người dùng tạo tài khoản để đăng nhập vào trang web

Tác nhân (Actors) User

Sự kiện kích hoạt

(Trigger)

Bấm vào đường dẫn đến trang đăng ký

(Preconditions)

Trang 21

 Tài khoản User nhập vào được tạo

 User được đăng nhập vào hệ thống (trở thành Authenticated User) sử dụng tài khoản được tạo đó

Luồng chính

(Basic Flow)

1 User truy cập trang đăng ký

2 Actor Nhập thông tin đăng ký

3 Hệ thống xác thực đăng ký thành công

4 User được đăng nhập vào trang web

5 User được dẫn đến trang trước khi đăng nhập trước đó của trang web nếu có

3a1 Hiện thông báo lỗi cho

UC3: Thông tin cá nhân

Mô tả Hiển thị thông tin cá nhân của tài khoản

Tác nhân (Actors) User hoặc Actor kế thừa User

Tồn tại tài khoản có username cần xem trang cá nhân

 Hiển thị thông tin cá nhân của tài khoản

 Hiển thị các tính năng quản lý tài khoản nếu tài khoản là của Actor đang sử dụng và Actor là Authenticated User hoặc kế

Trang 22

thừa Authenticated User

Luồng chính

(Basic Flow)

1 Actor truy cập trang thông tin cá nhân của một tài khoản nào đó

2 Hiển thị thông tin tài khoản

3 Hiển thị tính năng quản lý tài khoản nếu tài khoản là của Actor đang sử dụng và Actor là Authenticated User hoặc kế thừa Authenticated User

UC4: Đăng xuất

Mô tả Đăng xuất tài khoản mà Actor đang sử dụng

Tác nhân (Actors) Authenticated User hoặc Actor kế thừa Authenticated User

(Trigger)

Bấm vào nút có chức năng đăng xuất

(Preconditions)

 Tài khoản được đăng xuất, Actor trở thành User

 Actor được dẫn đến trang chủ

Luồng chính

(Basic Flow)

1 Actor bấm đăng xuất

2 Hệ thống đăng xuất Actor thành công

3 Actor được dẫn đến trang chủ

Luồng thay thế

(Alternative Flow)

Luồng ngoại lệ

Trang 23

(Exception Flow)

3.3 Bài viết

UC1: Xem danh sách bài viết

Tên Xem danh sách bài viết

Mô tả Hiển thị danh sách thông tin tổng quan các bài viết

UC2: Xem chi tiết bài viết

Tên Xem chi tiết bài viết

Mô tả Hiển thị thông tin bài viết chi tiết như tiêu đề, nội dung, ngày viết,

các chủ đề, …

Sự kiện kích hoạt Bấm vào bài viết muốn xem

Trang 24

 Hiển thị thông tin chi tiết bài viết

 Hiển thị các tính năng quản lý bài viết này nếu chủ bài viết này

là Actor và Actor là Authenticated User hoặc kế thừa Authenticated User

Luồng chính

(Basic Flow)

1 Actor truy cập vào bài viết muốn xem chi tiết

2 Hiển thị bài viết chi tiết

3 Hiển thị tính năng bình luận nếu đã đăng nhập

UC3: Tạo bài viết

Mô tả Cho phép tạo bài viết

(Trigger)

Bấm vào nút dẫn đến trang tạo bài viết

(Preconditions)

 Bài viết được tạo theo dữ liệu được nhập từ Actor

 Actor được dẫn đến trang chi tiết bài viết được tạo

Luồng chính 1 Actor truy cập đến trang tạo bài viết

Trang 25

(Basic Flow) 2 Actor Nhập thông tin bài viết

3 Hệ thống tạo bài viết thành công

4 Actor được dẫn đến trang chi tiết bài viết được tạo

3a1 Hiện thông báo lỗi

UC4: Sửa bài viết

Mô tả Cho phép sửa thông tin bài viết như tiêu đề, nội dung, …

(Trigger)

Bấm vào nút có tính năng dẫn Actor đến trang chỉnh sửa bài viết

(Preconditions)

 Tồn tại bài viết cần chỉnh sửa

 Actor phải là chủ của bài viết

 Bài viết được chỉnh sửa theo dữ liệu được nhập từ Actor

 Actor được dẫn đến trang chi tiết bài viết được chỉnh sửa

Luồng chính

(Basic Flow)

1 Actor truy cập đến trang sửa bài viết

2 Actor Nhập thông tin bài viết

3 Hệ thống sửa bài viết thành công

4 Actor được dẫn đến trang chi tiết bài viết được sửa

Trang 26

UC5: Xóa bài viết

Mô tả Cho phép xóa bài viết và toàn bộ bình luận của bài viết và các lượt

sao

(Trigger)

Bấm vào nút có tính năng xóa bài viết

(Preconditions)

 Tồn tại bài viết cần xóa

 Actor phải là chủ của bài viết

 Bài viết được xóa

 Actor được dẫn đến trang danh sách bài viết tương ứng với loại bài viết đó

Luồng chính

(Basic Flow)

1 Actor bấm nút xóa bài viết

2 Hiển thị thông báo yêu cầu Actor xác thực lại yêu cầu

3 Actor chọn xóa bài viết

4 Hệ thống xóa bài viết thành công

5 Actor được dẫn đến trang danh sách bài viết của loại bài viết được xóa

UC5: Sao bài viết

Trang 27

Mô tả Cho phép sao bài viết

(Trigger)

Bấm vào nút có tính năng sao bài viết

(Preconditions)

 Tồn tại bài viết cần sao

 Bài viết phải thuộc loại bài viết cho phép sao (VD: câu hỏi, bài viết chia sẻ)

 Bài viết chưa được sao bởi tài khoản Actor đang sử dụng

 Bài viết được sao bởi tài khoản Actor đang sử dụng

 Hiển thị thay đổi về số lượng sao và trạng thái sao của bài viết đó

Luồng chính

(Basic Flow)

1 Actor bấm sao bài viết

2 Hệ thống sao bài viết thành công

3 Hiển thị thay đổi về số lượng sao và trạng thái sao của bài viết đó

UC6: Bỏ sao bài viết

Mô tả Cho phép bỏ sao bài viết

(Trigger)

Bấm vào nút có tính năng bỏ sao bài viết

Điều kiện tiên quyết  Tồn tại bài viết cần bỏ sao

Trang 28

 Bài viết phải thuộc loại bài viết cho phép bỏ sao (VD: câu hỏi, bài viết chia sẻ)

 Bài viết đã được sao bởi tài khoản Actor đang sử dụng

 Bỏ sao của bài viết được sao bởi tài khoản Actor đang sử dụng

 Hiển thị thay đổi về số lượng sao và trạng thái sao của bài viết đó

Luồng chính

(Basic Flow)

1 Actor bấm bỏ sao bài viết

2 Hệ thống bỏ sao bài viết thành công

3 Hiển thị thay đổi về số lượng sao và trạng thái sao của bài viết đó

UC7: Xem bình luận

Mô tả Cho phép xem danh sách bình luận của bài viết

(Trigger)

Được yêu cầu xem danh sách bình luận của bài viết

(Preconditions)

 Tồn tại bài viết cần xem bình luận

Điều kiện có sau  Bài viết được xóa

Trang 29

(Postconditions)  Actor được dẫn đến trang danh sách bài viết tương ứng với loại

bài viết đó

Luồng chính

(Basic Flow)

1 Actor truy cập trang chi tiết bài viết

2 Hiển thị danh sách bình luận của bài đó

UC8: Xem bình luận con của một bình luận top level nào đó

Tên Xem bình luận con của một bình luận top level nào đó

Mô tả Cho phép xem danh sách bình luận con của bình luận top level nào

đó của một bài viết

 Tồn tại bình luận cần xem bình luận con

 Bình luận cần xem là bình luận top level

Hiển thị danh sách các bỉnh luận con của bình luận top level đó

Luồng chính

(Basic Flow)

1 Actor bấm nút xem bình luận con

2 Hiển thị danh sách bình luận con của bình luận cần xem

Trang 30

UC9: Tạo bình luận

Mô tả Cho phép tạo bình luận của bài viết nào đó

(Trigger)

Bấm nút có tính năng tạo bình luận

(Preconditions)

 Tồn tại bài viết cần tạo bình luận

 Nội dung bình luận không được để trống

 Bình luận được tạo theo dữ liệu được nhập từ Actor

 Hiển thị bình luận được tạo

Luồng chính

(Basic Flow)

1 Actor nhập thông tin bình luận

2 Hệ thống tạo bình luận thành công

3 Hiển thị bình luận được tạo

UC10: Sửa bình luận

Mô tả Cho phép sửa bình luận của bài viết nào đó

(Trigger)

Bấm nút có tính năng sửa bình luận

(Preconditions)

 Tồn tại bình luận cần sửa

 Actor phải là chủ bình luận

Điều kiện có sau  Bình luận được chỉnh sửa theo dữ liệu được nhập từ Actor

Trang 31

(Postconditions)  Hiển thị bình luận đã qua chỉnh sửa

Luồng chính

(Basic Flow)

1 Actor bấm nút sửa bình luận

2 Actor nhập thông tin bình luận

3 Hệ thống sửa bình luận thành công

4 Cập nhật hiển thị của bình luận được sửa

UC11: Xóa bình luận

Mô tả Cho phép xóa bình luận của bài viết nào đó

(Trigger)

Bấm nút có tính năng xóa bình luận

(Preconditions)

 Tồn tại bình luận cần xóa

 Actor phải là chủ bình luận

 Bình luận được xóa theo dữ liệu được nhập từ Actor

 Không hiển thị bình luận vừa được xóa

Luồng chính

(Basic Flow)

1 Actor bấm nút xóa bình luận

2 Hiển thị thông báo yêu cầu Actor xác thực lại yêu cầu

3 Actor chọn xóa

4 Hệ thống xóa bình luận thành công

5 Xóa bình luận khỏi màn hình hiển thị

Trang 32

UC1: Sao bình luận

Mô tả Cho phép sao bình luận

(Trigger)

Bấm vào nút có tính năng sao bình luận

(Preconditions)

 Tồn tại bình luận cần sao

 Bình luận chưa được sao bởi tài khoản Actor đang sử dụng

 Bình luận được sao bởi tài khoản Actor đang sử dụng

 Hiển thị thay đổi về số lượng sao và trạng thái sao của bình luận đó

Luồng chính

(Basic Flow)

1 Actor bấm sao bình luận

2 Hệ thống sao bình luận thành công

3 Hiển thị thay đổi về số lượng sao và trạng thái sao của bình luận đó

UC2: Bỏ sao bình luận

Mô tả Cho phép bỏ sao bình luận

Trang 33

(Trigger)

Bấm vào nút có tính năng bỏ sao bình luận

(Preconditions)

 Tồn tại bình luận cần bỏ sao

 Bình luận đã được sao bởi tài khoản Actor đang sử dụng

 Bỏ sao bình luận được sao bởi tài khoản Actor đang sử dụng

 Hiển thị thay đổi về số lượng sao và trạng thái sao của bình luận đó

Luồng chính

(Basic Flow)

1 Actor bấm bỏ sao bình luận

2 Hệ thống bỏ sao bình luận thành công

3 Hiển thị thay đổi về số lượng sao và trạng thái sao của bình luận đó

Chương 4: Phân tích và thiết kế cơ sở dữ liệu

4.1 ERD (Entity Relationship Diagram)

CSDL của trang web được quản lý bởi Supabase, sử dụng PostgreSQL làm hệ quản trị CSDL Tất cả các bảng dùng để lưu trữ thông tin cho trang web đều được tạo trong schema “public”, các bảng dặc biệt do Supabase tạo sẽ được đặt trong schema khác Đây là ERD của trang web:

Trang 34

Hình 11 ERD của trang web WeShare

4.2 Chi tiết các bảng

Các bảng trong cơ sở dữ liệu đều được kích hoạt row level security và đều đượctạo các policy tương ứng cho việc select/insert/update/delete Điều này nhằm đảm bảo việc truy xuất dữ liệu chỉ áp dụng đúng với quyền hạn của tài khoản yêu cầu truy xuất

4.2.1 profiles:

Tiêu đề	Xây dựng hệ thống chia sẻ kiến thức cho sinh viên
Tác giả	Thái Chí Bảo
Người hướng dẫn	ThS. Nguyễn Tấn Toàn
Trường học	Trường Đại Học Công Nghệ Thông Tin
Chuyên ngành	Khoa Công Nghệ Phần Mềm
Thể loại	Báo cáo đồ án
Năm xuất bản	2022
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	65
Dung lượng	3,56 MB