Sistema moderno de gestión de inventario construido con Angular 20 y Bootstrap 5. Este proyecto sirve como base educativa para aprender desarrollo web full-stack con las últimas tecnologías de Angular.

• Descripción
• Requisitos Previos
• Instalación Paso a Paso
• Arquitectura del Proyecto
• Estructura de Carpetas
• Tecnologías Utilizadas
• Características Implementadas
• Guía de Desarrollo
• Scripts Disponibles
• Próximos Pasos
• Recursos de Aprendizaje

INVENTORY es una aplicación web progresiva (PWA) diseñada para gestionar inventarios de manera eficiente. El proyecto utiliza:

• Angular 20 con arquitectura standalone components
• Bootstrap 5.3 para diseño responsive
• Bootstrap Icons 1.13 para iconografía moderna
• TypeScript 5.8 para tipado estático
• RxJS 7.8 para programación reactiva

Este proyecto está diseñado como material educativo para estudiantes que desean aprender desarrollo frontend moderno con Angular.

Antes de comenzar, asegúrate de tener instalado lo siguiente en tu computadora:

• ¿Qué es? Entorno de ejecución de JavaScript del lado del servidor.
• Descarga: https://nodejs.org/
• Verificar instalación:

  node --version
  # Debe mostrar: v18.x.x o superior

• ¿Qué es? Gestor de paquetes para JavaScript.
• Verificar instalación:

  npm --version
  # Debe mostrar: 9.x.x o superior

• ¿Qué es? Sistema de control de versiones.
• Descarga: https://git-scm.com/
• Verificar instalación:

  git --version

• Descarga: https://code.visualstudio.com/
• Extensiones recomendadas:
  • Angular Language Service
  • Prettier - Code formatter
  • ESLint
  • Auto Rename Tag
  • Path Intellisense

Opción A - Con Git:

# Clonar el repositorio
git clone https://github.com/Emjey25/JavandoCodigo.git

# Navegar a la carpeta del proyecto
cd inventory

Opción B - Sin Git:

1. Descarga el proyecto como ZIP desde GitHub
2. Descomprime la carpeta
3. Abre PowerShell/Terminal en la carpeta del proyecto

Este comando descarga e instala todas las librerías necesarias (Angular, Bootstrap, Bootstrap Icons, etc.):

npm install

⏱️ Tiempo estimado: 2-5 minutos (dependiendo de tu conexión a internet)

✅ Verificación: Debe crear una carpeta node_modules con todas las dependencias.

npm start
# o alternativamente:
# ng serve

✅ Resultado esperado:

** Angular Live Development Server is listening on localhost:4200 **
✔ Browser application bundle generation complete.

1. Abre tu navegador favorito (Chrome, Firefox, Edge)
2. Ve a: http://localhost:4200
3. Deberías ver la página de Login de INVENTORY

🎉 ¡Felicidades! La aplicación está funcionando.

Este proyecto sigue la arquitectura modular de Angular con standalone components (sin módulos NgModule tradicionales).

inventory/
├── src/
│   ├── app/
│   │   ├── core/              # Servicios globales y utilidades
│   │   ├── features/          # Módulos de funcionalidades
│   │   └── app.routes.ts      # Configuración de rutas
│   ├── assets/                # Recursos estáticos (imágenes, iconos)
│   ├── public/                # Archivos públicos
│   └── styles.css             # Estilos globales

1. Capa de Presentación (UI)

   • Componentes Angular (*.ts)
   • Templates HTML (*.html)
   • Estilos CSS (*.css)

2. Capa de Lógica de Negocio

   • Servicios (core/services/)
   • Guards de rutas (próximamente)
   • Interceptors HTTP (próximamente)

3. Capa de Datos

   • Modelos/Interfaces (próximamente)
   • Servicios HTTP (próximamente)

inventory/
│
├── node_modules/              # Dependencias instaladas (generado por npm)
│
├── public/                    # Archivos públicos estáticos
│   └── Group 11.png          # Imagen de fondo para páginas de autenticación
│
├── src/                       # Código fuente de la aplicación
│   │
│   ├── app/                   # Aplicación Angular principal
│   │   │
│   │   ├── core/              # 🔐 Funcionalidad central compartida
│   │   │   └── services/      # Servicios singleton globales
│   │   │       ├── auth.ts           # Servicio de autenticación
│   │   │       └── auth.spec.ts      # Tests del servicio de autenticación
│   │   │
│   │   ├── features/          # 🎯 Módulos de características/funcionalidades
│   │   │   │
│   │   │   └── auth/          # Módulo de autenticación
│   │   │       ├── auth-module.ts    # Configuración del módulo
│   │   │       │
│   │   │       ├── login/     # Componente de Login
│   │   │       │   ├── login.ts      # Lógica del componente
│   │   │       │   ├── login.html    # Template HTML
│   │   │       │   └── login.css     # Estilos específicos
│   │   │       │
│   │   │       └── register/  # Componente de Registro
│   │   │           ├── register.ts   # Lógica del componente
│   │   │           ├── register.html # Template HTML
│   │   │           └── register.css  # Estilos específicos
│   │   │
│   │   ├── app.ts             # Componente raíz de la aplicación
│   │   ├── app.html           # Template del componente raíz
│   │   ├── app.css            # Estilos del componente raíz
│   │   ├── app.config.ts      # Configuración global de la aplicación
│   │   ├── app.routes.ts      # Definición de rutas
│   │   └── app.spec.ts        # Tests del componente raíz
│   │
│   ├── assets/                # Recursos estáticos (imágenes, fuentes, etc.)
│   │
│   ├── index.html             # Página HTML principal
│   ├── main.ts                # Punto de entrada de la aplicación
│   └── styles.css             # Estilos globales (importa Bootstrap)
│
├── angular.json               # Configuración de Angular CLI
├── package.json               # Dependencias y scripts del proyecto
├── package-lock.json          # Lock file de dependencias
├── tsconfig.json              # Configuración de TypeScript
├── tsconfig.app.json          # Configuración TS para la aplicación
├── tsconfig.spec.json         # Configuración TS para tests
└── README.md                  # Este archivo (documentación)

