Au cœur de Windows Azure

Windows 8 et Windows Azure : convergence dans le nuage

Bruno Terkaly
Ricardo Villalobos

Télécharger l'exemple de code

Il ne fait guère de doute que le développeur de logiciels d'aujourd'hui doit utiliser les technologies du nuage pour créer des applications du Windows Store incontournables : cela va de soi, en raison du nombre élevé d'utilisateurs et de périphériques. Plus d'un tiers de la population mondiale est connecté à Internet, et il y a désormais davantage de périphériques disposant d'un accès à des ressources en ligne que d'humains. De plus, le trafic de données via des périphériques mobiles a plus que doublé pour la quatrième année consécutive, puisqu'il a été multiplié par 2,3 en 2011. Peu importe l'angle sous lequel vous abordez la question, une seule conclusion s'impose : les applications modernes ont besoin de la connectivité au nuage.

La valeur ajoutée que représente l'informatique en nuage est irréfutable. La plupart des observateurs considèrent que l'évolutivité à la demande et le fait que vous payez uniquement ce que vous utilisez sont les moteurs de l'adoption du nuage. Toutefois, le nuage fournit en fait certaines technologies essentielles dans le monde des périphériques connectés. Les utilisateurs d'applications du Windows Store sont susceptibles d'utiliser de nombreuses applications et plusieurs périphériques ; ils s'attendent donc à ce que leurs données soient centralisées. S'ils enregistrent des données sur un périphérique Windows Phone, elles doivent aussi être immédiatement disponibles sur leur tablette ou sur n'importe lequel de leurs périphériques, y compris les périphériques iOS ou Android.

Windows Azure est la plateforme de nuage public de Microsoft. Elle offre la couverture mondiale la plus importante et le backend de services le plus complet. Elle prend en charge l'utilisation de plusieurs OS, langages, bases de données et outils, et fournit une mise à jour corrective automatique des services et systèmes d'exploitation. L'infrastructure réseau sous-jacente offre un équilibrage automatique de la charge et une résistance aux défaillances matérielles. Enfin, Windows Azure prend en charge un modèle de déploiement qui permet aux développeurs de mettre à niveau les applications sans temps mort.

L'application de service Web présentée dans cet article peut être hébergée en quelques minutes dans un ou plusieurs centres de données en nuage global de Microsoft. Que vous développiez une application de liste des tâches, un jeu, voire une application comptable pour un secteur d'activité, vous pouvez vous appuyer sur les techniques décrites dans cet article pour prendre en charge des scénarios basés sur des clients connectés de façon permanente ou occasionnelle.

Ce que vous allez apprendre

Tout d'abord, nous allons décrire comment créer un service simple hébergé dans le nuage sur Windows Azure pour la prise en charge de clients asynchrones, et ce, quel que soit le type de périphérique sur lequel il s'exécute (téléphone, tablette, ordinateur portable ou de bureau). Ensuite, nous allons vous montrer à quel point il est facile d'effectuer un appel dans un service Web depuis une application du Windows Store pour récupérer des données.

De manière générale, les données peuvent pénétrer dans une application du Windows Store de deux façons. Cet article se concentre sur l'approche « pull » pour la récupération des données ; dans ce type d'approche, l'application doit être en cours d'exécution et des demandes de données sont émises via des appels Web HTTP. L'approche « pull » utilise généralement des normes ouvertes (HTTP, JSON, Representational State Transfer [REST]), et la plupart, sinon tous, les types de périphériques produits par les différents fournisseurs peuvent l'utiliser.

Nous n'allons pas aborder l'approche « push » dans cet article. Cette approche s'appuie sur les services de notifications Push Windows (WNS), ce qui permet aux services hébergés dans le nuage d'envoyer des données non sollicitées à une application du Windows Store. Ces applications n'ont pas besoin d'être en cours d'exécution au premier plan et la livraison des messages n'est pas garantie. Pour plus d'informations sur l'utilisation de WNS, reportez-vous à la page bit.ly/RSXomc.

Deux projets

