Windows Azure Insider

  • Artículo

Windows 8 y Windows Azure: convergencia en la nube

Bruno Terkaly
Ricardo Villalobos

Descargar el ejemplo de código

Bruno Terkaly, Ricardo VillalobosSin duda que los desarrolladores de software de hoy en día deben adoptar las tecnologías de la nube para crear aplicaciones atractivas para la Tienda Windows. Esto es evidente, dada la enorme cantidad de usuarios y dispositivos. Más de un tercio de la población mundial está conectada a Internet y ahora existen más dispositivos con acceso en línea que personas. Además, el tráfico de datos móvil creció 2,3 veces en 2011; más que el doble, por cuarto año consecutivo. Independientemente de cómo lo miremos, llegamos a una conclusión muy sencilla: las aplicaciones modernas tienen que estar conectadas con la nube.

La propuesta de valor de la informática en nube es atractiva. La mayoría de los observadores señala la escalabilidad a petición y el hecho que solo se paga lo que se consume como las fuerzas impulsoras para la adopción de la nube. Sin embargo, la nube realmente entrega algunas tecnologías esenciales en el mundo de los múltiples dispositivos conectados. Los usuarios de las aplicaciones de la Tienda Windows, quienes probablemente usan numerosas aplicaciones y diferentes dispositivos, esperan que sus datos se ubiquen en forma central. Cuando guardan los datos en un dispositivo con Windows Phone, también deben estar disponibles inmediatamente en sus tablets y en cualquier otro dispositivo, incluso en los dispositivos con iOS y Android.

Windows Azure es la plataforma de nube pública de Microsoft; ofrece el mayor alcance global y el back-end de servicio más integral. Admite el uso de múltiples sistemas operativos, lenguajes, bases de datos y herramientas, y entrega una aplicación automática de revisiones para el sistema operativo y los servicios. La infraestructura de redes subyacente automáticamente ofrece equilibrio de cargas y resistencia frente a los errores de hardware. En último lugar, pero no por ello menos importante, Windows Azure cuenta con un modelo de implementación que permite que los desarrolladores actualicen las aplicaciones sin tiempos de inactividad.

La aplicación de servicio web que se presenta en este artículo se puede alojar en cosa de minutos en uno o varios centros de datos de nube globales de Microsoft. No importa si está creando una aplicación para una lista de tareas, un juego o incluso una aplicación de contabilidad de línea de negocio: podrá aprovechar las técnicas de este artículo en las situaciones que dependen de clientes conectados, ya sea en forma permanente u ocasional.

Lo que aprenderá

Primero describiremos la forma de crear un servicio basado en nube sencillo en Windows Azure, con el fin de admitir clientes asincrónicos, independientemente del tipo de dispositivo en el que se ejecuta: el teléfono, una tableta táctil, tableta, equipo portátil o el escritorio. Luego le mostraremos lo fácil que es realizar una llamada a un servicio web desde una aplicación de la Tienda Windows para recuperar datos.

En términos generales, los datos pueden llegar de dos formas a una aplicación de la Tienda Windows. Este artículo se enfoca en el “método por extracción” para la recuperación de datos, donde la aplicación debe estar en ejecución y las solicitudes de datos se emiten mediante llamadas web por HTTP. El método por extracción generalmente aprovecha estándares abiertos (HTTP, JSON, Transferencia de estado de representación [REST]), y la mayoría de los dispositivos de distintos proveedores, si no todos, pueden usarlo.

En este artículo no nos referiremos al “método por inserción”. Este método se vale de los Servicios de notificaciones de inserción de Windows (WNS), que permiten que los servicios hospedados en la nube envíen datos no solicitados a una aplicación de la Tienda Windows. No hace falta que dichas aplicaciones se ejecuten en primer plano y no se garantiza la entrega de los mensajes. Para obtener información sobre el uso de WNS, consulte bit.ly/RSXomc.

Dos proyectos

La solución completa requiere de dos componentes principales: un proyecto para un servicio del lado servidor o servicio web (que se puede implementar localmente o en Windows Azure) y un proyecto del lado cliente, el cual consta de una aplicación para la Tienda Windows basada en la nueva interfaz de usuario de Windows. Ambos proyectos se pueden crear con Visual Studio 2012.

Para crear el proyecto del servicio web, existen básicamente dos opciones: Windows Communication Foundation (WCF) y ASP.NET Web API, que viene incluido en ASP.NET MVC 4. Como la exposición de servicios mediante WCF está ampliamente documentada, en este caso emplearemos el método más moderno ofrecido por ASP.NET Web API, que adopta plenamente los conceptos de HTTP (URI y verbos). Este marco también permite crear servicios que empleen características de HTTP más avanzadas, como los encabezados de solicitud/respuesta y las construcciones de hipermedia.

Durante el desarrollo, ambos proyectos se pueden probar en una misma máquina. Puede descargar la solución completa en archive.msdn.microsoft.com/mag201210AzureInsider.

Requisitos

El punto de partida más obvio es que Windows 8 resulta imprescindible, y no nos debe sorprender que los proyectos se deben crear con la última versión de Visual Studio, la cual se puede descargar en bit.ly/win8devtools.

Para el proyecto del lado servidor, necesitará el SDK de Windows Azure más reciente, que incluye los ensamblados y herramientas necesarios para crear proyectos de nube en Visual Studio. Puede descargar este SDK, junto con las herramientas relacionadas, en bit.ly/NlB5OB. También necesitará una cuenta de Windows Azure. Puede descargar una versión de evaluación gratuita en bit.ly/azuretestdrive.

Históricamente se empleaba SOAP para crear servicios web, pero este artículo se enfocará en las arquitecturas al estilo REST. En pocas palabras, REST es más fácil de usar, implica una carga menor y no requiere de herramientas especiales.

Al crear los servicios web, los desarrolladores también deben elegir un formato de intercambio de datos. Generalmente optan entre JSON y XML. JSON usa un formato de datos compacto basado en JavaScript. Frecuentemente se le llama la “alternativa libre de grasas” a XML, ya que tiene una gramática mucho más reducida y se asigna directamente a las estructuras de datos en las aplicaciones cliente. En nuestros ejemplos emplearemos datos en JSON.

Ahora que ya tomamos estas decisiones, estamos listos para crear el servicio web. Nuestro objetivo es crear un servicio basado en HTTP que llegue al espectro de clientes más variados posible, como los exploradores y dispositivos móviles, entre otros.

Creación del servicio web

Para comenzar, debemos iniciar Visual Studio 2012 como administrador. Estos son los pasos para crear el servicio web del lado servidor con ASP.NET MVC 4 Web API:

  1. Haga clic en el menú Archivo y elija Nuevo | Proyecto (ver Ilustración 1).
  2. Seleccione Visual C# | Web para el tipo de plantilla.
  3. Seleccione .NET Framework 4 en el menú desplegable del extremo superior.
  4. Seleccione Aplicación web ASP.NET MVC 4.
  5. Escriba WebService como el nombre y una ubicación de su elección.
  6. Haga clic en Aceptar.
  7. El asistente le solicitará que seleccione la Plantilla de proyecto. Elija Web API y fíjese en que el Motor de vistas sea Razor (el predeterminado), tal como se muestra en la Ilustración 2.
  8. Visual Studio generará varios archivos. Esto puede ser abrumador, pero solo debemos preocuparnos por unos pocos, como se aprecia en la Ilustración 3.

New Project Dialog Box
Ilustración 1 Cuadro de diálogo Nuevo proyecto

Project Template Dialog Box
Ilustración 2 Cuadro de diálogo Plantilla de proyecto

Solution Explorer for WebService
Ilustración 3 Explorador de soluciones para WebService

ValuesController.cs es importante, ya que contiene el código que se ejecuta cuando el cliente de Windows 8 envía una solicitud HTTP al servicio Web. Aquí es donde agregaremos el código para devolver los datos JSON requeridos por la aplicación de la Tienda Windows. La clase ValuesController, que se muestra en la Ilustración 4, la genera Visual Studio y se hereda de ApiController, que devuelve los datos que se serializaron y enviaron al cliente, de manera automática y en formato JSON.

