Yapay zeka ile web tabanlı video oyununuzu kullanıma sunma

1. Giriş

Genel Bakış

Yapay zeka ile geliştirme yolculuğu bugün nerede başlıyor? Çoğumuz için bu süreç basit bir sorgu veya prototiple başlar. Google AI Studio, Gemini modelleri tarafından desteklenen kod oluşturma özelliğini kullanarak tam yığın web uygulamaları tasarlamanıza, test etmenize ve oluşturmanıza olanak tanıyan güçlü bir Build Mode (Genellikle "vibe coding" olarak adlandırılır) sunar.

Bu codelab'de, Firestore veritabanı kullanarak sıra tabanlı, web tabanlı bir video oyunu oluşturacaksınız. Oyuncuların maç geçmişini görüntüleyebilmesi ve önceki turlara geri dönebilmesi için oyun işlemlerini bir etkinlik dizisi olarak kalıcı hale getirmek üzere Event Sourcing ve kullanıcı girişleri için Firebase Authentication kullanacaksınız. AI Studio aracısı, tüm arka uç hizmetlerini yapılandırır ve ön uç, etkinlik kaynağı oluşturma mantığı ve veritabanı etkileşimi kodunu yazar. Uygulama hazır olduğunda tek bir tıklamayla doğrudan Cloud Run'a dağıtabilirsiniz.

portföy web sitesinin tamamlanmış sürümü

Yapacaklarınız

  • Google AI Studio'ya, sırayla oynanan çok oyunculu bir video oyunu web uygulaması prototipi oluşturması için istem girin.
  • Arkadaşların aynı maça bağlanmasına izin vermek için paylaşılabilir, kısa bir maç kodu veya katılma bağlantısı desteği uygulayın.
  • Maç geçmişlerini izlemek ve oyun süresinde zaman yolculuğuna (hamleleri geri alma veya yeniden oynatma) izin vermek için etkinlik kaynağı oluşturma modeliyle Firestore veritabanı depolama alanını uygulayın.
  • Firestore veritabanı sağlamak ve Google ile oturum açma kimlik doğrulamasını ayarlamak için Firebase entegrasyonunu yapılandırın ve etkinleştirin.
  • Uygulamayı etkileşimli önizleme korumalı alanında test edin.
  • Uygulamayı doğrudan Google AI Studio kullanıcı arayüzünden Cloud Run'a dağıtın.

Neler öğreneceksiniz?

  • Google AI Studio'nun Build (Oluştur) modunu kullanarak doğal dilde tam yığın oyun hizmetinin hızlı prototipini oluşturma
  • Oyun geçmişini depolamak için Cloud Firestore'u kullanarak etkinlik kaynağı mimari kalıbını uygulama
  • Google AI Studio, Firebase Firestore ve Authentication entegrasyonlarını otomatik olarak nasıl yapılandırır?
  • AI Studio uygulamanızı Cloud Run'da sunucusuz bir container olarak dağıtma
  • Firebase konsolunda veritabanı kayıtlarını ve güvenlik durumunu inceleme

2. Proje Ayarları

AI Studio'yu kullanmaya başlamadan önce hesap durumunuzu ve ön koşulları doğrulayın.

Google Hesabı ve Kademe Bilgileri

  1. Google Hesabınız yoksa Google Hesabı oluşturun.
    • İpucu: Mümkünse bu laboratuvar için kişisel bir Google Hesabı kullanın. Grup, kurumsal veya okul hesapları, deneysel özellikleri ya da bulut entegrasyonlarını devre dışı bırakan Workspace politikalarını zorunlu kılabilir.
  2. Dağıtımlarla ilgili fatura ayrıntılarını inceleyin:
    • Google Cloud Başlangıç Katmanı: Tam Google Cloud faturalandırma hesabı oluşturmadan, belirli bir bölgede iki adede kadar tam yığın uygulama yayınlamanıza olanak tanır.
    • Standart dağıtım: Mevcut ücretli bir Google Cloud projesine bağlanır ve depolama sınırlarını, CPU kaynaklarını ve API'leri genişletir.

3. AI Studio'nun Build Modu'nda Sıra Tabanlı Video Oyunu Oluşturma

Uygulama kabuğunu oluşturalım ve yapay zeka kodlama asistanından güvenlik, oyun oynama mantığı ve olay kaynaklı kalıcılık katmanları oluşturmasını isteyelim.

  1. Google AI Studio Uygulamaları paneline gidin ve Yeni Uygulama'yı tıklayın.
  2. Sohbet istemi kutusuna, sıraya dayalı video oyunu uygulamanızın açıklamasını girin: 
    Build a web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    Bu bağlantı, istem kutusunu sizin için otomatik olarak doldurur.
  3. Uygulama oluşturma sürecini başlatmak için Oluştur'u tıklayın.

AI Studio aracısı, veritabanı depolama ve güvenli kullanıcı girişi ihtiyacını algıladığında otomatik Firebase yapılandırma akışını tetikler.

  1. Yaklaşık bir dakika sonra çalışma alanında Firebase'i etkinleştir entegrasyon kartı gösterilir.
  2. Hizmet şartlarını onaylamak ve kabul etmek için Firebase'i etkinleştir düğmesini tıklayın.
  3. Ajan, arka plan kurulumunu gerçekleştirir. Perde arkası:
    • Bir Firestore veritabanı örneği sağlanır.
    • Firebase Authentication, Google ile oturum açma özelliği etkinleştirilmiş olarak etkinleştirilir.
    • Bir hizmet hesabı yapılandırması oluşturulur (ör. API kimlik bilgilerini içeren src/lib/firebase.ts oluşturma).
    • Varsayılan güvenlik sınırlarını (kullanıcı izolasyon kuralları) içeren bir firestore.rules eklenir.

4. Test etme ve tekrarlama

Hizmeti canlı olarak başlatmadan önce etkileşimli önizlemede doğrulama kontrolleri yapın.

  1. Google AI Studio'da önizleme bölmesini açın.
  2. Sandbox Google ile oturum açma kimlik doğrulamasını tetiklemek için Giriş düğmesini tıklayın.
    • Hataları düzeltmeyle ilgili not: Oluşturma veya test sırasında, güvenlik kurallarının yanlış hizalanması nedeniyle zaman zaman çalışma zamanı sorunları, derleme hataları veya Firestore izni hatalarıyla karşılaşabilirsiniz. Bu durumda AI Studio, sohbette Düzelt düğmesini gösterir. Bu düğmeyi kullanarak ajandan sorunu otomatik olarak teşhis etmesini ve onarmasını isteyebilirsiniz.
    Google AI Studio Düzeltme Düğmesinin Konumu
  3. Giriş yaptıktan sonra yeni bir maç başlatın, oluşturulan kısa maç kodunu veya paylaşım bağlantısını kopyalayın ve maça katılmak için kullanılabildiğini doğrulayın.
  4. Birkaç hamle yapın ve maç geçmişinin doğru şekilde oluşturulduğunu doğrulayın.
  5. Maçın önceki anlarına geri dönmeyi deneyin. Tahtanın veya durumun, oyun geçmişindeki o noktayı yansıtacak şekilde güncellendiğinden emin olun ve bu durumu geri yükleyebildiğinizi veya önceki sürüme dönebildiğinizi doğrulayın.
  6. Stili veya davranışı değiştirmek istiyorsanız sohbet penceresinden aracıyı yönlendirin. Örneğin:
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. Ajanın kod tabanını güncellemesini bekleyin ve güncellemeleri görmek için önizleme tarayıcısını kontrol edin.

5. Cloud Run'a dağıt

