Comment enrichir vos applications à l’aide de Silverlight et de Windows Live

Author : Jason Kelly - Senior Solution Architect - Akona Consulting

This article appeared in the Expression Newsletter; subscribe to get the next issue.

L’arrivée de Silverlight et d’Expression Studio ouvre une nouvelle ère dans la création d’applications Web. Aujourd’hui, vous pouvez encore améliorer la conception de vos applications en utilisant les services Windows Live pour fidéliser vos utilisateurs, c’est-à-dire les inciter à revenir sur votre site pour communiquer ou encore faire des recherches et partager leurs données.

Conçue pour servir de fondation aux technologies Web nouvelle génération, la plateforme Windows Live vous permet d’ajouter à votre propre site Web des services connus et plébiscités par les utilisateurs. Les API fournies par Microsoft pour les principaux services que sont Windows Live Messenger, Virtual Earth et Live Search permettent aux développeurs d’accéder à ces derniers et de les utiliser dans leurs applications.

Il existe de nombreuses ressources permettant de se familiariser rapidement à l’utilisation de Windows Live pour des tâches de développement, notamment Windows Live Quick Applications. Ces applications fournissent du code source gratuit et illustrent différentes façons d’exploiter au mieux le potentiel offert par les services Windows Live. Pour afficher la liste complète des Quick Applications, rendez-vous sur le site http://dev.live.com/QuickApps(en anglais).

Examinons maintenant certaines possibilités de création offertes par les services Windows Live.

Windows Live Messenger

Avec plus de 300 millions d’utilisateurs actifs dans le monde, Windows Live Messenger constitue à lui seul un réseau social de grande envergure. En utilisant la bibliothèque Windows Live Messenger Library, vous pouvez enrichir votre propre site Web en y intégrant de puissantes fonctions de messagerie instantanée.

La bibliothèque Windows Live Messenger Library est une API cliente Javascript. En gérant l’authentification et les communications sécurisées avec le système Messenger, elle allège votre charge de travail et vous permet de mieux vous consacrer aux tâches visant à enrichir l’expérience de vos utilisateurs. En outre, elle s’avère particulièrement adaptée aux projets Silverlight les plus innovants.

En intégrant ces fonctions de messagerie instantanée à votre site, vous donnez à vos utilisateurs la possibilité de communiquer en direct sans basculer vers l’application Messenger. Placée au centre d’un réseau social réunissant vos utilisateurs, votre application devient ainsi un facteur d’immersion et de fidélisation.

Tafiti Search Visualization ( http://tafiti.mslivelabs.com ) est un parfait exemple d’intégration dans lequel Windows Live Messenger, Silverlight et Live Search sont utilisés ensemble dans un cadre totalement immersif. Il permet notamment de se connecter à un compte Windows Live Messenger et de participer à des recherches Web avec d’autres utilisateurs, le tout dans une interface Silverlight intuitive prenant en charge le glisser-déplacer.

Vous pouvez télécharger le code source de Tafiti gratuitement et le modifier pour l’adapter à votre site Web. Pour l’obtenir, rendez-vous sur le site http://dev.live.com/QuickApps .

Si vous envisagez d’intégrer Messenger à vos propres applications RIA, vous pouvez également utiliser les exemples de code disponibles sur le site Windows Live Messenger Developer Samples. Cette ressource inclut une interface Silverlight illustrative basée sur la bibliothèque Messenger.

Cet exemple illustre l’utilisation de la bibliothèque Windows Live Messenger Library dans le cadre d’une application Web basée sur l’environnement Silverlight. Pour commencer à développer une interface utilisateur Messenger pour votre site, rendez-vous sur le site http://www.codeplex.com/messenger(en anglais) et cliquez sur l’onglet « Source Code  ». Après avoir accédé au code source, ouvrez l’exemple Silverlight dans Visual Studio 2008. Pour continuer, vous devez avoir installé Microsoft Silverlight Tools.

La solution MessengerSample contient trois projets. Les trois fichiers qui composent l’interface sont les suivants :

·        Page.xaml : interface utilisateur globale de l’application, y compris le contrôle de connexion et la liste de contacts.

·        ConversationWindow.xaml : zone affichant l’historique des conversations de la messagerie instantanée et la zone de saisie des messages.

·        App.xaml : classe d’application principale qui associe tous les éléments et définit les styles de contrôles.

Vous pouvez personnaliser ces fichiers XAML pour créer votre propre instance de Messenger.

Virtual Earth

L’interface utilisateur AJAX harmonieuse de Virtual Earth en fait l’environnement idéal pour toutes les applications nécessitant l’utilisation de cartes, d’itinéraires ou d’images aériennes. Or, nous savons que l’intégration de Virtual Earth à un site Web HTML ou JavaScript traditionnel est une opération relativement facile, mais qu’en est-il de son utilisation avec Silverlight ?

L’équipe Windows Live ne ménage pas ses efforts pour expérimenter de nouvelles méthodes permettant d’intégrer Virtual Earth à des applications RIA de façon entièrement transparente. Le projet le plus abouti dans ce domaine est Visit Planner, qui fait également partie de Windows Live Quick Applications.

Visit Planner indique comment créer une application permettant à vos clients de planifier, d’enregistrer et de partager des itinéraires, dans un environnement au design séduisant et intuitif basé sur une interface Silverlight.

Pour tester Visit Planner, rendez-vous sur le site http://visitplanner.mslivelabs.com/ .

L’utilisation de Silverlight dans l’exemple ci-dessus permet de créer une interface beaucoup plus riche dans laquelle des contrôles Silverlight transparents sont superposés au contrôle Virtual Earth, lui-même intégré à une balise HTML <div>.

Pour apprendre à créer une telle interface, rien ne vaut une petite incursion dans le code... Comme pour toutes les Windows Live Quick Applications, le code source de Visit Planner peut être téléchargé gratuitement et modifié pour créer de nouvelles applications Web.

Pour accéder au code source :

·        Accédez à http://www.codeplex.com/WLQuickApps (en anglais) et cliquez sur l’onglet « Releases  ».

·        Téléchargez la dernière version du code source.

·         Toutes les Quick Apps sont regroupées dans un seul et même package. Pour afficher le code source de Visit Planner, dézippez le package et ouvrez le dossier WLQuickApps.VisitPlanner.              

Démarrez Visual Studio et ouvrez VisitPlanner.sln. Visit Planner se compose de plusieurs projets, mais le plus important est VESilverlight. Il contient l’intégralité du code Silverlight et les éléments assurant son interaction avec Virtual Earth.

Silverlight et Silverlight Streaming

Si vos applications utilisent des contenus multimédias riches, rien de tel que Silverlight Streaming pour booster votre site. Ce service Windows Live vous permet d’héberger des flux multimédias et des applications RIA sans subir les inconvénients de coûts liés à l’utilisation de serveurs de diffusion multimédia en continu et à la consommation de bande passante. Avec Silverlight Streaming, vous bénéficiez immédiatement de services hautes performances autorisant une diffusion globale de vos flux multimédias.

Pour obtenir un aperçu du fonctionnement de Silverlight, rendez-vous une fois de plus dans Windows Live Quick Applications. L’application Retail présente un exemple de « mur vidéo » hébergé dans Silverlight Streaming. La démonstration correspondante est disponible à l’adresse suivante : http://retail.mslivelabs.com.

Silverlight est ajouté à votre navigateur lorsque vous vous connectez au site Retail. Ensuite, des flux vidéo sont diffusés dès que vous placez le pointeur de la souris sur l’un des produits disponibles. Les vidéos transférées depuis vos serveurs Web n’utilisent aucune bande passante car elles sont diffusées directement à partir de Silverlight Streaming.

Pour créer un site de ce type :

1.      Codez votre vidéo à l’aide d’Expression Encoder.

2.      Téléchargez-la vers Silverlight Streaming (http://silverlight.live.com).

3.      Intégrez l’URL de diffusion vidéo de Silverlight Streaming à votre application.

Retail est l’illustration d’un nouveau modèle d’architecture applicative implémenté par Silverlight   2 et Silverlight Streaming. Ce modèle permet d’héberger des applications RIA directement dans le navigateur de l’utilisateur final, pour une expérience encore plus immersive. Les flux vidéo sont transférés entre le serveur Web et le réseau de diffusion de contenu fourni par Silverlight Streaming.

Premiers pas

Les services Windows Live sont conçus pour fournir une infrastructure solide sur laquelle vous pouvez vous appuyer pour mieux vous consacrer à la production d’applications Web qui contribuent à enrichir l’expérience de vos utilisateurs.

La première source d’informations à consulter concernant les services Windows Live est le site http://dev.live.com/ . Il contient des liens vers des blogs, une présentation d’applications Web hybrides et des informations sur chaque service Windows Live.

Des exemples d’applications et le code source peuvent être téléchargés gratuitement à partir du site de Windows Live Quick Applications, http://dev.live.com/QuickApps/ .