Share
Bienvenido a la parte 1 de 2 en la serie de tutoriales sobre el uso de la API de gráficos de Facebook y el SDK de Corona para crear aplicaciones sociales nativas para dispositivos móviles. La API de Facebook tiene muchas características y puede usarse para crear aplicaciones sociales poderosas. Como punto de partida, la función más básica y principal de la API de Facebook es permitir que un usuario se autentique con una aplicación que use sus credenciales de Facebook. Esto requiere un proceso de dos pasos en el que un usuario no solo iniciará sesión en una aplicación con su nombre de usuario y contraseña de Facebook, sino que también aprobará un conjunto de actividades permitidas en las que una aplicación puede participar con sus datos sociales..
Por ejemplo, a una aplicación solo se le puede permitir acceder a su nombre e imagen de perfil, pero el resto de sus datos personales permanecerá en privado. Como otro ejemplo, a una aplicación se le puede otorgar acceso para publicar en las paredes de sus amigos. El alcance de esta función API depende realmente del tipo de aplicación que se está construyendo para interactuar con Facebook.
En nuestra aplicación, comenzaremos permitiendo que el usuario se autentique con sus credenciales de Facebook para obtener un token de acceso que podamos usar durante la sesión. La sesión en este caso se define como un solo uso de la aplicación. Para iniciar este proceso, necesitamos registrar una aplicación en Facebook para obtener una clave API.
Si aún no se ha unido al programa de aplicaciones para desarrolladores de Facebook, debe hacerlo ahora..
Una vez que haya instalado la aplicación en su cuenta, debe hacer clic en el botón que dice "Configurar nueva aplicación" en la esquina superior derecha.
Cada aplicación en Facebook necesita un nombre único, así que piense en algo que sea específico para su proyecto.
Facebook puede pedirle que complete un formulario CAPTCHA en el siguiente paso. Si es así, simplemente complete para continuar.
Una vez que se crea la aplicación, verá una lista de pestañas en el lado izquierdo de la pantalla que contiene diferentes configuraciones de la aplicación. Haga clic en "Móvil y dispositivos"
En esta pantalla, anote su "ID de aplicación", que es un número largo que usaremos más adelante. Además, asegúrese de hacer clic en el botón de radio marcado como aplicación nativa y luego haga clic en "Guardar cambios" a continuación.
Ahora que tenemos la configuración de nuestra aplicación de Facebook, comencemos configurando nuestra aplicación Corona. Como elementos de partida básicos, vamos a crear 2 archivos llamados build.settings y config.lua. Estos contienen datos de configuración básicos que informan al compilador sobre la orientación de visualización de nuestra aplicación. Son los siguientes:
build.settings:
settings = orientación = default = "portrait",, iphone = plist = UIPrerenderedIcon = true,,
config.lua
application = content = width = 320, height = 480, scale = "letterbox",,
A continuación, comenzaremos a codificar nuestra aplicación en el archivo main.lua del proyecto. El código de aquí en adelante se colocará en main.lua..
Accentsconagua
ui = require ("ui") local facebook = require "facebook [/ lua] Comience por incluir las bibliotecas principales. La biblioteca de UI es una biblioteca útil desarrollada por un usuario de Corona que se puede descargar desde la página de intercambio de códigos de Ansca Mobile. Incluido en el código fuente en el archivo ui.lua. Esta biblioteca nos ayudará a crear botones y otros elementos sencillos de la interfaz de usuario. La biblioteca de Facebook es en realidad una biblioteca interna de Corona que actúa como un contenedor para diferentes funciones dentro de la API de Facebook. . Obviamente, también incluiremos eso aquí. [Sourcecode language = "lua] local appId =" ID DE LA APLICACIÓN AQUÍ " A continuación, crearemos una variable llamada appId y guardaremos en ella el "ID de aplicación" que obtuvimos cuando creamos nuestra aplicación de Facebook. Aunque es un entero grande, lo guardaremos aquí como una cadena.
Nuestro siguiente paso será crear un botón atractivo que el usuario pueda hacer clic para iniciar sesión en nuestra aplicación con sus credenciales de 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
Crear botones con la biblioteca de IU es muy fácil. En la llamada anterior, notará que estamos pasando 5 elementos al método newButton de la biblioteca de UI:
Después de eso, simplemente colocaremos el botón configurando las propiedades x e y de nuestro objeto myButton. Notará que estamos usando el objeto "pantalla" específico de Corona para obtener el contenido Ancho y contenido de la pantalla. Dado que el punto de referencia predeterminado para los objetos en Corona es el centro, al colocar este botón a la mitad del ancho y la altura de la pantalla, aparecerá justo en el centro muerto..
Para los propósitos de este tutorial, tiene sentido definir el botón primero antes de las acciones. Sin embargo, en la vida real, necesitamos definir nuestras funciones sobre el código de creación de botones para que el compilador las conozca a medida que interpreta el código de manera procesal. Nuestra primera función será definir nuestra acción de hacer clic en el botón llamada "onClick".
función local onClick (evento) if (event.phase == "release") luego facebook.login (appId, listener) end end end end
En esta función simple, estamos llamando a la biblioteca de Facebook que requerimos anteriormente y estamos pasando 2 cosas al método de inicio de sesión. El primero es el ID de la aplicación de Facebook que obtuvimos de Facebook.com cuando creamos la aplicación, y el segundo es una función que se activará en cualquier evento de devolución de llamada desde la API de Facebook. También estamos comprobando la fase de evento lanzada para evitar cualquier doble clic accidental en el botón.
Este método de escucha puede activarse varias veces, por lo que tendremos que detectar no solo el "tipo" de evento, sino también la "fase" del evento. Cuando se llame al método de inicio de sesión de Facebook, la biblioteca se conectará a Facebook y mostrará una vista web compatible con dispositivos móviles de las pantallas de inicio de sesión y autenticación de Facebook, como se muestra a continuación:
Una vez que un usuario complete el proceso de inicio de sesión, la API de Facebook comenzará a realizar devoluciones de llamada a nuestra función de escucha. Aquí está nuestra función de oyente tal como representa la primera parte de este tutorial:
función listener (event) if ("session" == event.type) y luego if ("login" == event.phase) luego facebook.request ("me") end elseif ("request" == event.type) luego respuesta local = evento. respuesta imprimir (respuesta) final fin Como puede ver, cuando obtenemos nuestra primera devolución de llamada de la API de Facebook, estamos buscando un tipo de evento de "sesión". Esto significa que el usuario ha completado una acción de sesión. Para asegurarnos de que él / ella está iniciando sesión, y no otro tipo de acción de sesión, verificamos que la fase sea de tipo "inicio de sesión". Si se aprueban estas comprobaciones, ahora crearemos una instancia "separada" a la API de Facebook Graph para un objeto de datos. En este caso, vamos a solicitar el objeto "yo", que es una abreviatura para el usuario que ha iniciado sesión actualmente. Vea abajo:
? facebook.request ("yo")? Este evento se activará y, a continuación, se llamará a nuestro mismo oyente cuando finalice el evento. Esta vez, buscaremos un tipo de evento de "solicitud" y manejaremos el objeto de "respuesta" que se nos devuelve como JSON. La impresión de este objeto producirá algo como esto (tomado de la muestra de API de FB):
"id": "220439", "name": "Bret Taylor", "first_name": "Bret", "last_name": "Taylor", "link": "http://www.facebook.com/btaylor "," username ":" btaylor "," gender ":" male "," locale ":" en_US "
Ahora la API de Facebook es muy poderosa y puede hacer toneladas de cosas geniales. En la parte 2 de nuestro tutorial, vamos a agregar una funcionalidad para solicitar datos de amigos y mostrar algunas de sus imágenes de perfil en forma de collage. Hasta entonces, lo invito a leer todas las posibilidades de la API de Facebook Graph: Documentación FB Graph.
