Programmieren von Android-Smartphones mit dem App-Inventor. Jürgen Poloczek

Transkript

1 Programmieren von Android-Smartphones mit dem App-Inventor Jürgen Poloczek 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 1, den Google entwickelte 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. 1 beta.appinventor.mit.edu

2 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 / Jeder 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. 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 2 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 3, 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 mögliche Alternativen werden später diskutiert

3 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. Wenden 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. Nun 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

4 ein zugehöriger Klang abgespielt und / oder ein weiteres, dem Ergebnis entsprechendes, Bild angezeigt wird. 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. Im 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. Wir erstellen drei Auswertungsprozeduren werden, 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. An dieser Stelle möchte ich noch einige Anmerkungen zu möglichen Erweiterungen machen: Abspielen unterschiedlicher Soundschnipsel bei Gewinn bzw.

5 Verlust 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. In den Tutorien finden sich zwei durchaus geeignete Anwendungen, PaintPot und PicCall, die man alternativ nutzen kann. Ersteres beinhaltet die Gestaltung einer Oberfläche für die Anwendung und das Zeichnen von Punkten und Linien Das zweite Beispiel dient dazu, aus der Kontaktliste Personen herauszusuchen und deren Bilder anzuzeigen. Klickt man auf solch ein Bild, so wird die Person angerufen. Es wird also Handy-Funktionalität genutzt. Eine Abwandlung dieses Programms kann darin bestehen, dass die Person nicht aus der Kontaktliste herausgesucht wird, sondern dass ein Bild direkt auf dem Schirm gezeigt wird, das Programm erfüllt also eine Art Kurztastenfunktion. Zunächst wird ein Knopf auf dem Schirm platziert, benannt und statt mit einer Beschriftung mit einem Bild der anzurufenden Person versehen. Als nicht sichtbare Komponente fügt man aus dem Bereich Social eine PhoneCall -Komponente hinzu und trägt als deren Eigenschaft die Rufnummer ein. Im Blockeditor ist dann das Button-Klick- Ereignis der Aufruf der MakePhoneCall -Methode. Viel ist das noch nicht, aber auch hier können mit einfachen Erweiterungen Elemente der Programmierung thematisiert werden. Setzt man bspw. mehrere Knöpfe mit unterschiedlichen Bildern nebeneinander, muss die zu jedem Bild gehörende

6 Rufnummer an die PhoneCall -Komponente übergeben werden. Dies realisiert man mittels einer Variablen, in der die Rufnummer gespeichert wird. Bleibt man dichter an dem vorgegebenen Beispiel PicCall so wird die Kontaktliste genutzt, um Rufnummern und Bilder auszuwählen. Ein weiteres Beispiel lässt sich daraus ableiten. Mittels weniger Komponenten ist ein Programm erstellbar, welches dazu dient, eine Textnachricht an eine (festgelegte) Gruppe von Personen zu senden. Wir platzieren hierzu folgende Komponenten auf dem Viewer: eine Textbox, einen Button, ein (Status-)Label und aus dem Bereich Social eine Texting-Komponente. Letztere dient zum Versenden einer Nachricht an bestimmte Rufnummern. Um nun mehr als eine Rufnummer ansprechen zu können, definieren wir eine Variable namens Rufnummern und initialisieren Sie mit einer Liste der gewünschten Rufnummern. Nun gilt es, an die Texting - Komponente den Nachrichtentext zu übermitteln und eine Schleife zu programmieren, die unsere Telefonliste durchläuft. An jede der angegebenen Rufnummern wird dann die Nachricht gesandt. Zur Kontrolle wir die letzte Nachricht auf dem Statuslabel angezeigt. Auch dieses Programm ist leicht erweiterbar, bspw. kann es möglich gemacht werden, der Liste Rufnummern hinzu zu fügen bzw. solche zu löschen. Mit Hilfe der Tiny-DB kann eine Mini-Datenbank realisiert werden, die aber leider nur wenige Merkmale bietet. Der Eintrag in die Datenbank muss mit einem Schlüssel versehen werden, anschließend lässt sich der Inhalt mit dem entsprechenden Schlüssel in die Datenbank eintragen (TinyDB.StoreValue). Mit Hilfe der Methode TinyDB.GetValue lässt sich der zu einem Schlüssel gehörende Eintrag aus dieser Datenbank lesen und bspw. in einer Variablen zur weiteren Verwendung speichern. GeoCaching GeoCaching [Sc 11] ist eine Art Schnitzeljagd mit einem GPS-System, ein Hobby, welches in den letzten Jahren eine gewisse Verbreitung gefunden hat. GPS-Fähigkeit ist Bestandteil eines Android-Smartphones, es bietet sich also die Möglichkeit, hier ein Beispiel zu erstellen. Interessenten suchen im Internet nach den GPS-Koordinaten eines Schatzes, eines so genannten Caches, den jemand irgendwo versteckt hat. Mit Hilfe eines GPS- Gerätes wird nun nach dem Schatz gefahndet, wobei das Smartphone

