Lovable AI: una guida con progetto demo

Lovable è un servizio di text-to-app che permette a chiunque di creare applicazioni funzionanti senza competenze di programmazione. Possiamo descrivere le nostre idee tramite un'interfaccia di chat e la piattaforma trasforma queste descrizioni in un'app reale e funzionante.

In questo tutorial ti mostrerò come usare Lovable costruendo qualcosa di pratico: ti guiderò passo dopo passo nella creazione e pubblicazione di una semplice ma completa app mobile di to-do list con persistenza dei dati, autenticazione utente, promemoria via email e abbonamenti a pagamento.

Alla fine parlerò anche di alcune limitazioni di Lovable, tra cui problemi di sicurezza, la possibile mancanza di velocità per gli sviluppatori che hanno già i propri strumenti e librerie, e le difficoltà che i non programmatori possono incontrare durante il debugging.

Che cos'è Lovable AI?

Grazie all'IA, Lovable ci permette di trasformare le nostre idee in applicazioni pienamente funzionanti semplicemente descrivendole. Questo significa che possiamo aggirare facilmente le complessità della programmazione tradizionale, rendendo la creazione di app accessibile ed efficiente sia per i non sviluppatori sia per gli sviluppatori che cercano un modo più rapido per creare prototipi.

Lovable usa React e Vite per il frontend. React è una popolare libreria JavaScript per creare interfacce utente, nota per la sua flessibilità ed efficienza. Vite, invece, è uno strumento di build che offre un'esperienza di sviluppo più veloce e snella. Questi framework facilitano la creazione della nostra app gestendo la logica UI complessa, garantendo che le applicazioni non siano solo funzionali, ma anche reattive e fluide.

Per il backend, Lovable utilizza Supabase, un'alternativa open-source alle soluzioni backend tradizionali. Supabase è essenzialmente un insieme di strumenti che creano un sistema backend, inclusi database, autenticazione e funzioni cloud. Lavora insieme alla nostra app per gestire i dati e abilitare funzionalità in tempo reale.

Lovable non ci consente di modificare direttamente nell'interfaccia il codice che produce. Tuttavia, possiamo collegare il codice della nostra app a un repository GitHub. Questa connessione significa che qualsiasi modifica apportata su GitHub si riflette direttamente nell'app, consentendo sviluppo collaborativo e controllo di versione.

Questa configurazione combina la semplicità di un'interfaccia no-code con la flessibilità e il controllo offerti da GitHub. Tuttavia, spesso mi sarebbe piaciuto poter modificare il codice direttamente per piccoli cambiamenti.

Costruire il tuo primo progetto con Lovable

Per iniziare

Per iniziare con Lovable, dobbiamo prima andare sul loro sito e creare un account gratuito.

Una volta creato l'account gratuito, potremo inviare cinque messaggi al giorno all'assistente IA della piattaforma. È una bella sfida vedere quanto si riesce a fare entro questi limiti.

Nel primo messaggio forniamo una breve descrizione del nostro progetto. 

Nota che la mia descrizione è piuttosto breve. Ho provato anche a dare una descrizione molto dettagliata nel primo messaggio con tutte le funzionalità, ma non ha funzionato bene perché la maggior parte di quelle funzionalità richiede un backend. Quando il progetto viene creato inizialmente, non è connesso automaticamente a Supabase, quindi il prompt fallirà.

Questo è il risultato ottenuto con questo prompt:

L'app era già piuttosto funzionale a questo punto. Era in grado di creare, eliminare e segnare come completati gli elementi nella to-do list. Con mia sorpresa, i dati rimanevano anche ricaricando l'app!

Lovable ha usato il local storage, che salva i dati in un database locale del browser. Questo metodo ha il vantaggio di non richiedere una connessione Internet, ma lo svantaggio di non condividere i dati tra dispositivi.

Vediamo come sostituirlo con un database backend collegando il nostro progetto a Supabase.

Connessione a Supabase

Supabase è una piattaforma open-source che fornisce un'infrastruttura backend per le nostre applicazioni. Offre una serie di servizi, tra cui database, autenticazione e API, rendendolo una soluzione completa per la gestione dei dati dell'app. 

Quando si crea, ad esempio, un'app di to-do list, Supabase diventa essenziale se vogliamo che i dati dell'app persistano su più dispositivi e utenti. A differenza del local storage, che salva i dati solo nel browser di un singolo dispositivo, Supabase ci permette di archiviare i dati nel cloud. Ciò significa che gli utenti possono accedere alle loro liste da qualsiasi dispositivo e vedere gli aggiornamenti in tempo reale.

Inoltre, i servizi di autenticazione di Supabase ci aiutano a gestire registrazioni e accessi, garantendo che i dati di ciascun utente restino sicuri e privati. Collegando la nostra app a Supabase, sblocchiamo tutto il suo potenziale.

Uno dei vantaggi di usare Supabase per costruire le nostre applicazioni è la sua natura open-source. Essere open-source significa che Supabase non ci vincola a un provider cloud specifico, offrendo maggiore flessibilità nella gestione del backend della nostra app. Sebbene possiamo utilizzare i servizi gestiti di Supabase per comodità, abbiamo anche la libertà di auto-ospitare le nostre applicazioni usando Docker se lo preferiamo. Questa flessibilità ci permette di scegliere l'ambiente di hosting più adatto alle nostre esigenze, che si tratti di costi, prestazioni o requisiti di conformità.

Per collegare il nostro progetto a Supabase, seguiamo questi passaggi:

1. Clicca il pulsante Supabase nell'angolo in alto a destra.

2. Apparirà un pop-up che ci chiederà di iscriverci a Supabase.

3. Dopo l'iscrizione, clicchiamo di nuovo il pulsante Supabase per autorizzare Lovable ad accedere al nostro account. Ci verrà chiesto di creare un'organizzazione.

4. Una volta creata l'organizzazione, possiamo selezionarla e autorizzare Lovable ad accedere al nostro account Supabase tramite quell'organizzazione.

5. Clicca di nuovo il pulsante Supabase e crea un progetto. Verremo reindirizzati al sito di Supabase, dove potremo configurare il progetto.

6. Infine, torna sul sito di Lovable e clicca per l'ultima volta il pulsante Supabase. Quindi seleziona il progetto appena creato. Questo chiederà all'IA di aggiornare il codice per connettersi a quel progetto.

Ecco fatto, ora la nostra app ha un backend!

Come detto sopra, è meglio collegare il progetto a Supabase prima di chiedere a Lovable di implementare funzionalità che richiedono un backend, perché sembra non gradire scrivere il codice prima della connessione. Nota che non è proprio così che lavorano gli ingegneri: quelli frontend possono scrivere il codice anche senza che il backend sia già implementato.

Aggiungere l'autenticazione utente

Con la nostra app collegata a un progetto Supabase, possiamo ora chiedere a Lovable di aggiungere l'autenticazione utente.

Per prima cosa, l'IA creerà le tabelle del database per la nostra applicazione. Una volta fatto, dobbiamo approvare manualmente cliccando il pulsante "Apply Changes" nella finestra della chat.

Non sempre ci verrà chiesto di accettare le modifiche dell'IA, ma in alcuni casi è necessario perché alcune modifiche (come gli aggiornamenti al database) possono influenzare l'app in produzione anche senza pubblicarla.

Dopo l'aggiornamento del database, inizierà ad aggiornare il codice per autenticare gli utenti e salvare gli aggiornamenti della to-do nel database.

Tuttavia, questa volta compare un errore: "Build unsuccessful". Quando succede, possiamo vedere l'errore e usare il pulsante "Try to fix it" in alto per provare a risolvere automaticamente il problema.

In questo caso, cliccare il pulsante ha risolto il problema e l'app è ora pienamente funzionante con autenticazione utente e salvataggio dei dati nel database: se usiamo l'app su più dispositivi, possiamo comunque accedere alla nostra to-do list.

Pubblicare l'app

Per pubblicare l'app, possiamo usare il pulsante "Publish" in alto a destra.

Una volta pubblicata, possiamo accedervi tramite il link fornito in fondo al menu.

È accessibile pubblicamente online e consente a chiunque di usare l'app. Possiamo anche impostare un dominio personalizzato se ne abbiamo uno.

Nota che dobbiamo cliccare il pulsante “Redeploy” ogni volta che apportiamo modifiche all'app. Altrimenti, tali modifiche saranno visibili solo nell'interfaccia di Lovable e non agli utenti che usano l'app tramite l'URL.

Funzionalità avanzate in Lovable

Connessione a GitHub

Lovable non ci permette di modificare direttamente il codice: consente solo di visualizzare il codice e le modifiche che apporta.

Per poter modificare il codice, dobbiamo collegare il progetto a GitHub, una piattaforma ampiamente usata per ospitare e collaborare su progetti di codice con controllo di versione. Ciò consente a più utenti di contribuire, rivedere e gestire le modifiche in modo efficiente.

Per connettersi a GitHub:

1. Accedi al tuo account GitHub e crea un'organizzazione gratuita.

2. In Lovable, clicca il pulsante "Edit Code" in alto a destra.

3. Poi clicca "Connect to GitHub".

4. Seleziona l'organizzazione creata al primo passaggio.

Con GitHub collegato, il codice rimarrà sincronizzato con il repository. Questo significa che possiamo usare strumenti come VSCode per lavorare localmente sul progetto. Nota che Lovable impiega un po' di tempo per recuperare le modifiche dopo il push sul repository.

Ricorda che l'app non viene ridistribuita automaticamente. Per vedere le modifiche nell'app, dobbiamo pubblicarla di nuovo.

Funzioni cloud

Quanto abbiamo visto finora ci permette di creare un'app in grado di mantenere un database online e un'interfaccia utente frontend per creare, leggere, aggiornare ed eliminare quei dati, spesso nota come applicazione CRUD.

Cloud functions offrono un modo potente per aggiungere logica personalizzata e operazioni complesse alle nostre applicazioni senza dover gestire server fisici. Consentono di eseguire codice backend in risposta a eventi come modifiche al database, richieste HTTP o altri trigger. Questo è particolarmente utile per attività come inviare notifiche email, elaborare dati o eseguire job pianificati.

Utilizzando le funzioni cloud, otteniamo la flessibilità di gestire in modo efficiente funzionalità articolate e di scalarle secondo necessità, garantendo al contempo un'esperienza utente fluida e reattiva. In sostanza, permettono di estendere le capacità delle nostre app oltre la semplice gestione dei dati, rendendole più dinamiche e utili.

Un ottimo esempio di uso di una funzione cloud in un'app di to-do list è l'invio di promemoria via email per le attività in scadenza. Diciamo che vogliamo ricordare agli utenti le attività imminenti: potremmo scrivere una funzione cloud che controlla il database per le scadenze in avvicinamento e invia automaticamente un promemoria via email all'utente.

Possiamo chiedere a Lovable di implementarlo per noi:

Alcune funzioni richiedono l'accesso ad API esterne che necessitano di una chiave API. In questo caso, la soluzione implementata usa la Resend API, quindi Lovable ha chiesto la chiave API per completare la configurazione del servizio. 

Aggiungere abbonamenti con Stripe

Ha poco senso creare un'app se gli utenti non possono abbonarsi. Chiediamo a Lovable di implementare gli abbonamenti nell'app usando Stripe.

Possiamo usare il seguente prompt:

Mi ha chiesto di fornire la mia chiave Stripe, come nell'esempio precedente. Possiamo ottenere questa chiave dal nostro account Stripe.

Infine, ha segnalato che mancava l'ID del prezzo dell'abbonamento. Per questo, possiamo tornare su Stripe, creare un prodotto in abbonamento e copiare l'ID del prezzo. Poiché Lovable non aveva un pulsante per richiedere l'ID del prezzo come per la chiave API, possiamo fornirlo in chat:

Per completare l'implementazione, possiamo chiedere di consentire la creazione di to-do solo agli utenti abbonati e pubblicare la versione aggiornata dell'app.

È andato tutto a buon fine al primo tentativo!

Creare un'app mobile installabile

L'app creata da Lovable non è una progressive web app (PWA) di default. È solo un sito web e questo significa che non possiamo installarla su un dispositivo mobile e usarla come una vera app, invece che come sito.

Tuttavia, è molto facile da sistemare con un solo prompt:

Con queste modifiche, se apriamo il link dell'app sul nostro dispositivo mobile, possiamo installarla e usarla come se fosse un'app installata nativamente.

Limitazioni di Lovable

Nonostante il potenziale di Lovable, è importante considerarne le limitazioni.

Preoccupazioni sulla sicurezza

Sebbene Lovable offra un modo invitante per creare app senza codice, solleva dubbi sulla sicurezza delle app, soprattutto per chi non ha esperienza di programmazione. Come possono gli utenti essere certi che il database della loro app abbia le misure di sicurezza necessarie per prevenire accessi non autorizzati, ad esempio che un utente aggiunga attività alla lista di un altro?

Questo aspetto cruciale non è stato menzionato nei prompt durante la creazione dell'app, lasciando potenziali vulnerabilità inesplorate. Gli utenti senza competenze tecniche potrebbero trovare difficile valutare e gestire queste problematiche di sicurezza.

Lovable è davvero più veloce per gli sviluppatori?

Per gli sviluppatori che hanno già il proprio set di strumenti e librerie di codice, la domanda è: Lovable è davvero più veloce?

Molti sviluppatori hanno affinato la propria pratica creando una libreria interna di snippet e moduli di codice di cui si fidano e che conoscono bene, spesso comprendenti funzionalità come pagamenti, autenticazione e operazioni CRUD. Queste soluzioni sono adattate al loro stile e alle loro preferenze tecnologiche.

Lovable potrebbe non offrire lo stesso livello di controllo sulle tecnologie utilizzate, il che può essere uno svantaggio per chi è abituato a sistemi e flussi di lavoro specifici. Sebbene la piattaforma offra un modo semplice per prototipare rapidamente, gli sviluppatori potrebbero trovare più efficiente restare con i propri strumenti e metodi, soprattutto considerando l'integrazione senza attriti e la familiarità che offrono.

Debugging per non programmatori

Sebbene Lovable renda estremamente semplice creare app senza codice, rimane una preoccupazione significativa su come i non programmatori possano gestire le situazioni in cui le soluzioni automatiche non bastano e serve un intervento manuale. Cosa succede quando la piattaforma incontra un problema che non può risolvere automaticamente? Chi affronta questi colli di bottiglia quando gli utenti previsti non hanno competenze di coding?

Senza la possibilità di entrare nel codice, un non programmatore potrebbe sentirsi bloccato e incerto sui passi successivi. Questa dipendenza può portare a progetti fermi e frustrazione, richiedendo potenzialmente di assumere un programmatore o cercare aiuto esterno, con costi e ritardi aggiuntivi.

Conclusione

In definitiva, sebbene Lovable renda lo sviluppo di app accessibile, il suo successo per i non programmatori dipende in gran parte da come supporta gli utenti quando le cose si fanno complesse oltre il semplice prompting.

Credo che Lovable mantenga davvero la promessa di rendere lo sviluppo di app accessibile a tutti. Nonostante il limite di cinque prompt al giorno, possiamo comunque creare efficacemente un'app funzionante.

La piattaforma dimostra una forte capacità di gestire flussi di lavoro più complessi, permettendoci di effettuare personalizzazioni dettagliate. Questo significa che, anche con interazioni limitate, possiamo trasformare idee creative in applicazioni funzionanti.