Criando aplicativos para Facebook hospedando no Heroku

Posted on novembro 29, 2012. Filed under: Facebook, PHP | Tags:, , |

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

  1. Definindo sua senha no Heroku
  2. 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:

  3. Download do heroku toolbelt
  4. 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.

  5. Login inicial
  6. 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.

  7. Obtendo o código fonte de sua aplicação
  8. 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.

  9. Editando o código fonte de sua aplicação
  10. 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

  11. Considerações
    • Banco de Dados
    • 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

    • Desenvolvendo Local
    • É 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

    • Cloud Computing
    • 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:

      http://www.heroku.com/facebook/package

Make a Comment

Deixe uma resposta para Fábio Gelbcke Cancelar resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

18 Respostas to “Criando aplicativos para Facebook hospedando no Heroku”

RSS Feed for Pasqua Tecnologia Comments RSS Feed

Consigo fazer tudo só não consigo depois enviar os arquivos para eles …

Poderia explicar mais detalhado está parte?

Att, Lucas

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!

Eu realmente não entendi como usar o heroku, poderia fazer algo mais detalhado, como fez aquele login e talsw eu não entendi

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

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 ?

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!

VLW XD

como eu faço pra tirar tipo os “4 amigos que usam esse app” e as linhas perto do Welcome?

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.

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!

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.

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!

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…

Olá Douglas,

Veja meu outro artigo:
Facebook, Verificando se usuário curtiu fan page !

Boa sorte!

e eu posso excluir todo o conteúdo do diretório e colocar outro

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!

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!

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!


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

%d blogueiros gostam disto: