docs: md 2 html for confluence
This commit is contained in:
ISA
195
README.confluence
Normal file
195
README.confluence
Normal file
@@ -0,0 +1,195 @@
|
||||
h1. {anchor:nodemap-kartenvisualisierung-für-talas.web-next.js-leaflet-redux}🌍 NodeMap – Kartenvisualisierung für TALAS.web \(Next.js, Leaflet, Redux)
|
||||
NodeMap ist eine modulare Kartenanwendung zur Visualisierung und Bearbeitung von GIS-Daten, POIs und Gerätestatus in einer interaktiven Leaflet-Karte.
|
||||
|
||||
{quote}
|
||||
📘 Für Entwickler:
|
||||
Die technische Dokumentation \(Architektur, Redux, Komponenten, etc.) befindet sich in:
|
||||
[{{/docs/README.md}}|docs/README.md]
|
||||
{quote}
|
||||
h2. {anchor:live-vorschau-der-karte}🌍 Live-Vorschau der Karte
|
||||
!docs/screenshots/overview1.png|alt=Startansicht der NodeMap Karte!
|
||||
|
||||
----
|
||||
{quote}
|
||||
🖥 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
|
||||
{quote}
|
||||
----
|
||||
h2. {anchor:technologie-stack}Technologie-Stack
|
||||
|| Technologie || Zweck ||
|
||||
| Next.js | React-Framework \(Frontend/SSR) |
|
||||
| Leaflet | Kartendarstellung |
|
||||
| Redux Toolkit | Zustandverwaltung |
|
||||
| Tailwind CSS | Styling |
|
||||
| MySQL | Datenbank |
|
||||
| Node.js / IIS | Server und Auslieferung |
|
||||
|
||||
h2. {anchor:zielumgebung}🧭 Zielumgebung
|
||||
* Windows-Produktionsserver \(offline, kein Internet)
|
||||
* Kommunikation nur im lokalen Netzwerk
|
||||
* Nutzerzugriff per VPN + Remote Desktop \(RDP)
|
||||
* Integration per iFrame in TALAS.web
|
||||
|
||||
----
|
||||
h2. {anchor:wie-funktioniert-das-system}🔄 Wie funktioniert das System?
|
||||
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]
|
||||
|
||||
----
|
||||
h2. {anchor:kartenquellen-konfiguration-publicconfig.json}⚙️ Kartenquellen-Konfiguration \(public/config.json)
|
||||
Die Datei {{public/config.json}} steuert, welche Kartenquelle \(z.B. OSM oder lokale Tiles) für die Leaflet-Karte verwendet wird.
|
||||
|
||||
*Beispiel:*
|
||||
|
||||
{code:json}
|
||||
{
|
||||
"//info": "tileSources: 'local' für offline, 'osm' für online",
|
||||
"tileSources": {
|
||||
"local": "http://localhost/talas5/TileMap/mapTiles/{z}/{x}/{y}.png",
|
||||
"osm": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
},
|
||||
"active": "osm"
|
||||
}
|
||||
{code}
|
||||
* Mit {{active}} kann zwischen Online\- und Offline-Karten umgeschaltet werden.
|
||||
* Die Datei wird beim Start der App automatisch geladen.
|
||||
* Für Offline-Betrieb muss das lokale Kartenmaterial vorhanden sein \(siehe Installationsanleitung).
|
||||
|
||||
----
|
||||
h2. {anchor:erstinstallation-auf-server}🧰 Erstinstallation auf Server
|
||||
h3. {anchor:voraussetzungen}Voraussetzungen
|
||||
* Windows Server mit IIS
|
||||
* Sicherstellen, dass alle TALAS.web API-Endpunkte(WebService) erreichbar sind
|
||||
* Node.js & npm installiert \(z. B. v18–20)
|
||||
* MySQL \(lokal oder erreichbar)
|
||||
* Port 3000 freigegeben \(Firewall)
|
||||
* IIS-Datei {{mapTypC.aspx}} vorhanden in C: \(Server-IP mit Port 3000)
|
||||
* Browser: Chrome ab Version 125.0.6420.142 empfohlen
|
||||
* Karten Material vorhanden in: {{C:\inetpub\wwwroot\talas5\TileMap\mapTiles}} !docs/screenshots/mapTiles.png|alt=mapTiles! Falls nicht vorhanden hier downloaden: http://10.10.0.28/produkte/TALAS.map/mapTiles.zip
|
||||
|
||||
----
|
||||
h2. {anchor:integration-in-talas.web}🔗 Integration in TALAS.web
|
||||
!docs/screenshots/iframe-in-talas2.png|alt=iFrame-Integration!
|
||||
|
||||
* Die App wird in einem *iFrame* geladen
|
||||
* Startet über {{?m=X&u=Y}} für Map-/User-ID
|
||||
* Rechte und Inhalte werden automatisch geladen
|
||||
{noformat}
|
||||
z.B.
|
||||
`http://10.10.0.13/talas5/MessagesMap/mapTypC.aspx?m=12&u=484`{noformat}
|
||||
|
||||
----
|
||||
h2. {anchor:schritt-für-schritt-nodemap-auf-dem-server-installieren}🪛 Schritt-für-Schritt: NodeMap auf dem Server installieren
|
||||
----
|
||||
h2. {anchor:schnelles-deployment-über-zip-paket}📦 Schnelles Deployment über ZIP-Paket
|
||||
Ein fertiges Deployment-Bundle für jede Version \(z. B. {{NodeMap V1.1.260.zip}}) ist auf dem internen SharePoint verfügbar:
|
||||
|
||||
📁 [Masterkarte V2 setup files|https://littwinsystemtechnik.sharepoint.com/sites/LittwinSystemtechnik/Freigegebene%20Dokumente/Forms/AllItems.aspx?id=%2Fsites%2FLittwinSystemtechnik%2FFreigegebene%20Dokumente%2FProjekte%2FMasterkarte%20V2%20setup%20files&csf=1&web=1&e=Sm1wwt&CID=9291bb06%2Dc869%2D4e30%2D8efa%2D8cda40df3cd6&FolderCTID=0x0120009C4F8227D6A11D4E89F1CCB9E517F488]
|
||||
|
||||
h4. {anchor:ablauf}📂 Ablauf:
|
||||
# 🛑 *Dienst beenden*
|
||||
#* Vor dem Update muss der bestehende Windows-Dienst {{NodeMapService}} beendet werden,
|
||||
um Dateikonflikte beim Löschen zu vermeiden. !docs/screenshots/Dienst-beenden.png|alt=Dienst beenden!
|
||||
# 🔍 *Prüfen, ob passende {{node_modules-v1.1.xxx.zip}} Datei vorhanden ist*
|
||||
#* Wenn *nicht vorhanden* → {{C:\inetpub\wwwroot\talas5\nodeMap}} komplett löschen
|
||||
#* Wenn *vorhanden* → nur {{node_modules-v1.1.xxx.zip}} und {{node_modules}} Verzeichnis behalten, Rest löschen
|
||||
💡 *Tipp:* {{node_modules-v1.1.xxx.zip}} nach Entpacken und in node_modules umbenennen\!
|
||||
# 📦 *ZIP entpacken*
|
||||
#* {{NodeMap V1.1.260.zip}} entpacken
|
||||
Nach dem alles entpakt ist, dann sieht das so aus !docs/screenshots/nodeMap-inhalt.png|alt=NodeMap Inhalt!
|
||||
# 🚀 *Dienst starten*
|
||||
#* Windows-Dienst {{NodeMapService}} wieder starten
|
||||
|
||||
----
|
||||
h2. {anchor:oder-über-git}📦 Oder über Git
|
||||
# *Projekt lokal klonen und kompilieren:*
|
||||
{code: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/
|
||||
{code}
|
||||
# *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]
|
||||
|
||||
# *Auf Server kopieren nach:* Ein Ordner temp auf dem Desktop erstellen->ZIP-Paket einfügen->entpacken->Inhalt in folgende Verzeichnis einfügen
|
||||
{noformat}
|
||||
C:\inetpub\wwwroot\talas5\nodeMap\{noformat}
|
||||
# *Kartenmaterial hinzufügen \(falls nicht vorhanden):*
|
||||
Muss noch in Download-Server eingefügt werden, damit eine zentrale Stelle verfügbar ist
|
||||
{noformat}
|
||||
C:\inetpub\wwwroot\talas5\TileMap\{noformat}
|
||||
# *.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]
|
||||
# *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]
|
||||
|
||||
# *Starten:* Dienst starten , falls vorhanden einmal beenden und neustarten
|
||||
# *Im Browser testen:*
|
||||
{noformat}
|
||||
http://<ip>/talas5/MessagesMap/mapTypC.aspx?m=IdMap&u=IdUser
|
||||
z.B.
|
||||
http://<ip>/talas5/MessagesMap/mapTypC.aspx?m=12&u=484{noformat}
|
||||
|
||||
----
|
||||
h2. {anchor:update-richtlinien}🔁 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 |
|
||||
|
||||
h3. {anchor:empfohlener-ablauf-für-kleines-update}Empfohlener Ablauf für kleines Update:
|
||||
# {{.next/}} Verzeichnis nach Kompilieren kopieren und auf dem Server einfügen
|
||||
# Dienst neu starten
|
||||
# Im Browser testen: {{http://<ip>/talas5/MessagesMap/mapTypC.aspx?m=IdMap&u=IdUser}}
|
||||
|
||||
----
|
||||
h2. {anchor:tests-qualitätssicherung}✅ 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)
|
||||
|
||||
----
|
||||
h2. {anchor:versionierung}🏷 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}}.
|
||||
|
||||
----
|
||||
h2. {anchor:setup-installationen-tools}💾 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] |
|
||||
|
||||
{quote}
|
||||
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
|
||||
{quote}
|
||||
h2. {anchor:dokumentation-technische-leitfäden}📁 Dokumentation & technische Leitfäden
|
||||
|| Thema || Link ||
|
||||
| Benutzeranleitung | [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] |
|
||||
Reference in New Issue
Block a user