Repository files navigation

Planungstool für den Ganztagsbereich einer Grundschule

Das Ziel des Projekts ist es die Planung des offenen Ganztagsbereichs einer Grundschule zu erleichtern. Die App ermöglicht das Erfassen der Stammdaten von Schülern und deren Teilnahme an Aktivitäten wie Frühbetreuung, Mittagessen, Hausaufgabenbetreuung und Kursangeboten. Basierend auf den erfassten Daten können dann automatisch Excel-Listen erzeugt werden, welche alle teilnehmenden Schüler einer Aktivität in einem bestimmten Zeitraum abbilden.

Technisch handelt es sich um eine Web-App bestehend ausAngular Frontend undNode.js Backend, welche mittelsElectron als Desktopanwendung verfügbar gemacht wird. Als lokale Datenbank wirdSQLite verwendet.

Um das Projekt lokal zum Laufen zu bringen, muss man nur das Repository mitVS Code öffnen, alle empfohlenen Erweiterungen installieren undnpm install ausführen, um alle erforderlichen Abhängigkeiten zu installieren. Anschließend muss nochnpm run rebuild für SQLite ausgeführt werden.

Das Projekt umfasst clientseitige Pre-Commit Git Hooks unter Verwendung vonhusky undlint-staged. Nach der Installation aller Projektabhängigkeiten werden damit Prettier und Linter automatisch vor jedem Commit ausgeführt.

Führt mannpm start oderng serve aus, so erhält man einen lokalen Entwicklungsserver auf dem die UI unterhttp://localhost:4200/ im Browser erreichbar ist. Die Anwendung wird dabei automatisch neu geladen, wenn eine der Quelldateien geändert wird. Die Datenbank ist auf diese Weise allerdings nicht erreichbar, da die SQLite DB nur mit dem Electron Build ausgeliefert wird, weshalb dieser Ansatz nur für UI Anpassungen zu empfehlen ist.

Für das lokale Starten der gesamten Anwendung kannnpm run electron ausgeführt werden. Dabei wird zunächst der Angular und anschließend der Electron Build erzeugt und die komplett funktionsfähige Anwendung gestartet. Bei Quellcode Änderungen startet sich hier die App allerdings nicht automatisch neu.

Führt manng generate component component-name aus, so wird eine neue Angular Komponente erzeugt. Auf die gleiche Art und Weise kannng generate directive|pipe|service|class|guard|interface|enum|module verwendet werden.

Mittelsnpm run build oderng build kann der Angular UI Build erstellt werden. Die Build-Artefakte werden im Verzeichnisdist/ gespeichert.

Durch Ausführen vonnpm run make kann der gesamte Electron Build erzeugt werden. Die Build-Artefakte werden im Verzeichnisout/ gespeichert.

npm run prettier kann ausgeführt werden, um nach um mithilfe von Prettier nach Formatierungsproblemen zu suchen undnpm run prettier:fix, um zu versuchen diese Fehler automatisch zu beheben.

npm run lint kann ausgeführt werden, um mithilfe von ESLint nach Code Problemen zu suchen undnpm run lint:fix, um zu versuchen diese Fehler automatisch zu beheben.

Durchnpm run test oderng test können die UI Unit Tests überKarma im Watch-Modus ausgeführt werden. Mittelsnpm run test:coverage werden alle Unit Tests inklusive Code Coverage Reporting ausgeführt. Der Report wird im Verzeichniscoverage/ gespeichert.