Azure Notification Hub – Guest Post

Onorato di essere ospitato sul blog ufficiale del team MSDN Italia per parlare di Azure Notification Hub. Il mio primo guest post 😀

5826.clip_5F00_image004_5F00_5359E476[1]

Lo trovate qui: Azure Notification Hub, notifiche push in 5 righe di codice

Grazie a Lorenzo, Erica e Francesco

Annunci

JSON for Dummies (parte 4)

Dopo aver visto come connetterci ad un servizio REST con HttpClient (vedi la parte 3) concludiamo l’argomento illustrando come connetterci ad un servizio REST autenticato e come eseguire altre operazioni che non siano solo il semplice GET.

Tutto quello che dobbiamo fare è semplicemente usare il costruttore dell’HttpClient che prende un oggetto HttpClientHandler come parametro e impostare la proprietà Credential di quest’ultimo uguale ad un oggetto NetworkCredential che possiamo passare alla nostra funzione

 NetworkCredential credential = new NetworkCredential(username, password); 

L’ultima cosa da modificare è DefaultRequestHeaders dell’HttpClient, e a questo punto la funzione che permette di fare una chiamata Get autenticata può essere scritta in questo modo:

  
public static async Task<T> GetAsyncAuthenticated<T>Uri uri, NetworkCredential credential) 
{
     using (var http = new HttpClient(new HttpClientHandler { Credentials = credential }))     
     {         
          http.DefaultRequestHeaders.Add"Accept", "application/json");
          http.DefaultRequestHeaders.Add("user-Agent", "authentication.cs");
          var response = await http.GetAsync(uri);
          string json = await response.EnsureSuccessStatusCode().Content.ReadAsStringAsync();
          var output = JsonConvert.DeserializeObject<T>(json);
          return output;
     } 
} 

In modo assolutamente analogo possiamo scrivere una funzione che esegua un POST autenticato (o non autenticato, basta rimuovere le parti relative all’autenticazione), dove ovviamente dobbiamo passare anche un content da passare al POST

 
public static async Task<T> PostAsyncAuthenticated<T>(Uri uri, NetworkCredential credential, HttpContent content)
{ 	
     using (var http = new HttpClient(new HttpClientHandler { Credentials = credential }))
     {                 
          http.DefaultRequestHeaders.Add("Accept", "application/json");
          http.DefaultRequestHeaders.Add"user-Agent", "authentication.cs");
          var response = await http.PostAsync(uri, content);                 
          string json = await response.EnsureSuccessStatusCode().Content.ReadAsStringAsync();                 
          return JsonConvert.DeserializeObject<T>(json); 	
     } 
} 

Come vedete usando HttpClient è tutto molto semplice. Buon lavoro!

ASP.NET Web API for Dummies

Dopo avere visto come utilizzare il formato JSON per scambiare dati tra la nostra applicazione e un servizio remoto, in questa nuova serie for dummies vedremo come creare un servizio remoto che possa servire dati alla nostra, o ad altre applicazioni.

Notiamo subito che basandosi i servizi REST, di questo stiamo parlando, sullo scambio di file di testo tramite semplici chiamate HTTP, la tecnologia che usiamo nella creazione del servizio remoto non è in nessun modo vincolata alla tecnologia usata nella creazione dell’app.

Utilizzeremo un progetto Web Api di ASP.NET MVC che potrà essere ospitato su un qualsiasi servizio web con IIS. Noi utilizzeremo Azure, il servizio cloud di Microsoft, che permette di creare gratuitamente fino a 10 siti web.

Da Visual Studio creiamo dunque un nuovo progetto web di tipo applicazione Web ASP.NET (Se avete VS 2013 questo è l’unico tipo di progetto web che potete creare, se invece avete Visual Studio 2012 dovrete scegliere un’applicazione MVC4).

Cattura di schermata (3)

Come modello scegliamo Web Api tra quelli disponibili.
Modifichiamo l’autenticazione impostando nessuna autenticazione.
Se avete un acount Azure possiamo gestire direttamente anche la connessione con il servizio cloud impostando la sottoscrizione su cui volete pubblicare il vostro sito web, ma questo lo vedremo in un’altra occasione. Per il momento deselezionate Host nel cloud

Cattura di schermata (2)

A questo punto il vostro servizio web è pronto. Se avviate il progetto con F5 il sito web verrà lanciato nel server IIS locale, pronto a rispondere alle chiamate remote. Il template MVC costruisce per voi tutto il sito web, compresa pagina di documentazione delle API.

image

Cliccando sulla barra in alto su API arriverete a questa pagina, in cui avete la documentazione della Web API creata di default dal template, che in seguito andremo a modificare. Come si vede, il template predispone due metodi GET, un metodo POST, uno PUT e un DELETE.

image

Per invocare il servizio potete scrivere l’indirizzo del server completato con l’indirizzo dell’API. Nel mio caso l’indirizzo della prima funzione GET è http://localhost:49039/api/Values che vi restituirà, indovinate? Un file JSON.

Il file restituito Values.json ha il seguente contenuto

[“value1″,”value2”]

Il codice che definisce le funzioni restituite dai metodi HTTP è racchiuso in una classe che eredita dalla classe ApiController. Nello specifico la classe è ValuesController, nel file ValuesController.cs nella cartella Controllers del progetto, e la funzione è

public IEnumerable<string> Get()
        {
            return new string[] { “value1”, “value2” };
        }

Come vedete la funzione restituisce un oggetto di tipo array di stringhe, che viene serializzato automaticamente in JSON e scritto nel file di uscita.

A questo punto vogliamo aggiungere un nuovo controller che chiameremo TestController. Clicchiamo con il tasto destro sulla cartella controller e scegliamo la voce
Aggiungi –> Controller

Scegliete Controller Web API con azioni di lettura/scrittura e date un nome al vostro controller. Il prefisso davanti alla parola Controller sarà il nome della vostra Web API (nel nostro caso Test. Aggiungiamo anche nella cartella Models  le classi che abbiamo già utilizzato nell’esempio di JSON for Dummies

public class MyStruct
    {
        public string Title { get; set; }
        public string Name { get; set; }
        public List<MyItem> List { get; set; }
    }

    public class MyItem
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
    }

A questo punto possiamo creare un nuovo oggetto di tipo MyStruct nel costruttore del Controller

public TestController()
        {
            Struct = new MyStruct()
            {
                Title = “test”,
                Name = “name”,
                List = new List<MyItem>()
                {
                    new MyItem(){Id = 0, Name=”name0″, Description= “description0”},
                    new MyItem(){Id = 1, Name=”name1″, Description= “description1”},
                    new MyItem(){Id = 2, Name=”name2″, Description= “description2”},
                }
            };
        }

e modificare il metodo Get() in modo che restituisca proprio il nostro oggetto Struct

public MyStruct Get()
        {
            return Struct;
        }

Lanciando il servizio web nella pagina di documentazione delle API è apparsa la nuova API Test con i suoi metodi

image

Cliccando sulla funzione GET api/Test da noi modificata vedrete la documentazione degli oggetti restituiti ed anche un esempio del file JSON ed XML generati dal servizio.

image

A questo punto possiamo commentare o cancellare le funzioni che non abbiamo implementato ed anche cancellare il controller di default ValuesController.cs.

L’ultimo tocco riguarda come migliorare la documentazione. Nella pagina che espone tutti i metodi delle Web API nel campo Descrizione è sempre riportato No Description Available. Per personalizzare la descrizione dobbiamo eseguire le seguenti operazioni:

1. Togliere il commento dalla riga

config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath(“~/App_Data/XmlDocument.xml”)));

nel file Areas\HelpPage\App_Start\HelpPageConfig.cs 

2. Aggiungere il percorso del file XML App_Data/XmlDocument.xml  indicato in questa riga nelle proprietà del progetto web al tab Compila nell’opzione File di Documentazione XML.

image

