Entwickeln von Apps mit PhoneGap CLI

HINWEIS

Adobe empfiehlt die Verwendung des SPA-Editors für Projekte, für die ein frameworkbasiertes Client-seitiges Rendering für einzelne Seiten (z. B. React) erforderlich ist. Weitere Informationen

Als Entwickler können Sie Ihre App jederzeit auf einem Gerät oder in einem Emulator ausführen, sofern Sie Ihre Entwicklungsumgebung konfiguriert haben.

Um die folgenden Beispiele auszuführen, benötigen Sie ein System, das OSx (Mac) mit Xcode ausführt, oder ein Mac/Win/Linux-System mit installiertem Android-SDK.

Bootstrap Ihrer Entwicklungsumgebung

Einrichten der PhoneGap-CLI

Für iOS: Für die Entwicklung für iPhones und iPads benötigen Sie die Xcode-IDE von Apple.

kostenlos herunterladen here.
Handbuch zur PhoneGap iOS-Plattform

Für Android: Für die Entwicklung für iPhones und iPads benötigen Sie die Android Stuido IDE von Google.

kostenlos herunterladen here.
Handbuch zur PhoneGap Android-Plattform

Quelle herunterladen

Nachdem Sie die Entwicklungsumgebung erfolgreich gebootet haben, laden Sie die Quelle aus der Kachel zum Erstellen der AEM App herunter:

Klicken Sie auf den Dropdown-Chevron der PhoneGap Build-Kachel.

chlimage_1-45

Klicken Sie auf Quelle herunterladen .
Wählen Sie die gewünschte Quelle aus dem Modal Quelle herunterladen aus.

chlimage_1-46

HINWEIS

Die Entwicklungsquelle enthält den neuesten Status Ihrer App, einschließlich nicht gestaffelter Änderungen. Verwenden Sie die Staging-Quelle zum Erstellen von Release-Kandidaten für das Senden an Appstore-Anbieter.

Wenn Sie Ihre App nie testen, wird durch die Auswahl von Staging der Staging-Workflow Trigger (Tipp: Dies wird als gestaffelte App in der PhoneGap Enterprise Viewer App angezeigt, die im AppStore und im Google PlayStore verfügbar ist.

Klicken Sie auf Herunterladen und speichern Sie die ZIP auf Ihrem Computer.
Extrahieren Sie die heruntergeladene ZIP-Datei in Ihren Arbeitsbereich.

Erstellen und Laden der App (aus der Quelle)

Die PhoneGap-CLI kann ein Plattformprojekt erstellen, die Quelle kompilieren und die App in einem einzelnen Befehl bereitstellen.

HINWEIS

Sie können alle diese Schritte separat ausführen, siehe PhoneGap-CLI-Dokumente.

Stellen Sie sicher, dass Sie PhoneGap CLI installiert haben (siehe oben).
Navigieren Sie in einem Konsolenfenster (oder Terminalfenster) zum Stammverzeichnis der extrahierten Quelle.
Geben Sie den folgenden Befehl ein:

phonegap run android

// -- or -- //

phonegap run ios

HINWEIS

Wenn Sie derzeit Probleme haben, gehen Sie zurück zu den Grundlagen zu Trommelschießen -

Erstellen eines neuen Ordners (mkdir test)
Navigieren Sie in diesen neuen Ordner (cd test).
Führen Sie 'phonegap create helloWorld' aus.
Navigieren Sie zu helloWorld (cd helloWorld).
Führen Sie 'phonegap run android (oder ersetzen Sie android durch ios wie oben).
Emulator öffnet die neu erstellte PhoneGap-App mit der Meldung "Device Ready", wenn die JavaScript-Verbindung zum nativen Gerät betriebsbereit ist.

Dadurch wird sichergestellt, dass die PhoneGap-CLI-Entwicklungsumgebung ordnungsgemäß ausgeführt wird.

Debuggen von JavaScript-Dateien mit Safari und IOS-Debugging

Sie können die JavaScripts Ihrer App mit den Entwicklertools von Safari debuggen, so wie bei einer Webanwendung.

Aktivieren der Safari-Entwicklertools

So aktivieren Sie die Entwicklertools:

Öffnen Sie die Voreinstellungen von Safari.
- Klicken Sie in der Menüleiste auf Safari
- Klicken Sie auf Voreinstellungen
Klicken Sie im Fenster "Voreinstellung"auf Erweitert .

chlimage_1-47

Aktivieren Sie "Menü "Entwickeln"in der Menüleiste anzeigen".
Fenster "Voreinstellung"schließen

Safari mit iOS verbinden

Sie können Safari entweder mit einem iOS-Gerät oder -Emulator verbinden.

Navigieren Sie in einem Konsolenfenster zum Stammverzeichnis der extrahierten Quelle.
Geben Sie den folgenden Befehl ein, um Ihre App auf Ihrem Gerät oder Emulator zu starten.

phonegap run <platform> --device

// -- or -- //

phonegap run <platform> --emulator

Safari öffnen
Klicken Sie in der Menüleiste auf Entwickeln .
iOS Simulator-Untermenü auswählen
Auf home.html klicken

chlimage_1-48

Debuggen von JavaScript mit dem Webinspektor von Safari

Sie können Haltepunkte an einer beliebigen Stelle in Ihrer Quelle festlegen. Wenn Sie mit Ihrem Emulator oder Gerät interagieren, stoppt die Ausführung Ihrer App an diesen Haltepunkten. Sie können die Ausführung schrittweise durchführen und die Werte in Variablen überprüfen.

Klicken Sie im Fenster des Web-Inspektors auf Ressourcen .
Navigieren Sie in der Quellstruktur und klicken Sie auf die gewünschte Quelldatei
Klicken Sie auf die Zeilennummer neben, um einen Haltepunkt hinzuzufügen.
Interagieren mit dem Gerät oder Emulator

chlimage_1-49

Verwenden Sie die Kontrollschaltflächen, um die Ausführung fortzusetzen, Schritt für Schritt vorzunehmen, Schritte in die Methoden einzuleiten und auszusteigen: