LS 2.5: TrackTastic implementieren

Ich kann ...

Fachliche Kompetenzen:

• ein Aktivitäts-Auswahl-Modal in eine mobile App implementieren und seine Sichtbarkeit mit useState steuern.
• eine im Modal gewählte Aktivität im State speichern und die Auswahl dynamisch im Interface anzeigen.
• alle gewählten Aktivitäten in einer Liste verwalten, an eine Listenkomponente übergeben und bei Bedarf einzelne Einträge löschen.
• eine dynamische Sternenanzeige implementieren, die den Fortschritt automatisch anhand der Anzahl an Aktivitäten visualisiert.
• eine GPS-basierte Aktivitätsaufzeichnung umsetzen, Dauer und Distanz berechnen und die aufgezeichneten Aktivitäten speichern.
• Zustände (State), Props und Komponenten so einsetzen, dass Auswahl, Anzeige, Verlauf, Fortschritt und GPS-Aufzeichnung sinnvoll zusammenspielen.

Überfachliche Kompetenzen:

• komplexe Abläufe einer App (Auswahl, Aufzeichnung, Speicherung, Anzeige) nachvollziehbar strukturieren und beschreiben,
• Apps gezielt um Funktionen zur Erfassung, Auswertung und Visualisierung von Aktivitäten erweitern.

Einstieg

Aufgabe 2: Implementieren der Anzeige der gewählten Aktivität im Interface

Bauen Sie auf der bestehenden TrackTastic-App (ZIP-Archiv) auf und erweitern Sie sie so, dass die im Modal gewählte Aktivität im Interface angezeigt wird.

Aufgabenstellung

1. State für die gewählte Aktivität einführen
   • Fügen Sie in App.js einen useState-Hook hinzu, um die gewählte Aktivität zu speichern.
2. Funktion handleSelectActivity erweitern
   • Speichern Sie in dieser Funktion zusätzlich die gewählte Aktivität im neuen State.
3. Anzeige im Interface einbauen
   • Fügen Sie unterhalb der bestehenden Komponenten (z. B. unterhalb von MapPlaceholder) einen <Text>-Block ein, der selectedActivity?.type darstellt.

Hinweise

• Verwenden Sie eine Bedingung ({selectedActivity && (...)}), damit der Text nur erscheint, wenn bereits eine Aktivität gewählt wurde.
• Sie können den Text optisch z. B. zentrieren und mit etwas Abstand einfügen.

Erwartetes Ergebnis

• Nach der Auswahl im Modal erscheint die gewählte Aktivität im Interface.
• Die Anzeige ändert sich automatisch, wenn eine neue Aktivität gewählt wird.

Hinweis für Pfad B: Wenn Sie das Modal bereits implementiert haben, ergänzen Sie jetzt den State selectedActivity und eine einfache Anzeige im UI.

Sie brauchen Hilfe? Nutzen Sie ggf. noch einmal die Schritt-für-Schritt-Anleitung zu AA1.

Aufgabe 3: Implementieren der Aktivitätsliste unterhalb der Aktivitätenübersicht

Erweitern Sie Ihre TrackTastic-App (ZIP-Archiv), sodass alle ausgewählten Aktivitäten in einer scrollbaren Liste unterhalb der „Aktivitäten:“-Überschrift angezeigt werden. Nutzen Sie dafür die bereits vorhandene Komponente ActivityList.

Aufgabenstellung

1. State für die Aktivitätsliste anlegen
   • Erstellen Sie in App.js einen neuen State activityLog, um die bisher gewählten Aktivitäten zu speichern.
2. handleSelectActivity erweitern
   • Fügen Sie die neu gewählte Aktivität bei Auswahl im Modal dem activityLog hinzu.
   • Beispiel: setActivityLog((prev) => [...prev, activity])
3. ActivityList-Komponente einbinden
   • Importieren Sie ActivityList und binden Sie sie im unteren Teil Ihrer App ein – unterhalb von Activities.js.
   • Übergeben Sie activities und removeActivity als Props.
4. Optional: Aktivitäten löschbar machen
   • Ergänzen Sie eine Funktion removeActivity(index), die einen Eintrag aus der Liste entfernt.
   • Diese Funktion wird an ActivityList übergeben und durch einen Button aufgerufen.

Hinweise

• Die ActivityList-Komponente nutzt intern eine FlatList – Sie müssen nur die Daten übergeben.
• Jede neue Aktivität wird automatisch unten angehängt.
• Die Komponente zeigt den Typ und einen Platzhalterwert (value) an. Sie können diesen später ersetzen.

Erwartetes Ergebnis

• Alle ausgewählten Aktivitäten erscheinen als Liste unterhalb der Aktivitäten-Icons.
• Bei erneutem Öffnen des Modals kann eine neue Aktivität hinzugefügt werden.
• Jeder Listeneintrag enthält ein 🗑-Symbol zum Entfernen.

