Mit Google Antigravity entwickeln

1. Einführung

Google Antigravity ist eine agentische IDE von Google. Im Codelab Erste Schritte mit Antigravity erfahren Sie mehr über die Grundlagen von Antigravity. In diesem Codelab verwenden wir Antigravity, um echte Anwendungen zu erstellen. Wir beginnen mit einfacher Web-Recherche und gehen dann zur Generierung von Full-Stack-Anwendungen und Unittests auf Unternehmensebene über.

Voraussetzungen :

• Google Antigravity ist installiert und konfiguriert.
• Grundlegende Kenntnisse von Google Antigravity. Es wird empfohlen, das Codelab durchzuarbeiten: Erste Schritte mit Google Antigravity.

2. Anwendungsfälle

Da Sie grundlegende Kenntnisse von Antigravity haben, sehen wir uns einige Anwendungsfälle an, um zu sehen, wie es in der Praxis funktioniert. Antigravity ist eine Plattform, bei der der KI-Agent im Mittelpunkt steht. In den meisten Fällen geben wir dem KI-Agenten einfach eine Anweisung und er erledigt die Aufgabe selbstständig, fragt bei Bedarf nach Berechtigungen, erstellt die Artefakte und benachrichtigt uns dann, wenn die Aufgabe abgeschlossen ist. Daher können wir in den folgenden Anwendungsfällen nicht jede einzelne Ausgabe der Unterhaltung mit dem KI-Agenten zeigen. Wir geben die Anweisungen und einige Screenshots der erwarteten Ergebnisse an, aber Ihre Ergebnisse können etwas abweichen.

Die Anwendungsfälle, die wir behandeln, reichen von der Automatisierung einiger Aufgaben mit externen Websites über die Generierung und Überprüfung von Unittest-Fällen für ein Projekt bis hin zur vollständigen Website-Entwicklung. Los gehts.

3. Nachrichten-Highlights

Dies ist ein einfacher Anwendungsfall, kann aber die Grundlage dafür sein, dass Sie mit dem Webbrowser Websites besuchen, Informationen extrahieren, einige Aktionen ausführen und dann Daten an den Nutzer zurückgeben.

In diesem Fall besuchen wir die Google News-Website und extrahieren einige Informationen. Sie können aber ganz einfach mit einer Website Ihrer Wahl experimentieren und sehen, wie es funktioniert.

Erstellen Sie zuerst einen Ordner mit dem Namen news-hightlights, um neu zu beginnen. Wechseln Sie in Antigravity zum Agent Manager und importieren Sie den neu erstellten Ordner als Arbeitsbereich mit der Schaltfläche Add Workspace:

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

Geben Sie dann die folgende Anweisung: "visit news.google.com and get me the highlights at the moment."

Dadurch wird der Prozess des KI-Agenten gestartet und er stellt fest, dass er den Browser starten muss usw. Achten Sie genau auf den Denkprozess und sehen Sie, wie der KI-Agent seine Arbeit erledigt. Wenn alles gut geht, sollte der Antigravity-Browser gestartet und die Website wie unten gezeigt besucht werden. Der blaue Rahmen um die Website zeigt, dass der KI-Agent jetzt den Browser steuert und auf der Website navigiert, um die Informationen zu erhalten.

Sobald die Arbeit abgeschlossen ist, sollten auch die Artefakte generiert werden, wie unten gezeigt:

Unten sehen Sie eine Beispielausführung durch den KI-Agenten:

Links sehen Sie den Denkprozess. Sie können auch durch die Punkte scrollen und die Wiedergabe und andere Daten ansehen.

Mögliche Aufgaben

• Sobald Sie das verstanden haben, wählen Sie eine verfügbare Website aus, von der der Agent einige Daten abrufen oder zusammenfassen soll. Wählen Sie eine Website aus, die Dashboards und Diagramme enthält, und bitten Sie den KI-Agenten, 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 und Flask generieren

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

Erstellen Sie noch einmal einen neuen Ordner mit dem Namen conference-website. Achten Sie darauf, dass Sie sich im Agent Manager befinden und den Arbeitsbereich conference-website importiert und ausgewählt haben. Fügen Sie auch den Modus Planning hinzu, damit der KI-Agent plant, bevor er die Aufgabe ausführt.

Geben Sie den folgenden Prompt ein:

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. 

Sie können die Unterhaltung mit dem oben genannten Prompt beginnen:

Während der KI-Agent seine Aufgabe erledigt, erstellt er die Artefakte:

• Aufgabenartefakt
• Implementierungsartefakt
• Artefakt für die Schritt-für-Schritt-Anleitung

Das unten angegebene Aufgabenartefakt war die anfängliche Abfolge von Aufgaben, die der Agent basierend auf der ihm zugewiesenen Aufgabe ausführen sollte. Unten sehen Sie einen Screenshot der Ausführung:

Klicken Sie dann auf das Artefakt Implementation Plan. Unten sehen Sie einen Screenshot:

Und schließlich haben Sie das Artefakt Walkthrough. Es enthält alles, was der KI-Agent getan hat, wie unten gezeigt:

Der Server wurde gestartet und die URL wurde bereitgestellt. Wenn ich darauf klicke, wird die Anwendung geöffnet. Unten sehen Sie einen Screenshot:

Wenn ich zum Editor wechsle, sehe ich auf dem Bildschirm den Ordner, in dem die Python Flask-Anwendung generiert wurde. Rechts ist auch der Agent mode markiert. Dort können Sie die Unterhaltung fortsetzen.

Angenommen, wir möchten der Veranstaltung weitere Vorträge hinzufügen. Wir können im Editor und im Agentenbereich bleiben und eine Anweisung wie Add two more talks to the schedule geben.

Dadurch analysiert der KI-Agent die Anforderung, aktualisiert den Aufgaben- und Implementierungsplan und validiert dann auch die aktualisierte Funktion. Unten sehen Sie eine Beispielunterhaltung:

Sie können bei Bedarf zum Agent Manager zurückkehren. Dieser Prozess sollte Ihnen helfen, den Übergang vom Agent Manager zum Editor, die entsprechenden Änderungen usw. zu verstehen.

Hinweis:Bei der Ausführung dieser Aufgabe hat der KI-Agent versucht, den Flask-Server an Port 5000 zu starten, der auf dem aktuellen Computer verwendet wurde. Er hat immer wieder den nächsten kostenlosen Port versucht, bis er sich für 8080 entschieden hat und den Server starten konnte.

Mögliche Aufgaben

• Fügen Sie der Anwendung zusätzliche Funktionen hinzu. Geben Sie dem KI-Agenten die Details und beobachten Sie, wie er seine Aufgabe erledigt, indem er zuerst die Aufgabenliste und dann den Implementierungsplan ändert usw.
• Bitten Sie den KI-Agenten, eine README-Datei oder weitere Dokumentation für die Anwendung zu generieren.

5. Einfache Produktivitäts-App generieren

Jetzt generieren wir eine einfache Pomodoro-Timer-Webanwendung.

Erstellen Sie einen Ordner pomodoro-timer. Achten Sie darauf, dass Sie sich im 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 die Aufgabenliste und der Implementierungsplan erstellt werden. Achten Sie auf den Ablauf. Es kann vorkommen, dass Sie zur Überprüfung aufgefordert werden. Unten sehen Sie eine Beispielausführung.

In diesem Fall sollte auch der Antigravity-Browser gestartet werden, eigene Tests durchgeführt und dann bestätigt werden, dass die Tests erfolgreich waren. Eines der generierten Artefakte war ein Medienartefakt mit dem Video der Überprüfung. So können Sie sehen, was getestet wurde. Ich habe auch einige Stiländerungen vorgeschlagen, da sie nicht übernommen wurden, und der KI-Agent konnte das tun.

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

Wir können der Anwendung ein schönes Timerbild hinzufügen. Dazu müssen wir nur eine Folgeanweisung wie unten angegeben ausführen:

Add an image to the application that displays a timer.

Dadurch hat der KI-Agent dem Aufgabenartefakt eine neue Aufgabe hinzugefügt:

Dann wurde während der Ausführung der Aufgabe ein Bild generiert:

Schließlich enthielt die App das gewünschte Bild:

Mögliche Aufgaben

• Der Hintergrund für das Sanduhrsymbol in der Anwendung ist nicht transparent. Bitten Sie den KI-Agenten, ihn transparent zu machen.
• Probieren Sie einige Varianten einer Anwendung aus, die Sie generieren möchten. Spielen Sie mit den Stilen, Bildern, bitten Sie um Änderungen usw.

6. Unittests und Mock-Stubs generieren und Tests validieren

Der letzte Anwendungsfall, den wir hier ausprobieren, ist die Generierung von Unittests für eine bestimmte Code-Datei, die wir haben. Der KI-Agent soll die Tests auch ausführen und validieren.

Dazu verwenden wir einen Arbeitsbereich mit einer einzelnen Python-Datei, wie unten gezeigt:

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 sich die oben genannte Python-Datei lokal in einem neuen Ordner befindet, und laden Sie sie als Arbeitsbereich in Antigravity.

Dies ist ein einfacher Bestelldienst mit der folgenden Schlüsselfunktion in der Funktion checkout:

1. Prüft, ob der Warenkorb nicht leer ist.
2. Prüft den Lagerbestand für alle Artikel.
3. Berechnet den Endpreis.
4. Zieht die Zahlung ein.
5. Aktualisiert den Lagerbestand.

Wir weisen dem KI-Agenten 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 Ordner unseres Arbeitsbereichs. Sie sehen, dass wir jetzt auch das Symbol @ verwenden können, um auf die Datei zu verweisen. Beispiel:

Hier wird erklärt, was diese Datei ist:

Wir können den KI-Agenten bitten, mit dem folgenden Prompt eine bessere Visualisierung zu generieren:

Can you visually show this class for better understanding

Als Nächstes generieren wir die Unittests und bitten den KI-Agenten, sie zu testen. Ich gebe den folgenden Prompt ein:

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

Der KI-Agent hat das folgende Aufgabenartefakt generiert und seine Aufgabe erledigt.

Sie können auch die Details der Tests sehen, die ausgeführt wurden:

Eine der generierten Dateien war auch die Testdatei. Unten sehen Sie einen Screenshot:

Mögliche Aufgaben

Verwenden Sie Ihren eigenen Code und sehen Sie, was Sie den KI-Agenten bitten können, von der Hinzufügung weiterer Funktionen bis hin zum Refactoring von Teilen Ihres Codes.

7. Glückwunsch

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

• Autonome Web-Recherche
• Erstellung und Iteration von Full-Stack-Webanwendungen
• Generierung von Assets und Optimierung der UI-Ästhetik
• Erstellung und Validierung komplexer Unittests mit Mocks

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

Referenzdokumente

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