13

Jan

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

Nel post precedente abbiamo creato il nostro progetto e abbiamo incluso jQuery, libreria che ci servirà per interagire con il servizio JSON di Bacon Ipsum.

Per prima cosa, inseriamo un po’ di HTML: per questo primo esempio ci limiteremo ad aggiungere un semplice pulsante (con il quale invocheremo il servizio) e un div, nel quale andremo a visualizzare i dati recuperati dal servizio.


      

La prima cosa da fare è gestire l’evento relativo alla pressione del pulsante e per fare questo usiamo jQuery, sfruttando i selettori (per recuperare il pulsante tramite il suo id) e la funzione click:

$("#btnCall").click(function () {
      //code goes here
      });

$ è il selettore di jQuery, che permette di navigare il DOM di una pagina HTML e di recuperare gli elementi al suo interno (va a sostituire le varie funzioni Javascript document.getElement, in quanto funge da selettore per tag, per id, per classe, ecc.). Nello specifico, andiamo a recuperare il nostro pulsante che ha come id btnCall. Dopodichè andiamo a definire la funzione che verrà eseguire al click del pulsante, tramite la proprietà click che accetta come parametro la funzione vera e propria.

Affinchè il tutto funzioni correttamente, è importante inserire questo codice all’interno della funzione onDeviceReady, che abbiamo imparato a conoscere nel post precedente: è la funzione che viene invocata nel momento in cui PhoneGap è stato inizializzato ed è pronto a gestire le nostre operazioni.

Andiamo ora a interagire con il servizio vero e proprio e recuperare alcuni testi fittizi:

$("#btnCall").click(function () {
      $.support.cors = true;
      $.getJSON("http://baconipsum.com/api/?type=meat-and-filler&callback=?", function (data) {
      $.each(data, function (index, element) {
      $("#result").append(element);
      });
      });
      });

Per farlo andiamo a utilizzare la funzione getJSON esposta da jQuery, che accetta in input:

  • L’URL del servizio
  • La callback che viene invocata nel momento in cui il servizio ha restituito i dati richiesti e siamo pronti ad elaborarlo.

Notate il parametro &callback=? al termine dell’URL del servizio: questo perchè viene utilizzato il formato JSONP, che è un pattern che è stato ideato per risolvere i problemi di cross scripting di Javascript (per motivi di sicurezza, infatti, in condizioni normali non è possibile da una pagina recuperare tramite Javascript dei dati esposti da un servizio che è ospitato in un dominio differente da quello della pagina stessa).

Il punto di forza del metodo getJSON è che si occupa in automatico di fare il parsing  dei dati, trasformando una semplice stringa JSON in un oggetto vero e proprio (un po’ quello che ad esempio ci permette di fare LINQ to XML con i file XML). Questo significa che il parametro data (restituito all’interno della callback) è in realtà un array contenente una serie di testi, che possiamo ciclare grazie alla funzione jQuery $.each, che è l’equivalente del foreach di C#. Il suo compito è infatti quello di ciclare tutti gli elementi all’interno della collezione, restituendo tramite i due parametri della funzione rispettivamente l’indice e l’elemento corrente.

Quello che facciamo è semplicemente “appendere” al div con id result gli elementi della collezione, visualizzando così a video i testi recuperati dal servizio, uno di seguito all’altro.

Importantissimo! Notate la riga di codice $.support.cors = true? Questa operazione serve per forzare jQuery a supportare le richieste di tipo XMLHttpRequest (sulle quali si basa il metodo getJSON) anche tra domini differenti. Per un problema di compatibilità noto tra PhoneGap, jQuery e Windows Phone 7 se non si inserisce questa riga di codice qualsiasi richiesta verso la rete (che sia getJSON, ajax o quant’altro) fallirà miseramente e alla pressione del pulsante non otteremo alcun risultato.

A questo punto possiamo provare l’applicazione: premiamo F5 per lanciarla nell’emulatore e, se tutto è andato a buon fine, premendo il pulsante Call Service apparirà a video un testo fittizio recuperato dal servizio di Bacon Ipsum.

bacon

 

Testare la pagina con un browser

E se volessimo testare la pagina con un browser? Sicuramente è una strada molto più comoda che tramite l’emulatore, dato che questi richiede un nuovo deploy ad ogni minima modifica. Con un browser ci basta invece salvare il file HTML e premere F5 per vedere subito i risultati. Bisogna però tenere ben presente due cose:

  • Il testing sul browser può essere una buona alternativa, ma non può mai sostituire il test con l’emulatore o su un device reale: in alcuni casi PhoneGap si comporta diversamente rispetto ad un browser, anche solo per il fatto che viene utilizzata una libreria Javascript specifica che non funziona su un browser tradizionale.
  • Se aprite con un browser la pagina che abbiamo realizzato in questo post non funzionerà: questo perchè la funzione click legata al pulsante viene registrata in seguito all’evento deviceready, che però in un browser non viene mai invocato. Per farla funzionare dobbiamo perciò spostare la funzione al di fuori dell’evento deviceready e racchiuderla all’interno della funzione jQuery $(document).ready(), che viene invocata nel momento in cui il caricamento della pagina da parte del browser è completato, in questo modo
$(document).ready(function () {
      $("#btnCall").click(function () {
      $.support.cors = true;
      $.getJSON("http://baconipsum.com/api/?type=meat-and-filler&callback=?", function (data) {
      $.each(data, function (index, element) {
      $("#result").append(element);
      });
      });
      });
      });
A questo punto possiamo aprire la pagina HTML con il nostro browser oppure, ancora meglio, hostarla tramite un web server per verificarne il funzionamento. Se avete Visual Studio 2010 SP1 con IIS Express installato, vi segnalo questo utile tip che mi ha girato il buon Ugo, che vi permette di hostare al volo il contenuto di una cartella su IIS Express tramite un’opzione nel menu contestuale di Windows. Una volta fatte le modifiche al registro spiegate nel post, vi basta fare clic con il tasto destro sulla cartella www del progetto PhoneGap e scegliere la voce IIS Express Here: verrà attivato IIS Express e il sito sarà disponibile all’indirizzo http://localhost:8080. In più, fintanto che l’istanza sarà attiva rimarrà aperto un prompt dei comandi che vi mostrerà tutto il traffico generato.

Nel prossimo post

In questo post abbiamo visto come consumare un servizio già esistente: nel prossimo vedremo come crearne uno nostro sfruttando MVC e come visualizzare meglio i dati a video, grazie ai template. Di seguito il link per scaricare il codice sorgente.

by Il blog di Matteo Pagani on 1/13/2012
Post archive