Gerne, hier ist eine README-Datei für Ihr Angular-Projekt, die die Apache- und Proxy-Server-Komponenten explizit auslässt und sich auf die Angular-Anwendung und ihre Tasmota-Steuerungsfunktionalität konzentriert. --- # ang-university-httpclient Dies ist eine Angular-Anwendung, die als "Homenas Landing Page" dient und speziell für die Steuerung von Tasmota-Smart-Plugs entwickelt wurde. Die Anwendung verwendet `HttpClient` für die Kommunikation mit den Tasmota-Geräten und ist für eine einfache Skalierbarkeit konzipiert, um mehrere Steckdosen zu verwalten. ## Inhaltsverzeichnis - [ang-university-httpclient](#ang-university-httpclient) - [Inhaltsverzeichnis](#inhaltsverzeichnis) - [1. Projektbeschreibung](#1-projektbeschreibung) - [2. Funktionen](#2-funktionen) - [3. Verwendete Technologien](#3-verwendete-technologien) - [4. Voraussetzungen](#4-voraussetzungen) - [5. Installation](#5-installation) - [6. Entwicklungsserver](#6-entwicklungsserver) - [7. Code-Struktur (Tasmota-Komponente)](#7-code-struktur-tasmota-komponente) - [8. Build](#8-build) - [9. Tests](#9-tests) - [10. Konfiguration](#10-konfiguration) - [11. Hinweise zur Tasmota-Optimierung](#11-hinweise-zur-tasmota-optimierung) --- ## 1. Projektbeschreibung `ang-university-httpclient` ist eine Angular-Anwendung, deren Hauptzweck die Steuerung von Tasmota-fähigen Steckdosen ist. Sie bietet eine Benutzeroberfläche zum Abrufen des Status und zum Schalten von Geräten. Das Projekt wurde so refaktorisiert, dass es mehrere Tasmota-Steckdosen über ein Array verwaltet, was die Wartbarkeit und Skalierbarkeit verbessert. ## 2. Funktionen * **Tasmota-Steuerung:** Schaltet Tasmota-Smart-Plugs ein und aus. * **Statusanzeige:** Zeigt den aktuellen Status (Ein/Aus) der Tasmota-Steckdosen an. * **Dynamische Socket-Verwaltung:** Verwaltet Tasmota-Steckdosen in einem Array, um das Hinzufügen weiterer Geräte zu vereinfachen. ## 3. Verwendete Technologien Das Projekt basiert auf dem Angular-Framework und verwendet eine Reihe von Bibliotheken und Tools: * **Angular:** Version `^17.1.0` * `@angular/animations` * `@angular/common` * `@angular/compiler` * `@angular/core` * `@angular/forms` * `@angular/platform-browser` * `@angular/platform-browser-dynamic` * `@angular/router` * **TypeScript:** Version `~5.3.2`, `^5.2 <5.4` * **RxJS:** Für reaktive Programmierung, Version `^6.5.3 || ^7.4.0` (als Peer Dependency) und `7.8.1` (als Dependency in `@angular-devkit/build-webpack`). * **Lodash:** Version `^4.14.202` (typings) und `^4.17.21` (dependency). * **Webpack:** Version `5.89.0` * **Node.js:** Empfohlene Versionen `^18.13.0 || >=20.9.0`. * **npm:** Empfohlene Versionen `^6.11.0 || ^7.5.6 || >=8.0.0`. * **Yarn:** Empfohlene Version `">= 1.13.0"`. ## 4. Voraussetzungen Stellen Sie sicher, dass Node.js und npm (oder Yarn) auf Ihrem System installiert sind. * Node.js: `^18.13.0 || >=20.9.0` * npm: `^6.11.0 || ^7.5.6 || >=8.0.0` * Yarn: `>= 1.13.0` ## 5. Installation 1. **Repository klonen:** ```bash git clone https://code.lonely-wolf.at/nas/new-landing-page-homenas.git cd ang-university-httpclient ``` 2. **Abhängigkeiten installieren:** ```bash npm install # oder yarn install ``` ## 6. Entwicklungsserver Führen Sie `ng serve` aus, um einen Entwicklungsserver zu starten. Die Anwendung wird automatisch im Browser unter `http://localhost:4200/` geöffnet. Änderungen am Quellcode werden automatisch neu geladen. Für die Entwicklungsumgebung wird eine Proxy-Konfiguration (`proxy.conf.json`) verwendet, um Anfragen an die Tasmota-Geräte weiterzuleiten. Diese Konfiguration ist Teil des Angular CLI-Dev-Servers und muss nicht manuell als separater Server eingerichtet werden. **`proxy.conf.json` Beispiel:** ```json { "/tasmota1": { "target": "http://10.0.0.31", "secure": false, "changeOrigin": true, "pathRewrite": { "^/tasmota1": "" } }, "/tasmota2": { "target": "http://10.0.0.32", "secure": false, "changeOrigin": true, "pathRewrite": { "^/tasmota2": "" } } } ``` Diese Datei wird automatisch vom Angular Entwicklungsserver verwendet, wenn Sie `ng serve` ausführen. ## 7. Code-Struktur (Tasmota-Komponente) Die Tasmota-Steuerung ist modular aufgebaut: * **`src/app/socket.interface.ts` (neu):** Definiert die Struktur für ein Tasmota-Socket-Objekt, das `id`, `name`, `path` und `status` enthält. * **`src/app/tasmota.service.ts`:** Verantwortlich für die Kommunikation mit den Tasmota-Geräten. Es enthält ein Array von `TasmotaSocket`-Objekten (`public sockets`) und Methoden zum Abrufen des Status und zum Schalten der Steckdosen über HTTP-GET-Anfragen [Konversation]. Die `baseUrl` für Tasmota-Geräte ist in `environment.ts` und `environment.prod.ts` definiert. * **`src/app/tasmota-control/tasmota-control.component.ts`:** Die Hauptkomponente, die die Tasmota-Steckdosen im UI darstellt. Sie iteriert über das `sockets`-Array des `TasmotaService`, um den Status anzuzeigen und Schaltvorgänge auszulösen [Konversation]. * **`src/app/tasmota-control/tasmota-control.component.html`:** Das Template, das die einzelnen Steckdosen dynamisch rendert, basierend auf dem `sockets`-Array [Konversation]. ## 8. Build Um das Projekt für die Produktion zu erstellen, führen Sie `ng build` aus. Die Build-Artefakte werden im Verzeichnis `dist/` gespeichert. Für den Produktions-Build (`ng build --configuration production`) sind Optimierungen wie `outputHashing: "all"` aktiviert, während im Entwicklungs-Build (`ng build --configuration development`) Optimierungen deaktiviert und Source Maps enthalten sind. ## 9. Tests Um Unit-Tests mit Karma auszuführen, verwenden Sie den Befehl `ng test`. ## 10. Konfiguration Die API-URLs für die Tasmota-Geräte werden in den Umgebungsvariablen-Dateien konfiguriert: * **`src/environments/environment.ts`:** Für die Entwicklungsumgebung. ```typescript export const environment = { production: false, apiUrl: 'http://10.0.0.104' // Beispiel-URL }; ``` * **`src/environments/environment.prod.ts`:** Für die Produktionsumgebung. ```typescript export const environment = { production: true, apiUrl: '' // Leer lassen, wenn die App auf dem gleichen Server wie Tasmota läuft }; ``` Die `.editorconfig`-Datei sorgt für konsistente Code-Formatierung im Team. Die `angular.json`-Datei enthält die Konfiguration für Angular CLI-Befehle und den Build-Prozess. ## 11. Hinweise zur Tasmota-Optimierung Die Tasmota-Komponente kann weiter optimiert werden durch: * **Minimierung von HTTP-Anfragen:** Implementierung eines Caching-Mechanismus oder eines gemeinsam genutzten Zustands im `TasmotaService`, um redundante Statusanfragen zu vermeiden. * **Fehlerbehandlung:** Erweiterung der Fehlerbehandlung, um Benutzer über Probleme zu informieren oder Wiederholungsversuche bei Fehlern zu implementieren. * **RxJS-Operatoren:** Nutzung weiterer RxJS-Operatoren wie `debounceTime` (für schnelle Toggle-Anfragen) oder `shareReplay` (für gemeinsame HTTP-Anfragen bei mehreren Abonnements) im `TasmotaService`. * **Lazy Loading:** Wenn die Tasmota-Steuerung nicht beim initialen Laden der Anwendung benötigt wird, kann das zugehörige Modul per Lazy Loading geladen werden, um die anfängliche Ladezeit zu reduzieren. * **Change Detection Strategy:** Verwendung der `OnPush`-Strategie für die `TasmotaControlComponent` zur Verbesserung der Performance.