Xây dựng trang web hỏi đáp lập trình viên cho phép kết nối và giải quyết vấn đề

MỤC LỤC

GIỚI THIỆU ĐỀ TÀI 1.1. Lý do chọn đề tài

  • Khảo sát thực tế và giải pháp
    • React Query
      • NodeJs
        • NestJS
          • MongoDB
            • Mongoose

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

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

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

              PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 3.1. Phân tích yêu cầu

              Giao dịch

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

              Thiết kế hệ thống 1. Sơ đồ Use Case

              • Đặc tả Use Case

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

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

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

                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 Luồng tương tác. Tiền điều kiện Người dùng thực hiện use case “Xem danh sách giao dịch” thành công, giao dịch với người muốn báo cáo phải chưa hoàn thành Hậu điều kiện Người dùng báo cáo người dùng thành công. Sau khi thực hiện bước 1, 2 ở luồng tương tác chính, hệ thống xác nhận số dư tài khoản của người dùng không đủ để thanh toán và hiển thị thông báo.

                Tiền điều kiện Quản trị viên thực hiện use case “Đăng nhập” thành công Hậu điều kiện Quản trị viên xem danh sách báo cáo bình luận thành công Luồng tương tác. Tiền điều kiện Quản trị viên thực hiện use case “Đăng nhập” thành công Hậu điều kiện Quản trị viên xem danh sách báo cáo người dùng. Tiền điều kiện Quản trị viên thực hiện use case “Đăng nhập” thành công Hậu điều kiện Quản trị viên xem danh sách người dùng thành công Luồng tương tác.

                Tiền điều kiện Quản trị viên thực hiện use case “Đăng nhập” thành công Hậu điều kiện Quản trị viên xem danh sách yêu cầu rút tiền thành công Luồng tương tác. Sau khi thực hiện bước 1 của luồng tương tác chính, hệ thống xác nhận thông tin thẻ nhận tiền không hợp lệ và hiển thị thông báo Yêu cầu phi.

                Bảng 3.2. Danh sách Use Case
                Bảng 3.2. Danh sách Use Case

                Thiết kế dữ liệu 1. Sơ đồ lớp

                • Mô tả chi tiết bảng dữ liệu 1. Bảng User

                  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.

                  3.3.3.10. Bảng Notification
                  3.3.3.10. Bảng Notification

                  XÂY DỰNG ỨNG DỤNG 4.1. Danh sách màn hình

                  Chi tiết màn hình 1. Đăng nhập

                    ‒ 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, …. ‒ Ở 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.

                    ‒ Ở 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. ‒ 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,…. ‒ Ở 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 đó.

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

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

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

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