//Ionic 3 framework installazione

Ionic 3 framework installazione

0 votes
Share on FacebookShare on Google+Tweet about this on TwitterEmail this to someonePrint this page

This post has already been read 169 times!

IONIC – installazione

Ionic e’ framework opensource pensato per chi é interessato in scrivere applicazioni multipiattaforma per smartphone.
Fino a pochi anni fa gli sviluppatori che volevano pubblicare le proprie applicazioni per diverse piattaforme avevano poche scelte su come sviluppare il proprio software, al giorno di oggi esistono molti framework preparati per uno sviluppo veloce di applicazioni con il considerevole vantaggio di non dover riscivere il proprio codice per ogni piattaforma.

Ionic in concreto si basa su un altro framework chiamato Cordova, con il vantaggio di offrire la possibilità di sviluppare con Angular il proprio software.

In questo primo articolo riassumerò brevemente i passi per configurare il framework e poter emulare le proprie applicazioni direttamente nel browser almeno per componenti non nativi, potendo così concentrarci solo sull’interfaccia dell’applicazione.

Bene, bando alle ciance passiamo direttamente alla configurazione del framework in un sistema Linux basato su apt (Ubuntu,debian e derivate).

Per quelli che non avessero a disposizione nodejs, consiglio di attualizzare all’ultima versione disponibile con il comando :

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

 

Installato npm possiamo direttamente iniziare il processo di installazione lanciando :

sudo npm i -g ionic@beta cordova

Prima app di esempio

Finalmente terminato il processo di installazione basterà lanciare il seguente comando per generare uno dei progetti di esempio :

ionic start myProjectTest

a questo punto verrà mostrata direttamente una selezione per poter scegliere il Template che volete utilizzare per il vostro progetto

? What starter would you like to use: 
tabs ............... ionic-angular A starting project with a simple tabbed int
erface 
❯ blank .............. ionic-angular A blank starter project 
sidemenu ........... ionic-angular A starting project with a side menu with na
vigation in the content area 
conference ......... ionic-angular A project that demonstrates a realworld app
lication 

Nel mio caso sceglierò un progetto vuoto, il blank.

Al termine del progetto  vi verrà chiesto se volete usare strumenti nel Dashboard, per adesso rispondete di no.

? Link this app to your Ionic Dashboard to use tools like Ionic View? No

Una volta terminata la installazione per aprire la vostra applicazione basterà entrare nella directory appena creata e lanciare il comando :

$ cd myProjectTest/
$ ionic serve

Questo vi mostrerà nel vostro browser di default la applicazione che avete appena creato.

immagine applicazione ionic in browser

Se volete vedere come si vedrebbe la vostra app con una risoluzione da smartphone basterà premere lo shortcut CTRL-SHIFT-i per aprire il developer tools di google-chrome, e schiacciando il secondo pulsante visualizzarete la vostra app come se fosse eseguta in un telefono.

immagine emulazione ionic in browser

Per adesso è tutto, nei prossimi giorni inizieremo a modificare l’applicazione.

Se siete interessati all’acquisto di un libro, trovate qui il link.