📶 Schul-WLAN-Code (gültig bis 29.06.2026): 27229-77978 – Voucher im Browser eingeben, dann bist du drin.
5
← Zurück zur Übersicht

Datenbank – Vogelstimmen-App mit Data Source

Tag 5 · Datenbank anlegen · Tabelle befüllen · Daten per Variable abrufen
🎯
Das schaffst du heute
Du baust die Vogelstimmen-App neu – aber diesmal mit einer Datenbank. Statt neun einzelner Screens reicht ein einziger Screen für alle Vögel. Du lernst, wie eine Datentabelle in Thunkable angelegt wird und wie man per Variable den richtigen Datensatz abruft.
1

Warum eine Datenbank?

ca. 10 min
▾

Bei der Vogelstimmen-App musste für jede Vogelart eine extra Seite angelegt werden. Das war viel Arbeit – und bei neun Vögeln mussten neun fast identische Screens gebaut werden. Mithilfe einer Datenbank lässt sich der Programmieraufwand erheblich reduzieren.

Startseite der Vogelstimmen-App mit 9 Vogelkacheln
Startseite: 9 Vögel zur Auswahl
Vogeldetailseite mit Amsel-Foto, Zurück- und Gesang-Button
Detailseite: gleicher Aufbau für alle Vögel
Die Idee: Der Aufbau der Detailseite ist für alle Vögel gleich – dasselbe Layout lässt sich also für unterschiedliche Vogelarten nutzen. Dazu müssen zunächst alle Bilder und Tondateien hochgeladen werden. Anschließend trägt man sie in die Datenbank ein. Beim Klick auf einen Vogel-Button wird nur eine Nummer (die Zeile in der Tabelle) gespeichert – der eine Screen lädt dann automatisch die richtigen Daten.
2

Datentabelle (Data Source) anlegen

ca. 10 min
▾

Eine Datentabelle (Data Source) lässt sich über die linke Menüleiste anlegen. Klicke auf das +-Symbol neben Data Sources:

Linke Menüleiste mit Data Sources und Plus-Button, rot eingekreist
Das + neben „Data Sources" öffnet den Dialog

Es erscheint ein Dialog mit verschiedenen Optionen. Wähle Create your own table – damit wird die Datenbank direkt in der App angelegt, ohne externen Dienst:

Dialog: Create new DataSource from – vier Optionen: Create your own table, Airtable, Google Sheets, Webflow
„Create your own table" anlegen – die Tabelle bleibt in der App

✅ Checkliste

  • Data Source über das + in der linken Leiste geöffnet
  • „Create your own table" ausgewählt
  • Tabelle heißt voegel
3

Tabelle befüllen

ca. 20 min
▾

Gibt man der Tabelle einen Namen (voegel), erscheint sie in der linken Menüleiste. Klickt man sie an, kann sie bearbeitet werden. Die Tabelle hat drei Spalten: Name, Bild und Gesang.

Tabelle Voegel mit 9 Zeilen: Name, Bild (z.B. Amsel.jpg), Gesang (z.B. Amsel.mp3)
Die fertige Tabelle mit allen 9 Vögeln
Wichtig: Lade die Bilder und Vogelgesänge zuerst hoch und fülle dann die Tabelle aus. Die Bezeichnung in der Tabelle muss genau mit der tatsächlichen Bezeichnung der Bild- und Sounddatei übereinstimmen (Groß-/Kleinschreibung beachten!).

✅ Checkliste

  • Alle 9 Bilder (z. B. Amsel.jpg) hochgeladen
  • Alle 9 Gesangsdateien (z. B. Amsel.mp3) hochgeladen
  • Tabelle hat die Spalten Name, Bild, Gesang
  • Alle 9 Zeilen korrekt ausgefüllt
4

Daten per Variable abrufen

ca. 25 min
▾

Mithilfe einer Variable können die Daten aus der Tabelle abgerufen werden. Die Variable speichert die Zeilennummer des angeklickten Vogels. Der Detailscreen liest dann anhand dieser Nummer die richtigen Daten aus der Tabelle.

Schritt 1 – Startseite: Button-Klick speichert die Zeilennummer

Für jeden Vogel-Button auf der Startseite wird beim Klick die passende Zeilennummer in der Variable gespeichert und dann zur Detailseite navigiert:

