Corona SDK Trabajar con la API de Facebook Graph - Parte 2

Bienvenido de nuevo a la segunda parte de una serie de tutoriales de dos partes sobre la creación de aplicaciones sociales nativas para dispositivos móviles. En la parte 1, creamos una aplicación básica que utiliza la biblioteca de autenticación de Facebook para permitir que un usuario inicie sesión con sus credenciales de Facebook. El resultado fue el acceso a los datos de Facebook del usuario a través de un token de sesión que recibimos cuando el usuario inició sesión.

Una vez que tengamos este token, la API de Facebook Graph se puede usar para crear una variedad de aplicaciones. Cuando un usuario final inicia sesión, la aplicación es responsable de transmitir los permisos necesarios que se requieren para que se ejecute. El usuario puede permitir o no permitir que la aplicación acceda a sus datos desde Facebook. Esto intenta al menos notificar al usuario final qué podría hacer una aplicación con sus datos con la esperanza de crear más transparencia.

Para la parte 2 de este tutorial, vamos a modificar nuestra aplicación móvil original de Facebook (que ciertamente no hizo mucho), para crear un collage ordenado de las fotos de perfil de los amigos de un usuario. La API de FB Graph se basa principalmente en objetos JSON, por lo que utilizaremos una biblioteca de envoltorios Lua JSON que se puede encontrar en el intercambio de códigos de Ansca Mobile.

Para comenzar, necesitamos agregar la siguiente inclusión de biblioteca en la parte superior de nuestro archivo main.lua:

 requiere ("json")

Nuevamente, esta biblioteca se puede encontrar en el intercambio de códigos en anscamobile.com. Una vez incluidos, tenemos acceso a los métodos de la biblioteca a través de una variable llamada Json. Más sobre esto más adelante.

Antes, en nuestro método de escucha, escuchábamos los eventos que se activaban desde el cuadro de inicio de sesión de Facebook que se mostraba al hacer clic en el botón en la pantalla central. Tras un inicio de sesión exitoso, accedimos a un objeto de datos personales a través de la API para demostrar que la conexión fue exitosa. Este código se puede ver aquí:

 if ("login" == event.phase) entonces facebook.request ("me") finaliza

Debido a que nuestra aplicación se ocupa principalmente de acceder a las imágenes de perfil de nuestros amigos, modificaremos el código para extraer el objeto de datos "Amigos" de la API de la misma manera. Reemplazaremos el fragmento de código anterior con lo siguiente:

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

La documentación para este objeto "Amigos" se puede ver aquí en el documento de usuario de la API de FB Graph (ver Conexiones -> amigos). Notará que estamos pasando un parámetro secundario de "GET" al método facebook.request. Dado que Graph API es más o menos compatible con "REST", el tipo de solicitud que estamos realizando es muy importante. "OBTENER" es por naturaleza una solicitud de lectura, por lo que estamos "obteniendo" datos sobre los amigos de los usuarios que han iniciado sesión. Si estuviéramos haciendo una llamada basada en escritura a la API (por ejemplo, publicando en un muro), podríamos pasar "PUT" para especificar que.

Una vez que se llame al método "facebook.request", el oyente capturará los nuevos eventos que se activarán en el retorno de esta llamada a la API. En la parte 1 del tutorial, observamos un tipo de evento de "solicitud" para determinar que esto fue el resultado de nuestra llamada a la API de inicio de sesión. El código fue el siguiente:

 elseif ("request" == event.type) entonces local response = event.response print (response) end

Básicamente, esto obtuvo la respuesta de la API de Facebook y la imprimió. Esta es la parte del código que vamos a reemplazar para crear nuestro collage de fotos de perfil de amigo. El código anterior será reemplazado por el siguiente:

 elseif ("request" == event.type) entonces local response = Json.Decode (event.response) local data = response.data función local 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) final para i = 1, # data do 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 end end

Analicemos esto para que podamos entender cada parte:

 respuesta local = Json.Decode (event.response) datos locales = response.data

En esta parte del código simplemente descodificamos la respuesta JSON que recibimos de la API de Facebook. La respuesta se almacena como un atributo del objeto de evento (event.response) que se pasa al oyente. Cuando el objeto JSON se decodifica, se traduce en un objeto Lua que almacenamos en una variable llamada "respuesta". Como la clave del elemento raíz de este objeto JSON es "datos", una vez que se descodifica, podemos profundizar en el objeto llamando a "response.data".

 función local 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

Este método es una devolución de llamada que se activará al cargar una imagen remota desde una URL. La siguiente sección describirá cómo ocurre esto. Una vez que se activa este método, espera un objeto de evento que contendrá el objeto de visualización de una imagen de perfil dentro del atributo "target" (event.target). Como puede ver, estamos configurando los atributos básicos de "alfa" en 0 o invisibles, así como la escala en 1/4 del tamaño original de la imagen.

El método Transition.to acepta 2 parámetros: el primero es el objeto sobre el que actuará y el segundo un objeto de tabla de los parámetros y valores a los que se está realizando la transición. El efecto de esta transición será mostrar gradualmente la imagen y modificarla para pasar de 1/4 de su tamaño e invisible a sus dimensiones completas (escala = 1) y visible (alfa = 1). Esto se traduce en un tipo de animación de pobre hombre basado en el efecto de animación en cada imagen a medida que se muestra. Esto tendrá más sentido cuando la aplicación se ejecute..

 para i = 1, # data do 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

Dado que el objeto "Amigos" que estamos recibiendo de la API de Faceobok es una matriz, debemos recorrerla para obtener los ID de cada usuario. Este ID se utiliza para construir una URL que servirá una versión cuadrada pequeña de la imagen de perfil de un usuario. Usando el método display.loadRemoteImage, podemos llamar a una URL y se encargará de descargar los datos de la imagen y almacenarlos localmente antes de mostrarlos en la pantalla.

El primer parámetro que pasamos:

 "http://graph.facebook.com/"? datos [i] .id? "/imagen"

es la URL construida que incluye la ID de Facebook única del usuario (datos [i] .id).

 "GET", showImage, "amigo"? ¿yo? ".png", system.TemporaryDirectory,

Los siguientes 4 parámetros son:
- El tipo de solicitud, "GET" en este caso.
- nuestro método de devolución de llamada showImage que se activará cuando se descargue la imagen.
- un nombre único para el archivo de imagen que estamos descargando
- un espacio de archivo temporal para almacenar las imágenes descargadas a las que se accede a través del método "system.TemporaryDirectory"

Finalmente, los últimos 2 parámetros que pasamos son las coordenadas X e Y en las que queremos mostrar la imagen en:

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

Como estamos creando un collage, podemos colocar las imágenes al azar en toda la pantalla. La llamada "math.random" toma un valor inicial y un valor final y devuelve un número aleatorio entre los 2. En este caso, necesitamos números aleatorios que estén entre 0 y el ancho / alto de la pantalla. Más o menos y la imagen no sería visible..

¡Y ahí lo tenemos! Echa un vistazo a los resultados a continuación:

Las caras se han difuminado para proteger a los inocentes. :)

Como nota final, la biblioteca de la API de Facebook para Corona no se ejecutará correctamente en el Simulador de Corona. La forma más sencilla de probar la aplicación que creamos en el tutorial será ejecutarlo en el simulador de iOS real que viene con Xcode..