{"id":23907535,"url":"https://github.com/criscode2022/listacompra","last_synced_at":"2026-06-19T17:31:27.827Z","repository":{"id":184444155,"uuid":"671899073","full_name":"Criscode2022/listacompra","owner":"Criscode2022","description":"Angular-based Ionic Progressive Web Application (PWA) for managing shopping lists","archived":false,"fork":false,"pushed_at":"2026-04-12T17:32:02.000Z","size":2085,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-12T19:19:47.271Z","etag":null,"topics":["angular","ionic","tailwind","typescript"],"latest_commit_sha":null,"homepage":"https://lalistadelacompra.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Criscode2022.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-07-28T11:55:56.000Z","updated_at":"2026-04-12T17:32:06.000Z","dependencies_parsed_at":"2024-10-28T12:34:42.652Z","dependency_job_id":"4593c4c3-850a-4723-8e40-abbc4585a454","html_url":"https://github.com/Criscode2022/listacompra","commit_stats":null,"previous_names":["criscode2022/listacompra"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Criscode2022/listacompra","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Criscode2022%2Flistacompra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Criscode2022%2Flistacompra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Criscode2022%2Flistacompra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Criscode2022%2Flistacompra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Criscode2022","download_url":"https://codeload.github.com/Criscode2022/listacompra/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Criscode2022%2Flistacompra/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34541775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","ionic","tailwind","typescript"],"created_at":"2025-01-05T03:12:41.426Z","updated_at":"2026-06-19T17:31:27.823Z","avatar_url":"https://github.com/Criscode2022.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lista de la compra\n\n[![CI](https://github.com/Criscode2022/listacompra/actions/workflows/ci.yml/badge.svg)](https://github.com/Criscode2022/listacompra/actions/workflows/ci.yml)\n\nAplicación de lista de la compra desarrollada con Angular + Ionic, preparada para ejecutarse como:\n\n- PWA (web instalable con Service Worker)\n- Aplicación Android (vía Capacitor)\n\nEl proyecto está orientado a una experiencia sencilla y rápida para gestionar productos de compra con almacenamiento local persistente, filtros por categoría y exportación en PDF.\n\n## Tabla de contenidos\n\n- [Visión general](#visión-general)\n- [Funcionalidades](#funcionalidades)\n- [Stack tecnológico](#stack-tecnológico)\n- [Arquitectura y flujo de datos](#arquitectura-y-flujo-de-datos)\n- [Modelo de datos](#modelo-de-datos)\n- [Requisitos previos](#requisitos-previos)\n- [Instalación y puesta en marcha](#instalación-y-puesta-en-marcha)\n- [Scripts disponibles](#scripts-disponibles)\n- [Ejecución como app Android](#ejecución-como-app-android)\n- [Compilación y despliegue](#compilación-y-despliegue)\n- [Estructura del proyecto](#estructura-del-proyecto)\n- [Calidad y pruebas](#calidad-y-pruebas)\n- [Testing](#testing)\n- [Posibles mejoras futuras](#posibles-mejoras-futuras)\n\n## Visión general\n\nEsta aplicación permite mantener una lista de productos con tres vistas principales:\n\n- Despensa: inventario general y gestión de productos.\n- Lista: productos pendientes para comprar y opción de exportar en PDF.\n- Urgente: productos de prioridad alta separados del resto.\n\nLa interfaz se apoya en el modelo de tabs de Ionic, mientras que el estado global de productos se maneja con Signals de Angular para actualizar la UI en tiempo real.\n\n## Funcionalidades\n\n### Gestión de productos\n\n- Alta de productos mediante modal.\n- Edición de cantidad con validación.\n- Marcado/desmarcado de estado comprado.\n- Eliminación de productos.\n- Limpieza completa del almacenamiento local.\n\n### Categorización y unidades\n\n- Categorías predefinidas (frutas, verduras, carnes, pescados, lácteos, panadería, bebidas, limpieza, higiene, congelados y otros).\n- Unidades de medida (ud, kg, g, l, ml, oz, lb).\n- Filtros por categoría con contador dinámico por vista.\n\n### Vista urgente\n\n- Gestión separada de productos urgentes.\n- Creación de productos urgentes desde modal dedicado.\n\n### Exportación\n\n- Exportación de la lista pendiente a PDF.\n- Documento agrupado por categoría, con fecha y formato preparado para impresión.\n\n### Persistencia y compatibilidad\n\n- Almacenamiento local con Ionic Storage (IndexedDB en navegador).\n- Migración automática de datos antiguos sin unidad/categoría para mantener compatibilidad con versiones previas.\n\n## Stack tecnológico\n\n- Angular 17\n- Ionic 7\n- Capacitor 5\n- Ionic Storage\n- Angular Signals\n- RxJS\n- Angular Material (snackbars)\n- Tailwind CSS\n- jsPDF (generación de PDF)\n\n## Arquitectura y flujo de datos\n\nLa lógica principal vive en un servicio central de datos:\n\n- DataService\n  - Inicializa y conecta Ionic Storage.\n  - Expone el estado global products como signal.\n  - Persiste cambios automáticamente en almacenamiento local.\n  - Aplica migraciones de datos en el arranque.\n\n### Flujo de actualización\n\n1. El usuario crea/edita/elimina un producto desde una pantalla.\n2. La pantalla actualiza el signal de productos.\n3. Angular re-renderiza automáticamente las vistas afectadas.\n4. Un effect del servicio persiste la nueva lista en Ionic Storage.\n\nEste enfoque evita sincronizaciones manuales complejas y mantiene UI + estado + persistencia alineados.\n\n## Modelo de datos\n\nCada producto sigue esta estructura:\n\n```ts\ninterface Product {\n  name: string;\n  checked: boolean;\n  quantity: number;\n  urgent: boolean;\n  unit: \"ud\" | \"kg\" | \"g\" | \"l\" | \"ml\" | \"oz\" | \"lb\";\n  category: \"frutas\" | \"verduras\" | \"carnes\" | \"pescados\" | \"lácteos\" | \"panadería\" | \"bebidas\" | \"limpieza\" | \"higiene\" | \"congelados\" | \"otros\";\n}\n```\n\n## Requisitos previos\n\n- Node.js LTS (recomendado 18 o superior)\n- npm (incluido con Node.js)\n- Angular CLI (opcional, para comandos directos)\n- Ionic CLI (opcional)\n\nPara Android además:\n\n- Android Studio\n- SDK de Android configurado\n- Java JDK compatible con Android Studio\n\n## Instalación y puesta en marcha\n\n1. Instalar dependencias:\n\n```bash\nnpm install\n```\n\n2. Ejecutar entorno de desarrollo web:\n\n```bash\nnpm start\n```\n\n3. Abrir en navegador:\n\n- URL habitual: http://localhost:4200\n\n## Scripts disponibles\n\n```bash\nnpm start   # servidor de desarrollo\nnpm run build   # build de producción\nnpm run watch   # build en modo watch (development)\nnpm test    # pruebas unitarias con Karma/Jasmine\nnpm run test:watch   # ejecución en watch mode\nnpm run test:ci   # ejecución única en ChromeHeadless\nnpm run test:coverage   # ejecución con cobertura\nnpm run lint    # análisis estático con ESLint\n```\n\n## Ejecución como app Android\n\nSi todavía no existe la plataforma Android en el proyecto:\n\n```bash\nnpx cap add android\n```\n\nFlujo habitual para generar y abrir Android:\n\n```bash\nnpm run build\nnpx cap sync android\nnpx cap open android\n```\n\nNotas:\n\n- El build web se genera en la carpeta www (webDir de Capacitor).\n- Tras cambios en frontend, vuelve a ejecutar build + cap sync.\n\n## Compilación y despliegue\n\n### Build de producción\n\n```bash\nnpm run build\n```\n\nSalida en:\n\n- www/\n\n### Despliegue en Netlify\n\nEl proyecto incluye configuración en netlify.toml:\n\n- Comando de build: npm run build\n- Carpeta publicada: www\n- Redirección SPA a index.html para rutas de Angular\n\n## Estructura del proyecto\n\n```text\nsrc/\n\tapp/\n\t\tcore/\n\t\t\tservices/        # servicios de negocio (DataService)\n\t\t\tdirectives/      # directivas reutilizables\n\t\t\ttypes/           # tipos y modelos\n\t\tlayout/\n\t\t\theader/          # cabecera compartida\n\t\t\tadd-product-modal/\n\t\ttabs/\n\t\t\ttab-pantry/      # vista despensa\n\t\t\ttab-list/        # vista lista + export PDF\n\t\t\ttab-urgent/      # vista urgente\n\tassets/\n\ttheme/\nwww/                   # build web listo para despliegue\n```\n\n## Calidad y pruebas\n\n- Pruebas unitarias: Jasmine + Karma.\n- Linting: ESLint con reglas de Angular.\n\n## Testing\n\nLa aplicación incluye tests unitarios para componentes, directivas y servicios.\n\n### Cobertura actual\n\n- Componentes de app y tabs.\n- Directivas reutilizables.\n- Servicio de datos con persistencia local (migración, borrado y almacenamiento).\n\n### Ejecución local\n\n```bash\nnpm test\n```\n\n### Ejecución para CI\n\n```bash\nnpm run test:ci\n```\n\n### Generar reporte de cobertura\n\n```bash\nnpm run test:coverage\n```\n\nEl informe de cobertura se genera en:\n\n- coverage/app/index.html\n\n### Pipeline recomendada\n\n```bash\nnpm run lint\nnpm run test:ci\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcriscode2022%2Flistacompra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcriscode2022%2Flistacompra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcriscode2022%2Flistacompra/lists"}