Linha de montagem de apps móveis

(Outro) passo-a-passo para usar o Apache Cordova (Phonegap) com Android SDK no Windows

Atualização (06/02): agora com Windows 32-bit.

Há uns seis meses escrevi (para minha própria consulta) um tutorial para instalar o Cordova e começar a brincar de desenvolver apps móveis no Windows. De lá pra cá muita coisa mudou ao ponto de o tutorial antigo hoje ser bem obsoleto. As versões mudaram, software compatível agora é deprecado, o novo software é incompatível, etc. Nova instalação, novo tutorial.

Pode parecer bonitinho, mas não é. Trata-se de uma instalação confusa e mal documentada oficialmente que pode levar mais de uma hora e eu estou reescrevendo porque é impossível lembrar todas “novidades” sem escrever. Todas as etapas mudaram e há pelo menos uma etapa completamente nova no processo.

Lembra que cada etapa depende da anterior pra funcionar corretamente: sem o NodeJS o Cordova não pode ser instalado, sem o Android SDK o Cordova não cria projetos Android, sem o Ant o Cordova não cria nada que precise de Java, e sem o Java nenhum desses funciona.

Necessário (links para download ao longo do artigo):

  • Java Development Kit e Java SE (standard edition, ambiente de execução)
  • Android Studio
  • Apache Ant
  • NodeJS
  • Git

Versão do Windows usada neste tutorial: Windows 8.1 32 e 64-bit. O Android Studio exige Windows 7 ou superior, outro software instalado aqui pode ter outros pré-requisitos. Boa sorte.

Instalação do Java SE e Java Development Kit

Versão do Java usada neste tutorial: 8 update 31

Observação: eu uso a instalação do Java do Ninite.com por praticidade e rapidez, mas caso não funcione (acontece), há também o link para o site da Oracle.

  1. (opcional) Desinstala o Java e JDK, se já estiver na máquina.
  2. Faz download do pacote com Java 8 (ambiente de execução) e JDK 8 (kit de desenvolvimento) em Ninite.com ou em Oracle.com (esse pacote do JDK da Oracle inclui tanto kit de desenvolvimento como ambiente de execução).
    • Nota muito importante: no site da Oracle, cuidado para escolher a versão 32-bit ou 64-bit conforme sua máquina.
  3. Instala pacote de instalação, até o final.
  4. Cria a variável de ambiente: JAVA_HOME=pasta do JDK, sempre sem terminar com / ou \ (no meu é C:\Program Files\Java\jdk1.8.0_31).
  5. Adiciona ao PATH: %JAVA_HOME%\bin .
  6. Reinicia a máquina.

Instalação do Android SDK

(para poder criar projetos Android com ou sem o Cordova)

