Firebase Studio: creare applicazioni web

Una delle maggiori ricchezze di Firebase Studio è la capacità di affrontare tipi di applicazioni molto diverse. Una delle prime che si sperimenta è l'applicazione web. In questa lezione vogliamo entrarne maggiormente nel merito cercando di impostare non solo i parametri di creazione di questo tipo di app ma anche una metodologia di approccio al prompt che ci accompagnerà nel resto della guida e nei nostri futuri utilizzi del framework.

Come si affronta il prompt in Firebase Studio

Limitandoci ad esprimere quello che può essere un approccio al prompt un p0' più sistematico e focalizzato al web diciamo che dovremmo cercare di muoverci in queste direzioni:

• fornire a Firebase Studio le indicazioni su quello che ci interessa realizzare cercando di non essere avari di descrizione. Dimostrandoci schematici ma chiari e cercando di strutturare la nostra richiesta;
• da qui arriviamo al primo prototipo che sicuramente andrà adattato. Innanzitutto perché noi stessi ci accorgeremo di aver dimenticato qualcosa, ci verranno ulteriori idee provandolo e anche dal punto di vista stilistico ci accorgeremo che qualcos'altro si può sicuro adattare;
• correzione di malfunzionamenti. Potremmo aver sbagliato qualche indicazione ma anche il codice prodotto potrebbe aver bisogno di aggiustamenti (neanche il vibe coding è magia!). Pertanto, noi faremo delle richieste e Firebase Studio in autonomia si accorgerà di fixing e miglioramenti da apportare.

Si potrebbe essere più dettagliati in questa lista ma si vuole fornire un approccio al lavoro che renda chiaro soprattutto che un prompt non è mai definitivo, non è scolpito nella pietra: un'applicazione è sempre frutto di un lavoro continuo e collaborativo tra noi e la AI.

La nostra applicazione

Per prima cosa, per avere la nostra app cerchiamo di perdere un po' di tempo a curare il primo prompt. Focalizziamoci su una descrizione che segua una suddivisione in sezioni:

• obiettivo: qual è il nostro scopo;
• l'interfaccia: una web app gira tutta attorno all'interfaccia web pertanto è fondamentale dare una descrizione della sua struttura;
• il funzionamento: cosa fa l'applicazione, quali sono le funzioni principali dell'interfaccia, cosa può fare l'utente, indicando ogni punto in cui può richiedere azioni come salvare dati, modificarli, cancellarli;
• memorizzazione dei dati: è difficile che una web app sia fine a sé stessa. O interagisce con sistemi remoti tramite API o salva dati su un database. Come vogliamo che ciò venga fatto? Forniamo già indirizzi e riferimenti dei sistemi finali o per il momento ci limitiamo ad interagire con sistemi mock in attesa che l'interfaccia utente finita sia testabile su vere controparti informative?

Nel nostro esempio, vogliamo creare un'applicazione che permetta di salvare delle note, piccoli appunti, eventualmente corredati da uno o più allegati in formato immagine o PDF. Le note già salvate saranno elencate in un menu a sinistra e offriranno una icona di "download" se dispongono di allegati. Il meccanismo di memorizzazione sarà al momento il local storage del browser in attesa di collegare un vero database.

Il prompt iniziale

Ecco il prompt iniziale:

Obiettivo: Creare un'applicazione web per prendere appunti e salvare note, semplice ed elegante chiamata "Nota Bene"
utilizzando Next.js, React, TypeScript, ShadCN UI e Tailwind CSS.

Funzionalità principali:
1. Layout a due colonne:
- A sinistra, una barra laterale (con funzione di menu) che elenca tutte le note già salvate.
- A destra, un'area principale per creare, visualizzare e modificare una nota.
Il layout deve essere responsive e la barra laterale comprimibile su mobile.

