Tag Archives: experiências

Relatos de Phonegap

Coisas aleatórias, HTML, Javascript Leave a reply

Olá, tudo bom?

Poxa, abandonei este blog por um bom tempo, confuso com um TCC e trabalhando… mas conversando com um camarada, senti uma iluminação: “vou copiar essa conversa no meu blog”.

Quero deixar claro que o que estou colocando aqui é fruto da minha experiência com Phonegap e talvez vocês tenham alternativas, mas ainda eu não as achei (comentem se tiver). Então, estou jogando algumas das vivências e espero que ajudem.

Vamos começar deixando claro que tenho regras aqui:

  • A primeira regra do clube do Phonegap é nunca usar jQuery;
  • A segunda regra do clube do Phonegap é NUNCA usar jQuery; (use Zepto, se for assim tão necessário)
  • A terceira regra é: sempre usar yeoman para gerar seus projetos;
  • A quarta regra é: sempre usar grunt ou gulp;
  • A quinta regra é: SPA com REST;
  • A sexta regra é: se esta é a primeira vez que ouviu sobre Phonegap, você tem que experimentar!!!

Animação e Frufru

Bom, depois disso, devemos entender que o maior inimigo do phonegap é animação e principalmente com jQuery. Não quero dizer que não dá, nem que não é bom, o fato é que para animar bem e ficar “liso” como vemos um código nativo, não vai ser assim tão simples. Quanto maior o projeto, mais difícil colocar coisas felizes e animadas.

3D nem se diga, eventualmente você consegue, não aconselho.

Sombra? Não abuse do blur… box e text shadows são ameaçadores.

Gradientes funcionam e não afetam tanto a performance… se seu dispositivo alvo excluir os Androids 2.X, que simplesmente ignoram a maior parte das features de gradiente. (Sinceramente, Android 2.X é o IE 6 das webviews.. eles e os dispositivos da Samsung que gostam de se comportar mal com quase tudo que era para dar certo)

Minha dica é sempre usar os vendor prefixes, pelo menos para todas as regras mais legais. O Grunt pode te ajudar a aplicar, com algum dos inúmeros plugins para css.

Segurança

Eu estava lá, feliz e contente com meu projeto, até que um dia TUDO PAROU. Segurança é a palavra! Quando você usa um script com um src apontando para fora do projeto, você precisa autorizar. Certo, a culpa foi deste safado: <meta http-equiv=”Content-Security-Policy” content=”..”>

Para usar qualquer coisa que pareça muito mágica ou especial, fique atento à segurança, se não estiver configurado no config.xml, provavelmente está em outro lugar.

Navegador

Quando você está com o navegador para testar sua aplicação, não esqueça que os plugins não estão lá. Então, faça mocks dos plugins mais importantes, pelo menos para um desenvolvimento mais fácil.

Atualmente o phonegap tem solução tanto para usar o serve quanto para testar direto nas plataformas como Windows Phone, Android e iOs

Google Maps

Então, você vai e ativa a API de mapa do Google, todo ansioso para fazer seu aplicativo. Abre o editor, coloca o mapa e põe a URL com sua chave de API e o primeiro erro é sobre o domínio. Bom, você está desenvolvendo, então vai no Google e põe “localhost”, mas aí está a pegadinha… Com o phonegap, seus arquivos são servidos no file://, não suportado pela API. A solução? Finge que a chave não existe e conviva na fé de que o google não vai contabilizar os acessos. Lembre-se: os termos do Google exigem que você pague para usar o maps em qualquer projeto de rastreio, o que inclui aquele aplicativo de taxi, o outro de monitoramento de carga e até o app que você acha que ninguém pensou antes, que rastreia o fretado e te avisa para correr.

SVG

Quer fazer coisas legais? Use SVG, mas cuidado, a especificação funciona na maior parte dos dispositivos, mas com peculiaridades. O iOs não reconheceu um path com um vazado no meio, e deu muito problema com muitos ícones no mapa, por exemplo.

Debug

