Thunkable ist eine visuelle App-Entwicklungsplattform, die es Benutzern ermöglicht, mobile Apps für iOS und Android ohne Programmierkenntnisse zu erstellen. Es wird verwendet, um eine Vielzahl von Anwendungen wie Spiele, Geschäftsanwendungen und Bildungsanwendungen zu entwickeln. Thunkable bietet eine benutzerfreundliche grafische Benutzeroberfläche und eine Bibliothek mit Bausteinen, die es ermöglichen, Apps mit einfachen Drag-and-Drop-Funktionen zu erstellen.
Die im Unterricht entwickelten Apps dürfen nicht im App-Store oder bei Google-Play angeboten oder gar verkauft werden.
1
Anmelden bei Thunkable
ca. 10 min
Geh auf die Seite https://x.thunkable.com/login und melde dich mit einer der drei Optionen an.
Die Thunkable-Anmeldeseite – wähle eine der drei Optionen
Du erhältst eine Mail mit einem Link zu Thunkable. Diesen Link musst du auf dem Schulrechner öffnen und nicht auf dem Handy! Wenn du auf den Link klickst, erscheint ein Popup-Fenster, in dem du den Bereich Education einträgst.
Nur die Free-Version ist kostenlos. Diese verwenden wir im Unterricht – ein Upgrade ist nicht notwendig.
✅ Checkliste
- Ich bin bei Thunkable angemeldet
- Ich sehe die Thunkable-Startseite im Browser
2
Projekt anlegen
ca. 10 min
Um zur Entwicklerumgebung zu gelangen, musst du auf Start Building (später: Create New App) klicken.
1
Projektnamen eingeben
Benenne das Projekt wie folgt:
Name-Vorname-Datum-von-heute
Beispiel:
Name-Vorname-Datum-von-heute
Beispiel:
Trepte-Andreas-22-06-20262
Category auf „Education" setzen
Ordne das Projekt der Kategorie Education zu.
3
„Use the Drag and Drop builder" abwählen
Entferne den Haken bei Use the Drag and Drop builder – sonst öffnet sich eine andere Ansicht.
So sieht der Dialog aus – Haken bei „Use the Drag and Drop builder" muss entfernt sein (roter Kreis)
Für jede Stunde muss eine neue App angelegt werden. Wenn du an der App der vorangegangenen Stunde weiterarbeiten möchtest, kannst du die alte App kopieren – klicke dazu auf die drei Punkte neben der App und wähle Duplicate.
Mit Duplicate kannst du eine bestehende App kopieren
✅ Checkliste
- Neues Projekt mit korrektem Namen angelegt
- Category: Education ausgewählt
- Haken bei „Drag and Drop builder" ist entfernt
3
Die Entwicklerumgebung kennenlernen
ca. 10 min
Design und Blocks: Die Benutzeroberfläche von Thunkable besteht aus zwei Bereichen – Design und Blocks, die oben links angezeigt werden. Im Designbereich wird das Layout der App erstellt, im Blocks-Editor erfolgt die Programmierung.
So ist der Editor aufgebaut:
- Links: Palette mit Bausteinen (Components) – von Buttons und Eingabefeldern bis hin zu Kamera und Datenbanken
- Mitte: Design-Canvas – hier baust du das Aussehen deiner App per Drag-and-Drop
- Rechts: Eigenschaften – hier kannst du Größe, Farbe und Schriftart der Elemente anpassen
Die Thunkable-Entwicklerumgebung: Links Bausteine, Mitte Canvas, Rechts Eigenschaften
4
Startseite der Singvögel-App bauen
ca. 20 min
Projektidee: Es soll eine App entstehen, mit der man die Gesänge von neun verschiedenen Singvögeln abspielen kann. Klickt man auf einen der Vögel, gelangt man auf eine zweite Seite, auf der der Gesang des Vogels abgespielt wird. Mit einem Zurück-Button gelangt man auf die Startseite und kann eine neue Vogelart auswählen.
So sieht die fertige App aus – 9 Singvögel auf der Startseite
🖼️ Schritt 1: Bild-Element auf den Screen ziehen
1
Image-Element hinzufügen
Scrolle in der linken Spalte des Design-Editors bis zum Abschnitt Image und ziehe das Element
Image in die Mitte des Screens.
Ziehe das Image-Element aus der linken Spalte in die Mitte des Screens
2
Element benennen und Größe einstellen
Benenne das Element oben in der rechten Spalte in Image-Amsel um.
Stelle die Maße ein:
•
•
Es ist wichtig, dass alle Elemente eindeutige Namen haben – sonst verliert man im Blockeditor den Überblick.
Stelle die Maße ein:
•
Height → 180 (Absolute Size)•
Width → 120 (Absolute Size)Es ist wichtig, dass alle Elemente eindeutige Namen haben – sonst verliert man im Blockeditor den Überblick.
3
Label unter das Bild ziehen
Ziehe ein
Label-Element unter das Foto. Benenne es in Label-Amsel um und gib als Text Amsel ein. Wähle eine blaue Schrift.Für die vollständige App wiederholst du diese Schritte für alle 9 Vögel. Heute bauen wir zunächst die Amsel fertig.
5
Vogelartseite & Sound einrichten
ca. 20 min
Jetzt legst du eine zweite Seite in der App an – die Detailseite für die Amsel.
1
Neue Seite anlegen
Klicke oben im Editor auf
+ neben dem Screen-Reiter, um eine neue Seite anzulegen. Benenne sie Amsel.2
Amsel-Bild als Hintergrund setzen
Wähle als
Background Picture das Amsel-Bild. Lade es zuerst über den Datei-Bereich links hoch. Du kannst die Dateien unten herunterladen und dann in Thunkable hochladen.📥 Downloads für diese Aufgabe
3
Zurück-Button hinzufügen
Platziere am unteren Rand der Seite ein
Button-Element. Gib ihm den Text zurück und benenne es in Button-Zurück um. Platziere es im Element Screen-Amsel in der Mitte am unteren Rand.
So sieht die Amsel-Seite aus – Foto als Hintergrund, Zurück-Button unten
4
Sound-Element hochladen
Ziehe ein
Sound-Element aus der linken Spalte in den Screen. Es wird automatisch am unteren Rand des Editors platziert (unsichtbare Komponente). Lade das Soundfile amsel.mp3 hoch und benenne das Element in Sound-Amsel um.✅ Checkliste
- Seite „Amsel" ist angelegt
- Amsel-Bild ist als Hintergrund gesetzt
- Button „Button-Zurück" ist am unteren Rand platziert
- Sound-Element „Sound-Amsel" mit amsel.mp3 ist hochgeladen
6
Programmieren im Blockeditor
ca. 20 min
Was ist der Blockeditor? In Thunkable programmierst du nicht mit Text, sondern mit farbigen Blöcken. Jeder Block steht für eine Aktion. Du verbindest sie – der Computer führt sie dann aus. Das Prinzip: „Wenn [Ereignis] passiert → dann [Aktion] ausführen."
🔀 Schritt 1: Startscreen programmieren
1
In den Blockeditor wechseln
Gehe zum Startscreen (Screen1) zurück und klicke oben rechts auf Blocks, um in den Programmiereditor zu gelangen.
2
Klick auf Amsel-Bild programmieren
Klicke links auf Image-Amsel und ziehe den Block
when Image-Amsel Click in den Editor. Setze aus der Controlfunktion den Block navigate to ein und wähle Amsel als Ziel.
Dieser Block sorgt dafür, dass ein Tipp auf das Amsel-Bild zur Amsel-Seite weiterleitet
🔊 Schritt 2: Amsel-Screen programmieren
1
Ton beim Öffnen abspielen
Wechsle zum Screen Amsel. Ziehe den Block
when Amsel Opens auf die Arbeitsfläche. Füge darin ein: call Sound-Amsel's Play. So startet der Amsel-Gesang automatisch, wenn die Seite geöffnet wird.2
Zurück-Button programmieren
Ziehe den Block
1.
2.
when Button-Zurück Click auf die Arbeitsfläche. Füge darin ein:1.
call Sound-Amsel's Stop – Ton stoppen2.
navigate to Screen1 – zurück zur Startseite
Die zwei Blöcke für die Amsel-Seite – Ton abspielen beim Öffnen, stoppen beim Zurück-Button
✅ Checkliste
- Block „when Image-Amsel Click → navigate to Amsel" ist angelegt
- Block „when Amsel Opens → Sound-Amsel Play" ist angelegt
- Block „when Button-Zurück Click → Stop + navigate to Screen1" ist angelegt
Jetzt du! – Aufgabe
Baue die komplette Logik für die Amsel-Seite nach. Teste danach auf dem Handy: Tippt man auf das Amsel-Bild, öffnet sich die Amsel-Seite und der Gesang spielt ab. Der Zurück-Button bringt dich zur Startseite zurück.
Bonus: Kannst du eine zweite Vogelart (z.B. Blaumeise) genauso einbauen?
7
Testen & Aufgabe abgeben
ca. 10 min
Die App kann man in der App Thunkable Live auf dem eigenen Handy ausprobieren. Lade sie kostenlos im Play Store oder App Store herunter.
„Thunkable Live" – kostenlos im Play Store und App Store
📤 Aufgabe abgeben
Die Aufgabe wird über einen Link abgegeben. Lösche deine Apps deswegen nur in Absprache mit der Lehrkraft.
1
Projektdetails öffnen
Gehe zur Startseite von Thunkable und klicke auf die drei Punkte neben deiner App → Project Detail Page.
2
Link kopieren
Auf der folgenden Seite siehst du oben den Link zu deinem Projekt. Kopiere diesen Link und sende ihn an die Lehrkraft.
✅ Tages-Checkliste
- Ich habe die App mit Thunkable Live auf dem Handy getestet
- Die Amsel-Seite öffnet sich beim Tippen auf das Bild
- Der Amsel-Gesang spielt ab
- Der Zurück-Button funktioniert
- Ich habe den Projekt-Link kopiert und abgegeben