Glossario

Scopri i termini chiave di sviluppo che ti servono per orientarti e usare Lovable in modo efficace.

​

Concetti generali

• AI (Intelligenza Artificiale): La simulazione dei processi dell’intelligenza umana da parte di macchine, in particolare sistemi informatici, che permette di svolgere attività come apprendimento, ragionamento e problem‑solving.​
• Istruzione: Un testo o un input che guida i modelli di AI nella generazione di output o nell’esecuzione di determinati compiti.​ È una funzionalità centrale di Lovable ed è tramite le istruzioni (prompt) che puoi creare o modificare uno specifico componente o elemento della tua applicazione.

​

Termini specifici di Lovable

• Chat Mode: Lovable va oltre la semplice generazione di codice; diventa un assistente interattivo che ti guida in ogni fase dello sviluppo. Aiuta i founder a ragionare in modo critico, pianificare in modo efficace, fare debug in modo intelligente e rilasciare con sicurezza.
• Edit Mode: L’azione di apportare modifiche o cambiamenti ai contenuti o al codice.​
• Edit: Uno strumento che consente lo sviluppo guidato dall’AI con controlli visivi nativi di Tailwind per perfezionare facilmente il risultato.
• History: Il sistema per tracciare e gestire nel tempo le modifiche apportate alla tua app e al tuo codice.​
• Knowledge: Cattura i dettagli essenziali del progetto in un documento vivo che si evolve insieme alla tua app.
• Labs: Funzionalità sperimentali all’interno di Lovable, dedicate a testare e mostrare nuove funzionalità innovative o in fase di sviluppo.​ Queste potrebbero essere modificate o rimosse in qualsiasi momento.
• Remixa: Puoi remixare un progetto pubblico esistente o uno tuo. Il remixaggio ti permette di riutilizzare lo stato attuale di un progetto come punto di partenza su cui costruire. È un ottimo modo per esplorare nuove idee, fare aggiustamenti o iterare con modifiche diverse, preservando la versione originale. Nota che non è possibile remixare progetti quando Supabase è connesso.
• Anteprima: Consente agli utenti di visualizzare o provare contenuti live o funzionalità in modo interattivo prima che siano finalizzati o pubblicati.
• Diff: Un confronto che mostra le differenze tra due versioni di un file o del codice.​
• /index: Si riferisce alla pagina principale o predefinita di un sito web o di un’app, spesso chiamata “index.html” o “index.js”.
• Lovable API - Build with URL: La funzionalità Lovable API Build with URL ti consente di creare applicazioni in modo programmatico passando prompt e immagini tramite parametri dell’URL. Questo permette un’integrazione perfetta con siti web, strumenti interni o workflow di automazione, consentendo agli utenti di generare app Lovable con un solo clic.

​

Concetti di prodotto e di sviluppo

​

Gestione prodotto & strategia

• MVP (Minimum Viable Product) – Una versione di un prodotto con il minimo insieme di funzionalità necessarie per soddisfare gli early adopter e convalidare un’idea prima di uno sviluppo su larga scala.
• Roadmap – Un piano strategico di alto livello che definisce la visione, la direzione e le funzionalità previste di un prodotto nel tempo.
• Feature Request – Un suggerimento formale o informale da parte di utenti o stakeholder per una nuova funzionalità in un prodotto.
• User Story – Una descrizione breve e semplice di una funzionalità o di un requisito, scritta dal punto di vista dell’utente finale.
• User Journey – La serie di passaggi che un utente compie per raggiungere un obiettivo specifico all’interno di un prodotto o servizio.
• Persona – Una rappresentazione fittizia di un utente target, basata sulla ricerca, utilizzata per guidare le decisioni di design e sviluppo.

​

Concetti di ingegneria software

• PRD (Product Requirements Document): Un documento completo che delinea gli obiettivi, le funzionalità e le specifiche di un prodotto per guidarne lo sviluppo.​
• API (Application Programming Interface): Un modo per far comunicare servizi diversi tra loro. Puoi vederla come un protocollo che ti indica che tipo di informazioni puoi recuperare o inviare tra i sistemi. Le tipologie più comuni sono le API REST, utilizzate da molti siti, e le API GraphQL, che offrono un approccio più flessibile alle query sui dati.
• Refactor: Processo di ristrutturazione del codice esistente senza modificarne il comportamento esterno, per migliorarne leggibilità, manutenibilità o prestazioni.
• GitHub: Una piattaforma web per il controllo di versione e lo sviluppo software collaborativo basata su Git.​

​

Dati e analisi

• Test A/B – Un metodo per confrontare due versioni di una pagina web o di una funzionalità per determinare quale ottiene prestazioni migliori in base al comportamento degli utenti.
• Tasso di conversione – La percentuale di utenti che completano un’azione desiderata, come la registrazione o un acquisto.
• Tasso di abbandono – La percentuale di utenti che smettono di usare un prodotto in un determinato periodo di tempo.
• Tasso di fidelizzazione – La percentuale di utenti che continuano a utilizzare un prodotto nel tempo.
• Monitoraggio degli eventi – Monitoraggio di azioni specifiche degli utenti (ad esempio clic sui pulsanti, invio di moduli) per raccogliere informazioni sul loro comportamento e livello di coinvolgimento.

​

Playbook per UI/UX e sviluppo frontend

​

Sviluppo frontend

• Frontend: La parte di un’applicazione software con cui gli utenti interagiscono direttamente, che comprende gli elementi di interfaccia utente e di esperienza utente.​
• React: Una libreria JavaScript sviluppata da Facebook per creare interfacce utente, in particolare applicazioni a pagina singola.​
• Gradient: Una transizione graduale tra due o più colori o sfumature in un design.
• Tailwind CSS: Framework CSS open source “utility-first” che fornisce un set completo di classi predefinite, permettendo agli sviluppatori di creare design personalizzati direttamente nel loro HTML applicando queste classi di utilità agli elementi.
• Design Systems: Una raccolta di componenti riutilizzabili, linee guida e standard che garantiscono coerenza e uniformità nel design di un prodotto o di un brand.

​

Concetti di design UI/UX

• Accent Color: Una tonalità distintiva utilizzata per mettere in risalto gli elementi chiave di un design, spesso in linea con o complementare al colore principale del brand per aumentare l’interesse visivo.​
• Theme: Un insieme coerente di scelte di design, tra cui colori, font e layout, che definisce l’estetica complessiva e l’esperienza utente di un’applicazione o di un sito web.​
• Responsive Design: Un approccio al web design che fa sì che i contenuti si adattino in modo fluido alle diverse dimensioni e ai diversi orientamenti dei dispositivi, offrendo un’esperienza utente ottimale.
• Above the Fold: La porzione di una pagina web visibile agli utenti senza scorrere, fondamentale per catturare l’attenzione e comunicare subito le informazioni essenziali. ​
• CTA (Call to Action): Un invito all’azione, spesso sotto forma di pulsante o link, che incoraggia gli utenti a eseguire un’azione specifica, come «Iscriviti» o «Scopri di più». ​

​

Struttura della pagina e navigazione

