Sviluppare un’applicazione mobile con Apache Cordova (II parte)

Nel precedente articolo abbiamo visto come installare il framework Apache Cordova ed abbiamo discusso dei vantaggi di realizzare un’applicazione mobile ibrida. In questo articolo invece installeremo gli strumenti della piattaforma Android e costruiremo una piccola applicazione di esempio. Innanzitutto per poter compilare per il robottino verde abbiamo bisogno di installare l’ambiente Java, scaricabile dal sito ufficiale al seguente link. Scegliamo la versione per il nostro sistema operativo e dopo l’istallazione inseriamo la cartella /bin di java nel path di sistema. Proseguiamo scaricando l’android SDK da questo link, installiamolo e inseriamo le cartelle /tools e /platform-tools nel path di sistema.

A questo punto da riga di comando digitiamo android e nella finestra che sia apre selezioniamo di installare l’ultima versione dei Tools, Platform-tools, Build-tools, della SDK Platform e dell’ARM System Image dell’ultima versione del sistema operativo. Per finire dobbiamo installare Apache Ant che è un tool di cui Cordova si serve per automatizzare il processo di compilazione. Lo troviamo a questo indirizzo e va anch’esso aggiunto al path di sistema, insieme ad un’altra variabile di nome JAVA_HOME che contiene il percorso della cartella in cui è installato Java. Fatto ciò abbiamo finalmente finito con la preparazione e dell’ambiente e possiamo iniziare a sviluppare.

Andiamo quindi nella cartella www della nostra applicazione (vedi articolo precedente), apriamo i file index.html e index.js, rimuoviamo i contenuti di esempio ed inseriamo i riferimenti al framework che utilizzeremo, jQuery Mobile. Alla fine lo scheletro su cui costruire la nostra applicazione sarà così:

<html>
    <head>
        [...]
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
        <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                Hello World!
            </div>

            <!-- corpo -->

        </div>
	<script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
    </body>
</html>
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    onDeviceReady: function() {
	// Punto di inizio
    }
};

$(document).ready(function() {
    app.initialize();
});

Il codice HTML è molto semplice, non facciamo altro che importare i file del framework jQuery, che vanno scaricati ed inseriti nelle rispettive cartelle /css e /js dell’applicazione, e definiamo la struttura base di un’applicazione mobile con una barra del titolo ed un’area centrale. Nel javascript invece definiamo un oggetto app con un metodo initialize che funge da costruttore, un metodo bindEvents in cui registriamo tutti gli eventi della nostra applicazione a cui vogliamo rispondere ed infine un metodo onDeviceReady che viene richiamato quando l’aaplicazione ha finito di caricarsi. Infine nelle ultime 3 righe avviamo il tutto usando jQuery. A questo punto possiamo provare a compilare il nostro progetto con il comando

cordova build

e se tutto va a buon fine provare la nostra applicazione sull’emultore o su un device reale con rispettivamente

cordova emulate android
cordova run android

Affinchè l’ultima opzioni funzioni, bisogna installare il driver usb del nostro telefono di prova che si può trovare sul sito del produttore ed assicurarsi che il device sia riconosciuto col il comando

adb devices

Per oggi abbiamo finito, la prossima volta creeremo una bozza di un’applicazione meteo sfruttando i servizi online di Yahoo! e vedremo come installare dei plugin per sfruttare a pieno le caratteristiche di uno smartphone moderno, come posizione GPS e fotocamera.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *