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 einzigen Datei und Neon-Ästhetik zu generieren, sie dann per Versionsverwaltung zu verwalten und in Cloud Run bereitzustellen.

Aufgaben

• Erstellen und Prompten: Verwenden Sie den Modus „Erstellen“ von Google AI Studio, um mit einem einzigen Prompt ein funktionierendes Spiel zu generieren.
• Mit Systemanweisungen verfeinern: Führen Sie einen „Vibe-Check“ für Ihre KI durch, indem Sie eine dauerhafte Persona für zukünftige Bearbeitungen festlegen.
• In GitHub speichern: Erstellen Sie ein neues Repository direkt in AI Studio.
• In Cloud Run bereitstellen: Stellen Sie Ihr Spiel mit einem Klick in Google Cloud Run bereit.

Lerninhalte

• Verwendung des Erstellungsmodus in Google AI Studio zum schnellen Erstellen von Prototypen von Apps
• Verwendung von Systemanweisungen, um während der Iteration einen konsistenten „Coding-Vibe“ beizubehalten
• Verbindung von Google AI Studio mit GitHub und Cloud Run

Voraussetzungen

• Chrome-Browser
• 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 der 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

3. Erstellen und Prompten (das Kernstück)

Wir beginnen damit, die gesamte Anwendung auf einmal zu erstellen. Melden Sie sich in Google AI Studio an und prüfen Sie, ob Sie sich in der Benutzeroberfläche „Erstellen“ befinden.

1. Erstellungsprompt 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 im rechten Einstellungsfeld darauf, dass Gemini 3.0 Pro (oder das neueste Vorschaumodell) für die schnellste Codegenerierung ausgewählt ist.
3. Ausführen: Klicken Sie auf Erstellen oder drücken Sie die Befehlstaste + 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 verfeinern

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

Anmerkungsmodus verwenden

1. Anmerkungsmodus aktivieren: Wählen Sie in der AI Studio-Benutzeroberfläche (sehen Sie im linken Steuerfeld oder in der unteren Symbolleiste des Vorschaufensters nach) das Anmerkungs- oder Verfeinerungstool aus.

2. App markieren:

• Zeichnen: Zeichnen Sie mit dem Rechtecktool ein Rechteck um den Punktezähler.
• Kommentar: Geben Sie einen Prompt ein, der an dieses Feld angehängt ist: „Make this font larger, digital, and glitchy.“ (Schrift größer, digital und fehlerhaft machen)
• Skizzieren: Verwenden Sie das Pfeiltool, um auf die Schaltflächen „Wiedergabe/Pause“ zu zeigen.
• Kommentar: Geben Sie Folgendes ein: „Change these to glowing neon icons.“

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. Prüfen: Sehen Sie sich die Live-Aktualisierung der Vorschau an. Ihr visuelles Feedback sollte jetzt im Code berücksichtigt werden.

Spracheingabe (der gesprochene Vibe)

Manchmal ist es einfacher, den „Vibe“ zu sagen als zu schreiben.

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

2. Sprechen Sie: „Hey, the animation on the snake is too slow. Speed it up and make the tail leave a glowing trail.“ (Die Animation der Schlange ist zu langsam.
3. Beschleunige sie und lass den Schwanz eine leuchtende Spur hinterlassen.)

Senden: Gemini wandelt Ihre Sprache in Text um und wendet die Änderungen an. 5.

Systemanweisungen festlegen und neu erstellen Anders als ein normaler Prompt bleibt eine Systemanweisung während der gesamten Sitzung bestehen.

1. Erweiterte Einstellungen öffnen: Suchen Sie in der Google AI Studio-Oberfläche (Build-Modus) nach dem Feld „Systemanweisungen“. **Erweiterte Einstellungen öffnen** : Suchen Sie in der Google AI Studio-Benutzeroberfläche (Erstellungsmodus) nach dem Feld „Systemanweisungen“.

2. Anweisung „Vibe“ hinzufügen: Fügen Sie die folgende Anweisung in das Textfeld ein. **Anweisung „Vibe“ hinzufügen** : Fügen Sie die folgende Anweisung in das Textfeld ein.

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. Auslösen der Änderung: Das Ändern der Systemanweisung schreibt den Code nicht automatisch neu. **Ä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 das Einstellungsfeld.
• Geben Sie in der Chat-/Prompt-Eingabe Folgendes ein: „Rebuild the application UI to strictly follow the new System Instructions.“ (Benutzeroberfläche der Anwendung neu erstellen, um die neuen Systemanweisungen genau zu befolgen)

4. Klicken Sie auf „Ausführen“ / „Senden“.

**Aktualisierung beobachten** : Gemini bestätigt die Änderung. 6.

In GitHub speichern

1. Integration suchen: Anstatt Dateien herunterzuladen und mit der Befehlszeile zu arbeiten, verwenden wir die integrierte GitHub-Integration, um sofort ein Repository zu erstellen.

2. Integration suchen: Suchen Sie in der oberen Symbolleiste der Google AI Studio-Benutzeroberfläche nach dem GitHub-Symbol zwischen den Symbolen „Herunterladen“ und „Bereitstellen“. **Konto verbinden** : Klicken Sie auf das Symbol.
3. Repository erstellen: Ein Dialogfeld mit dem Titel "Füllen Sie die folgenden Informationen aus, um Ihr Repository zu erstellen" wird angezeigt.

4. Repository erstellen: Ein Dialogfeld mit dem Titel „Fill out the information below to create your repo“ (Geben Sie die folgenden Informationen ein, um Ihr Repository zu erstellen) wird angezeigt.
5. Repository-Beschreibung: Geben Sie eine Repository-Beschreibung ein.
6. Sichtbarkeit: Wählen Sie Öffentlich (damit Sie es einfach teilen können) oder Privat.
7. Auf GitHub übertragen: Klicken Sie auf die Schaltfläche „Git-Repo erstellen“.

An GitHub senden: Klicken Sie auf die Schaltfläche „Git-Repository erstellen“. **Magischer Moment** : AI Studio initialisiert ein neues Repository, überträgt Ihren generierten Code und sendet ihn im Hintergrund an GitHub.

Sie erhalten einen Link zu Ihrem neuen Repository. 7.

In Cloud Run bereitstellen

1. Bereitstellung initiieren: Klicken Sie auf die unten hervorgehobene Schaltfläche. **Bereitstellung starten** : Klicken Sie auf die unten hervorgehobene Schaltfläche.

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

3. Fehlerbehebung: Wenn Sie Ihr Projekt nicht im Dropdown-Menü finden können, 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 überprüft, ob für das Projekt die Abrechnung aktiviert ist. **Abrechnungsprüfung** : Nachdem Sie das Projekt ausgewählt haben, wird geprüft, ob die Abrechnung für das Projekt aktiviert ist.
5. Bereitstellen: Klicken Sie auf die Schaltfläche „App bereitstellen“, und warten Sie, bis die Anwendung in Cloud Run bereitgestellt wurde. **Bereitstellen** : Klicken Sie auf die Schaltfläche „App bereitstellen“ und warten Sie, bis die Anwendung in Cloud Run bereitgestellt wurde.
6. Hinweis: Der Name des Cloud Run-Dienstes wird automatisch generiert. Die Bereitstellung sollte in wenigen Minuten abgeschlossen sein und Sie erhalten die App-URL.

Wenn Sie auf die URL klicken, sehen Sie Ihre bereitgestellte Webanwendung live im Internet. 8.

Bereinigen

• Rufen Sie in der Google Cloud Console die Seite Ressourcen verwalten auf.
• 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 auf Löschen.

Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Shut down (Beenden), um das Projekt zu löschen. 9.

Glückwunsch Glückwunsch!

Sie haben erfolgreich eine Anwendung in AI Studio mit Vibe-Coding erstellt und in Cloud Run bereitgestellt.

AI Studio ist eine ideale Plattform für die Entwicklung und das Testen von Anwendungen, mit der Nutzer ihre Designs sofort in Aktion sehen können. Dank der nahtlosen Integration von AI Studio mit Cloud Run können Nutzer ihre Anwendungen mühelos direkt in Google Cloud bereitstellen.