Bối cảnh và vấn đề nghiên cứu

Trong môi trường đại học, nhu cầu trao đổi, nhượng lại và mua bán các vật phẩm học tập cũng như đồ dùng sinh hoạt đã qua sử dụng giữa các sinh viên diễn ra rất phổ biến. Tại Trường Đại học Bách Khoa – ĐHQG TP.HCM (HCMUT), sinh viên thường sử dụng các hội nhóm trên mạng xã hội (tiêu biểu là các nhóm cộng đồng trên Facebook) để đăng bài tìm kiếm hoặc bán lại các món đồ không còn nhu cầu sử dụng. Tuy nhiên, nhóm tác giả (nhóm Bình Minh) đã chỉ ra ba bất cập lớn trong phương thức giao dịch hiện tại:

  1. Hiện tượng trôi bài đăng: Vào các khoảng thời gian cao điểm trong năm học, số lượng bài viết lớn khiến các bài đăng bán hoặc cần mua nhanh chóng bị trôi, làm người dùng tốn nhiều thời gian tìm kiếm, kiểm tra và theo dõi.
  2. Thiếu cơ chế xác thực và bảo đảm uy tín: Mối quan hệ giữa bên mua và bên bán trên mạng xã hội không có cơ chế bảo chứng cụ thể, dẫn đến nguy cơ gian lận, lừa đảo hoặc sản phẩm thực tế nhận được không đúng với mô tả.
  3. Giới hạn kỹ thuật từ nền tảng mạng xã hội: Chính sách giới hạn số lượng bài đăng (ví dụ chính sách đăng tối đa 20 bài viết mỗi ngày trên Facebook group) khiến nhiều nội dung bị hệ thống tự động gắn nhãn thư rác (spam) và xóa bỏ, làm gián đoạn việc tiếp cận thông tin.

Xuất phát từ thực trạng trên, đề tài "Thiết kế ứng dụng trao đổi vật phẩm – BKPass" được thực hiện với các mục tiêu và phạm vi cụ thể:

  • Mục tiêu nghiên cứu và phát triển: Xây dựng một ứng dụng web hoàn chỉnh mang tên BKPass, cung cấp các chức năng cốt lõi cho phép sinh viên tạo tài khoản, đăng tin bán hàng, tìm kiếm sản phẩm theo tên và phân loại (tag), theo dõi lịch sử giao dịch và đánh giá mức độ uy tín của người bán.
  • Đối tượng nghiên cứu: Quy trình trao đổi, mua bán vật phẩm nội bộ và các yêu cầu nghiệp vụ phần mềm phục vụ cộng đồng sinh viên.
  • Phạm vi áp dụng: Hệ thống được thiết kế hướng tới đối tượng người dùng chính là sinh viên các khóa thuộc Trường Đại học Bách Khoa – ĐHQG TP.HCM. Báo cáo đồ án được thực hiện vào tháng 09/2022 thuộc niên khóa 2022-2023, với dung lượng tài liệu tổng cộng 70 trang.

Cơ sở lý thuyết và phương pháp

Đồ án ứng dụng quy trình phân tích và thiết kế hệ thống theo tiêu chuẩn công nghệ phần mềm, bao gồm các phương pháp và mô hình lý thuyết sau:

  • Mô hình hóa yêu cầu và hành vi người dùng: Sử dụng biểu đồ ca sử dụng (Use Case Diagram), kịch bản chi tiết (Use Case Scenario) và biểu đồ luồng màn hình (Screen Flow Diagram) để mô tả toàn bộ tương tác giữa các tác nhân (Actor: Khách, Người dùng chung, Người bán, Người mua) với hệ thống.
  • Mô hình hóa cấu trúc tĩnh: Sử dụng biểu đồ lớp (Class Diagram) để phân rã cấu trúc hướng đối tượng cho toàn bộ ứng dụng, phân định các lớp giao diện (View), các lớp điều khiển (itemController, itemsController, userController, usersController) và các mô hình dữ liệu.
  • Phương pháp phát triển và phân công công việc: Nhóm 5 thành viên thực hiện phân chia nhiệm vụ theo từng module nghiệp vụ và thành phần công nghệ:
