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

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

Repository klonen:

git clone https://code.lonely-wolf.at/nas/new-landing-page-homenas.git
cd ang-university-httpclient

Abhängigkeiten installieren:
```
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:

{
  "/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.

export const environment = {
  production: false,
  apiUrl: 'http://10.0.0.104' // Beispiel-URL
};

src/environments/environment.prod.ts: Für die Produktionsumgebung.

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.