Запустите свою веб-игру с использованием ИИ.

1. Введение

Обзор

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

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

Завершенная версия сайта-портфолио.

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

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

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

  • Как использовать режим сборки Google AI Studio для быстрого создания прототипа полнофункционального игрового сервиса с помощью обработки естественного языка.
  • Как реализовать архитектурный шаблон Event Sourcing с использованием Cloud Firestore для хранения истории игр.
  • Как 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 web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    Эта ссылка автоматически заполнит поле для ввода данных.
  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 отобразит кнопку «Исправить» в чате, позволяя вам попросить агента автоматически диагностировать и исправить проблему.
    Google AI Studio: Исправление расположения кнопки
  3. После входа в систему начните новый игровой матч, скопируйте сгенерированный короткий игровой код или ссылку для доступа и убедитесь, что она подходит для присоединения к матчу.
  4. Сделайте несколько ходов и убедитесь, что история матчей отображается корректно.
  5. Попробуйте вернуться к предыдущим ходам матча. Убедитесь, что игровое поле или состояние обновляются, отражая этот прошлый момент в истории игры, и проверьте, можете ли вы восстановить или откатиться к этому состоянию.
  6. Если вы хотите изменить стиль или поведение, дайте указание оператору через окно чата. Например:
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. Дождитесь обновления кода агентом и проверьте предварительный просмотр в браузере, чтобы увидеть обновления.

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

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

  1. В правом верхнем углу Google AI Studio нажмите кнопку «Опубликовать» , чтобы запустить мастер развертывания. Расположение кнопки публикации в Google AI Studio
  2. Нажмите «Начать» , чтобы настроить свой проект в Google Cloud.
    • Убедитесь, что выпадающий список «Целевой проект Google Cloud» соответствует проекту, связанному с вашей рабочей областью.
    • AI Studio автоматически сгенерирует уникальный идентификатор сервиса для экземпляра Cloud Run.
    • При желании вы можете указать пользовательский префикс URL-адреса .ai.studio (например, your-portfolio-name.ai.studio ) в рамках конфигурации развертывания.
  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 для прохождения следующего лабораторного занятия.

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