.. index:: projekt [3], git-learning-game [3], git [3] Git Learning Game ================= .. index:: einleitung [3] Einleitung ---------- Das Git Learning Game ist eine interaktive Webanwendung, die entwickelt wurde, um Benutzern, insbesondere Anfängern, die Grundlagen des Versionskontrollsystems Git auf spielerische Weise näherzubringen. Anstatt trockener Tutorials oder reiner Kommandozeilenübungen taucht der Spieler in eine Geschichte ein – das „Git-Gefängnis“ – aus dem er nur durch die korrekte Anwendung von Git-Befehlen entkommen kann. Jeder Schritt der Flucht benötigt eine typische Git-Operation. Das Projekt nutzt Python-Flask im Backend und Vue.js sowie Vuetify im Frontend. Fragen, Antworten und die Story werden in einer JSON-Datei verwaltet. Ziel ist es, den Lernprozess von Git ansprechender und motivierender zu gestalten. Als Inspiration diente `SQL Island `_. .. index:: demo [3] Demo ---- .. raw:: html .. _git-learning-game-grundlagen: .. index:: grundlagen [3] Grundlagen ---------- Für die Realisierung des Git Learning Games wurden verschiedene Technologien und Konzepte eingesetzt. Die wichtigsten werden hier vorgestellt. .. index:: flask [3], web-framework [3] Flask ````` Flask ist ein Mikro-Webframework, das in Python geschrieben wurde. Ein Web-Framework ist eine Kollektion an Bibliotheken und Modulen, welche es Entwicklern ermöglichen, einfach und effizient Webanwendungen zu implementieren, ohne sich mit Details im Low-Level Code-Bereich wie protocol, thread management und weiteren zu beschäftigen. Flask hat in diesem Fall diese Aufgabe. Es fokussiert sich auf einen einfach zu erweiterbaren Kern und enthält keinen ORM (Object Relational Manager) [Flask]_. Das Tool wird im Projekt genutzt, um den Backendserver unseres Git-Spiels aufzusetzen, mit dem Frontend zu kommunizieren und das JSON-File, in welchem die Fragen und Antworten gespeichert sind, zu verwalten. Wir nutzen es, da es simpel und einfach ist und uns ermöglicht, schnell und effizient das Backend aufzusetzen und später zu erweitern. .. index:: json [3] JSON ```` (JavaScript Object Notation) ist ein leichtgewichtiges Datenformat zum Speichern und Austauschen von Daten. Für Menschen ist es einfach zu schreiben und zu lesen und für Maschinen einfach zu parsen und zu generieren. Parsen ist das Analysieren von Datenstrukturen. JSON ist ein Textformat, welches unabhängig von Programmiersprachen ist und wird von fast allen modernen Programmiersprachen unterstützt. Die Struktur von JSON basiert auf Objekten (werden mit geschweiften Klammern gesetzt) und Arrays (eckige Klammern) [JSON]_. Wir nutzen JSON, da es eine leichtgewichtige und simple Datenstruktur ist, welche es uns ermöglicht, die Fragen, Tipps und Antworten unseres Git-Games zu persistieren und mit den Antworten des Spielers abzugleichen. Es hat minimalen Overhead und ermöglicht es schenll und einfach ein entsprechendes Datum zu verarbeiten. .. index:: vue.js [3] Vue.js `````` Vue.js ist ein progressives JavaScript-Framework zur Erstellung von Benutzeroberflächen (User Interfaces). Es zeichnet sich durch seine einfache Integration, Flexibilität und eine reaktive Datenbindung aus [VueJS]_. Das bedeutet, dass Änderungen im Datenmodell der Anwendung automatisch auf die Anzeige im Browser übertragen werden. Vue.js fördert eine komponentenbasierte Architektur, bei der die Benutzeroberfläche in wiederverwendbare Bausteine zerlegt wird. Im Git Learning Game bildet Vue.js die Grundlage für das gesamte Frontend, steuert die Anzeige von Fragen, die Interaktion mit dem Benutzer über das Terminal-Interface und die Kommunikation mit dem Backend über Axios. Die Wahl fiel auf Vue.js aufgrund seiner leichten Erlernbarkeit und der effizienten Entwicklung interaktiver Single-Page Applications (SPAs). .. index:: vuetify [3] Vuetify ``````` Vuetify ist ein Material-Design-Komponenten-Framework für Vue.js. Es stellt eine umfangreiche Sammlung vorgefertigter UI-Komponenten (wie Buttons, Karten, Layout-Systeme, Overlays etc.) bereit, die dem Google-Material-Design-Standard folgen [Vuetify]_. Die Verwendung von Vuetify beschleunigt die Frontend-Entwicklung erheblich, da viele Standard-UI-Elemente nicht von Grund auf neu erstellt werden müssen. Im Git Learning Game sorgt Vuetify für ein ansprechendes und konsistentes Erscheinungsbild, von der Kopf- und Fußzeile über das Layout der Spielansicht bis hin zu den Dialogen und dem Terminal-Design. .. index:: axios [3] Axios ````` Axios ist ein beliebter, Promise-basierter HTTP-Client für den Browser und Node.js [Axios]_. Er vereinfacht das Senden von asynchronen HTTP-Anfragen (z.B. GET, POST) an einen Server und das Verarbeiten der Antworten. Im Frontend des Git Learning Games wird Axios verwendet, um mit der Flask-API des Backends zu kommunizieren. Beispielsweise werden Fragen (``/questions/``), Story-Texte (``/story/``), Hinweise (``/hints/``) und Lösungen (``/answers/``) vom Backend abgerufen und Benutzerantworten zur Überprüfung an den Endpunkt ``/answer`` gesendet. .. index:: REST-API [3] REST-API ```````` Eine REST (Representational State Transfer) API ist ein Architekturstil für die Kommunikation zwischen Computersystemen, typischerweise über das HTTP-Protokoll. Sie definiert eine Reihe von Regeln und Konventionen für den Aufbau von Web-Services. Im Git Learning Game dient die Flask-Anwendung als REST-API-Server. Das Frontend (Vue.js) agiert als Client und interagiert mit dem Backend durch das Senden von HTTP-Anfragen an spezifische Endpunkte (URLs), wie ``/questions/`` oder ``/answer``. Diese Schnittstelle ermöglicht die klare Trennung zwischen der Datenlogik im Backend und der Präsentationslogik im Frontend. .. index:: podman [3] Podman `````` Podman ist ein Open-Source-Tool zur Verwaltung von Containern, das ohne zentralen Daemon auskommt und sowohl Root- als auch Rootless-Betrieb unterstützt. Es verwendet das Open Container Initiative (OCI)-Format und bietet eine Docker-kompatible Befehlszeilenschnittstelle, was den Umstieg erleichtert. Podman ermöglicht das einfache Finden, Ausführen, Erstellen und Teilen von Containern und Images in Linux-Umgebungen [Podman]_. .. index:: vorgehensweise [3] Vorgehensweise -------------- .. index:: minimum-viable-product [3], mvp [3], brainstorm [3], software-architektur [3] Projektablauf ````````````` Zu Beginn des Projekts wurde die Spielidee erörtert und ausgebaut und entsprechende Teams und Aufgaben verteilt. Anschließend haben wir uns über Programmiersprachen, Libraries, Tools und APIs ausgetauscht und passende ausgewählt. Um die Arbeit beginnen zu können, haben wir uns auf grundlegende Schnittstellen und die Architektur geeinigt um das Backend aufsetzen zu können. Damit eine erste Struktur für die Funktionalität des Spiels, entsprechend der Einigungen, vorhanden ist Wurde das Backend mit REST-API Schnittstellen aufgesetzt und ein Beispiel-Frontend dazu gebaut. Da dies minimalistisch und detailarm gehalten ist, dient es als gute Grundlage, um weitere Funktionalitäten hinzuzufügen und Änderungen vorzunehmen, wo sie bedürfen. Das ermöglicht uns, das Projekt so schnell wie möglich lauffähig zu gestalten, Deadlines einzuhalten und besser abschätzen zu können, ob weiter Features hinzugefügt werden können. Damit richten wir uns nach einem allgemeinen Konzept in der Software-Entwicklung: das Minimum Viable Product [MVP]_. .. index:: backend [3], backend-architektur [3] Backend-Architektur ``````````````````` Das Backend des Git Learning Games basiert auf dem Python-Framework Flask. Es stellt eine einfache REST-API bereit, die als Schnittstelle zum Frontend dient und die Spiellogik kapselt. Die Kernkomponente ist die Datei ``backend.py``. Diese initialisiert die Flask-Anwendung und aktiviert Cross-Origin Resource Sharing (CORS) mithilfe von ``Flask-CORS``, um Anfragen vom Frontend (das auf einer anderen Domain/Port laufen kann) zu erlauben. Die Spieldaten – Fragen, Antworten, Hinweise und Story-Texte – werden zentral in der Datei ``data.json`` gespeichert. Beim Start lädt das Backend diese Daten in den Speicher. Eine Funktion ``save_data`` ist zwar vorhanden, wird aber im aktuellen Code nicht aktiv genutzt, um Änderungen zur Laufzeit zurück in die Datei zu schreiben; die Daten sind somit statisch für die Dauer eines Serverlaufs. Die API definiert folgende Endpunkte: - ``GET /``: Eine einfache Willkommensnachricht zur Überprüfung, ob der Server läuft. - ``GET /questions/``: Liefert die Frage mit der angegebenen ID (``qid``). Es wird nur die ID und der Fragetext (``question``) zurückgegeben. Wenn keine Frage mit dieser ID gefunden wird (z.B. am Spielende), wird ein 404-Fehler gesendet, den das Frontend als Spielende interpretiert. - ``POST /answer``: Nimmt eine Benutzerantwort entgegen (``{"id": qid, "answer": user_answer}``). Das Backend vergleicht die übermittelte Antwort (nach Bereinigung und Umwandlung in Kleinbuchstaben) mit der korrekten Antwort aus ``data.json``. Es gibt ``{"result": true}`` bei korrekter Antwort und ``{"result": false}`` bei falscher Antwort zurück. - ``GET /story/``: Gibt den Storytext zurück, der angezeigt wird, wenn die Frage ``qid`` korrekt beantwortet wurde. - ``GET /hints/``: Liefert den zur Frage ``qid`` gehörenden Hinweis. - ``GET /answers/``: Gibt die korrekte Lösung für die Frage ``qid`` zurück. Dieser Endpunkt wird vom Frontend genutzt, um nach Abschluss eines Levels oder beim Überspringen die korrekte Antwort anzuzeigen. Das Backend ist bewusst schlank gehalten und konzentriert sich auf das Bereitstellen der Daten und die Validierung der Antworten. .. index:: frontend-architektur [3] Frontend-Architektur ```````````````````` Das Frontend des Git Learning Games wurde als Single-Page Application (SPA) mit Vue.js und der Vuetify-Komponentenbibliothek realisiert. Die Struktur folgt gängigen Vue-Konventionen. Der Einstiegspunkt ist ``main.js``, wo die Vue-App initialisiert, Vuetify als Plugin eingebunden und Axios für globale HTTP-Anfragen konfiguriert wird. Axios wird so eingestellt, dass Anfragen an ``/api`` über den Vite-Proxy (``vite.config.js``) an das Flask-Backend weitergeleitet werden. Die Hauptkomponente ist ``App.vue``. Sie fungiert als Orchestrator der gesamten Anwendung und verwaltet den globalen Zustand, wie z. B.: - Die ID der aktuellen Frage (``currentId``) - Das Objekt der aktuellen Frage (``currentQuestion``) - Den Verlauf der Terminal-Eingaben und -Ausgaben (``terminalHistory``) - Die Anzahl der Fehlversuche für das aktuelle Level (``wrongCount``) - Den Zustand des Avatars (``avatarState``), der auf korrekte/falsche Antworten reagiert - Lade- und Übermittlungszustände (``isLoading``, ``isSubmitting``) - Den Zustand der Overlays (``overlayState``: ``'intro'``, ``'levelComplete'``, ``'hidden'``) ``App.vue`` rendert die Hauptstruktur der Anwendung: ``Header``, ``Center`` (der Hauptinhaltsbereich) und ``Footer``. Es implementiert die Kernlogik für das Laden von Fragen, das Senden von Antworten, das Anfordern von Hinweisen, das Überspringen von Levels, die Navigation (``goBack``) und den Neustart des Spiels. Die Kommunikation mit dem Backend erfolgt hier über Axios. Die ``Center``-Komponente teilt den verfügbaren Platz zwischen der ``StoryPanel`` (links, zeigt Frage und Avatar) und der ``TerminalPanel`` (rechts, simuliert das Terminal) auf. Dieses Layout passt sich responsiv an kleinere Bildschirme an (CSS-``@media``-Queries). Weitere wichtige Komponenten sind: - ``Header.vue``: Enthält den Titel, Navigationsbuttons (Zurück, Überspringen) und ein Menü (``Menu.vue``) für Aktionen wie „Hinweis anzeigen“ und „Neu starten“. - ``StoryPanel.vue``: Zeigt den aktuellen Fragetext in einer Sprechblase und ein Avatar-Bild (``neutral.png``, ``happy.png``, ``not-happy-*.png``), dessen Zustand von ``App.vue`` gesteuert wird. - ``TerminalPanel.vue``: Stellt ein Eingabefeld mit einem Prompt (``$``) und einen Bereich zur Anzeige der Befehlshistorie (``history``) dar. Nimmt Benutzereingaben entgegen und leitet sie via Event (``submitAnswer``) an ``App.vue`` weiter. Zeigt auch Systemnachrichten (Fehler, Hinweise, Lösungen, Story-Texte) an. - ``LevelCompleteOverlay.vue``: Ein modales Fenster, das nach erfolgreichem Abschluss eines Levels angezeigt wird. Es zeigt den Story-Text des Levels und einen Button, um zum nächsten Level überzugehen. - ``IntroScreen.vue``: Wird zu Beginn angezeigt und präsentiert die Hintergrundgeschichte des Spiels mit einem „Spiel starten“-Button. Vuetify wird durchgehend für UI-Elemente wie Buttons (``v-btn``), Karten (``v-card``), Layout (``v-container``, ``v-main``, ``v-app-bar``, ``v-footer``), Overlays (``v-overlay``), Dialoge, Textfelder (``v-text-field``), Ladeanzeigen (``v-progress-circular``) und Icons (``v-icon``) genutzt. Das Styling wird durch eine Kombination aus Vuetify-Theming (``plugins/vuetify.js``) und benutzerdefinierten CSS-Regeln (``css/main.css``) realisiert, um ein dunkles, Terminal-ähnliches Erscheinungsbild zu erzeugen. .. index:: datenmodell [3] Datenmodell (``data.json``) ``````````````````````````` Das Herzstück des Spielinhalts ist die Datei ``data.json``. Sie definiert die Struktur und die Inhalte aller Fragen und der dazugehörigen Informationen im Spiel. Es handelt sich um ein JSON-Array, wobei jedes Element im Array einem Level bzw. einer Frage im Spiel entspricht. Jedes Frage-Objekt in diesem Array hat folgende Felder: - ``id`` (*Integer*): Eine eindeutige, fortlaufende Nummer für das Level, beginnend bei 0. Diese ID wird zur Identifizierung und zum Abrufen der spezifischen Frage über die API (``/questions/``, ``/story/`` usw.) verwendet. - ``question`` (*String*): Der Text, der dem Spieler angezeigt wird. Dieser enthält in der Regel eine narrative Beschreibung der Situation im „Git-Gefängnis“ und endet mit der eigentlichen Frage nach dem korrekten Git-Befehl. - ``answer`` (*String*): Die exakte Zeichenkette, die als korrekte Antwort für dieses Level erwartet wird. Das Backend vergleicht die Benutzereingabe (case-insensitive) mit diesem Wert. - ``hint`` (*String*): Ein kurzer Text, der dem Spieler als Hilfestellung angezeigt werden kann, wenn er Schwierigkeiten hat, die richtige Antwort zu finden. Dieser wird über den Endpunkt ``/hints/`` bereitgestellt und im Frontend auf Anfrage angezeigt. - ``story`` (*String*): Ein narrativer Text, der nach erfolgreichem Abschluss des Levels im ``LevelCompleteOverlay`` angezeigt wird. Er führt die Geschichte fort und bestätigt den Erfolg des Spielers. Die Struktur ist bewusst einfach gehalten. Sie ermöglicht es, neue Level einfach durch Hinzufügen weiterer Objekte zum Array zu erstellen oder bestehende Level zu modifizieren, ohne Codeänderungen am Backend oder Frontend vornehmen zu müssen (solange die Struktur beibehalten wird). Die ``data.json``-Datei im Projekt enthält über 200 solcher Objekte, die eine breite Palette von Git-Befehlen abdecken und den Spieler durch verschiedene thematische Abschnitte des Gefängnisses führen (Keller, Werkstatt, Kommunikationsraum etc.). .. index:: spielablauf [3] Spielablauf ``````````` Das Git Learning Game folgt einem klaren, zyklischen Ablauf, der darauf ausgelegt ist, den Lernprozess zu unterstützen: 1. **Start:** Das Spiel beginnt mit dem ``IntroScreen``, der die Hintergrundgeschichte erzählt. Ein Klick auf „Spiel starten“ blendet diesen aus und lädt das erste Level (Frage ``id = 1``). 2. **Fragenpräsentation:** Das Frontend (``App.vue``) ruft die aktuelle Frage vom Backend (``/questions/``) ab. Der Fragetext wird im ``StoryPanel`` angezeigt, zusammen mit dem neutralen Avatar. Das ``TerminalPanel`` ist bereit für die Eingabe. 3. **Benutzereingabe:** Der Spieler gibt den vermuteten Git-Befehl in das ``TerminalPanel`` ein und sendet ihn ab (Enter-Taste oder Senden-Button). 4. **Antwortüberprüfung:** Das Frontend sendet die Eingabe an den ``/answer``-Endpunkt des Backends. 5. **Feedback (Korrekt):** Wenn das Backend ``{"result": true}`` zurückgibt: - Der Avatar wechselt zu *happy*. - Das Frontend ruft den Story-Text vom ``/story/``-Endpunkt ab. - Der ``LevelCompleteOverlay`` wird angezeigt, der den Story-Text enthält. - Ein Klick auf „Nächstes Level“ im Overlay löst den Übergang aus. 6. **Feedback (Falsch):** Wenn das Backend ``{"result": false}`` zurückgibt: - Der ``wrongCount`` wird erhöht. - Der Avatar wechselt zu einem (anderen) „nicht glücklichen“ Zustand, je nach Anzahl der Fehlversuche. - Eine Fehlermeldung wird im ``TerminalPanel`` angezeigt. - Der Spieler kann es erneut versuchen. 7. **Hinweis anfordern (Optional):** Über das Menü im ``Header`` kann der Spieler jederzeit „Hinweis anzeigen“ wählen. Das Frontend ruft den Hinweis vom ``/hints/``-Endpunkt ab und zeigt ihn im ``TerminalPanel`` an. 8. **Level überspringen / Zurückspringen (Optional):** Über den Pfeil-nach-rechts-Button im ``Header`` kann der Spieler das aktuelle Level überspringen. Das Frontend ruft dann die Lösung (``/answers/``) und den Story-Text (``/story/``) für das übersprungene Level ab, zeigt diese im Terminal an und lädt das nächste Level. 9. **Nächstes Level laden:** Nach dem Schließen des ``LevelCompleteOverlay`` (bei korrekter Antwort) oder nach dem Überspringen wird das nächste Level geladen: - Die ID wird erhöht (``currentId + 1``). - Das Frontend ruft die Lösung (``/answers/``) für das *abgeschlossene* Level ab. - Separator, Lösung und Story-Text des abgeschlossenen Levels werden im ``TerminalPanel`` protokolliert. - ``loadQuestion`` wird für die neue ID aufgerufen. - ``wrongCount`` und ``avatarState`` werden zurückgesetzt. 10. **Zurückgehen:** Über den Pfeil-nach-links-Button kann der Spieler zu vorherigen Levels zurückkehren. Dabei wird der Terminalverlauf entsprechend bereinigt, um die Einträge des zuletzt angezeigten Levels zu entfernen, und das vorherige Level wird neu geladen. Der Spieler kann ebenfalls zurückspringen, um ein vorheriges Level erneut zu versuchen. Hierbei wird die vorherige Frage erneut eingeblendet und die Story und Lösung aus dem Terminal entfernt. 11. **Spielende:** Wenn das Backend auf eine Anfrage für ``/questions/`` einen 404-Fehler zurückgibt (weil keine Frage mit dieser ID mehr existiert), interpretiert das Frontend dies als Spielende. Eine Abschlussnachricht wird angezeigt. 12. **Neustart:** Über das Menü kann das Spiel jederzeit neugestartet werden, wodurch der Zustand zurückgesetzt und der ``IntroScreen`` wieder angezeigt wird. .. index:: containerisierung [3], deployment [3], podman [3], docker [3] Containerisierung und Deployment ```````````````````````````````` Im Rahmen des Projekts wurden sowohl das Frontend als auch das Backend containerisiert. Dafür wurde jeweils ein Containerfile erstellt und daraus ein Container-Image gebaut. Davor wurde noch ein nginx-Proxy geschaltet der die Anfragen annimmt und weiterleitet. Anschließend wurde eine Compose-Datei (compose.yml) erstellt, mit der die Images, Proxy, Frontend und Backend, gemeinsam gestartet werden können. Diese Datei ermöglicht ein einfaches Management und Starten der Container in der gewählten Umgebung, sei es mit Docker oder Podman. Für das Deployment wurde zunächst Podman eingesetzt, da es verschiedene Vorteile gegenüber Docker bietet, insbesondere im Rootless-Betrieb und Hinblick auf Sicherheit. Allerdings stellte Debian mit seiner standardmäßig ausgelieferten Podman-Version 3.x einige Hürden dar: Die erforderlichen Netzwerkfunktionen liefen nicht zuverlässig, und die Firewall blockierte den internen Traffic zwischen den Containern, sodass Frontend und Backend nicht kommunizieren konnten. Nach zahlreichen erfolglosen Konfigurationsversuchen entschlossen wir uns schließlich, auf Docker mit Root-Rechten zurückzugreifen. Dieser Wechsel erwies sich als deutlich einfacher zu konfigurieren und gewährleistete eine stabile Container-Kommunikation für den produktiven Betrieb. Obgleich eine zuverlässige Konfiguration unter Podman durchaus möglich ist, stellte der erhebliche Zeitaufwand bei der Einarbeitung für solch ein Kurzprojekt die größte Herausforderung dar. Das Deployment erfolgte auf einer virtuellen Maschine (VM) im Hochschulnetzwerk. Auf der VM wurde das Projekt-Repository per `git clone` heruntergeladen und anschließend die Anwendung mit `docker compose` gestartet. Schließlich wurde noch die Firewall so konfiguriert, dass nur die Anfragen aus dem internen Hochschulnetz akzeptiert werden und die Container untereinander kommunizieren können. Fazit & Ausblick ---------------- .. index:: fazit [3] Fazit ````` Das Projekt „Git Learning Game“ demonstriert erfolgreich, wie Gamification-Elemente und eine narrative Struktur genutzt werden können, um das Erlernen technischer Fähigkeiten wie der Git-Verwendung ansprechender zu gestalten. Durch die Kombination eines einfachen Flask-Backends zur Bereitstellung von Inhalten und zur Validierung mit einem interaktiven Vue.js-Frontend wurde eine funktionale Lernanwendung geschaffen. Die klare Trennung von Backend und Frontend über eine REST-API sowie die Verwendung eines leicht erweiterbaren JSON-Datenmodells bilden eine solide Grundlage. Das Spiel deckt eine Vielzahl von Git-Befehlen ab und führt den Benutzer schrittweise durch verschiedene Szenarien, eingebettet in die Metapher des „Git-Gefängnisses“. Die visuelle Rückmeldung durch den Avatar und die klare Struktur des Terminal-Interface tragen zu einer positiven Benutzererfahrung bei. .. index:: ausblick [3] Ausblick ```````` Obwohl das Spiel in seiner aktuellen Form bereits einen Mehrwert bietet, gibt es zahlreiche Möglichkeiten zur Weiterentwicklung: - **Erweiterte Git-Szenarien:** Integration komplexerer Git-Aufgaben, wie z.B. das Auflösen von Merge-Konflikten, interaktives Rebasing oder das Arbeiten mit Submodulen. - **Visuelle Repräsentation:** Hinzufügen einer grafischen Darstellung des Git-Graphen (Branch-Verlauf), um die Auswirkungen der Befehle visuell zu verdeutlichen. - **Persistenter Fortschritt:** Implementierung von Benutzerkonten oder lokaler Speicherung, damit Spieler ihren Fortschritt speichern und zu einem späteren Zeitpunkt fortsetzen können. - **Dynamisches Feedback:** Statt nur „richtig“ oder „falsch“ könnte das System spezifischere Hinweise geben, warum eine Eingabe falsch war (z. B. „Befehl existiert, aber falsche Argumente verwendet“). - **Schwierigkeitsgrade:** Einführung verschiedener Schwierigkeitsstufen, eventuell mit Zeitlimits oder weniger Hinweisen. - **Testing:** Ergänzung von Unit- und Integrationstests für Backend und Frontend, um die Stabilität und Korrektheit bei Weiterentwicklungen sicherzustellen. - **Inhaltliche Erweiterung:** Hinzufügen weiterer Level, Verfeinerung der Story oder sogar Erstellung neuer „Gefängnisse“ mit anderen thematischen Schwerpunkten. .. index:: literaturverzeichnis [3] Literaturverzeichnis -------------------- .. [Flask] Python Basics (o.D.): What is Flask Python?. Verfügbar unter: https://pythonbasics.org/what-is-flask-python/ (Zugriff am: 18.04.2025). .. [JSON] JSON.org (o. D.): Einführung in JSON. Verfügbar unter: https://www.json.org/json-de.html (Zugriff am: 18.04.2025). .. [MVP] Crowdify (o. D.) MVP – Minimum Viable Product entwickeln. Verfügbar unter: https://www.crowdify.net/de/blog/mvp-minimum-viable-product-entwickeln (Zugriff am 18. April 2025). .. [VueJS] Vue.js: The Progressive JavaScript Framework. Verfügbar unter: https://vuejs.org/ (Zugriff am 29. April 2025). .. [Vuetify] Vuetify: Material Design Component Framework. Verfügbar unter: https://vuetifyjs.com/ (Zugriff am 29. April 2025). .. [Axios] Axios: Promise based HTTP client for the browser and node.js. Verfügbar unter: https://axios-http.com/ (Zugriff am 29. April 2025). .. [Podman] Podman: What is Podman?. Verfügbar unter: https://docs.podman.io/en/latest/ (Zugriff am 29. April 2025).