Giới thiệu dự án

Thị trường thực phẩm và đồ uống (F&B), đặc biệt là phân khúc bánh ngọt và bánh thủ công (Bakery), đang chứng kiến tốc độ tăng trưởng kép hàng năm (CAGR) đạt xấp xỉ 10.5% tại thị trường Đông Nam Á. Tuy nhiên, phần lớn các cửa hàng bánh truyền thống và chuỗi bánh ngọt vừa và nhỏ (SMBs) tại Việt Nam vẫn đang vận hành dựa trên các phương thức quản lý thủ công hoặc sử dụng hệ thống POS phân mảnh. Thực trạng này dẫn đến tỷ lệ thất thoát hàng tồn kho do hết hạn sử dụng lên đến 15–20%, thời gian xử lý đơn đặt hàng theo yêu cầu (Custom Cake) kéo dài từ 2–4 giờ qua tin nhắn mạng xã hội, và thiếu sự liên kết dữ liệu giữa các chi nhánh.

Dự án "Phát triển Website Quản lý Tiệm bánh H&H Bakery" được nghiên cứu và hiện thực hóa bởi nhóm sinh viên Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM (dưới sự hướng dẫn của ThS. Trần Thị Hồng Yến). Đề tài giải quyết trực diện các điểm nghẽn nghiệp vụ thông qua một nền tảng thương mại điện tử chuyên biệt kết hợp hệ thống ERP thu nhỏ cho chuỗi cửa hàng bánh ngọt.

+-----------------------------------------------------------------------------------+
|                               H&H BAKERY PLATFORM                                 |
+-----------------------------------------------------------------------------------+
|  [Khách hàng]          [Chi nhánh Bếp]          [Quản trị viên]     [Giám đốc]    |
|  - Xem menu & giá      - Nhận đơn realtime      - Phân quyền RBAC   - Báo cáo BI  |
|  - Custom bánh 3D/Ảnh  - Xuất/Nhập lô bánh      - Giám sát hệ thống - Tối ưu tồn  |
|  - Live Chat Support   - Theo dõi HSD (FEFO)    - Cấu hình model 3D - Khuyến mãi  |
+-----------------------------------------------------------------------------------+

Mục tiêu cụ thể của dự án

  1. Xây dựng cổng thương mại điện tử trực quan: Cung cấp trải nghiệm đặt hàng thông suốt, cho phép khách hàng tra cứu chi tiết thành phần nguyên liệu, hàm lượng dinh dưỡng, ngày sản xuất và hạn sử dụng theo thời gian thực.
  2. Hiện thực hóa công cụ cá nhân hóa 3D: Tích hợp module thiết kế bánh tùy chỉnh trên nền tảng WebGL (Three.js), cho phép người dùng tự phối cốt bánh, lớp phủ kem, màu sắc và phụ kiện trang trí dưới dạng mô hình không gian ba chiều hoặc tải ảnh mẫu tự chụp.
  3. Tối ưu hóa quản lý tồn kho theo lô (Batch Tracking): Tự động hóa quy trình quản lý hạn sử dụng của từng mẻ bánh dựa trên nguyên lý FEFO (First Expired, First Out), đồng thời điều phối luân chuyển hàng hóa giữa các chi nhánh (TRAODOI, NHAPLO, XUATLO).
  4. Tích hợp kênh hỗ trợ và phân tích thông minh: Phát triển hệ thống Live Chat thời gian thực và công cụ gợi ý sản phẩm (Recommendation System) dựa trên lịch sử mua hàng và phiếu khảo sát sở thích (KHAOSAT).

Phạm vi và chỉ số kỳ vọng

  • Phạm vi: Nền tảng Web Responsive hoàn chỉnh phục vụ 5 nhóm tác nhân: Khách hàng (KH), Nhân viên điều hành / Chủ doanh nghiệp (ĐH), Quản lý chi nhánh (CN), Nhân viên bếp/giao hàng (NV), Quản trị viên (ADM).
  • Chỉ số mục tiêu (Target Metrics): Khả năng chịu tải tối thiểu 100 đơn hàng/phút; thời gian phản hồi giao dịch dưới 3 giây; giảm thiểu 35% thời gian xử lý đơn tùy chỉnh; tỷ lệ thất thoát tồn kho giảm xuống dưới 5%.

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 bán bánh hiện có như khietminhbakery.com, bbanghouse.com và các ứng dụng giao đồ ăn thương mại cho thấy những khoảng cách công nghệ rõ rệt:

Tiêu chí so sánh Hệ thống truyền thống / Đối thủ (Khiết Minh, BBang) Nền tảng H&H Bakery
Minh bạch thông tin lô & HSD Không hiển thị (chỉ có mô tả tĩnh sơ sài) Hiển thị chi tiết ngày SX, HSD, mã lô bánh (LOBANH)
Cá nhân hóa bánh (Customization) Gọi điện/Chat Zalo trao đổi thủ công Tùy biến mô hình 3D tương tác hoặc Upload ảnh mẫu
Luân chuyển nội bộ đa chi nhánh Gọi điện kiểm kho thủ công, dễ thất thoát Hệ thống điều phối lệnh nhập/xuất lô tự động
Khuyến nghị sản phẩm Sản phẩm cố định hoặc hiển thị ngẫu nhiên Thuật toán gợi ý cá nhân hóa qua khảo sát & lịch sử
Giao tiếp khách hàng Phụ thuộc bên thứ ba (Zalo/Facebook Messenger) Live Chat trực tiếp tích hợp lưu vết dữ liệu (USERCHAT)

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

  • Must Have (Bắt buộc): Đặt hàng và thanh toán trực tuyến; Quản lý lô bánh và hạn sử dụng; Phân quyền nhóm người dùng (RBAC); Quản lý đơn hàng và trạng thái giao hàng; Tùy chỉnh bánh 3D/Upload ảnh.
  • Should Have (Nên có): Điều phối nhập/xuất giữa các chi nhánh; Hệ thống báo cáo phân tích doanh thu đa chiều; Live Chat thời gian thực.
  • Could Have (Có thể có): Thuật toán gợi ý sản phẩm dựa trên ma trận khảo sát; Đánh giá phản hồi (PHANHOI) kèm hình ảnh.
  • Won't Have (Chưa thực hiện trong pha này): Ứng dụng di động native (iOS/Android); Tích hợp cổng thanh toán quốc tế đa tiền tệ.

Thiết kế hệ thống

Hệ thống được thiết kế theo kiến trúc Client-Server hiện đại, phân tách rõ ràng giữa tầng hiển thị (Presentation Layer), tầng xử lý nghiệp vụ (Business Logic Layer) và tầng dữ liệu đám mây (Cloud Database Layer).

                      +------------------------------------------+
                      |               CLIENT TIER                |
                      |  Next.js 14 / React 18 / Tailwind CSS    |
                      |  Three.js WebGL Engine (3D Cake View)    |
                      +--------------------+---------------------+
                                           | HTTP / WebSocket
                                           v
                      +------------------------------------------+
                      |               SERVER TIER                |
                      |     Next.js API Routes / Node.js 20      |
                      |     Firebase Admin SDK (Auth & Rules)    |
                      +--------------------+---------------------+
                                           | TCP / TLS
                                           v
                      +------------------------------------------+
                      |             PERSISTENCE TIER             |
                      |   Cloud Firestore (NoSQL Document DB)    |
                      |   Firebase Cloud Storage (.FBX, Images)  |
                      |   Firebase Realtime Database (Chat)      |
                      +------------------------------------------+

Technology Stack và phiên bản chi tiết

  • Frontend Framework: Next.js v14.1.0, ReactJS v18.2.0, TypeScript v5.3.3.
  • 3D Graphics Engine: Three.js (r160) xử lý tải và render file mô hình .FBX, .GLTF.
  • Styling & UI Components: Tailwind CSS v3.4.1, Framer Motion v11.0.
  • Backend Runtime: Node.js v20.11.0 LTS (Serverless Edge & API Handlers).
  • Cơ sở dữ liệu & Xác thực: Google Firebase Cloud Firestore (NoSQL), Firebase Authentication, Firebase Cloud Storage.
  • Quản lý quy trình & Thiết kế: Jira Software, Framer UI/UX, Lucidchart.

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

// Cấu trúc mô hình Lô Bánh (Batch Schema)
interface LoBanh {
  maLo: string;              // Primary Key: LB_YYYYMMDD_XXXX
  maSanPham: string;         // Foreign Key -> SANPHAM
  maChiNhanh: string;        // Foreign Key -> CHINHANH
  soLuongSanXuat: number;    // Số lượng ban đầu
  soLuongConLai: number;     // Số lượng khả dụng trong kho
  ngaySanXuat: Timestamp;    // Ngày làm bánh
  ngayHetHan: Timestamp;     // Hạn dùng tối đa
  trangThai: 'KHA_DUNG' | 'SAP_HET_HAN' | 'HUY_BO';
}

// Cấu trúc Đơn Hàng Tùy Biến 3D (Custom Cake Order Schema)
interface SanPhamDat {
  maSPDat: string;
  maKhachHang: string;
  loaiDat: 'MODEL_3D' | 'UPLOAD_ANH';
  model3DConfig?: {
    maCotBanh: string;       // FK -> COTBANH
    kichThuoc: number;       // Đường kính (cm)
    mauKem: string;          // Hex Code (#FFFFFF)
    phuKienIDs: string[];    // Danh sách phụ kiện 3D gắn kèm
  };
  hinhAnhDinhKemUrl?: string;
  thoaThuanGia: number;
  trangThaiXacNhan: boolean;
}

Phương pháp luận phát triển (Methodology)

Dự án áp dụng mô hình phát triển phần mềm Agile/Scrum với chu kỳ 6 Sprint (mỗi Sprint kéo dài 2 tuần), đảm bảo việc tích hợp và kiểm thử diễn ra liên tục.

Sprint 1: Phân tích nghiệp vụ, thiết kế Wireframe (Framer) & Data Modeling
Sprint 2: Khởi tạo Project (Next.js/TypeScript), Module Auth & RBAC
Sprint 3: Xây dựng Catalog bánh, Quản lý lô hàng (FEFO) & Giỏ hàng
Sprint 4: Tích hợp Three.js 3D Configurator & Module Custom Cake
Sprint 5: Luân chuyển hàng liên chi nhánh, Live Chat & Hệ thống Báo cáo
Sprint 6: Kiểm thử hiệu năng (Stress Test), UAT & Đóng gói triển khai

Implementation và kết quả

Quy trình phát triển và thuật toán cốt lõi

1. Thuật toán kiểm soát xuất kho theo lô ưu tiên HSD (FEFO Algorithm)

Để đảm bảo không xuất bánh quá hạn hoặc để bánh cũ tồn đọng, hệ thống sử dụng thuật toán truy vấn sắp xếp thứ tự ưu tiên hạn sử dụng:

import { collection, query, where, orderBy, getDocs, limit } from "firebase/firestore";
import { db } from "@/lib/firebase";

export async function allocateBatchForOrder(productId: string, branchId: string, quantityNeeded: number) {
  const batchRef = collection(db, "LOBANH");
  const now = new Date();
  
  // Truy vấn lô bánh còn hạn, còn hàng, ưu tiên ngày hết hạn gần nhất (FEFO)
  const q = query(
    batchRef,
    where("maSanPham", "==", productId),
    where("maChiNhanh", "==", branchId),
    where("soLuongConLai", ">", 0),
    where("ngayHetHan", ">", now),
    orderBy("ngayHetHan", "asc")
  );

  const snapshot = await getDocs(q);
  let remainingNeeded = quantityNeeded;
  const allocations: { maLo: string; quantity: number }[] = [];

  for (const doc of snapshot.docs) {
    const batch = doc.data() as LoBanh;
    const take = Math.min(batch.soLuongConLai, remainingNeeded);
    allocations.push({ maLo: doc.id, quantity: take });
    remainingNeeded -= take;

    if (remainingNeeded === 0) break;
  }

  if (remainingNeeded > 0) {
    throw new Error(`Chi nhánh không đủ số lượng tồn kho. Thiếu: ${remainingNeeded} sản phẩm.`);
  }

  return allocations;
}

2. Khởi tạo và Render mô hình 3D bánh kem tương tác (Three.js Engine)

Module 3D cho phép khách hàng xoay 360 độ, đổi màu kem phủ và gắn phụ kiện trang trí theo tọa độ ma trận không gian:

import * as THREE from 'three';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';

export function init3DCakeViewer(container: HTMLElement, modelUrl: string, creamColor: string) {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.shadowMap.enabled = true;
  container.appendChild(renderer.domElement);

  // Ánh sáng môi trường và đổ bóng
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
  scene.add(ambientLight);

  const dirLight = new THREE.DirectionalLight(0xfff5e6, 1.2);
  dirLight.position.set(5, 10, 7);
  dirLight.castShadow = true;
  scene.add(dirLight);

  const loader = new FBXLoader();
  loader.load(modelUrl, (object) => {
    object.traverse((child) => {
      if ((child as THREE.Mesh).isMesh) {
        const mesh = child as THREE.Mesh;
        if (mesh.name.includes("CreamLayer")) {
          mesh.material = new THREE.MeshStandardMaterial({
            color: new THREE.Color(creamColor),
            roughness: 0.3,
            metalness: 0.1
          });
        }
      }
    });
    scene.add(object);
    camera.position.set(0, 15, 25);
    camera.lookAt(0, 0, 0);
  });

  return { scene, renderer, camera };
}

Kiểm thử và đánh giá hiệu năng (Testing & Validation)

Hệ thống đã trải qua các đợt kiểm thử đơn vị (Unit Test), kiểm thử tích hợp (Integration Test) và kiểm thử tải trọng (Stress Test):

+-----------------------------------------------------------------------+
|                       LIGHTHOUSE AUDIT REPORT                         |
+-----------------------------------------------------------------------+
|  Performance: 94/100  |  Accessibility: 98/100                        |
|  Best Practices: 96/100 |  SEO Score: 100/100                         |
|  First Contentful Paint (FCP): 0.9s | Time to Interactive (TTI): 1.6s |
+-----------------------------------------------------------------------+
  • Độ bao phủ kiểm thử (Test Coverage): Đạt 86.4% trên toàn bộ các controller nghiệp vụ cốt lõi (Cart, Batch, Order, RBAC).
  • Tải trọng đồng thời: Chịu tải thành công 120 đơn hàng/phút với tỷ lệ lỗi giao dịch 0.00% qua k6 load testing.
  • Thời gian phản hồi API: Trung bình 180ms đối với các tác vụ Firestore đọc/ghi dữ liệu thông thường; render WebGL ổn định ở mức 60 FPS trên các trình duyệt Chrome, Safari, Edge.

Đổi mới và đóng góp

  1. Trải nghiệm thiết kế bánh 3D WebGL trực quan: Xóa bỏ rào cản giao tiếp giữa khách hàng và thợ làm bánh. Khách hàng xem trước hình khối, màu sắc thực tế của bánh với tỷ lệ chính xác, giảm thiểu 90% khiếu nại sai lệch quy cách sau hoàn thiện.
  2. Kiến trúc quản lý hàng tồn kho thông minh theo lô đa chi nhánh: Tích hợp cơ chế cảnh báo sớm hạn sử dụng (Early Warning System) và lệnh chuyển kho nội bộ tức thời (TRAODOI), giúp các chi nhánh linh hoạt san sẻ lượng tiêu thụ, giảm tối đa tỷ lệ hủy bánh.
  3. Mô hình kết hợp kênh tương tác và gợi ý cá nhân: Hệ thống tích hợp Live Chat thời gian thực đi kèm thuật toán phân tích hành vi từ hóa đơn cũ và form khảo sát khẩu vị, giúp nâng cao giá trị trung bình trên mỗi đơn hàng (AOV) thêm 22.8%.

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

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

  • Tiệm bánh ngọt đơn lẻ: Sử dụng hệ thống để số hóa toàn bộ khâu nhận đơn, bán lẻ tại quầy, quản lý mẻ bánh nướng mỗi sáng và xây dựng kênh bán hàng trực tuyến thương hiệu riêng.
  • Chuỗi cửa hàng nhượng quyền (Franchise Bakery): Giám đốc/Chủ điều hành có thể giám sát doanh thu theo thời gian thực của từng cơ sở, quản lý luân chuyển nguyên liệu và lô thành phẩm giữa xưởng trung tâm và các điểm bán lẻ lẻ.
                     +----------------------------------+
                     |       DEPLOYMENT TOPOLOGY        |
                     +----------------------------------+
                                      |
              +-----------------------+-----------------------+
              |                                               |
              v                                               v
+---------------------------+                   +---------------------------+
|      VERCEL EDGE CDN      |                   |    FIREBASE CLOUD INFRA   |
| - Next.js SSR Web App     |                   | - Cloud Firestore         |
| - Static Assets & Bundle  |                   | - Cloud Storage (3D/Media)|
| - HTTPS / Auto SSL        |                   | - Firebase Auth & Rules   |
+---------------------------+                   +---------------------------+

Yêu cầu hệ thống và hướng dẫn triển khai

  • Yêu cầu máy chủ / Cloud: Node.js runtime environment (v18.x trở lên), Firebase Project cấu hình đầy đủ Firestore Database, Storage Bucket và Authentication Provider.
  • Hướng dẫn cài đặt nhanh:
# 1. Clone repository mã nguồn
git clone https://github.com/uit-software/hh-bakery-management.git
cd hh-bakery-management

# 2. Cài đặt các gói thư viện phụ thuộc
npm install --legacy-peer-deps

# 3. Thiết lập biến môi trường (.env.local)
cat <<EOF > .env.local
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyD...
NEXT_PUBLIC_FIREBASE_PROJECT_ID=hh-bakery-uit
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=hh-bakery-uit.appspot.com
EOF

# 4. Chạy môi trường phát triển cục bộ
npm run dev
# Mở trình duyệt tại địa chỉ http://localhost:3000

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

Hạn chế kỹ thuật hiện tại

  • Khả năng render mô hình 3D phức tạp với texture độ phân giải cao (4K) còn gây hiện tượng giảm khung hình trên một số thiết bị di động cấu hình yếu.
  • Phụ thuộc vào kiến trúc serverless của Firebase, dẫn đến chi phí đọc/ghi có thể tăng cao nếu dữ liệu mở rộng đến hàng triệu bản ghi mà chưa qua tối ưu bộ nhớ đệm (Caching/Redis).

Định hướng nâng cấp tương lai

  • Tích hợp Generative AI: Tự động tạo mô hình 3D bánh kem từ câu lệnh văn bản (Text-to-3D) hoặc từ bản phác thảo tay 2D của khách hàng.
  • Mở rộng ứng dụng di động: Phát triển ứng dụng Native bằng React Native dành riêng cho tài xế giao hàng và nhân viên bếp để quét mã QR lô bánh.
  • Tích hợp IoT: Kết nối cảm biến nhiệt độ thông minh tại các tủ ủ bánh để tự động cập nhật thời gian bảo quản thực tế của lô bánh vào hệ thống.

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

  • Sinh viên ngành Kỹ thuật Phần mềm / CNTT: Tài liệu tham khảo toàn diện về cách kết hợp Next.js, Three.js và Firebase NoSQL trong một bài toán doanh nghiệp thực tế.
  • Lập trình viên (Developers): Nắm bắt mô hình triển khai WebGL trên nền web hiện đại, cấu trúc phân quyền RBAC và giải thuật xử lý tồn kho FEFO.
  • Chủ tiệm bánh và Doanh nghiệp F&B: Sở hữu giải pháp chuyển đổi số trọn gói, giúp cắt giảm 30% chi phí vận hành và tăng trưởng doanh thu bán hàng trực tuyến.
  • Nhà nghiên cứu ứng dụng: Mô hình phân tích dữ liệu khảo sát kết hợp hành vi tiêu dùng trong lĩnh vực ẩm thực cá nhân hóa.

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

1. Hệ thống yêu cầu cấu hình hạ tầng như thế nào để triển khai?

Hệ thống được thiết kế theo kiến trúc Serverless nên không đòi hỏi máy chủ vật lý chuyên dụng. Bạn chỉ cần tài khoản Vercel (gói Hobby/Pro) để lưu trữ Frontend Next.js và tài khoản Google Cloud/Firebase (gói Spark miễn phí hoặc Blaze theo lưu lượng) để vận hành cơ sở dữ liệu và xác thực.

2. Mô hình 3D tùy biến có gây nặng máy khi người dùng truy cập bằng điện thoại không?

Các mô hình bánh .FBX đã được tối ưu hóa số lượng đa giác (Low-Poly) và nén texture dưới 512KB. Kết hợp với tính năng dynamic import của Next.js, module Three.js chỉ được tải khi người dùng vào trang đặt bánh tùy biến, đảm bảo trang chủ luôn tải dưới 1.5 giây.

3. Hệ thống có hỗ trợ tích hợp với máy in hóa đơn nhiệt tại quầy không?

Có. Hệ thống hỗ trợ in hóa đơn trực tiếp thông qua chuẩn Web Print API trên trình duyệt, tương thích với tất cả các máy in nhiệt cổng USB hoặc LAN (khổ giấy 80mm/58mm).

4. Quy trình bảo trì và sao lưu dữ liệu được thực hiện như thế nào?

Cơ sở dữ liệu Firestore tự động sao lưu đa vùng (Multi-Region Replication) với độ sẵn sàng 99.99%. Quản trị viên có thể thiết lập Cloud Function để trích xuất file JSON dự phòng định kỳ hàng tuần về Google Drive.

5. Chi phí ước tính để vận hành hệ thống cho một tiệm bánh là bao nhiêu?

Với quy mô tiệm bánh trung bình (khoảng 1,000 - 3,000 đơn hàng/tháng và 5 chi nhánh), chi phí hạ tầng Firebase và Vercel dao động từ 0 đến dưới 25 USD/tháng, mang lại tỷ suất hoàn vốn (ROI) vượt trội so với các phần mềm ERP cồng kềnh.

Kết luận

Đề tài "Phát triển Website Quản lý Tiệm bánh H&H Bakery" của nhóm sinh viên Trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM đã giải quyết xuất sắc bài toán số hóa toàn diện cho ngành bánh ngọt. Bằng việc kết hợp hài hòa giữa công nghệ WebGL (Three.js), nền tảng Next.js hiện đại và cơ chế quản lý tồn kho theo lô chuẩn xác (FEFO), hệ thống mang lại giá trị kép: tối đa hóa trải nghiệm mua sắm trực quan cho khách hàng và chuẩn hóa quy trình vận hành chuỗi cho doanh nghiệp. Dự án là minh chứng rõ nét cho năng lực nghiên cứu ứng dụng và tính khả thi thương mại hóa cao trong thực tiễn.