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

Sự phát triển nhanh chóng của công nghệ thông tin và mạng Internet đã đưa thương mại điện tử trở thành một phương thức giao dịch phổ biến trong đời sống xã hội. Hoạt động mua sắm trực tuyến không chỉ diễn ra ở quy mô các doanh nghiệp lớn mà còn phát triển mạnh mẽ trong từng hộ gia đình và cá nhân, đặc biệt là nhóm đối tượng khách hàng trẻ (GenZ). Đối với ngành hàng phụ kiện thời trang (ví da, kính mát, mũ nón, trang sức, túi xách, giày dép), việc tiếp cận qua các kênh trực tuyến giúp người tiêu dùng tiết kiệm thời gian di chuyển, dễ dàng so sánh mẫu mã và nhận các đề xuất phối hợp sản phẩm phù hợp.

Đề tài "Xây Dựng Website Bán Phụ Kiện Thời Trang (TAA)" được thực hiện trong khuôn khổ môn học Internet và Công nghệ Web (mã lớp IE104.O12) tại Khoa Khoa học và Kỹ thuật Thông tin, Trường Đại học Công nghệ Thông tin – Đại học Quốc gia Thành phố Hồ Chí Minh, dưới sự hướng dẫn của ThS. Võ Tấn Khoa (hoàn thành vào tháng 12/2023). Đề tài tập trung giải quyết các nhiệm vụ nghiên cứu và phát triển phần mềm cụ thể sau:

  1. Khảo sát thực trạng, tiến hành đánh giá chuẩn đối sánh (benchmarking) trên các website thương mại điện tử bán phụ kiện thời trang đang vận hành tại Việt Nam nhằm xác định các ưu điểm cần học hỏi và nhược điểm cần khắc phục.
  2. Thu thập, phân tích và mô hình hóa chi tiết các yêu cầu chức năng (lưu trữ, tìm kiếm, tính toán) cùng các yêu cầu phi chức năng của hệ thống.
  3. Thiết kế kiến trúc tổng thể, sơ đồ trường hợp sử dụng (Use Case), sơ đồ lớp đối tượng (Class Diagram), mô hình dữ liệu quan hệ (Relational Schema) và bộ giao diện người dùng tương thích đa thiết bị trên nền tảng Figma.
  4. Hiện thực hóa website bằng kiến trúc phân lớp: Front-end sử dụng HTML, CSS, JavaScript thuần và Back-end sử dụng Node.js kết hợp Express framework và EJS template engine.
  5. Thiết kế kịch bản và thực thi toàn diện các cấp độ kiểm thử phần mềm bao gồm kiểm thử đơn vị, kiểm thử tích hợp (thông qua 4 bộ Test Suite bằng công cụ tự động hóa Selenium IDE) và kiểm thử hệ thống (chức năng, phục hồi sau sự cố, hiệu năng tải).

Đối tượng nghiên cứu của đồ án là quy trình kỹ thuật xây dựng và triển khai một website thương mại điện tử chuyên ngành phụ kiện thời trang. Phạm vi nghiên cứu về mặt công nghệ giới hạn trong môi trường phát triển mã nguồn mở cục bộ (XAMPP/Node.js) và các giao diện hiển thị đáp ứng (responsive) theo các chuẩn màn hình máy tính, máy tính bảng (iPad mini - 768px) và điện thoại di động (iPhone 12 Pro - 390px).

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

Nhóm tác giả lựa chọn Mô hình Thác nước cải tiến (Modified Waterfall Model) làm phương pháp luận phát triển phần mềm. Mô hình này duy trì tính tuần tự chặt chẽ qua từng giai đoạn, đồng thời cho phép cơ chế phản hồi và tinh chỉnh quay vòng khi phát sinh lỗi ở bất kỳ bước nào trong vòng đời phát triển:

  • Bước 1: Xác định và mô hình hóa yêu cầu: Thu thập và phân loại yêu cầu nghiệp vụ của hệ thống thương mại điện tử.
  • Bước 2: Phân tích và đánh giá ứng dụng tương tự: Khảo sát thực tế các website cạnh tranh để lập kế hoạch thiết kế chức năng.
  • Bước 3: Thiết kế phần mềm: Thực hiện thiết kế hệ thống (Use Case), thiết kế cấu trúc dữ liệu quan hệ và thiết kế giao diện đồ họa.
  • Bước 4: Xây dựng phần mềm: Cài đặt mã nguồn Front-end và Back-end trên môi trường phát triển cục bộ.
  • Bước 5: Kiểm thử phần mềm: Thực nghiệm kiểm thử đơn vị, kiểm thử tích hợp và kiểm thử hệ thống nhằm phát hiện và sửa chữa lỗi.
  • Bước 6: Bảo trì: Duy trì hoạt động ổn định và tối ưu hóa tính năng sau triển khai.

