Bienvenido al Panel de Gestión de Parqueo de la Facultad de Ingeniería en la Universidad San Carlos de Guatemala. Esta aplicación permite monitorear y gestionar el espacio de parqueo de manera eficiente, con actualizaciones en tiempo real, análisis detallados y una interfaz fácil de usar.
- Monitoreo en Tiempo Real: Recibe actualizaciones en vivo sobre los espacios de parqueo disponibles y ocupados.
- Estadísticas Detalladas: Realiza un seguimiento de métricas clave como el tiempo promedio de permanencia, tasas de ocupación y más.
- Visuales Interactivas: Gráficas y tablas que muestran datos y tendencias del parqueo a lo largo del día.
- Alertas y Notificaciones: Recibe notificaciones cuando el parqueo está lleno o cuando se predice un incremento en las salidas.
- Diseño Responsivo: Optimizado para dispositivos de escritorio y móviles, asegurando una experiencia de usuario fluida en cualquier dispositivo.
Este proyecto está construido utilizando las siguientes tecnologías:
- React: Una biblioteca de JavaScript para construir interfaces de usuario.
- Tailwind CSS: Un framework CSS basado en utilidades para crear diseños altamente personalizables.
- React Icons: Una colección de iconos populares para proyectos en React.
Sigue estos pasos para ejecutar el proyecto en tu máquina local.
- Node.js y npm: Asegúrate de tener Node.js instalado en tu máquina. Puedes descargarlo aquí.
-
Clona este repositorio:
git clone https://github.com/Fercho9134/Proyecto-EMI-IO2-.git
-
Navega al directorio del proyecto:
cd parqueo-frontend -
Instala las dependencias:
npm install
-
Inicia el servidor de desarrollo:
npm start
-
Abre tu navegador y dirígete a:
http://localhost:3000
El Panel de Gestión de Parqueo consta de varias secciones clave:
Muestra datos en tiempo real sobre la ocupación del parqueo, incluyendo:
- Espacios disponibles vs. ocupados.
Representaciones visuales de entradas y salidas a lo largo del día, actualizadas cada hora entre las 5 AM y 10 PM.
Desglose de la ocupación actual del parqueo en un formato de gráfica de pastel, proporcionando una visión rápida.
Una tabla detallada con todas las entradas y salidas de vehículos, incluyendo marcas de tiempo y tipos de vehículos.
Este proyecto incluye un análisis obligatorio del modelo de colas MM1K, utilizando datos de entradas y salidas en tiempo real para calcular métricas clave como:
- Longitud de la cola.
- Tiempo de espera.
- Tiempo de servicio.
El modelo usa una tasa de servicio constante y tasas de llegada en tiempo real obtenidas de los datos del parqueo.
Este proyecto interactúa con tres endpoints principales:
- Resumen del Parqueo: Proporciona un resumen de los espacios disponibles y ocupados.
- Entradas: Rastrea las entradas de vehículos en el parqueo.
- Salidas: Monitorea las salidas de vehículos del parqueo.
Cada endpoint proporciona los datos necesarios para actualizaciones en tiempo real y análisis estadísticos precisos.
La interfaz está diseñada utilizando Tailwind CSS para asegurar un diseño responsivo y visualmente atractivo. El diseño del dashboard se adapta a diferentes tamaños de pantalla, haciéndolo utilizable tanto en pantallas grandes como en dispositivos móviles.
Aquí hay un ejemplo de cómo se usa Tailwind:
<div class="bg-blue-500 text-white p-4 rounded-lg shadow-md">
Espacios de Parqueo Disponibles: 42
</div>