Teil 1 beschrieb, wie PhoneGap und alle weiteren dazu erforderlichen Komponenten installiert werden. Teil 2 beschreibt, wie mit PhoneGap ein neues Projekt angelegt und aus einer Webseite eine native App für Android entwickelt wird.
Dieser Teil der Artikelserie setzt eine bereits funktionierende Webseite voraus. Auf die Möglichkeiten von PhoneGap, nämlich den Zugriff auf die Hardware des Smartphones, wird hier nicht näher eingegangen. Ziel war es, eine mobile Webseite als App nutzbar zu machen, ohne den Nutzer immer zum Umweg über Suche bzw. Browser zu zwingen.
Diese benötigt keinen Zugriff auf irgendwelche Funktionen des Telefons, daher ist diese Vorgehensweise vom Aufwand her recht gering.
Für weitere Informationen ist zum Beispiel das Buch Apps mit HTML5 und CSS3
Native Apps mit PhoneGap – Teil 2
In diesem Anwendungsfall genügt es, eine reine Weiterleitung zur mobilen Webseite in eine index.html zu packen. Dies funktioniert z.B. ganz einfach mit JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="de"> <head> <title>Deine App</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> <script type="text/javascript"> function onDeviceReady() { window.open('https://www.deine-domain.de/', '_self', 'location=no'); } </script> <body onload="onDeviceReady()"> </body> </html> |
Update: An dieser Stelle wurde der Artikel aktualisiert. In der aktuellen Version von Phonegap funktioniert scheinbar das Plugin childbrowser.js nicht mehr. Dafür wird nun das Plugin inappbrowser verwendet. Dieses erfordert allerdings eine andere Art der Weiterleitung (siehe Quelltext).
Mit der Option location=no wird die URL-Leiste des Browsers ausgeblendet.
PhoneGap lässt die WebApp in einer Art Browserhülle laufen und leitet so auf die normale Webseite weiter. Das hat folgende Vorteile:
1. Webseiten mit Datenbankzugriff: Liegt die Webseite auf einem Shared-Hosting-Paket, ist es in der Regel nicht möglich von außen auf die Datenbank zuzugreifen. Hier müsste man für die App also zusätzlichen Aufwand betreiben, um die Daten auszutauschen.
2. Seltene bis keine Updates der App: Durch die komplette Auslagerung der App-Inhalte auf den Server, muss die App (die ja nur aus der Weiterleitung besteht), nicht mit ständigen Updates über den Play Store versorgt werden.
Doch nichts ist ohne Licht und Schatten: Mit der kompletten Auslagerung der Inhalte sind diese natürlich auch nur verfügbar, wenn der Server läuft. Ist hier ein Ausfall, findet auch die App nicht mehr statt.
Android Entwicklermodus aktivieren
USB-Debugging aktivieren
Bevor das erste Projekt angelegt wird, sollte das eigene Android-Phone per USB an den Rechner angeschlossen und der Entwicklermodus bzw. USB-Debugging aktiviert werden. Damit kann die fertige App direkt auf dem Smartphone getestet werden und nicht über einen Emulator am Bildschirm.
Bis Android 4.1 konnte der Entwicklermodus ganz einfach über die Einstellungen aktiviert werden. Ab Android 4.2 hat Google die Option versteckt. In Einstellungen -> Über das Telefon findet sich als letzter Eintrag die Build-Nummer. Auf diese muss nun sieben mal „getatscht“ werden. Eine entsprechende Meldung zeigt an, dass der Entwicklermodus aktiviert wurde.
Zurück in den Einstellungen sind nun die Entwickleroptionen verfügbar, dort kann das USB-Debugging aktiviert werden.
Erstes Projekt in PhoneGap anlegen
Um mit dem ersten Projekt zu beginnen, muss PhoneGap zunächst die Bedingungen dafür schaffen, sprich: Die Struktur der App einrichten.
Dazu begibt man sich mit der Eingabeaufforderung in das PhoneGap-Verzeichnis.
App mit PhoneGap einrichten
Befindet man sich im richtigen Ordner, wird PhoneGap mit dem Befehl
phonegap create Appname
angewiesen ein neues Projekt zu erstellen. Appname steht hier natürlich nur exemplarisch und kann durch den passenden Namen ersetzt werden. Nachdem PhoneGap fertig mit dem Durchrödeln ist, präsentiert sich ein neuer Unterordner mit dem Namen, der bei Appname vergeben wurde.
PhoneGap hat in diesem Unterordner nun das nötige Gerüst für eine App erstellt. Zunächst ist für uns der Unterordner \www am interressantesten.
Wie wenig verwunderlich sein dürfte, müssen in diesem Ordner alle Dateien abgelegt werden, die zu unserer Web-App gehören. Sind im Projekt die CSS und JavaScript-Dateien in entsprechenden Ordnern abgelegt, so müssen auch diese in den \www Ordner kopiert werden.
Befinden sich die Projektdateien im Ordner \www, kann die App eigentlich schon erstellt werden. Dazu einfach wieder in die Eingabeaufforderung wechseln und folgenden Befehl eingeben:
cd Appname (Um in das Projektverzeichnis zu wechseln)
phonegap run android
Mit diesem Befehl startet PhoneGap mit der Erstellung der nativen App. Ist das Handy im Entwickler- und Debugging-Modus am Rechner angeschlossen, wird die App automatisch auf dem Smartphone installiert und gestartet. Befindet sich kein Handy am Rechner, versucht PhoneGap automatisch den Emulator zu starten.
Eines von Beiden sollte auf jeden Fall gelingen und somit die WebApp ohne Browser am Smartphone nutzbar sein.
Hässliche Icons von PhoneGap
Die App ist also auf dem Handy installiert, doch was ist das für ein hässliches Icon? PhoneGap versieht die App standardmäßig mit dem eigenen Symbol. Klar, hier muss noch ein eigenes Symbol eingefügt werden.
Nun könnte man, aufgrund der Ordnerstruktur, auf die Idee kommen, die Icons liegen im Ordner
\www\res\icons
Doch weit gefehlt: Die Icons die wirklich für die App verwendet werden sind im Ordner
\platforms\android\res
PhoneGap Icon Ordner
In diesem Ordner befinden sich weitere Ordner. Durch die vielen möglich Auflösungen von Android Smartphones, werden vom Icon verschiedene Versionen benötigt. Klaro, denn ein 42 x 42 Pixel großes Icon wirkt auf einem Full-HD-Display ziemlich futzelig.
Aber welche Icongröße muss denn jetzt in welchen Ordner? Hierfür gibt es ein kleines Tool namens makeappicon.com. Der Name ist auch gleichzeitig Programm. Eine empfehlenswerte Größe zur Erstellung des Icons sind 512 x 512 Pixel. Diese Größe ist ausreichend um diese vernünftig herunterskalieren zu können. Wer ganz sicher gehen will, nimmt 1024 x 1024 Pixel.
Ist das Icon erstellt, muss die Datei nur noch in die Ablegefläche bei makeappicon.com gezogen werden. Der Dienst erstellt dann aus der Datei die passenden Icons für jede Auflösung.
Anhand der Benennung ist auch ersichtlich, welches Icon in welchen Ordner kopiert werden muss.
Bei der nächsten Installation auf dem Handy sollte nun auch das Icon sichtbar sein.
Icon-Vorschau bei Makeappicon.com
Das soll es für Teil 2 gewesen sein. Wenn die App auf dem eigenen Handy läuft, sollten ausgiebig alle Funktionen getestet werden.
In Teil 3 wird es darum gehen, die App in den Google Play Store zu bringen, diese zu signieren und worauf noch so geachtet werden muss.
Hi,
die Idee mit dem sofortigen Umleiten (mittels window.location) aus der App auf den Webserver gefällt mir, aber da gibt es wohl auch weitere Nachteile neben dem Ausfall des Servers… Was ist z.B. mit dem Zugriff auf die Hardware des Phones? Das geht wohl nur, wenn die App local auf dem Device läuft, oder?
TIA
PGN
Wer die mobile Version seiner Webseite als App haben möchte, ist das hier eine schnelle und einfache Lösung. Sobald die Funktionen des Telefons benötigt werden, geht das so nicht mehr.
Der Serverausfall wäre natürlich blöd. Wenn ich aber in einer App von extern Daten nachlade, ist das Problem ja auch vorhanden.
Hi Steffen,
vielen Dank für die schnelle Antwort.
Eine letzte Frage: wann können wir mit dem dritten Teil deiner Phonegap-Serie rechnen?
Danke und Gruß
pgn
Moin,
ab nächste Woche ist mehr Zeit, da werde ich wohl den dritten Teil nachschieben können. Ich wollte dafür eine andere WebApp als Beispiel nehmen, aber die ist eben auch noch nicht soweit :-(
Die Idee mit der sofortigen Weiterleitung fand ich ebenfalls gut. Nur habe ich erst ziemlich spät realisiert dass die Hardware Funktionen sich nicht mehr ansteuern lassen. Hatte mich die ganze zeit gewundert warum das „deviceready“ Event von phonegap nicht ausgelöst wird. Das hatte mich ziemlich viel zeit gekostet um zu checken. Zum Glück braucht meine App nur pushnotification, welches ich am Anfang abfrage und dann erst weiterleite zur mobilen webapp.
Hallo,
ich bekomme bei phonegap run android jedesmal den folgenden Fehler.
Error: ANDROID_HOME is not set and „android“ command not in your PATH. You must
fulfill at least one of these conditions.
at C:\Users\Marcus\.cordova\lib\npm_cache\cordova-android\3.6.4\package\bin\
lib\check_reqs.js:159:19
at _fulfilled (C:\Users\Marcus\.cordova\lib\npm_cache\cordova-android\3.6.4\
package\bin\node_modules\q\q.js:798:54)
at self.promiseDispatch.done (C:\Users\Marcus\.cordova\lib\npm_cache\cordova
-android\3.6.4\package\bin\node_modules\q\q.js:827:30)
at Promise.promise.promiseDispatch (C:\Users\Marcus\.cordova\lib\npm_cache\c
ordova-android\3.6.4\package\bin\node_modules\q\q.js:760:13)
at C:\Users\Marcus\.cordova\lib\npm_cache\cordova-android\3.6.4\package\bin\
node_modules\q\q.js:821:14
at flush (C:\Users\Marcus\.cordova\lib\npm_cache\cordova-android\3.6.4\packa
ge\bin\node_modules\q\q.js:108:17)
at process._tickCallback (node.js:442:13)
at Function.Module.runMain (module.js:499:11)
at startup (node.js:119:16)
at node.js:929:3
Error: C:\Users\Marcus\.cordova\lib\npm_cache\cordova-android\3.6.4\package\bin\
create.bat: Command failed with exit code 8
at ChildProcess.whenDone (C:\Users\Marcus\AppData\Roaming\npm\node_modules\p
honegap\node_modules\cordova\node_modules\cordova-lib\src\cordova\superspawn.js:
135:23)
at ChildProcess.emit (events.js:98:17)
at maybeClose (child_process.js:766:16)
at Process.ChildProcess._handle.onexit (child_process.js:833:5)
[phonegap] executing ‚cordova run android’…
ich komme leider nicht weiter :/
Hallo Marcus,
sieht irgendwie nach einem Fehler in den Umgebungsvariablen aus. Das wird im ersten Teil beschrieben:
https://www.kritzelblog.de/eine-web-app-mit-phonegap-zur-nativen-app-machen/
mir ist aufgefallen das er mir unter C:\Program Files (x86)\Android\android-studio gar kein sdk ordner anzeigt?!
Konnte den Fehler soweit beheben allerdings neuer Fehler :D
Error: Failed to run „ant -version“, make sure you have ant installed and added
to your PATH.
Ant ist allerdings in PATH drinne
Kann mir einer meinen Fehler sagen ich versteh es nicht ? :/
E:\phonegap>phonegap create Appname
Creating a new cordova project with name „Hello World“ and id „com.phonegap.hell
oworld“ at location „E:\phonegap\Appname“
Using custom www assets from https://github.com/phonegap/phonegap-app-hello-worl
d/archive/master.tar.gz
E:\phonegap>cd Appname
E:\phonegap\Appname>phonegap run android
[phonegap] executing ‚cordova platform add android’…
[phonegap] completed ‚cordova platform add android‘
[phonegap] executing ‚cordova run android’…
cp: no such file or directory: E:\phonegap\Appname\icon.png
Running command: E:\phonegap\Appname\platforms\android\cordova\run.bat
Unable to locate tools.jar. Expected to find it in C:\Program Files\Java\jre1.8.
0_25\lib\tools.jar
Buildfile: E:\phonegap\Appname\platforms\android\build.xml
-set-mode-check:
-set-debug-files:
-check-env:
[checkenv] Android SDK Tools Revision 24.0.2
[checkenv] Installed at C:\Program Files\Android\sdk
-setup:
[echo] Project Name: CordovaApp
[gettype] Project Type: Application
-set-debug-mode:
-debug-obfuscation-check:
-pre-build:
-build-setup:
[getbuildtools] Using latest Build Tools: 21.1.2
[echo] Resolving Build Target for CordovaApp…
[gettarget] Project Target: Android 4.4.2
[gettarget] API level: 19
[echo] ———-
[echo] Creating output directories if needed…
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\ant-build
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\ant-build\res
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\ant-build\rsObj
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\ant-build\rsLibs
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\ant-gen
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\ant-build\classes
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\ant-build\dexedLi
bs
[echo] ———-
[echo] Resolving Dependencies for CordovaApp…
[dependency] Library dependencies:
[dependency]
[dependency] ——————
[dependency] Ordered libraries:
[dependency]
[dependency] ——————
[echo] ———-
[echo] Building Libraries with ‚debug’…
nodeps:
-set-mode-check:
-set-debug-files:
-check-env:
[checkenv] Android SDK Tools Revision 24.0.2
[checkenv] Installed at C:\Program Files\Android\sdk
-setup:
[echo] Project Name: CordovaApp
[gettype] Project Type: Android Library
-set-debug-mode:
-debug-obfuscation-check:
-pre-build:
-build-setup:
[getbuildtools] Using latest Build Tools: 21.1.2
[echo] Resolving Build Target for CordovaApp…
[gettarget] Project Target: Android 4.4.2
[gettarget] API level: 19
[echo] ———-
[echo] Creating output directories if needed…
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\CordovaLib\res
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\CordovaLib\libs
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\CordovaLib\ant-bu
ild
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\CordovaLib\ant-bu
ild\res
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\CordovaLib\ant-bu
ild\rsObj
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\CordovaLib\ant-bu
ild\rsLibs
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\CordovaLib\ant-ge
n
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\CordovaLib\ant-bu
ild\classes
[mkdir] Created dir: E:\phonegap\Appname\platforms\android\CordovaLib\ant-bu
ild\dexedLibs
[echo] ———-
[echo] Resolving Dependencies for CordovaApp…
[dependency] Library dependencies:
[dependency] No Libraries
[dependency]
[dependency] ——————
-code-gen:
[mergemanifest] Merging AndroidManifest files into one.
[mergemanifest] Manifest merger disabled. Using project manifest only.
[echo] Handling aidl files…
[aidl] No AIDL files to compile.
[echo] ———-
[echo] Handling RenderScript files…
[echo] ———-
[echo] Handling Resources…
[aapt] Generating resource IDs…
[echo] ———-
[echo] Handling BuildConfig class…
[buildconfig] Generating BuildConfig class.
-pre-compile:
-compile:
BUILD FAILED
C:\Program Files\Android\sdk\tools\ant\build.xml:601: The following error occurr
ed while executing this line:
C:\Program Files\Android\sdk\tools\ant\build.xml:720: The following error occurr
ed while executing this line:
C:\Program Files\Android\sdk\tools\ant\build.xml:734: Unable to find a javac com
piler;
com.sun.tools.javac.Main is not on the classpath.
Perhaps JAVA_HOME does not point to the JDK.
It is currently set to „C:\Program Files\Java\jre1.8.0_25“
Total time: 1 second
E:\phonegap\Appname\platforms\android\cordova\node_modules\q\q.js:126
throw e;
^
Error code 1 for command: cmd with args: /s,/c,ant,debug,-f,E:\phonegap\Appname\
platforms\android\build.xml,-Dout.dir=ant-build,-Dgen.absolute.dir=ant-gen
Error: E:\phonegap\Appname\platforms\android\cordova\run.bat: Command failed wit
h exit code 8
at ChildProcess.whenDone (C:\Users\Marcus\AppData\Roaming\npm\node_modules\p
honegap\node_modules\cordova\node_modules\cordova-lib\src\cordova\superspawn.js:
135:23)
at ChildProcess.emit (events.js:98:17)
at maybeClose (child_process.js:766:16)
at Process.ChildProcess._handle.onexit (child_process.js:833:5)
Das Problem hatte ich auch und habe es mit einer Änderung der Umgebungsvariablen gelöst:
JAVA_HOME: C:\Program Files\Java\jdk1.8.0_121
PATH: C:\Program Files (x86)\nodejs\;%JAVA_HOME%\bin;D:\Programme\Android\platform-tools;D:\Programme\Android\tools;%ANT_HOME%;C:\Program Files\Git\cmd
Also \bin aus JAVA_HOME entfernt, aber für die PATH Variable wieder hinzugefügt.
Ich hatte bei Maven mal das gleiche Problem gehabt:
http://stackoverflow.com/questions/24186592/maven-installation-under-windows-java-home-is-set-to-an-invalid-directory
Geht jetzt alles pc neugestartet und ging TOP Tutorial! Vielen Dank
Hi schön mal so ein Tutorial zu finden, Danke dafür schonmal. Ich hänge nur an dem Punkt:
phonegap run android bis dahin alles ohne Probleme, aber es öffnet weder den Emulator wenn kein Smartphone angeschlossen ist, noch lädt er die App darauf, wenn eines angeschlossen und wie beschrieben im Entwicklermodus ist.
Finde meinen Fehler leider nicht. -.-
Startet denn der Emulator aus dem SDK?
Eventuell nochmal die PATH-Variable durchgehen.
Also habe Path-variablen nochmal durchgesehen und neu Hinzugefügt.
Bekomme folgenden output:
[phonegap] executing ‚cordova run android‘ …
[phonegap] completed ‚cordova run android‘
aber ohne das merklich etwas geschieht….
Achja und Emulator startet nicht aus SDK. Gibts da ne Möglichkeit, dass zu forcieren?
Hm, so aus der Ferne ist das nicht einfach.
Alle Schritte davor mit create und so haben funktioniert?
Ja, die Schritte bis dahin verliefen problemlos.
Das ist komisch. Mir fällt auch gerade nix ein. Ist denn das Smartphone am Rechner sichtbar als Device oder Laufwerk?
Ja das wird auch angezeigt. Naja ich probier es weiter, Danke für deine Zeit!
So hab bisl rumgespielt und nun startet tatsächlich der emulator. Aber auf den Befehl: ‚cordova run android‘. bei ‚phonegap run android‘ passiert nix.
Aber er startet den emulator obwohl das Smartphone im debug-modus angschlossen ist. Er sagt dann no target detected → starting emulator.
Gibt es da einen Befehl, der auf das Telefon verweist?
Hallo ich bräuchte da mal Hilfe.
Wenn ich den Befehl „phonegap create appname“ eingebe dann kommt eine Fehlermeldung das es entweder falsch geschrieben ist oder nicht gefunden werden konnte.
Was könnte ich falsch gemacht haben?
Möglicherweise ist irgendwas an den PATH-Variablen nicht ganz korrekt? Welche PhoneGap-Version benutzt Du?
Da sich hier die Fehlersuchen häufen, werde ich in nächster Zeit mal die Beiträge überarbeiten.
Das Tutorial ist wirklich eine super Schritt für Schritt Anleitung! Klasse! :)
Eine Herausforderung ist es allerdings phonegap sauber ohne Fehler auf einem Windows 7 64bit zu installieren. Wie ich mittlerweile herausgefunden habe, liegt es an der node.js. Welche Version funktioniert denn bei dir? Die aktuelle (12.7) hat wohl mehrere Bugs.
Ach so. Die Java sdk reicht nicht. Wenn man die Visual Studio Community Edition installiert sind auf dieser Seite schon mal die Fehler beseitigt.
Kann ich momentan leider nicht rausfinden, habe Urlaub. Im Zweifel aber recht aktuell, da erst vor kurzem neu eingerichtet.
Hallo Steffen,
zunächst einmal vielen Dank für die Mühe, die Du Dir hier machst und gemacht hast.
Ich habe kein Smartphone angeschlossen. Auch bei mir kommt auf den run-Befehl kein Emulator. Nur:
[phonegap] executing cordova platforms add save android –save android–
Für eine Hundertstelsekunde, kaum wahrnehmbar, öffnet sich ein Fenster.
Was wäre richtig, wo es sich um eine Weiterleitung handelt? Wo soll übrigens die html-Datei hin?
Feue mich über Hilfe
Hallo,
die HTML-Dateien liegen im Ordner www (phonegap/namederapp/www
Bei dem Problem kann ich momentan nicht weiterhelfen, da ich die Sachen derzeit nicht installiert habe. Auf jeden Fall muss sich bei den neueren Versionen der einzelnen Programme was geändert haben, das hier nun dazwischen funkt.
Es ist komisch, das es unter Android bislang scheinbar keine andere, einfachere Möglichkeit dafür gibt. Für ’ne Windows-App mit der Technik benötigt man 10 Minuten.
Hallo,
gibt es jetzt den 3.Teil oder nicht?
Ich finde den nicht!?!
Hoffe auf eine Antwort.
Ich auch nicht…
Komme aber momentan auch nicht dazu, da was neues anzulegen oder die alten Sachen zu überarbeiten