Mudanças entre as edições de "Javascript: consumindo serviços web"

De Aulas
Linha 1: Linha 1:
 
Afluentes: [[Desenvolvimento Front-end I]], [[Desenvolvimento Front-end II]], [[Usabilidade, desenvolvimento web, mobile e jogos]]
 
Afluentes: [[Desenvolvimento Front-end I]], [[Desenvolvimento Front-end II]], [[Usabilidade, desenvolvimento web, mobile e jogos]]
  
−
= Consumindo Serviços Web com JavaScript e JQuery =
+
= Consumindo Serviços Web com JavaScript =
  
−
Agora vamos ver como consumir serviços web usando javascript. Pra isso, iremos utilizar uma biblioteca chamada JQuery e, para testes, vamos usar o site [https://www.tvmaze.com tvmaze] de filmes e séries.
+
Veremos aqui como consumir um serviço web da internet usando a função <code>fetch</code> do JavaScript. Para tal, vamos usar o site [https://www.tvmaze.com tvmaze] de filmes e séries. Esse exemplo está o mais simples possível, apenas com HTML sem CSS nem Bootstrap.
  
 
== index.html ==
 
== 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.
 
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.
 +
 +
<syntaxhighlight lang=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>
 +
</syntaxhighlight>
 +
 +
== tvmaze.js ==
 +
 +
Agora vamos criar um arquivo javascript com o nome tvmaze.js
 +
 +
<syntaxhighlight lang=javascript>
 +
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);
 +
}
 +
</syntaxhighlight>
 +
 +
= 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 ==
  
 
<syntaxhighlight lang=html>
 
<syntaxhighlight lang=html>
Linha 70: Linha 140:
  
 
== tvmaze.js ==
 
== tvmaze.js ==
−
 
−
Agora vamos criar um arquivo javascript com o nome tvmaze.js
 
  
 
<syntaxhighlight lang=javascript>
 
<syntaxhighlight lang=javascript>
Linha 133: Linha 201:
 
         </tr>`
 
         </tr>`
 
     );
 
     );
−
}
 
−
</syntaxhighlight>
 
−
 
−
= Consumindo Serviços Web com JavaScript e sem JQuery =
 
−
 
−
Lembrando que o JavaScript é uma linguagem multifacetada, então podemos fazer a mesma coisa de várias formas diferentes, com bibliotecas diferentes, etc.
 
−
 
−
No exemplo acima acabei utilizando JQuery por questão de costume, mas alguns alunos me perguntaram como podoeriamos fazer a mesma coisa sem usar JQuery. Bem, segue abaixo o mesmo exemplo, mas sem o JQuery. Também tirei o Bootstrap pra deixar o HTML o mais simples possível.
 
−
 
−
== index.html ==
 
−
 
−
<syntaxhighlight lang=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>
 
−
</syntaxhighlight>
 
−
 
−
== tvmaze.js ==
 
−
 
−
<syntaxhighlight lang=javascript>
 
−
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);
 
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>

Edição das 14h23min de 15 de abril de 2024

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

Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=Javascript:_consumindo_serviços_web&oldid=9182”