Mais acessados

sábado, 14 de dezembro de 2013

Windows Phone 8 - Usando HttpClient em um App WP8

O Windows Phone 8 está fenomenal, com cada vez mais recursos e aplicativos. Eu sou um usuário hardcore e considero este o sistema operacional mais estável para mobile. Um app mobile precisa acessar o mundo externo de alguma forma, seja para consultar dados em um serviço ou mesmo enviar informações que serão persistidas em algum lugar. Pensando nisso, foi criado o HttpClient, que facilita a vida de quem precisa acessar Http, como Windows Azure Mobile Services ou consumir Restful services feitos em Web API, por exemplo.

Instalando o HttpClient

O HttpClient está localizado no assembly System.Net.Http.dll e pode ser instalado via Nuget:

  1. Acesse o Nuget Package Manager para instalar um novo pacote.
  2. Procure pelo pacote Microsoft.Net.Http, ele aparecerá como a primeira opção.
  3. Dê dois cliques para instalar o pacote.
Package HttpClient
Com este pacote já é possível usar a classe em sua aplicação, mas com um porém, os métodos dessa classe no WP8 não tem acesso a 100% dos recursos async, o que nos leva a outro passo :).

Instalando o Microsoft Async

Para que os projetos WP8 façam uso de async/await é necessário instalar um pacote Nuget que adiciona métodos extendidos para os tipos que acessam recursos de rede, como por exemplo, o HttpClient.

Para instalar o Microsoft Async:
  1. Acesse o Nuget Package Manager para instalar um novo pacote.
  2. Procure pelo pacote Microsoft Async, ele aparecerá como a primeira opção.
  3. Dê dois cliques para instalar o pacote.
Package com extension method para networking types
Com esse pacote instalado é possível usar o HttpClient com todos os recursos modernos fornecidos pelo .NET.

Exemplo simples de uso do HttpClient

Para usar o HttpClient adicione a referência em sua classe para System.Net.Http. No exemplo abaixo, existe um simples botão, que faz uma chamada Http e coloca o body da request em um textbox.

private async void Button_Click(object sender, RoutedEventArgs e)
{
 HttpClient client = new HttpClient();

 try
 {
  HttpResponseMessage response = await client.GetAsync("http://www.google.com/");
  response.EnsureSuccessStatusCode();
  string responseBody = await response.Content.ReadAsStringAsync();

  this.txtResponse.Text = responseBody;
 }
 catch (HttpRequestException ex)
 {
  throw ex;
 }
}

Veja o uso de async/await sem maiores problemas.

    App usando HttpClient
Ao clicar no botão, é chamado o evento Button_Click, perceba que a requisição retorna status 200.

Código do evento do botão

Como a requisição é para www.google.com, a resposta será o HTML da página, como pode ser visto no textbox:

Textbox é preenchido com o resultado da requisição

Finalizando

O HttpClient está estável e muito fácil de usar. Um problema que tive durante os testes foi a falta de conexão com a internet no emulador do Windows Phone 8 que resolvi usando este post do stackoverflow:
Para maiores referências de como usar o HttpClient nas sua aplicações, um bom lugar para começar é o link abaixo:
Espero que tenham gostado da dica. Bom final de semana para todos!

segunda-feira, 30 de setembro de 2013

ASP.NET MVC - Novidades do ASP.NET MVC 5

São muitas as novidades que virão com o ASP.NET MVC 5 no Visual Studio 2013. Houve uma mudança visual com novo CSS e templates de Scaffold, incorporação do Claims Security, além  da nova camada middleware OWIN. No Visual Studio 2013, a tela para criação do projeto ficou mais inflada, com várias opções de escolha para autenticação e algumas outras perfumarias.

Novo wizard para criar Web App

A tela para criação de projetos ficou um pouco diferente. Agora é possível selecionar WebForms, MVC e Web API, o que adicionará suporte ao que for selecionado. Parece que a Microsoft finalmente resolveu deixar claro que WebForms pode conviver na mesma aplicação que o MVC.


Novo Wizard para criação de Web Apps

Foi adicionado também um novo botão, em que é possível selecionar o tipo de autenticação que a aplicação irá usar.




