Aplicativos modernos

Crie aplicativos da Windows Store com HTML5 e JavaScript

Rachel Appel

Baixar o código de exemplo

O sonho de Bill Gates de ter um computador em cada mesa e em cada residência não só se tornou realidade como o advento de dispositivos, como o tablet Surface, levaram esse sonho mais adiante. Além do Surface, houve uma explosão de novos dispositivos orientados para consumidores em todos os fatores forma possíveis. Ou seja, os computadores estão em todo lugar.

Considere que nesses computadores há mais de 1 bilhão de instalações do Windows no mundo todo, com 300 milhões de licenças do Windows 7 vendidas a cada ano nos dois últimos anos. Combine a base de instalação atual atualizável do Windows com o rápido crescimento do mercado dos dispositivos com Windows 8, como o Surface, e você terá a fórmula para o sucesso da monetização. Esse é o Windows reimaginado, a oportunidade sem precedentes para você fazer dinheiro publicando aplicativos na Windows Store.

A plataforma, a linguagem e o conjunto de ferramentas para criar aplicativos da Windows Store

Para criar um aplicativo da Windows Store, você precisa do Windows 8, do Visual Studio 2012 e de quaisquer SDKs específicos aos requisitos de seu aplicativo, como o Windows Live SDK ou o Bing Maps SDK. Essa instalação e configuração mínima do sistema facilita o desenvolvimento de aplicativos no Windows 8, desde a instalação até a implantação.

Depois de instalar o software obrigatório, está na hora de escolher uma linguagem. Se sua experiência de desenvolvimento se basear na pilha de ferramentas da Microsoft, como um desenvolvedor do Microsoft .NET Framework que escreve aplicativos do Windows Forms, do Windows Presentation Foundation (WPF) ou do Silverlight com C# ou Visual Basic, a criação de aplicativos da Windows Store com XAML e C# ou Visual Basic será o caminho mais fácil. Os desenvolvedores de C++ também podem usar o C++ como a linguagem compilada com XAML como sua GUI complementar.

Se você for um desenvolvedor da Web, incluindo ASP.NET, poderá aplicar seu conhecimento existente em HTML5, JavaScript e CSS3 de padrão aberto diretamente para o desenvolvimento de aplicativos da Windows Store. Os desenvolvedores da Web podem continuar a usar muitas bibliotecas JavaScript populares de terceiros, como a jQuery ou a Knockout. Para este artigo, usarei JavaScript como a linguagem preferencial.

Seja qual for sua experiência em desenvolvimento, a dificuldade inicial é pequena ao desenvolver aplicativos nativos do Windows 8. Isso se deve ao fato de que o Tempo de Execução do Windows (WinRT) é uma plataforma que contém APIs que se baseiam nos serviços principais do Windows, conforme ilustrado na Figura 1.

Figura 1 Arquitetura dos aplicativos da Windows Store

As APIs WinRT dão acesso a tudo o que o Windows 8 tem a oferecer, incluindo APIs para hardware, como webcams internas, geolocalização, sensores de luz e acelerômetros. Naturalmente, os conceitos básicos da plataforma, como gerenciamento de memória, autenticação, globalização e processamento assíncrono, bem como recursos de aplicativos da Windows Store, como pesquisa, compartilhamento e comunicações, também estão prontamente disponíveis. Há até APIs para manipulação de áudio e vídeo. No entanto, se você estiver escrevendo aplicativos JavaScript, os elementos <audio> e <video> do HTML5 funcionarão muito bem. Você pode procurar a API completa na página “Referência de API do Windows para aplicativos da Windows Store” em bit.ly/ZCwcJE.

Princípios de um aplicativo da Windows Store

Os aplicativos da Windows Store são executados como completamente imersivos, experiências de tela inteira que fornecem conteúdo simplificado ao usuário, sem que o aplicativo ou seus comandos atrapalhem o usuário. Os aplicativos da Windows Store oferecem uma virtualização de dados limpa e direta que atrai a atenção do usuário para o conteúdo.

Os aplicativos da Windows Store fazem coisas que os aplicativos do Windows e da Web não podiam fazer anteriormente, como compartilhamento, pesquisa e comunicação entre aplicativos de uma maneira fácil e unificada, usando elementos do Tempo de Execução do Windows chamados contratos como contatos entre os aplicativos.

