Word sociaal met OpenSocial

 
25 mei 2009

OpenSocial is een set van gelieerde API’s voor webgebaseerde sociale netwerk applicaties. Het is oorspronkelijk ontwikkeld door Google in samenwerking met MySpace, maar inmiddels doen vele andere applicaties mee. OpenSocial kan je op twee manieren gebruiken, je kan een container in je eigen webapplicatie stoppen, zodat er gadgets voor jouw applicatie gemaakt kunnen worden. Er zijn een aantal bruikbare containers beschikbaar, zoals Shindig van Apache. Daarnaast is er de mogenlijkheid om er gadgets mee maken om te integreren in webapplicaties, waar ik in deze blogpost op in ga. De containers laat ik buiten beschouwing.Een gadget is een xml bestand met een xml definitie en een body van html en javascript.  OpenSocial heeft tot doel om door zoveel mogelijke sociale netwerk applicaties ondersteund te worden. Zodat je gadget bij elke applicatie hetzelfde werkt. Hieronder zie je de code van een minimale HelloWorld gadget.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
   <ModulePrefs title="Example #1">
      <Require feature="opensocial-0.8" />
   </ModulePrefs>
   <Content type="html">
    <![CDATA[  HelloWorld! ]]>
   </Content>
</Module>

Er kan bijvoorbeeld een profiel aanvulling gemaakt worden voor in iGoogle, die daarbij dus ook werkt in de andere applicaties zoals MySpace. Het profiel dat wordt opgehaald is afhankelijk van de container, omdat de aanroepen door de container naar de bijbehorende applicatie worden gestuurd. Een gadget kan binnen de CDATA tag ook javascript bevatten. Dat voeg je toe zoals in een html pagina met <script type=”text/javascript”> </script>.

OpenSocial heeft een eigen javascript library die allerlei basisfunctionaliteit bevat zoals het ophalen van een vriendenlijst. Dit ophalen van een vriendenlijst gaat via een DataRequest die bestemd is voor de container. In principe wordt bij elke container de vriendenlijst met deze code opgehaald. Het voorbeeld hieronder haalt de vriendenlijst op van het account dat is ingelogd bij de web applicatie waar de container in draait. Aangezien dit voorbeeld binnen iGoogle draait krijg ik de vriendenlijst van mijn Google (Gmail) account.

<!--module head - FriendListExample.xml -->
      gadgets.util.registerOnLoadHandler(init);
 
      function init(){
         getMyFriendList();
      };
 
      function getMyFriendList(){
         var idspec = opensocial.newIdSpec(
              { "userId" : "OWNER", "groupId" : "FRIENDS" });
         var req = opensocial.newDataRequest();
         req.add(req.newFetchPersonRequest(
                 opensocial.IdSpec.PersonId.OWNER), "get_owner"
                 );
         req.add(req.newFetchPeopleRequest(idspec),
                 "get_friends");
         req.send(writeFriendListToDom);
      };
 
      function writeFriendListToDom(dataResponse) {
         var owner = dataResponse.get('get_owner').getData();
         var friends = dataResponse.get('get_friends').getData();
         var html = 'Friends of ' + owner.getDisplayName();
         html += ':<ul>';
         friends.each(function(person) {
             html += '<li>' + person.getDisplayName() + '</li>';
         });
         html += '</ul>';
         document.getElementById('message').innerHTML = html;
      };
   Test 2
   <div>
      <span id="message"> </span>
   </div>
<!--module closing  - FriendListExample.xml -->

In het voorbeeld hierboven registreer ik een javascript function die bij het laden van de gadget uitgevoerd moet worden. Vervolgens haalt het de vrienden lijst op van de Owner, de eigenaar van de applicatie. Er zijn shortcuts voor Friends, Viewer (diegene die de gadget opent)  en de al genoemde Owner, zodat je deze personen objecten simpeler kan ophalen. De vriendenlijst die wordt opgehaald wordt vervolgens in het element met id message gestopt, wat resulteert in een lijstje met vrienden.

De javascript library die bij OpenSocial aanwezig is kan ook Post en Get requests uitvoeren. En kan een gadget laten praten met webservices – er worden verschillende protocollen ondersteund zoals xml en json. Hieronder een voorbeeld waar ik een alert geef met het resultaat van een GET request, maar je kan ook zoals in het voorbeeld hierboven het resultaat in de gadget tonen. De tweede parameter van de makeRequest() methode is de javascript functie die de callback krijgt, zodat je de data kan gebruiken.

    function makeRequest(url) {
       var params = {};
       params[gadgets.io.RequestParameters.METHOD] =
             gadgets.io.MethodType.GET;
       gadgets.io.makeRequest(url, response, params);
    };
 
    function response(obj) {
       alert(obj.text);
    };
<input type="button" value="Get Request - succes" onclick="javascript: makeRequest('http://byonder.net/Others/OpenSocial/Test2/GetTest.php?test=1');" />

Er zijn inmiddels ook client libraries in andere programmeertalen, en kan er met de containers worden gepraat door gebruik te maken van de REST services, ook hier ga ik verder niet op in.

Om te starten met OpenSocial is Google’s iGoogle een goede keus, omdat deze de meeste ondersteuning bied met tutorials en tools. Daarbij is iGoogle open om meteen een gadget in te laden. Een aantal van de participerende partijen vereisen eerst een verzoek met het wat en waarom van de applicatie, en pas na goedkeuring daarvan krijg je toegang.  Er zijn meerdere opties om een OpenSocial gadget te maken naast het gebruik van een text editor. Zo heeft Google een online gadget editor die ook gelijk je gadget kan hosten. De uitgebreidste ondersteuning is echter een plugin voor Eclipse, welke naast tools voor het ontwikkelen ook een container mee geeft om te testen – Apache Shinding.

Hieronder een lijst van handige resources om te raadplegen voor als je met OpenSocial aan de slag wilt :


Werken met ?
Kijk dan bij onze mogelijkheden voor starters en/of ervaren IT'ers.


Categorieën: Development, Overige talen en platformen

Tags: , , , , ,