Guida sviluppo mobile con ionic framework

Nell’articolo di oggi  vediamo come impostare il framework ionic al fine di sviluppare app android, ios e html5.

Perchè un framework mobile?

Come molti di voi sapranno per “framework” si intende uno strumento usato al fine di rendere più agevole e veloce la programmazione. Ogni framework che si rispetti mette a disposizione un set di istruzioni, workflow e dinamiche al fine di rendere lo sviluppo sempre più snello e semplice.

In ambito prettamente mobile lo sviluppo “nativo” su ios e android può – nella maggior parte dei casi – essere un gran bel grattacapo. Pensiamo innanzitutto alla miriade di dispositivi presenti sul mercato, alle varianti software presenti, alle innumerevoli variabili di sistema. Sviluppare nativamente per ios e android richiede altresi una conoscenza trasversale di due (!) SDK di sviluppo con relative varianti di linguaggio.

Non si può negare abbia anche alcuni vantaggi. Tra il vantaggio più rilevante dello sviluppo nativo troviamo, ad esempio, un maggiore controllo sui dispositivi e sopratutto un code-factory che “assorbe” molte meno risorse di sistema (sempre che gli sviluppatori sappiano il fatto loro). Questo si traduce ovviamente in un ottimizzazione che nativamente è globalmente migliore rispetto a chi usa app con framework o comunque in modo non nativo.

Il framework ci viene incontro per chi vuole sviluppare app cross- device con il minimo sforzo e ottenendo comunque ottimi risultati ( se siete bravi non si noterà la differenza tra app nativa o con framework di sviluppo mobile). Partiamo dicendo che esistono svariati framework mobile. Phonegap e Ionic (tutti derivanti da Cordova) sono sicuramente i più conosciuti.

Personalmente dopo  una breve analisi e ricerca mi sono concentrato su Ionic che reputo essere un’evoluzione molto interessante. Tuttavia consiglio a tutti di fare un rapido giro su internet per trovare il framework che piu si adatta al proprio stile/esigenze.

Oltretutto la community ionic e la documentazione non sono niente male. Potete trovare il sito ufficiale a questo indirizzo.

Impostare l’ambiente di sviluppo

Ok avete scelto ionic? Per prima cosa impostiamo l’ambiente per poterci lavorare. Questo framework richiede Node.js con relativo terminale. Se non lo avete installatelo scaricando il packing da qui.

Una volta installato, aprite il terminale node js e digitate sul terminale come segue:

npm install -g cordova ionic

Con questo passaggio installiamo ionic e relative dipendenze (tra cui Cordova). Et voilà, Ambiente di sviluppo configurato!

Primi passi con Ionic Framework

Ionic permette di installare alcuni modelli di layout basici al fine di velocizzare lo sviluppo (ad esempio menu slide in-out) ecco un  elenco con preview:

Theme_Project_Ionic

Per creare un progetto con uno di questi template vi basterà digitare da terminale:

ionic start myApp blank --> Versione vuota
ionic start myApp tabs --> Versione con tab
ionic start myApp sidemenu --> Versione con slidemenu

Verrà creata una cartella myApp dentro il vostro user. La struttura delle directory che troverete dentro la cartella è la seguente:

+-- bower.json     // bower 
+-- config.xml     // cordova config
+-- gulpfile.js    // gulp
+-- hooks          // Hooks cordova
+-- ionic.project  // ionic config
+-- package.json   // node 
+-- platforms      // iOS/Android builds
+-- plugins        // Cartella plugin
+-- scss           // scss 
+-- www            // Cartella principale app

Per aprire la preview della vostra nuova applicazione agite come segue (sempre da terminale nodejs):

cd myApp
ionic serve

A questo punto si aprirà la preview dell’applicazione sul vostro browser al fine di essere testata. Ecco invece i comandi per testare su android /ios:

ANDROID

ionic platform add android
ionic build android
ionic emulate android

IOS

ionic platform add ios
ionic build ios
ionic emulate ios

Una volta installata una delle 3 varianti sopra indicate potrete facilmente iniziare ad analizzare il codice al fine di “capire meglio” il workflow usato da ionic di cui parleremo nel prossimo articolo.

Conclusioni

Come sempre vi lascio con alcuni link in calce che ho trovato utilissimi al fine di capire meglio questo framework, nel prossimo articolo inizieremo con presentare il workflow di sviluppo MVC di ionic (Chi usa Angular JS lo troverà estremamente facile!) e andremo ad analizzare come poter iniziare a creare nel concreto la nostra applicazione ibrida grazie a questo potente framework mobile.

[button link=”http://ionicframework.com/getting-started/” style=”blue”]Primi passi[/button] [button link=”http://ionicframework.com/docs/” style=”blue”]Documentazione ufficiale[/button]  [button link=”http://learn.ionicframework.com/formulas/” style=”blue”]Domande e risposte[/button]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

6 utili code snippets per i vostri progetti pronti all'uso

6 utili code snippets per i vostri progetti pronti all'uso