Mit dem App Inventor eigene Anwendungen entwickeln

Wer gerne einmal den Versuch starten möchte, eigene Apps zu entwicklen, sich aber wegen der Komplexität der zugrunde liegenden Programmiersprache nicht getraut hat, dem hilft App Inventor weiter.

Kommt Ihnen das bekannt vor? Sie haben eine tolle Idee für eine Smartphone-App und möchten sie am liebsten gleich programmieren, haben aber wenig Zeit oder keine Programmierkenntnisse? Dann ist der App Inventor [1] möglicherweise genau das Richtige für Sie. Der Artikel gibt Aufschluß darüber, wie Sie mit wenigen Klicks und Drag&Drop-Aktionen Ihre erste Android-Anwendung erstellen.

Was ist App Inventor?

In der Hoffnung, mehr Menschen zum Erstellen eigener Apps zu motivieren, entwickelte das Massachusetts Institut of Technology (MIT) gemeinsam mit Google den App Inventor. Mittlerweile führt das MIT das Projekt in alleiniger Verantwortung weiter. Das Programm steht jedem Interessenten in einer Beta-Version zur freien Verfügung, die schon jetzt einen beachtlichen Funktionsumfang aufweist und ständig verbessert wird.

Der App Inventor erleichtert das Programmieren, da er auf einer völlig anderen Abstraktionsebene arbeitet. Sie setzen die benötigten Anweisungen wie ein Puzzle zusammensetzen, und müssen nicht erst aufwendig alle Befehle eintippen. Durch dieses System vermeiden Sie auch lästige Tippfehler, die Programmierer gerne zur Verzweiflung treiben. Trotz der Einfachheit bietet das Tool Möglichkeiten für anspruchsvollere Ergebnisse. Daher eignet er sich sowohl für Anfänger ohne Vorkenntnisse als auch für Fortgeschrittene.

Einen Teil seines Dienstes stellt das Projekt webbasiert zur Verfügung, weswegen Sie als Systemvoraussetzung einen aktuellen Browser nutzen sollten. Unterstützte Web-Browser sind neben Google Chrome ab Version 4 auch Mozilla Firefox ab 3.6, Internet Explorer 7 und höher, sowie Apple Safari 5+. Der andere Teil basiert auf Java, weswegen Sie die entsprechende Laufgzeitumgebung benötigen, um ihn zu starten. Um den App Inventor zu nutzen, benötigen Sie darüber hinaus ein Google-Konto.

Um die Web-App zu starten, öffnen Sie im Browser die Projektseite [2], worauf zunächst eine Authentisierungsabfrage erscheint. Danach öffnet der Inventor eine Maske, auf der Sie ein neues Projekt anlegen. Bei späteren Logins sehen Sie hier alle Ihre bisher angelegten Projekte. Dieses Tutorial verwendet als Appnamen "SprechenderRoboter", was auf den Anwendungszweck der App hinweist, nämlich einen sprechenden Roboter zu erzeugen.

Bevor Sie Ihre erste Anwendung erstellen, sollten Sie noch etwas über die Struktur von App Inventor erfahren. Für die App-Entwicklung stellt Ihnen das Programm zur Gestaltung und die Programmlogik jeweils eine eigene Arbeitsumgebung bereit. Zunächst öffnet sich automatisch der Design Editor. Hier gestalten Sie das Layout Ihrer App und fügen wesentliche Elemente wie Schaltknöpfe, Eingabefelder, Mediendateien und Hardware-Komponenten hinzu.

Damit Ihre Anwendung später auch das tut, was Sie soll, müssen die Anweisungen in einem weiteren Schritt miteinander verbunden werden. Dafür öffnen Sie den Blocks Editor. Hier legen Sie nun die Programmlogik fest, das heißt sie verbinden die festgelegten Elemente miteinander, ohne diese erst aufwendig zu programmieren. Die einzelnen Programmierblöcke enthalten bereits die Programmbefehle. Mit dem App Inventor verknüpfen Sie diese Programmierblöcke wie Puzzle-Teile miteinander. Sie können nur zueinander passende Blöcke zusammenfügen. Erst wenn das Puzzle vollständig ist, läuft die Anwendung.

