1. Tổng quan
Trong lớp học lập trình này, bạn sẽ xây dựng một ứng dụng web "Snake & Beats", một trò chơi Rắn săn mồi 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 có một tệp duy nhất với giao diện neon, sau đó kiểm soát 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 hoạt động được từ một câu lệnh duy nhất.
- Tinh chỉnh bằng Chỉ dẫn hệ thống: "Kiểm tra cảm xúc" của AI bằng cách đặt một nhân vật cố định cho các nội dung chỉnh sửa trong tương lai.
- Lưu vào GitHub: Khởi động một kho lưu trữ mới ngay trong AI Studio.
- Triển khai lên Cloud Run: Đưa 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 ứng dụng một cách nhanh chóng.
- Cách sử dụng Chỉ dẫn hệ thống để duy trì "phong cách viết mã" 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 chọn dự án, hãy chọn hoặc tạo một dự án trên Google Cloud.
- Đảm bảo bạn đã bật tính năng thanh toán cho dự án trên Cloud. Tìm hiểu cách kiểm tra xem tính năng thanh toán có được bật trên một dự án hay không .
3. Xây dựng và nhắc nhở (Phần cốt lõi)
Chúng ta sẽ bắt đầu bằng cách xây dựng toàn bộ ứng dụng cùng một lúc. Đăng nhập vào Google AI Studio và đảm bảo bạn đang ở trong giao diện Build (Xây dựng).
- Nhập câu lệnh tạo: 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.
- Run (Chạy): Nhấn vào Build (Tạo) (hoặc nhấn 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. 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ẽ: 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, mang phong cách 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 để chỉ vào các nút Phát/Tạm dừng.
- Bình luận: Loại: "Thay đổi những biểu tượng này thành biểu tượng neon phát sáng".
- Lặp lại: Nhấp vào "Thêm vào cuộc trò chuyện", rồi nhấn vào Gửi câu lệnh. Gemini sẽ diễn giải các điểm đánh dấu trực quan và lệnh văn bản của bạn để cập nhật mã.
- Xác minh: Xem thông tin cập nhật bản xem trước trực tiếp. Phản hồi trực quan của bạn hiện đã được phản ánh trong mã!
Nhập bằng giọng nói (The Spoken Vibe)
Đôi khi, việc diễn đạt "cảm xúc" bằng lời nói sẽ dễ dàng hơn so với 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. Thiết lập hướng dẫn hệ thống và xây dựng lại
Không giống như câu lệnh thông thường, chỉ dẫn của hệ thống sẽ duy trì trong toàn bộ phiên. Đây là nơi tốt nhất để xác định các tiêu chuẩn mã hoá, quy ước đặt tên hoặc một nhân vật trực quan cụ thể mà bạn 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 Chỉ dẫn hệ thống. Nếu không thấy, hãy nhấp vào biểu tượng Cài đặt (bánh răng) hoặc Cài đặt nâng cao ở đầu hoặc bên cạnh bảng trò chuyện.
- Thêm chỉ dẫn "Tạo hiệu ứng rung": Dán chỉ dẫn sau vào hộp văn bản. Điều này xác định một nhân vật "Glitch Art" cho trò chơi của chúng tôi:
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 Chỉ 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 cài đặt.
- Trong phần Nhập nội dung trò chuyện/Câu lệnh, hãy nhập: "Rebuild the application UI to strictly follow the new System Instructions." (Xây dựng lại giao diện người dùng ứng dụng để tuân thủ nghiêm ngặt Chỉ dẫn mới của hệ thống.)
- Nhấp vào Chạy / Gửi.
- Quan sát nội dung Cập nhật: Gemini sẽ ghi nhận thay đổi.
6. Lưu vào GitHub
Thay vì tải tệp xuống và xử lý dòng lệnh, chúng ta sẽ sử dụng tính năng tích hợp GitHub có sẵn để khởi động nhanh một kho lưu trữ.
- Tìm chế độ 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ày. 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 bạn.
- 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
Giờ đây, khi ứng dụng đã sẵn sàng và được lưu vào GitHub, hãy triển khai ứng dụng đó vào 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 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 thông tin thanh toán: Sau khi bạn chọn dự án, dự án sẽ được xác minh để đảm bảo đã bật tính năng thanh toán. Quy 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 của ứng dụng. Khi nhấp vào URL, bạn sẽ thấy ứng dụng web đã triển khai đang hoạt động trên Internet!
8. Dọn dẹp
Để tránh bị tính phí cho tài khoản Google Cloud của bạn đối với các tài nguyên được dùng trong bài đăng này, hãy làm theo các bước sau:
- Trong Google Cloud Console, 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á, rồi nhấp vào Xoá.
- Trong hộp thoại, hãy nhập mã dự án rồi nhấp vào Tắt để xoá dự án.
9. Xin chúc mừng
Xin chúc mừng! Bạn đã hoàn thành thành công việc tạo ứng dụng bằng 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át triển và kiểm thử các ứng dụng, cho phép người dùng hình dung ngay các thiết kế của họ trong thực tế.
Việc tích hợp liền mạch AI Studio với Cloud Run giúp người dùng dễ dàng triển khai các ứng dụng của họ ngay trê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ột môi trường không máy chủ, giúp loại bỏ những phức tạp và chi phí quản lý cơ sở hạ tầng.