La prima app, Hello Ionic

Parlando del setup dell'ambiente di sviluppo del framework abbiano citato il comando ionic start ed abbiamo detto che esso prepara l'infrastruttura necessaria allo sviluppo di un'app ibrida. Tale comando, in realtà, crea una vera e propria applicazione con un suo layout grafico predefinito.

Avremo modo di tornare sulla gestione e personalizzazione del layout di un'applicazione. Per il momento vogliamo concentrarci sulle modalità di utilizzo dell'ambiente Ionic per gestire lo sviluppo e l'esecuzione di un'applicazione. Eseguiamo quindi il comando:

ionic start myApp

Vedremo la cartella myApp popolarsi dei file che compongono la nostra applicazione.

Test nel browser

Quando avremo una maggiore conoscenza di Ionic potremo modificare questi file con il nostro editor preferito. Per il momento possiamo limitarci a visualizzare l'applicazione all'interno di un browser per valutare l'impatto grafico lanciando il comando:

ionic serve

In modo analogo a quanto avviene con Cordova, questo comando avvia un server web e lancia il browser predefinito sulla pagina iniziale della nostra applicazione. A questo punto dovremmo vedere una schermata analoga alla seguente:

Possiamo muoverci tra i pulsanti in basso ed apprezzare gli effetti di transizione e le funzionalità di massima dell'applicazione.

La visualizzazione all'interno di un browser è molto comoda e rapida, e rappresenta un approccio valido per valutare immediatamente l'effetto delle nostre modifiche sul codice dell'applicazione. Tanto più che le modifiche salvate sui file sorgente vengono immediatamente caricate e mostrate sul browser senza il nostro intervento.

Generare l'app mobile

Tuttavia, per valutare effettivamente l'applicazione nell'ambiente di destinazione dobbiamo generare l'app mobile per la la piattaforma mobile di riferimento. Questo si rende tra l'altro necessario per utilizzare le funzionalità che richiedono un'interazione con il dispositivo.

Dopo aver abilitato la piattaforma o le piattaforme mobile di destinazione tramite l'apposito comando ionic add platform, avviamo la generazione dell'app tramite il comando ionic build. Ad esempio, il seguente comando genera l'app per Android:

ionic build android

Una volta generata l'applicazione possiamo lanciare l'emulatore di Android, sempre dall'interno dell'ambiente Ionic, tramite il comando

ionic emulate android

È possibile infine installare ed eseguire l'applicazione direttamente su un dispositivo, dopo averlo collegato alla macchina di sviluppo, semplicemente lanciando il comando

ionic run android

Naturalmente gli stessi comandi valgono per la piattaforma di Apple sostituendo alla stringa android la stringa ios.