Das schaffst du heute
Du baust die vollständige Singvögel-App mit allen 9 Vogelarten. Die Startseite zeigt alle Vögel in einem Raster, jede Vogelart hat eine eigene Seite mit großem Foto, Gesang-Button und Zurück-Button.
1
App-Idee & Aufbau
ca. 10 min
Es soll eine App entwickelt werden, bei der auf einer Startseite zwischen neun verschiedenen Vogelarten gewählt werden kann. Klickt man auf eines der Bilder, wird man auf eine zweite Seite geleitet. Dort wird der Gesang des Vogels abgespielt und das Foto des Vogels groß dargestellt. Über einen Zurück-Button gelangt man wieder auf die Startseite.
Die Startseite soll wie folgt aussehen:
Mockup der Startseite – die Prozentzahlen geben die Höhe der einzelnen Reihen an
Warum Prozent statt Pixel? Es ist sinnvoll, die Höhe der Bausteine in Prozent anzugeben, da die Displays der verschiedenen Smartphones eine unterschiedliche Auflösung haben. So passt sich die App automatisch an jedes Gerät an. Die notwendigen Angaben kannst du aus der Darstellung oben entnehmen.
2
Startseite: Layout mit Row
ca. 30 min
Das Layout der App wird mit der Funktion Row gestaltet. Eine Row ist eine waagerechte Zeile, in die du mehrere Elemente nebeneinander platzieren kannst.
1
Row-Element finden
Scrolle in der linken Spalte des Design-Editors nach unten bis zum Abschnitt Layout. Ziehe das Element
Row auf den Screen.
Das Row-Element findest du im Bereich „Layout" der linken Spalte
Folgende unterschiedliche Rows soll die Startseite aufweisen:
So sieht der Komponentenbaum der Startseite aus – für jede Reihe Vögel eine Row
Aufbau der Startseite:
Label Titel– Überschrift „Singvögel im Garten" (Höhe: 10 %)Row Bilder 1– erste Reihe mit 3 Vogelfotos als Buttons (Höhe: 25 %)
→Button Amsel,Button Blaumeise,Button BuchfinkRow Namen 1– Namen der ersten drei Vögel (Höhe: 5 %)
→Label Amsel,Label Blaumeise,Label Buchfink- … dasselbe für die zweite und dritte Reihe (Kohlmeise, Mönchsgrasmücke, Rotkehlchen / Singdrossel, Zaunkönig, Zilpzalp)
Tipp: Benenne alle Elemente eindeutig (z. B. Button-Amsel, Row-Bilder-1), sonst verlierst du im Blockeditor schnell den Überblick.
✅ Checkliste
- Label Titel „Singvögel im Garten" ist oben platziert (Höhe 10 %)
- Drei Rows mit Vogelfotos als Buttons sind angelegt (je 25 % Höhe)
- Drei Rows mit Vogelnamen als Labels sind angelegt (je 5 % Höhe)
- Alle 9 Vogelbilder sind hochgeladen und als Button-Hintergrund gesetzt
3
Vogelartseiten anlegen
ca. 30 min
Von der Startseite gelangt man durch Drücken eines Buttons auf die Seite der jeweiligen Vogelart. Diese Seite soll wie folgt aussehen:
Die Vogelartseite – Name oben, großes Foto in der Mitte, zwei Buttons unten
Aufbau der Vogelartseite:
- Label mit dem Vogelnamen oben
- Großes Vogelfoto als Hintergrundbild
- Button Zurück → navigiert zur Startseite
- Button Gesang → spielt die Vogelstimme ab
1
Ersten Vogelscreen (Amsel) fertig bauen
Lege eine neue Seite an und nenne sie Screen-Amsel. Setze das Amsel-Foto als Hintergrundbild. Füge oben ein Label mit dem Text Amsel ein. Platziere unten zwei Buttons: Zurück und Gesang. Lade die Audiodatei amsel.mp3 hoch und verknüpfe sie mit dem Sound-Element.
2
Screen duplizieren statt neu anlegen
Mit der Funktion Save screen to my screen im rechten Menü kannst du den fertigen Screen kopieren. So musst du den Aufbau nur einmal erstellen und passt für jeden Vogel nur Foto, Name und Sounddatei an.
Klicke auf das Symbol „Save screen to my screen" rechts oben, um den Screen zu duplizieren
3
Für alle 9 Vögel wiederholen
Erstelle so für jede Vogelart eine eigene Seite: Amsel, Blaumeise, Buchfink, Kohlmeise, Mönchsgrasmücke, Rotkehlchen, Singdrossel, Zaunkönig, Zilpzalp. Passe auf jeder Seite Foto, Label-Text und Sounddatei an.
✅ Checkliste
- Screen-Amsel mit Foto, Label, Zurück- und Gesang-Button ist fertig
- Alle 9 Vogelscreens sind angelegt
- Jeder Screen hat die richtige Sounddatei hochgeladen
4
Downloads – Fotos & Vogelstimmen
Materialien
Lade die Fotos und Gesänge herunter und lade sie dann in Thunkable hoch.
🐦 Amsel
🐦 Blaumeise
🐦 Buchfink
🐦 Kohlmeise
🐦 Mönchsgrasmücke
🐦 Rotkehlchen
🐦 Singdrossel
🐦 Zaunkönig
🐦 Zilpzalp
5
Aufgabe & Abgabe
ca. 20 min
Aufgabe: Erstelle die vollständige App
Baue die vollständige Singvögel-App mit allen 9 Vogelarten. Achte darauf:
- Die Startseite zeigt alle 9 Vögel übersichtlich im Raster
- Jedes Vogelbild ist ein Button, der zur richtigen Vogelseite führt
- Auf jeder Vogelseite spielt der Gesang-Button den richtigen Ton ab
- Der Zurück-Button bringt dich immer zurück zur Startseite
📤 Abgabe
1
Projektdetails öffnen
Gehe zur Startseite von Thunkable und klicke auf die drei Punkte neben deiner App → Project Detail Page.
2
Link kopieren und abgeben
Kopiere den Link oben auf der Seite und sende ihn an die Lehrkraft. Lösche deine App nur in Absprache mit der Lehrkraft.
✅ Tages-Checkliste
- Startseite mit allen 9 Vögeln im Raster ist fertig
- Alle 9 Vogelseiten sind angelegt und funktionieren
- Die App in Thunkable Live getestet – alles funktioniert
- Projekt-Link abgegeben
📜 Lizenzen zu den Vogelstimmen
- Amsel: Oona Räisänen (gemeinfrei)
- Blaumeise: Dan Stowell (Creative Commons — Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported — CC BY-SA 3.0)
- Buchfink: Herr Küppers (Creative Commons — Namensnennung - Weitergabe unter gleichen Bedingungen 2.0 Deutschland — CC-BY-SA 2.0 DE)
- Kohlmeise: Dengis Chantal (Creative Commons — Namensnennung 3.0 Unported — CC BY 3.0)
- Mönchsgrasmücke: Georgoftoart (Creative Commons — Namensnennung - Weitergabe unter gleichen Bedingungen 4.0 International — CC BY-SA 4.0)
- Rotkehlchen: Vladimir Yu. Arkhipov, Arkhivov (Creative Commons — Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported — CC BY-SA 3.0)
- Singdrossel: Daniel71953 (Creative Commons — Attribution-ShareAlike 4.0 International — CC BY-SA 4.0)
- Zaunkönig: Granitusa504 (Creative Commons — Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported — CC BY-SA 3.0)
- Zilpzalp: T.Voekler (Creative Commons — Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported — CC BY-SA 3.0)