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

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

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

Важно: Агент прототипирования приложений поддерживает создание приложений с помощью платформы Next.js. Чтобы использовать поддержку искусственного интеллекта с другими платформами в Firebase Studio , см. раздел «Попробуйте Gemini в Firebase с Firebase Studio .

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

• рабочее пространство Firebase Studio
• проект Firebase
• Firebase App Hosting

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

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

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

   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.
   

   Совет: Вы также можете загрузить изображение, сопровождающее ваше приглашение. Например, вы можете загрузить изображение, содержащее цветовую схему, которую вы хотите использовать в своем приложении, и указать Firebase Studio использовать ее. Изображения должны быть меньше 3 МБ.

3. Нажмите Прототип с помощью ИИ .

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

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

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

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

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

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

   Важно! Если вы выберете «Автогенерация» , App Prototyping agent создаст проект Firebase от вашего имени с префиксом, соответствующим имени вашего рабочего пространства Firebase Studio , и создаст в проекте новый ключ Gemini API . Он также сохраняет ключ в вашем рабочем пространстве Firebase Studio в файле .env . Чтобы получить доступ к новому проекту в любое время, щелкните имя проекта вверху страницы. Чтобы получить доступ к своему ключу API Gemini для копирования или удаления в будущем, используйте консоль Google Cloud .

Шаг 2. Тестируйте, уточняйте, отлаживайте и повторяйте.

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

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

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

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

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

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

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

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

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

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

Firebase App Hosting требуется учетная запись Cloud Billing . Когда вы привязываете платежный аккаунт к проекту Firebase, ваш проект автоматически обновляется до тарифного плана Blaze с оплатой по мере использования , а использование Gemini API переходит на платный уровень. С вас будет взиматься плата за использование платных услуг сверх бесплатной квоты. Дополнительные сведения см. в разделах «Оценки стоимости хостинга приложений» , «Цены на Firebase» и «Цены на API Gemini Developer» .

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

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

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

   Важно! Если вы не сгенерировали ключ Gemini API автоматически , Firebase Studio подготавливает проект Firebase от вашего имени, когда вы нажимаете «Опубликовать» . Вы можете получить доступ к проекту Firebase, щелкнув имя проекта в верхней части страницы.

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

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

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

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

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

   Важно! Привязка учетной записи для выставления счетов переводит ваш проект с бесплатного тарифного плана Spark на тарифный план Blaze с оплатой по мере использования. Узнайте больше о ценах на Firebase Studio .

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

   Совет: Если вы не хотите создавать внедрение сейчас, вы можете нажать Создать внедрение позже .

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

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

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

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

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

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

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

(Необязательно) Шаг 6. Используйте Genkit Monitoring для развернутых функций.

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

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

Важно: Genkit Monitoring использует данные телеметрии, записываемые в Google Cloud Logging, Metrics и Trace, которые являются платными услугами. Посетите страницу цен на Google Cloud Observability, чтобы получить подробную информацию о ценах и узнать об ограничениях уровня бесплатного использования.

Шаг 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. Щелкните один из потоков, чтобы открыть его.

   Совет: обратите внимание на раздел prompt в файле: вы можете отредактировать его вручную, чтобы уточнить ответы Gemini .

7. В нижней части раздела импорта файла добавьте следующее для импорта и включения FirebaseTelemetry :

   import { enableFirebaseTelemetry } from '@genkit-ai/firebase';
   
   enableFirebaseTelemetry();
   

   Совет: Дополнительные сведения о расширенных параметрах телеметрии в Genkit см. в разделе Расширенная конфигурация .

Шаг 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 .

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

• Узнайте, как разрабатывать приложения в рабочей среде Firebase Studio .
• Узнайте больше о помощи искусственного интеллекта в Firebase Studio .