Tutorials

Vollständiges Tutorial: So erstellst du eine E-Commerce-Website mit Lovable AI (Schritt-für-Schritt)

Melden

Hier ist ein umfassendes Tutorial, wie du als absoluter Anfänger eine E-Commerce-Website mit Lovable AI (ehemals GPT Engineer) erstellen kannst.

Lovable AI ist ein revolutionäres Tool, das es dir ermöglicht, komplexe Web-Apps durch einfaches Beschreiben in natürlicher Sprache zu erstellen. Im Gegensatz zu klassischen Homepage-Baukästen generiert Lovable echten Code (React, Tailwind CSS, Vite) und setzt die Datenbank im Hintergrund direkt mit auf.

Schritt 1: Vorbereitung und Anmeldung

  1. Website aufrufen: Gehe auf lovable.dev.
  2. Account erstellen: Melde dich mit deinem GitHub-Account oder Google-Konto an. (Ein GitHub-Account ist empfehlenswert, wenn du deinen Code später selbst verwalten möchtest).
  3. Projekt starten: Klicke auf "New Project".

Schritt 2: Der "Magic Prompt" – Die Vision beschreiben

Der wichtigste Teil bei Lovable ist der erste Prompt. Je präziser du bist, desto besser wird das Ergebnis.

Kopiere diesen Beispiel-Prompt für einen E-Commerce Shop:

"Erstelle eine moderne E-Commerce-Website für [dein Produkt, z.B. handgemachten Schmuck]. Die Seite soll folgende Funktionen haben:

  1. Eine Startseite mit einem Hero-Bereich und Bestsellern.
  2. Eine Produktübersicht mit Filter- und Sortierfunktionen.
  3. Eine Produktdetailseite mit Bildern, Beschreibung und Preis.
  4. Ein funktionierender Warenkorb (Slide-over).
  5. Ein Checkout-Formular. Design-Stil: Minimalistisch, sauber, mit viel Weißraum und einer eleganten Serifenschrift für Überschriften."

Schritt 3: Das Design anpassen (Iteratives Bearbeiten)

Sobald Lovable die erste Version erstellt hat, siehst du eine Vorschau deiner Website. Jetzt kannst du Änderungen per Chat-Befehl vornehmen:

  • Änderungswunsch: "Ändere die Hauptfarbe von Blau auf ein sanftes Salbeigrün."
  • Funktion hinzufügen: "Füge einen FAQ-Bereich auf der Startseite hinzu."
  • Layout anpassen: "Mache die Produktkarten im Grid etwas größer und füge einen Hover-Effekt hinzu."

Tipp: Du kannst oben rechts zwischen "Edit" (Chat) und "Code" wechseln, falls du selbst Hand an den Code legen möchtest (für Anfänger meist nicht nötig).

Schritt 4: Backend & Datenbank (Supabase Integration)

Ein echter Shop braucht eine Datenbank für Produkte und Bestellungen. Lovable nutzt hierfür Supabase.

  1. Klicke in Lovable auf das Supabase-Icon oder den Button "Connect Supabase".
  2. Lovable wird dich bitten, ein Supabase-Projekt zu verknüpfen oder ein neues zu erstellen.
  3. Das Beste: Lovable schreibt die Datenbank-Tabellen (für Produkte, Kategorien, Nutzer) automatisch für dich, wenn du sagst: "Erstelle eine Datenbank-Tabelle für meine Produkte und verknüpfe sie mit der UI."

Schritt 5: Produkte verwalten

Du möchtest nicht jedes Mal den Prompt nutzen, um ein Produkt zu ändern.

  • Bitte Lovable: "Erstelle mir ein einfaches Admin-Dashboard, mit dem ich neue Produkte hinzufügen und Preise bearbeiten kann."
  • Alternativ kannst du die Daten direkt in der Supabase-Oberfläche (ähnlich wie Excel) bearbeiten.

Schritt 6: Zahlungsintegration (Stripe)

Damit Kunden wirklich kaufen können, brauchst du einen Zahlungsanbieter.

  1. Erstelle ein Konto bei Stripe.
  2. Sage Lovable: "Integriere Stripe Checkout für den Warenkorb."
  3. Lovable wird dir sagen, wo du deine API-Keys von Stripe einfügen musst (meistens unter "Secrets" oder "Environment Variables" in den Einstellungen).

Schritt 7: Veröffentlichung (Deployment)

Wenn du mit deiner Website zufrieden bist:

  1. Klicke oben rechts auf den Button "Deploy".
  2. Lovable hostet die Seite initial auf einer Subdomain (z.B. dein-shop.lovable.app).
  3. Eigene Domain: Du kannst in den Einstellungen eine eigene Domain (z.B. www.dein-shop.de) verbinden.

3 Profi-Tipps für Anfänger

  1. Klein anfangen: Versuche nicht, am ersten Tag ein zweites Amazon zu bauen. Starte mit einem funktionierenden Produktkatalog und einem Warenkorb.
  2. Präzise Sprache: Statt "Mach es schöner", schreibe lieber "Erhöhe den Abstand zwischen den Produkten und verwende eine dünnere Schriftart".
  3. Fehler beheben: Wenn etwas nicht funktioniert, kopiere die Fehlermeldung einfach in den Chat von Lovable. Die KI wird den Code automatisch reparieren.

Fazit

Mit Lovable AI ist die größte Hürde – das Programmieren – fast vollständig verschwunden. Deine Aufgabe verschiebt sich vom "Coden" zum "Kuratieren" und "Beschreiben".

Viel Erfolg beim Erstellen deines ersten Online-Shops!

0