- Lerne die ereignisgesteuerte Programmierung kennen
- Verstehe die verschiedenen Arten von Blöcken auf der MIT App Inventor Plattform
Das sind die Aktivitäten für diese Lektion:
EREIGNISSE (events)
Mobile Apps basieren auf ereignisgesteuerter Programmierung.
Ereignisgesteuerte Programmierung basiert auf Ereignissen, anstatt den Code von oben nach unten auszuführen. Manche Programme führen einfach ihren gesamten Code auf einmal aus, aber mobile Apps funktionieren auf der Grundlage der Interaktion des Nutzers mit dem Programm.
Mobile Apps funktionieren auf der Grundlage von Ereignissen (Events)Das sind Dinge, die passieren und die Ausführung von Code auslösen. Ein Beispiel wäre: Der Nutzer klickt auf eine Schaltfläche. Das Ereignis tritt ein, wenn der Nutzer klickt. Und das Ereignis löst einen Code aus, der als Ereignishandler (Event handler).
STOPPEN UND DISKUTIEREN
Kannst du dir vorstellen, wie du mit deinem Telefon interagierst und was es tut? Hier sind ein paar, um den Anfang zu machen:
- Wenn du auf ein Symbol für eine App klickst, wird die App geöffnet.
- Wenn du bei einer Textnachricht auf "Senden" klickst, wird die Nachricht gesendet und ein Ton ausgegeben.
- Wenn du versuchst, dich bei einer App anzumelden, fragt die App nach einem Passwort.
Schauen wir uns zunächst die verschiedenen Teile der Plattform App Inventor an.
App Inventor hat zwei Fenster, die du zum Erstellen deiner App verwendest. Wenn du auf die Schaltfläche Designer (oben rechts auf dem Bildschirm) klickst, gelangst du zum Designerin dem du die Benutzeroberfläche entwirfst. Die Benutzeroberfläche ist alles in deiner App, mit dem ein Benutzer interagieren kann. Das können Schaltflächen, Navigationsleisten, Textfelder, Bilder usw. sein.
APP INVENTOR DESIGNFENSTER
Palette
Du wählst Komponenten aus der Palette aus, um sie dem Viewer in der Mitte des Fensters hinzuzufügen. Es gibt mehrere Schubladen mit Komponenten, die du erkunden und verwenden kannst.
Betrachter / Viewer
Du ziehst deine Komponenten auf den Betrachter (Viewer). Die Komponenten werden von oben nach unten, auf der linken Seite, hinzugefügt. Du musst die Layout-Komponenten und die Ausrichtung verwenden, um mehr Kontrolle darüber zu bekommen, wo genau deine Komponenten erscheinen.
Komponentenliste
In dieser Liste findest du eine hierarchische Auflistung der Elemente auf deinem Bildschirm. Du kannst sie auswählen, indem du sie im Viewer oder in dieser Liste anklickst.
Eigenschaften (Properties) Panel
Im Eigenschaften-Panel kannst du die Eigenschaften für jede Komponente festlegen, z. B. Schriftgröße, Ausrichtung, Farbe usw.
Nicht sichtbare Komponenten
Nicht sichtbare Komponenten werden nicht auf dem Bildschirm angezeigt, sind aber trotzdem Teil der App. Sie erscheinen unterhalb des Bildschirms, wenn du sie per Drag & Drop verschiebst.
Wenn jemand deine App benutzt, interagiert er mit deiner Benutzeroberfläche, indem er auf Schaltflächen klickt, Text eingibt usw. Es liegt an dir, zu entscheiden, was deine App tun soll und sie so zu programmieren, dass sie diese Dinge tut.
BLOCKS-REDAKTION
Wenn du auf "Blöcke" klickst, gelangst du zum Blocks-Editor Fenster, in dem du die gesamte Programmierung vornimmst. Du ziehst Blöcke aus dem Panel auf der linken Seite in den Arbeitsbereich in der Mitte des Bildschirms.
Auf der linken Seite findest du die Blöcke, die du in den Arbeitsbereich ziehen kannst. Sie befinden sich in Kategorien/Schubladen wie Steuerung und Logik.
Betrachter / Viewer
Das ist deine Arbeitsfläche, auf die du alle deine Blöcke ziehst. Du kannst sie verschieben und sie aneinander und ineinander einrasten lassen. Du kannst auch alle Blöcke löschen, die du nicht brauchst.
Komponentenblöcke
Jede Komponente in deiner App hat ihren eigenen Satz von Blöcken. Du klickst auf die Komponente, um die Blöcke anzuzeigen, die du dann in den Arbeitsbereich ziehen kannst.
EREIGNISS-HANDLER
Event-Handler-Blöcke in App Inventor haben eine goldene Farbe und sind als offener Block geformt, sodass du Blöcke darin einrasten lassen kannst. Diese Blöcke werden nur ausgeführt, wenn das Ereignis eintritt.
Wenn die Schaltfläche angeklickt wird
Das kennst du ja schon. Wenn der Nutzer auf eine bestimmte Schaltfläche klickt, soll die App etwas tun, z. B. einen anderen Bildschirm öffnen oder eine Nachricht senden.
Wenn die Bildschirmausrichtung geändert wird
Wenn der Nutzer sein Handy vom Hochformat (vertikal) ins Querformat (horizontal) dreht, möchtest du vielleicht etwas tun, z. B. das Layout des Bildschirms oder die Größe der Komponenten ändern.
Wenn die Position des Schiebereglers geändert wird
Bei einem Schieberegler kann der Benutzer durch Ziehen einen Wert entlang des Reglers auswählen. Dies kann eine Änderung an einer anderen Komponente auslösen. Du könntest zum Beispiel den Stift in einer Zeichen-App mit einem Schieberegler vergrößern.
FUNKTIONEN
Funktionen sind Codeblöcke, die etwas tun. Sie können innerhalb einer App viele Male ausgeführt werden. In App Inventor sind Funktionsblöcke lila gefärbt. Manche Sprachen bezeichnen Funktionen als Methoden oder Prozeduren. In der Tat bezeichnet App Inventor diese allgemein als Prozeduren. Sie tun etwas, also kannst du sie als Aktionsblöcke betrachten.
TextToSpeech.Speak
Die TextToSpeech-Komponente kann jeden Text sagen oder sprechen, den du möchtest.
Camera.TakePicture
Die Komponente Camera kann ein Foto mit dem Telefon aufnehmen.
Sound.Play
Die Komponente Sound kann einen Ton abspielen.
SETTER UND GETTER
Grüne Blöcke beziehen sich auf Komponenten und ihre Eigenschaften.
Die hellgrünen Blöcke, die an einem anderen Block einrasten können, heißen Gettergenannt, weil du den Wert der Eigenschaft erhältst.
Setzer sind dunkler grün und können mit einem offenen Schlitz am Ende angeklickt werden. So kannst du den Wert der Eigenschaft einstellen.
Text der Schaltfläche1
Der Text von Button1 wird in der Variablen global greeting gespeichert.
Text von Schaltfläche1
Der Text von Button1 wird auf die Worte "Ich liebe Coding" gesetzt. Die Worte "I love coding" werden auf der Schaltfläche angezeigt.
Text des Etiketts1
Der Text von Label1 ist auf die Quelle von Sound1 eingestellt. Das bedeutet, dass der Dateiname des Tons in Label1 angezeigt wird.
Quelle von Sound1
Die Quelle von Sound1 (der Name der Tondatei) wird in der Eigenschaft Text von Label1 gespeichert. Wenn du den Text eines Labels einstellst, wird der Wert des Labels angezeigt, d.h. der Name der Tondatei wird in Label1 angezeigt.
Text von Label1
TextToSpeech holt sich den Inhalt von Label1's Text und spricht ihn. Der Text, der in Label1 angezeigt wird, wird gesprochen.
Mentor Tipp
Bewährte Methoden: Erinnere die Schülerinnen und Schüler daran, dass dies genau so ist, wie das echte Programmieren. Das seltsame Vokabular (Funktionen, Getter, Setter), das wir verwenden, ist genau das, was Programmierer verwenden.
Leitfragen an die Schüler/innen: Fallen dir ein paar alltägliche Aufgaben ein, die du erledigst? (Beispiel: einen Kuchen backen, Zähne putzen - alles, was wiederholbare Schritte hat). Funktionen sind den Algorithmen sehr ähnlich!
Mentorentipps werden durch die Unterstützung von AmeriCorps bereitgestellt.
DATENBLÖCKE
Wenn du Setter-Blöcke verwendest, kannst du auch andere eingebaute Blöcke nutzen, die Daten oder Informationen darstellen, die in deiner App verwendet werden können. Im Folgenden findest du einige Beispiele für Datenblöcke, die du verwenden kannst.
Zahlen
Zahlenwerte können als Daten in einer App verwendet werden. Diese Blöcke findest du in der Schublade "Mathematik" in der Palette "Blöcke".
Text oder Zeichenketten
Text, manchmal auch Strings genannt, kann als Daten verwendet werden. Das sind Buchstaben, Wörter und Sätze, die in einer App verwendet werden können. Die Blöcke befinden sich in der Schublade Text der Palette Blöcke.
Boolesch
Dieser Datentyp hat nur zwei mögliche Werte - wahr oder falsch. Diese Blöcke können den "Zustand" von etwas festlegen oder testen und werden in Konditionalen verwendet, über die du noch mehr erfahren wirst.
AKTIVITÄT: SOUNDBOARD-TUTORIAL
Folge dem Video-Tutorial unten
und folge Daves Anweisungen in dem Video unten.
Beachte, dass das Video bei 1:11 beginnt, um die Ladeanweisungen zu überspringen. Diese Anweisungen werden nicht benötigt, wenn du das Starterprojekt über den obigen Link geladen hast.
CHALLENGE
In der Aktivität hast du verwendet:
- Ereignis-Handler-Blöcke
- Funktionsblöcke
Versuchen wir, einige Setter- und Getter-Blöcke zu verwenden, indem wir sie zu deiner Soundboard-App hinzufügen.
Wenn der Nutzer auf ein Bild klickt, um die dazugehörige Rede abzuspielen, ändere die Hintergrundfarbe Farbe des Bildschirms.
Du kannst ihn in eine bestimmte Farbe ändern, aber dann kannst du ihn nicht einfach wieder in die Ausgangsfarbe Schwarz ändern.
Tipp: Schau in der Schublade "Farbe" nach und suche die Option einen Farbblock erstellen. Dann suche in der Schublade Mathematik nach einem zufälligen integer-Block. Farben bestehen aus 3 Zahlen, RGB für Rot, Grün und Blau, die von 0-255 reichen.
REFLEXION
Nachdem du jetzt ein bisschen mehr über die verschiedenen Codeblöcke gelernt hast, denke über deine App-Lösung nach:
ÜBERPRÜFUNG DER SCHLÜSSELBEGRIFFE
- Benutzeroberfläche - alles in deiner App, mit dem ein Nutzer interagieren kann
- Designer - Fenster, in dem du Komponenten zu deiner App hinzufügen und ihr Aussehen gestalten kannst
- Blocks Editor - Fenster, in dem du die Blöcke für deine App codierst
- Ereignis - Etwas, das passiert und die Ausführung von Code auslöst
- Ereignis-Handler- Codeblöcke, die deiner App sagen, was zu tun ist, wenn ein Ereignis eintritt
- Ereignisgesteuerte Programmierung - Programmierung auf der Grundlage von Ereignissen, anstatt den gesamten Code von oben nach unten ablaufen zu lassen
- Funktionen - Ein Codeblock, der mehrmals ausgeführt werden kann.
ZUSÄTZLICHE RESSOURCEN
Mehr von Dave Wolbers App Inventor Einsteiger-Tutorials findest du auf appinventor.org
