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

Sự phát triển của công nghiệp và khoa học kỹ thuật đã thúc đẩy sự gia tăng nhanh chóng về chủng loại và chất lượng của các thiết bị công nghệ cao như phương tiện giao thông và thiết bị điện tử. Nhu cầu sở hữu các thiết bị đời mới của người tiêu dùng ngày càng lớn, dẫn đến việc nhiều thiết bị cũ từng được sử dụng bị loại bỏ hoặc cất giữ không dùng đến, gây hao mòn, hư hỏng theo thời gian và lãng phí tiền bạc. Nhằm giải quyết thực trạng này, đề tài "Xây dựng ứng dụng mua bán đồ cũ" được thực hiện để phát triển nền tảng MarketPlaceHD, tạo lập không gian trung gian hỗ trợ người dùng đăng tin thanh lý đồ đã qua sử dụng và tham khảo giá cả thị trường trước khi bán lại.

Đề tài đặt ra các mục tiêu và nhiệm vụ cụ thể bao gồm:

  1. Nghiên cứu cơ sở lý thuyết chuyên môn, làm chủ và ứng dụng hai nhóm công nghệ trọng tâm là MERN Stack (MongoDB, Express, ReactJS, NodeJS) và Flutter, kết hợp cùng các thư viện giao diện, mô-đun chức năng và mẫu giao diện phục vụ xây dựng hệ thống website và ứng dụng di động.
  2. Tìm hiểu quy trình vận hành và triển khai sản phẩm lên máy chủ internet thông qua các nền tảng lưu trữ đám mây.
  3. Vận dụng kiến thức học tập để phát triển hoàn chỉnh ứng dụng mua bán đồ cũ MarketPlaceHD, cung cấp đầy đủ các tính năng cơ bản phục vụ hoạt động đăng tin rao bán và quản trị hệ thống, đồng thời đảm bảo cấu trúc có khả năng mở rộng để nâng cấp thêm các tính năng mới sau này.

Đối tượng nghiên cứu của khóa luận là quy trình giao dịch, đăng tin trao đổi hàng hóa cũ trực tuyến, cùng các kỹ thuật xây dựng ứng dụng đa nền tảng kết nối cơ sở dữ liệu thời gian thực. Phạm vi nghiên cứu về mặt không gian tập trung vào việc mô phỏng thị trường hàng cũ tại Việt Nam qua các nhóm sản phẩm tiêu biểu (bất động sản, xe cộ, đồ điện tử); phạm vi thời gian thực hiện đề tài diễn ra từ ngày 14/02/2022 đến ngày 18/06/2022 tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh.


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

Khóa luận thiết lập nền tảng kỹ thuật dựa trên các ngôn ngữ lập trình, thư viện giao diện và hệ quản trị cơ sở dữ liệu hiện đại:

  • Ngôn ngữ đánh dấu và kịch bản: HTML (Hypertext Markup Language) định hình cấu trúc; CSS (Cascading Style Sheets) định dạng hiển thị; JavaScript (JS) và TypeScript (TS) thực thi logic phía máy khách lẫn máy chủ; Dart được sử dụng làm ngôn ngữ cốt lõi cho bộ công cụ Flutter nhờ cơ chế biên dịch nguyên bản mã ARM/x86, tối ưu hóa Ahead-Of-Time (AOT) và hỗ trợ mô hình Reactive UI.
  • Thư viện và Framework phát triển:
    • ReactJS & Material UI: Xây dựng giao diện web quản trị viên theo kiến trúc chia nhỏ thành phần (component), tận dụng hệ thống lưới chuẩn của Material Design để tối ưu hóa thiết kế thích ứng (Responsive Web Design).
    • Flutter: Bộ công cụ giao diện người dùng đa nền tảng của Google, sử dụng 2D rendering engine giúp đạt hiệu năng hiển thị 60 khung hình/giây (60fps) trên cả hai hệ điều hành Android và iOS từ một cơ sở mã nguồn duy nhất.
    • NodeJS & Express: Đóng vai trò môi trường thực thi và khung ứng dụng máy chủ xử lý các API tiếp nhận và điều phối dữ liệu nghiệp vụ.
  • Hệ cơ sở dữ liệu NoSQL MongoDB: Lưu trữ dữ liệu dưới dạng tài liệu (document) JSON/BSON linh hoạt, gom nhóm trong các tập hợp (collection), tự động đánh chỉ mục trên trường _id, hỗ trợ lưu trữ vùng nhớ RAM phục vụ truy vấn tốc độ cao mà không yêu cầu cấu trúc bảng hay phép nối bảng phức tạp.

