Zum Hauptinhalt springen

​
Willkommen bei Lovable

1

Erste Schritte mit den Lovable-Grundlagen

2

Oberfläche und Bedienelemente verstehen

3

Mit Bearbeitungsfunktionen und Versionsverlauf arbeiten

4

Authentifizierung und Benutzerverwaltung implementieren

5

Supabase-Datenbanken und Edge-Funktionen nutzen

6

GitHub-Integration und Codeverwaltung

7

Projekte teilen und Feedback aus der Community erhalten

8

Weitere Ressourcen und Vorlagen erkunden

​
Tutorials zu Lovable

In diesem Tutorial zeigen wir Ihnen Schritt für Schritt, wie Sie eine KI-gestützte Kalorienverfolgungsapp mit Lovable erstellen – komplett mit Authentifizierung, ansprechendem responsivem Design, OpenAI-Integration und Bereitstellung in der Produktionsumgebung.
1

Grundlagen schaffen

Die Grundlage jedes Lovable-Projekts ist eine gute Eingabeaufforderung. Hier ein Beispiel für diese App:
Erstellen Sie eine Kalorienverfolgungsapp mit folgenden Funktionen:
Landingpage, Dashboard und eine Mahlzeitenseite.
Eingabefelder für Mahlzeitenbeschreibungen oder Bilder, mit Analyse durch GPT-4.
Tägliche Fortschrittsverfolgung und Integration mit Supabase für Authentifizierung und Datenbankverwaltung.
Schöne und mobilfreundliche Benutzeroberfläche.
Sobald Lovable das UI-Skelett generiert hat:
  • Überprüfe die Navigation und das Design der Landingpage.
  • Passe die Eingabeaufforderung iterativ an, um das Layout zu verfeinern und sicherzustellen, dass es auf Mobilgeräten gut funktioniert.
Formuliere ausdrücklich, dass du mit dem UI beginnst. Lovable funktioniert am besten, wenn Aufgaben in klare Schritte unterteilt werden. Skizziere zum Beispiel Navigation, Seitenstrukturen und Design-Themes gleich zu Beginn in der Eingabeaufforderung.
2

Die Benutzeroberfläche entwerfen

Lovable legt Wert auf ein schrittweises Vorgehen, ähnlich wie beim Errichten eines Gebäudes:
  • Beginne mit dem Gerüst: Plane die Struktur deiner App (z. B. Ablauf der Nutzererfahrung, Seitenlayout).
  • Füge die erste Schicht hinzu: Erstelle leere Seiten mit grundlegenden Designelementen.
  • Verfeinere die Details: Füge Farben, Animationen und Responsivität für Mobilgeräte hinzu.
Wenn du vorgefertigte Designs in Figma hast, kannst du Screenshots erstellen und sie in deine Lovable-Eingabeaufforderung einfügen. Hochauflösende Bilder sorgen für bessere Ergebnisse.
3

Supabase als Backend und für Authentifizierung integrieren

Sobald das UI fertig ist, ist es Zeit, Backend-Funktionalität hinzuzufügen:
  1. Richte ein Supabase Konto ein und erstelle ein Projekt.
  2. Verbinde es mit Lovable, indem du auf den Button „Connect Supabase“ klickst.
  3. Für die Datenspeicherung generiert Lovable SQL-Tabellen, zum Beispiel:
  • Eine profiles-Tabelle zum Speichern von Benutzerinformationen.
  • Eine meals-Tabelle, die mit Benutzern verknüpft ist, um tägliche Einträge zu protokollieren.
Verwende Row-Level-Security (RLS)-Regeln in Supabase, um die Privatsphäre der Benutzer zu gewährleisten. Lovable kann dies automatisch für dich übernehmen.
4

OpenAI für die Speiseanalyse integrieren

Die Magie dieser App liegt in ihren KI-Fähigkeiten. Um Mahlzeiten zu analysieren:
  1. Besorge dir einen OpenAI API-Schlüssel in deinem Developer-Dashboard.
  2. Verwende GPT-4 zur Analyse von Mahlzeitenbeschreibungen oder Bildern.
  3. Stelle sicher, dass API-Schlüssel sicher in Edge Functions gespeichert werden, um unbefugten Zugriff zu verhindern.
