1
← Zurück zur Übersicht

Vogelstimmen-App – Erster Screen

Tag 1 von 2 · 4 Schulstunden · App Inventor mit MIT

⚠️ Wichtiger Hinweis zum Urheberrecht: Die Vogelstimmen stehen unter Creative-Commons-Lizenzen oder sind gemeinfrei (Public Domain) – die genauen Lizenzen können auf der Übersichtsseite eingesehen werden. Die Vogelfotos sind urheberrechtlich geschützt; Urheber ist Andreas Trepte (avi-fauna.info). Die App darf im Unterricht und privat genutzt, aber nicht im App Store oder Google Play angeboten oder verkauft werden.

🎯
Das schaffst du heute
Du baust eine App, die ein Foto der Amsel zeigt – und wenn du auf den Button tippst, hörst du ihren Gesang. Am Ende des Tages läuft deine App auf dem echten Handy!

📋 Das brauchst du heute

  • Einen Computer mit Google Chrome
  • Dein Smartphone (Android oder iPhone)
  • Die App MIT AI2 Companion auf dem Handy (kostenlos im App Store)
  • Ein Google-Konto zum Einloggen
  • Die Mediendateien (Bilder + Töne) – gibt dein Lehrer aus

Stunde 1 App Inventor starten & Projekt anlegen

1

App Inventor aufrufen

Öffne Google Chrome und gehe auf:

🔗 appinventor.mit.edu

Klicke auf den orangefarbenen Button „Create Apps!" und melde dich mit deinem Google-Konto an.

Google-Login bei App Inventor
Login mit Google-Konto
2

Neues Projekt anlegen

Nach dem Login siehst du die Projektübersicht. Klicke oben links auf „Neues Projekt starten" (oder auf Englisch: „Start new project").

Gib als Projektname Vogelstimmen ein und bestätige mit OK.

💡 Keine Leerzeichen im Projektnamen! Vogelstimmen (alles zusammen) ist richtig.
Neues Projekt anlegen
Neues Projekt anlegen
3

Die Oberfläche kennenlernen

Der App Inventor hat zwei Bereiche, zwischen denen du wechseln kannst:

  • Designer – hier gestaltest du, wie die App aussieht (Bilder, Buttons, Text)
  • Blöcke – hier programmierst du, was passiert, wenn man etwas antippt

Die beiden Tabs findest du oben rechts im Fenster.

App Inventor Oberfläche
Designer-Ansicht: Links Bausteine, Mitte App-Vorschau, Rechts Eigenschaften
4

Handy verbinden

Damit du deine App sofort auf dem Handy testen kannst, musst du es mit App Inventor verbinden.

  1. Installiere die App MIT AI2 Companion auf deinem Handy (kostenlos im App Store / Play Store).
  2. Klicke in App Inventor oben auf Verbinden → AI Companion.
  3. Ein QR-Code erscheint auf dem Bildschirm.
  4. Öffne MIT AI2 Companion auf dem Handy und tippe auf „scan QR code".
  5. Scanne den QR-Code – die App erscheint live auf deinem Handy!
📶 Computer und Handy müssen im selben WLAN sein!
Verbinden-Menü in App Inventor
Verbinden → AI Companion auswählen

Stunde 2 Designer – Oberfläche gestalten

Jetzt baust du die Oberfläche deiner App. Du arbeitest im Designer-Bereich. Deine App zeigt ein Amsel-Foto und hat einen Button zum Abspielen der Vogelstimme.

5

Bild und Ton hochladen

Bevor du Bausteine einfügst, musst du die Mediendateien hochladen. Lade dir zuerst die beiden Dateien herunter:

📥 Dateien herunterladen

Jetzt lädst du die Dateien in App Inventor hoch:

  1. Schaue rechts unten im Designer-Bereich – dort gibt es den Bereich „Medien" (auf Englisch: „Media").
  2. Klicke auf „Datei hochladen".
  3. Lade zuerst das Bild amsel.jpg hoch.
  4. Lade dann den Ton amsel.mp3 hoch.
🎯 Jetzt du: Lade amsel.jpg und amsel.mp3 hoch. Du siehst beide Dateien danach im Medien-Bereich.
6

Hintergrundfarbe des Screens festlegen

Klicke in der App-Vorschau auf den leeren Screen (nicht auf einen Baustein). Auf der rechten Seite erscheinen die Eigenschaften des Screens.

Stelle die Hintergrundfarbe (BackgroundColor) auf ein dunkles Grün oder Schwarz ein – das sieht bei Vogelfotos gut aus.

7

Amsel-Foto einfügen

Links in der Baustein-Leiste findest du die Kategorie „Benutzerschnittstelle" (App Inventor: User Interface). Klicke darauf – es klappt eine Liste auf.

Ziehe den Baustein Bild (Image) in die App-Mitte.

