Instagram-Icon

Event Handler

In dieser Lektion werdet ihr…

  • mehr über ereignisgesteuerte Programmierung erfahren.
  • verstehen, was Ereignisse (Events) in Apps sind.

Schlüsselbegriffe

  • Benutzeroberfläche: alles in eurer App, womit ein:e Nutzer:in interagieren kann
  • Ereignis (Event): etwas, das passiert und die Ausführung des Codes auslöst
  • Funktionen: Code-Blöcke, die etwas bewirken (sie nehmen eine Eingabe auf und wandeln sie in eine Ausgabe um)
  • Event Handler: Code, der der App mitteilt, was sie tun soll, wenn ein Ereignis eintritt
  • Ereignisgesteuerte Programmierung: Programmierung, die auf Ereignissen basiert

Ereignisgesteuerte Programmierung

Die Programmierung mobiler Apps wird gewöhnlich „ereignisgesteuerte Programmierung“ genannt. Dies liegt an den drei großen Konzepten, die dabei eine Rolle spielen: Benutzeroberfläche, Ereignisse (Events) und Ereignishandlung (Event Handling).

Benutzeroberfläche

Die Benutzeroberfläche der App ist alles, womit Benutzer:innen interagieren können. Das können z. B. Schaltflächen, Navigationsleisten, Textfelder oder Bilder sein.

Wenn eine Person eure App nutzt, wird sie mit ihrer Benutzeroberfläche interagieren – indem sie auf Schaltflächen klickt, Text eingibt usw. Ihr könnt selbst entscheiden, was eure App tun soll und sie so programmieren, dass sie diese Dinge tut.

App Inventor: In App Inventor findet ihr auf der „Design“-Seite alle Dinge, die ihr für eure Benutzeroberfläche verwenden könnt.

Ereignisse (Events)

Ein Ereignis ist etwas, das geschieht. Wahrscheinlich erinnert euch das Wort „Ereignis“ oder „Event“ eher an die Geburtstagsfeier einer Freundin oder eine Schulaufführung. In der Programmierung spricht man von einem Ereignis, wenn etwas passiert, das die Ausführung des Codes auslöst.

Bei mobilen Apps ist ein Ereignis in der Regel das Ergebnis einer Handlung von Nutzer:innen. Es könnte z. B. der Klick auf eine Schaltfläche, eine Änderung der Ausrichtung des Telefonbildschirms oder die Eingabe von Text in ein Textfeld sein. Wenn ihr eine App programmiert, basiert der Code auf diesen Ereignissen.

Häufige Ereignisse in App Inventor

Hier sind einige häufige Ereignisse, die ihr in App Inventor verwenden könnt:

Screen-Shot-2018-09-21-at-5.17.54-PM

Klicken auf eine Schaltfläche

Screen-Shot-2018-09-21-at-5.21.43-PM

Änderung der Bildschirmausrichtung

Screen-Shot-2018-09-21-at-5.23.08-PM

Aktivieren oder Deaktivieren eines Kontrollkästchens

Screen-Shot-2018-09-21-at-5.23.18-PM

Auswahl aus einem Dropdown-Menü

Screen-Shot-2018-09-21-at-5.22.36-PM

Eingeben von Text in ein Textfeld

Screen-Shot-2018-09-21-at-5.22.19-PM

Aktivieren oder Deaktivieren eines Schiebereglers

Häufige Ereignisse in Thunkable

Hier sind einige häufige Ereignisse, die ihr in Thunkable verwenden könnt:

ButtonClick

Klicken auf eine Schaltfläche

ScreenOpens

Bildschirm öffnet sich

ListViewerClicked

Im „List Viewer“ angeklicktes Element

Ereignishandlung (Event Handling)

Ein „Event Handler“ ist das, was der Code tut, wenn ein Ereignis eintritt. Ihr könnt bestimmen, was die App beim Eintreten bestimmter Ereignisse machen soll (z. B. wenn eine Person auf eine Schaltfläche klickt). Ihr könnt der App in einer Schritt-für-Schritt-Anweisung sagen, was sie dann tun soll – oder ihr schreibt einen Algorithmus.

Funktionen

In App Inventor besteht euer Code aus Funktionen. Funktionen sind Code-Blöcke, die etwas tun. Ihr akzeptiert eine Eingabe und erzeugt eine Ausgabe. Eine Eingabe ist eine Information, die in eine Funktion einfließt. Eine Ausgabe ist eine Information, die an euch zurückgegeben wird. In den „Sprich Mit Mir“-Tutorials habt ihr eine „Speech-to-Text“-Funktion verwendet, die Text annimmt und in Sprache umwandelt. Die Eingabe ist der Text und die Ausgabe ist die Sprache. In der nächsten Code-Lektion behandeln wir Funktionen noch ausführlicher.

So sehen Funktionen und Event Handlers in App Inventor aus

Denkspiel: Stellt euch vor, wie ihr mit eurem Smartphone interagiert. Was macht euer Smartphone, wenn ihr bestimmte Dinge  tut? Hier sind ein paar Beispiele:

  • Wenn ihr bei einer Textnachricht auf „Senden“ klickt, wird die Nachricht versendet und ein Ton erzeugt.
  • Wenn ihr versucht, eine App in einem App-Store zu kaufen, fragt das Smartphone nach einem Passwort.
  • Wenn ihr auf ein App-Symbol klickt, wird die App geöffnet.

Aktivität: Tutorials für Einsteiger:innen

App-Inventor-Aktivität

Macht dieses (englische) Tutorial von appinventor.org:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Thunkable-Aktivität

Macht dieses (englische) Tutorial: Ruth Bader Ginsburg App

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Reflexion

  • Was habt ihr in der App „I Have a Dream“ oder „Ruth Bader Ginsburg“ zu eurer Benutzeroberfläche hinzugefügt?
  • Welche Arten von Ereignissen geschahen in der App „I Have a Dream“ oder „Ruth Bader Ginsburg“?

Zusatzmaterial

 I Have A Dream Tutorial – Part 2 

Wollt ihr eure „I Have a Dream“-App weiterführen? Hier findet ihr den zweiten Teil des Tutorials „App Inventor: I Have a Dream Tutorial, Pt. 2

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Technovation Challenge

Bewertungskriterien für den internationalen App-Wettbewerb

Anhand von Kategorien und Kriterien wird die App am Ende der Technovation-Saison von einer Jury bewertet. Diese Lektion hilft euch, Punkte im technischen Teil in den Kategorien „App-Funktion“, „Benutzer:innenerfahrung und Design“ und „Code-Komplexität“ zu sammeln. Hier könnt ihr den Bewertungsbogen einsehen.