Phương pháp nghiên cứu thực tế bao gồm phương pháp khảo sát đối sánh sản phẩm thực tế kết hợp với phương pháp phân tích, thiết kế và phát triển hệ thống phần mềm:

  • Khảo sát thực tế: Phân tích ưu điểm và nhược điểm của ba ứng dụng mua bán đã có trên thị trường gồm Chợ Tốt, NamGiay và Muaban24h để xác định các đặc tả chức năng cần thiết cho MarketPlaceHD.
  • Phân tích và thiết kế phần mềm: Xây dựng sơ đồ ca sử dụng (Use Case Diagram), lập bảng mô tả chi tiết từng Use Case cho các tác nhân, xây dựng biểu đồ tuần tự (Sequence Diagram) mô tả tương tác luồng dữ liệu, và thiết kế lược đồ cơ sở dữ liệu cho các thực thể.
  • Triển khai và lưu trữ: Khảo sát quy trình triển khai máy chủ sử dụng dịch vụ Heroku (sử dụng container Dynos, thiết lập Procfile, cấu hình Git) và Firebase Hosting (kết hợp Firebase Authentication và Realtime Database).

Nguồn dữ liệu trong nghiên cứu là các tài liệu kỹ thuật chính thức của Google, Facebook, MongoDB, các tài liệu hướng dẫn lập trình web/app và dữ liệu thu thập từ quá trình chạy thử nghiệm các ca chức năng của sản phẩm.


Thiết kế và triển khai

Hệ thống MarketPlaceHD được cấu trúc thành hai phân hệ độc lập về mặt giao diện nhưng chia sẻ chung hạ tầng dịch vụ phụ trợ:

  • Phân hệ Web Admin: Dành cho người quản trị, được xây dựng bằng ReactJS, TypeScript và Material UI, phục vụ nhiệm vụ kiểm duyệt nội dung, giám sát người dùng và theo dõi doanh thu.
  • Phân hệ Mobile App: Dành cho người dùng cuối (người mua và người bán), xây dựng bằng Flutter và Dart, hoạt động trên các thiết bị di động thông minh.
  • Phân hệ Back-end & Cơ sở dữ liệu: Xây dựng trên NodeJS và Express để cung cấp giao diện lập trình ứng dụng RESTful, kết nối trực tiếp với hệ quản trị cơ sở dữ liệu MongoDB.

Bảng khảo sát, đối sánh tính năng giữa MarketPlaceHD và các nền tảng thương mại đồ cũ hiện hành:

Tiêu chí kỹ thuật / chức năng Chợ Tốt NamGiay Muaban24h MarketPlaceHD (Khóa luận)
Giao diện người dùng Đẹp mắt, thân thiện Đơn giản, tính thẩm mỹ thấp Đơn giản, tương tác thấp Trực quan, tối ưu trải nghiệm
Đăng nhập bên thứ ba Có Không Có Chưa hỗ trợ
Trò chuyện trực tiếp (Chat) Có Không Không Chưa hỗ trợ
Bộ lọc tin đăng Đầy đủ bộ lọc Không có bộ lọc Có bộ lọc cơ bản Có bộ lọc theo danh mục
Thanh toán / Mã QR Hỗ trợ voucher, thanh toán Không hỗ trợ Không hỗ trợ Chưa hỗ trợ thanh toán QR
Kiểm duyệt bài đăng Kiểm duyệt tự động/thủ công Kiểm duyệt hệ thống Kiểm duyệt hệ thống Quản trị viên duyệt thủ công
Nền tảng hỗ trợ Web, iOS, Android Di động Web, Di động Web (Admin), Di động (Flutter)

