Vibe Code với Gemini trong Google AI Studio

1. Tổng quan

Trong lớp học lập trình này, bạn sẽ tạo một ứng dụng web "Snake & Beats" (Rắn và nhịp điệu), một trò chơi Rắn cổ điển có tích hợp trình phát nhạc. Bạn sẽ dùng Gemini để tạo một ứng dụng React một tệp có giao diện thẩm mỹ kiểu đèn neon, sau đó quản lý phiên bản và triển khai ứng dụng đó lên Cloud Run.

Bạn sẽ thực hiện

Tạo và đưa ra câu lệnh: Sử dụng chế độ "Tạo" của Google AI Studio để tạo một trò chơi đang hoạt động từ một câu lệnh duy nhất.
Tinh chỉnh bằng Hướng dẫn hệ thống: "Kiểm tra cảm xúc" của AI bằng cách đặt một vai trò cố định cho các lần chỉnh sửa trong tương lai.
Lưu vào GitHub: Khởi động một kho lưu trữ mới trực tiếp từ AI Studio.
Triển khai lên Cloud Run: Gửi trò chơi của bạn lên Google Cloud Run chỉ bằng một cú nhấp chuột.

Kiến thức bạn sẽ học được

Cách sử dụng Chế độ tạo trong Google AI Studio để tạo nguyên mẫu nhanh cho các ứng dụng.
Cách sử dụng Hướng dẫn hệ thống để duy trì "cảm xúc lập trình" nhất quán trong quá trình lặp lại.
Cách kết nối Google AI Studio với GitHub và Cloud Run.

Bạn cần có

Trình duyệt web Chrome
Tài khoản Gmail
Một Dự án trên đám mây đã bật tính năng thanh toán
Khoá Gemini API
Tài khoản GitHub

2. Trước khi bắt đầu

Trong Google Cloud Console, trên trang bộ chọn dự án, hãy chọn hoặc tạo một dự án Google Cloud.
Đảm bảo rằng bạn đã bật tính năng thanh toán cho Dự án trên đám mây. Tìm hiểu cách kiểm tra xem tính năng thanh toán đã được bật trên một dự án hay chưa .

3. Tạo và đưa ra câu lệnh (Phần cốt lõi)

Chúng ta sẽ bắt đầu bằng cách tạo toàn bộ ứng dụng trong một lần. Đăng nhập vào Google AI Studio và đảm bảo bạn đang ở giao diện Tạo.

Nhập câu lệnh tạo bản dựng: Dán câu lệnh chi tiết sau vào hộp trò chuyện:

Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.

Chọn mô hình: Trong bảng điều khiển cài đặt ở bên phải, hãy đảm bảo bạn đã chọn Gemini 3.0 Pro (hoặc mô hình xem trước mới nhất) để tạo mã nhanh nhất.
Chạy: Nhấn vào Tạo (hoặc nhấn tổ hợp phím Cmd + Enter).
Xem trước: Gemini sẽ tạo mã và thường hiển thị Bản xem trước trực tiếp ở bên phải (như minh hoạ bên dưới):

4. Tinh chỉnh bằng chú thích, hình ảnh và giọng nói

Đôi khi, bạn khó có thể mô tả một thay đổi về hình ảnh bằng lời nói. Chế độ chú thích cho phép bạn vẽ trên bản xem trước ứng dụng để truyền đạt ý tưởng của mình ngay lập tức.

Sử dụng Chế độ chú thích

Kích hoạt Chế độ chú thích: Trong giao diện AI Studio (kiểm tra bảng điều khiển bên trái hoặc thanh công cụ ở dưới cùng của cửa sổ xem trước), hãy chọn công cụ Chú thích hoặc Tinh chỉnh.

Đánh dấu ứng dụng:

Vẽ: Sử dụng công cụ hộp để vẽ một hình chữ nhật xung quanh Bộ đếm điểm.
Bình luận: Nhập một câu lệnh được đính kèm vào hộp đó: "Làm cho phông chữ này lớn hơn, kiểu kỹ thuật số và có hiệu ứng trục trặc."
Phác thảo: Sử dụng công cụ mũi tên để trỏ đến các nút Phát/Tạm dừng.
Bình luận: Nhập: "Thay đổi các nút này thành biểu tượng đèn neon phát sáng."

Lặp lại: Nhấp vào "Thêm vào cuộc trò chuyện", sau đó nhấn vào Gửi câu lệnh. Gemini sẽ diễn giải các dấu hiệu trực quan và lệnh văn bản để cập nhật mã.
Xác minh: Xem bản cập nhật xem trước trực tiếp. Phản hồi trực quan của bạn hiện sẽ được phản ánh trong mã!

Nhập bằng giọng nói (Cảm xúc được nói)

Đôi khi, bạn dễ nói "cảm xúc" hơn là viết.

Hành động: Nhấp vào biểu tượng Micrô trong thanh nhập (bên cạnh nút +).

Nói: "Này, ảnh động trên con rắn quá chậm. Tăng tốc độ và làm cho đuôi để lại một vệt sáng."
Gửi: Gemini chuyển lời nói của bạn thành văn bản và áp dụng các thay đổi.

5. Đặt Hướng dẫn hệ thống và tạo lại

Không giống như một câu lệnh thông thường, hướng dẫn hệ thống vẫn tồn tại trong suốt phiên. Đây là nơi tốt nhất để xác định các tiêu chuẩn lập trình, quy ước đặt tên hoặc một cá tính trực quan cụ thể không nên thay đổi.

