NodeJS : Padrão MVC

Desenvolvendo uma Aplicação Node.js utilizando o padrão MVC

Introdução

O padrão de arquitetura Model-View-Controller (MVC) é amplamente utilizado no desenvolvimento de aplicações web devido à sua capacidade de separar a lógica de negócios, a apresentação de dados e o controle do fluxo de aplicação. No ambiente Node.js, o MVC pode ser implementado de maneira eficiente, proporcionando uma estrutura organizada e escalável para o desenvolvimento de aplicativos web.

Neste artigo, vamos explorar como criar uma aplicação web simples utilizando o padrão MVC com Node.js, demonstrando a separação de responsabilidades entre modelo, visão e controlador, e fornecendo um exemplo prático para ilustrar cada componente.

Introdução ao Padrão MVC

Antes de mergulharmos no exemplo prático, vamos revisar brevemente os conceitos básicos do padrão MVC:

• Modelo (Model): Responsável pela lógica de negócios e pela manipulação dos dados da aplicação. Ele interage com o banco de dados e fornece os dados para a visão.
• Visão (View): É a camada responsável pela apresentação dos dados ao usuário. Ela recebe informações do modelo e gera a interface gráfica ou a resposta HTML que será exibida no navegador.
• Controlador (Controller): Atua como intermediário entre o modelo e a visão. Ele processa as requisições do cliente, chama os métodos apropriados no modelo e decide qual visão deve ser renderizada como resposta.

Resumo do processo (ordem das atividades)

Implementando o MVC com Node.js

Para demonstrar a implementação do MVC com Node.js, vamos criar uma aplicação de lista de tarefas simples, onde os usuários podem adicionar, visualizar e excluir tarefas.

Configuração do Projeto

Comece criando um diretório para o seu projeto e inicialize um projeto Node.js com npm.

mkdir minha-aplicacao-mvc
cd minha-aplicacao-mvc
npm init -y

Resultado:

Em seguida, instale os seguintes pacotes para ajudar na configuração do servidor HTTP e na manipulação das rotas da aplicação:

npm install express body-parser ejs

Observação: Neste exemplo vamos utilizar a Engine Template ejs.

Estrutura do Projeto

Agora, vamos criar a estrutura de diretórios para o nosso projeto:

minha-aplicacao-mvc/
│
├── controllers/
│   └── tarefaController.js
│
├── models/
│   └── tarefaModel.js
│
├── views/
│   ├── index.ejs
│   └── adicionarTarefa.ejs
│
├── public/
│   └── style.css
│
├── app.js
└── package.json

• controllers: Este diretório conterá os controladores da nossa aplicação.
• models: Aqui ficarão os modelos que representam as entidades da nossa aplicação.
• views: As visualizações da aplicação, que serão renderizadas e enviadas para o navegador.
• public: Recursos estáticos, como arquivos CSS, JavaScript e imagens.
• app.js: O arquivo principal que iniciará o servidor e configurará as rotas da aplicação.

Implementação do Modelo

Dentro do diretório models, crie um arquivo tarefaModel.js para representar o modelo de uma tarefa:

// models/tarefaModel.js

let tarefas = [];
function adicionarTarefa(descricao) {
    tarefas.push({ id: Date.now(), descricao });
}
function obterTarefas() {
    return tarefas;
}
function removerTarefa(id) {
    tarefas = tarefas.filter(tarefa => tarefa.id !== id);
}
module.exports = { adicionarTarefa, obterTarefas, removerTarefa };

Este modelo contém funções para adicionar, obter e remover tarefas.

Implementação do Controlador

Dentro do diretório controllers, crie um arquivo tarefaController.js para definir as ações relacionadas às tarefas:

// controllers/tarefaController.js

const Tarefa = require('../models/tarefaModel');
exports.exibirTarefas = (req, res) => {
    const tarefas = Tarefa.obterTarefas();
    res.render('index', { tarefas });
};
exports.adicionarTarefa = (req, res) => {
    const { descricao } = req.body;
    Tarefa.adicionarTarefa(descricao);
    res.redirect('/');
};
exports.removerTarefa = (req, res) => {
    const { id } = req.params;
    Tarefa.removerTarefa(parseInt(id));
    res.redirect('/');
};

Este controlador define funções para exibir, adicionar e remover tarefas.

Implementação das Visualizações

Dentro do diretório views, crie dois arquivos .ejs para as visualizações:

index.ejs:

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Tarefas</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1>Lista de Tarefas</h1>
    <ul>
        <% tarefas.forEach(tarefa => { %>
            <li><%= tarefa.descricao %> <a href="/remover/<%= tarefa.id %>">[Remover]</a></li>
        <% }); %>
    </ul>
    <a href="/adicionar">Adicionar Tarefa</a>
</body>
</html>

adicionarTarefa.ejs:

<!-- views/adicionarTarefa.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adicionar Tarefa</title>
</head>
<body>
    <h1>Adicionar Tarefa</h1>
    <form action="/adicionar" method="post">
        <input type="text" name="descricao" placeholder="Descrição da tarefa" required>
        <button type="submit">Adicionar</button>
    </form>
</body>
</html>

Configuração das Rotas e Inicialização do Servidor

No arquivo app.js, configure as rotas da aplicação e inicialize o servidor Express:

// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const tarefaController = require('./controllers/tarefaController');

app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/', tarefaController.exibirTarefas);
app.get('/adicionar', (req, res) => res.render('adicionarTarefa'));
app.post('/adicionar', tarefaController.adicionarTarefa);
app.get('/remover/:id', tarefaController.removerTarefa);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Servidor rodando na porta ${PORT}`));

Executando a Aplicação

Para executar a aplicação, basta executar o seguinte comando a partir do diretório raiz do projeto:

node app.js

Agora você pode acessar a aplicação em http://localhost:3000 e começar a gerenciar sua lista de tarefas.

Adicionado Tarefas

Listando as Tarefas

Excluindo tarefas

Conclusão

Neste artigo, exploramos como implementar o padrão MVC em uma aplicação web simples usando Node.js. Criamos modelos para representar os dados, controladores para lidar com as requisições do cliente e visões para renderizar a interface do usuário. Ao seguir esta estrutura organizada, é possível desenvolver aplicativos web escaláveis e fáceis de manter. Este exemplo fornece uma base sólida para a construção de aplicações mais complexas utilizando o padrão MVC no ambiente Node.js.

Até a próxima!