Начало работы со спецификационно-ориентированной разработкой в ​​Antigravity

1. Цель данной лабораторной работы

В этой практической работе вы научитесь использовать Antigravity для создания приложений с помощью Google Antigravity и развертывания их в облаке Google. Также вы познакомитесь с концепцией разработки, основанной на спецификациях (Spec Driven Development).

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

  • Разберитесь в основах работы Google Antigravity .
  • Разберитесь в основах разработки, основанной на спецификациях (Spec Driven Development).
  • Узнайте, как легко развертывать приложения в Cloud Run .

ba43a75a2c4134f1.png

Рисунок 1: Antigravity — это разработанный компанией Google инструмент разработки Agent First.

2. Настройка среды

  1. Установите Antigravity: 
                       👉Download the  [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from  [here](https://antigravity.google/).

👉Установите систему антигравитации в своем окружении.

👉Перейдите в папку, где установлена ​​игра Antigravity, и дважды щелкните по файлу установщика, чтобы открыть его.

👉Следуйте инструкциям установщика, чтобы установить Antigravity в вашей среде.

  1. Установите Python

👉Перейдите по ссылке https://www.python.org/downloads/ и установите Python для вашей системы.

  1. Установите gcloud

👉gcloud — это инструмент командной строки, позволяющий выполнять различные операции в Google Cloud. Следуйте инструкциям здесь , чтобы установить gcloud в вашей среде.

👉После установки проверьте работоспособность программы, открыв терминал и набрав в нем команду gcloud . 8265f18dcf1af94c.png

Рисунок 2: После установки gcloud вы можете проверить установку, набрав gcloud в терминале.

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

  • Если у вас еще нет проекта , который вы можете использовать, вам потребуется создать новый проект в консоли GCP . Выберите проект в селекторе проектов (в левом верхнем углу консоли Google Cloud). 6fce70b12b5fc94.png

Рисунок 2: Нажав на квадратик рядом с логотипом Google Cloud, вы можете выбрать свой проект. Убедитесь, что ваш проект выбран.

  • В этой лабораторной работе мы будем использовать редактор Cloud Shell для выполнения наших задач. Откройте Cloud Shell и настройте проект с помощью Cloud Shell.
  • Нажмите на эту ссылку, чтобы перейти непосредственно в редактор Cloud Shell.
  • Откройте терминал, если он еще не открыт, выбрав в меню «Терминал» > «Новый терминал». В этом терминале вы можете выполнять все команды из этого руководства.
  • Проверить, прошла ли аутентификация проекта, можно с помощью следующей команды в терминале Cloud Shell. 
gcloud auth list
  • Выполните следующую команду в Cloud Shell, чтобы подтвердить свой проект. 
gcloud config list project
  • Скопируйте идентификатор проекта и используйте следующую команду для его установки. 
gcloud config set project <YOUR_PROJECT_ID>
  • Если вы не помните идентификатор своего проекта, вы можете перечислить все идентификаторы своих проектов с помощью команды... 
gcloud projects list

4. Включите API.

Для запуска этой лабораторной работы необходимо включить некоторые API-сервисы. Выполните следующую команду в Cloud Shell.

gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com

Представляем API.

  • API Vertex AI ( aiplatform.googleapis.com ) обеспечивает доступ к платформе Vertex AI , позволяя вашему приложению взаимодействовать с моделями Gemini для генерации текста, чатов и вызова функций.
  • API Cloud Resource Manager ( cloudresourcemanager.googleapis.com ) позволяет программно управлять метаданными для ваших проектов Google Cloud, такими как идентификатор и имя проекта, которые часто требуются другими инструментами и SDK для проверки подлинности проекта и прав доступа.

5. Убедитесь, что ваши бонусы были начислены.

На этапе настройки проекта вы запросили бесплатные кредиты, которые позволяют использовать сервисы Google Cloud. После применения кредитов создается новый бесплатный платежный аккаунт под названием «Пробный платежный аккаунт Google Cloud Platform». Чтобы убедиться, что кредиты применены, выполните следующие действия в редакторе Cloud Shell.

curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3

В случае успеха вы должны увидеть результат, как показано ниже: Если вы видите сообщение «Проект успешно связан», значит, ваш платежный аккаунт настроен правильно. Выполнив описанный выше шаг, вы можете проверить, связан ли ваш аккаунт; если нет, он будет связан автоматически. Если вы не выбрали проект, вам будет предложено выбрать проект, или вы можете сделать это заранее, следуя инструкциям по настройке проекта. e0268411fd0691a2.png

Рисунок 3: Подтверждение привязки платежного аккаунта

6. Введение в Google Antigravity

Google Antigravity — это инструмент разработки программного обеспечения, ориентированный на искусственный интеллект, разработанный Google DeepMind. Google Antigravity использует накопленный за долгие годы опыт в разработке программного обеспечения в сочетании с передовыми технологиями ИИ, чтобы обеспечить разработчикам плавный и бесперебойный процесс разработки, основанный на ИИ.

Вот некоторые из ключевых особенностей Google Antigravity .

На рисунке ниже показаны основные элементы Google Antigravity .

  1. 👉Откройте браузер и начните изучать его различные разделы.

97fa1980f95fdafa.png

Рисунок 4: Основные элементы Google Antigravity, подробности в таблице 1.

Таблица 1: Подробная информация об основных компонентах Google Antigravity.

Component Index

Component Name

Function

1

Agent Manager

Provide access to your agent manager where you can manage all your agents

2

Toggle Agent Pane

Toggles and untoggles your agent pane

3

New Session

Starts a new Agent Conversation while keeping old ones separately.

4

Past Conversations

Retrieve previous conversations

5

Agent Pane

The agent pane where you can have conversation with the AI agent

6

Explorer

File explorer

  1. Встроенные модели Gemini 3 и Nanobanana : С помощью Google Antigravity вы можете использовать новейшие флагманские модели Google, такие как Gemini 3 и Nanobanana. Помимо этих моделей, вы также можете использовать модели сторонних производителей, например, Claude.

10476e79399c0f8b.png

Рисунок 5: В Google Antigravity 2 у вас есть выбор из множества моделей . Программирование на основе агентов : Antigravity предоставляет встроенную систему программирования на основе агентов, которая позволяет разработчикам оставаться продуктивными, не создавая себе помех.

  1. Планирование и полный контроль со стороны пользователя : Агент принимает ваши входные данные и преобразует задачу в план, для выполнения которого он запросит ваше одобрение. Это гарантирует, что пользователь может изменить направление действий агента в любое время до начала выполнения задачи.
  2. Обратная связь от пользователя : Во время работы агента пользователь может предоставить агенту обратную связь, если ему необходимо дать агенту дополнительные инструкции.
  3. Многоагентная работа : Вы можете запустить несколько агентов для одновременной работы над различными задачами. Например, агент A может заниматься рефакторингом вашей логики аутентификации, в то время как агент B пишет модульные тесты для нового API, а агент C в фоновом режиме исследует библиотеку.
  4. Агент, работающий в редакторе, на терминале и в браузере : агенты Google Antigravity работают на различных поверхностях.
  5. Редактор : Агенты Google Antigravity пишут код и отображают его вам в редакторе.
  6. Терминал : В зависимости от задач агентам Google Antigravity может потребоваться доступ к вашему терминалу для выполнения некоторых команд. Агенты могут выполнить эти команды за вас, когда это необходимо.
  7. Браузер : Агенты также могут работать с вашим браузером. Это особенно полезно, если вам нужно протестировать ваши веб-приложения: агент может запустить ваше приложение в веб-браузере, протестировать его и отладить.

7. Введение в разработку на основе спецификаций ИИ

Разработка, основанная на спецификациях (Spec-Driven Development, SDD), — это новая парадигма разработки программного обеспечения, которая ставит структурированные спецификации и агентов искусственного интеллекта в основу жизненного цикла разработки. В отличие от подхода «подсказка и исправление» (метод проб и ошибок), распространенного в базовом кодировании с использованием ИИ, SDD отдает приоритет тщательному сбору требований, проектированию системы/архитектуры и планированию тестирования. Она заимствует строгость этапа проектирования каскадной модели , но интегрирует ее в современный, гибкий итеративный цикл посредством автоматизации. Несмотря на то, что процесс требует тщательного планирования и предварительной документации, на самом деле это итеративный процесс, поскольку агенты ИИ обеспечивают быструю реализацию и тестирование. Это позволяет получать более быструю обратную связь, которую можно использовать для улучшения документации.

Основная философия

В этой модели инженеры-люди переходят от роли «писателей кода» к роли «системных архитекторов». Основная обязанность человека — детальное описание проблем и решений. Этот подробный результат служит единым источником истины (SSOT) , который агенты ИИ используют для генерации, проверки и совершенствования кодовой базы.

Жизненный цикл SDD

Процесс включает следующие компоненты. Шаги 1-3 в значительной степени ориентированы на человека, а шаги 4-5 — на агента ИИ. Это итеративный процесс, в котором по завершении цикла обратная связь может быть использована для улучшения спецификации.

  1. Сбор требований: Точное определение бизнес-логики, потребностей пользователей и ограничений системы.
  2. Архитектурное проектирование: определение структуры системы, моделей данных и точек интеграции.
  3. Системная спецификация и спецификация тестирования: Создание машиночитаемых (или высокоструктурированных) документов, определяющих функциональность системы и методы ее проверки.
  4. Автоматизированная генерация кода: агенты искусственного интеллекта используют спецификации для создания готового к использованию в производстве кода.
  5. Тестирование и валидация: Автоматизированные наборы тестов проверяют сгенерированный код на соответствие спецификации тестов.

Основные принципы работы

  1. Цикл проектирования-реализации

Шаги с 1 по 5 представляют собой не линейный путь, а непрерывный цикл обратной связи . Поскольку генерация кода (шаг 4) и тестирование (шаг 5) в значительной степени автоматизированы, команда разработчиков может перенаправить большую часть своих ресурсов на первые три этапа. Когда обнаруживается ошибка или изменяется функция, инженер обновляет спецификацию , а не код, и запускает цикл заново.

  1. Модульная гранулярность

Для поддержания целостности системы SDD необходимо применять к модулям с высокой степенью детализации, а не к монолитным блокам.

  • Изоляция: Если конкретный модуль не проходит проверку, необходимо повторно указать и сгенерировать только этот модуль.
  • Масштабируемость: Небольшие, четко определенные модули предотвращают «галлюцинации» ИИ и гарантируют, что контекстное окно агента ИИ остается сфокусированным и точным.
  1. Контроль качества

В этой парадигме спецификация системы является планом, а спецификация тестирования — критерием оценки. Спецификация тестирования гарантирует, что сгенерированный код всегда будет соответствовать заранее определенным требованиям к качеству. Весь процесс может быть легко интегрирован в существующий конвейер CICD, обеспечивая соответствие общего состояния системы требованиям качества.

В этой лабораторной работе мы изучим основы разработки, основанной на спецификации (Spec-Driven Development), используя Google Antigravity.

8. Разработка веб-приложения с помощью Google Antigravity

В этой лабораторной работе мы создадим простое приложение-фотогалерею. Nanobanana, модель генерации изображений, встроена в Google Antigravity . Мы будем использовать Nanobanana для создания необходимых изображений.

Настройка веб-браузера

Веб-браузер будет использоваться для автоматического тестирования приложения. В приведенных ниже шагах мы настроим браузер таким образом, чтобы Antigravity мог автоматически тестировать приложение.

  1. 👉Нажмите на кнопку «Настройки» (значок шестеренки) в правом верхнем углу и выберите «Открыть пользовательские настройки Antigravity».
  2. 👉На левой панели нажмите «Агент», в разделе «Артефакты» выберите «Просмотреть политику» и выберите «Всегда продолжать». ac522e46ce7d5d4d.png
  3. 👉Нажмите «Браузер» в левой панели и убедитесь, что параметр «Включить инструменты браузера» включен. b49bb10330435c2d.png

Создайте приложение с помощью Google Antigravity.

  1. 👉Откройте Google Antigravity , нажав на значок Google Antigravity.
  2. 👉Создайте папку с названием " Галерея " в своей личной папке, например, на рабочем столе.
  3. 👉В Antigravity нажмите «Открыть папку» и выберите папку «Галерея». Это откроет новое рабочее пространство в папке «Галерея».
  4. 👉Если панель агента еще не открыта, откройте ее, нажав кнопку « Переключить панель агента ». См. рисунок 4, кнопка № 2 .
  5. 👉Вы можете начать кодирование, введя свои инструкции в панели агента. Очень важно, чтобы инструкции были максимально понятными. Введите следующее в панели агента. 
     **English Version:**

Create a photo granary with following specs.

1. Visual Design & Layout
Title: The gallery must prominently display the title "My photo gallery" at the top.
Modern Grid: Images will be arranged in a responsive grid that spans the full width of the browser.
Clean Aesthetic: Use a minimalist design with consistent spacing (margins/padding) between photos and no heavy borders or shadows.
Image Scaling: Photos will automatically adjust their size to fit any screen (mobile to desktop) while maintaining their focus using modern CSS cropping techniques.

2. Photo Content
Quantity: The page will feature a total of 20 photos. 
Nature Themes: The collection will include a diverse range of nature photography:
Landscape: Mountains, deserts, and forests.
Water: Waterfalls, oceans, and lakes.
Atmosphere: Northern lights, sunsets, and starry skies.
Macro: Close-ups of flowers, leaves, and moss.
Generate all the needed photos

3. Core Functionality (The "Lightroom" Effect)
Full-Screen View: Clicking any photo triggers a "Lightbox" mode where the background dims and the selected image appears in high resolution at the center of the screen.
Manual Navigation:
Right Arrow: Swaps the current view to the next image.
Left Arrow: Swaps the current view to the previous image.
Infinite Loop: Navigation is continuous; moving "next" from the 20th photo returns the user to the 1st photo.
Exit Strategy: Users can exit the full-screen view by clicking a "Close" button or tapping the dimmed area outside the image.

4. Technical Constraints (Strict)
Vanilla JavaScript Only: Absolutely no external libraries or frameworks (like jQuery, React, or Bootstrap). All logic must be written in raw, standard JavaScript.
Native HTML & CSS: Use only the built-in capabilities of modern web browsers to handle the layout and animations.
Zero Dependencies: The app should function perfectly as a standalone project with no need to download or link to outside scripts.

5. Perform the following tests
Open the App in a web browser
Click on the images and see the image opens in the lightbox
Check the navigation

Японская версия: 

以下の仕様でフォトギャラリーを作成してください。
1. ビジュアルデザインとレイアウト
タイトル: ページ上部に「My photo gallery」というタイトルを大きく表示すること。
モダンなグリッド: ブラウザの全幅に広がる、レスポンシブなグリッドレイアウトで画像を配置すること。
クリーンな審美性: ミニマリストなデザインを採用し、写真間の余白（マージン/パディング）を一定に保つこと。重い枠線やドロップシャドウは使用しない。
画像のスケーリング: モダンなCSSのトリミング技術（object-fitなど）を使用し、モバイルからデスクトップまで、フォーカスを維持したまま画面サイズに合わせて自動調整されるようにすること。

2. 写真の内容
枚数: 合計20枚の写真を掲載。
自然のテーマ: 多様な自然写真のコレクションにすること。
風景: 山、砂漠、森林。
水: 滝、海、湖。
空気・雰囲気: オーロラ、夕焼け、星空。
マクロ: 花、葉、苔の接写。
画像生成: 2枚の画像を生成し、それらを繰り返して20箇所に配置すること。

3. コア機能（ライトボックス・エフェクト）
全画面表示: 写真をクリックすると「ライトボックス」モードが起動し、背景が暗転して選択された画像が画面中央に高解像度で表示されること。
手動ナビゲーション:
右矢印: 次の画像に切り替え。
左矢印: 前の画像に切り替え。
無限ループ: ナビゲーションは連続的であること。20枚目の写真で「次へ」を押すと1枚目に戻る仕様。
終了方法: 「閉じる」ボタンをクリックするか、画像外の暗転したエリアをタップすることで全画面表示を終了できること。

4. 技術的制約（厳守）
純正JavaScript限定: 外部ライブラリやフレームワーク（jQuery、React、Bootstrapなど）は一切使用禁止。すべてのロジックは標準のJavaScript（生コード）で記述すること。
ネイティブのHTML & CSS: レイアウトやアニメーションには、モダンブラウザの標準機能のみを使用すること。
依存関係ゼロ: 外部スクリプトのダウンロードやリンクを必要とせず、単体で完全に動作するプロジェクトにすること。

5. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します
  1. 👉Нажмите кнопку «Запустить». После запуска агент должен отобразить план выполнения, как показано ниже.

c9da191c4cbcc952.png

Рисунок 5: Антигравитационный агент покажет вам план реализации.

  1. 👉Вам будет предложено подтвердить действие, пожалуйста, подтвердите его, как показано ниже. Antigravity автоматически использует Nanobanana и выбранную модель LLM для выполнения задачи.

a92a8d5848528448.png Рисунок 6: «Антигравитация» хочет выполнить команду, нажмите «Выполнить» , чтобы разрешить выполнение.

82b9cec15b05938b.png Рисунок 7: При появлении запроса нажмите «Принять все».

  1. 👉После генерации кода Antigravity откроет браузер и начнет тестирование. После завершения тестирования программа должна предоставить вам результаты. 7ab8b13a5c3f62a9.png Рисунок 8: Антигравитация покажет вам результаты теста.
  2. 👉Если появится запрос, нажмите «Принять все», чтобы сохранить весь сгенерированный код в панели агента.
  3. 👉В панели «Проводник» приложения Antigravity вы должны увидеть сгенерированный код. 91770e05b17c1ea1.png Рисунок 9: Окончательный код
  4. 👉Чтобы протестировать приложение, щелкните правой кнопкой мыши на index.html, получите путь к файлу и вставьте этот путь в адресную строку веб-браузера.

da11208a3259d0b.png

Рисунок 10: Чтобы протестировать приложение, просто скопируйте путь к файлу index.html в вашем веб-браузере.

9. Настройка среды развертывания

  1. 👉Получите идентификатор своего проекта Google Cloud: перейдите по ссылке https://console.cloud.google.com
  2. 👉Нажмите на кнопку в верхнем левом углу и скопируйте идентификатор вашего проекта куда-нибудь, он понадобится нам на следующих шагах. 828046e5e6906764.png Рисунок 11: Скопируйте идентификатор вашего проекта и сохраните его где-нибудь для дальнейшего использования.
  3. 👉В игре Antigravity откройте терминал, выбрав в меню «Терминал» -> «Новый терминал» .
  4. 👉Необходимо установить переменные среды, которые различаются для Windows и Mac/Linux. Замените "ВАШ ОБЛАЧНЫЙ ПРОЕКТ" на значение, указанное в шаге 2. Примечание для пользователей Windows PowerShell: откройте PowerShell в режиме администратора. 
#This is only for Powershell users.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

#For Windows (Powershell) follow the following steps.
$env:GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
$env:GOOGLE_CLOUD_LOCATION="us-central1"

#For Windows Command Prompt  follow the following steps.
set GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
set GOOGLE_CLOUD_LOCATION="us-central1"


#for Mac/Linux follow the following steps.
export GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
export GOOGLE_CLOUD_LOCATION="us-central1"
  1. 👉Войдите в консоль, при появлении запроса войдите в свою учетную запись Google Cloud в браузере. 
gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR CLOUD PROJECT

630c164efb606a4.png Рисунок 12: Выполнение аутентификации

  1. 👉Установите Cloud Run MCP Server. В правом верхнем углу окна Antigravity нажмите "...". Вы увидите опцию "MCP Servers", нажмите на неё. MCP-серверы — это расширения для агента, позволяющие агентам получать доступ к внешним данным и инструментам.
  2. 👉Введите "Cloud Run" в поле поиска и нажмите на "Cloud Run" be1a5aa6de8601f1.png Рисунок 13: Сервер Cloud Run MCP
  3. 👉Вернитесь в панель агентов, нажав клавишу со стрелкой назад рядом с заголовком «Серверы MCP». Теперь мы можем начать взаимодействовать с Google Cloud Run. Введите следующее в панели агентов. Это автоматически подключит сервер Cloud Run MCP и отобразит список служб, работающих в Cloud Run. 
Find me the list of services running in Cloud Run.
  1. 👉Разверните приложение с помощью следующей команды. Вы можете просто развернуть его, используя естественный язык. Antigravity автоматически использует сервер MCP для развертывания. 
Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80
  1. 👉Агент должен показать вам, где было развернуто приложение. Например, https://photogallery-85469421903.us-central1.run.app . Cloud MCP Server значительно упрощает развертывание вашего веб-приложения в Cloud Run.

10. Уборка

Теперь давайте уберём то, что мы только что создали.

  1. 👉Удалите только что созданное приложение Cloud Run . Перейдите в Cloud Run , открыв Cloud Run . Вы должны увидеть приложение, созданное на предыдущем шаге. Поставьте галочку рядом с приложением и нажмите кнопку «Удалить».

db630152398108cb.png Рисунок 38: Удаление приложения Cloud Run

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

Поздравляем! Вы успешно создали приложение с использованием Google Antigravity, следуя принципам разработки, основанной на спецификации (Spec Driven Development). Вы также освоили развертывание приложения в Cloud Run . Это значительное достижение, охватывающее основной жизненный цикл современного облачного приложения и обеспечивающее вам прочную основу для развертывания собственных сложных систем.

Краткий обзор

В этой лабораторной работе вы научились:

  • Создайте многоагентное приложение с помощью Google Antigravity.
  • Разверните приложение в Cloud Run.

Полезные ресурсы