LS 1.2 - Übungen- Schichtenarchitektur implementieren

1. Greetings-App

Setzen Sie das Prinzip der Schichtenarchitektur für die Greetings-App-a um. Die App als Download, falls Sie lokal arbeiten.

Aufgabe 

1. Identifizieren und notieren Sie die Komponenten, Dateien und ihre Rollen, die im Sinne der Schichtenarchitektur auszulagern sind.
2. Erstellen Sie die Komponenten und passen Sie die App.js entsprechend an!

1.1. Lösung - Greetings-App

Antwort 1: Bedeutung der Schichtenarchitektur

Die Schichtenarchitektur trennt Logik, Präsentation und Steuerung, wodurch der Code wartbarer, testbarer und erweiterbar wird. Sie erleichtert die Teamarbeit und fördert Wiederverwendbarkeit.

Antwort 2: Komponenten, Dateien und ihre Rollen

• App.js: Die Hauptkomponente, die die Zustandsverwaltung übernimmt. Importiert die modularen Komponenten. 
• Greeting.js:  Zeigt die Begrüßungsnachricht an. Nimmt den name-Wert als Prop und ist vollständig für die Präsentation zuständig.
• NameInput.js: Präsentationskomponente, enthält das Eingabefeld (TextInput). Verwendet die Prop setName, um Änderungen am Namen in den Zustand zu schreiben.
  

Antwort 3: Musterlösung Greetings-App-b - Snack oder als Download.

2. Counter-App

Setzen Sie das Prinzip der Schichtenarchitektur für die Counter-App-a um. Die App als Download, falls Sie lokal arbeiten.

Aufgabe 

1. Identifizieren und notieren Sie die Komponenten, Dateien und ihre Rollen, die im Sinne der Schichtenarchitektur auszulagern sind.
2. Erstellen Sie die Komponenten und passen Sie die App.js entsprechend an!

2.1. Lösung - Counter-App

Antwort 1: Bedeutung der Schichtenarchitektur

Die Schichtenarchitektur trennt Logik, Präsentation und Steuerung, wodurch der Code wartbarer, testbarer und erweiterbar wird. Sie erleichtert die Teamarbeit und fördert Wiederverwendbarkeit.

Antwort 2: Komponenten, Dateien und ihre Rollen

• App.js: Die Hauptkomponente. Organisiert die App und importiert die modularen Komponenten CounterDisplay und CounterButtons. Enthält die Zustandsverwaltung (useState) und leitet Funktionen sowie den aktuellen Zustand als Props an die Komponenten weiter.
  
• CounterDisplay.js:  Präsentationskomponente zur Anzeige des aktuellen Zählerstands. Bekommt den aktuellen Wert des Counters (count) über Props.
• CounterButtons.js: Präsentationskomponente, die zwei Buttons zur Erhöhung und Verringerung des Counters anzeigt. Führt die Funktionen (increase, decrease) aus, die über Props übergeben werden.

3. Lichschalter-App

Setzen Sie das Prinzip der Schichtenarchitektur für die  Lichtschalter-App-a um. Die App als Download, falls Sie lokal arbeiten.

Aufgabe 

1. Begründen Sie die Bedeutung der Schichtenarchitektur für die Softwareentwicklung!
2. Identifizieren und notieren Sie die Komponenten, Dateien und ihre Rollen, die im Sinne der Schichtenarchitektur auszulagern sind.
3. Erstellen Sie die Komponenten und passen Sie die App.js entsprechend an!

3.1. Lösung - Lichschalter-App

Antwort 1: Bedeutung der Schichtenarchitektur

Die Schichtenarchitektur trennt Logik, Präsentation und Steuerung, wodurch der Code wartbarer, testbarer und erweiterbar wird. Sie erleichtert die Teamarbeit und fördert Wiederverwendbarkeit.

Antwort 2: Komponenten, Dateien und ihre Rollen

• App.js: Die Hauptkomponente, die die Zustandsverwaltung übernimmt. Importiert die modularen Komponenten LightDisplay und LightSwitch. Überträgt den Zustand des Lichts (isLightOn) sowie die Umschaltfunktion (toggleLight) als Props an die Präsentationskomponenten.
• LightDisplay.js:  Präsentationskomponente zur Anzeige des aktuellen Lichtstatus. Zeigt an, ob das Licht an oder aus ist. Nimmt den Status des Lichts (isLightOn) als Prop entgegen.
• LightSwitch.js: Präsentationskomponente, die den Schalter (Button) zum Ein- und Ausschalten des Lichts enthält. Präsentationskomponente, die den Schalter (Button) zum Ein- und Ausschalten des Lichts enthält. Ruft die übergebene Funktion toggleLight auf, um den Zustand zu ändern.

4. Ampelschalter-App

Setzen Sie das Prinzip der Schichtenarchitektur für die  Ampelschalter-App-a um. Die App als Download, falls Sie lokal arbeiten.

Aufgabe 

1. Begründen Sie die Bedeutung der Schichtenarchitektur für die Softwareentwicklung!
2. Identifizieren und notieren Sie die Komponenten, Dateien und ihre Rollen, die im Sinne der Schichtenarchitektur auszulagern sind.
3. Erstellen Sie die Komponenten und passen Sie die App.js entsprechend an!

4.1. Lösung - Ampelschalter-App

Antwort 1: Bedeutung der Schichtenarchitektur

Die Schichtenarchitektur trennt Logik, Präsentation und Steuerung, wodurch der Code wartbarer, testbarer und erweiterbar wird. Sie erleichtert die Teamarbeit und fördert Wiederverwendbarkeit.

Antwort 2: Komponenten, Dateien und ihre Rollen

• App.js:
  Die Hauptkomponente, die die Zustandsverwaltung übernimmt. Importiert die modularen Komponenten TrafficLight und ControlButton. Überträgt den Zustand der Ampelfarbe (light) sowie die Wechsel-Funktion (nextLight) als Props an die Präsentationskomponenten.
• TrafficLight.js:
  Präsentationskomponente zur Anzeige des aktuellen Lichtstatus. Zeigt die aktuelle Ampelfarbe als Text und Kreis an. Nimmt die Farbe (light) als Prop entgegen und passt die Schriftfarbe dynamisch an.
• ControlButton.js:
  Präsentationskomponente, die den Schalter (Button) zum Wechseln der Ampelfarbe enthält. Ruft die übergebene Funktion nextLight auf, um den Zustand zu ändern.

Antwort 3: Ampelschalter-App-b - Snack mit Komponenten, oder als Download.