Eine Web-App mit PhoneGap zur nativen App machen – Teil 1

Wer eine App benötigt und keine der für die gängigen Mobilgeräte Programmiersprachen kann, wird das Näschen wohl zunächst mal eine Weile in Bücher versenken müssen.
Wer aber seine App-Idee auch mit HTML 5, CSS und JavaScript umsetzen möchte, kann sich die Lernerei sparen. PhoneGap kann nämlich aus einer Webseite eine native App machen. Für Android, iOS, Windows 8 und noch mehr…

Was ist PhoneGap?

Der Markt der Mobilgeräte ist eigentlich nur unter drei Playern aufgeteilt: Google mit Android, Apple mit iOS und Microsoft mit Windows Phone 8. Entwickler, die Ihre App für alle drei Systeme veröffentlichen möchten, müssen quasi auch drei verschiedene Apps programmieren.

Glücklicherweise sind die Webstandards mit HTML 5, CSS3 und JavaScript soweit fortgeschritten, dass eine Vielzahl an Anwendungen quasi auch als Webseite fungieren kann. Nachteil: Sobald spezielle Funktionen von Smartphones zum Zuge kommen sollen (Bewegungssensor, GPS) erreichen auch diese Techniken Ihre Grenzen.
An dieser Stelle kommt das Projekt PhoneGap (auch Cordova) ins Spiel. PhoneGap kann eine Web-App in eine native App umwandeln. Diese läuft dann direkt ohne Umweg über den Browser auf dem Smartphone. Zumindest ist für den Anwender kein Browser sichtbar. PhoneGap packt die Web-App also in eine Art Browserhülle. Das Besondere daran: PhoneGap ermöglicht auf diese Art auch Webanwendungen den Zugriff auf die Hardware. So lassen sich via JavaScript zum Beispiel die aktuellen Geokoordinaten auslesen.
Mit diesen Funktionen wird sich diese Artikelserie allerdings nicht näher befassen. Es geht lediglich darum aus einer mobilen Webseite oder einer Web-App eine native App zu erstellen, ohne dafür Java bemühen zu müssen.

Doch bis die eigene WebApp soweit ist, fließt noch so einiges Wasser diverse Flüße entlang. Das mit den Tränen habe ich mir jetzt verkniffen… ;-)

Wer sich bisher noch nicht mit Entwicklungsumgebungen, Java und derartigen Dingen beschäftigt hat, steht recht schnell vor einem Haufen Fragen. Dieser Artikel versucht hier ein wenig unter die Arme zu greifen. Ich stand am Anfang ebenso vor einem riesigen Berg mit Fragen. Und da deutschsprachige Anleitungen rar gesät sind, soll diese hier ein wenig Hilfe bieten. Dieser Artikel bezieht sich allerdings lediglich auf Android Apps, gearbeitet wird mit Windows.

PhoneGap installieren

Wer sich unter PhoneGap eine bequeme Programmoberfläche vorstellt, die mit wenigen Klicks aus HTML eine App zaubert, liegt (leider) verkehrt. PhoneGap wird über die Kommandozeile gesteuert.
Es gibt auch einen Webdienst (build.phonegap.com), der aus den hochgeladenen Dateien eine App (.apk) erstellt, die dann heruntergeladen werden kann. Hier ist es mir allerdings nicht gelungen, der App gezielt Rechte zu vergeben. Wenn keine Funktion zum Auslesen des Adressbuchs innerhalb der App besteht, die App aber die Rechte dazu hat, ist das normalerweise kein Problem. Aber viele Nutzer installieren keine Apps auf Ihrem Gerät die auf alle Funktionen Zugriff haben.

1. Bevor PhoneGap also installiert werden kann, muss zunächst Node.js heruntergeladen und installiert werden. Node.js ist eine Art Server, der Netzwerkanwendungen ermöglicht. Die Installationsdateien kommen als Windows Installer und müssen nur einfach ausgeführt werden. In welchen Ordner die Installation stattfindet, ist nicht wichtig.

2. Da native Android Apps mit der Sprache Java programmiert werden, ist die Installation des Java SDK notwendig. Java ist eine Programmiersprache mit der auch Android Apps programmiert werden. Phonegap benötigt das SDK zum Kompilieren der Web-Apps in native Anwendungen. Einfach unter diesem Link das richtige Paket aussuchen, runterladen und installieren. Auch hier ist der Installationspfad nicht entscheidend.

3. Android Studio runterladen und installieren. Das Android Studio ist die offizielle Entwicklungsumgebung für Android Applikationen von Google. Auch diese Software muss zunächst heruntergeladen und installiert werden.

4. Git installieren. Git ist eine Management-Software für Quellcode und unter anderem für die Plugins bei Phonegap nötig.

5. Fertig? Nö, immer noch nicht ;-)
Es fehlt noch Apache Ant. Dieses Programm hilft dabei, aus Quelltexten ausführbare Programme zu erzeugen. Nun denn, auch Apache Ant muss heruntergeladen und installiert werden.

Umgebungsvariablen anpassen

Damit alle eben installierten Programme problemlos aufeinander zugreifen können, müssen die Pfade zu den jeweiligen Programmen in den Umgebungsvariablen hinzugefügt werden.

Achtung, wir schweifen kurz ab: Wer aus DOS-Zeiten kommt und mit der autoexec.bat gearbeitet hat, kennt das Prinzip: Befehle können in jedem beliebigen Unterverzeichnis eingegeben werden, anhand des hinterlegten Systempfades in der autoexec.bat konnte DOS diese auch ohne spezielle Pfadangaben durchführen. So funktioniert auch die Umgebungsvariable. Ausschweifung beendet.

