Criando um CRUD completo com NodeJS, Express e MongoDB — Parte 3/3
Fala galera, blz?!
Voltamos para nossa terceira e última parte desse CRUD, essa parte será um pouco mais extensa que as anteriores. Creio que todos estejam animados para finalizar esse projeto, então vamos nessa..
(Caso ainda não tenha visto as partes anteriores: Parte 1/Parte 2)
Ps. Desculpem a demora, mas infelizmente ocorreram alguns imprevistos e não pude finalizar antes.. mas vamos direto ao que importa.. kkkk’
MongoDB
Para usarmos o MongoDB como banco de dados, nós precisamos instalá-lo e podemos fazer isso através do npm conforme abaixo.
npm install mongodb --save Uma vez instalado, podemos nos conectar ao MongoDB através do método de conexão do Mongo.Client, conforme mostrado no código abaixo:
const MongoClient = require('mongodb').MongoClient
const uri = "<!-- insira aqui o caminho para seu BD -->"MongoClient.connect(uri, (err, client) => {
// ... start the server
})
O código acima será implementado mais adiante. Para este tutorial, irei utilizar o mLab, crie uma conta no site deles, é fácil e grátis. Após verificar sua conta, você pode criar um novo Deployment, selecione a opção sandbox, em seguida coloque o nome do seu banco de dados.
Quando terminar de implementar, entre na aba ‘Users’ e crie um usuário e uma senha para o banco de dados, você vai usar esses dados para conectar ao banco que você acabou de criar.
Finalmente, pegue o url do MongoDB e adicione-o ao seu método MongoClient.connect. Certifique-se de usar seu usuário e senha do banco de dados!
Em seguida, queremos iniciar nosso servidor apenas quando o banco de dados estiver conectado. Por isso, vamos mover o app.listen para o método connect. Lembra daquele código de conexão, logo no início deste post? Vamos implementá-lo agora.
Acabamos de configurar o MongoDB. Agora, vamos criar uma coleção para armazenar os dados do nosso projeto. A propósito, uma coleção é um local nomeado para armazenar objetos, você pode criar quantas coleções quiser. Podem armazenar objetos como “nomes”, “produtos”, ou qualquer outro nomenclatura que você escolher. Vamos iniciar as operações do CRUD.
Salvando nossos dados no banco.
Iremos criar a coleção “data”, que irá armazenar nossos dados, apenas colocando-a entre aspas ao chamar o método db.collection() do MongoDB. Ao criar a coleção, também podemos salvar nossa primeira entrada no MongoDB com o método save simultaneamente.
Quando terminarmos de salvar, precisamos redirecionar o usuário para algum lugar (senão o usuário ficará esperando para sempre até que nosso servidor seja alterado). Nesse caso, vamos redirecioná-los de volta para /, o que faz com que os navegadores sejam recarregados.
Agora, se você inserir algo no elemento <form>, poderá ver uma entrada na sua coleção do MongoDB e a confirmação através do seu terminal.
Obaa, já temos algum conteúdo na coleção, por que não tentar mostrar ao usuário quando eles chegarem à nossa página?
CRUD — READ
Mostrando o conteúdo de nossa coleção.
Temos que fazer algumas coisas para mostrar o conteúdo armazenado em nosso banco de dados para o nosso usuário. Precisamos:
- Pegar o conteúdo no banco de dados.
- Usar nossa template engine para exibir esse conteúdo.
Well, let’s go in baby steps..
Podemos obter o conteúdo do nosso BD usando o método find disponível no método collection.
O método de localização retorna um cursor(um objeto do Mongo), este objeto contém todas as citações de nosso banco de dados. Ele também contém várias outras propriedades e métodos que nos permitem trabalhar com dados facilmente. Um desses métodos é o método toArray.
O método toArray recebe uma função callback que nos permite fazer algumas coisas com os objetos que recuperamos do mLab. Vamos tentar fazer um console.log() nesses resultados e ver o que conseguimos!
Após incluir o trecho acima, vá até seu navegador e preencha o <form> e clique em submit . Você verá o resultado em seu terminal.
Ótimo! Você está vendo o conteúdo preenchido (o mesmo que foi salvo no banco de dados). Concluímos a primeira parte, que é obter dados do MongoLab. A próxima parte será renderizar esse conteúdo usando nossa template engine. Bom, para isso crie um novo arquivo dentro da pasta ‘views’ conforme abaixo:
Agora abra-o e crie uma tabela que mostre o conteúdo que enviamos pelo formulário.
Note que na linha 18 nós estamos mostrando nossa variável data combinada com o método .forEach() onde irá percorrer o conteúdo da collection em nosso banco de dados, e criamos então a function(details) que nas linhas 20 e 21, irá mostrar o conteúdo que estamos chamando com <%= details.name%> e <%= details.surname%> respectivamente.
Em seguida vamos fazer uma pequena alteração no nosso server.js. Vamos deixá-lo conforme abaixo.
Volte ao navegador e preencha o formulário, você será redirecionado para a página localhost:3000/show , e verá o conteúdo abaixo(provavelmente seu conteúdo será diferente.. rs’).
CRUD — UPDATE
Atualizando dados.
A operação UPDATE é usada quando você quer alterar algum conteúdo no BD, não irei entrar em detalhes sobre o protocolo HTTP, irei abordar como funciona essa requisição em outro artigo.
Note que incluí os buttons no arquivo show.ejs onde irá direcionar para a página de edit, e incluí também o de delete, o qual será nossa próxima etapa do CRUD.
Para nosso projeto, irei fazer um post na rota /edit/:id e irei tratar essa atualização conforme abaixo. Note que fiz algumas alterações na estrutura do projeto, aproveitando um recurso de rotas que o Express() nos oferece.
Veja abaixo que, com o recurso de rotas fornecido, podemos apenas indicar qual a rota iremos observar e dentro dessa rota, teremos os métodos abaixo.
No método.get, estou armazenando em var id, o id que iremos passar no params vindo da view (faremos primeiro nossos métodos no servidor, e depois a view), estou usando essa variável para encontrar o objeto que iremos alterar, isso está sendo feito na função .find(Object(id)) que irá percorrer o array em nosso banco, e quando encontrar o nosso objeto, irá renderizar a nossa view edit.ejs e também passando o resultado desse objeto para ser usado com os valores dentro do <form> em nossa view.
Na imagem ao lado, vemos o código da nossa view, criei um novo arquivo dentro da pasta views, com o nomeedit.ejs. Nele há um formulário parecido com o que temos no index.ejs, porém, ao invés de incluir um novo “nome” e “sobrenome”, iremos alterar o valor já existente. Note que incluí um botão para voltar aos registros salvos, e outro que fará o post para editar nosso objeto, veja que já estou importando os dados que está sendo renderizado conforme imagem acima(ou ao lado, como preferir.. kkkk). Note também que estou passando o id do objeto no params, e já estou usando os valores da nossa base de dados dentro do input para melhor visualização do dado que estamos editando.
Voltando ao nosso código de update pouco mais acima, note que quando fazemos um .post o nosso server irá armazenar as variáveis que iremos usar para dar update em nosso objeto, updateOne() recebe o nosso objeto que estamos alterando, e $set recebe os dados do form que queremos atualizar, se tudo estiver correto, seremos redirecionado para a tela onde mostra todos nossos registros, e estamos printando em nosso console a informação de “Atualizado no banco de dados”.
Feito as alterações em nossas views, e com o método update sendo tratado corretamente, damos sequência no nosso CRUD.
CRUD — DELETE
Deletando dados.
A operação DELETE é a última operação desse nosso projeto, após ter feito corretamente o UPDATE, e tendo adquirido esse conhecimento, você verá que o método .delete é bem simples. Novamente não irei entrar em méritos de requisições HTTP, tratarei essa operação de forma simplificada.
Lembra que fizemos o botão de “Deletar” em nossa página /show? Pois é, já estamos enviando o id que iremos apagar do nosso BD, então será simples fazer esse tratamento.
Note que quando clicar no botão de deletar, seremos direcionados para /delete/:id e então, com o método .get iremos pegar e armazenar o id enviado, e da mesma forma que o updateOne, estamos passsando o id a ser buscado em nosso BD e então deletá-lo, printamos em nosso console a informação de deletado e seremos redirecionados para a tela de registros.
Feito isso, encerramos nosso projeto de CRUD Simples em NodeJS.
Essa última parte do projeto se extendeu bastante, e também demorou demais para sair.. Novamente peço desculpas, mas não pude continuar e lançar essa parte anteriormente.
Todo o código desse projeto pode ser visto no meu repo do Github. Espero ter passado da maneira mais simplificada e explicativa possível, caso tenham alguma dúvida fiquem a vontade para me questionar, logo abaixo estão meus contatos.
Gostaria de agradecer a todos pelo apoio e palavras de incentivo para voltar a escrever.. rs
Em especial agradeço ao Eugênio Oliveira, que conversou bastante comigo e me incentivou ainda mais a voltar e terminar esse projeto.
Podem me encontrar na maioria das redes sociais como Patrick Isidoro. #TamoJunto galera! Logo mais volto com outros artigos.
