Começando com Phone Gap (Cordova): Hello World Android

Mais um post sobre PhoneGap/Cordova aqui no blog! O primeiro foi sobre iOS e hoje vamos aprender como integrar o PhoneGap/Cordova com Android usando o Eclipse.

Atenção, este post está desatualizado!

Para phonegap 2, veja: http://www.loiane.com/2012/11/comecando-com-phone-gap-2-cordova-hello-world-android/

Existem duas maneiras bem simples de começar com PhoneGap/Cordova e Android. A primeira é fazer tudo manualmente, que é o assunto do post de hoje e a segunda é utilizando um plugin do Eclipse para nos economizar um pouco de trabalho, que será discutido na segunda parte desse tutorial.

Requisitos:

Para esse tutorial, também é requisito já ter o ambiente Android todo configurado, ou seja, ter o SDK instalado na sua máquina e o plugin para Eclipse instalado também. Para maiores informações veja os dois links a seguir:

Passo a passo:

  1. Criar uma aplicação Android
  2. Adicionar o Phone Gap/Cordova no Projeto
  3. Implementar o Hello World
  4. Executar no Emulador Android
  5. Próximos Passos

1 - Criar uma aplicação Android

1.1 - O primeiro passo é criar um projeto Android. Para isso vá em Menu -> New -> New Project:

1.2 - Escolha Android Project:

1.3 - Dê um nome para seu projeto. Neste tutorial vou usar CordovaHelloWorld:

1.4 - Escolha a versão da API do Android. Para este tutorial vou usar a mais recente:

1.5 - Dê um nome para o pacote e clique em Finish:

1.6 - O projeto Android está criado! O projeto tem uma estrutura como a abaixo:

2 - Adicionar o Phone Gap/Cordova no Projeto

2.1 - O próximo passo é adicionar o PhoneGap/Cordova ao Projeto. Mas para isso precisamos preparar a estrutura do projeto para receber os arquivos. O primeiro passo é criar uma pasta chamada www dentro do diretório assets:

2.2 - Também precisamos criar uma pasta chamada libs na raiz do projeto:

2.3 - Agora que já temos a estrutura preparada, dentro do SDK do PhoneGap você vai entrar o arquivo cordova-1.7.0.js dentro do diretório lib/android. Copie esse arquivo para a pasta assets/www que acabamos de criar:

2.4 - Copie o arquivo cordova-1.7.0.jar (que encontra-se dentro do diretório lib/android) para dentro da pasta libs que também criamos:

2.5 - E por último, copie a pasta xml e todo o seu conteúdo (também do diretório lib/android) para dentro da pasta res:

2.6 - No final, a estrutura do projeto ficará assim:

2.7 - Agora precisamos adicionar o phonegap/cordova ao build path do projeto. Para isso, clique com o botão direito em cima da pasta libs -> Build Path -> Configure Build Path:

2.8 - Clique em Add JARs...:

2.9 - Escolha o arquivo jar que adicionamos no projeto:

2.10 - Clique em OK. Pronto. Agora tudo está configurado e podemos começar a implementar o Hello World!

3 - Implementar o Hello World

3.1 - Para implementarmos o HelloWorld, precisamos fazer algumas mudanças na classe Activity:

  • A primeira mudança é extender a classe DroidGap ao invés de Activity;
  • A segunda mudança é substituir a linha setContentView() por super.loadUrl("file:///android_asset/www/index.html");
No final a classe ficará assim (vou colocar os screenshots aqui, no final do post coloco o link com o código fonte completo para download):
3.2 - Depois precisamos editar o arquivo AndroidManifest.xml. Precisamos adicionar o seguinte conteúdo entre as tags <uses-sdk.../> e <application.../>:

[code lang="xml" firstline="1" toolbar="true" collapse="false" wraplines="false"]
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
[/code]

3.3 - Além disso, precisamos adicionar o atributo android:configChanges="orientation|keyboardHidden|screenSize" dentro da tag activity. No final, o arquivo vai ficar assim:
3.4 - Por último, precisamos criar uma página index.html dentro da pasta www:
3.5 - A página index.html vai ficar assim:

4 - Executar no Emulador Android

4.1 - Tudo pronto! Vamos executar agora! Clique com o botão direito em cima do projeto e escolha Run As -> Android Application:

4.2 - Aguarde um momento que o emulador vai abrir e executar a nossa aplicação:

5 - Próximos Passos

Agora basta estudar a API e soltar a criatividade!

O código fonte completo desse tutorial pode ser conferido aqui: https://github.com/loiane/cordova-android-helloworld

Update Novembro 2012:

Esse tutorial vale apenas para phonegap 1.x - a versão 2 é totalmente diferente. Em breve um post atualizado aqui no blog.

Até a próxima!