Giới thiệu dự án

Sự bùng nổ của nền kinh tế số cùng thương mại điện tử (E-commerce) tại Việt Nam với tốc độ tăng trưởng trung bình hơn 25-30%/năm đã biến việc sở hữu một kênh bán hàng trực tuyến trở thành yêu cầu sống còn đối với mọi doanh nghiệp và cá nhân kinh doanh. Tuy nhiên, rào cản kỹ thuật phức tạp, chi phí gia công phần mềm đắt đỏ (thường dao động từ 10 đến 50 triệu VNĐ cho một website hoàn chỉnh), cùng thời gian triển khai kéo dài hàng tuần là những rào cản lớn đối với các hộ kinh doanh vừa và nhỏ (SMEs).

Đề tài khóa luận tốt nghiệp kỹ sư Công nghệ thông tin "Xây dựng ứng dụng web tạo website bán hàng" (WebX Builder Platform) do sinh viên Mai Đức Tuấn và Nguyễn Văn Vũ thực hiện dưới sự hướng dẫn của ThS. Nguyễn Minh Đạo tại Trường Đại học Sư phạm Kỹ thuật TP.HCM (HCMUTE) giải quyết trực diện các vấn đề nhức nhối trên. Hệ thống cung cấp nền tảng No-code / Low-code kéo thả trực quan, giúp người dùng không có kiến thức lập trình có thể tự tạo, tùy biến và triển khai tự động (automated deploy) một website bán hàng chuyên nghiệp lên subdomain chỉ trong vài phút.

+-------------------------------------------------------------------------+
|                       HỆ SINH THÁI NỀN TẢNG WEBX                       |
+-------------------------------------------------------------------------+
                                    │
         ┌──────────────────────────┴──────────────────────────┐
         ▼                                                     ▼
┌─────────────────────────────────┐   ┌─────────────────────────────────┐
│     WEBX - BUILDER PLATFORM     │   │      WEBY - CLIENT WEBSITES     │
│ - Visual Drag & Drop Engine     │   │ - Dynamic Responsive Storefront │
│ - Nested Component Hierarchy    │   │ - Shopping Cart & Checkout Flow │
│ - Automated Subdomain Deploy    │   │ - MoMo Payment Gateway API v2   │
│ - Multi-Tenant Admin Dashboard  │   │ - Order / Inventory Management  │
└─────────────────────────────────┘   └─────────────────────────────────┘

Mục tiêu dự án

  1. Xây dựng công cụ kéo thả trực quan (Drag-and-Drop Builder): Hỗ trợ tùy biến linh hoạt toàn bộ cấu trúc trang (Header, Banner/Carousel, Product List, Contact, Footer, Typography, Theme Palette).
  2. Tự động hóa triển khai đa người dùng (Multi-tenant Subdomain Routing): Cấu hình hệ thống điều phối tên miền con tự động ([site-name].designwebx.online) thông qua NGINX Reverse Proxy và Docker.
  3. Đảm bảo chuẩn hiển thị đa thiết bị (Responsive Web Design): Tối ưu 100% giao diện tương thích mượt mà trên Desktop (1920x1080), Tablet (768x1024), và Mobile (375x812).
  4. Trang bị hệ thống quản trị chuyên sâu (Store Management WebY): Cung cấp Dashboard quản lý kho sản phẩm, đơn hàng, người dùng và tích hợp cổng thanh toán trực tuyến MoMo E-Wallet.
  5. Hệ thống hóa thông báo thời gian thực: Tự động gửi email xác thực và cập nhật trạng thái đơn hàng tức thì cho khách hàng.

Giải pháp kỹ thuật và kết quả kỳ vọng

