Corona SDK werken met de Facebook Graph API - deel 2

Welkom bij de tweede van een tweedelige tutorialserie over het bouwen van native, sociale applicaties voor mobiele apparaten. In deel 1 hebben we een basistoepassing gemaakt die de Facebook-verificatiebibliotheek heeft gebruikt om een ​​gebruiker toe te staan ​​zich aan te melden met zijn Facebook-inloggegevens. Het resultaat was toegang tot de Facebook-gegevens van de gebruiker via een sessietoken die we ontvingen toen de gebruiker zich aanmeldde.

Zodra we dit token hebben, kan de Facebook Graph API worden gebruikt om een ​​verscheidenheid aan applicaties te maken. Wanneer een eindgebruiker inlogt, is de toepassing verantwoordelijk voor het doorgeven van de benodigde machtigingen die nodig zijn om te worden uitgevoerd. De gebruiker kan toestaan ​​of niet toestaan ​​dat de applicatie toegang heeft tot zijn / haar gegevens vanuit Facebook. Hiermee wordt geprobeerd de eindgebruiker op zijn minst op de hoogte te stellen van wat een toepassing met zijn gegevens kan doen in de hoop meer transparantie te creëren.

Voor deel 2 van deze tutorial gaan we onze originele mobiele Facebook-applicatie (die weliswaar niet veel heeft gedaan) aanpassen om een ​​nette collage te maken van de profielfoto's van de vrienden van een gebruiker. De FB Graph API is voornamelijk gebaseerd op JSON-objecten, dus we zullen gebruik maken van een Lua JSON-wrapperbibliotheek die te vinden is op de Ansca Mobile-code-uitwisseling.

Om te beginnen moeten we de volgende bibliotheek-integratie toevoegen aan de bovenkant van ons main.lua-bestand:

 vereisen ( "Json")

Nogmaals, deze bibliotheek is te vinden in de code uitwisseling op anscamobile.com. Eenmaal opgenomen, hebben we toegang tot de bibliotheekmethoden via een variabele genaamd Json. Hierover later meer.

Voordien luisterden we in onze luisteraarmethode naar gebeurtenissen die werden afgeschoten via het inlogvak van Facebook dat werd weergegeven toen op de knop in het middenscherm werd geklikt. Na een succesvolle aanmelding hebben we via de API toegang gekregen tot een persoonlijk gegevensobject om te bewijzen dat de verbinding succesvol was. Deze code is hier te zien:

 if ("login" == event.phase) dan eindigt facebook.request ("ik")

Aangezien onze app zich voornamelijk bezighoudt met toegang tot de profielfoto's van onze vrienden, gaan we de code wijzigen om het gegevensobject 'Vrienden' op dezelfde manier uit de API te halen. We zullen het bovenstaande codefragment vervangen door het volgende:

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

De documentatie voor dit object "Vrienden" kan hier worden bekeken in het gebruikersdocument van de FB Graph API (zie Verbindingen -> vrienden). U zult merken dat we een secundaire parameter van "GET" doorgeven aan de facebook.request-methode. Omdat de Graph API min of meer "REST" compliant is, is het type aanvraag dat we aan het maken zijn enorm. "GET" is van nature een leesverzoek dus we krijgen "gegevens" over de vrienden van de aangemelde gebruiker. Als we een op schrijven gebaseerde aanroep naar de API doen (bijvoorbeeld Posting to a Wall), kunnen we "PUT" doorgeven om aan te geven dat.

Zodra de "facebook.request" -methode wordt aangeroepen, zal de luisteraar nieuwe gebeurtenissen vastleggen die worden afgevuurd op de retour van deze API-aanroep. In deel 1 van de zelfstudie hebben we gekeken naar een gebeurtenistype van "verzoek" om vast te stellen dat dit het resultaat was van onze API-aanroep na inloggen. De code was als volgt:

 elseif ("request" == event.type) en vervolgens local response = event.response print (respons) einde

Dit kreeg in feite het antwoord terug van de Facebook API en drukte het uit. Dit is het deel van de code dat we gaan vervangen om onze collage van profielfoto's van vrienden te maken. De bovenstaande code wordt vervangen door de volgende:

 elseif ("request" == event.type) then local response = Json.Decode (event.response) local data = response.data lokale functie showImage (event) 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 for i = 1, # data doen display.loadRemoteImage ("http: //graph.facebook. com / "? data [i] .id?" / picture "," GET ", showImage," friend "? i?" .png ", system.TemporaryDirectory, math.random (0, display.contentWidth), wiskunde. random (0, display.contentHeight)) end end

Laten we dit opsplitsen zodat we elk onderdeel kunnen begrijpen:

 lokale respons = Json.Decode (event.response) lokale gegevens = response.data

In dit gedeelte van de code decoderen we eenvoudig de JSON-reactie die we van de Facebook API ontvangen. Het antwoord wordt opgeslagen als een attribuut van het gebeurtenisobject (event.response) dat aan de luisteraar wordt doorgegeven. Wanneer het JSON-object wordt gedecodeerd, wordt het vertaald in een Lua-object dat we opslaan in een variabele die 'reactie' wordt genoemd. Aangezien de sleutel van het root-element van dit JSON-object "data" is, kunnen we na het decoderen het object nader analyseren door "response.data" aan te roepen.

 lokale functie showImage (event) 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) einde

Deze methode is een callback die wordt geactiveerd bij het laden van een externe afbeelding van een URL. In de volgende sectie wordt beschreven hoe dit gebeurt. Zodra deze methode is geactiveerd, verwacht deze een gebeurtenisobject dat het weergaveobject van de profielafbeelding binnen het kenmerk "target" (event.target) bevat. Zoals u kunt zien, stellen we de basisattributen van "alpha" in op 0 of onzichtbaar, evenals de schaal tot 1/4 van de oorspronkelijke grootte van de afbeelding.

De methode transition.to accepteert twee parameters: het eerste is het object waarop het zal reageren en het tweede een tabelobject van de parameters en waarden waarnaar het overschakelt. Het effect van deze overgang is om de afbeelding geleidelijk weer te geven en deze te wijzigen om van 1/4 van de grootte te gaan en onzichtbaar tot de volledige afmetingen (schaal = 1) en zichtbaar (alfa = 1). Dit zorgt voor een soort op wiskunde gebaseerd, animatie-effect van een arme man op elk beeld zoals het wordt weergegeven. Dit zal logischer zijn als de applicatie wordt uitgevoerd.

 voor i = 1, # gegevens doen 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

Omdat het object "Vrienden" dat we van de Faceobok API ontvangen een array is, moeten we het doorlopen om de ID's van elke gebruiker te krijgen. Deze ID wordt gebruikt om een ​​URL te maken die een kleine vierkante versie van de profielfoto van een gebruiker oplevert. Met behulp van de methode display.loadRemoteImage kunnen we een URL bellen en deze zal het downloaden van de afbeeldingsgegevens afhandelen en deze lokaal opslaan voordat deze op het scherm wordt weergegeven.

De eerste parameter die we doorgeven:

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

is de geconstrueerde URL die de unieke Facebook-ID van de gebruiker bevat (data [i] .id).

 "GET", showImage, "vriend"? ik? ".png", system.TemporaryDirectory,

De volgende 4 parameters zijn:
- het type verzoek, "GET" in dit geval
- onze showImage callback-methode die wordt geactiveerd wanneer de afbeelding wordt gedownload.
- een unieke naam voor het afbeeldingsbestand dat we downloaden
- een tijdelijke bestandsruimte om de gedownloade afbeeldingen op te slaan die toegankelijk zijn via de methode "system.TemporaryDirectory"

Ten slotte zijn de laatste twee parameters die we doorgeven de X- en Y-coördinaten waarmee we de afbeelding willen weergeven:

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

Omdat we een collage maken, kunnen we de afbeeldingen willekeurig over het scherm plaatsen. De "math.random" -aanroep neemt een startwaarde en een eindwaarde en retourneert een willekeurig getal tussen de 2. In dit geval hebben we willekeurige getallen nodig die ergens tussen 0 en de breedte / hoogte van het scherm liggen. Meer of minder en de afbeelding zou niet zichtbaar zijn.

En daar hebben we het! Bekijk het resultaat hieronder:

De gezichten zijn wazig om de onschuldigen te beschermen. :)

Als laatste opmerking zal de Facebook API-bibliotheek voor Corona niet correct worden uitgevoerd in de Corona Simulator. De eenvoudigste manier om de toepassing te testen die we in de zelfstudie hebben gebouwd, is om deze uit te voeren in de eigenlijke iOS-simulator die wordt geleverd met Xcode.