quinta-feira, maio 31, 2012

Android: Apache Cordova

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: 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
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 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. 

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

Abra o arquivo AndroidManifest.xml, e adicione o seguinte conteúdo entre as tags <uses-sdk.../> e <application.../> :

<supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true" />

    <uses-permission android:name="android.permission.CAMERA" />
    <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" />


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

Ufa! Acabaram-se as configurações!

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

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

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

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: http://docs.phonegap.com/en/1.7.0/index.html

2 comentários:

  1. Fábio, apesar de o projeto "Cordova" ainda estar "engatinhando", é uma ideia muito promissora.
    Imagine se o desenvolvimento mobile conseguir ser padronizado? O ganho que trará para as empresas desenvolvedoras será incalculável. Parabéns pelo Blog, tem um conteúdo muito interessante e prático. Abraço, Rodrigo Lopes.

    ResponderExcluir