Es soll eine Angular Anwendung geschrieben werden, welche nach und nach als Frontend für LeoCode genützt werden kann. Gleich Vorweg will ich gesagt haben, dass ich natürlich für allerlei Fragen per Discord oder Mail gern zu Verfügung stehe.

1. Tasks

Anfangs ist das Design noch nicht wirklich wichtig, Priorität hat die Funktionalität sprich die Zugriffe aufs Backend mittels Rest. Dennoch würde ich es für sinnvoll halten mit Bootstrap oder noch besser mit Angular Material zu arbeiten.

Vorerst sind folgende Funktionen zu implementieren:

1.1. Create Example

Als Lehrer will ich die Möglichkeit haben ein Beispiel zu erstellen. Dies soll mittels eines Formulars realisiert werden. Ein Beispiel benötigt folgende Daten:

  • Username: Name des Benutzers (Lehrers), sollte später über Session automatisch gesetzt werden reicht momentan allerdings noch manuell

  • Example Name: Name des Beispiels z.B.: Hello World

  • Description: Kurzbeschreibung des Beispiels z.B.: Java Programm welches "Hello World" auf der Console ausgibt

  • Instruction: Entweder ein Markdown oder Asciidoc File, welches dem Schüler als Angabe dienen soll

  • Pom: pom.xml des Projektes wird fürs Testen benötigt, muss also logischerweise 1 XML File sein

  • Tests: die Unittests fürs Projekt, müssen bis jetzt .java Files sein, können auch mehrere Files sein

  • Solution: der richtige Sourcecode fürs Projekt, um den Schüler eine Musterlösung zu bieten, müssen .java Files sein, können auch mehrere Files sein

  • Jenkinsfile: das Jenkinsfile welches zum Testen verwendet werden soll, der Lehrer soll die Möglichkeit haben zwischen mehreren Jenkinsfile-Presets auszuwählen oder eben selbst eines hochladen können

1.2. Test Project

Als Schüler will ich meinen Code zu einem Beispiel testen. Hierfür soll wieder ein Formular verwendet werden. Dieses Formular benötigt:

  • Username: Name des Benutzers (Schüler), sollte später über Session automatisch gesetzt werden reicht momentan allerdings noch manuell

  • Example: Id des zu testende Beispiels, sollte über Routerlink gesetzt werden also: Schüler sieht sich ein Beispiel an (Example Detail) ⇒ coded Beispiel & drückt anschließend Abgeben Button ⇒ wird zum Abgabe Formular (Test Project) weitergeleitet

  • Code: Sourcecode Files des Schülers, momentan .java Files können mehrere sein

1.3. List All Examples

Als Schüler möchte ich zwischen verschiedenen (allen) Beispielen wählen, welches ich probieren will.

Hierbei soll auf einen Endpoints des Backends zugegriffen werden, welche alle Beispiel returnt (nähere Infos folgen). Die Website soll diese Beispiele dann als Liste Darstellen. Pro Listenelement bzw. pro Beispiel soll:

  • Der ExampleName: Name des Beispiels

  • Die Description: Kurzbeschreibung des Beispiels

  • Der Autor: Name des Erstellers (Lehrers) z.B.: Stütz

angezeigt werden. Klickt ein User nun auf ein Beispiel wird er auf die Detailansicht weitergeleitet.

1.4. Example Detail

Als Schüler möchte ich die Angabe sehen.

Grundsätzlich soll dies einfach eine Detailansicht eines Beispiels sein. Hier sieht man alle möglichen Informationen eines Beispiels (außer der Lösung sowie dem Jenkinsfile).

Was extrem cool wäre ist, wenn die Angabe, welche schließlich als adoc angegeben werden sollte direkt angezeigt werden könnte. Der User sollte dann zwischen normaler Ansicht und Angabe wechseln können. Ich weiß allerdings nicht wie kompliziert solch eine Umsetzung wirklich ist.

2. Infos

Hier werden in Zukunft verschiedene weiteren Infos bezüglich den Endpoints oder dem generellen Backend angeführt werden.

2.1. Endpoints

Um den Client zu testen, könnt ihr natürlich das Backend verwenden. Um dieses zu starten, müsst ihr folgendes machen:

  • Datenbank starten: Im Projekt Root einfach docker-compose up postgres-db

  • Backend Server starten: Im Unterordner Backend den Quarkus Server mit ./mvnw clean compile quarkus:dev starten

Die Endpoints auf die ihr zugreifen müsst findet ihr im resources package im Backend. Ich würde euch allerdings empfehlen eher die http-requests anzusehen. Die requests findet ihr im Ordner LeoCode/http-requests. Dort solltet ihr für jede von eurer Aufgabe ein .http File finden. In diesen Files ist klar ersichtlich, welcher Endpoint welche Daten benötigt.