Workshop zum MIT App Inventor, Teil 1

Einstieg in die Android IDE „App Inventor“

| Autor / Redakteur: Mirco Lang / Stephan Augsten

In diesem Workshop erstellen wir mit dem App Inventor eine einfache App zum Aufnehmen und Teilen von Fotos.
In diesem Workshop erstellen wir mit dem App Inventor eine einfache App zum Aufnehmen und Teilen von Fotos. (Bild: Lang / App Inventor)

Der App Inventor soll ein Versprechen einlösen: eigene Apps ohne Programmierkenntnisse. Benötigt werden lediglich Browser, Android-Gerät und ein klein wenig Logik. Im Workshop erstellen wir eine App zum Erstellen, Beschriften und Teilen von Fotos.

Software ohne Programmierfähigkeiten entwickeln zu können, haben schon viele Entwicklungsumgebungen (IDEs), Rapid-Prototyping-Werkzeuge und sonstiger Helferlein versprochen. Dahinter steckt aber in aller Regel nur ein reiner GUI-Designer, mit dem sich Oberflächen tatsächlich sehr einfach zusammenklicken lassen.

Die eigentlichen Funktionen müssen dann aber doch manuell eingetippt werden. Und egal, ob JavaScript oder C++, Coden ist nicht trivial. Das ehemalige Google-Spielzeug App Inventor, mittlerweile vom MIT betreut, schafft es jedoch, diese Lücke zu schließen: Auch Funktionen werden hier schlicht und einfach per Drag&Drop direkt im Browser erstellt.

Zwar ist der App Inventor im Wesentlichen als Lern-Software gedacht, es lassen sich aber richtige, nützliche Programme erstellen. Wie genau der App Inventor funktioniert, lässt sich am besten an einem konkreten Projekt zeigen: Eine App, mit der sich Fotos schießen, beschriften und teilen lassen.

So wird die Logik der App am Ende Aussehen – ausführlich erklären wir das Zusammsetzen mobiler Applikationen im zugehörigen Workshop. <p style="margin-left:5px;"><a href="https://www.dev-insider.de/einstieg-in-die-android-ide-app-inventor-a-678505 " target="_blank" style="color:white">>> Workshop zum MIT App Inventor <<</a><p><br></p>
So wird die Logik der App am Ende Aussehen – ausführlich erklären wir das Zusammsetzen mobiler Applikationen im zugehörigen Workshop. <p style="margin-left:5px;"><a href="https://www.dev-insider.de/einstieg-in-die-android-ide-app-inventor-a-678505 " target="_blank" style="color:white">>> Workshop zum MIT App Inventor <<</a><p><br></p> (Bild: Lang / App Inventor)

Darin kommen allerhand interessante Aspekte zum Tragen: Events, Variablen, Zugriff auf die Hardware, Androids eigene Sharing-Funktion und natürlich GUI-Design, Live-Testing auf dem Handy und das finale Kompilieren. Für einen einfacheren Einstieg sollte aber zunächst die grundsätzliche Funktionsweise des App Inventors klar sein. Das vorangestellte Bild zeigt schon einmal eine kleine Vorschau.

Grundlagen

Der App Inventor läuft direkt im Browser und teilt sich in zwei Bereiche: Design und Blöcke. Im Designer wird die Benutzeroberfläche erstellt, indem Komponenten wie Button, Gitter, Canvas, Listen und so weiter auf einen virtuellen Smartphone-Bildschirm gezogen werden. Neben diesen GUI-Bausteinen müssen hier aber auch schon vorgefertigte Funktionen wie etwa Kamera-Zugriff oder Web-Viewer hinzugefügt werden. Zudem werden eigene Bilder und Sounds hochgeladen.

Eigenschaften der Elemente (Farben, Namen, Beschriftungen, Zugangsdaten, etc.) lassen sich ebenfalls direkt im Designer setzen. Sind erst einmal alle benötigten Funktionen und GUI-Elemente vorhanden, geht es zum Blocks-Bereich – und hier findet die eigentliche Magie statt: Objekte, Attribute und Funktionen werden hier als Puzzle-Teile dargestellt, die aneinander andocken.

Über zwei Puzzle-Teilchen ließe sich die Farbe eines Buttons ändern.
Über zwei Puzzle-Teilchen ließe sich die Farbe eines Buttons ändern. (Bild: Lang / App Inventor)

Als kleines Beispiel: Soll ein Tap auf einen Button dessen Farbe ändern, wird das Kontroll-Element „when Button.click“ mit der Aktion „set Button1.BackgroundColor“ verknüpft. Praktisch: Ein Klick auf das Button-Element zeigt direkt alle dafür verfügbaren Puzzle-Teile.

Wer schon einmal programmiert hat, wird hier auch direkt die Objektorientierung erkennen: Elemente wie Buttons, Textfelder oder die Kamerafunktion sind Objekte, denen Attribute (Farbe) und Aktionen („Ändere Farbe“) zugeordnet werden können. Wie genau das in der Praxis ineinandergreift, zeigt gleich der Workshop.

Sobald die ersten Elemente im Designer arrangiert und ein paar Funktionen erstellt sind, muss die App natürlich auch sofort getestet werden. Und hier spielt die IDE eine weitere Stärke aus: Per QR-Code verbindet sich der App Inventor mit dem Smartphone, beziehungsweise der darauf laufenden App AI Companion, und schon läuft Ihre App auf dem echten Endgerät.

Jede weitere Änderung im App Inventor zeigt sich dann live und ohne weiteres Zutun auch auf dem Handy. Alternativ kann auch im lokalen Emulator getestet werden. Am Ende allen Programmierens steht das Kompilieren – und auch das ist erfreulich simpel: Ein Klick genügt, um eine APK-Datei per Download oder QR-Code zu erhalten. Aber genug der Theorie, zur Praxis:

Projekt: Foto-Sharing-App

So soll die App später funktionieren: Es wird ein Foto geschossen und in der App angezeigt, dann wird Text zum Beschriften eingegeben und in einer von zwei Farben per Tap frei auf dem Bild platziert; für alle Fälle gibt es noch einen Clear-Button, um Bild und Schrift wieder zu löschen. Anschließend wird das Bild über Androids eigene Sharing-Funktion via Twitter, Mail, Telegram, Whatsapp und so weiter geteilt. Benötigt werden dafür fünf Buttons, eine Textbox, zwei Layout-Bereiche zum Arrangieren der Buttons sowie die unsichtbaren Elemente Sharing, Camera und Canvas.

Apps einfach zusammensetzen

Workshop zum MIT App Inventor, Teil 2

Apps einfach zusammensetzen

01.02.18 - 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. lesen

Die „fertige“ App ist natürlich nicht perfekt – sie würde wohl als erster Release Candidate durchgehen. In sehr seltenen Fällen scheint es geräteabhängige Fehler bei der Ausrichtung der Kamera zu geben. Im Vordergrund steht das Tutorial, keine produktive Anwendung.

Am Ende dieses Beitrags finden Sie die App zum Download (APK-Datei) und die importierbare Projektdatei (AIA-Datei), verpackt in einem ZIP File.

Erste Schritte

Im Designer finden Sie links in der Palette alle zur Verfügung stehenden Bausteine, die sich per Drag&Drop einsetzen lassen. Die Basis für jedes Projekt ist der Screen1, also das erste oder einzige „Fenster“ der App. Weitere Screens lassen sich beliebig hinzufügen und später etwa über Buttons aufrufen.

Beginnen Sie am besten mit dem Layout-Element „HorizontalArrangement“, um Buttons nebeneinander anordnen zu können und ziehen Sie drei Buttons in diesen Bereich. Die Buttons lassen sich umfangreich anpassen, für das Beispielprojekt kann es aber bei der reinen Beschriftung bleiben, beispielsweise „Foto“, „Clear“ und „Share“.

