Partecipando alle riunioni dei soci di DOT NET Campania ho capito quanto fosse necessario cominciare a studiare un po’ di Javascript in prospettiva di lavorare su HTML 5. La prima esigenza che ho avvertito è stata quella di collegare la pagina a una fonte dati. Ho quindi creato una pagina HTML contenente una mappa di Google e dei marker posizionati in punti estratti mediante un servizio OData.
Il servizio OData è disponibile al seguente indirizzo ed offre informazioni su una serie di concerti tenuti dagli U2 negli anni 80 in Irlanda. Un esempio di concerto (denotato dal tag <entry>) è il seguente:
![CropperCapture[31]](http://dotnetcampania.org/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/salvatore.metablogapi/1385.CropperCapture31_5F00_thumb_5F00_2CC1BC8B.jpg "CropperCapture[31]")
Per consumare il servizio in una pagina HTML tramite Javascript ho utilizzato una fantastica libreria chiamata datajs, pubblicata su Codeplex al seguente indirizzo.
![CropperCapture[32]](http://dotnetcampania.org/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/salvatore.metablogapi/3463.CropperCapture32_5F00_thumb_5F00_7955D361.jpg "CropperCapture[32]")
Il body della pagina si limita ad associare all’evento onload la funzione initialize:
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
![CropperCapture[33]](http://dotnetcampania.org/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/salvatore.metablogapi/3051.CropperCapture33_5F00_thumb_5F00_7BCEDF52.jpg "CropperCapture[33]")
La funzione initialize crea la mappa Google e poi tramite la libreria datajs legge il servizio Odata tramite la function (data). In essa eseguiamo un loop sui risultati della query: ad ogni concerto associamo un marker sulla mappa Google invocando la funzione addMarker.
![CropperCapture[34]](http://dotnetcampania.org/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/salvatore.metablogapi/0083.CropperCapture34_5F00_thumb_5F00_0B224162.jpg "CropperCapture[34]")
Il risultato è il seguente:
![CropperCapture[35]](http://dotnetcampania.org/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/salvatore.metablogapi/1856.CropperCapture35_5F00_thumb_5F00_3D396BDF.jpg "CropperCapture[35]")
Allego il codice sorgente della pagina HTML e la libreria Javascript necessaria al collegamento.
Gli Smartphone più comuni consentono di associare ad ogni foto le coordinate geografiche del punto in cui è stato eseguito lo scatto. Verifichiamolo salvando una foto su un computer e andando a visualizzare le proprietà del file corrispondente.
Quando carichiamo la foto su Flickr, l’interfaccia web ci chiede se vogliamo utilizzare o meno queste coordinate
Flickr mette a disposizione degli sviluppatori di software un insieme di API per l’accesso agli oltre 5 miliardi di foto presenti sul sito. Quasi quasi tutte le funzionalità eseguibili dal portale di Flickr sono disponibili tramite le API. L’utilizzo è gratuito per applicazioni non commerciali. Per iniziare occorre richiedere una chiave per l’accesso alle API al seguente indirizzo:
In particolare, Flickr offre al seguente indirizzo un servizio di reverse geocoding che partendo dalle coordinate geografiche date in ingresso cerca di estrarre informazioni sulla località cercata.
Il risultato della query è disponibile in vari formati (in figura è mostrato l’xml rest). Analizzando l’output si scopre che il tag place ha una proprietà associata chiamata woeid. Tempo fa, ho scritto un post sul tentativo da parte di Yahoo di mettere a disposizione dei suoi utenti un database geografico chiamato GeoPlanet. Il progetto è nato con l’ambizioso scopo di gestire TUTTE le località “permanenti” e dotate di nome sul pianeta Terra. Vi rimando al mio post per scoprire altri dettagli sul progetto. In rete si trova un GeoPlanet Explorer che consente di visualizzare tutte le informazioni associate a un woeid.
Quello che ci interessa di più è che le API di Flickr sono collegate a quelle di Yahoo e ciò apre orizzonti del tutto nuovi.
Sul portale Codeplex troviamo l’ultimo ingrediente necessario: la libreria FlickrNET. Si tratta di una libreria .Net scritta interamente in C# per semplificare l’accesso alle API Flickr. Esistono librerie dll anche per versioni di Silverlight superiori alla 3.0,per Windows Phone e per Monotouch su Iphone.
La prima cosa da fare è creare un’istanza dell’oggetto Flickr:
Come passo successivo eseguiamo una ricerca nell’insieme di foto messe a disposizione di un particolare utente. Un utente di Flickr è identificato univocamente da uno User ID (nel mio caso è 35077877@N00). La libreria offre una classe chiamata PhotoSearchOptions per gestire i criteri di ricerca. Anzitutto creiamo una istanza della classe specificando nel costruttore lo User ID. Chiediamo poi alla libreria di aggiungere alle foto le informazioni geografiche (non disponibili per default).
Estraiamo quindi la collezione di foto associate ai nostri criteri di ricerca:
Possiamo scorrere quindi la lista delle nostro foto (nel mio caso 44)
Ogni oggetto Photo è caratterizzato da un PhotoId univoco. Estraiamo le informazioni associate a un particolare ID:
Il codice ci restituisce il WOEID associato alla foto. Supponiamo ora di voler cercare tutte le foto presenti su Flickr scattate in una particolare area definita da un particolare WOEID. Dobbiamo modificare i criteri di ricerca nella maniera seguente: non specifichiamo più lo UserID ma solo il WoeID della zona a cui siamo interessati.
Nel mio caso particolare la ricerca restituisce ben 158 risultati. Ecco uno snippet di quanto viene visualizzato nella griglia.
Possiamo anche ricercare le foto per Tag:
Per accedere a Flickr da un’applicazione per Windows Phone, bisogna anzitutto accedere alla libreria Flickr.NET specifica per WP7. Il codice di una ricerca è leggermente diverso per tenere conto della chiamata asincrona alle API di Flickr.
La funzione DoSomething agisce sui controlli dell’interfaccia utente.
Il risultato è il seguente (scusate al solito la bruttezza dell’interfaccia!)
Conoscendo il WOEID associato alla foto è possibile invocare tutti i web service offerti da Yahoo. Ecco ad esempio uno snippet di codice che estrae le condizioni del tempo e la temperatura (l’indirizzo del servizio web è il seguente: http://xml.weather.yahoo.com/forecast). Come vedrete siamo nella giornata più calda dell’anno!
