Mit Google Antigravity entwickeln

1. Einführung

In diesem Codelab lernen Sie Google Antigravity kennen, eine agentische Entwicklungsplattform, die Ihnen bei der Entwicklung in dieser Ära von KI-Agenten helfen soll. Antigravity ist die zentrale Kommandozentrale 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.
• Grundlegendes Wissen zu Google Antigravity Wir empfehlen, das Codelab Erste Schritte mit Google Antigravity durchzuarbeiten.

2. Anwendungsfälle

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 abgeschlossen ist. Daher können wir nicht jede einzelne Ausgabe der Agent-Unterhaltung in den folgenden Anwendungsfällen erstellen. Wir stellen Ihnen die Anleitung und einige 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-Testfällen für ein Projekt bis hin zur vollständigen Entwicklung einer Website. Los gehts.

3. Nachrichten-Highlights

Dies ist ein einfacher Anwendungsfall, kann aber die Grundlage dafür sein, mit dem Webbrowser 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, in 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 namens 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 aufrufen 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 vorgeht. Unten sehen Sie ein Beispiel für die Ausführung durch den KI-Agenten:

Mögliche Maßnahmen

• 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 sie, 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

Lassen Sie uns nun eine vollständige Webanwendung generieren. 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, um zu sehen, wie die Anforderungen, die Sie im Prompt angegeben haben, erfüllt werden sollen. Ein Beispiel für die Ausgabe sehen Sie unten:

Sehen Sie sich den Implementierungsplan an, bevor Sie auf „Weiter“ klicken. Sie können entweder oben auf den Link zur implementation_plan.md-Datei klicken oder die Zusatzleiste rechts oben ein- und ausblenden. Dadurch wird die Artefaktansicht geöffnet und Sie können den Implementierungsplan einsehen.

Ein Beispiel für einen Implementierungsplan, der für unseren Lauf generiert wurde, sehen Sie unten:

Sie können Ihre Kommentare im Plan angeben 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. Dazu ist Ihre Genehmigung erforderlich. Sie müssen die Berechtigungen nach Bedarf erteilen.

Nach erfolgreicher Überprüfung werden die Details zusammen mit einem weiteren Artefakt, dem Walkthrough, hervorgehoben. Darin werden die abgeschlossenen Funktionen, der Technologie-Stack, die Validierungsergebnisse und die Anleitung beschrieben.

Hier 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 ein Beispiel-Screenshot:

Mögliche Maßnahmen

• Fügen Sie der Anwendung zusätzliche Funktionen hinzu. Geben Sie dem Agent 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, z. B. Add two more talks to the schedule.
• Sie können den Agent bitten, eine README-Datei oder weitere Dokumentation für die Anwendung zu generieren.

5. Einfache Produktivitäts-App generieren

Wir generieren 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 Beispielablauf mit der Walkthrough-Nachricht und den Aufgaben:

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

Mögliche Maßnahmen

• Fügen Sie der Anwendung einige Bilder hinzu, z. B. ein Timer-Bild.
• 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 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 Sie dieses Projekt in Antigravity für Unterhaltungen geöffnet haben.

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

1. Prüft, ob der Einkaufswagen nicht leer ist.
2. Prüfen Sie den Lagerbestand aller Artikel.
3. Berechnet den Endpreis.
4. Gebührenzahlung
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 unseren spezifischen 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:

Mit dem folgenden Prompt können wir 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 KI‑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 Maßnahmen

Sie können Ihren eigenen Code verwenden und den KI-Agenten bitten, ihn zu erweitern oder Teile davon 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