Lernthema 2: Fachschicht implementieren

 Ich-kann-Liste – Lernthema 2: Fachschicht implementieren

In diesem Lernthema lerne ich Folgendes:

Ich kann (fachliche Kompetenzen):

• Benutzerinteraktionen erkennen und mit Ereignisverarbeitung in React Native umsetzen,
• eine bestehende Datenstruktur gezielt verändern (z. B. Einträge hinzufügen oder löschen),
• Eingabemasken gestalten, Eingaben verarbeiten und in einem Zustand speichern,
• Standortdaten erfassen, live aktualisieren und zur Weiterverarbeitung bereitstellen,
• Messdaten auswerten (z. B. Dauer, Entfernung) und systematisch dokumentieren,
• einfache Messfunktionen (z. B. Distanz zwischen GPS-Punkten) implementieren und nutzen,
• Daten in das CSV-Format überführen und exportbereit aufbereiten,
• Daten systemweit teilen (z. B. per Datei oder App-Integration) und zur Weiterverarbeitung bereitstellen.

Ich kann (überfachliche Kompetenzen):

• einen komplexen Arbeitsprozess strukturiert dokumentieren,
• Informationen aus verschiedenen Quellen zielgerichtet verknüpfen.

Einstieg

Was wäre Ihnen bei einer Fahrtenbuch-App besonders wichtig?

Arbeitsauftrag 1: Implementieren der Ereignisverarbeitung beim Buttonklick

Implementieren Sie eine einfache Ereignisverarbeitung in der Fahrtenbuch-App. Beim Klick auf den Button soll sich dessen Beschriftung ändern und ein Dummy-Datensatz hinzugefügt werden. 

Falls Ihnen die Umsetzung noch schwerfällt, bearbeiten Sie zuerst den vorbereitenden Lernschritt LS 2.1 – Ereignisverarbeitung.

Nutzen Sie die folgenden Hinweise zur Umsetzung:

• Nutzen Sie useState, um die Beschriftung des Buttons zwischen "Aufzeichnung starten" und "Aufzeichnung stoppen" umzuschalten.
• Die Funktion addDummyFahrt() ist bereits vorhanden – Sie müssen sie nur beim Klick auf „Aufzeichnung stoppen“ aufrufen.
• In der Komponente FahrtenListe ist bereits ein Button zum Löschen integriert. Reichen Sie die Löschfunktion per onDelete-Prop durch.

Sie brauchen Hilfe bei der Umsetzung? Schauen Sie sich die  Anleitung für Pfad A an.

Nutzen Sie die bereitgestellte Snack-Vorlage oder laden Sie das Projekt als ZIP-Datei herunter.

Laden Sie Ihre Lösung in Ihren Studienordner – Lernthema 2: Fachschicht implementieren hoch.

Arbeitsauftrag 2: Implementieren der Löschfunktion in der Fahrtenliste

Ergänzen Sie Ihre App so, dass einzelne Fahrten über einen Button gelöscht werden können.

Falls Sie aus Arbeitsauftrag 1 keine Lösung vorliegen haben, können Sie die Musterlösung zu AA1 als Ausgangspunkt verwenden.

Nutzen Sie die folgenden Hinweise zur Umsetzung:

• Die Funktion deleteFahrt(id, setFahrten) ist in fahrtenbuch.js bereits vorhanden.
• In App.js müssen Sie in der Funktion handleDelete den Löschvorgang ausführen: deleteFahrt(id, setFahrten);
• Übergeben Sie die Funktion als onDelete-Prop an <FahrtenListe />.
• Wenn Sie sich mit der Ereignisverarbeitung noch unsicher fühlen: Lernschritt 2.1 erklärt dieses Thema ausführlich.

Sie brauchen Hilfe bei der Umsetzung? Schauen Sie sich die Anleitung für Pfad A an.

Nutzen Sie die Musterlösung aus AA1 als Ausgangspunkt, als Snack-Link oder laden Sie das ZIP-Archiv herunter.

Testen Sie gegenseitig Ihre Apps in der Partnerarbeit:

• Funktioniert das Löschen wie gewünscht?
• Besprechen Sie, was besonders gut gelungen ist und wo es noch Schwierigkeiten gibt.

Halten Sie Ihre wichtigsten Erkenntnisse in Ihrem Journal – Lernthema 2: Fachschicht implementieren unter der Überschrift „Funktion und Umsetzung der Löschfunktion“ fest.

Laden Sie Ihre Lösung in Ihren Studienordner – Lernthema 2: Fachschicht implementieren hoch.

Arbeitsauftrag 3: Implementieren der manuellen Fahrtenerfassung

Ergänzen Sie Ihre App um eine Funktion zur manuellen Erfassung einer Fahrt über ein Eingabeformular im Modal.

Falls Ihnen die Umsetzung noch schwerfällt, bearbeiten Sie zuerst den vorbereitenden Lernschritt LS 2.3 – Sensoren implementieren.

Nutzen Sie die folgenden Hinweise zur Umsetzung:

• Fügen Sie einen „+“-Button oben im Fahrtenbereich ein.
• Beim Klick auf den Button soll sich ein Modal mit einem Eingabeformular öffnen.
• Das Formular soll mindestens folgende Felder enthalten:
  • Aktivität (z. B. Laufen, Fahrrad)
  • Kilometeranzahl
• Beim Speichern wird die neue Fahrt zur bestehenden Liste hinzugefügt.

Sie brauchen Hilfe bei der Umsetzung? Nutzen Sie die  Schritt-für-Schritt-Anleitung für Pfad A .

Weitere Hinweise zur Verwendung von Modal und TextInput finden Sie im Kursbuch.

Verwenden Sie die folgende Vorlage zur Umsetzung:

• Nutzen Sie Ihre Lösung aus AA2 oder starten Sie mit dieser Vorlage.
• Snack-Link: Snack-Vorlage zu AA2. (ZIP-Archiv)

 Testen Sie gemeinsam in der Partnerarbeit:

• Lässt sich eine Fahrt über das Modal korrekt speichern?
• Gibt es Fehlersituationen oder Verbesserungsmöglichkeiten?

Dokumentieren Sie im Journal – Lernthema 2: Fachschicht implementieren unter der Überschrift „Manuelle Fahrtenerfassung“, welche Herausforderungen es beim Speichern über das Modal gab.

Laden Sie Ihre Lösung in Ihren Studienordner – Lernthema 2: Fachschicht implementieren hoch.

Arbeitsauftrag 4: Implementieren der GPS-Aufzeichnung einer Routen

Erweitern Sie Ihre App so, dass bei einem Klick auf „Aufzeichnung starten“ die tatsächliche Bewegung des Geräts per GPS erfasst wird. Während der Aufzeichnung sollen Dauer und Distanz live angezeigt werden. Beim Stoppen werden Startzeit, Endzeit und die zurückgelegte Strecke berechnet und als Fahrt gespeichert.

Falls Ihnen die Umsetzung noch schwerfällt, bearbeiten Sie zuerst den vorbereitenden Lernschritt LS 2.4 – Ausgelesene Daten verarbeiten.

Nutzen Sie die folgenden Hinweise zur Umsetzung:

• Entfernen Sie den Aufruf von addDummyFahrt() aus App.js.
• Nutzen Sie expo-location für den Zugriff auf GPS-Daten.
• Legen Sie eine Datei logic/tracking.js für die GPS-Funktionen an.
• Verwenden Sie watchPositionAsync() zur Echtzeitverfolgung.
• Berechnen Sie die Distanz mit berechneDistanzMeter() aus logic/geo.js.
• Beim Start:
  • Standorterlaubnis abfragen
  • Tracking starten
  • Startzeit speichern
• Beim Stoppen:
  • Tracking stoppen
  • Endzeit speichern
  • Distanz berechnen
  • Dauer ermitteln
  • Fahrtobjekt erstellen und zur Liste hinzufügen

Nutzen Sie die  Schritt-für-Schritt-Anleitung zur GPS-Nutzung , wenn Sie Unterstützung benötigen.

Für Pfad B steht eine  kompakte Übersicht zur GPS-Integration zur Verfügung.

Verwenden Sie die folgende Vorlage zur Umsetzung:

• Snack-Link: Snack-Vorlage zu AA3. (ZIP-Archiv)

Nutzen Sie Date.now().toString(), um eine eindeutige ID für jede Fahrt zu erzeugen.

Testen Sie Ihre App auf einem GPS-fähigen Gerät (z. B. Smartphone) und prüfen Sie, ob Dauer, Distanz und Zeit korrekt erfasst und gespeichert werden.

Dokumentieren Sie im  Journal – Lernthema 2: Fachschicht implementieren :

• Wie und wo Sie den Zugriff auf die Standort-Funktionen eingebunden haben
• Wie Sie den Nutzer zur Freigabe des Standorts auffordern
• Wie Sie mit watchPositionAsync die Bewegung aufzeichnen
• Wie Sie das Tracking stoppen und warum das notwendig ist

Laden Sie Ihre Lösung (Snack-Link oder ZIP-Datei) in Ihren  Studienordner – Lernthema 2: Fachschicht implementieren hoch.

Arbeitsauftrag 5: Implementieren des CSV-Exports für Fahrten

Erweitern Sie Ihre App so, dass alle gespeicherten Fahrten als CSV-Datei exportiert und über das Betriebssystem weiterverarbeitet werden können – z. B. in Excel oder Google Sheets.

Falls Ihnen die Umsetzung noch schwerfällt, bearbeiten Sie zuerst den vorbereitenden Lernschritt LS 2.4 – Ausgelesene Daten verarbeiten.

Nutzen Sie die folgenden Hinweise zur Umsetzung:

• Erstellen Sie eine Datei logic/fahrtenExport.js mit einer Funktion, die ein fahrten-Array in CSV-Text umwandelt.
• Nutzen Sie expo-file-system und expo-sharing zum Schreiben und Teilen der Datei fahrten.csv.
• Integrieren Sie den Export als Icon-Button (file-download) mit MaterialIcons in Ihrer App.
• Beim Tippen auf das Icon soll die CSV-Datei erzeugt und automatisch zum Teilen geöffnet werden.

Nutzen Sie die  Schritt-für-Schritt-Anleitung für den CSV-Export , wenn Sie Unterstützung benötigen.

Falls Sie Hilfe brauchen, steht Ihnen eine   kompakte Übersicht zur CSV-Integration zur Verfügung.

Verwenden Sie die folgende Vorlage zur Umsetzung:

• Snack-Link: Musterlösung zu AA4. (ZIP-Archiv)

Achten Sie auf konsistente Spaltenüberschriften und ; als Trennzeichen.

Testen Sie die CSV-Exportfunktion auf einem Gerät. Öffnen Sie die Datei z. B. mit Excel, Numbers oder Google Sheets und überprüfen Sie den Inhalt.

Dokumentieren Sie im  Journal – Lernthema 2: Fachschicht implementieren :

• Wie und wo Sie die CSV-Datei erzeugen
• Wie der Export technisch funktioniert (Dateipfad, Sharing)
• Wie das Format aufgebaut ist und wie Sie es weiterverwenden würden

Laden Sie Ihre Lösung (Snack-Link oder ZIP-Datei) in Ihren  Studienordner – Lernthema 2: Fachschicht implementieren hoch.

Reflexion