• Intestazioni (Titoli): Elementi di testo che introducono e organizzano le sezioni di contenuto, solitamente formattati con livelli diversi (ad es. H1, H2) per stabilire una gerarchia chiara del contenuto.​
• Footer: La sezione inferiore di una pagina web, che contiene spesso informazioni supplementari come dettagli di contatto, link di navigazione e note legali. ​
• Breadcrumb: Un elemento di navigazione che mostra la posizione corrente dell’utente all’interno della gerarchia di un sito, spesso rappresentato come un elenco orizzontale di link. ​
• Favicon – Una piccola icona visualizzata nella scheda del browser, nei segnalibri e nei risultati di ricerca, che rappresenta tipicamente un brand o un sito web.
• Meta Title (Title Tag) – Il titolo di una pagina web che appare nei risultati dei motori di ricerca e nelle schede del browser, influenzando la SEO e il tasso di clic degli utenti.
• Meta Description – Un breve riepilogo del contenuto di una pagina web mostrato nei risultati dei motori di ricerca, pensato per migliorare la reperibilità e il coinvolgimento degli utenti.
• Canonical URL – Un tag utilizzato per specificare la versione preferita di una pagina web, aiutando a evitare problemi di contenuti duplicati nell’indicizzazione da parte dei motori di ricerca.
• URL Slug – La parte di un URL che identifica una specifica pagina in un formato facilmente leggibile (ad es. example.com/product-name).
• Sitemap – Un file strutturato (XML o HTML) che fornisce un elenco delle pagine di un sito web, aiutando i motori di ricerca a indicizzarle in modo efficiente.
• Barra di navigazione (Nav Bar) – Un menu orizzontale o verticale che fornisce link alle sezioni principali di un sito web per una navigazione semplice.
• Skip Links – Link nascosti che consentono agli utenti di bypassare contenuti ripetitivi e navigare direttamente al contenuto principale, migliorando l’accessibilità.
• Paginazione – Un metodo per suddividere il contenuto in più pagine, usato comunemente in blog, risultati di ricerca e liste di prodotti per migliorare l’esperienza utente.
• Anchor Link – Un collegamento ipertestuale che indirizza gli utenti a una sezione specifica all’interno della stessa pagina anziché caricare una nuova pagina.
• Pagina 404 – Una pagina di errore personalizzata mostrata quando un utente tenta di accedere a un URL inesistente, guidandolo nuovamente verso contenuti pertinenti.

​

Elementi di notifica e feedback

• Toast: Una notifica breve e non invasiva che appare temporaneamente per informare gli utenti dell’esito di un’azione o per fornire un feedback semplice. ​
• Snackbar – Simile a un toast, ma in genere posizionato nella parte inferiore dello schermo, con azioni opzionali (ad esempio, “Annulla” su un elemento eliminato).
• Tooltip – Un piccolo riquadro pop-up che fornisce informazioni aggiuntive quando si passa il puntatore sopra un elemento o quando questo riceve il focus.
• Badge – Un piccolo indicatore visivo, spesso usato su icone o pulsanti, per mostrare notifiche, conteggi o aggiornamenti di stato.
• Loading Spinner (Loader) – Un indicatore visivo che rappresenta un processo in corso, come il caricamento di una pagina o l’invio di un modulo.
• Progress Bar – Una barra orizzontale che indica la percentuale di completamento di un’attività o di un processo.
• Skeleton Loader – Un’interfaccia segnaposto che imita il layout del contenuto finale mentre è in attesa di essere caricato, migliorando le prestazioni percepite.

​

Overlay e pop-up

• Popover: Un overlay temporaneo che mostra informazioni aggiuntive o opzioni relative a uno specifico elemento dell’interfaccia, in genere visualizzato in seguito all’interazione dell’utente. ​
• Dialog (Modal): Una finestra che appare davanti al contenuto principale per catturare l’attenzione dell’utente, spesso richiedendo un’azione prima di tornare all’interfaccia principale.
• Drawer (pannello laterale) – Un pannello che scorre dal lato dello schermo per mostrare opzioni di navigazione o impostazioni senza interrompere il contenuto principale.
• Lightbox – Una finestra modale che mostra immagini o contenuti multimediali in una vista ingrandita, oscurando lo sfondo per mettere in risalto il contenuto.
• Alert Box – Una finestra di messaggio generata dal sistema o dall’applicazione che informa gli utenti su informazioni importanti, ad esempio errori o avvisi.

​

Elementi di navigazione e selezione

