Share
Welkom bij deel 1 van 2 in de tutorialserie over het gebruik van de Facebook Graph API en de Corona SDK om native, sociale applicaties voor mobiele apparaten te maken. De Facebook API heeft veel functies en kan worden gebruikt om krachtige sociale applicaties te maken. Als uitgangspunt is de meest elementaire en primaire functie van de Facebook API om een gebruiker toe te staan zich te authenticeren met een applicatie met behulp van hun Facebook-inloggegevens. Dit vereist een proces in twee stappen waarbij een gebruiker niet alleen inlogt op een app met zijn Facebook-gebruikersnaam en -wachtwoord, maar hij keurt ook een set toegestane activiteiten goed die een app kan uitvoeren met zijn sociale gegevens..
Een toepassing kan bijvoorbeeld alleen toegang krijgen tot hun naam en profielfoto, maar de rest van hun persoonlijke gegevens blijven privé. Als een ander voorbeeld kan een applicatie toegang krijgen tot het plaatsen van berichten op de muren van zijn vriend. Het bereik van deze API-functie is echt afhankelijk van het type applicatie dat wordt gebouwd om te communiceren met Facebook.
In onze applicatie zullen we beginnen met de gebruiker toe te staan zich te authenticeren met hun Facebook-referenties om een toegangstoken te krijgen dat we kunnen gebruiken voor de duur van onze sessie. De sessie in dit geval is gedefinieerd als een enkel gebruik van de applicatie. Om dit proces te starten, moeten we een applicatie bij Facebook registreren om een API Key te krijgen.
Als u zich nog niet bij het ontwikkelaarsprogramma voor Facebook-ontwikkelaars hebt aangemeld, zou u dat nu moeten doen.
Nadat u de toepassing op uw account hebt geïnstalleerd, klikt u op de knop 'Nieuwe app instellen' in de rechterbovenhoek..
Elke applicatie op Facebook heeft een unieke naam nodig, dus denk aan iets dat specifiek is voor uw project.
Facebook kan je vragen om een CAPTCHA-formulier in de volgende stap in te vullen. Als dat zo is, voltooi het dan gewoon om verder te gaan.
Zodra de app is gemaakt, ziet u een lijst met tabbladen aan de linkerkant van het scherm die verschillende toepassingsinstellingen bevatten. Klik op 'Mobiel en apparaten'
Noteer op dit scherm uw "Application ID", een lang nummer dat we later zullen gebruiken. Zorg er ook voor dat u op het keuzerondje Native app klikt en klik vervolgens op 'Wijzigingen opslaan' hieronder.
Nu we onze Facebook-applicatie hebben ingesteld, laten we beginnen met het instellen van onze Corona-app. Als basisbeginselen gaan we 2 opgeroepen bestanden maken build.settings en config.lua. Deze bevatten basisconfiguratiegegevens die de compiler informeren over de weergavestand van onze app. Ze zijn als volgt:
build.settings:
instellingen = orientation = default = "portrait",, iphone = plist = UIPrerenderedIcon = true,,
config.lua
toepassing = content = width = 320, height = 480, scale = "letterbox",,
Vervolgens gaan we onze applicatie coderen in het main.lua-bestand van het project. De code vanaf hier zal worden geplaatst in main.lua.
Accentsconagua
ui = require ("ui") local facebook = vereisen "facebook [/ lua] Om te beginnen met het opnemen van de hoofdbibliotheken .De UI-bibliotheek is een nuttige bibliotheek ontwikkeld door een Corona-gebruiker die kan worden gedownload van de Code Exchange-pagina van Ansca Mobile. opgenomen in de broncode in het bestand ui.lua Deze bibliotheek helpt ons bij het netjes maken van knoppen en andere eenvoudige UI-elementen.De Facebook-bibliotheek is in feite een interne bibliotheek van Corona die fungeert als een verpakking voor andere functionaliteit binnen de Facebook API We zullen dat hier uiteraard ook vermelden. [Sourcecode language = "lua] local appId =" APPLICATION ID HERE " Vervolgens maken we een variabele genaamd appId en slaan daarin de "Application ID" op die we kregen toen we onze Facebook-applicatie maakten. Hoewel het een groot geheel getal is, zullen we het hier opslaan als een tekenreeks.
Onze volgende stap zal zijn om een leuk uitziende knop te maken waarop de gebruiker kan klikken om aan te melden bij onze applicatie met hun Facebook-inloggegevens:
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
Het maken van knoppen met de UI-bibliotheek is heel eenvoudig. In de bovenstaande aanroep ziet u dat we 5 dingen doorgeven aan de nieuwe Knop-methode van de UI-bibliotheek:
Daarna plaatsen we de knop eenvoudig door de x- en y-eigenschappen van ons object myButton in te stellen. U zult opmerken dat we het Corona-specifieke "weergave" -object gebruiken om de contentWidth en contentHeight van het scherm te krijgen. Aangezien het standaardreferentiepunt voor objecten in Corona het midden is, door deze knop op de helft van de breedte en hoogte van het scherm te plaatsen, verschijnt deze recht in het dode punt.
Voor deze tutorial is het logisch om de knop eerst vóór de acties te definiëren. In het echte leven moeten we echter onze functies boven de knopcreatiecode definiëren, zodat de compiler deze kent terwijl de code procedureel wordt geïnterpreteerd. Onze eerste functie zal zijn om onze knopklikactie genaamd "onClick" te definiëren.
lokale functie onClick (event) if (event.phase == "release") en vervolgens facebook.login (appId, listener) end end
In deze eenvoudige functie bellen we de Facebook-bibliotheek die we hierboven nodig hadden en geven we 2 dingen door aan de inlogmethode. De eerste is de Facebook-applicatie-ID die we van Facebook.com hebben gekregen toen we de app creëerden, en de tweede was een functie die wordt afgevuurd op elke callback-gebeurtenis van de Facebook-API. We controleren ook of de gebeurtenisfase is vrijgegeven om te voorkomen dat de knop per ongeluk wordt geklikt.
Deze listenermethode kan meerdere keren worden afgevuurd, dus we zullen niet alleen het "type" van de gebeurtenis moeten detecteren, maar ook de "fase" van de gebeurtenis. Wanneer de Facebook-inlogmethode wordt aangeroepen, maakt de bibliotheek verbinding met Facebook en geeft een mobielvriendelijke webweergave weer van de aanmeldings- en verificatieschermen van Facebook, zoals hieronder te zien is:
Zodra een gebruiker het inlogproces heeft voltooid, zal de Facebook API callbacks gaan maken naar onze luisterfunctie. Hier is onze luisterfunctie zoals deze staat voor het eerste deel van deze tutorial:
function listener (event) if ("session" == event.type) then if ("login" == event.phase) then facebook.request ("me") end elseif ("request" == event.type) then local response = event.response print (respons) end end Zoals je ziet, zijn we op zoek naar een gebeurtenistype "sessie" wanneer we onze eerste callback krijgen van de Facebook API. Dit betekent dat de gebruiker een sessie-actie heeft voltooid. Om ervoor te zorgen dat hij / zij zich aanmeldt, en niet een ander type sessie-actie, controleren we of de fase van het type 'inloggen' is. Als deze controles passeren, zullen we nu een afzonderlijk "verzoek" naar de Facebook Graph-API voor een gegevensobject maken. In dit geval gaan we vragen naar het "ik" -object dat een afkorting is van de huidige aangemelde gebruiker. Zie hieronder:
? facebook.request ("ik")? Dit evenement wordt geactiveerd en onze luisteraar wordt opnieuw gebeld na afloop van het evenement. Deze keer controleren we op een gebeurtenistype van "verzoek" en behandelen we het "antwoord" -object dat als JSON aan ons wordt doorgegeven. Als u dit object afdrukt, levert dit iets op (afkomstig van het FB API-voorbeeld):
"id": "220439", "name": "Bret Taylor", "first_name": "Bret", "last_name": "Taylor", "link": "http://www.facebook.com/btaylor "," gebruikersnaam ":" btaylor "," gender ":" male "," locale ":" en_US "
De Facebook API is nu heel krachtig en kan tonnen coole dingen doen. In deel 2 van onze zelfstudie gaan we functionaliteit toevoegen om vriendengegevens aan te vragen en sommige van hun profielafbeeldingen op een collage-achtige manier weer te geven. Tot die tijd raad ik u aan om alle mogelijkheden van de Facebook Graph API te lezen: FB Graph-documentatie.
