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

Trong bối cảnh công nghệ thông tin và mạng Internet phát triển mạnh mẽ, thương mại điện tử đã trở thành phương thức mua bán phổ biến trên toàn cầu cũng như tại Việt Nam. Người tiêu dùng ngày càng ưa chuộng việc tìm kiếm, lựa chọn và thanh toán hàng hóa trực tuyến bởi tính tiện lợi, tiết kiệm thời gian và khả năng nhận hàng tận nơi trong thời gian ngắn. Tuy nhiên, thị trường kinh doanh trực tuyến tại Việt Nam vẫn đối mặt với nhiều rào cản tâm lý từ phía khách hàng như lo ngại về chất lượng sản phẩm không đúng với quảng cáo, rủi ro giao hàng chậm hoặc thất lạc, cũng như những tổn thất chi phí của doanh nghiệp khi đơn hàng bị hoàn trả hoặc sai lệch địa chỉ.

Đối với lĩnh vực văn hóa phẩm và truyện tranh, nhu cầu tiếp cận các ấn phẩm mới, đa dạng thể loại của độc giả ngày càng tăng cao. Nhằm giải quyết các khó khăn trong khâu quản lý bán hàng truyền thống và khai thác tiềm năng của môi trường mạng, nhóm tác giả đã thực hiện đề tài "Thiết kế Website Bán Truyện Tranh Online" trong khuôn khổ học phần Đồ án Lập trình Web nâng cao.

Nhiệm vụ và mục tiêu nghiên cứu của đồ án được xác định gồm:

  1. Khảo sát thực trạng thương mại điện tử tại Việt Nam và mô tả bài toán kinh doanh truyện tranh trực tuyến.
  2. Phân tích yêu cầu nghiệp vụ, mô hình hóa các luồng chức năng của hệ thống cho hai nhóm đối tượng: Quản trị viên (Admin) và Khách hàng (User).
  3. Xây dựng tài liệu thiết kế hệ thống bao gồm sơ đồ chức năng, biểu đồ Use Case, biểu đồ trình tự (Sequence Diagram) và biểu đồ lớp (Class Diagram).
  4. Lựa chọn giải pháp công nghệ, cài đặt môi trường và thiết kế giao diện hoàn chỉnh cho các trang chức năng chính của website.

Đối tượng nghiên cứu là hệ thống phần mềm web bán truyện tranh trực tuyến, bao gồm cấu trúc dữ liệu, các luồng tương tác và giao diện người dùng. Phạm vi đề tài tập trung vào việc mô hình hóa, thiết kế kiến trúc và giao diện hệ thống cho cửa hàng kinh doanh truyện tranh trực tuyến.

STT Sinh viên thực hiện Mã sinh viên Nội dung thực hiện chính
1 Nguyễn Thế Tùng 21810310132 Làm báo cáo, vẽ biểu đồ Class, khảo sát đề tài
2 Trương Hoàng Anh 21810310130 Vẽ biểu đồ Use Case, vẽ biểu đồ trình tự, khảo sát đề tài

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

Đề tài áp dụng phương pháp phân tích và thiết kế hệ thống hướng đối tượng (OOAD) kết hợp ngôn ngữ mô hình hóa thống nhất (UML) để chuẩn hóa quy trình phát triển phần mềm:

  • Mô hình hóa chức năng và luồng tương tác: Sử dụng biểu đồ Use Case để phân định ranh giới chức năng của từng tác nhân; sử dụng biểu đồ trình tự (Sequence Diagram) để mô tả tuần tự các thông điệp trao đổi giữa người dùng, giao diện và hệ thống xử lý; sử dụng biểu đồ lớp (Class Diagram) để mô tả cấu trúc dữ liệu tĩnh.
  • Phương pháp khảo sát hiện trạng: Thu thập và phân tích các yêu cầu thực tế trong việc vận hành quy trình bán lẻ trực tuyến, từ quản lý kho hàng, danh mục, mã giảm giá đến xử lý thanh toán và giao nhận đơn hàng.
  • Mô hình dữ liệu phi cấu trúc: Áp dụng mô hình cơ sở dữ liệu hướng tài liệu (Document-oriented NoSQL) với cấu trúc dữ liệu BSON, hỗ trợ khả năng mở rộng linh hoạt và truy vấn động.
  • Nguồn dữ liệu và tài liệu tham khảo: Đề tài khai thác các kiến thức nền tảng từ học phần Lập trình Web nâng cao thuộc Khoa Công nghệ Thông tin - Trường Đại học Điện Lực, kết hợp tài liệu kỹ thuật chính thức của Node.js, MongoDB và ViteJS.

