Este repositorio contiene el código fuente de la aplicación web desarrollada para el Black and White, realizado como parte de un ejercicio de validación de conocimientos de procesamiento de imágenes con JIMP y la descarga de aplicaciones.
La empresa Black and White Spa está promocionando una campaña para las redes sociales en donde quieren ofrecer un sitio web que permita escribir la URL de una imagen de internet y que ésta sea procesada por el servidor para ser devuelta en blanco y negro.
Deberás crear un servidor que disponibilice una ruta raíz que devuelva un HTML con el formulario para ingresar la URL de la imagen con estilos CSS de un documento interno en los archivos del servidor. El formulario debe redirigir a otra ruta del servidor que procese la imagen y la devuelva en blanco y negro. Como muestran las siguientes imágenes:
Siguiendo esta gráfica:
- 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)
- Los estilos de este HTML deben ser definidos por un archivo CSS alojado en el servidor. (2 Puntos)
- 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 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)
El proyecto está estructurado de la siguiente manera:
La solución se ve de la siguiente manera:
El proyecto utiliza las siguientes dependencias principales:
- Express: Para la creación del servidor web.
- Axios
- Express-handlebars
- UUID
- JIMP
- Bootstrap
Para ejecutar el proyecto localmente, asegúrate de tener instalado Node.js y npm. Luego, sigue estos pasos:
- Clona este repositorio:
git clone <URL_del_repositorio>
- Accede al directorio del proyecto:
cd <nombre_del_directorio>
- Instala las dependencias del proyecto:
npm install
- Inicia el servidor local:
npm run dev
- Abre tu navegador web y accede a
http://localhost:3000
para ver la aplicación en funcionamiento.
- Ma Cristina Contreras C.
- Camila Serantoni R.