> ## Documentation Index > Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt > Use this file to discover all available pages before exploring further. # 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**](https://docs.lovable.dev/tips-tricks/prompting)**:** 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**](https://docs.lovable.dev/features/labs#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**](https://docs.lovable.dev/features/precision-edit#visual-edits)**:** 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**](https://docs.lovable.dev/features/precision-edit#knowledge-files)**:** Cattura i dettagli essenziali del progetto in un documento vivo che si evolve insieme alla tua app. * [**Labs**](https://docs.lovable.dev/features/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**](https://docs.lovable.dev/integrations/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**](https://lovable.dev/blog/2025-01-28-the-power-of-apis) **(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. * **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. 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:**](https://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:**](https://dribbble.com/) 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:**](https://thenounproject.com/) 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:](https://www.svgrepo.com/) 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:](https://fonts.google.com/) 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:](https://www.typewolf.com/) 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**](https://docs.lovable.dev/integrations/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)**](https://supabase.com/docs/guides/database/overview)**:** 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**](https://supabase.com/docs/guides/functions)**:** 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)**](https://supabase.com/docs/guides/database/postgres/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**](https://supabase.com/docs/guides/storage)**:** Un servizio o sistema per archiviare e gestire dati, come immagini, video, documenti e qualsiasi altro tipo di file. * [**Bucket**](https://supabase.com/docs/guides/storage/buckets/fundamentals)**:** 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**](https://supabase.com/docs/guides/api)**:** 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:**](https://supabase.com/docs/guides/auth) 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.