Desenvolvendo Universal Apps com HTML/WinJS para Windows 8.1 – Parte 1

Olá pessoal! Esse é o primeiro de uma série de posts em que iremos abordar o desenvolvimento de Universal Apps (aplicativos universais) para Windows (Windows 8.1 e Windows Phone 8.1) usando HTML/WinJS. E por que este tema?

Na verdade existem muitas referências na Web que abordam o desenvolvimento de Universal Apps usando C# e não muitas para HTML/Javascript.
Além disso, no caso do HTML/Javascript normalmente vemos exemplos para Windows 8.1 e então temos que adaptá-los para Windows Phone 8.1 ou Universal Apps.

E é ai que entra essa série de posts. Como lidamos com o desenvolvimento de Universal Apps em HTML/Javascript considerando as diferenças existentes entre Windows e Windows Phone? Como adaptamos um código Windows 8.1 para Windows Phone 8.1? Será que é possível para todo caso? E como lidamos com o compartilhamento do código e interface entre essas duas plataformas quando desenvolvemos Universal Apps?

Tentaremos responder essas perguntas buscando fornecer algumas orientações e dicas sobre desenvolvimento de Universal Apps para Windows 8.1 e Windows Phone 8.1 para HTML e Javascript.

Desenvolvendo aplicativos com HTML/WinJS

A partir da versão 8.1 do Windows e Windows Phone temos a possibilidade de desenvolver aplicativos usando HTML e WinJS.

O WinJS é uma biblioteca Javascript que permite o desenvolvimento de aplicativo nativo usando HTML sem a necessidade de usar um controle Web. Isto porque ainda na versão 7.5, era necessário criar um aplicativo C# e nele usar o controle Web para renderizar um HTML.

Essa bibiioteca busca disponibilizar muitos dos recursos que temos disponíveis no C#, como ListView, Pivot, Hub, e assim por diante. Usamos então a linguagem HTML para montarmos a interface, o CSS para o layout e depois o Javascript para programar a lógica por trás da interface e também as regras de negócio, acesso a serviços web, etc.

Aqui não iremos tratar os primeiros passos no desenvolvimento de aplicativo usando HTML/WinJS. Mas existem algumas referências interessantes sobre o assunto:

E o que são Universal Apps?

Quando vamos desenvolver um aplicativo Windows ou Windows Phone tanto com C# como HTML/WinJS, precisamos lidar com projetos específicos para cada plataforma. E se quisermos aproveitar o código entre esses projetos, precisamos montar uma estrutura de projetos específica.

Contudo, a partir da versão 8.1, foi disponibilizado no Visual Studio um novo tipo de projeto chamado Universal App que já dispõe de uma estrutura de projetos voltada para o compartilhamento de conteúdo entre Windows 8.1 e Windows Phone 8.1. O objetivo deste compartilhamento entre aplicativos dessas plataformas é justamente o aumento do reuso e da produtividade.

Esse compartilhamento envolve:

  • Compartilhamento de Código: Serviços, regras de negócio, acesso a WebServices (serviços web) e outros códigos que são necessários para os aplicativos, mas com pouca ou nenhuma dependência com a plataforma onde ele é executado.
  • Compartilhamento de Interface do Usuário: Você cria páginas ou UserControls (Controles de Usuário) que são comuns entre os aplicativos. Neste caso, podemos ter estilos específicos para cada aplicativo (tamanho de fonte, alinhamento, layout de lista ou grid, etc) mas conseguimos aproveitar o código por trás da interface (code behind), aumentando nossa produtividade.

Para mais informações, acessar “Criando aplicativos universais do Windows para todos os dispositivos do Windows”

Limitações e Diferenças do WinJS no Windows e Windows Phone

Apesar de podermos criar Universal Apps, com compartilhamento de código e interface, não podemos nos esquecer que há diferenças entre as plataformas. E temos que estar cientes dessas diferenças para sabermos como contorná-las para tirar maior proveito possível do desenvolvimento usando Universal Apps.