Hệ thống phân định 3 nhóm tác nhân chính với các ca sử dụng cụ thể:

  • Người dùng chưa xác thực (Unauthenticated User): Xem danh sách tin, tìm kiếm tin theo từ khóa, lọc tin theo danh mục, xem bình luận của bài viết, thực hiện đăng ký và đăng nhập tài khoản.
  • Người dùng đã xác thực (Authenticated User): Xem và chỉnh sửa thông tin cá nhân (họ tên, địa chỉ, số điện thoại), đổi mật khẩu, lấy lại mật khẩu qua OTP, xem thông tin người đăng tin, đăng tin bán sản phẩm, nâng cấp tin thành tin ưu tiên, gia hạn thời gian hiển thị, hủy tin, yêu cầu duyệt lại bài đăng, thích/hủy thích tin, gửi bình luận và xóa bình luận của chính mình, đánh giá tài khoản người bán.
  • Quản trị viên (Admin): Xem biểu đồ tổng doanh thu trong năm, thống kê tổng số tài khoản và bài viết, quản lý tài khoản người dùng (xem danh sách kích hoạt, xem danh sách bị khóa, thực hiện khóa hoặc mở khóa tài khoản), quản lý tin đăng (duyệt tin, từ chối tin, khóa tin, xóa bài viết vi phạm, xem tin theo các trạng thái chờ duyệt, đang hiển thị hoặc bị khóa).

Quy trình kiểm thử của khóa luận được tiến hành thông qua việc kiểm tra chức năng thủ công trên môi trường cài đặt thực tế (sử dụng Visual Studio Code để chạy mã nguồn front-end web, front-end app và back-end), ghi nhận kết quả hiển thị cho các chức năng: xem thông tin người dùng, hủy bài đăng, thích bài đăng và gửi bình luận.


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

Chương 1: Tổng quan

Chương 1 giới thiệu lý do lựa chọn đề tài xuất phát từ nhu cầu thực tiễn trong việc tái sử dụng thiết bị cũ và hạn chế lãng phí tài sản. Nhóm tác giả xác định rõ 4 mục đích chính: xây dựng phần mềm hoàn chỉnh, vận dụng kiến thức đại học vào thực tế, nắm bắt quy trình sản xuất sản phẩm công nghệ thực tiễn và nghiên cứu các công nghệ React, Flutter. Đồng thời, chương này liệt kê khái quát ngăn xếp công nghệ được phân công gồm ReactTS, Flutter cho Front-end và NodeJS, Express, MongoDB cho Back-end.

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

Chương 2 trình bày chi tiết về mặt lý thuyết các công nghệ sử dụng trong đề tài. Phần ngôn ngữ bao gồm HTML (khái niệm, tính chuẩn hóa W3C, hạn chế về trang tĩnh), CSS (cách thức chọn vùng phần tử, phối hợp với HTML), JavaScript (vai trò kịch bản phía máy khách và máy chủ qua NodeJS), Dart (cú pháp hệ C, tính an toàn kiểu type-safe, cơ chế Future/Stream hỗ trợ bất đồng bộ). Phần thư viện và framework đi sâu vào Material UI (lợi thế responsive và hệ thống lưới), Flutter (công cụ 2D rendering engine giải quyết hài hòa tốc độ phát triển và hiệu năng native), ReactJS (mô hình component tái sử dụng). Phần cơ sở dữ liệu phân tích hệ thống MongoDB (cơ chế lưu trữ document JSON, cấu trúc không định hình, đánh chỉ mục trường _id, lưu trữ trên RAM, nhược điểm về thiếu ràng buộc quan hệ ACID và kích thước document giới hạn dưới 16MB). Cuối chương mô tả cơ chế hoạt động, ưu nhược điểm và quy trình triển khai ứng dụng bằng dòng lệnh thông qua Firebase Hosting (kèm công cụ Firebase CLI, chứng chỉ bảo mật SSL) và nền tảng đám mây Heroku (máy ảo Dynos, tệp cấu hình Procfile cho việc khởi chạy dịch vụ).

Chương 3: Phân tích và thiết kế hệ thống

Chương 3 bắt đầu bằng việc khảo sát, chụp ảnh giao diện và đánh giá chi tiết 3 ứng dụng tương tự trên thị trường (Chợ Tốt, NamGiay, Muaban24h), từ đó tổng hợp bảng đối sánh ưu - nhược điểm của MarketPlaceHD. Tiếp theo, chương xác định yêu cầu chức năng cho 3 nhóm người dùng và các yêu cầu phi chức năng về tính thẩm mỹ, tốc độ tải trang, tốc độ tìm kiếm và khả năng mở rộng. Nội dung trọng tâm của chương là việc đặc tả hệ thống thông qua bảng yêu cầu chức năng (33 ca sử dụng), lược đồ tổng quan ca sử dụng và các bảng mô tả chi tiết kịch bản sử dụng (luồng cơ bản, luồng ngoại lệ, điều kiện tiên quyết, tác nhân) kết hợp với các sơ đồ tuần tự (Sequence Diagram) từ số 1 đến 17 cho các nghiệp vụ như đăng nhập, đăng xuất, đăng ký, đổi mật khẩu, đổi thông tin, xem trang người đăng, thích bài, bình luận, xóa bình luận, đăng bài, nâng cấp ưu tiên, gia hạn, yêu cầu duyệt lại, quên mật khẩu, đánh giá người bán và lọc sản phẩm.

Chương 4: Thiết kế ứng dụng

Chương 4 tập trung vào hai nội dung thiết kế kỹ thuật: cơ sở dữ liệu và giao diện người dùng. Về mặt dữ liệu, chương cung cấp sơ đồ thiết kế cơ sở dữ liệu trong MongoDB và mô tả cấu trúc lưu trữ thông tin các đối tượng người dùng, bài đăng, tương tác. Về mặt giao diện, chương trình bày chi tiết hệ thống màn hình kèm bảng mô tả thành phần giao diện:

  • Màn hình dành cho Quản trị viên: Trang đăng nhập admin, trang chủ tổng quan doanh thu, trang quản lý thông tin cá nhân, trang quản lý tài khoản người dùng (chia theo tab kích hoạt và tab bị khóa), trang quản lý tin đăng (chia theo tab chờ duyệt và tab đang hiển thị).
  • Màn hình ứng dụng di động dành cho Người dùng: Màn hình đăng nhập, màn hình đăng ký, màn hình trang chủ, màn hình chuyên mục theo ngành hàng (bất động sản, xe cộ, đồ điện tử), màn hình quản lý tin của người dùng (tin chờ duyệt, tin bị từ chối duyệt, tin đang hiển thị, tin đã hủy, tin hết hạn), màn hình chi tiết tin, màn hình tạo tin mới, màn hình thông tin người dùng, màn hình thông tin chủ tin, màn hình quên mật khẩu, màn hình xác thực mã OTP, màn hình tiện ích, màn hình danh sách tin yêu thích và màn hình lọc tin nâng cao.

Chương 5: Cài đặt và kiểm thử

Chương 5 minh họa cấu trúc thư mục dự án trên môi trường phát triển (cấu trúc thư mục front-end web, cấu trúc front-end app, cấu trúc thư mục back-end), hiển thị thao tác chạy mã nguồn và cài đặt các gói thư viện phụ thuộc thông qua trình soạn thảo Visual Studio Code. Phần kiểm thử ghi nhận kết quả thực thi kiểm thử chức năng trên các giao diện thành phẩm của hệ thống, bao gồm các ca kiểm thử: xem thông tin tài khoản người dùng, chức năng người bán hủy bài đăng bán đồ cũ, chức năng người mua bấm thích bài đăng và chức năng gửi bình luận phản hồi dưới mỗi tin rao.

Chương 6: Kết luận

