> ## 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.
# Video tutorial
> Dai un'occhiata a questi video per una panoramica completa su come creare un'app con Lovable.
## Benvenuti in Lovable
## Tutorial di Lovable
In questo tutorial ti guideremo nella creazione di un'app di monitoraggio delle calorie basata su AI con [Lovable](/it/lovable-f9060f1e/lovable-f9060f1e/editor/main#build-an-ai-powered-calorie-tracking-webapp), completa di autenticazione, un design responsive accattivante, integrazione con OpenAI e distribuzione in produzione.
La base di qualsiasi progetto Lovable è una buona istruzione. Per questa app, ecco un esempio:
```
Crea un'app per il monitoraggio delle calorie con le seguenti funzionalità:
Pagina di destinazione, dashboard e una pagina per i pasti.
Campi di input per descrizioni o immagini dei pasti, con analisi basata su GPT-4.
Monitoraggio dei progressi giornalieri e integrazione con Supabase per l'autenticazione e la gestione del database.
Interfaccia utente accattivante e responsive per dispositivi mobili.
```
Una volta che Lovable ha generato lo scheletro dell'interfaccia utente:
* Rivedi la configurazione della navigazione e il design della landing page.
* Itera sull'istruzione per perfezionare il layout e assicurarti che sia ottimizzato per i dispositivi mobili.
Sii esplicito nel partire dall'interfaccia utente (UI). Lovable funziona al meglio quando le attività sono suddivise in passaggi chiari. Ad esempio, specifica già nelle prime istruzioni la navigazione, la struttura delle pagine e i temi di design.
Lovable enfatizza un approccio passo-passo, simile alla costruzione di un edificio:
* Inizia con l'**impalcatura**: pianifica la struttura della tua app (ad es. flusso dell'esperienza utente, layout delle pagine).
* Aggiungi il **primo strato**: crea pagine vuote con elementi di design di base.
* Affina i **dettagli**: aggiungi colori, animazioni e ottimizzazione per i dispositivi mobili.
Se hai design già pronti in [Figma](), puoi catturare delle schermate e includerle nella tua istruzione per Lovable. Fornire immagini ad alta risoluzione garantisce risultati migliori.
Una volta che la UI è pronta, è il momento di aggiungere le funzionalità di backend:
1. Configura un **account** [**Supabase**]() e crea un progetto.
2. Collegalo a Lovable premendo il pulsante “Connect Supabase”.
3. Per memorizzare i dati, Lovable genererà tabelle SQL. Ad esempio:
* Una tabella `profiles` per memorizzare le informazioni degli utenti.
* Una tabella `meals` collegata agli utenti per tracciare le registrazioni giornaliere.
Usa le regole di row-level security (RLS) in Supabase per garantire la privacy degli utenti. Lovable può occuparsene automaticamente per te.
La magia di questa app risiede nelle sue funzionalità di intelligenza artificiale. Per analizzare i pasti:
1. Ottieni una [chiave API OpenAI]() dalla tua dashboard per sviluppatori.
2. Usa [GPT-4]() per analizzare le descrizioni o le immagini dei pasti.
3. Assicurati che le chiavi API siano archiviate in modo sicuro nelle funzioni Edge per prevenire accessi non autorizzati.
**Funzionalità da includere:**
* **Analisi delle descrizioni dei pasti**: Stimare i valori nutrizionali (calorie, proteine, carboidrati, grassi).
* **Riconoscimento delle immagini**: Carica una foto del pasto e GPT-4 estrarrà una descrizione e i dati nutrizionali.
*Suggerimenti avanzati per l'integrazione con OpenAI:*
* Usa il **function calling** per ottenere risposte strutturate, assicurandoti che i dati siano formattati correttamente per l'inserimento nel database.
* Verifica la funzionalità chiedendo all'app di analizzare voci semplici come "2 uova".
Per monetizzare l’app, aggiungi pagamenti in abbonamento:
1. Crea un account [Stripe]() e configura un prodotto (ad esempio, “Piano Standard” a 12 \$ al mese).
2. Integra Stripe con Lovable aggiungendo la chiave API e l’ID del prezzo del prodotto.
3. Reindirizza gli utenti senza abbonamento alla landing page. Solo gli utenti abbonati possono accedere all’app principale.
*Suggerimenti aggiuntivi:*
* Abilita il **customer portal** di Stripe per permettere agli utenti di gestire gli abbonamenti (ad esempio, annullare o aggiornare i metodi di pagamento).
* Testa i pagamenti in modalità di test di Stripe utilizzando i dati di carta di credito di prova forniti.
Gli errori fanno naturalmente parte dello sviluppo e Lovable semplifica il debug:
* Usa il pulsante **"Try to Fix"** ogni volta che si verifica un errore di build.
* Per problemi di backend, controlla i registri di Supabase per report di errore dettagliati.
* Se esegui il deploy su [Netlify](), esamina i registri di distribuzione per eventuali problemi di build. Condividi i registri con Lovable per ottenere correzioni su misura.
Se ti blocchi, torna a una versione precedente utilizzando la funzionalità "Revert" di Lovable. Questo ti fa risparmiare crediti e tempo.
Quando la tua app è pronta, distribuiscila con Lovable o Netlify:
1. Usa la funzione Distribuisci di Lovable per ospitare l'app su un dominio predefinito.
2. Per domini personalizzati:
* Collega il tuo [repository GitHub]() a Netlify.
* Acquista un dominio e configura i [record DNS]() per puntarlo a Netlify.
Aggiorna i metadati della tua app (favicon, meta tag, immagine OG) per migliorare il branding e la SEO.
In questo tutorial ti mostreremo come creare una landing page straordinaria e completamente interattiva per un assistente email basato sull’intelligenza artificiale utilizzando [Lovable](/it/lovable-f9060f1e/lovable-f9060f1e/editor/main#build-a-saas-landing-page-with-groq-api), 21st.dev e Supabase, completa di animazioni, integrazioni con API e una pubblicazione senza intoppi!
* Design con AI e miglioramenti dell'interfaccia utente
* Aggiunta di animazioni ed elementi interattivi
* Integrazione delle funzionalità email AI con la Groq API
* Configurazione di un modulo di contatto con Resend
* Pubblicazione della pagina con Lovable Launch
La sessione ha messo in mostra le capacità di [Lovable](/it/lovable-f9060f1e/lovable-f9060f1e/editor/main#build-a-feedback-tool) di iterare rapidamente e offrire risultati pronti per la produzione.
* Gli utenti possono registrarsi, accedere e gestire i propri profili utilizzando l'integrazione con Supabase.
* Le sessioni utente sicure consentono esperienze personalizzate.
* Gli utenti possono inviare feedback con titoli, descrizioni e immagini.
* Ogni segnalazione di feedback mostra il numero di voti e supporta voti positivi in tempo reale.
* Gli amministratori possono rivedere tutti i feedback, filtrare per numero di voti e ordinare le segnalazioni.
* I riepiloghi basati sull'intelligenza artificiale individuano indicazioni operative utilizzando OpenAI e Supabase Edge Functions.
Gli indicatori di presenza in tempo reale mostrano gli utenti attivi sulla piattaforma.
Ogni segnalazione di feedback ha una pagina dedicata alle discussioni, che consente ai team di collaborare e definire le priorità in modo efficiente.
Gli utenti possono allegare immagini ai feedback, archiviate in modo sicuro utilizzando le funzionalità di storage di Supabase.
L'obiettivo di questa sessione era creare un'app che consenta a sviluppatori, designer o consulenti di offrire servizi in abbonamento—un modello di business ispirato a piattaforme come DesignJoy.
L'autenticazione è stata la prima funzionalità implementata, definendo un framework solido per la gestione degli utenti. Il team ha sottolineato l'importanza di integrare l'autenticazione fin dall'inizio per evitare problemi quando l'app scala.
* Integrazione con Supabase per registrazioni, accessi e gestione dei profili utente.
* Sessioni utente persistenti per migliorare l'usabilità dell'app.
La sessione ha mostrato come integrare Stripe per la gestione degli abbonamenti:
* Consentire agli utenti di sottoscrivere diversi piani tariffari.
* Gestire lo stato degli abbonamenti, assicurandosi che solo gli utenti paganti accedano alle funzionalità premium.
* Dashboard specifiche per utente con bacheche di attività e funzionalità di drag-and-drop.
* Aggiornamenti delle attività in tempo reale per una collaborazione fluida.
La sessione si è conclusa con l'integrazione di un chatbot AI, illustrando come OpenAI possa aggiungere funzionalità dinamiche alle app. Questa funzionalità può essere estesa per fungere da assistente virtuale, concierge o interfaccia per le interrogazioni sui dati.
* Integrazione di OpenAI per fornire un chatbot in grado di rispondere in modo intelligente alle richieste degli utenti.
* Creato con un'unica istruzione, a dimostrazione dell'efficienza di Lovable.
Il team ha affrontato sfide di debugging in tempo reale, offrendo spunti preziosi per la risoluzione dei problemi. Le tecniche includevano:
* Uso dei registri della console e dei messaggi di errore per individuare i problemi.
* Ripristino di versioni precedenti dell'app per evitare di rimanere bloccati in stati non funzionanti.
* Guida dell'AI di Lovable con prompt dettagliati per garantire correzioni accurate.
In questo tutorial approfondiamo lo sviluppo di app basate sull'AI, la progettazione delle istruzioni (prompt engineering) e l'automazione dei flussi di lavoro con [Lovable](https://lovable.dev/) e l'ospite speciale [Mark Kashef](https://www.youtube.com/@Mark_Kashef)!
* Capire come scrivere istruzioni efficaci per l'AI
* I quattro livelli della progettazione delle istruzioni
* Tecniche di meta prompting e migliori pratiche
* Strategie di debug per i flussi di lavoro AI
* Creare un'app AI usando Lovable e Make.com
* Integrare Visual Edits e Tailwind CSS per il design dell'interfaccia utente
In questo tutorial creeremo una piattaforma di eventi in stile Luma utilizzando Lovable e [Supabase](https://docs.lovable.dev/integrations/supabase) – in diretta!
* Come integrare Supabase con Lovable
* Configurazione di autenticazione & gestione degli utenti
* Configurazione dei database & commenti in tempo reale
* Test delle prestazioni & gestione di più utenti
* Debug in tempo reale & ottimizzazione delle prestazioni
In questo tutorial ti mostreremo come usare Lovable, un builder no-code potenziato dall'IA, per creare un'app di journaling full-stack senza scrivere una sola riga di codice!
* Progetta all'istante la UI della tua app
* Carica il tuo design & genera un'app funzionante
* Collega Supabase per backend & autenticazione
* Implementa GPT-4o per funzionalità basate sull'IA
* Distribuisci un'app full-stack in pochi minuti!
In questo tutorial, ti mostreremo come creare un CRM semplice ma potente utilizzando [Lovable](/it/lovable-f9060f1e/lovable-f9060f1e/editor/main#build-a-simple-crm-with-resend) per lo sviluppo, Supabase per l'archiviazione dei dati e [Resend](https://docs.lovable.dev/integrations/resend) per l'automazione delle email.
* Come funziona Resend per l'automazione delle email
* Configurare le email di autenticazione con Supabase
* Creare una dashboard di amministrazione e un sistema di gestione dei contatti
* Creare e personalizzare i template di email
* Aggiungere la funzionalità di iscrizione alla newsletter e di invio di email broadcast
Creare esperienze web coinvolgenti e interattive è appena diventato più semplice grazie agli ultimi aggiornamenti di Lovable!
Una delle novità più importanti di Lovable è la possibilità di modificare all’istante gli elementi dell'interfaccia senza consumare crediti AI. Ora puoi:
* Modificare il testo direttamente nel tuo progetto.
* Regolare colori e stili dei pulsanti in tempo reale.
* Caricare e sostituire immagini in modo fluido.
* Passare il mouse sugli elementi per apportare rapide regolazioni.
Ora gli utenti possono selezionare il testo, cambiare i colori o sostituire le icone con facilità, senza bisogno dell'intervento dell'AI, rendendo il processo di iterazione del design più fluido.
In precedenza, gli utenti incontravano difficoltà nella gestione degli errori di integrazione con API di terze parti. Ora Lovable:
* Mostra messaggi di errore più dettagliati per semplificare il debug.
* Elimina i popup irrilevanti, migliorando la concentrazione sui problemi critici.
* Abilita il rilevamento degli errori tramite AI per correzioni automatiche.
Invece di sommergere gli utenti con popup generici, Lovable ora fornisce il contesto degli errori direttamente alla sua AI, che può decidere quando un problema deve essere affrontato e come risolverlo.
Lovable ora supporta l'integrazione fluida di elementi animati e interattivi utilizzando **p5.js** e altre librerie.
#### **Progetto di esempio: sito di un'agenzia di viaggi con bandiere interattive**
Una recente demo live ha mostrato come creare una landing page per un'agenzia di viaggi con:
1. **Una sezione hero animata** con bandiere che appaiono e si muovono dinamicamente in risposta alle interazioni con il mouse.
2. **Una sezione a scorrimento fisso (sticky-scroll)** che cambia in base alla posizione di scorrimento dell'utente.
3. **Effetti hover interattivi** in cui le immagini reagiscono ai movimenti dell'utente.
#### **Come implementare effetti animati**
Per creare questi effetti, gli utenti hanno seguito questo semplice processo:
* **Definisci l'animazione desiderata:**
Rendi lo sfondo interattivo con elementi fluttuanti che si allontanano quando ci passi sopra con il mouse.
* **Usa p5.js per generare gli effetti:**
* Implementa un pattern di fumo cromatico.
* Sostituisci le immagini statiche con animazioni dinamiche di bandiere.
* **Migliora l'esperienza utente con interazioni basate sulla fisica:**
* Fai muovere gli elementi in modo dinamico in base alle azioni dell'utente.
Se un'animazione non funziona, usa la Chat mode di Lovable per effettuare il debug e perfezionare l'effetto con la guida passo-passo dell'AI.
Con [**21st.dev**](), gli utenti possono ora integrare componenti UI predefiniti nei progetti Lovable in modo fluido.
1. Sfoglia **21st.dev** per trovare un design di pulsante.
2. Copia l'istruzione generata dall'AI.
3. Incollala in Lovable e sostituisci un pulsante esistente.
Questo approccio accelera i flussi di lavoro di design e consente interfacce più curate e visivamente coerenti.
Lo stesso metodo funziona per importare preset di animazione da **motion.dev**, rendendo più semplice aggiungere effetti di movimento di alta qualità senza codice personalizzato.
In questo tutorial ti mostreremo come creare un **CRM personalizzato** (Customer Relationship Management, ovvero un sistema di gestione delle relazioni con i clienti) utilizzando [**Lovable**](/it/lovable-f9060f1e/lovable-f9060f1e/editor/main#clerk-authentication-custom-domains-and-waitlists) e [**Clerk**](https://docs.lovable.dev/integrations/clerk).
In questo tutorial vedremo passo dopo passo come creare un **CRM personalizzato** (Customer Relationship Management, sistema di gestione delle relazioni con i clienti) utilizzando [**Lovable**](/it/lovable-f9060f1e/lovable-f9060f1e/editor/main#how-to-build-a-custom-crm-with-lovable-and-make) e [**Make**](https://docs.lovable.dev/integrations/make).
## Crea, definisci il brand e lancia un vero micro‑SaaS, in diretta!
Imparare lo spagnolo non è mai stato così interattivo! Immagina un'app che non solo ti insegna lo spagnolo attraverso conversazioni, ma crea anche interazioni vocali in tempo reale, corsi dinamici e contenuti visivi coinvolgenti—il tutto alimentato interamente dall'IA. Questo tutorial ti aiuta a seguire, passo dopo passo, ciò che Kristian e Harry hanno costruito:
Prima di implementare le funzionalità di IA, ci siamo concentrati sul **creare fondamenta solide** per l'app usando **Lovable**. Questo includeva la configurazione dell'autenticazione, la strutturazione della dashboard e l'implementazione della gestione utenti.
* Abbiamo integrato **Supabase** per l'autenticazione nel backend.
* Abbiamo abilitato la registrazione/accesso con email e password.
* Abbiamo creato un sistema di profili per memorizzare le preferenze degli utenti e i progressi nell'apprendimento.
* Abbiamo progettato una sidebar intuitiva per la navigazione.
* Abbiamo creato sezioni per chat, corsi e impostazioni utente.
* Abbiamo garantito un'interfaccia responsive per un'esperienza fluida su tutti i dispositivi.
* Abbiamo aggiunto una struttura di database per memorizzare i progressi degli utenti.
* Abbiamo progettato impostazioni di gestione del profilo in cui gli utenti possono regolare le preferenze di apprendimento.
Per rendere l'apprendimento interattivo, abbiamo implementato un sistema di generazione dei corsi basato sull'AI utilizzando il [modello GPT di OpenAI](). Ecco come funziona:
1. Gli utenti selezionano un argomento (ad es. "Domande da fare a un barbecue").
2. Lovable chiama una [funzione edge di OpenAI]() per generare **10 domande coinvolgenti in lingua spagnola**.
3. Gli utenti completano quiz, tracciano i progressi e ricevono feedback dall'AI sulle loro risposte.
* **Domande generate dinamicamente**: ogni quiz è generato dall'AI, garantendo contenuti sempre freschi e originali.
* **Feedback interattivo**: l'AI fornisce spiegazioni per le risposte corrette e sbagliate per migliorare l'apprendimento.
* **Monitoraggio dei progressi**: gli utenti possono salvare e rivedere i corsi, migliorando memorizzazione ed esercizio.
Per aggiungere un elemento visivo all'apprendimento, abbiamo integrato il modello di generazione di immagini [**Flux Schnell di Replicate**]():
* **Banner dei corsi generati automaticamente**: ogni corso genera dinamicamente un'immagine che corrisponde all'argomento.
* **Esperienza visiva immersiva**: i contenuti visivi guidati dall'AI aumentano il coinvolgimento e la memorizzazione degli utenti.
* **Elaborazione rapida delle immagini**: utilizzando l'API di Replicate, le immagini vengono generate in tempo reale senza rallentare l'esperienza.
Una pietra miliare nello sviluppo dell'app è stata l'aggiunta della **pratica di conversazione in spagnolo in tempo reale** tramite l'[API WebRTC in tempo reale di OpenAI]():
* **Tutor AI interattivo**: gli utenti possono parlare direttamente con un'AI che risponde dinamicamente in spagnolo.
* **Assistenza alla pronuncia**: l'AI fornisce correzioni e suggerimenti in tempo reale.
* **Conversazioni fluide**: il flusso naturale della conversazione dà la sensazione di interagire con un tutor umano.
Prima di occuparci del branding, abbiamo definito i nostri obiettivi principali:
* **Chat con AI** per conversazioni in spagnolo in tempo reale.
* **Quiz automatici** per sessioni di pratica rapide.
* **Apprendimento strutturato** con salvataggio delle lezioni e tracciamento dei progressi.
Questo ci ha aiutato a orientare le scelte di branding, assicurando che fossero allineate allo scopo dell’app.
Puntavamo a un nome breve e memorabile che riflettesse il **percorso di apprendimento**. Usando l’AI, abbiamo fatto brainstorming e siamo arrivati a **Ruta** (in spagnolo “percorso” o “strada”).
#### **Processo:**
* **Brainstorming di nomi** con l’AI per trovare parole spagnole accattivanti.
* **Test delle alternative** come "Camino" e "Verbo," ma "Ruta" spiccava.
* **Verifica della disponibilità del dominio** e registrazione immediata di **rutaapp.com**.
Abbiamo progettato rapidamente il brand:
* **Logo**: Un’icona a tema **bussola** presa da librerie di design e modificata in Figma.
* **Abbinamento dei font**: Un **font moderno e deciso** per il logo e un font UI leggibile per l’interfaccia dell’app.
* **Palette di colori**: Uno schema di blu **Tailwind CSS** per simboleggiare viaggio e scoperta.
* **Ispirazione stilistica**: Abbiamo sperimentato con il **neo-brutalismo**, regolando contrasto, ombre e bordi per creare un’interfaccia visivamente coinvolgente.
Usando Lovable, abbiamo garantito **coerenza visiva** in tutta l’app:
* **Landing page**: Generata con AI, con una sezione hero dinamica e coinvolgente.
* **Dashboard e pagine dei corsi**: Stilizzate in linea con l’identità del brand.
* **Stile iterativo**: Applicazione di elementi **neo-brutalisti** per testare diversi stili di design.
* **Test del flusso utente**: Abbiamo garantito una navigazione fluida dalla registrazione alla chat in tempo reale.
## Tutorial della community
Dai un'occhiata ai tutorial della Lovable Community [qui](https://www.youtube.com/playlist?list=PLbVHz4urQBZkJ6WMXlIGc3NGsufrleogY).