Guida rapida

Avvia IBM Bob

Avvia l'applicazione IBM Bob sul tuo computer.

Apri l'interfaccia chat di Bob

Se l'interfaccia chat di Bob non è visibile, aprila facendo clic sull'icona Bob accanto alla barra di navigazione o usa la scorciatoia Option + Command + B (Mac) o Ctrl + Alt + B (Windows).

Interagisci con Bob digitando richieste in linguaggio naturale nel campo di input.

Clona il repository del tutorial

Clona il repository contenente l'applicazione di esempio usando i seguenti passaggi:

1. Fai clic sull'icona dei file nell'angolo in alto a sinistra del pannello Bob IDE.
2. Fai clic su Clona repository e incolla il seguente URL del repository.
3. Quando Bob ti chiede dove salvare il repository, scegli qualsiasi posizione preferisci.

https://github.com/IBM/bob-demo.git

Apri il repository

Quando Bob ti chiede se vuoi aprire il repository clonato, fai clic su Apri. Se Bob chiede "Ti fidi degli autori dei file in questa cartella?", fai clic su Sì, mi fido degli autori.

L'explorer mostra i file del progetto e il pannello chat di Bob si apre sul lato. Lavorerai dalla cartella bob-get-started/express-todo-api-modern.

Passa alla modalità Agent

Seleziona Agent nel selettore della modalità, oppure digita /agent nella chat. La modalità Agent consente a Bob di scrivere, modificare e refactorizzare il codice. Bob chiede comunque il permesso prima di ogni operazione.

Configura l'approvazione automatica

Trova l'interruttore di approvazione automatica nell'angolo in basso a destra della finestra nel menu Permissions. Assicurati che per l'approvazione automatica sia selezionato solo Read. Bob esegue automaticamente i comandi di sola lettura, ma chiede l'approvazione per qualsiasi comando che modifica file o viene eseguito nel terminale.

Inizializza Bob nel tuo progetto

Esegui /init nel pannello chat di Bob per far creare a Bob un file AGENTS.md radice e file di regole AGENTS.md.

Il file AGENTS.md radice dice a Bob la struttura complessiva del progetto, le convenzioni e gli obiettivi in modo che Bob possa scrivere codice che si adatta al tuo progetto. Senza di esso, Bob riparte dall'inizio ogni volta perché Bob è stateless.

I file di regole in .bob sono dove Bob crea AGENTS.md per ciascuna delle sue modalità: Agent, Plan e Ask. Ogni modalità ha un insieme diverso di regole che guidano il comportamento di Bob in quella modalità.

/init

Bob chiede il permesso di creare i file AGENTS.md. Fai clic su Approve todo tools for task per creare i file. Una volta che Bob ha creato tutti i file AGENTS.md, vedrai i seguenti file:

Compila ed esegui l'API in Docker

Chiedi a Bob di creare un Dockerfile e avviare il container:

Crea un Dockerfile per questa API usando Node 22 ed eseguila sulla porta 3000.
Non installare dipendenze localmente.
Il Dockerfile gestisce tutte le installazioni.

Una volta creato il Dockerfile, compila l'immagine e avvia il container.

Bob ti chiede di approvare la compilazione dell'immagine e l'avvio del container. Fai clic su Approve todo tools for task e Approve edit tools for task.

Poiché hai abilitato solo l'approvazione automatica per Read, Bob ti chiede il permesso di eseguire comandi Execute. Fai clic su I understand the risks e poi su Approve per permettere a Bob di eseguire comandi per te.

Bob potrebbe trovare un problema NPM, come il seguente. Approva le correzioni che Bob propone:

La compilazione è fallita perché non c'è un file package-lock.json.
Devo aggiornare il Dockerfile per usare npm install invece di npm ci:

L'API è ora in esecuzione e disponibile.

Aggiungi un'attività alla lista delle cose da fare

Per testare l'API, incolla il seguente comando direttamente nel pannello chat di Bob. Questo comando aggiunge un'attività alla lista delle cose da fare effettuando una richiesta POST all'API:

curl -X POST http://localhost:3000/api/todos \
  -H "Content-Type: application/json" \
  -d '{"title": "Build a web UI"}'

  Dammi la risposta in formato tabella con due colonne: Campo e Valore

Bob ti mostra la risposta, che conferma che puoi aggiungere attività alla lista delle cose da fare con l'API. Bob mostra una risposta simile alla seguente:

Ferma e rimuovi il container

Chiedi a Bob di fermare e rimuovere il container. Creerai un nuovo container con l'interfaccia web nella sezione seguente:

Ferma e rimuovi il container in esecuzione e l'immagine Docker.

Avvia una nuova conversazione

Fai clic sul segno più nella parte superiore dell'interfaccia chat per avviare una nuova conversazione e svuotare la finestra di contesto.

Avviare una nuova conversazione svuota la finestra di contesto, il che:

• impedisce alle discussioni di pianificazione precedenti di consumare il tuo budget di token.
• mantiene il contesto di implementazione focalizzato sul piano approvato.
• riduce il rischio che Bob confonda istruzioni di pianificazione e implementazione.

Pianifica l'interfaccia web

Prima di modificare il codice, passa alla modalità Plan in modo che Bob possa creare un piano su come costruire l'interfaccia web. Fai clic sul menu a discesa di selezione della modalità e seleziona Plan, o digita /plan nella chat.

Chiedi a Bob di pianificare l'interfaccia web ui-plan.md nella directory del progetto express-todo-api-modern. Bob chiede di usare skill tools e subagents per creare il piano. Fai clic su Approve skill tools for task per permettere a Bob di usare gli skill tools, su Approve subagent tools for task per permettere a Bob di usare i subagents e su Approve edit tools for task per salvare il piano.

Crea un piano per aggiungere a questa app todo un'interfaccia web React TypeScript con Vite.

L'interfaccia deve:
- visualizzare tutte le attività esistenti recuperate da GET /api/todos
- aggiungere nuove attività usando POST /api/todos
- contrassegnare le attività come completate o non completate usando PUT /api/todos/:id

Vincoli:
- Non modificare l'API Express esistente né i suoi endpoint
- Servi sia l'API sia il frontend React da un singolo container Docker usando una build multi-stage
- Mantieni l'implementazione semplice: nessuna autenticazione, nessun client-side routing, nessuna libreria esterna di state management
- esegui `npm install` nel Dockerfile

Salva il piano in un file chiamato `ui-plan.md` nella directory del progetto express-todo-api-modern.

Bob potrebbe fare domande di chiarimento per capire meglio i requisiti. Puoi rispondere alle domande oppure dire a Bob di fare ciò che consiglia.

Rivedi il piano prima di dire a Bob di eseguirlo. Fai clic su ui-plan.md nell'explorer per aprirlo.

Chiedi a Bob di creare l'interfaccia web

Passa Bob alla modalità Agent facendo clic sul menu a discesa di selezione della modalità e selezionando Agent, o digita /agent nella chat.

Chiedi a Bob di creare l'interfaccia, containerizzarla ed eseguirla:

Implementa il piano `ui-plan.md` che hai delineato per creare l'interfaccia web,
containerizzare l'applicazione con Docker ed eseguirla.
Non installare dipendenze localmente. Il Dockerfile gestisce tutte le installazioni.

Bob legge il ui-plan.md, ti mostra i file che creerà o modificherà, quindi compila e avvia il container. Fai clic su Approve nelle richieste di strumenti di Bob.

Poiché hai abilitato solo l'approvazione automatica per Read, Bob ti chiede il permesso di eseguire comandi Execute. Fai clic su I understand the risks e poi su Approve per permettere a Bob di eseguire comandi per te.

Correggi gli errori di compilazione

A volte il primo tentativo di Bob di creare l'interfaccia e il container potrebbe fallire a causa di errori nel codice o nel Dockerfile. Bob ti mostra il messaggio di errore e propone una correzione. L'iterazione dello sviluppo fa parte della scrittura di codice con Bob.

I seguenti sono alcuni possibili errori e correzioni che potresti incontrare:

La compilazione è fallita perché `npm ci` richiede un file package-lock.json.
Lascia che aggiorni il Dockerfile per usare `npm install` invece.

Vite non riesce a trovare index.html. Il problema è che index.html è nella directory `public`
ma Vite lo aspetta nella radice. Lascia che lo sposti nella posizione corretta.

Apri l'interfaccia web nel tuo browser

Una volta che il container è in esecuzione, Bob ti fornisce un riepilogo di ciò che ha completato.

Apri http://localhost:3000/index.html nel tuo browser. Prova ad aggiungere una nuova attività usando il campo di input per confermare che l'API funziona correttamente.

Chiedi a Bob di aggiornare gli stili

Personalizza l'interfaccia dicendo a Bob quale font, colore del font e colore di sfondo desideri. I seguenti sono alcuni font tra cui puoi scegliere:

• Inter: Una scelta popolare per le app web
• Georgia: Un font serif classico, caldo e leggibile
• JetBrains Mono: Un font monospazio con un'atmosfera da strumento per sviluppatori

Scegli un colore del font e un colore di sfondo. Nel pannello chat di Bob, descrivi le tue scelte usando il linguaggio naturale. Il seguente è un esempio di personalizzazione:

Aggiorna gli stili dell'interfaccia web.
Usa il font Inter.
Sfondo blu navy scuro.
Testo bianco.

Bob propone modifiche agli stili dei componenti React. Rivedi il diff e fai clic su Salva per accettare le modifiche.

Ricompila il container e visualizza le tue modifiche

Il container in esecuzione serve ancora i vecchi stili. Chiedi a Bob di ricompilarlo e riavviarlo in modo da poter vedere le tue modifiche:

Ricompila l'immagine Docker e riavvia il container con gli stili aggiornati.

Aggiorna http://localhost:3000/index.html nel tuo browser per vedere il design aggiornato.