Sviluppare applicazioni mobile con Flash Builder

Con Flash Builder 4.5 e Flex, Adobe offre agli sviluppatori un’unica piattaforma di sviluppo di applicazioni mobile per Android, iOS e BlackBerry Tablet OS. Ciò è possibile grazie alla tecnologia Adobe AIR che permette l’esecuzione delle applicazioni sui differenti dispositivi.

Ai numerosi componenti già utilizzabili per le applicazioni web e desktop, con la release 4.5 del framework Flex sono disponibili 21 nuovi componenti ottimizzati per l’utilizzo in applicazioni mobili. I nuovi componenti sono stati progettati per sfruttare al meglio le potenzialità degli schermi multitouch e per essere utilizzabili sui display di piccole dimensioni adottati da smartphone e tablet.

Il framework Flex 4.5 include anche importanti funzionalità tipiche delle applicazioni mobile come gli effetti cinetici, elastici e di rimbalzo. Sono state migliorate la fluidità dello scorrimento delle viste e le funzionalità che consentono il ridimensionamento automatico dell’applicazione in base alla dimensione e alla risoluzione del display del dispositivo.

Anche l’ambiente di sviluppo, Flash Builder 4.5, fornisce agli sviluppatori strumenti espressamente dedicati alla realizzazione di applicazioni per dispositivi mobile: un nuovo tipo di progetto, l’anteprima sui diversi dispositivi, il setting dei livelli di autorizzazione dell’applicazione sulle diverse piattaforme e la possibilità di effettuare il debug delle applicazioni direttamente sul terminale fisico o sul dispositivo emulato dall’ambiente di sviluppo.  

Realizziamo ora un’applicazione di esempio che, grazie al sensore GPS, sarà in grado di rilevare la posizione geografica corrente del dispositivo e, dopo avere effettuato una chiamata ai web service pubblici messi a disposizione da last.fm, visualizzeremo un elenco di eventi musicali che si svolgeranno nella zona.

Lo sviluppo

Per realizzare l’applicazione utilizzeremo Adobe Flash Builder 4.5 la cui versione di prova è scaricabile gratuitamente all’indirizzo qui.

Selezioniamo quindi dal menu: File->New->Flex Mobile Project e chiamiamo il nuovo progetto MobileMusicEventApp (Figura 1).

Figura 1 – Creazione di un nuovo progetto Mobile

Selezioniamo Next per procedere con il wizard e, nella schermata successiva, selezioniamo nella parte alta della schermata la piattaforma per cui vogliamo sviluppare la nostra applicazione. Nell’esempio, per semplicità, selezioneremo solo la piattaforma Google Android.

Figura 2 – Selezione del layout dell’applicazione

Al centro della schermata sarà possibile scegliere il layout grafico da utilizzare per la nostra applicazione. Nel nostro caso utilizzeremo un template View-Based.

Se clicchiamo sul tab Permissions potremo selezionare i permessi di accesso alle risorse del dispositivo per la nostra applicazione. Per l’esempio selezioneremo l’accesso a Internet necessario per le chiamate ai servizi di last.fm e la possibilità di utilizzare la localizzazione GPS del dispositivo.

Figura 3 – Selezione dei permessi sul dispositivo

Selezioniamo Finish per terminare la creazione del progetto di base e iniziamo lo sviluppo dell’applicazione.

All’interno del progetto troveremo due file MXML denominati MobileMusicEventApp.mxml e MobileMusicEventAppHomeView.mxml. Quest’ultimo è posizionato all’interno del package view. In quest’ultimo file dovrà essere collocato il codice seguente che implementa la chiamata al servizio remoto e la visualizzazione delle informazioni ricevute.

// funzione che inizializza l'applicazione 
private function init():void{    
    var params:Object = new Object();    
    params.method = "geo.getevents";
    params.lat = "41.890522";
    params.long = "12.494202";
    params.distance = "5";
    params.limit = "30"; 
    params.api_key = "b25b959554ed76058ac220b7b2e0a026"
    
    calLastFmWebService(params);
}

// funzione che effettua la chiamata al Servizio REST di Last.FM	
private function calLastFmWebService(params:Object):void {
    service = new HTTPService(); 
    service.url = "http://ws.audioscrobbler.com/2.0/"; 
    service.method = "GET";
    service.resultFormat = "e4x";
    service.addEventListener(ResultEvent.RESULT, httpResult); 
    service.addEventListener(FaultEvent.FAULT, httpFault); 
    service.send(params); 
} 

Per la chiamata al servizio remoto è stato utilizzato il componente HTTPService che permette la comunicazione delle applicazioni Flex con i servizi remoti. Il componente HTTPService può essere istanziato mediante tag mxml <s:HTTPService> oppure direttamente dal codice Actionscript che è possibile scrivere all’interno del blocco <fx:script> dei file mxml. Nell’esempio è stata utilizzata quest’ultima modalità che permette maggiore flessibilità e controllo anche se comporta la scrittura di qualche riga di codice in più.

L’emulatore presente all’interno di Flash Builder presenterà l’interfaccia dell’applicazione come dovrebbe essere visualizzata sul terminale reale.

Figura 4 – Interfaccia prima versione dell’applicazione di esempio

Utilizzo del sensore GPS

La chiamata al servizio di last.fm prevede la possibilità di ricevere in input una serie di parametri  tra cui le coordinate geografiche (latitudine e longitudine) da cui partire per effettuare la ricerca degli eventi presenti in zona. Come è possibile vedere all’interno della funzione init è stato necessario indicare la latitudine e la longitudine da cui effettuare la ricerca. Affinchè l’applicazione, anche se realizzata a scopo di esempio, sia minimamente utilizzabile occorre rilevare le coordinate a partire dalla posizione in cui si trova il dispositivo. Per fare ciò occorre modificare il codice precedente aggiungendo le funzioni per l’interazione con il sensore GPS presente sul dispositivo mediante il componente Geolocation di Flex.

// funzione che effettua la richiesta dei dati del sensore GPS
private function getGPSLocation():void {
    if(Geolocation.isSupported){
        geoLocation = new Geolocation();
        if(geoLocation.muted){
            info.text="Accendere ricevitore GPS";
        }
        
        geoLocation.setRequestedUpdateInterval(3000);
        geoLocation.addEventListener(GeolocationEvent.UPDATE, locationResult);      
    } else {
        info.text = "GPS non disponibile";
    }
}

// funzione che intercetta i dati sulla posizione GPS
// e chiama il servizio di Last.FM per ottenere i dati geolocalizzati
private function locationResult(event:GeolocationEvent):void {           
    
    var params:Object = new Object();
    params.method = "geo.getevents";
    params.lat = event.latitude.toString();
    params.long = event.longitude.toString();
    params.distance = "5";
    params.api_key = "b25b959554ed76058ac220b7b2e0a026"
    
    calLastFmWebService(params);    
}

Nella nuova versione del codice la chiamata al servizio di last.fm non viene effettuata più nella funzione init ma nella funzione locationResult, che intercetta i dati provenienti dal sensore GPS. Nella funzione init verrà solo richiamata la funzione getGPSLocation necessaria alla rilevazione dei dati GPS sul dispositivo.

Un ultimo ritocco all’applicazione

Nella lista di eventi presentata dall’applicazione è visualizzato soltanto il titolo dell’evento senza nessun ulteriore dato (artista, indirizzo, ora, ecc…). Tutte le informazioni necessarie a raggiungere l’evento sono comunque presenti  all’interno del file xml ricevuto in risposta dal servizio di last.fm e per questo possono essere aggiunte successivamente nella lista.

Basta modificare il componente List ed il componente ItemRenderer, definito al suo interno, nel seguente modo:

Dopo l’ultima modifica, l’applicazione mostrerà tutte le informazioni necessarie a raggiungere l’evento.

Figura 5 – Interfaccia seconda versione dell’applicazione di esempio

In conclusione

Creiamo ora il pacchetto per la distribuzione dell’applicazione. A tal scopo, dopo aver premuto il tasto destro del mouse sul nostro progetto e scelto la voce export dal menù, siamo in grado di creare il nostro package apk. Ovviamente sarà necessario disporre di un file di certificato (*.p12, *.pfx) e della relativa password per firmare la nostra applicazione.  

Un certificato di esempio può essere creato con l’utility ADT (che si trova all’interno del sdk di Flex) mediante il seguente comando eseguibile dal prompt dei comandi:

adt -certificate -validityPeriod 25 -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

Ulteriori informazioni sono disponibili nella sezione help del sito Adobe.