1. Trang chủ
  2. » Luận Văn - Báo Cáo

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

88 1 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây Dựng Trang Web Hỏi Đáp Cho Lập Trình Viên
Tác giả Đỗ Phú Quang, Võ Đình Nghĩa
Người hướng dẫn ThS. Trần Thị Hồng Yến
Trường học Đại Học Quốc Gia Tp. Hồ Chí Minh
Chuyên ngành Công Nghệ Thông Tin
Thể loại đồ án
Năm xuất bản 2023
Thành phố Tp. Hồ Chí Minh
Định dạng
Số trang 88
Dung lượng 4,68 MB

Cấu trúc

  • Chương 1. GIỚI THIỆU ĐỀ TÀI (15)
    • 1.1. Lý do chọn đề tài (15)
    • 1.2. Phạm vi nghiên cứu (15)
    • 1.3. Đối tượng nghiên cứu (15)
    • 1.4. Phương pháp nghiên cứu (15)
    • 1.5. Khảo sát thực tế và giải pháp (16)
      • 1.5.1. Khảo sát ứng dụng trên thị trường (16)
      • 1.5.2. Giải pháp (17)
  • Chương 2. CÔNG NGHỆ SỬ DỤNG (18)
    • 2.1. ReactJs (18)
      • 2.1.1. Giới thiệu (18)
      • 2.1.2. Ưu điểm (18)
      • 2.1.3. Nhược điểm (19)
    • 2.2. React Query (19)
      • 2.2.1. Giới thiệu (19)
      • 2.2.2. Ưu điểm (19)
      • 2.2.3. Nhược điểm (20)
    • 2.3. TailwindCSS (20)
      • 2.3.1. Giới thiệu (20)
      • 2.3.2. Ưu điểm (20)
      • 2.3.3. Nhược điểm (21)
    • 2.4. Socket.IO (21)
      • 2.4.1. Giới thiệu (21)
      • 2.4.2. Ưu điểm (22)
      • 2.4.3. Nhược điểm (22)
    • 2.5. NodeJs (22)
      • 2.5.1. Giới thiệu (22)
      • 2.5.2. Ưu điểm (22)
      • 2.5.3. Nhược điểm (23)
    • 2.6. NestJS (23)
      • 2.6.1. Giới thiệu (23)
      • 2.6.2. Ưu điểm (23)
      • 2.6.3. Nhược điểm (24)
    • 2.7. MongoDB (25)
      • 2.7.1. Giới thiệu (25)
      • 2.7.2. Ưu điểm (25)
      • 2.7.3. Nhược điểm (26)
    • 2.8. Mongoose (26)
      • 2.8.1. Giới thiệu (26)
      • 2.8.2. Ưu điểm (26)
      • 2.8.3. Nhược điểm (27)
  • Chương 3. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG (28)
    • 3.1. Phân tích yêu cầu (28)
      • 3.1.1. Đăng ký (28)
      • 3.1.2. Đăng nhập (28)
      • 3.1.3. Bài viết (28)
      • 3.1.4. Giao dịch (28)
      • 3.1.5. Thông báo (29)
      • 3.1.6. Tin nhắn, gọi video và chia sẻ code (29)
      • 3.1.7. Quản lý thẻ (tag) (29)
      • 3.1.8. Quản lý thành viên (29)
      • 3.1.9. Quản lý báo cáo bình luận (29)
      • 3.1.10. Quản lý yêu cầu rút tiền (29)
    • 3.2. Thiết kế hệ thống (30)
      • 3.2.1. Sơ đồ Use Case (30)
      • 3.2.2. Danh sách Actor (30)
      • 3.2.3. Danh sách Use Case (31)
      • 3.2.4. Đặc tả Use Case (33)
    • 3.3. Thiết kế dữ liệu (62)
      • 3.3.1. Sơ đồ lớp (62)
      • 3.3.2. Danh sách bảng (62)
      • 3.3.3. Mô tả chi tiết bảng dữ liệu (63)
  • Chương 4. XÂY DỰNG ỨNG DỤNG (69)
    • 4.1. Danh sách màn hình (69)
    • 4.2. Chi tiết màn hình (70)
      • 4.2.1. Đăng nhập (70)
      • 4.2.2. Đăng ký (70)
      • 4.2.3. Trang chủ (71)
      • 4.2.4. Tạo bài viết (72)
      • 4.2.5. Chỉnh sửa bài viết (72)
      • 4.2.6. Chi tiết bài viết (73)
      • 4.2.7. Quản lý thông tin cá nhân (74)
      • 4.2.8. Thông báo (75)
      • 4.2.9. Tin nhắn (76)
      • 4.2.10. Gọi video (76)
      • 4.2.11. Chia sẻ code (78)
      • 4.2.12. Bài viết của tôi (78)
      • 4.2.13. Bài viết đã lưu (79)
      • 4.2.14. Giao dịch (79)
      • 4.2.15. Nạp tiền (80)
      • 4.2.16. Yêu cầu rút tiền (81)
      • 4.2.17. Yêu cầu trợ giúp (81)
      • 4.2.18. Danh sách thẻ (tag) (82)
      • 4.2.19. Tạo và chỉnh sửa thẻ (tag) (83)
      • 4.2.20. Quản lý thành viên (84)
      • 4.2.21. Quản lý báo cáo bình luận (84)
      • 4.2.22. Quản lý yêu cầu rút tiền (86)
  • TÀI LIỆU THAM KHẢO (87)

Nội dung

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á

GIỚI THIỆU ĐỀ TÀI

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 nhanh chó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ùng thê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ạ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ập trì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.

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ười dù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.

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

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

‒ 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 khác.

‒ Các quản trị viên trang web.

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

 Tìm hiểu các công nghệ Front-end như ReactJs, React Query, Typescript, TailwindCSS.

‒ Tìm hiểu các công nghệ Back-end như NodeJs, NestJs, MongoDB, Mongoose,SocketIO.

‒ 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.

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, Website Quora, Website CodeProject.

+ 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ập trì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.

+ Có các nhóm cho từng chủ đề riêng biệt giúp người dùng dễ dàng theo dõi những nội dung mong muốn.

+ 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: Cách bố trí các câu trả lời tương đối dễ nhầm với các chủ đề liên quan của phần gợi ý.

‒ Ư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.

+ 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ần những giải pháp thay thế cho các vấn đề phức tạp hơn.

Với những phân tích thông qua việc tìm hiểu các sản phẩm trên, chúng em đã đưa ra một số giải pháp cho sản phẩm như sau:

+ Sản phẩm sẽ hướng đến đối tượng sử dụng là các lập trình viên, có nhu cầu trao đổi tri thức, cần được giúp đỡ hoặc có thêm thu nhập từ việc giúp đỡ người khác. + Đối tượng sử dụng sẽ bao gồm người dùng và quản trị viên.