Phương pháp khảo sát đối chuẩn được thực hiện vào ngày 29/09/2023 trên hai website kinh doanh phụ kiện thời trang thực tế tại Việt Nam: Website Nhà Cú (The Little Owl) và Website Sicko. Kết quả so sánh làm cơ sở lý thuyết cho việc xây dựng website TAA được tổng hợp trong bảng sau:

Tiêu chí so sánh Website Nhà Cú (The Little Owl) Website Sicko Định hướng áp dụng cho Website TAA
Tông màu & Nhận diện Trắng và nâu sáng, logo linh vật con cú tạo sự ấm áp. Trắng, điểm nhấn xanh lá đậm và đen, phong cách tối giản. Xây dựng bộ nhận diện TAA riêng biệt, màu sắc hài hòa với sản phẩm phụ kiện.
Thanh điều hướng (Nav) Đầy đủ thông tin, có khả năng co giãn linh hoạt khi cuộn trang. Điều hướng ngang kết hợp menu phụ, phân nhóm rõ ràng. Thiết kế thanh điều hướng cố định, tích hợp menu đa cấp và thanh tìm kiếm nhanh.
Trình bày sản phẩm Bố cục ảnh sáng tạo, có tính năng xem nhanh nhưng không phân trang. Tập trung banner người mẫu; trang bộ phối thiếu chi tiết từng sản phẩm. Hỗ trợ tính năng xem nhanh (Quick View), phân trang rõ ràng, bổ sung chi tiết bộ phối.
Tính năng giỏ hàng Có ghi chú, nhưng chỉ cho phép mua toàn bộ giỏ hàng, không chọn lẻ. Đầy đủ thêm, xóa, tạm tính chi phí đơn hàng. Cho phép chọn/bỏ chọn từng sản phẩm trong giỏ để tính tổng tiền và thanh toán lẻ.
Khả năng hiển thị Phông chữ nhỏ, một số chi tiết gây khó hiểu (số điện thoại trên Header). Phông chữ mảnh, cỡ chữ menu nhỏ; trang bộ sưu tập còn để trống. Tối ưu hóa kích thước phông chữ, tăng độ tương phản và lấp đầy nội dung trang.

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

Chương 1. Giới thiệu tổng quan

Chương 1 thiết lập luận điểm về sự cần thiết của thương mại điện tử đối với ngành phụ kiện thời trang. Tác giả xác định mục tiêu xây dựng website TAA, phân định phạm vi trách nhiệm kỹ thuật của nhóm thực hiện (lập trình HTML, CSS, JavaScript, Node.js) và phạm vi phục vụ khách hàng. Chương này cũng chuẩn hóa 6 bước phát triển hệ thống theo mô hình Thác nước cải tiến.

Chương 2. Cơ sở lý thuyết và nền tảng công nghệ

Nội dung chương trình bày danh mục công cụ quản lý dự án (Notion, Google Drive, Google Meet, Git/GitHub), công cụ thực hiện (Figma, Visual Studio Code, XAMPP) và nền tảng công nghệ (Front-end: HTML/CSS/JS thuần; Back-end: Node.js, Express, EJS). Đồng thời, chương đi sâu phân tích dữ liệu khảo sát từ hai website Nhà Cú và Sicko để rút ra các bài học thực tiễn về tối ưu hóa giao diện và cấu trúc tính năng.

Chương 3. Phân tích hệ thống

