PhoneGap 3 Entwicklungsumgebung unter Windows und OS X

Publiziert am 19. November 2014 von Jörg Barres

Um CrossPlatform-Apps zu erstellen, ist momentan eine PhoneGap-Einrichtung sinnvoll.

Und da die Installation nicht ganz ohne Aufwand ist, schreibe ich hier mal ein Protokoll.

Windows

Alle Programme sollten in der zum System passenden Version (32bit/64bit) installiert werden.

Alle Installationen sollten mit Admin-Rechten durchgeführt werden.

Ich werde diese Ordnerstruktur verwenden:

E:\AndroidD:\Android\android-sdk
E:\Android\apache-ant
E:\Android\Apps

Der App-Ordner kann aber auch auf einem Netzlaufwerk liegen, das dann auch ein Webserver-Laufwerk sein kann. So kommt man auch mit einem Browser an die App.

Java JDK installieren

Download: http://www.oracle.com/technetwork/java/javase/downloads/index.html

Einfach immer mit Ja, OK und Weiter alles abnicken.

Folgende Systemvariablen setzen:

  • JAVA_HOME: C:\Program Files\Java\jdk1.x.x_xx
  • Path: %JAVA_HOME%\bin
    Die Pfadangabe am Ende mit vorangestelltem ; anhängen

Android SDK-Tools installieren

Hinweis:
Es ist nicht die komplette Umgebung mit Eclipse etc. nötig, die SDK-Tools reichen.

Download: http://developer.android.com/sdk/index.html

Installation in beliebigen Ordner, bei mir E:\Android\android-sdk

Folgende Systemvariablen setzen:

  • Path: E:\Android\android-sdk\platform-tools;E:\Android\android-sdk\tools
    Die Pfadangabe am Ende mit vorangestelltem ; anhängen

SDK-Manager starten und folgende Einstellungen vornehmen:

  • Android SDK Build-tools V21 abwählen
  • Android SDK Build-tools V19.1 auswählen
  • Android 5 komplett abwählen
  • Android 4.4.2 komplett auswählen

Auf „Install xx packages“ klicken und Lizenzen bestätigen

Apache-Ant installieren

Download: http://ant.apache.org/bindownload.cgi

In geeigneten Ordner auspacken, bei mir E:\Android\apache-ant

Folgende Systemvariablen setzen:

  • ANT_HOME: E:\Android\apache-ant
  • Path: %ANT_HOME%\bin
    Die Pfadangabe am Ende mit vorangestelltem ; anhängen

GitHub installieren

Download: https://windows.github.com/

Auf der Kommandozeile folgendes eingeben:

E:\Android> git config –global user.name „YOUR NAME“

E:\Android> git config –global user.email „YOUR EMAIL ADDRESS“

Anwendung dann noch einmal starten und wieder beenden.

Node.js installieren

Download: http://nodejs.org/

Installieren und alles mit OK und Weiter durchklicken.

PhoneGap installieren

Auf der Kommandozeile folgendes eingeben:

E:\Android> npm install -g phonegap

Win-AVD-ManagerAndroid-Device erstellen

Auf der Kommandozeile den AVD-Manager starten:

E:\Android> android avd

Auf dem Register „Device Definitions“ ein passendes Gerät aussuchen. Ich nehme ein „Nexus One“ und klicke auf „Create AVD“. Win-AVD-Manager-DeviceDann noch diese Einstellungen vornehmen:

  • Target: Android 4.4.2 API19
  • CPU: ARM
  • Skin: no skin

Alles bestätigen und schließen.

Tests durchführen

Die Tests laufen alle in einem „DOS-Fenster“, heute heißt das ja eher Shell oder Kommandozeileninterpreter 🙂

Create-Test

In den Ordner für die Apps wechseln.

E:\Android\Apps> phonegap create HelloWorld

Win-CreateHelloWorld

Jetzt sollte es hier einen Ordner HelloWorld geben.

E:\Android\Apps> cd HelloWorld

E:\Android\Apps\HelloWorld>

Plugin-Test

Auch wenn diese App kein Plugin braucht, zum Testen ob es funktioniert, im Ordner der App folgendes eingeben:

E:\Android\Apps\HelloWorld> phonegap local plugin add org.apache.cordova.device

Win-Plugin

Hinweis:
Bei praktisch allen Beschreibungen habe ich eine andere Syntax gefunden, die kann aber in meinem Netz nicht aufgelöst werden:
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
Auch Variationen der URL durch die IP, mit http oder ohne Protokollangabe haben bei mir nicht funktioniert. Keine Ahnung woran es liegt, ich habe diverse DNS-Server ausprobiert.

Build-Test

E:\Android\Apps\HelloWorld> phonegap build android

Win-build

Win-EmulatorEmulator-Test

E:\Android\Apps\HelloWorld> phonegap run android –emulator

Jetzt dauert es eine ganze Weile,bis der Emulator startet und das abgebildete Default-Bild zeigt.

Android-Test

Dazu muss natürlich ein Android-Gerät im USB-Debug-Modus angeschlossen sein.

E:\Android\Apps\HelloWorld> phonegap run android –device

Hinweis:
Falls die App schon auf dem Gerät ist, vor einer Neuinstallation diese löschen, sonst gibt es Fehlermeldungen.

OS X

not yet ready – sorry, no time

Quellen

Dieser Beitrag wurde unter IT-Technik veröffentlicht. Setze ein Lesezeichen auf den Permalink.