Firebase Studio wird am 22. März 2027 eingestellt. Ab dem 22. Juni 2026 sind das Erstellen neuer Arbeitsbereiche und die Registrierung von Nutzern deaktiviert. Sie können weiterhin in Ihren bestehenden Arbeitsbereichen arbeiten und sie zu Google AI Studio oder Google Antigravity migrieren. Informationen zur Migration

Alle bereits in Firebase bereitgestellten Apps werden auch nach dem Datum der Einstellung weiter ausgeführt. Auch alle unsere wichtigsten Firebase-Produkte (z. B. Firestore, Authentication, App Hosting) sind von der Einstellung von Firebase Studio nicht betroffen.

Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Full-Stack-Webanwendung mit dem App Prototyping-Agent entwickeln, veröffentlichen und überwachen

Anschließend verfeinern und verbessern Sie die App, bevor Sie sie schließlich auf Firebase App Hosting veröffentlichen.

Weitere Technologien, die Sie im Laufe dieser Anleitung verwenden werden, sind:

Schritt 1: App generieren

Melden Sie sich in Ihrem Google-Konto an und öffnen Sie Firebase Studio.
Geben Sie im Feld App-Prototyp mit KI erstellen den folgenden Prompt ein. Dadurch wird eine bildbasierte Rezept-App erstellt, die die Browserkamera und generative KI verwendet.

Sie könnten beispielsweise einen Prompt wie den folgenden eingeben, um eine App zum Generieren von Rezepten zu erstellen:
```
Use secure coding practices to create an error-free web app that lets
users upload a photo or take a picture with their browser
camera. The app identifies the food in the picture and generates a
recipe and accompanying image that includes that food.

If no food product is identified, generate a random dessert recipe.
```
Tipp :Für optimale Ergebnisse sollten Sie Ihren Prompt so spezifisch wie möglich formulieren. Geben Sie die gewünschten Funktionen, Nutzer-Workflows und Datenanforderungen an. Optional: Klicken Sie auf Prompt optimieren, damit Gemini Ihren ursprünglichen Prompt optimiert. Die effektivsten Entwicklungsprozesse mit KI sind iterativ. Sie können Funktionen in Zusammenarbeit mit Gemini immer wieder optimieren und hinzufügen. Weitere Informationen zum Erstellen effektiver Prompts
Optional: Laden Sie ein Bild hoch, das zu Ihrem Prompt passt. Sie können beispielsweise ein Bild mit dem Farbschema hochladen, das Ihre App verwenden soll, und Firebase Studio anweisen, es zu verwenden. Bilder dürfen maximal 3 MiB groß sein.
Klicken Sie auf Prototyp mit KI erstellen.

Mit dem App Prototyping agent wird anhand Ihres Prompts ein App-Konzept erstellt, das einen vorgeschlagenen App-Namen, erforderliche Funktionen und Stilrichtlinien enthält.
Sehen Sie sich den Entwurf an. Nehmen Sie bei Bedarf einige Änderungen vor. Sie können beispielsweise den vorgeschlagenen App-Namen oder das Farbschema mit einer der folgenden Optionen ändern:
- Klicken Sie auf Anpassen und bearbeiten Sie den Blueprint direkt. Nehmen Sie die gewünschten Änderungen vor und klicken Sie auf Speichern.
- Fügen Sie im Chatbereich im Feld Beschreiben Sie... klärende Fragen und Kontext hinzu. Sie können auch zusätzliche Bilder hochladen.
Klicken Sie auf Prototyp für diese App erstellen.

Wichtig:Gemini kann Ergebnisse generieren, die zwar plausibel erscheinen, aber faktisch falsch sind. Möglicherweise werden fehlerhafte Informationen zurückgegeben, die nicht die Auffassung von Google widerspiegeln. Validieren Sie alle Ausgaben von Gemini, bevor Sie sie verwenden, und verwenden Sie ungetesteten generierten Code nicht in der Produktionsumgebung. Geben Sie keine personenidentifizierbaren Informationen oder Nutzerdaten in den Chat ein.
Mit App Prototyping agent wird die Programmierung Ihrer App gestartet.
- Da Ihre App KI verwendet, werden Sie aufgefordert, einen Gemini API-Schlüssel hinzuzufügen oder zu generieren. Wenn Sie auf „Automatisch generieren“ klicken, wird im App Prototyping agent ein Firebase-Projekt und ein Gemini API-Schlüssel für Sie bereitgestellt.
Wichtig :Wenn Sie Automatisch generieren auswählen, erstellt App Prototyping agent in Ihrem Namen ein Firebase-Projekt mit einem Präfix, das dem Namen Ihres Firebase Studio-Arbeitsbereichs entspricht, und einen neuen Gemini API-Schlüssel im Projekt. Außerdem wird der Schlüssel in Ihrem Firebase Studio-Arbeitsbereich in einer .env-Datei gespeichert. Wenn Sie jederzeit auf Ihr neues Projekt zugreifen möchten, klicken Sie oben auf der Seite auf den Projektnamen. Wenn Sie in Zukunft auf Ihren Gemini API-Schlüssel zugreifen möchten, um ihn zu kopieren oder zu löschen, verwenden Sie die Google Cloud-Konsole.

Schritt 2: Testen, optimieren, Fehler beheben und iterieren

Nachdem die erste App generiert wurde, können Sie sie testen, verfeinern, debuggen und iterieren.

App ansehen und mit ihr interagieren:Nach Abschluss der Codeerstellung wird eine Vorschau Ihrer App angezeigt. Sie können direkt mit der Vorschau interagieren, um sie zu testen. Weitere Informationen
Cloud Firestore und Firebase Authentication hinzufügen:In der Iterationsphase können Sie den App Prototyping agent bitten, mit Cloud Firestore und Firebase Authentication eine Nutzerauthentifizierung und eine Datenbank hinzuzufügen. Sie können Nutzern beispielsweise die Möglichkeit geben, Rezepte mit einem Prompt wie dem folgenden zu speichern und herunterzuladen:
```
Add user authentication to the app. Authenticated users can:

  - Download the recipe and its generated image as a PDF (Print).

  - Save the recipe as public or private and make accessible to a search
    feature. For now, just save the text, not the image, to the database.

Important: Only authenticated users can download the PDF.
```
Tipp :Der App Prototyping agent kann Ihrer App während der Iterationsphase Cloud Firestore und Firebase Authentication hinzufügen, nicht im ursprünglichen App-Konzept.
Fehler sofort beheben:In den meisten Fällen werden Sie von App Prototyping agent aufgefordert, auftretende Fehler zu beheben. Klicken Sie auf Fehler beheben, damit versucht wird, den Fehler zu beheben.

Wenn Sie Fehler erhalten, die nicht automatisch behoben werden können, kopieren Sie den Fehler und alle relevanten Informationen (z. B. „Kannst du diesen Fehler in meinem Firebase-Initialisierungscode beheben?“) in das Chatfenster und senden Sie sie an Gemini.

Tipp :Gemini erklärt seine Begründung, Sie können es aber auch bitten, seinen Plan zu erläutern, bevor es ihn ausführt.
Mit natürlicher Sprache testen und iterieren:Testen Sie Ihre App gründlich und arbeiten Sie mit App Prototyping agent zusammen, um den Code und den Blueprint zu iterieren, bis Sie zufrieden sind.

In der Prototyper-Ansicht können Sie auch die folgenden Funktionen verwenden:
- Klicken Sie auf Anmerkungen, um direkt im Vorschaufenster zu zeichnen. Verwenden Sie die verfügbaren Form-, Bild- und Texttools sowie einen optionalen Text-Prompt, um visuell zu beschreiben, was Sie ändern möchten.App Prototyping agent
- Klicken Sie auf Auswählen, um ein bestimmtes Element auszuwählen und Anweisungen für die App Prototyping agent einzugeben. So können Sie schnell ein bestimmtes Symbol, eine Schaltfläche, einen Textabschnitt oder ein anderes Element anvisieren. Wenn Sie auf ein Bild klicken, haben Sie auch die Möglichkeit, ein Stockfoto von Unsplash zu suchen und auszuwählen.
Optional können Sie auf Vorschaulink freigeben klicken, um Ihre App vorübergehend öffentlich über Firebase Studio öffentliche Vorschauen freizugeben.
Firebase-Projekt erstellen:Das App Prototyping agent stellt in Ihrem Namen ein Firebase-Projekt bereit, wenn Sie:
- Gemini API-Schlüssel automatisch generieren
- Verbindung Ihrer App mit einem Firebase-Projekt anfordern
- Hilfe beim Verbinden Ihrer App mit Firebase-Diensten wie Cloud Firestore oder Firebase Authentication
- Klicken Sie auf den Button Veröffentlichen und richten Sie Firebase App Hosting ein.
Wenn Sie das mit Ihrem Arbeitsbereich verknüpfte Firebase-Projekt ändern möchten, geben Sie App Prototyping agent die Projekt-ID an, die Sie stattdessen verwenden möchten. Beispiel: „Zum Firebase-Projekt mit der ID <your-project-id> wechseln.“
App testen und Cloud Firestore-Datenbankregeln überprüfen:Laden Sie im Bereich „App-Vorschau“ ein Bild mit verschiedenen Lebensmitteln hoch, um zu testen, ob Ihre App die Zutaten erkennen und Rezepte generieren und speichern kann.