Chương 3 chi tiết hóa các yêu cầu của hệ thống phần mềm, phân định rõ:

  • Yêu cầu chức năng: Yêu cầu lưu trữ thông tin (người dùng, danh mục, sản phẩm, đơn hàng, giỏ hàng, đánh giá, bài viết), yêu cầu tìm kiếm và lọc sản phẩm đa tiêu chí, yêu cầu tính toán tự động giá trị đơn hàng và phí vận chuyển.
  • Yêu cầu phi chức năng: Tính toàn vẹn dữ liệu, hiệu năng tải trang, tính ổn định và khả năng hiển thị đáp ứng (responsive web design) trên nhiều độ phân giải màn hình.

Chương 4. Thiết kế hệ thống

Chương 4 cung cấp toàn bộ bản vẽ thiết kế kỹ thuật của hệ thống:

  • Thiết kế hệ thống: Xây dựng sơ đồ Use Case tổng quát, phân loại 2 Actor chính (UnauthUser - Khách vãng lai và User - Khách hàng đã đăng nhập) kèm đặc tả luồng cơ bản (Basic Flow), luồng thay thế (Alternative Flow) và luồng ngoại lệ (Exception Flow).
  • Thiết kế đối tượng: Định nghĩa 16 lớp đối tượng nghiệp vụ và xây dựng sơ đồ lớp tổng quan.
  • Thiết kế dữ liệu: Thiết lập mô hình cơ sở dữ liệu quan hệ gồm 16 bảng dữ liệu, chuẩn hóa các ràng buộc khóa chính, khóa ngoại và toàn vẹn tham chiếu.
  • Thiết kế giao diện: Bản vẽ wireframe chi tiết trên Figma cho tất cả các trang giao diện (Header, Footer, Trang chủ, Đăng ký, Đăng nhập, Quên mật khẩu/OTP, Trang sản phẩm, Chi tiết sản phẩm, Giỏ hàng, Thanh toán, Trang cá nhân, Tin tức, Hướng dẫn mua hàng, Chính sách bảo hành & đổi trả).

Chương 5. Kết quả hiện thực

Chương 5 trình bày minh chứng kết quả lập trình website thực tế:

  • Giao diện đa thiết bị: Hiện thực hóa giao diện tương thích hoàn chỉnh trên màn hình máy tính (Desktop), máy tính bảng (iPad mini 768px) và điện thoại thông minh (iPhone 12 Pro 390px).
  • Tính năng nghiệp vụ: Minh họa các chức năng đăng ký (bắt lỗi định dạng mật khẩu, kiểm tra trùng số điện thoại), đăng nhập/đăng xuất, tìm kiếm, lọc sản phẩm theo danh mục, tính năng xem nhanh, tương tác giỏ hàng (thay đổi số lượng, xóa món hàng), tính toán tổng tiền đơn hàng và lưu trữ sản phẩm yêu thích.

Chương 6. Kiểm thử hệ thống

Chương 6 tài liệu hóa toàn bộ hoạt động đảm bảo chất lượng phần mềm:

  • Kiểm thử đơn vị (Unit Test): Xây dựng và thực thi 16 bảng Test Case cho các hàm chức năng độc lập.
  • Kiểm thử tích hợp (Integration Test): Thiết kế 4 bộ thử nghiệm (Test Suite 1 đến Test Suite 4) và tự động hóa quy trình kiểm thử bằng công cụ Selenium IDE.
  • Kiểm thử hệ thống (System Test): Đánh giá chức năng tổng thể, kiểm thử kịch bản mất kết nối máy chủ và khôi phục hoạt động, kiểm thử hiệu năng thông qua kịch bản gửi HTTP Request (ghi nhận báo cáo Summary Report và View Result Tree).

Chương 7. Kết luận và hướng phát triển

Chương cuối tổng kết các hạng mục đã hoàn thành về mặt giao diện và chức năng, phân tích các điểm hạn chế trong quá trình thực hiện đồ án và vạch ra lộ trình nâng cấp hệ thống trong tương lai.

Thiết kế và triển khai

Kiến trúc công nghệ và môi trường thực thi

