Rhaven/FSWeboberflaechen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add README.md

Browse Source
This commit is contained in:
Michaela Grabke 2024-09-09 19:31:52 +02:00
parent 1edce23f4d
commit c4abbc7ef7
1 changed files with 30 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
README.md
View File

@ -1,70 +1,51 @@
# Getting Started with Create React App
# Dokumentation des Ablaufs und der Funktionsweise des Codes
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Übersicht
## Available Scripts
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.
In the project directory, you can run:
## Ablauf der Registrierung
### `npm start`
### 1. Frontend-Komponente (SpendenForm)
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
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.
The page will reload when you make changes.\
You may also see any lint errors in the console.
- 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.
### `npm test`
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.
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
#### Formik-Funktionalität:
### `npm run build`
- **`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.
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
### 2. Bestätigungsseite (ConfirmationPage)
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
Nach erfolgreicher Registrierung wird der Benutzer auf die **Bestätigungsseite** weitergeleitet, wo ihm die eingegebenen Spendeninformationen angezeigt werden.
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
- **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.
### `npm run eject`
### 3. Backend-Komponente
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
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.
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
#### Ablauf im Backend:
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
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.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Validierung und Fehlerbehandlung
## Learn More
- **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.
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
## Benutzerinteraktion
To learn React, check out the [React documentation](https://reactjs.org/).
- **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.
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)