Exemplo de projeto web

Exemplo de projeto: exibir uma API em tela

Consultar uma API gratuita que trás dados em formato JSON
Exibir esses dados em uma página HTML

Consultar uma API REST usando o Insomnia

Escolher uma API aberta e gratuita e consultar a sua documentação. Sugerido: https://jikan.moe/ > https://jikan.docs.apiary.io/
Instalar o aplicativo Insomnia
Executar uma busca nesta API:
- Na documentação, consultar a parte "Search"
- No insomnia, preencher
- GET: https://api.jikan.moe/v3/search/manga
- Na aba query, preencher um ou mais dos parâmetros que estão na documentação ex:
  
  q naruto
  
  status publishing
  
  genre 5
- Clicar em "Send"
- Verificar o formato de resposta, "desaninhando" os resultados

q	naruto
status	publishing
genre	5

Servindo uma página web localmente

Instalar o node.js versão 12
Instalar o VS Code (que é diferente de Visual Studio "sem" o nome Code)
Opcional Instale a extensão de VS Code "Prettier". Depois, acesse a tela de opções do VS Code e ative a opção "Format on Save"/"Formatar ao salvar"
Cria uma pasta onde vai morar seu projeto, depois clique com o botão direito nela > Abrir com o VS Code
No VS Code, crie um arquivo index.html, digite "html", vai aparecer uma caixa com sugestões, selecione html:5 e enter. Inso deve completar com o esqueleto inicial.
Digite alguma coisa dentro do <body>
Abra o terminal integrado do VS Code (se não estiver aberto). F1 > terminal integrado (ou integrated terminal)
Instalar o http-server. Digite no terminal npm install http-server -g
Neste terminal, digite http-server
Acesse a página indicada no navegador http://localhost:8080
Para parar a execução do servidor, digite CTRL+C no terminal

Consultar a API pela página, usando javascript

Editar o HTML com código pra chamar a API

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <script>
      document.addEventListener("DOMContentLoaded", async () => {
        var url = new URL("https://api.jikan.moe/v3/search/manga");
        url.searchParams.append("q", "naruto");
        var headers = {
          ContentType: "application/json",
        };
        debugger;
        var response = await fetch(String(url), { headers: headers });
        debugger;
        var responseJson = await response.json();
        console.log(responseJson)
        debugger;
      });
    </script>
  </head>
  <body>
    ola
    <table id="tabela"></table>
  </body>
</html>

Com a página aberta no navegador, abrir o "Developer Tools", apertando F12. Use o Chrome.
Recarregue a página, o DevTools deve entrar no modo "debugger".
- Você pode inspecionar o valor de cada variável ou mesmo entrar comandos JS interativamente no console (apertar ESC pra mostrar o console, se ele nao estiver ativo)
- Pode-se continuar a execução com o botão de play;
- Pra acessar o debugger, podem ser colocados "breakpoints" pelo chrome (clicar no número de linha) ou diretamente via código com a instrução "debugger"
Após avançar no debugger, deve aparecer um erro de "CORS" no console

Consertar o erro de CORS

O erro que apareceu significa que: A API não permite ser chamada diretamente via navegador. Temos que chamá-la a partir de um servidor;

index.html  ------>      nosso servidor      -------->     API externa

Pesquisei no google por "node cors proxy" e peguei um exemplo de servidor local quebra-galho em https://github.com/ccoenraets/cors-proxy/blob/master/server.js;
Criar um arquivo server.js e colar o seguinte código que foi copiado do link acima:

var express = require("express"),
  request = require("request"),
  bodyParser = require("body-parser"),
  app = express();

var myLimit = typeof process.argv[2] != "undefined" ? process.argv[2] : "100kb";
console.log("Using limit: ", myLimit);

app.use(bodyParser.json({ limit: myLimit }));

app.all("*", function(req, res, next) {
  // Set CORS headers: allow all origins, methods, and headers: you may want to lock this down in a production environment
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, PUT, PATCH, POST, DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    req.header("access-control-request-headers")
  );

  if (req.method === "OPTIONS") {
    // CORS Preflight
    res.send();
  } else {
    var targetURL = req.header("Target-URL");
    if (!targetURL) {
      res.send(500, {
        error: "There is no Target-Endpoint header in the request"
      });
      return;
    }
    request(
      {
        url: targetURL + req.url,
        method: req.method,
        json: req.body,
        headers: { Authorization: req.header("Authorization") }
      },
      function(error, response, body) {
        if (error) {
          console.error("error: " + response.statusCode);
        }
        //                console.log(body);
      }
    ).pipe(res);
  }
});

app.set("port", process.env.PORT || 3000);

app.listen(app.get("port"), function() {
  console.log("Proxy server listening on port " + app.get("port"));
});

Instalar os módulos consumidor por esse código. No terminal, digitar: npm i express request body-parser;
Executar o servidor usando o node.js. Digitar no terminal node server.js;
Tenha em outra aba de terminal o http-server rodando
Teremos 2 terminais rodando 2 servidores:
- O "proxy" node.js na porta 3000
- O servidor estático do index.html na porta 8080

Editar o index.html para chamar o nosso servidor ao invés do servidor externo:

Substituímos https://api.jikan.moe por http://localhost:3000
Adicionamos a header Target-URL que diz pro nosso servidor onde será o destino final

        var url = new URL("http://localhost:3000/v3/search/manga");
        url.searchParams.append("q", "naruto");
        var headers = {
          ContentType: "application/json",
          "Target-URL": "http://api.jikan.moe"
        };

Abrir a página no navegador, com o DevTools aberto, recarregar (F5)
Inspecionar a variável responseJson, que agora deve possuir o mesmo resultado do que tínhamos visto no Insomnia;

Exibir os resultados da consula no HTML

Alterar o script

    <script>
      document.addEventListener("DOMContentLoaded", async () => {
        var url = new URL("http://localhost:3000/v3/search/manga");
        url.searchParams.append("q", "naruto");
        var headers = {
          ContentType: "application/json",
          "Target-URL": "http://api.jikan.moe"
        };
        var response = await fetch(String(url), { headers: headers });
        var responseJson = await response.json();
        console.log(responseJson);

        var list = responseJson.results;
        var table = "";
        for (var x = 0; x < list.length; x++) {
          var item = list[x];
          table =
            table + `<tr><td>${item.title}<td><td>${item.synopsis}</td></tr>`;
        }
        var sourceElement = document.getElementById("tabela");
        sourceElement.innerHTML = table;
      });
    </script>

Resultado esperado: Uma tabela com os títulos e sinopses dos mangás.

Próximas etapas

Adicionar um formulário pra personalizar a pesquisa de animes
Adicionar links para navegar nos detalhes dos resultados
Estilizar a página usando CSS e bootstrap

wkrueger/web-exemplo.md