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 6: Khởi tạo dự án - Project Setup

Chapter 6 Setup

"Đầu xuôi đuôi lọt". Việc setup dự án chuẩn ngay từ đầu sẽ giúp bạn tránh được 90% lỗi ngớ ngẩn sau này (như lộ API Key, code chạy ở máy mình nhưng không chạy trên server).

6.1 Cài đặt Môi trường (Environment)

Trước khi viết dòng code nào, hãy đảm bảo máy bạn (hoặc Cloud IDE) đã có đủ:

  1. Node.js: Cài bản LTS (Long Term Support). Đây là nền tảng để chạy Javascript.
  2. Git: Để quản lý phiên bản code (Lưu lại lịch sử sửa xóa).
  3. VSCode + Extensions:
    • ESLint / Prettier: Tự động sửa lỗi chính tả code, format code cho đẹp.
    • Tailwind CSS IntelliSense: Gợi ý class màu sắc, kích thước.

6.2 Khởi tạo Dự án Next.js (The VibeCode Standard)

Đừng tạo file tay. Hãy dùng lệnh tiêu chuẩn của Next.js để nó tự tạo khung nhà. Mở Terminal lên và gõ:

npx create-next-app@latest my-shop

Khi được hỏi, hãy chọn như sau (Đây là Golden Stack):

  • TypeScript: Yes (Giúp code chặt chẽ, AI hiểu code tốt hơn).
  • ESLint: Yes.
  • Tailwind CSS: Yes (Bắt buộc để làm giao diện nhanh).
  • Src directory: Yes (Gom code vào 1 folder cho gọn).
  • App Router: Yes (Công nghệ mới nhất, đừng dùng Pages Router cũ).
  • Import alias (@/*): Yes (Giúp import file dễ hơn).

6.3 Quản lý Biến môi trường (.env) - Tối Quan Trọng

Đây là nơi bạn cất giữ chìa khóa nhà (API Key, Database Password). TUYỆT ĐỐI KHÔNG viết cứng password vào trong code (const password = "123").

  1. Tạo file .env.local ở thư mục gốc.
  2. Điền key vào:
    NEXT_PUBLIC_API_URL=https://api.myshop.com
SUPABASE_KEY=eyJhHbGc...
SUPABASE_URL=https://xyz.supabase.co
  3. Quy tắc Vàng:
    • NEXT_PUBLIC_...: Những biến này sẽ LỘ ra cho người dùng (Frontend). Chỉ để những thứ không mật (như URL public).
    • Không có NEXT_PUBLIC: Biến mật (Secret Key) như SUPABASE_SERVICE_ROLE. Chỉ Backend nhìn thấy.
  4. Kiểm tra .gitignore: Đảm bảo dòng .env*.local đã có trong file .gitignore. Nếu không, bạn sẽ lỡ tay upload chìa khóa lên GitHub cho cả thế giới xem.

6.3.1 Bài học xương máu: 2.000$ bay màu trong một đêm

Có một học viên của tôi từng hớ hênh thế này. Bạn ấy hardcode cái OPENAI_API_KEY ("sk-...") thẳng vào file BotChat.tsx vì tiện và đẩy code lên GitHub Public.

  • Hậu quả: Các con Bot dò quét của Hacker tìm thấy key này trong 3 giây. Bọn chúng dùng Key của bạn ấy để chạy đào coin hoặc spam. Sáng hôm sau, thẻ Visa báo trừ 2.000$.
  • Kết luận: File .env là cái két sắt. Code là cái nhà kính. Đừng để tiền trong nhà kính.

6.4 Cấu trúc thư mục chuẩn cho Web Bán Hàng (Next.js App Router)

Đừng vứt hết file vào một chỗ. Hãy chia nhà ra làm 2 khu biệt lập: Khu Khách (Shop) và Khu Bếp (Admin).

app/
├── (shop)/           # Khu vực Khách hàng (Giao diện đẹp, Animation)
│   ├── page.tsx      # Trang chủ
│   ├── products/     # Trang danh sách
│   └── cart/         # Trang giỏ hàng
├── (admin)/          # Khu vực Quản trị (Giao diện Dashboard, Table)
│   ├── layout.tsx    # Layout riêng (có Sidebar menu trái)
│   ├── dashboard/    # Xem báo cáo
│   └── orders/       # Xử lý đơn hàng
├── api/              # Khu vực Backend (API)
│   ├── webhooks/     # Nhận tin từ n8n/Telegram
│   └── cron/         # Chạy job định kỳ
└── layout.tsx        # Layout gốc

Lợi ích:

  1. Tách biệt Layout: Trang Admin cần Sidebar và Header khác hoàn toàn trang Shop. Dùng Group Route (shop) và (admin) giúp bạn có 2 layout riêng biệt mà không đá nhau.
  2. Bảo mật: Bạn có thể bọc toàn bộ folder (admin) bằng một file layout.tsx có chức năng kiểm tra đăng nhập. Kẻ gian không thể mò vào được.

6.5 Kết nối GitHub & Vercel (CI/CD cơ bản)

Chúng ta sẽ thiết lập quy trình "Code xong là lên sóng" (Automated Deployment).

  1. GitHub:
    • Tạo Repo mới (Private).
    • Push code từ máy lên GitHub.
  2. Vercel:
    • Vào Vercel -> Add New Project -> Import từ GitHub.
    • Vercel sẽ tự động nhận diện Next.js.
    • Environment Variables: Copy nội dung file .env.local vào phần Settings của Vercel.
    • Bấm Deploy.

Kết quả: Mỗi khi bạn (hoặc AI) sửa code và push lên GitHub, Vercel sẽ tự động build và update website sau 1 phút. Bạn không cần làm thủ công copy file lên server nữa.

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

Bạn vừa hoàn thành việc xây "móng nhà" - phần quan trọng nhất quyết định độ bền của cả hệ thống:

  • Cài đặt môi trường Node.js, Git, VSCode
  • Khởi tạo Next.js theo Golden Stack
  • Bảo vệ API Key bằng .env.local
  • Tổ chức thư mục chuẩn với Group Route
  • CI/CD tự động với GitHub + Vercel

Bài học xương máu: 2.000$ bay màu chỉ vì hardcode API Key. Đừng bao giờ lặp lại sai lầm này.

Móng đã vững. Giờ là lúc xây "Kho chứa" - nơi lưu trữ mọi dữ liệu của doanh nghiệp. Ở Chương 7: Database Design, chúng ta sẽ thiết kế Schema cho VibeMaterial với tư duy Relational Database thay vì tư duy "bảng tính phẳng" của Excel/AppSheet.

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