Cómo conectar una base de datos con JavaScript

Cómo conectar una base de datos con JavaScript

Antes de entrar en los detalles de cómo hacer una conexión local a la base de datos, es necesario entender un concepto muy importante en Arquitectura de Software, el MVC (Model-View-Controller).


¿Qué es MVC?


MVC es un patrón de arquitectura que tiene como objetivo optimizar la comunicación de tu aplicación con la base de datos. Normalmente, dividimos la aplicación en tres capas: Model, View y Controller y, a través de estas capas, realizamos solicitudes y cambios en nuestra base de datos.

Aunque todavía es posible abstraer el código en más de tres capas, la mayoría de los programadores prefieren apegarse al patrón original para evitar que el código se vuelva demasiado complejo.

Este concepto es fundamental para cualquier desarrollador que se inicia en el estudio del backend y es un patrón utilizado en software de varias empresas. Entonces, ahora que tenemos la comprensión básica de la arquitectura de software, veremos en detalle todas las capas de un MVC. Luego, te enseñaré cómo crear una aplicación usando MVC en la práctica.

Capa Model (Modelo de Negocio)  

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).


Capa Controller

La aplicación utiliza la capa de control para llamar funciones desde la capa Model. A veces, usamos una capa de servicios en el medio que se encarga de validar datos, devolver errores, entre otros problemas que a algunos les gusta abstraer de la lógica del controller.

Camada de View

La capa View sería la encargada de mostrar visualmente los datos que obtenemos de la base de datos en formato JSON o en una estructura HTML. Esta capa generalmente se deja al desarrollador frontend.


Crear una aplicación con base de datos


Después de comprender las capas de comunicación de la aplicación, es posible consumir y editar la base de datos de una manera mucho más optimizada y refinada. Para explicar mejor este concepto, se creará una aplicación que siga el patrón en la práctica. Inicialmente, ingresaremos a MySQL Workbench y crearemos una base de datos con algunos ya ingresados.


Como el objetivo del artículo es ejemplificar la comunicación con la base de datos, no se explicará en detalle la creación de la base de datos. Sin embargo, para una mejor comprensión, tenemos el diagrama de las tablas creadas:


Una vez creada la base de datos, es posible acceder a ella a través de nuestra aplicación, pero para ello será necesario crear el servidor.

Cree un directorio e instale las dependencias siguiendo los pasos a continuación:

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

Con las dependencias instaladas, creamos el archivo app.js con el siguiente contenido:

src/app.js


Express permite que se hagan requisiciones a la base de datos y el controller que importamos se creará posteriormente. Sin embargo, su función es recopilar datos de los administradores.

El bodyParser es responsable de que que se pasen datos por medio del cuerpo de la requisición. Recomiendo usar la extensión Thunder Client en tu VS Code para visualizar mejor su funcionamiento.

Con la app creada, genera el archivo server.js con lo siguiente:

src/server.js


Luego de eso, solo falta editar el package.json:

/package.json


Y, por último, metemos las variables de entorno en el archivo .env, el archivo encargado de que los datos utilizados solo se guarden localmente, garantizando la seguridad de la aplicación.

/.env

MYSQL_HOST=localhost

MYSQL_USER=root

MYSQL_PASSWORD=SUASENHA

MYSQL_DATABASE=CompanieDatabase

PORT=3000

HOST=localhost


Con estos archivos, ahora podemos dar el comando para iniciar el servidor:

npm start


Pese a que ya es posible ejecutar el servidor, todavía no estamos conectados a  la base de datos local. Para hacerlo, es necesario crear un archivo de conexión en el directorio models:

/src/models/connection.js


El archivo creado anteriormente usa variables de entorno para conectarse con la base de datos localmente, la constante mysql que se importó es la constante que nos permite enviar comandos con el lenguaje SQL directamente a través de funciones de JavaScript.

Con la conexión creada, se hará un modelo específico para los comandos relacionados con los gerentes (managers).

/src/models/managersModel.js


En el archivo anterior, usamos un comando SQL para datos de dos tablas diferentes. Este comando toma cada gerente e indica de qué área es responsable. En el segundo comando insertamos un nuevo gerente en la tabla.

La capa Model es la más importante, porque a partir de ella accesamos a los datos en nuestro ejemplo.

Ahora haremos la capa de Services. En nuestro ejemplo, tendrá una validación simple de nombre. Por consiguiente, vale la pena estudiar esa capa más a fondo para futuros proyectos.

/src/services/managersServices.js


Por último, la capa que usamos para llamar los comandos: Controller.

/src/controllers/managerController.js


Con todos los archivos listos, ejecuta el comando npm start nuevamente o el npm run debug.

Con el servidor en ejecución, al intentar accesar a la ruta http://localhost:3000/managers tendremos un retorno visual en formato JSON y podremos usar el objeto retornado en nuestra aplicación frontend.

Es importante entender que podemos ejecutar cualquier comando SQL en nuesrta capa Modelo y podemos crear cualquier función dentro de los límites establecidos del lenguaje. En nuestro ejemplo, podemos crear nuevos funcionarios, gerentes, editar los datos de cualquier tabla, borrar datos, entre otras funcionalidades. Recomiendo intentar desarrollar por ti mismo/a otras funcionalidades para la aplicación.


Conclusión

Conectar tu aplicación a una base de datos local es solo el comienzo. El uso de variables de entorno hace que la transición al consumo de datos de la base de datos desde un servidor alojado en línea sea mucho más simple.

Es decir, aprender sobre arquitectura de software y cómo manipular una base de datos usando su lenguaje es extremadamente importante para cualquier desarrollador de backend y, con el tiempo, puede usarse para un sinfín de posibilidades.

¡Hasta luego!

💡
Las opiniones y comentarios emitidos en este artículo son propiedad única de su autor y no necesariamente representan el punto de vista de Listopro.

Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.