Thiết kế và triển khai

Hệ thống được thiết kế theo kiến trúc ứng dụng web hiện đại, phân định rõ ràng giữa giao diện người dùng (Frontend), tầng xử lý logic phía máy chủ (Backend Runtime) và tầng lưu trữ dữ liệu (Database):

  • Môi trường soạn thảo mã nguồn: Visual Studio Code (VS Code) được sử dụng làm công cụ biên tập chính nhờ khả năng tích hợp sẵn Git, hệ thống gỡ lỗi (Debugging), gợi ý mã nguồn (IntelliSense) và tính tương thích đa nền tảng trên Windows, macOS, Linux.
  • Môi trường thực thi phía máy chủ (Runtime): Node.js (nền tảng Javascript Runtime xây dựng trên V8 Engine của Google Chrome). Phần lõi (Core) của Node.js được viết bằng C++, hỗ trợ cơ chế xử lý bất đồng bộ và đáp ứng lưu lượng truy cập lớn theo thời gian thực.
  • Ngôn ngữ lập trình: JavaScript được lựa chọn cho cả quá trình xử lý kịch bản giao diện người dùng và logic điều hướng hệ thống.
  • Hệ quản trị cơ sở dữ liệu: MongoDB (phiên bản NoSQL mã nguồn mở). Dữ liệu được tổ chức dưới dạng các Document trong Collection, hỗ trợ các truy vấn ad-hoc (tìm kiếm theo trường, biểu thức chính quy, khoảng giá trị), lập chỉ mục (Indexing), cơ chế nhân bản dữ liệu (Replication) và các phép toán gộp (Aggregation) tương đương mệnh đề GROUP BY trong SQL. MongoDB lưu trữ và ghi đệm dữ liệu trên RAM nhằm tối ưu tốc độ đọc/ghi.
  • Công cụ xây dựng Frontend: ViteJS phiên bản 4 (Vite 4) chạy trên nền tảng Node.js (phiên bản 16 trở lên) và NPM. Vite 4 cung cấp máy chủ phát triển cục bộ tốc độ cao, hỗ trợ đóng gói tối ưu, tương thích chuẩn ES2020 và trình duyệt Safari 14.
  • Cơ chế thanh toán: Tích hợp hai phương thức gồm cổng thanh toán trực tuyến VNPAY và phương thức thanh toán tiền mặt khi nhận hàng (COD).

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

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI

Chương 1 trình bày lý do hình thành đề tài, sự cần thiết của việc xây dựng hệ thống website thương mại điện tử chuyên biệt cho ngành truyện tranh. Tác giả xác định website cần đáp ứng tiêu chuẩn giao diện đơn giản, thẩm mỹ, thuận tiện cho mọi đối tượng độc giả và danh mục truyện đa dạng, hình ảnh chân thực. Về mặt chiến lược vận hành, đề tài vạch ra 6 mục tiêu quảng bá cụ thể:

  1. Tăng cường nhận thức thương hiệu qua bộ nhận diện đồng nhất (logo, màu sắc).
  2. Phát triển nội dung chất lượng (truyện tranh mới, bài viết đánh giá).
  3. Xây dựng và duy trì tương tác cộng đồng trực tuyến.
  4. Tối ưu hóa công cụ tìm kiếm (SEO) để nâng cao thứ hạng website.
  5. Hợp tác quảng cáo với các đối tác trong ngành truyện tranh.
  6. Đo lường hiệu suất website thông qua các chỉ số lưu lượng và tỷ lệ chuyển đổi.

Chương này cũng xác định cấu trúc 6 trang chính của sản phẩm: Trang đăng nhập/đăng ký, Trang chủ, Trang sản phẩm, Trang chi tiết sản phẩm, Trang giỏ hàng, và Trang liên hệ.

CHƯƠNG 2: KHẢO SÁT VÀ PHÂN TÍCH HỆ THỐNG

Chương 2 chiếm dung lượng lớn nhất trong báo cáo, đi sâu vào khảo sát bài toán thực tế và chi tiết hóa toàn bộ các yêu cầu chức năng thông qua hệ thống đặc tả Use Case và biểu đồ trình tự cho hai phân hệ riêng biệt:

Phân hệ Chức năng nghiệp vụ Tác nhân Luồng xử lý chính & Đặc tả nghiệp vụ
Quản trị (Admin) Đăng nhập Admin Quản lý / Nhân viên Kiểm tra tài khoản trong CSDL, tạo phiên làm việc (Session) và phân quyền giao diện.
Quản lý khách hàng Quản lý / Nhân viên Xem danh sách chi tiết khách hàng, tìm kiếm và xóa thông tin tài khoản vi phạm.
Quản lý sản phẩm Quản lý / Nhân viên Thêm mới truyện tranh, cập nhật giá/thông tin, xóa sản phẩm và nhập số lượng tồn kho.
Quản lý mã giảm giá Quản lý / Nhân viên Thiết lập, chỉnh sửa và vô hiệu hóa các mã khuyến mại trên toàn hệ thống.
Quản lý danh mục Quản lý / Nhân viên Phân loại thể loại truyện, thêm mới, sửa đổi hoặc xóa bỏ các danh mục sản phẩm.
Quản lý nhà cung cấp Quản lý / Nhân viên Lưu trữ thông tin đối tác cung ứng, cập nhật địa chỉ liên hệ và danh mục nhập hàng.
Quản lý đơn hàng Quản lý / Nhân viên Tiếp nhận đơn đặt hàng, duyệt trạng thái xử lý, xác nhận đã thanh toán hoặc hủy đơn.
Thống kê báo cáo Quản lý / Nhân viên Trích xuất báo cáo doanh thu, số lượng đơn hàng, lượng khách hàng và lượt tương tác bài viết.
Khách hàng (User) Đăng ký tài khoản Khách hàng Nhập thông tin cá nhân, hệ thống kiểm tra trùng lặp dữ liệu và gửi email xác nhận.
Đăng nhập tài khoản Khách hàng Xác thực quyền người dùng, cung cấp cơ chế lấy lại mật khẩu qua email cá nhân.
Quản lý giỏ hàng Khách hàng Thêm truyện tranh vào giỏ, cập nhật số lượng mua, xóa sản phẩm và điều hướng đặt hàng.
Thanh toán đơn hàng Khách hàng Nhập địa chỉ nhận hàng, chọn cổng VNPAY hoặc thanh toán khi giao hàng (COD).
Quản lý đơn hàng Khách hàng Theo dõi tiến trình xử lý đơn hàng, xem lịch sử mua sắm và hủy các đơn chưa duyệt.
Tìm kiếm sản phẩm Khách hàng Truy vấn theo từ khóa tên truyện, lọc kết quả theo tiêu chí và hiển thị trạng thái tìm kiếm.

Chương 2 đồng thời cung cấp biểu đồ lớp (Class Diagram) tổng hợp mô hình dữ liệu tĩnh của toàn bộ hệ thống bán truyện tranh.

CHƯƠNG 3: GIẢI PHÁP

Chương 3 trình bày chi tiết về việc lựa chọn công nghệ và thiết lập môi trường phát triển (Setup Environment). Nhóm tác giả làm rõ vai trò của từng công cụ: Visual Studio Code đóng vai trò trình soạn thảo; Node.js cung cấp môi trường chạy JavaScript với hiệu năng cao; ViteJS phiên bản 4 đóng vai trò công cụ tối ưu hóa đóng gói Frontend.