Thành viên thực hiện MSSV Vai trò và nhiệm vụ chi tiết Tỷ lệ hoàn thành
Kha Sang 2010576 Thiết kế giao diện Đăng, sửa, gỡ thông tin mặt hàng; Đóng gói hệ thống với Docker; Xây dựng API phần Update Item, Login, Register. 100%
Phạm Minh Duy 1912916 Thiết kế, kết nối cơ sở dữ liệu; Xây dựng Backend (ngoại trừ Login, Register, Update Item); Thiết kế UI phần kết quả tìm kiếm theo tên và tag. 100%
Nguyễn Vĩnh Sang 2011970 Thiết kế cơ sở dữ liệu cho Item; Hiện thực giao diện các component; Deploy ứng dụng lên server; Hiện thực chức năng Đánh giá người bán. 100%
Bùi Hoàng Phi 2011799 Hiện thực chức năng quản lý đơn mua; Lịch sử mặt hàng đã mua và đã bán. 100%
Trần Minh Tân 2012018 Hiện thực giao diện Login, Register; Tạo tài khoản và Tra cứu thông tin người dùng; Soạn thảo báo cáo kỹ thuật. 100%

Thiết kế và triển khai hệ thống

1. Kiến trúc hệ thống

Hệ thống BKPass được thiết kế theo mô hình MVC (Model - View - Controller) kết hợp cơ chế Client-Side Rendering (CSR):

  • Phía Client: Đóng vai trò là thành phần View, tiếp nhận dữ liệu từ Controller và Model để hiển thị trực tiếp trên trình duyệt web của người dùng. Giao tiếp giữa View và Model có thể áp dụng mô hình Observer pattern.
  • Phía Server: Chứa toàn bộ các thành phần Controller (xử lý logic, tiếp nhận và điều hướng request) và Model (quản lý kết nối cơ sở dữ liệu, kiểm soát business logic và các ràng buộc dữ liệu).

2. Công nghệ phát triển (Tech Stack)

  • Giao diện người dùng (Front-end): Sử dụng ReactJS theo mô hình ứng dụng đơn trang (Single Page Application - SPA) giúp tải trang linh hoạt và chuyển đổi router nhanh. Định dạng giao diện sử dụng TailwindCSS nhằm tối ưu hóa tính tương thích giao diện đáp ứng (responsive design).
  • Xử lý phía máy chủ (Back-end): Xây dựng trên môi trường thực thi NodeJS (V8 JavaScript Engine) với cơ chế non-blocking I/O bất đồng bộ. Sử dụng framework ExpressJS để thiết kế hệ thống RESTful API kết nối client và server.
  • Cơ sở dữ liệu: Sử dụng cơ sở dữ liệu phi quan hệ MongoDB. Dữ liệu được lưu trữ dưới định dạng JSON linh động, cho phép tối ưu tốc độ đọc/ghi (CRUD) và phù hợp với mô hình dữ liệu của ứng dụng.
  • Quản lý mã nguồn và triển khai: Quản lý phiên bản phân tán qua Git và GitHub; đóng gói ứng dụng bằng Docker Container và triển khai trên máy chủ Web Hosting thông qua Docker Engine.

3. Yêu cầu phi chức năng (Non-functional Requirements)

Hệ thống xác định 6 nhóm chỉ số phi chức năng cần đáp ứng:

  • Tính khả dụng (Usability): Người dùng có thể làm quen sau 15 phút hướng dẫn; giao diện tương thích từ thiết bị di động đến màn hình 4K; các danh mục chính hiển thị ngay trong tầm nhìn đầu tiên không cần cuộn trang; tương thích trên các trình duyệt hiện đại (Chrome 43+).
  • Tính bảo mật (Security): Mật khẩu được mã hóa nhiều lớp bằng thuật toán SHA256; yêu cầu mật khẩu tối thiểu 8 ký tự gồm chữ, số và ký tự đặc biệt; khóa đăng nhập 5 phút nếu nhập sai liên tiếp 5 lần trong vòng 30 giây.
  • Độ tin cậy (Reliability): Thời gian gián đoạn hệ thống (downtime) không vượt quá 1 giờ mỗi tháng; có khả năng xử lý khoảng 1.000 giao dịch/giờ với tỷ lệ thành công trên 90%.
  • Hiệu năng (Performance): Thời gian chuyển trang không quá 2 giây; thời gian phản hồi của 80% giao dịch dài không quá 1.500 ms; thời gian tải component và định tuyến từ 1 đến 2 giây.
  • Tính sẵn sàng (Availability): Duy trì hoạt động ổn định 24/7.
  • Khả năng mở rộng (Extensibility): Hỗ trợ mở rộng module chức năng mới mà không làm thay đổi kiến trúc hiện có.

