🛠️ Apps entwickeln › Apps mit ChatGPT

Apps mit ChatGPT

Digitales Pausenbrot · 14. April 2026

HTML-Dateien generieren mit Canvas

1 So erstellst du HTML mit ChatGPT ▾

ChatGPT kann genauso HTML-Apps erstellen wie Claude. Der Unterschied: Es gibt keine Artefakte mit Live-Vorschau. Du bekommst den Code als Text.

Der Ablauf

  1. Öffne chatgpt.com.
  2. Schreibe deinen Prompt (gleiche Struktur wie bei Claude).
  3. ChatGPT gibt dir den HTML-Code aus.
  4. Kopiere den Code und speichere ihn als .html-Datei.

Tipp: Canvas nutzen

Wenn ChatGPT den Code in Canvas öffnet, kannst du ihn direkt bearbeiten. Canvas ist ein Bearbeitungsfenster neben dem Chat — ähnlich wie Claudes Artefakte, aber ohne Live-Vorschau der App.

Screenshot: ChatGPT mit Canvas-Ansicht, die HTML-Code zeigt
2 HTML-Datei speichern und testen ▾

Du hast den Code von ChatGPT bekommen. Jetzt musst du ihn speichern:

Schritt 1: Code kopieren

Markiere den gesamten Code im Chat (oder in Canvas) und kopiere ihn.

Schritt 2: Datei erstellen

  1. Öffne einen Texteditor (z.B. TextEdit auf Mac, Notepad auf Windows).
  2. Wichtig auf Mac: Gehe zu Format → «In reinen Text umwandeln».
  3. Wichtig auf Windows: Beim Speichern unter Dateityp «Alle Dateien» wählen, sonst hängt Notepad automatisch .txt an und die Datei heisst meine-app.html.txt.
  4. Füge den Code ein.
  5. Speichere als meine-app.html (Dateiendung .html ist wichtig!).

Schritt 3: Testen

Doppelklicke auf die Datei. Sie öffnet sich im Browser. Prüfe, ob alles funktioniert.

Screenshot: TextEdit mit eingefügtem HTML-Code und dem Speichern-Dialog mit .html Endung
Funktioniert etwas nicht? Kopiere die Fehlermeldung zurück in den Chat. ChatGPT kann den Code reparieren.
3 App veröffentlichen auf Lerndrop.ch ▾

Anders als bei Claude kannst du ChatGPT-Apps nicht direkt per Link teilen. Du brauchst einen Host — einen Ort im Internet, wo die Datei liegt.

Lerndrop.ch

Lerndrop.ch ist eine Schweizer Plattform, die genau dafür gemacht ist. So geht's:

  1. Gehe auf lerndrop.ch.
  2. Lade deine HTML-Datei hoch.
  3. Du bekommst einen Link. Diesen Link kannst du teilen.

Der Link funktioniert auf jedem Gerät. Deine Schüler:innen brauchen kein Konto.

⚠️ Wichtig: Apps auf Lerndrop.ch sind 30 Tage verfügbar. Für dauerhaftes Hosting nutze GitHub Pages (eigenes Tutorial im gleichen Block).

Screenshot: Die Lerndrop.ch-Oberfläche mit dem Upload-Bereich und einem generierten Link
Lerndrop.ch ist speziell für Schweizer Schulen gedacht. Die Daten bleiben in der Schweiz – aber nur 30 Tage.
4 Praxis: Vom Prompt zur fertigen App ▾

Lass uns den kompletten Workflow durchspielen:

Schritt 1: Prompt schreiben

Erstelle ein interaktives Periodensystem als standalone HTML-Datei. Wenn man auf ein Element klickt, erscheint eine Info-Box mit: Name, Symbol, Ordnungszahl, Gruppe und einem Alltagsbeispiel. Design: clean, farbcodiert nach Elementgruppen. Für die 2. Sek.

Schritt 2: Code speichern

Kopiere den Code → Speichere als periodensystem.html → Teste im Browser.

Schritt 3: Verfeinern

Sag ChatGPT: «Füge eine Suchfunktion hinzu» oder «Mach es responsive für Tablets».

Schritt 4: Hochladen

Lade die fertige Datei auf lerndrop.ch hoch und teile den Link.

Screenshot: Das fertige Periodensystem im Browser — farbcodiert mit einer offenen Info-Box