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

In diesem Leitfaden erfahren Sie, wie Sie mithilfe von App Prototyping agent und Gemini in Firebase schnell eine Full-Stack-Anwendung entwickeln und veröffentlichen. Sie verwenden einen Prompt in natürlicher Sprache, um eine Next.js-App zu generieren, die Lebensmittel anhand eines Bildes oder einer In-Browser-Kamera erkennt und ein Rezept mit den erkannten Zutaten bereitstellt. Anschließend optimieren und verbessern Sie die App und veröffentlichen sie schließlich bei Firebase App Hosting.

Weitere Technologien, die Sie in diesem Leitfaden 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 Prototyp einer App mit KI erstellen eine Beschreibung der App ein, die Sie erstellen möchten. Für diese Lösung, bei der Sie eine bildbasierte Rezept-App erstellen, können Sie einen Prompt wie den folgenden verwenden, um einen Prototyp für eine App zu erstellen, die die Kamera und generative KI verwendet:

    Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.

  3. Klicken Sie auf Mit KI einen Prototyp erstellen.

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

  4. Sehen Sie sich den Blueprint an und nehmen Sie 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 Chatfeld im Feld Beschreiben… Erläuterungen und Kontext hinzu. Sie können auch zusätzliche Bilder hochladen.

  5. Klicken Sie auf Prototyp dieser App erstellen. Gemini beginnt mit dem Codieren Ihrer App. Da in der App-Beschreibung Funktionen beschrieben wurden, für die generative KI erforderlich ist, werden Sie von Gemini aufgefordert, einen Gemini API-Schlüssel anzugeben.

  6. Fügen Sie einen eigenen Gemini API-Schlüssel hinzu oder klicken Sie auf Automatisch generieren, um einen Gemini API-Schlüssel zu generieren.

Schritt 2: Testen, optimieren, debuggen und iterieren

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

  1. App ansehen und damit interagieren:Nach Abschluss der Codegenerierung wird eine Vorschau Ihrer App angezeigt. Sie können direkt mit der Vorschau interagieren, um sie zu testen.

  2. App mit natürlicher Sprache iterieren:Verwenden Sie weiterhin die Chatoberfläche, um Gemini zu bitten, Funktionen hinzuzufügen und die App zu optimieren.

  3. App testen:Laden Sie im Vorschaubereich der App ein Bild mit verschiedenen Lebensmitteln hoch, um zu testen, ob Ihre App die Zutaten erkennen und ein Rezept bereitstellen kann. Optional können Sie Ihre App mit der Code-Ansicht öffentlich freigeben und vorübergehend mit Firebase Studio öffentlichen Vorschauen.

  4. Direkt im Code Fehler beheben und iterieren:Klicken Sie auf Symbol für Code-Umschalter Zu 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 jederzeit zu Prototyper mode at any time. wechseln.

    In der Code-Ansicht stehen Ihnen außerdem die folgenden hilfreichen Funktionen zur Verfügung:

    • Integrierte Debugging- und Berichtsfunktionen von Firebase Studio zum Prüfen, Debuggen und Überwachen Ihrer App.

    • KI-Unterstützung mit Gemini in Firebase entweder inline in Ihrem Code oder über einen interaktiven Chat (beides standardmäßig verfügbar). Im interaktiven Chat können Probleme diagnostiziert, Lösungen angeboten und Tools ausgeführt werden, mit denen Sie Ihre App schneller beheben können. Klicken Sie unten im Arbeitsbereich auf SparkGemini, um auf den Chat zuzugreifen.

Optionaler Schritt 3: App mit App Hosting veröffentlichen

Wenn Sie die App getestet haben und mit ihr zufrieden sind, können Sie sie mit Firebase App Hosting im Web veröffentlichen.

Für

Wenn Sie App Hosting einrichten, erstellt Firebase Studio ein Firebase-Projekt für Sie und führt Sie durch die Verknüpfung eines Cloud Billing-Kontos.

So veröffentlichen Sie Ihre App bei Firebase App Hosting:

  1. Klicken Sie auf Veröffentlichen, um ein neues Firebase-Projekt zu erstellen und mit der App HostingEinrichtung zu beginnen. Der Bereich App veröffentlichen wird angezeigt.

  2. Notieren Sie sich im Schritt Firebase-Projekt den Namen des Firebase-Projekts, das für Sie erstellt wurde, und klicken Sie dann auf Weiter.

  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 noch kein Cloud Billing-Konto haben oder ein neues erstellen möchten, klicken Sie auf Cloud Billing-Konto erstellen. Daraufhin wird die Google Cloud-Konsole geöffnet, in der Sie ein neues Selfservice-Cloud Billing-Konto erstellen können. Nachdem Sie das Konto erstellt haben, kehren Sie zu Firebase Studio zurück und wählen Sie es in 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. Es wird entweder erstellt, wenn Sie einen Gemini API-Schlüssel automatisch generiert haben, oder wenn Sie auf Veröffentlichen geklickt haben. Anschließend richtet App Hosting eine vollständig verwaltete Umgebung für Ihre App in Google Cloud ein.

  5. Klicken Sie auf Erste Einführung erstellen. Firebase Studio startet die Einführung von App Hosting. Dies kann bis zu zehn Minuten dauern. Weitere Informationen dazu, was im Hintergrund passiert, finden Sie unter Der App Hosting-Buildprozess.

  6. Nach Abschluss des Roll-outs wird die App-Übersicht mit einer URL und App-Statistiken angezeigt, die auf App Hosting-Statistiken basieren. Wenn Sie anstelle der von Firebase generierten Domain eine benutzerdefinierte Domain (z. B. beispiel.de oder app.beispiel.de) verwenden möchten, können Sie in der Firebase-Konsole eine benutzerdefinierte Domain hinzufügen.

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