Zu implementierende Features:
  • Mahlzeitenbeschreibungen analysieren: Schätze Nährwerte (Kalorien, Protein, Kohlenhydrate, Fett).
  • Bilderkennung: Lade ein Foto einer Mahlzeit hoch, und GPT-4 extrahiert eine Beschreibung und Nährwertdaten.
Pro-Tipps für die OpenAI-Integration:
  • Verwende function calling für strukturierte Antworten, sodass die Daten korrekt für das Einfügen in die Datenbank formatiert sind.
  • Teste die Funktion, indem du die App bittest, einfache Mahlzeiten wie „2 Eier“ zu analysieren.
5

Implementierung von Zahlungen mit Stripe

Um die App zu monetarisieren, füge abonnementbasierte Zahlungen hinzu:
  1. Erstelle ein Stripe‑Konto und richte ein Produkt ein (z. B. „Standardtarif“ für 12 $ pro Monat).
  2. Integriere Stripe in Lovable, indem du den API-Schlüssel und die Preis-ID des Produkts hinzufügst.
  3. Leite nicht zahlende Nutzer auf die Landing Page um. Nur zahlende Nutzer können auf die Hauptanwendung zugreifen.
Zusätzliche Tipps:
  • Aktiviere das Customer Portal von Stripe, damit Nutzer ihre Abos verwalten können (z. B. kündigen oder Zahlungsmethoden aktualisieren).
  • Teste Zahlungen im Testmodus von Stripe mit den bereitgestellten Test-Kreditkartendaten.
6

Testen und Debuggen

Fehler sind ein normaler Teil der Entwicklung, und Lovable macht das Debugging einfacher:
  • Nutze die „Try to Fix“-Schaltfläche, wann immer ein Build-Fehler auftritt.
  • Bei Backend-Problemen prüfe die Supabase-Protokolle für detaillierte Fehlerberichte.
  • Wenn du auf Netlify bereitstellst, überprüfe die Bereitstellungsprotokolle auf mögliche Build-Probleme. Teile Protokolle mit Lovable, um gezielte Korrekturen zu erhalten.
Wenn du nicht weiterkommst, setze mit der „Revert“-Funktion von Lovable auf eine frühere Version zurück. Das spart Credits und Zeit.
7

Bereitstellen deiner App

Sobald deine App bereit ist, stelle sie mit Lovable oder Netlify bereit:
  1. Verwende die Bereitstellungsfunktion von Lovable, um die App auf einer Standarddomain zu hosten.
  2. Für benutzerdefinierte Domains:
Aktualisiere die Metadaten deiner App (Favicon, Meta-Tags, OG-Bild) für besseres Branding und eine bessere SEO.
In diesem Tutorial zeigen wir dir, wie du mit Lovable, 21st.dev und Supabase eine beeindruckende, vollständig interaktive Landingpage für einen KI-gestützten E-Mail-Assistenten erstellst – inklusive Animationen, API-Integrationen und nahtloser Bereitstellung!
  • KI-gestütztes Design & UI-Optimierungen
  • Hinzufügen von Animationen & interaktiven Elementen
  • Integration von KI-E-Mail-Funktionen mit der Groq API
  • Einrichten eines Kontaktformulars mit Resend
  • Bereitstellen der Seite mit Lovable Launch
Die Session zeigte, wie Lovable schnelle Iterationen und produktionsreife Ergebnisse ermöglicht.
1

Authentifizierung

  • Nutzer können sich mithilfe der Supabase-Integration registrieren, anmelden und ihre Profile verwalten.
  • Sichere Nutzersitzungen ermöglichen personalisierte Erlebnisse.
2

Feedback-Einreichung und Voting

  • Nutzer können Feedback mit Titeln, Beschreibungen und Bildern einreichen.
  • Jeder Feedback-Eintrag zeigt die Anzahl der Stimmen an und unterstützt Upvotes in Echtzeit.
3

Admin-Dashboard mit KI-Zusammenfassungen

  • Admins können sämtliches Feedback prüfen, nach Stimmen filtern und Einträge sortieren.
  • KI-gestützte Zusammenfassungen identifizieren umsetzbare Erkenntnisse mithilfe von OpenAI und Supabase Edge Functions.
4

Tracking der Nutzerpräsenz

Präsenzindikatoren in Echtzeit zeigen aktive Nutzer auf der Plattform an.
5

Detaillierte Feedback-Seiten mit Kommentaren

Jeder Feedback-Eintrag verfügt über eine eigene Seite für Diskussionen, sodass Teams effizient zusammenarbeiten und priorisieren können.
6

Dateianhänge

Nutzer können Bilder an Feedback anhängen, die mithilfe der Speicherfunktionen von Supabase sicher gespeichert werden.
Das Ziel dieser Session war es, eine App zu bauen, mit der Developer, Designer:innen oder Consultants abonnementbasierte Services anbieten können – ein Geschäftsmodell, das von Plattformen wie DesignJoy inspiriert ist.
1

Authentifizierung und User Management

Die Authentifizierung war das erste implementierte Feature und legte den Grundstein für ein robustes Framework zur Verwaltung von Nutzenden. Das Team betonte, wie wichtig es ist, Authentifizierung früh zu integrieren, um Probleme beim Skalieren der App zu vermeiden.
  • Supabase-Integration für Registrierungen, Logins und Profilverwaltung.
  • Persistente Nutzersessions zur Verbesserung der Benutzerfreundlichkeit der App.
2

Stripe-Abonnement-Integration

In der Session wurde gezeigt, wie Stripe für das Abonnement-Management integriert wird:
  • Nutzende können verschiedene Preistiers abonnieren.
  • Verwaltung des Abonnementstatus, sodass nur zahlende Nutzende Zugriff auf Premium-Features haben.
3

Dashboard und Aufgabenmanagement

  • Nutzerspezifische Dashboards mit Aufgaben-Boards und Drag-and-drop-Funktionalität.
  • Echtzeit-Aktualisierung von Aufgaben für nahtlose Zusammenarbeit.
4

AI-Chatbot

Die Session endete mit der Integration eines AI-Chatbots und zeigte, wie OpenAI Apps um dynamische Funktionen erweitern kann. Dieses Feature kann beispielsweise als virtueller Assistent, Concierge oder Datenabfrage-Interface dienen.
  • Integration von OpenAI, um einen Chatbot bereitzustellen, der intelligent auf Nutzeranfragen reagiert.
  • In einer einzigen Eingabeaufforderung erstellt – ein Beispiel für die Effizienz von Lovable.
5

Iteratives Debugging und Verfeinerung

Das Team ging auf Herausforderungen beim Debugging in Echtzeit ein und gab wertvolle Einblicke in die Fehlerbehebung. Zu den Techniken gehörten:
  • Verwendung von Konsolenprotokollen und Fehlermeldungen zur Identifizierung von Problemen.
  • Zurücksetzen auf frühere App-Versionen, um zu vermeiden, in fehlerhaften Zuständen festzustecken.
  • Steuerung der Lovable-AI mit detaillierten Eingabeaufforderungen, um präzise Korrekturen sicherzustellen.
In diesem Tutorial tauchen wir tief ein in die KI-gestützte App-Entwicklung, das Eingabeaufforderungs-Engineering und die Workflow-Automatisierung mit dem besonderen Gast von Lovable, ‪Mark Kashef‬!
  • Effektive KI-Eingabeaufforderungen verstehen
  • Die vier Ebenen des Eingabeaufforderungs-Engineerings
  • Meta-Eingabeaufforderungs-Techniken & Best Practices
  • Debugging-Strategien für KI-Workflows
  • Erstellen einer KI-App mit Lovable & Make.com
  • Integration von Visual Edits & Tailwind CSS für das UI-Design
In diesem Tutorial erstellen wir live eine Event-Plattform im Luma-Stil mit Lovable und Supabase!
  • Wie du Supabase mit Lovable integrierst
  • Einrichtung von Authentifizierung & Benutzerverwaltung
  • Konfiguration von Datenbanken & Echtzeit-Kommentaren
  • Testen der Performance & Umgang mit mehreren Nutzern
  • Live-Debugging & Performance-Optimierung
In diesem Tutorial zeigen wir dir, wie du mit Lovable, einem KI‑unterstützten No‑Code‑Builder, eine Full‑Stack‑Tagebuch-App erstellst, ohne auch nur eine einzige Zeile Code zu schreiben!
  • Gestalte sofort das UI deiner App
  • Lade dein Design hoch & generiere eine funktionierende App
  • Verbinde Supabase für Backend & Authentifizierung
  • Implementiere GPT-4o für KI‑gestützte Funktionen
  • Stelle in wenigen Minuten eine Full‑Stack-App bereit!
In diesem Tutorial führen wir dich Schritt für Schritt durch die Erstellung eines einfachen, aber leistungsstarken CRM mit Lovable für die Entwicklung, Supabase für die Datenspeicherung und Resend für die E-Mail-Automatisierung.
  • Wie Resend für die E-Mail-Automatisierung eingesetzt wird
  • Einrichten von Authentifizierungs-E-Mails mit Supabase
  • Aufbau eines Admin-Dashboards & eines Kontaktverwaltungssystems
  • Erstellen & Anpassen von E-Mail-Vorlagen
  • Hinzufügen einer Newsletter-Anmeldung & von Broadcast-E-Mail-Funktionen
Fesselnde, interaktive Web-Erlebnisse zu erstellen, ist mit den neuesten Updates von Lovable jetzt noch einfacher!
1

Mühelose UI-Anpassung mit visuellen Bearbeitungen

Eines der größten Upgrades für Lovable ist die Möglichkeit, UI-Elemente sofort zu ändern, ohne KI-Credits zu verbrauchen. Du kannst jetzt:
  • Text direkt in deinem Projekt bearbeiten.
  • Button-Farben und -Stile in Echtzeit anpassen.
  • Bilder nahtlos hochladen und austauschen.
  • Über Elemente hovern, um schnelle Anpassungen vorzunehmen.
Nutzer können jetzt Text markieren, Farben ändern oder Icons mühelos austauschen, ohne KI-Unterstützung zu benötigen – das ermöglicht einen deutlich flüssigeren Design-Iterationsprozess.
2

Erweitertes Debugging und API-Fehlerbehandlung

Zuvor hatten Nutzer Schwierigkeiten beim Umgang mit Fehlern in Drittanbieter-API-Integrationen. Lovable sorgt jetzt dafür, dass:
  • aussagekräftigere Fehlermeldungen für einfacheres Debugging angezeigt werden.
  • irrelevante Pop-ups entfernt werden, damit du dich auf kritische Probleme konzentrieren kannst.
  • KI-gestützte Fehlererkennung automatische Korrekturen ermöglicht.
Anstatt Nutzer mit generischen Pop-ups zu überfluten, übergibt Lovable den Fehlerkontext jetzt direkt an seine KI, die entscheiden kann, wann ein Problem behoben werden muss und wie die Behebung erfolgen soll.
3

Dynamische Hintergründe und Animationen erstellen

Lovable unterstützt jetzt die nahtlose Integration von animierten und interaktiven Elementen mit p5.js und anderen Bibliotheken.

​
Beispielprojekt: Reisebüro-Website mit interaktiven Flaggen

In einer aktuellen Live-Demo wurde gezeigt, wie du eine Landingpage für ein Reisebüro erstellen kannst, die Folgendes enthält:
  1. Einen animierten Hero-Bereich mit Flaggen, die dynamisch erscheinen und sich als Reaktion auf Mausbewegungen bewegen.
  2. Einen Sticky-Scroll-Abschnitt, der sich basierend auf der Scroll-Position des Nutzers verändert.
  3. Interaktive Hover-Effekte, bei denen Bilder auf Bewegungen der Nutzer reagieren.

​
So implementierst du animierte Effekte

Um diese Effekte zu erstellen, sind Nutzer diesem einfachen Ablauf gefolgt:
  • Die gewünschte Animation definieren:
Mach den Hintergrund interaktiv, mit schwebenden Elementen, die sich wegbewegen, wenn du mit der Maus darüberfährst.
  • p5.js verwenden, um Effekte zu erzeugen:
    • Ein chromatisches Rauchmuster implementieren.
    • Statische Bilder durch dynamische Flaggenanimationen ersetzen.
  • Das Nutzererlebnis mit physikbasierten Interaktionen verbessern:
    • Elemente sollen sich dynamisch basierend auf Nutzeraktionen bewegen.
Wenn eine Animation nicht funktioniert, nutze Lovables Chat mode, um den Effekt mit schrittweiser KI-Anleitung zu debuggen und zu verfeinern.
4

Benutzerdefinierte Elemente aus externen Bibliotheken importieren

Mit 21st.dev können Nutzer nun vorgefertigte UI-Komponenten nahtlos in Lovable-Projekte integrieren.
  1. Durchsuche 21st.dev nach einem Button-Design.
  2. Kopiere die KI-generierte Eingabeaufforderung.
  3. Füge sie in Lovable ein und ersetze einen bestehenden Button.
Dieser Ansatz beschleunigt Design-Workflows und ermöglicht noch hochwertigere, visuell einheitliche Oberflächen.
Die gleiche Methode funktioniert auch für das Importieren von Animations-Presets von motion.dev, sodass du hochwertige Motion-Effekte einfacher hinzufügen kannst – ganz ohne eigenen Code.
In diesem Tutorial zeigen wir dir Schritt für Schritt, wie du ein individuelles CRM-System (Customer-Relationship-Management-System) mit Lovable und Clerk erstellst.
In diesem Tutorial zeigen wir dir Schritt für Schritt, wie du ein individuelles CRM (Customer-Relationship-Management-System) mit Lovable und Make aufbaust.

​
Baue, brande und launche ein echtes Micro-SaaS – live!

Spanisch zu lernen war noch nie so interaktiv! Stell dir eine App vor, die dir Spanisch nicht nur über Unterhaltungen beibringt, sondern auch Sprachinteraktionen in Echtzeit, dynamische Kurse und visuell ansprechende Inhalte erstellt – komplett von KI gesteuert. Dieses Tutorial hilft dir dabei, Schritt für Schritt nachzuvollziehen, was Kristian und Harry gebaut haben:
1

Die Grundlagen legen

Bevor wir KI-Funktionen implementiert haben, haben wir uns darauf konzentriert, mit Lovable eine solide Basis für die App zu schaffen. Dazu gehörten das Einrichten der Authentifizierung, die Strukturierung des Dashboards und die Implementierung des Benutzermanagements.
2

Authentifizierungssystem

  • Supabase für die Backend-Authentifizierung integriert.
  • Registrierung und Anmeldung mit E-Mail und Passwort ermöglicht.
  • Ein Profilsystem erstellt, um Nutzerpräferenzen und Lernfortschritt zu speichern.
3

Dashboard & Navigation

  • Eine intuitive Seitenleiste für die Navigation entworfen.
  • Bereiche für Chat, Kurse und Benutzereinstellungen erstellt.
  • Für ein responsives UI-Design gesorgt, das ein nahtloses Nutzungserlebnis auf allen Geräten bietet.
4

Benutzerprofile & Datenspeicherung

  • Eine Datenbankstruktur hinzugefügt, um den Fortschritt der Nutzer zu speichern.
  • Profileinstellungen entworfen, in denen Nutzer ihre Lernpräferenzen anpassen können.
1

KI-generierte Kurse

Um das Lernen interaktiver zu machen, haben wir ein KI-gestütztes Kurserstellungssystem mit dem GPT-Modell von OpenAI implementiert. So funktioniert es:
  1. Nutzer wählen ein Thema aus (z. B. „Fragen, die man bei einem Grillfest stellen kann“).
  2. Lovable ruft eine OpenAI Edge-Funktion auf, um 10 ansprechende spanischsprachige Fragen zu generieren.
  3. Nutzer bearbeiten Quizze, verfolgen ihren Fortschritt und erhalten KI-Feedback zu ihren Antworten.
2

Nutzerengagement steigern

  • Dynamisch generierte Fragen: Jedes Quiz wird von der KI generiert und sorgt so jedes Mal für frische, einzigartige Inhalte.
  • Interaktives Feedback: Die KI liefert Erklärungen zu richtigen und falschen Antworten, um den Lernfortschritt zu verbessern.
  • Fortschrittsverfolgung: Nutzer können Kurse speichern und erneut aufrufen, was das Behalten und Üben unterstützt.
3

Visuelles Engagement mit Replicate steigern

Um ein visuelles Lernelement hinzuzufügen, haben wir das Bildgenerierungsmodell Replicate’s Flux Schnell integriert:
  • Automatisierte Kursbanner: Für jeden Kurs wird dynamisch ein Bild generiert, das zum Thema passt.
  • Visuell immersive Lernerfahrung: KI-gesteuerte Visuals steigern Nutzerengagement und Merkfähigkeit.
  • Schnelle Bildverarbeitung: Mit der API von Replicate werden Bilder in Echtzeit generiert, ohne das Nutzererlebnis zu verlangsamen.
4

Echtzeit-Sprachgespräche

Ein wichtiger Meilenstein in der Entwicklung der App war die Einführung von spanischer Sprachpraxis in Echtzeit mit der Echtzeit-WebRTC-API von OpenAI:
  • Interaktiver KI-Tutor: Nutzer können direkt mit einer KI sprechen, die dynamisch auf Spanisch antwortet.
  • Unterstützung bei der Aussprache: Die KI liefert Korrekturen und Vorschläge in Echtzeit.
  • Nahtlose Gespräche: Der natürliche Gesprächsfluss lässt es so wirken, als würde man mit einem menschlichen Tutor interagieren.
1

Konzept und Zielgruppe festlegen

Bevor wir mit dem Branding begonnen haben, haben wir unsere Kernziele definiert:
  • KI-gestützter Chat für Unterhaltungen in Echtzeit auf Spanisch.
  • Automatisierte Quizze für kurze Übungseinheiten.
  • Strukturiertes Lernen mit Speicherung von Lektionen und Fortschrittsverfolgung.
Das hat unsere Branding-Entscheidungen geprägt und sichergestellt, dass sie zum Zweck der App passen.
2

Namensfindung & Domain-Auswahl

Wir wollten einen kurzen, einprägsamen Namen, der die Lernreise widerspiegelt. Mithilfe von KI haben wir Ideen gesammelt und uns schließlich auf Ruta festgelegt (Spanisch für „Route“ oder „Weg“).

​
Vorgehen:

  • Namensideen gesammelt und KI für einprägsame spanische Wörter genutzt.
  • Optionen getestet wie “Camino” und “Verbo,” aber “Ruta” hat sich durchgesetzt.
  • Domainverfügbarkeit geprüft und rutaapp.com direkt gesichert.
3

Eine visuelle Identität erstellen

Wir haben die Marke schnell gestaltet:
  • Logo: Ein von einem Kompass inspiriertes Icon aus Designbibliotheken, in Figma bearbeitet.
  • Schriftkombination: Eine fette, moderne Schrift für das Logo und eine gut lesbare UI-Schrift für die App-Oberfläche.
  • Farbpalette: Ein Tailwind-CSS-Blau-Schema, das Reise und Entdeckung symbolisiert.
  • Styling-Inspiration: Mit Neo-Brutalismus experimentiert und Kontrast, Schatten und Rahmen angepasst, um ein visuell ansprechendes UI zu schaffen.
4

Ein stimmiges Nutzererlebnis schaffen

Mit Lovable haben wir visuelle Konsistenz in der gesamten App sichergestellt:
  • Landing Page: Per KI generiert, mit einem dynamischen, ansprechenden Hero-Bereich.
  • Dashboard- & Kursseiten: Im Stil der Markenidentität gestaltet.
  • Iteratives Styling: Neo-brutalistische Elemente eingesetzt, um verschiedene Designstile zu testen.
  • User-Flow-Tests: Nahtlose Navigation vom Signup bis zum Echtzeit-Chat sichergestellt.

​
Community-Tutorials

Sieh dir die Tutorials der Lovable Community hier an.