Запустите свое веб-приложение для управления задачами с помощью ИИ.

1. Введение

Обзор

С чего сегодня начинается разработка с использованием ИИ? Для большинства из нас это начинается с простого запроса или прототипа. Google AI Studio предлагает мощный режим сборки (часто называемый «программированием на основе Vibe»), который позволяет проектировать, тестировать и создавать полнофункциональные веб-приложения, используя генерацию кода на основе моделей Gemini.

В этом практическом занятии вы создадите приложение для совместной работы над списками дел, используя базу данных Firestore для постоянного хранения данных и аутентификацию Firebase для входа пользователей. Агент AI Studio настроит все серверные службы и напишет код для взаимодействия с фронтендом и базой данных. После завершения разработки приложения вы развернете его прямо в Cloud Run одним щелчком мыши.

Что вы будете делать

• Предложите Google AI Studio разработать прототип веб-приложения для совместного составления списков дел.
• Настройте и включите интеграцию с Firebase для создания базы данных Firestore и настройки аутентификации через Google Sign-In.
• Протестируйте приложение в интерактивной тестовой среде предварительного просмотра.
• Разверните приложение в Cloud Run непосредственно из пользовательского интерфейса Google AI Studio.

Что вы узнаете

• Как использовать режим сборки Google AI Studio для быстрого создания прототипа полнофункционального сервиса с помощью обработки естественного языка.
• Как Google AI Studio автоматически настраивает интеграцию с Firebase Firestore и системой аутентификации.
• Как развернуть приложение AI Studio в виде бессерверного контейнера на платформе Cloud Run.
• Как проверить записи базы данных и состояние безопасности в консоли Firebase.

2. Настройка проекта

Перед запуском AI Studio проверьте статус своей учетной записи и необходимые условия.

Информация об учетной записи Google и уровне доступа

1. Если у вас еще нет учетной записи Google, создайте ее .
   • Совет : По возможности используйте для этой лабораторной работы личную учетную запись Google. Групповые, корпоративные или школьные учетные записи могут применять политики Workspace, которые отключают экспериментальные функции или интеграцию с облачными сервисами.
2. Проверьте платежные данные для развертывания:
   • Стартовый уровень Google Cloud : позволяет бесплатно опубликовать до двух полнофункциональных приложений в выбранном регионе без необходимости создания полноценного платежного аккаунта Google Cloud.
   • Стандартное развертывание : Подключается к существующему платному проекту Google Cloud и расширяет лимиты хранилища, ресурсы ЦП и API.

3. Создайте приложение «Список дел» в режиме сборки AI Studio.

Давайте создадим оболочку приложения и поручим помощнику по программированию на основе ИИ разработать уровни безопасности и обеспечения постоянного хранения данных.

1. Перейдите в панель «Приложения Google AI Studio» и нажмите «Создать приложение» .
2. В поле чата введите описание вашего приложения для списка дел:

   Build a collaborative to-do list application using Firebase as a
   backend. Users must be able to securely sign in using Google Sign-In,
   view their personal tasks, add new task items, toggle status as
   completed, and delete tasks. The database must isolate tasks so users
   can only view and modify their own records.
   

3. Нажмите «Создать» , чтобы начать процесс генерации приложения.

Когда агент AI Studio распознает необходимость в хранении данных в базе данных и безопасном входе пользователей, он запускает автоматизированный процесс настройки Firebase.

1. Примерно через минуту в рабочей области появляется карточка интеграции для включения Firebase .
2. Нажмите кнопку «Включить Firebase» , чтобы подтвердить и принять условия предоставления услуг.
3. Агент выполнит фоновую настройку. Внутри системы:
   • Создан экземпляр базы данных Firestore.
   • Аутентификация Firebase включена, а вход через Google активирован.
   • Создается конфигурация сервисной учетной записи (например, создается src/lib/firebase.ts содержащий учетные данные API).
   • Добавлен файл firestore.rules , содержащий границы безопасности по умолчанию (правила изоляции пользователей).

4. Тестирование и итерации.

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