when Button-Amsel Click: set app variable Vogelart to 1, navigate to Screen-Vogel
Beim Klick auf „Amsel" wird Zeile 1 gespeichert und zu Screen-Vogel navigiert
Erklärung:
  • set app variable Vogelart to 1 – speichert die Zeilennummer des Vogels (Amsel = Zeile 1, Blaumeise = Zeile 2 usw.)
  • navigate to Screen-Vogel – wechselt zur Detailseite

Schritt 2 – Detailseite: Daten aus der Tabelle laden

Wenn die Detailseite geöffnet wird (Screen-Vogel Opens), liest sie anhand der gespeicherten Zeilennummer den Namen und das Bild aus der Tabelle:

when Screen-Vogel Opens: set Label-Name-Vogel Text to get value from Voegel in Table 1 in Name for row id app variable Vogel; set Image-Vogel Picture to get value from Voegel in Table 1 in Bild for row id app variable Vogel
Beim Öffnen der Detailseite werden Name und Bild aus der Tabelle geladen
Erklärung der Blöcke:
  • when Screen-Vogel Opens – wird ausgeführt, sobald die Seite aufgerufen wird
  • get value from Voegel in Table 1 in Name for row id app variable Vogel – liest den Namen aus der Tabelle, Zeile = gespeicherte Variable
  • set Label-Name-Vogel's Text to … – zeigt den Namen auf der Seite an
  • set Image-Vogel's Picture to … – lädt das passende Vogel-Bild

✅ Checkliste

  • Variable Vogelart ist angelegt
  • Jeder Vogel-Button setzt die richtige Zeilennummer und navigiert zu Screen-Vogel
  • Screen-Vogel lädt Name und Bild aus der Tabelle
5

Aufgabe & Abgabe

ca. 15 min
▾
✏️
Aufgabe: Programmiere die App

Baue die Vogelstimmen-App mit Datenbank komplett nach. Teste sie in Thunkable Live:

  • Öffnet sich beim Klick auf einen Vogel die richtige Detailseite?
  • Werden Name und Bild korrekt aus der Tabelle geladen?
  • Spielt der Gesang-Button den richtigen Vogelgesang ab?
  • Funktioniert der Zurück-Button?

📤 Abgabe

1
Projektdetails öffnen
Gehe zur Startseite von Thunkable → drei Punkte neben der App → Project Detail Page.
2
Link kopieren und abgeben
Kopiere den Link oben auf der Seite und sende ihn an die Lehrkraft. Apps nur in Absprache löschen.
Lizenzen zu den Vogelstimmen
  1. Amsel: Oona Räisänen (gemeinfrei)
  2. Blaumeise: Daniell Stoowell (Creative Commons — Namensnennung – Weitergabe unter gleichen Bedingungen 3.0 Unported — CC BY-SA 3.0)
  3. Buchfink: Herr Küppers (Creative Commons — Namensnennung – Weitergabe unter gleichen Bedingungen 2.0 Deutschland — CC BY-SA 2.0 DE)
  4. Kohlmeise: Dengis Chantal (Creative Commons — Namensnennung 3.0 Unported — CC BY 3.0)
  5. Mönchsgrasmücke: Georgfotoart (Creative Commons — Namensnennung – Weitergabe unter gleichen Bedingungen 4.0 International — CC BY-SA 4.0)
  6. Rotkehlchen: Vladimir Yu. Arkhipov, Arkhivov (Creative Commons — Namensnennung – Weitergabe unter gleichen Bedingungen 3.0 Unported — CC BY-SA 3.0)
  7. Singdrossel: Danıel71953 (Creative Commons — Attribution-ShareAlike 4.0 International — CC BY-SA 4.0)
  8. Zaunkönig: Grantuus4504 (Creative Commons — Namensnennung – Weitergabe unter gleichen Bedingungen 3.0 Unported — CC BY-SA 3.0)
  9. Zilpzalp: T.Voelker (Creative Commons — Namensnennung – Weitergabe unter gleichen Bedingungen 3.0 Unported — CC BY-SA 3.0)

✅ Tages-Checkliste

  • Datenbank angelegt und alle 9 Vögel eingetragen
  • Alle Buttons auf der Startseite programmiert
  • Detailseite lädt Name, Bild und Gesang korrekt
  • App in Thunkable Live getestet – alles funktioniert
  • Projekt-Link abgegeben
← Tag 4 Zur Übersicht →
✕