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 und ein Rezept mit den erkannten Zutaten generiert.

Weitere Technologien, die Sie in dieser Anleitung 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-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.

  3. 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.

  4. Klicken Sie auf Prototyp mit KI erstellen.

    Gemini generiert anhand Ihres Prompts einen App-Entwurf mit einem vorgeschlagenen App-Namen, erforderlichen Funktionen und Stilrichtlinien.

  5. 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 Feld Beschreiben Sie... im Chatbereich klärende Fragen und Kontext hinzu. Sie können auch zusätzliche Bilder hochladen.

  6. Klicken Sie auf Prototype this app (Prototyp für diese 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, wird im App Prototyping agent ein Firebase-Projekt und ein Gemini API-Schlüssel für Sie bereitgestellt.

Schritt 2: Testen, optimieren, debuggen und iterieren

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

  • App ansehen und mit ihr interagieren:Nach Abschluss der Code-Generierung wird eine Vorschau Ihrer App angezeigt. Sie können direkt mit der Vorschau interagieren, um sie zu testen. Weitere Informationen

  • 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.

  • 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 mode, you can also use the following features: befinden

    • Klicken Sie auf Symbol „Anmerkung hinzufügen“ 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 App Prototyping agent ändern soll.

    • Klicken Sie auf Symbol auswählen 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 Link-Symbol Vorschaulink freigeben klicken, um Ihre App vorübergehend öffentlich über Firebase Studio öffentliche Vorschauen freizugeben.

  • Direkt im Code debuggen und iterieren:Klicken Sie auf Symbol für Sprachwechsel 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 zu Prototyper mode at any time. zurückkehren.

    In der Code-Ansicht können Sie auch die folgenden nützlichen Funktionen verwenden:

  • Leistung Ihrer Funktion mit generativer KI testen und messen:Mit der Genkit-Entwickler-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-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 Developer Tools.

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 erstellt wurde). Außerdem werden Sie durch die Verknüpfung eines Cloud Billing-Kontos geführt.Firebase Studio

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 App Prototyping agent die mit dem Arbeitsbereich verknüpfte Firebase-Instanz angezeigt. Wenn bei der Gemini API-Schlüsselgenerierung kein Projekt erstellt wurde, wird ein neues Projekt für Sie erstellt. 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 Self-Service-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 Abrechnungskonto 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.

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

  6. Klicken Sie auf Jetzt veröffentlichen. Mit Firebase Studio werden Firebase-Dienste eingerichtet. Dies kann einige Minuten dauern. Weitere Informationen dazu, was im Hintergrund passiert, finden Sie unter Der App Hosting-Build-Prozess.

    Wenn Sie nicht sofort veröffentlichen möchten, können Sie auf Später veröffentlichen klicken.

  7. Wenn der Veröffentlichungsschritt abgeschlossen ist, wird die App-Übersicht mit einer URL und App-Insights 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 6: Firebase App Check in Ihre App einfügen

Wenn Sie Firebase- oder Google Cloud-Dienste in Ihre App eingebunden haben, schützt Firebase App Check Ihre App-Backends vor Missbrauch, indem nicht autorisierte Clients daran gehindert werden, auf Ihre Firebase-Ressourcen zuzugreifen. Es funktioniert sowohl mit Google-Diensten (einschließlich Firebase- und Google Cloud-Diensten) als auch mit Ihren eigenen benutzerdefinierten Back-Ends, um Ihre Ressourcen zu schützen.

Wir empfehlen, App Check zu jeder App hinzuzufügen, die Sie öffentlich posten, um Ihre Backend-Ressourcen vor Missbrauch zu schützen.

In diesem Abschnitt erfahren Sie, wie Sie App Check in Firebase Studio mit reCAPTCHA Enterprise für eine Web-App einrichten, die von App Prototyping agent erstellt wurde. Sie können App Check jedoch in jeder App einrichten, in der Firebase-Dienste und benutzerdefinierte Anbieter implementiert werden können. Weitere Informationen finden Sie unter Firebase App Check.

Mit reCAPTCHA Enterprise erhalten Sie bis zu 10.000 kostenlose Prüfungen.

