1793397

Android-App entwickeln - Anleitung für Fortgeschrittene

09.11.2013 | 08:44 Uhr |

Mit dem Baukasten "App Inventor" können fortgeschrittene Anwender auch ohne echte Programmierkenntnisse eine Android-App entwickeln. Wie das funktioniert. lesen Sie hier.

Im Beitrag " Eigene Android-App erstellen - Anleitung für Einsteiger " haben wir Ihnen gezeigt, wie Sie sich komplett ohne Vorkenntnisse eine Android-App "zuammenklicken". Wenn Ihnen die Funktionen des vorgestellten App-Generators nicht weit genug gehen oder Sie kostenlos eine werbefreie App erstellen möchten, gibt es als Alternative den kostenlosen „App Inventor“.

Dabei handelt es sich ebenfalls um eine Art Baukasten-System, das aber deutlich komplexer ist. Ursprünglich wurde es von der Google-Forschungsabteilung entwickelt, inzwischen hat das MIT (Massachusetts Institute of Technology) die Weiterentwicklung übernommen. Richtige Programmierkenntnisse benötigen Sie auch für den App Inventor nicht. Aber Sie müssen sich neben dem Design zumindest mit der Ablauflogik der App auseinandersetzen. Sprich: Was soll die App wann anzeigen und auf welche Benutzereingaben soll sie wie reagieren.

Schritt 1: App-Inventor installieren

Beim App Inventor handelt es sich um einen App-Baukasten. Er erfordert etwas Einarbeitung und die Definition eines Programmablaufs. Dafür haben Sie damit viele Möglichkeiten.
Vergrößern Beim App Inventor handelt es sich um einen App-Baukasten. Er erfordert etwas Einarbeitung und die Definition eines Programmablaufs. Dafür haben Sie damit viele Möglichkeiten.

Der App Inventor ist eine Web-Anwendung, benötigt aber trotzdem einige lokal installierte Hilfsdateien. Diese erhalten Sie auf dieser Seite . Klicken Sie dort auf „Download the installer“. Außerdem muss das kostenlose Java Runtime Environment auf Ihrem System installiert sein. Last but not least benötigen Sie einen Google-Account, den Sie aber mit Sicherheit schon besitzen, sofern Sie ein Android-Gerät nutzen.

Schritt 2: App-Inventor starten

Rufen Sie http://beta.appinventor.mit.edu auf und melden Sie sich mit Ihrem Google-Konto an. Sie landen in Ihrer App-Projektliste, die naturgemäß erst einmal leer ist. Klicken Sie auf „New“, um ein neues Projekt anzulegen, und geben Sie einen Namen dafür ein. Er darf keine Leerzeichen enthalten. Das neue Projekt wird anschließend automatisch geöffnet.

Schritt 3: App-Inventor kennenlernen

Sie befinden sich nun im „Designer“- Modul des App Inventors. Links sehen Sie eine Liste mit Komponenten, die Sie der App hinzufügen können, in der Mitte einen simulierten Smartphone-Bildschirm, rechts daneben eine Liste der auf der aktuellen App-Seite verwendeten Komponenten und rechts die Eigenschaften der aktuell ausgewählten Komponente.

Wichtig ist außerdem der „Blocks Editor“, den Sie über die Schaltfläche „Open the Blocks Editor“ rechts oben öffnen. Dabei handelt es sich um eine Java-Anwendung. Je nach Browser erhalten Sie beim Klick auf die Schaltfläche einen Download- beziehungsweise Datei-öffnen-Dialog. Bestätigen Sie, dass Sie die Datei öffnen möchten und nicken Sie die den anschließenden Java-Sicherheitshinweis ab.

Im Blocks Editor legen Sie die eigentliche Funktionalität der App fest. Dazu stehen Prozeduren („Blocks“) zur Verfügung, die Sie aus dem linken Bereich in den Programm-Editor rechts ziehen und wie Puzzleteile miteinander verknüpfen. Im Bereich „Build-In“ finden Sie Prozeduren, die unabhängig und unter „My Blocks“ diejenigen, die abhängig von den im „Designer“ verwendeten Komponenten nutzbar sind. Unter „My Blocks“ und im Programm-Editor sind jeweils nur die Inhalte sichtbar, die sich auf die gerade im Designer ausgewählte App-Seite beziehen.

Im Folgenden erklären wir anhand eines Beispiels die Bedienung des App Inventors. Ziel ist es, eine App zu entwickeln, die eine Begrüßungsseite mit einem Bild, einem Textfeld und einer Schaltfläche enthält. Die Schaltfläche soll zu einer zweiten Seite führen, in die eine Audio-Datei eingebettet ist. Diese soll abgespielt werden, wenn man das Smartphone schüttelt. Außerdem soll das Gerät dann kurz vibrieren.

