[KI-Entwicklungstool] Vibe Coding mit Lovable! Umfassende Web-App-Entwicklung mit Supabase und KI | Erste Schritte & Preispläne

„Ich möchte einen professionelleren Dienst erstellen, aber ich glaube nicht, dass ich den Code schreiben kann …“

Für Nicht-Ingenieure, die es mit Vibe-Coding ernst meinen, Lovable die perfekte Entwicklungsplattform für den nächsten Schritt.

In letzter Zeit gibt es immer mehr Tools, die mithilfe von KI Landingpages und Benutzeroberflächen generieren können.
In vielen Fällen gehen sie jedoch nicht so weit, tatsächliche „App“ mit Anmelde-, Datenbank- und Verarbeitungsfunktionen

Im Gegensatz zu diesen „Nur-Aussehen“-Tools liegt der große Reiz von Lovable darin, dass Sie damit wichtige App-Funktionen wie Datenbanken, Authentifizierung und Serververarbeitung mithilfe natürlicher Sprache erstellen können.

Basierend auf Supabase werden komplexe Einstellungen so weit wie möglich verpackt, umfassenden Serviceentwicklung beginnen können

In diesem Artikel stellen wir die Attraktivität von Lovable vor, was es kann, wie man damit anfängt und welche Preispläne wir basierend auf unseren eigenen Erfahrungen mit der Nutzung anbieten.

Ich nutze derzeit den Pro-Plan, der 25 $ pro Monat kostet.
Ich werde später genauer erklären, welchen Plan Sie wählen sollten

Was ist Lovable und was kann man damit machen?

Lovable ist eine KI-Entwicklungsplattform, mit der Sie Web-Apps einfach mithilfe von Befehlen in natürlicher Sprache erstellen, bearbeiten und veröffentlichen können.

In den letzten Jahren hat ein Entwicklungsstil namens „Vibe Coding“ an Bedeutung gewonnen. Dabei geben Sie per Chat Anweisungen zur Art der zu erstellenden App, woraufhin die App entsprechend generiert wird.
Lovable eines der führenden Tools, das diesen Entwicklungsstil ermöglicht .

alle Backend-Funktionen wie Datenbanken, Authentifizierung und Backend-Funktionen automatisch auf Supabase erstellt . Die Stärke von Lovable besteht darin, dass die gesamte App, einschließlich dieser, im Chat-Format entwickelt werden kann.

Mit anderen Worten: Durch die einfache Eingabe von Befehlen in natürlicher Sprache eine vollwertige Webanwendung auf Supabase-Basis erstellen
Sie erhalten eine skalierbare, produktionsreife Konfiguration ohne dass Sie dabei die Einfachheit der No-Code-Erstellung verlieren

„Sie können eine Supabase-basierte Web-App erstellen, indem Sie einfach Anweisungen in natürlicher Sprache geben.“
Lovable ist ein Tool, das diese Entwicklungserfahrung bietet.

Beispiele für Apps, die Sie tatsächlich erstellen können

• Webdienste mit Login (Benutzerregistrierung, Authentifizierung und Zugriffskontrolle)
• Anfrageformulare und Reservierungsformulare (inkl. Datenspeicherung und Benachrichtigung)
• Einfaches CMS und Admin-Dashboard
• KI-gestützte Chatbots und automatisierte Antworttools
• Apps, die eine Verbindung zu externen APIs herstellen (Slack-Benachrichtigungen, Notion-Synchronisierung, Gmail-Versand usw.)
• Apps, die Supabase-Datenbanken nutzen (Datenliste, Details, Updates usw.)

Sie können auch mit der Erstellung einer App auf Grundlage einer vorgefertigten Vorlage

Was sind die Funktionen von Lovable?

Das größte Feature von Lovable ist, dass Sie eine „richtige Webanwendung“ erstellen können, indem Sie ausschließlich natürliche Sprache verwenden.

Viele der heutigen KI-Entwicklungstools eignen sich hervorragend zum Erstellen von Seitendarstellungen und Benutzeroberflächen,
es fehlen ihnen jedoch häufig wesentliche Elemente für eine App, wie etwa Anmeldung, Datenbanken und Verarbeitungslogik

Im Gegensatz zu diesen „Tools, die nur der Optik dienen“,
basiert Lovable auf Supabase und umfasst alles vom Front-End über die Authentifizierung und Datenbank bis hin zu den Back-End-Funktionen.

Teilen Sie Ihre Anforderungen einfach per Chat mit und es wird eine App als Webservice generiert ,
Sie dann auf Ihrer eigenen Domain veröffentlichen und betreiben können – alles an einem Ort.

Funktion	Inhalt
Supabase-Integration und automatische Erstellung	Datenbanken, Authentifizierung und Backend-Funktionen werden alle automatisch auf Supabase erstellt, sodass vollwertige Webanwendungen ausschließlich in natürlicher Sprache erstellt werden können.
Bereitstellungsfunktion	Die erstellte App kann sofort im Web veröffentlicht werden. Sie können die Funktionsfähigkeit direkt nach der Erstellung auf einer Subdomain testen.
GitHub-Integration	Front-End-Code (React) kann nach GitHub exportiert werden. Unterstützt Low-Code- und Full-Code-Bereitstellung.
Ursprüngliche Domäne	Sie können Ihre App veröffentlichen, indem Sie eine benutzerdefinierte Domäne einrichten. Die DNS-Einstellungen werden sofort nach der Einrichtung übernommen und die App ist auch für die kommerzielle Nutzung geeignet.

Ein weiteres attraktives Merkmal von Lovable besteht darin, dass Sie mit einem gewissen Maß an „Grundkenntnissen“ beginnen können, anstatt „alles von Grund auf neu erfinden“ zu müssen

• Vorlagenfunktion :
  Durch Auswahl einer vorgefertigten App-Vorlage können Sie die Entwicklung sofort aus dem Arbeitszustand heraus starten.
  Typische Konfigurationen wie „Anmeldedienst“, „Reservierungsverwaltung“ und „Produktliste“ sind beispielsweise bereits eingerichtet.
• Verwaltung mehrerer Apps :
  Sie können mit einem Konto mehrere Projekte gleichzeitig verwalten, die Erstellung von Prototypen, die Verzweigung und den Betrieb für verschiedene Zwecke vereinfacht

besteht das Hauptmerkmal von Lovable darin, „ Supabase nutzt,

Dinge, die mich überrascht haben, als ich Lovable tatsächlich verwendet habe

Als ich Lovable tatsächlich ausprobierte, war ich oft überrascht und dachte: „Wow, es kann so viel!“
Insbesondere die folgenden Punkte haben mir gezeigt, dass auch Nicht-Ingenieure es sicher verwenden und die „Serviceentwicklung“ richtig vorantreiben können.

✅ Die Verbindung zu Supabase ist einfacher als Sie denken!

Sie müssen zwar ein Supabase-Konto registrieren, aber danach müssen Sie nur noch den Anweisungen auf dem Bildschirm folgen , und schon sind Sie startklar.
Ehrlich gesagt war es überraschend einfach, und ich bin froh, dass ich es vorher vermieden habe, denn ich dachte, es wäre etwas umständlich.

Da Lovable alle Einstellungen im Hintergrund übernimmt, war der größte Vorteil für mich, dass ich mir keine Gedanken darüber machen musste, ob ich Supabase verwenden sollte

✅ Datenbankspezifikationen und andere Informationen sind auf Supabase aufgeführt und somit leicht verständlich!

Da Lovable Supabase unverändert verwendet, sind Speicherkapazität, Übertragungsvolumen, MAU-Limits usw. offiziell angegeben und leicht verständlich .
, dass Entscheidungen basierend auf dem Umfang der Entwicklung leicht getroffen werden können, z. B. „Wie viel kann ich kostenlos tun?“ und „Welchen Plan brauche ich?“. Es fühlt sich nicht wie eine Blackbox an .

✅ Erstellen Sie Backend-Funktionen auf natürliche Weise!

Wenn Sie beispielsweise im Chat sagen: „Ich möchte die API von OpenAI verwenden“, zeigt Lovable nicht nur automatisch ein Feld zur Eingabe Ihres API-Schlüssels an , sondern
generiert den Prozess auch automatisch als Backend-Funktion (Superbase Functions), wodurch eine sichere Konfiguration gewährleistet wird .

ist es wirklich hilfreich, dass sie es auf der Grundlage der Prämisse erstellt haben, dass „API-Schlüssel auf dem Server und nicht auf dem Front-End verarbeitet werden sollten“, auch ohne dass wir detaillierte Anweisungen geben müssen

Ein ähnliches Tool, Bolt.new neigt
dazu, die Verarbeitung auf dem Frontend abzuschließen, sofern Sie diese Trennung der Verantwortlichkeiten nicht bewusst angeben Lovable stellt zuerst eine ordnungsgemäße Verbindung mit Supabase her und erstellt dann Backend-Funktionen , es handelt sich also um eine zuverlässige Konfiguration.

„Ich habe es in natürlicher Sprache geschrieben und es wurde mit der richtigen Struktur implementiert.“
Ich hatte das Gefühl, dass diese Erfahrung es Nicht-Ingenieuren erleichtert, den Sprung in die Produktentwicklung zu wagen.

✅ Das Speichern von Daten in der Datenbank ist ganz einfach!

Indem Sie im Chat mitteilen, dass Sie diese Informationen speichern möchten, wird das entsprechende Schema automatisch auf Supabase generiert und CRUD-Operationen werden gleichzeitig erstellt.
Verarbeitungen wie das Speichern und Abrufen von Daten erfolgen ebenfalls automatisch im Hintergrund, sodass die App ohne besonderen Aufwand funktioniert und ein reibungsloses Erlebnis bietet.

Da Lovable jedoch in Verbindung mit Supabase funktioniert, der Einschränkungen von Supabase bewusst sein
Der kostenlose Plan ist zwei Projekte und 500 MB Speicherplatz beschränkt
selbst wenn Sie auf einen kostenpflichtigen Plan für 25 US-Dollar pro Monat upgraden, beträgt das Limit immer noch 8 GB

Wenn Sie den Dienst ordnungsgemäß betreiben möchten oder wenn die Anzahl der Benutzer explodiert und das Datenvolumen zunimmt, ist dieses Limit möglicherweise etwas unbefriedigend .

✅ Authentifizierungsfunktionen können einfach implementiert werden!

Teilen Sie uns einfach mit, dass Sie eine Anmeldefunktion hinzufügen möchten, und der Benutzerregistrierungs-/Anmeldebildschirm sowie die Authentifizierungsimplementierung werden automatisch integriert .

Da im Hintergrund die Authentifizierungsfunktion von Supabase verwendet wird, müssen Sie sich nicht die Mühe machen, OAuth selbst einzurichten oder den Anmeldestatus zu verwalten .

Auch auf der Supabase-Seite gibt es Einschränkungen bei der Authentifizierung.

• Der kostenlose Plan ermöglicht bis zu 50.000 aktive Benutzer pro Monat
• Der Pro-Plan unterstützt außerdem bis zu 100.000 Benutzer pro Monat

Natürlich glaube ich nicht
dass viele Leute sofort einen Dienst erstellen werden, der täglich von mehr als 100.000 Benutzern verwendet wird Bei einer normalen Entwicklung stellt dies also kein Problem dar. Wenn Sie jedoch über den zukünftigen Umfang nachdenken, ist es eine gute Idee, sich dessen bewusst zu sein.

✅ Das Veröffentlichen auf Ihrer eigenen Domain ist überraschend einfach!

Mit Lovable können Sie die von Ihnen erstellten Apps direkt auf Ihrer eigenen Domain veröffentlichen

• Sie können auch eine Domain über "Domain kaufen" innerhalb von Lovable erwerben
• Sie können auch eine Domain verwenden, die Sie bereits besitzen!

Registrieren Sie sich einfach bei „Custom Domains“ und sofort und ohne besondere Einstellungen
Selbst ohne technische Vorkenntnisse wird es sich anfühlen, als Handumdrehen auf Ihrer eigenen Domain veröffentlicht

✅ Legen Sie gleich mit unseren Vorlagen los!

Base44 bietet zahlreiche
funktionierende App-Vorlagen Auch wenn Sie Bedenken haben, bei Null anzufangen, können Sie mit einem funktionierenden Beispiel beginnen, indem Sie eine Vorlage als Grundlage verwenden.

Es gibt einige ziemlich professionelle App-Vorlagen, es könnte sich also lohnen, einen Blick darauf zu werfen!

✅ Die Migration ist möglicherweise einfach. Es handelt sich um eine React x Supabase-Konfiguration, sodass Sie sie wiederverwenden können!

Die generierte App verfügt über ein mit React erstelltes Frontend und ein mit Supabase erstelltes Backend . Selbst wenn später ein neuer Entwickler die Entwicklung übernimmt, erleichtert
der universelle Technologie-Stack können Sie die mit Lovable erstellten Assets unverändert nutzbar sind

Seien Sie ehrlich über Ihre Bedenken bezüglich Lovable

Obwohl ich Lovable bisher gelobt habe, gibt es einige Punkte, die Sie beachten sollten.
Insbesondere fasse ich einige Punkte zusammen, die Nicht-Ingenieure möglicherweise verwundern, insbesondere wenn sie ernsthaft mit der Entwicklung des Dienstes beginnen

❗Die Registrierung bei Supabase ist fast zwingend erforderlich. Der kostenlose Plan hat Einschränkungen.

Lovable wird von Supabase betrieben, Sie müssen also grundsätzlich ein Supabase-Konto registrieren .
, einschließlich der Datenbank, der Authentifizierung und der Backend-Funktionen, funktioniert in Verbindung mit Supabase .

Allerdings zwei Projekte und 500 MB Speicherplatz beschränkt
ehrlich gesagt nicht zum Vibe-Coding-Ansatz , „nebenbei viele Apps erstellen und ausprobieren zu wollen“.

Dies bedeutet, dass in vielen Fällen fast obligatorisch ist
Bitte beachten Sie auch, dass zukünftige Änderungen der Preisstruktur oder Einschränkungen von Supabase direkte Auswirkungen auf die Entwicklung bei Lovable haben können

Um weiterhin Apps zu entwickeln, müssen Sie die Spezifikationen und Preise von Lovable und Supabase im Auge behalten , was als kleiner Nachteil erscheinen kann.

❗Die Einschränkungen von Supabase sind für Nicht-Ingenieure schwer zu verstehen

Da Lovable auf der Basis von Supabase läuft, hängen viele Verhaltensweisen und Einschränkungen der App von den Spezifikationen von Supabase ab .

Zum Beispiel:

• Monatlich aktive Benutzer: Bis zu 100.000 (danach fallen Pay-as-you-go-Gebühren an)
• Speicher: Bis zu 8 GB (über 1 GB pro GB)
• Dateigröße, Übertragungsvolumen, Protokollaufbewahrungsdauer usw.

Auf diese Weise werden die Spezifikationen für Entwicklung und Betrieb detailliert durch ein „Zahlen x Abrechnungssystem“ festgelegt, und
ist es für Nicht-Ingenieure sehr schwierig zu erkennen, wie viel jeder einzelne Vorgang basierend auf seiner Nutzung kostet .

besonders,

• Selbst wenn Sie „100.000 MAU“ sagen, ist es schwer vorstellbar, wie lange es dauern wird, bis diese Zahl erreicht ist.
• Selbst wenn Sie „8 GB Speicher“ sagen, weiß ich nicht, wie Sie das übertreffen können.
• Sie werden vielleicht überrascht sein, wenn plötzlich das Pay-as-you-go-System greift.

Darüber hinaus gibt es versteckte Kostenrisiken wie:

Ein Blick auf den „Guthabenstand“ allein reicht nicht aus, um sich wohl zu fühlen. fragen
sich vielleicht: „Hä? Warum funktioniert das nicht?“ oder „Warum wird Geld generiert?“

Obwohl Lovable selbst einfach zu verwenden ist, sollten Sie bedenken, dass Sie möglicherweise überrascht werden, wenn Sie nicht über ein grundlegendes Verständnis der zugrunde liegenden Supabase-Spezifikationen verfügen.

❗Sie können nur React-Apps erstellen

Von Lovable generierte Apps sind auf React-Basis beschränkt und
daher nicht mit Frameworks wie Vue oder Next.js erstellt werden.

Während die Funktionalität für Nicht-Ingenieure ausreichend ist, kann sie für Ingenieure, die flexible Konfigurationen wünschen, etwas mangelhaft

❗Der gesamte Quellcode wird ausgegeben, kann aber für Nicht-Ingenieure schwierig zu verwenden sein.