Đặc biệt, chương này đưa ra phân tích khách quan về hệ quản trị cơ sở dữ liệu MongoDB:

  • Ưu điểm: Cấu trúc dữ liệu phi cấu trúc linh hoạt, khả năng mở rộng ngang (Horizontal Scaling) tốt qua sharding, tốc độ truy xuất cực nhanh nhờ cơ chế đệm dữ liệu trên RAM.
  • Nhược điểm được tác giả chỉ rõ: Thiếu cơ chế ràng buộc toàn vẹn dữ liệu chặt chẽ và không có hệ thống Transaction đạt chuẩn như các ứng dụng ngân hàng chuyên dụng; tiêu tốn dung lượng bộ nhớ RAM lớn; có rủi ro mất mát dữ liệu khi xảy ra sự cố mất điện đột ngột do cơ chế ghi trễ xuống ổ đĩa vật lý.

CHƯƠNG 4: GIAO DIỆN CỦA WEBSITE

Chương 4 hoàn thiện báo cáo bằng việc giới thiệu cấu trúc trực quan của hệ thống qua 7 phân vùng giao diện:

  1. Giao diện đăng nhập.
  2. Giao diện đăng ký tài khoản.
  3. Giao diện trang chủ (hiển thị sản phẩm nổi bật và thông tin xã hội).
  4. Giao diện trang danh sách sản phẩm.
  5. Giao diện trang danh mục sản phẩm.
  6. Giao diện giỏ hàng.
  7. Giao diện bảng điều khiển quản trị (Admin Dashboard).

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

Đồ án đã đạt được các kết quả cụ thể sau:

  • Khảo sát và xây dựng hoàn chỉnh tài liệu phân tích thiết kế cho hệ thống bán truyện tranh online với 14 ca sử dụng (Use Case) chi tiết, đi kèm đặc tả dòng sự kiện chính, dòng sự kiện phụ và biểu đồ trình tự tương ứng.
  • Thiết kế hoàn chỉnh mô hình biểu đồ lớp (Class Diagram) phục vụ lưu trữ cơ sở dữ liệu trên hệ quản trị MongoDB.
  • Thiết lập môi trường triển khai hiện đại kết hợp giữa Node.js, JavaScript và công cụ xây dựng ViteJS 4.
  • Tích hợp thành công quy trình mua sắm khép kín: từ khâu tìm kiếm, xem chi tiết, quản lý giỏ hàng, áp dụng mã giảm giá đến thanh toán trực tuyến qua cổng VNPAY.

Đóng góp chính của đồ án là đưa ra một giải pháp công nghệ rõ ràng, hiện đại nhằm số hóa mô hình kinh doanh truyện tranh truyền thống, giúp tự động hóa quy trình quản lý đơn hàng, quản lý kho và nâng cao trải nghiệm mua sắm trực tuyến cho độc giả.

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

Dựa trên nội dung khảo sát và phân tích của báo cáo, hệ thống còn tồn tại một số điểm hạn chế kỹ thuật:

  • Cơ sở dữ liệu MongoDB do ưu tiên tốc độ đọc/ghi và sử dụng bộ nhớ RAM làm trọng tâm nên chưa có các cơ chế giao dịch (Transaction) ràng buộc toàn vẹn tuyệt đối cho các nghiệp vụ tài chính phức tạp.
  • Hệ thống cần bổ sung giải pháp ghi đĩa định kỳ an toàn hơn nhằm loại trừ rủi ro mất dữ liệu khi máy chủ gặp sự cố nguồn điện đột ngột.

Hướng mở rộng và phát triển tiếp theo của đề tài:

  • Hoàn thiện module tương tác cộng đồng theo mục tiêu đã đặt ra (tích hợp diễn đàn, hệ thống bình luận, chia sẻ đánh giá đa chiều trên mạng xã hội).
  • Tối ưu hóa các giải thuật tìm kiếm, bộ lọc nâng cao và triển khai các giải pháp SEO chuyên sâu nhằm tăng cường lưu lượng truy cập thực tế.

Giá trị tham khảo

