We're sunsetting Firebase Studio on March 22, 2027. To continue building and deploying new versions of your app, migrate your Firebase Studio projects to Google AI Studio or Google Antigravity before that date. Learn how to migrate.

Any apps already deployed to Firebase will continue to run even after the sunset date. Also, all our core Firebase products (like Firestore, Authentication, App Hosting, etc.) are not impacted by the Firebase Studio sunset.

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

In diesem Leitfaden erfahren Sie, wie Sie mit dem App Prototyping agent mithilfe von Gemini schnell eine Full-Stack-App entwickeln und veröffentlichen. Sie verwenden einen Prompt in natürlicher Sprache, um eine Next.js-App zu generieren, die Lebensmittel auf einem Bild oder über die Browserkamera eines angemeldeten Nutzers identifiziert und ein Rezept mit den identifizierten Zutaten erstellt. Nutzer können das Rezept dann in einer durchsuchbaren Datenbank speichern.

Anschließend optimieren Sie die App, bevor Sie sie in Firebase App Hosting veröffentlichen.

Weitere Technologien, die Sie in diesem Leitfaden verwenden, sind:

Schritt 1: App generieren

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

Sie können beispielsweise einen Prompt wie den folgenden eingeben, um eine App zur Rezeptgenerierung 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: Formulieren Sie Ihren Prompt so genau wie möglich, um die besten Ergebnisse zu erzielen. Geben Sie die gewünschten Funktionen, Nutzer-Workflows und Datenanforderungen an. Optional können Sie auf Prompt verbessern klicken, um Gemini zu bitten, Ihren ursprünglichen Prompt zu optimieren. Die effektivsten Entwicklungsprozesse mit KI sind iterativ. Sie können die Funktionen also gemeinsam mit Gemini weiter optimieren und hinzufügen. Weitere Informationen zum Erstellen effektiver Prompts.
Optional können Sie ein Bild hochladen, 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 nicht größer als 3 MB sein.
Klicken Sie auf Mit KI prototypisieren.

Der App Prototyping agent generiert einen App-Blueprint basierend auf Ihrem Prompt und gibt einen vorgeschlagenen App-Namen, erforderliche Funktionen, und Stilrichtlinien zurück.
Prüfen Sie den Blueprint. 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 „Bearbeiten“ Anpassen und bearbeiten Sie den Blueprint direkt. Nehmen Sie die gewünschten Änderungen vor und klicken Sie auf Speichern.
- Fügen Sie im Feld Beschreiben Sie... im Chatbereich klärende Fragen und Kontext hinzu. Sie können auch zusätzliche Bilder hochladen.
Klicken Sie auf Diese App prototypisieren.

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. Prüfen Sie alle Ausgaben von Gemini, bevor Sie sie verwenden, und verwenden Sie keinen ungetesteten generierten Code in der Produktion. Geben Sie keine personenidentifizierbaren Informationen oder Nutzerdaten in den Chat ein.
Der App Prototyping agent beginnt mit dem Codieren Ihrer App.
- Da Ihre App KI verwendet, werden Sie aufgefordert, einen Gemini API Schlüssel hinzuzufügen oder zu generieren. Wenn Sie auf „Automatisch generieren“ klicken, stellt der App Prototyping agent ein Firebase-Projekt und einen Gemini API Schlüssel für Sie bereit.
Wichtig: Wenn Sie Automatisch generieren auswählen, erstellt der App Prototyping agent in Ihrem Namen ein Firebase-Projekt mit einem Präfix, das dem Namen Ihres Firebase Studio Arbeitsbereichs entspricht, und erstellt 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, optimieren, Fehler beheben und iterieren.

App prüfen und damit interagieren:Nachdem die Codeerstellung abgeschlossen ist, wird eine Vorschau Ihrer App angezeigt. Sie können direkt mit der Vorschau interagieren, um sie zu testen. Weitere Informationen finden Sie unter Vorschau der App ansehen.
hinzufügen Cloud Firestore und Firebase Authentication: Während der Iterationsphase können Sie den App Prototyping agent bitten, die Nutzerauthentifizierung und eine Datenbank mit Cloud Firestore und Firebase Authentication 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 Cloud Firestore und Firebase Authentication in der Iterationsphase zu Ihrer App hinzufügen, nicht im ursprünglichen App-Blueprint.
Fehler beheben: In den meisten Fällen fordert der App Prototyping agent Sie auf, alle auftretenden Fehler zu beheben. Klicken Sie auf Fehler beheben , damit der Agent versucht, den Fehler zu beheben.

Wenn Sie Fehler erhalten, die nicht automatisch behoben werden können, kopieren Sie den Fehler und alle relevanten Kontextinformationen (z. B. „Können Sie 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 den Agenten aber auch bitten, seinen Plan zu erläutern, bevor er ihn ausführt.
Mit natürlicher Sprache testen und iterieren: Testen Sie Ihre App gründlich und arbeiten Sie mit dem 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 hinzufügen , 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 möchten, dass sich App Prototyping agent ändert.
- Klicken Sie auf Auswählen , um ein bestimmtes Element auszuwählen und Anweisungen für den App Prototyping agent einzugeben. So können Sie schnell ein bestimmtes Symbol, eine Schaltfläche, einen Textabschnitt oder ein anderes Element auswählen. Wenn Sie auf ein Bild klicken, haben Sie auch die Möglichkeit, ein Stockbild von Unsplashzu suchen und auszuwählen.
Optional können Sie auf Link zur Vorschau freigeben klicken, um Ihre App mithilfe der Firebase Studio öffentlichen Vorschauen öffentlich und vorübergehend freizugeben.
Firebase-Projekt erstellen: Der App Prototyping agent stellt in Ihrem Namen ein Firebase-Projekt bereit, wenn Sie:
- Einen Gemini API-Schlüssel automatisch generieren
- Bitten, Ihre App mit einem Firebase-Projekt zu verknüpfen
- Um Hilfe beim Verknüpfen Ihrer App mit Firebase-Diensten wie Cloud Firestore oder Firebase Authentication bitten
- Auf die Schaltfläche Veröffentlichen klicken und Firebase App Hosting einrichten
Wenn Sie das mit Ihrem Arbeitsbereich verknüpfte Firebase-Projekt ändern möchten, geben Sie dem App Prototyping agent die Projekt-ID des Projekts an, das Sie stattdessen verwenden möchten. Beispiel: „Zu Firebase-Projekt mit der ID <your-project-id> wechseln“.
App testen und Cloud Firestore Datenbankregeln prüfen: Laden Sie im Bereich mit der App Vorschau ein Bild mit verschiedenen Lebensmitteln hoch, um zu testen, ob Ihre App die Zutaten identifizieren und Rezepte generieren und speichern kann.

Melden Sie sich als verschiedene Nutzer an und generieren Sie Rezepte. Achten Sie darauf, dass authentifizierte Nutzer ihre privaten Rezepte und Rezepte sehen können und dass alle Nutzer öffentliche Rezepte sehen.

Wenn Sie den App Prototyping agent bitten, Cloud Firestore hinzuzufügen, schreibt und stellt er Cloud Firestore Datenbankregeln für Sie bereit. Prüfen Sie die Regeln in der Firebase Console.
Fehler direkt im Code beheben und iterieren: Klicken Sie auf Zu Code wechseln, um die Code Ansicht zu öffnen. Dort sehen Sie alle Dateien Ihrer App und können den Code direkt ändern. Sie können jederzeit wieder in den PrototyperModus wechseln.

In der Code Ansicht können Sie auch die folgenden nützlichen Funktionen verwenden:
- Firebase Studio's integrierten Debugging- und Berichtsfunktionen um Ihre App zu prüfen, Fehler zu beheben und zu auditieren.
- KI-Unterstützung mit Gemini entweder direkt im Code oder über den Gemini interaktiven Chat (beide sind standardmäßig verfügbar). Der interaktive Chat kann Probleme diagnostizieren, Lösungen anbieten und Tools ausführen, um Fehler in Ihrer App schneller zu beheben. Wenn Sie auf den Chat zugreifen möchten, klicken Sie unten im Arbeitsbereich auf sparkGemini.
  
  Hinweis: Bei Apps, die mit dem App Prototyping agent erstellt wurden, wird standardmäßig der Prototyper Chat in der Code Ansicht verwendet. Wenn Sie stattdessen den interaktiven Chat von 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 Prototyping-Chat aus.
- Greifen Sie auf die Firebase Local Emulator Suite zu, um Datenbank- und Authentifizierungsdaten anzusehen. So öffnen Sie den Emulator in Ihrem Arbeitsbereich:
  1. Klicken Sie auf Zu Code wechseln und öffnen Sie die Firebase Studio Erweiterung (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 für Port 4000 auf In neuem Fenster öffnen.
Leistung der generativen KI-Funktionen testen und messen:Mit der Genkit Developer UI können Sie Ihre Genkit-KI-Abläufe ausführen, testen, Fehler beheben, mit verschiedenen Modellen interagieren und Ihre Prompts optimieren.

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

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

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

Wenn Sie App Hosting einrichten, erstellt Firebase Studio ein Firebase-Projekt für Sie (falls noch keines durch die automatische Generierung eines Gemini API Schlüssels oder anderer Backend-Dienste erstellt wurde) und führt Sie durch die Verknüpfung eines Cloud Billing Kontos.

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 automatisch generierten Gemini API Schlüssel oder den 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 zeigt der App Prototyping agent das Firebase-Projekt an, das mit dem Arbeitsbereich verknüpft ist. Wenn noch kein Firebase-Projekt vorhanden ist, erstellt der App Prototyping agent ein neues Projekt für Sie. Klicken Sie auf Weiter , um fortzufahren.
Wählen Sie im Schritt Konto Cloud Billing 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 Konsole geöffnet, in der Sie ein neuesKonto für die Selbstbedienung Cloud Billing erstellen können. Kehren Sie nach dem Erstellen des Kontos zu Firebase Studio zurück und wählen Sie das Konto in der Liste Link Cloud Billing aus.
Klicken Sie auf Weiter. Firebase Studio verknüpft das Rechnungskonto mit dem Projekt , das mit Ihrem Arbeitsbereich verknüpft ist. Dieses wurde entweder erstellt, als Sie einen Gemini API Schlüssel automatisch generiert haben, oder als Sie auf Veröffentlichen geklickt haben.

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 mit nutzungsabhängiger Abrechnung aktualisiert und Ihre Gemini API und andere Nutzung von Firebase- und Google Cloud-Diensten wird auf den kostenpflichtigen Tarif aktualisiert. Ihnen wird die Nutzung kostenpflichtiger Dienste in Rechnung gestellt, die das kostenlose Kontingent überschreitet. Weitere Informationen finden Sie unter Kosten App Hosting, Firebase-Preise und Gemini Preise für die Developer API.
Klicken Sie auf Dienste einrichten. Der 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 die Einführung von App Hosting. Dieser Vorgang kann einige Minuten dauern. Weitere Informationen zu den Vorgängen im Hintergrund finden Sie unter Der App Hosting Build-Prozess.

Tipp: Wenn Sie die App nicht sofort veröffentlichen möchten, können Sie auf Später veröffentlichen klicken.
Nach Abschluss des Veröffentlichungsschritts wird die App-Übersicht mit einer URL und App-Insights angezeigt, die auf App Hosting Beobachtbarkeit basieren. Wenn Sie anstelle der von Firebase generierten Domain eine benutzerdefinierte Domain verwenden möchten (z. B. „example.com“ oder „app.example.com“), können Sie in der Firebase Console eine benutzerdefinierte Domain hinzufügen.

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

(Empfohlen) Schritt 4: Veröffentlichte App testen

Nachdem die Veröffentlichung abgeschlossen ist und Ihre App in Firebase bereitgestellt wurde, Cloud Firestore und Firebase Authentication können Sie in der Produktion testen.

Indexe für Ihre Cloud Firestore Datenbank generieren

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

Dies wird möglicherweise in Fehlermeldungen oder in der Entwicklerkonsole Ihres Browsers angezeigt.

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 sichtbar ist) den Link App aufrufen und klicken Sie darauf.

Über die Firebase Studio Vorschau: Öffnen Sie die Entwicklerkonsole Ihres Browsers und suchen Sie die Fehlermeldung 200, die von Cloud Firestore generiert wird.
Testen Sie alle Abläufe in Ihrer App. Möglicherweise wird ein Fehler wie „Fehler beim Laden von Rezepten. Für die Abfrage ist ein Index erforderlich. Sie können ihn hier erstellen:" mit einem Link zur Firebase Console angezeigt.
Folgen Sie dem Link zur Firebase Console. Dort wird ein empfohlener Index angezeigt.
Klicken Sie auf Speichern , um den empfohlenen Index zu akzeptieren.
Kehren Sie zu Ihrer 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 finden Sie unter Indexe in Cloud Firestore verwalten.

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

Nach der Veröffentlichung können Sie in der Firebase Console Live-Daten aus Ihrer App ansehen.

Wenn Sie Ihre Live-Cloud Firestore Datenbank ansehen möchten, öffnen Sie die Firebase Console und wählen Sie im Navigationsmenü Erstellen > Firestore-Datenbank aus.

Hier können Sie gespeicherte Daten prüfen, Ihre Sicherheitsregeln ansehen und testen sowie Indexe erstellen. Weitere Informationen finden Sie unter Cloud Firestore.
Wenn Sie Ihre Live-Firebase Authentication Daten ansehen möchten, öffnen Sie die Firebase Console 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

Nach der Veröffentlichung Ihrer App sollten Sie Ihre Cloud Firestore Sicherheitsregeln noch einmal in Ihrer Produktionsumgebung testen. So können Sie sicherstellen, dass Ihre Daten für autorisierte Nutzer zugänglich und vor unbefugtem Zugriff geschützt sind.

Sie haben folgende Möglichkeiten, Ihre Regeln zu testen:

Anwendungstests: Interagieren Sie mit Ihrer bereitgestellten Anwendung, führen Sie Vorgänge aus, die verschiedene Datenzugriffsmuster (Lesen, Schreiben, Löschen) für verschiedene Nutzerrollen oder ‑status auslösen. Mit diesen Tests in der Praxis können Sie bestätigen, dass Ihre Regeln korrekt durchgesetzt werden.
Regelsimulator: Für gezielte Prüfungen können Sie den Regelsimulator in der Firebase Console verwenden. Mit diesem Tool können Sie Anfragen (Lesen, Schreiben, Löschen) für Ihre Cloud Firestore Datenbank mit Ihren Produktionsregeln simulieren. Sie können den Authentifizierungsstatus des Nutzers, 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öffentlichungs prozesses oder mit der Firebase CLI bereitstellen, werden mit den in Ihrem Projektverzeichnis definierten Regeln alle vorhandenen Regeln in der Firebase Console ü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.
Unittests: Für umfassendere Tests können Sie Unittests für Ihre Sicherheits regeln schreiben. Mit dem Firebase Studio Vorschau-Backend, das von der Firebase Local Emulator Suite unterstützt wird, können Sie diese Tests lokal ausführen, das Verhalten Ihrer Produktionsregeln simulieren. So können Sie komplexe Regel-Logik zuverlässig prüfen und die Abdeckung für verschiedene Szenarien bestätigen. Nach der Bereitstellung sollten Sie noch einmal prüfen, ob Ihre Unittests mit dem Emulator wie erwartet funktionieren und alle Szenarien abdecken.