Para Windows 8.1, por exemplo, temos o controle WinJS.UI.Hub, mas não temos para Windows Phone 8.1. Para este último, temos o controle Pivot (que também está disponível para Windows 8.1).

Um bom lugar para descobrirmos essa diferença é o próprio site do MSDN. Lá, temos os ícones que indicam se o assunto tratado é aplicável somente para Windows 8.1 ou para Windows Phone 8.1 ou para ambos.

E neste link você terá mais informações sobre o que é suportado pelo Windows 8.1 e que não é suportado pelo Windows Phone 8.1.

Portanto, temos que nos preparar para contornar essas diferenças e obter as vantagens no desenvolvimento de Universal Apps.

Etapa 1 – Criando projeto Universal Apps

Para criar Universal Apps, você deve primeiro dispor de um ambiente de desenvolvimento. Para o ambiente de desenvolvimento iremos usar o Visual Studio 2013 Express for Windows – Update 4. É gratuito, porém requer o sistema operacional Windows 8.1.

Você pode baixar o instalador no site de download do Visual Studio 2013 Express for Windows – Update 4.

Essa versão Express do Visual Studio para Windows já possui os recursos básicos que irão auxiliá-lo no desenvolvimento do seu aplicativo, incluindo Universal App, e é um ótimo ponto de partida para nossos estudos.

Criando o projeto Universal Apps para Javascript

Uma vez instalado o Visual Studio 2013 Express for Windows, podemos criar nosso Universal App. Seguem os passos:

  1. Após aberto o Visual Studio, acessar o menu “FILE > New Project…” (Ctrl + Shift + N).

  2. O Visual Studio disponibiliza vários templates de projeto para utilizarmos. No caso do Universal Apps, ele apresenta três:

    • Blank App: projeto Universal App praticamente sem conteúdo. Recomendado quando se tem experiência com desenvolvimento e se deseja criar um aplicativo desde o início.
    • Hub/Pivot App: projeto Universal App com a página inicial específica para cada plataforma. O Windows apresenta um Hub, já o Windows Phone apresenta um Pivot (o Windows Phone não possui o componente Hub).
    • Navigation App: projeto Universal App com recurso de navegação entre páginas. Esse mecanismo oferece navegação Single Page, em que a navegação consiste em ter a página inicial sempre visível, mas com seu conteúdo sendo alterado quando é feita a navegação.

    Notas:

    • Recomendo criar o projeto usando template Navigation App pois já tem o código necessário para proporcionar a navegação entre páginas, o que é comum em aplicações.
    • Caso você já tenha um projeto específico para Windows 8.1 ou específico para Windows Phone 8.1, é possível convertê-lo para Universal App. Para tanto, selecionar o projeto e então clicar no item “PROJECT > Add Windows Phone 8.1…” (para Windows 8.1) ou selecionar o projeto e então clicar no item “PROJECT > Add Windows 8.1…” (para Windows Phone 8.1). O Visual Studio então cria o projeto para nova plataforma e também projeto “Shared”. E todos esses projetos são organizados dentro de uma nova pasta na solução.
  3. Para nossos estudos, vamos selecionar o template Navigation App. Neste caso, vamos dar ao projeto o nome “HtmlUniversalApp”.

    Agora vamos entender um pouco melhor o conteúdo do projeto que acabamos de criar. Este projeto na verdade é uma solução composta por três projetos:

    • Windows (Windows 8.1): Projeto com código específico para Windows.
    • Windows Phone (Windows Phone 8.1): Projeto com código específico para Windows Phone.
    • Shared: Projeto com código compartilhado entre Windows e Windows Phone.

    Nota:

    • Tanto no projeto “Windows” como “Windows Phone” temos uma página, chamada default.html, que é a página inicial da nossa aplicação. Além disso, temos também, específico para cada plataforma, os arquivos de configuração além de CSS e imagens.
    • No projeto “Shared” temos o código Javascript Shared/js/default.js que corresponde ao arquivo default.html dos projetos específicos. Também temos a página Shared/pages/home/home.html para a qual podemos navegar a partir da página inicial.

    O conteúdo do projeto “Shared” é incorporado ao projeto Windows e Windows Phone para montar o aplicativo. Portanto, é como se o conteúdo de Shared estivesse definido em cada um dos outros projetos.

    Se por acaso você tiver um arquivo com o mesmo nome e caminho no projeto “Shared” e num dos outros projetos, o Visual Studio irá alertá-lo que há conflito de nomes, sugerindo que você renomeie ou altere o local do arquivo contido no projeto “Shared”. Caso contrário, este arquivo será simplesmente sobrescrito pelo arquivo com mesmo caminho e nome e que está contido no projeto “Windows” e/ou “Windows Phone”.

  4. Agora vamos executar o projeto tanto no Windows como no Windows Phone. Para tanto:

    • Defina o projeto Windows como projeto inicial selecionando o projeto Windows no “Solution Explorer” e então selecionado o menu “PROJECT > Set as Startup Project” e então execute o projeto. Será apresentada uma tela com conteúdo default:

    • Feche o aplicativo e, no Vistal Studio, defina o projeto Windows Phone como projeto inicial selecionando o projeto Windows Phone no “Solution Explorer” e então selecionado o menu “PROJECT > Set as Startup Project” e então execute o projeto. Será apresentada uma tela também com conteúdo default:

Desenvolvendo Universal Apps

Agora que já criamos nosso projeto Universal Apps, a próxima etapa é começarmos a desenvolver nosso código. Porém, como estamos lidando com Universal Apps, temos antes que entender como lidar com compartilhamento de conteúdo entre aplicativos Windows e Windows Phone.

Nos projetos, além das imagens, temos essencialmente três arquivos fonte: Javascript, CSS e HTML. E para cada conteúdo podemos considerar o seguinte:

  • Javascript: É normalmente feito no projeto “Shared”, onde temos o Javascript sendo compartilhado entre os aplicativos das duas plataformas.
  • CSS: É geralmente criado para cada plataforma. Mas também pode acontecer de termos CSS definido no projeto “Shared” compartilhando regras de apresentação entre as duas plataformas.
  • HTML: É feito normalmente para cada plataforma considerando que temos layout e até conteúdo específico para cada plataforma. Contudo, em casos específicos, podemos ter um HTML sendo definido no projeto “Shared” e sendo compartilhado entre as diferentes plataformas (exemplo, arquivo Shared/pages/home/home.html do nosso projeto).
  • Imagens: Quando a imagem for comum entre as plataformas, definir no projeto “Shared”. Caso contrário, definir no projeto específico para cada plataforma.

Dessa forma, nesta série de posts iremos caracterizar o compartilhamento da seguinte forma:

  • Compartilhamento de Código: Javascript.
  • Compartilhamento de Interface: HTML, CSS e imagens.

Vale lembrar que um aspecto importante na criação de Universal Apps é o desenvolvimento em paralelo para as duas plataformas. Sempre procure desenvolver nas duas plataformas em conjunto para conseguir tirar maior proveito do compartilhamento do conteúdo.

Resumindo esta etapa

Nesta etapa criamos uma Universal App usando um dos templates disponibilizados pelo Visual Studio Express for Windows.

Este template já criou uma estrutura básica de projetos pronta para que possamos iniciar o desenvolvimento de nossa aplicação universal.

Links Recomendados

O que vem pela frente

Neste post focamos na contextualização e na criação do projeto Universal App. Já no próximo post iremos começar a abordar alguns aspectos específicos no desenvolvimento de Universal Apps para Windows 8.1 e Windows Phone 8.1.

Por favor, deixem seus comentários/sugestões sobre temas e deixem sua contribuição. Este espaço foi criado pensando em vocês e será cada vez mais valioso se pudermos contar com sua participação.

Obrigado e continue nos seguindo no #talkitbr!

Anúncios