# 🚀 Introducción

El Sistema de Gestión de Inventario es una aplicación web desarrollada en Angular 20 que permite la administración completa de inventarios empresariales. Esta solución frontend proporciona una interfaz intuitiva y moderna para gestionar productos, con operaciones CRUD completas y navegación fluida.

# 🎯 Objetivos del Proyecto

• Gestión Integral: Administración completa del inventario con operaciones CRUD
• Interfaz Moderna: Diseño responsivo con Bootstrap 5.3
• Rendimiento Optimizado: Implementación con Angular 20 y mejores prácticas
• Escalabilidad: Arquitectura modular preparada para crecimiento
• User Experience: Navegación intuitiva y formularios reactivos

# 🔍 Problema que Resuelve

Esta aplicación digitaliza y optimiza los procesos de gestión de inventario tradicionalmente manuales, proporcionando:

• Control centralizado del catálogo de productos
• Formularios intuitivos para agregar y editar productos
• Listado organizado con funcionalidades de búsqueda
• Interfaz responsiva que funciona en cualquier dispositivo
• Navegación fluida entre diferentes secciones

# 🛠️ Requisitos Previos

Antes de ejecutar el proyecto, asegúrate de tener instalado:

Herramienta	Versión Recomendada	Descarga
	18.17.0+	nodejs.org
	20.2.0+	npm install -g @angular/cli
	2.40.0+	git-scm.com

# 💡 IDE Recomendado

Visual Studio Code con las siguientes extensiones:

• Angular Language Service
• TypeScript Importer
• Auto Rename Tag
• Prettier - Code formatter
• GitLens

# 📦 Instalación y Ejecución

# 1. 📥 Clonar el Repositorio

git clone https://github.com/usuario/inventario-frontend.git
cd inventario-frontend

# 2. 📦 Instalar Dependencias

npm install

# Servir la aplicación
ng serve

### **Ivan Bazaga**
🚀 Desarrollador Frontend especializado en Angular y ecosistemas JavaScript

Estudiante de Angular Intermedio con pasión por crear aplicaciones web modernas y eficientes. Este proyecto representa la aplicación práctica de conceptos avanzados de Angular incluyendo routing, servicios, formularios reactivos y arquitectura de componentes.

### 📞 Información de Contacto

