Escribiendo aplicaciones sociales con Google OpenSocial

Una aplicación social es una forma de Google Gadget que contiene el soporte para la API JavaScipt de OpenSocial; que se centra en las personas, permitiendo compartir información personal y de actividades con sus amigos y conocidos.

Siguiendo con nuestra serie de artículos sobre Google OpenSocial la cual inicio con OpenSocial: introducción a la API social de Google y Primeros pasos con OpenSocial ahora aprenderemos un poco más sobre las aplicaciones sociales con Google OpenSocial.

Para escribir una aplicación social, es necesario que: tengamos acceso a un contenedor que soporte OpenSocial, como Orkut.com y un conocimiento básico sobre el modo de desarrollo de un Google Gadget.

Todas las llamadas a la API de OpenSocial son asíncronas y requerirán de un soporte del lado del servidor para recibir y enviar información sobre las consultas.

Importando la librería OpenSocial:

<ModulePrefs title="Title of Your Application">
  <Require feature="opensocial-0.5"/>
</ModulePrefs>

Agregamos como parámetro FEATURE = “OPENSOCIAL-0.5” a la etiqueta REQUIRE. Un ejemplo sencillo: listando amigos.

Para recibir información debemos crear un objeto DataRequest mediante la función opensocial.newDataRequest(). Una vez creado utilizamos la función DataRequest.add(request) para definir cada tipo de información que queremos recibir.

Después de agregar las petición individuales, procedemos a invocar DataRequest.send(callback). El parámetro de la función indica la función que será ejecutada una vez que se haya recibido la información del servidor. La función toma un parámetro DataResponse, que es el resultado de la petición:

function onLoadFriends(dataResponse) {     // do something with the dataResponse   }  
 /**
  * Request for friend information when the page loads.
  */
  function getData() {
    document.getElementById('message').innerHTML = 'Requesting friends...';
    var req = opensocial.newDataRequest();
    req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
    req.add(req.newFetchPeopleRequest ('VIEWER_FRIENDS'), 'viewerFriends');
    req.send(onLoadFriends);
  };

El último parámetro en la función newFetch*Request() es una variable utilizada para recibir la información de la petición. OpenSocial define los siguientes roles:

• Viewer: el usuario autenticado en el navegador.
• Owner: el usuario al que le pertenece el Gadget en cuestión.
• Friends: usuarios a los que el propietario o visor han agregado a la lista de contactos.

Ahora, veremos las instrucciones de código dentro de la función onLoadFriends():

/**
  * Parses the response to the friend information request and generates
  * html to list the friends by their display name.
  *
  * @param {Object} dataResponse Friend information that was requested.
  */
  function onLoadFriends(dataResponse) {
    var viewer = dataResponse.get('viewer').getData();
    var html = 'Friends of ' + viewer.getDisplayName(); 
    html += ':<br><ul>';
    var viewerFriends = dataResponse.get('viewerFriends').getData();
    viewerFriends.each(function(person) {
      html += '<li>' + person.getDisplayName();
    });
    html += '</ul>';
    document.getElementById('message').innerHTML = html;
  };

El parámetro dataResponse pasado en la función contiene la información de la respuesta del servidor. La función DataResponse.get(key) regresa cada uno de las peticiones individuales realizadas. El ejemplo completo quedaría de la siguiente manera:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
 <ModulePrefs title="List Friends Example">
   <Require feature="opensocial-0.5"/>
 </ModulePrefs>
 <Content type="html">

 <![CDATA[

 <script type="text/javascript">

 /**
  * Request for friend information when the page loads.
  */
  function getData() {
    document.getElementById('message').innerHTML = 'Requesting friends...';
    var req = opensocial.newDataRequest();
    req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
    req.add(req.newFetchPeopleRequest ('VIEWER_FRIENDS'), 'viewerFriends');
    req.send(onLoadFriends);
  };

 /**
  * Parses the response to the friend information request and generates
  * html to list the friends along with their display name and picture.
  *
  * @param {Object} dataResponse Friend information that was requested.
  */
  function onLoadFriends(dataResponse) {
    var viewer = dataResponse.get('viewer').getData();
    var html = 'Friends of ' + viewer.getDisplayName(); 
    html += ':<br><ul>';
    var viewerFriends = dataResponse.get('viewerFriends').getData();
    viewerFriends.each(function(person) {
      html += '<li>' + person.getDisplayName() + '</li>';
    });
    html += '</ul>';
    document.getElementById('message').innerHTML = html;
  };
  _IG_RegisterOnloadHandler(getData);

  </script>
  <div id="message"> </div>
  ]]>
  </Content>
</Module>

Trabajando con información persistente:

OpenSocial soporta guardar y obtener información por usuario y por gadget. La información almacenada siempre será en formato de cadena de texto, que puede ser tratada como una cadena de texto en formato JSON.

Actividades:

OpenSocial también permite compartir información sobre eventos y actividades. Esto podría expresearse como un activity stream; un feed en donde cada entrada representa un evento. El uso de OpenSocial abre una nueva gama de aplicaciones de colaboración de usuarios en línea y aumenta las características de las aplicaciones.

El uso de OpenSocial abre una nueva gama de aplicaciones de colaboración de usuarios en línea y aumenta las características de las aplicaciones. Esto es solo una pequeñas reseñas del potencial de esta nueva herramienta. Para mayor información pueden consultar el sitio del proyecto.

Síguenos en: @maestros | Fan page