Criando um CRUD completo com NodeJS, Express e MongoDB — Parte 2/3

Oi denovo..

Olá, sou eu denovo.. Dando sequência na nossa série do CRUD feito em Node, agora irei explicar sobre as operações de exibir e enviar dados pelo Express, caso ainda não tenha visto a primeira parte desse projeto clique aqui.

Iniciando nosso CRUD - READ

Eu irei começar explicando a operação READ, pois é bem simples de entender o nosso cenário atual. Esta operação é executada pelos navegadores sempre que você visita uma página da web. Ao ser iniciado, os navegadores enviam uma solicitação GET ao servidor para executar uma operação de leitura. A razão pela qual vemos o erro “cannot get /” é porque ainda temos que enviar alguma informação de volta para o navegador, que esteja vindo do nosso servidor.

Usando Express, essa solicitação é feita com o método GET e pode ser escrito da seguinte maneira:

Exemplo do método GET

Note que incluímos em nosso arquivo server.js o trecho de código acima, veja que nele estamos passando o caminho no qual o navegador está acessando que em nosso caso é localhost:3000/, e para isso o primeiro argumento é “/”. O segundo argumento é uma função callback que informa ao servidor o que fazer quando o caminho é correspondido. Esse callback leva dois argumentos, um objeto de solicitação e outro de resposta (req e res, respectivamente). A fim de testarmos se está indo tudo ok, enviaremos somente a frase ‘Hello Word’ com o método send para nos trazer o objeto de resposta. Note que estou usando o padrão ES6, e por isso usei diretamente uma arrow function.

Agora vamos reiniciar nosso servidor, basta fazer o seguinte:

• Pare o servidor atual pressionando CTRL + C no seu terminal.
• Rode novamente o comando node server.js .
• Em seguida, acesse localhost:3000 no seu navegador. Você deve estar vendo uma string que diz: Hello World.

Comunicação entre nosso servidor e navegador

Ótimo. Vamos agora iniciar a parte visual do nosso projeto, para isso irei utilizar um template engine chamado EJS (Embedded Javascript), ele é bem simples de usar principalmente para quem tem familiaridade com HTML e Javascript. Para instalar o ejs, basta digitar no seu terminal:

npm install ejs --save

Precisamos configurar nossa view engine no Express,basta incluir o trecho de código abaixo.

Feito isso, poderemos gerar código HTML que será renderizado em nosso navegador. Vamos então criar nosso arquivo index.ejs dentro de uma pasta chamada ‘views’, veja como ficará nossa estrutura:

Vamos incluir algum conteúdo nesse arquivo.

Agora precisamos setar nosso arquivo para que ele seja enviado pro servidor, e ser renderizado no navegador. Para isso precisamos fazer uma alteração no trecho de código app.get(). Veja abaixo a alteração:

Substituí o método res.send(), por res.render()

Certo, agora precisamos reiniciar nosso servidor, para visualizar a alteração em nosso navegador. Vá ao seu terminal e pressione CTRL + C , em seguida digite novamente node server.js . Agora atualizando a página no seu navegador você terá esse resultado:

Conteúdo renderizado pelo navegador

Você deve ter percebido que toda alteração que fazemos no server.js, nós precisamos parar o servidor e iniciar novamente pelo terminal. É uma tarefa simples, mas bem chatinha, pensando em agilidade e desempenho, iremos utilizar um pacote que nos auxiliará nessa tarefa.

Lhes apresento o Nodemon.

O Nodemon reinicia o servidor automaticamente sempre que você salva um arquivo que o servidor usa. Podemos instalar o Nodemon usando o seguinte comando:

npm install nodemon --save-dev

Note que estamos usando uma sinalização --save-dev aqui porque estamos usando apenas o Nodemon quando estamos desenvolvendo. Esse sinalizador salva o Nodemon como uma devDependency no nosso arquivo package.json. O Nodemon se comporta exatamente como o Node, o que significa que podemos executar nosso servidor chamando nodemon server.js. No entanto, não podemos fazer isso na linha de comando agora porque o Nodemon não está instalado com um sinalizador -g. Há outra maneira simples de executar o Nodemon, podemos criar um scriptdentro do package.json.

Script para o nodemon

Agora, você pode executar o npm run dev para acionar o nodemon server.js.

Servidor iniciado pelo nodemon

CRUD — CREATE

A operação CREATE é executada apenas pelo navegador se uma solicitação POST for enviada ao servidor. Essa solicitação POST pode ser acionada com JavaScript ou por meio de um elemento <form>.

Vamos descobrir como usar um elemento <form> para criar novas entradas para o nosso projeto nesta parte do tutorial. Para fazer isso, iremos utilizar o form já criado em nosso arquivo index.ejs.

Você precisa ter três coisas neste elemento de formulário:

• Um atributo action .
• Um atributo method .
• E um atributo name para todo elemento <input> do formulário.

Parte do nosso arquivo index.ejs

O atributo action informa ao navegador para onde redirecionar nosso app Express. Nesse caso estamos sendo direcionados para /show . O atributo method informa ao navegador qual solicitação enviar, nesse caso é uma solicitação do tipo POST.

Em nosso servidor, podemos processar essa solicitação POST com um método post fornecido pelo Express que leva os mesmos argumentos do método GET:

Após isso, salve as alterações. Note que em seu terminal o nodemon irá reiniciar o servidor automáticamente, então vá no seu navegador e preencha o formulário e clique em enviar. Você poderá ver em seu terminal a seguinte mensagem:

Servidor reiniciado automaticamente + mensagem no console

Ótimo, sabemos que o Express está lidando direitinho com o formulário. Mas pergunta que fica é: como obtemos os valores de entrada com o Express?

Acontece que o Express não lida com a leitura de dados do elemento <form> por conta própria. Temos que adicionar outro pacote chamado body-parser para conseguir essa funcionalidade, pare o servidor e digite em seu terminal:

npm install body-parser --save 

O Express nos permite adicionar middleware como body-parser ao nosso aplicativo com o método use. Você ouvirá muito o termo middleware ao lidar com o Express, eles são basicamente plugins que alteram o objeto request ou response antes de serem manipulados pelo nosso aplicativo.

Inclua bodyParser em seu arquivo server.js

O método urlencoded dentro de body-parser diz ao body-parser para extrair dados do elemento <form> e adicioná-los à propriedade body no objeto request. Faça o teste, dê um console.loge preencha o formulário, você deverá ver tudo no campo de formulário dentro do objeto:

Função console.log()

Você verá em seu terminal algo parecido com isto:

Bom, por enquanto é isso. Na próxima parte vamos fazer a conexão com nosso banco de dados e iniciar as operações do CRUD.

Espero que estejam gostando e principalmente aprendendo com este conteúdo. Não esqueçam de compartilhar, quem sabe esse conteúdo não ajuda aquele seu amigo também..

Vejo vocês na parte 3.. Inté!