В этом руководстве показано, как использовать 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: Протестируйте опубликованное приложение
После завершения публикации и развертывания вашего приложения в Firebase, Cloud Firestore и Firebase Authentication будут готовы к тестированию в производственной среде.
Создайте индексы для вашей базы данных 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 позволяет запускать эти тесты локально, имитируя поведение ваших правил в рабочей среде. Это надежный способ проверить сложную логику правил и подтвердить покрытие для различных сценариев. После развертывания следует еще раз убедиться, что ваши модульные тесты, использующие эмулятор, работают должным образом и охватывают все сценарии.