Webbasiertes Videospiel mit KI starten

1. Einführung

Übersicht

Wo beginnt die Entwicklung mit KI heute? Für die meisten von uns mit einer einfachen Abfrage oder einem einfachen Prototyp. Google AI Studio bietet einen leistungsstarken Build-Modus (oft als „Vibe-Coding“ bezeichnet), mit dem Sie Full-Stack-Webanwendungen mithilfe der von Gemini-Modellen gesteuerten Code-Generierung entwerfen, testen und erstellen können.

In diesem Codelab erstellen Sie ein rundenbasiertes Web-Videospiel mit einer Firestore-Datenbank mit Event Sourcing (um Spielaktionen als Ereignissequenz zu speichern, damit Spieler den Spielverlauf ansehen und zu vorherigen Runden zurückkehren können) und Firebase Authentication für Nutzeranmeldungen. Der AI Studio-Agent konfiguriert alle Back-End-Dienste und schreibt den Code für das Front-End, die Event-Sourcing-Logik und die Datenbankinteraktion. Sobald die App fertig ist, können Sie sie mit einem einzigen Klick direkt in Cloud Run bereitstellen.

Fertige Version einer Portfolio-Website

Aufgaben

  • Fordern Sie Google AI Studio auf, einen Prototyp für eine rundenbasierte Multiplayer-Videospiel-Webanwendung zu erstellen.
  • Implementieren Sie die Unterstützung für einen teilbaren, kurzen Spielcode oder einen Link zum Beitreten, damit Freunde sich mit demselben Spiel verbinden können.
  • Implementieren Sie die Firestore-Datenbankspeicherung mit einem Event-Sourcing-Muster, um Spielverläufe zu verfolgen und Zeitreisen im Spiel zu ermöglichen (Runden rückgängig machen oder wiederholen).
  • Konfigurieren und aktivieren Sie die Firebase-Integration, um eine Firestore-Datenbank bereitzustellen und die Google Log-in-Authentifizierung einzurichten.
  • Testen Sie die Anwendung in der interaktiven Vorschau-Sandbox.
  • Stellen Sie die Anwendung direkt über die Google AI Studio-UI in Cloud Run bereit.

Lerninhalte

  • Verwendung des Build-Modus von Google AI Studio, um schnell einen Prototyp für einen Full-Stack-Spieledienst in natürlicher Sprache zu erstellen.
  • Implementierung eines Event-Sourcing-Architekturmusters mit Cloud Firestore zum Speichern des Spielverlaufs.
  • Automatische Konfiguration von Firebase Firestore- und Authentication-Integrationen durch Google AI Studio.
  • Bereitstellung Ihrer AI Studio-Anwendung als serverloser Container in Cloud Run.
  • Prüfung von Datenbankeinträgen und Sicherheitsstatus in der Firebase Console.

2. Projekt einrichten

Prüfen Sie vor dem Start von AI Studio den Kontostatus und die Voraussetzungen.

Google-Konto und -Stufe

  1. Wenn Sie noch kein Google-Konto haben, erstellen Sie ein Google-Konto.
    • Tipp: Verwenden Sie für dieses Codelab nach Möglichkeit ein privates Google-Konto. Bei Gruppen-, Unternehmens- oder Schulkonten können Workspace-Richtlinien erzwungen werden, die experimentelle Funktionen oder Cloud-Integrationen deaktivieren.
  2. Prüfen Sie die Abrechnungsdetails für Bereitstellungen:
    • Google Cloud Starter-Stufe: Ermöglicht die kostenlose Veröffentlichung von bis zu zwei Full-Stack-Anwendungen in einer ausgewählten Region, ohne dass ein vollständiges Google Cloud-Rechnungskonto eingerichtet werden muss.
    • Standardbereitstellung: Stellt eine Verbindung zu einem vorhandenen kostenpflichtigen Google Cloud-Projekt her und erweitert Speicherlimits, CPU-Ressourcen und APIs.

3. Rundenbasiertes Videospiel im Build-Modus von AI Studio erstellen

Erstellen wir die Anwendungshülle und fordern wir den KI-Code-Assistenten auf, Sicherheits-, Spiellogik- und Event-Sourcing-Persistenzebenen zu erstellen.

  1. Rufen Sie das Google AI Studio-Apps-Feld auf und klicken Sie auf Neue App.
  2. Geben Sie im Chat-Prompt-Feld die Beschreibung für Ihre rundenbasierte Videospielanwendung ein: 
    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.
    Dieser Link füllt das Prompt-Feld automatisch für Sie aus.
  3. Klicken Sie auf Erstellen , um den Prozess zur Anwendungsgenerierung zu starten.

Wenn der AI Studio-Agent die Notwendigkeit von Datenbankspeicher und sicherer Nutzeranmeldung erkennt, wird der automatisierte Firebase-Konfigurationsablauf ausgelöst.

  1. Nach etwa einer Minute wird im Arbeitsbereich eine Integrationskarte zum Aktivieren von Firebase angezeigt.
  2. Klicken Sie auf die Schaltfläche Firebase aktivieren , um die Nutzungsbedingungen zu bestätigen und zu akzeptieren.
  3. Der Agent führt die Hintergrundkonfiguration aus. Im Hintergrund:
    • Eine Firestore-Datenbankinstanz wird bereitgestellt.
    • Firebase Authentication ist aktiviert und die Google-Anmeldung ist aktiviert.
    • Eine Dienstkontokonfiguration wird eingerichtet (z.B. Erstellen von src/lib/firebase.ts mit API-Anmeldedaten).
    • Eine firestore.rules-Datei mit Standardsicherheitsgrenzen (Regeln zur Nutzerisolation) wird hinzugefügt.

4. Testen und Wiederholen

Bevor Sie den Dienst live starten, führen Sie Validierungsprüfungen in der interaktiven Vorschau aus.

  1. Öffnen Sie das Vorschaufenster in Google AI Studio.
  2. Klicken Sie auf die Schaltfläche „Anmelden“, um die Google Log-in-Authentifizierung in der Sandbox auszulösen.
    • Hinweis zur Fehlerbehebung: Während der Generierung oder beim Testen können gelegentlich Laufzeitprobleme, Kompilierungsfehler oder Fehler bei den Firestore-Berechtigungen aufgrund von Abweichungen bei den Sicherheitsregeln auftreten. In diesem Fall zeigt AI Studio im Chat die Schaltfläche Beheben an, mit der Sie den Agenten bitten können, das Problem automatisch zu diagnostizieren und zu beheben.
    Schaltfläche „Beheben“ in Google AI Studio
  3. Starten Sie nach der Anmeldung ein neues Spiel, kopieren Sie den generierten kurzen Spielcode oder den Link zum Teilen und prüfen Sie, ob er verwendet werden kann, um dem Spiel beizutreten.
  4. Machen Sie mehrere Züge und prüfen Sie, ob der Spielverlauf korrekt gerendert wird.
  5. Versuchen Sie, zu vorherigen Runden des Spiels zurückzukehren. Prüfen Sie, ob das Spielbrett oder der Status entsprechend dem Zeitpunkt im Gameplay-Verlauf aktualisiert wird, und prüfen Sie, ob Sie diesen Status wiederherstellen oder ein Rollback durchführen können.
  6. Wenn Sie das Design oder das Verhalten ändern möchten, weisen Sie den Agenten über das Chatfenster an. Beispiel:
    • "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. Warten Sie, bis der Agent die Codebasis aktualisiert hat, und prüfen Sie die Änderungen im Vorschau-Browser.

5. In Cloud Run bereitstellen

