BACKEND - 🐱 MUSEO VIRTUAL DE MEMES "MeCat"

Descripción

Este proyecto ha sido desarrollada para "MeCat" el museo virtual dedicado a los memes de gatos más divertidos y virales, con el objetivo de centralizar y gestionar la información de toda su colección de memes felinos en una base de datos relacional. La API expone una serie de endpoints que permiten realizar operaciones CRUD (Create, Read, Update, Delete) sobre las obras, facilitando así la integración con las aplicaciones front-end de la red, desarrolladas en React.

Empezando 🚀

Estas instrucciones te permitirán obtener una copia del proyecto en funcionamiento en tu máquina local para propósitos de desarrollo y pruebas.

Requisitos Previos 📋

• Node.js instalado en tu máquina.

Instalación 🔧

Para comenzar con el proyecto, sigue los siguientes pasos:

1. Clonar el repositorio:

git clone https://github.com/Yedpt/backCatArte.git
cd backCatArte

2. Instalar las dependencias:

npm install

Instalaciones

Para comenzar, debes instalar las siguientes dependencias junto con sus tipos en un proyecto de TypeScript:

Instalación de dependencias principales

npm install express sequelize mysql2 dotenv

Instalación de TypeScript y sus tipos

npm install --save-dev typescript @types/node @types/express @types/dotenv

Instalación de express-validator

npm install express-validator

Instalación de jest y supertest para pruebas

npm install --save-dev jest supertest @types/jest @types/supertest

Imágenes de la Web 🌅

A continuación se presenta imagenes del proyecto en funcionamiento:...

También te tenemos una documentacion breve sobre el Museo Vitual meCat y las funciones del postman en documentacion y en video para que puedas ver la presentacion de manera mas visual:

• Documentacion-Postman👈📖

• Video-Postman👈📹

• Museo Virtual-General👈🏛️

💻 Tecnologías empleadas

: Entorno de ejecución y framework web para el desarrollo del backend.

: Lenguaje de consulta estructurado para la gestión de la base de datos.

: ORM (Object-Relational Mapper) para interactuar con la base de datos de forma más intuitiva.

: Middleware para validar los datos de entrada a los endpoints.

: Framework de testing y herramienta para realizar pruebas unitarias y de integración.

: Herramienta para documentar y probar los endpoints de la API.

🛠️ Arquitectura

La aplicación sigue una arquitectura MVC (Modelo-Vista-Controlador):

Modelo: Define la estructura de los datos y las interacciones con la base de datos (Sequelize).

Vista: Los endpoints de la API que exponen los datos y las funcionalidades (Express).

Controlador: La lógica de negocio que conecta el modelo y la vista.

Estructura de Carpetas

├── /src │ ├── /config │ │ └── database.ts -- Configuración de Sequelize

│ │

├── /src │ ├── /config │ │ └── database.ts -- Configuración de Sequelize

│ │

│ ├── /controllers │ │ └── memeController.ts -- Controlador para la lógica de memes

│ │

│ ├── /models │ │ └── Meme.ts -- Modelo meme de sequilize

│ │

│ ├── /routes │ │ └── memeRoutes.ts -- Rutas relacionadas a memes

│ │

│ ├── /middlewares │ │ └── validation.ts -- Validaciones de Express Validator

│ │

│ ├── /tests │ │ └── meme.test.ts -- Pruebas para los endpoints de memes

Testing

Después que instalas MySQL Workbench creas una database con el siguiente comando

CREATE DATABASE nombre_de_tu_base de datos;

Luego colocate en la linea y haz un Ctrl + Enter para verificar que se cree de manera correcta

Después pones el siguiente comando para crear una tabla

CREATE TABLE nombre_de_la_tabla (
    id INT AUTO_INCREMENT PRIMARY KEY,
    columna1 VARCHAR(255) NOT NULL,
    columna2 INT,
    columna3 DATE,);

