VIBE CODING

Giáo trình từ Cơ bản đến Chuyên gia

Không cần nhớ code. Chỉ cần hiểu "Vibe".

Module 1: Tư duy Module 7: Đồ án

Sự Dịch Chuyển Quyền Lực

Coder Truyền thống

"Thợ xây"

Tự đặt từng viên gạch.
Ám ảnh bởi cú pháp.

Vibe Coder

"Kiến Trúc Sư"

Chỉ đạo AI xây dựng.
Tập trung vào sản phẩm cuối.

3 Trụ Cột Vibe Coding

Prompting

Ra lệnh bằng ngôn ngữ tự nhiên.

Iteration

Tinh chỉnh lặp lại để hoàn thiện.

Reviewing

Kiểm tra kết quả thay vì đọc code.

Vũ Khí "0 Đồng"

VS Code

Cline

Gemini 1.5 Pro

Bước 1 & 2: Cài đặt

1. VS Code

Trình soạn thảo phổ biến nhất thế giới. Tải tại code.visualstudio.com

2. Extension Cline

Vào mục Extension -> Tìm "Cline" -> Install.

Đây là "trợ lý ảo" sẽ code giúp bạn.

Bước 3: Lấy Chìa Khóa (API Key)

Truy cập: aistudio.google.com
Đăng nhập Google.
Bấm Get API Key -> Create API Key.
Copy mã bắt đầu bằng AIza...

Bước 4: Kết nối não bộ

Provider: Google Gemini

API Key: AIzaSyD...... (Dán vào đây)

Model: gemini-1.5-pro-latest

Hello World kiểu Vibe

"Tạo một file mới tên là hello.html.

Viết một trang web hiển thị dòng chữ 'Hello Vibe Coding' màu cầu vồng, có hiệu ứng nhấp nháy giữa màn hình."

Bạn không cần viết thẻ <html>, AI sẽ tự làm tất cả.

Quy trình: Duyệt Lệnh

1. Thinking

AI suy nghĩ...

2. Propose

"Tôi muốn..."

3. Action

Bấm Approve

Dự án 1: Rắn Săn Mồi (1 File)

Mục tiêu:

Tạo game hoàn chỉnh trong 1 file snake.html.
Có HTML, CSS, JS bên trong.
Chạy ngay trên trình duyệt.

Kỹ thuật: One-Shot Prompt

"Tôi muốn làm game Rắn Săn Mồi trong file snake.html.

Yêu cầu:
1. Giao diện Dark Mode, rắn màu xanh neon.
2. Điều khiển bằng phím mũi tên.
3. Có bảng điểm.
4. Khi Game Over hiện nút Play Again.

Hãy tự viết toàn bộ code và tạo file cho tôi."
            

Ra lệnh đầy đủ, chi tiết một lần để AI làm trọn gói.

Check Vibe (Kiểm tra)

Mở file snake.html lên và chơi thử.

Đạt yêu cầu

Rắn chạy được.
Ăn mồi tăng điểm.
Không lỗi trắng trang.

Cần chỉnh sửa

Tốc độ quá chậm?
Màu sắc chưa đẹp?
Rắn chạy xuyên tường?

Iteration: Khái niệm Context

AI không tự biết bạn đang nói về file nào. Hãy chỉ cho nó.

@snake.html

Gõ ký tự @ trong khung chat Cline để chọn file.

Giống như gửi file đính kèm trong Email.

Prompt Tinh Chỉnh

"@snake.html Hãy thực hiện các sửa đổi sau:

Tăng tốc độ rắn lên gấp đôi.
Đổi màu nền sang tím than (Deep Purple).
Thêm tính năng High Score lưu vào bộ nhớ."
            

AI sẽ đọc file cũ -> Sửa -> Ghi đè file mới.

Diff View (So sánh)

Cline sẽ hiện bảng so sánh trước khi lưu.

- background: black;

+ background: #1a0b2e;

Nhiệm vụ: Nhìn lướt qua xem hợp lý không rồi bấm Approve.

