3

eu sou designer e estou tentando entrar nesse mundo front...tenho algumas dúvidas.

Estou começando uma pesquisa via javascript que acessa o webservice:https://contas.tcu.gov.br/contrata2RS/api/publico/termos-contratuais

Vou pontuar algumas dúvidas:

1- É possível consumir esse webservice apenas com javascript? Só estou usando HTML e CSS.

2 - Se sim ! É possível tratar o JSON quando o usuário digitar no campo de pesquisa? Por exemplo:

Ele digita no campo de pesquisa a palavra "Escola" e o resultado traz tudo que tenha a palavra escola.

3 - Como eu consigo pegar o resultado e deixar ele mais apresentável(usando CSS)?

4 - Eu consigo escolher quais campos eu quero apresentar? É possível fazer essa filtragem?

OBS: Eu não tenho acesso ao webservice público, então sempre que eu fizer a consulta, vai vir tudo.

Se alguém tiver algum exemplo ou puder me dar algum norte, eu agradeço muito...os exemplos pode ser feitos apenas com uma label de pesquisa mesmo...bem simples.

2 Respostas 2

1

1- É possível consumir esse webservice apenas com javascript? Só estou usando HTML e CSS.

1 - Não, pois esse serviço é bloqueado para CORS, logo você deve fazer a requisição desse serviço através do Backend da aplicação, caso contrário irá receber o seguinte erro: Access to XMLHttpRequest at 'https://contas.tcu.gov.br/contrata2RS/api/publico/termos-contratuais' from origin 'https://fiddle.jshell.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource., isso acontece porque você está fazendo um request para outro domínio que não está liberado no header do response.

2 - Se sim ! É possível tratar o JSON quando o usuário digitar no campo de pesquisa? Por exemplo:

2 - Sim, você pode fazer um serviço de filtro em javascript após ter pego os seus dados:

3 - Como eu consigo pegar o resultado e deixar ele mais apresentável(usando CSS)?

3 - É difícil responder o que é mais "apresentável", você pode criar elementos HTML e estiliza-los via classe ou inserindo styles individuais e colocar os dados que obteve no seu request.

4 - Eu consigo escolher quais campos eu quero apresentar? É possível fazer essa filtragem?

4 - Sim, após o request, você pode manipular quais propriedades você quer exibir.

Fiz um exemplo para você dar uma olhada, lá coloquei exemplos de como fazer o que você quer pra cada pergunta

var data = [
    {
        "codigoTipoContratacao": 1,
        "tipoContratacao": "CONTRATO",
        "numero": 2,
        "ano": 2013,
        "unidadeGestora": "ISC",
        "codUnidadeGestora": 160000,
        "nomeFornecedor": "FUNDACAO UNIVERSIDADE DE BRASILIA",
        "cnpjFornecedor": "00038174000143",
        "objeto": "Prestação de serviços educacionais técnico-especializados. Participação de servidores/colaboradores do TCU no curso de Pós-graduação lato sensu em Auditoria Pública, turma 2013.",
        "valorInicial": 326000,
        "dataAssinatura": "2013-08-02T00:00:00-0300",
        "dataInicioVigencia": "2013-08-02T00:00:00-0300",
        "dataTerminoVigencia": "2015-02-28T00:00:00-0300",
        "numeroProcesso": "043.525/2012-1",
        "modalidadeLicitacao": "DISPENSA DE LICITAÇÃO",
        "numeroAditamentos": 0,
        "valorAtualizado": 326000,
        "dataTerminoVigenciaSegundoAditamentos": "2015-02-28T00:00:00-0300",
        "codigo": 2524,
        "codigoModalidadeLicitacao": 48
    },
    {
        "codigoTipoContratacao": 11,
        "tipoContratacao": "REGISTRO DE PREÇOS",
        "numero": 7,
        "ano": 2015,
        "unidadeGestora": "SEGEDAM",
        "codUnidadeGestora": 170000,
        "nomeFornecedor": "DECATRON AUTOMACAO E TECNOLOGIA DE INFORMACAO LTDA",
        "cnpjFornecedor": "00205354000172",
        "objeto": "Fornecimento de solução composta por licenças de uso de produtos VMware, subscrição de suporte telefônico do fabricante e atualização de versão, upgrade de licenças existentes, serviços de suporte on-site e treinamento.",
        "valorInicial": 0,
        "dataAssinatura": "2015-03-13T00:00:00-0300",
        "dataInicioVigencia": "2015-03-19T00:00:00-0300",
        "dataTerminoVigencia": "2016-03-18T00:00:00-0300",
        "dataPublicacao": "2015-03-16T00:00:00-0300",
        "numeroProcesso": "027.454/2014-2",
        "modalidadeLicitacao": "PREGÃO ELETRÔNICO",
        "anoLicitacao": 2015,
        "numeroLicitacao": 3,
        "numeroAditamentos": 0,
        "valorAtualizado": 0,
        "dataTerminoVigenciaSegundoAditamentos": "2016-03-18T00:00:00-0300",
        "codigo": 2779,
        "codigoModalidadeLicitacao": 49
    },
    {
        "codigoTipoContratacao": 1,
        "tipoContratacao": "CONTRATO",
        "numero": 40,
        "ano": 2015,
        "unidadeGestora": "SEGEDAM",
        "codUnidadeGestora": 170000,
        "nomeFornecedor": "RH99 SISTEMAS LTDA",
        "cnpjFornecedor": "08179838000104",
        "objeto": "A aquisição de licenças de uso do sistema de avaliação psicológica Human Guide e a habilitação de servidores do TCU para operá-lo.",
        "valorInicial": 33188,
        "dataAssinatura": "2015-11-03T00:00:00-0200",
        "dataInicioVigencia": "2015-11-03T00:00:00-0200",
        "dataTerminoVigencia": "2017-11-02T00:00:00-0200",
        "dataPublicacao": "2015-11-04T00:00:00-0200",
        "numeroProcesso": "024.177/2015-6",
        "modalidadeLicitacao": "INEXIGIBILIDADE DE LICITAÇÃO",
        "numeroAditamentos": 0,
        "valorAtualizado": 33188,
        "dataTerminoVigenciaSegundoAditamentos": "2017-11-02T00:00:00-0200",
        "codigo": 2864,
        "codigoModalidadeLicitacao": 5
    }
]

function setFilter() {
//Fazendo um serviço de filtro como na dúvida número 2
var result = [];

var filterOnInput = document.getElementById('filter').value;

data.forEach((element) => {
    if(element.numero.toString() == filterOnInput || element.ano.toString() == filterOnInput){
    	result.push(element);
    }
});

document.getElementById('result').innerHTML = JSON.stringify(result);

}

function onload() {

document.getElementById('result').innerHTML = JSON.stringify(data[0]) + JSON.stringify(data[1]) + JSON.stringify(data[2])

var el = document.getElementById('button'); // pega o elemento button


el.addEventListener('click', function() { // no evento click 
  setFilter(); // executa a função filtro
}, false);

var al = document.getElementById('changeDisplay'); // pega o elemento button


al.addEventListener('click', function() { // no evento click 
  displayOnlySomeInfo(); // executa a função filtro
}, false);

}

function displayOnlySomeInfo(){
//dúvida de número 4 mostrar somente algumas infos.
var resultado = "";

data.forEach((element) => {
    resultado = resultado + "<b>Código do tipo contrato: </b>";
		resultado = resultado + element.codigoTipoContratacao.toString() + "\n \n ";
    
});

	document.getElementById('result').innerHTML = resultado;

}

onload()
/* Fazendo estilização do conteúdo como na dúvida número 3*/
.result {
  width: 200px;
  color: blue;
}
<label>Mostrar somente algumas infos</label><br>
<button id="changeDisplay">
Ok!
</button><br><br>

<label>Filtrar por Número ou ano</label><br>
<input id="filter"><br>
<button id="button" onclick="setFilter()">
Ok!
</button><br><br>
<br><label>Resultado</label>
<br>
<p class="result" id="result">

</p>

<p class="result" id="resultado">

</p>

3
  • Muito obrigado pela explicação, Paz. Paz, como eu consigo por exemplo pegar esse campo do JSON: "codigoTipoContratacao": 1, e deixar ele assim: Código do tipo contrato:1. É possível colocar quebra de linha para não ficar amontoado ? 26/09/2019 às 15:36
  • De nada meu bom, no caso você poderia alterar o texto que é colocado na função foreach que fiz dentro da displayOnlySomeInfo(), no caso da quebra de linha, você pode inserir o "\n" que faz uma quebra de linha, ou até inserir um outro elemento de paragrafo, vou alterar a resposta com o que você quer
    – Paz
    26/09/2019 às 16:02
  • Código editado @Thiagolourenço
    – Paz
    26/09/2019 às 16:04
1

Resposta curta: é possível consumir WebServices utilizando apenas HTML/JS/CSS levando-se em consideração alguns pontos.

Imaginando que você tenha apenas alguns arquivos HTML/JS/CSS, suponho que sua aplicação seja composta por apenas estes arquivos estáticos. Ao abrir sua aplicação no navegador provavelmente o primeiro problema que você encontrará ao consumir esta API (endereço que você citou) será com CORS (cross origin resource sharing). Por questões de segurança o navegador bloqueia requisições á este tipo de API quando o domínio da API é diferente de sua aplicação. Para resolver isto a API deve enviar no cabeçalho de resposta algumas chaves e valores específicos. Sugiro dar uma lida aqui.

Respostas para os outros pontos:

  1. O WebService deve estar preparado para receber a palavra que será utilizada como filtro para retornar apenas coisas relacionadas a ela. Caso o WS não esteja preparado para isto é possível efetuar a requisição e tratar os dados utilizando JavaScript desde que você tenha em mãos a lógica utilizada para filtrar as informações baseando-se na palavra pesquisada.
  2. Basicamente formatando o resultado utilizando JavaScript/CSS.
  3. Sim, utilizando JavaScript. Há diversas funções que ajudam na manipulação de String/Arrays que podem colaborar com esta tarefa, mas é um tema bem amplo.

Um exemplo bem simples de como consumir uma API e exibir o resultado, apenas para te dar um ponto de partida:

https://jsfiddle.net/uLnwp2gc/1/

<button onclick="pesquisar();">Pesquisar</button>
<div id="resultado"></div

Script:

pesquisar = () => {
    fetch('https://www.mocky.io/v2/5185415ba171ea3a00704eed').then(function(response) {
        response.json().then(function(json) {
            console.log('resultado', json);
            document.querySelector('#resultado').innerHTML = JSON.stringify(json);
        });
    });
}|
2
  • Valeu msm, Marcelo ! 26/09/2019 às 15:37
  • @Thiagolourenço vlw ;) qualquer coisa é só falar. abs 26/09/2019 às 17:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .