website statistics
Welcome to MSDN Blogs Sign in | Join | Help

Giuseppe Guerrasio

Building the next web platform

Yoox dal retail alla piattaforma multibrand per e-commerce

image Una delle attività più interessanti che mi è capitato di seguire negli ultimi mesi è collegata alla revisione architetturale che Yoox Group ha avviato sui suoi servizi e siti Internet.

YOOX Group è il partner globale di Internet retail per i principali brand di moda & design: l’unica azienda di retail su Internet sia multimarca – con la boutique virtuale YOOX.COM, sia monomarca – con i flagship store online sviluppati da YOOX Services.

Nato nel 2000 ha avviato un nuovo modello di business con la boutique virtuale N° 1 al mondo YOOX.COM, che ha contribuito pionieristicamente a creare lo shopping di moda online nel nostro Paese.

L’infrastruttura globale sincronizzata su tre continenti, insieme all’esperienza accumulata in questi anni, hanno portato all’apertura nel 2006 di YOOX Services, società di YOOX Group che progetta e gestisce gli online store per conto dei principali brand di moda & design. YOOX Services realizza i flagship store dei principali brand della moda & design che intendono offrire online la stessa collezione disponibile attualmente nei negozi.

Attualmente i flagship store online monomarca “powered by YOOX” sono: www.marni.com, www.emporioarmani.com, www.diesel.com, www.cpcompany.com, www.stoneisland.com e presto saranno annunciati molti altri virtual store dei principali brand del lusso.

A questi si è aggiunto il nuovissimo THECORNER.COM “powered by YOOX”, un department store online completamente dedicato alle nuove collezioni di designer internazionali ”cutting edge” e a brand italiani di ricerca ognuno con un “corner” dedicato.

Una case history di successo se guardiamo i numeri di YOOX.COM: un sito localizzato in 7 lingue con più di quattro milioni di visitatori al mese e più di un milione di capi consegnati in tutto il mondo nel 2007 in 53 paesi.

Dal punto di vista tecnico la necessità di dover passare da un singolo Internet retailer ad una nuova serie di siti monobrand ha comportato la necessità di una profonda revisione dell’architettura su cui yoox services implementa le soluzioni Internet. I piani di Yoox Group, infatti, prevedono lo sviluppo di un numero significativo di siti monbrand o specialistici e pertanto la nuova piattaforma tecnologica per Yoox Service dovrà prevedere la possibilità di implementare e gestire con sempre maggiore velocità nuove tipologie di siti.

Dal punto di vista architetturale Yoox Services si è trovata di fronte all’esigenza di muovere la propria soluzione per yoox.com da un sito di e-commerce ad una vera e propria piattaforma che possa permettere la costruzione e la gestione di “n” siti, mettendo a fattor comune un insieme di servizi di base con lo scopo di semplificare lo sviluppo , manutenzione e sfruttamento dell’hardware, ma permettendo al tempo stesso il necessario isolamento tra i siti, la flessibilità per gli elementi di interfaccia utente e la costruzione dei contenuti di ciascuno store virtuale, garantendo allo stesso tempo la necessaria scalabilità rispetto al volume di richieste già oggi elevato sul solo Yoox.com.

Per rispondere a queste esigenze Yoox Group ha quindi avviato uno studio per l’implementazione di una nuova piattaforma che viene da identificata con il termine OSS (ONLINE STORE SERVICES) per rispondere alle nuove esigenze del gruppo e garantire gli stessi livelli di qualità , scalabilità e costi offerti dalla soluzione che ha contribuito in modo determinate al successo di Yoox.com.

La nuova architettura è divisa in due componenti fondamentali: una componenti di front-end che si preoccupa di gestire acquisizione di ordini e gestione del sito (catalogo, profili, carrello, pagamenti, etc) ed una componente di back-end che riceve gli ordini attraverso un un meccanismo di code asincrone dove attraverso Microsoft BizTalk e Microsoft Navision vengono gestite le interazioni con i partner , le operazioni logistiche di spedizione e la fatturazione.

La componente di front-end prevede una parte di user interface (UI) , una serie di Web Service per erogazione di servizi a siti terzi (ad esempio il catalogo) ed alle componenti lato client della UI (JS AJAX, FLASH, SILVERLIGHT, WPF\.NET) , una parte di servizi con la logica delle operazioni del sito e uno storage per i dati.

clip_image004

I principi architetturali che guidano il rifacimento della componente di front-end che si è deciso di seguire per l’evoluzione dal mono sito a multi sito possono essere rappresentati come indicato nella seguente figura:

clip_image006

L’idea guida di base è quella di passare da un’architettura single-tenant dove ciascuna istanza dei siti è implementata con una singola soluzione adhoc\custom ,ad una piattaforma che ricalchi la struttura di base dei servizi offerti attualmente in yoox.com, fornendoli con una architettura multi-tenant scalabile e configurabile. I principi architetturali impostati partono dalle idee impostate per le architetture SaaS e quindi gran parte delle impostazioni sulle architetture multi-tenant indicate ottimo documento di Carraro e Chong sull’argomento, ma vengono riadattati alle forti esigenze di flessibilità sugli aspetti di personalizzazione del front-end ed di gestione dei contenuti dello stesso necessari ad una applicazione di questo tipo.

Dal punto di vista tecnologico nell’implementazione della nuova architettura in corso di sviluppo Yoox ha scelto di utilizzare nelle componenti fondamentali la piattaforma Microsoft: Windows Server 2008 con IIS7 come piattaforma Web Server, SQL Server 2008 come storage e .NET 3.5 come framework di sviluppo con Visual Studio Team System e Team Foundation Server per l’implementazione della software factory, Navision e Microsoft BizTalk Server nelle componenti di back-end.

Ulteriore vincolo per la nuova architettura consiste nella necessità di migrare per step successivi anche il sito principale yoox.com e di garantire,quindi, una completa continuità di funzionamento. Proprio per questo motivo la migrazione dalla precedente architettura single-tenant basata su ASP/COM sta procedendo per step che prevedono come prima parte la costruzione dei nuovi servizi e l’aggancio di questi alla attuale interfaccia. Terminata la costruzione dei nuovi servizi, verrà anche migrata la tecnologia utilizzata per la parte di interfaccia utente.

Data la particolarità della natura dei siti, infatti , la profonda necessità di personalizzazione delle componenti di UI è una delle caratteristiche che a spinto Yoox alla decisione di mantenere quest’ultimo aspetto sviluppato ad hoc per ogni tenant. In particolare , oltre alla classica interfaccia HTML sono previste anche interfacce di tipo differente tra cui piccoli smart client residenti sul desktop che offriranno agli utenti la possibilità di un interazione più semplice con il catalogo del sito. Anche le componenti di UI di gestione del sito sono costruite con interfacce smart client.

L’architettura principale del nuovo front-end multi sito di YOOX può quindi essere rappresentata come di seguito:

clip_image008

Le interfacce utente di ciascun tenant\sito accedono ai sevizi forniti dal OSS fornendo sempre un parametro che identifica il tenant stesso e ottenendo in questo modo l’accesso alla logica ed ai dati necessari al funzionamento della specifica istanza. Con questo tipo di approccio, ciascun elemento applicativo può scalare con un approccio orizzontale che comporta la semplice aggiunta di macchine fisiche o virtuali all’architettura su tutti gli strati applicativi , compresa la parte di dati. Anche a questo livello, infatti, viene utilizzato un partizionamento dei dati rispetto alle istanze che identificano i tenant . Questo approccio consente di suddividere i dati in differenti database che possono anche essere ospitati su macchine fisiche o virtuali diverse in funzione delle esigenze di scalabilita. Lo strato di accesso ai dati dei servizi conterrà la logica necessaria ad individuare la partizione corretta in base all’identificativo del tenant\ sito fornito dal chiamante :

clip_image010

Per un chiarimento sul tema del partizionamento dei dati vi rimando ai post fatti in passato sull argomento la scalabilità ed il partizionamento in entità parte 1 e parte 2 . Il disaccoppiamento tra front-end e back-end attraverso l’utilizzo di una coda fa si che il carico prodotto nell’inserimento di ordini o dalla navigazione degli utenti, non si rifletta direttamente sulle componenti che gestiscono le fasi di fatturazione e gestione logistica e di spedizione.

I servizi sono sviluppati con tre differenti interfacce per permettere sia l’interazione con le pagine ASP (COM), sia l’interazione con componenti .NET in process , sia una interfaccia REST con XML o JSON . In questo modo ciascun servizio può o essere direttamente posizionato sulle macchine di front-end per essere consumato da UI HTML o per poter essere eventualmente esposto verso altre applicazioni ad estensione delle potenzialità della piattaforma stessa.

clip_image012

La maggior parte dei servizi utilizza WCF (Windows Communication Foundation) per esporre una parte delle interfacce di accesso e nello strato di accesso ai dati sfruttano le nuove funzionalità offerte da LINQ.

La struttura complessiva del sito può essere quindi rappresentata come di seguito:

 clip_image014

by Giuseppe Guerrasio | 0 Comments

Evento The Next Web Now: Online i video delle sessioni per developer

clip_image003Sono online le  sessioni dell'evento The Web Next Now tra cui la mia sessione "Costruire Rich Internet Applications con Microsoft Silverlight 2" . Per le slide trovate i link nel seguente post.

by Giuseppe Guerrasio | 1 Comments

Silverlight e le nuove applicazioni RIA: Servizi per l'Healthcare

clip_image001[3]Nelle scorse settimane  ho fatto un post relativo ad una applicazione di esempio per il mondo finaziario sviluppata in Silverlight 2 che evidenzia come la possibilità di sfruttare le potenzialità delle nuove tecnologie per lo sviluppo di interfacce RIA (Rich Interactive Application) possa essere utilizzata a vantaggio di qualunque tipologia di applicazione. Da ieri è disponibile online una nuova serie di esempi per la sanità Microsoft Health Common User Interface (MSCUI) Patient Journey Demonstrator che dimostrano come anche in questo settore le potenzialità delle nuove tecnologie  possono essere utilizzate per costruire una nuova generazione di applicazioni, evidenziando le qualità di Silverlight come piattaforma di sviluppo.

Si tratta di una implementazione di esempio per un progetto piu ampio per il settore dell'Healtcare: Il Microsoft Health Common User Interface (CUI) . L'iniziativa, sviluppata in UK,  ha lo scopo di contribuire alla costruzione di una User Interface Design Guidance  per le applicazioni in questo settore, completa di un Toolkit di controlli che indirizza una ampia gamma di scenari , abilitando la costruzione di una nuova generazione di applicazioni, più semplici da usare e più efficaci rispetto alla loro funzione nel campo sanità .

