Tutorials

Tutorial: Code bearbeiten in Lovable AI – Von Prompts bis GitHub

Melden

Hier ist ein ausführliches Tutorial, wie du Code in Lovable (ehemals GPT Engineer) bearbeiten kannst. Lovable ist ein leistungsstarkes Tool, das Apps auf Basis von Prompts erstellt, dir aber auch volle Kontrolle über den zugrunde liegenden Code gibt.

Lovable ermöglicht es dir, moderne Web-Apps (meist mit React, Tailwind CSS und Vite) zu erstellen. Es gibt drei Hauptwege, um den Code zu bearbeiten: über Prompts, direkt im Browser-Editor oder über eine GitHub-Synchronisation.

Methode 1: Code-Anpassung durch Prompts (Der einfache Weg)

Die intuitivste Art, Code zu ändern, ist, Lovable einfach zu sagen, was es tun soll.

  1. Prompt eingeben: Nutze das Chat-Feld auf der linken Seite.
    • Beispiel: „Ändere die Hintergrundfarbe des Headers in Dunkelblau und füge einen Abrunden-Effekt zu den Buttons hinzu.“
  2. Vorschau prüfen: Lovable schreibt den Code im Hintergrund um und aktualisiert die Live-Vorschau rechts.
  3. Iterieren: Wenn etwas nicht passt, gib einen korrigierenden Prompt ein (z. B. „Der Blau-Ton ist zu hell, mach ihn dunkler“).

Methode 2: Der integrierte Code-Editor (Direkte Bearbeitung)

Wenn du selbst Hand anlegen möchtest, bietet Lovable einen integrierten Editor (ähnlich wie VS Code).

  1. Editor öffnen: Klicke oben in der Navigationsleiste auf den Reiter "Code".
  2. Dateistruktur: Auf der linken Seite siehst du nun den Dateibaum (z. B. src/components/, src/pages/, App.tsx).
  3. Code ändern: Klicke auf eine Datei, um sie zu öffnen. Du kannst nun direkt im Editor tippen.
  4. Speichern & Übernehmen:
    • Sobald du Änderungen vornimmst, erkennt Lovable diese.
    • Du kannst die Änderungen speichern, und die Live-Vorschau wird sofort aktualisiert.
    • Hinweis: Manuelle Änderungen können manchmal mit zukünftigen KI-Prompts kollidieren. Es ist oft besser, die KI anzuweisen, den Code zu ändern, es sei denn, es geht um sehr spezifische Logik.

Methode 3: GitHub-Integration (Der Profi-Weg)

Für maximale Kontrolle und die Nutzung eigener Tools (wie VS Code auf deinem Rechner) solltest du GitHub verbinden.

  1. GitHub verbinden: Klicke oben rechts auf "Share" oder direkt auf das GitHub-Icon.
  2. Repository erstellen: Wähle "Export to GitHub". Lovable erstellt ein privates oder öffentliches Repository für dich.
  3. Lokal klonen: Klon das Repo auf deinen Computer:
    git clone https://github.com/dein-nutzername/dein-projekt.git
  4. Lokal bearbeiten: Öffne das Projekt in VS Code. Du kannst nun Dependencies installieren (npm install), den Code refactoren oder komplexe Logik einbauen.
  5. Push & Sync: Wenn du deine Änderungen per git push zurück zu GitHub schickst, erkennt Lovable dies (sofern die Integration aktiv ist) und aktualisiert die Vorschau in der Lovable-Oberfläche.

Methode 4: Datenbank-Code (Supabase)

Viele Lovable-Projekte nutzen Supabase als Backend.

  1. Supabase-Verbindung: Wenn du Datenbanktabellen ändern musst, klicke auf das Supabase-Icon in Lovable.
  2. SQL-Editor: Du kannst Lovable bitten: „Erstelle eine neue Spalte 'Status' in der Tabelle 'Tasks'“.
  3. Direkt in Supabase: Alternativ loggst du dich direkt bei Supabase ein, änderst das Schema und Lovable erkennt die neuen Typdefinitionen meist automatisch nach einem Refresh.

Tipps für effektives Editieren

  • Kleine Schritte: Ändere nicht zu viel auf einmal. Egal ob per Prompt oder manuell – kleine, iterative Schritte führen zu weniger Fehlern.
  • Backups: Da Lovable auf GitHub basiert, nutze Branches! Wenn du eine große manuelle Änderung planst, erstelle einen neuen Branch.
  • KI-Unterstützung im Code: Auch im Code-Tab kannst du Text markieren und die KI bitten, nur diesen speziellen Abschnitt zu erklären oder zu verbessern.
  • Vorsicht bei manuellen Änderungen: Wenn du manuell viel Code löschst, den die KI für ihre Logik benötigt, kann es sein, dass zukünftige Prompts Fehlermeldungen erzeugen. Versuche, die Struktur konsistent zu halten.

Zusammenfassung

  • Für Design & einfache Features: Nutze Prompts.
  • Für schnelle Korrekturen: Nutze den internen Code-Editor.
  • Für komplexe Entwicklung: Nutze die GitHub-Synchronisation und deinen lokalen Editor.
0