- Lerne die ereignisgesteuerte Programmierung kennen
- Die verschiedenen Arten von Blöcken auf der Thunkable-Plattform verstehen
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 EreignissenDas 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 ist, wenn der Nutzer klickt. Der Code, der ausgeführt wird, wenn dieses Ereignis eintritt, heißt Ereignishandler.
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 Thunkable-Plattform an.
Thunkable hat zwei Fenster, in denen du deine App erstellen kannst. Wenn du in der oberen Menüleiste (links oben auf dem Bildschirm) auf Design 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.
THUNKABLE DESIGNER FENSTER
Komponentenliste
Alle Komponenten, die du zu deiner App hinzugefügt hast, erscheinen hier, hierarchisch nach Bildschirmen geordnet.
Arbeitsbereich
Du ziehst deine Komponenten auf das Telefon in diesen zentralen Arbeitsbereich. Du hast die Kontrolle darüber, wo die Komponenten platziert werden und wie groß sie sind.
Komponenten hinzufügen
Du ziehst visuelle Komponenten aus diesem Panel in den Arbeitsbereich.
Eigenschaften (Properties) Panel
Im Eigenschaften-Panel kannst du die Eigenschaften für jede Komponente festlegen. Eigenschaften sind verschiedene Merkmale, die du für jede Komponente einstellen kannst, wie z. B. ihre Breite, Höhe und Farbe. Wähle eine Komponente im Mockup aus und ändere dann eine ihrer Eigenschaften im Eigenschaftenfenster.
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 Palette mit den Blöcken. Oben befinden sich die UI-Komponenten. Jede Komponente in deiner App hat ihren eigenen Satz an Blöcken. Du klickst auf die Komponente, um die Blöcke anzuzeigen, die du in den Arbeitsbereich ziehen kannst.
Arbeitsbereich für Codierung
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.
Kernblöcke
Die Kernblöcke sind Standard-Codierblöcke, die du in deiner App verwenden kannst. Sie sind nach ihrem Typ kategorisiert und farblich gekennzeichnet.
App-Funktionen
Das sind unsichtbare Funktionen, die du zu deiner App hinzufügen kannst. Du kannst auf eine Funktion klicken, um sie hinzuzufügen, und dann Eigenschaften festlegen und Codeblöcke für diese Funktion herausziehen.
EREIGNISS-HANDLER
Ereignisbehandlungsblöcke in Thunkable 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 ein ListViewer-Element angeklickt wird
Ein ListViewer ist wie ein Dropdown-Menü. Dieses Ereignis tritt ein, wenn der Benutzer ein Element in der Liste auswählt. Die App sollte etwas mit dem angeklickten Element machen.
Wenn sich ein Bildschirm öffnet
Dieses Ereignis wird verwendet, wenn du etwas tun möchtest, wenn die App zum ersten Mal gestartet wird oder die App zu einem anderen Bildschirm wechselt. Du kannst Variablen setzen oder Informationen aus der Cloud aktualisieren.
FUNKTIONEN
Funktionen sind Codeblöcke, die etwas tun. Sie können innerhalb einer App viele Male ausgeführt werden. In Thunkable sind Funktionsblöcke lila gefärbt. In manchen Sprachen werden Funktionen als Methoden oder Prozeduren bezeichnet. Sie tun etwas, also kannst du sie auch als Aktionsblöcke betrachten.
Sag
Mit dieser Funktion kann die App den Text sagen oder sprechen, den du von ihr hören willst.
Timer Start & Sound Play
Die Timer-Komponente kann mit dem Zählen beginnen. Und die App kann einen Ton abspielen.
SETTER UND GETTER
Grüne Blöcke beziehen sich auf die Eigenschaften der Komponente.
Die hellgrünen Blöcke werden als Gettergenannt, weil du den Wert der Eigenschaft erhältst.
Text der Schaltfläche1
Der Text wird abgerufen und in der Variablen numberChoice gespeichert.
Timer1's Zeit in Sekunden
Der Wert der Sekunden des Timers wird im Text von Lablel1 gespeichert, sodass der Wert in der Beschriftung angezeigt wird.
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 von Schaltfläche1
Der Text von Button1 wird auf die Worte "Klick mich!" gesetzt.
Label1.Text
Der Text von Label1 wird auf die Zeit von Timer1 in Sekunden gesetzt.
IntervallMillisekunden von Timer1
Das IntervallMillisekunden von Timer1 (wie oft er ausgelöst wird) ist auf 3000, also 3 Sekunden, eingestellt.
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 Mathe-Schublade im Kernbereich der Blöcke-Palette.
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 im Abschnitt Kern der Blockpalette.
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
Folge dann Daves Video unten, um Event Handler und Funktionen zu verwenden, um Reden in deiner App abzuspielen.
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: In der Schublade "Farbe" erfährst du, wie du eine zufällige Farbe bekommst.
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 Thunkable-Tutorials von Dave Wolber findest du auf draganddropcode.com
Der kostenlose Kurs von Schülerbotschafterin Meenakshi Nair Thunkable-Kurs auf Udemy ist eine weitere großartige Ressource!
