LS 1.2: Schichtenarchitektur implementieren

Aufgabe 1: Analysieren und strukturieren Sie die Motivations-App

Öffnen Sie die Motivations-App. (ZIP-Archiv)

Analysieren Sie den Quellcode der App und entscheiden Sie, welche Teile des Codes sich als eigene UI-Komponenten eignen. Notieren Sie dazu:

1. Welche konkrete Codezeile soll ausgelagert werden?
2. Wie soll die neue Komponente heißen?
3. Warum lohnt sich die Auslagerung?

Vergleichen Sie Ihre Entscheidungen mit einem Partner bzw. einer Partnerin und diskutieren Sie Ihre Überlegungen.

Sie brauchen Hilfe und wollen es konkreter? Sehen Sie sich den Screenshot der Motivations-App mit interaktiven Bereichen an.

Falls Sie Schwierigkeiten dabei haben, die auszulagernden Komponenten zu identifizieren, schauen Sie sich die Bilder-Präsentation zur Notizen-App an. Sie zeigt die Analyse für eine sehr ähnliche App.

Übertragen Sie die folgende Tabelle in Ihr Journal unter der Überschrift „Analyse und Strukturierung der Motivations-App“ und vervollständigen Sie sie mit mindestens zwei Komponenten:

Wenn Sie Ihre Lösung fertiggestellt haben, überprüfen Sie: Sind Ihre Komponenten nachvollziehbar benannt und ist die Auslagerung begründet?

Aufgabe 3: Implementieren der Komponente „QuoteDisplay“

Öffnen Sie die Motivations-App-a – Snack oder laden Sie die Motivations-App herunter, falls Sie lokal arbeiten.

Im vorherigen Arbeitsauftrag haben Sie folgende Komponenten identifiziert: Header, QuoteDisplay, QuoteInput, QuoteList.

So gehen Sie vor:

• Erstellen Sie eine eigene Komponente „Header“ und lagern Sie sie in eine separate Datei aus.
• Binden Sie die Header-Komponente anschließend in App.js ein.

Speichern Sie Ihre Lösung in Ihrem Studienordner.

Aufgabe 4: Implementieren der Komponente „QuoteDisplay“

Öffnen Sie die Motivations-App-b – Snack oder laden Sie die Motivations-App herunter, falls Sie lokal arbeiten.

Im ersten Arbeitsauftrag haben Sie folgende Komponenten identifiziert: Header, QuoteDisplay, QuoteInput, QuoteList. Die Komponente Header wurde bereits ausgelagert.

So gehen Sie vor:

1. Erstellen Sie eine neue Datei QuoteDisplay.js im Ordner components.
2. Verschieben Sie die Darstellung des Hauptzitats (quotes[0]) in diese neue Komponente.
3. Lassen Sie die Komponente eine Prop text erhalten, die das Zitat übergibt.
4. Binden Sie die neue Komponente anschließend in App.js ein.

Sie brauchen Hilfe? Nutzen Sie bei Bedarf die Schritt-für-Schritt-Anleitung – QuoteDisplay auslagern .

Speichern Sie Ihre Lösung in Ihrem Studienordner.

Aufgabe 5: Implementieren der Komponente „QuoteInput“ aus

Öffnen Sie die Motivations-App-c in Snack oder laden Sie die Motivations-App herunter, falls Sie lokal arbeiten.

In den vorherigen Arbeitsaufträgen haben Sie folgende Komponenten identifiziert und teilweise bereits ausgelagert:

• Header
• QuoteDisplay
• QuoteInput (dieser Arbeitsauftrag)
• QuoteList

So gehen Sie vor:

1. Erstellen Sie eine neue Datei QuoteInput.js im Ordner components.
2. Lagern Sie die Texteingabe und den Button zum Hinzufügen eines Zitats in diese Komponente aus.
3. Gestalten Sie die Komponente als eigenständige UI-Komponente – ohne Logik zur Verwaltung der Zitatliste.
4. Binden Sie die neue Komponente anschließend in App.js ein.

Sie brauchen Unterstützung? Nutzen Sie bei Bedarf die Schritt-für-Schritt-Anleitung – QuoteInput auslagern.

Speichern Sie Ihre Lösung in Ihrem Studienordner.

Aufgabe 6: Implementieren der Komponente „QuoteList“

Öffnen Sie die Motivations-App-d in Snack oder laden Sie die Motivations-App herunter, falls Sie lokal arbeiten.

Diese Komponenten wurden bisher bereits ausgelagert:

• Header
• QuoteDisplay
• QuoteInput
• QuoteList (diese Aufgabe)

Arbeitsauftrag: QuoteList auslagern

1. Erstellen Sie eine neue Datei QuoteList.js im Ordner components.
2. Lagern Sie die FlatList mit den Zitaten aus App.js in QuoteList.js aus.
3. Achten Sie darauf, dass QuoteList eine reine Präsentationskomponente ist.

Sie brauchen Unterstützung? Nutzen Sie die Schritt-für-Schritt-Anleitung – QuoteList auslagern.

Testen Sie Ihre App:

• Fügen Sie ein neues Zitat hinzu und prüfen Sie, ob es korrekt in der Liste angezeigt wird.
• Falls Fehler auftreten, vergleichen Sie Ihre Implementierung mit der Anleitung.

Überprüfen Sie besonders Ihre Dateistruktur und die Importe.

Haben Sie Ihre App erfolgreich umgesetzt? Dann überprüfen Sie Ihr Wissen zur Schichtenarchitektur im Test „Schichtenarchitektur – Anwendung und Reflexion“.

Aufgabe 7: Planen der Vorstellung der App

Öffnen Sie die Motivations-App-2 oder laden Sie die Motivations-App herunter, falls Sie lokal arbeiten.

Die App, die im Unterricht entwickelt wurde, soll am Tag der offenen Tür präsentiert werden. Ziel ist es, den Besucherinnen und Besuchern die App vorzustellen, ihre Funktionen zu demonstrieren und einen Einblick in die Entwicklung und Funktionsweise zu geben. Außerdem sollen Sie zeigen, wie die App mit Snack Expo auf einem mobilen Gerät gestartet werden kann.

Sie sollen Ihrem Lehrer die Präsentation vorab in einem kurzen Rollenspiel vorspielen.

Bereiten Sie sich mithilfe des Präsentationsprotokolls gemeinsam mit Ihrem Lernpartner, Ihrer Lernpartnerin auf die Präsentation vor.

Aufgabe 8: Anwenden der Schichtenarchitektur in Übungsaufgaben

Übungsaufgaben:

Bearbeiten Sie die Übungsaufgaben. Hier geht es darum, einfache Apps im Sinne der Schichtenarchitektur zu strukturieren und umzusetzen. Zu jeder Aufgabe gehört auch mindestens eine Textfrage zur Reflexion.

Speichern Sie Ihre Lösungen im Studienordner. 

Material

Reflexion