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

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

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

Weitere Technologien, die Sie im Rahmen dieses Leitfadens verwenden werden:

Schritt 1: App generieren

  1. Melden Sie sich in Ihrem Google-Konto an und öffnen Sie Firebase Studio.

  2. 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önnten 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.

  3. Optional können Sie ein Bild hochladen, das zusammen mit Ihrem Prompt verwendet werden soll. Sie können beispielsweise ein Bild hochladen, das das Farbschema enthält, das Ihre App verwenden soll, und Firebase Studio anweisen, es zu verwenden. Bilder müssen kleiner als 3 MiB sein.

  4. Klicken Sie auf Prototyp mit KI erstellen.

    App Prototyping agent generiert anhand Ihres Prompts einen App-Entwurf und gibt einen vorgeschlagenen App-Namen, erforderliche Funktionen und Stilrichtlinien zurück.

  5. Sehen Sie sich den Blueprint an. Nehmen Sie bei Bedarf Ä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 Feld Beschreiben… im Chatbereich klärende Fragen und Kontext hinzu. Sie können auch zusätzliche Bilder hochladen.

  6. Klicken Sie auf Prototype this app (Prototyp dieser App erstellen).

  7. 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, stellt die App Prototyping agent ein Firebase-Projekt und einen Gemini API-Schlüssel für Sie bereit.

Schritt 2: Testen, optimieren, Fehler beheben und iterieren

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

  • App prüfen und mit ihr interagieren: Nach Abschluss der Codegenerierung wird eine Vorschau Ihrer App angezeigt. Sie können direkt mit der Vorschau interagieren, um sie zu testen. Vorschau Ihrer App

  • Cloud Firestore und Firebase Authentication hinzufügen: 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. Geben Sie Nutzern beispielsweise die Möglichkeit, Rezepte zu speichern und herunterzuladen, indem Sie einen Prompt wie den folgenden verwenden:

    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.

  • Fehler beheben, sobald sie auftreten: In den meisten Fällen werden Sie von der App Prototyping agent aufgefordert, alle auftretenden Fehler zu beheben. Klicken Sie auf Fehler beheben, um einen Fehlerbehebungsversuch zu starten.

    Wenn Sie Fehler erhalten, die Sie nicht automatisch beheben können, kopieren Sie den Fehler und den relevanten Kontext (z. B. „Können Sie diesen Fehler in meinem Firebase-Initialisierungscode beheben?“) in das Chatfenster und senden Sie ihn an Gemini.

  • Mit natürlicher Sprache testen und iterieren: Testen Sie Ihre Anwendung gründlich und arbeiten Sie mit dem App Prototyping agent zusammen, um den Code und den Blueprint zu iterieren, bis Sie mit dem Ergebnis zufrieden sind.

    In der Ansicht Prototyper können Sie auch die folgenden Funktionen verwenden:

    • Klicken Sie auf Symbol „Anmerkung hinzufügen“ Anmerken, um direkt im Vorschaufenster zu zeichnen. Verwenden Sie die verfügbaren Formen-, Bild- und Texttools zusammen mit einem optionalen Text-Prompt, um visuell zu beschreiben, was App Prototyping agent ändern soll.

    • Klicken Sie auf Symbol auswählen Auswählen, um ein bestimmtes Element auszuwählen, und geben Sie Anweisungen für die App Prototyping agent ein. So können Sie schnell ein bestimmtes Symbol, eine Schaltfläche, einen Text oder ein anderes Element anvisieren. Wenn Sie auf ein Bild klicken, können Sie auch ein Stockfoto von Unsplash suchen und auswählen.

    Optional können Sie auf Symbol „Link“ Vorschaulink teilen klicken, um Ihre Anwendung mithilfe von Firebase Studio öffentlichen Vorschauen öffentlich und vorübergehend freizugeben.

  • Firebase-Projekt erstellen: Die App Prototyping agent stellt in Ihrem Namen ein Firebase-Projekt bereit, wenn Sie:

    • Gemini API-Schlüssel automatisch generieren
    • Verknüpfung Ihrer App mit einem Firebase-Projekt anfordern
    • Bitten Sie um 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 im App Prototyping agent die Projekt-ID ein, die Sie stattdessen verwenden möchten. Beispiel: „Zum Firebase-Projekt mit der ID <your-project-id> wechseln.“

  • App testen und Cloud Firestore-Datenbankregeln prüfen: Laden Sie im Vorschaubereich der App ein Bild mit verschiedenen Lebensmitteln hoch, um zu testen, ob die 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, werden Cloud Firestore-Datenbankregeln für Sie geschrieben und bereitgestellt. Prüfen Sie die Regeln in der Firebase-Console.

  • Direkt im Code debuggen und iterieren: Klicken Sie auf Symbol für Code-Switching Zum Code wechseln, um die Ansicht Code zu öffnen. Dort können Sie alle Dateien Ihrer App sehen und Ihren Code direkt ändern. Sie können jederzeit wieder in den Prototyper-Modus wechseln.

    In der Ansicht Code können Sie auch die folgenden hilfreichen Funktionen verwenden:

    • Firebase StudioIntegrierte Debugging- und Berichtsfunktionen zum Prüfen, Debuggen und Auditieren Ihrer App.

    • KI-Unterstützung mit Gemini entweder inline in Ihrem Code oder über den interaktiven Chat von Gemini (beide sind standardmäßig verfügbar). Der interaktive Chat kann Probleme diagnostizieren, Lösungen anbieten und Tools ausführen, mit denen Sie Ihre Anwendung schneller reparieren können. Klicken Sie unten im Arbeitsbereich auf sparkGemini, um auf den Chat zuzugreifen.

    • Auf die Firebase Local Emulator Suite zugreifen, um Datenbank- und Authentifizierungsdaten aufzurufen. So öffnen Sie den Emulator in Ihrem Arbeitsbereich:

      1. Klicken Sie auf Symbol für Code-Switching 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 für Port 4000 auf In neuem Fenster öffnen.

  • Leistung Ihrer generativen KI-Funktionen testen und messen: Mit dem Genkit Developer UI können Sie Ihre Genkit-KI-Abläufe ausführen, testen, debuggen, mit verschiedenen Modellen interagieren, Ihre Prompts verfeinern und vieles mehr.

    So laden Sie Ihre Genkit-Abläufe in die Genkit Developer UI und starten den Test:

    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 Abläufen, Prompts, Embeddern und einer Auswahl verschiedener verfügbarer Modelle geöffnet.

    Weitere Informationen zum Genkit Developer UI finden Sie unter Genkit-Entwicklertools.

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

Nachdem Sie Ihre Anwendung 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 (sofern 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:

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

  2. Im Schritt Firebase-Projekt wird in der App Prototyping agent das Firebase-Projekt angezeigt, das mit dem Arbeitsbereich verknüpft ist. Wenn noch kein Firebase-Projekt vorhanden ist, erstellt App Prototyping agent ein neues Projekt für Sie. Klicken Sie auf Weiter, um fortzufahren.

  3. 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-Konsole geöffnet, in der Sie ein neues Selfservice-Cloud Billing-Konto erstellen können. Kehren Sie nach dem Erstellen des Kontos zu Firebase Studio zurück und wählen Sie das Konto aus der Liste Cloud Billing verknüpfen aus.

  4. Klicken Sie auf Weiter. Firebase Studio verknüpft das Rechnungskonto mit dem Projekt, das mit Ihrem Arbeitsbereich verknüpft ist. Dieses Projekt wurde entweder erstellt, als Sie einen Gemini API-Schlüssel automatisch generiert haben, oder als Sie auf Veröffentlichen geklickt haben.

  5. Klicken Sie auf Dienste einrichten. App Prototyping agent beginnt mit der Bereitstellung von Firebase-Diensten.

  6. Klicken Sie auf Jetzt veröffentlichen. Firebase Studio richtet Firebase-Dienste ein und startet dann den Roll-out von App Hosting. Dieser Vorgang kann mehrere Minuten dauern. Weitere Informationen zu den Vorgängen hinter den Kulissen finden Sie unter Der App Hosting-Build-Prozess.

  7. Wenn der Veröffentlichungsschritt abgeschlossen ist, wird die App-Übersicht mit einer URL und App-Statistiken angezeigt, die auf der App Hosting-Beobachtbarkeit basieren. Wenn Sie eine benutzerdefinierte Domain (z. B. example.com oder app.example.com) anstelle der von Firebase generierten Domain 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 Produktion getestet werden.

Indexe für Ihre Cloud Firestore-Datenbank generieren

Wenn Sie Ihre Anwendung 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.

Dies kann in Fehlermeldungen oder in der Entwicklerkonsole Ihres Browsers angezeigt werden.

So generieren Sie Indexe nach der Veröffentlichung:

  1. Aus einer veröffentlichten App: Suchen Sie im Bereich App-Übersicht (klicken Sie auf Veröffentlichen, wenn er nicht sichtbar ist) den Link App aufrufen und klicken Sie darauf.

    In der Firebase Studio-Vorschau: Öffnen Sie die Entwicklerkonsole Ihres Browsers und suchen Sie nach der Fehlermeldung 200, die von Cloud Firestore generiert wird.

  2. Testen Sie alle Abläufe in Ihrer App. Möglicherweise wird eine Fehlermeldung wie „Fehler beim Laden der Rezepte“ angezeigt. Für die Abfrage ist ein Index erforderlich. Sie können es hier erstellen:" mit einem Link zur Firebase-Konsole.

  3. Folgen Sie dem Link, um zur Firebase-Konsole zu gelangen. Dort wird ein empfohlener Index angezeigt.

  4. Klicken Sie auf Speichern, um den empfohlenen Index zu akzeptieren.

  5. Kehren Sie zu Ihrer Anwendung zurück und aktualisieren Sie die Seite.

  6. 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 sich in der Firebase-Konsole Live-Daten aus Ihrer App ansehen.

  • Wenn Sie Ihre aktive Cloud Firestore-Datenbank aufrufen 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 findest du unter Cloud Firestore.

  • Wenn Sie Ihre Firebase Authentication-Live-Daten aufrufen möchten, öffnen Sie die Firebase-Konsole und wählen Sie im Navigationsmenü Erstellen > Authentifizierung aus.

    Hier können Sie Ihre Authentifizierungskonfiguration und App-Nutzer prüfen. Weitere Informationen findest du 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 können Sie dafür sorgen, dass Ihre Daten für autorisierte Nutzer zugänglich und vor unbefugtem Zugriff geschützt sind.

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

  • Anwendungstests: 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 können Sie prüfen, ob Ihre Regeln auch tatsächlich korrekt angewendet werden.

  • Regelsimulator: Verwenden Sie für gezielte Prüfungen den Regelsimulator in der Firebase Console. Mit diesem Tool können Sie Anfragen (Lese-, Schreib- und Löschvorgänge) an Ihre Cloud Firestore-Datenbank simulieren und dabei Ihre Produktionsregeln verwenden. Sie können den Status der Nutzerauthentifizierung, den Pfad zu den Daten und den Vorgangstyp angeben, um zu prüfen, ob Ihre Regeln den Zugriff wie vorgesehen zulassen oder ablehnen.

  • Unittests: Für umfassendere Tests können Sie Unittests für Ihre Sicherheitsregeln schreiben. Mit dem Firebase Studio-Vorschaubackend, das von der Firebase Local Emulator Suite unterstützt wird, können Sie diese Tests lokal ausführen und das Verhalten Ihrer Produktionsregeln simulieren. Dies ist eine zuverlässige Methode, um komplexe Regellogik zu überprüfen und die Abdeckung für verschiedene Szenarien zu bestätigen. Nach der Bereitstellung sollten Sie noch einmal prüfen, ob Ihre Unit-Tests mit dem Emulator wie erwartet funktionieren und alle Szenarien abdecken.