Tworzenie aplikacji AI w ekosystemie Google

1. Zanim zaczniesz

Tworzenie oprogramowania przeszło ewolucję. Najlepsi programiści nie tylko piszą kod, ale też wykorzystują narzędzia i agenty AI, aby tworzyć lepsze i szybsze rozwiązania. Ekosystem narzędzi Google zapewnia kompleksowy zestaw rozwiązań na każdym etapie: generowanie interfejsu, prototypowanie i wdrażanie aplikacji, tworzenie funkcji AI oraz bezpieczna i skalowalna integracja backendu. W tym laboratorium kodowania użyjesz Google Stitch do zaprojektowania interfejsu, Google AI Studio do napisania kodu i wdrożenia aplikacji oraz Firebase do opracowania funkcji AI i przechowywania informacji w bezpiecznym, skalowalnym backendzie.

Aplikacja, którą utworzysz w tym laboratorium, nazywa się Decide For Me. Jest to asystent decyzyjny dla osób niezdecydowanych, które muszą podjąć ważne decyzje życiowe (np. przeprowadzić się do nowego mieszkania, zmienić pracę lub wybrać hobby). Użytkownik podaje swój dylemat i priorytety życiowe, a aplikacja wykorzystuje AI, aby pomóc mu podjąć decyzję na podstawie tego, co minimalizuje długoterminowe rozczarowanie. Aplikacja podaje też użytkownikowi konkretny pierwszy krok. Ostateczna wersja aplikacji powinna wyglądać podobnie do tej:

Zrzut ekranu aplikacji Decide For Me przedstawiający interfejs czatu i panel priorytetów

Czego się nauczysz

  • Projektowanie interfejsów za pomocą Google Stitch.
  • Zastosuj vibe coding w aplikacji internetowej za pomocą Google AI Studio.
  • Używaj Firebase do tworzenia funkcji AI i przechowywania informacji w chmurze.
  • Wdrażanie aplikacji internetowej w środowisku produkcyjnym za pomocą Google AI Studio (zasilanego przez Cloud Run).

2. Projektowanie interfejsu za pomocą Stitch

  1. Pobierz obraz makiety (DecideForMeScreen.jpeg). Zapisz go w lokalnym folderze, w którym możesz go znaleźć.
  2. Otwórz Stitch, znajdź pole do wprowadzania danych i wybierz opcję Web (Internet). (W tym laboratorium skupimy się na środowisku internetowym, ale za pomocą Stitch możesz również generować ekrany mobilne.)
  3. Prześlij obraz makiety:
    1. Kliknij + (przycisk dodawania).
    2. Kliknij Prześlij pliki.
    3. Załącz obraz pobrany w kroku konfiguracji (DecideForMeScreen.jpeg). Ten odręczny szkic pozwala przetestować funkcje multimodalne Stitcha.
  4. Skopiuj ten prompt i wklej go w polu do wprowadzania danych:
    # 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. W prawym dolnym rogu pola do wprowadzania danych kliknij strzałkę generowania. Stitch generuje ekran i cały system projektowania, w tym paletę kolorów, opcje czcionek, ikonografię i ogólny wygląd elementów interfejsu:

Interfejs Stitch z wygenerowanym projektem interfejsu „Zdecyduj za mnie” i systemem projektowania

3. Tworzenie aplikacji w Google AI Studio

  1. Wyeksportuj ekran utworzony w Stitch do Google AI Studio:
    1. Kliknij wygenerowany projekt w Stitch.
    2. W prawym górnym rogu ekranu kliknij Eksportuj.
    3. Sprawdź, czy wybrana opcja to Google AI Studio.
    4. Przewiń w dół do pola Opis.
  2. Skopiuj ten prompt i wklej go w polu Opis:
    # 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. Kliknij Zbuduj w Google AI Studio. Google AI Studio otworzy się w nowej karcie, a Twoje pliki projektu i prompt zostaną przeniesione:
    1. Sprawdź, czy prompt został w całości przeniesiony.
    2. Jeśli widzisz tylko część promptu, wklej go ponownie w całości.
  4. Kliknij Utwórz. Google AI Studio zacznie generować aplikację Decide For Me zgodnie z Twoim promptem i projektem interfejsu:
    1. Podczas generowania proponuje alternatywne projekty interfejsu (zignoruj je w tym laboratorium, ale w przyszłości możesz wybrać inne projekty).
    2. Gdy pojawi się prośba o włączenie Firebase, kliknij Włącz.
  5. Sprawdź i zweryfikuj wygenerowaną aplikację:
    1. Przetestuj aplikację na karcie Podgląd.
    2. Przejdź na kartę Kod, aby przejrzeć wszystkie wygenerowane pliki i kod.
    3. Google AI Studio utworzyło też projekt w Firebase, włączyło Uwierzytelnianie Firebase i Firestore oraz skonfigurowało Firebase w Twojej bazie kodu. W następnym kroku tego ćwiczenia uzyskasz dostęp do tego projektu w Firebase i będziesz z nim pracować.

