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

1. Введение

Google Antigravity (далее в документе именуемая просто Antigravity) — это IDE от Google, работающая в режиме агента. В практическом руководстве «Начало работы с Antigravity» вы можете изучить основы Antigravity. В этом руководстве мы будем использовать Antigravity для создания реальных приложений. Мы перейдем от простого поиска информации в интернете к генерации полнофункциональных приложений и модульных тестов корпоративного уровня.

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

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

Для получения кредитов Google Cloud: Чтобы использовать Antigravity с проектами Google Cloud, активируйте свои бесплатные кредиты Google Cloud, перейдя по этой ссылке . Вы можете следовать инструкциям здесь , чтобы активировать кредиты и создать новый проект.

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

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

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

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

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

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

Убедитесь, что вы находитесь в Agent Manager и выбрали Playground , как показано ниже:

Затем дайте следующее указание:

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

После завершения работы вы также увидите, как генерируются артефакты, как показано ниже:

Ниже показан пример выполнения агентом своей работы:

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

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

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

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

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

Ещё раз убедитесь, что вы находитесь в Agent Manager и выбрали Playground .

Дайте следующий ответ:

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. 

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

В процессе выполнения своей задачи Агент будет приступать к созданию артефактов:

• Артефакт задания
• Артефакт реализации
• Прохождение артефакта

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

Затем вы можете щелкнуть по артефакту «План реализации» . Пример скриншота показан ниже:

И наконец, у вас есть артефакт «Пошаговое руководство» . Он содержит все действия Агента, как показано ниже:

Обратите внимание, что сервер запустился и предоставил мне URL-адрес, по которому я перехожу, и у меня открывается приложение. Пример скриншота показан ниже:

Если я переключусь в редактор , обратите внимание, что на экране отображается папка, в которой генерируется приложение Python Flask. Вы также заметите, что справа отмечен Agent mode , и вы можете продолжить обсуждение и там.

Теперь предположим, что мы хотим добавить еще несколько докладов к мероприятию. Мы можем остаться в редакторе и на панели агента дать указание, например: Add two more talks to the schedule .

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

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

Примечание: Во время выполнения этой задачи агент пытался запустить Flask Server на порту 5000, который был занят на текущей машине. Он продолжал попытки использовать следующий свободный порт, пока не выбрал порт 8080, после чего смог запустить сервер.

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

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

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

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

Убедитесь, что вы находитесь в Agent Manager и выбрали Playground . Введите следующее сообщение:

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

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

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

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

А что если мы добавим в приложение красивое изображение таймера? Всё, что нам нужно сделать, это отправить следующую инструкцию, как показано ниже:

Add an image to the application that displays a timer.

В результате агент добавил новую задачу в артефакт «Задача»:

Затем, в процессе выполнения задачи, программа генерировала изображение:

В итоге приложение выдало именно то изображение, которое мы запрашивали:

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

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

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 находится локально в папке , и загрузите его в качестве рабочей области в Antigravity.

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

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

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

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

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

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

Can you visually show this class for better understanding

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

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/use-cases
• Скачать: https://antigravity.google/download
• YouTube-канал Google Antigravity: https://www.youtube.com/@googleantigravity