Bild-Baustein in die App ziehen
Bild-Baustein aus der Leiste in den Screen ziehen

Jetzt stellst du die Eigenschaften des Bildes ein. Klicke auf das Bild in der Vorschau, dann siehst du rechts:

  • Bild (Picture): Wähle amsel.jpg aus der Liste.
  • Breite (Width): Auf „Fülle alles" (Fill parent) stellen – das Bild füllt die volle Breite.
  • Höhe (Height): Ebenfalls auf „Fülle alles" (Fill parent) stellen – das Bild füllt den ganzen Screen.
💡 Das Bild nimmt jetzt den gesamten Screen ein. In einem späteren Schritt wird es anklickbar – tippen die Schüler darauf, beginnt der Vogel zu singen.
🎯 Jetzt du: Platziere das Bild, wähle amsel.jpg als Bilddatei und stelle Breite und Höhe auf „Fülle alles". Das Amsel-Foto sollte jetzt den ganzen Screen ausfüllen!
8

Vogelname als Text anzeigen

Ziehe aus „Benutzeroberfläche" einen Bezeichnung-Baustein (Label) unter das Foto.

Eigenschaften einstellen:

  • Text: Amsel
  • Schriftgröße (FontSize): 24
  • Fettdruck (FontBold): ✓ Häkchen setzen
  • Textfarbe (TextColor): Weiß
  • Breite: Fülle alles (Fill parent)
  • Ausrichtung (TextAlignment): Zentriert

Außerdem: Umbenennen – klicke auf den Baustein-Namen unten links in der Komponentenliste und benenne ihn von „Bezeichnung1" in BezeichnungVogelname um.

💡 Eindeutige Namen sind wichtig! Sonst verlierst du später im Blöcke-Editor den Überblick.
9

Button „Abspielen" einfügen

Ziehe einen Button-Baustein unter die Bezeichnung.

Eigenschaften einstellen:

  • Text: ▶ Abspielen
  • Schriftgröße: 20
  • Breite: Fülle alles (Fill parent)
  • Hintergrundfarbe: Grün oder Orange

Umbenennen: ButtonAbspielen

App-Layout mit Foto, Name und Button
So sieht dein Screen bisher aus: Foto, Name und Button
10

Ton-Komponente hinzufügen

Du brauchst noch eine unsichtbare Komponente, die den Ton abspielen kann. Klicke in der Bausteinleiste links auf „Medien".

Ziehe den Baustein Ton (Sound) in den Screen – er landet automatisch im unsichtbaren Bereich unterhalb der App-Vorschau. Das ist normal!

Eigenschaften einstellen:

  • Quelle (Source): amsel.mp3 auswählen

Umbenennen: TonAmsel

Ton-Komponente im unsichtbaren Bereich
Die Ton-Komponente erscheint im unteren „unsichtbaren" Bereich
🎯 Jetzt du: Überprüfe deine Komponentenliste (rechts unten). Du solltest sehen: Bild1, BezeichnungVogelname, ButtonAbspielen, TonAmsel.

Stunde 3 Blöcke – Programmierung

Jetzt sagst du der App, was passieren soll, wenn du auf den Button tippst. Wechsle oben rechts in den Blöcke-Bereich.

11

In die Blöcke-Ansicht wechseln

Klicke oben rechts im Browser auf den Button „Blöcke". Die Ansicht wechselt – du siehst jetzt eine helle Arbeitsfläche mit einer Seitenleiste links.

Blöcke-Button oben rechts in App Inventor, orange markiert
Oben rechts: auf Blöcke klicken – die Programmierseite öffnet sich
12

Button-Klick programmieren

Links in der Blöcke-Ansicht siehst du alle deine Komponenten. Klicke auf ButtonAbspielen – es erscheint eine Liste mit allen möglichen Ereignissen.

Ziehe den Block „wenn ButtonAbspielen.Klick" in die Arbeitsfläche.

wenn ButtonAbspielen.Klick Block
Den „wenn…Klick"-Block in die Arbeitsfläche ziehen
13

Ton abspielen lassen

Klicke links auf TonAmsel. Ziehe den Block „aufrufen TonAmsel.Wiedergeben" in den „wenn…Klick"-Block hinein. Jetzt spielt die App den Amsel-Gesang ab, wenn der Button gedrückt wird.

TonAmsel.Wiedergeben Block einsetzen
Fertiger Block: Wenn Button gedrückt → Ton abspielen
🎯 Jetzt du: Tippe auf deinem Handy auf den Button „▶ Abspielen" – du solltest jetzt den Amsel-Gesang hören! 🎶
✅ Zwischenergebnis: Deine erste Vogelstimmen-App funktioniert! Ein Foto der Amsel + Knopf zum Abspielen des Gesangs.

Stunde 4 Startseite anlegen

