Das schaffst du heute
Du meldest dich bei MIT App Inventor an, verbindest dein Handy und baust den ersten Screen einer Vokabel-App: Eine Vokabel erscheint – per Knopfdruck siehst du die Übersetzung.
📋 Das brauchst du heute
- Ein Gerät mit Google Chrome (Laptop oder Schulrechner)
- Ein Google-Konto (oder eine E-Mail-Adresse zum Registrieren)
- Ein Android-Handy (oder iPhone – dann über den Emulator)
- Die MIT AI2 Companion App (kostenlos im Play Store)
Kein Google-Konto? Kein Problem – du kannst dir hier kostenlos eines anlegen: accounts.google.com/signup. Du brauchst dafür keine Handynummer.
1
Anmelden & einrichten
Stunde 1 · ca. 45 min
Bevor wir programmieren können, richten wir alles ein. Das dauert ca. 10 Minuten und musst du nur einmal machen.
🌐 Schritt 1: Anmelden bei MIT App Inventor
1
Chrome öffnen und Adresse eingeben
Öffne Google Chrome und gib ein:
Du landest direkt auf der Google-Anmeldeseite.
ai2.appinventor.mit.eduDu landest direkt auf der Google-Anmeldeseite.
2
E-Mail-Adresse eingeben
Gib deine Google-E-Mail-Adresse ein →
Weiter. Kein Google-Konto? → Konto erstellen (unten links).
Diese Seite erscheint direkt beim Öffnen von ai2.appinventor.mit.edu
3
Passwort eingeben → anmelden
Passwort eingeben →
Weiter. Wenn App Inventor nach Berechtigungen fragt → Zulassen.
So sieht es nach der Anmeldung aus – klicke auf „Close" um zu starten
Angemeldet! Klicke auf
Close um den Willkommens-Dialog zu schließen.🌍 Schritt 2: Sprache auf Deutsch umstellen
1
Sprache wählen
Oben rechts siehst du
English. Klicke darauf und wähle Deutsch – die gesamte Oberfläche wechselt sofort auf Deutsch.
Klicke auf „English" oben rechts → „Deutsch" wählen
📱 Schritt 3: MIT AI2 Companion App installieren
Mit dieser App siehst du deine App in Echtzeit auf dem Handy – jede Änderung im Browser erscheint sofort auf dem Display.
1
Google Play Store öffnen
Öffne auf deinem Android-Handy den Google Play Store.
2
„MIT AI2 Companion" suchen und installieren
Tippe in die Suchleiste:
MIT AI2 Companion. Installiere die App (kostenlos, von MIT App Inventor). Achte auf das orangene Roboter-Logo.App installiert? Dann komm weiter zu Schritt 3.
🔗 Schritt 3: Live-Verbindung herstellen
Was ist eine Live-Verbindung? Dein Handy wird mit dem Browser verbunden. Alles, was du im Browser änderst, erscheint sofort auf dem Handy – ohne App neu starten zu müssen. Das ist wie ein Live-Vorschaufenster.
1
Neues Projekt anlegen
Klicke in App Inventor auf
+ New project (oben links). Gib als Projektname ein: VokabelApp (kein Leerzeichen!). Klicke auf OK.
Gib „VokabelApp" als Projektname ein – dann OK klicken
2
AI Companion verbinden
Oben in der Menüleiste: Klicke auf
Verbinden → dann auf AI Companion (grün hervorgehoben). Es erscheint ein QR-Code auf dem Bildschirm.
Klicke auf „Verbinden" → dann „AI Companion" – der QR-Code erscheint
3
QR-Code mit dem Handy scannen
Öffne die MIT AI2 Companion App auf dem Handy. Tippe auf
Scan QR Code und halte das Handy vor den Bildschirm.Verbindung hergestellt! Auf dem Handy erscheint ein weißer leerer Screen – das ist deine App! Jetzt kannst du im Browser bauen und siehst das Ergebnis live auf dem Handy.
So sieht es auf dem Handy aus – Verbindung erfolgreich!
✅ Einrichtung abgehakt?
- Ich bin bei MIT App Inventor angemeldet
- MIT AI2 Companion App ist auf meinem Handy installiert
- Verbindung zwischen Handy und Browser klappt (weißer Screen auf dem Handy)
- Projekt „VokabelApp" ist angelegt
Jetzt du! – Aufgabe Stunde 1
Melde dich bei MIT App Inventor an und stelle die Live-Verbindung zu deinem Handy her. Erst wenn der weiße Screen auf dem Handy erscheint, bist du fertig mit dieser Aufgabe.
Hast du Probleme? Frage zuerst deine Sitznachbarin oder deinen Sitznachbar – oder nutze claude.ai und beschreibe das Problem.
2
Designer: Oberfläche bauen
Stunde 2 · ca. 45 min
Designer vs. Blöcke: App Inventor hat zwei Ansichten. Im Designer baust du das Aussehen deiner App – wie sie auf dem Handy aussieht (welche Texte, Knöpfe und Bilder zu sehen sind). In der Blöcke-Ansicht legst du fest, was passiert, wenn jemand auf einen Knopf tippt (wie Puzzle-Teile zusammenstecken). Oben rechts im Browser kannst du jederzeit zwischen beiden Ansichten wechseln.
Oben rechts siehst du die zwei Schaltflächen: Designer (Aussehen) und Blöcke (Programmierung) – hier kannst du jederzeit wechseln
Die Benutzeroberfläche von App Inventor: Links die Bausteine, in der Mitte die App-Vorschau, rechts die Eigenschaften
🏗️ Schritt 1: Beschriftungsfeld für die Vokabel
Was ist ein Beschriftungsfeld? Ein Beschriftungsfeld (in App Inventor:
Bezeichnung) ist ein Bereich auf dem Bildschirm, der einen Text anzeigt – zum Beispiel eine Vokabel. Du kannst Schriftgröße, Farbe und Ausrichtung anpassen. Der Nutzer kann den Text nicht direkt anklicken oder verändern, er wird nur angezeigt.
1
Beschriftungsfeld aus der Palette ziehen
Links siehst du die Bausteine (die Benutzeroberfläche deiner App). Scrolle zum Abschnitt
Hinweis: App Inventor nennt dieses Element auf Englisch „Label" und auf Deutsch „Bezeichnung". Gemeint ist immer das gleiche: ein Feld, das einen Text anzeigt.
Benutzerschnittstelle – dort findest du alle sichtbaren Elemente. Klicke auf Bezeichnung und ziehe es in die Mitte auf den Screen. Es erscheint ein Textfeld auf deiner App-Vorschau.Hinweis: App Inventor nennt dieses Element auf Englisch „Label" und auf Deutsch „Bezeichnung". Gemeint ist immer das gleiche: ein Feld, das einen Text anzeigt.
Ziehe das Element Bezeichnung aus der linken Bausteinliste in die Mitte – es erscheint als Textfeld in der App-Vorschau
2
Eigenschaften rechts anpassen
Klicke auf das Beschriftungsfeld in der App-Vorschau. Rechts erscheinen seine Eigenschaften. Ändere:
•
•
•
•
Text → cat•
SchriftGröße → 36•
TextAusrichtung → Mitte
So sieht der Eigenschaften-Bereich rechts aus – trage die Werte genau so ein
3
Umbenennen (wichtig!)
Unten links im Bereich „Komponenten": klicke auf
Bezeichnung1 und dann auf Umbenennen. Gib den neuen Namen ein: LabelVokabel.
Der Umbenennen-Dialog – gib als neuen Namen LabelVokabel ein, dann OK
Warum umbenennen? Wenn du später 10 Beschriftungsfelder hast, weißt du bei „Bezeichnung1, Bezeichnung2, Bezeichnung3..." nicht mehr, welches welche Aufgabe hat. Mit sprechenden Namen wie „LabelVokabel" und „LabelUebersetzung" findest du alles sofort wieder.
🔘 Schritt 2: Button „Lösung zeigen"
1
Button hinzufügen
In den Bausteinen:
Benutzerschnittstelle → Button unter das Beschriftungsfeld ziehen. Text = Lösung zeigen. Umbenennen: ButtonLoesung.🏷️ Schritt 3: Beschriftungsfeld für die Übersetzung
1
Zweites Beschriftungsfeld hinzufügen
Ein weiteres
Bezeichnung-Element unter den Button ziehen. Text = Katze, SchriftGröße = 28. Umbenennen: LabelUebersetzung.2
Unsichtbar machen
Rechts unter Eigenschaften:
Sichtbar → Häkchen entfernen. Die Übersetzung soll erst erscheinen, wenn der Button gedrückt wird.Live-Vorschau: Alles, was du im Designer änderst, erscheint sofort auf deinem Handy. Schau ab und zu aufs Handy – so siehst du, wie deine App wirklich aussieht!
So sieht dein Designer aus, wenn du LabelVokabel und ButtonLoesung angelegt hast – auf dem Handy erscheint die Vokabel sofort
✅ Checkliste Stunde 2
- Beschriftungsfeld „LabelVokabel" mit Text „cat" ist angelegt
- Button „ButtonLoesung" mit Text „Lösung zeigen" ist da
- Beschriftungsfeld „LabelUebersetzung" ist angelegt und unsichtbar
- Alle drei Elemente sind korrekt umbenannt
Jetzt du! – Aufgabe Stunde 2
Baue die Benutzeroberfläche deiner Vokabel-App im Designer. Du brauchst:
- Ein Beschriftungsfeld für die Vokabel (groß, zentriert) – in App Inventor:
Bezeichnung - Einen Button „Lösung zeigen" – in App Inventor:
Button - Ein Beschriftungsfeld für die Übersetzung (zunächst unsichtbar)
Bonus: Ändere die Hintergrundfarbe der App. Klicke dazu auf Screen1 und ändere HintergrundFarbe rechts in den Eigenschaften.
3
Blocks: Lösung sichtbar machen
Stunde 3 · ca. 45 min
Was sind Blöcke? In App Inventor programmierst du nicht mit Text, sondern mit farbigen Puzzle-Blöcken. Jeder Block steht für eine Aktion oder eine Bedingung. Du steckst sie zusammen – der Computer führt sie dann aus. Das Prinzip: „Wenn [Ereignis] passiert → dann [Aktion] ausführen."
🔀 Schritt 1: In die Blöcke-Ansicht wechseln
1
Blöcke oben rechts klicken
Klicke oben rechts im Browser auf den Button
Blöcke. Die Ansicht wechselt – du siehst jetzt eine helle Arbeitsfläche mit einer Seitenleiste links.
Oben rechts im Browser: Klicke auf Blöcke – die Ansicht wechselt zur Programmierseite
🧩 Schritt 2: Button-Klick programmieren
1
ButtonAbspielen aufklappen
Scrolle in der linken Seitenleiste nach unten bis zu ButtonAbspielen und klicke darauf. Es erscheinen alle Blöcke, die zu diesem Button gehören. Ziehe den Block
wenn ButtonAbspielen.Klick auf die Arbeitsfläche.
Klicke links auf ButtonAbspielen – es erscheinen alle Blöcke für diesen Button
Ereignis und Aktion: „Wenn der Button angeklickt wird" ist das Ereignis. Was innerhalb des Blocks passiert, ist die Aktion. Alles, was du in den Block hineinziehst, wird ausgeführt, wenn jemand den Button antippt.
🔊 Schritt 3: Button „Abspielen" einfügen
1
TonAmsel.Wiedergeben einbauen
Klicke links auf TonAmsel – es erscheinen alle Ton-Blöcke. Ziehe den Block
aufrufen TonAmsel.Wiedergeben in den wenn ButtonAbspielen.Klick-Block hinein. Jetzt spielt die App den Amsel-Ton ab, wenn der Button gedrückt wird.
Ziehe aufrufen TonAmsel.Wiedergeben in den Klick-Block – so wird der Ton beim Tippen abgespielt
2
Testen!
Tippe auf deinem Handy auf den „Abspielen"-Button. Hörst du die Amsel? Dann klappt es! 🎉
Kein Ton? Überprüfe: Ist
aufrufen TonAmsel.Wiedergeben wirklich im Klick-Block eingerastet (und nicht daneben)? Und heißt die Ton-Komponente wirklich TonAmsel? Frage auch gerne claude.ai: „Mein Ton-Block in MIT App Inventor spielt nichts ab, was kann ich prüfen?"✅ Checkliste Stunde 3
- Ich habe in die Blöcke-Ansicht gewechselt
- Der „wenn ButtonAbspielen.Klick"-Block ist auf der Arbeitsfläche
- „aufrufen TonAmsel.Wiedergeben" ist in den Klick-Block eingehängt
- Test auf dem Handy: Amsel-Ton spielt beim Tippen ✓
Jetzt du! – Aufgabe Stunde 3
Baue den Block so, dass beim Tippen auf den Button die Amsel-Stimme abgespielt wird. Teste es auf dem Handy.
Bonus: Kannst du auch einen zweiten Block bauen, der den Ton stoppt, wenn man nochmal tippt? Tipp: Nutze aufrufen TonAmsel.Stopp aus den TonAmsel-Blöcken.
4
Viele Vokabeln mit Listen & Zufall
Stunde 4 · ca. 45 min
Was ist eine Liste? Eine Liste ist wie eine nummerierte Einkaufsliste – nur für die App. Du kannst viele Vokabeln darin speichern und die App zieht zufällig eine heraus. So wird die App jedes Mal anders.
📝 Schritt 1: Variable mit Vokabeln anlegen
1
Variable anlegen
In Blöcke:
Eingebaut → Variablen → Initialisiere globale name mit. Benenne sie: vokabeln.2
Liste mit Vokabelpaaren aufbauen
Unter
Eingebaut → Listen → erstelle Liste. Jedes Paar ist selbst eine kleine Liste: ["cat", "Katze"]. Füge mindestens 5 Paare hinzu.Screenshot: Vokabelliste als verschachtelte Liste
Jedes Paar ist eine kleine Liste [Fremdwort, Übersetzung]
🔀 Schritt 2: Prozedur „NeueVokabel"
Was ist eine Prozedur? Eine Prozedur ist ein Block, der mehrere Aktionen zusammenfasst. Du kannst sie überall im Programm aufrufen – wie ein Knopf, der einen ganzen Ablauf startet. Das spart viel Zeit und Arbeit.
1
Prozedur anlegen
Eingebaut → Prozeduren → zu Prozedur. Name: NeueVokabel.2
Zufällige Vokabel auswählen
Innerhalb der Prozedur: Variable index =
random integer from 1 to length of list vokabeln. Dann: LabelVokabel.Text = Eintrag 1 des gewählten Paares, LabelUebersetzung.Text = Eintrag 2, LabelUebersetzung.Visible = false.3
Prozedur beim Start aufrufen
Block:
Screen1.Initialize → call NeueVokabel. Auch im Button-Click-Block am Ende: call NeueVokabel – so kommt automatisch die nächste Vokabel.KI-Tipp: Frage Claude: „Was ist eine Prozedur beim Programmieren und warum ist sie nützlich? Erkläre es mit einem Beispiel aus dem Alltag."
✅ Checkliste Stunde 4
- Variable „vokabeln" mit mindestens 5 Paaren angelegt
- Prozedur „NeueVokabel" ist programmiert
- Beim Starten der App erscheint eine zufällige Vokabel
- Nach dem Klick kommt automatisch die nächste Vokabel
Jetzt du! – Aufgabe Stunde 4
Erweitere die App auf mindestens 10 Vokabeln. Nutze echte Vokabeln aus deinem Englisch- oder einem anderen Fremdsprachen-Unterricht. Teste die App auf dem Handy.
5
Zeigen & Rückblick
Stunde 5 · ca. 45 min
Jetzt zeigt jede/r kurz, was heute entstanden ist. Das ist keine Prüfung – es geht darum, voneinander zu lernen.
Aufgabe Stunde 5: App vorstellen
Zeige deine App kurz der Klasse oder deiner Sitznachbarin / deinem Sitznachbar. Beantworte dabei diese drei Fragen:
- Was kann deine App bisher?
- Was war heute am schwierigsten?
- Was willst du morgen als Erstes hinzufügen?
Ausblick Tag 2: Morgen baust du eine Texteingabe ein – die Schülerinnen und Schüler tippen die Antwort selbst ein, und die App prüft ob sie richtig ist. Außerdem zählen wir Punkte und speichern den Highscore dauerhaft.
✅ Tages-Checkliste
- Ich bin bei App Inventor angemeldet und die Verbindung klappt
- Meine App zeigt eine Vokabel an
- Bei Klick erscheint die Übersetzung
- Mehrere Vokabeln sind eingebaut (Zufallsauswahl)
- Ich habe meine App der Klasse oder jemand anderem gezeigt