La solution complète requiert deux composants principaux : un projet de services Web ou côté serveur (qui peut être déployé sur site ou dans Windows Azure), et un projet côté client (qui se compose d'une application du Windows Store basée sur la nouvelle interface utilisateur Windows). Les deux projets peuvent être créés avec Visual Studio 2012.

Pour l'essentiel, vous avez le choix entre deux options pour créer un projet de services Web : Windows Communication Foundation (WCF) ou l'API Web ASP.NET, qui est comprise dans ASP.NET MVC 4. L'exposition de services via WCF étant déjà largement documentée, pour notre scénario, nous allons utiliser l'approche plus moderne introduite par l'API Web ASP.NET, en intégrant véritablement les concepts HTTP (URI et verbes). Cette infrastructure vous permet en outre de créer des services qui utilisent des fonctionnalités HTTP plus avancées, telles que les en-têtes requête ou réponse et les constructions hypermédia.

Les deux projets peuvent être testés sur un seul ordinateur lors du développement. Vous pouvez télécharger l'ensemble de la solution sur la page archive.msdn.microsoft.com/mag201210AzureInsider.

Ce dont vous avez besoin

Le point de départ le plus évident est que Windows 8 est requis, ce qui en devrait pas vous surprendre, car les projets doivent être créés à l'aide de la dernière version de Visual Studio que vous pouvez télécharger à l'adresse bit.ly/win8devtools.

Pour le projet côté serveur, vous avez besoin du dernier Kit de développement logiciel Windows Azure SDK, qui comprend les assemblys et outils nécessaires à la création de projet en nuage à partir de Visual Studio. Vous pouvez télécharger ce SDK et les outils associés à l'adresse bit.ly/NlB5OB. Vous avez également besoin d'un compte Windows Azure. Une version d'essai gratuite peut être téléchargée sur la page bit.ly/azuretestdrive.

Le protocole SOAP était traditionnellement utilisé pour l'architecture des services Web, mais cet article se concentrera sur les architectures de type REST. En résumé, REST est plus facile à utiliser, porte une charge plus petite et ne nécessite pas d'outils spéciaux.

Les développeurs doivent également choisir un format d'échange des données lorsqu'ils créent des services Web. Généralement, le choix se résume à utiliser JSON ou XML. JSON utilise un format de données compact basé sur le langage JavaScript. Il est souvent considéré comme l'alternative « allégée » à XML, car sa grammaire est beaucoup plus sommaire et il opère directement la correspondance avec les structures de données utilisées dans les applications clientes. Dans nos exemples, nous allons utiliser des données JSON.

Une fois ces choix faits, nous sommes prêts à créer notre service Web. Notre objectif est de créer un service HTTP qui atteigne l'éventail de clients le plus large possible, y compris les navigateurs et les périphériques mobiles.

Création du service Web

Commençons par démarrer Visual Studio 2012 en tant qu'administrateur. Voici les étapes à suivre pour créer le service Web côté serveur à l'aide de l'API Web ASP.NET MVC 4 :

1. Cliquez sur le menu Fichier et sélectionnez Nouveau | Projet (voir figure 1).
2. Sélectionnez Visual C# | Web comme type de modèle.
3. Sélectionnez .NET Framework 4 dans la liste déroulante du haut.
4. Sélectionnez ASP.NET MVC 4 Web Application.
5. Entrez le nom WebService et l'emplacement de votre choix.
6. Cliquez sur OK.
7. L'Assistant vous demandera de sélectionner le modèle de projet. Sélectionnez Web API et vérifiez que le moteur de vue est Razor (moteur par défaut), comme illustré à la figure 2.
8. Plusieurs fichiers seront générés par Visual Studio. Leur nombre peut vous sembler écrasant, mais vous devez uniquement vous préoccuper de deux fichiers, comme illustré à la figure 3.

Figure 1. Boîte de dialogue Nouveau projet

Figure 2. Boîte de dialogue Modèle de projet

Figure 3. Explorateur de solutions pour WebService

Le fichier ValuesController.cs est important, car il contient le code qui s'exécute lorsque le client Windows 8 soumet une requête HTTP auprès du service Web. C'est là que nous ajoutons le code pour renvoyer les données JSON requises par l'application du Windows Store. La classe ValuesController, illustrée à la figure 4, est générée par Visual Studio et hérite d'ApiController, qui renvoie des données qui sont sérialisées et envoyées au client automatiquement au format JSON.

Figure 4. Classe ValuesController

public class ValuesController : ApiController
{
  // GET api/values
  public IEnumerable<string> Get()
  {
    return new string[] { "value1", "value2" };
  }
  // GET api/values/5
  public string Get(int id)
  {
    return "value";
  }
  // POST api/values
  public void Post([FromBody]string value)
  {
  }
  // PUT api/values/5
  public void Put(int id, [FromBody]string value)
  {
  }
  // DELETE api/values/5
  public void Delete(int id)
  {
  }
}

Notez que les méthodes utilisées en figure 4 (Get, Post, Put et Delete) sont associées aux opérations spécifiques de création, lecture, mise à jour et suppression (CRUD, Create, Read, Update and Delete) et aux verbes HTTP exécutés par l'application du Windows Store. C'est là l'avantage de l'infrastructure de l'API Web ASP.NET : elle achemine automatiquement les verbes HTTP utilisés par le client directement vers les méthodes définies dans la classe ValuesController, ce qui limite les risques d'erreur de programmation.

Dès le départ, le projet WebService est prêt à fonctionner. Les méthodes dans la classe ValuesController sont auto-documentées :

// GET api/values
public IEnumerable<string> Get()
{
  return new string[] { "value1", "value2" };
}

Notez que la méthode Get est appelée lorsque le client émet le verbe HTTP Get à l'aide de l'URL http://localhost:[port]/api/values. Dans le cadre de cette démonstration, le code permet de dessiner des cercles concentriques basés sur des couleurs renvoyées par le service Web. Modifiez le code précédent comme suit :

// GET api/values
public IEnumerable<string> Get()
{
  return new string[] { "#0000FF", "#000000", "#FF0000",
    "#FFFF00", "#00FF00" };
}

Comme vous le voyez, à présent nous retournons un tableau de chaînes de couleurs différentes. L'application du Windows Store que nous créons restitue ces chaînes sous forme de couleurs réelles, plus précisément sous forme de cercles concentriques colorés.

Test avec un navigateur

Il est toujours bon de tester le service Web avant de créer l'application du Windows Store. Utilisez le navigateur de votre choix.

Pour tester le service Web à partir d'un navigateur, procédez comme suit :

1. Dans Visual Studio, cliquez sur le menu Débogage et sélectionnez Démarrer le débogage.
2. La page de démarrage par défaut, illustrée à la figure 5, doit s'afficher.
3. Notez que Visual Studio choisit un port arbitraire, dans ce cas, 58428. Le port utilisé par votre instance de Visual Studio sera probablement différent.
4. Comme vous le savez, nous devons ajouter « api/values » à l'URL pour que la méthode Get soit appelée, ce qui signifie que l'URL finale doit être (dans notre cas) http://localhost:58428/api/values. Il s'agit d'une fonctionnalité intégrée lorsque Visual Studio crée votre projet. Vous pouvez modifier ce mappage en fonction de vos besoins.
5. Accédez à la barre d'adresses de Visual Studio et saisissez http://localhost:58428/api/values. Pensez à remplacer le numéro de port par votre propre valeur.
6. Une boîte de dialogue semblable à celle présentée à la figure 6 s'affiche.
7. Cliquez sur le bouton Enregistrer, puis ouvrez values.json dans le Bloc-notes.
8. Le Bloc-notes affichera les valeurs renvoyées. Notez, sur la figure 7, que les données renvoyées sont automatiquement au format JSON, grâce à l'infrastructure de l'API Web ASP.NET.

Figure 5. Utilisation d'Internet Explorer pour tester le service Web

Figure 6. Boîte de dialogue Internet Explorer

Figure 7. Données JSON renvoyées par le service Web

Entrée dans Windows 8

À présent que nous avons réussi à renvoyer des données JSON en provenance de notre service Web, voyons comment utiliser ces données depuis une application Windows Store. L'objectif est de lire les couleurs du service Web et de dessiner les cercles concentriques en fonction des valeurs renvoyées par le service Web. Notre application Windows Store finale doit produire une image semblable à la figure 8. Les couleurs que vous voyez ont été définies par le service Web. Si le service Web change les couleurs renvoyées, l'application Windows Store devra refléter ces couleurs sous la forme des cercles concentriques que vous voyez à la figure 8.

Figure 8. Application Windows Store en cours d'exécution

Vous pouvez créer l'application Windows Store dans la même solution que le projet de service Web ou vous pouvez démarrer une nouvelle instance de Visual Studio spécialement pour le client Windows 8. Nous allons démarrer une nouvelle instance de Visual Studio en tant qu'administrateur, pour l'application Windows Store. Pour cela, procédez comme suit (voir figure 9) :

Figure 9. Boîte de dialogue Nouveau projet

1. Démarrez une seconde instance de Visual Studio en tant qu'administrateur.
2. Cliquez sur le menu Fichier et sélectionnez Nouveau | Projet.
3. Sélectionnez Visual C# | Windows Store comme type de modèle.
4. Sélectionnez .NET Framework 4.5 dans la liste déroulante du haut.
5. Sélectionnez Application vide (XAML).
6. Entrez le nom Windows8Client et l'emplacement de votre choix.
7. Cliquez sur OK.

Une fois que vous avez terminé cette procédure, accédez au menu Affichage, sélectionnez l'explorateur de solutions (voir figure 10) et ouvrez le fichier MainPage.xaml.cs.

Figure 10. Explorateur de solutions pour Windows8Client

Appel dans le service Web

Nous sommes prêts à ajouter le code qui appellera le service Web depuis l'application Windows Store. L'application Windows Store émettra une requête Web auprès du service Web.

Pour prendre en charge une requête Web, MainPage.xaml.cs est modifié comme suit :

• Un événement Loaded est ajouté au contrôle de grille intégré.
• L'événement Loaded envoie une requête Web asynchrone pour appeler le service Web. La classe HttpClient est utilisée à cet effet.
• Pour convertir la chaîne de couleur du service Web en une couleur réelle, une méthode CircleColorFromString est ajoutée.
• Pour dessiner les cercles concentriques, nous ajoutons une méthode appelée AddCircle.

Procédez comme suit pour émettre une requête Web auprès du service Web :

1. Cliquez avec le bouton droit sur MainPage.xaml et sélectionnez Concepteur de vues.
2. Ajoutez l'événement GridLoadedEvent et le contrôle Canvas comme suit (la zone de dessin, Canvas, est l'endroit où nous allons dessiner les cercles) :

<Grid Name="maingrid"
      Background="{StaticResource
                   ApplicationPageBackgroundThemeBrush}"
      Loaded="GridLoadedEvent">
  <Canvas Name="myCanvas" Background="White"/>
</Grid>

1.  3.   Double-cliquez sur MainPage.xaml.cs. Le codebehind de MainPage.xaml.cs apparaît.
2.  4.   Pour prendre en charge les différents espaces de noms requis par le code à ajouter, incluez les références suivantes en haut de MainPage.xaml.cs :

using System.Net.Http;          // for HttpClient()
using Windows.Data.Json;        // for parsing JSON Array data
using Windows.UI.Xaml.Shapes;   // for the Ellipse object
using Windows.UI                // for the Color class

1.  5.   Ajoutez les routines de prise en charge permettant de dessiner les cercles et d'analyser les chaînes de données JSON envoyées par le service Web. Modifiez le code dans MainPage.xaml.cs, comme illustré à la figure 11.

Figure 11. MainPage.xaml.cs

public sealed partial class MainPage : Page
  {
    // [ Generated code omitted for brevity ]
    private void AddCircle(Color color, int diameter, int t, int l)
    {
      //
      // Build a circle using the attributes provided as parameters.
      //
      Ellipse newColoredCircle = new Ellipse();
      newColoredCircle.Fill = new SolidColorBrush(color);
      newColoredCircle.StrokeThickness = 1;
      newColoredCircle.Stroke = new SolidColorBrush(color);
      newColoredCircle.Width = diameter;
      newColoredCircle.Height = diameter;
      //
      // Add the circle to the Canvas control.
      //
      myCanvas.Children.Add(newColoredCircle);
      Canvas.SetTop(newColoredCircle, t);
      Canvas.SetLeft(newColoredCircle, l);
    }
    Color CircleColorFromString(string rgb)
    {
      //
      // Convert the string-based hex values
      // into a Color object and return to caller.
      //
      Color ringColor = new Color();
      byte a = 255;
      byte r = (byte)(Convert.ToUInt32(rgb.Substring(1, 2), 16));
      byte g = (byte)(Convert.ToUInt32(rgb.Substring(3, 2), 16));
      byte b = (byte)(Convert.ToUInt32(rgb.Substring(5, 2), 16));
      ringColor = Color.FromArgb(a, r, g, b);
      return ringColor;
    }
    private async void GridLoadedEvent(object sender, 
      RoutedEventArgs e)
    {
      //
      // Retrieve colors from Web service.
      //
      var client = new HttpClient();
      client.MaxResponseContentBufferSize = 1024 * 1024;
      //
      // Asynchronously call into the Web service.
      //
      var response = await client.GetAsync(
        new Uri("http://localhost:58428/api/values"));
      var result = await response.Content.ReadAsStringAsync();
      //
      // Parse the JSON data
      //
      var parsedResults = JsonArray.Parse(result);
      //
      // Build concentric circles, repeating colors as needed
      //
      const double startingPercentage = 1.0;
      const double desiredCircleCount = 50.0;
      for (int i = 0; i < desiredCircleCount; i++)
      {
        Color circleColor = CircleColorFromString(
          parsedResults[i % parsedResults.Count].GetString());
        int circleDiameter = Convert.ToInt32((startingPercentage –
          (i / desiredCircleCount)) * this.RenderSize.Width / 2.0);
        int top = Convert.ToInt32((this.RenderSize.Height -
          circleDiameter)/2.0);
        int left = Convert.ToInt32((this.RenderSize.Width -
          circleDiameter)/2.0);
        AddCircle(circleColor, circleDiameter, top, left);
      }
    }
}

