v0 của Vercel: Hướng dẫn kèm dự án demo

V0 của Vercel là gì?

v0 của Vercel là một công cụ tạo mã được hỗ trợ bởi AI giúp nhà phát triển xây dựng các thành phần UI (thậm chí cả trang hoàn chỉnh!) bằng lời nhắc ngôn ngữ tự nhiên. Thay vì tự viết mã cho một nút bấm, biểu mẫu hay bảng điều khiển, bạn mô tả nhu cầu của mình qua giao diện chat và v0 sẽ tạo mã React và Tailwind CSS sẵn sàng cho sản xuất chỉ trong vài giây.

Để bạn có bối cảnh, Vercel là nền tảng dùng để triển khai và lưu trữ ứng dụng web, chú trọng tối ưu hiệu năng và đơn giản hóa quy trình phát triển. Nền tảng này nổi tiếng nhất với Next.js (một framework React phổ biến) và cung cấp dịch vụ lưu trữ ứng dụng front-end với khả năng tự động mở rộng và tích hợp dễ dàng.

Tôi cho rằng v0 là một bổ sung tuyệt vời cho bộ công cụ của Vercel, và giúp tăng đáng kể năng suất cho khách hàng của họ (chúng ta, các nhà phát triển). Giống như nhiều công cụ AI khác, đây cũng là cách hay để mở cửa cho người dùng không chuyên kỹ thuật, như nhà thiết kế và quản lý sản phẩm, cùng đóng góp vào quy trình phát triển.

Công cụ này đặc biệt hữu ích cho việc dựng mẫu nhanh, tăng năng suất bằng cách giảm bớt công việc front-end lặp lại, và tự động hóa thiết kế thành mã—ví dụ chuyển trực tiếp tệp Figma thành các thành phần hoạt động. Bạn cũng có thể nhanh chóng phát hành dự án của mình bằng Vercel, giúp việc lưu trữ và triển khai trở nên dễ dàng.

v0 có giá bao nhiêu?

Hiện v0 có 3 gói giá cho cá nhân. Gói đầu tiên miễn phí nhưng số lượng tin nhắn mỗi ngày bị giới hạn. Bạn có thể nâng cấp với $20/tháng, hoặc $200/tháng nếu sử dụng chuyên sâu. 

Cách tính phí cho doanh nghiệp thì khác, bắt đầu từ $30/người dùng mỗi tháng.

Dự án demo: Ứng dụng quản lý đăng ký với v0

Hãy xây dựng một bảng điều khiển quản lý đăng ký cho phép người dùng theo dõi và quản lý mọi đăng ký (ví dụ: phần mềm, tạp chí, hội viên) ở một nơi. Ứng dụng có thể thông báo các khoản thanh toán sắp tới, thời điểm hết hạn dùng thử và các đăng ký không sử dụng.

Mô tả trên chính là lời nhắc tôi nhập qua giao diện chat của v0.

Sau khoảng 30 giây, v0 tạo ra 10 tệp. Thẻ mã cho phép tôi xem các tệp đó trong khi giao diện chat vẫn khả dụng và giải thích phần mã đã tạo.

Bạn có thể nhấp vào thẻ Preview ở trên để xem ứng dụng:

Tuy nhiên, cách trực quan nhất là nhấp vào biểu tượng thứ hai từ bên phải ở góc trên.

Thao tác này sẽ mở một thẻ mới trên thiết bị của bạn với bản xem trước toàn màn hình của ứng dụng. Hãy cùng xem ứng dụng của chúng ta:

Như bạn thấy, v0 đã tạo ra một ứng dụng web hoạt động đầy đủ chỉ từ một lời nhắc. Khá ấn tượng. Việc thêm một đăng ký mới thực sự hoạt động và được phản ánh trên toàn bộ ứng dụng.

Tuy nhiên, thanh điều hướng bên trái không hoạt động và khá lãng phí không gian. Hãy quay lại phần xem trước và xóa nó. Chúng ta có thể yêu cầu xóa trong chat, nhưng cũng có thể thay đổi nhanh bằng cách nhấn vào biểu tượng con trỏ chuột ở trên cùng (biểu tượng đầu tiên từ bên trái). Chọn thành phần muốn thay đổi (trong trường hợp này là thanh điều hướng) và đơn giản yêu cầu v0 xóa nó.

Và đây là kết quả!

Được rồi, tiếp theo là gì?

Có vài nút nữa ở trên đáng để ý. Nhấp vào nút lịch sử cho phép bạn xem các phiên bản khác nhau của ứng dụng, và nhấp vào phiên bản cụ thể sẽ đưa bạn quay lại phiên bản đó.

Bạn cũng có thể triển khai ứng dụng của mình với Vercel chỉ bằng một cú nhấp:

Ứng dụng mới sẽ được truy cập từ một liên kết bạn sẽ thấy trong cùng hộp thoại sau khi triển khai xong, và chi tiết về quá trình triển khai sẽ hiển thị trong tài khoản Vercel của bạn.

Tạo và triển khai ứng dụng này mất của tôi… 15 phút. Và thời gian đó đã bao gồm cả lúc tôi chụp ảnh màn hình cho hướng dẫn này! 

Tham khảo thêm, nếu viết từ đầu một thứ như vậy chắc sẽ mất cả ngày, nếu không muốn nói là hơn.

Bổ sung: Chạy mã cục bộ

Nếu bạn muốn thêm mã này vào máy và truy cập qua VS Code (hoặc bất kỳ trình soạn thảo mã nào bạn dùng), bạn có thể tạo một thư mục dự án mới qua terminal.

Sau đó, thiết lập một dự án Next.js mới:

npx create-next-app@latest my-folder-name

Đảm bảo bạn đang ở đúng thư mục với cd my-folder-path.

Từ đó, bạn có thể quay lại dự án v0 và nhấp vào nút “Add to codebase” ở góc trên bên phải, sao chép lệnh được tạo và dán vào terminal. Khi được hỏi có tạo tệp components.json hay không, nhập Y, và nhấn Enter cho tất cả các lời nhắc tiếp theo.

Giờ bạn có thể mở đúng thư mục trong VS Code và xem toàn bộ mã đã tạo. Chạy npm run dev và truy cập http://localhost:3000 trong trình duyệt để chạy ứng dụng cục bộ. 

Vượt ra ngoài cơ bản: v0 còn làm được gì?

Vậy là v0 khá giỏi trong việc tạo mã từ một lời nhắc đơn giản. Nhưng nó còn làm gì nữa?

1. Tải tệp Figma để có mã ngay lập tức

Bạn có thể tải thiết kế Figma lên v0 và công cụ sẽ tự động tạo các thành phần React + Tailwind tương ứng. Điều này hoàn hảo cho nhà thiết kế muốn chuyển mockup thành mã hoạt động nhanh chóng.

2. Dùng mẫu từ cộng đồng

Bạn không cần bắt đầu từ con số 0. v0 cung cấp các mẫu do cộng đồng đóng góp cho các mẫu UI phổ biến, bạn có thể fork, chỉnh sửa và tích hợp vào dự án của mình.

3. Tích hợp (tính năng beta)

v0 đang triển khai các tích hợp bên thứ ba, giúp kết nối với cơ sở dữ liệu và các công cụ lưu trữ khác dễ dàng hơn. Tính năng này vẫn đang ở giai đoạn beta, nhưng hứa hẹn sẽ khiến v0 mạnh mẽ hơn nữa. Bạn có thể xem danh sách các tích hợp khả dụng bằng cách vào phần cài đặt dự án và nhấp vào biểu tượng + bên cạnh mục tích hợp.

4. Biến môi trường

v0 cho phép định nghĩa biến môi trường để bạn cấu hình khóa API, kết nối cơ sở dữ liệu và các bí mật khác một cách an toàn.

Hạn chế của v0

Đáng tiếc, v0 không hoàn hảo cho mọi trường hợp. Dưới đây là những hạn chế bạn cần lưu ý:

• Không có bản xem trước backend: v0 sẽ tạo mã backend nếu bạn yêu cầu, nhưng bạn sẽ không thể xem trước ứng dụng nếu có logic backend.
• Chưa có tích hợp GitHub thực sự: v0 chưa tích hợp với GitHub. Cách duy nhất để đồng bộ mã là sao chép-dán mã vào dự án cục bộ (hoặc dùng tính năng “Add to codebase”), rồi đẩy thủ công lên Github.
• Mã tạo ra cần tinh chỉnh: Dù sạch sẽ, mã có thể cần chỉnh sửa để tối ưu. Các tệp đôi khi rất dài, và có thể không hỗ trợ thư viện thành phần mà bạn chọn.
• Không lý tưởng cho quản lý trạng thái phức tạp: v0 rất phù hợp cho UI nhưng không phải cho toàn bộ logic ứng dụng.
• Không lý tưởng cho người không phải lập trình viên: Ngay khi bạn cố thêm logic hơi phức tạp, v0 gặp khó trong việc cung cấp chức năng hoạt động. Nếu bạn không phải lập trình viên, bạn sẽ nhanh chóng gặp lỗi khó khắc phục hoặc không thể tùy chỉnh ứng dụng theo ý muốn. 

Kết luận

v0 của Vercel là một công cụ hữu ích để tạo thành phần UI, dựng mẫu và thậm chí chuyển thiết kế thành mã. Công cụ vẫn đang phát triển, nhưng đã là lựa chọn tốt cho các nhà phát triển muốn tăng tốc công việc front-end. 

Hãy thử tại v0.dev và xem liệu công cụ này có phù hợp với quy trình phát triển của bạn không!