This commit is contained in:
ISA
2025-06-23 15:00:56 +02:00
parent b6545b37ff
commit 13ce14a703
5 changed files with 174 additions and 57 deletions

View File

@@ -25,4 +25,4 @@ NEXT_PUBLIC_USE_MOCKS=true
NEXT_PUBLIC_BASE_PATH=/talas5
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.280
NEXT_PUBLIC_APP_VERSION=1.1.281

View File

@@ -26,4 +26,4 @@ NEXT_PUBLIC_BASE_PATH=/talas5
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.280
NEXT_PUBLIC_APP_VERSION=1.1.281

View File

@@ -1,87 +1,204 @@
<!-- /docs/README.md -->
# 🚀 NodeMap Einstieg für Entwickler
Willkommen in der NodeMap-Welt einer Offline-Kartenanwendung zur Verwaltung von POIs und
Gerätestatus für TALAS.web.
NodeMap ist eine modulare Kartenanwendung zur Visualisierung und Bearbeitung von GIS-Daten, POIs und
Gerätestatus in einer interaktiven Leaflet-Karte.
## 🌍 Live-Vorschau der Karte
![Startansicht der NodeMap Karte](http://10.10.0.12:3000/ISA/nodeMap/media/branch/main/docs/screenshots/overview1.png)
---
## 📚 Kapitelübersicht
- [🚀 NodeMap Einstieg für Entwickler](#-nodemap--einstieg-für-entwickler)
- [📚 Kapitelübersicht](#-kapitelübersicht)
- [1. Was ist NodeMap?](#1-was-ist-nodemap)
- [2. Lokale Entwicklung](#2-lokale-entwicklung)
- [3. Systemübersicht](#3-systemübersicht)
- [4. Datenflüsse \& API](#4-datenflüsse--api)
- [5. Tipps](#5-tipps)
- [6. Deployment](#6-deployment)
> 🖥 Entwicklung & Test unter Windows 11 mit Node.js v18.17.1 und IIS
> 📦 MySQL 8.0 läuft lokal in einem Docker-Container (nur für Entwicklung)
> 🗄 Produktionsumgebung: TALAS.web und MySQL Server unter Windows Server
---
## 1. Was ist NodeMap?
## Technologie-Stack
NodeMap ist ein Offline-Kartensystem auf Basis von Leaflet, React & Next.js, das über ein iFrame in
TALAS eingebettet wird.
| Technologie | Zweck |
| ------------- | ------------------------------ |
| Next.js | React-Framework (Frontend/SSR) |
| Leaflet | Kartendarstellung |
| Redux Toolkit | Zustandverwaltung |
| Tailwind CSS | Styling |
| MySQL | Datenbank |
| Node.js / IIS | Server und Auslieferung |
📷 Beispielansicht:
![Kartenansicht](http://10.10.0.12:3000/ISA/nodeMap/media/branch/main/docs/screenshots/overview1.png)
## 🧭 Zielumgebung
➡️ [Mehr erfahren...](/docs/guide/project-structure.md)
- Windows-Produktionsserver (offline, kein Internet)
- Kommunikation nur im lokalen Netzwerk
- Nutzerzugriff per VPN + Remote Desktop (RDP)
- Integration per iFrame in TALAS.web
---
## 2. Lokale Entwicklung
## 🔄 Wie funktioniert das System?
👉 [Setup-Anleitung](docs/guide/setup-dev.md)
- `git clone …`
- `npm install`
- `npm run dev`
- `.env.local` konfigurieren
👨‍💻 Wenn du das Projekt starten kannst → bist du bereit für Schritt 3!
Die Anwendung wird von TALAS.web im iFrame geladen. Die URL enthält Parameter für Map- und
User-ID.
NodeMap lädt anschließend Daten über WebServices und MySQL.
➡ Details zur Architektur: [docs/architecture.md](docs/architecture.md)
---
## 3. Systemübersicht
## 🧰 Erstinstallation auf Server
🔁 Was lädt die Karte?
### Voraussetzungen
- POIs, Linien, Geräte, Rechte
- Datenquellen: Webservices (Port 80), eigene API (Port 3000)
🧠 Architektur-Doku:
➡️ [devices & Layerstruktur](docs/architecture/device-layer-connection-final.md)
- Windows Server mit IIS
- Sicherstellen, dass alle TALAS.web API-Endpunkte(WebService) erreichbar sind
- Node.js & npm installiert (z.B. v1820)
- MySQL (lokal oder erreichbar)
- Port 3000 freigegeben (Firewall)
- IIS-Datei `mapTypC.aspx` vorhanden in C:\inetpub\wwwroot\talas5\MessagesMap\
(Server-IP mit Port 3000)
- Browser: Chrome ab Version 125.0.6420.142 empfohlen
- Karten Material vorhanden in: `C:\inetpub\wwwroot\talas5\TileMap\mapTiles`
![mapTiles](docs/screenshots/mapTiles.png)
---
## 4. Datenflüsse & API
## 🔗 Integration in TALAS.web
📦 Die wichtigsten Schnittstellen:
![iFrame-Integration](docs/screenshots/iframe-in-talas2.png)
- [Webservices (TALAS)](docs/guide/webservices.md)
- [Datenbankzugriff (Next.js)](docs/services/database/README.md)
- [Redux Struktur](docs/guide/redux-zustand.md)
- Die App wird in einem **iFrame** geladen
- Startet über `?m=X&u=Y` für Map-/User-ID
- Rechte und Inhalte werden automatisch geladen
```
z.B.
`http://10.10.0.13/talas5/MessagesMap/mapTypC.aspx?m=12&u=484`
```
---
## 5. Tipps
- 🔍 Häufige Fehler: [FAQ & Troubleshooting](docs/guide/faq.md)
- 🔄 Version wird automatisch über Git erhöht
- 🔐 `.env.production` nie ins Git committen!
## 🪛 Schritt-für-Schritt: NodeMap auf dem Server installieren
---
## 6. Deployment
1. **Projekt lokal klonen und kompilieren:**
📤 Anleitung:
➡️ [Deployment-Guide](docs/guide/deployment.md)
```bash
git clone http://10.10.0.12:3000/ISA/nodeMap
cd nodeMap # zu den Verzeichnis wechseln
npm install # Abhängigkeiten installieren (lädt alle Pakete aus package.json)
npm run build # Erstellt ein optimiertes Produktions-Build im Ordner .next/
```
- ZIP bauen
- Dienst starten oder `npm run start`
- Test via: `http://<ip>/talas5/...`
2. **ZIP-Paket vorbereiten (lokal):**
- Verzeichnis `.next/`
- Verzeichnisse `public/`, `node_modules/` falls auf dem Server nicht vorhanden sind oder etwas
hinzugefügt wurde (Bilder oder Bibliothek)
- Dateien `.env.production`, `package.json` falls auf dem Server nicht vorhanden sind oder etwas
hinzugefügt wurde (Umgebungsvariablen oder Bibliothek)
- `nssm.exe`, `StartNodeApp.bat`, `Start-Dev.ps1` um Windows Dienst zu erstellen falls noch nicht
vorhanden ist Download:
[nssm](https://littwinsystemtechnik.sharepoint.com/:f:/r/sites/LittwinSystemtechnik/Freigegebene%20Dokumente/Projekte/Masterkarte%20V2%20setup%20files?csf=1&web=1&e=Sm1wwt)
3. **Auf Server kopieren nach:** Ein Ordner temp auf dem Desktop erstellen->ZIP-Paket
einfügen->entpacken->Inhalt in folgende Verzeichnis einfügen
```
C:\inetpub\wwwroot\talas5\nodeMap\
```
4. **Kartenmaterial hinzufügen (falls nicht vorhanden):**
Muss noch in Download-Server eingefügt werden, damit eine zentrale Stelle verfügbar ist
```
C:\inetpub\wwwroot\talas5\TileMap\
```
5. **.env.production konfigurieren**
Die Datei `.env.production` enthält alle benötigten Verbindungs- und Betriebsvariablen wie z.B.
Datenbank-Zugang, Pfade und Mock-Option.
➡ Vollständige Anleitung & Beispieldatei: [.env.production](docs/guide/env.md)
6. **Dienst registrieren falls nicht vorhanden**
- Mit `nssm.exe` Windows-Dienst „nodeMapService“ erstellen
- Ziel: `StartNodeApp.bat`
- Anleitung:
[nssm](https://littwinsystemtechnik.sharepoint.com/:f:/r/sites/LittwinSystemtechnik/Freigegebene%20Dokumente/Projekte/Masterkarte%20V2%20setup%20files?csf=1&web=1&e=Sm1wwt)
1. **Starten:** Dienst starten , falls vorhanden einmal beenden und neustarten
2. **Im Browser testen:**
```
http://<ip>/talas5/MessagesMap/mapTypC.aspx?m=IdMap&u=IdUser
z.B.
http://<ip>/talas5/MessagesMap/mapTypC.aspx?m=12&u=484
```
---
## 🔁 Update-Richtlinien
| Art | Ersetzte Dateien | Bemerkung |
| ------------------ | ---------------------------------- | ---------------------------- |
| **Kleines Update** | `.next/` | `node_modules` nicht nötig |
| **Großes Update** | alle Dateien (wie Neuinstallation) | Dienst ggf. neu registrieren |
### Empfohlener Ablauf für kleines Update:
1. `.next/` Verzeichnis nach Kompilieren kopieren und auf dem Server einfügen
2. Dienst neu starten
3. Im Browser testen: ` http://<ip>/talas5/MessagesMap/mapTypC.aspx?m=IdMap&u=IdUser`
---
## ✅ Tests & Qualitätssicherung
- **E2E-Tests:** Cypress (nur in der Entwicklungsumgebung)
- **Unit-Tests:** Aktuell keine Jest-Tests aufgrund Leaflet-Komplexität
- **Empfehlung:** Manuelle Tests nach jedem Deployment durchführen (Checkliste vorbereiten)
---
## 🏷 Versionierung
wird mit husky Bibliothek automatisch erhöht bei "git commit message"
→ Wird in der Fußzeile angezeigt. Die Version wird automatisch erhöht über ein Script
(`scripts/bumpVersion.js`), das per Husky vor jedem Commit ausgeführt wird.
Die Version steht sowohl in `package.json` als auch in `config/appVersion.js`.
---
## 💾 Setup: Installationen & Tools
| Tool | Version | Link |
| -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Node.js | 20.12.1 | [nodejs](https://littwinsystemtechnik.sharepoint.com/:f:/r/sites/LittwinSystemtechnik/Freigegebene%20Dokumente/Projekte/Masterkarte%20V2%20setup%20files?csf=1&web=1&e=Sm1wwt) |
| Chrome | optional | [Chrome](https://littwinsystemtechnik.sharepoint.com/:f:/r/sites/LittwinSystemtechnik/Freigegebene%20Dokumente/Projekte/Masterkarte%20V2%20setup%20files?csf=1&web=1&e=Sm1wwt) |
| NSSM.exe | 2.24 | [nssm](https://littwinsystemtechnik.sharepoint.com/:f:/r/sites/LittwinSystemtechnik/Freigegebene%20Dokumente/Projekte/Masterkarte%20V2%20setup%20files?csf=1&web=1&e=Sm1wwt) |
> Hinweis: Die Datei `MapTypC.aspx` in TALAS lädt NodeMap als iFrame über Port 3000.
> Wenn die Seite nicht angezeigt wird, bitte sicherstellen:
>
> - Port 3000 ist in der Firewall freigegeben
> - Die IP im Scriptteil von `MapTypC.aspx` ist aktuell (z.B. `10.10.0.13`)
> - Windows-Dienst `NodeMapService` ist aktiv oder `npm start` in Terminal ausgeführt
## 📁 Dokumentation & technische Leitfäden
| Thema | Link |
| ------------------------- | ------------------------------------------------------- |
| Benutzeranleitung | [docs/guide/user-guide.md](docs/guide/user-guide.md) |
| Architekturübersicht | [architecture.md](docs/architecture.md) |
| Projektstruktur | [project-structure.md](docs/guide/project-structure.md) |
| Webservices (TALAS) | [webservices.md](docs/guide/webservices.md) |
| Umgebungsvariablen | [env.md](docs/guide/env.md) |
| Mockdaten-Modus | [mock-data.md](docs/guide/mock-data.md) |
| Zustandverwaltung (Redux) | [redux-zustand.md](docs/guide/redux-zustand.md) |
| Abhängigkeiten | [dependencies.md](docs/guide/dependencies.md) |
| Lokale Entwicklung | [setup-dev.md](docs/guide/setup-dev.md) |
| FAQ & Fehlerbehandlung | [faq.md](docs/guide/faq.md) |
| Glossar | [faq.md](docs/guide/glossar.md) |

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "nodemap",
"version": "1.1.280",
"version": "1.1.281",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "nodemap",
"version": "1.1.280",
"version": "1.1.281",
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",

View File

@@ -1,6 +1,6 @@
{
"name": "nodemap",
"version": "1.1.280",
"version": "1.1.281",
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",