Criação de uma aplicação CRUD utilizando Node.js e MongoDB (Ubuntu 18.04) — Parte 1/2

7 min readApr 2, 2019

Introdução

O Node.js é um interpretador de Javascript com funcionamento server-side. O objetivo é auxiliar programadores na criação de aplicações de alta escalabilidade, com códigos capazes de manipular dezenas de milhares de ligações simultâneas, numa única máquina física. O Node.js é baseado no interpretador V8 JavaScript Engine.

Vamos desenvolver uma aplicação que regista informações sobre livros (título, autor e género) — Books Repository.

Iremos utilizar também a framework Express e uma base de dados não relacional (NoSQL): MongoDB.

Express: É uma framework para construção de aplicações web para Node.js. O Express simplifica o processo de criação do servidor que já está disponível no Node.js.
MongoDB: Será a nossa base de dados, onde vamos armazenar os dados da nossa aplicação.
CRUD: É um acrónimo para Create, Read, Update and Delete. É um conjunto de operações que temos para executar nos servidores (POST, GET, PUT e DELETE, respetivamente). Isto é o que cada operação faz:
Criar (POST) — Insere um valor na BD;
Ler (GET) — Seleciona um ou mais valores para mostrar;
Atualizar (PUT) — Altualiza um valor na BD;
Eliminar (DELETE) — Elimina um valor na BD.

Arquitetura REST

A Representational State Transfer (REST), em português Transferência de Estado Representacional, é um estilo de arquitetura que define um conjunto de restrições e propriedades baseados em HTTP. Web Services que obedecem ao estilo arquitetural REST, ou web services RESTful, fornecem interoperabilidade entre sistemas de computadores na Internet.

Fonte: Wikipédia

Requisitos

Ubunto 18.04 virtualizado numa plataforma (VirtualBox, p.e.);
Node.js instalado na máquina.

Caso não tenho o Node.js instalado na máquina, pode executar os seguintes comandos:

$ sudo apt get uptade
$ sudo apt install nodejs
$ sudo apt install npm

Parte 1) Criação do projeto

Criar diretório para o projeto

user@ubuntu:~$ cd /home/user/Desktop
user@ubuntu:~/Desktop$ mkdir books_app
user@ubuntu:~/Desktop/books_app$ cd books_app

2. Configurar o ficheiro package.json

user@ubuntu:~/Desktop/books_app$ npm init

Os campos são todos opcionais, mas deve preencher pelo menos o campo ‘description’ e ‘author’.

3. Criar ficheiro index.js

user@ubuntu:~/Desktop/books_app$ touch index.js

O ficheiro index.js é o ficheiro main da aplicação, tal como indicado na package.json. Se pretender dar outro nome ao ficheiro, deverá também alterar o respetivo nome no ficheiro package.json.

Parte 2) Organização da Aplicação

Instalação do Express

Para instalar o Express basta executar o seguinte comando, usando o gestor de pacotes NPM:

user@ubuntu:~/Desktop/books_app$ npm install express --save

Podemos ver a dependência criado no ficheiro package.json

Vamos agora utilizar o express no nosso ficheiro index.js

Para editar o ficheiro, basta executar:

user@ubuntu:~/Desktop/books_app$ gedit index.js

Depois, é só acrescentar o código seguinte:

const express = require('express');
const app = express();// O método listen permite estabelecer uma ligação entre o servidor e o browser.app.listen(3001, function(){
    console.log("O servidor está a correr na porta 3001");
});

Para ver se está tudo a funcionar corretamente, vamos testar a aplicação. Para isso, precisamos de correr o nosso servidor. Basta executar o comando node index.js.

user@ubuntu:~/Desktop/books_app$ node index.js

A mensagem indica que o servidor está a funcionar corretamente. De seguida, vamos ao browser e acedemos a http://localhost:3001

A indicação da mensagem ‘Cannot GET /’ significa que o browser está a comunicar com o servidor express.

Passo 4) Operação Read (CRUD)

A operação Read é executada por todos os browsers sempre que há um pedido ‘GET’, ou seja, na ação de visitar uma página web, por exemplo, está implícito o método GET.

O browser envia um pedido GET ao servidor para executar a operação de leitura.

A mensagem obtida ‘Cannot GET /’, significa que ainda não temos informação no servidor para enviar para o browser.

Utilizando o Express, esse pedido é feito com o método GET.

Vamos acrescentar no ficheiro index.js o seguinte código:

app.get('/', (req, res) => {
    res.send('Hello World');
});

Nota: Cada vez que fazemos alterações nos ficheiros, precisamos de reiniciar o servidor. Se o mesmo estiver em execução, basta fazer Ctrl + C no terminal para parar a execução e depois então executar o comando node index.js. Poderíamos utilizar o nodemon para evitar estar constantemente a reiniciar o servidor, mas neste tutorial não vamos adotar essa filosofia.

user@ubuntu:~/Desktop/books_app$ node index.js

No browser, aceda a http://localhost:3001

Se conseguir ver a mensagem ‘Hello World’, significa que o método GET está a funcionar.

Passo 5) Ficheiros .ejs (Embedded Javascript)

Vamos agora criar alguns ficheiros .ejs (parte visual), para isso utilizaremos um template engine chamado EJS (Embedded Javascript).

Para instalar o ejs, basta executar o seguinte comando:

user@ubuntu:~/Desktop/books_app$ npm install ejs --save

Para configurar a view engine no Express, basta acrescentar no ficheiro index.js a seguinte linha:

//Configuração da view engine
app.set('view engine', 'ejs');

Agora podemos gerar código HTML que posteriormente será renderizado no browser. Vamos então criar o ficheiro template.ejs dentro de uma pasta chamada ‘views’:

user@ubuntu:~/Desktop/books_app$ mkdir views
user@ubuntu:~/Desktop/books_app$ cd views
user@ubuntu:~/Desktop/books_app/views$ touch template.ejs
user@ubuntu:~/Desktop/books_app/views$ gedit template.ejs

No ficheiro template.ejs, incluir o seguinte código:

<!DOCTYPE <html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Books Repository</title>
</head>
<body>
  <h2>Insert New<h2>
  <form action="/show" method="POST">
    <input type="text" placeholder="Title" name="title">
    <input type="text" placeholder="Author" name="author">
    <input type="text" placeholder="Genre" name="genre">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

De seguida, precisamos de renderizar o ficheiro criado anteriormente para que seja renderizado no browser. Para isso, vamos alterar o método GET no ficheiro index.js pelo seguinte código:

app.get('/', (req, res) => {
    res.render('template.ejs');
});

De seguida, vamos reiniciar o servidor para visualizar a alteração no browser.

Deverá visualizar as seguintes alterações em http://localhost:3001:

Passo 6) Operação Create (CRUD)

A operação Create é executada apenas pelo browser se um pedido POST for enviado ao servidor.

No nosso servidor podemos processar um pedido POST com um método post fornecido pelo Express e que leva os mesmos argumentos do método GET:

Acrescentar no ficheiro index.js o seguinte código:

app.post('/show', (req, res) => {
    console.log('Hello Again..');
});

Vamos reiniciar o servidor para visualizar as alterações.

Para verificar se o Express está a comunicar com o formulário, após clicar no botão ‘Submit’, deverá aparecer a mensagem ‘Hello Again…’ no terminal:

Uma vez que o Express não lida com a leitura de dados do elemento <form>, que representa o nosso formulário para entrada de dados, temos de adicionar outro pacote chamado body-parser, para isso, basta executar o seguinte comando:

user@ubuntu:~/Desktop/books_app$ npm install body-parser --save

No ficheiro index.js vamos definir uma constante com o nome bodyParser e também um middleware como body-parser através do método use.

const bodyParser = require('body-parser');app.use(bodyParser.urlencoded({ extended: true }));

O método urlencoded dentro do body-parser diz ao body-parser para extrair dados do elemento <form> e adicioná-los à propriedade body no objeto request. Para testar, vamos escrever na consola o valor dos campos do formulário.

Adicione a seguinte linha dentro do método post