Workshop zum MIT App Inventor, Teil 2 Apps einfach zusammensetzen

Der MIT App Inventor sieht aus wie ein GUI-Designer, kann aber wie im ersten Teil beschrieben deutlich mehr. Heute puzzlen wir uns wie versprochen die Foto App inklusive Sharing-Funktion zusammen.

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

Wie unsere Foto-Applikation aussehen soll, haben wir im ersten Teil dieses Workshops beleuchtet. Nun sorgen wir dafür, dass der der Foto-Button bei Klick (eigentlich natürlich Tap) ein Foto nimmt. Klicken Sie dazu den Foto-Button links in der Liste der Blöcke an, um die verfügbaren Elemente zu sehen und ziehen Sie dann das braune „when Button1.Click“-Kontroll-Element auf die Arbeitsfläche.

Ein kleiner Tipp: Da Buttons hier nur noch als Namen auftauchen, sollten diese im Designer vernünftig benannt werden – hier wurde lediglich darauf verzichtet, um die Screenshots eindeutiger zu machen. An das offene Bei-Klick-True-Teilchen muss nun natürlich die gewünschte Aktion gedockt werden – in diesem Fall „call Camera1.TakePicture“, zu finden über das Kamera-Element. Ein Tap auf den Button ruft nun die Android-eigene Kamerafunktion auf und es kann ein Foto gemacht werden.

Anschließend stellt sich die Frage, was denn mit dem Foto passieren soll. Ein weiterer Fingerdruck auf das Kamera-Element zeigt schon, wie es weitergeht: Dem Kontroll-Element „when Camera1.AfterPicture“ muss mitgeteilt werden, dass das aufgenommene Foto – gespeichert in der orange dargestellten Variable „image“ – als Hintergrund des Canvas gesetzt werden soll. Dazu dient der Baustein „set Canvas1. BackgroundImage to“.

Dieser Baustein hat hinten aber noch eine offene Stelle für ein Puzzle-Teilchen – und wie beim echten Puzzle darf es natürlich keine offenen Enden geben. Um das BackgroundImage des Canvas nun auf das Foto zu setzen, muss aus dem Variablen-Bereich der Baustein „get“ angebaut werden, aus dem Dropdown-Menü am Baustein wird die Variable „image“ gewählt.

Im Grunde ist dies also einfachste Objektorientierung: Objekte wie Canvas oder Buttons haben Eigenschaften wie Background, die über eine Schreibweise wie Canvas1.Background angesprochen und per get- oder set-Befehl ausgelesen beziehungsweise gesetzt werden können. Übrigens: get und set erscheinen automatisch zur Auswahl, wenn der Mauszeiger kurz über einer Variablen verharrt.

Nun wird die Textbox auf dieselbe Art aktiviert: Das Kontroll-Element „when TextBox1.GotFocus“ wird mit „set TextBox1.Text“ verknüpft – und damit die Textbox beim Antippen leer ist, wird jetzt nicht auf eine Variable gesetzt, sondern den Block für einen leeren String („ „), zu finden im Block-Bereich unter „Built-in/Text“. Die Aktion GotFocus bei der Textbox ist im Grunde identisch mit dem Click-Event von Buttons.

Workshop zum MIT App Inventor, Teil 1

Einstieg in die Android IDE „App Inventor“

Es fehlt noch die Wahl einer Textfarbe – dazu bedarf es eines neuen Elements, einer manuell angelegten Variablen. Ziehen Sie dazu aus dem Variables-Bereich den Block „initialize global name to“ auf die Arbeitsfläche und docken Sie aus dem Colors-Bereich die gewünschte Standardfarbe an. Natürlich sollte die globale Farbvariable auch hier umbenannt werden – statt „name“ wäre „textcolor“ deutlich besser. Das Ändern der Farbe ist nun ganz simpel: Für die beiden Farb-Buttons wird jeweils ein „when Button.Click“-Block mit „set global name to“ und abschließend einer Farbe zusammengefügt.

Das Canvas bestücken