4. Rejestrowanie tokena debugowania Sprawdzania aplikacji

Gdy Google AI Studio wygeneruje aplikację, utworzy projekt w Firebase i połączy z nim aplikację. Musisz mieć dostęp do tego projektu w Firebase i zarejestrować środowisko programistyczne w ważnej usłudze zabezpieczeń o nazwie Sprawdzanie aplikacji Firebase.

Dostęp do projektu w Firebase

  1. Znajdź identyfikator projektu w Firebase utworzonego przez Google AI Studio:
    1. W Google AI Studio przejdź na kartę Kod.
    2. Otwórz plik firebase-applet-config.json.
    3. Skopiuj wartość pola projectId.
  2. Otwórz konsolę Firebase i wyszukaj projekt, używając tego identyfikatora.

Rejestrowanie tokena debugowania

Aplikacja może korzystać z Sprawdzania aplikacji Firebase, aby chronić usługi backendu i modele AI przed nadużyciami, zapewniając, że przychodzący ruch pochodzi tylko z prawidłowych aplikacji.

Aplikacja działa w środowisku podglądu Google AI Studio, więc korzysta z dostawcy debugowania Sprawdzania aplikacji (self.FIREBASE_APPCHECK_DEBUG_TOKEN = true). Po wczytaniu aplikacji internetowej Firebase automatycznie wysyła token debugowania do konsoli deweloperskiej przeglądarki.

  1. Znajdź swój token debugowania:
    1. W Google AI Studio otwórz narzędzia deweloperskie przeglądarki podczas wyświetlania podglądu aplikacji:
      • Chrome, Edge lub Firefox: naciśnij F12 (lub kliknij prawym przyciskiem myszy w dowolnym miejscu w podglądzie i wybierz Zbadaj), a następnie wybierz kartę Konsola.
      • macOS: naciśnij Cmd+Option+I, a następnie wybierz kartę Konsola.
    2. W dziennikach konsoli znajdź komunikat debugowania usługi Sprawdzanie aplikacji:
      AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
You will need to safelist it in the Firebase console for it to work.
    3. Skopiuj ciąg tokena (bez cudzysłowów).
  2. Zarejestruj token debugowania:
    1. W konsoli Firebase kliknij Zabezpieczenia > Sprawdzanie aplikacji > karta Aplikacje.
    2. Znajdź na liście swoją aplikację internetową, kliknij menu z 3 kropkami (⋮) i wybierz Zarządzaj tokenami debugowania.
    3. Kliknij Dodaj token debugowania, wklej skopiowany token, wpisz nazwę, np. Google AI Studio Preview, i kliknij Zapisz.
    Zrzut ekranu z pozycją menu Zarządzaj tokenami debugowania w konsoli Firebase

5. Testowanie aplikacji

Teraz, gdy projekt jest połączony, a token debugowania jest zarejestrowany w usłudze Sprawdzanie aplikacji, przetestuj podstawowe funkcje: Uwierzytelnianie i Firestore.

  1. Przetestuj uwierzytelnianie użytkowników i zapisz priorytety:
    1. W podglądzie aplikacji Decide For Me w Google AI Studio przetestuj ekran uwierzytelniania, logując się na konto Google.
    2. Zapisz priorytety życiowe w prawym panelu (Moje priorytety).
  2. Sprawdź uwierzytelnianie w konsoli Firebase:
    1. Otwórz konsolę Firebase i kliknij Uwierzytelnianie.
    2. Sprawdź, czy konto Google użyte do uwierzytelnienia w aplikacji Decide For Me jest na liście:
    Strona Uwierzytelnianie w konsoli Firebase z uwierzytelnionym kontem Google
  3. Sprawdź miejsce na dane w Firestore:
    1. Otwórz Firestore w konsoli Firebase.
    2. Sprawdź, czy Twoje priorytety są przechowywane w dokumencie w ścieżce users/{userId}:
    Konsola Firebase z bazą danych Firestore, w której widać priorytety zapisane w sekcji users/{userId}

6. Tworzenie przepływu Decider opartego na AI za pomocą Firebase

Aplikacja będzie korzystać ze sztucznej inteligencji do obsługi działań Zdecyduj za mnie. Możesz użyć Firebase do utworzenia tego opartego na AI procesu decyzyjnego.

Konfigurowanie Firebase AI Logic

  1. Włącz Gemini Developer API w Firebase AI Logic:
    1. Otwórz Firebase AI Logic w konsoli Firebase, a potem kliknij Rozpocznij.
    2. Wybierz Gemini Developer API i postępuj zgodnie z instrukcjami w konsoli, aby włączyć interfejs API.
  2. Skonfiguruj ustawienia Firebase AI Logic:
    1. Przejdź na kartę Ustawienia.
    2. Ustaw opcję Wymuś tryb tylko szablon na Wymuszony.
    3. Przełącz opcję Wymuszaj tryb uwierzytelnionych użytkowników na Wymuszony.

Tworzenie szablonu prompta serwera

W tym ćwiczeniu będziesz używać szablonów promptów przechowywanych na serwerach do interakcji z interfejsem Gemini API za pomocą Firebase AI Logic.

Zanim zaczniesz korzystać z szablonu, zapoznaj się z tymi informacjami, aby dowiedzieć się, dlaczego przechowywanie konfiguracji modelu, instrukcji systemowych i promptów po stronie serwera jest ważne:

  • Ochrona własności intelektualnej: pobiera prompty z urządzenia klienta i zabezpiecza je na backendzie.
  • Zapobieganie wstrzykiwaniu promptów: klient może wypełniać tylko określone zmienne za pomocą weryfikacji schematu backendu.
  • Aktualizowanie bez publikowania aplikacji: w konsoli możesz aktualizować prompty, instrukcje systemowe i konfiguracje modeli bez publikowania nowej wersji aplikacji.

Oto jak utworzyć i przetestować szablon promptu serwera:

  1. Utwórz szablon promptu serwera:
    1. Otwórz kartę Szablony promptów.
    2. Kliknij Utwórz szablon.
    3. Kliknij Pusty szablon.
    4. Utwórz pierwszy szablon, korzystając z tych informacji:
      • Nazwa szablonu: Decider Flow
      • Identyfikator szablonu: decider-flow
      • Konfiguracja (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 i (opcjonalnie) instrukcje systemowe
        {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.
        Dodaj dodatkowe znaki {} wokół znaków {role "system"} i {role "user"}, aby napisać instrukcje systemowe i prompt w prawidłowej składni: 9db2a4f2c5cf2ec7.png
      • Dane wejściowe testu
        {
  "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. Kliknij Zapisz szablon.
  3. Testowanie szablonu:
    1. Kliknij Uruchom test promptu.
    2. Znajdź Test response (Odpowiedź testowa) i sprawdź, czy zawiera wszystkie pola określone w prompcie (verdict, justification i firstStep).
    3. Jeśli wszystko pasuje do oczekiwanej odpowiedzi, zablokuj szablon, klikając ikonę blokady w prawym górnym rogu szablonu. Zapewni to stabilność wersji i zapobiegnie przypadkowym modyfikacjom.

Szablon jest gotowy do użycia w aplikacji.

7. Korzystanie w aplikacji z szablonu prompta Decider

Spraw, aby aplikacja internetowa korzystała z szablonu:

  1. Wróć do aplikacji w Google AI Studio.
  2. Poproś agenta Google AI Studio o wdrożenie działania Decide For Me:
    1. Skopiuj ten 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. Wklej prompt do pola wpisywania na czacie w Google AI Studio i kliknij Wyślij.
  3. Sprawdź konfigurację i przetestuj asystenta podejmowania decyzji:
    1. Poczekaj, aż Google AI Studio zakończy dodawanie Firebase AI Logic do Twojej aplikacji.
    2. Przejdź na kartę Kod i sprawdź, czy w pliku firebase-applet-config.json znajduje się klucz interfejsu API. Jeśli klucza interfejsu API Firebase nie ma w pliku konfiguracyjnym, poproś Google AI Studio o jego zaimportowanie.
    3. Przejdź na kartę Podgląd.
    4. Prześlij opcje A i B i sprawdź, czy AI zwraca decyzję, uzasadnienie i pierwszy krok.

Kod wygenerowany przez Google AI Studio powinien wyglądać podobnie do tego:

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;

Debugowanie i monitorowanie żądań

Jeśli w aplikacji wystąpią błędy, nie uda się wygenerować odpowiedzi lub chcesz szczegółowo sprawdzić ruch w interfejsie API, użyj wbudowanych narzędzi do analizy i monitorowania w usłudze Firebase AI Logic:

  1. W konsoli Firebase kliknij Usługi AI > Logika AI > karta Monitorowanie AI.
  2. Sprawdź wskaźniki ilościowe w panelu:
    • Liczba i stan żądań: sprawdź, czy przychodzące żądania docierają do backendu i zwracają wartość 200 OK lub czy występują błędy po stronie klienta lub serwera.
    • Opóźnienie: sprawdź wykres opóźnienia, aby poznać czas odpowiedzi od początku do końca.
    • Liczba tokenów: monitoruj wykorzystanie tokenów wejściowych i wyjściowych w przypadku każdego żądania.
  3. Sprawdzanie logów czasu poszczególnych żądań w celu szczegółowego debugowania:w tabeli logów czasu kliknij konkretny log czasu żądania, aby sprawdzić jego ładunek.
    • Dane wejściowe: sprawdź, czy zmienne (priorities, optionA i optionB) zostały prawidłowo przekazane z aplikacji klienta.
    • Dane wyjściowe: wyświetl surowy tekst wygenerowany przez model, aby sprawdzić, czy zwrócił prawidłowy plik JSON zgodny ze schematem.
    • Szczegóły błędu: jeśli żądanie się nie powiedzie, sprawdź dziennik śledzenia błędów, aby poznać przyczyny, takie jak nieprawidłowe tokeny Sprawdzania aplikacji, odrzucenie uwierzytelniania, limity wykorzystania lub błędy weryfikacji promptu.
  4. Rozwiązywanie problemów z Google AI Studio:
    • Jeśli w śladzie zauważysz błąd (np. nieprawidłowe analizowanie odpowiedzi JSON lub brakujące parametry), skopiuj komunikat o błędzie lub ładunek.
    • Wróć do Google AI Studio i poproś asystenta o rozwiązanie odpowiedniego problemu w kodzie aplikacji.

8. Opcjonalnie: wdrażanie aplikacji

Teraz, gdy aplikacja działa w trybie podglądu, wdróż ją w wersji produkcyjnej.

Aby chronić punkty końcowe Firebase w środowisku produkcyjnym, skonfiguruj dostawcę atestów produkcyjnych do użycia z Sprawdzaniem aplikacji Firebase (w tym ćwiczeniu użyjesz reCAPTCHA v3).

Najpierw musisz wdrożyć aplikację, aby uzyskać jej dokładny URL wersji opublikowanej, dzięki czemu możesz zarejestrować konkretną domenę w reCAPTCHA, zamiast zezwalać na wszystkie aplikacje ai.studio.

Wdróż aplikację i skonfiguruj reCAPTCHA:

  1. Wdrażanie aplikacji internetowej za pomocą Google AI Studio:
    1. W Google AI Studio na pasku nawigacyjnym u góry kliknij Opublikuj.
    2. Kliknij Rozpocznij, sprawdź lub dostosuj nazwę i opis aplikacji, a następnie kliknij Opublikuj aplikację.
    3. Poczekaj, aż Google AI Studio utworzy i wdroży Twoją aplikację (zwykle trwa to 1–2 minuty).
    4. Skopiuj wygenerowany własny adres URL transmisji na żywo (np. https://decide-for-me-123.ai.studio) i zanotuj jego domenę (np. decide-for-me-123.ai.studio).
  2. Utwórz klucze reCAPTCHA w wersji 3 w Google reCAPTCHA:
    1. Otwórz konsolę administracyjną Google reCAPTCHA.
    2. Wpisz etykietę (np. Decide For Me - Production).
    3. Wybierz Typ reCAPTCHA > reCAPTCHA w wersji 3 (oparta na ocenie).
    4. W sekcji Domeny dodaj dokładną domenę wdrożonej aplikacji (np. decide-for-me-123.ai.studio, pomijając https:// i wszystkie ścieżki) lub domenę niestandardową, jeśli planujesz jej używać.
    5. Zaakceptuj warunki korzystania z usługi i kliknij Prześlij.
    6. Nie zamykaj tej karty. Będziesz potrzebować zarówno klucza witryny (publicznego klucza klienta), jak i klucza tajnego (prywatnego klucza serwera).
  3. Zarejestruj klucz tajny w konsoli Firebase:
    1. W konsoli Firebase otwórz Sprawdzanie aplikacji.
    2. Otwórz kartę Aplikacje.
    3. Na liście znajdź aplikację internetową, kliknij ją (lub kliknij menu z 3 kropkami ⋮) i wybierz reCAPTCHA v3.
    4. Wklej klucz tajny reCAPTCHA w odpowiednim polu i kliknij Zapisz.
  4. Skonfiguruj aplikację klienta tak, aby korzystała z ReCaptchaV3Provider:
    1. W Google AI Studio przejdź do panelu czatu i poproś asystenta o zaktualizowanie konfiguracji Sprawdzania aplikacji na potrzeby środowiska produkcyjnego:
      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. Jeśli sprawdzasz kod bezpośrednio na karcie Kod, upewnij się, że inicjowanie Sprawdzania aplikacji jest zgodne z tą strukturą:
      import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider("YOUR_RECAPTCHA_SITE_KEY"),
  isTokenAutoRefreshEnabled: true
});
    3. Po zaktualizowaniu kodu opublikuj ponownie aplikację w Google AI Studio, aby przesłać zaktualizowaną konfigurację Sprawdzania aplikacji do aktywnej witryny.
  5. Sprawdź ruch produkcyjny i monitoruj Sprawdzanie aplikacji:
    1. Otwórz adres URL aplikacji w oknie przeglądarki w trybie incognito, zaloguj się przez Google i przetestuj przesyłanie dylematu.
    2. Wróć do sekcji Sprawdzanie aplikacji w konsoli Firebase i sprawdź karty Interfejsy API i Monitorowanie, aby upewnić się, że żądania są prawidłowo rejestrowane w przypadku Firestore i Firebase AI Logic.

9. Podsumowanie

Gratulacje! Od podstaw udało Ci się utworzyć przydatną aplikację z funkcjami AI, korzystając z narzędzi z pakietu Builder Stack od Google. To dopiero początek. Narzędzia Google oferują znacznie więcej możliwości. Masz teraz projekt Firebase + Google Cloud. Poznaj wszystkie dostępne usługi.

Kliknij ten link, aby odebrać odznakę Ukończono ścieżkę dla twórców.

Aby kontynuować, przejdź do goo.gle/builders i wybierz kolejne ćwiczenie.

Jeśli używasz już Antigravity 2.0, czyli specjalnej platformy Google do równoległego zarządzania wieloma autonomicznymi agentami, możesz szybko wyeksportować projekt z Google AI Studio i zaimportować go do Antigravity, aby kontynuować pracę nad nim lokalnie. Antigravity ma umiejętności agenta Firebase, które można zainstalować jednym kliknięciem. Te umiejętności obejmują też tworzenie aplikacji mobilnych, co pomoże Ci w replikowaniu tej aplikacji w środowiskach Androida i iOS, jeśli zechcesz.