Google utilizza la tecnologia AI per tradurre i contenuti nella tua lingua preferita. Le traduzioni generate dall'AI potrebbero contenere errori.

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. Quindi, lo tratterai come un progetto "brownfield", iterando su di esso per aggiungere autenticazione e archiviazione.

In questo lab proverai a:

Installa il plug-in Conductor in Antigravity CLI o Claude Code
Crea un'app web"Ruota della scelta" da zero utilizzando le funzionalità di pianificazione e implementazione di Conductor
Aggiungi la personalizzazione all'applicazione aggiungendo l'autenticazione e l'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 (consigliata la versione 18 o successive)
Un editor di codice locale come Visual Studio Code
Un agente di programmazione 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 precaricato con gli strumenti necessari.

Fai clic su Attiva Cloud Shell nella parte superiore della console Google Cloud.
Una volta connesso 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 questo comando per aggiungere Firebase al tuo progetto Google Cloud:

firebase projects:addfirebase

Se è la prima volta che esegui la CLI firebase, rispondi alle domande che ti vengono poste.

Esci da Cloud Shell

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

3. Installare e autenticare gli agenti di codifica della 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 ed esegui l'autenticazione di 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 PATH.
Verifica l'installazione abbia installato l'ultima versione.
```
agy --version
```
Esegui l'autenticazione 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 sicura 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 anche scegliere 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 della CLI per terminare la sessione live di Antigravity CLI prima di continuare.

Installare e autenticare 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.
Esegui l'autenticazione 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 anche scegliere 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.

Installazione 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 CLI live prima di continuare.

Installare 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 Claude Code per terminare la sessione CLI live prima di continuare.

5. Sviluppo greenfield: la ruota di selezione

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

Configurare il contesto del prodotto

Crea una nuova directory di progetto e passa a questa directory.Ora lavoriamo a 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 della 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 (selettore).
Inizializza Conductor.Esegui il comando di configurazione per creare la struttura del progetto e configurare l'ambiente Conductor.
```
# Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
```
Segui le istruzioni interattive.Le istruzioni interattive che vedi non corrispondono esattamente a questi esempi. Concentrati su un design più semplice per acquisire familiarità 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.
  - Pubblico di destinazione → Pubblico generico
  - Interazione → Tocca/Fai clic per ruotare
  - Personalizzazione → Di base
  - Piattaforma → Priorità al desktop
- Linee guida per i prodotti: genera automaticamente.
- Tech stack:
  - Linguaggi → TypeScript/JavaScript: ideale per il web full-stack
  - Frontend → Vue.js - Interfacce web intuitive
  - Backend → Express.js - Fast Node backend
  - Database → Nessuno - Non è necessario alcun database
- Workflow: standard.
- Requisiti del prodotto:
  - Storie utente → Opzioni personalizzabili, visualizzazione del vincitore
  - Funzionalità chiave → Elenco di opzioni modificabile, colori casuali
  - Vincoli → Solo lato client, prestazioni elevate
  - Non funzionali → Copertura dei test elevata, TypeScript e Vue.js, design responsivo
Conductor genererà i 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 una traccia o chiedere al direttore di suggerirne una.
Rivedi il piano generato.Conductor genererà un index.md, un spec.md e un plan.md all'interno di conductor/tracks/{track-id}/. Prenditi un momento per leggerli. Se tutto sembra a posto, Conductor ti chiederà di salvare e inviare i file di configurazione iniziale.

Implementare il tracciamento

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

# Claude Code
/conductor-implement
```
Conductor ora lavorerà al piano, scrivendo il codice per il progetto.
Suggerimento:per evitare di rimanere bloccati su shell interattive o processi di lunga durata (come server di sviluppo o test watcher), dobbiamo assicurarci che Conductor sappia esattamente come gestire questi comandi specifici. Strumenti come Vite (npm run dev) e Vitest (npm run test) vengono spesso eseguiti in "modalità di osservazione" per impostazione predefinita, il che mantiene il processo aperto a tempo indeterminato. Puoi indicare a Conductor di disattivare la modalità di osservazione o di 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 verrà chiesto di aprire il server web locale, visualizzare l'anteprima dell'applicazione nel browser e verificare le modifiche. Al termine dell'implementazione, dovresti vedere una rotellina 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 errori o passaggi saltati.
Esamina l'implementazione.Come ultimo passaggio, puoi chiedere a Conductor di esaminare l'implementazione. Deve rivedere 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 della scelta della sezione precedente in modo che gli utenti che hanno eseguito l'accesso possano salvare e ripristinare le configurazioni della ruota della scelta.

Creare una traccia di personalizzazione

Nel seguente esempio "brownfield", utilizzeremo Firebase per l'autenticazione e l'archiviazione. Installa le skill 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 le istruzioni interattive.Le istruzioni interattive che vedi non corrispondono esattamente a questi esempi. Concentrati su un design più semplice per acquisire familiarità con il flusso di lavoro di Conductor.
- Obiettivo di monitoraggio:
  - Provider di autenticazione → Firebase Auth
  - Configurazioni salvate → Opzioni volante
  - Archiviazione dati → Firestore
  - UI di accesso a Firestore → Overlay modale
Conductor genererà i file di contesto per una nuova traccia all'interno di conductor/tracks/{track-id}.
Rivedi il piano generato.Leggi un index.md, un spec.md e un plan.md all'interno di conductor/tracks/{track-id}/.

Implementa.Se è tutto a posto, puoi iniziare l'implementazione.

# Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement

Verifica.Ricarica l'applicazione. Dovresti visualizzare una richiesta aggiornata.
Se l'AI ha difficoltà a testare l'implementazione dell'autenticazione, ricorda di attivare Accedi con Google nella console Firebase in Autenticazione > Metodo di accesso.

Di seguito è riportato il golden code per un'implementazione di riferimento. Per avviare correttamente l'applicazione, devi fornire il progetto Firebase in .firebaserc e le configurazioni Firebase in firebase.ts.

7. Esegui la pulizia

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

Eliminare 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 mantenere il progetto ma eliminare le risorse:

Elimina il database Firestore: vai alla console Firebase > Firestore ed elimina il database.
Elimina 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 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 Claude Code