Apr 12
giacomo-deglinnocenti-guida-installare-ionic

In questa guida vi illustrerò come installare tutto il necessario per essere in grado di sviluppare un applicazione con Ionic 2.

La creazione di app in Ionic ci consente, con una sola applicazione, la distribuzione sia su Android che su iOs, andando così a coprire una fetta di mercato più grande rispetto a una programmazione di un app in codice nativo. D’altra parte, soprattutto in fase di testing, sarà bene testare l’app su più device possibili, e non solo su una singola piattaforma. Ionic si caratterizza per un impegno consistente dei suoi sviluppatori nell’ottimizzazione e velocizzazione delle risorse sui device, e per una grafica ready to use. E’ anche veloce in termini di tempi di sviluppo e deploying.

Prerequisito: Installazione di Node.js e npm

Sempre più negli ultimi anni si è diffuso l’utilizzo del programma npm (Node Packet Manager) come sistema di download&install nell’ambito dello sviluppo software. Si tratta di un packet manager con un enorme repository di software JavaScript, basato su Node.js. Ma non solo, npm è molto utile anche nella creazione e gestione di progetti Node.js.

Se hai Mac puoi usare il seguente metodo: Installare Node.js e npm utilizzando Brew

Per installarlo è sufficiente visitare https://nodejs.org/ e scaricare l’ultima versione di Node. Potete scegliere sia l’LTS, che è la versione più stabile, che la “current” che invece è l’ultima rilasciata, quindi con le ultime features da provare ma anche meno stabile perché meno testata.

Una volta scaricato il pacchetto di installazione sarà possibile installarlo come per tutti i programmi per computer, cliccando sul file .exe o .pkg .

Una volta terminata l’installazione, assicuriamoci che il tutto sia andato a buon fine aprendo una finestra del terminale e digitando:

npm -v

Se tutto è andato bene, dovreste vedere stampata a schermo la versione del vostro npm, altrimenti qualcosa è andato storto e sarà necessario indagare sulle cause del problema e risolverlo prima di continuare.

Installazione di Ionic

Adesso che abbiamo un packet manager pronto all’uso, lo possiamo usare per installare l’ambiente Ionic.

Spesso quando utilizzeremo npm per installare un pacchetto, avremo cura di aggiungere il parametro -g che indica a npm di installare il pacchetto globalmente sulla macchina, e non al contrario in una specifica cartella, facendo in modo che quindi sia sempre disponibile a livello di sistema.

Installiamo Ionic e Cordova globalmente: apriamo una finestra del terminale e digitiamo quanto di seguito

npm install -g ionic cordova

Se siamo su ambiente Mac/Unix potremmo dover aggiungere sudo prima del comando per operare con i permessi del super user.

Anche stavolta, assicuriamoci che l’installazione sia andata a buon fine, lanciando il seguente comando nel terminale:

ionic -v

dopo qualche secondo dovremmo vedere comparire il numero di versione del nostro ionic. Se così abbiamo completato l’installazione con successo. Altrimenti dovremo investigare sul problema e risolverlo.

Installazione dell’ambiente di sviluppo VisualStudio Code

Sviluppare software può essere anche bello, se abbiamo però un buon ambiente di sviluppo!

La mia scelta per sviluppare in Ionic è Visual Studio Code, un prodotto di Microsoft gratuito che unisce la velocità, semplicità e modularità di Sublime Text alla capacità di aprire una cartella come fosse un progetto e navigarci dentro.

Per scaricarlo andiamo su https://code.visualstudio.com/ e facciamo il download. Dopodiché installiamolo nella cartella delle applicazioni/programmi del nostro computer, creando eventualmente un collegamento sul Desktop o su una barra di accesso rapido.

Una volta installato, apriamolo e installiamo le estensioni che ci serviranno.

Installazione dei moduli Ionic per VisualStudio Code

Per facilitarci ancora di più il compito di sviluppo, andiamo adesso ad aggiungere al nostro IDE due moduli importanti. Uno servirà a darci aiuto nella scrittura del codice, suggerendo ed auto completando gli snippet di codice. L’altro invece, ci permetterà di lanciare comandi Ionic direttamente dall’IDE invece che da linea di comando! Inoltre, quando avremo realizzato la nostra prima applicazione vedremo che quando faremo una modifica sarà Code stesso a fare il deploy in automatico delle modifiche senza dover lanciare nessun comando aggiuntivo!

Una volta dentro Code, clicchiamo sulla barra verticale a sinistra sul pulsante Guida Installazione Ionic che apre il pannello dei moduli.

Adesso cerchiamo e installiamo i seguenti due moduli:

Ionic 2 Snippets
Ionic2-vscode

Installateli tutti e due e riavviate Code quando richiesto.

Adesso vediamo se abbiamo a disposizione i nuovi comandi installati. Digitiamo CMD + SHIFT + P (Mac) oppure CTRL+SHIFT+P (Windows) e si aprirà una barra orizzontale in alto, al cui interno digiterete “ionic” e dovreste vedere apparire i seguenti comandi:

Giacomo Degl'Innocenti Guida Ionic

 

Se riuscite a vederli, complimenti! Avete installato con successo il vostro ambiente di sviluppo Ionic!

Potete adesso proseguire con Creare la prima applicazione Ionic

Per qualsiasi aiuto o informazione scrivete nei commenti!

 

Sito ufficiale di riferimento e documentazione: https://ionicframework.com/