Google Firebase Studio In 23 Minutes

In diesem Video stellt Tina Huang Google Firebase Studio vor und demonstriert, wie man damit eine vollständige Full-Stack-Applikation durch sogenanntes "Vibe Coding" erstellt. Im Gegensatz zu Google AI Studio, das eher wie eine Sandbox funktioniert, ist Firebase Studio eine umfassende Arbeitsumgebung (Workspace), die es ermöglicht, Backends, Frontends, mobile Apps, Datenbanken und Authentifizierungen an einem Ort zu erstellen.

Was ist Firebase Studio?

Firebase Studio wird als ein nutzerfreundlicher, webbasierter KI-App-Builder beschrieben. Es beschleunigt den gesamten Entwicklungszyklus durch den Einsatz von KI-Agenten. Tina hebt drei Hauptgründe für den Hype um dieses Produkt hervor:

• Es ist ein offizielles Google-Produkt.
• Es ist weitgehend kostenlos (im Gegensatz zu Konkurrenten, die oft 20-30 Dollar pro Monat kosten).
• Es baut auf Firebase auf, der bewährten Backend-Plattform von Google.

Das Projekt: Eine Pokémon-inspirierte Produktivitäts-App

Anstatt einen langweiligen Trinkgeld-Rechner zu bauen, entscheidet sich Tina für ein interessanteres Projekt: Eine "Old School" Pokémon-inspirierte Produktivitäts-App namens Pixel Progress. Die Idee ist, dass der Nutzer gegen einen KI-Rivalen (wie "Red" aus Pokémon) antritt. Man setzt sich tägliche Ziele, und wenn man diese nicht erreicht, erhält der Rivale Erfahrungspunkte (XP).

Schritt-für-Schritt-Anleitung

1. Prototyping mit KI

Der Prozess beginnt auf der Landing Page von Firebase Studio. Nach dem Klick auf "Get Started" gelangt man in den Bereich "Prototype an app with AI". Hier kann man einen Prompt eingeben. Tina nutzt nicht nur Text, sondern lädt auch ein Bild (einen Mockup) hoch, um der KI den gewünschten Pixel-Art-Stil und die Features zu zeigen.

Firebase Studio erstellt daraufhin einen Plan für "Pixel Progress", der Folgendes beinhaltet:

• UI-Design für den Hauptbildschirm (Anzeige von Nutzer- und Rivalen-XP).
• Tägliche Resets für Aufgaben.
• Passive XP-Berechnung für den Rivalen bei nicht erledigten Aufgaben.
• Styleguides für Farben, Layout und Ikonografie.

2. Die Arbeitsumgebung und Modelle

Nachdem der Plan bestätigt wurde, öffnet sich die Entwicklungsumgebung. Auf der linken Seite sieht man die Vorschau der App (Preview), rechts den Chat mit Gemini. Standardmäßig nutzt Firebase Studio das Modell Gemini 2.0 Flash, welches schnell und leichtgewichtig ist. Tina entscheidet sich jedoch, auf Gemini 2.5 Pro zu wechseln, um bessere Ergebnisse zu erzielen. Hierfür generiert sie einen API-Key in Google AI Studio und fügt ihn in die Einstellungen ein.

3. Projektstruktur verstehen

Tina bittet Gemini, die Struktur des Projekts zu erklären. Es stellt sich heraus, dass die App auf folgenden Technologien basiert:

• Next.js für das Frontend.
• Tailwind CSS für das Styling.
• Firebase Firestore für die Datenbank.

Ein wichtiges Detail: Tina bemerkt beim Überprüfen der Datei firestore.ts, dass die Konfigurationen zunächst nicht vollständig definiert sind. Sie bittet Gemini, Firestore zu konfigurieren. Hier zeigt sich eine kleine Schwäche: Man muss die Konfigurationsdaten teilweise manuell aus der Firebase-Konsole kopieren, obwohl das Tool eigentlich direkt auf Firebase aufbaut.

4. Design-Features und Anpassungen

Firebase Studio bietet nützliche Tools für visuelle Anpassungen:

• Select-Button: Man kann Elemente in der Vorschau anklicken und per Chat ändern (z.B. "Ändere diesen Button zu lila").
• Annotate (Kritzel-Button): Man kann direkt auf die Vorschau zeichnen und Anmerkungen machen, z.B. einen Bereich markieren und schreiben "Füge hier einen Footer hinzu".

5. GitHub-Integration

Ein großer Vorteil ist die nahtlose Integration von Versionskontrolle. Unten links gibt es die Möglichkeit, das Projekt mit GitHub zu verbinden. Gemini kann den Nutzer sogar durch den Prozess führen, um den Code direkt in ein Repository zu pushen.

6. Veröffentlichung (Publishing)

Wenn die App fertig ist, kann sie über den "Publish"-Button veröffentlicht werden. Der Prozess umfasst:

• Verknüpfung mit einem Firebase-Projekt.
• Verknüpfung mit einem Cloud-Billing-Konto (für das Hosting fallen Kosten an, der Rest des Tools ist kostenlos).
• Einrichten der Umgebung.

Nach kurzer Wartezeit ist die App live im Internet verfügbar.

Fazit und Bewertung

Tinas Urteil zu Firebase Studio fällt gemischt bis positiv aus. Sie vergibt eine Bewertung von 5 von 7 Punkten. Es ist (noch) kein "Killer" für alle anderen KI-App-Builder und hat eine etwas steilere Lernkurve als Tools wie Bolt oder Replit. Allerdings ist es kostenlos (bis auf Hosting-Gebühren) und bietet durch die Firebase-Integration eine solide Basis für echte Full-Stack-Anwendungen. Da es sich noch um eine frühe Version handelt, erwartet sie in den kommenden Monaten weitere Verbesserungen.

Häufige Fragen (FAQ)

Ist Google Firebase Studio kostenlos?

Ja, die Nutzung von Firebase Studio selbst ist kostenlos. Kosten fallen lediglich für die Nutzung der Google Cloud Ressourcen (wie Hosting) an, die mit der App verknüpft werden.

Welche KI-Modelle verwendet Firebase Studio?

Standardmäßig wird Gemini 2.0 Flash verwendet, da es sehr schnell ist. Nutzer haben jedoch die Möglichkeit, auf leistungsstärkere Modelle wie Gemini 2.5 Pro zu wechseln, indem sie einen eigenen API-Key verwenden.

Kann ich den Code aus Firebase Studio exportieren?

Ja, Firebase Studio bietet eine Integration mit GitHub. Du kannst dein Projekt direkt mit einem GitHub-Repository verbinden und den Code dort pushen, um ihn weiterzuverwenden oder lokal zu bearbeiten.

Welche Technologien werden für die Apps verwendet?

Im gezeigten Beispiel nutzt Firebase Studio einen modernen Tech-Stack bestehend aus Next.js für das Frontend, Tailwind CSS für das Design und Firebase Firestore für die Datenbank.

Quelle

Original-Video: https://youtu.be/Rd6F5wHIysM