Eu sou um estudante de engenharia de software na escola Flatiron atualmente no final da Fase-1. A primeira fase é um desafio intensivo de 3 semanas, onde se espera que os alunos retenham o máximo de informações possível sobre javascript, HTML e CSS. Embora os dois últimos sejam essenciais para um site mostrar seu conteúdo, a página realmente ganha vida com o JS. Os principais conceitos que aprendi em JS foram manipulação de DOM, escuta de eventos e o tópico de busca deste blog. A busca é uma função assíncrona() que permite aos desenvolvedores interagir com fontes de dados locais e externas para recuperar, adicionar, excluir e alterar dados. ISSO É PODEROSO.

Busca explicada

Por padrão, uma solicitação Fetch é uma solicitação get, a menos que especificado de outra forma (POST, DELETE, PATCH). Abaixo, produzi um exemplo de solicitação de busca do MDN :

1) fetch(' http://example.com/movies.json' )

A linha um envia uma solicitação para o domínio example.com e visa especificamente os dados mantidos em movie.json.

2) .then((resposta) => resposta.json())

O servidor retorna uma promessa que podemos acessar por meio da palavra-chave response. A promessa é uma forma abstrata de dizer que o servidor encontrou os dados que você está procurando e os fornecerá a você. A resposta em geral não pode ser manipulada, pois é uma representação dos dados que você precisa. Para trabalhar com os dados solicitados, a resposta precisa ser analisada em um formato de sua escolha. A análise em json é realizada invocando a função .json() neste caso específico.

3) .then((dados) => console.log(dados));

No ato final, o response.json() analisado é reatribuído ao nome data , e o conteúdo dos dados pode ser visualizado em seu terminal de desenvolvimento ou na guia do console da ferramenta de desenvolvedor do navegador.

Busca e APIs

Encerrando nossa jornada na Fase um, membros do meu grupo e eu recebemos a tarefa de criar um aplicativo de página única. Nossos produtos principais exigiam que nosso SPA demonstrasse o uso de 3 ouvintes de eventos, manipulação de DOM e busca em uma API local ou externa. Trabalhar com uma API foi um desafio de três níveis. Precisamos descobrir como acessar os dados necessários com nossa solicitação GET inicial, acessar adequadamente os dados na resposta e manipular a resposta para incorporar dados em nosso site. O processo foi instigante e resultou na criação da QWALLET.

Plug sem vergonha — QWALLET

QWALLET é uma carteira digital que hospeda a coleção de códigos QR do usuário. QR significa resposta rápida e é uma representação gráfica fácil de digitalizar da escolha de informações pessoais do usuário. Os códigos QR podem codificar senhas wi-fi domésticas e comerciais, links para sites de mídia social, contas de pagamento e muito mais. Então, como conseguimos isso? Usamos uma API gratuita de geração de QR. Em nossa solicitação de busca para a API, a URL precisava incluir o texto específico que queríamos codificar. Fornecemos isso usando a entrada do usuário em um evento de envio de formulário e interpolando essas informações na URL da solicitação de busca. O que recebemos como resposta foi um URL para um arquivo png. Em seguida, criamos uma tag de imagem HTML, atribuímos o URL retornado à origem da tag de imagem e a anexamos ao DOM. Para reutilizar os códigos QR, criamos um servidor json local usando node.js e invocamos a busca com o método POST. Isso prestou o novo código QR ao nosso servidor local e o reteve para uso futuro. Da mesma forma, invocamos a busca com um método DELETE para remover códigos QR obsoletos.

Embrulhar

Aprender a buscar e implementar seus métodos principais e interagir com uma API externa e local foi uma experiência educacional. E escrever sobre todo o processo realmente ajudou a solidificar os conceitos aprendidos durante este projeto de equipe. Agradecimentos especiais aos membros da minha equipe, Adam, Rochelle e Veronique, por fornecerem uma clínica sobre colaboração eficaz e execução oportuna.