Mit Google Antigravity entwickeln

1. Einführung

In diesem Codelab erfahren Sie mehr über Google Antigravity, eine agentische Entwicklungsplattform, die Ihnen bei der Entwicklung in dieser Ära von KI-Agenten helfen soll. Antigravity ist die zentrale Leitstelle für Ihre KI-Agenten und bietet eine einheitliche Plattform zum Starten, Überwachen und Orchestrieren ihrer Aktivitäten.

In diesem Codelab verwenden wir Antigravity, um echte Anwendungen zu erstellen. Wir werden von einfacher Web-Recherche zur Generierung von Full-Stack-Anwendungen und Unit-Tests auf Unternehmensniveau übergehen.

Voraussetzungen:

• Antigravity und Antigravity IDE sind installiert und konfiguriert.
• Grundlegende Kenntnisse von Google Antigravity Wir empfehlen, das Codelab Erste Schritte mit Google Antigravity durchzuarbeiten.

2. Anwendungsbereiche

Da Sie die Grundlagen von Antigravity kennen, sehen wir uns einige Anwendungsfälle an. Antigravity ist eine Plattform, bei der KI‑Agenten im Mittelpunkt stehen. Das bedeutet, dass wir in den meisten Fällen einfach eine Anweisung an den Agenten geben. Der Agent führt dann die Aufgabe selbstständig aus, fragt bei Bedarf nach Berechtigungen, erstellt die Artefakte und benachrichtigt uns, wenn die Aufgabe erledigt ist. Daher können wir nicht jede einzelne Ausgabe des Agent-Gesprächs in den folgenden Anwendungsfällen erstellen. Wir stellen Ihnen die Anleitung und einige erforderliche Screenshots der erwarteten Ergebnisse zur Verfügung. Ihre Ergebnisse können jedoch etwas abweichen.

Die Anwendungsfälle, die wir behandeln, reichen von der Automatisierung einiger Aufgaben mit externen Websites über das Generieren und Überprüfen von Unit-Testläufen für ein Projekt bis hin zur vollständigen Entwicklung einer Website. Los gehts.

3. Nachrichten-Highlights

Das ist ein einfacher Anwendungsfall, kann aber die Grundlage dafür sein, den Webbrowser zu verwenden, um Websites zu besuchen, Informationen zu extrahieren, Aktionen auszuführen und dann Daten an den Nutzer zurückzugeben.

In diesem Fall rufen wir die Google News-Website auf und extrahieren einige Informationen. Sie können aber ganz einfach eine Website Ihrer Wahl testen und sehen, wie es läuft.

Wir gehen davon aus, dass wir einen Stammordner haben, unter dem wir die verschiedenen Projekte erstellen, die wir in diesem Codelab sehen werden. Dieser Stammordner auf unserem Computer heißt agy2-pprojects.

Erstellen Sie zuerst einen Ordner mit dem Namen news-highlights im oben genannten Ordner, um neu zu beginnen.

Starten Sie Antigravity und erstellen Sie ein neues Projekt. Fügen Sie den Ordner news-highlights hinzu.

Starten Sie eine neue Unterhaltung im neu importierten news-highlights-Arbeitsbereich:

Geben Sie dann den folgenden Befehl ein: Rufe news.google.com auf und fasse die aktuellen Highlights für mich zusammen.

Dadurch wird der Agent-Prozess gestartet. Der Agent stellt fest, dass er die Website news.google.com besuchen und Sie um Erlaubnis bitten muss. Sie werden möglicherweise mehrmals aufgefordert, URLs zu lesen. Sie können die Berechtigung für dieses Projekt usw. erteilen.

Achten Sie genau auf den Denkprozess und darauf, wie der KI-Agent seine Arbeit angeht. Unten sehen Sie ein Beispiel für die Ausführung durch den Agenten:

Mögliche Prompts

• Wenn Sie das verstanden haben, wählen Sie eine Website aus, die verfügbar ist und von der der Agent Daten abrufen/zusammenfassen soll. Nehmen Sie eine Website, von der Sie wissen, dass sie Dashboards und Diagramme enthält, und bitten Sie Gemini, einige Werte auszuwählen.
• Probieren Sie den folgenden Prompt aus: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. Dynamische Website mit Python + Flask erstellen

Als Nächstes generieren wir eine vollständige Webanwendung. Die Webanwendung, die wir erstellen werden, ist eine Website, die Informationen zu einer eintägigen technischen Veranstaltung mit Vorträgen von mehreren Referenten enthält.

Erstellen Sie noch einmal einen neuen Ordner mit dem Namen conference-website. Achten Sie darauf, dass Sie in der Antigravity Agent-Benutzeroberfläche ein neues Projekt erstellt und den Ordner conference-website hinzugefügt haben.

Sie können die Unterhaltung mit dem folgenden Prompt beginnen:

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 analysiert die Anfrage und erstellt zuerst einen Implementierungsplan. Es wird ein wichtiges Artefakt namens implementation_plan.md erstellt, das Sie überprüfen können. Darin wird beschrieben, wie die Anforderungen, die Sie im Prompt angegeben haben, erfüllt werden sollen. Hier ein Beispiel für eine Ausgabe:

Bevor Sie auf „Weiter“ klicken, sollten Sie sich den Implementierungsplan ansehen. Sie können entweder auf den Link zur implementation_plan.md-Datei oben klicken oder das Zusatzfeld rechts oben ein- oder ausblenden. Daraufhin wird die Artefaktansicht angezeigt. Dort sehen Sie, dass der Implementierungsplan zur Überprüfung bereitsteht.

Unten sehen Sie einen Beispielimplementierungsplan, der für unseren Lauf generiert wurde:

Sie können Ihre Kommentare im Plan eingeben und den Agenten noch einmal auffordern. Alternativ können Sie den Implementierungsplan auch so akzeptieren und fortfahren, indem Sie in der Unterhaltungsoberfläche auf die Schaltfläche Proceed (Fortfahren) klicken.

Der Agent generiert die Quellcodedateien und aktualisiert ein weiteres Artefakt namens „Task“. Dies ist eine Liste von Aktionen oder Aufgaben, die ausgeführt werden müssen, um das Endergebnis zu erzielen.

Sie können jederzeit auf die Aufgabe klicken oder die Liste der Artefakte aufrufen, um die Aufgaben anzusehen. Unten sehen Sie ein Beispiel für einen Eintrag:

Irgendwann in der letzten Aufgabe, in der versucht wird, die Anwendung auszuführen und zu überprüfen, richtet Antigravity eine Python-Umgebung ein und benötigt Ihre Berechtigung, um die Umgebung einzurichten, die Abhängigkeiten zu installieren usw. Erteilen Sie die Berechtigungen nach Bedarf.

Nach erfolgreicher Überprüfung werden die Details zusammen mit einem weiteren Artefakt, dem Walkthrough, hervorgehoben. Der Walkthrough enthält Details zu den abgeschlossenen Funktionen, dem Technologie-Stack, den Validierungsergebnissen und den Anleitungen.

Unten sehen Sie ein Beispiel für einen Walkthrough:

Die finale Website, die beim Aufrufen der URL angezeigt wird, ist unten zu sehen:

Wenn Sie den generierten Code sehen möchten, können Sie oben rechts auf IDE öffnen klicken. Dadurch wird die Antigravity IDE geöffnet, in der Sie den generierten Code ansehen können. Hier sehen Sie ein Beispiel für einen Screenshot:

Mögliche Prompts

• Fügen Sie der Anwendung zusätzliche Funktionen hinzu. Geben Sie dem Agenten die Details an und beobachten Sie, wie er seine Aufgabe erledigt, indem er zuerst die Aufgabenliste und dann den Implementierungsplan usw. ändert.
• Fügen Sie dem Veranstaltungsplan zusätzliche Daten hinzu. Beispiel: Add two more talks to the schedule.
• Sie können den Agent auffordern, eine README-Datei oder weitere Dokumentation für die Anwendung zu generieren.

5. Einfache Produktivitäts-App generieren

Wir erstellen jetzt eine einfache Pomodoro-Timer-Webanwendung.

Erstellen Sie einen pomodoro-timer-Ordner. Achten Sie darauf, dass Sie sich in Agent Manager befinden und den Arbeitsbereich pomodoro-timer importiert und ausgewählt haben. Beginnen Sie mit diesem Prompt:

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

Beachten Sie, wie der Implementierungsplan und die Aufgabenliste erstellt werden. Achten Sie weiterhin auf den Ablauf. Es kann Situationen geben, in denen Sie zur Überprüfung aufgefordert werden.

Unten sehen Sie einen Beispiel-Lauf mit der Walkthrough-Nachricht und den Aufgaben:

Die endgültige App sah so aus wie unten und sie sieht ziemlich gut aus.

Mögliche Prompts

• Fügen Sie der Anwendung Bilder hinzu. Fügen Sie der Anwendung beispielsweise ein Timerbild hinzu.
• Probieren Sie einige Varianten der Anwendung aus, die Sie generieren möchten. Probieren Sie verschiedene Stile und Bilder aus und bitten Sie um Änderungen.

6. Unittests und Mock-Stubs generieren und Tests validieren

Der letzte Anwendungsfall, den wir hier ausprobieren, ist das Generieren von Unittests für eine bestimmte Code-Datei, die wir haben, und das Ausführen und Validieren der Tests durch den KI-Agenten.

Dazu erstellen wir einen Arbeitsbereich mit einer einzelnen Python-Datei, wie unten dargestellt:

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}

Achten Sie darauf, dass die oben genannte Python-Datei (order_service.py) lokal in einem neuen Ordner verfügbar ist und dass dieses Projekt in Antigravity für Unterhaltungen geöffnet ist.

Dies ist ein einfacher Order-Dienst mit den folgenden Schlüsselfunktionen in der Funktion checkout:

1. Prüft, ob der Warenkorb leer ist.
2. Prüfen Sie den Lagerbestand aller Artikel.
3. Berechnet den Endpreis.
4. Zahlung wird in Rechnung gestellt.
5. Aktualisiert das Inventar.

Wir weisen dem Agent die Aufgabe zu, Unittest-Fälle zu generieren, Mock-Implementierungen bereitzustellen und die Tests auszuführen, um sicherzustellen, dass sie erfolgreich sind.

Wir öffnen den entsprechenden Arbeitsbereichordner. Sie sehen, dass wir jetzt auch das Symbol @ verwenden können, um auf die Datei zu verweisen. Wenn wir beispielsweise @order eingeben, sollte die Datei order_service.py angezeigt werden.

Wir können eine Aufgabe stellen, die uns hilft, diese Datei zu verstehen. Geben Sie den folgenden Prompt ein:

Explain the @order_service.py file

Es wird eine Erklärung dazu angezeigt, was diese Datei ist:

Wir können mit dem folgenden Prompt eine bessere Visualisierung generieren lassen:

Can you visually show this class for better understanding

Antigravity gibt an, dass die Aufgabe abgeschlossen ist und ein Artefakt mit der Visualisierung generiert wurde:

Wir können uns die Visualisierung wie unten ansehen:

und die folgenden:

Als Nächstes generieren wir die Einheitentests und bitten den Agenten, sie auszuführen. Ich gebe den folgenden Prompt ein:

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

Es hat seine Aufgabe erledigt, die Tests generiert, sie ausgeführt und auch einen Fehler behoben. So sieht die Ausgabe aus:

Eine der generierten Dateien war auch die Testdatei. Ein Screenshot davon ist unten zu sehen:

Mögliche Prompts

Sie können Ihren eigenen Code verwenden und den Agenten bitten, verschiedene Aufgaben zu erledigen, z. B. zusätzliche Funktionen hinzuzufügen oder Teile Ihres Codes zu refaktorieren.

7. Glückwunsch

Glückwunsch! Sie haben Google Antigravity erfolgreich für Folgendes verwendet:

• Autonom im Web recherchieren
• Full-Stack-Webanwendungen erstellen und iterieren.
• Komplexe Unittests mit Mocks schreiben und validieren

Jetzt können Sie Antigravity die Arbeit in Ihren eigenen Projekten überlassen.

Referenzdokumente

• Codelab : Erste Schritte mit Google Antigravity
• Offizielle Website : https://antigravity.google/
• Dokumentation: https://antigravity.google/docs
• Download : https://antigravity.google/download
• YouTube-Kanal für Google Antigravity : https://www.youtube.com/@googleantigravity