Schritt 1: reCAPTCHA Enterprise für Ihre App einrichten

  1. Öffnen Sie in der Google Cloud-Konsole den Bereich reCAPTCHA Enterprise.

  2. Wählen Sie in der Projektauswahl der Google Cloud-Konsole den Namen Ihres Firebase-Projekts aus.

  3. Wenn Sie aufgefordert werden, die reCAPTCHA Enterprise API zu aktivieren, tun Sie dies.

  4. Klicken Sie auf Jetzt starten und fügen Sie einen Anzeigenamen für Ihren reCAPTCHA-Siteschlüssel hinzu.

  5. Übernehmen Sie den Standardschlüssel für den Anwendungstyp Web.

  6. Klicken Sie auf Domain hinzufügen und fügen Sie eine Domain hinzu. Fügen Sie Ihre App Hosting-Domain (z. B. studio--PROJECT_ID.REGION.hosted.app) und alle benutzerdefinierten Domains hinzu, die Sie mit Ihrer App verwenden oder verwenden möchten.

  7. Klicken Sie auf Nächster Schritt.

  8. Lassen Sie Möchten Sie Aufgaben verwenden? deaktiviert.

  9. Klicken Sie auf Schlüssel erstellen.

  10. Kopieren und speichern Sie Ihre Schlüssel-ID und fahren Sie mit App Check konfigurieren fort.

Schritt 2: App Check konfigurieren

  1. Öffnen Sie die Firebase-Konsole und klicken Sie im Navigationsmenü auf Build > App Check.

  2. Klicken Sie auf Jetzt starten und dann neben Ihrer App auf Registrieren.

  3. Klicken Sie, um ReCAPTCHA zu maximieren, und fügen Sie die Schlüssel-ID ein, die Sie für reCAPTCHA Enterprise generiert haben.

  4. Klicken Sie auf Speichern.

Schritt 3: App Check in den Code einfügen

  1. Kehren Sie zu Firebase Studio zurück und fügen Sie in der Ansicht Code den generierten Website-Schlüssel in die Datei .env ein:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Wenn Sie Ihre Firebase-Konfiguration noch nicht in .env gespeichert haben, rufen Sie sie ab:

    • Öffnen Sie in der Firebase-Konsole die Projekteinstellungen und suchen Sie den Abschnitt, der Ihrer App entspricht.

    • Über das Terminal in der Ansicht Code:

      1. Melden Sie sich in Firebase an: firebase auth login
      2. Wählen Sie Ihr Projekt aus: firebase use FIREBASE_PROJECT_ID
      3. Firebase-Konfiguration abrufen: firebase apps:sdkconfig

  3. Fügen Sie die Konfiguration in Ihre .env-Datei ein, sodass sie so aussieht:

    NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  4. Fügen Sie Ihrem App-Code App Check hinzu. Sie können Gemini bitten, App Check mit reCAPTCHA Enterprise zu Ihrer App hinzuzufügen (geben Sie unbedingt „reCAPTCHA Enterprise“ an und überprüfen Sie die Angabe noch einmal). Alternativ können Sie die Schritte unter App Check initialisieren ausführen.

  5. Veröffentlichen Sie Ihre Website noch einmal unter App Hosting. Testen Sie Ihre Firebase-Funktionen, um einige Daten zu generieren.

  6. Prüfen Sie, ob App Check Anfragen in der Firebase-Konsole empfängt. Öffnen Sie dazu Build > App Check.

  7. Klicken Sie hier, um Firebase-Dienste zu prüfen. Nachdem Sie bestätigt haben, dass Anfragen eingehen, klicken Sie auf Erzwingen, um App Check zu erzwingen.

  8. Wiederholen Sie die Überprüfung und Durchsetzung für Firebase Authentication.

Wenn Sie Ihre App nach der Registrierung für App Check in einer Umgebung ausführen möchten, die normalerweise nicht als gültig eingestuft wird, z. B. lokal während der Entwicklung oder in einer Umgebung für kontinuierliche Integration (CI), können Sie einen Debug-Build Ihrer App erstellen, der anstelle eines echten Attestierungsanbieters den App Check-Debug-Anbieter verwendet.App Check Weitere InformationenApp Check

Schritt 7 (optional): App überwachen

