Schritt-für-Schritt-Anleitung: Bewegung mit GPS automatisch aufzeichnen (Pfad A)

Schritt-für-Schritt-Anleitung (Pfad A): GPS-Tracking einbauen

Sie erweitern die App so, dass echte Fahrten per GPS aufgezeichnet werden. Die Dummy-Funktion wird entfernt, neue Zustände ergänzt und die Logik in eine eigene Datei ausgelagert.

1. Dummy-Funktion entfernen

In App.js entfernen Sie den Aufruf von addDummyFahrt() innerhalb von handleStartStop.

// vorher
const handleStartStop = () => {
  addDummyFahrt(fahrten, setFahrten);
};

// künftig getrennte Funktionen:
const handleStart = () => { ... };
const handleStop = () => { ... };

2. Datei tracking.js anlegen

Erstellen Sie im Ordner logic/ die Datei tracking.js und ergänzen Sie folgende Funktionen:

Standorterlaubnis:

import * as Location from 'expo-location';
import { berechneDistanzMeter } from './geo';

export async function frageStandortErlaubnis() {
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    alert('Standortzugriff verweigert');
    return false;
  }
  return true;
}

Tracking starten:

export async function starteTracking(setPositionen, setTrackingObjekt, setDistanz) {
  const erlaubt = await frageStandortErlaubnis();
  if (!erlaubt) return;

  const tracking = await Location.watchPositionAsync(
    {
      accuracy: Location.Accuracy.High,
      timeInterval: 1000,
      distanceInterval: 1
    },
    (pos) => {
      setPositionen((prev) => {
        const neue = [...prev, pos.coords];
        if (neue.length >= 2) {
          const letzte = neue[neue.length - 2];
          const aktuelle = neue[neue.length - 1];
          const zusatz = berechneDistanzMeter(letzte, aktuelle);
          setDistanz((d) => d + zusatz);
        }
        return neue;
      });
    }
  );

  setTrackingObjekt(tracking);
}

Tracking stoppen:

export function stoppeTracking(trackingObjekt) {
  trackingObjekt?.remove();
}

3. App.js anpassen

Importe ergänzen:

import { starteTracking, stoppeTracking } from './logic/tracking';

Neue Zustände einfügen:

const [positionen, setPositionen] = useState([]);
const [trackingObjekt, setTrackingObjekt] = useState(null);
const [startzeit, setStartzeit] = useState(null);
const [dauer, setDauer] = useState(0);
const [distanz, setDistanz] = useState(0);
const [timerId, setTimerId] = useState(null);
const [aufzeichnungLäuft, setAufzeichnungLäuft] = useState(false);

Starten:

const handleStart = () => {
  setStartzeit(Date.now());
  setDistanz(0);
  setDauer(0);
  setPositionen([]);
  setAufzeichnungLäuft(true);

  const id = setInterval(() => {
    setDauer((prev) => prev + 1);
  }, 1000);
  setTimerId(id);

  starteTracking(setPositionen, setTrackingObjekt, setDistanz);
};

Stoppen:

const handleStop = () => {
  stoppeTracking(trackingObjekt);
  clearInterval(timerId);
  setTimerId(null);
  setAufzeichnungLäuft(false);

  const jetzt = new Date();
  const fahrt = {
    id: Date.now().toString(),
    typ: 'GPS',
    datum: jetzt.toLocaleDateString('de-DE'),
    startzeit: new Date(startzeit).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }),
    endzeit: jetzt.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }),
    dauer,
    entfernung: (distanz / 1000).toFixed(2),
  };

  setFahrten([...fahrten, fahrt]);
};

Live-Werte anzeigen:

{aufzeichnungLäuft && (
  <>
    Dauer: {dauer} Sekunden
    Distanz: {distanz.toFixed(1)} Meter
  
)}

4. StartStopButton anpassen

export default function StartStopButton({ onStart, onStop, läuft }) {
  return (
    
  );
}

Einbindung in App.js:

Ergebnis

Die App zeichnet nun echte GPS-Routen auf. Dauer und Distanz werden während der Aufzeichnung aktualisiert, beim Stoppen entsteht ein vollständiges Fahrtobjekt, das in der Liste angezeigt wird.