Als Alternative zum bereits vorgestellten Webserver direkt auf dem ESP32 (Teil 5: Mit ESPAsyncWebServer das Handy als Steuerpult) möchte ich noch die Steuerung über eine eigene Handy-App vorstellen. In diesem ersten Beitrag dazu geht es um die Basics der App-Entwicklung an sich.
Eine App für Android oder iOS zu erstellen, muss nicht kompliziert sein. Ein sehr einfacher Start gelingt mit dem MIT App Inventor, der nicht nur einen grafischen Editor für die Bedienoberfläche der App mitbringt, sondern auch die Programmierung wie bei der Einsteiger-Sprache Scratch durch Blöcke visualisiert, die per Drag&Drop zusammengestellt werden können. Das ganze läuft bequem als Webanwendung im Browser und kommt ohne lokale Installation aus. Ich beschränke mich hier auf Android, da die Installation der App unter iOS noch weitere Schritte benötigt. Evtl. ergänze ich das später. mehr zu App Inventor und iOS unter http://appinventor.mit.edu/ios_tips .
Anmeldung am MIT App Inventor
Am einfachsten ist die Anmeldung über die Webseite http://appinventor.mit.edu/ und den Button „Create Apps“. Die Anemldung erfordert allerdings einen Google-Account. Wer diesen nicht hat oder nicht benutzen will, kann über http://code.appinventor.mit.edu/ auch ohne Account loslegen. Man muss sich allerdings einen „revisit code“ erstellen, um später wieder auf seine Projekte zugreifen zu können.
Die erste App
Ein neues Projekt startet mit einem leeren Handy Bildschirm. Per Drag&Drop ziehen wir aus der Leiste links unter „User interface“ zwei Elemente auf den Bildschirm:
- Label
- Button
Den Button wollen wir grafisch umgestalten, um später die Möglichkeiten für Änderungen an den Eigenschaften von Elementen zu zeigen. Dazu bitte zwei Medien-Dateien hochladen, die ich hier als Download verfügbar mache. Prinzipiell gehen aber auch andere Grafik-Dateien:
Dann ändern wir noch die Eigenschaften des Buttons. Zuerst wird der Button auf dem dargestellten Handy-Bildschirm ausgewählt. Ganz rechts im Fenster „Properties“ kann dann beim Eintrag „Image“ die Datei „button_red.jpg“ ausgewählt werden. „Height“ und „Width“ können jeweils auf 80 pixels gesetzt werden und den Text ändern wir auch etwas sinnvoller ab, z.B. „Los!“. Unsere „App“ sieht dann so aus:
Verbindung zum Handy mit der Companion App
Damit wir die App live testen können, muss einer Verbindung zu einem Android-Handy hergestellt werden. Dazu wird auf dem Handy die App „MIT AI2 Companion“ benötigt, die im Play Store geladen werden kann:
Wichtig ist für den nächsten Schritt, dass das Handy im gleichen WLAN/Netzwerk wie der Computer mit dem Webbrowser angemeldet ist!
Im App Inventor rufen wir dann im Menü „Connect“ den AI Companion auf. Es öffnet sich ein Popup mit einem QR-Code. Jetzt starten wir die MIT AI2 Companion App auf dem Handy und wählen die blaue Schaltfläche „scan QR code“. Mit der Kamera scannen wir dann den QR Code und nach einer kurzen Synchronisation sollte unsere App auf dem Handy zu sehen sein.
Solange die Verbindung zwischen Handy und Computer besteht, wird die App auf dem Handy direkt aktualisiert, wenn wir etwas im App Inventor ändern.
Funktionen hinzufügen mit Blöcken
Da unsere App bislang keinerlei Funktion hat, fügen wir eine Beispiel-Funktion ein. Und zwar soll sich der Text des Labels und das Aussehen des Buttons nach Antippen des Buttons ändern. Wir wechseln zunächst in den Block-Editor durch Klick auf „Blocks“ oben rechts:
Der MIT App Inventor basiert auf einem Ereignis gesteuerten Konzept. D.h. Ereignisse, wie z.B. Interaktionen des Benutzers oder ein Zeitablauf lösen den Aufruf bestimmter Programmteile aus. In unserem Fall soll das Programm durch Antippen des Buttons ausgelöst werden. Wir suchen also den Button in der Leiste ganz links und dann das entsprechende Ereignis und ziehen es in das rechte Fenster:
Jetzt müssen noch die Anweisungen die freie Fläche neben „do“ eingefügt werden, die die gewünschten Änderungen auslösen:
- Label1: set Text
- Button1: set Image
Alle Blöcke lassen sich leicht per Drag&Drop zusammenfügen und verschieben. Ein Rechts-Klick auf einen Block eröffnet weitere Möglichkeiten. Für den Text muss noch ein entsprechender Text-Block aus dem Bereich „Text“ hinzugefügt werden. Das fertige Programm sieht dann so aus:
Auf dem Handy wird nun nach Click auf den roten Button die Farbe des Buttons auf grün geändert. Gleichzeitig wird im Textfeld „Hello World“ angezeigt. Fertig 🙂
Projekt als App installieren
Fast fertig 😉 Denn die App läuft im Moment über die Companion App. Wenn wir eine eigenständige App erstellen möchten, benötigen wir unter Android die .apk Installationsdatei. Wer möchte kann vorher im Menü „Projects“ unter „Project Properties…“ noch einen Namen und ein Icon vergeben. Im App Inventor lässt sich die APK-Datei dann über das Menü „Build“ herunterladen:
Für die Installation nach dem Download muss man dem Browser noch die Rechte geben, Apps aus anderen Quellen zu installieren. Wer dies nicht möchte, kann auch nach dem Download das Verzeichnis über einen Dateimanager (z.B. Astro) öffnen und von dort die APK-Datei auswählen. Die Rechte zur Installation erteilt man in diesem Fall dem Dateimanager.
Jetzt sind wir alle grundlegenden Schritte zur Erstellung beliebig komplexer Apps durchgegangen. Ich hoffe dieser kleine Guide hilft. Im nächsten Beitrag geht dann mit der Bluetooth-Verbindung zwischen App und ESP32 weiter.