- Werbung -


Hier könnte Ihre Werbung stehen. Interessiert? Sprechen Sie uns an.


Neueste Kommentare

Programmieren von Android-Smartphones mit dem App-Inventor - Teil 1

Druckversion

Android-Smartphones als Informatiksysteme

Das Betriebssystem Android ist derzeit stark auf dem Vormarsch, der Marktanteil beträgt ca. 50%, der bisherige „Platzhirsch“ Symbian ist von der Spitzenposition verdrängt. Die Nutzung dieser Geräte beschränkt sich nicht ausschließlich auf das Telefonieren, sondern auch auf vielfältige andere Möglichkeiten, die diese Geräte bieten. Diese sind u.a. gegeben durch eingebaute bzw. vorhandene Eigenschaften bzw. Merkmale: Kamera, MP3-Player, Radio, Surfen, Chatten, GPS, Apps.

Die Verfügbarkeit von Informationen hat den Zustand „nahezu jederzeit und nahezu von überall aus“ erreicht, die Grenzen zwischen Arbeit, Privatsphäre und Öffentlichkeit verwischen – nicht unbedingt zum Wohle des Einzelnen. Mit den meisten Handys bzw. Smartphones kann man zu relativ geringen Kosten eine Internetverbindung herstellen und somit Ort und Zeit des Kontaktes mit dem Kommunikationspartner bestimmen oder aber asynchron mit einer Person oder einer Gruppe kommunizieren. Die heutigen Smartphones verfügen über eine Ausstattung und Leistungsfähigkeit, die das Kürzel PC im Sinne des Begriffs „Personal Computer“ Wirklichkeit werden lassen. Die häufigste Nutzung ist das Versenden von SMS, gefolgt vom Telefonieren, aber auch Bluetooth-Anwendungen haben einen hohen Stellenwert.

Nahezu jedermann kann ein App erstellen (auch ohne ein Android-Smartphone zu besitzen) und dieses über den Market anbieten. Dort findet man Apps für viele Zwecke, es gibt kostenfreie und kostenpflichtige. Nach Entrichten einer Gebühr können eigene Apps zum Verkauf angeboten werden. Das Angebot nimmt täglich zu, um hier schnell agieren zu können, werden die eingereichten Apps keiner intensiven Prüfung unterzogen.

Android hat als Betriebssystem eine Favoritenstellung inne. Betrachtet man die Leistungsfähigkeit eines solchen Gerätes, z. B. Motorola Defy, welches mir freundlicherweise vom Hersteller zur Verfügung gestellt wurde, so wäre man vor ca. 10 Jahren über einen so leistungsfähigen Computer erfreut gewesen. Das Gerät besitzt einen 800MHz-Prozessor, 512MB RAM und kann intern 32GB verwalten. Mit einer Vielfalt von Schnittstellen (WLAN, Bluetooth, USB, Infrarot) bietet es Kommunikationsmöglichkeiten für unterschiedliche Zwecke mit anderen Geräten an.

Mit dem App-Inventor, den Google entwickelt und zu Beginn des Jahres 2012 dem MIT zur Weiterentwicklung zur Verfügung stellte, ist ein Tool gegeben, das einen Zugang zur Programmierung erlaubt. Derzeit ist der App-Inventor noch in einem Betastadium, es lässt sich aber bereits sehr gut damit arbeiten. Andere Programmiermöglichkeiten eines Handys bieten Java und auch Python. Mit „You can build just about any app you can imagine with App Inventor” begann Google die Vorstellung des Tools – und das scheint zu stimmen.

Der App-Inventor besitzt eine „visuelle“ Umgebung, Programme werden nach einem Bausteinsystem zusammengestellt, bei dem ausschließlich zueinander passende Teile auch im Zusammenhang verwendet werden können. Fehlerquellen im syntaktischen Bereich werden damit vermieden. Die „Passung“ ist allerdings nicht sonderlich stark ausgeprägt, die Bauteile unterschiedlicher Gruppierungen haben nicht auch geometrisch unterschiedliche Formen. Wird versucht, nicht Zusammenpassendes zu verbinden, so gibt es eine Fehlermeldung. 

Der App-Inventor

Will man dieses Tool nutzen, so sind einige Vorbereitungen zu leisten. Jede/r benötigt einen Google-Account, muss die App-Inventor-Software installieren sowie (falls ein eigenes Smartphone vorhanden ist) den passenden Treiber suchen. Dies alles ist recht gut dokumentiert und sollte ohne Schwierigkeiten zu bewältigen sein. Startet man den App-Inventor, dann zeigt sich die untenstehende Oberfläche. 

Die Oberflöch des App-Inventors

In der Palette links werden Komponenten angeboten, die zur App-Erstellung nötig sind, in der Mitte platziert man die gewählten Komponenten auf dem „Bildschirm“. Rechts werden ihnen bestimmte Eigenschaften zugewiesen. Über dem oberen grünen Rand der Entwicklungsumgebung ist ein Menüpunkt „Learn“ zu finden, der Zugang zu einigen Tutorials bietet, in denen die verschiedenen Komponenten und deren Nutzung erläutert wird. In einem kleinen Video wird gezeigt, wie auf Knopfdruck hin auf dem Handybildschirm ein Bild gezeigt und dazu ein „Sound“ abgespielt wird.

Grundelemente der Programmierung

Um sich mit einigen grundlegenden Konzepten der Programmierung zu befassen, erstellen wir ein kleines Spiel (mögliche Alternativen werden im zweiten Teil diskutiert), nämlich Stein-Schere-Papier. Es ist ein auch unter anderen Namen (z. B. Schnick, Schnack, Schnuck) bekanntes Zwei-Personen-Spiel. Manchmal wird es auch benutzt, um Entscheidungen zu fällen (z. B. anstelle eines Münzwurfs). Die Spielregeln, sofern sie nicht bekannt sind, lassen sich leicht klären. Dieses Spiel bietet unterschiedliche Möglichkeiten zur Entwicklung und auch solche zur Erweiterung, so dass jede/r ihrer/seiner Kreativität nachgehen kann. Die erste Stufe ist die der Erstellung einer einfachen GUI, wobei das Programm aber eine gewisse Funktionalität aufweisen sollte.
In einer ersten, einfachen Version soll es drei Knöpfe geben, je einen für Stein, Schere, Papier, ein Label, um den Text „Du hast gewonnen / verloren“ anzuzeigen sowie ein Textfeld für den Namen des Spielenden. Betätigt man einen der drei Knöpfe, so wird das entsprechende Bild angezeigt. Damit ist die das erste Stadium der Programmerstellung abgeschlossen.
GUI des zu erstellenden ProgrammsWenden wir uns den zu leistenden Details zu. Zunächst geben wir unserem Bildschirm den Titel „Stein-Schere-Papier“, indem wir unter „Components“ Screen1 anklicken und unter „Properties-Title“ den Text eintragen. Unterhalb des Titels platzieren wir eine Textbox, indem wir sie aus dem linken Bereich auf den „Viewer“ ziehen. Die Eigenschaft „Text“ erhält den Wert „Name:“. Die Standardvorgabe, wie Elemente angeordnet werden, ist untereinander, dies ist für unsere drei Knöpfe, die nebeneinander stehen soll, ungünstig. Also setzen wir unter das Textfeld eine Komponente, die ein gewisses Layoutmanagement erlaubt. Das „HorizontalArrangement“ findet sich unter „Screen Arrangement“ und dient als Container für andere Komponenten. In dieser Komponente platzieren wir die drei Knöpfe, die mit Stein, Schere, Papier beschriftet werden. Unterhalb dieser Leiste wird ein zweiter Container für zwei nebeneinander liegende Bilder erstellt. Wir ziehen also zwei Imagekomponenten nebeneinander in dieses Feld hinein, um dort die beiden Bilder anzeigen zu können und entfernen jeweils das Häkchen bei deren Eigenschaft „visible“, denn die Bilder sollen ja erst später angezeigt werden. Bilder von Stein, Schere, Papier sind mit Hilfe einer Digitalkamera oder des Handys schnell erstellt und werden nun über „Add – Media“ auf den Server geladen. Unterhalb des Ganzen setzen wir das Label für die Ausgabe hin. Damit ist die Oberfläche komplett und sollte ungefähr so aussehen wie im Bild. Sinnvoll ist es, die Komponenten mit selbsterklärenden Bezeichnern zu benennen.

Click-MethodeNun müssen die Knöpfe „Funktionalität“ erhalten, es soll das entsprechende Bild angezeigt und das Spiel gestartet werden. Dazu dient der Block-Editor, der sich in einem eigenen Fenster öffnet. Die Programmierung ist ereignisgesteuert, der Druck auf den ersten Knopf löst ein Ereignis Button1.Click aus, wir geben an, was dann geschehen soll. Analog verfahren wir mit den anderen beiden Knöpfen. Die Stelle, an der die Blöcke auf dem Entwicklungsbereich, dem Block Editor, platziert werden, ist hierbei unwesentlich. Erstellt werden Programme nach einem Bausteinsystem, es gibt verschiedene Klassen von Bausteinen und nur das, „was passt“, kann zusammen benutzt werden.
Um das bisher Erreichte zu testen, erzeugen wir die Simulation eines Handys (New Emulator) und verbinden das simulierte Handy mit der Programmierumgebung (Connect to Device Emulator XXXX). Auf dessen Oberfläche können wir nun bald den ersten Test durchführen.

Nun wird nach dem oben beschriebenen „Knopfdruck“ der „Computerzug“ eingeleitet, d. h., es wird zufällig der zweite Gegenstand gewählt. Beide Bilder werden nebeneinander angezeigt. In Abhängigkeit von der Auswertung erscheint nun auf dem Label der entsprechende Text. Eine Erweiterung kann hier darin bestehen, dass ein zugehöriger Klang abgespielt und / oder ein weiteres, dem Ergebnis entsprechendes, Bild angezeigt wird.
Element "Nummer"Der Computerzug erfordert es zunächst, ein Bild zufällig auszuwählen, was mit Hilfe der Verwendung von Zufallszahlen leicht erreicht werden kann. Dazu benötigen wir eine Variable, in der die gezogene Zufallszahl gespeichert werden kann. Die Möglichkeit, eine (globale) Variable beim Initialisieren des Bildschirms zu erzeugen, finden wir unter „Built-In - Definition“. Wir ziehen also einen solchen Baustein auf die Oberfläche des Block-Editors und geben der Variablen einen Bezeichner, z.B. „Nummer“. Nun erst gibt es im Bereich „My Blocks – My Definitions“ die Möglichkeit, dieser Variablen einen Wert zuweisen zu können: „Set global … to …“, wir weisen ihr den Wert 0 zu.
Nummer mit ZufallsgeneratorIm Programm erhält dann die Variable namens Nummer eine ganzzahlige Zufallszahl zwischen 1 und 3 als Wert. Die hierzu nötige „Syntax“ sollte sich intuitiv erschließen, da sich eben nur bestimmte Bausteine verbinden lassen und auch die Farben passend sein müssen.
Das in Abhängigkeit dieser Zufallszahl anzuzeigende Bild ist in dem nächsten Schritt zu bestimmen, hierzu dient eine Entscheidung. Zu realisieren ist dies mittels des „if Test then-do …“ oder eines „ifelse Test then-do … else-do …“ -Blocks. Den für den Test notwendigen Baustein zum Vergleich zweier Elemente finden wir unter Math.
Nun stellen wir fest, dass die beschriebene Anweisungsfolge in jeder zu einem Button gehörenden Ereignisprozeduren eingebaut werden muss, was bspw. mit Hilfe von „Copy-and-Paste“ erledigt werden kann. Eine andere Möglichkeit besteht aus der Definition und Verwendung von Prozeduren, hier zunächst einer Prozedur „Computerzug“. Wie auch bei der Verwendung von Variablen findet man unter „Built-In – Definition“ einen Baustein zur Deklaration einer Prozedur und unter „My Blocks – My Definitions“ den Baustein zum Aufrufen einer vorher deklarierten. Unser Programm stellt sich nun wie im Bild gezeigt dar.

Übersicht des Programms

Wir erstellen drei Auswertungsprozeduren, die von den jeweiligen ButtonX.Click-Prozeduren aus aufgerufen werden müssen. (Alternativ könnte man Prozeduren mit Parameterübergabe verwenden.) Dies ist bei dieser Variante nötig, weil das Spielergebnis durch gewählte Bild und durch das per Zufall bestimmte Bild festgelegt wird. Nun ergänzen wir unsere GUI um einen vierten Knopf zum Beenden des kleinen Spiels und geben dem die entsprechende Funktionalität. Das Bild zeigt das Resultat der obigen Überlegungen.

Auswertungs-Methode

An dieser Stelle möchte ich noch einige Anmerkungen zu möglichen Erweiterungen machen: 

  • Abspielen unterschiedlicher „Soundschnipsel“ bei Gewinn bzw. Niederlage ist einfach zu realisieren, es erfordert die Nutzung der Soundkomponente aus dem „Media-Bereich“ und natürlich entsprechender Sounddateien (bei bestimmten Windowsversionen sind bspw. yippee.wav und falling.wav mitgeliefert). Diese können bspw. über Prozeduren Gewonnen / Verloren abgespielt werden. Ebenso wird beim Anzeigen eines weiteren Bildes verfahren.
  • Das Implementieren eines Zählers erfordert den Umgang mit Variablen, die an der richtigen Stelle im Programm hochgezählt werden müssen. Zusätzliche Komponenten für die Anzeige des Ergebnisses und die Möglichkeit, ein neues Spiel zu beginnen, müssen verwendet werden.

Hat man nun ein solches Programm erstellt, so soll es natürlich auf dem eigenen Smartphone installiert werden und auch an Interessenten verteilt werden. Dazu bieten sich unterschiedliche Wege an: im Design-Modus gibt es unter „Package für Phone“ (in der Menüzeile rechts) die Optionen „Show Barcode“ und „Download to this Computer“. „Show Barcode“ zeigt nach kurzer Wartezeit auf dem Bildschirm einen QR-Code an, der es dem Ersteller ermöglicht, das Programm zu installieren (falls das entsprechende App installiert ist). Die zweite Möglichkeit erzeugt eine .apk-Datei, die problemlos an andere weitergegeben werden kann und mittels des Application-Managers des Smartphones installiert wird. Zusätzlich kann das Programm aus der Entwicklungsumgebung heraus direkt auf das Handy geladen werden. Die so verteilten Programme können allerdings nicht weiter bearbeitet und geändert werden. Dazu bietet sich aber die aus der Entwicklungsumgebung unter „My Projects“ zur Verfügung gestellte Option „Download all Projects“ bzw. „More Actions – Download Source“ an, die eine ZIP-Datei erzeugt, welche wiederum über „More Actions – Upload Source“ zur Weiterbearbeitung auf den Server kopiert werden kann.

Alternative Möglichkeiten 

Das oben vorgestellte Beispiel nutzt keine der besonderen Merkmale eines Smartphones. Sicherlich ist es für einen Einblick in die Programmierumgebung hilfreich, aber eben nicht „das Gelbe vom Ei“. Deswegen werden wir im zweiten Teil dieses Artikels weitere Beispiele betrachten, die tatäschlich Funktionen des Smartphones nutzen.

App-Inventor ist sehr interessant !

Sehr interessanter Artikel ! Das muss ich doch bald mal mit meinem Life-PAD ausprobieren. Ich konnte meinen Psion-Organizer noch mit einer Basic-ähnlichen Programmiersprache programmieren. Bei meinem Smartphone und dem Lifepad habe ich diese einfache Progammiermöglichkeit schmerzlich vermisst. Das könnte sich jetzt bald ändern.

danke !