Ionic Framework [2|3]: Utilizando a Graph API do Facebook

Publicado em 23 de Março de 2018

O Ionic Framework[2|3] tem ganhado muito espaço como opção para desenvolvimento mobile. Dentre os motivos da sua popularização, destaca-se o fato de ser multi-plataforma (evitando retrabalho ao compilar para novas plataformas), ser baseado em angular [2|4] (transição suave para quem já domina o framework) e possuir um bom número de componentes de fácil utilização em sua interface. Neste post, vou demonstrar a implementação de uma aplicação utilizando a Graph API do Facebook.

Ao desenvolver o aplicativo do Arena64, a primeira funcionalidade que incluí foi um feed principal para recuperar as postagens da página. Para recuperar esses posts, vamos utilizar a Graph API do Facebook.

CRIANDO O APLICATIVO

Vamos começar criando o projeto no Ionic 2/3. Se você já está familiarizado com a linha de comando do Ionic, sabe que a linha abaixo cria um novo projeto com template em branco para a versão 2 do framework:

$ ionic start ionic2-tutorial-facebook blank --v2

1	$ ionic start ionic2-tutorial-facebook blank --v2

Para continuar, precisamos registrar uma aplicação na plataforma de desenvolvedores do Facebook. Você pode acessar https://developers.facebook.com/apps e efetuar login com sua conta do Facebook. Clique em “Adicionar Novo Aplicativo” e preencha o formulário com suas informações. Com a aplicação registrada, vamos gerar um token de acesso para fazer as requisições.

FACEBOOK GRAPH API EXPLORER

A Graph API do Facebook é um serviço baseado no protocolo HTTP e a forma de fazer as consultas se diferem um pouco de uma REST API no sentido de que você especifica na requisição quais são os dados que você está buscando do servidor.

No Graph API Explorer, selecione a sua aplicação. Em seguida, clique em “Obter Token” e selecione “Token de Aplicativo”. Após isso, o token será exibido no campo “Access Token”. Guarde esse token pois vamos utilizá-lo para fazer as requisições no aplicativo. É válido ressaltar que esse token gerado no explorador da API é temporário e portanto expira depois de algum tempo. Para obter um token permanente, siga os procedimentos indicados neste link.

CRIANDO O SERVIÇO

Para utilizar a API no aplicativo que criamos, vamos precisar de um serviço que faça as requisições. Dentro da pasta src/services, criamos um arquivo facebook-service.ts, com o conteúdo que segue:

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Injectable()
export class FacebookService {

  private accessToken = '<seu-token>';

  private graphUrl = 'https://graph.facebook.com/arena64';

  constructor(private http: Http) { }



  getPosts(): Observable<any> {

    query_url = this.graphUrl + `?access_token=${this.accessToken}&date_format=m/d/Y h:m:s a \\U\\T\\C&fields=posts{link,created_time,message,attachments}`;

    return this.http.get(query_url).map(response => (response.json()));

  }

}

import { Http } from '@angular/http';

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Rx';

import 'rxjs/add/operator/map';

@Injectable()

export class FacebookService {

private accessToken = '<seu-token>';

private graphUrl = 'https://graph.facebook.com/arena64';

constructor(private http: Http) { }

getPosts(): Observable<any> {

query_url = this.graphUrl + `?access_token=${this.accessToken}&date_format=m/d/Y h:m:s a \\U\\T\\C&fields=posts{link,created_time,message,attachments}`;

return this.http.get(query_url).map(response => (response.json()));

}

Nas variáveis declaradas do componente, temos o token de acesso (que você deve substituir pelo que obteve previamente) e a url da página com os posts a serem recuperados. Note que é importante manter esse token secreto, uma vez que ele dá acesso às suas informações. Portanto tome cuidado com repositórios públicos de código. Uma boa maneira de mantê-lo seguro é implementar um serviço de backend para fazer a chamada à API, evitando armazenar essa informação no frontend.

Na url da consulta, solicitamos 4 campos a respeito do post: Link, hora de publicação, legenda e anexos (imagem/vídeo). É especificado ainda o formato de data que queremos utilizar, de forma a facilitar sua exibição no aplicativo.

EXIBINDO OS POSTS

Vamos modificar o componente HomePage padrão para utilizar o serviço que implementamos para recuperar os posts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FacebookService } from './../../services/facebook-service';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [FacebookService]
})
export class HomePage {

  posts = [];

  constructor(
  	public navCtrl: NavController,
    public facebookService: FacebookService
  ) {

  }

  ionViewDidLoad(){
    this.fetchPosts();
  }


  fetchPosts(refresher = null, scroll = null){
    this.facebookService.getPosts().subscribe(data => (data.posts.data.map(this.mapPosts))
    , (error) => (
       alert("Não foi possível buscar as postagens. Verifique sua conexão com a internet ou tente novamente mais tarde!")
    ));
  }