Als verschiedene Nutzer anmelden und Rezepte generieren: Achten Sie darauf, dass authentifizierte Nutzer ihre privaten Rezepte und Rezepte sehen können und dass alle Nutzer öffentliche Rezepte sehen.

Wenn Sie App Prototyping agent bitten, Cloud Firestore hinzuzufügen, werden die Cloud Firestore-Datenbankregeln für Sie geschrieben und bereitgestellt. Prüfen Sie die Regeln in der Firebase-Konsole.
Direkt im Code debuggen und iterieren:Klicken Sie auf Zum Code wechseln, um die Ansicht Code zu öffnen. Dort sehen Sie alle Dateien Ihrer App und können den Code direkt bearbeiten. Sie können jederzeit wieder zum Modus Prototyper zurückkehren.

In der Code-Ansicht können Sie auch die folgenden nützlichen Funktionen verwenden:
- Firebase Studiointegrierte Debugging- und Berichtsfunktionen verwenden, um Ihre App zu untersuchen, zu debuggen und zu prüfen.
- KI-Unterstützung mit Gemini entweder inline in Ihrem Code oder über den interaktiven Chat mit Gemini (beides ist standardmäßig verfügbar). Der interaktive Chat kann Probleme diagnostizieren, Lösungen anbieten und Tools ausführen, um Ihre App schneller zu reparieren. Klicken Sie unten im Arbeitsbereich auf sparkGemini, um auf den Chat zuzugreifen.
  
  Hinweis :Apps, die mit App Prototyping agent erstellt wurden, verwenden standardmäßig den Prototyper-Chat in der Ansicht Code. Wenn Sie stattdessen den interaktiven Chat Gemini verwenden möchten, klicken Sie unter Gemini auf + und wählen Sie dann Neuer Chat aus. Wenn Sie zum Prototyper-Chat zurückkehren möchten, klicken Sie auf Letzte Chats und wählen Sie dann Prototyper-Chat aus.
- Greifen Sie auf die Firebase Local Emulator Suite zu, um Datenbank- und Authentifizierungsdaten aufzurufen. So öffnen Sie den Emulator in Ihrem Arbeitsbereich:
  1. Klicken Sie auf Zu Code wechseln und öffnen Sie die Erweiterung Firebase Studio (Ctrl+',Ctrl+' oder Cmd+',Cmd+' unter MacOS).
  2. Scrollen Sie zu Backend-Ports und maximieren Sie den Bereich.
  3. Klicken Sie in der Spalte Aktionen, die Port 4000 entspricht, auf In neuem Fenster öffnen.
Leistung Ihrer generativen KI-Funktion testen und messen:Mit dem Genkit Developer UI können Sie Ihre Genkit-KI-Abläufe ausführen, testen, debuggen, mit verschiedenen Modellen interagieren und Ihre Prompts optimieren.

So laden Sie Ihre Genkit-Abläufe in Genkit Developer UI und beginnen mit dem Testen:
1. Führen Sie im Terminal in Ihrem Firebase Studio-Arbeitsbereich den folgenden Befehl aus, um den Gemini API-Schlüssel zu laden und den Genkit-Server zu starten:
```
 npm run genkit:watch
```
2. Klicken Sie auf den Genkit Developer UI-Link. Die Genkit Developer UI wird in einem neuen Fenster mit Ihren Flows, Prompts, Embeddern und einer Auswahl verschiedener verfügbarer Modelle geöffnet.
Weitere Informationen zu Genkit Developer UI

Schritt 3 (optional): App mit App Hosting veröffentlichen

Nachdem Sie Ihre App in Ihrem Arbeitsbereich getestet haben und damit zufrieden sind, können Sie sie mit Firebase App Hosting im Web veröffentlichen.

Wenn Sie App Hosting einrichten, Firebase Studio wird ein Firebase-Projekt für Sie erstellt (sofern nicht bereits eines durch die automatische Generierung eines Gemini API-Schlüssels oder anderer Backend-Dienste erstellt wurde) . Außerdem werden Sie durch die Verknüpfung eines Cloud Billing-Kontos geführt.

So veröffentlichen Sie Ihre App:

Klicken Sie auf Veröffentlichen, um Ihr Firebase-Projekt einzurichten und Ihre App zu veröffentlichen. Der Bereich App veröffentlichen wird angezeigt.

Wichtig :Wenn Sie keinen Gemini API-Schlüssel automatisch generiert oder App Prototyping agent nicht aufgefordert haben, ein Firebase-Projekt zu erstellen, stellt Firebase Studio in Ihrem Namen ein Firebase-Projekt bereit, wenn Sie auf Veröffentlichen klicken. Sie können auf das Firebase-Projekt zugreifen, indem Sie oben auf der Seite auf den Projektnamen klicken.
Im Schritt Firebase-Projekt wird im App Prototyping agent das Firebase-Projekt angezeigt, das mit dem Arbeitsbereich verknüpft ist. Wenn noch kein Firebase-Projekt vorhanden ist, wird mit App Prototyping agent ein neues Projekt für Sie erstellt. Klicken Sie auf Weiter, um fortzufahren.
Wählen Sie im Schritt Cloud Billing-Konto verknüpfen eine der folgenden Optionen aus:
- Wählen Sie das Cloud Billing-Konto aus, das Sie mit Ihrem Firebase-Projekt verknüpfen möchten.
- Wenn Sie kein Cloud Billing-Konto haben oder ein neues erstellen möchten, klicken Sie auf Cloud Billing-Konto erstellen. Dadurch wird die Google Cloud Console geöffnet, in der Sie ein neues Cloud Billing-Konto mit Self-Service-Funktionen erstellen können. Kehren Sie nach dem Erstellen des Kontos zu Firebase Studio zurück und wählen Sie das Konto in der Liste Cloud Billing verknüpfen aus.
Klicken Sie auf Weiter. Firebase Studio verknüpft das Rechnungskonto mit dem Projekt, das Ihrem Arbeitsbereich zugeordnet ist. Das Projekt wurde entweder beim automatischen Generieren eines Gemini API-Schlüssels oder beim Klicken auf Veröffentlichen erstellt.

Wichtig:Firebase App Hosting erfordert ein Cloud Billing-Konto. Wenn Sie ein Rechnungskonto mit einem Firebase-Projekt verknüpfen, wird Ihr Projekt automatisch auf den Blaze-Tarif (Pay as you go) umgestellt. Die Nutzung von Gemini API und anderen Firebase- und Google Cloud-Diensten wird auf die kostenpflichtige Stufe umgestellt. Ihnen wird die Nutzung kostenpflichtiger Dienste in Rechnung gestellt, die über das kostenlose Kontingent hinausgeht. Weitere Informationen finden Sie unter Kosten für App Hosting verstehen, Firebase-Preise und Gemini Preise für Entwickler-APIs.
Klicken Sie auf Dienste einrichten. App Prototyping agent beginnt mit der Bereitstellung von Firebase-Diensten.
Klicken Sie auf Jetzt veröffentlichen. Firebase Studio richtet Firebase-Dienste ein und startet dann den App Hosting-Roll-out. Dieser Vorgang kann mehrere Minuten dauern. Weitere Informationen dazu, was im Hintergrund passiert, finden Sie unter Der App Hosting-Build-Prozess.

Tipp: Wenn Sie nicht sofort veröffentlichen möchten, können Sie auf Später veröffentlichen klicken.
Wenn der Veröffentlichungsschritt abgeschlossen ist, wird die App-Übersicht mit einer URL und App-Statistiken auf Grundlage von App Hosting-Observability angezeigt. Wenn Sie anstelle der von Firebase generierten Domain eine benutzerdefinierte Domain (z. B. example.com oder app.example.com) verwenden möchten, können Sie in der Firebase Console eine benutzerdefinierte Domain hinzufügen.

Weitere Informationen zu App Hosting finden Sie unter App Hosting und seine Funktionsweise.

(Empfohlen) Schritt 4: Veröffentlichte App testen

Wenn die Veröffentlichung abgeschlossen ist und Ihre App in Firebase bereitgestellt wurde, können Cloud Firestore und Firebase Authentication in der Produktionsumgebung getestet werden.

Indexe für Ihre Cloud Firestore-Datenbank generieren

Wenn Sie Ihre App in Cloud Firestore bereitstellen, werden Indexe nicht automatisch generiert. Das bedeutet, dass Sie nach der Veröffentlichung möglicherweise Indexe für Ihre Abfragen generieren müssen.

Dieser Fehler kann in Fehlermeldungen oder in der Entwicklerkonsole Ihres Browsers angezeigt werden.

So generieren Sie Indexe nach der Veröffentlichung:

Über eine veröffentlichte App:Suchen Sie im Bereich App-Übersicht (klicken Sie auf Veröffentlichen, falls er nicht angezeigt wird) nach dem Link App aufrufen und klicken Sie darauf.

Über die Firebase Studio-Vorschau:Öffnen Sie die Entwicklerkonsole Ihres Browsers und suchen Sie nach der Fehlermeldung 200, die von Cloud Firestore generiert wird.
Testen Sie alle Abläufe in Ihrer App. Möglicherweise wird eine Fehlermeldung wie „Fehler beim Laden von Rezepten. Für die Abfrage ist ein Index erforderlich. Sie können es hier erstellen:“, gefolgt von einem Link zur Firebase-Konsole.
Klicken Sie auf den Link, um zur Firebase-Konsole zu gelangen. Dort wird ein empfohlener Index angezeigt.
Klicken Sie auf Speichern, um den empfohlenen Index zu übernehmen.
Kehren Sie zur App zurück und laden Sie die Seite neu.
Testen Sie weiterhin alle Abläufe in Ihrer App, um bei Bedarf Indexe hinzuzufügen.

Weitere Informationen zum Verwalten von Indexen in Cloud Firestore

Cloud Firestore- und Firebase Authentication-Daten in der Firebase-Konsole ansehen

Nach der Veröffentlichung können Sie sich in der Firebase-Konsole Live-Daten zu Ihrer App ansehen.

Wenn Sie Ihre Cloud Firestore-Datenbank aufrufen möchten, öffnen Sie die Firebase-Konsole und wählen Sie im Navigationsmenü Build > Firestore-Datenbank aus.

Hier können Sie gespeicherte Daten ansehen, Ihre Sicherheitsregeln aufrufen und testen sowie Indexe erstellen. Weitere Informationen finden Sie unter Cloud Firestore.
Wenn Sie Ihre Firebase Authentication-Livedaten ansehen möchten, öffnen Sie die Firebase-Konsole und wählen Sie im Navigationsmenü Build > Authentication aus.

Hier können Sie Ihre Authentifizierungskonfiguration und App-Nutzer prüfen. Weitere Informationen finden Sie unter Firebase Authentication.

Cloud Firestore-Regeln in der Produktion testen

Nachdem Sie Ihre App veröffentlicht haben, sollten Sie die Cloud Firestore-Sicherheitsregeln noch einmal in Ihrer Produktionsumgebung testen. So wird sichergestellt, dass Ihre Daten für autorisierte Nutzer zugänglich und vor unbefugtem Zugriff geschützt sind.

Sie können Ihre Regeln mit den folgenden Methoden testen:

Anwendung testen: Interagieren Sie mit Ihrer bereitgestellten Anwendung und führen Sie Vorgänge aus, die verschiedene Datenzugriffsmuster (Lesen, Schreiben, Löschen) für verschiedene Nutzerrollen oder ‑status auslösen. Diese Tests in der Praxis helfen, zu bestätigen, dass Ihre Regeln korrekt durchgesetzt werden.
Regel-Playground: Für gezielte Prüfungen können Sie den Regel-Playground in der Firebase-Konsole verwenden. Mit diesem Tool können Sie Anfragen (Lese-, Schreib- und Löschvorgänge) für Ihre Cloud Firestore-Datenbank mit Ihren Produktionsregeln simulieren. Sie können den Status der Nutzerauthentifizierung, den Pfad zu den Daten und den Vorgangstyp angeben, um zu sehen, ob Ihre Regeln den Zugriff wie vorgesehen zulassen oder verweigern.

Hinweis: Wenn Sie Sicherheitsregeln während des Veröffentlichungsprozesses oder mit der Firebase-CLI bereitstellen, werden mit den in Ihrem Projektverzeichnis definierten Regeln alle vorhandenen Regeln in der Firebase-Konsole überschrieben. Wenn Sie also Ihre Sicherheitsregeln über die Firebase Console definieren oder bearbeiten möchten, müssen Sie auch die in Ihrem Projektverzeichnis definierten Regeln aktualisieren.
Einheitentests: Für umfassendere Tests können Sie Einheitentests für Ihre Sicherheitsregeln schreiben. Mit dem Firebase Studio-Vorschau-Backend, das auf der Firebase Local Emulator Suite basiert, können Sie diese Tests lokal ausführen und das Verhalten Ihrer Produktionsregeln simulieren. So lässt sich komplexe Regellogik zuverlässig überprüfen und die Abdeckung für verschiedene Szenarien bestätigen. Nach der Bereitstellung sollten Sie noch einmal überprüfen, ob Ihre Unit-Tests mit dem Emulator wie erwartet funktionieren und alle Szenarien abdecken.