KI-Apps mit dem Google-Ökosystem entwickeln

1. Hinweis

Die Softwareentwicklung hat sich weiterentwickelt. Die erfolgreichsten Entwickler schreiben nicht nur Code, sondern setzen KI-Tools und ‑Agents ein, um besser und schneller zu entwickeln. Das Ökosystem von Google bietet eine umfassende Suite für den gesamten Lebenszyklus: UI-Generierung, App-Prototyping und ‑Bereitstellung, Entwicklung von KI-Funktionen und sichere, skalierbare Backend-Integration. In diesem Codelab verwenden Sie Google Stitch, um die Benutzeroberfläche zu gestalten, Google AI Studio, um Code zu erstellen und die App bereitzustellen, und Firebase, um KI-Funktionen zu entwickeln und Informationen in einem sicheren, skalierbaren Backend zu speichern.

Die App, die Sie in diesem Codelab erstellen, heißt Decide For Me (Entscheide für mich) – ein Entscheidungsassistent für unentschlossene Menschen, die vor wichtigen Entscheidungen stehen (z. B. Umzug, Berufswechsel oder Auswahl eines Hobbys). Der Nutzer gibt ein Dilemma und seine Prioritäten im Leben ein. Die App verwendet KI, um ihm bei der Entscheidung zu helfen, basierend darauf, was langfristige Enttäuschung minimiert. Die App bietet dem Nutzer auch einen konkreten ersten Schritt. Die endgültige Version Ihrer App sollte in etwa so aussehen:

Lerninhalte

• UIs mit Google Stitch entwerfen
• Vibe-Code für eine Web-App mit Google AI Studio erstellen
• Mit Firebase können Sie KI-Funktionen entwickeln und Informationen in der Cloud speichern.
• Webanwendung mit Google AI Studio (basierend auf Cloud Run) in der Produktion bereitstellen.

2. Benutzeroberfläche mit Stitch gestalten

1. Laden Sie das Mockup-Bild (DecideForMeScreen.jpeg) herunter und speichern Sie es in einem lokalen Ordner, in dem Sie es leicht wiederfinden.
2. Gehen Sie zu Stitch, suchen Sie das Eingabefeld und wählen Sie die Option Web aus. In diesem Codelab konzentrieren Sie sich auf die Weboberfläche. Sie können Stitch aber auch verwenden, um mobile Bildschirme zu generieren.
3. Laden Sie das Mockup-Bild hoch:
   1. Klicken Sie auf das -Symbol (Schaltfläche „Hinzufügen“).
   2. Wählen Sie Dateien hochladen aus.
   3. Hängen Sie das Bild an, das Sie im Einrichtungsschritt heruntergeladen haben (DecideForMeScreen.jpeg). Mit diesem handgezeichneten Mockup können Sie die multimodalen Funktionen von Stitch testen.
4. Kopieren Sie den folgenden Prompt und fügen Sie ihn in das Eingabefeld ein:

   # General Guidance
   Create a modern, clean, and highly polished UI for a web application called
   "Decide For Me" - a hyper-rational decision assistant.
   
   CRITICAL: Replicate the exact layout, structure, and element placement shown in
   the hand-drawn mockup file DecideForMeScreen.jpeg. Do not add any extra menus,
   sidebars, buttons, or top/bottom navigation bars that are not explicitly drawn
   in the file. Stick strictly to the skeleton provided in the mockup.
   
   # Layout & Structure
   - Two-Column Split Screen:
     - Left Side (Main Chat Area): Takes up roughly 70-75% of the screen width. It
       should feel like a premium, focused workspace.
     - Right Side (Configuration Panel): A sidebar taking up 25-30% of the screen
       width with a distinct, subtle background color to separate it from the
       chat.
   
   # Right Panel: Configuration Screen
   - Header: Title it "My Priorities" with a clean, minimalist typography.
   - Content Card: A styled card containing a text box or paragraph area
     showcasing the user's priorities.
   - Interactions: Include a clear "Edit Priorities" button. When clicked, this
     area should visually toggle into an editable textarea or input field.
   
   # Left Panel: Chat & Dilemma Decision Screen
   - Chat History: A clean vertical flow of message bubbles.
     - The first message bubble must be aligned to the left (system message) and
       say: "Tell me your dilemma". Use a friendly, neutral background color for
       this bubble.
   - Bottom Input Area: Instead of a traditional single-line chat bar, create a
     unified, beautiful "Decision Submission" layout positioned at the bottom:
     - Dual Input Fields: Place two horizontal or cleanly stacked input fields.
       - Input 1 label: "Option A"
       - Input 2 label: "Option B"
     - Action Button: A prominent, styled "Go" action button to trigger the
       reasoning loop.
   
   # Theme & Aesthetic
   - Vibe: Hyper-rational, clean, trustworthy, and modern. Use a sophisticated
     color palette (e.g., deep slates, clean whites/grays, and a sharp accent
     color like a subtle indigo or teal for active states and buttons).
   - Spacing & Typography: Use generous whitespace, soft rounded corners
     (border-radius) for cards and buttons, and a highly legible sans-serif font.
   

5. Klicken Sie rechts unten im Eingabefeld auf den Pfeil zum Generieren. Stitch generiert den Bildschirm und ein komplettes Designsystem, einschließlich Farbpalette, Schriftoptionen, Symbolik und dem allgemeinen Erscheinungsbild der UI-Elemente:

Warnung:Wenn das Generieren des Screenshots länger als 5 Minuten dauert, laden Sie die Seite neu und senden Sie den Prompt noch einmal.

3. App mit Google AI Studio erstellen

1. Exportieren Sie den in Stitch erstellten Bildschirm nach Google AI Studio:
   1. Klicken Sie in Stitch auf das generierte Design.
   2. Klicken Sie rechts oben auf dem Bildschirm auf Exportieren.
   3. Prüfen Sie, ob Google AI Studio ausgewählt ist.
   4. Scrollen Sie nach unten zum Feld Beschreibung.
2. Kopieren Sie den folgenden Prompt und fügen Sie ihn in das Feld Beschreibung ein:

   # General Guidance
   Build the "Decide For Me" app: A hyper-rational decision assistant for
   chronically indecisive people facing life choices (moving apartments, changing
   careers, picking a hobby). The user enters a dilemma and their top priorities
   in life. The app will help with the decision. Follow the instructions below to
   build it:
   
   # UI Instructions
   Using the design artifacts exported from Stitch (the PNG image and HTML file),
   build a fully functional web application that accurately mirrors the design and
   layout.
   
   # App Architecture & Initialization Instructions
   - Initialize the Firebase JS SDK for client-side services.
   - Set up Firebase Authentication using the Google provider. If a user is not
     logged in, show a clean, minimalist sign-in state. If the user is logged in,
     take them directly to the dilemma decision screen.
   - Initialize Firebase App Check in debug mode
     (`self.FIREBASE_APPCHECK_DEBUG_TOKEN = true`) without a ReCaptchaV3Provider
     (we will add that later).
   
   # State & Database Management Instructions
   - User Priorities:
     - Once authenticated, pull the user's saved priorities from Firebase
       Firestore at the path: `users/{userId}`. Each document should contain one
       string field: 'priorities'.
     - Bind this data to the Right Panel ("My Priorities").
     - When the user clicks the "Edit" button, toggle the view to a textarea, with
       a 'save' button. When saved, write the updated string back to
       `users/{userId}`.
     - Make sure to implement and deploy strong Security Rules for Firestore.
   
   # UI Stream Update & Display Instructions
   - Once the user submits option A and option B in the dilemma decision screen,
     display both options as a single message on the user side of the chat. Then,
     display a sleek loading state in the main chat panel. Leave the app in this
     "loading" state and do nothing else, we will process both options and build
     the server-side thinking later.
   

3. Klicken Sie auf Mit Google AI Studio entwickeln. Google AI Studio wird in einem neuen Tab geöffnet und Ihre Designdateien und Ihr Prompt werden übertragen:
   1. Prüfen Sie, ob der Prompt vollständig übertragen wurde.
   2. Wenn Sie nur einen Teil des Prompts sehen, fügen Sie den gesamten Prompt noch einmal ein.
