# Documento de Instrucciones Técnicas para IA: Gestor de Tarjetas con Importación/Exportación JSON (v3.0)
**Propósito:** Este documento describe la arquitectura, funcionalidades y estructura del código fuente de un gestor de tarjetas web (denominado "Tarjeta Maestro v3.0") que permite a los usuarios crear, editar, eliminar y reordenar tarjetas con datos personalizados. Además, incorpora la capacidad de importar y exportar colecciones de tarjetas en formato JSON estandarizado, facilitando la gestión y el intercambio de datos. Esta documentación está diseñada para una IA con el objetivo de comprender el sistema y poder generar mejoras, optimizaciones o nuevas funcionalidades a partir del código fuente adjunto.
---
## 1. Arquitectura General
La aplicación "Tarjeta Maestro v3.0" sigue una arquitectura principalmente del lado del cliente (Front-End) con persistencia de datos en el navegador utilizando `localStorage`. El Back-End (PHP) se utiliza principalmente para servir la estructura HTML base y la configuración inicial.
**Componentes Principales:**
1. **Estructura HTML (`index.php`):** Define la interfaz de usuario, incluyendo secciones para la creación/edición de tarjetas, importación/exportación, y la visualización de las tarjetas guardadas. Utiliza Tailwind CSS para el estilado y la responsividad.
2. **Lógica del Cliente (JavaScript):** Implementa la interactividad de la aplicación, incluyendo:
* Manipulación dinámica del DOM para agregar, editar y eliminar campos y tarjetas.
* Gestión del formulario de creación/edición de tarjetas.
* Implementación de la funcionalidad de arrastrar y soltar para reordenar tarjetas utilizando la librería SortableJS.
* Lectura y escritura de datos en `localStorage` para la persistencia de las tarjetas.
* Implementación de la importación de datos desde archivos JSON.
* Implementación de la exportación de datos a archivos JSON.
* Control de la interfaz de usuario y mensajes de retroalimentación al usuario (a través de un sistema de modales, presumiblemente implementado en `components/modal.php`).
3. **Estilos (Tailwind CSS):** Framework CSS "utility-first" utilizado para el diseño y la apariencia de la interfaz. La configuración se encuentra en la sección `<script>tailwind.config = { ... }` dentro del `index.php`.
4. **Librerías Externas:**
* **SortableJS:** (`https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js`) Utilizada para la funcionalidad de arrastrar y soltar para reordenar las tarjetas.
5. **Componentes PHP (`components/header.php`, `components/footer.php`, `components/modal.php`):** Archivos PHP que contienen fragmentos de HTML reutilizables para la estructura de la página y los modales de retroalimentación.
6. **Configuración PHP (`config.php`):** Archivo PHP que contiene variables de configuración de la aplicación (por ejemplo, el nombre de la aplicación).
## 2. Funcionalidades Principales
1. **Creación de Tarjetas Personalizadas:**
* Interfaz para agregar dinámicamente campos de "Nombre del campo" y "Valor del campo".
* Previsualización en tiempo real de la tarjeta a medida que se agregan o editan los campos.
* Posibilidad de guardar la tarjeta con los campos definidos.
2. **Edición de Tarjetas Existentes:**
* Interfaz para seleccionar una tarjeta guardada y cargar sus datos en el formulario de edición.
* Posibilidad de modificar los valores de los campos existentes y agregar o eliminar campos.
* Guardado de los cambios en la tarjeta seleccionada.
3. **Eliminación de Tarjetas:**
* Opción para eliminar tarjetas individuales de la lista de tarjetas guardadas.
* Opción para eliminar todas las tarjetas guardadas con una confirmación.
4. **Reordenamiento de Tarjetas:**
* Funcionalidad de arrastrar y soltar para cambiar el orden visual de las tarjetas en la lista.
* El nuevo orden de las tarjetas se persiste en `localStorage`.
5. **Importación desde JSON:**
* Interfaz para seleccionar un archivo JSON (`.json`) que contenga datos de prompts estandarizados (siguiendo un formato específico, presumiblemente el descrito en el prompt anterior).
* Capacidad para procesar tanto un único objeto JSON como un array de objetos JSON dentro del archivo de importación.
* Extracción de los datos relevantes del JSON y creación de nuevas tarjetas con estos datos.
* Mensajes de retroalimentación para indicar el éxito o el fallo de la importación.
6. **Exportación a JSON:**
* Funcionalidad para exportar todas las tarjetas guardadas en `localStorage` a un archivo JSON descargable.
* El archivo JSON contendrá un array de objetos, donde cada objeto representa una tarjeta con sus campos de datos.
7. **Persistencia de Datos:**
* Utilización de `localStorage` del navegador para almacenar las tarjetas creadas y su orden, lo que permite que los datos persistan entre sesiones del navegador.
## 3. Estructura de Datos (en `localStorage`)
Las tarjetas se almacenan en `localStorage` bajo la clave `'customCards'`. El valor asociado a esta clave es un array de objetos JavaScript. Cada objeto representa una tarjeta y tiene la siguiente estructura:
``json
[
{
"id": "unique_id_1",
"data": {
"Título": "Nombre de la Tarjeta 1",
"Campo 1": "Valor 1",
"Campo 2": "Valor 2",
"...": "..."
}
},
{
"id": "unique_id_2",
"data": {
"Título": "Nombre de la Tarjeta 2",
"Otro Campo": "Otro Valor"
}
},
// ... más tarjetas
]
``
* `id`: Un identificador único generado para cada tarjeta.
* `data`: Un objeto que contiene los campos de datos definidos por el usuario para la tarjeta (clave: nombre del campo, valor: valor del campo). Se espera que al menos el campo "Título" esté presente para una mejor identificación.
## 4. Flujo de Interacción Principal
1. **Carga Inicial:** Al cargar la página, el JavaScript intenta leer los datos de las tarjetas desde `localStorage`. Si existen datos, se renderizan las tarjetas en la sección "Tarjetas Guardadas" y se inicializa SortableJS para permitir el reordenamiento.
2. **Creación de una Nueva Tarjeta:**
* El usuario agrega campos utilizando el botón "Añadir Campo".
* El usuario ingresa nombres y valores para los campos.
* La previsualización de la tarjeta se actualiza dinámicamente.
* Al hacer clic en "Guardar Tarjeta", se recopilan los datos del formulario, se genera un nuevo ID (si es una nueva tarjeta), se crea un objeto de tarjeta y se guarda en `localStorage`. La lista de tarjetas se recarga para mostrar la nueva tarjeta.
3. **Edición de una Tarjeta Existente:**
* El usuario hace clic en el icono de edición de una tarjeta en la lista.
* Los datos de esa tarjeta se cargan en el formulario de creación/edición.
* El usuario realiza las modificaciones necesarias.
* Al hacer clic en "Guardar Tarjeta", los datos modificados se actualizan en el objeto de la tarjeta correspondiente en `localStorage`, y la lista de tarjetas se recarga.
4. **Eliminación de una Tarjeta:**
* El usuario hace clic en el icono de eliminación de una tarjeta en la lista.
* La tarjeta correspondiente se elimina del array en `localStorage`, y la lista se recarga.
5. **Reordenamiento de Tarjetas:**
* El usuario arrastra una tarjeta a su nueva posición en la lista.
* El evento `onEnd` de SortableJS se dispara, y el nuevo orden de las tarjetas se guarda en `localStorage`. La lista se recarga para reflejar el nuevo orden.
6. **Importación desde JSON:**
* El usuario selecciona un archivo JSON a través del input de tipo `file`.
* Al seleccionar el archivo, se lee su contenido y se intenta parsear como JSON.
* Se iteran los objetos JSON parseados (si es un array) o se procesa el objeto único.
* Para cada objeto JSON válido (que contenga los campos mínimos esperados, como `title`, `prompt`, `purpose`), se crea una nueva tarjeta con los datos extraídos y se guarda en `localStorage`.
* Se muestra un mensaje de retroalimentación.
7. **Exportación a JSON:**
* Al hacer clic en el botón "Exportar a JSON", se leen todos los objetos de tarjeta desde `localStorage`.
* Se convierten a una cadena JSON formateada.
* Se fuerza la descarga de un archivo `.json` con esta cadena como contenido.
8. **Limpieza Total:**
* Al hacer clic en "Limpiar Todo" y confirmar, la clave `'customCards'` se elimina de `localStorage`, y la lista de tarjetas se muestra vacía.
## 5. Posibles Áreas de Mejora para la IA
A partir de esta descripción y el código fuente adjunto, la IA podría considerar las siguientes áreas para generar mejoras:
* **Usabilidad:**
* Implementar validación de campos en el formulario de creación/edición.
* Mejorar la previsualización de la tarjeta para reflejar los estilos finales.
* Implementar funcionalidad de "Duplicar Tarjeta".
* Considerar la adición de tipos de datos para los campos (texto, número, fecha, etc.) y adaptar la interfaz de edición.
* Implementar un sistema de búsqueda y filtrado de las tarjetas guardadas.
* Mejorar la interfaz para la importación y exportación (por ejemplo, mostrar un resumen de lo que se importará).
* **Funcionalidad:**
* Implementar la capacidad de agrupar o categorizar tarjetas.
* Añadir la posibilidad de adjuntar archivos o imágenes a las tarjetas (esto requeriría un back-end más robusto para el almacenamiento).
* Integrar la capacidad de compartir colecciones de tarjetas con otros usuarios (requeriría un back-end).
* Permitir la personalización de la apariencia de las tarjetas (colores, fuentes).
* Implementar la funcionalidad de deshacer/rehacer acciones.
* **Rendimiento y Optimización:**
* Analizar el rendimiento de la aplicación con una gran cantidad de tarjetas y proponer optimizaciones en la manipulación del DOM o el almacenamiento en `localStorage`.
* Considerar la posibilidad de usar IndexedDB para un almacenamiento más estructurado y eficiente si la cantidad de datos crece significativamente.
* **Robustez y Manejo de Errores:**
* Implementar un manejo de errores más robusto para la importación de JSON (por ejemplo, informar sobre líneas específicas con errores de formato).
* Añadir mecanismos de recuperación en caso de corrupción de los datos en `localStorage`.
* **Accesibilidad:**
* Evaluar la accesibilidad de la interfaz (etiquetas ARIA, navegación con teclado) y proponer mejoras para cumplir con los estándares WCAG.
* **Pruebas:**
* Generar casos de prueba unitarios o de integración para las funcionalidades principales de la aplicación (especialmente la manipulación de datos en `localStorage`, la importación/exportación y la creación/edición de tarjetas).
* **Refactorización del Código:**
* Identificar posibles áreas de refactorización para mejorar la legibilidad, mantenibilidad y escalabilidad del código JavaScript. Considerar la posibilidad de modularizar el código en clases o funciones más pequeñas y reutilizables.
Al analizar el código fuente adjunto y considerar estas áreas de mejora, la IA debería ser capaz de generar propuestas de optimización y nuevas funcionalidades para "Tarjeta Maestro v3.0".Guía para Aprendices y Emprendedores Tecnológicos
Este documento divide el desarrollo de Prompto en 6 niveles de evolución, desde un prototipo básico hasta una aplicación lista para inversión. Cada nivel agrega complejidad, funcionalidad y valor, permitiendo aprender tecnologías clave en el camino.
Objetivo: Validar la idea central con funcionalidades mínimas.
Tecnologías: HTML/CSS/JS + Electron o Python + Tkinter.
title, goal). title). Objetivo: Producto mínimo viable con usuarios reales.
Tecnologías: React/Vue (Frontend) + Node.js/Python (Backend opcional) + SQLite/IndexedDB.
categories, is_favorite). Objetivo: Atracer usuarios profesionales (investigadores, devs).
Tecnologías: + TypeScript, Indexación con FlexSearch/Lunr.js, Web Workers.
Objetivo: Escalar para equipos y datos masivos.
Tecnologías: + PostgreSQL/MongoDB, Docker, Auth0/Firebase Auth.
Objetivo: Atraer empresas y casos de uso complejos.
Tecnologías: + Elasticsearch, Kubernetes, WebSockets.
Objetivo: Ser atractivo para inversores.
Tecnologías: + AI (LLMs), Blockchain (para auditoría), Flutter (app móvil).
| Nivel | Foco | Tecnologías Clave | Metrica Clave |
|---|---|---|---|
| 0. Prototipo | Idea básica | Vanilla JS, JSON | Validación conceptual |
| 1. MVP | Usabilidad | React, SQLite | Primeros usuarios |
| 2. Pro | Productividad | TypeScript, FlexSearch | Retención profesional |
| 3. Cloud | Escalabilidad | PostgreSQL, Docker | Tamaño de datasets |
| 4. Empresa | Automatización | Elasticsearch, NLP | Grandes clientes B2B |
| 5. Startup | Innovación + ROI | AI, Blockchain | MRR (Ingresos recurrentes) |