Kennenlernen des MIT App Inventors

Der MIT App Inventor ist eine Browseranwendung, die es dir ermöglicht, auf einfache und auch für Anfänger verständliche Art und Weise eine Smartphone-App zu entwickeln.

Um den MIT App Inventor nutzen zu können, benötigst du lediglich ein Google-Konto, welches, genauso wie der App Inventor selbst, kostenlos ist. Wenn du dich angemeldet hast, kannst du dir ein neues Projekt erstellen und landest direkt in der Entwicklungsumgebung. Dort hast du zwei Ansichten, welche du in der oberen rechten Ecke deines Browsers wechseln kannst.

_{Abbildung: Anzeige des aktiven Modus im MIT App Inventors}
^{Quelle: MIT App Inventor}

Der Designer-Modus ist dafür gedacht, die grafische Oberfläche deiner App zu gestalten. Dort kannst du per "Drag and Drop" aus der "Palette" an der linken Bildschirmseite verschiedenste Dinge auf das in der Bildschirmmitte im "Betrachter" abgebildete Gerät ziehen. Der Reiter "Komponenten" gibt dir einen Überblick welche Komponenten sich in welchem Screen in welcher Reihenfolge befinden. Der Reiter "Eigenschaften" macht es dir möglich die Eigenschaften einer ausgewählten Komponente zu bearbeiten. In dem Reiter "Medien" befinden sich logischerweise sämtliche von dir eingefügte und hochgeladene Medien, wie beispielsweise Hintergrundbilder.

_{Abbildung: Designer-Ansicht im MIT App Inventor}
^{Quelle: MIT App Inventor}

Wie bereits indirekt angesprochen, kannst du hier auch mehrere "Screens" erstellen. Wir werden die App zwar so gestalten, dass es wirkt als hätte sie mehrere "Screens", was in Wahrheit aber nicht der Fall ist, da es bei einem "Screenwechsel" zu Schwierigkeiten mit der Bluetoothverbindung kommt. Stattdessen werden wir einfach mehrere Blockstrukturen übereinander legen und die nicht benötigten "Screens" unsichtbar schalten.

In der Blöcke-Ansicht kannst du, nachdem du die Struktur und das Design deiner App vervollständigt hast, die Funktion implementieren. Dies funktioniert ebenfalls per "Drag and Drop"-Programmierung, indem du Blöcke einer Komponente aus dem Reiter "Blöcke" in den Reiter "Betrachter" ziehst und diese dort so kombinierst, dass sich die gewünschte Funktion ergibt. Auch hier hast du wieder die Möglichkeit über den Reiter "Medien" von dir hochgeladenen Medien in das Programm einzubinden. Das Programmieren ist dabei sehr intuitiv und einfach zu lernen.

_{Abbildung: Blöcke-Ansicht im MIT App Inventor}
^{Quelle: MIT App Inventor}

Abschließend wollen wir dir noch ein interessantes Feature des MIT App Inventors ans Herz legen. In der Obersten Zeile der Browseroberfläche befindet sich der Reiter "Verbinden". Wenn du dann den "AI Companion" anklickst öffnet sich das unten dargestellte Fenster mit einem Zeichencode und einem QR-Code. Wenn du dir auf deinem Smartphone nun die App "MIT AI2 Companion" installierst, kannst du einen der beiden Codes eingeben/einscannen und dein Handy verbindet sich mit dem MIT App Inventor. Die App wird dann im Prinzip auf dein Handy "gestreamt" und du hast die Möglichkeit in Echtzeit zu prüfen, ob das grafische Design und die implementierte Funktion passen. Änderungen die du dann im dann im Browser vornimmst werden gleichzeitig auch auf dem Smartphone angezeigt. Dies spart dir eine Menge Zeit und ermöglicht dir eine sehr dynamische Arbeitsweise. Alternativ funktionieren auch ein Emulator oder eine direkte Verbindung über ein USB-Kabel. Ohne diese Optionen, müsstest du deine App für jeden Testlauf neu auf dem Handy installieren, was ein langwierigerer Prozess ist, der dich viel Zeit kosten würde.

_{Abbildung: Pfad zum Verbinden mit dem AI Companion}
^{Quelle: MIT App Inventor}

_{Abbildung: Codes zum Verbinden mit dem AI Companion}
^{Quelle: MIT App Inventor}

In den folgenden drei Abschnitten werden wir dir zeigen, wie du eine ordentliche grafische Oberfläche in der Designer-Ansicht erstellst und deren Funktion implementierst. Dabei werden wir am Beispiel des Verbindungsscreens erklären, wie du dich in der Design-Ansicht zurechtfindest. Für den Steuerungsscreen und den Abfragescreen werden wir dir lediglich einen Vorschlag für ein mögliches Design machen und dir verraten, welche Komponenten wir verwendet haben. Die Entwicklung des Designs dieser beiden Screens kannst du frei gestalten. Denn Programmcode werden wir nach der Besprechung der grafischen Oberflächen aber vollständig mit dir zusammen durchgehen.