Guida introduttiva alle Hybrid App con Ionic Framework

Cari developer e non, bentornati sul blog di Codelab Studio, oggi trattiamo un argomento che negli ultimi tempi sta riscuotendo sempre maggiore interesse: le Hybrid App o HTML5 App e lo faremo utilizzando uno dei tool più completi e in voga del momento: Ionic Framework.

“Ciao voglio lanciare un progetto, ho bisogno del sito web e delle app, naturalmente per Android e iOS, magari se ce la fai anche Windows Phone… mi raccomando però voglio partire subito, mi fai sapere?”

Alzi la mano, chi essendo del settore non ha mai avuto una richiesta del genere! Soprattutto negli ultimi tempi con la Startup-mania in tanti vogliono lanciare la propria idea sul mercato e, spesso, vogliono garantire la multicanalità del progetto per cercare di raggiungere da subito il maggior numero di utenti.

Lato sviluppatore, questa apparentemente semplice richiesta pone una serie di scelte progettuali importanti che possono fare da ago della bilancia, alla buona riuscita o meno del progetto.

Ammettiamo che lo sviluppo della web application non sia un problema, ognuno ha i suoi framework di fiducia, ma quando si parla di mobile le cose cambiano. Fondamentalmente abbiamo davanti due strade: native app o hybrid app, quale scegliere?

Hybrid vs Native

Se cercate su Google il titolo di questo paragrafo vi ritroverete sommersi da diatribe infinite tra promotori e detrattori dell’una e dell’altra opzione, ma come al solito la verità sta nel mezzo, e anche in questo caso non esiste l’opzione migliore in assoluto ma, quella più adatta ad una certa esigenza considerando, funzionalità richieste, tempi e costi. In questo articolo ci concentreremo sulle Hybrid App, ovvero quelle applicazioni scritte con frameworks HTML5/Javascript che vengono “incapsulate” in una app nativa tramite WebView. Questo consente di dover scrivere (quasi) una sola volta il codice e avere la (quasi) certezza che la nostra applicazione girerà perfettamente su tutte le piattaforme. Ovviamente tutto ha un costo, e in questo caso pagheremo principalmente in termini di prestazioni e fluidità, ma la discrepanza rispetto al nativo si sta andando sempre più assottigliando, al punto che sempre più esperti del settore, ritengono che in futuro questa sarà la modalità di sviluppo mobile principale.

cordova

All’inizio era Nitobi

Uno dei principali tool di sviluppo per le app Hybrid è rappresentato da Phonegap, conosciuto inizialmente come Nitobi, poi acquisito da Adobe e infine rilasciato in licenza open source col nome di Apache Cordova, ma fondamentalmente stiamo parlando della stessa identica cosa! Ossia un ambiente di sviluppo da riga di comando che vi consente di mettere su in poco tempo l’infrastruttura di base per la realizzazione di una HTML5 Mobile App. Negli ultimi tempi però sono nati diversi interessanti progetti basati su questa piattaforma che mirano ad arricchirne le funzionalità e a facilitare ancora di più la pipeline di sviluppo, uno dei più validi in questo senso è rappresentato da Ionic Frameowork.




Il “Bootstrap” del mobile

Come spiegano anche i suoi creatori, per capire a cosa sia Ionic Framework, possiamo prendere in considerazione ciò che Twitter Boostrap ha rappresentato nello sviluppo web: un toolkit completo di librerie, widget e utility che consente di partire velocemente con un nuovo progetto web, avendo già nella cassetta degli attrezzi buona parte delle cose che ci servono già pronte. Trasferiamo questo concetto al mobile, ed ecco spiegata l’utilità di Ionic, anche se qui non abbiamo solo a disposizione delle librerie di UI, ma anche una potente interfaccia a riga di comando che ci aiuta nel testing, nella compilazione e persino nella produzione degli artefatti grafici (icone, splashscreen ecc…) per tutte le principali piattaforme mobile esistenti.

Primi passi con Ionic

Prima di iniziare a sporcarci le mani, una premessa è importante, per lavorare con Ionic (così come con altri framework), se vogliamo andare aldilà del classico “Hello world” e usarlo realmente in ambito lavorativo, è necessario padroneggiare non solo HTML5, CSS3 e Javascript, ma anche avere dimestichezza con AngularJS perchè come vedremo tutto il framework è basato su di esso. Per chi non ha mai avuto a che fare con Angular sarebbe bene quindi che inizi da qualcosa di più semplice magari da una delle nostre guide 😉 Detto ciò possiamo partire!

1. Installazione

Ionic framework altro non è che un modulo di NodeJS, quindi per prima cosa dobbiamo scaricare ed installare quest’ultimo. Oltre a questo, per sviluppare su Android e iOS, abbiamo bisogno dei relativi SDK, se abbiamo un PC Windows non sarà possibile installare XCode naturalmente, ma possiamo comunque lavorare alla nostra app per poi testarla con l’emulatore dei dispositivi Apple in un secondo momento utilizzando un Mac. Per quanto riguarda Android non ci sono problemi e potete scaricare l’SDK del sistema operativo che usate da questo indirizzo.

Fatto ciò dobbiamo installare un altro requisito fondamentale ovvero il già menzionato Cordova, anch’esso è un module NodeJS quindi apriamo una shell e digitiamo il seguente comando:

npm install -g cordova

Una volta finito, procediamo all’installazione di Ionic con un comando analogo:

npm install -g ionic

A questo punto siamo pronti a creare la nostra prima app!

2. Creazione di una app

Ionic ci mette a disposizione tre “template” di base da cui partire:

  • Blank: applicazione completamente vuota
  • Tabs: applicazione con tre viste e i pulsanti tab sotto
  • Sidemenu: applicazione con il menù laterale in stile Navigation Drawer di Android

ionic-template

Partiamo come ogni tutorial che si rispetti dalla cosa più semplice e quindi dall’applicazione vuota, digitiamo quindi:

ionic start myApp blank

Dove myApp è il nome che vogliamo dare all’applicazione,  attendiamo la fine dell’esecuzione e il framework costruirà per noi un albero di cartelle simile a questo:

albero

La cartella che in questo momento ci interessa è www con tutte le relative sotto cartelle per css, immagini e script, come è facilmente intuibile questa sarà la root della nostra Hybrid App, troveremo già un file index.html all’interno che sarà il nostro punto di partenza. Se lo apriamo con un editor di testo ci troveremo davanti a qualcosa di simile:


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>
<body ng-app="starter">
    <ion-pane>
        <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>
        <ion-content>
        </ion-content>
    </ion-pane>
</body>
</html>

Di base quindi stiamo lavorando con codice HTML, ma come potete constatare ci sono tag specifici del framework: essi altro non sono che direttive di AngularJS, per questo come vi dicevo in precedenza è importante padroneggiarlo. Il punto in cui possiamo iniziare ad inserire il nostro codice è tra i tag <ion-content>, aggiungiamo quindi ciò che vogliamo, testi immagini, o qualsiasi cosa vi venga in mente utilizzando normale codice HTML5. Una volta finito possiamo passare alla fase di test.

3. Testing e debug

La cosa bella di sviluppare in Hybrid è che fintanto che la nostra app non necessità di funzionalità tipiche di un device come fotocamera, sensori, ecc, tutto ciò di cui abbiamo bisogno per testarla è un browser web, come ad esempio Google Chrome che ha un tool di sviluppo tra i migliori in circolazione. Ionic framwork mette a disposizione un comando veramente utile per aiutarci in questo, se entriamo nella cartella “myApp” infatti e digitiamo:

ionic serve

in pochi secondi verrà messo su un mini server web in ascolto sulla porta 8100, su cui si aprirà il nostro browser predefinito: quello che ci troveremo davanti sarà qualcosa del genere:

 

ionic-serve.fw

 

Abbiamo quindi la possibilità di testare l’applicazione direttamente nella finestra del browser con l’ulteriore comodità che ogni volta che apporteremo una modifica al codice html, css o javascript, ionic si accorgerà del cambiamento e farà un refresh automatico della pagina per consentirci di vedere in tempo reale l’effetto delle modifiche.

4. Testing sui dispositivi

Naturalmente prima o poi arriverà il momento in cui avremo bisogno di vedere come la nostra applicazione gira su un dispositivo reale. Niente di più semplice con ionic! Supponiamo di voler installare la app su un device android, innanzitutto lanciamo il seguente comando:

ionic platform add android

In questo modo stiamo dicendo al framework di preparare tutto il necessario per compilare la app per Android, fatto ciò colleghiamo il nostro device e diamo il comando:

ionic run android

Se tutto è andato bene, dopo qualche istante vedremo la nostra app direttamente sullo schermo dello smartphone. In caso contrario verificate che le impostazioni per gli sviluppatori siano impostate correttamente sul dispositivo e che abbiate installato i driver USB per Android.

 

Conclusioni

Abbiamo in questo breve tutorial solo scheggiato la superficie di quello che è possibile ottenere con Ionic Framework, se fate un giro sulla documentazione ufficiale infatti potete dare uno sguardo al gran numero di widget e utility di UI che avete a disposizione: liste, forms, cards, bottoni, tabs icone e così via. Nella sezione Javascript invece troverete tutto il necessario a gestire l’interazione con l’utente, quindi gestures, modal, spinners, navigazione tra le view e molto altro. Che dire quindi? Buon coding con Ionic Framework e le Hybrid apps! E come al solito non esitate a contattarci per qualunque dubbio o semplicemente per farci sapere cosa ne pensate.

Guida introduttiva alle Hybrid App con Ionic Framework ultima modifica: 2015-11-07T16:36:46+00:00 da Codelab Studio

One Comment

  1. 17 gennaio 2017 at 2:06

    Complimenti, guida ben fatta! I miei complimenti!

Lascia un commento