DHOB (IU5SGN): PhoneGap

giovedì 7 febbraio 2013

PhoneGap

PhoneGap e' un insieme di API che permette di interagire con l'hardware dei dispositivi mobile (Android, IPhone, WebOs ed altri) direttamente da HTML5 ed e' quindi sostanzialmente indipendente dal linguaggio nativo del sistema operativo di ogni telefono

Windows
installare Java JDK (non JRE)
installare Eclipse
installare Android SDK ed ADT
installare Ant
aggiungere alla path le directory platform-tools e tool dell'Android SDK
aggiungere alla path la directory bin del pacchetto ant
eseguire i comandi sottostanti
--------------------------------
C:\>set JAVA_HOME="C:\Programmi\Java\jdk1.7.0_09\bin"
C:\>set PATH=%JAVA_HOME%\bin;%PATH%
--------------------------------

Linux
in Linux (Debian Testing) l'unico problema e' relativo al fatto che stranamento ant non e' incluso in openjdk-7 ma nella versione 6 per cui deve essere scaricato il pacchetto precedente

Una volta configurato il sistema si procede andando nella directory
/phonegap/lib/android/bin
e si lancia il comando
create /directory_lavoro com.prova.test phonegap

che creera' un nuovo progetto nella directory di lavoro.
A questo punto si apre Eclipse e si crea un nuovo progetto da Android Project From Existing code e si punta alla directory create

Il risultato sara' qualcosa di questo tipo

si vede subito che la funzione main e' piuttosto stupida in quanto crea un WebView che punta al contenuto di assets

phonegap.java
-------------------------------------------------------

public class phonegap extends DroidGap
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
----------------------------------------------------------

quindi il codice da mofidicare e' index.html.

Nel seguente esempio ho provato a vedere il risultato dell' accelerometro
Index.html
-------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<title>Accelerazione</title>

<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8">

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
var options = { frequency: 3000 };
navigator.accelerometer.watchAcceleration(onSuccess, onError);
}

// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {

var accx = document.getElementById('accx');
var accy = document.getElementById('accy');
var accz = document.getElementById('accz');

accx.innerHTML = 'Accelerazione X : ' +acceleration.x;
accy.innerHTML = 'Accelerazione Y : ' +acceleration.y;
accz.innerHTML = 'Accelerazione Z : ' +acceleration.z;


}

// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}

</script>
</head>
<body>
<p id="accx">Accelerazione X : </p><br>
<p id="accy">Accelerazione Y : </p><br>
<p id="accz">Accelerazione > : </p><br>

</body>
</html>

-------------------------------------------------------

Qui il risultato di 5 minuti di lavoro. I dati vengono riaggiornati ogni 3 secondi