178 lines
4.9 KiB
Markdown
178 lines
4.9 KiB
Markdown
# Cronogramas PrimeNG Application
|
|
|
|
Este proyecto es una aplicación Angular 19 utilizando PrimeNG para la gestión de cronogramas.
|
|
|
|
## Instalación
|
|
|
|
### Requisitos Previos
|
|
|
|
- Node.js (versión 20.x recomendada)
|
|
- npm (incluido con Node.js)
|
|
- Git
|
|
|
|
### Pasos de Instalación
|
|
|
|
1. **Clonar el Repositorio**
|
|
|
|
```bash
|
|
git clone <URL-del-repositorio>
|
|
cd cronogramas-primeng
|
|
```
|
|
|
|
2. **Instalar Dependencias**
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Iniciar el Servidor de Desarrollo**
|
|
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
La aplicación estará disponible en `http://localhost:4200/`
|
|
|
|
### Dependencias Principales
|
|
|
|
El proyecto utiliza las siguientes bibliotecas clave:
|
|
|
|
- **Angular 19**: Framework base
|
|
```bash
|
|
npm install @angular/core @angular/common @angular/forms @angular/router @angular/compiler
|
|
```
|
|
|
|
- **PrimeNG 19.1.0**: Biblioteca de componentes UI
|
|
```bash
|
|
npm install primeng @primeng/themes
|
|
```
|
|
|
|
- **PrimeFlex 4.0.0**: Sistema de CSS flexible
|
|
```bash
|
|
npm install primeflex
|
|
```
|
|
|
|
- **PrimeIcons 7.0.0**: Conjunto de iconos
|
|
```bash
|
|
npm install primeicons
|
|
```
|
|
|
|
- **ExcelJS 4.4.0**: Para exportación a Excel
|
|
```bash
|
|
npm install exceljs
|
|
```
|
|
|
|
- **File-Saver 2.0.5**: Para guardar archivos en el cliente
|
|
```bash
|
|
npm install file-saver @types/file-saver
|
|
```
|
|
|
|
## Estructura del Proyecto
|
|
|
|
```
|
|
/cronogramas-primeng/
|
|
├── src/ # Código fuente
|
|
│ ├── app/ # Componentes Angular
|
|
│ │ ├── components/ # Componentes compartidos
|
|
│ │ ├── guards/ # Guardias de ruta
|
|
│ │ ├── interceptors/ # Interceptores HTTP
|
|
│ │ ├── models/ # Interfaces de datos
|
|
│ │ ├── pages/ # Componentes de página
|
|
│ │ ├── services/ # Servicios
|
|
│ │ └── utils/ # Utilidades
|
|
│ ├── index.html # HTML principal
|
|
│ ├── main.ts # Punto de entrada
|
|
│ └── styles.scss # Estilos globales
|
|
├── public/ # Recursos estáticos
|
|
├── angular.json # Configuración de Angular
|
|
├── package.json # Dependencias y scripts
|
|
├── tsconfig.json # Configuración TypeScript
|
|
├── Dockerfile # Configuración de Docker
|
|
└── docker-compose.yml # Configuración Docker Compose
|
|
```
|
|
|
|
## Estructura de Interfaces
|
|
|
|
Se han creado las siguientes interfaces para los modelos de datos:
|
|
|
|
- **Cronograma**: Modelo base para todos los cronogramas
|
|
- **Empresa**: Modelo para empresas
|
|
- **TipoCarga**: Modelo para tipos de carga
|
|
- **EstadoAprobacion**: Modelo para estados de aprobación
|
|
- **ActualizacionPd**: Modelo para actualizaciones de PD
|
|
- **AjustePd**: Modelo para ajustes de PD
|
|
- **UnidadInformacion**: Modelo para unidades de información
|
|
|
|
## Servicios
|
|
|
|
Los servicios implementados permiten conectarse a un backend mediante HTTP:
|
|
|
|
- **CronogramaService**: CRUD para cronogramas
|
|
- **EmpresaService**: CRUD para empresas
|
|
- **ActualizacionPdService**: CRUD para actualizaciones de PD
|
|
- **AjustePdService**: CRUD para ajustes de PD
|
|
- **UnidadInformacionService**: CRUD para unidades de información
|
|
- **TipoCargaService**: Consulta de tipos de carga
|
|
- **EstadoAprobacionService**: Consulta de estados de aprobación
|
|
- **AuthService**: Autenticación y gestión de tokens
|
|
|
|
## Seguridad
|
|
|
|
La aplicación incluye:
|
|
|
|
- Interceptor HTTP para añadir tokens de autenticación
|
|
- Guard para proteger rutas
|
|
- Login y sistema de autenticación
|
|
|
|
## Comandos Disponibles
|
|
|
|
| Comando | Descripción |
|
|
|---------|-------------|
|
|
| `npm start` | Inicia servidor de desarrollo |
|
|
| `npm run build` | Compila el proyecto |
|
|
| `npm run build:prod` | Compila para producción |
|
|
| `npm run watch` | Compila en modo observador |
|
|
| `npm test` | Ejecuta pruebas unitarias |
|
|
|
|
## Despliegue con Docker
|
|
|
|
El proyecto incluye archivos Docker para facilitar el despliegue:
|
|
|
|
1. Construir y ejecutar con Docker Compose:
|
|
|
|
```bash
|
|
docker-compose up --build
|
|
```
|
|
|
|
Esto expone la aplicación en `http://localhost:80`.
|
|
|
|
2. Construir manualmente con Docker:
|
|
|
|
```bash
|
|
docker build -t cronogramas-primeng .
|
|
docker run -p 80:80 cronogramas-primeng
|
|
```
|
|
|
|
## Development server
|
|
|
|
Para iniciar un servidor de desarrollo local, ejecute:
|
|
|
|
```bash
|
|
ng serve
|
|
```
|
|
|
|
Una vez que el servidor esté en funcionamiento, abra su navegador y navegue a `http://localhost:4200/`. La aplicación se recargará automáticamente cuando modifique cualquiera de los archivos fuente.
|
|
|
|
## Building
|
|
|
|
Para compilar el proyecto ejecute:
|
|
|
|
```bash
|
|
ng build
|
|
```
|
|
|
|
Esto compilará su proyecto y almacenará los artefactos de compilación en el directorio `dist/`. Por defecto, la compilación para producción optimiza su aplicación para el rendimiento y la velocidad.
|
|
|
|
## Additional Resources
|
|
|
|
Para más información sobre el uso de Angular CLI, incluyendo referencias detalladas de comandos, visite la página [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli). |