Aus AI Studio in Cloud Run bereitstellen

1. Übersicht

Wo beginnt die Entwicklung mit KI heute? Für die meisten von uns beginnt sie oft mit einer einfachen Frage: „Kann ich schnell einen Prototyp für eine Lösung für das Problem 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

Sind Sie bereit, eine Webanwendung mit Vibe-Coding zu erstellen und anderen zur Verfügung zu stellen? Wir erstellen eine Webanwendung und stellen sie in Cloud Run bereit – alles mit AI Studio. Im Rahmen dieses Codelabs werden Sie Folgendes tun:

1. Eine einfache Webanwendung mit Vibe-Coding erstellen
2. Prüfen, ob die Anwendung wie erwartet funktioniert
3. Die Anwendung in Cloud Run bereitstellen

Voraussetzungen

• Ein Browser wie Chrome oder Firefox
• Google Cloud-Projekt mit aktivierter Abrechnungsfunktion.

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. Informationen zum Prüfen, ob die Abrechnung für ein Projekt aktiviert ist
3. Wenn Sie einen Link zum Einlösen von Guthaben haben, können Sie dieser Anleitung folgen um das Guthaben einzulösen.

3. Prototyp

Rufen Sie Google AI Studio auf. Geben Sie Ihren Prompt ein, 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 die Gemini 3 Pro-Vorabversion. Klicken Sie auf die Schaltfläche Erstellen.

Anhand dieser einfachen Beschreibung erstellt AI Studio eine Webanwendung, die genau der Beschreibung entspricht, die Sie angegeben haben. Die Generierung der Anwendung dauert 2 bis 3 Minuten.

Wenn 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 Größe der Schneeflocke auf das Doppelte der aktuellen Größe.

Unten sehen Sie einen Snapshot der generierten Anwendung:

4. In Cloud Run bereitstellen

Jetzt, da die Anwendung fertig ist, stellen wir sie in Cloud Run bereit.

1. Klicken Sie rechts oben auf der AI Studio-Seite auf die raketenähnliche Schaltfläche. Wenn Sie den Mauszeiger auf die Schaltfläche bewegen, wird „App bereitstellen“ angezeigt.
2. Dadurch wird das Pop-up **App in Google Cloud bereitstellen** geöffnet.

3. Klicken Sie auf das Drop-down-Menü Cloud-Projekt auswählen.
4. Wählen Sie das Projekt aus dem 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.
5. Nachdem Sie das Projekt ausgewählt haben, wird geprüft, ob die Abrechnung für das Projekt aktiviert ist. Diese Prüfung wird bestanden, da wir das Rechnungskonto in den ersten Schritten mit dem Projekt verknüpft haben.
6. 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.

7. 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 Ihnen Kosten für die in diesem Beitrag verwendeten Ressourcen in Rechnung gestellt werden:

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

6. Glückwunsch

Glückwunsch! Sie haben erfolgreich eine Anwendung mit Vibe-Coding in AI Studio 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 in Cloud Run können Nutzer ihre Anwendungen ganz einfach direkt in Google Cloud bereitstellen. Durch die Verwendung von Cloud Run profitieren Sie von allen Vorteilen einer serverlosen Umgebung, ohne sich um die Komplexität und den Aufwand der Infrastrukturverwaltung kümmern zu müssen.