Nel primo articolo di questa serie era stato introdotto il framework PhoneGap per realizzare applicazioni mobile ibride che rispettano i requisiti di adattabilità e di portabilità. In questa seconda parte verranno illustrate le caratteristiche di questo prodotto e il modo in cui riesce a fornire supporto nello sviluppo di applicazioni permettendo l‘”usabilità” delle funzionalità native del dispositivo, lasciando che lo sviluppatore si concentri solo sulla realizzazione della web application.

PhoneGap

PhoneGap è uno strumento di sviluppo opensource, realizzato da Nitobi [NTB], utile se si vogliono costruire applicazioni in HTML e JavaScript, ma capaci di accedere alle funzionalità di base, normalmente non accessibili da browser, in piattaforme come iPhone, Android, Palm, Symbian e Blackberry.

PhoneGap agisce da “ponte” tra le applicazioni web e i dispositivi mobili fornendo una modalità semplice per poter accedere alle funzionalità native tramite l’utilizzo di semplici invocazioni JavaScript (Figura 1).

 

 

 

Figura 1 – Il collegamento tra le due parti è realizzato da PhoneGap mediante API JavaScript.

 

Come illustra la figura sopra, occorre che dalla web application esista una modalità “standard” per invocare le API native in maniera indipendente dal tipo di piattaforma sottostante. PhoneGap è infatti un framework che permette ad una web application di invocare le API native mediante funzioni JavaScript di cui è possibile vedere gli esempi forniti sul sito di riferimento. Il vantaggio nell’utilizzo di questo framework è che esso fornisce l'”aggancio” tra la piattaforma nativa e la web application, di modo che uno sviluppatore che non ha conoscenze specifiche sui linguaggi nativi, possa dedicarsi allo sviluppo della web application con tecnologie standard.

Per capire meglio come un’applicazione sviluppata con PhoneGap possa poi “magicamente” adattarsi a qualunque tipologia di piattaforma, è utile vedere come sia strutturato sia a livello architetturale che a livello di componentistica e strumenti.

Architettura di PhoneGap

Il vantaggio fondamentale di PhoneGap sta nel fatto che, una volta realizzata l’applicazione per il mobile con questo framework, l’applicazione si “adatta” a qualunque piattaforma supportata (al momento Android, BlackBerry, iPhone).

 

 

 Figura 2 – Interfacciamento di PhoneGap.

 

Come mostra la figura 2, PhoneGap deve interfacciarsi con la web application e con ciascun sistema operativo della piattaforma sottostante.

PhoneGap userà il linguaggio nativo della piattaforma per accedere alle risorse hardware e software in modo da aggiungere le funzionalità di base al motore JavaScript e renderle così facilmente utilizzabili dall’applicazione come fossero tradizionali metodi di libreria.

In base alla tipologia di piattaforma con la quale dovrà interfacciarsi, l’implementazione di aggancio sarà di conseguenza sviluppata in Objective C per iPhone, in Java per Android, e così via; e tale implementazione è fornita dallo stesso framework. In pratica esiste un runtime basato su WebKit in cui vengono iniettate le componenti statiche.

Il risultato sarà un pacchetto composto di due elementi principali con differenti responsabilità che però cooperano tra loro per fornire delle funzioni a valore aggiunto. Nel caso specifico il runtime si occupa di dialogare direttamente con il dispositivo e le parti statiche offrono l’interfaccia verso l’utente.

L’uso di JavaScript e di Ajax consente poi di dare “vita” alle applicazioni che possono avere comportamenti complessi e comunicazioni verso endpoint remoti realizzando di fatto un’applicazione completa in cui il client è un elemento fondamentale in linea con le moderne applicazioni Web 2.0 (e in contrapposizione a quanto accadeva solo pochi anni fa per le applicazioni web la cui interfaccia era completamente elaborata server side).

Phone Gap API

Di seguito viene riportato un esempio di codice per l’aggancio alle API native da parte di PhoneGap, facendo riferimento alla piattaforma Android. Mediante l’ oggetto browser (WebView) si espongono al motore JavaScript tutti gli oggetti che si vogliono avere a disposizione nell’applicazione ibrida

webView.addJavascriptInterface(fotocamera, "GapCam");

Tramite l’oggetto JavaScript GapCam sarà possibile poi accedere alla fotocamera (funzionalità nativa), oggetto dichiarato in un apposito file .js

Camera.prototype.getPicture = function(successCallback, errorCallback, options) {
    ...
    f (options.quality)
     {
        GapCam.takePicture(options.quality);
    }
    else
    ...

A questo punto, lo sviluppatore che vuole far uso della camera potrà invocarla mediante una function come questa, associata per esempio ad un bottone:

 
function show_pic()
{
    navigator.camera.getPicture(dump_pic, fail, { quality: 50 });
}

Le funzionalità native accessibili mediante PhoneGap sono mostrate in tabella 1.

 

 

Tabella 1 – Le funzionalità native delle diverse piattaforme mobili, accessibili tramite PhoneGap.

 

Peculiartià in PhoneGap: template e distribuzione

Nel paragrafo precedente si è evidenziato il fatto che PhoneGap è un framework e come tale fornisce parte d’implementazione soprattutto nell’interfacciamento verso la parte nativa, mentre la parte che realizza la web application sta nelle mani dello sviluppatore.
Con la figura 3 si vuole meglio chiarire quali parti ci vengono date, per così dire, “gratis” e quali invece sono a nostro carico.

 

 

Figura 3 – Architettura di PhoneGap.

Partendo dal basso verso l’alto, si può notare che la parte in blu è quella del sistema operativo della piattaforma nativa e come tale viene fornita.
Al livello immediatamente sopra troviamo il framework PhoneGap (in grigio) e anch’esso ci viene fornito insieme alle API JavaScript. È curioso notare il rettangolo in arancione che incapsula la web application e le API JavaScript. Questo è stato fatto per mettere in evidenza che l’oggetto browser può essere aperto all’interno dell’applicazione che si sta sviluppando e dunque dentro PhoneGap; di default il browser viene aperto esternamente all’applicazione e di conseguenza ad ogni richiesta si ha l’apertura del web browser. La scelta di aprirlo o meno all’interno dell’applicazione sta allo sviluppatore e nel momento in cui decidesse di aprirlo all’interno dell’applicazione deve apportare delle semplici modifiche al codice di aggancio nativo.
Infine, in verde è evidenziata la parte a carico dello sviluppatore che è la web application, realizzata all’interno di PhoneGap.
Per cui, il pacchetto applicativo destinato alla distribuzione conterrà file statici come HTML , JavaScript , CSS e le classi native di aggancio nativo. Il pacchetto dovrà essere opportunamente firmato prima di essere distribuito sullo store ufficiale delle piattaforme di riferimento.

Utilizzo di PhoneGap

Vediamo adesso come si presenta il framework PhoneGap e come sia possibile utilizzarlo nel momento in cui si decida di creare un’applicazione per più piattaforme.
PhoneGap, disponibile al sito di riferimento [PNG], permette di “pacchettizzare” l’applicazione per le varie piattaforme supportate tramite dei “template” di progetto che sono a corredo del Framework e ne facilitano l’impiego.
La distribuzione di PhoneGap si presenta come mostrato in Figura 4.

 

 

Figura 4 – Distribuzione di PhoneGap.

Ogni pacchetto col nome delle piattaforme, di fatto, rappresenta l’aggancio del framework verso la parte nativa e questo rappresenta il punto di partenza per lo sviluppo di un’applicazione. Per procedere con la realizzazione di un’applicazione, occorrerà preparare tanti ambienti di sviluppo quante sono le piattaforme per cui s’intende distribuire.
Supponendo di voler ad esempio distribuire per iPhone e Android, occorrono i seguenti strumenti:

• Ambiente di sviluppo (Eclipse per Android, XCode per iPhone);
• SDK di riferimento con simulatore.

Per i pre-requisiti e gli strumenti necessari fare riferimento sempre al sito di PhoneGap [PNG].
Dopo il gradino iniziale di preparazione degli ambienti, per la realizzazione dell’applicazione si può decidere di sviluppare in un ambiente più familiare o magari di cui si ha più conoscenza (Eclipse per esempio). Questo è possibile deciderlo per il semplice fatto che l’applicazione che verrà realizzata sarà caratterizzata dalla creazione di file HTML e JavaScript; successivamente, il porting sugli altri ambienti di sviluppo può avvenire con un semplice “copia e incolla” dei file. Naturalmente il funzionamento deve essere verificato mediante l’ausilio degli emulatori forniti dai rispettivi SDK.
Risulta evidente che il “tributo” da pagare per ogni piattaforma si riduce al costo una tantum degli ambienti.
In seguito alla realizzazione, il passo successivo per sfruttare appieno le potenzialità di un’applicazione ibrida coi vantaggi di quella nativa, è la possibilità di distribuzione sugli store ufficiali. Le politiche di distribuzione sono tipiche di ciascuna piattaforma ma i passi fondamentali da seguire sono sostanzialmente questi:

• creazione di account da developer presso i portali;
• acquisto della licenza di distribuzione (tempi di attesa più o meno lunghi per l’abilitazione dell’account);
• rispetto di vincoli sulla realizzazione delle applicazioni;
• rilascio/aggiornamento dell’applicazione;
• attesa dell’approvazione da parte dello store.

Per maggiori informazioni sul processo di distribuzione fare riferimento ai siti dei produttori come per iPhone e Android [DISTRAD].

PhoneGap nella pratica

Per dimostrare le capacità del prodotto abbiamo realizzato una piccola applicazione di esempio per accedere ai contenuti di questa rivista anche da dispositivo mobile.

L’applicazione, che chiameremo MokaMobile, è un semplice prototipo in cui i requisiti utente non vengono presi in considerazione e ci si concentra sugli aspetti tecnologici per dimostrare le potenzialità e gli aspetti pratici di PhoneGap.

Ambiente di sviluppo

Prima di cominciare è necessario informare che le seguenti operazioni sono possibili solo se si dispone di un computer Mac per via del legame dell’ambiente di sviluppo al sistema operativo sottostante.
Incominciamo a preparare l’ambiente:

1. Nel caso non si abbia già l’ambiente XCode è necessario procurarselo al sito http://developer.apple.com/iphone/
2. Recuperiamo a questo punto il progetto PhoneGap all’indirizzo www.phonegap.com facendo attenzione a scaricare la versione 0.8.0 se vogliamo pubblicare l’applicazione su Apple Store.
3. Scaricato il tool possiamo decomprimere l’archivio.
4. A questo punto sarà necessario andare nella directory iPhone e preparare i JavaScript che sono necessari alla nostra applicazione. Per farlo dovremo spostarci nella directory iPhone e dalla shell digitare il comando “make”;
5. Al termine è necessario copiare i file JavaScript prodotti dal comando make nella directory “/lib/iphone” nella directory di lavoro “/iphone/www”, con il comando “cp ./lib/iphone/*.* ./iphone/www/”.
6. Cliccare sul file *.xcodeprj, per aprire l’ambiente di sviluppo Xcode, per compilare e testare l’applicazione con l’emulatore incluso con l’SDK.

 

 

 

 

Applicazione MokaMobile

A titolo di esempio è stata creata una prima pagina web disponibile in locale al dispositivo che permette all’apertura dell’applicazione di mostrare i contenuti di cui l’utente potrà disporre anche senza essere collegato. La realizzazione dell’applicazione prevede che da dispositivo mobile si possa richiedere a MokaByte:

• la pagina dei corsi forniti da Imola Informatica;
• la pagina degli articoli mensili pubblicati da Imola Informatica.

La figura 6 mostra la home dell’applicazione MokaMobile.

Figura 6 – MokaMobile home.

 

Risorse statiche

Per questa applicazione si vuole realizzare la parte web mantenendo l’accesso alle funzionalità base del dispositivo.
Sotto la directory “/www” saranno presenti tutte le risorse statiche come le pagine HTML e i file .js:

• mokamobile.html: la pagina home dell’applicazione che presenta i link alla pagina dei corsi e degli articoli;
• phonegap.js: il JavaScript da usare per le invocazioni native.

Creazione della MokaMobile home

Verranno indicati i passi principali da fare per creare la pagina home mokamobile.html.

Per usare le funzioni JavaScript messe a disposizione da PhoneGap per l’accesso alla parte nativa, occorre prima di tutto includere il file “phonegap.js”. Includere il “phonegap.js” come segue:

    
        
...

Definire le function JavaScript per le funzionalità native:

function beep(){
    debug.log("beep");
    navigator.notification.beep(2);
}
function vibrate(){
        debug.log("vibrate");
        navigator.notification.vibrate(0);
}
...

Costruire l’html della pagina

La costruzione del body segue le regole standard per la creazione di una pagina HTML. Le informazioni come Platform, Version, Device Name, UUID saranno arricchite mediante l’invocazione alle API native.
Successivamente si procede con la creazione dei link ai corsi e agli articoli; ad ogni link si può associare una function JavaScript come la getArticolo(), all’interno della quale si ha la chiamata al server di MokaByte.
Eseguire la Build e la Run dell’applicazione. Dalla home MokaMobile sarà possibile cliccare su uno dei link, quello degli articoli o dei corsi. Il risultato che si ottiene è l’apertura della pagina degli articoli o dei corsi, come mostrano rispettivamente le figure 7 e 8:

Figura 7 – Pagina articoli.

 

 

Conclusioni

In questa seconda parte della serie si è parlato di come il framework PhoneGap riesce a fornire supporto al modello delle applicazioni per il mobile. Il fatto di fornire le funzionalità native alle web application in maniera “standard” cioè nel senso che queste sono invocabili mediante funzioni JavaScript, permette di non avere lock-in conoscitivi su linguaggi nativi. Oltre questo aspetto, l’applicazione mobile che ne risulta riesce ad “adattarsi” alle piattaforme native che lo stesso framework supporta.
Si sono evidenziati aspetti architetturali e tecnologici dello stesso framework per mettere in luce le parti che esso stesso fornice e quali invece sono sotto la responsabilità dello sviluppatore. Solitamente a quest’ultimo è lasciato il compito di definire la parte web dell’applicazione.
Dopo la fase realizzativa e di testing, un aspetto fondamentale del processo di sviluppo di queste applicazioni sta nella fase di distribuzione. Questo aspetto non è da sottovalutare in quanto prevede anche dei passi burocratici che vanno dall’acquisto della licenza alla fase di distribuzione e accettazione della stessa applicazione. Questi step possono avere dei tempi più o meno lunghi che devono essere previsti nel processo di sviluppo e che in alcune occasioni possono diventare bloccanti, soprattutto per le fasi di accettazione.
Per dimostrare la fattibilità del modello suggerito, infine, è stata presentata un’applicazione prototipale che ha l’obiettivo di simulare una versione mobile di questa rivista [MB]. La descrizione del prototipo naturalmente si è concentrata solo sui macro passi di sviluppo e non ha l’obiettivo di spiegare esattamente come si sviluppa con questo prodotto (ed eventualmente si rimanda alla documentazione ufficiale per i dettagli), ma vuole semplicemente indicare il modello di sviluppo e inquadrare lo scenario in cui sviluppatori e utenti vengono proiettati grazie a questo modello applicativo decisamente innovativo.

Riferimenti

[NTB] Nitobi. Web & Mobile Applications
http://www.nitobi.com/

[DISTR] O’Reilly, Submitting Your App to iTunes
http://building-iphone-apps.labs.oreilly.com/ch08.html

[MB] Home page di MokaByte
https://www.mokabyte.it

[PNG] PhoneGap
http://phonegap.pbworks.com/

[DISTRAD] Android Market
http://tinyurl.com/5vr3sp