6 - Pensando no Cliente da API

Voltei na implementação do nosso cliente, também já programei ali o servidor pra gente não ter interrupção. Então, quando a gente tá aqui nesse elemento da nossa avaliação, que é tentar criar essa API, né, web dentro dessa rota chamada API frequência, ã, assim como a gente é conveniente, sempre a gente tá criando um API ou um serviço web que tem essa arquitetura cliente servidor, é, é bom a gente começar pelo cliente pra gente poder testar a nossa aplicação ou senão pelo menos é uma ferramenta profissional ali de teste de API. No caso, gente, eu vou logo começar com a criação do cliente, já que é até um critério que dá um ponto pra gente, né?

Ã, a gente até sugere para você um layout aqui desses elementos, né, nesse warframe aqui, ó, esse desenhozinho bem grosseiro como seria a nossa aplicação. Basado nesse desenho, eu criei a seguinte formulário, seguinte página web. Ah, eu coloquei aqui dentro de um web cliente, tá?

Ã, foi bem esse formulário, bem grosseiro, né? Falta muita sofisticação visual aí, mas tem os elementos necessários, né? Ã, tem o botão, né?

Escolher arquivo. A gente vai selecionar o arquivo, ele vem para cá, a gente aperta analisar. Na hora que a gente aperta analisar, vai ser feita uma submissão lá pro nosso servidor, enviando essa informação deste arquivo.

Ah, o que que tem aqui em termos estruturais, né? Tem um formulário e ao apertar o botão é feita uma requisição do tipo Petch, né? uma requisição assíncrona pro nosso servidor.

Por que que o professor não escolheu enviar o formulário mesmo? Fez uma requisição fet porque não queria dar um refresh na tela. Não queria que a informação aqui seja, né, a atualizada, a página seja recarregada e também tinha mais flexibilidade com a utilização do FATETCH.

É uma questão aí de escolha do desenvolvedor. Ah, vamos dar uma olhadinha aqui no código desse cliente, né, nessa única página. Ah, o professor foi meio, né, negligente aqui, colocou todo o código dessa página no HTML.

Então, a parte do script também tá aqui dentro, né? Se fosse formalmente, a gente levaria todo o código JavaScript para fora, né? Para um arquivo, sei lá, script.

Importaria isso nosso HTML. Mas eu coloquei tudo aqui na mesma arquivo, né? Não faça isso, né?

Eu quero um negócio mais organizadinho aqui, porque eu tava fazendo as práticas. Ah, tá. Então, tem toda a estrutura aqui, HTML, mas cadê as divis do nosso formulário?

Nosso formulário tá aqui, ó. Ã, o nosso formulário ele tem só dois campos, na verdade só tem um campo útil, né? Tem uma label, um campo e um campo é um campo do tipo input, do tipo arquivo.

Dei um ID aqui chamado para input. Coloquei uma máscara aqui para ele aceitar só alguns tipos de de extensão. TXT, Doc, Doc X, PDF e SBV.

Esse SBV aqui é o arquivo que vem justamente do Google. E coloquei um nome neste input. Lembrando que é o atributo nome que o servidor consegue ver, né?

Ele recebe lá o formulário, ele olha lá dentro as informações pelo nome, é esse atributo nome, tá? Então o ID é o interessante pra gente que tá dentro da página, mas pro servidor que é interessante é a propriedade name. Aqui é um botão também para, né, fazer este componente analisar.

Este botão, ele tá fora do formulário propositalmente, tá? Se ele tiver dentro do formulário, o comportamento padrão dele é que ao clicar ele, o formulário seja enviado, né, utilizando o padrão convencional do navegador. E não é isso que eu quero.

Por quê? Que eu quero ter mais controle na hora do envio, né? Eu quero usar a a API do FET, né?

permite eu fazer requisições das axes, porque lá no cat fazer configurações muito mais precisas do que o navegador faz por padrão. Então, coloquei o botão para fora. Ã, coloquei também um test field nessa caixinha de texto aqui, ó, que ela tá desabilitada, disable, ou seja, o usuário não consegue digitar nada aqui dentro pra gente programaticamente colocar informação aqui dentro.

É o nosso Japt que vai povoar essa caixinha de texto. Usuário depois só vai poder copiar o que tem aqui. Beleza?

Então, esses são os elementos HTML. Eh, quando eu clicar em analisar, vai ser disparado um evento e o evento foi registrado aqui, ó. Eu procuro utilizando a PI get element by ID, aquele botão, e adiciono ali um listener, né, um ouvinte de evento.

Eu vou esperar o evento clique e quando o clique acontecer eu vou disparar uma ação. O que que essa ação faz? Ela primeiro olha a informação que tá lá no formulário que foi preenchido, ou seja, o arquivo que tá aqui dentro.

e faz uma cópia para ele. Então, ã, novo formulário e o passo formulário que já existe. E agora eu tenho uma cópia dos dados desse formulário.

Ã, ele tá aqui dentro desse objeto JavaScript e eu posso usar ele na hora de fazer uma requisão FEAT. API do FEAT, basicamente é dizer qual endereço a gente vai enviar. A informação tá aqui, ó.

É a minha própria máquina. Eu tô supondo que o meu servidor tá rodando a ponto 3. 000.

Você pode colocar aqui um outro endereço, não só o local host, pode ser outro computador na sua rede ou você tá executando seu servidor em outro local. Para isso, a gente fez uma configuraçãozinha aqui no FATET dizendo: "Ei, habilita aí a política de CS, que é requisições entre origens diferentes. " Ã, então coloquei aqui qual o endereço que eu vou fazer a requisição e manda aqui um objeto passando todos os dados que eu vou enviar pro meu servidor.

Nessa informação tem qual é o método, é o post. Eh, essa políticazinha de cors aqui é uma questão de segurança do navegador para permitir requisições entre origens diferentes. E o corpo e essa requisição tem informação do formulário.

A informação do formulário, ou seja, o arquivo que a gente selecionou. Quando essa requisição for atendida, ah, então a gente vai poder realizar o próximo passo. O FEAT, ele é uma API do tipo promesse.

Ele retorna pra gente uma promessa. Então ele tem essa carinha de faz tal coisa dentro, tal coisa, tal dentro tal coisa, ou seja, uma série de ações encadeadas através desse método. Então esse fet quando ele for atendido vai vir uma resposta.

Essa resposta eu vou converter, eu vou interpretar ela como JSON. Não é isso que o servidor vai oferecer paraa gente? Um JSON com a lista dos presentes.

Pois é, eu interpreto isso como Jon. Quando eu tiver interpretado aqueles informações vai ser um objeto e esse objeto vai estar aqui dentro de data e eu consigo usar objeto que vai ser ã um objeto que tem uma única propriedade chamada data dentro deles vai ter uma lista ah dos presentes e vou usar estes esse objeto, essas informações que é uma lista, é um array de nomes e vou colocar dentro do nosso text field. O text field foi colocado dentro de uma variável chamado lista.

Eh, o valor desse texto field eu tô colocando como essa lista. Ele vai preencher o texto aqui dentro. Ã, isso tá dentro de uma estrutura do tipo, ah, se der errado, você vai imprimir isso na tela do usuário, dizendo, olha, houve um problema de requisição e tal.

Ã, deixa eu ver se o servidor tá rodando. Eu já implementei o servidor, ele tá rodando ali nos bastidores. Vamos executar aqui essa requisição.

Ah, vou clicar aqui em escolher. O próprio navegador sabe fazer essa funcionalidade, trouxe o arquivo para dentro do formulário. Quando apertar analisar, a requisção PET vai ser disparada.

Vamos colocar aqui o F12 pra gente ver a requisição indo e voltando aqui na ferramenta desenvolvedor, na parte network. Quando apertar analisar, tá? Tá ali, ó.

A requição foi feita. Dá até para ver, né? Ela foi feita, foi feita através de um post.

O servidor retornou com 200. A carga de dados que foi para lá, o que eu enviei para ele foi um único arquivo chamado arquivo, é o nome, né, da propriedade. E a resposta foi, ó, um objeto JON, um objeto Jon que tem uma única entrada, uma única sessão chamada dados, que é um array de strings.

E ele preencheu aqui pra gente, ó. E eu consigo copiar, mas não consigo modificar. Esse é o cliente que eu pretendo utilizar.

ou algo parecido com isso na avaliação de vocês. Lembrando que um trabalho de implementação não é uma cópia link de todos os recursos, tá? Você vai adaptar isso ao que você acha pertinente, mas precisa ter um formulário que eu receba essa lista.

OK? Então, cliente fez nosso servidor, né?