Criando aplicativos para Facebook hospedando no Heroku
Introdução
Em artigo anterior, vimos como criar aplicativos para facebook e hospedá-los em servidores particulares. Neste artigo vamos demonstrar como criar e hospedar o aplicativo no Heroku. O Heroku é uma alternativa gratuita para hospedar usas aplicações do facebook. (Lembre-se que conforme o acesso à sua aplicação for aumentando, você terá que aumentar os recursos da sua infraestrutura. Isso é feito automaticamente no Heroku, porém você começara a ter um custo com essa hospedagem).
Criando seu app do facebook
Para iniciar a criação da sua app, esteja logado no facebook, acesse o link abaixo e clique no botão Criar Novo Aplicativo
https://developers.facebook.com/apps
Após clicar no link Criar Novo Aplicativo irá abrir uma nova janela solicitando o nome da sua aplicação. Informe o nome da app e marque a opção “Web Hosting: Yes, I would like fee web hosting provided by Heroku”:
Clique no botão Continuar. Após clicar no botão, será solicitado um captcha para digitar. Digite o captcha corretamente para poder avançar.
Será apresentado uma nova tela, do Heroku, pedindo para informar qual linguagem de programação deseja trabalhar. No caso, iremos trabalhar com a linguagem php. Informe também o seu endereço de email que será usado para criação da sua conta no Heroku.
Clique no botão Criar para finalizar a criação da sua conta no Heroku. Será apresentado uma nova tela informando que sua aplicação foi criada com sucesso. Clique no botão Go to App para abrir sua aplicação recém criada:
Pronto, agora você tem uma aplicação do facebook criada e hospedada no Heroku. Vamos ver agora como editar e trabalhar com sua aplicação.
Editando sua aplicação Facebook no Heroku
- Definindo sua senha no Heroku
- Download do heroku toolbelt
- OS X — http://toolbelt.herokuapp.com/osx/download
- Windows — http://toolbelt.herokuapp.com/windows/download
- Ubuntu Linux — http://toolbelt.herokuapp.com/linux/readme
- Login inicial
- Obtendo o código fonte de sua aplicação
- Editando o código fonte de sua aplicação
- Considerações
- Banco de Dados
- Desenvolvendo Local
- Cloud Computing
Após criado seu usuário no Heroku, através do procedimento anterior, você deve ter recebido um email com algumas instruções do Heroku. Clique no link inserido no email para que você possa criar uma senha de acesso, caso seja sua primeira vez no Heroku. O link esta logo abaixo do texto (no email):
To start editing your new app, create a password for your Heroku account
Ao clicar no link, insira sua nova senha. De acordo com a tela abaixo:
O heroku toolbelt é uma ferramenta, usada através da linha de comando, para que você possa trabalhar com suas aplicações hospedadas no Heroku. Através dela você irá editar e publicar suas aplicações.
Segue abaixo os links para instalação do heroku toolbelt de acordo com sua plataforma:
Após instalado o toolbelt, você poderá usá-lo através da linha de comando. No caso do Windows, execute o cmd.exe para poder digitar os comandos instalados pelo toolbelt.
Para poder editar suas aplicações, o primeiro passo é realizar o login no heroku e fazer o upload da sua chave púbica, que será gerada no primeiro login através do comando heroku login. A chave gerada (ssh) é utilizada para comunicação entre você e o heroku
O comando abaixo irá realizar esse procedimento:
> heroku login
Enter your Heroku credentials.
Email: douglas.pasqua@gmail.com
Password (typing will be hidden):
Could not find an existing public key.
Would you like to generate one? [Yn]
Generating new SSH public key.
Uploading ssh public key C:/Users/Douglas.Pasqua/.ssh/id_rsa.pub
Authentication successful.
Para obter o código fonte de sua aplicação, você precisará saber o nome da sua app hospedada no heroku. O nome é gerado aleatoriamente pelo Heroku na hora que você cria sua aplicação no facebook. Na tela de configuração básica de sua aplicação no facebook, você pode obter este nome no campo App Domains. No meu caso, o campo App Domains esta setado para gentle-sands-5488.herokuapp.com. Portanto o nome da minha aplicação será simplesmente gentle-sands-5488 !
Perceba também que o endereço no campo App Domains, http://gentle-sands-5488.herokuapp.com, nada mais é que o endereço onde sua aplicação esta hospedada no heroku. Através dele você pode acessar sua aplicação e testar as mudanças que você for efetuando.
Portanto, segue o comando para baixar o código fonte de sua aplicação: (Caso tenha alguma dúvida, esse comando esta no email que o Heroku te enviou na hora da criação de sua app no facebook):
> git clone git@heroku.com:gentle-sands-5488.git -o heroku
Cloning into 'gentle-sands-5488'...
remote: Counting objects: 180, done.
remote: Compressing objects: 100% (112/112), done.
remote: Total 180 (delta 82), reused 132 (delta 62)
Receiving objects: 100% (180/180), 137.91 KiB | 42 KiB/s, done.
Resolving deltas: 100% (82/82), done.
O comando anterior, baixou sua aplicação para um diretório local. Um novo diretório foi criado na sua máquia com o nome da sua aplicação. (Ex: gentle-sands-5488). A partir desse ponto, você já pode começar a desenvolver sua aplicação do facebook. Veja que o Heroku criou uma aplicação demo do facebook para você. Entre no diretório e edite o arquivo index.php. Veja que o código gerado pelo Heroku tem vários exemplos interessantes que podem ser aproveitados:
// This fetches some things that you like . 'limit=*" only returns * values. // To see the format of the data you are retrieving, use the "Graph API // Explorer" which is at https://developers.facebook.com/tools/explorer/ $likes = idx($facebook->api('/me/likes?limit=4'), 'data', array()); // This fetches 4 of your friends. $friends = idx($facebook->api('/me/friends?limit=4'), 'data', array()); // And this returns 16 of your photos. $photos = idx($facebook->api('/me/photos?limit=16'), 'data', array()); // Here is an example of a FQL call that fetches all of your friends that are // using this app $app_using_friends = $facebook->api(array( 'method' => 'fql.query', 'query' => 'SELECT uid, name FROM user WHERE uid IN(SELECT uid2 FROM friend WHERE uid1 = me()) AND is_app_user = 1' ));
A partir desse ponto, modifique o index.php de acordo com sua necessidade. Veja que tem até uma parte no código do index.php que realiza o login no facebook para o usuário poder utilizar sua aplicação. Aproveite para re-utilizar esse código gerado pelo Heroku.
Após ter realizado as mudanças desejadas, faça um commit das alterações para sincronizar com o git:
> git commit -am "Alterado mensagem de boas vindas"
[master 8cd03f3] Alterado mensagem de boas vindas
1 files changed, 1 insertions(+), 1 deletions(-)
Assim que quiser publicar suas alterações na aplicação, digite o comando abaixo:
> git push heroku master
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 325 bytes, done.
Total 3 (delta 2), reused 0 (delta 0)
-----> Heroku receiving push
-----> Git submodules detected, installing
Submodule 'sdk' (https://github.com/facebook/facebook-php-sdk.git) regisered for path 'sdk'
Initialized empty Git repository in /tmp/build_1mhqivsdpoaat/sdk/.git/
Submodule path 'sdk': checked out '98f2be163c96a51166354e467b95dd38aa4b019'
-----> PHP app detected
-----> Bundling Apache version 2.2.22
-----> Bundling PHP version 5.3.10
-----> Discovering process types
Procfile declares types -> (none)
Default types for PHP -> web
-----> Compiled slug size: 9.7MB
-----> Launching... done, v5
http://gentle-sands-5488.herokuapp.com deployed to Heroku
To git@heroku.com:gentle-sands-5488.git
5b0f7da..8cd03f3 master -> master
Nesse momento, suas mudanças efetuadas foram efetivadas. Basta visualizar as mudanças no link de sua aplicação. No meu caso:
http://gentle-sands-5488.herokuapp.com
O Heroku disponibiliza um add-on onde é possível conectar com banco de dados PostgreSQL. O serviço é gratuito para desenvolvimento. Conforme o acesso à sua aplicação começar a crescer, você precisará de uma conta profissional e precisará escalar sua infraestrutura no Heroku. A partir desse ponto você começará a pagar pelo serviço. Mais detalhes sobre o serviço e pacotes:
https://postgres.heroku.com/
https://postgres.heroku.com/pricing
É possível testar sua aplicação local, ao invés de ter que publicar no heroku toda alteração que fizer para poder testar. Caso for uma aplicação grande, esse processo pode se tornar custoso. Com alguns ajustes é possível montar uma ambiente de desenvolvimento local para testar sua aplicação. Mais detalhes, veja no link:
https://devcenter.heroku.com/articles/facebook#working-locally
Heroku é uma plataforma de cloud computing. É um serviço que permite que o desenvolvedor fique focado no desenvolvimento de sua aplicação, sem se preocupar com a infraestrutura. Conforme sua aplicação crescer, escalar torna-se uma operação simples e fácil. O Heroku sugere alguns pacotes específicos para necessidades de uma aplicação de Facebook com muitos acessos:
Consigo fazer tudo só não consigo depois enviar os arquivos para eles …
Poderia explicar mais detalhado está parte?
Att, Lucas
Lucas
dezembro 8, 2012
oi Lucas,
Conseguiu usar o git para baixar o código fonte da sua aplicação ? Se conseguiu, então esta fácil enviar suas alterações. Entre no diretório da sua aplicação, criado pelo comando git clone, após ter realizado as mudanças desejadas, digite:
git commit -am “Texto qualquer”
git push heroku master
O primeiro comando irá atualizar o seu repositório com suas alterações e o segundo comando irá publicar suas alterações diretamente na sua aplicação.
Esses comandos devem ser feitos na linha de comando do Windows ou Linux.
Boa sorte!
pasquati
dezembro 12, 2012
Eu realmente não entendi como usar o heroku, poderia fazer algo mais detalhado, como fez aquele login e talsw eu não entendi
Jerfeson Guerreiro
dezembro 14, 2012
Ok consegui fazer tudo depois de lê e re lê e lê de novo entendi toda a logica, Excelente tutorial está muito de parabéns
Jerfeson Guerreiro
dezembro 15, 2012
quando eu vou enviar minha aplicação , na hora do git commit diz o seguinte : not a git repository ( or a the parent directories): .git o que eu faço ?
Samuel Cavalcante
dezembro 19, 2012
Olá Samuel,
Você conseguiu fazer o git clone normalmente ? Para fazer o git commit vocÊ precisa estar dentro do diretório criado pelo git clone. No meu caso foi o gentle-sands-5488 !
cd gentle-sands-5488/
git commit -am "Alterado mensagem de boas vindas"
Boa sorte!
pasquati
dezembro 19, 2012
VLW XD
Samuel Cavalcante
dezembro 19, 2012
como eu faço pra tirar tipo os “4 amigos que usam esse app” e as linhas perto do Welcome?
Samuel Cavalcante
dezembro 21, 2012
Opa, parabéns pelo tutorial.
Só estou com uma dúvida… não entendi muito bem como faço pra editar os arquivos… Eu consigo fazer tudo, até a parte do git clone, ai eu dou “cd heroku/” e depois “ls”, aparecem o nome dos arquivos que tem lá “index.php, utils.php, etc” mas eu não sei como faço pra editá-los.
Se puder me ajudar eu agradeço de mais!!
Abraços.
Renato
janeiro 14, 2013
Boa tarde Renato,
Quando você cria à aplicação hospedada no heroku, o Heroku já disponibiliza uma aplicação demo de exemplo, que são os arquivos que você encontrou dentro do diretório. Modifique os arquivos com o editor de texto preferido. Por exemplo, edite o arquivo index.php e modifique alguma coisa que terá um impacto visual na aplicação.
Depois de modificado de acordo com o que você quer, digite os comandos para publicar as mudanças na sua aplicação:
git commit -am "Alterado mensagem de boas vindas"
git push heroku master
Boa Sorte!
pasquati
janeiro 15, 2013
Parabéns pelo tutorial!! Mto bom…
Só tenho uma dúvida…
Consegui editar o index.php… porém não consigo subir os outros arquivos do app que eu tinha criado para o Heroku!
Pode me ajudar com isso??
Mais uma vez, Parabéns.
Douglas Barteles
maio 28, 2013
Olá Douglas, Legal que gostou do tutorial.
A manipulação de arquivos no Heroku é feito através do git. Aconselho você se familiarizar com o git que provavelmente vai te ajudar a resolver esse tipo de problema.
Para quem esta começando com o git, aconselho estudar através do trygit que pode ser acessado através do link abaixo: (normalmente 15min são suficientes)
http://try.github.io/
Boa sorte!
pasquati
junho 3, 2013
Obrigado pela resposta…
Dei uma boa pesquisada e consegui usar legal!!
Mais uma vez parabéns pelo tutorial!! Muito bacana…
Uma dúvida seria: como validar se o usuário curtiu ou não a página
para usar o aplicativo? Poderia me ajudar? Obrigado…
Douglas Barteles
junho 3, 2013
Olá Douglas,
Veja meu outro artigo:
Facebook, Verificando se usuário curtiu fan page !
Boa sorte!
pasquati
junho 3, 2013
e eu posso excluir todo o conteúdo do diretório e colocar outro
Alexandre
junho 21, 2013
Olá Alexandre,
Sim, é possível excluir todo o conteúdo de teste do heroku e criar seu próprio conteúdo em um ambiente limpo.
Dentro do diretório do projeto (do clone feito do heroku)
git rm -r *
rmdir sdk
Depois copie os arquivos do seu projeto para dentro do diretório, juntamente com o sdk do facebook que esta usando.
Faça a publicação do novo ambiente:
git add .
git commit -m "Iniciando App"
git push heroku
Pronto! nesse momento você terá um ambiente somente com o seus arquivos.
Ao trabalhar com heroku, aconselho à se familiarizar mais com o git. Dica: http://try.github.io/
Boa sorte!
pasquati
julho 2, 2013
Olá,
eu estou conseguindo seguir os passos, porém não possuo os conhecimentos para editar o arquivo index. Poderias me indicar onde posso estudar/ ler sobre os “comandos”? valeu!
Fábio Gelbcke
agosto 7, 2013
Olá Fábio,
Aconselho você usar um editor voltado para programação. Como esta começando, sugiro o notepad++
http://notepad-plus-plus.org/
Como esta trabalhando com o heroku, aprenda a utilizar o git. Para começar faça o tutorial do trygit:
http://try.github.io/
Boa sorte!
pasquati
agosto 7, 2013