So richtest du deine Entwicklungsumgebung für die Entwicklung mit Cordova ein.

Im ersten Artikel wurde der Rechner komplett für die Entwicklung einer hybriden Android App eingerichtet. Im zweiten Teil wurde die App mit Crosswalk und Cordova aufgesetzt und ein Emulator (AVD) zum Test der App eingerichtet. Nachdem du dort die Lauffähigkeit überprüft hast, können wir uns jetzt der Entwicklungsumegebung zuwenden.

IntelliJ IDEA (unsere IDE)

Test des Zusammenspiels der IDE und Cordova

Du solltest IntelliJ ordnungsgemäß installiert haben. Beim Aufsetzen des Rechners hatte ich dir vorgeschlagen, direkt auch Cordova über node.js zu installieren. Wenn du dies nicht gemacht hast, mach es bitte jetzt:

sudo npm install -g cordova

WebStorm wird mit dem PhoneGap/Cordova Plugin ausgeliefert, bei IntelliJ IDEA müssen wir das kurz selbst hinzufügen. Hierfür im Startbildschirm auf das Zahnrad “Configure” gehen und “Plugins” auswählen:

IntelliJ IDEA Plugins konfigurieren

IntelliJ IDEA Plugins konfigurieren

Im darauf folgendem Fenster siehst du alle bereits installierten Plugins. Über “Install JetBrains plugin…” kannst du neue Plugins hinzufügen. Bitte betätige diesen Button:

IntelliJ IDEA Plugins Übersicht

IntelliJ IDEA Plugins Übersicht

Suche im folgenden Fenster nach “Cordova” und installiere das Plugin (über den grünen Button):

Installiere das Cordova Plugin in IntelliJ IDEA

Installiere das Cordova Plugin in IntelliJ IDEA

Starte IntelliJ IDEA neu. Überprüfe anschließend, ob IntelliJ und deine Cordova Installation gut zusammen funktionieren, indem du ein Testprojekt anlegst:

IntelliJ IDEA "Create New Project"

IntelliJ IDEA “Create New Project”

Anschließend unter “Static Web” “PhoneGap/Cordova App” auswählen und mit “Next” bestätigen:

IntelliJ IDEA: PhoneGap/Cordova Project Skeleton erstellen

IntelliJ IDEA: PhoneGap/Cordova Project Skeleton erstellen

Im nächsten Fenster stellst du den Projektpfad und den Projektnamen ein. Eigentlich ist es relativ wurst, was du hier angibst, nach erfolgreicher Überprüfung löschen wir das Projekt sowieso. Der Pfad zur “PhoneGap/Cordova executable” sollte schon korrekt vorbelegt sein, ansonsten wähle hier den Pfad wie im Screenshot zu sehen:

IntelliJ IDEA: New Project Settings

IntelliJ IDEA: New Project Settings

Jetzt solltest du folgendes Fenster bekommen:

Projektansicht in IntelliJ IDEA

Projektansicht in IntelliJ IDEA

Sollte dein Ordner nicht die typische Cordova Projektstruktur (hooks, platforms, plugins, www, config.xml, usw.) beinhalten und stattdessen leer sein, schaue einmal in das “Event Log”. Steht dort der Fehler “Error creating PhoneGap/Cordova App. Cannot find files in the directory[…]” (oder ähnlich), war das Plugin noch nicht richtig initialisiert. Vor allem bei WebStorm kann dies vorkommen, da dort das Plugin vorinstalliert ist. Starte die IDE neu und lege das Projekt noch einmal komplett neu an, dann sollte alles gehen, so war es zumindest bei mir.
Anschließend kannst du das Testprojekt wieder löschen und mit deinem richtigen Projekt fortfahren. Du weisst jetzt, dass die IDE mit Cordova zusammen funktioniert, sodass du Cordova bequem aus der IDE steuern kannst. Sehr nützlich finde ich auch, dass man in der IDE eine Terminal Session öffnen kann, so kann man in dort alles steuert und nicht ständig die Fenster wechseln muss.

Dein Crosswalk + Cordova Projekt in IntelliJ öffnen / importieren

Jetzt kommen wir aber endlich zum eigentlichen Projekt zurück. Nebenbei: Ich erwähne hier so oft IntelliJ, dass man schon denken könnte, ich würde dafür bezahlt. Das ist aber, leider, nicht so, ich finde diese IDE einfach nur spitze und benutze sie gerne, weshalb ich sie dir ans Herz lege und in dieses Tutorial einbaue. Erstelle mit IntelliJ ein neues Projekt mit existierenden Dateien – “Import Project”:

IntelliJ IDEA: Create Project with Existing Sources

IntelliJ IDEA: Create Project with Existing Sources

Gebe anschließend den Ordner deines Projekts an. In meinem Fall also “/Users/bennybennet/dev/Projects/CurvedPong/impl/AndroidARM”:

IntelliJIDEA: Auswahl des Projektroots der zu importierenden Sourcen

IntelliJIDEA: Auswahl des Projektroots der zu importierenden Sourcen

Im folgenden Dialog kannst du auswählen, wie das Projekt importiert werden soll. In unserem Fall wählen wir “Create project from existing sources”:

Wie soll das neue Projekt in IntelliJ angelegt werden?

Wie soll das neue Projekt in IntelliJ angelegt werden?

Nach einem Klick auf das wunderschön blau leuchtende “Next” bekommst du ein weiteres Abfragefenster gezeigt. Dort legst du die “Project location” und den “Project name” fest. In unserem Fall ist die “Project location” natürlich die gleiche wie das Wurzelverzeichnis unseres Android ARM App Projekts, der Projektname währe frei Wählbar, ich lasse ihn aber auch auf “AndroidARM”.

IntelliJ IDEA: Projektdaten festlegen

IntelliJ IDEA: Projektdaten festlegen

Leider immer noch nicht am Ende, geht es über “Next” zu einem Dialog, der dir zeigt, das IntelliJ bereits einige Source-Files (Android + Java) erkannt hat. Hier wird nur festgelegt, dass die Unterordner jeweils wie normale Root-Ordner eines Projekts behandelt werden und so auch die Möglichkeit geschaffen wird, Projektmodule für diese “Projekte” in unserem Projekt anzulegen. Das benötigen wir aber nicht. In unserem Projekt befinden sich externe Projekte wie Cordova und Crosswalk, die wir in unserem Projekt nicht als Module anlegen wollen. Von daher entfernen wir alle Haken, bis auf den vor unserem Projektordner (“AndroidARM”):

IntelliJ hat Android- und Java-Files in unserem Projekt erkannt.

IntelliJ hat Android- und Java-Files in unserem Projekt erkannt.

Unter weiter folgen wir dem blauen Licht, mit “Next” sagt uns der Dialog, dass er erkannt hat, dass es sich um ein Android Projekt handelt, das ist super und endlich sind wir dem Ziel nahe. Durch das freudige drücken auf “Finish”, *tadaaa*, gibt kann endlich mit dem Projekt in IntelliJ gearbeitet werden.

Mein hybride Android App in der Projektansicht von IntelliJ IDEA.

Mein hybride Android App in der Projektansicht von IntelliJ IDEA.

Kleine Zwischenbemerkung. Es ist extrem wichtig, dass Bilddateien auf einer Homepage sehr gut komprimiert sind. Ich benutze hierfür meistens compressor.io – wie auch in diesem Artikel. Ist zwar echt extra Aufwand, vor allem, wenn man viele Bilder hat, aber es lohnt sich für die Endanwender / Besucher deiner Homepage. Bei der Erstellung einer Homepage kannst du das Komprimieren natürlich mit Gulp oder Grunt automatisieren. In einer hybriden App ist das komprimieren nicht so wichtig, zumindest nicht aus Rücksicht auf die Bandbreite, es verbessert aber die Performance der App ein klein wenig und sollte deshalb berücksichtigt werden.

Build n’ Run

Toolbar einblenden

Über “View – Toolbar” (grün markiert) kannst du dir eine sehr nützliche Toolbar (rot markiert) einblenden, welche dir einen Schnellzugriff, per Mausklick, auf die wichtigsten Tools gibt. Hier kannst du zB. in einem Rutsch deine App bauen und im Emulator / auf dem Device ausführen lassen, den AVD Manager oder SDK Manager aufrufen.

Nützliche Toolbar in IntelliJ IDEA einblenden.

Nützliche Toolbar in IntelliJ IDEA einblenden.

Natürlich ist das alles auch über Shortcuts zu erreichen, aber gerade für den Anfang ist die Toolbar spitze.

Crosswalk/Cordova Run Config in IntelliJ IDEA

Um die App für eine Test- oder Debug-Session zu bauen und auf dem von dir angelegten Emulator per Mausklick / Shortcut auszuführen, müssen wir noch eine “Run Configuration” erstellen. Der schnellste und einfachste Weg geht meiner Meinung nach über die tolle node.js Unterstützung von IntelliJ.

Die ganze Cordova-Skripte, wie zum Beispiel “build” und “run” sind am Ende node.js Skripte. Der Terminal-CMD

./cordova/run

führt eine Batch-Datei aus, die das gleichnamige node.js Skript “run” ausführt. Wir gehen jetzt also nicht den Umweg über das Terminal und die Batch-Datei sondern rufen mit der node.js Unterstützung von IntelliJ das “run”-node.js-Skript von Cordova auf.
Hierfür einfach unter “Run” auf “Edit Configurations…” (blau hinterlegt) und im darauf öffnenden Fenster auf das “+” (grün markiert) mit anschließender Auswahl von “Node.js” (rot markiert).

node.js "Run Configuration" in IntelliJ IDEA

node.js “Run Configuration” in IntelliJ IDEA

In der Konfiguration musst du nur 2, bzw. 3 Eingaben tätigen. Leg einen Namen fest, in meinem Fall “cordova run” (grün markiert) und gibt das auszuführende Cordova-node.js-Skript unter “JavaScript file” an (rot markiert). Ich würde dir vorschlagen, per “Applikation parameters” (blau markiert) noch den spezifischen (in Teil 2 der Serie angelegten – du erinnerst dich?) ARM Emulator anzugeben. Wenn du später noch Emulatoren mit x86 hast, sollte deine ARM App auch nur im ARM Emulator starten. Dies geschieht über den Parameter “–target=” mit dem dazugehörigen Namen. Ich hatte meine ARM Emulator Device “Nex5A442″ genannt: Nexus 5 / ARM / Android 4.4.2. Falls du einen anderen Namen hast und dich nicht mehr erinnerst, schau kurz im AVD Manager nach. (Geh auf Cancel und klick in der Toolbar auf AVD Manager, anschließend wieder zurück zur Konfiguration).

"Run Configuration" für das "./cordova/run"-node.js-Skript.

“Run Configuration” für das “./cordova/run”-node.js-Skript.

Das kannst du jetzt natürlich auch noch für die anderen Skripte erledigen, also zB. “build” (und diese dann im Optimalfall auch so benennen – “cordova build”), aber für den Anfang sollte “run” ausreichen.

Entwicklungsstart

Jetzt kann die Entwicklung eigentlich auch schon beginnen. Solange du ohne Cordova/PhoneGap Plugins auskommst, sollte sich deine Entwicklungsaktivität im Ordner “www” unter “assets” abspielen. In einem reinen Cordova-Projekt ist der “www” Ordner direkt im Root-Verzeichnis des Projekts.
Ich habe gute Erfahrungen damit gemacht, möglichst viel ohne Plugins (nativen Code) zu erledigen, am besten die ganze App nur in Webtechnologie zu schreiben. So kannst du deine hybride App auch im Browser ausführen und viel komfortabler und schneller testen. 

Hello World

Unter “Preferences” (Apfeltaste + ,) kannst du im Punkt “Editor – General – Appearance” die Zeilennummer im Editor anstellen. Hierfür setze bitte einen Haken bei “Show line numbers”. Das hilft beim folgen von Tutorial und auch bei der Besprechung des Codes mit anderen ungemein.

Für ein kleines eigenes “Hello World”, ändere einmal in Zeile 30 den Inhalt des <h1>

<h1>Hello World from "dein Name"</h1>

Abspeichern und anschließend laufen lassen. Hierfür in der Toolbar dein Run-Skript auswählen (bei mir “cordova run” – gelb markiert) und mit dem grünen Pfeil (blau markiert) ausführen.

App aus der Toolbar starten.

App aus der Toolbar starten.

Das dauert jetzt wieder eine Weile, wie wir schon wissen, aber dann:

Hello World from bennybennet

Hello World from bennybennet

Damit ist der Grundstein gelegt und ich würde vorschlagen: Einfach mal anfangen. Man könnte jetzt noch vieles weitere machen. Für die Entwicklung der hybriden App für mehrere Betriebssystem könnte man den www Ordner außerhalb des jeweiligen Projekts aufbewahren. Pure Cordova Projekte bieten soetwas sogar von Haus aus mit dem Parameter “–link-to” beim “create”.

Versionskontrolle

Wichtig ist noch die Versionskontrolle. Im Zweifel kannst du aber mit Git umgehen (ich empfehle auf jeden Fall Git als Versionskontrolle für Sourcecode) oder nimmst eine der vielen Quellen zur Hilfe, z.B:

deswegen werde ich jetzt hier nicht näher auf die Einrichtung oder Benutzung von Git eingehen. Der letzte Link ist sogar auf deutsch. Als Hoster empfehle ich zunächst ganz klassisch GitHub.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>