TU009-Tischtennis Code-Meisterei

In dieser Folge von „Tischtennis Code-Meisterei“ erzählen wir euch
die ganze Geschichte hinter unserer neuen App für die Schulliga der
LGS-HU. Wir haben uns im Unterricht zusammengetan, um eine
Plattform zu schaffen, auf der jeder Schüler ganz einfach seine
Matches eintragen und sehen kann, wer gerade der beste Spieler der
Schule ist. Wir nehmen euch mit von der ersten Idee bis hin zum
fertigen Programm. Der erste Teil: Alles für das Auge (Das
Frontend) Zuerst erklärt euch unser Frontend-Team – also Onur,
Allan und Ibrahim – wie die App überhaupt aussieht und wie man sie
bedient. Wir wollten keine hässliche, alte Tabelle, sondern ein
modernes Design. Deshalb haben wir Bootstrap benutzt. Das sorgt
dafür, dass die Seite auf dem Handy genauso gut aussieht wie auf
dem Computer. Wir zeigen euch, wie die Registrierung funktioniert
(dafür braucht ihr zwingend eure Schul-E-Mail, sonst kommt ihr
nicht rein!) und wie wir das Admin-Panel gebaut haben. Dort können
die Admins alles verwalten, Spieler löschen oder Ergebnisse prüfen.
Außerdem erfahrt ihr, wie wir die Rangliste so programmiert haben,
dass sie sich automatisch sortiert, wenn ein neues Ergebnis
reinkommt. Der zweite Teil: Der Maschinenraum (Das Backend) Danach
übernehmen Mert und Ilyas und erklären, was „hinter“ der Webseite
passiert. Eine Webseite allein reicht nämlich nicht – man braucht
einen Ort, wo die Namen und Punkte gespeichert werden. Das ist das
Backend. Wir haben uns eine eigene Virtuelle Maschine (VM) gemietet
und darauf eine Datenbank (MariaDB) installiert. Wir erklären euch
ganz einfach, wie wir ein Modell gebaut haben, damit der Computer
weiß: „Dieser Punkt gehört zu diesem Spieler“. Ein großes Thema war
auch die API. Das könnt ihr euch wie einen Kellner im Restaurant
vorstellen: Die Webseite bestellt die Daten, und die API bringt sie
aus der Datenbank direkt auf den Bildschirm. Damit das alles
klappt, haben wir eine Art Bedienungsanleitung namens Swagger
benutzt. Das Fazit: Teamwork und Stress Zum Schluss sprechen wir
noch darüber, wie wir als Gruppe funktioniert haben. Es war nicht
immer einfach – wir mussten über 100 Schulklassen einzeln in das
System einpflegen, was uns fast wahnsinnig gemacht hat. Aber durch
unsere Kommunikation über Discord haben wir es geschafft, Frontend
und Backend perfekt zu verbinden. Egal ob ihr Profis seid oder gar
keine Ahnung von IT habt: In dieser Folge lernt ihr, wie aus ein
bisschen Code ein echtes Projekt für unsere Schule wurde.