Technische Analyse: Spritpreis-Check WebApp

Fokus: Datenabruf und Verarbeitung über öffentliche API-Schnittstellen

1. Zusammenfassung

Diese Webanwendung demonstriert ein klassisches Muster der modernen Webentwicklung: Eine clientseitige Applikation (Single Page Application) ruft dynamisch Daten von externen Diensten ab, verarbeitet diese im Browser und stellt sie dem Nutzer interaktiv dar. Der Kernprozess umfasst drei Schritte: Geocoding (Ort zu Koordinaten), Datenabfrage (Tankstellen-API) und clientseitiges Rendering (Sortierung/Filterung).

2. Architektur und Datenfluss

Die Anwendung verzichtet auf einen eigenen Backend-Server und nutzt stattdessen direkt im Browser ausgeführtes JavaScript (fetch API), um mit externen Diensten zu kommunizieren.

Schritt 1: Geocoding (Ortsauflösung)

Da die Tankstellen-API geografische Koordinaten (Breiten- und Längengrad) benötigt, der Nutzer aber einen Ortsnamen (z. B. “Frankfurt am Main”) eingibt, muss eine Übersetzung stattfinden.

• Genutzter Dienst: OpenStreetMap Nominatim API.
  
• Prozess:
  1. Der Eingabewert aus dem Feld #stadt wird URL-kodiert.
     
  2. Ein HTTP-GET-Request wird an https://nominatim.openstreetmap.org/search gesendet.
     
  3. Die API antwortet mit einem JSON-Objekt, das unter anderem die Felder lat (Latitude) und lon (Longitude) enthält.
     
• Code-Referenz:
  javascript const geoResponse = await fetch(nominatimUrl, { headers: { 'User-Agent': 'Web-Spritpreis-Tool' } }); // Extraktion der Koordinaten aus dem JSON lat = parseFloat(geoData[0].lat); lon = parseFloat(geoData[0].lon);
  
• Besonderheit: Die Nominatim-Nutzungsbedingungen erfordern zwingend die Angabe eines User-Agent Headers, um Missbrauch zu verhindern.

Schritt 2: Datenabfrage bei Tankerkönig

Mit den gewonnenen Koordinaten wird die eigentliche Preisabfrage durchgeführt.

• Genutzter Dienst: Tankerkönig API (Creative Commons Lizenz).
  
• Parameter:
  • lat & lng: Die zuvor ermittelten Koordinaten.
    
  • rad=5: Suchradius von 5 Kilometern.
    
  • sort=dist: Vorsortierung nach Entfernung durch die API.
    
  • apikey: Ein statischer Schlüssel zur Authentifizierung.
    
• Prozess:
  1. Aufbau der URL mit Query-Parametern.
     
  2. Asynchroner Abruf via fetch.
     
  3. Validierung der Antwort (tkData.ok).
     
  4. Filterung: Es werden nur Tankstellen behalten, deren Status isOpen ist.
     
• Code-Referenz:
  javascript const tkUrl = `https://creativecommons.tankerkoenig.de/json/list.php?lat=${lat}&lng=${lon}&rad=5...`; const tkData = await tkResponse.json(); const offeneTankstellen = tkData.stations.filter(s => s.isOpen);

Schritt 3: Clientseitige Verarbeitung und Rendering

Sobald die Rohdaten (JSON) vorliegen, übernimmt das JavaScript im Browser die gesamte weitere Logik. Es findet kein erneuter Serveraufruf statt.

1. Aggregation: Die Funktion findeBesten iteriert durch das Array der Tankstellen, um den globalen Mindestpreis für E5, E10 und Diesel zu ermitteln.
   
2. Alarm-Logik: Die ermittelten Preise werden mit den vom Nutzer definierten Obergrenzen (e5_grenze, etc.) verglichen. Bei Überschreitung wird visuelles Feedback (rote Markierung) generiert.
   
3. DOM-Manipulation: Das HTML für die Ergebnisliste und die Tabelle wird dynamisch als String konstruiert und via innerHTML in das #ergebnisse Div eingefügt.

3. Interaktivität: Sortierung ohne Neuladen

Ein didaktisch wertvoller Aspekt dieses Codes ist die Implementierung der sortierbaren Tabelle ohne weiteren API-Aufruf.

• Datenspeicherung: Die empfangenen API-Daten werden in der globalen Variable currentStations im Arbeitsspeicher des Browsers gehalten.
  
• Sortierlogik: Beim Klick auf die Sortier-Optionen wird das Array currentStations kopiert ([...currentStations]) und mittels der JavaScript-Methode .sort() neu geordnet.
  
• Effizienz: Da die Daten bereits lokal vorliegen, erfolgt die Umsortierung (z. B. von “Entfernung” auf “Preis”) in Millisekunden, ohne das Netzwerk zu belasten.
  
• Code-Referenz:
  javascript const sortedStations = [...currentStations].sort((a, b) => { // Vergleichslogik basierend auf gewählter Spalte (kraftstoff) // und Richtung (sortAscending) });

4. Sicherheits- und Qualitätsaspekte

Für die Bewertung im akademischen Kontext sind folgende Punkte relevant:

• API-Key Sicherheit: Der API-Schlüssel ist im Client-Code (const API_KEY = "...") sichtbar. In einer Produktionsumgebung wäre dies ein Sicherheitsrisiko, da Dritte den Key stehlen und das Kontingent ausschöpfen könnten. Für ein Lernprojekt oder eine reine Demo ist dies jedoch akzeptabel.
  
• Fehlerbehandlung: Der Code nutzt try...catch Blöcke, um Netzwerkfehler (z. B. keine Internetverbindung) oder API-Fehler (Ort nicht gefunden) abzufangen und dem Nutzer verständliche Meldungen im #status Div anzuzeigen.
  
• Asynchrone Programmierung: Durchgängige Verwendung von async/await, was den Code lesbarer macht als die traditionelle Nutzung von .then() Ketten (Promises).
  
• Responsive Design: Die CSS-Implementierung nutzt Media Queries, um die Tabelle und das Layout auf mobilen Geräten anzupassen (z. B. overflow-x: auto für Tabellen auf kleinen Screens).

5. Fazit für Studierende

Dieses Projekt illustriert exemplarisch, wie moderne Webanwendungen als “Thin Clients” fungieren können, die intelligente Datenverarbeitung von externen Spezialdiensten beziehen. Es verbindet Konzepte der asynchronen Kommunikation (HTTP/Fetch), der Datenstrukturierung (JSON/Arrays) und des dynamischen User Interface Managements (DOM Manipulation) in einer einzigen, lauffähigen HTML-Datei.