4. Klicken Sie auf Erstellen. Google AI Studio generiert die App Decide For Me (Entscheide für mich) entsprechend Ihrem Prompt und UI-Design:
   1. Während der Generierung werden alternative UI-Designs vorgeschlagen. Ignorieren Sie diese Designs in diesem Codelab. Sie können sich aber in Zukunft für andere Designs entscheiden.
   2. Wenn Sie aufgefordert werden, Firebase zu aktivieren, klicken Sie auf Aktivieren.
5. Generierte App prüfen und bestätigen:
   1. Testen Sie die App auf dem Tab Vorschau.
   2. Wechseln Sie zum Tab Code, um alle generierten Dateien und den Code zu prüfen.
   3. Google AI Studio hat auch ein Firebase-Projekt erstellt, Firebase Authentication und Firestore aktiviert und Firebase in Ihrer Codebasis konfiguriert. Im nächsten Schritt dieses Codelabs greifen Sie auf dieses Firebase-Projekt zu und arbeiten damit.

Warnung:Wenn die Generierung Ihrer App länger als 10 Minuten dauert, schließen Sie den Tab, kehren Sie zu Stitch zurück und beginnen Sie noch einmal mit dem Schritt Exportieren.

4. App Check-Fehlerbehebungstoken registrieren

Wenn Google AI Studio die App generiert, wird ein Firebase-Projekt erstellt und Ihre App damit verknüpft. Sie müssen auf dieses Firebase-Projekt zugreifen und Ihre Entwicklungsumgebung mit einem wichtigen Sicherheitsdienst namens Firebase App Check registrieren.

Auf Ihr Firebase-Projekt zugreifen

1. So finden Sie die Projekt-ID des von Google AI Studio erstellten Firebase-Projekts:
   1. Wechseln Sie in Google AI Studio zum Tab Code.
   2. Öffnen Sie die Datei firebase-applet-config.json.
   3. Kopieren Sie den Wert des Felds projectId.
2. Rufen Sie die Firebase Console auf und suchen Sie mit dieser ID nach dem Projekt.

   Hinweis:Wenn Sie zum ersten Mal ein Firebase-Projekt erstellen, ist nur ein Projekt verfügbar, nämlich das von Google AI Studio erstellte Projekt.

Warnung:Wenn Sie die Konfigurationsdatei im Code oder das Firebase-Projekt in der Console nicht finden, wurde das Projekt nicht erstellt. Sie können Google AI Studio bitten, das Problem zu beheben, indem Sie den Prompt Please add Firebase Auth and Firestore to this app. (Füge dieser App Firebase Auth und Firestore hinzu) eingeben.

Debug-Token registrieren

Ihre App kann Firebase App Check verwenden, um Ihre Backend-Dienste und KI-Modelle vor Missbrauch zu schützen. Dazu wird dafür gesorgt, dass eingehender Traffic nur von legitimen Apps stammt.

Hinweis: Die Registrierung eines Debug-Tokens oder die Initialisierung von App Check schützt Ihr Backend oder Ihre APIs nicht von selbst. Sie müssen App Check für die APIs und Dienste, die Sie schützen möchten, erzwingen. App Check wird für Firebase AI Logic später in diesem Codelab erzwungen. Für Dienste wie Firestore können Sie die Erzwingung in den App Check-Einstellungen aktivieren, sobald Sie den eingehenden Traffic überprüft haben.

Da Ihre App in der Google AI Studio-Vorschauumgebung ausgeführt wird, wird der App Check-Debuganbieter (self.FIREBASE_APPCHECK_DEBUG_TOKEN = true) verwendet. Wenn die Web-App geladen wird, gibt Firebase automatisch ein Debug-Token in der Entwicklerkonsole Ihres Browsers aus.

1. So finden Sie Ihr Debug-Token:
   1. Öffnen Sie in Google AI Studio die Entwicklertools Ihres Browsers, während Sie die App-Vorschau ansehen:
      • Chrome, Edge oder Firefox:Drücken Sie F12 (oder klicken Sie mit der rechten Maustaste auf eine beliebige Stelle in der Vorschau und wählen Sie Untersuchen aus) und wählen Sie dann den Tab Konsole aus.
      • macOS:Drücken Sie Befehlstaste + Wahltaste + I und wählen Sie dann den Tab Konsole aus.
   2. Suchen Sie in den Konsolenlogs nach der App Check-Debug-Meldung:

      AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
      You will need to safelist it in the Firebase console for it to work.
      

   3. Kopieren Sie den Token-String (ohne Anführungszeichen).
2. Debug-Token registrieren:
   1. Rufen Sie in der Firebase Console Sicherheit > App Check > Tab Apps auf.
   2. Suchen Sie in der Liste nach Ihrer Web-App, klicken Sie auf das Dreipunkt-Menü ⋮ und wählen Sie Debug-Tokens verwalten aus.
   3. Klicken Sie auf Debug-Token hinzufügen, fügen Sie das kopierte Token ein, geben Sie einen Namen wie Google AI Studio Preview ein und klicken Sie auf Speichern.
   

Hinweis:Wenn Sie das Debug-Token nicht in der Browserkonsole sehen, aktualisieren Sie den Google AI Studio-Vorschautab oder fragen Sie den Google AI Studio-Agent: „Please ensure Firebase App Check is initialized in debug mode using self.FIREBASE_APPCHECK_DEBUG_TOKEN = true.“

5. Anwendung testen

Nachdem Ihr Projekt verbunden und Ihr Debug-Token bei App Check registriert ist, testen Sie die Basisfunktionen: Authentifizierung und Firestore.

1. Nutzerauthentifizierung testen und Prioritäten speichern:
   1. Testen Sie in der App-Vorschau Decide For Me in Google AI Studio den Authentifizierungsbildschirm, indem Sie sich mit einem Google-Konto anmelden.
   2. Speichern Sie Ihre Prioritäten im rechten Bereich (Meine Prioritäten).
2. Authentifizierung in der Firebase Console überprüfen:
   1. Rufen Sie die Firebase Console auf und öffnen Sie Authentifizierung.
   2. Prüfen Sie, ob das Google-Konto, mit dem Sie sich in der App „Entscheide für mich“ authentifiziert haben, dort aufgeführt ist:
   
3. Firestore-Datenspeicherung überprüfen:
   1. Öffnen Sie Firestore in der Firebase Console.
   2. Prüfen Sie, ob Ihre Prioritäten in einem Dokument unter dem Pfad users/{userId} gespeichert sind:
   

Warnung:Wenn Sie in Firestore keine Dokumente sehen, wechseln Sie zum Tab Regeln und prüfen Sie, ob Sie starke Sicherheitsregeln eingerichtet haben. Wenn die Sicherheitsregeln leer sind oder bei jedem Aufruf false zurückgeben, kann Ihre App keine Dokumente in Firestore-Sammlungen erstellen. Kehren Sie in diesem Fall zu AI Studio zurück und bitten Sie die KI, starke Sicherheitsregeln für die App bereitzustellen.

6. KI-basierten Decider-Ablauf mit Firebase erstellen

Ihre App verwendet KI für die Aktionen vom Typ Decide For Me (Entscheide für mich). Sie können Firebase verwenden, um diesen KI-basierten Entscheidungsablauf zu erstellen.

Firebase AI Logic einrichten

1. Aktivieren Sie die Gemini Developer API in Firebase AI Logic:
   1. Öffnen Sie Firebase AI Logic in der Firebase Console und klicken Sie dann auf Jetzt starten.
   2. Wählen Sie Gemini Developer API aus und folgen Sie der Anleitung in der Console, um die API zu aktivieren.

   Hinweis:App Check wird für Firebase AI Logic automatisch erzwungen. Aus diesem Grund war es wichtig, den App Check-Debug-Anbieter früher in diesem Codelab einzurichten und zu registrieren. So wird sichergestellt, dass Anfragen aus Ihrer Entwicklungsumgebung in Google AI Studio überprüft und nicht von Firebase AI Logic abgelehnt werden.

2. Firebase AI Logic-Einstellungen konfigurieren:
   1. Rufen Sie den Tab Einstellungen auf.
   2. Stellen Sie die Option Vorlagenmodus erzwingen auf Erzwungen.
   3. Stellen Sie die Option Modus „Authentifizierte Nutzer“ erzwingen auf Erzwungen.

Server-Prompt-Vorlage erstellen

In diesem Codelab verwenden Sie Server-Promptvorlagen für Ihre Interaktionen mit der Gemini API über Firebase AI Logic.

Bevor Sie mit der Vorlage fortfahren, sollten Sie sich die folgenden Informationen durchlesen, um zu verstehen, warum es wichtig ist, die Modellkonfiguration, Systemanweisungen und Prompts serverseitig zu speichern:

• Schutz des geistigen Eigentums:Prompts werden vom Clientgerät abgerufen und im Backend geschützt.
• Prompt-Injection-Angriffe verhindern:Der Client kann nur bestimmte Variablen mit der Backend-Schema-Validierung ausfüllen.
• Aktualisierung ohne App-Releases: Sie können Eingabeaufforderungen, Systemanweisungen und Modellkonfigurationen in der Konsole aktualisieren, ohne eine neue App-Version zu veröffentlichen.

So erstellen und testen Sie eine Server-Prompt-Vorlage:

1. Server-Prompt-Vorlage erstellen:
   1. Rufen Sie den Tab Promptvorlagen auf.
   2. Klicken Sie auf Vorlage erstellen.
   3. Wählen Sie Leere Vorlage aus.
   4. Erstellen Sie Ihre erste Vorlage anhand der folgenden Informationen:
      • Vorlagenname:Decider Flow
      • Vorlagen-ID: decider-flow
      • Konfiguration (Frontmatter)

        model: "gemini-3.5-flash-lite"
        input:
          schema:
            priorities: "string, user's core priorities"
            optionA: "string, option A under consideration"
            optionB: "string, option B under consideration"
        output:
          format: json
          schema:
            verdict: string
            justification: string
            firstStep: string
        

      • Prompt und (optionale) Systemanweisungen

        {role "system"}
        You are the Decider Agent, a multi-stage reasoning engine that
        combines the roles of an honest and polite behavioral economist, a
        long-term strategic forecaster, and an executive decision coach.
        Your job is to take a user's dilemma and their core priorities, run
        them through a rigorous, adversarial 3-phase thinking process, and
        output a highly analytical, reasoning-backed final verdict. You must be
        direct, sharp, and realistic. Do not give generic platitudes or claim
        that "both options are great." You must force a clear choice.
        
        {role "user"}
        # Context & Inputs
        You are analyzing a critical life decision for the user. Base your
        entire multi-phase reasoning flow strictly on these three specific
        inputs:
        - User's Core Priorities: {{priorities}}
        - Option A under consideration: {{optionA}}
        - Option B under consideration: {{optionB}}
        
        Execute your reasoning flow through the following three phases:
        
        # Phase 1: Cynical Breakdown (Input-Driven Analysis)
        Analyze {{optionA}} and {{optionB}} strictly through the lens of the
        user's explicit {{priorities}}. Do not evaluate them in a vacuum.
        - Identify the hidden flaws, compromises, and psychological costs
          embedded in both choices.
        - Pinpoint exactly how {{optionA}} could directly conflict with or
          undermine their {{priorities}}.
        - Pinpoint exactly how {{optionB}} could directly conflict with or
          undermine their {{priorities}}.
        - Uncover any cognitive biases (like status quo bias or loss aversion)
          the user might be falling for in either option.
        
        # Phase 2: Long-Term Regret Projection
        Project the user 5 years into the future. Apply the Regret Minimization
        Framework to both paths:
        - The {{optionA}} Timeline: Quantify the absolute worst-case, deep,
          structural 5-year regret of choosing this path. Focus heavily on
          failures of courage vs. failures of action based on their
          {{priorities}}.
        - The {{optionB}} Timeline: Quantify the matching 5-year regret for
          this path.
        - Contrast these two timelines. Which option carries the kind of regret
          that fundamentally breaks the user's {{priorities}}?
        
        # Phase 3: Final Recommendation & Action Step
        Synthesize the cynical critiques and long-term regret scores.
        Weigh them against the user's {{priorities}} to determine which
        choice minimizes long-term disappointment.
        - Verdict: You must declare either {{optionA}} or {{optionB}} as the
          definitive winner. No compromise, no "it depends," and no hybrid
          options.
        - Justification: Provide a sharp, reasoning-backed explanation showing why
          the losing option was eliminated based on the Phase 1 and Phase 2
          analysis.
        - First Step: Give one microscopic, low-friction task the user can
          execute within the next 15 minutes to commit to or move toward the
          chosen verdict.
        

        Fügen Sie ein zusätzliches {} um {role "system"} und {role "user"} hinzu, um Ihre Systemanweisungen und Prompts in der richtigen Syntax zu schreiben:
      • Testeingabe

        {
          "priorities": "Be financially stable, have a good work-life balance where I can travel twice a year",
          "optionA": "Buy a house for 615000 British pounds with a mortgage of 2800 per month for the next 35 years",
          "optionB": "Keep renting for 2400 per month for the foreseeable"
        }
        

