Just Sherekan – Blog de Programación



Compartiendo conocimiento… intentando no reinventar la rueda…

Introducción a OpenSocial

OpenSocial es un API creado por Google que permite a los desarrolladores crear aplicaciones que interactuen con las redes sociales que lo soporten. En este artículo vamos a ver de que se trata y como utilizar este API.

Que son las redes sociales

Para los que no lo sabían, una red social no es más que un grupo de personas. Cada persona representa un nodo en la red, que tiene relaciones con otras personas, que a su vez tienen relaciones con otras personas, etc.

Las redes sociales se basan en la teoría de los seis grados de separación, que sostiene que toda persona está conectada con cualquier otra, por una cadena de conocidos de no más de cuatro intermediarios (seis enlaces).

De esta manera, en seis “pasos” y con las tecnologías disponibles, cualquier persona podría llegar a cualquier otra persona del planeta. Las redes sociales, intentan hacer que las personas mantengan sus relaciones con familiares, amigos, compañeros de trabajo, etc. que a su vez tienen relaciones con más personas, formando así una red de personas (una red social).

Sin duda, el tener contactos, sirve, y mucho. Pero nunca podríamos tener a los 6.000.000.000 habitantes del planeta como contactos directos. Las redes sociales, permiten alcanzar estas proyecciones, utilizando la tecnología, para relacionar los contactos de todas las personas, pudiendo así encontrar a la persona indicada para determinada tarea, o conocer personas con los mismos intereses que uno, etc.

Una red social en Internet tiene las siguientes características:

  • Los usuarios tienen un perfil que pueden actualizar.
  • Los usuarios tienen una lista de amigos, pueden agregar y eliminar amigos cuando quieran.
  • Los usuarios tienen un historial de todas las actividades que realizan en la red social (como agregar un nuevo amigo, actualizar el perfil, etc.).
  • Los usuarios pueden agregar gadgets a su perfil, entonces los demás usuarios de la red social pueden verlos e interactuar con ellos.

Algunas de las redes sociales más conocidas son Hi5, MySpace, Orkut, Facebook, entre otras.

Bueno, eso son básicamente las redes sociales, ahora vayamos a lo que nos interesa a nosotros…

Que es OpenSocial

Algunas de las redes sociales más conocidas, ofrecen a los desarrolladores un API con el cual pueden desarrollar aplicaciones (gadgets) para que los demás usuarios instalen en su página de la red social.

Estas aplicaciones, pueden ser simples gadgets (que muestren algo al usuario que lo está visualizando) por ejemplo un juego de Sudoku. O bien, pueden ser gadgets que interactúen con la red social (con los datos de la misma, como el perfil del usuario, sus amigos, etc.) por ejemplo un juego de Sudoku que almacene la cantidad de Sudokus resueltos por vos y por tus amigos, haciendo una tabla comparativa con el tiempo que les llevó resolverlo, etc.

El problema es que hay tantas redes sociales, que los desarrolladores interesados en desarrollar una aplicación, tendrían que aprenderse todos los APIs de todas las redes sociales, o simplemente limitarse a desarrollar la aplicación para una sola red social.

OpenSocial es la solución a este problema. Se trata de un API común que desarrolló Google, con la idea de que las redes sociales le den soporte, y así los desarrolladores solo tengan que usar este API para poder desarrollar aplicaciones portables a cualquier red social.

OpenSocial utiliza JavaScript, HTML y XML estándar, por lo que cualquier desarrollador con conocimiento de estos lenguajes puede aprender OpenSocial fácilmente. Además es recomendable tener algún conocimiento del API de Google Gadgets, ya que OpenSocial utiliza este API (pueden leer sobre Google Gadgets API en el artículo de Introducción a Google Gadgets API).

Como usar OpenSocial

Para construir una aplicación en OpenSocial, necesitamos primero que nada un contenedor OpenSocial. Un contenedor OpenSocial es una aplicación que puede ejecutar aplicaciones hechas con OpenSocial. Las redes sociales como Orkut o Hi5 proveen a los usuarios de este tipo de contenedores, generalmente en su perfil. Por otra parte, podemos crear contenedores en nuestro propio sitio, utilizando el proyecto Apache Shindig (una implementación de Apache del API de OpenSocial)

Si ya conocen el API de Google Gadgets, ya sabrán que solo basta con crear un fichero XML válido, cargarlo en algún contenedor y listo. La única diferencia, es que el contenedor debe soportar OpenSocial. Veamos un ejemplo:

[sourcecode language="xml"]< ?xml version="1.0" encoding="UTF-8" ?>





< ![CDATA[
Hello, world!
]]>

[/sourcecode]

No hicimos nada del otro mundo. Primero que nada declaramos la versión y codificación de la página XML. Después con los tags creamos el gadget. Dentro tenemos los tags que sirven para establecer algunos valores para el gadget (como el título, la descripción, el autor, etc.) además dentro de estos tags está , con lo cual importamos OpenSocial. Y finalmente tenemos , con lo cual indicamos el tipo de contenido (type=”html”) y el contenido del gadget en si. En cuanto a < ![CDATA[ ]] sirve para indicar que esa parte del documento no se lea como XML, ahí dentro va el contenido HTML y JS de la aplicación.

OpenSocial básicamente sirve para hacerle peticiones al servidor de la red social, pidiendo o actualizando información sobre:

  • El perfil de los usuarios: información sobre el perfil del usuario, como el nombre, la edad, el color de zapatos que usa, etc.
  • Las actividades de los usuarios: información sobre las actividades de los usuarios, es decir las acciones que realizan los usuarios dentro de la red social, como añadir un nuevo amigo, hacer un cambio en su perfil, etc.
  • Datos persistidos en los usuarios: datos extra persistidos por la misma aplicación, que puede ser cualquier tipo de información que se quiera guardar (generalmente se en JSON).

Toda esta información, se guarda en la red social, en un array asociativo:

RED SOCIAL => INSTANCIA APLICACION => ID USUARIO => CAMPO => VALOR

OpenSocial permite, además de interactuar con estos datos, persistir otros datos extra en la red social. Por ejemplo, en el caso de un sistema de comentarios, cada usuario dejaría sus comentarios, y estos se podrían guardar dentro de la red social, dentro de esa aplicación, dentro de ese usuario. Hay que aclarar que solo se pueden persistir datos dentro del usuario actual que está viendo la aplicación, y no hay ninguna manera global de persistir datos.

NOTA: en la versión 0.7 se quitó el soporte para guardar datos globales por razones de seguridad.

Bueno, como ya se dijo, OpenSocial sirve para interactuar con las redes sociales. Para esto, se le hacen llamadas asincrónicas al servidor de la red social, solicitándole en cada llamada una o más cosas (como pedir datos sobre el perfil, o actualizar algún dato guardado, etc.). Para realizar estas llamadas al servidor, se utiliza el objeto DataRequest.

Para crear un objeto DataRequest, utilizamos la función newDataRequest(), así:

[sourcecode language="js"]var req = opensocial.newDataRequest();[/sourcecode]

Eso nos devuelve un nuevo objeto DataRequest. Este objeto representa la llamada asincrónica que se va a hacer al servidor, dentro de esta llamada, se le pueden solicitar varias cosas al servidor (como el acceso a los datos del perfil o las actividades de uno o más usuarios, el acceso o la modificación de otros datos, etc.). Para indicale estas solicitudes, el objeto DataRequest tiene un método add(), al cual se le debe pasar como parámetro dos cosas:

  • La solicitud a realizar: es decir, lo que se le está pidiendo al servidor (datos sobre el perfil/actividades de un usuario, etc.).

    Para indicar esto, se utilizan los siguientes métodos:

    • newFetchPersonRequest(): sirve para solicitar información de un usuario, se le pasa como parámetro el ID de dicho usuario.
    • newFetchPeopleRequest(): sirve para solicitar información de los amigos de un usuario, se le pasa como parámetro el ID del usuario cuyos amigos se quiere solicitar la información.
    • newUpdatePersonAppDataRequest(): sirve para persistir datos, se le pasa como parámetro el ID del usuario en el cual se quieren persistir los datos el nombre del campo y el valor a almacenar (solo se le puede pasar el usuario actual).
    • newFetchPersonAppDataRequest(): sirve para solicitar los datos persistidos, se le pasa como parámetro el ID del usuario y el nombre del campo cuyo valor se quiere saber.
    • newFetchActivitiesRequest(): sirve para solicitar información sobre las actividades de un usuario, se le pasa como parámetro el ID de dicho usuario.

    Según la solicitud que se quiera realizar se utiliza alguno de estos métodos. Y el objeto devuleto por el método, es los que hay que pasarle a add() como primer parámetro.

    Por otra parte, todos estos métodos piden el ID del usuario al cual se le quiere pedir o modificar datos. La pregunta es, si tenemos una aplicación, y necesitamos el ID del usuario que está viendo la aplicación, ¿cómo podemos saber su ID? bueno, para esto OpenSocial define los siguientes roles o vistas:

    • Owner: es el dueño de la aplicación
    • Viewer: es el usuario actualmente viendo la aplicación
    • Viewer’s friends: son los amigos del viewer
    • Owner’s friends: son los amigos del owner

    Entonces, a los métodos en vez de pasarle el ID del usuario, podemos pasarle los valores “OWNER”, “VIEWER”, “VIEWER_FRIENDS” u “OWNER_FRIENDS”, que sería como pasarle el ID del usuario dueño de la aplicación (owner) el usuario que está viendo la aplicación (viewer) los amigos del viewer (VIEWER_FRIENDS) o los amigos del owner (OWNER_FRIENDS).

  • Un string para identificar la solicitud: el otro dato a pasarle a add es un string que sirve como identificador para cada solicitud. Como add() se puede llamar varias veces en un mismo objeto DataRequest, entonces se debe identificar cada una de estas solicitudes con un string, para poder ser referenciadas después al recibir la respuesta a la petición.

Entonces, básicamente la llamada a add() es así:

[sourcecode language="js"]req.add(objeto_solicitud, “identificador”);[/sourcecode]

Donde objeto_solicitud es el objeto devuelto por uno de los métodos vistos anteriormente e “identificador” es un string para identificar esa solicitud.

Ahora veamos un ejemplo de como llamar a add():

[sourcecode language="js"]req.add(req.newFetchPersonRequest(“VIEWER”), “viewer”);[/sourcecode]

Le pasamos a add() el resultado del método newFetchPersonRequest() al cual le pasamos como parámetro el ID del usuario viendo la aplicación (“VIEWER”). Y como segundo parámetro a add() le pasamos un string identificador (“viewer”).

Como ya dijimos antes, se puede llamar a add() varias veces para un mismo objeto DataRequest:

[sourcecode language="js"]req.add(req.newFetchPeopleRequest(“VIEWER”), “viewerFriends”);
req.add(req.newFetchPersonAppDataRequest(“VIEWER”, “field1″), “viewerField1″);
req.add(req.newUpdatePersonAppDataRequest(“VIEWER”, “field1″, “value”));[/sourcecode]

Al llamar al último add() podrán notar que no le pasamos un identificador, eso es porque no lo necesita, ya que las peticiones UpdatePersonAppDataRequest sirven para modificar datos, no para leerlos, por lo que no devuelve una respuesta y por ende no es necesario identificar la petición.

Una vez llamado a add(), se debe llamar a send() para enviar la petición, pasándole como parámetro una función callback para manejar la respuesta de la petición, así:

[sourcecode language="js"]req.send(callback);[/sourcecode]

Siendo callback la función que va a actuar como callback, recibiendo la respuesta de la petición (DataResponse) como parámetro:

[sourcecode language="js"]function callback(response) {
}[/sourcecode]

Donde response, es el objeto DataResponse, que es la respuesta a la petición realizada con DataRequest.

El objeto DataResponse tiene el método get() para obtener los diferentes datos devueltos por la petición. A get() se le pasa como parámetro el string identificador que utilizamos antes para llamar a add(). El método get() devuelve un objeto ResponseItem, este tiene el método getData() para finalmente obtener la información:

[sourcecode language="js"]var responseViewer = response.get(“viewer”).getData();[/sourcecode]

Ahí tendríamos la respuesta a la petición FetchPersonRequest que habíamos hecho antes. Nos devuelve un objeto Person (en el caso de FetchPeopleRequest sería un array de objetos Person). Este objeto Person representa al usuario solicitado. Y se puede acceder a sus datos mediante el método getField(), pasándole como parámetro una constante opensocial.Person.Field.*, por ejemplo:

[sourcecode language="js"]var viewerBirthDate = responseViewer.getField(opensocial.Person.Field.DATE_OF_BIRTH);
var viewerGender = responseViewer.getField(opensocial.Person.Field.GENDER);
var viewerAge = responseViewer.getField(opensocial.Person.Field.AGE);[/sourcecode]

Otra cosa que quiero agregar, es como convertir objetos a JSON y viceversa. Como ya dije antes, cuando persistimos datos con OpenSocial, generalmente guardamos estos datos en JSON, ya que muchas veces se tratan de objetos los datos a persistir. Para esto, el API de Google Gadgets, nos provee de una clase gadgets.json que trae funciones muy útiles:

  • stringify(): sirve para convertir valores JavaScript a JSON.
  • parse(): sirve para convertir de JSON nuevamente a valores JavaScript.

Entonces para persistir un objeto (como un Array por ejemplo) haríamos algo así:

[sourcecode language="js"]var people = new Array();
people.push(“Homero Simpson”);
people.push(“Pepe Argento”);
people.push(“Jack Bauer”);
var json = gadgets.json.stringify(people);
var req = opensocial.newDataRequest();
req.add(req.newUpdatePersonAppDataRequest(“VIEWER”, “people”, json));
req.send(callback);[/sourcecode]

