Teil des ersten Semesters in der Mobile Masterklasse war es das Ziel, ein eigenes Projekt zu programmieren, welches man selbst definieren durfte. In letzter Zeit hatte ich mich vertrauter mit Finanzen gemacht und habe mich deshalb wegen digitalen Haushaltsbüchern umgeschaut. Nach ein wenig Suchen fand ich aber keines, welche leicht das Eintragen auf Mobile wie auch am Desktop ermöglichte. Nachdem wir im Unterricht die Multiplattform Sprache [[21.11 Ionic|Ionic]] gelernt haben, hatte sich hier die Möglichkeit angeboten, selbst ein Haushaltsbuch zu erstellen. Nachdem das Erstellen eines Haushaltsbuchs eine größere Angelegenheit ist, war für zuerst einmal der Fokus, Basisfunktionen, wie das Erstellen von Konten und das Durchführen von Transaktionen auf diesen Konten, zu implementieren.

Features

Wie vorher erwähnt, habe ich mich in diesem Projekt erst einmal auf die Hauptfunktionen fokussiert:

Anmeldung

Es gibt ein einfaches Anmeldeformular, welches unbefugte User vom Einsehen der Daten stoppt. Wenn man nicht eingeloggt ist, kann man weder das Backend bedienen, noch kann man im Frontend auf andere Seiten navigieren, außer der Login Seite. Bisher gibt es nur einen vor angelegten User, welcher Zugriff auf alles hat. Hier gibt es aber Pläne, die Funktionen auszubauen.

Wenn man eingeloggt ist, gibt es dann auf der Hauptseite eine Tab-Bar mit einer Profilseite, wo man sich bisher einfach wieder ausloggen kann.

Kontenansicht

Der zweite Tab auf der Tab-Bar ist für die Konten, auf welche man die Transaktionen gibt. Jedes Konto hat einfach einen Namen, und sie werden dem Namen nach geordnet. Auch kann man den Gesamtbetrag aller Transaktionen auf diesem Konto einsehen.

Wie auch auf der Transaktionsseite gibt es hier die Möglichkeit, neue Konten hinzuzufügen, durch Klicken auf die Konten kann man sie editieren und durch nach links ziehen löschen. Wenn man ein Konto löscht, werden auch alle Transaktionen auf diesem Konto gelöscht.

Transaktionsansicht

Wenn man eingeloggt ist und man sich auf der Hauptseite befindet, sieht man unten drei Tabs. Zuerst erscheint die Transaktionsseite. Hier sieht man alle Transaktionen, nach Datum aufgelistet und nach Monat gruppiert.

Man kann bei den Transaktionen erkennen, ob Geld abgehoben oder eingezahlt wurde und erhält weiterführende Informationen, wie welches Konto für die Transaktion verwendet wurde und an welchem Datum sie durchgeführt wurde. Auch kann man eine optionale Beschreibung vergeben und man kann die Kategorie der Transaktion sehen. Die Transaktionen sind vorgefertigte Einträge in der Datenbank, welche man zum Einorden der Transaktionen verwenden kann.

Auf dieser Seite kann man auch neue Transaktionen mit dem Floating Button hinzufügen. Beim Klicken auf eine Transaktion kann man diese editieren oder durch das nach links ziehen einer Transaktion diese auch löschen.

Technologien

Für das Frontend habe ich Ionic in Verbindung mit Angular verwendet. Im Backend habe ich NestJS verwendet. Weiters habe ich für das Backend auch verschiedene Libraries, wie TypeOrm für das Objekt und Relation Mapping, class-validator für Validieren der Requests und Responses oder bcrypt zum Verschlüsseln der Passwörter verwendet.

Die Anmeldung funktioniert über einen JWT, welcher im Backend generiert wird und an das Frontend geschickt wird. Zum einen sind die Routen im Backend gesichert, aber zum anderen sind auch im Frontend bestimmte Seiten nur mit gültigem JWT erreichbar.

Herausforderungen

Ich war schon in meinem Bachelor Studium mit Ionic bekannt geworden und habe auch ein Semesterprojekt in diesem abgeschlossen. Daher war mir die Verwendung schon etwas bekannt. Aber mit NestJS hatte ich noch keinen Kontakt, vor allem nicht mit dem Objekt Relation Mapping. Vor allem auch nicht die Verbindung zwischen Ionic und NestJS.

Hier hat das Übungsprojekt, welches wir im Unterricht gemacht habe, sehr geholfen. Ich wusste, wie der generelle Aufbau sein sollte und wie man richtig beginnt. Dadurch konnte ich mir Stück für Stück auch selbst das Wissen aneignen und mein NestJS Backend erstellen und dieses mit meinem Ionic Frontend verbinden.

Learnings und Nächste Schritte

Ich konnte einiges aus diesem Projekt lernen, vor allem in der Verwendung von NestJS. Aber auch in der Verwendung von Ionic. Da das Semesterprojekt im Team gemacht wurde, ist es natürlich vorgekommen, dass manche Teile von Ionic weniger behandelt wurden. Aber jetzt, nach diesem Projekt habe ich das Gefühl, um einiges standfester mit Ionic und NestJS zu sein.

In den nächsten Semestern würde ich dieses Projekt auch gerne weiterführen, größtenteils für mich selbst. Ich würde gerne das System weiter ausbauen, zum Beispiel mit einer Grafikansicht der Ausgaben und Einnahmen oder einem System, welches verschiedene Abonnements tracken kann.