Android, Phonegap e Jquery Mobile (Parte 1 – Ambiente)

Muito trabalho e estudo, meio que sem tempo para escrever. Uma alternativa ao desenvolvimento móvel multiplataforma é o Phonegap, atualmente (14/05/2013) temos bastante material difundido na rede e um crescente numero de App construídas sobre essa metodologia. Pondero que apesar da atual versão apresentar velocidade bastante satisfatória, esta ainda é uma tecnologia voltada para pequenos e médios projetos. Instalando Ambiente (Na Web pode ser encontrado facilmente muitos tutoriais sobre a configuração do ambiente – Então esta etapa vou apenas Redirecionar):

Em Resumo:

baixar sdk android
baixar sdk java
baixar phonegap
baixar ant apache

configurar
JAVA_HOME
CLASSPATH
Path
– Para JAVA_HOME/bin
– Para Phonegap/bin
– Para Ant/bin
– Para Android/tools
– Para Android/Plataform_tools

1. Pré-Requisitos

1.1 Java JDK

É necessário ter o Java instalado no seu computador antes de inciar. O Eclipse nem mesmo vai abrir se isso não for obedecido. Mas é preciso fazer o download da JDK (Java Development Kit) que é aAPI de programação do Java, necessária para que a SDK do Android consiga compilar seus aplicativos para assim executá-los no celular ou tablet.

Download do Java JDK
  • Clique na primeira caixa: Java Platform (JDK) que na época da edição desse artigo estava na versão 7u9.
  • Na próxima tela, aceite os termos do acordo clicando em Accept License Agreement e clique no arquivo correspondente ao seu sistema operacional (Windows x86 ou Windows x64). Na dúvida, clique no correspondente ao Windows x86.
  • Quando o download for finalizado, instale. A instalação é simples, do tipo “avançar, avançar, finalizar”. Qualquer dúvida, post nos comentários.

1.2 Apache Ant

Apache Ant é uma ferramenta desenvolvida pela Apache Software Foundation utilizada para automatizar a construção de software. É utilizada pelo PhoneGap para a construção do aplicativo inicial. Mais informações acesse o site apache.org.

  • Acesse a página de download do Apache Ant.
  • A opção other mirror permite escolher o servidor (mirror) desejado. Você pode deixar a opção inicial ou escolher outra.
  • Logo abaixo, você ainda pode optar por baixar o Apache Ant compactado como ziptar.gz outar.bz2. Clique na opção que você preferir.
  • Após o download, descompacte no local de sua preferência.
  • Não é necessário fazer instalação.

2. Instalando o SDK do Android, o Eclipse e o plugin ADT

2.1 Android Developer Tools

A ADT-bundle é um pacote completo do mínimo necessário para começar a desenvolver para Android:

  • Android SDK Tools – API e ferramentas para construir, testar e debugar os aplicativos
  • Android Platform Tools – Ferramenta de controle das diferentes versões do Android que serão emuladas para testar o aplicativo
  • Última versão do Android para ser emulado

Após o download, descompacte o arquivo no local desejado. Serão descompactadas duas pastas:

  • Eclipse
  • SDK

Entre na pasta Eclipse e abra a IDE clicando 2x sobre o arquivo eclipse.exe. Splashscreen eclipse-adt Você será questionado sobre o workspace. O workspace é o local onde seus projetos serão armazenados. Escolha a pasta que desejar. Assim que o Eclipse for aberto, você será questionado também se deseja contribuir com estatísticas de uso da SDK para futuros possíveis melhoramentos na API. Escolha sim ou não, de acordo com sua vontade.

 2.2 Instalando o Plugin ADT

Apesar do Eclipse ADT vir, teoricamente, com o plugin já embutido, eu ainda não entendi porque, é preciso instalá-lo manualmente para se ter acesso ao Platform Tools, onde o emulador de Android é administrado, bem como as instalações de diferentes versões.

  • Acesse o menu Help – Install New Software…
  • Clique no botão ADD no topo direito da tela.
  • Na tela Add Repository que aparece, informe “ADT Plugin” para Name e a seguinte URL paraLocation:

https://dl-ssl.google.com/android/eclipse/

  • Clique em OK.
  • Duas opções disponíveis para download serão exibidas, selecione Developer Tools e clique em Next.
  • Na próxima tela, você verá a lista de ferramentas a serem instaladas. Clique em Next.
  • Leia e aceite os termos do acordo e clique em Finish.

Se você receber um aviso de segurança dizendo que a autenticidade ou a validade do software não pôde ser verificada, clique em OK.

  • Quando a instalação finalizar, reinicie o Eclipse.
No menu Window, você acabou de ganhar os sub-menus Android SDK ManagerAndroid Virtual Device Manager e Run Android Lint.

2.3 Gerenciando máquinas virtuais Android

Antes de começarmos a programar, precisamos deixar as máquinas virtuais Android já instaladas. Essas máquinas virtuais são emuladores de aparelhos celulares ou tablets utilizando o sistema Android. Os aplicativos desenvolvidos serão testados nesses emuladores.

  • No Eclipse, acesse o menu Window – Android SDK Manager.
  • Ao abrir a janela, uma barra de carregamento no rodapé estará exibindo o progresso de atualização do repositório, procurando novas versões disponíveis de emulador. Espere até que o processo seja finalizado.
  • Na janela do Windows SDK Manager encontramos as ferramentas necessárias para o desenvolvimento de aplicativos (Android SDK Manager e Platform-Tools) já instalados, além da imagem da última versão do Android disponível, que no meu caso é a versão 4.2 (API 17).
Android SDK Manager
  • Você pode selecionar qualquer outra versão do Android para ser emulada de acordo com a sua vontade ou necessidade. Abra o nó correspondente à versão desejada e selecione pelo menos as opções SDK Platform e uma System Image, assim como pode ser visto que são as únicas opções instaladas do Android 4.2. Fique a vontade se desejar instalar todos os pacotes.
  • Por exemplo, eu vou instalar a versão do Android 2.3.3. Abro o nó correspondente e seleciono os pacotes SDK Platform e Intel Atom x86 System Image.
  • Depois de selecionar as versões que deseja instalar, clique no botão Instal X Packages, onde X é o número de pacotes selecionados.
  • Leia as descrições dos pacotes e a licença, seleciona a opção Accept All e clique em Install.
  • Aguarde o download e a instalação dos pacotes. Dependendo da quantidade de pacotes selecionados pode demorar bastante.
  • Após a finalização, feche o SDK Manager.
Depois de instalado a plataforma e a imagem de cada versão do Android, o próximo passo é criar os emuladores para testarmos nossos aplicativos.
  • Acesse agora o menu Windows – Android Virtual Device Manager
  • Clique no botão New para adicionarmos um novo AVD – Android Virtual Device
  • Na tela de criação do novo AVD, preencha os campos como na imagem abaixo:
Android Virtual Device (AVD)
  • Dei o nome do meu AVD de Nexus-S apesar de não ter exatamente as mesmas configurações. Além do nome, é importante selecionar o tamanho da tela do dispositivo na opção Device e a versão do Android na opção Target. As demais opções não têm necessidade de alteração por agora.
  • Como eu selecionei Nexus S em device, a opção target já foi selecionada automaticamente com o valor Android 2.3.3 (claro que ela precisa estar instalada, como foi mostrado no passo anterior), mas essas opções podem ser selecionadas de acordo com a sua vontade.
  • Clique no botão OK.
  • Temos agora na nossa lista de dispositivos um AVD chamado Nexus-S com tela de 4.0” e Android 2.3.3 para testar nossos aplicativos.
Android Virtual Device Manager
  • Feche a janela.
Você poderá instalar vários AVDs e escolher em qual AVD testar seu aplicativo na hora da execução. Esse processo será abordado no final do artigo.

3. Instalando o framework PhoneGap

Como dito anteriormente, o PhoneGap converte códigos escritos em HTML5, CSS e Javascript para a linguagem nativa do Android. Para isso, o mesmo conta com uma framework completo que pode ser baixado no site oficial.
  • Faça o download do framework no site phonegap.com.
  • A versão atual é a 2.2.0 (na época da criação desse artigo), está em formato ZIP e tem aproximadamente 26mb.
  • Depois de baixá-lo, descompacte-o no local da sua preferência.
  • Dentro da pasta do PhoneGap descompactada, o nosso foco estará na pasta lib/android.
Agora antes de continuar com o PhoneGap, precisamos configurar o PATH e o JAVA_HOME, que são variáveis de ambiente do Windows.

3.1 Configurando o JAVA_HOME

JAVA_HOME é a variável de ambiente responsável por indicar onde o Java está instalado. No nosso caso, a JDK. Isso é importante de ser dito, já que o Java pode ser a JRE (Java Runtime Environment), que é responsável por executar aplicativos desenvolvidos em Java e a JDK (Java Development Kit), que é responsável por compilar aplicativos desenvolvidos em Java. Como vamos desenvolver aplicativos, vamos configurar o JAVA_HOME com a pasta onde está instalado a JDK. No meu caso, a JDK está instalada em C:\Program Files\Java\jdk1.7.0_09. Verifique o caminho da sua instalação corretamente.

  • Clique com o botão direito do mouse em Computador e clique em Propriedades.
  • No menu do lado esquerdo da tela, clique em Configurações avançadas do sistema.
  • A janela de Propriedades do Sistema é aberta na guia Avançado. Clique no último botão: Variáveis de Ambiente.
Variáveis de ambiente
  • Clique no botão Novo.
  • Em Nome da Variável escreve JAVA_HOME.
  • Em Valor da Variável cole o caminho da JDK no seu computador – termine o caminho da pasta sem a última barra “\”.
  • Clique em OK.
  • Não feche a tela de variáveis, vamos continuar ainda por aqui.

3.2 Configurando o PATH do Windows

As variáveis de ambiente do Windows são úteis para a execução de aplicativos sem a necessidade de acessar a pasta desse aplicativo. Isso geralmente é melhor entendido por antigos usuários do DOS ou usuários da família Linux/Unix, já que o PATH é preocupação de quem trabalha com linhas de comando.
Por exemplo, supondo que você queira executar um programa chamado wordstar.exe que está na pasta c:\editores. Sem o PATH configurado, você precisa primeiro entrar na pasta com o comando cd editores e depois digitar o nome do aplicativo wordstar. Se a pastac:\editores estivesse configurada na variável PATH, não seria necessário entrar na pasta onde está o aplicativo, de qualquer local que eu digitar wordstar ele será executado.
Precisamos colocar as pastas Platform-Tools Tools do SDK do Android, a pastalib/android/bin do PhoneGap, a pasta bin do Apache Ant e a pasta bin da JDK (ufa!) no PATH:
  • Observe a tela de variáveis de ambiente: a variável PATH não existe. Nesse caso, basta clicar no botão Novo e colocar o nome da variável como PATH. Se a variável já existir, basta selecioná-la e clicar em Editar.
  • No campo Valor da variável precisamos colocar o caminho absoluto das pastas citadas. É claro que o caminho dessas pastas vai depender do local onde você descompactou os downloads.
  • Lembre-se de separar as pastas entre si usando ponto-e-vírula.
  • No meu caso, tenho as seguintes pastas:
  • Platform-Tools: C:\Users\usuario\Documents\android\adt-bundle-windows-x86\sdk\platform-tools
  • ToolsC:\Users\usuario\Documents\android\adt-bundle-windows-x86\sdk\tools
  • PhoneGapC:\Users\usuario\Documents\android\phonegap-phonegap-8a3aa47\lib\android\bin
  • Apache Ant: C:\Users\usuario\Documents\android\apache-ant-1.9.0\bin
  • Adicione todas essas pastas no PATH separadas entre si por ponto-e-vírgula.
  • No final, adicione ainda %JAVA_HOME%\bin. Esse comando adiciona a pasta bin do Java no PATH.
  • Vá clicando em OK até fechar a tela de configurações avançadas do sistema. Estamos prontos para começar a desenvolver.

4. Criando um aplicativo com PhoneGap

O PhoneGap tem um comando para ser executado em linha-de-comando, no prompt do DOS, onde ele cria uma aplicativo básico utilizando seu framework. Depois de criado é só abrir o aplicativo no Eclipse e programar.

  • Abra o prompt do DOS: clique no menu Iniciar e na caixa de pesquisa digite CMD. Aperte a tecla ENTER.
  • O comando responsável por criar os aplicativos utilizando o PhoneGap precisa de 3 parâmetros: o caminho completo onde seu aplicativo será criado, o nome do pacote e onome do aplicativo propriamente dito.
  • Vamos criar um aplicativo de exemplo chamado helloworld que ficará na pastac:\android\helloworld no pacote com.helloworld (o nome do pacote deve ser sempre composto por no mínimo dois nomes separados por ponto).
  • O comando a ser digitado será: create c:\android\helloworld com.helloword helloworld
  • Digite o comando e aperte ENTER.
  • Se tudo correr bem, você verá as seguintes linhas de comando:

Comando de criação do aplicativo com PhoneGap

  • Seu aplicativo está pronto.
  • Abra o Eclipse (que está na pasta do SDK do Android, em ADT-bundle).
  • Acesse o menu File – New – Other ou CTRL + N.
  • Selecione a opção Android Project from Existing Code e clique em Next.
  • Clique em Browse e selecione a pasta do seu aplicativo, que está em c:\android\helloworld.
  • Clique em Finish.
  • Seu projeto está aberto e pronto para ser alterado e testado no emulador.
  • Clique com o botão direito do mouse sobre o projeto HelloWord, vá até o menu Run AS e clique em Android Application. O aplicativo será executado no emulador criado anteriormente, o fictício Nexus-S.
App exemplo do PhoneGap
  • Esta é a tela do aplicativo criado pelo PhoneGap.
  • Se você instalou mais de um AVD e deseja selecionar qual utilizar, feche o emulador atual, clique com o botão direito do mouse sobre o seu aplicativo HelloWorld, vá até a opção Run Ase clique em Run Configurations.
  • No menu ao lado esquerdo, selecione o seu projeto HelloWorld, e do lado direito da tela selecione a guia Target.
  • Selecione a opção Always prompt to pick device e clique em Close. Assim, você sempre será questionado sobre qual AVD utilizar quando o aplicativo for utilizado.
  • Execute novamente o aplicativo clicando com o botão direito sobre HelloWorld – Run As– Android Application.
Selecionar um AVD para executar o aplicativo
  • Selecione Launch a new Android Virtual Device.
  • Selecione a versão do AVD desejado e clique em OK.

Sobre daniloitj

Bacharel em Ciências da Computação
Esse post foi publicado em Android, Java, Javascript, Jquery Mobile, Phonegap, Programming. Bookmark o link permanente.

Deixe um comentário