2. Klicken Sie auf Vorlage speichern.
3. Vorlage testen:
   1. Klicken Sie auf Prompt-Test ausführen.
   2. Suchen Sie die Testantwort und prüfen Sie, ob sie alle Felder enthält, die Sie im Prompt angegeben haben (verdict, justification und firstStep).
   3. Wenn alles mit der erwarteten Antwort übereinstimmt, sperren Sie die Vorlage über das Schloss-Symbol rechts oben, um die Versionsstabilität zu gewährleisten und versehentliche Änderungen zu verhindern.

Ihre Vorlage kann jetzt von Ihrer App verwendet werden.

7. Decider-Promptvorlage in der App verwenden

So verwenden Sie die Vorlage in Ihrer Web-App:

1. Kehren Sie in Google AI Studio zu Ihrer App zurück.
2. Bitten Sie den Google AI Studio-Agenten, die Aktion Decide For Me zu implementieren:
   1. Kopieren Sie den folgenden Prompt:

      Now let's implement the "Decide For Me" button action. When clicked, it
      should call the Firebase AI Logic SDK using a Template Generative Model.
      The prompt is stored in a prompt template with the id "decider-flow". When
      calling the API, pass the following variables as the input payload object:
      - priorities
      - optionA
      - optionB
      
      The API will return a JSON object. Handle the response asynchronously and
      extract:
      - verdict
      - justification
      - firstStep
      
      Once the data is received, update the UI state to append a new message to
      the chat array. Ensure it renders as a system chat bubble positioned on
      the left side of the chat screen, mapping these three fields clearly into
      the bubble's layout.
      
      Please provide the necessary front-end component state updates and the
      Firebase SDK call.
      

   2. Fügen Sie den Prompt in die Google AI Studio-Chateingabe ein und klicken Sie auf Senden.
3. Konfiguration prüfen und Entscheidungsassistenten testen:
   1. Warten Sie, bis Google AI Studio Firebase AI Logic zu Ihrer App hinzugefügt hat.
   2. Wechseln Sie zum Tab Code und prüfen Sie, ob in Ihrer Datei firebase-applet-config.json ein API-Schlüssel vorhanden ist. Wenn der Firebase-API-Schlüssel nicht in der Konfigurationsdatei enthalten ist, bitten Sie Google AI Studio, ihn zu importieren.
   3. Zum Tab Vorschau wechseln
   4. Reichen Sie die Optionen A und B ein und prüfen Sie, ob die KI die Entscheidung, die Begründung und den ersten Schritt zurückgibt.

Warnung:Wenn der Aufruf von Firebase AI Logic auch mit konfiguriertem Firebase-API-Schlüssel fehlschlägt, bitten Sie den Google AI Studio-Agenten, das Problem zu beheben, indem Sie Folgendes eingeben:

„Achten Sie darauf, dass beim Firebase AI Logic-Aufruf getAI(app) und getTemplateGenerativeModel(aiInstance) mit der Vorlage decider-flow verwendet werden, die JSON-Antwort korrekt in verdict, justification und firstStep geparst wird und keine Zeitüberschreitungsbeschränkungen oder unnötigen Funktionsprüfungen enthält.“

Der von Google AI Studio generierte Code sollte in etwa so aussehen:

const aiInstance = getAI(app);
const templateModel = getTemplateGenerativeModel(aiInstance);

const result = await templateModel.generateContent('decider-flow', {
  priorities: priorities,
  optionA: optA,
  optionB: optB
});

const rawText = result.response.text();

