Lovable: dall'idea al progetto

In questa lezione ci muoveremo insieme dentro Lovable.dev per trasformare un’idea grezza in un progetto concreto. Dopo aver creato il nostro account e scelto il piano che più ci si addice, ci troviamo ora davanti alla dashboard della piattaforma, dove possiamo finalmente cominciare a generare codice.

Per prima cosa cominceremo a familiarizzare con l’interfaccia, esplorando i vari pulsanti e strumenti che Lovable.dev ci mette a disposizione, come la possibilità di visualizzare la cronologia delle modifiche, nascondere la sidebar per concentrarci meglio, ricaricare la pagina per aggiornare i contenuti, oppure aprire l’anteprima in una nuova scheda per vedere in tempo reale il nostro lavoro.

Scopriremo anche funzionalità avanzate, come il mobile preview per testare il design su dispositivi mobili, il code viewer per mettere mano direttamente al codice e, soprattutto, l’integrazione con Supabase.

Creare un nuovo progetto con Lovable

Lovable.dev non è semplicemente un editor o un generatore di codice. È una vera e propria piattaforma capace, grazie all'uso dell'intelligenza artificiale, di fare in modo che le nostre idee possano prendere forma senza avere particolari nozioni tecniche di programmazione. Il primo passo, naturalmente, è quello di creare un nuovo progetto. Non appena entriamo nella dashboard, ci viene data la possibilità di scrivere qualche prompt.

Quando scriveremo all'interno della console di Lovable, questo sarà considerato un nuovo progetto. In pratica, quello che dovremmo fare è semplicemente descrivere brevemente l'applicazione che desideriamo creare. Ad esempio:

Crea un'app per monitorare le ricette, dove gli utenti possono registrarsi, salvare e categorizzare le proprie ricette con immagini e dettagli.

Andando su Lovable, verso metà della pagina è presente un pulsante "+ Create Project". Benchè ci venga naturale cliccarci per creare un nuovo progetto, quello che questo pulsante fa non è nient'altro che riportarci alla console di Lovable ad inizio pagina. Questo a dimostrazione del fatto che quando diamo vita a un prompt, questo viene considerato dalla piattaforma come un vero e proprio nuovo progetto. Per provare, possiamo pure cliccarci.

Come progetto d'esempio, possiamo provare a creare una calcolatrice in Python, quindi, possiamo scrivere come prompt qualcosa del tipo:

Creami in Python un'app di calcolatrice.

Una volta cliccato invio, la piattaforma ci porterà nell'editor vero e proprio, come mostrato nella figura in basso:

La prima cosa che possiamo notare è la risposta di Lovable in alto a sinistra, ovvero:

Ti creerò una bellissima app calcolatrice web utilizzando React e TypeScript! Questa calcolatrice avrà un design moderno e pulito, ispirato alle calcolatrici di iOS e alle app finanziarie moderne.

Ciò dipende dal fatto che Lovable.dev è pensato principalmente per costruire applicazioni web, non script o app puramente backend. Quando gli chiediamo:

Creami una calcolatrice Python.

l’intelligenza integrata interpreta:

calcolatrice = interfaccia per l'utente + esperienza moderna

Quindi ci propone subito una web app in grado di poter essere eseguita nel browser, con un’interfaccia visiva gradevole, moderna e interattiva.

Caratteristiche principali dell'editor

In alto, vediamo una barra nera che contiene i comandi principali. Qui possiamo sempre leggere il nome del nostro progetto: nel nostro caso, per esempio, si chiama “gelato-math-wizard”. Il nome del progetto può essere cambiato cliccando su di esso e poi su "Rename project", come visibile nella figura in basso:

Gli altri pulsanti dell'editor che meritano di essere conosciuti sono i seguenti:

• View History: possiamo vedere la cronologia delle modifiche effettuate, così da tenere traccia di tutto quello che abbiamo cambiato nel progetto.
• Hide Sidebar: possiamo nascondere la barra laterale per avere più spazio di lavoro e concentrarci meglio sul contenuto principale.
• Refresh Page: possiamo aggiornare la pagina per assicurarci di vedere sempre la versione più recente del nostro lavoro.
• Open Preview in New Tab: possiamo aprire l’anteprima del progetto in una nuova scheda, così da confrontare il risultato senza perdere il nostro spazio di lavoro.
• Show Mobile Preview: possiamo visualizzare come appare il progetto su dispositivi mobili, per assicurarci che sia perfetto anche su smartphone e tablet.
• Code Viewer: possiamo vedere il codice sorgente del progetto, così da poterlo modificare o semplicemente analizzare. Quando entriamo nel Code Viewer di Lovable.dev, potremmo notare in alto un avviso: “Read Only. To use the code editor, upgrade to a paid plan.”. Questo significa che, se stiamo usando un piano gratuito, possiamo visualizzare il codice ma non modificarlo direttamente. Per sbloccare tutte le funzionalità dell’editor, come scrivere, modificare e salvare codice personalizzato, sarà necessario effettuare l’upgrade a un piano a pagamento.
• Manage Supabase: possiamo gestire l’integrazione con Supabase, controllando il database e tutte le funzionalità legate ai dati.

Supabase

Come avremo visto trai i pulsanti presenti nell'editor di Lovable.dev, è presente un pulsante che riporta il nome di Supabase. Supabase è una piattaforma open source che ci offre una serie di strumenti per costruire applicazioni web e mobile in modo semplice e veloce, con funzionalità simili a quelle di Firebase ma basata su un database PostgreSQL. Ci mette a disposizione:

• Database PostgreSQL già pronto all’uso.
• Autenticazione per gestire utenti e permessi.
• Storage per file e media.
• Realtime per aggiornamenti istantanei.
• API pronte per interagire con i dati senza creare backend complessi.

La cosa interessante è che Supabase può essere integrato direttamente in Lovable.dev. Questo significa che mentre sviluppiamo il nostro progetto su Lovable possiamo facilmente collegarlo a Supabase per gestire dati, utenti, e file senza uscire dall’editor. In questo modo, Lovable diventa ancora più potente perché ci permette di creare applicazioni dinamiche e scalabili con il supporto completo di un backend moderno, tutto in un unico ambiente.

Conclusioni

Concludiamo questa lezione con una consapevolezza importante: il passaggio dall’idea al progetto non è un momento unico e isolato ma un processo continuo. Lovable ci permette di tornare indietro, rivedere le scelte fatte, ristrutturare parti del progetto e adattarci a nuove esigenze man mano che emergono. La flessibilità è una delle sue qualità principali e imparare a sfruttarla al meglio farà la differenza nel nostro percorso.

Nella prossima lezione ci addentreremo nel mondo del prompt engineering e della personalizzazione, per capire come dare istruzioni sempre più precise all’intelligenza artificiale e ottenere risultati che rispecchino davvero la nostra visione.