Fahrtkostenformular für die Kurse und Veranstaltungen der JDAV Bayern

Das Projekt wurde in Q1/2024 von Simon Langebrake (stellv. Landesjugendleiter) und Joseph Hirsch (stellv. Landesjugendleiter) initiiert und aufgesetzt. Es soll die Abrechnung von Fahrtkosten für die Kurse und Veranstaltungen der JDAV Bayern vereinfachen. Die Software ist noch nicht live, da sie noch nicht vollständig getestet ist.

Anwendung

Mit dem Fahrtkostenformular können Fahrtkosten für die Kurse und Veranstaltungen der JDAV Bayern erfasst werden. Die Daten werden im letzten Schritt mit Belegen erweitert und können dann als einheitliches PDF heruntergeladen werden. Dieses PDF muss gesondert eingereicht werden. Die Daten werden nicht automatisch an die JDAV Bayern übermittelt. Die einheitliche PDF soll der Landesgeschäftsstelle der JDAV Bayern die Abrechnung vereinfachen, da die Daten idealerweise verständlich und einheitlich aufbereitet sind.

Client-Only Static Web App

Das Fahrtkostenformular ist als reine Frontend-Anwendung konzipiert. Alle Daten werden im Browser gespeichert und nicht zentral in einer Datenbank abgelegt. Das hat den Vorteil, dass kein Backend benötigt wird und die Anwendung sehr einfach und flexibel gehostet werden kann.

Mitentwickeln

Gib gerne deinen Senf dazu! Wir freuen uns über jeden Beitrag. Um einen Fehler zu melden oder eine Verbesserung vorzuschlagen, kannst du entweder einen Issue eröffnen oder die Änderung direkt selbst programmieren und eine Pull Request stellen.

Das Projekt ist eine in TypeScript geschriebene Single Page Application basierend auf dem Framework Angular. Wie du damit lokal Entwickeln kannst, ist weiter unten erklärt. Wenn du eine Pull Request eröffnest, werden automatisch einige automatisierte Tests durchgeführt. Auch dazu findest du weiter unten genauere Infos.

Das Projekt ist unter der MIT-Lizenz veröffentlicht. Bevor du Code zum Projekt beiträgst, solltest du dich kurz mit dieser vertraut machen.

Lokale Entwicklung

Zur lokalen Entwicklung wird die Angular CLI genutzt. Detaillierte Informationen sind in der Dokumentation zu finden.

Installation

Du benötigst eine Installation von Node.js 22. Über den mitgelieferten Package Manager NPM werden alle weiteren Abhängigkeiten installiert:

pnpm install

Im Normalfall ist es außerdem ratsam, die Angular CLI als globales Paket zu installieren, um sie unabhängig vom Projektkontext nutzen zu können:

pnpm install -g @angular/cli

Entwicklungsserver

Um einen Server für die lokale Entwicklung zu starten, verwende:

ng serve

Sobald der Server läuft, öffne http://localhost:4200/ in deinem Browser. Die Seite wird automatisch neu geladen, wenn Änderungen vorgenommen werden.

Codegenerierung

Mithilfe der CLI kann das Codegerüst für neue Teile der App generiert werden, beispielsweise für neue Komponenten:

ng generate component <component-name>

Codequalität

Um eine möglichst hohe Qualität des Projekts sicherzustellen, solltest du deinen Code regelmäßig mit den hier aufgelisteten Tools testen. Diese Tests werden auch automatisiert durchgeführt, wenn du deine Pull Request eröffnest.

Linting

Das Projekt nutzt ESLint, um Fehlern im Code vorzubeugen. Der Linter analysiert den Quellcode, um mögliche Bugs aufzudecken. Liste alle Fehler mit dem folgenden Befehl auf:

ng lint

Formatierung

Für eine einheitliche Formatierung des Codes wird Prettier genutzt. Du kannst alle Dateien des Projekts mit dem folgenden Befehl formatieren:

pnpm format

Unit Tests ausführen

Unit Tests stellen sicher, dass einzelne Komponenten des Projekts die beabsichtigte Funktionsweise erfüllen. Du kannst sie mit folgendem Befehl ausführen:

ng test

Aktuell sind kaum Unit Tests im Projekt enthalten, wir freuen uns aber, wenn diese für neu entwickelten Code erstellt werden.

App bauen

Um eine optimierte Version der App zu erstellen, führe diesen Befehl aus:

ng build

Deployment

Wenn auf den main-Branch gepusht wird, z.B. weil deine Pull Request gemerged wird, wird die App automatisch gebaut und zunächst in unserem Staging-Environment auf GitHub Pages deployed.

Wenn das nächste Release-Tag erstellt wird, wird ein Docker-Image der App gebaut und auf der GitHub Container Registry veröffentlicht. Dieses Image deployen wir auch in unserem Production-Environment.

Um ein neues Release zu erstellen, einfach folgenden Befehl ausführen:

pnpm version <patch|minor|major>

Dadurch wird automatisch die Versionsnummer entsprechend des Arguments (patch, minor oder major) in der package.json erhöht und ein Commit sowie ein Tag erstellt. Nach dem Pushen des Tags wird automatisch eine neue Version des Containers gebaut und veröffentlicht.

git push --follow-tags