Javascript: consumindo serviços web
De Aulas
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}">${url}</a></td>`;
parent.appendChild(tr);
}
Consumindo Serviços Web com JavaScript e JQuery
Lembrando que o JavaScript é uma linguagem multifacetada, então podemos fazer a mesma coisa de várias formas diferentes, com bibliotecas diferentes, etc. Assim, vamos ver como consumir serviços web usando javascript usando uma biblioteca chamada JQuery. Também adicionei o Bootstrap pra termos um visual mais bonito.
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Metatag da lingua-->
<meta charset="utf-8">
<!-- Metatag para página responsiva -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
>
<!-- Bootstrap Bundle with Popper JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Fontawesome -->
<script src="https://kit.fontawesome.com/2c36e9b7b1.js"></script>
<!-- using jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Nosso script -->
<script src="tvmaze.js"></script>
</head>
<body>
<div class="card">
<div class="card-header">
<h5 class="card-title">Consumindo serviços em Javascript</h5>
</div>
<div class="card-body">
<div class="input-group">
<input
id="search"
type="search"
class="form-control rounded"
placeholder="Search"
aria-label="Search"
aria-describedby="search-addon"
>
<button type="button" class="btn btn-outline-primary" onclick="getMovies()">
<i class="fas fa-search"></i>
</button>
</div>
<table class="table">
<thead>
<tr>
<th>Capa</th>
<th>Nome</th>
<th>URL</th>
</tr>
</thead>
<tbody id="movies"></tbody>
</table>
</div>
</div>
</body>
</html>
tvmaze.js
function getMovies() {
text = encodeURI($("#search").val());
console.log(text);
$("#movies").empty();
$.ajax({
url: "https://api.tvmaze.com/search/shows?q=" + text,
type: "GET",
dataType: "json",
success: function (data) {
$.each(data, function (index, value) {
var name = value.show.name;
var url = value.show.url;
var img = value.show.image.medium;
addTableRow(img, name, url);
});
}
});
}
function addTableRow(img, name, url) {
// Cria uma linha pra tabela
var row = document.createElement("tr");
// Cria a célula para a coluna da imagem
var td_img = document.createElement("td");
var my_img = document.createElement("img");
my_img.src = img;
my_img.width = 50;
td_img.append(my_img);
// Cria a célula para a coluna Nome
var td_name = document.createElement("td");
td_name.innerHTML = name;
// Cria a célula paraa coluna "URL"
var td_url = document.createElement("td");
var td_url_a = document.createElement("a")
td_url_a.innerHTML = url;
td_url_a.href = url;
td_url.append(td_url_a);
// Adiciona as células na linha
row.append(td_img);
row.append(td_name);
row.append(td_url);
// Adiciona a linha na tabela no HTML
$("#movies").append(row);
}
// forma alternativa da função acima
function addTableRowAlternative(img, name, url) {
$("#movies").append(
`<tr>
<td><img src="${img}" width=50></td>
<td>${name}</td>
<td><a href="${url}">${url}</a></td>
</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ê.