Lazy Debugging: Lỗi Terminal

Khi màn hình đen báo lỗi đỏ lòm.

Error: Command 'npm' not found...

Add Terminal Output

Bấm dấu (+) trong Cline -> Chọn Add Terminal Output. Cline sẽ tự sửa.

Lazy Debugging: Lỗi Browser

Ấn F12 trên trình duyệt.
Chọn tab Console.
Copy dòng chữ màu đỏ.
Paste vào Cline:
"@snake.html Tôi bị lỗi này, hãy sửa nó: [Dán lỗi vào]"

Module 3: Dự án Đa File

Rời xa "ao làng" 1 file. Xây dựng cấu trúc chuyên nghiệp.

index.html

Khung xương

style.css

Giao diện (Áo)

script.js

Logic (Não)

Architect Prompt

"Tôi muốn làm Todo List App. Hãy tạo cấu trúc 3 file: index.html, style.css, script.js.

1. HTML: Có input nhập việc và nút thêm.
2. CSS: Giao diện Glassmorphism.
3. JS: Thêm, xóa, lưu LocalStorage.

Hãy tạo các file này."
            

Cline sẽ tự động tạo lần lượt 3 file.

Kỹ thuật: Targeted Editing

Sửa đúng chỗ, không nói chung chung.

Sai:

"Sửa cái nút đi."

(AI không biết nút nào, file nào)

Đúng:

"@style.css Hãy đổi màu nền nút Add sang màu xanh lá."

(Chỉ định rõ file và yêu cầu)

Logic: LocalStorage

Giữ dữ liệu không bị mất khi F5.

function saveData() {
    localStorage.setItem("tasks", list.innerHTML);
}

function loadData() {
    list.innerHTML = localStorage.getItem("tasks");
}
            

Prompt: "@script.js Thêm chức năng lưu dữ liệu vào LocalStorage."

Tài liệu hóa: README.md

Tạo file hướng dẫn sử dụng cho dự án.

# Todo List App

## Tính năng
- Thêm công việc
- Xóa công việc
- Lưu trữ cục bộ
            

Dọn dẹp Context

Đừng để AI bị "loạn não" vì nhớ quá nhiều file cũ.

Xong tính năng A Làm tính năng B

Luôn bắt đầu task mới với một cái đầu sạch sẽ.

Tổng kết Module 3

Quản lý dự án đa file.
Kỹ thuật @filename.
Lưu trữ dữ liệu cơ bản.
Viết tài liệu README.

LEVEL UP

Từ HTML thuần -> Fullstack Framework

index.html

Module 4: Next.js & Tailwind

Công nghệ Tỷ Đô

Framework được dùng bởi Facebook, TikTok, Netflix.

Component: Chia nhỏ giao diện như Lego.
Routing: Tự động tạo đường dẫn.
Server Side: Tối ưu SEO và tốc độ.

Lệnh Khởi Tạo (Agent Mode)

"Hãy khởi tạo dự án Next.js mới tại đây.

Lệnh:
npx create-next-app@latest --typescript --tailwind --eslint --yes

Sau đó chạy npm run dev."

--yes: Tự động chọn mặc định.

Giải phẫu: App Router

app/

layout.tsx

page.tsx

globals.css

about/

page.tsx

page.tsx

Nội dung chính của một trang.

layout.tsx

Khung bao ngoài (Header/Footer).

Tailwind CSS: Style siêu tốc

Viết CSS ngay trong class HTML.

// Cũ
.btn {
    background: red;
    color: white;
}
                

// Tailwind
<button class="bg-red-500 text-white">
                

Shadcn UI: Nội thất lắp ghép

Bộ component đẹp nhất hiện nay.

npx shadcn@latest init

npx shadcn@latest add button card input

Cài đặt xong -> có ngay component xịn trong folder.

Component: Tư duy Lego

Header.tsx

Sidebar.tsx

Card.tsx

Thực hành: Hero Section

"@app/page.tsx Hãy xóa code cũ và tạo trang Landing Page.

Hero Section: Tiêu đề lớn 'Vibe Coding', phụ đề, 2 nút bấm.
Dùng Tailwind căn giữa.
Màu chủ đạo Indigo."
            

Props: Truyền dữ liệu

function Card({ title }) {
    return <div>{title}</div>
}

// Sử dụng
<Card title="Học AI" />
<Card title="Học Next.js" />
            

Giúp tái sử dụng 1 component nhiều lần.

Link: Chuyển trang mượt

Trong Next.js, dùng <Link> thay cho <a>.

Đúng

<Link href="/about">Về chúng tôi</Link>

Chuyển trang tức thì, không load lại web.

Lỗi: Hydration Failed

Lỗi phổ biến nhất khi mới học Next.js.

Error: Hydration failed because the initial UI does not match...

Nguyên nhân: HTML server khác với HTML trình duyệt (Ví dụ: lồng div trong p).

Cách sửa: Copy lỗi ném cho AI.

Layout.tsx

Nơi đặt Navbar và Footer cố định.

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Navbar />   {/* Luôn hiển thị */}
        {children}   {/* Nội dung thay đổi */}
        <Footer />   {/* Luôn hiển thị */}
      </body>
    </html>
  )
}
            

Lucide React Icons

Bộ icon siêu nhẹ tích hợp sẵn.

import { Camera, Home } from "lucide-react"

<Button>
  <Camera className="mr-2 h-4 w-4" /> Chụp ảnh
</Button>
            

Dark Mode

Tailwind hỗ trợ Dark Mode cực dễ.

class="bg-white text-black dark:bg-slate-900 dark:text-white"

Chỉ cần thêm tiền tố dark:.

Responsive Design

Mobile First.

class="bg-red-500 md:bg-blue-500 lg:bg-green-500"

Mobile

Tablet

PC

Tổng kết Module 4

Next.js

App Router, Layout, Page.

UI Stack

Tailwind, Shadcn, Lucide.

Module 5: Kết nối Dữ liệu

Web tĩnh thì chán. Web động mới vui.

Dự án 3: Crypto Checker

Xem giá Bitcoin thời gian thực từ API.

Client vs Server Components

Server (Mặc định)

Chạy trên Server.
Bảo mật API Key.
Không dùng được onClick.

Client

Thêm "use client" ở đầu.
Dùng cho nút bấm, form.
Chạy trên trình duyệt.

Mô hình API (Bồi bàn)

Frontend

Request

Response (JSON)

API / DB

Tạo API Route (Backend)

File: app/api/price/route.ts

import { NextResponse } from "next/server";

export async function GET() {
  const res = await fetch("https://api.coingecko...");
  const data = await res.json();
  
  return NextResponse.json({ price: data.bitcoin.usd });
}
            

Async / Await

Xử lý bất đồng bộ (Chờ đợi).

"Đi mua phở thì phải chờ (await) người ta làm xong mới có mà ăn."

Nếu không await -> Lỗi undefined (Chưa có phở đã ăn).

Frontend: useState

Bộ nhớ tạm thời của component.

"use client";
import { useState } from "react";

// Biến price, hàm setPrice để cập nhật
const [price, setPrice] = useState(0);
const [loading, setLoading] = useState(false);
            

Frontend: Gọi API

async function getPrice() {
  setLoading(true); // Bật loading
  
  const res = await fetch("/api/price"); // Gọi bồi bàn
  const data = await res.json();
  
  setPrice(data.price); // Cập nhật giá
  setLoading(false); // Tắt loading
}
            

Render có điều kiện

return (
  <div>
    {loading ? (
      <p>Đang tải...</p>
    ) : (
      <p>Giá: ${price}</p>
    )}
    <Button onClick={getPrice}>Cập nhật</Button>
  </div>
)
            

Xử lý lỗi: Try/Catch

Phòng khi mất mạng hoặc API chết.

