Fácil Integração do PhoneGap com o Eclipse
Autor: Alisson Pedrina | Publicado: 2014-09-01T11:52:00-07:00


Fácil Integração do PhoneGap com o Eclipse

Maneira simples de integração dessas ferramentas para desenvolvimento Android











Introdução


Neste post vamos ver duas maneiras de se utilizar o PhoneGap em conjunto ou integrado ao Eclipse. Na primeira maneira vamos realizar a integração do PhoneGap com o Eclipse de maneira mais, digamos, "nativa" e na outra utilizando um plugin.

Pré&nbsp;requisitos

Instale:
- SDK do Android
- Eclipse
- ANT

Variáveis de ambiente:
- ANDROID_HOME
- ANT_HOME

Referencie as duas variáveis acima na variável PATH.

Instalando o PhoneGap

Vamos precisar baixar um arquivo .zip contendo o PhoneGap. Segue abaixo a url.

https://github.com/phonegap/phonegap/archive/2.9.1.zip

Após completar o download descompacte o mesmo. Para o nosso exemplo vamos utilizar o diretório: "D:\programas\phonegap-2.9.1".

Precisamos agora compilar e empacotar o PhoneGap em um arquivo .jar para utiliza-lo em nossos projetos. Nas versões anteriores esse .jar já vinha junto com o arquivo .zip do PhoneGap. Nas novas versões temos que utilizar o procedimento da Listagem 1 para criarmos este arquivo:












Listagem 1




//comandos executados em um prompt

&gt;cd "D:\programas\phonegap-2.9.1\lib\android" &nbsp;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
//temos que ter os executáveis do SDK do android no PATH &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;



&gt; android update project -p . -t android-19

//após&nbsp;conclusão do comando acima rode o target ant "jar"&nbsp;
&gt; ant jar












Seguindo os passos da Listagem 1 conseguimos, dentre outras coisas, gerar o arquivo:&nbsp;

"D:\programas\phonegap-2.9.1\lib\android\framework\cordova-2.9.1.jar"

Integrando com o Eclipse

Para a integração com o Eclipse siga os passos abaixo:

1 - Abra o Eclipse e crie um novo projeto Android;

2 - Copie a pasta "xml" que está no caminho "D:\programas\phonegap-2.9.1\lib\android\framework\res" para a pasta "res" do seu projeto Android no Eclipse.

3 - Crie um diretório "www" dentro da pasta "assets" do projeto Android do Eclipse.

4 - Copie o arquivo "cordova.js" localizado em "D:\programas\phonegap-2.9.1\lib\android\framework\assets\www" para o diretório "assets\www" do projeto Eclipse.

5 - Crie um diretório "libs" na raiz do projeto Android do Eclipse e depois copie o arquivo&nbsp;"D:\programas\phonegap-2.9.1\lib\android\framework\cordova-2.9.1.jar" para este novo diretório.

6 - Clique o botão direito no projeto do Eclipse clique em Build Path -&gt; configure build path depois clique no botão &nbsp;Add JARS e selecione o arquivo cordova-2.9.1.jar

Agora podemos criar um arquivo index.html no diretório "www" do projeto Android do Eclipse e rodar a aplicação. Um exemplo de arquivo é o encontrado na Listagem 2






Listagem 2





&lt;!DOCTYPE HTML&gt;

&lt;html&gt;

&nbsp;&lt;head&gt;

&nbsp; &lt;title&gt;PhoneGap&lt;/title&gt;

&nbsp; &lt;script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"&gt;&lt;/script&gt; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp;&lt;/head&gt;

&nbsp;&lt;body&gt;

&nbsp;&nbsp;&nbsp; &lt;h1&gt;Hello World, javanapratica PhoneGap..!!!&lt;/h1&gt;

&nbsp;&lt;/body&gt;


&lt;/html&gt;














Podemos também inserir algumas configurações interessantes, porem opcionais, &nbsp;no AndroidManifest.xml para melhor integração. Veja a Listagem 3.




Listagem 3





&nbsp;&lt;supports-screens

&nbsp; &nbsp; &nbsp; &nbsp; android:anyDensity="true"

&nbsp; &nbsp; &nbsp; &nbsp; android:largeScreens="true"

&nbsp; &nbsp; &nbsp; &nbsp; android:normalScreens="true"

&nbsp; &nbsp; &nbsp; &nbsp; android:resizeable="true"

&nbsp; &nbsp; &nbsp; &nbsp; android:smallScreens="true" /&gt;



&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.CAMERA" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.VIBRATE" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.READ_PHONE_STATE" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.INTERNET" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.RECEIVE_SMS" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.RECORD_AUDIO" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.READ_CONTACTS" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.WRITE_CONTACTS" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /&gt;

&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.GET_ACCOUNTS" /&gt;



&nbsp; &nbsp; &lt;uses-permission android:name="android.permission.BROADCAST_STICKY" /&gt;



//e na activity

android:configChanges="orientation|keyboardHidden"















Integrando com o Eclipse



Outra opção que pode nos ajudar na integração PhoneGap &amp; Eclipse é a utilização de plugins.&nbsp;

Existem vários plugins para se trabalhar com o PhoneGap no Eclipse um deles pode ser instalado utilizando o Help-&gt; Install New Software através da url:



http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download



Conclusão







Pessoal espero que estás dicas ajudem. Comentem!!! Até mais