DESENVOLVENDO E IMPLANTANDO UMA APLICAO NO FACEBOOK. R.Regor!

Justificativa: Ao abordar o desenvolvimento de aplicaes para o Facebook, a maioria dos materiais disponveis sofrem dos seguintes vcios: 1) Exploram o assunto de forma muito subjetiva, sem um exemplo prtico; 2) Enchem o exemplo de detalhes que no interessam para a aplicao em si. A prpria documentao do Facebook sofre desse vcio(ok, o objetivo da documentao deles expor todos os recursos existentes). 3) Quase inexistncia de material - em portugus e atualizada - a respeito do processo completo de criao de aplicaes para o Facebook, com um exemplo prtico. Objetivo: O objetivo desse tutorial o desenvolvimento e implantao de uma aplicao, considerando apenas os aspectos essenciais e desprezando o que no for estritamente necessrio a esse objetivo. Roteiro: Os passos genricos que envolvem a criao de uma aplicao no Facebook, so:

1) 2)
2)

Preparar o ambiente da aplicao no prprio Facebook; Desenvolver a aplicao(codificar) e fazer upload para o servidor; Disponibilizar o cdigo e servidor para o Facebook;

Esses so os passos genricos(e bem genricos mesmo), para se criar a aplicao. Cada passo composto de uma srie de procedimentos - simples e um pouco complexos. Exploraremos cada um deles, passo a passo, no desenvolvimento de uma aplicao real que realizar uma tarefa simples: inverter as URLs digitadas em um campo de texto. Por que essa aplicao? Apesar do objetivo principal ser demonstrar os processos de implantao de uma aplicao no Facebook, quis faz-lo por meio do desenvolvimento de um exemplo simples, porm, prtico e til. Frequentemente (principalmente quando usamos stios de downloads), nos deparamos com os protetores de links que os invertem. E realmente um grande problema ter que invert-los manualmente. Ento, essa aplicao realiza esse procedimento. Repare na figura abaixo:

Figura 1 URL invertida

A URL est invertida. Deveria comear com http://, que aparece no final, como //:ptth. Dessa forma, o endereo no consegue ser acessado. A nossa aplicao possui a seguinte interface:

Figura 2 interface da aplicao

Uma caixa de texto onde voc vai colar a URL invertida; e outra caixa de texto que vai exibir o resultado da inverso, aps clicar no boto 'inverter'. 1. Preparar o ambiente da aplicao Preparar o ambiente significa estabelecer configuraes iniciais para que a aplicao passe a existir, mesmo sem nenhuma regra de negcio nela. Primeiramente, deve-se acessar a rea dos desenvolvedores no Facebook, no endereo facebook.com/developers, aceitar o acesso. Em seguida, ir em aplicativos, e 'criar novo aplicativo'. Surgir a janela:

Figura 3 Definir nome da aplicao

Informar o nome de exibio da aplicao, bem como o espao do nome do aplicativo(que deve ser nico). Na prxima janela, informar o captcha correspondente. Se for a primeira vez que voc usa a rea de desenvolvimento, sua conta precisa ser verificada. E isso feito por meio do informe de um nmero de celular que o FB exige por segurana. Informado o nmero, conforme a figura abaixo, o FB envia um cdigo.

Figura 4 informe de celular para envio de cdigo

Recebido o cdigo, ele deve ser informado no campo correspondente, e a aplicao criada com o nome definido na figura 3.

Figura 5 tela de informe do cdigo

Pronto, voc est apto a desenvolver para o Facebook. Vamos configurar a aplicao. 1.1 Configurao da aplicao Duas configuraes bsicas devem ser aplicadas para que a aplicao funcione:

O servidor externo para hospedagem da aplicao; O Canvas:

1.1.1 O servidor externo: O Facebook no hospeda nem executa cdigos de terceiros. Isso devido ao fato de haver milhes de aplicaes no mundo todo. Imagine o consumo de processamento exigido se isso fosse possvel! Imagine uma aplicao gigantesca, como o CityVille, que possui mais de 50 milhes de usurios no mundo todo rodando em servidores do Facebook. At vivel. Mas imagine diversos CityVilles! Assim, toda aplicao criada por terceiros deve ser implantada em algum servidor externo, para o qual o FB possa direcionar a execuo. Existem vrios servidores no mercado. Trabalharemos com o Heroku, que um servio de

computao em nuvem indicado pelo FB.

Figura 6 definio do servidor externo

Em Cloud Services(servio de computao em nuvem), clicar em get started, surgir a janela sugerindo o Heroku como servidor terceirizado. A prxima janela d a voc a possibilidade de escolher a linguagem de desenvolvimento, bem como fornecer um e-mail para uso no heroku.com.

Figura 7 definio linguagem

A linguagem padro PHP, mas podem ser usadas tambm node, python e ruby 1. Ao se clicar no boto criar, as configuraes da nova aplicao so exportadas para o heroku. E este devolve uma URL aleatria, que ser usada para referenci-la. Note que o Canvas, funcionalidade que veremos mais frente, j gera automaticamente o endereo.

1 Segundo documentaes do FB e Heroku, JAVA tambm suportada. No entanto, ela no aparece como opo a escolher no FB

Figura 8 URLs de referenciamento geradas

Para conferir se isso realmente aconteceu, precisamos usar o heroku. Acessar www.heroku.com e realizar o cadastro. Como o servio comercial, voc s poder ter apenas uma aplicao gratuita. Ao se logar no sistema, v em My Apps. Voc ver que a aplicao gerada no Facebook(figura 8), bloomingrain-4083, j aparece nele. Voc pode mudar esse nome.

Figura 9 - Heroku

A URL acessada pelo FB a que fica visvel para os usurios. Deve ser configurada no formato http://apps.facebook.com/nome_aplicao. A nossa URL ficou http://apps.facebook.com/inverti O prximo passo baixar a ferramenta de linha de comando do Heroku, o Heroku Toolbelt, que integra o git, servio open-source de verses, e comandos para fazer modificaes e upload na sua aplicao. Pode ser encontrado nesse link, em verso para Windows: http://toolbelt.herokuapp.com/windows/download Aps a instalao, abra o prompt do Windows. Todos os comandos git-Heroku podem ser executados atravs dele.

Figura 10 Prompt do Heroku

Use o comando heroku login para efetuar o logon na ferramenta de linha de comando. Digite seu

usurio/senha cadastrados no site. Quando voc loga a primeira vez no sistema, ele busca uma chave de criptografia gerada pelo sistema. Se no encontrar, sugere a gerao de uma e a envia para o site, para se certificar que voc o usurio cadastrado anteriormente. Vamos dar uma pausa no Heroku e voltar ao Facebook, com o outro item a configurar na sua aplicao, o Canvas. O Canvas O Canvas uma funcionalidade que 'converte', por meio de um componente chamado iFrame, o endereo exibido no Facebook(fictcio), no endereo real(do servidor externo, fornecido pelo Heroku). Para isso, 'Site URL', Canvas URL e Secure Canvas URL devem conter o endereo real. Repare que o 'Canvas Page' fica no padro do endereo do Facebook( esse o endereo que os usurios enxergaro).

Figura 11 - Canvas

Salve as alteraes. Sua aplicao passa a existir, porm, sem nenhuma lgica, nenhuma regra de negcio, pois no h qualquer cdigo de programao nela. Voltemos ao Heroku via linha de comando para desenvolver a aplicao. Codificando sua aplicao Para codificar a aplicao, antes eu preciso 'clonar' (baixar) os arquivos que o Facebook exportou para o Heroku(figura 6), e armazen-los localmente. No prompt do Heroku, digite o comando git clone git@heroku.com:blooming-rain-4083.git -o heroku . Em que git clone cria o repositrio local de uma cpia remota do diretrio original. Resumindo, faz download da pasta remota, exportada pelo Facebook para o Heroku . git@heroku.com: - usurio padro do Heroku. blooming-rain-4083.git cpia remota a ser feita. -o heroku -

Figura 12 Clonando a pasta remota blooming-rain-4083 do Heroku

Aps isso, acesse a pasta da aplicao que foi baixada e que vamos editar(comando cd blooming-rain4083). Dentro dela, h vrios arquivos gerados. O que vai nos interessar o index.php(para abr-lo, basta digitar o nome do arquivo). Iremos apagar todo o contedo desse arquivo, e adicionar o seguinte cdigo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Inverte URLs</title> </head> <body> <script type="text/javascript"> function captura() { var doc = document; if(doc.getElementById('url').value == '') { alert('Cole a URL aqui/url:'); doc.getElementById('url').focus; return false; } } </script> <form id="inverteurl" name="inverteurl" method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>"> <fieldset style="width:200px;"> <legend>Cole a URL aqui: </legend> <textarea name="url" cols="80" rows="1" id="url" /></textarea><br /> <input type="submit" name="btninverter" value="Inverter" onclick="return captura()" /> </fieldset> </form>

<br /> <br /> <fieldset style="width:200px;"> <legend>URL invertida</legend> <form id="urlcnt" name="urlcnt" action="#"> <textarea name="urlnv" cols="80" rows="1" id="urlnv" /><?php if(isset($_POST["url"]) and $_POST["url"] <> "") { echo strrev($_POST["url"]); } ?></textarea> </form> </fieldset> <div><small>Por: RRegor</small></div> </body> </html> Feita a alterao, salve-o e use o comando git commit -am changed greeting , para efetivar a mudana para o Git.

Figura 13 consolidando mudanas

necessrio agora fazer o deploy da aplicao para o Heroku. Deploy significa implantar a aplicao nos servidores do Heroku. Isso feito com o comando git push heroku master.

Figura 14 - Deploy

Aguarde alguns segundos at que a aplicao seja implantada no Heroku e reflita no Facebook. Ento, acesse o endereo http://apps.facebook.com/inverti. Se tudo ocorreu normalmente, aparecer a pgina da aplicao no Facebook, semelhante da figura 2, e voc acaba de criar uma aplicao no Facebook.

Se algo deu errado e a aplicao no foi exibida, reveja os passos anteriores. Se mesmo assim ainda no conseguiu, informe por que. (contato no final do documento). Algumas consideraes Uma questo que 'atrasa' a implantao da aplicao a escolha de um servidor terceirizado. Eu poderia me livrar dele? Sim, se eu tivesse um servidores web prprio. Porm, a tendncia do mercado terceirizar os servios de computao local ou prprio e coloc-lo na 'nuvem'. E exatamente esse o propsito do Heroku. Eu tambm poderia hospedar a aplicao em um computador qualquer, como meu notebook, por exemplo, pois a aplicao poderia ser implantada em qualquer computador que possua um servidor web instalado. Para isso, eu teria que ter um servidor web, como o Apache ou o IIS na minha mquina, e fazer o apontamento no Canvas para minha URL local. Exemplo: http://meu_ip_valido:porta/minha_aplicao A grande vantagem seria 'livrar-se' das configuraes do Heroku. A desvantagem seria que sua aplicao s ficaria disponvel enquanto o seu computador estiver ligado alm de outras questes de gerenciamento da aplicao. Trabalhos futuros Sempre que voc usa uma aplicao qualquer no Facebook, voc obrigado a concordar em fornecer suas informaes bsicas para que comece a us-la. Por questes de segurana, nunca solicitado sua senha s aplicaes terceiras, mas s informaes bsicas. A implementao da 'solicitao de permisso' de envio de dados feita atravs de um protocolo de autenticao conhecido por Oauth, amplamente usado no Facebook. Vamos adicionar o recurso 'solicitao de permisso' a nossa aplicao 'Inverti'. Ver figura abaixo.

Figura 14 Autenticao via Oauth.

Os prximos passos so: 1) 2) Adicionar a autenticao no Facebook, via protocolo Oauth; Desenvolver aplicaes usando JAVA(ainda no sei como fazer).

Concluso Se voc analisar a documentao do FB ou do Heroku, vai encontrar um mar de informaes, muitas desnecessrias, e que voc no usa quando desenvolve algo. Para quem no tem muita experincia, acaba tendo grande dificuldade. Esse tutorial mostrou os passos bsicos do desenvolvimento e implantao de uma aplicao no Facebook, levando-se em conta apenas os aspectos essenciais, focando no que realmente necessrio ao desenvolvimento da aplicao. Esse tutorial indito. No foi simplesmente traduzido de outro idioma, muito menos copiado. Foi desenvolvido com base em documentao disponibilizada na rea developers, do Facebook e do Heroku, e de outras pesquisas feitas na internet. Referncias: Facebook.com/developer, Heroku.com, Gostaria de obter feedback, crticas, sugestes, formar grupos de estudos virtuais e trocar experincias. Email: rregorr@gmail.com
R.Regor!