2. Menu delle Note (Barra laterale sinistra):
- Mostra un titolo "Nota Bene" con un'icona NotebookPen.
- Un pulsante "Nuova Nota" con un'icona Plus per creare una nuova nota.
- Le note esistenti devono essere raggruppate per mese e anno (es. "luglio 2024") in sezioni a fisarmonica (in stile Accordion).
Le sezioni devono essere aperte di default.
- Ogni nota nell'elenco deve mostrare il suo titolo. La nota attualmente selezionata deve avere uno sfondo evidenziato.
- Solo se una nota ha un allegato, deve apparire un'icona Download accanto al titolo. Cliccando su questa icona si avvia
il download.

3. Form di inserimento/modifica nota (Area principale destra):
- consiste in un modulo per inserire/modificare il titolo della nota, la data e il testo.
- Un campo per caricare uno o più file come allegati (immagini o PDF).
- Un elenco degli allegati (sia quelli già salvati che quelli appena aggiunti) deve essere visibile sotto il campo di input.
Ogni allegato deve mostrare nome, dimensione e un pulsante con un'icona X per rimuoverlo.
- Un pulsante "Salva Nota" con un'icona "Save" per salvare le modifiche.
- Un pulsante "Elimina Nota", con sfondo rosso, con un'icona "Trash" (visibile solo quando si modifica una nota esistente) che chiede conferma prima di eliminare.
- Quando si seleziona una data (tramite calendario) deve essere visualizzata in formato italiano (es. "9 luglio 2025").

4. Gestione dei Dati:
- I dati delle note (inclusi gli allegati come data URL) devono essere salvati nel localStorage del browser in attesa che verrà
chiesto di implementare un'integrazione su database.

5. Stile e Design:
- Utilizza il font "PT Sans" sia per i titoli che per il corpo del testo.
- Imposta uno schema di colori con uno sfondo arancione molto tenue.

L'interfaccia dell'applicazione Web

L'interfaccia che otteniamo è la seguente:

Da quello che si vede (escludendo la cifra stilistica che è stata lasciata come proposta da Firebase Studio), siamo giunti con piccole correzioni come ad esempio la gestione degli allegati. Infatti, la prima versione gestiva più allegati ma c'era ancora qualcosa da aggiungere. Con le richieste ulteriori fatte via prompt abbiamo inserito, tra le altre cose, la possibilità di scaricare gli allegati in un pacchetto zip qualora fossero più di uno.

E' importante che alla fine del lavoro si richieda a Firebase Studio di proporci il prompt che lui trova corrispondente alla versione finale ottenuta includendo le nostre richieste iniziali, le sue modifiche autonome ad errori e le ulteriori richieste nostre di perfezionamento.

Ad esempio, alcuni aspetti come nomi di font scelti e delle icone usate presenti nella prima descrizione ci sono diventati noti grazie alla descrizione che Firebase Studio stesso ne ha fatto.

Lavorare con il local storage in Firebase Studio

Per le applicazioni web, il local storage può essere un banco di prova per iniziare a sperimentare e soprattutto per perseguire quella famosa via tanto coltivata nei decenni del disaccoppiamento tra UI e backend che ci permette, anche qui che lavoriamo con un prompt, di arrivare ad una prima versione che possa mostrare solo aspetti visuali per poi proseguire solo con aspetti riguardanti la memorizzazione.

Per indagare cosa il local storage sta memorizzando, si può passare dagli "Strumenti per sviluppatori" dei browser (a seconda del browser prenderà nome "Archivio" o "Applicazione") e cercare il local storage ed, in particolare, la zona in cui viene rappresentata la struttura dati che sta popolando l'interfaccia.

Può essere un valido alleato ma si ricordi che ha dimensioni limitate e non è fatto per condividere dati tra browser o profili diversi.

C'è altro?

Certo! Al di là dell'impostazione dell'interfaccia, un'applicazione del genere può essere approfondita e migliorata sia da un punto di vista degli aspetti responsive sia da quelli della gestione delle informazioni, passando in primis dall'interazione con l'Intelligenza Artificiale offerta dal prompt.

Proseguiremo!