Javascript: consumindo serviços web
De Aulas
Revisão de 13h44min de 22 de abril de 2024 por Admin (discussão | contribs) (→Consumindo Serviços Web com JavaScript e JQuery)
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.
<!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
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);
}
Atividade
Implemente uma página web que consuma alguma outra API de sua escolha. A API (back-end) pode até ser desenvolvida por você.
