Giới thiệu dự án

Thương mại điện tử (E-commerce) tại khu vực Đông Nam Á đang trải qua giai đoạn tăng trưởng bứt phá với tốc độ tăng trưởng kép hàng năm (CAGR) đạt mức 16.2%. Tại Việt Nam, hành vi tiêu dùng chuyển dịch mạnh mẽ từ mua sắm truyền thống sang các kênh trực tuyến, đòi hỏi các nền tảng bán hàng phải đáp ứng đồng thời hai tiêu chuẩn khắt khe: tốc độ tải trang gần như tức thì trên đa thiết bị và quy trình thanh toán an toàn, liền mạch.

Tuy nhiên, các doanh nghiệp vừa và nhỏ (SMEs) khi xây dựng kênh bán hàng trực tuyến thường gặp phải những trở ngại kỹ thuật nghiêm trọng:

  • Hiệu năng và trải nghiệm người dùng (UX): Các website sử dụng kiến trúc Monolithic truyền thống thường có thời gian phản hồi máy chủ cao (Time to First Byte - TTFB > 800ms), giao diện nặng nề dẫn đến tỷ lệ thoát trang (Bounce Rate) vượt ngưỡng 50%.
  • Phức tạp trong quản lý biến thể sản phẩm: Khó khăn trong việc đồng bộ hóa dữ liệu thời gian thực giữa các thuộc tính sản phẩm (màu sắc, kích thước, số lượng tồn kho) và hệ thống danh mục đa cấp.
  • Chi phí hạ tầng và rào cản bảo mật: Chi phí bảo trì máy chủ chuyên dụng tốn kém, quy trình tích hợp cổng thanh toán quốc tế phức tạp và nguy cơ rò rỉ dữ liệu tài khoản người dùng.

Đề tài "Xây dựng website thương mại điện tử Breart" do sinh viên Lâm Ngọc Bách (MSSV: 20520401, Khoa Công nghệ Phần mềm – Trường Đại học Công nghệ Thông tin, ĐHQG-HCM) thực hiện dưới sự hướng dẫn của ThS. Huỳnh Tuấn Anh đã giải quyết triệt để các bài toán trên thông qua việc phát triển một hệ thống thương mại điện tử thế hệ mới.

+-------------------------------------------------------------------------------+
|                       MỤC TIÊU DỰ ÁN BREART E-COMMERCE                        |
+-------------------------------------------------------------------------------+
| 1. Xây dựng Storefront hiệu năng cao bằng Next.js (SSR/SSG) & Tailwind CSS    |
| 2. Chuẩn hóa cơ sở dữ liệu quan hệ 3NF với Prisma ORM & PlanetScale MySQL     |
| 3. Tích hợp cổng thanh toán bảo mật chuẩn PCI-DSS qua Stripe API              |
| 4. Xây dựng CMS Headless quản trị biến thể, banner quảng cáo & doanh thu      |
| 5. Tối ưu hóa SEO tự động, cải thiện Core Web Vitals (FCP < 1.0s, TTFB < 200ms)|
+-------------------------------------------------------------------------------+

Dự án áp dụng phương pháp phát triển linh hoạt với kiến trúc Headless E-Commerce kết hợp Server-Side Rendering (SSR). Giải pháp này giúp bóc tách hoàn toàn giữa tầng giao diện hiển thị (Storefront/Admin Dashboard) và tầng logic xử lý dữ liệu (Serverless Backend APIs), đảm bảo khả năng mở rộng quy mô linh hoạt và tối ưu hóa tối đa điểm số SEO On-page.

  • Phạm vi triển khai: Nền tảng Web Responsive chuyên biệt cho các ngành hàng thời trang, mỹ phẩm và thiết bị điện tử.
  • Giới hạn đề tài: Đồ án 1 tập trung hoàn thiện toàn diện 21 Use Cases chức năng cốt lõi và kiến trúc vận hành. Các module mở rộng như hệ thống Chatbot AI tự động và thuật toán gợi ý sản phẩm cá nhân hóa (Recommendation Engine) được định hướng tiếp tục triển khai trong giai đoạn Đồ án 2.

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 thương mại điện tử phổ biến tại Việt Nam như Shopee, Tiki kết hợp phân tích các giải pháp mã nguồn mở cho thấy nhiều rào cản về công nghệ và vận hành:

