Làm website thời vibe code

Trắc trở lớn nhất đối với dân code backend khi làm web, làm app (nói chung là làm Frontend) là ngại. Tuy nhiên, với sự ra đời của các công cụ AI vibe code bây giờ, chuyện có vẻ đã khác.

Trắc trở lớn nhất đối với dân code backend khi làm web, làm app (nói chung là làm Frontend) là ngại.

Ngại nhìn mấy ngôn ngữ, framework frontend, vì lối tổ chức code phi-structure, flow rối rắm. Và chủ yếu là ngại xấu, vì không biết thế nào là đẹp.

Tuy nhiên, với sự ra đời của các công cụ AI vibe code bây giờ, chuyện có vẻ đã khác.

Ảnh gen bởi ChatGPT với nội dung từ đoạn kết bài

Từ những ngày xưa

Cách đây mấy năm, tôi có một nhóm mấy anh em rủ nhau làm side-project.

Để kiếm tiền, chúng tôi quyết định làm sản phẩm cho người dùng cuối. Ý tưởng là xây dựng một website thu thập khuyến nghị cổ phiếu từ các công ty chứng khoán, theo dõi kết quả hàng ngày, lập danh sách thống kê kết quả để chỉ ra công ty nào có khuyến nghị xịn, công ty nào dở. Dĩ nhiên, sản phẩm đó cần có giao diện.

Đến giờ tôi vẫn nhớ khoảng thời gian đó, tôi có thể ngồi tập trung cả tối để viết các đoạn mã Python thực hiện tính toán tự động đánh giá hiệu quả của hàng loạt khuyến nghị, nhưng không chịu được việc phải mày mò sửa mã màu CSS của một nút ấn.

Alan J.Perlis có câu nói nổi tiếng "A language that doesn't affect the way you think about programming is not worth knowing." Tạm dịch: "Một ngôn ngữ (lập trình) không làm thay đổi cách bạn tư duy về lập trình thì không đáng để học."

Nghĩ ngược lại, khi bạn học một ngôn ngữ lập trình mới, bạn cần thay đổi cách tư duy.

Chỉ là tôi không thích.

Đến đề bài của vợ

Vợ tôi đang học một khoá Coaching quốc tế, và nhờ tôi làm website cá nhân để bắt đầu công việc này. Chạm vào điểm "ngại", tôi lần lữa mãi, chả nhẽ bảo mình không biết làm, nhưng cứ ngại không làm.

Tuần trước vợ khoe bạn vợ được chồng làm cho cái website dạy học, nói bóng gió. Tự ái nghề nghiệp nổi lên, tôi quyết làm.

Nhân việc đang tìm hiểu và triển khai AI cho bộ phận Công nghệ ở công ty, đúng là thiên thời, địa lợi, tôi đặt mục tiêu xây dựng website này hoàn toàn bằng AI.

Vibe Coding

Là người trong nghề, tôi vốn đã sử dụng AI Assistant từ 2-3 năm trước. ChatGPT cho trợ giúp đa nhiệm, Github Copilot / Cursor cho việc hỗ trợ lập trình. Tuy nhiên, ở thời điểm hiện tại, các công cụ AI cho người làm phần mềm đã phát triển rất nhanh, cả về lượng và chất.

Thuật ngữ mới ra đời "Vibe Coding" được giới thiệu bởi **Andrej Karpathy**, đồng sáng lập OpenAI vào tháng 2 năm nay, để nói về làn sóng này.

Có người ví von rằng, sự bùng nổ của các công cụ AI trong phát triển phần mềm hiện nay có thể so sánh với sự bùng nổ của Internet những năm 1990.

Nhận định này không phải là nói quá, từ yêu cầu chỉ vài câu của vợ tôi, rất nhanh chóng, tôi có thể tìm đủ công cụ AI để làm xong website này.

Kết nối các công cụ AI

Thứ đầu tiên bạn cần biết là làm một website cần qua những công đoạn này.

Quá trình làm phần mềm đi qua 3 giai đoạn: Làm rõ yêu cầu, phát triển và triển khai.

ChatGPT tạo tài liệu yêu cầu sản phẩm

Yêu cầu bạn nhận được, dù ngắn dù dài, cần đủ để bạn hiểu. Bạn cần hiểu để diễn đạt cho AI hiểu và thực hiện các việc tiếp theo cho bạn.

Với yêu cầu sơ bộ, để Vibe Code AI code được, cần một cấu trúc tài liệu rõ ràng, theo chuẩn. Chuẩn này chính là giao thức nói chuyện giữa các công cụ AI. Ở bước làm rõ yêu cầu, chuẩn tài liệu gọi là Tài liệu Yêu cầu Sản phẩm - Product Requirement Document (PRD).

Truy cập ChatGPT, đưa một prompt yêu cầu ChatGPT xây dựng PRD từ yêu cầu sơ bộ. Nếu bạn muốn học cách viết prompt hiệu quả, hãy đọc Prompt 101 của Google.

Bạn là một product owner chuyên thiết kế và đưa ra yêu cầu làm website. Hãy viết PRD của một website với yêu cầu liệt kê bên dưới. PRD gồm tính năng và cả yêu cầu về cách trình bày, UI/UX phù hợp với chủ đề.

1. Chủ đề

2. Yêu cầu

   -- Liệt kê danh sách menu các page, chi tiết yêu cầu từng page.

3. Trình bày dạng markdown để Bolt.new hiểu.

Câu trả lời của ChatGPT là tài liệu PRD dài cỡ 1 trang A4, gồm đầy đủ các thành phần yêu cầu tính năng, yêu cầu UI/UX, yêu cầu kỹ thuật, sẵn sàng đưa vào Bolt.new

Bolt.new tạo khung website, từ 0 đến 1

Trong 3 thang bậc Vibe Coding, gồm:

• Hỏi đáp

• Code Pilot

• Prompt to app

Bolt.new là một trong số các công cụ ở level cao nhất. Nhận PRD từ prompt, Bolt sẽ phân tích, code, run chương trình và trả ra giao diện thực của web/app.

PRD của tôi gồm 7 tính năng, với lần generate đầu tiên, Bolt làm được khung mã nguồn, cài đặt sẵn bộ layout, font, style và tính năng ở Trang chủ. Từ kết quả ban đầu, tôi có thể tiếp tục prompt để Bolt phát triển thêm tính năng.

Tuy nhiên, kết quả ở những lần prompt tiếp theo chưa khiến tôi ưng ý. Bolt generate lại toàn bộ website và sửa sai những phần tôi không yêu cầu. Phân tích hiện tượng này, tôi thấy cần sử dụng công cụ Vibe Code ở level detail hơn - Code Pilot - với công cụ Cursor IDE.

Cursor IDE để phát triển thêm tính năng

Xuất phát điểm là một sản phẩm mở rộng và gắn kèm với Visual Studio Code - IDE phổ biến nhất hiện nay, Cursor IDE sớm nhận thấy nhược điểm của việc gắn kèm và quyết định tách thành một AI IDE độc lập. Chiến lược này nhanh chóng chứng minh tính đúng đắn và lại thành công bùng nổ cho Cursor.

Với mức giá 20$/tháng cho personal plan, cao gấp đôi so với Githut Copilot, với khả năng hiểu sâu mã nguồn, và tính chất chỉ-gen-thay-đổi (modified), Cursor vẫn có mức tăng ARR vượt trội.

Quay trở lại dự án website, tôi tải mã nguồn khung website từ Bolt, mở mã nguồn này trên Cursor IDE.

Để giúp Cursor hiểu về mã nguồn, tôi thực hiện 2 prompt làm quen:

<Prompt 1>: Explain this project

<Prompt 2>: Do indexing this project

Tận dụng năng lực tiếp nhận - phản hồi sâu của Cursor, tôi yêu cầu Cursor re-create lại website từ PRD:

Với đặc tính chỉ-gen-thay-đổi, Cursor giữ cấu trúc, style, giao diện trang chủ, và generate tiếp các trang còn lại theo đúng yêu cầu từ PRD.

Cursor tốt như vậy, thì cần Bolt để làm gì?

Nếu đưa PRD và yêu cầu Cursor xây dựng website từ đầu, kết quả khá tệ, giao diện "xấu" và cũ, như một người code back-end làm front-end vậy.

Dùng đúng công cụ, đúng lúc, đúng chỗ là cực kỳ quan trọng.

Bolt sinh ra với nhu cầu look&feel website/mobile-app, có lẽ đội ngũ làm Bolt đã dùng rất nhiều dữ liệu mã nguồn website để train cho Bolt AI-model. Từ đó, kết quả sinh ra từ Bolt có UI/UX rất ổn, ở mức sử dụng được.

Ngược lại, Cursor IDE sinh ra để giúp lập trình viết code tiếp trên project của họ, Cursor ưu tiên khả năng nắm context lớn, đưa ra câu trả lời sâu, hợp với project có sẵn cấu trúc.

Tích hợp Calendar từ Calendy

Đây là demo nhỏ: Prompt thay thế form Liên hệ ban đầu (ảnh trên) bằng việc nhúng Calendy widget (ảnh dưới).

replace contact form by using Calendy embedded script

Kết

Kể từ thời điểm ChatGPT ra đời cuối năm 2022, làn sóng AI - GenAI đã phát triển nhanh chóng, trong đủ các lĩnh vực, đặc biệt là các công cụ hỗ trợ phát triển phần mềm.

Đến nay, các công cụ Level 2 như Github Copilot, Cursor IDE đã tự khẳng định giá trị của mình trong công việc hàng ngày của lập trình viên. Với các công cụ Level 3 như Bolt.new, V0 by Vercel, sẽ cần một thời gian nữa để hoàn thiện, bằng việc xây dựng được các sản phẩm phức tạp hơn.

Là người dùng cuối, biết lựa chọn, sử dụng và kết hợp các công cụ AI giúp bạn vượt qua rào cản về kỹ năng, thói quen để nhờ AI xây dựng sản phẩm cho ý tưởng của mình.

Hãy bắt đầu như tôi, chỉ với 2 tiếng đồng hồ.