Android-Programmierung für Anfänger – MIT App Inventor

Der MIT App Inventor ist ein Cloud-basiertes Tool. Machen wir Apps für Android- oder iOS-Geräte per „Drag and Drop“-Methode direkt im Webbrowser. Nachdem MIT App Inventor schnell eingerichtet haben, können wir mit der Erstellung von Apps beginnen.

Live-Tests sind während der Erstellung von Anwendungen möglich. Für Live-Tests muss der MIT App Inventor Companion auf unsere Telefon oder Tablet installiert sein. Und es ist wichtig, dass unsere Telefon und Computer mit demselben WLAN-Netzwerk verbunden sind.

Wenn wir sind fertig, erstellen wir unsere erste Android-App. Der Editor ist unter ai2.appinventor.mit.edu zu finden. Zu beginnen klicken wir auf „Create Apps!“ Taste.

Wählen wir dann „Start new project“ aus dem Menü „Projects“.

Geben wir dann im Popup-Fenster den Namen Ihrer Anwendung ein. Lass das jetzt HelloWorld sein.

App Inventor besteht aus dem Designer und dem Blockeditor. Beginnen wir mit dem Designer. Die Editoroberfläche besteht aus vier Spalten.

In der Spalte „Palette“ finden wir die Komponenten, aus denen wir die benötigten Komponenten per Drag & Drop an die entsprechende Stelle in der Spalte „Viewer“ ziehen können. Eine Kopie des ausgewählten Elements wird in der Spalte ‚Components‘ angezeigt. Hier können wir durch Anklicken die Eigenschaften des Artikels in der Spalte ‚Properties‘ einstellen.

Um unsere Anwendung live zu testen, öffnen wir die auf unsere Telefon installierte Anwendung „ MIT AI2 Companion “ und klicken wir auf die Schaltfläche „QR-Code scannen“.

Klicken wir im Webinterface im Menü „Connect“ auf „AI Companion“. Der für die Verbindung erforderliche QR-Code wird angezeigt.

In wenigen Sekunden sehen wir unsere App namens ‚Hello World‘ auf unserem Telefon.

Die Anwendung wird ausgeführt, aber es passiert nichts. Eine gewisse Interaktion ist erforderlich. Fügen wir in der Spalte „Palette“ ein Textfeld und eine Schaltfläche hinzu.

Wir können sehen, dass in der Spalte ‚Components‘ ein Textfeld namens ‚Label1‘ und eine Schaltfläche namens ‚Button1‘ als untergeordnete Elemente von ‚Screen1‘ erstellt wurden.

Klicken wir auf ‚Label1‘ und geben wir in der Spalte ‚Properties‘ als ‚Text‘ ‚Drücken Sie den Knopf!‘ und für ‚Button1‘ ‚Text‘ ‚Hello World‘ ein.

Dies vervollständigt das Aussehen unserer Anwendung, aber es passiert nichts, wenn wir den Knopf drücken. Wechseln wir nun in den Blockeditor, klicken wir oben rechts auf die Schaltfläche ‚Blocks‘.

Auf dieser Oberfläche befinden sich zwei Säulen. In der Spalte ‚Blocks‘ sind die zum Ausführen unseres Programms benötigten Steuerelemente in Kategorien gruppiert, von denen wir einfach den entsprechenden Block in das ‚Viewer‘-Feld ziehen.

Die Steuerung spricht fast für sich. Wir verbinden sie einfach miteinander.

An dieser Stelle wird durch Drücken von ‚Button1‘ der Inhalt von ‚Label1‘ durch die angegebene Zeichenfolge ersetzt, in diesem Fall ‚Hello World‘.

---

Und jetzt erweitern wir das Programm, füge eine weitere Schaltfläche hinzu, die unsere Anwendung in ihren ursprünglichen Zustand zurückversetzt. Gehen wir dazu zurück zum ‚Designer‘-Editor und fügen wir eine weitere Schaltfläche hinzu, dann schreiben wir ‚Zurück‘ auf den Wert von ‚Text‘.

Wir können jetzt zum Blockeditor zurückkehren.

Damit unsere Anwendung funktioniert, müssen drei Blöcke erstellt werden.

Der erste Block verbirgt eine Schaltfläche namens ‚Button2‘ beim Start.

Der zweite Block ändert den Inhalt von ‚Label1‘ in ‚Hello World‘, wenn wir ‚Button1‘ drücken, dann versteckt ‚Button1‘ und zeigt ‚Button2‘ an.

Wenn der ‚Button2‘ -Schaltfläche gedrückt wird, ändert der Block den Inhalt von ‚Label1‘ zurück in den ‚Drücken Sie den Knopf! ‚, blendet dann den ‚Button2‘ -Schaltfläche aus und zeigt den ‚Button1‘ -Schaltfläche wieder an.

Mal sehen, was wir gemacht haben.

Um unsere Anwendung zu installieren, müssen wir eine Datei mit der Erweiterung ‚(.apk)‘ erstellen. Klicken wir im Menü „Build“ auf „Android App (.apk)“. Nach kurzer Zeit ist die Installationsdatei fertig. Wir haben die Möglichkeit, den neu ausgefüllten Antrag durch Scannen eines QR-Codes herunterzuladen oder sofort zu installieren.

Wir können mit den Komponenten ein bisschen spielen, wir können sie umfärben, wir können ihre Größe und Position ändern. Wir können verschiedene Layouts hinzufügen. Ein paar Klicks und das Aussehen unserer App ändert sich komplett.

Ich hoffe, wir konnten Ihnen zeigen, wie einfach es ist, mit wenigen Klicks eigene Android-Apps zu erstellen.

Download der Projektdatei: HelloWorldExample.zip