Microsoft, Community Days, Windows Phone, PhoneGap, HTML 5, JQuery, Javascript, IOS, Android, .NET, Intel, DotNetLombardia, Tile, SQL CE, DotDotNet

Oggi, nella sede di Microsoft a Peschiera Borromeo, hanno inizio i Community Days, l’evento community più grande dell’anno: 2 giorni in cui i partecipanti, in maniera totalmente gratuita e grazie al supporto di Microsoft e delle community, potranno usufruire di sessioni tecniche, laboratori su Windows Phone e su Azure nonchè incontrare tante persone con gli stessi interessi e la stessa passione per la tecnologia e lo sviluppo.

Io sarò presente questo pomeriggio per parlarvi di accesso ai dati in Windows Phone 7.5, focalizzandomi sulle novità introdotte grazie al supporto ai database relazionali.

Per poter seguire al meglio l’evento ed essere sempre aggiornati gli organizzatori hanno reso disponibile un pratico widget che vi terrà sempre aggiornati sulle sessioni in corso e sui tweet riguardanti la conferenza (l’hashtag ufficiale è #cdays12), che ho pubblicato in questo post.

Buona conferenza a tutti!

 

This entry was posted on Thursday, 16 February, 2012 and is filed under Developers Events . You can follow any responses to this entry through here . You can leave a response.

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.

<input type="button" id="btnCall" value="Call service" />
<div id="result"></div>

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("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.

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("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 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.

This entry was posted on Tuesday, 14 February, 2012 and is filed under Windows Phone Devs , Tutorials . You can follow any responses to this entry through here . You can leave a response.

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.).

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 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 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="/img/spacer.gif"> 

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="/img/spacer.gif"> 

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!
		

			
		
		

			This entry was posted on
				Friday, 10 February, 2012
				and is filed under
					
						Windows Phone
					
					
						Tutorials
					
				 . You can follow any responses to this entry through here . You can leave a response. 
		
		

	

Nel post precedente abbiamo iniziato a capire che cos’è PhoneGap e cosa significa al giorno d’oggi sviluppare un’applicazione mobile cross-platform. Ora iniziamo a “sporcarci le mani” e vediamo come iniziare a lavorare con PhoneGap, creando il nostro primo progetto e scrivendo qualche riga di codice.

Installare PhoneGap

Innanzitutto occorre scaricare il pacchetto di PhoneGap dal sito ufficiale all’indirizzo phonegap.com/. Il package contiene le librerie per tutte le principali piattaforme: la versione Windows Phone si presenta come un template per Visual Studio, incluso nel file PhoneGapStarter.zip, da copiare all’interno della cartella C:\Users\[USERNAME]\Documents\Visual Studio 2010\Templates\ProjectTemplates\Silverlight for Windows Phone, dove [USERNAME] è ovviamente il nome del vostro account utente.

Una volta fatta questa operazione, se avviate Visual Studio e scegliete di creare un nuovo progetto, nella sezione Visual C# (sia per le versioni Express che per le versioni a pagamento) troverete un nuovo template chiamato PhoneGapStarter: date un nome al progetto, premete Ok e Visual Studio inizierà la creazione includendo tutti i file necessari a PhoneGap.

La struttura di un progetto PhoneGap

Il progetto PhoneGap, rispetto ad un progetto tradizionale Windows Phone, include una serie di file e cartelle in più, che sono quelle utilizzate da PhoneGap. Quella più importante è la cartella www, che contiene l’applicazione web e propria e, di default, contiene:

• il file index.html, che è la pagina che viene caricata all’avvio
• il file master.css, che è il foglio di stile di default che viene utilizzato
• il file phonegap-1-3-0.js, che è la libreria Javascript che funge da wrapper verso le chiamate native della piattaforma e con la quale andrete ad interagire per sfruttare le funzionalità native del device.

L’applicazione PhoneGap è a tutti gli effetti una vera e propria applicazione web, per cui all’interno  di questa cartella potete inserire tutte le risorse che volete, incluse librerie come jQuery o Knockout.js, molto conosciute nell’ambito dello sviluppo web. In automatico, all’avvio, PhoneGap compilerà un file chiamato GapSourceDictionary.xml includendo i riferimenti a tutte queste risorse, per poi poterle utilizzare.

La struttura della pagina index.html

Il file index.html non è nient’altro che una normalissima pagina HTML5 (lo riconoscete dal doctype), con già inclusi al suo interno gli script e i fogli di stile standard di PhoneGap che vi ho elencato prima.

In più, la pagina include la sottoscrizione, tramite un event listener di Javascript, all’evento deviceready, che viene invocato da PhoneGap nel momento in cui l’applicazione è stata inizializzata ed è pronta a interagire con l’utente. Tale sottoscrizione viene gestita dalla funzione onDeviceReady (definita poco sotto), in cui potete includere il codice che volete eseguire all’avvio dell’applicazione. Di default, questa funzione contiene semplicemente due righe di codice Javascript per:

• Mostrare il classico Hello World indicando anche la versione di PhoneGap in uso sfruttando la funzione window.device.phonegap

• Dato che fare debug di Javascript in una pagina che gira all’interno di un browser mobile non è così agevole come con un browser tradizionale, PhoneGap include una funzione Javascript che permette di scrivere nella Output Window di Visual Studio, che si chiama console.log. Di default, il progetto di PhoneGap include la scrittura di un messaggio di prova nella Output Window.
  

Mostriamo una MessageBox

Iniziamo a mettere mano al progetto con un esempio molto semplice: mostriamo a video una MessageBox nel momento in cui l’utente fa click su un pulsante. La parte di rendering del pulsante e di gestione del click viene affidata ad HTML e Javascript standard; la visualizzazione dell’alert invece verrà fatta utilizzando una funzione proprietaria di PhoneGap.

Vediamo l’HTML.

<body>
    <input>

La pagina è composta da un semplice div, a cui abbiamo dato l’id welcomeMsg per poterlo identificare in Javascript, e un tag input, che rappresenta il nostro bottone, del quale gestiremo l’evento onclick tramite la funzione onClick(), che è così definita:

<script type="text/javascript">
    function onClick() {
        navigator.notification.alert("This is a message box");
    }
</script>

Qui entra in gioco PhoneGap: la funzione navigator.notification.alert provvede a interfacciarsi con le API native di Windows Phone e a mostrare una MessageBox con il testo che viene passato come parametro della funzione. Lanciamo l’applicazione tramite il debugger di Visual Studio, facciamo clic sul pulsante e vedrete comparire la MessageBox nativa di Windows Phone con il testo che avete scelto.

In conclusione

In questo post abbiamo visto un esempio molto semplice: nel prossimo post vedremo qualcosa di più approfondito, che ci permettà di sfruttare più a fondo le potenzialità di Windows Phone. In allegato, trovate il codice sorgente del semplice esempio realizzato in questo post.

 Scarica il codice sorgente
		

			
		
		

			This entry was posted on
				Thursday, 02 February, 2012
				and is filed under
					
						Windows Phone
					
					
						Tutorials
					
						,
					
						Devs
					
				 . You can follow any responses to this entry through here . You can leave a response.