DP_IA - Plataforma de Notebooks Interactivos

📋 Descripción

DP_IA es una plataforma web ligera inspirada en Google Colab/LMNotebook que permite crear, ejecutar y compartir notebooks interactivos. Diseñada para ser más simple y fácil de usar que las alternativas más pesadas, mantiene las funcionalidades esenciales para análisis de datos, programación interactiva y documentación.

✨ Características Principales

• 🔐 Autenticación JWT: Sistema seguro de inicio de sesión con tokens
• 📝 Interface Intuitiva: Dashboard limpio y fácil de usar
• ⚡ Arquitectura Moderna: Frontend React + Backend Flask
• 🛡️ Rutas Protegidas: Control de acceso basado en autenticación
• 📱 Responsive Design: Compatible con dispositivos móviles
• 🚀 Desarrollo Rápido: Hot reload para desarrollo ágil

🏗️ Arquitectura

DP_IA/
├── backend/                 # API Flask
│   ├── entonroVirtual/     # Entorno virtual Python
│   └── src/
│       └── app.py          # Aplicación principal
└── frontend/               # Aplicación React
    └── DP_IA/
        ├── src/
        │   ├── components/ # Componentes reutilizables
        │   ├── pages/      # Páginas principales
        │   └── assets/     # Recursos estáticos
        └── public/         # Archivos públicos

🚀 Instalación y Configuración

Prerrequisitos

• Python 3.8+ (para backend)
• Node.js 16+ (para frontend)
• npm o yarn (gestor de paquetes)

Backend (Flask API)

1. Navegar al directorio del backend:

   cd backend

2. Activar el entorno virtual:

   # Windows
   .\entonroVirtual\Scripts\activate
   
   # macOS/Linux
   source entonroVirtual/bin/activate

3. Instalar dependencias (si no están instaladas):

   pip install flask PyJWT

4. Ejecutar la aplicación:

   cd src
   python app.py

   El servidor estará disponible en: http://localhost:5000

Frontend (React App)

1. Navegar al directorio del frontend:

   cd frontend/DP_IA

2. Instalar dependencias:

   npm install

3. Ejecutar en modo desarrollo:

   npm run dev

   La aplicación estará disponible en: http://localhost:5173

🔑 Credenciales de Prueba

Para acceder a la plataforma, utiliza las siguientes credenciales de desarrollo:

• Usuario: admin
• Contraseña: 1234

⚠️ Nota de Seguridad: Estas son credenciales de prueba. En producción, implementa un sistema de autenticación robusto con base de datos y encriptación adecuada.

📁 Estructura del Proyecto

Backend (Flask)

• app.py: Aplicación principal con rutas de autenticación y API
• Endpoints principales:
  • POST /api/login - Inicio de sesión
  • POST /api/validate-token - Validación de tokens
  • GET /api/data - Datos protegidos (ejemplo)

Frontend (React)

• pages/:
  • Dashboard/ - Panel principal de la aplicación
  • Login/ - Página de inicio de sesión
  • Error/ - Páginas de error (404, 403)
• components/:
  • ProtectedRoute.jsx - Componente para rutas protegidas

🔧 Scripts Disponibles

Frontend

npm run dev      # Servidor de desarrollo
npm run build    # Build para producción
npm run lint     # Linting del código
npm run preview  # Vista previa del build

Backend

python app.py    # Ejecutar servidor Flask

🌟 Funcionalidades Planificadas

• Editor de Notebooks: Crear y editar células de código y markdown
• Ejecución de Código: Soporte para Python, JavaScript y más
• Visualizaciones: Gráficos interactivos y tablas
• Colaboración: Compartir notebooks entre usuarios
• Exportación: Formatos PDF, HTML, y notebooks estándar
• Base de Datos: Persistencia de notebooks y usuarios
• Themes: Modo oscuro y personalización de la interfaz

🤝 Contribución

1. Fork el proyecto
2. Crear una rama feature (git checkout -b feature/nueva-funcionalidad)
3. Commit los cambios (git commit -m 'Agregar nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Abrir un Pull Request

📄 Tecnologías Utilizadas

Backend

• Flask 3.1.2 - Framework web minimalista
• PyJWT 2.10.1 - Manejo de tokens JWT
• Python 3.8+ - Lenguaje principal

Frontend

• React 19.2.0 - Biblioteca de UI
• React Router DOM 7.10.0 - Enrutamiento
• Bootstrap 5.3.8 - Framework CSS
• Vite 7.2.4 - Build tool y servidor de desarrollo

📝 Notas de Desarrollo

• El token JWT expira en 30 minutos
• El frontend usa React Router para la navegación
• Las rutas están protegidas con el componente ProtectedRoute
• Se utiliza Bootstrap para el diseño responsive

🚨 Consideraciones de Seguridad

• Implementar HTTPS en producción
• Usar variables de entorno para la clave secreta
• Validación de entrada en todos los endpoints
• Rate limiting para prevenir ataques
• Sanitización de datos de usuario

📞 Contacto

Desarrollador: David Riquelme Email: [david.riquelme.sb@gmail.com]
Proyecto: Testing Municipalidad

---

Este proyecto está en desarrollo activo. Las contribuciones y sugerencias son bienvenidas.