Windows Azure Insider

Windows 8 e Windows Azure: Convergência na Nuvem

Bruno Terkaly
Ricardo Villalobos

Baixar o código de exemplo

Não resta dúvida os que desenvolvedores de software de hoje devem adotar tecnologias de nuvem para criar aplicativos da Windows Store atraentes — o número grande de usuários e dispositivos tornam isso acéfalo. Mais de um terço da população da Terra está conectado à Internet e agora existem mais dispositivos acessando recursos online do que pessoas. Além disso, o tráfego de dados móveis cresceu 2,3 vezes em 2011, mais que o dobro pelo quarto ano consecutivo. Não importa o seu ponto de vista, você acaba tendo uma conclusão muito simples: Aplicativos modernos exigem conectividade com a nuvem.

A proposta de valor da computação em nuvem é convincente. A maioria dos observadores apontam para a escalabilidade sob demanda e o fato de que você só paga pelo que você usa como motivadores da adoção da nuvem. No entanto, a nuvem realmente fornece uma tecnologia essencial no mundo dos vários dispositivos conectados. Os usuários de aplicativos da Windows Store, propensos a usar vários aplicativos e dispositivos, esperam que seus dados estejam centralmente localizados. Se eles salvarem dados em um dispositivo com Windows Phone, eles também deve estar imediatamente disponíveis em seus tablets ou qualquer outro dispositivo, incluindo dispositivos com Android e iOS.

Windows Azure é a plataforma de nuvem pública da Microsoft, que oferece o maior alcance global e o back-end de serviço mais completo. Ele suporta o uso de várias opções de sistema operacional, linguagem, banco de dados e ferramenta, fornecendo patching automático de sistemas operacionais e serviços. A infraestrutura de rede subjacente oferece balanceamento automático de carga e resiliência a falhas de hardware. Por fim, mas não menos importante, o Windows Azure suporta um modelo de implantação que permite que os desenvolvedores atualizem aplicativos sem tempo de inatividade.

O aplicativo de serviço Web apresentado neste artigo pode ser hospedado em um ou mais datacenters de nuvem global da Microsoft em questão de minutos. Se você for criar um aplicativo de lista de tarefas, um jogo ou até mesmo um aplicativo de contabilidade de linha de negócios, poderá usar as técnicas deste artigo para oferecer suporte a cenários que dependem tanto clientes conectados permanente ou ocasionalmente.

O que você aprenderá

Em primeiro lugar, descreveremos como criar um simples serviço de hospedado em nuvem no Windows Azure para oferecer suporte a clientes assíncronos, independentemente do tipo de dispositivo em que será executado — celular, slate, tablet, laptop ou desktop. Em seguida, mostraremos como é fácil chamar um serviço Web de um aplicativo da Windows Store para recuperar dados.

Em geral, há duas maneiras de transmitir dados para um aplicativo da Windows Store. Este artigo focará na abordagem "pull" de recuperação de dados, onde o aplicativo precisa estar em execução e as solicitações de dados são emitidas por meio de chamadas HTTP Web. A abordagem pull normalmente utiliza padrões abertos (HTTP, JSON, REST) e a maioria, se não todos, dos tipos de dispositivos de diferentes fornecedores podem usá-la.

Não falaremos sobre a abordagem “push” neste artigo. Essa abordagem baseia-se no Windows Push Notification Services (WNS), que permite que serviços hospedados em nuvem enviem dados não solicitados para um aplicativo da Windows Store. Tais aplicativos não precisam ser executados em primeiro plano e não há garantia de entrega de mensagens. Para obter informações sobre como usar o WNS, consulte bit.ly/RSXomc.

Dois projetos

A solução completa requer dois componentes principais: um projeto de serviços Web ou de servidor (que pode ser implantado no local ou no Windows Azure) e um projeto de cliente, que consiste em um aplicativo da Windows Store baseado na nova interface do usuário do Windows. Ambos os projetos podem ser criados com o Visual Studio 2012.

Basicamente, existem duas opções para criar o projeto de serviços Web: Windows Communication Foundation (WCF) ou API Web do ASP.NET, que faz parte do ASP.NET MVC 4. Como a exposição de serviços via WCF é amplamente documentada, para o nosso cenário, usaremos a abordagem mais moderna que a API Web do ASP.NET oferece, abraçando verdadeiramente os conceitos HTTP (URIs e verbos). Além disso, essa estrutura permite criar serviços que utilizam recursos HTTP mais avançados, como cabeçalhos de solicitação/resposta e construções de hipermídia.

Ambos os projetos podem ser testados em uma única máquina durante o desenvolvimento. Você pode baixar a solução completa do site archive.msdn.microsoft.com/mag201210AzureInsider.

Do que você precisa

O ponto de partida mais óbvio é que o Windows 8 é necessário, e não deve ser nenhuma surpresa que os projetos devem ser criados com a versão mais recente do Visual Studio, que pode ser baixada do site bit.ly/win8devtools.

Para o projeto de servidor, você precisará do SDK mais recente do Windows Azure, que contém os assemblies e as ferramentas necessários para a criação de projetos de nuvem no Visual Studio. Você pode baixar esse SDK e as ferramentas relacionadas do site bit.ly/NlB5OB. Você também vai precisar de uma conta do Windows Azure. Uma avaliação gratuita pode ser baixada do site bit.ly/azuretestdrive.

Historicamente, o SOAP era usado para arquitetar serviços Web, mas este artigo focará em arquiteturas estilo REST. Em suma, REST é mais fácil de usar, carrega uma carga menor e não requer ferramentas especiais.

Os desenvolvedores também devem escolher um formato de troca de dados na criação de serviços Web. Essa escolha é geralmente entre JSON e XML. JSON usa um formato de dados compacto baseado na linguagem JavaScript. Ele é muitas vezes referido como a "alternativa magra" do XML porque tem uma gramática muito menor e é mapeado diretamente às estruturas de dados usadas em aplicativos cliente. Usaremos dados JSON em nossos exemplos.

Com essas decisões tomadas, estamos prontos para criar nosso serviço Web. Nosso objetivo é criar um serviço baseado em HTTP que atinja a mais ampla variedade possível de clientes, incluindo navegadores e dispositivos móveis.

Criando o serviço Web

Vamos começar iniciando o Visual Studio 2012 como Administrador. Estas são as etapas para criar o serviço Web do servidor, usando a API Web do ASP.NET MVC 4:

  1. Clique no menu Arquivo e selecione Novo | Projeto (veja a Figura 1).
  2. Selecione Visual C# | Web como tipo de modelo.
  3. Selecione .NET Framework 4 no menu suspenso da parte superior.
  4. Selecione Aplicativo Web ASP.NET MVC 4.
  5. Digite o nome WebService e um local de sua preferência.
  6. Clique em OK.
  7. O assistente irá pedir para selecionar o modelo de projeto. Escolha a API Web e certifique-se de que o mecanismo de exibição seja Razor (padrão), como mostrado na Figura 2.
  8. Uma variedade de arquivos será gerada pelo Visual Studio. Isso pode ser desgastante, mas nós precisaremos nos preocupar somente com dois arquivos, como mostrado na Figura 3.


Figura 1 Caixa de diálogo Novo Projeto


Figura 2 Caixa de diálogo Modelo de Projeto


Figura 3 Gerenciador de Soluções do WebService

ValuesController.cs é importante porque contém o código que será executado quando o cliente Windows 8 enviar uma solicitação HTTP ao serviço Web. É aí que vamos adicionar código para retornar os dados JSON exigidos pelo aplicativo da Windows Store. A classe ValuesController, mostrada na Figura 4, é gerada pelo Visual Studio e é herdada do ApiController, que retorna dados serializados e enviados ao cliente, automaticamente no formato JSON.

Figura 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)
  {
  }
}

Observe que os métodos da Figura 4 — Get, Post, Put e Delete — são mapeados para operações create, read, update e delete (CRUD) específicas e verbos HTTP executados pelo aplicativo da Windows Store. Esta é a beleza da estrutura da API Web do ASP.NET: ela direciona automaticamente os verbos HTTP usados pelo cliente diretamente para os métodos definidos na classe ValuesController, minimizando possíveis erros de programação.

Quando terminado, o projeto WebService estará pronto para execução. Os métodos da classe ValuesController são autodocumentados:

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

Observe que o método Get é chamado quando o cliente emite o verbo HTTP Get usando a URL http://localhost:[porta]/api/values. Nesta demonstração, o código desenha círculos concêntricos baseados nas cores retornadas do serviço Web. Modifique o código anterior para ter esta aparência:

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

Como você pode ver, agora retornamos uma matriz de cadeias de caracteres de várias cores. O aplicativo da Windows Store que criamos processarão essas cadeias de caracteres como cores reais, especificamente como círculos concêntricos coloridos.

Teste com um navegador

É sempre uma boa ideia testar o serviço Web antes de criar o aplicativo da Windows Store. Use o navegador de sua preferência.