Im Bereich App-Übersicht in Firebase Studio finden Sie wichtige Messwerte und Informationen zu Ihrer App. So können Sie die Leistung Ihrer Web-App mit den integrierten Observability-Tools von App Hosting im Blick behalten. Nachdem Ihre Website eingeführt wurde, können Sie auf die Übersicht zugreifen, indem Sie auf Veröffentlichen klicken. In diesem Bereich haben Sie folgende Möglichkeiten:

  • Klicken Sie auf Veröffentlichen, um eine neue Version Ihrer App zu veröffentlichen.
  • Teilen Sie den Link zu Ihrer App oder öffnen Sie Ihre App direkt unter App aufrufen.
  • Hier finden Sie eine Zusammenfassung der Leistung Ihrer App in den letzten 7 Tagen, einschließlich der Gesamtzahl der Anfragen und des Status Ihres letzten Roll-outs. Klicken Sie auf Details ansehen, um noch mehr Informationen in der Firebase-Konsole aufzurufen.
  • Sehen Sie sich ein Diagramm mit der Anzahl der Anfragen an, die Ihre App in den letzten 24 Stunden erhalten hat, aufgeschlüsselt nach HTTP-Statuscode.

Wenn Sie das Feld „App-Übersicht“ schließen, können Sie es jederzeit wieder öffnen, indem Sie auf Veröffentlichen klicken.

Weitere Informationen zum Verwalten und Überwachen von App Hosting-Roll-outs

(Optional) Schritt 8: Bereitstellung zurücksetzen

Wenn Sie aufeinanderfolgende Versionen Ihrer App in App Hosting bereitgestellt haben, können Sie ein Rollback auf eine der früheren Versionen durchführen. Sie können sie auch entfernen.

  • So führen Sie ein Rollback für eine veröffentlichte Website durch:

    1. Öffnen Sie App Hosting in der Firebase-Konsole.

    2. Suchen Sie das Backend Ihrer App, klicken Sie auf Ansehen und dann auf Rollouts.

    3. Klicken Sie neben dem Deployment, zu dem Sie ein Rollback durchführen möchten, auf das Dreipunkt-Menü , wählen Sie Rollback zu diesem Build durchführen aus und bestätigen Sie die Auswahl.

    Weitere Informationen

  • So entfernen Sie Ihre App Hosting-Domain aus dem Web:

    1. Öffnen Sie in der Firebase-Konsole die App Hosting und klicken Sie im Bereich der Firebase Studio-App auf Anzeigen.

    2. Klicken Sie im Abschnitt Backend-Informationen auf Verwalten. Die Seite Domains wird geladen.

    3. Klicken Sie neben Ihrer Domain auf das Dreipunkt-Menü und wählen Sie Domain deaktivieren aus. Bestätigen Sie die Auswahl.

    Dadurch wird Ihre Domain aus dem Web entfernt. Wenn Sie Ihr App Hosting-Backend vollständig entfernen möchten, folgen Sie der Anleitung unter Backend löschen.

(Optional) Schritt 9: Genkit Monitoring für bereitgestellte Funktionen verwenden

Sie können die Schritte, Eingaben und Ausgaben Ihrer Genkit-Funktion überwachen, indem Sie die Telemetrie für Ihren KI-Flow-Code aktivieren. Mit der Telemetriefunktion von Genkit können Sie die Leistung und Nutzung Ihrer KI-Flows überwachen. Anhand dieser Daten können Sie Verbesserungsmöglichkeiten erkennen, Probleme beheben, Ihre Prompts und Flows für eine bessere Leistung und Kosteneffizienz optimieren und die Nutzung Ihrer Flows im Zeitverlauf verfolgen.

Um das Monitoring in Genkit einzurichten, fügen Sie den Genkit-KI-Flows Telemetrie hinzu und rufen die Ergebnisse dann in der Firebase-Konsole auf.

Schritt 1: Telemetrie zu Ihrem Genkit-Ablaufcode in Firebase Studio hinzufügen