3. Aggiungere commenti dentro il codice, sia nel controller che nelle classi, ad es.

        /// <summary>
        /// Descrizione funzione
        /// </summary>
        /// <returns>
        ///  output description
        /// </returns>
        public MyStruct Get()
       {
              …
       }

Basta scrivere /// e Visual Studio creerà la struttura per noi. Compilando e avviando il progetto anche la pagina di documentazione sarà completa.

In questo modo possiamo spostare parte della logica della nostra app in un servizio remoto e possiamo quindi aggiornare i contenuti della nostra app senza dover pubblicare una nuova versione.

E anche per oggi abbiamo terminato.

JSON for Dummies (parte 2)

Abbiamo visto cosa è il formato JSON e come trasformare un oggetto di una classe custom in e da un oggetto JSON.

A questo punto vediamo un caso di utilizzo reale. Tipicamente vogliamo popolare la nostra app con dati che provengono da un servizio remoto. Prendiamo ad esempio questo sito http://www.geonames.org/export/JSON-webservices.html (ho semplicemente cercato con Bing “json sample web service”) che espone alcuni servizi REST restituendo i dati in formato JSON oppure XML.

Se con un browser apriamo l’indirizzo http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo  otteniamo in download il file citiesJSON.json. L’idea è quella di scaricare questo file alla nostra app e deserializzare questo file per popolare un oggetto nella nostra app.

Per poter fare questo però abbiamo bisogno di definire una classe che corrisponda alla struttura dati contenuta nel file json. Potremmo analizzare il file citiesJSON.json ed estrapolare la struttura della classe da costruire. Le proprietà vengono serializzate come coppie nome:valore, dove il nome è sempre una stringa e il valore può essere un numero, una stringa o un null. Una coppia di parentesi graffe {} corrisponde ad un oggetto, una coppia di quadre [] corrisponde ad un array i cui elementi (oggetti delimitati da {}) sono separati da virgole.

Oppure possiamo utilizzare una funzione di Visual Studio molto comoda. Aprite il file JSON e copiatene il contenuto in memoria. Create una nuova classe e cancellate tutto il contenuto. Andate su Modifica –> Incolla Speciale –> Incolla JSON come classi.

Magicamente Visual Studio crea la classe (tutte le classi, in realtà) necessaria a decodificare il file json. Le proprietà della classe devono avere lo stesso nome con cui sono definite dentro il file JSON. Non è necessario che la classe per deserializzare abbia tutte le proprietà definite nel file JSON (i campi mancanti semplicemente non vengono deserializzati).

A questo punto possiamo scaricare il file. Utilizzerò HttpClient (lo trovate su Nuget). Ricordate che le chiamate a servizi remoti vanno fatte asincrone (utilizzando await) e quindi invocate all’interno di funzioni async.

HttpClient client = new HttpClient();

string outstring = await client.GetStringAsync(“http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo”);

Rootobject deserializedObject = JsonConvert.DeserializeObject<Rootobject>(outstring);

Tutto qui. I dati che arrivano dal servizio remoto (qualunque cosa ci sia dentro), senza saper quasi nulla del servizio e dei dati, sono nella nostra app, pronti ad essere messi in binding.

Ma possiamo fare ancora qualcosa di meglio. Non siete costretti ad utilizzare i nomi delle proprietà o delle classi annidate così come sono nel file json (tutti minuscoli, per esempio). Nella definizione delle proprietà possiamo mettere tra parentesi quadre il nome della proprietà JSON che vogliamo deserializzare in modo da dare alla proprietà della nostra classe il valore che vogliamo.

[JsonProperty(“geonames”)]
public Geoname[] NomeCheVogliamo { get; set; }

Ricordiamoci di inserire using Newtonsoft.Json; nella nostra classe altrimenti non potremo usare JsonProperty.

TIP: Un tool per generare classi C# da JSON (ma anche VB.NET o Typescript) più potente di quello integrato in Visual Studio potete trovarlo qui https://jsonclassgenerator.codeplex.com/

JSON for Dummies (parte 1)

Abbiamo visto nella serie sul Binding come popolare l’interfaccia della vostra applicazione con dati salvati in una struttura dati. Le app moderne utilizzano dati che provengono da fonti esterne e tipicamente vengono utilizzati formati di scambio ottenuti da serializzazione dei dati. I formati più utilizzati sono l’XML e il JSON.

L’operazione di serializzazione/deserializzazione può essere gestita tramite il componente NuGet JSON.NET, utilizzando JsonConvert.DeserializeObject<T>(string json) e JsonConvert.SerializeObject(object o) o in alternativa utilizzare la classe nativa di .NET System.Runtime.Serialization.Json.DataContractJsonSerializer con i metodi ReadObject e WriteObject.

Per il nostro esempio utilizzeremo il componente di JSON.NET

Creiamo prima di tutto la nostra struttura dati:

public class MyStruct
{
public string Title { get; set; }
public string Name { get; set; }
public List<MyItem> List { get; set; }
}

    public class MyItem
{
public string Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
}

In fase di inizializzazione dell’app creiamo una istanza della mia classe e la popoliamo con valori di test

Struct = new MyStruct()
{
Title = “test”,
Name = “name”,
List = new List<MyItem>()
{
new MyItem(){Id = 0, Name=”name0″, Description= “description0″},
new MyItem(){Id = 1, Name=”name1”, Description= “description1″},
new MyItem(){Id = 2, Name=”name2”, Description= “description2”},
}
};

A questo punto otteniamo il nostro oggetto serializzato con JSON.NET semplicemente con

string serializedData = JsonConvert.SerializeObject(Struct);

Il valore della stringa serializedData, che contiene tutti i dati dell’oggetto Struct, è la seguente:

{“Title”:”test”,”Name”:”name”,”List”:[{“Id”:0,”Name”:”name0″,”Description”:”description0″},{“Id”:1,”Name”:”name1″,”Description”:”description1″},{“Id”:2,”Name”:”name2″,”Description”:”description2″}]}

Per ricreare l’oggetto dai dati serializzati bisogna semplicemente utilizzare il metodo Deserialize():

var deserializedData = JsonConvert.DeserializeObject<MyStruct>(serializedData);

che vi restituisce un oggetto di tipo MyStruct.

In questo modo avete un metodo semplice per trasformare semplicemente i vostri dati in e da una stringa di testo (che può essere salvata in locale o in remoto). Nel prossimo post vedremo come utilizzare dati JSON presi da un servizio remoto e come creare la struttura dati per la deserializzazione.

Binding for Dummies (ep. 3)

Nei primi due episodi di Binding for Dummies (ep. 1 ed ep. 2) abbiamo visto cosa è il binding, come implementarlo e come far si che le modifiche al nostro modello ad oggetti vengano riportate in modo automatico all’interfaccia grafica tramite l’implementazione dell’interfaccia INotifyPropertyChanged.

Passiamo ora a vedere come implementare il binding quando si tratta di collezioni di oggetti. Se fino ad ora questo approccio non vi ha convinto (perché in effetti aumenta il livello di complicazione generale) da adesso non potrete più farne a meno.

Ipotizziamo di avere una lista di oggetti da visualizzare nella UI. Senza il binding avreste dovuto aggiungere n ListBoxItem e valorizzarli da XAML uno per uno. Ma in questo modo dovreste conoscere in anticipo il numero di elementi della lista. Inoltre dovreste replicare il layout di ogni singolo elemento (immaginate ad un elemento complesso che abbia una immagine, un titolo e una descrizione) e scrivere due volte lo stesso codice è sempre un errore. Oppure avreste potuto dare un nome ad ogni elemento della lista (ogni immagine, ogni titolo, ecc.) e valorizzarli dal code behind all’interno di un ciclo for each della vostra lista. Oppure da codice avreste potuto, per ogni elemento della vostra lista, creare un ListBoxItem con tutte le sue proprietà (immagine, testo, ecc.) ed aggiungerlo alla ListBox. Non vedremo nessuna di queste cose perché portano via davvero molto tempo, ma potreste esercitarvi con tutte queste ipotesi perché si impara sempre qualcosa.