Tiêu chí phân tích Nền tảng Monolith truyền thống (WooCommerce / Magento 2) Nền tảng SPA thuần (React JS CSR) Giải pháp Breart E-Commerce (Next.js + Prisma + PlanetScale)
Cơ chế Render Server-Side Rendering truyền thống (PHP/HTML) Client-Side Rendering (CSR) qua Browser Hybrid Rendering (SSR, SSG & Server Components)
Tốc độ tải trang đầu (FCP) 2.5s – 4.0s (Chậm khi tải cơ sở dữ liệu lớn) 2.0s – 3.5s (Chờ tải toàn bộ JS Bundle) 0.6s – 1.0s (HTML render sẵn tại Edge)
Khả năng SEO Tốt, nhưng khó tối ưu hóa Core Web Vitals Kém (Search Engine bot khó crawl nội dung JS) Tối ưu tuyệt đối (Dynamic Meta Tags, JSON-LD)
Độ an toàn Type-safety Thấp / Trung bình (PHP Dynamic typing) Phụ thuộc cấu hình frontend Toàn diện (End-to-End Type-Safe với TypeScript & Prisma)
Chi phí hạ tầng ban đầu $30 – $100/tháng (VPS/Dedicated Server) $15 – $40/tháng (Hosting + Backend API) $0 – $20/tháng (Serverless Deployment trên Vercel)

Hệ thống yêu cầu được phân loại theo mô hình MoSCoW:

  • Must Have (Bắt buộc): Xác thực tài khoản đa phương thức (Email OTP, OAuth2 Google/GitHub), danh mục đa cấp, quản lý biến thể (Màu sắc, Kích thước), giỏ hàng thời gian thực, thanh toán thẻ quốc tế qua Stripe, CMS quản lý đơn hàng.
  • Should Have (Nên có): Hệ thống mã giảm giá (Coupon Engine), bảng điều khiển thống kê doanh thu theo biểu đồ, quản lý biển quảng cáo (Billboard Management) động theo từng danh mục, đánh giá sản phẩm kèm hình ảnh.
  • Could Have (Có thể có): Kênh nhắn tin trực tiếp giữa khách hàng và quản trị viên, lọc sản phẩm nâng cao theo đa thuộc tính đồng thời.
  • Won't Have (Chưa có trong giai đoạn này): Chatbot AI tự động tư vấn, cổng thanh toán COD nâng cao tích hợp đơn vị vận chuyển bên thứ ba (GHTK, GHN API).

Thiết kế hệ thống

Kiến trúc tổng thể của hệ thống Breart tuân thủ mô hình Serverless 3-Tier Architecture:

+-----------------------------------------------------------------------------------+
|                                CLIENT LAYER (UI/UX)                               |
|   +---------------------------------------+   +-------------------------------+   |
|   |       Storefront (Customer Web)       |   |    Admin Management Portal    |   |
|   |  - Next.js 14 App Router (React 18)   |   |  - Dashboard Analytics        |   |
|   |  - Tailwind CSS + Lucide Icons        |   |  - Product/Category/Order CMS |   |
|   |  - Redux Toolkit (Client State)       |   |  - Billboard & Coupon Manager |   |
|   +---------------------------------------+   +-------------------------------+   |
+------------------------------------------+----------------------------------------+
                                           | HTTPS / JSON (RESTful APIs)
+------------------------------------------v----------------------------------------+
|                      APPLICATION LAYER (NEXT.JS SERVERLESS BACKEND)               |
|   +---------------------------------------------------------------------------+   |
|   | - Server-Side Rendering (SSR) & Static Site Generation (SSG) Engine       |   |
|   | - Route Handlers (/api/products, /api/orders, /api/checkout, /api/coupons)|   |
|   | - Authentication & Authorization Layer (Clerk Auth & Session Guards)     |   |
|   | - Data Access Layer (Prisma ORM Client v5.7)                              |   |
|   +---------------------------------------------------------------------------+   |
+---------------------+-------------------------------+-----------------------------+
                      |                               |
                      | Prisma Driver                 | HTTPS API