Dự án áp dụng mô hình phân tách hoàn toàn giữa Nền tảng thiết kế (WebX) và Trang đích của khách hàng (WebY) dựa trên cơ chế lưu trữ cây đối tượng (Component Tree JSON Schema) trong cơ sở dữ liệu MongoDB NoSQL. Giải pháp này giúp rút ngắn thời gian khởi tạo website xuống dưới 5 phút, giảm 90% chi phí vận hành so với việc thuê server riêng lẻ cho từng cửa hàng.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Khảo sát thực tế các nền tảng xây dựng website phổ biến hiện nay:

Tiêu chí phân tích WordPress + WooCommerce Wix Platform Weebly Builder Hệ thống đề xuất (WebX)
Độ phức tạp cài đặt Cao (Cần Web Server, PHP, MySQL, cấu hình vHost) Thấp (SaaS đám mây hoàn toàn) Thấp (SaaS đám mây) Rất thấp (Zero-configuration qua Web UI)
Tốc độ tải Builder Trung bình (Nặng nề do nhiều plugin) Chậm (Thời gian load bộ soạn thảo > 4.5s) Chậm (Nhiều mã nguồn thừa) Nhanh (< 1.8s nhờ Vue.js SPA & V8 Engine)
Thanh toán nội địa Cần cài thêm plugin bên thứ ba Hạn chế với cổng thanh toán nội địa VN Không hỗ trợ thanh toán MoMo nội địa Tích hợp sẵn MoMo API v2 trực tiếp
Cơ chế triển khai Thủ công qua hosting/cPanel Tự động trên Subdomain Wix Tự động trên Subdomain Weebly Tự động qua NGINX Dynamic Subdomain
Khả năng Responsive Phụ thuộc vào từng theme cụ thể Lỗi vỡ khung trên một số màn hình Mobile Kém mượt trên thiết bị di động Đảm bảo 100% chuẩn CSS Flexbox & Grid

Phân loại yêu cầu theo mô hình MoSCoW

  • Must-have (Bắt buộc): Bộ kéo thả component, lưu trữ cấu trúc page dưới dạng JSON, hệ thống xác thực BCrypt, cơ chế định tuyến subdomain NGINX, quản lý CRUD sản phẩm và đơn hàng, tích hợp MoMo.
  • Should-have (Nên có): Tự động gửi mail thông báo đơn hàng, xem trước giao diện đa kích thước màn hình (Desktop/Tablet/Mobile Preview), công cụ upload media server tập trung.
  • Could-have (Có thể có): Báo cáo phân tích doanh thu dạng biểu đồ, thống kê truy cập traffic.
  • Won't-have (Chưa phát triển trong phiên bản hiện tại): Tích hợp API đối tác vận chuyển bên thứ 3 (GHN, GHTK), kết nối tên miền riêng TLD độc lập (.com, .vn) ngoài subdomain.

Thiết kế hệ thống

Hệ thống được thiết kế theo kiến trúc hướng dịch vụ nhiều tầng (Multi-tier Architecture):

+─────────────────────────────────────────────────────────────────────────+
|                        NGINX REVERSE PROXY (Port 80/443)                |
|           - Dynamic Wildcard Subdomain Routing: *.designwebx.online    |
+─────────────────────────────────────────────────────────────────────────+
                   │                                         │
        [designwebx.online]                         [tenant.designwebx.online]
                   ▼                                         ▼
+─────────────────────────────────────+   +───────────────────────────────+
|      WEBX BUILDER APPLICATION       |   |   WEBY CLIENT STOREFRONT      |
|  - Vue.js 2.6 / Nuxt.js Frontend    |   |  - Dynamic JSON Tree Renderer |
|  - Component State Manager (Vuex)   |   |  - Client Shopping & Cart     |
+─────────────────────────────────────+   +───────────────────────────────+
                   │                                         │
                   └────────────────────┬────────────────────┘
                                        ▼
+─────────────────────────────────────────────────────────────────────────+
|                  RESTful API BACKEND (Node.js & Express.js)             |
|   - Authentication (BCrypt + JWT)          - Order & Product Engine     |
|   - MoMo Payment Gateway Integration       - Static Media File Server   |
+─────────────────────────────────────────────────────────────────────────+
                                        │
                                        ▼
+─────────────────────────────────────────────────────────────────────────+
|                     MONGODB NOSQL DATABASE (Port 27017)                 |
|   - Master DB: Users, Websites, Pages, Sections, Elements, Payments     |
|   - Tenant DB: Products, Orders, Order_Items, Customer_Accounts         |
+─────────────────────────────────────────────────────────────────────────+

Technology Stack và số hiệu phiên bản

  • Frontend Core: JavaScript (ES6+), Vue.js v2.6.12, Nuxt.js v2.14.0, Vuex v3.5.1, VueDraggable v2.24.0, Axios v0.21.0.
  • Backend Core: Node.js v14.15.0 LTS (V8 Engine), Express.js v4.17.1.
  • Database: MongoDB Enterprise v4.4.2 (Mô hình Document NoSQL, lưu trữ BSON/JSON không ràng buộc cứng).
  • Containerization & DevOps: Docker v19.03.13, Docker Compose v1.27.4, NGINX v1.18.0.
  • Security & Payment: BCrypt.js v2.4.3, JSON Web Token (JWT), MoMo Payment API Signature (HMAC-SHA256).

Thiết kế cơ sở dữ liệu (Database Schema)

Hệ thống sử dụng MongoDB để quản lý cấu trúc giao diện động lồng nhau (Hierarchical Component Tree):

{
  "_id": "ObjectId('60a1b2c3d4e5f67890123456')",
  "website_id": "ObjectId('60a1b2c3d4e5f67890123400')",
  "page_name": "Trang Chu",
  "route_path": "/",
  "sections": [
    {
      "section_id": "sec_header_01",
      "type": "HEADER_NAVBAR",
      "styles": { "backgroundColor": "#ffffff", "height": "70px", "sticky": true },
      "elements": [
        {
          "element_id": "elem_logo_01",
          "component_type": "IMAGE_LOGO",
          "props": { "src": "/uploads/logo.png", "alt": "Store Logo", "width": "150px" }
        },
        {
          "element_id": "elem_menu_01",
          "component_type": "NAV_MENU",
          "props": { "items": [{ "label": "San pham", "link": "/products" }] }
        }
      ]
    }
  ]
}

Phương pháp nghiên cứu và phát triển (Methodology)

Dự án áp dụng mô hình phát triển Agile Scrum với chu kỳ 8 giai đoạn phân chia chi tiết trong 16 tuần (30/03/2020 đến 13/07/2020):

Giai đoạn (Milestone) Thời gian thực hiện Công việc và Deliverables chính
Giai đoạn 1 30/03 – 13/04/2020 Thiết kế UI/UX Dashboard WebX; Cấu hình NGINX Reverse Proxy điều phối subdomain
Giai đoạn 2 13/04 – 27/04/2020 Xây dựng RESTful API Backend; Đóng gói ứng dụng và thiết lập môi trường Docker
Giai đoạn 3 27/04 – 04/05/2020 Phát triển lõi kéo thả (Drag & Drop Component Engine) và cơ chế Binding State
Giai đoạn 4 04/05 – 18/05/2020 Xây dựng UI thanh toán; Tích hợp Cổng thanh toán trực tuyến MoMo API
Giai đoạn 5 18/05 – 25/05/2020 Mở rộng thư viện Component dựng sẵn (Hero Banner, Product Slider, Footer)
Giai đoạn 6 25/05 – 08/06/2020 Hoàn thiện ứng dụng WebY bán hàng (Giỏ hàng, Đặt hàng, Tra cứu đơn hàng)
Giai đoạn 7 08/06 – 22/06/2020 Xây dựng File Server lưu trữ media; Tối ưu hiệu năng rendering và caching RAM
Giai đoạn 8 22/06 – 13/07/2020 Kiểm thử Functional & UI Testing; Tối ưu bảo mật; Hoàn thiện báo cáo khóa luận

