Was ist Vibe Coding?

Vibe Coding funktioniert auf zwei Ebenen: der iterativen Schleife auf niedriger Ebene zur Verfeinerung von Code und dem Lebenszyklus auf hoher Ebene zum Erstellen und Bereitstellen einer vollständigen Anwendung.

Das ist der enge, dialogorientierte Loop, mit dem Sie ein bestimmtes Stück Code erstellen und perfektionieren.

Dies ist der umfassendere Prozess, bei dem eine allgemeine Idee vom Konzept bis zur bereitgestellten Anwendung umgesetzt wird.

Bei der herkömmlichen Programmierung konzentrieren Sie sich auf die Details der Implementierung und schreiben manuell die spezifischen Befehle, Keywords und Satzzeichen, die eine Sprache erfordert. Beim Vibe Coding konzentrieren Sie sich auf das gewünschte Ergebnis und beschreiben Ihr Ziel in natürlicher Sprache, zum Beispiel „ein Formular für die Nutzeranmeldung erstellen“. Die KI kümmert sich dann um den eigentlichen Code.

Es folgt ein Vergleich:

Google Cloud bietet mehrere Tools für die Vibe-Codierung. Die Wahl des Tools sollte von Ihrem Ziel abhängen und nicht unbedingt von Ihrer Berufsbezeichnung. Ein Entwickler könnte AI Studio für einen schnellen Prototyp verwenden, ein Enthusiast könnte eine vollständige Anwendung in Firebase Studio erstellen und ein Data Scientist könnte Gemini Code Assist verwenden, um ein Script zu schreiben.

Nachdem Sie den Prototyp erstellt haben, stellen Sie ihn in Cloud Run bereit (für AI Studio und Firebase Studio). Anschließend können Sie den Quellcode bearbeiten oder zu Ihrem Vibe-Codierungstool zurückkehren.

Dieser Leitfaden hilft Ihnen, das richtige Tool für die jeweilige Aufgabe zu finden.

Mit AI Studio können Sie schnell aus einer Idee eine funktionierende, teilbare Webanwendung machen – oft mit nur einem Prompt. Es eignet sich perfekt für schnelles Prototyping und die Entwicklung einfacher, auf generativer KI basierender Anwendungen.

Rufen Sie In AI Studio entwickeln auf, um loszulegen. Beschreiben Sie im Hauptbereich für Prompts einfach die Anwendung, die Sie erstellen möchten. Beginne mit einer lustigen, kreativen Idee und gib dann einfach den Prompt ein. Nachdem Sie den Prompt ausgeführt haben, generiert AI Studio den erforderlichen Code und die Dateien. Rechts sehen Sie eine Live-Vorschau Ihrer App.

Jetzt, wo Sie eine Live-Vorschau haben, können Sie die Chat-Oberfläche nutzen, um mit Folge-Prompts das Aussehen und die Funktionalität zu verfeinern. Sie können Funktionen hinzufügen, visuelle Elemente ändern und vieles mehr.

Wenn Sie mit dem Ergebnis zufrieden sind, können Sie Ihre App direkt im Web bereitstellen. Klicken Sie einfach im Menü auf der rechten Seite über der App-Vorschau auf die Schaltfläche „In Cloud Run bereitstellen“. AI Studio veröffentlicht Ihre App unter einer öffentlichen URL, sodass Sie sie mit Ihrem Team oder Freunden teilen können.

Firebase Studio ist eine leistungsstarke, webbasierte Umgebung zum Erstellen produktionsreifer Anwendungen, insbesondere solcher, die ein robustes Backend mit Funktionen wie Nutzerauthentifizierung oder einer Datenbank benötigen.

Öffnen Sie Firebase Studio und beschreiben Sie im Prompt-Bereich die vollständige Anwendung, die Sie erstellen möchten. Sie können von Anfang an eine robuste, mehrseitige Anwendung beschreiben. 

Nachdem Sie den ersten Prompt gesendet haben, generiert Firebase Studio einen App-Entwurf, den Sie sich ansehen können. Dieser Entwurf ist ein detaillierter Plan, der die Funktionen, Stilrichtlinien und den Technologiestack beschreibt, die die KI verwenden soll.

Hier können Sie Feedback geben, um den Blueprint zu verfeinern. So wird der generierte Code eher Ihren Vorstellungen entsprechen. Änderungen am Plan sind in dieser Phase viel einfacher als die Bearbeitung des endgültigen Codes. So erreichen Sie schneller den gewünschten Zustand.

Wenn Sie mit dem Entwurf zufrieden sind, klicken Sie auf die Schaltfläche „Prototyp dieser App“. Firebase Studio generiert dann einen funktionierenden Prototyp auf der Grundlage Ihres genehmigten Plans. Nach kurzer Zeit wird eine interaktive Live-Vorschau Ihrer neuen App angezeigt.

Wenn Ihr interaktiver Prototyp im Vorschaufenster ausgeführt wird, können Sie die Unterhaltung fortsetzen, um Änderungen vorzunehmen. Sie können beispielsweise visuelle Änderungen anfordern, Funktionen hinzufügen oder ändern oder sogar neue Logik in Ihre Anwendung einbringen.

Wenn Ihre Anwendung fertig ist, können Sie sie direkt aus der Umgebung heraus bereitstellen. Klicken Sie dazu einfach rechts oben auf „Veröffentlichen“. Firebase Studio übernimmt den gesamten Bereitstellungsprozess und veröffentlicht Ihre App über Cloud Run unter einer öffentlichen URL. Da sie für die Produktion entwickelt wurde, ist Ihre Anwendung von Anfang an skalierbar und kann Traffic verarbeiten.

Gemini Code Assist fungiert als KI-basierter Co-Programmierer direkt in Ihrem vorhandenen Code-Editor (wie VS Code oder JetBrains). Es eignet sich am besten, um professionelle Entwickler direkt in ihrer IDE und bei bestehenden Projekten schneller und effizienter zu unterstützen.

Öffnen Sie dazu eine Projektdatei in Ihrer IDE. Anstatt Code manuell zu schreiben, können Sie im Gemini-Chatfenster oder mit einem Inline-Prompt die Funktion oder den Codeblock beschreiben, den Sie benötigen. Die KI generiert den Code und fügt ihn direkt in die Datei ein.

Markieren Sie den Code, den Sie gerade erstellt haben (oder einen beliebigen Block vorhandenen Codes), und verwenden Sie weiterführende Prompts, um ihn zu ändern oder zu verbessern. Das ist ideal, um neue Funktionen hinzuzufügen, die Fehlerbehandlung zu verbessern, die Leistung zu steigern oder die Logik zu ändern, ohne dass Sie manuell umgestalten müssen.

Um sicherzustellen, dass Ihr Code produktionsreif ist, können Sie Gemini bitten, Unittests zu generieren. So wird ein wichtiger, aber oft zeitaufwendiger Teil der App-Entwicklung automatisiert.