Optionaler Schritt 4: App überwachen

Im Bereich App Hosting App-Übersicht finden Sie wichtige Messwerte und Informationen zu Ihrer App. So können Sie die Leistung Ihrer Webanwendung mithilfe der integrierten Observability-Tools von App Hosting im Blick behalten. Nach der Einführung Ihrer Website können Sie auf die Übersicht zugreifen, indem Sie auf Veröffentlichen klicken. In diesem Bereich haben Sie folgende Möglichkeiten:

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

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

Weitere Informationen zum Verwalten und Überwachen von App Hosting-Roll-outs finden Sie unter Roll-outs und Releases verwalten.

(Optional) Schritt 5: Bereitstellung rückgängig machen

Wenn Sie mehrere Versionen Ihrer App auf App Hosting bereitgestellt haben, können Sie zu einer der vorherigen Versionen zurückkehren. 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 Anzeigen und dann auf Roll-outs.

    3. Klicken Sie neben der Bereitstellung, auf die Sie zurückwechseln möchten, auf das Dreipunkt-Menü und wählen Sie Zu diesem Build zurückkehren aus. Bestätigen Sie die Auswahl.

    Weitere Informationen zum Verwalten von Einführungen und Versionen

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

    1. Öffne in der Firebase-Konsole App Hosting und klicke im Bereich Firebase Studio für Apps auf Anzeigen.

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

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

    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 6: 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 den Code Ihres KI-Flows aktivieren. Mit der Telemetriefunktion von Genkit können Sie die Leistung und Nutzung Ihrer KI-Abläufe im Blick behalten. Anhand dieser Daten können Sie Verbesserungsmöglichkeiten erkennen, Probleme beheben, Prompts und Abläufe für eine bessere Leistung und Kosteneffizienz optimieren und die Nutzung Ihrer Abläufe im Zeitverlauf verfolgen.

Wenn Sie das Monitoring in Genkit einrichten möchten, fügen Sie den Genkit-KI-Abläufen Telemetrie hinzu und sehen sich die Ergebnisse dann in der Firebase-Konsole an.

Schritt 1: Genkit-Flow-Code in Firebase Studio telematische Daten hinzufügen

So richten Sie das Monitoring in Ihrem Code ein:

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

  2. Prüfe unter 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 im Terminal und installieren Sie das Firebase-Plug-in mit der Version, die zu Ihrer package.json-Datei passt. Wenn die Genkit-Pakete in Ihrer 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 befinden sich eine oder mehrere TypeScript-Dateien mit Ihren Genkit-Abläufen.

  6. Klicken Sie auf einen der Ablaufpläne, um ihn zu öffnen.

  7. Fügen Sie unten im Abschnitt „Importe“ 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 es Ihr Firebase-Projekt eingerichtet hat. Sie müssen dem Dienstkonto App Hosting aber auch Berechtigungen zuweisen.

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. Sobald die Veröffentlichung abgeschlossen ist, können Sie Ihre App laden und verwenden. Nach fünf Minuten sollte Ihre App mit dem Erfassen von Telemetry-Daten beginnen.

Schritt 3: Funktionen basierend auf generativer KI in der Firebase-Konsole beobachten

Wenn die Telemetrie konfiguriert ist, erfasst Genkit die Anzahl der Anfragen, den Erfolg und die Latenz für alle Ihre Aufrufe. Außerdem werden für jeden einzelnen Aufruf Stabilitätsmesswerte erfasst, detaillierte Diagramme angezeigt und erfasste Traces protokolliert.Genkit

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

  1. Öffnen Sie nach fünf Minuten Genkit in der Firebase Console 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.
    • Erfolgsquote:Der Prozentsatz der Anfragen, die erfolgreich verarbeitet wurden.
    • Latenz des 95. Perzentils:Die Latenz des 95. Perzentils Ihres Flusses, also die Zeit, die für die Verarbeitung von 95% der Anfragen benötigt wird.

    • Tokennutzung:

      • Eingabe-Tokens: Die Anzahl der Tokens, die im Prompt an das Modell gesendet wurden.
      • Ausgabetokens: Die Anzahl der vom Modell in der Antwort generierten Tokens.

    • Bildnutzung:

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

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

    • Anfragevolumen im Zeitverlauf
    • 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