• LS 2.1: Ereignisverarbeitung umsetzen

    • erledigt Einzelarbeit Ich-kann-Liste – Lernschritt 2.1: Ereignisverarbeitung

      In diesem Lernschritt lerne ich Folgendes:

      Ich kann (fachliche Kompetenzen):

      • erklären, was ein Ereignis in einer App ist,
      • verschiedene Benutzeraktionen (z. B. Button-Klick, Texteingabe) als Ereignisse erkennen und benennen,
      • beschreiben, wie eine App auf Ereignisse reagiert,
      • ein einfaches Ereignis mit onPress (Button-Klick) in React Native umsetzen,
      • ein einfaches Ereignis mit onChangeText (Texteingabe) in React Native umsetzen,
      • mit useState Werte speichern und anzeigen lassen,
      • eine App entwickeln, die auf Benutzereingaben reagiert (z. B. Text eingeben, Button klicken).

      Ich kann (überfachliche Kompetenzen):

      • meine Ergebnisse nachvollziehbar dokumentieren,
      • technische Abläufe verständlich erklären.

    • Einstieg

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Aufgabe 1: Erschließen der Ereignisverarbeitung mithilfe eines Online-Tests

      Moodle-Test Einzelarbeit

      Erarbeiten Sie die Grundlagen der Ereignisverarbeitung mithilfe des Online-Tests Grundlagen der Ereignisverarbeitung.

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

       Pfad B Pfad C

      Aufgabe  2 – Beschreiben der Ereignisverarbeitung mit onPress

      Schreiben Einzelarbeit

      Beschreiben Sie die Ereignisverarbeitung mit onPress und dokumentieren Sie Ihre Beobachtungen zur Button-Interaktion.

      App ausprobieren

      Öffnen Sie die folgende Snack-App (ZIP-Archiv) und probieren Sie die Funktionalität aus.

      Schreiben

      Notieren Sie in Ihrem Journal unter der Überschrift „Vertiefung Button-Klick-Ereignis“:

      • Was passiert im Code, wenn der Button geklickt wird?
      • Welche Rolle spielt onPress in React Native?
      • Warum steht onPress={() => ...} in geschweiften Klammern?
      • Welche Alternativen zu alert() kennen Sie?

      Pfad B 

      Wenn Sie Unterstützung brauchen, bearbeiten Sie zuerst die Testfragen.

    • Aufgabe 3: Anwenden der Grundlagen der Ereignisverarbeitung im Online-Test

      Moodle-Test Einzelarbeit

      Bearbeiten Sie den Online-Test zu den Grundlagen der Ereignisverarbeitung. Der Test umfasst Fragen zu onPress, useState, Benutzerinteraktionen und deren Wirkung in React Native.

      Schreiben

      Dokumentieren Sie Ihre Erkenntnisse im Journal zur Ereignisverarbeitung.

    • _________________________________________________________________________________

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Aufgabe 4: Implementieren der Button-Klick-Funktion

      Schreiben Einzelarbeit 

      Ergänzen Sie den Event-Listener onPress, damit die App auf einen Button-Klick reagiert.

      Ausprobieren

      Öffnen Sie Snack Expo und fügen Sie den Code aus folgender Seite in eine neue App.js ein:
      Beispielcode zu AA3 – Button-Klick

      Wichtig: Achten Sie darauf, dass keine alte Deklaration von Text oder View doppelt im Code enthalten ist. Am besten überschreiben Sie die komplette App.js.

      Schreiben

      Aufgabe:

      • Ergänzen Sie onPress so, dass beim Klicken eine Meldung erscheint.
      • Notieren Sie die korrigierte Zeile mit einem kurzen Kommentar in Ihr Journal unter der Überschrift „Button-Klick-Ereignis“.

      Gruppe A

      Brauchen Sie Hilfe? Dann klicken Sie hier.

      Tipp: Verwenden Sie z. B. onPress={() => alert('Button wurde geklickt!')}.

      Gruppe B Gruppe C Tipp

      Sie möchten Ihre Kenntnisse zum Button-Klick vertiefen? → Wahlaufgabe anzeigen

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Gruppe B

      Aufgabe 5: Analysieren von Fehlern in der Ereignisverarbeitung

      Lehrer fragen 

      Diese Aufgabe ist eine Vertiefung für alle, die systematisch nach Fehlern suchen möchten.

      Partnerarbeit

      In dieser Aufgabe arbeiten Sie mit einem Lernpartner, einer Lernpartnerin zusammen. Zwei unterschiedliche Versionen einer App werden untersucht – eine funktioniert korrekt, eine enthält einen Fehler.

      Aufgabenverteilung:

      Einzelarbeit Schreiben

      Halten Sie Ihre Erkenntnisse in Ihrem Journal – Lernthema 2: Fachschicht implementieren fest:

      • Was war das Problem?
      • Wie haben Sie den Fehler gefunden?
      • Welche Änderungen waren notwendig?

      Abgabe

      Speichern Sie die korrigierte Version im Studienordner – Lernthema 2: Fachschicht implementieren.

    • _________________________________________________________________________________

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Aufgabe 6: Implementieren der Texteingabe mit onChangeText

      Schreiben Einzelarbeit 

      Ergänzen Sie onChangeText, damit eingegebener Text gespeichert und angezeigt wird.

      App ausprobieren

      Öffnen Sie Snack Expo und fügen Sie den Code von folgender Seite in eine neue App.js ein:
      Beispielcode zu AA6 – Texteingabe erkennen

      Wichtig: Starten Sie möglichst ein neues Projekt oder ersetzen Sie die gesamte App.js, um Fehler wie „Text has already been declared“ zu vermeiden.

      Schreiben Einzelarbeit

      Vorgehensweise:

      • Ergänzen Sie den Code so, dass der eingegebene Text angezeigt wird.
      •  Notieren Sie die korrigierte Zeile mit einem kurzen Kommentar in Ihr Journal unter der Überschrift „Texteingabe-Ereignis“.

      Gruppe A

      Brauchen Sie Hilfe? Dann klicken Sie hier.

      Tipp: Verwenden Sie z. B. onChangeText={(text) => setInputText(text)}.

    • _________________________________________________________________________________

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Aufgabe 7: Implementieren einer ersten Statusänderung per Button-Ereignis

      Schreiben Einzelarbeit 

      In diesem Arbeitsauftrag beschäftigen Sie sich mit den Grundlagen der Ereignisverarbeitung in React Native und setzen eine erste einfache Interaktion mit einem Button um.

      App öffnen

      Öffnen Sie den folgenden Snack Expo Link (ZIP-Archiv) mit dem Beispielcode und analysieren Sie die Funktionsweise des Programms.

      Analyse

      Untersuchen Sie dabei insbesondere, was genau passiert, wenn der Button geklickt wird. Beantworten Sie dazu folgende Fragen:

      • Welche Funktion wird beim Klick auf den Button aufgerufen?
      • Welche Rolle spielt der useState-Hook in diesem Zusammenhang?

      Code ändern

      Erweitern Sie den Code so, dass zunächst in der Textzeile der Text „Drücke den Button!“ angezeigt wird. Testen Sie Ihre Änderungen in Snack Expo und stellen Sie sicher, dass der neue Text korrekt dargestellt wird.

      Am Ende soll eine funktionierende App entstehen, die einen Button enthält. Sobald dieser geklickt wird, erscheint die Meldung „Button wurde geklickt!“ auf dem Bildschirm.

      Schreiben

      Halten Sie Ihre Erkenntnisse in Ihrem Journal – Lernthema 2: Fachschicht implementieren fest.

      Abgabe

      Laden Sie Ihre Lösung in Ihren Studienordner – Lernthema 2: Fachschicht implementieren hoch.

    • Aufgabe 8: Anwenden der Ereignisverarbeitung im Online-Test

      Moodle-Test Einzelarbeit

      Testen Sie Ihr Wissen zur korrekten Umsetzung von Ereignisverarbeitung in React Native. Der Online-Test enthält typische Fragen zu onPress, TextInput, useState und useEffect.

      Schreiben

      Fassen Sie Ihre wichtigsten Erkenntnisse im Journal zur Ereignisverarbeitung zusammen. Konzentrieren Sie sich dabei auf typische Fehler und deren Korrektur.

      Tipp

      Sie können den Test bei Bedarf wiederholen, um Ihre Punktzahl zu verbessern oder Sicherheit im Umgang mit Ereignissen zu gewinnen.

    • Teilnehmer/innen müssen
      Als erledigt kennzeichnen

      Gruppe B Gruppe C

      Aufgabe 9: Anwenden von Zusatzaufgaben zur Vertiefung der Ereignisverarbeitung

      Schreiben Einzelarbeit  

      Bearbeiten Sie die folgenden Zusatzaufgaben!

    • Reflexion