Skip to content

Home

Jump to bottom
Jorge David Bustamante Pino edited this page May 20, 2025 · 30 revisions

Wiki de SISINFO

Plataforma de Gestión Académica del Departamento de Ingeniería de Sistemas

🌟 Bienvenido/a a la Wiki Oficial de SISINFO
Este repositorio centraliza toda la documentación técnica y funcional del sistema de gestión académica.

🗂️ Tabla de Contenidos

📖 Resumen del Proyecto

SISINFO es una aplicación web moderna para la gestión académica en el Departamento de Ingeniería de Sistemas. Permite a usuarios administrativos y académicos realizar gestiones como:

  • Aplicaciones a tesis de grado
  • Gestión de asistencias graduadas
  • Publicación de ofertas de salones
  • Visualización y administración de proyectos

💻 Tecnologías Principales

  • Frontend: Next.js, shadcn, Tailwind CSS, Zustand, TanStack Query
  • Backend: NestJS, TypeORM, Docker
  • Monorepo: Turborepo

🎯 Requisitos y Alcance

Funcionales

  • CRUD de proyectos, tesis, usuarios y aplicaciones.
  • Visualización de asistencias y postulación.
  • Sistema de roles: administrador, coordinador, estudiante, profesor y estudiante de maestría.

No funcionales

  • Seguridad en endpoints y rutas protegidas.
  • Accesibilidad mínima AA.
  • Alta cohesión y bajo acoplamiento en módulos.

Alcance

  • Uso interno académico.
  • Posibilidad de expansión a otros departamentos.

🎨 UI/UX y Diseño Visual

Diseño de la Interfaz de Usuario (UI)

La interfaz de usuario de SISINFO ha sido diseñada para ser intuitiva, accesible y eficiente. Se prioriza una experiencia de usuario fluida, que permita realizar las tareas de forma rápida y sencilla.

Elementos clave de diseño:

  • Prototipos Figma: Visualización interactiva de las interfaces, permitiendo pruebas de usabilidad.

Diseño de Experiencia de Usuario (UX)

El diseño de la experiencia de usuario de SISINFO se basa en garantizar la eficiencia, claridad y facilidad de uso. Las decisiones de diseño se toman con base en los siguientes principios:

  • Claridad: La navegación y las funcionalidades son claras y directas.
  • Accesibilidad: El sistema es accesible para personas con discapacidad, asegurando un alto nivel de contraste y opciones de navegación por teclado.
  • Consistencia: Las interacciones, colores y elementos gráficos siguen patrones coherentes en todas las pantallas.
  • Feedback: El sistema proporciona retroalimentación inmediata sobre las acciones del usuario, como confirmaciones de acciones exitosas o errores.

Elementos de UX:

  • Manejo de estados: Uso de Zustand para manejar el estado global de la aplicación y proporcionar una experiencia fluida entre las interacciones del usuario.
  • Cargar/mostrar datos dinámicamente: TanStack Query permite que los datos se gestionen y sincronicen de manera eficiente con el servidor, sin recargar la página.

Secciones de UI/UX en progreso:

Elemento Enlace Estado
Historias de Usuario 📝 Historias de Usuario En Progreso
Prototipos Figma 🔗 Figma HECHO

Prototipos Interactivos

Los prototipos interactivos permiten ver cómo será la experiencia del usuario al interactuar con el sistema. Los prototipos fueron creados en Figma para reflejar con exactitud la estructura de las interfaces, navegación y comportamiento de la aplicación.

Ver prototipos en Figma

🔐 Autenticación y Roles

Autenticación

La autenticación se maneja mediante JWT (JSON Web Tokens). Los usuarios envían sus credenciales al backend, que genera un token JWT al validar sus datos. Este token se incluye en las solicitudes posteriores para autenticar al usuario.

Flujo de autenticación:

  1. El usuario inicia sesión con sus credenciales.
  2. El backend valida las credenciales.
  3. Si son correctas, se genera un JWT que se envía al frontend.
  4. El frontend almacena el JWT y lo incluye en las solicitudes posteriores.

Roles y Autorización

Cada usuario tiene un rol asignado que determina qué acciones pueden realizar en el sistema. Los roles disponibles son:

  • Administrador: Acceso completo a todas las funcionalidades.
  • Coordinador: Acceso limitado a ciertas funcionalidades.
  • Estudiante: Solo puede acceder a sus propios datos.
  • Profesor: Puede gestionar tesis y supervisar proyectos.

Flujo de autorización:

  1. El backend valida el JWT para verificar la identidad del usuario.
  2. Luego, verifica el rol del usuario y le concede acceso solo a las funcionalidades permitidas para su rol.

🧱 Arquitectura

Sección Descripción Estado
🧩 Diagrama UML Modelo UML HECHO
🏗️ Arquitectura del Sistema Diagrama de componentes 🚧 En Progreso

⚙️ Instalación y Despliegue

Sigue estos pasos para configurar el proyecto en tu entorno local.

Prerrequisitos

Asegúrate de tener instalado lo siguiente:

  • Node.js (Versión ≥ 16)
  • npm o yarn (Gestores de paquetes)
  • Git (Opcional, para clonar el repositorio)
  • Docker (Para desplegar la base de datos)

Pasos para la instalación

  1. Clona el repositorio (o descarga el código fuente):

    git clone https://github.com/TheSoftwareDesignLab/SISINFO

  2. Navega al directorio del proyecto:

    cd SISINFO

  3. Instala las dependencias:

    npm install
# o
yarn install

  4. Navega a la carpeta config:

    cd config

  5. Ingresa el archivo .env basado en el archivo .env.template y configura las variables de entorno necesarias.

  6. Despliega la base de datos en un contenedor de Docker:

    docker-compose up -d

  7. Navega a la carpeta principal:

    cd ..

  8. Inicia el servidor de desarrollo:

    npm run dev

  9. Abre tu navegador y visita el enlace a continuación para cargar los datos de prueba (generados de forma aleatoria).

  1. Visita http://localhost:3000 para ver la aplicación en funcionamiento.

  2. Ingresa con alguno de los usuarios generados. Asimismo, puedes ingresar con las siguientes credenciales de prueba:

Si deseas liberar los puertos 3000 y 8000, puedes usar el comando npm run kill.

💻 Documentación Técnica

Sección Descripción Estado
🧩 Organización del monorepo y carpetas del front Documentación de carpetas y entidades HECHO
📐 Backend Documentación de carpetas y end-points del back-end HECHO

📚 Bibliografía y Referencias

  1. Salazar, P. H. (2011). La importancia de la satisfacción del usuario. Documentación de las Ciencias de la Información, 34, 349.
  2. Estrada, G. C. T., Montero, J. M. C., Hernández, Y. C. U., & Herrera, J. J. R. (2019). Innovación tecnológica: Reflexiones teóricas. Revista Venezolana de Gerencia, 24(85).
  3. Next.js Documentation. (n.d.). Next.js. https://nextjs.org/docs
  4. NestJS Documentation. (n.d.). NestJS. https://docs.nestjs.com/
  5. TypeORM Documentation. (n.d.). TypeORM. https://typeorm.io/
  6. Docker Documentation. (n.d.). Docker. https://docs.docker.com/
  7. JWT.io. (n.d.). JWT - Introduction. https://jwt.io/introduction/
  8. PostgreSQL Documentation. (n.d.). PostgreSQL. https://www.postgresql.org/docs/
  9. Tailwind CSS Documentation. (n.d.). Tailwind CSS. https://tailwindcss.com/docs
  10. TanStack Query Documentation. (n.d.). TanStack Query. https://tanstack.com/query/v4
  11. Zustand Documentation. (n.d.). Zustand. https://github.com/pmndrs/zustand
  12. Figma Documentation. (n.d.). Figma. https://www.figma.com/resources/learn/
  13. Turborepo Documentation. (n.d.). Turborepo. https://turborepo.org/docs
  14. Compodoc Documentation. (n.d.). Compodoc. https://compodoc.app/

Banner

Clone this wiki locally