fundo
Como puxar dados da API do Twitter com Express e Twit?

Para esse tutorial iremos instalar alguns pacotes para desenvolvimento e produção. 

  • - Twit - Para facilitar nossos requests à API do Twitter
  • - Express - Para criar um servidor que irá receber esses dados pelas rotas. 
  • - nodemon - Para restartar o servidor automaticamente sempre que houver modificações e aumentar sua produtividade. 

Vamos Nessa! 

Digite no terminal: 

Agora vamos instalar o nodemon como dependência de  desenvolvimento.

(Se quiser entender esse “-D” acesse nosso post que fala sobre essas Flags no terminal).

E  por último e não menos importante vamos instalar o dotenv: 

Agora que instalamos as dependências, vamos criar uma conta para desenvolvedores no twitter. (https://developer.twitter.com/en).

Após ter criado sua conta,  crie um novo app: 

E nomeie com o nome que desejar: 

Após isso, você receberá algumas chaves, Salve-as no bloco de notas.

E agora acesse seu projeto e depois procure por “keys and tokens”. 

Gere um “Access Token and Secret” e mais uma vez salve isso no bloco de notas. 

Agora vamo ao código: 

Crie um novo arquivo .env e um gitignore. Se ainda não sabe como fazer ou para quê serve, temos um tutorial falando sobre esses dois carinhas. 

Vamos criar também uma pasta chamada “src” e o aquivo “server .js”, dentro de src vamos criar uma pasta chamada API e dentro de api vamos criar o arquivo Twitter.js.

Seu ambiente deve ficar dessa maneira: 

E pra finalizar vamos adicionar um comando ao “package.json” para que possamos começar a finalmente codar de verdade. Adicione dentro de “scripts”:

Agora sim! Vamos criar nossa aplicação com express e deixar tudo pronto para receber os dados do twitter. Vamos fazer de uma maneira simplificada, então nem iremos criar uma pasta de rotas, pois nesse caso só termos uma: 

Agora em .env vamos adicionar nossas chaves que copiamos e deixamos salvas no bloco  de notas: 

Agora que está tudo em ordem vamos abrir o "Twitter.js” e começar a brincadeira…

Na linha 2 chamamos a classe do módulo “twit” que instalamos anteriormente, depois na linha 4 começamos a criar as chaves de configurações que irão receber os valores passados no .env e logo então, na linha 20 criamos uma instância de “twit” e passamos como parâmetro as “configKeys”. Show, agora vamos criar uma classe para fazer os requests que precisamos. Vamos nessa. 

Só que antes de fazer isso recomendo que você pesquise sobre “woeid”. pois a API do twitter isso para listar lugares no mundo e usaremos também para passar como parâmetro em uma URL. 

Agora vamos criar nossa classe: 

Primeiro vamos começar pelo método “Data processing”: 

Por que temos dois arrays e dois map? Se formos pegar os dados do jeito que eles vem do Twitter, eles vão nos retornar assim: 

Então temos que processar essas informações para que venha de modo mais simples. 

Aqui criamos um método onde iremos receber um dado como parâmetro. E temos dois arrays, um onde receberemos os trending topics e outro onde receberemos os dados já processados. 

Na linha 33 fizemos um map(...) que vai executar uma função a cada iteração em cada objeto retornado. Essa função executada dentro de map(...) coloca dentro de “TTtwitter” cada objeto e em seguida (linha 34) fazemos outro map(...) que manda pra dentro de “dataProcessed” os valores filtrados por mais um map(...). 

Agora que temos um método para mastigar os dados, vamos puxar através do método GET os dados da API do twitter e passar eles dentro de “dataProcessing”. 

Como vamos fazer uma requisição a  uma API, precisamos que nosso método seja assíncrono. Então vamos retornar uma promisse onde temos dois parâmetros que serão de acordo com o sucesso (pSuc) ou falha (pErr) e então fazemos o GET à api que irá nos retornar os dados (linha 43). Agora perceba que no final recebemos como parâmetro o “woeid”, que será o id da região que escolhemos.( Para conseguir o id de cada região acesse: https://codebeautify.org/jsonviewer/f83352 ). 

Não se esqueça que passamos woeid no constructor da classe iremos e colocamos ele no this da classe para que possamos acessar ele de dentro da classe. 

Agora que temos nossa classe feita, vamos no server.js usar tudo isso: 

Vamos entender o que está acontecendo (apesar que está bem simples). Importamos a classe criada anteriormente e instanciamos ela  na linha 7 e passamos o woeid “1” que é o id do mundo inteiro (ou seja, iremos pegar os  trending topics no mundo). E criamos a rota que irá executar a o método twitterRequest() não sei se você percebeu mas eu deixei propositalmente um console.log() que mostra os dados processados pelo método “dataProcessed” mas você pode apenas retorná-lo. E para finalizar vamos retornar o json com  as informações: 

Obs: Transforme a função em assíncrona pois a resposta é uma promise. Agora   vamos retornar isso num json para vermos no  browser: 

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *