Parte 2 do tutorial de Aplicativos OpenSocial, traduzido do google code. Nesta parte, você aprenderá a configurar o básico do seu App, listar amigos e criar uma funcionalidade para que eles interajam. Em caso de dúvidas, consulte a parte 1

Configurando o Básico

Se você está começando um novo widget, deve criar um novo XML pra ele, chame-o de gifts.xml. Comece com as informações padrão de XML e inclua a OpenSocial API. Dê um título ao widget, “Gifts” (presentes), algo que reflita a aplicação do widget.

Veja como a estrutura do XML deve começar:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Gifts part 0 - Boilerplate">
    <Require feature="opensocial-0.7"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
    ]]>
  </Content>
</Module>

Este Widget agora é a base para os próximos passos no seu App.

Listando amigos.

Se você vai dar presentes a seus amigos a primeira coisa a fazer é com que a aplicação descubra quem são seus amigos.Primeiro crie uma função que é chamada assim que o widget for carregado. Por agora, ela só terá uma função, mas mais tarde vamos criar vários passos para inicialização.

gadgets.util.registerOnLoadHandler(init);

function init() {
  loadFriends();
}

Agora, é claro, precisa existir uma função para chamar as informações de amigos. A função a seguir cria um pedido de dados e depois preenche com os tipos de dados que você precisa: o visualizador (viewer) e os amigos do visualizador (viewerFriends). Então ele envia o pedido ao servidor, dando o nome de uma função para chamar quando os dados retornam.

function loadFriends() {
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
  req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'),
'viewerFriends');
  req.send(onLoadFriends);
}

A função de callback, onLoadFriends, irá trazer os dados que o servidor retornou e mostrá-los na página.

function onLoadFriends(data) {
  var viewer = data.get('viewer').getData();
  var viewerFriends = data.get('viewerFriends')
.getData();

  html = new Array();
  html.push('<ul>');
  viewerFriends.each(function(person) {
    html.push('<li>' + person.getDisplayName()
+ "</li>");
  });
  html.push('</ul>');
  document.getElementById('friends').innerHTML =
 html.join('');
}

Diversas divs tem que ser inseridos no widget como pontos de entrada para o novo HTML.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Gifts part 1 - Friends">
    <Require feature="opensocial-0.7"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      <script src="http://opensocial-resources.googlecode.com/svn/
samples/tutorial/tags/api-0.7/gifts_1_friends.js"></script>
      <script>
        gadgets.util.registerOnLoadHandler(init);
      </script>
      <div id='main'>
        Your friends:
        <div id='friends'></div>
      </div>
    ]]>
  </Content>
</Module>

Dando Presentes (Gifts)

Agora é hora de implementar a razão de ser do seu widget, dar presentes. Primeiro, atualize o widget para incluir um novo arquivo JavaScript (que foi fornecido a você), para converter os tipos de JavaScripts básicos em JSON strings para armazenamento fácil. Em seguida você precisará alterar o HTML básico assim você pode inserir novas informações para dar os presentes no layout.

O XML deve se parecer com isso:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Gifts part 2 - Send Gifts">
    <Require feature="opensocial-0.7"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      <script src="http://opensocial-resources.googlecode.com/svn/
samples/tutorial/tags/api-0.7/gifts_2_send_gifts.js"></script>
      <script>
        gadgets.util.registerOnLoadHandler(init);
      </script>
      <div id='main'>
        <div id='give'>
          <form id='gift_form'>
            Give <span id='gifts'></span> to <span id='friends'></span>.
 <a href="javascript:void(0);" onclick='giveGift();'>Give!</a>
          </form>
        </div>
      </div>
    ]]>
  </Content>
</Module>

Agora que já existem ganchos no HTML, modifique a saída da lista de amigos em um set de opções de tags, para usar com a tag selecionada. Isto permitirá que você selecione um amigo para presentear.
function onLoadFriends(data) {
  var viewer = data.get('viewer').getData();
  var viewerFriends = data.get('viewerFriends').getData();

  html = new Array();
  html.push('<select id="person">');
  viewerFriends.each(function(person) {
    html.push('<option value="' + person.getId() + '">' +
person.getDisplayName() + "</option>");
  });
  html.push('</select>');
  document.getElementById('friends').innerHTML = html.join('');
}

Agora você precisará criar um outro menu de seleção dos presentes que você pode dar. O exemplo usa diferentes tipos de nozes (nuts), mas você pode usar o que quiser. Uma pequena mudança na função de inicialização chama esta função quando a página carrega.
function makeOptionsMenu() {
  var options = ['a cashew nut', 'a peanut', 'a hazelnut', 'a red pistachio nut'];

  var html = new Array();
  html.push('<select id="nut">');
  for (var i = 0; i < options.length; i++) {
    html.push('<option value="' + i + '">' + options[i]
+ '</option>');
  }
  html.push('</select>');
  document.getElementById('gifts').innerHTML =
html.join('');
}

function init() {
  loadFriends();

  makeOptionsMenu();
}
Para unir tudo isto, implemente giveGift (dar presente), a função chamada quando um usuário clica no botão de dar (give) no widget. A função carrega o presente (gift) a ser dado e o amigo a quem você dará, atualiza o objeto global dos presentes (gifts) e grava isto.
var givenGifts = {};

function giveGift() {
  var nut = document.getElementById('nut').value;
  var friend = document.getElementById('person').value;

  givenGifts[friend] = nut;
  var json = gadgets.json.stringify(givenGifts);

  var req = opensocial.newDataRequest();
  req.add(req.newUpdatePersonAppDataRequest(opensocial.
DataRequest.PersonId.VIEWER, 'gifts', json));
  req.send();
}

Amanhã voltamos com as partes 3 e 4 do tutorial.

Abraços e boa sorte a todos! em caso de dúvidas, comentem!