Para testar o serviço Web em um navegador, execute as seguintes etapas:

  1. No Visual Studio, clique no menu Depurar e escolha Iniciar Depuração.
  2. Você deve ver a página inicial padrão, conforme mostrado na Figura 5.
  3. Observe que o Visual Studio escolhe uma porta arbitrária, neste caso 58428. A porta de que sua instância do Visual Studio usa provavelmente será diferente.
  4. Como você se lembra, precisamos adicionar "api/values" à URL para que o método Get seja chamado, o que significa que a URL final (no nosso caso) deve ser http://localhost:58428/api/values. Esse é um recurso integrado quando o Visual Studio cria seu projeto. Você pode alterar esse mapeamento de acordo com as suas necessidades.
  5. Vá até a barra de endereço do Visual Studio e digite http://localhost:58428/api/values. Lembre-se de substituir o número da porta pelo seu próprio valor.
  6. Uma caixa de diálogo aparecerá como a da Figura 6.
  7. Clique no botão Salvar e, em seguida, abra values.json no Bloco de Notas.
  8. O Bloco de Notas exibirá os valores retornados. Observe na Figura 7 que os dados retornados estão automaticamente no formato JSON, cortesia da estrutura da API Web do ASP.NET.


Figura 5 Usando o Internet Explorer para testar o serviço Web


Figura 6 Caixa de diálogo do Internet Explorer


Figura 7 Os dados JSON retornados pelo serviço Web

Digite Windows 8

Agora que já conseguimos retornar dados JSON do nosso serviço Web, vejamos como consumir dados de um aplicativo da Windows Store. O objetivo é ler as cores do serviço Web e desenhar os círculos concêntricos, com base nos valores retornados pelo serviço Web. Nosso aplicativo final da Windows Store deve produzir uma imagem semelhante à da Figure 8. As cores que você vê foram definidas pelo serviço Web. Se o serviço Web alterar as cores retornadas, o aplicativo da Windows Store refletiria essas cores como os círculos concêntricos que você vê na Figura 8.


Figura 8 A execução do aplicativo da Windows Store

Você pode criar o aplicativo da Windows Store na mesma solução que o projeto de serviço Web, ou pode iniciar uma nova instância do Visual Studio especificamente para o cliente Windows 8. Vamos iniciar uma nova instância do Visual Studio como Administrador para o aplicativo da Windows Store. Para fazer isso, diga estas etapas (consulte Figura 9):


Figura 9 Caixa de diálogo Novo Projeto

  1. Inicie uma segunda instância do Visual Studio como Administrador.
  2. Clique no menu Arquivo e selecione Novo | Projeto.
  3. Selecione Visual C# | Windows Store como tipo de modelo.
  4. Selecione .NET Framework 4.5 no menu suspenso da parte superior.
  5. Selecione Aplicativo em Branco (XAML).
  6. Digite o nome Windows8Client e um local de sua preferência.
  7. Clique em OK.

Quando você terminar estas etapas, vá até o menu Exibir e escolha Gerenciador de Soluções (veja a Figura 10) e abra o arquivo MainPage.xaml.cs.


Figura 10 Gerenciador de Soluções do Windows8Client

Chamada para o serviço Web

Estamos prontos para adicionar o código que irá chamar o serviço Web do aplicativo da Windows Store. O aplicativo da Windows Store emitirá uma solicitação da Web para o serviço Web.

Para oferecer suporte a uma solicitação da Web, o MainPage.xaml.cs será modificado como segue:

  • Será adicionado um evento Loaded para o controle Grid integrado.
  • O evento Loaded apresentará uma solicitação da Web assíncrona para chamar o serviço Web. A classe HttpClient será usada para essa finalidade.
  • Para converter a cadeia de caracteres do serviço Web em uma cor real, será adicionado um método chamado CircleColorFromString.
  • Para desenhar os círculos concêntricos, vamos adicionar um método chamado AddCircle.

Execute as seguintes etapas para emitir uma solicitação da Web ao serviço Web:

  1. Clique com o botão direito do mouse em MainPage.xaml e escolha Exibir Designer.
  2. Adicione o GridLoadedEvent e o controle Canvas como segue (vamos desenhar os círculos na tela):
<Grid Name="maingrid"
      Background="{StaticResource
                   ApplicationPageBackgroundThemeBrush}"
      Loaded="GridLoadedEvent">
  <Canvas Name="myCanvas" Background="White"/>
</Grid>
  1.  3.   Clique duas vezes em MainPage.xaml.cs. O codebehind para MainPage.xaml.cs será exibido.
  2.  4.   Para oferecer suporte a namespaces diferentes exigidos pelo código a ser adicionado, inclua as seguintes referências no início do 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.   Adicione as rotinas de suporte para desenhar círculos e analisar os dados da cadeia de caracteres JSON enviados pelo serviço Web. Edite o código em MainPage.xaml.cs como mostrado na Figura 11.

Figura 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);
      }
    }
}

Agora teste o aplicativo, o que é bastante simples:

  1. Retorne ao projeto WebService no Visual Studio e selecione Iniciar Depuração no menu Depurar.
  2. Verifique se que o navegador é iniciado. Agora você está pronto para iniciar o aplicativo Windows8Client.
  3. Retorne ao projeto Windows8Client no Visual Studio e selecione Iniciar Depuração no menu Depurar.
  4. Verifique se o aplicativo da Windows Store aparece, como mostrado na Figura 8.

Implantando o serviço Web no Windows Azure

Uma vez que o serviço Web estiver criado e testado localmente, a próxima etapa lógica é implantá-lo na nuvem para fins de escalabilidade. Isso permite variar a capacidade de computação atribuída ao serviço Web — e o seu custo — conforme o número de solicitações de dispositivos do Windows 8 aumenta ou diminui. O Visual Studio oferece diferentes maneiras de implantar projetos de API Web do ASP.NET para o Windows Azure, e o único requisito é adicionar um projeto de serviço de nuvem à solução de serviço Web. Siga estas etapas:

  1. Clique com o botão direito no nome da solução e selecione Adicionar | Novo projeto.
  2. Selecione Visual C# | Nuvem como modelo de projeto (Figura 12).
  3. Selecione .NET Framework 4 no menu suspenso da parte superior.
  4. Selecione Windows Azure Cloud Service Visual C#.
  5. Digite o nome WindowsAzureCloudService e o local de sua preferência.
  6. Clique em OK.
  7. Agora retorne ao Gerenciador de Soluções. Localize o novo projeto na solução e clique com o botão direito no nó Funções. Selecione Adicionar | Projeto de Função Web.
  8. Localize o projeto WebService criado anteriormente. Selecione-o e clique em OK.
  9. Agora você deve ver o projeto WebService listado sob o nó funções como mostrado na Figura 13.
  10. Você pode alterar vários parâmetros de implantação da função WebService antes de implantá-la no Windows Azure, tais como o tamanho da máquina virtual (VM) onde será hospedada e o número de instâncias de suporte. Para rever esses parâmetros, clique com o botão direito no nó Funções do WebService e selecione Propriedades. Uma caixa de diálogo com a da Figura 14 será exibida. Preste atenção especial na contagem de instâncias e nos parâmetros de tamanho da VM, que determinarão a taxa de consumo uma vez implantada a função. Para obter mais informações sobre os preços do Windows Azure para instâncias de computação, visite bit.ly/SnLj68.
  11. Clique com o botão direito no projeto WindowsAzureCloudService e selecione Pacote. Mantenha as seleções padrão para os parâmetros de configuração de serviço e compilação e clique no botão Pacote. Esta ação gera dois arquivos: WindowsAzureCloudService.cspkg e ServiceConfiguration.Cloud.cscfg, que são necessários para criar um serviço de nuvem no Windows Azure pelo portal. Note que os projetos podem ser implantados diretamente do Visual Studio, mas não usaremos essa abordagem aqui.
  12. Entre em sua conta do Windows Azure abrindo a URL manage.windowsazure.com, e siga as instruções em bit.ly/R15VNj para criar um novo serviço de nuvem e carregar os dois arquivos gerados.
  13. Dependendo do nome que você usa para o serviço de nuvem, sua nova API Web do ASP.NET estará disponível em http://{nomedoserviçodenuvem}.cloudapp.net/api/values.
  14. Aponte o aplicativo da Windows Store para essa URL, e pronto.


Figura 12 Adicionando um projeto de serviço de nuvem à solução de serviço Web


Figura 13 Adicionando o projeto WebService a uma função de serviço de nuvem


Figura 14 Propriedades de implantação do Windows Azure para a função WebService

Na nuvem

Usando a API da Web do ASP.NET, é extremamente simples oferecer suporte a aplicativos que usam assincronamente comandos REST para consumir e ingeri dados via serviços Web. O Visual Studio 2012 e as bibliotecas fornecidas com o .NET Framework 4.5 simplificam muito a emissão de solicitações assíncronas da Web para um serviço Web. Por fim, mas não menos importante, a integração do ambiente de desenvolvimento com o Windows Azure permite que os desenvolvedores implantem rapidamente a parte de serviços na nuvem, aproveitando a escalabilidade e os recursos de infraestrutura mundial que a nuvem fornece.

Bruno Terkaly é desenvolvedor e divulgador da Microsoft. Seu profundo conhecimento é fruto de anos de experiência no campo, escrevendo código com uma grande quantidade de plataformas, linguagens, estruturas, SDKs, bibliotecas e APIs. Ele passa seu tempo escrevendo código, escrevendo blogs e fazendo apresentações ao vivo sobre como criar aplicativos baseados na nuvem, especificamente usando a plataforma Windows Azure.

Ricardo Villalobos é um arquiteto de software experiente com mais de 15 anos de experiência em projeto e criação de aplicativos para empresas na indústria de gerenciamento da cadeia de suprimentos. Detentor de várias certificações técnicas, e mestre em administração pela Universidade de Dallas, ele trabalha como arquiteto de nuvem no grupo de incubação do Windows Azure CSV para a Microsoft.

Agradecemos ao seguinte especialista técnico pela revisão deste artigo: Robert Green