Chương 6 tổng kết toàn bộ kết quả đạt được của đồ án tốt nghiệp, nêu bật những mặt ưu điểm đã xây dựng được cũng như các hạn chế còn tồn đọng trong quá trình triển khai thực tế. Tác giả cũng trình bày những kinh nghiệm làm việc nhóm, kỹ năng công nghệ tích lũy được sau quá trình nghiên cứu và vạch ra các định hướng để phát triển, nâng cấp ứng dụng trong tương lai.


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

Khóa luận đã hoàn thành việc xây dựng ứng dụng mua bán đồ cũ MarketPlaceHD với các kết quả cụ thể:

  • Xây dựng thành công hệ thống phần mềm hoàn chỉnh bao gồm ứng dụng di động cho người dùng thông thường và trang web quản trị nội dung cho quản trị viên.
  • Phân tích và thiết kế chi tiết 33 use case nghiệp vụ, thiết lập đầy đủ 17 biểu đồ tuần tự cho các luồng xử lý thông tin then chốt của người dùng và quản trị viên.
  • Thiết kế hệ thống danh mục hàng hóa cũ tập trung vào 3 nhóm mặt hàng chính có nhu cầu cao trên thị trường: bất động sản, xe cộ và đồ điện tử.
  • Xây dựng các chức năng tương tác cộng đồng hỗ trợ người mua: thích bài đăng, bình luận trao đổi, xóa bình luận của mình, lọc tin đăng theo tiêu chí và chấm điểm đánh giá uy tín của chủ bài đăng.
  • Hoàn thiện chu trình quản lý vòng đời bài viết: tạo tin, chờ quản trị viên duyệt, hiển thị công khai, nâng cấp tin thành tin ưu tiên, gia hạn thời gian tin đăng, hủy tin hoặc gửi yêu cầu duyệt lại đối với các bài đăng bị từ chối.
  • Cung cấp trang thống kê trực quan cho ban quản trị, hỗ trợ theo dõi doanh thu phát sinh theo từng năm qua biểu đồ và giám sát trạng thái tài khoản, bài đăng trên toàn hệ thống.

So với các ứng dụng thương mại được khảo sát tại thời điểm nghiên cứu (như NamGiay hay Muaban24h), đóng góp tự thân của đồ án là đã thiết kế được giao diện người dùng trực quan, thẩm mỹ hơn, khắc phục điểm yếu thiếu bộ lọc tìm kiếm của NamGiay và bổ sung cơ chế phân loại trạng thái tin đăng rõ ràng hơn.


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

Khóa luận tự xác định các hạn chế kỹ thuật chưa hoàn thiện trong phiên bản hiện tại:

  • Ứng dụng chưa tích hợp tính năng trò chuyện (chat) trực tiếp giữa người mua và người bán ngay trên giao diện ứng dụng như ứng dụng Chợ Tốt.
  • Chưa hỗ trợ cơ chế đăng nhập nhanh thông qua các tài khoản định danh từ bên thứ ba (Google, Facebook, Apple).
  • Số lượng các chuyên mục phân loại bài đăng còn hạn chế, chủ yếu mới chỉ tập trung vào ba danh mục lớn (bất động sản, phương tiện giao thông, thiết bị điện tử), chưa bao quát hết mọi loại đồ dùng cũ trong đời sống.
  • Chưa có giải pháp xác thực hoặc kiểm tra thực tế chất lượng sản phẩm do người dùng đăng bán để bảo vệ tuyệt đối an toàn cho người mua.

Hướng nghiên cứu và phát triển tiếp theo được đề ra là tiếp tục hoàn thiện, mở rộng và phát triển thêm các tính năng nâng cao nhằm nâng cao chất lượng trải nghiệm của người dùng trên ứng dụng.


Giá trị tham khảo

