Zum Inhalt springen
Der Guide für ein smartes Leben.
VG Wort Pixel
Android-Apps in der Cloud

Android-Entwicklung mit dem Google App Inventor

Immer mehr Android-Apps finden sich im Store von Google. Doch mit einem simplen Editor stricken Sie eigene, auch komplexe Anwendungen, die Sie an Freunde weiter geben oder im Store verkaufen können.

Autor: Walter Saumweber • 19.10.2011 • ca. 2:35 Min

apps
apps
© PC Magazin
Inhalt
  1. Android-Entwicklung mit dem Google App Inventor
  2. Funktionalität des Programms
  3. Anspruchvolle Anwendungen, Smartphone einbeziehen

"Wenn jemand daran gehen möchte, eigene Applikationen für mobile Endgeräte zu entwickeln, muss er nicht nur umfassende Programmierkenntnisse mitbringen, sondern sich auch mit den unterschiedlichsten Technologien beschäftigt haben." Eine gängige Aussage von erfahrenen Programmierern. Bisher. Fü...

"Wenn jemand daran gehen möchte, eigene Applikationen für mobile Endgeräte zu entwickeln, muss er nicht nur umfassende Programmierkenntnisse mitbringen, sondern sich auch mit den unterschiedlichsten Technologien beschäftigt haben." Eine gängige Aussage von erfahrenen Programmierern. Bisher. Für die Entwicklung von Android-Apps hat sich das nun gründlich geändert.

Der Schlüssel zum Erfolg heißt Google App Inventor (kurz: AI). Google hat AI Mitte 2010 in einer geschlossenen Betaversion bereitgestellt. Seit Dezember letzten Jahres ist die Plattform für jeden zugänglich, und sie stellt alles, was Sie für die App-Entwicklung benötigen, als kostenlosen Web-Service zur Verfügung. Sie brauchen nicht einmal ein Telefon angeschlossen zu haben, denn Sie testen Ihre Apps mit dem integrierten Simulator.

Statt Code-Zeilen einzutippen, arbeiten Sie in AI mit grafischen Puzzlesteinen, die Sie im Editor intuitiv zu Funktionen zusammenfügen. Das Tool basiert auf der Java-Laufzeitumgebung in Version 6 (www.java.com/de ). Der Teil der Entwicklungsumgebung, den Sie lokal installieren müssen und der dann mit den webbasierten AI-Komponenten zusammenwirkt, nennt sich App Inventor Setup Software.

Die Download-Links für die verschiedenen Betriebssysteme Windows, Mac und Linux sowie eine kleine Anleitung finden Sie auf der Seite appinventor.googlelabs.com/learn/setup . Starten Sie die Installer-Datei und folgen Sie den Anweisungen. Den vorgeschlagenen Installationspfad - bei Windows in der Regel C:\Program Files\AppInventor\commands-for-Appinventor - sollten Sie auf keinen Fall ändern.

Sie starten Ihre Android-Apps-Entwicklungsumgebung im Browser mit der URL appin ventor.googlelabs.com (am zuverlässigsten in Chrome). Zunächst erscheint die Google-Anmeldeseite. Geben Sie hier Ihre Google-E-Mail-Adresse und das zugehörige Passwort ein, und klicken Sie anschließend auf Sign in. Beim ersten Aufruf müssen Sie nun noch die Lizenzbedingungen von AI bestätigen, danach gelangen Sie über die Verknüpfung My Projects zum AI Designer.

Hallo Welt

Ai
Das erstes AI-Projekt: Alles ist übersichtlich angeordnet und nahezu selbsterklärend.
© PC Magazin

AI besteht aus zwei Komponenten: zum einen aus dem AI Designer, der im Browser zur Verfügung steht und zur Gestaltung einer Oberfläche dient. Zum anderen gibt es den Blocks Editor, der sich in einem separaten Fenster öffnet und die Programmlogik zur Verfügung stellt.

Hinzu kommt noch ein virtuelles Smartphone. Googles Hallo-Welt-Beispiel-Programm mit AI heißt Hello Purr, und indem Sie es nachvollziehen, machen Sie sich mit den wichtigsten Entwicklungsschritten vertraut. Für das Programm benötigen Sie die beiden Dateien kitty.png (appinventor.googlelabs.com/learn/tutori als/hellopurr/HelloPurrAssets/kitty.png ) und meow.mp3 (appinventor.googlelabs.com/learn/tutorials/hellopurr/HelloPurrAssets/me ow.mp3 ).

Natürlich können Sie das Beispiel mit Ihren eigenen Dateien entsprechend abwandeln. Klicken Sie im AI Designer auf die Schaltfläche New, um ein neues Projekt anzulegen. Geben Sie dem Projekt einen Namen, z.B. Maunz1 (Leerzeichen sind nicht erlaubt), und bestätigen Sie mit OK.

Danach wird die Design-Oberfläche gleich etwas bunter. In der linken Palette sehen Sie jetzt alle Steuerelemente, die Sie Ihrem Projekt hinzufügen können, im Viewer-Fenster erscheint das Bild eines Handys. Der Bereich Components zeigt die jeweils aktiven Komponenten. Da Sie ja noch keine hinzugefügt haben, sehen Sie hier nur die Screen-Komponente, die das Display des Smartphones darstellt.

Im Bereich Properties können Sie die Eigenschaften der jeweils selektierten Komponente bearbeiten. Ändern Sie hier doch gleich einmal die Hintergrundfarbe, indem Sie für die Eigenschaft BackgroundColor eine neue wählen.

Für die App benötigen Sie nur eine zusätzliche sichtbare Komponente, nämlich einen Button. Ziehen Sie diesen mit der Maus aus der Palette auf den Viewer. Überzeugen Sie sich davon, dass das Button-Steuerelement im Bereich Components selektiert ist. Löschen Sie nun im Bereich Properties den Text für den Button. Klicken Sie anschließend in das Textfeld unter Image und dann auf Add.