Einführung MIT App Inventor
Sobald alle Units korrekt angesteckt wurden und der Python Code in UIFlow hinzugefügt wurde, geht es im nächsten Schritt um die Erstellung der mobilen Applikation. Zuerst müssen die benötigten Komponenten in MIT App Inventor hinzugefügt werden.
Die Webseite von MIT App Inventor ist unter folgendem Link zu finden: https://appinventor.mit.edu/.
Nach erfolgreichem Aufrufen der Webseite, klicke anschließend auf das Feld „Create Apps!“.
Danach registriere dich auf der Seite oder verwende deinen Google Account, um automatisch registriert zu werden und akzeptiere die Benutzungsbedingungen. Anschließend erstelle ein neues Projekt unter „Start new project“ und verleihe der Applikation einen passenden Namen.
Danach ist die Nutzung der MIT App Inventor Plattform möglich.
Hier siehst du einen kleinen Überblick über die Ansicht des App Inventors:
Auf diesem Bild ist die “Designer-Ansicht” zu sehen. Diese kann rechts oben aber auch zur “Block-Ansicht” wechseln.
Hier zu sehen ist nun die “Block-Ansicht”, welche man rechts oben mittels dem Block Knopf umstellen kann:
Die Blöcke, die man zum Programmieren verwendet, befinden sich in dem Panel auf der linken Hälfte der MIT App Inventor Oberfläche. Dort kann zuerst eine Metakategorie ausgewählt werden und anschließend der notwendige Block per Drag-and-Drop in den Viewer gezogen werden:
Um mit dem Programmieren sinnvoll starten zu können, sollte man jedoch davor noch gewisse Konzepte kennen. Diese Konzepte werden in den nächsten Schritten beschrieben.
Control
Eine App funktioniert nicht ohne Regeln und Anweisungen. Aus diesem Grund sind gerade if-Abfragen essenziell, um ein Programm zu schreiben. Unter der Control Kategorie hat man die Auswahl zwischen mehreren Iterationen von if-Abfragen.
Variablen
Variablen stellen sozusagen das Gedächtnis eines Programms dar. Sie können Werte speichern, die im Zuge der Ausführung eines Programms geändert bzw. verwendet werden können, und zwar durch den Aufruf des Namens der Variable.
Beispiele unterschiedlicher Variablen:
Layout
Unter Layout können verschiedene Layout-Systeme ausgewählt werden, um den verschiedensten Komponenten eine Struktur zu verleihen. Somit stellt man sicher, dass gewisse Textfelder, Knöpfe oder sonstige Komponenten geordnet dargestellt werden.
Connectivity
In der Connectivity verleiht man der App Verbindungsmöglichkeiten. Für das Krisenmanagementsystem ist die Komponente „Web“ notwendig.
Als Texting werden die Textplatzhalter auf der Applikation bezeichnet, mit denen man gewisse Werte oder Strings eingeben kann.
Um ein Texting auf der Applikation anzuzeigen, muss man dieses von der linken oberen Ecke unter „Social“ – „Texting“ per Drag-and-Drop auf die Viewer Fläche ziehen. Diese Auswahlmöglichkeiten findet man in der Designer-Ansicht.
Danach erscheint in der Blocks-Ansicht eine Auswahlleiste für die Blöcke unter Viewer eine Subkategorie. Somit kann man jetzt die Blöcke auswählen, mit denen man die Ausgabe auf der App verändern kann:
Das Prinzip für andere Funktionen wie Label, Button, CheckBox, Image, ListView, Notifier und allen anderen Funktionen in der Palette ist das gleiche wie für Texting.
Über Media können spezifische Bilder hochgeladen werden, die anschließend in der Applikation verwendet werden können. Um diese hochzuladen klickt man zuerst auf „Upload File…“ wie in der nächsten Abbildung dargestellt.
Danach wird ein neues Fenster aufgerufen in dem durch Klick auf den „Durchsuchen…“ Knopf, die gewünschte Datei ausgewählt werden kann.
Verwendung der erstellten Applikation über ein Endgerät
Nachdem die Inhalte der MIT App Inventor Plattform vorgestellt wurden, ist der nächste Schritt die erstellte Applikation auf dem gewünschten Endgerät (Handy oder Tablet) auszuprobieren.
Lade und installiere die MIT AI2 Companion Applikation auf dein Endgerät herunter. Scan dafür diesen QR Code oder lade die App vom Play Store herunter. (Klicke hier für den Link)
Nach dem Herunterladen gehe die Installationsanweisung von der MIT AI2 Companion App durch. Die MIT AI2 Companion App muss nur einmal installiert werden. Nach erfolgreicher Ausführung kann die App auf dem Endgerät verwendet werden, wann immer ein neues Projekt gestartet wird.
Verbinde deinen Computer und dein Endgerät mit dem gleichen WiFi Netzwerk.
Öffne App Inventor Projekt und verbinde dich mit deinem Endgerät. Anschließend wähle „Connect“ und „AI Companion“ von der oberen Menü Fläche
Im nächsten Schritt wird ein QR Code auf deinen Computer angezeigt, die du mit deinem Endgerät lesen kannst. Öffne die MIT AI2 Companion App mit dem Endgerät und klicke anschließend auf „Scan QR Code“ und scanne den QR Code, der auf dem Computer angezeigt wird.
Nach einigen Sekunden wird die erstellte App auf das Endgerät geladen und ist einsatzbereit.
Lösung Komponenten mittels App Inventor
Nachdem nun die Oberfläche der App kreiert wurde, muss die Funktionalität der App noch erstellt werden. Zuerst muss auch die Block-Ansicht rechts oben umgestellt werden. Danach müssen alle nachfolgenden Blöcke nachgebaut werden. Die Farben der Blöcke sind ein Hinweis darauf, in welcher Meta-Kategorie dieser Block zu finden ist.
Zu aller erst müssen Variablen erstellt und initialisiert werden.
Variablen sind unter dem Reiter “Blocks” zu finden:
Dort sollten nun die nachfolgenden Variablen erstellt werden:
Die Zahlen, welche für light_rx_input bzw. humidity notwendig sind, sind unter “Math” zunfinden, die false-Operationen für bspw. light_rx_crit unter “Logic”, die Strings wie für serverURL unter “Text” und die leeren Listen wie für dataList unter “Lists”.
Als nächstes muss eine Kondition für die Komponente liveCheckBox angelegt werden, welche Ausgelöst wird, sobald die Check Box geklickt wird. Dies ist nötig, damit die App per live Überwachung Veränderungen des Zustandes mittracken kann, wie etwa eine Bewegung im Raum, die Störung der Barriere oder einem Temperatur- bzw. Luftunterschied.
Zu finden ist dieser Block innerhalb der liveCheckBox:
autoRefresh kann unter den Variablen gesetzt werden, indem im Dropdown Menü der entsprechende Name ausgewählt wird:
Die liveCheckBox wird wieder innerhalb der Blöcke für diese Komponente auf checked gesetzt.
Sobald die Applikation gestartet wird, ist ein Screen zu sehen. Wird dieser initialisiert – also ständig -, so soll die liveCheckBox automatisch auf jenen Wert gesetzt werden, welcher zuvor ausgewählt wurde. Dies muss mittels auto-refresh ständig überprüft werden, damit es zu keine Verzögerungen kommt. Auch die Methoden serverUrl und readData müssen zyklisch neu geladen werden, um live Daten ablesen zu können.
Um nun zu wissen, wie regelmäßig die Daten aktualisiert werden müssen, benötigt man die Methode timerClock.
Nun muss auch noch bestimmt werden, was mit der Applikation geschieht, wenn ein Fehler geworfen wird. Um es möglichst unkompliziert zu halten, wird die Applikation einfach beendet, sobald ein Error auftritt.
Tritt nun ein Fehler auf, so wird auch das autoRefresh auf false gesetzt, nachdem dies bei einer beendeten Applikation nicht mehr benötigt wird. Auch die liveCheckBox wird auf falsch gesetzt, und es soll eine Fehlermeldung auf dem Endgerät angezeigt werden.
Als nächstes wird eine Funktion für den goButton geschrieben, welche ausgelöst wird, sobald der Button gedrückt wird. Dabei solle die vorhin erstellte Methode readData und die richtige serverUrl aufgerufen werden. Danach wird der Status des goButtons überprüft. Ist dieser “Off”, so wird er zunächst auf “On” gesetzt, wonach eine Verbindung mit der bereits initierten server Url hergestellt wird. Von diesem Server werden die Daten ausgelesen.
Sollte der Status des goButtons auf “On” sein, so wird er lediglich auf “Off” gesetzt.
In der nächsten Abbildung wird die readData() Methode gezeigt, welche als einzige einen Unterschied aufweist, je nachdem welche Version verwendet wird. Für die Version 1 muss nichts verändert werden. Für die Version 2 ist es notwendig, den Text mit „The light in your room was turned on“ mit dem Text „The barrier was broken.“ zu ersetzen. Dafür wird der Text per Drag and Drop verschoben.
Um die Daten lesen zu können wird erst die globale Server Url auf die am Anfang festgelegte Url gesetzt. Danach wird diese Url auch im Web aufgerufen.
Als nächstes, in der if-Bedingung, werden die erhaltenen Daten der Units abgelesen und verwertet. Als erstes wird geprüft, ob die Luftfeuchtigkeit, welche vom Motionsensor gemessen wurde, über 30 ist. Gleichzeitig muss auch die Variable humCrit auf falsch gesetzt sein. Ist dies der Fall, so wird eine Warnung ausgesendet, dass die Luftfeuchtigkeit zu hoch ist, und humCrit wird auf true gesetzt.
Sollte die Luftfeuchtigkeit (wieder) kleiner-gleich 30 sein, so wird humCrit auf false gesetzt.
Die nächste If überprüft, ob die Lichtschranke durchbrochen wurde, dabei wird gecheckt, ob light_rx_input gleich 1 ist und light_rx_crit false ist.
Auch hier wird wieder eine Warnung ausgesendet, während light_rx_crit wieder angepasst wird.
Zu guter Letzt wird bestimmt, welcher Text in der Applikation angezeigt werden soll. Dafür muss erst sicher gestellt werden, dass eine stabile Verbindung zum Server besteht, weshalb der responseCode abgeprüft wird. 200 steht dabei für OK. Danach wird die globale dataList mit den erhaltenen Daten befüllt.
