Lovable AI: een gids met demoproject

Lovable is een tekst-naar-app-service waarmee iedereen functionele applicaties kan maken zonder programmeerkennis. We kunnen onze app-ideeën beschrijven via een chatinterface, en het platform zet deze beschrijvingen om in een echte, werkende applicatie.

In deze tutorial laat ik je zien hoe je Lovable gebruikt door iets praktisch te bouwen—ik neem je stap voor stap mee door het bouwen en publiceren van een eenvoudige maar complete to-do-lijst mobiele app met datapersistentie, gebruikersauthenticatie, e-mailherinneringen en betaalde abonnementen.

Aan het eind bespreek ik ook enkele beperkingen van Lovable, waaronder beveiligingszorgen, het mogelijke gebrek aan snelheid voor ontwikkelaars die al hun eigen tools en libraries hebben, en de uitdagingen die niet-programmeurs kunnen tegenkomen bij het debuggen.

Wat is Lovable AI?

Met AI stelt Lovable ons in staat om onze ideeën om te zetten in volledig functionele applicaties door ze te beschrijven. Dit betekent dat we de complexiteit van traditioneel coderen eenvoudig kunnen omzeilen, waardoor appcreatie zowel toegankelijk als efficiënt wordt voor niet-ontwikkelaars én voor ontwikkelaars die sneller willen prototypen.

Lovable gebruikt React en Vite voor de frontend. React is een populaire JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces, bekend om zijn flexibiliteit en efficiëntie. Vite is een buildtool die een snellere en slankere ontwikkelervaring biedt. Deze frameworks vergemakkelijken onze appcreatie door complexe UI-logica af te handelen, zodat onze applicaties niet alleen functioneel zijn, maar ook responsief en soepel draaien.

Voor de backend gebruikt Lovable Supabase, een opensource-alternatief voor traditionele backendoplossingen. Supabase is in essentie een verzameling tools die een backendsysteem vormen, inclusief databasestorage, authenticatie en cloudfuncties. Het werkt samen met onze app om data te beheren en realtimefunctionaliteit mogelijk te maken.

Lovable laat ons de code die het produceert niet direct in de interface bewerken. We kunnen de code van onze app echter wel koppelen aan een GitHub-repository. Deze koppeling betekent dat wijzigingen in de code op GitHub direct worden weerspiegeld in de app, wat samenwerking en versiebeheer mogelijk maakt.

Deze opzet combineert het gemak van een no-code-interface met de flexibiliteit en controle die GitHub biedt. Toch betrapte ik mezelf er vaak op dat ik de code graag direct had willen bewerken voor kleine aanpassingen.

Je eerste project bouwen met Lovable

Aan de slag

Om aan de slag te gaan met Lovable, gaan we eerst naar hun website en maken we een gratis account aan.

Zodra we ons gratis account hebben ingesteld, kunnen we dagelijks vijf berichten sturen naar de AI-assistent van het platform. Het is een leuke uitdaging om te zien hoe ver we binnen deze beperkingen komen.

In het eerste bericht geven we een korte beschrijving van ons project. 

Let op dat mijn beschrijving vrij kort is. Ik heb ook geprobeerd een zeer gedetailleerde beschrijving te geven in het eerste bericht met alle functionaliteit, maar dat werkte niet goed omdat het meeste daarvan een backend vereist. Wanneer het project aanvankelijk wordt aangemaakt, is het niet automatisch verbonden met Supabase, waardoor de prompt mislukt.

Dit is het resultaat dat we met deze prompt kregen:

De app was in deze fase al behoorlijk functioneel. Hij kon items aanmaken, verwijderen en markeren als voltooid in de to-do-lijst. Tot mijn verbazing bleven de gegevens behouden wanneer de app werd ververst!

Lovable deed dit met local storage, waarbij de data wordt opgeslagen in een lokale browserdatabase. Dit heeft als voordeel dat er geen internetverbinding nodig is, maar als nadeel dat gegevens niet tussen apparaten worden gedeeld.

Laten we kijken hoe we dit vervangen door een backenddatabase door ons project te verbinden met Supabase.

Verbinding maken met Supabase

Supabase is een opensourceplatform dat een backendinfrastructuur voor onze applicaties biedt. Het levert een reeks diensten, waaronder databasestorage, authenticatie en API’s, waardoor het een complete oplossing is voor databeheer in apps. 

Bij het bouwen van een to-do-lijst-app wordt Supabase bijvoorbeeld essentieel als we willen dat de data van onze app behouden blijft over meerdere apparaten en gebruikers. In tegenstelling tot local storage, dat data alleen in de browser van één apparaat opslaat, kunnen we met Supabase data in de cloud opslaan. Dit betekent dat gebruikers hun to-do-lijsten vanaf elk apparaat kunnen openen en updates in realtime zien.

Bovendien helpen de authenticatiediensten van Supabase ons bij het beheren van aanmeldingen en logins, zodat de data van elke gebruiker veilig en privé blijft. Door onze app te verbinden met Supabase, ontsluiten we het volledige potentieel van onze applicatie.

Een van de voordelen van Supabase is het opensourcekarakter. Opensource betekent dat Supabase ons niet vastpint op een specifieke cloudprovider, wat meer flexibiliteit geeft in hoe we de backend van onze app beheren. Hoewel we voor het gemak de gehoste diensten van Supabase kunnen gebruiken, hebben we ook de vrijheid om onze applicaties zelf te hosten met Docker als we dat willen. Deze flexibiliteit maakt het mogelijk de hostomgeving te kiezen die het beste bij onze behoeften past, of dat nu om kostenefficiëntie, prestaties of compliance draait.

Om ons project met Supabase te verbinden, volgen we deze stappen:

1. Klik op de Supabase-knop rechtsboven.

2. Er verschijnt een pop-up die ons vraagt om ons aan te melden bij Supabase.

3. Na het aanmelden klikken we opnieuw op de Supabase-knop om Lovable te autoriseren toegang te krijgen tot ons account. We worden gevraagd een organisatie te maken.

4. Zodra de organisatie is aangemaakt, kunnen we deze selecteren en Lovable autoriseren om via die organisatie toegang te krijgen tot ons Supabase-account.

5. Klik opnieuw op de Supabase-knop en maak een project aan. Dit brengt ons naar de Supabase-website, waar we het project kunnen configureren.

6. Ga ten slotte terug naar de Lovable-website en klik nog één keer op de Supabase-knop. Selecteer vervolgens het project dat we zojuist hebben aangemaakt. Dit zorgt ervoor dat de AI de code bijwerkt om verbinding te maken met dat project.

Dat is alles, onze app heeft nu een backend!

Zoals hierboven vermeld, is het beter om eerst met Supabase te verbinden voordat je Lovable vraagt om functionaliteit te implementeren die een backend vereist, omdat het lijkt alsof het niet graag code schrijft voordat de verbinding er is. Merk op dat dit niet is hoe engineers werken—frontend engineers kunnen de frontendcode schrijven zonder dat de backend is geïmplementeerd.

Gebruikersauthenticatie toevoegen

Nu onze app verbonden is met een Supabase-project, kunnen we Lovable vragen om gebruikersauthenticatie toe te voegen.

Eerst maakt de AI de databasetabellen voor onze applicatie. Zodra dit klaar is, moeten we dit handmatig goedkeuren door op de knop "Wijzigingen toepassen" in het chatvenster te klikken.

We worden niet altijd gevraagd om de wijzigingen van de AI te accepteren, maar in sommige gevallen is dit nodig omdat bepaalde wijzigingen (zoals database-updates) de app in productie kunnen beïnvloeden, zelfs zonder publicatie.

Na het bijwerken van de database wordt de code aangepast om gebruikers te authenticeren en to-do-updates in de database op te slaan.

Deze keer loopt het echter tegen een fout aan: "Build unsuccessful". Als dit gebeurt, kunnen we de foutmelding bekijken en met de knop "Try to fix it" bovenaan proberen het probleem automatisch te verhelpen.

In dit geval loste het klikken op de knop het probleem op en is de app nu volledig functioneel met gebruikersauthenticatie en datastorage in de database, zodat we onze to-do-lijst op meerdere apparaten kunnen blijven gebruiken.

De app publiceren

Om de app te publiceren, kunnen we de knop "Publish" rechtsboven gebruiken.

Na publicatie kunnen we ernaartoe via de link onderaan het menu.

