В этом руководстве показано, как использовать App Prototyping agent для быстрой разработки и публикации полнофункционального приложения с помощью Gemini в Firebase . Вы будете использовать подсказки на естественном языке для создания приложения Next.js, которое распознаёт продукты питания по фотографии или снимку с камеры браузера, предоставленному зарегистрированным пользователем, и генерирует рецепт с указанными ингредиентами. Пользователи смогут сохранить рецепт в базе данных с возможностью поиска.
Затем вы доработаете и улучшите приложение, прежде чем опубликовать его на Firebase App Hosting .
Другие технологии, которые вы будете использовать при изучении этого руководства, включают:
- рабочее пространство Firebase Studio
- проект Firebase
- Firebase App Hosting
- Cloud Firestore
- Firebase Authentication
- Firebase App Check
Шаг 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.При желании вы можете загрузить изображение, которое будет сопровождать ваше приглашение. Например, вы можете загрузить изображение с цветовой схемой, которую вы хотите использовать в приложении, и указать Firebase Studio использовать её. Размер изображения должен быть менее 3 МБ.
Нажмите «Прототип с ИИ» .
Агент прототипирования приложений создает план приложения на основе вашего запроса, возвращая предлагаемое имя приложения, требуемые функции и рекомендации по стилю.
Проверьте план. При необходимости внесите несколько изменений. Например, вы можете изменить предлагаемое название приложения или цветовую схему, используя один из следующих вариантов:
Нажмите « », чтобы изменить чертеж. Внесите изменения и нажмите «Сохранить» .
В поле «Опишите...» на панели чата добавьте уточняющие вопросы и контекст. Вы также можете загрузить дополнительные изображения.
Нажмите «Создать прототип этого приложения» .
Агент прототипирования приложения начинает кодирование вашего приложения.
- Поскольку ваше приложение использует ИИ, вам будет предложено добавить или сгенерировать ключ API Gemini . Если вы нажмете «Сгенерировать автоматически», App Prototyping agent подготовит для вас проект Firebase и ключ API Gemini .
Шаг 2: Тестирование, уточнение, отладка и итерация
После создания начального приложения вы можете его тестировать, дорабатывать, отлаживать и повторять.
Проверка и взаимодействие с вашим приложением: после завершения генерации кода появится предварительный просмотр вашего приложения. Вы можете напрямую взаимодействовать с предварительным просмотром, чтобы протестировать его. Подробнее см. в статье «Предварительный просмотр вашего приложения» .
Добавление аутентификации 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 для просмотра данных базы данных и аутентификации . Чтобы открыть эмулятор в рабочей области:
Щелкните
Переключитесь в режим «Код» и откройте расширение Firebase Studio ( Ctrl+',Ctrl+'илиCmd+',Cmd+'на MacOS).Прокрутите страницу до раздела Внутренние порты и разверните его.
В столбце Действия , соответствующем порту 4000 , нажмите Открыть в новом окне .
Тестируйте и измеряйте производительность функций генеративного ИИ: вы можете использовать пользовательский интерфейс разработчика Genkit для запуска потоков ИИ Genkit, тестирования, отладки, взаимодействия с различными моделями, уточнения подсказок и многого другого.
Чтобы загрузить потоки Genkit в пользовательский интерфейс разработчика Genkit и начать тестирование:
В терминале в рабочей области Firebase Studio выполните следующую команду, чтобы получить ключ API Gemini и запустить сервер Genkit:
npm run genkit:watchНажмите ссылку «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 и опубликовать приложение. Откроется панель «Опубликовать приложение» .
На этапе проекта 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.
Нажмите «Опубликовать сейчас» . 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 готовы к тестированию в рабочей среде.
Просмотр данных аутентификации Cloud Firestore и Firebase Authentication в консоли Firebase
После публикации вы можете просматривать оперативные данные из вашего приложения в консоли Firebase .
Чтобы просмотреть работающую базу данных Cloud Firestore , откройте консоль Firebase и выберите «Создать» > «База данных Firestore» в навигационном меню.
Здесь вы можете проверять сохранённые данные, просматривать и тестировать правила безопасности, а также создавать индексы. Подробнее на сайте Cloud Firestore .
Чтобы просмотреть текущие данные Firebase Authentication , откройте консоль Firebase и выберите в меню навигации «Сборка» > «Аутентификация» .
Здесь вы можете проверить конфигурацию аутентификации и пользователей приложения. Подробнее см. в статье Firebase Authentication .
Тестирование правил Cloud Firestore в производственной среде
После публикации приложения следует повторно протестировать правила безопасности Cloud Firestore в вашей производственной среде. Это поможет гарантировать доступность данных для авторизованных пользователей и защиту от несанкционированного доступа.
Вы можете протестировать свои правила, используя все следующие методы:
Тестирование приложений : взаимодействуйте с развёрнутым приложением, выполняя операции, запускающие различные шаблоны доступа к данным (чтение, запись, удаление) для разных ролей или состояний пользователей. Это тестирование в реальных условиях помогает подтвердить правильность применения ваших правил на практике.
Площадка для правил : для целевых проверок используйте площадку для правил в консоли Firebase . Этот инструмент позволяет моделировать запросы (чтение, запись, удаление) к базе данных Cloud Firestore используя ваши производственные правила. Вы можете указать состояние аутентификации пользователя, путь к данным и тип операции, чтобы проверить, разрешают ли ваши правила доступ или запрещают его, как задумано.
Модульное тестирование : для более полного тестирования вы можете написать модульные тесты для правил безопасности . Предварительная версия Firebase Studio на базе Firebase Local Emulator Suite позволяет запускать эти тесты локально, имитируя поведение ваших производственных правил. Это надёжный способ проверки сложной логики правил и подтверждения покрытия для различных сценариев. После развёртывания следует ещё раз проверить, что ваши модульные тесты с помощью эмулятора работают должным образом и охватывают все сценарии.