Hệ thống website bán phụ kiện thời trang TAA được xây dựng theo mô hình phân tầng nguyên khối (monolithic architecture):

  • Quản lý phiên bản & Tiến độ: Sử dụng Notion để phân rã công việc, Git và GitHub để kiểm soát phiên bản mã nguồn, Google Drive lưu trữ tài nguyên đa phương tiện.
  • Công cụ phát triển: Figma dùng để thiết kế mẫu giao diện; Visual Studio Code làm môi trường phát triển tích hợp (IDE); XAMPP cung cấp môi trường máy chủ cục bộ bao gồm Apache và hệ quản trị cơ sở dữ liệu MySQL.
  • Tầng trình diễn (Front-end): Xây dựng bằng mã nguồn thuần HTML5, CSS3 và JavaScript (ES6), không sử dụng framework trung gian nhằm kiểm soát tối đa cấu trúc DOM và khả năng tương thích responsive trên 3 kích thước: Desktop, Tablet (iPad mini 768px) và Mobile (iPhone 12 Pro 390px).
  • Tầng xử lý logic (Back-end): Chạy trên môi trường runtime Node.js kết hợp Express framework để điều hướng tuyến đường (routing) và xử lý API; EJS (Embedded JavaScript) làm công cụ render template giao diện từ máy chủ.

Thiết kế cấu trúc dữ liệu

Cơ sở dữ liệu của hệ thống được thiết kế trên mô hình quan hệ chuẩn hóa gồm 16 bảng thực thể và bảng liên kết:

  1. User: Lưu trữ hồ sơ người dùng (họ tên, email, số điện thoại, mật khẩu).
  2. UnauthUser: Quản lý phiên truy cập của khách vãng lai chưa đăng nhập.
  3. Location: Lưu trữ danh sách địa chỉ nhận hàng của người dùng.
  4. BankCard: Lưu trữ thông tin tài khoản/thẻ ngân hàng phục vụ thanh toán.
  5. Category: Danh mục sản phẩm cấp cao.
  6. CategoryType: Loại danh mục chi tiết thuộc từng danh mục chính.
  7. Product: Thông tin sản phẩm (mã, tên, giá bán, mô tả, số lượng tồn).
  8. ProductImage: Tập hợp liên kết hình ảnh mô tả cho từng sản phẩm.
  9. FavorProduct: Bảng trung gian quản lý danh sách sản phẩm yêu thích của người dùng.
  10. Cart: Quản lý các mặt hàng đang được lưu tạm trong giỏ hàng.
  11. Order: Thông tin tổng quát về đơn đặt hàng (ngày đặt, trạng thái, tổng tiền).
  12. OrderDetail: Chi tiết các mặt hàng, đơn giá và số lượng trong từng đơn hàng.
  13. PayingMethod: Danh mục các phương thức thanh toán (Tiền mặt COD, Chuyển khoản ngân hàng).
  14. TransportMethod: Danh mục phương thức và cước phí vận chuyển.
  15. Rating: Lưu trữ điểm đánh giá và nhận xét sản phẩm của khách hàng.
  16. Blog: Quản lý các bài viết tin tức, hướng dẫn mua hàng và chính sách bảo hành/đổi trả.

Tổ chức kiểm thử phần mềm