So richten Sie das Monitoring in Ihrem Code ein:

  1. Wenn Sie sich noch nicht in der Code-Ansicht befinden, klicken Sie auf Symbol für Sprachwechsel Zum Code wechseln, um sie zu öffnen.

  2. Prüfen Sie in package.json, welche Version von Genkit installiert ist.

  3. Öffnen Sie das Terminal (Ctrl-Shift-C oder Cmd-Shift-C unter MacOS).

  4. Klicken Sie in das Terminal und installieren Sie das Firebase-Plug-in mit der Version, die Ihrer package.json-Datei entspricht. Wenn die Genkit-Pakete in Ihrem package.json beispielsweise die Version 1.0.4 haben, sollten Sie den folgenden Befehl ausführen, um das Plug-in zu installieren:

    npm i --save @genkit-ai/firebase@1.0.4

  5. Maximieren Sie im Explorer src > ai > flows. Im Ordner flows werden eine oder mehrere TypeScript-Dateien mit Ihren Genkit-Abläufen angezeigt.

  6. Klicken Sie auf einen der Abläufe, um ihn zu öffnen.

  7. Fügen Sie unten im Importabschnitt der Datei Folgendes hinzu, um FirebaseTelemetry zu importieren und zu aktivieren:

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

Schritt 2: Berechtigungen einrichten

Firebase Studio hat die erforderlichen APIs für Sie aktiviert, als Ihr Firebase-Projekt eingerichtet wurde. Sie müssen aber auch Berechtigungen für das Dienstkonto App Hosting bereitstellen.

So richten Sie Berechtigungen ein:

  1. Öffnen Sie die Google Cloud-IAM-Konsole, wählen Sie Ihr Projekt aus und weisen Sie dem App-Hosting-Dienstkonto die folgenden Rollen zu:

    • Monitoring-Messwert-Autor (roles/monitoring.metricWriter)
    • Cloud Trace-Agent (roles/cloudtrace.agent)
    • Log-Autor (roles/logging.logWriter)

  2. Veröffentlichen Sie Ihre App noch einmal bei App Hosting.

  3. Wenn die Veröffentlichung abgeschlossen ist, laden Sie Ihre App und beginnen Sie mit der Nutzung. Nach fünf Minuten sollte Ihre App mit der Protokollierung von Telemetriedaten beginnen.

Schritt 3: Funktionen basierend auf generativer KI in der Firebase-Konsole im Blick behalten

Wenn die Telemetrie konfiguriert ist, erfasst Genkit die Anzahl der Anfragen, den Erfolg und die Latenz für alle Ihre Abläufe. Für jeden einzelnen Ablauf erfasst Genkit Stabilitätsmesswerte, zeigt detaillierte Diagramme an und protokolliert erfasste Traces.

So überwachen Sie Ihre mit Genkit implementierten KI-Funktionen:

  1. Öffnen Sie nach fünf Minuten Genkit in der Firebase-Konsole und sehen Sie sich die Prompts und Antworten von Genkit an.

    Genkit stellt die folgenden Stabilitätsmesswerte zusammen:

    • Anfragen insgesamt:Die Gesamtzahl der Anfragen, die von Ihrem Ablauf empfangen wurden.
    • Erfolgsrate:Der Prozentsatz der Anfragen, die erfolgreich verarbeitet wurden.
    • Latenz des 95. Perzentils:Die Latenz des 95. Perzentils Ihres Ablaufs. Das ist die Zeit, die für die Verarbeitung von 95% der Anfragen benötigt wird.

    • Tokennutzung:

      • Eingabetokens: Die Anzahl der Tokens, die in der Aufforderung an das Modell gesendet wurden.
      • Ausgabetokens: Die Anzahl der Tokens, die vom Modell in der Antwort generiert wurden.

    • Bildnutzung:

      • Eingabebilder:Die Anzahl der Bilder, die im Prompt an das Modell gesendet wurden.
      • Ausgabebilder:Die Anzahl der Bilder, die vom Modell in der Antwort generiert wurden.

    Wenn Sie Stabilitätsmesswerte maximieren, sind detaillierte Diagramme verfügbar:

    • Anfragevolumen im Zeitablauf.
    • Erfolgsquote im Zeitverlauf.
    • Eingabe- und Ausgabetokens im Zeitverlauf.
    • Latenz (95. und 50. Perzentil) im Zeitverlauf.

Weitere Informationen zu Genkit finden Sie unter Genkit.

Nächste Schritte