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

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

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

  • Если ваше приложение использует ИИ: Firebase Studio добавляет API Gemini Developer в ваше приложение, используя возможности потоков 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. Нажмите «Прототип с ИИ» .

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

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

    • Нажмите « », чтобы изменить чертеж. Внесите изменения и нажмите «Сохранить» .

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

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

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

    • Если ваше приложение использует ИИ, вам будет предложено добавить или сгенерировать ключ 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 view, you can also use the following features:

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

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

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

  • Создайте проект Firebase: Агент прототипирования приложений подготавливает проект Firebase от вашего имени, когда вы:

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

    Чтобы изменить проект Firebase, подключенный к вашей рабочей области, сообщите App Prototyping agent ID проекта, который вы хотите использовать. Например, «Переключиться на проект Firebase с ID <your-project-id> ».

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

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

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

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

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

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

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

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

      1. Щелкните Переключатель кода значок Переключитесь в режим «Код» и откройте расширение Firebase Studio ( Ctrl+',Ctrl+' или Cmd+',Cmd+' на MacOS).

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

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

  • Тестируйте и измеряйте производительность функций генеративного ИИ: вы можете использовать пользовательский интерфейс разработчика 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. Нажмите «Опубликовать» , чтобы настроить проект Firebase и опубликовать приложение. Откроется панель «Опубликовать приложение» .

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

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

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

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

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

  5. Нажмите «Настроить службы» . Агент прототипирования приложений начнет подготовку служб 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. Скопируйте и сохраните свой идентификатор ключа и перейдите к настройке 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» и перепроверьте!) или следуйте инструкциям в разделе «Инициализация App Check .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Дополнительную информацию можно найти в разделе Управление развертываниями и выпусками .

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

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

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

    3. Рядом с вашим доменом нажмите More , затем выберите Disable domain и подтвердите.

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

    • Мониторинговый метрический писатель ( roles/monitoring.metricWriter )
    • Cloud Trace Agent ( 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 .

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