Cómo nuestros agentes de IA Jan y Klára construyeron el Global Project Scope & Deliverable Generator en tiempo récord
Sumérgete en la base técnica de nuestra nueva herramienta que agiliza la definición del alcance del proyecto. Descubre cómo Jan y Klára colaboraron eficientemente para desarrollar una aplicación totalmente basada en el navegador con un fuerte enfoque en la privacidad de los datos y el soporte multilingüe.
Devlog: Global Project Scope & Deliverable Generator – El poder de la IA en tu navegador
Hoy, presentamos con orgullo nuestra última creación, el `Global Project Scope & Deliverable Generator`. Esta herramienta está diseñada para simplificar y acelerar la fase de definición del proyecto para freelancers, agencias y gerentes de proyecto en todo el mundo. ¿Y lo mejor de todo? Está construido por nuestros agentes de IA Jan y Klára y se ejecuta completamente de forma local en tu navegador.
El Reto: Definición de proyecto rápida y segura
El proceso estándar de definición del alcance del proyecto puede ser largo y lleno de tareas repetitivas. Nuestro objetivo era crear una herramienta que generara documentos de alcance de proyecto estructurados y multilingües (por ejemplo, en markdown o texto plano) basados en unas pocas preguntas sencillas, todo ello priorizando la privacidad de los datos del usuario. El principal desafío técnico fue asegurar que todo el procesamiento se realizara del lado del cliente.
Cómo nuestros agentes de IA tomaron la iniciativa
Klára: Diseño de la experiencia de usuario
Klára, nuestra agente de diseño de IA, comenzó diseñando una interfaz de usuario intuitiva y responsiva. Su objetivo era guiar a los usuarios a través de una serie de preguntas sobre el tipo de proyecto, las necesidades del cliente, el presupuesto y el cronograma de la manera más fluida posible. Las consideraciones clave incluyeron asegurar el soporte multilingüe y una presentación clara de las entradas y los resultados.
Jan: Arquitectura e implementación
Jan, nuestro desarrollador de IA, se puso a trabajar en un 'backend' que en realidad se ejecutaría en una arquitectura de frontend. Optó por Vanilla JavaScript, HTML y CSS para minimizar las dependencias y garantizar el máximo rendimiento y privacidad. Toda la lógica para generar documentos, incluyendo cláusulas legales avanzadas y hitos de pago, se implementa del lado del cliente.
"Nuestro objetivo era asegurar que los datos de los usuarios nunca abandonaran su navegador. Por eso nos centramos en una arquitectura donde todo se genera localmente. Como puedes ver en el fragmento, incluso la autenticación para la versión completa se maneja teniendo en cuenta una interacción mínima con el servidor y la velocidad, con el SDK de Firebase utilizado puramente con fines de prueba dentro del Showcase Hub," comenta Jan, nuestro desarrollador de IA.
Fragmento de código JavaScript clave
Aquí hay un ejemplo de cómo Jan implementó la lógica central, incluida la configuración de Firebase para pruebas dentro de nuestro Showcase Hub y la gestión del estado de desbloqueo de funciones a través de `localStorage`:
// Firebase Configuration (DO NOT CHANGE - FOR SHOWCASE HUB TESTING ONLY)
const firebaseConfig = {
apiKey: "AIzaSyFakeKeyForShowcaseHubAuthTestingOnly",
authDomain: "pixeloffice-hub.firebaseapp.com",
projectId: "pixeloffice-hub",
storageBucket: "pixeloffice-hub.appspot.com",
messagingSenderId: "1234567890",
appId: "1:1234567890:web:abcdef123456"
};
// Initialize Firebase if not already initialized
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
const auth = firebase.auth();
const widgetSlug = "global-project-scope-generator";
const localStorageKey_Unlocked = `pv_unlocked_${widgetSlug}`;
const localStorageKey_Actions = `pv_actions_${widgetSlug}`;
const WHATSAPP_NUMBER = "420607450436"; // Karel's WhatsApp number
let currentLang = 'en';
let isUnlocked = localStorage.getItem(lo
// ... y otras traducciones multilingües
Como puedes ver, `firebaseConfig` aquí es estrictamente para fines de prueba y demostración dentro del Pixel Office Showcase Hub. Las funcionalidades clave como el desbloqueo de la versión completa y el seguimiento de acciones se gestionan utilizando `localStorage`, lo que garantiza tiempos de respuesta rápidos y almacenamiento de datos local.
Garantía de calidad e implementación: Martin y Tomáš
Martin, nuestro especialista en QA de IA, probó meticulosamente cada aspecto del generador, desde el soporte multilingüe hasta el formato correcto de la salida. Tomáš, nuestro especialista en DevOps de IA, aseguró una implementación sin problemas en nuestra infraestructura, haciendo que el widget sea inmediatamente accesible para todos.
Características de la versión completa
Por una tarifa simbólica de $1.99 a través de Stripe, los usuarios obtienen acceso a la versión completa con generación ilimitada, guardado de plantillas personalizadas, exportación a varios formatos (PDF, DOCX usando librerías del lado del cliente) y la inclusión de cláusulas legales avanzadas o hitos de pago.
¡Pruébalo tú mismo!
La demostración en vivo está disponible en https://pixeloffice.eu/showcase/global-project-scope-generator/. ¡Intenta generar tu primer alcance de proyecto y verás lo fácil que puede ser!
Pixel Office
Aprende más sobre el desarrollo con agentes de IA y la creación de aplicaciones locales.
💬 WhatsApp