1. Откройте панель предварительного просмотра в Google AI Studio.
2. Нажмите кнопку «Войти», чтобы запустить тестовую аутентификацию Google Sign-In.
   • Примечание по исправлению ошибок : Во время генерации или тестирования вы можете иногда сталкиваться с проблемами во время выполнения, ошибками компиляции или сбоями разрешений Firestore из-за несоответствия правил безопасности. В этом случае AI Studio отобразит кнопку «Исправить» в чате, позволяя вам попросить агента автоматически диагностировать и исправить проблему.
   
3. После входа в систему добавьте несколько задач (например, «Просмотреть документацию Cloud Run», «Завершить Codelab»).
4. Чтобы обеспечить корректное обновление обработчиков на стороне клиента и состояния базы данных, отметьте некоторые задачи как выполненные и удалите одну.
5. Если вы хотите изменить стиль или поведение, дайте указание оператору через окно чата. Например:
   • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
   • "Show a count of remaining incomplete tasks at the footer of the task list."
6. Дождитесь обновления кода агентом и проверьте предварительный просмотр в браузере, чтобы увидеть обновления.

5. Развертывание в облаке

После того как ваш прототип будет полностью работоспособен, разверните его в качестве общедоступного сервиса в Cloud Run.

1. В правом верхнем углу Google AI Studio нажмите кнопку «Опубликовать» , чтобы запустить мастер развертывания.
2. Нажмите «Начать» , чтобы настроить свой проект в Google Cloud.
   • Убедитесь, что выпадающий список «Целевой проект Google Cloud» соответствует проекту, связанному с вашей рабочей областью.
   • AI Studio автоматически сгенерирует уникальный идентификатор сервиса для экземпляра Cloud Run.
3. Если вы выполняете развертывание впервые и используете стандартные параметры Google Cloud, вам может быть предложено указать тип организации и предоставить платежные данные.
4. Нажмите «Опубликовать приложение» .
5. Этапы сборки контейнера, его регистрации и развертывания сервиса происходят в фоновом режиме. Обычно этот процесс занимает 2–4 минуты.
6. После завершения развертывания скопируйте сгенерированный URL-адрес приложения и откройте ссылку на работающее приложение в новой вкладке браузера.
7. Протестируйте работающее веб-приложение в своем браузере!

6. Проверьте в консоли Firebase.

Заглянем под капот, чтобы увидеть, как отслеживаются схемы данных и пользователи.

1. Перейдите в консоль Firebase .
2. Выберите свой проект (с меткой AI Studio или идентификатором проекта, привязанным вручную).
3. В левой панели навигации выберите Build > Firestore Database :
   • Просмотрите коллекции баз данных и документы, созданные вашим приложением.
   • Убедитесь, что идентификатор владельца каждого документа совпадает с учетными данными активного пользователя.
4. В панели Firestore выберите вкладку «Безопасность» , чтобы просмотреть автоматически сгенерированные директивы безопасности, ограничивающие права на чтение и запись только для подтвержденных владельцев документов.
5. Перейдите в раздел «Безопасность» > «Аутентификация» , чтобы увидеть список активных учетных данных пользователей, отображаемых во время проверки входа в систему.

7. Уборка

Чтобы избежать непредвиденных расходов или упорядочить ресурсы вашего рабочего пространства:

1. В Google AI Studio перейдите на страницу «Приложения» .
2. Найдите свою заявку в сетке или списке.
3. Нажмите на значок корзины, чтобы удалить состояние приложения и отменить публикацию сервиса в Cloud Run.
4. Если вы использовали стандартный проект для развертывания и хотите полностью отключить все ресурсы, перейдите в настройки проекта в консоли Google Cloud и удалите соответствующий проект.

8. Заключение

Поздравляем! Вы разработали, создали и развернули полнофункциональное веб-приложение для совместной работы непосредственно в Google AI Studio.

Чтобы получить значок за прохождение строительной лаборатории и найти другую лабораторию для продолжения своего путешествия, перейдите по ссылке goo.gle/builders .

Узнать больше

• Руководство по правилам безопасности Firestore
• Документация Cloud Run
• Создавайте приложения в Google AI Studio.