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

Firebase Studio includes a web-based interface that lets you rapidly prototype and generate AI-forward web apps using multimodal prompts, including natural language, images, and drawing tools. The agent supports Next.js apps, with other platforms and frameworks planned in the future.

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. Optionally, upload an image to accompany your prompt. For example, you can upload an image that contains the color scheme you want your app to use and tell Firebase Studio to use it. Images must be less than 3 MiB.

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

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

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

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

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

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

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

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

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

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

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

• Add Cloud Firestore and Firebase Authentication : During the iteration phase, you can ask the App Prototyping agent to add user authentication and a database using Cloud Firestore and Firebase Authentication . For example, give users the ability to save and download recipes with a prompt like the following:

  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 предложит вам исправить любые возникшие ошибки. Нажмите «Исправить ошибку» , чтобы разрешить ему попытаться исправить ошибку.

  If you receive errors that you're not prompted to fix automatically, copy the error and any relevant context (for example, "Can you fix this error in my Firebase initialization code?") into the chat window and send it to Gemini .

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

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

  • Нажмите Annotate to draw directly on the Preview window. Use the available shape, image, and text tools, along with an optional text prompt, to visually describe what you want the App Prototyping agent to change.

  • Нажмите Select to select a specific element and enter instructions for the App Prototyping agent . This lets you quickly target a specific icon, button, piece of text, or other element. When you click an image, you also have the option of searching for and selecting a stock image from Unsplash .

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

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

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

  To change the Firebase project connected to your workspace, prompt the App Prototyping agent with the project ID you want to use instead. For example, "Switch to Firebase project with ID <your-project-id> ."

• Test the app and verify Cloud Firestore database rules: In the app preview pane, upload an image that shows different foods to test your app's ability to identify the ingredients and generate and save recipes.

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

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

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

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

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

  • AI assistance using Gemini either inline within your code or using Gemini interactive chat (both are available by default). Interactive chat can diagnose issues, provide solutions, and run tools to help fix your app faster. To access chat, click spark Gemini at the bottom of the workspace.

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

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

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

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

• Test and measure your generative AI feature performance: You can use the Genkit Developer UI to run your Genkit AI flows, test, debug, interact with different models, refine your prompts, and more.

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

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

      npm run genkit:watch
     

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

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

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

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

When you set up App Hosting , Firebase Studio creates a Firebase project for you (if one was not already created by auto-generating a Gemini API key or other backend services) and guides you through linking a Cloud Billing account.

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

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

2. In the Firebase project step, the App Prototyping agent displays the Firebase project associated with the workspace. If a Firebase project doesn't already exist, the App Prototyping agent creates a new project for you. Click Next to proceed.

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

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

   • If you don't have a Cloud Billing account or want to create a new one, click Create a Cloud Billing account . This opens the Google Cloud console, where you can create a new self-serve Cloud Billing account . After you create the account, return to Firebase Studio and select the account from the Link Cloud Billing list.

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

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

6. Click Publish now . Firebase Studio sets up Firebase services and then launches the App Hosting rollout. This can take up to several minutes to complete. To learn more about what's happening behind the scenes, see The App Hosting build process .

7. When the publish step completes, the App overview appears with a URL and app insights powered by App Hosting observability. To use a custom domain (like example.com or app.example.com) instead of the Firebase-generated domain, you can add a custom domain in the Firebase console.

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

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

If you've integrated Firebase or Google Cloud services into your app, Firebase App Check helps protect your app backends from abuse by preventing unauthorized clients from accessing your Firebase resources. It works with both Google services (including Firebase and Google Cloud services) and your own custom backends to keep your resources safe.

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

This section guides you through setting up App Check within Firebase Studio using reCAPTCHA Enterprise for a web app created by the App Prototyping agent , but you can set up App Check within any app that implements Firebase services and can implement custom providers. Learn more at 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. Click Add a domain and add a domain. You'll want to add your App Hosting domain (for example, studio-- PROJECT_ID . REGION .hosted.app ) and any custom domains you use with or plan to use with your 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. Add App Check to your app code. You can ask Gemini to add App Check with reCAPTCHA Enterprise to your app (be sure to specify "reCAPTCHA Enterprise" and be sure to double-check it!), or follow the steps in Initialize 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 .

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

The App overview panel in Firebase Studio provides key metrics and information about your app, letting you monitor your web app's performance using App Hosting 's built-in observability tools. After your site rolls out, you can access the overview by clicking Publish . From this panel, you can:

• Нажмите «Опубликовать» , чтобы выпустить новую версию вашего приложения.
• Поделитесь ссылкой на свое приложение или откройте его напрямую в разделе «Перейти к своему приложению» .
• Review a summary of your app's performance over the last 7 days, including the total number of requests and the status of your latest rollout. Click View details to access even more information in the Firebase console .
• Просмотрите график количества запросов, полученных вашим приложением за последние 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 Monitoring для мониторинга развернутых функций.

You can monitor your Genkit feature steps, inputs, and outputs by enabling telemetry to your AI flow code. Genkit 's telemetry feature 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. Click inside the terminal and install the Firebase plugin, using the version that matches your package.json file. For example, if the Genkit packages in your package.json are at 1.0.4, you should run the following command to install the plugin:

   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, выберите свой проект, а затем предоставьте учетной записи службы App Hosting следующие роли:

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

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

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

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

When telemetry is configured, Genkit records the number of requests, success, and latency for all of your flows, and, for each specific flow, Genkit collects stability metrics, shows detailed graphs, and logs captured traces.

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

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

   Genkit собирает следующие метрики стабильности :

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

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

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

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

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

   Если развернуть раздел показателей стабильности, станут доступны подробные графики:

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

Узнайте больше о Genkit на Genkit .

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

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