+---------------------v-------------+   +-------------v-----------------------------+
|          DATABASE LAYER           |   |            THIRD-PARTY SERVICES           |
|  +-----------------------------+  |   |  +-------------------------------------+  |
|  |   PlanetScale (MySQL 8.0)   |  |   |  | Stripe API: Thanh toán quốc tế      |  |
|  | - Serverless Connection Pool|  |   |  | Cloudinary: Lưu trữ & tối ưu hình ảnh|  |
|  | - 3NF Relational Schema     |  |   |  | Clerk: Quản lý danh tính người dùng  |  |
|  +-----------------------------+  |   |  +-------------------------------------+  |
+-----------------------------------+   +-------------------------------------------+

Ngăn xếp công nghệ (Technology Stack)

  • Frontend Framework: Next.js v14.0.4, React.js v18.2.0, Tailwind CSS v3.3.6.
  • State Management: Redux Toolkit v2.0.1 (Quản lý trạng thái giỏ hàng và danh sách yêu thích phía client).
  • Backend Runtime: Node.js v20.10.0 LTS (chạy trên môi trường Vercel Edge/Serverless Runtime).
  • ORM & Database: Prisma ORM v5.7.0 kết nối hệ quản trị cơ sở dữ liệu phân tán PlanetScale (tương thích chuẩn MySQL 8.0).
  • Payment Gateway: Stripe SDK v2023-10-16.
  • Storage CDN: Cloudinary SDK v1.41.0.

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

Cơ sở dữ liệu được thiết kế theo chuẩn hóa dạng 3NF, loại bỏ dư thừa dữ liệu và đảm bảo tính toàn vẹn quan hệ:

// Trích xuất từ lược đồ schema.prisma của dự án Breart
datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

generator client {
  provider = "prisma-client-js"
}

model Product {
  id          String      @id @default(uuid())
  name        String
  price       Decimal
  isFeatured  Boolean     @default(false)
  isArchived  Boolean     @default(false)
  categoryId  String
  category    Category    @relation(fields: [categoryId], references: [id])
  sizeId      String
  size        Size        @relation(fields: [sizeId], references: [id])
  colorId     String
  color       Color       @relation(fields: [colorId], references: [id])
  images      Image[]
  orderItems  OrderItem[]
  createdAt   DateTime    @default(now())
  updatedAt   DateTime    @updatedAt

  @@index([categoryId])
  @@index([sizeId])
  @@index([colorId])
}

model Order {
  id         String      @id @default(uuid())
  userId     String
  isPaid     Boolean     @default(false)
  phone      String      @default("")
  address    String      @default("")
  orderItems OrderItem[]
  createdAt  DateTime    @default(now())
  updatedAt  DateTime    @updatedAt
}

model OrderItem {
  id        String   @id @default(uuid())
  orderId   String
  order     Order    @relation(fields: [orderId], references: [id])
  productId String
  product   Product  @relation(fields: [productId], references: [id])

  @@index([orderId])
  @@index([productId])
}

Thiết kế API Endpoints

Hệ thống xây dựng hệ thống RESTful API chuẩn mực phục vụ giao tiếp giữa Client và Server:

Method API Endpoint Mô tả chức năng Quyền truy cập (Auth)
GET /api/products Lấy danh sách sản phẩm (hỗ trợ lọc theo categoryId, colorId, sizeId) Public
POST /api/products Tạo sản phẩm mới kèm danh sách ảnh và biến thể Admin
GET /api/products/[productId] Lấy chi tiết thông tin sản phẩm và các biến thể liên quan Public
POST /api/checkout Khởi tạo phiên thanh toán Stripe Checkout Session User / Customer
POST /api/webhook Tiếp nhận Webhook từ Stripe cập nhật trạng thái đơn hàng (isPaid) Stripe Signature
GET /api/analytics Lấy thống kê tổng doanh thu, số lượng đơn hàng, biểu đồ tăng trưởng Admin

Methodology

Dự án áp dụng phương pháp Agile/Scrum với chu kỳ 4 Sprint kéo dài trong 12 tuần:

Sprint 1 (Tuần 1-3): Nghiên cứu công nghệ, đặc tả Use Case, thiết kế UI/UX trên Figma.
Sprint 2 (Tuần 4-6): Thiết lập Schema Prisma, cấu hình PlanetScale, dựng Storefront & CMS layout.
Sprint 3 (Tuần 7-9): Xây dựng API Routes, tích hợp Stripe Payment, Cloudinary, quản trị sản phẩm.
Sprint 4 (Tuần 10-12): Kiểm thử toàn diện (Unit/E2E), tối ưu hóa SEO, đóng gói đồ án và triển khai.

Quản trị rủi ro (Risk Mitigation):

  • Rủi ro trễ hạn thanh toán (Stripe Webhook Timeout): Áp dụng cơ chế Idempotency Key và Retry Event Listener để tránh ghi trùng giao dịch hoặc thất thoát đơn hàng.
  • Rủi ro gián đoạn kết nối Database Serverless: Thiết lập Connection Pooling và tích hợp Prisma Data Proxy giúp xử lý hàng ngàn kết nối đồng thời mà không nghẽn tài nguyên.

Implementation và kết quả

Development process

Cấu trúc mã nguồn của hệ thống tuân thủ mô hình module hóa của Next.js 14 App Router:

breart-ecommerce/
├── app/
│   ├── (dashboard)/[storeId]/(routes)/    # Phân hệ Admin CMS
│   │   ├── billboards/                    # Quản lý biển quảng cáo banner
│   │   ├── categories/                    # Quản lý danh mục sản phẩm
│   │   ├── products/                      # Quản lý sản phẩm & biến thể
│   │   ├── orders/                        # Quản lý và duyệt đơn hàng
│   │   └── settings/                      # Cấu hình cửa hàng
│   ├── (store)/(routes)/                  # Phân hệ Storefront khách hàng
│   │   ├── cart/                          # Giao diện & logic giỏ hàng
│   │   ├── category/[categoryId]/         # Khám phá & lọc sản phẩm
│   │   └── product/[productId]/           # Trang chi tiết sản phẩm
│   └── api/                               # Hệ thống RESTful API Route Handlers
├── components/                            # UI Components tái sử dụng (Shadcn/UI, Tailwind)
├── hooks/                                 # Custom Hooks (useCart, usePreviewModal)
├── lib/                                   # Tiện ích bổ trợ (prisma.ts, stripe.ts, utils.ts)
└── prisma/                                # Tệp cấu hình schema.prisma

Xử lý logic thanh toán an toàn qua Stripe API Route

Đoạn mã sau minh họa thuật toán xử lý phiên thanh toán bảo mật và tạo đơn hàng trong cơ sở dữ liệu:

// app/api/checkout/route.ts
import Stripe from "stripe";
import { NextResponse } from "next/server";
import { stripe } from "@/lib/stripe";
import prismadb from "@/lib/prismadb";

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Authorization",
};

export async function POST(req: Request) {
  try {
    const { productIds } = await req.json();

    if (!productIds || productIds.length === 0) {
      return new NextResponse("Danh sách sản phẩm không hợp lệ", { status: 400 });
    }

    const products = await prismadb.product.findMany({
      where: { id: { in: productIds } }
    });

    const line_items: Stripe.Checkout.SessionCreateParams.LineItem[] = [];

    products.forEach((product) => {
      line_items.push({
        quantity: 1,
        price_data: {
          currency: "VND",
          product_data: { name: product.name },
          unit_amount: Number(product.price)
        }
      });
    });

    const order = await prismadb.order.create({
      data: {
        isPaid: false,
        orderItems: {
          create: productIds.map((productId: string) => ({
            product: { connect: { id: productId } }
          }))
        }
      }
    });

    const session = await stripe.checkout.sessions.create({
      line_items,
      mode: "payment",
      billing_address_collection: "required",
      phone_number_collection: { enabled: true },
      success_url: `${process.env.FRONTEND_STORE_URL}/cart?success=1`,
      cancel_url: `${process.env.FRONTEND_STORE_URL}/cart?canceled=1`,
      metadata: { orderId: order.id }
    });

    return NextResponse.json({ url: session.url }, { headers: corsHeaders });
  } catch (error) {
    return new NextResponse("Lỗi xử lý thanh toán nội bộ", { status: 500 });
  }
}

Testing và validation

Quá trình kiểm thử được thực hiện trên 21 kịch bản kiểm thử (Test Cases) tương ứng với các chức năng chính:

+-------------------------------------------------------------------------------+
|                       KẾT QUẢ KIỂM THỬ HỆ THỐNG BREART                        |
+-------------------------------------------------------------------------------+
| - Unit Testing & Logic validation: 100% Passed (34/34 Test suites)            |
| - Authentication & Token Security: 100% Passed (Bcrypt & Clerk sessions)      |
| - Stripe Checkout & Webhook Lifecycle: 100% Passed (Test Cards Simulation)   |
| - Code Coverage tổng thể: 88.5%                                               |
+-------------------------------------------------------------------------------+

Đánh giá hiệu năng thực tế (Performance Benchmarking)

Hệ thống được đo lường hiệu năng bằng Google Lighthouse và WebPageTest trong môi trường Production:

Chỉ số đánh giá (Metrics) Tiêu chuẩn chấp nhận (NFR) Kết quả thực tế đạt được Đánh giá trạng thái
First Contentful Paint (FCP) < 1.8s 0.8s Vượt mục tiêu (Tối ưu)
Time to Interactive (TTI) < 3.5s 1.2s Vượt mục tiêu
Speed Index < 3.0s 1.1s Vượt mục tiêu
Thao tác đơn hàng/thanh toán < 5.0s (Yêu cầu P01) 1.4s – 2.1s Đạt yêu cầu đồ án
Lighthouse SEO Score > 90/100 100/100 Xuất sắc
Lighthouse Performance > 85/100 95/100 Xuất sắc

Kết quả đạt được

Đồ án đã hoàn thành 100% các mục tiêu nghiên cứu và phát triển đặt ra:

  • Xây dựng trọn vẹn 21 Use Cases chức năng: Từ khám phá sản phẩm đa tiêu chí, giỏ hàng, áp dụng coupon, tích hợp thanh toán quốc tế Stripe đến phân hệ Admin điều hành doanh thu, danh mục, sản phẩm biến thể.
  • Khách hàng có thể trải nghiệm mua sắm mượt mà trên cả trình duyệt máy tính và điện thoại thông minh (Fully Responsive) mà không cần cài đặt ứng dụng native.
  • Tự động hóa hoàn toàn quy trình xử lý đơn hàng từ trạng thái khởi tạo đến xác nhận thanh toán trực tuyến qua Webhook.

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

  1. Kiến trúc Headless E-Commerce trên nền tảng Next.js Serverless: Thay vì sử dụng các hệ thống CMS cồng kềnh, đề tài xây dựng giải pháp tách biệt giao diện và logic dữ liệu thông qua Serverless APIs, giúp thời gian phản hồi giao dịch giảm 58% so với mô hình MVC truyền thống.
  2. Cơ chế quản lý biến thể sản phẩm động (Dynamic Variant Matrix): Thiết kế mô hình cơ sở dữ liệu quan hệ cho phép ghép nối linh hoạt các thuộc tính Đa kích thước (Size) và Đa màu sắc (Color) vào từng SKU độc lập, giúp việc quản trị kho hàng chính xác, không xảy ra xung đột dữ liệu.
  3. Billboard Banner tích hợp danh mục: Cho phép quản trị viên gắn các chiến dịch marketing, banner quảng cáo độc lập cho từng danh mục hàng hóa (Category Billboard), tăng tính linh hoạt trong các chiến dịch kích cầu mua sắm.
  4. Tối ưu hóa chi phí vận hành: Việc sử dụng PlanetScale và Vercel Serverless giúp giảm thiểu chi phí máy chủ hàng tháng xuống mức gần bằng 0 đối với các cửa hàng mới khởi nghiệp có quy mô vừa và nhỏ.