Triển khai và kết quả thực nghiệm

Quy trình phát triển và trích dẫn thuật toán

1. Thuật toán lưu và đồng bộ cấu trúc trang (Save Page Engine)

Cơ chế chuyển đổi cây đối tượng từ Virtual DOM của Vue.js thành cấu trúc JSON lưu trữ vào MongoDB:

// backend/controllers/pageController.js - Lưu cấu trúc giao diện
exports.savePageStructure = async (req, res) => {
  try {
    const { websiteId, pageId, sections } = req.body;
    
    // Kiểm tra tính toàn vẹn của cấu trúc Component Tree
    if (!Array.isArray(sections) || sections.length === 0) {
      return res.status(400).json({ success: false, message: "Dữ liệu section không hợp lệ" });
    }

    const updatedPage = await PageModel.findOneAndUpdate(
      { _id: pageId, website_id: websiteId },
      { 
        $set: { 
          sections: sections,
          updated_at: new Date() 
        } 
      },
      { new: true, upsert: true }
    );

    return res.status(200).json({
      success: true,
      message: "Lưu cấu hình trang thành công",
      data: updatedPage
    });
  } catch (error) {
    return res.status(500).json({ success: false, error: error.message });
  }
};

2. Cấu hình NGINX Wildcard Subdomain Reverse Proxy

Điều phối lưu lượng truy cập từ subdomain trực tiếp đến container phục vụ website khách hàng:

# /etc/nginx/conf.d/subdomain_routing.conf
server {
    listen 80;
    server_name ~^(?<subdomain>.+)\.designwebx\.online$;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Subdomain $subdomain;
        proxy_cache_bypass $http_upgrade;
    }
}

3. Thuật toán xác thực chữ ký số thanh toán MoMo (HMAC-SHA256)

Đảm bảo an toàn giao dịch thanh toán khi kích hoạt gói dịch vụ website:

// backend/services/momoService.js - Tạo chữ ký số bảo mật
const crypto = require('crypto');

function createMoMoSignature({ partnerCode, accessKey, requestId, amount, orderId, orderInfo, returnUrl, notifyUrl, extraData, secretKey }) {
  const rawSignature = `partnerCode=${partnerCode}&accessKey=${accessKey}&requestId=${requestId}&amount=${amount}&orderId=${orderId}&orderInfo=${orderInfo}&returnUrl=${returnUrl}&notifyUrl=${notifyUrl}&extraData=${extraData}`;
  
  return crypto
    .createHmac('sha256', secretKey)
    .update(rawSignature)
    .digest('hex');
}

Kiểm thử và đánh giá hiệu năng

Functional & UI Testing

  • Functional Testing: Thực hiện 85 test cases trên toàn bộ các phân hệ (Đăng ký/Đăng nhập, Kéo thả layout, Lưu trang, Quản lý sản phẩm, Đặt hàng, Thanh toán MoMo). Tỷ lệ kiểm thử thành công đạt 100% (85/85 test cases PASS).
  • Cross-device UI Testing: Kiểm tra tính tương thích Responsive trên Google Chrome DevTools và các thiết bị thực tế:
    • Desktop: 1920x1080 (Chuẩn tỷ lệ hiển thị 100%, không tràn viền).
    • Tablet (iPad Air): 768x1024 (Thanh menu chuyển đổi sang Hamburger Menu mượt mà).
    • Mobile (iPhone X / Samsung Galaxy S10): 375x812 (Các section tự động chuyển sang layout cột đơn dọc - Single Column Stacking).

