Seminar ThingsBoard CE/PE – Custom Widgets und Dashboard-Entwicklung

Das Seminar vermittelt die Entwicklung wiederverwendbarer Dashboard-Komponenten. Von Widget-Typen und Datenquellen über HTML, CSS, JavaScript, Einstellungen, Aktionen und State Navigation bis zu Packaging, Tests, Performance und sicherer Veröffentlichung entsteht ein vollständiger Entwicklungsprozess.

Inhaltsverzeichnis

• Lernziele und fachliche Einordnung.
• Schrittweise Seminarinhalte.
• Praxisübungen und Laborszenarien.
• Zielgruppe und Voraussetzungen.
• Didaktik und Arbeitsweise.

Lernziele

• Widget-Architektur, Datenquellen und Lebenszyklus der Dashboard-Laufzeit sicher einordnen.
• Eigene Visualisierungs-, Steuerungs- und Karten-Widgets strukturiert entwickeln.
• Konfigurierbare Einstellungen, Aktionen, Zustände und Benutzerinteraktionen umsetzen.
• Datenzugriffe, Rendering, Ressourcenverbrauch und Sicherheitsgrenzen kontrollieren.
• Widget-Bibliotheken versionieren, testen, dokumentieren und wiederverwendbar bereitstellen.

Schrittweise Seminarinhalte

1. Widget-Architektur und Entwicklungsumgebung

Schwerpunkt: Widget Bundles, Widget Types, Timeseries, Latest Values, RPC, Alarm- und Static-Widgets, Editor, Debugging, Beispielentitäten und Versionsstrategie.

1. Ausgangslage, Schutzbedarf, technische Randbedingungen und Abnahmekriterien für den Themenblock „Widget-Architektur und Entwicklungsumgebung“ erfassen.
2. Relevante Komponenten, Entitäten, Rollen, Schnittstellen und Abhängigkeiten anhand von Widget Bundles, Widget Types, Timeseries, Latest Values, RPC, Alarm- und Static-Widgets, Editor, Debugging, Beispielentitäten und Versionsstrategie modellieren.
3. Die erforderliche Konfiguration oder Prozessfolge in einer kontrollierten Laborumgebung schrittweise umsetzen und jeden Zwischenstand protokollieren.
4. Funktion, Berechtigungen, Datenfluss, Protokollierung, Fehlerverhalten und Grenzfälle mit definierten Positiv- und Negativtests prüfen.
5. Als Arbeitsergebnis eine reproduzierbare Entwicklungs- und Testumgebung dokumentieren, fachlich abnehmen und in einen wiederholbaren Betriebs- oder Entwicklungsstandard überführen.

2. Datenquellen und Subscription-Lifecycle

Schwerpunkt: Aliases, Datasources, Keys, Zeitfenster, Aggregation, Subscription-Callbacks, Datenformate, leere Datenmengen und Aktualisierungsraten.

1. Ausgangslage, Schutzbedarf, technische Randbedingungen und Abnahmekriterien für den Themenblock „Datenquellen und Subscription-Lifecycle“ erfassen.
2. Relevante Komponenten, Entitäten, Rollen, Schnittstellen und Abhängigkeiten anhand von Aliases, Datasources, Keys, Zeitfenster, Aggregation, Subscription-Callbacks, Datenformate, leere Datenmengen und Aktualisierungsraten modellieren.
3. Die erforderliche Konfiguration oder Prozessfolge in einer kontrollierten Laborumgebung schrittweise umsetzen und jeden Zwischenstand protokollieren.
4. Funktion, Berechtigungen, Datenfluss, Protokollierung, Fehlerverhalten und Grenzfälle mit definierten Positiv- und Negativtests prüfen.
5. Als Arbeitsergebnis ein belastbares Datenzugriffs- und Subscription-Modell dokumentieren, fachlich abnehmen und in einen wiederholbaren Betriebs- oder Entwicklungsstandard überführen.

3. HTML-Struktur und CSS-Layout

Schwerpunkt: DOM-Struktur, responsive Container, Größenänderung, Typografie, Themes, CSS-Kapselung, Accessibility und Druckdarstellung.

1. Ausgangslage, Schutzbedarf, technische Randbedingungen und Abnahmekriterien für den Themenblock „HTML-Struktur und CSS-Layout“ erfassen.
2. Relevante Komponenten, Entitäten, Rollen, Schnittstellen und Abhängigkeiten anhand von DOM-Struktur, responsive Container, Größenänderung, Typografie, Themes, CSS-Kapselung, Accessibility und Druckdarstellung modellieren.
3. Die erforderliche Konfiguration oder Prozessfolge in einer kontrollierten Laborumgebung schrittweise umsetzen und jeden Zwischenstand protokollieren.
4. Funktion, Berechtigungen, Datenfluss, Protokollierung, Fehlerverhalten und Grenzfälle mit definierten Positiv- und Negativtests prüfen.
5. Als Arbeitsergebnis ein responsives und wartbares Widget-Grundlayout dokumentieren, fachlich abnehmen und in einen wiederholbaren Betriebs- oder Entwicklungsstandard überführen.

4. JavaScript-Logik und Visualisierung

Schwerpunkt: Initialisierung, Datenaufbereitung, Rendering, Events, externe Bibliotheken, Cleanup, Fehlerbehandlung, Speicherverwaltung und browserseitige Performance.

1. Ausgangslage, Schutzbedarf, technische Randbedingungen und Abnahmekriterien für den Themenblock „JavaScript-Logik und Visualisierung“ erfassen.
2. Relevante Komponenten, Entitäten, Rollen, Schnittstellen und Abhängigkeiten anhand von Initialisierung, Datenaufbereitung, Rendering, Events, externe Bibliotheken, Cleanup, Fehlerbehandlung, Speicherverwaltung und browserseitige Performance modellieren.
3. Die erforderliche Konfiguration oder Prozessfolge in einer kontrollierten Laborumgebung schrittweise umsetzen und jeden Zwischenstand protokollieren.
4. Funktion, Berechtigungen, Datenfluss, Protokollierung, Fehlerverhalten und Grenzfälle mit definierten Positiv- und Negativtests prüfen.
5. Als Arbeitsergebnis eine robuste clientseitige Widget-Implementierung dokumentieren, fachlich abnehmen und in einen wiederholbaren Betriebs- oder Entwicklungsstandard überführen.

5. Settings Schema und konfigurierbare Parameter

Schwerpunkt: Default Settings, JSON-Schema, Formulare, Validierung, Farben, Schwellwerte, Einheiten, Texte, Feature-Schalter und Migration alter Einstellungen.

1. Ausgangslage, Schutzbedarf, technische Randbedingungen und Abnahmekriterien für den Themenblock „Settings Schema und konfigurierbare Parameter“ erfassen.
2. Relevante Komponenten, Entitäten, Rollen, Schnittstellen und Abhängigkeiten anhand von Default Settings, JSON-Schema, Formulare, Validierung, Farben, Schwellwerte, Einheiten, Texte, Feature-Schalter und Migration alter Einstellungen modellieren.
3. Die erforderliche Konfiguration oder Prozessfolge in einer kontrollierten Laborumgebung schrittweise umsetzen und jeden Zwischenstand protokollieren.
4. Funktion, Berechtigungen, Datenfluss, Protokollierung, Fehlerverhalten und Grenzfälle mit definierten Positiv- und Negativtests prüfen.
5. Als Arbeitsergebnis ein verständliches und validiertes Einstellungsmodell dokumentieren, fachlich abnehmen und in einen wiederholbaren Betriebs- oder Entwicklungsstandard überführen.

6. Aktionen, RPC und Benutzerinteraktion

Schwerpunkt: Click Actions, Entity Actions, RPC-Kommandos, Bestätigung, Eingabedialoge, Rechteprüfung, Rückmeldung, Timeouts und Fehleranzeige.

1. Ausgangslage, Schutzbedarf, technische Randbedingungen und Abnahmekriterien für den Themenblock „Aktionen, RPC und Benutzerinteraktion“ erfassen.
2. Relevante Komponenten, Entitäten, Rollen, Schnittstellen und Abhängigkeiten anhand von Click Actions, Entity Actions, RPC-Kommandos, Bestätigung, Eingabedialoge, Rechteprüfung, Rückmeldung, Timeouts und Fehleranzeige modellieren.
3. Die erforderliche Konfiguration oder Prozessfolge in einer kontrollierten Laborumgebung schrittweise umsetzen und jeden Zwischenstand protokollieren.
4. Funktion, Berechtigungen, Datenfluss, Protokollierung, Fehlerverhalten und Grenzfälle mit definierten Positiv- und Negativtests prüfen.
5. Als Arbeitsergebnis einen sicheren interaktiven Steuerungsablauf dokumentieren, fachlich abnehmen und in einen wiederholbaren Betriebs- oder Entwicklungsstandard überführen.

7. State Controller und Dashboard-Navigation

Schwerpunkt: Dashboard States, State Parameters, Drill-down, Entity Selection, Back Navigation, modale Ansichten, URL-Zustand und Kontextübergabe.

1. Ausgangslage, Schutzbedarf, technische Randbedingungen und Abnahmekriterien für den Themenblock „State Controller und Dashboard-Navigation“ erfassen.
2. Relevante Komponenten, Entitäten, Rollen, Schnittstellen und Abhängigkeiten anhand von Dashboard States, State Parameters, Drill-down, Entity Selection, Back Navigation, modale Ansichten, URL-Zustand und Kontextübergabe modellieren.
3. Die erforderliche Konfiguration oder Prozessfolge in einer kontrollierten Laborumgebung schrittweise umsetzen und jeden Zwischenstand protokollieren.
4. Funktion, Berechtigungen, Datenfluss, Protokollierung, Fehlerverhalten und Grenzfälle mit definierten Positiv- und Negativtests prüfen.
5. Als Arbeitsergebnis eine konsistente Navigation zwischen Übersichts- und Detailzuständen dokumentieren, fachlich abnehmen und in einen wiederholbaren Betriebs- oder Entwicklungsstandard überführen.

8. Karten, Geodaten und kundenspezifische Darstellungen

Schwerpunkt: Koordinaten, Marker, Polylines, Layer, Geofencing-Darstellung, Clustering, Tooltips, Kartenaktionen und große Objektmengen.

1. Ausgangslage, Schutzbedarf, technische Randbedingungen und Abnahmekriterien für den Themenblock „Karten, Geodaten und kundenspezifische Darstellungen“ erfassen.
2. Relevante Komponenten, Entitäten, Rollen, Schnittstellen und Abhängigkeiten anhand von Koordinaten, Marker, Polylines, Layer, Geofencing-Darstellung, Clustering, Tooltips, Kartenaktionen und große Objektmengen modellieren.
3. Die erforderliche Konfiguration oder Prozessfolge in einer kontrollierten Laborumgebung schrittweise umsetzen und jeden Zwischenstand protokollieren.
4. Funktion, Berechtigungen, Datenfluss, Protokollierung, Fehlerverhalten und Grenzfälle mit definierten Positiv- und Negativtests prüfen.
5. Als Arbeitsergebnis ein leistungsfähiges räumliches Visualisierungskonzept dokumentieren, fachlich abnehmen und in einen wiederholbaren Betriebs- oder Entwicklungsstandard überführen.

9. Tests, Performance und Sicherheit

Schwerpunkt: Unit-nahe Prüfungen, Browsermatrix, Datenvolumen, Aktualisierungsfrequenz, XSS-Risiken, Eingabevalidierung, Fehlerzustände, Profiling und Abnahmekriterien.

1. Ausgangslage, Schutzbedarf, technische Randbedingungen und Abnahmekriterien für den Themenblock „Tests, Performance und Sicherheit“ erfassen.
2. Relevante Komponenten, Entitäten, Rollen, Schnittstellen und Abhängigkeiten anhand von Unit-nahe Prüfungen, Browsermatrix, Datenvolumen, Aktualisierungsfrequenz, XSS-Risiken, Eingabevalidierung, Fehlerzustände, Profiling und Abnahmekriterien modellieren.
3. Die erforderliche Konfiguration oder Prozessfolge in einer kontrollierten Laborumgebung schrittweise umsetzen und jeden Zwischenstand protokollieren.
4. Funktion, Berechtigungen, Datenfluss, Protokollierung, Fehlerverhalten und Grenzfälle mit definierten Positiv- und Negativtests prüfen.
5. Als Arbeitsergebnis einen vollständigen technischen Test- und Sicherheitskatalog dokumentieren, fachlich abnehmen und in einen wiederholbaren Betriebs- oder Entwicklungsstandard überführen.

10. Packaging, Versionierung und Veröffentlichung

Schwerpunkt: Widget Bundle, Export und Import, Namenskonventionen, semantische Versionierung, Abhängigkeiten, Freigabe, Rückwärtskompatibilität und Dokumentation.

1. Ausgangslage, Schutzbedarf, technische Randbedingungen und Abnahmekriterien für den Themenblock „Packaging, Versionierung und Veröffentlichung“ erfassen.
2. Relevante Komponenten, Entitäten, Rollen, Schnittstellen und Abhängigkeiten anhand von Widget Bundle, Export und Import, Namenskonventionen, semantische Versionierung, Abhängigkeiten, Freigabe, Rückwärtskompatibilität und Dokumentation modellieren.
3. Die erforderliche Konfiguration oder Prozessfolge in einer kontrollierten Laborumgebung schrittweise umsetzen und jeden Zwischenstand protokollieren.
4. Funktion, Berechtigungen, Datenfluss, Protokollierung, Fehlerverhalten und Grenzfälle mit definierten Positiv- und Negativtests prüfen.
5. Als Arbeitsergebnis eine veröffentlichungsfähige Widget-Bibliothek dokumentieren, fachlich abnehmen und in einen wiederholbaren Betriebs- oder Entwicklungsstandard überführen.

Praxisübungen und Laborszenarien

• Entwicklung eines konfigurierbaren Kennzahlen-Widgets mit Grenzwerten und Einheiten.
• Umsetzung eines interaktiven Steuerungs-Widgets mit Bestätigung und RPC-Fehlerbehandlung.
• Aufbau einer Drill-down-Navigation zwischen Anlagenübersicht und Gerätedetail.
• Entwicklung einer Kartenkomponente mit dynamischen Markern und Zustandsfarben.
• Performance- und Sicherheitstest eines Widgets mit hoher Aktualisierungsrate.

Zielgruppe und Voraussetzungen

Zielgruppe: Frontend- und IoT-Entwicklung, Dashboard Engineering, Solution Architecture, technische Produktteams und erfahrene Plattformadministration.

Voraussetzungen: Sichere Grundlagen in HTML, CSS und JavaScript sowie Grundkenntnisse in ThingsBoard-Dashboards, Entitäten und Telemetrie.

Didaktik und Arbeitsweise

Kurze Fachimpulse werden unmittelbar durch Demonstrationen, strukturierte Konfigurationsschritte, praktische Übungen und kontrollierte Fehlerfälle vertieft. Jede Übung verwendet definierte Ausgangswerte, Prüfpunkte und Dokumentationsanforderungen. Dadurch entstehen nachvollziehbare Abläufe, die sich auf Entwicklungs-, Test- und Produktionsumgebungen übertragen lassen.