Versão do Android SDK usada neste tutorial: Android Studio 135.1641136

  1. Download do novo Android Studio: developer.android.com/sdk. Clica em “Download Android Studio” e aceita a licença.
  2. Executa o instalador e seja paciente, isso pode levar um bom tempo.
  3. Durante a instalação o programa pode pedir que informe a localização do Java Development Kit. É a mesma da variável JAVA_HOME (no meu é C:\Program Files\Java\jdk1.8.0_31). Se mesmo colocando a localização correta ele não reconhecer a instalação do Java nesta etapa (“Sorry, we could not detect a valid JDK…”), é um problemão. Quando aconteceu comigo pesquisei soluções na internet, e nenhuma funcionou. A solução que funcionou comigo foi começar novamente a instalação, incluindo desinstalar a versão recém instalada do JDK e JRE, baixar novamente tanto o Java quanto o Android Studio tomando cuidado para escolher a versão certa (32 ou 64bit), reiniciar, instalar o Java novamente, rever as variáveis de ambiente, reiniciar, tudo tudo de novo). Boa sorte.
  4. Durante a instalação o programa pode perguntar se deseja instalar um Android Virtual Device (AVD). Aceita. Se o instalador detectar compatibilidade com emulação de Atom x86 ele vai oferecer para usar a acelaração HAXM da Intel, o que é excelente. Aceita também. Nesse caso o instalador ainda vai perguntar quanta memória RAM deixar liberada para a emulação. Eu uso sempre a quantidade recomendada pelo próprio instalador.
  5. Terminada a instalação, o instalador pode abrir automaticamente o Android Studio (se não, abre manualmente), deixa rodar a primeira vez, fazer download de atualizações e criar o AVD (caso o passo 4 não tenha aparecido, o Android Studio cria um AVD comum com configurações padrão).
  6. Clica em Finish quando terminar. Vai abrir a tela de boas-vindas.
  7. Clica em Configure > SDK Manager. Vão aparecer todos os pacotes disponíveis, instalados e para download, do Android SDK.
  8. Procura o grupo “Android 4.4.2 (API 19)”, expande este grupo e dentro marca o pacote SDK Platform. Provavelmente haverão outros pacotes já marcados que são atualizações e pacotes recomendados pela Google. Clica em “Install xx Packages” (botão embaixo à direita na janela). Na janela seguinte vai selecionando cada pacote e clicando em “Accept License”, até que todos estejam “aceitos”, e finalmente clica em “Install”. O progresso da instalação pode levar um tempo. Enquanto isso, pode seguir com as etapas seguintes do tutorial (só não reinicia o computador enquanto os pacotes estiverem sendo baixados e instalados).
    • O motivo desta etapa é o seguinte: estranhamente, a versão atual do Cordova não gera app nativo do Android 5.0 Lollipop automaticamente (e sim, estamos em 2015).  O Cordova manda o Android SDK gerar um app para Android 4.4.2 Kit Kat, pra isso vamos precisar que o Android SDK esteja preparado para isso.
    • Nota: o app gerado para Kit Kat funciona no Lollipop normalmente, contanto que observem as “novidades” (restrições novas) do Android 5.0.
  9. Cria a variável de ambiente: ANDROID_HOME=pasta do SDK, sem aspas e sem terminar com / ou \ (no meu é C:\Users\<usuário>\AppData\Local\Android\sdk).
    • Nota que no lugar de <usuário> vai o nome do usuário correspondente.
  10. Adiciona ao PATH: %ANDROID_HOME%\tools%ANDROID_HOME%\platform_tools.
    • Este passo não é estritamente necessário para usar o Cordova, mas é útil para testar e debugar a conexão de um aparelho Android com o computador por USB.
  11. Quando a instalação de pacotes no SDK Manager estiver completa, fecha o SDK Manager e Android Studio.
  12. (opcional) Cria atalhos para fácil acesso ao Android Studio. No Windows 8.1, abre a lista completa de programas e clica com botão direito em “Android Studio (novo)” seleciona “Fixar na Tela Inicial”, assim o atalho vai aparecer na Tela Inicial imediatamente e pode ser copiado para a área de trabalho ou outros locais.

(opcional) Criação de um AVD

A instalação do Android Studio cria automaticamente um AVD (Android Virtual Device), que serve para testar apps em um emulador na tela do Windows. O problema é que se o instalador cria um AVD de CPU Intel Atom x86 em uma máquina sem aceleração HAXM da Intel, o AVD não vai funcionar. Deve-se destruir o AVD criado na instalação e criar um AVD ARM normal (mais lento que o AVD Intel, mas é a única opção se a máquina não oferece o suporte à emulação do Atom).

O único jeito de saber se o AVD instalado funciona é testando, então independente da configuração, esse pode ser um bom momento de seguir pelo menos passos 1-4.

  1. Abre o Android Studio.
  2. Na tela de boas-vindas, seleciona “Configure > SDK Manager”.
  3. No menu “Tools”, seleciona “Manage AVDs”. Vai aparecer a lista de AVDs criados. Seleciona um AVD, clica em “Start” e em “Launch”. Para abrir, pode levar vários minutos. Se nenhum AVD funcionar, e principalmente se surgir a mensagem de erro:

    ERROR: x86 emulation currently requires hardware acceleration! Please ensure Intel HAXM is properly installed and usable. CPU acceleration status: HAX kernel module is not installed!

    …será necessário criar e usar um AVD ARM.

    • Nota: em alguns casos, a sua máquina até é capaz de usar a aceleração HAXM mas a opção correspondente está desabilitada na BIOS. Habilitar é fácil, e isso pode tornar possível o uso de AVDs Intel Atom, mas processadores antigos podem não ter esta opção. Boa sorte.
  4. Não havendo nenhum AVD funcionando, seleciona cada um e clica em “Delete”.
  5. Clica em “Create” e preenche os campos:
    • AVD Name: Nexus5 (somente letras e números)
    • Device: Nexus 5 (ou outro que preferir)
    • Target: Android 5.0.1 (ou o que for mais recente)
    • CPU/ABI: ARM (se não estiver disponível, seleciona no campo anterior algum “Target” que tenha esta opção de CPU).
    • Skin: Skin with dynamic hardware controls
    • Front camera: none (pode ser habilitado mais tarde)
    • Back camera: none (pode ser habilitado mais tarde)
    • Memory Options (RAM): 768 (pode ser alterado mais tarde)
    • O restante das opções pode-se deixar como está.
  6. Clica em OK e aguarda, pode levar alguns minutos.
  7. Seleciona o AVD recém criado em clica em Start para vê-lo funcionando (deve demorar vários minutos para abrir).

