🛠️ Apps entwickeln › Apps mit Gemini

Apps mit Gemini

Digitales Pausenbrot · 14. April 2026

HTML generieren mit Googles KI

1 HTML mit Gemini erstellen ▾

Gemini kann ebenfalls HTML-Apps erstellen und hat ein paar eigene Stärken.

So geht's

  1. Öffne gemini.google.com.
  2. Schreibe deinen Prompt — gleiche Struktur wie bei Claude und ChatGPT.
  3. Gemini gibt dir den Code aus. Bei manchen Prompts öffnet sich auch Canvas mit Vorschau.
  4. Kopiere den Code und speichere ihn als .html-Datei.

Geminis Stärken für Apps

  • Canvas-Preview: Du siehst die App direkt im Chat-Fenster, ohne sie erst auf dem Rechner zu speichern.
  • Bilder mit Nano Banana: Frage Gemini, passende Illustrationen oder beschriftete Grafiken zu generieren, die du in die App einbauen kannst.
  • Aktueller Wissensstand: Gemini kann beim Prompten auf den aktuellen Wissensstand zugreifen. Wichtig: Die generierte HTML-Datei ist ein Snapshot – sie ruft danach keine Live-Daten ab. Wer Live-Daten in der App braucht, muss eine echte API-Integration einbauen (Fortgeschrittenen-Thema).
Screenshot: Gemini mit Code-Ausgabe für eine HTML-App
2 Code speichern und testen ▾

Der Ablauf ist identisch wie bei ChatGPT:

  1. Code aus Gemini kopieren.
  2. In einem Texteditor einfügen.
  3. Als .html-Datei speichern.
  4. Doppelklick zum Testen im Browser.

Häufiges Problem

Gemini teilt den Code manchmal in mehrere Dateien auf (HTML + CSS + JavaScript separat). Wenn das passiert, schreibe:

Bitte kombiniere alles in eine einzige HTML-Datei. CSS und JavaScript sollen inline sein, keine externen Dateien.

Dann bekommst du eine einzige Datei, die du direkt verwenden kannst.

Wenn Gemini den Code in Canvas anzeigt, kannst du ihn dort direkt bearbeiten und die Vorschau nutzen.
3 App veröffentlichen ▾

Wie bei ChatGPT brauchst du einen Host, um Gemini-Apps zu teilen.

Option 1: Lerndrop.ch (empfohlen für kurzfristige Nutzung)

Lade die HTML-Datei auf lerndrop.ch hoch. Du bekommst einen Link zum Teilen. Hinweis: Apps bleiben dort 30 Tage online. Für dauerhaftes Hosting nutze GitHub Pages (eigenes Tutorial).

Option 2: Datei direkt verteilen

Für Offline-Nutzung kannst du die HTML-Datei auch direkt verteilen:

  • Per E-Mail als Anhang
  • Über die Schulplattform (Teams, Moodle, etc.)
  • Per USB-Stick oder AirDrop

Die Datei funktioniert überall — ohne Internet.

Für den Unterricht im Schulzimmer ist die direkte Verteilung oft am einfachsten. Kein Link, kein Internet — einfach Datei öffnen.
4 Praxis: Interaktive Zeitleiste ▾

Erstelle eine interaktive Zeitleiste mit Gemini. Kopiere diesen Prompt:

Erstelle eine interaktive Zeitleiste als standalone HTML-Datei. Thema: Schweizer Geschichte von 1291 bis heute. 12 wichtige Ereignisse mit Datum, Titel und kurzer Beschreibung (2-3 Sätze). Design: horizontale Zeitleiste, scrollbar, beim Klick auf ein Ereignis öffnet sich eine Detailansicht. Moderne Optik, Schweizer Farben (Rot/Weiss). Alles in einer Datei.

Verfeinern

Nachdem Gemini die Zeitleiste erstellt hat, kannst du anpassen:

  • «Füge Bilder-Platzhalter hinzu»
  • «Mach die Texte einfacher für die 1. Sek»
  • «Füge einen Quiz-Modus hinzu: Ereignisse den richtigen Daten zuordnen»

Lade die fertige Datei auf Lerndrop.ch hoch und teile sie.

Screenshot: Die fertige interaktive Zeitleiste im Browser mit einem geöffneten Ereignis-Detail