Mudanças entre as edições de "Javascript: consumindo serviços web"
| Linha 1: | Linha 1: | ||
| + | |||
Afluentes: [[Desenvolvimento Front-end I]], [[Usabilidade, desenvolvimento web, mobile e jogos]]. | Afluentes: [[Desenvolvimento Front-end I]], [[Usabilidade, desenvolvimento web, mobile e jogos]]. | ||
| Linha 8: | Linha 9: | ||
Primeiro vamos criar nosso html. Ele será bastante simples, com um campo de search e uma tabela que será preenchida dinamicamente quando clicarmos no botão de procurar. | Primeiro vamos criar nosso html. Ele será bastante simples, com um campo de search e uma tabela que será preenchida dinamicamente quando clicarmos no botão de procurar. | ||
| + | |||
| + | Veja que aqui temos o <code>tbody</code> com um <code>id</code>. Nesse ponto essa tag se torna importante porque é dentro dela que vamos carregar nossas linhas da tabela. E por meio do id, podemos reconhecer esse elemento facilmente lá do nosso javascript. | ||
<syntaxhighlight lang=html> | <syntaxhighlight lang=html> | ||
| Linha 38: | Linha 41: | ||
== tvmaze.js == | == tvmaze.js == | ||
| − | Agora vamos criar um arquivo javascript com o nome tvmaze.js | + | Agora vamos criar um arquivo javascript com o nome tvmaze.js. |
| + | |||
| + | A função <code>getMovies()</code> é responsável pela chamada do serviço da tvmaze. Pegamos a informação do campo texto de pesquisa e juntamos com a URL de chamada (ver [https://www.tvmaze.com/api manual da api da tvmaze]). Depois usamos a função <code>fetch()</code> para fazer a chamada ao serviço. Veja que essa função precisa de <code>await</code> por ser assíncrona e a função <code>getMovies()</code> precisa ser <code>async</code>. | ||
| + | |||
| + | Agora, '''o que significa que a função é assíncrona?''' Bem, quando estamos carregando nossa página web, os conteúdos estão no nosso site, então tudo será carregado, em geral, na mesma velocidade. Se estamos fazendo uma chamada a um serviço externo, temos a questão de que estamos fazendo uma requisição para outro site, que terá que buscar as informações de um banco de dados e então responder. Esse processo pode levar um tempo. | ||
| + | |||
| + | Se nosso site tiver que esperar esse tempo para terminar de carregar, podemos ter um site meio travado. Então usamos uma função assíncrona para nosso site poder carregar tudo o que precisa e, quando a requisição chegar, apenas atualizamos o site com essas informações que vieram. | ||
| + | |||
| + | Dessa forma, o carregamento do site ocorre em paralelo com a busca das informações. Tendo um carregamento de página mais fluída. | ||
<syntaxhighlight lang=javascript> | <syntaxhighlight lang=javascript> | ||
| Linha 73: | Linha 84: | ||
parent.appendChild(tr); | parent.appendChild(tr); | ||
} | } | ||
| − | </syntaxhighlight> | + | </syntaxhighlight>Veja que no <code>result</code>, que é o resultado da chamada do serviço, aplicamos um <code>forEach</code> que retorna cada elemento de um vetor de objetos. Para cada objeto retornado, chamamos a função <code>addTableRow()</code> que criamos. Essa função cria uma linha da tabela, adiciona informações nas células e adiciona como filho de <code>tbody</code> da nossa tabela. Nesse caso, com <code>appendChild()</code>, estamos adicionando no final. |
| + | Como forma opcional, podemos usar a biblioteca [https://jquery.com/ JQuery] também. Segue um exemplo: | ||
* [[Javascript: consumindo serviços web com JavaScript e JQuery]] | * [[Javascript: consumindo serviços web com JavaScript e JQuery]] | ||
| − | |||
| − | |||
= Atividade = | = Atividade = | ||
Implemente uma página web que consuma alguma outra API de sua escolha. A API (back-end) pode até ser desenvolvida por você. | Implemente uma página web que consuma alguma outra API de sua escolha. A API (back-end) pode até ser desenvolvida por você. | ||
Edição das 13h58min de 22 de abril de 2024
Afluentes: Desenvolvimento Front-end I, Usabilidade, desenvolvimento web, mobile e jogos.
Consumindo Serviços Web com JavaScript
Veremos aqui como consumir um serviço web da internet usando a função fetch do JavaScript. Para tal, vamos usar o site tvmaze de filmes e séries. Esse exemplo está o mais simples possível, apenas com HTML sem CSS nem Bootstrap.
index.html
Primeiro vamos criar nosso html. Ele será bastante simples, com um campo de search e uma tabela que será preenchida dinamicamente quando clicarmos no botão de procurar.
Veja que aqui temos o tbody com um id. Nesse ponto essa tag se torna importante porque é dentro dela que vamos carregar nossas linhas da tabela. E por meio do id, podemos reconhecer esse elemento facilmente lá do nosso javascript.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<script src="tvmaze.js"></script>
<title>Consumindo serviços em Javascript</title>
</head>
<body>
<h1>Consumindo Serviços em JavaScript</h1>
<input id="search" type="search">
<button type="button" onclick="getMovies()">Pesquisar</button>
<table class="table">
<thead>
<tr>
<th>Capa</th>
<th>Nome</th>
<th>URL</th>
</tr>
</thead>
<tbody id="movies"></tbody>
</table>
</body>
</html>
tvmaze.js
Agora vamos criar um arquivo javascript com o nome tvmaze.js.
A função getMovies() é responsável pela chamada do serviço da tvmaze. Pegamos a informação do campo texto de pesquisa e juntamos com a URL de chamada (ver manual da api da tvmaze). Depois usamos a função fetch() para fazer a chamada ao serviço. Veja que essa função precisa de await por ser assíncrona e a função getMovies() precisa ser async.
Agora, o que significa que a função é assíncrona? Bem, quando estamos carregando nossa página web, os conteúdos estão no nosso site, então tudo será carregado, em geral, na mesma velocidade. Se estamos fazendo uma chamada a um serviço externo, temos a questão de que estamos fazendo uma requisição para outro site, que terá que buscar as informações de um banco de dados e então responder. Esse processo pode levar um tempo.
Se nosso site tiver que esperar esse tempo para terminar de carregar, podemos ter um site meio travado. Então usamos uma função assíncrona para nosso site poder carregar tudo o que precisa e, quando a requisição chegar, apenas atualizamos o site com essas informações que vieram.
Dessa forma, o carregamento do site ocorre em paralelo com a busca das informações. Tendo um carregamento de página mais fluída.
async function getMovies() {
let text = encodeURI(document.getElementById("search").value);
let url = `https://api.tvmaze.com/search/shows?q=${text}`;
let movies = document.getElementById("movies");
movies.innerHTML = "";
try {
const response = await fetch(url, {
method: "GET",
dataType: "json",
});
const result = await response.json();
result.forEach(element => {
addTableRow(
movies,
element.show.image.medium,
element.show.name,
element.show.url,
);
});
} catch (error) {
alert("Error: " + error);
}
}
function addTableRow(parent, img, name, url) {
let tr = document.createElement("tr");
tr.innerHTML = `
<td><img src="${img}" width=50></td>
<td>${name}</td>
<td><a href="${url}" target="_blank">${url}</a></td>`;
parent.appendChild(tr);
}
Veja que no result, que é o resultado da chamada do serviço, aplicamos um forEach que retorna cada elemento de um vetor de objetos. Para cada objeto retornado, chamamos a função addTableRow() que criamos. Essa função cria uma linha da tabela, adiciona informações nas células e adiciona como filho de tbody da nossa tabela. Nesse caso, com appendChild(), estamos adicionando no final.
Como forma opcional, podemos usar a biblioteca JQuery também. Segue um exemplo:
Atividade
Implemente uma página web que consuma alguma outra API de sua escolha. A API (back-end) pode até ser desenvolvida por você.
