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á:
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
Fábio, apesar de o projeto "Cordova" ainda estar "engatinhando", é uma ideia muito promissora.
ResponderExcluirImagine 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.
Opa, obrigado pela visita ;)
Excluir