1. Übersicht
Wo fängt die Entwicklung mit KI heute an? Für die meisten von uns beginnt es oft mit einer einfachen Frage: „Kann ich schnell einen Prototyp für die Lösung des Problems erstellen, über das ich nachgedacht habe?“ Genau hier kommt Google AI Studio ins Spiel. Hier können Sie schnell Prototypen für alles erstellen. In diesem Codelab erstellen wir eine einfache Webanwendung mit Vibe-Coding und stellen sie in Cloud Run bereit.
Aufgaben
Bist du bereit, eine Webanwendung per Vibe-Coding zu erstellen und sie für andere verfügbar zu machen? Wir erstellen eine Webanwendung und stellen sie in Cloud Run bereit – alles nur mit AI Studio. In diesem Lab werden Sie:
- Einfache Webanwendung mit Vibe-Programmierung erstellen
- Prüfen, ob die Anwendung wie erwartet funktioniert
- Anwendung in Cloud Run bereitstellen
Voraussetzungen
2. Hinweis
- Wählen Sie in der Google Cloud Console auf der Seite zur Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
- Die Abrechnung für das Cloud-Projekt muss aktiviert sein. So prüfen Sie, ob die Abrechnung für ein Projekt aktiviert ist .
- Wenn Sie den Link zum Einlösen von Guthaben haben, folgen Sie dieser Anleitung, um das Guthaben einzulösen.
3. Prototyp
Rufen Sie Google AI Studio auf. Beginnen Sie mit der Eingabe Ihres Prompts, der die Anwendung beschreibt, die Sie erstellen möchten. Hier ist mein Prompt:
Create a formal looking frontend application that has two buttons: "Snowflakes" and "Balloons". If the user clicks on the "Snowflakes" button, snowflakes of medium size should start falling on the screen from top to bottom for 5 seconds. If the user clicks on the "Balloons" button, balloons of medium size should start floating from the bottom of the screen and float to the top for 5 seconds.
Wählen Sie das gewünschte Modell aus. Hier verwenden wir Gemini 3 Pro (Vorabversion). Klicken Sie auf die Schaltfläche Erstellen.
Anhand dieser einfachen Beschreibung erstellt AI Studio eine Webanwendung, die genau der von Ihnen angegebenen Beschreibung entspricht. Die Erstellung der Anwendung dauert 2–3 Minuten.
Falls Sie Probleme mit der Anwendung feststellen, können Sie zusätzliche Prompts eingeben, um das Verhalten der Anwendung zu korrigieren. Vergrößern Sie beispielsweise die Schneeflocken auf das Doppelte ihrer aktuellen Größe.
Unten sehen Sie einen Snapshot der generierten Anwendung:
4. In Cloud Run bereitstellen
Jetzt, da die Anwendung fertig ist, können wir sie in Cloud Run bereitstellen.
- Klicken Sie rechts oben auf der AI Studio-Seite auf die raketenähnliche Schaltfläche. Wenn Sie den Mauszeiger darauf bewegen, wird die Schaltfläche „App bereitstellen“ angezeigt.
- Dadurch wird das Pop‑up-Fenster **App in Google Cloud bereitstellen** geöffnet.
- Klicken Sie auf das Drop-down-Menü Cloud-Projekt auswählen.
- Wählen Sie das Projekt im Drop-down-Menü aus. Wenn Sie Ihr Projekt nicht im Drop-down-Menü finden, klicken Sie auf Projekt importieren und wählen Sie das Projekt im Bereich Projekt importieren aus.
- Nachdem Sie das Projekt ausgewählt haben, wird geprüft, ob die Abrechnung aktiviert ist. Diese Überprüfung wird bestanden, da wir das Rechnungskonto in den ersten Schritten mit dem Projekt verknüpft haben.
- Klicken Sie auf die Schaltfläche App bereitstellen und warten Sie, bis die Anwendung in Cloud Run bereitgestellt wurde.
Der Name des Cloud Run-Dienstes wird automatisch generiert.
- Die Bereitstellung sollte in wenigen Minuten abgeschlossen sein. Sie erhalten dann die App-URL. Wenn Sie auf die URL klicken, wird die bereitgestellte Webanwendung angezeigt.
5. 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 auf Löschen.
- Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Beenden, um das Projekt zu löschen.
6. Glückwunsch
Das wars! Sie haben das Lab erfolgreich abgeschlossen. 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.