Pé na estrada com phonegap: primeiros passos

 

Visto a complexidade que é desenvolver  aplicações para as diversas plataformas mobile existentes, vários projetos tem aparecido propondo soluções  na construção de aplicações hibridas. O caminho é quase sempre o mesmo: construir aplicativos com interface HTML 5/CSS 3, usando alguma linguagem de programação que seja o hype do momento, aka. javascript, python ou ruby.

O phonegap é mais uma dessas opções para construção de apps híbridas, fazendo frente a plataforma mais famosa nesse ramo, o Titanium. Não pretendo fazer um comparativo entre as duas soluções – até por que já fizeram a dar com balde ( aqui ). Quero compartilhar com vocês algumas idéias e a solução de alguns problemas que tive nesse começo de projeto.

 

Jogo rápido: Como realmente funciona o phonegap

Não tem muito mistério, ele pega toda a cancalharia client-side de uma app web, junta tudo e coloca numa WebView dentro da sua app  - o que acaba sendo um pouco diferente do Titanium que gera código nativo.  Os desenvolvedores do phonegap se preocuparam em oferecer configurações que permitem deixar sua app se comportando exatamente como uma app se comportaria e ainda forneceram APIs via JS para controlar recursos mais complexos dos SDKs, como interação com alguns recursos de hardware por exemplo.

Embora a lista de plataformas suportadas seja bem grande, é  óbvio que esse process  tem limitações se comparado a construir uma app em um SDK nativo, mas como nada nesse mundo funciona pra tudo, é questão de botar na balança e pesar os ônus e bônus da idéia.

 

1) Qual a parafernalha usar.

O phonegap deixa a gente bem a vontade para usar o que quisermos se tratando de ferramentas utilizadas na parte client side do desenvolvimento web. Escolhemos aqui na equipe adicionar o seguinte ao ciclo de desenvolvimento do projeto:

  • LESS CSS para as folhas de estilos, usando SimpLESS para compilação contínua.
  • Jasmine para testes JS (inclusive o phonegap já vem com algumas specs)
  • Jasmine-Jquery integração Jasmine-Jquery e suporte a fixtures em HTML
  • Jasmine-Ajax mock na camada de ajax para predefinir resposta a serviços externos.
  • Jquery Mobile, que dispensa apresentações.

 

2) Javascript

 

Logo de início o phonegap apresenta algo bem próximo da árvore de arquivos apresentada acima. Tudo que vamos criar basicamente fica dentro do diretório www. Faz bem você definir como irá trabalhar para não ter dezenas de arquivos se chamando, sem nenhuma organização. Existem até algumas frameworks que te fornece uma estrutura MVC em JS, tal como o ember.js,  angular.js ou o famoso backbone.js. Certamente no próximo projeto usarei algum deles.

Uma particularidade pra quem pretende usar o jQuery Mobile, é que ele faz uma navegação através de suas transições, sempre incluindo a nova página dentro da inicial. Para uma app web comum isso é loucura, mas para uma app mobile isso é fundamental. Como o cenário de uma app mobile é infinitamente mais controlado que na web, o caminho comum é usar o index.html como um loader de todos os resources que você precisa, e imediatamente após carregar tudo despachar a app para a primeira view da aplicação. O motivo disso é simples:  O jQuery Mobile não executa nenhum JS vindo de arquivos que não sejam o inicial.

Outro ponto com relação ao jQuery Mobile é quanto a sua performance: ele é meio lento. Testando no iPad 1, a app demora um pouco para responder as interações (sombras, highlights de seleção, etc). No iPad 2 fica perfeito. Já ouvi boatos que em alguns celulares a app pode ficar impraticável. Na dúvida faça você mesmo alguns testes, e caso não goste do resultado, mude para algo como o Sencha Touch.

 

3) Configurações do projeto

O phonegap vem por padrão com algumas configurações que você queira mudar:

  1. Ele não permite que seu código faça chamadas para endereços fora da aplicação, o que impede de você consumir APIs externas, por exemplo. Mude isso no arquivo cordoba.plist, adicionando ao ExternalHosts o endereço que você precisa acessar (ou um * para liberar qualquer endereço)
  2. Ele não bloqueia o “Bounce”da app, permitindo o toque na tela “jogar” a app de um lado para o outro. Fica extranho e não é comum em uma app nativa. Desligue esse comportamento alterando o UIWebViewBounce para false, no arquivo cordoba.plist.
  3. Os botões do jQuery Mobile, ao serem pressionados exibem a caixa de diálogo para Copy and Paste, o que não faz sentido algum. Para desligar isso foi necessario o seguinte trick sujo via CSS:* { -webkit-touch-callout: none; -webkit-user-select: none; }
    input { -webkit-user-select: auto; }

 

4 ) Testanto localmente no browser

Se a aplicação é puro JS/HTML/CSS, é óbvio que você vai querer ficar testando no browser local da máquina que esta desenvolvendo em vez de ficar fazendo build pro device. A única recomendação ao fazer isso, é acessar os htmls via um servidor web local, em vez de usar o file://. O python mesmo vem com o SimpleHTTPServer, é só navegar até o diretório www e digitar:

python -m SimpleHTTPServer

Depois acesse o http://localhost:8000 e  comece a desenvolver.

  • Ronald Araujo

    Muito bacana!