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

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

App Prototyping agent — это оптимизированный процесс разработки без кода, использующий генеративный ИИ для разработки, тестирования, итерации и публикации полнофункционального веб-приложения с помощью агента. Вы описываете свою идею приложения на естественном языке с возможностью добавления изображения, а агент генерирует шаблон приложения, код и предварительный просмотр веб-страницы. Для облегчения разработки и публикации вашего полнофункционального приложения Firebase Studio может автоматически предоставлять вам следующие сервисы:

• Если ваше приложение использует ИИ: 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 для запуска потоков Genkit AI, тестирования, отладки, взаимодействия с различными моделями, уточнения подсказок и многого другого.

  Чтобы загрузить ваши потоки 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 .

При настройке 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 Monitoring для мониторинга развернутых функций.

Вы можете отслеживать шаги, входные и выходные данные ваших функций Genkit , включив телеметрию в код вашего потока ИИ. Функция телеметрии Genkit позволяет отслеживать производительность и использование ваших потоков ИИ. Эти данные помогут вам выявить области для улучшения, устранить неполадки, оптимизировать ваши подсказки и потоки для повышения производительности и экономической эффективности, а также отслеживать использование ваших потоков с течением времени.

Для настройки мониторинга в 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. At the bottom of the imports section of the file, add the following to import and enable 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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