Requisições
Requisições GET e POST
O objetivo principal do projeto é tornar a lista de vídeos na página inicial dinâmica, permitir o upload de novos vídeos e implementar uma ferramenta de busca. Para isso, foram instalados o NodeJS e o json-server, simulando uma API para interagir com requisições GET e POST. O curso também abordou conceitos de JavaScript assíncrono, essenciais para a construção das APIs, e introduziu a funcionalidade de pesquisa.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Requisições |
| 🏷️ Tecnologias | Javascript, NodeJS e Json-server |
| 🚀 URL | https://criando-requisicoes-nayrabra.vercel.app/ |
| 🧰 Propriedade | Flexbox |
| 💻 Responsividade | Celular, Tablet e Desktop |
Principais Características:
Criar requisições GET para consumir a API, e retornar seus dados.
Para permitir o envio de vídeos, foi necessário estruturar requisições do tipo POST usando 'method, headers e body' com o fetch API. Para enviar os dados, eles precisam ser transformados em uma string, e para isso, foi utilizado o JSON.stringify. Essa abordagem possibilitou a criação de uma solicitação POST eficiente para o envio dos vídeos.
Implementação de pesquisa, como demonstrado no screenshot abaixo com a pesquisa 'mobile'. Para realizar a pesquisa, foi criada uma lista filtrada que remove todos os outros itens da lista, exceto o que foi pesquisado. Essa filtragem é feita usando a propriedade 'removeChild' e um laço de repetição 'while'.
Para melhorar a experiência do usuário, foi adicionado o tratamento de erros com 'try catch', exibindo mensagens adequadas em caso de falhas durante a execução do código. Como pode ser visto no screenshot abaixo, ao ser modificar a url do fetch API, por exemplo.
Observação:
Para que a API funcione corretamente, siga estas etapas no prompt de comando ou terminal do seu computador, com o projeto previamente salvo:
- Execute o comando 'npm init' para iniciar o projeto.
- Em seguida, utilize 'npm install json-server' para instalar o pacote json-server.
- Por último, inicie o servidor de simulação da API utilizando 'json-server --watch db.json'.
OU
Se preferir, utilize 'npx json-server --watch db.json' após ter executado o primeiro comando ('npm init'). O comando 'npx' permite executar pacotes sem a necessidade de instalá-los previamente.
O 'json-server' é um pacote do npm que simula uma API RESTful utilizando um arquivo JSON como banco de dados. Certifique-se de seguir todas essas etapas para garantir o correto funcionamento da API.
Screenshots
Feito por:
Nayra Braga Barbosa
Linkedin: https://www.linkedin.com/in/nayra-barbosa/