Konvertieren eines Cordova-Projekts in ein PhoneGap-Projekt

PhoneGap ist ein Open Source-Framework zum schnellen Erstellen von plattformübergreifenden mobilen Apps mithilfe von HTML5, JavaScript und CSS. Adobe PhoneGap Build ist ein Cloud-Dienst, mit dem Sie mobile Apps ohne SDKs, Compiler und Hardware schnell erstellen und problemlos kompilieren können. In diesem Artikel wird das Konvertieren eines mit Visual Studio erstellten Apache Cordova-Projekts in ein PhoneGap-Projekt sowie die Verwendung des Cloud-Diensts „PhoneGap Build“ beschrieben.

Einer der Hauptunterschiede zwischen einem Visual Studio- und dem PhoneGap-Projekt ist die Anwendungsdefinition in der Konfigurationsdatei („config.xml“). Die folgenden Aufgaben sind erforderlich, um ein Visual Studio-Projekt in ein PhoneGap-Projekt zu ändern:

1. Erstellen eines neuen Cordova-Projekts mit Visual Studio

2. Erstellen der PhoneGap-Projektstruktur

3. Aktualisieren der Datei „config.xml“

4. Hochladen des Cloudbuilds

5. Signieren von Code und Bereitstellen der App

Erstellen eines neuen Cordova-Projekts mit Visual Studio

Zur Erstellung von Anwendungspaketen benötigt der cloudbasierte PhoneGap-Build nur die Webressourcen der Anwendung, die auf Ihre HTML-, CSS-, Bild-, JS-Dateien und ähnliche Dateien beschränkt sind. PhoneGap Build ist voraussichtlich nicht in der Lage, Ihre Anwendung fehlerfrei zu kompilieren, wenn systemeigene Dateien hochgeladen werden („.h“, „.m“, „.java“ usw.). Da die von Visual Studio erstellte Projektstruktur der Cordova-Projektstruktur entspricht, hostet der Ordner „www“ des Projekts jetzt alle Webressourcen, die von der Anwendung benötigt werden.

Nachdem Sie ein Visual Studio-Projekt erstellt haben, können Sie Ihre Webressourcen in ein PhoneGap Build-Projekt verschieben. Es wird empfohlen, dass Sie zum Hosten des PhoneGap-Projekts einen neuen Ordner (außerhalb des Speicherorts für Ihr Visual Studio-Projekt) erstellen und dann den Ordner „www“ an den neuen Speicherort kopieren.

Erstellen der PhoneGap-Projektstruktur

Stellen Sie beim Strukturieren des PhoneGap-Projekts sicher, dass sich die Dateien „config.xml“ und „index.html“ in der obersten Ebene der Ordnerstruktur der Anwendung befinden. In diesem Beispiel wird der Ordner „www“ als Ordner der obersten Ebene verwendet. Andernfalls können Sie die Anwendung nach Bedarf strukturieren. Kopieren Sie die Datei „config.xml“ aus dem Stammordner in den Ordner „www“ des PhoneGap Build-Projekts. Kopieren Sie außerdem die systemeigenen Ressourcen aus dem Ordner „res“ (res\icons bzw. res\screens) in den Ordner „www“ des PhoneGap Build-Projekts.

Nachdem Sie alle Dateien und Ordner kopiert haben, sollte das PhoneGap Build-Projekt wie folgt aussehen.

Da die Anwendung möglicherweise Dateien oder Ordner enthält, die in der endgültigen gepackten Anwendung nicht erforderlich sind (z. B. nicht verwendete Begrüßungsbildschirme, Pakete, Artefakte, nicht kompilierte Dateien usw.), unterstützt PhoneGap Build eine spezielle Datei namens „.pgbomit“.

„.pgbomit“ ist eine Datei, die Sie erstellen und zu einem Ordner hinzufügen können, um PhoneGap Build anzuweisen, den Ordner als Quelle systemeigener Anwendungsdateien auszuschließen. (Sie können diesen Ordner jedoch auch dazu verwenden, die während des PhoneGap Build-Prozesses erforderlichen Dateien bis zur Kompilierung zu speichern.) Als typisches Beispiel können Sie die Datei „.pgbomit“ in dem Ordner speichern, der die Symbole und Begrüßungsbildschirme enthält. Speichern Sie die Datei „.pgbomit“ im Ordner „www/res“ des PhoneGap Build-Projekts. Daher wird keine der Dateien und Ordner in „www/res“ in das binäre App-Paket einbezogen. Davon ausgenommen sind die Dateien und Ordner, die für Symbole und Begrüßungsbildschirme für eine bestimmte Plattform verwendet werden. Die folgende Abbildung zeigt die „.pgbomit“-Datei im Ordner „www/res“.

