Como criar uma aplicação web com Node.js com MongoDB, Mongoose, Express e EJS

No artigo de hoje entenderemos como criar uma aplicação web básica, apenas com listagem e cadastro, utilizando Node.js, Express, EJS, Mongoose e MongoDB. Para quem ainda não sabe nada de Node.js, será um excelente local de aprendizado.

MongoDB é um banco de dados NoSQL, orientado a documentos JSON, o mesmo formato de dados utilizado pelo JavaScript, além de ser utilizado de forma parecida através de funções com sintaxe similar ao JS, diferente dos bancos de dados SQL tradicionais.

Se olharmos bem, ambos os banco de dados têm o JavaScript em comum, facilitando o uso das duas tecnologias em conjunto, sendo um excelente motivo para serem utilizados juntos e com frequência em projetos de todos os tamanhos.

Em resumo, o objetivo deste artigo será mostrar um primeiro contato prático com ambos, utilizando o famoso CRUD(Create, Retrieve, Update e Delete).

Configurando o Node.js

Para começarmos, vamos instalar o Node.js. Clique aqui para ir até o site oficial do node e depois no botão grande e verde para baixar o executável para o seu SO (é recomendado baixar a versão LTS). Após baixar, será feita a instalação do Node.js e do NPM, que é um gerenciador de pacotes do Node.

Após concluída a instalação, vamos instalar o módulo que nos será útil mais para frente no artigo. Crie um diretório para guardar os seus projetos Node e dentro do diretório via terminal e com comando de permissão de administrador (sudo para Linux e Mac), rode o comando abaixo:

O express é um web framework famosíssimo para Node.js. Com ele, é possível criar aplicações e APIs web muito rápido e prático. O que instalamos anteriormente é o express-generator, que é um gerador de aplicação de exemplo. Podemos observá-lo utilizando a seguinte linha de comando:

Acima, o “-e” é para usar o motor de renderização(view-engine) EJS, já o “-git” deixa o seu projeto preparado para o versionamento do mesmo com o Git, após apertar enter, o projeto será criado, caso o terminal peça alguma confirmação, é só digitar ‘y’ e apertar enter.

Após realizar o processo acima, entre na pasta e mande instalar as dependências, ficará da seguinte forma:

Após a conclusão e ainda no terminal, digite:

O comando acima irá fazer com que a aplicação default inicie a sua execução. Abra o seu navegador e digite localhost:3000 e você terá a seguinte tela:

Configurando o MongoDB

Agora que já temos a estrutura básica, faremos mais alguns ajustes em um arquivo que se encontra na raiz do seu projeto chamado package.json. Ele é o arquivo de configuração do seu projeto. É ele que determinará, por exemplo, quais bibliotecas você possui como dependência no seu projeto.

Nosso próximo passo será acessar o site oficial MongoDB e fazer o download do mongo. Vá no menu superior direito, clique em Products> MongoDB Community Edition> MongoDB Community Server e busque a versão mais recente para o sistema operacional que você utiliza. Se você estiver utilizando o windows, rode o executável que irá extrair os arquivos na sua pasta arquivos de programas e funcionará normalmente.

Dentro da pasta do nosso projeto Node (criado anteriormente), deverá existir uma subpasta de nome data. Neste momento, crie esta pasta. É nela que iremos armazenar os nossos dados do mongoDB.

Pelo prompt de comando, entre na subpasta bin dentro da pasta de instalação do seu MongoDB e digite:

Isso irá iniciar o servidor do MongoDB. Caso não retorne nenhum erro no terminal, o MongoDB estará pronto para uso.

Para o exemplo de hoje, recomendo o uso do MongoDB Compass, que você também irá encontrar para baixar no site oficial do mongo, clicando em Products> Tools> MongoDB Compass.

Após o download, abra o Compass e clique no seguinte:

Em seguida, clique em Create database:

Acrescente um nome e uma collection. No meu caso, utilizei a collection clientes e o projeto webappbasica.

Ficando da seguinte forma:

Uma das melhores coisas do MongoDB é que ele usa JSON como estrutura de dados. Caso não conheça as estruturas de um documento JSON, sugiro uma pesquisa na internet antes de prosseguir.

Vamos adicionar um novo cliente a nossa coleção. Também é sempre bom lembrar que caso você não queira determinar o id do seu registro, o próprio MongoDB criará um id.

Iremos clicar em ADD DATA e em seguida insert document:

Ficando da seguinte forma:

Note que acima eu não determinei um id. Em seguida, se olharmos para o resultado:

Observe que o id foi gerado automaticamente pelo próprio MongoDB. Acrescente mais alguns registros para que tenha uma mínima base para o seu desenvolvimento e, em seguida, iremos começar a interagir de verdade com o web server + MongoDB.

Conectando no MongoDB com Node

Nosso próximo passo, será juntar as duas tecnologias. Precisaremos adicionar uma dependência para que o MongoDB funcione corretamente com essa aplicação.

Escreva em seu terminal:

Com esse comando, duas novas dependências serão baixadas para sua pasta node_modules e também serão adicionadas duas novas linhas de dependências no package.json que irão dar suporte ao mongoDB e às variáveis de ambiente (com o DotEnv). Essas variáveis de ambiente precisam ser as primeiras a serem carregadas quando a aplicação subir. Em seguida, vá até a pasta bin no arquivo www e adicione essa linha no começo.

A linha acima irá procurar um arquivo de variáveis de ambiente na raiz de seu projeto, que você deverá criar com o nome de .enve deve tero seguinte conteúdo.

A variável da primeira linha MONGO_HOST é o endereço de seu servidor MongoDB, utilize sempre IP, nunca localhost. Já a segunda variável MONGO_DATABASE será o nome de sua base de dados.

Agora, para organizarmos nosso acesso aos dados, vamos criar um novo arquivo que será chamado de db.js na raiz de nossa aplicação Express(webappbasica). Esse será o arquivo responsável pela conexão e manipulação do nosso banco de dados. Este arquivo usará o driver nativo do MongoDB. O documento ficará assim:

Estas linhas irão carregar um objeto cliente de conexão a partir do módulo mongodb e depois farão a conexão em nosso banco de dados. Essa conexão será armazenada em uma variável global do módulo.

A seguir, utilizando este arquivo db., modificaremos nossa rota para que ela nos mostre dados vindos do banco de dados.

Para conseguirmos listar os clientes, o primeiro passo é ter uma função que retorne todos os clientes em nosso módulo db.js (arquivo criado acima).

Adicione a seguinte função ao seu db.js:

Note que a consulta é feita de forma bem direta, usamos a função que criamos anteriormente, connect para obter a conexão e, em seguida, navegamos até a coleção de clientes e fizemos um find sem filtro nenhum que retorna todos os clientes. O resultado desse find é um cursor, sendo necessário usarmos o toArray para convertê-lo em um array e retorná-lo.

Observe que a última instrução é “module.exports = {findAll}” indicando que poderá ser usada em outros pontos da aplicação que importem do nosso módulo db.

Agora, iremos escrever a lógica que usará esta função. No arquivo que se encontra em ./routes/index.js no editor que você usar. Sugiro que use o VS Code. Dentro do index.js temos apenas a rota default, que é um get no path raiz.

O router.get define em qual rota será tratada a requisição com o verbo GET. Quando recebemos um GET /, a função callback dessa rota é disparada e, com isso, o findAll que fizemos anteriormente é utilizado. Como esta função é assíncrona, precisamos utilizar a palavra reservada await antes dela, além disso, também é necessário um try/catch para tratar possíveis erros. O callback do router deve ter a palavra async antes dos parâmetros da função. Caso você não entenda de funções assíncronas, sugiro uma pesquisa sobre o assunto antes de continuar.

Em seguida, faremos nossa view para a listagem dos clientes. Vá até a pasta ./views/ e edite o arquivo index.js, ficando da seguinte forma:

Aqui, dizemos que o objeto docs, que vai ser retornado pela rota que criamos anteriormente, será iterado com um forEach e os seus objetos serão atualizados um a um para um compor uma lista não ordenada com os nomes.

Isso já será o bastante para que a listagem funcione. Para que não seja necessário ficar derrubando e subindo novamente a sua aplicação, altere o script de start no seu package.json para o seguinte:

Agora use o npm start novamente e todas as vezes que forem feitas alterações, elas serão carregadas automaticamente.

Após isso, abra seu navegador, acesse http://localhost:3000/userlist e observe o resultado. Caso esteja tudo funcionando, você verá a lista com os nomes adicionados ao seu banco de dados.

No próximo artigo que trarei com a parte 2, seguiremos adiante com coisas mais legais de serem feitas em nosso projeto CRUD.