Kết quả Benchmark hiệu năng

  • Tốc độ phản hồi API (Latency): Trung bình đạt 128ms cho các thao tác truy vấn dữ liệu sản phẩm từ MongoDB Indexing (_id).
  • Thời gian khởi tạo website: < 3 giây để clone template và cấu hình vHost subdomain mới.
  • Google Lighthouse Score (WebY Storefront):
    • Performance: 91/100
    • Accessibility: 94/100
    • Best Practices: 92/100
    • SEO Readiness: 96/100

Đổi mới và đóng góp kỹ thuật

  1. Kiến trúc Dynamic Schema Tree Renderer độc lập: Thay vì tạo các file mã nguồn tĩnh riêng lẻ cho từng website (gây tốn dung lượng ổ đĩa), WebX lưu toàn bộ trang dưới dạng Document Tree. Ứng dụng WebY chỉ cần đọc JSON và render component động qua cơ chế Virtual DOM của Vue.js.
  2. Cơ chế triển khai Subdomain tự động không gián đoạn (Zero-downtime Provisioning): Kết hợp NGINX Dynamic Regex matching với Docker Container giúp việc tạo website mới diễn ra tức thì mà không cần nạp lại cấu hình web server (không cần nginx -s reload).
  3. Mô hình Hybrid Multi-Tenancy trong MongoDB: Tách biệt rõ ràng giữa hệ thống quản trị chung và dữ liệu nghiệp vụ của từng gian hàng, tối ưu hóa bộ nhớ đệm RAM Cache và chỉ mục (Index) tự động.
  4. Hiệu quả tối ưu hóa:
    • Rút ngắn thời gian đưa sản phẩm/cửa hàng lên môi trường Internet đến 95% (từ trung bình 48 giờ xuống dưới 5 phút).
    • Giảm thiểu 70% chi phí tài nguyên máy chủ nhờ kiến trúc chia sẻ tài nguyên động và container hóa.

Ứng dụng thực tế và triển khai

Kịch bản ứng dụng thực tế

  • Cửa hàng thời trang & Phụ kiện: Người dùng chọn template Fashion, kéo thả thêm banner khuyến mãi, upload danh mục 50 sản phẩm, cài đặt thanh toán MoMo và bắt đầu nhận đơn chỉ trong 10 phút.
  • Tiệm bánh & F&B địa phương: Xây dựng landing page giới thiệu thực đơn, tiếp nhận đơn đặt hàng trực tiếp và nhận thông báo tức thì qua email quản trị.

Yêu cầu cấu hình hệ thống triển khai (System Requirements)

  • Hệ điều hành: Linux (Ubuntu 18.04 LTS / 20.04 LTS khuyến nghị).
  • Phần cứng tối thiểu: 2 vCPU Cores, 4GB RAM, 40GB SSD Storage.
  • Môi trường phần mềm: Docker Engine >= 19.03, Docker Compose >= 1.27, Node.js >= 14.x, MongoDB >= 4.4, NGINX Web Server.

Hạn chế và hướng phát triển

Hạn chế kỹ thuật

  • Chưa hỗ trợ tùy biến mã nguồn CSS/JS tùy biến nâng cao (Custom Code Injection) cho người dùng chuyên sâu.
  • Cổng thanh toán trực tuyến hiện tại tập trung chủ yếu vào Ví điện tử MoMo, chưa hỗ trợ đa cổng (VNPay, ZaloPay, Stripe quốc tế).
  • MongoDB ghi dữ liệu từ RAM xuống ổ đĩa định kỳ (mặc định 60 giây), có thể tiềm ẩn nguy cơ mất dữ liệu cục bộ nếu gặp sự cố sập nguồn đột ngột mà không cấu hình Replica Set.

Hướng phát triển trong tương lai

  • Tích hợp Custom Domain Mapping: Hỗ trợ khách hàng trỏ tên miền riêng thông qua bản ghi CNAME và tự động cấp chứng chỉ bảo mật SSL/TLS miễn phí qua Let's Encrypt / Certbot.
  • Kết nối API Logistics: Tích hợp trực tiếp hệ thống tính phí vận chuyển và đẩy vận đơn tự động với Giao Hàng Nhanh (GHN) và Viettel Post.
  • Áp dụng AI Content Generation: Tích hợp mô hình ngôn ngữ lớn để tự động sinh nội dung mô tả sản phẩm và thiết kế banner thông minh.

