# 🧩 Datenfluss & Architekturstrategie – Analoge Eingänge (Alle Modi) Diese Dokumentation beschreibt die Architekturstrategie für die Verarbeitung von analogen Eingangsdaten in den drei unterstützten Modi: `jsSimulatedProd`, `json` und `production`. --- ## 🎯 Ziel - Trennung von Verantwortung (API, Service, UI) - Mock-fähige Entwicklung ohne echte Hardware - Einheitliches JSON-Format für alle Modi - Zukunftssicherheit für moderne Systeme mit nativen JSON-APIs --- ## 🔁 Datenfluss (alle Modi) ```mermaid flowchart TD subgraph jsSimulatedProd-Modus A1["analogInputsMockData.js - Mockdaten mit window-Variablen"] B1["/api/cpl/getAnalogInputsHandler.ts - API gibt Rohdaten zurück"] C1["fetchAnalogInputsService.ts - wandelt in JSON"] A1 --> B1 --> C1 end subgraph JSON-Modus A2["analogInputs.json - Mockdaten im JSON-Format"] B2["/api/cpl/getAnalogInputsHandler.ts - gibt JSON direkt weiter"] C2["fetchAnalogInputsService.ts - verarbeitet JSON"] A2 --> B2 --> C2 end subgraph Production-Modus A3["CPL Gerät via CGI - JS mit Platzhaltern (im public-Verzeichnis)"] C3["fetchAnalogInputsService.ts - wandelt direkt JS in JSON"] A3 --> C3 end C1 --> D["getAnalogInputsThunk.ts"] C2 --> D C3 --> D D --> E["Redux Store und UI"] ``` --- ## ✅ Vorteile dieser Struktur - 🔄 Austauschbare Datenquellen ohne Frontend-Codeänderung - 🧼 Trennung von Datenformaten (JS, JSON, CGI) und deren Umwandlung - 🧪 Mock-fähig für Entwickler und CI ohne Backend - 🔮 Zukunftssicher für moderne embedded APIs mit echtem JSON --- ## 📁 Verzeichnisstruktur (Auszug) ```txt /mocks/device-cgi-simulator/SERVICE/*.js # jsSimulatedProd-Modus /mocks/api/SERVICE/*.json # json-Modus /public/CPL/SERVICE/*.js # production-Modus (CGI-Daten im JS-Format) /services/fetchAnalogInputsService.ts # verarbeitet Rückgabe zu JSON /redux/thunks/getAnalogInputsThunk.ts # Redux-Thunk zur Übergabe /components/AnalogInputsDisplay.tsx # Anzeige in der UI ```