• Contiene servicios singleton que se usan en toda la aplicación
• Ejemplo: auth.ts maneja login, registro y estado del usuario
• Regla: Solo servicios compartidos globalmente

• Organización por funcionalidad (auth, inventory, reports, etc.)
• Cada feature tiene sus propios componentes, servicios y estilos
• Ventaja: Fácil de mantener y escalar

• assets/: Procesados por Angular build (se pueden optimizar)
• public/: Servidos directamente sin procesamiento

• ✅ Formulario de inicio de sesión con validación
• ✅ Input de username con icono bi-person
• ✅ Input de password con icono bi-lock
• ✅ Botón para mostrar/ocultar contraseña (icono bi-eye / bi-eye-slash)
• ✅ Validación de campos obligatorios
• ✅ Mensajes de error dinámicos
• ✅ Botones de login social (Google, Facebook) - UI preparada
• ✅ Link a página de registro
• ✅ Diseño responsive con Bootstrap
• ✅ Imagen de fondo en columna derecha (desktop only)

• ✅ Formulario de registro completo
• ✅ Campos: username, email, password, confirm password
• ✅ Iconos Bootstrap en cada campo
• ✅ Validación de email
• ✅ Validación de contraseñas coincidentes
• ✅ Validación de longitud mínima (6 caracteres)
• ✅ Toggle de visibilidad para ambos campos de contraseña
• ✅ Botones de registro social
• ✅ Link a página de login
• ✅ Mismo diseño responsive que login

• ✅ Método login(username, password)
• ✅ Método register(username, email, password)
• ✅ Método getUser() para obtener usuario actual
• ✅ Almacenamiento temporal del usuario en memoria
• 🔜 Próximamente: Integración con backend
• 🔜 Próximamente: Persistencia con localStorage/sessionStorage
• 🔜 Próximamente: JWT tokens

Este proyecto usa componentes standalone (sin NgModules):

@Component({
  selector: 'app-login',
  imports: [FormsModule, RouterLink], // Imports directos
  templateUrl: './login.html',
  styleUrl: './login.css',
})
export class Login {
  /* ... */
}

Ventajas:

• Menos código boilerplate
• Imports más claros y directos
• Mejor tree-shaking (optimización)

<input [(ngModel)]="username" />

• Sincroniza automáticamente el valor del input con la propiedad del componente
• Requiere importar FormsModule

@if (showPassword) {
<i class="bi bi-eye-slash"></i>
} @else {
<i class="bi bi-eye"></i>
}

• Nueva sintaxis de Angular 17+ (reemplaza *ngIf)
• Más legible y con mejor rendimiento

<button (click)="togglePassword()">Toggle</button>

• () indica binding de eventos
• Ejecuta métodos del componente

<input [type]="showPassword ? 'text' : 'password'" />

• [] indica binding de propiedades
• Permite expresiones dinámicas

constructor(private authService: Auth) {}

• Los servicios se inyectan automáticamente
• providedIn: 'root' los hace singleton

login.ts         # Componente (PascalCase en clase)
auth.ts          # Servicio
app.routes.ts    # Configuración de rutas

export class Login {} // Componentes
export class Auth {} // Servicios
export interface User {} // Interfaces

export class MiComponente {
  // 1. Propiedades públicas
  username = '';

  // 2. Propiedades privadas
  private data: any;

  // 3. Constructor con inyección de dependencias
  constructor(private service: MiServicio) {}

  // 4. Lifecycle hooks
  ngOnInit() {}

  // 5. Métodos públicos
  metodoPublico() {}

  // 6. Métodos privados
  private metodoPrivado() {}
}

Todos estos comandos se ejecutan desde la raíz del proyecto en PowerShell/Terminal:

# Iniciar servidor de desarrollo
npm start
# Abre http://localhost:4200
# Hot-reload: los cambios se reflejan automáticamente

# Compilar para producción
npm run build
# Genera carpeta dist/ con archivos optimizados
# Minificación, tree-shaking, AOT compilation

