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


Considerando che ci ho messo meno di 5 minuti a capire come funziona il gioco direi che e' decisamente interessante