Diese Seite wurde von der Cloud Translation API übersetzt.

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

In diesem Leitfaden erfahren Sie, wie Sie mit App Prototyping agentFirebase� Sie verwenden einen Prompt in natürlicher Sprache, um eine Next.js-App zu generieren, die Lebensmittel auf einem Bild oder über eine In-Browser-Kamera erkennt, die von einem angemeldeten Nutzer bereitgestellt wird, und ein Rezept mit den erkannten Zutaten generiert. Nutzer können das Rezept dann in einer durchsuchbaren Datenbank speichern.

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

Weitere Technologien, die Sie in dieser Anleitung verwenden, 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 genau wie möglich formulieren. Geben Sie die gewünschten Funktionen, Nutzer-Workflows und Datenanforderungen an. Optional: Klicken Sie auf Prompt optimieren, um Gemini zu bitten, Ihren ursprünglichen Prompt zu verfeinern. 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 Ihren Prompt ergänzt. Sie können beispielsweise ein Bild mit dem Farbschema hochladen, das für Ihre App verwendet werden soll, und Firebase Studio anweisen, es zu verwenden. Bilder dürfen maximal 3 MiB groß sein.
Klicken Sie auf Mit KI Prototypen erstellen.

Der App Prototyping-Agent generiert anhand Ihres Prompts einen App-Blueprint mit einem vorgeschlagenen App-Namen, erforderlichen Funktionen und Stilrichtlinien.
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 die Vorlage direkt. Nehmen Sie die gewünschten Änderungen vor und klicken Sie auf Speichern.
- Fügen Sie im Chatbereich im Feld Beschreiben Sie... erläuternde Fragen und Kontext hinzu. Sie können auch zusätzliche Bilder hochladen.
Klicken Sie auf Prototype this app (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 Produktion. Geben Sie keine personenidentifizierbaren Informationen oder Nutzerdaten in den Chat ein.
Der App Prototyping-Agent beginnt mit dem Programmieren 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, 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, debuggen und iterieren

Nachdem die erste App generiert wurde, können Sie sie testen, optimieren, 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 App Prototyping agent bitten, mithilfe von 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 Cloud Firestore und Firebase Authentication während der Iterationsphase zu Ihrer App hinzufügen, nicht im ursprünglichen App-Konzept.
Fehler sofort beheben:In den meisten Fällen werden Sie von App Prototyping agent aufgefordert, alle auftretenden Fehler zu beheben. Klicken Sie auf Fehler beheben, damit versucht wird, den Fehler zu beheben.

Wenn Sie Fehler erhalten, die nicht automatisch behoben werden, 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, aber Sie können es 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.

Während Sie sich in Prototyper view, you can also use the following features: befinden
- Klicken Sie auf Vermerke, um direkt im Vorschaufenster zu zeichnen. Verwenden Sie die verfügbaren Tools für Formen, Bilder und Text sowie einen optionalen Text-Prompt, um visuell zu beschreiben, was App Prototyping agent ändern soll.
- 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:Der 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 die Schaltfläche 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 App-Vorschaubereich ein Bild mit verschiedenen Lebensmitteln hoch, um zu testen, ob Ihre App die Zutaten erkennen 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 App Prototyping agent auffordern, Cloud Firestore hinzuzufügen, werden die Cloud Firestore-Datenbankregeln für Sie geschrieben und bereitgestellt. Sehen Sie sich die Regeln in der Firebase-Konsole an.
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 ändern. Sie können zu Prototyper mode at any time. 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 Gemini (beides ist standardmäßig verfügbar). Im interaktiven Chat können Probleme diagnostiziert, Lösungen bereitgestellt und Tools ausgeführt werden, 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 Prototyper chat in Code view. To use Gemini interactive chat. Klicken Sie unter Gemini auf + und wählen Sie dann Neuer Chat aus. Zurück zu Prototyper chat, click history Recent chats, and then choose Prototyper chat.
- Greifen Sie auf 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 Abschnitt.
  3. Klicken Sie in der Spalte Aktionen, die Port 4000 entspricht, auf In neuem Fenster öffnen.
Leistung Ihrer Funktion mit generativer KI testen und messen:Mit der Genkit-Entwickler-UI können Sie Ihre Genkit-KI-Flows ausführen, testen, debuggen, mit verschiedenen Modellen interagieren und Ihre Prompts optimieren.

So laden Sie Ihre Genkit-Flows in die 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 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-Entwicklertools.

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, 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.Firebase Studio

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 beim Klicken auf Veröffentlichen in Ihrem Namen ein Firebase-Projekt bereit. 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 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. Es wurde entweder beim automatischen Generieren eines Gemini API-Schlüssels oder beim Klicken auf Veröffentlichen erstellt.

Wichtig:Für Firebase App Hosting ist ein Cloud Billing-Konto erforderlich. Wenn Sie ein Rechnungskonto mit einem Firebase-Projekt verknüpfen, wird Ihr Projekt automatisch auf den Blaze-Tarif (Pay as you go) umgestellt. Ihre Gemini API und die Nutzung anderer Firebase- und Google Cloud-Dienste werden 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. Der App Prototyping-Agent beginnt mit der Bereitstellung von Firebase-Diensten.
Klicken Sie auf Jetzt veröffentlichen. Mit Firebase Studio werden Firebase-Dienste eingerichtet und dann der App Hosting-Roll-out gestartet. Dieser Schritt 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 wie 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.

Cloud Firestore- und Firebase Authentication-Daten in der Firebase Console 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ü Entwickeln > 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-Konsole und wählen Sie im Navigationsmenü Build > Authentifizierung 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 unberechtigtem 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. Mit diesen Tests in der Praxis lässt sich 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 die 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.