1. Genel Bakış
Bu codelab'de, entegre müzik çalar içeren retro bir Snake oyunu olan "Snake & Beats" web uygulamasını oluşturacaksınız. Gemini'ı kullanarak neon estetiğine sahip tek dosyalı bir React uygulaması oluşturacak, ardından bu uygulamayı sürüm kontrolüne tabi tutup Cloud Run'a dağıtacaksınız.
Yapacaklarınız
- Oluşturma ve İstem: Google AI Studio'nun "Oluşturma" modunu kullanarak tek bir istemden çalışan bir oyun oluşturun.
- Sistem Talimatlarıyla İyileştirme: Gelecekteki düzenlemeler için kalıcı bir karakter belirleyerek yapay zekanızın "Vibe Check"ini yapın.
- GitHub'a kaydet: Doğrudan AI Studio'dan yeni bir depo oluşturun.
- Cloud Run'a dağıtma: Oyununuzu tek tıklamayla Google Cloud Run'a gönderin.
Neler öğreneceksiniz?
- Google AI Studio'da Hızlı Prototip Oluşturma Modu'nu kullanarak uygulamaları hızlı bir şekilde prototipleme
- Tekrar sırasında tutarlı bir "kodlama atmosferi" sağlamak için Sistem Talimatları'nı kullanma
- Google AI Studio'yu GitHub ve Cloud Run'a bağlama
İhtiyacınız olanlar
- Chrome web tarayıcısı
- Gmail hesabı
- Faturalandırmanın etkin olduğu bir Cloud projesi
- Gemini API anahtarı
- GitHub hesabı
2. Başlamadan önce
- Google Cloud Console'daki proje seçici sayfasında bir Google Cloud projesi seçin veya oluşturun.
- Cloud projeniz için faturalandırmanın etkinleştirildiğinden emin olun. Bir projede faturalandırmanın etkin olup olmadığını kontrol etmeyi öğrenin .
3. Oluşturma ve İsteme (Temel)
Öncelikle uygulamanın tamamını tek seferde oluşturacağız. Google AI Studio'ya giriş yapın ve Oluşturma arayüzünde olduğunuzdan emin olun.
- Oluşturma istemini girin: Aşağıdaki ayrıntılı istemi sohbet kutusuna yapıştırı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.
- Modelinizi Seçin: Sağdaki ayarlar panelinde, en hızlı kod oluşturma için Gemini 3.0 Pro'nun (veya en yeni önizleme modelinin) seçili olduğundan emin olun.
- Çalıştır: Derle'ye basın (veya Cmd + Enter tuşlarına basın).
- Önizleme: Gemini, kodu oluşturur ve genellikle sağ tarafta bir Canlı Önizleme oluşturur (aşağıda gösterildiği gibi):
4. Notlar, Görseller ve Ses ile Ayrıntılandırma
Bazen görsel bir değişikliği kelimelerle tarif etmek zor olabilir. Not Modu, vizyonunuzu anında iletmek için uygulama önizlemenize çizim yapmanıza olanak tanır.
Not modunu kullanma
- Açıklama Modunu Etkinleştirme: AI Studio arayüzünde (sol taraftaki paneli veya önizleme penceresinin altındaki araç çubuğunu kontrol edin) Açıklama veya İyileştirme aracını seçin.
- Uygulamanızı işaretleme:
- Çizim yapma: Kutu aracını kullanarak Puan Sayacı'nın etrafına bir dikdörtgen çizin.
- Yorum: Bu kutuya eklenen bir istem yazın: "Bu yazı tipini daha büyük, dijital ve aksak yap."
- Çizim: Oynat/Duraklat düğmelerini işaret etmek için ok aracını kullanın.
- Yorum: Tür: "Bunları parlayan neon simgelere dönüştür."
- Tekrarla: "Sohbete ekle"yi tıklayın ve İstem gönder'e basın. Gemini, kodu güncellemek için görsel işaretlerinizi ve metin komutlarınızı yorumlar.
- Doğrula: Önizleme güncellemesini canlı olarak izleyin. Görsel geri bildiriminiz artık koda yansıtılmalıdır.
Ses Girişi (The Spoken Vibe)
Bazen "atmosfer"i yazmak yerine söylemek daha kolaydır.
- İşlem: Giriş çubuğundaki (artı düğmesinin yanında) mikrofon simgesini tıklayın.
- Konuşun: "Hey, the animation on the snake is too slow. Hızı artır ve kuyruğun parlayan bir iz bırakmasını sağla."
- Gönder: Gemini, konuşmanızı metne dönüştürür ve değişiklikleri uygular.
5. Sistem Talimatlarını Ayarlama ve Yeniden Oluşturma
Normal istemlerden farklı olarak sistem talimatı, oturumun tamamı boyunca geçerli olur. Kodlama standartlarınızı, adlandırma kurallarınızı veya değişmemesi gereken belirli bir görsel kişiliğinizi tanımlamak için en iyi yerdir.
- Gelişmiş Ayarlar'ı açın: Google AI Studio arayüzünde (Derleme Modu) Sistem Talimatları kutusunu bulun. Görünmüyorsa sohbet panelinin üst veya yan tarafındaki Ayarlar (dişli simgesi) ya da Gelişmiş ayarlar'ı tıklayın.
- "Vibe" talimatını ekleyin: Aşağıdaki talimatı metin kutusuna yapıştırın. Bu, oyunumuz için bir "Glitch Art" karakteri tanımlar:
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.
- Değişikliği Tetikleme: Sistem talimatını değiştirmek kodu otomatik olarak yeniden yazmaz. Gemini'a bu yeni kuralları uygulamasını söylemeniz gerekir.
- Ayarlar panelini kapatın.
- Sohbet/İstem girişine "Rebuild the application UI to strictly follow the new System Instructions." (Uygulama kullanıcı arayüzünü, yeni sistem talimatlarına kesinlikle uyacak şekilde yeniden oluştur.) yazın.
- Çalıştır / Gönder'i tıklayın.
- Güncellemeyi Gözlemleyin: Gemini, değişikliği onaylar.
6. GitHub'a kaydetme
Dosyaları indirip komut satırıyla uğraşmak yerine, depoyu anında başlatmak için yerleşik GitHub entegrasyonunu kullanacağız.
- Entegrasyonu Bulma: Google AI Studio arayüzünün üst araç çubuğunda, İndir ve Dağıt simgeleri arasında bulunan GitHub simgesini bulun.
- Hesabınızı Bağlayın: Simgeyi tıklayın. İlk kez kullanıyorsanız Google AI Studio'nun GitHub hesabınıza erişmesine izin vermeniz istenir.
- Depoyu oluşturun: "Deponuzu oluşturmak için aşağıdaki bilgileri doldurun" başlıklı bir iletişim kutusu görünür.
- Depo adı: Bir ad girin (ör. "React ile yapay zekayla üretilmiş Snake oyunu."
- Repository Description (Depo Açıklaması): Depo açıklamasını girin.
- Görünürlük: Herkese açık (kolayca paylaşabilmeniz için) veya Gizli'yi seçin.
- GitHub'a gönderme: "Git deposu oluştur" düğmesini tıklayın.
7. Cloud Run'a dağıt
Uygulama hazır olduğuna ve GitHub'a kaydedildiğine göre şimdi Cloud Run'a dağıtalım.
- Dağıtımı Başlat: Aşağıda vurgulanan düğmeyi tıklayın. Bu düğme, AI Studio sayfasının sağ üst köşesinde yer alır.
- Proje Seç: Bir Bulut Projesi Seç açılır listesini tıklayın ve açılır listeden projenizi seçin.
- Sorun giderme: Projenizi açılır listede bulamıyorsanız Projeyi içe aktar'ı tıklayın ve Projeyi içe aktar bölmesinden projenizi seçin.
- Faturalandırma Doğrulaması: Projeyi seçtiğinizde, faturalandırmanın etkin olup olmadığı doğrulanır. Faturalandırma hesabını "Başlamadan önce" bölümünde projeye eklediğimiz için bu doğrulama otomatik olarak geçer.
- Dağıt: Uygulamayı dağıt düğmesini tıklayın ve uygulamanın Cloud Run'a dağıtılmasını bekleyin. Not: Cloud Run hizmeti adı otomatik olarak oluşturulur.
- Dağıtım birkaç dakika içinde tamamlanır ve uygulama URL'sini alırsınız. URL'yi tıkladığınızda, dağıtılan web uygulamanızın internette canlı olarak gösterildiğini görürsünüz.
8. Temizleme
Bu yayında kullanılan kaynaklar için Google Cloud hesabınızın ücretlendirilmesini istemiyorsanız şu adımları uygulayın:
- Google Cloud Console'da Kaynakları yönetin sayfasına gidin.
- Proje listesinde silmek istediğiniz projeyi seçin ve Sil'i tıklayın.
- İletişim kutusunda proje kimliğini yazın ve projeyi silmek için Kapat'ı tıklayın.
9. Tebrikler
Tebrikler! AI Studio'da bir uygulamayı başarıyla vibe-code'ladınız ve Cloud Run'a dağıttınız.
AI Studio, uygulamaları geliştirip test etmek için ideal bir platformdur. Kullanıcılar, tasarımlarını anında görselleştirebilir.
AI Studio'nun Cloud Run ile sorunsuz entegrasyonu, kullanıcıların uygulamalarını doğrudan Google Cloud'a kolayca dağıtmasını sağlar. Cloud Run'ı kullanmak, sunucusuz bir ortamın tüm doğal avantajlarını sağlar ve altyapı yönetiminin karmaşıklıklarını ve ek yükünü ortadan kaldırır.