Firebase Studio: esplorare e modificare un prototipo

Nella lezione precedente, abbiamo provato con mano quanto sia veloce commissionare, tramite prompt, un'applicazione a Firebase Studio. Come si può immaginare, più complessa è la nostra richiesta più complesso e articolato dovrà essere il prompt. Tuttavia, al momento, ci interessa partire dal prototipo appena creato (una sorta di raccoglitore di aforismi che dovremmo trovare disponibile nella sezione My workspaces di Firebase Studio) ed esplorarlo interagendo mediante dialogo con l'Intelligenza Artificiale.

Firebase Studio: da prototyper a editor e viceversa

L'interfaccia con cui abbiamo affrontato il nostro primo task di creazione - quello con il prompt sulla destra, per intenderci - è il cosiddetto Prototyper. In altro a destra, vicino alla nostra icona di profilo troviamo un simbolo tipo </> corrispondente al comando Switch to code che permette di passare all'Editor di codice, l'IDE in pratica.

Passando a quest'ultimo ambiente vediamo la citata icona si tramuta in una sorta di bacchetta magica, Switch to Prototyper. Questo procedimento di commutazione tra i due ambienti non va inteso tanto quanto una scelta definitiva "di fronte" bensì come una sorta di passaggio, durante una sessione di lavoro, all'ambito più congeniale all'attività che vogliamo svolgere. Prendiamoci confidenza.

Inserimento di un nuovo aforisma

Sebbene ci troviamo di fronte ad un'applicazione semplice, l'architettura messa in piedi potrebbe essere piuttosto articolata in quanto predisposta naturalmente ad ogni possibile espansione. Il nostro prototipo gestisce un elenco di aforismi e ci piacerebbe capire dove sono posizionati e come modificarli senza dover studiare l'architettura o esplorarla a mano: ricordiamo che in questo tipo di approccio allo sviluppo si deve fare affidamento all'Intelligenza Artificiale non per pigrizia ma perché viene concepita come una sorta di attività condivisa tra l'uomo e la macchina.

Nella modalità Prototyper, chiediamo al prompt Come vengono gestiti e dove sono stati memorizzati gli aforismi che l'applicazione mostra?. Firebase Studio in questo caso risponde con ogni dettaglio specificando che:

• gli aforismi sono conservati nel file src/ai/flows/quotes.json in oggetti JSON che contemplano le tre proprietà language, quote e author riguardanti, rispettivamente, la lingua di espressione della citazione, la citazione stessa, l'autore;
• il codice che tratta gli algoritmi è src/ai/flows/fetch-motivational-quote.ts e ne viene spiegato anche il funzionamento di base;
• nessuna API esterna è stata impiegata, questa considerazione a scopo di completezza

Supponiamo di voler inserire un nuovo aforisma. Andando a verificare l'indicazione data da Firebase Studio al primo punto dell'elenco precedente verifichiamo che effettivamente il file sia strutturato in quel modo:

[
    "language": "Italian",
    "quote": "La vita è ciò che accade mentre sei occupato a fare altri progetti.",
    "author": "John Lennon"
  },
...
]

e che potremmo procedere alla modifica diretta. Tra l'altro anche l'IDE contiene un'anteprima disponibile a sperimentare subito gli aggiornamenti apportati. Tuttavia, quello che ci interessa è la modifica di codice tramite prompt. Procediamo con questa richiesta:

Vorremmo inserire tra gli aforismi la seguente frase di Albert Einstein "È meglio essere ottimisti ed avere torto piuttosto che pessimisti ed avere ragione." sia nella versione italiana sia in quella inglese. Crea tu la traduzione.

La risposta del prompt ci comunica che ha apportato le modifiche al file src/ai/flows/quotes.json tanto che al suo interno troviamo:

{
    "language": "Italian",
    "quote": "È meglio essere ottimisti ed avere torto piuttosto che pessimisti ed avere ragione.",
    "author": "Albert Einstein"
  },
...
...
  {
    "language": "English",
    "quote": "It is better to be an optimist and be wrong than to be a pessimist and be right.",
    "author": "Albert Einstein"
  }
]

in cui è stata anche predisposta la traduzione.

Modifica del colore del pulsante

Il dialogo a cui le AI ci stanno abituando consiste non solo nel risolvere problemi per noi ma anche accompagnarci nelle esplorazioni dei progetti cui stiamo lavorando. Se ad esempio chiediamo:

Dove sono impostati i colori del pulsante? Illustra tutti i punti in cui vengono impostati e usati e modifica quello del pulsante in un arancione chiaro.

A fronte di questa richiesta, ci vengono illustrati tutti i punti del codice Next.js/Tailwind CSS che riguardano il componente scelto. Ci viene infine comunicato che la richiesta è stata completata con la modifica del colore del pulsante in src/app/page.tsx dove il relativo codice esadecimale si rivela già aggiornato:

<Button
onClick={handleNewQuote}
disabled={loading}
className="bg-primary text-primary-foreground hover:bg-primary/80
rounded-full px-6 py-3 font-semibold transition-colors duration-200"
style={{backgroundColor: '#FFB74D'}}>
Nuova Frase
</Button>

ed intanto l'interfaccia in anteprima si modifica all'istante:

Quanto visto non è che un assaggio di tutto ciò che si può realizzare ma l'aspetto principale che deve emergere è che strumenti di questo tipo si basano fortemente sull'interazione e la collaborazione Uomo/Macchina ed un prompt chiaro e dettagliato ne diventa il veicolo essenziale.