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

De Aulas
Linha 1: Linha 1:
 +
 
Afluentes: [[Desenvolvimento Front-end II]], [[Usabilidade, desenvolvimento web, mobile e jogos]]
 
Afluentes: [[Desenvolvimento Front-end II]], [[Usabilidade, desenvolvimento web, mobile e jogos]]
  
Linha 31: Linha 32:
 
== api.js ==
 
== api.js ==
  
Para gerenciar essa api, vamos criar um novo arquivo na pasta <code>src</code>. O nome pode ser de sua escolha, mas aqui vamos criá-lo como <code>src/api.js</code>. Nesse arquivo, vamos importar o axios, adicionar a API que queremos conosumir e exportá-la:
+
Para gerenciar essa <code>API</code>, vamos criar um novo arquivo na pasta <code>src</code>. O nome pode ser de sua escolha, mas aqui vamos criá-lo como <code>src/api.js</code>. Nesse arquivo, vamos importar o <code>axios</code>, adicionar a <code>API</code> que queremos consumir e exportá-la:
  
<syntaxhighlight lang=javascript>
+
<syntaxhighlight lang="javascript">
// Importando o axios para nosso projeto
+
// Vamos importar o axios para nosso projeto
 
import axios from 'axios';
 
import axios from 'axios';
  
/* Vamos criar uma constante chamada api, mas o nome pode
+
/* Aqui criamos uma constante chamada api, mas o nome pode
ser qual você quiser. Nela, vamos colocar um axios.create,
+
ser qualquer outro. Nela, vamos colocar um axios.create,
genérico e chamamos nossa URL. */
+
genérico para a chamada da url. */
 
const api = axios.create({
 
const api = axios.create({
     baseURL: 'https://api.tvmaze.com/search/shows?q=start%20trek'
+
     baseURL: 'https://api.tvmaze.com'
 
});
 
});
  
Linha 48: Linha 49:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
Mais informações sobre a API você encontra em: https://www.tvmaze.com/api
+
Mais informações sobre a <code>API</code> você encontra em: https://www.tvmaze.com/api
  
 
== App.js ==
 
== App.js ==
  
Depois alteramos o código do arquivo <code>src/App.js</code> para utilizar a API:
+
Depois alteramos o código do arquivo <code>src/App.js</code> para utilizar a <code>API</code>:
  
<syntaxhighlight lang=javascript>
+
<syntaxhighlight lang="javascript">
 
import React, { Component } from 'react';
 
import React, { Component } from 'react';
 
import api from './api';
 
import api from './api';
  
/* 1. Criaremos uma classe para nossa aplicação e
+
// Criaremos uma classe para nossa aplicação e damos o extends em Component.
damos o extends em Component. Observe que agora
 
é adicionado no import. */
 
 
class App extends Component {
 
class App extends Component {
  
   // 3. Criamos um state para armazenar os filmes
+
   // Criamos um state para armazenar a lista de filmes
 
   state = {
 
   state = {
     filmes: [],
+
     movies: [],
 +
  };
 +
 
 +
  /* Vamos criar nosso constructor para criar um atributo especial inputRef.
 +
  Esse atributo vai colocar o cursor no campo texto da pesquisa depois que
 +
  nossa aplicação tiver sido montada.
 +
  */
 +
  constructor(props) {
 +
    super(props);
 +
    // Criamos a referência para o input no construtor
 +
    this.inputRef = React.createRef();
 +
  }
 +
 
 +
  // Método executado depois de montada a aplicação.
 +
  componentDidMount() {
 +
    // Depois de montada a aplicação, colocamos o cursor no campo de pesquisa.
 +
    this.inputRef.current.focus();
 
   }
 
   }
  
   /* 4. Vamos adicionar um componente para buscar
+
   mySubmitHandler = async (event) => {
  os dados na API. */
+
     try {
  async componentDidMount() {
+
      // Prevenimos o padrão de submissão de formulários html.
     /* 5. Veja que a constante response utiliza o await
+
      event.preventDefault();
    porque usamos async. */
 
    const response = await api.get('');
 
  
    /* Colocamos o console log para poder inspecionar
+
      // Pegamos o valor digitado no campo de pesquisa e colocamos em query.
    os elementos para debug, mas não é utilizado na
+
      const query = document.getElementById('query').value;
    aplicação*/
 
    //console.log(response.data);
 
  
    // 6. jovar os valores recebidos para filmes
+
      /* A constante response utiliza o await porque é uma operação assíncrona.
    this.setState({ filmes: response.data });
+
      Também, quando usamos o get com a operação que será chamada, passamos os
 +
      parâmetros que precisamos para a nossa pesquisa
 +
      */
 +
      const response = await api.get('/search/shows', {
 +
        params: {
 +
          q: query,
 +
        }
 +
      });
 +
 
 +
      // Atualizamos a lista de filmes
 +
      this.setState({ movies: [] });
 +
      this.setState({ movies: response.data });
 +
    } catch (error) {
 +
      console.error("Execution error :", error);
 +
    }
 
   }
 
   }
  
 
   // 2. Criamos nosso render
 
   // 2. Criamos nosso render
 
   render() {
 
   render() {
     /* 7. Vamos buscar os dados de this.state e jogar para
+
     // Vamos buscar os dados de this.state e jogar para a posição movies
    a posição filmes*/
+
     const { movies } = this.state;
     const { filmes } = this.state;
 
  
 
     return (
 
     return (
 
       <div>
 
       <div>
 
         <h1>Filmes</h1>
 
         <h1>Filmes</h1>
         { console.log(filmes)}
+
         <form onSubmit={this.mySubmitHandler}>
 +
          <input type='text' id='query' ref={this.inputRef} />
 +
          <button type='submit'>Buscar</button>
 +
        </form>
  
         {/* 8. Como temos uma array, então vamos usar um maps
+
         {/* Como temos uma array, podemos usar um maps para percorrê-la.
        para percorrê-la. Vejaj que temos que ver no resultado
+
        Veja que temos que ver no resultado da API os atributos que vamos
        da API os atributos que vamos mostrar, como name e url.*/}
+
        mostrar, como name e url, por exemplo.
         {filmes.map(filme => (
+
        */}
           <li key={filme.show.id}>
+
         {movies.map(movie => (
 +
           <li key={movie.show.id}>
 
             <h2>
 
             <h2>
               {filme.show.name}
+
               {movie.show.name}
 
             </h2>
 
             </h2>
             <p><a href={filme.show.url} target="_blank">
+
             <p><a href={movie.show.url} target="_blank">
               {filme.show.url}</a></p>
+
               {movie.show.url}</a></p>
 
           </li>
 
           </li>
 
         ))}
 
         ))}
Linha 114: Linha 142:
 
export default App;
 
export default App;
 
</syntaxhighlight>
 
</syntaxhighlight>
 
Podemos tirar, do baseURL o que procuramos, <code>start%20trek</code> do arquivo <code>api.js</code> e colocar como parâmetro no <code>api.get</code> do arquivo <code>Api.js</code>.
 
 
<syntaxhighlight lang=javascript>
 
const response = await api.get('start%20trek');
 
</syntaxhighlight>
 
 
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 [https://react-bootstrap.github.io/getting-started/introduction aqui].
 
Se você quiser usar o bootstrap no React, basta seguir as orientações [https://react-bootstrap.github.io/getting-started/introduction aqui].
Linha 129: Linha 149:
 
== Desafio 1 ==
 
== 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.
+
Use bootstrap para deixar a visualização mais bonita.
 
 
2. Mostre os resultados dentro de uma tabela.
 
 
 
3. Use bootstrap para deixar a visualização mais bonita.
 
  
 
== Desafio 2 ==
 
== Desafio 2 ==
  
 
Implemente uma aplicação que consuma alguma outra API de sua escolha.
 
Implemente uma aplicação que consuma alguma outra API de sua escolha.

Edição das 14h27min de 24 de outubro de 2024

Afluentes: Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos

Passo 1: Criar um aplicativo ReactJS

Para consumir API, vamos criar uma aplicação, tal como visto em React.js: Criação de um aplicativo, mas vamos precisar usar uma API.

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 consumir e exportá-la:

// Vamos importar o axios para nosso projeto
import axios from 'axios';

/* Aqui criamos uma constante chamada api, mas o nome pode
ser qualquer outro. Nela, vamos colocar um axios.create,
genérico para a chamada da url. */
const api = axios.create({
    baseURL: 'https://api.tvmaze.com'
});

// 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';

// Criaremos uma classe para nossa aplicação e damos o extends em Component.
class App extends Component {

  // Criamos um state para armazenar a lista de filmes
  state = {
    movies: [],
  };

  /* Vamos criar nosso constructor para criar um atributo especial inputRef.
  Esse atributo vai colocar o cursor no campo texto da pesquisa depois que
  nossa aplicação tiver sido montada.
  */
  constructor(props) {
    super(props);
    // Criamos a referência para o input no construtor
    this.inputRef = React.createRef();
  }

  // Método executado depois de montada a aplicação.
  componentDidMount() {
    // Depois de montada a aplicação, colocamos o cursor no campo de pesquisa.
    this.inputRef.current.focus();
  }

  mySubmitHandler = async (event) => {
    try {
      // Prevenimos o padrão de submissão de formulários html.
      event.preventDefault();

      // Pegamos o valor digitado no campo de pesquisa e colocamos em query.
      const query = document.getElementById('query').value;

      /* A constante response utiliza o await porque é uma operação assíncrona.
      Também, quando usamos o get com a operação que será chamada, passamos os
      parâmetros que precisamos para a nossa pesquisa
      */
      const response = await api.get('/search/shows', {
        params: {
          q: query,
        }
      });

      // Atualizamos a lista de filmes
      this.setState({ movies: [] });
      this.setState({ movies: response.data });
    } catch (error) {
      console.error("Execution error :", error);
    }
  }

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

    return (
      <div>
        <h1>Filmes</h1>
        <form onSubmit={this.mySubmitHandler}>
          <input type='text' id='query' ref={this.inputRef} />
          <button type='submit'>Buscar</button>
        </form>

        {/* Como temos uma array, podemos usar um maps para percorrê-la.
        Veja que temos que ver no resultado da API os atributos que vamos
        mostrar, como name e url, por exemplo.
        */}
        {movies.map(movie => (
          <li key={movie.show.id}>
            <h2>
              {movie.show.name}
            </h2>
            <p><a href={movie.show.url} target="_blank">
              {movie.show.url}</a></p>
          </li>
        ))}
      </div>
    );
  }
}

export default App;

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

Atividades

Desafio 1

Use bootstrap para deixar a visualização mais bonita.

Desafio 2

Implemente uma aplicação que consuma alguma outra API de sua escolha.