Nội dung chính theo từng chương

Chương 1: Members and Tasks

Liệt kê thành viên nhóm Bình Minh, người hướng dẫn khoa học (GVHD: Mai Đức Trung) và bảng phân công trách nhiệm chi tiết cho từng cá nhân trong dự án đối với các module chức năng và công đoạn kỹ thuật.

Chương 2: Overview

Trình bày tổng quan về dự án BKPass, bối cảnh ra đời, các khó khăn thực tế khi sinh viên trao đổi hàng qua mạng xã hội. Xác định các bên liên quan (Stakeholders: Người mua, Người bán, Người dùng kiêm cả hai vai trò) và danh sách các kịch bản người dùng (User Stories).

Chương 3: Requirements

Quy định danh mục các yêu cầu chức năng (Functional Requirements) và 6 nhóm yêu cầu phi chức năng (Non-functional Requirements) làm căn cứ kỹ thuật cho toàn bộ giai đoạn thiết kế và kiểm thử.

Chương 4: Use-case diagram and Use-case scenario

Đặc tả chi tiết các biểu đồ ca sử dụng tổng quan và phân rã kèm kịch bản luồng sự kiện (Normal flow, Alternative flow, Exception flow, Tiền điều kiện, Hậu điều kiện) cho 5 nhóm chức năng chính:

  • 4.1 Tìm kiếm theo tag, theo tên: Kịch bản cho phép người dùng nhập từ khóa tìm kiếm tên sản phẩm hoặc chọn nhãn (tag) phân loại, hệ thống hiển thị danh sách 10 sản phẩm mới nhất kèm phân trang.
  • 4.2 Thao tác với mặt hàng: Các ca sử dụng bao gồm Thêm mặt hàng mới (nhập tên, danh mục, tình trạng, giá, địa chỉ, hình ảnh), Sửa thông tin mặt hàng và Xóa mặt hàng đã đăng.
  • 4.3 Tạo tài khoản và Tra thông tin người dùng: Cho phép khách đăng ký tài khoản mới và tìm kiếm hồ sơ người dùng khác dựa trên từ khóa hoặc bộ lọc người bán.
  • 4.4 Nhận xét về người bán: Xem hồ sơ cá nhân và danh sách đánh giá của người bán; gửi đánh giá mới bao gồm nội dung nhận xét và thang điểm chấm sao (tối đa 5 sao).
  • 4.5 Quản lý mặt hàng đã mua, bán: Xem danh sách 10 đơn hàng đã mua gần nhất và danh sách các sản phẩm đã bán kèm phản hồi từ người mua.

Chương 5: Architecture

Phân tích mô hình kiến trúc MVC trong dự án, làm rõ vai trò của từng thành phần Model, View, Controller và cơ chế phân chia công việc xử lý giữa Client (ReactJS) và Server (NodeJS/ExpressJS).

Chương 6: Mockup Design and Details

Mô tả chi tiết bản vẽ giao diện, bảng đặc tả các trường dữ liệu (Input fields) và nút bấm (Action buttons) trên từng màn hình:

  • 6.1 Trang chủ: Thành phần Carousel banner quảng cáo và danh sách sản phẩm.
  • 6.2 Đăng ký tài khoản: Bảng biểu mẫu gồm Họ tên, Email, Số điện thoại, Giới tính, MSSV, Mật khẩu, Ảnh đại diện (Avatar).
  • 6.3 Tìm kiếm thông tin người dùng: Bộ lọc theo đánh giá số sao và khung tìm kiếm hồ sơ.
  • 6.4 Quản lý mặt hàng: Giao diện điền thông tin đăng bán, cửa sổ xem trước (Demo modal), thông báo xác nhận và trang danh sách quản lý trạng thái đơn bán (Đang bán, Đã bán).
  • 6.5 Tìm kiếm sản phẩm theo tên, theo tag: Thanh công cụ tìm kiếm trên header và giao diện hiển thị kết quả phân loại.
  • 6.6 Xem lịch sử mua hàng/bán hàng: Quản lý danh sách sản phẩm đang đánh dấu (theo dõi), danh sách đơn hàng đã mua và danh sách đơn hàng đã bán.
  • 6.7 Xem và thêm đánh giá: Giao diện xem đánh giá trên trang cá nhân và biểu mẫu nhập số sao cùng nhận xét người bán.

Chương 7: Technologies

Trình bày cơ sở lý thuyết, đặc tính kỹ thuật và lý do lựa chọn từng công nghệ trong hệ thống: ReactJS, TailwindCSS, MongoDB, NodeJS, ExpressJS, Git và GitHub.

Chương 8: Class Diagram

Mô tả chi tiết sơ đồ lớp của toàn bộ ứng dụng, làm rõ mối quan hệ giữa các lớp View dùng chung thành phần Header và các lớp xử lý nghiệp vụ trung gian (itemController, itemsController, userController, usersController).

Chương 9: Screen Flow Diagram

Sơ đồ chuyển hướng và luồng luân chuyển giữa các màn hình ứng dụng từ trang chủ, đăng nhập, trang cá nhân, đăng bán sản phẩm đến các tác vụ tìm kiếm và xem chi tiết.

Chương 10: System Implementation

Minh chứng kết quả lập trình giao diện thực tế và các luồng xử lý tương ứng trên hệ thống:

  • 10.1 Xác thực người dùng: Giao diện Đăng ký, Đăng nhập, thông báo đăng nhập thành công và màn hình báo lỗi khi chưa xác thực.
  • 10.2 Thêm sửa xóa sản phẩm: Form thêm sản phẩm, cửa sổ xem trước bản thảo và trang hiển thị thông tin sản phẩm chính thức.
  • 10.3 Trang chủ + Tìm kiếm: Hiện thực giao diện hiển thị sản phẩm và cơ chế lọc kết quả.
  • 10.4 Nhận xét về người bán: Giao diện nhập và hiển thị đánh giá.
  • 10.5 Lịch sử đánh dấu mặt hàng & 10.6 Lịch sử bán hàng: Hiện thực giao diện theo dõi các mặt hàng đã lưu hoặc đã giao dịch thành công.

Chương 11: Database và Triển khai

Thiết kế cấu trúc cơ sở dữ liệu trên MongoDB; hướng dẫn quy trình đóng gói ứng dụng vào Docker Container và các phương thức triển khai lên dịch vụ Web Hosting thông qua Git truyền thống hoặc Docker Engine.

Kết quả và đóng góp

  • Kết quả xây dựng phần mềm: Nhóm tác giả đã hoàn thiện ứng dụng web BKPass với đầy đủ các phân hệ chức năng theo đặc tả yêu cầu, bao gồm: xác thực tài khoản người dùng với cơ chế mã hóa SHA256; đăng tin và quản lý sản phẩm (thêm, sửa, xóa, gắn nhãn, tải ảnh); công cụ tìm kiếm theo tên và tag hiển thị 10 kết quả/trang; tính năng đánh dấu sản phẩm theo dõi; chức năng đánh giá người bán với thang điểm tối đa 5 sao; và phân hệ lịch sử giao dịch mua/bán.
  • Kết quả triển khai kỹ thuật: Ứng dụng được đóng gói hoàn chỉnh bằng Docker Container, hỗ trợ triển khai linh hoạt qua Docker Engine và dịch vụ Web Hosting, đảm bảo tách biệt kiến trúc Client-Side Rendering (ReactJS) và RESTful API Back-end (NodeJS, ExpressJS, MongoDB).
  • Đóng góp thực tiễn: Xây dựng một nền tảng trao đổi hàng hóa chuyên biệt cho sinh viên Trường Đại học Bách Khoa – ĐHQG TP.HCM, khắc phục tình trạng trôi bài viết và bài đăng bị xóa do chính sách giới hạn trên mạng xã hội, đồng thời thiết lập cơ chế đánh giá sao minh bạch giúp gia tăng độ tin cậy trong các giao dịch nội bộ.

Hạn chế và hướng nghiên cứu tiếp

  • Hạn chế: Theo phạm vi nghiên cứu được ghi nhận trong đồ án, hệ thống tập trung vào nền tảng Web Application nội bộ dành cho sinh viên HCMUT; các cơ chế kiểm duyệt tự động thông tin người bán và cơ chế thanh toán trực tuyến trung gian chưa được tích hợp chi tiết trong phạm vi phiên bản hiện tại.
  • Hướng phát triển: Tiếp tục mở rộng các module chức năng phụ trợ, nâng cao hiệu suất xử lý của các API hiện có và tối ưu hóa hạ tầng máy chủ nhằm đáp ứng quy mô người dùng lớn hơn theo các tiêu chí mở rộng đã nêu trong yêu cầu phi chức năng.

