Android: Apache Cordova
Autor: Fábio Medeiros Faria | Publicado: 2012-05-31T21:15:00-03:00

Olá estimados seguidores, obrigado pela constante visita e apreciação.



Hoje, resolve inovar um pouco a temática, vou abordar um start de desenvolvimento mobile com Android (que é em Java \o/) mas utilizando o projeto Cordova da Apache. Este projeto me chamou bastante a atenção, pois, como ele é possível que desenvolvamos aplicações mobile para Android :), iOs :) e até para o WindonwsPhone :( rsrs mas, deixando o preferencialismo de lado, sigamos!

Mas além do projeto Cordova se mostrar multiplataforma, o que é excelente, o que me deixou mais empolgado foi a forma de desenvolvimento, pois, "não" necessitamos, diretamente, utilizar a linguagem nativa de cada plataforma. Todo o desenvolvimento é realizado por meio de HTML e JavaScript, isso mesmo! Segmento este, que a maioria dos desenvolvedores estão(amos) acostumados.



O objetivo deste poste é mostrar a configuração do Apache Cordova num projeto Android (ahhh já testei no iOs, ficou show) e realizamos uma interação simples.

Obs: este post não irá demonstrar a configuração do ambiente de desenvolvimento android, é considerado que o mesmo já esteja devidamente pronto!

IMPLEMENTAÇÃO

Utilizando o Eclipse e o emulador android, o primeiro passo realizar o download dos artefatos do Cordova para serem acoplados ao projeto, o conteúdo está disponível em:&nbsp;http://incubator.apache.org/cordova/#download, ele já vem com um pacote de artefatos para cada uma das plataformas mobile citadas.

Feito isto, criaremos um projeto Android no Eclipse, com a seguinte configuração:













Tendo-se criado o projeto, na raiz do mesmo, crie uma pasta (folder) com o nome: lib;&nbsp;

No diretório /assets, crie uma pasta (folder): www (path será: /assets/www);



Copie o arquivo cordova-1.7.0.jar (baixado no link acima) para o diretório lib;

Copie o arquivo&nbsp;cordova-1.7.0.js para o diretório www.

Finalmente, copie o diretório xml para /res;



Pronto! Neste momento, todas as dependência foram adicionadas.&nbsp;



Para que o projeto tenha visibilidade aos fontes do Cordova, adicione o artefato&nbsp;cordova-1.7.0.jar no classpath da sua app mobile.&nbsp;

Abra o arquivo AndroidManifest.xml, e adicione o seguinte conteúdo entre as tags&nbsp;&lt;uses-sdk.../&gt;&nbsp;e&nbsp;&lt;application.../&gt;&nbsp;:

&lt;supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true" /&gt;

    &lt;uses-permission android:name="android.permission.CAMERA" /&gt;
    &lt;uses-permission android:name="android.permission.VIBRATE" /&gt;
    &lt;uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /&gt;
    &lt;uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /&gt;
    &lt;uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /&gt;
    &lt;uses-permission android:name="android.permission.READ_PHONE_STATE" /&gt;
    &lt;uses-permission android:name="android.permission.INTERNET" /&gt;
    &lt;uses-permission android:name="android.permission.RECEIVE_SMS" /&gt;
    &lt;uses-permission android:name="android.permission.RECORD_AUDIO" /&gt;
    &lt;uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /&gt;
    &lt;uses-permission android:name="android.permission.READ_CONTACTS" /&gt;
    &lt;uses-permission android:name="android.permission.WRITE_CONTACTS" /&gt;
    &lt;uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /&gt;
    &lt;uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /&gt;
    &lt;uses-permission android:name="android.permission.GET_ACCOUNTS" /&gt;
    &lt;uses-permission android:name="android.permission.BROADCAST_STICKY" /&gt;



Por último, adicione a propriedade&nbsp;android:configChanges="orientation|keyboardHidden"na tag &lt;activity&gt;, deste modo:
&lt;activity
            android:name=".CordovaHelloActivity"
            android:label="@string/app_name" 
            android:configChanges="orientation|keyboardHidden"&gt;


Ufa! Acabaram-se as configurações!

Vamos ao desenvolvimento: crie dentro do diretório www, anteriormente criado, o arquivo index.html, que deverá conter:
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Cordova&lt;/title&gt;
&lt;script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;

 function mensagem() {
  navigator.notification.alert("Mensagem cordova app for android!", null , "Ser Java!", "Ok");
 }

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Primeira aplicação Mobile em HTML&lt;/h1&gt;
&lt;input type="button" value="Acao" onclick="mensagem()"&gt;&lt;/input&gt;
&lt;/body&gt;
&lt;/html&gt;


Observe que este conteúdo, nada mais é, que implementação HTML e JavaScript, este deverá originar uma página com um botão, e ao acionar este, uma mensagem deverá ser exibida.

Resta agora direcionarmos a Activity para a página criada, então abra a classe CordovaHelloActivity e edite do seguinte modo:


package br.com.serjava.cordovahello;

import android.os.Bundle;
import org.apache.cordova.DroidGap;

public class CordovaHelloActivity extends DroidGap {

 @Override
 public void onCreate(Bundle saveInstanceState) {
  super.onCreate(saveInstanceState);
  super.loadUrl("file:///android_asset/www/index.html");
 }
}






Para testar, publique sua aplicação no seu emulador android 4.03 ou dispositivo compatível, o resultado será:



Embora tenha um "trabalhinho" inicial de configuração, pessoalmente, achei bem bacana o desenvolvimento de apps mobile deste modo: usando-se HTML e javascript!

Espero que tenham gostado!

Para maiores informações, consulte a documentação preliminar do projeto Cordova acessando:&nbsp;http://docs.phonegap.com/en/1.7.0/index.html