Nella fase di sviluppo di un'applicazione Ionic 2 risulta molto comodo utilizzare il web server integrato in Ionic CLI tramite il comando ionic serve ed utilizzare un browser per testare la nostra applicazione. Evitiamo così il dispendio di tempo necessario per il caricamento e l'esecuzione dell'app in un emulatore o direttamente su un dispositivo, offrendo un feedback immediato delle modifiche che andiamo man mano apportando alla nostra applicazione.
Tuttavia, non tutto è immediatamente apprezzabile su un browser. Prendiamo ad esempio la grafica dell'applicazione. Il rendering dell'interfaccia è basato su fogli di stile che dipendono dalla specifica piattaforma mobile su cui viene eseguita l'app.
Quando l'applicazione viene eseguita in un browser viene automaticamente applicato lo stile previsto per iOS. Per visualizzare il look and feel previsto per Android occorre aggiungere il parametro ?ionicplatform=android all'URL che appare nella barra degli indirizzi. In ogni caso si tratta sempre di un rendering che potrebbe essere leggermente diverso da quello che verrà effettivamente generato sul dispositivo.
Al di là dell'aspetto grafico, che in linea di massima non pone grossi problemi, per il test di funzionalità di interazione con la piattaforma nativa, come ad esempio l'interazione con la fotocamera o con il file system, siamo costretti ad utilizzare un emulatore o meglio ancora un dispositivo fisico.
Usare un emulatore Android
Per eseguire un'app Ionic 2 su un emulatore Android, dobbiamo avere un ambiente di sviluppo Android installato. Non è necessario avere Android Studio, considerato che non utilizziamo il suo IDE, ma è sufficiente avere installato Android SDK. Dal momento però che l'emulatore di Android integrato nell'SDK è purtroppo abbastanza lento, è opportuno utilizzare l'emulatore Genymotion: oltre ad essere molto più veloce, esso dispone di numerose configurazioni di dispositivi Android su cui effettuare i test.
Per lanciare la nostra app in un emulatore Android apriamo il terminale e scriviamo:
ionic emulate androidIn questo modo parte l'emulatore predefinito dell'Android SDK. Se invece preferiamo usare Genymotion, sarà necessario far partire prima l'emulatore e quindi eseguire il comando:
ionic run androidIn questo caso non abbiamo utilizzato ionic emulate, perché Ionic CLI considera l'emulatore Genymotion come se fosse un dispositivo fisico e pertanto utilizziamo lo stesso comando che analizzeremo a breve per i device.
Usare un emulatore iOS
Mentre per la generazione di app Android possiamo utilizzare un qualsiasi sistema operativo desktop, per generare ed eseguire un'applicazione iOS abbiamo bisogno di una macchina OS X con installato XCode. Il lancio della nostra app sull'emulatore avviene in seguito all'esecuzione del comando:
ionic emulate iosTest su device
Per l'esecuzione dell'app Ionic direttamente su un dispositivo fisico, senza passare dai relativi store, non occorre nessuna sottoscrizione per Android, mentre per iOS è necessaria una registrazione gratuita al programma per sviluppatori.
In generale, il comando Ionic CLI per lanciare un'app su un dispositivo fisico è
ionic run <nome piattaforma>Per iOS è necessario, prima di lanciare il comando, installare il pacchetto ios-deploy tramite il seguente comando:
npm install ios-deployView Ionic, esecuzione su dispositivo con deploy dinamico
Un'alternativa all'esecuzione di un'app Ionic su un emulatore o su un dispositivo è l'uso di Ionic View. Si tratta di un'app presente sugli store di Google ed Apple sviluppata dal team di Ionic. Essa è un wrapper generico in grado di eseguire l'HTML, CSS e JavaScript che compongono un'applicazione Ionic.
Per eseguire la nostra app su Ionic View è necessario inviare sui server di Ionic le relative risorse. Questo viene fatto con il comando:
ionic uploadLa prima volta che viene eseguito il comando è richiesto di inserire le credenziali per accedere al servizio o di registrarsi. Una volta inviato il pacchetto, viene visualizzato il messaggio Successfully uploaded (xxxxx), dove al posto di xxxxx viene visualizzata una stringa che rappresenta l'identificatore della nostra applicazione.
Scarichiamo quindi l'app Ionic View sul nostro dispositivo, inseriamo l'identificatore della nostra applicazione quando richiesto e la vedremo in esecuzione pronta per essere testata.
