Entwickeln von Apps mit PhoneGap CLI

HINWEIS

Adobe empfiehlt die Verwendung des SPA-Editors für Projekte, für die ein frameworkbasiertes clientseitiges 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 Entwicklungs-Umgebung konfiguriert haben.

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

Bootstrap Ihrer Umgebung für Entwicklung

Setup PhoneGap CLI

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

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

Quelle herunterladen

Laden Sie die Umgebung nach dem erfolgreichen Hochladen der App-Entwicklung aus der AEM App-Build-Kachel herunter:

  • Klicken Sie auf das PhoneGap Build Dropdown Chevron.

chlimage_1-45

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

chlimage_1-46

HINWEIS

Die Entwicklungsquelle enthält den neuesten Status Ihrer App und enthält gleichzeitig nicht gestaffelte Änderungen. Verwenden Sie die Staging-Quelle, um Versionskandidaten zu erstellen, die an App Store-Anbieter übermittelt werden sollen.

Wenn Sie Ihre App nie anzeigen, löst die Auswahl von Staging den Staging-Workflow aus (Hinweis: wird als gestaffelte App in der PhoneGap Enterprise Viewer-App angezeigt, die im AppStore und 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 Sie die App (aus der Quelle)

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

HINWEIS

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

  1. Vergewissern Sie sich, dass Sie PhoneGap CLI installiert haben (siehe oben).
  2. Navigieren Sie in einem Konsolenfenster (oder Terminalfenster) zum Stammverzeichnis der extrahierten Quelle.
  3. Geben Sie den folgenden Befehl ein:
phonegap run android

// -- or -- //

phonegap run ios
HINWEIS

Wenn Sie Probleme haben, gehen Sie zu den Grundlagen zurück, um Probleme zu schießen -

  1. Erstellen eines neuen Ordners (mkdir-Test)
  2. In diesen neuen Ordner navigieren (cd-Test)
  3. Führen Sie 'phonegap create helloWorld' aus
  4. Navigieren Sie in helloWorld (cd helloWorld)
  5. Führen Sie "phonegap run android (oder ersetzen Sie android durch ios wie oben).
  6. Emulator öffnet Ihre neu erstellte PhoneGap-App, wobei "Device Ready"steht, wenn die JavaScript-Brücke zu native aktiv ist.

Dadurch wird sichergestellt, dass die PhoneGap-Umgebung für die CLI-Entwicklung ordnungsgemäß ausgeführt wird.

Debuggen von Javascripts mit Safari- und IOS-Debugging

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

Safari Developer Toolsaktivieren

So aktivieren Sie die Entwicklerwerkzeuge:

  • Safari-Voreinstellungen öffnen

    • Klicken Sie in der Menüleiste auf Safari
    • Klicken Sie auf Voreinstellungen

  • Klicken Sie im Fenster "Voreinstellungen"auf Erweitert

chlimage_1-47

  • Aktivieren Sie "Entwicklungsmenü in der Menüleiste anzeigen".
  • Fenster "Voreinstellungen"schließen

Verbinden von Safari mit iOS

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
  • Untermenü "iOS Simulator"auswählen
  • Klicken Sie auf home.html

chlimage_1-48

Debuggen von JavaScript mit dem Webinspektor von Safari

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

  • Klicken Sie im Fenster des Webinspektors auf "Ressourcen"
  • Navigieren Sie zur Quellstruktur und klicken Sie auf die gewünschte Quelldatei
  • Klicken Sie auf die Zeilennummer neben, um einen Haltepunkt hinzuzufügen
  • Mit Gerät oder Emulator interagieren

chlimage_1-49

  • Verwenden Sie die Steuerungsschaltflächen, um die Ausführung fortzusetzen, einen Schritt über die Methoden zu führen, Schritte zu gehen und die Methoden zu verlassen:

HINWEIS

Um die Werte der Variablen anzuzeigen, bewegen Sie in der aktuellen Methode den Mauszeiger über.

Die nächsten Schritte

Sobald Sie Informationen zum Entwickeln von Apps mit der PhoneGap-CLI erhalten haben, finden Sie unter Zugreifen auf Gerätefunktionen.

Auf dieser Seite