F1-Statistik-Webseite
Die Formel 1 ist die Königsklasse im Automobil-Rennsport. Die erste Formel 1-Saison fand im Jahr 1950 statt. Mit über 1.000 Grand-Prix-Wochenenden, die jeweils aus Training, Qualifying und Rennen bestehen, gibt es eine enorme Menge an Daten, die für neue Formel 1-Fans etwas überfordernd sein können. Um Formel 1-Neulingen einen einfachen und übersichtlichen Einstieg in die Welt der Formel 1-Statistik zu ermöglichen, wird eine neue zentrale Webplattform entwickelt.
Der Fokus der Arbeit liegt dabei in der Datenaufbereitung und der Erstellung der Webseite. In einem ersten Schritt werden die Webseite und die Formel 1-Datenintegration geplant. Die Daten kommen dabei von einer bestehenden Quelle, der Ergast-Formel 1-Datenbank.
Vergleich Datenintegration
Da dieser Dienst zwei verschiedene Möglichkeiten bietet, um die Daten abzurufen, werden diese Methoden bereits in der Konzeptphase miteinander verglichen. Danach wird die bevorzugte Variante innerhalb der Umsetzungsphase implementiert werden. Einerseits stellt Ergast die Daten als API-Aufruf via Weblink zur Verfügung. Es gibt verschiedene URLs, welche unterschiedliche Daten - wie z.B. das Resultat des letzten Grand-Prix - liefern. Die Daten kommen dabei unformatiert im json-Format und müssen beim Empfänger noch aufbereitet/gefiltert werden. Dies soll mit eigens geschriebenen Python-Scripts geschehen.
Andererseits kann die Ergast-Datenbank auch als DB-Dump heruntergeladen werden. Der Dump wird anschliessend in eine eigene Datenbank integriert. Die gewünschten Daten müssen dann via SELECT-Befehlen aus der Datenbank abgerufen und in die Webseite integriert werden.
Damit die Varianten optimal miteinander verglichen werden können, wird am Beispiel „letztes Rennergebnis“ sowohl das Python-Script wie auch der SELECT-Befehl bereits in der Konzept-Phase erarbeitet.
Abschliessend werden die beiden Varianten gegenübergestellt. Es zeigt sich, dass die DB-Dump-Variante aufgrund der einfacheren Datenaufbereitung und Integration in die Webseite sowie dem tieferen Konfigurationsaufwand und des erhöhten Knowhows der Projektmitarbeitenden besser geeignet ist.
Spidermatrix API vs SQL-Dump
Planung Webseite
Die Webseite wird mit folgenden fünf Seiten erstellt: Startseite, Saisons, Rennen, Fahrer und Teams. Auf diesen Seiten werden Daten wie letztes Rennergebnis, aktueller WM-Stand und Infos zu Saisons, Rennen aus der Vergangenheit sowie zu den aktuellen Fahrern und Teams bereitgestellt. Für die Veröffentlichung im Internet kauft man die Domäne formula1-db.ch. Gehostet wird die Webseite auf einem VPS (Virtual Private Server), ein im Internet betriebener Ubuntu Server.
Skizze Startseite
Skizze Unterseite
Umsetzung
In der Umsetzungsphase werden zuerst das VPS sowie die Domäne organisiert. Danach werden der Webserver und die Datenbank in Betrieb genommen.
Grosser Aufwand bedeutet die Erstellung der Webseite. Diese entwickelt man mit Hilfe des Bootstrap-Frameworks, welches vordefinierte Vorlagen für CSS, JS und HTML zur Verfügung stellt und dem Mobile-First-Gedanken folgen. Damit ist die Webseite direkt für Mobilgeräte optimiert. Ein weiterer grosser Punkt ist das Schreiben der SELECT-Befehle, um die korrekten Daten aus der Datenbank zu erhalten.
SQL-SELECT-Befehl für letztes Rennergebnis.
Für vordefinierte Daten (wie aktuelle Fahrer, letzte Rennergebnisse usw.) wird ein Master-SQL-File geführt. Die dabei erstellten SQL-Views werden anschliessend in den Seiten der Webseite mit php aufgerufen. Bei Daten, welche der Benutzer noch Auswahlen treffen kann (z.B. welche Saison / welches Rennen), wird der SELECT-Befehl direkt in die Seite implementiert.
Damit die Seiten schnell laden, werden Indexe auf gewissen Tabellen der Datenbank erstellt.
Aufbau Webseite
Optimierungen
Da die Daten in der Datenbank statisch sind, werden diese jede Woche automatisiert aktualisiert. Mit einem Cronjob (geplante Aufgabe in Ubuntu) wird ein Script ausgeführt. Dieses Script lädt die aktuelle Ergast-Datenbank aus dem Internet herunter und ersetzt die veraltete Datenbank von formula1-db. Anschliessend wird das Master-SQL-File erneut auf der Datenbank ausgeführt, um die Views und Indexe neu zu erstellen.
Als weitere Optimierung der Webseite werden via einer FlagAPI die jeweiligen Landesflaggen der Fahrer und Teams angezeigt (siehe Gallerie). Die Daten zur Nationalität liefert hier ebenfalls die Ergast-DB.
Damit auch gleich innerhalb einer Seite Infos zum Team oder Fahrer aufgerufen werden können (z.B. vergangene Saison), wird ein Bootstrap Modal implementiert. Modal ist ein PopUp, welches innerhalb der aktuellen Seite öffnet und mittels Klick wieder geschlossen werden kann. Im implementierten Modal erhält man zum jeweiligen Fahrer/Team die Anzahl Rennsiege und Weltmeisterschaften.
Modal mit Fahrerdetails
Der gesamte Code der Webseite und der SQL-Befehle kann auf GitHub eingesehen werden:
