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

Trong bối cảnh chuyển đổi số và sự phát triển mạnh mẽ của công nghệ thông tin, mua sắm trực tuyến đã trở thành thói quen phổ biến trong đời sống hiện đại, đặc biệt gia tăng nhanh chóng sau tác động của đại dịch COVID-19. Người tiêu dùng ngày càng ưu tiên sự tiện lợi, tốc độ và an toàn khi mua sắm các mặt hàng đa dạng từ thực phẩm, thời trang, mỹ phẩm đến đồ gia dụng và thiết bị điện tử. Đối với các đơn vị kinh doanh, hệ thống thương mại điện tử giúp tối ưu hóa chi phí mặt bằng, quản lý kho bãi hiệu quả và mở rộng khả năng tiếp cận khách hàng không bị giới hạn bởi ranh giới địa lý.

Đồ án "Xây dựng website thương mại điện tử Breart" do sinh viên Lâm Ngọc Bách thực hiện dưới sự hướng dẫn của ThS. Huỳnh Tuấn Anh tại Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM (năm 2023). Đề tài xuất phát từ yêu cầu thực tiễn cần xây dựng một nền tảng bán hàng trực tuyến tối ưu trên nền web, giúp đồng bộ trải nghiệm trên cả máy tính lẫn thiết bị di động mà không tốn chi phí phát triển riêng lẻ từng nền tảng.

Mục tiêu nghiên cứu của đề tài được tác giả xác định cụ thể qua bốn nội dung:

  1. Tạo trải nghiệm người dùng tối ưu: Thiết kế giao diện người dùng (UI) thuận tiện, dễ thao tác và trải nghiệm người dùng (UX) mượt mà nhằm hỗ trợ tìm kiếm, so sánh và mua sắm sản phẩm.
  2. Phát triển cơ sở dữ liệu mạnh mẽ và an toàn: Xây dựng mô hình dữ liệu bảo mật, hiệu quả để quản lý danh mục sản phẩm, dữ liệu người dùng và các giao dịch mua bán.
  3. Bảo mật và an toàn giao dịch: Đảm bảo an toàn thông tin cá nhân của khách hàng cùng cơ chế bảo mật trong quá trình thanh toán trực tuyến.
  4. Tối ưu hóa SEO và tiếp thị đa kênh: Xây dựng nền tảng hỗ trợ tối ưu hóa công cụ tìm kiếm và tích hợp các kênh truyền thông xã hội.

Đối tượng nghiên cứu là quy trình vận hành và kiến trúc phần mềm của hệ thống thương mại điện tử bán lẻ trực tuyến (tập trung vào các mặt hàng thời trang, mỹ phẩm, điện thoại, laptop, đồ gia dụng). Phạm vi nghiên cứu giới hạn trên nền tảng ứng dụng web, bao gồm đầy đủ các phân hệ chức năng dành cho khách hàng (xem, tìm kiếm, giỏ hàng, đặt hàng, thanh toán, đánh giá, quản lý tài khoản) và phân hệ dành cho người quản trị (quản lý sản phẩm, danh mục, đơn hàng, mã giảm giá, người dùng, biển quảng cáo và thống kê doanh thu).

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

Đồ án tiếp cận quy trình phát triển phần mềm theo định hướng công nghệ hiện đại, kết hợp giữa mô hình Client-Server và Server-Side Rendering (SSR). Các nền tảng công nghệ và thư viện cốt lõi được tác giả khảo sát và ứng dụng bao gồm:

  • React.js: Thư viện JavaScript mã nguồn mở xây dựng giao diện dựa trên kiến trúc thành phần (Component-based), tận dụng Virtual DOM để tối ưu hóa hiệu năng render và cú pháp JSX giúp phát triển giao diện trực quan.
  • Next.js: Framework React hỗ trợ Server-Side Rendering (SSR) và Static Site Generation (SSG), cung cấp cơ chế dynamic routing, lazy loading và code splitting giúp tăng tốc độ tải trang và tối ưu hóa SEO.
  • Node.js: Môi trường chạy mã JavaScript phía máy chủ dựa trên V8 engine, áp dụng mô hình xử lý I/O không chặn (non-blocking I/O) giúp xử lý đồng thời nhiều kết nối mạng hiệu quả.
  • Tailwind CSS: Framework CSS tiện ích (utility-first) hỗ trợ xây dựng giao diện tùy biến nhanh chóng và thiết kế đáp ứng (responsive design).
  • Prisma ORM & MySQL: Prisma đóng vai trò là tầng trừu tượng (abstraction layer) kết nối ứng dụng Node.js với hệ quản trị cơ sở dữ liệu quan hệ MySQL, tự động kiểm tra và tối ưu truy vấn dữ liệu.
  • Các dịch vụ và công cụ tích hợp: Dịch vụ lưu trữ đa phương tiện Cloudinary, cơ sở dữ liệu phân tán PlanetScale, cổng thanh toán trực tuyến Stripe, giải pháp xác thực và bảo mật người dùng Clerk/Bcrypt, công cụ quản lý mã nguồn GitHub và môi trường lập trình Visual Studio Code.

