Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Pianificare e creare app con il plug-in Conductor

1. Introduzione

In questo codelab imparerai a pianificare e creare applicazioni software con il plug-in Conductor. Conductor è un plug-in open source creato da Google che consente funzionalità di sviluppo basate sulle specifiche, come la pianificazione e il monitoraggio dell'implementazione. Inizierai creando un'applicazione "greenfield" completamente da zero. Poi, la tratterai come un progetto "brownfield", iterando su di essa per aggiungere autenticazione e spazio di archiviazione.

In questo lab proverai a:

Installare il plug-in Conductor in Antigravity CLI o Claude Code
Creare da zero un'app web "Picker Wheel" utilizzando le funzionalità di pianificazione e implementazione di Conductor
Aggiungere la personalizzazione all'applicazione aggiungendo l'autenticazione e lo spazio di archiviazione utilizzando Firebase

Obiettivi didattici

Come utilizzare il plug-in Conductor per pianificare, implementare e rivedere un'applicazione "greenfield"
Come utilizzare il plug-in Conductor per aggiungere funzionalità a un'applicazione "brownfield"

Che cosa ti serve

Un browser web come Chrome
Un progetto cloud Google Cloud con la fatturazione abilitata
Node.js installato (versione 18 o successive consigliata)
Un editor di codice locale come Visual Studio Code
Un agente di codifica come Antigravity CLI o Claude Code

2. Prima di iniziare

Crea un progetto Google Cloud

Nella console Google Cloud, nella pagina di selezione del progetto, seleziona o crea un progetto Google Cloud.
Verifica che la fatturazione sia attivata per il tuo progetto Cloud. Scopri come verificare se la fatturazione è abilitata per un progetto.

Avvia Cloud Shell

Cloud Shell è un ambiente a riga di comando in esecuzione in Google Cloud che viene fornito con gli strumenti necessari precaricati.

Fai clic su Attiva Cloud Shell nella parte superiore della console Google Cloud.
Una volta eseguita la connessione a Cloud Shell, verifica l'autenticazione:
```
gcloud auth list
```
Verifica che il progetto sia configurato:
```
gcloud config get project
```

Se il progetto non è impostato come previsto, impostalo:

export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

Abilita API

Abilita l'API Firebase Management nel tuo progetto Google Cloud.

gcloud services enable firebase.googleapis.com

Aggiungi Firebase al tuo progetto

L'interfaccia a riga di comando di Firebase è preinstallata in Cloud Shell. Da Cloud Shell, accedi con lo stesso Account Google che ti dà accesso al progetto Google Cloud. Se lavori localmente, installa l'interfaccia a riga di comando di Firebase seguendo le istruzioni.

firebase login

Esegui il comando seguente per aggiungere Firebase al tuo progetto Google Cloud:

firebase projects:addfirebase

Se è la prima volta che esegui l'interfaccia a riga di comando firebase, rispondi a tutte le domande che ti vengono poste.

Esci da Cloud Shell

Puoi chiudere la finestra di Cloud Shell. Nella sezione seguente configureremo l'ambiente locale.

3. Installa e autentica gli agenti di codifica CLI

In questo passaggio, preparerai il tuo ambiente di sviluppo locale installando e autenticando Antigravity CLI o Claude Code nell'editor di codice locale utilizzando le tue credenziali Google Cloud.

Installa e autentica Antigravity CLI

Installa l'ultima versione di Antigravity CLI.

# MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd

Riavvia il terminale in modo che agy venga aggiunto al tuo PATH.
Verifica che l'installazione abbia installato l'ultima versione.
```
agy --version
```
Autenticati utilizzando le tue credenziali Google Cloud.
- Avvia Antigravity CLI.
```
agy
```
- Quando ti viene chiesto di selezionare il metodo di accesso, seleziona Utilizza un progetto Google Cloud. Apri l'URL di autorizzazione sicuro in un browser web. Accedi con le credenziali approvate e completa l'autenticazione. Il browser mostra un codice di autorizzazione alfanumerico univoco. Copia questo codice, torna al terminale e incollalo nel prompt.
Puoi scegliere anche altri metodi di accesso. Questo codelab ha lo scopo di mostrare come lavorare con un progetto Google Cloud.
Esci da Antigravity CLI.Digita /exit dal terminale CLI per terminare la sessione live di Antigravity CLI prima di continuare.

Installa e autentica Claude Code

In alternativa, puoi utilizzare il plug-in Conductor con Claude Code. Qui installeremo e autenticheremo Claude Code utilizzando le tue credenziali Google Cloud.

Installa l'ultima versione di Claude Code.
Autenticati utilizzando le tue credenziali Google Cloud.
- Avvia Claude Code.
```
claude
```
- Digita /login per selezionare il metodo di accesso. Scegli l'opzione Piattaforma di terze parti · Amazon Bedrock, Microsoft Foundry o Vertex AI e Google Vertex AI. Per configurare Google Vertex AI, scegli Credenziali predefinite dell'applicazione (google auth) e completa la configurazione come richiesto.
Puoi scegliere anche altri metodi di accesso. Questo codelab ha lo scopo di mostrare come lavorare con un progetto Google Cloud.
Riavvia Claude Code.

4. Installa il plug-in Conductor

Conductor è un plug-in open source creato da Google che consente funzionalità di sviluppo basate sulle specifiche, come la pianificazione e il monitoraggio dell'implementazione.

Installa in Antigravity CLI

Installa il plug-in:

Antigravity CLI

agy plugins install https://github.com/gemini-cli-extensions/conductor

Verifica l'installazione:
- Avvia Antigravity CLI.
```
agy
```
- Digita /conductor e vedrai un elenco di comandi come /conductor:conductor-setup, /conductor:conductor-new-track, conductor:conductor-implement e così via.
Esci dalla CLI.Digita /exit dal terminale per terminare la sessione live della CLI prima di continuare.

Installa in Claude Code

Registra il repository del Marketplace e installa il plug-in Conductor direttamente nella sessione di Claude Code.
```
/plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
```
Verifica l'installazione.
- Digita /conductor e vedrai un elenco di comandi come /conductor-setup, conductor-new-track, conductor-implement, e così via.
Esci dalla CLI.Digita /exit dal terminale di Claude Code per terminare la sessione live della CLI prima di continuare.

5. Sviluppo greenfield: la ruota di selezione

Ora che l'ambiente è configurato, creerai una nuova applicazione da zero. Creerai una "ruota di selezione", un'app web leggera che gira per selezionare un'opzione casuale.

Configura il contesto del prodotto

Crea una nuova directory di progetto e passa a questa directory.Ora lavoriamo su un progetto in una directory picker-wheel. Crea questa directory e passa a questa directory.
```
mkdir picker-wheel
cd picker-wheel
```
Avvia Antigravity CLI.Avvia una nuova sessione CLI dalla directory del progetto con Antigravity CLI o Claude Code.
```
# Antigravity CLI
agy

# Claude Code
claude
```
- Quando ti viene chiesto "Vuoi considerare attendibili i file in questa cartella?", seleziona Considera attendibile la cartella (picker-wheel).
Inizializza Conductor.Esegui il comando di configurazione per creare lo scaffolding del progetto e configurare l'ambiente Conductor.
```
# Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
```
Segui i prompt interattivi.I prompt interattivi che vedi non corrispondono esattamente a questi esempi. Concentrati su un design più semplice per familiarizzare con il flusso di lavoro di Conductor.
- Obiettivo del prodotto: un'applicazione web che mostra una ruota girevole configurabile per selezionare un elemento casuale da un elenco.
  - Segmento di pubblico di destinazione → Pubblico generico
  - Interazione → Tocca/Fai clic per girare
  - Personalizzazione → Di base
  - Piattaforma → Priorità al desktop
- Linee guida relative ai prodotti: genera automaticamente.
- Stack tecnologico:
  - Linguaggi → TypeScript/JavaScript - Ideale per il web full-stack
  - Frontend → Vue.js - Interfacce web intuitive
  - Backend → Express.js - Backend Node veloce
  - Database → Nessuno - Non è necessario alcun database
- Flusso di lavoro: standard.
- Requisiti del prodotto:
  - Storie utente → Opzioni personalizzabili, visualizzazione chiara del vincitore
  - Funzionalità principali → Elenco di opzioni modificabile, colori casuali
  - Vincoli → Solo lato client, prestazioni elevate
  - Non funzionali → Elevata copertura dei test, TypeScript e Vue.js, design adattabile
Conductor genererà file di contesto in una directory conductor/.

Crea una nuova traccia

Una "traccia" in Conductor rappresenta una funzionalità o un'unità di lavoro.

Avvia una nuova traccia utilizzando /conductor-new-rack.Conductor potrebbe proporre una traccia iniziale in base al contesto del prodotto. In alternativa, puoi proporre la tua o chiedere a Conductor di suggerire una traccia.
Esamina il piano generato.Conductor genererà un file index.md, un file spec.md e un file plan.md all'interno di conductor/tracks/{track-id}/. Prenditi un momento per leggerli. Se tutto sembra a posto, Conductor ti chiederà di salvare ed eseguire il commit dei file di configurazione iniziali.

Implementa la traccia

Avvia l'implementazione.
```
# Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
```
Conductor ora seguirà il piano, scrivendo il codice per il progetto.
Suggerimento: per evitare di rimanere bloccati su shell interattive o processi a lunga esecuzione (come server di sviluppo o watcher di test), dobbiamo assicurarci che Conductor sappia esattamente come gestire questi comandi specifici. Strumenti come Vite (npm run dev) e Vitest (npm run test) spesso vengono eseguiti in "modalità di monitoraggio" per impostazione predefinita, il che mantiene il processo aperto a tempo indeterminato. Puoi indicare a Conductor di disattivare la modalità di monitoraggio o utilizzare is_background: true durante l'esecuzione dei comandi aggiornando workflow.md.
Verifica l'applicazione.Durante la fase di implementazione, Conductor ti chiederà di testare manualmente l'applicazione. Ad esempio, ti chiederà di aprire il server web locale, visualizzare l'anteprima dell'applicazione nel browser e verificare le modifiche. Al termine dell'implementazione, dovresti vedere una ruota di selezione funzionante.
Risoluzione dei problemi: se il codice generato si comporta in modo imprevisto, controlla conductor/tracks/.../plan.md per verificare la presenza di passaggi o errori ignorati.
Esamina l'implementazione.Come ultimo passaggio, puoi chiedere a Conductor di esaminare l'implementazione. Dovrebbe esaminare il codice sorgente, sincronizzare la documentazione del progetto e archiviare la traccia.
```
# Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review
```

6. Iterazione brownfield: aggiungi la personalizzazione

Ora passerai allo sviluppo "brownfield". Migliorerai l'applicazione web della ruota di selezione della sezione precedente in modo che gli utenti che hanno eseguito l'accesso possano salvare e ripristinare le configurazioni della ruota di selezione.

Crea una traccia di personalizzazione

Nel seguente esempio "brownfield", utilizzeremo Firebase per l'autenticazione e lo spazio di archiviazione. Installa le skill di Firebase in modo che Conductor possa utilizzarle.
Avvia l'agente CLI.Avvia una nuova sessione CLI.
```
# Antigravity CLI
/new

# Claude Code
/new
```

Avvia una nuova traccia.Avvia una nuova traccia.

# Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "I want users to be able to log in to their accounts
and save their picker wheel configurations."

Segui i prompt interattivi.I prompt interattivi che vedi non corrispondono esattamente a questi esempi. Concentrati su un design più semplice per familiarizzare con il flusso di lavoro di Conductor.
- Obiettivo della traccia:
  - Provider di autenticazione → Firebase Auth
  - Configurazioni salvate → Opzioni della ruota
  - Archiviazione dati → Firestore
  - Interfaccia utente di accesso a Firestore → Overlay modale
Conductor genererà file di contesto per una nuova traccia all'interno di conductor/tracks/{track-id}.
Esamina il piano generato.Prenditi un momento per leggere un file index.md, un file spec.md e un file plan.md all'interno di conductor/tracks/{track-id}/.

Implementa.Se tutto sembra a posto, puoi avviare l'implementazione.

# Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement

Verifica.Ricarica l'applicazione. Dovresti vedere un'applicazione aggiornata.
Se l'AI si blocca durante il test dell'implementazione dell'autenticazione, ricorda di attivare Accesso con Google nella console Firebase in Autenticazione > Metodo di accesso.

Di seguito è riportato il codice golden per un'implementazione di riferimento. Devi fornire il tuo progetto Firebase in .firebaserc e le configurazioni Firebase in firebase.ts per avviare correttamente l'applicazione.

7. Libera spazio

Per evitare addebiti continui sul tuo account Google Cloud, elimina le risorse create durante questo codelab.

Elimina il progetto Firebase e il progetto Google Cloud

Il modo più semplice per liberare spazio è eliminare completamente il progetto.

Nella console Google Cloud, seleziona il progetto che hai creato.
Fai clic su ELIMINA.

In alternativa, se vuoi conservare il progetto ma eliminare le risorse:

Elimina il database Firestore: vai alla console Firebase > Firestore ed elimina il database.
Elimina l'autenticazione: vai alla console Firebase > AutenticazioneMetodo di accesso, disattiva Google.

8. Complimenti

Complimenti! Hai utilizzato correttamente il plug-in Conductor nell'agente di codifica che preferisci (Antigravity CLI o Claude Code) per creare un'applicazione web da zero e poi iterare su di essa con funzionalità complesse come l'autenticazione e l'integrazione del database.

Passaggi successivi

Esplora la documentazione dei plug-in di Antigravity CLI
Esplora la documentazione dei plug-in di Claude Code