# Ejecutar tests unitarios
npm test
# Abre Karma test runner en el navegador

# Compilar en modo watch
npm run watch
# Recompila automáticamente al detectar cambios

# Generar nuevo componente
ng generate component features/nombre-modulo/nombre-componente

# Generar servicio
ng generate service core/services/nombre-servicio

# Ver todas las opciones
ng help

1. Añadir validación de email en tiempo real

   • Validar formato de email mientras el usuario escribe
   • Mostrar mensaje de error si el formato es inválido

2. Implementar "Recordar usuario"

   • Checkbox para recordar usuario
   • Guardar username en localStorage
   • Cargar automáticamente al volver

3. Mejorar mensajes de error

   • Crear componente reutilizable para alertas
   • Añadir iconos específicos según tipo de error

4. Crear página de Dashboard

   • Ruta /dashboard
   • Guard para proteger la ruta (solo usuarios autenticados)
   • Mostrar nombre del usuario logueado

5. Implementar persistencia con localStorage

   • Guardar token/usuario en localStorage
   • Mantener sesión al recargar página
   • Implementar logout

6. Crear formulario de "Olvidé mi contraseña"

   • Nueva ruta /forgot-password
   • Validación de email
   • Simulación de envío de correo

7. Integrar con Backend (API REST)

   • Crear servicio HTTP con HttpClient
   • Conectar login/register con API real
   • Manejar tokens JWT
   • Interceptors para añadir headers

8. Implementar módulo de Inventario

   • CRUD completo de productos
   • Tabla con paginación
   • Filtros y búsqueda
   • Formularios reactivos

9. Añadir animaciones

   • Transiciones entre rutas
   • Animaciones en formularios
   • Loading spinners

// TODO: Implementar
- [ ] Guards de autenticación (AuthGuard)
- [ ] Interceptor HTTP para tokens
- [ ] Estado global con RxJS (BehaviorSubject)
- [ ] Lazy loading de módulos
- [ ] PWA (Progressive Web App)
- [ ] Dark mode toggle
- [ ] Internacionalización (i18n)
- [ ] Accesibilidad (ARIA labels)

• Angular: https://angular.dev/
• Bootstrap: https://getbootstrap.com/
• Bootstrap Icons: https://icons.getbootstrap.com/
• TypeScript: https://www.typescriptlang.org/docs/
• RxJS: https://rxjs.dev/

• Tour of Heroes (Angular oficial): https://angular.dev/tutorials/tour-of-heroes
• Bootstrap Grid System: https://getbootstrap.com/docs/5.3/layout/grid/
• TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html

• Angular Community: https://discord.gg/angular
• Stack Overflow: https://stackoverflow.com/questions/tagged/angular

# Limpiar cache de npm
npm cache clean --force

# Eliminar node_modules y package-lock.json
Remove-Item -Recurse -Force node_modules
Remove-Item package-lock.json

# Reinstalar
npm install

# Ejecutar en otro puerto
ng serve --port 4201

• Verifica que Group 11.png esté en la carpeta public/
• Cambia la ruta en los componentes si la ubicación es diferente:

  style="background-image: url('/assets/tu-imagen.png');"

// Verifica que styles.css tenga:
@import '~bootstrap-icons/font/bootstrap-icons.css';

Este es un proyecto educativo. Las contribuciones son bienvenidas:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/nueva-funcionalidad)
3. Commit tus cambios (git commit -m 'Añadir nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Abre un Pull Request

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

Repositorio: JavandoCodigo

• Comunidad de Angular por la excelente documentación
• Bootstrap team por el framework CSS
• Todos los estudiantes que hacen preguntas y mejoran este proyecto

1. Lee el código antes de escribir: Entiende cómo funcionan los componentes existentes
2. Experimenta: No tengas miedo de romper cosas (para eso está Git)
3. Usa las DevTools: Chrome/Firefox DevTools son tus amigos
4. Comenta tu código: Explica el "por qué", no el "qué"
5. Sigue las convenciones: El código consistente es código mantenible

1. Lee la documentación de la feature a implementar
2. Diseña la solución en papel/pizarra
3. Implementa en pequeños pasos
4. Prueba cada paso antes de continuar
5. Refactoriza cuando funcione
6. Documenta lo que hiciste

P: ¿Por qué usar standalone components?
R: Es la nueva forma recomendada por Angular. Más simple y eficiente.

P: ¿Debo aprender NgModules?
R: Es útil para entender código legacy, pero los nuevos proyectos usan standalone.

P: ¿Cómo conectar con un backend?
R: Usa HttpClient de Angular. Veremos esto en clases avanzadas.

P: ¿Puedo usar otro framework CSS en lugar de Bootstrap?
R: Sí, pero Bootstrap es ideal para aprender (documentación excelente y comunidad grande).

# 1. Clona el repo
git clone https://github.com/Emjey25/JavandoCodigo.git

# 2. Instala dependencias
cd inventory
npm install

# 3. Ejecuta la aplicación
npm start

# 4. Abre en el navegador
# http://localhost:4200

¡Disfruta aprendiendo Angular! 🎉

Última actualización: Noviembre 2025