Vibe Coding — Mới Bắt Đầu

Mục tiêu

Sau bài này, học viên hiểu Vibe Coding là gì, tại sao không cần học gõ code, và tạo được app đầu tiên trong vòng 2 phút.

Sau bài này, bạn sẽ:

• ✅ Hiểu Vibe Coding là gì và tại sao nó thay đổi cuộc chơi
• ✅ Biết cách sử dụng Bolt.new để tạo app ngay trên trình duyệt
• ✅ Tạo được app đầu tiên hoạt động trong 2 phút — không cần cài đặt gì

Nội dung chính

1.1 — Vibe Coding là gì?

Hãy tưởng tượng bạn muốn mở một quán cà phê. Bạn có hai lựa chọn:

• Cách cũ (Lập trình truyền thống): Tự học pha chế 3 năm, tự thiết kế quán, tự xây từng viên gạch. Rất lâu, rất khó, nhưng hiểu mọi thứ.
• Cách mới (Vibe Coding): Bạn vẽ bản thiết kế quán trên giấy, mô tả cho đội thợ (AI) nghe, rồi để họ xây. Bạn chỉ cần kiểm tra và điều chỉnh.

Vibe Coding = mô tả bằng tiếng người → AI viết code → bạn kiểm tra kết quả → điều chỉnh lại.

Thuật ngữ đầu tiên:

• Prompt = câu lệnh bạn gõ cho AI (giống như bạn nói cho thợ xây biết bạn muốn gì)
• AI Model = “bộ não” của AI (ChatGPT, Claude, Gemini… giống như mỗi thợ xây có tay nghề khác nhau)

Mẹo: Đừng lo lắng về việc chọn “đúng” AI Model. Ở giai đoạn mới bắt đầu, tất cả đều đủ tốt. Quan trọng hơn là bạn biết cách mô tả rõ ràng — bài 2 sẽ dạy kỹ hơn.

1.2 — Công cụ: Bolt.new — “Cây đũa thần”

Bolt.new là một công cụ chạy ngay trên trình duyệt, không cần cài đặt gì cả. Bạn gõ mô tả → nó tạo ra app hoàn chỉnh.

Tại sao bắt đầu bằng Bolt.new? Vì nó là rào cản thấp nhất. Không cần cài phần mềm, không cần biết terminal, không cần tài khoản phức tạp. Chỉ cần mở trình duyệt và gõ.

Các công cụ tương tự để biết:

Công cụ	Đặc điểm	Khi nào dùng
Bolt.new	Nhanh, chạy trên trình duyệt, miễn phí giới hạn	Bắt đầu học, tạo app nhanh
Lovable	Giao diện đẹp, tập trung thiết kế	Khi cần app đẹp, ít logic phức tạp
Replit Agent	Có môi trường code đầy đủ	Khi cần backend / database
v0.dev	Chuyên tạo giao diện (UI)	Khi cần thiết kế component riêng

1.3 — Hướng dẫn sử dụng Bolt.new từng bước

Đây là quy trình chi tiết để bạn tạo app đầu tiên:

Bước 1: Mở trình duyệt (Chrome, Safari, Edge đều được) và vào bolt.new

Bước 2: Bạn sẽ thấy giao diện gồm:

• Ô nhập prompt lớn ở giữa — đây là nơi bạn gõ mô tả app
• Phía dưới có một số template gợi ý — bạn có thể bỏ qua

Bước 3: Gõ prompt (xem phần 1.4 bên dưới) và nhấn Enter hoặc bấm nút gửi

Bước 4: Chờ AI tạo app (~30-60 giây). Bạn sẽ thấy:

• Bên trái: code đang được viết tự động (không cần đọc)
• Bên phải: app đang được tạo và hiện ra ngay trước mắt

Bước 5: Khi hoàn tất, bạn có thể bấm thử app ngay trên trình duyệt

Mẹo: Nếu lần đầu tiên Bolt.new yêu cầu tạo tài khoản, bạn có thể đăng nhập bằng tài khoản Google — nhanh nhất.

1.4 — Demo sống: Tạo app trong 2 phút

Bước 1: Mở bolt.new

Bước 2: Gõ prompt đầu tiên:

Tạo cho tôi một ứng dụng đồng hồ đếm ngược Pomodoro.

Yêu cầu chức năng:
- Đếm ngược 25 phút cho thời gian làm việc
- Đếm ngược 5 phút cho thời gian nghỉ
- Có 2 nút: "Bắt đầu" và "Đặt lại"
- Khi hết giờ thì phát tiếng "ding" và hiện thông báo
- Tự động chuyển từ làm việc sang nghỉ ngơi