Phương pháp nghiên cứu và phát triển được tiến hành qua các bước có hệ thống:

  1. Khảo sát thực trạng: Tìm hiểu mô hình vận hành và tính năng của các nền tảng thương mại điện tử thực tế như Shopee, Tiki.
  2. Phân tích và xác định yêu cầu: Phân loại yêu cầu chức năng, yêu cầu phi chức năng và xác định các tác nhân hệ thống.
  3. Thiết kế hệ thống: Xây dựng sơ đồ Use Case, sơ đồ hoạt động (Activity Diagram), sơ đồ tuần tự (Sequence Diagram), thiết kế cơ sở dữ liệu quan hệ và thiết kế chi tiết các màn hình giao diện.
  4. Cài đặt và phát triển: Lập trình front-end, xây dựng RESTful API ở back-end, cấu hình xác thực và tích hợp cổng thanh toán.
  5. Kiểm thử và đánh giá: Thực hiện các test case kiểm tra chức năng đăng nhập, đăng ký và các luồng nghiệp vụ chính nhằm đảm bảo hệ thống vận hành đúng đặc tả.

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

Nội dung toàn văn đồ án được cấu trúc thành 5 chương trọng tâm:

Chương 01 – Giới thiệu

Chương mở đầu trình bày bối cảnh chuyển đổi số của ngành thương mại bán lẻ, lý do lựa chọn đề tài xây dựng website thương mại điện tử Breart. Tác giả xác định rõ các mục tiêu cốt lõi (tối ưu UI/UX, bảo mật cơ sở dữ liệu, an toàn thanh toán, hỗ trợ SEO), nội dung nghiên cứu và phạm vi triển khai trên môi trường web.

Chương 02 – Kiến thức và công nghệ nền tảng

Chương này tập trung phân tích lý thuyết, nguyên lý hoạt động, ưu điểm và nhược điểm của các công nghệ được lựa chọn trong dự án. Cụ thể:

  • Thư viện React.js và kỹ thuật quản lý trạng thái, cập nhật DOM ảo.
  • Framework Next.js với hai cơ chế SSR và SSG, khả năng tách mã và tối ưu tài nguyên hình ảnh.
  • Nền tảng Node.js trong việc xử lý bất đồng bộ và xây dựng API.
  • Hệ quản trị cơ sở dữ liệu quan hệ MySQL kết hợp với thư viện Prisma ORM nhằm đơn giản hóa các thao tác cơ sở dữ liệu và tăng tính an toàn cho ứng dụng.
  • Framework Tailwind CSS trong việc đồng bộ thiết kế giao diện đáp ứng.

Chương 03 – Xây dựng hệ thống

Tác giả tiến hành phân tích chi tiết các yêu cầu nghiệp vụ của hệ thống:

  • Tác nhân hệ thống: Xác định 3 nhóm tác nhân chính bao gồm Khách hàng tiềm năng (A-01), Khách hàng đã đăng ký (A-02) và Người quản lý (A-03).
  • Yêu cầu chức năng: Phân chia thành các nhóm phân hệ nghiệp vụ gồm Quản lý tài khoản (đăng ký, đăng nhập, đổi/quên mật khẩu, thêm địa chỉ), Quản lý sản phẩm (xem, lọc, thêm, sửa, xóa), Quản lý giỏ hàng, Thanh toán, Quản lý đơn hàng (xem, cập nhật trạng thái, hủy đơn), Quản lý mã giảm giá, Quản lý danh mục và Nhắn tin trực tuyến.
  • Yêu cầu phi chức năng: Thiết lập các tiêu chuẩn kỹ thuật về bảo mật (S01 - S03), khả năng mở rộng (C01), khả năng sử dụng (U01 - U03) và hiệu suất hệ thống (P01 - thời gian hoàn tất tác vụ dưới 5 giây).
  • Mô hình Use Case: Tổng hợp sơ đồ Use Case toàn hệ thống và bảng mô tả chi tiết 21 Use Case từ UC01 đến UC21.

Chương 04 – Xây dựng ứng dụng

Chương 4 là phần trọng tâm về mặt kỹ thuật, chi tiết hóa toàn bộ quá trình chuyển đổi từ yêu cầu sang thiết kế và mã nguồn thực tế:

  • Đặc tả Use Case chi tiết: Xây dựng luồng sự kiện cơ bản (Basic Flow), luồng thay thế (Alternative Flow), điều kiện tiên quyết (Pre-condition) cho các tác vụ then chốt như Khám phá sản phẩm (UC02), Sử dụng mã giảm giá (UC03), Quản lý giỏ hàng (UC05), Đăng ký (UC06), Đăng nhập (UC07), Quản lý tài khoản (UC08), Phương thức thanh toán (UC09), Quản lý địa chỉ (UC10), Quản lý đơn hàng (UC12) và Quản lý mã giảm giá (UC13).
  • Mô hình hóa động: Trình bày các sơ đồ Activity (đăng nhập AD-01, khám phá sản phẩm AD-02) và sơ đồ Sequence (đánh giá sản phẩm SD-01, thêm sản phẩm SD-02, cập nhật sản phẩm SD-03).
  • Thiết kế dữ liệu và kiến trúc: Xây dựng lược đồ cơ sở dữ liệu quan hệ và mô hình phân tầng kiến trúc hệ thống.
  • Thiết kế giao diện: Triển khai trực quan hóa hệ thống màn hình người dùng (trang chủ, danh sách, chi tiết sản phẩm, giỏ hàng, cổng thanh toán thẻ/Link) và bảng điều khiển quản trị (dashboard, thống kê doanh thu, quản lý danh mục, kích thước, màu sắc, biển quảng cáo).
  • Kiểm thử chức năng: Thực hiện và ghi nhận kết quả các kịch bản kiểm tra chức năng đăng nhập, đăng ký tài khoản.

Chương 05 – Kết luận

Tổng kết toàn diện kết quả đạt được sau quá trình cài đặt hệ thống, đánh giá mức độ đáp ứng mục tiêu ban đầu, chỉ ra những thuận lợi và khó khăn trong quá trình thực hiện, đồng thời vạch ra hướng phát triển mở rộng cho đồ án tiếp theo.

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

1. Kiến trúc phân tầng và công nghệ triển khai

Hệ thống được thiết kế theo mô hình kiến trúc phân lớp hiện đại nhằm tách biệt rõ ràng giữa giao diện, logic xử lý và tầng lưu trữ:

  • Tầng giao diện (Front-End Layer): Xây dựng bằng React.js kết hợp Tailwind CSS để tạo giao diện phản hồi nhanh, hỗ trợ đa độ phân giải. Trạng thái toàn cục được quản lý qua Redux Toolkit.
  • Tầng máy chủ & kết xuất (SSR & Server Layer): Next.js đảm nhiệm việc kết xuất trang phía máy chủ (SSR) và định tuyến động. Node.js phụ trách xây dựng các RESTful API kết nối dữ liệu.
  • Tầng xác thực & an ninh (Security Layer): Tích hợp Clerk Doc và mã hóa mật khẩu bằng Bcrypt nhằm bảo vệ dữ liệu nhạy cảm của người dùng.
  • Tầng dữ liệu & dịch vụ ngoài (Data & Integration Layer): Cơ sở dữ liệu MySQL được trừu tượng hóa và thao tác qua Prisma ORM; lưu trữ tệp tin hình ảnh qua Cloudinary; xử lý thanh toán trực tuyến qua cổng Stripe (hỗ trợ thanh toán thẻ tín dụng và Link).

2. Bảng tổng hợp tác nhân và yêu cầu phi chức năng

Mã Hạng mục Chi tiết đặc tả kỹ thuật theo văn bản
A-01 Tác nhân Khách hàng tiềm năng Người dùng chưa đăng nhập hệ thống, có quyền xem danh mục và tìm kiếm sản phẩm.
A-02 Tác nhân Khách hàng Người dùng đã đăng nhập, có quyền đặt hàng, quản lý giỏ hàng, đánh giá và quản lý tài khoản.
A-03 Tác nhân Người quản lý Nắm toàn bộ quyền quản trị, cấu hình sản phẩm, đơn hàng, danh mục, banner và doanh thu.
S01 Yêu cầu bảo mật Mật khẩu tài khoản phải có độ dài ít nhất 8 ký tự, bao gồm ít nhất 1 chữ in hoa và 1 ký tự đặc biệt.
S02 Yêu cầu bảo mật Kiểm soát quyền riêng tư nghiêm ngặt đối với thông tin cá nhân, thanh toán và lịch sử giao dịch.
S03 Yêu cầu bảo mật Nhân viên quản lý chỉ được phép đăng nhập trên một phiên làm việc tại một thời điểm.
C01 Khả năng mở rộng Cấu trúc hệ thống có khả năng đáp ứng lưu lượng tải tăng dần và khả năng mở rộng dữ liệu.
U01-U03 Khả năng sử dụng Giao diện trực quan, đồng nhất chủ đề màu sắc, cung cấp hướng dẫn rõ ràng cho người dùng.
P01 Yêu cầu hiệu suất Các thao tác cốt lõi (quản lý sản phẩm, đặt hàng, thanh toán) phải hoàn tất trong thời gian dưới 5 giây.

3. Quy trình nghiệp vụ và kiểm thử chức năng

Hệ thống được mô hình hóa qua các luồng quy trình chặt chẽ:

  • Quy trình khám phá và mua hàng: Người dùng tìm kiếm/lọc sản phẩm theo danh mục, màu sắc, thương hiệu, chất liệu hoặc sắp xếp theo giá; thêm hàng vào giỏ; áp dụng mã giảm giá phần trăm; chọn địa chỉ giao hàng và thực hiện thanh toán.
  • Quy trình quản trị: Người quản lý sử dụng bảng điều khiển (Dashboard) để thêm/sửa/xóa sản phẩm, cấu hình thuộc tính kích thước - màu sắc, phân loại danh mục cha/con, duyệt trạng thái đơn hàng và theo dõi biểu đồ doanh thu theo tháng.
  • Kết quả kiểm thử: Đồ án đã tiến hành kiểm thử các kịch bản xác thực tài khoản bao gồm kiểm tra tính hợp lệ của email duy nhất, chính sách độ mạnh mật khẩu và gửi email xác nhận kích hoạt tài khoản.

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

1. Kết quả kỹ thuật đạt được

Tác giả đã hoàn thành việc xây dựng và triển khai website thương mại điện tử với đầy đủ các phân hệ chức năng đã đề ra:

  • Thiết lập thành công hệ thống xác thực người dùng an toàn qua email (kèm liên kết xác nhận kích hoạt tài khoản) và hỗ trợ đăng nhập nhanh qua các tài khoản mạng xã hội (Google, GitHub, Twitter).
  • Vận hành trơn tru luồng nghiệp vụ mua sắm: duyệt danh mục, tìm kiếm, lọc thuộc tính, quản lý giỏ hàng, cập nhật số lượng tự động, áp dụng mã giảm giá và hủy đơn hàng chưa vận chuyển.
  • Tích hợp thành công cổng thanh toán trực tuyến Stripe (thanh toán qua Link và thẻ tín dụng) song song với phương thức thanh toán khi nhận hàng.
  • Xây dựng hoàn chỉnh trang quản trị cho phép thêm, sửa, xóa sản phẩm kèm các biến thể (kích thước, màu sắc), quản lý danh mục phụ, quản lý biểu ngữ quảng cáo, thống kê doanh thu và phân tích danh mục/sản phẩm bán chạy so với tháng trước.
  • Cung cấp tính năng hỗ trợ khách hàng như nhắn tin trực tiếp giữa người dùng và quản trị viên, đánh giá sản phẩm kèm hình ảnh sau khi mua.

2. Đóng góp của đề tài

  • Ứng dụng thành công ngăn xếp công nghệ JavaScript/TypeScript hiện đại (Next.js, React.js, Node.js, Prisma ORM, Tailwind CSS) để xây dựng một ứng dụng thương mại điện tử hoàn chỉnh.
  • Xây dựng tài liệu phân tích thiết kế phần mềm chi tiết với 21 Use Case có đặc tả luồng sự kiện rõ ràng, hệ thống sơ đồ UML (Use Case, Activity, Sequence) và lược đồ cơ sở dữ liệu quan hệ chuẩn hóa.
  • Tạo nền tảng thực hành tích hợp các dịch vụ bên thứ ba (Cloudinary, Stripe, Clerk, PlanetScale) vào kiến trúc phần mềm thực tế.

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

1. Hạn chế

Do giới hạn về mặt thời gian thực hiện trong khuôn khổ Đồ án 1, tác giả đã phải lược bỏ một số tính năng nâng cao so với dự kiến ban đầu, bao gồm hệ thống tự động phản hồi thông minh và thuật toán phân tích hành vi người dùng.

2. Hướng nghiên cứu và phát triển tiếp theo