Instalação do Apache Ant

Versão do Ant usada neste tutorial: 1.9.4

Este é um passo importante que é mal documentado tanto no site do Cordova, do NodeJS e do próprio Ant. Não é difícil, mas à época que escrevi o primeiro tutorial essa informação não aparecia em nenhum guia de “como criar seu primeiro app com Cordova” que eu li.

  1. Vai em ant.apache.org/bindownload.cgi e faz o download do Ant estável mais recente (.zip archive).
  2. Descompacta para o local que julgar conveniente (eu uso C:\Program Files\Ant).
  3. Cria a variável de ambiente: ANT_HOME=pasta do Ant (ex.: C:\Program Files\Ant).
  4. Adiciona ao PATH: %ANT_HOME%\bin .
  5. Agora convém reiniciar o computador e testar o Ant, abrindo uma janela de prompt de comando e executando o comando “ant”. A resposta pode demorar vários segundos, mas tem que retornar o seguinte:
    Buildfile: build.xml does not exist!
    Build failed

    É uma mensagem de erro normal que significa que o Ant foi reconhecido e tentou construir um programa Java e não conseguiu, porque não existe nenhum na pasta que você executou o comando. Se aparecer qualquer mensagem de erro ALÉM desta, algo deu errado, provavelmente o Ant não está localizando seu JAVA_HOME (nesse caso revise os passos de instalação do Java, JDK e do próprio Ant; é obrigatório reiniciar após definir as variáveis de ambiente para que elas sejam reconhecidas).


Instalação do Cordova/PhoneGap

Versão do NodeJS usada neste tutorial: 0.10.36
Versão do Cordova usada neste tutorial: 4.2.0

  1. Vai em NodeJS.org, faz o download do NodeJS e instala no computador. No instalador, deixa todas as opções habilitadas, inclusive de adicionar o Path.
  2. (opcional) Cria atalhos para fácil acesso ao NodeJS. No Windows 8.1, abre a lista completa de programas e clica com botão direito em “NodeJS command prompt” seleciona “Fixar na Tela Inicial”, assim o atalho vai aparecer na Tela Inicial imediatamente e pode ser copiado para a área de trabalho ou outros locais.
  3. Abre o NodeJS command prompt recém instalado e insere o comando (necessário conexão com a internet):
    npm install -g cordova
  4. Espera até terminar de baixar e instalar todos os pacotes.
    Se os passos 3 e 4 não funcionarem, reinicia o computador e tenta novamente.

(novo) Instalação do Git

Versão do Git usada neste tutorial: 1.9.5-preview20141217

Hoje, muitos dos plugins principais necessários para se desenvolver no Cordova estão hospedados no Github (e não no Apache.org), tornando necessária essa etapa.

Pra adicionar ironia à perda de tempo, o NodeJS possui um módulo Git, só que ele não resolve o nosso problema. É necessário instalar o Git completo para o Windows.

  1. Download do Git: git-scm.com/download/win.
  2. Executa o instalador.
  3. Nos componentes a serem instalados, eu desmarco “Windows Explorer integration” porque ele é desnecessário para o uso básico do Cordova em linha de comando, mas pode deixar se for usar o Git para outras coisas.
  4. No passo seguinte (Adjusting your PATH environment), seleciona a opção intermediária, “Use Git from the Windows Command Prompt”.
  5. Nos outros passos da instalação, deixa as opções padrão.
  6. Fecha a instalação quando completada.

Criação e execução de um programa Hello World

Abre o Node.js command prompt e digita os seguintes comandos:

cordova create hello com.exemplo.helloworld HelloWorld
Este comando cria um projeto na pasta hello, com identificador em estilo domínio reverso com.exemplo.helloworld, de um aplicativo chamado HelloWorld. A pasta hello não deve existir antes de o comando ser executado, o Cordova vai criar a pasta e adicionar todos os arquivos do projeto. O aplicativo criado faz só o mais básico: testa se o aparelho está pronto para rodar o aplicativo e exibe uma mensagem na tela. Mas ele não vai rodar até que sejam adicionadas as plataformas (abaixo).

cd hello
Entra na pasta hello.

cordova platform add android
Adiciona a plataforma Android a este projeto, ou em outras palavras, instala os arquivos necessários para que o projeto funcione  nativamente no Android. Lembra que tem que estar dentro da pasta raiz do projeto (hello).

Pra ver o programa funcionando, tem duas opções de comandos principais:

  • cordova emulate android
    Roda o programa em uma janela de emulador Android, se houver um AVD criado anteriormente. Lembre que você tem que estar dentro da pasta raiz do projeto (hello). Isso pode levar alguns minutos.

ou

  • cordova run android
    Instala e roda o programa em um dispositivo Android conectado ao computador por USB. Lembre que você tem que estar dentro da pasta raiz do projeto (hello). Para isso funcionar, a depuração USB tem que estar habilitada no aparelho (normalmente em “Opções de desenvolvedor”). Se não funcionar, o Cordova tentará executar o app em um AVD criado anteriormente (no emulador).

    • Quando isso não funciona, normalmente é porque o aparelho não está sendo reconhecido pelo Android Debug Brigde. Executa o comando adb devices. Deve aparecer algo como:
      List of devices attached
      SDFGKSDHGLSJH HTC ONE

      Se não aparece nenhum nome na lista, é porque o aparelho não foi reconhecido. Isso pode acontecer por muitas razões, mas recomendo instalar os drivers USB do aparelho no PC e procurar mais informações sobre “adb devices xxx” no Google, sendo xxx o modelo do seu aparelho. Boa sorte.

 

Adicionando plugins ao programa (e removendo também)

Abre o Node.js command prompt, navega até a pasta do raiz do projeto (ex.: hello). Para adicionar um plugin do Cordova ao programa, o comando é:

cordova plugin add <pacote>

… onde <pacote> é o nome de um pacote de plugin. Uma grande lista de plugins pode ser encontrada aqui. Os mais básicos estão aqui. Por exemplo, para trabalhar com o sistema de arquivos do aparelho, é necessário instalar o plugin “File”, com o seguinte comando:

cordova plugin add org.apache.cordova.file

Pra remover o mesmo plugin, troca “add” por “rm”.

cordova plugin rm org.apache.cordova.file

Há plugins que só podem ser encontrados fora do domínio apache.org, isto é normal. O plugin para trabalhar com um banco de dados SQLite está no Github (vê abaixo), e é por isso que espertamente instalamos o Git. Para adicionar este tipo de plugin funciona da mesma forma, é só saber de onde baixar (letras maiúsculas e minúsculas importam):

cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

Pra remover é um pouco diferente. Não adianta usar o “rm https://github.com…etc”. Tem que chamar o pacote pelo nome certo. Pra saber o nome, executa o comando:

cordova plugin list

Ele vai retornar todos os pacotes instalados. No caso deste pacote que testamos, vai aparecer assim:

com.brodysoft.sqlitePlugin 1.0.3 "Brodysoft SQLitePlugin"

O nome certo do pacote a ser removido é a primeira parte, em formato de domínio reverso (atenção às letras maiúsculas e minúsculas). Agora sim:

cordova plugin rm com.brodysoft.sqlitePlugin


Se você curte meus tutoriais e se estiver a fim, pode me pagar uma cerveja. Escolha a que você prefere doar clicando abaixo (é pelo Paypal, mas não precisa conta para doar). Juro solenemente usar toda a receita de doações em cerveja apenas. Obrigado! 😉

