Kapitel 18: Lernressourcen-Empfehlungen

In diesem Kapitel finden Sie sorgfältig ausgewählte Ressourcen zur weiteren Erlernung von Electron.

18.1 Offizielle Dokumentation

Electron Offizielle Dokumentation

Webseite: https://www.electronjs.org/docs

Vorteile:

• Autoritative und aktuellste Informationen
• Vollständige API-Referenz
• Offizielle Anleitungen und Best Practices

Wichtige Abschnitte:

├── Einführung
│   ├── Installation
│   ├── Erste Schritte
│   └── Prozessarchitektur
├── API-Referenz
│   ├── Hauptprozess-Module
│   ├── Renderer-Prozess-Module
│   └── IPC-Kommunikation
├── Best Practices
│   ├── Sicherheit
│   ├── Performance
│   └── Packaging
└── Beispiele
    ├── Quick Start
    ├── Beispiel-Apps
    └── Code-Beispiele

Electron Schnellstart (Quick Start)

Webseite: https://www.electronjs.org/docs/latest/tutorial/quick-start

Inhalt:

• Grundlegende Projektstruktur
• Erstellung des ersten Fensters
• IPC-Kommunikation
• Packaging und Verteilung

18.2 Anfängerfreundliche Online-Übungswerkzeuge

Electron Fiddle

Webseite: https://electronjs.org/fiddle

Funktionen:

• Online-Editor für Electron-Code
• Vorlagen für schnelles Testen
• Keine lokale Installation erforderlich
• Code teilen und embedden

Verwendung:

1. Webseite besuchen
2. Vorlage auswählen oder neuen Code schreiben
3. "Run"-Button klicken
4. Ergebnis in Echtzeit sehen

CodeSandbox (Electron-Vorlagen)

Webseite: https://codesandbox.io/

Vorteile:

• Online-Entwicklungsumgebung
• Vorlagen für Electron-Projekte
• Zusammenarbeit und Teilen von Projekten

StackBlitz

Webseite: https://stackblitz.com/

Vorteile:

• Online VS Code-ähnliche Oberfläche
• Electron-Vorlagen verfügbar
• Echtzeit-Vorschau

18.3 Hochwertige Lernvideos und Texttutorials

Video-Tutorials (Deutsch)

YouTube-Kanäle

1. Web Dev Simplified (Englisch, aber leicht verständlich)

   • Thema: "Electron Tutorial for Beginners"
   • Dauer: Ca. 1 Stunde
   • Inhalt: Von Grund auf eine App bauen

2. Traversy Media (Englisch)

   • Thema: "Electron Crash Course"
   • Dauer: Ca. 1,5 Stunden
   • Inhalt: Kompletter Überblick

3. Academind (Englisch/Deutsch)

   • Thema: "Electron - Der komplette Leitfaden"
   • Dauer: Mehrere Videos
   • Inhalt: Von Grund auf bis zur Veröffentlichung

Video-Tutorials (Chinesisch - falls gewünscht)

1. Bilibili-Electron-Tutorials

   • Suche nach: "Electron 教程"
   • Viele kostenlose Video-Kurse

2. YouTube: Electron 开发视频教程

   • Umfassende Tutorials auf Chinesisch

Texttutorials (Deutsch)

MDN Web Docs (Allgemeine Web-Entwicklung)

Webseite: https://developer.mozilla.org/de/

Relevanz für Electron:

• HTML/CSS/JavaScript-Grundlagen
• DOM-API-Referenz
• Netzwerk-API-Referenz

JavaScript.info (Deutsch)

Webseite: https://javascript.info/

Relevanz für Electron:

• Moderne JavaScript-Konzepte
• Asynchrone Programmierung
• Promise- und Async/Await-Konzepte

18.4 Praxisprojekte zum Üben

GitHub: Electron-Beispielprojekte

Offizielles electron-quick-start

GitHub: https://github.com/electron/electron-quick-start

Inhalt:

• Minimales Electron-Projekt
• Kommentierte Codebasis
• Perfekt für den Schnellstart

Electron-Beispiel-Apps (electron/sample-apps)

GitHub: https://github.com/electron/sample-apps

Enthält:

• Markdown-Editor
• System-Tray-App
• Lokaler Datei-Explorer
• Und viele mehr

Eigene Projekte zum Üben

Projektideen für Anfänger

1. Taschenrechner-App

   • Einfaches UI mit Tasten
   • Berechnungslogik
   • Lokaler Speicher für Verlauf

2. Wetter-App

   • API-Aufruf (OpenWeatherMap)
   • UI für Wetteranzeige
   • Lokaler Speicher für letzte Stadt

3. Todon-App (Aufgabenverwaltung)

   • Aufgaben hinzufügen/löschen
   • Lokaler Speicher (LocalStorage/electron-store)
   • Erinnerungsbenachrichtigungen

Projektideen für Fortgeschrittene

1. Code-Editor (vereinfacht)

   • Texteditor mit Syntax-Highlighting
   • Datei öffnen/speichern
   • Mehrere Tabs

2. Musik-Player

   • Audiodateien abspielen
   • Playliste verwalten
   • System-Mediensteuerung

3. E-Mail-Client (vereinfacht)

   • E-Mails empfangen (IMAP)
   • E-Mails senden (SMTP)
   • Lokaler Speicher für E-Mails

18.5 Häufig verwendete Electron-Plugins

Plugins nach Kategorie

1. Datenspeicherung

Plugin	Zweck	Installation
electron-store	Einfache persistene Datenspeicherung	npm install electron-store
lowdb	Leichtgewichtige lokale JSON-Datenbank	npm install lowdb
nedb	Eingebettete NoSQL-Datenbank	npm install nedb

2. Logging

Plugin	Zweck	Installation
electron-log	Professionelles Logging für Electron	npm install electron-log
winston	Vielseitiges Logging-Framework	npm install winston

3. Aktualisierung

Plugin	Zweck	Installation
electron-updater	Automatische Aktualisierung	npm install electron-updater

4. Sicherheit

Plugin	Zweck	Installation
electron-devtools-installer	DevTools-Erweiterungen installieren	npm install electron-devtools-installer

5. UI-Frameworks

Framework	Zweck	Webseite
photon	Electron-UI-Kit im macOS-Stil	https://photonkit.com/
buefy	Vue-UI-Komponenten für Electron	https://buefy.org/

Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• Offizielle Dokumentationsressourcen zu nutzen
• Online-Übungswerkzeuge (Electron Fiddle, CodeSandbox) zu verwenden
• Hochwertige Lernvideos und Texttutorials zu finden
• Praxisprojekte zum Üben auszuwählen
• Häufig verwendete Electron-Plugins einzusetzen

Damit endet unsere Electron-Reise! Viel Erfolg bei Ihrer weiteren Entwicklung mit Electron!