1. Introduzione
In questo codelab, imparerai a utilizzare Google Antigravity, una piattaforma di sviluppo agent-first progettata per aiutarti a sviluppare in questa era di agenti. Antigravity funge da centro di comando centrale per i tuoi agenti AI, fornendo una piattaforma unificata per avviare, monitorare e orchestrare le loro attività.
In questo codelab utilizzeremo Antigravity per creare applicazioni reali. Passeremo dalla semplice ricerca sul web alla generazione di applicazioni full-stack e unit test di livello aziendale.
Prerequisiti:
- Antigravity e Antigravity IDE installati e configurati.
- Conoscenza di base di Google Antigravity. Ti consigliamo di completare il codelab Introduzione a Google Antigravity.
2. Informazioni sui casi d'uso
Ora che hai una conoscenza di base di Antigravity, vediamo alcuni casi d'uso per vederlo in azione. Tieni presente che Antigravity è una piattaforma agent-first. Ciò significa che nella maggior parte dei casi, ci limitiamo a dare un'istruzione all'agente, che poi svolge il suo compito in autonomia, chiede le autorizzazioni se necessario, produce gli artefatti e ci avvisa quando il compito è terminato. Di conseguenza, non possiamo produrre ogni singolo output della conversazione dell'agente in ciascuno dei seguenti casi d'uso. Ti forniremo le istruzioni e alcuni screenshot necessari dei risultati previsti, ma i tuoi risultati potrebbero essere leggermente diversi.
I casi d'uso che tratteremo vanno dall'automazione di alcune attività con siti esterni alla generazione e alla verifica di casi di test unitari per un progetto, fino allo sviluppo completo di un sito web. Andiamo.
3. Approfondimenti delle notizie
Si tratta di un caso d'uso semplice, ma può essere la base per utilizzare il browser web per visitare siti web, estrarre informazioni, eseguire alcune azioni e poi restituire i dati all'utente.
In questo caso, visiteremo il sito di Google News ed estrarremo alcune informazioni. Tuttavia, puoi sperimentare facilmente con un sito a tua scelta e vedere come va.
Supporremo di avere una cartella radice in cui creare i diversi progetti che vedremo in questo codelab. Questa cartella radice sulla nostra macchina si chiama agy2-pprojects.
Per prima cosa, crea una cartella denominata news-highlights nella cartella precedente per ricominciare da zero.
Avvia Antigravity e crea un nuovo progetto. Aggiungi la cartella news-highlights.
Avvia una nuova conversazione nel workspace news-highlights appena importato:
Poi dai il seguente comando: "visita news.google.com e dammi le notizie più importanti del momento".
Verrà avviato il processo dell'agente, che determinerà la necessità di visitare il sito news.google.com e chiedere la tua autorizzazione. Potrebbe chiederti più volte di leggere gli URL e puoi scegliere di concedere l'autorizzazione per questo progetto e così via.
Presta molta attenzione al processo di pensiero e osserva come l'agente svolge il suo lavoro. Di seguito è riportata un'esecuzione di esempio da parte dell'agente:
Cose da provare
- Una volta compreso questo, scegli un sito web disponibile da cui l'agente deve recuperare/riassumere alcuni dati. Scegli un sito web che sai che contiene dashboard e grafici e chiedi di selezionare alcuni valori.
- Prova il seguente prompt:
Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.
4. Genera un sito web dinamico con Python + Flask
Passiamo ora a generare un'applicazione web completa. L'applicazione web che creeremo è un sito che fornisce informazioni su un evento tecnico di un giorno, con interventi di più relatori durante la giornata.
Crea di nuovo una nuova cartella chiamata conference-website. Assicurati di aver creato un nuovo progetto nell'interfaccia di Antigravity Agent e di aver aggiunto la cartella conference-website.
Puoi iniziare la conversazione dando il prompt mostrato di seguito:
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 analizzerà la richiesta e proporrà innanzitutto un piano di implementazione. Verrà creato un artefatto chiave chiamato implementation_plan.md che potrai esaminare in termini di pianificazione della creazione e del rispetto dei requisiti specificati nel prompt. Di seguito è riportato un output di esempio:
Prima di fare clic su Continua, dai un'occhiata al piano di implementazione. Puoi fare clic sul link al file implementation_plan.md sopra o attivare/disattivare il riquadro ausiliario in alto a destra. Verrà visualizzata la visualizzazione Artefatto e potrai vedere che il piano di implementazione è disponibile per la revisione.
Di seguito è riportato un piano di implementazione di esempio generato per la nostra esecuzione:
Puoi fornire i tuoi commenti nel piano e chiedere di nuovo all'agente o, per ora, possiamo accettare il piano di implementazione così com'è e andare avanti facendo clic sul pulsante Procedi nell'interfaccia di conversazione.
L'agente procede con la generazione dei file del codice sorgente e noterai anche che aggiorna un altro artefatto chiamato Task. Si tratta di un elenco di azioni o attività che sono state identificate come necessarie per raggiungere il risultato finale.
Puoi fare clic sull'attività in qualsiasi momento o visitare l'elenco degli artefatti per visualizzare le attività. Di seguito è riportato un elenco di esempio:
A un certo punto dell'attività finale, in cui tenta di eseguire e verificare l'applicazione, Antigravity configurerà un ambiente Python e ti chiederà l'autorizzazione per configurare l'ambiente, installare le dipendenze e altro ancora. Concedi le autorizzazioni necessarie.
Una volta completata la verifica, verranno evidenziati i dettagli, insieme a un altro artefatto, la procedura dettagliata, che illustra le funzionalità completate, lo stack tecnologico, i risultati della convalida e le istruzioni.
Di seguito è riportato un esempio di procedura dettagliata:
Il sito web finale quando visitiamo l'URL è mostrato di seguito:
Se vuoi visualizzare il codice generato, puoi fare clic su Apri IDE nell'angolo in alto a destra. Si aprirà l'IDE Antigravity, che puoi utilizzare per visualizzare il codice generato. Di seguito è riportato uno screenshot di esempio:
Cose da provare
- Aggiungi all'applicazione le funzionalità aggiuntive che ti interessano. Fornisci i dettagli all'Agent e osserva come svolge il suo compito modificando prima l'elenco di attività, poi il piano di implementazione e così via.
- Aggiungi altri dati al programma dell'evento. Ad esempio,
Add two more talks to the schedule. - Chiedi all'agente di generare un file README o ulteriore documentazione per l'applicazione.
5. Generare una semplice app di produttività
Ora genereremo una semplice applicazione web timer Pomodoro.
Crea una cartella pomodoro-timer. Assicurati di trovarti in Agent Manager, di aver importato e selezionato lo spazio di lavoro pomodoro-timer. Inizia con questo prompt:
Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.
Nota come procede alla creazione del piano di implementazione, dell'elenco delle attività e poi come le esegue. Continua a prestare attenzione al flusso, potrebbero esserci situazioni in cui ti verrà chiesto di scrivere una recensione.
Di seguito è riportato un esempio di esecuzione con il messaggio Procedura dettagliata e le attività:
L'app finale aveva l'aspetto di quella riportata di seguito ed era piuttosto buona.
Cose da provare
- Aggiungi alcune immagini all'applicazione. Ad esempio, aggiungi un'immagine del timer all'applicazione.
- Prova alcune varianti di qualsiasi applicazione che vuoi generare. Gioca con gli stili, le immagini, chiedi modifiche e così via.
6. Generare test delle unità, stub simulati e convalidare i test
L'ultimo caso d'uso che proveremo qui è quello di generare test delle unità per un file di codice specifico che abbiamo e per l'agente di eseguire anche i test e convalidarli.
A questo scopo, avremo uno spazio di lavoro con un singolo file Python, come mostrato di seguito:
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}
Assicurati di avere il file Python (order_service.py) disponibile localmente in una nuova cartella e di aver aperto il progetto per la conversazione in Antigravity.
Si tratta di un semplice servizio di ordini che ha la seguente funzionalità chiave nella funzione checkout:
- Verifica che il carrello non sia vuoto.
- Controlla le scorte di tutti gli articoli.
- Calcola il prezzo finale.
- Pagamento degli addebiti.
- Aggiorna l'inventario.
Assegneremo all'agente il compito di generare scenari di test unitari, fornire implementazioni di simulazione ed eseguire i test per assicurarci che vadano a buon fine.
Verrà aperta la cartella specifica dello spazio di lavoro e noterai che ora possiamo utilizzare anche il simbolo @ per fare riferimento al file. Ad esempio, potremmo iniziare a digitare @order e dovrebbe essere visualizzato il file order_service.py.
Possiamo assegnare un'attività che ci aiuti a comprendere questo file. Inserisci il seguente prompt:
Explain the @order_service.py file
Viene visualizzata una spiegazione del contenuto del file:
Possiamo chiedere di generare una visualizzazione migliore tramite il prompt:
Can you visually show this class for better understanding
Antigravity indica che l'attività è completata e che ha generato un artefatto contenente la visualizzazione:
Possiamo esaminare la visualizzazione come mostrato di seguito:
e i seguenti:
Il passaggio successivo consiste nel generare i test delle unità e chiedere all'agente di provarli. Invio il seguente prompt:
generate unit tests for this module and test it out with mock implementations.
Ha svolto il suo compito, generato i test, li ha eseguiti e ha anche corretto un bug. Ecco il suo output:
Uno dei file generati era anche il file di test. Di seguito è riportato uno screenshot:
Cose da provare
Prendi il tuo codice e scopri cosa puoi chiedere all'agente, dall'aggiunta di altre funzionalità al refactoring di parti del codice.
7. Complimenti
Complimenti! Hai utilizzato correttamente Google Antigravity per:
- Eseguire ricerche sul web in autonomia.
- Crea ed esegui l'iterazione di applicazioni web full stack.
- Scrivere e convalidare test delle unità complessi con simulazioni.
Ora puoi lasciare che Antigravity si occupi del lavoro più pesante nei tuoi progetti.
Documentazione di riferimento
- Codelab : Guida introduttiva a Google Antigravity
- Sito ufficiale : https://antigravity.google/
- Documentazione: https://antigravity.google/docs
- Download : https://antigravity.google/download
- Canale YouTube di Google Antigravity : https://www.youtube.com/@googleantigravity