Der Design Editor

In der ersten Übung erstellen Sie eine Anwendung mit einem Roboter, der sich beschwert, sobald man ihn berührt. Dafür benötigen Sie nur drei Grundelemente: ein Schaltknopf zum Drücken mit dem Bild des Roboters, die Sounddatei mit der Beschwerde und ein Labelfeld. Diese finden Sie in der Palette links in den Kategorien Basic und Media. Ziehen Sie nacheinander die Bestandteile Label, Button und Sound in den Viewer.

Unsichtbare Elemente (non-visible components), im Beispiel Sound, ordnet die Software unter dem Hauptfenster an. Vergessen sollten Sie diese trotzdem nicht, da Sie später nur Elemente miteinander verknüpfen können, die Sie zuvor in den Viewer geschoben haben. Das Label und der Button reihen sich im Vorschaubild automatisch untereinander an. Die Reihenfolge ändern Sie, indem Sie die Elemente via Drag&Drop verschieben.

Rechts neben dem Viewer sehen Sie das Feld Components. Bisher lautet der automatische Titel der Anwendung "Screen1". Das ändern Sie, indem Sie unter Properties (Einstellungen) einen neuen Titel eingeben und Enter drücken.

Nach Auswahl der gewünschten Elemente gilt es, diese mit Inhalt zu füllen. Dafür wählen Sie in Components das jeweilige Element aus, und bearbeiten die Einstellungen in den Properties rechts daneben. Im Label-Feld schreiben Sie die Anweisung "Bitte den Roboter nicht anfassen". Falls der Text nicht in das Labelfeld passt, stellen Sie in den Properties unter Width die Einstellung Fill parent? für die ganze Zeile ein. Die Ausrichtung legen Sie bei TextAlignment fest. Wenn Sie den Text zentrieren möchten, wählen Sie center aus.

Der wesentliche Bestandteil der Übung besteht darin, die Aktionen miteinander zu verknüpfen. Da nur Buttons angeklickt werden können, benötigen Sie einen solchen mit dem Bild des Roboters und einem Text.

Klicken Sie auf Image und wählen Sie die gewünschte Bilddatei, in unserem Fall wuetender_roboter.png. Geben Sie einen treffenden Text für den Button ein, damit die Nutzer wissen, was sie zu tun haben. Zum Schluss benötigen Sie noch die entsprechende Sounddatei, idealerweise im WAV-Format.

Speziell bei umfangreichen Projekten empfiehlt es sich, jedem Element einen eindeutigen Namen zu geben. Die Eingabe von Sonder- und Leerzeichen erlaubt das Tool nicht. Label1 benennen Sie um in Nicht_anfassen", Button1 in "Roboter" und Sound1 in "Beschwerde".

Der Button Rename unter der Rubrik Components erlaubt es Ihnen, Elemente umzubenennen. Damit die App funktioniert, müssen Sie die einzelnen Komponenten miteinander verbinden. Daher geht es nun im zweiten Schritt darum, die Programmlogik festlegen. Was es mit der Rubrik LEGO® MINDSTORMS® auf sich hat, erklärt der Kasten "Lego-Roboter".

Der Blocks Editor

Mit einem Klick auf die Schaltfläche Open the Blocks Editor oben rechts starten Sie diesen. Wie eingangs erwähnt, benötigen Sie dafür eine aktuelle Java-Version. Sollte der Editor nicht automatisch hochfahren, laden Sie die JNLP-Datei herunter und starten Sie mit der Eingabe von javaws dateiname.jnlp im Terminal.

Im Blocks Editor rufen Sie unter My Blocks Ihre im Design Editor festgelegten Komponenten ab, und platzieren Sie per Drag &Drop auf der Arbeitsfläche. Das Objekt "Beschwerde" ist die Sounddatei, "Roboter" der Button mit dem Roboterbild und "Nicht_anfassen" der Beschreibungstext.

Sie möchten, dass sich der Roboter beschwert, sobald ihn jemand berührt. Dafür benötigen Sie die entsprechende Programmieranweisung. Diese lautet: Wenn der Roboter berührt wird, erklingt eine Sounddatei mit seiner Beschwerde. Etwas kürzer gefasst und ins Englische übersetzt, haben Sie den Programmbefehl:

When Roboter (=Button1) is clicked, do play Beschwerde (=Sound1).

Wählen Sie das Puzzleteil Roboter.Click aus. Dies bedeutet, dass der Button mit dem Roboter gedrückt wird, damit etwas passiert. Alternativ wählen Sie Roboter.GotFocus, wenn sich der Roboter schon beim Darüberwischen beschweren soll. Ziehen Sie den Baustein mit der Anweisung dann mit gedrückter Maustaste in den Arbeitsbereich.

Sie haben nun den ersten Baustein der Programmieranweisung gesetzt. Sobald der Button mit dem Roboter gedrückt wird, soll etwas passieren. Was das ist, legen Sie nun in einem zweiten Schritt fest. Dafür öffnen Sie links das Feld Beschwerde und erhalten eine Reihe von Möglichkeiten, den Sound in Ihre Anwendung zu integrieren. Ziehen Sie die Anweisung Beschwerde.Play direkt in den ersten Baustein.

Wegen der Übersichtlichkeit besitzen die einzelnen Programmierbausteine unterschiedliche Farbtöne. Anweisungsblöcke wie When Roboter.Click do sind grün, während Ausführungsblöcke wie call Beschwerde.Play dagegen fliederfarben.

Icons erstellen

Damit Sie die Anwendung auf Ihrem Gerät wiederfinden, erstellen Sie nun noch ein Icon. Verzichten Sie darauf, verwendet der App Inventor automatisch ein Standardbild. Gehen Sie zurück in den Design Editor und wählen Screen1 aus. Beachten Sie bei den Grafiken, dass die Auflösung sehr gering ist (im Idealfall 48×48 Pixel). Unterstützt werden die Bildformate JPG oder PNG. Falls Sie mit dem Gedanken spielen, Ihre Anwendung im Google Playstore anzubieten, sollten Sie sich bei der Gestaltung des Icons besondere Mühe zu geben, damit sich die App von der Masse abhebt und professionell wirkt.

Anwendungen speichern

Da APK-Dateien aus einem Bündel mehrerer Dateien bestehen, müssen Sie diese erst zusammenfassen. Dafür klicken Sie rechts oben auf Package for Phone, worauf drei Alternativen erscheinen. Download to this Computer generiert aus dem Projekt eine APK-Datei und lädt sie auf Ihren Rechner herunter. Download to connected Phone tut das gleiche, pusht die App aber direkt auf Ihr Smartphone. Show Barcode erzeugt einen Barcode, den Sie mit dem gewünschten Gerät einlesen und damit den Downlod starten.

Fazit

Der App Inventor bietet Anfängern und Fortgeschrittenen viele Möglichkeiten, um unkompliziert und schnell eigene Anwendungen zu entwickeln. Obwohl sich das Projekt noch in der Betaphase befindet, ist es bereits jetzt sehr umfangreich und enthält viele spezielle Komponenten, um auch anspruchsvollere Apps zu entwickeln. Aufgrund der Einfachheit hat der App Inventor allerdings seine Grenzen. Einige, spezielle Programmieranweisungen sind zumindest derzeit noch nicht möglich. Zu kritisieren bleibt auch, dass der App Inventor manchmal sehr langsam reagiert und die generierten Apps nicht auf allen Android-Smartphones gleichermaßen gut funktionieren. Erfreulicherweise behebt das Projekt solche Fehler aber relativ zügig und fügt immer wieder neue Komponenten ein.