try {
  // Code gọi API
} catch (error) {
  alert("Lỗi rồi! Vui lòng thử lại.");
}
            

Format Tiền tệ

Biến 98000 thành $98,000.00

new Intl.NumberFormat(...).format(price)

useEffect: Tự động chạy

Muốn vừa vào web là hiện giá ngay?

import { useEffect } from "react";

useEffect(() => {
  getPrice(); // Gọi hàm ngay khi component sinh ra
}, []);
            

Tổng kết Module 5

Backend

Route Handler, Response JSON.

Frontend

Fetch, useState, useEffect, Try/Catch.

Module 6: Làm chủ AI

Khi dự án lớn lên, AI sẽ bắt đầu "ngáo". Đây là cách trị.

AI Hallucination (Ảo giác)

Dấu hiệu nhận biết:

Sửa lỗi A ra lỗi B.
Quên code cũ.
Bịa đặt thư viện không tồn tại.
Code lặp đi lặp lại vô nghĩa.

Chiến thuật Reset (Rút phích)

1. Stop

Dừng chat ngay.

2. New Task

Tạo phiên mới.

3. Re-Context

Nạp lại file cần thiết.

Add Terminal Output

Khi terminal báo lỗi dài ngoằng.

Bấm dấu (+) trong Cline -> Add Terminal Output

Cline sẽ tự đọc log lỗi và phân tích nguyên nhân.

System Design: spec.md

Bản đồ cho AI không bị lạc.

# PROJECT SPEC

## 1. Overview
App quản lý chi tiêu.

## 2. Features
- Thêm/Xóa giao dịch.
- Biểu đồ thống kê.

## 3. Data Structure
Transaction { id, amount, date, category }
            

Viết file này trước khi bắt đầu dự án lớn.

Refactoring (Tối ưu)

Biến code rác thành code sạch.

Dọn rác

"Tìm biến thừa và xóa giúp tôi."

Chia nhỏ

"Tách component này ra file riêng."

AI Code Review

Nhờ AI đóng vai chuyên gia.

"@app/page.tsx Đóng vai Senior Dev.

Review code này, tìm lỗi tiềm ẩn và đề xuất cách tối ưu."

File .clinerules

Thiết quân luật cho AI.

# CLINE RULES

Luôn trả lời Tiếng Việt.
Không xóa comment.
Phân tích nguyên nhân trước khi sửa lỗi.
            

Module 7: Triển khai & Tốt nghiệp

Localhost

Production

Git & GitHub

Git

Lưu lịch sử code trên máy.

GitHub

Kho chứa code trên đám mây.

Đẩy code (Agent Mode)

"Đẩy code lên GitHub: [LINK REPO CỦA BẠN].

Thực hiện:
1. git init
2. git add .
3. git commit
4. git push"
            

Cline sẽ gõ lệnh giúp bạn.

Deploy Vercel

Vào vercel.com -> Login GitHub.
Add New Project -> Chọn Repo.
Cấu hình Environment Variable (Nếu có API Key).
Bấm Deploy.

CI/CD: Tự động cập nhật

Sửa code -> Push GitHub -> Vercel tự update.

ĐỒ ÁN TỐT NGHIỆP

AI Cover Letter Generator

Nhập CV + Job Description -> AI viết thư xin việc.

Spec Đồ Án

## Features

1. Textarea nhập CV.
2. Textarea nhập JD (Job Description).
3. Nút "Generate" gọi Gemini API.
4. Hiển thị kết quả và nút Copy.

## Tech Stack
- Next.js 14
- Tailwind Typography
- Google Gemini API
            

Học gì tiếp theo?

Database: Supabase, Prisma.

Auth: Clerk, NextAuth.

Payment: Stripe.

Tài nguyên học tập

Youtube

"Next.js 14 Tutorial", "Vercel AI SDK".

Docs

nextjs.org/docs, ui.shadcn.com

CONGRATULATIONS!

Bạn chính thức trở thành Vibe Coder.

"Cách tốt nhất để dự đoán tương lai là tạo ra nó."