Esta aula surgiu a partir do problema levantando pelo TCC da Ana Gabriela, Ana Carolina, Camila e Luiza do 3ºI de 2016, onde a proposta era criar um calendário de eventos e mostrar as atividades em um aplicativo Android ou iOS. O uso de um banco de dados remoto poderia resolver bem esta problema, porém, sabemos que existem outras ferramentas eficientes a serem exploradas e que podem retornar resultados tão satisfatórios do que o tradicional banco de dados. Partimos então para o Facebook.
Este é um exemplo de uma página web, ou mobile, que cria uma lista de eventos publicados no Facebook. Um exemplo excelente para vermos a importância de se saber trabalhar com JSON e compreender com as APIs do Facebook.
O Facebook oferece 2 formas de integração, através do uso de plugins e de APIs. Os plugins são mais simples de utilizar, basicamente são códigos já prontos que você apenas copia e cola em sua página HTML, estes códigos prontos não possuem muitas opções de personalizações pois são gerados pelo próprio Facebook.
Já as APIs podem ser um pouco mais chatas dependendo do que se deseja fazer, mas quando queremos algo mais personalizados, ou quando não temos plugins que atendam nossas necessidades devemos então investir um tempo extra no desenvolvimento e trabalhar com as APIs e é o que faremos neste aula de hoje.
Requisitos
- Ter noções de uso avançado do Facebook.
- Ter noções de HTML 5 e de algum framework de estilos, aqui vamos usar o BootStrap. [aula aqui][aula aqui]
- Ter noções de JavaScript. [aula aqui]
- Sintaxe de leitura de saídas JSON. [aula aqui]
Todos estes requisitos são ensinados aqui no Blog, com exceção do Facebook. Este a própria vida digital ensina.
1. Crie um aplicativo no Facebook
- Acesse o Facebook Developers e faça seu login.
- No menu superior direito, clique em Add a New App conforme imagem
- Escolha a plataforma Website
- Crie um nome para o seu aplicativo no Facebook e clique em Create New Facebook App ID
- Preencha os dados a seguir como e-mail de contato e categoria do app.
- No passo seguinte, coloque uma URL do seu site. Caso não tenha um site, serve um blog no Blogspot ou WordPress.
- No último passo, será apresentados alguns códigos JS para que você possa fazer a integração do seu App do Facebook como a sua página WEB ou Mobile, estes códigos são do plugin do botão de LIKE do Facebook. O botão de Like não é o nosso objetivo, portanto, neste passo não é necessário fazer nada e encerramos aqui a primeira etapa deste processo.
- Atualize a sua página para que o app criado fique disponível para uso.
2. Criando a página de Eventos
Até agora você criou apenas uma aplicativo vazio, sem função alguma. Agora, para gerarmos utilidade siga os passos;
- Localize seu aplicativo recém-criado no menu My Apps
- Acesse o aplicativo criado
- Anote separadamente o ID do seu aplicativo e o APP Secret, nós iremos precisar muito destes valores.
- Clique agora no botão Settings > Advanced e localize o quadro Add Page
- Crie uma página para o seu aplicativo. Deste ponto em diante a criação é intuitiva bastando apenas seguir as instruções na tela.
3. Criando os eventos
- Com a página criada, adicione um evento conforme imagens
- Com o evento publicado, clique agora no menu Eventos, existente no menu do lado esquerdo da sua página.
- Agora, olhe na URL o número identificador da página que pode ser encontrado logo após um traço. Deixe anotado este número junto com o App Secret e com o ID do aplicativo visto nos passos anteriores.
4. Gerando o Token de acesso
Para que sua página WEB possa acessar dados do facebook sem a necessidade login é necessário obter um token. Acesse a seguinte URL
https://graph.facebook.com/oauth/access_token?client_id=358430164498291&client_secret=150fb3af95974bc4c640dfe236b85a2b&grant_type=client_credentials
Você deve substituir os números em negrito pelo ID do seu aplicativo e o número do App Secret respectivamente, por este motivo você deveria ter anotado nos passos anteriores.
O resultado do acesso será uma página retornando o token de acesso;
5. Obtendo os eventos via JSON
Agora vamos capturar todos os eventos registrados no aplicativo do Facebook.
https://graph.facebook.com/v2.7/719650704850783/events/attending/?fields=id,name,description,start_time&access_token=358430164498291|J6vnxTA23mIgZo0ws29nQNgUTWQ&since=1388534400
O primeiro número em negrito, deve ser substituído pelo número identificado da sua página de eventos visto nos passos anteriores. O Segundo número em negrito é o próprio token do seu aplicativo.
Ao acessar a url você terá então uma saída JSON exatamente como esta;
Prontinho! Agora basta fazer a leitura da saída e exibir os dados em sua página WEB ou mobile. Para facilitar, este exemplo faz uso de JQuery para facilitar a leitura.
Exemplo HTML:
<!DOCTYPE html>
<html>
<head>
<title>Teste!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
// Classe para chamar o Json.
function json(){
var qtd;
var retorno;
// Resgatar valores.
json.prototype.resgatarValores = function(){
$('#resultado').html('Carregando dados...');
// Estrutura de resultado.
$.getJSON('https://graph.facebook.com/v2.7/719650704850783/events/attending/?fields=id,name,description,start_time&access_token=358430164498291|J6vnxTA23mIgZo0ws29nQNgUTWQ&since=1388534400', function(data){
this.qtd = data.data.length;
this.retorno = '';
for (i = 0; i < this.qtd; i++)
{
//converte a saida start_time do evento para formatos mais amigáveis
var DiaHora = data.data[i].start_time;
var diaAmericano = DiaHora.split("T");
var diaBr = diaAmericano[0].split("-");
diaBr = diaBr[2] + '/' + diaBr[1] + '/' + diaBr[0];
var horaBr = diaAmericano[1].split("-");
var horaBr = horaBr[0];
//fim
this.retorno += '<h3><strong>' + data.data[i].name + '</strong></h3>';
this.retorno += 'Data: ' + diaBr + '<br />';
this.retorno += 'Hora: ' + horaBr + '<br />';
this.retorno += '<br>' + data.data[i].description + '<hr />';
}
$('#resultado').html(this.retorno);
});
}
}
// Objeto.
var obj = new json();
obj.resgatarValores();
</script>
</head>
<div class="container">
<div id="resultado"></div>
</div>
</body>
</html>
