Das Werkzeug
Was ist App Inventor?
Um zu verstehen, warum App Inventor die Sache so einfach macht, lohnt sich zuerst der Blick auf den klassischen Weg, eine Android-App zu bauen — und wie viel davon hier wegfällt.
Der klassische Weg — und die Abkürzung
Normalerweise braucht eine eigene App mehrere Hürden, bevor überhaupt die erste Zeile Programmlogik entsteht:
Entwicklungsumgebungz. B. Android Studio installieren
→
Sprache lernenz. B. Java oder Kotlin
→
Werkzeuge verbindenBuild-System, Emulator, SDK
→
Erste Appoft erst nach Wochen
App Inventor überspringt die ersten drei Schritte komplett. Man arbeitet direkt in einer fertigen Umgebung im Browser, die im Hintergrund alles Nötige selbst erledigt:
Browser öffnenai2.appinventor.mit.edu
→
Sofort bauenKomponenten + Blocks
Was passiert im Hintergrund?
Das ist kein Trick — im Hintergrund läuft eine ganz reale technische Kette, die euch die ganze Handarbeit abnimmt:
Ihr steckt Blocks zusammen
Die Blocks-Oberfläche basiert auf Blockly, einer JavaScript-Bibliothek von Google, die auch Scratch-ähnliche Sprachen antreibt.
Übersetzung in YAIL
Eure Blocks werden in YAIL übersetzt — eine Zwischensprache, die auf Scheme basiert (einem funktionalen Lisp-Dialekt).
Kompilierung mit Kawa
Kawa übersetzt den YAIL/Scheme-Code in echten Java-Bytecode — dieselbe Zwischenstufe, die auch „klassisch" programmierte Android-Apps durchlaufen.
Fertige Android-App
Der übliche Android-Werkzeugkasten macht daraus eine ganz normale .apk-Datei — installierbar auf jedem Android-Gerät.
💡
Ihr programmiert also nicht „weniger echt" als mit Java — ihr beschreibt dasselbe Ziel nur auf einer visuellen statt textuellen Ebene. Die Blocks sind letztlich eine andere Schreibweise für Programmlogik, keine Simulation davon.
Designer und Blocks Editor
App Inventor hat zwei Hauptansichten, zwischen denen ihr ständig wechselt:
Designer — links die Palette mit allen Komponenten (Buttons, Labels, Sensoren, ...), in der Mitte der Viewer mit der Handy-Vorschau, rechts die Properties zum Einstellen von Farbe, Text, Größe usw.
Blocks Editor — hier entsteht die Logik: Jede Komponente aus dem Designer bringt eigene Blocks mit, dazu kommen eingebaute Blocks für Variablen, Kontrollstrukturen, Text, Listen usw.
Screenshots: MIT App Inventor — Hello Purr Tutorial, CC BY-SA 4.0.
📱
AI Companion: Während ihr baut, könnt ihr die App live auf eurem eigenen Handy testen — einfach einen QR-Code mit der Companion-App scannen, und jede Änderung erscheint sofort auf dem Handy. Kein Kompilieren, kein Warten.
Vorschau
Das Notenmerk-Projekt
Nach den ersten Einstiegsübungen bauen wir gemeinsam ein größeres, echtes Projekt: eine App zum Speichern und Ansehen eigener Noten. Man meldet sich mit Benutzername und Passwort an, wählt ein Fach und sieht alle eigenen Noten dazu — mit der Möglichkeit, eine neue Note einzutragen oder die zuletzt eingetragene wieder zu löschen.
Architektur — drei Schichten
Die App kann nicht direkt mit der Datenbank sprechen. Deshalb braucht es einen „Mittelsmann", der Anfragen entgegennimmt und weiterreicht — die Kommunikation läuft über http, genau wie beim Aufruf einer normalen Webseite.
App InventorWebConnector
→
PHPmysql_2026.php
→
MySQLDatenbank
Datenbank-Struktur
Vier Tabellen arbeiten zusammen. Beispieldaten hier frei erfunden.
Schüler
| student_id | first_name | last_name | tutor_group |
|---|
| 1 | Anna | Berger | 10A |
| 2 | Tom | Fischer | 10A |
| 3 | Lena | Wagner | 10B |
Logindaten
| login_id | student_id | user_name | pwd |
|---|
| 1 | 1 | anna.berger | •••• |
| 2 | 2 | tom.fischer | •••• |
| 3 | 3 | lena.wagner | •••• |
Fächer
| subject_id | description |
|---|
| 1 | Biologie |
| 2 | Chemie |
| 3 | Deutsch |
| 4 | Englisch |
Noten
| grade_id | student_id | subject_id | grade | date |
|---|
| 1 | 1 | 2 | 2 | 2026-09-12 |
| 2 | 1 | 2 | 3 | 2026-10-01 |
So sieht die App aus
Designansicht in App Inventor — wie wir das Schritt für Schritt selbst bauen, folgt in den kommenden Terminen.