Dentre as formas de Autenticação estão: Nenhuma, Individual, Windows e para Organizações. Esta última está diretamente ligada a outra novidade que foi adicionada, o Claim Security, que falarei mais tarde.


Novo wizard Scaffold e Bootstrap

Foi criado uma entrada de menu Scaffold para criação de Views/Controllers. Eu particularmente achei que este deviria ficar no menu principal, mas adicionaram como sub item do menu Add.

Menu Scaffold
O processo foi centralizado em um único local, parecido com um wizard de criação de projetos e soluções. Na primeira tela você seleciona o item que deseja, Controller, View, Web API.
Wizard para seleção de item de Scaffold
A próxima tela é bem parecida com as antigas, em que adiciona-se nome do arquivo, modelo, etc, sendo mais um rearranjo de layout, como por exemplo a tela de Views da figura seguinte.


Wizard criação de View
O CSS padrão agora é o Bootstrap. Uma coisa que achei estranha é que a versão do Bootstrap que vem com o template ser a 2.3.1, sendo que a de mercado já é a 3.0.0. Dado que estamos em RC, acho provável que a nova  seja adicionada ao MVC 5 Final- pelo menos espero que sim :).


CSS padrão agora é Bootstrap
Outra coisa importante é que os templates para Scaffold de View criam essas com layout todo baseado no Bootstrap, ficou muito bom!


Segurança com Claims

A segurança para o seu aplicativo agora pode ser ampliada usando Claims. Com isso é possível criar várias formas de autenticação, como os próprios profissionais do ASP.NET Team comentam, ".. é possível criar um Framework de autorização dirigido a qualquer coisa que você saiba que está associado a identidade de uma requisição que estiver sendo efetuada...".


A maior mudança está no arquivo AccountController.cs, como por exemplo, o método de login abaixo, que agora busca IdentityResult, em vez de usuários diretamente como no MVC 4:

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task Login(LoginViewModel model, string returnUrl)
{
    if (ModelState.IsValid)
    {
        // Validate the password
        IdentityResult result = await IdentityManager.Authentication.CheckPasswordAndSignInAsync(AuthenticationManager, model.UserName, model.Password, model.RememberMe);
        if (result.Success)
        {
            return RedirectToLocal(returnUrl);
        }
        else
        {
            AddErrors(result);
        }
    }

    // If we got this far, something failed, redisplay form
    return View(model);
}

Para saber mais sobre essa novidade sugiro os artigos abaixo:


    OWIN

    O OWIN Open Web Interface for .NET (OWIN) é uma camada intermediária que separa a sua aplicação do Web Server. Com isto é possível migrar facilmente um aplicativo do IIS para um serviço Windows, por exemplo.

    Você notará dois novos arquivos na soluçao, ambos com o prefixo Startup. Estes são os arquivos de configuração do OWIN.

    Arquivos de configuração do OWIN
    Para saber mais sobre o OWIN:

    Entity Framework 6

    O Entity Framework vem em uma nova versão com várias novidades, principalmente melhoria de performace e novos recursos na parte de Migrations - acho excelente esse recurso. No projeto em si a única mudança visível é adição de uma classe IdentityModels.cs.

    O Entity traz agora um contexto próprio para tratar as classes personalizadas de usuário que serão usadas com o Claims Security:


    public class ApplicationUser : User
    {  
    }
    
    public class ApplicationDbContext : IdentityDbContextWithCustomUser
    {
    }
    

    Para saber mais sobre o Entity Framework 6:

    No próximo post vou cobrir mais a fundo as novidades para Web API 2. Espero que tenham gostado! Boa semana para todos!

    domingo, 15 de setembro de 2013

    ASP.NET MVC - Web para grandes e pequenos: Part III - Ferramentas de Teste

    Desenvolvendo aplicações PC + Mobile

    Acessando a máquina de Desenvolvimento

    Nada mais útil que liberar o IIS Express da sua máquina para acesso externo. Assim, não é necessário que você publique a aplicação toda vez que queira testar diretamente nos dispositivos mobile.

    Para isso basta fazer o seguinte:
    1. Abra o arquivo de configuração do IIS Express que está em C:\Users\[Nome do usuário]\Documents\IISExpress\config\applicationhost.config
    2. Neste arquivo procure pelo nome da aplicação e no binds adicione o ip da sua máquina . A configuração do meu está assim:
    • <binding protocol="http" bindingInformation=":[porta]:[ip] />
    IIS Express - Exemplo de applicationhost.config 
    Agora é necessário reservar o seu endereço no windows, para isso execute o comando no CMD como administrador:
    • netsh http add urlacl url=http://[ip]:[porta]/ user=everyone
    Além disso, se você estiver rodando algum firewall de terceiro ou o próprio firewall do Windows é necessário liberar esta porta para acesso externo, logo siga o link abaixo da própria Microsoft, e em caso de outros firewalls procure no site do fabricante.

    Plugins para Browser

    Esse método é o mais simples e ajuda a filtrar a maioria dos erros que podem ser encontrados em JavaScript e CSS, dado que você terá acesso à consoles poderosos como o do Chrome para avaliar seu aplicativo.

    Existem uma gama de extensões para isso, eu particularmente gosto mais do Mobile/RWD Tester, que é simples e capaz de simular os dispositivos mais variados.

    No Google Chrome faça o seguinte:
    1. Configurações->Extensões->Obter Extenções
    2. Na caixa de busca digite Mobile/RWD Tester
    3. Clique no registro de mesmo nome e adicione ao Chrome
    Aparecerá um ícone perto da barra de endereços, em que é possível selecionar vários dispositivos, inclusive a orientação deste:

    Mobile/RWD Teste no Chrome
    Basta selecionar o dispositivo que ele abrirá no tamanho compatível com este.
    Iphone5 Selecionado
    A mágica desta extensão está no User-Agent. Ele injeta no cabeçalho da requisição um User-Agent igual ao do Iphone 5, logo nossa aplicação vai retornar a View certa para o browser, que além disso vai apresentar a dimensão do aparelho.

    Este teste não deve ser o único meio de testar, dado que apenas simulamos a tela e não temos acesso ao touch do dispositivo, por exemplo, que deve ser feito para verificar a usabilidade. 

    Além disso, o browser é de um PC, isso não garante nada o funcionamento total no browser mobile.

    Virtual Machines

    É necessário renderizar a página nos mais variados browsers mobiles, para que seja garantido que tudo funcionará. Se você não tem todos os dispositivos a mão para testar em um por um, máquinas virtuais resolvem o problema.

    Existe um serviço online chamado Browserstack. É pago, mas indispensável para garantir qualidade, que é o foco para um produto de sucesso. Há uma conta gratuita trial que permite 28 minutos de teste.

    Para instalar:
    1. No Visual Studio vá em Tools->Extensions and Updates
    2. Selecione Online e digite Browserstack na caixa de pesquisa
    3. Instale a extensão e Reinicie Visual Studio
    Instalando Browserstack
    Vai ficar disponível na lista que contém os browsers o Browserstack.

    Browserstack no Visual Studio
    Iniciando a aplicação com o Browserstack, uma lista com sistema operacional e dispositivos é exibida:

    Browserstack Lista de dispositivos
    O browser padrão é aberto diretamente no site do Browserstack. Suas credenciais de loging serão exigidas. Após autenticar uma máquina virtual é disponibilizada exatamente com o dispositivo que você escolheu.

    Browserstack - Galaxy SIII
    Outra possibilidade seria instalar várias máquinas virtuais, Android e Apple em seu pc e usá-las, mas isso foge um pouco do nosso contexto, então, "google it". (Dica: A do Windows Phone 7/8 já fica disponível quando instalamos a WIndows Phone SDK :D)

    Fiddler

    O Feddler é um fantástico Web Debugger feito pela Telerik e disponibilizado gratuitamente. Com ele podemos escutar as requisições HTTP e saber se algo está dando errado. É muito útil quando estamos testando nossa aplicação na máquina de desenvolvimento ou produção.

    O que você deve fazer então é configurá-lo como proxy em sua máquina e então colocar o dispositivo mobile na mesma rede apontando para este proxy.

    Para configurar o Feddler para ser um proxy:
    1. Abra o Feddler vá em Tools->Feddler Options
    2. Selecione a aba Connections
    3. Coloque a porta, a padrão do Feddler é a 8888, e marque a opção Allow remote computers to connect
    Feddler - Configuração como Proxy
    Você deve configurar seu smartphone/tablet com o IP da máquina em que está o Feddle e a porta na conexão. Eu não vou abordar isso aqui porque cada dispositivo tem uma forma de configuração diferente, consulte a do seu.

    O que você ganha com isso? Um sistema para mobile para ser eficiente terá várias chamadas Ajax. Digamos que você vai testar diretamente o aplicativo em um smartphone, por exemplo. Se algo estiver dando errado é possível ver se há requisições, quais foram as respostas e atuar para solucionar o problema.

    Final

    Espero que tenham gostado da série. O mundo hoje é mobile. Saber zilhões de frameworks para plataformas específicas não é o caminho. Escrever para web é HTML5, CSS3 e JavaScript, aplicação em cloud e não um aplicativo para plataforma X. Como o próprio Fernando Martin Figueira da Microsoft falou:

    “Muitas vezes vejo programadores dividirem-se nos segmentos web, mobile e cloud computing, enquanto as novas plataformas de desenvolvimento se esforçam para fazer justamente o oposto, oferecendo uma experiência integrada e uma plataforma que não exija conhecimento específico. “

    quinta-feira, 5 de setembro de 2013

    ASP.NET MVC - Web para grandes e pequenos: Part II - Suportando PCs, Celulares e Tablets

    Desenvolvendo aplicações PC + Mobile

    BundleConfig para Mobile

    Dado que aplicativo será dividido em dois mundos, nada mais justo que separar as configurações. O BundleConfig já vem como padrão no projeto ASP.NET MVC. Neste concentram-se os CSS e JavaScripts para que sejam enviados para o browser em blocos, reduzindo o número de requisições e também o tamanho. O André Paulovich, MVP em ASP.NET fez um post detalhado sobre Técnicas de Bundling em ASP.NET.

    App_Start\BundleConfigMobile.cs

    Perceba que os arquivos que escolhi são os ".min". Estes já são a versão minimizada, muito menos Kbytes que os originais. Ideal para mobile, menos consumo de banda.

    Em verde está uma chamada importante. Por padrão o BundleCollection está configurado para ignorar esses arquivos, você tem que limpar a IgnoreList ou eles serão descartados.

    DisplayModeProvider e User-Agent

    Para que sua aplicação consiga identificar qual View renderizar quando é feita uma requisição é usado o User-Agent, que carrega no cabeçalho HTTP uma série de informações como OS, nome do browser, engine do browser, dentre outras informações sobre o dispositivo que está acessando o site.

    Exemplo de Requisição e User-Agent

    Usando User-Agent é possível criar DefaultDisplayMode, que falam qual será a View que a View Engine deve enviar de volta para o usuário.

    Então, crie um DisplayModeProviderConfig na pasta App_Start que encapsulará essa lógica.

    App_Start\DisplayModeProviderConfig.cs

    DefaultDisplayMode recebe como parâmetro uma string. Esta string será injetada pela View Engine no caminho dos arquivos, logo, se você acessar por smartphone o Index, ele procurará por Index.Phone.cshtml nas pastas das Views e se encontrar retornará esta para ser renderizada e enviada como resposta para o browser do usuário. 

    O processo bem simplificado do ciclo está representado abaixo:
    O ContextCondition aceita valor do tipo bool. A função GetDeviceType procura no User-Agent da requisição e retorna se é phone, tablet ou desktop quem está fazendo o acesso. Colocando ContextCondition = true fará com que este DefaultDisplayMode deva ser escolhido.


    Existem várias listas na internet com User-Agente, veja por exemplo a string iphone, que é enviada na requisição sinalizando acesso pelo aparelho da apple. A lista é bem extensa, cobri apenas nesse exemplo os dispositivos mais usados.

    Layout e Views

    Agora que já empacotou o JavaScript + CSS, já sabe como identificar qual o dispositivo está acessando e o como fazer o ASP.NET escolher a View certa, faltam as próprias Views.

    Estrutura com os arquivos por tipo de dispositivo

    Como havia dito antes, o nome que passamos como parâmetro no DefaultDisplayMode é o complemento que você deve colocar no nome de suas Views. Logo, se você passou Phone, todos seus arquivos para Smartphone tem que ser desse padrão {Nome}.Phone.cshtml.

    Outra mudança importante é no ViewStart, em que você deve adicionar condicionais para que o Layout correto seja passado, assim não é preciso incluir manualmente em cada View específica.

    Views\ViewStart.cshtml

    Nas Views Mobile deve ser adicionado o Bundle correto como abaixo:

    Views\Layout.Phone.cshtml

    Adicionando Configs ao Global.asax

    Para finalizar essa parte, é necessário adicionar nossas novas configurações ao Global.asax.

    Global.asax

    No próximo post o foco vai ser em ferramentas para testar sua aplicação. Fiquem ligados =D.



    Eu desenvolvi uma espécie de Projeto Jump Start, que ainda está incompleto, mas já contém todo isso que falei até agora. Ele está no GitHub, usem e abusem =D.

    quarta-feira, 4 de setembro de 2013

    ASP.NET MVC - Web para grandes e pequenos: Part I - Introdução


    Desenvolvendo aplicações PC + Mobile

    Introdução

    Cada vez mais se faz necessário desenvolver aplicações que suportem acessos por meio de Smartphones e Tablets. Atualmente, 18% de todo o tráfego de internet é feito por meio de dispositivos móveis, segundo pesquisa realizada pelo site americano mashable.com.

    Disponibilizar ferramentas gerenciais de BI e relatórios para tomada de decisões tornou-se crucial em um mercado tão competitivo. Além de serviços de e-commerce, informações, etc, para serem acessados de qualquer lugar a qualquer hora.

    O ASP.NET MVC provê ferramentas de alto nível e com o que há de mais novo no mercado para criação de aplicações deste tipo.

    Nesta série de três artigos, falarei como desenvolver aplicativos que extrapolem o mundo dos PCs, e que proporcionem uma usabilidade incrível para o usuário. Abordarei também técnicas e ferramentas para testar sua aplicação.

    Design Responsivo x Design Específico

    O Design Responsivo é feito por meio de media queries e CSS facilitam a vida quando precisamos que nossas aplicações se adaptem a diversos formatos de tela. Porém, nem tudo são flores, porque o CSS somente esconde, redimensiona e reorganiza o layout para caber na tela.


    Todo o conteúdo HTML vai sempre para o cliente, o que é um problema, dado que na maioria das vezes o acesso por dispositivos móveis é feito por redes de velocidade inferior ao que temos em computadores. 

    Existem também limitações de recursos de hardware e do próprio browser dos Smartphones e Tablets (compatibilidade dos browsers mobile: mobilehtml5.org/ e jquerymobile.com/gbs/).

    Para gastar o mínimo de banda, dar o máximo experiência ao usuário e facilidade de desenvolvimento, o ideal é usar o Design Específico - o que vou focar nessa série de artigos. 



    Neste caso, cada dispositivo terá seu próprio Layout e Views específicas que se adaptem melhor a tela do alvo, exibindo apenas informações mais prioritárias.



    Mas, isso também nos traz problemas, porque temos de duplicar código, nesse caso, teremos três Views para cada recurso para o usuário, o que dificulta bastante a manutenção, 

    Porém fará um cliente do outro lado da tela muito satisfeito em usar sua aplicação em qualquer lugar.

    Resumindo:

    Design Responsivo 
    • Fácil implementar 
    • Causa uso excessivo de banda
    • Fácil de manter
    • Experiência moderada de uso para o usuário

    Design Específico
    • Fácil implementar
    • Reduz muito uso de banda
    • Difícil de manter
    • Experiência de uso com nível de excelência para o usuário
    No próximo post mostrarei como identificar o dispositivo que o usuário está usando para acesso e exibir a View correta para este.

    sexta-feira, 30 de agosto de 2013

    ASP.NET MVC - Postando Listas ou Coleções de objetos sem alterar o ModelBinder padrão

    Uma das maiores mudanças ocorridas no ASP.NET MVC desde a sua criação, pelo menos em minha opinião, foi a incorporação do ModelBinder. O ModelBinder é responsável pela construção do modelo no server baseado no parâmetro da Action e os nomes dos inputs que foram postados em um formulário. Dessa forma, não é preciso iterar sobre um FormCollection para recuperar as informações enviadas, basta apenas colocar como parâmetro o modelo que deseja receber. Neste breve post vou mostrar como enviar uma coleção qualquer para o servidor sem ter que alterar o ModelBinder padrão do ASP.NET MVC


    O problema

    Quando criamos um formulário, os HtmlHelpers cuidam do trabalho pesado e já constroem automaticamente todos os atributos necessários nos inputs Html. O principal atributo é o name, que é usado pelo ModelBinder para colocar o valor na propriedade certa quanto o formulário é postado para o server.


    Esse attribute name vem direto da Lambda Expression que passamos. Por exemplo, ao criamos um formulário com uma lista usando o foreach , o body da Lambda Exmpression é usado para o name, repare no HtmlHelper e HTML gerado:


    View/Task/UpdateMany.cshtml

    Html gerado

    Isso está errado, quando estamos falando de Listas. O ModelBinder não entenderá que o que será postado é uma coleção de objetos e não conseguirá reconstruir essa lista de novo no server, resultado, você terá um null como abaixo:

    Controllers/Task.cs

    A solução

    Para fazer funcionar basta alterar o foreach por um for, assim os HtmlHelpers vão criar a coisa certa, como abaixo:


    View/Task/UpdateMany.cshtml

    Html gerado

    Veja que agora o name está diferente, parece com um índice de um Array. Quando o form for postado o ModelBinder vai identificar esse padrão dentro da request e reconstruir o formulário como se fosse uma lista, logo você receberá a coisa certa no server.

    Controllers/Task.cs

    Quando for criar qualquer tipo de formulário com lista, preocupe-se então com o name, mesmo se não estiver usando os HtmlHelpers use sempre esse padrão que o ModelBinder fará todo o trabalho duro para você.

    Espero que tenham gostado do post. O exemplo completo pode ser baixado aqui.

    Referências:

    quarta-feira, 21 de agosto de 2013

    ASP.NET MVC - Validação de Datas sem complicação, JQuery Validation + JQuery.Globalize

    Recentemente um amigo que começou a desenvolver em um projeto em ASP.NET MVC questionou a respeito da validação de datas. A validação sempre falha em server e client se você usar o campo do tipo DateTime e as DataAnnotations que o MVC traz. Como "paliativo" o pessoal usa um campo string e RegularExpressionAttribute, depois transfere esse valor para o campo DateTime original.


    Data Válida, mas falha.



    Porém, isso não é necessário, o que acontece é um problema com o localization do JQuery Val que não consegue validar o formato dd/MM/yyyy sem uma "ajuda". Neste post vou mostrar como concertar isso.


    Instalando jquery.globalize

    O jquery globalize é uma biblioteca de globalization e localization. Vou usá-la para parser da data que será validada.

    Para instalar:

    1. Clique com botão direito na Solução->Manage Nuget Packages
    2. Vá em Online e digite na caixa Jquery Globalize


    Agora é necessário adicionar o  jquery.globalize ao nosso BundleConfig

    App_Start/BundleConfig.cs

    Modificando a função de validação de datas do Jquery Val

    Agora vem a parte "hardcoding". Com o jquery globalize vamos usar a função parseDate para validar nosso formato.

    Views/Task/Create.cshtml

    Na função acima estou alterando o método date para que a validação ocorra da forma que eu quero. Veja em Azul o formato que especifiquei. Logo, qualquer coisa diferente disso que for digitado em um campo com validação para data vai falhar.

    O ideal é que você crie um arquivo de Script e coloque uma função anônima dentro para reutilizar.

    Exemplo

    Agora no ASP.NET é possível usar o seu campo com DateTime, sem problemas.

    Models/Task.cs

    View/Task/Create.cshtml

    O campo pode ser criado normalmente. Quando você cria o campo como DateTime, por baixo dos panos o Html Helper já coloca que o campo é para ser validado como Data.

    HTML Resultado para o Campo DateTime

    Agora a validação funciona:

    Espero que tenham gostado, o código fonte do exemplo pode ser baixado aqui.