đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên

Tác giả bài viết có thể xem danh sách cácyêu cầu giúp đỡ từ những người dùng khác.‒ Người dùng có thể gửi bình luận và trao đổi bên dưới chi tiết bài viết.‒ Người dùng có thể xem danh sá

Trang 1

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 2

XÂY DỰNG TRANG WEB HỎI ĐÁP CHO LẬP TRÌNH VIÊN

GV HƯỚNG DẪN:THS TRẦN THỊ HỒNG YẾN

SV THỰC HIỆN:

ĐỖ PHÚ QUANG – 20521800VÕ ĐÌNH NGHĨA – 20521659

TP HỒ CHÍ MINH, 2023

Trang 2

LỜI CẢM ƠN

Để hoàn thành đồ án “Xây dựng trang web hỏi đáp cho lập trình viên”, lời đầu tiênchúng em xin gửi lời cảm ơn chân thành đến cô Trần Thị Hồng Yến đã tận tình giúp đỡ,đưa ra những định hướng cũng như những lời khuyên quý báu cho quá trình phát triển đồán của chúng em Những bài học, kinh nghiệm được cô truyền dạy sẽ luôn là hành trangvững chắc cho quá trình học tập và làm việc của chúng em Bên cạnh đó, chúng em cũngkhông quên gửi lời cảm ơn đến toàn thể quý thầy cô đã và đang giảng dạy tại Trường Đạihọc Công nghệ thông tin đã giúp chúng em có được những nền tảng kiến thức vững chắcđể có thể tìm hiểu và hoàn thiện sản phẩm đã đề ra.

Trong quá trình phát triển đồ án, do còn thiếu kinh nghiệm thực tiễn trong việcxây dựng sản phẩm, những sai sót của nhóm là điều không thể tránh khỏi Chính vì vậy,chúng em rất sẵn lòng đón nhận những góp ý, đánh giá từ cô để có thể tạo ra một sảnphẩm hoàn thiện, chỉnh chu hơn.

Lời cuối, chúng em xin kính chúc cô luôn dồi dào sức khỏe, thành công trong sựnghiệp và cuộc sống!

TP.HCM, ngày 28 tháng 12 năm 2023Nhóm sinh viên thực hiệnĐỗ Phú Quang – Võ Đình Nghĩa

Trang 3

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: XÂY DỰNG TRANG WEB HỎI ĐÁP CHO LẬP TRÌNH VIÊNCán bộ hướng dẫn: ThS Trần Thị Hồng Yến

Thời gian thực hiện: Từ ngày 11/09/2023 đến ngày 30/12/2023Sinh viên thực hiện:

Đỗ Phú Quang - 20521800Võ Đình Nghĩa - 20521659Nội dung đề tài:

1 Giới thiệu

Hiện nay, số lượng nhân sự của ngành công nghệ thông tin đang gia tăng nhanhchóng, đi kèm với đó là nhu cầu phát sinh các diễn đàn hỏi đáp dành cho lập trình viên.Đa số các diễn đàn hiện tại trên thị trường hoạt động bằng cách cho phép người dùngthêm câu hỏi và các người dùng khác hỗ trợ bằng cách bình luận văn bản Tuy nhiên,cách tiếp cận này chỉ phù hợp với những vấn đề đơn giản Đối với những vấn đề phứctạp cần có sự tương tác mạnh mẽ hơn giữa người hướng dẫn và người cần giải đáp Hiểuđược điều đó, nhóm em quyết định lựa chọn đề tài “Xây dựng trang web hỏi đáp cho lậptrình viên” với những tính năng mở rộng giúp kết nối các lập trình viên và giải quyết vấnđề một cách hiệu quả hơn.

2 Mô tả chi tiết mục tiêu

‒ Hiểu về ReactJs, NextJs, Typescript, NodeJs, NestJs và cách áp dụng những

công nghệ này vào đồ án.

‒ Hiểu về State Management và cách sử dụng các thư viện như Redux Toolkit.‒ Xây dựng được trang web hỏi đáp với các tính năng như: Thêm chủ đề thảo

luận (Miễn phí), Bình luận trong chủ đề, Thêm phần thưởng cho người giảiđáp, Kết nối người giải đáp với người cần hỗ trợ thông qua video call.

3 Phạm vi

 Phạm vi môi trường

‒ Triển khai sản phẩm trên môi trường web.

 Phạm vi chức năng

Trang 4

 Người cần hướng dẫn đăng câu hỏi.

 Nếu có phần thưởng thì hệ thống sẽ làm trung gian giữ lại. Nếu người hướng dẫn thấy có thể giải quyết sẽ hẹn giờ

hướng dẫn.

 Người hướng dẫn và người cần hướng dẫn sẽ được kết nối chat, gọi video, có thể chia sẻ màn hình và chia sẻ code với nhau.

 Sau khi hướng dẫn xong:

 Nếu đã giải quyết được vấn đề thì hai người dùng bấmxác nhận và phần thưởng sẽ được gửi tới người hướngdẫn.

 Nếu không giải quyết được vấn đề tiếp tục tìm người hướng dẫn khác.

 Nếu đã giải quyết được vấn đề mà người cần hướng dẫn không xác nhận Người giúp có thể gửi khiếu nại lên admin sẽ xem xét và giải quyết.

+ Đánh giá người hướng dẫn.

+ Quản lý lịch sử hỏi đáp và giao dịch.

Trang 5

Mongoose, SocketIO.

‒ Tìm hiểu về State Management và các thư viện như Redux Toolkit, Redux

‒ Khảo sát thực trạng các trang web hỏi đáp trên thị trường như

StackOverflow, Quora,… và các nghiệp vụ cần giải quyết cho diễn đàn hỏiđáp, từ đó tiến hành phân tích, xác định các yêu cầu cụ thể cho đề tài.

‒ Phân tích thiết kế hệ thống ứng dụng.‒ Tiến hành xây dựng trang web.

‒ Tiến hành triển khai và kiểm thử chức năng.6 Công nghệ

‒ Front-end: ReactJs, NextJs, Typescript, TailwindCSS, MUI.‒ State Management: Redux Toolkit.

‒ Back-end: NodeJs, NestJs, SocketIO.‒ Database: MongoDB.

‒ API Documentation: Postman.‒ Source Control: Github.

7 Kết quả mong đợi

‒ Tìm hiểu và áp dụng các công nghệ mới như gọi video, chia sẻ code thờigian thực.

‒ Hiểu rõ các nghiệp vụ, chức năng của một trang web hỏi đáp.

‒ Xây dựng được trang web hỏi đáp đáp ứng được các yêu cầu về giao diệnvà chức năng đã đề ra.

‒ Có thể mở rộng thêm tính năng trong việc phát triển phần mềm trongtương lai.

11/9/2023 – 18/9/2023 Cả nhóm

2 Nghiên cứu và lựa chọn công

nghệ sử dụng 19/9/2023 – 26/9/2023 Cả nhóm

Trang 6

3 Khởi tạo và cài đặt các cấu hình Source Code Back-end.

27/9/2023 – 4/10/2023

Võ Đình Nghĩa4 Khởi tạo và cài đặt các cấu hình

Source Code Front-end Đỗ Phú Quang5

Xây dựng giao diện các trang đăng nhập, đăng ký và quản lý thông tin cá nhân.

năng thêm câu hỏi và bình luận Võ Đình Nghĩa

Xây dựng giao diện các trang liên quan đến việc kết nối giữa các người dùng (chat, gọi video

12 Xây dựng các API cho các chức

năng nạp và rút tiền Võ Đình Nghĩa13 Xây dựng giao diện các trang

19/11/2023 – 29/11/2023

Đỗ Phú Quang14 Xây dựng các API cho các chức

năng của admin Võ Đình Nghĩa15 Kiểm thử phần mềm và sửa lỗi 30/11/2023 – 14/12/2023 Cả nhóm16 Hoàn thiện báo cáo 15/12/2023 – 22/12/2023 Cả nhóm17 Thời gian dự phòng 23/12/2023 – 30/12/2023

Trang 7

Xác nhận của CBHD

(Ký tên và ghi rõ họ tên)

ThS Trần Thị Hồng Yến

TP HCM, ngày 30 tháng 12 năm 2023Sinh viên

Đỗ Phú Quang

TP HCM, ngày 30 tháng 12 năm 2023Sinh viên

Võ Đình Nghĩa

Trang 8

1.3 Đối tượng nghiên cứu 17

1.4 Phương pháp nghiên cứu 18

Trang 9

Chương 3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 32

3.1 Phân tích yêu cầu 32

3.1.1 Đăng ký 32

3.1.2 Đăng nhập 32

3.1.3 Bài viết 32

3.1.4 Giao dịch 32

Trang 10

3.1.5 Thông báo 33

3.1.6 Tin nhắn, gọi video và chia sẻ code 33

3.1.7 Quản lý thẻ (tag) 33

3.1.8 Quản lý thành viên 33

3.1.9 Quản lý báo cáo bình luận 33

3.1.10 Quản lý yêu cầu rút tiền 33

4.2.4 Tạo bài viết 80

4.2.5 Chỉnh sửa bài viết 81

4.2.6 Chi tiết bài viết 82

4.2.7 Quản lý thông tin cá nhân 83

4.2.8 Thông báo 83

4.2.9 Tin nhắn 84

Trang 11

4.2.10 Gọi video 85

4.2.11 Chia sẻ code 85

4.2.12 Bài viết của tôi 86

4.2.13 Bài viết đã lưu 87

4.2.14 Giao dịch 87

4.2.15 Nạp tiền 88

4.2.16 Yêu cầu rút tiền 89

4.2.17 Yêu cầu trợ giúp 89

4.2.18 Danh sách thẻ (tag) 90

4.2.19 Tạo và chỉnh sửa thẻ (tag) 91

4.2.20 Quản lý thành viên 91

4.2.21 Quản lý báo cáo bình luận 92

4.2.22 Quản lý yêu cầu rút tiền 93

Trang 12

Hình 4.4 Màn hình “Tạo bài viết” 68

Hình 4.5 Màn hình “Chỉnh sửa bài viết” 69

Hình 4.6 Màn hình “Chi tiết bài viết” 70

Hình 4.7 Màn hình “Quản lý thông tin cá nhân” 71

Hình 4.8 Màn hình “Thông báo” 71

Hình 4.9 Màn hình “Tin nhắn” 72

Hình 4.10 Màn hình “Bài viết của tôi” 73

Hình 4.13 Màn hình “Bài viết đã lưu” 75

Hình 4.14 Màn hình “Giao dịch” 75

Hình 4.15 Màn hình “Nạp tiền” 76

Hình 4.16 Màn hình “Yêu cầu rút tiền” 77

Hình 4.17 Màn hình “Yêu cầu trợ giúp” 77

Hình 4.18 Màn hình “Danh sách thẻ (tag)” 78

Hình 4.19 Màn hình “Tạo và chỉnh sửa thẻ (tag)” 79

Hình 4.20 Màn hình “Quản lý thành viên” 80

Hình 4.21 Màn hình “Quản lý báo cáo bình luận” 80

Hình 4.22 Màn hình “Quản lý yêu cầu rút tiền” 81

DANH MỤC BẢNGBảng 3.1 Danh sách Actor 23

Bảng 3.2 Danh sách Use Case 23

Trang 13

Bảng 3.3 Đặc tả Use Case Đăng nhập 26

Bảng 3.4 Đặc tả Use Case Đăng xuất 27

Bảng 3.5 Đặc tả Use Case Đăng ký 28

Bảng 3.6 Đặc tả Use Case Xem danh sách bài viết 28

Bảng 3.7 Đặc tả Use Case Xem bài viết đã lưu 29

Bảng 3.8 Đặc tả Use Case Xem bài viết cá nhân 30

Bảng 3.9 Đặc tả Use Case Xem chi tiết bài viết 30

Bảng 3.10 Đặc tả Use Case Xoá bài viết 31

Bảng 3.11 Đặc tả Use Case Chỉnh sửa bài viết 32

Bảng 3.12 Đặc tả Use Case Chấp nhận bình luận 33

Bảng 3.13 Đặc tả Use Case Yêu cầu kết nối 34

Bảng 3.14 Đặc tả Use Case Lưu bài viết 34

Bảng 3.15 Đặc tả Use Case Huỷ lưu bài viết 35

Bảng 3.16 Đặc tả Use Case Thêm bình luận 36

Bảng 3.17 Đặc tả Use Case Xoá bình luận 36

Bảng 3.18 Đặc tả Use Case Chỉnh sửa bình luận 37

Bảng 3.19 Đặc tả Use Case Đánh giá bình luận/bài viết 38

Bảng 3.20 Đặc tả Use Case Báo cáo bình luận 39

Bảng 3.21 Đặc tả Use Case Thêm bài viết 39

Bảng 3.22 Đặc tả Use Case Xem thông tin cá nhân 40

Bảng 3.23 Đặc tả Use Case Chỉnh sửa thông tin cá nhân 41

Bảng 3.24 Đặc tả Use Case Chấp nhận yêu cầu 41

Bảng 3.25 Đặc tả Use Case Xem danh sách yêu cầu 42

Bảng 3.26 Đặc tả Use Case Chấp nhận yêu cầu 43

Bảng 3.27 Đặc tả Use Case Huỷ yêu cầu kết nối 43

Bảng 3.28 Đặc tả Use Case Đánh dấu kết nối thành công 44

Bảng 3.29 Đặc tả Use Case Xem danh sách cuộc trò chuyện 45

Bảng 3.30 Đặc tả Use Case Nhắn tin và kết nối video 45

Bảng 3.31 Đặc tả Use Case Xem thông báo 46

Bảng 3.32 Đặc tả Use Case Xem danh sách giao dịch 47

Bảng 3.33 Đặc tả Use Case Báo cáo người dùng 47

Bảng 3.34 Đặc tả Use Case Nạp tiền 48

Bảng 3.35 Đặc tả Use Case Yêu cầu rút tiền 49

Trang 14

Bảng 3.36 Đặc tả Use Case Xem danh sách báo cáo bình luận 50

Bảng 3.37 Đặc tả Use Case Xử lý báo cáo bình luận 50

Bảng 3.38 Đặc tả Use Case Xem danh sách báo cáo người dùng 51

Bảng 3.39 Đặc tả Use Case Xử lý báo cáo người dùng 52

Bảng 3.40 Đặc tả Use Case Xem danh sách người dùng 52

Bảng 3.41 Đặc tả Use Case Cập nhật trạng thái người dùng 53

Bảng 3.42 Đặc tả Use Case Xem danh sách thẻ 54

Bảng 3.43 Đặc tả Use Case Xem danh sách thẻ 54

Bảng 3.44 Đặc tả Use Case Thêm thẻ 55

Bảng 3.45 Đặc tả Use Case Sửa/xoá thẻ 55

Bảng 3.46 Đặc tả Use Case Xem danh sách yêu cầu rút tiền 56

Bảng 3.47 Đặc tả Use Case Xác nhận yêu cầu rút tiền 57

Bảng 3.48 Danh sách các bảng trong cơ sở dữ liệu 58

Bảng 3.49 Mô tả chi tiết bảng User 59

Bảng 3.50 Mô tả chi tiết bảng Tag 60

Bảng 3.51 Mô tả chi tiết bảng Post 60

Bảng 3.52 Mô tả chi tiết bảng Comment 60

Bảng 3.53 Mô tả chi tiết bảng Vote 61

Bảng 3.54 Mô tả chi tiết bảng Report 61

Bảng 3.55 Mô tả chi tiết bảng ConnectRequest 62

Bảng 3.56 Mô tả chi tiết bảng Rating 62

Bảng 3.57 Mô tả chi tiết bảng Withdraw 63

Bảng 3.58 Mô tả chi tiết bảng Notification 63

Bảng 3.59 Mô tả chi tiết bảng Transaction 64

Bảng 4.1 Danh sách màn hình 65

Trang 15

Chương 1 GIỚI THIỆU ĐỀ TÀI1.1 Lý do chọn đề tài

Hiện nay, số lượng nhân sự của ngành công nghệ thông tin đang gia tăng nhanhchóng, đi kèm với đó là nhu cầu phát sinh các diễn đàn hỏi đáp dành cho lập trình viên.Đa số các diễn đàn hiện tại trên thị trường hoạt động bằng cách cho phép người dùngthêm câu hỏi và các người dùng khác hỗ trợ bằng cách bình luận văn bản Tuy nhiên,cách tiếp cận này chỉ phù hợp với những vấn đề đơn giản Đối với những vấn đề phức tạpcần có sự tương tác mạnh mẽ hơn giữa người hướng dẫn và người cần giải đáp Hiểuđược điều đó, nhóm em quyết định lựa chọn đề tài “Xây dựng trang web hỏi đáp cho lậptrình viên” với những tính năng mở rộng giúp kết nối các lập trình viên và giải quyết vấnđề một cách hiệu quả hơn.

1.2 Phạm vi nghiên cứu

Trong đồ án này, chúng em sẽ tập trung tìm hiểu về các bài toán quản lý ngườidùng và các quy trình nghiệp vụ trong phạm vi đề tài, từ đó xây dựng một trang web hỏiđáp cho lập trình viên hoàn chỉnh.

1.3 Đối tượng nghiên cứuCác công nghệ:

‒ Ngôn ngữ lập trình: JavaScript, TypeScript.

‒ Framework: NestJS.

‒ Database: MongoDB.

‒ Thư viện hỗ trợ: ReactJS, Mongoose, TailwindCSS, React Query.

Đối tượng trong phạm vi đề tài hướng đến:

‒ Các lập trình viên có nhu cầu tìm kiếm sự giúp đỡ hoặc giúp đỡ các lập trình viên

Trang 16

‒ Khảo sát thực trạng các trang web hỏi đáp trên thị trường như StackOverflow, Quora,… và các nghiệp vụ cần giải quyết cho diễn đàn hỏi đáp, từ đó tiến hành phân tích,xác định các yêu cầu cụ thể cho đề tài.

‒ Phân tích thiết kế hệ thống ứng dụng.‒ Tiến hành xây dựng trang web.

‒ Tiến hành triển khai và kiểm thử chức năng.

1.5 Khảo sát thực tế và giải pháp

1.5.1 Khảo sát ứng dụng trên thị trường

Qua khảo sát các ứng dụng trên thị trường, chúng em có chọn lọc ra được một sốứng dụng nổi bật tương ứng với lĩnh vực đã chọn: Website StackOverflow, WebsiteQuora, Website CodeProject.

 Website StackOverflow‒ Ưu điểm:

+ Hệ thống đánh dấu giúp phân loại câu hỏi dựa trên các công nghệ và ngôn ngữ lậptrình.

+ Người dùng có thể kiếm điểm uy tín, huy chương và đặc quyền, khuyến khích sựtham gia tích cực và đóng góp chất lượng.

‒ Nhược điểm: Các bước để thêm bài viết luôn theo một khuôn khổ cố định nên khá

phức tạp đối với các câu hỏi đơn giản. Website Quora

‒ Ưu điểm: Tương tự như Quora, bên cạnh việc đặt câu hỏi, người dùng có thể tạo các

bài viết về những chủ đề cụ thể để truyền đạt tri thức.

‒ Nhược điểm:

Trang 17

+ Giao diện kém trực quan.

+ Cách phân chia các thành phần trong thanh điều hướng chưa tối ưu.

 Các trang web trên đều chỉ hỗ trợ giải quyết vấn đề đơn thuần thông qua văn bản, cầnnhững giải pháp thay thế cho các vấn đề phức tạp hơn.

‒ Nghiệp vụ:

+ Người dùng: Cho phép quản lý bài viết cá nhân, xem bài viết theo nhiều chủ đề,lưu bài viết, bình luận bài viết, đánh giá bình luận, bài viết, nhắn tin, kết nối videođể giải quyết vấn đề, quản lý giao dịch, nạp, rút tiền, báo cáo bình luận, ngườidùng

+ Quản trị viên: Quản lý người dùng, xử lý báo cáo bình luận, người dùng, xử lý yêucầu rút tiền, quản lý thẻ cho bài viết.

‒ Tin học:

+ Sản phẩm cuối cùng là một website nên có thể chạy trên nhiều loại thiết bị (điệnthoại, máy tính bảng, ).

+ Yêu cầu internet để truy cập.

+ Có hỗ trợ responsive website để tối ưu trải nghiệm người dùng.

Trang 18

Chương 2 CÔNG NGHỆ SỬ DỤNG2.1 ReactJs

2.1.1 Giới thiệu

Hình 2.1 Logo ReactJS

‒ ReactJS là một thư viện JavaScript mã nguồn mở được thiết kế bởi Facebook với mụcđích tạo ra những ứng dụng web một cách nhanh chóng, hiệu quả, giảm thiểu lượngcode so với việc sử dụng Javascript thuần.

‒ ReactJS sử dụng cách tiếp cận "component-based" để xây dựng giao diện người dùng.Mỗi thành phần (component) trong ReactJS đại diện cho một phần nhỏ của giao diệnvà có thể tái sử dụng, kết hợp và tương tác với nhau để tạo thành các trang web phứctạp.

‒ ReactJS sử dụng cú pháp JSX, một phần mở rộng của JavaScript, để viết các thànhphần giao diện JSX cho phép tạo ra các thẻ HTML tương tự như cách chúng ta viếttrong các trang web, giúp code ngắn gọn và dễ đọc.

‒ ReactJS sử dụng một Virtual DOM (cấu trúc cây ảo) để tối ưu việc cập nhật và hiểnthị giao diện Thay vì cập nhật trực tiếp DOM thực, ReactJS so sánh và cập nhật chỉnhững phần thay đổi trên Virtual DOM.

‒ ReactJS giúp quản lý trạng thái ứng dụng một cách hiệu quả thông qua việc sử dụngcác state (trạng thái) và lifecycle methods (các phương thức vòng đời).

Trang 19

2.2.2 Ưu điểm

‒ Dễ sử dụng: React-Query cung cấp API đơn giản và dễ hiểu, giúp giảm bớt thời gian

và công sức khi phát triển ứng dụng.

‒ Quản lý trạng thái tự động: React-Query tự động quản lý trạng thái dữ liệu và xử lý

cập nhật tự động khi dữ liệu thay đổi Điều này giúp giảm bớt mã lặp lại và tăng tínhnhất quán trong ứng dụng.

‒ Cache thông minh: React-Query lưu trữ cache dữ liệu để giảm số lượng yêu cầu

mạng và tăng hiệu suất ứng dụng Khi dữ liệu được yêu cầu lại, React-Query sẽ trả vềdữ liệu từ cache mà không cần gửi yêu cầu mạng mới.

‒ Tích hợp tốt với Suspense: React-Query tích hợp tốt với React Suspense, cho phép

sử dụng khái niệm "suspense" để xử lý việc đợi cho dữ liệu được tải xuống từ server.Điều này giúp cải thiện trải nghiệm người dùng vì người dùng có thể hoạt động trêncác thành phần khác trong khi dữ liệu đang được tải.

Trang 20

‒ Hỗ trợ cho nhiều loại yêu cầu mạng: React-Query hỗ trợ cho nhiều loại yêu cầu

mạng như GET, POST, PUT, DELETE, v.v Nó cũng hỗ trợ các tính năng như xử lýphiên bản, xử lý lỗi, hủy yêu cầu, và nhiều hơn nữa.

2.2.3 Nhược điểm2.3 TailwindCSS

Hình 2.3 Logo TailwindCSS

2.3.1 Giới thiệu

TailwindCSS là một framework CSS ưu tiên sự tiện ích và dễ dàng chỉnh sửa.Ngược lại với các framework CSS khác, Tailwind CSS không cung cấp các class CSSphức tạp, cứng nhắc khó chỉnh sửa như là “forms, table, card, carousel,…” như củaBootstrap hay Material Design CSS, mà Tailwind chỉ cung cấp các class cho các stylecấp thấp như “padding, color, cursor, border, light,…” Điều này giúp lập trình viên linhđộng trong việc sửa chữa các thành phần trong website theo ý muốn của lập trình viênchứ không bị gò bó như những framework trước đây.

2.3.2 Ưu điểm

‒ Tùy chỉnh linh hoạt: Tailwind CSS cho phép tùy chỉnh và xây dựng giao diện ngườidùng theo ý muốn của Bằng cách sử dụng các lớp CSS đã có sẵn hoặc tạo các lớp tùychỉnh, có thể tạo ra các kiểu thiết kế độc đáo và phù hợp với yêu cầu cụ thể của dự án.‒ Phát triển sản phẩm nhanh chóng: Với TailwindCSS, chúng ta không cần phải viếtCSS từ đầu hoặc tìm hiểu cú pháp của một framework CSS cụ thể Chúng ta có thể sửdụng các lớp CSS có sẵn để áp dụng kiểu và cấu trúc giao diện người dùng một cáchnhanh chóng Điều này giúp giảm thời gian phát triển và tăng năng suất của nhà pháttriển.

‒ Kích thước nhỏ gọn: Tailwind CSS được thiết kế để có kích thước nhỏ gọn hơn sovới các framework CSS truyền thống Vì chúng ta chỉ sử dụng các lớp CSS cần thiết,

Trang 21

mã nguồn của ứng dụng sẽ không có những đoạn CSS không sử dụng, giúp giảm kíchthước file và tăng tốc độ tải trang.

‒ Tương thích và tích hợp tốt: TailwindCSS tương thích với hầu hết các trình duyệt vàdễ tích hợp với các công cụ và framework khác như ReactJs, Vue.js và Angular.Chúng ta cũng có thể sử dụng Tailwind CSS kết hợp với các công nghệ phát triểnkhác để xây dựng giao diện người dùng một cách linh hoạt.

2.3.3 Nhược điểm

‒ Quá phụ thuộc vào lớp CSS: Tailwind CSS có xu hướng tạo ra rất nhiều lớp CSStrong mã nguồn HTML, điều này có thể làm cho mã nguồn trở nên khá lớn và khóđọc Điều này cũng có thể làm tăng kích thước file CSS và ảnh hưởng đến hiệu suấttải trang.

‒ Khó khăn khi mới sử dụng: Để có thể sử dụng TailwindCSS một cách hiệu quả chúngta cần phải nắm vững cú pháp các các lớp CSS nên cần nhiều thời gian lúc ban đầu.‒ Hạn chế về tuỳ chỉnh: Mặc dù TailwindCSS cho phép tuỳ chỉnh Tuy nhiên với một

số yêu cầu quá phức tạp thì TailwindCSS không thể đáp ứng được, lúc đó chúng tacần viết CSS theo cách bình thường.

Trang 22

 Socket.IO sử dụng mô hình giao tiếp dựa trên sự kiện (event-driven) và giao thứcWebSockets để tạo kết nối liên tục giữa máy chủ và khách hàng.

 Node.js cung cấp một cách tiếp cận bất đồng bộ (asynchronous) và lập trình hướng sựkiện (event-driven programming).

2.5.2 Ưu điểm

 Xử lý yêu cầu nhanh và hiệu quả nhờ cách tiếp cận bất đồng bộ.

 Thư viện hỗ trợ mạnh mẽ, cung cấp nhiều tính năng cho phát triển web.

Trang 23

 Có thể xây dựng các ứng dụng web đa nền tảng, ứng dụng real-time,…

‒ Mục tiêu chính của NestJS là cung cấp một cấu trúc ứng dụng rõ ràng và dễ quản lý,giúp tăng tính bảo trì và sự tổ chức trong mã nguồn Để đạt được điều này, NestJStriển khai mô hình kiến trúc lõi (core architecture) dựa trên các nguyên tắc củaAngular, đặc biệt là sử dụng Dependency Injection (DI) và Modules (Các module).

Trang 24

‒ Sử dụng TypeScript và cho phép ngôn ngữ lập trình này thích ứng nhanh để đáp ứngmọi thay đổi của JavaScript.

‒ Nguồn tài liệu tuyệt vời, quy trình kiểm tra cũng trở nên dễ dàng.

‒ NestJS được dùng để tạo các ứng dụng cho những doanh nghiệp quy mô lớn.

‒ NestJS cung cấp ứng dụng độc lập để nhà phát triển tạo ra các ứng dụng dễ test, dễnâng cấp và dễ bảo trì.

‒ Cấu trúc của NestJS chủ yếu dựa vào Angular khá đơn giản và cho phép tập trúc vàoviệc thiết kế endpoint thay vì cấu trúc của ứng dụng.

‒ NestJS cung cấp các module, Providers và Controllers giống Angular giúp ứng dụngcó khả năng mở rộng, test tốt hơn và kết hợp lỏng lẻo trái ngược với một sốframework của Node.js như như Express hoặc Koa.

‒ Do NestJS có một số khái niệm và cú pháp đặc biệt, đặc biệt là đối với những ngườimới làm quen với TypeScript hoặc Angular, việc học và sử dụng NestJS có thể đòihỏi thêm thời gian và nỗ lực.

‒ Vì NestJS thường tạo ra khối lượng code lớn hơn so với một số framework khác, điềunày có thể làm cho dự án rở nên phức tạp và khó quản lý, đặc biệt là đối với các ứngdụng nhỏ hoặc đơn giản.

‒ NestJS được xây dựng chủ yếu trên TypeScript, vì vậy chúng ta phải học TypeScriptđể làm việc với framework này.

Trang 25

 MongoDB được phát triển để xử lý các ứng dụng web và dữ liệu có tính phân tán cao,có khả năng mở rộng Nó sử dụng mô hình lưu trữ dựa trên tài liệu (document-oriented), trong đó dữ liệu được tổ chức thành các tài liệu (documents) tương tự nhưcác bản ghi trong các hệ quản trị cơ sở dữ liệu quan hệ truyền thống.

2.7.2 Ưu điểm

 MongoDB cho phép dễ dàng thay đổi cấu trúc dữ liệu, thêm hoặc xóa các trường từcác tài liệu mà không cần tuân thủ một cấu trúc cố định Nó cũng cho phép phân tándữ liệu trên nhiều node máy chủ.

 MongoDB được tối ưu hóa cho việc đọc và ghi dữ liệu nhanh chóng Nó cung cấp cáctính năng như indexing, caching và replica sets để đảm bảo hiệu suất tối ưu trong việctruy vấn và xử lý dữ liệu.

 MongoDB hỗ trợ nhiều ngôn ngữ lập trình thông qua các driver và thư viện phổ biếnnhư Python, JavaScript (Node.js), Java, C#, Ruby và nhiều ngôn ngữ khác.

Trang 26

‒ Vì MongoDB không áp đặt nhiều quy tắc và ràng buộc cho dữ liệu, việc quản lý vàduy trì tính nhất quán của dữ liệu phụ thuộc vào việc thiết kế cơ sở dữ liệu và quản lýchính sách riêng của ứng dụng.

‒ MongoDB cần sử dụng một lượng lớn bộ nhớ để lưu trữ các tài liệu và các chỉ mục(indexes) Điều này có thể gây tốn kém và không phù hợp cho các ứng dụng với khốilượng dữ liệu lớn và hạn chế bộ nhớ.

2.8.2 Ưu điểm

 Mongoose cung cấp các công cụ xác thực dữ liệu để đảm bảo rằng các tài liệu đượclưu trữ trong MongoDB đáp ứng các yêu cầu và ràng buộc do lập trình viên địnhnghĩa.

 Mongoose cung cấp các phương thức và truy vấn linh hoạt để thao tác dữ liệu vớiMongoDB cho phép lập trình viên thêm, sửa đổi, xóa và truy vấn dữ liệu một cách dễdàng thông qua các phương thức được cung cấp bởi Mongoose.

 Mongoose hỗ trợ tính năng populate để tự động lấy dữ liệu từ các bảng liên quantrong MongoDB Điều này giúp tối ưu hóa việc truy vấn dữ liệu và quản lý mối quanhệ giữa các tài liệu.

Trang 27

 Mongoose có kích thước tập tin lớn hơn so với các thư viện khác trong một số trườnghợp Điều này có thể làm tăng kích thước của ứng dụng và tăng thời gian tải ứngdụng.

‒ Mặc dù Mongoose cung cấp các tính năng linh hoạt và tiện ích để làm việc vớiMongoDB, nhưng đôi khi nó có thể làm giảm hiệu suất của ứng dụng Việc sử dụngMongoose đòi hỏi một lớp trừu tượng bổ sung và các hoạt động trung gian, điều nàycó thể làm giảm tốc độ truy cập và xử lý dữ liệu.

‒ Việc thao tác với dữ liệu phức tạp có thể trở nên khó hiểu Việc làm việc với các quanhệ một - nhiều hoặc nhiều-nhiều có thể yêu cầu một số hiểu biết và quản lý phức tạp.

Trang 28

Chương 3. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG3.1 Phân tích yêu cầu

‒ Tác giả bài viết có thể chỉnh sửa bài viết và xóa bài viết.

‒ Đối với bài viết thuộc chủ đề lỗi, người dùng có thể gửi yêu cầu giúp đỡ đến tác giảđể có thể trao đổi qua tin nhắn và gọi video Tác giả bài viết có thể xem danh sách cácyêu cầu giúp đỡ từ những người dùng khác.

‒ Người dùng có thể gửi bình luận và trao đổi bên dưới chi tiết bài viết.

‒ Người dùng có thể xem danh sách bài viết của chính mình và các bài viết đã đượclưu

3.1.4 Giao dịch

‒ Đối với người dùng: Người dùng có thể nạp tiền vào tài khoản bằng Paypal và tạoyêu cầu rút tiền gửi đến quản trị viên Người dùng có thể xem danh sách giao dịch.Có 4 loại giao dịch gồm:

+ Giao dịch nạp tiền.+ Giao dịch rút tiền.

+ Giao dịch chuyển tiền đến người dùng khác.+ Giao dịch nhận tiền từ người dùng khác.

Trang 29

‒ Đối với quản trị viên: Quản trị viên quản lý danh sách yêu cầu rút tiền của ngườidùng và xác nhận để chuyển tiền vào tài khoản Paypal của người dùng.

3.1.6 Tin nhắn, gọi video và chia sẻ code

‒ Người dùng có thể trao đổi qua tin nhắn, gửi hình ảnh, gọi video, chia sẻ màn hình vàchia sẻ code thời gian thực.

3.1.9 Quản lý báo cáo bình luận

‒ Quản trị viên có thể quản lý danh sách báo cáo bình luận, có thể xóa bình luận nếu viphạm tiêu chuẩn cộng đồng.

3.1.10 Quản lý yêu cầu rút tiền

‒ Quản trị viên có thể quản lý yêu cầu rút tiền, có thể xác nhận để chuyển tiền về tàikhoản Paypal của người dùng.

Trang 30

3.2 Thiết kế hệ thống3.2.1 Sơ đồ Use Case

Hình 3.5 Sơ đồ Use Case

3.2.2 Danh sách Actor

Bảng 3.1 Danh sách Actor

1 Quản trị viên Người quản trị hệ thống, chịu trách nhiệm giải quyết yêu cầu đến từ người dùng.

2 Người dùng Người tham gia diễn đàn thảo luận

Trang 31

3.2.3 Danh sách Use Case

Bảng 3.2 Danh sách Use Case

STTTên UseCase

Người dùng Người dùng xem danh sách bài viết của trang web

5 Xem bài viết đã lưu

Người dùng Người dùng xem danh sách bài viết đã lưu

6 Xem bài viết cá nhân

Người dùng Người dùng xem danh sách bài viết của bản thân

7 Xem chi tiết bài viết

Người dùng Người dùng xem chi tiết bài viết8 Xoá bài viết Người dùng Người dùng xoá bài viết của bản

thân9 Chỉnh sửa bài

Người dùng Người dùng chỉnh sửa bài viết của bản thân

10 Chấp nhận bình luận

Người dùng Người dùng xác nhận câu trả lời chính xác trong bài viết của mình11 Yêu cầu kết

Người dùng Người dùng bình luận trong bài viết

15 Xoá bình luận

Người dùng Người dùng xoá bình luận16 Chỉnh sửa

bình luận

Người dùng Người dùng chỉnh sửa bình luận17 Đánh giá Người dùng Người dùng đánh giá tính hữu ích

Trang 32

bình luận/bài viết

của bình luận/bài viết18 Báo cáo bình

Người dùng Người dùng báo cáo bình luận19 Thêm bài viết Người dùng Người dùng thêm bài viết20 Xem thông

tin cá nhân

Người dùng Người dùng xem thông tin cá nhân21 Chỉnh sửa

thông tin cá nhân

Người dùng Người dùng cập nhật thông tin cá nhân

22 Xem danh sách yêu cầu kết nối

Người dùng Người dùng xem danh sách yêu cầu kết nối từ các bài viết mà mìnhđã treo thưởng

23 Chấp nhận yêu cầu

Người dùng Người dùng chấp nhận yêu cầu kết nối

24 Huỷ yêu cầu kết nối

Người dùng Người dùng huỷ yêu cầu kết nối25 Đánh dấu kết

nối thành công

Người dùng Người dùng xác nhận kết nối thànhcông, đã giải quyết được vấn đề26 Xem danh

sách cuộc trò chuyện

Người dùng Người dùng xem danh sách cuộc trò chuyện

27 Nhắn tin và kết nối video

Người dùng Người dùng nhắn tin và kết nối video

28 Xem thông báo

Người dùng Người dùng xem thông báo29 Xem danh

sách giao dịch

Người dùng Người dùng xem danh sách giao dịch

30 Báo cáo người dùng

Người dùng Người dùng báo cáo người dùng khác

31 Nạp tiền Người dùng Người dùng nạp tiền vào hệ thống32 Yêu cầu rút

Người dùng Người dùng yêu cầu rút tiền33 Xem danh

sách báo cáo bình luận

Quản trị viên Quản trị viên xem danh sách báo cáo bình luận

Trang 33

34 Xử lý báo cáobình luận

Quản trị viên Quản trị viên xử lý báo cáo bằng cách chấp nhận hoặc xoá bình luận35 Xem danh

sách báo cáo người dùng

Quản trị viên Quản trị viên xem danh sách báo cáo người dùng

36 Xử lý báo cáongười dùng

Quản trị viên Quản trị viên xử lý bằng cách chấpnhận hoặc cấm người dùng

37 Xem danh sách người dùng

Quản trị viên Quản trị viên xem danh sách ngườidùng

38 Cập nhật trạng thái người dùng

Quản trị viên Quản trị viên cập nhật trạng thái người dùng

39 Xem danh sách thẻ

Quản trị viên Quản trị viên xem danh sách thẻ40 Thêm thẻ Quản trị viên Quản trị viên thêm thẻ

41 Sửa/xoá thẻ Quản trị viên Quản trị viên xoá/sửa thẻ42 Xem danh

sách yêu cầu rút tiền

Quản trị viên Quản trị viên xem danh sách yêu cầu rút tiền

43 Xác nhận yêucầu rút tiền

Quản trị viên Quản trị viên xác nhận yêu cầu rút tiền

3.2.4 Đặc tả Use Case

3.2.4.1 Use Case Đăng nhập

Bảng 3.3 Đặc tả Use Case Đăng nhập

Thuộc tínhMô tả

Tên Use Case Đăng nhập

Mô tả Là Quản trị viên/Người dùng, tôi muốn đăng nhập vào để sửdụng dịch vụ từ trang web.

Tác nhân Quản trị viên, Người dùng

Tiền điều kiện - Đối với Người dùng: đã thực hiện use case Đăng ký.- Đối với Quản trị viên: tài khoản đã được tạo sẵn.Hậu điều kiện Người dùng đăng nhập ứng dụng thành công.Luồng tương tác

1 Quản trị viên/Người dùng truy cập trang web.

2 Người dùng nhập thông tin tài khoản và chọn lệnh “Sign In”.3 Hệ thống xác thực thông tin đăng nhập hợp lệ và cho phép truy

Trang 34

cập ứng dụng.Luồng tương

thay thế

KhôngLuồng tương tác

3.2.4.2 Use Case Đăng xuất

Bảng 3.4 Đặc tả Use Case Đăng xuất

Tên Use Case Đăng xuất

Mô tả Là Quản trị viên/Người dùng, tôi muốn đăng xuất tài khoản củatôi khỏi trang web.

Tác nhân Quản trị viên, Người dùng

Tiền điều kiện Quản trị viên/Người dùng đã thực hiện use case Đăng nhập thànhcông

Hậu điều kiện Người dùng đăng xuất khỏi trang web thành công.Luồng tương tác

ngoại lệ

KhôngYêu cầu phi

chức năng

Không

Trang 35

3.2.4.3 Use Case Đăng ký

Bảng 3.5 Đặc tả Use Case Đăng ký

Tên Use Case Đăng ký

Mô tả Là Người dùng, tôi muốn đăng ký tài khoản để có thể sử dụngdịch vụ từ trang web.

Tác nhân Người dùng

Tiền điều kiện Người dùng có tài khoản email chưa được đăng kýHậu điều kiện Người dùng đăng ký tài khoản thành công.

Luồng tương tácchính

1 Người dùng truy cập trang web.

2 Người dùng chọn lệnh “Sign Up”, nhập các thông tin cần thiếtvà xác nhận đăng ký.

3 Hệ thống xác thực thông tin đăng ký hợp lệ và thông báo đăngký thành công cho người dùng.

Luồng tương tácthay thế

3.2.4.4 Use Case Xem danh sách bài viết

Bảng 3.6 Đặc tả Use Case Xem danh sách bài viết

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

Mô tả Là Người dùng, tôi muốn xem danh sách bài viết hiện có trêntrang web

Tác nhân Người dùngTiền điều kiện Không

Hậu điều kiện Người dùng xem danh sách bài viết thành công.Luồng tương tác

1 Người dùng truy cập trang web.

2 Người dùng chọn “Bug” hoặc “Discuss” hoặc “Technews”3 Hệ thống hiển thị danh sách bài viết tương ứng với chủ đề.

Trang 36

Luồng tương tácngoại lệ

chức năng

3.2.4.5 Use Case Xem bài viết đã lưu

Bảng 3.7 Đặc tả Use Case Xem bài viết đã lưu

Tên Use Case Xem bài viết đã lưu

Mô tả Là Người dùng, tôi muốn xem danh sách bài viết mà tôi đã lưuTác nhân Người dùng

Tiền điều kiện Người dùng đã thực hiện use case “Đăng nhập” thành côngHậu điều kiện Người dùng xem danh sách bài viết đã lưu thành công.Luồng tương tác

ngoại lệ

chức năng

3.2.4.6 Use Case Xem bài viết cá nhân

Bảng 3.8 Đặc tả Use Case Xem bài viết cá nhân

Tên Use Case Xem bài viết cá nhân

Mô tả Là Người dùng, tôi muốn xem danh sách bài viết của tôiTác nhân Người dùng

Tiền điều kiện Người dùng đã thực hiện use case “Đăng nhập” thành côngHậu điều kiện Người dùng xem danh sách bài viết cá nhân thành công.Luồng tương tác

ngoại lệ

KhôngYêu cầu phi Không

Trang 37

chức năng

3.2.4.7 Use Case Xem chi tiết bài viết

Bảng 3.9 Đặc tả Use Case Xem chi tiết bài viết

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

Mô tả Là Người dùng, tôi muốn xem thông tin chi tiết bài viết và danhsách bình luận

Tác nhân Người dùngTiền điều kiện Không

Hậu điều kiện Người dùng xem chi tiết bài viết thành công.Luồng tương tác

1 Người dùng thực hiện use case “Đăng nhập” thành công

2 Người dùng thực hiện use case “Xem bài viết cá nhân” hoặc“Xem bài viết đã lưu”

3 Người dùng nhấn vào một bài viết

4 Hệ thống hiển thị thông tin chi tiết bài viết cùng danh sáchbình luận tương ứng

chức năng

3.2.4.8 Use Case Xoá bài viết

Bảng 3.10 Đặc tả Use Case Xoá bài viết

Tên Use Case Xoá bài viết

Mô tả Là Người dùng, tôi muốn xoá bài viết của tôiTác nhân Người dùng

Tiền điều kiện Người dùng thực hiện use case “Đăng nhập” thành công.

Hậu điều kiện Người dùng xoá bài viết và tất cả các bình luận trong bài viếtthành công.

1 Người dùng thực hiện use case “Xem bài viết cá nhân”2 Người dùng nhấn vào biểu tượng xoá ở một bài viết

Trang 38

3 Hệ thống xoá bài viết và hiển thị lại danh sách bài viết cho usecase “Xem bài viết cá nhân”

1 Người dùng thực hiện use case “Xem danh sách bài viết”2 Hệ thống hiển thị toàn bộ bài viết của trang web, bao gồm cảbài viết của người dùng.

3 Người dùng nhấn vào biểu tượng xoá ở một bài viết của mình4 Hệ thống xoá bài viết và hiển thị lại danh sách bài viết cho usecase “Xem danh sách bài viết”

1 Người dùng đã thực hiện bước 1, 2 ở luồng tương tác chínhhoặc bước 1, 2, 3 ở luồng tương tác thay thế.

2 Hệ thống xác nhận bài viết đã có giao dịch được tạo nên khôngthể xoá và hiển thị thông báo cho người dùng.

Yêu cầu phi chức năng

3.2.4.9 Use Case Chỉnh sửa bài viết

Bảng 3.11 Đặc tả Use Case Chỉnh sửa bài viết

Tên Use Case Chỉnh sửa bài viết

Mô tả Là Người dùng, tôi muốn chỉnh sửa bài viết của tôiTác nhân Người dùng

Tiền điều kiện Người dùng thực hiện use case “Đăng nhập” thành côngHậu điều kiện Người dùng chỉnh sửa bài viết thành công.

1 Người dùng thực hiện use case “Xem bài viết cá nhân”2 Người dùng nhấn vào biểu tượng chỉnh sửa ở một bài viết3 Người dùng cập nhật thông tin bài viết và nhấn “Edit Post”4 Hệ thống cập nhật bài viết thành công

1 Người dùng thực hiện use case “Xem danh sách bài viết”2 Hệ thống hiển thị toàn bộ bài viết của trang web, bao gồm cảbài viết của người dùng

3 Người dùng nhấn biểu tượng chỉnh sửa ở bài viết của mình4 Người dùng cập nhật thông tin bài viết và nhấn “Edit Post”5 Hệ thống cập nhật bài viết thành công

1 Người dùng đã thực hiện bước 1, 2, 3 ở luồng tương tác chínhhoặc bước 1, 2, 3, 4 ở luồng tương tác thay thế.

2 Hệ thống xác nhận bài viết đã có giao dịch được tạo nên không

Trang 39

thể cập nhật và hiển thị thông báo cho người dùng.Yêu cầu phi

chức năng

Nội dung bài viết và bình luận được hiển thị thời gian thực chonhững người dùng đang xem chi tiết bài viết

3.2.4.10 Use Case Chấp nhận bình luận

Bảng 3.12 Đặc tả Use Case Chấp nhận bình luận

Tên Use Case Chấp nhận bình luận

Mô tả Là Người dùng, tôi muốn đánh dấu những câu trả lời chính xáccho bài viết của tôi

Tiền điều kiện Người dùng thực hiện use case “Đăng nhập”, “Xem chi tiết bàiviết” thành công và người dùng là tác giả của bài viết đang xem.Hậu điều kiện Bình luận được đánh dấu là câu trả lời đúng.

1 Người dùng nhấn vào biểu tượng tích xanh của bình luận2 Hệ thống đánh dấu bình luận và câu trả lời đúng và hiển thị lạicho người dùng

ngoại lệ

chức năng

3.2.4.11 Use Case Yêu cầu kết nối

Bảng 3.13 Đặc tả Use Case Yêu cầu kết nối

Tên Use Case Yêu cầu kết nối

Mô tả Là Người dùng, tôi muốn gửi yêu cầu kết nối đến tác giả bài viếtđể hỗ trợ giải quyết vấn đề

Tiền điều kiện Người dùng thực hiện use case “Đăng nhập”Hậu điều kiện Yêu cầu kết nối được gửi thành công

1 Người dùng nhấn vào biểu tượng tích xanh của bình luận2 Hệ thống đánh dấu bình luận và câu trả lời đúng và hiển thị lạicho người dùng

KhôngLuồng tương tác Không

Trang 40

ngoại lệYêu cầu phi chức năng

3.2.4.12 Use Case Lưu bài viết

Bảng 3.14 Đặc tả Use Case Lưu bài viết

Tên Use Case Lưu bài viết

Mô tả Là Người dùng, tôi muốn lưu bài viết để dễ dàng xem lạiTác nhân Người dùng

Tiền điều kiện Người dùng thực hiện use case “Đăng nhập” và “Xem chi tiết bàiviết” thành công, bài viết cần lưu không phải là bài viết củangười dùng

Hậu điều kiện Người dùng lưu bài viết thành côngLuồng tương tác

1 Người dùng nhấn vào biểu tượng lưu bài viết 2 Hệ thống lưu bài viết thành công

ngoại lệ

chức năng

3.2.4.13 Use Case Huỷ lưu bài viết

Bảng 3.15 Đặc tả Use Case Huỷ lưu bài viết

Tên Use Case Huỷ lưu bài viết

Mô tả Là Người dùng, tôi muốn xoá bài viết khỏi danh sách đã lưu.Tác nhân Người dùng

Tiền điều kiện Người dùng thực hiện use case “Đăng nhập” và “Xem chi tiết bàiviết” thành công, bài viết đang xem đã được lưu

Hậu điều kiện Người dùng huỷ lưu bài viết thành côngLuồng tương tác

1 Người dùng nhấn vào biểu tượng lưu bài viết một lần nữa2 Hệ thống xoá bài viết khỏi danh sách đã lưu

ngoại lệ

KhôngYêu cầu phi Không