Как начать работу с инструментом прототипирования приложений

Firebase Studio включает в себя веб-интерфейс, позволяющий быстро создавать прототипы и разрабатывать веб-приложения с поддержкой ИИ, используя мультимодальные подсказки, включая естественный язык, изображения и инструменты рисования. Агент поддерживает приложения Next.js, а в будущем планируется поддержка других платформ и фреймворков.

The App Prototyping agent is a streamlined no-code development flow that uses generative AI to develop, test, iterate, and publish a full-stack, agentic web app. You describe your app idea in natural language with an optional image, and the agent generates an app blueprint, code, and a web preview. To assist in the development and publishing of your full-stack app, Firebase Studio can automatically provision the following services for you:

• Если ваше приложение использует ИИ: Firebase Studio добавит в ваше приложение API разработчика Gemini , используя возможности потоков Genkit для работы с Gemini . Вы можете использовать свой собственный ключ API Gemini или позволить Firebase Studio создать для вас проект Firebase и ключ API Gemini .
• Если вы хотите опубликовать свое приложение в интернете: Firebase Studio создает проект и предоставляет быстрый способ публикации вашего приложения с помощью Firebase App Hosting .

Вы можете улучшать приложение, используя инструменты обработки естественного языка, изображения и рисования, редактировать код напрямую, отменять изменения, публиковать приложение и отслеживать его производительность — и все это из Firebase Studio .

Начать

Чтобы начать работу с App Prototyping agent , выполните следующие шаги:

1. Войдите в свой аккаунт Google и откройте Firebase Studio .

2. В поле «Создайте прототип приложения с использованием ИИ» опишите свою идею приложения на естественном языке.

   Например, для создания приложения для генерации рецептов можно ввести следующий запрос:

   Use secure coding practices to create an error-free web app that lets
   users upload a photo or take a picture with their browser
   camera. The app identifies the food in the picture and generates a
   recipe and accompanying image that includes that food.
   
   If no food product is identified, generate a random dessert recipe.
   

3. При желании загрузите изображение, которое будет сопровождать ваше сообщение. Например, вы можете загрузить изображение, содержащее цветовую схему, которую вы хотите использовать в своем приложении, и указать Firebase Studio использовать именно ее. Размер изображений не должен превышать 3 МиБ.

4. Нажмите «Создать прототип с помощью ИИ» .

   App Prototyping agent генерирует шаблон приложения на основе вашего запроса, возвращая предлагаемое название приложения, необходимые функции и рекомендации по стилю.

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

   • Нажмите edit , чтобы настроить и отредактировать чертеж напрямую. Внесите изменения и нажмите «Сохранить» .

   • В поле «Опишите...» в панели чата добавьте уточняющие вопросы и контекст. Вы также можете загрузить дополнительные изображения.

6. Нажмите « Создать прототип этого приложения» .

7. App Prototyping agent начинает кодирование вашего приложения.

   • Если ваше приложение использует ИИ, вам будет предложено добавить или сгенерировать ключ API Gemini . Если вы нажмете «Автоматическая генерация», App Prototyping agent создаст для вас проект Firebase и ключ API Gemini .

Тестируйте, дорабатывайте, отлаживайте и совершенствуйте.

После создания первоначального приложения вы можете тестировать, дорабатывать, отлаживать и вносить итерации.

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

• Добавление Cloud Firestore и Firebase Authentication : На этапе итерации вы можете попросить App Prototyping agent добавить аутентификацию пользователей и базу данных с использованием Cloud Firestore и Firebase Authentication . Например, предоставьте пользователям возможность сохранять и загружать рецепты с помощью запроса, подобного следующему:

  Add user authentication to the app. Authenticated users can:
  
    - Download the recipe and its generated image as a PDF (Print).
  
    - Save the recipe as public or private and make accessible to a search
      feature. For now, just save the text, not the image, to the database.
  
  Important: Only authenticated users can download the PDF.
  

• Исправляйте ошибки по мере их возникновения: в большинстве случаев App Prototyping agent предложит вам исправить любые возникшие ошибки. Нажмите «Исправить ошибку» , чтобы разрешить ему попытаться исправить ошибку.

  Если вы получаете ошибки, которые не предлагаются для автоматического исправления, скопируйте сообщение об ошибке и соответствующий контекст (например, "Можете ли вы исправить эту ошибку в моем коде инициализации Firebase?") в окно чата и отправьте его Gemini .

