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:

Eclipse IDE (qualquer plataforma)
Android SDK
ADT Plugin para Eclipse
Phone Gap SDK

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:

Criar uma aplicação Android
Adicionar o Phone Gap/Cordova no Projeto
Implementar o Hello World
Executar no Emulador Android
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 images/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: