Das Chat-Programm wurde in einer Client-Client-Server-Architektur entwicklet, wobei der Client als WPF-Anwendung oder WebApp implementiert ist und diese beide mit dem Server (welcher auf Spring Boot basiert) kommunizieren. Die Daten werden in einer MongoDB-Datenbank gespeichert.
graph TD;
A[WPF Client] <--> C[Spring Boot Server];
B[Web-App Client] <--> C[Spring Boot Server];
C[Spring Boot Server] <--> D[MongoDB Datenbank];
Das Chat-Programm (tinyWhatsApp) ermöglicht es Benutzern miteinander in Echtzeit zu chatten. Es bietet eine benutzerfreundliche Oberfläche sowohl als Desktopanwendung (WPF) als auch als Webanwendung. Die Software überträgt die Daten natürlich verschlüsselt, sodass keiner Zugang zu den Benutzerdaten erhalten kann
In dem Eingabefeld mit dem Placeholder-Text "Benutzername eingeben" gibt man den Benutzernamemn des zu verwendeten Benutzers ein
In dem Eingabefeld mit dem Placeholder-Text "Passwort eingeben" gibt man das Passwort des zu verwendeten Benutzers ein
Wenn man auf den Registrieren Knopf drückt, dann wird man zum Registrieren-Fenster weitergeleitet
Wenn man auf den Passwort vergessen? Knopf drückt, dann wird man zum PasswortForgotten-Fenster weitergeleitet
Wenn man auf den Konto löschen Knopf drückt, dann wird man zum BenutzerLöschen-Fenster weitergeleitet
Wenn man in dem Passwort-Feld auf 'Enter' drükt, dann wird überprüft, ob der Benutzerexistiert
In dem Eingabefeld mit dem Placeholder-Text "Benutzername eingeben" gibt man den Benutzernamemn des zu erstellenden Benutzers ein
In dem Eingabefeld mit dem Placeholder-Text "Passwort eingeben" gibt man das Passwort des zu erstellenden Benutzers ein
Wenn man auf den Einloggen Knopf drückt, dann wird man zum Einloggen-Fenster weitergeleitet
Wenn man auf den Passwort vergessen? Knopf drückt, dann wird man zum PasswortForgotten-Fenster weitergeleitet
Wenn man auf den Konto löschen Knopf drückt, dann wird man zum BenutzerLöschen-Fenster weitergeleitet
Wenn man in dem Passwort-Feld auf 'Enter' drückt, dann wird überprüft, ob noch kein Benutzer mit diesem Namen existiert
In dem Eingabefeld mit dem Placeholder-Text "Benutzername eingeben" gibt man den Benutzernamemn des zu aktualisierenden Benutzers ein
In dem Eingabefeld mit dem Placeholder-Text "Passwort eingeben" gibt man das Passwort des zu aktualisierenden Benutzers ein
Wenn man auf den Einloggen Knopf drückt, dann wird man zum Login-Fenster weitergeleitet
Wenn man auf den Registrieren Knopf drückt, dann wird man zum Registrieren-Fenster weitergeleitet
Wenn man auf den Konto löschen Knopf drückt, dann wird man zum BenutzerLöschen-Fenster weitergeleitet
Wenn man in dem Passwort-Feld auf 'Enter' drückt, dann wird überprüft, ob ein Benutzer mit diesem Namen existiert
In dem Eingabefeld mit dem Placeholder-Text "Benutzername eingeben" gibt man den Benutzernamemn des zu löschenden Benutzers ein
In dem Eingabefeld mit dem Placeholder-Text "Passwort eingeben" gibt man das Passwort des zu löschenden Benutzers ein
Wenn man auf den Einloggen Knopf drückt, dann wird man zum Login-Fenster weitergeleitet
Wenn man auf den Registrieren Knopf drückt, dann wird man zum Registrieren-Fenster weitergeleitet
Wenn man auf den Passwort vergessen? Knopf drückt, dann wird man zum PasswortForgotten-Fenster weitergeleitet
Wenn man in dem Passwort-Feld auf 'Enter' drückt, dann wird überprüft, ob der Benutzer existiert
In dem Grauen Balken (links) werden alle Chatnamen angezeigt
Wenn auf einen Chatnamen doppelt gedrückt wird, dann wird das Chat-Feld geöffnet
Ebenfalls kann man zum Öffnen des Chat-Feldes den Edit Chat Knopf rechts unten drücken
In dem Weißen Balken (rechts) werden alle Nachrichten des aktuellen Chats angezeigt
Wenn auf eine Nachricht doppelt gedrückt wird, dann wird das Message-Feld geöffnet
Ebenfalls kann man zum Öffnen des Edit Message Knopf rechts unten drücken
In dem Eingabefeld unten mit dem Placeholder-Text "Nachricht eingeben" gibt man den Text für neue Nachrichten ein
Wenn man in diesem Feld auf 'Enter' drückt, dann wird die Nachricht gesendet
Ebenfalls kann man zum Absenden des Text den Send Knopf links unten drücken
Wenn der Download Knopf rechts oben gedrückt wird, dann wird die WebApp als Lokales Programm instaliert
Wenn man einmal auf einen Chatnamen drückt, dann wird der Inhalt des Chats rechts in das Nachrichten-Feld eingefügt
In dem Eingabefeld mit dem Placeholder-Text "Neuen Chatnamen eingeben" gibt man den Chatnamen ein
Wenn man auf den Chat hinzufügen Knopf drückt, dann wird ein neuer Chat erstellt
Wenn man auf den Chatnamen aktualisieren Knopf drückt, dann wird der Namen des aktuellen Chats geändert
Wenn man auf den Chat löschen Knopf drückt, dann wird der aktuelle Chat gelöscht
In dem Eingabefeld mit dem Placeholder-Text "Hier Benutzernamen eingeben" gibt man einen Benutzernamen eines anderen Benutzers ein
Wenn man auf den Benutzer hinzufügen Knopf drückt, dann kann man einen anderen Benutzer zum aktuellen Chat hinzufügen
Wenn man auf den Benutzer entfernen Knopf drückt, dann kann man einen anderen Benutzer des aktuellen Chats entfernen
In dem Eingabefeld mit dem Placeholder-text "Hier neue Nachricht eingeben" gibt man den neuen Inhalt der Nachricht ein
Wenn man auf den Nachricht aktualisieren Knopf drückt, dann wird der Inhalt der Nachricht aktualisiert (ist nur in den ersten 5 Minuten nach Erstellen der Nachricht möglich)
Wenn man auf den Nachricht löschen Knopf drückt, dann wird die aktuelle Nachricht gelöscht
In dem Eingabefeld unter dem Label "Benutzername eingeben" gibt man den Benutzernamemn des zu verwendeten Benutzers ein
In dem Eingabefeld unter dem Label "Passwort eingeben" gibt man das Passwort des zu verwendeten Benutzers ein
Wenn man auf den Registrieren Knopf drückt, dann wird man zum Registrieren-Fenster weitergeleitet
Wenn man auf den Passwort vergessen Knopf drückt, dann wird man zum PasswortForgotten-Fenster weitergeleitet
Wenn man auf den Konto löschen Knopf drückt, dann wird man zum BenutzerLöschen-Fenster weitergeleitet
Wenn man in dem Passwort-Feld auf 'Enter' drückt, dann wird überprüft, ob der Benutzer existiert
In dem Eingabefeld unter dem Label "Benutzername eingeben" gibt man den Benutzernamemn des zu erstellenden Benutzers ein
In dem Eingabefeld unter dem Label "Passwort eingeben" gibt man das Passwort des zu erstellenden Benutzers ein
Wenn man auf den Einloggen Knopf drückt, dann wird man zum Einloggen-Fenster weitergeleitet
Wenn man auf den Passwort vergessen Knopf drückt, dann wird man zum PasswortForgotten-Fenster weitergeleitet
Wenn man auf den Konto löschen Knopf drückt, dann wird man zum BenutzerLöschvben-Fenster weitergeleitet
Wenn man in dem Passwort-Feld auf 'Enter' drückt, dann wird überprüft, ob noch kein Benutzer mit dem Namen existiert
In dem Eingabefeld unter dem Label "Benutzername eingeben" gibt man den Benutzernamemn des zu aktualisierenden Benutzers ein
In dem Eingabefeld unter dem Label "Passwort eingeben" gibt man das Passwort des zu aktualisierenden Benutzers ein
Wenn man auf den Einloggen Knopf drückt, dann wird man zum Login-Fenster weitergeleitet
Wenn man auf den Registrieren Knopf drückt, dann wird man zum Registrieren-Fenster weitergeleitet
Wenn man auf den Konto löschen Knopf drückt, dann wird man zum BenutzerLöschen-Fenster weitergeleitet
Wenn man in dem Passwort-Feld auf 'Enter' drückt, dann wird überprüft, ob ein Benutzer mit diesem Namen exisitert
In dem Eingabefeld unter dem Label "Benutzername eingeben" gibt man den Benutzernamemn des zu löschenden Benutzers ein
In dem Eingabefeld unter dem Label "Passwort eingeben" gibt man das Passwort des zu löschenden Benutzers ein
Wenn man auf den Einloggen Knopf drückt, dann wird man zum Login-Fenster weitergeleitet
Wenn man auf den Registrieren Knopf drückt, dann wird man zum Registrieren-Fenster weitergeleitet
Wenn man auf den Passwort vergessen Knopf drückt, dann wird man zum PasswortForgotten-Fenster weitergeleitet
Wenn man in dem Passwort-Feld auf 'Enter' drückt, dann wird überprüft, ob der Benutzer existiert
In dem linken Balken werden alle Chatnamen angezeigt
Wenn auf einen Chatnamen doppelt gedrückt wird, dann wird das Chat-Feld geöffnet
Ebenfalls kann man zum Öffnen des Chat-Feldes den Chat aktualisieren Knopf links unten drücken
In dem rechten Balken werden alle Nachrichten des aktuellen Chats angezeigt
Wenn auf eine Nachricht doppelt gedrückt wird, dann wird das Message-Feld geöffnet
Ebenfalls kann man zum Öffnen des Nachrichten updaten Knopf rechts obem drücken
In dem Eingabefeld unten mitte, gibt man den Text für neue Nachrichten ein
Wenn man in diesem Feld auf 'Enter' drückt, dann wird die Nachricht gesendet
Ebenfalls kann man zum Absenden des Text den Senden Knopf rechts unten drücken
Wenn man einmal auf einen Chatnamen drückt, dann wird der Inhalt des Chats rechts in das Nachrichten-Feld eingefügt
In dem Eingabefeld unter dem Label "Bitte geben Sie den neuen Namen des Chats ein" gibt man den Chatnamen ein
Wenn man auf den linken Hinzufügen Knopf drückt, dann wird ein neuer Chat erstellt
Wenn man auf den Aktualisieren Knopf drückt, dann wird der Namen des aktuellen Chats geändert
Wenn man auf den linken Entfernen Knopf drückt, dann wird der aktuelle Chat gelöscht
In dem Eingabefeld unter dem Label "Bitte Benutzernamen eingeben" gibt man einen Benutzernamen eines anderen Benutzers ein
Wenn man auf den rechten Hinzufügen Knopf drückt, dann kann man einen anderen Benutzer zum aktuellen Chat hinzufügen
Wenn man auf den rechten BEntfernen Knopf drückt, dann kann man einen anderen Benutzer des aktuellen Chats entfernen
In dem Eingabefeld unter dem Label "Neuen Nachrichteninhalt eingeben" gibt man den neuen Inhalt der Nachricht ein
Wenn man auf den Aktualisieren Knopf drückt, dann wird der Inhalt der Nachricht aktualisiert (ist nur in den ersten 5 Minuten nach Erstellen der Nachricht möglich)
Wenn man auf den Löschen Knopf drückt, dann wird die aktuelle Nachricht gelöscht
Der Spring-Boot Server basiert auf dem REST-Pinzip, dadurch ermöglicht er den Clients, Nachrichten zu senden, zu empfangen und vieles mehr. (Keine GET-Endpoints, da ich für die Datenübertragung von den Clients an den Server immer den Body verwende & dieses im Web aufgrund von Sicherheitsstandards gesperrt ist)
/tinyWhatsApp []
Beschreibung: Dieser Endpunkt ist der generelle Endpoint der API, welcher vor dem jeweiligen spezifischen Endpoint geschrieben werden muss.
/checkUser [POST]
Beschreibung: Dieser Endpunkt wird verwendet, um die Zugangsdaten eines Benutzers zu überprüfen.
JSON-Body:
{
"username": "Beispiel-Benutzername",
"password": "Beispiel-Passwort"
}Return-Wert:
{
"userID": "Beispiel-UserID"
}/newUser [POST]
Beschreibung: Dieser Endpoint wird verwendet, um einen Neuen Benutzer anzulegen.
JSON-Body:
{
"username": "Beispiel-Benutzername",
"password": "Beispiel-Passwort"
}Return-Wert:
{
"userID": "Beispiel-UserID"
}/updateUser [PUT]
Beschreibung: Dieser Endpoint wird verwedent, um das Passwort eines Benutzers zu ändern.
JSON-Body:
{
"username": "Beispiel-Benutzername",
"password": "Beispiel-Passwort"
}Return-Wert:
{
"userID": "Beispiel-UserID"
}/deleteUser [DELETE]
Beschreibung: Dieser Endpoint wird verwendet, um einen Benutzer zu löschen.
JSON-Body:
{
"username": "Beispiel-Benutzername",
"password": "Beispiel-Passwort"
}Return-Wert:
"true"
"false"
/getChatNames [POST]
Beschreibung: Dieser Endpoint wurde verwendet, um die Namen aller Chats eines Benutzers zu erhalten.
JSON-Body:
{
"userID": "Beispiel-userID"
}Return-Wert:
{
"chatID": "Beispiel-ChatID",
"chatName ": "Beispiel-ChatName"
}/newChat [POST]
Beschreibung: Dieser Endpoint wurde verwendet, um einen neuen Chat anzulegen.
JSON-Body:
{
"userID": "Beispiel-userID",
"chatName": "Beispiel-Chatnamen"
}Return-Wert:
"true"
"false"
/updateChatName [PUT]
Beschreibung: Dieser Endpoint wurde verwendet, um den Namen eines Chats zu aktualisieren.
JSON-Body:
{
"chatID": "Beispiel-chatID",
"chatName": "Beispiel-Chatnamen"
}Return-Wert:
"true"
"false"
/deleteChat [DELETE]
Beschreibung: Dieser Endpoint wurde verwendet, um einen Chat zu löschen.
JSON-Body:
{
"chatID": "Beispiel-chatID"
}Return-Wert:
"true"
"false"
/addUserToChat [POST]
Beschreibung: Dieser Endpoint wurde verwendet, um einen Benutzer zu einem Chat hinzuzufügen.
JSON-Body:
{
"username": "Beispiel-Benutzername",
"chatID": "Beispiel-chatID"
}Return-Wert:
"true"
"false"
/removeUserFromChat [DELETE]
Beschreibung: Dieser Endpoint wurde verwendet, um einen Benutzer aus einem Chat zu entfernen.
JSON-Body:
{
"username": "Beispiel-Benutzername",
"chatID": "Beispiel-chatID"
}Return-Wert:
"true"
"false"
/getMessages [POST]
Beschreibung: Dieser Endpoint wurde verwendet, um alle Nachrichten eines Chats zu erhalten.
JSON-Body:
{
"chatID": "Beispiel-chatID",
"userID": "Beispiel-userID"
}Return-Wert:
{
"messageID" : "Beispiel-MessageID",
"message": "User (10:50): MessageText"
}/newMessage [POST]
Beschreibung: Dieser Endpoint wurde verwendet, um eine neue Nachricht zum Chat hinzuzufügen.
JSON-Body:
{
"userID": "Beispiel-userID",
"chatID": "Beispiel-chatID",
"message": "Beispiel-Nachrichtentext"
}Return-Wert:
"true"
"false"
/updateMessage [PUT]
Beschreibung: Dieser Endpoint wurde verwendet, um den Inhalt einer Nachricht zu aktualisieren (geht nur in den ersten 5 Minuten nch erstellen der Nachricht).
JSON-Body:
{
"userID": "Beispiel-userID",
"chatID": "Beispiel-chatID",
"messageID": "Beispiel-messageID",
"message": "Beispiel-Nachrichtentext"
}Return-Wert:
"true"
"false"
/deleteMessage [DELETE]
Beschreibung: Dieser Endpoint wurde verwendet, um eine Nachricht aus einem Chat zu löschen.
JSON-Body:
{
"userID": "Beispiel-userID",
"chatID": "Beispiel-chatID",
"messageID": "Beispiel-messageID"
}Return-Wert:
"true"
"false"
Unterhalb ist die Topologie, MongoDB-Konfiguration & Code-Blöcke, welche das Login des ChatProgramms darstellen
classDiagram
MongoDB-Datenbank -- Spring-Boot-Server
Spring-Boot-Server -- WPF-Client
Spring-Boot-Server -- WebApp-Client
WPF-Client o-- Login_WPF
WebApp-Client o-- Login_WebApp
MongoDB-Datenbank
Beschreibung: Wie die Daten eines Users in der MongoDB-Datenbank gespeichert werden
Java-Endpoint:
{
"_id": {
"$oid": "6641a7948e718f7024ff96b0"
},
"username": "test",
"password": "G0ErqvuApy3nJmRBlxGYuxagJxPzUdwhCIcpb64v2+KZxAODXBX9LUynj1as/qDAnG2XZBUQqLCSD1romJX6agKlrDn1WhIyRe7tQc/mYq8=",
"_class": "org.example.server_springboot.User"
}Spring-Boot Server
Beschreibung: Login von dem Spring-Boot Server aus
Java-Endpoint:
@PostMapping("/checkUser")
public String checkUser(@RequestBody String body) {
JSONObject jsonBody = new JSONObject(body);
return chatService.checkUser(jsonBody.getString("username"), jsonBody.getString("password"));
}Java-Backend:
//UserID aus MongoDB erhalten
public String checkUser(String username, String password) {
User user = userRepository.findUserByUsernameAndPassword(username, this.encrypt(password));
if (user != null) {
return user.getUserID();
}
return null;
}WPF-Client
Beschreibung: Login von dem WPF-Client aus
C#-Code:
//Benutzerdaten überprüfen
async public Task<string?> Login(string name, string passwort)
{
try
{
//Username & Passwort an den Server schicken
RestRequest request = new RestRequest("/checkUser", Method.Post);
var body = new
{
username = name,
password = this.Hash(passwort)
};
request.AddJsonBody(body);
//Antwort (userID oder "" erhalten)
RestResponse? response = await client.ExecuteAsync(request);
return response.Content;
}
catch (Exception ex)
{
//MessageBox zum Anzeigen der Error-Message
MessageBox.Show(ex.Message);
}
return null;
}WebApp-Client
Beschreibung: Login von dem WebApp-Client aus
JS-Code:
//Benutzerdaten überprüfen
async function checkUserExistence(event) {
try {
event.preventDefault();
//Benutzername & Passwort erhalten
const username = document.getElementById("usernameLogin").value;
const password = document.getElementById("passwordLogin").value;
//Überprüfen, ob die Url zum Server in localStorage gesetzt wurde
if (localStorage.getItem('urlToSpringBootServer') !== null && localStorage.getItem('urlToSpringBootServer') !== "") {
//Überprpfen, ob Benutzername & Passwort richtig eingegeben wurde
if (username !== null && username !== "" && password !== null && password !== "") {
//Anfrage an den Server senden
const response = await fetch(`${localStorage.getItem('urlToSpringBootServer')}/checkUser`, {
method: 'POST', body: JSON.stringify({
'username': username, 'password': await hash(password)
})
});
//Login-Form leeren
document.getElementById("usernameLogin").value = "";
document.getElementById("passwordLogin").value = "";
//Antwort erhalten
const data = await response.text();
//Wenn userID und nicht "" erhalten, dann weiter zu Home
if (data !== null && data !== "") {
localStorage.setItem('userID', data);
localStorage.setItem('webAppStatus', "active");
window.location.href = '../home/home.html' + localStorage. getItem('urlParameter');
} else {
//Anzeigen, dass Anmeldedaten falsch waren
alert("Anmeldung fehlgeschlagen");
}
} else {
//Anzeigen, dass Benutzername und/oder Passwort nicht eingegeben wurde
alert("Bitte geben Sie einen Benutzernamen und Passwort ein");
}
} else {
//Anzeigen, dass der Server nicht erreicht werden aknn (weil die Url fehlt)
alert("Server konnte nicht erreicht werden");
}
} catch (error) {
//Error in Console loggen
console.error(error);
}
}Nach ca. 2 Monaten und 3620 Zeilen Code in mehreren verschiedenen Programmier- & Scriptsprachen stelle ich die Erste Version meines ChatProgramms (tinyWhatsApp) vor. Das Chatprogramm hat eine intuative Benutzeroberfläche und eine Echtzeitkommunikation. Durch die Entwicklung der Clients in verschidenen Technologien (WPF & WebApp) ist die Unterstützung für sämtliche Platformen gegeben. Die Daten werden sicher in einer MongoDB-Datenbank gespeichert. Das Passwort wird im jeweiligen Client gehashed und im Server nochmals mit AES (= Advanced Encryption Service) verschlüsselt. Durch die Verschlüsselte Übertragung sind die Benutzerdaten von Fremdzugriffen gesichert.
tinyWhatsApp stellt eine intuitive Benutzeroberfläche für sämtliche Platformen zur Verfügung. Die REST-API des Spring-Boot Servers ermöglicht die Echtzeitkommunikation zwischen den Clients und der Datenbank.
Bei der Entwicklung der Chatprogramms wurde der Fokus auf Sicherheit der Benutzerdaten und Benutzerfreundlichkeit gelegt. Durch die Verwendung aktueller Technologien wie Spring-Boot, WPF, HTML, CSS, JSON & JavaScript wird die zukünftige Unterstützung gewährleistet. Die Nutzung einer MongoDB-Datenbank sorgt ebenfalls für die sichere Speicherung der Daten & effiziente Datenverwaltung.
In Zukunft soll das Chatprogramm auch Dateienübertragung (Foto, Video & Audio) unterstützen. Ebenfalls soll ein Benachrichtigungssystem implementiert werden. Durch Einbeziehen des Benutzerfeedbacks wird die Benutzerfreundlichkeit ebenfalls stark erhöht werden. TinyWhatsApp soll in Zukunft eine führende Plattform für sichere und benutzerfreundliche Echtzeitkommunikation werden.
classDiagram
Home o-- Login
Home o-- Register
Home o-- PaswordForgotten
Home o-- Delete
Home o-- Chat
Home o-- Message
classDiagram
Home o-- Login-Register-PasswortForgotten-Delete
Home o-- Chat
Home o-- Message
classDiagram
Application o-- ChatController
ChatController o-- ChatService
ChatService o-- User
ChatService o-- Chat
ChatService o-- Message
ChatService o-- UserRepository
ChatService o-- ChatRepository
ChatService o-- MessageRepository
MongoDBRepository <-- ChatRepository
MongoDBRepository <-- MessageRepository
MongoDBRepository <-- UserRepository