Hinweis für Pfad B: Wenn Sie bereits mit der Auswahl und Anzeige einzelner Aktivitäten gearbeitet haben, erweitern Sie nun den Code um eine Liste und nutzen Sie die ActivityList

Aufgabe 4: Implementieren der dynamischen Sternenanzeige zur Darstellung des Fortschritts

Passen Sie die Sternenanzeige oben in der App (ZIP-Archiv) so an, dass sie automatisch auf die Anzahl der gewählten Aktivitäten reagiert. Für jede hinzugefügte Aktivität wird ein weiterer Stern angezeigt – maximal 5.

Aufgabenstellung

1. Anzahl der Sterne berechnen
   • Berechnen Sie in App.js die Anzahl der vergebenen Sterne auf Basis des Arrays activityLog.
   • Beispiel: const starCount = Math.min(activityLog.length, 5);
2. Sterne an die Komponente übergeben
   • Ergänzen Sie den Aufruf der StarsDisplay-Komponente um ein neues Prop: count={starCount}.
3. Komponente StarsDisplay anpassen
   • Ersetzen Sie den bisherigen festen Wert const filledStars = 3; durch den Wert count.
   • Die Anzeige soll stets 5 Sterne zeigen – je nach count gefüllt oder leer.

Hinweise

• Der Wert count darf maximal 5 betragen – verwenden Sie Math.min(...).
• Die Icons star (gefüllt) und star-o (leer) stammen aus der Bibliothek FontAwesome.
• Die Komponente StarsDisplay ist bereits eingebunden – Sie müssen sie nur anpassen.

Erwartetes Ergebnis

• Zu Beginn zeigt die App 0 Sterne (alle leer).
• Mit jeder neu gewählten Aktivität erscheint ein weiterer goldener Stern.
• Bei mehr als 5 Aktivitäten bleibt die Anzeige bei 5 Sternen stehen.

Hinweis für Pfad B: Wenn Sie bereits Aktivitäten erfassen, können Sie nun die Anzahl dynamisch mit Sternen darstellen lassen. Nutzen Sie dafür die vorhandene Komponente StarsDisplay.

Wenn Sie Hilfe benötigen, können Sie gerne die Schritt-für-Schritt-Anleitung nutzen.

Aufgabe 5: Implementieren der GPS-basierten Aktivitätsaufzeichnung und Speicherung

Erweitern Sie die App so, dass beim Klick auf „Aufzeichnung starten“ tatsächlich eine Aktivität aufgezeichnet wird. Die App soll die aktuelle Route per GPS verfolgen, Dauer und Entfernung berechnen und beim Stoppen die Daten zur Speicherung anbieten.

Aufgabenstellung

1. GPS-Tracking starten
   • Nutzen Sie startRecording(), um beim Klick auf den Button die Standortverfolgung mit Location.watchPositionAsync zu starten.
   • Setzen Sie startTime und route zurück – die Aufzeichnung beginnt bei null.
2. Daten während der Aufzeichnung erfassen
   • Berechnen Sie während der Aufzeichnung die Dauer (in Sekunden) und die zurückgelegte Strecke (in km) mit der Haversine-Formel.
   • Aktualisieren Sie bei jeder neuen Position duration und distance.
3. Aufzeichnung stoppen
   • Beim Klick auf „Aufzeichnung beenden“ wird das GPS-Tracking beendet (per watchId.current.remove()).
   • Ein Modal-Fenster erscheint, in dem der Nutzer die Aktivität einem Typ zuordnen oder verwerfen kann.
4. Aktivität speichern
   • Berechnen Sie den value einer Aktivität aus Distanz und Dauer – z. B.: value = distance / kmProPunkt + dauer / minuten
   • Speichern Sie die Aktivität in AsyncStorage unter dem passenden Tagesdatum.

Hinweise

• Die GPS-Aufzeichnung läuft über Location.watchPositionAsync() aus expo-location.
• Verwenden Sie die Hilfsfunktion haversineDistance() zur Berechnung der Strecke zwischen zwei Koordinaten.
• Die Zeitmessung erfolgt über Date.now() und setInterval().
• Das Modal zur Auswahl nach der Aufzeichnung wird über isModalRecordingVisible gesteuert.

Erwartetes Ergebnis

• Beim Klick auf „Aufzeichnung starten“ beginnt eine echte Aufzeichnung über GPS.
• Die App zeigt live Dauer und Entfernung an.
• Nach dem Stoppen wird eine Aktivität ausgewählt oder verworfen.
• Die Daten werden gespeichert und erscheinen im Aktivitätsverlauf.

Hinweis für Pfad B: Sie haben bereits den Button zur Steuerung? Dann implementieren Sie jetzt die echte Aufzeichnungsfunktion mit GPS und speichern Sie Ihre Aktivität.

Grundlage ist Ihre bisherige Umsetzung in TrackTastic–AA4. (ZIP-Archiv)

Material