Giá trị tham khảo

Tài liệu đồ án tổng hợp này có giá trị tham khảo thiết thực cho:

  • Sinh viên ngành Khoa học Máy tính và Kỹ thuật Phần mềm: Tham khảo cấu trúc hoàn chỉnh của một đồ án công nghệ phần mềm từ khâu đặc tả yêu cầu (Functional & Non-functional Requirements), mô hình hóa hệ thống bằng UML (Use Case, Class Diagram, Screen Flow Diagram) đến thiết kế cơ sở dữ liệu phi quan hệ.
  • Nhóm phát triển ứng dụng Web full-stack: Cung cấp tài liệu tham khảo chi tiết về việc kết hợp kiến trúc MVC với mô hình Client-Side Rendering, sử dụng hệ sinh thái công nghệ ReactJS, TailwindCSS, NodeJS, ExpressJS, MongoDB và kỹ thuật đóng gói triển khai bằng Docker.

Câu hỏi thường gặp

1. Ứng dụng BKPass giải quyết những vấn đề cụ thể nào của sinh viên HCMUT khi mua bán đồ cũ trên mạng xã hội?
Hệ thống giải quyết 3 bất cập lớn: hiện tượng trôi bài đăng trong các đợt cao điểm; nguy cơ lừa đảo hoặc sản phẩm sai mô tả do thiếu cơ chế đánh giá uy tín; và tình trạng bài viết bị nền tảng mạng xã hội (Facebook) đánh dấu spam hoặc giới hạn số lượng đăng (tối đa 20 bài/ngày).

2. Kiến trúc phần mềm của BKPass được tổ chức như thế nào giữa phía Client và Server?
Hệ thống áp dụng mô hình kiến trúc MVC theo hình thức Client-Side Rendering. Phía Client đảm nhận thành phần View thông qua ReactJS (Single Page Application). Phía Server chứa thành phần Controller (ExpressJS/NodeJS) để xử lý logic và Model kết nối với cơ sở dữ liệu MongoDB.

3. Cơ chế bảo mật và hiệu năng của hệ thống được quy định với các chỉ số cụ thể nào?
Về bảo mật, hệ thống sử dụng thuật toán mã hóa SHA256 cho mật khẩu, yêu cầu mật khẩu tối thiểu 8 ký tự (chữ, số, ký tự đặc biệt) và tự động khóa đăng nhập 5 phút nếu nhập sai 5 lần trong 30 giây liên tục. Về hiệu năng, hệ thống yêu cầu thời gian chuyển trang không quá 2 giây, thời gian phản hồi của 80% giao dịch không vượt quá 1.500 ms và khả năng xử lý 1.000 giao dịch/giờ với xác suất thành công trên 90%.

4. Chức năng đánh giá người bán trên BKPass hoạt động như thế nào?
Người dùng sau khi đăng nhập có thể truy cập trang cá nhân của người bán để xem các đánh giá trước đó hoặc gửi đánh giá mới bằng cách nhập bình luận và chọn điểm số trên thang đo tối đa 5 sao. Hệ thống cung cấp biểu mẫu xác nhận trước khi lưu thông tin đánh giá.

Kết luận

Đồ án tổng hợp "Thiết kế ứng dụng trao đổi vật phẩm – BKPass" của nhóm sinh viên Khoa Khoa học & Kỹ thuật Máy tính, Trường Đại học Bách Khoa – ĐHQG TP.HCM đã giải quyết trọn vẹn bài toán xây dựng nền tảng trao đổi vật phẩm nội bộ cho sinh viên. Thông qua việc phân tích yêu cầu chặt chẽ, thiết kế kiến trúc MVC hiện đại kết hợp ReactJS, NodeJS, MongoDB và đóng gói bằng Docker, đề tài đã cung cấp một giải pháp phần mềm hoàn chỉnh và có tính ứng dụng cao. Tài liệu đồ án thể hiện đầy đủ các bước kỹ thuật chuẩn mực trong quy trình phát triển phần mềm, phục vụ hiệu quả cho công tác học tập và nghiên cứu chuyên ngành.