+ 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ười dù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êu cầu rút tiền, quản lý thẻ cho bài viết.

+ 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ện thoạ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.

CÔNG NGHỆ SỬ DỤNG

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ượng code 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ện và 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ức tạp.

‒ ReactJS sử dụng cú pháp JSX, một phần mở rộng của JavaScript, để viết các thành phầ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ết trong 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ển thị 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ụng các state (trạng thái) và lifecycle methods (các phương thức vòng đời).

‒ Mang lại hiệu suất cao nhờ việc sử dụng Virtual DOM và cơ chế cập nhật thông minh.

‒ Việc quản lý trạng thái một cách hiệu quả giúp ứng dụng dễ dàng bảo trì, mở rộng và kiểm thử.

‒ Tăng tính tái sử dụng nhờ cách tiếp cận “component-based”, giảm thiểu việc lặp code.

‒ React chỉ là một View Library, do đó việc tích hợp React vào một MVC framework truyền thống sẽ cần cấu hình thêm.

‒ ReactJS có kích thước tương đối lớn so với các thư viện JavaScript khác, điều này có thể ảnh hưởng đến thời gian tải trang.

React Query

Là một thư viện JavaScript dành cho React, cung cấp các công cụ để quản lý và tự động hỗ trợ các yêu cầu API trong ứng dụng React Giúp dễ dàng quản lý trạng thái và tình trạng của các yêu cầu API, tự động tải lại dữ liệu khi cần thiết và giảm bớt số lượng mã lệnh cần viết để quản lý các yêu cầu API.

‒ 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ính nhấ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ên các thành phần khác trong khi dữ liệu đang được tải.

‒ 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.

TailwindCSS

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 CSS phức tạp, cứng nhắc khó chỉnh sửa như là “forms, table, card, carousel,…” như của Bootstrap hay Material Design CSS, mà Tailwind chỉ cung cấp các class cho các style cấ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ên chứ không bị gò bó như những framework trước đây.

‒ 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ười dù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ùy chỉ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ết CSS 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ách nhanh 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át triển.

‒ Kích thước nhỏ gọn: Tailwind CSS được thiết kế để có kích thước nhỏ gọn hơn so vớ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, 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ích thướ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ển khác để xây dựng giao diện người dùng một cách linh hoạt.

‒ Quá phụ thuộc vào lớp CSS: Tailwind CSS có xu hướng tạo ra rất nhiều lớp CSS trong 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ất tả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úng ta 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 ta cần viết CSS theo cách bình thường.

Socket.IO

 Socket.IO là một thư viện JavaScript cho phép giao tiếp hai chiều theo thời gian thực(real-time) giữa máy chủ (server) và máy khách (client).

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

 Socket.IO cung cấp các tính năng linh hoạt và dễ sử dụng để xây dựng ứng dụng thời gian thực.

 Hoạt động trên nhiều nền tảng và trình duyệt khác nhau và tự động sử dụng các phương pháp chuyển giao thư viện khác nhau nếu WebSockets không khả dụng.

 Khả năng mở rộng tốt bằng cách tạo nhiều máy chủ để xử lý lưu lượng truy cập lớn.

 Nếu kết nối mạng bị gián đoạn hoặc không ổn định, có thể gây mất kết nối và ngắt quãng giao tiếp giữa server và client.

 Việc duy trì kết nối hai chiều và liên tục có thể đặt ra một số vấn đề bảo mật.

NodeJs

 Nodejs là một môi trường javascript runtime server-side được build dựa trên engine JavaScript V8 của Chrome, cho phép chạy code JavaScript bên ngoài trình duyệt, điều khiển máy chủ và xây dựng các ứng dụng web và mạng phức tạp.

 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).

 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.

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

 Do Nodejs hoạt động đơn luồng (Single-threaded) nên nếu có một tác vụ chạy lâu, nó sẽ khiến toàn bộ hệ thống bị block.

 Không phù hợp cho các tác vụ đòi hỏi tính toán nhiều hoặc tài nguyên CPU cao.

 Việc xử lý lỗi trong Node.js có thể phức tạp hơn so với các ngôn ngữ và môi trường khác vì các lỗi xảy ra trong quá trình không đồng bộ, việc theo dõi, xử lý và ghi nhật ký lỗi có thể trở thành một thách thức.

NestJS

‒ NestJS là một framework mã nguồn mở để phát triển ứng dụng server-side (backend applications) bằng ngôn ngữ TypeScript hoặc JavaScript Nó được xây dựng trên cơ sở của Node.js và sử dụng các khái niệm từ TypeScript để tạo ra một môi trường phát triển hiện đại và mạnh mẽ cho việc xây dựng các ứng dụng web và API.

‒ 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, NestJS triển khai mô hình kiến trúc lõi (core architecture) dựa trên các nguyên tắc của Angular, đặc biệt là sử dụng Dependency Injection (DI) và Modules (Các module).

‒ NestJS giúp các ứng dụng được mở rộng, phát triển nhanh, hiệu quả và bảo trì đơn giản.

‒ Cộng đồng lớn và hỗ trợ tích cực, nhiệt tình.

‒ NestJS kết hợp phát triển front-end và mid-tier mà ở hầu hết các ngôn ngữ khác không thể làm được.

‒ Sử dụng TypeScript và cho phép ngôn ngữ lập trình này thích ứng nhanh để đáp ứng mọ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ào việ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ụng có 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ười mới làm quen với TypeScript hoặc Angular, việc học và sử dụng NestJS có thể đòi hỏ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ều nà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 ứng dụ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.

MongoDB

 MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) mã nguồn mở Nó được thiết kế để lưu trữ và xử lý các tài liệu dưới dạng BSON (Binary JSON), cho phép lưu trữ dữ liệu có cấu trúc linh hoạt và mở rộng dễ dàng.

 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.

 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án dữ 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ác tính năng như indexing, caching và replica sets để đảm bảo hiệu suất tối ưu trong việc truy 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ến như Python, JavaScript (Node.js), Java, C#, Ruby và nhiều ngôn ngữ khác.

‒ 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ối lượng dữ liệu lớn và hạn chế bộ nhớ.

Mongoose

Mongoose là một thư viện được sử dụng phổ biến trong Node.js để làm việc với MongoDB Nó cung cấp một cách tiện lợi để tương tác với cơ sở dữ liệu MongoDB bằng cách định nghĩa các mô hình (models) và tạo ra các đối tượng JavaScript để thao tác dữ liệu.

 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 được lưu trữ trong MongoDB đáp ứng các yêu cầu và ràng buộc do lập trình viên định nghĩ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ới MongoDB 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 quan trong 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 quan hệ giữa các tài liệu.

 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ường hợ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 ứng dụ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ới MongoDB, nhưng đôi khi nó có thể làm giảm hiệu suất của ứng dụng Việc sử dụng Mongoose đòi hỏi một lớp trừu tượng bổ sung và các hoạt động trung gian, điều này có 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 quan hệ 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.

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

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

‒ Đối với thành viên: Thành viên có thể đăng ký tài khoản mới với các thông tin: Họ và tên, Email và Mật khẩu.

‒ Đối với quản trị viên: Quản trị viên sẽ được quản lý hệ thống tạo tài khoản

‒ Đối với thành viên: Để có thể đăng bài cũng như bình luận và trao đổ, người dùng cần đăng nhập vào tài khoản đã đăng ký.

‒ Đối với quản trị viên: Quản trị viên cần đăng nhập để có thể thực hiện các chức năng quản lý tương ứng.

‒ Thành viên có thể đăng bài viết với các chủ đề như: Thảo luận, lỗi, tin tức công nghệ mới Đối với bài viết thuộc chủ đề lỗi có thể thêm phần thưởng cho người giúp bằng tiền.

‒ 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ác yê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 đã được lưu

‒ Đố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ạo yê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 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.

‒ Đố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ười dùng và xác nhận để chuyển tiền vào tài khoản Paypal của người dùng.

‒ Hỗ trợ cập nhật thông báo thời gian thực.

‒ Có 4 loại thông báo bao gồm:

+ Thông báo khi có người bình luận vào bài viết.

+ Thông báo khi có người phản hồi bình luận.

+ Thông báo khi bình luận vi phạm tiêu chuẩn cộng đồng.

+ Thông báo khi có cuộc gọi mới.

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.

‒ Quản trị viên có thể quản lý danh sách thẻ (tag), thêm sửa xóa thẻ.

‒ Quản trị viên có thể quản lý danh sách thành viên, cấm thành viên truy cập nếu vi phạm tiêu chuẩn cộng đồng.

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 vi phạ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ài khoản Paypal của người dùng.

Thiết kế hệ thống

Hình 3.5 Sơ đồ Use Case

STT Tên Actor Mô tả ngắn gọn

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

Bảng 3.2 Danh sách Use Case

1 Đăng nhập Quản trị viên, Người dùng

Quản trị viên đăng nhập bằng tài khoản được cấp, người dùng đăng nhập bằng tài khoản đã đăng ký

2 Đăng xuất Quản trị viên, Người dùng Đăng xuất tài khoản khỏi trang web

3 Đăng ký Người dùng Đăng ký tài khoản để sử dụng trang web

4 Xem danh sách bài viết

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ết

8 Xoá bài viết Người dùng Người dùng xoá bài viết của bản thân

Người dùng Người dùng chỉnh sửa bài viết của bản thâ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ình

Người dùng Người dùng yêu cầu kết nối với người khác

12 Lưu bài viết Người dùng Người dùng lưu bài viết

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

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

Người dùng Người dùng xoá bình luận

Người dùng Người dùng chỉnh sửa bình luận

17 Đánh giá Người dùng Người dùng đánh giá tính hữu ích bình luận/bài viết của bình luận/bài viết

Người dùng Người dùng báo cáo bình luận

19 Thêm bài viết Người dùng Người dùng thêm bài viết

20 Xem thông tin cá nhân

Người dùng Người dùng xem thông tin cá nhân

21 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

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ối

25 Đá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ành cô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

Người dùng Người dùng xem thông báo

29 Xem danh sách giao dịch

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

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ống

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

33 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

34 Xử lý báo cáo bì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ận

35 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áo người dùng

Quản trị viên Quản trị viên xử lý bằng cách chấp nhậ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ười dù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

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êu cầ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

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

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.

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 cập ứng dụng.

Luồng tương tác ngoại lệ

Hệ thống xác thực thông tin đăng nhập không hợp lệ và hiển thị thông báo.

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

Phiên đăng nhập của người dùng là 3 giờ, quá 3 giờ người dùng phải đăng nhập lại để sử dụng ứng dụng.

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ủa tô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ành công Hậu điều kiện Người dùng đăng xuất khỏi trang web thành công.

1 Quản trị viên/Người dùng nhấn vào ảnh đại diện của cá nhân.

2 Người dùng chọn lệnh “Sign out”.

3 Hệ thống đăng xuất tài khoản thành công.

Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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

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ụng dịch vụ từ trang web.

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.

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ết và 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 đăng ký thành công cho người dùng.

Luồng tương tác thay thế

Luồng tương tác ngoại lệ

Hệ thống xác thực thông tin đăng ký không hợp lệ và hiển thị thông báo.

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

Mật khẩu của người dùng phải được mã hoá khi lưu xuống cơ sở dữ liệu

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ên trang web

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

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

2 Người dùng chọn “All topics”

3 Hệ thống hiển thị tất cả bài viết trên trang web Luồng tương tác thay thế

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ủ đề.

Luồng tương tác ngoại lệ

Yêu cầu phi 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ưu

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 xem danh sách bài viết đã lưu thành công.

1 Người dùng nhấn vào ảnh đại diện và chọn “Profile”

2 Người dùng chọn “Saved posts”

3 Hệ thống hiển thị danh sách các bài viết đã lưu Luồng tương tác thay thế

Luồng tương tác ngoại lệ

Yêu cầu phi 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ôi

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 xem danh sách bài viết cá nhân thành công.

1 Người dùng nhấn vào ảnh đại diện và chọn “Profile”

2 Người dùng chọn “My posts”

3 Hệ thống hiển thị danh sách các bài viết đã lưu Luồng tương tác thay thế

Luồng tương tác ngoại lệ

KhôngYêu cầu phi Không 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à danh sách bình luận

Hậu điều kiện Người dùng xem chi tiế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 Người dùng nhấn vào một bài viết

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

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ách bình luận tương ứng Luồng tương tác ngoại lệ

Yêu cầu phi 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ôi

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ế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 xoá ở một bài viết

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

Luồng tương tác thay thế

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ình

4 Hệ thống xoá bài viết và hiển thị lại danh sách bài viết cho use case “Xem danh sách bài viết”

Luồng tương tác ngoại lệ

1 Người dùng đã thực hiện bước 1, 2 ở luồng tương tác chính hoặ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ông thể 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ôi

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 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ết

3 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 Luồng tương tác thay thế

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ình

4 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 Luồng tương tác ngoại lệ

1 Người dùng đã thực hiện bước 1, 2, 3 ở luồng tương tác chính hoặ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 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 cho nhữ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ác cho 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ài viế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ận

2 Hệ thống đánh dấu bình luận và câu trả lời đúng và hiển thị lại cho người dùng Luồng tương tác thay thế

Luồng tương tác ngoại lệ

Yêu cầu phi 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ận

2 Hệ thống đánh dấu bình luận và câu trả lời đúng và hiển thị lại cho người dùng Luồng tương tác thay thế

KhôngLuồng tương tác Không 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ại

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ài viết” thành công, bài viết cần lưu không phải là bài viết của người dùng Hậu điều kiện Người dùng lưu bài viết thành công

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 Luồng tương tác thay thế

Luồng tương tác ngoại lệ

Yêu cầu phi 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.

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ài viế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ông

1 Người dùng nhấn vào biểu tượng lưu bài viết một lần nữa

2 Hệ thống xoá bài viết khỏi danh sách đã lưu Luồng tương tác thay thế

Luồng tương tác ngoại lệ

KhôngYêu cầu phi Không chức năng

3.2.4.14 Use Case Thêm bình luận

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

Tên Use Case Thêm bình luận

Mô tả Là Người dùng, tôi muốn bình luận về bài viết

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ài viết” thành công Hậu điều kiện Người dùng thêm bình luận thành công

1 Người dùng nhập nội dung bình luận và nhấn “Post your answer”

2 Hệ thống thêm bình luận thành công Luồng tương tác thay thế

1 Người dùng nhấn “Reply” một bình luận trong bài viết

2 Người dùng nhâp nội dung bình luận và nhấn “Reply”

3 Hệ thống thêm bình luận thành công Luồng tương tác ngoại lệ

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 cho những người dùng đang xem chi tiết bài viết

3.2.4.15 Use Case Xoá bình luận

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

Tên Use Case Xoá bình luận

Mô tả Là Người dùng, tôi muốn xoá bình luận về bài viết

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ài viết” thành công, người dùng là tác giả của bình luận cần xoá Hậu điều kiện Bình luận và các bình luận trả lời được xoá thành công Các báo cáo bình luận nếu có sẽ bị xoá hoặc cập nhật dữ liệu.

1 Người dùng nhấn vào biểu tượng xoá của bình luận

2 Hệ thống xoá bình luận và các bình luận trả lời.

3 Hệ thống kiểm tra báo cáo bình luận và cập nhật (xoá) nếu có. Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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 cho những người dùng đang xem chi tiết bài viết

3.2.4.16 Use Case Chỉnh sửa bình luận

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

Tên Use Case Chỉnh sửa bình luận

Mô tả Là Người dùng, tôi muốn chỉnh sửa bình luận về bài viết

Tiền điều kiện Người dùng thực hiện use case “Đăng nhập”, “Xem chi tiết bài viết” thành công, người dùng là tác giả bình luận cần chỉnh sửa Hậu điều kiện Bình luận được chỉnh sửa thành công Các báo cáo bình luận nếu có sẽ cập nhật dữ liệu.

1 Người dùng nhấn vào biểu tượng chỉnh sửa của bình luận

2 Người dùng chỉnh sửa nội dung bình luận và nhấn “Confirm”

3 Hệ thống cập nhật bình luận và các báo cáo bình luận nếu có. Luồng tương tác thay thế

Luồng tương tác ngoại lệ

KhôngYêu cầu phi Nội dung bài viết và bình luận được hiển thị thời gian thực cho chức năng những người dùng đang xem chi tiết bài viết

3.2.4.17 Use Case Đánh giá bình luận/bài viết

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

Tên Use Case Đánh giá bình luận/bài viết

Mô tả Là Người dùng, tôi muốn đánh giá tính hữu ích của bình luận/bài viết

Tiền điều kiện Người dùng thực hiện use case “Đăng nhập”, “Xem chi tiết bài viết” thành công Hậu điều kiện Bài viết/bình luận được đánh giá thành công

1 Người dùng nhấn vào biểu tượng cộng/trừ điểm của bài viết/bình luận

2 Hệ thống cập nhật bài viết/bình luận theo đánh giá.

Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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 cho những người dùng đang xem chi tiết bài viết

3.2.4.18 Use Case Báo cáo bình luận

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

Tên Use Case Báo cáo bình luận

Mô tả Là Người dùng, tôi muốn báo cáo những bình luận mang tính tiêu cực cho quản trị viên

Tiền điều kiện Người dùng thực hiện use case “Đăng nhập”, “Xem chi tiết bài viết” thành công, bình luận cần báo cáo là của người khác Hậu điều kiện Báo cáo bình luận được gửi cho quản trị viên

1 Người dùng nhấn vào biểu tượng ba chấm của bình luận và nhấn “Report”

2 Hệ thống ghi nhận báo cáo và gửi cho quản trị viên Luồng tương tác thay thế

KhôngLuồng tương tác Không ngoại lệ

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

3.2.4.19 Use Case Thêm bài viết

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

Tên Use Case Thêm bài viết

Mô tả Là Người dùng, tôi muốn thêm bài viết trên trang web

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 thêm bài viết thành công

1 Người dùng nhấn nút “Create post”, nhập thông tin bài viết và nhấn “Create post”

2 Hệ thống thêm bài viết thành công Luồng tương tác thay thế

Luồng tương tác ngoại lệ

Sau khi thực hiện bước 1 ở luồng tương tác chính, hệ thống xác nhận người dùng cung cấp thiếu thông tin và hiển thị thông báo Yêu cầu phi chức năng

3.2.4.20 Use Case Xem thông tin cá nhân

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

Tên Use Case Xem thông tin cá nhân

Mô tả Là Người dùng, tôi muốn xem thông tin cá nhân của mình

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 xem thông tin cá nhân thành công

1 Người dùng nhấn vào ảnh đại diện của mình và chọn “Profile”

2 Hệ thống hiển thị thông tin người dùng Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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

3.2.4.21 Use Case Chỉnh sửa thông tin cá nhân

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

Tên Use Case Chỉnh sửa thông tin cá nhân

Mô tả Là Người dùng, tôi muốn chỉnh sửa thông tin cá nhân của mình

Tiền điều kiện Người dùng thực hiện use case “Đăng nhập” và “Xem thông tin cá nhân” thành công Hậu điều kiện Người dùng chỉnh sửa thông tin cá nhân thành công

1 Người dùng chỉnh sửa thông tin cá nhân và nhấn “Save”

2 Hệ thống cập nhật thông tin người dùng Luồng tương tác thay thế

Luồng tương tác ngoại lệ

Sau khi thực hiện bước 1 ở luồng tương tác chính, hệ thống xác nhận thông tin cập nhật không hợp lệ và hiển thị thông báo Yêu cầu phi chức năng

3.2.4.22 Use Case Chấp nhận yêu cầu

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

Tên Use Case Chấp nhận yêu cầu

Mô tả Là Người dùng, tôi muốn chấp nhận yêu cầu kết nối từ người dùng khác để cùng giải quyết vấn đề

Tiền điều kiện Người dùng thực hiện use case “Xem danh sách yêu cầu” thành công Hậu điều kiện Người dùng xem chấp nhận yêu cầu kết nối thành công