Quy trình kiểm thử được thiết lập đa tầng nhằm đảm bảo độ tin cậy của phần mềm:

  • Kiểm thử đơn vị: 16 kịch bản kiểm thử riêng lẻ bao gồm các chức năng Đăng ký, Đăng nhập, Xem sản phẩm, Tìm kiếm, Lọc, Đổi mật khẩu, Lịch sử mua hàng, Đặt hàng, Đánh giá, Thao tác giỏ hàng, Mua nhanh và Quản lý mục yêu thích.
  • Kiểm thử tích hợp: Phân chia thành 4 bộ thử nghiệm (Test Suite) chạy tự động qua Selenium IDE:
    • Test Suite 1: Quản lý tài khoản người dùng (Đăng ký, Đăng nhập, Xác thực OTP, Cập nhật thông tin).
    • Test Suite 2: Tìm kiếm và xem thông tin (Truy vấn từ khóa, Lọc danh mục, Sắp xếp kết quả, Đọc tin tức).
    • Test Suite 3: Quản lý mua sắm (Luồng mua nhanh, Đặt hàng, Tra cứu lịch sử mua hàng, Đánh giá sản phẩm).
    • Test Suite 4: Quản lý giỏ hàng (Thêm sản phẩm, Tăng giảm số lượng sản phẩm, Xóa sản phẩm khỏi giỏ).
  • Kiểm thử hệ thống:
    • Kiểm thử chức năng: Rà soát sự liên kết xuyên suốt giữa các phân hệ từ Front-end đến Back-end.
    • Kiểm thử khả năng phục hồi: Giả lập tình huống máy chủ ngắt kết nối đột ngột và đánh giá khả năng tự khôi phục dữ liệu/trạng thái khi kết nối lại.
    • Kiểm thử hiệu năng: Thực thi kịch bản gửi HTTP Request (endpoint đăng nhập), phân tích kết quả qua Summary Report và View Result Tree.

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

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

  • Hoàn thiện website thương mại điện tử TAA với đầy đủ các phân hệ chức năng từ tra cứu, giỏ hàng, thanh toán đến quản lý tài khoản cá nhân.
  • Đạt độ tương thích hiển thị đáp ứng (responsive) trên cả ba môi trường thiết bị phổ biến: Desktop, iPad mini (768px) và iPhone 12 Pro (390px).
  • Thiết lập hệ thống cơ sở dữ liệu quan hệ đồng bộ 16 bảng, đảm bảo tính toàn vẹn khóa chính - khóa ngoại và hỗ trợ truy vấn hiệu quả.
  • Tự động hóa thành công quy trình kiểm thử tích hợp trên trình duyệt bằng Selenium IDE và thực hiện kiểm thử tải bằng HTTP Request.

Cải tiến so với các hệ thống khảo sát

Dựa trên kết quả phân tích đối chuẩn từ website Nhà Cú và Sicko, đồ án đã hiện thực hóa các giải pháp cải tiến cụ thể:

  1. Khắc phục hạn chế của Website Nhà Cú: Bổ sung cơ chế phân trang khoa học cho danh mục sản phẩm thay vì cuộn vô tận gây khó theo dõi; thiết kế lại nút chuyển lên đầu trang với kích thước trực quan; đặc biệt là nâng cấp tính năng giỏ hàng cho phép người dùng tick chọn từng món hàng cụ thể để tính tiền thay vì bắt buộc thanh toán toàn bộ giỏ hàng.
  2. Khắc phục hạn chế của Website Sicko: Tăng kích thước phông chữ và độ tương phản màu sắc giúp cải thiện trải nghiệm đọc; bổ sung đầy đủ thông tin chi tiết về từng thành phần trong các bộ phối đồ; lấp đầy nội dung cho tất cả các trang tĩnh (bài viết, chính sách bảo hành, hướng dẫn mua hàng), không để xuất hiện các trang trống gây gián đoạn trải nghiệm người dùng.

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

Hạn chế của đề tài

  • Hệ thống mới chỉ được triển khai và thử nghiệm trong môi trường máy chủ cục bộ (localhost trên nền XAMPP), chưa được đưa lên máy chủ đám mây (Production/Cloud Server) để đón nhận lưu lượng người dùng thực tế.
  • Tầng giao diện sử dụng hoàn toàn mã nguồn HTML/CSS/JavaScript thuần, chưa tích hợp các framework quản lý trạng thái tập trung (như React, Vue hoặc Angular) dẫn đến việc mở rộng các tính năng phức tạp trong tương lai sẽ gặp khó khăn.
  • Quá trình phối hợp tiến độ giữa các thành viên trong nhóm đôi lúc còn phát sinh độ trễ (được ghi nhận trong bảng đánh giá phân công công việc).

Hướng phát triển tiếp theo

  • Tích hợp cổng thanh toán trực tuyến tự động của bên thứ ba (các cổng thanh toán số như VNPAY, MoMo, ZaloPay) thay thế cho hình thức chuyển khoản thủ công.
  • Xây dựng phân hệ quản trị chuyên sâu (Admin Dashboard) phục vụ quản lý xuất nhập tồn kho, thống kê doanh thu và phân quyền nhân viên.
  • Triển khai hệ thống lên hạ tầng đám mây (Cloud Hosting), kích hoạt chứng chỉ bảo mật HTTPS và tối ưu hóa công cụ tìm kiếm (SEO).

Giá trị tham khảo

Báo cáo đồ án là tài liệu tham khảo hữu ích cho sinh viên ngành Công nghệ Thông tin, Khoa học Máy tính, Kỹ thuật Phần mềm và Hệ thống Thông tin đang thực hiện các đồ án môn học liên quan đến Công nghệ Web (IE104) hoặc đồ án tốt nghiệp phát triển phần mềm ứng dụng.

Các nội dung có giá trị thực tiễn cao bao gồm:

  • Phương pháp phân tích đối chuẩn (benchmarking) từ các website thực tế để xây dựng bảng yêu cầu phần mềm.
  • Mô hình thiết kế Use Case, sơ đồ lớp đối tượng và thiết kế cơ sở dữ liệu quan hệ 16 bảng chuẩn mực cho bài toán thương mại điện tử.
  • Quy trình tổ chức các bộ kiểm thử tích hợp (Test Suites) tự động bằng công cụ Selenium IDE kết hợp kiểm thử tải hiệu năng qua HTTP Request.

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

1. Đồ án áp dụng quy trình phát triển phần mềm nào và gồm các giai đoạn nào?
Đồ án áp dụng Mô hình Thác nước cải tiến (Modified Waterfall Model) gồm 6 giai đoạn nối tiếp: Xác định và mô hình hóa yêu cầu; Phân tích và đánh giá ứng dụng tương tự; Thiết kế phần mềm (hệ thống, dữ liệu, giao diện); Xây dựng phần mềm (cài đặt Front-end và Back-end); Kiểm thử phần mềm; Bảo trì.

2. Tech stack được nhóm tác giả sử dụng để phát triển website TAA gồm những gì?
Hệ thống sử dụng Figma để thiết kế giao diện; VS Code và XAMPP làm môi trường lập trình và máy chủ cục bộ; Front-end xây dựng bằng HTML, CSS và JavaScript thuần; Back-end sử dụng Node.js kết hợp Express framework và EJS template engine; Cơ sở dữ liệu quan hệ MySQL; Kiểm thử bằng Selenium IDE và công cụ kiểm thử HTTP Request.

3. Những website thực tế nào đã được khảo sát để rút kinh nghiệm thiết kế cho website TAA?
Nhóm tác giả đã tiến hành khảo sát và đánh giá đối chuẩn vào ngày 29/09/2023 trên hai website: Website Nhà Cú (The Little Owl - thelittleowl) và Website Sicko (sicko).

4. Quy trình kiểm thử tích hợp trong đồ án được cấu trúc thành những bộ thử nghiệm nào?
Kiểm thử tích hợp được tổ chức thành 4 bộ thử nghiệm (Test Suite) thực thi tự động qua Selenium IDE: Test Suite 1 (Quản lý tài khoản người dùng), Test Suite 2 (Tìm kiếm và xem thông tin), Test Suite 3 (Quản lý mua sắm) và Test Suite 4 (Quản lý giỏ hàng).

5. Giao diện website TAA được thiết kế đáp ứng trên các độ phân giải màn hình cụ thể nào?
Giao diện được kiểm thử và đáp ứng hoàn chỉnh trên 3 chuẩn kích thước: Màn hình máy tính (Desktop), máy tính bảng iPad mini (768px) và điện thoại thông minh iPhone 12 Pro (390px).

Kết luận

Báo cáo đồ án môn học Internet và Công nghệ Web của nhóm sinh viên Trường Đại học Công nghệ Thông tin – ĐHQG-HCM đã hoàn thành trọn vẹn mục tiêu xây dựng website bán phụ kiện thời trang TAA theo mô hình Thác nước cải tiến. Công trình thể hiện sự chỉn chu từ khâu khảo sát thực tế, mô hình hóa hệ thống, thiết kế cơ sở dữ liệu 16 bảng cho đến hiện thực hóa giao diện responsive đa thiết bị bằng công nghệ Node.js và HTML/CSS/JS thuần. Hệ thống kịch bản kiểm thử đa cấp độ bằng Selenium IDE và HTTP Request đã chứng minh tính đúng đắn, độ ổn định và khả năng phục hồi của ứng dụng trước khi đề xuất các hướng mở rộng về cổng thanh toán và triển khai đám mây.