I primi passi con PhoneGap: accesso ai dati tramite un servizio REST – Parte 1

Print Content | More

Dopo aver visto qualche semplice esempio di utilizzo di PhoneGap, vediamo ora qualcosa di più complesso ma anche più utile: come importare dati esposti da un servizio. In questo post non andremo ad utilizzare le funzionalità specifiche di PhoneGap: quello che faremo sarà consumare un servizio REST, esattamente come faremmo con un’applicazione web tradizionale. C’è però qualche accorgimento da adottare per far si che il tutto funzioni anche su Windows Phone, a causa di qualche problemino di compatibilità tra jQuery e PhoneGap per Windows Phone.

Ma andiamo per gradi.

I servizi REST

I servizi di tipo REST sono una realtà sempre più diffusa, grazie anche alla semplicità di utilizzo indipendentemente dalla tecnologia utilizzata per “consumarli”. Al contrario dei web service tradizionali (basati su SOAP), i servizi REST si basano sul solo protocollo HTTP e si rifanno al concetto di risorsa più che di operazione. Cosa significa? Che un web service tipicamente espone una serie di operazioni, le quali vengono interpretate e utilizzate dal client grazie al protocollo SOAP; i servizi REST invece mappano questa richiesta sotto forma di risorsa, usando la normale notazione degli URL del protocollo HTTP. Ecco perciò che un’ipotetica funzione per recuperare le informazioni di un utente specifico verrebbe tradotta in un web service con il metodo getUser(int id), mentre in un servizio REST si tratterebbe semplicemente di richiamare l’URL /User/5 (dove 5 è l’ipotetico id di un utente).

Il vantaggio di questo meccanismo è evidente: lato client per consumare un web service è necessaria una libreria che sia in grado di tradurre la chiamata SOAP in un qualcosa di comprensibile per il linguaggio che stiamo utilizzando, a meno che non vogliamo elaborare manualmente le chiamate SOAP di richiesta e di risposta. E’ il caso ad esempio di Visual Studio: quando importiamo un servizio tramite l’opzione Add Service Reference viene generata una classe proxy, che non è altro che la rappresentazione sotto forma di classe in C# o VB.NET del servizio.

Con i servizi REST tutto ciò non è necessario: è sufficiente chiamare l’URL ed elaborare la risposta (tipicamente un XML o un JSON). Proprio per questo motivo, i servizi REST sono sicuramente la scelta più utilizzata nel mondo Javascript, in quanto non richiedono nessun tool o libreria particolari per essere utilizzati. E’ sufficiente effettuare una semplice chiamata HTTP verso l’URL ed elaborare la risposta (operazione resa ancora più semplice da librerie come jQuery, come vedremo tra poco).

Per il nostro esempio utilizzeremo un servizio JSON già pronto, nei prossimi post vedremo invece come crearne uno sfruttando ASP.NET MVC. Il servizio scelto per questo tutorial è quello offerto da, rullo di tamburi, Bacon Ipsum, fantastico sito che ho scoperto grazie ad un tweet di Lorenzo. Avete presente Lorem Ipsum, celebre sito utilizzato per la generazione di testi casuali? Questi testi solitamente vengono utilizzati in fase di montaggio di un prototipo o di un sito Internet, per dare l’idea dell’ingombro che occuperanno i testi. Bacon Ipsum fa la stessa cosa, ma sostituendo alle parole latine i nomi di vari tipi e tagli di carne (come steak, bacon, beef, ecc.). Smile

Al di là della goliardia, questo sito fa al caso nostro perchè espone proprio un servizio REST che permette di recuperare testi generati a caso in formato JSON.

Creiamo il progetto

Non sto qui a ripetere punto per punto i passi per creare un progetto PhoneGap per Windows Phone, dato che li abbiamo già visti nel post precedente: ne approfitto solamente per segnalarvi che, rispetto al post precedente, è stata rilasciata una nuova versione di PhoneGap, la 1.4.1 per la precisione. Il procedimento per installarla è sempre lo stesso: scaricate il pacchetto e copiate il file PhoneGapStarter.zip nella cartella dei template di Visual Studio. Dopo aver creato un nuovo progetto PhoneGap, vi ritroverete la struttura che ormai dovrebbe esservi famigliare: andremo ad agire all’interno della cartella www per consumare il servizio e mostrare a video i testi generati a caso.

La prima cosa da fare è includere jQuery, la celebre libreria che semplifica la vita a chi sviluppa in Javascript, offrendo una sintassi più semplice e il supporto nativo per alcune delle funzionalità più utilizzate con questo linguaggio, come le chiamate asincrone e il parsing di dati JSON. Abbiamo due possibilità:

  • Utilizzare una CDN (Content Delivery Network), ovvero appoggiarci ad uno dei tanti servizi che ospitano in maniera distribuita jQuery. Microsoft stessa ci offre questa opportunità, mettendoci a disposizione sia la versione tradizionale per lo sviluppo che quella minificata per la distribuzione.
  • Scaricare jQuery dal sito ufficiale http://www.jquery.com e includere la libreria all’interno della cartella www di PhoneGap.

L’unico vantaggio di utilizzare una versione locale di jQuery è che saremo in grado di utilizzarla anche in assenza di connettività: dato che però la nostra demo ruota attorno all’utilizzo di un servizio REST esposto su Internet, direi che possiamo tranquillamente utilizzare la CDN di Microsoft tramite l’URL http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js

Ci basta perciò inserire nella sezione <head> del file index.html la seguente riga:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>

Aggiornamento: il buon Marco De Sanctis mi ha fatto giustamente notare che l’utilizzo di una CDN su un’applicazione mobile non è consigliata, in quanto se per un problema di sicurezza un hacker dovesse riuscire a “mettersi” in mezzo alla CDN sarebbe poi in grado, grazie alle API di PhoneGap, di accedere ai dati del vostro telefono. Il consiglio è quindi quello di scaricare jQuery in locale (tramite NuGet o direttamente dal sito ufficiale) e includerlo nella cartella www, dopodichè aggiungere una referenza alla copia locale invece che alla CDN, come nell’esempio:

<script type="text/javascript" src="scripts/jquery-1.7.1.js"></script>

A questo punto siamo pronti per sfruttare le feature di jQuery per interagire con il servizio REST di Bacon Ipsum. Nel prossimo post vedremo come fare!


Windows Phone , PhoneGap , Microsoft , JQuery , HTML 5

0 comments

Related Post


(will not be published)
(es: http://www.mysite.com)