Skip to main content

Fahrtenbuch React App

Dokumentation​

Anforderung​

Erstellen eines Fahrtenbuches mit React. Das Fahrtenbuch soll die Daten im local Storage des Browsers speichern. Eingegeben werden sollen folgende Informationen:

  • Kennzeichen des Fahrzeugs
  • Fahrer:in des Fahrzeugs
  • Kilometerstand bei Beginn der Fahrt
  • Kilometerstand bei Ende der Fahrt
  • Datum der Fahrt
  • Zweck der Fahrt

Die eingegebenen Daten sollen nach eingabe in einer Liste unterhalb des Eingabeformulars ausgegeben werden. Zusätzlich soll das Herunterladen der entstandenen Liste in Form einer JSON Datei möglich sein. Über die Möglichkeit eines Uploads soll es möglich sein JSON Dateien hochzuladen und den Inhalt ausgeben zu lassen. Die Einträge der Liste sollen sich nachträglich einzeln löschen lassen.

GUI​

Entwurf​

Alt text Eingabemöglichkeiten des Fahrtenbuchs

Alt text Ausgabe der Liste unterhalb der Eingabe

Zwischenstand​

Alt text Zwischenstand Eingabemöglichkeit mit Bootstrap

Alt text Zwischenstand Ausgabe der Liste unterhalb der Eingabe

TODO​

Funktionalität​

  • enum Kennzeichen
  • Speichern Kilometer entsprechend zu einem Nummernschild
  • KM Ende wird als neuer KM stand gespeichert
    • Bei Auswahl Nummernschild anzeige KM-Beginn automatisch aktuellen KM stand

Download​

  • PDF export

PWA - progressive web app​

  • Bedeutet das eine Anwendung eigenschaften einer Native und einer Web App vereint
  • Ermöglicht Plattformunabhängigkeit
  1. Download von Chrome
  2. Generate a Lighthouse report
  3. manifest.jason angepasst
  1. Icon ausgewählt - Neue Images in passenden größen erstellt - Entsprechende Images hochgeladen und in manifest.jason angepasst
  1. maskable erstellt und hochgeladen -> manifest.json
  1. yarn run build
  2. upload build Ordner bei Netlify

zu verstehen​

useEffect​

Erstellen​

  • Zuerst wurde die React App generiert. yarn create react-app . --template typescript
  • App Starten: yarn start Runs the app in the development mode.\ Open http://localhost:3000 to view it in the browser.

Dashboard​

Um sich innerhalb der App bewegen zu können ist es notwendig die Navigation innerhalb der App zu ermöglichen. Dafür verwendet wurde wurde react-router-dom 6.20.1

React-router-dom​

  • Installation von react-router-dom
    • npm install react

Speichern der Daten​

Local Storage​

Bearbeiten​