Dit is openbaar online toegankelijk en laat iedereen de app gebruiken. We kunnen ook een eigen domein instellen als we dat hebben.

Let op dat we op de knop “Redeploy” moeten klikken wanneer we wijzigingen aanbrengen in de app. Anders zijn die wijzigingen alleen zichtbaar in de Lovable-interface en niet voor gebruikers die de app via de URL openen.

Geavanceerde mogelijkheden in Lovable

Verbinden met GitHub

Lovable laat ons geen directe wijzigingen in de code aanbrengen; we kunnen alleen de code en de aangebrachte wijzigingen bekijken.

Om de code te kunnen wijzigen, moeten we het project verbinden met GitHub, een veelgebruikt platform voor het hosten van en samenwerken aan codeprojecten met versiebeheer. Dit stelt meerdere gebruikers in staat om efficiënt bij te dragen, te beoordelen en wijzigingen te beheren.

Zo verbind je met GitHub:

1. Log in op je GitHub-account en maak een gratis organisatie aan.

2. Klik in Lovable op de knop "Edit Code" rechtsboven.

3. Klik vervolgens op "Connect to GitHub".

4. Selecteer de organisatie die we in de eerste stap hebben aangemaakt.

Met GitHub verbonden blijft de code gesynchroniseerd met de GitHub-repository. Dit betekent dat we tools zoals VSCode kunnen gebruiken om lokaal aan ons project te werken. Houd er rekening mee dat het even duurt voordat Lovable de wijzigingen ophaalt nadat ze naar de repository zijn gepusht.

Vergeet niet dat de app zelf niet automatisch opnieuw wordt gedeployed. Om de wijzigingen in de app te zien, moeten we deze opnieuw publiceren.

Cloudfuncties

Wat we tot nu toe hebben geleerd, stelt ons in staat een app te maken die een online database en een frontend-gebruikersinterface kan onderhouden om die data te creëren, lezen, updaten en verwijderen, vaak een CRUD-applicatie genoemd.

Cloudfuncties bieden een krachtige manier om aangepaste logica en complexe bewerkingen aan onze applicaties toe te voegen zonder fysieke servers te beheren. Ze laten ons backendcode draaien als reactie op gebeurtenissen zoals databasewijzigingen, HTTP-verzoeken of andere triggers. Dit is vooral handig voor taken als e-mailnotificaties versturen, data verwerken of geplande jobs uitvoeren.

Door cloudfuncties te gebruiken, krijgen we de flexibiliteit om complexe functies efficiënt af te handelen en op te schalen waar nodig, terwijl we een naadloze en responsieve gebruikerservaring waarborgen. Ze stellen ons kortom in staat om de mogelijkheden van onze apps verder uit te breiden dan simpel databeheer, waardoor ze dynamischer en nuttiger worden.

Een goed voorbeeld van een cloudfunctie in een to-do-lijst-app is het versturen van e-mailherinneringen voor aankomende taken. Stel dat we gebruikers willen herinneren aan taken die binnenkort verlopen. We zouden een cloudfunctie kunnen schrijven die de database controleert op taken met naderende deadlines en automatisch een e-mailherinnering naar de gebruiker stuurt.

We kunnen Lovable vragen om dit voor ons te implementeren:

Sommige functies hebben toegang tot externe API’s nodig die een API-sleutel vereisen. In dit geval gebruikt de geïmplementeerde oplossing de Resend API, dus vroeg Lovable om de API-sleutel om de service af te ronden. 

Abonnementen toevoegen met Stripe

Er heeft niet veel zin om een app te maken als gebruikers zich er niet op kunnen abonneren. Laten we Lovable vragen om abonnementen in de app te implementeren met Stripe.

We kunnen de volgende prompt gebruiken:

Het vroeg me om mijn Stripe-sleutel, vergelijkbaar met het vorige voorbeeld. Deze sleutel kun je uit je Stripe-account halen.

Uiteindelijk bleek de prijs-ID van het abonnement te ontbreken. Daarvoor kunnen we terug naar Stripe, een abonnementproduct aanmaken en de prijs-ID kopiëren. Omdat Lovable geen knop had om om de prijs-ID te vragen zoals bij de API-sleutel, kunnen we die in de chat aanleveren:

