Aplicación móvil desarrollada en Ionic y Angular para registrar, organizar y dar seguimiento a listas de compras y tareas personales. Este proyecto fue diseñado con un enfoque en usabilidad, operación offline y eficiencia en el seguimiento del progreso.
Proyecto Final de Programación — CTP Alajuelita, 2026
El cliente requería una aplicación sencilla y eficiente para gestionar las compras del hogar y las tareas diarias, con el objetivo de evitar olvidos, duplicidad de productos y listas desordenadas.
- Agregar, editar y eliminar productos o tareas rápidamente mediante gestos (swipe).
- Organizar los elementos por categorías colapsables para una visualización más clara.
- Seguir el avance mediante barras de progreso y conteo de elementos pendientes.
- Conservar todos los cambios localmente cuando no hay conexión a internet (operación 100% offline).
- Identificar automáticamente las categorías a partir de palabras clave.
- Alta de productos/tareas con:
- título
- descripción
- cantidad
- categoría
- estado
- prioridad (Alta, Media, Baja)
- Registro de fecha de creación.
- Registro de fecha límite de entrega.
- Marcado de elementos completados con:
- toque (tap)
- deslizamiento (swipe)
- Eliminación rápida.
- Autodetección de categorías.
- Organización en secciones colapsables.
- Indicador de estado sin conexión.
- Guardado persistente local utilizando:
- Capacitor Preferences
- LocalStorage
- Diseño optimizado para uso con una sola mano.
- Textos legibles.
- Alto contraste.
- Áreas táctiles amplias.
- Chips de sugerencias frecuentes.
- Limpieza masiva de elementos completados.
- Vista dedicada para consultar:
- compras previas
- tareas finalizadas
| Área | Tecnología |
|---|---|
| Frameworks Core | Ionic Framework (v7/v8) |
| Framework Frontend | Angular (v17/v20) |
| Arquitectura | Standalone Components |
| Lenguaje | TypeScript |
| Programación Reactiva | RxJS |
| Estilos | SCSS |
| Hardware/Nativo | Capacitor |
| Almacenamiento | LocalStorage / Ionic Storage / Capacitor Preferences |
- Node.js (v18 o superior)
- npm (v9 o superior)
- Ionic CLI
- Angular CLI
npm install -g @ionic/cli
npm install -g @angular/cli
## Clonar el Repositorio
```bash
git clone https://github.com/isaac0621/Proyecto-de-Programacion.git
cd quicklistnpm installionic serveLa aplicación abrirá en:
http://localhost:4200con Hot Reload habilitado.
src/
├── app/
│ ├── models/
│ │ ├── task.model.ts
│ │ └── category-keywords.ts
│ │
│ ├── services/
│ │ └── shopping.service.ts
│ │
│ ├── home/
│ ├── add-product/
│ ├── purchased/
│ ├── categories/
│ ├── settings/
│ │
│ ├── app.component.ts
│ └── app.routes.ts
│
├── assets/
├── environments/
├── theme/
│ └── variables.scss
│
└── index.html
| Carpeta | Función |
|---|---|
models/ |
Interfaces y modelos de datos |
services/ |
Lógica de negocio y persistencia |
home/ |
Pantalla principal |
add-product/ |
Formulario de ingreso |
purchased/ |
Historial |
categories/ |
Gestión de categorías |
settings/ |
Configuración |
interface Task {
id: string;
titulo: string;
descripcion: string;
fechaCreacion: string;
fechaLimite: string;
estado: TaskStatus;
prioridad: TaskPriority;
categoria: string;
completada: boolean;
}| Categoría | Identificador Visual |
|---|---|
| Lácteos | Rojo |
| Limpieza | Azul |
| Verduras | Verde |
| Panadería | Naranja |
| Otros | Gris |
Lista principal agrupada por categorías con indicadores de progreso.
Formulario de captura rápida con chips de sugerencias dinámicas.
Registro histórico con funcionalidad de vaciado de lista.
Modal overlay para modificación de atributos:
- nombre
- cantidad
- prioridad
ion-header
ion-toolbar
ion-content
ion-list
ion-item
ion-input
ion-button
ion-card
ion-select
ion-toggle
ion-fab
ion-badge
ion-checkbox| Elemento | Valor Hexadecimal |
|---|---|
| Fondo | #FFFFFF |
| Texto | #000000 |
| Primario | #2F6BFF |
| Éxito | #2ECC71 |
| Urgente | #FFC107 |
| Tipografía Base | 18px – 22px |
| ID | Función Evaluada | Estado |
|---|---|---|
| 1 | Inserción de nuevo producto | Correcto |
| 2 | Validación de campos obligatorios | Correcto |
| 3 | Marcado como completado | Correcto |
| 4 | Listas colapsables | Correcto |
| 5 | Persistencia offline | Correcto |
| 6 | Edición de atributos | Correcto |
| 7 | Eliminación de registros | Correcto |
| 8 | Autodetección de categoría | Correcto |
npm testnpm test -- --code-coveragenpm run build
npx cap add android
npx cap run androidnpm run build
npx cap add ios
npx cap run iosInicialización incorrecta de almacenamiento local.
- Limpiar caché del entorno.
- Verificar inicialización de
Preferences.
Observables no actualizados.
- Validar suscripciones RxJS.
- Verificar detección de cambios de Angular.
Durante el ciclo de desarrollo se utilizaron herramientas de IA bajo el siguiente esquema.
- Propuestas iniciales de estructura y rutas.
- Refinamiento del sistema de diseño:
- escalas tipográficas
- áreas táctiles
- Expresiones regulares.
- Validaciones de formularios.
- Estructuración inicial de documentación técnica.
- Lógica de negocio definitiva.
- Implementación UX/UI.
- Jerarquía visual y accesibilidad.
- Auditoría funcional:
- swipe actions
- modales
- barras de progreso
- Consolidación final del código.
- Levantamiento de requerimientos.
- Especificación de requisitos.
- Propuesta arquitectónica.
- Diseño UI/Wireframes.
- Código fuente funcional.
- Documentación de pruebas.
- Material de presentación.
Isaac Tenorio Campos
Institución: CTP Alajuelita
Especialidad: Programación
Profesor: Bengi Obando Umaña
Ubicación: Circuito 06, Dirección Regional San José Central
05 de Mayo de 2026 → 26 de Mayo de 2026