LT1_AA1 PA LV Schichtenarchitektur visualisieren, anwenden und im Code trennen

Musterlösung zu Arbeitsauftrag 1 – TrackTastic: Schichtenarchitektur

Teil 1: Übersicht zur App-Struktur

1.1 Grafische Übersicht: Schichtenarchitektur

╔══════════════════════╗
║  Präsentationsschicht║
╠══════════════════════╣
║  - App.js            ║
║  - Header.js         ║
║  - StepList.js       ║
║  - Button-Komponente ║
╚══════════════════════╝
          ↓
╔══════════════════════╗
║     Fachschicht      ║
╠══════════════════════╣
║  - useStepCounter.js ║
║  - Logik für Zählung ║
║  - Zustandsverwaltung║
╚══════════════════════╝

1.2 Beschreibung der Schichten

• Präsentationsschicht: UI-Elemente, reagiert auf Benutzeraktionen, ruft Logik-Funktionen auf
• Fachschicht: Berechnungen und Zustandslogik, unabhängig vom UI

1.3 Vorteile der Trennung

• Wartbarkeit: Änderungen in der Logik ohne UI-Anpassung möglich
• Lesbarkeit: Bessere Struktur durch klare Zuständigkeiten
• Teamarbeit: Arbeitsteilung zwischen Frontend- und Backend-Team

1.4 (Optional) Vergleich mit klassischen Webtechnologien

Teil 2: Umsetzung im Code

2.1 Analyse

TrackTastic – Schritt 1 enthält UI-Elemente und Logik gemischt in App.js.

2.2 Auslagerung der Komponenten

StepList.js (UI):

import React from 'react';
import { Text } from 'react-native';

export default function StepList({ steps }) {
  return <Text>Schritte: {steps}</Text>;
}

useStepCounter.js (Logik):

import { useState } from 'react';

export function useStepCounter() {
  const [steps, setSteps] = useState(0);

  function increment() {
    setSteps(prev => prev + 1);
  }

  return { steps, increment };
}

App.js (Bindeglied):

import React from 'react';
import { Button, View } from 'react-native';
import StepList from './StepList';
import { useStepCounter } from './useStepCounter';

export default function App() {
  const { steps, increment } = useStepCounter();

  return (
    <View>
      <StepList steps={steps} />
      <Button title="Schritt" onPress={increment} />
    </View>
  );
}

2.3 Kommunikation der Schichten

• Props: Datenweitergabe von Logik zu UI
• Hooks: Trennung von Zustand und Darstellung

2.4 Zusatzfunktion: Reset

function reset() {
  setSteps(0);
}

Zuordnung: Fachschicht (zustandsverändernde Logik)
Begründung: Reset verändert den Zustand, unabhängig von der UI.

🗣️ Teil 3: Präsentation & Reflexion

3.1 Präsentation

• Diagramm der Schichtenarchitektur
• Screenshots von Code und Struktur
• Erklärung der Kommunikation zwischen Komponenten

3.2 Reflexion

Stärken: Struktur klar, Modularität hoch
Schwächen: Skalierung bei wachsender App noch nicht berücksichtigt

Verbesserungsideen: Einsatz von Context API oder Redux bei wachsendem State-Management