Создавайте приложения с искусственным интеллектом, используя экосистему Google.

1. Прежде чем начать

Разработка программного обеспечения эволюционировала. Самые успешные разработчики не просто пишут код; они координируют работу инструментов и агентов искусственного интеллекта, чтобы создавать более качественные и быстрые решения. Экосистема инструментов Google предоставляет полный набор для всего жизненного цикла: генерация пользовательского интерфейса, прототипирование и развертывание приложений, разработка функций ИИ и безопасная, масштабируемая интеграция с бэкэндом. В этом практическом занятии вы будете использовать Google Stitch для проектирования пользовательского интерфейса, Google AI Studio для создания кода и развертывания приложения, а также Firebase для разработки функций ИИ и хранения информации в безопасном, масштабируемом бэкэнде.

Приложение, которое вы будете создавать в рамках этого практического занятия, называется Decide For Me — это помощник в принятии решений для людей, испытывающих нерешительность при выборе жизненного пути (например, переезд, смена карьеры или хобби). Пользователь вводит дилемму и свои жизненные приоритеты, а приложение использует искусственный интеллект, чтобы помочь пользователю принять решение, минимизируя разочарование в долгосрочной перспективе. Приложение также предоставляет пользователю конкретный первый шаг. Финальная версия вашего приложения должна выглядеть примерно так:

Что вы узнаете

• Создавайте пользовательские интерфейсы с помощью Google Stitch.
• Vibe Code — веб-приложение, созданное с помощью Google AI Studio.
• Используйте Firebase для разработки функций искусственного интеллекта и хранения информации в облаке.
• Разверните веб-приложение в рабочей среде с помощью Google AI Studio (на базе Cloud Run).

2. Разработайте пользовательский интерфейс с помощью Stitch.

1. Скачайте макет изображения ( DecideForMeScreen.jpeg ). Сохраните его в локальную папку, где вы сможете его найти.
2. Зайдите в Stitch , найдите поле ввода и выберите опцию «Веб» . (В этом практическом занятии вы сосредоточитесь на веб-версии, но Stitch также можно использовать для создания экранов для мобильных устройств.)
3. Загрузите изображение-макет:
   1. Нажмите + (кнопку добавления).
   2. Выберите «Загрузить файлы» .
   3. Прикрепите изображение, которое вы скачали на этапе настройки ( DecideForMeScreen.jpeg ). Этот нарисованный от руки макет позволит вам протестировать мультимодальные возможности Stitch.
4. Скопируйте следующий текст и вставьте его в поле ввода:

   # 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. Нажмите на стрелку «Сгенерировать» в правом нижнем углу поля ввода. Stitch сгенерирует экран и всю систему дизайна, включая цветовую палитру, параметры шрифтов, иконки и общее представление об элементах пользовательского интерфейса.

Внимание: если генерация экрана занимает более 5 минут, перезагрузите страницу и отправьте запрос снова.

3. Создайте приложение с помощью Google AI Studio.

1. Экспортируйте созданный в Stitch экран в Google AI Studio:
   1. Щёлкните по сгенерированному дизайну в Stitch.
   2. Нажмите кнопку «Экспорт» в правом верхнем углу экрана.
   3. Убедитесь, что выбран вариант Google AI Studio .
   4. Прокрутите вниз до поля «Описание» .
2. Скопируйте следующий текст и вставьте его в поле «Описание» :

   # 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. Нажмите «Создать с помощью Google AI Studio» . Это откроет Google AI Studio в новой вкладке и перенесет ваши файлы дизайна и подсказку:
   1. Убедитесь, что подсказка была полностью перенесена.
   2. Если вы видите только часть подсказки, вставьте её целиком ещё раз.
4. Нажмите «Создать» . Google AI Studio начнет генерацию приложения «Решите за меня» в соответствии с вашим запросом и дизайном пользовательского интерфейса:
   1. В процессе генерации предлагаются альтернативные варианты дизайна пользовательского интерфейса (в рамках данного практического занятия эти варианты можно игнорировать, но в будущем вы сможете выбрать другие).
   2. Когда появится запрос на включение Firebase, нажмите «Включить» .
5. Проверьте и подтвердите работоспособность сгенерированного приложения:
   1. Протестируйте приложение на вкладке « Предварительный просмотр» .
   2. Перейдите на вкладку «Код» , чтобы просмотреть все сгенерированные файлы и код.
   3. Google AI Studio также создала проект Firebase, включила аутентификацию Firebase и Firestore , а также настроила Firebase в вашем коде. Вы получите доступ к этому проекту Firebase и будете работать с ним на следующем шаге этого практического занятия.

Внимание: если создание приложения занимает более 10 минут, закройте вкладку, вернитесь в Stitch и начните заново с шага «Экспорт» .

4. Зарегистрируйте свое приложение. Проверьте отладочный токен.

Когда Google AI Studio генерирует приложение, она создает проект Firebase и подключает к нему ваше приложение. Вам необходимо получить доступ к этому проекту Firebase и зарегистрировать свою среду разработки в важной службе безопасности под названием Firebase App Check.

Получите доступ к своему проекту Firebase.

1. Найдите идентификатор проекта Firebase, созданного с помощью Google AI Studio:
   1. Перейдите на вкладку «Код» в Google AI Studio.
   2. Откройте файл firebase-applet-config.json .
   3. Скопируйте значение поля projectId .
2. Перейдите в консоль Firebase и найдите проект, используя этот ID.

   Примечание: Если вы создаете проект Firebase впервые, доступен только один проект — проект, созданный с помощью Google AI Studio.

Внимание: если вы не можете найти файл конфигурации в коде или не можете найти проект Firebase в консоли, это означает, что проект не был создан. Вы можете попросить Google AI Studio исправить это, отправив запрос «Пожалуйста, добавьте Firebase Auth и Firestore в это приложение».

Зарегистрируйте свой отладочный токен

Ваше приложение может использовать Firebase App Check для защиты ваших серверных служб и моделей ИИ от злоупотреблений, гарантируя, что входящий трафик поступает только от легитимных приложений.

Примечание: Регистрация отладочного токена или инициализация App Check сами по себе не обеспечивают защиту вашего бэкэнда или API. Необходимо принудительно включить App Check для конкретных API и сервисов, которые вы хотите защитить. В этом практическом занятии App Check будет включен для Firebase AI Logic, а для таких сервисов, как Firestore, вы можете включить принудительное включение в настройках App Check после проверки входящего трафика.

Поскольку ваше приложение работает в среде предварительного просмотра Google AI Studio, оно использует отладочный провайдер App Check ( self.FIREBASE_APPCHECK_DEBUG_TOKEN = true ). При загрузке веб-приложения Firebase автоматически выводит отладочный токен в консоль разработчика вашего браузера.

1. Найдите свой отладочный токен:
   1. В Google AI Studio откройте инструменты разработчика в браузере, просматривая предварительный просмотр приложения:
      • Chrome, Edge или Firefox: нажмите F12 (или щелкните правой кнопкой мыши в любом месте предварительного просмотра и выберите «Проверить элемент »), а затем выберите вкладку «Консоль» .
      • macOS: Нажмите Cmd+Option+I, затем выберите вкладку «Консоль» .
   2. В журналах консоли найдите отладочное сообщение App Check:

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

   3. Скопируйте строку токена (без кавычек).
2. Зарегистрируйте свой отладочный токен:
   1. В консоли Firebase перейдите в раздел Безопасность > Проверка приложений > вкладка Приложения .
   2. Найдите свое веб-приложение в списке, нажмите на меню с тремя точками ( ⋮ ) и выберите «Управление отладочными токенами» .
   3. Нажмите «Добавить отладочный токен» , вставьте скопированный токен, введите имя, например, Google AI Studio Preview , и нажмите «Сохранить» .
   

Примечание: Если вы не видите токен отладки в консоли браузера, обновите вкладку предварительного просмотра Google AI Studio или обратитесь к агенту Google AI Studio: «Убедитесь, что Firebase App Check инициализирован в режиме отладки с помощью self.FIREBASE_APPCHECK_DEBUG_TOKEN = true».

5. Протестируйте приложение.

Теперь, когда ваш проект подключен и отладочный токен зарегистрирован в App Check, протестируйте базовые функции: аутентификацию и Firestore.

1. Проверьте аутентификацию пользователей и сохраните приоритеты:
   1. В режиме предварительного просмотра приложения Decide For Me в Google AI Studio протестируйте экран аутентификации, войдя в систему с помощью учетной записи Google.
   2. Сохраните свои жизненные приоритеты, используя правую панель ( Мои приоритеты ).
2. Проверьте аутентификацию в консоли Firebase:
   1. Перейдите в консоль Firebase и откройте раздел «Аутентификация» .
   2. Убедитесь, что учетная запись Google, которую вы использовали для аутентификации в приложении Decide For Me, указана в списке:
   
3. Проверьте хранилище данных Firestore:
   1. Откройте Firestore в консоли Firebase.
   2. Убедитесь, что ваши приоритеты хранятся в документе по пути users/{userId} :
   

Внимание: если вы не видите ни одного документа в Firestore, перейдите на вкладку «Правила» и убедитесь, что у вас настроены надежные правила безопасности. Если правила безопасности пусты или возвращают false при каждом вызове, ваше приложение не сможет создавать документы ни в одной коллекции Firestore. В этом случае вернитесь в AI Studio и попросите его развернуть надежные правила безопасности для приложения.

6. Создайте процесс принятия решений на основе ИИ с использованием Firebase.

Ваше приложение будет использовать ИИ для управления действиями «Принимайте решения за меня» . Вы можете использовать Firebase для создания этого процесса принятия решений на основе ИИ.

Настройка Firebase AI Logic

1. Включите API разработчика Gemini в Firebase AI Logic:
   1. Откройте Firebase AI Logic в консоли Firebase, а затем нажмите «Начать» .
   2. Выберите Gemini Developer API и следуйте инструкциям в консоли, чтобы включить API.

   Примечание: На данном этапе проверка App Check автоматически применяется к Firebase AI Logic. Именно поэтому было важно настроить и зарегистрировать отладочный провайдер App Check ранее в этом практическом задании — это гарантирует, что запросы из вашей среды разработки в Google AI Studio будут проверены и не отклонены Firebase AI Logic.

2. Настройка параметров Firebase AI Logic:
   1. Перейдите во вкладку «Настройки» .
   2. Переключите параметр «Принудительное применение только шаблонов» в положение «Принудительное применение» .
   3. Переключите параметр «Принудительное использование аутентифицированных пользователей» в положение «Принудительно» .

Создайте шаблон приглашения сервера.

В этом практическом занятии вы будете использовать шаблоны серверных подсказок для взаимодействия с API Gemini через Firebase AI Logic.

Прежде чем приступить к работе с шаблоном, ознакомьтесь со следующей информацией, чтобы понять, почему важно хранить конфигурацию модели, системные инструкции и подсказки на стороне сервера:

• Защита интеллектуальной собственности: извлекает запросы с клиентского устройства и обеспечивает их безопасность на серверной части.
• Предотвращение атак с внедрением подсказок: клиент может заполнять только определенные переменные с проверкой схемы на стороне бэкэнда.
• Обновление без выпуска новых версий приложения: Вы можете обновлять подсказки, системные инструкции и конфигурации моделей в консоли без выпуска новой версии приложения.

Вот как создать и протестировать шаблон командной строки сервера:

1. Создайте шаблон приглашения сервера:
   1. Перейдите на вкладку «Шаблоны подсказок» .
   2. Нажмите «Создать шаблон» .
   3. Выберите пустой шаблон .
   4. Создайте свой первый шаблон, используя следующую информацию:
      • Название шаблона: Процесс принятия решений
      • Идентификатор шаблона: decider-flow
      • Конфигурация (вводная часть)

        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
        

      • Подсказки и (необязательные) системные инструкции

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

        Добавьте дополнительные фигурные скобки {} вокруг {role "system"} и {role "user"} , чтобы написать инструкции для системы и подсказку в правильном синтаксисе:
      • Тестовый ввод

        {
          "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. Нажмите «Сохранить шаблон» .
3. Проверьте шаблон:
   1. Нажмите « Запустить тест по запросу» .
   2. Найдите ответ на тест и убедитесь, что он содержит все поля, указанные вами в запросе ( verdict , justification и firstStep ).
   3. Если все соответствует ожидаемому результату, заблокируйте шаблон с помощью значка замка в правом верхнем углу шаблона, чтобы обеспечить стабильность версии и предотвратить случайные изменения.

Ваш шаблон готов к использованию в вашем приложении!

7. Используйте шаблон подсказки «Принять решение» в приложении.

Настройте ваше веб-приложение на использование этого шаблона:

1. Вернитесь к своему приложению в Google AI Studio.
2. Попросите агента Google AI Studio выполнить действие «Принять решение за меня» :
   1. Скопируйте следующую подсказку:

      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. Вставьте подсказку в поле чата Google AI Studio и нажмите «Отправить» .
3. Проверьте конфигурацию и протестируйте помощника принятия решений:
   1. Подождите, пока Google AI Studio завершит добавление Firebase AI Logic в ваше приложение.
   2. Перейдите на вкладку «Код» и убедитесь, что в файле firebase-applet-config.json указан ключ API. Если ключ API Firebase отсутствует в файле конфигурации, попросите Google AI Studio импортировать его.
   3. Перейдите на вкладку «Предварительный просмотр» .
   4. Отправьте варианты A и B и убедитесь, что ИИ возвращает вердикт, обоснование и первый шаг.

Предупреждение: Если вызов Firebase AI Logic завершится неудачей, даже если ключ API Firebase настроен, попросите агента Google AI Studio исправить это, выполнив следующее:

«Пожалуйста, убедитесь, что вызов Firebase AI Logic использует getAI(app) и getTemplateGenerativeModel(aiInstance) с шаблоном decider-flow , корректно преобразует JSON-ответ в verdict , justification и firstStep и не содержит никаких ограничений по времени или ненужных проверок функций».

Для справки, код, сгенерированный Google AI Studio, должен выглядеть примерно так:

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;

Отладка и мониторинг запросов

Если ваше приложение выдает ошибки, не генерирует ответ или вы хотите детально проанализировать трафик API, используйте встроенные инструменты аналитики и мониторинга Firebase AI Logic:

1. В консоли Firebase перейдите в раздел AI Services > AI Logic > вкладка AI monitoring .
2. Проверяйте количественные показатели на панели управления:
   • Объем и статус запросов: Проверьте, доходят ли входящие запросы до бэкэнда и возвращают ли код 200 OK , или же завершаются с ошибками на стороне клиента или сервера.
   • Задержка: Изучите график задержки, чтобы проверить время отклика от начала до конца.
   • Подсчет токенов: Мониторинг использования входящих и исходящих токенов для каждого запроса.
3. Для углубленной отладки изучите трассировки отдельных запросов: щелкните конкретную трассировку запроса в таблице трассировок, чтобы просмотреть ее содержимое.
   • Входные данные: Подтвердите, что переменные ( priorities , optionA и optionB ) были корректно переданы из клиентского приложения.
   • Результаты: Просмотрите исходный текст, сгенерированный моделью, чтобы убедиться, что она вернула корректный JSON, соответствующий схеме.
   • Подробности ошибки: Если запрос не удался, проверьте журнал трассировки ошибок на наличие таких причин, как недействительные токены проверки приложений, отклонение аутентификации, ограничения квоты или ошибки проверки запроса.
4. Устранение неполадок и решение проблем с Google AI Studio:
   • Если вы обнаружите ошибку в трассировке (например, некорректный анализ JSON-ответа или отсутствие параметров), скопируйте сообщение об ошибке или полезную нагрузку.
   • Вернитесь в Google AI Studio и попросите голосового помощника исправить соответствующую ошибку в коде приложения.

8. Необязательно: Разверните приложение

Теперь, когда ваше приложение работает в режиме предварительного просмотра, разверните его в рабочую среду.

Для защиты ваших конечных точек Firebase в производственной среде настройте поставщика аттестации для использования с Firebase App Check (в этом практическом задании вы будете использовать reCAPTCHA v3 ).

Для получения точного рабочего URL-адреса приложения необходимо сначала развернуть его, чтобы зарегистрировать конкретный домен с помощью reCAPTCHA, а не разрешать использование всех приложений ai.studio .

Разверните приложение и настройте reCAPTCHA:

1. Разверните веб-приложение с помощью Google AI Studio:
   1. В Google AI Studio нажмите кнопку «Опубликовать» в верхней панели навигации.
   2. Нажмите «Начать» , просмотрите или измените название и описание приложения, а затем нажмите «Опубликовать приложение» .
   3. Подождите, пока Google AI Studio соберет и развернет ваше приложение (обычно это занимает 1–2 минуты).
   4. Скопируйте сгенерированный URL-адрес (например, https://decide-for-me-123.ai.studio ) и запишите его домен (например, decide-for-me-123.ai.studio ).
2. Создание ключей reCAPTCHA v3 в Google reCAPTCHA:
   1. Перейдите в консоль администратора Google reCAPTCHA .
   2. Введите метку (например, Decide For Me - Production »).
   3. Выберите тип reCAPTCHA > reCAPTCHA v3 (на основе оценки) .
   4. В разделе «Домены» укажите точный домен, используемый вашим приложением (например, decide-for-me-123.ai.studio , опустив https:// и любые пути), или собственный домен, если вы планируете его использовать.
   5. Примите условия предоставления услуг и нажмите «Отправить» .
   6. Оставьте эту вкладку открытой: вам понадобятся как ключ сайта (открытый ключ клиента), так и секретный ключ (закрытый ключ сервера).
3. Зарегистрируйте свой секретный ключ в консоли Firebase:
   1. Перейдите в раздел «Проверка приложений» в консоли Firebase.
   2. Перейдите во вкладку «Приложения» .
   3. Найдите свое веб-приложение в списке, щелкните по нему (или щелкните по меню с тремя точками ⋮ ) и выберите reCAPTCHA v3 .
   4. Вставьте свой секретный ключ reCAPTCHA в поле и нажмите «Сохранить» .
4. Настройте клиентское приложение для использования ReCaptchaV3Provider :
   1. В Google AI Studio перейдите в панель чата и попросите ассистента обновить конфигурацию App Check для производственной среды:

      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. Если вы просматриваете код непосредственно на вкладке «Код» , убедитесь, что инициализация App Check соответствует этой структуре:

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

   3. После обновления кода повторно опубликуйте приложение в Google AI Studio, чтобы обновленная конфигурация App Check была применена к вашему рабочему сайту.
5. Проверьте производственный трафик и отслеживайте работу приложения App Check:
   1. Откройте URL-адрес вашего работающего приложения в режиме инкогнито, войдите в систему с помощью Google и протестируйте отправку задачи.
   2. Вернитесь к разделу «Проверка приложений» в консоли Firebase и проверьте вкладки «API» и «Мониторинг» , чтобы убедиться, что запросы успешно зарегистрированы для Firestore и Firebase AI Logic.

Примечание: Проверка приложений (App Check) уже включена для Firebase AI Logic. После того, как вы убедитесь, что 100% легитимного трафика подтверждено в метриках App Check, вы также можете изменить статус принудительной проверки приложений для Firestore на «Принудительная» , чтобы автоматически отклонять весь неподтвержденный трафик.

9. Заключение

Поздравляем! Вы создали полезное приложение с функциями искусственного интеллекта с нуля, используя инструменты из Google Builder Stack. Это только начало; с инструментами Google вы можете сделать гораздо больше. Теперь у вас есть проект Firebase + Google Cloud; изучите все доступные вам сервисы!

Перейдите по этой ссылке , чтобы получить значок « Завершенный строительный проект» !

Чтобы продолжить своё путешествие, перейдите по ссылке goo.gle/builders для прохождения следующего лабораторного занятия.

Если вы уже используете Antigravity 2.0 , специализированную платформу Google для параллельной работы нескольких автономных агентов, вы можете быстро экспортировать свой проект из Google AI Studio и импортировать его в Antigravity, чтобы продолжить работу над ним локально. В Antigravity доступны Agent Skills для Firebase, которые можно установить одним щелчком мыши. Эти навыки также поддерживают мобильную разработку, что позволяет вам воспроизвести это приложение как в среде Android, так и в среде iOS, если вы этого хотите.