Eine richtige App braucht eine Startseite, von der aus man verschiedene Vögel auswählen kann. Du legst jetzt eine Startseite an und verbindest sie mit dem Amsel-Screen.

14

Neuen Screen für die Amsel anlegen

Dein bisheriger Screen1 wird zur Startseite umgebaut. Zuerst legst du aber einen neuen Screen für die Amsel an.

  1. Klicke oben auf „Screen hinzufügen" (Add Screen).
  2. Gib als Name ScreenAmsel ein.
  3. Bestätige mit OK.
Neuen Screen hinzufügen
Neuen Screen „ScreenAmsel" anlegen
💡 Du kannst oben zwischen deinen Screens wechseln – du siehst jetzt Screen1 und ScreenAmsel.
15

Inhalte auf ScreenAmsel verschieben

Wechsle zu ScreenAmsel (oben im Dropdown). Baue hier dieselben Elemente auf, die du in Stunde 2 auf Screen1 gebaut hast:

  • Bild (amsel.jpg), volle Breite, Höhe 300
  • Bezeichnung „Amsel" – weiß, zentriert, Größe 24
  • Button „▶ Abspielen" – grün, volle Breite
  • Ton-Komponente (amsel.mp3) – umbenennen zu TonAmsel

Und füge noch einen Zurück-Button hinzu:

  • Button-Text: ← Zurück
  • Umbenennen: ButtonZurueck
  • Platzierung: ganz unten

Programmiere dann die Blöcke für diesen Screen (genau wie vorhin):

  • Wenn ButtonAbspielen.Klick → TonAmsel.Abspielen
16

Zurück-Button programmieren

Der Zurück-Button soll den Nutzer zurück zur Startseite (Screen1) bringen. Wechsle in die Blöcke-Ansicht von ScreenAmsel.

Klicke links auf ButtonZurueck und ziehe den „wenn ButtonZurueck.Klick"-Block in die Arbeitsfläche.

Jetzt brauchst du einen Block aus Eingebaut → Steuerung (Built-in → Control):

Ziehe den Block „schließe Anwendung"... Moment – das ist der falsche! Du willst nicht die App schließen, sondern zurück zum vorherigen Screen.

Der richtige Block heißt: „schließe Screen" (close screen). Er bringt den Nutzer automatisch zum vorherigen Screen zurück.

schließe Screen Block
„schließe Screen" bringt den Nutzer zurück zur Startseite
17

Screen1 als Startseite gestalten

Wechsle zu Screen1. Lösche alle Bausteine, die noch von vorhin dort sind (falls vorhanden). Screen1 wird zur Startseite.

Füge folgende Elemente ein:

  • Eine Bezeichnung ganz oben: Text 🐦 Vogelstimmen, Größe 28, fett, zentriert
  • Einen Button für die Amsel: Text Amsel, umbenennen zu ButtonAmsel

Stelle beim Button auch ein:

  • Breite: Fülle alles (Fill parent)
  • Schriftgröße: 20
  • Hintergrundfarbe: z.B. grünes Naturgrün
Screen1 als Startseite mit Amsel-Button
Die Startseite mit dem ersten Vogel-Button
18

Zum Amsel-Screen navigieren

Wechsle in die Blöcke-Ansicht von Screen1.

Klicke links auf ButtonAmsel und ziehe den „wenn ButtonAmsel.Klick"-Block in die Arbeitsfläche.

Den Navigationsblock findest du unter Eingebaut → Steuerung:

Ziehe den Block „öffne anderen Screen: ScreenName" in den Klick-Block.

Klicke auf das weiße Eingabefeld des Blocks und schreibe: ScreenAmsel

öffne anderen Screen Block
Navigation: Button → öffne ScreenAmsel
🎯 Jetzt du: Tippe auf deinem Handy auf den „Amsel"-Button. Du solltest jetzt zum Amsel-Screen wechseln und den Gesang abspielen können. Mit „← Zurück" kommst du wieder auf die Startseite!

✅ Tages-Checkliste: Das hast du heute geschafft

🚀 Bonus: Zweiten Vogel hinzufügen

Fertig und noch Zeit? Füge die Blaumeise hinzu – genauso wie die Amsel:

  1. Neuen Screen ScreenBlaumeise anlegen
  2. blaumeise.jpg und blaumeise.mp3 hochladen
  3. Auf ScreenBlaumeise: Foto, Name „Blaumeise", Abspielen-Button, Ton-Komponente, Zurück-Button
  4. Auf Screen1: Neuen Button ButtonBlaumeise hinzufügen
  5. Programmierung: ButtonBlaumeise → öffne ScreenBlaumeise
📅 Tag 2 – Vorschau: Du fügst alle 9 Vögel hinzu (Amsel, Blaumeise, Buchfink, Kohlmeise, Mönchsgrasmücke, Rotkehlchen, Singdrossel, Zaunkönig, Zilpzalp) und verschönerst das Design deiner App.
✕