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.

apps

© PC Magazin

apps

"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

© PC Magazin

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

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.

Mehr zum Thema

Amazon Blitzangebote
Technik-Deals

Die Highlights der Amazon Blitzangebote - heute u.a. dabei: Android-7-Smartphones ab 80 Euro, Sony-Soundbar, WLAN-ac-Stick und mehr
Amazon Neuheiten November - Edge of Tomorrow
Vorschau auf Film- und Serien-Highlights

Amazon Prime Video lockt im November 2017 mit Film-Highlights wie "Edge of Tomorrow" und "La La Land" sowie neuen Folgen von "Vikings".
shutterstock_562747039
VR-Brillen

3D-Games lösten platte Arcade-Spiele ab. Die Grafik wurde zwar immer besser, aber wirkliches Eintauchen bieten erst Virtual-Reality-Brillen. Unser…
shutterstock_583880041
Online-Videorekorder

Mit Online-Videorekordern und -TV-Anbietern sehen Sie das aktuelle Fernsehprogramm und können Filme, Dokumentationen und Serien kinderleicht…
Windows 10 Creators Update
Wichtige Daten

Die Dateien auf Ihrem PC sind ständig in Gefahr. Regelmäßige Backups sind unerlässlich. Wir zeigen, welche Dateien Sie stets in Sicherheit bringen…