O grande UX é uma faceta importante do desenvolvimento de aplicativos da Windows Store, da apresentação e layout até a navegação e o desempenho do aplicativo. Os usuários esperam consistência entre os aplicativos e entre os aplicativos e o SO. Os aplicativos da Windows Store estão totalmente relacionados ao UX, e o uso de princípios de design, como o uso de uma fonte consistente, a silhueta da interface do usuário do Windows e um sistema de grade escalonável, melhora o nível de conforto dos usuários quando usam seu aplicativo. Essa consistência é aplicada nos aplicativos e no próprio Windows 8.

É importante garantir que a entrada por toque ou pelo mouse funcionem de maneira confiável e consistente porque os usuários agora possuem mais maneiras de interagir com seus dispositivos de computação na forma de mouses, canetas, toques, câmeras e sensores.

Como dispositivos alimentados por baterias com processadores como o ARM estão se tornando uma parte importante do cenário da computação, o Windows 8 deve gerenciar a memória geral e por aplicativo de uma maneira estrita para permitir uma experiência rápida e fluida mesmo quando os recursos são baixos. Os aplicativos do Windows 8 desfrutam de um ciclo de vida de processo direto e simples para garantir a melhor experiência.

Embora muitos aplicativos irão funcionar bem como um aplicativo da Windows Store, nem todo aplicativo é um bom candidato. Por exemplo, embora o próprio Visual Studio utilize muitos princípios modernos de design da interface do usuário, seu objetivo é permitir que o usuário execute comandos (ou seja, programação). Essa não é uma boa opção para um aplicativo da Windows Store.

Modelos de projetos de aplicativos do Visual Studio 2012 para a Windows Store

O Visual Studio 2012 introduziu um conjunto de novos modelos para desenvolvimento de aplicativos da Windows Store no C#, no Visual Basic, no C++ e no JavaScript. Independentemente da linguagem, os seguintes estilos de modelos estão disponíveis:

• Em branco: Um modelo de funções básicas com os arquivos mínimos necessários para criar um aplicativo da Windows Store.
• Grade: Um modelo que exibe uma grade que usa a silhueta da interface do usuário do Windows 8 junto com código de modelo para vários recursos, incluindo suporte à navegação e à exibição encaixada (mais informações posteriormente). 
• Divisão: Um modelo que exibe uma lista de itens e detalhes dos itens em uma exibição de duas colunas, facilitando a alternância rápida entre os itens para o usuário.
• Fixo: Um modelo Em branco que usa um objeto ViewBox na página default.html. Um ViewBox é um objeto do WinRT usado em jogos.
• Navegação: Um modelo com uma estrutura de projeto Em branco mais navegação e um conjunto de ativos básicos de aplicativos (isto é, home.html, home.js e home.css) sob o diretório /home.

Como o modelo Grade contém código que promove muitos excelentes recursos do Windows 8, como suporte à exibição encaixada, colocação da tela em escala e navegação, ele é o caminho perfeito para começar a escrever aplicativos da Windows Store.

Depois de criar um novo modelo de projeto de Grade do JavaScript, examinando sua estrutura você verá um projeto cheio de tipos de arquivos padrão Web, como arquivos .html, .css e .js organizados em pastas sob a raiz do projeto. Em seguida, é possível depurar e executar um aplicativo da Windows Store pressionando F5 ou selecionando Iniciar depuração no menu Depurar.

Nos modelos de aplicativos da Windows Store, default.html é a página inicial de um aplicativo da Windows Store e possui um arquivo de script suplementar, /js/default.js, que contém código de gerenciamento de ciclo de vida de processos. Como qualquer outro arquivo HTML, default.html tem o código esperado por você, incluindo referências de script e nova marcação semântica HTML5, que define a estrutura da página. O fragmento de código a seguir se encontra na tag <body> do default.html e usa controles de WinJS para navegação e carregamento da página groupedItems.html:

 

<div id="contenthost"
  data-win-control="Application.PageControlNavigator"
  data-win-options=
  "{home: '/pages/groupedItems/groupedItems.html'}"></div>

Os atributos data-* são a maneira como o HTML5 aplica código ou comportamento personalizado a um elemento HTML e, na Windows Store, os atributos data-win-* normalmente se referem a controles de JavaScript do Windows. Os controles de JavaScript do Windows são componentes internos do WinRT, que você aplica a elementos HTML para melhorar ou modificar seu comportamento ou estilo. Os atributos de Data-win-* prevalecem em aplicativos JavaScript da Windows Store, principalmente durante a vinculação de dados.

Data Access em aplicativos da Windows Store

Como parte do modelo Grade, um arquivo chamado data.js na pasta /js contém código que cria um conjunto de dados de matrizes, bem como funções para agrupar e manipular os dados. O arquivo data.js também contém dados de exemplo que você precisa substituir por seus próprios dados. Neste artigo, usarei dados para um aplicativo de contagem regressiva que mostra o número de dias restantes até um evento, como um feriado ou férias.

No arquivo data.js, você encontra o único comentário // TODO no início do arquivo. Substitua o código sob o comentário com seu próprio para que o código seja parecido com o seguinte snippet de código, que faz uma chamada de XMLHttpRequest para recuperar dados JSON e, em seguida, também cria o conjunto de dados, incluindo propriedades dinâmicas, como daysToGo e campos de mensagens:

var list = new WinJS.Binding.List();
...
WinJS.xhr({ url: "data.json" }).then(function (xhr) {
  var items = JSON.parse(xhr.responseText);          
  items.forEach(function (item) {
    item.daysToGo = Math.floor(
      (Date.parse(item.eventDate) - new Date()) / 86400000);
    item.message = item.daysToGo + " days until " + item.title;
    if (item.daysToGo >= 0) {
      list.push(item);
    };
  })
})

No início de data.js há uma linha de código que cria uma instância de um objeto WinJS.Binding.List convenientemente chamado de list, e o código precedente envia itens individuais por push para esse List.

O objeto List permite vinculação entre dados JSON ou matrizes JavaScript e elementos HTML. Depois que a variável da lista estiver preenchida com dados, use expressões de associação na marcação HTML para associar os membros de List aos elementos HTML.

Quando você lê dados JSON com uma chamada para JSON.parse, os nomes nos pares name/value correspondem às propriedades dos objetos JavaScript em tempo de execução. Os seguintes dados JSON mostram como a estrutura JSON é mapeada para membros da variável items no snippet de código anterior. Os campos key, title, eventDate, image, color e group são todos mapeados para as propriedades do objeto item:

[{"key":"1","group":{"key":"group1","title":"Important Dates"}, "title":"Rachel's Birthday","eventDate":"01/13/2013", "image":"/images/birthday.png","color":"#6666FF"}, {"key":"2","group":{"key":"group1","title":"Important Dates"}, "title":"Ada Lovelace Day","eventDate":"10/16/2013", "image":"/images/ada.jpg","color":"#fff"}, {"key":"3","group":{"key":"group2","title":"Holidays"},"title":"Christmas", "eventDate":"12/25/2013","image":"/­images/­tree.png","color":"#ef0d0d"}, {"key":"4","group":{"key":"group3","title":"School"},"title":"School Ends","eventDate":"6/10/2013","image":"/images/schoolbus.png","color":"#fff"}, {"key":"5","group":{"key":"group2","title":"Holidays"},"title":"Thanksgiving", "eventDate":"11/29/2012","image":"/­images/­thanksgiving.png","color":"#FFCC00"}, {"key":"6","group":{"key":"group2","title":"Holidays"},"title":"New Year's Day", "eventDate":"1/1/2013","image":"/images/celebrate.png","color":"#f8baba"}]

Agora que os dados foram carregados, você precisa garantir que o objeto List está vinculado aos elementos HTML corretos. As modificações na página /pages/groupedItems/groupedItems.html na Figura 2 mostram a vinculação de dados em ação.

Figura 2 Vinculação de dados do objeto List aos elementos HTML com controles do WinJS

<!-- These templates are used to display each
  item in the ListView declared below. -->
<div class="headertemplate" data-win-control="WinJS.Binding.Template">
  <button class="group-header win-type-x-large win-type-interactive"
    data-win-bind="groupKey: key"
    onclick="Application.navigator.pageControl.navigateToGroup(
      event.srcElement.groupKey)"
      role="link" tabindex="-1" type="button">
    <span class="group-title win-type-ellipsis"
      data-win-bind="textContent: title"></span>
    <span class="group-chevron"></span>
  </button>
</div>
<div class="itemtemplate" data-win-control="WinJS.Binding.Template" >
  <div id="myitem" class="item"
    data-win-bind="style.background: color">
    <img class="item-image" src="#"
      data-win-bind="src: image; alt: title" />
    <div class="item-overlay">
    <h2 class="item-title" data-win-bind="innerText: message"></h2>
      <h6 class="item-subtitle"
        data-win-bind="textContent: eventDate"></h6>
    </div>
  </div>
