Veremos aqui um passo-a-passo do desenvolvimento de um aplicativo para Windows Phone 7 em HTML5 usando o PhoneGap. Também faremos uma análise da viabilidade dessa abordagem no desenvolvimento para dispositivos móveis multiplataformas.

Introdução – porque HTML5?

O Windows Phone 7 permite o desenvolvimento nativo de aplicativos tanto usando Silverlight, quanto usando XNA; ambos são frameworks maduros e com excelente suporte de ferramentas. Por que precisaríamos, então, desenvolver um aplicativo em HTML5 e JavaScript? Pessoalmente, penso que a única boa razão (além da diversão) é que com HTML 5 e JavaScript dá para desenvolver em multi-plataformas, rodando em Android, iPhone, BlackBerry e, agora, no WP7 Mango, suportando IE9 e WP7. Neste artigo descreverei como implementei o aplicativo mostrado abaixo, o que permitirá a procura de imóveis a venda, usando GPS e vários serviços web para encontrar e geocodificar sua localização no momento.

O conceito básico por trás dos aplicativos HTML5 é que seus aplicativos nativos são simplesmente um navegador Web de tela cheia, que hospeda a lógica de seu aplicativo JavaScript. Para obter isso na prática, você precisa empacotar o HTML, JavaScript, CSS e outros recursos em um arquivo XAP, e, então, usar as APIs do WebBrowser para passar mensagens entre seu código JavaScript e as APIs nativas, de forma a acessar os recursos do aparelho, como câmera, acelerômetro, etc.

Algumas pessoas desenvolveram frameworks para dar assistência no desenvolvimento de apps de HTML5, por exemplo o HTML App Host Framework. Porém, o que eu recomendo é o PhoneGap, que como indica o nome, preenche o espaço entre o seu código JavaScript e os recursos nativos do telefone. O PhoneGap é um projeto open source que já roda há alguns anos; uma grande gama de aparelhos é suportada, significando que o acesso dos recursos em Android, iPhone, BlackBerry e outros é garantido com as mesmas APIs JavaScript.

O suporte do PhoneGap para o Windows Phone 7 foi iniciado por Matt Lacey, que criou a implementação inicial das APIs do PhoneGap. Mais recentemente, o Nitobi (que roda o PhoneGap) anunciou uma versão beta, que foi desenvolvida em conjunto com a Microsoft.

Começando com o PhoneGap

O PhoneGap tem um modelo de projeto que ajudará na criação inicial de um aplicativo “Hello World”. Você pode começar seguindo os seguintes passos:

1. Faça o  download do WP7 PhoneGap em https://github.com/phonegap/phonegap-wp7
2. Copie o arquivo GapAppStarter.zip, que contém o template do projeto para a pasta \My Documents\Visual Studio 2010\Templates\ProjectTemplates\
3. Crie um novo projeto usando o template de projeto GappAppStart. Não é possível localizar este template na árvore ‘Installed Templates’, assim, use a função de busca. Veja a imagem abaixo.
4. Adicione o projeto framework\WP7GapClassLib.csproj à sua solução e adicione também uma referência ao projeto. 
5. Construa e faça rodar!

Se você seguiu os passos corretamente, você deve ver o seguinte:

Dissecando o App de Exemplo

O aplicativo do exemplo é um pouco mais complexo do que um app equivalente do Silverlight “Hello World”, de forma que vamos olhar alguns detalhes…

A pasta www contém o HTML5 do código fonte, onde você coloca imagens, HTML, JavaScript e CSS. Esses arquivos são marcados como ‘conteúdo’ e serão incluídos no arquivo XAP com a mesma estrutura do diretório. O projeto contém um arquivo GapSourceDictionary.xml, que lista todos os recursos dos aplicativos HTML.  Quando o aplicativo inicia, este arquivo XML é lido e cada arquivo é adicionado na storage isoladamente, de forma que pode ser servido pelo controle WebBrowser: 

<GapSourceDictionary>
  <FilePath Value="www/index.html" /> 
  <FilePath Value="www/phonegap.1.0.js" /> 
  <FilePath Value="www/master.css" /> 
</GapSourceDictionary>

A  MainPage.xaml, que é a Silverlight UI para o aplicativo, contém uma instância do PGView:

<phone:PhoneApplicationPage 
    ... xmlns:my="clr-namespace:WP7GapClassLib;assembly=WP7GapClassLib">
    <Grid>
      <my:PGView/>
    </Grid>
</phone:PhoneApplicationPage>

O PGView é definido no WP7GapClassLib e é um UserControl que hospeda um WebBrowser, que contém o código que faz a ponte entre as APIs em JavaScript do PhoneGap e as APIs do WP7 .NET. Ao iniciar, ele carregará seus arquivos em um storage isolado e levará o browser control para “www/index.html” (embora isto no futuro seja provavelmente configurável).

O arquivo index.html do template project é mostrado abaixo (sem algumas partes sem importância):

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />    
      <script type="text/javascript" charset="utf-8" src="phonegap.1.0.js"></script>       
      <script type="text/javascript">
        function init()
        {
          document.addEventListener("deviceready",onDeviceReady,false);
        }
 
        // once the device ready event fires, you can safely do your thing! -jm
        function onDeviceReady()
        {
          document.getElementById("welcomeMsg").innerHTML += "PhoneGap is ready!";
        }
      </script>
 </head>
 <body onLoad="init();">
  <h1>Hello PhoneGap</h1>
  <div id="welcomeMsg"></div>
 </body>
</htm>

O importante a assinalar aqui é, primeiramente, a existência do viewport metadata (que existe devido à forma como as telas móveis pequenas representam o layout, resultando na necessidade de um viewport para o layout e outro para o visual, como descrito no artigo “A tale of two viewports”). Aqui a largura é configurada para 320px, de forma que a largura de cada pixel em nosso HTML é de dois pixel na tela. Eu prefiro a correlação de um para um, e mudaria para as dimensões físicas do telefone. O “user-scalable=no” impede que o usuário precise dar zoom na página, mas infelizmente no meu telefone (Mango) isto parece não funcionar. É uma pena, porque realmente estraga a ilusão de que se trata de um aplicativo, e não de uma página web.

Quando o DOM é carregado, a função init é chamada, o que adiciona um handler ao evento deviceready.  Ao terminar, já dá para usar as APIs do PhoneGap. Este exemplo, na verdade, não usa nenhuma das APIs, mas você pode fazer uma mudança simples para obter o nome do telefone através da chamada device.name, por exemplo, para verificar se o PhoneGap está realmente funcionando.

Então, como a ponte JavaScript/Silverlight funciona? O arquivo PhoneGap.js se comunica via window.external.Notify, o que aciona o evento ScriptNotify no controle do WebBrowser. Strings codificadas são enviadas para o controle PGView, que usa o command pattern para identificar a classe que realiza a função requerida e a executa.

Na segunda parte deste artigo vamos criar a aplicação Property Search, o estilo Metro e conversar sobre o processo de desenvolvimento. Não perca!