Trong kế hoạch phát triển cho Đồ án 2, tác giả xác định hai trọng tâm nâng cấp:

  • Tích hợp Chatbot tự động: Xây dựng hệ thống chatbot hỗ trợ tư vấn và giải đáp thắc mắc khách hàng tự động 24/7.
  • Hệ thống gợi ý sản phẩm (Recommendation System): Phát triển thuật toán gợi ý sản phẩm thông minh dựa trên lịch sử xem hàng và hành vi mua sắm của người dùng nhằm nâng cao trải nghiệm cá nhân hóa.

Giá trị tham khảo

Báo cáo đồ án mang lại giá trị tham khảo thiết thực cho các đối tượng:

  • Sinh viên ngành Công nghệ phần mềm và Công nghệ thông tin: Tài liệu cung cấp mẫu tham khảo chuẩn mực về quy trình phân tích yêu cầu, đặc tả Use Case, thiết kế sơ đồ UML và thiết kế cơ sở dữ liệu cho bài toán thương mại điện tử.
  • Lập trình viên phát triển Web Full-Stack: Cung cấp giải pháp mẫu về việc kết hợp Next.js (SSR) với Prisma ORM, cơ sở dữ liệu MySQL và tích hợp quy trình thanh toán qua cổng Stripe.
  • Nội dung đáng tham khảo nhất: Phần đặc tả chi tiết 21 Use Case nghiệp vụ (từ UC01 đến UC21) với đầy đủ luồng cơ bản, luồng thay thế và các ràng buộc phi chức năng về an ninh, hiệu suất hệ thống.

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

1. Hệ thống sử dụng những công nghệ và dịch vụ chính nào để phát triển website?
Hệ thống sử dụng React.js và Tailwind CSS cho giao diện, Next.js cho kết xuất phía máy chủ (SSR), Node.js cho logic xử lý back-end, MySQL kết hợp Prisma ORM cho quản trị cơ sở dữ liệu. Ngoài ra, dự án sử dụng Cloudinary để lưu trữ hình ảnh, PlanetScale, Stripe cho cổng thanh toán và Clerk/Bcrypt cho bảo mật xác thực.

2. Tiêu chuẩn bảo mật mật khẩu người dùng trong đồ án được quy định như thế nào?
Theo yêu cầu phi chức năng S01 và đặc tả nghiệp vụ, mật khẩu người dùng khi đăng ký hoặc đổi mật khẩu phải đáp ứng độ dài tối thiểu 8 ký tự, bao gồm ít nhất một chữ cái in hoa và một ký tự đặc biệt.

3. Yêu cầu phi chức năng về mặt hiệu suất (Performance) của hệ thống được đặt ra là bao nhiêu?
Theo bảng yêu cầu phi chức năng P01, hệ thống phải được tối ưu hóa để các thao tác cốt lõi như quản lý sản phẩm, đặt hàng và thanh toán đều được xử lý hoàn tất trong thời gian dưới 5 giây.

4. Hệ thống hỗ trợ những phương thức đăng nhập và thanh toán nào cho khách hàng?
Hệ thống hỗ trợ đăng nhập qua tài khoản email đã đăng ký (có gửi link xác nhận) hoặc đăng nhập nhanh qua Google, GitHub, Twitter. Về thanh toán, hệ thống tích hợp thanh toán trực tuyến qua cổng Stripe (hỗ trợ thẻ tín dụng và Link) cùng phương thức thanh toán tiền mặt/khi nhận hàng.

5. Những tính năng nào đã được tác giả lược bỏ do giới hạn thời gian và dự kiến phát triển trong Đồ án 2?
Do thời gian thực hiện có hạn, tính năng Chatbot tự động trả lời và tính năng Gợi ý sản phẩm thông minh (Recommendation System) đã được tạm hoãn và đưa vào kế hoạch phát triển của Đồ án 2.

Kết luận

Đồ án "Xây dựng website thương mại điện tử Breart" của sinh viên Lâm Ngọc Bách đã hoàn thành việc nghiên cứu, thiết kế và cài đặt thành công một nền tảng bán hàng trực tuyến toàn diện trên môi trường web. Bằng việc kết hợp hiệu quả giữa Next.js, Node.js, Prisma ORM, MySQL và dịch vụ thanh toán Stripe, hệ thống đã đáp ứng tốt các yêu cầu chức năng nghiệp vụ của khách hàng lẫn nhà quản trị với hiệu suất xử lý dưới 5 giây. Toàn bộ quy trình phân tích yêu cầu, đặc tả 21 Use Case và thiết kế hệ thống được trình bày mạch lạc, tạo tiền đề vững chắc cho việc tiếp tục tích hợp chatbot và hệ thống gợi ý sản phẩm trong giai đoạn phát triển tiếp theo.