A
Đăng nhập

Nội dung này đã khóa

Vui lòng đăng nhập hoặc đăng ký mua sách để đọc tiếp những kiến thức chuyên sâu này.

Mua bản đầy đủ

Chương 10: Case Study - Hành trình 5 ngày xây dựng Website VibeMaterial

Case Study

"Học đi đôi với hành. Lý thuyết đã đủ. Giờ là lúc chúng ta xắn tay áo lên và xây dựng một sản phẩm thực tế từ con số 0."

Trong chương này, tôi sẽ tường thuật lại chính xác quá trình tôi xây dựng dự án VibeMaterial (Website bán Vật liệu xây dựng) chỉ trong 5 ngày. Đây là dự án mẫu mực cho mô hình Hybrid: Bán lẻ (B2C) + Bán buôn (B2B).

10.1 NGÀY 1: KHỞI TẠO & DATABASE (MÓNG NHÀ)

Mục tiêu: Có một Database trên mây (Supabase) và source code rỗng trên máy.

10.1.1 Khởi tạo Project (15 phút)

Tôi dùng lệnh mà tôi đã chia sẻ ở Chương 6:

npx create-next-app@latest vibe-material --typescript --tailwind --eslint

Sau đó, tôi cài ngay bộ UI "thần thánh":

npx shadcn-ui@latest init
npx shadcn-ui@latest add button card input table

10.1.2 Thiết kế Database trên Supabase (2 tiếng)

Tôi không tạo bảng bằng tay. Tôi dùng Prompt (Chương 7) để nhờ AI tạo SQL.

  • Tôi mở SQL Editor trong Supabase.
  • Paste Prompt: "Create table products, orders, order_items, profiles...".
  • Bấm Run.
  • Kết quả: 4 bảng hiện ra ngay lập tức với đầy đủ khóa ngoại (Foreign Key).

10.1.3 Đổ dữ liệu giả (Seeding)

Để có cái mà test, tôi bảo AI:

"Generate SQL insert script for 10 construction products (Cement, Brick, Sand) and 5 dummy users." Tôi chạy script đó -> Có ngay dữ liệu để hiển thị.

10.2 NGÀY 2: BACKEND & AUTOMATION (HỆ THỐNG ĐIỆN NƯỚC)

Mục tiêu: API phải chạy được. Đặt hàng phải báo về Telegram.

10.2.1 Viết API "Lấy sản phẩm" (Public)

Tôi tạo file app/api/products/route.ts. Logic đơn giản: Gọi Supabase lấy danh sách.

// AI viết 100%
export async function GET() {
  const { data } = await supabase.from('products').select('*');
  return NextResponse.json(data);
}

10.2.2 Viết API "Đặt hàng" (Phức tạp - Transaction)

Phần này khó. Tôi áp dụng kiến thức Chương 8. Tôi tạo Function create_order trong Database (PL/pgSQL) để xử lý Transaction. Sau đó API chỉ việc gọi 1 dòng:

const { error } = await supabase.rpc('create_order', { cart: body.cart });

10.2.3 Kết nối Automation (n8n)

Tôi muốn khi đơn hàng thành công, điện thoại tôi phải rung.

  1. Tôi dựng một workflow trên n8n. Trigger là Webhook.
  2. Tôi vào Supabase -> Database Webhooks -> Trỏ vào link n8n.
  3. Test: Tôi thử dùng Postman bắn một đơn hàng giả. 1 giây sau -> Telegram nổ tin nhắn: "[TING TING] Đơn mới 5.000.000đ". Cảm giác phê không tưởng!

10.3 NGÀY 3: FRONTEND CLIENT (MẶT TIỀN CỬA HÀNG)

Mục tiêu: Khách hàng vào xem, chọn món, bấm mua nhẹ nhàng.

10.3.1 Trang Chủ (Home Page)

Tôi dùng component ProductCard (đã thiết kế ở Chương 9). Tôi dùng grid-cols-2 md:grid-cols-4 của Tailwind để chia cột:

  • Mobile cập nhật: 2 cột.
  • PC: 4 cột. Giao diện lên hình đẹp lung linh như Shopee.

10.3.2 Giỏ hàng (Cart State)

Tôi cài zustand để quản lý giỏ hàng. Tôi làm một cái thanh trượt (Sheet) bên phải. Khi khách bấm nút Mua, thanh trượt chạy ra, liệt kê các món đã chọn. Prompt cho AI: "Create a CartDrawer component using Shadcn Sheet. Connect to Zustand store."

10.3.3 Trang Thanh toán (Checkout)

Form điền thông tin: Tên, SĐT, Địa chỉ. Tôi thêm một chút "ma thuật": Nếu khách hàng nhập SĐT cũ, hệ thống tự động điền Tên và Địa chỉ cũ (dựa vào API check lịch sử). Khách đỡ phải gõ lại. UX +100 điểm.

10.4 NGÀY 4: ADMIN DASHBOARD (PHÒNG ĐIỀU HÀNH)

Mục tiêu: Sếp (là tôi) phải quản lý được tình hình kinh doanh.

10.4.1 Bảng phân tích (Analytics)

Tôi dùng recharts vẽ 2 biểu đồ:

  1. Biểu đồ Cột: Doanh thu 7 ngày qua.
  2. Biểu đồ Tròn: Tỷ lệ Hủy đơn vs Thành công. Nhìn vào đây tôi biết ngay hôm nay bán tốt hay kém.

10.4.2 Quản lý Đơn hàng (Order Management)

Tôi dùng TanStack Table để hiện danh sách 1000 đơn. Tính năng ăn tiền:

  • Bộ lọc: Lọc đơn "Chưa thanh toán".
  • Hành động: Nút "Xác nhận" -> Gọi API đổi trạng thái đơn sang shipping -> Tự động bắn email cho khách: "Hàng đang đi nhé!".

10.5 NGÀY 5: DEPLOY & GO LIVE (KHÁNH THÀNH)

Mục tiêu: Đưa website ra thế giới.

10.5.1 Kiểm tra Bảo mật (Security Audit)

Trước khi mở cửa, tôi rà soát lại (Checklist Chương 11):

  • Đã bật RLS cho bảng orders chưa? (Rồi, khách chỉ xem được đơn của mình).
  • Đã ẩn các biến môi trường nhạy cảm chưa? (Rồi).

10.5.2 Deploy lên Vercel

Tôi đẩy code lên GitHub. Vào Vercel -> Import Project -> Bấm Deploy. Sau 2 phút: Trang web xanh lè Ready. Tôi nhận domain vibematerial.vercel.app.

10.6 Đúc kết & Giới thiệu chương tiếp theo

Vậy là xong. Trong 5 ngày, từ con số 0, tôi đã có một hệ thống:

  • Bán hàng tự động 24/7
  • Quản lý tồn kho chặt chẽ
  • Báo cáo real-time
  • Automation tin nhắn về Telegram

Nó không còn là "dự án mẫu" nữa. Nó là một Doanh nghiệp số thực sự. Và bạn hoàn toàn có thể làm được như vậy.

Bài tập cho bạn: Đừng đọc nữa. Hãy mở máy lên và bắt đầu Ngày 1 của bạn đi!

Tuy nhiên, trước khi "mở cửa hàng" chính thức, bạn cần biết cách bảo vệ nó khỏi kẻ xấu. Ở Chương 11: Testing, Debug & Security, chúng ta sẽ học cách kiểm thử, gỡ lỗi và xây "Rào chắn cuối cùng" để hệ thống an toàn tuyệt đối.

Bài trước Bài tiếp theo