Zum Hauptinhalt springen

​
Überblick über Lovable

Willkommen zu dieser Schritt-für-Schritt-Anleitung zum Erstellen einer Full‑Stack‑Anwendung mit Lovable: Lovable Dashboard Pn

​
Übersicht über die Lovable-Plattform

1

Schritt 1

Um loszulegen, gehe zu lovable.dev und erstelle ein Konto. Sobald du registriert bist, kannst du dein erstes Projekt anlegen.
2

Schritt 2

Gib einfach eine erste Eingabeaufforderung ein, um alles zu starten, und Lovable übernimmt den Rest! Das ist der Ausgangspunkt für jedes Projekt in Lovable, mit dem du deine Ideen sofort zum Leben erwecken kannst.
Bei Lovable steht Einfachheit an erster Stelle:
  • Hier startest du dein Projekt mit einer einzigen Eingabeaufforderung.
  • Erkunde alle Projekte, einschließlich der neuesten und hervorgehobenen.
  • Starte mit einer Vorlage aus unserer kuratierten Auswahl.
  • Personalisiere deine Erfahrung, indem du dein Profil ansiehst und bearbeitest.
  • Verwalte dein Konto, um dein monatliches Guthaben zu prüfen und Einstellungen anzupassen.
  • Experimentiere mit Labs-Features wie Chat mode – aktiviere oder deaktiviere sie.
  • Upgrade oder Downgrade deinen Plan nahtlos.
In Lovable folgt jedes Projekt einem strukturierten Workflow:
  • Bearbeite mühelos mit einer chatbasierten Oberfläche.
  • Füge Bilder hinzu für präzise Bearbeitungen und Inspiration.
  • Wähle Komponenten aus und bearbeite sie visuell für ein nahtloses Design-Erlebnis.
  • Wechsle mühelos zwischen Bearbeitungsmodus und Chat mode.
  • Verfolge Änderungen mit der Versionshistorie und stelle jede vorherige Version wieder her.
  • Navigiere mühelos durch die Seiten deines Projekts.
  • Aktiviere Remixen oder benenne dein Projekt bei Bedarf um.
  • Nutze Lovable Cloud (oder integriere Supabase) für Backend-Funktionen.
  • Arbeite über GitHub zusammen, um deinen Code zu bearbeiten und zu verwalten.
  • Veröffentliche, stelle bereit und teile dein Projekt mit einem Vorschau-Link (denk daran, nach Änderungen erneut zu veröffentlichen).
  • Wechsle zwischen Web- und Mobilansicht für responsives Design.
  • Aktualisiere das Vorschau-Modalfenster, um Updates sofort zu sehen.
  • Öffne dein Projekt direkt über den Vorschau-Link.
Die Einstellungen jedes Projekts ermöglichen dir:
  • Wichtige Projektdetails anzuzeigen, wie Gesamtzahl der Bearbeitungen und Erstellungsdatum.
  • Benutzerdefiniertes Wissen einzurichten, um den Kontext deines Projekts anzupassen.
  • Eine Verbindung zu einem GitHub-Repository herzustellen für nahtlose Zusammenarbeit.
  • Die Projektsichtbarkeit anzupassen, wann immer nötig.
  • Die Anzeige des Badges zu verwalten (nur für kostenpflichtige Pläne verfügbar).
  • Dein Projekt jederzeit umzubenennen.
  • Dein Projekt zu löschen (⚠️ Gefahrenbereich).
Du kannst jederzeit schnell zugreifen auf:
  • Dashboard für eine Übersicht deiner Projekte.
  • Kontoeinstellungen, um dein Profil und deine Präferenzen zu verwalten.
  • Dokumentation und Kundensupport für Anleitungen und Unterstützung.
  • Melde dich sicher ab von deinem Lovable-Konto.

​
Starte dein Projekt

Es gibt mehrere Möglichkeiten, mit Lovable loszulegen – je nach deinen Vorlieben und vorhandenen Ressourcen:
Das auf Eingabeaufforderungen basierende System von Lovable macht die App-Erstellung einfach.
  • Beschreibe im Eingabeaufforderungsfeld, was du bauen möchtest.
  • Je genauer du bist, desto besser werden die Ergebnisse.
  • Starte mit klaren und detaillierten Eingabeaufforderungen.
  • Du kannst dein Projekt unterwegs weiter verfeinern und anpassen.
Beispiel:„Erstelle ein Dashboard mit Benutzeranmeldung, monatlichen Verkäufen in einem Liniendiagramm und Kundendemografie in einem Kreisdiagramm.“
Du kannst ein bestehendes öffentliches Projekt oder eines deiner eigenen Projekte remixen. Remixen ermöglicht es dir, den aktuellen Zustand eines Projekts als Ausgangspunkt wiederzuverwenden und darauf aufzubauen. Das ist eine großartige Möglichkeit, neue Ideen zu erkunden, Anpassungen vorzunehmen oder mit verschiedenen Änderungen zu iterieren, während die Originalversion erhalten bleibt.
Du kannst öffentliche Projekte anderer Nutzer nur remixen, wenn das Projekt nicht mit Supabase verbunden ist.
Wenn du ein Design in Figma hast, erstelle einen Screenshot eines beliebigen Bereichs. Du kannst den Screenshot direkt in Lovable einfügen oder die Bilddatei per Drag-and-Drop hineinziehen. Sobald du die Eingabetaste drückst, wandelt Lovable dein Design in funktionalen Code um.
1

Schritt 1

Verwende Excalidraw oder ein ähnliches Tool, um dein UI zu skizzieren.
2

Schritt 2

Mache einen Screenshot deiner Zeichnung und füge ihn dann in Lovable ein oder ziehe ihn per Drag-and-Drop hinein. Die Plattform verwandelt deine Skizze in lauffähigen Code.
Weitere Informationen hier.
Wenn du eine bestehende Webseite nachbilden möchtest:
1

Schritt 1

Mache einen Screenshot mit Tastenkürzeln wie Cmd+Shift+4 auf dem Mac oder mit Tools wie der GoFullPage Chrome Extension.
2

Schritt 2

Füge den Screenshot in Lovable ein oder ziehe ihn per Drag-and-Drop hinein. Lovable rekonstruiert die Struktur der Webseite in deinem Projekt.
Weitere Informationen hier.

​
Bearbeite dein Projekt

Das Custom knowledge in Lovable dient als Bauplan deines Projekts und organisiert Funktionalität, Design und Ziele an einem Ort.
Visual Edits ermöglicht es dir, Elemente auf der Seite auszuwählen und entweder sofort zu bearbeiten, z. B. Text oder Farben zu aktualisieren, oder Eingabeaufforderungen zu verwenden, um Funktionalität und Layout anzupassen.Weitere Informationen findest du unter Visual Edits.
Geschwindigkeit ist beim Erstellen von KI-gesteuerten Apps wichtig, aber ebenso Stabilität und Kontrolle. Deshalb haben wir die Versionierung erweitert, damit das Nachverfolgen von Änderungen mühelos ist.
1

Setze sofort auf frühere Versionen zurück oder probiere einen anderen Ansatz aus

Du kannst eine ältere, funktionierende Version in der Vorschau anzeigen und bei Bedarf zu dieser Version zurückkehren oder eine frühere Nachricht bearbeiten und zurücksetzen, um einen anderen Ansatz zu erkunden. Nichts geht verloren – alle Änderungen, die danach vorgenommen wurden, bleiben im Chat und können jederzeit erneut angewendet werden.
2

Wichtige Bearbeitungen mit Lesezeichen versehen

Halte deine Arbeit organisiert, indem du wichtige Bearbeitungen mit Lesezeichen versiehst. So kannst du sie später leicht wiederfinden und erneut aufrufen.
3

Intuitive Versionshistorie

Der Verlaufsbereich funktioniert jetzt wie in Google Docs und macht das Nachverfolgen von Änderungen einfacher.
Hänge Bilder direkt an den Chat an, um deinen Eingabeaufforderungen Kontext hinzuzufügen. So kannst du Ideen oder Konzepte leichter veranschaulichen, die sich besser zeigen als beschreiben lassen.
Integriere dein Projekt mit GitHub, um nahtlos an deiner Anwendung zu iterieren. Du kannst Codeänderungen in GitHub oder deiner bevorzugten IDE vornehmen und gleichzeitig alles mit Lovable synchron halten.
Weitere Informationen findest du unter GitHub-Integration.

​
Füge deinem Projekt Full-Stack-Funktionen hinzu

Wenn du deiner Anwendung Backend-Funktionen hinzufügen möchtest, kannst du:
Es gibt viele Möglichkeiten, Stripe mit Lovable zu verbinden, aber der einfachste Weg ist, die integrierten Payment Links von Stripe zu nutzen. Sieh dir die Stripe-Integration für weitere Informationen an.
Sieh dir die Resend-Integration für weitere Informationen an.

​
Projekt bereitstellen und veröffentlichen

Sorge für bestmögliche Ergebnisse, indem du unserem Leitfaden SEO- und GEO-Best Practices umsetzen folgst.
Du kannst eine benutzerdefinierte Domain hinzufügen mit:
  • Entri (nativ in Lovable verfügbar)
  • Netlify
  • Vercel
  • Namecheap
Weitere Informationen findest du unter Benutzerdefinierte Domain.
Wenn dein Projekt bereit ist, veröffentliche es, um eine teilbare URL zu erstellen. So kannst du deine Anwendung ganz einfach präsentieren oder sie mit Mitwirkenden und Stakeholdern teilen.
Weitere Informationen findest du unter Veröffentlichen.