Prototipiniz tam olarak işlevsel hale geldiğinde Cloud Run'da herkese açık bir hizmet olarak dağıtın.

  1. Dağıtım sihirbazını başlatmak için Google AI Studio'nun sağ üst köşesindeki Yayınla düğmesini tıklayın.Google AI Studio'da yayınlama düğmesinin konumu
  2. Google Cloud projenizi yapılandırmak için Başlayın'ı tıklayın.
    • Hedef Google Cloud projesi açılır listesinin, çalışma alanınızla ilişkilendirdiğiniz projeyle eşleştiğini doğrulayın.
    • AI Studio, Cloud Run örneği için otomatik olarak benzersiz bir hizmet tanımlayıcısı oluşturur.
    • İsteğe bağlı olarak, dağıtım yapılandırmanızın bir parçası olarak özel bir .ai.studio URL öneki (ör. your-portfolio-name.ai.studio) belirtebilirsiniz.
  3. İlk kez dağıtım yapıyorsanız ve standart Google Cloud parametrelerini kullanıyorsanız kuruluş türü belirtmeniz ve faturalandırma ayrıntılarını girmeniz istenebilir.
  4. Uygulamayı Yayınla'yı tıklayın.
  5. Kapsayıcı derleme, kapsayıcı kaydı ve hizmet dağıtımı adımları arka planda gerçekleşir. Bu işlem genellikle 2-4 dakika içinde tamamlanır.
  6. Dağıtım tamamlandığında oluşturulan Uygulama URL'sini kopyalayın ve bir tarayıcı sekmesinde canlı uygulama bağlantısını ziyaret edin.
  7. Canlı web uygulamasını tarayıcınızda test edin.

6. Firebase konsolunda inceleme

Veri şemalarının ve kullanıcıların nasıl izlendiğini görmek için arka planda neler olduğuna göz atın.

  1. Firebase konsoluna gidin.
  2. Projenizi seçin (AI Studio etiketi veya manuel olarak bağlanmış proje kimliğiniz olmalıdır).
  3. Soldaki gezinme bölmesinde Build > Firestore Database'i (Oluştur > Firestore Veritabanı) seçin:
    • Uygulamanız tarafından oluşturulan veritabanı koleksiyonlarını ve dokümanlarını görüntüleyin.
    • Her belgenin, etkin kullanıcı kimlik doğrulama kimlik bilgileriyle eşleşen bir sahip kimliğine sahip olduğunu doğrulayın.
  4. Okuma ve yazma izinlerini doğrulanmış doküman sahipleriyle sınırlayan otomatik olarak oluşturulmuş güvenlik yönergelerini incelemek için Firestore panelinde Güvenlik sekmesini seçin.
  5. Giriş testleriniz sırasında doldurulan etkin kullanıcı kimlik bilgilerinin listesini görmek için Güvenlik > Kimlik doğrulama'ya gidin.

7. Temizleme

Öngörülemeyen faturalandırma ücretlerinden kaçınmak veya Workspace kaynaklarınızı temizlemek için:

  1. Google AI Studio'da Uygulamalar sayfasına gidin.
  2. Uygulamanızı ızgarada veya listede bulun.
  3. Uygulama durumunu silmek ve hizmetin Cloud Run'da yayınını kaldırmak için çöp kutusu simgesini tıklayın.
  4. Standart bir proje kullanarak dağıtım yaptıysanız ve tüm kaynakları tamamen kapatmak istiyorsanız Google Cloud Console Proje Ayarları'na gidip temel alınan projeyi silin.

8. Sonuç

Tebrikler! Doğrudan Google AI Studio'da sıraya dayalı bir video oyunu tasarlayıp geliştirdiniz ve dağıttınız.

Tamamlanan Oluşturucu Yolculuğu rozetini almak için bu bağlantıyı ziyaret edin.

Yolculuğunuza devam etmek için bir sonraki laboratuvarınız olan goo.gle/builders adresine gidin.

Daha Fazla Bilgi