</div>
<!-- The content that will be loaded and displayed. -->
<div class="fragment groupeditemspage">
  <header aria-label="Header content" role="banner">
    <button class="win-backbutton" aria-label="Back"
       disabled type="button"></button>
    <h1 class="titlearea win-type-ellipsis">
      <span class="pagetitle">How long until...</span>
    </h1>
  </header>
    <section aria-label="Main content" role="main">
      <div id="listView" class="groupeditemslist"
        aria-label="List of groups"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{  selectionMode: 'multi',
        tapBehavior:'toggleSelect' }"></div>
    </section>
</div>

Cada elemento HTML da Figura 2 que contém um atributo data-win-bind tem uma expressão de associação que corresponde a um nome da propriedade da variável item do snippet de código anterior, portanto, tudo o que você precisa fazer é garantir que as expressões de associação correspondam aos nomes dos campos. Não se esqueça de ter certeza de também modificar as expressões de associação nas páginas groupedDetail.html e itemDetails.html para que os dados corretos sejam mostrados quando um usuário navegar até eles.

O resultado da execução do projeto no Windows Simulator é semelhante ao mostrado na Figura 3. Você pode obter mais informações sobre como usar o simulador em bit.ly/M1nWOY.

Figura 3 Substitua os dados de exemplo para criar um aplicativo básico

Como você pode ver, é possível simplesmente substituir o código do modelo do Visual Studio para acesso rápido aos dados. No entanto, os projetos frequentemente são muito grandes ou complexos, dificultando a manutenção. Se esse for o caso, use o padrão Model-View-ViewModel (MVVM) para facilitar a manutenção. Esse padrão é extremamente bem documentado na Web.

Embora o seu aplicativo agora funcione, está na hora de tirar proveito dos muitos excelentes recursos do Windows 8, que podem fazer com que seu aplicativo se destaque na multidão.

Identificando visualmente seu aplicativo da Windows Store

Considerando que o ponto focal do Windows 8 é a página Iniciar, faz sentido começar a identificação visual ali. A página Iniciar é cheia de blocos dinâmicos, e eles não são apenas um monte de ícones quadrados. Ao contrário, eles são a melhor maneira de exibir e atrair usuários para seu aplicativo. Os blocos dinâmicos são chamados "dinâmicos" por uma razão, e a razão é que você pode exibir informações dinamicamente e imagens dentro delas, tornando seu aplicativo ainda mais atraente.

Os aplicativos da Windows Store precisam de três imagens separadas lado a lado com as seguintes dimensões em pixels:

• Logotipo: 150 x 150 (bloco padrão)
• Logotipo grande: 150 x 310 (bloco grande)
• Logotipo pequeno: 30 x 30 (mostrado apenas em listas de aplicativos na loja)

As imagens podem ter qualquer formato de imagem popular, e as imagens com planos de fundo transparentes funcionam melhor. A abertura do arquivo package.appxmanifest na raiz do projeto revela a paleta da configuração, onde você pode selecionar as imagens do arquivo e definir cores de plano de fundo. A Figura 4 ilustra um bloco padrão e um grande.

Figura 4 Blocos padrão e grande do aplicativo de contagem regressiva

Quando estiver configurando os blocos é uma boa hora para configurar a tela inicial selecionando apenas uma imagem e a cor do plano de fundo, nenhum código é usado. Embora os blocos e as telas iniciais sejam fatores importantes na identificação visual de seu aplicativo, você pode fazer mais coisas para identificá-lo e melhorar sua estética, mais informações a respeito podem ser encontradas em bit.ly/M4HYmL.

Recursos 'indispensáveis' do Windows 8 para seu aplicativo

Embora seu aplicativo possa funcionar neste ponto, há muitos outros recursos e APIs no ecossistema de aplicativos do Windows 8, que você pode usar para realmente fazer com que ele se destaque. Discutirei cada um deles brevemente.

AppBar Um recurso essencial para qualquer aplicativo é o AppBar, que é um controle WinJS localizado no default.html. Normalmente, o AppBar permanece fora de vista, mas quando os usuários clicam com o botão direito do mouse ou passam da parte superior à inferior da tela, o AppBar exibe uma barra na parte inferior da tela. A Figura 5 mostra a marcação de um AppBar que contém três botões e seus ouvintes de eventos correspondentes.

Figura 5 Um AppBar com botões para adicionar, excluir e exportar dados

// AppBar markup in default.html
<div id="appbar" data-win-control="WinJS.UI.AppBar">
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'addItem', label:'Add',
    icon:'add', section:'global'}" type="button"></button>
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'exportData', label:'Save',
    icon:'save', section:'global'}" type="button"></button>
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'deleteItem', label:'Delete',
    icon:'delete', section:'selection'}" type="button"></button>
</div>
// Script in groupedItems.js
document.getElementById("exportData").addEventListener("click", Data.exportData);
document.getElementById("addItem").addEventListener("click", this.addItem);
document.getElementById("deleteItem").addEventListener("click", this.deleteItem);

Os comandos globais do AppBar devem estar localizados no lado direito do AppBar e os comandos contextuais devem estar no lado esquerdo. Defina o estilo do AppBar com o CSS, uma vez que ele é apenas um <div>.

Exibição Encaixada Os aplicativos da Windows Store podem ser executados em tela inteira ou em um modo chamado exibição encaixada, que acontece quando o usuário “fixa” o aplicativo no lado esquerdo ou direito da tela. Como o aplicativo agora tem menos espaço na tela, ele deverá exibir apenas os dados necessários.

Como o suporte à exibição encaixada é baseado no modelo Grade, você precisa verificar se os dados são exibidos de acordo quando encaixados, mostrando informações pertinentes e legíveis. O AppBar também funciona enquanto o aplicativo é encaixado, portanto, isso também pode precisar de ajustes no estilo.

Zoom Semântico Esse novo recurso de toque amigável do Windows 8 é uma maneira de agregar grandes quantidades de dados em uma única exibição fácil de resumir. Os usuários invocam o Zoom semântico das seguintes maneiras:

• Toque: gesto de tocar, arrastar e apertar
• Mouse: Ctrl+roda de rolagem
• Teclado: Ctrl - e Ctrl +

O Zoom semântico é mais uma visualização de dados de uma maneira significativa, que auxilia na navegação, do que simplesmente a exposição de uma exibição ampliada dos dados. Se houver muitos dados, é melhor que o usuário tenha uma exibição panorâmica do que precise rolar por uma sobrecarga de informações. Considere como apresentar melhor os dados para que a apresentação seja mais significativa.

Pesquisar e Compartilhar A pesquisa e o compartilhamento de dados entre aplicativos são aspectos essenciais dos aplicativos modernos. Os usuários agora podem pesquisar vários aplicativos de uma vez e compartilhar os dados encontrados. Ou seu aplicativo pode se registrar como um destino compartilhado e aceitar dados que os usuários compartilham de outros aplicativos da Windows Store. A comunicação de aplicativo para aplicativo nunca foi tão direta e consistente.

Controles de Seletor Esses são os controles tradicionais do Windows que foram atualizados para uma interface do usuário moderna, como o Seletor de Abertura de Arquivos ou o Seletor de Salvamento de Arquivos, ou caixas de diálogo de definição de impressão, que foram recursos básicos de aplicativos do Windows por muitas versões.

Mídia Como os aplicativos da Windows Store criados com o JavaScript dão suporte total ao HTML5, os elementos <audio> e <video> funcionam da mesma maneira como o fazem em páginas ordinárias da Web. 

Notificações do Sistema As notificações do sistema são uma maneira de fornecer uma mensagem momentânea ao usuário, independentemente de se o aplicativo está ou não em uso. As formas mais populares de notificações do sistema são pop-ups de alertas de email e mensagens de texto em telefones. As mensagens do sistema podem conter texto e imagem e podem servir como outra maneira de atrair usuários para seu aplicativo. Você pode postar as mesmas notificações na tela de bloqueio do Windows 8 para obter uma prévia de todas as mensagens em espera.

Generation App

Para recapitular, o Windows 8 é o Windows reimaginado, que apresenta algumas das maiores alterações no SO desde o Windows 95, e um mercado sem precedentes. Os modelos de projetos internos do Visual Studio permitem começar a publicar aplicativos que geram receita mais facilmente e mais rapidamente do que nunca no maior mercado de criadores de aplicativos.

Não há espaço suficiente aqui para discutir todos os excelentes recursos que você pode e deve usar em seu aplicativo da Windows Store, portanto, recomendo fortemente que você verifique o programa Generation App (bit.ly/W8GenAppDev). Ele orienta você pelo processo de criação de um aplicativo da Windows Store (ou do Windows Phone) em 30 dias, oferecendo consultas técnicas e de design e assistência com dicas e recursos exclusivos.

Rachel Appel é desenvolvedora e divulgadora da Microsoft na cidade de Nova York. Entre em contato com ela por meio do site rachelappel.com ou pelo email rachel.appel@microsoft.com. Você também pode segui-la no Twitter em twitter.com/rachelappel.

Agradecemos ao seguinte especialista técnico pela revisão deste artigo: Ian LeGrow