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

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

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

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

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

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

В этом руководстве также используются следующие технологии:

• Firebase Studio workspace
• проект Firebase;
• Firebase App Hosting
• Cloud Firestore
• Firebase Authentication
• Firebase App Check

Важно! App Prototyping agent поддерживает создание приложений с помощью фреймворка Next.js. Чтобы использовать ИИ-помощника с другими фреймворками в Firebase Studio, прочитайте статью Как использовать Gemini с Firebase Studio

.

Шаг 1. Генерация приложения

1. Войдите в аккаунт Google и откройте Firebase Studio.

2. В поле Prototype an app with AI (Создать прототип приложения с помощью ИИ) введите следующий запрос, чтобы создать приложение с рецептами на основе изображений, которое использует камеру браузера и генеративный искусственный интеллект.

   Например, вы можете ввести запрос, подобный следующему, чтобы создать приложение для генерации рецептов:

   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. Подробнее о том, как составлять эффективные запросы…

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

4. Нажмите Прототип с ИИ.

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

5. Проверьте чертеж. При необходимости внесите изменения. Например, вы можете изменить предложенное название приложения или цветовую схему, используя один из следующих вариантов:

   • Нажмите Настроить и измените план. Внесите изменения и нажмите Сохранить.

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

6. Нажмите Создать прототип приложения.

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

7. App Prototyping agent начинает писать код для приложения.

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

Шаг 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 может добавить Cloud Firestore и Firebase Authentication в приложение на этапе итерации, а не в первоначальный план приложения.

• Исправьте ошибки, если они возникнут. В большинстве случаев App Prototyping agent предложит вам исправить возникшие ошибки. Нажмите Исправить ошибку, чтобы разрешить системе попытаться устранить проблему.

  Если вы получаете ошибки, которые не предлагается исправить автоматически, скопируйте ошибку и любой соответствующий контекст (например, "Можете ли вы исправить эту ошибку в моем коде инициализации Firebase?") в окно чата и отправьте его Gemini.

  Совет. Gemini объясняет свои действия, но вы также можете попросить его объяснить план до того, как он будет выполнен.

• Протестируйте и доработайте приложение, используя естественный язык. Тщательно протестируйте приложение и используйте App Prototyping agent, чтобы доработать код и схему.

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

  • Нажмите Аннотация, чтобы рисовать прямо в окне предварительного просмотра. Используйте доступные инструменты для работы с фигурами, изображениями и текстом, а также текстовые запросы, чтобы описать, что App Prototyping agent должен изменить.

  • Нажмите Выбрать, чтобы выбрать определенный элемент и ввести инструкции для App Prototyping agent. Это позволяет быстро нацелиться на конкретный значок, кнопку, фрагмент текста или другой элемент. Нажав на изображение, вы также можете найти и выбрать изображение из фотобанка Unsplash.

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

• Создайте проект Firebase. App Prototyping agent создает проект Firebase от вашего имени, когда вы:

  • Автоматически сгенерировать ключ Gemini API
  • Как запросить подключение приложения к проекту 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.

• Отлаживайте и дорабатывайте код. Нажмите Switch to Code (Просмотр кода), чтобы перейти в Code view (Режим просмотра кода). В нем вы можете увидеть все файлы приложения и изменить код. Вы можете вернуться в режим Prototyper в любое время.

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

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

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

    Примечание. Приложения, созданные с помощью App Prototyping agent, по умолчанию используют чат Prototyper в представлении Code. Чтобы использовать интерактивный чат Gemini, в разделе Gemini нажмите + и выберите Новый чат. Чтобы вернуться в чат Prototyper, нажмите Недавние чаты и выберите Prototyper chat.

  • Получите доступ к Firebase Local Emulator Suite, чтобы посмотреть данные базы данных и аутентификации. Чтобы открыть эмулятор в рабочей области:

    1. Нажмите Переключиться на Code и откройте расширение Firebase Studio (Ctrl+',Ctrl+', или Cmd+',Cmd+' на устройстве с macOS).

    2. Прокрутите страницу до раздела Порты серверной части и разверните его.

    3. В столбце Действия, который соответствует порту 4000, нажмите Открыть в новом окне.

• Тестируйте и оценивайте эффективность функций на основе генеративного ИИ. С помощью Genkit Developer UI вы можете запускать процессы ИИ в Genkit, тестировать и отлаживать их, взаимодействовать с разными моделями, уточнять запросы и выполнять другие действия.

  Чтобы загрузить процессы Genkit в Genkit Developer UI и начать тестирование, выполните следующие действия:

  1. В терминале рабочей области Firebase Studio выполните следующую команду, чтобы получить ключ Gemini API и запустить сервер Genkit:

      npm run genkit:watch
     

  2. Нажмите на ссылку Genkit Developer UI. Genkit Developer UI откроется в новом окне. Вы увидите свои процессы, запросы, эмбеддеры и доступные модели.

  Подробнее о Genkit Developer UI можно узнать в статье Инструменты разработчика Genkit.

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

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

Важно! Для использования Firebase App Hosting требуется аккаунт Cloud Billing. Когда вы связываете платежный аккаунт с проектом Firebase, проект автоматически переводится на тарифный план Blaze с оплатой по мере использования, а Gemini API и другие сервисы Firebase и Google Cloud – на платный уровень. Вы будете платить за использование платных сервисов, превышающее бесплатную квоту. Подробнее о расходах на App Hosting, ценах на Firebase и ценах на Gemini Developer API…

При настройке App Hosting Firebase Studio создает для вас проект Firebase (если он не был создан автоматически при генерации ключа Gemini API или других сервисов бэкенда) и помогает связать аккаунт Cloud Billing.

Чтобы опубликовать приложение, выполните следующие действия:

1. Нажмите Publish (Опубликовать), чтобы настроить проект Firebase и опубликовать приложение. Появится панель Publish your app (Опубликовать приложение).

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

2. На шаге Проект Firebase в App Prototyping agent отображается проект Firebase, связанный с рабочей областью. Если проекта Firebase ещё нет, App Prototyping agent создаст его. Нажмите Далее.

3. На шаге Связывание аккаунта Cloud Billing выберите один из следующих вариантов:

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

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

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

   Важно! Для использования Firebase App Hosting требуется аккаунт Cloud Billing. Когда вы связываете платежный аккаунт с проектом Firebase, проект автоматически переводится на тарифный план Blaze с оплатой по мере использования, а Gemini API и другие сервисы Firebase и Google Cloud – на платный уровень. Вы будете платить за использование платных сервисов, превышающее бесплатную квоту. Подробнее о расходах на App Hosting, ценах на Firebase и ценах на Gemini Developer API…

5. Нажмите Настроить сервисы. App Prototyping agent начнет инициализацию сервисов Firebase.

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

   Совет. Если вы не хотите публиковать панель сейчас, нажмите Опубликовать позже.

7. После публикации откроется страница Обзор приложения с URL и статистикой приложения, полученной с помощью наблюдаемости App Hosting. Чтобы использовать собственный домен (например, example.com или app.example.com) вместо домена, созданного Firebase, вы можете добавить собственный домен в консоли Firebase.

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

Подробнее App Hosting о App Hosting и принципах его работы…

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

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

Создайте индексы для базы данных Cloud Firestore

При развертывании приложения в Cloud Firestore индексы не создаются автоматически. Это означает, что после публикации вам может потребоваться создать индексы для запросов.

Вы можете увидеть это в сообщениях об ошибках или в консоли разработчика в браузере.

Чтобы сгенерировать индексы после публикации:

1. Из опубликованного приложения. На панели Обзор приложения (если она не видна, нажмите Опубликовать) найдите и нажмите ссылку Перейти к приложению.

   В предварительной версии Firebase Studio. Откройте консоль разработчика в браузере и найдите сообщение об ошибке 200, которое генерирует Cloud Firestore.

2. Протестируйте все процессы в приложении. Может появиться сообщение об ошибке, например "Ошибка при загрузке рецептов. Для запроса требуется индекс. You can create it here:" (Вы можете создать его здесь:) и ссылка на консоль Firebase.

3. Перейдите по ссылке в консоль Firebase, и вы увидите рекомендуемый индекс.

4. Нажмите Сохранить, чтобы принять рекомендуемый индекс.

5. Вернитесь в приложение и обновите страницу.

6. Продолжайте тестировать все процессы в приложении, чтобы при необходимости добавлять индексы.

Совет. Вы можете попросить Gemini сгенерировать индексы, но обязательно проверьте результат.

Подробнее о том, как управлять индексами в Cloud Firestore…

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

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

• Чтобы посмотреть активную базу данных Cloud Firestore, откройте консоль Firebase и в меню навигации выберите Build (Создание) > Firestore Database (База данных Firestore).

  Здесь вы можете проверять сохраненные данные, просматривать и тестировать правила безопасности, а также создавать индексы. Подробную информацию можно найти на странице Cloud Firestore.

• Чтобы посмотреть данные Firebase Authentication в реальном времени, откройте консоль Firebase и в меню навигации выберите Build (Создание) > Authentication (Аутентификация).

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

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

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

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

• Тестирование приложения. Взаимодействуйте с развернутым приложением, выполняя операции, которые запускают различные шаблоны доступа к данным (чтение, запись, удаление) для разных ролей или состояний пользователей. Это поможет убедиться, что правила работают правильно.

• Песочница правил. Для целевых проверок используйте песочницу правил в консоли Firebase. Этот инструмент позволяет симулировать запросы (чтение, запись, удаление) к базе данных Cloud Firestore с использованием рабочих правил. Вы можете указать статус аутентификации пользователя, путь к данным и тип операции, чтобы проверить, разрешают или запрещают ваши правила доступ, как задумано.

  Примечание. Когда вы развертываете правила безопасности в процессе публикации или с помощью Firebase CLI, правила, определенные в каталоге проекта, перезаписывают все существующие правила в консоли Firebase. Поэтому, если вы решите определить или изменить правила безопасности в консоли Firebase, не забудьте обновить правила, определенные в каталоге проекта.

• Модульное тестирование. Для более комплексного тестирования вы можете написать модульные тесты для правил безопасности. Бэкенд предварительного просмотра Firebase Studio на основе Firebase Local Emulator Suite позволяет запускать эти тесты локально, имитируя поведение рабочих правил. Это надежный способ проверить сложную логику правил и убедиться, что они охватывают различные сценарии. После развертывания убедитесь, что модульные тесты с использованием эмулятора работают должным образом и охватывают все сценарии.