Đồ án là tài liệu tham khảo hữu ích dành cho:

  • Sinh viên ngành Công nghệ thông tin, Kỹ thuật phần mềm: Đặc biệt là sinh viên đang thực hiện đồ án học phần Lập trình Web nâng cao hoặc đồ án tốt nghiệp về đề tài thương mại điện tử.
  • Người học phân tích thiết kế hệ thống: Báo cáo cung cấp cấu trúc đặc tả Use Case, Sequence Diagram và Class Diagram rất chuẩn mực, mạch lạc giữa hai phân hệ Admin và Khách hàng.
  • Lập trình viên Full-stack JavaScript: Tham khảo mô hình kết hợp giữa Node.js, Vite 4 và cơ sở dữ liệu MongoDB trong các bài toán web bán hàng thực tế.

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

1. Đề tài được thực hiện bởi sinh viên nào, thuộc đơn vị đào tạo nào?
Đề tài do hai sinh viên Nguyễn Thế Tùng (MSV: 21810310132) và Trương Hoàng Anh (MSV: 21810310130), lớp D16CNPM5, khóa D16, ngành Công nghệ thông tin - chuyên ngành Kỹ thuật phần mềm thuộc Khoa Công nghệ Thông tin, Trường Đại học Điện Lực thực hiện dưới sự hướng dẫn của thầy Phương Văn Cảnh.

2. Phân công nhiệm vụ cụ thể giữa các thành viên trong nhóm như thế nào?
Sinh viên Nguyễn Thế Tùng phụ trách viết báo cáo tổng hợp, vẽ biểu đồ Class và khảo sát đề tài. Sinh viên Trương Hoàng Anh đảm nhận việc vẽ biểu đồ Use Case, vẽ biểu đồ trình tự (Sequence Diagram) và khảo sát đề tài.

3. Phân hệ quản trị (Admin) bao gồm những chức năng quản lý chính nào?
Phân hệ Admin gồm 8 chức năng cốt lõi: Đăng nhập quản trị, Quản lý thông tin khách hàng, Quản lý sản phẩm, Quản lý mã giảm giá, Quản lý danh mục sản phẩm, Quản lý nhà cung cấp, Quản lý đơn hàng, và Thống kê tổng hợp (doanh thu, đơn hàng, sản phẩm, khách hàng, bài viết).

4. Khách hàng có thể thực hiện thanh toán đơn hàng qua những hình thức nào trên website?
Hệ thống hỗ trợ 2 phương thức thanh toán cho khách hàng: thanh toán trực tuyến thông qua cổng thanh toán VNPAY hoặc thanh toán bằng tiền mặt khi nhận hàng (COD).

5. Những nhược điểm chính của hệ cơ sở dữ liệu MongoDB được nhóm tác giả nêu ra trong báo cáo là gì?
Nhóm tác giả chỉ rõ MongoDB không ứng dụng được cho các giao dịch đòi hỏi độ chính xác tuyệt đối do thiếu ràng buộc toàn vẹn; không có cơ chế Transaction chặt chẽ như ứng dụng ngân hàng; đòi hỏi dung lượng RAM lớn; và tiềm ẩn nguy cơ mất dữ liệu khi mất điện đột xuất do dữ liệu mặc định chưa được ghi xuống ổ đĩa ngay lập tức.

Kết luận

Đề tài "Thiết kế Website Bán Truyện Tranh Online" của nhóm sinh viên Trường Đại học Điện Lực đã xây dựng thành công bộ tài liệu phân tích thiết kế và mô hình kiến trúc website thương mại điện tử chuyên biệt. Hệ thống được mô hình hóa chi tiết thông qua các biểu đồ UML chuẩn mực và áp dụng các công nghệ hiện đại như Node.js, JavaScript, MongoDB và ViteJS 4. Đây là công trình học tập nghiêm túc, có giá trị ứng dụng thực tiễn cao cho việc số hóa mô hình phân phối truyện tranh và là tài liệu tham khảo bổ ích cho sinh viên chuyên ngành công nghệ phần mềm.