readmme
-se implementa pequeño tutorial con dependencias y ese tipo de cosas
This commit is contained in:
parent
31f0ce7292
commit
7d020e17fb
128
README.md
128
README.md
@ -2,6 +2,95 @@
|
|||||||
|
|
||||||
Este proyecto es una aplicación Angular 19 utilizando PrimeNG para la gestión de cronogramas.
|
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
|
## Estructura de Interfaces
|
||||||
|
|
||||||
Se han creado las siguientes interfaces para los modelos de datos:
|
Se han creado las siguientes interfaces para los modelos de datos:
|
||||||
@ -35,26 +124,55 @@ La aplicación incluye:
|
|||||||
- Guard para proteger rutas
|
- Guard para proteger rutas
|
||||||
- Login y sistema de autenticación
|
- 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
|
## Development server
|
||||||
|
|
||||||
To start a local development server, run:
|
Para iniciar un servidor de desarrollo local, ejecute:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
ng serve
|
ng serve
|
||||||
```
|
```
|
||||||
|
|
||||||
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
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
|
## Building
|
||||||
|
|
||||||
To build the project run:
|
Para compilar el proyecto ejecute:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
ng build
|
ng build
|
||||||
```
|
```
|
||||||
|
|
||||||
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
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
|
## Additional Resources
|
||||||
|
|
||||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
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).
|
||||||
Loading…
x
Reference in New Issue
Block a user