lunes, 22 de noviembre de 2010

Hacar aplicacion en Facebook

En entradas anteriores había estado hablado, sobre "la nube" y cosas relacionadas a estas.
Retomando otra vez este tema, nos enfocaremos en Facebook, como muchos sabemos, Facebook, nace de un estudiante de Harvard que se desvelaba haciendo la programación para este, ya que veía que la mayoría de las personas de la universidad, se las pasaba viendo información y fotos de otras personas, y así fue como empezo todo esto.

Pero
Cada vez, me va asombrando Facebook, ya que en tan poco tiempo de haber salido a la web, es algo que la mayoría de nosotros conocemos y utilizamos. El poder de su posicionamiento, ya que de la noche a la mañana Facebook, se convirtió en uno de los principales competidores de la web (youtube, google, myspace, entre otros).
Pero, una de las cosas que me sorprendió mas, fue el modo que tiene para la integración de aplicaciones, el cual hace que no gaste recursos en el momento de llamar a estas y ejecutando las.

Explicacion:
La entrada principal es acerca de como hacer una aplicación en Facebook, así que los orientare para que puedan realizar una aplicación o que intenten algo nuevo.

Antes que nada, hay que explicar como funciona las aplicaciones en Facebook.
Estas aplicaciones funcionan por medio de servidores externos, en el cual el programador, dejara el código de esta, ya después, cuando se quiera correr la aplicación, lo que hace Facebook es que nos enlaza al servidor de esta, para que se pueda correr en la pagina de Facebook sin gastar ancho de Banda, para este utilizando el del servidor.

Pasos:
Primero que nada nos debemos de ir a Facebook Developers o a facebook/developers.
En la primera, podemos leer un poco acerca del entorno que maneja Facebook, checar documentación, entre otras, la segunda es como una introducción de aquí buscamos el botón que diga configurar una nueva aplicación.
Le damos click y después nos pedirá, checar algunos datos, tal es el caso, como nombre de la aplicacion, etc...

Una vez que hayamos hecho eso una mandara una pantalla como esta:
Que nos dará una Id de aplicacion, Una clave Api, clave secreta, entre otras cosas.

Lo que sigue ahora es bajar la Biblioteca de cliente, el cual nos dará un ejemplo y de ahí nosotros lo podremos modificar, para esto, hay que registrarnos en una cuenta de algún servidor, ya que a diferencia de google, Facebook accede a nuestra aplicacion por medio del servidor, en mi caso la hice en http://www.000webhost.com/, ya que te da mucha capacidad, entre otras cosas.
Y ahora creas la cuenta, es muy sencillo, solo llenas un simple formulario en la cual te pedirá cual sera tu nombre de usuario, clave de acceso, y el nombre de tu host.
Enseguida, te mandara un correo con una información necesaria y claro, te pides que confirmes

Lo que sigue, sera descargar un programa que nos muesta administrar nuestra cuenta en el servidor, para que se nos pueda hacer mas fácil la forma de subir y mandar información.

Para esto, nos podemos descargar un programita, que se llama FileZilla, que tiene un buen entorno y nos deja acceder si tenemos múltiples cuentas o servidores.

Para su rápida descarga, nos vamos a Aplicaciones/Centro De Desarrollo Ubuntu, nos vamos al buscador, y tecleamos FileZilla.

Dan click para que se descargue e instale.

Una vez terminada, abrimos el programa en el cual se encuentra en Aplicaciones/Internet/FileZilla.
Nos Abrirá una pantalla, parecida a esta:
Lo siguiente es ir al correo que nos llego, en la cual nos decía, cual era nuestro servidor, nombre de usuario.
Y, ya llenamos los siguientes campos:
Una vez hecho esto, nos conectara al servidor y nos desplegara lo siguiente, indicando que hubo éxito en la conexion.
De aquí nos dirigimos a la parte de la ventana inferior derecha, que esta sera el lugar de las carpetas y documentos en nuestro servidor (el lado contrario, sera el de nuestra maquina y este nos ayudara para subir los documentos que realicemos para subir).

Lo siguiente sera, subir la biblioteca descargada.
Para esto le damos click donde dice public y creamos una carpeta en la cual se subirá la biblioteca.
Después, en el lado izquierdo buscamos la carpeta descomprimida de la biblioteca.
Ahora vamos pasando las carpetas a nuestro servidor.
Antes de pasar el archivo index.php lo abrimos y tenemos que modificar una cosas, que serán la clave de la API y la clave secreta que nos proporcionaron
Una vez hecho esto, subimos también el index.php.

Ya, dando los últimos ajustes, nos vamos a la pagina de Facebook donde tenemos la información de nuestra aplicación y nos vamos a Editar Cofiguración. En seguida como en la imagen de nos vamos a la parte de integración con Facebook.
Y ponemos cual sera nuestra dirección de trabajo, les recomiendo que pongan el nombre de su aplicación, para que sea un fácil recordatorio, abajo de este hay uno que dice Canvas URL, le pondremos la dirección de nuestro servidor, y como creamos una carpeta, le ponemos el nombre de la carpeta.
http://abapps.webege.com/face/ (esta es mi dirección del servidor).
Y le damos guardar.

Y listo, corremos nuestra aplicación, de forma que pongamos en nuestro navegador la dirección de ella en nuestro navegador.
Debo de mencionar, que yo ya estuve haciendo pruebas acerca de este, por esta razón, se verá un poco diferente al tuyo (El tuyo dirá un Hola mundo o algo relacionado).

Modificar Código
Aquí tratare de orientarte, para que empieces la creación de tu aplicación, ayudandote a poner pluginsde FAcebooks, como "Me Gusta", un cuadro de comentario, entre otros.
El lenguaje que estamos empleando es el de php, ya que descargamos esta librería y aparte es un poco mas sencillo en php y aparte hay muchas ayudas, en internet, por si te llegas a equivocar.
El archivo que estaremos modificando sera el index.php, ya que es esta es el documento o archivo principal en la cual se corre la secuencia.
Lo que podemos hacer es ir a la documentacion de Facebook developers.
Para ir conociendo un poco mas de su funcionamiento.
Después nos vamos a Social Plugins, para poner el botón de "I Like" entre otros.
Para esto nos dirigimos a la parte de un cuadro el cual nos ayudara ara obtener el código.
En la parte que dice URL to Like, ponemos nuestra dirección de la aplicación, movemos unas que otra opciones y le oprimimos al botón de Get Code.
Enseguida, nos dará unas lineas de comandos y estas las copiáremos (tomemos en cuenta que es el mismo proceso para los demas plugins). para agregarlas a nuestro documento de index.php.
Y listo, subimos el archivo a nuetro servidor, nos vamos a la dirección de la aplicación y veremos como tenemos un botón de "I Like".

Por lo pronto, seria tomo de este tutorial, mas adelante haré mas publicaciones relacionadas a este.

1 comentario: