Eine eigene Handy- App erstellen

Eine eigene Handy- App erstellen

Wer will nicht mal eine eigene App für sein Handy erstellen!? Nun da gibt’s jede Menge Möglichkeiten: Sehr beliebt sind das Framework Apache Cordova und Xamarin, aber hier mal ein ganz einfaches Tool: der MIT App Inventor.

Der “MIT App Inventor”

Der gehörte früher Google und wird jetzt vom MIT betreut, also vom Massachusetts Institute of Technology (auf dem auch Howard Wolowitz war). Er ist kostenlos, aber derzeit leider nur für Android (iOS soll noch kommen…irgendwann). Also kann man damit vorerst nur Apps für Android erstellen.

Hier zeige ich euch Schritt für Schritt wie ich meine App erstellt habe. Und wenn ihr gesehen habt, wie einfach das ist, dann wollt ihr bestimmt auch bald eine eigene App!

Installation

Am Handy muss man zuerst vom “Play Store” die App “MIT AI2 Companion” installieren. Und man braucht einen QR- Code Reader (also einen Barcode Scanner) am Handy.

Zum Anmelden braucht man einen Google account (also ggf. einen erstellen) und meldet sich mit seiner GMAIL Adresse an unter:
http://code.appinventor.mit.edu/login/

Nach dem Start findet man nicht nur eine “Hilfedatei” zum Durchlesen, sondern Videos, die einem Schritt für Schritt alles erklären: unter Guide / Resources / Hour of Code gibt es verschiedene Beispiele als PDF, Video und Tutorials und manche kann man sogar als fertige Beispiel-App einlesen.

Beispiel vom MIT:

Hello Codi    die ersten Schritte: eine Biene antippen damit Sie einen Sound abspielt
Talk to me    eine ausführliche Beschreibung für Sprachausgabe beim Schütteln
Ball Bounce   ein Ball fliegt über den Screen und prallt vom Rand ab
Digital Doodle  mit dem Finger auf dem Screen herum malen

Bei Problemen kann man einfach diese Kurse in aller Ruhe komplett durchmachen - das hilft sicher:
http://appinventor.mit.edu/explore/ai2/beginner-videos

Aber erst möchte ich euch meine App zeigen - ist ganz einfach, versprochen.



Die Oberfläche

Es gibt verschiedene Arten die App zu erstellen. Aber das MIT (und auch wir) empfehlen die App mit Handy und Laptop im gleichen (Heim-) Netz zu erstellen - so geht’s am einfachsten.

Unter “My Project” erstellt man bei “Start new project” ein neues Projekt und sucht sich einen Namen für das Projekt aus (meines heißt einfach “Malen”).

Zur Erklärung: Oben rechts ist ein Umschalter zwischen “Designer” und “Blocks”. der Designer (das was ihr oben seht) ist die Anordnung am Handy, also wie die App später am Handy aussehen soll, während bei Blocks der Code erstellt wird, der im Hintergrund der App ablaufen wird.

App testen

Wenn man seinen Code testen will gibt es zwei Methoden: man lädt sein Beispiel auf die MIT- App im Handy und führt diese aus (das macht man immer im “Anfangsstadium”) oder man erzeugt eine APK-Datei (ein Android Package, also eine Installationsdatei für eine Android App). In beiden Fällen wird am PC ein QR- Code angezeigt - am Handy startet man die “MIT App Inventor 2” App und tippt auf “scan QR code”. Damit wird die am PC erstellte App auf das Handy übertragen.
Beim Erzeugen einer APK Datei wird beim Scannen diese APK- Datei aufs Handy geladen. Diese startet man anschließend manuell und installiert damit seine eigene neue App (die besitzt das gleiche Icon wie die vom MIT).

Die erste eigene App

Im Designer wird in der Mitte das Handy dargestellt und hier kann man alles reinziehen was man verwenden will, also Buttons, Slider, Bilder, usw.
Unterhalb von dem Handy erscheinen die “non-visible components”, also die nicht sichtbaren Komponenten der App, wie z.B. die Kamera, der Lichtsensor, usw.

Nun will ich euch zeigen wie ich mein Programm erstellt habe. Es ist im Prinzip eine Erweiterung von “Talk to me” und “Digital Doodle” zusammen: man kann ein Bild aufnehmen, darin herum malen und es danach abspeichern.


Designer

Der Designer besitzt 4 Spalten: die “Palette”, den “Viewer”, die “Components” und die “Properties”.

Von links zieht man aus der “Palette” die Teile die man braucht in den “Viewer”. Um die Eigenschaften zu ändern klickt man bei “Components” das jeweilige Teil an und stellt unter “Properties” die Eigenschaften von diesem ein.

So soll meine App ausschauen:

  • oben will ich einen Rahmen haben - den brauch ich um die beiden Buttons zu gruppieren (HorizontalArrangement)
  • ich will zwei Buttons in dem Rahmen: einen zum Foto machen und einen zum Abspeichern von unserem finalen “Gemälde” (Buttons)
  • ich will einen Bereich unterhalb der Buttons als Hintergrund zum Malen (Canvas)
  • die App soll erkennen wenn das Handy geschüttelt wird (Accelerometer)
  • meine App soll mit mir sprechen (TextToSpeech)
  • ich brauch Zugriff auf die Kamera um ein Foto zu machen (Camera)
  • und am Ende will ich die Datei abspeichern (File)

Und los geht’s:

  • Als erstes zieht man in der “Palette” unter Layout ein “HorizontalArrangement” auf die Fläche vom Handy (das springt dann nach links oben).
  • Dann zieht man unter “User interfaces” einfach zwei Buttons in dieses Feld hinein.
  • Unter “Components” klickt man oben einen der beiden Buttons an und unter “Properties” stellt man die Breite “Width” auf 50 Prozent. Danach legt man noch unter “Text” den Namen fest. Das gleiche macht man mit dem zweiten Button.

  • In der “Palette” zieht man unter “Drawing and Animation” ein “Canvas” auf die Fläche darunter - das springt auch wieder nach oben unterhalb von den Buttons. Nun stellt man bei “Properties” die “Height” und die “Width” auf 100%.

  • Jetzt noch in der “Palette” unter “Sensors” den “AccelerometerSensor” einfach auf das Handy ziehen: der springt dann automatisch nach unten unterhalb vom Handy zu den “non-visible components”. Das gleiche machen wir unter “Media” mit dem “TextToSpeech” und der “Camera”. Und unter “Storage” brauchen wir noch ein “File”.

Dann sollte die Oberfläche aussehen wie oben dargestellt - einfach oder?
Noch zwei Hinweise:

  • Wenn man unter “Components” den “Screen1” anklickt, dann findet man in den “Properties” relativ weit oben auch unter “AppName” den Namen der App - den kann man hier jederzeit abändern.

  • Ebenfalls in den “Properties” kann man die Bezeichnung von dem “Screen1” eingeben: unter “Title” kann man den ändern und z.B. seinen eigenen Namen geben. Ich habe den geändert auf “Günthers App”: dieser “Title” erscheint dann im “Viewer” oben links in der App.

Blocks

Nun zu den Blocks. Unter Blocks wird wie bei Scratch einfach der Code zusammengestellt. Dazu wird wie vorhin erklärt ganz oben rechts auf den Umschalter “Blocks” geklickt.

Hier gibt es nur zwei Spalten: “Blocks” und “Viewer”. Wenn man unter “Blocks” z.B. “Control” anklickt, dann erscheinen alle Control- Blöcke. Da packt man irgendeinen und zieht den in den “Viewer” rein. Wenn man den falschen hat dann einfach im Viewer diesen packen und nach rechts unten in den Papierkorb schieben.

Nun wollen wir uns sechs so einzelne Blöcke in dem “Viewer” erstellen:

  • Beim Starten soll der Hintergrund der App orange werden, die Malfarbe setz ich auf Rot und die Strichstärke ist mit “5” schön dick

    Das alles soll passieren wenn man die App startet und sich der “Screen1” initialisiert. Also muss man links unter “Blocks” den “Screen1” anklicken: dort findet man den Block “when Screen1.Initialize”: den packen wir und ziehen ihn in den Viewer (der sieht zwar von der Farbe her aus wie ein “Control” so wie der Block ganz oben, einen “when Screen1”- Block findet man dort aber nicht).

    Beim Starten wollen wir den Hintergrund ändern, den “Canvas”. Also müssen wir links unterhalb von Screen1 den “Canvas1” anklicken und die drei Blöcke “set BackgroundColor to”, “set PaintColor to” und “set LineWidth to” holen. Diese grünen Blöcke findet man ziemlich weit unten.
    Die drei Blöcke schieben wir in den “when Screen1 Initialize” hinein: wenn man den Screen1 mit der Maus verschiebt müssen die anderen 3 Blöcke sich mit verschieben.

    Die drei Blöcke zeigen noch jeweils einen Fehler an, weil noch etwas fehlt:
    Die beiden Farben Orange und Rot findet man unter “Colors” und die Strichstärke findet man ganz oben unter “Math” - dann muss nur noch die Stärke von “0” auf “5” geändert werden.

    So sollte der erste Block dann aussehen:

    Die Farben kann man danach beliebig ändern, indem man mit der linken Maustaste auf die Farbe klickt und eine andere auswählt.

  • Nun zum zweiten Block - wo man den platziert ist egal. Wenn der linke Button gedrückt wird, dann soll die App mit der Kamera ein Bild machen und es als Hintergrundbild anzeigen. Der linke ist bei mir der “Button1”, also nehme ich den “when Button1.click” und unter “Camera” ziehe ich den Block “TakePicture” da rein.

  • Und wenn das Bild gemacht wurde (und bestätigt wurde) dann soll dieses Bild als Hintergrundbild angezeigt werden. Unter “Camera” findet man den “AfterPicture”- Block und den “get image” findet man unter “Variables”. Die verschiedenen Blöcke sind durch die unterschiedlichen Farben einfach zu finden. Die restlichen Blöcke findet ihr jetzt bestimmt auch ohne genauere Erklärung.

  • Wenn im Bereich von dem “Canvas” die Bewegung des Fingers erkannt wird, dann soll die App genau diesen Weg nachmalen - also von den vorherigen X,Y- zu den aktuellen X,Y- Koordinaten.

  • Wenn der rechte Button gedrückt wird dann soll das aktuelle Hintergrundbild in einer Datei abgespeichert werden:

  • Und zuletzt: wenn das Handy geschüttelt wird, dann soll der Hintergrund wieder gelöscht werden (also wieder orange werden) und die App soll das Bestätigen mit der Sprachausgabe “OK”.
    Wenn ihr wollt könnt ihr die grünen Blöcke aus “Screen1.Initialize” raus kopieren: anklicken mit der rechten Maustaste und “duplicate” auswählen.



App übertragen

Wenn das alles eingegeben wurde, wollen wir die App natürlich testen.

Wenn man oben bei “connect” auf “AI companion” klickt, wird ein QR- Code erzeugt und angezeigt. Dann startet man die MIT App am Handy und tippt auf “scan QR code”. Damit wird die erstellte App auf das Handy geladen und gestartet.

Der “connect” bricht manchmal ab, gerade am Anfang wenn man länger keine Verbindung benutzt, das Handy sich abschaltet oder wenn man kurz was anderes am Handy nachschaut. Wenn das also nicht funktioniert (und das passiert halt ein paar Mal), dann geht man unter “connect” auf “Reset connection” und probiert das ganze nochmal.
Nicht ärgern, das ist mir auch dauernd passiert

Danach startet eure App und ihr solltet einen orangen Bildschirm sehen. Auf dem könnt ihr mit dem Finger herum malen und wenn man das Handy schüttelt, wird der Bildschirm gelöscht und “OK” ausgegeben.
Nun macht mal ein Foto mit dem Button “camera”. Das Bild muss noch bestätigt werden (bei meinem Handy mit einem Häkchen, das ist aber bei jedem anders).
Jetzt könnt ihr in dem Foto herum malen und anschließend “speichern”. In meinem Handy werden die Bilder in dem Ordner “Pictures” abgespeichert. Und wenn man jetzt nochmal schüttelt ist alles wieder weg.

Und so sieht die App bei mir aus - da habe ich meine Maus fotografiert und sie "verschönert":

Das war die erste App - das ist doch ganz einfach und intuitiv…
Nun könnt ihr die weiteren Funktionen selbst ausprobieren - denn DIY steht für “do it yourself”, weil selber machen viel mehr Spaß macht!

Anmelden oder Registrieren, um zu kommentieren.