Dokumentation des Ablaufs und der Funktionsweise des Codes

Einleitung / Problemstellung

Dieser Code beschreibt eine Anwendung für die Registrierung von Kleiderspenden mit einem Frontend, das in React entwickelt wurde, und einem Backend, das mit Node.js/Express läuft. Der Benutzer kann entweder eine Spende per Abholung oder durch Übergabe an der Geschäftsstelle registrieren. Nach erfolgreicher Registrierung wird der Benutzer auf eine Bestätigungsseite weitergeleitet, auf der er eine JSON-Datei mit den Details der Spende herunterladen kann. Im Backend wird die Spende außerdem als JSON-Datei auf dem Server gespeichert.

Hauptteil

Ablauf der Registrierung

1. Frontend-Komponente (SpendenForm)

Die SpendenForm ist die zentrale Komponente für die Eingabe der Spendeninformationen. Sie enthält ein Formular, das vom Benutzer ausgefüllt werden muss. Abhängig von der Lieferart (Abholung oder Übergabe an der Geschäftsstelle) erscheinen unterschiedliche Eingabefelder.

• Wenn der Benutzer Abholung auswählt, muss er zusätzlich eine Abholadresse und eine Postleitzahl (PLZ) eingeben.
• Bei der Übergabe an der Geschäftsstelle werden diese Felder ausgeblendet.

Die Validierung der Eingaben erfolgt direkt im Formular durch die Formik-Bibliothek, die sicherstellt, dass alle erforderlichen Felder korrekt ausgefüllt sind, bevor die Daten abgeschickt werden.

Formik-Funktionalität:

• validate: Diese Funktion validiert die Benutzereingaben und stellt sicher, dass Felder wie Kleidungsart, Krisengebiet und Abholadresse korrekt ausgefüllt sind.
• onSubmit: Diese Funktion wird aufgerufen, wenn der Benutzer das Formular absendet. Die Daten werden an das Backend geschickt, und bei Erfolg wird der Benutzer auf eine Bestätigungsseite weitergeleitet.

2. Bestätigungsseite (ConfirmationPage)

Nach erfolgreicher Registrierung wird der Benutzer auf die Bestätigungsseite weitergeleitet, wo ihm die eingegebenen Spendeninformationen angezeigt werden.

• Download der JSON-Datei: Der Benutzer kann über einen Button die Bestätigung der Spende als JSON-Datei herunterladen. Diese Datei wird im Browser des Benutzers generiert und basiert auf den eingegebenen Daten.
• Dynamische Dateinamenerstellung: Abhängig von der Lieferart wird der Dateiname dynamisch erstellt. Bei einer Abholung wird die Abholadresse in den Dateinamen eingefügt, bei einer Übergabe an der Geschäftsstelle wird das Wort uebergabe verwendet.

3. Backend-Komponente

Das Backend ist mit Node.js/Express realisiert und verarbeitet die vom Frontend gesendeten Daten. Es führt einige Validierungen durch und speichert die Spendeninformationen in einer JSON-Datei auf dem Server.

Ablauf im Backend:

1. Datenvalidierung: Es wird geprüft, ob die PLZ im gleichen Gebiet liegt wie die Geschäftsstelle, wenn die Lieferart "Abholung" ist. Wenn dies nicht der Fall ist, wird ein Fehler zurückgegeben.
2. Dateinamenerstellung:
   • Abholung: Der Dateiname basiert auf der Abholadresse, wobei Leerzeichen durch Unterstriche ersetzt werden.
   • Übergabe an der Geschäftsstelle: Der Dateiname basiert auf dem Erstellungsdatum und der Uhrzeit im Format YYYY-MM-DDTHH-mm-ss.json.
3. Speichern der Daten: Die Spendeninformationen werden in eine JSON-Datei geschrieben und im Verzeichnis ./spenden gespeichert.

Validierung und Fehlerbehandlung

• Frontend: Die Eingaben werden durch die Formik-Bibliothek validiert. Nur bei vollständigen und gültigen Eingaben wird das Formular abgeschickt.
• Backend: Das Backend validiert, ob die PLZ bei der Abholung im richtigen Bereich liegt und erstellt eine JSON-Datei auf dem Server. Es wird eine Fehlerantwort zurückgegeben, wenn ein Problem auftritt, wie z. B. eine falsche PLZ oder ein Fehler beim Speichern der Datei.

Benutzerinteraktion / Ergebnis

• Erstregistrierung: Der Benutzer gibt die Spendeninformationen ein, wählt die Lieferart und übermittelt das Formular.
• Bestätigungsseite: Nach erfolgreicher Registrierung wird die Bestätigung angezeigt, und der Benutzer kann die Spendeninformationen als JSON-Datei herunterladen.