Vibe Coding mit Gemini in Google AI Studio

1. Übersicht

In diesem Codelab erstellen Sie die Webanwendung „Snake & Beats“, ein Retro-Snake-Spiel mit integriertem Musikplayer. Sie verwenden Gemini, um eine React-Anwendung mit einer Datei im Neon-Look zu generieren, sie dann per Versionskontrolle zu verwalten und in Cloud Run bereitzustellen.

Aufgaben

• Build & Prompt: Im „Build“-Modus von Google AI Studio können Sie mit einem einzigen Prompt ein funktionierendes Spiel generieren.
• Mit Systemanweisungen optimieren: Legen Sie eine dauerhafte Persona für zukünftige Änderungen fest, um die KI zu „prüfen“.
• Auf GitHub speichern: Sie können ein neues Repository direkt in AI Studio erstellen.
• In Cloud Run bereitstellen: Stellen Sie Ihr Spiel mit einem Klick in Google Cloud Run bereit.

Lerninhalte

• So verwenden Sie den Build-Modus in Google AI Studio für das schnelle Prototyping von Apps.
• Systemanweisungen verwenden, um während der Iteration einen konsistenten „Coding-Vibe“ beizubehalten.
• So verbinden Sie Google AI Studio mit GitHub und Cloud Run.

Voraussetzungen

• Chrome-Webbrowser
• Ein Gmail-Konto
• Ein Cloud-Projekt mit aktivierter Abrechnung
• Ein Gemini API-Schlüssel
• Ein GitHub-Konto

2. Hinweis

1. Wählen Sie in der Google Cloud Console auf der Seite zur Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
2. Die Abrechnung für das Cloud-Projekt muss aktiviert sein. So prüfen Sie, ob die Abrechnung für ein Projekt aktiviert ist .

Google Cloud-Guthaben:Wenn Sie Google Cloud-Guthaben für den Einstieg erhalten möchten, lösen Sie über diesen Link Guthaben ein, das Ihnen bei der Durchführung des Labs hilft. Folgen Sie dieser Anleitung, um das Angebot einzulösen.

3. Build & Prompt (The Core)

Wir beginnen damit, die gesamte Anwendung auf einmal zu erstellen. Melden Sie sich in Google AI Studio an und achten Sie darauf, dass Sie sich auf der Entwicklungsoberfläche befinden.

1. Build-Prompt eingeben: Fügen Sie den folgenden detaillierten Prompt in das Chatfeld ein:

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. 

2. Modell auswählen: Achten Sie darauf, dass im rechten Einstellungsbereich Gemini 3.0 Pro (oder das neueste Preview-Modell) für die schnellste Code-Generierung ausgewählt ist.
3. Ausführen: Klicken Sie auf Erstellen oder drücken Sie Cmd + Eingabetaste.
4. Vorschau: Gemini generiert den Code und rendert in der Regel eine Live-Vorschau auf der rechten Seite (siehe unten):

4. Mit Anmerkungen, Bildern und Sprache optimieren

Manchmal ist es schwierig, eine visuelle Änderung in Worten zu beschreiben. Im Annotationsmodus können Sie in Ihre App-Vorschau zeichnen, um Ihre Vision sofort zu kommunizieren.

Annotationsmodus verwenden

1. Anmerkungsmodus aktivieren: Wählen Sie in der AI Studio-Benutzeroberfläche (siehe Seitenleiste links oder Symbolleiste unten im Vorschaufenster) das Tool „Anmerkung“ oder „Verfeinern“ aus.

2. App kennzeichnen:

• Zeichnen: Zeichnen Sie mit dem Rechteck-Tool ein Rechteck um den Zähler.
• Kommentar: Geben Sie einen Prompt ein, der an dieses Feld angehängt ist: „Make this font larger, digital, and glitchy.“ (Mach diese Schrift größer, digital und fehlerhaft.)
• Skizze: Verwenden Sie das Pfeil-Tool, um auf die Schaltflächen „Wiedergabe“ / „Pause“ zu zeigen.
• Kommentar: Typ: „Ändere diese in leuchtende Neonsymbole.“

3. Iterieren: Klicken Sie auf „Zum Chat hinzufügen“ und dann auf Prompt senden. Gemini interpretiert Ihre visuellen Markierungen und die Textbefehle, um den Code zu aktualisieren.
4. Bestätigen: Sehen Sie sich die Vorschauaktualisierung live an. Ihr visuelles Feedback sollte jetzt im Code berücksichtigt werden.

Spracheingabe (The Spoken Vibe)

Manchmal lässt sich die „Stimmung“ leichter mündlich als schriftlich ausdrücken.

1. Aktion: Klicken Sie in der Eingabeleiste (neben der Schaltfläche „+“) auf das Mikrofonsymbol.

2. Sprich: „Hey, die Animation der Schlange ist zu langsam. Beschleunige es und lass den Schwanz eine leuchtende Spur hinterlassen.“
3. Senden: Gemini wandelt Ihre Sprache in Text um und wendet die Änderungen an.

5. Systemanweisungen festlegen und neu erstellen

Im Gegensatz zu einem normalen Prompt bleibt die Systemanweisung während der gesamten Sitzung bestehen. Hier können Sie am besten Ihre Codierungsstandards, Namenskonventionen oder eine bestimmte visuelle Identität definieren, die sich nicht ändern soll.

1. Erweiterte Einstellungen öffnen: Suchen Sie in der Google AI Studio-Benutzeroberfläche (Build-Modus) nach dem Feld „Systemanweisungen“. Wenn sie nicht sichtbar ist, klicken Sie oben oder an der Seite des Chatbereichs auf die Einstellungen (Zahnradsymbol) oder auf „Erweiterte Einstellungen“.

2. Anweisung „Vibe“ hinzufügen: Fügen Sie die folgende Anweisung in das Textfeld ein. Dadurch wird eine „Glitch Art“-Persona für unser Spiel definiert:

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.

3. Änderung auslösen: Wenn Sie die Systemanweisung ändern, wird der Code nicht automatisch neu geschrieben. Sie müssen Gemini anweisen, diese neuen Regeln anzuwenden.

• Schließen Sie den Bereich „Einstellungen“.
• Geben Sie in der Chat-/Prompt-Eingabe Folgendes ein: „Rebuild the application UI to strictly follow the new System Instructions.“ (Erstelle die Benutzeroberfläche der Anwendung neu, damit sie den neuen Systemanweisungen entspricht.)
• Klicken Sie auf „Ausführen“ / „Senden“.

4. Update beobachten: Gemini bestätigt die Änderung.

6. In GitHub speichern

Anstatt Dateien herunterzuladen und uns mit der Befehlszeile herumzuschlagen, verwenden wir die integrierte GitHub-Integration, um ein Repository sofort zu starten.

1. Integration suchen: Suchen Sie in der oberen Symbolleiste der Google AI Studio-Oberfläche nach dem GitHub-Symbol, das sich zwischen den Symbolen „Herunterladen“ und „Bereitstellen“ befindet.

2. Konto verknüpfen: Klicken Sie auf das Symbol. Wenn Sie dies zum ersten Mal tun, werden Sie aufgefordert, Google AI Studio den Zugriff auf Ihr GitHub-Konto zu autorisieren.
3. Repository erstellen: Ein Dialogfeld mit dem Titel „Füllen Sie die folgenden Informationen aus, um Ihr Repository zu erstellen“ wird angezeigt.

4. Repository-Name: Geben Sie einen Namen ein, z.B. „KI-generiertes Snake-Spiel mit React.“
5. Repository-Beschreibung: Geben Sie eine Beschreibung für das Repository ein.
6. Sichtbarkeit: Wählen Sie „Öffentlich“ aus, damit Sie die Liste einfach teilen können, oder „Privat“.
7. Auf GitHub übertragen: Klicken Sie auf die Schaltfläche „Git-Repository erstellen“.

Magischer Moment: AI Studio initialisiert im Hintergrund ein neues Repository, committet den generierten Code und pusht ihn zu GitHub. Sie erhalten einen Link zu Ihrem neuen Repository.

7. In Cloud Run bereitstellen

Nachdem die Anwendung fertig ist und in GitHub gespeichert wurde, stellen wir sie in Cloud Run bereit.

1. Bereitstellung starten: Klicken Sie auf die unten hervorgehobene Schaltfläche. Sie befindet sich oben rechts auf der AI Studio-Seite.

2. Projekt auswählen: Klicken Sie auf das Drop-down-Menü „Cloud-Projekt auswählen“ und wählen Sie Ihr Projekt aus dem Drop-down-Menü aus.

3. Fehlerbehebung: Wenn Sie Ihr Projekt nicht im Drop-down-Menü finden, klicken Sie auf „Projekt importieren“ und wählen Sie Ihr Projekt im Bereich „Projekt importieren“ aus.
4. Abrechnungsüberprüfung: Nachdem Sie das Projekt ausgewählt haben, wird geprüft, ob die Abrechnung für das Projekt aktiviert ist. Diese Bestätigung wird automatisch bestanden, da wir das Rechnungskonto im Abschnitt „Vorbereitung“ mit dem Projekt verknüpft haben.
5. Bereitstellen: Klicken Sie auf die Schaltfläche „App bereitstellen“ und warten Sie, bis die Anwendung in Cloud Run bereitgestellt wurde. Hinweis: Der Name des Cloud Run-Dienstes wird automatisch generiert.
6. Die Bereitstellung sollte in wenigen Minuten abgeschlossen sein. Sie erhalten dann die App-URL. Wenn Sie auf die URL klicken, wird Ihre bereitgestellte Webanwendung live im Internet angezeigt.

8. Bereinigen

So vermeiden Sie, dass Ihrem Google Cloud-Konto die in diesem Beitrag verwendeten Ressourcen in Rechnung gestellt werden:

• Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten.
• Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann auf „Löschen“.
• Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf „Beenden“, um das Projekt zu löschen.

9. Glückwunsch

Glückwunsch! Sie haben eine Anwendung in AI Studio erfolgreich mit Vibe Coding versehen und in Cloud Run bereitgestellt.

AI Studio ist eine ideale Plattform zum Entwickeln und Testen von Anwendungen, mit der Nutzer ihre Designs sofort in Aktion sehen können.

Durch die nahtlose Integration von AI Studio in Cloud Run können Nutzer ihre Anwendungen ganz einfach direkt in Google Cloud bereitstellen. Durch die Nutzung von Cloud Run profitieren Sie von allen Vorteilen einer serverlosen Umgebung, da die Komplexität und der Aufwand der Infrastrukturverwaltung abstrahiert werden.