Skip to content
Codex13

15. Dziennik treningowy

This content is not available in your language yet.

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz aplikację do śledzenia aktywności fizycznej — planowanie i rejestrowanie treningów, baza ćwiczeń i śledzenie postępów (ciężar, powtórzenia, czas).

Czego się nauczycie?

  • Złożona struktura danych (trening → serie → ćwiczenia)
  • Praca z licznikiem i timerem w React
  • Wykresy postępu (ciężar w czasie)
  • Baza danych ćwiczeń z kategoriami
  • Praca zespołowa — jeden robi bazę ćwiczeń i planowanie, drugi rejestrowanie i statystyki

Co ma robić aplikacja?

Dział zatytułowany „Co ma robić aplikacja?”

Główne funkcjonalności

Dział zatytułowany „Główne funkcjonalności”

  1. Baza ćwiczeń — lista ćwiczeń z kategorią (klatka, plecy, nogi), opisem i instrukcją

  2. Tworzenie treningu — dodawanie ćwiczeń do treningu, ilość serii i powtórzeń

  3. Rejestrowanie treningu — odhaczanie serii, wpisywanie ciężaru użytego w danym ćwiczeniu

  4. Historia treningów — lista minionych treningów z datą i podsumowaniem

  5. Postępy — wykres ciężaru dla wybranego ćwiczenia w czasie

Struktura danych

Dział zatytułowany „Struktura danych”
{
  "workouts": [
    {
      "id": "wk-001",
      "name": "Poniedziałek — Push",
      "date": "2025-03-10",
      "duration": 72,
      "exercises": [
        {
          "exerciseId": "ex-bench-press",
          "sets": [
            { "reps": 8, "weight": 80, "completed": true },
            { "reps": 8, "weight": 80, "completed": true },
            { "reps": 6, "weight": 80, "completed": true }
          ]
        }
      ]
    }
  ],
  "exercises": [
    {
      "id": "ex-bench-press",
      "name": "Wyciskanie na ławce",
      "category": "chest",
      "muscleGroup": ["Klatka piersiowa", "Triceps", "Barki"]
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Baza ćwiczeń (minimum 10, z kategorią)
  • Tworzenie treningu przez wybór ćwiczeń
  • Rejestrowanie serii (ciężar + powtórzenia)
  • Historia treningów (lista z datami)
  • Zapis w localStorage
Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Timer treningu

Dział zatytułowany „Timer treningu”
function useWorkoutTimer() {
  const [seconds, setSeconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);


  useEffect(() => {
    if (!isRunning) return;
    const interval = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(interval);
  }, [isRunning]);


  function formatTime(totalSeconds) {
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const secs = totalSeconds % 60;
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }


  return {
    time: formatTime(seconds),
    seconds,
    isRunning,
    start: () => setIsRunning(true),
    stop: () => setIsRunning(false),
    reset: () => { setIsRunning(false); setSeconds(0); },
  };
}

Zasoby

Dział zatytułowany „Zasoby”
setInterval w React — useEffect Prawidłowe użycie setInterval w useEffect.
Wger API Darmowe API z bazą ćwiczeń i planów treningowych.

Do dzieła!

Dział zatytułowany „Do dzieła!”

Powodzenia!

Dziennik treningowy to projekt z bogatą strukturą danych — relacja ćwiczenie ↔ serie w treningu ↔ historia. Zaplanujcie strukturę danych PRZED pisaniem kodu. Zły model danych na początku to dużo refaktoringu potem!