Apache Cordova/ Mobile/ Phonegap

Plugins oficiais do Cordova “Phonegap” atualizados

apache_cordova

Para quem está com os plugins instalados e quer atualizar para as últimas versões, segue aqui a lista de atualizações, onde ocorreu muitas mudanças e correções de bugs.

org.cordova.battery-status@0.2.8
org.cordova.camera@0.2.9
org.cordova.console@0.2.8
org.cordova.contacts@0.2.10
org.cordova.device@0.2.9
org.cordova.device-motion@0.2.7
org.cordova.device-orientation@0.3.6
org.cordova.dialogs@0.2.7
org.cordova.file@1.1.0
org.cordova.file-transfer@0.4.3
org.cordova.geolocation@0.3.7
org.cordova.globalization@0.2.7
org.cordova.inappbrowser@0.4.0
org.cordova.media@0.2.10
org.cordova.media-capture@0.3.0
org.cordova.network-information@0.2.8
org.cordova.splashscreen@0.3.0
org.cordova.statusbar@0.1.5
org.cordova.vibration@0.3.8

Para instalar é simples:

phonegap plugin add org.cordova.{NOME DO PLUGIN}

Se quiser sobrepor o atual só remover o que tem e instalar o novo, bem assim:

phonegap plugin rm org.cordova.{NOME DO PLUGIN}
phonegap plugin add org.cordova.{NOME DO PLUGIN}

Para você ver outros plugins disponíveis basta acessar o site oficial : http://plugins.cordova.io

A lista de bugs corrigidos você pode verificar aqui.

Apache Cordova/ ios/ iPad/ Mobile/ Phonegap/ Tablets

Apache Cordova, removendo os 300ms de delay entre o toque e o click

apache_cordova

Desenvolver apps Híbridas sem a ajuda de um framework que mitigue todas as particularidades nas plataformas é um caso de dependência de várias técnicas, se você está nesse campo à um bom tempo, sabe que essa tarefa as vezes depende muito de bibliotecas e pequenos scripts em Javascript para fazer funcionar de uma forma nativa.

Um dos problemas enfrentados é o famoso Delay dos 300ms, esse problema afeta tanto apps híbridas como as feitas em Titanium, Cordova, etc, como os “site-apps” nos navegadores.

Quando eu começei a criar um aplicativo chamado Gui Brasil em Cordova(Phonegap na época), 2012. Apresentava esse problema, dando uma aparência de lentidão e quebrado, coisa que tirava toda a experiência de se criar algo ao estilo nativo. Na época eu resolvi com algumas técnicas relacionadas a CSS, melhorou, mais não tanto quanto essa solução que vocês vão ver abaixo.

O FastClick resolve esse problema, especialmente relacionado ao errinho do web-kit em dispositivos que tenham navegadores que usam ele como base, assim como o Webkit(WebView) do Apache Cordova.

Antes de chamar qualquer biblioteca no Cordova, você deve esperar o evento “deviceReady”

Inclua o FastClick na dependência do seu projeto.

<script type='application/javascript' src='/path/to/fastclick.js'></script>

E em seguida inclua essa linha abaixo:

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

E como em um passe de mágica, sem precisar melhorar nada na performance, seu App já ganha de cara uns 10% até 20% de melhoria na responsividade do toque para a execução.

Android/ Apache Cordova/ Dicas/ ios/ Mobile/ Phonegap

Lista completa de dispositivos móveis, tamanhos e densidades

density

Quando o assunto é criar para dispositivos móveis você acaba sempre procurando qual é o tamanho da tela, resolução, densidade e basicamente isso torna qualquer app um desafio de concretizar, especialmente falando-se nos dias atuais.

Eu comentei, antes e aqui no Blog sobre esse aspecto, só que com tantos lançamentos a cada MWC, fica dificil acompanhar tudo, foi ai que alguém teve a brilhante idéia de ir agregando isso a uma lista no Wikipedia.

Boom! Não precisa fazer mais nada, esse post serve para qualquer um que encara esse problema diário em suas apps móveis, especialmente quem usa Cross-compliadores como PhoneGap(Cordova), Titanium, etc.

Só entrar e procurar no Wikipedia para qual dispositivo você procura. http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Apache Cordova/ Iphone/ Phonegap

Phonegap 3.0 distribuído como uma aplicação NodeJS e o bug no iOS 7

cordova_plugin_diagram

Faz um tempo que eu não posto nada aqui sobre o Phonegap desde a última vez que comentei sobre suas novas mudanças planejadas para a versão 3.0.

Quem tentar baixar manualmente a versão 3.0 do Phonegap, vai notar que agora ele requer que você instale como se fosse um módulo para NodeJS, para quem não está acostumado a esse formato basta seguir os seguintes passos.

Baixar o NodeJS
[quote style=”1″]Instale a versão compatível com seu ambiente, usuários do Windows basta ir em Iniciar -> Meu Computador e ver qual versão seu Windows é x86(32bits) ou x64[/quote]

Lembre-se que ao instalar, instale ele global, assim ele vai adicionar o diretório do NodeJS no Path do seu windows.

Para MAC OSX é mais fácil, só criar um arquivo .bash_profile apontando para onde o nodejs está guardado.

O Pacote do NodeJS vem com um gerenciador de pacotes npm(Node Package Manager), é através dele que o Phonegap 3.0 em diante será distribuido.

Uma vez que você baixou o NodeJS, basta abrir o console de comandos, e digitar:

[highlight bg=”#98b55f” color=”#0d0f12″]npm install -g phonegap[/highlight]

Ele vai baixar todos os pacotes relacionados ao Phonegap de forma global, assim você não precisa ficar copiando sempre um novo phonegap para cada projeto que for criando.

Quem ainda quiser fazer da forma antiga, só será possível através do projeto Apache Cordova.

Bug no iOS 7

Para quem está com problemas no iOS 7, existe um bug relacionado a aplicação dar um salto de 20px, relatado aqui.

Para corrigir basta fazer isso.

function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}
 
document.addEventListener('deviceready', onDeviceReady, false);
Android/ Apache Cordova/ Dev. Software/ Dicas/ Notícias/ Open-source/ Phonegap

A fragmentação do Android e a dor de cabeça de desenvolver nativo

frag_droid_brands

frag_droid_brands

É fato e não tem como argumentar com dados, desenvolver para Android é um saco do ponto de vista nativo, na RIACycle cobramos muito mais caro para Android do que para iOS, por que justamente o cliente muitas vezes não entende o tamanho do problema que é para criar para dispositivos com Android.

[pullquote align=”left”]Relatório completo da Open Signal aqui.[/pullquote] E com base em quê para fazermos isso? Vejamos, sem dados eu não tenho como argumentar com você que lê agora, mas assuma que eu consegui os dados disponíveis aqui. Claro que isso não remete a realidade global, mais os dados podem ser comparados ao que temos no Brasil, você conhece alguém com smartphone que tenha o Android instalado? Percebeu qual a marca dele e o tamanho? Qual versão ele usa?

Esse relatório da Open Signal é basicamente o que eu tenho lutado nos últimos tempos e eu sempre venho com as seguintes perguntas em sequência:

[quote style=”1″] Para qual dispositivo Android você quer fazer?
Você quer fazer nativo ou usando tecnologias alternativas?[/quote]

Até ai, o cliente já está com o pé atrás e pergunta, Ah! Mais tem preço diferenciado? Sim, veja só, embora o Google tenta ao máximo lançar bibliotecas de compatibilidade entre diferentes versões da API, a questão é o mesmo aplicativo nativo que via rodar no Android 2.3 vai rodar no Android 4.2. A grande diferença é que você vai roda-lo mais lento no 2.3 e mais rápido no 4.2. Por que consequentemente quem está com o Android 4+ tem um aparelho no mínimo melhor.

Quem cria jogos como é nosso caso, o problema ainda é mais sério, já que você além de ter a dificuldade de trabalhar com diferentes tamanhos de telas, densidades, você tem que se preocupar com o consumo de energia da bateria.

frag_droid_

Um dos pontos chaves para trabalhar com a plataforma é a questão da API. Como mencionei rapidamente logo acima, é difícil você fazer isso de forma menos trabalhosa no Android, por mais que você queria, você vai acabar abrindo mão de um comportamento específico de navegação ou recurso e adotando um compatível com o nível de aplicativo que seu cliente quer.

O Google até se esforça nesse quesito e até com louvor nesse aspecto, mas é raro não ver algum desenvolvedor falando mal desse kit, justamente por que é limitante e vez ou outra você vai acabar implementando uma nova usando algum fragmento seu próprio ou criando um novo tipo de layout ou animação para superar as espectativas de seu cliente.