Om de implementatie af te ronden, kunnen we vragen om alleen geabonneerde gebruikers to-do’s te laten aanmaken en de bijgewerkte versie van de app te publiceren.

Alles werkte in één keer!

Een mobiele app maken die we kunnen installeren

De app die Lovable heeft gemaakt is niet direct een progressive web app (PWA). Het is gewoon een website en dat betekent dat we hem niet op een mobiel apparaat kunnen installeren en gebruiken alsof het een echte telefoonapp is in plaats van een website.

Dit is echter heel eenvoudig op te lossen met één enkele prompt:

Met deze wijzigingen kunnen we, als we de app-link op onze mobiele telefoon openen, hem installeren en gebruiken alsof het een native geïnstalleerde app is.

Beperkingen van Lovable

Ondanks het potentieel van Lovable is het belangrijk de beperkingen in gedachten te houden.

Beveiligingszorgen

Hoewel Lovable een uitnodigende manier biedt om apps te bouwen zonder te coderen, roept het wel vragen op over appbeveiliging, vooral voor wie geen programmeerervaring heeft. Hoe kunnen gebruikers er zeker van zijn dat de database van hun app de nodige beveiligingsmaatregelen heeft om ongeautoriseerde toegang te voorkomen, zoals een gebruiker die taken kan toevoegen aan iemands anders lijst?

Dit cruciale aspect werd tijdens het aanmaakproces niet in de prompts genoemd, waardoor mogelijke kwetsbaarheden onbesproken bleven. Gebruikers zonder technische achtergrond kunnen het lastig vinden om deze beveiligingszorgen te beoordelen en te beheren.

Is Lovable echt sneller voor ontwikkelaars?

Voor ontwikkelaars die al hun eigen set tools en codelibraries hebben, rijst de vraag: is Lovable echt sneller?

Veel ontwikkelaars hebben hun vakmanschap aangescherpt door een interne bibliotheek van codesnippets en modules te creëren die ze vertrouwen en kennen, vaak met functies als betalingen, authenticatie en CRUD-bewerkingen. Deze zijn afgestemd op hun stijl en technologiekeuzes.

Lovable biedt mogelijk niet hetzelfde niveau van controle over de gebruikte technologieën, wat een nadeel kan zijn voor wie gewend is aan bepaalde systemen en workflows. Hoewel het platform een gemakkelijke manier biedt om snel te prototypen, kunnen ontwikkelaars het efficiënter vinden om bij hun bestaande tools en methoden te blijven, zeker gezien de naadloze integratie en vertrouwdheid die die bieden.

Debuggen voor niet-programmeurs

Hoewel Lovable het bouwen van apps zonder coderen enorm vereenvoudigt, is er een belangrijk aandachtspunt: hoe moeten niet-programmeurs omgaan met situaties waarin automatische oplossingen tekortschieten en handmatig ingrijpen nodig is? Wat gebeurt er als het platform een probleem tegenkomt dat het niet automatisch kan oplossen? Wie pakt deze knelpunten op als de beoogde gebruikers geen codeerkennis hebben?

Zonder de mogelijkheid om de code in te duiken, kan een niet-coder zich vastgelopen voelen en niet weten welke stappen hij of zij daarna moet nemen. Deze afhankelijkheid kan leiden tot stilgevallen projecten en frustratie, waardoor mogelijk een programmeur moet worden ingehuurd of externe hulp nodig is—met extra kosten en vertragingen tot gevolg.

Conclusie

Uiteindelijk maakt Lovable appontwikkeling toegankelijk, maar het succes voor niet-programmeurs hangt grotendeels af van hoe het platform gebruikers ondersteunt wanneer dingen complexer worden dan simpelweg prompten.

Ik geloof dat Lovable zijn belofte om appontwikkeling voor iedereen toegankelijk te maken echt waarmaakt. Ondanks de beperking van slechts vijf prompts per dag, kunnen we nog steeds effectief een functionele app bouwen.

Het platform laat zien complexe workflows goed aan te kunnen, waardoor we gedetailleerde appaanpassingen kunnen doorvoeren. Dit betekent dat we zelfs binnen beperkte interacties creatieve app-ideeën kunnen omzetten in werkende applicaties.