Als nächstes wird ein Texteingabefeld benötigt, diese „TextBox“ findet sich wie die Buttons im Palettenbereich User Interfaces. Darunter folgen wieder zwei horizontal arrangierte Buttons, über die später die Schriftfarbe gewählt werden kann, damit sowohl helle als auch dunkle Fotos beschriftet werden können. Hier bietet es sich an, die Knöpfe über die Eigenschaft BackgroundColor einzufärben.

In der Designer-Ansicht stehen verfügbare Komponenten, GUI-Vorschau, eingesetzte Komponenten und deren Eigenschaften übersichtlich nebeneinander.
In der Designer-Ansicht stehen verfügbare Komponenten, GUI-Vorschau, eingesetzte Komponenten und deren Eigenschaften übersichtlich nebeneinander. (Bild: Lang / App Inventor)

Damit ist die Benutzeroberfläche bereits fertiggestellt. Mit ein wenig mehr Aufwand ließe sich das ganze natürlich beträchtlich aufhübschen, zum Beispiel mit selbst gestalteten Schaltflächen, was sich über Button-Eigenschaft „Image“ erledigen lässt.

Unsichtbare Elemente

Noch ist der Designer-Modus aber nicht fertig, es fehlen noch die Kamera-Funktion, zu finden unter Media, sowie das Sharing aus dem Social-Bereich. Beide werden auf den Screen gezogen und erscheinen dann darunter aufgelistet als „None-visible components“.

Das letzte Element ist das mächtige Canvas: Ein viereckiger Bereich mit Koordinatensystem. Auf diesem kann gezeichnet und getextet werden, es können Bilder hineingeladen oder Sprites animiert werden – die Grundlage für viele simple Spiele. Das Canvas aus dem Bereich „Drawing and Animation“ ist zunächst leer und erscheint in der GUI entsprechend nur als Platzhalter.

Wichtig sind hier vor allem die Eigenschaften Width und Height: Sind Breite und Höhe auf Automatik gesetzt, erscheint das Bild später verzerrt, da sich das Canvas über den gesamten freien Raum des Screens verteilt und dabei keine Rücksicht auf das Seitenverhältnis des Fotos nimmt.

Auf der sicheren Seite ist man mit prozentualen Angaben. Sinnvoll sind für den Anfang zum Beispiel 50 Prozent für Höhe und Breite. Sobald die App läuft, können Sie schauen, wie viel Prozent der Höhe zur Verfügung stehen, Abhängig von GUI und Bildschirmauflösung des Geräts, und den Wert anpassen.

Übrigens: Die App teilt freilich nicht das Originalfoto, sondern das Canvas, so wie es auf dem Bildschirm zu sehen ist – also auch nicht in der original Kamera-Auflösung! Und damit wird jetzt der übliche IDE-Desiger verlassen und das Puzzle kann beginnen. Damit beschäftigen wir uns aber erst im zweiten Teil dieses Tutorials.

Kommentare werden geladen....

Kommentar zu diesem Artikel

Anonym mitdiskutieren oder einloggen Anmelden

Avatar
Zur Wahrung unserer Interessen speichern wir zusätzlich zu den o.g. Informationen die IP-Adresse. Dies dient ausschließlich dem Zweck, dass Sie als Urheber des Kommentars identifiziert werden können. Rechtliche Grundlage ist die Wahrung berechtigter Interessen gem. Art 6 Abs 1 lit. f) DSGVO.
  1. Avatar
    Avatar
    Bearbeitet von am
    Bearbeitet von am
    1. Avatar
      Avatar
      Bearbeitet von am
      Bearbeitet von am

Kommentare werden geladen....

Kommentar melden

Melden Sie diesen Kommentar, wenn dieser nicht den Richtlinien entspricht.

Kommentar Freigeben

Der untenstehende Text wird an den Kommentator gesendet, falls dieser eine Email-hinterlegt hat.

Freigabe entfernen

Der untenstehende Text wird an den Kommentator gesendet, falls dieser eine Email-hinterlegt hat.

copyright

Dieser Beitrag ist urheberrechtlich geschützt. Sie wollen ihn für Ihre Zwecke verwenden? Infos finden Sie unter www.mycontentfactory.de (ID: 45098147 / Frameworks & Sprachen)