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

Desenvolvendo aplicações PC + Mobile

• Part I - Introdução
• Part II - Suportando PCs, Celulares e Tablets
• Part III - Ferramentas de Teste

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

O 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.

• Link do GitHub: AspMvcMobileTemplate