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 9: Frontend - Nghệ thuật quyến rũ khách hàng

"Backend tốt giúp bạn ngủ ngon. Frontend đẹp giúp bạn kiếm tiền."

Khách hàng không nhìn thấy Database, không biết API là gì. Họ chỉ quan tâm: Web có đẹp không? Lướt có mượt không? Nút mua hàng có dễ bấm không? Trong chương này, chúng ta sẽ xây dựng Giao diện (UI) cho VibeMaterial theo chuẩn UI/UX Pro Max để tối ưu tỷ lệ chốt đơn.

9.1 Tư duy Component: Chia để trị (Atomic Design)

Đừng viết cả trang web trong 1 file dài 2000 dòng. Hãy xé nhỏ nó ra như trò chơi Lego.

9.1.1 Case Study: Trang Chi Tiết Sản Phẩm (Product Detail)

Một trang bán hàng nhìn thì phức tạp, nhưng thực chất chỉ được ghép từ các mảnh nhỏ:

ProductImageGallery: Cụm ảnh (Ảnh chính to, ảnh nhỏ bên dưới).
ProductInfo: Tên, Giá (Có gạch giá cũ), SKU.
AddToCartButton: Nút bấm quan trọng nhất.
ReviewsSection: Phần đánh giá sao.

Tại sao phải chia nhỏ?

Tái sử dụng: Cái nút AddToCart có thể dùng lại ở trang chủ, trang danh sách, trang tìm kiếm.
Dễ sửa: Sếp bảo "Đổi màu nút mua hàng", bạn chỉ cần sửa file Button.tsx 1 lần, cả web đổi theo.

9.2 Vũ khí tối thượng: TailwindCSS + Shadcn/UI

Ngày xưa làm CSS rất khổ sở. Giờ chúng ta có bộ đôi hủy diệt này.

9.2.1 Shadcn/UI (Không phải thư viện, là Copy-Paste)

Đây là xu hướng mới nhất 2026. Thay vì npm install 1 cục thư viện nặng nề (như Material UI), Shadcn cho phép bạn copy code của từng component (Ví dụ: cái thẻ Card, cái Input) về máy mình.

Lợi ích: Bạn nắm toàn quyền kiểm soát code. Muốn sửa bo góc, đổi màu gì cũng được. Web cực nhẹ.

9.2.2 Ví dụ thực chiến: Nút "Thêm vào giỏ"

Prompt cho AI:

Role: Senior Frontend Dev. Task: Create a BuyButton component using Tailwind & Shadcn. Features:

State loading: Show spinner when clicking.

State success: Turn green and show checkmark after added.

Variant: "Primary" (Solid color) for Buy Now, "Ghost" (Border only) for Add to Cart.

Kết quả (Tư duy UX): Khách bấm nút -> Nút xoay xoay (Feedback) -> Hiện "Đã thêm" (Confirmation). Trải nghiệm sướng gấp 10 lần nút bấm vô tri trên AppSheet.

9.3 State Management: Quản lý "Trí nhớ" tạm thời (Zustand)

Cái khó nhất của Frontend là: Làm sao để cái số trên icon Giỏ hàng (Góc phải trên) nhảy số ngay lập tức khi khách bấm mua ở Góc trái dưới?

Nếu dùng cách truyền tin thủ công (Props drilling) qua 10 lớp Component, bạn sẽ phát điên. Hãy dùng Global State (Zustand).

9.3.1 Mô hình "Kho Hàng Trên Mây" (Store)

Tưởng tượng có một cái "Kho tin tức" lơ lửng trên đầu trang web.

Nút "Mua" bấm 1 cái -> Hét lên kho: "Ê, thêm 1 món X vào giỏ!".
Icon Giỏ hàng đang lắng nghe kho -> Thấy tin mới -> Tự động cập nhật số lượng (1).

Code đơn giản đến bất ngờ:

// store.ts (Cái kho)
import { create } from 'zustand'

export const useCartStore = create((set) => ({
  items: [],
  addItem: (product) => set((state) => ({ items: [...state.items, product] })),
  count: () => get().items.length,
}))

// ProductCard.tsx (Nơi bấm)
const addItem = useCartStore((state) => state.addItem)
return <button onClick={() => addItem(product)}>Mua ngay</button>

// Header.tsx (Nơi hiển thị)
const count = useCartStore((state) => state.items.length)
return <div>Giỏ hàng ({count})</div>

Hiệu quả: Không cần reload trang, mọi thứ mượt như Native App.

9.4 Dashboard Admin: Nơi Sếp nhìn số

Đừng làm Dashboard qua loa. Sếp trả lương cho bạn là để nhìn vào cái này.

9.4.1 Data Table (Bảng dữ liệu)

Không dùng bảng HTML <table> thường. Hãy dùng TanStack Table. Tính năng bắt buộc phải có cho Admin:

Phân trang (Pagination): Next/Prev.
Sort (Sắp xếp): Bấm vào cột "Giá" để xếp giá cao/thấp.
Filter (Lọc): Tìm khách hàng theo tên.

9.4.2 Chart (Biểu đồ)

Dùng Recharts.

Vẽ biểu đồ cột (Bar Chart): Doanh thu 7 ngày qua.
Vẽ biểu đồ tròn (Pie Chart): Tỷ trọng mặt hàng bán chạy (Gạch vs Xi măng).

9.5 Mobile First: Đừng quên điện thoại

70% khách mua VLXD sẽ vào bằng điện thoại (Lúc đang ở công trường). Nếu bạn thiết kế Component trên máy tính xong mới chỉnh cho Mobile, bạn sẽ vỡ giao diện. Hãy làm ngược lại: Thiết kế cho Mobile trước.

Trên Mobile: Các thẻ sản phẩm xếp dọc (1 cột). Nút Mua Hàng phải dính chặt ở đáy màn hình (Sticky Bottom) để ngón tay cái dễ bấm.
Trên PC: Các thẻ bung ra 4 cột.

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

Frontend VibeCode không chỉ là HTML/CSS. Nó là sự kết hợp hoàn hảo của:

Tâm lý học (UX): Làm cho khách sướng - nút xoay xoay, hiện "Đã thêm"
Tổ chức (Architecture): Chia nhỏ Component theo Atomic Design
Luồng dữ liệu (State): Kết nối mượt mà với Zustand

Khi bạn làm tốt 3 điều này, website của bạn không chỉ là "trang tin tức", nó là một Cỗ máy bán hàng tự động.

Lý thuyết đã đủ. Giờ là lúc xắn tay áo lên! Ở Chương 10: Case Study, tôi sẽ tường thuật lại chính xác quá trình xây dựng VibeMaterial chỉ trong 5 ngày - từ Database (Chương 7) + Backend (Chương 8) + Frontend (Chương 9) thành một sản phẩm hoàn chỉnh.