verfügt über
generierten Code Ihrer Web-App in Ihrem Browser So können Sie den Code problemlos anzeigen und erhalten eine vollständige React-basierte App mit
einer großen Anzahl von Dateien und einer reinen React-Struktur.

Selbst bei kleineren Änderungen wie „Ich möchte den Wortlaut ein wenig ändern“ oder „Ich möchte das Verhalten einer Schaltfläche korrigieren“ ist es schwierig zu wissen, welche Datei man bearbeiten soll, und ich für Nicht-Ingenieure eine kleine Herausforderung darstellen .

Ein ähnlicher Dienst namens Base44 verbirgt beispielsweise Konfigurationsdateien und organisiert Schlüsseldateien auf übersichtliche Weise,
sodass der Eindruck entsteht, man könne leicht erkennen, „wo man suchen muss“.

Lovable sorgfältig strukturiert ist , gibt es kaum Navigationsmöglichkeiten für „Wo und wie bearbeiten “, sodass Nicht-Ingenieure möglicherweise Schwierigkeiten haben, den Code selbst zu korrigieren.

Vergleich der Preispläne von Lovable! Welcher ist empfehlenswert?

Lovable bietet neben dem kostenlosen Tarif drei weitere Preispläne an. Mit
dem Pro-Tarif können Sie außerdem die Anzahl der monatlichen Credits erhöhen (gegen höhere monatliche Kosten).

Die Unterschiede zwischen den beiden Plänen sind in der folgenden Tabelle zusammengefasst.
Mit dem kostenlosen Plan können Sie kaum eine App erstellen.

Planname	Monatliche Gebühr	Kredit	Supabase-Integration	Ursprüngliche Domäne	GitHub-Integration	Merkmale
Frei	$0	5/Tag (bis zu 30/Monat)	✅ Erforderlich	×	✅ Code verfügbar	Zur Testnutzung. Nur öffentlich.
Pro	$25	5/Tag (max. 150/Monat) + 100 Credits/Monat	✅ Erforderlich	✅ Unterstützt	✅ Code verfügbar	Ideal für die persönliche Entwicklung. Benutzerdefinierte Domänen- und private Einstellungen sind ebenfalls verfügbar.
Geschäft	$50	5/Tag (max. 150/Monat) + 100 Credits/Monat	✅ Erforderlich	✅ Unterstützt	✅ Code verfügbar	Für die Teamentwicklung und den Einsatz in Unternehmen vorgesehen. Beinhaltet SSO und Datenkontrolle.
Unternehmen	Bitte erkundigen Sie sich	Brauch	✅ Erforderlich	✅ Unterstützt	✅ Code verfügbar	Beinhaltet Implementierungsunterstützung und dedizierten Support. Für große Organisationen

✅ Wenn Sie eine App entwickeln möchten, ist der „Pro Plan“ fast unerlässlich!

Ich verwende tatsächlich den Pro-Plan (25 $ pro Monat) , und wenn Sie eine richtige App erstellen möchten, ist dieser Plan im Wesentlichen der Ausgangspunkt .

• 100 Credits pro Monat + 5 Credits pro Tag (maximal 150/Monat) und viele Ausführungen
• Unterstützt Ihre eigene Domäne , sodass Sie sie unverändert als Dienst veröffentlichen können
• Es verfügt über alle erforderlichen Funktionen, einschließlich privater Projekte, GitHub-Integration und Benutzerberechtigungsverwaltung

Sie müssen die Supabase-Gebühren jedoch als Gesamtheit betrachten.

Lovable basiert auf Supabase, daher sind ein Supabase-Konto und eine Supabase-Verbindung für die Verwendung des Backends, der Authentifizierung und der Datenbank nahezu unerlässlich .

• Der kostenlose Plan hat Einschränkungen wie „2 Projekte“, „500 MB“ und „50.000 MAU“.
• Wenn Sie mehrere Apps erstellen oder den Speicher oder die Authentifizierung erweitern, müssen Sie 25 $/Monat für die Pro-Version von Supabase bezahlen.

Mit anderen Worten: Lovable Pro (25 $) + Supabase Pro (25 $) = die monatlichen Mindestkosten von etwa 50 $ .
Es ist gut, dies im Voraus zu wissen.

So starten Sie mit Lovable! Detaillierte Erklärung zur Einrichtung von Supabase

Die Verwendung von Lovable ist ganz einfach. Folgen Sie den folgenden Schritten, um sofort mit der Erstellung Ihrer App zu beginnen.

①Besuchen Sie die offizielle Website

Gehen Sie zunächst auf die offizielle Website und wählen Sie „Erste Schritte“.

②Erstellen Sie ein Konto (Google-Konto ist OK)

Wenn „Konto erstellen“ angezeigt wird, registrieren Sie ein Konto bei Google oder per E-Mail.
Auf dem nächsten Bildschirm gibt es mehrere Felder, in die Sie die erforderlichen Informationen eingeben können.

Sobald Sie Ihre Kontodaten eingegeben haben, können Sie eine App erstellen. Wenn Sie mit dem kostenlosen Tarif beginnen, ist der Vorgang damit abgeschlossen.
Als Nächstes zeigen wir Ihnen, wie Sie sich für den Pro-Tarif oder höher anmelden und Supabase aktivieren.

③ Öffnen Sie „Pläne & Abrechnung“ und melden Sie sich für den Pro-Plan an (nicht erforderlich, wenn Sie ihn nur ausprobieren möchten)

Wählen Sie „Kontosymbol“ ⇒ „Einstellungen“.

Wählen Sie „Pläne & Abrechnung“ und aktualisieren Sie auf den Pro-Plan. (Stellen Sie sicher, dass Ihr Guthaben zu diesem Zeitpunkt auf 100 eingestellt ist.)

④Registrieren Sie die Supabase-Integrationseinstellungen

Wählen Sie „Kontosymbol“ ⇒ „Einstellungen“.

Wählen Sie „Supabase“ ⇒ „Verbundene Organisationen verwalten“.

Wählen Sie „Weitere Organisationen hinzufügen“.
*Wenn Sie kein Supabase-Konto registriert haben, werden Sie möglicherweise aufgefordert, ein Konto zu registrieren.

Wählen Sie „Lavable autorisieren“.

Jetzt sind Sie mit Supabase verbunden,
haben aber wahrscheinlich kein Projekt. Erstellen Sie also eines.

Unter dem Chat sehen Sie „Supabase“, wählen Sie es aus und wählen Sie dann „Projekt erstellen“.

Geben Sie die erforderlichen Informationen ein und wählen Sie „Neues Projekt erstellen“.

Dadurch wird ein neues Projekt erstellt. Wählen Sie es daher aus, bevor Sie mit der Erstellung einer App beginnen.
Hinweis: Es empfiehlt sich, bei jeder Erstellung einer neuen App ein neues Projekt zu erstellen.

⑤Sie können die generierte App überprüfen, anpassen und so veröffentlichen, wie sie ist!

Jetzt müssen Sie Ihre App nur noch entwickeln und veröffentlichen!

Eine ausführliche Anleitung zum Erstellen einer App finden Sie in unserem separaten Artikel, der die Schritte mit aktuellen Screenshots erklärt.

Es enthält detaillierte Anweisungen zum Erstellen und Veröffentlichen einer App, einschließlich der Veröffentlichung auf Ihrer eigenen Domain.

(in Vorbereitung)

Endlich: Mit Supabase an Ihrer Seite wird Lovable zur „besten Entwicklungsumgebung für Nicht-Ingenieure“

No-Code reicht Ihnen nicht, aber Sie sind noch nicht bereit, Ingenieur zu werden.
Für alle, die sich in diesem „Mittelweg“ befinden, Lovable und Supabase ideal.

Lovable basiert auf der Supabase-Struktur und ermöglicht Backend-Funktionen, Authentifizierung und Datenbankoperationen in natürlicher Sprache.
, wobei die grundlegenden Sicherheits- und Designaspekte selbstverständlich gewahrt bleiben . So können auch Nutzer, die sich in ihren Entwicklungsfähigkeiten unsicher sind, eine „richtige App“ erstellen.

Natürlich gibt es Einschränkungen und Gebühren auf der Supabase-Seite,
wertvolle Erfahrung, dass „auch Nicht-Ingenieure in der Lage sind, ernsthafte Dienste zu entwickeln“, gleicht das mehr als aus

Wenn Sie etwas Richtiges erstellen möchten, ohne Code zu schreiben