Xây dựng ứng dụng đầu tiên bằng Vibe Coding

Lý thuyết đã xong. Giờ hãy bắt tay vào xây dựng.

Bài học này sẽ hướng dẫn bạn xây dựng một ứng dụng web hoàn chỉnh từ ý tưởng đến sản phẩm hoạt động, áp dụng mọi kỹ thuật tạo prompt từ bài học trước.

🔄 Tóm tắt nhanh: Trong bài học trước, bạn đã học 4 kỹ thuật tạo prompt: Tính cụ thể, phân lớp ngữ cảnh, tạo prompt từng bước và Nghiên cứu-Lập kế hoạch-Thực hiện. Giờ bạn sẽ áp dụng tất cả chúng vào thực tế.

Thứ tự xây dựng

Mọi dự án vibe coding đều tuân theo trình tự này:

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.

1. Khái niệm → Bạn đang xây dựng cái gì? Cho ai?
2. Bố cục → Điều hướng, các trang, cấu trúc tổng thể
3. Cốt lõi → Tính năng chính (điều duy nhất ứng dụng làm)
4. Hỗ trợ → Các tính năng phụ (xác thực, cài đặt, tìm kiếm)
5. Hoàn thiện → Kiểu dáng, thiết kế đáp ứng, hoạt ảnh
6. Triển khai → Đưa ứng dụng lên mạng

✏️ ​​Cách điền thông tin chi tiết: Thay thế mỗi dấu ngoặc vuông [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin mơ hồ sẽ tạo ra kết quả mơ hồ — hãy cụ thể.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về phản hồi có cấu trúc dựa trên prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.

📌 Nên làm gì với kết quả: Lưu phản hồi vào file Notes. Chọn đề xuất có tác động cao nhất và thực hiện nó trong tuần này — đừng cố gắng làm tất cả mọi thứ cùng một lúc.

⚠️ Nếu thấy không ổn: Nếu các đề xuất quá chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ những lời khuyên chung chung đi." Nếu bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy hỏi: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với đó là ràng buộc chính."

Đừng bao giờ bỏ qua các bước. Xây dựng tính năng trước khi thiết kế bố cục có nghĩa là phải xây dựng lại bố cục sau này. Hoàn thiện trước khi thêm tính năng có nghĩa là phải hoàn thiện lại sau khi thay đổi.

Bước 1: Xác định khái niệm

Trước khi viết bất kỳ yêu cầu nào, hãy trả lời ba câu hỏi:

• Ứng dụng làm gì? (Một câu)
• Ai sử dụng nó? (Người cụ thể, không phải "mọi người")
• Phiên bản tối thiểu khả thi là gì? (Loại bỏ mọi thứ không cần thiết)

Ví dụ: "Một trình quản lý bookmark dành cho các nhà phát triển web, lưu URL kèm tag và cho phép bạn tìm kiếm theo tag".

Bước 2: Xây dựng bố cục

Yêu cầu đầu tiên của bạn nên thiết lập cấu trúc hoàn chỉnh:

Xây dựng một ứng dụng quản lý bookmark với bố cục sau:

TIÊU ĐỀ:
- Tên ứng dụng "DevMarks" ở bên trái
- Thanh tìm kiếm ở giữa
- Nút "+ Add Bookmark" ở bên phải

THANH BÊN (bên trái):
- Danh sách bộ lọc thẻ hiển thị tất cả các tag
- Nhấp vào một thẻ để lọc bookmark

NỘI DUNG CHÍNH:
- Lưới các thẻ bookmark
- Mỗi thẻ hiển thị: tiêu đề, URL (rút gọn), tag dưới dạng huy hiệu màu, ngày được thêm
- Nhấp vào một thẻ để mở URL trong một tab mới

DI ĐỘNG:
- Thanh bên trở thành menu hamburger
- Các thẻ xếp chồng theo chiều dọc
- Thanh tìm kiếm di chuyển xuống dưới tiêu đề

Sử dụng thiết kế đơn giản, tối giản với nền trắng và viền xám nhẹ.

Kiểm tra. Thay đổi kích thước trình duyệt. Bố cục trên thiết bị di động có hoạt động không? Khắc phục mọi sự cố trước khi tiếp tục.

Cam kết. Nếu bạn đang sử dụng Cursor hoặc Claude Code với git, hãy cam kết bố cục hoạt động này. Đó là checkpoint sạch của bạn.

✅ Kiểm tra nhanh: Bạn đã xây dựng bố cục nhưng thanh bên không thu gọn trên thiết bị di động. Bạn nên sửa lỗi này ngay bây giờ hay chuyển sang các tính năng khác?

Câu trả lời: Hãy sửa ngay. Các vấn đề về bố cục sẽ tích lũy dần — mỗi tính năng bạn xây dựng trên một bố cục bị lỗi sẽ tạo ra nhiều công việc hơn sau này. Hãy sửa nền tảng trước, sau đó mới xây dựng dựa trên đó.

Bước 3: Xây dựng tính năng cốt lõi

Tính năng cốt lõi là điều duy nhất ứng dụng của bạn phải làm được. Đối với trình quản lý bookmark, đó là thêm và hiển thị bookmark:

Thêm khả năng tạo bookmark mới:

Khi người dùng nhấp vào "+ Add Bookmark":
1. Hiển thị cửa sổ pop-up với các trường: URL, Title, Tags (phân cách bằng dấu phẩy)
2. Khi URL được dán, tự động lấy tiêu đề trang nếu có thể
3. Tag sẽ xuất hiện dưới dạng huy hiệu màu trong trường nhập liệu
4. Nút Save thêm bookmark vào lưới
5. Nút Cancel đóng cửa sổ pop-up

Lưu trữ bookmark trong localStorage của trình duyệt trước.
Hiển thị chúng dưới dạng thẻ trong lưới chính, được sắp xếp theo ngày thêm (mới nhất trước).

Hãy thử nghiệm. Thêm 5-6 bookmark. Chúng có còn hiển thị sau khi load lại trang không? Các tag có hiển thị chính xác không?

Bước 4: Thêm các tính năng hỗ trợ

Mỗi tính năng một prompt. Kiểm tra giữa mỗi lần thêm:

Tính năng: Lọc tag

Khi người dùng nhấp vào một tag trong thanh bên, hãy lọc lưới chính để chỉ hiển thị
các bookmark có tag đó. Highlight tag đang hoạt động. Thêm tùy chọn "All"
ở trên cùng để hiển thị tất cả. Cập nhật số lượng bookmark bên cạnh mỗi tag.

Tính năng: Tìm kiếm

Thanh tìm kiếm trong tiêu đề sẽ lọc bookmark theo thời gian thực khi
người dùng nhập. Tìm kiếm theo tiêu đề, URL và tag. Hiển thị "No results" kèm theo
gợi ý xóa tìm kiếm nếu không có kết quả phù hợp.

Tính năng: Xóa

Thêm một nút "×" nhỏ ở góc trên bên phải của mỗi thẻ bookmark.
Nhấp vào nút đó sẽ hiển thị xác nhận: "Delete this bookmark?" với các nút Cancel
và Delete. Delete sẽ xóa bookmark khỏi localStorage và lưới.

Mỗi tính năng có prompt riêng, bài kiểm tra riêng và (nếu sử dụng git) một commit riêng.

✅ Kiểm tra nhanh: Bạn đã xây dựng 3 tính năng và tính năng số 4 làm hỏng chức năng lọc tag mà bạn đã xây dựng trước đó. Điều gì đã xảy ra?

Câu trả lời: Tính năng mới có thể đã sửa đổi code mà bộ lọc tag phụ thuộc vào. Nếu bạn đã commit sau mỗi tính năng, bạn có thể so sánh sự khác biệt để xem điều gì đã thay đổi. Nếu không commit, bạn sẽ khó tìm ra vấn đề hơn — đó là lý do tại sao các checkpoint lại quan trọng.

Bước 5: Hoàn thiện

Chỉ sau khi mọi thứ hoạt động:

Hoàn thiện trình quản lý bookmark:
- Thêm hiệu ứng hoạt ảnh mờ dần khi thẻ mới xuất hiện
- Thêm hiệu ứng di chuột trên thẻ (bóng mờ nhẹ + nâng nhẹ)
- Cải thiện bảng màu: sử dụng màu chàm cho các hành động chính,
  màu xám ấm cho nền
- Thêm trạng thái trống: khi không có bookmark nào, hiển thị một thông báo thân thiện
  kèm hình minh họa gợi ý và nút "Add your first bookmark"
- Đảm bảo tất cả các chuyển đổi đều là 200ms

Việc hoàn thiện rất đáng hài lòng nhưng không quan trọng cho đến khi các tính năng hoạt động. Một ứng dụng đẹp nhưng bị lỗi vẫn là một ứng dụng bị lỗi.

Bước 6: Triển khai

Hầu hết các công cụ vibe coding đều bao gồm chức năng triển khai:

• Lovable: Nhấp vào "Publish" — công cụ này sẽ tự động lưu trữ
• Bolt.new: Tải xuống code và triển khai lên Vercel/Netlify
• Replit: Nhấp vào "Deploy" — chức năng host đã được bao gồm
• Cursor/Claude Code: Đẩy lên GitHub → kết nối với Vercel hoặc Netlify

Hãy giúp tôi triển khai ứng dụng này lên Vercel:
1. Những file nào cần có trong thư mục gốc của dự án?
2. Tôi nên sử dụng lệnh xây dựng nào?
3. Có cần thiết lập biến môi trường nào không?
4. Hãy hướng dẫn tôi các bước triển khai.

Toàn bộ tiến trình xây dựng

Đối với một ứng dụng đơn giản như trình quản lý bookmark này:

Đó là sức mạnh của vibe coding. Ứng dụng không hề kém chức năng — mà được xây dựng nhanh hơn vì AI xử lý việc triển khai trong khi bạn chỉ cần đưa ra quyết định.

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

Xây dựng một trong những ứng dụng này bằng quy trình 6 bước:

1. Ứng dụng theo dõi thói quen — Theo dõi thói quen hàng ngày với tính năng đếm chuỗi và chế độ xem lịch
2. Ứng dụng chia chi phí — Thêm chi phí, phân công cho từng người, tính toán ai nợ ai
3. Ứng dụng flashcard — Tạo bộ thẻ, học tập với thẻ lật, theo dõi những thẻ bạn đã nhớ

Tuân theo thứ tự xây dựng: Ý tưởng → bố cục → tính năng cốt lõi → tính năng hỗ trợ → hoàn thiện. Cam kết (commit) giữa mỗi bước.

Những điểm chính cần ghi nhớ

• Tuân theo thứ tự xây dựng: bố cục → cốt lõi → hỗ trợ → hoàn thiện → triển khai
• Một tính năng cho mỗi yêu cầu — kiểm tra giữa mỗi bước
• Tạo checkpoint Git trước khi thêm mỗi tính năng mới
• Khắc phục sự cố bố cục trước khi xây dựng các tính năng dựa trên chúng
• Để việc hoàn thiện lại sau cùng — việc thêm vào rất nhanh và việc gỡ lỗi sẽ gây mất tập trung
• Hầu hết các công cụ vibe coding đều bao gồm tính năng triển khai chỉ với một cú nhấp chuột