1 Người dùng nhấn “Accept” một yêu cầu muốn chấp nhận

2 Hệ thống xác nhận người dùng đã chấp nhận yêu cầu và tạo đoạn chat cho người dùng và người yêu cầu Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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

3.2.4.23 Use Case Xem danh sách yêu cầu

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

Tên Use Case Xem danh sách yêu cầu

Mô tả Là Người dùng, tôi muốn xem danh sách yêu cầu kết nối từ những bài viết mà tôi đã treo thưở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 xem danh sách yêu cầu thành công

1 Người dùng nhấn vào ảnh đại diện, nhấn chọn “Profile” và chọn “Help Requests”

2 Hệ thống hiển thị danh sách yêu cầu kết nối Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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

3.2.4.24 Use Case Chấp nhận yêu cầu

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

Tên Use Case Chấp nhận yêu cầu

Mô tả Là Người dùng, tôi muốn chấp nhận yêu cầu kết nối từ người dùng khác để cùng giải quyết vấn đề

Tiền điều kiện Người dùng thực hiện use case “Xem danh sách yêu cầu” thành công Hậu điều kiện Người dùng chấp nhận yêu cầu kết nối thành công, tất cả các yêu cầu kết nối khác rơi vào trạng thái treo Luồng tương tác chính

1 Người dùng nhấn “Accept” một yêu cầu muốn chấp nhận

2 Hệ thống xác nhận người dùng đã chấp nhận yêu cầu và tạo đoạn chat cho người dùng và người yêu cầu Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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

3.2.4.25 Use Case Huỷ yêu cầu kết nối

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

Tên Use Case Huỷ yêu cầu kết nối

Mô tả Là Người dùng, tôi muốn huỷ yêu cầu kết nối vì người kết nối không thể giải quyết vấn đề

Tiền điều kiện Người dùng thực hiện use case “Xem danh sách yêu cầu” thành công Hậu điều kiện Người dùng xem huỷ yêu cầu kết nối thành công, tất cả các yêu cầu kết nối khác trở thái trạng thái chờ Luồng tương tác chính

1 Người dùng nhấn “Cancel” một yêu cầu kết nối đang xử lý

2 Hệ thống xác nhận người dùng đã huỷ yêu cầu kết nối Luồng tương tác thay thế

KhôngLuồng tương tác Không ngoại lệ

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

3.2.4.26 Use Case Đánh dấu kết nối thành công

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

Tên Use Case Đánh dấu kết nối thành công

Mô tả Là Người dùng, tôi muốn đánh dấu yêu cầu kết nối đã thành công và không nhận yêu cầu kết nối mới

Tiền điều kiện Người dùng thực hiện use case “Chấp nhận yêu cầu” thành công Hậu điều kiện Người dùng đánh dấu kết nối thành công, giao dịch giữa người dùng và người kết nối được hoàn thành, người kết nối nhận phần thưởng từ bài viết Luồng tương tác chính

1 Người dùng nhấn vào biểu tượng thành công của yêu cầu kết nối đang xử lý

2 Hệ thống xác nhận kết nối thành công và hoàn thành giao dịch Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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

3.2.4.27 Use Case Xem danh sách cuộc trò chuyện

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

Tên Use Case Xem danh sách cuộc trò chuyện

Mô tả Là Người dùng, tôi muốn xem danh sách cuộc trò chuyện

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 xem danh sách cuộc trò chuyện thành công

1 Người dùng nhấn vào ảnh đại diện của mình, chọn “Profile” và chọn “Messages”

2 Hệ thống hiển thị danh sách đoạn chat của người dùng Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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

Tin nhắn được hiển thị thời gian thực tới người dùng

3.2.4.28 Use Case Nhắn tin và kết nối video

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

Tên Use Case Nhắn tin và kết nối video

Mô tả Là Người dùng, tôi muốn nhắn tin và kết nối video với người giúp đỡ

Tiền điều kiện Người dùng thực hiện use case “Xem danh sách cuộc trò chuyện” thành công Hậu điều kiện Người dùng nhắn tin và gửi yêu cầu kết nối video thành công Luồng tương tác chính

1 Người dùng nhấn vào chi tiết của đoạn chat, nhắn tin và nhấn biểu tượng gọi điện trong đoạn chat

2 Hệ thống gửi thông báo cho người đang kết nối, cho phép tham gia cuộc trò chuyện video Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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

Tin nhắn được hiển thị thời gian thực tới người dùng

3.2.4.29 Use Case Xem thông báo

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

Tên Use Case Xem thông báo

Mô tả Là Người dùng, tôi muốn xem danh sách thông báo của mình

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 xem thông báo thành công

1 Người dùng nhấn vào ảnh đại diện của mình, chọn “Profile” và chọn “Notifications”

2 Hệ thống hiển thị danh sách thông báo của người dùng Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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

Thông báo được hiển thị thời gian thực tới người dùng

3.2.4.30 Use Case Xem danh sách giao dịch

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

Tên Use Case Xem danh sách giao dịch

Mô tả Là Người dùng, tôi muốn xem danh sách giao dịch của mình

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 xem danh sách giao dịch thành công

1 Người dùng nhấn vào ảnh đại diện của mình, chọn “Profile” và chọn “Transactions”

2 Hệ thống hiển thị danh sách giao dịch của người dùng Luồng tương tác thay thế

Luồng tương tác ngoại lệ

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

3.2.4.31 Use Case Báo cáo người dùng

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

Tên Use Case Báo cáo người dùng

Mô tả Là Người dùng, tôi muốn báo cáo người dùng gian lận sau khi kết nối

Thiết kế dữ liệu

Hình 3.6 Sơ đồ lớp của hệ thống

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

STT Tên bảng dữ liệu Diễn giải

1 User Lưu trữ thông tin người dùng

2 Tag Lưu trữ thông tin thẻ

3 Post Lưu trữ thông tin bài viết

4 Comment Lưu trữ thông tin bình luận

5 Vote Lưu trữ thông tin bình chọn

6 Report Lưu trữ thông tin báo cáo

7 ConnectRequest Lưu trữ thông tin yêu cầu kết nối

8 Rating Lưu trữ thông tin đánh giá

9 Withdraw Lưu trữ thông tin yêu cầu rút tiền

10 Notification Lưu trữ thông tin thông báo

11 Transaction Lưu trữ thông tin giao dịch

3.3.3 Mô tả chi tiết bảng dữ liệu

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

STT Tên thuộc tính Kiểu dữ liệu

1 DisplayName String Khác rỗng Tên hiển thị người dùng

2 Avatar Object Ảnh đại diện người dùng

3 Description String Thông tin giới thiệu của người dùng

4 Favorites Array Khác rỗng Mảng tham chiếu các thẻ yêu thích của người dùng