Disponibili oltre allo scenario anche il documento di  Design Guidance  e il Toolkit con i controlli ed esempi realtivi all'iniziativa  che possono essere scaricati e installati per utilizzarli con Microsoft Visual Studio. Disponibile anche  la Roadmap del programma.

 

Nel Health Common User Interface (MSCUI) Patient Journey Demonstrator  vengono al momento implementate tre applicazioni che descrivono una tipica giornata di un paziente dal punto di vista della struttura ospedaliera che lo cura. Si va dalle interfacce finanziare fino alle informazioni sanitarie ed agli esami clinici.  Molte le funzionalità  di  Silverlight 2 Beta 1 utilizzate tra cui:

· Deep zoom per la visualizzazione dei dati degli complex ECG (elettrocardiogrammi)

· Scaling layout

· Data-binding

· Animazioni e integrazione di contenuti multimediali

· Ampio utilizzo di grafica vettoriale per la rappresentazione di diagrammi

Trovate anche una introduzione allo scenario completa di video , descrizione delle applicazioni e scenari evolutivi futuri per le applicazioni di questo settore.

Alcuni link per chi volesse cominciare a provare Silverlight 2 :

- http://silverlight.net/GetStarted/ dove trovate i link per installare il Runtime , le estensioni per Visual Studio 2008 e la versione di Expression Blend per SL2

- http://silverlight.net/learn/tutorials.aspx    tutorial sul Silverlight 2

- http://silverlight.net/learn/labs.aspx .    laboratori sulle nuove funzionalità di Silverlight 2

- Slide dell'evento The Next Web Now

- Sessioni di MIX 08

Per chi fosse interessato alle funzionalità di accesso remoto a dati esposti da siti via http e web service, aspetto fondamentale per lo sviluppo di soluzioni applicative con SL suggerisco un mio post sull'argomento.

Ottimo tutorial introduttivo sul blog di Scott Guthrie.

 

 

by Giuseppe Guerrasio | 1 Comments

Esempio di applicazione RIA con Silverlight : Sanremoanchenoi da Rai Click e Kora

L’evoluzione delle interfacce utente e l’emergere di applicazioni RIA (Rich Interactive Application) basate in gran parte sull’utilizzo di rich-plugin come Silverlight che arricchiscono il browser e potenziano le possibilità offerte dall’HTML e dalle tecniche AJAX sta rapidamente modificando la modalità con cui vengono sviluppate le applicazioni. Un ottimo esempio di come sia possibile combinare queste nuove potenzialità per sviluppare interfacce innovative è rappresentato dal sito sanremoanchenoi ( l'iniziativa è conlusa e qui potete vedere il video del sito) . Si tratta di un iniziativa di Rai Click, implementata da Kora , avviata durante il festival di Sanremo e collegata proprio alla sperimentazione di nuove forme di user interface e di gestione di contenuti UGC (User Genereted Content) .

L’iniziativa è basata su una serie di contest dove gli utenti possono inviare dei video per dimostrare le loro capacità “artistiche” collegate alla musica. Gli utilizzatori del sito possono navigare sui video, votarli ed inserire dei commenti. Di seguito un’immagine dell’interfaccia realizzata:

clip_image002

Il sito rappresenta anche un ottimo esempio di utilizzo di software sviluppato localmente in combinazione con l’utilizzo di servizi offerti da piattaforme su Internet . Infatti, l’infrastruttura di gestione ed erogazione dei contenuti video è completamente basata su Silverlight Streaming che, attraverso la sua CDN (Content Delivery Network), fornisce il servizio di streaming per i filmati che vengono visualizzati nel client.

L’interfaccia dell’intera applicazione è sviluppata con tecniche AJAX e sfrutta una logica sviluppata in Java Script per pilotare sia le componenti di grafica ed animazione sviluppate con Silverlight 1.0 , sia le componenti HTML. L’interazione con i servizi di back end che gestiscono il voting , i commenti ed il catalogo dei video è stata implementata in puro stile AJAX e l’iterfaccia client accede ai servizi attraverso XMLHttpRequest senza alcun reload dell’interfaccia client.

L’applicazione ha poi una componente di back-end redazionale che gestisce l’approvazione dei contenuti e che in particolare gestisce l’encoding e l’upload dei video su Silverlight Streaming. L’encoding dei video viene realizzato con Expression Encoder. L’architettura di massima dell applicazione e la seguente:

clip_image004

La gestione della fruizione dei video dal client Silverlight avviene attraverso l’utilizzo combinato dei servizi locali al sito ed di Silverlight streaming . I video vengono pubblicati sul servizio , il catalogo locale del sito mantiene i riferimenti ai video . L’interfaccia caricata nel browser client interroga via http(utilizzando XMLHttpRequest via javascript) il servizio di catalogo che fornisce l’elenco dei video. L’elenco dei video viene caricato via Javascript nell’interfaccia Silverlight e mostrato all’utente.

clip_image006

Nel momento in cui l’utente seleziona un video per effettuare lo streaming , l’applicazione client interroga attraverso degli script forniti da Silverlight Streaming che vengono inclusi nel client il servizio per ottenere l’url del video che viene poi visualizzato dal MediaElement di Silverlight, opportunamente utilizzato nell’interfaccia che provvede a consumare lo streaming fornito dalla CDN .

Per chi volesse approfondire l’utilizzo di Silverlight Streaming service e la costruzione di siti UGC consiglio di utilizzare l’applicazione di esempio video.show che offre un esempio completo di codice sorgente scaricabile per realizzare siti UGC per il video sharing, con la possibilità di utilizzare Silverlight Streaming come meccanismo per la distribuzione dei video e l’SDK del servizio Silverlight Streaming.

Grazie alla flessibilità di Silverlight ed alla flessibilità dello XAML che consente di sviluppare una efficace collaborazione tra developer che sviluppa la logica dell’interfaccia e designer che implementa le componenti di grafica ed animazione, l’applicazione è stata sviluppata in tempi estremamente rapidi (2 settimane) . Anche per l’integrazione e la messa in produzione, la possibilità di sfruttare Silverlight Streaming come piattaforma di delivery dei video ha consentito di gestire l’intero progetto in tempi estremamente ridotti.

La ricchezza di animazioni e contenuti multimediali dell’interfaccia utente mette in evidenza la notevole flessibilità che viene fornita da Silverlight. L’intera interfaccia contenuta nel browser è infatti realizzata con il plugin, combinando anche parte di contenuti in HTML che vengono utilizzati in overlay al contenuto implementato con Silverlight. Come si può vedere dalla seguente figura:

clip_image008

abbiamo una serie di oggetti grafici in overlay su un video di background, dove vengono composti i diversi menù, che interagiscono con l’utente attraverso delle animazioni che compongono le diverse scene previste in base alle selezioni effettuate dall’utente.

Anche le liste dei contenuti video vengono posizionate in overlay al video di background e consentono di avere in preview il video selezionato in completo overlay sul video di background , componendo in un'unica interfaccia animazioni, grafica, testo e differenti flussi video:

clip_image010

Le componenti dell’interfaccia che consento il voting e l’inserimento di commenti e contenuti sono sviluppate con dell’HTML che viene anche in questo caso posizionato in overlay ai contenuti realizzati in Silverlight ed anche in questo caso gestito con una logica in Java script che sfrutta le classiche tecniche AJAX per colloquiare con i servizi di back end che abbiamo descritto nell’architettura vista in precedenza.

clip_image012

Il sito resterà in produzione solo per alcune settimane collegate al contest collegato a sanremo.

by Giuseppe Guerrasio | 0 Comments

Una giornata di Steve Ballmer

 

Durante la giornata che Steve Ballmer ha passato in italia la scorsa settimana Carlo Rossanigo lo ha seguito per tutto il tempo ed ha girato una video intervista con lui nei ritagli di tempo della giornata. Domande a tutto campo da su cosa pensa mentre  fa jogging, a come vive il social networking, da come si aspetta che sarà il web 3.0, s cosa suggerisce ai giovani, .. insomma, 14 domande “unplugged” da non perdere !!!!

Le trovate su mclips .

 

 

 

 

by Giuseppe Guerrasio | 1 Comments

Filed under: , , , ,

Evento The Next Web Now: Slide sessione Costruire applicazioni RIA con Silverlight 2

clip_image003Ecco le slide della mia sessione "Costruire applicazioni RIA con Silverlight 2" all'evento  The Next Web Now – MIX Essentials . Sul blog di MSDN Italia i link alle altre slide e presto anche i filmati delle sessioni. Grazie a tutti per la partecipazione.

by Giuseppe Guerrasio | 2 Comments

Filed under: , , , , ,

Sessioni del lancio online

Disponibili online le sessioni del lancio. In particolare disponibile anche video e slide della sessione che ho preparato con Mario Fontana e Mauro Minella sul tema  Visual Tools For Office da titolo

"Sviluppo di applicazioni per Microsoft Office System"

image

by Giuseppe Guerrasio | 0 Comments

IIS7 e gli scenari video in progressive download

Una delle tendenze più rilevanti nell'evoluzione dei contenuti nel mondo del Web è sicuramente rappresentata dall'enorme crescita dei contenuti video che oramai sta investendo siti di ogni dimensione. Si va dalla possibilità di ospitare materiale video generato dagli utenti, news, film , trailer.

Erogare contenuti video è estremamente costoso in termini di consumo di banda e gli scenari attraverso i quali viene generalmente affrontata questa tematica sono essenzialmente di tre tipi:

- Hosting dei contenuti video presso strutture terze specializzate nella distribuzione di questo tipo di contenuti attraverso CDN (Content Delivery Network) specifiche

- Infrastruttura di streaming installata nella server farm

- Download progressive , ovvero distribuzione del file attraverso un server web

La piattaforma Microsoft offre una soluzione per tutti e tre gli scenari :

- Silverlight Streaming che offre una CDN per la distribuzione di contenuti video e di applicazioni Silverlight in generale

- Windows Media Services per Windows Server 2008 che forniscono una piattaforma di streaming integrata in Windows Server con completo supporto per il DRM

- IIS 7 Media Pack Bit Rate Throttling che offre nuove funzionalità ad IIS7 per gestire gli scenari di download progressive , da poco disponibile nella versione finale.

Uno degli scenari tipici, in particolare per la distribuzione di video di piccole dimensioni è  lo scenario di download progressive,  dove il file viene posizionato semplicemente sul server web, mentre lo streaming viene utilizzato in scenari più complessi o per scenari in cui vengono trasmessi video in diretta. Nel download progressive, non abbiamo le ottimizzazioni sulla banda offerte dal server di streaming , il consumo di banda è elevatissimo in quanto il server web effettua il download del file verso il player client utilizzatore, sfruttando completamente la banda disponibile, indipendentemente dal bit rate con cui il video è codificato per la visualizzazione. Inoltre, nella maggioranza dei casi, l'utente guarda solo i primi secondi del video che nel frattempo va in download a banda completa praticamente inutilmente. 

Nel nuovo Media Pack per IIS7 troviamo le funzionalità di BitRate Throttling che consentono di gestire gli scenari di download progressive,  permettendo di ottimizzare il consumo di banda in modo configurabile sulla base del reale formato di codifica del file, ed a garantire un maggior numero di connessioni contemporanee possibili. Tra le caratteristiche fondamentali del nuovo supporto il media pack installa un modulo che permette di effettuare il download del file in base al bit rate di encoding. La risposta ed il funzionamento del modulo è completamente configurabile  dal livello del server web, fino ad arrivare al livello del singolo file.

La lista dei formati supportati è la seguente:

  • .asf
  • .avi
  • .flv
  • .m4v 
  • .mov
  • .mp3
  • .mp4
  • .rm
  • .rmvb
  • .wma
  • .wmv

E' possibile estendere il Media Pack per supportare ulteriori formati.

Per installare il MediaPack Bit Rate Throttling potete trovare qui il setup:

Per dimostrare la funzionalità del media pack e la semplicità di configurazione ed utilizzo, ho effettuato un piccolo test installandomi una macchina di prova. Sulla root del sito ho posizionato un file di esempio;

image

E l'ho pubblicato con la funzionalità di throttling disabilitata a livello del server web:

image

image

Di seguito potete vedere l'andamento del consumo di banda realizzato durante la riproduzione del video:

image

Il Media Pack per configuare il Bit Rate Throttling offre una interfaccia completamente integrata nell'ambiente di amministrazione di IIS7

image

Dall'interfaccia provvedo ad abilitare la funzionalità :

image

ed in particolare di seguito  vediamo la configurazione impostata per i file di tipo .wmv:

image

Con la configurazione impostata , i primi 20 secondi necessari per l'avvio rapido del filmato verranno forniti a banda completa (FastStart) , successivamente il download avverrà al 100% (Throttle Rate) del bitrate di encoding del video che nel nostro esempio è di 300kps.

La funzionalità di Bit Rate Throttling può anche essere applicata ad altri tipi di contenuti , configurando la parte data dell'entry e stabilendo quindi il la banda assegnata per il download

Effettuado nuovamente il play del video l'andamendo del consumo di banda in questo caso avrà un andamento che è il seguente:

image

Contribuendo significativamente ad ottimizzare il consumo di banda , ed a garantire un maggior numero di connessioni contemporanee possibili.

Per uteriori informazioni vi suggerisco i seguenti walkthrough:

Tra le altre caratteristiche offerte da IIS7 all'interno del Media Pack vi segnalo anche la possibilità di costruire delle playlist server side anche per i contenuti in download progressive, funzionalità utile ad esempio  per costruire playlist introducendo contenuti pubblicitaril. Informazioni e Walkthrough di utilizzo qui .

by Giuseppe Guerrasio | 3 Comments

Filed under: , , ,

Accesso ai dati con Siliverlight 2 Beta 1

In questo fine settimana ho passato un po di tempo libero ad approfondire i bit disponibili della Beta 1 di Silverligth 2 . Tra le tantissime novità offerte dal supporto del codice managed,  la nuova versione mette a disposizione un'ampia parte delle librerie .NET tra cui nuovi meccanismi per accedere a dati esposti da siti Internet\Intranet via HTTP.

Sia Internet che nelle intranet è sempre più frequente l'utilizzo dell'HTTP per l'esposizione di informazioni attraverso diverse forme (Web Service Soap,RSS, REST, POX, JSON, etc).

image

Lo scenario tipico di sviluppo Web che prevedeva lo strato di accesso ai dati realizzato direttamente dalla parte server dell'applicazione Web ,  sta rapidamente evolvendo. Anche le  applicazioni  basate sul browser sono sempre più caratterizzate da una larga presenza di codice client, che sfrutta tecniche AJAX   per consumare dati offerti da servizi esposti da server. In particolare diventano sempre più frequenti gli scenari in cui si utilizzano fonti dati esposte da siti differenti, che vengono combinate in un unica interfaccia direttamente sul client.

image

Questo tipo di scenario non riguarda esclusivamente le applicazioni sviluppate per Internet ma diventa sempre più presente anche in scenari Intranet. Con sempre maggior frequenza le aziende cominciano a combinare il software interno con servizi esterni. Le applicazioni e le informazioni aziendali vengono utilizzate in combinazione  con servizi presenti su Internet e con le applicazioni delle aziende clienti o partner, creando scenari un cui la gestione dell'accesso ai dati da parte del codice che gira nel browser client, diventa sempre più sofisticata e complessa. Ad esempio, un azienda che ha bisogno di un software per la gestione di spedizioni presso i propri punti vendita potrebbe sviluppare un applicazione client che aggrega le informazioni sui punti vendita estratte da servizi presenti nella intranet , posizionando i punti vendita sulle mappe fornite da un provider di mappe su Internet ed i servizi del corriere utilizzato per effettuare le spedizioni, integrando con i dati aziendali  i servizi per gli ordini, lo stato della spedizione , etc.

Evidentemente in scenari più complessi di integrazione non tutta l'aggregazione dei servizi può essere implementata nel client , perchè in moltissimi casi il coordinamento dei servizi stessi comporta la gestione di processi asincroni che vanno gestiti con specific Business Process Manager , ma sono comunque molti gli scenari in cui ha senso aggregare nel client. Nel nostro scenario un esempio ll'invio di un ordine di spedizione verrà sicuramente gestito attraverso il BPM dell'azienda che provvederà poi ad inviare l'ordine al servizio del corriere mentre lo stato della singola spedizione  potrebbe direttamente essere richiesto dal client al servizio del corriere e combinato direttamente sulla mappa e con gli altri dati provenienti dall'Intranet.

image

Altra interessante modalità di integrazione dei servizi con i processi dell'azienda è rappresentata dalla possibilità di sfruttare office ed il pattern OBA per collegare un scenario di questo tipo , direttamente con gli strumenti di produttività che le persono utilizzano per portare avanti i processi di tutti i giorni, ed una blla implementazione reale di uno scenario simile è rappresentata daei servizi che sta implementando FedEx mostrati alla office developers conference  .

image 

Con la prima versione di Silverlight gestire l'accesso a fonti dati è possibile direttamente dallo XAML per immagini, video , suoni mentre per l'accesso a sorgenti dati  occorre utilizzare il JS e l'oggetto XmlHttpRequest . Attraverso queste modalità e gia possibile sviluppare delle interessanti applicazioni di mashup (esempio interessante sviluppato in Italia sul blog msdn) , ma ovviamente sviluppare completamente utilizzando JS XMLHttprequest con sorgenti dati JSON o XML non è semplice e nemmeno particolarmente performante nella parte di parsing e caricamento dei dati sull'interfaccia utente.

In alcuni casi, per eliminare il costo del parsing sul client, è anche possibile fare in modo di costruire dei servizi in grado di rispondere direttamente con delle porzioni di XAML che vengono valorizzate server side, con i dati estratti da sorgenti specifiche e caricati a partire da template disponibili sul server. Lato client si può utilizzare XMLHttpRequest o il downloader di Silverlight per connettrsi all'url sul server che restituisce lo XAML contenente i dati e caricarlo nell'interfaccia utilizzando CreateFromXaml . Questo Howto mostra un semplice esempio di utilizzo di questa tecnica che sfutta lo XAML mentre questo mostra l'utilizzo di web service da Silverligh 1.0  .

image

L'utilizzo di AJAX e quindi dello JavaScript e di XMLHttpRequest per accedere a fonti dati remote comporta una notevole difficoltà di debug ed è sottoposto alle restrizioni imposte dal browser per il cross-scripting . Infatti attraverso questa tecnica possono essere interrogati solo URL residenti sullo stesso dominio da cui è stata caricata la pagina in esecuzione sul Browser. E' possibile attraverso specifiche tecniche di impiego di script dinamici o proxy lato server, Iframe etc, superare una parte di queste limitazioni , ma il risultato incrementa ancora di più la complessità di sviluppo e debug.

Con l'arrivo di Silverlight 2 (SL2) ed il supporto di .NET nello sviluppo con Silverlight abbiamo a disposizione un' ampia serie di classi che andranno ulteriormente ad arricchisi nella versione finale del nuovo plug-in. Attraverso SL2 abbiamo a disposizione le classi per consumare sia Web Service SOAP che per accedere direttamente a URL in GET e POST che per l'utilizzo di RSS , aggiunte anche le classi per gestire socket in uscita. Attraverso il nuovo modello di sviluppo è possibile anche effettuate cross-scripting attraverso quei siti che impostano sulla root del loro dominio il file di policy per questa funzionalità. Viene supportato anche il file di policy di Flash , per cui su tutti i siti in cui è già presente questo file è possibile fare crossscripting con Silverlight.

image

Oltre al supporto per il cross-scripting, il nuovo modello di controlli di SL2 supporta le funzionalità di databinding con le stesse modalità che sono utilizzate nel .NET Framework e Windows Presentation foundation , rendendo di fatto estremamente semplice anche il caricamento dei dati estratti dai servizi  sui controlli dell'interfaccia utente. Disponibile anche il supporto per LINQ to XML che ci permette di gestire con semplicità la manipolazione delle strutture XML estratte dai servizi.

Facciamo un esempio pratico provando a sviluppare un client per video.msn.com ed in particolare per estrarre un elenco di video casuale e visualizzare le informazioni fornite in formato XML dall'URL: http://catalog.video.msn.com/randomVideo.aspx?mk=us&vs=0&ff=99&c=10&random=12345   . Di seguito l'XML che viene restituito dal servizio di MSN:

image

La piccola applicazione che realizzeremo avrà quindi la seguente struttura:

image

In particolare per accedere alle informazioni utilizzeremo la classe System.Net.WebClient messa a disposizione dalla versione di .NET associata a SL2 che consente di accedere ad URL Internet in GET e POST a patto di contattare un URL sullo stesso dominio da cui abbiamo scaricato l'applicazione o su un dominio che ha posizionato sulla sua root un file di policy per il cross-scripting Silverlight o Flash. Infatti su catalog.msn.video.com troviamo il file clientaccesspolicy.xml :

 image

Per costruire il nostro client SL2 utiliziamo Visual Studio 2008 selezionando lo specifico template di progetto per Silverlight scegliendo di farci generare anche il progetto Web per il test dell'applicazione:

image

 image

Ottenendo così una soluzione con due progetti: uno per l'implementazione dell'applicazione SL2, l'altro per l'applicazione Web:

image

SL2 supporta oltre al Canvas due nuovi controlli di Layout , ovvero i contenitori per il posizionamento dei controlli sulla nostra interfaccia. Per il nostro esempio utiliziamo una Grid, equivalente a quella che abbiamo nel fratello maggiore WPF, con due righe all'interno delle quali inseriremo gli elementi fondamentali dell'intrfaccia: nella prima riga i controlli per impostare i parametri della ricerca sul contenuto dei risultati, nella seconda il contenuto selezionato in base ad i parametri di ricerca impostati. Per poter inserire , impostiamo ,inoltre, la proprietà ShowGridLines a true per visualizza la struttura della griglia:

image

image

Sull'handler dell'evento click del controllo Button inserito per effetuare la ricerca:

 image

 

inseriamo il codice che utilizzando la classe WebClient  ci permetterà di accedere ai dati di cataalogo. La classe WebClient mette a disposizione i metodi per accedere ed estrarre informazioni da un URL solo attraverso un pattern asincrono. Per accedere al catalogo di MSN video ed estrarre le informazioni in XML utilizzaremo il seguente codice:

image

image

Le informazioni in XML ottenute dal servizio possono essere direttamente caricate in u Array utilizzando Linq To Xml . Per utilizzare questa funzionalità occorre referenziare lo specifico assembly System.Linq.Xml :

image

Dove ns è una proprietà per gestire in namespace contenuto nel file XML, GetUriAsset un metodo helper per estrarre idati e VideoSource una specifica classe inserita nel progetto per rappresentare le informazioni dei video:

image

Ottenuto l'array con le informazioni , possiamo sfruttare il databinding e collegare direttamente la collezione contenente i dati da visualizzare ad uno dei nuovi controlli offerti da SL2 completi di supporto per il databindig. Per questo semplice esempio utilizzeremo direttamente il nuovo controllo DataGrid che aggiungeremo allo XAML:

image

e poi lo collegheremo ai dati usando la proprietà ItemSource:

image

Ottenendo a runtime il seguente risultato:

image

Come tutto il modello dei controlli di SL2 in maniera speculare a quanto possibile in WPF è possibile definire dei template di visualizzazione per i controlli. Infatti , ad esempio, nella colonna contenente l'url dell'immagine di preview possiamo impostare un template per fare visualizzare l'immagine al posto dell'url nella specifica colonna utilizzando la funzionalità di databinding per collegare i dati ad i controlli inseriti nel template.

Nel nostro esempio, in particolare, andiamo ad usare il template della RowDetails ovvero la riga di dettaglio che viene supportata dal DataGrid per ogli riga inserita. Impostiamo un template sulla riga di dettaglio per permettere la visualizzazione dell'immagine di preview del video. Il campoSource del controllo immagine lo colleghiamo al campo ImageUrl del datacontext con la specifica funzionalità di databinding ( {Binding ImageUrl} ) corrente e  impostiamo anche la specifica proprietà della DataGrid che ci permette di mostrare la RowDetails nel momento in cui la riga viene selezionata:

image

Il risultato ottenuto a runtime sarà il seguente:

image

Oltre al campo Image, possiamo anche direttamente inserire un MediaElement e riprodurre il direttamente il video.

image

image

Agendo con altri template è possibile personalizzare completamente la griglia così come qualunque altro controllo adattandola come vogliamo alle nostre esigenze grafiche.

Come abbiamo già detto l'oggetto WebClient è solo uno dei meccanismi offerti da SL2 per l'accesso ai dati. Per l'accesso a servizi SOAP silverlight mette a disposizione lo stack client di WCF permettendo l'utilizzo del classico modello "Add Service Reference" che consente di generare da Visual Studio una classe proxy a partire dai metadati del WSDL esposto dal servizio, classe che poi può essere usata direttamente per l'accesso a servizio. Anche in questo caso il proxy genera solo la possibilità di utilizzare con un pattern asincrono le chiamate al servizio, per evitare di bloccare l'interfaccia utente. Di seguito uno schema dello stack WCF per SL2.

image

Facciamo anche un piccolo progetto di test per l'utilizzo di Web Services da SL2 utilizzando WCF come servizio server. Sviluppiamo un semplice client SL2 per estrarre le informazioni dei clienti del classico database Northwind esposto attraverso un servizio WCF. Partiamo con un nuovo progetto Silverlight e selezioniamo anche la costruzione dell'applicazione Web di test. 

All'interno dell'applicazione web di test aggiungiamo un modello LINQ To Sql  per accedere alla tabella Customers del database Northwind :

image

Con il wizard di LINQ To Sql selezioniamo la tabella Customers e ci facciamo generare il modello di classi per l'accesso ai dati dal nostro ORM:

image

Impostiamo la specifica proprietà che ci consente di rendere serializzabili le classi generate da Linq To Sql:

image

Aggiungiamo un servizio di tipo WCF al nostro progetto:

image

Dove implementiamo la seguente interfaccia per estrarre l'elenco dei clienti dal database customers che sono in una specifica città:

image

Implementiamo l'interfaccia sul servizio ed impostiamo con LINQ la query per estrarre i clienti in base al parametro selezionato:

image

Come ultimo step per permettere l'accesso a SL2 al servizio, impostiamo come profilo di banding il basicProfile , agendo sul file di configurazione della nostra applicazione client per fare in modo che l'implementazione SOAP del servizio sia compatibile con il Basic Profile SOAP che viene supportato da SL2:

image

Lato SL2 implementiamo una semplice interfaccia per l'invio della richiesta al servizio e la visualizzazione della risposta:

image

Per poter agganciare il servizio, dal progetto SL2 usiamo la classica add service reference, selezionando il servizio WCF :

image

L'ambiente di sviluppo carica il WSDL esposto dal servizio e ci implementa il proxy necessario per l'accesso al servizio e la configurazione di WCF:

image

Sull'evento di click del Button query inserito nell'interfaccia SL implementiamo il codice per accedere al servizio , e sul metodo di callback agganciamo non il databinding la DataGrid ai dati estratti dal servizio:

image

Completando il nostro esempio:

image

Per approfondire questo aspetto vi consiglio :  http://msdn2.microsoft.com/en-us/library/cc296254(VS.95).aspx

In SL2 avremo a disposizione anche i serializzatori JSON . Al link  http://code.msdn.microsoft.com/SilverlightWS   trovate alcuni esempi del supporto JSON su cui il team di sviluppo sta lavorando :

image

Interessante anche la funzionalità prevista per l'ambiente di sviluppo paste as XmlSerializable che ci consentirà da VisualStudio di fare copia e incolla di un frammento XML per generare direttamente una classe tipizzata per rappresentare lo stesso XML con una classe .NET, cosa che in parte è possibile con il tool da riga di comando XSD.EXE di .NET.

image

Disponibile anche il supporto per i socket, ma solo verso il dominio da cui è stata scaricata l'applicazione (no crossscripting al momento) ed il supporto per Syndication che è praticamente identico a quello disponibile in .NET 3.5.

Per chi volesse cominciare a provare Silverlight 2 suggerisco i seguenti link:

- http://silverlight.net/GetStarted/#betajump dove trovate i link per installare il Runtime , le estensioni per Visual Studio 2008 e la versione di Expression Blend per SL2

- http://silverlight.net/learn/tutorials.aspx    tutorial sul Silverlight 2

- http://silverlight.net/learn/labs.aspx .    laboratori sulle nuove funzionalità di Silverlight 2

 

Al link http://silverlight.net/Quickstarts/Remote/default.aspx trovate un quickstart sugli argomenti trattati.

by Giuseppe Guerrasio | 4 Comments

Silverlight e le nuove interfacce per i Servizi Finanziari

image Normalmente si è portati a pensare che la costruzione di interfacce innovative e ricche di contenuti, sia una tematica riservata al mondo dell'intrattenimento . In realta la possibilità di sfruttare le potenzialità delle nuove tecnologie per lo sviluppo di interfacce RIA (Rich Interactive Application) può essere effettuato a vantaggio di qualunque tipologia di applicazione, permettendo di costruire siti che consentono di aprire scenari completamente nuovi, contribuendo a migliorare significativamente anche servizi come la Banca Online. Un bell'esempio di quello che è possibile fare in questo settore è rappresentato dalla applicazione demo mostrata alcuni giorni fà alla Financial Services Developers Conference in NY.

Si tratta di una demo che illustra un 'mock-up' di esempio di un sito finanziario sviluppato in Silverlight 2 che potete vedere online in questo sito . Caratteristiche interessanti di Silverlight 2 vengono combinate insieme all'interno di questo esempio, video e grafici interattivi, drag&drop , codice client compilato per calcoli , utilizzo di web service,  dimostrando le potenzialità anche in questo tipo di scenari.

Un video di introduzione alla demo lo trovate su questo silverlight streaming video  e a quest'altro link trovate un documento che descrive gli step dello scenario demo.

Il codice sorgente dell'esempio lo potete scaricare qui, al momento è un porting dalla versione 1.1 di Silverlight  e  verrà a breve pubblicata una nuova versione che sarà anche inserita nella gallery su Silverlight.net . Link al blog di Jaime Roudriguez che ha pubblicato la notizia .

by Giuseppe Guerrasio | 3 Comments

Windows LiveID e WS-Federation: la base per un mondo S+S

Una delle più interessanti possibilità di Internet che oramai diamo per scontato è rappresentata dal fatto di avere un unico protocollo di rete unificato che , di fatto, garantisce la possibilità a qualunque macchina di poter colloquiare con qualunque altra macchina collegata alla rete. Anche a livello di applicazioni, la standardizzazione del Web e dei suoi protocolli come meccanismo di esposizione e condivisione di informazioni ha reso possibile la costruzione di una enorme quantità di applicazioni e di siti , raggiungibili attraverso modalità completamente standardizzate. Uno degli aspetti che resta ancora complesso e che comporta  una notevole difficoltà nell'integrazione tra i siti e nell'utilizzo delle risorse esposte su Internet è rappresentato dagli aspetti collegati alla sicurezza . Siamo ancora in presenta di una ampia gamma di differenti modalità di autenticazionzione ed autorizzazione, non integrabili tra loro con semplicità, che costringento utenti ed applicazioni a gestire differenti modalità di autenticazione, impedendo di fatto la semplice costruzione di applicazioni che possano condividere e aggregare servizi offerti da siti differenti, frenando la possibilità di far evolvere Internet in una vera e propria piattaforma applicativa. Per materializzare la visione del Sofware + Service e rendere di fatto Internet una piattaforma di servizi componibili con il software locale alle nostre reti aziendali o di altri siti o servizi web, o  direttamente utilizzabile on line come servizio, avere una piattaforma comune per i meccanismi di sicurezza e autorizzazione costituisce un vincolo di base