Schritt 4: Inhalte hinzufügen

Entwicklung einer Beispiel-App: Sie enthält auf der ersten Seite ein Bild, ein Textfeld und einen Button, der zur nächsten Seite führt.
Vergrößern Entwicklung einer Beispiel-App: Sie enthält auf der ersten Seite ein Bild, ein Textfeld und einen Button, der zur nächsten Seite führt.

Wechseln Sie zum „Designer“ und ziehen Sie aus dem Abschnitt „Basic“ die Komponenten „Image“, „TextBox“ und „Button“ in das simulierte Smartphone-Display. Klicken Sie in der Spalte „Components“ auf „Image1“ und dann in der Spalte „Properties“ in die Zeile unter „Picture“, in der standardmäßig „None“ steht. Über „Upload new“ laden Sie ein Bild hoch, das daraufhin im simulierten Display erscheint.

Anschließend klicken Sie auf „TextBox1“ und geben einen Text in das gleichnamige Feld ein. Wenn es sich um ein mehrzeiliges Textfeld handeln soll, aktivieren Sie „MultiLine“. Dies wird auf dem simulierten Bildschirm allerdings nicht korrekt dargestellt, im Emulator (siehe Schritt 6) und in der fertigen App aber schon. Da es sich in unserem Beispiel um ein statisches Textfeld und nicht um ein Eingabefeld handeln soll, deaktivieren Sie die Option „Enabled“. Höhe und Breite des Textfelds bestimmen Sie über „Height“ und „Width“. Soll sich das Feld über die gesamte freie Displayfläche erstrecken, setzen Sie jeweils „Fill parent“ als Wert.

Nun klicken Sie auf „Button1“ und passen die Beschriftung der Schaltfläche über das Eingabefeld „Text“ an. In unserem Beispiel nennen wir sie „Weiter“. Alternativ können Sie auch eine Grafik als Button verwenden. Diese laden Sie durch Klick auf das Eingabefeld unter „Image“ hoch.

Um den Hintergrund der aktuellen Seite anzupassen, klicken Sie unter „Components“ auf „Screen1“ und ändern „BackgroundColor“ oder laden über „BackgroundImage“ ein Hintergrundbild hoch. Das Icon der App ändern Sie ebenfalls in den Eigenschaften der ersten Seite.

Klicken Sie nun oben auf „Add Screen“, um eine zweite Seite hinzuzufügen. In diese ziehen Sie eine Beschriftungszeile („Label“), aus dem Bereich „Media“ einen unsichtbare Audio-Wiedergabekomponente („Sound“) und aus dem Abschnitt „Sensors“ den Beschleunigungssensor („AccelerometerSensor“). Klicken Sie unter „Components“ auf „Label1“ und geben Sie bei „Text“ zum Beispiel „Schüttel mich!“ ein. Textfarbe, Größe und Position können Sie auf Wunsch ebenfalls anpassen. Nun klicken Sie auf „Sound1“ und laden über „Source“ eine kurze Sound-Datei im MP3-Format hoch.

Schritt 5: Funktionen definieren

Nun geht es darum, der App Funktionalität einzuhauchen. Los geht es mit der ersten App-Seite: Beim Antippen der dort befindlichen Schaltfläche soll die zweite Seite der App geöffnet werden.

Im „Blocks Editor“ des App Inventors definieren Sie die Funktionen, die Ihre Anwendung besitzen soll. Dafür stehen viele vordefinierte Prozeduren zur Verfügung.
Vergrößern Im „Blocks Editor“ des App Inventors definieren Sie die Funktionen, die Ihre Anwendung besitzen soll. Dafür stehen viele vordefinierte Prozeduren zur Verfügung.

Wechseln Sie zurück zum Startbildschirm der App („Screen1“) und öffnen Sie, falls noch nicht geschehen, über die entsprechende Schaltfläche im Designer den „Blocks Editor“. Klicken Sie dann auf der Registerkarte „My Blocks“ auf „Button1“ und ziehen Sie die Prozedur „When Button1.Click do“ in den rechten Bereich. Klicken Sie anschließend dort an eine freie Stelle und wählen Sie aus dem Menü, das daraufhin erscheint, „Control -> Open another screen“. Klinken Sie das Element wie ein Puzzleteil in die Prozedur „When Button1.Click do“ ein, was durch ein akustisches Signal („Klick“) bestätigt wird.