  mapPosts = (post) => {
    this.posts.push({
      link: post.link,
      time: post.created_time,
      message: post.message,
      photos: this.getPhotos(post)
    });
  }

  getPhotos = (post) => {
    if (!post.attachments)
      return [];

    let attachments = post.attachments.data[0].subattachments ||
                      post.attachments;

    return attachments.data
      .filter(x => x.type == "photo")
      .map(x => x.media.image);
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FacebookService } from './../../services/facebook-service';

import 'rxjs/add/operator/map';

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers: [FacebookService]

})

export class HomePage {

posts = [];

constructor(

public navCtrl: NavController,

public facebookService: FacebookService

) {

}

ionViewDidLoad(){

this.fetchPosts();

}

fetchPosts(refresher = null, scroll = null){

this.facebookService.getPosts().subscribe(data => (data.posts.data.map(this.mapPosts))

, (error) => (

alert("Não foi possível buscar as postagens. Verifique sua conexão com a internet ou tente novamente mais tarde!")

));

}

mapPosts = (post) => {

this.posts.push({

link: post.link,

time: post.created_time,

message: post.message,

photos: this.getPhotos(post)

});

}

getPhotos = (post) => {

if (!post.attachments)

return [];

let attachments = post.attachments.data[0].subattachments ||

post.attachments;

return attachments.data

.filter(x => x.type == "photo")

.map(x => x.media.image);

}

O componente foi alterado basicamente para fazer a busca dos posts assim que a página carrega (no lifecycle ionViewDidLoad) e mapeia os posts com os 4 campos que solicitamos na consulta para um array do componente, para ser exibido na view. Esta, por sua vez, é alterada para exibir os posts em cards:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>ARENA 64</ion-title>
  </ion-navbar>
</ion-header>
<ion-content overflow-scroll='false'>

  <ng-container *ngFor="let post of posts">
    <ion-card *ngIf="post.photos.length > 0">
      <img [src]="post.photos[0].src" imageViewer />
      <ion-card-header class="post-header" *ngIf="post.message">
        <h2 class="post-subtitle">{{ post.message }}</h2>
      </ion-card-header>
    </ion-card>
  </ng-container>


</ion-content>

<ion-header>

<ion-navbar>

<ion-icon name="menu"></ion-icon>

</button>

<ion-title>ARENA 64</ion-title>

</ion-navbar>

</ion-header>

<ion-content overflow-scroll='false'>

<ng-container *ngFor="let post of posts">

<ion-card *ngIf="post.photos.length > 0">

<ion-card-header class="post-header" *ngIf="post.message">

<h2 class="post-subtitle">{{ post.message }}</h2>

</ion-card-header>

</ion-card>

</ng-container>

</ion-content>

Feitas algumas customizações adicionais no layout, após o carregamento a página inicial fica da seguinte forma:

PRÓXIMAS ETAPAS

Este foi um exemplo mais básico possível de utilização da Graph API do Facebook. Algumas considerações devem ser feitas:

A API retorna uma quantidade limitada de posts. Para seguir a consulta para posts mais antigos, é necessário fazer uma nova requisição na próxima página (com o link indicado na própria resposta)
É uma boa prática incrementar a experiência de usuário com funcionalidades mobile, como infinite scroll para o feed, notificações push para novas publicações e opções de compartilhamento.
É válido ressaltar mais uma vez o cuidado de não se deixar o token armazenado no aplicativo, pois se o mesmo for decompilado, o token estará exposto e a segurança da sua conta comprometida. Esta foi uma demonstração apenas para fins didáticos.

Em posts futuros vou demonstrar a implementação de algumas dessas funcionalidades com base nessa mesma aplicação. Qualquer dúvida ou sugestão, utilize os comentários ou entre em contato!

Ronan Lopes

CTO na Hy Brazil Energia. Bacharel em Ciência da Computação e mestre em Otimização e Inteligência Computacional pela Universidade Federal de São João del-Rei (UFSJ). Pós-graduado em Data Science & Big Data pela PUC Minas. Praticante do budismo tibetano e facilitador pelo CEBB. Nas horas vagas rabisca alguma coisa, resolve um cubo mágico ou aprecia uma boa cerveja em companhia dos amigos.

1 Comentário

Responder

Sannytet

11 de dezembro de 2018 at 14:22

Nice posts! 🙂
___
Sanny

Ionic Framework [2|3]: Utilizando a Graph API do Facebook

CRIANDO O APLICATIVO

FACEBOOK GRAPH API EXPLORER

CRIANDO O SERVIÇO

EXIBINDO OS POSTS

PRÓXIMAS ETAPAS

Ronan Lopes

Você Também Pode Gostar

React Native vs. Ionic: uma comparação passo a passo

Ionic Framework [2|3]: Internacionalizando seu App com ngx-translate

Ionic Framework [2|3]: Melhor prática para adicionar o Font Awesome

1 Comentário

Sannytet

Deixe uma resposta para Sannytet Cancelar Resposta