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

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

Агент App Prototyping — это оптимизированный процесс разработки без кода, который использует генеративный ИИ для разработки, тестирования, итерации и публикации полнофункционального агентского веб-приложения. Вы описываете идею своего приложения на естественном языке с помощью необязательного изображения, а агент генерирует проект приложения, код и веб-превью. Чтобы помочь в разработке и публикации вашего полнофункционального приложения, 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. Нажмите «Прототип с ИИ» .

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

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

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

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

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

  7. Агент прототипирования приложений начинает кодирование вашего приложения.

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

Тестирование, уточнение, отладка и итерация

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

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

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

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

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

    В Prototyper mode, you can also use the following features:

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

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

    При желании вы можете нажать Значок ссылки Поделитесь ссылкой на предварительный просмотр , чтобы временно и публично опубликовать свое приложение с помощью общедоступных предварительных просмотров Firebase Studio .

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

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

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

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

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

       npm run genkit:watch

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

    Дополнительную информацию о Genkit Developer UI можно найти на странице Genkit Developer Tools .

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

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

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

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

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

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

  3. На этапе «Привязать учетную запись Cloud Billing выберите один из следующих вариантов:

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

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

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

  5. Нажмите Настроить службы . Агент прототипирования приложений начнет подготовку служб Firebase.

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

  7. После завершения шага публикации появится обзор приложения с URL-адресом и сведениями о приложении, полученными с помощью App Hosting observability. Чтобы использовать пользовательский домен (например, 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. Скопируйте и сохраните свой идентификатор ключа и перейдите к настройке App Check .

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

  1. Откройте консоль Firebase и выберите «Сборка» > «Проверка приложения» в меню навигации.

  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» и обязательно проверьте его дважды!), или следуйте инструкциям в Initialize App Check .

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

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

  7. Нажмите, чтобы проверить службы Firebase. После проверки поступления запросов нажмите Enforce , чтобы применить App Check .

  8. Повторите проверку и принудительное применение Firebase Authentication .

Если после регистрации приложения для App Check вы хотите запустить его в среде, которую App Check обычно не классифицирует как допустимую, например, локально во время разработки или из среды непрерывной интеграции (CI), вы можете создать отладочную сборку своего приложения, которая использует поставщик отладки App Check вместо настоящего поставщика подтверждения. Узнайте больше в разделе Использование App Check с поставщиком отладки в веб-приложениях .

Контролируйте свое приложение

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

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

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

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

Откатите свое развертывание

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

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

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

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

    3. Рядом с развертыванием, к которому вы хотите вернуться, нажмите More , затем выберите Откатиться к этой сборке и подтвердите.

    Узнайте больше в разделе Управление развертываниями и выпусками .

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

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

    2. В разделе Backend information нажмите Manage . Загрузится страница Domains .

    3. Рядом с вашим доменом нажмите More , затем выберите Отключить домен и подтвердите.

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

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

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

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

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

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

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

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

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

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

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

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

    • Мониторинговый метрический писатель ( roles/monitoring.metricWriter )
    • Агент Cloud Trace ( roles/cloudtrace.agent )
    • Писатель журналов ( roles/logging.logWriter )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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