Willkommen bei einem neuen Beitrag des Kurses Programmierung mit Arduino und Protocoder für Maker! In dieser Lektion werden wir Protocoder in unserem Terminal installieren (egal ob es sich um ein Smartphone oder ein Tablet handelt) und die ersten Schritte unternehmen. Protocoder ist eine Entwicklungsumgebung für schnelles Prototyping von Android-Apps. Sie enthält eine komplette Web-IDE mit einer Vielzahl von Beispielen und alles passend im Taschenformat!
Download der mobilen App
Der erste Schritt besteht darin, die App von der Webseite von Protocoder unter Downloads auf unser Terminal herunterzuladen. Es empfiehlt sich, die Protocoder-App direkt auf das Gerät herunterzuladen, das wir verwenden werden.
Im Grunde ist es egal, welche der beiden Versionen ihr herunterladet. Sie unterscheiden sich nur darin, dass die normale Version weder den Versand von Textnachrichten noch das Realisieren von Anrufen erlaubt, weshalb wir diese Funktionen dann entsprechend nicht nutzen können. Wenn wir auf die Version klicken, die wir ausgewählt haben, wird eine .apk-Datei (Application Package File) heruntergeladen. Wenn wir die Anwendung von unserem Android-Gerät heruntergeladen haben, tippen wir auf die Download-Benachrichtigung, um sie zu installieren. Im gegenteiligen Fall müsst ihr die App auf euer Gerät übertragen und von einem Datei-Explorer aus die Protocoder-App installieren. Wenn ihr zuvor noch keine App mit einer .apk-Datei installiert habt , erscheint ein Warnhinweis. Um diesen zu deaktivieren, markiere die Option Unbekannte Herkunft im Sicherheitsmenü der Android-Einstellungen. Im folgenden Video könnt ihr sehen, wie die Installation von Protocoder vor sich geht.
Zugriff auf die IDE von Protocoder
Um in Protocoder zu programmieren, können das Android-Gerät und der Computer, die du verwendest, über einen WLAN-Hotspot verbunden werden (das ist die empfohlene Methode) oder aber auch über ein USB-Kabel (diese Methode wird auf der Internetseite unterhalb der Downloads erklärt). Um auf die Entwicklerumgebung oder die IDE con Protocoder zuzugreifen, müssen wir einen Internet Browser verwendet und die IP-Adresse eingegen, die unterhalb der Protocoder-Schnittstelle angegeben wird. Auf der nachstehenden Abbildung findest du ein Beispiel.
Sobald wir Zugriff erhalten haben, können wir anfangen, unsere eigenen Programme zu erstellen.
Ein neues Projekt erstellen
Um ein neues Projekt zu erstellen müssen wir auf die Taste New Project auf dem Protocoder Interface drücken oder in der Protocoder-App in Android auf das Menüsymbol (rechte obere Ecke) und anschließend New. Jetzt müssen wir dem neuen Projekt nur noch einen Namen geben und schon kann es losgehen. Wir nennen dieses Projekt “Hola_mundo” (Hallo Welt) und verwenden es, um die Funktionsweise von Protocoder kennenzulernen und die ersten Schritte zu tun. Wenn wir das Projekt erstellt haben, können wir anfangen es zu editieren.
Das Projekt editieren
Um das Projekt zu editieren müssen wir auf die IP zugreifen wie es zuvor im Abschnitt Zugriff auf die IDE von Protocoder erklärt wurde. Dann klicken wir auf das Projekt, das wir gerade erstellt haben, wenn dies über ein mobiles Interface geschehen ist. Wenn wir das Projekt über das Web Interface erstellt haben befinden wir uns bereits im Editor. 
Im oberen Bereich des Bildschirms finden wir die Optionen des Projekts. Dazu zählen die Option Save, die uns das Speichern des Projektes erlaubt, die Option Projects, mit der uns eine Liste unserer Projekte und Beispiele angezeigt wird, sowie Run, die den Code in unserem Terminal ausführt. Auf der rechten Seite finden wir Quick Reference (Kurzübersicht), in der sich die verschiedenen “Kommandos” finden, die wir in unser Projekt einfügen können. Direkt unterhalb der Kurzübersicht findet sich ein kleines Feld, über das jede Art von Datei, wie Bilder oder Audios, hochgeladen werden können, um sie anschließend zu nutzen. Um hochgeladene Dateien mit einem Datei-Explorer wieder zu entfernen, gehen wir zumProtocoder-Ordner um die Dateien dann aus dem Projekt-Ordner zu entfernen. Darüber hinaus finden wir im unteren Bereich des Bildschirms die Konsole, in der wir Information drucken und die Fehlermeldungen ansehen können.
Die Nachricht erstellen
Protocoder verwendet JavaScript um das Schreiben von Android-Apps zu ermöglichen. Daher verwenden wir die eigene Syntax dieser Sprache und JavaScript eigene Funktionen in unserem Programm. Für dieses Projekt erstellen wir ein Textfeld, das beinahe die ganze Breite des Bildschirms einnehmen wird. Es gibt “Kopfzeilen”-Optionen , die für gewöhnlich am Anfang des Bildschirms stehen:
|
1 2 3 4 5 |
ui.toolbar.title("¡Hola mundo!"); // Wir geben den Titel ein (Hallo Welt!) ui.toolbar.bgColor(55, 155, 155, 255); // Wir ändern die Farbe der Titelleiste ui.toolbar.show(true); // Wir stellen die Anzeige der Titelleiste ein //ui.screenMode("fullscreen"); // Eine Vollbildansicht ist möglich ui.screenOrientation("portrait"); // Wir stellen den Portraitmodus ein |
Es ist nicht zwingend notwendig, diese Optionen einzufügen, aber wir erhalten durch sie bessere Kontrolle darüber, wie unsere App angezeigt wird. Dann deklarieren wir Variablen, die den visuellen Elemente, die wir erstellen, dabei helfen, sich an jegliches Bildschirmformat anzupassen. So wird es einfacher, unsere App zu teilen, ohne dass wir Änderungen oder Anpassungen durchführen müssen. Für das Deklarieren einer Variablen verwenden wir diese Syntax:
|
1 |
var nombre_variable = dato; |
Im Gegensatz zu anderen Sprachen “passen sich” die Variablen in Javascript an die Art der Daten “an”, die wir zuweisen, weshalb es nicht notwendig ist anzugeben, um welche Art von Variable es sich handelt.
|
1 2 3 |
var margin = 10; //Die Randgröße die wir verwenden. var w = ui.screenWidth - 2*margin; //Für die Breite der Elemente verwenden wir die Variable w var h = 150; // Für die Höhe der Elemente verwenden wir die Variable h |
Indem wir die Codezeile var w = ui.screenWidth – 2*margin einfügen, vergewissern wir uns, dass jedes Element, das wir in die Benutzerschnittstelle einfügen, fast den ganzen Bildschirm auf egal welchem Gerät einnimmt. Nachdem wir die “Kopfzeilen” unserer Anwendung konfiguriert haben, können wir sie einzeln speichern und immer wieder als Entwurf heranziehen, wenn wir eine neue App erstellen. Wir deklarieren und “konfigurieren” das Element, das unsere erste App bilden wird. Hierfür verwenden wir den folgenden Code:
|
1 2 |
var holaMundo = ui.addText("¡Hola Mundo!",margin,margin,w,h); // Die Parameter sind Text, X-Position. Y-Position, Breite und Höhe |
Wie bei allen anderen Variablen bestimmen wir zuerst den Namen. Anschließend verwenden wir ui.addText(), um Protocoder anzugeben, dass die Variable, die wir erstellen werden innerhalb der API des UI (User Interfaces oder Benutzerschnittstelle) liegt und das wir später Text hinzufügen wollen. In Klammern geben wir die für die Texterstellung benötigten Parameter an. Diese sind:
|
1 |
ui.addText(texto_a_mostrar,posición_X,posición_Y,ancho,alto); |
Die verschiedenen Elemente, die wir einfügen können, besitzen unterschiedliche Parameter. Wir verwenden Beispiele und die Referenzen, um zu wissen um welchen Parameter es sich handelt. Wenn wir die Entwicklung der App abgeschlossen haben, tippen wir auf Run und sehen, wie die App in unserem Terminal ausgeführt wird. Wir können auch auf die anderen Apps zugreifen, die wir irgendwann einmal von unserem Terminal aus erstellt haben, indem wir auf das jeweilige “Symbol” der Anwendung im Menü Projects tippen.
Wir teilen unser Projekt
Um das Projekt teilen zu können, tippen wir in der Liste der Protocoder-Projekte im mobilen Gerät auf das Symbol des Kontextmenüs (drei Punkte) in der oberen rechten Ecke des Projektnamens, anschließend auf Share project as .proto file und wählen abschließend den Service aus, über den wir es teilen wollen. Jetzt kannst du anfangen, deine eigenen Projekte zu erstellen und sie zu teilen!