Da PhoneGap Build die Zusammenführungsordner des Cordova CLI-Projekts standardmäßig nicht unterstützt, müssen Sie plattformspezifische Inhalte aus den Zusammenführungsordnern des Cordova CLI-Projekts in den Ordner „www“ des PhoneGap Build-Projekts kopieren.

Aktualisieren der Datei „config.xml“

PhoneGap Build unterstützt eine XML-Konfigurationsdatei, „config.xml“, die sich stark von der Datei unterscheidet, die vom Visual Studio-Projekt generiert wird. Mithilfe dieser Konfigurationsdatei können Sie z. B. den Titel der Anwendung, Symbole, Begrüßungsbildschirme und andere Eigenschaften ändern.

Beginnen Sie damit, den VS-Namespace zu entfernen und den PhoneGap-Namespace zur Datei „config.xml“ hinzuzufügen. Das Ergebnis wird hier angezeigt.

<widget xmlns:cdv="http://cordova.apache.org/ns/1.0"
  id="io.cordova.appb64ec64666e9432a9caf5f01009feb88"
  version="1.0.0.0"
  xmlns:gap="http://phonegap.com/ns/1.0"
  xmlns="http://www.w3.org/ns/widgets">
<name>SlidePuzzle</name>

Symbole

Das Standardsymbol muss den Namen „icon.png“ erhalten und im Stammverzeichnis des Anwendungsordner gespeichert werden. Sofern Sie dies nicht anderweitig in der Datei „config.xml“ angeben, versucht jede Plattform, während der Kompilierung die standardmäßige Datei „icon.png“ zu verwenden.

<icon src="icon.png" />

Wenn Sie bestimmte Symbole für die Android-Plattform verwenden möchten, stellen die folgenden Einträge ein Beispiel für die Aktualisierung der Datei „config.xml“ auf Basis der Inhalte des Ordners „res\icons\android“ im zuvor erstellten PhoneGap Build-Projekt dar.

<icon gap:platform="android" gap:qualifier="ldpi"
    src=" res/icons/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi"
    src=" res/icons/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi"
    src=" res/icons/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi"
    src=" res/icons/android/icon-96-xhdpi.png" />

Weitere Informationen zum Angeben von Symbolelementen in der Datei „config.xml“ finden Sie in diesem Artikel.

Begrüßungsbildschirme

Sie können 0 (null) oder mehr Begrüßungsbildschirmelemente in der Datei „config.xml“ verwenden. Das Begrüßungsbildschirmelement kann wie das <icon>-Element über Attribute für „src“, „gap:platform“, „width“ und „height“ verfügen. Speichern Sie die Begrüßungsbildschirmdateien wie Symboldateien als PNG-Bilder. Sofern Sie dies nicht anderweitig in der Datei „config.xml“ angeben, verwendet jede Plattform während der Kompilierung die standardmäßige Datei „splash.png“. Wenn Sie das Attribut „gap:platform“ nicht bereitstellen, wird das Standardbild für alle Plattformen kopiert, wodurch sich die Größe der einzelnen Anwendungspakete erhöht.

Der Standardbegrüßungsbildschirm muss den Namen „splash.png“ erhalten und im Stammverzeichnis des Anwendungsordner gespeichert werden.

<gap:splash src="splash.png" /> 

Wenn Sie bestimmte Begrüßungsbildschirme für die Android-Plattform werden möchten, zeigen die folgenden Einträge ein Beispiel zum Aktualisieren der Datei „config.xml“ auf Basis der Inhalte des Ordners „res\screens\android“ im PhoneGap Build-Projekt.

<gap:splash gap:platform="android" gap:qualifier="port-ldpi" 
    src=" res/screens/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" 
    src=" res/screens/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" 
    src=" res/screens/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" 
    src=" res/screens/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="land-ldpi" 
    src=" res/screens/android/screen-ldpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-mdpi" 
    src=" res/screens/android/screen-mdpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-hdpi" 
    src=" res/screens/android/screen-hdpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-xhdpi" 
    src=" res/screens/android/screen-xhdpi-landscape.png" />

Weitere Informationen zum Angeben von Begrüßungsbildschirmelementen in der Datei „config.xml“ finden Sie in diesem Artikel.

Plug-Ins

Um den Zugriff auf systemeigene Plattformfunktionen zu erweitern, die vom PhoneGap-Container für systemeigene Apps bereitgestellt werden, unterstützt PhoneGap Build eine Auswahl von zulässigen PhoneGap-Plug-Ins. Eine Liste der unterstützten Plug-Ins finden Sie unter Plug-Ins. Wenn Sie Plug-Ins einbeziehen, die sich nicht auf der Adobe-Liste der zulässigen Plug-Ins befinden, tritt bei der Erstellung ein Fehler auf. Zum Importieren eines Plug-Ins in das PhoneGap Build-Projekt müssen Sie das richtige „<gap:plugin>“-Element zur Datei „config.xml“ hinzufügen. Wenn Sie das Versionsattribut für das Plug-In weglassen, verwendet die App immer die neueste Version des Plug-Ins für die Erstellung.

Hier folgt die simpelste Möglichkeit zur Verwendung eines Plug-Ins mit Versionsangabe.

<gap:plugin name="com.phonegap.plugins.example" version="2.2.1" />

Da Visual Studio das Element „<vs:plugin>“ in der Datei „config.xml“ für jedes hinzugefügte Plug-In angibt, müssen Sie diese Elemente durch „<gap:plugin>“-Elemente ersetzen. In diesem Beispielprojekt werden zwei Plug-Ins und zwei entsprechende Zeilen in der Datei „config.xml“ verwendet.

<vs:plugin name="org.apache.cordova.device-motion" version="0.2.10" />
<vs:plugin name="org.apache.cordova.camera" version="0.3.2" />

Im PhoneGap Build-Projekt müssen diese Zeilen wie folgt geändert werden:

<gap:plugin name="org.apache.cordova.device-motion" version="0.2.10" />
  <gap:plugin name="org.apache.cordova.camera" version="0.3.2" />

Weitere Informationen zum Ändern von Plug-Ins finden Sie im Artikel.

Hochladen des Projekts zu PhoneGap

Nachdem Sie alle erforderlichen Änderungen vorgenommen haben, können Sie die Anwendung in den PhoneGap Build-Dienst hochladen. Erstellen Sie zunächst ein Konto für den PhoneGap Build-Dienst. Anschließend melden Sie sich unter „https://build.phonegap.com/apps“ bei Ihrem Konto an, um die App zu übermitteln. Sie können Ihre App entweder über ein GIT-Repository oder durch Hochladen einer lokalen ZIP-Datei übermitteln. In diesem Beispiel wird eine lokale ZIP-Datei hochgeladen, die den gepackten Ordner „www“ enthält. Nachdem Sie die ZIP-Datei hochgeladen haben, können Sie sehen, dass Ihre App erstellt werden kann.

Wenn Sie auf die Schaltfläche Bereit für Build klicken, beginnt der PhoneGap Build-Dienst mit der Erstellung für die von Ihnen in der Datei „config.xml“ definierten Plattformen. Da wir keine bestimmte Plattform definiert haben, führt der Dienst die Erstellung für alle drei Plattformen (iOS, Android und Windows) aus. Nachdem der Build abgeschlossen ist, werden die Ergebnisse des Builds angezeigt.

Signieren von Code und Bereitstellen der App

Da wir einen Cloud-Dienst für den Build verwenden, müssen wir die Zertifikate zum Signieren von Code und zur Bereitstellung einrichten, um die Erstellung von Paketen mit signierten Versionen/Verteilungen zu unterstützen. Für iOS können Sie das Codesignaturzertifikat und das mobile Bereitstellungsprofil hier bereitstellen:

Um ein APK-Paket für Android zu erstellen, das für die Übermittlung an den Store bereit ist, bietet Ihnen der PhoneGap Build-Dienst die Möglichkeit, Schlüsselspeicherinformationen und die entsprechenden Kennwörter hier bereitzustellen:

Für Android verwenden wir einen vorhandenen Schlüsselspeicher, den wir zuvor erstellt haben (Sie können auch einen neuen Schlüsselspeicher mithilfe der folgenden Anleitung erstellen), und erstellen die Anwendung anschließend neu. Der Builddienst erstellt jetzt ein vollständig signiertes Versionspaket, das entweder zur Veröffentlichung im Store heruntergeladen oder auf einem verbundenen Gerät installiert werden kann.

Wir hoffen, dass Ihnen dieser Artikel beim Konvertieren Ihres Visual Studio Cordova-Projekts in ein PhoneGap Build-Projekt und beim schnellen Erstellen Ihrer Apps für iOS, Android und Windows mithilfe des PhoneGap Build-Diensts helfen konnte.

Vielen Dank, wenn Sie die Visual Studio-Tools für Apache Cordova bereits installiert haben und diese aktiv einsetzen! Anderenfalls besuchen Sie bitte diese Seite, um die Tools zu erhalten.

Herunterladen der Visual Studio-Tools für Apache Cordova oder weitere Informationen