Passo a passo para criar um CRUD com NodeJS do zero (Falei como se tivesse no SW))

Olá a todos, desta vez trago para vocês um CRUD feito pelo Node.js. Se você não conhece o NodeJS, farei uma breve introdução.

NodeJS ou Node, abreviado, é um interpretador Javascript de código aberto que roda em todos os sistemas operacionais. Ele se concentra na migração de Javascript do cliente para o servidor. Seu objetivo é ajudar os programadores a criar aplicativos altamente escaláveis ​​com código capaz de lidar com dezenas de milhares de conexões simultâneas em uma única máquina física. O Node.js é baseado no interpretador V8 JavaScript Engine (um interpretador JavaScript de código aberto implementado em C++ pelo Google e usado pelo Chrome). Foi criado por Ryan Dahl em 2009 e seu desenvolvimento é mantido pela Node.js Foundation em parceria com a Linux Foundation.

Antes de iniciar o CRUD

Antes de começarmos a codificar, farei uma breve introdução para que você entenda o que é o Node JS, para que é usado e como funciona.

As ferramentas necessárias para concluir essa API REST com Node JS são:

NPM ou preferencialmente Yarn;
Visual Studio Code, esta IDLE torna o desenvolvimento mais rápido;
Node JS, verifique se precisa dar o Update no Node JS antes.

O que é NODE JS?

Muitas pessoas pensam no Node JS como uma linguagem de programação, acontece que muitas vezes é referido como uma linguagem. No entanto, o Node JS é uma plataforma de back-end que aceita código JavaScript. Dito isso, o Node JS é uma maneira de usar JavaScript no backend.

Curiosidade sobre o Node JS: Ele é construído em cima do V8, o mecanismo, o mecanismo por trás do Google Chrome. Isso torna o Node JS muito rápido e permite que você reutilize todo o conhecimento JavaScript (obtido do front-end) no back-end.

Funcionalidades do NodeJS

Uma das principais características do Node é sua arquitetura, chamada Event-loop. Totalmente baseado em eventos, mais comumente baseado em rotas

Call Stack é uma pilha de eventos, esses eventos podem ser uma função acionada por código, pois este event loop está sempre escutando, então toda vez que uma nova função for acionada, ela será executada

Os nós são de thread único. Isso significa que ele é executado apenas em um thread do nosso processador.

Outra característica do Node é que ele possui uma arquitetura chamada Non-blocking I/O, o que significa saída e entrada sem bloqueio. Isso significa que, se você fizer uma solicitação de lista de páginas, por exemplo, poderá retornar a parte da lista em vez de listar tudo de uma vez e ainda continuar a comunicação entre o backend e o frontend.

Ao contrário de outras linguagens de backend como PHP, a comunicação é perdida quando as solicitações são enviadas em JSON, XML ou HTML, etc.

Com o Node, o front-end e o back-end mantêm a comunicação aberta, permitindo que o front-end faça mais solicitações ao back-end 24 horas por dia, 7 dias por semana. Um bom exemplo de uso é o chat, graças ao WebSockets.

Gerenciador de pacotes

Os gerenciadores de pacotes são basicamente usados ​​para instalar, remover e configurar dependências e bibliotecas de terceiros em nosso projeto.

Imagine que você deseja implementar a integração com meios de pagamento em seu projeto, precisa usar um dos gerenciadores de pacotes mais populares: NPM e Yarn.

NPM e fios

O fio tem algumas vantagens sobre o NPM apesar de servir ao mesmo propósito!

Embora o NPM seja mais antigo, o Yarn aprimorou e implementou recursos mais avançados, como os espaços de trabalho do Yarn, usados ​​em vários projetos que geralmente possuem as mesmas dependências, permitindo que as dependências sejam compartilhadas, o que impede que os desenvolvedores sempre instalem um para um.

Até agora, você já viu o que é o Node JS, então antes de começarmos a codificar, vamos revisar alguns conceitos da API REST, que estaremos criando logo após esta introdução.

API REST

O benefício desse modelo de API REST é que podemos atender vários clientes usando o mesmo backend, ou seja, um único código para Web Mobile ou até mesmo uma API pública.

É importante entender o fluxo de solicitação e resposta, não entrarei em detalhes, mas basicamente acontece na seguinte ordem:

a solicitação foi feita pelo cliente;
Respostas retornadas por meio de estruturas de dados como JSON;
O cliente recebe a resposta e processa o resultado.
Essas respostas usam métodos HTTP, que são:

GET http://minhaapi.com/users ➔ Buscar alguma informação no back-end
POST http://minhaapi.com/users ➔ Criar alguma informação no back-end
PUT http://minhaapi.com/users/1 ➔ Editar alguma informação no back-end
DELETE http://minhaapi.com/users/1 ➔ Deletar alguma informação no back-end
Negrito ➔ Método HTTP
Itálico ➔ Recurso/Rota
Número ➔ Parâmetro

Benefícios de API REST

O benefício desse modelo de API REST é que podemos atender vários clientes usando o mesmo backend, ou seja, um único código para Web Mobile ou até mesmo uma API pública.

Agora sim, agora você sabe o mínimo necessário para começar a criar sua primeira API REST com CRUD no Node JS, então vamos começar a codificar!

Você pode primeiro criar uma pasta para armazenar esse código.

No terminal execute:

❯ mkdir nodegeek

Acesse a pasta via terminal:

❯ cd nodegeek

Ainda no terminal, execute:

❯ yarn init -y

Este comando simplesmente cria um arquivo chamado package.json.

Agora você pode acessar o arquivo via terminal executando o comando code (abrirá o VScode) na pasta raiz do projeto, execute:

❯ code

Agora com o arquivo package.json aberto no seu VScode, você terá algo parecido com isso:

Este arquivo armazenará referências a todas as dependências que você instalou via NPM ou Yarn.

Abra o terminal do VScode, tente usar o atalho CTRL + ‘, se não funcionar, pressione CTRL + P para verificar qual é o atalho, digite “>Preferences: Open Keyboard Shortcuts” para ver qual é o atalho para o seu VScode.

Abra um terminal VScode e execute:

❯ yarn add express

Note que o seu arquivo package.json foi alterado, agora está assim:

Agora crie um arquivo e nomeie-o como index.js que conterá todo o nosso código.

Então é hora de importar express para começar a usá-lo.

 importa expresso

 cria uma variável chamada server que chama a função express

 faz o servidor rodar na porta 3000 em localhost:3000

Pressione CTRL + S para salvar o código ou salve manualmente.

Agora vamos criar a primeira rota da aplicação usando o método GET.

 importa o express

 cria uma variável chamada server que chama a função express

Cria a rota /teste com o método GET, o console.log retornará no terminal ‘teste’ caso tenha executado com sucesso.

 faz com que o servidor seja executado na porta 3000 do seu localhost:3000

Salve o código teclando CTRL + S, ou manualmente, e agora para testar se a rota está funcionando, execute no terminal:

❯ node index.js

Isso iniciará o servidor na porta 3000 do seu localhost.

Observe que o terminal será executado sem retornar nada, então abra um navegador, provavelmente é o google e visite: http://localhost:3000/geeks

Observe que o navegador continua carregando, mas nada é retornado, então volte ao seu terminal e observe que o terminal respondeu com “test” conforme solicitado em console.log(‘test’);; colocamos dentro da função .

Se você chegou até aqui, significa que sua primeira rota foi criada com sucesso, então vamos em frente…

Adicionar parâmetros

Agora vamos adicionar dois parâmetros à função da seguinte forma:

req ➔ representa todos os dados da requisição.

res ➔ todas as informações necessárias para informar uma resposta para o front-end.

Então, vamos testá-lo, remova

Com isso, estamos de volta ao front-end “Hello world”.

Salve o código novamente, pressione CTRL + C para parar o servidor, reinicie o servidor e acesse as rotas. Observe qual navegador retorna json com o texto Hello world na tela.

O código deve ficar assim:

Instale o Insomnia

Antes de continuar e criar as rotas POST, PUT e DELETE, precisamos instalar um software chamado Insomnia. Insomnia não está disponível para sistemas Windows de 32 bits. Você precisará baixar e usar o Postman, se necessário.

Ambos funcionam da mesma forma, mas vamos usar o Insomnia porque é mais bonito! 😀

Após baixar o Insomnia, abra-o e observe que a solicitação será listada à esquerda.

Clique no ícone + (mais) e, em seguida, clique em Nova solicitação para criar uma nova solicitação.

Dê um nome, por exemplo: “Listar geeks” e clique em CRIAR.

No campo acima, adicione um link com a seguinte rota, aquela criada anteriormente: http://localhost:3000/geeks

Clique em enviar e agora você obtém a mesma resposta que no navegador, a mensagem “Hello world”. Observe também que o código HTTP é 200 para SUCESSO.

OK! Até agora, criamos e testamos nossas rotas em navegadores e softwares.

Então, antes de criarmos outras rotas, vamos instalar uma dependência para manter nosso servidor rodando para que não tenhamos que desligar e reiniciar o servidor toda vez que mudarmos nosso código.

Pressione CTRL + C para parar o servidor.

Abra um terminal e execute o Crud:

❯ fio adiciona nodemon -D

O Nodemon reinicia o servidor sozinho toda vez que você salva o código

Agora abra o arquivo package.json e observe que o nodemon foi adicionado como uma dependência de desenvolvimento. Isso ocorre porque não precisaremos mais monitorar as alterações de código quando o aplicativo entrar em produção.

Para iniciar o servidor com o nodemon, precisamos criar uma propriedade chamada scripts para iniciar o servidor.

Agora para iniciar o servidor com nodemon, abra o terminal e rode:

❯ yarn dev

e deverá ter uma resposta mais ou menos assim:

Agora vamos criar o CRUD
Vamos começar criando uma rota que lista todos os geeks.

Agora precisamos criar uma rota usando o método GET para listar todos os Geeks na rota /geeks que criamos.

Adicione o seguinte snippet ao seu código:

Agora vamos criar uma rota que cria Geeks, e então eu vou te mostrar como seu código deve ficar até agora.

Para criar um Crud, é preciso lembrar que usaremos o método POST, começamos com:

Agora seu código deve estar mais ou menos assim:

Se o seu código for como o meu, na foto acima, você poderá listar e criar geeks, certo?

Antes de testar todas as rotas, vamos agora incluir as operações Edit e Delete usando os métodos PUT e DELETE.

Para adicionar o método PUT, vamos adicionar o seguinte trecho de código: CRUD em Node JS.

 sobrepõe o index obtido na rota de acordo com o novo valor

retorna novamente os geeks atualizados após o update

Agora vamos excluir, método DELETE, vamos adicionar o seguinte trecho de código:


 recupera o index com os dados

 percorre o vetor até o index selecionado e deleta uma posição no array

retorna os dados após exclusão

CRUD realizado com sucesso!

Uau! Parabéns! Até agora, você usou todos os métodos que vimos no início deste artigo.

Mas antes de ir para o middleware, que será o bônus deste artigo, vamos voltar ao Insomnia para testar todas as rotas? vamos!

Agora vamos listar os geeks com base em sua posição no array, lembre-se que a contagem começa em 0 em JavaScript.

Clique com o botão direito do mouse em uma solicitação existente e copie-a.

Renomeie a duplicata CRUD em Node JS: List all Geeks e o nome anterior CRUD em Node JS: List a Geek.

List all geeks – listará todos os geeks no array.
Rota: http://localhost:3000/geeks

List Geeks – listará os geeks de sua escolha com base em sua posição na matriz.
Rota: http://localhost:3000/geeks/0

Observe que estou procurando Geek na posição 0 da matriz.

Agora vamos criar um pedido para criar Insomnia Geeks.

Crie uma nova solicitação usando o método POST com um corpo JSON.
Adicionar na rota: http://localhost:3000/geeks

Agora, no corpo do JSON, adicione:

Isso criará um novo Geek chamado Luke

Em seguida, clique em Enviar.

Se tudo der certo, você receberá o código HTTP 200 confirmando a criação do Geek “Luke”

Legal certo? Agora vamos editar Geek “Luke”.

Usando o método PUT, vamos replicar a solicitação Create Geek.

Agora, mude o método de POST para PUT e adicione o parâmetro /4 para editar o Geek que ocupa a posição 4 no array, correspondente ao “Luke” que criamos anteriormente.

A rota deve ficar assim: http://localhost:3000/geeks/4

e corpo JSON, adicione:

Agora, re-liste Geeks e observe que Geek no 4º lugar no array mudou de Luke para Luke Skywalker. É demais?

Agora, vamos excluir um Geek da lista usando o método DELETE.

Crie uma nova solicitação usando o método DELETE, selecione a opção “Sem corpo” no corpo, agora adicione na rota:
Rota: http://localhost:3000/geeks/4
Isso excluirá o Geek que ocupa a posição 4 na matriz, Luke Skywalker.

Se você relistar os Geeks, verá que Luke Skywalker não será listado. Se isso acontecer, então você fez tudo corretamente.

Vamos dar uma olhada no bônus: CRUD em Node JS middleware

Middleware é basicamente uma função que recebe parâmetros, req, res, etc. e executa uma função na aplicação que manipula os dados da requisição de alguma forma.

Podemos criar middleware local e middleware global, vejamos um exemplo.

Esse middleware é GLOBAL, ou seja, será chamado em todas as rotas.

CRUD em Node JS Middlewares locais

Agora, usar o middleware LOCAL é um pouco diferente. Suponha que queremos criar dois middlewares, um que verifica se o índice já existe no array e outro que a propriedade name foi passada corretamente.

O código deve ficar assim:

Podemos passar mais de um Crud middleware por vez, desta forma:

retorna novamente os geeks atualizados após o update

Agora se você quiser testar para confirmar o funcionamento, volte ao Insomnia. Abra a requisição de Criar Geek e altere a propriedade NAME, experimente isso:

Agora imagine que queremos listar um Geek inexistente no array. Abra a requisição de Listagem de um Geek. Por exemplo o array de posição 8, inexistente.

Rota: http://localhost:3000/geeks/8

Clique em Send. Se tudo der certo, você receberá um , com a mensagem:

WOW! Chegamos ao fim. Isso mesmo! Se você chegou até aqui é sinal de que você conseguiu criar seu primeiro CRUD em Node JS. Sensacional, né?