Bundesliga-Tabelle

In dieser Demo implementieren Sie eine Bundesliga-Tabelle. Datengrundlage sind die Informationen, die frei über die JSON-API der OpenLigaDB-Website bezogen werden können. Für den Zugriff auf die API wird AJAX verwendet. In dieser Übung werden keine neuen Inhalte vermittelt. Statt dessen sollen Sie die Methode des Pair Programming ausprobieren. Folgen Sie dazu den hier bereitgestellten Anweisungen.

Screenshot der Bundesliga-App

Informationen zur OpenLigaDB-API

Eine vollständige Dokumentation der API finden Sie hier. Zur Lösung der Aufgabenstellung werden nur ein Teil der bereitgestellten Endpoints benötigt:

Beschreibung

Die Anwendung zeigt die aktuelle Tabelle der 1. Fußballbundesliga an. Die Tabelle wird im Element <div id="table"></div> angezeigt. Die einzelnen Mannschaften werden, korrekt sortiert, als Zeilen im tbody-Element eingetragen. Verwenden Sie dazu das Template, das Sie im Element mit der ID table-entry-template finden. In der Tabelle werden Informationen wie gespielte Spiele, aktuelle Punkte und Torverhältnis angezeigt. Zusätzlich wird für jede Mannschaft der Gegner für den nächsten Spieltag angezeigt. Hovert der Nutzer über eine Zeile der Tabelle, wird die Zeile mit dem jeweils nächsten Gegner der ausgewählten Mannschaft hervorgehoben.

Nutzen Sie den Prototypen Team (Datei: resources/js/Team.js) zur Repräsentation einer - logischen - Mannschaft. Der Prototyp verfügt über eine Methode fromData, die es erlaubt, ein Team-Objekt auf Basis der Daten-Objekt zu erzeugen, die Sie von der API erhalten.

Aufgabenstellung

  1. Bilde Sie Zweier-Gruppen und legen Sie fest, wer initial die Rolle des Navigator bzw. die des Drivers übernimmt.

  2. Laden Sie das Starterpaket herunter und verschaffen Sie sich einen kurzen Überblick über den bereitgestellten Code.

  3. Implementieren Sie zuerst das Module AJAXHelper (Datei vendors/AJAXHelper.js), das eine globale Methode getContentAsJSON bereitstellt. Die Methode gibt ein Promise-Objekt zurück, das bei erfolgreicher Auflösung die per Parameter url definierte Ressource als JSON-Objekt bzw. -Array übergibt.

  4. Implementieren Sie ein Modul, das die aktuelle Tabelle herunterlädt, jeder Mannschaft den Gegner des nächsten Spieltags zuweist und die Daten über eine Event-Schnittstelle bereitstellt.

  5. Implementieren Sie ein Modul, das die aufbereiteten Tabellendaten rendert bzw. in das vorhandene Tabellenelement einträgt. Implementieren Sie in diesem View das Hervorheben des jeweils nächsten Gegners während des Hover-Vorgangs.

Implementieren Sie während der Bearbeitung der oben genannten Punkte aus das zentrale App-Modul, in dem die übrigen Komponenten der Anwendung initialisiert und gesteuert werden.

Während der Bearbeitung der Aufgabe erhalten Sie mehrmals den Hinweis, die Rollen (Navigator und Driver ) zu wechseln.

Starterpaket und Lösung

Ein vorbereitetes Starterpaket zur selbständigen Implementierung der Aufgabe sowie einen Lösungsvorschlag finden Sie auf Github. Die Lösung findet sich im master-Branch des verlinkten Repositories. Das Starterpaket im starter-Branch.