Mở phần Cài đặt nâng cao: Trong giao diện Google AI Studio (Chế độ tạo), hãy tìm hộp Hướng dẫn hệ thống. Nếu bạn không thấy hộp này, hãy nhấp vào Cài đặt (biểu tượng bánh răng) hoặc Cài đặt nâng cao ở đầu hoặc bên cạnh bảng điều khiển trò chuyện.

Thêm hướng dẫn "Phong cách nhạc": Dán hướng dẫn sau vào hộp văn bản. Hướng dẫn này xác định nhân vật "Glitch Art" cho trò chơi của chúng ta:

You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.

Kích hoạt thay đổi: Việc thay đổi Hướng dẫn hệ thống không tự động viết lại mã. Bạn phải yêu cầu Gemini áp dụng các quy tắc mới này.

Đóng bảng điều khiển cài đặt.
Trong phần nhập Trò chuyện/Câu lệnh, hãy nhập: "Tạo lại giao diện người dùng ứng dụng để tuân thủ nghiêm ngặt Hướng dẫn hệ thống mới."
Nhấp vào Chạy / Gửi.

Quan sát bản cập nhật: Gemini sẽ xác nhận thay đổi.

6. Lưu vào GitHub

Thay vì tải tệp xuống và gặp khó khăn với dòng lệnh, chúng ta sẽ sử dụng tính năng tích hợp GitHub tích hợp sẵn để khởi động một kho lưu trữ ngay lập tức.

Tìm tính năng tích hợp: Trong thanh công cụ trên cùng của giao diện Google AI Studio, hãy tìm biểu tượng GitHub nằm giữa biểu tượng Tải xuống và Triển khai.

Kết nối tài khoản: Nhấp vào biểu tượng. Nếu đây là lần đầu tiên, bạn sẽ được nhắc cho phép Google AI Studio truy cập vào tài khoản GitHub của mình.
Tạo kho lưu trữ: Một hộp thoại có tiêu đề "Điền thông tin bên dưới để tạo kho lưu trữ" sẽ xuất hiện.

Tên kho lưu trữ: Nhập tên, ví dụ: "Trò chơi Rắn do AI tạo bằng React".
Nội dung mô tả kho lưu trữ: Nhập nội dung mô tả kho lưu trữ.
Chế độ hiển thị: Chọn Công khai (để bạn có thể dễ dàng chia sẻ) hoặc Riêng tư.
Đẩy lên GitHub: Nhấp vào nút "Tạo kho lưu trữ Git".

7. Triển khai lên Cloud Run

Bây giờ ứng dụng đã sẵn sàng và được lưu vào GitHub, hãy triển khai ứng dụng đó lên Cloud Run.

Bắt đầu triển khai: Nhấp vào nút được đánh dấu bên dưới. Nút này nằm ở góc trên cùng bên phải của trang AI Studio.

Chọn dự án: Nhấp vào trình đơn thả xuống Chọn một dự án trên đám mây rồi Chọn dự án của bạn trong trình đơn thả xuống.

Khắc phục sự cố: Trong trường hợp bạn không tìm thấy dự án của mình trong trình đơn thả xuống, hãy nhấp vào Nhập dự án rồi chọn dự án của bạn trong ngăn Nhập dự án.
Xác minh thanh toán: Sau khi bạn chọn dự án, dự án sẽ được xác minh là đã bật tính năng thanh toán. Quá trình xác minh này sẽ tự động diễn ra vì chúng ta đã đính kèm tài khoản thanh toán vào dự án trong phần "Trước khi bắt đầu".
Triển khai: Nhấp vào nút Triển khai ứng dụng rồi đợi ứng dụng được triển khai trên Cloud Run. Lưu ý: Tên dịch vụ Cloud Run sẽ được tạo tự động.
Quá trình triển khai sẽ hoàn tất sau vài phút và bạn sẽ nhận được URL ứng dụng. Khi nhấp vào URL, bạn sẽ thấy ứng dụng web đã triển khai của mình hoạt động trực tiếp trên Internet!

8. Dọn dẹp

Để tránh bị tính phí vào tài khoản Google Cloud cho các tài nguyên được sử dụng trong bài đăng này, hãy làm theo các bước sau:

Trong bảng điều khiển Cloud, hãy chuyển đến trang Quản lý tài nguyên.
Trong danh sách dự án, hãy chọn dự án mà bạn muốn xoá, sau đó nhấp vào Xoá.
Trong hộp thoại, hãy nhập mã dự án, sau đó nhấp vào Tắt để xoá dự án.

9. Xin chúc mừng

Xin chúc mừng! Bạn đã hoàn tất thành công việc tạo mã cảm xúc cho một ứng dụng trên AI Studio và triển khai ứng dụng đó lên Cloud Run!!

AI Studio là một nền tảng lý tưởng, phù hợp để phát triển và kiểm thử các ứng dụng, cho phép người dùng hình dung ngay lập tức các thiết kế của họ đang hoạt động.

Việc tích hợp liền mạch AI Studio với Cloud Run cho phép người dùng dễ dàng triển khai ứng dụng của họ trực tiếp lên Google Cloud. Việc sử dụng Cloud Run mang lại tất cả lợi ích vốn có của môi trường không máy chủ, loại bỏ sự phức tạp và chi phí quản lý cơ sở hạ tầng.