Ứ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 & may mặc: Áp dụng hệ thống biến thể màu sắc/kích thước và banner bộ sưu tập theo mùa.
  • Doanh nghiệp bán lẻ thiết bị công nghệ: Tận dụng khả năng lọc sản phẩm nhanh theo thông số kỹ thuật và hệ thống thanh toán thẻ tín dụng an toàn.

Chiến lược triển khai (Deployment Strategy)

[GitHub Repository: Source Code]
             │
             ├──(Push/PR Merge)──> [Vercel CI/CD Pipeline]
                                          │
                                          ├── Build Next.js Static Pages & Lambdas
                                          ├── Deploy Storefront to Global Edge Network
                                          └── Connect PlanetScale MySQL & Cloudinary CDN

Phân tích chi phí và hiệu quả đầu tư (ROI)

Hạng mục hạ tầng Giải pháp máy chủ truyền thống Giải pháp Breart Serverless Mức tiết kiệm
Máy chủ Web & API $40/tháng (Cloud VPS) $0/tháng (Vercel Hobby Tier) Tiết kiệm 100%
Cơ sở dữ liệu $30/tháng (Managed MySQL) $0/tháng (PlanetScale Free/Hobby) Tiết kiệm 100%
Lưu trữ CDN hình ảnh $20/tháng (S3 + CloudFront) $0/tháng (Cloudinary Free Plan) Tiết kiệm 100%
Tổng chi phí duy trì ~$90/tháng $0 – $20/tháng Giảm > 80%

Ước tính điểm hòa vốn (ROI): Doanh nghiệp ứng dụng giải pháp này có thể thu hồi toàn bộ chi phí thiết lập ban đầu chỉ sau 2 đến 3 tháng vận hành nhờ việc cắt giảm triệt để chi phí máy chủ và nhân sự quản trị hệ thống.

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

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

  • Xử lý thời gian thực (Real-time Messaging): Kênh tương tác giữa khách hàng và admin hiện sử dụng phương thức truyền thống, chưa tích hợp giao thức WebSocket (Socket.io) hoàn chỉnh.
  • Xử lý tồn kho đồng thời (Concurrency Control): Khi có số lượng đơn hàng cực lớn truy cập đồng thời vào một sản phẩm tại cùng một mili-giây, hệ thống cần bổ sung cơ chế Distributed Locking (Redis Lock).

Hướng phát triển (Kế hoạch Đồ án 2)

  • Tích hợp Chatbot AI đa ngữ: Sử dụng mô hình ngôn ngữ lớn (LLM) để tự động tư vấn size, gợi ý sản phẩm phù hợp với sở thích của khách hàng theo thời gian thực.
  • Mở rộng Recommendation Engine: Xây dựng thuật toán lọc cộng tác (Collaborative Filtering) để tăng giá trị trung bình trên mỗi đơn hàng (AOV).
  • Đa cổng thanh toán nội địa: Tích hợp thêm các cổng VNPay, MoMo và ZaloPay phục vụ thị trường Việt Nam.

Đố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 chuẩn mực về cách tổ chức kiến trúc phần mềm với Next.js 14, Prisma ORM và phương pháp thiết kế cơ sở dữ liệu quan hệ chuẩn 3NF.
  • Lập trình viên Full-stack: Bộ mã nguồn mẫu hoàn chỉnh về quy trình tích hợp cổng thanh toán quốc tế Stripe, xử lý Webhook an toàn và kỹ thuật quản lý trạng thái với Redux Toolkit.
  • Doanh nghiệp vừa và nhỏ (SMEs): Một giải pháp website bán hàng tốc độ cao, giao diện chuẩn UX/UI, chi phí vận hành tối thiểu và sẵn sàng mở rộng quy mô.
  • Nhà nghiên cứu học thuật: Dữ liệu thực nghiệm cụ thể về sự cải thiện hiệu năng khi chuyển dịch từ mô hình Client-Side Rendering sang Hybrid Server-Side Rendering trong thương mại điện tử.

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

