Corona SDK Lucrul cu graficul API Facebook - Partea 1

Bine ați venit la partea 1 din 2 din seria tutorial despre utilizarea API-ului Facebook Graph și a SDK-ului Corona pentru a face aplicații sociale native pentru dispozitive mobile. API-ul Facebook are multe caracteristici și poate fi folosit pentru a crea aplicații sociale puternice. Ca punct de plecare, funcția cea mai de bază și primară a API-ului Facebook este de a permite unui utilizator să se autentifice cu o aplicație utilizând acreditările Facebook. Acest lucru necesită un proces în două etape în care un utilizator nu se va conecta numai la o aplicație cu numele de utilizator și parola de pe Facebook, dar va aproba, de asemenea, o serie de activități permise pe care o aplicație le poate angaja cu datele lor sociale.

De exemplu, o aplicație ar putea avea acces numai la numele și fotografia profilului, dar restul datelor personale vor rămâne private. Ca un alt exemplu, unei aplicații i se poate acorda acces la postarea pe pereții prietenului său. Domeniul de aplicare al acestei caracteristici API este într-adevăr dependent de tipul de aplicație construită pentru a interacționa cu Facebook.

În aplicația noastră vom începe prin a permite utilizatorului să se autentifice cu acreditările Facebook pentru a obține un simbol de acces pe care îl putem folosi pe durata sesiunii noastre. Sesiunea în acest caz este definită ca o singură utilizare a aplicației. Pentru a începe acest proces, trebuie să înregistrați o aplicație cu Facebook pentru a obține o cheie API.

Dacă nu v-ați alăturat deja programului de dezvoltare Facebook, trebuie să faceți acest lucru acum.

După ce ați instalat aplicația în contul dvs., trebuie să faceți clic pe butonul "Setare aplicație nouă" în colțul din dreapta sus.

Fiecare aplicație de pe Facebook are nevoie de un nume unic, deci gândiți-vă la ceva care este specific proiectului dvs..

Facebook vă poate cere să completați un formular CAPTCHA în pasul următor. Dacă da, completați-l pentru a continua.

Odată ce aplicația a fost creată, veți vedea o listă de file din partea stângă a ecranului care conține setări diferite ale aplicației. Faceți clic pe "Mobile and Devices"

Pe acest ecran, notați "ID-ul de aplicație", care este un număr lung pe care îl vom folosi mai târziu. De asemenea, asigurați-vă că faceți clic pe butonul radio marcat Aplicație Nativă și apoi faceți clic pe "Salvați modificările" de mai jos.

Acum, când avem setarea aplicației Facebook, să începem prin instalarea aplicației noastre Corona. Ca elemente de bază de bază, vom crea 2 fișiere numite build.settings și config.lua. Acestea conțin date de configurare de bază care informează compilatorul despre orientarea afișării aplicației noastre. Ele sunt după cum urmează:

build.settings:

 setările = orientation = default = "portrait",, iphone = plist = UIPrerenderedIcon = true,

config.lua

 aplicație = content = width = 320, height = 480, scale = "letterbox",,

Apoi, vom începe să codificăm aplicația noastră în fișierul principal.lua al proiectului. Codul de aici va fi plasat în main.lua.

 ui = necesită ("ui") local facebook = necesită "facebook [/ lua] Începeți prin includerea principalelor biblioteci Biblioteca UI este o bibliotecă utilă dezvoltată de un utilizator Corona care poate fi descărcat de pe pagina de schimb a codului Ansca Mobile. l-am inclus în codul sursă din fișierul ui.lua Această bibliotecă ne va ajuta să creăm cu ușurință butoane și alte elemente simple de interfață U. Biblioteca Facebook este de fapt o bibliotecă internă a Coronei care acționează ca un pachet pentru diferite funcționalități în cadrul API-ului Facebook , Vom include în mod evident aici și aici [sourcecode language = "lua] local appId =" ID-ul aplicației aici "

Apoi vom crea o variabilă numită appId și vom stoca în ea "ID-ul aplicației" pe care l-am primit când am creat aplicația noastră Facebook. Chiar dacă este un întreg întreg, îl vom păstra aici ca un șir.

Pasul următor va fi să creați un buton frumos, pe care utilizatorul să îl poată da clic pe pentru a vă conecta la aplicația noastră cu acreditările Facebook:

 local myButton = ui.newButton defaultSrc = "fb.png", implicitX = "300", defaultY = "50", onEvent = onClick, id = "myButton" myButton.x = display.contentWidth / display.contentHeight / 2

Crearea butoanelor cu biblioteca UI este foarte ușoară. În apelul de mai sus, veți observa că trecem 5 lucruri la metoda newButton a bibliotecii UI:

  1. defaultSrc: fișierul imagine pe care îl vom folosi ca buton
  2. defaultX: lațimea
  3. defaultY: inaltimea
  4. onEvent: treceți o metodă numită "onClick", care este funcția care va fi apelată la apăsarea butonului. Vom defini acest lucru mai târziu.
  5. id: un identificator unic pentru acest obiect de buton

După aceea, vom plasa pur și simplu butonul setând proprietățile x și y ale obiectului myButton. Veți observa că folosim obiectul specific "Corona" pentru a obține conținutul ContentWidth și contentHeight al ecranului. Deoarece punctul de referință implicit pentru obiectele din Corona este centrul, prin plasarea acestui buton la jumătate din lățimea și înălțimea ecranului, acesta va apărea chiar în centrul mort.

În scopul acestui tutorial, este logic să definiți butonul înaintea acțiunilor. În viața reală, totuși, trebuie să definim funcțiile noastre deasupra codului de creare a butoanelor, astfel încât compilatorul să fie conștient de ele, interpretând procedura procedural. Prima noastră funcție va fi definirea acțiunii noastre de clicuri pe buton numită "onClick".

 funcția locală onClick (eveniment) dacă (event.phase == "release") apoi facebook.login (appId, listener) end end

În această funcție simplă sunăm biblioteca Facebook pe care am cerut-o mai sus și trecem două lucruri la metoda de conectare. Primul este ID-ul de aplicație Facebook pe care l-am primit de pe Facebook.com când am creat aplicația, iar al doilea fiind o funcție care va fi trasă la orice eveniment de apel invers din API-ul Facebook. De asemenea, verificăm faza de eveniment lansată pentru a împiedica apăsarea dublă a butonului accidental.

Această metodă de ascultător poate fi trasă de mai multe ori, astfel încât va trebui să detectăm nu numai "tipul" evenimentului, ci și "faza" evenimentului. Când se face apel la metoda de conectare Facebook, biblioteca se va conecta la Facebook și va afișa o vizualizare web prietenoasă a ecranelor de conectare și autentificare Facebook, așa cum se vede mai jos:

Odată ce un utilizator completează procesul de conectare, API-ul Facebook va începe să facă callback-uri către funcția noastră de ascultător. Aici este funcția ascultătorului nostru, așa cum se întâmplă în prima parte a acestui tutorial:

 (event), dacă ("sesiune" == event.type), atunci dacă ("login" == event.phase) atunci facebook.request ("me") termin otherif ("request" == event.type) răspuns local = eveniment.response tipărire (răspuns) final sfârșit

După cum puteți vedea, când primim primul nostru apel din API-ul Facebook căutăm un tip de eveniment de "sesiune". Aceasta înseamnă că utilizatorul a finalizat o acțiune de sesiune. Pentru a ne asigura că se loghează și nu un alt tip de acțiune de sesiune, verificăm dacă faza este de tip "login". Dacă aceste verificări trec, vom instantiza acum o "cerere" separată în graficul API Facebook pentru un obiect de date. În acest caz, vom solicita obiectul "eu", care este o scurtă descriere pentru utilizatorul conectat în prezent. Vezi mai jos:

? facebook.request ("eu")? 

Acest eveniment se va declanșa și apoi același ascultător va fi chemat înapoi la finalizarea evenimentului. De data aceasta, vom verifica pentru un tip de eveniment de "cerere" și vom ocupa obiectul "răspuns", care este trimis înapoi la noi ca JSON. Imprimarea acestui obiect va genera ceva de genul acesta (luat din exemplul FB API):

 "id": "220439", "nume": "Bret Taylor", "first_name": "Bret", "last_name": "Taylor", "link": "http://www.facebook.com/btaylor "," nume utilizator ":" btaylor "," gender ":" masculin "," locale ":" en_US "

Acum API-ul Facebook este foarte puternic și poate face tone de lucruri reci. În partea a doua a tutorialului nostru, vom adăuga funcționalitatea pentru a solicita date prietenilor și pentru a afișa o parte din imaginile lor de profil într-un colaj ca moda. Până atunci, vă încurajez să citiți toate posibilitățile API-ului Facebook Graph: FB Graph Documentation.

Cod