Wie Sie sehen, ist im Element „open another screen“ am rechten Rand eine Einkerbung für ein weiteres Teil. Links daneben steht, was hier erwartet wird, nämlich der Parameter „screenName“, also der Name der zweiten Seite. Diesen fügen Sie hinzu, indem Sie wiederum in einen freien Bereich klicken und „Text -> text“ auswählen. Klicken Sie beim neuen Puzzleteil auf die fettgedruckte Zeichenfolge „text“ und ersetzen Sie sie durch den Namen der zweiten Seite, in unserem Beispiel also „Screen2“. Verschieben Sie das Puzzleteil nun an die richtige Stelle, also an das Element „open another screen“.

Nun fügen wir die Funktionen für Seite 2 hinzu, also das Abspielen einer Sound-Datei und das Vibrieren beim Schütteln des Geräts. Im Designer klicken Sie unter „Viewer“ auf „Screen2“ und wechseln zurück zum „Blocks Editor“. Unter „My Blocks“ ziehen Sie aus dem Abschnitt „AccelerometerSensor1“ die Prozedur „When AccelerometerSensor1.Shaking“ sowie die Funktionen „Sound1.Play“ und „Sound1.Vibrate“ in den rechten Bereich. Dann verknüpfen Sie beide miteinander, wobei Sie „Sound1.Vibrate“ unterhalb von „Sound1.Play“ einklinken.

Sie haben dadurch einen Kommandostapel erstellt: Sobald das Ereignis „Bewegungssensor registriert Schütteln“ eintritt, spielt die App die in Schritt 4 ausgewählte MP3-Datei ab und vibriert. Wie lange die Vibration dauern soll, definieren Sie, indem Sie in einen freien Bereich klicken, aus dem Menü „Math -> 123“ auswählen, in dem neuen Puzzleteil „123“ durch die gewünschte Dauer in Millisekunden ersetzen und es an das Kommando „Sound1.Vibrate“ andocken.

Schritt 6: App testen

Um die App zu testen, gibt es mehrere Möglichkeiten. Zum einen ist im Lieferumfang von App Inventor ein Emulator enthalten. Diesen starten Sie im „Blocks editor“ ganz oben über die Schaltfläche „New emulator“. Wenn dieser komplett gestartet ist, was mehrere Minuten dauern kann, klicken Sie im „Blocks editor“ auf „Connect to Device“ und wählen „emulator-5554“. Bis die App dargestellt wird, dauert es wiederum etwas. Vergessen sie nicht, den Android-Bildschirm zu entsperren, indem Sie das Schloss-Symbol mit der Maus nach rechts ziehen.

Da Sie den Emulator nicht schütteln können, lässt sich unsere App damit allerdings nicht komplett testen. Alternativ können Sie dazu ein Android-Gerät benutzen, das mit dem gleichen Router verbunden ist wie der PC, auf dem Sie App Inventor nutzen. Dazu installieren Sie die App „MIT AiCompanion“ aus dem „Play Store“ auf dem Android-Gerät und starten sie. Im „Blocks Editor“ wählen Sie „Connect to Device -> WiFi“. Daraufhin wird Ihnen ein Buchstaben-Code angezeigt, den Sie in die App „MIT AiCompanion“ eingeben und auf „Connect to App Inventor“ klicken. Nachdem die Verbindung steht, sehen Sie die aktuell geöffnete Seite der App auf dem Android-Gerät in einer Live-Vorschau.

Schritt 7: App installieren

Um die fertige App als APK-Installationspaket herunterzuladen, klicken Sie im „Designer“ auf „Package for Phone -> Download to this Computer“.Übertragen Sie die Installations-Datei anschließend auf Ihr Android-Gerät, zum Beispiel per USB-Kabel oder E-Mail-Anhang. Nutzen Sie einen Dateimanager, um die Installation durch Antippen der APK-Datei zu starten. Falls noch nicht geschehen, müssen Sie zuvor in den Android-Einstellungen unter „Anwendungen“ beziehungsweise „Apps“ die Installation aus „unbekannten Quellen“ zulassen. Anschließend sollten Sie die Option aus Sicherheitsgründen wieder deaktivieren.

Weitere Anleitungen, die Sie Schritt für Schritt durch die Entwicklung von Apps mit App Inventor führen, finden Sie unter http://appinventor.mit.edu im Bereich „Explore -> Tutorials“. In der App-Inventor-Gallery sind Apps gelistet, die andere Anwender erstellt haben. Sie können die Projekt-Dateien im ZIP-Format herunterladen und 1:1 in Ihren App-Inventor-Benutzerbereich unter „My Projects -> Upload Source“ hochladen. Dann sehen Sie im Designer und im Blocks Editor, wie die Entwickler vorgegangen sind.

0 Kommentare zu diesem Artikel
1793397