Mit Google Antigravity entwickeln

1. Einführung

Google Antigravity (im restlichen Dokument als Antigravity bezeichnet) ist eine agentenbasierte IDE von Google. Im Codelab „Erste Schritte mit Antigravity“ können Sie die Grundlagen von Antigravity kennenlernen. 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:

Google Antigravity ist installiert und konfiguriert.
Grundlegendes Verständnis von 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 der KI‑Agent im Mittelpunkt steht. 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 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-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.

Achten Sie darauf, dass Sie sich in Agent Manager befinden und Playground ausgewählt haben, wie unten gezeigt:

Geben Sie dann die folgende Anweisung:

Dadurch wird der Agent-Prozess gestartet und es wird festgelegt, dass der Browser gestartet werden muss usw. Achten Sie genau auf den Denkprozess und darauf, wie der Agent seine Arbeit erledigt. Wenn alles wie geplant ausgeführt wird, sollte der Antigravity-Browser gestartet und die Website wie unten dargestellt aufgerufen werden. Der blaue Rahmen um die Website zeigt an, dass der Agent jetzt den Browser steuert und auf der Website navigiert, um die Informationen abzurufen.

Wenn die Arbeit abgeschlossen ist, sollten auch die Artefakte generiert werden, wie unten dargestellt:

Hier sehen Sie ein Beispiel für die Ausführung durch den Agent:

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

Mögliche Aktivitäten

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.

Achten Sie noch einmal darauf, dass Sie sich im Agent Manager befinden und die Playground ausgewählt haben.

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 Agent seine Aufgabe ausführt, erstellt er die Artefakte:

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

Das unten angegebene Task-Artefakt war die ursprüngliche Abfolge von Aufgaben, die der Agent basierend auf der ihm zugewiesenen Aufgabe entschlüsselt hat. Unten sehen Sie einen Beispiel-Screenshot von der Ausführung:

Klicken Sie dann auf das Artefakt Implementierungsplan. Hier ein Beispiel-Screenshot:

Und schließlich gibt es noch das Artefakt Walkthrough. Es enthält alles, was der Agent getan hat, wie unten dargestellt:

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

Wenn ich zum Editor wechsle, sehe ich auf dem Bildschirm den Ordner, in dem die Python Flask-Anwendung generiert wird. Außerdem sehen Sie, dass Agent mode rechts getaggt ist. Dort können Sie die Unterhaltung auch fortsetzen.

Angenommen, wir möchten der Veranstaltung weitere Vorträge hinzufügen. Wir können im Editor und im Agent-Bereich bleiben und einen Befehl wie Add two more talks to the schedule eingeben.

Der KI-Agent analysiert dann die Anforderung, aktualisiert die Aufgabe und den Implementierungsplan und validiert auch die aktualisierte Funktion. Unten sehen Sie ein Beispiel für einen Unterhaltungsverlauf:

Sie können jederzeit zum Agent Manager zurückkehren. Dieser Prozess soll Ihnen helfen, den Übergang vom Agent Manager zum Editor nachzuvollziehen und entsprechende Änderungen vorzunehmen.

Mögliche Aktivitäten

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.
Bitten Sie den Agent, eine README-Datei oder weitere Dokumentation für die Anwendung zu erstellen.

5. Einfache Produktivitäts-App generieren

Wir generieren jetzt eine einfache Pomodoro-Timer-Webanwendung.

Prüfen Sie, ob Sie sich in Agent Manager befinden und Playground ausgewählt haben. Geben Sie den folgenden Prompt ein:

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 weiterhin auf den Ablauf. Es kann Situationen geben, in denen Sie zur Überprüfung aufgefordert werden. Unten sehen Sie einen Beispiel-Lauf.

In diesem Fall sollte auch der Antigravity-Browser gestartet, eigene Tests durchgeführt und dann bestätigt werden, dass die Tests erfolgreich waren. Unter anderem wurde ein Media-Artefakt generiert, das das Video der Überprüfung enthält. So können Sie gut nachvollziehen, was getestet wurde. Ich habe auch einige Stiländerungen vorgeschlagen, da sie nicht übernommen wurden, und das hat funktioniert.

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

Wie wäre es, wenn wir der Anwendung ein schönes Timerbild hinzufügen? Wir müssen lediglich eine Folgeanweisung wie unten ausgeben:

Add an image to the application that displays a timer.

Der Agent hat dem Task-Artefakt eine neue Aufgabe hinzugefügt:

Dann wurde ein Bild generiert, während die Aufgabe ausgeführt wurde:

Schließlich wurde das Bild in der App wie gewünscht angezeigt:

Mögliche Aktivitäten

Der Hintergrund des Stundenglassymbols in der Anwendung ist nicht transparent. Bitten Sie den Agenten, das transparent zu machen.
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 Sie die oben genannte Python-Datei lokal in einem Ordner haben und sie als Arbeitsbereich in Antigravity laden.

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

Prüft, ob der Warenkorb nicht leer ist.
Prüfen Sie den Lagerbestand aller Artikel.
Berechnet den Endpreis.
Gebührenzahlung
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. Wir könnten beispielsweise Folgendes tun:

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

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

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

Es wurde das folgende Aufgabenartefakt generiert und die Aufgabe wurde ausgeführt.

Sie können sich auch die Details der ausgeführten Tests ansehen:

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

Mögliche Aktivitäten

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

7. Glückwunsch

Glückwunsch! Sie haben Google Antigravity erfolgreich verwendet, um:

Autonom im Web recherchieren
Full-Stack-Webanwendungen erstellen und iterieren
Assets generieren und die Ästhetik der Benutzeroberfläche optimieren
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
Anwendungsfälle : https://antigravity.google/use-cases
Download : https://antigravity.google/download
YouTube-Kanal für Google Antigravity : https://www.youtube.com/@googleantigravity