O Apache Cordova é mais conhecido por sua distribuição chamada Phonegap. Com o Apache Cordova você pode programar aplicativos utilizando as tecnologias: HTML + CSS + Javascript e transformá-lo um aplicativo nativo para diversas plataformas como Android, IOS, Android, Blackberry e Windows Phone. Além disso, existem plugins que permitem utilizar recursos como câmera e acelerômetro do dispositivo.
Mais detalhes sobre a plataforma em: https://secure-software.intel.com/sites/billboard/sites/default/files/downloads/SP12_SFTS004_103_PORpm.pdf
Este post mostra como utilizar o apache cordova para criar uma aplicação nativa android programando em javascript e utilizando HTML + CSS.
Seguindo os 7 passos abaixo você pode transformar seu app HTML em um aplicativo nativo Android!
1 - Baixe e Instale o NodeJS caso não o tenha em seu sistema.
2 - Baixe e instale os pacotes de tecnologia Java: JDK, Apache Ant e a Android SDK.
Quem trabalha com Java provavelmente conhece estas tecnologias e as possui configuradas em seu sistema. Porém, configurá-las não é uma tarefa difícil e existem dezenas de tutoriais na internet de como fazer. Lembrando que além de fazer o download e instalar, é necessário configurar as seguintes variáveis de ambiente no SO: JAVA_HOME, ANDROID_HOME e ANT_HOME.
3 - Utilize o NPM (Node Package Manager) para instalar o Cordova.
npm install -g cordova
4 - Crie um novo app Cordova.
cordova create firstApp com.example.firstApp FirstApp
5 - Crie seu aplicativo utilizando HTML+CSS + Javascript no diretório firstApp/www
Lembrando que seu aplicativo precisa ter um arquivo index.html que será a tela inicial. Se você está apenas querendo fazer um teste, pode utilizar qualquer página como esta:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Cordova!</title>
<script>
function documentReady(){
document.getElementById('soma').onclick = function()
{
var x = parseInt(document.getElementById('x').value || 0);
var y = parseInt(document.getElementById('y').value || 0);
document.getElementById('resultado').innerHTML = (x+y);
}
}
</script>
</head>
<body onload="documentReady()">
<div class="app">
<h1>Meu Primeiro App Cordova</h1>
<input type="number" id="x" />
<br/>
+
<br/>
<input type="number" id="y" />
<br/>
<button id="soma">=</button>
<br/>
<h3 id="resultado"></h3>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Seu aplicativo pode ter suas telas separadas em arquivos HTML onde cada redirecionamento com o window.location ou um <a href="tela.html"> levará o usuário a telas diferentes. Nada impede também de você ter um aplicativo de apenas um HTML onde o conteúdo é inserido no DOM dinâmicamente via Javascript.
6 - Adicione a plataforma Android em seu projeto.
O Cordova pode trabalhar com diversas plataformas e é hora de configurar a plataforma que desejamos no primeiro projeto. Com o terminal de seu sistema operacional aberto, acesse o diretório do seu projeto (firstProject) e digite o seguinte comando:
cordova platform add android
Se houver algum erro no comando acima, verifique a instalação dos pacotes java descritos no segundo passo.
7 - Faça um build do app
cordova build
Feito o build, acesse o diretório platforms/android/bin dentro do projeto e você encontrará uma APK (Android Package). Com esta APK você poderá instalar o aplicativo em seu celular/tablet Android.
Nenhum comentário:
Postar um comentário