In Ionic ogni nuova applicazione creata verrà inserita all’interno di una cartella di progetto che conterrà sia i sorgenti che ci permetteranno di modificare e sviluppare la nostra app, sia i file di supporto propri di Ionic che ne consentono il funzionamento, i plugin e le piattaforme.

Quindi sarà bene sul proprio computer creare una cartella “Ionic” o il nome che preferite così da contenere tutti i nostri progetti. Creiamola come preferiamo e poi apriamo una finestra del terminale e spostiamoci al suo interno. Da terminale digitiamo il percorso della nostra cartella:

cd /Users/’nome utente’/Documents/”Ionic”/

fatto ciò, lanciamo il comando:

ionic start myApp tabs

Notiamo alcune cose nei parametri di questo comando:

•  myApp = il nome dell’app che si vuole creare.
•  tabs = il template di base scelto (di base ne abbiamo 3 e ne discuteremo in seguito).

Lanciando il comando vediamo dal terminale tutte le operazioni che vengono effettuate per la creazione del progetto, tra cui il download e l’installazione del template e delle sue librerie. Una volta completato, l’applicazione di base è già pronta per partire!

Per vedere cosa abbiamo creato possiamo avvalerci di nuovo del nostro caro terminale, quindi spostiamoci nella cartella Ionic, quella che avevamo scelto inizialmente e quindi nella cartella del progetto ( con il comando cd myApp ).

Una volta dentro la cartella del progetto, di cui discuteremo in seguito, dobbiamo eseguire la nostra applicazione. Per farla girare,  sempre tramite il nostro terminale digitiamo:

ionic serve

Dopo pochi secondi si aprirà il browser e potremo navigare all’interno dell’app, come se fosse dentro il nostro device, ma per simulare al meglio una visione come da smartphone sarà meglio ridimensionare lo schermo diminuendo la larghezza (Se usiamo Chrome come browser possiamo fare “ispeziona” e utilizzare la visualizzazione device). Di default, un’applicazione Ionic viene fatta girare sulla porta 8100 (in caso di più applicazioni lanciate possiamo sempre cambiare questa porta).

Per andare avanti torniamo nel terminale e chiudiamo la sessione corrente digitando CTRL + C. Così facendo, diremo al server di Ionic di spegnersi e di conseguenza il browser non potrà più mostrare l’app.

A questo punto notiamo che la nostra app è suddivisa in 3 schermate, accedibili premendo i “tab”, ovvero i pulsanti nella barra orizzontale in basso nella schermata. Ma non per forza la nostra app dovrà avere questo design. Prima abbiamo creato il nostro progetto digitando  tabs alla fine, ma i template di lancio sono almeno tre come illustrato di seguito.

•  blank che permette di creare un app vuota (meglio dire bianca, senza nessun elemento e con una sola pagina),
•  tabs, che abbiamo appena usato e creare il menù di navigazione più usato con i tab in basso,
•  sidemenu, menù di navigazione verticale che si apre sul lato della schermata (destra o sinistra a nostra scelta).

Quando avremo poche voci di menù potremo usare le tabs, mentre quando ne avremo tante sarà consigliato scegliere sidemenu.

Per iniziare a sviluppare la nostra app può essere utilie Visual Studio Code, come indicato nella guida precedente. Una volta dentro il programma, clicchiamo sull’icona dei file nella barra laterale e poi clicchiamo apri cartella. Spostiamoci nella cartella del progetto che abbiamo appena creato e scegliamo apri. A questo punto VS Code caricherà la cartella e sarà possibile navigarci dentro e aprirne i file. Apriamo il terminale interno di VS e digitiamo, come abbiamo imparato:

ionic serve

Allo stesso modo di prima, dopo qualche secondo si aprirà il browser permettendoci di usare la nostra app. Il vantaggio di utilizzare VS Code sta proprio nel poter accedere alle funzioni del framwork direttamente dall’IDE, risulta così molto veloce procedere nella fase di sviluppo e testing.

Proviamo a fare una modifica all’app. Dentro Code potete vedere tutti i file della cartella di progetto che abbiamo creato, in seguito vedremo nel dettaglio cosa sono questi file e a cosa servono, per adesso apriamo il file src/pages/home/home.html da VS Code e modifichiamo l’h2 come nell’esempio sotto, sostituendo il titolo con una frase a piacimento.

<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Benvenuto nella tua app!</h2>
<p>
Questo è il nostro primo progetto!!
</p>
</ion-content>