Das Foto landet automatisch im Canvas, der eingegebene Text muss noch in gewünschter Farbe manuell platziert werden. Dazu gilt es, dem Canvas-Objekt folgendes mitzuteilen: Textfarbe, Text und Koordinaten, um den Text zu platzieren. Das Grundelement ist hier „when Canvas1.Touched“. Für die Farbwahl kommt der Block „set Canvas1.PaintColor to“ zum Einsatz, abgeschlossen durch „get global name“ (es wird also der Wert ausgelesen, der über „set global name to“ gesetzt wurde).

Um den Text nun zu „zeichnen“ (daher auch „PaintColor“), muss in das Grundelement noch ein zweiter Block eingefügt werden – Blöcke können nämlich beliebig viele Sub-Blöcke enthalten! Die Wahl fällt hier auf „call Canvas1.DrawText“, das wiederum drei Andockplatze hat: Bei „text“ wird der Text aus der TextBox über „TextBox1.Text“ gesetzt. x und y sind die gewünschten Koordinaten.

Soll der Text dort eingesetzt werden, wo auf das Bild getippt wird, genügt es, hier jeweils aus dem Variables-Bereich einen „get x“- beziehungsweise „get y“-Block anzudocken. Die Variablen x und y werden automatisch belegt, sobald das Canvas angetippt wird. Alternativ ließen sich hier auch fixe Koordinaten über den entsprechenden Block aus dem Math-Bereich hinterlegen (etwa, um einen Meme-Generator zu basteln, der oben und unten separate Texte an Fotos pinnt).

Um das Canvas wieder von Text und Bild zu befreien, muss der Clear-Button wieder per „when Button.Click“-Block bestückt werden: Der Block „call Canvas1.Clear“ löscht den Text; das Bild wird entfernt, indem der Hintergrund per „set Canvas1.BackgroundImage to“ auf einen leeren String “ “ gesetzt wird.

Das Bild teilen

Bis hierher lassen sich also Bilder aufnehmen und Texte in unterschiedlichen Farben direkt auf dem Bild – genauer gesagt dem Canvas – platzieren. Um dieses Canvas nun als Bild zu teilen, muss ein kleiner Zwischenschritt eingebaut werden: Das Canvas wird als temporäre Datei gespeichert, die dann geteilt werden kann. All das läuft natürlich im Hintergrund, der Nutzer bekommt davon nichts mit – nach dem Fingertipp auf den Share-Button erscheint direkt Androids typisches Teilen-Menü.

Zunächst wird eine zweite globale Variable benötigt, dieses Mal als leerer String definiert. Auch hier gilt wieder: Ein sinnvoller, sprechender Name für die Variable ist ein Muss, da ansonsten einfach in der Art name, name2, name3 durchnummeriert wird – lediglich um diesen Workshop übersichtlicher zu halten, sind auf den Screenshots jeweils die Standardnamen zu sehen.

Anschließend müssen dem Click-Event für den Share-Button zwei Elemente hinzugefügt werden: Erstens wird die Variable mit „set global name to“ an „call Canvas1.SaveAs“ gekoppelt und an dessen offenen „file“-Slot wiederum „get global name“ – damit wird das Canvas als Datei gespeichert.

Darunter folgt ein Block aus dem Repertoire des Sharing-Elements: „call Sharing1.ShareFile“. Dieser ruft die Aktion ShareFile aus dem Objekt Sharing1 auf. Es fehlt noch der Name der Datei, die geteilt werden soll – folglich wird an den auch hier offenen „file“-Slot wieder „get global name“ angehängt.

Testen und Kompilieren

Spätestens jetzt sollte die App getestet werden und auch das löst der App Inventor hervorragend. Über den Menüpunkt Connect gibt es drei Optionen, die App laufen zu lassen: Im Emulator oder per USB-Verbindung oder AI Companion direkt auf dem Smartphone.

Die sinnvollste Variante ist die App AI Companion. Der App Inventor erstellt bei dieser Option einen QR-Code, der direkt mit dem AI Companion gescannt werden kann – alternativ lässt sich der sechsstellige Code natürlich auch per Hand abtippen. Praktisch: Jede Änderung im App Inventor landet direkt in der laufenden App.

Sobald alles wie gewünscht läuft, geht es ans Kompilieren, was sich erfreulicherweise auf einen kurzen Klick beschränkt: Über das Build-Menü wird wahlweise eine APK zum direkten Download erstellt oder ein QR-Code, um die App direkt auf's Android-Gerät zu bugsieren.

Tuning

Natürlich ließe sich die App an vielen Stellen etwas tunen, angefangen mit optischen Verbesserungen wie selbst gestalteten Schaltflächen und Hintergründen bis hin zum intensiveren Einsatz von Layout-Elementen. Alle Elemente in einem Gitter zu arrangieren und zu zentrieren ist schnell erledigt, aber sehr effektiv. Auch ein Standard-Hintergrundbild für das Canvas ist empfehlenswert, damit der Screen nicht so leer erscheint.

Die Eigenschaften der einzelnen Elemente sind zwar überschaubar, aber es lohnt sich, ein wenig zu stöbern und sinnvolle Vorgaben zu machen. Besonderes Augenmerk sollte dabei auf den Eigenschaften des Screens liegen, wo sich etwa die Orientierung festlegen lässt oder, ob der Bildschirm gescrollt werden darf – was natürlich Auswirkungen auf die mögliche Canvas-/Foto-Größe hat.

Interessanter wären aber wohl ein paar zusätzliche Funktionen. Beispielsweise verfügt der App Inventor über eine hervorragende Twitter-Schnittstelle, mit der sich Nachrichten, Bilder oder eben Canvas-Flächen mit einem Tap twittern lassen. Dabei benötigt das Anbinden von Twitter im Inventor lediglich ein paar Minuten, jedoch müssen im Twitter-Konto Keys für die eigene App erstellt werden, was mitunter nicht völlig selbsterklärend ist.

Oder wie wäre es mit freihändigem Zeichnen? Dafür bietet das Canvas den Block „when Canvas.Dragged“: Per Vorher- („prevX“) und Aktuell-Koordinaten („currentX“) registriert das Canvas die Fingerbewegung und zeichnet entsprechende Striche. Das ist eine spannende Erweiterung, die keine Minute Arbeit erfordert.

Als letzte Anregung: Statt nur die Canvas-Datei zu teilen, ließe sich auch gleich eine Nachricht mitschicken – beispielsweise die aktuelle Adresse, ausgelesen aus dem Location-Sensor. Der zugehörige Block ist „call Sharing.ShareFileWithMessage“, der neben dem Datei-Slot noch einen zweiten für die Nachricht hat. Und eben hier würde „LocationSensor.CurrentAddress“ passen – und mit dem Join-Baustein ließen sich sogar aktuelle Adresse und Textbox-Nachricht zu einer Nachricht verschmelzen.

Das unten angehängte ZIP-Archiv umfasst die APK-Version der App sowie eine importierbare Projektdatei, in beiden sind Zeichnen und Ortsangabe bereits eingebaut.

Was geht noch? Was nicht?

Der App Inventor bietet noch allerhand hier nicht behandelte Möglichkeiten, auf der Programmier-Seite beispielsweise echte Schleifen, Boolean-Logik, mathematische Operationen, Listen und so weiter.

Darüber hinaus gibt es noch allerhand weitere fertige Funktionen zu entdecken, zum Beispiel Sprache-zu-Text, TinyDB-Datenbank, Übersetzer, Sprites, Zugriff auf sämtliche Sensoren, Zugriff auf Telefon und Adressbuch, Bluetooth, Lego Mindstorms oder den Webviewer. Ist das Puzzle-Konzept einmal verinnerlicht, sind all diese Tools weitestgehend intuitiv zu benutzen.

Der Webviewer ist aber auch ein guter Punkt, um zum Schluss noch auf die Grenzen des App Inventors zu sprechen zu kommen: Es lassen sich zwar sehr wohl nützliche Apps anfertigen, aber letztlich ist das Tool (auch) als Einführung in die Programmierung gedacht. Und so kann etwa der Webviewer problemlos Webseiten anzeigen, aber beim Scrollen ruckelt es auch auf modernen Smartphones drastisch.

Das zeigt, dass der App Inventor eben keine High-End-Entwicklungsumgebung ist, aber für viele Zwecke ist das auch egal. Für die bisher erstellten rund 7 Millionen Apps gibt es gute Gründe; der wohl beste: Es macht einfach Spaß, binnen weniger Stunden wirklich nützliche, praxistaugliche Apps zu puzzlen.

Apps mit dem App Inventor zusammenpuzzlen

Bildergalerie mit 10 Bildern

(ID:45104433)