Wetterbericht

Übung 6

Schreiben Sie eine XSLT-Transformation, welche die aktuellen Wetterdaten von openweathermap.org einer gegebenen PLZ mit Hilfe von xsl:stream abruft und diese in einem HTML-Wetterbericht darstellt.

Da es keine lokale Input-Datei gibt, verwenden Sie / als Wert für das match-Attribut für das Einstiegs-Template. Die Transformation kann anschließend auf das XSLT angewendet werden.

Code-Beispiel: Output-Vorgabe zu Übung 6 (Auszug).

<html>
  <head>
    <title>Wetter</title>
    <link href="../styling/styles.css" rel="stylesheet" />
    <meta charset="utf-8"/>
  </head>
  <body>
    <div class="city">
      <h1>Heslach</h1>
      <iframe src="..." class="map"></iframe>
      <div class="sun">
        <p>Sonnenaufgang: 7:03 Uhr</p>
        <p>Sonnenuntergang: 15:27 Uhr</p>
      </div>
      <div class="temperature">
        <p>Aktuelle Temperatur: 3 °C</p>
        <p>Min Temperatur: 3 °C</p>
        <p>Max Temperatur: 3 °C</p>
      </div>
      <p class="lastUpdate">Letzte Aktualisierung: 20:20 Uhr</p>
    </div>
  </body>
</html>

Transformierter Wetterbericht im HTML-Format.

Verwenden Sie das Transformationsszenario [Übung 6] xsl:stream - Wetterbericht (XSL >> HTML) (siehe die Erläuterungen zu den Übungen) und die folgende XSLT-Datei:

Code-Beispiel: Stylesheet für Übung 6: Wetterbericht.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:hdm="http://www.hdm-stuttgart.de" exclude-result-prefixes="xs hdm" version="3.0">
  <!-- OpenWeatherMap-URL: (PLZ ersetzen) http://api.openweathermap.org/data/2.5/weather?zip=PLZ,de&amp;appid=2de143494c0b295cca9337e1e96b00e0&amp;mode=xml        
       Output-Vorlage:
       <html>
         <head>
           <title>Wetter</title>
           <link href="../styling/styles.css" rel="stylesheet" />
           <meta charset="utf-8"/>
         </head>
         <body>
           <div class="city">
             <h1>Bempflingen</h1>
             <iframe src="https://www.google.com/maps/embed/v1/place?q=48.57,9.27&amp;key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU" class="map"></iframe>
             <div class="sun">
               <p>Sonnenaufgang: 7:13 Uhr</p>
               <p>Sonnenuntergang: 15:46 Uhr</p>
             </div>
             <div class="temperature">
               <p>Aktuelle Temperatur: 3 °C</p>
               <p>Min Temperatur: 2 °C</p>
               <p>Max Temperatur: 4 °C</p>
             </div>
             <p class="lastUpdate">Letzte Aktualisierung: 12:34 Uhr</p>
           </div>
         </body>
       </html>    
  -->
  <xsl:output method="xhtml" indent="yes" />
  <xsl:mode streamable="yes" on-no-match="shallow-skip" />
  <xsl:template match="/">
    <html>
      <head>
        <title>Wetter</title>
        <link href="../styling/styles.css" rel="stylesheet" />
        <meta charset="utf-8"/>
      </head>
      <body>
        <!-- HIER WETTER-SEITE EINSETZEN -->
      </body>
    </html>
  </xsl:template>
  <!-- HIER CITY-DIV ERSTELLEN -->
  <!-- HIER CITY-H1 ERSTELLEN -->
  <!-- HIER TEMPERATURE-DIV ERSTELLEN -->
  <!-- die restlichen HTML-Elemente erstellen -->
  <xsl:template match="coord">
    <xsl:variable name="googleMapsUrl" select="concat('https://www.google.com/maps/embed/v1/place?q=',@lat,',',@lon,'&amp;key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU')" />
    <iframe src="{$googleMapsUrl}" class="map" />
  </xsl:template>
  <xsl:template match="sun">
    <div class="sun">
      <p>Sonnenaufgang: <xsl:value-of select="hdm:formatDate(@rise)" /></p>
      <p>Sonnenuntergang: <xsl:value-of select="hdm:formatDate(@set)" /></p>
    </div>
  </xsl:template>
  <xsl:template match="lastupdate">
    <p class="lastUpdate">Letzte Aktualisierung: <xsl:value-of select="hdm:formatDate(@value)" /></p>
  </xsl:template>
  <!-- Hilfs-Funktionen -->
  <xsl:function name="hdm:kelvinToCelsius">
    <xsl:param name="kelvin" as="xs:float" required="yes" />
    <xsl:value-of select="round(($kelvin - 273.15) * 1) div 1" />
  </xsl:function>
  <xsl:function name="hdm:formatDate">
    <xsl:param name="date" as="xs:dateTime" required="yes" />
    <xsl:value-of select="format-dateTime($date, '[H]:[m] Uhr')" />
  </xsl:function>
</xsl:stylesheet>

Tipps

Wetterdaten abrufen

Über die folgende URL können die Wetterdaten abgerufen werden. Die PLZ gibt die gewünschte Stadt an: "http://api.openweathermap.org/data/2.5/weather?zip={PLZ},de&appid=2de143494c0b295cca9337e1e96b00e0&mode=xml".

Google-Karte einbinden

Über ein iframe kann ganz einfach eine Google-Karte eingebunden werden. Die Position wird über Längen- und Breitengrad angegeben.

<iframe src="https://www.google.com/maps/embed/v1/place?q={Breitengrad},{Längengrad}&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU" class="map"/>

Styling

Binden Sie die CSS-Datei styles.css ein und verwenden Sie die gegebenen Klassen in der Output-Vorgabe zu Übung 6.

Hilfs-Funktionen

Um die Temperatur von Kelvin in Celsius umzurechnen, können Sie die Funktion hdm:kelvinToCelsius verwenden.

Um die Uhrzeit zu formatieren, können Sie die Funktion hdm:formatDate verwenden.

Erweiterung

Kopieren Sie die Datei openWeather.xml aus dem Demodaten-Ordner in den in-Ordner.

Passen Sie die Transformation so an, dass zuerst das lokale Wetter und darunter die Wetterdaten der Städte aus der XML-Datei erscheinen.

Lösung

Das vollständige Output-HTML und das Lösungsstylesheet finden Sie unter Lösungen zu Übung 6: Wetterbericht.

   

<< zurück vor >>
Tipp der data2type-Redaktion:
Zum Thema XSLT bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: