Flex 3, Adobe AIR e le API di Feedburner

Oggi vediamo come sviluppare da zero una piccola applicazione desktop Adobe AIR (azzarderei il nome di "widget") che ci permetterà di controllare quanti lettori ha un feed RSS pubblicato con Feedburner.

Per seguire questo tutorial avete bisogno di:

• Flex Builder 3. Potete scaricare una versione trial a questo indirizzo
• Una conoscenza di base di Actioscript 3
• Un po' di pazienza... Il post sarà luuuungo!

Veniamo a noi. Per prima cosa creiamo un progetto Adobe AIR all'interno di Flex Builder 3.

Selezionate File -> New -> Flex Project

Nella nuova finestra che si aprirà assegnate un nome al progetto e selezionate Desktop Application, poi Finish.

Il nostro progetto è pronto. Ci ritroveremo davanti a 2 files:

• Feedburner.mxml (il sorgente dell'applicazione)
• Feedburner-app.xml (il file che contiene le impostazioni per la creazione del pacchetto Adobe AIR)

In Feedburner-app.xml potrete impostare tutte le "proprietà" della vostra applicazione (dimensione della finestra, icone, chrome, ecc...) Non ve ne preoccupate per ora, il file è talmente commentato che potrete occuparvene da soli in un secondo momento, decidendo ogni più piccolo aspetto della vostra applicazione.

Detto questo veniamo al design della nostra applicazione. Per fare quello che dobbiamo fare (cit.) ci servono almeno:

• Un campo input (dove inseriremo l'indirizzo del nostro feed)
• Un bottone (per lanciare l'azione)
• Una label (che andrà a contenere il risultato della nostra elaborazione)

Cliccando sulla scheda "Design" all'interno di Flex Builder possiamo disegnare la nostra applicazione come se ci trovassimo all'interno di Visual Basic: basta trascinare i vari componenti all'interno della nostra applicazione, assegnare un ID ad ogni elemento e organizzare colori, testi e disposizioni.

Velocissimo e precisissimo.

Nulla vieta di aggiungere altre "decorazioni" (io ad esempio ho aggiunto il logo di Feedburner e qualche label "decorativa")

Nella scheda "Source" ritroveremo la nostra interfaccia scritta in MXML: un linguaggio molto simile all'html, fatto di tag e attributi dove andremo ad aggiungere il nostro codice ActionScript un po' come aggiungiamo JavaScript alle pagine web. Possiamo modificare gli elementi della nostra applicazione sia dalla scheda "Source" che dalla scheda "Design". Ovviamente la scelta dell'una o dell'altra dipende solo dalla precisione che vogliamo ottenere o dalla comodità dell'una rispetto all'altra...

Per vedere "live" il risultato del nostro lavoro basterà cliccare l'icona a forma di insetto (debug) che avvierà la nostra applicazione AIR. Ci ritroveremo davanti alla nostra interfaccia che non farà assolutamente nulla.

Disegnata l'interfaccia abbiamo bisogno quindi di "codice"... Questa applicazione deve pur far qualcosa!

Cosa ci serve? Lo schema è presto fatto:

• Dobbiamo inserire l'indirizzo di un feed RSS all'interno del nostro campo di input.
• Al click sul pulsante deve essere chiamato lo script che scarica il file XML dal servizio API di Feedburner (ho usato questo per semplificare l'applicazione)
• Dobbiamo interpretare il nostro file XML e stampare a video il risultato (possibilmente gestendo eventuali errori)

Per richiamare una funzione al click del pulsante basta aggiungere l'attributo click="" nel tag <mx:Button>

• Inserendo click="checkFeedburner(feed.text)" al click sul bottone eseguiremo la funzione checkFeedburner() passandogli come parametro il valore contenuto nel campo di testo che ha id="feed"

Ci appoggeremo al tag <mx:HTTPService> per la richiesta dei nostri dati.

<mx:HTTPService id="feedburnerService" resultFormat="e4x"
fault="feedburnerFault(event);" result="feedburnerResult(event)" />

Analizziamone un attimo gli attributi:

• id: identifica univocamente il nostro HTTPService
• resultFormat: in questo caso sappiamo che riceveremo un file XML come risultato e scriviamo e4x (ci permetterà di accedere in un battibaleno al nostro XML utilizzando una sintassi semplificata). Altre alternative sono XML, text, object e flashvars. Fate riferimento al manuale per capire di cosa si tratta.
• fault: la funzione che verrà eseguita se la connessione per un qualunque motivo fallisse
• result: la funzione che verrà eseguita se la connessione avrà successo

Ok, ok. Il grosso è fatto. Al click sul bottone spediamo il nostro bel HTTPService

private function checkFeedburner(feedRSS:String):void
{
feedburnerService.url = "http://api.feedburner.com/awareness/1.0/GetFeedData?uri=" + feedRSS;
feedburnerService.send()
check.label = "Caricamento..."
check.enabled = false;
}

La funzione costruisce l'URL a cui spedire la richiesta e disattiva  momentaneamente il pulsante di invio (finesse).

In caso di mancata connessione riceveremo un messaggio di errore

private function feedburnerFault(evt:FaultEvent):void
{
var title:String = evt.type + " (" + evt.fault.faultCode + ")";
var text:String = evt.fault.faultString;

Alert.show(text, title);
check.label = "Controlla!"
check.enabled = true;
}

Se invece la connessione è andata a buon fine controlleremo se l'XML ricevuto contiene effettivamente il dato richiesto e aggiorneremo l'applicazione di conseguenza.

private function feedburnerResult(evt:ResultEvent):void
{
var risultato:Object = evt.result;
if(risultato.feed.entry.@circulation.toString()!= "")
counter.text = risultato.feed.entry.@circulation.toString()
else
// Il feed non esiste in feedburner oppure non è stato trovato perché digitato male...
counter.text = "ERRORE!"

// Riabilito il pulsante per una nuova ricerca
check.label = "Controlla!"
check.enabled = true;

}

Fatto questo possiamo finalmente pubblicare il nostro file e distribuirlo in giro per la rete, eventualmente creando un badge per facilitarne l'installazione.

Basterà cliccare Project -> Export Release Build... e seguire il wizard passo passo. Ci verrà richiesto di creare un certificato da allegare all'applicazione: Flex Builder permette di crearlo gratuitamente, anche se rimarremo "anomimi".

Installando infatti l'applicazione essa verrà mostrata come creata da uno "sconosciuto".

Se volete installare l'esempio sulla vostra macchina potete scaricare il file .AIR che ho creato (serve il "player", lo trovate qui, anche se non è proprio un player...) e, una volta installato, provare a contare i lettori del mio feed RSS http://www.napolux.com/feed (mi raccomando, ricordate l'http:// davanti!)

Detto questo veniamo al sorgente completo dell'applicazione. Il file MXML lo trovate, commentato, a questo indirizzo.

L'applicazione, togliendo il chrome, viene fuori così:

Qualche considerazione, per concludere:

• Tempo medio trascorso dal concept dell'applicazione alla sua effettiva installazione sul mio pc: 15 minuti. (ci ho quasi messo di più a fare gli screenshot) a dimostrazione di quanto sia facile sviluppare in Flex.
• L'applicazione gira su Windows XP, Vista, MacOS e Linux: stesso codice (non l'ho testato su Linux, qualche anima pia me lo dice nei commenti se funziona anche là?), 4 sistemi operativi, senza doversi preoccupare di nulla: la cosa rimane vera (con qualche piccola eccezione) anche per progetti più complessi.
• Quello che ho fatto io con Flex Builder 3 professional (di cui possiedo regolare licenza e che non costa proprio pochissimo) potete farlo gratis con un editor di testo e il Flex SDK. Non c'è bisogno di acquistare per forza una licenza Flex Builder, anche se a dir la verità aiuta un sacco.

Ci sono domande?