Como conectar um banco de dados ao JavaScript

Antes de entrar nos detalhes de como fazer uma conexão local com o banco de dados é necessário entender um conceito muito importante na Arquitetura de Software, o MVC (Model-View-Controller).

O que é MVC?

O MVC é um padrão da arquitetura que tem como objetivo otimizar a comunicação do seu app com o banco de dados. Normalmente, dividimos o app em três camadas: Model, View e Controller e,por meio dessas camadas, fazemos as requisições e alterações no nosso banco de dados.

Apesar de ainda ser possível abstrair o código em mais de três camadas, a maioria dos programadores prefere manter o padrão original para evitar que o código se torne muito complexo.

Esse conceito é essencial para qualquer desenvolvedor começando a estudar Back End e é um padrão usado no software de diversas empresas. Sendo assim, agora que temos o entendimento básico sobre arquitetura de software, entenda em detalhes todas as camadas de um MVC. Depois, te ensinaremos a criar um aplicativo usando MVC na prática.

Camada Model (Modelo de Negócio)  

A camada Model é responsável pela comunicação com o banco de dados. Ela gerencia e controla os dados da aplicação por meio de funções, podendo editar, adicionar ou fazer requisições de dados (tudo isso seguindo a lógica da função criada).

Camada Controller

A camada de controle é usada pela aplicação para chamar as funções da camada Model. Algumas vezes, usamos uma camada de serviços no meio que é responsável por validar dados, retornar erros, entre outros problemas que alguns gostam de abstrair da lógica do controller.

Camada de View

A camada de View seria a camada responsável por mostrar visualmente os dados que pegamos do banco de dados em formato JSON ou em uma estrutura HTML. Esta camada normalmente é deixada para o desenvolvedor Front End.

Criando um aplicativo com banco de dados

Após entender as camadas de comunicação do aplicativo, se torna possível consumir e editar o banco de dados de maneira muito mais otimizada e refinada. Para explicar melhor  esse conceito, será criado um aplicativo que segue o padrão na prática. Inicialmente, entraremos no MySQL Workbench e criaremos um banco de dados com alguns dados já inseridos.

Como o objetivo do artigo é exemplificar a comunicação com o banco de dados não será explicado em detalhes a criação do banco, porém, para um melhor entendimento temos o diagrama das tabelas criadas:

Depois que o banco de dados é criado, é possível acessar ele por meio do nosso aplicativo, mas, para isso, será necessário criar o servidor.

Crie um diretório e instale as dependências seguindo o passo a passo a seguir:

mkdir my_first_app_with_database

cd my_first_app_with_database

touch .env

npm init -y

npm install express

npm install dotenv

npm install mysql2

Com as dependências instaladas criamos o arquivo app.js com o seguinte conteúdo:

src/app.js

O express é o que permite que se faça requisições ao banco de dados e o controller que estamos importando será criado posteriormente, contudo sua função é pegar dados dos gerentes.

Já o bodyParser é responsável por permitir que sejam passados dados por meio do corpo da requisição. Recomendo usar a extensão Thunder Client no seu VS Code para visualizar melhor seu funcionamento.

Com o app criado, crie o arquivo server.js com o seguinte conteúdo:

src/server.js

Após isso é só editar o package.json:

/package.json

E, por fim, colocamos as variáveis de ambiente no arquivo .env, arquivo responsável por garantir que os dados usados serão somente salvos localmente, garantindo a segurança da aplicação.

/.env

MYSQL_HOST=localhost

MYSQL_USER=root

MYSQL_PASSWORD=SUASENHA

MYSQL_DATABASE=CompanieDatabase

PORT=3000

HOST=localhost

Com esses arquivos já podemos dar o comando para iniciar o servidor:

npm start

Apesar de já ser possível rodar o servidor, ainda não estamos conectados ao banco de dados local. Para isso, é necessário criar um arquivo de conexão no diretório models:

/src/models/connection.js

O arquivo criado anteriormente usa as variáveis de ambiente para se conectar com o banco localmente, a constante “mysql” que foi importada é a constante que permite que mandemos comandos com a linguagem SQL diretamente por funções Javascript.

Com a conexão criada, será feito um modelo específico para os comandos relacionados aos gerentes.

/src/models/managersModel.js

No arquivo anterior usamos um comando SQL para dados de duas tabelas diferentes. Esse comando pega cada gerente e por qual área ele é responsável e no segundo comando inserimos um novo gerente na tabela.

A Camada Model é a camada mais importante, pois é a partir dela que acessamos os dados no nosso exemplo.

Agora será feita a camada de Services. No nosso exemplo, ela terá uma validação simples de nome, porém vale a pena estudar essa camada mais a fundo para futuros projetos.

/src/services/managersServices.js

Por último, a camada que usamos para chamar os comandos: a Camada Controller.

/src/controllers/managerController.js

Com todos os arquivos prontos, rode o comando npm start novamente ou o npm run debug.

Com o servidor rodando, ao tentar acessar a rota: http://localhost:3000/managers teremos um retorno visual em formato JSON e  podemos usar o objeto retornado na nossa aplicação Front End.

É importante entender que podemos rodar qualquer comando SQL na nossa camada de modelo e podemos criar qualquer função dentro dos limites estabelecidos da linguagem. No nosso exemplo, podemos criar novos funcionários, criar novos gerentes, editar os dados de qualquer tabela, deletar dados, entre diversas outras funcionalidades. Recomendo tentar desenvolver por si próprio outras funcionalidades para a aplicação.

Conclusão

Conectar o seu aplicativo a um banco de dados local é somente o começo, usar variáveis de ambiente torna fazer a transição para consumir os dados do banco de dados de um servidor hospedado online muito mais simples. Ou seja, aprender sobre arquitetura de software e como manipular um banco de dados usando sua linguagem é extremamente importante para qualquer desenvolvedor Back End e, com o tempo, pode ser usada para infinitas possibilidades.

Até logo!