Claramente o que temos visto nos últimos 8 meses é que finalmente o cliente entendeu que o mercado de Android no Brasil é dominado pela Samsung, e fica mais fácil criar um aplicativo que rode apenas para ele, porém você não vai querer fazer um App apenas para uma marca, você quer fazer para o público em geral e isso cria uma falsa espectativa de que vai ficar bonito em tudo que é dispositivo.

Já viu o tanto de fabricante que existe?
frag_droid_brands

Imagine ter que criar vários deploys para diferentes marcas ou fabricantes? Haja recurso para isso.

Está tudo perdido? Claro que não, tudo depende de quanto você ou seu cliente está disposto à gastar na hora de criar as Apps, sempre a alternativa mais barata quando se não tem tanto prazo e dinheiro é usar cross-compilação, que no caso o Phonegap tem ajudado bastante.

A grande vantagem do phonegap é que você rapidamente pode criar Apps para peças publicitárias ou games em html5 ou até mesmo com Adobe AIR e usar uma API unificada e isso meu amigo, atrai e muito os olhos de quem desenvolve.

Leiam

Apache Cordova/ Mobile/ Phonegap

Brasil já é a terceira maior comunidade do Phonegap

phonegap-devs

phonegap-devs

Quatro meses se passaram desde que eu escrevi aqui e aqui.

E escrevo novamente para agradecer a todos vocês, e hoje somos a terceira maior comunidade de desenvolvedores phonegap no Mundo, quase igual o sucesso que foi a Flex-Brasil, sendo a segunda maior do mundo. Logo em breve quero escrever outro post e agradecer por atingir o topo.

Vamos continuar crescendo, postando artigos na internet.

Quem for mais para as bandas do Social, tem um grupo bem bacana no Facebook.

[Atualizado] 12 horas depois, o número sobe para 128. Vocês são OS CARAS!

Apache Cordova/ Mobile/ Notícias/ Phonegap

Apache Cordova | Phonegap 2.3 liberado para download

cordova_logo

Acabaram de lançar a última versão do Apache Cordova ou em resumo Phonegap 2.3. Quem entrar pelo site do projeto Apache Cordova ainda vai encontrar apenas a versão 2.2, até o final do dia a última release estará no site.

Quem não pode esperar, pode entrar direto no site do projeto Phonegap e baixar.

Das grandes novidades foi o total suporte ao Windows Phone 8, com o novo Internet Explorer 10. Contando com 5x mais rápido do que para a versão 7.x

Faça o Download.

A lista completa de mudanças você encontra aqui.

Phonegap

Arquitetura de uma aplicação em Apache Cordova “Phonegap” para Multiplos projetos Mobile

cordova_logo

Criar uma App móvel com tecnologia Web parece tirar leite de pedra quando se tem disponível um SDK inteiro para você explorar. E eu concordo com você quando pensa nisso. Já que existe aquela grande batalha entre “O que devo usar App Web ou App Nativo?”. Não tenha dúvida que quem lhe escreve também tem esse tipo de dúvida, afinal assim como você eu sou desenvolvedor. E é gostoso compartilhar aquilo que você desbrava, especialmente em português; Em fim, é uma gama de dúvidas e arrodeios que você faz para chegar a uma solução final e entregar o produto para seu cliente.

Esse é mais um post com uma abrangência geral do que um bem específico, já que isso é um divisor de opiniões, eu preferir expor as minhas escolhas e de uma maneira geral ver como eu encaro isso.

Para esclarecer melhor algumas questões que eu tive e provavelmente você terá, faça um check-list do que é importante na hora de partir para as discussões móveis dentro de sua empresa ou dentro de si mesmo, eis algumas de suas perguntas.

– Quero expor minha App que extende um serviço Web.
– Quero criar uma App que use serviços Web e seja disponível para todas as plataformas populares “ios e Android”.
– Minha empresa precisa criar uma App especialmente para tomadores de decisão.
– Minha App precisa comunica-se com um dispositivo feito pela minha empresa
– Preciso criar um Jogo em 3D que não consuma tanto a bateria do aparelho.
– Quero criar uma App responsiva que funcione para N telas e N resoluções “Ninja Style”.
– Etc.

Dentre várias outras Apps, a sua não é diferente da Maioria, o que importa para quem usa sua App é a qualidade final do produto, se ela atinge o objetivo principal e se a UX é bacana.

É uma área bem ampla que gera horas e horas de discussões, o melhor a fazer nesses casos é usar o bom senso e uma rápida pesquisa na internet para ver o que é tendência e assim tirar melhor proveito do que já foi discutido.

Por hora, essas são as dicas que você pode aproveitar para planejar sua estratégia móvel daqui para frente. “Vamo sí bora” ao que interessa.

Arquitetar um projeto é simplesmente organizar o que você precisa e aonde você quer chegar, simplesmente é seguir a planta de uma casa antes de você construir uma, esboçar o que você precisa para concluir o projeto.

No Apache Cordova “PhoneGap”, você precisa tomar uma decisão quanto a utilizá-lo, eu já comentei antes sobre qual a real vantagem do PhoneGap. O que parece moleza à primeira vista, pode-se levar um bom tempo para concluir.

Faça um check-list do que você precisa, digamos que eu tenho um App que precisa dos seguintes itens:

  • App para Android
  • App para iOS
  • Formulários e Relatórios em gráficos
  • Efeitos de transição de tela
  • Chamar metodos em um serviço Restful
  • Fazer persistência local
  • Guardar informações de posição geográfica

O Apache Cordova consegue atingir todas essas funções, e você sabendo programar em CSS3, HTML5 e JS você consegue com facilidade atingir esse objetivo. A produtividade pode competir diretamente com o SDK nativo, isso pode virar assunto para outro post de pos e cons, por hora ficamos com a arquitetura.

Feito a checagem do que preciso, é hora de começar a criar o projeto, as bibliotecas que preciso são “Gestos, Web Storage/SQLite, GPS, RestFul”. Biblioteca para isso é que não falta. As que eu gostei bastante foram.  HammerJS, jStorage, ZeptoJS, AngularJS.

Bibliotecas em seus devidos lugares, agora é partir para a estrutura necessária. Compartilho aqui com você a estrutura usei em um projeto recente.

 Estrutura de pastas

 Configurações da plataforma

Se você seguiu o get Started to Cordova, provavelmente você terá todas as funções do aparelho habilitadas, isso pode assustar um pouco seu usuário e isso vai levar mais tempo para ser analisado por algumas lojas se sua App precisa daquilo ou não, como no caso da Apple Store. O segredo é deixar apenas habilitado o que realmente você precisa na App.

 

Prototipar ou criar o Wireframe de sua App

Elaborar uma App, não vai só de uma boa idéia, é necessário planejar o que ela vai ter, navegação, carregamentos, efeitos, reposição. E isso demanda um workflow que só vai ser possível se você prototipar ou fazer o wireframe dela. Ferramentas boas para isso tem diversas, eu gosto muito de utilizar o Adobe Fireworks, e caso você não tenha o Fireworks, você pode usar o Moqups, Porém se em seu caso essa App, demanda muita gente e muitas reuniões, sugiro os templates que a Smashing Magazine disponibilizou.

Inspire-se

Seja em um copo de vinho, ou na música do Michel Té logo, a inspiração tem que vim, o Dribbble e o Behance é uma baita fonte de inspiração. Para aquelas dúvidas de como apresentar a informação.

Testes outras Apps e veja como elas deram com um problema em particular que você vai enfrentar na sua.

Pratique

Depois que criar a App, dê a alguém que não tem muita habilidade na tela de um celular, em especial a uma criança, eu uso minha sobrinha como cobaia sempre que possível, e os insights que ela me fornece não tem preço, especialmente quando se fala em joguinho.

Tenha em mente que sua App se não for jogo, precisa funcionar com 1 dedo e que se encaixe em um denominador comum dos dedos em 44px. Assim como as fontes, no máximo 1.5em é o suficente para que seu App saia ganhando a atenção do usuário.

 

Colabore com os bugs

Apache Cordova é um projeto Open-source e você desenvolvedor tem a obrigação moral de devolver aquilo que você descobre, se achar erro, divulgue na lista oficial, se achou uma solução para o erro comite ela. Assim como em qualquer outro projeto open-source você está tornando seu trabalho um pouco mais fácil, devido o esforço de uns, então nada mais justo do que ajudar outros também a terem menos problemas, torne o mundo um pouco melhor.

 

Até o próximo.

 

 

AIR Mobile/ Android/ Apache Cordova/ ios/ iPad/ Iphone/ JQuery Mobile/ Phonegap/ Tablets

Apache Cordova vs Adobe AIR para dispositivos móveis

cordova_logo

É bom ter competitividade na esfera web, assim nasce projetos fantásticos que ajudam o desenvolvedor a criar soluções práticas e rápidas.
Este é o caso do Apache Cordova aka “Phonegap”, o Cordova tem surpreendido diversos desenvolvedores móveis, pela sua praticidade em acessar recursos nativos do aparelho para diferentes plataformas móveis, assim como o Adobe AIR o Apache Cordova te ajuda de uma maneira fácil acessar calendário, contato, notificações, alertas, vibrar, geolocalização, compasso e uma diversidade de novas funções built-in que vem no seu celular.

Depois de gastar um bom tempo estudando seu modelo, seu comportamento e como ele trabalha, decidi escrever um post sobre ele e compara-lo ao Adobe AIR, o que nesse caso eu tenho mais intimidade.

Assim como em qualquer tecnologia, você tem os pros e cons, acho que com isso você já tem uma noção maior do que usar e o que não usar, colocando em mente que cada caso é obrigatório analisar primeiro antes de decidir.

Apache Cordova

Pros:

  • Atinge 6 plataformas com uma só API
  • 90% de sua API já é built-in ( Vibration, BatteryLevel, Menu, Alertas, Calendário, Contatos)
  • Possibilita você criar suas extensões próprias com facilidade
  • Larga comunidade e alta frequência de builds.
  • Curva de aprendizagem muito rápida
  • Arquivo de instalação leve máx (4mb)
  • Performance de execução do App e efeitos de transição beira o nativo.
  • Interface pode ser feita em HTML/CSS/JS o que muito designer pode criar suas próprias Apps facilmente.
  • Componentes são criados e desacoplados em tempo de execução
  • Interfae é interpretada por um navegador interno WebKit

Cons:

  • Diversos frameworks para UI, faz você se perder em qual usar para seu projeto
  • Não tem suporte a HTTPS
  • Não suporta gestos por padrão, você tem que usar biblioteca externa para isso.
  • Ainda para dispositivos ios você tem que colocar o velho POG em ação para aceleração de hardware
  • Documentação é pobre de exemplos
  • Sem suporte a SQlite por padrão
  • Não suporta encriptação do sqlite
  • Suporta transferencia de dados em XML/JSON

 

Adobe AIR  3.5 para mobile

Pros:

  • Atinge apenas (Android 2.3.3+, ios 3.1+ e Blackberry Playbook)
  • Ciclo de vida de componentes baseado em eventos
  • Suporte a gestos por padrão
  • Suporta transferencia de arquivos em AMF/AMF3/JSON/XML
  • Suporta HTTPS/ SQLite/ Webcam/Audio e Video
  • Live stream de videos
  • Componentes já pré-fabricados usando o Flex Framework
  • Performance de 60fps quando usadas as classes Stage3D
  • Documentação extensa

Cons:

  • Arquivo de instalação ~10mb o que é grande para se transmitir via 3G
  • Interface é compilada e rendenizada
  • Suporta recursos nativos apenas se você extender com o ANE
  • Rendenização de texto é um pesadelo
  • Layout fluido para diversas telas diferentes é um POG gigantesco
  • Performance lenta quando se tem mais de 5 views
  • Ciclo de 24fps deixa qualquer celular com Android 2.3.3 lento
  • Não melhora o gerenciamento da bateria.

 

Claro que tem outros pros e cons de cada tecnologia, só que essas são as mais corriqueiras que você vai ver em grande parte dos casos quando for escolher.

E qual devo usar? Essa deve ser sua pergunta agora depois de ter lido os pros e cons. Minha resposta é vai depender de seu caso e o que você precisa fazer.

Um exemplo é, se você vai fazer jogos, eu lhe aconselho usar o Adobe AIR, já que a performance é melhor e muito mais fácil para criar jogos, agora se você vai fazer uma App para empresa que ela coleta informações de inventário, informações de cliente ou um App para registro de compras, o Apache Cordova é seu melhor parceiro.

Depois de duzias de Apps escritos, eu estou considerando o Apache Cordova como primeira opção e logo em seguida o Adobe AIR para boa parte dos Apps que escrevo diariamente.

Pergunto a você quais foram seus maiores problemas entre as duas plataformas?