Sobald Ihr Prototyp voll funktionsfähig ist, stellen Sie ihn als öffentlichen Dienst in Cloud Run bereit.

  1. Klicken Sie rechts oben in Google AI Studio auf die Schaltfläche Veröffentlichen, um den Bereitstellungsassistenten zu starten.Speicherort des Veröffentlichungsbuttons in Google AI Studio
  2. Klicken Sie auf Jetzt starten , um Ihr Google Cloud-Projekt zu konfigurieren.
    • Prüfen Sie, ob die Drop-down-Liste Google Cloud-Projekt mit dem Projekt übereinstimmt, das Sie Ihrem Arbeitsbereich zugeordnet haben.
    • AI Studio generiert automatisch eine eindeutige Dienst-ID für die Cloud Run-Instanz.
    • Optional können Sie als Teil Ihrer Bereitstellungskonfiguration ein benutzerdefiniertes .ai.studio-URL-Präfix angeben (z.B. your-portfolio-name.ai.studio).
  3. Wenn Sie zum ersten Mal bereitstellen und Standardparameter von Google Cloud verwenden, werden Sie möglicherweise aufgefordert, einen Organisationstyp anzugeben und Abrechnungsdetails anzugeben.
  4. Klicken Sie auf App veröffentlichen.
  5. Die Schritte zum Erstellen des Containers, zur Containerregistrierung und zur Dienstbereitstellung erfolgen im Hintergrund. Dieser Vorgang dauert normalerweise 2 bis 4 Minuten.
  6. Kopieren Sie nach Abschluss der Bereitstellung die generierte App-URL und rufen Sie den Link zur Live-Anwendung in einem Browsertab auf.
  7. Testen Sie die Live-Webanwendung in Ihrem Browser.

6. In der Firebase Console prüfen

Sehen Sie sich im Hintergrund an, wie die Datenschemas und Nutzer verfolgt werden.

  1. Rufen Sie die Firebase Console auf.
  2. Wählen Sie Ihr Projekt aus (mit dem Label AI Studio oder Ihrer manuell verknüpften Projekt-ID).
  3. Wählen Sie im linken Navigationsbereich Erstellen > Firestore-Datenbank aus:
    • Sehen Sie sich die Datenbanksammlungen und -dokumente an, die von Ihrer Anwendung erstellt wurden.
    • Prüfen Sie, ob jedes Dokument eine Eigentümer-ID hat, die mit den Anmeldedaten für die aktive Nutzerauthentifizierung übereinstimmt.
  4. Wählen Sie im Firestore-Feld den Tab Sicherheit aus, um die automatisch generierten Sicherheitsanweisungen zu prüfen, die die Lese- und Schreibberechtigungen auf bestätigte Dokumenteigentümer beschränken.
  5. Rufen Sie Sicherheit > Authentifizierung auf, um die Liste der aktiven Anmeldedaten zu sehen, die während Ihrer Anmeldetests ausgefüllt wurden.

7. Bereinigen

So vermeiden Sie unvorhergesehene Abrechnungsgebühren oder bereinigen Ihre Arbeitsbereichsressourcen:

  1. Rufen Sie in Google AI Studio die Seite „Apps“ auf.
  2. Suchen Sie Ihre Anwendung im Raster oder in der Liste.
  3. Klicken Sie auf das Papierkorbsymbol, um den App-Status zu löschen und die Veröffentlichung des Dienstes in Cloud Run aufzuheben.
  4. Wenn Sie die Bereitstellung mit einem Standardprojekt vorgenommen haben und alle Ressourcen vollständig herunterfahren möchten, rufen Sie die Projekteinstellungen der Google Cloud Console auf und löschen Sie das zugrunde liegende Projekt.

8. Fazit

Glückwunsch! Sie haben ein rundenbasiertes Videospiel direkt in Google AI Studio entworfen, entwickelt und bereitgestellt.

Klicken Sie auf diesen Link, um das Badge Builder-Journey abgeschlossen zu erhalten!

Wenn Sie fortfahren möchten, rufen Sie goo.gle/builders auf, um das nächste Codelab zu finden.

Weitere Informationen