• Тестируйте и дорабатывайте, используя естественный язык: тщательно тестируйте свое приложение и работайте с App Prototyping agent , чтобы постоянно совершенствовать код и структуру, пока не будете удовлетворены результатом.

  В режиме Prototyper вы также можете использовать следующие функции:

  • Нажмите Используйте инструменты для создания аннотаций непосредственно в окне предварительного просмотра. Доступные инструменты для работы с фигурами, изображениями и текстом, а также дополнительная текстовая подсказка, помогут визуально описать, что именно вы хотите изменить с App Prototyping agent .

  • Нажмите Выберите определенный элемент и введите инструкции для App Prototyping agent . Это позволит вам быстро выбрать конкретный значок, кнопку, фрагмент текста или другой элемент. При нажатии на изображение у вас также есть возможность найти и выбрать стоковое изображение на Unsplash .

  При желании вы можете нажать Ссылка для предварительного просмотра позволяет публично и временно делиться своим приложением с помощью функции публичных предварительных просмотров Firebase Studio .

• Создайте проект Firebase: App Prototyping agent создаст проект Firebase от вашего имени, когда вы:

  • Автоматическая генерация ключа API Gemini
  • Предложите подключить ваше приложение к проекту Firebase.
  • Обратитесь за помощью в подключении вашего приложения к сервисам Firebase, таким как Cloud Firestore или Firebase Authentication
  • Нажмите кнопку «Опубликовать» и настройте Firebase App Hosting

  Чтобы изменить проект Firebase, подключенный к вашей рабочей области, укажите App Prototyping agent идентификатор проекта, который вы хотите использовать вместо него. Например: "Переключиться на проект Firebase с идентификатором <your-project-id> >".

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

  Войдите в систему под разными учетными записями и сгенерируйте рецепты: убедитесь, что авторизованные пользователи могут видеть свои личные рецепты и обычные рецепты, а все пользователи видят общедоступные рецепты.

  Когда вы запрашиваете у App Prototyping agent добавление Cloud Firestore , он создает и развертывает для вас правила базы данных Cloud Firestore . Просмотрите правила в консоли Firebase .

• Отладка и итерации непосредственно в коде: Нажмите Переключитесь в режим «Код» , чтобы открыть окно Code , где вы можете увидеть все файлы вашего приложения и напрямую изменять код. Вы можете в любой момент вернуться в режим Prototyper .

  В режиме просмотра Code вы также можете использовать следующие полезные функции:

  • Встроенные функции отладки и создания отчетов Firebase Studio позволяют проверять, отлаживать и проводить аудит вашего приложения.

  • Использование ИИ-помощи с помощью Gemini возможно как непосредственно в коде, так и через интерактивный чат Gemini (оба варианта доступны по умолчанию). Интерактивный чат позволяет диагностировать проблемы, предлагать решения и запускать инструменты для более быстрого исправления вашего приложения. Чтобы получить доступ к чату, нажмите Spark Gemini в нижней части рабочей области.

  • Для просмотра данных базы данных и аутентификации воспользуйтесь Firebase Local Emulator Suite . Чтобы открыть эмулятор в своей рабочей области:

    1. Нажмите Переключитесь в Code и откройте расширение Firebase Studio ( Ctrl+',Ctrl+' или Cmd+',Cmd+' на MacOS).

    2. Прокрутите до раздела «Вспомогательные порты» и разверните его.

    3. В столбце «Действия» , соответствующем порту 4000 , нажмите «Открыть в новом окне» .

• Проверяйте и измеряйте производительность функций генеративного ИИ: вы можете использовать Genkit Developer UI для запуска потоков Genkit AI, тестирования, отладки, взаимодействия с различными моделями, уточнения подсказок и многого другого.

  Чтобы загрузить ваши потоки Genkit в Genkit Developer UI и начать тестирование:

  1. В терминале вашей рабочей области Firebase Studio выполните следующую команду, чтобы получить ключ API Gemini и запустить сервер Genkit :

      npm run genkit:watch
     

  2. Нажмите на ссылку Genkit Developer UI . В новом окне откроется Genkit Developer UI с вашими сценариями, подсказками, встраиваниями и выбором различных доступных моделей.

  Узнайте больше о Genkit Developer UI в разделе «Инструменты разработчика Genkit» .

