[API] Integrando com Giphy (GIFs)

[Cr4cko 1.215]

Bom, a pedido de um jovem ai no forum, vou iniciar um tutorial sobre API's. No caso, vou fazer uma integração com a API do

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

. Essa e bem simples, mas da pra ter uma noção do que é se conectar a uma API e é a mesma pegada em todos. A única coisa que diferencia uma API da outra e a forma de trabalhar a questão do token/integridade. Tudo e RESTFUL, tudo é GET/POST/PUT/DELETE.

 

1 - Vamos entrar no site do Giphy e procurar algum link relacionado a desenvolvedores ou API.

 

2 - Beleza, agora voce está na pagina de Desenvolvedores. Quando voce vai integrar com uma API, normalmente voce tera que de alguma forma ter um código ou token que te da acesso aquela API. Alguns sites apenas pedem pra voce criar uma conta e te dão um token/key, no caso do GIPHY e algumas redes sociais eles pedem para voce criar um APP. Então vamos criar um APP (Lembrando que voce precisa criar conta no GIPHY para criar um APP). Clique em Create an App:

 

3 - No meu caso eu não preciso criar conta pois ja tenho uma, vocês vão provavelmente ter que fazer um cadastro antes de criar um APP. Mas relaxa, é bem tranquilo. Pulando isso, voce vai se deparar com um modal pedindo um nome e descrição pro APP. Preencha a parada e clique em Create New App.

 

4 - Com o aplicativo criado, voce tera um token gerado! Guarde esse token pois vamos usa-lo para fazer as consultas. Agora no menu la em cima, clique em "Docs". Vamos agora ler a documentação rs.

 

5 - Agora voce tem uma linda documentação inteira para ler. Lembre-se, programador, a faculdade não te ensina a programar. A faculdade te ensina a ler documentação para programar. Esse é o segredo. Quanto mais você ler e compreender uma estrutura, mais qualificado e eficiente você será. Então leia toda essa porra. Eu não li porque eu sinto o cheiro do endpoint, e como estou integrando com GIPHY, um banco de gifs, provavelmente eu apenas quero jogar um texto pra ele e obter um gif relacionado. Olha só, um link chamado Search brilhou na tela! GG

 

6 - Ele dá aquela jogadinha la pro final da página onde explica como funciona o endpoint do Search. Cara, integrar com API e tudo a mesma coisa. So tem alguns detalhes que diferenciam. Um deles é a qualidade que é feita a API. Eu odeio api bugada ou não objetiva. Tem algumas APIs que requer um nível de segurança mais avançado, então e meio chato. Mas é SO LER CARAIO. Sem medo.

 

7 - Como podem ver ele é simples. Se voce não sabe a definição de REST, vou resumir em uma frase e peço para que leiam essa resposta que é bem explicativa:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

REST é uma arquitetura de endpoints/rotas que possuem permissões, regras, e conectam uma aplicação com a outra sem ter que dividir ou passar acessos internos (senha de banco de dados etc), falando de uma forma muito simplificada.

 

Eu vou desenvolver o código em Javascript porque é simples e como se trata de imagens vou printar os resultados num site, mas você pode usar qualquer linguagem. Voce apenas precisa de uma classe ou função nativa que tenha requests. No jQuery é o famoso

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

, no Python é

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

, no Java pela pequena pesquisa aqui que fiz tem o

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

, etc.

 

Cada um tem um nome mas é tudo a mesma coisa. Voce passa uma URL e alguns parâmetros se for um POST/PUT/DELETE ou faz um GET que é consulta de dados. Você pode passar parâmetros no GET também, mas eles são chamados de querystring. Vamos usar isso agora.

 

Nossa URL Base:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Metodo: GET

Rota final: /v1/gifs/search

 

Parametros que podemos ou temos que usar (Request Params):

api_key[string] (obrigatorio) - Api do nosso aplicativo

q[string] (obrigatório) - texto de pesquisa do gif

limit[int] (opcional) - limite de resultados

offset[int] (opcional) - não sei, tem que ler na documentação (viu? rs)

rating[string] (opcional) - Não entendi bem, tem que ler a documentação também.

lang[string] (opcional) - linguagem dos gifs

fmt[string] (opcional) - formato de restorno

 

Bom, o que vamos usar mais é o q e api_key. O resto pode deixar no default mesmo. Vamos montar então nosso código. Nele vamos criar um método que voce passa um texto e ele faz um GET no endpoint de Search do Giphy. Vamos ver o que retorna.

 

Lembrando que se você quiser dar uma testada para ver qual é o formato do retorno do JSON dessa requisição, você pode brincar no API Explorer deles. Podemos notar que ele retorna uma lista de objetos com todas as informações de cada gif. Voce poderia pegar e printar todas as coisas que quiser, ir brincando com o resultado e tudo mais. No meu caso eu só quero listar as imagens enquanto eu digitar, então só vou precisar do id.

 

Primeiro vamos criar o HTML, que sera bem simples. Um input para o usuário digitar o que quer e um botão apara ele pesquisar. Criei também uma div com class gifs, que é onde ficará as gifs quando retornar da nossa requisição. Crie um arquivo chamado index.html:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Fechou, agora vamos criar o javascript. Estou usando jQuery, então não se esqueça de importar o jquery (CDN do jQuery). No código abaixo, crio um método para receber um texto, esse texto usamos para pesquisar no endpoint de search do Giphy, e o retorno criamos uma lista de imagens e jogamos dentro do class .gifs. Crio também um evento de click no botão.

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Pronto, agorá é só usar digitar o texto e pesquisar. Eu criei um exemplo no meu Codepen

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

, e coloquei um CSSzinho vagabundo. Qualquer duvida, só perguntar :)