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.
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.
`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.
***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).
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.