| Plataforma | Enlace | Descripción |
|------------|--------|-------------|
| GitHub | [@IvBanzaga](https://github.com/IvBanzaga/) | Repositorios y proyectos de código |
| LinkedIn | [ivan-bazaga-gonzalez](https://www.linkedin.com/in/ivan-bazaga-gonzalez/) | Perfil profesional y networking |
| Email | [ivan.cpweb@gmail.com](mailto:ivan.cpweb@gmail.com) | Contacto directo para oportunidades |
| Portfolio | [Ivancodelab.com](https://Ivancodelab.com) | Showcase de proyectos y skills |

# Build con análisis de bundle

ng build --stats-json npx webpack-bundle-analyzer dist/inventario-frontend/stats.json

### 5. 🧪 Ejecutar Pruebas

```bash
# Pruebas unitarias
ng test

# Pruebas con coverage
ng test --code-coverage

# Build en modo watch para desarrollo
ng build --watch --configuration development

# 📝 Comandos Utilizados

Durante el desarrollo del proyecto se utilizaron los siguientes comandos de Angular CLI:

# 🏗️ Creación del Proyecto Base

ng new inventario-frontend --routing --style=css --package-manager=npm

# 📄 Generación de Páginas

# Páginas principales del sistema
ng generate component pages/home --skip-tests
ng generate component pages/agregar-producto --skip-tests
ng generate component pages/lista --skip-tests

# 🧩 Generación de Componentes

# Componentes reutilizables
ng generate component components/navbar --skip-tests
ng generate component components/footer --skip-tests
ng generate component components/producto-lista --skip-tests
ng generate component components/editar-producto --skip-tests

# 🔧 Generación de Servicios

ng generate service services/producto --skip-tests

# 🎨 Instalación de Dependencias Adicionales

# Bootstrap para estilos
npm install bootstrap@^5.3.8
npm install @types/bootstrap --save-dev

# 🗂️ Estructura del Proyecto

src/
├── 📁 app/
│   ├── 📁 components/          # Componentes reutilizables
│   │   ├── 📄 editar-producto/     # Componente para edición de productos
│   │   ├── 📄 footer/              # Pie de página
│   │   ├── 📄 navbar/              # Barra de navegación
│   │   └── 📄 producto-lista/      # Lista de productos reutilizable
│   ├── 📁 model/               # Interfaces y modelos de datos
│   │   └── 📄 producto.interface.ts
│   ├── 📁 pages/               # Páginas principales
│   │   ├── 📄 agregar-producto/    # Página para agregar productos
│   │   ├── 📄 home/                # Página principal/dashboard
│   │   └── 📄 lista/               # Página de listado de productos
│   ├── 📁 services/            # Servicios de negocio
│   │   └── 📄 producto.service.ts  # Servicio para gestión de productos
│   ├── 📄 app.config.ts        # Configuración de la aplicación
│   ├── 📄 app.routes.ts        # Configuración de rutas
│   ├── 📄 app.ts               # Componente principal
│   ├── 📄 app.html             # Template principal
│   └── 📄 app.css              # Estilos globales
├── 📁 public/                  # Recursos públicos estáticos
└── 📄 styles.css              # Estilos globales

# 🧩 Componentes Creados

# 📦 Componentes de Gestión de Productos

# 🎨 Componentes de Layout

# 📄 Páginas/Vistas

# 🔧 Servicios

# 🌐 Servicios de API

# 🛠️ Funcionalidades del ProductoService

// Ejemplo de implementación del ProductoService
@Injectable({
  providedIn: 'root'
})
export class ProductoService {
  private apiUrl = 'http://localhost:3000/api/productos';

  constructor(private http: HttpClient) {}

  // Obtener todos los productos
  getProductos(): Observable {
    return this.http.get(this.apiUrl);
  }

  // Obtener producto por ID
  getProducto(id: string): Observable {
    return this.http.get(`${this.apiUrl}/${id}`);
  }

  // Crear nuevo producto
  createProducto(producto: Producto): Observable {
    return this.http.post(this.apiUrl, producto);
  }

  // Actualizar producto existente
  updateProducto(id: string, producto: Producto): Observable {
    return this.http.put(`${this.apiUrl}/${id}`, producto);
  }

  // Eliminar producto
  deleteProducto(id: string): Observable {
    return this.http.delete(`${this.apiUrl}/${id}`);
  }
}

# 📄 Páginas y Views

# 🏠 Páginas Principales

# 🎨 Características de UX/UI

• Diseño Responsivo: Bootstrap 5.3 para adaptabilidad a todos los dispositivos
• Navegación Intuitiva: Navbar con enlaces claros y breadcrumbs
• Formularios Reactivos: Validación en tiempo real y feedback visual
• Loading States: Indicadores de carga durante operaciones asíncronas
• Error Handling: Manejo graceful de errores con mensajes informativos

# 🗺️ Rutas de la Aplicación

// app.routes.ts

export const routes: Routes = [
  {
    path: '',
    component: Home,
    title: 'Inicio - Sistema de Inventario'
  },
  {
    path: 'agregar-producto',
    component: AgregarProducto,
    title: 'Agregar Producto - Sistema de Inventario'
  },
  {
    path: 'lista',
    component: Lista,
    title: 'Lista de Productos - Sistema de Inventario'
  },
  {
    path: 'editar-producto/:id',
    component: EditarProducto,
    title: 'Editar Producto - Sistema de Inventario'
  },
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  }
];

# 🧪 Tecnologías Utilizadas

# 🔧 Framework y Lenguajes Base

Tecnología	Versión	Descripción
	20.2.0	Framework principal de desarrollo
	5.9.2	Lenguaje de programación tipado
	7.8.0	Programación reactiva y manejo de observables

# 📦 Dependencias Principales

{
  "dependencies": {
    "@angular/common": "^20.2.0",
    "@angular/compiler": "^20.2.0",
    "@angular/core": "^20.2.0",
    "@angular/forms": "^20.2.0",
    "@angular/platform-browser": "^20.2.0",
    "@angular/router": "^20.2.0",
    "bootstrap": "^5.3.8",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  }
}

# 🎨 UI/UX y Estilos

# 📸 Screenshots

# 🏠 Página Principal (Home)

[Aquí se incluiría una imagen del dashboard principal con navegación y accesos rápidos]

+----------------------------------+
|  [NAVBAR] Sistema de Inventario  |
+----------------------------------+
|                                  |
|    Bienvenido al Sistema de      |
|        Gestión de Inventario     |
|                                  |
|  [Agregar Producto] [Ver Lista]  |
|                                  |
+----------------------------------+
|           [FOOTER]               |
+----------------------------------+

# 📝 Formulario de Agregar Producto

[Imagen del formulario reactivo con campos de validación]

# 📋 Lista de Productos

[Captura de pantalla de la tabla de productos con opciones de edición]

# 📱 Vista Móvil Responsiva

[Screenshots mostrando la adaptabilidad en dispositivos móviles con Bootstrap]

# 🌟 Futuras Mejoras

# 🚀 Funcionalidades Planificadas

• Sistema de Autenticación: Login y registro de usuarios
• Gestión de Categorías: CRUD para categorías de productos
• Búsqueda Avanzada: Filtros por categoría, precio, disponibilidad
• Paginación: Manejo de grandes volúmenes de datos
• Exportación de Datos: PDF, Excel con listados de inventario
• Dashboard con Gráficos: Estadísticas visuales del inventario
• Notificaciones: Alertas de stock bajo
• Historial de Cambios: Auditoría de modificaciones

# 🔧 Optimizaciones Técnicas

• Lazy Loading: Carga perezosa de módulos por funcionalidad
• OnPush Change Detection: Optimización del rendimiento
• Service Workers: Cache offline y PWA capabilities
• State Management: Implementación de NgRx para estados complejos
• Unit Testing: Cobertura de pruebas al 90%+
• E2E Testing: Pruebas end-to-end con Cypress

# 🎨 Mejoras de UX

• Tema Oscuro: Alternancia entre modo claro y oscuro
• Animaciones: Transiciones suaves entre vistas
• Drag & Drop: Funcionalidad para reordenar productos
• Shortcuts de Teclado: Navegación rápida con teclado
• Accesibilidad: Cumplimiento WCAG 2.1 Level AA
• Internationalization (i18n): Soporte multi-idioma

# 👤 Autor

# 👨‍💻 **Iván Bazaga**

🚀 Desarrollador Frontend especializado en Angular y ecosistemas JavaScript

Estudiante de Angular Intermedio con pasión por crear aplicaciones web modernas y eficientes. Este proyecto representa la aplicación práctica de conceptos avanzados de Angular incluyendo routing, servicios, formularios reactivos y arquitectura de componentes.

# ☎️ Información de Contacto

# 🧰 Stack Tecnológico de Especialización

Frontend: Angular 20 • TypeScript • RxJS • Bootstrap 5 • HTML5 • CSS3
Tools: Angular CLI • Git • VS Code • Prettier • Jasmine • Karma
Learning: NgRx • PWA • Node.js • Express • MongoDB

# 📜 Licencia

Este proyecto está bajo la licencia MIT. Ver el archivo LICENSE para más detalles.

# 🙏 Agradecimientos

• Angular Team por el excelente framework y documentación
• Bootstrap Team por el sistema de diseño robusto y responsive
• Instructor del curso por la guía en mejores prácticas
• Comunidad Angular por recursos, tutoriales y soporte
• TypeScript Team por hacer JavaScript más robusto

Frontend: Java SprinBoot • Astro • Angular 20 • TypeScript • RxJS • Bootstrap 5 • HTML5 • CSS3
Tools: Angular CLI • Git • VS Code • Prettier • Jasmine • Karma
Learning: NgRx • PWA • Node.js • Express • Mysql •  Oracle