Um die Windows-Umgebungsvariablen bearbeiten zu können, muss die Systemsteuerung gestartet werden. Danach einfach den Punkt „System“ auswählen und die „Erweiterten Systemeinstellungen“ öffnen. Es öffnet sich ein kleines Fensterchen, in dem unten ein Button beschriftet mit „Umgebungsvariablen“ erscheint.
Nach einem beherzten Klick öffnet sich ein noch kleineres Fenster. Und nur Gott weiß, wieso Microsoft die Fenstergrößen fixiert hat.
Möglicherweise existieren einige der Variablen schon. In dem Fall sollte geprüft werden, ob der Pfad noch stimmt. Hilfreich hierfür ist auch parallel geöffnetes Explorer-Fenster.

Umgebungsvariable für JAVA_HOME anlegen:

Ist in den Systemvariablen im unteren Bereich keine Variable mit dem Namen JAVA_HOME vorhanden, muss diese über den Button „Neu“ angelegt werden. Dazu wird der Name vergeben (JAVA_HOME) und als Wert der Variablen der Installationspfad von Java. Bei einer Standardinstallation lautet dieser

c:\Programme\Java\Ordnername\bin

Achtung Backslash: Anders als im Web verwendet Windows zur Trennung von Ordnern nicht den Schrägstrich /, sondern den Backslash \. Dieser wird über ALT GR + ß erzeugt.
Bei komplizierteren Pfaden ist der Explorer nützlich: Einfach den Installationsordner suchen und in der oberen Leiste wird der Pfad angezeigt. Dieser muss dann nur von Hand in das obige Format als Variablenwert eingetragen werden.

Umgebungsvariable für Apache Ant anlegen:

Die Variable für Apache Ant heißt ANT_HOME. Dieser Pfad muss nicht nur in den Installationsordner verweisen, sondern dort auch in den Unterordner \bin. Im Idealfall also c:\ant\bin.

Die Systemvariable Path bearbeiten:

An dieser Stelle bin ich nicht ganz sicher ob das nötig ist, aber ich habe die eben angelegten Variablen auch nochmal in die Path-Variable eingetragen. Die einzelnen Pfade müssen mit einem Semikolon getrennt werden. Hier muss auch der Pfad zu nodeJS und dem Android Studio zum Ordner \platform-tools und \tools reingepackt werden.

C:\Program Files\nodejs\;%JAVA_HOME%;C:\Program Files (x86)\Android\android-studio\sdk\platform-tools;C:\Program Files (x86)\Android\android-studio\sdk\tools;%ANT_HOME%;C:\Program Files (x86)\Git\cmd

PhoneGap installieren

Nun aber ist es soweit: PhoneGap kann installiert werden. Das funktioniert aber, wie oben bereits angedeutet, nicht auf die bei Windows sonst bekannte, herkömmliche Weise. Da NodeJS installiert wurde, steht uns dieses in der Eingabeaufforderung zur Verfügung. Nutzer von Windows 7 öffnen die Eingabeaufforderung durch das Öffnen des Startmenüs und der Eingabe von cmd. Alternativ lässt sich die Eingabeaufforderung auch über Start -> Alle Programme -> Zubehör -> Eingabeaufforderung finden. Unter Windows 8 einfach mit Rechts auf das Windows-Symbol unten links klicken und Eingabeaufforderung auswählen.

Ist das nette kleine Fensterchen mit dem fröhlichen schwarzem Hintergrund geöffnet, blinkt einem freudig der Cursor entgegen.

Achtung Eingabeaufforderung: Hier arbeitet man quasi auf dem nackten Betriebssystem. Die schöne und bequeme Oberfläche von Windows und anderen Betriebssystem sind eigentlich nichts anderes als eine Tapete, die über diesen schwarzen Bildschirm geklebt worden sind. Erst Windows 95 ermöglichte ein direktes Starten des Rechners in die grafische Benutzeroberfläche.

 

In der Regel befindet man sich nach dem Starten der Eingabeaufforderung im Nutzerverzeichnis auf Laufwerk C:. Soll Phonegap auf einem anderen Laufwerk installiert werden, muss zunächst zu diesem gewechselt werden. Seine verschiedenen Fesplatten bzw. Laufwerke sollte man beim Namen kennen, im Beispiel hier nehmen wir Laufwerk D:.
Um nun zum Laufwerk wechseln zu können, einfach in die Eingabeaufforderung

d:

eintippen und Enter drücken. Die Zeile springt weiter und der Prompt zeigt

d:\>

an.

Der Übersicht halber sollte Phonegap nicht einfach in das Hauptverzeichnis installiert werden, sondern in einen passenden Unterordner. Dazu muss dieser aber natürlich erst angelegt werden. Dazu dient der Befehl md (make directory). Also in die Eingabeaufforderung

md phonegap

eintippen. Erscheint keine weitere Fehlermeldung, hat das funktioniert. Um nun Phonegap in diesem Ordner zu installieren, muss die Installation aus diesem Ordner gestartet werden. Mit dem Befehl cd (change directory) kann in diesen Ordner gewechselt werden. Also

cd phonegap

in die Eingabeaufforderung tippen und Enter drücken. Der Prompt sollte nun so ausehen:

d:\phonegap>

Das Anlegen des Ordners kann natürlich auch über den Windows Explorer erfolgen, aber jetzt hat vielleicht der ein oder andere wieder was dazu gelernt ;-)
Es ist an der Zeit die Installation zu starten. Dafür einfach eingeben:

npm install -g phonegap

und mit Enter bestätigen. Kurze Zeit tut sich nichts, dann beginnt der Download und die Installation. Je nach Internetverbindung kann das den einen oder anderen Moment dauern.
Damit ist PhoneGap installiert und man kann damit loslegen, sein erstes Projekt zu erstellen. Wie das funktioniert, ist dann Thema von Teil 2 dieser Artikelserie.