In Zeiten des Fachkräftemangels und Arbeitnehmermärkten zählt für Flagbit insbesondere die richtige Heranführung und Ausbildung des Nachwuchses. Das zeigt sich nicht nur an unseren neuen Auszubildenden, die jedes Jahr zu uns stoßen, sondern bereits an unseren Schülerpraktikanten. Um sie auf den Projektalltag eines Softwareentwicklers vorzubereiten, erhalten sie von uns immer kleine aber herausfordernde Projekte, die es in Eigenregie und natürlich mit erfahrener Unterstützung zu bewältigen gilt. So war auch Dalia Vukelja von der Balthasar-Neumann-Schule II in Bruchsal zwei Wochen bei uns und bekam die Aufgabe, ein Vier-Gewinnt-Spiel mit Vue.js zu programmieren. Sie hat einen kleinen Bericht dazu angefertigt, wie sie das Projekt angegangen und bearbeitet hat.

Vier-Gewinnt mit Vue.js

Am ersten Tag meines Praktikums bekam ich einen Rechner mit dem Betriebssystem Linux zugewiesen. Vorher hatte ich zwar noch nie mit Linux gearbeitet, aber das war eigentlich kein größeres Problem. Mir wurde dann die Aufgabe gestellt, ein Vier-Gewinnt-Spiel zu entwickeln. Also startete ich den PC und öffnete das Programm PhpStorm (ein Spezieller Editor zum Programmieren). Als allererstes fing ich an mit dem Grundgerüst. Ich benutzte HTML und CSS und gestaltete damit das Spiel. Danach verwendete ich Bootstrap, was mir dabei half, mein Grundgerüst in ein Raster zu packen, das alles zusammenhält.

Dieses Raster ist das sogenannte Grid System und besteht aus zwölf Spalten. Damit konnte ich angeben, wie groß jede Spalte sein sollte. Außerdem kann Bootstrap noch für verschiedene Fenstergrößen die Größe bestimmen, diese Funktion wurde mir später noch nützlich beim Anpassen meines Spiels, falls es jemand auf einem kleineren Computerbildschirm oder auf einem Tablet spielen möchte.

Mein Programm sah dem klassischen Design sehr ähnlich. Ich hatte ein blaues Spielfeld sowie rote und gelbe Spielchips, ein paar Tage später veränderte ich noch das Design in den Farben, die mir gefielen und legte Schatten unter dem Spielfeld Container, sodass er mehr Form hatte und nicht so platt aussah.

Entwicklung mit Vue.js

Aber bevor ich dies alles änderte, fing ich an mit Javascript. Mir wurde empfohlen mit Vue.js zu arbeiten, worin ich mich erst einmal einarbeiten musste, da ich noch nie zuvor mit Javascript oder Vue.js gearbeitet hatte. Vue.js sollte mir dabei helfen, das Spiel einfacher umzusetzen. Es ist ein Framework, das sich an Single Webanwendungen richtet. Es soll einfacher zu erlernen sein, als andere Frameworks wie z.B AngularJS. Vue.js koppelt sich direkt mit den Daten und vereinfacht die Ausgabe der Daten in die HTML-Struktur, so braucht man nicht mehr die Funktionen von z.B. jQuery, um manuell die Daten herauszufiltern und darzustellen. Nachdem ich mir einige Beispiele angeschaut habe, versuchte ich zuerst mit Vue.js eine Klick-Funktion zu erstellen, damit diese mir ausgibt, wenn ich auf das Spielfeld geklickt habe. Mit der Funktion „turn“ gab ich an, in welcher Spalte ich geklickt habe. „Turn“ nimmt den Bezug auf die Spalten des Vier-Gewinnt-Container.

Wie man das Spielprinzip digitalisiert…

Das Vier-Gewinnt-Spielprinzip lautet, die Spielchips den jeweiligen Spalten zuzuordnen. Der Chip wird dabei in das untere Feld befördert, das noch nicht belegt ist. So musste nun mein Vier-Gewinnt-Programm auch funktionieren. Ich musste also wissen, welche div-Container ich ansprechen muss, dass der Chip genau in diesem Feld landet. Durch Berechnungen konnte ich genau diesen ansprechen, aber ich musste auf eines achten und zwar auf die Farben. Sonst könnte der Spielchip den anderen überschreiben und so musste ich dem Programm beibringen, wie er es zu unterscheiden hat, welcher Chip welche Farbe hat. Nun konnten die Spielchips genauso in die Spalten gelangen wie in einem gewöhnlichen Vier-Gewinn-Spiel.

Wenn man nun eine Partie spielt, dann merkt man, nachdem spätestens vier Spielchip in einer Reihe stehen, dass man das Spiel nicht neustarten kann, so war es nun wichtig zu wissen, wer gewonnen hat, um ein neues Spiel starten zu können. Durch eine Schleife sollte dies erlangt werden. Also müssen wir nun wissen, in welche Richtungen wir prüfen müssen, also waagrecht, senkrecht und diagonal. Die Schleife muss alle Optionen durchlaufen sowie alle Spalten überprüfen, ob ein Chip vorhanden ist oder nicht und welche Farbe er hat.

Aufräumen nicht vergessen!

Nachdem alles fertig war, sollte man seinen Code aufräumen. Das bedeutet, dass man schauen sollte, ob man manche Codezeilen weglassen kann, wie zum Beispiel „console.log();“ welche man beispielsweise zum Ausgeben von Variablen benutzt. Ebenso Kommentare, die man geschrieben hat, um später verstehen zu können, was eigentlich geschrieben wurde, oder auch Leerzeilen, die unnötig platziert wurden. Am Ende schaut man noch einmal, ob alles richtig formatiert wurde, dass der Leser des Codes auch einen Überblick davon erhält, was programmiert wurde.

In den zwei Wochen Praktikum lernte ich im Unternehmen Flagbit vieles Neues kennen. Davon waren gute Einblicke in das Unternehmen und dessen Alltag. Ich bekam außerdem Einblick in den Beruf des Fachinformatikers. Außerdem habe ich eine Aufgabe bekommen, die für mich eine Herausforderung war und mich in Vielem gefordert hat. Man muss immer am Ball bleiben. Dieses Praktikum hat mir für meine weitere Karriere sehr weitergeholfen.