5 Email String Duy nhất, khác rỗng

6 Password String Khác rỗng Mật khẩu đăng nhập của người dùng đã mã hoá

7 Balance Number Lớn hơn hoặc bằng 0

Số dư trong hệ thống của người dùng

8 SavedPosts Array Mảng tham chiếu các bài viết người dùng đã lưu

9 Role String Khác rỗng Vai trò của người dùng

10 Status String Khác rỗng Trạng thái người dùng

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

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 Name String Duy nhất, khác rỗng

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

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 Title String Khác rỗng Tiêu đề bài viết

2 Author ObjectId Khác rỗng Tác giả bài viết

3 Description String Khác rỗng Nội dung bài viết

4 Bounty Number Tiền thưởng cho bài viết nếu có

5 CreatedAt Date Thời gian tạo bài viết

6 UpdatedAt Date Thời gian cập nhật gần nhất của bài viết

7 Tags Array Ít nhất 1 phần tử Mảng tham chiếu các thẻ bài viết liên quan

8 Topic String Khác rỗng Chủ đề bài viết

9 IsAnswered Boolean Cho biết bài viết đã có câu trả lời hay chưa

10 Views Number Số lượt xem bài viết

11 Score Number Số điểm của bài viết

12 Slug String Duy nhất Thuộc tính phân biệt bài viết bên cạnh Id.

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

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 Description String Khác rỗng Nội dung bình luận

2 Author ObjectId Khác rỗng Tác giả bình luận

3 Parent ObjectId Tham chiếu đến bình luận cha nếu có

4 Post ObjectId Khác rỗng Bài viết chứa bình luận

5 CreatedAt Date Thời gian tạo bình luận

6 UpdatedAt Date Thời gian cập nhật gần nhất của bình luận

7 Score Number Điểm của bình luận

8 IsAccepted Boolean Cho biết bình luận đã được chấp nhận bởi tác giả bài viết hay chưa

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

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 User ObjectId Duy nhất, khác rỗng

2 ParentType String Khác rỗng Loại đối tượng bình chọn (bình luận hoặc bài viết)

3 Parent ObjectId Đối tượng bình chọn

4 VoteType Number 0 hoặc 1 hoặc -1 Loại bình chọn

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

Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 Accuser ObjectId Khác rỗng Người báo cáo

2 Comment ObjectId Khác rỗng Bình luận bị báo cáo

3 Description String Nội dung bình luận

4 Post ObjectId Khác rỗng Bài viết chứa bình luận

5 IsReviewed Boolean Cho biết quản trị viên đã xử lý báo cáo hay chưa

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

STT Tên thuộc tính Kiểu dữ liệu

1 Requester ObjectId Khác rỗng Người yêu cầu kết nối

2 Receiver ObjectId Khác rỗng Người được yêu cầu kết nối

3 Post ObjectId Khác rỗng Bài viết cần xử lý

4 Message String Tin nhắn từ người gửi yêu cầu

5 Status String Khác rỗng Trạng thái của yêu cầu

6 RatingScore Number Điểm đánh giá khi kết nối thành công

String Chi tiết đánh giá khi kết nối thành công

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

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 Score Number Trong đoạn từ

2 Description String Chi tiết đánh giá

3 CreatedAt Date Thời gian đánh giá

4 UpdatedAt Date Thời gian cập nhật gần nhất của đánh giá

5 Reviewer ObjectId Khác rỗng Người đánh giá

6 Reviewee ObjectId Khác rỗng Người được đánh giá

7 Request ObjectId Khác rỗng Kết nối mà đánh giá thuộc về

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

Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 Requester ObjectId Khác rỗng Người yêu cầu rút tiền

2 PaypalEmail String Khác rỗng Địa chỉ email của tài khoản Paypal nhận tiền

3 Amount Number Lớn hơn 0 Số tiền cần rút

4 Status String Trạng thái của yêu cầu

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

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 Sender ObjectId Khác rỗng Người tạo thông báo

2 Receiver ObjectId Khác rỗng Người nhận thông báo

3 Type String Khác rỗng Loại thông báo

4 HasSeen Boolean Cho biết thông báo đã được xem hay chưa

5 Message String Khác rỗng Tin nhắn cho thông báo

6 ExtraData Object Dữ liệu kèm theo trong thông báo

7 CreatedAt Date Thời gian tạo thông báo

8 UpdatedAt Date Thời gian cập nhật gần nhất của thông báo

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

Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải

1 CreatedAt Date Thời điểm giao dịch được tạo

2 UpdatedAt Date Thời điểm cập nhật gần nhất của giao dịch

3 User ObjectId Khác rỗng Người tạo giao dịch

4 Amount Number Lớn hơn 0 Số tiền giao dịch

5 Message String Khác rỗng Tin nhắn của giao dịch

6 Type String Khác rỗng Loại giao dịch

7 Withdraw ObjectId Tham chiếu tới yêu cầu rút tiền nếu có

8 Post ObjectId Tham chiếu tới bài viết nếu có

9 Status String Trạng thái của giao dịch

XÂY DỰNG ỨNG DỤNG

Danh sách màn hình

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

T Tên màn hình Ý nghĩa/Ghi chú

1 Đăng ký Tạo tài khoản để truy cập vào hệ thống

2 Đăng nhập Đăng nhập vào hệ thống

3 Trang chủ Xem danh sách bài viết

4 Tạo bài viết Tạo bài viết mới

5 Chỉnh sửa bài viết Chỉnh sửa nội dung bài viết

6 Chi tiết bài viết Xem chi tiết bài viết và bình luận

7 Quản lý thông tin cá nhân Xem và chỉnh sửa thông tin cá nhân

8 Thông báo Xem danh sách thông báo

9 Tin nhắn Nhắn tin trao đổi với các thành viên khác

10 Gọi video Trao đổi qua video và chia sẻ màn hình

11 Chia sẻ code Trao đổi qua code editor thời gian thực

12 Bài viết của tôi Xem danh sách bài viết của bản thân

13 Bài viết đã lưu Xem danh sách bài viết đã lưu

14 Giao dịch Xem danh sách giao dịch

15 Nạp tiền Nạp tiền vào tài khoản

16 Yêu cầu rút tiền Tạo yêu cầu rút tiền ra khỏi tài khoản

17 Yêu cầu trợ giúp Xem danh sách các yêu cầu trợ giúp

18 Danh sách thẻ (tag) Xem và quản lý danh sách thẻ (tag)

19 Tạo và chỉnh sửa thẻ (tag) Tạo mới và chỉnh sửa thẻ (tag)

20 Quản lý thành viên Quản lý danh sách thành viên

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

22 Quản lý yêu cầu rút tiền Quản lý danh sách yêu cầu rút tiền

Chi tiết màn hình

Hình 4.7 Màn hình "Đăng nhập"

‒ Ở màn hình đăng nhập, người dùng có thể nhập Email và Mật khẩu để đăng nhập vào hệ thống.

‒ Người dùng có thể nhấn “Sign Up” để đăng ký trong trường hợp chưa có tài khoản.

Hình 4.8 Màn hình “Đăng ký”

‒ Ở màn hình đăng ký, người dùng có thể đăng ký để truy cập vào các chức năng của trang web.

‒ Các thông tin bao gồm: Họ và tên, email và mật khẩu.

Hình 4.9 Màn hình “Trang chủ”

‒ Ở màn hình trang chủ, người dùng có thể xem danh sách các bài viết trên trang web.

‒ Người dùng có thể chọn xem theo danh mục như: Thảo luận, hỏi đáp lỗi và tin tức công nghệ mới.

‒ Người dùng cũng có thể lọc bài viết theo các tiêu chí như: Bài viết có thưởng, bài viết đã được giải quyết và sắp xếp thứ tự các bài viết mới nhất.

‒ Mỗi bài viết có các thông tin cơ bản như: Người đăng, thời gian đăng, tiêu đề, các thẻ của bài viết, phần thưởng, phân loại, …

‒ Đối với bài viết của bản thân, người dùng có thể chỉnh sửa và xóa bài viết.

‒ Đối với bài viết hỏi đáp của người khác và chưa được trả lời, người dùng có thể gửi yêu cầu giúp đỡ đến chủ bài viết.

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

‒ Ở màn hình này, người dùng có thể nhập các thông tin cần thiết của bài viết và bấm nút “Create post” để tạo bài viết mới.

‒ Trường dữ liệu “Bounty” chỉ hiển thị đối với bài viết có chủ đề là “Bug”.

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

‒ Màn hình hiển thị các thông tin của bài viết đã chọn.

‒ Người dùng có thể thay đổi thông tin và bấm nút “Edit post” để cập nhật thông tin của bài viết.

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

‒ Màn hình hiển thị các thông tin của bài viết như: Tiêu đề, nội dung, người đăng, thời gian đăng, số lượng vote.

‒ Phía dưới thông tin bài viết là danh sách bình luận và người dùng có thể gửi bình luận cho bài viết.

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

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

‒ Ở màn hình này người dùng có thể cập nhật các thông tin cá nhân như: Ảnh đại diện, họ và tên, mô tả về bản thân và mật khẩu Thông tin mô tả bản thân là trường dữ liệu không bắt buộc khi cập nhật thông tin cá nhân.

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

‒ Màn hình này hiển thị toàn bộ danh sách thông báo của người dùng.

‒ Tuỳ thuộc vào loại thông báo, người dùng sẽ được điều hướng đến các màn hình đích tương ứng khi nhấn vào thông báo như video call, bình luận bài viết,…

Hình 4.15 Màn hình “Tin nhắn”

‒ Ở màn hình này người dùng có thể nhắn tin trao đổi với người dùng khác trên trang web.

‒ Người dùng có thể tạo cuộc gọi cũng như tạo phiên chia sẻ code thời gian thực với người dùng khác.

Hình 4.16 Màn hình “Gọi video”

‒ Người dùng có thể giao tiếp, trao đổi với người dùng khác thông qua trò chuyện

‒ Người dùng cũng có thể chia sẻ video và chia sẻ màn hình.

Hình 4.17 Màn hình “Chia sẻ code”

‒ Ở màn hình này sẽ có một code editor thời gian thực để nhiều người dùng có thể cùng lúc chỉnh sửa và thảo luận trên code đó.

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

‒ Màn hình này hiển thị danh sách các bài viết do người dùng tạo.

‒ Người dùng có thể xem lại hoặc sửa, xóa các bài viết này.

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

‒ Màn hình này hiển thị danh sách các bài viết đã được lưu.

‒ Người dùng có thể bấm vào từng bài viết để xem chi tiết bài viết hoặc xóa bài viết khỏi danh sách.

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

‒ Màn hình hiển thị số dư hiện tại của tài khoản và danh sách các giao dịch.

‒ Có 4 loại giao dịch bao gồm: Nạp tiền, rút tiền, chuyển tiền đến người dùng khác,nhận tiền từ người dùng khác.

‒ Người dùng có thể nạp tiền bằng cách bấm vào nút “Deposit”, sau đó sẽ hiển thị màn hình nạp tiền.

‒ Người dùng có thể tạo yêu cầu rút tiền bằng cách bấm vào nút “Request Withdraw”.

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

‒ Người dùng có thể chọn số tiền muốn nạp với các mức như: 50.000đ, 100.000đ, 200.00đ, 500.000đ.

‒ Sau đó người dùng thực hiện chuyển tiền bằng cách bấm vào nút “Paypal”, một của cửa sổ chuyển tiền của Paypal hiện lên, người dùng thực hiện chuyển tiền vào tài khoản doanh nghiệp của trang web.

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

‒ Ở màn hình này, người dùng cần nhập email tài khoản Paypal và số tiền muốn rút rồi bấm nút “Confirm” gửi yêu cầu rút tiền đến quản trị viên.

‒ Sau khi quản trị viên duyệt yêu cầu này tiền sẽ được tự động chuyển vào tài khoản Paypal của người dùng.

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

‒ Màn hình này hiển thị danh sách yêu cầu giúp đỡ từ nhũng người dùng khác với các bài viết đã đăng.

‒ Người dùng có thể bấm “Accept” để xác nhận trợ giúp từ người dùng khác Sau khi xác nhận, các yêu cầu giúp đỡ từ những người dùng khác với bài đăng đó sẽ chuyển trạng thái sang “Blocking” và không được xác nhận.

‒ Sau khi liên hệ giải quyết vấn đề, người dùng có thể bấm hoành thành hoặc hủy Nếu hủy thì các yêu cầu giúp đỡ đang có trạng thái “Blocking” sẽ mở lại và người dùng có thể tiếp tục liên hệ với người giúp đỡ khác Ngược lại nếu hoàn thành, tiền thưởng của bài viết sẽ được chuyển cho người giúp.

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

‒ Màn hình này hiển thị danh sách thẻ (tag), người dùng có thể bấm vào nút “Create tag” để mở màn hình tạo thẻ mới.

‒ Người dùng có thể bấm vào nút có biểu tượng cây bút để mở màn hình chỉnh sửa thẻ hoặc nút có biểu tượng dấu X để xóa thẻ.

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

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

‒ Ở màn hình này người dùng có thể nhập tên thẻ để tạo thẻ.

‒ Người dùng cũng có thể chỉnh sửa và xóa thẻ.

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

‒ Màn hình này hiển thị danh sách thành viên với các thông tin như: Id, ảnh đại diện, tên, email và trạng thái.

