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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:

Erstellt für:

Admin

NOTE

Adobe empfiehlt die Verwendung des SPA-Editors für Projekte, für die ein Framework-basiertes 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 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.

Laden Sie es kostenlos hier herunter.
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™: Für die Entwicklung für iPhones und iPads benötigen Sie die Android™ Stuido IDE von Google.

Laden Sie es kostenlos hier herunter.
Handbuch zur PhoneGap Android™-Plattform (https://docs.phonegap.com/en/4.0.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide)

Herunterladen der Source 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 Source herunterladen .
Wählen Sie die gewünschte Quelle aus dem Modal Source 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).
Führen Sie phonegap run android aus (oder ersetzen Sie Android™ wie oben gezeigt durch iOS).
Der Emulator öffnet die neu erstellte PhoneGap-App mit der Meldung "Gerätebereit", wenn die JavaScript Bridge zu nativ funktionsfähig ist.

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

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

Sie können das JavaScript Ihrer App mit den Entwicklertools von Safari debuggen, so wie bei 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 der PhoneGap-CLI vertraut gemacht haben, lesen Sie den Abschnitt Zugreifen auf Gerätefunktionen.

recommendation-more-help

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