Share
Benvenuti alla parte 1 di 2 della serie di tutorial sull'utilizzo dell'API del grafico di Facebook e del Corona SDK per creare applicazioni social native per dispositivi mobili. L'API di Facebook ha molte funzionalità e può essere utilizzata per creare potenti applicazioni sociali. Come punto di partenza, la funzione più elementare e primaria dell'API di Facebook è consentire a un utente di autenticarsi con un'applicazione utilizzando le proprie credenziali di Facebook. Ciò richiede un processo in due fasi in cui un utente non solo accederà a un'applicazione con il nome utente e la password di Facebook, ma approverà anche una serie di attività consentite che un'applicazione può intraprendere con i propri dati social.
Ad esempio, a un'applicazione potrebbe essere consentito solo di accedere al loro nome e alla foto del profilo, ma il resto dei loro dati personali rimarrà privato. Come altro esempio, a un'applicazione può essere concesso l'accesso per postare ai muri dei propri amici. Lo scopo di questa funzione API dipende in realtà dal tipo di applicazione creata per interagire con Facebook.
Nella nostra applicazione inizieremo consentendo all'utente di autenticarsi con le proprie credenziali di Facebook per ottenere un token di accesso che possiamo utilizzare per tutta la durata della nostra sessione. La sessione in questo caso è definita come un uso singolo dell'applicazione. Per iniziare questo processo abbiamo bisogno di registrare un'applicazione con Facebook per ottenere una chiave API.
Se non hai già aderito al programma di applicazione per sviluppatori di Facebook, dovresti farlo ora.
Una volta installata l'applicazione sul tuo account, devi fare clic sul pulsante "Imposta nuova app" nell'angolo in alto a destra.
Ogni applicazione in Facebook ha bisogno di un nome univoco, quindi pensa a qualcosa che è specifico per il tuo progetto.
Facebook potrebbe chiederti di compilare un modulo CAPTCHA nel passaggio successivo. Se è così, basta completarlo per continuare.
Una volta creata l'app, verrà visualizzato un elenco di schede sul lato sinistro dello schermo che contengono diverse impostazioni dell'applicazione. Clicca su "Dispositivi mobili e dispositivi"
In questa schermata, prendi nota del tuo "Application ID" che è un numero lungo che useremo in seguito. Inoltre, assicurati di fare clic sul pulsante radio contrassegnato con l'app Nativa e quindi fai clic su "Salva modifiche" di seguito.
Ora che abbiamo installato la nostra applicazione Facebook, iniziamo impostando la nostra app Corona. Come elementi base di partenza, creeremo 2 file chiamati build.settings e config.lua. Questi contengono i dati di configurazione di base che informano il compilatore circa l'orientamento di visualizzazione della nostra app. Sono come segue:
build.settings:
settings = orientation = default = "portrait",, iphone = plist = UIPrerenderedIcon = true,,
config.lua
application = content = width = 320, height = 480, scale = "letterbox",,
Successivamente, inizieremo a codificare la nostra applicazione nel file main.lua del progetto. Il codice da qui in avanti sarà inserito in main.lua.
Accentsconagua
ui = require ("ui") local facebook = richiede "facebook [/ lua] Inizia includendo le librerie principali.La libreria UI è una libreria utile sviluppata da un utente Corona che può essere scaricata dalla pagina Scambio codici di Ansca Mobile. incluso nel codice sorgente nel file ui.lua. Questa libreria ci assisterà nella creazione pulita di pulsanti e altri semplici elementi dell'interfaccia utente. La libreria di Facebook è in realtà una libreria interna a Corona che funge da wrapper per diverse funzionalità all'interno dell'API di Facebook Ovviamente includeremo anche qui. [Sourcecode language = "lua] local appId =" ID APPLICAZIONE QUI " Successivamente creeremo una variabile chiamata appId e memorizzeremo in essa l'"ID dell'applicazione" che abbiamo ottenuto quando abbiamo creato la nostra applicazione Facebook. Anche se è un numero intero grande, lo memorizzeremo qui come stringa.
Il prossimo passo sarà quello di creare un pulsante dall'aspetto piacevole che l'utente può fare clic per accedere alla nostra applicazione con le credenziali di Facebook:
local myButton = ui.newButton defaultSrc = "fb.png", defaultX = "300", defaultY = "50", onEvent = onClick, id = "myButton" myButton.x = display.contentWidth / 2 myButton.y = display.contentHeight / 2
Creare pulsanti con la libreria UI è molto semplice. Nella chiamata precedente noterai che stiamo passando 5 cose al metodo newButton della libreria UI:
Dopodiché, posizioneremo semplicemente il pulsante impostando le proprietà x e y del nostro oggetto myButton. Noterai che stiamo usando l'oggetto "display" specifico di Corona per ottenere il contenutoWidth e contentHeight dello schermo. Poiché il punto di riferimento predefinito per gli oggetti in Corona è il centro, posizionando questo pulsante a metà della larghezza e dell'altezza dello schermo, apparirà proprio nel punto morto.
Ai fini di questo tutorial, ha senso definire il pulsante prima delle azioni. Nella vita reale, tuttavia, dobbiamo definire le nostre funzioni sopra il codice di creazione del pulsante in modo che il compilatore ne sia a conoscenza poiché interpreta il codice proceduralmente. La nostra prima funzione sarà definire la nostra azione di clic del pulsante chiamata "onClick".
funzione locale onClick (evento) if (event.phase == "release") quindi facebook.login (appId, listener) end end
In questa semplice funzione, stiamo chiamando la libreria di Facebook che abbiamo richiesto sopra e stiamo passando 2 cose al metodo di login. Il primo è l'ID dell'applicazione Facebook che abbiamo ottenuto da Facebook.com quando abbiamo creato l'app, e il secondo è una funzione che verrà attivata in caso di qualsiasi evento di callback dall'API di Facebook. Stiamo anche controllando la fase dell'evento rilasciata per evitare qualsiasi doppio clic accidentale del pulsante.
Questo metodo di ascolto può essere attivato più volte, quindi dovremo rilevare non solo il "tipo" di evento, ma anche la "fase" dell'evento. Quando viene chiamato il metodo di accesso di Facebook, la biblioteca si connetterà a Facebook e visualizzerà una visualizzazione Web mobile delle schermate di accesso e autenticazione di Facebook, come illustrato di seguito:
Una volta che un utente completa la procedura di login, l'API di Facebook inizierà a fare callback alla nostra funzione listener. Ecco la nostra funzione di ascolto in quanto rappresenta la prima parte di questo tutorial:
function listener (event) if ("session" == event.type) then if ("login" == event.phase) then facebook.request ("me") end elseif ("request" == event.type) quindi risposta locale = event.response print (response) end end Come puoi vedere, quando riceviamo la nostra prima callback dall'API di Facebook, stiamo cercando un tipo di evento di "sessione". Ciò significa che l'utente ha completato un'azione di sessione. Per assicurarci che lui / lei stia effettuando il login e non qualche altro tipo di azione di sessione, controlliamo che la fase sia di tipo "login". Se questi controlli superano, istanziamo una "richiesta" separata all'API del grafico di Facebook per un oggetto dati. In questo caso, chiederemo l'oggetto "me" che è una scorciatoia per l'utente attualmente connesso. Vedi sotto:
? facebook.request ("me")? Questo evento verrà attivato e quindi il nostro stesso ascoltatore verrà richiamato al completamento dell'evento. Questa volta controlleremo un tipo di evento di "richiesta" e gestiremo l'oggetto "risposta" che ci viene restituito come JSON. Stampare questo oggetto produrrà qualcosa di simile a questo (preso dal campione dell'API FB):
"id": "220439", "nome": "Bret Taylor", "first_name": "Bret", "last_name": "Taylor", "link": "http://www.facebook.com/btaylor "," username ":" btaylor "," gender ":" male "," locale ":" en_US "
Ora l'API di Facebook è molto potente e può fare un sacco di cose interessanti. Nella parte 2 del nostro tutorial, aggiungeremo funzionalità per richiedere i dati degli amici e visualizzare alcune delle loro immagini del profilo in un modo simile al collage. Fino ad allora, ti incoraggio a leggere tutte le possibilità dell'API del grafico di Facebook: FB Graph Documentation.