Invece vediamo direttamente come il binding si preoccupi di tutto. Tutto quello che dovete fare è creare la vostra lista, indicarla come ItemSource della ListBox ed infine definire il template del singolo elemento. Vediamo come, partendo da un semplice caso.

Creiamo una lista di stringhe nel nostro modello ad oggetti
public List<string> lista {get; set;}
Nel costruttore della classe stanziamo la lista e riempiamola di tre elementi
public Data ()
{
this.lista = new List<string> { “elemento 1”, “elemento 2”, “elemento 3” };
}
Il DataSource del contenitore padre (in questo caso ContentPanel) deve essere già bindato al nostro modello ad oggetti
ContentPanel.DataContext = data;
A questo punto nello XAML della ListBox valorizziamo la proprietà ItemsSource, che indica la sorgente degli elementi della ListBox
<ListBox ItemsSource=”{Binding lista}”>
La ListBox creerà automaticamente un ListBoxItem per ogni elemento della nostra lista ed ognuno di questi elementi avrà il layout indicato dalla proprietà DataTemplate dell’ItemTemplate in questo modo
<ListBox ItemsSource=”{Binding lista}”>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text=”{Binding}”/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In questo caso il Template è molto semplice e nel binding non viene indicato nessun campo perché è tutto l’oggetto stringa ad essere bindato al Text della TextBlock.

E se avessimo una lista di oggetti custom? Creiamo una classe CustomObject
class CustomObject
{
public string Name { get; set; }
public string Description { get; set; }
public string Colore { get; set; }
public int Numero { get; set; }
}
e riempiamola nel costruttore
this.listaOggetti = new List<CustomObject>
{
new CustomObject{Name = “Nome 1”, Colore= “red”, Description = “kjsahdfasbhdfòlahòs”, Numero = 1},
new CustomObject{Name = “Nome 2”, Colore= “blue”, Description = “kjsahdfasbhdfòlahòs”, Numero = 2},
new CustomObject{Name = “Nome 3”, Colore= “green”, Description = “kjsahdfasbhdfòlahòs”, Numero = 3},
new CustomObject{Name = “Nome 4”, Colore= “orange”, Description = “kjsahdfasbhdfòlahòs”, Numero = 4},
new CustomObject{Name = “Nome 5”, Colore= “yellow”, Description = “kjsahdfasbhdfòlahòs”, Numero = 5}
            };
Possiamo a questo punto decidere cosa bindare alla TextBlock dell’ItemTemplate, per esempio Name
<ListBox ItemsSource=”{Binding listaOggetti}”>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text=”{Binding Name}”/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Oppure possiamo creare un template più complesso
<ListBox ItemsSource=”{Binding listaOggetti}”>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation=”Horizontal”>
<Rectangle Height=”50″ Width=”100″ Fill=”{Binding Colore}” />
<StackPanel>
<TextBlock Text=”{Binding Name}” FontSize=”24″/>
<TextBlock Text=”{Binding Description}” FontSize=”18″/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
dove abbiamo bindato non solo le proprietà del testo, ma anche il colore. Potete mettere i binding tutte le proprietà dei vostri oggetti grafici, ed adattarli al vostro contenuto. E potete selezionare quali proprietà dei vostri oggetti custom mettere in binding.

Ma soprattutto potete cambiare l’interfaccia in modo semplice oppure definire due interfacce diverse da mostrare in alternativa (una vista con molti dettagli e una vista con solo i thumbnails per esempio).

Come al solito, trovate il codice di questo episodio qui http://1drv.ms/1hk5jE9.

Nel prossimo episodio vedremo che esiste una lista particolare (ObservableCollection) che implementa l’interfaccia INotifyPropertyChanged e che permette di riflettere i cambiamenti del vostro modello ad oggetti anche operando sulle liste.

Binding for Dummies (ep.2)

Nel primo episodio di Binding for Dummies abbiamo visto come implementare il data binding in un caso semplice, caso che però non rende chiari i vantaggi di questo approccio ma fa sembrare solo di introdurre inutili complicazioni.

In questa seconda parte vedremo invece come i vantaggi del data binding diventino evidenti nel momento in cui permettono di aggiornare l’interfaccia grafica al variare del nostro modello ad oggetti senza dover scrivere alcun codice aggiuntivo per gestire queste variazioni.

Per prima cosa capiamo bene di cosa stiamo parlando.
Inseriamo un bottone nella nostra pagina xaml, così
<Button  Content=”Premi qui”/>

Associamo ora una funzione all’evento click del bottone. Il codice xaml finale sarà:
<Button Content=”Premi qui” Click=”Button_Click” />
Potete ottenere questo semplicemente digitando all’interno del tag Button il comando Click= e lasciare all’intellisense creare la funzione per voi,
image
oppure selezionare il bottone e fare doppio click nella casella di testo associata all’evento click nella finestra proprietà (dove ora c’è scritto Button_Click); anche questa seconda modalità creerà per voi la funzione agganciata all’evento click del bottone
image

Troverete nel file di code-behind la funzione Button_Click appena creata, all’interno della quale andremo a scrivere la logica che vogliamo sia eseguita al click del pulsante.

Prima di scrivere il codice della funzione dobbiamo però spostare la creazione dell’oggetto data al di fuori del costruttore della mainpage, altrimenti l’oggetto non sarà visibile al di fuori di quella funzione. Spostiamo dunque
//Creazione dell’oggetto data
Data data = new Data();
prima della definizione del costruttore. A questo punto possiamo scrivere dentro Button_Click il codice che modificherà il valore della proprietà etichetta
private void Button_Click(object sender, RoutedEventArgs e)
{
data.Etichetta = “Hai premuto il pulsante”;
}
Se provate ad implementare questo codice, osserverete che alla pressione del pulsante, quello che succede è … NIENTE
La vostra variabile ha cambiato valore, ma questo cambiamento non si riflette nell’interfaccia. Per ottenere questo dobbiamo modificare la nostra classe Data.

Per prima cosa dobbiamo implementare l’interfaccia INotifyPropertyChanged. Aggiungete alle direttive using della classe
using System.ComponentModel;
modificate la definizione della classe in questo modo
class Data : INotifyPropertyChanged
aggiungete un evento ed una funzione che lo invochi al cambiare del valore delle proprietà
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
L’ultima cosa che dobbiamo fare è andare a modificare l’implementazione della proprietà Etichetta implementando la chiamata alla funzione NotifyPropertyChanged
private string etichetta;
public string Etichetta
{
get
{
return etichetta;
}
set
{
if (value != etichetta)
{
etichetta = value;
NotifyPropertyChanged(“Etichetta”);
}
}
}
Quello che succede ora è che la proprietà pubblica Etichetta non è più implementata automaticamente, ma va esplicitamente a leggere/scrivere il valore del campo privato etichetta. Nel caso in cui il nuovo valore sia diverso dal precedente allora invoca l’evento NotifyPropertyChanged passandogli il parametro “Etichetta” che volendo potete intercettare per capire quale campo è cambiato.
Il fatto che il meccanismo del data binding capisca l’interfaccia INotifyPropertyChanged vi permette di cambiare la UI auomaticamente al cambio dei valori del vostro modello. Premendo il pulsante avete la vostra etichetta cambia la proprietà Text.
Quindi il binding non solo assegna dei valori presi dal modello ai vostri controlli nella UI, ma li lega al modello ed aggiorna la UI ogni volta che il modello cambia. Una volta stabilito questo legame, potete quindi dimenticarvi della UI e pensare solo alla logica del vostro codice.

NOTA: il parametro passato alla funzione NotifyPropertyChanged deve essere il nome della proprietà pubblica, altrimenti il  trucco non funziona.

Trovate il codice completo di questo episodio qui http://1drv.ms/1i4gQ6d

Nel prossimo episodio parleremo di collection di oggetti e scopriremo gli ulteriori vantaggi del binding.