Apache Cordova/ C#/ Mobile/ Phonegap/ Windows Phone

Apache Cordova ganha um forte aliado Visual Studio 2013 Update 2

visual_studio_cordova

A Microsoft, em especial seu time Web/Mobile tem me surpreendido absurdamente para o lado positivo.

O Time mobile da Microsoft estava em constante suporte ao Cordova desde 2011 com a possibilidade de criar Apps apoiando a iniciativa com o uso do Cordova para criar apps HTML5, CSS3 e Javascript embutidos junto ao Cordova como apps híbridas.

Hoje ela acaba de dar mais uma força absurda para o Cordova, suportando nativamente o Cordova no Visual Studio 2013 Update 2.

Quem possui o Visual Studio 2013 e quer atualizar para dar suporte, só baixar o Update 2 para sua felicidade.

A combinação WinJS com Cordova, é um grande avanço da parte da Microsoft, tirando ainda o suporte nativo ao C# com a plataforma Xamarin.

Hoje basicamente a Microsoft é a única empresa onde o suporte a tecnologias Open Source tem crescido à largos passos.

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/ Mobile/ NodeJS/ Notícias/ Phonegap

Phonegap App, um live reload para desenvolvedores

phonegap_app

Acabaram de lançar o PhoneGap App. Um aplicativo que permite você testar o aplicativo que você está fazendo, sem se preocupar nesse período em assinar, empacotar e testar o que você faz.

Para quem é desenvolvedor Front-end e conhece o benefício do Live Reload, é basicamente a mesma coisa, facilita para caramba na hora de testar enquanto desenvolve.

Como usar?

Primeiro passo

Baixe o Phonegap ou atualize para última versão.

Depois instale o Phonegap como global.

  npm install phonegap -g
Se você não tem ainda o phonegap ou Apache Cordova como é conhecido, você deve instalar primeiramente o NodeJs que vem acompanhado do NPM (Node Package Manager), para baixar o nodejs, vá até o site nodejs.org

Segundo passo

Acesse o Phonegap App e baixe o aplicativo para seu dispositivo Android ou iOS, para Windows Phone em breve será disponibilizado.

Terceiro passo

Com o aplicativo instalado em seu dispositivo e o phonegap já configurado começe com os seguintes comandos:

Se você não tem aplicativo, basta executar esses passos.

c:\ phonegap create MeuAplicativo
c:\ cd /MeuAplicativo
c:\MeuAplicativo/ phonegap serve

Se você já tem aplicativos, só executar assim:

c:\ cd /MeuAplicativo
c:\MeuAplicativo/ phonegap serve

O código fonte tanto do PhoneGap, assim como dos PhoneGap App e o site, estão disponíveis 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/ Notícias/ Open-source/ Phonegap

Phonegap 3.0 mais rápido e muito mais adaptável

cordova_logo

Chegou a tão aguardada versão do Phonegap onde você pode criar aplicativos que sejam compilados usando apenas as classes ou plugins que você de fato precisa, já que essa função era privilégio apenas de SDK nativo.

O Phonegap 3.0 marca uma nova era de aplicações feitas com tecnologias WEB, por que agora plug-ins e códigos de terceiros ficam muito mais organizados, pode ser distribuído pelo Node NPM.

cordova_plugin_diagram

Outra novidade tão aguardada foi a inclusão de outras plataformas à lista de suporte da tecnologia como o Windows 8, Firefox OS e Ubuntu. Show!

Duas novas APIs foram adiciondas, foram a inAppBrowser e a Globalization.

Um guia de migração também está disponível para quem quiser adaptar uma aplicação já existente ao novo framework, assim como criar plug-ins para o Phonegap ficou mais fácil ainda, veja aqui a documentação.

E a última novidade mais esperada foi no quesito de SDK nativo para fazer a compilação para determinada plataforma, se você não tem ele, você pode usar o CLI do projeto que é a interface de comandos do console que integram automaticamente com o serviço de Phonegap Build.

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/ Phonegap

Apache cordova 2.6 lançado

cordova_logo

Quem estiver pensando em já adotar o phonegap ou já possui projeto e quer atualizar, o Apache Cordova que é o coração do projeto phonegap acaba de lançar a última versão 2.6.

Eu até anunciquei aqui até a versão 2.4 e pulei a versão 2.5 por que para mim foi uma versão precipitada e ainda possuia muita função que não funcionava especialmente para o Windows 7+ e 8, além do suporte mal acabado para Storage no iOS.

Essa última versão 2.6 em seus change logs mostram quanta coisa mudou da 2.5 para 2.6.

Baixe a nova versão.