prompts.txt

Filosofía General: El desarrollo web es un proceso iterativo. No tienes que hacer todo perfectamente en el primer intento. Empieza simple, haz que funcione, y luego mejora y añade complejidad. Fase 0: Planificación y Diseño Antes de escribir una sola línea de código, es crucial planificar. Definir la Idea y los Requisitos: ¿Qué problema resuelve tu aplicación? ¿Quiénes son los usuarios objetivo? ¿Cuáles son las funcionalidades principales (MVP - Minimum Viable Product)? ¿Qué funcionalidades secundarias te gustaría añadir más adelante? Haz bocetos simples (wireframes) de las pantallas principales. Elegir la Pila Tecnológica (Tech Stack): Backend: Lenguaje/Plataforma: Node.js (JavaScript/TypeScript), Python, Ruby, Java, PHP, Go, C# (.NET). Framework: Express.js/NestJS (Node.js), Django/Flask (Python), Ruby on Rails (Ruby), Spring Boot (Java), Laravel/Symfony (PHP). Frontend: Framework/Librería: React, Angular, Vue.js, Svelte, o incluso HTML/CSS/JavaScript "vanilla" para proyectos simples. Base de Datos: SQL (Relacional): PostgreSQL, MySQL, MariaDB, SQL Server. Ideal para datos estructurados con relaciones claras. NoSQL (No relacional): MongoDB (Documentos), Redis (Clave-Valor/Caché), Cassandra (Columna ancha). Flexible para datos no estructurados o semi-estructurados. Consideraciones: Curva de aprendizaje, rendimiento, comunidad, ecosistema de librerías, requisitos específicos del proyecto. Diseño de Arquitectura: ¿Será una aplicación monolítica (todo en un solo bloque) o basada en microservicios (componentes independientes)? (Empieza con monolito si no estás seguro). ¿Cómo se comunicarán el frontend y el backend? (Generalmente a través de una API RESTful o GraphQL). Diseña el esquema inicial de la base de datos (tablas/colecciones y sus relaciones/campos). Diseño UI/UX (Interfaz de Usuario / Experiencia de Usuario): Crea mockups más detallados o prototipos interactivos. Define la paleta de colores, tipografía y estilo visual general. Herramientas: Figma, Sketch, Adobe XD, Balsamiq (para wireframes). Fase 1: Configuración del Entorno de Desarrollo Prepara tu máquina para el desarrollo. Instalar Herramientas Esenciales: Editor de Código: VS Code (muy popular, gratuito, extensible), Sublime Text, Atom, WebStorm (de pago, muy potente). Control de Versiones: Git. Crea una cuenta en GitHub, GitLab o Bitbucket para alojar tus repositorios. Terminal/Línea de Comandos: Aprende los comandos básicos. (Integrada en VS Code, Terminal en macOS/Linux, Git Bash o WSL en Windows). Navegador Web: Chrome, Firefox (con sus herramientas de desarrollo). Instalar Dependencias del Stack: Node.js y npm/yarn: Si usas JavaScript/TypeScript para backend o frontend. Descarga desde nodejs.org. npm viene incluido, yarn se instala aparte (npm install -g yarn). Python y pip: Si usas Python. Descarga desde python.org. pip suele venir incluido. Considera usar entornos virtuales (venv). Runtime/SDK correspondiente: Para Java (JDK), Ruby, PHP, Go, .NET SDK. Base de Datos: Instala la base de datos elegida en tu máquina local o usa Docker. Docker (Opcional pero Recomendado): Para crear entornos consistentes y facilitar el despliegue. Inicializar el Proyecto: Crea una carpeta para tu proyecto. Inicializa Git: git init. Crea la estructura de carpetas (p.ej., /backend, /frontend, /docs). Configura los gestores de paquetes (p.ej., npm init o yarn init en las carpetas correspondientes, pip freeze > requirements.txt para Python). Crea tu primer commit: git add ., git commit -m "Initial project setup". Fase 2: Desarrollo del Backend Construye la lógica del servidor y la gestión de datos. Configurar el Framework Backend: Instala el framework elegido (p.ej., npm install express o pip install django). Sigue la documentación del framework para crear la estructura básica del proyecto (rutas, controladores/vistas, modelos). Diseñar e Implementar la API: Define los endpoints (URLs) que el frontend usará para interactuar con el backend (p.ej., /api/users, /api/posts). Implementa los métodos HTTP correspondientes (GET, POST, PUT, DELETE) para cada endpoint. Define el formato de los datos intercambiados (generalmente JSON). Conectar y Configurar la Base de Datos: Instala el driver o librería necesaria para tu base de datos (p.ej., pg para Node.js/PostgreSQL, psycopg2 para Python/PostgreSQL). Configura la conexión a la base de datos (URL, usuario, contraseña). Usa variables de entorno para datos sensibles. ORM/ODM (Opcional pero muy útil): Usa una librería como Sequelize/TypeORM/Prisma (Node.js), SQLAlchemy/Django ORM (Python), Mongoose (Node.js/MongoDB) para interactuar con la base de datos de forma más abstracta y segura. Define tus modelos de datos usando el ORM/ODM. Implementar la Lógica de Negocio: Escribe el código que realiza las operaciones principales de tu aplicación (crear usuario, guardar post, calcular totales, etc.) en los controladores/servicios. Implementar Autenticación y Autorización: Permite que los usuarios se registren e inicien sesión. Protege ciertos endpoints para que solo usuarios autenticados (o con roles específicos) puedan acceder. Librerías/Estrategias Comunes: JWT (JSON Web Tokens), OAuth2, Sesiones con Cookies. Librerías como Passport.js (Node.js), Django Authentication, Spring Security. Validación de Datos: Valida siempre los datos que llegan del cliente antes de procesarlos o guardarlos en la base de datos. Librerías: express-validator (Node.js/Express), WTForms (Python/Flask), Serializers de Django REST framework. Pruebas Backend: Escribe pruebas unitarias (para funciones individuales) y pruebas de integración (para flujos entre componentes). Herramientas: Jest/Mocha/Chai (JavaScript), PyTest/unittest (Python), JUnit (Java). Herramientas Adicionales: Postman o Insomnia para probar manualmente tus endpoints API. Fase 3: Desarrollo del Frontend Construye la interfaz con la que interactúan los usuarios. Configurar el Framework/Librería Frontend: Usa herramientas CLI para crear la estructura inicial: npx create-react-app my-app, ng new my-app, npm create vue@latest. Organiza tu código en componentes reutilizables (botones, formularios, tarjetas, etc.) y vistas/páginas. Desarrollar la Interfaz de Usuario (UI): Traduce los mockups/diseños a código HTML y CSS. Usa CSS plano, preprocesadores (Sass/LESS) o frameworks CSS (Tailwind CSS, Bootstrap) o librerías de componentes (Material UI, Ant Design, Chakra UI). Enfócate en el diseño responsivo (que se vea bien en móviles, tablets y escritorio). Implementar el Enrutamiento (Routing): Configura la navegación entre las diferentes páginas o vistas de tu aplicación. Librerías: React Router, Vue Router, Angular Router. Gestionar el Estado de la Aplicación: Decide cómo manejar los datos dentro del frontend (datos del usuario, lista de posts, estado del carrito, etc.). Para aplicaciones simples, el estado local de los componentes puede ser suficiente. Para aplicaciones complejas, usa librerías de gestión de estado: Redux/Zustand/Context API (React), Vuex/Pinia (Vue), NgRx/Services (Angular). Conectar con la API del Backend: Usa la Workspace API del navegador o librerías como axios para hacer peticiones HTTP a los endpoints de tu backend. Maneja las respuestas (mostrar datos, manejar errores, mostrar estados de carga). Implementar la Interacción del Usuario: Maneja eventos (clics, envíos de formularios, escritura en inputs). Valida los formularios en el lado del cliente (aunque la validación principal debe estar en el backend). Pruebas Frontend: Pruebas unitarias para funciones de utilidad o lógica compleja. Pruebas de componentes para verificar que renderizan y funcionan correctamente de forma aislada. Pruebas End-to-End (E2E) para simular flujos de usuario completos en el navegador. Herramientas: Jest, React Testing Library, Vue Testing Library, Cypress, Playwright. Fase 4: Integración y Pruebas Completas Asegúrate de que todo funciona junto. Conexión Frontend-Backend: Verifica que todas las llamadas API funcionan como se espera y que los datos fluyen correctamente. Pruebas End-to-End (E2E): Usa herramientas como Cypress o Playwright para automatizar pruebas que simulan a un usuario interactuando con la aplicación completa (iniciar sesión, crear un post, etc.). Pruebas de Usabilidad (Opcional): Pide a usuarios reales (o amigos) que prueben la aplicación y te den feedback. Corrección de Errores (Debugging): Usa las herramientas de desarrollo del navegador, los logs del backend y las herramientas de prueba para encontrar y solucionar problemas. Fase 5: Despliegue (Deployment) Haz que tu aplicación esté disponible en Internet. Elegir un Proveedor de Hosting/Cloud: PaaS (Plataforma como Servicio): Heroku, Vercel (ideal para frontend/serverless), Netlify (ideal para frontend estático), Render, Google App Engine. Más fáciles de gestionar. IaaS (Infraestructura como Servicio): AWS (EC2), Google Cloud (Compute Engine), Azure (Virtual Machines), DigitalOcean Droplets, Linode. Más control, pero más configuración. Contenedores: AWS ECS/EKS, Google Kubernetes Engine (GKE), Azure Kubernetes Service (AKS). Para orquestar contenedores Docker. Preparar la Aplicación para Producción: Build del Frontend: Genera los archivos estáticos optimizados (JS/CSS minificados, etc.) usando los comandos de tu framework (p.ej., npm run build). Variables de Entorno: Configura variables de entorno para producción (claves API, URL de la base de datos de producción, secretos). ¡Nunca las incluyas directamente en el código! Configuración del Servidor: Configura un servidor web como Nginx o Apache si es necesario (a menudo manejado por el PaaS o Docker) para servir los archivos del frontend y actuar como proxy inverso para el backend. Configurar la Base de Datos de Producción: Crea una instancia de base de datos en tu proveedor cloud (p.ej., AWS RDS, Google Cloud SQL) o instala la base de datos en tu servidor. Desplegar el Código: Manual: Subir los archivos mediante FTP/SCP (no recomendado para actualizaciones frecuentes). Integración con Git: Muchos PaaS permiten desplegar automáticamente al hacer git push a una rama específica. CI/CD (Integración Continua / Despliegue Continuo): Configura pipelines automáticas (GitHub Actions, GitLab CI, Jenkins) que prueben, construyan y desplieguen tu código cada vez que hagas push. Este es el método preferido. Docker: Construye imágenes de Docker para tu frontend y backend y despliégalas en tu plataforma elegida. Configurar Dominio y HTTPS: Compra un nombre de dominio (si no tienes uno). Configura los registros DNS para que apunten a tu servidor/plataforma de hosting. Obtén e instala un certificado SSL/TLS (Let's Encrypt ofrece certificados gratuitos) para habilitar HTTPS y asegurar la conexión. Muchos PaaS lo gestionan automáticamente. Monitorización Básica: Revisa los logs después del despliegue para asegurarte de que todo arranca correctamente. Fase 6: Mantenimiento y Escalado Mantén tu aplicación funcionando y mejorando. Monitorización y Logging: Configura herramientas para rastrear errores en tiempo real (Sentry, Rollbar). Monitoriza el rendimiento y la disponibilidad (UptimeRobot, Datadog, New Relic, Prometheus/Grafana). Centraliza los logs de tu aplicación (p.ej., usando ELK stack, Datadog Logs, CloudWatch Logs). Copias de Seguridad (Backups): Configura copias de seguridad regulares y automáticas de tu base de datos. Actualizaciones de Seguridad y Dependencias: Mantén actualizados el sistema operativo, el lenguaje, los frameworks y las librerías para corregir vulnerabilidades. Usa herramientas como npm audit o dependabot (GitHub). Optimización del Rendimiento: Identifica cuellos de botella (consultas lentas a la base de datos, código ineficiente). Optimiza consultas (añade índices a la base de datos). Implementa caché (Redis, Memcached) para datos accedidos frecuentemente. Usa una CDN (Content Delivery Network) como Cloudflare o AWS CloudFront para servir activos estáticos (imágenes, CSS, JS) más rápido. Escalado: Vertical: Aumentar los recursos del servidor actual (CPU, RAM). Horizontal: Añadir más instancias de tu aplicación (servidores) y usar un balanceador de carga para distribuir el tráfico entre ellas. Escalado de Base de Datos: Réplicas de lectura, sharding (particionar datos). Desarrollo Continuo: Añade nuevas funcionalidades basadas en el feedback de los usuarios y las necesidades del negocio, siguiendo el ciclo de desarrollo (Fases 2-5).