Consumindo API com React.js
Afluentes: Usabilidade, desenvolvimento web, mobile e jogos
Criando a Aplicação
Para criar a aplicação, vamos seguir os mesmos procedimentos da criação de aplicação normal em React.js. Para isso, abra um terminal e vá para a pasta onde você quer alocar o projeto, por exemplo: C:\React\Projetos\ ou no linux /home/meu_usuario/react/projetos. Lá, digite o comando para criar o projeto:
$ npx create-react-app consumo_api
sendo que consumo_api é o nome do nosso projeto. Observe que o comando cria uma pasta com o nome do projeto.
Para rodar o projeto, basta entrar na pasta com cd consumo_api e digitar o comando:
$ npm start
O terminal vai ficar preso à esso comando, e abrirá um navegador ou aba com a aplicação rodando.
Para desenvolver o projeto, você pode abrir ele no seu editor ou IDE preferidos. Eu utilizo o Visual Studio Code, abrindo a pasta do projeto na IDE.
Observe que teremos a seguinte estrutura de pastas e arquivos no projeto:
Para esse exemplo, nem tudo vamos precisar, então vamos excluir alguns arquivos.
Da pasta public, vamos excluir:
- logo192.png
- logo512.png
- manifest.json
- robots.txt
index.html
Do arquivo public/index.html vamos limpar o código para deixar só o que vamos utilizar. Então o código vai ficar assim:
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <meta name="theme-color" content="#000000" />
8 <meta
9 name="description"
10 content="Web site created using create-react-app"
11 />
12 <title>React App</title>
13 </head>
14 <body>
15 <noscript>You need to enable JavaScript to run this app.</noscript>
16 <div id="root"></div>
17 </body>
18</html>
Depois vamos excluir os arquivos que não preciamos da pasta src, que são eles:
- App.css
- App.test.js
- index.css
- logo.svg
- serviceWorker.js
- setupTest.js
index.js
E vamos limpar as coisas que também não precisaremos do src/index.js. Então o arquivo vai ficar assim:
1import React from 'react';
2import ReactDOM from 'react-dom';
3import App from './App';
4
5ReactDOM.render(
6 <React.StrictMode>
7 <App />
8 </React.StrictMode>,
9 document.getElementById('root')
10);
App.js
Outro arquivo que vamos dar uma editada é o src/App.js, deixando-o da seguinte maneira:
1function App() {
2 return (
3 <div className="App">
4 <h1>Listar</h1>
5 </div>
6 );
7}
8export default App;
Usando uma API
Para poder consumir uma API, vamos usar uma biblioteca externa chamada axios. No site deles explica a instalação e utilização.
https://www.npmjs.com/package/axios
Você pode olhar mais a fundo a documentação deles, mas já vamos adiantar as coisas aqui. Então, dentro da pasta do projeto, instale o axios da seguinte forma:
Windows:
C:\React\Projetos\consumo_api\ npm install --save axios
Linux:
user@pc:~/React/Projetos/consumo_api$ npm install --save axios
Agora vamos usar uma API para nossa aplicação. Para esse exemplo, vamos utilizaro o site www.tvmaze.com e vamos fazer uma pesquisa sobre star trek.
https://www.tvmaze.com/search?q=star+trek
Eles possuem uma API e vamos utilizá-la trocando www por api e ao invés de search, usamos show:
https://api.tvmaze.com/search/shows?q=star%20trek
api.js
Para gerenciar essa api, vamos criar um novo arquivo na pasta src. O nome pode ser de sua escolha, mas aqui vamos criá-lo como src/api.js. Nesse arquivo, vamos importar o axios, adicionar a API que queremos conosumir e exportá-la:
// Importando o axios para nosso projeto
import axios from 'axios';
/* Vamos criar uma constante chamada api, mas o nome pode
ser qual você quiser. Nela, vamos colocar um axios.create,
genérico e chamamos nossa URL. */
const api = axios.create({
baseURL: 'https://api.tvmaze.com/search/shows?q=start%20trek'
});
// Agora exportamos essa nossa api.
export default api;
Mais informações sobre a API você encontra em: https://www.tvmaze.com/api
App.js
Depois alteramos o código do arquivo src/App.js para utilizar a API:
1import React, { Component } from 'react';
2import api from './api';
3
4/* 1. Criaremos uma classe para nossa aplicação e
5damos o extends em Component. Observe que agora
6é adicionado no import. */
7class App extends Component {
8
9 // 3. Criamos um state para armazenar os filmes
10 state = {
11 filmes: [],
12 }
13
14 /* 4. Vamos adicionar um componente para buscar
15 os dados na API. */
16 async componentDidMount() {
17 /* 5. Veja que a constante response utiliza o await
18 porque usamos async. */
19 const response = await api.get('');
20
21 /* Colocamos o console log para poder inspecionar
22 os elementos para debug, mas não é utilizado na
23 aplicação*/
24 //console.log(response.data);
25
26 // 6. jovar os valores recebidos para filmes
27 this.setState({ filmes: response.data });
28 }
29
30 // 2. Criamos nosso render
31 render() {
32 /* 7. Vamos buscar os dados de this.state e jogar para
33 a posição filmes*/
34 const { filmes } = this.state;
35
36 return (
37 <div>
38 <h1>Filmes</h1>
39 { console.log(filmes)}
40
41 {/* 8. Como temos uma array, então vamos usar um maps
42 para percorrê-la. Vejaj que temos que ver no resultado
43 da API os atributos que vamos mostrar, como name e url.*/}
44 {filmes.map(filme => (
45 <li key={filme.show.id}>
46 <h2>
47 {filme.show.name}
48 </h2>
49 <p><a href={filme.show.url} target="_blank">
50 {filme.show.url}</a></p>
51 </li>
52 ))}
53 </div>
54 );
55 }
56}
57
58export default App;
Podemos tirar, do baseURL o que procuramos, start%20trek do arquivo api.js e colocar como parâmetro no api.get do arquivo Api.js.
const response = await api.get('start%20trek');
Mas, para deixar a busca melhor, você pode criar um campo texto para que o usuário digite o assunto que ele quer buscar na API que utilizamos.
Atividades
Desafio 1
1. Implemente o exemplo anterior no seu computador e adicione um campo texto, para que o usuário digite o que se quer procurar.
2. Mostre os resultados dentro de uma tabela.
3. Use bootstrap para deixar a visualização mais bonita.
Desafio 2
Implemente uma aplicação que consuma alguma outra API de sua escolha.
