Modul 5 – Eine Desktop-App

🏠 Kursübersicht · Modul 5 von 8

🎯 Lernziele

Nach diesem Modul kannst du …

⏱️ Zeit: ca. 50 Minuten · Voraussetzungen: Modul 2, Node.js (node --version). Für die Erweiterung ist opencode (Weg A/B) empfohlen, weil hier mehrere Dateien zusammenarbeiten.

Was ist Electron?

Mit Electron baut man Desktop-Apps mit denselben Bausteinen wie Webseiten (HTML, CSS, JavaScript) – aber das Ergebnis ist ein richtiges Programm mit eigenem Fenster, das lokal auf deinem Rechner läuft. Das ist motivierend, weil sofort eine „echte” App entsteht.

Eine Electron-App besteht typischerweise aus diesen Dateien:

Datei Aufgabe
package.json Projektinfos & Startbefehl
main.js Hauptprozess – erzeugt das Fenster, greift auf Dateien zu
preload.js sichere Brücke zwischen Fenster und Hauptprozess
index.html die Oberfläche
renderer.js das Verhalten im Fenster
styles.css das Aussehen

🛠️ Praxis 1: Die Notiz-App starten

Im Kurs liegt eine fertige, per Vibe Coding gebaute Notiz-App unter beispiele/notizen-app/. Links eine Notizliste, rechts ein Editor, Notizen werden lokal gespeichert.

So startest du sie:

cd beispiele/notizen-app
npm install     # lädt einmalig die Abhängigkeiten (Electron)
npm start       # startet die App

Beim ersten Mal dauert npm install einen Moment. Danach öffnet npm start das App-Fenster.

Testen: Lege eine neue Notiz an, tippe etwas, wähle eine andere Notiz, lösche eine. Funktioniert alles?

Hinweis: node_modules (die heruntergeladenen Abhängigkeiten) gehören nicht ins Projekt-Repository – sie werden mit npm install lokal erzeugt. Deshalb fehlen sie hier bewusst.

🛠️ Praxis 2: Eine Suchfunktion ergänzen

Die App hat noch keine Suche. Das bauen wir per Vibe Coding ein. Starte opencode im Ordner der App:

cd beispiele/notizen-app
opencode

🧠 Verstehens-Check vorab: Die App besteht aus sechs Dateien (Tabelle oben). Rate zuerst selbst: In welchen Dateien muss sich für eine Suchfunktion etwas ändern – und warum? Frage dann:

Ich möchte eine Suchfunktion über der Notizliste ergänzen. Erkläre mir zuerst
nur, welche Dateien du dafür ändern müsstest und warum. Ändere noch nichts.

Vergleiche die Antwort mit deiner Vermutung – dann erst loslegen. Bei einer App aus mehreren Dateien zeigt dir dieser Schritt, wie die Teile zusammenspielen.

Schritt 1 – Beschreiben

Füge dieser Notiz-App eine Suchfunktion hinzu. Über der Notizliste soll ein
Suchfeld erscheinen. Während ich tippe, soll die Liste nur noch die Notizen
zeigen, deren Titel zum Suchbegriff passt.

Schritt 2 – Testen

App neu starten (npm start) und ausprobieren: Wird die Liste beim Tippen gefiltert?

Schritt 3 – Nachsteuern (ein typischer Fehler)

Oft unterscheidet die erste Version Groß- und Kleinschreibung. Beschreibe das Problem:

Die Suche unterscheidet Groß- und Kleinschreibung. Mach sie unabhängig davon,
sodass "notiz" auch "Notiz" findet.

Erneut starten, erneut testen. Geschafft – du hast eine echte App erweitert. 🎉

Aufräumen & Absichern

Für eine ernsthaftere App lohnt es sich, die KI nach diesen Punkten zu fragen:

Merksatz: Electron ist besonders motivierend, weil sehr schnell eine echte App sichtbar wird. Genau deshalb braucht man hier mehr Sorgfalt bei Sicherheit und Projektstruktur als bei einer einfachen Webseite.

💡🎓 Hinweise

💡 Für Schüler: Überlege dir eine eigene kleine Erweiterung und beschreibe sie der KI – z. B. „zeige die Anzahl der Notizen an” oder „füge einen Dunkelmodus-Schalter hinzu”. Teste nach jeder Änderung.

🎓 Für Lehrkräfte: Dieses Modul passt zum Szenario „KI-gestütztes Programmieren lernen” nach dem Dreischritt Generieren → Erklären lassen → Selbst verändern. Bitte die Lernenden, sich eine generierte Funktion von der KI erklären zu lassen, bevor sie sie ändern – so wird aus Nutzung Verstehen.

✅ Selbstcheck

1. Wozu dient npm install, und warum liegt node_modules nicht im Repository?

Lösung `npm install` lädt die benötigten Abhängigkeiten (hier Electron) herunter. Diese sind groß und reproduzierbar, deshalb werden sie lokal erzeugt und **nicht** eingecheckt.

2. Die Suche findet „Notiz” nicht, wenn du „notiz” tippst. Wie beschreibst du den Fehler?

Lösung Als Verhalten, nicht als Code: „Die Suche unterscheidet Groß- und Kleinschreibung – mach sie unabhängig davon (case-insensitive)."

3. Warum braucht eine Electron-App mehr Sorgfalt als eine einfache Webseite?

Lösung Weil sie als echtes Programm auf dem Rechner läuft, auf Dateien zugreifen kann und aus mehreren zusammenarbeitenden Teilen besteht – das erhöht die Anforderungen an Sicherheit und Struktur.

📋 Aufgaben

Abhaken speichert direkt in dieser Datei. In MindGraph Notes erscheinen diese Aufgaben automatisch im Tasks-Widget und am Fälligkeitstag im Focus. Übersicht & Kursfahrplan: Aufgaben.md.

⬅️ Modul 4 · 🏠 Übersicht · ➡️ Modul 6: Sicherheit & Datenschutz