docs: add full architecture diagram and data flow for json, jsmock and production modes
This commit is contained in:
@@ -6,5 +6,5 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
|
|||||||
NEXT_PUBLIC_EXPORT_STATIC=false
|
NEXT_PUBLIC_EXPORT_STATIC=false
|
||||||
NEXT_PUBLIC_USE_CGI=false
|
NEXT_PUBLIC_USE_CGI=false
|
||||||
# App-Versionsnummer
|
# App-Versionsnummer
|
||||||
NEXT_PUBLIC_APP_VERSION=1.6.440
|
NEXT_PUBLIC_APP_VERSION=1.6.441
|
||||||
NEXT_PUBLIC_CPL_MODE=jsmock # json (Entwicklungsumgebung) oder jsmock (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
|
NEXT_PUBLIC_CPL_MODE=jsmock # json (Entwicklungsumgebung) oder jsmock (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
|
||||||
@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
|
|||||||
NEXT_PUBLIC_EXPORT_STATIC=true
|
NEXT_PUBLIC_EXPORT_STATIC=true
|
||||||
NEXT_PUBLIC_USE_CGI=true
|
NEXT_PUBLIC_USE_CGI=true
|
||||||
# App-Versionsnummer
|
# App-Versionsnummer
|
||||||
NEXT_PUBLIC_APP_VERSION=1.6.440
|
NEXT_PUBLIC_APP_VERSION=1.6.441
|
||||||
NEXT_PUBLIC_CPL_MODE=production
|
NEXT_PUBLIC_CPL_MODE=production
|
||||||
@@ -1,3 +1,8 @@
|
|||||||
|
## [1.6.441] – 2025-06-21
|
||||||
|
|
||||||
|
- docs: add analog inputs architecture diagram and flow description
|
||||||
|
|
||||||
|
---
|
||||||
## [1.6.440] – 2025-06-21
|
## [1.6.440] – 2025-06-21
|
||||||
|
|
||||||
- docs: move user documentation to docs/user-guide as single source of truth
|
- docs: move user documentation to docs/user-guide as single source of truth
|
||||||
|
|||||||
@@ -1,71 +1,67 @@
|
|||||||
# 📊 Architektur: Analoge Eingänge – Datenfluss & Struktur
|
# 🧩 Datenfluss & Architekturstrategie – Analoge Eingänge (Alle Modi)
|
||||||
|
|
||||||
Diese Datei beschreibt den Datenfluss und die Trennung der Verantwortlichkeiten beim Laden der analogen Eingänge aus JavaScript-Mockdateien im Entwicklungsmodus (`NEXT_PUBLIC_NODE_ENV=development`).
|
Diese Dokumentation beschreibt die Architekturstrategie für die Verarbeitung von analogen Eingangsdaten in den drei unterstützten Modi: `jsmock`, `json` und `production`.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🎯 Ziel
|
## 🎯 Ziel
|
||||||
|
|
||||||
- Mockdaten in `.js`-Format (wie vom echten Gerät geliefert)
|
- Trennung von Verantwortung (API, Service, UI)
|
||||||
- Konvertierung in valide JSON-Objekte
|
- Mock-fähige Entwicklung ohne echte Hardware
|
||||||
- Einheitlicher Zugriff über `fetch` im Service
|
- Einheitliches JSON-Format für alle Modi
|
||||||
- Redux/Komponenten bleiben unabhängig von der Datenquelle
|
- Zukunftssicherheit für moderne Systeme mit nativen JSON-APIs
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 📌 Verzeichnisstruktur (Beispiel)
|
## 🔁 Datenfluss (alle Modi)
|
||||||
|
|
||||||
```txt
|
|
||||||
/mocks/device-cgi-simulator/SERVICE/analogInputsMockData.js
|
|
||||||
/pages/api/cpl/getAnalogInputsHandler.ts
|
|
||||||
/services/fetchAnalogInputsService.ts
|
|
||||||
/redux/thunks/getAnalogInputsThunk.ts
|
|
||||||
/components/AnalogInputsDisplay.tsx
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📐 UML-Diagramm (Mermaid)
|
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
flowchart TD
|
flowchart TD
|
||||||
|
|
||||||
subgraph Quelle
|
subgraph JSMOCK-Modus
|
||||||
A1[analogInputsMockData.js – JS-Format mit window-Variablen]
|
A1["analogInputsMockData.js - Mockdaten mit window-Variablen"]
|
||||||
end
|
B1["/api/cpl/getAnalogInputsHandler.ts - API gibt Rohdaten zurück"]
|
||||||
|
C1["fetchAnalogInputsService.ts - wandelt in JSON"]
|
||||||
|
A1 --> B1 --> C1
|
||||||
|
end
|
||||||
|
|
||||||
subgraph API
|
subgraph JSON-Modus
|
||||||
B1[getAnalogInputsHandler.ts]
|
A2["analogInputs.json - Mockdaten im JSON-Format"]
|
||||||
A1 --> B1
|
B2["/api/cpl/getAnalogInputsHandler.ts - gibt JSON direkt weiter"]
|
||||||
end
|
C2["fetchAnalogInputsService.ts - verarbeitet JSON"]
|
||||||
|
A2 --> B2 --> C2
|
||||||
subgraph Client
|
end
|
||||||
C1[fetchAnalogInputsService.ts]
|
|
||||||
D1[getAnalogInputsThunk.ts]
|
|
||||||
E1[React-Komponente: AnalogInputsDisplay]
|
|
||||||
end
|
|
||||||
|
|
||||||
B1 --> C1
|
|
||||||
C1 --> D1
|
|
||||||
D1 --> E1
|
|
||||||
|
|
||||||
|
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"]
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🧠 Beschreibung
|
## ✅ Vorteile dieser Struktur
|
||||||
|
|
||||||
- **JS-Datei** enthält `var win_analogInputsValues = [...]` usw.
|
- 🔄 Austauschbare Datenquellen ohne Frontend-Codeänderung
|
||||||
- **API-Handler (`getAnalogInputsHandler.ts`)** importiert die Variablen und wandelt sie in eine JSON-Struktur um
|
- 🧼 Trennung von Datenformaten (JS, JSON, CGI) und deren Umwandlung
|
||||||
- **Service (`fetchAnalogInputsService.ts`)** nutzt `fetch("/api/cpl/getAnalogInputsHandler")` und gibt JSON zurück
|
- 🧪 Mock-fähig für Entwickler und CI ohne Backend
|
||||||
- **Thunk (`getAnalogInputsThunk.ts`)** ruft den Service auf und übergibt die Daten an Redux
|
- 🔮 Zukunftssicher für moderne embedded APIs mit echtem JSON
|
||||||
- **Komponente (`AnalogInputsDisplay.tsx`)** nutzt `useSelector` zum Anzeigen
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## ✅ Vorteile
|
## 📁 Verzeichnisstruktur (Auszug)
|
||||||
|
|
||||||
- 🔄 Austauschbare Datenquelle (`js`, `json`, `CGI`, `DB`)
|
```txt
|
||||||
- 🧼 Saubere Trennung von Technik (API) und Fachlogik (Service/Redux)
|
/mocks/device-cgi-simulator/SERVICE/*.js # jsmock-Modus
|
||||||
- 🔍 Leicht testbar, lokal entwickelbar
|
/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
|
||||||
|
```
|
||||||
|
|||||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "cpl-v4",
|
"name": "cpl-v4",
|
||||||
"version": "1.6.440",
|
"version": "1.6.441",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "cpl-v4",
|
"name": "cpl-v4",
|
||||||
"version": "1.6.440",
|
"version": "1.6.441",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/roboto": "^5.1.0",
|
"@fontsource/roboto": "^5.1.0",
|
||||||
"@iconify-icons/ri": "^1.2.10",
|
"@iconify-icons/ri": "^1.2.10",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "cpl-v4",
|
"name": "cpl-v4",
|
||||||
"version": "1.6.440",
|
"version": "1.6.441",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
|
|||||||
Reference in New Issue
Block a user