Tworzenie za pomocą Google Antigravity

1. Wprowadzenie

W tym ćwiczeniu w Codelabs dowiesz się więcej o Google Antigravity, opartej na agentach platformie dla programistów, która została zaprojektowana, aby ułatwić Ci programowanie w erze agentów. Antigravity to centralne centrum dowodzenia agentów AI, które zapewnia ujednoliconą platformę do uruchamiania, monitorowania i koordynowania ich działań.

W tym ćwiczeniu użyjemy Antigravity do tworzenia prawdziwych aplikacji. Przejdziemy od prostych badań w internecie do generowania pełnych aplikacji i testów jednostkowych klasy korporacyjnej.

Wymagania wstępne:

• Zainstalowane i skonfigurowane narzędzia Antigravity i Antigravity IDE.
• Podstawowa wiedza o Google Antigravity. Zalecamy ukończenie ćwiczenia: Pierwsze kroki z Google Antigravity.

2. Informacje o przypadkach użycia

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

Omówimy różne przypadki użycia, od automatyzacji kilku zadań w witrynach zewnętrznych po generowanie i weryfikowanie przypadków testów jednostkowych w projekcie oraz pełne tworzenie witryny. Do dzieła.

3. Najważniejsze informacje

To prosty przypadek użycia, ale może 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 pewne informacje. Możesz jednak łatwo przeprowadzić eksperyment na wybranej witrynie i sprawdzić, jak to działa.

Załóżmy, że mamy folder główny, w którym utworzymy różne projekty, które zobaczymy w tym samouczku. Ten folder główny na naszym komputerze ma nazwę agy2-pprojects.

Najpierw utwórz w powyższym folderze folder o nazwie news-highlights, aby zacząć od nowa.

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 wydaj polecenie: „Odwiedź stronę news.google.com i przedstaw mi najważniejsze informacje z bieżącego momentu.”

Spowoduje to rozpoczęcie procesu agenta, który stwierdzi, że musi odwiedzić witrynę news.google.com i poprosić Cię o zezwolenie. Może kilka razy poprosić Cię o uprawnienia do odczytywania 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 jest pokazane poniżej:

Co możesz 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ś 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 za pomocą Pythona i Flask

Teraz wygenerujmy kompletną aplikację internetową. Utworzona przez nas aplikacja internetowa będzie witryną zawierającą informacje o 1-dniowym wydarzeniu technicznym, podczas którego wystąpi wielu prelegentów.

Ponownie utwórz nowy folder o nazwie conference-website. Upewnij się, że w interfejsie Antigravity Agent został utworzony nowy projekt i dodano do niego folder conference-website.

Możesz rozpocząć rozmowę, wpisując prompta podanego 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 opracuje plan wdrożenia. Utworzy on kluczowy artefakt o nazwie implementation_plan.md, który możesz sprawdzić pod kątem planu tworzenia i spełniania wymagań określonych w prompcie. Przykładowe dane wyjściowe:

Zanim klikniesz Dalej, zapoznaj się z planem wdrożenia. Możesz kliknąć link do pliku implementation_plan.md powyżej lub włączyć panel pomocniczy w prawym górnym rogu. Wyświetli się widok artefaktu i zobaczysz, że plan wdrożenia jest dostępny do sprawdzenia.

Poniżej znajduje się przykładowy plan implementacji wygenerowany dla naszego uruchomienia:

Możesz dodać komentarze do planu i ponownie poprosić agenta o pomoc. Możesz też zaakceptować plan wdrożenia w obecnej formie i przejść dalej, klikając przycisk Dalej w interfejsie rozmowy.

Agent generuje pliki kodu źródłowego i aktualizuje kolejny artefakt o nazwie Zadanie. Jest to lista działań lub zadań, które należy wykonać, aby osiągnąć ostateczny rezultat.

W każdej chwili możesz kliknąć zadanie lub wyświetlić listę artefaktów, aby zobaczyć zadania. Przykładowa wizytówka jest widoczna poniżej:

W pewnym momencie ostatniego zadania, w którym próbuje uruchomić i zweryfikować aplikację, Antigravity skonfiguruje środowisko Pythona i poprosi Cię o zezwolenie na jego skonfigurowanie, zainstalowanie zależności i wykonanie innych czynności. Przyznaj uprawnienia w razie potrzeby.

Po pomyślnej weryfikacji zostaną wyróżnione szczegóły wraz z innym artefaktem, czyli przewodnikiem, który zawiera informacje o ukończonych funkcjach, stosie technologicznym, wynikach weryfikacji i instrukcjach.

Poniżej znajdziesz przykładowy przewodnik:

Oto końcowa witryna po otwarciu adresu URL:

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

Co możesz wypróbować

• Dodaj dodatkowe funkcje, które chcesz mieć w aplikacji. Podaj szczegóły agentowi i obserwuj, jak wykonuje zadanie, najpierw modyfikując listę zadań, a potem plan wdrożenia itd.
• 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 budzikiem Pomodoro.

Utwórz folder pomodoro-timer. Sprawdź, czy jesteś w Agent Manager, masz zaimportowany i wybrany 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ę na to, jak tworzy plan wdrożenia i listę zadań, a potem je realizuje. Zwracaj uwagę na proces, ponieważ w niektórych sytuacjach może on wymagać Twojej weryfikacji.

Poniżej znajdziesz przykładowe uruchomienie z komunikatem Przewodnik i zadaniami:

Ostateczna wersja aplikacji wyglądała jak ta poniżej i prezentowała się całkiem dobrze.

Co możesz wypróbować

• Dodaj do aplikacji kilka obrazów. 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, atrap i testów weryfikacyjnych

Ostatnim przypadkiem użycia, który tu wypróbujemy, jest generowanie testów jednostkowych dla konkretnego pliku kodu, który mamy, oraz wykonywanie i weryfikowanie tych testów przez agenta.

W tym celu utworzymy 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 masz powyższy plik Pythona (order_service.py) dostępny lokalnie w nowym folderze i że projekt jest otwarty 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. Sprawdź dostępność wszystkich produktów.
3. Oblicza cenę końcową.
4. Pobieranie płatności.
5. Aktualizuje asortyment.

Przypiszemy agentowi zadanie wygenerowania przypadków testów jednostkowych, udostępnienia implementacji Mock i przeprowadzenia testów, aby upewnić się, że zakończą się one powodzeniem.

Otworzymy konkretny folder obszaru roboczego i zauważysz, że do odwoływania się do pliku możemy teraz używać symbolu @. Na przykład po wpisaniu @order powinien wyświetlić się plik order_service.py.

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

Explain the @order_service.py file

Pojawi się wyjaśnienie, czym jest ten plik:

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

Can you visually show this class for better understanding

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

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

oraz:

Kolejnym krokiem jest wygenerowanie testów jednostkowych i poproszenie agenta o ich przetestowanie. Wpisuję ten prompt:

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

Wykonano zadanie, wygenerowano testy, przeprowadzono je i naprawiono błąd. Oto dane wyjściowe:

Jednym z wygenerowanych plików był też plik testowy. Zrzut ekranu pokazujący ten proces znajdziesz poniżej:

Co możesz wypróbować

Skorzystaj z własnego kodu i sprawdź, o co możesz poprosić agenta – od dodania większej liczby funkcji po refaktoryzację fragmentów kodu.

7. Gratulacje

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

• Samodzielnie wyszukuj informacje w internecie.
• Twórz i ulepszaj aplikacje internetowe full stack.
• Pisać i weryfikować złożone testy jednostkowe z użyciem atrap.

Możesz teraz powierzyć Antigravity wykonywanie najcięższej pracy w Twoich projektach.

Dokumentacja

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