CRUD: la base de la gestión de datos

El concepto CRUD está estrechamente vinculado a la gestión de datos digitales. CRUD hace referencia a un acrónimo en el que se reúnen las primeras letras de las cuatro operaciones fundamentales de aplicaciones persistentes en sistemas de bases de datos:

• Create (Crear registros)

• Read bzw. Retrieve (Leer registros)

• Update (Actualizar registros)

• Delete bzw. Destroy (Borrar registros)

En pocas palabras, CRUD resume las funciones requeridas por un usuario para crear y gestionar datos. Varios procesos de gestión de datos están basados en CRUD, en los que dichas operaciones están específicamente adaptadas a los requisitos del sistema y de usuario, ya sea para la gestión de bases de datos o para el uso de aplicaciones. Para los expertos, las operaciones son las herramientas de acceso típicas e indispensables para comprobar, por ejemplo, los problemas de la base de datos, mientras que para los usuarios, CRUD significa crear una cuenta (créate) y utilizarla (read), actualizarla (update) o borrarla (delete) en cualquier momento. Dependiendo de la configuración regional, las operaciones CRUD pueden implementarse de diferentes maneras, como lo muestra la siguiente tabla:

CRUD-Operation	SQL	RESTful HTTP	XQuery
Create	INSERT	POST, PUT	insert
Read	SELECT	GET, HEAD	copy/modify/return
Update	UPDATE	PUT, PATCH	replace, rename
Delete	DELETE	DELETE	delete

CRUD - Modelo Cliente

Crear el archivo con el nombre del Modelo en src/controllers/cliente.controller.ts

Mostrar Registros - GET

El método getAllCliente muestra los registros de la tabla clientes

public async getAllCliente(req: Request, res:Response){
        try {
            // const cliente: ClienteI[] = await Cliente.findAll(
            //     {
            //         where: {activo: true}
            //     }
            const cliente: ClienteI[] = await Cliente.findAll() // select * from clientes;
            res.status(200).json({cliente})
        } catch (error) {

        }
    }

Para probar este método, instalamos la extensión Thunder Client en VS Code.

Para iniciar con la extensión, seleccionamos en el panel izquierdo de VS Code, la extensión Thunder Code.

Primero Seleccionamos la opcion Collections >> En el menu indicado con varias lineas en la parte derecha >> New Collection >> Ingresamos el Nombre: SiteAlmacenNodeJs

En el panel izquierdo aparece SiteAlmacen, seleccionarlo y al lado deercho muestra unos ..... Seguidos.

Presionar click en los puntos seguidos, seleccionar New Folder y digitamos el Modelo, es decir: Cliente

y hacer lo mismo con los demás modelos:

Producto

TipoProducto

Venta

Ahora nos ubicamos en la carpeta del Modelo que queremos realizar el Crud, que para este caso es la Carpeta Cliente.

Al lado derecho de la Carpeta Cliente, muestra unos ...... Seguidos. Seleccionar los puntos seguidos en New Request, y agregamos el método que deseamos vincular en esta petición.

En nuestro primer caso es el método MostrarClientes, Entonces New Request: MostrarClientes

Una vez creado el Request, en el lado derecho debo seleccionar el Verbo y la Ruta de la petición.

Verbo: Get

Ruta de la Petición: La podemos obtener observando el archivo src/routes/cliente.ts, en la linea

app.route("/clientes").get(this.clienteController.getAllCliente)

Esto quiere decir, que la ruta seria:

localhost:4000/clientes

y el Método asociado: getAllCliente que se encuentra en el controlador de Cliente.

Y para ejecutar la petición, presionamos el botón al lado derecho SEND.

Mostrar un Registros - GET

Para crear el Método, vamos al archivo src/controllers/cliente.controller.ts y agregamos el código para crear el registro de clientes.

public async getOneCliente(req: Request, res:Response){
        const { id: idParam } = req.params

        try {
            const cliente:ClienteI | null = await Cliente.findOne(
                {
                    where: { 
                        id: idParam,
                    }
                }
            )
            if (cliente){
                res.status(200).json(cliente)
            } else return  res.status(300).json({msg: "El Cliente no existe"})

        } catch (error) {
            res.status(500).json({msg: "Error Internal"})
        }
    }