Maintenant, testez l'application. C'est très facile à faire :

1. Retournez sur le projet WebService dans Visual Studio et, dans le menu Débogage, sélectionnez Démarrer le débogage.
2. Vérifiez que le navigateur démarre. Vous êtes à présent prêt à démarrer l'application Windows8Client.
3. Retournez sur le projet Windows8Client dans Visual Studio et, dans le menu Débogage, sélectionnez Démarrer le débogage.
4. Vérifiez que l'application du Windows Store s'affiche, comme illustré à la figure 8.

Déploiement du service Web sur Windows Azure

Une fois que le service Web a été créé et testé localement, l'étape logique suivante consiste à le déployer dans le nuage à des fins d'évolutivité. Cela vous permet de modifier la capacité de calcul affectée au service Web, et son coût, en fonction de la baisse ou de l'augmentation du nombre de requêtes en provenance des périphériques Windows 8. Visual Studio offre plusieurs méthodes permettant de déployer les projets d'API Web ASP.NET sur Windows Azure, et la seule condition requise consiste à ajouter un projet de service en nuage à la solution de service Web. Procédez de la façon suivante :

1. Cliquez avec le bouton droit sur le nom de la solution et sélectionnez Ajouter | Nouveau Projet.
2. Sélectionnez Visual C# | Cloud comme nom de modèle (Figure 12).
3. Sélectionnez .NET Framework 4 dans la liste déroulante du haut.
4. Sélectionnez Windows Azure Cloud Service Visual C#.
5. Entrez le nom WindowsAzureCloudService et l'emplacement de votre choix.
6. Cliquez sur OK.
7. Retournez à présent dans l'explorateur de solutions. Recherchez le nouveau projet dans la solution et cliquez avec le bouton droit sur le nœud Rôles. Sélectionnez Ajouter | Projet de rôle Web.
8. Recherchez le projet WebService créé précédemment. Sélectionnez-le et cliquez sur OK.
9. Le projet WebService est désormais répertorié et s'affiche sous le nœud Rôles, comme illustré à la figure 13.
10. Vous pouvez modifier divers attributs de déploiement du rôle WebService avant de le déployer sur Windows Azure, tels que la taille de l'ordinateur virtuel (VM) sur lequel il sera hébergé et le nombre d'instances le prenant en charge. Pour consulter ces paramètres, cliquez avec le bouton droit sur le nœud Rôles WebService et sélectionnez Propriétés. Une boîte de dialogue semblable à celle présentée sur la figure 14 s'affiche. Apportez une attention particulière aux paramètres Nombre d'instances et Taille de l'ordinateur virtuel qui détermineront le taux de consommation une fois le rôle déployé. Pour plus d'informations sur la tarification Windows Azure pour les instances de calcul, consultez la page bit.ly/SnLj68.
11. Cliquez avec le bouton droit sur le projet Windows­AzureCloudService et sélectionnez Package. Conservez les sélections par défaut pour les paramètres de configuration de build et de service, et cliquez sur le bouton Package. Cette action génère deux fichiers : Windows­AzureCloudService.cspkg et ServiceConfiguration.Cloud.cscfg. Ils sont nécessaires pour créer un service en nuage sur Windows Azure via le portail. Notez que les projets peuvent être déployés directement à partir de Visual Studio. Nous n'aborderons cependant pas cette approche dans notre article.
12. Connectez-vous à votre compte Windows Azure en ouvrant l'URL manage.windowsazure.com, puis suivez les instructions sur la page bit.ly/R15VNj pour créer un nouveau service en nuage et télécharger les deux fichiers générés.
13. Selon le nom que vous utilisez pour le service en nuage, votre nouvelle API Web ASP.NET sera disponible à l'adresse http://{cloudservicename}.cloudapp.net/api/values.
14. Pointez l'application du Windows Store sur cette URL et vous avez terminé.

Figure 12. Ajout d'un projet de service en nuage à la solution de service Web

Figure 13. Ajout du projet WebService à un rôle de service en nuage

Figure 14. Propriétés du déploiement sur Windows Azure pour le rôle WebService

Dans le nuage

En utilisant l'API Web ASP.NET, il est très facile de prendre en charge des applications utilisant des commandes REST de façon asynchrone pour l'utilisation et l'ingestion des données via des services Web. Visual Studio 2012 et les bibliothèques incluses dans .NET Framework 4.5 permettent d'émettre très facilement des demandes asynchrones auprès d'un service Web. Enfin, l'intégration de l'environnement de développement avec Windows Azure permet aux développeurs de déployer rapidement la partie service sur le nuage, en tirant parti de l'évolutivité et des capacités d'infrastructure mondiale fournies par le nuage.

Bruno Terkaly est développeur pour Microsoft. Ses connaissances approfondies sont issues d'années d'expérience dans le domaine, au cours desquelles il a écrit du code à l'aide d'une multitude de plateformes, de langages, d'infrastructures, de SDK, de bibliothèques et d'API. Il se consacre à l'écriture de code, à l'écriture sur un blog et à des présentations sur la création d'applications de nuage, plus particulièrement à l'aide de la plateforme Windows Azure.

Ricardo Villalobos est un architecte logiciel aguerri qui bénéficie de plus de 15 ans d'expérience dans la conception et la création d'applications pour des entreprises exerçant dans le secteur de gestion de la chaîne d'approvisionnement. Titulaire de plusieurs certifications techniques, ainsi que d'une maîtrise d'administration des entreprises délivrée par l'Université de Dallas, il travaille comme architecte de cloud dans le groupe incubation Windows Azure CSV pour Microsoft.

Merci à l'expert technique suivant d'avoir relu cet article : Robert Green