Wie man eine Wetter-API mit SOLID-Prinzipien effektiv refaktoriert

In der Softwareentwicklung ist es entscheidend, Prinzipien zu befolgen, die den Code wartbar und erweiterbar machen. Die SOLID-Prinzipien, ein Akronym aus den fünf Prinzipien der objektorientierten Programmierung, bieten eine hervorragende Grundlage für die Gestaltung von robustem und skalierbarem Code. Ein Beispiel aus der Praxis ist die Umstrukturierung einer Wetter-API, um den Code gemäß diesen Prinzipien zu verbessern. Im folgenden Text wird ein konkretes Beispiel vorgestellt, das eine Refaktorisierung einer Wetterdienst-API beschreibt, um den Code sauberer und effizienter zu gestalten.

Zunächst wird das ursprüngliche Design einer Funktion beschrieben, die aktuelle Wetterdaten abruft. Ursprünglich wurde der Stadtname direkt als Parameter verwendet, jedoch stellte sich heraus, dass es flexibler war, den Parameter in „search“ umzubenennen, da er sowohl für Städtenamen als auch für Postleitzahlen genutzt werden konnte. Der Parameter konnte nun als Zeichenkette oder Zahl übergeben werden. Abhängig vom Datentyp wurde entweder der Parameter „q“ (für Stadtname) oder „zip“ (für Postleitzahl) verwendet. Auch der Ländercode wurde optional gestaltet, um flexibler auf die Eingabe des Nutzers reagieren zu können.

Ein weiteres Prinzip, das hier beachtet wird, ist das „Offen/geschlossen-Prinzip“ (Open/Closed Principle). Die Funktion „getCurrentWeatherHelper“ bleibt offen für Erweiterungen, da sie beliebige Parameter wie „uriParams“ akzeptieren kann, ohne dass der Code selbst geändert werden muss. Dies sorgt dafür, dass neue Anforderungen, wie etwa das Abrufen von Wetterdaten anhand von geografischen Koordinaten, einfach implementiert werden können, ohne die bestehende Logik anzupassen. Ein neues Beispiel zeigt, wie „getCurrentWeatherByCoords“ die Koordinaten des Nutzers akzeptiert und über dieselbe „getCurrentWeatherHelper“-Funktion das Wetter abruft, was eine elegante Lösung darstellt.

Ein weiterer wichtiger Aspekt bei der Entwicklung von Webanwendungen ist die Benutzerinteraktion. In diesem Beispiel wird ein Eingabefeld für die Stadtsuche implementiert, das den Nutzer in die Lage versetzt, entweder eine Stadt oder eine Postleitzahl einzugeben. Das Eingabefeld ist so konzipiert, dass es sowohl eine Stadt als auch einen Ländercode akzeptiert. Durch die Verwendung von String-Methoden wird die Eingabe aufgeteilt und bereinigt, sodass auch Eingaben wie „Paris, US“ korrekt verarbeitet werden können.

Die Handhabung von Benutzeranfragen muss jedoch auch in Bezug auf Performance optimiert werden. Eine einfache Benutzerinteraktion wie die Eingabe von Text kann schnell zu einer Vielzahl an Serveranfragen führen, was nicht nur die Benutzererfahrung beeinträchtigt, sondern auch die Systemressourcen belastet. Um dies zu verhindern, wird die Eingabe der Benutzer durch die Techniken des „Debouncing“ oder „Throttling“ limitiert. Diese Techniken verhindern, dass mit jeder Tasteingabe eine Anfrage an den Server gesendet wird, sondern nur nach einer gewissen Verzögerung oder nach einer festgelegten Anzahl an Eingaben. Dies verbessert nicht nur die Benutzererfahrung, sondern reduziert auch die Serverlast und verhindert unnötige Netzwerkaufrufe.