Опубликуйте свое приложение с помощью Firebase App Hosting

После того, как вы протестируете свое приложение и убедитесь, что оно работает корректно в вашем рабочем пространстве, вы можете опубликовать его в интернете с помощью Firebase App Hosting .

При настройке App Hosting Firebase Studio создает для вас проект Firebase (если он еще не был создан путем автоматической генерации ключа API Gemini или с помощью других серверных служб) и помогает вам связать учетную запись Cloud Billing .

Чтобы опубликовать ваше приложение:

1. Нажмите «Опубликовать» , чтобы настроить проект Firebase и опубликовать приложение. Появится панель «Опубликовать приложение» .

2. На этапе создания проекта Firebase App Prototyping agent отображает проект Firebase, связанный с рабочей областью. Если проект Firebase еще не существует, App Prototyping agent создаст для вас новый проект. Нажмите «Далее» , чтобы продолжить.

3. На этапе настройки учетной записи Link Cloud Billing выберите один из следующих вариантов:

   • Выберите учетную запись Cloud Billing , которую вы хотите связать со своим проектом Firebase.

   • Если у вас нет учетной записи Cloud Billing или вы хотите создать новую, нажмите «Создать учетную запись Cloud Billing » . Откроется консоль Google Cloud , где вы сможете создать новую учетную запись Cloud Billing для самостоятельного использования . После создания учетной записи вернитесь в Firebase Studio и выберите учетную запись из списка «Связать Cloud Billing .

4. Нажмите «Далее» . Firebase Studio свяжет платежный аккаунт с проектом, связанным с вашей рабочей областью, созданным либо при автоматической генерации ключа API Gemini , либо при нажатии кнопки «Опубликовать» .

5. Нажмите «Настроить службы» . App Prototyping agent начнет развертывание служб Firebase.

6. Нажмите «Опубликовать сейчас» . Firebase Studio настроит службы Firebase, а затем запустит развертывание App Hosting . Этот процесс может занять несколько минут. Чтобы узнать больше о том, что происходит за кулисами, см. раздел «Процесс сборки App Hosting .

7. После завершения этапа публикации отображается обзор приложения с URL-адресом и аналитикой приложения, созданной с помощью инструмента мониторинга App Hosting . Чтобы использовать собственный домен (например, example.com или app.example.com) вместо домена, сгенерированного Firebase, вы можете добавить собственный домен в консоли Firebase .

Для получения дополнительной информации о App Hosting см. раздел «Понимание App Hosting и принципов его работы» .

Защитите свое приложение с помощью Firebase App Check и reCAPTCHA Enterprise.

Если вы интегрировали Firebase или сервисы Google Cloud в свое приложение, Firebase App Check помогает защитить бэкэнд вашего приложения от злоупотреблений, предотвращая несанкционированный доступ клиентов к вашим ресурсам Firebase. Он работает как с сервисами Google (включая Firebase и сервисы Google Cloud), так и с вашими собственными пользовательскими бэкэндами, обеспечивая безопасность ваших ресурсов.

Мы рекомендуем добавить App Check в любое приложение, которое вы публикуете публично, чтобы защитить ваши серверные ресурсы от злоупотреблений.

В этом разделе описана настройка App Check в Firebase Studio с использованием reCAPTCHA Enterprise для веб-приложения, созданного App Prototyping agent . Однако вы можете настроить App Check в любом приложении, которое использует сервисы Firebase и может использовать пользовательские поставщики. Подробнее см. в разделе Firebase App Check .

ReCAPTCHA Enterprise предоставляет до 10 000 бесплатных проверок .

Шаг 1: Настройте reCAPTCHA Enterprise для вашего приложения.

1. Откройте раздел reCAPTCHA Enterprise в консоли Google Cloud .

2. Выберите название своего проекта Firebase в окне выбора проектов консоли Google Cloud .

3. Если появится запрос на включение API reCAPTCHA Enterprise, сделайте это.

4. Нажмите «Начать» и добавьте отображаемое имя для ключа вашего сайта reCAPTCHA.

5. Примите ключ типа «Веб- приложение» по умолчанию.

6. Нажмите «Добавить домен» и добавьте домен. Вам нужно будет добавить домен вашего App Hosting (например, studio-- PROJECT_ID . REGION .hosted.app ) и любые пользовательские домены, которые вы используете или планируете использовать с вашим приложением.

7. Нажмите «Следующий шаг» .

8. Оставьте пункт « Будете ли вы использовать задания?» без выбора.

9. Нажмите «Создать ключ» .

10. Скопируйте и сохраните свой идентификатор ключа (Key ID) и перейдите к настройке App Check (Configure App Check ).

Шаг 2: Настройка App Check

1. Откройте консоль Firebase и выберите в меню навигации пункт Build > App Check .

2. Нажмите «Начать» , затем нажмите «Зарегистрироваться» рядом с вашим приложением.

3. Нажмите, чтобы развернуть ReCAPTCHA , и вставьте идентификатор ключа, сгенерированный вами для reCAPTCHA Enterprise.

4. Нажмите « Сохранить ».

Шаг 3: Добавьте App Check в свой код.

1. Вернитесь в Firebase Studio и в режиме просмотра Code добавьте сгенерированный вами ключ сайта в файл .env :

   NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
   

2. Если у вас еще нет сохраненной конфигурации Firebase в файле .env , получите ее:

   • В консоли Firebase откройте «Настройки проекта» и найдите соответствующий раздел для вашего приложения.

   • В терминале в режиме просмотра Code :

     1. Войдите в Firebase: firebase auth login
     2. Выберите свой проект: firebase use FIREBASE_PROJECT_ID
     3. Получите конфигурацию Firebase: firebase apps:sdkconfig

3. Добавьте конфигурацию в ваш файл .env так, чтобы он выглядел следующим образом:

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

4. Добавьте App Check в код вашего приложения. Вы можете попросить Gemini добавить App Check с помощью reCAPTCHA Enterprise в ваше приложение (обязательно укажите "reCAPTCHA Enterprise" и обязательно перепроверьте это!), или выполнить действия, описанные в разделе «Инициализация App Check .

5. Переопубликуйте свой сайт на App Hosting . Попробуйте протестировать базу данных и функции аутентификации, чтобы сгенерировать данные.

6. Убедитесь, что App Check получает запросы в консоли Firebase , открыв Build > App Check .

7. Нажмите, чтобы проверить Cloud Firestore . После того, как вы убедитесь, что запросы поступают, нажмите «Применить» , чтобы активировать App Check .

8. Повторная проверка и обеспечение Firebase Authentication .

If, after you have registered your app for App Check , you want to run your app in an environment that App Check would normally not classify as valid, such as locally during development, or from a continuous integration (CI) environment, you can create a debug build of your app that uses the App Check debug provider instead of a real attestation provider. Learn more at Use App Check with the debug provider in web apps .

Отслеживайте работу своего приложения

Панель обзора приложения в Firebase Studio предоставляет ключевые метрики и информацию о вашем приложении, позволяя отслеживать производительность вашего веб-приложения с помощью встроенных инструментов мониторинга App Hosting . После развертывания сайта вы можете получить доступ к обзору, нажав кнопку «Опубликовать» . С этой панели вы можете:

• Нажмите «Опубликовать» , чтобы выпустить новую версию вашего приложения.
• Поделитесь ссылкой на свое приложение или откройте его напрямую в разделе «Перейти к своему приложению» .
• Просмотрите сводку производительности вашего приложения за последние 7 дней, включая общее количество запросов и статус последнего развертывания. Нажмите « Просмотреть подробности» , чтобы получить доступ к еще большей информации в консоли Firebase .
• Просмотрите график количества запросов, полученных вашим приложением за последние 24 часа, с разбивкой по кодам состояния HTTP.
• Просмотрите статус активации сервисов Firebase, таких как Firebase Authentication и Cloud Firestore .

Если вы закроете панель обзора приложения, вы сможете открыть ее снова в любое время, нажав кнопку «Опубликовать» .

Подробнее об управлении и мониторинге развертывания App Hosting можно узнать в разделе «Управление развертываниями и релизами» .

Отмените развертывание.

Если вы развернули несколько версий своего приложения на App Hosting , вы можете откатить его до одной из более ранних версий. Вы также можете удалить его.

• Чтобы откатить опубликованный сайт:

  1. Откройте App Hosting в консоли Firebase .

  2. Найдите бэкэнд вашего приложения, нажмите «Просмотр» , а затем — «Развертывания» .

  3. Рядом с развертыванием, к которому вы хотите вернуться, нажмите «Подробнее» > more_vert , затем выберите «Вернуться к этой сборке» и подтвердите.

  Подробнее см. в разделе «Управление развертываниями и релизами» .

• Чтобы удалить домен вашего App Hosting из сети:

  1. В консоли Firebase откройте App Hosting и в разделе приложений Firebase Studio нажмите «Просмотреть» .

  2. В разделе «Информация о бэкэнде» нажмите «Управление» . Загрузится страница «Домены» .

  3. Рядом с вашим доменом нажмите «Подробнее» more_vert , затем выберите «Отключить домен» (Disable domain) и подтвердите.

  Это удалит ваш домен из сети. Чтобы полностью удалить бэкэнд вашего App Hosting , следуйте инструкциям в разделе «Удаление бэкэнда» .

Используйте мониторинг Genkit для развернутых вами функций.

You can monitor your Genkit feature steps, inputs, and outputs by enabling telemetry to your AI flow code. The telemetry feature for Genkit lets you monitor the performance and usage of your AI flows. This data can help you identify areas for improvement, troubleshoot issues, optimize your prompts and flows for better performance and cost efficiency, and track the usage of your flows over time.

Для настройки мониторинга в Genkit необходимо добавить телеметрию в потоки Genkit AI, а затем просмотреть результаты в консоли Firebase .

Шаг 1: Добавьте телеметрию в код потока Genkit в Firebase Studio

Чтобы настроить мониторинг в вашем коде:

1. Если вы еще не находитесь в режиме просмотра Code , нажмите здесь. Переключитесь на раздел «Код» , чтобы открыть его.

2. Проверьте package.json , чтобы убедиться в установленной версии Genkit .

3. Откройте терминал ( Ctrl-Shift-C или Cmd-Shift-C в MacOS).

4. В терминале откройте файл package.json и установите плагин Firebase, используя версию, соответствующую вашему файлу package.json . Например, если в вашем package.json указаны пакеты Genkit версии 1.0.4, выполните следующую команду для установки плагина:

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

5. В проводнике Windows разверните src > ai > flows . В папке flows появится один или несколько файлов TypeScript, содержащих ваши потоки Genkit .

6. Нажмите на один из потоков, чтобы открыть его.

7. В нижней части раздела импорта файла добавьте следующее, чтобы импортировать и включить FirebaseTelemetry :

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

Шаг 2: Настройка прав доступа

Firebase Studio автоматически активировала необходимые API при настройке вашего проекта Firebase, но вам также необходимо предоставить разрешения учетной записи службы App Hosting .

Для настройки прав доступа:

1. В консоли Google Cloud перейдите на страницу IAM и выберите свой проект Firebase.

2. Предоставьте учетной записи службы размещения приложений следующие роли:

   • Инструмент для записи метрик мониторинга ( roles/monitoring.metricWriter )
   • Агент Cloud Trace ( roles/cloudtrace.agent )
   • Logs Writer ( roles/logging.logWriter )

3. Переопубликуйте свое приложение на App Hosting .

4. После завершения публикации загрузите приложение и начните им пользоваться. Через пять минут приложение должно начать записывать телеметрические данные.

Шаг 3: Отслеживайте работу функций генеративного ИИ в консоли Firebase

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

Для мониторинга функций ИИ, реализованных с помощью Genkit :

1. Через пять минут в консоли Firebase перейдите в раздел AI Services > Genkit , чтобы просмотреть запросы и ответы от Genkit .

2. Вы можете ознакомиться со следующими показателями стабильности, собранными Genkit :

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

   • Использование токенов:

     • Входные токены: количество токенов, отправляемых модели в подсказке.
     • Выходные токены: количество токенов, сгенерированных моделью в ответе.

   • Использование изображений:

     • Входные изображения: количество изображений, отправляемых модели в запросе.
     • Выходные изображения: количество изображений, сгенерированных моделью в ответе.

3. Вы можете развернуть показатели стабильности, чтобы просмотреть следующие подробные графики:

   • Динамика объема запросов с течением времени.
   • Уровень успешности с течением времени.
   • Входящие и исходящие токены с течением времени.
   • Задержка (95-й и 50-й процентили) во времени.

Узнайте больше о Genkit в их документации .

Следующие шаги

• Разрабатывайте, публикуйте и отслеживайте полнофункциональное веб-приложение с помощью Firebase Studio .
• Разрабатывайте приложения с использованием любой платформы, применяя шаблоны или готовые решения .