В этом руководстве показано, как использовать 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 идентификатор проекта, который вы хотите использовать вместо него. Например: "Переключиться на проект Firebase с идентификатором
<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 . Чтобы открыть эмулятор в своей рабочей области:
Нажмите
Переключитесь в Code и откройте расширение Firebase Studio ( Ctrl+',Ctrl+'илиCmd+',Cmd+'на MacOS).Прокрутите до раздела «Вспомогательные порты» и разверните его.
В столбце «Действия» , соответствующем порту 4000 , нажмите «Открыть в новом окне» .
Проверяйте и измеряйте производительность функций генеративного ИИ: вы можете использовать пользовательский интерфейс разработчика Genkit для запуска потоков Genkit AI, тестирования, отладки, взаимодействия с различными моделями, уточнения подсказок и многого другого.
Чтобы загрузить ваши потоки Genkit в пользовательский интерфейс разработчика Genkit и начать тестирование:
В терминале вашей рабочей области Firebase Studio выполните следующую команду, чтобы получить ключ API Gemini и запустить сервер Genkit:
npm run genkit:watchНажмите на ссылку Genkit Developer UI. В новом окне откроется Genkit Developer UI с вашими сценариями, подсказками, встраиваниями и выбором различных доступных моделей.
Узнайте больше о пользовательском интерфейсе разработчика Genkit в разделе «Инструменты разработчика Genkit» .
(Необязательный) Шаг 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 создаст для вас новый проект. Нажмите «Далее» , чтобы продолжить.
На этапе настройки учетной записи Link 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: Протестируйте опубликованное приложение
When publishing is complete and your app is deployed to Firebase, Cloud Firestore and Firebase Authentication are ready to test in production.
Создайте индексы для вашей базы данных Cloud Firestore
При развертывании приложения в Cloud Firestore индексы не создаются автоматически. Это означает, что после публикации вам может потребоваться создать индексы для ваших запросов.
Вы можете увидеть это в сообщениях об ошибках или в консоли разработчика вашего браузера.
Для создания индексов после публикации:
В опубликованном приложении: в панели обзора приложения (нажмите «Опубликовать» , если она не видна) найдите и нажмите ссылку «Посетите ваше приложение» .
В предварительной версии Firebase Studio : откройте консоль разработчика в браузере и найдите сообщение об ошибке 200, которое генерирует Cloud Firestore .
Протестируйте все потоки в вашем приложении. Может появиться ошибка, например, такая: «Ошибка загрузки рецептов. Для запроса требуется индекс. Вы можете создать его здесь:», со ссылкой на консоль Firebase .
Перейдите по ссылке в консоль Firebase , где появится рекомендуемый индекс.
Нажмите «Сохранить» , чтобы принять рекомендуемый индекс.
Вернитесь в приложение и перезагрузите страницу.
Продолжайте тестировать все сценарии в вашем приложении, чтобы добавить индексы там, где это необходимо.
Подробнее см. в разделе «Управление индексами в Cloud Firestore .
Просматривайте данные 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 позволяет запускать эти тесты локально, имитируя поведение ваших правил в рабочей среде. Это надежный способ проверить сложную логику правил и подтвердить покрытие для различных сценариев. После развертывания следует еще раз убедиться, что ваши модульные тесты, использующие эмулятор, работают должным образом и охватывают все сценарии.