• Button: Un elemento cliccabile che avvia un’azione o un evento, come l’invio di un modulo o l’apertura di una finestra di dialogo.​
• Switch (Toggle): Un controllo di tipo interruttore che consente agli utenti di passare da uno stato all’altro, ad esempio acceso o spento, spesso simile a un interruttore fisico. ​
• Tabs – Un componente che organizza il contenuto in viste separate all’interno di un’unica interfaccia, permettendo agli utenti di passare tra le sezioni senza cambiare pagina.
• Stepper (Wizard) – Un componente utilizzato per processi in più passaggi, che mostra agli utenti il passaggio corrente e li guida fino al completamento.
• Pagination – Un pattern di interfaccia utente (UI) che suddivide il contenuto in pagine, spesso usato per i risultati di ricerca o per applicazioni con molti contenuti.
• Breadcrumb – Uno strumento di navigazione che mostra la posizione corrente dell’utente all’interno della gerarchia di un sito, spesso rappresentato come un elenco orizzontale di link.
• Accordion – Una sezione a fisarmonica che si espande o si contrae per mostrare o nascondere dinamicamente il contenuto.
• Dropdown Menu – Un menu a discesa che appare quando un utente clicca o passa il cursore su un pulsante o un campo, spesso usato per la navigazione o la selezione.

​

Moduli ed elementi di input

• Form: Una raccolta strutturata di campi di input che consente agli utenti di inviare dati, come informazioni di contatto o ricerche.​
• Radio Group: Un insieme di pulsanti di opzione (radio button) correlati che permette agli utenti di selezionare una sola opzione tra più scelte.
• Checkbox: Una casella interattiva che gli utenti possono selezionare o deselezionare per scegliere o rimuovere un’opzione, consentendo selezioni multiple all’interno di un insieme.​
• Text Field (Input Field) – Un elemento UI di base in cui gli utenti possono inserire testo, ad esempio in barre di ricerca, moduli di accesso o commenti.
• Text Area – Un campo di input più grande progettato per l’inserimento di testo su più righe, comunemente usato per messaggi o moduli di feedback.
• Select (Dropdown Select Box) – Un elemento UI che consente agli utenti di scegliere un’opzione da un elenco predefinito, spesso presentato come un menu a discesa.
• Date Picker – Un elemento UI che consente agli utenti di selezionare una data da un calendario invece di digitarla manualmente.
• Slider (Range Selector) – Un controllo che consente agli utenti di impostare un valore all’interno di un intervallo facendo scorrere un cursore lungo una barra.
• File Upload Field – Un componente che consente agli utenti di selezionare e caricare file dal proprio dispositivo.
• Autocomplete (Typeahead Search) – Un campo di testo che suggerisce dinamicamente risultati corrispondenti mentre gli utenti digitano, migliorando l’usabilità nelle ricerche.

​

Stili di design e tendenze

Puoi usare questi termini in qualsiasi tua istruzione per descrivere uno stile specifico che stai cercando di ottenere.

• Neobrutalism: Una tendenza del web design caratterizzata da elementi grezzi e non rifiniti, tipografia marcata e alto contrasto, che trae ispirazione dall’architettura brutalista della metà del XX secolo. ​
• Retro: Design che incorpora stili, motivi ed elementi di decenni passati, evocando nostalgia e un’estetica vintage.​
• Hacker: Un’estetica che riflette la cultura DIY (fai-da-te) e open-source, spesso caratterizzata da font monospaziati, sfondi scuri e interfacce ispirate al terminale.​
• Glass (Glassmorphism): Uno stile di design che utilizza elementi traslucidi, simili al vetro smerigliato, con ombre e bordi sottili per creare profondità.​
• Nudy: Un approccio di design minimalista che utilizza palette di colori naturali o neutri per creare un’estetica morbida e discreta.​

​

Risorse per design e asset