Quer debug? O Weinre é uma boa pedida, mas o chrome://inspect é a melhor opção. Conecte o dispositivo via USB e coloque no chrome essa URL e seja feliz. Outra saída bacaninha é o VorlonJs, mas não mexi muito.

Cordova

Você acha que precisa só instalar o phonegap via npm? Não, você vai precisar do cordova também, então trate de dar um npm install -g cordova antes de se descabelar.

Webkit

Então, se phonegap usa a webview, simples, o Android e o iPhone usam Webkit, sua vida está feliz… SQN. Se sua aplicação for tímida e tiver pouca visão, fique feliz nestas duas plataformas, mas o Windows Phone é uma alternativa (Eu tenho um WP e gosto muito dele, ta!?) e ele não usa Webkit. Portanto: teste sempre em todas as plataformas que puder.

Plugins

Não se atenha apenas a instalar o plugin, verifique se está no config.xml. Ferramentas de build, como o Phonegap Build usam o arquivo e, na hora da verdade, o aplicativo gerado não vai funcionar.

Touchend vs Click

A tela do seu celular não tem mouse. Touch é touch e, se você acha que o click é o mesmo que o touch, não é. Use um framework como o  Hammer ou se contente com o touchstart/touchend para acionar seus eventos de toque.

Leiaute

Camaradinha, iPhone não é Android e nenhum dos dois é Windows Phone. Se você vai fazer um build único para as três plataformas, pelo menos seja original e faça algo bizarro que assassine 5 ou 6 heurísticas de Nielsen, mas não tente enfiar a cara de um no outro.

Tela branca

Se algo der errado na inicialização do javascript, você será presenteado com uma linda e gigante tela branca (ou preta, dependendo da plataforma). Para isso, garanta que nenhum código arriscado, como acesso à API ou que gere erros seja executado antes do seu leiaute ser montado. No mínimo, faça uma SplashScreen em HTML para dar um bizú e fingir que tudo ficou bem.

Framework

Quer fazer um app de verdade, use um framework de verdade. Isso é uma aplicação, não um site, então, escolha um framework sério e que atenda às SUAS necessidades.

Ionic é bom, é interessante, mas quebra do nada e, às vezes, não salva sua vida.

Angular 1.x é bacana, mas exige cuidado. Se você usar todos os recursos para ficar limpo e bonito, sua performance vai sair pela tangente (pegou a piada?). Com grandes poderes, grandes responsabilidades, então, eventualmente, você vai ter que machucar a arquitetura.

Estou em um affair recente com React, não por amar seu estilo ou estar atraído pela sua beleza, mas por ser estupidamente rápido em relação ao que já tentei e por ser bem divertido de programar.

Eu já brinquei com esses, mas tem outros como o OnsenUI, o próprio Backbone e o meu querido Knockout. É tudo lindo, mas lembre-se de testar sua aplicação nas suas plataformas alvo. Como um camarada (que não tem blog e só por isso não vou referenciar aqui) me disse, SPA com algum framework do MicroJS, o jogo está ganho.

Desafios

Existem muitos desafios para trabalhar com Phonegap e, normalmente, ele serve para você fazer uma aplicação muito rápido e que vá ter um carinho e atenção no futuro para ser aprimorada. Phonegap é poderoso, mas perigoso, então tome cuidado, você deve sempre ter em mente que é uma webview bem alimentada e, wep bor web, temos desafios que todo browser terá, ainda mais em um dispositivo mobile.

Conclusão

Meus colegas odeiam o Phonegap, as pessoas são céticas, existem outras opções como o Appcelerator e o Xamarin, mas o que vou fazer, é tipo relacionamento perigoso, o risco é grande, mas o amor garante a união. Então, se você quer usar o Phonegap (Estou falando 10 mil vezes Phonegap, pois quero lavar sua mente e deixar esta palavra gravada à frio em sua memória), tenha carinho e abra mão dos preconceitos. Tudo é possível fazer com ele, só depende da sua fé e paciência.

Até mais,