Báo cáo khóa luận là tài liệu tham khảo hữu ích dành cho:

  • Sinh viên chuyên ngành Công nghệ thông tin, Kỹ thuật phần mềm đang chuẩn bị thực hiện đồ án tốt nghiệp hoặc dự án môn học về xây dựng ứng dụng thương mại điện tử, ứng dụng phân loại tin rao bán hàng.
  • Những người phát triển phần mềm muốn tham khảo cách thức phối hợp ngăn xếp công nghệ MERN (MongoDB, Express, React, Node) và Flutter trong một dự án đa nền tảng kết hợp giữa ứng dụng di động cho người dùng và bảng điều khiển web cho người quản trị.
  • Các phần có giá trị học thuật và ứng dụng cao trong tài liệu gồm: tài liệu đặc tả ca sử dụng chi tiết (Chương 3) với hệ thống 33 bảng phân tích kịch bản use case và 17 sơ đồ tuần tự chuẩn mực; thiết kế giao diện chi tiết phân tách theo từng trạng thái bài viết (Chương 4); quy trình cài đặt và hướng dẫn triển khai ứng dụng lên các nền tảng máy chủ như Firebase và Heroku (Chương 2).

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

1. Ứng dụng MarketPlaceHD sử dụng những công nghệ lập trình chính nào cho giao diện và phía máy chủ?
Giao diện ứng dụng di động được xây dựng bằng ngôn ngữ Dart với framework Flutter. Giao diện trang quản trị web sử dụng ReactJS kết hợp TypeScript và thư viện Material UI. Phía máy chủ sử dụng nền tảng NodeJS với framework Express, kết nối cơ sở dữ liệu hướng tài liệu MongoDB.

2. Người quản trị (Admin) có những quyền hạn và chức năng cụ thể nào trên hệ thống?
Quản trị viên có các quyền: xem biểu đồ thống kê tổng doanh thu của hệ thống theo năm, xem tổng số tài khoản và bài viết, khóa hoặc mở khóa tài khoản người dùng, xem danh sách tài khoản theo trạng thái (kích hoạt/bị khóa), và quản lý tin đăng của người dùng thông qua các thao tác duyệt tin, từ chối tin, khóa tin hoặc xem tin theo từng nhóm trạng thái (chờ duyệt, đang hiển thị, bị khóa).

3. Bài đăng bán đồ cũ trên MarketPlaceHD được phân thành những nhóm trạng thái nào?
Hệ thống quản lý bài đăng theo các trạng thái riêng biệt được thể hiện qua các màn hình: tin chờ duyệt (wait to confirm), tin bị từ chối duyệt, tin đang hiển thị (displaying), tin đã hủy, tin hết hạn và tin bị khóa (block).

4. Khóa luận đã khảo sát những ứng dụng thực tế nào để đối sánh với MarketPlaceHD?
Khóa luận đã tiến hành khảo sát giao diện, tính năng và phân tích ưu - nhược điểm của 3 ứng dụng thực tế gồm: ứng dụng Chợ Tốt, ứng dụng NamGiay và ứng dụng Muaban24h.

5. Những tính năng nào mà MarketPlaceHD chưa hỗ trợ so với các ứng dụng thương mại lớn?
Theo kết quả đối sánh và tự đánh giá của nhóm tác giả, MarketPlaceHD chưa hỗ trợ tính năng nhắn tin trực tiếp (in-app chat) giữa người mua và người bán, chưa tích hợp đăng nhập qua tài khoản bên thứ ba, chưa hỗ trợ quét mã QR để thanh toán và danh mục bài đăng còn ít hơn so với các nền tảng thương mại quy mô lớn.


Kết luận

Khóa luận tốt nghiệp "Xây dựng ứng dụng mua bán đồ cũ" của sinh viên Phùng Vĩnh Đức và Bùi Trung Hiếu đã hoàn thành mục tiêu xây dựng hệ thống phần mềm MarketPlaceHD phục vụ hoạt động giao dịch hàng hóa đã qua sử dụng. Đề tài vận dụng thành công mô hình kết hợp giữa Flutter cho nền tảng di động và bộ công cụ ReactJS, NodeJS, Express, MongoDB cho phân hệ quản trị web và dịch vụ máy chủ. Dù còn một số giới hạn về mặt tính năng giao tiếp trực tiếp và phạm vi danh mục mặt hàng, công trình đã cung cấp đầy đủ quy trình phân tích, thiết kế hệ thống và kiểm thử chức năng theo đúng tiêu chuẩn kỹ thuật phần mềm.