Tworzenie za pomocą Google Antigravity

1. Wprowadzenie

Google Antigravity to agentowe środowisko IDE od Google. W ćwiczeniu Pierwsze kroki z Antigravity możesz poznać podstawy Antigravity. W tym ćwiczeniu użyjemy Antigravity do tworzenia prawdziwych aplikacji. Przejdziemy od prostego wyszukiwania w internecie do generowania aplikacji full stack i testów jednostkowych na poziomie przedsiębiorstwa.

Wymagania wstępne:

• Zainstalowane i skonfigurowane Google Antigravity.
• Podstawowa wiedza o Google Antigravity. Zalecamy wykonanie ćwiczenia: Pierwsze kroki z Google Antigravity.

2. Informacje o przypadkach użycia

Znasz już podstawy Antigravity, więc przyjrzyjmy się kilku przypadkom użycia, aby zobaczyć, jak działa. Pamiętaj, że Antigravity to platforma oparta na agentach. Oznacza to, że w większości przypadków po prostu przekazujemy agentowi instrukcję, a on samodzielnie wykonuje zadanie, w razie potrzeby prosi o uprawnienia, tworzy artefakty, a następnie informuje nas o zakończeniu zadania. W związku z tym w każdym z tych przypadków użycia nie możemy przedstawić wszystkich danych wyjściowych rozmowy z agentem. Udostępnimy instrukcje i kilka niezbędnych zrzutów ekranu z oczekiwanymi wynikami, ale Twoje wyniki mogą się nieco różnić.

Przykłady użycia, które omówimy, obejmują automatyzację kilku zadań w witrynach zewnętrznych, generowanie i weryfikowanie przypadków testów jednostkowych projektu oraz tworzenie pełnej witryny. Do dzieła.

3. Najważniejsze informacje

To prosty przypadek użycia, ale może on stanowić podstawę, dzięki której możesz używać przeglądarki internetowej do odwiedzania witryn, wyodrębniania informacji, wykonywania działań i zwracania danych użytkownikowi.

W tym przypadku odwiedzimy witrynę Google News i wyodrębnimy z niej informacje. Możesz jednak łatwo eksperymentować z wybraną witryną i sprawdzić, jak to działa.

Najpierw utwórz folder o nazwie news-hightlights, aby zacząć od nowa. W Antigravity przejdź do Agent Manager i zaimportuj nowo utworzony folder jako obszar roboczy za pomocą przycisku Add Workspace (Dodaj obszar roboczy):

Rozpocznij nową rozmowę w nowo zaimportowanym obszarze roboczym news-highlights:

Następnie podaj tę instrukcję: „visit news.google.com and get me the highlights at the moment.” (odwiedź news.google.com i podaj mi najważniejsze informacje w tej chwili).

Spowoduje to uruchomienie procesu agenta, który stwierdzi, że musi uruchomić przeglądarkę itp. Zwróć szczególną uwagę na proces myślowy i zobacz, jak agent wykonuje swoją pracę. Jeśli wszystko pójdzie dobrze, uruchomi przeglądarkę Antigravity i odwiedzi witrynę, jak pokazano poniżej. Niebieska obwódka wokół witryny oznacza, że agent kontroluje teraz przeglądarkę i porusza się po witrynie, aby uzyskać informacje.

Po zakończeniu pracy powinny też zostać wygenerowane artefakty, jak pokazano poniżej:

Przykładowe wykonanie przez agenta pokazano poniżej:

Zwróć uwagę, że po lewej stronie mamy proces myślowy. Możesz też przewijać punkty i wyświetlać odtwarzanie oraz inne dane.

Co warto wypróbować

• Gdy to zrozumiesz, wybierz dostępną witrynę, z której agent ma pobrać lub podsumować dane. Wybierz witrynę, która zawiera panele i wykresy, i poproś agenta o wybranie kilku wartości.
• Wypróbuj ten prompt: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product. (Odwiedź https://docs.cloud.google.com/release-notes i podaj mi podsumowanie informacji o wersji, podzielone według produktu).

4. Generowanie dynamicznej witryny w Pythonie i Flasku

Przejdźmy teraz do generowania kompletnej aplikacji internetowej. Aplikacja internetowa, którą utworzymy, to witryna zawierająca informacje o jednodniowym wydarzeniu technicznym, podczas którego przez cały dzień będą odbywać się prezentacje różnych prelegentów.

Ponownie utwórz nowy folder o nazwie conference-website. Upewnij się, że jesteś w Agent Manager oraz że zaimportowano i wybrano obszar roboczy conference-website. Dodaj też tryb Planning (Planowanie), aby agent planował przed wykonaniem.

Podaj ten prompt:

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. 

Możesz rozpocząć rozmowę, podając prompt powyżej:

Gdy agent będzie wykonywać zadanie, będzie tworzyć artefakty:

• Artefakt zadania
• Artefakt implementacji
• Artefakt przewodnika

Artefakt zadania podany poniżej to początkowa sekwencja zadań, które agent powinien wykonać na podstawie otrzymanego zadania. Przykładowy zrzut ekranu z wykonania pokazano poniżej:

Następnie możesz kliknąć artefakt Implementation Plan (Plan implementacji). Przykładowy zrzut ekranu pokazano poniżej:

Na koniec masz artefakt Walkthrough (Przewodnik). Zawiera on wszystkie działania agenta, jak pokazano poniżej:

Zwróć uwagę, że uruchomił serwer i podał mi adres URL, który klikam, aby otworzyć aplikację. Przykładowy zrzut ekranu pokazano poniżej:

Jeśli przełączę się na Editor (Edytor), zobaczę na ekranie folder, w którym jest generowana aplikacja Python Flask. Zauważysz też, że po prawej stronie jest oznaczony Agent mode (Tryb agenta) i możesz tam kontynuować rozmowę.

Załóżmy, że chcemy dodać do wydarzenia więcej prezentacji. Możemy pozostać w edytorze i w panelu agenta, a następnie podać instrukcję taką jak Add two more talks to the schedule (Dodaj do harmonogramu 2 kolejne prezentacje).

Spowoduje to, że agent przeanalizuje wymagania, zaktualizuje zadanie i plan implementacji, a następnie zweryfikuje też zaktualizowaną funkcję. Przykładowa rozmowa pokazana jest poniżej:

Jeśli chcesz, możesz wrócić do Agent Manager. Ten proces powinien pomóc Ci zrozumieć, jak przechodzić z Agent Manager do edytora, wprowadzać odpowiednie zmiany itp.

Uwaga: podczas wykonywania tego zadania agent próbował uruchomić serwer Flask na porcie 5000, który był używany na bieżącym komputerze. Próbował kolejnych wolnych portów, aż zdecydował się użyć portu 8080 i udało mu się uruchomić serwer.

Co warto wypróbować

• Dodaj do aplikacji dodatkowe funkcje. Podaj agentowi szczegóły i zobacz, jak wykonuje zadanie, najpierw modyfikując listę zadań, a potem plan implementacji itd.
• Poproś agenta o wygenerowanie pliku README lub dodatkowej dokumentacji aplikacji.

5. Generowanie prostej aplikacji zwiększającej produktywność

Wygenerujemy teraz prostą aplikację internetową z minutnikiem Pomodoro.

Utwórz folder pomodoro-timer. Upewnij się, że jesteś w Agent Manager oraz że zaimportowano i wybrano obszar roboczy pomodoro-timer. Zacznij od tego prompta:

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

Zwróć uwagę, jak tworzy listę zadań i plan implementacji, a następnie je wykonuje. Zwracaj uwagę na przebieg procesu, ponieważ w niektórych sytuacjach może on poprosić Cię o sprawdzenie. Przykładowe wykonanie pokazano poniżej.

W tym przypadku powinien też uruchomić przeglądarkę Antigravity, przeprowadzić własne testy, a następnie potwierdzić, że testy się powiodły. Jedną z rzeczy, które wygenerował, był artefakt multimedialny zawierający film z weryfikacji. To świetny sposób, aby zobaczyć, co zostało przetestowane. Zaproponowałem też kilka zmian stylu, ponieważ nie zostały one wprowadzone, ale agentowi udało się je wprowadzić.

Gotowa aplikacja wyglądała jak ta poniżej i prezentuje się całkiem dobrze.

Możemy dodać do aplikacji ładny obraz minutnika. Wystarczy, że wydamy instrukcję uzupełniającą, jak pokazano poniżej:

Add an image to the application that displays a timer.

Spowodowało to, że agent dodał nowe zadanie do artefaktu zadania:

Następnie podczas wykonywania zadania wygenerował obraz:

Na koniec aplikacja zawierała obraz zgodnie z naszymi oczekiwaniami:

Co warto wypróbować

• Zwróć uwagę, że tło ikony klepsydry w aplikacji nie jest przezroczyste. Spróbuj poprosić agenta, aby je przezroczył.
• Wypróbuj kilka wariantów dowolnej aplikacji, którą chcesz wygenerować. Eksperymentuj ze stylami i obrazami, proś o zmiany itp.

6. Generowanie testów jednostkowych i atrap oraz sprawdzanie testów

Ostatni przypadek użycia, który tu wypróbujemy, to generowanie testów jednostkowych dla określonego pliku kodu, który mamy, oraz wykonywanie i sprawdzanie testów przez agenta.

W tym celu będziemy mieć obszar roboczy z jednym plikiem w Pythonie, jak pokazano poniżej:

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}

