README.md



Gesundheitsportal - PWA (Progressive Web App)
Das Gesundheitsportal ist eine Progressive Web App (PWA), die Sprachbarrieren im Gesundheitswesen abbaut. Nutzer können damit medizinische Anamnesefragen und Freitext in verschiedenen Sprachen (z. B. Deutsch und Englisch) übersetzen. Die App unterstützt sowohl medizinisches Personal als auch Patienten, damit wichtige Informationen verständlich ausgetauscht werden können.

Hinweis: Teile des Codes (einschließlich DeepL-Integration) wurden gemeinsam mit ChatGPT entwickelt, um den Entwicklungsprozess zu beschleunigen.


Features


Anamnese: Schrittweises Übersetzen von Fragen (Deutsch ↔️ Englisch).

Freitextübersetzung: Freitexte zwischen Deutsch und Englisch, Italienisch oder Spanisch in Echtzeit, inkl. Mikrofon-Unterstützung für Spracheingaben.

Benutzerfreundliche UI: Intuitive Oberfläche, leicht bedienbar ohne Vorkenntnisse.


Installation & Setup

1. Entwicklung


Klonen des Repositories:
Klone das Repository mit dem folgenden Befehl:
git clone <repository_url>
cd gesundheitsportal


Abhängigkeiten installieren:
Stelle sicher, dass du Node.js installiert hast (mindestens Version 14). Führe dann den folgenden Befehl aus:
npm install


Umgebungsvariablen konfigurieren:
Erstelle eine .env-Datei im Hauptverzeichnis des Projekts und füge deinen DeepL API-Schlüssel ein:
REACT_APP_DEEPL_API_KEY=dein_api_key


App starten:
Zum Starten des Entwicklerservers:
npm start
Öffne die App im Browser unter http://localhost:3000.


2. Build für Produktion
Wenn du die App für den Produktionsbetrieb bereitstellen möchtest (zum Beispiel, um sie zu einem Webserver hochzuladen oder als PWA zu installieren), führe folgenden Befehl aus:


Produktions-Build erstellen:
Erstelle das Produktions-Build mit:
npm run build


Server starten:
Installiere serve (falls noch nicht installiert):
npm install -g serve
Starte den Server für den Build-Ordner:
serve -s build
Dies macht die App auf http://localhost:5000 verfügbar.


Features & Nutzung

1. Startseite


Die Startseite enthält zwei Hauptaktionen:


„Anamnese starten“: Beginnt den Übersetzungsprozess für medizinische Anamnesefragen.

„Freitextübersetzung“: Hier können Benutzer Text eingeben, der dann zwischen Deutsch und einer anderen Sprache übersetzt wird.


2. Anamnese


Fragen: Die medizinischen Anamnesefragen werden in Deutsch angezeigt, und der Benutzer gibt die Antwort auf Englisch ein (oder umgekehrt).

Übersetzungsprozess: Die Eingabe wird automatisch in die gewünschte Sprache übersetzt (mit DeepL API).


3. Freitextübersetzung


Das medizinische Personal gibt den Text auf Deutsch ein und erhält die Übersetzung.
Der Patient gibt den Text h ein und erhält die deutsche Übersetzung.


4. PWA-Funktionalität


Offline-Funktionalität (zukünftig): Nach dem ersten Laden der App wird sie für den Offline-Betrieb zwischengespeichert.

Installierbar: Benutzer können die PWA auf ihre Geräte installieren, indem sie auf das PWA-Symbol in der Adressleiste oder im Menü klicken.


Design & Architektur

1. Technologie-Stack


React: Die gesamte Anwendung ist mit React erstellt, was eine modulare und wartbare Struktur ermöglicht.

DeepL API: Die Übersetzungen werden über die DeepL API durchgeführt. API-Schlüssel müssen für die Nutzung in einer .env-Datei hinterlegt werden.

PWA: Um die App als Progressive Web App bereitzustellen.


2. Verzeichnisstruktur


src/ - Quellcode der Anwendung.


pages/ - Die Hauptseiten (Startseite, Anamnese, Freitext).

components/ - Wiederverwendbare UI-Komponenten.

assets/ - Grafiken, Icons und andere statische Ressourcen.

styles/- CSS-Dateien


public/ - Statische Ressourcen, die nicht durch React verarbeitet werden (z. B. das Manifest für PWA).

.env - Umgebungsvariablen wie API-Schlüssel.


Häufige Probleme & Lösungen

1. „Fehler beim Laden der DeepL API“


Überprüfe, ob der API-Schlüssel korrekt in der .env-Datei hinterlegt ist.
Stelle sicher, dass du eine funktionierende Internetverbindung hast, da die Übersetzungsabfragen online durchgeführt werden.


2. PWA funktioniert nicht im lokalen Entwicklungsmodus


Stelle sicher, dass du den Build-Prozess (mit npm run build) ausgeführt hast, um die PWA vollständig zu aktivieren.
Nutze den Serve-Server, um die PWA auf localhost auszuführen.


Weiterentwicklungen & To-Do


Responsive Layout:
Momentan basiert das Layout auf festen Pixelwerten und ist primär für Desktop-Auflösungen ausgelegt. Zukünftig planen wir, mithilfe von flexiblen CSS-Techniken (z. B. Flexbox oder CSS Grid) die App für alle Bildschirmgrößen (Smartphones, Tablets, Desktops) zu optimieren, sodass eine durchgängige Responsive-Experience gewährleistet wird.

Mehrsprachige Unterstützung: Derzeit sind nur wenige Sprachen unterstützt. Weitere Sprachen könnten hinzugefügt werden, basierend auf der API von DeepL.

Erweiterte Fehlerbehandlung: Verbesserte Rückmeldungen bei API-Fehlern, z. B. durch Anzeige von Fehlermeldungen im UI.

Benutzerfeedback: Hinzufügen einer Möglichkeit für Benutzer, Feedback zu den Übersetzungen zu geben und die Qualität zu bewerten.

Optimierung der App: Performance-Verbesserungen für schnelle Ladezeiten auch bei langsamen Internetverbindungen sowie Offline-FUnktionalität.