Entwickeln von Apps mit PhoneGap CLI developing-apps-with-phonegap-cli

Last update: Tue Oct 17 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:
Mobile

Erstellt für:

User

NOTE

Adobe empfiehlt die Verwendung des SPA-Editors für Projekte, die ein Framework-basiertes clientseitiges Rendering von Einzelseiten-Apps erfordern (z. B. React). 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 macOS X mit Xcode ausführt, oder ein Mac/Win/Linux-System mit installiertem Android™ SDK.

Bootstrap Ihrer Entwicklungsumgebung bootstrap-your-development-environment

Einrichten der PhoneGap-CLI (https://docs.phonegap.com/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface)

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 (https://docs.phonegap.com/en/4.0.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide)

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

kostenlos herunterladen here.
Handbuch zur PhoneGap Android™-Plattform (https://docs.phonegap.com/en/4.0.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide)

Quelle herunterladen download-the-source

Wenn Sie Ihre Entwicklungsumgebung erfolgreich per Bootstrapping gestartet haben, laden Sie die Quelle aus der AEM App-Build-Kachel herunter:

Klicken Sie auf den Dropdown-Chevron für die 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

NOTE

Die Entwicklungsquelle enthält den neuesten Status Ihrer App und gleichzeitig nicht gestaffelte Ä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-Triggern der Staging-Workflow (Tipp: wird in der im AppStore und im Google PlayStore verfügbaren PhoneGap Enterprise Viewer App als gestaffelte App angezeigt).

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

Erstellen und Laden der App (aus der Quelle) build-and-load-the-app-from-source

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

NOTE

Sie können alle diese Schritte separat ausführen, siehe PhoneGap-CLI-Dokumente (https://phonegap.com/blog/2014/11/13/phonegap-cli-3-6-3/).

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

NOTE

Wenn Sie derzeit Probleme haben, gehen Sie zurück zu den Grundlagen, um eine Fehlerbehebung durchzuführen -

Erstellen eines Ordners (mkdir-Test)
Navigieren Sie in diesen neuen Ordner (cd test).
Führen Sie phonegap create helloWorld aus.
Navigieren Sie zu helloWorld (cd helloWorld).
Ausführen phonegap run android (oder ersetzen Sie Android™ durch iOS wie oben beschrieben).
Emulator öffnet die neu erstellte PhoneGap-App mit der Meldung "Device Ready", wenn die JavaScript Bridge zu nativ betriebsbereit ist.

Mit dieser Fehlerbehebung wird überprüft, ob Ihre PhoneGap-CLI-Entwicklungsumgebung ordnungsgemäß ausgeführt wird.

Debuggen von JavaScript mit Safari- und IOS-Debugging debug-javascripts-with-safari-and-ios-debug

Sie können das JavaScript Ihrer App mit den Entwicklerwerkzeugen von Safari genauso debuggen wie mit einer Webanwendung.

Aktivieren der Safari-Entwicklertools enable-safari-developer-tools

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 connect-safari-to-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, damit Sie Ihre App auf Ihrem Gerät oder Emulator starten können.

phonegap run <platform> --device

// -- or -- //

phonegap run <platform> --emulator

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

chlimage_1-48

Debuggen von JavaScript mit dem Webinspektor von Safari debug-javascript-with-safari-s-web-inspector

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 Schaltflächen, um die Ausführung fortzusetzen, einen Schritt weiter zu gehen, Schritte in die Methoden einzuleiten und auszusteigen:

NOTE

Bewegen Sie die Maus, um die Werte der Variablen in der aktuellen Methode anzuzeigen.

Die nächsten Schritte the-next-steps

Nachdem Sie sich mit der Entwicklung von Apps mit PhoneGap CLI vertraut gemacht haben, lesen Sie Zugreifen auf Gerätefunktionen.

recommendation-more-help

2eeeb575-8007-40cc-a72d-206fbc4ddd4b