(R$ 3,50) (R$ 7) (R$ 19)

12 thoughts on “(Outro) passo-a-passo para usar o Apache Cordova (Phonegap) com Android SDK no Windows”

  1. Prezado Rafael,

    ótimo post. Muito objetivo.

    Gostaria de tirar uma dúvida, se possível, por favor: ao desenvolver uma app com o Cordova, por exemplo, para Android, utilizando recursos de design responsivo, essa app se ajustará automaticamente às várias resoluções dos aparelhos?

    Obrigado.

    Wilson

    1. Oi Wilson

      Para te dizer a verdade não testei muito trabalhar com diferentes resoluções no Cordova, mas pelo que entendo, isso pode funcionar sim, dependendo de como é feito.

      Em design de sites, eu por exemplo gosto de controlar como cada página é exibida em diferentes resoluções a partir de configurações direto no CSS (exemplo: @media screen and (max-width: 480px) {... ... ...}). Na minha experiência, isso funciona bem em sites no navegador do Android, mas em apps do Cordova, cada div vai ter atributos reconhecidos pelo próprio Cordova (por exemplo, div data-role="content") que têm funções particulares do Cordova e podem confundir o CSS.

      A promessa do Cordova é sempre reconhecer html, css e JavaScript bem escrito, mas como sempre, convém testar, testar, testar…

      Se quiser, posta tuas descobertas por aqui.

      Abraço!

  2. Bom, parabéns pelo post! me ajudou bastante com o Cordova aqui.
    há dias procurava um post que pudesse me ajudar ao invés de confundir ainda mais. Está funcionando tudo direitinho aqui.
    Valeu cara!

  3. Boa tarde Rafael
    fiz todo o procedimento detalhe por detalhe mas na hora de instalar o cordova da o seguinte erro
    C:\Windows\system32>npm install -g cordova
    C:\Users\Diego\AppData\Roaming\npm
    `– (empty)

    npm ERR! Windows_NT 10.0.14393
    npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “install” “-g” “cordova”
    npm ERR! node v6.9.1
    npm ERR! npm v3.10.8
    npm ERR! path C:\Users\Diego\AppData\Roaming\npm\node_modules\.staging\abbrev-f63dd7d6
    npm ERR! code ENOENT
    npm ERR! errno -4058
    npm ERR! syscall rename

    npm ERR! enoent ENOENT: no such file or directory, rename ‘C:\Users\Diego\AppData\Roaming\npm\node_modules\.staging\abbrev-f63dd7d6’ -> ‘C:\Users\Diego\AppData\Roaming\npm\node_modules\cordova\node_modules\npm\node_modules\abbrev’
    npm ERR! enoent ENOENT: no such file or directory, rename ‘C:\Users\Diego\AppData\Roaming\npm\node_modules\.staging\abbrev-f63dd7d6’ -> ‘C:\Users\Diego\AppData\Roaming\npm\node_modules\cordova\node_modules\npm\node_modules\abbrev’
    npm ERR! enoent This is most likely not a problem with npm itself
    npm ERR! enoent and is related to npm not being able to find a file.
    npm ERR! enoent

    npm ERR! Please include the following file with any support request:
    npm ERR! C:\Windows\system32\npm-debug.log
    npm ERR! code 1
    será que podes ajudar?

    1. Oi Diego. Infelizmente não tenho como ajudar. Recomendo reler todos os passos com atenção e reiniciar o processo.
      Uma coisa que não aparece no passo-a-passo e fui descobrir depois é que é recomendável instalar as versões 32 e 64 bits do Java no Windows 64 bits (quase todos hoje em dia). Mas não sei se é esse o problema. Uma orientação que já aparece no artigo é a de reiniciar em caso de erro na instalação do Cordova no Node, mas é difícil dizer se isso resolverá seu problema. Recomendável buscar suporte com a comunidade do NodeJS caso nada mais funcione. Boa sorte.

      1. opa. obrigado pela resposta.
        eu achei a solução.

        no meu caso eu estava reinstalando tudo depois de vários erros e tive que limpar as pastas do node que ficam dentro do appData
        e ai funcionou.
        além do mais no windows 10 tem que executar no cmd como administrador para poder instalar tudo

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *