• Lernthema 1: Schichtenarchitektur beschreiben

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

       Ich kann...

      Ich kann (fachliche Kompetenzen):

      • den Unterschied zwischen Präsentations- und Fachschicht erklären,
      • die Umsetzung der Schichtenarchitektur in React Native beschreiben,
      • die Schichtenarchitektur in Web und Mobile vergleichen.

      Ich kann (überfachliche Kompetenzen):

      • technische Begriffe korrekt verwenden,
      • mein Wissen aus Web-Technologien auf neue Kontexte übertragen.
    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Einstieg

      Podcast-Bild

      (Transkript )

      Im Gespräch zwischen Finn und Anna erfahren Sie mehr über die Idee, Motivation und Entwicklung der App. Notieren Sie sich zentrale Aspekte zur App „TrackTastic“.

      Überprüfen Sie Ihr Verständnis mit dem kurzen Test zur App.

      Plenum

      Diskutieren Sie im Plenum: Welche zusätzliche Funktion würden Sie als Teil des TrackTastic-Teams einbauen – und warum?

    • _________________________________________________________________________________

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Arbeitsauftrag 1 – Schichtenarchitektur verstehen und anwenden

      Tipp

      Den grundsätzlichen Aufbau der Schichtenarchitektur können Sie sich im Lernschritt 1.1 erarbeiten.

      Erarbeiten Sie, wie die App TrackTastic in Fach- und Präsentationsschicht gegliedert ist. Entwickeln Sie eine eigene Strukturübersicht, setzen Sie diese technisch um und präsentieren Sie Ihre Architektur in der Gruppe.

      Teil 1: Übersicht zur App-Struktur erstellen
      • Erstellen Sie ein Übersichtsblatt zur Schichtenarchitektur der App mit Darstellung von Präsentations- und Fachschicht.
      • Beschreiben Sie stichpunktartig die Aufgaben beider Schichten.
      • Begründen Sie die Vorteile dieser Trennung (z. B. für Wartbarkeit, Lesbarkeit, Teamarbeit).
      • Optional: Vergleichen Sie die Umsetzung in React Native mit klassischen Webtechnologien (HTML, CSS, JS).
      Teil 2: Umsetzung im Code
      • Analysieren Sie den Quelltext von TrackTastic – Schritt 1. (ZIP-Archiv)
      • Lagern Sie Komponenten der Präsentationsschicht in eigene Dateien aus (z. B. StepList.js).
      • Strukturieren Sie die Fachlogik getrennt (z. B. useStepCounter.js).
      • Dokumentieren Sie, wie die Schichten miteinander kommunizieren (z. B. über Props oder State).
      Teil 3: Vorstellung & Austausch
      • Bereiten Sie eine strukturell klare Präsentation Ihrer App-Architektur vor.
      • Stellen Sie Ihre Visualisierung in der Gruppe vor und vergleichen Sie die Ansätze.
      Abgabe

      Laden Sie Ihr Übersichtsblatt und Ihre Code-Dateien in Ihren Studienordner hoch!

      Unterstützende Materialien

      Sie brauchen Hilfe? Schauen Sie sich bei Bedarf folgende Materialien an!

    • CEinzelarbeit

      Arbeitsauftrag 2: App-Architekturen analysieren und vergleichen

      Dieser Arbeitsauftrag richtet sich an leistungsstarke Lernende, die sich zusätzlich vertiefend mit App-Architekturen auseinandersetzen möchten.

      Hinweis: Bitte bearbeiten Sie diesen Auftrag eigenständig, damit Ihre persönliche Analyse und Reflexion sichtbar wird.

      Ihre Aufgabe:
      • Wählen Sie eine bekannte App (z. B. Spotify, Notizen-App, Banking-App, Instagram).
      • Analysieren Sie deren grundlegende Struktur:
        • Wo befinden sich typische Elemente der Präsentationsschicht?
        • Wo ist die Fachschicht erkennbar (z. B. Logik, Berechnungen, Datenspeicherung)?
      • Beurteilen Sie, ob die Trennung der Schichten gelungen ist und welche Vorteile sich daraus ergeben (z. B. Wartbarkeit, Benutzerfreundlichkeit, Teamarbeit).

      Schreiben

      Notieren Sie Ihre Ergebnisse im Journal unter der Überschrift „Analyse einer bekannten App-Architektur“.

      Ablegen

      Laden Sie Ihr  strukturiertes Vergleichsblatt oder kurzen Bericht (Text oder Tabelle) und (optional) Ihre Visualisierung der Schichten der ausgewählten App in Ihren Studienordner hoch!

    • Arbeitsauftrag 3: Wissenstest – Schichtenarchitektur in Web- und Mobile-Apps

      Moodle-Test Einzelarbeit

      Bearbeiten Sie den Online-Test zur Schichtenarchitektur. Der Test umfasst Fragen zu den grundlegenden Begriffen und Konzepten der Präsentations- und Fachschicht sowie deren Umsetzung in Web-Technologien und React Native.

      Schreiben

      Dokumentieren Sie wichtige Erkenntnisse und offene Fragen in Ihrem Journal  –  unter der Überschrift „Schichtenarchitektur verstehen“.

    • Arbeitsauftrag 4: Anwendungstest – Schichtenarchitektur in React Native

      Moodle-Test Einzelarbeit

      Bearbeiten Sie den Online-Test zur Umsetzung der Schichtenarchitektur in Web- und Mobile-Anwendungen. Der Test enthält praxisnahe Fragen zur Umsetzung von Präsentations- und Fachschicht in React Native sowie zum Vergleich mit HTML, CSS und JavaScript.

      Schreiben

      Notieren Sie zentrale Begriffe, Unterschiede und wichtige Erkenntnisse in Ihrem Journal  – unter der Überschrift „Schichtenarchitektur anwenden“.

    • _________________________________________________________________________________

    • _________________________________________________________________________________

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Reflexion

    • _________________________________________________________________________________