Tworzenie za pomocą Google Antigravity

1. Wprowadzenie

Z tego ćwiczenia dowiesz się więcej o Google Antigravity – opartej na agentach platformie dla programistów, która została stworzona, aby ułatwić Ci pracę w erze agentów. Antigravity to centralne centrum dowodzenia agentami AI, które zapewnia ujednoliconą platformę do uruchamiania, monitorowania i koordynowania ich działań.

W tym ćwiczeniu użyjemy Antigravity do tworzenia prawdziwych aplikacji. Zaczniemy od prostego wyszukiwania w internecie, a skończymy na generowaniu aplikacji full stack i testów jednostkowych na poziomie przedsiębiorstwa.

Wymagania wstępne:

• Zainstalowane i skonfigurowane Antigravity oraz Antigravity IDE.
• 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 w praktyce. Pamiętaj, że Antigravity to platforma oparta na agentach. Oznacza to, że w większości przypadków po prostu wydajemy agentowi instrukcję, a on samodzielnie wykonuje zadanie, w razie potrzeby prosi o uprawnienia, tworzy artefakty, a następnie powiadamia 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 dla projektu oraz tworzenie pełnej witryny. Do dzieła.

3. Najważniejsze informacje

To prosty przypadek użycia, ale może on stanowić podstawę do korzystania z przeglądarki internetowej w celu odwiedzania witryn, wyodrębniania informacji, wykonywania działań i zwracania danych użytkownikowi.

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

Założymy, że mamy folder główny, w którym utworzymy różne projekty, które zobaczymy w tym ćwiczeniu. Ten folder główny na naszym komputerze nazywa się agy2-pprojects.

Aby zacząć od nowa, utwórz w tym folderze folder o nazwie news-highlights.

Uruchom Antigravity i utwórz nowy projekt. Dodaj do niego folder news-highlights.

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

Następnie wpisz tę instrukcję: "Odwiedź news.google.com i podaj mi najważniejsze informacje na ten moment."

Spowoduje to uruchomienie procesu agenta, który stwierdzi, że musi odwiedzić witrynę news.google.com, i poprosi o Twoją zgodę. Może kilka razy poprosić Cię o zgodę na odczytywanie adresów URL. Możesz przyznać mu uprawnienia do tego projektu itp.

Zwróć szczególną uwagę na proces myślowy i zobacz, jak agent wykonuje swoją pracę. Przykładowe wykonanie przez agenta pokazujemy poniżej:

Do wypróbowania

• 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.

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 w interfejsie agenta Antigravity utworzono nowy projekt i dodano do niego folder conference-website.

Możesz rozpocząć rozmowę, wpisując prompt pokazany poniżej:

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 przeanalizuje prośbę i najpierw utworzy plan wdrożenia. Utworzy kluczowy artefakt o nazwie implementation_plan.md, który możesz sprawdzić pod kątem tego, jak planuje utworzyć i spełnić wymagania określone w prompcie. Przykładowe dane wyjściowe pokazujemy poniżej:

Zanim klikniesz Dalej, zapoznaj się z planem wdrożenia. Możesz kliknąć link do pliku implementation_plan.md powyżej lub przełączyć panel pomocniczy w prawym górnym rogu. Spowoduje to wyświetlenie widoku artefaktów. Obecnie możesz zobaczyć, że plan wdrożenia jest dostępny do sprawdzenia.

Przykładowy plan wdrożenia wygenerowany na potrzeby naszego uruchomienia pokazujemy poniżej:

Możesz dodać komentarze do planu i ponownie poprosić agenta o wykonanie zadania. Na razie możemy zaakceptować plan wdrożenia w takiej postaci, w jakiej jest, i przejść dalej, klikając przycisk Dalej w interfejsie rozmowy.

Agent przechodzi do generowania plików kodu źródłowego. Zauważysz też, że aktualizuje inny artefakt o nazwie Zadanie. Jest to lista działań lub zadań, które agent zidentyfikował jako niezbędne do osiągnięcia ostatecznego wyniku.

W każdej chwili możesz kliknąć Zadanie lub otworzyć listę artefaktów, aby wyświetlić zadania. Przykładową listę pokazujemy poniżej:

W pewnym momencie ostatniego zadania, w którym agent próbuje uruchomić i zweryfikować aplikację, Antigravity skonfiguruje środowisko Pythona i poprosi o Twoją zgodę na skonfigurowanie środowiska, zainstalowanie zależności itp. W razie potrzeby przyznaj uprawnienia.

Po pomyślnej weryfikacji agent wyróżni szczegóły wraz z innym artefaktem – Przewodnikiem – który zawiera szczegółowe informacje o ukończonych funkcjach, stosie technologicznym, wynikach weryfikacji i instrukcjach.

Przykładowy przewodnik pokazujemy poniżej:

Ostateczna witryna po otwarciu adresu URL wygląda tak:

Jeśli chcesz zobaczyć wygenerowany kod, w prawym górnym rogu kliknij Otwórz IDE. Spowoduje to otwarcie Antigravity IDE, w którym możesz wyświetlić wygenerowany kod. Przykładowy zrzut ekranu pokazujemy poniżej:

Do wypróbowania

• Dodaj do aplikacji dodatkowe funkcje. Podaj agentowi szczegóły i zobacz, jak wykonuje zadanie, najpierw modyfikując listę zadań, a potem plan wdrożenia itp.
• Dodaj dodatkowe dane do harmonogramu wydarzeń. Na przykład: Add two more talks to the schedule.
• Poproś agenta o wygenerowanie pliku README lub dodatkowej dokumentacji aplikacji.

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

Teraz wygenerujemy prostą aplikację internetową z timerem Pomodoro.

Utwórz folder pomodoro-timer. Upewnij się, że jesteś w Agent Manager, 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 agent tworzy plan wdrożenia i listę zadań, a następnie wykonuje zadanie. Obserwuj proces. W niektórych sytuacjach agent może poprosić Cię o sprawdzenie.

Przykładowe uruchomienie z komunikatem przewodnika i zadaniami pokazujemy poniżej:

Ostateczna aplikacja wygląda tak jak poniżej i jest całkiem dobra.

Do wypróbowania

• Dodaj do aplikacji obrazy. Na przykład dodaj do aplikacji obraz timera.
• 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 Pythona, 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 powyższy plik Pythona (order_service.py) jest dostępny lokalnie w nowym folderze i że masz otwarty ten projekt do rozmowy w Antigravity.

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

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.

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

Otworzymy folder naszego obszaru roboczego. Zauważysz, że teraz możemy też używać symbolu @ , aby odwoływać się do pliku. Na przykład możemy zacząć wpisywać @order, a powinien się wyświetlić plik order_service.py.

Możemy przypisać zadanie, które pomoże nam zrozumieć ten plik. Wpisz ten prompt:

Explain the @order_service.py file

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

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

Can you visually show this class for better understanding

Antigravity informuje, że zadanie zostało wykonane i że wygenerowano artefakt zawierający wizualizację:

Możemy sprawdzić wizualizację, jak pokazano poniżej:

oraz:

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

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

Agent wykonał zadanie, wygenerował testy, uruchomił je i naprawił błąd. Oto jego dane wyjściowe:

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

Do wypróbowania

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:

• autonomicznego wyszukiwania w internecie;
• tworzenia i iterowania aplikacji internetowych full stack;
• pisania i sprawdzania złożonych testów jednostkowych z atrapami.

Możesz już pozwolić Antigravity na wykonywanie ciężkiej pracy w Twoich projektach.

Dokumentacja referencyjna

• Codelab : Pierwsze kroki z Google Antigravity
• Oficjalna strona : https://antigravity.google/
• Dokumentacja: https://antigravity.google/docs
• Pobieranie : https://antigravity.google/download
• Kanał YouTube Google Antigravity : https://www.youtube.com/@googleantigravity