Upewnij się, że masz powyższy plik w Pythonie lokalnie w nowym folderze i załaduj go jako obszar roboczy w Antigravity.

Jest to prosta usługa zamówień, która ma te kluczowe funkcje w funkcji checkout (realizacja zakupu):

1. Sprawdza, czy koszyk nie jest pusty.
2. Sprawdza dostępność wszystkich produktów.
3. Oblicza cenę końcową.
4. Pobiera płatność.
5. Aktualizuje zasoby.

Przypiszemy agentowi zadanie wygenerowania przypadków testów jednostkowych, udostępnienia implementacji atrap i wykonania testów, aby upewnić się, że się powiodą.

Otworzymy folder określonego obszaru roboczego i zauważysz, że możemy teraz używać symbolu @ , aby odwoływać się do pliku. Możemy na przykład zrobić tak:

Wyświetli się wyjaśnienie, czym jest ten plik:

Możemy poprosić o wygenerowanie lepszej wizualizacji za pomocą prompta:

Can you visually show this class for better understanding

Następnym krokiem jest wygenerowanie testów jednostkowych i poproszenie agenta o ich przetestowanie. Podaję ten prompt:

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

Wygenerował ten artefakt zadania i wykonał zadanie.

Możesz też zobaczyć szczegóły przeprowadzonych testów:

Jednym z wygenerowanych plików był też plik testu. Jego zrzut ekranu pokazano poniżej:

Co warto wypróbować

Użyj własnego kodu i zobacz, o co możesz poprosić agenta – od dodania większej liczby funkcji po refaktoryzację części kodu.

7. Gratulacje

Gratulacje! Udało Ci się użyć Google Antigravity do:

• samodzielnego wyszukiwania w internecie;
• tworzenia i ulepszania aplikacji internetowych full stack;
• generowania komponentów i dopracowywania estetyki interfejsu;
• pisania i sprawdzania złożonych testów jednostkowych z atrapami.

Możesz teraz pozwolić Antigravity na wykonywanie trudnych zadań w Twoich projektach.

Dokumentacja referencyjna

• Codelab : Pierwsze kroki z Google Antigravity
• Oficjalna strona : https://antigravity.google/
• Dokumentacja: https://antigravity.google/docs
• Przypadki użycia : https://antigravity.google/use-cases
• Pobieranie : https://antigravity.google/download
• Kanał YouTube Google Antigravity : https://www.youtube.com/@googleantigravity