Video tutorial

Dai un’occhiata a questi video per una panoramica completa su come creare un’app con Lovable.

​

Benvenuti in Lovable

Lovable 101

1. Primi passi con le basi di Lovable
2. Comprendere l'interfaccia e i controlli
3. Utilizzare le funzionalità di modifica e la cronologia delle versioni
4. Implementare l'autenticazione e la gestione degli utenti
5. Utilizzare i database Supabase e le funzioni edge
6. Integrazione GitHub e gestione del codice
7. Condividere i progetti e il feedback della community
8. Esplorare risorse e modelli aggiuntivi

​

Tutorial di Lovable

Crea una web app per il monitoraggio delle calorie con l’IA

In questo tutorial ti guideremo nella creazione di un’app di monitoraggio delle calorie basata su AI con Lovable, completa di autenticazione, un design responsive accattivante, integrazione con OpenAI e distribuzione in produzione.

1. Impostare le fondamenta

   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.

2. Progettare l’interfaccia utente

   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.

3. Integra Supabase per il backend e l'autenticazione

   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.

4. Integrare OpenAI per l’analisi dei pasti

   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”.
5. Implementazione dei pagamenti con Stripe

   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.
6. Test e debug

   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.

7. Distribuzione della tua app

   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.

Crea una landing page SaaS con l'API di Groq

In questo tutorial ti mostreremo come creare una landing page straordinaria e completamente interattiva per un assistente email basato sull’intelligenza artificiale utilizzando Lovable, 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

Crea uno strumento per il feedback

La sessione ha messo in mostra le capacità di Lovable di iterare rapidamente e offrire risultati pronti per la produzione.

1. Authentication

   • Gli utenti possono registrarsi, accedere e gestire i propri profili utilizzando l’integrazione con Supabase.
   • Le sessioni utente sicure consentono esperienze personalizzate.
2. Feedback Submission and Voting

   • 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.
3. Admin Dashboard with AI Summaries

   • 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.
4. User Presence Tracking

   Gli indicatori di presenza in tempo reale mostrano gli utenti attivi sulla piattaforma.

5. Detailed Feedback Pages with Comments

   Ogni segnalazione di feedback ha una pagina dedicata alle discussioni, che consente ai team di collaborare e definire le priorità in modo efficiente.

6. File Attachments

   Gli utenti possono allegare immagini ai feedback, archiviate in modo sicuro utilizzando le funzionalità di storage di Supabase.

Crea un'agenzia di sviluppo con servizi standardizzati

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.

1. Authentication and User Management

   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.
2. Stripe Subscription Integration

   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.
3. Dashboard and Task Management

   • Dashboard specifiche per utente con bacheche di attività e funzionalità di drag-and-drop.
   • Aggiornamenti delle attività in tempo reale per una collaborazione fluida.
4. AI Chatbot

   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.
5. Iterative Debugging and Refinement

   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.

Consigli su come dare istruzioni a Lovable

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 e l’ospite speciale ‪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

Crea un clone di Luma con Supabase e Lovable

In questo tutorial creeremo una piattaforma di eventi in stile Luma utilizzando Lovable e 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

Crea un'app web potenziata dall'IA

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!

Crea un semplice CRM con Resend

In questo tutorial, ti mostreremo come creare un CRM semplice ma potente utilizzando Lovable per lo sviluppo, Supabase per l’archiviazione dei dati e 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

Crea elementi interattivi per lo sviluppo web

Creare esperienze web coinvolgenti e interattive è appena diventato più semplice grazie agli ultimi aggiornamenti di Lovable!

1. Personalizzazione dell'interfaccia utente senza sforzo con modifiche visive

   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.

2. Debug avanzato e gestione degli errori API

   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.

3. Creare sfondi dinamici e animazioni

   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.

4. Importare elementi personalizzati da librerie esterne

   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.

Autenticazione Clerk, domini personalizzati e liste d’attesa

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 e Clerk.

Come creare un CRM personalizzato con Lovable e Make

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 e Make.

Creare una landing page da 10.000 $ in un'ora

​

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:

Passaggio 1: Progettazione delle funzionalità principali

1. Gettare le fondamenta

   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.

2. Sistema di autenticazione

   • 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.
3. Dashboard e navigazione

   • 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.
4. Profili utente e archiviazione dei dati

   • 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.

Passaggio 2: Funzionalità di apprendimento basate sull’IA con Replicate

1. Corsi generati dall'AI

   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.
2. Aumentare il coinvolgimento degli utenti

   • 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.
3. Aumentare il coinvolgimento visivo con Replicate

   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.
4. Conversazioni vocali in tempo reale

   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.

Passaggio 3: Branding dell’app

1. Definire il concetto e il pubblico

   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.

2. Scelta del nome e del dominio

   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.
3. Creare un’identità visiva

   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.
4. Costruire un’esperienza utente coerente

   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.

Passaggio 4: Ultimi ritocchi, grandi scommesse e lancio in produzione

​

Tutorial della community

Dai un’occhiata ai tutorial della Lovable Community qui.