7 dieses Gerät ersetzt. Als Alternative kann ein Schatz oder auch mehrere davon versteckt werden, wobei dann die Koordinaten in einer Liste abgelegt werden können. Auf dem Viewer platzieren wir folgende Komponenten: ein HorizontalArrangement mit einem Startknopf und einem Statuslabel, ein VerticalArrangement mit drei untereinander angeordneten Labels für die Anzeige der geographischen Breite, Länge und der Höhe sowie ein weiteres HorizontalArrangement mit einem Knopf (Speichern) und einem Eingabefeld für die Bezeichnung des zu speichernden Ortes und Gegenstands. Den Abschluss macht ein Ende-Button. Als nicht sichtbare Komponenten fügen wir einen LocationSensor und einen Timer hinzu. Letzteren deaktivieren wir zunächst und setzen das Intervall auf eine Sekunde. Nun müssen wir Timer und den Knöpfen Funktionalität verleihen. Zunächst wenden wir uns dem Startknopf zu. Dieser Knopf dient dazu, Timer und LocationSensor zu aktivieren. Als optische Unterstützung wird zusätzlich der Hintergrund des Statuslabels rot gefärbt. Die Timermethode beinhaltet eine if-else-anweisung, mit der getestet wird, ob ein Signal vorhanden ist oder nicht. Dieser Vorgang kann bis zu einigen Minuten dauern. Sowie der Sensor Daten empfängt, wird der Hintergrund des Statuslabels grün gefärbt, die Meldung GPS-Signal erhalten angezeigt und der nun nicht mehr benötigte Timer deaktiviert. Besteht die Verbindung noch nicht, so lautet die angezeigte Meldung kein GPS-Signal. (Für eine erste Version dieses Programms ist der Timer nicht notwendig, man erkennt auch an der Anzeige der geographischen Daten, dass der Sensor Signale empfängt. Jedes Mal, wenn eine Ortsänderung vorgenommen wird, empfängt der Sensor andere Werte für geographische Breite, Länge und Höhe. In diesem Fall tritt das Ereignis LocationSensor.LocationChanged ein. In der zugehörigen Methode werden nun die aktuellen Werte auf die entsprechenden Labels geschrieben. Ergänzt werden kann dies durch eine Sprachausgabe. Mit Hilfe einer MakeText- Komponente aus dem Bereich Built-In-Text des Blockeditors wird der auszugebende Text aus einigen Worten Neuer Standort, Breite, Länge, Höhe und den zugehörigen Werten zusammengesetzt und an eine TextToSpeech- Komponente aus Other-Stuff des Designers übergeben. Diesen Block platziert man nun in der LocationSensor.LocationChanged-Methode. (Leider ist dies insgesamt etwas nervig, weil das Smartphone dann nahezu ununterbrochen am Reden ist.) Im Map-Tour Tutorial ist erläutert, wie man mit Hilfe des Activity-Starters eine Karte mit dem aktuellen Standort anzeigen kann. Dies setzt allerdings voraus, dass die Google-Maps-App installiert ist und eine Internetverbindung besteht, um die Karte zu laden.

8 Um nun auch Positionen speichern zu können, erstellen wir eine Liste bestehend aus den drei Angaben Breite, Länge und Höhe sowie einer Bezeichnung des Gegenstandes, der hinterlegt werden soll. Letztere wird über das Textfeld eingegeben. Zur Verwaltung der Liste wird eine Variable genötigt, nennen wir sie Standorte. Diese wird zunächst im Blockeditor als leere Liste initialisiert (Block Make a List ). Bei jedem Betätigen des Speicherknopfes wird nun an die Liste ein weiteres Element angehängt ( add items to list ), dieses besteht aus einem Text, der sich aus Beschreibung des Gegenstandes, Breite, Länge und Höhe mit den zugehörigen Werten zusammensetzt. Zum Zusammensetzen dient ein make text -Block. Um nun alle gespeicherten Daten anzuzeigen, durchlaufen wir die Liste mit Hilfe einer foreach -Schleife und schreiben sie zeilenweise auf das Label. Abschließende Bemerkungen Ein Einstieg in die Programmierung mit dem App-Inventor anhand einfacher Beispiele ist oben beschrieben, man kann dabei auch handyspezifische Merkmale nutzen. Folgt man der Devise Google ist dein Freund, so findet man mit wenig Aufwand Programmbeispiele zum Verändern oder direktem Nutzen, die auf verschiedenen Webseiten kostenlos zur Verfügung gestellt werden. Hieraus lassen sich sicherlich nützliche Anregungen für die eigene Programmiertätigkeit gewinnen. Links App-Inventor: beta.appinventor.mit.edu Tutorials App-Inventor: beta.appinventor.mit.edu/learn/