Sviluppo di app con PhoneGap CLI

Ultimo aggiornamento: 15 gennaio 2025

Argomenti:

Creato per:

Amministratore

IMPORTANT

Le nuove installazioni di AEM 6.5 non supportano la funzionalità delle app AEM Mobile. Gli editor preferiti per la gestione dei contenuti headless in AEM sono ora:

Editor universale per la modifica visiva di contenuti headless.
Editor frammento di contenuto per la modifica basata su modulo di contenuti headless.

In qualsiasi momento, come sviluppatore puoi eseguire l’app su un dispositivo o all’interno di un emulatore, purché sia stato configurato l’ambiente di sviluppo.

Per eseguire gli esempi seguenti, è necessario un sistema che esegua macOS X con Xcode oppure un sistema Mac/Win/Linux con Android™ SDK installato.

Bootstrap l’ambiente di sviluppo

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

Per iOS: per sviluppare per iPhone e iPad, è necessario Apple Xcode IDE.

Scarica gratuitamente qui.
Guida alla piattaforma iOS PhoneGap (https://docs.phonegap.com/en/4.0.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide)

Per Android™: per sviluppare per iPhone e iPad, è necessario Google Android™ Studio IDE.

Scarica gratuitamente qui.
Guida alla piattaforma Android™ PhoneGap (https://docs.phonegap.com/en/4.0.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide)

Scarica il Source

Dopo aver avviato correttamente l’ambiente di sviluppo, scarica l’origine dal riquadro di build dell’app AEM:

Fai clic sulla freccia a discesa del riquadro PhoneGap Build.

chlimage_1-45

Fai clic su Scarica Source.
Seleziona l’origine desiderata dal modale Scarica Source.

chlimage_1-46

NOTE

L’origine di sviluppo contiene lo stato più recente dell’app, comprese le modifiche non di staging. Utilizza l’origine Staging per creare le versioni candidate per l’invio ai fornitori degli app store.

Se non esegui mai l’app in staging, quando selezioni Staging viene attivato il flusso di lavoro di staging (suggerimento: viene visualizzato come app di staging nell’app del visualizzatore Enterprise di PhoneGap disponibile in AppStore e Google PlayStore).

Fai clic su Scarica e salva il file ZIP sul computer.
Estrai il file zip scaricato nell’area di lavoro.

Creare e caricare l’app (dall’origine)

PhoneGap CLI può creare un progetto di piattaforma, compilare l’origine e distribuire l’app in un unico comando.

NOTE

È possibile eseguire tutti questi passaggi separatamente. Consultare la documentazione di PhoneGap CLI (https://phonegap.com/blog/2014/11/13/phonegap-cli-3-6-3/).

Verifica di aver installato PhoneGap CLI, vedi sopra.
In una finestra della console (o del terminale), passa alla directory principale della sorgente estratta.
Immetti il comando seguente:

phonegap run android

// -- or -- //

phonegap run ios

NOTE

In caso di problemi, torna alle nozioni di base per la risoluzione dei problemi -

Creare una cartella (test mkdir)
Passa a questa nuova cartella (test cd)
Esegui phonegap create helloWorld
Navigare in helloWorld (cd helloWorld)
Esegui phonegap run android (o sostituisci Android™ con iOS come sopra).
L’emulatore apre l’esecuzione della nuova app PhoneGap creata, dicendo "Device Ready" (Pronto per il dispositivo) se il Bridge JavaScript to native è operativo.

Questa risoluzione dei problemi verifica che l’ambiente di sviluppo CLI di PhoneGap funzioni correttamente.

Eseguire il debug di JavaScript con Safari e IOS debug

Puoi eseguire il debug del JavaScript dell’app utilizzando gli strumenti per sviluppatori di Safari, nello stesso modo in cui esegui un’applicazione web.

Abilitare gli strumenti per sviluppatori Safari

Per abilitare gli strumenti per sviluppatori:

Apri le preferenze di Safari
- Fai clic su Safari nella barra dei menu
- Fai clic su Preferenze
Fare clic su Avanzate nella finestra Preferenze

chlimage_1-47

Seleziona "Mostra menu Sviluppo nella barra dei menu"
Chiudi la finestra Preferenze

Connettere Safari ad iOS

È possibile collegare Safari a un dispositivo o a un emulatore iOS.

In una finestra della console, passa alla directory principale dell'origine estratta.
Immetti il seguente comando per avviare l'app sul dispositivo o sull'emulatore.

phonegap run <platform> --device

// -- or -- //

phonegap run <platform> --emulator

Apri Safari
Fai clic su Sviluppo nella barra dei menu.
Seleziona il sottomenu iOS Simulator
Fare clic su home.html

chlimage_1-48

Eseguire il debug di JavaScript con Safari Web Inspector

È possibile impostare i punti di interruzione in qualsiasi punto dell'origine. Quando interagisci con l’emulatore o il dispositivo, l’esecuzione dell’app si interrompe in corrispondenza di tali punti di interruzione. Puoi analizzare in dettaglio l’esecuzione e controllare i valori nelle variabili.

Fare clic su Risorse nella finestra Controllo Web
Navigare nella struttura di origine e fare clic sul file di origine desiderato
Fare clic sul numero di riga accanto al punto di interruzione
Interagire con il dispositivo o l’emulatore

chlimage_1-49

Utilizza i pulsanti di controllo per continuare l’esecuzione, eseguire un passaggio, eseguire un passaggio e uscire dai metodi:

NOTE

Per visualizzare i valori delle variabili nel metodo corrente, passa il puntatore del mouse.

Passaggi successivi

Dopo aver appreso come sviluppare app con PhoneGap CLI, consulta Accesso alle funzionalità del dispositivo.

recommendation-more-help