Es ist jedoch wichtig zu betonen, dass Debouncing und Throttling unterschiedliche Verhaltensweisen aufweisen. Während Debouncing dafür sorgt, dass immer nur der letzte Eingabewert verarbeitet wird, stellt Throttling sicher, dass nur eine Anfrage in einem festgelegten Intervall an den Server geschickt wird. Je nach den Anforderungen der Anwendung kann die eine oder die andere Technik besser geeignet sein.

Die Integration dieser Funktionalitäten in eine Anwendung führt zu einer besseren Benutzererfahrung und optimierten Performance. Sie hilft dabei, unnötige Belastungen für Server und Clients zu vermeiden und ermöglicht es, die Anwendung auch unter hoher Last effizient zu betreiben. Das Prinzip der „Verzögerung“ bei der Eingabeoptimierung sollte daher stets berücksichtigt werden, um eine benutzerfreundliche und leistungsfähige Anwendung zu entwickeln.

Wie man eine rollenbasierte Navigation implementiert und die Benutzererfahrung optimiert

Die Implementierung einer rollenbasierten Navigation ist entscheidend, um eine benutzerfreundliche und frustrationfreie Erfahrung zu gewährleisten. Durch gezielte Steuerung des Zugriffs auf bestimmte Elemente und Funktionen der Anwendung können Benutzer sicher und selbstbewusst durch die App navigieren. Eine der ersten und wichtigsten Aufgaben dabei ist, die Sichtbarkeit bestimmter Komponenten je nach Authentifizierungsstatus des Benutzers zu steuern.

Zunächst betrachten wir das Login-Formular und wie man es bei erfolgreicher Anmeldung automatisch ausblendet. Dazu muss der HomeComponent so angepasst werden, dass der Authentifizierungsstatus überprüft wird, bevor das Login angezeigt wird. Dies kann durch Injection des AuthService in den HomeComponent und die Verwendung des async Pipes erreicht werden, der den Authentifizierungsstatus in Echtzeit überwacht. Das Beispiel zeigt eine einfache Implementierung, bei der das Login nur angezeigt wird, wenn der Benutzer nicht eingeloggt ist:

typescript
Copy code
export class HomeComponent {

  constructor(public authService: AuthService) {}
}

Im Template des HomeComponent wird nun die Sichtbarkeit des Logins gesteuert, basierend auf dem Authentifizierungsstatus des Benutzers. Sobald der Benutzer eingeloggt ist, wird die Login-Komponente ausgeblendet und stattdessen die Hauptanwendung angezeigt:

html
Copy code
@if ((authService.authStatus$ | async)?.isAuthenticated) { 
  This is LemonMart! The place where everybody gets a lemon.
} @else {
  <login-component></login-component>
}

Dieser Ansatz gewährleistet, dass nur authentifizierte Benutzer Zugang zu bestimmten Bereichen der Anwendung haben, während nicht authentifizierte Benutzer zum Login weitergeleitet werden. Eine zusätzliche Optimierung erfolgt durch die Verwendung des async Pipes, um zu vermeiden, dass Fehler wie ExpressionChangedAfterItHasBeenCheckedError auftreten. Dies sorgt für eine reaktive und effiziente Handhabung des Authentifizierungsstatus.

Ein weiteres zentrales Element einer rollenbasierten Navigation ist die dynamische Anpassung der App-Navigation basierend auf dem Benutzerstatus. Im AppComponent wird ebenfalls der AuthService eingebunden, um den Status des Benutzers zu überwachen und die Toolbar entsprechend anzupassen. Wenn der Benutzer nicht eingeloggt ist, wird die Toolbar ohne Buttons angezeigt, was zu einer klaren und aufgeräumten Benutzeroberfläche führt. Sobald der Benutzer eingeloggt ist, können personalisierte Elemente wie das Profilbild und die Logout-Schaltfläche angezeigt werden:

html
Copy code
@if (auth?.status?.isAuthenticated) {

  @if (auth?.user?.picture) { 
    <img src="{{ auth?.user?.picture }}" class="image-cropper">
  } @else { 
    <mat-icon>account_circle</mat-icon>
  }
}

Die Handhabung von Formvalidierungen stellt eine weitere Herausforderung dar, die in der praktischen Entwicklung oft auftritt. Bei der Implementierung von Formularen, insbesondere bei Login- und Registrierungsformularen, ist es von Bedeutung, wiederkehrende Validierungslogiken in eine zentrale Datei auszulagern. Dies ermöglicht es, diese Validierungen wiederzuverwenden und zu testen. Ein Beispiel zeigt, wie man eine Datei validations.ts erstellt und darin die Validierungen für E-Mail und Passwort definiert:

typescript
Copy code
export function emailValidator(control: AbstractControl) {

  return Validators.pattern(/^.+@.+$/)(control);

}
export function passwordValidator(control: AbstractControl) {

  return Validators.minLength(8)(control);

}

Diese Methode der Validierung gewährleistet eine saubere und wartungsfreundliche Struktur im Code und trägt zur Wiederverwendbarkeit und Flexibilität der Applikation bei.

Die Kombination dieser Methoden – von der rollenbasierten Sichtbarkeit über die Authentifizierung bis hin zur Bildoptimierung und Validierung – führt zu einer insgesamt stabileren und benutzerfreundlicheren Anwendung. Sie sorgt dafür, dass sich die Benutzer nicht nur sicher, sondern auch effizient und schnell durch die Anwendung bewegen können. Ein funktionales, durchdachtes User Interface, das dynamisch auf den Authentifizierungsstatus reagiert, bildet das Rückgrat einer erfolgreichen Webanwendung.

Wie funktioniert rollenbasierte Navigation und Authentifizierung in Angular?

Die rollenbasierte Navigation stellt eine essentielle Komponente moderner Webanwendungen dar, um Nutzern eine personalisierte und sichere Benutzererfahrung zu ermöglichen. Im Kontext von Angular wird dieses Prinzip durch gezielten Einsatz von Routing, Lazy Loading und Authentifizierungs- sowie Autorisierungsmechanismen realisiert. Zentral ist die Gewährleistung, dass ein Nutzer nach der Anmeldung direkt zur für seine Rolle vorgesehenen Startseite weitergeleitet wird, ohne durch die Anwendung navigieren zu müssen, um die benötigten Funktionen zu finden.

Lazy Loading spielt hierbei eine wichtige Rolle: Es sorgt dafür, dass nur die minimal notwendigen Assets beim Anmeldevorgang geladen werden. Erst nach erfolgreicher Anmeldung wird der Nutzer in Abhängigkeit von seiner Rolle auf eine spezifische Seite geführt. Beispielsweise erhält ein Kassierer automatisch Zugriff auf die Kasse (Point of Sale, POS), während ein Lagerist oder Manager jeweils andere, für ihre Aufgaben relevante Bereiche sehen. Die Implementierung erfolgt im Login-Component, wo eine Funktion homeRoutePerRole definiert, welche anhand der Nutzerrolle die korrekte Route zurückgibt.

Um die Sicherheit der Anwendung zu erhöhen, sind sogenannte Route Guards unverzichtbar. Diese Guards kontrollieren sowohl den Zugang zu einzelnen Routen als auch das Laden von Modulen. In Angular existieren vier primäre Guard-Typen: canActivate, canActivateChild, canDeactivate und canLoad. Besonders relevant für die rollenbasierte Navigation sind canActivate und canLoad. Sie gewährleisten, dass nur authentifizierte Nutzer mit der passenden Rolle bestimmte Komponenten aufrufen oder Module laden dürfen.

Ein AuthGuard prüft dabei kontinuierlich den Authentifizierungsstatus sowie die Nutzerrolle. Sollte ein Nutzer nicht angemeldet sein oder nicht über die erforderlichen Berechtigungen verfügen, wird er auf die Login-Seite zurückgeleitet. Diese Prüfung findet sowohl beim Laden von Modulen (z.B. Manager-Modul) als auch beim Aktivieren einzelner Komponenten (z.B. Benutzerprofil) statt. Die Integration dieser Logik erfolgt häufig durch das Injizieren relevanter Dienste wie AuthService, Router und UI-Komponenten zur Anzeige von Fehlermeldungen.

Darüber hinaus ist es von großer Bedeutung, dass nicht nur auf der Client-Seite die Zugriffsrechte kontrolliert werden, sondern auch auf Serverseite eine strikte Zugriffskontrolle mittels Role-Based Access Control (RBAC) implementiert wird. Nur so kann ein umfassender Schutz gegen unautorisierte Zugriffe gewährleistet werden.

Die praktische Anwendung dieses Konzepts zeigt sich etwa darin, dass der Manager beim Login automatisch auf die Manager-Startseite geleitet wird, während ein Lagerist auf das Lagerverwaltungs-Interface gelangt. In der Routen-Konfiguration wird für geschützte Routen ein expectedRole-Attribut gesetzt, das im AuthGuard zur Überprüfung dient. Somit ist es ausgeschlossen, dass Nutzer auf Funktionen zugreifen, die nicht ihrer Rolle entsprechen.

Das Zusammenspiel dieser Mechanismen schafft eine modulare, sichere und benutzerorientierte Anwendung. Nutzer werden zielgerichtet zu ihren Aufgaben geführt, ohne durch unübersichtliche Menüs navigieren zu müssen, und sensible Bereiche bleiben geschützt. Ein ganzheitliches Verständnis von Rollenmanagement, Routing und Authentifizierung ist somit unerlässlich für die Entwicklung anspruchsvoller Angular-Anwendungen.

Endtext

Wie man NgRx für asynchrone Datenoperationen in Angular verwendet

NgRx ist ein leistungsfähiges Tool, das in Angular-Anwendungen zur Verwaltung des Zustands und zur Handhabung von Nebenwirkungen verwendet wird. Es basiert auf der Redux-Architektur und bietet eine saubere und deklarative Möglichkeit, mit Zustandsänderungen umzugehen. Die Implementierung von NgRx kann jedoch komplex erscheinen, insbesondere wenn es darum geht, asynchrone Operationen zu verwalten und mit verschiedenen RxJS-Operatoren zu arbeiten.

Zu Beginn müssen wir NgRx in das Projekt integrieren. Dies geschieht durch den Befehl:

bash
Copy code
$ npx ng add @ngrx/store

Dies fügt das NgRx Store-Paket hinzu und erstellt einen Ordner „reducers“ mit einer index.ts-Datei. Um auch mit Effekten zu arbeiten, wird das NgRx Effects-Paket mit diesem Befehl hinzugefügt:

bash
Copy code
$ npx ng add @ngrx/effects --minimal

Der --minimal-Schalter stellt sicher, dass nur die nötigsten Dateien erzeugt werden, ohne unnötigen Boilerplate-Code. Zusätzlich installieren wir die NgRx-Schematics-Bibliothek, um Generatoren für das Erstellen von Boilerplate-Code zu verwenden:

bash
Copy code
$ npm i -D @ngrx/schematics

Nun können wir die eigentliche Logik implementieren. In einem typischen Szenario wie der Wetterabfrage gibt es zwei wichtige Aktionen: eine zum Suchen von Wetterdaten und eine zum Laden dieser Daten.

Aktionen definieren

Die search-Aktion wird folgendermaßen erstellt:

bash
Copy code
$ npx ng generate @ngrx/schematics:action search --group --creators

Die Implementierung der beiden Aktionen sieht dann so aus:

typescript
Copy code
import { createAction, props } from '@ngrx/store';

import { ICurrentWeather } from '../interfaces';

export const SearchActions = {
  search: createAction(
    '[Search] Search',
    props<{ searchText: string; country?: string }>()
  ),
  weatherLoaded: createAction(
    '[Search] CurrentWeather loaded',
    props<{ current: ICurrentWeather }>()
  )
};

Effekte implementieren

Um auf die search-Aktion zu reagieren und die entsprechenden Wetterdaten zu laden, nutzen wir NgRx-Effekte. Effekte ermöglichen es, den Zustand zu ändern, ohne die ursprünglichen Ereignisdaten im Zustand zu speichern. Dies ist nützlich, wenn wir zum Beispiel nur die Wetterdaten im Zustand haben möchten und nicht den Suchtext.

Die Erstellung eines Effekts erfolgt folgendermaßen:

bash
Copy code
$ npx ng generate @ngrx/schematics:effect currentWeather --module=app.module.ts --root --group --creators

Der --root-Schalter registriert den Effekt in der app.module.ts-Datei. Im current-weather.effects.ts-File definieren wir nun eine Methode doSearch, die die Wetterdaten abruft:

typescript
Copy code
private doSearch(action: { searchText: string; country?: string }) {
  return this.weatherService.getCurrentWeather(action.searchText, action.country).pipe(

    map((weather) => SearchActions.weatherLoaded({ current: weather })),

    catchError(() => EMPTY)
  );
}

Die Methode verwendet die getCurrentWeather-Funktion des Wetterdienstes und gibt bei Erfolg eine weatherLoaded-Aktion zurück, die die geladenen Daten enthält. Fehler werden hier mit der EMPTY-Funktion von RxJS abgefangen, sodass keine weiteren Fehlerbehandlungsmechanismen in diesem einfachen Beispiel erforderlich sind.

Der Effekt selbst wird dann wie folgt erstellt:

typescript
Copy code
getCurrentWeather$ = createEffect(() =>

  this.actions$.pipe(
    ofType(SearchActions.search),
    exhaustMap((action) => this.doSearch(action))
  )
);

Der exhaustMap-Operator sorgt dafür, dass keine weiteren Anfragen ausgeführt werden, bevor die aktuelle Anfrage abgeschlossen ist. Dies ist nützlich, wenn mehrere Suchanfragen schnell hintereinander abgesendet werden, aber nur die erste ausgeführt werden soll.

RxJS-Operatoren im Detail

1. mergeMap: Dieser Operator verarbeitet mehrere Aktionen parallel. Er ist ideal, wenn jede Aktion unabhängig ist und nicht in einer bestimmten Reihenfolge ausgeführt werden muss.

2. concatMap: Dieser Operator sorgt dafür, dass Aktionen in der Reihenfolge verarbeitet werden, in der sie ausgelöst wurden. Er wartet, bis die vorherige Aktion abgeschlossen ist, bevor er die nächste startet.

3. switchMap: Dieser Operator verwirft die vorherige Anfrage, wenn eine neue eingegangen ist. Er ist nützlich, wenn nur die neueste Aktion von Interesse ist, wie beispielsweise bei einer Suchleiste, in der nur die letzte Eingabe relevant ist.

4. exhaustMap: Wie bereits erwähnt, ignoriert dieser Operator neue Anfragen, wenn bereits eine bearbeitet wird. Dies verhindert unnötige API-Aufrufe, etwa bei mehrfachen Klicks auf den gleichen Button.

Fazit

Die Implementierung von NgRx in Angular-Anwendungen bietet eine strukturierte und deklarative Möglichkeit, mit asynchronen Daten und Ereignissen umzugehen. Durch den Einsatz von RxJS-Operatoren wie exhaustMap, mergeMap, concatMap und switchMap können Entwickler das Verhalten der Anwendung an die spezifischen Anforderungen anpassen. Die Wahl des richtigen Operators kann dabei den Unterschied zwischen einer effizienten und einer ineffizienten Lösung ausmachen.