• 21st.dev: Un registro open source della community che offre componenti UI React minimali, moderni e riutilizzabili basati su Tailwind CSS e Radix UI, pensato per aiutare i design engineer a pubblicare interfacce utente rifinite in modo più efficiente.
• Dribble: Una delle principali community online dove designer e professionisti creativi mettono in mostra il proprio lavoro, scoprono ispirazione per il design e si connettono con potenziali clienti o collaboratori.
• Noun Project: Una piattaforma che offre un’ampia raccolta di icone gratuite e foto stock, permettendo agli utenti di accedere a risorse visive per vari progetti.
• SVG Repo: Una libreria completa con oltre 500.000 vettori e icone SVG con licenza aperta, che consente agli utenti di cercare, esplorare, modificare e scaricare grafiche adatte a diversi progetti.
• Google Fonts: Una libreria gratuita di font ottimizzati per il web, che offre a designer e developer un’ampia selezione di opzioni tipografiche per valorizzare i loro progetti.
• Typewolf: Una risorsa che aiuta i designer a scegliere le combinazioni di font ideali per i loro progetti, mostrando i font di tendenza e offrendo liste di font curate.

​

Sviluppo backend e database

​

Fondamenti di backend

• Backend: L’infrastruttura lato server di un’applicazione che gestisce l’elaborazione dei dati, l’archiviazione e la logica di business.​
• Supabase: Una piattaforma open source di backend-as-a-service che fornisce un database Postgres, autenticazione, API istantanee e funzionalità in tempo reale.
• Webhooks – Callback HTTP basati su eventi che notificano applicazioni esterne quando si verificano azioni specifiche.

​

Gestione del database e query

• CRUD (Create, Read, Update, Delete): Le quattro operazioni di base eseguite sui dati in un database o in un’applicazione.​
• SQL (Structured Query Language): Un linguaggio di programmazione specifico per il dominio, progettato per la gestione e la manipolazione di database relazionali, che consente operazioni come interrogare, aggiornare e organizzare i dati.
• PostgreSQL – Un potente database relazionale open-source, noto per la sua scalabilità, estensibilità e conformità alle proprietà ACID.

​

Concetti specifici di Supabase

• Edge Function: Funzioni TypeScript lato server, distribuite globalmente all’Edge — vicino ai tuoi utenti. Possono essere utilizzate per gestire webhook o per integrare il tuo Progetto Supabase con servizi di terze parti come Stripe, Anthropic o Resend.
• RLS (Row-Level Security): Una funzionalità dei database che permette di controllare l’accesso a righe specifiche di una tabella in base ai ruoli o agli attributi dell’utente, consentendo in pratica di impostare regole di autorizzazione granulari e di scrivere regole SQL complesse che si adattano alle tue esigenze specifiche di business.
• Storage: Un servizio o sistema per archiviare e gestire dati, come immagini, video, documenti e qualsiasi altro tipo di file.
• Bucket: In Supabase Storage, un bucket è un contenitore distinto che organizza file e cartelle, determinando il modello di accesso (pubblico o privato) e impostando restrizioni di upload come la dimensione massima dei file e i tipi di contenuto consentiti.
• Endpoint: Nel contesto di Supabase, un endpoint è un URL specifico che permette ai client di interagire con il database tramite chiamate API RESTful, abilitando operazioni come creazione, lettura, aggiornamento o eliminazione dei dati.
• Authentication Provider: Un’entità o un servizio che verifica le credenziali degli utenti, abilitando l’accesso sicuro ad applicazioni o sistemi. Nel contesto di Supabase, i provider di autenticazione includono vari metodi come autenticazione basata su password, magic link, one-time password (OTP), accesso tramite social e integrazioni SSO (Single Sign‑On), offrendo un’autenticazione degli utenti flessibile e sicura.

​

Sicurezza e autenticazione

• OAuth – Un protocollo di autenticazione ampiamente utilizzato che consente agli utenti di accedere alle applicazioni utilizzando servizi di terze parti come Google, Facebook o GitHub.
• Two-Factor Authentication (2FA) – Una misura di sicurezza che richiede agli utenti di fornire due forme di verifica prima di accedere a un account.
• CORS (Cross-Origin Resource Sharing) – Un criterio di sicurezza che controlla quali siti web o applicazioni possono accedere alle risorse presenti su un server.