𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗰𝗵𝗼 𝗡𝗴𝘂̛𝗼̛̀𝗶 𝗠𝗼̛́𝗶 𝗕𝗮̆̀𝗻𝗴: 𝗖𝗮́𝗰𝗵 𝗧ô𝗶 Đ𝗮̃ 𝗫𝗮̂́𝘆 𝗗𝘂̛̣̣𝗡𝗴 𝗠𝗼̣̂𝘁 𝗧𝘄𝗲𝗯 𝗔𝗽𝗽 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵
Tôi là một người viết lách, không phải là một lập trình viên. Kỹ năng kỹ thuật của tôi đã dừng lại ở mức HTML cơ bản từ năm 1999.
Tuần trước, tôi đã xây dựng công cụ thực thụ đầu tiên của mình. Tôi đã sử dụng Claude để "vibe code" một ứng dụng web photo booth hoạt động được cho MLH.
Đây là cách một người không biết lập trình đã xây dựng một ứng dụng thực tế cho các sự kiện trực tiếp.
𝗧𝗵𝗲̂ 𝗩𝗮̂́𝗻 Đ𝗲̂̀ MLH tổ chức nhiều sự kiện. Chúng tôi cần một ứng dụng photo booth chạy trên trình duyệt.
- Người tham dự mở một liên kết trên điện thoại của họ.
- Họ chụp ảnh selfie hoặc tải ảnh lên.
- Họ thêm một khung hình có thương hiệu.
- Họ lưu ảnh vào thư viện ảnh.
- Không cần tài khoản. Không cần cửa hàng ứng dụng. Chỉ cần một liên kết.
𝗧𝗵𝗲̂ 𝗖𝗵𝗶𝗲̂́𝗰 𝗹𝘂̛𝗼̛̣𝗰 𝗞𝘆̃ 𝗧𝗵𝘂𝐚̣̂𝘁 Tôi đã muốn sử dụng một framework phức tạp. Claude đã khuyên tôi không nên làm vậy.
Đối với các sự kiện trực tiếp, càng ít thành phần chuyển động càng tốt. Tôi đã xây dựng toàn bộ công cụ chỉ trong một tệp index.html duy nhất. Nó sử dụng HTML, CSS và JavaScript. Không có bước build phức tạp nào cả. Nó được lưu trữ miễn phí trên GitHub Pages.
𝗧𝗵𝗲̂ 𝗗𝗶̣𝗰𝗵 𝘃ụ 𝗕𝗼̉ 𝘁𝗵𝗲̂𝗺 𝘃𝗲̂̀ 𝗤𝘂𝘆𝗲̂̀𝗻 𝗿𝗶𝗲̣̂𝗻 𝘁𝘂̛̣ Tôi đã sử dụng HTML canvas để kết hợp ảnh và khung hình. Mọi quá trình xử lý đều diễn ra ngay trên trình duyệt của người dùng. Ảnh không bao giờ được tải lên máy chủ. Điều này giúp đảm bảo tính riêng tư và bảo mật cho người tham dự.
𝗧𝗵𝗲̂ 𝗣𝗵𝗲̂́𝗽 𝗺𝗮̣̀𝗻𝗵 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 Một trang web tĩnh vẫn có thể có backend. Tôi đã sử dụng Supabase để lưu trữ.
- Người tổ chức tải các khung hình lên một Supabase bucket.
- Người tham dự xem các khung hình đó thông qua trang web.
- Bảo mật nằm ở các chính sách cơ sở dữ liệu (database policies), chứ không phải ở các mật khẩu ẩn.
𝗧𝗵𝗲̂ 𝗖𝗮̣𝗺 𝗯𝗮̆́𝗻 𝗰𝗵𝗼 𝗡𝗴𝘂̛𝗼̛̀𝗶 𝗠𝗼̛́𝗶 Vibe coding giúp ích cho việc xây dựng kiến trúc, nhưng bạn phải chú ý đến các chi tiết vận hành:
- Cơ sở dữ liệu có thể "ngủ". Tôi đã học được cách đánh thức dự án Supabase của mình trước ngày diễn ra sự kiện.
- Bảo mật hình ảnh. Tôi đã phải thêm một dòng mã cụ thể để cho phép canvas sử dụng các hình ảnh từ xa.
- Trải nghiệm người dùng. Trên điện thoại, nút "tải xuống" thường rất khó tìm. Tôi đã thay đổi mã để sử dụng bảng chia sẻ (share sheet) mặc định của di động. Việc này sẽ gửi ảnh trực tiếp vào thư viện ảnh.
𝗕𝗮𝗶 𝗵𝗼̣ᴄ 𝗰𝘂̉𝗮 𝗧ô𝗶 𝗱𝗮̀𝗹𝗵 𝗰𝗵𝗼 𝗕𝗮̣𝗻
- Chọn một dự án có ranh giới rõ ràng. Một ứng dụng photo booth có điểm kết thúc cụ thể. Một ứng dụng mạng xã hội thì không.
- Hãy hỏi AI "tại sao". Tư duy lập luận quan trọng hơn là mã nguồn.
- Đọc các thay đổi (diffs). Đừng để AI thay đổi trang web của bạn mà không có sự kiểm duyệt của bạn.
- Làm chủ các quyết định. AI xử lý cú pháp, nhưng bạn mới là người xử lý các ràng buộc.
Vibe coding không phải là bỏ qua công việc. Đó là việc tập trung vào đúng vấn đề.
Vibe Coding cho người mới bắt đầu: Cách tôi xây dựng một ứng dụng web Photo Booth hoạt động được với Claude
Bạn đã bao giờ nghe nói đến "vibe coding" chưa?
Nếu bạn là một lập trình viên truyền thống, khái niệm này có thể nghe có vẻ kỳ lạ. Nhưng nếu bạn là một người mới bắt đầu hoặc một người đam mê công nghệ muốn hiện thực hóa ý tưởng nhanh chóng, thì đây chính là tương lai.
Vibe coding không phải là về việc ghi nhớ từng cú pháp phức tạp hay hiểu sâu sắc về cấu trúc dữ liệu. Thay vào đó, nó là về việc mô tả "vibe" (cảm giác/ý tưởng) của những gì bạn muốn xây dựng và để các mô hình ngôn ngữ lớn (LLM) như Claude thực hiện phần việc nặng nhọc.
Trong bài viết này, tôi sẽ chia sẻ hành trình tôi xây dựng một ứng dụng web Photo Booth hoàn chỉnh chỉ bằng cách sử dụng Claude.
Vibe Coding là gì?
Về cơ bản, vibe coding là quá trình phát triển phần mềm thông qua việc giao tiếp bằng ngôn ngữ tự nhiên với AI. Thay vì viết từng dòng mã, bạn đóng vai trò là một "đạo diễn" hoặc "kiến trúc sư", đưa ra các chỉ dẫn cấp cao và tinh chỉnh kết quả dựa trên phản hồi.
Nó giống như việc bạn đang nói với một người bạn cực kỳ giỏi lập trình rằng: "Này, hãy làm cho tôi một trang web trông thật retro, có hiệu ứng nhiễu hạt như ảnh phim, và cho phép người dùng chụp ảnh bằng webcam nhé."
Dự án của tôi: Ứng dụng Web Photo Booth
Tôi muốn tạo ra một ứng dụng web đơn giản nhưng thú vị: một buồng chụp ảnh kỹ thuật số. Các tính năng bao gồm:
- Truy cập webcam.
- Chụp ảnh.
- Áp dụng bộ lọc (filters) để tạo cảm giác hoài cổ.
- Tải ảnh về máy.
Quy trình thực hiện
Bước 1: Đưa ra "Vibe" ban đầu
Tôi bắt đầu với một prompt (câu lệnh) khá mơ hồ. Tôi không bắt đầu bằng việc yêu cầu "Hãy viết một ứng dụng React với Vite và Tailwind CSS...". Thay vào đó, tôi tập trung vào kết quả cuối cùng.
Prompt của tôi:
"Tôi muốn xây dựng một ứng dụng web photo booth phong cách retro. Nó nên có giao diện tối giản, sử dụng webcam để chụp ảnh, có các bộ lọc màu phim, và một nút bấm lớn để chụp. Hãy làm cho nó trông thật 'vibe' và nghệ thuật."
Claude ngay lập tức phản hồi với một cấu trúc mã nguồn hoàn chỉnh, bao gồm HTML, CSS (sử dụng Tailwind) và JavaScript để xử lý logic webcam.
Bước 2: Tinh chỉnh và Lặp lại (Iteration)
Đây là nơi "vibe coding" thực sự tỏa sáng. Mã nguồn đầu tiên không hoàn hảo. Bộ lọc màu chưa đủ "phim", và nút chụp ảnh hơi khó bấm trên điện thoại.
Thay vì tự mình đi tìm lỗi trong hàng trăm dòng code, tôi chỉ cần nói với Claude:
- "Bộ lọc màu hiện tại trông hơi giả. Hãy làm cho nó trông giống như ảnh chụp bằng máy Kodak cũ hơn."
- "Nút chụp ảnh cần phải to hơn và có hiệu ứng khi nhấn vào."
- "Thêm một hiệu ứng đèn flash trắng chớp lên khi ảnh được chụp."
Mỗi lần tôi đưa ra yêu cầu, Claude lại cập nhật mã nguồn. Quá trình này diễn ra rất nhanh. Tôi không cần phải hiểu rõ cách canvas API hoạt động để thay đổi cách bộ lọc áp dụng lên hình ảnh; tôi chỉ cần mô tả cảm giác tôi muốn.
Bước 3: Gỡ lỗi (Debugging) bằng AI
Tất nhiên, không có gì là hoàn hảo ngay lập tức. Khi tôi cố gắng thêm tính năng tải ảnh về, tôi gặp một lỗi liên quan đến quyền truy cập tệp.
Thay vì lên Stack Overflow và tìm kiếm trong vô vọng, tôi chỉ cần copy lỗi đó và dán vào Claude:
"Tôi gặp lỗi này khi cố gắng tải ảnh:
[Dán lỗi vào đây]. Làm thế nào để sửa nó?"
Claude không chỉ sửa lỗi mà còn giải thích tại sao lỗi đó xảy ra, giúp tôi học hỏi thêm một chút về cách trình duyệt xử lý bảo mật.
Những bài học rút ra
- Khả năng giao tiếp là kỹ năng quan trọng nhất: Trong kỷ nguyên vibe coding, khả năng diễn đạt ý tưởng một cách rõ ràng và chi tiết quan trọng hơn khả năng ghi nhớ cú pháp.
- Đừng sợ sai: Nếu AI đưa ra kết quả không như ý, đừng nản lòng. Hãy thử một cách tiếp cận khác hoặc mô tả lại "vibe" của bạn một cách khác.
- Vẫn cần kiến thức nền tảng: Mặc dù bạn có thể "vibe code", nhưng việc hiểu những khái niệm cơ bản sẽ giúp bạn kiểm soát dự án tốt hơn và biết khi nào AI đang đi chệch hướng.
Kết luận
Vibe coding không thay thế việc lập trình, nó nâng tầm nó. Nó cho phép những người có ý tưởng nhưng thiếu kỹ năng kỹ thuật sâu sắc có thể hiện thực hóa tầm nhìn của mình.
Nếu bạn là người mới bắt đầu, đừng đợi đến khi học hết mọi thứ về JavaScript mới bắt đầu xây dựng. Hãy bắt đầu "vibe" ngay hôm nay!