Sviluppo di app con PhoneGap CLI

NOTA

Adobe consiglia di utilizzare l'editor SPA per i progetti che richiedono il rendering lato client basato sul framework dell'applicazione a pagina singola (ad es. React). Per saperne di più.

In qualsiasi momento, come sviluppatore, puoi eseguire l'app su un dispositivo o all'interno di un emulatore, a condizione che sia stato configurato l'ambiente di sviluppo.

Per eseguire gli esempi seguenti è necessario un sistema che esegue OSx (Mac) con Xcode, oppure un sistema Mac/Win/Linux con Android SDK installato.

Bootstrap dell'ambiente di sviluppo

Configurazione CLI PhoneGap

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

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

Scarica la sorgente

Dopo aver eseguito correttamente il boot dell'ambiente di sviluppo, scarica l'origine dalla sezione AEM App Build:

  • Fare clic sulla freccia a discesa della PhoneGap Build.

chlimage_1-45

  • Fate clic su Scarica origine.
  • Selezionate l’origine desiderata dal modale Scarica origine.

chlimage_1-46

NOTA

L'origine di sviluppo contiene lo stato più recente dell'app, incluse le modifiche non in fase. Utilizzate l'origine di gestione temporanea per creare i candidati alla release da inviare ai fornitori dell'app store.

Se non preparate mai l'app, selezionando Staging viene attivato il flusso di lavoro di verifica (suggerimento: questo verrà visualizzato come app per fasi nell’app visualizzatore PhoneGap Enterprise disponibile in AppStore e Google PlayStore).

  • Fate clic su Scarica e salvate il file ZIP nel computer.
  • Estraete il file zip scaricato nella vostra area di lavoro.

Creare e caricare l'app (dall'origine)

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

NOTA

È possibile eseguire tutti questi passaggi separatamente, vedere PhoneGap CLI docs.

  1. Accertatevi di aver installato l'interfaccia CLI di PhoneGap, come descritto sopra.
  2. In una finestra della console (o terminale), andate alla directory principale dell’origine estratta.
  3. Digitate il comando seguente:
phonegap run android

// -- or -- //

phonegap run ios
NOTA

In caso di problemi a questo punto, tornate alle basi per risolvere i problemi -

  1. Creare una nuova cartella (test mkdir)
  2. Accedete a questa nuova cartella (test cd)
  3. Eseguire 'phonegap create helloWorld'
  4. Passare a helloWorld (cd helloWorld)
  5. Eseguire 'phonegap run android (o sostituire android con iOS come sopra).
  6. L'emulatore si aprirà eseguendo l'app PhoneGap appena creata, dicendo 'Device Ready' se è operativo il ponte JavaScript verso l'app nativa.

Questo verifica che l'ambiente di sviluppo CLI PhoneGap sia attivato e funzionante correttamente.

Debug di Javascript con Safari e IOS debug

Potete eseguire il debug degli JavaScript dell'app utilizzando gli strumenti di sviluppo di Safari, esattamente come fareste con un'applicazione Web.

Abilita strumenti per sviluppatori Safari

Per attivare gli strumenti di sviluppo:

  • Aprire le preferenze di Safari

    • Fate clic su Safari nella barra dei menu
    • Fate clic su Preferenze
  • Fare clic su Avanzate nella finestra Preferenze

chlimage_1-47

  • Selezionare "Mostra menu sviluppo nella barra dei menu"
  • Chiudi la finestra Preferenze

Connetti Safari a iOS

Potete collegare Safari a un dispositivo iOS o a un emulatore.

  • In una finestra della console, andate alla directory principale dell’origine estratta.
  • Digitate il comando seguente per avviare l'app sul dispositivo o sull'emulatore.
phonegap run <platform> --device

// -- or -- //

phonegap run <platform> --emulator
  • Apri Safari
  • Fate clic su Sviluppo nella barra dei menu
  • Seleziona il sottomenu Simulatore iOS
  • Fare clic su home.html

chlimage_1-48

Debug di JavaScript con la finestra di ispezione Web di Safari

Puoi impostare punti di interruzione ovunque nella tua origine. Quando interagisci con l’emulatore o il dispositivo, l’esecuzione dell’app si interrompe a quei punti di interruzione. È possibile eseguire l'esecuzione e ispezionare i valori nelle variabili.

  • Fare clic su Risorse nella finestra Ispettore Web
  • Spostarsi nella struttura di origine e fare clic sul file di origine desiderato
  • Fare clic sul numero di riga adiacente per aggiungere un punto di interruzione
  • Interagire con il dispositivo o l'emulatore

chlimage_1-49

  • Utilizzare i pulsanti di controllo per continuare l'esecuzione, passare il mouse, entrare ed uscire dai metodi:

NOTA

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

Passaggi successivi

Dopo aver appreso come sviluppare app con l'interfaccia CLI di PhoneGap, vedere Accesso alle funzionalità del dispositivo.

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now