Un espacio para los entusiastas del web

Escribiendo aplicaciones sociales con Google OpenSocial

Publicado el 21 de Febrero, 2008

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.

Otros artículos relacionados

Califica esta nota:

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 votos, promedio: 5.00 de 5)
Loading ... Loading ...

Comentarios

  1. Hola y gracias por la informacion, me gusta la herramienta de mucha utilidad.


  2. excelentes pautas para el Mnto-PC de gran ayuda para orientar de qué, cómo y porqué hacerlo. Muchas gracias.


  3. Esto es Javascript, verdad?


  4. Empiezo a pensar que es un corta y pega de otros sitios.. ¿por que no se presta atencion a la gente que aun no ha empezado con Open Social y que lo ve relevante para la web?

    aun asi.. gracias
    http://www.madridwebdesign.es


Deja tu Comentario

Maestros del Web se reserva el derecho de moderación de los comentarios. Evita utilizar palabras soeces, ataques directos, descalificativos, insultos, de lo contrario tu comentario será eliminado.


Sobre el Autor

Juan Manuel Lemus
Editor del blog DotPress. Creador de la metodología de desarrollo L5 y jefe del proyecto Apperture Web Framework.

Más artículos de Juan Manuel Lemus

Las Notas en tu correo


Acerca de

Maestros del Web nace cuando intentamos traducir Webmaster al Español. Nacimos orientados al diseño y desarrollo web. Hoy somos un espacio de apoyo para los entusiastas que participan en proyectos en la red.
Leer más de Maestros del Web