Sviluppo Mobile

Hybrid Apps per Mobile Devices (Apache Cordova Tools)

Introduzione

Probabilmente lo sviluppo di applicazioni mobile rappresenta la più grande innovazione tecnologica di tutti i tempi. Senz'altro dieci volte più veloce del boom dei personal computer, due volte più veloce del boom di accesso ad Internet e tre volte più veloce della recente esplosione dei social network. Se poi pensiamo alla fruizione di contenuti e servizi via web troviamo che il tempo speso utilizzando una “app” è di circa l’80% del tempo totale speso su mobile confrontato con il 20% speso su siti web navigati via browser.
Se sviluppare applicazioni per mobile è l’unica via per fornire servizi mobile sembra necessario capire che cosa forniscano le diverse piattaforme mobile. In ordine di importanza ecco alcuni parametri che possono permettere di scegliere la propria piattaforma target:

  • Android: velocità e costi di sviluppo, possibilità di guadagno, capacità di raggiungere i potenziali consumatori;
  • Ios: possibilità di guadagno, capacità di raggiungere i potenziali consumatori, velocità e costo di sviluppo;
  • Html5 + js (ossia “hybrid apps”): velocità e costi di sviluppo, capacità di raggiungere i potenziali consumatori, documentazione api e “know how” pregressi;
  • Windows Phone: velocità e costi di sviluppo, documentazione api e “know how” pregressi;
  • Blackberry: velocità e costi di sviluppo, possibilità di guadagno, documentazione api.

Una volta che sia stata scelta la piattaforma o le piattaforme target sorge il problema di come affrontare lo sviluppo di una applicazione su realtà così diverse. Gli approcci sono fondamentalmente tre:

  • L’approccio Silos
  • L’approccio Hybrid
  • L’approccio Code Sharing (Xamarin per intenderci)

Per capire di cosa stiamo parlando prendiamo in considerazione l’approccio Silos. Questo implica lo sviluppo di applicazioni native per ciascuna piattaforma, isolando il codice dell’una rispetto all’altra. Ad esempio sviluppando in Objective-C per Ios, Java per Android e C# per Windows Mobile. Probabilmente l’approccio che richiede più tempo e più risorse e un grande competenza (“know how”) su ciascuna piattaforma.
L’approccio Hybrid consiste, invece, nella filosofia:” write once, run anywhere”. E cioè una volta che il codice sia stato scritto in Html5 e Javascript questo può essere portato su ciascuna piattaforma senza grossi problemi. Una delle tecnologie più promettenti è quella relativa ad Apache Cordova di cui si parlerà a breve. Uno dei vantaggi maggiori di questa tecnologia e approccio è la capacità di portare il proprio “know how” dalle applicazioni web tradizionali al servizio dello sviluppo di “app” mobile e di dare una consistenza e omogeneità anche grafica all’app su diverse realtà.
L’ultimo approccio è il “code sharing”. Utilizzando tecnologie come Xamarin, sebbene quest’ultima sia ancora in fase embrionale, sarà possibile poter scrivere il codice una volta (in C# nello specifico) e di poter generare delle applicazioni native per ciascuna piattaforma. Il costo in termini di “know how” ed economico delle licenze è un fattore che influisce pesantemente sulla scelta di questo approccio.
 

 
Se guardiamo al grafico sopra appare evidente quali siano i parametri che spingono a un approccio rispetto all’altro. Se è necessario spingere verso l’utilizzo completo del device e delle sue funzionalità allora ci muoviamo sull’asse delle ascisse andando verso le applicazioni native ma se invece navighiamo in basso verso i costi in tempo e denaro dello sviluppo dell’app allora ci avviciniamo alla applicazioni “hybrid”.
 

Apache Cordova

Oggi parleremo soltanto dell’approccio “hybrid” e in particolare di Apache Cordova. Vediamo infatti quali sono i tool di cui abbiamo bisogno per essere “up and running” nello sviluppo di una applicazione mobile:

  • Node.js
  • Apache Cordova (un modulo di Node.js)
  • Git (per i plugin di Cordova e l’accesso alle funzionalità del mobile device.)
  • Angular  (o qualsiasi altro framework spa)
  • Mobile UI (o qualsiasi altro framework html5 + javascript che permetta la fruizione via mobile, ie. Touch, gesture, etc…)

Node.js

 

Innanzitutto cos’è Node.js? Node.js è una piattaforma costruita a partire dal runtime JavaScript del famigerato browser Chrome nell’ottica di creare applicazioni veloci e scalabili. Infatti Node.js utilizza un modello orientato agli eventi, asincrono e che non blocca l’accesso alle risorse del sistema (ad esempio il file system) perfetto per applicazioni distribuite real time che richiedono accesso continuo a grosse moli di dati.
E’ possibile installare Node.js sia su Mac, su Linux e su Windows in quanto essa è multi piattaforma scegliendo il package necessario da questa url: http://node.js
E’ possibile creare una semplice applicazione Hello World per verificare che l’installazione sia andata a buon fine e Node.js is “up and running”:

console.log('Hello world, nodejs');

ma non è questo l’obbiettivo di questo breve articolo.
Continuo dicendo che nelle nuove versioni di Node.js viene installato contestualmente al motore node.js un module package downloader e installer che si chiama npm.
 

 
E’ possibile richiamare l’help on line di npm semplicemente digitando:

npm -help

E finalmente arriviamo ad Apache Cordova. Nel riguardo di quanto spiegato precedentemente Apache Cordova è un modulo di Node.js.

npm install –g cordova

Ovviamente il comando da eseguire varia a seconda del sistema operativo:
        Comandi per installare Cordova:
        Mac/Linux: sudo npm install –g cordova
        Windows: npm install –g cordova
        Aggiungere una piattaforma:
        cordova platform add ios
        cordova platform add amazon-fireos
        cordova platform add android
        cordova platform add blackberry10
        cordova platform add firefoxos
        Creare un progetto:
        cordova create hello it.mahamudra.hello HelloWorld
 
A questo punto è necessario chiarire che c’è “vita” oltre Node.Js  e che Apache Cordova può essere riguardato come un insieme (framework) di  API per Mobile Devices che permette agli sviluppatori di accedere alle funzioni native del dispositivo, come la fotocamera o l’accelerometro, attraverso codice JavaScript. Ulteriori informazioni e documentazione sono disponibili presso questo link:

http://cordova.apache.org/

o su GitHub per il codice sorgente.
E prima che vi poniate la domanda sulla relazione esistente tra PhoneGap e Cordova, sì, Phonegap è attualmente una distribuzione open source di Cordova.
Per quanto riguarda invece la reale implementazione dell’app sulla singola piattaforma valgono le seguenti considerazioni generali:

  • Il codice viene "inglobato" (hosted) in una webview
  • Esiste una unica repository di codice (codebase) condivisa da tutti i targets
  • Esistono diversi plugin di base che permettono l'accesso alle funzionalità del device
  • La percentuale di applicazioni che ricadono nell'area di interesse Apache Cordova sono circa il 6% in tutti gli stores però saliamo al 13% se parliamo di enterprise apps.


 
Dopo aver descritto i tools che possiamo utilizzare indipendentemente da Visual Studio vediamo che cosa ci offre Visual Studio 2013 Update 4 e la preview di Visual Studio 2015:

 
Visual Studio Tools per Apache Cordova può essere scaricato presso questo indirizzo:

http://www.visualstudio.com/en-us/explore/cordova-vs.aspx

 

 
Dopo aver installato il plugin per Visual Studio 2013, laddove è invece già integrato in Visual Studio 2015 vediamo che cosa è accaduto al nostro sistema:

  • Registrazione e installazione OSS (Ant, Android SDK, Git, node.js, etc.)
  • Installazione Visual Studio Extension
  • Installazione Visual Studio Update (debugging)

Per la creazione di una nuova App Cordova esistono nuovi templates ed esempi:

  • JavaScript & TypeScript
  • Blank templates

Esempi con i seguenti Framework JavaScript

  • AngularJS
  • Backbone + Underscore + jQuery
  • WinJS (base.js + ui.js)

 
E’ installato inoltre un Config Editor per gestire le “capabilities” del device:

  • Simile al Manifest delle Windows App Manifest con capacità cross-platform integrate con Cordova
  • E’ possibile aggiornare manualmente le versioni dei plug-in via XML o installare plugins custom da plugins.cordova.io.
  • Creare dei blocchi alla versione di dipendenze di librerie per evitare crashes dell’app.
  • Permette il support di plug-ins native customizzati dallo sviluppatore

 
Il build delle app:

  • Utilizza il Cordova CLI
  • Permette di creare un processo di build customizzato
  • Permette la compilazione in remoto su network OSX
  • Permette di lanciare l'agente remoto e di iniziare il deployment sul simulatore Ios

Il debug è nativo come per le applicazioni del CLR e permette:

  • Breakpoints, DOM Inspection, Just-my-code
  • Call-stacks, Locals, Watch
  • TypeScript Source Mapping
  • Il debug viene realizzato su simulatori, emulatori e i target device (Windows ovviamente e Android 4.4+)

La pubblicazione dell’app tiene conto delle specifiche di ciascun store:

  • Deploy via  Windows Intune (Manage distribution & version updates)
  • Deploy Via iTunes for local iOS device

Inoltre è possibile Monitorare le app via Application Insights.
 
Però prima di creare facili entusiasmi c’è da dire che fino a quando la versione di Visual Studio 2015 non sarà definitiva e stabile la via più semplice di gestire una app Apache Cordova è quella di installare ogni singolo tool indipendentemente dall’altro (cosa per altro non banale per se, pensando ad esempio i problemi che potrebbero sorgere quando si apre un’applicazione Cordova con Android Studio che usa Grandle contro Ant utilizzato da Apache Cordova per creare il build delle applicazioni Android).
Concludo parlando di FirefoxOs che nonostante occupi un mercato di device più economico (a mio avviso) rispetto a quello dei suoi competitors ha in Mozilla Developer uno strumento completo ed efficare per il debug di applicazione FirefoxOs Apache Cordova.