Seminar ioBroker – VIS-2 Widgetentwicklung mit React und TypeScript

Eigene Widgets schließen funktionale oder gestalterische Lücken, müssen jedoch mit Datenmodell, Editor, Laufzeit und verschiedenen Zielgeräten zuverlässig zusammenspielen. Das Seminar behandelt deshalb Entwicklung und Produktqualität als Einheit.

Ein Widgetpaket wird schrittweise von der leeren Struktur bis zur installierbaren Version aufgebaut. Eigenschaften, State-Bindungen, Bedienereignisse, Styling, Tests und Dokumentation werden fortlaufend geprüft.

Inhaltsverzeichnis

• Lernziele
• Schrittweise Seminarinhalte
• Tag 1: Entwicklungsumgebung und Widgetgrundstruktur
• Tag 2: Eigenschaften, Datenbindung und Interaktion
• Tag 3: Styling, Lifecycle und Qualität
• Tag 4: Tests, Paketierung und Wartung
• Praxisübungen und Laborszenarien
• Zielgruppe und Voraussetzungen
• Didaktik und Arbeitsweise

Lernziele

• VIS-2-Widgetarchitektur und React-/TypeScript-Projektstruktur verstehen.
• Editoreigenschaften, Standardwerte, Validierung und Datenbindungen implementieren.
• Lifecycle, Zustandsänderungen, Bedienereignisse und Fehlerfälle robust behandeln.
• Responsive Styling, Barrierearmut und Performance berücksichtigen.
• Tests, Paketierung, Versionsführung und Wartungsdokumentation etablieren.

Schrittweise Seminarinhalte

Tag 1: Entwicklungsumgebung und Widgetgrundstruktur

1. Schritt 1: Anwendungsfall, Zielnutzer, Datenpunkte, Interaktionen, Zustände und Darstellungsvarianten spezifizieren.
2. Schritt 2: TypeScript-, React- und lokale VIS-2-Entwicklungsumgebung reproduzierbar vorbereiten.
3. Schritt 3: Widgetpaket, Metadaten, Klassenstruktur und registrierte Widgettypen anlegen.
4. Schritt 4: Ein minimales Widget im Editor und in der Laufzeit rendern.
5. Schritt 5: Build-, Prüf- und lokale Installationsschritte dokumentieren.

Tag 2: Eigenschaften, Datenbindung und Interaktion

1. Schritt 1: Eigenschaften nach Inhalt, Darstellung, Verhalten und Datenquelle gruppieren.
2. Schritt 2: Standardwerte, Auswahlfelder, Validierung und kontextabhängige Editorfelder implementieren.
3. Schritt 3: State-Bindungen abonnieren, Werte typisieren, formatieren und bei fehlenden Daten absichern.
4. Schritt 4: Bedienereignisse in kontrollierte Schreibaktionen mit Rückmeldung und Fehlerzustand übersetzen.
5. Schritt 5: Mehrere Widgetinstanzen ohne globale Seiteneffekte testen.

Tag 3: Styling, Lifecycle und Qualität

1. Schritt 1: Responsive Layouts, Größenänderung, Theme-Eigenschaften und wiederverwendbare Styles umsetzen.
2. Schritt 2: Initialisierung, Aktualisierung und Aufräumen von Abonnements und Timern korrekt behandeln.
3. Schritt 3: Lade-, Leer-, Fehler-, Offline- und Berechtigungszustände sichtbar gestalten.
4. Schritt 4: Tastaturbedienung, Kontrast, Beschriftung und verständliche Rückmeldung prüfen.
5. Schritt 5: Renderhäufigkeit, Datenabonnements und große Datenmengen hinsichtlich Performance optimieren.

Tag 4: Tests, Paketierung und Wartung

1. Schritt 1: Komponenten- und Logiktests für Werte, Eigenschaften, Interaktionen und Fehlerfälle erstellen.
2. Schritt 2: Widget in mehreren Views, Auflösungen, Themes und Browsergrößen abnehmen.
3. Schritt 3: Paket bauen, in einer sauberen Umgebung installieren und Upgradeverhalten prüfen.
4. Schritt 4: Versionsschema, Änderungsdokumentation, Beispielkonfiguration und Migrationshinweise erstellen.
5. Schritt 5: Freigabecheckliste für Sicherheit, Abhängigkeiten, Performance, Barrierearmut und Support abschließen.

Praxisübungen und Laborszenarien

• Entwicklung eines konfigurierbaren Status- und Bedienwidgets.
• Implementierung typisierter State-Bindungen mit Offline- und Fehleranzeige.
• Responsive Darstellung mit Theme- und Größenvarianten.
• Automatisierte Tests für Editorparameter und Bedienereignisse.
• Paketierung und Installation des Widgetpakets in einer sauberen VIS-2-Umgebung.

Zielgruppe und Voraussetzungen

Zielgruppe: Frontend- und TypeScript-Entwicklung, technische Visualisierung und Teams mit eigenen Bedien- oder Darstellungsanforderungen.

Voraussetzungen: Sichere Kenntnisse in JavaScript oder TypeScript, HTML und CSS sowie Grundlagen in React und ioBroker VIS-2.

Didaktik und Arbeitsweise

Kurze Fachimpulse werden unmittelbar durch Demonstrationen, geführte Konfigurationsschritte, praktische Übungen und kontrollierte Fehlerfälle vertieft. Jeder Arbeitsabschnitt verwendet definierte Ausgangswerte, Prüfpunkte und Dokumentationsanforderungen, damit die erarbeiteten Abläufe reproduzierbar und betrieblich nutzbar bleiben.