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

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

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

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

  1. Войдите в свою учетную запись Google и откройте Firebase Studio .

  2. В поле Prototype an app with AI введите описание приложения, которое вы хотите создать. Для этого решения, где вы создаете приложение с рецептами на основе изображений, вы можете использовать подсказку, подобную следующей, чтобы создать прототип приложения, которое использует камеру, генеративный ИИ:

    Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.

  3. Нажмите «Прототип с ИИ» .

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

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

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

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

  5. Нажмите Prototype this app . Gemini начнет кодировать ваше приложение. Поскольку в описании приложения указаны функции, требующие генеративного ИИ, Gemini запрашивает ключ API Gemini .

  6. Добавьте свой собственный ключ API Gemini или нажмите «Автоматически сгенерировать», чтобы сгенерировать ключ API Gemini .

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

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

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

  2. Продолжайте совершенствовать свое приложение, используя естественный язык: продолжайте использовать интерфейс чата, чтобы попросить Gemini добавить функции и улучшить приложение.

  3. Протестируйте приложение: В панели предварительного просмотра приложения загрузите изображение, на котором показаны различные продукты, чтобы проверить способность вашего приложения определять ингредиенты и предоставлять рецепт. При желании вы можете использовать представление Code , чтобы поделиться своим приложением публично и временно с помощью публичных предварительных просмотров Firebase Studio .

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

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

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

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

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

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

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

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

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

  2. На этапе проекта Firebase запишите имя проекта Firebase, который был создан для вас, затем нажмите кнопку Далее .

  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 , либо при нажатии Опубликовать . Затем App Hosting настраивает полностью управляемую среду для вашего приложения в Google Cloud .

  5. Нажмите Create your first rollout (Создать свой первый роллаут) . Firebase Studio запускает роллаут App Hosting . Это может занять до десяти минут. Чтобы узнать больше о том, что происходит за кулисами, см. The App Hosting build process (Процесс сборки App Hosting .

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

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

(Необязательно) Шаг 4: Контролируйте свое приложение

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

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

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

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

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

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

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

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

,

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

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

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

  1. Войдите в свою учетную запись Google и откройте Firebase Studio .

  2. В поле Prototype an app with AI введите описание приложения, которое вы хотите создать. Для этого решения, где вы создаете приложение с рецептами на основе изображений, вы можете использовать подсказку, подобную следующей, чтобы создать прототип приложения, которое использует камеру, генеративный ИИ:

    Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.

  3. Нажмите «Прототип с ИИ» .

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

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

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

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

  5. Нажмите Prototype this app . Gemini начнет кодировать ваше приложение. Поскольку в описании приложения указаны функции, требующие генеративного ИИ, Gemini запрашивает ключ API Gemini .

  6. Добавьте свой собственный ключ API Gemini или нажмите «Автоматически сгенерировать», чтобы сгенерировать ключ API Gemini .

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

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

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

  2. Продолжайте совершенствовать свое приложение, используя естественный язык: продолжайте использовать интерфейс чата, чтобы попросить Gemini добавить функции и улучшить приложение.

  3. Протестируйте приложение: В панели предварительного просмотра приложения загрузите изображение, на котором показаны различные продукты, чтобы проверить способность вашего приложения определять ингредиенты и предоставлять рецепт. При желании вы можете использовать представление Code , чтобы поделиться своим приложением публично и временно с помощью публичных предварительных просмотров Firebase Studio .

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

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

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

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

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

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

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

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

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

  2. На этапе проекта Firebase запишите имя проекта Firebase, который был создан для вас, затем нажмите кнопку Далее .

  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 , либо при нажатии Опубликовать . Затем App Hosting настраивает полностью управляемую среду для вашего приложения в Google Cloud .

  5. Нажмите Create your first rollout (Создать свой первый роллаут) . Firebase Studio запускает роллаут App Hosting . Это может занять до десяти минут. Чтобы узнать больше о том, что происходит за кулисами, см. The App Hosting build process (Процесс сборки App Hosting .

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

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

(Необязательно) Шаг 4: Контролируйте свое приложение

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

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

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

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

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

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

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

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