Sviluppo di app con PhoneGap CLI

NOTA

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

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

Per eseguire i seguenti esempi è necessario un sistema che esegue OSx (Mac) con Xcode o un sistema Mac/Win/Linux con l'SDK Android installato.

Bootstrap dell'ambiente di sviluppo

Configurazione di PhoneGap CLI

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

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

Scarica la sorgente

Una volta avviato correttamente l’ambiente di sviluppo, scarica l’origine dal riquadro Build app AEM:

  • Fai clic sulla freccia a discesa del riquadro PhoneGap Build.

chlimage_1-45

  • Fai clic su Scarica origine .
  • Seleziona 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 staging. Utilizza l’origine Gestione temporanea per creare i candidati alle versioni da inviare ai fornitori dell’app store.

Se l’app non viene mai messa in scena, la selezione dell’opzione Staging attiva il flusso di lavoro di staging (suggerimento: questo verrà visualizzato come app per staging nell’app visualizzatore PhoneGap Enterprise disponibile in AppStore e Google PlayStore).

  • Fai clic su Scarica e salva il file ZIP nel computer.
  • Estrai il file zip scaricato nella tua area di lavoro.

Creare e caricare l’app (dall’origine)

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

NOTA

Puoi eseguire tutti questi passaggi separatamente, vedi Documenti CLI di PhoneGap.

  1. Assicurati di aver installato PhoneGap CLI, vedi sopra.
  2. In una finestra della console (o terminale), accedi alla directory principale della sorgente estratta.
  3. Immetti il seguente comando:
phonegap run android

// -- or -- //

phonegap run ios
NOTA

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

  1. Crea una nuova cartella (test mkdir)
  2. Passa a questa nuova cartella (cd test)
  3. Esegui 'phonegap create helloWorld'
  4. Passa a helloWorld (cd helloWorld)
  5. Esegui 'phonegap run android (o sostituisci android con ios come sopra).
  6. L'emulatore si aprirà eseguendo l'app PhoneGap appena creata, dicendo "Dispositivo pronto" se il ponte JavaScript a nativo è operativo.

Questo verifica che l’ambiente di sviluppo PhoneGap CLI sia attivo e funzioni correttamente.

Debug di JavaScript con il debug di Safari e IOS

Puoi eseguire il debug degli JavaScript dell’app utilizzando gli strumenti per sviluppatori di Safari, come faresti con un’applicazione web.

Abilita gli strumenti per sviluppatori di Safari

Per abilitare gli strumenti per sviluppatori:

  • Apri le preferenze di Safari

    • Fai clic su Safari nella barra dei menu
    • Fai clic su Preferenze

  • Fai clic su Avanzate nella finestra Preferenze

chlimage_1-47

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

Collegare Safari ad iOS

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

  • In una finestra della console, accedi alla directory principale della sorgente estratta.
  • Immetti il seguente comando per avviare l'app sul tuo dispositivo o emulatore.
phonegap run <platform> --device

// -- or -- //

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

chlimage_1-48

Eseguire il debug di JavaScript con l’ispettore Web di Safari

Puoi impostare punti di interruzione in qualsiasi punto della sorgente. Quando interagisci con l’emulatore o il dispositivo, l’esecuzione dell’app si arresta a quei punti di interruzione. Puoi eseguire un’analisi approfondita dell’esecuzione e controllare i valori nelle variabili.

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

chlimage_1-49

  • Utilizza i pulsanti di controllo per continuare l’esecuzione, passa il cursore, entra ed esce dai metodi:

NOTA

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

Passaggi successivi

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

In questa pagina