Verpacken von Webanwendungen als native mobile Anwendungen mit PhoneGap Build

Suchen

Zuletzt aktualisiert am 1. Mai 2021 | Gilt auch für Adobe Dreamweaver CS6

PhoneGap Build ist ein Cloud-basierter Service, mit dem Sie Ihre Webanwendungen als native mobile Apps packen können. PhoneGap Build unterstützt das Verpacken nativer Anwendungen für die folgenden Betriebssysteme für Mobilgeräte:

iOS
Android
BlackBerry
webOS
Symbian
Windows Phone 8

Weitere Informationen zum PhoneGap Build-Dienst finden Sie auf der PhoneGap-Website.

Hilfe zur Verwendung des PhoneGap Build-Diensts finden Sie in der PhoneGap Build-Dokumentation.

Die direkte PhoneGap Build-Integration in Dreamweaver zum Erstellen von Anwendungspaketen wird im aktuellen Update für Release 2014 von Dreamweaver CC (Oktober 2014) nicht mehr unterstützt. Sie können jedoch den Online-PhoneGap Build-Dienst mit den neuesten Funktionsupdates verwenden, um Pakete Ihrer Webanwendungen als native mobile Apps zu erstellen.

PhoneGap Build-Diensts in Dreamweaver CC (ab der Version vom Oktober 2014) verwenden

Melden Sie sich beim PhoneGap Build-Dienst an. Sie können weiterhin Ihre vorhandene Adobe ID verwenden.
Nach der Anmeldung werden Sie zum Bereich „Apps“ der Website weitergeleitet. Laden Sie Ihre Webelemente als ZIP-Datei mit HTML-, CSS- und JavaScript-Dateien hoch oder geben Sie den Pfad zu einem Git- oder SVN-Repository an.

Bereich „Apps“ im PhoneGap Build-Dienst
Nach wenigen Minuten hat der PhoneGap Build-Dienst die Inhalte kompiliert und ein Paket erstellt und die Downloadlinks für alle mobilen Plattformen werden angezeigt.

Wenn Sie Unterstützung bei der Verwendung des PhoneGap Build-Diensts benötigen, besuchen Sie die Supportseite oder das Communityforum.

PhoneGap Build-Dienst in Dreamweaver CC (Juni 2014) verwenden

PhoneGap Build-Dienstkonto erstellen

Sie können PhoneGap Build und Dreamweaver nicht ohne ein PhoneGap Build-Dienstkonto verwenden. Die Konten sind kostenlos und einfach einzurichten. Um ein solches Konto zu erstellen, besuchen Sie die Website von PhoneGap Build.

Sie müssen das Konto durch eine Bestätigungs-E-Mail prüfen, bevor das Konto aktiviert wird.

Entwicklungsumgebung einrichten

Je nach Art der Anwendungen, die verpackt werden sollen, und je nach Gerät, auf dem Sie den Test durchführen wollen, müssen Sie verschiedene Einstellungen vornehmen, bevor Sie Ihre Anwendung verpacken können. Sie können alle oder einige oder auch keine der folgenden Optionen festlegen:

Android SDK. Wenn Sie Android-Anwendungen auf Ihrem lokalen Computer mithilfe eines Android-Emulators testen möchten, müssen Sie das Android SDK herunterladen und installieren. Anweisungen hierzu finden Sie in der Android-Dokumentation.

Nachdem Sie das Android SDK installiert haben, müssen Sie den Android SDK- und den AVD-Manager starten und die Android-Werkzeuge auswählen, mit denen Sie auf Ihrem lokalen Computer arbeiten wollen. Dreamweaver verwendet die Informationen, die bei dieser ersten Einrichtung festgelegt wurden, zum Ausfüllen der Android-Emulator-Einstellungen im Bedienfeld „PhoneGap Build Service“. Weitere Informationen zum Festlegen dieser Einstellungen finden Sie in der Android-Dokumentation.

WICHTIG: Wenn Sie einen Android-Emulator verwenden möchten, um Ihre Anwendung lokal zu testen, sollten Sie den Emulator vor dem Test so konfigurieren, wie er unabhängig von Dreamweaver funktionieren soll.

webOS SDK/PDK Wenn Sie die webOS-Anwendungen auf Ihrem lokalen Computer mithilfe eines webOS-Emulators testen möchten, müssen Sie das webOS SDK/PDK herunterladen.

