Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/waldohidalgo/desafio_5_modulo_6_desafio_latam
Código solución al desafío 5 𝗕𝗹𝗮𝗰𝗸 𝗮𝗻𝗱 𝗪𝗵𝗶𝘁𝗲 del módulo 6 Desarrollo de aplicaciones web con Node y Express
https://github.com/waldohidalgo/desafio_5_modulo_6_desafio_latam
bootstrap5 desafiolatam express express-handlebars expressjs frontend jimp jquery uuid uuidv4
Last synced: 25 days ago
JSON representation
Código solución al desafío 5 𝗕𝗹𝗮𝗰𝗸 𝗮𝗻𝗱 𝗪𝗵𝗶𝘁𝗲 del módulo 6 Desarrollo de aplicaciones web con Node y Express
- Host: GitHub
- URL: https://github.com/waldohidalgo/desafio_5_modulo_6_desafio_latam
- Owner: waldohidalgo
- Created: 2024-03-27T14:47:22.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-03-28T16:05:42.000Z (9 months ago)
- Last Synced: 2024-03-29T16:13:15.689Z (9 months ago)
- Topics: bootstrap5, desafiolatam, express, express-handlebars, expressjs, frontend, jimp, jquery, uuid, uuidv4
- Language: JavaScript
- Homepage: https://desafio-5-modulo-6-desafio-latam.onrender.com/
- Size: 233 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Desafío 5 Black and White
Este repositorio contiene el código solución al desafío número 4 **Black and White** del módulo **Desarrollo de aplicaciones web con Node y Express** de la beca **Desarrollo de aplicaciones Full Stack Javascript Trainee** dictada por Desafío Latam.
## Requisitos
Los requisitos del proyecto son los siguientes:
## Proyecto Finalizado: Diagrama de Flujo
### 1. Vista Inicial
### 2. Servidor Procesando
### 3. Imagen Procesada
### 4. Error de procesamiento en el servidor
### 5. Error de URL inválida
## Librerias utilizadas
| Tecnologías Utilizadas |
| ---------------------- |
| Express |
| Express-handlebars |
| Bootstrap |
| JQuery |
| Jimp |
| UUID |
## Soluciones
### 1.El servidor debe disponibilizar una ruta raíz que devuelva un HTML con el formulario para el ingreso de la URL de la imagen a tratar. (3 Puntos)
La ruta que disponibiliza la vista llamada **inicio** que contiene el formulario para ingresar la URL de una página la he creado usando el siguiente código:
```js
router.get("/", (req, res) => {
res.render("inicio");
});
```
La vista **inicio** contiene el siguiente código handlebars:
```hbs
Desafío Black and White📷
👇Ingresa la URL de una imagen
URL
Subir
Imagen al Servidor
Limpiar
```
### 2.Los estilos de este HTML deben ser definidos por un archivo CSS alojado en el servidor. (2 Puntos)
Estilizo la vista anterior usando bootstrap y un archivo css creado en la carpeta public las cuales disponibilizo del lado del cliente a partir del siguiente código:
```js
router.use("/public", express.static(path.join(__dirname, "..", "public")));
router.use(
"/bootstrap_css",
express.static(
path.join(__dirname, "..", "node_modules", "bootstrap", "dist", "css"),
),
);
```
### 3.El formulario debe redirigir a otra ruta del servidor que deberá procesar la imagen tomada por la URL enviada del formulario con el paquete Jimp. La imagen debe ser procesada en escala de grises y redimensionada a unos 350px de ancho. (3 Puntos)
La otra ruta del servidor que maneja la data enviada del formulario es la siguiente:
```js
router.get("/procesa_imagen", procesaImagen);
```
Para lo cual utilizo la función **procesaImagen** siguiente:
```js
async function procesaImagen(req, res) {
const { imagen: imagenURL } = req.query;
if (validarURL(imagenURL)) {
try {
const imagenJimp = await Jimp.read(imagenURL);
const nombreImagen = `img${generarID()}.jpg`;
const rutaImagenServer = path.join(
__dirname,
"..",
"images",
nombreImagen,
);
const objeto = await imagenJimp
.resize(350, Jimp.AUTO)
.grayscale()
.writeAsync(rutaImagenServer);
res.status(200).json({ imagen: nombreImagen });
} catch (err) {
res.status(500).json({ error: err.message });
}
} else {
res.status(400).send("URL inválida");
}
}
```
En el lado del cliente manipulo las respuestas enviadas por el servidor:
```js
fetch(url)
.then((response) => response.json())
.catch(function () {
window.location.href = "/muestra_imagen?imagen=error_url";
})
.then(function (data) {
if (data.error) {
window.location.href =
"/muestra_imagen?imagen=error_servidor&error=" + data.error;
} else {
window.location.href = "/muestra_imagen?imagen=" + data.imagen;
botonSubmit.attr("disabled", false);
botonSubmit.html("Subir Imagen al Servidor");
loader.hide();
}
});
```
### 4.La imagen alterada debe ser almacenada con un nombre incluya una porción de un UUID y con extensión “jpg”, por ejemplo: 3dcb6d.jpeg. (2 Puntos)
Para generar el ID único utilizo la siguiente función:
```js
function generarID() {
return uuidv4().slice(0, 6);
}
```
Y creo la ruta de la imagen utilizando dicha función:
```js
const nombreImagen = `img${generarID()}.jpg`;
```
## Funcionalidad Extra
A los 5 minutos elimino todos los archivos creados en el servidor en la carpeta **images** la cual es la que almacena los archivos creados usando Jimp:
```js
function eliminarArchivosDeCarpeta() {
const carpeta = path.join(__dirname, "..", "images");
fs.readdir(carpeta, (err, archivos) => {
if (err) {
console.error("Error al leer el directorio:", err);
return;
}
archivos.forEach((archivo) => {
const rutaArchivo = path.join(carpeta, archivo);
fs.unlink(rutaArchivo, (err) => {
if (err) {
console.error("Error al eliminar el archivo:", err);
} else {
console.log("Archivo eliminado:", rutaArchivo);
}
});
});
});
}
setInterval(eliminarArchivosDeCarpeta, 5 * 60 * 1000);
```