Eso es para hacer las columnas y especificarle su tipo de dato, y haces el mismo comando sobre la linea Ctrl +Enter para verificar

luego vas al proyecto y en tu archivo .env pones lo siguiente

DB_PASSWORD = tu_ contraseña_de_MySQL
DB_HOST=localhost
DB_USER= tu_usuario
DB_DEV_NAME= nombre_de_tu_base de dtos
DB_PORT=3306
PORT=3000

Iniciar el Test

En la consola ejecutas el siguiente comando

npm run test

También se ha añadido una carperta de Interfaces donde se crea un archivo interfaces con el siguiente comando para usarlo en el Model

export interface CatMeme {
    id?: number
    name: string;
    description: string;
    category: string;
    image: string;
    date?: Date | string;
    likes: number;
  }

En las validaciones hacemos un paso sencillo de la siguiente forma

y por si te lo preguntas

express-validator es una biblioteca que facilita la validación y sanitización de los datos en las peticiones HTTP. Sirve para asegurarse de que los datos que llegan a tu API cumplan con ciertos requisitos (formato, longitud, existencia, etc.). Esto es útil para proteger la aplicación de datos incorrectos, malintencionados o incompletos.

Creamos una carpeta para la validacion y haremos un archivo ej

nombre_de_tu_archivoValidator.ts

para continuar pegas el siguiente código en tu archivo y modificas segun tus preferencias

import { check, param } from 'express-validator';

export const validateCreateMeme = [
  check('name').notEmpty().withMessage('El nombre es obligatorio'),
  check('description').notEmpty().withMessage('La descripción es obligatoria'),
  check('category').notEmpty().withMessage('La categoría es obligatoria'),
  check('image').matches(/^(https?:\/\/|\/)/).withMessage('La imagen debe ser una URL válida o una ruta local'),
  check('date').optional().isISO8601().withMessage('La fecha debe ser una fecha válida'),
  check('likes').isInt({ min: 0 }).withMessage('Los likes deben ser un número entero positivo'),
];

export const validateUpdateMeme = [
  param('id').isInt().withMessage('El ID debe ser un número entero'),
  check('name').optional().notEmpty().withMessage('El nombre es obligatorio'),
  check('description').optional().notEmpty().withMessage('La descripción es obligatoria'),
  check('category').optional().notEmpty().withMessage('La categoría es obligatoria'),
  check('image').optional().matches(/^(https?:\/\/|\/)/).withMessage('La imagen debe ser una URL válida o una ruta local'),
  check('date').optional().isISO8601().withMessage('La fecha debe ser una fecha válida'),
  check('likes').optional().isInt({ min: 0 }).withMessage('Los likes deben ser un número entero positivo'),
];

export const validateDeleteMeme = [
  param('id').isInt().withMessage('El ID debe ser un número entero'),
];

Y Creamos otro archivo para manejar la validacion

import { Request, Response, NextFunction } from 'express';
import { validationResult } from 'express-validator';

export const validationHandler = (req: Request, res: Response, next: NextFunction) => {
  const errors = validationResult(req);

  if (!errors.isEmpty()) {
    return res.status(400).json({ errors: errors.array()
    });
  }
  next();
};

Pasamos a la sincronizacion del Frontend y el Backend

El Front se une enlazando el servidor del backend al front atraves de una variable en donde se guarda el localhost , más las peticiones que recibe el controlador del front y trae la información de la Base de Datos y manda esa respuesta al Front.

Donde por medio de la URL del front donde se guarda el localhost del backend.

const BaseUrl = "http://localhost:3000/api/memes"; 

🔮 Mirando al futuro

Todo proyecto requiere de mejoras, se tiene identificada la ... si estás interesado en contribuir a esta función, te invito a clonar el repositorio y crear una rama para tus cambios. ¡Tu ayuda es muy valorada!

Autores ✒️

Ana Maria Garcia -

Yeder Pimentel -

Omar Lengua -

Enmanuel Feliciano -

Wilder Aguilar -