Ahora vamos a la Extension Thunder Client y seleccionamos la carpeta Cliente y en los puntos seguidos al lado derecho seleccionar New Request: Mostrar un Cliente

Luego seleccionamos el Request Mostrar un Cliente y la Ruta URL aun no la hemos definida, por cuanto debemos ingresar antes la ruta y asociarla la método crear cliente que acabamos de realizar. Esto seria en el archivo src/routes/cliente.ts

import { Request, Response, Application, Router } from "express";

import { ClienteController } from '../controllers/cliente.controller';

export class ClienteRoutes {
    public clienteController: ClienteController =  new ClienteController();

    public routes(app: Application): void {
        app.route("/clientes/test").get(this.clienteController.test)
        app.route("/clientes").get(this.clienteController.getAllCliente)
        app.route("/cliente/:id").get(this.clienteController.getOneCliente)
    }
}

La linea app.route("/cliente/:id").get(this.clienteController.getOneCliente), indica que con esta ruta la asociamos con el método getOneCliente. y utilizamos un parametro dentro de la ruta.

Para ejecutarlo entonces, modificamos el Request Mostrar un Cliente,

Verbo: GET

Ruta URL: localhost:4000/cliente/1 y luego SEND

Crear Registros - POST

Para crear el Método, vamos al archivo src/controllers/cliente.controller.ts y agregamos el código para crear el registro de clientes.

public async createCliente(req: Request, res:Response){
        const {
            nombreCliente,
            direccionCliente,
            telefonoCliente,
            correoCliente,
            passwordCliente
        } = req.body;

        try {
            let body:ClienteI = {
                nombreCliente,
                direccionCliente,
                telefonoCliente,
                correoCliente,
                passwordCliente
            } 

            const cliente:ClienteI = await Cliente.create({...body});
            res.status(200).json({cliente});

        } catch (error) {

        }

    }

Ahora vamos a la Extension Thunder Client y seleccionamos la carpeta Cliente y en los puntos seguidos al lado derecho seleccionar New Request: CrearCliente

Luego seleccionamos el Request CrearCliente y cambiamos el verbo Get por POST

y la Ruta URL aun no la hemos definida, por cuanto debemos ingresar antes la ruta y asociarla la método crear cliente que acabamos de realizar. Esto seria en el archivo src/routes/cliente.ts

import { Request, Response, Application, Router } from "express";

import { ClienteController } from '../controllers/cliente.controller';

export class ClienteRoutes {
    public clienteController: ClienteController =  new ClienteController();

    public routes(app: Application): void {
        app.route("/clientes/test").get(this.clienteController.test)
        app.route("/clientes").get(this.clienteController.getAllCliente)
        app.route("/cliente").post(this.clienteController.createCliente)
    }
}

La linea app.route("/cliente").post(this.clienteController.createCliente), indica que con esta ruta la asociamos con el método de crear clientes.

Para ejecutarlo entonces, modificamos el Request CrearCliente,

Verbo: POST

Ruta URL: localhost:4000/cliente

Luego nos dirigimos en el Menu >> Body >> Form-Encode

En donde adicionamos todos los campos o atributos del Modelo Cliente de la siguiente manera:

Una vez adicionados todos los campos del modelo, podemos presionar el botón SEND.

En la parte inferior de la extensión, nos avisa que se ha creado el registro correspondiente a la base de datos.

Como ya tenemos creada la petición MostarClientes, podemos corroborar y probar esta petición.

Actualizar Registros - PUT

Para crear el Método, vamos al archivo src/controllers/cliente.controller.ts y agregamos el código para crear el registro de clientes.

public async updateCliente(req: Request, res:Response){
        const { id:pk } = req.params;

        const {
            id,
            nombreCliente,
            direccionCliente,
            telefonoCliente,
            correoCliente,
            passwordCliente
        }= req.body

        try {
            let body:ClienteI = {
                nombreCliente,
                direccionCliente,
                telefonoCliente,
                correoCliente,
                passwordCliente
            } 

            const clienteExist: ClienteI | null = await Cliente.findByPk(pk);
            // const userExist: UsuarioI | null = await Usuario.findOne(
            //     {
            //         where: { id: pk}
            //     }
            // );

            if(!clienteExist) return res.status(500).json({msg:"El Cliente No existe"})
            await Cliente.update(
                body,{
                    where: {id:pk}
                }
            );  // select update from usuarios where id=pk



        } catch (error) {

        }
        const cliente: ClienteI | null = await Cliente.findByPk(pk);
        if(cliente) return res.status(200).json({cliente})

    }

Ahora vamos a la Extension Thunder Client y seleccionamos la carpeta Cliente y en los puntos seguidos al lado derecho seleccionar New Request: Actualizar Cliente

Luego seleccionamos el Request Actualizar Cliente y cambiamos el verbo Get por PUT

y la Ruta URL aun no la hemos definida, por cuanto debemos ingresar antes la ruta y asociarla la método crear cliente que acabamos de realizar. Esto seria en el archivo src/routes/cliente.ts

import { Request, Response, Application, Router } from "express";

import { ClienteController } from '../controllers/cliente.controller';

export class ClienteRoutes {
    public clienteController: ClienteController =  new ClienteController();

    public routes(app: Application): void {
        app.route("/clientes/test").get(this.clienteController.test)
        app.route("/clientes").get(this.clienteController.getAllCliente)
        app.route("/cliente/:id").get(this.clienteController.getOneCliente)
        app.route("/cliente").post(this.clienteController.createCliente)
        app.route("/cliente/:id").put(this.clienteController.updateCliente)
    }
}

La linea app.route("/cliente/:id").put(this.clienteController.updateCliente), indica que con esta ruta la asociamos con el método updateCliente, utilizando un parámetro dentro de la ruta.

Para ejecutarlo entonces, modificamos el Request Actualizar Cliente,

Verbo: PUT

Ruta URL: localhost:4000/cliente/1

Luego nos dirigimos en el Menu >> Body >> Form-Encode

En donde adicionamos los campos o atributos del Modelo Cliente que queremos modificar su valor o contenido de la siguiente manera:

Una vez adicionados los campos del modelo a modificar o editar, podemos presionar el botón SEND.

En la parte derecha mostrará los nuevos valores de los campos modificados de la base de datos.

Eliminar Registro - DELETE

Para crear el Método, vamos al archivo src/controllers/cliente.controller.ts y agregamos el código para crear el registro de clientes.

public async deleteCliente(req: Request, res:Response){
        const { id:pk } = req.params;


        try {
            const clienteExist: ClienteI | null = await Cliente.findByPk(pk);
            if(!clienteExist) return res.status(500).json({msg:"El Cliente No existe"})
            await Cliente.destroy(
                {
                    where: {id: pk}
                }
            )
            res.status(200).json({msg:"Cliente Eliminado"})
        } catch (error) {

        }

    } 

Ahora vamos a la Extension Thunder Client y seleccionamos la carpeta Cliente y en los puntos seguidos al lado derecho seleccionar New Request: Eliminar Cliente

Luego seleccionamos el Request Eliminar Cliente y cambiamos el verbo Get por DELETE

y la Ruta URL aun no la hemos definida, por cuanto debemos ingresar antes la ruta y asociarla la método crear cliente que acabamos de realizar. Esto seria en el archivo src/routes/cliente.ts

import { Request, Response, Application, Router } from "express";

import { ClienteController } from '../controllers/cliente.controller';

export class ClienteRoutes {
    public clienteController: ClienteController =  new ClienteController();

    public routes(app: Application): void {
        app.route("/clientes/test").get(this.clienteController.test)
        app.route("/clientes").get(this.clienteController.getAllCliente)
        app.route("/cliente/:id").get(this.clienteController.getOneCliente)
        app.route("/cliente").post(this.clienteController.createCliente)
        app.route("/cliente/:id").put(this.clienteController.updateCliente)
        app.route("/cliente/:id").delete(this.clienteController.deleteCliente)
    }
}

La linea app.route("/cliente/:id").delete(this.clienteController.deleteCliente), indica que con esta ruta la asociamos con el método deleteCliente, utilizando un parámetro dentro de la ruta.

Para ejecutarlo entonces, modificamos el Request Eliminar Cliente,

Verbo: PUT

Ruta URL: localhost:4000/cliente/1

Luego, podemos presionar el botón SEND.