Vue.js ist ein vielseitig clientseitiges JavaScript-Webframework zum Erstellen von User Interfaces. Doch was kann Vue.js, was andere nicht können? Es ist progressiv und inkrementell einsetzbar. Damit kann der Entwickler die Struktur seiner Anwendung nach eigenen Ansprüchen zu richten. Vue.js kann man sowohl für Teile einer bestehenden Applikation oder Webseite einsetzen, aber auch als vollständigen Ersatz für jQuery-basierte JavaScript-Anreicherungen in interaktiven Widgets (nur zur Info, Widgets sind kleine Programme, zum Beispiel auf dem Homescreen des Smartphones, die meist Informationen, wie das Wetter anzeigen). Progressiv in dem Sinne, dass wenn man ein existierende serverseitige Applikation hat, man vue auch nur in einen Teil integrieren kann, um das ganze interaktiver zu gestalten. Wie bei anderen Webframeworks erlaubt vue, die Webpage in wiederverwendbare Teile aufzuteilen. Dabei hat jede Komponente ihr eignes HTML, CSS und JavaScript, um diese Komponente zu rendern.
Hinter Vue.js steht kein Großkonzern, oder Social-Medi Haus, sondern eine Einzelperson. Evan You hatte zwar bei Google Creative Labs als Creative Coder gearbeitet, aber dieses Framework enstand aus seinem eigenen Interesse.
Vue.js ist relativ einfach, wenn man schon programmieren kann und vor allem bereits mit JavaScript, HTML und CSS gearbeitet hat. Als ich das erste Mal vue gesehen hatte, ist mir ehrlich gesagt zunächst gar nicht aufgefallen, dass es ein anderes Framework ist. Mich hatte es nur verwundert, dass der Code für eine Multipage Anwendung, gegliedert in jede Seite war. Des weiteren haben mich die v-on und v-if Befehle ein wenig verwundert. Darüber schreibe ich aber später noch einmal detaillierter.
Nun zu ein paar Key Concepts von Vue.js:
Meist beginnt das ja damit, dass man Daten auf seiner Webpage bereitstellen möchte. Das geht bei vue ziemlich einfach:
Zunächst integriert man die vue library (Z.6). Anschließend fügt man noch die Vue Instanz hinzu, wie man es in Zeile 8 sehen kann und stecken dort noch das Elternelement (das ist „app“) über seine ID hinein. El steht hierbei für Element und das # steht für die eindeutige ID. Dieses Elternelement ist der Einstiegspunkt für die Applikation. Danach braucht man ja auch noch Daten für die Webpage, weshalb man innerhalb von data (= Objekt) noch die Property product hinzufügt. Um das dann auch anzeigen zu können, wird in Zeile 3 eine Expression mit der Property product angegeben. Die Expression kann man durch die geschweiften Klammern erkennen.
Wenn man dann eine Vebrindung zum localhost aufgebaut hat (z.B. durch den Befehl npm run serve, was so viel heißt wie npm bitte führe den Befehl aus, den ich unter dem Namen serve im package.json abgelegt habe), dann sollte folgendes auftauchen:
Wenn man nun in der JavaScript Konsole im Browser den Namen des Produkts ändert, dann updated vue automatisch das HTML:
Das heißt, dass Vue reaktiv ist. Bei jeder Änderung die vorgenommen wird, updated Vue die entsprechenden Teile in der Webpage. Das data-Objekt bei Vue.js bereitet diese Eigenschaft. Properties in diesem Objekt werden nicht nur in Templates zugänglich gemacht, sie werden beim Erstellen der Vue.js-Instanz auch reaktiv. Bei Änderung einer Property wird, wie oben gezeigt, ein Ereignis losgetreten und sämtlichen Prozessen, die von diesem Ereignis wissen sollen, wird der neue Wert mitgeteilt. Will man aber auf das data-Objekt zugreifen, reicht ein einfacher Zugriff über this. This ist hier aber jedes Mal eine Vue.js-Instanz. Und in dieser Instanz sind nun Eigenschaften verfügbar, die wir ganz woanders definiert haben. Diese Properties wurden erzeugt und besitzen die Property-Deskriptoren get und set. Beim Zugriff auf diese Property übernimmt also Vue.js die Kontrolle über den weiteren Verlauf. Somit muss man nicht mehr direkt mit HTML arbeiten.
Analog zum data-Objekt hat die Vue.js-Instanz nämlich auch ein methods-Objekt. In diesem Objekt werden Methoden gespeichert, die später bei Klick oder anderen Invokationsmöglichkeiten aufgerufen werden. Um allerdings Funktionen aus dem methods-Objekt aufzurufen, braucht man Nutzerinput. Ein @click=“up“ bei einem button-Element zum Beispiel entspricht einem addEventListener für ein click-Event.
Hier ein Beispiel:
wie man sehen kann, steht in der Überschrift das Property product, was zu Beginn 0 ist, somit würde jetzt eine null in der Überschrift stehen. Wie üblich bei properties ist dieser Wert jedoch nicht fest, sondern kann verändert werden. Dies geschieht hier, indem einer der beiden Buttons geklickt wird. Der Code in Zeile 3 und 4 bedeutet so viel wie, bei einem Click, wird die Methode up, oder down ausgeführt. Diese Methode findet man unten innerhakb der Vue Instanz. Up erhöht das property um eins, down, setzt property eins herunter. Anstatt @click zu schreiben, könnte man auch on-click schreiben, jedoch ist die @ Version ein wenig kürzer. Dieses @ hatte mich am Anfang wirklich sehr verwirrt.
Mit dem Anhängen von Methoden an Ereignisse sind wir auch schon beim nächsten Vue.js-Konzept: Direktiven.
Dirketiven:
Wenn wir mit @click eine Methode an ein Ereignis binden, nutzen wir schon die Kurzschreibweise für etwas, das man bei Vue.js Direktiven nennt. @click in der längeren Variante ist v-on:click. Direktiven in Tag-Form nennt Vue.js wie jedes andere moderne JavaScript-Framework Komponenten. Diese Direktiven erlauben nun, JavaScript-Ausdrücke direkt in unsere Templates zu bringen und damit die Erzeugung von weiteren DOM-Elementen zu beeinflussen. Die bekanntesten und verbreitetsten sind die folgenden:
- v-if hängt die Erzeugung der DOM-Elemente an die positive Auswertung einer Bedingung
- v-for wiederholt die Erzeugung der DOM-Elemente für mehrere Einträge in einem Array
- v-on bindet Methoden an Ereignisse, wie z. B. click, keydown, submit und ähnliches
- v-bind bindet die Inhalte diverser Attribute an ein Feld der Vue.js-Instanz; wir kennen das als 2-Way-Data-Binding aus anderen Frameworks
Es gibt noch eine Reihe mehr.
Komponenten:
Wenn man eine Applikation will, die nicht nur aus einem Widget und einem sehr einfachen Datenstrom besteht, braucht man eine Vielzahl an Widgets, die wir in unterschiedlichem Kontext mit unterschiedlichen Daten befüllen können. Vue.js gibt einem die Möglichkeit, die bestehende Instanz um eigene Komponenten zu erweitern. Mit Vue.extend({}) kann man den bestehenden Code einfach in ein weiteres Objekt kopieren und per Variable zugänglich machen. Diese Variable kann man mit Vue.component global registrieren oder extra pro Vue.js-Instanz. Danach ist die Komponente wie ein HTML-Element in der Applikation verfügbar. In Bezug auf Komponenten gilt es nur, ein paar Dinge zu beachten:
- Templates definiert man nicht mehr einfach so im HTML. Man kann zwar ein template-Element verwenden und es in der Komponente laden, viel gemütlicher allerdings ist es, wenn man das template-Feld in der Komponente direkt befüllt. Dieses Feld ist übrigens auch für eine Vue.js-Instanz verfügbar, falls man sich den Weg über das HTML sparen will.
- Es gibt kein data-Objekt mehr. Das liegt daran, dass Ausgangsdaten nur per Instanz definiert werden. Die einzelnen Komponenten haben eine data-Funktion und retournieren wiederum ein Objekt. Man merkt so, dass Komponenten nun extra instanziiert werden müssen.
- Eine weitere Eigenschaft tritt auf: Man kann eigene Attribute definieren. Mit dem Feld props definiert man ein Array aus Strings, die nur darauf warten, mit Daten von außen befüllt zu werden. So können wir das products-Feld weiter behalten, es aber mit unterschiedlichen Produkten füllen.
Single File Components
Hier hat man alles in einer Komponente, also HTML, CSS und JavaScript. Daher hat sie auch ihren Namen. Sie sieht z.B. so aus:
All das ist durch die Nutzung von Webpack möglich. Das ist mit dem Vue CLI sehr einfach .vue-Dateien können nicht ohne ein Webpack-Setup benutzt werden. Wenn das JavaScript wegen der Logik, um die man sich kümmern muss, sehr umfangreich ist, kann es sein, dass man eine separate Datei für das JavaScript verwenden möchte. Dann kan man einfach das source Attribut benutzen:
Das funktioniert auch für JavaScript.
Ajax in Vue.Js
Natürlich ist auch in Vue die asynchrone Webentwicklung möglich, denn eigentlich ist es ja nur ein JavaScript Framework, und ich dachte, das wäre ein guter Punkt, den man hier noch einfügen kann, wie man das anstellen kann. Hier gibt es verschiedene Möglichkeiten, doch zunächst noch einmal eine kleine Wiederholung was AJAX denn genau ist. AJAX steht für Asynchronous JavaScript and XML und wird dafür benutzt, um zum Beispiel eine Webpage zu updaten, ohne die Webseite neu laden zu müssen, oder dem Server Daten im Hintergrund zu senden, dadurch können Web-Anwendungen schneller auf Benutzereingaben reagieren.
Ajax kann in JavaScript eingebaut werden, indem native Web APIs benutzt werden, wie XMLHttpRequest oder der Fetch API. Das sind APIs zu einem Webserver oder Webbrowser. Die Fetch API bietet eine Schnittstelle zum Abrufen von Ressourcen, was wir auch später in meiner App sehen werden.
Zum anderen, kann man auch eine HTTP client library, wie Axios benutzen. Axios kann in die package.json dependencies (Abhängigkeiten) installiert werden durch einen package manager. Da ich npm gewöhnt bin, werde ich das auch immer in den Beispielen nutzen (eine andere Möglichkeiten wäre yarn).
Der Befehl wäre:
$npm install axios
Anfragen an den Server über http dauern immer, bis sie mit einer Antwort zurück kommen. Um sicher zu gehen, dass die Information, die dem User gezeigt wird korrekt ist, braucht man promises, damit sichergestellt werden kann, dass die Daten zurück kommen, bevor der Code weiter ausgeführt wird. Ein promise ist ein Objekt, dass die eventuelle erfolgreiche Beendigung oder den Fehlerfall einer asynchronen Operation repräsentiert. Eine Fetch API gibt immer ein Promise zurück und unterstützt alle Arten von Anfragen.
Eine andere Möglichkeit ist die async Funktion. Eine async-Funktion ist eine Funktion, die mit dem async-Schlüsselwort deklariert ist. Async-Funktionen sind Instanzen des AsyncFunction-Konstruktors, und diese können das await-Schlüsselwort benutzen. Die async- und await-Schlüsselwörter ermöglichen asynchrones, auf promises basierendes Verhalten relativ übersichtlich zu schreiben, wodurch Versprechungsketten nicht explizit konfiguriert werden müssen. Async Funktionen geben als Ergebnus ein implizites Promise zurück. Der await Ausdruck innerhalb der async Funktion hält die Ausführung der asynchronen Funktion an. Diese wartet auf die Entscheidung des ausgegeben Promise, setzt dann die Ausführung der asynchronen Funktion fort und wird als resolved Wert ausgegeben.
Mein Projekt: die Wetter App
Nun kommen wir endlich zu dem praktischen Part. Ich hatte mir überlegt eine Wetter App zu bauen, die die Open Weather Map API benutzt, um die restful API aufzurufen, die jetzigen Wetterdaten zurückzugeben. Die App benutzt die neuere Javascript Fetch API mit Vue JS Methoden und Konditionen.
Ich werde im Folgenden berichten, was ich gemacht habe und in meinem fertigen Code zeigen, was die einzelnen Abschnitte machen.
Das erste, was man machen, muss ist einen node package manager zu installieren, da ich npm benutzte, hatte ich diesen bereits.
Dann installiert man vue. Ich hatte bereits vue, habe aber für dieses Beispiel noch vue cli benutzt. Die Vue CLI ist ein (Command Line Interface) Tool, welches die Erstellung von VueJS Applikationen enorm vereinfacht. Also erst einmal habe ich dann in der prompt shell folgendes eingegeben:
root + npm -g i @vue/cli
Das installiert dann erst einmal vue cli.
Anschließend kreiert man dann das Projekt mit diesem Befehl:
vue create vue-weather
Danach kann man sich entscheiden für ein preset. Hier kann man auswählen zwischen Vue Router, default und manuelle Erstellung. Nachdem die default Einstellung bei mir einfach nicht klappen wollte (alles ausprobiert von cache cleaning zu, ich lösche den gesamten cache und installiere yarn), habe ich das dann schlussendlich manuell erstellt. Die einzigen zwei Sachen, die ich dann ausgewählt hatte waren babel und eslint.
In der Zeit, in der das Projekt geladen hatte, habe ich meine Wetter API keys angefordert. Das ging eigentlich ganz einfach:
Ich bin erst einmal auf diese Seite:
Dann musste ich mich dort anmelden. Nach der Anmeldung, kann man auf den Tab API keys gehen:
und dort habe ich mir dann diesen Schlüssel erstellt:
Diesen braucht man, um später die Wetter Daten zu bekommen.
Danach hatte dann auch das Projekt geladen. Ich habe dann in das Projekt navigiert in der shell (cd vue-weather) und dann den Server gestartet also npm run serve. Jetzt ging es dann ans Coden 😀 zuerst habe ich das Logo aus den assets gelöscht und das Hello World aus dem Template genommen. Den main folder lässt man so, wie er ist
Wie man sehen kann beinhaltet dieser die Vue Instanz.
View Files sind immer so aufgebaut erst kommt das template, indem sich das HTML befindet. Dann der Script-Teil und zum Schluss das CSS, wie ich es bereits oben gezeigt hatte.
Hier folgt jetzt der von mir geschriebene Code:
Ich werde nun einfach mal erzählen, wie ich vorgegangen bin, denn das war nicht dieselbe Reihenfolge, wie man es oben sehen kann. Da ich ja bereits das template hatte und damit die Struktur bereits.
Als erstes habe ich im Skriptteil die data Funktion hinzugefügt (da das hier eine Vue Komponente ist) , die die Datenattribute der Komponente als Objekt zurückgibt. Zu den Eigenschaften, die zurückgegeben werden sollen zählt zunächst der api_key. Das ist derjenige, den ich generiert habe und diesen füge ich als String hinzu.
Dann bin ich weiter nach oben in den Code ins Markup und habe dort zunächst noch ein main Element geschrieben. Search-box und search-bar sind in diesem Zuge auch gleich hinzu gekommen. Der placeholder Search… soll in der Suchleiste stehen, bis es Nutzer etwas eingibt. So ein Element hilft dem Nutzer zu wissen, dass er in diese Leiste etwas eingeben kann. Die Query und @keypress kamen erst später hinzu.
Anschließend bin ich in den Style Teil, in dem das ganze CSS hinein kommt. Als erster habe ich hier den Style für die komplette Seite bzw. alle Elemente der Seite festgelegt, diese finden sich innerhalb von *{}. Ich habe einen margin, wie auch padding von 0 gewählt uns als box-sizing den Wert border-box. Noch einmal zur Wiederholung: ein margin macht Platz um Elemente herum und es gibt margin für jede Seite eines Elements, also margin-bottom, margin-top, etc. Padding wiederum kreiert Platz um die Inhalte eines Elements. Auch hier kann man wieder einfach nur padding schreiben, oder das auf eine bestimmte Seite festlegen. Box-sizing definiert, wie die Weite und Höhe eines Elements kalkluliert werden. Mit dem Wert border-box, sind padding und border bereits in der Höhe und Weite enthalten. Die meisten Entwickler nehmen diese Einstellung, weil das Resultat davon besser ist und auch Browser benutzen es für einige form Elemente.
Die Schrift ist Montserrat und ohne Serifen.
Damit die Wetter App nicht ganz so langweilig aussieht, habe ich noch einen Hintegrund ausgewählt, der über seine URL gefunden wird. Das Bild habe ich lokal auf meinem Laptop im Ordner assets in meinem Projekt gespeichert, damit das auch in Visual Studio Code unter Assets erscheint. Damit das eingebunden werden kann, wurde der Pfadname angegeben (hier als url). Background-size spezifiziert die Größe des Hintergrundbildes. Das Property value cover, lässt das Hintergrundbild den ganzen Container decken, selbst wenn das Bild dadurch vergrößert oder gewisse Teile abgeschnitten werden müssen. Background-position setzt den Startpunkt für ein Hintegrundbild, in meinem Fall ist es bottom. CSS transitions erlauben einem property values sanft zu ändern über einen gewissen Zeitraum, hier sind es 0.4 Sekunden (diesen Wert habe ich immer genommen).
Auch für den main Part habe ich Style Elemente hinzugefügt. Die Größe beträgt die des Screens, dann ein padding von 25px und das Hintergrundbild soll von oben nach unten noch ein weniger abdunkeln, damit der User das besser lesen kann, deshalb wurde noch ein linear-gradient hinzugefügt.
Dann habe ich mich dem Stil der Suchleiste gewidmet. Sie hat eine Weite von 100% das heißt, sie geht über den gesamten Screen und hat nach oben hin 30px Platz. Das Display property spezifiziert ob und wie ein Element angezeigt wird. Hier zeigt es ein Element als einen Block an. Appearance passt das Erscheinungsbild von Elementen an die nativen Elemente des Betriebssystems an und wird von den Browsern vor allem zur Anpassung von Formularfeldern eingesetzt. Wenn sich Formularelemente von CSS nur wenig oder gar nicht beeindrucken lassen, befreit appearance : none die Elemente von den Vorlieben der Browser. Das color hier drin bezieht sich auf die Schriftfarbe des Text-Elements innerhalb der Suchleiste (also hier Search..). Was ich hier noch auffälligeres eingebaut hatte, vor allem wegen der User Experience ist, dass die Suchleiste schwankt zwischen Rundung und Ecke damit meine ich folgendes:
Und das noch bessere kommt jetzt:
Wenn der Benutzer nun auf die Suchleiste drückt, dann wird das CSS in search-box.search-bar: focus ausgeführt und durch den veränderten border-radius verändert sich der Rand und damit die Form der Search-Box:
Doch nicht nur das, sondern auch die Farbe wird heller und der Schatten wird kräftiger (durch andere Farbe und 16 anstatt 8px bei box-shadow).
Dann bin ich wieder ins markup des Codes und habe hier noch diese divs hinzugefügt:
Diese befinden sich immer noch innerhalb von main und dem ich nenne es mal großen Divs, das das ganze Markup umfasst mit der ID app. Diese divs stellen die zwei Abschnitte dar, die zum einen den Ort mit dem Datum und zum anderen die Temperatur mit dem Wetter (Regen, Schnee, etc.) beinhalten sollen (location-box und weather-box). Beide eher getrennteren Einheiten befinden sich dennoch unter dem div class= weather.wrap, warum werde ich später noch erklären, genau wie die Expressions die in den doppelt geschweiften Klammern stehen.
Auch diese divs brauchen ein wenig Pepp, deshalb habe ich auch für sie gewisse CSS Maßnahmen ergriffen.
Das sind die CSS Zeilen, die ich für den Ort und das Datum vorgenommen habe. Wie man sehen kann, wird der Ort größer und dicker dargestellt, als das Datum und hat einen Schatten. Das Datum wird in dem Stil italic geschrieben, das ist dann kursiv.
Die Wetter Box, die sowohl die Temperatur, als auch das das Wetter enthält soll einfach nur den Text zentriert haben. Für die Temperatur gibt es ein wenig mehr Einstellungen. Display:inline-block ist eine Alternative zum Positionieren mit float. Der umfassende Container wächst mit und die Boxen liegen auf einer Grundlinie. Die Temperatur ist das, was am Größten dargestellt werden soll, deshalb auch die hohe font-size, wie auch die Dicke. Die Temperatur soll jedoch auch durch einen Hintergrund noch etwas abgehoben werden, deshalb kommt noch eine Hintergrundfarbe hinzu (grau bis etwas dreckigeres weiß), die jedoch nicht das Hintergrundbild verdecken soll, deshalb ist die Farbe auch transparent. Damit sticht die Temperatur dann noch ein wenig mehr hervor.
Das ist nun fast der letzte CSS Teil. Hier geht es um das Wetter draußen. Im Gegensatz zur Temperatur bekommt dieses keine sichtbare Box und es ist auch ein wenig kleiner und dünner geschrieben. Außerdem ist es, wie das Datum auch im Stil italic, aber es bekommt noch einen Schatten.
Nun kommen wir mal wieder zum Skript Teil. In der Funktion Data innerhalb return habe ich dann die url_base angegeben, denn diese braucht man für ein request bzw. diese muss voran gehen, wenn man ein request machen möchte.
Die URL base habe ich aus der Dokumentation von der Seite, von der ich auch die API keys habe.
Außerdem hinzugefügt habe ich query und das Wetter-data-Objekt. Dieses ist da, um die Werte bzw. Daten darin zu speichern bzw. abzulegen.
Danach bin ich wieder hoch ins Markup und habe das hinzugefügt:
v-model ist eine bidirektionale Bindung für Formulareingaben . Es kombiniert v-bind, das bringt einen js-Wert in das Markup und v-on:input und aktualisiert den js-Wert. Ist also wieder eine ganz praktische Kurzschreibweise. Das bindet dann query an unser data Element. @keypress ist dasselbe wie v-on keypress, was nichts anderes ist, als ein addEventListener für ein key-Event. Wenn keypress passiert, dann wird die function fetchWeather ausgeführt, die ich danach deklariert habe:
Nur möchte man ja nicht, dass diese Funktion nicht bei jedem Tastendrücken ausgeführt wird, sondern erst, wenn man bzw. der Nutzer die Eingabe fertig gemacht hat und dann Enter drückt. Also wird die Funktion durch die if-Verzweigung nur dann ausgeführt, wenn Enter gedrückt wurde. fetch() ist eine JS API, die Ajax requests erlaubt und immer ein promise zurück gibt . Da wir anfragen, brauchen wir nun die url_base. Das weather darin, ist die API, um die aktuellen Wetterdaten zu bekommen (so steht es in deren Dokumentation). Das q steht für query (da es sich hierbei um eine Abfrage von Daten handelt). Diese query holt sich dann meine query, die an die search-box gebunden ist, welche ja die Daten vom Nutzer erhält. Das &unit=metric steht da, damit wir °c bekommen und kein Fahrenheit. Dann muss man dem fetch noch unseren API key übergeben. Das ganze innerhalb der Klammern von fetch, also der Parameter, gibt den Pfad zu der Ressource an, die wir abrufen möchten. fetch gibt ein Objekt immer als Promise zurück. Anschließend braucht man noch .then, damit die App weiß, was sie danach machen soll. Die then()-Funktion steht in Beziehung zu „Javascript-promises„. Ein Promise ist ein Pattern für den Umgang mit asynchronen Operationen. Das Promise ermöglicht es, eine Methode namens „then“ aufzurufen, mit der man Funktion(en) angeben kann, die als Callbacks verwendet werden sollen. Wenn die Anfrage geklappt hat , dann wird die Json Methode aufgerufen, um das response Objekt zu einem Objekt zu machen, mit dem man interagieren kann. Denn dies ist nur eine HTTP-Antwort, nicht das eigentliche JSON und enthält somit noch Daten, die wir nicht benötigen, wie den header. Um den JSON-Body-Inhalt aus der Antwort zu extrahieren, verwendet man die json()-Methode. Danach wird das Objekt, das aus der Methode setResults entsteht aufgerufen. Die Methode setResults habe ich dann eins unten drunter auch noch einmal deklariert:
Hier wird das Weather Objekt dann auf die results gesetzt, die das Wetter enthalten, das wie zurück bekommen haben bei unserer Anfrage.
Jetzt schließt sich auch so langsam der Kreis, denn die Werte vom Wetter müssen ja auch noch irgendwie angezeigt werden. Davor, habe ich jedoch das mit dem weather.wrap gemacht:
damit werden dann alle anderen Anzeigen, außer der Suchleiste und dem Hintergrundbild erst angezeigt, wenn weather.main ungleich zu undefined ist. Das heißt, dass nichts angezeigt wird, wenn der Nutzer noch keine Anfrage gestellt hat. Wie man sehen kann, werden die Daten, die sich innerhalb der {{}} befinden gezogen. Jedes Mal wird auf das Objekt weather und dann auf die bestimmten Daten zugegriffen. Bei dem Datum gibt es die Besonderheit, dass eine Funktion drin steht, aber dieses wird benötigt, um das Datum richtig darstellen zu können. Bei der Temperatur habe ich eingebaut, dass diese gerundet wird und beim Wetter, also ob es regnet, etc. soll immer nur der erste Wert geholt werden (daher der Index).
Für das Datum wurde folgende Methode deklariert:
let d = new Date(); ist das jetzige Datum. getDay gibt eine Zahl zwischen 1 und 6 aus, deshalb ist es noch notwendig ein Array mit den Tagen zu definieren, damit sich der Tag ausgeschrieben gezogen werden kann. Genauso sieht es bei den Monaten aus. Das ganze soll dann als ein String zurückgegeben werden und eben diese Funktion wird oben im Markup für das Datum aufgerufen.
Da man dem User ja auch bildlich ein wenig ein Gefühl geben will für das Wetter draußen, habe ich mich entschieden für warmes Wetter einen anderen Hintergrund zu nehmen. Dafür musste ich folgende Änderung vornehmen:
Das heißt so viel, wie dass man die ID app an eine Klasse bindet und wenn weather.main ungleich undefinded ist und die Temperatur größer als 16 Grad, dann wird es an die Klasse warm gebunden. Wenn eine der beiden nicht zustimmen sollte, dann wird die App wie die ganze Zeit schon ausgeführt.
Natürlich muss man hierfür, dann aber noch einen anderen Hintergrund einbinden:
Auch hier kann man wieder das app.warm sehen, also die Bindung von App an warm.
Und so sieht nun das Ergebnis aus:
und das war’s dann auch schon mit meinem Schwerpunkt! Es hat mir viel Spaß gemacht dieses Mal was Praktischeres zu machen..Schade das ich letztes Semester nicht darauf gekommen bin.
E-Portfolio Annick 