Как разработать и опубликовать полнофункциональное веб-приложение, а также отслеживать его статистику с помощью инструмента прототипирования

В этом руководстве показано, как использовать App Prototyping agent для быстрой разработки и публикации полнофункционального приложения с помощью Gemini в Firebase . Вы будете использовать подсказки на естественном языке для создания приложения Next.js, которое распознаёт продукты питания по изображению или снимку с камеры браузера и генерирует рецепт с указанными ингредиентами.

Другие технологии, которые вы будете использовать при изучении этого руководства, включают:

Шаг 1: Создайте свое приложение

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

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

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

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

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

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

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

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

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

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

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

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

    В Prototyper mode, 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

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

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

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

    • Помощь ИИ с Gemini в Firebase можно реализовать либо встроенным в код, либо с помощью интерактивного чата (оба доступны по умолчанию). Интерактивный чат позволяет диагностировать проблемы, предлагать решения и запускать инструменты для ускорения исправления ошибок в приложении. Чтобы открыть чат, нажмите на значок 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 .

(Необязательно) Шаг 3: Опубликуйте свое приложение с помощью App Hosting

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

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

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

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

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

  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 .

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

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

(Рекомендуется) Шаг 6: Добавьте Firebase App Check в свое приложение

Если вы интегрировали в своё приложение сервисы 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 . Попробуйте протестировать функции Firebase, чтобы сгенерировать данные.

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

  7. Нажмите, чтобы проверить службы Firebase. Убедившись в поступлении запросов, нажмите «Применить» , чтобы применить App Check .

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

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

(Необязательно) Шаг 7: Мониторинг вашего приложения

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

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

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

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

(Необязательно) Шаг 8: Откатите развертывание

Если вы развернули несколько версий своего приложения на 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 , следуйте инструкциям в разделе Удаление бэкенда .

(Необязательно) Шаг 9: Используйте 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 .

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