Mudanças entre as edições de "Consumindo API com React.js"

De Aulas
Linha 1: Linha 1:
−
Afluentes: [[Desenvolvimento Front-end]], [[Usabilidade, desenvolvimento web, mobile e jogos]]
+
Afluentes: [[Desenvolvimento Front-end II]], [[Usabilidade, desenvolvimento web, mobile e jogos]]
  
 
= Criando a Aplicação =
 
= Criando a Aplicação =

Edição das 13h48min de 27 de fevereiro de 2024

Afluentes: Desenvolvimento Front-end II, 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:

Pastas projeto react.png

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: 

import React, { Component } from 'react';
import api from './api';

/* 1. Criaremos uma classe para nossa aplicação e
damos o extends em Component. Observe que agora
é adicionado no import. */
class App extends Component {

  // 3. Criamos um state para armazenar os filmes
  state = {
    filmes: [],
  }

  /* 4. Vamos adicionar um componente para buscar
  os dados na API. */
  async componentDidMount() {
    /* 5. Veja que a constante response utiliza o await
    porque usamos async. */
    const response = await api.get('');

    /* Colocamos o console log para poder inspecionar
    os elementos para debug, mas não é utilizado na 
    aplicação*/
    //console.log(response.data);

    // 6. jovar os valores recebidos para filmes
    this.setState({ filmes: response.data });
  }

  // 2. Criamos nosso render
  render() {
    /* 7. Vamos buscar os dados de this.state e jogar para
    a posição filmes*/
    const { filmes } = this.state;

    return (
      <div>
        <h1>Filmes</h1>
        { console.log(filmes)}

        {/* 8. Como temos uma array, então vamos usar um maps
        para percorrê-la. Vejaj que temos que ver no resultado
        da API os atributos que vamos mostrar, como name e url.*/}
        {filmes.map(filme => (
          <li key={filme.show.id}>
            <h2>
              {filme.show.name}
            </h2>
            <p><a href={filme.show.url} target="_blank">
              {filme.show.url}</a></p>
          </li>
        ))}
      </div>
    );
  }
}

export 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.

Se você quiser usar o bootstrap no React, basta seguir as orientações aqui.

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.

Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=Consumindo_API_com_React.js&oldid=8950”