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

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

Затем вы доработаете и улучшите приложение, прежде чем опубликовать его на Firebase App Hosting .

Важно: сохранение данных с помощью Cloud Firestore и Firebase Authentication внедряется постепенно и может быть недоступно повсеместно.

Если сохранение данных ещё не реализовано в вашем рабочем пространстве, Gemini может использовать локальное хранилище браузера и фиктивные данные аутентификации, если вы запросите базу данных и/или аутентификацию в своём проекте. Вы по-прежнему можете использовать дополнительные запросы или представление Code для реализации сохранения данных.

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

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

Войдите в свою учетную запись Google и откройте Firebase Studio .
В поле «Прототип приложения с ИИ» введите следующую команду, которая создаст приложение с рецептами на основе изображений, использующее камеру браузера и генеративный ИИ.
Например, вы можете ввести следующую подсказку, чтобы создать приложение для генерации рецептов:
```
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.
```
Совет: для достижения наилучших результатов будьте максимально конкретны в вашем запросе. Укажите нужные вам функции, рабочие процессы пользователей и требования к данным. При желании нажмите «Улучшить запрос» , чтобы попросить Gemini доработать ваш первоначальный запрос. Также имейте в виду, что наиболее эффективные процессы разработки с использованием ИИ являются итеративными, и вы можете продолжать совершенствовать и добавлять функции совместно с Gemini . Узнайте больше о создании эффективных запросов .
При желании вы можете загрузить изображение, которое будет сопровождать ваше приглашение. Например, вы можете загрузить изображение с цветовой схемой, которую вы хотите использовать в приложении, и указать Firebase Studio использовать её. Размер изображения должен быть менее 3 МБ.
Нажмите «Прототип с ИИ» .
Агент прототипирования приложений создает план приложения на основе вашего запроса, возвращая предлагаемое имя приложения, требуемые функции и рекомендации по стилю.
Проверьте проект. При необходимости внесите несколько изменений. Например, вы можете изменить предлагаемое название приложения или цветовую схему, используя один из следующих вариантов:
- Нажмите » , чтобы изменить чертеж. Внесите изменения и нажмите «Сохранить» .
- В поле «Опишите...» на панели чата добавьте уточняющие вопросы и контекст. Вы также можете загрузить дополнительные изображения.
Нажмите «Создать прототип этого приложения» .
Важно: Gemini может генерировать выходные данные, которые кажутся правдоподобными, но фактически неверны. Он может отправлять неточную информацию, не отражающую точку зрения Google. Перед использованием проверяйте все выходные данные Gemini и не используйте непроверенный сгенерированный код в рабочей среде. Не вводите в чат персональные данные (PII) или данные пользователей.
Агент прототипирования приложения начинает кодирование вашего приложения.
- Поскольку ваше приложение использует ИИ, вам будет предложено добавить или сгенерировать ключ API Gemini . Если вы нажмете «Сгенерировать автоматически», App Prototyping agent подготовит для вас проект Firebase и ключ API Gemini .
Важно: если вы выберете «Автоматическая генерация» , App Prototyping agent создаст проект Firebase от вашего имени с префиксом, соответствующим имени вашей рабочей области Firebase Studio , и создаст новый ключ Gemini API в проекте. Он также сохранит ключ в вашей рабочей области Firebase Studio в файле .env . Чтобы получить доступ к новому проекту в любое время, нажмите на имя проекта в верхней части страницы. Чтобы получить доступ к ключу Gemini API для копирования или удаления в будущем, используйте консоль Google Cloud .

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

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

Проверка и взаимодействие с вашим приложением: после завершения генерации кода появится предварительный просмотр вашего приложения. Вы можете напрямую взаимодействовать с предварительным просмотром, чтобы протестировать его. Подробнее см. в статье «Предварительный просмотр вашего приложения» .
Добавление Firebase Authentication Cloud Firestore и Firebase: на этапе итерации вы можете попросить 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.
```
Совет: Агент прототипирования приложений может добавить Firebase Authentication Cloud Firestore и Firebase в ваше приложение на этапе итерации, а не в первоначальный проект приложения.
Исправьте любые ошибки по мере их возникновения: в большинстве случаев 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 в нижней части рабочей области.
  Примечание: Приложения, созданные с помощью App Prototyping agent по умолчанию используют Prototyper chat in Code view. To use Gemini interactive chat , в разделе Gemini нажмите «+ » и выберите «Новый чат» . Чтобы вернуться в Prototyper chat, click history Recent chats , and then choose Prototyper chat .
- Откройте 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 или других внутренних служб) и помогает вам подключить учетную запись Cloud Billing .

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

Нажмите «Опубликовать» , чтобы настроить проект Firebase и опубликовать приложение. Откроется панель «Опубликовать приложение» .
Важно: если вы не сгенерировали ключ API Gemini автоматически и не запросили у App Prototyping agent создание проекта Firebase, Firebase Studio подготовит проект Firebase от вашего имени при нажатии кнопки «Опубликовать» . Вы можете получить доступ к проекту Firebase, щелкнув его имя в верхней части страницы.
На этапе проекта Firebase App Prototyping agent отображает проект Firebase, связанный с рабочей областью. Если проекта Firebase ещё нет, App Prototyping agent создаст новый. Нажмите «Далее» , чтобы продолжить.
На этапе «Привязать учетную запись Cloud Billing выберите один из следующих вариантов:
- Выберите учетную запись Cloud Billing , которую вы хотите связать с вашим проектом Firebase.
- Если у вас нет учётной записи Cloud Billing или вы хотите создать новую, нажмите «Создать учётную запись Cloud Billing . Откроется консоль Google Cloud , где вы можете создать новую учётную запись Cloud Billing для самостоятельного обслуживания . После создания учётной записи вернитесь в Firebase Studio и выберите её в списке «Связать с Cloud Billing .
Нажмите кнопку «Далее» . Firebase Studio связывает платежный аккаунт с проектом, связанным с вашим рабочим пространством, созданным либо при автоматической генерации ключа API Gemini , либо при нажатии кнопки «Опубликовать» .
Важно: Firebase App Hosting требуется аккаунт Cloud Billing . При привязке аккаунта к проекту Firebase ваш проект автоматически переходит на тарифный план Blaze с оплатой по факту использования , а использование Gemini API и других сервисов Firebase и Google Cloud переходит на платный уровень. За использование платных сервисов, превышающих бесплатную квоту, будет взиматься плата. Подробнее см. в разделах «Расходы App Hosting , «Цены на Firebase» и «Цены на Gemini Developer API» .
Нажмите «Настроить службы» . Агент прототипирования приложений начнет подготовку служб Firebase.
Нажмите «Опубликовать сейчас» . Firebase Studio настроит службы Firebase, а затем запустит развертывание App Hosting . Это может занять несколько минут. Чтобы узнать больше о том, что происходит за кулисами, см. статью «Процесс сборки App Hosting .
Совет: если вы не хотите публиковать сейчас, вы можете нажать «Опубликовать позже» .
После завершения публикации появится обзор приложения с URL-адресом и аналитикой приложения, основанной на данных наблюдения App Hosting . Чтобы использовать собственный домен (например, example.com или app.example.com) вместо домена, сгенерированного Firebase, вы можете добавить его в консоли Firebase .

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

(Рекомендуется) Шаг 4: протестируйте опубликованное приложение

После завершения публикации и развертывания вашего приложения в Firebase Cloud Firestore и Firebase Authentication готовы к тестированию в рабочей среде.

Просмотр данных Firebase Authentication Cloud Firestore и Firebase в консоли Firebase

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

Чтобы просмотреть работающую базу данных Cloud Firestore , откройте консоль Firebase и выберите «Создать» > «База данных Firestore» в навигационном меню.
Здесь вы можете проверять сохранённые данные, просматривать и тестировать правила безопасности, а также создавать индексы. Подробнее на сайте Cloud Firestore .
Чтобы просмотреть текущие данные Firebase Authentication , откройте консоль Firebase и выберите в меню навигации «Сборка» > «Аутентификация» .
Здесь вы можете проверить конфигурацию аутентификации и пользователей приложения. Подробнее см. в статье Firebase Authentication .

Тестирование правил Cloud Firestore в производственной среде

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

Вы можете протестировать свои правила, используя все следующие методы:

Тестирование приложений : взаимодействуйте с развёрнутым приложением, выполняя операции, запускающие различные шаблоны доступа к данным (чтение, запись, удаление) для разных ролей или состояний пользователей. Это тестирование в реальных условиях помогает подтвердить правильность применения ваших правил на практике.
Площадка для правил : для целевых проверок используйте площадку для правил в консоли Firebase . Этот инструмент позволяет моделировать запросы (чтение, запись, удаление) к базе данных Cloud Firestore , используя ваши производственные правила. Вы можете указать состояние аутентификации пользователя, путь к данным и тип операции, чтобы проверить, разрешают ли ваши правила доступ или запрещают его, как задумано.
Примечание: При развертывании правил безопасности во время публикации или с помощью Firebase CLI правила, определённые в каталоге проекта, перезаписывают любые существующие правила в консоли Firebase . Поэтому, если вы решите определить или изменить правила безопасности с помощью консоли Firebase , обязательно обновите и правила, определённые в каталоге проекта.
Модульное тестирование : для более полного тестирования вы можете написать модульные тесты для правил безопасности . Предварительная версия Firebase Studio на базе Firebase Local Emulator Suite позволяет запускать эти тесты локально, имитируя поведение ваших производственных правил. Это надёжный способ проверки сложной логики правил и подтверждения покрытия для различных сценариев. После развёртывания следует ещё раз проверить, что ваши модульные тесты с помощью эмулятора работают должным образом и охватывают все сценарии.