LS 2.4: Ausgelesene Daten verarbeiten

Ich kann ...

Fachliche Kompetenzen:

• den Ablauf einer mobilen Anwendung analysieren und beschreiben, wie Zustände (State), zeitgesteuerte Abläufe und Sensordatenverarbeitung zusammenwirken,
• mehrere Sensordatenwerte speichern und in einer Liste anzeigen,
• den höchsten Wert aus einem Zahlenarray berechnen und anzeigen,
• den Durchschnittswert eines Zahlenarrays berechnen und darstellen,
• eine Liste von Daten optisch ansprechend und strukturiert präsentieren.

Überfachliche Kompetenzen:

• Daten analysieren, vergleichen und nachvollziehbar aufbereiten,
• Apps gezielt um Auswertungs- und Visualisierungsfunktionen erweitern.

Einstieg

Das ist Jumpalyze.
Die App misst, wie stark sich Ihr Smartphone beim Springen bewegt – und zeigt den höchsten Wert an.

Challenge: Öffnen Sie die App Jumpalyze auf dem Smartphone (Expo Go App erforderlich). Drücke Start und dan JUMP ... JUMP ... Jumpalyze.

Wer hält den Rekord?

_________________________________________________________________________________

Aufgabe 1 – Analysieren des App-Ablaufs mit Status, Countdown und Sensorwerten

Ordnen Sie die Abläufe in Ihrer App ein und verschaffen Sie sich einen Überblick über Statuswechsel, Countdown und die erste Messung eines Bewegungswertes. Dieser Impuls hilft Ihnen, die folgenden Arbeitsaufträge besser zu verstehen und einzuordnen. Schauen Sie sich dazu die Beispiel-App Jumpalyze (ZIP-Archiv)an.

Vorgehensweise:

• Hören Sie den Impulsvortrag aufmerksam an. Pausieren Sie bei Bedarf.
• Öffnen Sie die Datei App.js und verfolgen Sie die Abläufe im Code mit.

Tauschen Sie sich mit Ihrem Lernpartner zu folgenden Fragen aus:

• Was ist ein Status (useState) – und wie wird er gesetzt?
• Wie funktioniert ein Countdown technisch?
• Was misst der Accelerometer? Wie entstehen daraus Bewegungswerte?
• Wie wird ein Maximalwert ermittelt und gespeichert?
• Wie erkennt React, dass sich ein Wert geändert hat und das UI neu gerendert werden muss?

Haben Sie Fragen? Hören Sie den Impuls mehrfach oder sprechen Sie mit Ihrer Partnerin oder Ihrem Partner.

Möchten Sie lieber mitlesen oder gezielt nachschlagen? Nutzen Sie das kommentierte Transkript (PDF).

Notieren Sie Ihre Erkenntnisse in Ihrem Journal unter dem Titel: „Statusverwaltung und Ereignissteuerung in React Native“. 

Aufgabe 2 – Implementieren der Speicherung und Anzeige von Sensorwerten

Erweitern Sie Ihre App Jumpalyze (ZIP-Archiv) so, dass alle Bewegungsdaten während der Sprung-Messung gespeichert und angezeigt werden.

Vorgehensweise:

• Erstellen Sie ein Array bewegungen, das die gemessenen Bewegungswerte speichert.
• Ergänzen Sie die Komponente MessungInfo so, dass der aktuelle Wert während der Messung ins Array geschrieben wird (Hinweis: Spread-Operator verwenden).
• Geben Sie nach Ende der Messung die Liste der Werte mit .map() unter dem Ergebnis aus.
• Optional: Begrenzen Sie die Liste mit .slice() auf die letzten 100 Werte.

Sie wollen eine kleine Hilfe?

const [bewegungen, setBewegungen] = useState([]);

Vergleichen Sie Ihre Umsetzung mit der Ihres Partners oder Ihrer Partnerin.

• Konnten Sie die Bewegungswerte korrekt speichern und anzeigen?
• Welche Probleme oder Unterschiede gab es bei der Darstellung mit .map()?
• Was haben Sie voneinander gelernt?

Notieren Sie in Ihrem Journal unter „Sensorwerte speichern“:

• Wie haben Sie die Speicherung technisch gelöst?
• Wie viele Werte wurden beim letzten Sprung gespeichert?
• Gab es bei der Darstellung mit .map() Schwierigkeiten?

Sie brauchen Hilfe? Bearbeiten Sie zuerst Quiz - Sensorwerte speichern.

Sie würden gerne  Schritt-für-Schritt arbeiten?

Aufgabe 3 – Implementieren der Maximalwert-Berechnung aus Sensordaten

Erweitern Sie Ihre App (ZIP-Archiv) so, dass aus allen gespeicherten Bewegungswerten der aktuell höchste Wert ermittelt und angezeigt wird.

💬 Hinweis: In der vorherigen Aufgabe (AA1) wurde der höchste Bewegungswert bereits während der Messung live erfasst. In diesem Auftrag lernst du, den Maximalwert nach der Messung gezielt aus allen gespeicherten Daten zu berechnen. Du nutzt dafür die Methode Math.max() – und analysierst die komplette Datenreihe.

Vorgehensweise:

• Verwenden Sie die Funktion Math.max(), um den höchsten Wert im Array bewegungen zu bestimmen.
• Achten Sie darauf, dass Sie das Array korrekt übergeben (z. B. mit dem Spread-Operator).
• Speichern Sie das Ergebnis in einer neuen Variable (z. B. maxWert) mit useState.
• Zeigen Sie den Maximalwert im UI deutlich sichtbar an.

Notieren Sie in Ihrem Journal unter „Maximalwert berechnen“:

• Wie haben Sie den höchsten Wert technisch ermittelt?
• Gab es Herausforderungen mit dem Spread-Operator oder der Anzeige?
• Wie häufig verändert sich der Maximalwert während der Bewegung?

Sie brauchen Hilfe? Dann nehmen Sie doch die Schritt-für-Schritt-Anleitung zur Hand.

Hier finden Sie einige Tipps zur Vorgehensweise!

Aufgabe 4 – Implementieren der Durchschnittsberechnung aus Bewegungsdaten

Erweitern Ihre App (ZIP-Archiv), um den Durchschnitt der zuletzt gespeicherten Bewegungswerte zu berechnen und anzuzeigen.

Vorgehensweise:

• Nutzen Sie die Funktion .reduce(), um die Summe der Werte im Array bewegungen zu berechnen.
• Teilen Sie die Summe durch bewegungen.length, um den Durchschnitt zu berechnen.
• Runden Sie das Ergebnis mit .toFixed(2), bevor Sie es anzeigen.
• Speichern Sie den Durchschnitt mit useState und aktualisieren Sie ihn bei Änderungen der Liste.

Notieren Sie in Ihrem Journal unter „Durchschnitt berechnen“:

• Wie haben Sie die Summe der Werte berechnet?
• Warum ist es wichtig, die Division erst nach der Schleife zu machen?
• Was passiert, wenn keine Werte im Array sind?
• Wie stark schwankt der Durchschnittswert bei mehreren Versuchen?

 Sie brauchen Hilfe? Schauen Sie sich die Schritt-für-Schritt-Anleitung an.

Aufgabe 5 – Implementieren der Darstellung der Bewegungsliste mit eigener Komponente

Gestalten Sie bei Ihrer App (ZIP-Archiv) die Ausgabe der gespeicherten Bewegungswerte ansprechender, indem Sie z. B. eine eigene Komponente zur Darstellung eines Messwerts verwenden.

Vorgehensweise:

• Erstellen Sie eine eigene Komponente Bewegungseintrag.js zur Darstellung eines einzelnen Werts (Props: wert, index).
• Geben Sie dort den Index und den gemessenen Wert mit Einheit g formatiert aus (z. B. „#3 – 2.14 g“).
• Nutzen Sie ein einfaches Layout mit Rahmen, Abstand und einheitlicher Breite für jeden Eintrag.

Notieren Sie in Ihrem Journal unter „Bewegungsliste gestalten“:

• Wie haben Sie die Werte optisch dargestellt?
• Was haben Sie bei der Gestaltung berücksichtigt (z. B. Lesbarkeit, Struktur)?
• Welche Werte sind Ihnen beim Testen besonders aufgefallen?

Sie brauchen Hilfe? Nutzen Sie die Schritt-für-Schritt - Anleitung!

Erweiterungen:

– Farbe je nach Bewegungswert

Erweitern Sie die Komponente Bewegungseintrag.js, sodass die Hintergrundfarbe je nach Bewegungswert angepasst wird:

• < 1.5 → hellgrau
• 1.5 – 2.2 → gelb
• > 2.2 → grün

Nutzen Sie eine if-Bedingung, um die Farbe dynamisch zu bestimmen.

– Vergleich mit dem Durchschnittswert

Übergeben Sie den durchschnitt an die Komponente Bewegungseintrag als zusätzliches Prop.

Heben Sie dann Einträge farblich hervor:

• Werte über dem Durchschnitt → blauer Hintergrund
• Werte unter dem Durchschnitt → roter Hintergrund

Aufgabe 6: Anwenden der Auswertung und Darstellung von Sensordaten im Online-Test

Testen Sie Ihr Wissen zur Verarbeitung und Visualisierung von Bewegungsdaten in React Native. Der Online-Test überprüft Ihre Kenntnisse zu Math.max(), .reduce(), .map(), Zuständen und Darstellungstechniken.

Fassen Sie Ihre wichtigsten Erkenntnisse im Journal zusammen. Gehen Sie insbesondere auf folgende Fragen ein:

• Welche Begriffe oder Konzepte waren für Sie besonders wichtig?
• Gab es Fragen, bei denen Sie unsicher waren oder Fehler gemacht haben?
• Wie würden Sie das nächste Mal bei der Analyse von Sensordaten vorgehen?

Sie können den Test bei Bedarf mehrfach wiederholen, um Ihre Punktzahl zu verbessern oder Ihre Sicherheit im Umgang mit den Methoden zu stärken.

Reflexion