Criando aplicativos híbridos com Apache Cordova

[Karina Harumi]

Tópico originalmente criado por: @Jonathan Santos

Antes de começar, já que a instalação demora, saiba que se você sabe construir páginas para a web ( AngularJS , jQuery , React , HTML + CSS + JS puro , etc…), você pode criar aplicativos para Android , IOS , Windows Phone , e demais plataformas. Fique até o fim, você vai ver que é verdade e além disso vai pensar: Puts, era só isso!?

Bom, o que é Apache Cordova ? Basicamente é um cara que com um único código é possível criar aplicações híbridas, ou seja, funciona nas plataformas mobile mais conhecidas. Ele é Free e Open Source , tem suporte a plugins para uso de recursos nativos tais como bateria, vibra, câmera, etc… E é muito, mas muito fácil de trabalhar ( https://cordova.apache.org/ 6).

Sem mais, vamos a configuração do ambiente. Baixe e instale:

JDK 1.8 - http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 3
Android Studio - http://developer.android.com/intl/pt-br/sdk/index.html 2(última versão)

Dentro do Android Studio, baixe as seguintes SDKs:

• Tools/Android SDK Tools (última versão)
• Tools/Android SDK Platform Tools (última versão)
• SDK Platform API 23
• Extras/Google Repository
• Extras/Support Library
• Extras/Support Repository

ATENÇÃO! Para ver essas SDKs, crie um projeto qualquer e encontre na barra superior um ícone do Android com a seta para baixo.

Por fim, instale o NodeJS, a versão LTS mais recente - http://nodejs.org 1

Como disse, isso vai demorar um pouco, vá até a garrafa mais próxima pegue um café, troque umas ideias de inovação com seu companheiro de trabalho, implemente algo e volte…

…

Legal! Parece que você já voltou! Já instalou tudo? Se algo não der certo, entre em contato, terei o prazer de ajudar

Agora vamos ter que editar as variáveis de ambiente, aqui vou me ater somente ao Windows, mas o mesmo processo deverá ser feito para Linux e Mac.

• Use a busca do Windows ou encontre as ‘Propriedades do Sistema’ e clique no botão ‘Variáveis de Ambiente’

• Edite a variável ‘PATH’ e após o ; adicione os seguintes paths:

  C:\Users\ seu.usuario \AppData\Local\Android\sdk\platform-tools
  C:\Users\ seu.usuario \AppData\Local\Android\sdk\tools

• Não esqueça de trocar o seu.usuario para o nome do usuário que está utilizando na máquina

• Agora num prompt de comando (cmd) teste 4 comandos: java, javac, android, node --version

• Se nenhum deu erro, ótimo, podemos ir mais além agora, caso algo dê errado, não se esqueça, entre em contato!

Agora, enfim, chegamos no Apache Cordova:

• No cmd, digite ‘ npm install -g cordova ’ (esse também demora um pouquinho)
• Crie uma pasta qualquer, caminhe até ela no cmd e digite: cordova create . br.com.tecnospeed.myApp myApp
• Agora adicione uma plataforma, no nosso caso, vamos adicionar apenas a android: cordova platform add android
• Por fim, se tudo estiver ok: cordova run android (isso abrirá um emulador)
• Ao abrir, deverá aparecer a logo do Apache Cordova e uma tarja verde com o escrito: DEVICE IS READY
• Caso queria testar direto no Android basta plugá-lo a sua máquina e mandar rodar o run novamente. Se por ventura não funcionar, verifique se os drivers para o seu celular estão instalados e se o seu Android está habilitado o modo desenvolvedor ( http://www.techtudo.com.br/dicas-e-tutoriais/noticia/2014/10/como-ativar-o-modo-desenvolvedor-no-android.html 1).
• Ou ainda, você servir no seu navegador, usando o comando: cordova serve

Até aqui tudo certo?

Seguindo, como instalar e utilizar um plugin do Apache Cordova:

• Acesse o site: https://cordova.apache.org/plugins/ 3
• Busque por: device
• Verifique o nome dele e execute o comando: cordova plugin add cordova-plugin-device
• Vá até a pasta do projeto, no arquivo www\js\index.js adicione as seguintes linhas, dentro da função onDeviceReady :

 document.getElementById('info').innerHTML = '<br>' +
  device.cordova + '<br>' +
  device.model + '<br>' +
  device.platform + '<br>' +
  device.uuid + '<br>' +
  device.version + '<br>' +
  device.manufacturer + '<br>' +
  device.isVirtual + '<br>' +
  device.serial + '<br>'; 

• Agora no arquivo www\index,html após a linha 44 adicione apenas:

 <div id="info"></div> 

• Execute o cordova run android comando para testar
• Deve ter aparecido os dados sobre o dispositivo, caso não aparaeça, talvez seja necessário inspecionar o código gerar e a saída do console, e esse é o próximo passo…

Inspecionar minha aplicação Android pelo computador

• Fácil, fácil
• Vá até o seu Google Chrome e na barra de endereços digite: chrome://inspect/#devices
• Com o seu Android conectado ao PC, o mesmo irá aparecer na listagem e ai basta apenas clicar em inspect e verificar ou fazer o que bem entender.

Próximo passo!

Caso queria gerar o seu aplicativo para IOS por exemplo, você PRECISA ter um Mac. Existem alguns serviços online em que você aluga uma máquina Mac para esse fim, porém ter um Mac em mãos facilita e muito o seu trabalho. Vale ressaltar que para publicar seus aplicativos você precisa ter contas de desenvolvedor tanto no Google quanto na Apple, mas isso é assunto para uma outra hora…

Não acredite que por serem híbridas essa aplicações ficarão extremamente lentas ou absurdamente mais lentas em relação as linguagens nativas, isso é minimo e acaba não importando. O futuro está em aplicações Web, logo este é o futuro, pode confiar, se bem construído, você terá mobile apps poderosos e multi-plataforma.

Estamos encerrando por aqui, mas como o Apache Cordova aceita HTML + CSS + JS você ganha uma gama de possibilidades, tais como utilizar jQuery além do javascript nativo, construir um app em AngularJS ou ReactJS , enfim, o limite aqui é até onde vai sua criatividade e disposição. Só não se esqueça de considerar o fato que cada plataforma tem o seu design pattern, não estrague o UX do seu usuário.

É isso pessoal, meu muito obrigado e até!