ChatConnect (Uni-Projekt)

ChatConnect ist eine Echtzeit-Chatanwendung, die Benutzern ermöglicht, Textnachrichten in Echtzeit auszutauschen. Unser Hauptziel bei diesem Projekt ist es, eine benutzerfreundliche und zuverlässige Plattform für die Online-Kommunikation bereitzustellen. ChatConnect zeichnet sich durch seine vollständige Responsive-Funktionalität aus. Das bedeutet, dass die Anwendung reibungslos auf verschiedenen Geräten und Bildschirmgrößen funktioniert.

Folgende Funktionen werden abgedeckt:

Registrierung und Login

Benutzer haben die Möglichkeit, sich über ein intuitives Registrierungsformular anzumelden und sich mit ihren Anmeldeinformationen einzuloggen. Dies gewährleistet die Sicherheit und die Personalisierung der Chat-Erfahrung.

Echtzeit-Kommunikation

ChatConnect ermöglicht Benutzern das Senden und Empfangen von Textnachrichten in Echtzeit. Dies ermöglicht reibungslose Konversationen zwischen Benutzern, unabhängig von ihrer geografischen Lage.

Namensfilter

Die Anwendung bietet die Möglichkeit, Benutzer nach Namen zu filtern. Dies erleichtert das Auffinden von Gesprächspartnern und früheren Unterhaltungen.

Konsistente Datenbank-Speicherung

Alle Daten, einschließlich Nachrichten, Chat-Verläufe und Benutzerinformationen, werden konsistent in einer Datenbank gespeichert. Dies gewährleistet die Integrität der Daten und ermöglicht eine einfache Verwaltung und Sicherung.

Technologiestack

• Frontend: Die Benutzeroberfläche wurde mit React erstellt.

• Backend: Das Backend wurde mit der Programmiersprache Node.js und dem Framework Express.js entwickelt.

• Datenbank: MongoDB wird zur sicheren und zuverlässigen Speicherung der Daten verwendet.

• Testing: Jest wird als Testframework genutzt.

• Echtzeit-Kommunikation: WebSocket-Technologie wird verwendet, um Echtzeit-Nachrichtenübertragung zu ermöglichen.

• Sicherheit: Die Anwendung besitzt Sicherheitsmaßnahmen wie Verschlüsselung und Authentifizierung, um die Benutzerdaten zu schützen.

• Dokumentation: Für das Backend wurde Swagger, für das Frontend JSDOC genutzt.

Installation & Verwendung

Um ChatConnect zu verwenden, stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen:

• Docker und Docker Compose

• Node.js und npm

Wenn die Anwendung mit einem der folgenden Verfahren gestartet wurde, können Sie das Frontend unter http://localhost:3030 und das Backend unter http://localhost:4040 abrufen. Um weitere Chatteilnahmer lokal zu simulieren, öffnen Sie ein privates Browserfenster und/oder starten Sie einen anderen Browser.

Verwendung von Docker Compose

Wechsle in das root-directory und führe folgenden Befehl aus:

docker-compose up -d

Verwendung von Docker

Sie können Backend-, sowie Frontendservice auch über das im jeweiligen Ordner liegende Dockerfile starten, wenn Sie das möchten.

Backend

Wechsle vom root-directory in das backend-directory und Erstelle ein Docker-Image für das Backend.

docker build -t chatconnect-backend .

Starte das Backend im Docker-Container.

docker run -d -p 4040:4040 chatconnect-backend

Frontend

Wechsle vom root-directory in das frontend-directory und erstelle ein Docker-Image für das Backend.

docker build -t chatconnect-frontend .

Starte das Frontend im Docker-Container.

docker run -d -p 3000:3000 chatconnect-frontend

Verwendung von Node.js und npm

Backend

Wechsle vom root-directory in das backend-directory und führe folgende Befehle aus:

npm install nodemon -g
npm install
nodemon index.js

Backend

Wechsle vom root-directory in das frontend-directory und führe folgende Befehle aus:

npm install
npm start

Tests

Starten von Tests

Wechsle in das jeweilige service-directory und führe folgende Befehle aus:

npm install
npm test

Füge -- --coverage bei npm test hinzu und du erhältst eine Übersicht über die Testcoverage des Projekts.
Ebenso entsteht ein coverage-directory in dem du in coverage\lcov-report eine index.html findest, welche dir eine Browseransicht der Testcoverage ermöglicht.

Dokumentation

Backend

Nachdem du das Backend gestartet hast, findest du die Dokumentation der API-Calls unter http://localhost:4040/api-docs/.

Frontend

Die Dokumentation der Frontend-Komponenten findest du im docs-directory im Frontend-Service. Nutze hier die index.html und ziehe diese in ein Browserfenster deiner Wahl.