http://amity-friends.app

Einleitung/Überblick

Als Gruppenprojekt für das dritte Semester der Masterklasse haben wir uns zu dritt entschieden, eine App speziell für Freund:innen zu entwickeln, um das Planen und Organisieren von gemeinsamen Aktivitäten zu erleichtern. Die Idee hinter Amity ist es, Freund:innen näher zusammenzubringen, indem sie auf einfache Weise miteinander in Kontakt bleiben und ihre Zeit besser koordinieren können.

Rollenverteilung

• Sara: Design, Frontend, Backend
• Laura: Design, Frontend, Backend
• Vanessa: Design, Frontend, Backend, Organisation

Umgesetzte Funktionalitäten

Die App Amity bietet eine Vielzahl an Funktionen, die speziell darauf ausgelegt sind, das Planen und Organisieren von Aktivitäten unter Freund:innen so einfach wie möglich zu gestalten.

Im Zentrum steht der gemeinsame Kalender, der auf einen Blick alle geplanten Events sichtbar macht und die Planung gemeinsamer Treffen erheblich vereinfacht. Zusätzlich können Events erstellt und direkt mit ausgewählten Freund:innen geteilt werden, wodurch die Organisation noch effizienter wird. Diese Funktionen stellen sicher, dass selbst im hektischen Alltag keine Verabredung in Vergessenheit gerät.

Eine weitere Kernfunktion ist die Geburtstagsübersicht, die automatisch alle bevorstehenden Geburtstage anzeigt und so sicherstellt, dass kein wichtiger Anlass übersehen wird.

Ergänzt wird dies durch die Möglichkeit regelmäßiger Check-Ins, bei denen Nutzer:innen Push-Benachrichtigungen an Freund:innen verschicken können, um sich schnell und unkompliziert bei ihnen zu melden.

Amity fördert außerdem die Verbindung zwischen Freund:innen durch das Erstellen von geteilten Vorhersage-Listen. Damit können Nutzer:innen gemeinsam Prognosen über z. B. das kommende Jahr oder die Winterzeit erstellen und nach Ablauf markieren, ob sie „zutreffend“ oder „nicht zutreffend“ waren.

Durch diese durchdachten Features bietet Amity eine moderne und benutzerfreundliche Lösung, um die Koordination und den Austausch im Freundeskreis zu verbessern und Freundschaften aktiv zu pflegen.

Technologien

Frontend

Für Amity wurde Angular als Frontend-Framework gewählt. Angular bietet eine stabile Struktur, viele nützliche Tools und eine große Community. Diese Eigenschaften machten es zu einer guten Wahl für die Entwicklung einer dynamischen und skalierbaren Webanwendung. Die Arbeit mit TypeScript, das von Angular direkt unterstützt wird, half dabei, den Code übersichtlich und gut wartbar zu halten.

Für die Gestaltung der Benutzeroberfläche wurde Angular Material und Bootstrap genutzt. Angular Material stellt eine große Auswahl an Komponenten bereit, die die Entwicklung erleichterten und ein einheitliches Design ermöglichten. Bootstrap wurde genutzt, um das Layout weiter anzupassen und spezifische Designanforderungen flexibel umzusetzen.

Zusätzlich wurde die Anwendung als Progressive Web App (PWA) umgesetzt. Dadurch kann die App auf Mobilgeräten installiert werden.

Backend

Im Backend kam Node.js zum Einsatz, und als Framework wurde NestJS genutzt. Diese Technologien wurden von uns bereits in dem Projekt “Bevry” im WS23 und SS24 verwendet, die Vorerfahrungen erleichterten die Umsetzung im Backend bei Amity deutlich.

Zusätzlich wurden folgende Packages verwendet:

• TypeORM: Für die Verwaltung der Datenbank-Entities und die Kommunikation mit der Datenbank.
• JWT: Für die Authentifizierung der Nutzer.
• bcrypt: Für die sichere Verschlüsselung von Passwörtern.

Hürden und Schwierigkeiten

Frontend

Die größte Herausforderung, die sich beim Frontend Development ergab, war das Planen der verschiedenen Komponenten. Dadurch, dass wir mit Angular arbeiteten, war der Code sehr modular aufgebaut, was wir bspw. von Vue nicht in diesem Ausmaß gewohnt waren. Es war wichtig zu überlegen welche Seiten wie unterteilt werden konnten und vor allem welche Komponenten global verfügbar sein mussten (z.B. die Snackbar und Dialoge).

Eine weitere Hürde, war der richtige Umgang mit Datentypen. Da wir sowohl im Backend, als auch im Frontend, mit TypeScript arbeiteten, mussten wir darauf achten, dass die verwendeten Klassen in beiden Teilen vorhanden waren und angepasst wurden. Besonders bei den Datumsformaten mussten wir diesbezüglich aufpassen, damit keine Information bei der Übertragung ins Backend verloren ging. Außerdem ermöglichen wir das Uploaden von Bildern, was wiederum das richtige Umwandeln der Formate mit sich brachte.

Zu guter Letzt war eine Schwierigkeit das Umwandeln unserer Web App zu einer Progressive Web App (PWA). Glücklicherweise hatte unser Teammitglied Vanessa bereits Vorerfahrung zu diesem Thema und konnte den Großteil dieser Aufgabe übernehmen. Allerdings brachte das Einrichten und Testen der dafür benötigten Funktionalitäten großen Zeitaufwand mit sich.

Backend

Im Backend war das größte Problem die vielen Abhängigkeiten zwischen Klassen und Entitäten. Das Planen der Struktur war hierbei das wichtigste und anspruchsvollste. Da wir jedoch alles vorab genau geplant und beschrieben hatten, konnte die Implementierung recht schnell durchgeführt werden. Durch verschiedene Cascade und Loading Einstellungen, kam es jedoch trotzdem zu Recursive Errors und anderen Fehlern, die wir bewältigen mussten.

Besonders zu kämpfen hatten wir auch mit dem Versenden und Anzeigen von Push-Benachrichtigungen. Da die User:innen benachrichtigt werden sollten, sobald andere User:innen ein Check-In sendeten, musste der Befehl zuerst von einem Gerät abgesendet und dann von einem anderen empfangen werden. Da die Funktionen hinter diesem Problem recht komplex und verschachtelt sind benötigten wir ein paar Anläufe damit alles funktionierte.

Eine weitere Herausforderung war, dass das Backend dem Frontend immer einen Schritt voraus sein musste. Wie bereits erwähnt brachte das Backend einiges an Planungsaufwand mit sich, weshalb wir im Frontend darauf achten mussten zuerst die Dinge umzusetzen, die für sich alleine funktionieren konnten. Im Weiteren Verlauf der Umsetzung legten wir den Fokus darauf zumindest einen Sprint im Vorhinein das Backend für eine Komponente vorzubereiten.

Personal Learnings

Vanessa Hofer

Im Rahmen der Entwicklung von Amity habe ich erstmals mit NestJS gearbeitet und konnte dabei ein grundlegendes Verständnis für das Framework und seine modularen Konzepte gewinnen. Besonders das Erstellen von Push-Benachrichtigungen war eine wertvolle Lernerfahrung, da ich dabei sowohl die serverseitige Logik als auch die Integration ins Frontend umsetzen musste.

Auch in Angular konnte ich mein Wissen erweitern, da ich zuvor nur geringe Vorkenntnisse hatte. Durch das Arbeiten mit Komponenten, Datenbindung und Routing habe ich ein besseres Verständnis für die Entwicklung von Single-Page-Applications bekommen.

Die Arbeit an Amity hat mir gezeigt, wie wichtig es ist, sich schnell in neue Technologien einzuarbeiten und diese gezielt in einem Projekt einzusetzen.

Sara Ladner

In diesem Projekt habe ich viel dazugelernt, weil wir alle sowohl am Frontend als auch am Backend gearbeitet haben. Für mich war es das erste Mal, dass ich aktiv im Backend mitgearbeitet habe. Dabei konnte ich ein besseres Verständnis dafür entwickeln, wie die Kommunikation zwischen Frontend und Backend funktioniert und welche Prozesse im Hintergrund ablaufen. Besonders spannend war es, zu sehen, wie die einzelnen Teile des Projekts zusammengefügt werden, um eine funktionierende Anwendung zu erstellen.

Weiters habe ich zum ersten Mal mit Angular gearbeitet. Anfangs war das eine Herausforderung, da ich mich erst an die Struktur und Arbeitsweise des Frameworks gewöhnen musste. Mit der Zeit habe ich mich aber gut eingearbeitet und konnte sogar selbstständig neue Funktionen umsetzen. Durch diese praktischen Erfahrungen habe ich viel über die Entwicklung moderner Webanwendungen gelernt, und ich fühle mich jetzt sicherer im Umgang mit neuen Technologien.

Laura Kainzbauer

Für mich war dieses Projekt vor allem dadurch lehrreich, dass wir alle am Front- und Backend beteiligt waren und uns gegenseitig etwas beibringen konnten. Einerseits konnte ich meinen Kolleginnen beim ersten Arbeiten mit NestJS helfen, andererseits halfen sie mir mit Schwierigkeiten im Frontend. Ich finde diese Aufteilung hat es uns ermöglicht verschiedene Funktionalitäten vom Buttonklick bis zum Abrufen aus der Datenbank komplett durchzudenken und den gesamten Prozess noch besser zu verstehen.

Besonders das Arbeiten mit Angular war für mich spannend, da ich seit dem Bachelor nicht mehr damit gearbeitet hatte und mit Amity zum ersten Mal richtig damit umgehen konnte. Am meisten konnte ich dazulernen in der Arbeit mit den verschiedenen Komponenten und Services und dem Zusammenhang zwischen ihnen. Der Kalender war meine größte persönliche Errungenschaft, da ich in meinem ersten Angular Projekt bereits an ein einem Kalender arbeitete und seitdem nie wieder etwas damit zu tun haben wollte. In diesem Projekt konnte ich mein “Trauma” jedoch gut überwinden und bin sehr froh mit dem fertigen Ergebnis.