1. Yêu cầu kỹ thuật tối thiểu để triển khai (Deploy) hệ thống Breart là gì?

Hệ thống yêu cầu môi trường Node.js phiên bản từ 18.17.0 trở lên (khuyến nghị Node.js 20 LTS), tài khoản Vercel để host ứng dụng Next.js, tài khoản PlanetScale (hoặc MySQL Server 8.0), tài khoản Cloudinary để lấy API Keys lưu trữ ảnh và tài khoản Stripe kích hoạt chế độ API Test/Live Keys.

2. Hệ thống xử lý bài toán quá tải khi lượng truy cập tăng đột biến như thế nào?

Nhờ kiến trúc Serverless của Next.js kết hợp mạng phân phối nội dung Vercel Edge Network, các trang tĩnh và tài nguyên ảnh được cache tự động tại các điểm PoP (Point of Presence) gần người dùng nhất. Phía cơ sở dữ liệu, PlanetScale hỗ trợ khả năng phân mảnh (sharding) và mở rộng ngang tự động mà không gây gián đoạn dịch vụ.

3. Làm thế nào để tích hợp thêm các cổng thanh toán nội địa như VNPay hoặc MoMo?

Hệ thống được thiết kế theo nguyên lý mở rộng linh hoạt (Open/Closed Principle). Lập trình viên chỉ cần tạo thêm các Route Handler tương ứng tại /api/checkout/vnpay hoặc /api/checkout/momo, xây dựng hàm mã hóa chữ ký số (Checksum HMAC-SHA512) và bổ sung endpoint tiếp nhận IPN (Instant Payment Notification) tương tự quy trình của Stripe Webhook.

4. Hệ thống đảm bảo tính toàn vẹn dữ liệu đơn hàng khi người dùng hủy thanh toán giữa chừng ra sao?

Khi người dùng bấm thanh toán, hệ thống khởi tạo bản ghi Order với cờ isPaid: false. Chỉ khi Stripe gửi tín hiệu xác nhận thanh toán thành công thông qua Webhook (checkout.session.completed) với chữ ký hợp lệ (stripe-signature), hệ thống mới cập nhật isPaid: true và kích hoạt trừ tồn kho. Các đơn hàng chưa thanh toán quá 24h sẽ được tự động dọn dẹp bởi Cron Job.

5. Chi phí vận hành thực tế mỗi tháng là bao nhiêu?

Đối với quy mô cửa hàng vừa và nhỏ (dưới 50,000 lượt truy cập/tháng), toàn bộ hệ thống có thể vận hành hoàn toàn miễn phí nhờ vào gói Free/Hobby Tier của Vercel, PlanetScale và Cloudinary. Doanh nghiệp chỉ chi trả phí phần trăm xử lý giao dịch thực tế cho cổng thanh toán Stripe (2.9% + $0.3 cho mỗi giao dịch thành công).

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 đã chứng minh tính khả thi và ưu thế vượt trội của việc kết hợp các công nghệ web hiện đại (Next.js, React, Tailwind CSS, Prisma, MySQL) trong việc giải quyết bài toán thương mại điện tử toàn diện. Đề tài không chỉ hoàn thành xuất sắc các yêu cầu về mặt kỹ thuật, chuẩn hóa cơ sở dữ liệu và bảo mật thanh toán, mà còn mang lại giá trị thực tiễn cao cho cộng đồng doanh nghiệp bán lẻ. Đây là bước đệm vững chắc để tiếp tục phát triển các module trí tuệ nhân tạo chuyên sâu trong giai đoạn tiếp theo.