Tutorial do Google para Criação de Apps OpenSocial traduzido - Parte 1
sexta-feira, maio 23rd, 2008 16:56 by dttg Print Imprimir esta página.

Diversas pessoas tem me perguntado se eu conheço algum tutorial em português sobre desenvolvimento para OpenSocial. Cheguei a ver alguns, mas estes não demonstravam como utilizar o que a API tem de mais legal, o lado social da coisa. Então, traduzi este tutorial do google para ajudar a quem tiver interesse. Ele aborda os aspectos de visualização de amigos, interação entre amigos, o streaming de atividades e ao final o leitor terá criado um aplicativo simples. Agradecimentos a Marcelo Sabadini e Leandro Zanol pela ajuda no processo e revisão.

O tutorial em inglês pode ser acessado aqui.

Tutorial OpenSocial

(OpenSocial API v0.7)

Dan Holevoet, OpenSocial Team
Traduzido por Diego Gomes, revisão por Marcelo Sabadini e Leandro Zanol
22 de maio de 2008

Visão Geral

Este tutorial irá apresentar a você os widgets e o OpenSocial e vai passar pelos passos necessários para se construir um simples aplicativo social para dar presentes a seus amigos. Consequentemente você será apresentado a alguns dos aspectos sociais da API OPENSOCIAL

Você pode encontrar o código fonte completo no opensocial-resources project no Google Code

O Básico dos Widgets

No seu núcleo, os aplicativos sociais são arquivos XML, às vezes conhecidos como especificações dos widgets. Aqui vai um simples exemplo de um App “Hello World” (helloworld.xml), que ilustra as informações básicas de uma especificação de App.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!">
<Require feature="opensocial-0.7" />
</ModulePrefs>
<Content type="html">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>

No exemplo “Hello World”, você pode ver várias seções que controlam as funcionalidades e o design do Widget.

* indica que o arquivo XML contém um widget.
* contém informação sobre o widget e o autor.
* Informa um pré-requisito do widget — nesse caso, a OpenSocial API (v0.7).

* indica que o conteúdo do widget é HTML. Este é o tipo recomendado para containers OpenSocial, mas widgets para outros containers, como o iGoogle por exemplo suportam outros tipos de conteúdo.

* <![ CDATA[…]]> contém o principal da aplicação, incluindo todo o HTML, CSS, JavaScript (ou referências de arquivos). O conteúdo desta seção deve ser tratado como o conteúdo de uma tag body numa página HTML básica

Preparando seu primeiroApp

Agora que você já sabe como é um aplicativo social básico, é hora de dar um passo a frente e instalá-lo em um Container OpenSocial. Este tutorial utiliza a Sandbox do Orkut:

Aqui vão coisas que você vai precisar para continuar:

* Um editor de texto ou o Google Gadget Editor

* Uma hospedagem na Web ou a hospedagem do próprio Google gadget editor

* Uma conta no Orkut

* Acesso a sandbox do Orkut

Não se preocupe, o tutorial irá guiá-lo por todo o percurso.

É bom começar com um App simples e seguir os passos.

Copie o helloword.xml do exemplo anterior num novo arquivo de texto no seu computador e salve-o.

Para hospedar o widget externamente você precisará uploadear o arquivo. Existem vários sites onde você pode fazê-lo, por ex:

* Google Code: oferece hospedagem e opções de versionamento
* Google Gadget Editor: provê uma interace simples para editar XML de widgets.

Usar o seu serviço de hospedagem é recomendado - a flexibilidade que ele oferece será melhor que hospedagem grátis. Porém se você não tem sua hospedagem e pretende oferecer seu gadget como Open Source, use o Google Code.

Notas sobre hospedagem em intranets.

Arquivos hospedados em LANs privadas ou Intranets não podem ser acessados do Orkut. Hospede num servidor acessível externamente.

Retomando; uma vez que você tiver seu hosting configurado, faça o upload do helloworld.xml. Certifique-se que o arquivo está legível, digitando a URL no seu browser e verificando se está ok.

Em seguida, logue na sandbox do Orkut, no menu de navegação à esquerda existe o link manage stuff que te levará para a página que controla a instalação de gadgets na sua conta. Clique no link e role até adicionar novas aplicações. Preencha o campo com a URL do seu XML e clique em Adicionar aplicação. Isto dará autorização ao App para acessar seu profile, amigos, atividades, e barra de navegação.

Então você retornará a página prévia, onde você pode ver as aplicações que você instalou. Clique em helloWorld. Se você ver o texto “Hello, world!” é porque está tudo indo bem.

Se você receber uma mensagem de erro ao adicionar o App, Orkut provavelmente teve problemas ao acessar o XML. Se o erro ocorrer após a instalação, provavelmente os erros encontram-se no seu arquivo ou a sandbox pode estar em manutenção.

Se você está fazendo alterações no seu widget e elas não aparecem no Orkut, é porque o Orkut põe seu widget na cache para minimizar o carregamento no seu servidor. O ideal para um App em desenvolvimento é dar bypass na cache, adicionando um “bpc=1″ na URL na qual você está vendo a aplicação.

Agora é hora de cair matando no seu primeiro App Social. Este tutorial irá servir para escrever uma aplicação para dar presentes (”gifts”) a seus amigos. Quando o App estiver concluído, você será capaz de:

* Dar presentes a seus amigos;
* Ver os presentes que você deu a seus amigos;
* Ver os presentes que seus amigos lhe deram.

Bom, termina aqui a primeira parte do tutorial a segunda parte será postada ainda hoje na seqüência.

link para parte 2

7 Responses to “ Tutorial do Google para Criação de Apps OpenSocial traduzido - Parte 1 ”

  1. Widgy | Tutorial do Google para Criação de Apps OpenSocial traduzido - Parte 2

    [...] Tutorial do Google para Criação de Apps OpenSocial traduzido - Parte 1 [...]

  2. Widgy | Tutorial do Google para Criação de Apps OpenSocial traduzido - Parte 3

    [...] Tutorial do Google para Criação de Apps OpenSocial traduzido - Parte 1 [...]

  3. Widgy | Tutorial do Google para Criação de Apps OpenSocial traduzido - Parte 4 Final

    [...] Tutorial do Google para Criação de Apps OpenSocial traduzido - Parte 1 [...]

  4. Widgy | OpenSocial no Orkut até o final de junho? Será?

    [...] documentação em português oficial para os desenvolvedores (mas nós tentamos dar uma ajudinha aqui!), o que poderia significar poucos aplicativos relevantes para o brasileiro no orkut. Hoje o que se [...]

  5. Vinicius

    Como testar minha aplicação open social?

  6. Daniel Ribeiro França

    Opa, tutorial ta indo bem, agradeço a iniciativa desde já, obrigado!

    Eu criei um exemplo, todos os campos estão corretos, mas ele diz que está faltando o ‘description’ e ele está lá, cada vez que mando enviar ele fala um erro, mas tudo está certo, sabe que ta rolando uma instabilidade no orkut ou posso estar fazendo algo errado? se puder entrar em contato te envio meu teste por email sem problemas.

    Abraços!

  7. Marcelo Souza Gomes

    Olá Daniel esse problema tambem ocorreu comigo.

    Só que eu estava tentando adicionar o widget por outro lugar, ou seja primeiro eu cliquei em “adicionar Apps” e no final da página de “diretório de aplicativos” eu cliquei em um link que me pediu a URL do meu aplicativo, e obtive o mesmo erro que você.

    Mas consegui adicionar o aplicativo mais tarde, só que desta vez eu cliquei em , Apps “Editar” e lá tem um campo onde você coloca a URL do seu aplicativo, ai “fumfa”. ;-)

    Agradeco aos donos do site pela ótima tradução e iniciativa, o mundo está precisando de mais pessoas como vocês.

    Abraço a todos.

Deixe uma resposta