Um “To Do” Fullstack Javascript, do Node ao React + Webpack (Parte 2)

Continuando nossa saga, este artigo vai explicar como implementar o método PUT no nosso serviço.

Espero que você tenha lido a feito as atividades do artigo anterior, caso não tenha lido acesse este link.

Relembrando o ja vimos, nosso serviço aceita métodos GET e POST, e nós conseguimos inserir no banco de dados um novo documento e listar todos os items da nossa coleção.

O Método PUT substitui todas as atuais representações de seu recurso alvo pela carga de dados da requisição.

https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods

A requisição do PUT tem um o ID na url desta forma /recurso/id_documento, mas como nosso serviço esta respondendo tudo na url raiz http://localhost:3000/, logo PUT vai passa o ID assim http://localhost:3000/id_documento.

Show me the code!

CapturarCapturarCapturar

view raw 

Note que no código importamos novas libs e funções, também tratamos a url para que o servidor extraia o id do primeiro parâmetro da url, além de adicionar em caso do método ser PUT, verificar se existe um id e executar banco o replaceOne.

Agora usando o Postman vamos validar se nosso código funciona:

Primeiro acesse o endpoint raiz com método GET que vai te retornar a lista com os documentos se você não tiver nenhum documento, de uma olhada no artigo anterior eu veja la como adicionar um novo documento utilizando o POST.

Na lista com os documentos copie um _id que vamos utilizar em nossa requisição do PUT.

localhost:3000/5b8ee8833e2f3fbaa52acc45

A requisição chama o endpoit localhost:3000/5b8ee8833e2f3fbaa52acc45onde esta string bagunçada é o nosso _id do documento.

body da requisição é um JSON com as mesmas chaves do documento que se quer alterar.

Apos enviar o PUT, execute novamente o GET para retornar a lista com os documentos e veja que o documento já não possui os mesmos valores.

Agora temos os três métodos que vamos precisar para construir a aplicação em React, lembrando que será uma lista de tarefas onde vamos adicionar uma string com a descrição da atividade, teremos o status quando a atividade ficar pronta e quando ela for removida.

O remover vai ser feito de forma lógica, ou seja, não vamos remover o documento do banco, apenas alterar um campo removido para true, e deixar de mostrar no front. Por isso não implementamos o método DELETE no nosso serviço.

Por hoje é isso, nos encontramos no próximo artigo, onde vamos configurar o webpack e escrever alguma coisa na tela usando o React.

Fonte: Ariel Pchara – Medium

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s