Строительство с использованием Google Antigravity

1. Введение

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

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

Предварительные требования:

• Установлены и настроены Antigravity и Antigravity IDE.
• Базовое понимание Google Antigravity. Рекомендуется пройти практическое занятие: Начало работы с Google Antigravity .

2. О вариантах использования

Поскольку у вас есть базовое понимание Antigravity, давайте рассмотрим несколько примеров использования, чтобы увидеть его в действии. Обратите внимание, что Antigravity — это платформа, ориентированная на агента. Это означает, что в большинстве случаев мы просто даем агенту инструкцию, и агент затем самостоятельно выполняет свою задачу, запрашивает необходимые разрешения, создает артефакты и уведомляет нас о завершении задачи. В результате мы не можем воспроизвести каждый результат диалога с агентом в каждом из следующих примеров использования. Мы поделимся инструкциями и несколькими необходимыми скриншотами ожидаемых результатов, но ваши результаты могут немного отличаться.

Мы рассмотрим различные варианты использования, от автоматизации нескольких задач с использованием внешних сайтов до генерации и проверки модульных тестов для проекта и полноценной разработки веб-сайта. Итак, начнём.

3. Основные новости

Это простой пример использования, но он может стать основой для посещения веб-сайтов с помощью веб-браузера, извлечения информации, выполнения определенных действий и последующего возврата данных пользователю.

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

Предположим, у нас есть корневая папка, в которой мы будем создавать различные проекты, которые рассмотрим в этом практическом занятии. Эта корневая папка на нашем компьютере называется agy2-pprojects .

Для начала создайте в указанной выше папке папку с именем news-highlights чтобы начать всё с чистого листа.

Запустите Antigravity и создайте новый проект. Добавьте в него папку news-highlights .

Начните новую беседу в недавно импортированном рабочем пространстве news-highlights :

Затем дайте следующее указание: « Зайдите на news.google.com и найдите там самые важные новости на данный момент».

Это запустит процесс работы агента, который определит, что ему необходимо посетить сайт news.google.com , и запросит ваше разрешение. Возможно, он несколько раз запросит у вас разрешение на чтение URL-адресов, и вы сможете предоставить ему разрешение для этого проекта и т.д.

Вам следует внимательно следить за мыслительным процессом и наблюдать за тем, как работает Агент. Пример выполнения действий Агентом показан ниже:

Что стоит попробовать

• Как только вы это поймете, выберите доступный веб-сайт, с которого вы хотели бы поручить агенту получить/обобщить некоторые данные. Рассмотрите какой-нибудь веб-сайт, на котором, как вы знаете, есть панели мониторинга и диаграммы, и попросите его выбрать несколько значений.
• Попробуйте выполнить следующее действие: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. Создайте динамический веб-сайт с помощью Python + Flask

Теперь перейдём к созданию полноценного веб-приложения. Мы будем создавать сайт, предоставляющий информацию об однодневном техническом мероприятии, на котором в течение дня будут проходить доклады различных спикеров.

Снова создайте новую папку с именем conference-website . Убедитесь, что вы создали новый проект в интерфейсе Antigravity Agent и добавили в него папку conference-website .

Вы можете начать разговор, задав вопрос, показанный ниже:

I would like to generate a website that is a 1-day technical conference informational site.

The website should have the following functionality:
        1. A home page that shows the current date, location, schedule and time table.
        2. The 1-day event is a list of 8 talks in total.
        3. Each talk has 1 or 2 max. speakers. 
        4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
        5. Each speaker has a First Name, Last Name and LinkedIn url.
        6. Allow for users to search by category, speaker, title.
        7. Give a lunch break of 60 minutes.
        8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
        9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript. 
        10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes. 
11. Launch the web application for me to review. 

Antigravity проанализирует запрос и сначала разработает план реализации. Для этого будет создан ключевой файл implementation_plan.md , который вы сможете просмотреть, чтобы понять, как планируется реализовать и выполнить требования, указанные вами в запросе. Пример выходных данных показан ниже:

Прежде чем нажать «Продолжить», ознакомьтесь с планом реализации. Вы можете либо щелкнуть ссылку на файл implementation_plan.md выше, либо переключить вспомогательную панель в правом верхнем углу. Это отобразит представление артефакта, и вы увидите, что план реализации доступен для вашего ознакомления.

Ниже представлен пример плана реализации, разработанного для нашего эксперимента:

Вы можете оставить свои комментарии к плану и снова обратиться к Агенту, или же пока мы можем принять план реализации в том виде, в котором он есть, и продолжить, нажав кнопку «Продолжить» в интерфейсе диалога.

Агент приступает к генерации файлов исходного кода, и вы также заметите, что он обновляет еще один артефакт, называемый Задачей. Это список действий или задач, которые он определил для достижения конечного результата.

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

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

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

Ниже представлен пример пошагового руководства :

Конечный результат перехода по указанному URL-адресу показан ниже:

Чтобы увидеть сгенерированный код, нажмите кнопку « Открыть IDE» в правом верхнем углу. Это откроет среду разработки Antigravity IDE, в которой вы сможете просмотреть сгенерированный код. Пример скриншота показан ниже:

Что стоит попробовать

• Добавьте в приложение дополнительные функции, которые вы хотели бы видеть. Предоставьте подробную информацию Агенту и понаблюдайте за тем, как он выполняет свою задачу, сначала изменяя список задач, затем план реализации и так далее.
• Добавьте дополнительные данные в расписание мероприятий. Например, Add two more talks to the schedule .
• Попросите агента сгенерировать файл README или дополнительную документацию для приложения.

5. Создайте простое приложение для повышения производительности.

Сейчас мы создадим простое веб-приложение с таймером Помодоро.

Создайте папку pomodoro-timer . Убедитесь, что вы находитесь в Agent Manager , импортировали и выбрали рабочую область pomodoro-timer . Начните с этой командной строки:

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

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

Ниже представлен пример запуска с сообщением "Пошаговое руководство" и заданиями:

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

Что стоит попробовать

• Добавьте в приложение несколько изображений. Например, добавьте изображение таймера.
• Попробуйте несколько вариантов любого приложения, которое вы хотели бы создать. Поэкспериментируйте со стилями, изображениями, запросите изменения и т.д.

6. Создайте модульные тесты, заглушки и проведите валидацию тестов.

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

Для этого нам понадобится рабочая область, содержащая один файл Python, как показано ниже:

from typing import Dict

# --- Custom Exceptions ---
class InventoryShortageError(Exception):
    """Raised when there is not enough item stock."""
    pass

class PaymentFailedError(Exception):
    """Raised when the payment gateway rejects the transaction."""
    pass

class InvalidOrderError(Exception):
    """Raised when the order violates business rules."""
    pass

# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
    def get_stock(self, product_id: str) -> int:
        """Connects to DB to check stock."""
        raise NotImplementedError("Real connection required")

    def decrement_stock(self, product_id: str, quantity: int):
        """Connects to DB to reduce stock."""
        raise NotImplementedError("Real connection required")

class PaymentGateway:
    def charge(self, amount: float, currency: str) -> bool:
        """Connects to Stripe/PayPal."""
        raise NotImplementedError("Real connection required")

# --- Main Business Logic ---
class Order:
    def __init__(self, 
                 inventory_service: InventoryService, 
                 payment_gateway: PaymentGateway,
                 customer_email: str,
                 is_vip: bool = False):
        
        self.inventory = inventory_service
        self.payment = payment_gateway
        self.customer_email = customer_email
        self.is_vip = is_vip
        self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
        self.is_paid = False
        self.status = "DRAFT"

    def add_item(self, product_id: str, price: float, quantity: int = 1):
        """Adds items to the cart. Rejects invalid prices or quantities."""
        if price < 0:
            raise ValueError("Price cannot be negative")
        if quantity <= 0:
            raise ValueError("Quantity must be greater than zero")

        if product_id in self.items:
            self.items[product_id]['qty'] += quantity
        else:
            self.items[product_id] = {'price': price, 'qty': quantity}

    def remove_item(self, product_id: str):
        """Removes an item entirely from the cart."""
        if product_id in self.items:
            del self.items[product_id]

    @property
    def total_price(self) -> float:
        """Calculates raw total before discounts."""
        return sum(item['price'] * item['qty'] for item in self.items.values())

    def apply_discount(self) -> float:
        """
        Applies business logic:
        1. VIPs get flat 20% off.
        2. Regulars get 10% off if total > 100.
        3. No discount otherwise.
        """
        total = self.total_price
        
        if self.is_vip:
            return round(total * 0.8, 2)
        elif total > 100:
            return round(total * 0.9, 2)
        
        return round(total, 2)

    def checkout(self):
        """
        Orchestrates the checkout process:
        1. Validates cart is not empty.
        2. Checks stock for all items.
        3. Calculates final price.
        4. Charges payment.
        5. Updates inventory.
        """
        if not self.items:
            raise InvalidOrderError("Cannot checkout an empty cart")

        # 1. Check Inventory Logic
        for product_id, data in self.items.items():
            available_stock = self.inventory.get_stock(product_id)
            if available_stock < data['qty']:
                raise InventoryShortageError(f"Not enough stock for {product_id}")

        # 2. Calculate Final Price
        final_amount = self.apply_discount()

        # 3. Process Payment
        try:
            success = self.payment.charge(final_amount, "USD")
            if not success:
                raise PaymentFailedError("Transaction declined by gateway")
        except Exception as e:
            # Catching generic network errors from the gateway
            raise PaymentFailedError(f"Payment gateway error: {str(e)}")

        # 4. Decrement Stock (Only occurs if payment succeeded)
        for product_id, data in self.items.items():
            self.inventory.decrement_stock(product_id, data['qty'])

        self.is_paid = True
        self.status = "COMPLETED"
        
        return {"status": "success", "charged_amount": final_amount}

Убедитесь, что у вас локально в новой папке находится указанный выше файл Python ( order_service.py ), и что этот проект открыт для обсуждения в Antigravity.

Это простой сервис для оформления заказов, имеющий следующие ключевые функции в процессе checkout :

1. Проверяет, не пуста ли корзина.
2. Проверьте наличие всех товаров на складе.
3. Рассчитывает окончательную цену.
4. Оплата сборов.
5. Обновляет данные об остатках на складе.

Мы поручим Агенту задачу генерировать модульные тесты, предоставлять фиктивные реализации и выполнять тесты, чтобы убедиться в их успешном прохождении.

Мы откроем папку нашей рабочей области, и вы заметите, что теперь мы можем использовать символ @ для ссылки на файл. Например, мы можем начать набирать @order , и отобразится файл order_service.py .

Мы можем дать задание, которое поможет нам разобраться в этом файле. Приведите следующую подсказку:

Explain the @order_service.py file

Далее следует пояснение, что представляет собой этот файл:

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

Can you visually show this class for better understanding

В Antigravity сообщают, что задача выполнена и создан артефакт, содержащий визуализацию:

Визуализацию можно посмотреть ниже:

и следующее:

Наш следующий шаг — сгенерировать модульные тесты и попросить агента их протестировать. Я даю следующую подсказку:

generate unit tests for this module and test it out with mock implementations.

Программа выполнила свою задачу, сгенерировала тесты, запустила их и исправила ошибку. Вот её результат:

Одним из сгенерированных файлов был также тестовый файл. Скриншот которого представлен ниже:

Что стоит попробовать

Возьмите свой собственный код и посмотрите, что вы можете попросить сделать Агента, начиная от добавления новой функциональности и заканчивая рефакторизацией отдельных частей кода.

7. Поздравляем!

Поздравляем! Вы успешно использовали Google Antigravity для:

• Самостоятельно проводите поиск в интернете.
• Создавайте и совершенствуйте полнофункциональные веб-приложения.
• Разрабатывайте и проверяйте сложные модульные тесты с использованием моков.

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

Справочная документация

• Codelab: Начало работы с Google Antigravity
• Официальный сайт: https://antigravity.google/
• Документация: https://antigravity.google/docs
• Скачать: https://antigravity.google/download
• YouTube-канал Google Antigravity: https://www.youtube.com/@googleantigravity