‒ Đối với mỗi người dùng, quản trị viên có thể thay đổi trạng thái từ “Active” sang

“Banned” hoặc ngược lại Đối với những người dùng đã bị ban sẽ không thể đăng nhập vào hệ thống.

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

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

‒ Màn hình này hiển thị danh sách các báo cáo bình luận không chuẩn mực.

‒ Quản trị viên có thể xem chi tiết bình luận và xem xét xóa hoặc giữ bình luận đó.

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

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

‒ Màn hình này hiển thị danh sách các yêu cầu rút tiền của người dùng bao gồm các thông tin như: Thời gian tạo yêu cầu, người tạo yêu cầu, email Paypal nhận tiền, số tiền muốn rút, tình trạng xử lý.

‒ Quản trị viên có thể xem xét và xác nhận yêu cầu Sau khi xác nhận, tiền sẽ được tự động chuyển từ tài khoản doanh nghiệp của trang web đến tài khoản Paypal tương ứng với email của người dùng.

‒ Hoàn thành được các chức năng cần thiết theo kế hoạch nhóm đã đề ra trước đó. Ngoài ra, nhóm cũng thực hiện thêm tính năng thông báo thời gian thực cho chức năng bình luận, cho phép người dùng tương tác với những người dùng khác một cách dễ dàng, nhanh chóng.

‒ Giao diện thân thiện, dễ sử dụng Một số chức năng cho phép người dùng sử dụng mà không cần đăng nhập giúp người dùng dễ dàng tìm kiếm giải pháp cho vấn đề của mình.

‒ Trang web chưa hỗ trợ responsive để phù hợp với nhiều kích thước màn hình.

‒ Chưa hỗ trợ record video để các quản trị viên có thể dễ dàng xem xét các khiếu nại của người dùng.

‒ Hỗ trợ responsive để người dùng có thể dễ dàng truy cập từ nhiều loại thiết bị khác nhau.

‒ Hỗ trợ record và quản lý các video lịch sử trao đổi, giao tiếp giữa các người dùng để các quản trị viên dễ dàng xem xét và giải quyết khiếu nại.

‒ Xây hệ thống gợi ý các vấn đề và bài viết tương tự cho người dùng, dựa trên lịch sử giúp đỡ của người dùng để gợi ý cho người dùng về vấn đề người đó có thể giải quyết.

‒ Xây dựng chức năng điều khiển màn hình từ xa để người dùng có thể dễ dàng hỗ trợ nhau giải quyết vấn đề.

‒ Tối ưu hóa giao diện người dùng và hiệu suất của trang web Khi các chức năng chính của trang web đã được đảm bảo, giao diện và tốc độ xử lý của trang web sẽ là một yếu tố quan trọng để thu hút người dùng.

Ngày đăng: 15/05/2024, 09:29

HÌNH ẢNH LIÊN QUAN

Hình 3.5. Sơ đồ Use Case - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 3.5. Sơ đồ Use Case (Trang 30)
Bảng 3.2. Danh sách Use Case - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Bảng 3.2. Danh sách Use Case (Trang 31)
Bảng 3.21. Đặc tả Use Case Thêm bài viết - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Bảng 3.21. Đặc tả Use Case Thêm bài viết (Trang 45)
Bảng 3.31. Đặc tả Use Case Xem thông báo - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Bảng 3.31. Đặc tả Use Case Xem thông báo (Trang 51)
Bảng 3.32. Đặc tả Use Case Xem danh sách giao dịch - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Bảng 3.32. Đặc tả Use Case Xem danh sách giao dịch (Trang 52)
Bảng 3.42. Đặc tả Use Case Xem danh sách thẻ - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Bảng 3.42. Đặc tả Use Case Xem danh sách thẻ (Trang 57)
Hình 3.6. Sơ đồ lớp của hệ thống - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 3.6. Sơ đồ lớp của hệ thống (Trang 62)
3.3.3.10. Bảng Notification - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
3.3.3.10. Bảng Notification (Trang 67)
Bảng 4.60. Danh sách màn hình - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Bảng 4.60. Danh sách màn hình (Trang 69)
Hình 4.8. Màn hình “Đăng ký” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.8. Màn hình “Đăng ký” (Trang 70)
Hình 4.7. Màn hình "Đăng nhập" - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.7. Màn hình "Đăng nhập" (Trang 70)
Hình 4.9. Màn hình “Trang chủ” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.9. Màn hình “Trang chủ” (Trang 71)
Hình 4.10. Màn hình “Tạo bài viết” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.10. Màn hình “Tạo bài viết” (Trang 72)
Hình 4.11. Màn hình “Chỉnh sửa bài viết” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.11. Màn hình “Chỉnh sửa bài viết” (Trang 72)
Hình 4.12. Màn hình “Chi tiết bài viết” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.12. Màn hình “Chi tiết bài viết” (Trang 73)
Hình 4.13. Màn hình “Quản lý thông tin cá nhân” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.13. Màn hình “Quản lý thông tin cá nhân” (Trang 74)
Hình 4.14. Màn hình “Thông báo” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.14. Màn hình “Thông báo” (Trang 75)
Hình 4.16. Màn hình “Gọi video” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.16. Màn hình “Gọi video” (Trang 76)
Hình 4.15. Màn hình “Tin nhắn” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.15. Màn hình “Tin nhắn” (Trang 76)
Hình 4.17. Màn hình “Chia sẻ code” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.17. Màn hình “Chia sẻ code” (Trang 78)
Hình 4.18. Màn hình “Bài viết của tôi” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.18. Màn hình “Bài viết của tôi” (Trang 78)
Hình 4.19. Màn hình “Bài viết đã lưu” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.19. Màn hình “Bài viết đã lưu” (Trang 79)
Hình 4.20. Màn hình “Giao dịch” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.20. Màn hình “Giao dịch” (Trang 79)
Hình 4.21. Màn hình “Nạp tiền” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.21. Màn hình “Nạp tiền” (Trang 80)
Hình 4.24. Màn hình “Danh sách thẻ (tag)” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.24. Màn hình “Danh sách thẻ (tag)” (Trang 82)
Hình 4.25. Màn hình “Tạo và chỉnh sửa thẻ (tag)” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.25. Màn hình “Tạo và chỉnh sửa thẻ (tag)” (Trang 83)
Hình 4.26. Màn hình “Quản lý thành viên” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.26. Màn hình “Quản lý thành viên” (Trang 84)
Hình 4.27. Màn hình “Quản lý báo cáo bình luận” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.27. Màn hình “Quản lý báo cáo bình luận” (Trang 84)
Hình 4.28. Màn hình “Quản lý yêu cầu rút tiền” - đồ án 2 xây dựng trang web hỏi đáp cho lập trình viên
Hình 4.28. Màn hình “Quản lý yêu cầu rút tiền” (Trang 86)

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w