Yêu cầu giao diện:
- Nền tối (dark mode), chữ trắng
- Đồng hồ hiển thị số lớn ở giữa màn hình
- Nút bo tròn, màu xanh lá khi "Bắt đầu", màu đỏ khi "Đặt lại"
- Font hiện đại, tối giản
- Có hiệu ứng nhẹ khi đếm (ví dụ: thanh progress bar tròn)

Ghi chú:
- Responsive — hiển thị tốt trên cả điện thoại và máy tính
- Không cần đăng nhập, chạy ngay khi mở

Bước 3: Chờ AI tạo app (~30 giây) → Xem kết quả trực tiếp trên trình duyệt.

Bạn vừa tạo được app đầu tiên! Không cần biết JavaScript, HTML, hay CSS là gì. Bạn chỉ cần biết mình muốn gì và mô tả cho rõ ràng.

Prompt nâng cao — Pomodoro với thống kê:

Nâng cấp app Pomodoro hiện tại:

- Thêm bộ đếm: hiển thị "Hôm nay bạn đã hoàn thành X pomodoro"
- Cho phép tùy chỉnh thời gian: 15 / 25 / 45 phút
- Thêm thanh tiến trình tròn (circular progress) bao quanh đồng hồ
- Lưu số pomodoro vào localStorage để không mất khi tải lại trang

Mẹo: Bạn có thấy prompt thứ hai ngắn hơn prompt đầu tiên không? Đó là vì AI đã nhớ ngữ cảnh từ prompt trước. Bạn chỉ cần nói thêm điều mới, không cần lặp lại.

Lỗi thường gặp

Vấn đề: Bolt.new không tạo được app, chỉ hiện trang trắng hoặc lỗi. → Thử tải lại trang (F5) và gõ lại prompt. Đôi khi server bận, chỉ cần thử lại.

Vấn đề: App tạo ra không đúng ý — thiếu nút hoặc giao diện xấu. → Đừng xóa đi làm lại! Hãy gõ thêm prompt mô tả cụ thể phần bạn muốn sửa. Ví dụ: “Đổi màu nút Bắt đầu thành xanh lá, và làm cho nút lớn hơn.”

Vấn đề: Bolt.new yêu cầu trả phí sau vài lần dùng. → Mỗi ngày Bolt.new cho bạn dùng miễn phí một lượng nhất định. Hãy tiết kiệm bằng cách viết prompt kỹ trước khi gửi, tránh gửi prompt lung tung thử nghiệm.

Vấn đề: Tiếng “ding” không phát khi hết giờ. → Kiểm tra xem trình duyệt có bị tắt âm thanh không. Nếu vẫn không được, thêm prompt: “Thay tiếng ding bằng hiệu ứng visual — flash màn hình trắng 1 giây khi hết giờ.”

Bài tập thực hành

Nhiệm vụ: Mở Bolt.new và tạo 1 app bất kỳ theo ý bạn.

Gợi ý (chọn 1):

• Máy tính chia bill nhà hàng — nhập tổng tiền, số người, tính tiền mỗi người (⏱️ ~5 phút)
• Danh sách việc cần làm (To-do list) — thêm, xóa, đánh dấu hoàn thành (⏱️ ~5 phút)
• App random chọn quán ăn trưa — nhập danh sách quán, bấm nút random (⏱️ ~3 phút)

Tiêu chí thành công:

• ✅ App chạy được, không bị lỗi trắng màn hình
• ✅ Có ít nhất 1 nút bấm hoạt động đúng
• ✅ Giao diện nhìn sạch sẽ, không bị lệch

Gợi ý nếu bị stuck:

• Nếu app bị lỗi, thử copy dòng lỗi đỏ và paste lại cho AI kèm câu “Hãy sửa lỗi này”
• Nếu không biết viết prompt gì, bắt đầu bằng: “Tạo app [tên app] đơn giản, giao diện tối giản, nền trắng”

Thời gian: 10 phút Deliverable: Screenshot app đang chạy, gửi lên nhóm học tập

Tổng kết bài 1

Bạn đã học được	Chi tiết
Vibe Coding là gì	Mô tả bằng tiếng người → AI code → bạn kiểm tra
Prompt là gì	Câu lệnh bạn gõ cho AI
Bolt.new là gì	Công cụ tạo app trên trình duyệt, không cần cài đặt
Kỹ năng đầu tiên	Tạo được 1 app hoạt động trong 2 phút