// Parse response text to extract fields
const cleaned = rawText.replace(/```json|```/g, '').trim();
const parsedData: { verdict?: string; justification?: string; firstStep?: string } = JSON.parse(cleaned);

const verdict = parsedData.verdict;
const justification = parsedData.justification;
const firstStep = parsedData.firstStep;

Anfragen debuggen und überwachen

Wenn in Ihrer App Fehler auftreten, keine Antwort generiert wird oder Sie den API-Traffic im Detail untersuchen möchten, können Sie die integrierten Analyse- und Monitoring-Tools von Firebase AI Logic verwenden:

1. Rufen Sie in der Firebase Console die Seite AI Services > AI Logic > Tab KI-Monitoring auf.
2. Quantitative Messwerte im Dashboard prüfen:
   • Anfragevolumen und -status: Überprüfen, ob eingehende Anfragen das Backend erreichen und 200 OK zurückgeben oder mit Client- oder Serverfehlern fehlschlagen.
   • Latenz:Sehen Sie sich das Latenzdiagramm an, um die End-to-End-Reaktionszeit zu prüfen.
   • Tokenanzahl:Überwachen Sie die Nutzung von Eingabe- und Ausgabetokens pro Anfrage.
3. Einzelne Anfrage-Traces für detailliertes Debugging untersuchen:Klicken Sie in der Tabelle „Traces“ auf einen bestimmten Anfrage-Trace, um die zugehörige Nutzlast zu untersuchen.
   • Eingaben:Prüfen Sie, ob die Variablen (priorities, optionA und optionB) korrekt von der Client-App übergeben wurden.
   • Ausgaben:Sehen Sie sich den vom Modell generierten Roh-Text an, um zu prüfen, ob er gültiges JSON zurückgegeben hat, das dem Schema entspricht.
   • Fehlerdetails:Wenn eine Anfrage fehlschlägt, sehen Sie im Trace-Fehlerlog nach Gründen wie ungültigen App Check-Tokens, abgelehnter Authentifizierung, Kontingentlimits oder Fehlern bei der Aufforderungsvalidierung.
4. Fehlerbehebung und Lösung von Problemen mit Google AI Studio:
   • Wenn Sie einen Fehler im Trace erkennen (z. B. beim Parsen einer fehlerhaften JSON-Antwort oder fehlende Parameter), kopieren Sie die Fehlermeldung oder Nutzlast.
   • Kehren Sie zu Google AI Studio zurück und bitten Sie den Assistenten, das entsprechende Problem im App-Code zu beheben.

8. Optional: App bereitstellen

Nachdem Ihre App im Vorschaumodus funktioniert, können Sie sie in der Produktion bereitstellen.

Um Ihre Firebase-Endpunkte in der Produktion zu schützen, konfigurieren Sie einen Attestierungsanbieter für die Produktion zur Verwendung mit Firebase App Check. In diesem Codelab verwenden Sie reCAPTCHA v3.

Sie müssen Ihre App zuerst bereitstellen, um die genaue Live-URL zu erhalten. So können Sie die spezifische Domain bei reCAPTCHA registrieren, anstatt alle ai.studio-Apps zuzulassen.

App bereitstellen und reCAPTCHA konfigurieren:

1. Web-App mit Google AI Studio bereitstellen
   :
   1. Klicken Sie in Google AI Studio oben in der Navigationsleiste auf Veröffentlichen.
   2. Klicken Sie auf Jetzt starten, prüfen oder passen Sie den Anwendungsnamen und die Beschreibung an und klicken Sie auf App veröffentlichen.
   3. Warten Sie, bis Google AI Studio Ihre App erstellt und bereitgestellt hat. Das dauert in der Regel ein bis zwei Minuten.
   4. Kopieren Sie die generierte benutzerdefinierte Live-URL (z. B. https://decide-for-me-123.ai.studio) und notieren Sie sich die zugehörige Domain (z. B. decide-for-me-123.ai.studio).
2. reCAPTCHA V3-Schlüssel in Google reCAPTCHA erstellen
   :
   1. Rufen Sie die Google reCAPTCHA Admin Console auf.
   2. Geben Sie ein Label ein, z. B. Decide For Me - Production.
   3. Wählen Sie reCAPTCHA-Typ > reCAPTCHA V3 (auf Punktzahlen basierend) aus.
   4. Fügen Sie im Bereich Domains die genaue bereitgestellte Domain Ihrer App hinzu, z. B. decide-for-me-123.ai.studio (ohne https:// und Pfade), oder eine benutzerdefinierte Domain, falls Sie eine verwenden möchten.
   5. Akzeptieren Sie die Nutzungsbedingungen und klicken Sie auf Senden.
   6. Lassen Sie diesen Tab geöffnet, da Sie sowohl den Site Key (öffentlicher Clientschlüssel) als auch den Secret Key (privater Serverschlüssel) benötigen.
3. Gehe in der Firebase Console so vor, um deinen geheimen Schlüssel zu registrieren
   :
   1. Rufen Sie in der Firebase Console App Check auf.
   2. Gehe zum Tab Apps.
   3. Suchen Sie in der Liste nach Ihrer Webanwendung, klicken Sie darauf (oder auf das Dreipunkt-Menü ⋮) und wählen Sie reCAPTCHA V3 aus.
   4. Fügen Sie den reCAPTCHA-Secret-Schlüssel in das Feld ein und klicken Sie auf Speichern.
4. Client-App für die Verwendung von ReCaptchaV3Provider konfigurieren
   1. Wechseln Sie in Google AI Studio zum Chatbereich und bitten Sie den Assistenten, Ihre App Check-Konfiguration für die Produktion zu aktualisieren:

      Please update our Firebase App Check initialization to use
      ReCaptchaV3Provider with the reCAPTCHA site key "YOUR_RECAPTCHA_SITE_KEY",
      while retaining support for debug tokens in non-production environments.
      

   2. Wenn Sie den Code direkt auf dem Tab Code prüfen, muss die App Check-Initialisierung dieser Struktur entsprechen:

      import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
      
      const appCheck = initializeAppCheck(app, {
        provider: new ReCaptchaV3Provider("YOUR_RECAPTCHA_SITE_KEY"),
        isTokenAutoRefreshEnabled: true
      });
      

   3. Nachdem Sie den Code aktualisiert haben, veröffentlichen Sie Ihre App in Google AI Studio noch einmal, um die aktualisierte App Check-Konfiguration auf Ihre Live-Website zu übertragen.
5. Produktions-Traffic überprüfen und App Check im Blick behalten
   :
   1. Öffnen Sie die URL Ihrer Live-App in einem Inkognitofenster, melden Sie sich mit Google an und testen Sie das Einreichen eines Dilemmas.
   2. Kehren Sie in der Firebase Console zu App Check zurück und prüfen Sie auf den Tabs APIs und Monitoring, ob Anfragen für Firestore und Firebase AI Logic erfolgreich registriert wurden.

Hinweis:App Check wird für Firebase AI Logic bereits erzwungen. Wenn Sie feststellen, dass 100% des zulässigen Traffics in den App Check-Messwerten überprüft werden, können Sie den App Check-Erzwingungsstatus für Firestore auch auf Erzwingen umstellen, um den gesamten nicht überprüften Traffic automatisch abzulehnen.

9. Fazit

Glückwunsch! Sie haben mit Tools aus dem Builder Stack von Google eine nützliche App mit KI-Funktionen von Grund auf entwickelt. Das ist erst der Anfang – mit Google-Tools können Sie noch viel mehr tun. Sie haben jetzt ein Firebase- und Google Cloud-Projekt. Sehen Sie sich alle verfügbaren Dienste an.

Über diesen Link kannst du das Badge Builder Journey abgeschlossen erhalten.

goo.gle/builders ist der richtige Ort für Ihr nächstes Lab.

Wenn Sie bereits Antigravity 2.0 verwenden, die spezielle Plattform von Google zum parallelen Orchestrieren mehrerer autonomer Agents, können Sie Ihr Projekt schnell aus Google AI Studio exportieren und in Antigravity importieren, um lokal daran weiterzuarbeiten. Antigravity bietet Agent Skills für Firebase an, die mit einem Klick installiert werden können. Diese Skills bieten auch Unterstützung für die mobile Entwicklung, sodass Sie diese App bei Bedarf sowohl in Android- als auch in iOS-Umgebungen replizieren können.