Corona SDK utilizzo dell'API del grafico di Facebook - Parte 2

Bentornati al secondo di una serie di tutorial in due parti sulla creazione di applicazioni social native per dispositivi mobili. Nella parte 1, abbiamo creato un'applicazione di base che utilizzava la libreria di autenticazione di Facebook per consentire a un utente di accedere con le proprie credenziali di Facebook. Il risultato è stato l'accesso ai dati di Facebook dell'utente attraverso un token di sessione che abbiamo ricevuto quando l'utente ha effettuato l'accesso.

Una volta ottenuto questo token, l'API di Facebook Graph può essere utilizzata per creare una varietà di applicazioni. Quando un utente finale effettua l'accesso, l'applicazione è responsabile del trasferimento delle autorizzazioni necessarie per l'esecuzione. L'utente può consentire o non consentire all'applicazione di accedere ai propri dati da Facebook. Ciò tenta di informare almeno l'utente finale che cosa un'applicazione potrebbe fare con i propri dati nella speranza di creare maggiore trasparenza.

Per la parte 2 di questo tutorial, modificheremo la nostra originale app per dispositivi mobili di Facebook (che ovviamente non ha funzionato molto), per creare un collage accurato delle immagini del profilo degli amici di un utente. L'API grafico FB si basa principalmente su oggetti JSON, quindi utilizzeremo una libreria wrapper Lua JSON che può essere trovata nello scambio di codici Ansca Mobile.

Per iniziare, dobbiamo aggiungere la seguente inclusione di libreria nella parte superiore del nostro file main.lua:

 require ( "JSON")

Ancora una volta, questa libreria può essere trovata nel codice di scambio su anscamobile.com. Una volta incluso, abbiamo accesso ai metodi della biblioteca attraverso una variabile intitolata Json. Maggiori informazioni su questo più tardi.

Prima nel nostro metodo di ascolto, stavamo ascoltando gli eventi che venivano sparati dalla casella di login di Facebook che veniva visualizzata facendo clic sul pulsante nella schermata centrale. Dopo aver effettuato correttamente il login, abbiamo effettuato l'accesso a un oggetto dati personali tramite l'API per dimostrare che la connessione ha avuto esito positivo. Questo codice può essere visto qui:

 if ("login" == event.phase) quindi facebook.request ("me") end

Poiché la nostra app riguarda principalmente l'accesso alle immagini del profilo del nostro amico, modificheremo il codice per estrarre l'oggetto dati "Amici" dall'API nello stesso modo. Sostituiremo lo snippet di codice precedente con quanto segue:

 if ("login" == event.phase) quindi facebook.request ("me / friends", "GET") end

La documentazione per questo oggetto "Amici" può essere visualizzata qui nel documento utente FB Graph API (Vedi Connessioni -> amici). Noterai che stiamo passando un parametro secondario di "GET" al metodo facebook.request. Poiché l'API Graph è più o meno conforme a "REST", il tipo di richiesta che stiamo facendo è molto importante. "GET" è per sua natura una richiesta di lettura, quindi stiamo "ottenendo" dati sugli amici dell'utente che ha effettuato l'accesso. Se stessimo effettuando una chiamata basata su scrittura all'API (ad esempio, la pubblicazione su un muro), potremmo passare "PUT" per specificare che.

Una volta chiamato il metodo "facebook.request", l'ascoltatore acquisirà nuovi eventi che verranno attivati ​​al ritorno della chiamata API. Nella parte 1 del tutorial, abbiamo osservato un tipo di evento di "richiesta" per determinare che questo era il risultato della nostra chiamata all'API di registrazione post. Il codice era il seguente:

 elseif ("request" == event.type) then response locale = event.response print (response) end

Questo in pratica ha ottenuto la risposta dall'API di Facebook e l'ha stampata. Questa è la parte del codice che sostituiremo per creare il nostro collage di foto del profilo di un amico. Il codice sopra riportato sarà sostituito dal seguente:

 elseif ("request" == event.type) then response locale = Json.Decode (event.response) local data = response.data local function showImage (evento) event.target.alpha = 0 event.target.xScale = 0,25 evento .target.yScale = 0.25 transition.to (event.target, alpha = 1.0, xScale = 1, yScale = 1) end per i = 1, # data do display.loadRemoteImage ("http: //graph.facebook. it / "? data [i] .id?" / picture "," GET ", showImage," friend "? i?" .png ", system.TemporaryDirectory, math.random (0, display.contentWidth), matematica. casuale (0, display.contentHeight)) end end

Scopriamolo in modo che possiamo capire ogni parte:

 risposta locale = Json.Decode (event.response) local data = response.data

In questa parte del codice stiamo semplicemente decodificando la risposta JSON che stiamo ricevendo dall'API di Facebook. La risposta è memorizzata come attributo dell'oggetto evento (event.response) che viene passato al listener. Quando l'oggetto JSON viene decodificato, viene tradotto in un oggetto Lua che stiamo memorizzando in una variabile chiamata "response". Poiché la chiave dell'elemento root di questo oggetto JSON è "data", una volta decodificata, siamo in grado di eseguire il drill down dell'oggetto chiamando "response.data".

 funzione locale showImage (evento) event.target.alpha = 0 event.target.xScale = 0.25 event.target.yScale = 0.25 transition.to (event.target, alpha = 1.0, xScale = 1, yScale = 1) end

Questo metodo è un callback che verrà attivato al caricamento di un'immagine remota da un URL. La prossima sezione descriverà come ciò si verifica. Una volta che questo metodo viene attivato, si aspetta un oggetto evento che conterrà l'oggetto di visualizzazione di un'immagine del profilo all'interno dell'attributo "target" (event.target). Come puoi vedere stiamo impostando gli attributi base di "alpha" a 0 o invisibili e la scala a 1/4 della dimensione originale dell'immagine.

Il metodo transition.to accetta 2 parametri: il primo è l'oggetto su cui agirà e il secondo un oggetto tabella dei parametri e dei valori a cui sta passando. L'effetto di questa transizione sarà di visualizzare gradualmente l'immagine e modificarla per andare da 1/4 della sua dimensione e invisibile alle sue dimensioni complete (scala = 1) e visibile (alfa = 1). Questo rende l'effetto di animazione basato su matematica di un povero uomo su ciascuna immagine così come viene visualizzata. Ciò avrà più senso quando viene eseguita l'applicazione.

 per i = 1, # dati fanno display.loadRemoteImage ("http://graph.facebook.com/"? data [i] .id? "/ picture", "GET", showImage, "friend"? i? " .png ", system.TemporaryDirectory, math.random (0, display.contentWidth), math.random (0, display.contentHeight)) end

Poiché l'oggetto "Amici" che stiamo ricevendo dall'API di Faceobok è un array, è necessario eseguirne il loop per ottenere gli ID di ciascun utente. Questo ID viene utilizzato per costruire un URL che servirà una piccola versione quadrata dell'immagine del profilo di un utente. Utilizzando il metodo display.loadRemoteImage, possiamo chiamare un URL e gestirà il download dei dati dell'immagine e l'archiviazione locale prima di visualizzarli sullo schermo.

Il primo parametro che passiamo:

 "Http://graph.facebook.com/"? data [i] .id? "/immagine"

è l'URL costruito che include l'ID Facebook univoco dell'utente (dati [i] .id).

 "OTTIENI", showImage, "amico"? io? ".png", system.TemporaryDirectory,

I seguenti 4 parametri sono:
- il tipo di richiesta, "OTTIENI" in questo caso
- il nostro showImage metodo di callback che verrà attivato quando l'immagine viene scaricata.
- un nome univoco per il file immagine che stiamo scaricando
- uno spazio file temporaneo per memorizzare le immagini scaricate accessibili tramite il metodo "system.TemporaryDirectory"

Infine, gli ultimi 2 parametri che passiamo sono le coordinate X e Y che vogliamo visualizzare l'immagine in:

 math.random (0, display.contentWidth), math.random (0, display.contentHeight)

Poiché stiamo creando un collage, possiamo posizionare le immagini a caso su tutto lo schermo. La chiamata "math.random" prende un valore iniziale e un valore finale e restituisce un numero casuale tra il 2. In questo caso, abbiamo bisogno di numeri casuali tra 0 e la larghezza / altezza dello schermo. Qualsiasi più o meno e l'immagine non sarebbe visibile.

E lì ce l'abbiamo! Controlla il risultato qui sotto:

I volti sono stati sfocati per proteggere gli innocenti. :)

Come nota finale, la libreria API di Facebook per Corona non funzionerà correttamente in Corona Simulator. Il modo più semplice per testare l'applicazione che abbiamo creato nel tutorial sarà eseguirlo nell'effettivo simulatore iOS fornito con Xcode.