1. Введение
В этом практическом занятии вы создадите CloudCrush , аркадную игру в жанре «три в ряд», используя Gemini 3 и агент программирования Antigravity . Игра будет написана на языке Go и развернута в облаке Google с помощью Cloud Run.
Обратите внимание, что хотя знание языка Go рекомендуется, оно не является обязательным для участия в этом мастер-классе, поскольку всю работу по программированию будет выполнять сам агент. Главная цель этого практического занятия — развить навыки управления агентом для создания приложений вместо написания кода вручную.
Этот практический семинар предназначен для разработчиков среднего уровня, желающих изучить продвинутые рабочие процессы с использованием агентов. Ориентировочная общая продолжительность семинара составляет 60 минут . Ресурсы, используемые в этом семинаре, оплачиваются по факту использования.
Что вы будете делать
- Разработайте основную логику игры «Три в ряд» с использованием языка Go и фреймворка Ebitengine.
- Адаптируйте игру для запуска в веб-браузере с помощью WebAssembly (WASM).
- Разверните игру и её API для сбора рекордов в Cloud Run .
- Организация работы специализированных субагентов и расширений для тестирования и проверки кода.
Предварительные требования
- Базовые знания языков программирования.
- Базовые знания облачной инфраструктуры.
- Базовые знания консоли Google Cloud.
Что вы узнаете
- Как работать с программистом для создания сложных приложений
- Как работать с Близнецами в мультимодальном контексте
- Как развернуть приложения в облаке с помощью Cloud Run
Что вам понадобится
Этот семинар можно провести полностью в облаке с использованием Cloud Shell, но если вы предпочитаете использовать локальный компьютер, вам потребуется следующее:
- Antigravity 2.0 и Antigravity CLI. Скачайте и установите их, следуя инструкциям на сайте antigravity.google.
- Инструментарий Go (версия 1.26 или выше). Загрузите и установите его, следуя инструкциям на go.dev.
- Интерфейс командной строки gcloud для взаимодействия с Google Cloud. Загрузите и установите его, следуя инструкциям в документации Google Cloud.
- Платежный аккаунт Google Cloud (для развертывания игры в облаке)
Ключевые технологии
Здесь вы найдете более подробную информацию о технологиях, которые мы будем использовать:
- Antigravity CLI : агент разработки
- Gemini 3 : последняя версия нашей передовой модели обработки больших языков.
2. Настройка среды
Выберите один из следующих вариантов: Самостоятельная настройка среды, если вы хотите выполнить это практическое занятие на своем компьютере, или Запуск Cloud Shell, если вы хотите выполнить это практическое занятие полностью в облаке.
Настройка среды для самостоятельного обучения
- Войдите в консоль Google Cloud и создайте новый проект или используйте существующий. Если у вас еще нет учетной записи Gmail или Google Workspace, вам необходимо ее создать .
- Название проекта — это отображаемое имя участников данного проекта. Это строка символов, не используемая API Google. Вы всегда можете его изменить.
- Идентификатор проекта уникален для всех проектов Google Cloud и является неизменяемым (его нельзя изменить после установки). Консоль Cloud автоматически генерирует уникальную строку; обычно вам неважно, какая она. В большинстве практических заданий вам потребуется указать идентификатор вашего проекта (обычно обозначается как
PROJECT_ID). Если сгенерированный идентификатор вас не устраивает, вы можете сгенерировать другой случайный идентификатор. В качестве альтернативы вы можете попробовать свой собственный и посмотреть, доступен ли он. После этого шага его нельзя изменить, и он сохраняется на протяжении всего проекта. - К вашему сведению, существует третье значение — номер проекта , которое используется некоторыми API. Подробнее обо всех трех значениях можно узнать в документации .
- Далее вам потребуется включить оплату в консоли Cloud для использования ресурсов/API Cloud. Выполнение этого практического задания не потребует больших затрат, если вообще потребует. Чтобы отключить ресурсы и избежать дополнительных расходов после завершения этого урока, вы можете удалить созданные ресурсы или удалить проект. Новые пользователи Google Cloud имеют право на бесплатную пробную версию стоимостью 300 долларов США .
Запустить Cloud Shell
Хотя Google Cloud можно управлять удаленно с ноутбука, в этом практическом занятии вы будете использовать Google Cloud Shell — среду командной строки, работающую в облаке.
В консоли Google Cloud нажмите на значок Cloud Shell на панели инструментов в правом верхнем углу:
Подготовка и подключение к среде займут всего несколько минут. После завершения вы должны увидеть что-то подобное:
Эта виртуальная машина содержит все необходимые инструменты разработки. Она предоставляет постоянный домашний каталог объемом 5 ГБ и работает в облаке Google, что значительно повышает производительность сети и аутентификацию. Вся работа в этом практическом задании может выполняться в браузере. Вам не нужно ничего устанавливать.
3. Настройка проекта
Создайте каталог проекта.
Для начала нам нужно создать новую директорию для вашего проекта. В терминале выполните следующие команды:
mkdir -p codelab-match3 && cd codelab-match3
Запуск интерфейса командной строки Antigravity
Для начала давайте убедимся, что Antigravity CLI установлен правильно. Запустите в терминале следующую команду:
agy --version
Вы должны увидеть что-то подобное:
$ agy --version 1.0.2
Теперь запустите интерфейс командной строки Antigravity с помощью команды agy :
agy
Antigravity спросит вас, доверяете ли вы этому проекту. Поскольку мы только что создали пустую папку, можно смело доверять проекту, поэтому подтвердите доступ, и вы перейдете к командной строке:
Если вы видите приглашение командной строки Antigravity, значит, все в порядке. В противном случае, проверьте, не пропустили ли вы какие-либо из предыдущих шагов настройки.
4. Создайте базовую игру в режиме планирования.
Начнём с построения основной логики игры «три в ряд». Antigravity по умолчанию запускается в режиме планирования, поэтому вам не нужно отдавать никаких специальных команд для переключения в этот режим.
Однако полезно знать, что режим планирования можно включить в любое время с помощью команды /planning в командной строке Antigravity:
/planning
Если вы попробуете выполнить эту команду сейчас, Antigravity напомнит вам, что она уже находится в стадии планирования.
Противоположностью режима планирования является быстрый режим, который можно включить с помощью /fast :
/fast
В быстром режиме Antigravity немедленно приступит к выполнению задачи и предназначен для простых, самодостаточных задач. Режим планирования разработан для сложных задач, в котором агент сначала составит план, который вы сможете просмотреть и доработать перед выполнением.
Загрузите ресурсы
Нам нужно загрузить изображения, которые будут использоваться в игре. Поскольку это небольшая самостоятельная задача, нет необходимости запускать её в режиме планирования, поэтому воспользуемся тем, что мы находимся в быстром режиме, чтобы сделать это сразу:
Create a folder named "assets" and download the images
background.png, gcp_sprites.png, gemini.png and logo.png,
from this GitHub repository to the "assets" folder:
https://github.com/GoogleCloudPlatform/devrel-demos/tree/main/codelabs/gemini-cli/gemini-cli-match3-golang
Antigravity запросит разрешение на выполнение нескольких команд оболочки для загрузки файлов. После завершения вы должны увидеть что-то подобное:
Создайте базовую игру
Теперь, когда все ресурсы готовы, пришло время создать базовую игру. Поскольку создание игры — довольно сложная задача, давайте вернемся к этапу планирования, прежде чем дать ей задание:
/planning
В режиме планирования скопируйте и вставьте следующую подсказку в интерфейс командной строки Antigravity:
Build a Match-3 game called 'Cloud Crush' in Go using Ebitengine v2.
The entire game screen should have background.png as background.
The play area should be an 8x8 grid with white background.
On the right side of the play area include a side panel with UI elements
like player score and how to play instructions.
The side panel should have a solid background colour to help with readability of the UI.
Use standard GCP product logos (e.g. Compute Engine, Cloud Storage, BigQuery, etc.)
as icons. These icons are provided in the gcp_sprites.png file.
The icons are saved as 64x64 sprites but scale them as necessary
based on the screen resolution. Implement swapping, clearing 3+ gems, and gravity.
Use ebitengine native font rendering (size 48 for titles and size
24 for normal text) for all text and not the debug print.
The font should be monospaced (golang.org/x/image/font/gofont/gomono).
Keep the UI tidy and harmonic, e.g. centered text should always be
adjusted based on text length, not just guess based on estimates.
Перед составлением плана программа может провести предварительное исследование, например, проверить размеры PNG-файлов. После завершения составления плана вам будет предложено его просмотреть:
Пожалуйста, обратите особое внимание на нижний правый угол, где вы написали «1 артефакт» и подсказку использовать /artifact для проверки. В Antigravity вспомогательные файлы, такие как планы, списки задач и пошаговые инструкции, называются «артефактами», чтобы отличать их от обычных файлов, являющихся частью решения (например, исходного кода).
Введя команду /artifact в командной строке, вы сможете просмотреть план и оставить комментарии, если потребуется внести какие-либо корректировки.
/artifact
Вы должны увидеть что-то подобное:
Обратите внимание, что существует файл с именем implementation_plan.md , содержащий параметры для открытия, утверждения или отклонения. Нажмите Enter , чтобы открыть его. Вот пример того, как выглядит план в моей системе:
Вы можете прокручивать код вверх и вниз с помощью клавиш со стрелками, а в любой строке можно добавить комментарий, нажав клавишу C. В данном случае мне не нравится, что используется более старая версия Go, поэтому я добавлю комментарий с указанием использовать Go 1.26 (самая последняя версия на момент написания этого текста) в строке 16:
После ввода комментария он отобразится непосредственно в тексте:
Важный раздел для проверки — «План верификации». Игры сложно тестировать автоматически, но Go — это компилируемый язык, поэтому мы должны как минимум убедиться, что модель передает нам код, который компилируется. Если автоматический шаг для сборки бинарного файла не включен, укажите это в комментарии:
Важный раздел для проверки — «План верификации». Игры сложно тестировать автоматически, но Go — компилируемый язык, поэтому мы должны как минимум убедиться, что модель передает нам код, который компилируется. Если автоматический шаг для сборки бинарного файла не включен, добавьте его в качестве комментария:
Повторяйте этот процесс, пока не будете удовлетворены планом, затем нажмите ESC, чтобы вернуться назад. После этого нажмите Y, чтобы подтвердить отправку комментариев агенту:
После нажатия клавиши Y агент немедленно начнет работу. Вам нужно еще раз нажать клавишу ESC, чтобы выйти из меню «Артефакт». Это вернет вас в командный режим. Между тем, агент может запросить множество подтверждений вызова инструмента, поскольку ему необходимо выполнить команды оболочки.
Пока мы ждём, мы можем продолжить работу над дизайном, добавляя подсказки в очередь. Например, мы можем воспользоваться этой возможностью, чтобы добавить новое требование, которое было упущено в исходной подсказке:
Add a 60-seconds countdown timer and an in-memory high-score tracker to enhance the arcade game experience. Combos should give a score bonus of 10% per combo number.
В истории сообщений появится запрос в очереди, перед которым будет стоять маленькая стрелка:
Вы также можете заметить, что количество артефактов увеличивается. Помимо плана, Antigravity также создаст список задач (task.md), чтобы отслеживать каждый элемент, который необходимо реализовать, или действие, которое необходимо выполнить. После завершения он создаст файл пошагового руководства (walkthrough.md) с объяснением достигнутых целей. Вы можете просмотреть все эти файлы, снова используя команду /artifact.
Вот пример файла task.md после завершения реализации базовой игры:
В любой момент вы можете открыть эти файлы и добавить к ним комментарии, которые после отправки агенту будут поставлены в очередь на выполнение, как и запрос в очередь. Рекомендуется оставлять комментарии к этим файлам, чтобы предоставить агенту дополнительный контекст вашего запроса.
После успешной сборки исполняемого файла вы должны увидеть примерно следующее:
Попробуйте запустить игру и посмотрите, работает ли она как положено. Рекомендуется запускать её из командной строки агента. Вы можете переключить командную строку в «режим оболочки», набрав восклицательный знак «!».
В командной строке вы увидите сообщение "активирован режим bash". Нажмите Enter , чтобы выполнить команду. Запуск исполняемого файла в этом режиме дает вам преимущество в том, что агент "отслеживает" любой вывод в терминал, поэтому в случае сбоя игры или внезапного вылета вам не нужно объяснять агенту возникшую проблему. Он немедленно получит всю необходимую информацию из контекста оболочки.
Попробуйте поиграть и настроить параметры игры, пока не будете довольны результатом (например, ускорьте или замедлите анимацию, отрегулируйте реакцию на команды и т. д.).
Например, это сообщение улучшит пользовательский опыт, добавив режим специальных возможностей и новые сочетания клавиш:
Update the implementation to include: 'Q' to quit, 'F' for full-screen
and 'A' for Accessibility Mode: swap GCP logos for high-contrast coloured blocks.
Also enable Arrow Keys to move the selection cursor and Space to select the gem to
swap (space is pressed once to select, then arrow key immediately makes
the move - no need to press space again).
Use a golden square (4 px border, transparent fill) with a simple animation
to highlight where the cursor is at the moment.
После завершения доработки перейдите к следующему разделу, чтобы преобразовать его в веб-приложение.
5. Адаптируйте игру для работы в веб-браузере.
Игра на движке Ebitengine в настоящее время представляет собой настольное приложение. Давайте попросим Antigravity CLI адаптировать её для работы в веб-браузере с использованием WebAssembly (WASM). Это потребует компиляции кода на Go для целевого браузера и настройки базового веб-сервера.
Используйте следующую подсказку, чтобы помочь агенту:
We need to enable this game to run on a web browser. Compile the game to WASM
and create a Go web server to serve the compiled WASM and the assets.
Обратите внимание, что агент попытается найти в вашей файловой системе файл с именем wasm_exec.js . Это ожидаемо, и вам необходимо разрешить его использование, поскольку этот файл является оболочкой, позволяющей запускать исполняемые файлы Go через JavaScript. Например:
После того как агент выполнит задачу, вы можете дать ему указание запустить игровой сервер в фоновом режиме.
Теперь откройте в браузере http://localhost:8080 чтобы увидеть игру, работающую в веб-браузере:
Теперь, когда у вас всё работает в веб-версии, давайте немного её доработаем, прежде чем развернуть в облаке.
6. Создайте титульный экран и таблицу лидеров.
Игра работает, но ей не хватает нескольких ключевых функций для полноценного аркадного опыта. Сначала добавим титульный экран, а затем таблицу лидеров, чтобы вы могли соревноваться с друзьями! Используйте следующую подсказку:
Create a title screen that displays the game logo (logo.png) over the cloud background.
The logo should be centered and occupy no more than 75% of the screen area.
The title screen should display "Press ENTER to play" (black/bold) right below the logo,
with every letter animated in a slow wavy (cosine) pattern.
Once the player presses ENTER, it should be prompted to add their name, which
will then be recorded to populate the leaderboard at the end of the round.
Once the game is over, play the animated leaderboard with the top 10 highest scores.
The animated leaderboard should render entries one by one up to 10 entries,
using a fade in effect just like old school arcade games. The leaderboard
should fade out to the title screen after 15 seconds.
Please note that name entry should be processed independently of the play state
key handlers (e.g. pressing A during name entry should not toggle accessibility mode).
Leaderboard scores should be saved in-memory, server-side.
Теперь всё выглядит немного профессиональнее! 🙂
7. Разверните игру в Cloud Run.
Наконец-то пришло время поделиться нашим творением со всем миром! Мы развернем все приложение на Google Cloud Run, чтобы иметь к нему доступ из любой точки мира.
Use the gcloud CLI to provision and deploy the Go web server and its assets to
Google Cloud Run. Provide the live URL when complete.
Поскольку игра теперь доступна в облаке, было бы упущением не обеспечить её запуск на мобильных устройствах. Это можно сделать с помощью следующего запроса:
Now enable this game to run on mobile devices. You need to update the input system to handle "taps" as well as key presses and clicks. Since mobile devices most likely won't have a keyboard, add a virtual keyboard to the name entry screen and a confirmation button to the name entry.
Finally, generate a QR code for the CloudRun link and display it on the screen so that people can scan it to access the mobile version and compete against their friends for the high score.
Запустите игру еще раз в браузере. Попробуйте также перейти по ссылке с мобильного устройства (для упрощения этого процесса можно сгенерировать QR-код).
8. Используйте браузерный агент для тестирования игры.
Хотя автоматическое тестирование игры часто затруднено, поскольку она основана на визуальной обратной связи, мы все же можем использовать автоматизацию, чтобы хотя бы убедиться в правильности развертывания и наличии основных элементов.
Для этого мы будем использовать субагента браузера. В Antigravity субагент — это изолированный персонаж с новым контекстом, идеально подходящий для задач, где вы не хотите, чтобы текущий контекст влиял на результаты, или когда вы хотите предотвратить «загрязнение» основного контекстного окна задачей.
Браузерный агент — это специальный встроенный агент для выполнения задач, связанных с браузером. Обратите внимание, что только для этого шага нам необходимо использовать настольное приложение Antigravity, поскольку браузерный агент в настоящее время недоступен в командной строке.
Откройте настольное приложение Antigravity и начните новый разговор в проекте Cloud Crush:
Для запуска субагента браузера введите /browser а затем следующую команду:
Go to http://localhost:8080 and capture screenshots of the following game screens:
1. Title Screen (initial state: "PRESS ENTER TO PLAY")
2. Name Entry Screen (press Enter to reach this screen)
3. Main Gameplay Screen (type a name like "PLAYER" and press Enter to start)
4. Leaderboard Screen (let the game timer run out to view the high scores)
Такой подход позволяет использовать скриншоты для исправления элементов пользовательского интерфейса, которые иначе было бы сложно описать только текстом.
Вы можете ссылаться на файлы, используя символ "@", за которым следует имя файла. Например, здесь я прошу агента увеличить размер логотипа на титульном экране:
Хотя этот пример несколько надуман, поскольку модели не обязательно «видеть» изображение, чтобы применить коррекцию размера на 50%, это полезный метод для внесения изменений в пользовательский интерфейс, когда проблему сложнее описать текстом. Он также позволяет агенту проверить свою работу, сделав снимки экрана до и после, поэтому держите этот прием в своем арсенале.
9. Создайте собственный агент для обеспечения безопасности игры.
Одна из распространенных проблем приложений, использующих «вайб-код», — это поддержание высокого качества и соблюдение лучших практик как с точки зрения кодирования, так и с точки зрения безопасности. Хотя можно попытаться улучшить свои подсказки, сделав их очень строгими в обоих этих аспектах, чем больше вы добавляете в подсказку, тем менее сфокусированным будет агент, что часто приводит к неоптимальным результатам.
В подобных сценариях использование субагентов идеально подходит, поскольку они могут быть полностью сосредоточены на поставленной перед ними задаче. Давайте создадим собственного агента для проведения аудита безопасности этого кода и убедимся, что мы не допускаем утечки учетных данных и не подвергаем себя ненужному риску при развертывании этой игры.
Этот запрос служит хорошей отправной точкой для агента:
create a new subagent called "security_auditor" using the following instructions:
You are a ruthless Security Auditor. Your job is to analyze code for potential vulnerabilities.
Focus on:
1. SQL Injection
2. XSS (Cross-Site Scripting)
3. Hardcoded credentials
4. Unsafe file operations
When you find a vulnerability, explain it clearly and suggest a fix. Do not fix it yourself; just report it.
Обратите внимание, что Antigravity будет использовать инструмент "DefineSubagent" для создания нового агента:
Попросите агента выполнить проверку безопасности кода игры, используя следующую подсказку:
Run the security auditor agent in this code
Вы должны увидеть что-то подобное:
После того, как агент завершит свою задачу, вы должны увидеть отчет примерно такого вида:
Давайте попросим Антигравитацию исправить это за нас 🙂:
Fix these findings for me please!
И вот, пожалуйста:
Обратите внимание, что агенты, созданные таким образом, существуют только в течение беседы. Если вы хотите, чтобы агент был "многоразовым" между сессиями, вы можете создать его с помощью файла конфигурации. Для получения дополнительной информации см. команду /agents .
10. Заключение
Поздравляем! Вы успешно использовали Antigravity CLI для сборки, развертывания, тестирования и аудита аркадной игры, продемонстрировав передовые агентные рабочие процессы от первоначальной настройки до развертывания.
Уборка
Чтобы избежать дальнейших списаний средств с вашего аккаунта Google Cloud, удалите ресурсы, созданные в ходе этого практического занятия.
- Удалите службу Cloud Run:
I'm finished with this project. Delete the cloud run deployment.
- Удалите каталог проекта:
cd .. && rm -rf codelab-match3
В качестве альтернативы, вы можете удалить весь проект Google Cloud, если он был создан исключительно для этого практического занятия.
Следующие шаги
Вы можете продолжить обучение, изучая другие практические задания на этой платформе или самостоятельно улучшая Cloud Crush, только не забудьте очистить ресурсы после завершения работы!
Удачного программирования!