JAVASCRIPT COM ARQUITETURA MVC E MINI PROJETO

O padrão MVC (Model-View-Controller) é uma arquitetura de software que separa a aplicação em três componentes principais, cada um com responsabilidades distintas. Esse padrão é amplamente utilizado no desenvolvimento de aplicações web, incluindo as que usam JavaScript, por ajudar a organizar e gerenciar o código de forma eficiente e escalável.

1. Model (Modelo)

• Responsabilidade: O Model é responsável pela lógica de negócios e pela interação com os dados da aplicação. Ele define a estrutura dos dados, validações e regras de negócios. Em uma aplicação que usa um banco de dados, o Model seria a camada que se comunica diretamente com o banco, fazendo operações como criar, ler, atualizar e deletar (CRUD).
• Exemplo em JavaScript: Em um ambiente Node.js, você pode usar bibliotecas como Sequelize ou Mongoose (para MongoDB) para definir os modelos. Um Model de usuário poderia incluir propriedades como nome, email e senha, e métodos para validar dados de entrada.

2. View (Visão)

• Responsabilidade: A View é a parte da aplicação que lida com a interface do usuário. Ela exibe os dados que vêm do Model e envia as ações do usuário para o Controller. Em aplicações JavaScript, a View pode ser escrita usando HTML e CSS, com frameworks ou bibliotecas de front-end como React, Angular ou Vue.js.
• Exemplo em JavaScript: Um componente React que exibe uma lista de produtos. Esse componente renderiza a interface do usuário e pode chamar funções de um Controller para adicionar ou remover produtos.

3. Controller (Controlador)

• Responsabilidade: O Controller atua como um intermediário entre o Model e a View. Ele recebe as entradas do usuário através da View, processa essas entradas (chamando métodos no Model quando necessário) e determina qual View renderizar. O Controller é responsável por manipular os dados de acordo com a lógica de negócios e atualizar as Views conforme necessário.
• Exemplo em JavaScript: Em um ambiente Node.js com Express, um Controller poderia definir rotas para lidar com requisições HTTP (GET, POST, etc.). Por exemplo, uma rota para /usuarios poderia chamar uma função no Controller que, por sua vez, consulta o Model para obter os dados dos usuários e envia esses dados para uma View.

PROJETO PRÁTICO DE MVC COM JAVASCRIPT

Instalar os pacotes que iremos utilizar no projeto:

• npm init -y
• npm i express
• npm i mysql2

Estrutura do Projeto

Criar um banco de dados no MySQL eu chamei de MVC

Criar a tabela:

CREATE TABLE IF NOT EXISTS cliente (

    id INT AUTO_INCREMENT PRIMARY KEY,

    nome VARCHAR(100) NOT NULL,

    cpf VARCHAR(100) NOT NULL   

);

Crie uma pasta chamada config, é esta pasta que será usada para armazenar as configurações com o nosso banco de dados.

Configuração o arquivo db.js

OBS: Dependendo da configuração que foi feita na instalação do MySQL pode ser necessário informar a porta de comunicação.

Modelagem de Dados

Vamos começar pela criação do modelo na pasta models, seguindo o padrão MVC. 

No documento ClienteModel.js inserir o código abaixo:

Exportando o módulo como Cliente, agora podemos acessar quando criarmos os nossos controladores para acessar o banco de dados, realizar as funções SQL e implementar as operações da nossa API.

Criando Controladores

Vamos para a criação dos controladores que irão manipular as ações relacionadas ao modelo Cliente.

Controladores fazem a intermediação entre as requisições HTTP e os Models.

No documento clienteController.js inserir o código abaixo:

A partir daqui, podemos configurar o nosso app.js usando os controladores para definir as rotas e quais ações correspondentes.

Abra o arquivo app.js e vamos começar importando as dependências necessárias, incluindo a configuração com o banco de dados, o express e o controlador.

Podemos utilizar o Postman API para testar as rotas, porém vamos criar um index.html para utilizar o verbo POST.

ATUALIZAR O APP.JS 

RESUMO

O padrão de arquitetura MVC (Model-View-Controller) é crucial para o desenvolvimento de aplicações web organizadas e escaláveis. Ele separa a lógica de negócios (Model), a interface do usuário (View) e o controle das interações do usuário (Controller). Essa separação de responsabilidades facilita a manutenção e o desenvolvimento colaborativo, permitindo que desenvolvedores trabalhem simultaneamente em diferentes partes do sistema sem conflitos. Além disso, melhora a reutilização de código, pois os componentes podem ser facilmente reaproveitados ou substituídos. MVC também promove a escalabilidade e a facilidade de testes, tornando o desenvolvimento de aplicações complexas mais eficiente e menos propenso a erros.