Modulo 4 di 6

Da sito ad applicazione

Il salto di qualità: da pagine che si guardano a un'app che si usa. Login, database, dati che restano salvati — costruiti conversando con Lovable e Supabase, senza toccare una riga di codice.

⏱ Durata: 60 minuti 📊 Livello: intermedio 🛠 Strumenti: Lovable + Supabase

1. Sito vs app: cosa cambia davvero 5 min

Ricordi il ristorante del Modulo 1? Il tuo sito del Modulo 3 era solo la sala. Un'app aggiunge la cucina (backend) e la dispensa (database). In pratica, un'app ha tre capacità in più:

  • Identità — gli utenti si registrano e hanno un proprio account (autenticazione).
  • Memoria — i dati inseriti restano salvati e li ritrovi al prossimo accesso (database).
  • Regole — ognuno vede solo ciò che deve: i propri dati, non quelli degli altri (permessi).

La bella notizia: builder come Lovable integrano Supabase, che fornisce login, database e permessi già pronti. Tu li richiedi in italiano, lui li collega.

2. Progettare prima di costruire 10 min

Il progetto guida di oggi: "Allenamenti", un'app dove un utente registra i propri allenamenti e vede i progressi. Semplice, ma contiene tutti gli ingredienti di qualsiasi app (anche di un gestionale clienti o di un'app di prenotazioni).

Prima regola da pro: mai chiedere tutta l'app in un prompt solo. Prima si progetta. Usa l'AI come product manager:

Prompt: progettazione (in Claude o direttamente in Lovable)
Voglio costruire una web app per registrare gli allenamenti personali.
Funzioni che immagino: registrarsi, aggiungere un allenamento (data, tipo,
durata, note), vedere la lista, vedere statistiche semplici.

Prima di costruire qualsiasi cosa:
1. Proponi la versione minima (MVP): quali funzioni tenere e quali rimandare
2. Elenca le schermate necessarie
3. Descrivi che dati vanno salvati (le "tabelle" del database)
Aspetta la mia conferma prima di procedere.

Nota la frase finale: "aspetta la mia conferma". Ti mette al posto di guida. L'AI proporrà qualcosa tipo: tabella utenti (la gestisce il login) e tabella allenamenti (data, tipo, durata, note, a chi appartiene). Non devi saper progettare database: devi solo leggere la proposta e verificare che abbia senso rispetto a ciò che vuoi.

💡 Il concetto di MVP

MVP (Minimum Viable Product) = la versione più piccola che sia già utile. Prima si fa funzionare quella, poi si aggiunge. È la differenza tra chi pubblica e chi resta impantanato: ambizione nel progetto, umiltà nel primo passo.

3. Costruire l'app passo passo 15 min

Apri Lovable (o il builder scelto nel Modulo 2) e procedi a strati, esattamente come da progetto:

Passo 1 — L'interfaccia, con dati finti
Crea un'app "Allenamenti" con questa struttura:
- Schermata principale: lista degli allenamenti (data, tipo, durata, note)
  con dati di esempio, e un bottone "+ Nuovo allenamento"
- Il bottone apre un modulo: data, tipo (corsa, pesi, nuoto, altro),
  durata in minuti, note facoltative
- Stile: pulito, moderno, colori blu notte e lime, ottimo su smartphone
Per ora NIENTE login e NIENTE database: solo interfaccia con dati finti.

Perché "dati finti"? Perché così vedi e correggi l'interfaccia subito, senza il rumore del database. È molto più facile sistemare l'aspetto ora. Itera finché la schermata ti convince — come hai imparato nel Modulo 3.

Passo 2 — Una funzione alla volta
› Ora fai funzionare il modulo: quando salvo, l'allenamento appare
  in cima alla lista.

› Aggiungi la possibilità di eliminare un allenamento (con conferma).

› Aggiungi in alto tre contatori: allenamenti questo mese, minuti
  totali, tipo più frequente.

Ogni richiesta: guarda l'anteprima, prova davvero (aggiungi, elimina, casi strani tipo durata vuota), e solo a cosa verificata passa alla successiva. Questo ritmo — piccolo passo, verifica, piccolo passo — è il cuore del metodo.

4. Login e database: il momento Supabase 15 min

Ora l'app è bella ma smemorata: ricarichi la pagina e perde tutto. Diamole memoria e identità:

Passo 3 — Collegare Supabase
Collega Supabase e:
1. Aggiungi registrazione e login con email e password
2. Salva gli allenamenti nel database, collegati all'utente
3. Ogni utente deve vedere e modificare SOLO i propri allenamenti
4. Se non sono loggato, mostrami la pagina di login

Lovable ti guiderà a connettere un progetto Supabase (account gratuito, due click) e configurerà tutto: tabelle, login, permessi. Il punto 3 è la riga più importante del prompt — chiede le regole di accesso (in gergo "row level security"): chiedila sempre, esplicitamente, in ogni app con utenti.

Poi verifica sul serio, come farebbe un professionista:

  • Registra due account diversi (usa due email o una finestra in incognito)
  • Inserisci allenamenti con l'account A → l'account B non deve vederli
  • Ricarica la pagina → i dati devono essere ancora lì
  • Prova il logout e il login di nuovo
⚠️ Regola d'oro n.2

Un'app con utenti senza regole di accesso è una porta di casa senza serratura. Il test dei due account non è opzionale: si fa ogni volta, e lo approfondiremo nel Modulo 5.

5. Rifinire e pubblicare 10 min

Gli ultimi tocchi che trasformano un esercizio in un prodotto:

  • Stati vuoti: "Quando non ci sono ancora allenamenti, mostra un messaggio di benvenuto che invita ad aggiungere il primo."
  • Feedback: "Dopo il salvataggio mostra una conferma; durante il caricamento mostra un indicatore."
  • Errori garbati: "Se il login fallisce, spiega il problema in italiano semplice."

Poi premi Publish: Lovable pubblica l'app a un indirizzo tuaapp.lovable.app, condivisibile con chiunque. Hai appena messo online una web app completa di login e database. Da zero. Conversando.

6. Esercizio pratico 5 min + pratica

🏋️ Esercizio del Modulo 4
  1. Costruisci l'app "Allenamenti" seguendo i passi del modulo (o adatta l'idea a te: spese, letture, clienti, ricette…).
  2. Rispetta il metodo: progetto → interfaccia con dati finti → funzioni una alla volta → Supabase → verifiche.
  3. Esegui il test dei due account e annota il risultato.
  4. Pubblica e fai usare l'app a una persona reale per 5 minuti, senza spiegarle nulla: dove si blocca? Quella è la tua prossima iterazione.

Cosa hai imparato:

  • Le tre capacità di un'app: identità, memoria, regole
  • Progettare l'MVP prima di costruire, con l'AI come product manager
  • Il metodo a strati: interfaccia finta → funzioni → dati veri
  • Collegare login e database con Supabase, chiedendo esplicitamente i permessi
  • Il test dei due account e la pubblicazione dell'app