Hola, os voy a mostrar lo fácil que es crear una app Facebook utilizando una extensión que he realizado para Robotlegs 2.
Es importante, antes de comenzar tener claro como funciona Robotlegs 1 o 2 y cómo configurar una aplicación de Facebook. Con esta extensión seréis capaces de realizar las siguientes funciones básicas que cualquier aplicación Facebook necesita:
- Inicial la API de Facebook.
- Realizar el login y logout.
- Extraer la lista de amigos.
- Realizar un post en el muro.
- Compartir un link.
No me centraré en cómo configurar una aplicación de Facebook ya que es tema de otro tutorial, iré directamente al grano. Para más información sobre configurar aplicaciones en Facebook podéis consultar la ayuda que se encuentra aquí.
Una vez que tengáis configurada la App nos interesa tener el App ID/API Key que nos proporciona Facebook, similar a este: 336937833651393.
Ahora, realizamos los siguientes pasos:
- Creamos el proyecto en IntelliJ IDEA/FDT/Flex/FlashDevelop o el IDE que prefieras.
- Importamos el código de Robotlegs 2.
- Descargamos e importamos la librería Facebook Actionscript API.
- Importamos el código de Robotlegs-Facebook-Extension.
- En este tutorial he utilizado MinimalComps para crear una UI básica.
OK, ahora que ya tenemos todas las librerías y el código importado, creamos la classe donde crearemos nuestra aplicación, yo la he llamado “Application.as”:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | public class Application extends Sprite { private var _context:IContext; public function Application() { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; _context = new Context() .extend(MVCSBundle) .extend(FacebookExtension); _context.configure(FacebookAppConfig, this); } } |
Vale, vamos viendo algunas lineas importantes:
1 | _context = new Context() |
Anteriormente en Robotlegs debíamos extender la classe Context para crear nuestro contexto. En Robotlegs 2 creamos directamente una instancia de este y lo configuramos.
Primera novedad en Robotlegs 2, los Bundles, estos nos permiten configurar una aplicación Robotlegs con un paquete de extensiones. En Robotlegs 1.5 podíamos utilizar CommandMap o SignalCommandMap, generalmente extendiendo el contexto, en Robotlegs 2 es bastante más fácil, más paquetizado.
En nuestro caso, empezamos con algo sencillo, extendemos el contexto con MVCBundle:
1 | .extend(MVCSBundle) |
Es un set de extensiones similares al paquete básico que ofrecía Robotlegs 1.5 (CommandMap, MediatorMap, EventCommandMap, EventDispatcher, etc.)
Luego agregamos la extensión para realizar una app para Facebook:
1 | .extend(FacebookExtension); |
Ok, aquí comenzamos con nuestra app Facebook. Le indicamos a Robotlegs que queremos utilizar la extensión “FacebookExtension”. Esta nos configurará una serie de comandos, servicios, modelos de base que servirán más tarde para realizar diferentes operaciones.
Otra novedad de Robotlegs 2, “configure”, aquí, podemos pasar como parametro una classe, el segundo parámetro será el contextView.
1 | _context.configure(FacebookAppConfig, this); |
Lo que hará es configurar de algún modo, las extensiones o la aplicación.
En mi caso, esta classe contiene:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | public class FacebookAppConfig { [Inject] public var eventDispatcher:IEventDispatcher; [Inject] public var mediatorMap:IMediatorMap; [Inject] public var service:FacebookInitAPIService; [Inject] public var contextView:DisplayObjectContainer; [PostConstruct] public function init():void { service.api_key = 'YOUR_API_KEY_HERE'; mediatorMap.map(MainView).toMediator(MainViewMediator); var main:MainView = new MainView(); contextView.addChild(main); mediatorMap.mediate(main); eventDispatcher.dispatchEvent(new FacebookEvent(FacebookEvent.API_INIT_REQUEST)); } } |
Aquí tenemos algo importante:
1 | service.api_key = 'YOUR_API_KEY_HERE'; |
Con esto, le indicamos al servicio que iniciará la API la App ID/API Key que tiene que utilizar con esta aplicación. Puedes conseguir una creando una App en Facebook en: https://developers.facebook.com/apps
Tenemos el contexto construído, lo hemos configurado, ahora agregamos una vista donde se mostrarán algunos botones (login, logout, etc) y otra información relacionada con el usuario.
Vale, ahora cómo hacemos para:
Iniciar la conexión con la api de Facebook:
1 | eventDispatcher.dispatchEvent(new FacebookEvent(FacebookEvent.API_INIT_REQUEST)); |
Esto enviará un evento al contexto y se ejecutará un comando que llamará a un servicio para iniciar la API, es aquí donde se envia el App ID/API Key y se puede recibir/enviar información a Facebook. La primera vez, pedirá los permisos necesarios para instalar la aplicación. Ahora podemos comenzar a utilizar las otras funciones.
De momento, haré una lista de cómo realizar cada función, en otro post explicaré cada una con más detalle:
Realizar el login:
1 | dispatch(new FacebookEvent(FacebookEvent.USER_LOGIN_REQUEST)); |
Realizar el logout:
1 | dispatch(new FacebookEvent(FacebookEvent.USER_LOGOUT_REQUEST)); |
Obtener la información básica del usuario:
1 | dispatch(new FacebookEvent(FacebookEvent.USER_GET_BASIC_DATA)); |
Recuperar la lista de amigos:
1 | dispatch(new FacebookEvent(FacebookEvent.USER_GET_FRIENDS_DATA)); |
Compartir un link:
1 2 | var data : Object = {url:'http://blog.singuerinc.net/?p=217', title:'Robotlegs-Facebook-Extension for Robotlegs 2'}; dispatch(new FacebookEvent(FacebookEvent.SHARER, data)); |
Crear un post en el muro:
1 | dispatch(new FacebookEvent(FacebookEvent.USER_POST_TO_FEED, data)); |