QR-Code-Leser (Quick Response Readers). Wenn Sie Ihre verpackte Anwendung einfach auf Ihr Gerät übertragen wollen, benötigen Sie einen QR-Code-Leser. (Wenn Sie eine Anwendung mithilfe von Dreamweaver verpacken, bekommen Sie einen QR-Code für die Anwendung, der im Bedienfeld „PhoneGap Build Service“ erscheint, sobald die Anwendung verpackt worden ist.) Eine Reihe unterschiedlicher, kostenloser Code-Leser sind auf den verschiedenen Marktplätzen im Internet erhältlich. Weitere Informationen hierzu erhalten Sie, wenn Sie bei Google nach „QR-Code-Leser“ oder „QR Code Reader“ suchen.

PhoneGap Build-Zusatzprogramm installieren

Bevor Sie den PhoneGap Build-Dienst in Dreamweaver verwenden können, müssen Sie das PhoneGap Build-Zusatzprogramm installieren.

Zum Installieren des Zusatzprogramms wählen Sie „Fenster“ > „Zusatzprogramme durchsuchen“. Die Adobe Creative Cloud-Seite für Zusatzprogramme wird angezeigt. Suchen Sie nach dem PhoneGap Build-Zusatzprogramm und folgen Sie den Anweisungen auf dem Bildschirm, um das Zusatzprogramm zu installieren.

Wichtig: Bevor Sie Zusatzprogramme installieren, stellen Sie sicher, dass Sie die Dateisynchronisation für Ihr Adobe Creative Cloud-Konto aktiviert haben. Ausführlichere Informationen finden Sie unter Aktivieren der Dateisynchronisation für die Adobe Creative Cloud.

Anwendungen für Mobilgeräte mit PhoneGap Build verpacken

Stellen Sie sicher, dass Sie eine Dreamweaver-Site mit einer index.html-Seite erstellt haben (in der Regel die Startseite der Anwendung).

Hinweis: PhoneGap Build unterstützt nur HTML-, CSS- und JavaScript-Dateien. Ihre Site kann keine Serverseiten wie PHP, CFM oder andere serverbasierte Seiten enthalten.
Wählen Sie „Site“ > „PhoneGap Build Service“ > „PhoneGap Build Service“.
Geben Sie Ihre Anmeldedaten ein und melden Sie sich bei PhoneGap Build an. Wenn Sie noch kein PhoneGap Build-Konto erstellt haben, sollten Sie den Abschnitt PhoneGap Build-Konten erstellen lesen.
Lassen Sie „Als neues Projekt erstellen“ aktiviert und klicken Sie auf „Weiter“.
Geben Sie den für das beabsichtigte Betriebssystem erforderlichen Schlüssel und das Kennwort ein. Signaturschlüsselinformationen sind nur für Android, iOS und Blackberry erforderlich.

Wenn Sie nur eine Anwendung erstellen können, kann das daran liegen, dass Sie den PhoneGap Service nicht abonniert haben.

Hinweis:

Wenn Sie falsche Informationen eingeben, wird der Build mit einer Fehlermeldung abgebrochen, die angibt, dass Sie einen falschen Schlüssel oder ein falsches Kennwort eingegeben haben. Wenn Sie keine Informationen eingeben, wird der iOS-Build mit einer Fehlermeldung abgebrochen, die den fehlenden Signaturschlüssel bemängelt. Android- und Blackberry-Apps werden unter Verwendung von Debugzertifikaten erstellt.

Geben Sie den für das beabsichtigte Betriebssystem erforderlichen Schlüssel und das Kennwort ein.
Beachten Sie, dass Dreamweaver im Stammordner Ihrer Site eine ProjectSettings-Datei anlegt. (Möglicherweise müssen Sie das Bedienfeld „Dateien“ aktualisieren, damit die Datei angezeigt wird.) Diese Datei ist sehr wichtig, da der PhoneGap Build-Dienst sie verwendet, um Ihre Anwendung zu verfolgen.

Dreamweaver fügt auch eine config.xml-Datei zu Ihrem Sitestamm hinzu. Um diese einfache XML-Datei zu öffnen, doppelklicken Sie darauf.

Datei „config.xml“

Ändern Sie den Namen der Anwendung, indem Sie den Inhalt dieser Datei bearbeiten. Wenn Sie das nicht machen, haben alle Anwendungen denselben Standardanwendungsnamen.

Weitere Informationen zum Verwenden der Datei „config.xml“ finden Sie in der PhoneGap Build-Dokumentation.
Speichern Sie die bearbeitete config.xml-Datei, schließen Sie sie und klicken Sie im Bedienfeld „PhoneGap Service“ auf „Anwendung neu erstellen“. Während PhoneGap Ihre Anwendung für die verschiedenen Plattformen verpackt, wird nach und nach die Nachricht „Build Complete“ angezeigt, d. h Ihr Build ist abgeschlossen.

Wenn der Build abgeschlossen ist, wird dies im Bedienfeld „PhoneGap Service“ angezeigt.

Hinweis:

Um ein Build für Windows 8 zu verpacken, müssen Sie sich direkt bei https://build.phonegap.com anmelden, die erforderlichen Dateien hochladen und den Build kompilieren.
Standardmäßig verwendet Dreamweaver die PhoneGap Build-Version 2.9.0. Wenn Sie die neueste Version von PhoneGap Build verwenden wollen, führen Sie die folgenden Schritte aus:
1. Entfernen Sie im Stammordner der Site in der Datei „config.xml“ die folgende Zeile:
2. Speichern Sie die Datei.
3. Erstellen Sie das Projekt neu.
Sobald Ihre Builds abgeschlossen sind, haben Sie mehrere Möglichkeiten. Sie können die Anwendungsdateien auf Ihren Computer herunterladen, den QR-Code eines Builds einscannen, um die Anwendung auf Ihr Gerät zu übertragen, oder die Anwendung mithilfe des Emulators emulieren (nur Android und webOS).

Anwendungsdateien herunterladen

Um eine Anwendung von PhoneGap Build herunterzuladen, klicken Sie im Bedienfeld „PhoneGap Build Service“ auf die Symbolschaltfläche „Anwendung herunterladen“ (den nach unten gerichteten Pfeil).

Hinweis: Ohne Signaturschlüssel ist ein Download für iOS-Anwendungen nicht möglich. Weitere Informationen finden Sie unter PhoneGap Build-Dokumentation.

Die Namen der heruntergeladenen Anwendungsdateien lauten wie folgt:

iOS: app.ipa
Android: app.apk
BlackBerry: app.jad
webOS: app.ipk
Symbian- app.wgz

QR-Code einscannen, um eine Anwendung auf ein Gerät zu übertragen

Bevor Sie fortfahren können, muss auf Ihrem Gerät ein QR-Code-Leser installiert sein. Weitere Informationen finden Sie unter Entwicklungsumgebung einrichten.

Hinweis: Ohne Signaturschlüssel sind für iOS-Anwendungen keine QR-Codes verfügbar. Weitere Informationen finden Sie unter PhoneGap Build-Dokumentation.

Klicken Sie im Bedienfeld „PhoneGap Build Service“ auf den QR-Code für die Anwendung, die Sie herunterladen wollen.
Starten Sie den QR-Code-Leser auf dem Mobilgerät und scannen Sie den QR-Code ein.
Sobald der Download der Anwendung abgeschlossen ist, können Sie sie direkt auf Ihrem Gerät starten.
Zeigen Sie die Build-Liste wieder an, indem Sie auf die Schaltfläche „Zurück zum Build-Bedienfeld“ klicken.

Hinweis: Ohne Signaturschlüssel sind für iOS-Anwendungen keine QR-Codes verfügbar.

Anwendungen emulieren (nur Android und webOS)

WICHTIG: Sie müssen das Android SDK und/oder das webOS SDK/PDK installiert haben, bevor Sie fortfahren können. Sie müssen außerdem alle SDK-/AVD-Informationen angegeben haben, die lokal in den SDK-Anwendungen zur Verfügung stehen sollen. Weitere Informationen finden Sie unter Entwicklungsumgebung einrichten.

Öffnen Sie das Bedienfeld „Einstellungen für PhoneGap Build“, indem Sie „Site“ > „PhoneGap Build Service“ > „Einstellungen für PhoneGap Build“ wählen.
Geben Sie den Pfad für das Android- und/oder das webOS-SDK an und klicken Sie auf „Speichern“. Durch diese Pfadangaben weiß Dreamweaver, wo es die Informationen über Ihre Anwendung findet, die es an den (die) Emulator(en) senden muss.
Klicken Sie im Bedienfeld „PhoneGap Build Service“ („Site“ > „PhoneGap Build Service“ > „PhoneGap Build Service“) für die Anwendung, die Sie emulieren möchten, auf die Schaltfläche „Anwendung emulieren (den nach links gerichteten Pfeil).
Wenn Sie zuvor aus den SDK-Anwendungen heraus Ihre SDK-/AVD-Informationen angegeben haben, sollte jetzt ein Fenster angezeigt werden, in dem diese Informationen bereits ausgefüllt sind.
Wählen Sie das SDK/AVD aus, das für die Emulation verwendet werden soll, und klicken Sie auf „Starten“.

Hinweis: Emulatoren können notorisch langsam sein. Es kann etwas dauern, bis der Emulator die Anwendung gestartet und geladen hat.

Erstellen und Bereitstellen einer Android-Anwendung mit PhoneGap und Dreamweaver (auf Englisch)

Kevin Hoyt, Adobe Developer Evangelist

Erstellen und Bereitstellen einer iOS-Anwendung mit PhoneGap (auf Englisch)