Đối tượng hưởng lợi

  • Sinh viên & Học viên CNTT: Nắm vững tài liệu mẫu mực về việc ứng dụng Fullstack JavaScript (Vue.js, Node.js, MongoDB) và kỹ thuật triển khai hệ thống với Docker, NGINX.
  • Lập trình viên (Developers): Tham khảo kiến trúc thiết kế bộ công cụ kéo thả trực quan (Drag-and-Drop Builder Engine) và mô hình điều phối Subdomain động.
  • Doanh nghiệp vừa và nhỏ (SMEs) / Hộ cá thể: Sở hữu giải pháp chuyển đổi số bán hàng chi phí gần như 0 đồng, loại bỏ hoàn toàn sự phụ thuộc vào các đơn vị outsource đắt đỏ.
  • Nhà nghiên cứu phần mềm: Dữ liệu thực nghiệm phong phú về việc tối ưu hóa hiệu năng render trang web dựa trên cấu trúc NoSQL Document.

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

1. Yêu cầu kỹ thuật tối thiểu để triển khai toàn bộ hệ thống WebX là gì?

Hệ thống yêu cầu máy chủ Linux (khuyên dùng Ubuntu 20.04 LTS) với tối thiểu 2 vCPU, 4GB RAM, cài đặt sẵn Docker, Docker Compose, NGINX và Node.js v14+.

2. Hệ thống có giới hạn số lượng website tạo ra trên Subdomain không?

Về mặt logic, hệ thống không giới hạn số lượng subdomain tạo ra nhờ cơ chế regex dynamic capture trong NGINX. Giới hạn thực tế phụ thuộc vào dung lượng RAM của server và khả năng chịu tải của cụm MongoDB.

3. Trang web khách hàng tạo ra có thể tích hợp với các hệ thống quản lý khác không?

Có. Kiến trúc backend xây dựng hoàn toàn dựa trên chuẩn RESTful API, cho phép các hệ thống bên thứ ba (như phần mềm POS hoặc CRM) dễ dàng đồng bộ dữ liệu sản phẩm và đơn hàng thông qua API Token.

4. Chi phí duy trì và bảo trì hệ thống định kỳ như thế nào?

Nhờ kiến trúc Multi-Tenant chia sẻ tài nguyên, một máy chủ VPS giá rẻ (khoảng 200.000 – 400.000 VNĐ/tháng) có thể vận hành ổn định cho hàng trăm website bán hàng vừa và nhỏ hoạt động đồng thời.

5. Website tạo ra có hỗ trợ chuẩn SEO để lên top Google không?

Có. Giao diện WebY được xây dựng tối ưu cấu trúc thẻ ngữ nghĩa (Semantic HTML5), hỗ trợ tùy chỉnh thẻ meta title/description, tạo sitemap tự động và đạt điểm đánh giá SEO 96/100 trên Google Lighthouse.

Kết luận

Đề tài "Xây dựng ứng dụng web tạo website bán hàng" của nhóm tác giả Mai Đức Tuấn và Nguyễn Văn Vũ đã giải quyết xuất sắc bài toán dân chủ hóa công nghệ thương mại điện tử cho người dùng phổ thông. Bằng việc kết hợp nhuần nhuyễn các công nghệ hiện đại gồm Vue.js, Node.js, MongoDB, Docker và NGINX, đồ án không chỉ đạt được tính hoàn thiện cao về mặt kỹ thuật công nghệ phần mềm mà còn sở hữu giá trị ứng dụng thực tiễn to lớn trong kỷ nguyên chuyển đổi số.