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.

DTD

Esta es la definicion de tipo de documento, esto sirve como una descripción de estructura y sintaxis de un documento de XML o SGML.

Su principal objetivo es como se menciono la descripción del formato de datos que se van a emplear en una pagina web, esta generalmente la vemos enlazada con el xml, ya que a este le ayuda a darle formato a su contenido, como por ejemplo, diciéndole que formatos empleara, si son de hora, fecha, numéricos, cuantos caracteres puede contener, si la información es necesaria tenerla es en dado caso que sea opcional, entre otras cosas

En un DTD se describe:

Elementos: Indica que etiquetas van permitidas.
Estructuras: Indican el orden de las etiquetas.
Anidamiento: Indica que si una etiqueta es hija de alguna otra etiqueta.

Aquí te dejo una pagina que sera muy útil para conocer mas de este y te vienen varios ejemplos.

Ejemplo:
Por ejemplo, yo aquí le dejo un simple ejemplo que es hacerca de los datos que debe de contener el un xml de personal de una empresa.


Este es el codigo del xmlY aqui es como te despliega en el navegador, indicandote que contiene hijos, entre otros.
Ahora abrimos el dtd, el cual nos dara la siguiente informacion
Hay que tomar encuenta que el dtd es sensible a los caracteres, así que hay tener cuidado
Por ejemplo en la primera linea, indicamos que el elemento padre es personal.
Y que de estos sus hijos seran: numeroempleado, nombre, puesto, proceso, extencion, telefonooficina, correo.
Vemos también que en proceso hay un "+", esto quiere decir que tiene otros hijos los cuales están mostrados.
Y en extension, telefonooficina y correo hay un "*", el cual nos indica que en estos puede contener mas de un elemento.
Se ve también un "?", el cual nos indica que su elemento es opcional, así que puede ir o no.
Y ya en las ultimas lineas un #REQUIRED, que indica que estos campos deben de existir.

Elgg

Elgg no es nada parecido a un huevo así, que no le quites la "l" sino, que es una plataforma de código abierto, esta catalogada como un servicio de red social, ya que tu puedes crear en esta una comunidad, foro, red social, plataforma de intercambio, entre otras cosas.

En pocas palabras algo, es un facebok de código abierto, en la cual todo les podemos meter mano, para manipularlo a nuestro antojo.

Elgg es muy simple de usar, basta, con tener instalado alguna distribución linux, apache, mysql y php (en una entrada anterior había mencionado sobre estos y su instalación).

Lo bueno de elgg es que es soportada por una comunidad, en la cual esta dispuesta a ayudarte o a orientarte, si te surge alguna duda o algo por el estilo, para este, también hay muchos tutoriales, y lo mejor de todo es que si le queremos agregar cosas como por ejemplo un chat o un lugar donde aparesca fotos o algo por el estilo, basta con instalar plugins y listo, estos aparecerán, claro, también tu los puedes modificar para darle un toque mas personal.

Instalación:

Nos vamos a la pagina oficial de elgg y ahí le damos click en descargar elgg, el cual nos descargara un archivo comprimido.

Lo descomprimen elgg y lo ponen en la direccion de /var/www/ y le dan un nombre, les recomiendo que le pongan elgg para que puedan identificarlo.
Hay que crear una base de datos en MySql

para eso nos vamos a la terminal y la creamos:

Hay que crear también una carpeta de dados en /var/www/data
Después de esto tenemos que dar permisos a las carpetas creadas en /var/www/ así que abrimos la terminal y escribimos lo siguiente:
sudo chmod 777/var/www/elgg sudo chmod 777/var/www/elgg *chmod 777 le damos permisos a las carpetas

De ahí nos aparecerá un archivo que dice crontab.txt
Este lo renombramos con la terminación que queramos, y lo corremos en la terminal
/directorio de la carpeta/$ crontab crontab.ab

De ahí abren el explorar y escriben localhost/elgg/install.php.
De ahí te pedirá unos datos necesarios que son para iniciar, (ojo hay que tomar en cuenta que estos datos son de mysql, así que debes proporcionar la información de esta para que te cree la cuenta.
Ya de aquí te pedirá otra información así que la llenas y listo.
Esto es lo que te debe de aparecer al terminar todo, ahora solo faltaría apregarle algunos plugins y modificarlo para hacerlo mas al gusto nuestro.

P.d
Los plugins los descargas de la pagina oficial

Modelo OSI

Hace aproximadamente unas 3 semanas hubo un simposium de Tecnologías de Información, y me acuerdo de una de las conferencias que asistí, que hablaban del modelo OSI, yo no tenia idea que era eso, me imaginaba algo así como unas normas sobres algo, pero ya investigando me di cuenta que no estaba del todo perdido.

Modelo OSI

Este es un modelo de red descriptivo el cual fue creado por la OSI.
En pocas palabras es un marco de referencia para la definición de arquitecturas de interconexión de dispositivos.

Surge

Todo esto Surge, ya que al haber muchas tecnologías, fabricantes y empresas que desarrollaban o ivan a desarrollar dispositivos de comunicación, una norma en la cual todos pudieran entenderse de alguna forma sin importar que sus tecnologías no coincidieran. Es algo parecido como las normas que usan para la fabricación de ropa, las normas de higiene y ecología, entre otras.

Capas:
Las capas que maneja este modelo son 7, en estas capas, se especifica el protocolo que debe ser usado en cada capa. Las cuales son:

Capa 1 física: En esta capa, se encarga de las conexiones físicas de la computadora hacia la red.
Capa 2 de enlace de trafico: En esta capa, lo que hace es el direccionamiento físico (se asigna el tipo de red y la secuencia de paquetes que utiliza)
Capa 3 capa de red: En esta, se determinan la forma en la que serán enviado los datos al equipo que los recibirá
Capa 4 de transporte: En esta, se vigilan, si los datos vienen de mas de una aplicación e integra en cada uno de los datos de aplicación en un solo flujo de red
Capa 5 de sesión: En esta capa, es establecer, matener y cerrar sesión en la comunicación de los dispositivos
Capa 6 de presentación: En esta, lo que se hace es recoger información para darla a conocer a otras aplicación y estas puedan ejecutarse.
Capa 7 de aplicación: Esta ultima, es que se interactúa con el SO o la aplicación, cuando se decide hacer una acción, ya sea mandar datos, leerlos, entre otras.

Interaccion entre ellas:
Esto se puede dar y necesita que haya una interacción, ya que con esta se da un intercambio de datos o información, pero esto funciona en que cada capa agregue información de control a los datos y cada capa analiza el destino y se remueve la información de control.

Google App

Google App es un servicio que ofrece Google, para crear aplicaciones y correrlas en la web, es te es un servicio gratuito y fácil de usar, la única diferencia es que tienes que descargar un SDK, montarlo en tu computadora y seguir algunos pasos, pero en si aquí te los explicare.

Pasos:
Primero que nada nos vamos a la pagina de google app engine, lo que sigue es hacer un registro en cual es crear una cuenta en gmail si ya la tienes pasate éste paso.


Después de esto nos vamos a descargar SDK, el cual vamos a seleccionar en que lenguaje queremos programar.

En mi caso sera, en python, ya que es el que mas me gusta y mas fácil se me hace para programar.

Yo descargue en Linux ya que uso una distribución.
Te descargara un archivo comprimido. Para esto lo descomprimimos y lo ponemos en el Escritorio o en Documentos, ya que este nos servirá para estar haciendo pruebas del programa, en mi caso, lo descargue en el escritorio.
Si abrimos la carpeta creada, nos encontraremos, con con algunas carpetas y permisos.
Dentro de estas carpetas, viene un ejemplo, asi que ejecutaremos ese ejemplo:
Nos vamos al lugar donde esta localizada la carpeta y entramos
Ejecutamos el ejemplo el cual es new_project_tempalte/
Después nos saldrá una pantalla como la anterior que nos indica que esta siendo ejecutada desde localhost:8080 (esto ultimo significa que esta en el puerto 8080).
Lo único que falta es abrir el navegador, y poner localhost:8080.
Ya si nosotros queremos podemos modificar lo que contiene la carpeta de new_proyect o hacer una nueva, se repetirían los mismos pasos la diferencia es que abriríamos la carpeta que se creo.

Esto es lo que contiene nuestra carpeta de ejemplo:
Ya solo es cuestión que le modifiquemos para tener nuestra aplicación, terminandola solo la damos de alta y listo.

Apache, MySQL y PHP

Apache

Apache es un servidor web HTTP de código abierto, la cual es usada en multiplataformas (linux, windows y mac).

Esta es uno de los servidores web http mas usados, teniendo un buen reconocimiento.

Apache es usado principal mente, para enviar paginas web estáticas y dinámicas en la red. Apache por lo general lo veremos muy relacionado con mysql (base de datos) y php, perl o pyton.

Algunos ejemplos de quienes emplean apache, serian: Google, el servidor de la dra. Elisa, Wikipedia, entre otros.

MySQL

Ahora Hablaremos de MySql, este es un sistema de gestión de base de datos.

MySql es muy usado con las aplicaciones web.

My Sql lo veremos muy seguido en base de datos, ya que es muy popular y tiene licencias libres, en algunos casos, tienes que comprar licencias, pero no se asusten, ya que esto es cuando necesitamos mas de sus capacidades.
MySql, lo podemos usar, para guardar la información que se este manejando, por ejemplo, al momento de crear o extraer registros, como Facebook que toda, la información, esta sacada de registros que están almacenadas en esta base de datos.

PHP

Este es un lenguaje de programación interpretado, el cual fue diseñado para la creación de paginas web dinamias.

Este lo usamos en la interpretación, del lado del servidor.

Un ejemplo de su funcionamiento seria (tomemos el ejemplo de Facebook), el usuario quiere ver las fotos de un amigo suyo, esto se hace gracias al php, ya que este actúa como intermediario en la búsqueda de su amigo, busca en la base de datos, ya que en la base de datos, se guardan y se crea información, mas no la da específicamente, y arroja las fotos de su amigo.

En los ejemplos que mencione, se dieron a conocer de como es su funcionamiento y como se necesitan de estos para poder tener montar un servidor.

Ahora, lo que sigue, sera la instalación de estos, no es necesario, que vayas a instalar un servidor, sino lo podemos usar para experimentar o montar un simple servidor en nuestra computadora.

Instalación:
Para su instalación abrimos la terminal y tecleamos el siguiente código:
sudo apt-get install apache2, mysql-server, php5, libapache2-mod-php5, php5-gd, php5-dom, php5-pgsql, php5-mysql
Te pedirá tu clave y le das aceptar instalación y esperaras un rato.
Una ves instalado esto, ya podrás hacer uso de esto.
Por el momento es todo, en otra publicación les mencionare como crear un simple programa en php y que accesa a mysql para arrojar información .

CGI

Ahora, dejemos un momento acerca de seguridad en las redes y veamos algo acerca de la web una de ella sera:

"Common Gateway Interface" (CGI) su traducción significa Interfaz de Entrada Común.
Esta es una gran herramienta la cual se emplea muy seguido, ya que permite a un usuario solicitar datos o información de un programa que se este ejecutando en un servidor.

En pocas palabras es una transferencia de usuario a servidor.
Por ejemplo cuando uno pregunta y obtiene una respuesta, viene siendo algo así su funcionamiento.

Podemos mencionar que esto es un contenido dinámico, ya que hay puede variar, dependiendo de la solicitud que se haga.
Este programa puede estar escrito en cualquier lenguaje de programación, aunque yo te recomiendo que uses python o java, perl, ya que son fáciles de usar y hay muchos tutoriales en linea que te describen su funcionamiento.

Como actúa?

• Lo que primero que se hace es que el servidor recibe o le llega una pregunta (petición)
• Después el servidor prepara el entorno para su ejecución e inmediata mente la ejecuta.
• Aquí es cuando la aplicación hace su función
• Ya una ves que termina, el servidor manda la información producida.

Ejemplo:
Algunos ejemplos muy comunes de estos, es por ejemplo, cuando queremos entrar a una cuenta en linea, primero tenemos que llenar varios formularios y ya después obtenemos una respuesta, también al momento de una encuesta, o de algunas preguntas que hay que contestar, para conocer el resultado, etc.

Aqui les dejo un ejemplo que hice:
El ejemplo trata acerca de acceder al sistema pidiéndote tu usuario y clave.
Aqui les dejo las capturas de pantalla:
Aqui te pide los datosLlenamos el formulario, para esto cree un .txt que se llama abraham y en la cual en esta contiene la clave, la clave la puse visible.Ya, aquí te da la respuesta.

Funcionamiento:

Aquí esta el código html en el cual hay que guardarlo en /var/www/nombre del archivo.html.
El código es simple, si acaso lo único a destacar es en la 6ta linea que menciono donde esta localizado el programa que hará la respuesta.
Y ya en las ultimas lineas, menciona que aparecerá un botón para enviarse la solicitud.

La otra pate del codigo, que sera su respuesta esta guardada en /usr/lib/cgi-bin/nombre del archivo.py ya que lo estamos realizando en python
Las primeras lineas que hace es que imprime la respuesta, como la respuesta, sera en html tiene que ponerse el encabezado de este.
Aquí esta pidiendo acceso y toma la lectura de la solicitud que se envió y se guardo en la variable "nombre" e imprimirá el nombre del "usuario".
Aquí tomara lo que se halla mandado en la variable contraseña que esta sera la clave que introdujo el usuario, para esto, leerá un archivo que se llamara "usuario".txt, leerá su contenido, este es gracias al comando split que lee hasta el ";", que el contenido sera la clave, si esta es la clave, imprime la contra es correcta.
De lo contrario mostrara error,

Así de fácil, es crear un cgi, solo es cuestión que te pongas a practicar y listo.