Como podemos ver, hicimos una llamada al servidor diciéndole que agregue en el campo people del viewer, la variable json, que contiene el array people en formato JSON.

Ahora para recuperar estos datos de nuevo, haríamos lo siguiente:

[sourcecode language="js"]var req = opensocial.newDataRequest();
req.add(req.newFetchPersonAppDataRequest(“VIEWER”, “people”), “people”);
req.add(req.newFetchPersonRequest(“VIEWER”), “viewer”);
req.send(callback);[/sourcecode]

Y en el callback:

[sourcecode language="js"]var people = gadgets.json.parse(gadgets.util.unescapeString(response.get(“people”).getData()[response.get("viewer").getId()]["people"]));[/sourcecode]

Como podemos ver, al traer nuevamente el campo people del viewer, se lo pasamos a la función parse() que se encargó de parsear el objeto en JSON a un objeto JS nuevamente. Pero además, si se fijan, utilizamos la función unescapeString() antes de llamar a la función parse(). Esto es necesario para escapar el string, sino lo hacemos, es probable que parse() devuelva false.

Conclusiones

Por lo poco que estuve usando este API, no puedo decir mucho, pero hay algunas cosas que me gustaría comentar, para ver que opinan los demás:

Por ejemplo el tema de la persistencia, cuando guardamos un array por ejemplo, si queremos agregarle un ítem al array, hay que descargar el array entero del servidor, agregarle el ítem y volver a subirlo nuevamente, lo cual es bastante ineficiente, en especial si este array comienza a crecer. Aunque por otra parte, el objetivo de OpenSocial no es persistir datos en las redes sociales, sino que interactuar con los datos de los usuarios. La persistencia podría llevarse acabo por otra parte, en un servidor externo. El problema es que las aplicaciones hechas en OpenSocial son generalmente para el uso masivo de usuarios de redes sociales, cuya mayoría no tiene un servidor externo donde alojar estos datos. Y tampoco ningún desarrollador querría hostear los datos de una aplicación para millones de usuarios.

Otra cosa… ¿cómo hacer para guardar información global? es decir, toda la información que se quiera persistir, debe guardarse dentro del usuario actual que está viendo la aplicación (o sea, desde el viewer). Pero, ¿qué pasa si necesito guardar algún tipo de información global? (como ya dije antes, global fue eliminado en la versión 0.7 por razones de seguridad).

De todas formas, esta es todavía la versión 0.7 y está a fase de pruebas, seguramente faltan muchas cosas por hacer.

Bueno, eso es todo, para aprender a usar este API, no hay nada mejor que la documentación oficial de Google sobre OpenSocial.

4 comentarios

4 comentarios

  1. GUILLERMO PEÑA MEXICO Mayo 23rd, 2008 2:53 am

    HOLA,,QUE TAL,, TENGO UNA RED SOCIAL A PUNTO DE TERMINAR SU DISEÑO, http://www.MetroHot.com , Y QUIERO QUE MI SITIO SE adaptate a las especificaciones de OpenSocial para poder ejecutar las aplicaciones hechas con OpenSocial,,, he leìdo que se puede tener una red social contenedora utilizando el proyecto Apache Shindig,, mi pregunta Huilèn puedes tu o conoces a algun programador que pueda adaptar mi red social a las especificaciones de Opensocial??
    En que consiste el proyecto Apache Shindig, de que forma mi programador puede utilizarlo para adaptar mi sitio a las especificaciones Opensocial,,(en caso de que no conozcas a algun programador que yo pueda contratar)?????

    Que me puedes recomendar??

    Muchas gracias

    guillermo
    tel: 52- 993 3512847

    Villahermosa, Tabasco.
    Mexico

  2. Miguel SPAIN Noviembre 1st, 2008 2:22 pm

    ¡Hola!
    Muy buena introducción a opensocial! Tengo 8 años más que tú y como bien te han dicho otros en los comentarios, me he quedado “flipado” (que se dice en España (Sevilla)) al ver que eres una chica de sólo 17 años! Espero que no te molesten estos comentarios, pero es que entenderás que no es algo que se vea todos los días por internet. Bueno, acabo de añadir tu blog a mi google reader, porque de veras está lleno de buenos contenidos. ¡Un abrazo!

  3. Alexander VENEZUELA Enero 5th, 2009 5:37 pm

    Excelentísimo artículo.

    Bien merece su referencia en Wikipedia.

  4. hiperion SPAIN Noviembre 10th, 2009 12:25 pm

    ¿tienes ejemplos de código tanto en java como en javascript, etc?

Dejá una respuesta

Mexico