Einleitung

Als Teil des Masterstudiums im 1.Semester hatte ich die Gelegenheit, ein eigenens kleines Projekt zu entwickeln. Ich entschied mich für eine Chat-App, da ich schon einmal im Zuge eines Programmierkurses einen sehr sehr kleine Website mit einer “semi” Chat Funktionen gemacht habe und nun wollte ich das auch ein bisschen ernster und besser umsetzen. Das Ziel war es, eine Anwendung zu erstellen, mit der User in Echtzeit Nachrichten austauschen und gleichzeitig grundlegende Funktionen wie Benutzer-Authentifizierung nutzen können. Zudem wollte ich die Gelegenheit nutzen, um neue Technologien wie den Ionic-Framework und Firebase zu lernen.

Hauptfeatures der Chat-App

1 Echtzeit-Kommunikation

Ein zentrales Feature der App ist die Echtzeit-Kommunikation zwischen den Usern. Dazu habe ich die Firebase Realtime Database genutzt, die im Nachhinein relativ einfach aufgesetzt war. Jede Nachricht, die ein user sendet, wird unmittelbar in der Datenbank gespeichert und sofort bei allen verbundenen Clients synchronisiert.

2 Userübersicht

Ein weiters Feature der App ist die Userübersicht. In einem seperaten Fenster, das über einen Button rechts oben erreicht werden kann, sehen die Nutzer alle aktuell registrierten Benutzer. So kann man dann auch einen User auswählen und mit diesem einen Chat eröffnen.

3 Benutzer-Authentifizierung

Die App bietet Funktionen für die Registrierung, den Login sowie die Passwort-Wiederherstellung. Diese Features wurden mit Firebase Authentication implementiert. Die Arbeit daran war besonders schwer, da ich mitch zuerst in die Firebase-Dokumentation einlesen musste und ein paar zu viele Videos schauen musste. Aber durch ein paar gute Tutorials konnte ich mich durchkämpfen.

Technologien und Frameworks

Ionic Framework

Für die Entwicklung der App habe ich Ionic gewählt, da wir diesen auch schon im Rahmen eines Workshops hatten und der Framework sehr spannend wirkte. Für alle die diesen Framework nicht kennen, er ermöglicht es plattformübergreifende Apps mit einer einzigen Codebasis zu entwickeln.

Angular und TypeScript

Diese zwei habe ich gewählt, weil wir sie im Workshop ebenfalls verwendet haben und ich wollte mein Wissen direkt verbessen.

Firebase

Firebase war die Grundlage für das Backend. Neben der Realtime Database für die Nachrichten speichert Firebase auch Benutzerinformationen und ermöglicht eine sichere Authentifizierung. Zusätzlich nutzte ich das kostenlose Hosting von Firebase.

Projektstruktur

Von Anfang an war es mir wichtig, die Projektstruktur so übersichtlich wie möglich zu gestalten. Das Projekt ist in mehrere Ordner unterteilt:

• services/: Enthält alle Service-Klassen, die für die Kommunikation mit Firebase und andere geschäftskritische Logiken zuständig sind.
• components/: Beinhaltet wiederverwendbare UI-Komponenten wie Buttons und Formularfelder.
• guards/: Hier sind alle Dateien für die Benutzer-Authentifizierung und Guards gespeichert.
• pages/: Enthält die Hauptseiten der App, die über eine Tab-Navigation erreichbar sind.

Am Anfang fiel es mir schwer, die Struktur konsistent zu halten, doch mit der Zeit und etwas Disziplin konnte ich ein System entwickeln, das übersichtlich bleibt. Zusätzlich habe ich darauf geachtet, Kommentare in den Code einzufügen und Funktionen so klar wie möglich zu benennen. Fehler wurden mit Try-Catch-Blöcken abgefangen, und sinnvolle Meldungen wurden in die Konsole ausgegeben.

Herausforderungen und Learnings

Die größte Herausforderung bei diesem Projekt war die Implementierung der Benutzer-Authentifizierung mit Firebase. Da ich zuvor noch nie mit Firebase gearbeitet hatte, war vieles Neuland für mich. Dank der umfangreichen Dokumentation und Online-Ressourcen konnte ich diese Hürde jedoch meistern. Ein weiteres Learning war, wie wichtig eine gut durchdachte Projektstruktur ist, um den Überblick zu behalten.

Sicherheit und zukünftige Verbesserungen

Ein Bereich, in dem die App noch Optimierungspotenzial hat, ist die Sicherheit. Zum Beispiel sind die Nachrichten aktuell nicht verschlüsselt, und ich bin mir nicht sicher, inwiefern Firebase die Benutzerinformationen verschlüsselt speichert. In Zukunft möchte ich die Nachrichtenübertragung mit Ende-zu-Ende-Verschlüsselung absichern und die Benutzeroberfläche weiter verbessern. Außerdem eine Statusanzeige der Nutzer, Gruppenchats und ich will mich mit dem Thema der Internet-Calls auseinandersetzen.

Fazit

Die Entwicklung dieser Chat-App war eine spannende und lehrreiche Erfahrung. Ich konnte viele neue Technologien kennenlernen und anwenden. Besonders stolz bin ich darauf, wie die App letztendlich funktioniert und dass sie eine solide Basis für zukünftige Erweiterungen bietet. Dieses Projekt hat mir gezeigt, wie wichtig es ist, sich in neue Technologien einzuarbeiten und dabei Schritt für Schritt zu lernen.

Für die Zukunft plane ich, die App weiterzuentwickeln und sie eventuell mit weiteren Features wie Gruppenchats und einer besseren Verschlüsselung auszustatten.