Ilustración 4 Clase 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)
  {
  }
}

Observe que los métodos de la Ilustración 4 (Get, Post, Put y Delete) se asignan a operaciones específicas de creación, lectura, actualización y eliminación (CRUD) y verbos HTTP que se ejecutan en la aplicación de la Tienda Windows. Esta es la belleza del marco ASP.NET Web API: redirige en forma automática los verbos HTTP que emplea el cliente directamente a los métodos que están definidos en la clase ValuesController, lo que minimiza los posibles errores de programación.

Sin necesidad de hacer nada más, el proyecto WebService está listo para funcionar. Los métodos de la clase ValuesController se documentan solos:

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

Observe que el método Get se llama cuando el cliente emite el verbo HTTP Get mediante la URL http://localhost:[puerto]/api/values. Para fines de esta demostración, el código dibuja círculos concéntricos en función de los colores devueltos desde el servicio web. Modifique el código anterior para que quede así:

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

Como podrá ver, ahora devolvemos una matriz de cadenas de diferentes colores. La aplicación de la Tienda Windows que creamos representará estas cadenas como colores reales; específicamente, como círculos concéntricos coloreados.

Pruebas en el explorador

Siempre conviene probar el servicio web antes de crear la aplicación para la Tienda Windows. Puede usar el explorador que quiera.

Para probar el servicio web en un explorador, realice los siguientes pasos:

  1. En Visual Studio, haga clic en el menú Depurar y elija Iniciar depuración.
  2. Debería ver la página de inicio predeterminada que se muestra en la Ilustración 5.
  3. Tenga en cuenta que Visual Studio elige un puerto arbitrario, en este caso 58428. En su instancia, el puerto probablemente será otro.
  4. Como recordará, debemos agregar “api/values” a la URL para poder llamar el método Get, lo que significa que la URL final debe ser (en este caso) http://localhost:58428/api/values. Esta es una característica integrada cuando Visual Studio crea el proyecto. Puede cambiar esta asignación para adaptarla a sus necesidades.
  5. Vaya a la barra de direcciones de Visual Studio y escriba http://localhost:58428/api/values. No olvide reemplazar el número del puerto por su propio valor.
  6. Aparecerá un cuadro de diálogo parecido al que vemos en la Ilustración 6.
  7. Haga clic en el botón Guardar y luego abra values.json en el Bloc de notas.
  8. El Bloc de notas mostrará los valores devueltos. En la Ilustración 7 vemos que los datos devueltos se encuentran automáticamente en formato JSON, cortesía de la API del marco ASP.NET Web API.

Using Internet Explorer to Test the Web Service
Ilustración 5 Prueba del servicio web en Internet Explorer

Internet Explorer Dialog Box
Ilustración 6 Cuadro de diálogo de Internet Explorer

The JSON Data Returned by the Web Service
Ilustración 7 Datos en JSON devueltos por el servicio web

Windows 8 hace su apariencia

Ahora que tuvimos éxito con la devolución de datos en JSON desde nuestro servicio web, veamos cómo consumir estos datos desde una aplicación de la Tienda Windows. El objetivo es leer los colores desde el servicio Web y dibujar los círculos concéntricos en función de los valores devueltos por el servicio web. Nuestra aplicación final para la Tienda Windows debe producir una imagen similar a la Ilustración 8. Los colores que vemos los definió el servicio web. Si este cambia los colores, la aplicación de la Tienda Windows reflejará dichos colores en los círculos concéntricos que aparecen en la Ilustración 8.

The Running Windows Store Application
Ilustración 8 Aplicación de la Tienda Windows en ejecución

Podemos crear la aplicación para la Tienda Windows en la misma solución que el proyecto del servicio web o podemos iniciar una nueva instancia de Visual Studio especialmente para el cliente de Windows 8. Como Administrador, Iniciaremos una nueva instancia de Visual Studio para la aplicación de la Tienda Windows. Para esto, siga estos pasos (ver Ilustración 9):

New Project Dialog Box
Ilustración 9 Cuadro de diálogo Nuevo proyecto

  1. Inicie una segunda instancia de Visual Studio como Administrador.
  2. Haga clic en el menú Archivo y elija Nuevo | Proyecto.
  3. Seleccione Visual C# | Tienda Windows para el tipo de plantilla.
  4. Seleccione .NET Framework 4.5 en el menú desplegable del extremo superior.
  5. Seleccione Aplicación vacía (XAML).
  6. Escriba Windows8Client como el nombre y una ubicación de su elección.
  7. Haga clic en Aceptar.

Cuando termine estos pasos, vaya al menú Ver y elija Explorador de soluciones (ver Ilustración 10), luego abra el archivo MainPage.xaml.cs.

Solution Explorer for Windows8Client
Ilustración 10 Explorador de soluciones para Windows8Client

Llamadas al servicio Web

Estamos listos para agregar el código que llamará al servicio Web desde la aplicación de la Tienda Windows. La aplicación de la Tienda Windows emitirá una solicitud web al servicio web.

Para admitir una solicitud web, modificaremos MainPage.xaml.cs de la siguiente forma:

  • Agregaremos un evento Loaded para el control de cuadrícula integrado.
  • El evento Loaded enviará una solicitud web asincrónica para llamar al servicio web. Usaremos la clase HttpClient con este fin.
  • Para convertir la cadena de colores del servicio web en un color real, agregaremos un método llamado CircleColorFromString.
  • Para dibujar los círculos concéntricos, agregaremos un método llamado AddCircle.

Realice los siguientes pasos para emitir una solicitud web al servicio web:

  1. Haga clic con el botón secundario en MainPage.xaml y elija Diseñador de vistas.
  2. Agregue GridLoadedEvent y el control Canvas, de la siguiente forma (Canvas es donde dibujaremos los círculos):
<Grid Name="maingrid"
      Background="{StaticResource
                   ApplicationPageBackgroundThemeBrush}"
      Loaded="GridLoadedEvent">
  <Canvas Name="myCanvas" Background="White"/>
</Grid>
  1.  3.   Haga doble clic en MainPage.xaml.cs. Aparece el código subyacente MainPage.xaml.cs.
  2.  4.   Para admitir los diferentes espacios de nombres que necesita el código que vamos a agregar, incluya las siguientes referencias en la parte superior 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.   Agregue las rutinas auxiliares para dibujar los círculos y analizar las cadenas de datos en JSON enviados por el servicio web. Edite el código en MainPage.xaml.cs, tal como aparece en la Ilustración 11.

Ilustración 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);
      }
    }
}

Ahora puede probar la aplicación, lo cual es bastante sencillo:

  1. Regrese al proyecto WebService en Visual Studio y seleccione Iniciar depuración en el menú Depurar.
  2. Confirme que se inicie el explorador. Ahora está listo para iniciar la aplicación Windows8Client.
  3. Regrese al proyecto Windows8Client en Visual Studio y seleccione Iniciar depuración en el menú Depurar.
  4. Confirme que aparezca la aplicación para la Tienda Windows, tal como se muestra en la Ilustración 8.

Implementación del servicio web en Windows Azure

Luego de crear y probar el servicio web en forma local, el paso lógico siguiente es implementarlo en la nube con motivos de escalabilidad. Esto nos permite variar la capacidad de proceso asignada al servicio web y su costo, a medida que aumenta o disminuye la cantidad de solicitudes desde los dispositivos con Windows 8. Visual Studio ofrece diferentes formas para implementar los proyectos de ASP.NET Web API en Windows Azure; el único requisito previo es agregar un proyecto de servicio de nube a la solución del servicio web. Siga estos pasos:

  1. Haga clic con el botón secundario en el nombre de la solución y seleccione Agregar | Nuevo proyecto.
  2. Seleccione Visual C# | Nube como la plantilla de proyecto (Ilustración 12).
  3. Seleccione .NET Framework 4 en el menú desplegable del extremo superior.
  4. Seleccione Servicio de nube de Windows Azure Visual C#.
  5. Escriba WindowsAzureCloudService como el nombre y una ubicación de su elección.
  6. Haga clic en Aceptar.
  7. Ahora vuelva al Explorador de soluciones. Busque el proyecto nuevo en la solución y haga clic con el botón secundario en el nodo Roles. Seleccione Agregar | Proyecto de rol web.
  8. Busque el proyecto WebService creado anteriormente. Selecciónelo y haga clic en Aceptar.
  9. El proyecto WebService ahora debe aparecer bajo el nodo Roles, tal como se muestra en la Ilustración 13.
  10. Puede cambiar diferentes parámetros de implementación para el rol de WebService antes de implementarlo en Windows Azure como, por ejemplo, el tamaño de la máquina virtual (VM) donde se hospedará y la cantidad de instancias que lo admiten. Para revisar estos parámetros, haga clic con el botón secundario en el nodo WebService y seleccione Propiedades. Aparece un cuadro de diálogo similar al que se muestra en la Ilustración 14. Preste mucha atención a los parámetros de recuento de instancias y de tamaño de la máquina virtual, que determinarán la tasa de consumo cuando se implemente el rol. Para informarse sobre los precios de Windows Azure para las instancias de proceso, visite bit.ly/SnLj68.
  11. Haga clic con el botón secundario en el proyecto Windows­AzureCloudService y seleccione Paquete. Conserve los valores predeterminados para los parámetros de configuración de Servicio y Compilación y haga clic en el botón Empaquetar. Esta acción generará dos archivos: Windows­AzureCloudService.cspkg y ServiceConfiguration.Cloud.cscfg. Estos son necesarios para crear un servicio en nube en Windows Azure mediante el portal. Recuerde que los proyectos también se pueden implementar directamente desde Visual Studio, pero aquí no tocaremos ese método.
  12. Inicie sesión en su cuenta Windows Azure al abrir la URL manage.windowsazure.com y luego siga las instrucciones en bit.ly/R15VNj para crear un servicio en nube nuevo y cargar los dos archivos generados.
  13. Según el nombre que usa para el servicio en nube, su nuevo servicio ASP.NET Web API estará disponible en http://{nomnbreservicioennube}.cloudapp.net/api/values.
  14. Apunte la aplicación de la Tienda Windows a esta URL y estará listo.

Adding a Cloud Service Project to the Web Service Solution
Ilustración 12 Adición de un proyecto de servicio en nube a la solución del servicio web

Adding the WebService Project to a Cloud Service Role
Ilustración 13 Adición del proyecto WebService a un rol de servicio en nube

Windows Azure Deployment Properties for the WebService Role
Ilustración 14 Propiedades de la implementación de Windows Azure para el rol de WebService

En la nube

Gracias a ASP.NET Web API, resulta extremadamente fácil crear aplicaciones que usen comandos REST en forma asincrónica para consumir e ingerir datos mediante servicios web. Visual Studio 2012 y las bibliotecas incluidas con .NET Framework 4.5 facilitan en gran medida la emisión de solicitudes web asincrónicas a un servicio web. Por último, pero no por ello menos importante, la integración del entorno de desarrollo con Windows Azure permite que los desarrolladores implementen rápidamente la parte de los servicios en la nube, al aprovechar la escalabilidad y las capacidades de infraestructura mundial de la nube.

Bruno Terkaly es evangelizador desarrollador para Microsoft. La profundidad de sus conocimientos los debe a años de experiencia en el sector, al escribir código con diversas plataformas, lenguajes, marcos, SDK, bibliotecas y API. Se dedica a programar, publicar en su blog y a realizar presentaciones en vivo sobre la creación de aplicaciones basadas en nube, específicamente con la plataforma Windows Azure.

Ricardo Villalobos es un arquitecto de software avezado con más de 15 años de experiencia en el diseño y la creación de aplicaciones para las empresas del sector de la administración de cadenas de suministros. Ha adquirido varias certificaciones técnicas, y tiene una maestría en Administración de Negocios de la Universidad de Dallas. Trabaja como arquitecto de nube en el grupo de incubación Windows Azure CSV para Microsoft.

Gracias al siguiente experto técnico por su ayuda en la revisión de este artículo: Robert Green