CI Hackathon 2023: Projekt Lernplattform

Am 24.08.2023 war es so weit, nach zwei Jahren Coronapause (und für mich auch zum ersten Mal) gab es endlich wieder einen Hackathon @ CI . Mit gut 60 Leuten versammelten wir uns in unserer Lounge, pitchten Ideen und schlossen uns mit interessierten Kolleg*innen zusammen, um diese umzusetzen. 

Eine Idee war es, eine eigene interaktive Lernplattform à la KodeCloud (oder ähnliche) zu realisieren. Konkret handelt es sich dabei um eine Webapplikation, in der man sich einen Kurs aussuchen kann. Dieser besteht aus mehreren Aufgaben, die nacheinander abgearbeitet werden müssen, wobei jedes Zwischenergebnis auf korrekte Lösung validiert wird. Alle notwendigen Tools, z.B. eine Shell, eine IDE, etc. sind direkt in der Webapplikation eingebunden.

Das anvisierte Ziel für die 24 Stunden des Hackathon war eine rudimentäre Weboberfläche mit zwei Seiten: eine Übersicht der verfügbaren Kurse und die eigentliche Kursseite. Dort sollten die Aufgaben angezeigt werden und eine Shell zur Bearbeitung der Aufgaben eingebunden sein. Im Hintergrund sollte auf einer Kubernetes-Instanz der notwendige Pod automatisch provisioniert und mit der Webseite verbunden werden. Diese Idee bot mir einige interessante technische Herausforderungen und ich schloss mich dieser Gruppe an.

In einem kurzen Brainstorming skizzierten wir die Lösung auf einem Flip-Chart und teilen uns nach Interesse und Können auf. Ich war schon immer viel in der Frontend-Entwicklung unterwegs und meldete mich dementsprechend für das Frontend. Voller Tatendrang begannen wir mit der Umsetzung, setzten uns zunächst zu zweit zusammen und wir entwarfen eine erste Idee für eine REST-API zwischen Frontend und Backend. Die anderen Kollegen bereiteten schonmal die Git-Infrastruktur vor, machten sich Gedanken, wie Kurse deklarativ beschrieben werden können und setzen eine einfache Kubernetes-Instanz auf.

Da ich aus dem Java Umfeld komme, hatte ich immer viel mit serverseitig gerenderten Frontends zu tun. Den Hackathon wollte ich nutzen, um mal wieder in andere Ansätze und Frameworks zu schnuppern. Daher entscheid ich mich, das Frontend mit Vue.js zu realisieren und so direkt meine TypeScript-Kenntnisse wieder aufzufrischen.

Also schnell NPM installiert und mit Vue.js ein Projekt aufgesetzt. Der Einstieg war leicht und die beiden Seiten, bis auf ein paar Stolpersteine, recht schnell erstellt. Noch fix die Farben, Schriftart und Icons von der CI-Webseite übernommen und schon sah es ganz annehmbar aus. Zwar waren alle Daten erstmal nur gemockt, aber das Anbinden der echten Schnittstelle sollte nicht allzu schwer werden. Eine große Unbekannte gab es aber noch: Wie zeige ich eine Shell in einer Webseite an? So etwas hatte ich bisher noch nicht gemacht. Doch es stellte sich raus: Das gibt es schon fertig in xterm.js und ich musste es nur in unsere App einbinden. Damit war alles vorbereitet und ich brauchte nur noch die Schnittstellen, um die App mit Leben zu füllen.

Hier war ich nicht direkt eingebunden. Da die konkrete Lösung bestimmt auch einige interessiert, habe ich meinen Kollegen (Jochen) gebeten, uns einen kurzen Einblick zu geben:

Mittlerweile war es 17-18 Uhr, wir waren immer noch voller Tatendrang und alles soweit vorbereitet, um zusammengesteckt zu werden. Mit Hilfe von Axios machte ich mich daran, die REST-Schnittstelle anzubinden. Zuerst lief auch alles glatt, die Vorfreude stieg.

Die beiden Tage haben mir viel Freude bereitet. Ich konnte viel Neues lernen, interessante Technologien ausprobieren und auch mal wieder eng mit den CI Kolleg*innen zusammenarbeiten. Das kommt bei der Projektarbeit für Kunden manchmal leider zu kurz. Es war sehr schön und unglaublich motivierend mitzuerleben, wie die Idee zu den funktionierenden Prototypen herangewachsten ist und ich freue mich schon jetzt auf den Hackathon im nächsten Jahr!